suada-components 1.14.1 → 1.14.2

package/dist/components/{index-Br1iBNb-.js → index-OwV2kJJo.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-BHGgzYGY.js'
+	      './YouTube-C5Qo7-fp.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-Dkt1JMEu.js'
+	      './SoundCloud-VBY93K9a.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-DJkAUgzX.js'
+	      './Vimeo-BDBQu0Y2.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-C8orpnZN.js'
+	      './Mux-CIfzMJLz.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-CvrwL8oT.js'
+	      './Facebook-Da7aQfaR.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-DczCq1Xl.js'
+	      './Streamable-COc7XyOA.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-HXhXUxps.js'
+	      './Wistia-Bbz-GliZ.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-CzZICNs7.js'
+	      './Twitch-mN9fqACg.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-DeJSts_G.js'
+	      './DailyMotion-C5kBQAJf.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-DwX3HLBJ.js'
+	      './Mixcloud-eGPur5fP.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-DiiuYWNx.js'
+	      './Vidyard-DXsKZ0PT.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-DxC8Q23-.js'
+	      './Kaltura-C33u4-qE.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-DW8NNRmy.js'
+	      './FilePlayer-Bki_1uWK.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-BSN4ubgN.js'
+	  './Preview-C0Uqc6DI.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) {
@@ -85252,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        ";
@@ -85270,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"
@@ -85299,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'
         })]
       })]
     })]
@@ -85439,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()),
@@ -85454,7 +85475,7 @@ var VideoPlayer = function VideoPlayer(_ref) {
       setEditingTitle('');
       setEditingContent('');
     }
-  }, [onAddNote]);
+  }, [onAddNote, setIsPlaying]);
   var _useHLSSubtitles = useHLSSubtitles({
       videoPlayerRef: videoPlayerRef,
       isSubtitlesChecked: isSubtitlesChecked,
@@ -85560,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) {
@@ -85581,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);
         },

package/dist/components/index.esm.js

@@ -1,4 +1,4 @@
-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-3IkDOjMU.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-NTw33r0X.esm.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'react-transition-group';

package/dist/components/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Br1iBNb-.js');
+var index = require('./index-OwV2kJJo.js');
 require('react/jsx-runtime');
 require('react');
 require('react-transition-group');

package/dist/icons/components/VideoPlayer/NoteEditModal.d.ts

@@ -12,6 +12,7 @@ interface NoteEditModalProps {
     onCancel: () => void;
     onDelete: () => void;
     onSave: () => void;
+    isNewNote?: boolean;
 }
-declare const NoteEditModal: ({ editingTitle, editingContent, onTitleChange, onContentChange, onCancel, onDelete, onSave, }: NoteEditModalProps) => ReactElement;
+declare const NoteEditModal: ({ note, editingTitle, editingContent, onTitleChange, onContentChange, onCancel, onDelete, onSave, isNewNote, }: NoteEditModalProps) => ReactElement;
 export default NoteEditModal;