suada-components 1.14.0 → 1.14.2

package/dist/{index-B4jmlZxa.js → index-Cy5Oe830.js}

@@ -29997,7 +29997,7 @@ var RecordVoiceOverOutlined$1 = createSvgIcon$1( /*#__PURE__*/require$$2$2.jsx("
   d: "M9 13c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 8c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4m-6 4c.22-.72 3.31-2 6-2 2.7 0 5.8 1.29 6 2zM15.08 7.05c.84 1.18.84 2.71 0 3.89l1.68 1.69c2.02-2.02 2.02-5.07 0-7.27zM20.07 2l-1.63 1.63c2.77 3.02 2.77 7.56 0 10.74L20.07 16c3.9-3.89 3.91-9.95 0-14"
 }), 'RecordVoiceOverOutlined');
 
-var _templateObject$q, _templateObject2$k, _templateObject3$g, _templateObject4$d, _templateObject5$9, _templateObject6$8, _templateObject7$6, _templateObject8$6, _templateObject9$5, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$3, _templateObject14$3, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32;
+var _templateObject$q, _templateObject2$k, _templateObject3$g, _templateObject4$d, _templateObject5$9, _templateObject6$8, _templateObject7$6, _templateObject8$6, _templateObject9$5, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$3, _templateObject14$3, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32;
 // CourseLayout
 dt.span(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral$1([""])));
 var GridItemContentHeader = dt.header(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteral$1(["\n  display: flex;\n  justify-content: space-between;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
@@ -30020,7 +30020,7 @@ var CardActionBar = dt.div(_templateObject9$5 || (_templateObject9$5 = _taggedTe
   var $switched = _ref4.$switched;
   return $switched ? "\n    top: 0px;\n    left: 0px;\n    grid-template-columns: 1fr 35px;\n  " : "\n    bottom: 0px;\n    right: 0px;\n    justify-content: end;\n    grid-template-columns: 35px 35px;\n  ";
 });
-var StylesCardWrapper = dt.div(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteral$1(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  cursor: ", ";\n  height: 100%;\n  border-radius: 12px !important;\n  &:hover {\n    .action_block {\n      background: rgba(255, 255, 255, 0.59) !important;\n    }\n  }\n"])), function (_ref5) {
+var StylesCardWrapper = dt.div(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteral$1(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  cursor: ", ";\n  height: 100%;\n  border-radius: 12px !important;\n  &:hover {\n    .action_block {\n      background: rgba(255, 255, 255, 0.59) !important;\n    }\n  }\n"])), function (_ref5) {
   var $canOpen = _ref5.$canOpen;
   return $canOpen ? 'pointer' : 'default';
 });
@@ -40642,7 +40642,7 @@ function requireCancel () {
 var CancelExports = /*@__PURE__*/ requireCancel();
 var CancelIcon = /*@__PURE__*/getDefaultExportFromCjs(CancelExports);
 
-var _templateObject$k, _templateObject2$f, _templateObject3$b, _templateObject4$8, _templateObject5$7, _templateObject6$6, _templateObject7$4, _templateObject8$4, _templateObject9$3, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
+var _templateObject$k, _templateObject2$f, _templateObject3$b, _templateObject4$8, _templateObject5$7, _templateObject6$6, _templateObject7$4, _templateObject8$4, _templateObject9$3, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
 dt.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral$1(["\n  position: relative;\n  cursor: pointer;\n  overflow: hidden;\n  padding: 10px;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  border-radius: 4px;\n  height: 100%;\n  transition: border 0.2s ease;\n\n  .image_wrapper {\n    position: relative;\n    padding-top: 10px;\n    width: 100px;\n    height: 100px;\n    border-radius: 4px;\n    svg {\n      position: absolute;\n      right: -11px;\n      top: 0px;\n    }\n    img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n\n  .video_wrapper {\n    padding: 5px 10px;\n    background: #eee;\n    margin-top: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    svg {\n      color: red;\n    }\n  }\n\n  .file_wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    box-sizing: border-box;\n    svg {\n      font-size: 20px;\n      color: red;\n      margin-left: 10px;\n    }\n  }\n\n  label {\n    cursor: pointer;\n    display: flex;\n    .MuiSvgIcon-fontSizeLarge {\n      font-size: 5.1875rem;\n    }\n\n    svg {\n      transform: scale(0.8);\n      transition: transform 0.2s ease;\n    }\n  }\n  input {\n    opacity: 0;\n    position: absolute;\n    z-index: -1;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n  }\n\n  &.full {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    header {\n      margin-right: 15px;\n    }\n\n    label {\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n    }\n\n    label svg {\n      transform: scale(1);\n    }\n  }\n\n  &.uploaded {\n    border: 1px solid rgba(0, 0, 0, 0.3);\n\n    header {\n      color: rgba(0, 0, 0, 0.74);\n    }\n\n    label svg {\n      transform: scale(1);\n    }\n  }\n"])));
 dt.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral$1(["\n  position: absolute;\n  z-index: 2;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  background: #fff;\n  border-radius: 4px;\n"])));
 dt.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteral$1(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  padding: 0 30px;\n  > div {\n    width: 100%;\n    text-align: center;\n  }\n"])));
@@ -40653,7 +40653,7 @@ dt.div(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteral$1(["\n
 // Uploader
 var Container$3 = dt.div(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteral$1(["\n  width: 100%;\n  box-sizing: border-box;\n  padding: 14px 10px;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  display: grid;\n  grid-template-columns: 86px auto;\n  align-items: center;\n  position: relative;\n"])));
 var ItemContainer = dt.div(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteral$1([""])));
-dt.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteral$1(["\n  width: 390px;\n"])));
+dt.div(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteral$1(["\n  width: 390px;\n"])));
 var CancelButton = dt.div(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  cursor: pointer;\n"])), function (_ref) {
   var right = _ref.right;
   return right || '-12px';
@@ -76934,7 +76934,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.youtube,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerYouTube' */
-	      './YouTube-DCrrjdHh.js'
+	      './YouTube-DLazCb1c.js'
 	    ); }).then(function (n) { return n.YouTube; }))
 	  },
 	  {
@@ -76943,7 +76943,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.soundcloud,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerSoundCloud' */
-	      './SoundCloud-DeywKljz.js'
+	      './SoundCloud-CflnI1iR.js'
 	    ); }).then(function (n) { return n.SoundCloud; }))
 	  },
 	  {
@@ -76952,7 +76952,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.vimeo,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerVimeo' */
-	      './Vimeo-Dy4WCWO0.js'
+	      './Vimeo-DAmTxe9O.js'
 	    ); }).then(function (n) { return n.Vimeo; }))
 	  },
 	  {
@@ -76961,7 +76961,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.mux,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerMux' */
-	      './Mux-BLTI9IWB.js'
+	      './Mux-CwX0Bvy9.js'
 	    ); }).then(function (n) { return n.Mux; }))
 	  },
 	  {
@@ -76970,7 +76970,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.facebook,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerFacebook' */
-	      './Facebook-BashWh-t.js'
+	      './Facebook-CFGbzZng.js'
 	    ); }).then(function (n) { return n.Facebook; }))
 	  },
 	  {
@@ -76979,7 +76979,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.streamable,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerStreamable' */
-	      './Streamable-0FgClTJ4.js'
+	      './Streamable-ZxhRSx88.js'
 	    ); }).then(function (n) { return n.Streamable; }))
 	  },
 	  {
@@ -76988,7 +76988,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.wistia,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerWistia' */
-	      './Wistia-DfJIi1rZ.js'
+	      './Wistia-D5M5_5T-.js'
 	    ); }).then(function (n) { return n.Wistia; }))
 	  },
 	  {
@@ -76997,7 +76997,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.twitch,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerTwitch' */
-	      './Twitch-BTHbLK7l.js'
+	      './Twitch-D9AdPTpo.js'
 	    ); }).then(function (n) { return n.Twitch; }))
 	  },
 	  {
@@ -77006,7 +77006,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.dailymotion,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerDailyMotion' */
-	      './DailyMotion-C56t9uqg.js'
+	      './DailyMotion-B879fZIp.js'
 	    ); }).then(function (n) { return n.DailyMotion; }))
 	  },
 	  {
@@ -77015,7 +77015,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.mixcloud,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerMixcloud' */
-	      './Mixcloud-DQgAbO_k.js'
+	      './Mixcloud-BtZBdUYf.js'
 	    ); }).then(function (n) { return n.Mixcloud; }))
 	  },
 	  {
@@ -77024,7 +77024,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.vidyard,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerVidyard' */
-	      './Vidyard-B-WO0bkJ.js'
+	      './Vidyard-Bju6_sKd.js'
 	    ); }).then(function (n) { return n.Vidyard; }))
 	  },
 	  {
@@ -77033,7 +77033,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.kaltura,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerKaltura' */
-	      './Kaltura-BRPnVmjt.js'
+	      './Kaltura-B5biRnxh.js'
 	    ); }).then(function (n) { return n.Kaltura; }))
 	  },
 	  {
@@ -77045,7 +77045,7 @@ function requirePlayers () {
 	    },
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerFilePlayer' */
-	      './FilePlayer-BUnkIHrE.js'
+	      './FilePlayer-wtmGupiY.js'
 	    ); }).then(function (n) { return n.FilePlayer; }))
 	  }
 	];
@@ -77866,7 +77866,7 @@ function requireReactPlayer () {
 	var import_Player = __toESM(/*@__PURE__*/ requirePlayer());
 	const Preview = (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	  /* webpackChunkName: 'reactPlayerPreview' */
-	  './Preview-BRTt_uNR.js'
+	  './Preview-CCZGgYW1.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;
@@ -78075,7 +78075,7 @@ function requireLib () {
 var libExports = /*@__PURE__*/ requireLib();
 var ReactPlayer = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 
-var _templateObject$a, _templateObject2$8, _templateObject3$5, _templateObject4$3, _templateObject5$3, _templateObject6$3, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1;
+var _templateObject$a, _templateObject2$8, _templateObject3$5, _templateObject4$3, _templateObject5$3, _templateObject6$3, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1;
 var StyledVideoPlayerWrapper = dt.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral$1(["\n  cursor: pointer;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > .react-player {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    border-radius: 8px;\n    height: 50%;\n\n    & > video {\n      height: fit-content;\n      width: 100%;\n      object-fit: contain;\n      border-radius: 8px;\n      background-color: var(--neutral-colors-dark);\n    }\n  }\n"])));
 var StyledWrapper = dt.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral$1(["\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  border-radius: 8px;\n  overflow: hidden;\n\n  &::before {\n    content: '';\n    display: block;\n    padding-top: 56.25%;\n  }\n\n  & > ", " {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n"])), StyledVideoPlayerWrapper);
 var StyledPlayerLoader = dt.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: 8px;\n  background: #e7e9ed;\n  display: flex;\n  align-items: center;\n  top: 0;\n  bottom: 0;\n  margin: auto 0;\n  color: var(--neutral-colors-light);\n  justify-content: center;\n  z-index: 5;\n"])));
@@ -78116,7 +78116,7 @@ var StyledNoteMarkersOverlay = dt.div(_templateObject8$2 || (_templateObject8$2
   return !props.$isFullscreen ? "\n    ".concat(StyledWrapper, ":hover & {\n      opacity: 1 !important;\n    }\n  ") : '';
 });
 var noteMarkerPulse = mt(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteral$1(["\n  0% {\n    transform: translate(-50%, -50%) scale(1);\n    opacity: 0.4;\n  }\n  50% {\n    transform: translate(-50%, -50%) scale(1.1);\n    opacity: 0.2;\n  }\n  100% {\n    transform: translate(-50%, -50%) scale(1);\n    opacity: 0.4;\n  }\n"])));
-var StyledNoteMarker = dt.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  ", "\n  left: ", ";\n  width: ", ";\n  height: ", ";\n  background-color: #ffd700;\n  border-radius: 50%;\n  cursor: pointer;\n  pointer-events: auto;\n  border: 2px solid #fff;\n  box-shadow: ", ";\n  transition: all 0.2s ease;\n  z-index: ", ";\n\n  &:hover {\n    transform: translateX(-50%) scale(1.2);\n    background-color: #ffed4e;\n    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);\n  }\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    background-color: #ffd700;\n    transform: translate(-50%, -50%);\n    opacity: 0.4;\n    animation: ", " 3s infinite;\n  }\n"])), function (props) {
+var StyledNoteMarker = dt.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  ", "\n  left: ", ";\n  width: ", ";\n  height: ", ";\n  background-color: #ffd700;\n  border-radius: 50%;\n  cursor: pointer;\n  pointer-events: auto;\n  border: 2px solid #fff;\n  box-shadow: ", ";\n  transition: all 0.2s ease;\n  z-index: ", ";\n\n  &:hover {\n    transform: translateX(-50%) scale(1.2);\n    background-color: #ffed4e;\n    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);\n  }\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    background-color: #ffd700;\n    transform: translate(-50%, -50%);\n    opacity: 0.4;\n    animation: ", " 3s infinite;\n  }\n"])), function (props) {
   return props.$isFullscreen ? "top: auto; bottom: 0; transform: translateX(-50%);" : "bottom: -2px; transform: translateX(-50%);";
 }, function (props) {
   return "".concat(props.$position, "%");
@@ -78149,7 +78149,7 @@ var StyledNoteModal = dt.div(_templateObject14$1 || (_templateObject14$1 = _tagg
   }
 });
 
-var _templateObject$9, _templateObject2$7, _templateObject3$4, _templateObject4$2, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+var _templateObject$9, _templateObject2$7, _templateObject3$4, _templateObject4$2, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
 var StyledControls = dt.div(_templateObject$9 || (_templateObject$9 = _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;
@@ -78254,7 +78254,7 @@ var BaseIconContainer = dt.div(_templateObject8$1 || (_templateObject8$1 = _tagg
   return 'var(--video-player-primary-color, #08C694)'; // fallback
 });
 var StyledHeartIconContainer = dt(BaseIconContainer)(_templateObject9$1 || (_templateObject9$1 = _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 StyledDownloadIconContainer = dt(BaseIconContainer)(_templateObject10$1 || (_templateObject10$1 = _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: ", ";\n    \n    & > svg > path {\n      fill: ", " !important;\n    }\n  }\n"])), function (_ref9) {
@@ -78432,6 +78432,20 @@ var StyledPlaybackSpeedItem = dt.p(_templateObject3$3 || (_templateObject3$3 = _
   fontStyle: 'bodyS'
 });
 
+// Translation fallbacks for playback speed labels
+var getTranslationFallback = function getTranslationFallback(key) {
+  var translations = {
+    'general.playback_speed': 'Playback Speed',
+    'playback_speed.2x': '2x',
+    'playback_speed.1_75x': '1.75x',
+    'playback_speed.1_5x': '1.5x',
+    'playback_speed.1_25x': '1.25x',
+    'playback_speed.1x': '1x',
+    'playback_speed.0_75x': '0.75x',
+    'playback_speed.0_5x': '0.5x'
+  };
+  return translations[key] || key;
+};
 var PlaybackSpeedMenu = function PlaybackSpeedMenu(_ref) {
   var playbackSpeed = _ref.playbackSpeed,
     onPlaybackSpeedChange = _ref.onPlaybackSpeedChange,
@@ -78444,8 +78458,6 @@ var PlaybackSpeedMenu = function PlaybackSpeedMenu(_ref) {
     isMenuActive = _useMenuToggle.isVisible,
     menuPosition = _useMenuToggle.menuPosition,
     toggleMenu = _useMenuToggle.toggleMenu;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
   return require$$2$2.jsxs(StyledPlaybackMenuWrapper, {
     ref: menuRef,
     className: menuWrapperClassName,
@@ -78457,7 +78469,7 @@ var PlaybackSpeedMenu = function PlaybackSpeedMenu(_ref) {
       "$position": menuPosition,
       style: customMenuStyles,
       children: [require$$2$2.jsx("h2", {
-        children: t('general.playback_speed')
+        children: getTranslationFallback('general.playback_speed')
       }), PLAYBACK_SPEED_LIST.map(function (_ref2, index) {
         var label = _ref2.label,
           value = _ref2.value;
@@ -78466,7 +78478,7 @@ var PlaybackSpeedMenu = function PlaybackSpeedMenu(_ref) {
             onPlaybackSpeedChange(value);
             toggleMenu();
           },
-          children: [t(label), value === playbackSpeed && require$$2$2.jsx(VideoCheckmarkIcon, {})]
+          children: [getTranslationFallback(label), value === playbackSpeed && require$$2$2.jsx(VideoCheckmarkIcon, {})]
         }, index);
       })]
     })]
@@ -85240,15 +85252,16 @@ var useHLSSubtitles = function useHLSSubtitles(_ref) {
   };
 };
 
-var _templateObject$7, _templateObject2$5, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject$7, _templateObject2$5, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 var StyledModalHeader = dt.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral$1(["\n  padding: 16px 20px 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 1px solid #e2e8f0;\n  margin-bottom: 16px;\n"])));
 var StyledModalTitle = dt.h3(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral$1(["\n  font-size: 16px;\n  font-weight: 600;\n  margin: 0;\n  color: #1a202c;\n"])));
-var StyledCloseButton = dt.button(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral$1(["\n  background: none;\n  border: none;\n  font-size: 20px;\n  cursor: pointer;\n  color: #718096;\n  padding: 0;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    color: #2d3748;\n  }\n"])));
-var StyledModalContent = dt.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral$1(["\n  padding: 0 20px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n"])));
-var StyledInput = dt.input(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral$1(["\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  font-size: 14px;\n  outline: none;\n\n  &:focus {\n    border-color: #3182ce;\n    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);\n  }\n"])));
-var StyledTextarea = dt.textarea(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral$1(["\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  font-size: 14px;\n  outline: none;\n  resize: vertical;\n  min-height: 80px;\n  flex: 1;\n\n  &:focus {\n    border-color: #3182ce;\n    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);\n  }\n"])));
-var StyledModalFooter = dt.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral$1(["\n  padding: 16px 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-top: 1px solid #e2e8f0;\n  margin-top: auto;\n"])));
-var StyledButton = dt.button(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral$1(["\n  padding: 8px 16px;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n\n  ", "\n"])), function (props) {
+var StyledTimestamp = dt.div(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral$1(["\n  font-size: 12px;\n  color: #718096;\n  font-weight: 500;\n  background: #f7fafc;\n  padding: 4px 8px;\n  border-radius: 4px;\n"])));
+var StyledCloseButton = dt.button(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral$1(["\n  background: none;\n  border: none;\n  font-size: 20px;\n  cursor: pointer;\n  color: #718096;\n  padding: 0;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    color: #2d3748;\n  }\n"])));
+var StyledModalContent = dt.div(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral$1(["\n  padding: 0 20px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n"])));
+var StyledInput = dt.input(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral$1(["\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  font-size: 14px;\n  outline: none;\n\n  &:focus {\n    border-color: #3182ce;\n    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);\n  }\n"])));
+var StyledTextarea = dt.textarea(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral$1(["\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  font-size: 14px;\n  outline: none;\n  resize: vertical;\n  min-height: 80px;\n  flex: 1;\n\n  &:focus {\n    border-color: #3182ce;\n    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);\n  }\n"])));
+var StyledModalFooter = dt.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral$1(["\n  padding: 16px 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-top: 1px solid #e2e8f0;\n  margin-top: auto;\n"])));
+var StyledButton = dt.button(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral$1(["\n  padding: 8px 16px;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n\n  ", "\n"])), function (props) {
   switch (props.$variant) {
     case 'primary':
       return "\n          background-color: #3182ce;\n          color: white;\n          &:hover { background-color: #2c5aa0; }\n        ";
@@ -85258,19 +85271,33 @@ var StyledButton = dt.button(_templateObject8 || (_templateObject8 = _taggedTemp
       return "\n          background-color: #f7fafc;\n          color: #2d3748;\n          border: 1px solid #e2e8f0;\n          &:hover { background-color: #edf2f7; }\n        ";
   }
 });
-var StyledButtonGroup = dt.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral$1(["\n  display: flex;\n  gap: 8px;\n"])));
+var StyledButtonGroup = dt.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral$1(["\n  display: flex;\n  gap: 8px;\n"])));
 var NoteEditModal = function NoteEditModal(_ref) {
-  var editingTitle = _ref.editingTitle,
+  var note = _ref.note,
+    editingTitle = _ref.editingTitle,
     editingContent = _ref.editingContent,
     onTitleChange = _ref.onTitleChange,
     onContentChange = _ref.onContentChange,
     onCancel = _ref.onCancel,
     onDelete = _ref.onDelete,
     onSave = _ref.onSave;
+    _ref.isNewNote;
+  var isEmptyNote = !note.id || note.id.startsWith('note_');
+  var modalTitle = isEmptyNote ? 'Add Note' : 'Edit Note';
+  var timestamp = FormatSecondsToTimeString(note.moment);
   return require$$2$2.jsxs(require$$2$2.Fragment, {
     children: [require$$2$2.jsxs(StyledModalHeader, {
-      children: [require$$2$2.jsx(StyledModalTitle, {
-        children: "Edit Note"
+      children: [require$$2$2.jsxs("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '12px'
+        },
+        children: [require$$2$2.jsx(StyledModalTitle, {
+          children: modalTitle
+        }), require$$2$2.jsxs(StyledTimestamp, {
+          children: ["at ", timestamp]
+        })]
       }), require$$2$2.jsx(StyledCloseButton, {
         onClick: onCancel,
         children: "\xD7"
@@ -85287,18 +85314,21 @@ var NoteEditModal = function NoteEditModal(_ref) {
         onChange: onContentChange
       })]
     }), require$$2$2.jsxs(StyledModalFooter, {
-      children: [require$$2$2.jsx(StyledButton, {
+      children: [!isEmptyNote && require$$2$2.jsx(StyledButton, {
         onClick: onDelete,
         "$variant": "danger",
         children: "Delete"
       }), require$$2$2.jsxs(StyledButtonGroup, {
+        style: {
+          marginLeft: isEmptyNote ? 'auto' : 'initial'
+        },
         children: [require$$2$2.jsx(StyledButton, {
           onClick: onCancel,
           children: "Cancel"
         }), require$$2$2.jsx(StyledButton, {
           onClick: onSave,
           "$variant": "primary",
-          children: "Save"
+          children: isEmptyNote ? 'Add Note' : 'Save'
         })]
       })]
     })]
@@ -85427,10 +85457,13 @@ var VideoPlayer = function VideoPlayer(_ref) {
   // Handle adding new notes
   var handleAddNote = React.useCallback(function () {
     var _a;
+    // Stop the video when adding a note
+    setIsPlaying(false);
     if (onAddNote) {
+      // If external handler is provided, use it (e.g., Notes tab modal)
       onAddNote();
     } else {
-      // Create a new note at current time if no external handler
+      // Only create internal modal if no external handler
       var currentTime = ((_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getCurrentTime()) || 0;
       var newNote = {
         id: "note_".concat(Date.now()),
@@ -85442,7 +85475,7 @@ var VideoPlayer = function VideoPlayer(_ref) {
       setEditingTitle('');
       setEditingContent('');
     }
-  }, [onAddNote]);
+  }, [onAddNote, setIsPlaying]);
   var _useHLSSubtitles = useHLSSubtitles({
       videoPlayerRef: videoPlayerRef,
       isSubtitlesChecked: isSubtitlesChecked,
@@ -85548,6 +85581,13 @@ var VideoPlayer = function VideoPlayer(_ref) {
       return _ref4.apply(this, arguments);
     };
   }();
+  // Sync editing state when external editing note changes
+  React.useEffect(function () {
+    if (editingNote) {
+      setEditingTitle(editingNote.title);
+      setEditingContent(editingNote.description || '');
+    }
+  }, [editingNote]);
   var renderNoteEditModal = function renderNoteEditModal() {
     if (!currentEditingNote) return null;
     var noteMarker = noteMarkers === null || noteMarkers === void 0 ? void 0 : noteMarkers.find(function (marker) {
@@ -85569,8 +85609,8 @@ var VideoPlayer = function VideoPlayer(_ref) {
         note: currentEditingNote,
         notePosition: notePosition,
         alignment: modalAlignment,
-        editingTitle: editingNote ? currentEditingNote.title : editingTitle,
-        editingContent: editingNote ? currentEditingNote.description || '' : editingContent,
+        editingTitle: editingTitle,
+        editingContent: editingContent,
         onTitleChange: function onTitleChange(e) {
           return setEditingTitle(e.target.value);
         },