suada-components 1.13.2 → 1.13.4

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

@@ -1449,8 +1449,8 @@ var unitlessKeys$1 = {
 
 var f="undefined"!=typeof process&&void 0!==process.env&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",m="active",y="data-styled-version",v="6.1.16",g="/*!sc*/\n",S="undefined"!=typeof window&&"HTMLElement"in window,w$1=Boolean("boolean"==typeof SC_DISABLE_SPEEDY?SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env&&void 0!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&""!==process.env.REACT_APP_SC_DISABLE_SPEEDY?"false"!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&process.env.REACT_APP_SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env&&void 0!==process.env.SC_DISABLE_SPEEDY&&""!==process.env.SC_DISABLE_SPEEDY?"false"!==process.env.SC_DISABLE_SPEEDY&&process.env.SC_DISABLE_SPEEDY:"production"!==process.env.NODE_ENV),E=/invalid hook call/i,N=new Set,P=function(t,n){if("production"!==process.env.NODE_ENV){var r=n?' with the id of "'.concat(n,'"'):"",s="The component ".concat(t).concat(r," has been created dynamically.\n")+"You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.",i=console.error;try{var a=!0;console.error=function(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];E.test(t)?(a=!1,N.delete(s)):i.apply(void 0,__spreadArray([t],n,!1));},React.useRef(),a&&!N.has(s)&&(console.warn(s),N.add(s));}catch(e){E.test(e.message)&&N.delete(s);}finally{console.error=i;}}},_$2=Object.freeze([]),C=Object.freeze({});function I(e,t,n){return void 0===n&&(n=C),e.theme!==n.theme&&e.theme||t||n.theme}var A=new Set(["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","tr","track","u","ul","use","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"]),O=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,D=/(^-|-$)/g;function R(e){return e.replace(O,"-").replace(D,"")}var T=/(a)(d)/gi,k=52,j$1=function(e){return String.fromCharCode(e+(e>25?39:97))};function x(e){var t,n="";for(t=Math.abs(e);t>k;t=t/k|0)n=j$1(t%k)+n;return (j$1(t%k)+n).replace(T,"$1-$2")}var V,F=5381,M=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},z=function(e){return M(F,e)};function $(e){return x(z(e)>>>0)}function B(e){return "production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}function L(e){return "string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}var G="function"==typeof Symbol&&Symbol.for,Y=G?Symbol.for("react.memo"):60115,q=G?Symbol.for("react.forward_ref"):60112,W={childContextTypes:true,contextType:true,contextTypes:true,defaultProps:true,displayName:true,getDefaultProps:true,getDerivedStateFromError:true,getDerivedStateFromProps:true,mixins:true,propTypes:true,type:true},H={name:true,length:true,prototype:true,caller:true,callee:true,arguments:true,arity:true},U={$$typeof:true,compare:true,defaultProps:true,displayName:true,propTypes:true,type:true},J=((V={})[q]={$$typeof:true,render:true,defaultProps:true,displayName:true,propTypes:true},V[Y]=U,V);function X(e){return ("type"in(t=e)&&t.type.$$typeof)===Y?U:"$$typeof"in e?J[e.$$typeof]:W;var t;}var Z=Object.defineProperty,K=Object.getOwnPropertyNames,Q=Object.getOwnPropertySymbols,ee=Object.getOwnPropertyDescriptor,te=Object.getPrototypeOf,ne=Object.prototype;function re(e,t,n){if("string"!=typeof t){if(ne){var r=te(t);r&&r!==ne&&re(e,r,n);}var o=K(t);Q&&(o=o.concat(Q(t)));for(var s=X(e),i=X(t),a=0;a<o.length;++a){var c=o[a];if(!(c in H||n&&n[c]||i&&c in i||s&&c in s)){var l=ee(t,c);try{Z(e,c,l);}catch(e){}}}}return e}function oe(e){return "function"==typeof e}function se(e){return "object"==typeof e&&"styledComponentId"in e}function ie(e,t){return e&&t?"".concat(e," ").concat(t):e||t||""}function ae(e,t){if(0===e.length)return "";for(var n=e[0],r=1;r<e.length;r++)n+=e[r];return n}function ce(e){return null!==e&&"object"==typeof e&&e.constructor.name===Object.name&&!("props"in e&&e.$$typeof)}function le(e,t,n){if(void 0===n&&(n=false),!n&&!ce(e)&&!Array.isArray(e))return t;if(Array.isArray(t))for(var r=0;r<t.length;r++)e[r]=le(e[r],t[r]);else if(ce(t))for(var r in t)e[r]=le(e[r],t[r]);return e}function ue(e,t){Object.defineProperty(e,"toString",{value:t});}var pe="production"!==process.env.NODE_ENV?{1:"Cannot create styled-component for component: %s.\n\n",2:"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",3:"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",4:"The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",5:"The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",6:"Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",7:'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',8:'ThemeProvider: Please make your "theme" prop an object.\n\n',9:"Missing document `<head>`\n\n",10:"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",11:"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",12:"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",13:"%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",14:'ThemeProvider: "theme" prop is required.\n\n',15:"A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",16:"Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",17:"CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n",18:"ThemeProvider: Please make sure your useTheme hook is within a `<ThemeProvider>`"}:{};function de(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];for(var n=e[0],r=[],o=1,s=e.length;o<s;o+=1)r.push(e[o]);return r.forEach(function(e){n=n.replace(/%[a-z]/,e);}),n}function he(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];return "production"===process.env.NODE_ENV?new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#".concat(t," for more information.").concat(n.length>0?" Args: ".concat(n.join(", ")):"")):new Error(de.apply(void 0,__spreadArray([pe[t]],n,false)).trim())}var fe=function(){function e(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e;}return e.prototype.indexOfGroup=function(e){for(var t=0,n=0;n<e;n++)t+=this.groupSizes[n];return t},e.prototype.insertRules=function(e,t){if(e>=this.groupSizes.length){for(var n=this.groupSizes,r=n.length,o=r;e>=o;)if((o<<=1)<0)throw he(16,"".concat(e));this.groupSizes=new Uint32Array(o),this.groupSizes.set(n),this.length=o;for(var s=r;s<o;s++)this.groupSizes[s]=0;}for(var i=this.indexOfGroup(e+1),a=(s=0,t.length);s<a;s++)this.tag.insertRule(i,t[s])&&(this.groupSizes[e]++,i++);},e.prototype.clearGroup=function(e){if(e<this.length){var t=this.groupSizes[e],n=this.indexOfGroup(e),r=n+t;this.groupSizes[e]=0;for(var o=n;o<r;o++)this.tag.deleteRule(n);}},e.prototype.getGroup=function(e){var t="";if(e>=this.length||0===this.groupSizes[e])return t;for(var n=this.groupSizes[e],r=this.indexOfGroup(e),o=r+n,s=r;s<o;s++)t+="".concat(this.tag.getRule(s)).concat(g);return t},e}(),me=1<<30,ye=new Map,ve=new Map,ge=1,Se=function(e){if(ye.has(e))return ye.get(e);for(;ve.has(ge);)ge++;var t=ge++;if("production"!==process.env.NODE_ENV&&((0|t)<0||t>me))throw he(16,"".concat(t));return ye.set(e,t),ve.set(t,e),t},we=function(e,t){ge=t+1,ye.set(e,t),ve.set(t,e);},be="style[".concat(f,"][").concat(y,'="').concat(v,'"]'),Ee=new RegExp("^".concat(f,'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)')),Ne=function(e,t,n){for(var r,o=n.split(","),s=0,i=o.length;s<i;s++)(r=o[s])&&e.registerName(t,r);},Pe=function(e,t){for(var n,r=(null!==(n=t.textContent)&&void 0!==n?n:"").split(g),o=[],s=0,i=r.length;s<i;s++){var a=r[s].trim();if(a){var c=a.match(Ee);if(c){var l=0|parseInt(c[1],10),u=c[2];0!==l&&(we(u,l),Ne(e,u,c[3]),e.getTag().insertRules(l,o)),o.length=0;}else o.push(a);}}},_e=function(e){for(var t=document.querySelectorAll(be),n=0,r=t.length;n<r;n++){var o=t[n];o&&o.getAttribute(f)!==m&&(Pe(e,o),o.parentNode&&o.parentNode.removeChild(o));}};function Ce(){return "undefined"!=typeof __webpack_nonce__?__webpack_nonce__:null}var Ie=function(e){var t=document.head,n=e||t,r=document.createElement("style"),o=function(e){var t=Array.from(e.querySelectorAll("style[".concat(f,"]")));return t[t.length-1]}(n),s=void 0!==o?o.nextSibling:null;r.setAttribute(f,m),r.setAttribute(y,v);var i=Ce();return i&&r.setAttribute("nonce",i),n.insertBefore(r,s),r},Ae=function(){function e(e){this.element=Ie(e),this.element.appendChild(document.createTextNode("")),this.sheet=function(e){if(e.sheet)return e.sheet;for(var t=document.styleSheets,n=0,r=t.length;n<r;n++){var o=t[n];if(o.ownerNode===e)return o}throw he(17)}(this.element),this.length=0;}return e.prototype.insertRule=function(e,t){try{return this.sheet.insertRule(t,e),this.length++,!0}catch(e){return  false}},e.prototype.deleteRule=function(e){this.sheet.deleteRule(e),this.length--;},e.prototype.getRule=function(e){var t=this.sheet.cssRules[e];return t&&t.cssText?t.cssText:""},e}(),Oe=function(){function e(e){this.element=Ie(e),this.nodes=this.element.childNodes,this.length=0;}return e.prototype.insertRule=function(e,t){if(e<=this.length&&e>=0){var n=document.createTextNode(t);return this.element.insertBefore(n,this.nodes[e]||null),this.length++,true}return  false},e.prototype.deleteRule=function(e){this.element.removeChild(this.nodes[e]),this.length--;},e.prototype.getRule=function(e){return e<this.length?this.nodes[e].textContent:""},e}(),De=function(){function e(e){this.rules=[],this.length=0;}return e.prototype.insertRule=function(e,t){return e<=this.length&&(this.rules.splice(e,0,t),this.length++,true)},e.prototype.deleteRule=function(e){this.rules.splice(e,1),this.length--;},e.prototype.getRule=function(e){return e<this.length?this.rules[e]:""},e}(),Re=S,Te={isServer:!S,useCSSOMInjection:!w$1},ke=function(){function e(e,n,r){ void 0===e&&(e=C),void 0===n&&(n={});var o=this;this.options=__assign(__assign({},Te),e),this.gs=n,this.names=new Map(r),this.server=!!e.isServer,!this.server&&S&&Re&&(Re=false,_e(this)),ue(this,function(){return function(e){for(var t=e.getTag(),n=t.length,r="",o=function(n){var o=function(e){return ve.get(e)}(n);if(void 0===o)return "continue";var s=e.names.get(o),i=t.getGroup(n);if(void 0===s||!s.size||0===i.length)return "continue";var a="".concat(f,".g").concat(n,'[id="').concat(o,'"]'),c="";void 0!==s&&s.forEach(function(e){e.length>0&&(c+="".concat(e,","));}),r+="".concat(i).concat(a,'{content:"').concat(c,'"}').concat(g);},s=0;s<n;s++)o(s);return r}(o)});}return e.registerId=function(e){return Se(e)},e.prototype.rehydrate=function(){!this.server&&S&&_e(this);},e.prototype.reconstructWithOptions=function(n,r){return void 0===r&&(r=true),new e(__assign(__assign({},this.options),n),this.gs,r&&this.names||void 0)},e.prototype.allocateGSInstance=function(e){return this.gs[e]=(this.gs[e]||0)+1},e.prototype.getTag=function(){return this.tag||(this.tag=(e=function(e){var t=e.useCSSOMInjection,n=e.target;return e.isServer?new De(n):t?new Ae(n):new Oe(n)}(this.options),new fe(e)));var e;},e.prototype.hasNameForId=function(e,t){return this.names.has(e)&&this.names.get(e).has(t)},e.prototype.registerName=function(e,t){if(Se(e),this.names.has(e))this.names.get(e).add(t);else {var n=new Set;n.add(t),this.names.set(e,n);}},e.prototype.insertRules=function(e,t,n){this.registerName(e,t),this.getTag().insertRules(Se(e),n);},e.prototype.clearNames=function(e){this.names.has(e)&&this.names.get(e).clear();},e.prototype.clearRules=function(e){this.getTag().clearGroup(Se(e)),this.clearNames(e);},e.prototype.clearTag=function(){this.tag=void 0;},e}(),je=/&/g,xe=/^\s*\/\/.*$/gm;function Ve(e,t){return e.map(function(e){return "rule"===e.type&&(e.value="".concat(t," ").concat(e.value),e.value=e.value.replaceAll(",",",".concat(t," ")),e.props=e.props.map(function(e){return "".concat(t," ").concat(e)})),Array.isArray(e.children)&&"@keyframes"!==e.type&&(e.children=Ve(e.children,t)),e})}function Fe(e){var t,n,r,o=C,s=o.options,i=void 0===s?C:s,a=o.plugins,c=void 0===a?_$2:a,l=function(e,r,o){return o.startsWith(n)&&o.endsWith(n)&&o.replaceAll(n,"").length>0?".".concat(t):e},u=c.slice();u.push(function(e){e.type===RULESET$1&&e.value.includes("&")&&(e.props[0]=e.props[0].replace(je,n).replace(r,l));}),i.prefix&&u.push(prefixer$1),u.push(stringify$1);var p=function(e,o,s,a){ void 0===o&&(o=""),void 0===s&&(s=""),void 0===a&&(a="&"),t=a,n=o,r=new RegExp("\\".concat(n,"\\b"),"g");var c=e.replace(xe,""),l=compile$1(s||o?"".concat(s," ").concat(o," { ").concat(c," }"):c);i.namespace&&(l=Ve(l,i.namespace));var p=[];return serialize$1(l,middleware$1(u.concat(rulesheet$1(function(e){return p.push(e)})))),p};return p.hash=c.length?c.reduce(function(e,t){return t.name||he(15),M(e,t.name)},F).toString():"",p}var Me=new ke,ze=Fe(),$e=React.createContext({shouldForwardProp:void 0,styleSheet:Me,stylis:ze});$e.Consumer;React.createContext(void 0);function Ge(){return React.useContext($e)}var qe=function(){function e(e,t){var n=this;this.inject=function(e,t){ void 0===t&&(t=ze);var r=n.name+t.hash;e.hasNameForId(n.id,r)||e.insertRules(n.id,r,t(n.rules,r,"@keyframes"));},this.name=e,this.id="sc-keyframes-".concat(e),this.rules=t,ue(this,function(){throw he(12,String(n.name))});}return e.prototype.getName=function(e){return void 0===e&&(e=ze),this.name+e.hash},e}(),We=function(e){return e>="A"&&e<="Z"};function He(e){for(var t="",n=0;n<e.length;n++){var r=e[n];if(1===n&&"-"===r&&"-"===e[0])return e;We(r)?t+="-"+r.toLowerCase():t+=r;}return t.startsWith("ms-")?"-"+t:t}var Ue=function(e){return null==e||false===e||""===e},Je=function(t){var n,r,o=[];for(var s in t){var i=t[s];t.hasOwnProperty(s)&&!Ue(i)&&(Array.isArray(i)&&i.isCss||oe(i)?o.push("".concat(He(s),":"),i,";"):ce(i)?o.push.apply(o,__spreadArray(__spreadArray(["".concat(s," {")],Je(i),false),["}"],false)):o.push("".concat(He(s),": ").concat((n=s,null==(r=i)||"boolean"==typeof r||""===r?"":"number"!=typeof r||0===r||n in unitlessKeys$1||n.startsWith("--")?String(r).trim():"".concat(r,"px")),";")));}return o};function Xe(e,t,n,r){if(Ue(e))return [];if(se(e))return [".".concat(e.styledComponentId)];if(oe(e)){if(!oe(s=e)||s.prototype&&s.prototype.isReactComponent||!t)return [e];var o=e(t);return "production"===process.env.NODE_ENV||"object"!=typeof o||Array.isArray(o)||o instanceof qe||ce(o)||null===o||console.error("".concat(B(e)," is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.")),Xe(o,t,n,r)}var s;return e instanceof qe?n?(e.inject(n,r),[e.getName(r)]):[e]:ce(e)?Je(e):Array.isArray(e)?Array.prototype.concat.apply(_$2,e.map(function(e){return Xe(e,t,n,r)})):[e.toString()]}function Ze(e){for(var t=0;t<e.length;t+=1){var n=e[t];if(oe(n)&&!se(n))return  false}return  true}var Ke=z(v),Qe=function(){function e(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic="production"===process.env.NODE_ENV&&(void 0===n||n.isStatic)&&Ze(e),this.componentId=t,this.baseHash=M(Ke,t),this.baseStyle=n,ke.registerId(t);}return e.prototype.generateAndInjectStyles=function(e,t,n){var r=this.baseStyle?this.baseStyle.generateAndInjectStyles(e,t,n):"";if(this.isStatic&&!n.hash)if(this.staticRulesId&&t.hasNameForId(this.componentId,this.staticRulesId))r=ie(r,this.staticRulesId);else {var o=ae(Xe(this.rules,e,t,n)),s=x(M(this.baseHash,o)>>>0);if(!t.hasNameForId(this.componentId,s)){var i=n(o,".".concat(s),void 0,this.componentId);t.insertRules(this.componentId,s,i);}r=ie(r,s),this.staticRulesId=s;}else {for(var a=M(this.baseHash,n.hash),c="",l=0;l<this.rules.length;l++){var u=this.rules[l];if("string"==typeof u)c+=u,"production"!==process.env.NODE_ENV&&(a=M(a,u));else if(u){var p=ae(Xe(u,e,t,n));a=M(a,p+l),c+=p;}}if(c){var d=x(a>>>0);t.hasNameForId(this.componentId,d)||t.insertRules(this.componentId,d,n(c,".".concat(d),void 0,this.componentId)),r=ie(r,d);}}return r},e}(),et=React.createContext(void 0);et.Consumer;var ot={},st=new Set;function it(e,o,s){var i=se(e),a=e,c=!L(e),p=o.attrs,d=void 0===p?_$2:p,h=o.componentId,f=void 0===h?function(e,t){var n="string"!=typeof e?"sc":R(e);ot[n]=(ot[n]||0)+1;var r="".concat(n,"-").concat($(v+n+ot[n]));return t?"".concat(t,"-").concat(r):r}(o.displayName,o.parentComponentId):h,m=o.displayName,y=void 0===m?function(e){return L(e)?"styled.".concat(e):"Styled(".concat(B(e),")")}(e):m,g=o.displayName&&o.componentId?"".concat(R(o.displayName),"-").concat(o.componentId):o.componentId||f,S=i&&a.attrs?a.attrs.concat(d).filter(Boolean):d,w=o.shouldForwardProp;if(i&&a.shouldForwardProp){var b=a.shouldForwardProp;if(o.shouldForwardProp){var E=o.shouldForwardProp;w=function(e,t){return b(e,t)&&E(e,t)};}else w=b;}var N=new Qe(s,g,i?a.componentStyle:void 0);function O(e,o){return function(e,o,s){var i=e.attrs,a=e.componentStyle,c=e.defaultProps,p=e.foldedComponentIds,d=e.styledComponentId,h=e.target,f=React.useContext(et),m=Ge(),y=e.shouldForwardProp||m.shouldForwardProp;"production"!==process.env.NODE_ENV&&React.useDebugValue(d);var v=I(o,f,c)||C,g=function(e,n,r){for(var o,s=__assign(__assign({},n),{className:void 0,theme:r}),i=0;i<e.length;i+=1){var a=oe(o=e[i])?o(s):o;for(var c in a)s[c]="className"===c?ie(s[c],a[c]):"style"===c?__assign(__assign({},s[c]),a[c]):a[c];}return n.className&&(s.className=ie(s.className,n.className)),s}(i,o,v),S=g.as||h,w={};for(var b in g) void 0===g[b]||"$"===b[0]||"as"===b||"theme"===b&&g.theme===v||("forwardedAs"===b?w.as=g.forwardedAs:y&&!y(b,S)||(w[b]=g[b],y||"development"!==process.env.NODE_ENV||isPropValid$1(b)||st.has(b)||!A.has(S)||(st.add(b),console.warn('styled-components: it looks like an unknown prop "'.concat(b,'" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)')))));var E=function(e,t){var n=Ge(),r=e.generateAndInjectStyles(t,n.styleSheet,n.stylis);return "production"!==process.env.NODE_ENV&&React.useDebugValue(r),r}(a,g);"production"!==process.env.NODE_ENV&&e.warnTooManyClasses&&e.warnTooManyClasses(E);var N=ie(p,d);return E&&(N+=" "+E),g.className&&(N+=" "+g.className),w[L(S)&&!A.has(S)?"class":"className"]=N,s&&(w.ref=s),React.createElement(S,w)}(D,e,o)}O.displayName=y;var D=React.forwardRef(O);return D.attrs=S,D.componentStyle=N,D.displayName=y,D.shouldForwardProp=w,D.foldedComponentIds=i?ie(a.foldedComponentIds,a.styledComponentId):"",D.styledComponentId=g,D.target=i?a.target:e,Object.defineProperty(D,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(e){this._foldedDefaultProps=i?function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];for(var r=0,o=t;r<o.length;r++)le(e,o[r],true);return e}({},a.defaultProps,e):e;}}),"production"!==process.env.NODE_ENV&&(P(y,g),D.warnTooManyClasses=function(e,t){var n={},r=false;return function(o){if(!r&&(n[o]=true,Object.keys(n).length>=200)){var s=t?' with the id of "'.concat(t,'"'):"";console.warn("Over ".concat(200," classes were generated for component ").concat(e).concat(s,".\n")+"Consider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"),r=true,n={};}}}(y,g)),ue(D,function(){return ".".concat(D.styledComponentId)}),c&&re(D,e,{attrs:true,componentStyle:true,displayName:true,foldedComponentIds:true,shouldForwardProp:true,styledComponentId:true,target:true}),D}function at$1(e,t){for(var n=[e[0]],r=0,o=t.length;r<o;r+=1)n.push(t[r],e[r+1]);return n}var ct=function(e){return Object.assign(e,{isCss:true})};function lt(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];if(oe(t)||ce(t))return ct(Xe(at$1(_$2,__spreadArray([t],n,true))));var o=t;return 0===n.length&&1===o.length&&"string"==typeof o[0]?Xe(o):ct(Xe(at$1(o,n)))}function ut(n,r,o){if(void 0===o&&(o=C),!r)throw he(1,r);var s=function(t){for(var s=[],i=1;i<arguments.length;i++)s[i-1]=arguments[i];return n(r,o,lt.apply(void 0,__spreadArray([t],s,false)))};return s.attrs=function(e){return ut(n,r,__assign(__assign({},o),{attrs:Array.prototype.concat(o.attrs,e).filter(Boolean)}))},s.withConfig=function(e){return ut(n,r,__assign(__assign({},o),e))},s}var pt=function(e){return ut(it,e)},dt=pt;A.forEach(function(e){dt[e]=pt(e);});function mt(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.");var o=ae(lt.apply(void 0,__spreadArray([t],n,false))),s=$(o);return new qe(s,o)}"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native");var wt="__sc-".concat(f,"__");"production"!==process.env.NODE_ENV&&"test"!==process.env.NODE_ENV&&"undefined"!=typeof window&&(window[wt]||(window[wt]=0),1===window[wt]&&console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."),window[wt]+=1);
 
-var _templateObject$q;
-var StyledButton = dt.button(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral$1(["\n  display: inline-flex;\n  padding: 12px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 8px;\n  text-transform: capitalize;\n  transition: 0.6s cubic-bezier(0.79, 0.01, 0.15, 0.99);\n  cursor: pointer;\n  white-space: nowrap;\n\n  & > svg > path {\n    transition: 0.6s cubic-bezier(0.79, 0.01, 0.15, 0.99);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    transition: 0.1s cubic-bezier(0.79, 0.01, 0.15, 0.99);\n\n    & > svg > path {\n      transition: 0.1s cubic-bezier(0.79, 0.01, 0.15, 0.99);\n    }\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var _templateObject$r;
+var StyledButton$1 = dt.button(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral$1(["\n  display: inline-flex;\n  padding: 12px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 8px;\n  text-transform: capitalize;\n  transition: 0.6s cubic-bezier(0.79, 0.01, 0.15, 0.99);\n  cursor: pointer;\n  white-space: nowrap;\n\n  & > svg > path {\n    transition: 0.6s cubic-bezier(0.79, 0.01, 0.15, 0.99);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    transition: 0.1s cubic-bezier(0.79, 0.01, 0.15, 0.99);\n\n    & > svg > path {\n      transition: 0.1s cubic-bezier(0.79, 0.01, 0.15, 0.99);\n    }\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var $size = _ref.$size;
   switch ($size) {
     case ButtonSizeEnum.SM:
@@ -1495,7 +1495,7 @@ var Button$1 = function Button(_ref) {
     _ref$htmlType = _ref.htmlType,
     htmlType = _ref$htmlType === void 0 ? HtmlButtonTypeEnum.BUTTON : _ref$htmlType,
     className = _ref.className;
-  return require$$2$2.jsxs(StyledButton, {
+  return require$$2$2.jsxs(StyledButton$1, {
     "$type": type,
     "$size": size,
     disabled: !!disabled,
@@ -5444,7 +5444,7 @@ var deepmerge$2 = /*#__PURE__*/Object.freeze({
     isPlainObject: isPlainObject$2
 });
 
-const _excluded$43 = ["values", "unit", "step"];
+const _excluded$44 = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -5478,7 +5478,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$43);
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$44);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -6638,7 +6638,7 @@ function applyStyles$2(key, styles) {
   return {};
 }
 
-const _excluded$42 = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$43 = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$2(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -6646,7 +6646,7 @@ function createTheme$2(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$42);
+    other = _objectWithoutPropertiesLoose(options, _excluded$43);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge$3({
@@ -6722,7 +6722,7 @@ process.env.NODE_ENV !== "production" ? GlobalStyles$1.propTypes /* remove-propt
   themeId: PropTypes.string
 } : void 0;
 
-const _excluded$41 = ["sx"];
+const _excluded$42 = ["sx"];
 const splitProps = props => {
   var _props$theme$unstable, _props$theme;
   const result = {
@@ -6743,7 +6743,7 @@ function extendSxProp(props) {
   const {
       sx: inSx
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$41);
+    other = _objectWithoutPropertiesLoose(props, _excluded$42);
   const {
     systemProps,
     otherProps
@@ -6794,7 +6794,7 @@ const ClassNameGenerator$2 = createClassNameGenerator$2();
 
 function r$3(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r$3(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx$3(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r$3(e))&&(n&&(n+=" "),n+=t);return n}
 
-const _excluded$40 = ["className", "component"];
+const _excluded$41 = ["className", "component"];
 function createBox(options = {}) {
   const {
     themeId,
@@ -6812,7 +6812,7 @@ function createBox(options = {}) {
         className,
         component = 'div'
       } = _extendSxProp,
-      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$40);
+      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$41);
     return /*#__PURE__*/require$$2$2.jsx(BoxRoot, _extends$1({
       as: component,
       ref: ref,
@@ -7191,7 +7191,7 @@ var getDisplayName$1 = /*#__PURE__*/Object.freeze({
     getFunctionName: getFunctionName$1
 });
 
-const _excluded$3$ = ["ownerState"],
+const _excluded$40 = ["ownerState"],
   _excluded2$d = ["variants"],
   _excluded3$5 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 function isEmpty$3(obj) {
@@ -7235,7 +7235,7 @@ function processStyleArg(callableStyle, _ref) {
   let {
       ownerState
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3$);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$40);
   const resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle(_extends$1({
     ownerState
   }, props)) : callableStyle;
@@ -7863,13 +7863,13 @@ function exactProp$2(propTypes) {
   });
 }
 
-const _excluded$3_ = ["value"];
+const _excluded$3$ = ["value"];
 const RtlContext = /*#__PURE__*/React__namespace.createContext();
 function RtlProvider(_ref) {
   let {
       value
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3_);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3$);
   return /*#__PURE__*/require$$2$2.jsx(RtlContext.Provider, _extends$1({
     value: value != null ? value : true
   }, props));
@@ -8070,7 +8070,7 @@ function composeClasses$2(slots, getUtilityClass, classes = undefined) {
   return output;
 }
 
-const _excluded$3Z = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
+const _excluded$3_ = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
 const defaultTheme$3 = createTheme$2();
 // widening Theme to any so that the consumer can own the theme structure.
 const defaultCreateStyledComponent = styled$1('div', {
@@ -8203,7 +8203,7 @@ function createStack(options = {}) {
         className,
         useFlexGap = false
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$3Z);
+      other = _objectWithoutPropertiesLoose(props, _excluded$3_);
     const ownerState = {
       direction,
       spacing,
@@ -8727,7 +8727,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
 var colorManipulatorExports = /*@__PURE__*/ requireColorManipulator();
 
-const _excluded$3Y = ["mode", "contrastThreshold", "tonalOffset"];
+const _excluded$3Z = ["mode", "contrastThreshold", "tonalOffset"];
 const light = {
   // The colors used to style the text.
   text: {
@@ -8896,7 +8896,7 @@ function createPalette(palette) {
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-    other = _objectWithoutPropertiesLoose(palette, _excluded$3Y);
+    other = _objectWithoutPropertiesLoose(palette, _excluded$3Z);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -9020,7 +9020,7 @@ const theme2 = createTheme({ palette: {
   return paletteOutput;
 }
 
-const _excluded$3X = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+const _excluded$3Y = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round$3(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -9051,7 +9051,7 @@ function createTypography(palette, typography) {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$3X);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$3Y);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -9118,7 +9118,7 @@ function createShadow(...px) {
 // Values from https://github.com/material-components/material-components-web/blob/be8747f94574669cb5e7add1a7c54fa41a89cec7/packages/mdc-elevation/_variables.scss
 const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
 
-const _excluded$3W = ["duration", "easing", "delay"];
+const _excluded$3X = ["duration", "easing", "delay"];
 // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
 // to learn the context in which each easing should be used.
 const easing = {
@@ -9169,7 +9169,7 @@ function createTransitions(inputTransitions) {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$3W);
+      other = _objectWithoutPropertiesLoose(options, _excluded$3X);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       // IE11 support, replace with Number.isNaN
@@ -9218,7 +9218,7 @@ const zIndex = {
   tooltip: 1500
 };
 
-const _excluded$3V = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+const _excluded$3W = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
       mixins: mixinsInput = {},
@@ -9226,7 +9226,7 @@ function createTheme(options = {}, ...args) {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$3V);
+    other = _objectWithoutPropertiesLoose(options, _excluded$3W);
   if (options.vars &&
   // The error should throw only for the root theme creation because user is not allowed to use a custom node `vars`.
   // `generateCssVars` is the closest identifier for checking that the `options` is a result of `extendTheme` with CSS variables so that user can create new theme for nested ThemeProvider.
@@ -9642,12 +9642,12 @@ const styled = createStyled({
   rootShouldForwardProp
 });
 
-const _excluded$3U = ["theme"];
+const _excluded$3V = ["theme"];
 function ThemeProvider$1(_ref) {
   let {
       theme: themeInput
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3U);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3V);
   const scopedTheme = themeInput[THEME_ID];
   let finalTheme = scopedTheme || themeInput;
   if (typeof themeInput !== 'function') {
@@ -10853,7 +10853,7 @@ function resolveComponentProps$2(componentProps, ownerState, slotState) {
   return componentProps;
 }
 
-const _excluded$3T = ["elementType", "externalSlotProps", "ownerState", "skipResolvingSlotProps"];
+const _excluded$3U = ["elementType", "externalSlotProps", "ownerState", "skipResolvingSlotProps"];
 /**
  * @ignore - do not document.
  * Builds the props to be passed into the slot of an unstyled component.
@@ -10870,7 +10870,7 @@ function useSlotProps$1(parameters) {
       ownerState,
       skipResolvingSlotProps = false
     } = parameters,
-    rest = _objectWithoutPropertiesLoose(parameters, _excluded$3T);
+    rest = _objectWithoutPropertiesLoose(parameters, _excluded$3U);
   const resolvedComponentsProps = skipResolvingSlotProps ? {} : resolveComponentProps$2(externalSlotProps, ownerState);
   const {
     props: mergedProps,
@@ -10926,7 +10926,7 @@ function getSvgIconUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
-const _excluded$3S = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+const _excluded$3T = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
 const useUtilityClasses$Y = ownerState => {
   const {
     color,
@@ -10994,7 +10994,7 @@ const SvgIcon = /*#__PURE__*/React__namespace.forwardRef(function SvgIcon(inProp
       titleAccess,
       viewBox = '0 0 24 24'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3S);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3T);
   const hasSvgAsChild = /*#__PURE__*/React__namespace.isValidElement(children) && children.type === 'svg';
   const ownerState = _extends$1({}, props, {
     color,
@@ -11170,7 +11170,7 @@ function getCollapseUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiCollapse', ['root', 'horizontal', 'vertical', 'entered', 'hidden', 'wrapper', 'wrapperInner']);
 
-const _excluded$3R = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
+const _excluded$3S = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
 const useUtilityClasses$X = ownerState => {
   const {
     orientation,
@@ -11270,7 +11270,7 @@ const Collapse = /*#__PURE__*/React__namespace.forwardRef(function Collapse(inPr
       // eslint-disable-next-line react/prop-types
       TransitionComponent = reactTransitionGroup.Transition
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3R);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3S);
   const ownerState = _extends$1({}, props, {
     orientation,
     collapsedSize: collapsedSizeProp
@@ -11533,7 +11533,7 @@ function getPaperUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
 
-const _excluded$3Q = ["className", "component", "elevation", "square", "variant"];
+const _excluded$3R = ["className", "component", "elevation", "square", "variant"];
 const useUtilityClasses$W = ownerState => {
   const {
     square,
@@ -11588,7 +11588,7 @@ const Paper = /*#__PURE__*/React__namespace.forwardRef(function Paper(inProps, r
       square = false,
       variant = 'elevation'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3Q);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3R);
   const ownerState = _extends$1({}, props, {
     component,
     elevation,
@@ -11672,7 +11672,7 @@ if (process.env.NODE_ENV !== 'production') {
   AccordionContext.displayName = 'AccordionContext';
 }
 
-const _excluded$3P = ["className", "elementType", "ownerState", "externalForwardedProps", "getSlotOwnerState", "internalForwardedProps"],
+const _excluded$3Q = ["className", "elementType", "ownerState", "externalForwardedProps", "getSlotOwnerState", "internalForwardedProps"],
   _excluded2$c = ["component", "slots", "slotProps"],
   _excluded3$4 = ["component"];
 /**
@@ -11705,7 +11705,7 @@ name, parameters) {
       getSlotOwnerState,
       internalForwardedProps
     } = parameters,
-    useSlotPropsParams = _objectWithoutPropertiesLoose(parameters, _excluded$3P);
+    useSlotPropsParams = _objectWithoutPropertiesLoose(parameters, _excluded$3Q);
   const {
       component: rootComponent,
       slots = {
@@ -11754,7 +11754,7 @@ function getAccordionUtilityClass(slot) {
 }
 const accordionClasses = generateUtilityClasses$1('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
 
-const _excluded$3O = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "slots", "slotProps", "TransitionComponent", "TransitionProps"];
+const _excluded$3P = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "slots", "slotProps", "TransitionComponent", "TransitionProps"];
 const useUtilityClasses$V = ownerState => {
   const {
     classes,
@@ -11876,7 +11876,7 @@ const Accordion = /*#__PURE__*/React__namespace.forwardRef(function Accordion(in
       TransitionComponent: TransitionComponentProp,
       TransitionProps: TransitionPropsProp
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3O);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3P);
   const [expanded, setExpandedState] = useControlled$1({
     controlled: expandedProp,
     default: defaultExpanded,
@@ -12035,7 +12035,7 @@ function getAccordionDetailsUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiAccordionDetails', ['root']);
 
-const _excluded$3N = ["className"];
+const _excluded$3O = ["className"];
 const useUtilityClasses$U = ownerState => {
   const {
     classes
@@ -12062,7 +12062,7 @@ const AccordionDetails = /*#__PURE__*/React__namespace.forwardRef(function Accor
   const {
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3N);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3O);
   const ownerState = props;
   const classes = useUtilityClasses$U(ownerState);
   return /*#__PURE__*/require$$2$2.jsx(AccordionDetailsRoot, _extends$1({
@@ -12174,7 +12174,7 @@ process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
 
 const touchRippleClasses = generateUtilityClasses$1('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
 
-const _excluded$3M = ["center", "classes", "className"];
+const _excluded$3N = ["center", "classes", "className"];
 let _$1 = t => t,
   _t$1,
   _t2$1,
@@ -12303,7 +12303,7 @@ const TouchRipple = /*#__PURE__*/React__namespace.forwardRef(function TouchRippl
       classes = {},
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3M);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3N);
   const [ripples, setRipples] = React__namespace.useState([]);
   const nextKey = React__namespace.useRef(0);
   const rippleCallback = React__namespace.useRef(null);
@@ -12497,7 +12497,7 @@ function getButtonBaseUtilityClass(slot) {
 }
 const buttonBaseClasses = generateUtilityClasses$1('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
 
-const _excluded$3L = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
+const _excluded$3M = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
 const useUtilityClasses$T = ownerState => {
   const {
     disabled,
@@ -12598,7 +12598,7 @@ const ButtonBase = /*#__PURE__*/React__namespace.forwardRef(function ButtonBase(
       touchRippleRef,
       type
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3L);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3M);
   const buttonRef = React__namespace.useRef(null);
   const rippleRef = React__namespace.useRef(null);
   const handleRippleRef = useForkRef$2(rippleRef, touchRippleRef);
@@ -12960,7 +12960,7 @@ function getAccordionSummaryUtilityClass(slot) {
 }
 const accordionSummaryClasses = generateUtilityClasses$1('MuiAccordionSummary', ['root', 'expanded', 'focusVisible', 'disabled', 'gutters', 'contentGutters', 'content', 'expandIconWrapper']);
 
-const _excluded$3K = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];
+const _excluded$3L = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];
 const useUtilityClasses$S = ownerState => {
   const {
     classes,
@@ -13061,7 +13061,7 @@ const AccordionSummary = /*#__PURE__*/React__namespace.forwardRef(function Accor
       focusVisibleClassName,
       onClick
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3K);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3L);
   const {
     disabled = false,
     disableGutters,
@@ -13150,7 +13150,7 @@ function getIconButtonUtilityClass(slot) {
 }
 const iconButtonClasses = generateUtilityClasses$1('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
 
-const _excluded$3J = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
+const _excluded$3K = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
 const useUtilityClasses$R = ownerState => {
   const {
     classes,
@@ -13251,7 +13251,7 @@ const IconButton = /*#__PURE__*/React__namespace.forwardRef(function IconButton(
       disableFocusRipple = false,
       size = 'medium'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3J);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3K);
   const ownerState = _extends$1({}, props, {
     edge,
     color,
@@ -13344,7 +13344,7 @@ function getTypographyUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
 
-const _excluded$3I = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
+const _excluded$3J = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
 const useUtilityClasses$Q = ownerState => {
   const {
     align,
@@ -13431,7 +13431,7 @@ const Typography = /*#__PURE__*/React__namespace.forwardRef(function Typography(
       variant = 'body1',
       variantMapping = defaultVariantMapping
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3I);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3J);
   const ownerState = _extends$1({}, props, {
     align,
     color,
@@ -15436,7 +15436,7 @@ function getPopperUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiPopper', ['root']);
 
-const _excluded$3H = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
+const _excluded$3I = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
   _excluded2$b = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
 function flipPlacement(placement, direction) {
   if (direction === 'ltr') {
@@ -15492,7 +15492,7 @@ const PopperTooltip = /*#__PURE__*/React__namespace.forwardRef(function PopperTo
       // @ts-ignore internal logic
       // prevent from spreading to DOM, it can come from the parent component e.g. Select.
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3H);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3I);
   const tooltipRef = React__namespace.useRef(null);
   const ownRef = useForkRef$2(tooltipRef, forwardedRef);
   const popperRef = React__namespace.useRef(null);
@@ -15795,7 +15795,7 @@ process.env.NODE_ENV !== "production" ? Popper$1.propTypes /* remove-proptypes *
   transition: PropTypes.bool
 } : void 0;
 
-const _excluded$3G = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
+const _excluded$3H = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
 const PopperRoot = styled(Popper$1, {
   name: 'MuiPopper',
   slot: 'Root',
@@ -15838,7 +15838,7 @@ const Popper = /*#__PURE__*/React__namespace.forwardRef(function Popper(inProps,
       slots,
       slotProps
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3G);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3H);
   const RootComponent = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components == null ? void 0 : components.Root;
   const otherProps = _extends$1({
     anchorEl,
@@ -16000,7 +16000,7 @@ function getChipUtilityClass(slot) {
 }
 const chipClasses = generateUtilityClasses$1('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
 
-const _excluded$3F = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant", "tabIndex", "skipFocusWhenDisabled"];
+const _excluded$3G = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant", "tabIndex", "skipFocusWhenDisabled"];
 const useUtilityClasses$O = ownerState => {
   const {
     classes,
@@ -16286,7 +16286,7 @@ const Chip = /*#__PURE__*/React__namespace.forwardRef(function Chip(inProps, ref
       tabIndex,
       skipFocusWhenDisabled = false // TODO v6: Rename to `focusableWhenDisabled`.
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3F);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3G);
   const chipRef = React__namespace.useRef(null);
   const handleRef = useForkRef$2(chipRef, ref);
   const handleDeleteIconClick = event => {
@@ -16487,7 +16487,7 @@ process.env.NODE_ENV !== "production" ? Chip.propTypes /* remove-proptypes */ =
   variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['filled', 'outlined']), PropTypes.string])
 } : void 0;
 
-const _excluded$3E = ["onChange", "maxRows", "minRows", "style", "value"];
+const _excluded$3F = ["onChange", "maxRows", "minRows", "style", "value"];
 function getStyleValue(value) {
   return parseInt(value, 10) || 0;
 }
@@ -16535,7 +16535,7 @@ const TextareaAutosize = /*#__PURE__*/React__namespace.forwardRef(function Texta
       style,
       value
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3E);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3F);
   const {
     current: isControlled
   } = React__namespace.useRef(value != null);
@@ -16803,7 +16803,7 @@ function getInputBaseUtilityClass(slot) {
 }
 const inputBaseClasses = generateUtilityClasses$1('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'readOnly', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
 
-const _excluded$3D = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
+const _excluded$3E = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
 const rootOverridesResolver = (props, styles) => {
   const {
     ownerState
@@ -17032,7 +17032,7 @@ const InputBase = /*#__PURE__*/React__namespace.forwardRef(function InputBase(in
       type = 'text',
       value: valueProp
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3D);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3E);
   const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
   const {
     current: isControlled
@@ -17506,7 +17506,7 @@ var ArrowDropDownIcon$2 = createSvgIcon$1( /*#__PURE__*/require$$2$2.jsx("path",
   d: "M7 10l5 5 5-5z"
 }), 'ArrowDropDown');
 
-const _excluded$3C = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$3D = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 const styles$3 = {
   entering: {
     opacity: 1
@@ -17543,7 +17543,7 @@ const Fade = /*#__PURE__*/React__namespace.forwardRef(function Fade(props, ref)
       // eslint-disable-next-line react/prop-types
       TransitionComponent = reactTransitionGroup.Transition
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3C);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3D);
   const nodeRef = React__namespace.useRef(null);
   const handleRef = useForkRef$2(nodeRef, getReactElementRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
@@ -17703,7 +17703,7 @@ function getBackdropUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiBackdrop', ['root', 'invisible']);
 
-const _excluded$3B = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
+const _excluded$3C = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
 const useUtilityClasses$M = ownerState => {
   const {
     classes,
@@ -17758,7 +17758,7 @@ const Backdrop = /*#__PURE__*/React__namespace.forwardRef(function Backdrop(inPr
       TransitionComponent = Fade,
       transitionDuration
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3B);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3C);
   const ownerState = _extends$1({}, props, {
     component,
     invisible
@@ -17928,7 +17928,7 @@ if (process.env.NODE_ENV !== 'production') {
   ButtonGroupButtonContext.displayName = 'ButtonGroupButtonContext';
 }
 
-const _excluded$3A = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
+const _excluded$3B = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 const useUtilityClasses$L = ownerState => {
   const {
     color,
@@ -18155,7 +18155,7 @@ const Button = /*#__PURE__*/React__namespace.forwardRef(function Button(inProps,
       type,
       variant = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3A);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3B);
   const ownerState = _extends$1({}, props, {
     color,
     component,
@@ -18293,7 +18293,7 @@ function getCardUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiCard', ['root']);
 
-const _excluded$3z = ["className", "raised"];
+const _excluded$3A = ["className", "raised"];
 const useUtilityClasses$K = ownerState => {
   const {
     classes
@@ -18321,7 +18321,7 @@ const Card = /*#__PURE__*/React__namespace.forwardRef(function Card(inProps, ref
       className,
       raised = false
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3z);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3A);
   const ownerState = _extends$1({}, props, {
     raised
   });
@@ -18371,7 +18371,7 @@ function getCardContentUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiCardContent', ['root']);
 
-const _excluded$3y = ["className", "component"];
+const _excluded$3z = ["className", "component"];
 const useUtilityClasses$J = ownerState => {
   const {
     classes
@@ -18402,7 +18402,7 @@ const CardContent = /*#__PURE__*/React__namespace.forwardRef(function CardConten
       className,
       component = 'div'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3y);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3z);
   const ownerState = _extends$1({}, props, {
     component
   });
@@ -18447,7 +18447,7 @@ function getSwitchBaseUtilityClass(slot) {
 }
 generateUtilityClasses$1('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
 
-const _excluded$3x = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
+const _excluded$3y = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
 const useUtilityClasses$I = ownerState => {
   const {
     classes,
@@ -18513,7 +18513,7 @@ const SwitchBase = /*#__PURE__*/React__namespace.forwardRef(function SwitchBase(
       type,
       value
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3x);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3y);
   const [checked, setCheckedState] = useControlled$1({
     controlled: checkedProp,
     default: Boolean(defaultChecked),
@@ -18720,7 +18720,7 @@ function getCheckboxUtilityClass(slot) {
 }
 const checkboxClasses = generateUtilityClasses$1('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium']);
 
-const _excluded$3w = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
+const _excluded$3x = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
 const useUtilityClasses$H = ownerState => {
   const {
     classes,
@@ -18784,7 +18784,7 @@ const Checkbox$1 = /*#__PURE__*/React__namespace.forwardRef(function Checkbox(in
       size = 'medium',
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3w);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3x);
   const icon = indeterminate ? indeterminateIconProp : iconProp;
   const indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;
   const ownerState = _extends$1({}, props, {
@@ -18918,7 +18918,7 @@ function getCircularProgressUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
 
-const _excluded$3v = ["className", "color", "disableShrink", "size", "style", "thickness", "value", "variant"];
+const _excluded$3w = ["className", "color", "disableShrink", "size", "style", "thickness", "value", "variant"];
 let _ = t => t,
   _t,
   _t2,
@@ -19042,7 +19042,7 @@ const CircularProgress = /*#__PURE__*/React__namespace.forwardRef(function Circu
       value = 0,
       variant = 'indeterminate'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3v);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3w);
   const ownerState = _extends$1({}, props, {
     color,
     disableShrink,
@@ -19883,7 +19883,7 @@ function getModalUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiModal', ['root', 'hidden', 'backdrop']);
 
-const _excluded$3u = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"];
+const _excluded$3v = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"];
 const useUtilityClasses$F = ownerState => {
   const {
     open,
@@ -19971,7 +19971,7 @@ const Modal = /*#__PURE__*/React__namespace.forwardRef(function Modal(inProps, r
       slots
       // eslint-disable-next-line react/prop-types
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3u);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3v);
   const propsWithDefaults = _extends$1({}, props, {
     closeAfterTransition,
     disableAutoFocus,
@@ -20253,7 +20253,7 @@ function getDialogActionsUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiDialogActions', ['root', 'spacing']);
 
-const _excluded$3t = ["className", "disableSpacing"];
+const _excluded$3u = ["className", "disableSpacing"];
 const useUtilityClasses$E = ownerState => {
   const {
     classes,
@@ -20295,7 +20295,7 @@ const DialogActions = /*#__PURE__*/React__namespace.forwardRef(function DialogAc
       className,
       disableSpacing = false
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3t);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3u);
   const ownerState = _extends$1({}, props, {
     disableSpacing
   });
@@ -20334,7 +20334,7 @@ process.env.NODE_ENV !== "production" ? DialogActions.propTypes /* remove-propty
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 
-const _excluded$3s = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
+const _excluded$3t = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
 const useUtilityClasses$D = ownerState => {
   const {
     classes,
@@ -20519,7 +20519,7 @@ const FilledInput = /*#__PURE__*/React__namespace.forwardRef(function FilledInpu
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3s);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3t);
   const ownerState = _extends$1({}, props, {
     fullWidth,
     inputComponent,
@@ -20753,7 +20753,7 @@ function getFormControlUtilityClasses(slot) {
 }
 generateUtilityClasses$1('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
 
-const _excluded$3r = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
+const _excluded$3s = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
 const useUtilityClasses$C = ownerState => {
   const {
     classes,
@@ -20839,7 +20839,7 @@ const FormControl = /*#__PURE__*/React__namespace.forwardRef(function FormContro
       size = 'medium',
       variant = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3r);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3s);
   const ownerState = _extends$1({}, props, {
     color,
     component,
@@ -21088,7 +21088,7 @@ function getFormControlLabelUtilityClasses(slot) {
 }
 const formControlLabelClasses = generateUtilityClasses$1('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error', 'required', 'asterisk']);
 
-const _excluded$3q = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"];
+const _excluded$3r = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"];
 const useUtilityClasses$B = ownerState => {
   const {
     classes,
@@ -21182,7 +21182,7 @@ const FormControlLabel = /*#__PURE__*/React__namespace.forwardRef(function FormC
       required: requiredProp,
       slotProps = {}
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3q);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3r);
   const muiFormControl = useFormControl();
   const disabled = (_ref = disabledProp != null ? disabledProp : control.props.disabled) != null ? _ref : muiFormControl == null ? void 0 : muiFormControl.disabled;
   const required = requiredProp != null ? requiredProp : control.props.required;
@@ -21320,7 +21320,7 @@ function getFormHelperTextUtilityClasses(slot) {
 const formHelperTextClasses = generateUtilityClasses$1('MuiFormHelperText', ['root', 'error', 'disabled', 'sizeSmall', 'sizeMedium', 'contained', 'focused', 'filled', 'required']);
 
 var _span$3;
-const _excluded$3p = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
+const _excluded$3q = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
 const useUtilityClasses$A = ownerState => {
   const {
     classes,
@@ -21379,7 +21379,7 @@ const FormHelperText = /*#__PURE__*/React__namespace.forwardRef(function FormHel
       className,
       component = 'p'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3p);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3q);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -21475,7 +21475,7 @@ function getFormLabelUtilityClasses(slot) {
 }
 const formLabelClasses = generateUtilityClasses$1('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
 
-const _excluded$3o = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
+const _excluded$3p = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
 const useUtilityClasses$z = ownerState => {
   const {
     classes,
@@ -21540,7 +21540,7 @@ const FormLabel = /*#__PURE__*/React__namespace.forwardRef(function FormLabel(in
       className,
       component = 'label'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3o);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3p);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -21625,7 +21625,7 @@ process.env.NODE_ENV !== "production" ? FormLabel.propTypes /* remove-proptypes
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 
-const _excluded$3n = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$3o = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 function getScale$1(value) {
   return `scale(${value}, ${value ** 2})`;
 }
@@ -21669,7 +21669,7 @@ const Grow = /*#__PURE__*/React__namespace.forwardRef(function Grow(props, ref)
       // eslint-disable-next-line react/prop-types
       TransitionComponent = reactTransitionGroup.Transition
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3n);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3o);
   const timer = useTimeout();
   const autoTimeout = React__namespace.useRef();
   const theme = useTheme$2();
@@ -21867,7 +21867,7 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes /* remove-proptypes */ =
 } : void 0;
 Grow.muiSupportAuto = true;
 
-const _excluded$3m = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
+const _excluded$3n = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
 const useUtilityClasses$y = ownerState => {
   const {
     classes,
@@ -21978,7 +21978,7 @@ const Input$2 = /*#__PURE__*/React__namespace.forwardRef(function Input(inProps,
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3m);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3n);
   const classes = useUtilityClasses$y(props);
   const ownerState = {
     disableUnderline
@@ -22200,7 +22200,7 @@ function getInputAdornmentUtilityClass(slot) {
 const inputAdornmentClasses = generateUtilityClasses$1('MuiInputAdornment', ['root', 'filled', 'standard', 'outlined', 'positionStart', 'positionEnd', 'disablePointerEvents', 'hiddenLabel', 'sizeSmall']);
 
 var _span$2;
-const _excluded$3l = ["children", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"];
+const _excluded$3m = ["children", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"];
 const overridesResolver$3 = (props, styles) => {
   const {
     ownerState
@@ -22265,7 +22265,7 @@ const InputAdornment = /*#__PURE__*/React__namespace.forwardRef(function InputAd
       position,
       variant: variantProp
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3l);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3m);
   const muiFormControl = useFormControl() || {};
   let variant = variantProp;
   if (variantProp && muiFormControl.variant) {
@@ -22360,7 +22360,7 @@ function getInputLabelUtilityClasses(slot) {
 }
 generateUtilityClasses$1('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
 
-const _excluded$3k = ["disableAnimation", "margin", "shrink", "variant", "className"];
+const _excluded$3l = ["disableAnimation", "margin", "shrink", "variant", "className"];
 const useUtilityClasses$w = ownerState => {
   const {
     classes,
@@ -22462,7 +22462,7 @@ const InputLabel$1 = /*#__PURE__*/React__namespace.forwardRef(function InputLabe
       shrink: shrinkProp,
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3k);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3l);
   const muiFormControl = useFormControl();
   let shrink = shrinkProp;
   if (typeof shrink === 'undefined' && muiFormControl) {
@@ -22573,7 +22573,7 @@ function getListUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiList', ['root', 'padding', 'dense', 'subheader']);
 
-const _excluded$3j = ["children", "className", "component", "dense", "disablePadding", "subheader"];
+const _excluded$3k = ["children", "className", "component", "dense", "disablePadding", "subheader"];
 const useUtilityClasses$v = ownerState => {
   const {
     classes,
@@ -22621,7 +22621,7 @@ const List = /*#__PURE__*/React__namespace.forwardRef(function List(inProps, ref
       disablePadding = false,
       subheader
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3j);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3k);
   const context = React__namespace.useMemo(() => ({
     dense
   }), [dense]);
@@ -22699,7 +22699,7 @@ function getListItemSecondaryActionClassesUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiListItemSecondaryAction', ['root', 'disableGutters']);
 
-const _excluded$3i = ["className"];
+const _excluded$3j = ["className"];
 const useUtilityClasses$u = ownerState => {
   const {
     disableGutters,
@@ -22741,7 +22741,7 @@ const ListItemSecondaryAction = /*#__PURE__*/React__namespace.forwardRef(functio
   const {
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3i);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3j);
   const context = React__namespace.useContext(ListContext);
   const ownerState = _extends$1({}, props, {
     disableGutters: context.disableGutters
@@ -22777,7 +22777,7 @@ process.env.NODE_ENV !== "production" ? ListItemSecondaryAction.propTypes /* rem
 } : void 0;
 ListItemSecondaryAction.muiName = 'ListItemSecondaryAction';
 
-const _excluded$3h = ["className"],
+const _excluded$3i = ["className"],
   _excluded2$a = ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected", "slotProps", "slots"];
 const overridesResolver$2 = (props, styles) => {
   const {
@@ -22919,7 +22919,7 @@ const ListItem = /*#__PURE__*/React__namespace.forwardRef(function ListItem(inPr
       slotProps = {},
       slots = {}
     } = props,
-    ContainerProps = _objectWithoutPropertiesLoose(props.ContainerProps, _excluded$3h),
+    ContainerProps = _objectWithoutPropertiesLoose(props.ContainerProps, _excluded$3i),
     other = _objectWithoutPropertiesLoose(props, _excluded2$a);
   const context = React__namespace.useContext(ListContext);
   const childContext = React__namespace.useMemo(() => ({
@@ -23175,7 +23175,7 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes /* remove-proptypes *
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 
-const _excluded$3g = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
+const _excluded$3h = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
 function nextItem(list, item, disableListWrap) {
   if (list === item) {
     return list.firstChild;
@@ -23257,7 +23257,7 @@ const MenuList$1 = /*#__PURE__*/React__namespace.forwardRef(function MenuList(pr
       onKeyDown,
       variant = 'selectedMenu'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3g);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3h);
   const listRef = React__namespace.useRef(null);
   const textCriteriaRef = React__namespace.useRef({
     keys: [],
@@ -23451,7 +23451,7 @@ function getPopoverUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiPopover', ['root', 'paper']);
 
-const _excluded$3f = ["onEntering"],
+const _excluded$3g = ["onEntering"],
   _excluded2$9 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps", "disableScrollLock"],
   _excluded3$3 = ["slotProps"];
 function getOffsetTop(rect, vertical) {
@@ -23549,7 +23549,7 @@ const Popover = /*#__PURE__*/React__namespace.forwardRef(function Popover(inProp
       } = {},
       disableScrollLock = false
     } = props,
-    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$3f),
+    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$3g),
     other = _objectWithoutPropertiesLoose(props, _excluded2$9);
   const externalPaperSlotProps = (_slotProps$paper = slotProps == null ? void 0 : slotProps.paper) != null ? _slotProps$paper : PaperPropsProp;
   const paperRef = React__namespace.useRef();
@@ -23967,7 +23967,7 @@ function getMenuUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiMenu', ['root', 'paper', 'list']);
 
-const _excluded$3e = ["onEntering"],
+const _excluded$3f = ["onEntering"],
   _excluded2$8 = ["autoFocus", "children", "className", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant", "slots", "slotProps"];
 const RTL_ORIGIN = {
   vertical: 'top',
@@ -24038,7 +24038,7 @@ const Menu$2 = /*#__PURE__*/React__namespace.forwardRef(function Menu(inProps, r
       slots = {},
       slotProps = {}
     } = props,
-    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$3e),
+    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$3f),
     other = _objectWithoutPropertiesLoose(props, _excluded2$8);
   const isRtl = useRtl();
   const ownerState = _extends$1({}, props, {
@@ -24261,7 +24261,7 @@ function getNativeSelectUtilityClasses(slot) {
 }
 const nativeSelectClasses = generateUtilityClasses$1('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
 
-const _excluded$3d = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
+const _excluded$3e = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
 const useUtilityClasses$q = ownerState => {
   const {
     classes,
@@ -24388,7 +24388,7 @@ const NativeSelectInput = /*#__PURE__*/React__namespace.forwardRef(function Nati
       inputRef,
       variant = 'standard'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3d);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3e);
   const ownerState = _extends$1({}, props, {
     disabled,
     variant,
@@ -24465,7 +24465,7 @@ process.env.NODE_ENV !== "production" ? NativeSelectInput.propTypes = {
 } : void 0;
 
 var _span$1;
-const _excluded$3c = ["children", "classes", "className", "label", "notched"];
+const _excluded$3d = ["children", "classes", "className", "label", "notched"];
 const NotchedOutlineRoot$1 = styled('fieldset', {
   shouldForwardProp: rootShouldForwardProp
 })({
@@ -24542,7 +24542,7 @@ function NotchedOutline(props) {
       label,
       notched
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3c);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3d);
   const withLabel = label != null && label !== '';
   const ownerState = _extends$1({}, props, {
     notched,
@@ -24592,7 +24592,7 @@ process.env.NODE_ENV !== "production" ? NotchedOutline.propTypes = {
   style: PropTypes.object
 } : void 0;
 
-const _excluded$3b = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
+const _excluded$3c = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
 const useUtilityClasses$p = ownerState => {
   const {
     classes
@@ -24711,7 +24711,7 @@ const OutlinedInput = /*#__PURE__*/React__namespace.forwardRef(function Outlined
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3b);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3c);
   const classes = useUtilityClasses$p(props);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
@@ -24930,7 +24930,7 @@ function getPaginationUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiPagination', ['root', 'ul', 'outlined', 'text']);
 
-const _excluded$3a = ["boundaryCount", "componentName", "count", "defaultPage", "disabled", "hideNextButton", "hidePrevButton", "onChange", "page", "showFirstButton", "showLastButton", "siblingCount"];
+const _excluded$3b = ["boundaryCount", "componentName", "count", "defaultPage", "disabled", "hideNextButton", "hidePrevButton", "onChange", "page", "showFirstButton", "showLastButton", "siblingCount"];
 function usePagination(props = {}) {
   // keep default values in sync with @default tags in Pagination.propTypes
   const {
@@ -24947,7 +24947,7 @@ function usePagination(props = {}) {
       showLastButton = false,
       siblingCount = 1
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3a);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3b);
   const [page, setPageState] = useControlled$1({
     controlled: pageProp,
     default: defaultPage,
@@ -25062,7 +25062,7 @@ var NavigateNextIcon = createSvgIcon$1( /*#__PURE__*/require$$2$2.jsx("path", {
   d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
 }), 'NavigateNext');
 
-const _excluded$39 = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "type", "variant"];
+const _excluded$3a = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "type", "variant"];
 const overridesResolver$1 = (props, styles) => {
   const {
     ownerState
@@ -25267,7 +25267,7 @@ const PaginationItem = /*#__PURE__*/React__namespace.forwardRef(function Paginat
       type = 'page',
       variant = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$39);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3a);
   const ownerState = _extends$1({}, props, {
     color,
     disabled,
@@ -25406,7 +25406,7 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-propt
   variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['outlined', 'text']), PropTypes.string])
 } : void 0;
 
-const _excluded$38 = ["boundaryCount", "className", "color", "count", "defaultPage", "disabled", "getItemAriaLabel", "hideNextButton", "hidePrevButton", "onChange", "page", "renderItem", "shape", "showFirstButton", "showLastButton", "siblingCount", "size", "variant"];
+const _excluded$39 = ["boundaryCount", "className", "color", "count", "defaultPage", "disabled", "getItemAriaLabel", "hideNextButton", "hidePrevButton", "onChange", "page", "renderItem", "shape", "showFirstButton", "showLastButton", "siblingCount", "size", "variant"];
 const useUtilityClasses$n = ownerState => {
   const {
     classes,
@@ -25469,7 +25469,7 @@ const Pagination$1 = /*#__PURE__*/React__namespace.forwardRef(function Paginatio
       size = 'medium',
       variant = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$38);
+    other = _objectWithoutPropertiesLoose(props, _excluded$39);
   const {
     items
   } = usePagination(_extends$1({}, props, {
@@ -25728,7 +25728,7 @@ function getRadioUtilityClass(slot) {
 }
 const radioClasses = generateUtilityClasses$1('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary', 'sizeSmall']);
 
-const _excluded$37 = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
+const _excluded$38 = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
 const useUtilityClasses$m = ownerState => {
   const {
     classes,
@@ -25800,7 +25800,7 @@ const Radio = /*#__PURE__*/React__namespace.forwardRef(function Radio(inProps, r
       size = 'medium',
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$37);
+    other = _objectWithoutPropertiesLoose(props, _excluded$38);
   const ownerState = _extends$1({}, props, {
     color,
     size
@@ -25929,7 +25929,7 @@ function getSelectUtilityClasses(slot) {
 const selectClasses = generateUtilityClasses$1('MuiSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
 
 var _span;
-const _excluded$36 = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "error", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
+const _excluded$37 = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "error", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
 const SelectSelect = styled('div', {
   name: 'MuiSelect',
   slot: 'Select',
@@ -26052,7 +26052,7 @@ const SelectInput = /*#__PURE__*/React__namespace.forwardRef(function SelectInpu
       value: valueProp,
       variant = 'standard'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$36);
+    other = _objectWithoutPropertiesLoose(props, _excluded$37);
   const [value, setValueState] = useControlled$1({
     controlled: valueProp,
     default: defaultValue,
@@ -26562,7 +26562,7 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
   variant: PropTypes.oneOf(['standard', 'outlined', 'filled'])
 } : void 0;
 
-const _excluded$35 = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"],
+const _excluded$36 = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"],
   _excluded2$7 = ["root"];
 const useUtilityClasses$k = ownerState => {
   const {
@@ -26576,7 +26576,7 @@ const styledRootConfig = {
   shouldForwardProp: prop => rootShouldForwardProp(prop) && prop !== 'variant',
   slot: 'Root'
 };
-const StyledInput = styled(Input$2, styledRootConfig)('');
+const StyledInput$1 = styled(Input$2, styledRootConfig)('');
 const StyledOutlinedInput = styled(OutlinedInput, styledRootConfig)('');
 const StyledFilledInput = styled(FilledInput, styledRootConfig)('');
 const Select$1 = /*#__PURE__*/React__namespace.forwardRef(function Select(inProps, ref) {
@@ -26607,7 +26607,7 @@ const Select$1 = /*#__PURE__*/React__namespace.forwardRef(function Select(inProp
       SelectDisplayProps,
       variant: variantProp = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$35);
+    other = _objectWithoutPropertiesLoose(props, _excluded$36);
   const inputComponent = native ? NativeSelectInput : SelectInput;
   const muiFormControl = useFormControl();
   const fcs = formControlState({
@@ -26623,7 +26623,7 @@ const Select$1 = /*#__PURE__*/React__namespace.forwardRef(function Select(inProp
   const classes = useUtilityClasses$k(ownerState);
   const restOfClasses = _objectWithoutPropertiesLoose(classes, _excluded2$7);
   const InputComponent = input || {
-    standard: /*#__PURE__*/require$$2$2.jsx(StyledInput, {
+    standard: /*#__PURE__*/require$$2$2.jsx(StyledInput$1, {
       ownerState: ownerState
     }),
     outlined: /*#__PURE__*/require$$2$2.jsx(StyledOutlinedInput, {
@@ -27534,7 +27534,7 @@ process.env.NODE_ENV !== "production" ? SliderValueLabel$1.propTypes = {
   value: PropTypes.node
 } : void 0;
 
-const _excluded$34 = ["aria-label", "aria-valuetext", "aria-labelledby", "component", "components", "componentsProps", "color", "classes", "className", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "shiftStep", "size", "step", "scale", "slotProps", "slots", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat"];
+const _excluded$35 = ["aria-label", "aria-valuetext", "aria-labelledby", "component", "components", "componentsProps", "color", "classes", "className", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "shiftStep", "size", "step", "scale", "slotProps", "slots", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat"];
 function Identity(x) {
   return x;
 }
@@ -28096,7 +28096,7 @@ const Slider = /*#__PURE__*/React__namespace.forwardRef(function Slider(inputPro
       valueLabelDisplay = 'off',
       valueLabelFormat = Identity
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$34);
+    other = _objectWithoutPropertiesLoose(props, _excluded$35);
   const ownerState = _extends$1({}, props, {
     isRtl,
     max,
@@ -28559,7 +28559,7 @@ function getTooltipUtilityClass(slot) {
 }
 const tooltipClasses = generateUtilityClasses$1('MuiTooltip', ['popper', 'popperInteractive', 'popperArrow', 'popperClose', 'tooltip', 'tooltipArrow', 'touch', 'tooltipPlacementLeft', 'tooltipPlacementRight', 'tooltipPlacementTop', 'tooltipPlacementBottom', 'arrow']);
 
-const _excluded$33 = ["arrow", "children", "classes", "components", "componentsProps", "describeChild", "disableFocusListener", "disableHoverListener", "disableInteractive", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "followCursor", "id", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "slotProps", "slots", "title", "TransitionComponent", "TransitionProps"];
+const _excluded$34 = ["arrow", "children", "classes", "components", "componentsProps", "describeChild", "disableFocusListener", "disableHoverListener", "disableInteractive", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "followCursor", "id", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "slotProps", "slots", "title", "TransitionComponent", "TransitionProps"];
 function round$1(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -28781,7 +28781,7 @@ const Tooltip = /*#__PURE__*/React__namespace.forwardRef(function Tooltip(inProp
       TransitionComponent: TransitionComponentProp = Grow,
       TransitionProps
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$33);
+    other = _objectWithoutPropertiesLoose(props, _excluded$34);
 
   // to prevent runtime errors, developers will need to provide a child as a React element anyway.
   const children = /*#__PURE__*/React__namespace.isValidElement(childrenProp) ? childrenProp : /*#__PURE__*/require$$2$2.jsx("span", {
@@ -29305,7 +29305,7 @@ function getSwitchUtilityClass(slot) {
 }
 const switchClasses = generateUtilityClasses$1('MuiSwitch', ['root', 'edgeStart', 'edgeEnd', 'switchBase', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium', 'checked', 'disabled', 'input', 'thumb', 'track']);
 
-const _excluded$32 = ["className", "color", "edge", "size", "sx"];
+const _excluded$33 = ["className", "color", "edge", "size", "sx"];
 const useUtilityClasses$h = ownerState => {
   const {
     classes,
@@ -29500,7 +29500,7 @@ const Switch = /*#__PURE__*/React__namespace.forwardRef(function Switch(inProps,
       size = 'medium',
       sx
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$32);
+    other = _objectWithoutPropertiesLoose(props, _excluded$33);
   const ownerState = _extends$1({}, props, {
     color,
     edge,
@@ -29631,7 +29631,7 @@ function getTextFieldUtilityClass(slot) {
 }
 generateUtilityClasses$1('MuiTextField', ['root']);
 
-const _excluded$31 = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
+const _excluded$32 = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
 const variantComponent = {
   standard: Input$2,
   filled: FilledInput,
@@ -29723,7 +29723,7 @@ const TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(in
       value,
       variant = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$31);
+    other = _objectWithoutPropertiesLoose(props, _excluded$32);
   const ownerState = _extends$1({}, props, {
     autoFocus,
     color,
@@ -29997,43 +29997,43 @@ 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$p, _templateObject2$j, _templateObject3$f, _templateObject4$c, _templateObject5$8, _templateObject6$7, _templateObject7$5, _templateObject8$4, _templateObject9$3, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$1, _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$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;
 // CourseLayout
-dt.span(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral$1([""])));
-var GridItemContentHeader = dt.header(_templateObject2$j || (_templateObject2$j = _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"])));
-var GridItemTitle = dt.h3(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteral$1(["\n  font-size: 18px;\n  font-weight: 500;\n\n  transition: color 0.3s ease;\n"])));
-dt.span(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteral$1(["\n  color: #ea382a;\n"])));
-dt(Typography)(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteral$1(["\n  color: #7a7a7a;\n  opacity: 0.7;\n"])));
-dt.div(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 6px;\n  transition: 0.3s ease;\n  gap: 6px;\n  border-radius: 5px;\n  &:hover {\n    /* background: ", "; */\n    ", "\n  }\n  svg {\n    font-size: 1rem;\n  }\n\n  &.disabled {\n    opacity: 0.5;\n    pointer-events: none;\n  }\n"])), function (_ref) {
+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"])));
+var GridItemTitle = dt.h3(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteral$1(["\n  font-size: 18px;\n  font-weight: 500;\n\n  transition: color 0.3s ease;\n"])));
+dt.span(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteral$1(["\n  color: #ea382a;\n"])));
+dt(Typography)(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteral$1(["\n  color: #7a7a7a;\n  opacity: 0.7;\n"])));
+dt.div(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 6px;\n  transition: 0.3s ease;\n  gap: 6px;\n  border-radius: 5px;\n  &:hover {\n    /* background: ", "; */\n    ", "\n  }\n  svg {\n    font-size: 1rem;\n  }\n\n  &.disabled {\n    opacity: 0.5;\n    pointer-events: none;\n  }\n"])), function (_ref) {
   var hoverBackground = _ref.hoverBackground;
   return hoverBackground || 'rgba(0, 0, 0, 0.1)';
 }, function (_ref2) {
   var $hoverColor = _ref2.$hoverColor;
   return $hoverColor && "svg path {\n          fill: ".concat($hoverColor, ";\n           }");
 });
-dt.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteral$1(["\n  display: flex;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-column-gap: 25px;\n  width: 100%;\n  box-sizing: border-box;\n  padding-right: 20px;\n  .wrapper {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n  }\n"])));
-dt.div(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteral$1(["\n  margin-top: 30px;\n\n  ", "\n"])), function (_ref3) {
+dt.div(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteral$1(["\n  display: flex;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-column-gap: 25px;\n  width: 100%;\n  box-sizing: border-box;\n  padding-right: 20px;\n  .wrapper {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n  }\n"])));
+dt.div(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteral$1(["\n  margin-top: 30px;\n\n  ", "\n"])), function (_ref3) {
   var $isGrid = _ref3.$isGrid;
   return !$isGrid ? "\n      .card {\n          grid-template-columns:none\n      }\n    " : "\n      .card {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n\n\n        @media (max-width: 1450px) {\n          grid-template-columns: repeat(3, 1fr);\n        }\n      }\n    ";
 });
-var CardActionBar = dt.div(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteral$1(["\n  width: 100%;\n  position: absolute;\n  z-index: 99;\n  box-sizing: border-box;\n  padding: 6px;\n  ", "\n  .action_block {\n    width: 35px;\n    height: 35px;\n    border-radius: 50%;\n    background: rgba(255, 255, 255, 0);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n"])), function (_ref4) {
+var CardActionBar = dt.div(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteral$1(["\n  width: 100%;\n  position: absolute;\n  z-index: 99;\n  box-sizing: border-box;\n  padding: 6px;\n  ", "\n  .action_block {\n    width: 35px;\n    height: 35px;\n    border-radius: 50%;\n    background: rgba(255, 255, 255, 0);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n"])), function (_ref4) {
   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$2 || (_templateObject10$2 = _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$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 $canOpen = _ref5.$canOpen;
   return $canOpen ? 'pointer' : 'default';
 });
-var StyledChecked = dt.div(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 2;\n  background-color: rgb(0 0 0 / 23%);\n"])));
-dt.div(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteral$1(["\n  position: relative;\n  cursor: pointer;\n  .icon_button {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n"])));
-var CourseStatusContainer = dt.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteral$1(["\n  color: #fff;\n  height: 32px;\n  padding: 4px 12px;\n  text-transform: capitalize;\n  border-radius: 4px;\n  background: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref6) {
+var StyledChecked = dt.div(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 2;\n  background-color: rgb(0 0 0 / 23%);\n"])));
+dt.div(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteral$1(["\n  position: relative;\n  cursor: pointer;\n  .icon_button {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n"])));
+var CourseStatusContainer = dt.div(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteral$1(["\n  color: #fff;\n  height: 32px;\n  padding: 4px 12px;\n  text-transform: capitalize;\n  border-radius: 4px;\n  background: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref6) {
   var $status = _ref6.$status;
   return !$status ? '#EA382A' : '#00905E';
 });
-dt.div(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  div {\n    font-size: 13px;\n  }\n"])));
+dt.div(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  div {\n    font-size: 13px;\n  }\n"])));
 var TooltipContent = dt.div(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteral$1(["\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(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteral$1(["\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(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteral$1(["\n  display: flex;\n  flex-direction: row !important;\n  width: 100%;\n"])));
+var StyledActionsContainer = dt.div(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteral$1(["\n  display: flex;\n  flex-direction: row !important;\n  width: 100%;\n"])));
 var StyledActionItem = dt.span(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  height: 14px;\n  cursor: ", ";\n  color: ", ";\n  font-size: 14px;\n  padding-bottom: 10px;\n  width: 100%;\n  justify-content: center;\n  gap: 8px;\n  padding: 12px 4px;\n  svg path {\n    fill: ", ";\n    width: 16px;\n    height: 16px;\n  }\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n  &:hover {\n    color: ", ";\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_ref7) {
   var disabled = _ref7.disabled;
   return disabled ? 'default' : 'pointer';
@@ -30118,11 +30118,11 @@ var TooltipHeight$1 = function TooltipHeight(_ref) {
   });
 };
 
-var _excluded$30 = ["className", "onClick"];
+var _excluded$31 = ["className", "onClick"];
 var Edit = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$30);
+    props = _objectWithoutProperties$1(_ref, _excluded$31);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -30144,11 +30144,11 @@ var Edit = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Edit.displayName = 'Edit';
 
-var _excluded$2$ = ["className", "onClick"];
+var _excluded$30 = ["className", "onClick"];
 var PlayButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2$);
+    props = _objectWithoutProperties$1(_ref, _excluded$30);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     version: '1.1',
@@ -30185,11 +30185,11 @@ var PlayButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 PlayButton.displayName = 'PlayButton';
 
-var _excluded$2_ = ["className", "onClick"];
+var _excluded$2$ = ["className", "onClick"];
 var Unlock = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2_);
+    props = _objectWithoutProperties$1(_ref, _excluded$2$);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -30431,11 +30431,11 @@ const useTranslation$1 = (ns, props = {}) => {
   });
 };
 
-var _templateObject$o, _templateObject2$i, _templateObject3$e, _templateObject4$b;
-var Container$4 = dt.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral$1([""])));
-var ActionsContent = dt.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteral$1(["\n  padding: 5px;\n"])));
-var StyledIconButton = dt.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteral$1(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: background-color 0.3s;\n  &:hover {\n    background-color: transparent !important;\n  }\n"])));
-dt.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 6px;\n  transition: 0.3s ease;\n  gap: 6px;\n  border-radius: 5px;\n  &:hover {\n    /* background: ", "; */\n    ", "\n  }\n  svg {\n    font-size: 1rem;\n  }\n\n  &.disabled {\n    opacity: 0.5;\n    pointer-events: none;\n  }\n"])), function (_ref) {
+var _templateObject$p, _templateObject2$j, _templateObject3$f, _templateObject4$c;
+var Container$4 = dt.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral$1([""])));
+var ActionsContent = dt.div(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteral$1(["\n  padding: 5px;\n"])));
+var StyledIconButton = dt.div(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteral$1(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: background-color 0.3s;\n  &:hover {\n    background-color: transparent !important;\n  }\n"])));
+dt.div(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 6px;\n  transition: 0.3s ease;\n  gap: 6px;\n  border-radius: 5px;\n  &:hover {\n    /* background: ", "; */\n    ", "\n  }\n  svg {\n    font-size: 1rem;\n  }\n\n  &.disabled {\n    opacity: 0.5;\n    pointer-events: none;\n  }\n"])), function (_ref) {
   var hoverBackground = _ref.hoverBackground;
   return hoverBackground || "rgba(0, 0, 0, 0.1)";
 }, function (_ref2) {
@@ -30443,11 +30443,11 @@ dt.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteral$1(["\n
   return $hoverColor && "svg path {\n          fill: ".concat($hoverColor, ";\n           }");
 });
 
-var _excluded$2Z = ["className", "onClick"];
+var _excluded$2_ = ["className", "onClick"];
 var MoreVertRoundedIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2Z);
+    props = _objectWithoutProperties$1(_ref, _excluded$2_);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -30757,11 +30757,11 @@ var CourseCard = function CourseCard(_ref) {
   }, item.id);
 };
 
-var _excluded$2Y = ["className", "onClick"];
+var _excluded$2Z = ["className", "onClick"];
 var SearchRounded = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2Y);
+    props = _objectWithoutProperties$1(_ref, _excluded$2Z);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -30780,25 +30780,25 @@ var SearchRounded = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 SearchRounded.displayName = 'SearchRounded';
 
-var _templateObject$n, _templateObject2$h, _templateObject3$d, _templateObject4$a, _templateObject5$7, _templateObject6$6, _templateObject7$4, _templateObject8$3, _templateObject9$2;
-var Field = dt.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral$1(["\n  position: relative;\n  font-family: sans-serif;\n  background-color: white;\n\n  &.full {\n    width: 100%;\n  }\n\n  p:not(:first-child) {\n    position: absolute;\n    left: -10px;\n    bottom: -24px;\n  }\n\n  .MuiFormLabel-root,\n  .MuiFormLabel-root,\n  fieldset,\n  input {\n    ", ";\n  }\n\n  .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline {\n    border-color: #d32f2f !important;\n  }\n\n  button {\n    position: absolute;\n    ", ";\n    top: 50%;\n    transform: translateY(-50%);\n    padding: 5px;\n  }\n"])), function (_ref) {
+var _templateObject$o, _templateObject2$i, _templateObject3$e, _templateObject4$b, _templateObject5$8, _templateObject6$7, _templateObject7$5, _templateObject8$5, _templateObject9$4;
+var Field = dt.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral$1(["\n  position: relative;\n  font-family: sans-serif;\n  background-color: white;\n\n  &.full {\n    width: 100%;\n  }\n\n  p:not(:first-child) {\n    position: absolute;\n    left: -10px;\n    bottom: -24px;\n  }\n\n  .MuiFormLabel-root,\n  .MuiFormLabel-root,\n  fieldset,\n  input {\n    ", ";\n  }\n\n  .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline {\n    border-color: #d32f2f !important;\n  }\n\n  button {\n    position: absolute;\n    ", ";\n    top: 50%;\n    transform: translateY(-50%);\n    padding: 5px;\n  }\n"])), function (_ref) {
   var $iconInStart = _ref.$iconInStart;
   return $iconInStart ? 'padding-left: 40px;' : 'padding-right: 40px;';
 }, function (_ref2) {
   var $iconInStart = _ref2.$iconInStart;
   return $iconInStart ? 'left: 5px;' : 'right: 5px;';
 });
-var ValidationIcon = dt.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteral$1(["\n  position: absolute;\n  bottom: -10px;\n  transform: translateY(-50%);\n  right: 6px;\n  width: unset !important;\n\n  &.error svg {\n    color: red;\n  }\n\n  &.valid svg {\n    color: green;\n  }\n"])));
-var StyledComponentContainer = dt.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteral$1(["\n  position: absolute;\n  top: 0px;\n  right: 4px;\n  z-index: 2;\n  .btn--small {\n    overflow: initial !important;\n  }\n"])));
-var CharactersContainer = dt.div(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteral$1(["\n  width: max-content;\n  font-size: 12px;\n  color: #68707a;\n  margin-top: 5px;\n  margin-left: 5px;\n  position: absolute;\n  bottom: -20px;\n  right: 6px;\n"])));
-dt.input(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteral$1(["\n  width: 100%;\n  border-radius: 6px;\n  border: 1px solid #e6e6e6;\n  min-height: 40px;\n  outline: none;\n  padding: 10px;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  font-family: sans-serif;\n  box-shadow: 0 1px 9px 5px rgb(0 0 0 / 3%);\n  transition:\n    border 0.3s ease-in,\n    box-shadow 0.3s ease-in;\n\n  &:focus {\n    border: 1px solid #06c68f;\n    box-shadow: 0 1px 9px 5px rgb(0 0 0 / 3%);\n  }\n"])));
-dt.textarea(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteral$1(["\n  width: 100%;\n  border-radius: 6px;\n  border: 1px solid #e6e6e6;\n  min-height: 40px;\n  resize: none;\n  outline: none;\n  padding: 10px;\n  font-family: sans-serif;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  box-shadow: 0 1px 9px 5px rgb(0 0 0 / 3%);\n  transition:\n    border 0.3s ease-in,\n    box-shadow 0.3s ease-in;\n\n  &:focus {\n    border: 1px solid #06c68f;\n    box-shadow: 0 1px 9px 5px rgb(0 0 0 / 3%);\n  }\n"])));
-var StyledLabel$1 = dt.p(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteral$1(["\n  font-size: 16px;\n  font-weight: 550;\n  padding-top: 0px;\n  margin-bottom: 5px;\n\n  ", "\n"])), function (_ref3) {
+var ValidationIcon = dt.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteral$1(["\n  position: absolute;\n  bottom: -10px;\n  transform: translateY(-50%);\n  right: 6px;\n  width: unset !important;\n\n  &.error svg {\n    color: red;\n  }\n\n  &.valid svg {\n    color: green;\n  }\n"])));
+var StyledComponentContainer = dt.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteral$1(["\n  position: absolute;\n  top: 0px;\n  right: 4px;\n  z-index: 2;\n  .btn--small {\n    overflow: initial !important;\n  }\n"])));
+var CharactersContainer = dt.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteral$1(["\n  width: max-content;\n  font-size: 12px;\n  color: #68707a;\n  margin-top: 5px;\n  margin-left: 5px;\n  position: absolute;\n  bottom: -20px;\n  right: 6px;\n"])));
+dt.input(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteral$1(["\n  width: 100%;\n  border-radius: 6px;\n  border: 1px solid #e6e6e6;\n  min-height: 40px;\n  outline: none;\n  padding: 10px;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  font-family: sans-serif;\n  box-shadow: 0 1px 9px 5px rgb(0 0 0 / 3%);\n  transition:\n    border 0.3s ease-in,\n    box-shadow 0.3s ease-in;\n\n  &:focus {\n    border: 1px solid #06c68f;\n    box-shadow: 0 1px 9px 5px rgb(0 0 0 / 3%);\n  }\n"])));
+dt.textarea(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteral$1(["\n  width: 100%;\n  border-radius: 6px;\n  border: 1px solid #e6e6e6;\n  min-height: 40px;\n  resize: none;\n  outline: none;\n  padding: 10px;\n  font-family: sans-serif;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  box-shadow: 0 1px 9px 5px rgb(0 0 0 / 3%);\n  transition:\n    border 0.3s ease-in,\n    box-shadow 0.3s ease-in;\n\n  &:focus {\n    border: 1px solid #06c68f;\n    box-shadow: 0 1px 9px 5px rgb(0 0 0 / 3%);\n  }\n"])));
+var StyledLabel$1 = dt.p(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteral$1(["\n  font-size: 16px;\n  font-weight: 550;\n  padding-top: 0px;\n  margin-bottom: 5px;\n\n  ", "\n"])), function (_ref3) {
   var $required = _ref3.$required;
   return $required ? "\n    &::after {\n      content: '*';\n      color: red;\n      margin-left: 3px;\n    }\n  " : '';
 });
-dt.div(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  color: #f44336;\n  bottom: -20px;\n  left: 6px;\n  font-size: 0.75rem;\n"])));
-var Title$1 = dt.h2(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteral$1(["\n  font-size: 16px;\n  font-weight: 550;\n  margin-bottom: 5px;\n\n  ", "\n"])), function (_ref4) {
+dt.div(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  color: #f44336;\n  bottom: -20px;\n  left: 6px;\n  font-size: 0.75rem;\n"])));
+var Title$1 = dt.h2(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteral$1(["\n  font-size: 16px;\n  font-weight: 550;\n  margin-bottom: 5px;\n\n  ", "\n"])), function (_ref4) {
   var $required = _ref4.$required;
   return $required ? "\n    &::after {\n      content: '*';\n      color: red;\n      margin-left: 3px;\n    }\n  " : '';
 });
@@ -31071,10 +31071,10 @@ var ThemeProvider = function ThemeProvider(_ref) {
   });
 };
 
-var _templateObject$m, _templateObject2$g, _templateObject3$c, _templateObject4$9;
-var StyledLabel = dt.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral$1(["\n  font-size: 16px;\n  font-weight: 550;\n"])));
-var ToolTipContainer = dt.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n"])));
-var TooltipTitle = dt.span(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteral$1(["\n  font-size: 14px;\n"])));
+var _templateObject$n, _templateObject2$h, _templateObject3$d, _templateObject4$a;
+var StyledLabel = dt.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral$1(["\n  font-size: 16px;\n  font-weight: 550;\n"])));
+var ToolTipContainer = dt.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n"])));
+var TooltipTitle = dt.span(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteral$1(["\n  font-size: 14px;\n"])));
 var HelpIconStyles = {
   color: '#06C68F'
 };
@@ -31085,13 +31085,13 @@ var FormControlLabelStyles = {
   justifyContent: 'space-between',
   marginLeft: 0
 };
-var FormControlWrapper = dt(ToolTipContainer)(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteral$1(["\n  color: #06c68f;\n\n  .CustomSwitcher-switchBase {\n    &.checked {\n      color: #06c68f;\n    }\n    &.checked + .track {\n      background-color: #06c68f;\n    }\n  }\n"])));
+var FormControlWrapper = dt(ToolTipContainer)(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteral$1(["\n  color: #06c68f;\n\n  .CustomSwitcher-switchBase {\n    &.checked {\n      color: #06c68f;\n    }\n    &.checked + .track {\n      background-color: #06c68f;\n    }\n  }\n"])));
 
-var _excluded$2X = ["className", "onClick"];
+var _excluded$2Y = ["className", "onClick"];
 var ActivityIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2X);
+    props = _objectWithoutProperties$1(_ref, _excluded$2Y);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -31110,11 +31110,11 @@ var ActivityIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 ActivityIcon.displayName = 'ActivityIcon';
 
-var _excluded$2W = ["className", "onClick"];
+var _excluded$2X = ["className", "onClick"];
 var VideoCheckmarkIcon = function VideoCheckmarkIcon(_ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2W);
+    props = _objectWithoutProperties$1(_ref, _excluded$2X);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     width: '24',
     height: '24',
@@ -31131,12 +31131,12 @@ var VideoCheckmarkIcon = function VideoCheckmarkIcon(_ref) {
   }));
 };
 
-var _excluded$2V = ["className", "onClick", "active"];
+var _excluded$2W = ["className", "onClick", "active"];
 var HeartIcon = function HeartIcon(_ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     active = _ref.active,
-    props = _objectWithoutProperties$1(_ref, _excluded$2V);
+    props = _objectWithoutProperties$1(_ref, _excluded$2W);
   return active ? require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     width: '24',
     height: '24',
@@ -31166,11 +31166,11 @@ var HeartIcon = function HeartIcon(_ref) {
   }));
 };
 
-var _excluded$2U = ["className", "onClick"];
+var _excluded$2V = ["className", "onClick"];
 var MinimizeIcon = function MinimizeIcon(_ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2U);
+    props = _objectWithoutProperties$1(_ref, _excluded$2V);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     width: '24',
     height: '24',
@@ -31190,11 +31190,11 @@ var MinimizeIcon = function MinimizeIcon(_ref) {
   }));
 };
 
-var _excluded$2T = ["className", "onClick"];
+var _excluded$2U = ["className", "onClick"];
 var MaximizeIcon = function MaximizeIcon(_ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2T);
+    props = _objectWithoutProperties$1(_ref, _excluded$2U);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     width: '24',
     height: '24',
@@ -31214,11 +31214,11 @@ var MaximizeIcon = function MaximizeIcon(_ref) {
   }));
 };
 
-var _excluded$2S = ["className", "onClick"];
+var _excluded$2T = ["className", "onClick"];
 var PauseIcon = function PauseIcon(_ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2S);
+    props = _objectWithoutProperties$1(_ref, _excluded$2T);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     width: '24',
     height: '24',
@@ -31238,12 +31238,12 @@ var PauseIcon = function PauseIcon(_ref) {
   }));
 };
 
-var _excluded$2R = ["className", "onClick", "dark"];
+var _excluded$2S = ["className", "onClick", "dark"];
 var VolumeMuteIcon = function VolumeMuteIcon(_ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     dark = _ref.dark,
-    props = _objectWithoutProperties$1(_ref, _excluded$2R);
+    props = _objectWithoutProperties$1(_ref, _excluded$2S);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     width: '24',
     height: '24',
@@ -31263,11 +31263,11 @@ var VolumeMuteIcon = function VolumeMuteIcon(_ref) {
   }));
 };
 
-var _excluded$2Q = ["className", "onClick"];
+var _excluded$2R = ["className", "onClick"];
 var PlayIcon = function PlayIcon(_ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2Q);
+    props = _objectWithoutProperties$1(_ref, _excluded$2R);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     width: '24',
     height: '24',
@@ -31284,12 +31284,12 @@ var PlayIcon = function PlayIcon(_ref) {
   }));
 };
 
-var _excluded$2P = ["className", "onClick", "forward"];
+var _excluded$2Q = ["className", "onClick", "forward"];
 var RewindIcon = function RewindIcon(_ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     forward = _ref.forward,
-    props = _objectWithoutProperties$1(_ref, _excluded$2P);
+    props = _objectWithoutProperties$1(_ref, _excluded$2Q);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     width: '24',
     height: '24',
@@ -31325,12 +31325,12 @@ var RewindIcon = function RewindIcon(_ref) {
   }));
 };
 
-var _excluded$2O = ["className", "onClick", "forward"];
+var _excluded$2P = ["className", "onClick", "forward"];
 var SkipIcon = function SkipIcon(_ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     forward = _ref.forward,
-    props = _objectWithoutProperties$1(_ref, _excluded$2O);
+    props = _objectWithoutProperties$1(_ref, _excluded$2P);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     width: '24',
     height: '24',
@@ -31360,12 +31360,12 @@ var SkipIcon = function SkipIcon(_ref) {
   }));
 };
 
-var _excluded$2N = ["className", "onClick", "active"];
+var _excluded$2O = ["className", "onClick", "active"];
 var SubtitlesIcon = function SubtitlesIcon(_ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     active = _ref.active,
-    props = _objectWithoutProperties$1(_ref, _excluded$2N);
+    props = _objectWithoutProperties$1(_ref, _excluded$2O);
   return active ? require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     width: '24',
     height: '24',
@@ -31401,11 +31401,11 @@ var SubtitlesIcon = function SubtitlesIcon(_ref) {
   }));
 };
 
-var _excluded$2M = ["className", "onClick"];
+var _excluded$2N = ["className", "onClick"];
 var MeterIcon = function MeterIcon(_ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2M);
+    props = _objectWithoutProperties$1(_ref, _excluded$2N);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     width: '24',
     height: '24',
@@ -31428,13 +31428,13 @@ var MeterIcon = function MeterIcon(_ref) {
   }));
 };
 
-var _excluded$2L = ["className", "onClick", "fill"];
+var _excluded$2M = ["className", "onClick", "fill"];
 var ArrowDropDownIcon$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$fill = _ref.fill,
     fill = _ref$fill === void 0 ? '#fff' : _ref$fill,
-    props = _objectWithoutProperties$1(_ref, _excluded$2L);
+    props = _objectWithoutProperties$1(_ref, _excluded$2M);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -31453,11 +31453,11 @@ var ArrowDropDownIcon$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 ArrowDropDownIcon$1.displayName = 'ArrowDropDownIcon';
 
-var _excluded$2K = ["className", "onClick"];
+var _excluded$2L = ["className", "onClick"];
 var Analytics = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2K);
+    props = _objectWithoutProperties$1(_ref, _excluded$2L);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -31479,11 +31479,11 @@ var Analytics = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Analytics.displayName = 'Analytics';
 
-var _excluded$2J = ["className", "onClick"];
+var _excluded$2K = ["className", "onClick"];
 var AddAlt = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2J);
+    props = _objectWithoutProperties$1(_ref, _excluded$2K);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -31505,11 +31505,11 @@ var AddAlt = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 AddAlt.displayName = 'AddAlt';
 
-var _excluded$2I = ["className", "onClick"];
+var _excluded$2J = ["className", "onClick"];
 var Company = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2I);
+    props = _objectWithoutProperties$1(_ref, _excluded$2J);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -31546,11 +31546,11 @@ var Company = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Company.displayName = 'Company';
 
-var _excluded$2H = ["className", "onClick"];
+var _excluded$2I = ["className", "onClick"];
 var AddStudent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2H);
+    props = _objectWithoutProperties$1(_ref, _excluded$2I);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -31572,11 +31572,11 @@ var AddStudent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 AddStudent.displayName = 'AddStudent';
 
-var _excluded$2G = ["className", "onClick"];
+var _excluded$2H = ["className", "onClick"];
 var Learning = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2G);
+    props = _objectWithoutProperties$1(_ref, _excluded$2H);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -31604,11 +31604,11 @@ var Learning = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Learning.displayName = 'Learning';
 
-var _excluded$2F = ["className", "onClick"];
+var _excluded$2G = ["className", "onClick"];
 var UsersIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2F);
+    props = _objectWithoutProperties$1(_ref, _excluded$2G);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -31636,11 +31636,11 @@ var UsersIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 UsersIcon.displayName = 'UsersIcon';
 
-var _excluded$2E = ["className", "onClick"];
+var _excluded$2F = ["className", "onClick"];
 var Circle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2E);
+    props = _objectWithoutProperties$1(_ref, _excluded$2F);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -31659,11 +31659,11 @@ var Circle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Circle.displayName = 'Circle';
 
-var _excluded$2D = ["className", "onClick"];
+var _excluded$2E = ["className", "onClick"];
 var Library = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2D);
+    props = _objectWithoutProperties$1(_ref, _excluded$2E);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -31691,13 +31691,13 @@ var Library = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Library.displayName = 'Library';
 
-var _excluded$2C = ["className", "onClick", "fill"];
+var _excluded$2D = ["className", "onClick", "fill"];
 var AddIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$fill = _ref.fill,
     fill = _ref$fill === void 0 ? 'white' : _ref$fill,
-    props = _objectWithoutProperties$1(_ref, _excluded$2C);
+    props = _objectWithoutProperties$1(_ref, _excluded$2D);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '25',
@@ -31716,11 +31716,11 @@ var AddIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 AddIcon.displayName = 'AddIcon';
 
-var _excluded$2B = ["className", "onClick"];
+var _excluded$2C = ["className", "onClick"];
 var AnalyticsIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2B);
+    props = _objectWithoutProperties$1(_ref, _excluded$2C);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '16',
@@ -31742,11 +31742,11 @@ var AnalyticsIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 AnalyticsIcon.displayName = 'AnalyticsIcon';
 
-var _excluded$2A = ["className", "onClick"];
+var _excluded$2B = ["className", "onClick"];
 var AssignTutor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2A);
+    props = _objectWithoutProperties$1(_ref, _excluded$2B);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -31774,11 +31774,11 @@ var AssignTutor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 AssignTutor.displayName = 'AssignTutor';
 
-var _excluded$2z = ["className", "onClick"];
+var _excluded$2A = ["className", "onClick"];
 var Book = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2z);
+    props = _objectWithoutProperties$1(_ref, _excluded$2A);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '94',
@@ -31805,11 +31805,11 @@ var Book = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Book.displayName = 'Book';
 
-var _excluded$2y = ["className", "onClick"];
+var _excluded$2z = ["className", "onClick"];
 var BookWithBookmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2y);
+    props = _objectWithoutProperties$1(_ref, _excluded$2z);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '16',
@@ -31828,11 +31828,11 @@ var BookWithBookmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 BookWithBookmark.displayName = 'BookWithBookmark';
 
-var _excluded$2x = ["className", "onClick"];
+var _excluded$2y = ["className", "onClick"];
 var BusinessIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2x);
+    props = _objectWithoutProperties$1(_ref, _excluded$2y);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -31851,11 +31851,11 @@ var BusinessIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 BusinessIcon.displayName = 'BusinessIcon';
 
-var _excluded$2w = ["className", "onClick"];
+var _excluded$2x = ["className", "onClick"];
 var CaretDown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2w);
+    props = _objectWithoutProperties$1(_ref, _excluded$2x);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -31878,11 +31878,11 @@ var CaretDown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 CaretDown.displayName = 'CaretDown';
 
-var _excluded$2v = ["className", "onClick"];
+var _excluded$2w = ["className", "onClick"];
 var CheckedIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2v);
+    props = _objectWithoutProperties$1(_ref, _excluded$2w);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '32',
@@ -31909,11 +31909,11 @@ var CheckedIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 CheckedIcon.displayName = 'Checked';
 
-var _excluded$2u = ["className", "onClick"];
+var _excluded$2v = ["className", "onClick"];
 var Checkmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2u);
+    props = _objectWithoutProperties$1(_ref, _excluded$2v);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -31936,11 +31936,11 @@ var Checkmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Checkmark.displayName = 'Checkmark';
 
-var _excluded$2t = ["className", "onClick"];
+var _excluded$2u = ["className", "onClick"];
 var CheckmarkOutline = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2t);
+    props = _objectWithoutProperties$1(_ref, _excluded$2u);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -31968,11 +31968,11 @@ var CheckmarkOutline = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 CheckmarkOutline.displayName = 'CheckmarkOutline';
 
-var _excluded$2s = ["className", "onClick"];
+var _excluded$2t = ["className", "onClick"];
 var CheckmarkOutlineAction = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2s);
+    props = _objectWithoutProperties$1(_ref, _excluded$2t);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '40',
@@ -31994,11 +31994,11 @@ var CheckmarkOutlineAction = /*#__PURE__*/React.forwardRef(function (_ref, ref)
 });
 CheckmarkOutlineAction.displayName = 'CheckmarkOutlineAction';
 
-var _excluded$2r = ["className", "onClick"];
+var _excluded$2s = ["className", "onClick"];
 var Close = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2r);
+    props = _objectWithoutProperties$1(_ref, _excluded$2s);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -32021,13 +32021,13 @@ var Close = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Close.displayName = 'Close';
 
-var _excluded$2q = ["className", "onClick", "fill"];
+var _excluded$2r = ["className", "onClick", "fill"];
 var CloseIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$fill = _ref.fill,
     fill = _ref$fill === void 0 ? '#68707A' : _ref$fill,
-    props = _objectWithoutProperties$1(_ref, _excluded$2q);
+    props = _objectWithoutProperties$1(_ref, _excluded$2r);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -32046,11 +32046,11 @@ var CloseIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 CloseIcon.displayName = 'CloseIcon';
 
-var _excluded$2p = ["className", "onClick"];
+var _excluded$2q = ["className", "onClick"];
 var CloseOutline = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2p);
+    props = _objectWithoutProperties$1(_ref, _excluded$2q);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -32078,11 +32078,11 @@ var CloseOutline = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 CloseOutline.displayName = 'CloseOutline';
 
-var _excluded$2o = ["className", "onClick"];
+var _excluded$2p = ["className", "onClick"];
 var CloseOutlineAction = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2o);
+    props = _objectWithoutProperties$1(_ref, _excluded$2p);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     version: '1.1',
@@ -32122,11 +32122,11 @@ var CloseOutlineAction = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 CloseOutlineAction.displayName = 'CloseOutlineAction';
 
-var _excluded$2n = ["className", "onClick"];
+var _excluded$2o = ["className", "onClick"];
 var Coach = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2n);
+    props = _objectWithoutProperties$1(_ref, _excluded$2o);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -32151,11 +32151,11 @@ var Coach = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Coach.displayName = 'Coach';
 
-var _excluded$2m = ["className", "onClick"];
+var _excluded$2n = ["className", "onClick"];
 var DarkAddAlt = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2m);
+    props = _objectWithoutProperties$1(_ref, _excluded$2n);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -32177,11 +32177,11 @@ var DarkAddAlt = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 DarkAddAlt.displayName = 'DarkAddAlt';
 
-var _excluded$2l = ["className", "onClick"];
+var _excluded$2m = ["className", "onClick"];
 var DarkAiAssistent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2l);
+    props = _objectWithoutProperties$1(_ref, _excluded$2m);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -32209,11 +32209,11 @@ var DarkAiAssistent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 DarkAiAssistent.displayName = 'DarkAiAssistent';
 
-var _excluded$2k = ["className", "onClick"];
+var _excluded$2l = ["className", "onClick"];
 var DarkCloseOutline = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2k);
+    props = _objectWithoutProperties$1(_ref, _excluded$2l);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '16',
@@ -32241,11 +32241,11 @@ var DarkCloseOutline = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 DarkCloseOutline.displayName = 'DarkCloseOutline';
 
-var _excluded$2j = ["className", "onClick"];
+var _excluded$2k = ["className", "onClick"];
 var DarkTrashCan = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2j);
+    props = _objectWithoutProperties$1(_ref, _excluded$2k);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '16',
@@ -32279,11 +32279,11 @@ var DarkTrashCan = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 DarkTrashCan.displayName = 'DarkTrashCan';
 
-var _excluded$2i = ["className", "onClick"];
+var _excluded$2j = ["className", "onClick"];
 var DefaultAvatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2i);
+    props = _objectWithoutProperties$1(_ref, _excluded$2j);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     id: 'Profile_Picture',
@@ -32369,11 +32369,11 @@ var DefaultAvatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 DefaultAvatar.displayName = 'DefaultAvatar';
 
-var _excluded$2h = ["className", "onClick"];
+var _excluded$2i = ["className", "onClick"];
 var Delete = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2h);
+    props = _objectWithoutProperties$1(_ref, _excluded$2i);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -32401,11 +32401,11 @@ var Delete = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Delete.displayName = 'Delete';
 
-var _excluded$2g = ["className", "onClick"];
+var _excluded$2h = ["className", "onClick"];
 var DocumentAttachment = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2g);
+    props = _objectWithoutProperties$1(_ref, _excluded$2h);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '16',
@@ -32442,13 +32442,13 @@ var DocumentAttachment = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 DocumentAttachment.displayName = 'DocumentAttachment';
 
-var _excluded$2f = ["className", "onClick", "fill"];
+var _excluded$2g = ["className", "onClick", "fill"];
 var DownloadIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$fill = _ref.fill,
     fill = _ref$fill === void 0 ? '#FFFFFF' : _ref$fill,
-    props = _objectWithoutProperties$1(_ref, _excluded$2f);
+    props = _objectWithoutProperties$1(_ref, _excluded$2g);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -32470,11 +32470,11 @@ var DownloadIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 DownloadIcon.displayName = 'DownloadIcon';
 
-var _excluded$2e = ["className", "onClick"];
+var _excluded$2f = ["className", "onClick"];
 var Download = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2e);
+    props = _objectWithoutProperties$1(_ref, _excluded$2f);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -32502,11 +32502,11 @@ var Download = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Download.displayName = 'Download';
 
-var _excluded$2d = ["className", "onClick"];
+var _excluded$2e = ["className", "onClick"];
 var EditRounded = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2d);
+    props = _objectWithoutProperties$1(_ref, _excluded$2e);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '40',
@@ -32528,11 +32528,11 @@ var EditRounded = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 EditRounded.displayName = 'EditRounded';
 
-var _excluded$2c = ["className", "onClick"];
+var _excluded$2d = ["className", "onClick"];
 var EditUsers = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2c);
+    props = _objectWithoutProperties$1(_ref, _excluded$2d);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '16',
@@ -32554,11 +32554,11 @@ var EditUsers = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 EditUsers.displayName = 'EditUsers';
 
-var _excluded$2b = ["className", "onClick"];
+var _excluded$2c = ["className", "onClick"];
 var Education = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2b);
+    props = _objectWithoutProperties$1(_ref, _excluded$2c);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -32583,11 +32583,11 @@ var Education = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Education.displayName = 'Education';
 
-var _excluded$2a = ["className", "onClick"];
+var _excluded$2b = ["className", "onClick"];
 var EducationDefault = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$2a);
+    props = _objectWithoutProperties$1(_ref, _excluded$2b);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '16',
@@ -32612,11 +32612,11 @@ var EducationDefault = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 EducationDefault.displayName = 'EducationDefault';
 
-var _excluded$29 = ["className", "onClick"];
+var _excluded$2a = ["className", "onClick"];
 var EmailIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$29);
+    props = _objectWithoutProperties$1(_ref, _excluded$2a);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -32635,11 +32635,11 @@ var EmailIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 EmailIcon.displayName = 'EmailIcon';
 
-var _excluded$28 = ["className", "onClick"];
+var _excluded$29 = ["className", "onClick"];
 var EventIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$28);
+    props = _objectWithoutProperties$1(_ref, _excluded$29);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -32658,11 +32658,11 @@ var EventIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 EventIcon.displayName = 'EventIcon';
 
-var _excluded$27 = ["className", "onClick"];
+var _excluded$28 = ["className", "onClick"];
 var LocationCityIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$27);
+    props = _objectWithoutProperties$1(_ref, _excluded$28);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -32681,11 +32681,11 @@ var LocationCityIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 LocationCityIcon.displayName = 'LocationCityIcon';
 
-var _excluded$26 = ["className", "onClick"];
+var _excluded$27 = ["className", "onClick"];
 var LocationOnIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$26);
+    props = _objectWithoutProperties$1(_ref, _excluded$27);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -32704,11 +32704,11 @@ var LocationOnIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 LocationOnIcon.displayName = 'LocationOnIcon';
 
-var _excluded$25 = ["className", "onClick"];
+var _excluded$26 = ["className", "onClick"];
 var MarkunreadMailboxIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$25);
+    props = _objectWithoutProperties$1(_ref, _excluded$26);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -32727,13 +32727,13 @@ var MarkunreadMailboxIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 MarkunreadMailboxIcon.displayName = 'MarkunreadMailboxIcon';
 
-var _excluded$24 = ["className", "onClick", "fill"];
+var _excluded$25 = ["className", "onClick", "fill"];
 var ArrowDropUpIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$fill = _ref.fill,
     fill = _ref$fill === void 0 ? '#fff' : _ref$fill,
-    props = _objectWithoutProperties$1(_ref, _excluded$24);
+    props = _objectWithoutProperties$1(_ref, _excluded$25);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -32752,13 +32752,13 @@ var ArrowDropUpIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 ArrowDropUpIcon.displayName = 'ArrowDropUpIcon';
 
-var _excluded$23 = ["className", "onClick", "fill"];
+var _excluded$24 = ["className", "onClick", "fill"];
 var CircleNotificationsIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$fill = _ref.fill,
     fill = _ref$fill === void 0 ? '#68707A' : _ref$fill,
-    props = _objectWithoutProperties$1(_ref, _excluded$23);
+    props = _objectWithoutProperties$1(_ref, _excluded$24);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -32777,13 +32777,13 @@ var CircleNotificationsIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref)
 });
 CircleNotificationsIcon.displayName = 'CircleNotificationsIcon';
 
-var _excluded$22 = ["className", "onClick", "fill"];
+var _excluded$23 = ["className", "onClick", "fill"];
 var KeyboardBackspaceIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$fill = _ref.fill,
     fill = _ref$fill === void 0 ? 'inherit' : _ref$fill,
-    props = _objectWithoutProperties$1(_ref, _excluded$22);
+    props = _objectWithoutProperties$1(_ref, _excluded$23);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -32802,11 +32802,11 @@ var KeyboardBackspaceIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 KeyboardBackspaceIcon.displayName = 'KeyboardBackspaceIcon';
 
-var _excluded$21 = ["className", "onClick"];
+var _excluded$22 = ["className", "onClick"];
 var FilterIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$21);
+    props = _objectWithoutProperties$1(_ref, _excluded$22);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -32825,11 +32825,11 @@ var FilterIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 FilterIcon.displayName = 'FilterIcon';
 
-var _excluded$20 = ["className", "onClick"];
+var _excluded$21 = ["className", "onClick"];
 var GrayDownload = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$20);
+    props = _objectWithoutProperties$1(_ref, _excluded$21);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     version: '1.1',
@@ -32868,11 +32868,11 @@ var GrayDownload = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 GrayDownload.displayName = 'GrayDownload';
 
-var _excluded$1$ = ["className", "onClick"];
+var _excluded$20 = ["className", "onClick"];
 var Person = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1$);
+    props = _objectWithoutProperties$1(_ref, _excluded$20);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -32891,13 +32891,13 @@ var Person = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Person.displayName = 'Person';
 
-var _excluded$1_ = ["className", "onClick", "fill"];
+var _excluded$1$ = ["className", "onClick", "fill"];
 var HelpIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$fill = _ref.fill,
     fill = _ref$fill === void 0 ? '#06C68F' : _ref$fill,
-    props = _objectWithoutProperties$1(_ref, _excluded$1_);
+    props = _objectWithoutProperties$1(_ref, _excluded$1$);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -32916,11 +32916,11 @@ var HelpIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 HelpIcon.displayName = 'HelpIcon';
 
-var _excluded$1Z = ["className", "onClick"];
+var _excluded$1_ = ["className", "onClick"];
 var PhoneIphoneIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1Z);
+    props = _objectWithoutProperties$1(_ref, _excluded$1_);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -32939,11 +32939,11 @@ var PhoneIphoneIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 PhoneIphoneIcon.displayName = 'PhoneIphoneIcon';
 
-var _excluded$1Y = ["className", "onClick"];
+var _excluded$1Z = ["className", "onClick"];
 var PublicIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1Y);
+    props = _objectWithoutProperties$1(_ref, _excluded$1Z);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -32962,11 +32962,11 @@ var PublicIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 PublicIcon.displayName = 'PublicIcon';
 
-var _excluded$1X = ["className", "onClick"];
+var _excluded$1Y = ["className", "onClick"];
 var PlayGrayButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1X);
+    props = _objectWithoutProperties$1(_ref, _excluded$1Y);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     version: '1.1',
@@ -33003,11 +33003,11 @@ var PlayGrayButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 PlayGrayButton.displayName = 'PlayGrayButton';
 
-var _excluded$1W = ["className", "onClick"];
+var _excluded$1X = ["className", "onClick"];
 var GrayPlayIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1W);
+    props = _objectWithoutProperties$1(_ref, _excluded$1X);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     version: '1.1',
@@ -33048,11 +33048,11 @@ var GrayPlayIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 GrayPlayIcon.displayName = 'GrayPlayIcon';
 
-var _excluded$1V = ["className", "onClick"];
+var _excluded$1W = ["className", "onClick"];
 var GridView = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1V);
+    props = _objectWithoutProperties$1(_ref, _excluded$1W);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -33086,11 +33086,11 @@ var GridView = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 GridView.displayName = 'GridView';
 
-var _excluded$1U = ["className", "onClick"];
+var _excluded$1V = ["className", "onClick"];
 var Group$2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1U);
+    props = _objectWithoutProperties$1(_ref, _excluded$1V);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -33124,11 +33124,11 @@ var Group$2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Group$2.displayName = 'Group';
 
-var _excluded$1T = ["className", "onClick"];
+var _excluded$1U = ["className", "onClick"];
 var GroupDefault = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1T);
+    props = _objectWithoutProperties$1(_ref, _excluded$1U);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '16',
@@ -33156,11 +33156,11 @@ var GroupDefault = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 GroupDefault.displayName = 'GroupDefault';
 
-var _excluded$1S = ["className", "onClick"];
+var _excluded$1T = ["className", "onClick"];
 var Help = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1S);
+    props = _objectWithoutProperties$1(_ref, _excluded$1T);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '16',
@@ -33185,11 +33185,11 @@ var Help = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Help.displayName = 'Help';
 
-var _excluded$1R = ["className", "onClick"];
+var _excluded$1S = ["className", "onClick"];
 var HorizontalView = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1R);
+    props = _objectWithoutProperties$1(_ref, _excluded$1S);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -33217,11 +33217,11 @@ var HorizontalView = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 HorizontalView.displayName = 'HorizontalView';
 
-var _excluded$1Q = ["className", "onClick"];
+var _excluded$1R = ["className", "onClick"];
 var Information = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1Q);
+    props = _objectWithoutProperties$1(_ref, _excluded$1R);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -33252,11 +33252,11 @@ var Information = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Information.displayName = 'Information';
 
-var _excluded$1P = ["className", "onClick"];
+var _excluded$1Q = ["className", "onClick"];
 var Locked = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1P);
+    props = _objectWithoutProperties$1(_ref, _excluded$1Q);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -33279,11 +33279,11 @@ var Locked = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Locked.displayName = 'Locked';
 
-var _excluded$1O = ["className", "onClick"];
+var _excluded$1P = ["className", "onClick"];
 var Logout = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1O);
+    props = _objectWithoutProperties$1(_ref, _excluded$1P);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -33305,11 +33305,11 @@ var Logout = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Logout.displayName = 'Logout';
 
-var _excluded$1N = ["className", "onClick"];
+var _excluded$1O = ["className", "onClick"];
 var MyProfile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1N);
+    props = _objectWithoutProperties$1(_ref, _excluded$1O);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -33331,11 +33331,11 @@ var MyProfile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 MyProfile.displayName = 'MyProfile';
 
-var _excluded$1M = ["className", "onClick"];
+var _excluded$1N = ["className", "onClick"];
 var NewFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1M);
+    props = _objectWithoutProperties$1(_ref, _excluded$1N);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -33355,11 +33355,11 @@ var NewFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 NewFilter.displayName = 'NewFilter';
 
-var _excluded$1L = ["className", "onClick"];
+var _excluded$1M = ["className", "onClick"];
 var Notification = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1L);
+    props = _objectWithoutProperties$1(_ref, _excluded$1M);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -33378,11 +33378,11 @@ var Notification = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Notification.displayName = 'Notification';
 
-var _excluded$1K = ["className", "onClick"];
+var _excluded$1L = ["className", "onClick"];
 var PresentationScreen = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1K);
+    props = _objectWithoutProperties$1(_ref, _excluded$1L);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '64',
@@ -33418,11 +33418,11 @@ var PresentationScreen = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 PresentationScreen.displayName = 'PresentationScreen';
 
-var _excluded$1J = ["className", "onClick"];
+var _excluded$1K = ["className", "onClick"];
 var Profile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1J);
+    props = _objectWithoutProperties$1(_ref, _excluded$1K);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     id: 'Profile_Picture',
@@ -33508,11 +33508,11 @@ var Profile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Profile.displayName = 'Profile';
 
-var _excluded$1I = ["className", "onClick"];
+var _excluded$1J = ["className", "onClick"];
 var RedDeleteIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1I);
+    props = _objectWithoutProperties$1(_ref, _excluded$1J);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     version: '1.1',
@@ -33556,11 +33556,11 @@ var RedDeleteIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 RedDeleteIcon.displayName = 'RedDeleteIcon';
 
-var _excluded$1H = ["className", "onClick"];
+var _excluded$1I = ["className", "onClick"];
 var RemoveAlt = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1H);
+    props = _objectWithoutProperties$1(_ref, _excluded$1I);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -33588,11 +33588,11 @@ var RemoveAlt = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 RemoveAlt.displayName = 'RemoveAlt';
 
-var _excluded$1G = ["className", "onClick"];
+var _excluded$1H = ["className", "onClick"];
 var RemoveAltDisable = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1G);
+    props = _objectWithoutProperties$1(_ref, _excluded$1H);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -33614,11 +33614,11 @@ var RemoveAltDisable = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 RemoveAltDisable.displayName = 'RemoveAltDisable';
 
-var _excluded$1F = ["className", "onClick"];
+var _excluded$1G = ["className", "onClick"];
 var RemoveFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1F);
+    props = _objectWithoutProperties$1(_ref, _excluded$1G);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -33640,11 +33640,11 @@ var RemoveFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 RemoveFilter.displayName = 'RemoveFilter';
 
-var _excluded$1E = ["className", "onClick"];
+var _excluded$1F = ["className", "onClick"];
 var Reset = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1E);
+    props = _objectWithoutProperties$1(_ref, _excluded$1F);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -33663,11 +33663,11 @@ var Reset = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Reset.displayName = 'Reset';
 
-var _excluded$1D = ["className", "onClick"];
+var _excluded$1E = ["className", "onClick"];
 var Search = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1D);
+    props = _objectWithoutProperties$1(_ref, _excluded$1E);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -33686,11 +33686,11 @@ var Search = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Search.displayName = 'Search';
 
-var _excluded$1C = ["className", "onClick"];
+var _excluded$1D = ["className", "onClick"];
 var SendAlt = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1C);
+    props = _objectWithoutProperties$1(_ref, _excluded$1D);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -33709,11 +33709,11 @@ var SendAlt = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 SendAlt.displayName = 'SendAlt';
 
-var _excluded$1B = ["className", "onClick"];
+var _excluded$1C = ["className", "onClick"];
 var DeleteIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1B);
+    props = _objectWithoutProperties$1(_ref, _excluded$1C);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '18',
@@ -33741,11 +33741,11 @@ var DeleteIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 DeleteIcon.displayName = 'DeleteIcon';
 
-var _excluded$1A = ["className", "onClick"];
+var _excluded$1B = ["className", "onClick"];
 var Unlocked = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1A);
+    props = _objectWithoutProperties$1(_ref, _excluded$1B);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -33764,11 +33764,11 @@ var Unlocked = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Unlocked.displayName = 'Unlocked';
 
-var _excluded$1z = ["className", "onClick"];
+var _excluded$1A = ["className", "onClick"];
 var SwitchCompany = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1z);
+    props = _objectWithoutProperties$1(_ref, _excluded$1A);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -33790,11 +33790,11 @@ var SwitchCompany = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 SwitchCompany.displayName = 'SwitchCompany';
 
-var _excluded$1y = ["className", "onClick"];
+var _excluded$1z = ["className", "onClick"];
 var TrashCan = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1y);
+    props = _objectWithoutProperties$1(_ref, _excluded$1z);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -33828,11 +33828,11 @@ var TrashCan = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 TrashCan.displayName = 'TrashCan';
 
-var _excluded$1x = ["className", "onClick"];
+var _excluded$1y = ["className", "onClick"];
 var TrashCanAction = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1x);
+    props = _objectWithoutProperties$1(_ref, _excluded$1y);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '40',
@@ -33860,11 +33860,11 @@ var TrashCanAction = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 TrashCanAction.displayName = 'TrashCanAction';
 
-var _excluded$1w = ["className", "onClick"];
+var _excluded$1x = ["className", "onClick"];
 var TrashCanRed = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1w);
+    props = _objectWithoutProperties$1(_ref, _excluded$1x);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -33892,11 +33892,11 @@ var TrashCanRed = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 TrashCanRed.displayName = 'TrashCanRed';
 
-var _excluded$1v = ["className", "onClick"];
+var _excluded$1w = ["className", "onClick"];
 var UnfillPlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1v);
+    props = _objectWithoutProperties$1(_ref, _excluded$1w);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '16',
@@ -33919,11 +33919,11 @@ var UnfillPlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 UnfillPlay.displayName = 'UnfillPlay';
 
-var _excluded$1u = ["className", "onClick"];
+var _excluded$1v = ["className", "onClick"];
 var UserActivity = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1u);
+    props = _objectWithoutProperties$1(_ref, _excluded$1v);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -33954,11 +33954,11 @@ var UserActivity = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 UserActivity.displayName = 'UserActivity';
 
-var _excluded$1t = ["className", "onClick"];
+var _excluded$1u = ["className", "onClick"];
 var UserSpeaker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1t);
+    props = _objectWithoutProperties$1(_ref, _excluded$1u);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -33980,11 +33980,11 @@ var UserSpeaker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 UserSpeaker.displayName = 'UserSpeaker';
 
-var _excluded$1s = ["className", "onClick"];
+var _excluded$1t = ["className", "onClick"];
 var WhiteAiAssistant = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties$1(_ref, _excluded$1s);
+    props = _objectWithoutProperties$1(_ref, _excluded$1t);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '20',
@@ -34012,13 +34012,13 @@ var WhiteAiAssistant = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 WhiteAiAssistant.displayName = 'WhiteAiAssistant';
 
-var _excluded$1r = ["className", "onClick", "fill"];
+var _excluded$1s = ["className", "onClick", "fill"];
 var ArchiveIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$fill = _ref.fill,
     fill = _ref$fill === void 0 ? '#68707A' : _ref$fill,
-    props = _objectWithoutProperties$1(_ref, _excluded$1r);
+    props = _objectWithoutProperties$1(_ref, _excluded$1s);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -34037,13 +34037,13 @@ var ArchiveIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 ArchiveIcon.displayName = 'ArchiveIcon';
 
-var _excluded$1q = ["className", "onClick", "fill"];
+var _excluded$1r = ["className", "onClick", "fill"];
 var BackspaceRoundedIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$fill = _ref.fill,
     fill = _ref$fill === void 0 ? '#68707A' : _ref$fill,
-    props = _objectWithoutProperties$1(_ref, _excluded$1q);
+    props = _objectWithoutProperties$1(_ref, _excluded$1r);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -34062,13 +34062,13 @@ var BackspaceRoundedIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 BackspaceRoundedIcon.displayName = 'BackspaceRoundedIcon';
 
-var _excluded$1p = ["className", "onClick", "fill"];
+var _excluded$1q = ["className", "onClick", "fill"];
 var BackupIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$fill = _ref.fill,
     fill = _ref$fill === void 0 ? '#68707A' : _ref$fill,
-    props = _objectWithoutProperties$1(_ref, _excluded$1p);
+    props = _objectWithoutProperties$1(_ref, _excluded$1q);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -34087,13 +34087,13 @@ var BackupIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 BackupIcon.displayName = 'BackupIcon';
 
-var _excluded$1o = ["className", "onClick", "fill"];
+var _excluded$1p = ["className", "onClick", "fill"];
 var CheckCircleOutlineRoundedIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$fill = _ref.fill,
     fill = _ref$fill === void 0 ? '#68707A' : _ref$fill,
-    props = _objectWithoutProperties$1(_ref, _excluded$1o);
+    props = _objectWithoutProperties$1(_ref, _excluded$1p);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -34112,13 +34112,13 @@ var CheckCircleOutlineRoundedIcon = /*#__PURE__*/React.forwardRef(function (_ref
 });
 CheckCircleOutlineRoundedIcon.displayName = 'CheckCircleOutlineRoundedIcon';
 
-var _excluded$1n = ["className", "onClick", "fill"];
+var _excluded$1o = ["className", "onClick", "fill"];
 var ClosedCaptionIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$fill = _ref.fill,
     fill = _ref$fill === void 0 ? '#68707A' : _ref$fill,
-    props = _objectWithoutProperties$1(_ref, _excluded$1n);
+    props = _objectWithoutProperties$1(_ref, _excluded$1o);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -34137,13 +34137,13 @@ var ClosedCaptionIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 ClosedCaptionIcon.displayName = 'ClosedCaptionIcon';
 
-var _excluded$1m = ["className", "onClick", "fill"];
+var _excluded$1n = ["className", "onClick", "fill"];
 var CloudDownloadIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$fill = _ref.fill,
     fill = _ref$fill === void 0 ? '#68707A' : _ref$fill,
-    props = _objectWithoutProperties$1(_ref, _excluded$1m);
+    props = _objectWithoutProperties$1(_ref, _excluded$1n);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -34162,13 +34162,13 @@ var CloudDownloadIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 CloudDownloadIcon.displayName = 'CloudDownloadIcon';
 
-var _excluded$1l = ["className", "onClick", "fill"];
+var _excluded$1m = ["className", "onClick", "fill"];
 var ContactSupportOutlinedIcon$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$fill = _ref.fill,
     fill = _ref$fill === void 0 ? '#68707A' : _ref$fill,
-    props = _objectWithoutProperties$1(_ref, _excluded$1l);
+    props = _objectWithoutProperties$1(_ref, _excluded$1m);
   return require$$2$2.jsxs("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     xmlns: 'http://www.w3.org/2000/svg',
@@ -34189,13 +34189,13 @@ var ContactSupportOutlinedIcon$1 = /*#__PURE__*/React.forwardRef(function (_ref,
 });
 ContactSupportOutlinedIcon$1.displayName = 'ContactSupportOutlinedIcon';
 
-var _excluded$1k = ["className", "onClick", "fill"];
+var _excluded$1l = ["className", "onClick", "fill"];
 var ErrorOutlineRoundedIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$fill = _ref.fill,
     fill = _ref$fill === void 0 ? '#68707A' : _ref$fill,
-    props = _objectWithoutProperties$1(_ref, _excluded$1k);
+    props = _objectWithoutProperties$1(_ref, _excluded$1l);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -34214,13 +34214,13 @@ var ErrorOutlineRoundedIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref)
 });
 ErrorOutlineRoundedIcon.displayName = 'ErrorOutlineRoundedIcon';
 
-var _excluded$1j = ["className", "onClick", "fill"];
+var _excluded$1k = ["className", "onClick", "fill"];
 var FileCopyIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$fill = _ref.fill,
     fill = _ref$fill === void 0 ? '#06C68F' : _ref$fill,
-    props = _objectWithoutProperties$1(_ref, _excluded$1j);
+    props = _objectWithoutProperties$1(_ref, _excluded$1k);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -34239,13 +34239,13 @@ var FileCopyIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 FileCopyIcon.displayName = 'FileCopyIcon';
 
-var _excluded$1i = ["className", "onClick", "fill"];
+var _excluded$1j = ["className", "onClick", "fill"];
 var HeadsetIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$fill = _ref.fill,
     fill = _ref$fill === void 0 ? 'secondary' : _ref$fill,
-    props = _objectWithoutProperties$1(_ref, _excluded$1i);
+    props = _objectWithoutProperties$1(_ref, _excluded$1j);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -34264,13 +34264,13 @@ var HeadsetIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 HeadsetIcon.displayName = 'HeadsetIcon';
 
-var _excluded$1h = ["className", "onClick", "fill"];
+var _excluded$1i = ["className", "onClick", "fill"];
 var LockIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$fill = _ref.fill,
     fill = _ref$fill === void 0 ? '#68707A' : _ref$fill,
-    props = _objectWithoutProperties$1(_ref, _excluded$1h);
+    props = _objectWithoutProperties$1(_ref, _excluded$1i);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -34289,13 +34289,13 @@ var LockIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 LockIcon.displayName = 'LockIcon';
 
-var _excluded$1g = ["className", "onClick", "fill"];
+var _excluded$1h = ["className", "onClick", "fill"];
 var NotificationsOutlined$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$fill = _ref.fill,
     fill = _ref$fill === void 0 ? '#68707A' : _ref$fill,
-    props = _objectWithoutProperties$1(_ref, _excluded$1g);
+    props = _objectWithoutProperties$1(_ref, _excluded$1h);
   return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
     ref: ref,
     width: '24',
@@ -34314,6 +34314,29 @@ var NotificationsOutlined$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref)
 });
 NotificationsOutlined$1.displayName = 'NotificationsOutlined';
 
+var _excluded$1g = ["className", "onClick"];
+var NotesIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    onClick = _ref.onClick,
+    props = _objectWithoutProperties$1(_ref, _excluded$1g);
+  return require$$2$2.jsx("svg", _objectSpread2$1(_objectSpread2$1({
+    ref: ref,
+    width: '24',
+    height: '24',
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+    className: className,
+    onClick: onClick
+  }, props), {}, {
+    children: require$$2$2.jsx("path", {
+      d: 'M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.89 22 5.99 22H18C19.1 22 20 21.1 20 20V8L14 2ZM18 20H6V4H13V9H18V20ZM8 15.5L9.5 15.5V17H8V15.5ZM8 12.5H16V14H8V12.5ZM8 9.5H13V11H8V9.5Z',
+      fill: 'currentColor'
+    })
+  }));
+});
+NotesIcon.displayName = 'NotesIcon';
+
 var _excluded$1f = ["className", "onClick", "fill"];
 var PlayCircleOutlineIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
@@ -37230,7 +37253,7 @@ var IndicatorsContainer = function IndicatorsContainer(props) {
   }), innerProps), children);
 };
 
-var _templateObject$l;
+var _templateObject$m;
 var _excluded$2$1 = ["size"],
   _excluded2$6 = ["innerProps", "isRtl", "size"];
 function _EMOTION_STRINGIFIED_CSS_ERROR__$3() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
@@ -37344,7 +37367,7 @@ var IndicatorSeparator = function IndicatorSeparator(props) {
 // Loading
 // ==============================
 
-var loadingDotAnimations = keyframes(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n  0%, 80%, 100% { opacity: 0; }\n  40% { opacity: 1; }\n"])));
+var loadingDotAnimations = keyframes(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n  0%, 80%, 100% { opacity: 0; }\n  40% { opacity: 1; }\n"])));
 var loadingIndicatorCSS = function loadingIndicatorCSS(_ref5, unstyled) {
   var isFocused = _ref5.isFocused,
     size = _ref5.size,
@@ -40503,7 +40526,7 @@ var StateManagedSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 var StateManagedSelect$1 = StateManagedSelect;
 
-var _templateObject$k, _templateObject2$f, _templateObject3$b, _templateObject4$8;
+var _templateObject$l, _templateObject2$g, _templateObject3$c, _templateObject4$9;
 var customStyles = {
   option: function option(provided, state) {
     return _objectSpread2$1(_objectSpread2$1({}, provided), {}, {
@@ -40541,7 +40564,7 @@ var customStyles = {
     });
   }
 };
-dt.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral$1(["\n  width: 100%;\n  position: relative;\n  .css-yk16xz-control {\n    border-color: ", ";\n    outline: none;\n    &:hover {\n      border-color: ", ";\n    }\n  }\n  .css-1wa3eu0-placeholder {\n    color: ", ";\n  }\n  & > .css-1m92ju6-control {\n    border-color: ", ";\n  }\n  & > .css-1n7v3ny-option {\n    background-color: rgba(6, 198, 144, 0.1) !important;\n  }\n"])), function (_ref) {
+dt.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral$1(["\n  width: 100%;\n  position: relative;\n  .css-yk16xz-control {\n    border-color: ", ";\n    outline: none;\n    &:hover {\n      border-color: ", ";\n    }\n  }\n  .css-1wa3eu0-placeholder {\n    color: ", ";\n  }\n  & > .css-1m92ju6-control {\n    border-color: ", ";\n  }\n  & > .css-1n7v3ny-option {\n    background-color: rgba(6, 198, 144, 0.1) !important;\n  }\n"])), function (_ref) {
   var error = _ref.error;
   return error ? '#f44336' : 'rgba(0, 0, 0, 0.23)';
 }, function (_ref2) {
@@ -40554,15 +40577,15 @@ dt.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral$1(["\n
   var error = _ref4.error;
   return error ? '#f44336' : '#06c68f';
 });
-var ErrorMessage = dt.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral$1(["\n  position: absolute;\n  color: #f44336;\n  bottom: -20px;\n  left: 6px;\n  font-size: 0.75rem;\n"])));
-var ContainerSelect = dt.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteral$1(["\n  width: 100%;\n  position: relative;\n  .css-yk16xz-control {\n    border-color: ", ";\n    outline: none;\n  }\n  .css-1wa3eu0-placeholder {\n    color: ", ";\n  }\n  .css-1hb7zxy-IndicatorsContainer {\n    padding-right: 10px;\n    cursor: pointer;\n  }\n  .css-1okebmr-indicatorSeparator {\n    display: none;\n  }\n"])), function (_ref5) {
+var ErrorMessage = dt.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteral$1(["\n  position: absolute;\n  color: #f44336;\n  bottom: -20px;\n  left: 6px;\n  font-size: 0.75rem;\n"])));
+var ContainerSelect = dt.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteral$1(["\n  width: 100%;\n  position: relative;\n  .css-yk16xz-control {\n    border-color: ", ";\n    outline: none;\n  }\n  .css-1wa3eu0-placeholder {\n    color: ", ";\n  }\n  .css-1hb7zxy-IndicatorsContainer {\n    padding-right: 10px;\n    cursor: pointer;\n  }\n  .css-1okebmr-indicatorSeparator {\n    display: none;\n  }\n"])), function (_ref5) {
   var error = _ref5.error;
   return error ? '#f44336' : 'rgba(0, 0, 0, 0.23)';
 }, function (_ref6) {
   var error = _ref6.error;
   return error ? '#f44336' : 'rgba(0, 0, 0, 0.54) ';
 });
-dt.div(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteral$1(["\n  width: 372px !important;\n  height: 40px !important;\n  .selectField {\n    width: 372px !important;\n  }\n"])));
+dt.div(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteral$1(["\n  width: 372px !important;\n  height: 40px !important;\n  .selectField {\n    width: 372px !important;\n  }\n"])));
 
 var DropDown = function DropDown(props) {
   var DropdownIndicator = function DropdownIndicator() {
@@ -40619,32 +40642,32 @@ function requireCancel () {
 var CancelExports = /*@__PURE__*/ requireCancel();
 var CancelIcon = /*@__PURE__*/getDefaultExportFromCjs(CancelExports);
 
-var _templateObject$j, _templateObject2$e, _templateObject3$a, _templateObject4$7, _templateObject5$6, _templateObject6$5, _templateObject7$3, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
-dt.div(_templateObject$j || (_templateObject$j = _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$e || (_templateObject2$e = _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$a || (_templateObject3$a = _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"])));
-dt.div(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral$1(["\n  margin-bottom: 15px;\n"])));
-dt.header(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteral$1(["\n  color: rgba(0, 0, 0, 0.54);\n  transition: color 0.2 ease;\n  svg {\n    fill: #3f51b5;\n  }\n"])));
-dt.div(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteral$1([""])));
-dt.div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteral$1(["\n  background: #fff;\n  position: relative;\n  padding: 10px;\n  border-radius: 5px;\n  border: 1px solid rgba(0, 0, 0, 0.3);\n"])));
+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;
+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"])));
+dt.div(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteral$1(["\n  margin-bottom: 15px;\n"])));
+dt.header(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteral$1(["\n  color: rgba(0, 0, 0, 0.54);\n  transition: color 0.2 ease;\n  svg {\n    fill: #3f51b5;\n  }\n"])));
+dt.div(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteral$1([""])));
+dt.div(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteral$1(["\n  background: #fff;\n  position: relative;\n  padding: 10px;\n  border-radius: 5px;\n  border: 1px solid rgba(0, 0, 0, 0.3);\n"])));
 // Uploader
-var Container$3 = dt.div(_templateObject8$2 || (_templateObject8$2 = _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$1 || (_templateObject9$1 = _taggedTemplateLiteral$1([""])));
-dt.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral$1(["\n  width: 390px;\n"])));
-var CancelButton = dt.div(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  cursor: pointer;\n"])), function (_ref) {
+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"])));
+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';
 }, function (_ref2) {
   var top = _ref2.top;
   return top || '-12px';
 });
-var InputFileContainer = dt.div(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral$1(["\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(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral$1(["\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(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteral$1(["\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 InputFileContainer = dt.div(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteral$1(["\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(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteral$1(["\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(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteral$1(["\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(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteral$1(["\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(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteral$1(["\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
-dt.label(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral$1(["\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.label(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteral$1(["\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(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral$1(["\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(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral$1(["\n  margin-left: auto;\n  margin-top: 3px;\n  width: 60px;\n  cursor: pointer;\n"])));
 dt.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral$1(["\n  margin-left: 23px;\n  margin-top: 3px;\n  cursor: pointer;\n"])));
@@ -48710,8 +48733,8 @@ class AdapterDateFns extends AdapterDateFnsBase {
   }
 }
 
-var _templateObject$i;
-dt.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral$1(["\n  position: relative;\n  width: 100%;\n\n  &.error label {\n    color: #f44336;\n  }\n\n  &.error .MuiInputBase-root::before {\n    border-bottom: 2px solid #f44336;\n  }\n\n  div > p,\n  > p {\n    position: absolute;\n    bottom: -26px;\n    color: #f44336;\n    font-size: 0.75rem;\n  }\n"])));
+var _templateObject$j;
+dt.div(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral$1(["\n  position: relative;\n  width: 100%;\n\n  &.error label {\n    color: #f44336;\n  }\n\n  &.error .MuiInputBase-root::before {\n    border-bottom: 2px solid #f44336;\n  }\n\n  div > p,\n  > p {\n    position: absolute;\n    bottom: -26px;\n    color: #f44336;\n    font-size: 0.75rem;\n  }\n"])));
 var PREFIX = 'DatePicker';
 var classes = {
   datePicker: "".concat(PREFIX, "-datePicker")
@@ -57724,19 +57747,19 @@ var DatePicker = function DatePicker(_ref) {
   });
 };
 
-var _templateObject$h, _templateObject2$d, _templateObject3$9, _templateObject4$6, _templateObject5$5, _templateObject6$4;
-dt.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral$1(["\n  display: flex;\n  gap: 16px;\n  /* height: 40px; */\n  width: 60%;\n  align-items: center;\n  border: 1px solid ", ";\n  border-radius: 4px;\n  padding: 5px;\n  margin-bottom: 5px;\n"])), function (_ref) {
+var _templateObject$i, _templateObject2$e, _templateObject3$a, _templateObject4$7, _templateObject5$6, _templateObject6$5;
+dt.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral$1(["\n  display: flex;\n  gap: 16px;\n  /* height: 40px; */\n  width: 60%;\n  align-items: center;\n  border: 1px solid ", ";\n  border-radius: 4px;\n  padding: 5px;\n  margin-bottom: 5px;\n"])), function (_ref) {
   var error = _ref.error;
   return error ? 'red' : 'rgba(0, 0, 0, 0.23)';
 });
-var InputContainer = dt.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral$1(["\n  width: 60%;\n  gap: 8px;\n  min-height: 40px;\n  margin-right: 10px;\n\n  & > div > div {\n    min-height: 40px;\n  }\n"])));
-dt.input(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral$1(["\n  flex: 1;\n  gap: 8px;\n  width: 100%;\n  outline: none;\n  border: none;\n  border-left: none;\n  padding: 6px;\n  font-family: 'Open Sans';\n  color: black;\n  font-size: 15px;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])));
-dt.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  left: 12px;\n  top: -11px;\n  background: #fff;\n  z-index: 1;\n  font-size: 13px;\n  color: ", ";\n"])), function (_ref2) {
+var InputContainer = dt.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral$1(["\n  width: 60%;\n  gap: 8px;\n  min-height: 40px;\n  margin-right: 10px;\n\n  & > div > div {\n    min-height: 40px;\n  }\n"])));
+dt.input(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteral$1(["\n  flex: 1;\n  gap: 8px;\n  width: 100%;\n  outline: none;\n  border: none;\n  border-left: none;\n  padding: 6px;\n  font-family: 'Open Sans';\n  color: black;\n  font-size: 15px;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])));
+dt.div(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  left: 12px;\n  top: -11px;\n  background: #fff;\n  z-index: 1;\n  font-size: 13px;\n  color: ", ";\n"])), function (_ref2) {
   var error = _ref2.error;
   return error ? 'red' : 'rgba(0, 0, 0, 0.54)';
 });
-dt.div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  color: #f44336;\n  bottom: -20px;\n  left: 6px;\n  font-size: 0.75rem;\n"])));
-var Flex = dt.div(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteral$1(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: stretch;\n"])));
+dt.div(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  color: #f44336;\n  bottom: -20px;\n  left: 6px;\n  font-size: 0.75rem;\n"])));
+var Flex = dt.div(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteral$1(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: stretch;\n"])));
 
 var countryList = (function () {
   return [{
@@ -58789,9 +58812,9 @@ var PhoneCountryCode = function PhoneCountryCode(_ref) {
   });
 };
 
-var _templateObject$g, _templateObject2$c;
-dt.div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral$1(["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  z-index: 999;\n  background: rgba(0, 0, 0, 0.2);\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n\n  &.withBackground {\n    background: rgba(255, 255, 255, 1);\n  }\n"])));
-var LoaderCircle = dt.div(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteral$1(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
+var _templateObject$h, _templateObject2$d;
+dt.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral$1(["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  z-index: 999;\n  background: rgba(0, 0, 0, 0.2);\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n\n  &.withBackground {\n    background: rgba(255, 255, 255, 1);\n  }\n"])));
+var LoaderCircle = dt.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral$1(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
 
 var Loader = function Loader(_ref) {
   var _ref$width = _ref.width,
@@ -58811,8 +58834,8 @@ var Loader = function Loader(_ref) {
   });
 };
 
-var _templateObject$f;
-var LabelContainer = dt.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  span {\n    font-weight: 550;\n  }\n"])));
+var _templateObject$g;
+var LabelContainer = dt.div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  span {\n    font-weight: 550;\n  }\n"])));
 
 var Checkbox = function Checkbox(_ref) {
   var checked = _ref.checked,
@@ -58853,8 +58876,8 @@ var Checkbox = function Checkbox(_ref) {
   });
 };
 
-var _templateObject$e;
-var PaginationWrapper = dt.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral$1(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n  font-family: 'Open Sans', sans-serif;\n  font-weight: 600;\n\n  .MuiPagination-ul {\n    flex-wrap: nowrap;\n  }\n  .MuiPaginationItem-root {\n    background: #ffffff;\n    border: 1px solid #e7e9ed !important;\n    border-radius: 4px !important;\n    width: 32px !important;\n    height: 32px !important;\n    padding: 6px 6px !important;\n\n    &:hover {\n      border: 1px solid #cdccd0;\n      background-color: #ffffff;\n    }\n\n    &.Mui-selected {\n      background: ", ";\n      color: white;\n\n      &:hover {\n        background: ", ";\n        border: none;\n      }\n    }\n  }\n"])), function (_ref) {
+var _templateObject$f;
+var PaginationWrapper = dt.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral$1(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n  font-family: 'Open Sans', sans-serif;\n  font-weight: 600;\n\n  .MuiPagination-ul {\n    flex-wrap: nowrap;\n  }\n  .MuiPaginationItem-root {\n    background: #ffffff;\n    border: 1px solid #e7e9ed !important;\n    border-radius: 4px !important;\n    width: 32px !important;\n    height: 32px !important;\n    padding: 6px 6px !important;\n\n    &:hover {\n      border: 1px solid #cdccd0;\n      background-color: #ffffff;\n    }\n\n    &.Mui-selected {\n      background: ", ";\n      color: white;\n\n      &:hover {\n        background: ", ";\n        border: none;\n      }\n    }\n  }\n"])), function (_ref) {
   var $themeColor = _ref.$themeColor;
   return $themeColor || '#08c694';
 }, function (_ref2) {
@@ -58900,12 +58923,12 @@ var Pagination = function Pagination(_ref) {
   });
 };
 
-var _templateObject$d, _templateObject2$b, _templateObject3$8, _templateObject4$5, _templateObject5$4;
-dt.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral$1([""])));
-var Container$2 = dt.div(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  margin-bottom: 10px;\n"])));
-var PathItem = dt.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral$1(["\n  color: #68707a;\n  font-weight: 400;\n  font-size: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n\n  svg {\n    /* opacity: 0.5; */\n  }\n"])));
-dt.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n"])));
-var ItemWrapper = dt.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral$1(["\n  font-weight: 400;\n"])));
+var _templateObject$e, _templateObject2$c, _templateObject3$9, _templateObject4$6, _templateObject5$5;
+dt.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral$1([""])));
+var Container$2 = dt.div(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  margin-bottom: 10px;\n"])));
+var PathItem = dt.div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral$1(["\n  color: #68707a;\n  font-weight: 400;\n  font-size: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n\n  svg {\n    /* opacity: 0.5; */\n  }\n"])));
+dt.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n"])));
+var ItemWrapper = dt.div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteral$1(["\n  font-weight: 400;\n"])));
 
 var BreadcrumbWithRouter = function BreadcrumbWithRouter(_ref) {
   var data = _ref.data;
@@ -58977,10 +59000,10 @@ var Breadcrumb = function Breadcrumb(props) {
   return require$$2$2.jsx(BreadcrumbWithoutRouter, _objectSpread2$1({}, props));
 };
 
-var _templateObject$c, _templateObject2$a, _templateObject3$7, _templateObject4$4, _templateObject5$3, _templateObject6$3, _templateObject7$2, _templateObject8$1;
-var CardContainer = dt.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral$1(["\n  position: relative;\n"])));
-var StyledCard = dt(Card)(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral$1(["\n  padding: 16px;\n  height: 88px;\n  border-radius: 4px;\n  border: 1px solid #d6dae0;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  align-self: stretch;\n  background-color: #fff;\n  box-shadow: none !important;\n"])));
-var StyledIcon = dt.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral$1(["\n  width: 56px;\n  height: 56px;\n  border-radius: var(--Padding-4px, 4px);\n  background: ", ";\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  color: ", ";\n  svg {\n    width: 23.172px;\n    height: 23.172px;\n    flex-shrink: 0;\n    color: ", ";\n  }\n"])), function (_ref) {
+var _templateObject$d, _templateObject2$b, _templateObject3$8, _templateObject4$5, _templateObject5$4, _templateObject6$4, _templateObject7$3, _templateObject8$3;
+var CardContainer = dt.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral$1(["\n  position: relative;\n"])));
+var StyledCard = dt(Card)(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral$1(["\n  padding: 16px;\n  height: 88px;\n  border-radius: 4px;\n  border: 1px solid #d6dae0;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  align-self: stretch;\n  background-color: #fff;\n  box-shadow: none !important;\n"])));
+var StyledIcon = dt.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral$1(["\n  width: 56px;\n  height: 56px;\n  border-radius: var(--Padding-4px, 4px);\n  background: ", ";\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  color: ", ";\n  svg {\n    width: 23.172px;\n    height: 23.172px;\n    flex-shrink: 0;\n    color: ", ";\n  }\n"])), function (_ref) {
   var $backgroundColor = _ref.$backgroundColor;
   return $backgroundColor;
 }, function (_ref2) {
@@ -58990,14 +59013,14 @@ var StyledIcon = dt.div(_templateObject3$7 || (_templateObject3$7 = _taggedTempl
   var color = _ref3.color;
   return color || '#000000';
 });
-var TextWrapper = dt.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral$1([""])));
-var StyledCardContent = dt(CardContent)(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral$1(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n  gap: ", "px;\n  padding-bottom: 0 !important;\n  padding: 10px !important;\n  background: #fff;\n  .MuiFab-sizeSmall {\n    width: 36px !important;\n    height: 36px !important;\n  }\n"])), function (_ref4) {
+var TextWrapper = dt.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral$1([""])));
+var StyledCardContent = dt(CardContent)(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral$1(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n  gap: ", "px;\n  padding-bottom: 0 !important;\n  padding: 10px !important;\n  background: #fff;\n  .MuiFab-sizeSmall {\n    width: 36px !important;\n    height: 36px !important;\n  }\n"])), function (_ref4) {
   var gap = _ref4.gap;
   return gap || 20;
 });
-var HeaderText = dt.span(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteral$1(["\n  font-size: 12px;\n  color: rgba(0, 0, 0, 0.6);\n  font-weight: 400;\n"])));
-var NumberText = dt.span(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral$1(["\n  font-size: 15px;\n  font-weight: 500;\n  display: flex;\n  height: 22px;\n  align-items: center;\n"])));
-dt.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  bottom: 28px;\n  left: -22px;\n  transform: translateY(100%);\n  width: 300px;\n  background: #fff;\n  z-index: 5;\n"])));
+var HeaderText = dt.span(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteral$1(["\n  font-size: 12px;\n  color: rgba(0, 0, 0, 0.6);\n  font-weight: 400;\n"])));
+var NumberText = dt.span(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteral$1(["\n  font-size: 15px;\n  font-weight: 500;\n  display: flex;\n  height: 22px;\n  align-items: center;\n"])));
+dt.div(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  bottom: 28px;\n  left: -22px;\n  transform: translateY(100%);\n  width: 300px;\n  background: #fff;\n  z-index: 5;\n"])));
 
 var Tile = function Tile(_ref) {
   var customCardStyles = _ref.customCardStyles,
@@ -59032,14 +59055,14 @@ var Tile = function Tile(_ref) {
 
 var colors = ['#b3ecda', '#b4e0fb', '#f0bec4', '#fddbb6', '#fef4c4', '#f4d2fa', '#d0d0d0', '#b2b5ff', '#e4ffb4', '#b4fffc', '#ffb6e3'];
 
-var _templateObject$b, _templateObject2$9, _templateObject3$6, _templateObject4$3;
-var Container$1 = dt.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: 30px 0;\n"])));
-var Grid = dt.div(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral$1(["\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  grid-gap: 60px;\n  height: 100%;\n"])));
-var ColorContainerInput = dt.input(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral$1(["\n  cursor: pointer;\n  width: 160px;\n  height: 156px;\n  background: ", ";\n  position: relative;\n  border: 1px solid transparent;\n  transform: scale(0.87);\n  transition: 0.3s ease;\n\n  &:hover,\n  &.selected {\n    border: 2px solid #06c68f;\n    transform: scale(1);\n  }\n\n  &.disabled {\n    pointer-events: none;\n    background: gray;\n  }\n\n  &:before {\n    content: 'Custom \u270E';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    border-radius: 20px;\n    text-align: center;\n    padding: 2px 0;\n    width: 80px;\n    height: 20px;\n    background: white;\n    z-index: 50;\n    transition: 0.3s ease;\n  }\n"])), function (_ref) {
+var _templateObject$c, _templateObject2$a, _templateObject3$7, _templateObject4$4;
+var Container$1 = dt.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: 30px 0;\n"])));
+var Grid = dt.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral$1(["\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  grid-gap: 60px;\n  height: 100%;\n"])));
+var ColorContainerInput = dt.input(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral$1(["\n  cursor: pointer;\n  width: 160px;\n  height: 156px;\n  background: ", ";\n  position: relative;\n  border: 1px solid transparent;\n  transform: scale(0.87);\n  transition: 0.3s ease;\n\n  &:hover,\n  &.selected {\n    border: 2px solid #06c68f;\n    transform: scale(1);\n  }\n\n  &.disabled {\n    pointer-events: none;\n    background: gray;\n  }\n\n  &:before {\n    content: 'Custom \u270E';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    border-radius: 20px;\n    text-align: center;\n    padding: 2px 0;\n    width: 80px;\n    height: 20px;\n    background: white;\n    z-index: 50;\n    transition: 0.3s ease;\n  }\n"])), function (_ref) {
   var color = _ref.color;
   return color;
 });
-var ColorContainer = dt.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral$1(["\n  cursor: pointer;\n  width: 160px;\n  height: 156px;\n  background: ", ";\n  position: relative;\n  border: 1px solid transparent;\n  transform: scale(0.87);\n  transition: 0.3s ease;\n\n  &:hover,\n  &.selected {\n    border: 2px solid #06c68f;\n    transform: scale(1);\n  }\n\n  &.disabled {\n    pointer-events: none;\n    background: gray;\n  }\n"])), function (_ref2) {
+var ColorContainer = dt.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral$1(["\n  cursor: pointer;\n  width: 160px;\n  height: 156px;\n  background: ", ";\n  position: relative;\n  border: 1px solid transparent;\n  transform: scale(0.87);\n  transition: 0.3s ease;\n\n  &:hover,\n  &.selected {\n    border: 2px solid #06c68f;\n    transform: scale(1);\n  }\n\n  &.disabled {\n    pointer-events: none;\n    background: gray;\n  }\n"])), function (_ref2) {
   var color = _ref2.color;
   return color;
 });
@@ -76290,10 +76313,10 @@ var ColorPicker = function ColorPicker(_ref) {
   });
 };
 
-var _templateObject$a, _templateObject2$8, _templateObject3$5;
-var Wrapper = dt.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral$1(["\n  aspect-ratio: 1;\n  width: 410px;\n  scale: 0.4;\n  transform: translate(-75%, -76%);\n  background-color: #f5f5f5;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  transition: 0.3s;\n  border-radius: 14px;\n  position: relative;\n  img {\n    width: 100%;\n    height: 100%;\n  }\n"])));
-dt.iframe(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral$1(["\n  width: 410px;\n  height: 410px;\n  border: 0;\n  border-radius: 4px;\n"])));
-var EditButton = dt.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral$1(["\n  background-color: rgb(6, 198, 143);\n  position: absolute;\n  right: -12px;\n  scale: 2.5;\n  top: -12px;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  padding: 10px;\n  display: flex;\n"])));
+var _templateObject$b, _templateObject2$9, _templateObject3$6;
+var Wrapper = dt.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral$1(["\n  aspect-ratio: 1;\n  width: 410px;\n  scale: 0.4;\n  transform: translate(-75%, -76%);\n  background-color: #f5f5f5;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  transition: 0.3s;\n  border-radius: 14px;\n  position: relative;\n  img {\n    width: 100%;\n    height: 100%;\n  }\n"])));
+dt.iframe(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral$1(["\n  width: 410px;\n  height: 410px;\n  border: 0;\n  border-radius: 4px;\n"])));
+var EditButton = dt.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral$1(["\n  background-color: rgb(6, 198, 143);\n  position: absolute;\n  right: -12px;\n  scale: 2.5;\n  top: -12px;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  padding: 10px;\n  display: flex;\n"])));
 
 var Badge = function Badge(_ref) {
   var src = _ref.src,
@@ -76911,7 +76934,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.youtube,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerYouTube' */
-	      './YouTube-BL4m67X7.js'
+	      './YouTube-DCrrjdHh.js'
 	    ); }).then(function (n) { return n.YouTube; }))
 	  },
 	  {
@@ -76920,7 +76943,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.soundcloud,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerSoundCloud' */
-	      './SoundCloud-DTCuHEo9.js'
+	      './SoundCloud-DeywKljz.js'
 	    ); }).then(function (n) { return n.SoundCloud; }))
 	  },
 	  {
@@ -76929,7 +76952,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.vimeo,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerVimeo' */
-	      './Vimeo-BTWNsd7F.js'
+	      './Vimeo-Dy4WCWO0.js'
 	    ); }).then(function (n) { return n.Vimeo; }))
 	  },
 	  {
@@ -76938,7 +76961,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.mux,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerMux' */
-	      './Mux-CT4npRfe.js'
+	      './Mux-BLTI9IWB.js'
 	    ); }).then(function (n) { return n.Mux; }))
 	  },
 	  {
@@ -76947,7 +76970,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.facebook,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerFacebook' */
-	      './Facebook-WZKzPxQA.js'
+	      './Facebook-BashWh-t.js'
 	    ); }).then(function (n) { return n.Facebook; }))
 	  },
 	  {
@@ -76956,7 +76979,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.streamable,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerStreamable' */
-	      './Streamable-DMdFzZsD.js'
+	      './Streamable-0FgClTJ4.js'
 	    ); }).then(function (n) { return n.Streamable; }))
 	  },
 	  {
@@ -76965,7 +76988,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.wistia,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerWistia' */
-	      './Wistia-BhquWkTU.js'
+	      './Wistia-DfJIi1rZ.js'
 	    ); }).then(function (n) { return n.Wistia; }))
 	  },
 	  {
@@ -76974,7 +76997,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.twitch,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerTwitch' */
-	      './Twitch-BWFNOUYx.js'
+	      './Twitch-BTHbLK7l.js'
 	    ); }).then(function (n) { return n.Twitch; }))
 	  },
 	  {
@@ -76983,7 +77006,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.dailymotion,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerDailyMotion' */
-	      './DailyMotion-CS9GCkTI.js'
+	      './DailyMotion-C56t9uqg.js'
 	    ); }).then(function (n) { return n.DailyMotion; }))
 	  },
 	  {
@@ -76992,7 +77015,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.mixcloud,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerMixcloud' */
-	      './Mixcloud-CihEiIWW.js'
+	      './Mixcloud-DQgAbO_k.js'
 	    ); }).then(function (n) { return n.Mixcloud; }))
 	  },
 	  {
@@ -77001,7 +77024,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.vidyard,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerVidyard' */
-	      './Vidyard-DnqGJbh3.js'
+	      './Vidyard-B-WO0bkJ.js'
 	    ); }).then(function (n) { return n.Vidyard; }))
 	  },
 	  {
@@ -77010,7 +77033,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.kaltura,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerKaltura' */
-	      './Kaltura-DdAjTROo.js'
+	      './Kaltura-BRPnVmjt.js'
 	    ); }).then(function (n) { return n.Kaltura; }))
 	  },
 	  {
@@ -77022,7 +77045,7 @@ function requirePlayers () {
 	    },
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerFilePlayer' */
-	      './FilePlayer-D5XNWJfG.js'
+	      './FilePlayer-BUnkIHrE.js'
 	    ); }).then(function (n) { return n.FilePlayer; }))
 	  }
 	];
@@ -77843,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-DuuuynYu.js'
+	  './Preview-BRTt_uNR.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;
@@ -78052,14 +78075,14 @@ function requireLib () {
 var libExports = /*@__PURE__*/ requireLib();
 var ReactPlayer = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 
-var _templateObject$9, _templateObject2$7, _templateObject3$4, _templateObject4$2, _templateObject5$2, _templateObject6$2, _templateObject7$1;
-var StyledVideoPlayerWrapper = dt.div(_templateObject$9 || (_templateObject$9 = _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$7 || (_templateObject2$7 = _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$4 || (_templateObject3$4 = _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"])));
-var rotate = mt(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral$1(["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n"])));
-var StyledLoader = dt.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral$1(["\n  margin: 60px auto;\n  font-size: 10px;\n  position: relative;\n  text-indent: -9999em;\n  border-top: 3px solid var(--neutral-colors-light);\n  border-right: 3px solid var(--neutral-colors-light);\n  border-bottom: 3px solid var(--neutral-colors-light);\n  border-left: 3px solid var(--brand-colors-accent);\n  transform: translateZ(0);\n  animation: ", " 1.1s infinite linear;\n  border-radius: 50%;\n  width: 46px;\n  height: 46px;\n\n  &:after {\n    border-radius: 50%;\n    width: 46px;\n    height: 46px;\n  }\n"])), rotate);
-var StyledControlsContainer = dt.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral$1(["\n  width: 100%;\n  height: fit-content;\n  display: flex;\n  align-items: flex-end;\n  position: absolute;\n  flex-direction: column;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  z-index: 2;\n"])));
-var StyledSubtitles = dt.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral$1(["\n  background-color: rgba(2, 2, 16, 0.32);\n  color: #fff;\n  font-family: 'Open Sans', sans-serif;\n  font-size: 18px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 150%;\n  padding: 8px;\n  position: absolute;\n  z-index: 100;\n  bottom: ", ";\n  right: 0;\n  left: 0;\n  width: fit-content;\n  margin: 0 auto;\n  max-width: 80%;\n  width: fit-content;\n"])), function (_ref) {
+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 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"])));
+var rotate = mt(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral$1(["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n"])));
+var StyledLoader = dt.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral$1(["\n  margin: 60px auto;\n  font-size: 10px;\n  position: relative;\n  text-indent: -9999em;\n  border-top: 3px solid var(--neutral-colors-light);\n  border-right: 3px solid var(--neutral-colors-light);\n  border-bottom: 3px solid var(--neutral-colors-light);\n  border-left: 3px solid var(--brand-colors-accent);\n  transform: translateZ(0);\n  animation: ", " 1.1s infinite linear;\n  border-radius: 50%;\n  width: 46px;\n  height: 46px;\n\n  &:after {\n    border-radius: 50%;\n    width: 46px;\n    height: 46px;\n  }\n"])), rotate);
+var StyledControlsContainer = dt.div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteral$1(["\n  width: 100%;\n  height: fit-content;\n  display: flex;\n  align-items: flex-end;\n  position: absolute;\n  flex-direction: column;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  z-index: 2;\n"])));
+var StyledSubtitles = dt.div(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral$1(["\n  background-color: rgba(2, 2, 16, 0.32);\n  color: #fff;\n  font-family: 'Open Sans', sans-serif;\n  font-size: 18px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 150%;\n  padding: 8px;\n  position: absolute;\n  z-index: 100;\n  bottom: ", ";\n  right: 0;\n  left: 0;\n  width: fit-content;\n  margin: 0 auto;\n  max-width: 80%;\n  width: fit-content;\n"])), function (_ref) {
   var $controls = _ref.$controls;
   return $controls ? '60px' : '10px';
 });
@@ -78084,9 +78107,50 @@ var injectHLSSubtitleStyles = function injectHLSSubtitleStyles() {
     }
   };
 };
+// Notes functionality styles
+var StyledNoteMarkersOverlay = dt.div(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  bottom: 45px;\n  left: 80px;\n  right: 80px;\n  height: 6px;\n  z-index: ", ";\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  pointer-events: none;\n  overflow: visible;\n\n  ", "\n\n  ", "\n\n  &.controls-visible {\n    opacity: 1 !important;\n  }\n"])), function (props) {
+  return props.$isFullscreen ? 2147483646 : 15;
+}, function (props) {
+  return props.$isFullscreen ? "\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 42px;\n    top: auto;\n    height: 6px;\n    z-index: 2147483646;\n    width: 100%;\n    opacity: 1;\n    visibility: visible;\n  " : '';
+}, function (props) {
+  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) {
+  return props.$isFullscreen ? "top: auto; bottom: 0; transform: translateX(-50%);" : "bottom: -2px; transform: translateX(-50%);";
+}, function (props) {
+  return "".concat(props.$position, "%");
+}, function (props) {
+  return props.$isFullscreen ? '12px' : '10px';
+}, function (props) {
+  return props.$isFullscreen ? '12px' : '10px';
+}, function (props) {
+  return props.$isFullscreen ? '0 2px 4px rgba(0, 0, 0, 0.4)' : '0 2px 4px rgba(0, 0, 0, 0.3)';
+}, function (props) {
+  return props.$isFullscreen ? 2147483647 : 20;
+}, noteMarkerPulse);
+var StyledNoteTooltip = dt.div(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  bottom: 20px;\n  left: 50%;\n  transform: translateX(-50%);\n  background: rgba(0, 0, 0, 0.9);\n  color: white;\n  padding: 8px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  white-space: nowrap;\n  max-width: 200px;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  pointer-events: none;\n  z-index: 2147483647;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    border: 4px solid transparent;\n    border-top-color: rgba(0, 0, 0, 0.9);\n  }\n"])));
+var StyledNoteTime = dt.div(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral$1(["\n  font-size: 10px;\n  opacity: 0.8;\n  margin-top: 2px;\n"])));
+dt.div(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: ", ";\n  pointer-events: none;\n"])), function (props) {
+  return props.$isFullscreen ? 2147483646 : 999;
+});
+var StyledNoteModal = dt.div(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  bottom: 70px;\n  background: white;\n  border-radius: 16px;\n  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n  border: 1px solid #e2e8f0;\n  z-index: ", ";\n  width: 320px;\n  height: 270px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  pointer-events: auto;\n\n  ", "\n\n  &::after,\n  &::before {\n    content: '';\n    position: absolute;\n    top: 100%;\n    transform: translateX(-50%);\n    border: 8px solid transparent;\n  }\n\n  &::after {\n    border-top-color: white;\n    z-index: 2;\n  }\n\n  &::before {\n    border-top-color: #e2e8f0;\n    z-index: 1;\n    margin-top: 1px;\n  }\n"])), function (props) {
+  return props.$isFullscreen ? 2147483647 : 1000;
+}, function (props) {
+  var position = props.$position || 50;
+  var alignment = props.$alignment || 'center';
+  var margin = 20;
+  if (alignment === 'left') {
+    return "\n        left: ".concat(margin, "px;\n        &::after { left: calc(").concat(position, "% - ").concat(margin, "px); }\n        &::before { left: calc(").concat(position, "% - ").concat(margin, "px); }\n      ");
+  } else if (alignment === 'right') {
+    return "\n        right: ".concat(margin, "px;\n        &::after { right: calc(").concat(100 - position, "% - ").concat(margin, "px); }\n        &::before { right: calc(").concat(100 - position, "% - ").concat(margin, "px); }\n      ");
+  } else {
+    return "\n        left: 50%;\n        transform: translateX(-50%);\n        &::after { left: 50%; }\n        &::before { left: 50%; }\n      ";
+  }
+});
 
-var _templateObject$8, _templateObject2$6, _templateObject3$3, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
-var StyledControls = dt.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  width: 100%;\n  border-radius: 0px 0px 8px 8px;\n  background: rgba(86, 90, 98, 0.6);\n  backdrop-filter: blur(4px);\n  padding: 12px 16px;\n  position: relative;\n  opacity: 0.8;\n\n  /* Responsive padding adjustments */\n  @media screen and (max-width: 768px) {\n    padding: 8px 12px;\n    gap: 12px;\n  }\n\n  @media screen and (max-width: 480px) {\n    padding: 6px 8px;\n    gap: 8px;\n  }\n\n  svg {\n    cursor: pointer;\n    transition: transform 0.2s ease, fill 0.2s ease;\n\n    /* Desktop and large screens */\n    @media screen and (min-width: 1501px) {\n      width: 24px;\n      height: 24px;\n    }\n\n    /* Medium to large screens */\n    @media screen and (max-width: 1500px) {\n      width: 20px;\n      height: 20px;\n    }\n\n    /* Small to medium screens */\n    @media screen and (max-width: 1000px) {\n      width: 18px;\n      height: 18px;\n    }\n\n    /* Tablet screens */\n    @media screen and (max-width: 768px) {\n      width: 20px;\n      height: 20px;\n    }\n\n    /* Mobile screens */\n    @media screen and (max-width: 480px) {\n      width: 18px;\n      height: 18px;\n    }\n\n    /* Very small mobile screens */\n    @media screen and (max-width: 320px) {\n      width: 16px;\n      height: 16px;\n    }\n\n    &:hover {\n      transform: scale(1.1);\n      \n      path {\n        fill: ", " !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 _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 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;
   // Handle different theme structures
@@ -78100,7 +78164,7 @@ var StyledControls = dt.div(_templateObject$8 || (_templateObject$8 = _taggedTem
 }, {
   fontStyle: 'descriptor'
 });
-var StyledSlider = dt.input(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral$1(["\n  width: 100%;\n  height: 2px;\n  border-radius: 5px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  background: ", ";\n  outline: none;\n  -webkit-transition: 0.2s;\n  transition: opacity 0.2s;\n  cursor: pointer;\n\n  /* Enhanced mobile touch target */\n  @media (hover: none) and (pointer: coarse) {\n    height: 4px;\n  }\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: ", ";\n    cursor: pointer;\n\n    /* Larger touch target for mobile */\n    @media (hover: none) and (pointer: coarse) {\n      width: 16px;\n      height: 16px;\n    }\n\n    /* Responsive adjustments */\n    @media screen and (max-width: 480px) {\n      width: 14px;\n      height: 14px;\n    }\n  }\n\n  &::-moz-range-thumb {\n    appearance: none;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: ", ";\n    cursor: pointer;\n    border: none;\n\n    /* Larger touch target for mobile */\n    @media (hover: none) and (pointer: coarse) {\n      width: 16px;\n      height: 16px;\n    }\n\n    /* Responsive adjustments */\n    @media screen and (max-width: 480px) {\n      width: 14px;\n      height: 14px;\n    }\n  }\n\n  /* Enhance visibility on focus for accessibility */\n  &:focus {\n    outline: 2px solid var(--brand-colors-accent);\n    outline-offset: 2px;\n  }\n"])), function (_ref2) {
+var StyledSlider = dt.input(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral$1(["\n  width: 100%;\n  height: 2px;\n  border-radius: 5px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  background: ", ";\n  outline: none;\n  -webkit-transition: 0.2s;\n  transition: opacity 0.2s;\n  cursor: pointer;\n\n  /* Enhanced mobile touch target */\n  @media (hover: none) and (pointer: coarse) {\n    height: 4px;\n  }\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: ", ";\n    cursor: pointer;\n\n    /* Larger touch target for mobile */\n    @media (hover: none) and (pointer: coarse) {\n      width: 16px;\n      height: 16px;\n    }\n\n    /* Responsive adjustments */\n    @media screen and (max-width: 480px) {\n      width: 14px;\n      height: 14px;\n    }\n  }\n\n  &::-moz-range-thumb {\n    appearance: none;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: ", ";\n    cursor: pointer;\n    border: none;\n\n    /* Larger touch target for mobile */\n    @media (hover: none) and (pointer: coarse) {\n      width: 16px;\n      height: 16px;\n    }\n\n    /* Responsive adjustments */\n    @media screen and (max-width: 480px) {\n      width: 14px;\n      height: 14px;\n    }\n  }\n\n  /* Enhance visibility on focus for accessibility */\n  &:focus {\n    outline: 2px solid var(--brand-colors-accent);\n    outline-offset: 2px;\n  }\n"])), function (_ref2) {
   var value = _ref2.value,
     theme = _ref2.theme;
   var _a, _b;
@@ -78135,8 +78199,8 @@ var StyledSlider = dt.input(_templateObject2$6 || (_templateObject2$6 = _taggedT
   }
   return 'var(--brand-colors-accent)'; // fallback
 });
-var StyledVolumeWrapper = dt.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral$1(["\n  position: relative;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n\n  /* Responsive gap adjustments */\n  @media screen and (max-width: 768px) {\n    gap: 12px;\n  }\n\n  @media screen and (max-width: 480px) {\n    gap: 8px;\n  }\n\n  & > svg {\n    cursor: pointer;\n  }\n\n  & > input {\n    display: none;\n  }\n\n  &:hover > input {\n    display: block;\n  }\n\n  /* Always show volume slider on touch devices */\n  @media (hover: none) and (pointer: coarse) {\n    & > input {\n      display: block;\n    }\n  }\n\n  /* Hide volume slider on very small screens */\n  @media screen and (max-width: 320px) {\n    & > input {\n      display: none !important;\n    }\n  }\n"])));
-var StyledVolumeSlider = dt.input(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral$1(["\n  width: 100px;\n  height: 4px;\n  border-radius: 5px;\n  background: ", ";\n  outline: none;\n  -webkit-transition: 0.2s;\n  transition: opacity 0.2s;\n  cursor: pointer;\n  justify-content: center;\n  align-items: center;\n\n  /* Responsive width adjustments */\n  @media screen and (max-width: 768px) {\n    width: 80px;\n  }\n\n  @media screen and (max-width: 480px) {\n    width: 60px;\n  }\n\n  @media screen and (max-width: 320px) {\n    width: 50px;\n  }\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: ", ";\n    cursor: pointer;\n\n    /* Responsive thumb size */\n    @media screen and (max-width: 480px) {\n      width: 14px;\n      height: 14px;\n    }\n  }\n\n  &::-moz-range-thumb {\n    appearance: none;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: ", ";\n    cursor: pointer;\n    border: none;\n\n    /* Responsive thumb size */\n    @media screen and (max-width: 480px) {\n      width: 14px;\n      height: 14px;\n    }\n  }\n"])), function (_ref5) {
+var StyledVolumeWrapper = dt.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral$1(["\n  position: relative;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n\n  /* Responsive gap adjustments */\n  @media screen and (max-width: 768px) {\n    gap: 12px;\n  }\n\n  @media screen and (max-width: 480px) {\n    gap: 8px;\n  }\n\n  & > svg {\n    cursor: pointer;\n  }\n\n  & > input {\n    display: none;\n  }\n\n  &:hover > input {\n    display: block;\n  }\n\n  /* Always show volume slider on touch devices */\n  @media (hover: none) and (pointer: coarse) {\n    & > input {\n      display: block;\n    }\n  }\n\n  /* Hide volume slider on very small screens */\n  @media screen and (max-width: 320px) {\n    & > input {\n      display: none !important;\n    }\n  }\n"])));
+var StyledVolumeSlider = dt.input(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral$1(["\n  width: 100px;\n  height: 4px;\n  border-radius: 5px;\n  background: ", ";\n  outline: none;\n  -webkit-transition: 0.2s;\n  transition: opacity 0.2s;\n  cursor: pointer;\n  justify-content: center;\n  align-items: center;\n\n  /* Responsive width adjustments */\n  @media screen and (max-width: 768px) {\n    width: 80px;\n  }\n\n  @media screen and (max-width: 480px) {\n    width: 60px;\n  }\n\n  @media screen and (max-width: 320px) {\n    width: 50px;\n  }\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: ", ";\n    cursor: pointer;\n\n    /* Responsive thumb size */\n    @media screen and (max-width: 480px) {\n      width: 14px;\n      height: 14px;\n    }\n  }\n\n  &::-moz-range-thumb {\n    appearance: none;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: ", ";\n    cursor: pointer;\n    border: none;\n\n    /* Responsive thumb size */\n    @media screen and (max-width: 480px) {\n      width: 14px;\n      height: 14px;\n    }\n  }\n"])), function (_ref5) {
   var value = _ref5.value,
     theme = _ref5.theme;
   var _a, _b;
@@ -78171,13 +78235,13 @@ var StyledVolumeSlider = dt.input(_templateObject4$1 || (_templateObject4$1 = _t
   }
   return 'var(--neutral-colors-light)'; // fallback
 });
-var StyledControllerLeft = dt.div(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex: 1;\n  \n  /* Responsive gap adjustments */\n  @media screen and (max-width: 768px) {\n    gap: 12px;\n  }\n\n  @media screen and (max-width: 480px) {\n    gap: 8px;\n  }\n\n  @media screen and (max-width: 320px) {\n    gap: 6px;\n  }\n\n  /* Hide rewind/forward controls on very small screens */\n  @media screen and (max-width: 480px) {\n    .rewind-control,\n    .forward-control {\n      display: none;\n    }\n  }\n"])));
-var StyledControllerRight = dt.div(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-shrink: 0;\n\n  /* Responsive gap adjustments */\n  @media screen and (max-width: 768px) {\n    gap: 12px;\n  }\n\n  @media screen and (max-width: 480px) {\n    gap: 8px;\n    \n    /* Hide less essential controls on mobile */\n    .skip-control,\n    .favorite-control,\n    .download-control {\n      display: none;\n    }\n  }\n\n  @media screen and (max-width: 320px) {\n    gap: 6px;\n  }\n\n  .skip-icon-disabled {\n    cursor: default;\n\n    & > path {\n      fill: var(--level-dark-300);\n    }\n  }\n"])));
-var StyledTimeTrack = dt.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral$1(["\n  color: #FFFFFF;\n  ", "\n  text-align: right;\n  white-space: nowrap;\n  font-size: 14px;\n  \n  /* Responsive font size adjustments */\n  @media screen and (max-width: 768px) {\n    font-size: 12px;\n  }\n\n  @media screen and (max-width: 480px) {\n    font-size: 11px;\n  }\n\n  @media screen and (max-width: 320px) {\n    font-size: 10px;\n  }\n"])), {
+var StyledControllerLeft = dt.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex: 1;\n  \n  /* Responsive gap adjustments */\n  @media screen and (max-width: 768px) {\n    gap: 12px;\n  }\n\n  @media screen and (max-width: 480px) {\n    gap: 8px;\n  }\n\n  @media screen and (max-width: 320px) {\n    gap: 6px;\n  }\n\n  /* Hide rewind/forward controls on very small screens */\n  @media screen and (max-width: 480px) {\n    .rewind-control,\n    .forward-control {\n      display: none;\n    }\n  }\n"])));
+var StyledControllerRight = dt.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-shrink: 0;\n\n  /* Responsive gap adjustments */\n  @media screen and (max-width: 768px) {\n    gap: 12px;\n  }\n\n  @media screen and (max-width: 480px) {\n    gap: 8px;\n    \n    /* Hide less essential controls on mobile */\n    .skip-control,\n    .favorite-control,\n    .download-control {\n      display: none;\n    }\n  }\n\n  @media screen and (max-width: 320px) {\n    gap: 6px;\n  }\n\n  .skip-icon-disabled {\n    cursor: default;\n\n    & > path {\n      fill: var(--level-dark-300);\n    }\n  }\n"])));
+var StyledTimeTrack = dt.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral$1(["\n  color: #FFFFFF;\n  ", "\n  text-align: right;\n  white-space: nowrap;\n  font-size: 14px;\n  \n  /* Responsive font size adjustments */\n  @media screen and (max-width: 768px) {\n    font-size: 12px;\n  }\n\n  @media screen and (max-width: 480px) {\n    font-size: 11px;\n  }\n\n  @media screen and (max-width: 320px) {\n    font-size: 10px;\n  }\n"])), {
   fontStyle: 'descriptor'
 });
 // Base styles for icon containers
-var BaseIconContainer = dt.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  min-width: 24px;\n  min-height: 24px;\n  border-radius: 4px;\n  transition: background-color 0.2s ease, transform 0.1s ease;\n\n  /* Enhanced touch targets for mobile */\n  @media (hover: none) and (pointer: coarse) {\n    min-width: 32px;\n    min-height: 32px;\n  }\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover {\n    background-color: rgba(255, 255, 255, 0.1);\n    \n    & > svg > path {\n      fill: ", " !important;\n    }\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n\n  /* Focus styles for accessibility */\n  &:focus-visible {\n    outline: 2px solid var(--brand-colors-accent);\n    outline-offset: 2px;\n  }\n"])), function (_ref8) {
+var BaseIconContainer = dt.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  min-width: 24px;\n  min-height: 24px;\n  border-radius: 4px;\n  transition: background-color 0.2s ease, transform 0.1s ease;\n\n  /* Enhanced touch targets for mobile */\n  @media (hover: none) and (pointer: coarse) {\n    min-width: 32px;\n    min-height: 32px;\n  }\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover {\n    background-color: rgba(255, 255, 255, 0.1);\n    \n    & > svg > path {\n      fill: ", " !important;\n    }\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n\n  /* Focus styles for accessibility */\n  &:focus-visible {\n    outline: 2px solid var(--brand-colors-accent);\n    outline-offset: 2px;\n  }\n"])), function (_ref8) {
   var theme = _ref8.theme;
   var _a, _b;
   // Handle different theme structures
@@ -78189,7 +78253,7 @@ var BaseIconContainer = dt.div(_templateObject8 || (_templateObject8 = _taggedTe
   }
   return 'var(--video-player-primary-color, #08C694)'; // fallback
 });
-var StyledHeartIconContainer = dt(BaseIconContainer)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral$1(["\n  /* Additional specific styles if needed */\n"])));
+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 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"])));
@@ -78226,6 +78290,7 @@ var StyledPictureInPictureIconContainer = dt(BaseIconContainer)(_templateObject1
 var StyledVolumeIconContainer = dt(BaseIconContainer)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral$1(["\n  /* Additional specific styles if needed */\n"])));
 var StyledPlayPauseIconContainer = dt(BaseIconContainer)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral$1(["\n  /* Additional specific styles if needed */\n"])));
 var StyledRewindIconContainer = dt(BaseIconContainer)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral$1(["\n  /* Additional specific styles if needed */\n"])));
+var StyledNotesIconContainer = dt(BaseIconContainer)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral$1(["\n  /* Additional specific styles for notes icon */\n"])));
 
 var PLAYBACK_SPEED_LIST = [{
   label: 'playback_speed.2x',
@@ -78351,9 +78416,9 @@ var useMenuToggle = function useMenuToggle() {
   };
 };
 
-var _templateObject$7, _templateObject2$5, _templateObject3$2;
-var StyledPlaybackMenuWrapper = dt.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  position: relative;\n\n  & > svg {\n    cursor: pointer;\n  }\n"])));
-var StyledPlaybackMenu = dt.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  border-radius: 8px;\n  background: #ffffff;\n  box-shadow: 0px 4px 20px 0px rgba(71, 85, 105, 0.12);\n  width: 220px;\n  height: 312px;\n  ", "\n  padding: 8px 16px;\n  transition:\n    opacity 0.3s,\n    visibility 0.3s;\n  overflow: scroll;\n\n  & > h2 {\n    ", "\n    color: #0f172a;\n  }\n\n  @media screen and (max-width: 1500px) {\n    width: 180px;\n    height: 250px;\n    gap: 12px;\n\n    & > h2 {\n      ", "\n      font-weight: 600;\n    }\n  }\n\n  @media screen and (max-width: 1100px) {\n    width: 140px;\n    height: 200px;\n    gap: 8px;\n  }\n"])), function (_ref) {
+var _templateObject$8, _templateObject2$6, _templateObject3$3;
+var StyledPlaybackMenuWrapper = dt.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  position: relative;\n\n  & > svg {\n    cursor: pointer;\n  }\n"])));
+var StyledPlaybackMenu = dt.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  border-radius: 8px;\n  background: #ffffff;\n  box-shadow: 0px 4px 20px 0px rgba(71, 85, 105, 0.12);\n  width: 220px;\n  height: 312px;\n  ", "\n  padding: 8px 16px;\n  transition:\n    opacity 0.3s,\n    visibility 0.3s;\n  overflow: scroll;\n\n  & > h2 {\n    ", "\n    color: #0f172a;\n  }\n\n  @media screen and (max-width: 1500px) {\n    width: 180px;\n    height: 250px;\n    gap: 12px;\n\n    & > h2 {\n      ", "\n      font-weight: 600;\n    }\n  }\n\n  @media screen and (max-width: 1100px) {\n    width: 140px;\n    height: 200px;\n    gap: 8px;\n  }\n"])), function (_ref) {
   var $position = _ref.$position;
   return "\n    ".concat($position.vertical === DropdownVerticalPositionEnum.Top ? 'bottom: calc(100% + 8px);' : 'top: calc(100% + 8px);', "\n    ").concat($position.horizontal === DropdownHorizontalPositionEnum.Left ? 'right: calc(100% + 8px);' : 'left: calc(100% + 8px);', "\n  ");
 }, {
@@ -78361,7 +78426,7 @@ var StyledPlaybackMenu = dt.div(_templateObject2$5 || (_templateObject2$5 = _tag
 }, {
   fontStyle: 'bodyS'
 });
-var StyledPlaybackSpeedItem = dt.p(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral$1(["\n  ", "\n  font-weight: 400;\n  color: #020210;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  transition: 0.6s cubic-bezier(0.79, 0.01, 0.15, 0.99);\n\n  @media screen and (max-width: 1500px) {\n    ", "\n  }\n"])), {
+var StyledPlaybackSpeedItem = dt.p(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral$1(["\n  ", "\n  font-weight: 400;\n  color: #020210;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  transition: 0.6s cubic-bezier(0.79, 0.01, 0.15, 0.99);\n\n  @media screen and (max-width: 1500px) {\n    ", "\n  }\n"])), {
   fontStyle: 'labelM'
 }, {
   fontStyle: 'bodyS'
@@ -78444,7 +78509,8 @@ var Controls = function Controls(_ref) {
     downloadFileName = _ref.downloadFileName,
     onDownload = _ref.onDownload,
     _ref$showPictureInPic = _ref.showPictureInPicture,
-    showPictureInPicture = _ref$showPictureInPic === void 0 ? true : _ref$showPictureInPic;
+    showPictureInPicture = _ref$showPictureInPic === void 0 ? true : _ref$showPictureInPic,
+    onAddNote = _ref.onAddNote;
   var handleDownloadClick = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       var response, blob, blobUrl, link, _link;
@@ -78619,6 +78685,13 @@ var Controls = function Controls(_ref) {
           right: '8px',
           left: 'auto'
         }
+      }), onAddNote && require$$2$2.jsx(CustomTooltip, {
+        title: "Add note",
+        children: require$$2$2.jsx(StyledNotesIconContainer, {
+          children: require$$2$2.jsx(NotesIcon, {
+            onClick: onAddNote
+          })
+        })
       }), subtitle && require$$2$2.jsx(CustomTooltip, {
         title: isSubtitlesChecked ? 'Hide subtitles' : 'Show subtitles',
         children: require$$2$2.jsx(StyledSubtitlesIconContainer, {
@@ -84547,10 +84620,60 @@ var PiPProvider = function PiPProvider(_ref) {
   });
 };
 
+// Default implementation when PiPProvider is not available
+var defaultPiPContext = {
+  isPiPActive: false,
+  pipVideoState: null,
+  enterPiP: function () {
+    var _enterPiP = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            console.warn('PiP functionality requires PiPProvider wrapper');
+            return _context.abrupt("return", false);
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    function enterPiP() {
+      return _enterPiP.apply(this, arguments);
+    }
+    return enterPiP;
+  }(),
+  exitPiP: function () {
+    var _exitPiP = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            console.warn('PiP functionality requires PiPProvider wrapper');
+            return _context2.abrupt("return", false);
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    function exitPiP() {
+      return _exitPiP.apply(this, arguments);
+    }
+    return exitPiP;
+  }(),
+  updateVideoState: function updateVideoState() {
+    console.warn('PiP functionality requires PiPProvider wrapper');
+  },
+  registerVideoElement: function registerVideoElement() {
+    // No-op when provider is not available
+  },
+  unregisterVideoElement: function unregisterVideoElement() {
+    // No-op when provider is not available
+  }
+};
 var usePiP = function usePiP() {
   var context = React.useContext(PiPContext);
   if (context === undefined) {
-    throw new Error('usePiP must be used within a PiPProvider');
+    return defaultPiPContext;
   }
   return context;
 };
@@ -85117,6 +85240,74 @@ var useHLSSubtitles = function useHLSSubtitles(_ref) {
   };
 };
 
+var _templateObject$7, _templateObject2$5, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7, _templateObject8, _templateObject9;
+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) {
+  switch (props.$variant) {
+    case 'primary':
+      return "\n          background-color: #3182ce;\n          color: white;\n          &:hover { background-color: #2c5aa0; }\n        ";
+    case 'danger':
+      return "\n          background-color: #e53e3e;\n          color: white;\n          &:hover { background-color: #c53030; }\n        ";
+    default:
+      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 NoteEditModal = function NoteEditModal(_ref) {
+  var editingTitle = _ref.editingTitle,
+    editingContent = _ref.editingContent,
+    onTitleChange = _ref.onTitleChange,
+    onContentChange = _ref.onContentChange,
+    onCancel = _ref.onCancel,
+    onDelete = _ref.onDelete,
+    onSave = _ref.onSave;
+  return require$$2$2.jsxs(require$$2$2.Fragment, {
+    children: [require$$2$2.jsxs(StyledModalHeader, {
+      children: [require$$2$2.jsx(StyledModalTitle, {
+        children: "Edit Note"
+      }), require$$2$2.jsx(StyledCloseButton, {
+        onClick: onCancel,
+        children: "\xD7"
+      })]
+    }), require$$2$2.jsxs(StyledModalContent, {
+      children: [require$$2$2.jsx(StyledInput, {
+        type: "text",
+        placeholder: "Note title...",
+        value: editingTitle,
+        onChange: onTitleChange
+      }), require$$2$2.jsx(StyledTextarea, {
+        placeholder: "Add your note content...",
+        value: editingContent,
+        onChange: onContentChange
+      })]
+    }), require$$2$2.jsxs(StyledModalFooter, {
+      children: [require$$2$2.jsx(StyledButton, {
+        onClick: onDelete,
+        "$variant": "danger",
+        children: "Delete"
+      }), require$$2$2.jsxs(StyledButtonGroup, {
+        children: [require$$2$2.jsx(StyledButton, {
+          onClick: onCancel,
+          children: "Cancel"
+        }), require$$2$2.jsx(StyledButton, {
+          onClick: onSave,
+          "$variant": "primary",
+          children: "Save"
+        })]
+      })]
+    })]
+  });
+};
+
+var CONTROLS_CHECK_DELAY = 100;
+var MAX_FULLSCREEN_Z_INDEX = 2147483646;
+var MAX_FULLSCREEN_MARKER_Z_INDEX = 2147483647;
 var VideoPlayer = function VideoPlayer(_ref) {
   var customStyles = _ref.customStyles,
     _ref$startTime = _ref.startTime,
@@ -85152,9 +85343,45 @@ var VideoPlayer = function VideoPlayer(_ref) {
     downloadFileName = _ref.downloadFileName,
     onDownload = _ref.onDownload,
     _ref$showPictureInPic = _ref.showPictureInPicture,
-    showPictureInPicture = _ref$showPictureInPic === void 0 ? true : _ref$showPictureInPic;
+    showPictureInPicture = _ref$showPictureInPic === void 0 ? true : _ref$showPictureInPic,
+    notes = _ref.notes,
+    videoDuration = _ref.videoDuration,
+    onNoteClick = _ref.onNoteClick,
+    editingNote = _ref.editingNote,
+    onNoteEdit = _ref.onNoteEdit,
+    onNoteSave = _ref.onNoteSave,
+    onNoteDelete = _ref.onNoteDelete,
+    onNoteCancelEdit = _ref.onNoteCancelEdit,
+    onAddNote = _ref.onAddNote;
   var _a, _b, _c;
   var videoRef = React.useRef(null);
+  var containerRef = React.useRef(null);
+  var observerRef = React.useRef(null);
+  var overlayRef = React.useRef(null);
+  var hideTimeoutRef = React.useRef(null);
+  // Notes state
+  var _useState = React.useState(null),
+    _useState2 = _slicedToArray$1(_useState, 2),
+    hoveredNote = _useState2[0],
+    setHoveredNote = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray$1(_useState3, 2),
+    areControlsVisible = _useState4[0],
+    setAreControlsVisible = _useState4[1];
+  var _useState5 = React.useState(null),
+    _useState6 = _slicedToArray$1(_useState5, 2),
+    internalEditingNote = _useState6[0],
+    setInternalEditingNote = _useState6[1];
+  var _useState7 = React.useState(''),
+    _useState8 = _slicedToArray$1(_useState7, 2),
+    editingTitle = _useState8[0],
+    setEditingTitle = _useState8[1];
+  var _useState9 = React.useState(''),
+    _useState10 = _slicedToArray$1(_useState9, 2),
+    editingContent = _useState10[0],
+    setEditingContent = _useState10[1];
+  // Use external editing state if provided, otherwise use internal state
+  var currentEditingNote = editingNote !== undefined ? editingNote : internalEditingNote;
   var _usePlayerControls = usePlayerControls({
       startTime: startTime,
       setLoading: setLoading,
@@ -85166,7 +85393,6 @@ var VideoPlayer = function VideoPlayer(_ref) {
       shouldPlayerBeFocusedOnSpaceClick: shouldPlayerBeFocusedOnSpaceClick
     }),
     mouseMoveHandler = _usePlayerControls.mouseMoveHandler,
-    playerContainerRef = _usePlayerControls.playerContainerRef,
     playPauseHandler = _usePlayerControls.playPauseHandler,
     handleFullScreen = _usePlayerControls.handleFullScreen,
     handlePictureInPicture = _usePlayerControls.handlePictureInPicture,
@@ -85198,12 +85424,302 @@ var VideoPlayer = function VideoPlayer(_ref) {
     isControlsActive = _usePlayerControls.isControlsActive,
     currentSubtitle = _usePlayerControls.currentSubtitle,
     setCurrentSubtitle = _usePlayerControls.setCurrentSubtitle;
+  // Handle adding new notes
+  var handleAddNote = React.useCallback(function () {
+    var _a;
+    if (onAddNote) {
+      onAddNote();
+    } else {
+      // Create a new note at current time 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()),
+        moment: currentTime,
+        title: '',
+        description: ''
+      };
+      setInternalEditingNote(newNote);
+      setEditingTitle('');
+      setEditingContent('');
+    }
+  }, [onAddNote]);
   var _useHLSSubtitles = useHLSSubtitles({
       videoPlayerRef: videoPlayerRef,
       isSubtitlesChecked: isSubtitlesChecked,
       setCurrentSubtitle: setCurrentSubtitle
     }),
     setupHLSSubtitleTracking = _useHLSSubtitles.setupHLSSubtitleTracking;
+  // Notes functionality
+  var noteMarkers = React.useMemo(function () {
+    if (!videoDuration || videoDuration === 0 || !notes) return [];
+    var markers = notes === null || notes === void 0 ? void 0 : notes.map(function (note) {
+      return {
+        id: note.id,
+        title: note.title,
+        moment: note.moment,
+        position: note.moment / videoDuration * 100
+      };
+    });
+    return markers;
+  }, [notes, videoDuration]);
+  var handleNoteClick = React.useCallback(function (note) {
+    if (onNoteEdit) {
+      onNoteEdit(note);
+    } else {
+      setInternalEditingNote(note);
+      setEditingTitle(note.title);
+      setEditingContent(note.description || '');
+    }
+    if (onNoteClick) {
+      onNoteClick(note);
+    }
+  }, [onNoteClick, onNoteEdit]);
+  var handleSaveNote = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (currentEditingNote) {
+              _context2.next = 2;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 2:
+            if (!onNoteSave) {
+              _context2.next = 5;
+              break;
+            }
+            _context2.next = 5;
+            return onNoteSave(currentEditingNote.id, editingTitle.trim(), editingContent.trim());
+          case 5:
+            // Clear editing state
+            if (onNoteCancelEdit) {
+              onNoteCancelEdit();
+            } else {
+              setInternalEditingNote(null);
+              setEditingTitle('');
+              setEditingContent('');
+            }
+          case 6:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function handleSaveNote() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var handleCancelEdit = function handleCancelEdit() {
+    if (onNoteCancelEdit) {
+      onNoteCancelEdit();
+    } else {
+      setInternalEditingNote(null);
+      setEditingTitle('');
+      setEditingContent('');
+    }
+  };
+  var handleDeleteNote = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            if (currentEditingNote) {
+              _context3.next = 2;
+              break;
+            }
+            return _context3.abrupt("return");
+          case 2:
+            if (!onNoteDelete) {
+              _context3.next = 5;
+              break;
+            }
+            _context3.next = 5;
+            return onNoteDelete(currentEditingNote.id);
+          case 5:
+            handleCancelEdit();
+          case 6:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return function handleDeleteNote() {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  var renderNoteEditModal = function renderNoteEditModal() {
+    if (!currentEditingNote) return null;
+    var noteMarker = noteMarkers === null || noteMarkers === void 0 ? void 0 : noteMarkers.find(function (marker) {
+      return marker.id === currentEditingNote.id;
+    });
+    var notePosition = (noteMarker === null || noteMarker === void 0 ? void 0 : noteMarker.position) || 0;
+    var modalAlignment = 'center';
+    if (notePosition < 25) {
+      modalAlignment = 'left';
+    } else if (notePosition > 75) {
+      modalAlignment = 'right';
+    }
+    var modalJSX = require$$2$2.jsx(StyledNoteModal, {
+      "$isFullscreen": isFullscreen,
+      "$position": notePosition,
+      "$alignment": modalAlignment,
+      children: require$$2$2.jsx(NoteEditModal, {
+        isFullscreen: isFullscreen,
+        note: currentEditingNote,
+        notePosition: notePosition,
+        alignment: modalAlignment,
+        editingTitle: editingNote ? currentEditingNote.title : editingTitle,
+        editingContent: editingNote ? currentEditingNote.description || '' : editingContent,
+        onTitleChange: function onTitleChange(e) {
+          return setEditingTitle(e.target.value);
+        },
+        onContentChange: function onContentChange(e) {
+          return setEditingContent(e.target.value);
+        },
+        onCancel: handleCancelEdit,
+        onDelete: handleDeleteNote,
+        onSave: handleSaveNote
+      })
+    });
+    // In fullscreen, render the modal inside the fullscreen element
+    if (isFullscreen && document.fullscreenElement) {
+      return /*#__PURE__*/ReactDOM.createPortal(modalJSX, document.fullscreenElement);
+    }
+    return modalJSX;
+  };
+  var renderNotesOverlay = function renderNotesOverlay() {
+    if (!noteMarkers || noteMarkers.length === 0) return null;
+    var shouldShowControls = areControlsVisible || isFullscreen;
+    var cssClass = shouldShowControls ? 'controls-visible' : '';
+    // Use absolute positioning relative to fullscreen element
+    var fullscreenStyle = {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 42,
+      top: 'auto',
+      height: 6,
+      zIndex: MAX_FULLSCREEN_Z_INDEX,
+      width: '100%'
+    };
+    var overlayJSX = require$$2$2.jsx(StyledNoteMarkersOverlay, {
+      ref: overlayRef,
+      className: cssClass,
+      "$isFullscreen": isFullscreen,
+      style: _objectSpread2$1({
+        opacity: shouldShowControls ? 1 : 0,
+        visibility: shouldShowControls ? 'visible' : 'hidden'
+      }, isFullscreen ? fullscreenStyle : {}),
+      children: noteMarkers.map(function (marker) {
+        var note = notes === null || notes === void 0 ? void 0 : notes.find(function (n) {
+          return n.id === marker.id;
+        });
+        if (!note) return null;
+        return require$$2$2.jsx(StyledNoteMarker, {
+          "$position": marker.position,
+          "$isFullscreen": isFullscreen,
+          onMouseEnter: function onMouseEnter() {
+            return setHoveredNote(note);
+          },
+          onMouseLeave: function onMouseLeave() {
+            return setHoveredNote(null);
+          },
+          onClick: function onClick() {
+            return handleNoteClick(note);
+          },
+          title: note.title,
+          style: {
+            opacity: 1,
+            visibility: 'visible',
+            backgroundColor: '#ffd700',
+            zIndex: isFullscreen ? MAX_FULLSCREEN_MARKER_Z_INDEX : 20,
+            position: 'absolute',
+            left: "".concat(marker.position, "%"),
+            bottom: isFullscreen ? 0 : undefined,
+            transform: 'translateX(-50%)',
+            width: isFullscreen ? 12 : undefined,
+            height: isFullscreen ? 12 : undefined
+          },
+          children: (hoveredNote === null || hoveredNote === void 0 ? void 0 : hoveredNote.id) === note.id && require$$2$2.jsxs(StyledNoteTooltip, {
+            children: [require$$2$2.jsx("div", {
+              children: note.title.length > 25 ? "".concat(note.title.substring(0, 25), "...") : note.title
+            }), require$$2$2.jsx(StyledNoteTime, {
+              children: FormatSecondsToTimeString(note.moment)
+            })]
+          })
+        }, marker.id);
+      })
+    });
+    // Render inside the actual fullscreen element subtree so it's visible
+    if (isFullscreen && document.fullscreenElement) {
+      return /*#__PURE__*/ReactDOM.createPortal(overlayJSX, document.fullscreenElement);
+    }
+    return overlayJSX;
+  };
+  // Track controls visibility for notes (when not in fullscreen mode)
+  React.useEffect(function () {
+    var handleControlsToggle = function handleControlsToggle() {
+      // Show notes initially when controls become visible (non-fullscreen mode)
+      if (!isFullscreen) {
+        // Clear any existing hide timeout
+        if (hideTimeoutRef.current) {
+          clearTimeout(hideTimeoutRef.current);
+          hideTimeoutRef.current = null;
+        }
+      }
+    };
+    handleControlsToggle();
+  }, [areControlsVisible, isFullscreen]);
+  // Observe the video player controls visibility
+  React.useEffect(function () {
+    if (!containerRef.current) return;
+    var container = containerRef.current;
+    var checkControlsVisibility = function checkControlsVisibility() {
+      // Look for the controls element using various selectors
+      var controlsSelectors = ['[class*="StyledControlsContainer"]', '[class*="Controls"]', '[class*="controls"]', 'div[style*="visibility"]'];
+      var controlsElement = null;
+      for (var _i = 0, _controlsSelectors = controlsSelectors; _i < _controlsSelectors.length; _i++) {
+        var selector = _controlsSelectors[_i];
+        controlsElement = container.querySelector(selector);
+        if (controlsElement) break;
+      }
+      if (controlsElement) {
+        var style = window.getComputedStyle(controlsElement);
+        var isVisible = style.visibility === 'visible';
+        setAreControlsVisible(isVisible);
+      }
+    };
+    // Create MutationObserver to watch for style changes
+    observerRef.current = new MutationObserver(function () {
+      checkControlsVisibility();
+    });
+    // Observe the entire container for style changes
+    observerRef.current.observe(container, {
+      attributes: true,
+      subtree: true,
+      attributeFilter: ['style', 'class']
+    });
+    // Also listen for mouse events to trigger checks
+    var handleMouseMove = function handleMouseMove() {
+      setAreControlsVisible(true);
+      checkControlsVisibility();
+    };
+    var handleMouseLeave = function handleMouseLeave() {
+      setTimeout(checkControlsVisibility, CONTROLS_CHECK_DELAY);
+    };
+    container.addEventListener('mousemove', handleMouseMove);
+    container.addEventListener('mouseleave', handleMouseLeave);
+    // Initial check
+    setTimeout(checkControlsVisibility, CONTROLS_CHECK_DELAY);
+    return function () {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+      container.removeEventListener('mousemove', handleMouseMove);
+      container.removeEventListener('mouseleave', handleMouseLeave);
+    };
+  }, []);
   React.useEffect(function () {
     var cleanup = injectHLSSubtitleStyles();
     return cleanup;
@@ -85218,9 +85734,9 @@ var VideoPlayer = function VideoPlayer(_ref) {
     }
   };
   return require$$2$2.jsxs(StyledWrapper, {
+    ref: containerRef,
     tabIndex: 0,
     onMouseMove: mouseMoveHandler,
-    ref: playerContainerRef,
     style: customStyles,
     onClick: function onClick(e) {
       return e.stopPropagation();
@@ -85315,9 +85831,10 @@ var VideoPlayer = function VideoPlayer(_ref) {
         downloadUrl: downloadUrl,
         downloadFileName: downloadFileName,
         onDownload: onDownload,
-        showPictureInPicture: showPictureInPicture
+        showPictureInPicture: showPictureInPicture,
+        onAddNote: handleAddNote
       })
-    })]
+    }), renderNotesOverlay(), renderNoteEditModal()]
   });
 };
 
@@ -90778,6 +91295,7 @@ exports.MoreVertRoundedIcon = MoreVertRoundedIcon;
 exports.MyProfile = MyProfile;
 exports.NavigationBar = NavigationBar;
 exports.NewFilter = NewFilter;
+exports.NotesIcon = NotesIcon;
 exports.Notification = Notification;
 exports.NotificationsOutlined = NotificationsOutlined$1;
 exports.OndemandVideoIcon = OndemandVideoIcon;