suada-components 1.9.1 → 1.11.0

package/dist/components/{index-Bs-XxxV4.js → index-BaygwC_K.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-DeQdfkWm.js'
+	      './YouTube-Do1mvujm.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-BHgTfaW7.js'
+	      './SoundCloud-qATRbAFQ.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-BUVxWt7t.js'
+	      './Vimeo-BCY2SATj.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-D_si09u2.js'
+	      './Mux-4tmUDWpp.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-YxZce26V.js'
+	      './Facebook-CjZ7HsBA.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-DTAzjVwd.js'
+	      './Streamable-BTFjBDV_.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-COWrV8QC.js'
+	      './Wistia-Cp8prs3r.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-CnEk-l9R.js'
+	      './Twitch-BQaXeGDA.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-Cr_8IZRR.js'
+	      './DailyMotion-Du0LVn2-.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-BCT5e47d.js'
+	      './Mixcloud-DWbtn99D.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-Cn_LcGwi.js'
+	      './Vidyard-DE_V8Pca.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-krSxvIBr.js'
+	      './Kaltura-CSTN5Rul.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-DqqTufgX.js'
+	      './FilePlayer-CRftl62T.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-CmduMeEZ.js'
+	  './Preview-DGQ-4L3t.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,34 @@ 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, _e;
+  var value = _a.value,
+    theme = _a.theme;
+  return "linear-gradient(\n    to right,\n    ".concat(((_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)', " 0%,\n    ").concat(((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e.main) || 'var(--brand-colors-accent)', " ").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;
+  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)';
 });
 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, _e;
+  var value = _a.value,
+    theme = _a.theme;
+  return "linear-gradient(\n    to right,\n    ".concat(((_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(--neutral-colors-light)', " 0%,\n    ").concat(((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e.main) || 'var(--neutral-colors-light)', " ").concat(value, "%,\n    var(--level-grey-500) ").concat(value, "%,\n    var(--level-grey-500) 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(--neutral-colors-light)';
+}, 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(--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 +82589,11 @@ 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;
+  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) || '#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"])));
@@ -88758,6 +88782,131 @@ var useEventListener = function useEventListener(eventName, handler, element, sh
   }, [eventName, element, shouldRun]);
 };
 
+var PiPContext = /*#__PURE__*/React.createContext(undefined);
+var PiPProvider = function PiPProvider(_a) {
+  var children = _a.children;
+  var _b = React.useState(false),
+    isPiPActive = _b[0],
+    setIsPiPActive = _b[1];
+  var _c = React.useState(null),
+    pipVideoState = _c[0],
+    setPipVideoState = _c[1];
+  var videoElementRef = React.useRef(null);
+  var updateVideoState = React.useCallback(function (state) {
+    setPipVideoState(function (prev) {
+      return prev ? __assign(__assign({}, prev), state) : null;
+    });
+  }, []);
+  var registerVideoElement = React.useCallback(function (element) {
+    videoElementRef.current = element;
+  }, []);
+  var unregisterVideoElement = React.useCallback(function () {
+    videoElementRef.current = null;
+  }, []);
+  var enterPiP = React.useCallback(function (videoElement, videoState) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var error_1;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (!document.pictureInPictureEnabled) {
+              console.warn('Picture-in-Picture is not supported in this browser');
+              return [2 /*return*/, false];
+            }
+            if (document.pictureInPictureElement) {
+              console.warn('Another video is already in Picture-in-Picture mode');
+              return [2 /*return*/, false];
+            }
+            _a.label = 1;
+          case 1:
+            _a.trys.push([1, 5,, 6]);
+            // Store video state
+            setPipVideoState(videoState);
+            videoElementRef.current = videoElement;
+            if (!(videoElement.paused && videoState.isPlaying)) return [3 /*break*/, 3];
+            return [4 /*yield*/, videoElement.play()];
+          case 2:
+            _a.sent();
+            _a.label = 3;
+          case 3:
+            return [4 /*yield*/, videoElement.requestPictureInPicture()];
+          case 4:
+            _a.sent();
+            return [2 /*return*/, true];
+          case 5:
+            error_1 = _a.sent();
+            console.error('Failed to enter picture-in-picture:', error_1);
+            return [2 /*return*/, false];
+          case 6:
+            return [2 /*return*/];
+        }
+      });
+    });
+  }, []);
+  var exitPiP = React.useCallback(function () {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var error_2;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            _a.trys.push([0, 3,, 4]);
+            if (!document.pictureInPictureElement) return [3 /*break*/, 2];
+            return [4 /*yield*/, document.exitPictureInPicture()];
+          case 1:
+            _a.sent();
+            _a.label = 2;
+          case 2:
+            return [2 /*return*/, true];
+          case 3:
+            error_2 = _a.sent();
+            console.error('Failed to exit picture-in-picture:', error_2);
+            return [2 /*return*/, false];
+          case 4:
+            return [2 /*return*/];
+        }
+      });
+    });
+  }, []);
+  // Listen for PiP events
+  React.useEffect(function () {
+    var handlePiPEnter = function handlePiPEnter() {
+      setIsPiPActive(true);
+    };
+    var handlePiPLeave = function handlePiPLeave() {
+      setIsPiPActive(false);
+      // Keep the video state for potential restoration
+      // but don't clear it immediately
+    };
+    document.addEventListener('enterpictureinpicture', handlePiPEnter);
+    document.addEventListener('leavepictureinpicture', handlePiPLeave);
+    return function () {
+      document.removeEventListener('enterpictureinpicture', handlePiPEnter);
+      document.removeEventListener('leavepictureinpicture', handlePiPLeave);
+    };
+  }, []);
+  var value = {
+    isPiPActive: isPiPActive,
+    pipVideoState: pipVideoState,
+    enterPiP: enterPiP,
+    exitPiP: exitPiP,
+    updateVideoState: updateVideoState,
+    registerVideoElement: registerVideoElement,
+    unregisterVideoElement: unregisterVideoElement
+  };
+  return jsxRuntimeExports.jsx(PiPContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+
+var usePiP = function usePiP() {
+  var context = React.useContext(PiPContext);
+  if (context === undefined) {
+    throw new Error('usePiP must be used within a PiPProvider');
+  }
+  return context;
+};
+
 var count = 0;
 var defaultVideoState = {
   muted: false,
@@ -88789,26 +88938,30 @@ function usePlayerControls(_a) {
     isSubtitlesChecked = _e[0],
     setIsSubtitlesChecked = _e[1];
   var _f = React.useState(false),
-    isPiPActive = _f[0],
-    setIsPiPActive = _f[1];
+    isFullscreen = _f[0],
+    setIsFullscreen = _f[1];
   var _g = React.useState(false),
-    isFullscreen = _g[0],
-    setIsFullscreen = _g[1];
-  var _h = React.useState(false),
-    isControlsActive = _h[0],
-    setIsControlsActive = _h[1];
+    isControlsActive = _g[0],
+    setIsControlsActive = _g[1];
   var videoPlayerRef = React.useRef(null);
   var controlRef = React.useRef(null);
   var playerContainerRef = React.useRef(null);
-  var _j = React.useState([]),
-    subtitles = _j[0],
-    setSubtitles = _j[1];
-  var _k = React.useState(''),
-    currentSubtitle = _k[0],
-    setCurrentSubtitle = _k[1];
+  var _h = React.useState([]),
+    subtitles = _h[0],
+    setSubtitles = _h[1];
+  var _j = React.useState(''),
+    currentSubtitle = _j[0],
+    setCurrentSubtitle = _j[1];
   var lastSubtitleIndexRef = React.useRef(null);
   var lastPlaybackTimeRef = React.useRef(0);
   var lastCallTimeRef = React.useRef(Date.now());
+  // Use PiP context instead of local state
+  var _k = usePiP(),
+    isPiPActive = _k.isPiPActive,
+    enterPiP = _k.enterPiP,
+    exitPiP = _k.exitPiP,
+    registerVideoElement = _k.registerVideoElement,
+    unregisterVideoElement = _k.unregisterVideoElement;
   var muted = videoState.muted,
     volume = videoState.volume,
     prevVolume = videoState.prevVolume,
@@ -88838,10 +88991,21 @@ function usePlayerControls(_a) {
       setIsFullscreen(!!document.fullscreenElement);
     };
     var handlePiPEnter = function handlePiPEnter() {
-      setIsPiPActive(true);
+      var _a;
+      // Use context method to update global PiP state
+      var videoElement = (_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getInternalPlayer();
+      if (videoElement && videoElement instanceof HTMLVideoElement) {
+        enterPiP(videoElement, {
+          url: url,
+          currentTime: videoElement.currentTime,
+          isPlaying: isPlaying,
+          volume: videoState.volume,
+          muted: videoState.muted
+        });
+      }
     };
     var handlePiPLeave = function handlePiPLeave() {
-      setIsPiPActive(false);
+      exitPiP();
     };
     document.addEventListener('fullscreenchange', handleFullscreenChange);
     document.addEventListener('enterpictureinpicture', handlePiPEnter);
@@ -88851,6 +89015,8 @@ function usePlayerControls(_a) {
     if (videoElement && videoElement instanceof HTMLVideoElement) {
       videoElement.addEventListener('enterpictureinpicture', handlePiPEnter);
       videoElement.addEventListener('leavepictureinpicture', handlePiPLeave);
+      // Register video element with PiP context
+      registerVideoElement(videoElement);
     }
     return function () {
       document.removeEventListener('fullscreenchange', handleFullscreenChange);
@@ -88861,8 +89027,10 @@ function usePlayerControls(_a) {
         videoElement.removeEventListener('enterpictureinpicture', handlePiPEnter);
         videoElement.removeEventListener('leavepictureinpicture', handlePiPLeave);
       }
+      // Unregister video element from PiP context
+      unregisterVideoElement();
     };
-  }, [url]); // Re-run when URL changes to ensure proper cleanup and setup
+  }, [url, enterPiP, exitPiP, registerVideoElement, unregisterVideoElement, isPlaying, videoState.volume, videoState.muted]); // Re-run when URL changes to ensure proper cleanup and setup
   React.useEffect(function () {
     setStartPlayed(false);
   }, [url]);
@@ -89075,25 +89243,19 @@ function usePlayerControls(_a) {
       console.warn('Picture-in-Picture is not supported in this browser');
       return;
     }
-    if (document.pictureInPictureElement) {
-      document.exitPictureInPicture()["catch"](function (error) {
-        console.error('Failed to exit picture-in-picture:', error);
-      });
+    if (isPiPActive) {
+      // Exit PiP using context method
+      exitPiP();
     } else {
-      // Ensure the video is playing before entering PiP mode
-      if (videoElement.paused && isPlaying) {
-        videoElement.play().then(function () {
-          videoElement.requestPictureInPicture()["catch"](function (error) {
-            console.error('Failed to enter picture-in-picture:', error);
-          });
-        })["catch"](function (error) {
-          console.error('Failed to play video before PiP:', error);
-        });
-      } else {
-        videoElement.requestPictureInPicture()["catch"](function (error) {
-          console.error('Failed to enter picture-in-picture:', error);
-        });
-      }
+      // Enter PiP using context method
+      var pipVideoState = {
+        url: url,
+        currentTime: videoElement.currentTime,
+        isPlaying: isPlaying,
+        volume: videoState.volume,
+        muted: videoState.muted
+      };
+      enterPiP(videoElement, pipVideoState);
     }
   };
   var handleKeyDown = React.useCallback(function (event) {
@@ -89468,131 +89630,6 @@ var VideoPlayer = function VideoPlayer(_a) {
   });
 };
 
-var PiPContext = /*#__PURE__*/React.createContext(undefined);
-var PiPProvider = function PiPProvider(_a) {
-  var children = _a.children;
-  var _b = React.useState(false),
-    isPiPActive = _b[0],
-    setIsPiPActive = _b[1];
-  var _c = React.useState(null),
-    pipVideoState = _c[0],
-    setPipVideoState = _c[1];
-  var videoElementRef = React.useRef(null);
-  var updateVideoState = React.useCallback(function (state) {
-    setPipVideoState(function (prev) {
-      return prev ? __assign(__assign({}, prev), state) : null;
-    });
-  }, []);
-  var registerVideoElement = React.useCallback(function (element) {
-    videoElementRef.current = element;
-  }, []);
-  var unregisterVideoElement = React.useCallback(function () {
-    videoElementRef.current = null;
-  }, []);
-  var enterPiP = React.useCallback(function (videoElement, videoState) {
-    return __awaiter(void 0, void 0, void 0, function () {
-      var error_1;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            if (!document.pictureInPictureEnabled) {
-              console.warn('Picture-in-Picture is not supported in this browser');
-              return [2 /*return*/, false];
-            }
-            if (document.pictureInPictureElement) {
-              console.warn('Another video is already in Picture-in-Picture mode');
-              return [2 /*return*/, false];
-            }
-            _a.label = 1;
-          case 1:
-            _a.trys.push([1, 5,, 6]);
-            // Store video state
-            setPipVideoState(videoState);
-            videoElementRef.current = videoElement;
-            if (!(videoElement.paused && videoState.isPlaying)) return [3 /*break*/, 3];
-            return [4 /*yield*/, videoElement.play()];
-          case 2:
-            _a.sent();
-            _a.label = 3;
-          case 3:
-            return [4 /*yield*/, videoElement.requestPictureInPicture()];
-          case 4:
-            _a.sent();
-            return [2 /*return*/, true];
-          case 5:
-            error_1 = _a.sent();
-            console.error('Failed to enter picture-in-picture:', error_1);
-            return [2 /*return*/, false];
-          case 6:
-            return [2 /*return*/];
-        }
-      });
-    });
-  }, []);
-  var exitPiP = React.useCallback(function () {
-    return __awaiter(void 0, void 0, void 0, function () {
-      var error_2;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            _a.trys.push([0, 3,, 4]);
-            if (!document.pictureInPictureElement) return [3 /*break*/, 2];
-            return [4 /*yield*/, document.exitPictureInPicture()];
-          case 1:
-            _a.sent();
-            _a.label = 2;
-          case 2:
-            return [2 /*return*/, true];
-          case 3:
-            error_2 = _a.sent();
-            console.error('Failed to exit picture-in-picture:', error_2);
-            return [2 /*return*/, false];
-          case 4:
-            return [2 /*return*/];
-        }
-      });
-    });
-  }, []);
-  // Listen for PiP events
-  React.useEffect(function () {
-    var handlePiPEnter = function handlePiPEnter() {
-      setIsPiPActive(true);
-    };
-    var handlePiPLeave = function handlePiPLeave() {
-      setIsPiPActive(false);
-      // Keep the video state for potential restoration
-      // but don't clear it immediately
-    };
-    document.addEventListener('enterpictureinpicture', handlePiPEnter);
-    document.addEventListener('leavepictureinpicture', handlePiPLeave);
-    return function () {
-      document.removeEventListener('enterpictureinpicture', handlePiPEnter);
-      document.removeEventListener('leavepictureinpicture', handlePiPLeave);
-    };
-  }, []);
-  var value = {
-    isPiPActive: isPiPActive,
-    pipVideoState: pipVideoState,
-    enterPiP: enterPiP,
-    exitPiP: exitPiP,
-    updateVideoState: updateVideoState,
-    registerVideoElement: registerVideoElement,
-    unregisterVideoElement: unregisterVideoElement
-  };
-  return jsxRuntimeExports.jsx(PiPContext.Provider, {
-    value: value,
-    children: children
-  });
-};
-
-var usePiP = function usePiP() {
-  var context = React.useContext(PiPContext);
-  if (context === undefined) {
-    throw new Error('usePiP must be used within a PiPProvider');
-  }
-  return context;
-};
-
 var Whiteboard = dt.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  background-color: #ffffff;\n  padding: 20px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 75vh;\n  border: 1px solid #e7e9ed;\n  border-radius: 4px;\n  flex-direction: column;\n  padding: 40px;\n"], ["\n  background-color: #ffffff;\n  padding: 20px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 75vh;\n  border: 1px solid #e7e9ed;\n  border-radius: 4px;\n  flex-direction: column;\n  padding: 40px;\n"])));
 var CenteredText = dt.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  font-weight: 800;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  font-size: 20px;\n  font-family: 'Open Sans', sans-serif;\n  text-align: center;\n  gap: 8px;\n  margin-top: ", ";\n\n  h1 {\n    font-size: 18px;\n    font-weight: 800;\n  }\n\n  h4 {\n    color: #68707a;\n    font-size: 16px;\n    font-weight: 500;\n  }\n"], ["\n  font-weight: 800;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  font-size: 20px;\n  font-family: 'Open Sans', sans-serif;\n  text-align: center;\n  gap: 8px;\n  margin-top: ", ";\n\n  h1 {\n    font-size: 18px;\n    font-weight: 800;\n  }\n\n  h4 {\n    color: #68707a;\n    font-size: 16px;\n    font-weight: 500;\n  }\n"])), function (_a) {
   var marginTop = _a.marginTop;

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-C4Mk2H3N.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-BKfTO00H.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;