suada-components 1.3.0 → 1.5.0

package/dist/components/{index-C_u0zRwP.esm.js → index-0oGMHkIv.esm.js}

@@ -18837,7 +18837,7 @@ const _excluded$13 = ["onChange", "maxRows", "minRows", "style", "value"];
 function getStyleValue(value) {
   return parseInt(value, 10) || 0;
 }
-const styles$3 = {
+const styles$4 = {
   shadow: {
     // Visibility needed to hide the extra text area on iPads
     visibility: 'hidden',
@@ -19025,7 +19025,7 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
       readOnly: true,
       ref: hiddenTextareaRef,
       tabIndex: -1,
-      style: _extends$2({}, styles$3.shadow, style, {
+      style: _extends$2({}, styles$4.shadow, style, {
         paddingTop: 0,
         paddingBottom: 0
       })
@@ -19853,7 +19853,7 @@ var ArrowDropDownIcon$2 = createSvgIcon$1( /*#__PURE__*/jsxRuntimeExports.jsx("p
 }), 'ArrowDropDown');
 
 const _excluded$11 = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
-const styles$2 = {
+const styles$3 = {
   entering: {
     opacity: 1
   },
@@ -19962,7 +19962,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
         style: _extends$2({
           opacity: 0,
           visibility: state === 'exited' && !inProp ? 'hidden' : undefined
-        }, styles$2[state], style, children.props.style),
+        }, styles$3[state], style, children.props.style),
         ref: handleRef
       }, childProps));
     }
@@ -23975,7 +23975,7 @@ const _excluded$O = ["addEndListener", "appear", "children", "easing", "in", "on
 function getScale$1(value) {
   return `scale(${value}, ${value ** 2})`;
 }
-const styles$1 = {
+const styles$2 = {
   entering: {
     opacity: 1,
     transform: getScale$1(1)
@@ -24131,7 +24131,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
           opacity: 0,
           transform: getScale$1(0.75),
           visibility: state === 'exited' && !inProp ? 'hidden' : undefined
-        }, styles$1[state], style, children.props.style),
+        }, styles$2[state], style, children.props.style),
         ref: handleRef
       }, childProps));
     }
@@ -32375,7 +32375,7 @@ var CourseStatusContainer = dt.div(templateObject_13$2 || (templateObject_13$2 =
   var $status = _a.$status;
   return !$status ? '#EA382A' : '#00905E';
 });
-dt.div(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  div {\n    font-size: 13px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  div {\n    font-size: 13px;\n  }\n"])));
+dt.div(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  div {\n    font-size: 13px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  div {\n    font-size: 13px;\n  }\n"])));
 var TooltipContent = dt.div(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  & > :first-child {\n    font-size: 14px;\n    margin-bottom: 5px;\n  }\n  div {\n    font-size: 14px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    & > .tooltip-text {\n      font-size: 12px;\n      margin-top: 5px;\n      text-align: center;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  & > :first-child {\n    font-size: 14px;\n    margin-bottom: 5px;\n  }\n  div {\n    font-size: 14px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    & > .tooltip-text {\n      font-size: 12px;\n      margin-top: 5px;\n      text-align: center;\n    }\n  }\n"])));
 var StyledCardBottomContainer = dt.div(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  flex-direction: column !important;\n  align-self: flex-end;\n  gap: 10px;\n  padding-bottom: 10px;\n"], ["\n  display: flex;\n  width: 100%;\n  flex-direction: column !important;\n  align-self: flex-end;\n  gap: 10px;\n  padding-bottom: 10px;\n"])));
 var StyledActionsContainer = dt.div(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row !important;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: row !important;\n  width: 100%;\n"])));
@@ -32411,7 +32411,7 @@ var GridItemLessons = dt.div(templateObject_23$1 || (templateObject_23$1 = __mak
 }, function (props) {
   return props.checked ? '#333333' : '#20a8c6';
 });
-var StyledToolTipContainer = dt.div(templateObject_24$1 || (templateObject_24$1 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var StyledToolTipContainer = dt.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
 dt.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 6px 10px;\n  transition: 0.3s ease;\n  border-radius: 5px;\n  opacity: ", ";\n  &:hover {\n    background: rgba(0, 0, 0, 0.1);\n  }\n  svg {\n    font-size: 1rem;\n    margin-right: 6px;\n    width: 20px;\n    height: 20px;\n  }\n  svg path {\n    width: 20px;\n    height: 20px;\n    fill: #717882;\n  }\n  /* .MuiTypography-body1 {\n    font-size: 0.875rem;\n  } */\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 6px 10px;\n  transition: 0.3s ease;\n  border-radius: 5px;\n  opacity: ", ";\n  &:hover {\n    background: rgba(0, 0, 0, 0.1);\n  }\n  svg {\n    font-size: 1rem;\n    margin-right: 6px;\n    width: 20px;\n    height: 20px;\n  }\n  svg path {\n    width: 20px;\n    height: 20px;\n    fill: #717882;\n  }\n  /* .MuiTypography-body1 {\n    font-size: 0.875rem;\n  } */\n"])), function (_a) {
   var disabled = _a.disabled;
   return disabled ? '0.5' : '1';
@@ -32426,7 +32426,7 @@ var GridItem = dt.div(templateObject_32 || (templateObject_32 = __makeTemplateOb
   var $isFromUser = _a.$isFromUser;
   return $isFromUser && "\n  figure {\n    position: relative;\n    &:after {\n      content: 'View Analytics';\n      position: absolute;\n      top: 0;\n      opacity: 0;\n      color: #06c68f;\n      left: 0;\n      font-size: 24px;\n      font-weight: 700;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: rgba(255, 255, 255, 0.9);\n      width: 100%;\n      height: 100%;\n      transition: opacity 0.3s ease;\n      z-index: 10;\n    }\n  }\n\n  &:hover {\n    figure {\n      &:after {\n        opacity: 1;\n      }\n    }\n  }\n  " || '';
 });
-var templateObject_1$o, templateObject_2$j, templateObject_3$f, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$4, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32;
+var templateObject_1$o, templateObject_2$j, templateObject_3$f, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$4, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32;
 
 var TooltipHeight$1 = function TooltipHeight(_a) {
   var text = _a.text,
@@ -36473,7 +36473,7 @@ var FileCopyIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
 });
 FileCopyIcon.displayName = 'FileCopyIcon';
 
-var HeadsetIcon$1 = /*#__PURE__*/forwardRef(function (_a, ref) {
+var HeadsetIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
   var className = _a.className,
     onClick = _a.onClick,
     _b = _a.fill,
@@ -36495,7 +36495,7 @@ var HeadsetIcon$1 = /*#__PURE__*/forwardRef(function (_a, ref) {
     })
   }));
 });
-HeadsetIcon$1.displayName = 'HeadsetIcon';
+HeadsetIcon.displayName = 'HeadsetIcon';
 
 var LockIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
   var className = _a.className,
@@ -37454,7 +37454,7 @@ var HighlightOffRoundedIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
 });
 HighlightOffRoundedIcon.displayName = 'HighlightOffRoundedIcon';
 
-var InsertDriveFileIcon$1 = /*#__PURE__*/forwardRef(function (_a, ref) {
+var InsertDriveFileIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
   var className = _a.className,
     onClick = _a.onClick,
     _b = _a.fill,
@@ -37479,9 +37479,9 @@ var InsertDriveFileIcon$1 = /*#__PURE__*/forwardRef(function (_a, ref) {
     })]
   }));
 });
-InsertDriveFileIcon$1.displayName = 'InsertDriveFileIcon';
+InsertDriveFileIcon.displayName = 'InsertDriveFileIcon';
 
-var OndemandVideoIcon$1 = /*#__PURE__*/forwardRef(function (_a, ref) {
+var OndemandVideoIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
   var className = _a.className,
     onClick = _a.onClick,
     _b = _a.fill,
@@ -37506,7 +37506,7 @@ var OndemandVideoIcon$1 = /*#__PURE__*/forwardRef(function (_a, ref) {
     })]
   }));
 });
-OndemandVideoIcon$1.displayName = 'OndemandVideoIcon';
+OndemandVideoIcon.displayName = 'OndemandVideoIcon';
 
 var PublishIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
   var className = _a.className,
@@ -37676,7 +37676,7 @@ var VolumeUpIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
     _b = _a.fill,
     fill = _b === void 0 ? '#68707A' : _b,
     props = __rest(_a, ["className", "onClick", "fill"]);
-  return jsxRuntimeExports.jsxs("svg", __assign({
+  return jsxRuntimeExports.jsx("svg", __assign({
     ref: ref,
     width: '24',
     height: '24',
@@ -37686,18 +37686,15 @@ var VolumeUpIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
     className: className,
     onClick: onClick
   }, props, {
-    children: [jsxRuntimeExports.jsx("path", {
-      d: 'M0 0h24v24H0V0z',
-      fill: 'none'
-    }), jsxRuntimeExports.jsx("path", {
+    children: jsxRuntimeExports.jsx("path", {
       d: 'M3 9v6h4l5 5V4L7 9H3zm7-.17v6.34L7.83 13H5v-2h2.83L10 8.83zM16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77 0-4.28-2.99-7.86-7-8.77z',
       fill: fill
-    })]
+    })
   }));
 });
 VolumeUpIcon.displayName = 'VolumeUpIcon';
 
-var FileUploadOutlinedIcon$1 = /*#__PURE__*/forwardRef(function (_a, ref) {
+var FileUploadOutlinedIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
   var className = _a.className,
     onClick = _a.onClick,
     _b = _a.fill,
@@ -37727,7 +37724,7 @@ var FileUploadOutlinedIcon$1 = /*#__PURE__*/forwardRef(function (_a, ref) {
     })]
   }));
 });
-FileUploadOutlinedIcon$1.displayName = 'FileUploadOutlinedIcon';
+FileUploadOutlinedIcon.displayName = 'FileUploadOutlinedIcon';
 
 var DashboardIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
   var className = _a.className,
@@ -42770,30 +42767,6 @@ function requireCancel () {
 var CancelExports = /*@__PURE__*/ requireCancel();
 var CancelIcon = /*@__PURE__*/getDefaultExportFromCjs(CancelExports);
 
-var OndemandVideo = {};
-
-var hasRequiredOndemandVideo;
-
-function requireOndemandVideo () {
-	if (hasRequiredOndemandVideo) return OndemandVideo;
-	hasRequiredOndemandVideo = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-	Object.defineProperty(OndemandVideo, "__esModule", {
-	  value: true
-	});
-	OndemandVideo.default = void 0;
-	var _createSvgIcon = _interopRequireDefault(/*@__PURE__*/ requireCreateSvgIcon());
-	var _jsxRuntime = requireJsxRuntime();
-	OndemandVideo.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-	  d: "M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2m0 14H3V5h18zm-5-6-7 4V7z"
-	}), 'OndemandVideo');
-	return OndemandVideo;
-}
-
-var OndemandVideoExports = /*@__PURE__*/ requireOndemandVideo();
-var OndemandVideoIcon = /*@__PURE__*/getDefaultExportFromCjs(OndemandVideoExports);
-
 dt.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\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"], ["\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(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\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"], ["\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(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\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"], ["\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"])));
@@ -42804,147 +42777,87 @@ dt.div(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n  ba
 // Uploader
 ])));
 // Uploader
-var Container$3 = dt.div(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  width: 100%;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"], ["\n  width: 100%;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])));
-var ErrorText = dt.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n  font-size: 12px;\n  color: #d32f2f;\n  margin-left: 5px;\n  margin-top: -15px;\n"], ["\n  font-size: 12px;\n  color: #d32f2f;\n  margin-left: 5px;\n  margin-top: -15px;\n"])));
-var FlexContainer = dt.div(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  align-items: center;\n"])));
-var ItemContainer = dt.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n  width: ", ";\n  position: relative;\n"], ["\n  width: ", ";\n  position: relative;\n"])), function (_a) {
-  var width = _a.width;
-  return width || '100%';
-});
-dt.div(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n  width: 390px;\n"], ["\n  width: 390px;\n"])));
-var CancelButton = dt.div(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  cursor: pointer;\n"], ["\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  cursor: pointer;\n"])), function (_a) {
+var Container$3 = dt.div(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\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"], ["\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(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject([""], [""])));
+dt.div(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n  width: 390px;\n"], ["\n  width: 390px;\n"])));
+var CancelButton = dt.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  cursor: pointer;\n"], ["\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  cursor: pointer;\n"])), function (_a) {
   var right = _a.right;
-  return right || '-13px';
+  return right || '-12px';
 }, function (_a) {
   var top = _a.top;
-  return top || '5px';
-});
-var InputFileContainer = dt.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  justify-content: flex-end;\n  /* input {\n    opacity: 0;\n    position: absolute;\n    z-index: -1;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n  }\n\n  &label {\n    width: 85%;\n    height: 100%;\n    cursor: pointer;\n  } */\n"], ["\n  position: relative;\n  display: flex;\n  justify-content: flex-end;\n  /* input {\n    opacity: 0;\n    position: absolute;\n    z-index: -1;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n  }\n\n  &label {\n    width: 85%;\n    height: 100%;\n    cursor: pointer;\n  } */\n"])));
-var UploadInput = dt.input(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  opacity: 0;\n  position: absolute;\n  z-index: -1;\n  left: 0;\n  width: 0;\n  top: 0;\n  overflow: hidden;\n"], ["\n  opacity: 0;\n  position: absolute;\n  z-index: -1;\n  left: 0;\n  width: 0;\n  top: 0;\n  overflow: hidden;\n"])));
-dt.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  position: absolute;\n  left: 0px;\n  top: -15px;\n  background: #fff;\n  font-size: 12px;\n  color: rgba(0, 0, 0, 0.54);\n"], ["\n  position: absolute;\n  left: 0px;\n  top: -15px;\n  background: #fff;\n  font-size: 12px;\n  color: rgba(0, 0, 0, 0.54);\n"])));
-var ImagePlaceholder = dt.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  cursor: pointer;\n\n  img {\n    position: relative;\n    border: 1px solid #08c694;\n    width: 100%;\n    height: ", "px;\n    object-fit: cover;\n    top: 2px;\n  }\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  cursor: pointer;\n\n  img {\n    position: relative;\n    border: 1px solid #08c694;\n    width: 100%;\n    height: ", "px;\n    object-fit: cover;\n    top: 2px;\n  }\n"])), function (_a) {
-  var height = _a.height;
-  return height || 60;
+  return top || '-12px';
 });
-var InputLabel = dt.label(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 2px;\n  padding: 5px 5px;\n  max-width: 150px;\n  cursor: pointer;\n  background: #fff;\n  border: 1px solid #08c694;\n  color: #08c694;\n  font-size: 19px;\n  font-weight: 400;\n  border-radius: 4px;\n  width: 130px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 2px;\n  padding: 5px 5px;\n  max-width: 150px;\n  cursor: pointer;\n  background: #fff;\n  border: 1px solid #08c694;\n  color: #08c694;\n  font-size: 19px;\n  font-weight: 400;\n  border-radius: 4px;\n  width: 130px;\n"
+var InputFileContainer = dt.div(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  /* input {\n    opacity: 0;\n    position: absolute;\n    z-index: -1;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n  }\n\n  &label {\n    width: 85%;\n    height: 100%;\n    cursor: pointer;\n  } */\n"], ["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  /* input {\n    opacity: 0;\n    position: absolute;\n    z-index: -1;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n  }\n\n  &label {\n    width: 85%;\n    height: 100%;\n    cursor: pointer;\n  } */\n"])));
+var UploadInput = dt.input(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n  opacity: 0;\n  position: absolute;\n  z-index: -1;\n  left: 0;\n  width: 0;\n  top: 0;\n  overflow: hidden;\n"], ["\n  opacity: 0;\n  position: absolute;\n  z-index: -1;\n  left: 0;\n  width: 0;\n  top: 0;\n  overflow: hidden;\n"])));
+dt.div(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n  position: absolute;\n  left: 0px;\n  top: -15px;\n  background: #fff;\n  font-size: 12px;\n  color: rgba(0, 0, 0, 0.54);\n"], ["\n  position: absolute;\n  left: 0px;\n  top: -15px;\n  background: #fff;\n  font-size: 12px;\n  color: rgba(0, 0, 0, 0.54);\n"])));
+var ImagePlaceholder = dt.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  img {\n    position: relative;\n    width: 72px;\n    height: 48px;\n    border-radius: 4px;\n    padding: 4px;\n    top: 2px;\n  }\n"], ["\n  img {\n    position: relative;\n    width: 72px;\n    height: 48px;\n    border-radius: 4px;\n    padding: 4px;\n    top: 2px;\n  }\n"])));
+var InputLabel = dt.label(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  cursor: pointer;\n  color: #fff;\n  background: #06c68f;\n  font-size: 11px;\n  padding: 9px 6px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  cursor: pointer;\n  color: #fff;\n  background: #06c68f;\n  font-size: 11px;\n  padding: 9px 6px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"
 // UploaderButton
 ])));
 // UploaderButton
-dt.label(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  cursor: pointer;\n  color: #fff;\n  background: #06c68f;\n  font-size: 11px;\n  padding: 4px 6px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n"], ["\n  cursor: pointer;\n  color: #fff;\n  background: #06c68f;\n  font-size: 11px;\n  padding: 4px 6px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n"])));
-dt.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  input {\n    opacity: 0;\n    width: 1px;\n    position: absolute;\n    z-index: -1;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n  }\n"], ["\n  input {\n    opacity: 0;\n    width: 1px;\n    position: absolute;\n    z-index: -1;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n  }\n"])));
-var VideoPlaceholder = dt.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  margin-left: auto;\n  margin-top: 3px;\n  width: 60px;\n  cursor: pointer;\n"], ["\n  margin-left: auto;\n  margin-top: 3px;\n  width: 60px;\n  cursor: pointer;\n"])));
-var DefaultPlaceholder = dt.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  margin-left: 23px;\n  margin-top: 3px;\n  cursor: pointer;\n"], ["\n  margin-left: 23px;\n  margin-top: 3px;\n  cursor: pointer;\n"])));
-var LoadingProgressContainer = dt.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  margin-left: 19px;\n  margin-top: 2px;\n"], ["\n  margin-left: 19px;\n  margin-top: 2px;\n"])));
-var CircularProgressStyles = {
-  width: '32px',
-  height: '32px'
-};
-var Title = dt.h2(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  font-size: 16px;\n  font-weight: 550;\n  margin-bottom: 5px;\n\n  ", "\n"], ["\n  font-size: 16px;\n  font-weight: 550;\n  margin-bottom: 5px;\n\n  ", "\n"])), function (_a) {
+dt.label(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  cursor: pointer;\n  color: #fff;\n  background: #06c68f;\n  font-size: 11px;\n  padding: 4px 6px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n"], ["\n  cursor: pointer;\n  color: #fff;\n  background: #06c68f;\n  font-size: 11px;\n  padding: 4px 6px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n"])));
+dt.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  input {\n    opacity: 0;\n    width: 1px;\n    position: absolute;\n    z-index: -1;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n  }\n"], ["\n  input {\n    opacity: 0;\n    width: 1px;\n    position: absolute;\n    z-index: -1;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n  }\n"])));
+dt.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  margin-left: auto;\n  margin-top: 3px;\n  width: 60px;\n  cursor: pointer;\n"], ["\n  margin-left: auto;\n  margin-top: 3px;\n  width: 60px;\n  cursor: pointer;\n"])));
+dt.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  margin-left: 23px;\n  margin-top: 3px;\n  cursor: pointer;\n"], ["\n  margin-left: 23px;\n  margin-top: 3px;\n  cursor: pointer;\n"])));
+dt.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  margin-left: 19px;\n  margin-top: 2px;\n"], ["\n  margin-left: 19px;\n  margin-top: 2px;\n"])));
+var Title = dt.h2(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  font-size: 16px;\n  font-weight: 550;\n  margin-bottom: 5px;\n\n  ", "\n"], ["\n  font-size: 16px;\n  font-weight: 550;\n  margin-bottom: 5px;\n\n  ", "\n"])), function (_a) {
   var $required = _a.$required;
   return $required ? "\n    &::after {\n      content: '*';\n      color: red;\n      margin-left: 3px;\n    }\n  " : '';
 });
-var templateObject_1$j, templateObject_2$e, templateObject_3$a, templateObject_4$7, templateObject_5$6, templateObject_6$5, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24;
-
-var InsertDriveFile = {};
-
-var hasRequiredInsertDriveFile;
-
-function requireInsertDriveFile () {
-	if (hasRequiredInsertDriveFile) return InsertDriveFile;
-	hasRequiredInsertDriveFile = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-	Object.defineProperty(InsertDriveFile, "__esModule", {
-	  value: true
-	});
-	InsertDriveFile.default = void 0;
-	var _createSvgIcon = _interopRequireDefault(/*@__PURE__*/ requireCreateSvgIcon());
-	var _jsxRuntime = requireJsxRuntime();
-	InsertDriveFile.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-	  d: "M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm7 7V3.5L18.5 9z"
-	}), 'InsertDriveFile');
-	return InsertDriveFile;
-}
-
-var InsertDriveFileExports = /*@__PURE__*/ requireInsertDriveFile();
-var InsertDriveFileIcon = /*@__PURE__*/getDefaultExportFromCjs(InsertDriveFileExports);
-
-var Headset = {};
-
-var hasRequiredHeadset;
-
-function requireHeadset () {
-	if (hasRequiredHeadset) return Headset;
-	hasRequiredHeadset = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-	Object.defineProperty(Headset, "__esModule", {
-	  value: true
-	});
-	Headset.default = void 0;
-	var _createSvgIcon = _interopRequireDefault(/*@__PURE__*/ requireCreateSvgIcon());
-	var _jsxRuntime = requireJsxRuntime();
-	Headset.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-	  d: "M12 1c-4.97 0-9 4.03-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h3c1.66 0 3-1.34 3-3v-7c0-4.97-4.03-9-9-9"
-	}), 'Headset');
-	return Headset;
-}
-
-var HeadsetExports = /*@__PURE__*/ requireHeadset();
-var HeadsetIcon = /*@__PURE__*/getDefaultExportFromCjs(HeadsetExports);
-
-var FileUploadOutlined = {};
-
-var hasRequiredFileUploadOutlined;
-
-function requireFileUploadOutlined () {
-	if (hasRequiredFileUploadOutlined) return FileUploadOutlined;
-	hasRequiredFileUploadOutlined = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-	Object.defineProperty(FileUploadOutlined, "__esModule", {
-	  value: true
-	});
-	FileUploadOutlined.default = void 0;
-	var _createSvgIcon = _interopRequireDefault(/*@__PURE__*/ requireCreateSvgIcon());
-	var _jsxRuntime = requireJsxRuntime();
-	FileUploadOutlined.default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-	  d: "M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5z"
-	}), 'FileUploadOutlined');
-	return FileUploadOutlined;
-}
-
-var FileUploadOutlinedExports = /*@__PURE__*/ requireFileUploadOutlined();
-var FileUploadOutlinedIcon = /*@__PURE__*/getDefaultExportFromCjs(FileUploadOutlinedExports);
-
-var FileTypes;
-(function (FileTypes) {
-  FileTypes["DOCUMENT"] = "document";
-  FileTypes["IMAGE"] = "image";
-  FileTypes["VIDEO"] = "video";
-  FileTypes["AUDIO"] = "audio";
-  FileTypes["FILE"] = "file";
-})(FileTypes || (FileTypes = {}));
+var ErrorText = dt.p(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  font-size: 14px;\n  color: #d32f2f;\n  margin-top: 4px;\n"], ["\n  font-size: 14px;\n  color: #d32f2f;\n  margin-top: 4px;\n"])));
+var styles$1 = {
+  thumbnail: {
+    width: '72px',
+    height: '48px',
+    borderRadius: '4px',
+    padding: '4px'
+  }
+};
+var templateObject_1$j, templateObject_2$e, templateObject_3$a, templateObject_4$7, templateObject_5$6, templateObject_6$5, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
 
+var ImageWithFallback = function ImageWithFallback(_a) {
+  var src = _a.src,
+    alt = _a.alt;
+  var _b = useState(false),
+    hasError = _b[0],
+    setHasError = _b[1];
+  if (hasError) {
+    return jsxRuntimeExports.jsx(CircularProgress, {});
+  }
+  return jsxRuntimeExports.jsx("img", {
+    src: src,
+    alt: alt,
+    style: styles$1.thumbnail,
+    onError: function onError() {
+      return setHasError(true);
+    }
+  });
+};
 var Loading = function Loading(_a) {
   var type = _a.type,
     loading = _a.loading;
-  if ([FileTypes.VIDEO, FileTypes.AUDIO].includes(type)) {
-    return jsxRuntimeExports.jsxs(LoadingProgressContainer, {
+  if (['video', 'audio'].includes(type)) {
+    return jsxRuntimeExports.jsxs("div", {
+      style: {
+        marginLeft: '19px',
+        marginTop: '2px'
+      },
       children: [Math.round(loading), " %"]
     });
   }
-  return jsxRuntimeExports.jsx(LoadingProgressContainer, {
+  return jsxRuntimeExports.jsx("div", {
+    style: {
+      marginLeft: '19px',
+      marginTop: '2px'
+    },
     children: jsxRuntimeExports.jsx(CircularProgress, {
-      style: CircularProgressStyles
+      style: {
+        width: '32px',
+        height: '32px'
+      }
     })
   });
 };
-var handleFileClick = function handleFileClick(link) {
-  if (link) {
-    window.open(link, '_blank');
-  }
-};
 var Uploader = function Uploader(_a) {
   var type = _a.type,
     uploadedFile = _a.uploadedFile,
@@ -42959,145 +42872,168 @@ var Uploader = function Uploader(_a) {
     accept = _a.accept,
     name = _a.name,
     multiple = _a.multiple,
-    placeHolder = _a.placeHolder,
-    _b = _a.showFullPreview,
-    showFullPreview = _b === void 0 ? false : _b,
-    inputClassName = _a.inputClassName,
-    touched = _a.touched,
+    fileExtension = _a.fileExtension,
     error = _a.error,
-    nameClassName = _a.nameClassName,
-    _c = _a.required,
-    required = _c === void 0 ? false : _c;
+    _b = _a.required,
+    required = _b === void 0 ? false : _b;
   var t = useTranslation().t;
-  var InlineFilePreview = function InlineFilePreview() {
-    var file = uploadedFile;
+  var filePreview = function filePreview() {
+    var _a;
+    // pdf is in file type too so we need to check for pdf explicitly
+    if (((_a = uploadedFile === null || uploadedFile === void 0 ? void 0 : uploadedFile.link) === null || _a === void 0 ? void 0 : _a.split('.').pop()) === 'pdf') {
+      return jsxRuntimeExports.jsx(ImagePlaceholder, {
+        children: jsxRuntimeExports.jsx("div", {
+          style: {
+            fontSize: '10px',
+            textAlign: 'center',
+            padding: '4px',
+            width: '72px',
+            height: '48px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: '#f5f5f5',
+            borderRadius: '4px'
+          },
+          children: "PDF"
+        })
+      });
+    }
     switch (type) {
-      case FileTypes.IMAGE:
+      case 'image':
         return jsxRuntimeExports.jsx(ImagePlaceholder, {
-          onClick: function onClick() {
-            handleFileClick(file.link);
-          },
-          children: jsxRuntimeExports.jsx("img", {
-            src: file === null || file === void 0 ? void 0 : file.link,
-            alt: ''
+          children: jsxRuntimeExports.jsx(ImageWithFallback, {
+            src: (uploadedFile === null || uploadedFile === void 0 ? void 0 : uploadedFile.link) || '',
+            alt: 'Image Thumbnail'
           })
         });
-      case FileTypes.VIDEO:
-        return jsxRuntimeExports.jsx(VideoPlaceholder, {
-          onClick: function onClick() {
-            var _a, _b;
-            handleFileClick((_b = (_a = file.links) === null || _a === void 0 ? void 0 : _a[4]) === null || _b === void 0 ? void 0 : _b.url);
+      case 'file':
+        return jsxRuntimeExports.jsx(ImagePlaceholder, {
+          children: jsxRuntimeExports.jsx("div", {
+            style: {
+              fontSize: '10px',
+              textAlign: 'center',
+              padding: '4px',
+              width: '72px',
+              height: '48px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: '#f5f5f5',
+              borderRadius: '4px'
+            },
+            children: "FILE"
+          })
+        });
+      case 'video':
+        return jsxRuntimeExports.jsx("div", {
+          style: {
+            marginTop: '3px'
           },
-          children: jsxRuntimeExports.jsx(OndemandVideoIcon, {
-            color: 'secondary'
+          children: jsxRuntimeExports.jsx("div", {
+            style: {
+              fontSize: '10px',
+              textAlign: 'center',
+              padding: '4px',
+              width: '72px',
+              height: '48px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: '#f5f5f5',
+              borderRadius: '4px'
+            },
+            children: "VIDEO"
           })
         });
-      case FileTypes.AUDIO:
-        return jsxRuntimeExports.jsx(DefaultPlaceholder, {
-          onClick: function onClick() {
-            handleFileClick(file.link);
+      case 'audio':
+        return jsxRuntimeExports.jsx("div", {
+          style: {
+            marginTop: '3px'
           },
-          children: jsxRuntimeExports.jsx(HeadsetIcon, {
-            color: 'secondary'
+          children: jsxRuntimeExports.jsx("div", {
+            style: {
+              fontSize: '10px',
+              textAlign: 'center',
+              padding: '4px',
+              width: '72px',
+              height: '48px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: '#f5f5f5',
+              borderRadius: '4px'
+            },
+            children: "AUDIO"
           })
         });
       default:
-        return jsxRuntimeExports.jsx(DefaultPlaceholder, {
-          onClick: function onClick() {
-            handleFileClick(file.link);
-          },
-          children: jsxRuntimeExports.jsx(InsertDriveFileIcon, {
-            color: 'secondary'
+        return jsxRuntimeExports.jsx(ImagePlaceholder, {
+          children: jsxRuntimeExports.jsx("div", {
+            style: {
+              fontSize: '10px',
+              textAlign: 'center',
+              padding: '4px',
+              width: '72px',
+              height: '48px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: '#f5f5f5',
+              borderRadius: '4px'
+            },
+            children: "FILE"
           })
         });
     }
   };
-  return jsxRuntimeExports.jsxs(Container$3, {
+  return jsxRuntimeExports.jsxs("div", {
     children: [label && jsxRuntimeExports.jsx(Title, {
       "$required": required,
       children: label
-    }), jsxRuntimeExports.jsxs(FlexContainer, {
-      children: [jsxRuntimeExports.jsx(ItemContainer, {
-        width: '75%',
+    }), jsxRuntimeExports.jsxs(Container$3, {
+      children: [jsxRuntimeExports.jsxs(ItemContainer, {
+        children: [!uploadedFile && !loading && jsxRuntimeExports.jsxs(InputFileContainer, {
+          children: [jsxRuntimeExports.jsx(UploadInput, {
+            type: 'file',
+            name: name,
+            id: id,
+            onChange: onFileChange,
+            multiple: multiple,
+            accept: accept
+          }), jsxRuntimeExports.jsx(InputLabel, {
+            htmlFor: id,
+            children: t('actions.choose_file') || 'Choose File'
+          })]
+        }), loading && jsxRuntimeExports.jsx(Loading, {
+          type: type || 'file',
+          loading: loading
+        }), !disabled && uploadedFile && filePreview()]
+      }), jsxRuntimeExports.jsx(ItemContainer, {
         children: jsxRuntimeExports.jsx(TextInput, {
-          label: '',
-          placeholder: placeHolder ? placeHolder : 'Supported formats are PNG, JPG, JPEG',
+          label: inputValue ? '' : "".concat(t('form_fields.file_name') || 'File name', " ").concat(fileExtension || ''),
           name: 'file',
           size: 'small',
           type: 'text',
           fullWidth: true,
-          touched: touched,
-          error: !!error,
-          value: inputValue,
+          value: inputValue || '',
           onChange: onInputChange,
           disabled: disabled
         })
-      }), showFullPreview ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
-        children: [jsxRuntimeExports.jsx(ItemContainer, {
-          width: '23%',
-          children: loading ? jsxRuntimeExports.jsx(Loading, {
-            type: type,
-            loading: loading
-          }) : jsxRuntimeExports.jsxs(InputFileContainer, {
-            children: [jsxRuntimeExports.jsx(UploadInput, {
-              type: 'file',
-              className: nameClassName,
-              name: name,
-              id: id,
-              onChange: onFileChange,
-              multiple: multiple,
-              accept: accept
-            }), jsxRuntimeExports.jsxs(InputLabel, {
-              htmlFor: id,
-              children: [jsxRuntimeExports.jsx(FileUploadOutlinedIcon, {}), t('general.upload') || 'Upload', ' ']
-            })]
-          })
-        }), uploadedFile && type === FileTypes.IMAGE && jsxRuntimeExports.jsx(ImagePlaceholder, {
-          height: 160,
-          children: uploadedFile.link && jsxRuntimeExports.jsx("img", {
-            src: uploadedFile.link,
-            alt: 'Input Image'
-          })
-        }), uploadedFile && jsxRuntimeExports.jsx(CancelButton, {
-          onClick: deleteFile,
-          right: '160px',
-          top: '37px',
-          children: jsxRuntimeExports.jsx(CancelIcon, {
-            style: {
-              color: 'rgba(179, 179, 184, 1)'
-            }
-          })
-        })]
-      }) : jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
-        children: [jsxRuntimeExports.jsxs(ItemContainer, {
-          width: '23%',
-          children: [!uploadedFile && !loading && jsxRuntimeExports.jsxs(InputFileContainer, {
-            children: [jsxRuntimeExports.jsx(UploadInput, {
-              type: 'file',
-              className: inputClassName,
-              name: name,
-              id: id,
-              onChange: onFileChange,
-              multiple: multiple,
-              accept: accept
-            }), jsxRuntimeExports.jsxs(InputLabel, {
-              htmlFor: id,
-              children: [jsxRuntimeExports.jsx(FileUploadOutlinedIcon, {}), t('general.upload')]
-            })]
-          }), loading && jsxRuntimeExports.jsx(Loading, {
-            type: type,
-            loading: loading
-          }), uploadedFile && InlineFilePreview()]
-        }), uploadedFile && jsxRuntimeExports.jsx(CancelButton, {
-          onClick: deleteFile,
-          children: jsxRuntimeExports.jsx(CancelIcon, {
-            style: {
-              color: '#06C68F'
-            }
-          })
-        }), ' ']
+      }), uploadedFile && jsxRuntimeExports.jsx(CancelButton, {
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          if (deleteFile) {
+            deleteFile();
+          }
+        },
+        children: jsxRuntimeExports.jsx(CancelIcon, {
+          style: {
+            color: '#06C68F'
+          }
+        })
       })]
-    }), error && touched && jsxRuntimeExports.jsx(ErrorText, {
+    }), error && jsxRuntimeExports.jsx(ErrorText, {
       children: error
     })]
   });
@@ -81399,7 +81335,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.youtube,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerYouTube' */
-	      './YouTube-DvS99YSi.esm.js'
+	      './YouTube-DVacs1Or.esm.js'
 	    ).then(function (n) { return n.Y; }))
 	  },
 	  {
@@ -81408,7 +81344,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.soundcloud,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerSoundCloud' */
-	      './SoundCloud-1OvUzexh.esm.js'
+	      './SoundCloud-oy_T9Aiu.esm.js'
 	    ).then(function (n) { return n.S; }))
 	  },
 	  {
@@ -81417,7 +81353,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.vimeo,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerVimeo' */
-	      './Vimeo-B6eklZts.esm.js'
+	      './Vimeo-BuGV9164.esm.js'
 	    ).then(function (n) { return n.V; }))
 	  },
 	  {
@@ -81426,7 +81362,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.mux,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerMux' */
-	      './Mux-bOE4IGCQ.esm.js'
+	      './Mux-BVKUzr2W.esm.js'
 	    ).then(function (n) { return n.M; }))
 	  },
 	  {
@@ -81435,7 +81371,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.facebook,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerFacebook' */
-	      './Facebook-g8siL1GN.esm.js'
+	      './Facebook-B1WhW-N8.esm.js'
 	    ).then(function (n) { return n.F; }))
 	  },
 	  {
@@ -81444,7 +81380,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.streamable,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerStreamable' */
-	      './Streamable-DkZbzMhq.esm.js'
+	      './Streamable-BEA6SKQj.esm.js'
 	    ).then(function (n) { return n.S; }))
 	  },
 	  {
@@ -81453,7 +81389,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.wistia,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerWistia' */
-	      './Wistia-T3lTN9f9.esm.js'
+	      './Wistia-ZeBeRmW3.esm.js'
 	    ).then(function (n) { return n.W; }))
 	  },
 	  {
@@ -81462,7 +81398,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.twitch,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerTwitch' */
-	      './Twitch-CAR5VDqo.esm.js'
+	      './Twitch-DPtzkrmp.esm.js'
 	    ).then(function (n) { return n.T; }))
 	  },
 	  {
@@ -81471,7 +81407,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.dailymotion,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerDailyMotion' */
-	      './DailyMotion-fTfJbAKR.esm.js'
+	      './DailyMotion-DIc5BN6G.esm.js'
 	    ).then(function (n) { return n.D; }))
 	  },
 	  {
@@ -81480,7 +81416,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.mixcloud,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerMixcloud' */
-	      './Mixcloud-1pcndu_p.esm.js'
+	      './Mixcloud-DgO-TXVn.esm.js'
 	    ).then(function (n) { return n.M; }))
 	  },
 	  {
@@ -81489,7 +81425,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.vidyard,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerVidyard' */
-	      './Vidyard-Dj__VHEu.esm.js'
+	      './Vidyard-C80XYDQJ.esm.js'
 	    ).then(function (n) { return n.V; }))
 	  },
 	  {
@@ -81498,7 +81434,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.kaltura,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerKaltura' */
-	      './Kaltura-CgG6fwG2.esm.js'
+	      './Kaltura-Dv3nF_qk.esm.js'
 	    ).then(function (n) { return n.K; }))
 	  },
 	  {
@@ -81510,7 +81446,7 @@ function requirePlayers () {
 	    },
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerFilePlayer' */
-	      './FilePlayer--e_TvukB.esm.js'
+	      './FilePlayer-BVX0TAd4.esm.js'
 	    ).then(function (n) { return n.F; }))
 	  }
 	];
@@ -82331,7 +82267,7 @@ function requireReactPlayer () {
 	var import_Player = __toESM(/*@__PURE__*/ requirePlayer());
 	const Preview = (0, import_utils.lazy)(() => import(
 	  /* webpackChunkName: 'reactPlayerPreview' */
-	  './Preview-ZZ8yCxMr.esm.js'
+	  './Preview-BYYoOVhE.esm.js'
 	).then(function (n) { return n.P; }));
 	const IS_BROWSER = typeof window !== "undefined" && window.document && typeof document !== "undefined";
 	const IS_GLOBAL = typeof commonjsGlobal !== "undefined" && commonjsGlobal.window && commonjsGlobal.window.document;
@@ -82587,16 +82523,17 @@ var StyledVolumeSlider = dt.input(templateObject_4$1 || (templateObject_4$1 = __
 });
 var StyledControllerLeft = dt.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n"])));
 var StyledControllerRight = dt.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 16px;\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\n  .skip-icon-disabled {\n    cursor: default;\n\n    & > path {\n      fill: var(--level-dark-300);\n    }\n  }\n"])));
-var StyledTimeTrack = dt.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: var(--neutral-colors-light);\n  ", "\n  text-align: right;\n  white-space: nowrap;\n"], ["\n  color: var(--neutral-colors-light);\n  ", "\n  text-align: right;\n  white-space: nowrap;\n"])), {
+var StyledTimeTrack = dt.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: #FFFFFF;\n  ", "\n  text-align: right;\n  white-space: nowrap;\n"], ["\n  color: #FFFFFF;\n  ", "\n  text-align: right;\n  white-space: nowrap;\n"])), {
   fontStyle: 'descriptor'
 });
-var StyledHeartIconContainer = dt.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > svg > path {\n    fill: var(--neutral-colors-light);\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > svg > path {\n    fill: var(--neutral-colors-light);\n  }\n"])));
+var StyledHeartIconContainer = dt.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"])));
 var StyledDownloadIconContainer = dt.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\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\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\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\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"])));
-var StyledSubtitlesIconContainer = dt.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
-var StyledFullscreenIconContainer = dt.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n"])));
-var StyledVolumeIconContainer = dt.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n"])));
-var StyledPlayPauseIconContainer = dt.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n"])));
-var templateObject_1$8, templateObject_2$6, templateObject_3$3, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
+var StyledSubtitlesIconContainer = dt.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"])));
+var StyledFullscreenIconContainer = dt.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"])));
+var StyledVolumeIconContainer = dt.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"])));
+var StyledPlayPauseIconContainer = dt.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"])));
+var StyledRewindIconContainer = dt.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"])));
+var templateObject_1$8, templateObject_2$6, templateObject_3$3, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
 
 var PLAYBACK_SPEED_LIST = [{
   label: 'playback_speed.2x',
@@ -82874,18 +82811,34 @@ var Controls = function Controls(_a) {
       onChange: seekHandler,
       onMouseUp: seekMouseUpHandler
     }), jsxRuntimeExports.jsxs(StyledControllerLeft, {
-      children: [jsxRuntimeExports.jsx(StyledPlayPauseIconContainer, {
-        onClick: playPauseHandler,
-        children: playing ? jsxRuntimeExports.jsx(PauseIcon, {}) : jsxRuntimeExports.jsx(PlayIcon, {})
-      }), jsxRuntimeExports.jsx(RewindIcon, {
-        onClick: rewindHandler
-      }), jsxRuntimeExports.jsx(RewindIcon, {
-        forward: true,
-        onClick: handleFastForward
+      children: [jsxRuntimeExports.jsx(CustomTooltip, {
+        title: playing ? 'Pause' : 'Play',
+        children: jsxRuntimeExports.jsx(StyledPlayPauseIconContainer, {
+          onClick: playPauseHandler,
+          children: playing ? jsxRuntimeExports.jsx(PauseIcon, {}) : jsxRuntimeExports.jsx(PlayIcon, {})
+        })
+      }), jsxRuntimeExports.jsx(CustomTooltip, {
+        title: "Rewind 10 seconds",
+        children: jsxRuntimeExports.jsx(StyledRewindIconContainer, {
+          children: jsxRuntimeExports.jsx(RewindIcon, {
+            onClick: rewindHandler
+          })
+        })
+      }), jsxRuntimeExports.jsx(CustomTooltip, {
+        title: "Forward 10 seconds",
+        children: jsxRuntimeExports.jsx(StyledRewindIconContainer, {
+          children: jsxRuntimeExports.jsx(RewindIcon, {
+            forward: true,
+            onClick: handleFastForward
+          })
+        })
       }), jsxRuntimeExports.jsxs(StyledVolumeWrapper, {
-        children: [jsxRuntimeExports.jsx(StyledVolumeIconContainer, {
-          onClick: muteHandler,
-          children: muted ? jsxRuntimeExports.jsx(VolumeMuteIcon, {}) : jsxRuntimeExports.jsx(VolumeUpIcon, {})
+        children: [jsxRuntimeExports.jsx(CustomTooltip, {
+          title: muted ? 'Unmute' : 'Mute',
+          children: jsxRuntimeExports.jsx(StyledVolumeIconContainer, {
+            onClick: muteHandler,
+            children: muted ? jsxRuntimeExports.jsx(VolumeMuteIcon, {}) : jsxRuntimeExports.jsx(VolumeUpIcon, {})
+          })
         }), jsxRuntimeExports.jsx(StyledVolumeSlider, {
           type: 'range',
           value: volume * 100,
@@ -82895,27 +82848,39 @@ var Controls = function Controls(_a) {
         children: [formatCurrentTime, " /", formatDuration]
       })]
     }), jsxRuntimeExports.jsxs(StyledControllerRight, {
-      children: [handleSkipBackward && jsxRuntimeExports.jsx(SkipIcon, {
-        onClick: function onClick() {
-          if (!isPreviousVideo) return;
-          handleSkipBackward();
-        },
-        className: isPreviousVideo ? '' : 'skip-icon-disabled'
-      }), handleSkipForward && jsxRuntimeExports.jsx(SkipIcon, {
-        forward: true,
-        onClick: function onClick() {
-          if (!isNextVideo) return;
-          handleSkipForward();
-        },
-        className: isNextVideo ? '' : 'skip-icon-disabled'
-      }), showFavorite && jsxRuntimeExports.jsx(StyledHeartIconContainer, {
-        children: jsxRuntimeExports.jsx(HeartIcon, {
-          active: isFavorite,
-          onClick: toggleIsFavorite
+      children: [handleSkipBackward && jsxRuntimeExports.jsx(CustomTooltip, {
+        title: "Previous video",
+        children: jsxRuntimeExports.jsx(SkipIcon, {
+          onClick: function onClick() {
+            if (!isPreviousVideo) return;
+            handleSkipBackward();
+          },
+          className: isPreviousVideo ? '' : 'skip-icon-disabled'
         })
-      }), showDownload && downloadUrl && jsxRuntimeExports.jsx(StyledDownloadIconContainer, {
-        children: jsxRuntimeExports.jsx(DownloadIcon, {
-          onClick: handleDownloadClick
+      }), handleSkipForward && jsxRuntimeExports.jsx(CustomTooltip, {
+        title: "Next video",
+        children: jsxRuntimeExports.jsx(SkipIcon, {
+          forward: true,
+          onClick: function onClick() {
+            if (!isNextVideo) return;
+            handleSkipForward();
+          },
+          className: isNextVideo ? '' : 'skip-icon-disabled'
+        })
+      }), showFavorite && jsxRuntimeExports.jsx(CustomTooltip, {
+        title: isFavorite ? 'Remove from favorites' : 'Add to favorites',
+        children: jsxRuntimeExports.jsx(StyledHeartIconContainer, {
+          children: jsxRuntimeExports.jsx(HeartIcon, {
+            active: isFavorite,
+            onClick: toggleIsFavorite
+          })
+        })
+      }), showDownload && downloadUrl && jsxRuntimeExports.jsx(CustomTooltip, {
+        title: "Download video",
+        children: jsxRuntimeExports.jsx(StyledDownloadIconContainer, {
+          children: jsxRuntimeExports.jsx(DownloadIcon, {
+            onClick: handleDownloadClick
+          })
         })
       }), jsxRuntimeExports.jsx(PlaybackSpeedMenu, {
         playbackSpeed: playbackRate,
@@ -82933,14 +82898,20 @@ var Controls = function Controls(_a) {
           right: '8px',
           left: 'auto'
         }
-      }), subtitle && jsxRuntimeExports.jsx(StyledSubtitlesIconContainer, {
-        children: jsxRuntimeExports.jsx(SubtitlesIcon, {
-          active: isSubtitlesChecked,
-          onClick: toggleSubtitlesCheck
+      }), subtitle && jsxRuntimeExports.jsx(CustomTooltip, {
+        title: isSubtitlesChecked ? 'Hide subtitles' : 'Show subtitles',
+        children: jsxRuntimeExports.jsx(StyledSubtitlesIconContainer, {
+          children: jsxRuntimeExports.jsx(SubtitlesIcon, {
+            active: isSubtitlesChecked,
+            onClick: toggleSubtitlesCheck
+          })
+        })
+      }), jsxRuntimeExports.jsx(CustomTooltip, {
+        title: isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen',
+        children: jsxRuntimeExports.jsx(StyledFullscreenIconContainer, {
+          onClick: handleFullScreen,
+          children: isFullscreen ? jsxRuntimeExports.jsx(MinimizeIcon, {}) : jsxRuntimeExports.jsx(MaximizeIcon, {})
         })
-      }), jsxRuntimeExports.jsx(StyledFullscreenIconContainer, {
-        onClick: handleFullScreen,
-        children: isFullscreen ? jsxRuntimeExports.jsx(MinimizeIcon, {}) : jsxRuntimeExports.jsx(MaximizeIcon, {})
       })]
     })]
   });