1946.268c100a.chunk.js

"use strict";(self.webpackChunkacellus=self.webpackChunkacellus||[]).push([[1946],{82367:function(e,t,o){o.d(t,{r:function(){return l}});var r,a=o(47313),p=["title","titleId"];function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},s.apply(this,arguments)}function i(e,t){if(null==e)return{};var o,r,a=function(e,t){if(null==e)return{};var o,r,a={},p=Object.keys(e);for(r=0;r<p.length;r++)o=p[r],t.indexOf(o)>=0||(a[o]=e[o]);return a}(e,t);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(e);for(r=0;r<p.length;r++)o=p[r],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(a[o]=e[o])}return a}function n(e,t){var o=e.title,n=e.titleId,l=i(e,p);return a.createElement("svg",s({fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:"w-6 h-6",ref:t,"aria-labelledby":n},l),o?a.createElement("title",{id:n},o):null,r||(r=a.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"})))}var l=a.forwardRef(n);o.p},44713:function(e,t,o){o.d(t,{Z:function(){return u}});var r,a=o(30168),p=o(29439),s=o(43681),i=o(47313),n=o(90628),l=o(58229),c=o(58467),d=o(60199),h=o(46417);function u(e){var t=e.acellusIDs,o=e.stackLength,r=(0,i.useState)(null),a=(0,p.Z)(r,2),s=a[0],u=a[1];return(0,i.useEffect)((function(){var e=new AbortController,r=null===t||void 0===t?void 0:t.slice(0,o).map((function(t){return{acellusID:t,data:Promise.all([d.Z.get(t,e.signal).catch((function(){})),d.Z.getProfileImg(t,void 0,e.signal).catch((function(){}))])}}));return u(r),function(){return e.abort()}}),[t,o]),(0,h.jsx)(m,{children:null===s||void 0===s?void 0:s.map((function(e){var t=e.acellusID,o=e.data;return(0,h.jsx)(i.Suspense,{fallback:(0,h.jsx)(n.Z,{}),children:(0,h.jsx)(c.KP,{resolve:o,children:function(e){var t=(0,p.Z)(e,2),o=t[0],r=t[1];return(0,h.jsx)(n.Z,{name:(0,l.Pp)(o),url:r})}})},t)}))})}var m=s.Z.div(r||(r=(0,a.Z)(["\n  ","\n  > *:not(:first-child) {\n    ","\n  }\n"])),{display:"flex",flexDirection:"row-reverse"},{marginRight:"-1.25rem"})},94414:function(e,t,o){o.d(t,{wA:function(){return Ie},t7:function(){return Me},dk:function(){return ze},Fp:function(){return Le},OT:function(){return Ae},Lj:function(){return Fe},ZP:function(){return Ee}});var r,a,p,s=o(1413),i=o(29439),n=o(43681),l=o(47012),c=o(50280),d=o(48351),h=o(47313),u=o.p+"static/media/sample.d597a2047e0c53a7f95d.pdf",m=o(82367),g=o(62384),y=o(30168),x=o(30686),b=o(31222),w=o(67134),f=o(60106),v=o(11360),j=o(58229),T=o(72159),S=o(46417);function D(e){var t=(0,i.Z)(e.startDateState,2),o=t[0],r=t[1],a=(0,i.Z)(e.endDateState,2),p=a[0],s=a[1],n=e.minDate,c=e.maxDate,d=e.dateTextStyles,u=e.dateButtonStyles,m=new Date,g=(0,h.useState)(new Date((c||m).getFullYear(),(c||m).getMonth()-1)),y=(0,i.Z)(g,2),x=y[0],b=y[1],w=(0,h.useMemo)((function(){return new Date(x.getFullYear(),x.getMonth()+1)}),[x]),D=(0,h.useMemo)((function(){return new Date(x.getFullYear(),x.getMonth()-1)}),[x]),K=(0,h.useMemo)((function(){return new Date(x.getFullYear(),x.getMonth()+2)}),[x]),q=(0,h.useMemo)((function(){return(0,v.eJ)(x.getMonth(),x.getFullYear())}),[x]);console.log("current calender",q),console.log("currentDate",x);var $=(0,h.useMemo)((function(){return(0,v.eJ)(w.getMonth(),w.getFullYear())}),[w]),_=(0,h.useMemo)((function(){return(0,v.eJ)(D.getMonth(),D.getFullYear())}),[D]),Q=(0,h.useMemo)((function(){return(0,v.eJ)(K.getMonth(),K.getFullYear())}),[K]),ee=(0,h.useState)(0),te=(0,i.Z)(ee,2),oe=te[0],re=te[1],ae=(0,f.Z)("md"),pe=(0,h.useRef)(),se=function(e){return e.toLocaleString("en-US",{month:"short"})},ie=function(e){return e&&(c&&e>c?e=c:n&&e<n&&(e=n)),r(e),(0,v.zL)(Se.current.value=e?(0,v.sX)(e):null)},ne=function(e){return e&&(c&&e>c?e=c:n&&e<n&&(e=n)),s(e),(0,v.zL)(Te.current.value=e?(0,v.sX)(e):null)},le=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;if(e){if(e instanceof Date)return b(new Date(e.getFullYear(),e.getMonth()+t));re((function(t){return t+e})),pe.current=setTimeout((function(){b((function(t){return new Date(t.getFullYear(),t.getMonth()+e)})),re(0)}),300)}},ce=function(e){o&&!p?o>e?(ne(o),ie(e)):ne(e):!o&&p?e>p?(ie(p),ne(e)):ie(e):(ne(null),ie(e))},de=(0,h.useRef)(),he=(0,h.useState)(),ue=(0,i.Z)(he,2),me=ue[0],ge=ue[1],ye=(0,h.useState)(),xe=(0,i.Z)(ye,2),be=xe[0],we=xe[1],fe=me||!p&&o||!o&&p||void 0,ve=fe>=be?be:fe,je=fe>=be?fe:be,Te=(0,h.useRef)(),Se=(0,h.useRef)(),De=(0,f.Z)("xs"),Ne=De?["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]:["S","M","T","W","Th","F","Sa"],ke=function(e){ge(de.current=e)},Ce=function(e,t){de.current.getTime()!==t.getTime()&&(ie(de.current<t?de.current:t),ne(de.current>=t?de.current:t),e.focus())},Ze=function(e){fe&&we(e)},Re=function(e){var t="BUTTON"===e.target.nodeName?e.target:e.target.closest(".date");if(t){e.stopPropagation();var o=(0,v.zL)(t.dataset.date);ke(o)}},Pe=function(e){var t=document.elementFromPoint(e.changedTouches[0].clientX,e.changedTouches[0].clientY),o="BUTTON"===t.nodeName?t:t.closest(".date");if(o){e.stopPropagation();var r=(0,v.zL)(o.dataset.date);Ce(o,r)}},Ee=function(){ie(null),ne(null),le(new Date(m.getFullYear(),m.getMonth()-1))};(0,h.useEffect)((function(){return(0,j.Oo)("mouseup",(function(){ge(null),we(null)}))}),[]);var Ae=function(e){if(!e.key||"Enter"===e.key){var t,o,r,a=Se.current,p=Te.current,s=e.target.value?(0,v.zL)(e.target.value):null,i=a.value?(0,v.zL)(a.value):null,n=p.value?(0,v.zL)(p.value):null;if(i||n)n&&i&&(n<i||i>n)&&(i=n=s),i=ie(i),(n=ne(n))&&s>n?s=n:i&&s<i&&(s=i),le(s,(null===(t=i)||void 0===t?void 0:t.getMonth())!==(null===(o=n)||void 0===o?void 0:o.getMonth())&&s.getTime()===(null===(r=n)||void 0===r?void 0:r.getTime())?-1:0)}};return(0,S.jsx)(l.J,{as:h.Fragment,children:(0,S.jsxs)(k,{children:[(0,S.jsxs)(C,{children:[(0,S.jsx)(T.II,{labelText:"From",type:"date",value:o?(0,v.sX)(o):""}),(0,S.jsx)(T.II,{labelText:"To",type:"date",value:p?(0,v.sX)(p):""})]}),(0,S.jsx)(Z,{onClick:Ee,children:"Clear"}),(0,S.jsxs)(R,{children:[(0,S.jsxs)(F,{children:[(0,S.jsxs)(I,{children:[(0,S.jsx)(T.II,{ref:Se,name:"startDate",labelText:"From",type:"date",defaultValue:o?(0,v.sX)(o):"",onKeyDown:Ae,onBlur:Ae,onFocus:function(e){return e.target.value&&le((0,v.zL)(e.target.value))}}),(0,S.jsx)(T.II,{ref:Te,name:"endDate",labelText:"To",type:"date",defaultValue:p?(0,v.sX)(p):"",onKeyDown:Ae,onBlur:Ae,onFocus:function(e){var t=Se.current,o=Te.current,r=t.value?(0,v.zL)(t.value):null,a=o.value?(0,v.zL)(o.value):null;e.target.value&&le((0,v.zL)(e.target.value),(null===r||void 0===r?void 0:r.getMonth())!==(null===a||void 0===a?void 0:a.getMonth())?-1:0)}}),(0,S.jsx)(L,{onClick:Ee,children:"Clear"})]}),ae&&(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(U,{children:(0,S.jsxs)(O,{position:oe,children:[(0,S.jsxs)(V,{children:[De?(0,v.Nf)(D.getMonth()):se(D)," ",D.getFullYear()]}),(0,S.jsxs)(V,{children:[De?(0,v.Nf)(x.getMonth()):se(x)," ",x.getFullYear()]}),(0,S.jsxs)(V,{children:[De?(0,v.Nf)(w.getMonth()):se(w)," ",w.getFullYear()]}),(0,S.jsxs)(V,{children:[De?(0,v.Nf)(K.getMonth()):se(K)," ",K.getFullYear()]})]})}),(0,S.jsx)(H,{position:oe,children:[1,2,3,4].map((function(e){return(0,S.jsx)(Y,{children:(0,S.jsx)(X,{children:Ne.map((function(e){return(0,S.jsx)(J,{children:e})}))},e)})}))})," "]}),(0,S.jsx)(M,{onClick:function(){return le(-1)},tabIndex:-1,children:(0,S.jsx)(z,{})}),(0,S.jsx)(W,{onClick:function(){return le(1)},tabIndex:-1,children:(0,S.jsx)(B,{})})]}),(0,S.jsxs)(A,{id:"calender wrapper",position:oe,md:ae,children:[!ae&&(0,S.jsxs)(S.Fragment,{children:[(0,S.jsxs)(V,{children:[De?(0,v.Nf)(D.getMonth()):se(D)," ",D.getFullYear()]}),(0,S.jsx)(Y,{children:(0,S.jsx)(X,{children:Ne.map((function(e){return(0,S.jsx)(J,{children:e})}))})})]}),(0,S.jsx)(G,{id:" prev calender",children:_.map((function(e,t){var r=e.date,a=e.active,s=e.past,i=e.future;return(0,S.jsx)(N,{index:t,date:r,active:a,highlight:ve&&je&&ve<=r&&r<=je,startDate:o,endDate:p,dragStart:ve,dragEnd:je,dateButtonStyles:u,dateTextStyles:d,disabled:n&&r<n||c&&r>c||!a,past:s,future:i},(0,v.sX)(r))}))}),!ae&&(0,S.jsxs)(S.Fragment,{children:[(0,S.jsxs)(V,{children:[De?(0,v.Nf)(x.getMonth()):se(x)," ",x.getFullYear()]}),(0,S.jsx)(Y,{children:(0,S.jsx)(X,{children:Ne.map((function(e){return(0,S.jsx)(J,{children:e})}))})})]}),(0,S.jsx)(G,{id:"current calender",onTouchStart:Re,onTouchEnd:Pe,children:q.map((function(e,t){var r=e.date,a=e.active,s=e.past;e.future;return(0,S.jsx)(N,{index:t,date:r,active:a,highlight:ve&&je&&ve<=r&&r<=je,startDate:o,endDate:p,dragStart:ve,dragEnd:je,onDragEnd:Ce,onDragStart:ke,onDragHover:Ze,onSelectDate:ce,dateButtonStyles:u,dateTextStyles:d,disabled:n&&r<n||c&&r>c||!a,past:s},(0,v.sX)(r))}))}),!ae&&(0,S.jsxs)(S.Fragment,{children:[(0,S.jsxs)(V,{children:[De?(0,v.Nf)(w.getMonth()):se(w)," ",w.getFullYear()]}),(0,S.jsx)(Y,{children:(0,S.jsx)(X,{children:Ne.map((function(e){return(0,S.jsx)(J,{children:e})}))})})]}),(0,S.jsx)(G,{id:" right calender",onTouchStart:Re,onTouchEnd:Pe,children:$.map((function(e,t){var r=e.date,a=e.active,s=e.past,i=e.future;return(0,S.jsx)(N,{index:t,date:r,active:a,highlight:ve&&je&&ve<=r&&r<=je,startDate:o,endDate:p,dragStart:ve,dragEnd:je,onDragEnd:Ce,onDragStart:ke,onDragHover:Ze,onSelectDate:ce,dateButtonStyles:u,dateTextStyles:d,disabled:n&&r<n||c&&r>c||!a,past:s,future:i},(0,v.sX)(r))}))}),!ae&&(0,S.jsxs)(S.Fragment,{children:[(0,S.jsxs)(V,{children:[De?(0,v.Nf)(K.getMonth()):se(K)," ",K.getFullYear()]}),(0,S.jsx)(Y,{children:(0,S.jsx)(X,{children:Ne.map((function(e){return(0,S.jsx)(J,{children:e})}))})})]}),(0,S.jsx)(G,{id:" prev calender",children:Q.map((function(e,t){var r=e.date,a=e.active,s=e.past,i=e.future;return(0,S.jsx)(N,{index:t,date:r,active:a,startDate:o,endDate:p,dragStart:ve,dragEnd:je,dateButtonStyles:u,dateTextStyles:d,disabled:n&&r<n||c&&r>c||!a,past:s,future:i},(0,v.sX)(r))}))})]}),(0,S.jsx)(P,{children:(0,S.jsx)(E,{children:"Done"})})]})]})})}function N(e){e.index;var t=e.date,o=e.active,r=e.disabled,a=e.startDate,p=e.endDate,s=e.dragStart,i=e.dragEnd,n=e.onDragStart,l=e.onDragEnd,c=e.onDragHover,d=e.onSelectDate,h=e.dateButtonStyles,u=e.dateTextStyles,m=e.past,g=e.future,y=a&&p&&a<=t&&t<=p,x=s&&i&&s<=t&&t<=i,b=(t.getTime()===(null===i||void 0===i?void 0:i.getTime()))-(t.getTime()===(null===s||void 0===s?void 0:s.getTime())),w=(t.getTime()===(null===p||void 0===p?void 0:p.getTime()))-(t.getTime()===(null===a||void 0===a?void 0:a.getTime())),f=b||w;return console.log(y,"inRange"),(0,S.jsx)(K,{className:"group date".concat(y?" selected":""),"data-date":(0,v.sX)(t),selected:y,edge:f,highlight:x&&t.getTime(),active:o,tabIndex:o?void 0:-1,onClick:function(){return d(t)},onMouseDown:function(){return n(t)},onMouseEnter:function(){return c(t)},onMouseUp:function(e){return l("BUTTON"===e.target.nodeName?e.target:e.target.closest("button"),t)},disabled:r,customStyles:h,children:(0,S.jsx)(q,{className:y?" selected":void 0,highlight:x,selected:y,edge:f,active:o,disabled:r,customStyles:u,today:!g&&!m,children:t.getDate()})})}var k=n.Z.div({display:"flex",width:"100%",justifyContent:"center","@media (min-width: 768px)":{position:"relative"}}),C=(0,n.Z)(l.J.Button)({display:"flex",width:"100%",flexDirection:"column",gap:"1.25rem","@media (min-width: 768px)":{flexDirection:"row"}}),Z=n.Z.button({position:"absolute",right:"0px",top:"2rem",fontSize:"1.4rem","--tw-text-opacity":"1",color:"rgb(83 126 220 / var(--tw-text-opacity))","@media (min-width: 768px)":{top:"0px"}}),R=(0,n.Z)(l.J.Panel)((function(e){var t=e.close;return[{position:"absolute",top:"7rem",zIndex:"1",display:"flex",height:"92%",width:"100%",flexDirection:"column",overflowY:"hidden",borderRadius:"0.75rem",borderWidth:"1px","--tw-border-opacity":"1",borderColor:"rgb(209 213 219 / var(--tw-border-opacity))","--tw-bg-opacity":"1",backgroundColor:"rgb(255 255 255 / var(--tw-bg-opacity))",paddingTop:"0.5rem","--tw-shadow":"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)","--tw-shadow-colored":"0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color)",boxShadow:"var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",transitionProperty:"all",transitionTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)",transitionDuration:"150ms","@media (min-width: 768px)":{top:"0px",height:"auto",overflowX:"hidden"}},(0,x.iv)(r||(r=(0,y.Z)(["\n    animation: fadeInCus 0.3s ease-in;\n    @keyframes fadeInCus {\n      0% {\n        opacity: 0;\n      }\n      100% {\n        opacity: 1;\n      }\n    }\n  "]))),t?{display:"none"}:{display:"flex"}]})),P=(0,n.Z)(l.J.Button)({position:"fixed",bottom:"1rem",width:"50%",alignSelf:"center",borderRadius:"9999px","--tw-bg-opacity":"1",backgroundColor:"rgb(83 126 220 / var(--tw-bg-opacity))",padding:"1rem","--tw-text-opacity":"1",color:"rgb(255 255 255 / var(--tw-text-opacity))",":hover":{"--tw-bg-opacity":"1",backgroundColor:"rgb(162 187 236 / var(--tw-bg-opacity))"},"@media (min-width: 768px)":{display:"none"}}),E=n.Z.p({"--tw-text-opacity":"1",color:"rgb(255 255 255 / var(--tw-text-opacity))"}),A=n.Z.div((function(e){var t=e.position,o=e.md;return[{position:"relative",zIndex:"-10",marginTop:"9rem",display:"flex",flexDirection:"column",justifyContent:"center","> :not([hidden]) ~ :not([hidden])":{"--tw-divide-x-reverse":"1",borderRightWidth:"calc(1px * var(--tw-divide-x-reverse))",borderLeftWidth:"calc(1px * calc(1 - var(--tw-divide-x-reverse)))"},whiteSpace:"nowrap","@media (min-width: 768px)":{marginTop:"0px",display:"inline",width:"50%"}},o?0===t:1===t,o?(0,x.iv)(a||(a=(0,y.Z)(["\n        transform: translateX(","%);\n      "])),100*-t-100):(0,x.iv)(p||(p=(0,y.Z)(["\n        transform: translatey(","%);\n      "])),0*t-0),0===t?{transitionProperty:"none"}:{transitionProperty:"transform",transitionTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)",transitionDuration:"300ms"}]})),F=n.Z.div({display:"flex",flexDirection:"column"}),I=n.Z.div({position:"fixed",top:"7rem",display:"flex",width:"100%",gap:"1.25rem",paddingLeft:"1rem",paddingRight:"1rem",paddingTop:"2rem","--tw-backdrop-blur":"blur(8px)",backdropFilter:"var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)","@media (min-width: 768px)":{position:"relative",top:"0px"}}),L=(0,n.Z)(Z)({right:"1rem"}),M=n.Z.button({position:"fixed",left:"1rem",top:"17rem",display:"flex",flexDirection:"row",alignItems:"center",borderRadius:"9999px",borderWidth:"1px","--tw-border-opacity":"1",borderColor:"rgb(229 231 235 / var(--tw-border-opacity))",padding:"0.5rem","--tw-shadow":"0 1px 2px 0 rgb(0 0 0 / 0.05)","--tw-shadow-colored":"0 1px 2px 0 var(--tw-shadow-color)",boxShadow:"var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)","--tw-backdrop-blur":"blur(8px)",backdropFilter:"var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)",":hover":{"--tw-bg-opacity":"1",backgroundColor:"rgb(229 231 235 / var(--tw-bg-opacity))","--tw-drop-shadow":"drop-shadow(0 25px 25px rgb(0 0 0 / 0.15))",filter:"var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)",transitionProperty:"color, background-color, border-color, text-decoration-color, fill, stroke",transitionTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)",transitionDuration:"300ms"},"@media (min-width: 640px)":{padding:"0.75rem"},"@media (min-width: 768px)":{position:"absolute",top:"11rem"}}),z=(0,n.Z)(b.r)({width:"1.25rem","--tw-rotate":"90deg",transform:"translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))",borderRadius:"9999px",stroke:"#374151",strokeWidth:"2","@media (min-width: 768px)":{"--tw-rotate":"-0deg",transform:"translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))"}}),W=(0,n.Z)(M)({left:"auto",right:"1rem"}),B=(0,n.Z)(w.r)({width:"1.25rem","--tw-rotate":"90deg",transform:"translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))",borderRadius:"9999px",stroke:"#374151",strokeWidth:"2","@media (min-width: 768px)":{"--tw-rotate":"-0deg",transform:"translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))"}}),O=(0,n.Z)(A)({zIndex:"0"}),V=n.Z.span({display:"inline-flex",width:"100%",justifyContent:"center",whiteSpace:"nowrap",paddingTop:"1rem",paddingBottom:"1rem",fontSize:"1.4rem",fontWeight:"700","--tw-text-opacity":"1",color:"rgb(31 41 55 / var(--tw-text-opacity))","@media (min-width: 768px)":{fontSize:"1.6rem"}}),H=(0,n.Z)(A)({zIndex:"0","> :not([hidden]) ~ :not([hidden])":{"--tw-divide-x-reverse":"0",borderRightWidth:"calc(0px * var(--tw-divide-x-reverse))",borderLeftWidth:"calc(0px * calc(1 - var(--tw-divide-x-reverse)))"}}),Y=n.Z.div({display:"inline-flex",width:"100%",justifyContent:"center",whiteSpace:"nowrap"}),X=n.Z.div({display:"grid",flex:"1 1 0%",gridTemplateColumns:"repeat(7, minmax(0, 1fr))",textAlign:"center",":last-child":{borderRightWidth:"1px"}}),J=n.Z.span({fontSize:"1.2rem","--tw-text-opacity":"1",color:"rgb(107 114 128 / var(--tw-text-opacity))"}),U=n.Z.div({position:"relative",display:"flex",alignItems:"center",gap:"1.25rem",paddingTop:"1rem"}),G=n.Z.div({position:"relative",display:"inline-grid",height:"34vh",width:"100%",touchAction:"none",gridTemplateColumns:"repeat(7, minmax(0, 1fr))",gridTemplateRows:"repeat(6, minmax(0, 1fr))",rowGap:"0.5rem",paddingLeft:"1rem",paddingRight:"1rem",paddingBottom:"1rem","@media (min-width: 768px)":{height:"100%"}}),K=n.Z.button((function(e){var t=e.active,o=e.disabled,r=e.selected,a=e.edge,p=e.highlight;return[{position:"relative",display:"flex",justifyContent:"center","::before":{content:"''",pointerEvents:"none",position:"absolute",left:"-46%",right:"-14%",zIndex:"-1",height:"100%"},"@media (min-width: 768px)":{display:"block","::before":{content:"var(--tw-content)",left:"-21%",right:"-18%",height:"100%"}},"@media (min-width: 1024px)":{"::before":{content:"var(--tw-content)",left:"-10%",right:"-8%"}}},r&&(-1===a?[{borderRadius:"9999px","::before":{content:"var(--tw-content)",left:"48%",right:"-21%"}}]:1===a&&[{borderRadius:"9999px","::before":{content:"var(--tw-content)",left:"-48%",right:"53%"}}]),r&&[{"::before":{content:"var(--tw-content)","--tw-bg-opacity":"1",backgroundColor:"rgb(83 126 220 / var(--tw-bg-opacity))"}},(!t||o)&&{"::before":{content:"var(--tw-content)",backgroundColor:"transparent"}}],p&&[{"::before":{content:"var(--tw-content)",left:"-52%",right:"31%",borderTopWidth:"1px",borderBottomWidth:"1px",borderStyle:"dashed","--tw-border-opacity":"1",borderColor:"rgb(119 154 228 / var(--tw-border-opacity))"},"@media (min-width: 768px)":{"::before":{content:"var(--tw-content)",left:"-1.5rem"}},"@media (min-width: 1024px)":{"::before":{content:"var(--tw-content)",left:"-3rem",right:"2rem"}}}],!t&&o&&{borderStyle:"none","::before":{content:"var(--tw-content)",borderStyle:"none",backgroundColor:"transparent"},":hover":{backgroundImage:"none"}},p&&(-1===a?[{"::before":{content:"var(--tw-content)",left:"48%",right:"48%"},"@media (min-width: 1024px)":{"::before":{content:"var(--tw-content)",right:"7%"}}}]:1===a&&[{"::before":{content:"var(--tw-content)",left:"-45%",right:"45%"}}]),e.customStyles]})),q=n.Z.span((function(e){var t=e.active,o=e.selected,r=e.highlight,a=e.edge,p=e.customStyles,s=e.disabled;return[{position:"relative",display:"flex",aspectRatio:"1 / 1",height:"100%",alignItems:"center",justifyContent:"center",borderRadius:"9999px",textAlign:"center","--tw-text-opacity":"1",color:"rgb(31 41 55 / var(--tw-text-opacity))","@media (min-width: 1024px)":{height:"3.5rem"}},s?t?{"--tw-text-opacity":"1",color:"rgb(209 213 219 / var(--tw-text-opacity))"}:{"--tw-text-opacity":"1",color:"rgb(255 255 255 / var(--tw-text-opacity))"}:t?{".group:hover &":{"--tw-bg-opacity":"1",backgroundColor:"rgb(83 126 220 / var(--tw-bg-opacity))","--tw-text-opacity":"1",color:"rgb(255 255 255 / var(--tw-text-opacity))",transitionProperty:"color, background-color, border-color, text-decoration-color, fill, stroke",transitionTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)",transitionDuration:"300ms"},".group:active &":{"--tw-bg-opacity":"1",backgroundColor:"rgb(119 154 228 / var(--tw-bg-opacity))","--tw-text-opacity":"1",color:"rgb(255 255 255 / var(--tw-text-opacity))"}}:{"--tw-text-opacity":"1",color:"rgb(255 255 255 / var(--tw-text-opacity))"},o&&[{"--tw-bg-opacity":"1",backgroundColor:"rgb(83 126 220 / var(--tw-bg-opacity))","--tw-text-opacity":"1",color:"rgb(255 255 255 / var(--tw-text-opacity))",".group:hover &":{"--tw-bg-opacity":"1",backgroundColor:"rgb(55 106 215 / var(--tw-bg-opacity))",transitionProperty:"all",transitionTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)",transitionDuration:"150ms"}},(!t||s)&&{"--tw-bg-opacity":"1",backgroundColor:"rgb(255 255 255 / var(--tw-bg-opacity))",".group:hover &":{"--tw-bg-opacity":"1",backgroundColor:"rgb(255 255 255 / var(--tw-bg-opacity))"},".group:active &":{"--tw-bg-opacity":"1",backgroundColor:"rgb(255 255 255 / var(--tw-bg-opacity))"}},-1===a||1===a?{borderRadius:"9999px"}:{borderRadius:"0px"}],r&&[{borderStyle:"dashed","--tw-border-opacity":"1",borderColor:"rgb(119 154 228 / var(--tw-border-opacity))",transitionProperty:"all",transitionTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)",transitionDuration:"150ms",".group:hover &":{"--tw-bg-opacity":"1",backgroundColor:"rgb(55 106 215 / var(--tw-bg-opacity))","--tw-text-opacity":"1",color:"rgb(255 255 255 / var(--tw-text-opacity))"}},(-1===a||1===a)&&[{"--tw-bg-opacity":"1",backgroundColor:"rgb(83 126 220 / var(--tw-bg-opacity))","--tw-text-opacity":"1",color:"rgb(255 255 255 / var(--tw-text-opacity))"},(!t||s)&&{"--tw-bg-opacity":"1",backgroundColor:"rgb(209 213 219 / var(--tw-bg-opacity))"}],(!t||s)&&{"--tw-bg-opacity":"1",backgroundColor:"rgb(255 255 255 / var(--tw-bg-opacity))",".group:hover &":{"--tw-bg-opacity":"1",backgroundColor:"rgb(255 255 255 / var(--tw-bg-opacity))"},".group:active &":{"--tw-bg-opacity":"1",backgroundColor:"rgb(255 255 255 / var(--tw-bg-opacity))"}},-1===a||1===a?{borderRadius:"9999px"}:{}],p]})),$=o(61435),_=o(50659),Q=o(23305),ee=o(35667),te=o(58251);var oe=n.Z.div({position:"absolute",left:"7rem",zIndex:"10",marginBottom:"1rem",borderRadius:"0.5rem","--tw-bg-opacity":"1",backgroundColor:"rgb(254 226 226 / var(--tw-bg-opacity))",paddingLeft:"1.5rem",paddingRight:"1.5rem",paddingTop:"1.25rem",paddingBottom:"1.25rem",fontSize:"1.6rem","--tw-text-opacity":"1",color:"rgb(185 28 28 / var(--tw-text-opacity))"}),re=n.Z.div({position:"absolute",left:"7rem",marginBottom:"1rem",display:"none","@keyframes fadeOut":{"0%":{opacity:"1"},"100%":{opacity:"0",display:"none"}},animation:"fadeOut 0.6s ease-out",borderRadius:"0.5rem","--tw-bg-opacity":"1",backgroundColor:"rgb(254 226 226 / var(--tw-bg-opacity))",paddingLeft:"1.5rem",paddingRight:"1.5rem",paddingTop:"1.25rem",paddingBottom:"1.25rem",fontSize:"1.6rem","--tw-text-opacity":"1",color:"rgb(185 28 28 / var(--tw-text-opacity))"}),ae=function(e){var t=e.setErrorEnabled,o=e.error;return(0,h.useEffect)((function(){o&&t((function(e){return!e}))}),[o,t]),o?(0,S.jsx)(oe,{children:"Encountered an error while trying to post"}):(0,S.jsx)(re,{children:"Encountered an error while trying to post"})},pe=o(85096),se=o(75178),ie=o(79250),ne=o(39765),le=o(36712),ce=o(90628),de=o(41543),he=o(20388),ue=o(91838),me=o(8241),ge=o(28987),ye=o(44713),xe=o(95820),be=o(70187),we=o(65240),fe=o(45952),ve=o(19925),je=o(51083),Te=o(49698),Se=o(66538),De=o(34732),Ne=o(8518),ke=o(71218),Ce=o(19749),Ze=o(43370),Re=o(17146),Pe=o(57830);function Ee(e){var t=e.schoolLevel,o=(0,h.useState)(),r=(0,i.Z)(o,2)[1],a=(0,h.useState)(!0),p=(0,i.Z)(a,1)[0],n=(0,h.useRef)(),m=(0,h.useState)(!1),y=(0,i.Z)(m,2),x=y[0],b=y[1],w=[{path:"",name:"View Components",exact:!0},{path:"test",name:"Test"},{path:"example",name:"Example"}],f=(0,h.useState)(""),v=(0,i.Z)(f,2),j=v[0],N=v[1],k=(0,h.useState)("test"),C=(0,i.Z)(k,2),Z=C[0],R=C[1],P=(0,h.useState)(""),E=(0,i.Z)(P,2),A=E[0],F=E[1],I=(0,h.useState)("None"),L=(0,i.Z)(I,2),M=L[0],z=L[1],W=(0,h.useMemo)((function(){return[{name:"Group 1",data:[{name:"Example 1",value:7,color:"#C6EE75"},{name:"Example 2",value:6,color:"#167BBA",done:!0},{name:"Example 3",value:59,color:"#30F087",done:!0}]},{name:"Group 2",data:[{name:"Example 4",value:29,color:"#050FB8"},{name:"Example 5",value:70,color:"#6A55B5"}]},{name:"Group 3",data:[{name:"Example 6",value:68,color:"#4E42D3",done:!0},{name:"Example 7",value:65,color:"#C104F7"},{name:"Example 8",value:100,color:"#497F8E"}]},{name:"Group 4",data:[{name:"Example 9",value:72,color:"#E5CEA1",done:!0},{name:"Example 10",value:60,color:"#EABBEB",done:!0},{name:"Example 11",value:16,color:"#7949D0",done:!0},{name:"Example 12",value:63,color:"#1CFFC6",done:!0}]}].map((function(e){return(0,s.Z)((0,s.Z)({},e),{},{value:e.data.sort((function(e,t){return e.value-t.value})).reduce((function(e,t){return e+t.value}),0)})})).sort((function(e,t){return e.value-t.value}))}),[]),B=(0,h.useMemo)((function(){return W.flatMap((function(e){return e.data})).sort((function(e,t){return e.value-t.value}))}),[W]),O=(0,h.useState)({messages:["This was supper Successful"],type:"SUCCESS"}),V=(0,i.Z)(O,2),H=V[0],Y=V[1],X=(0,h.useState)({messages:["Data was submitted but I will say..."],type:"WARNING"}),J=(0,i.Z)(X,2),U=J[0],G=J[1],K=(0,h.useState)({messages:["You did this wrong","this wrong","Not to mention this is simply way off"],type:"ERROR"}),q=(0,i.Z)(K,2),oe=q[0],re=q[1],je=[{name:"Edit",link:"www.goldkey.com"},{name:"Remove",onClick:function(){return alert("You clicked me")}},{name:"Enabled"}],ke=(0,h.useState)(""),Pe=(0,i.Z)(ke,2),Ee=Pe[0],We=Pe[1],Be=(0,h.useState)(0),Oe=(0,i.Z)(Be,2),Ve=Oe[0],Ye=Oe[1],Xe=["toggle 1","toggle 2","toggle 3"],Je=(0,h.useState)(Xe[1]),Ue=(0,i.Z)(Je,2),Ge=Ue[0],Ke=Ue[1],qe=(0,h.useRef)(),$e=(0,h.useState)(null),_e=(0,h.useState)(null),it=(0,h.useState)({active:!1}),nt=(0,i.Z)(it,2),lt=nt[0],ct=nt[1],dt=(0,h.useState)({active:!1}),ht=(0,i.Z)(dt,2),ut=ht[0],mt=ht[1],gt=(0,Ce.Z)(W),yt=gt.data,xt=gt.setData,bt=(0,h.useState)(!1),wt=(0,i.Z)(bt,2),ft=wt[0],vt=wt[1];return(0,h.useEffect)((function(){console.log(ft,"SHowVideo!@#$")}),[ft]),(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(Ae,{title:"Shared Across the Site",description:"These components are shared across both Teacher and Student interfaces:",schoolLevel:t}),(0,S.jsxs)(Qe,{children:[(0,S.jsx)(Fe,{title:"SmallVideoPreview.jsx",author:"Jake Toomay",children:(0,S.jsxs)(Ie,{title:"Small Video Preview",description:"A video that will be rendered in a small modal (NOT THE SHARED MODAL). ",hasProps:!0,forwardRef:"HTMLDivElement",children:[(0,S.jsx)(Me,{propName:"title",propDesc:"The title to the video. Will show up when the video is hovered / paused",propType:"string"}),(0,S.jsx)(Me,{propName:"onClose",propDesc:"the function that will fire when the video is closed",propType:"function"}),(0,S.jsx)(Me,{propName:"src",propDesc:"the path to the video",propType:"string"}),(0,S.jsx)(Me,{propName:"playerRef",propDesc:"the ref for the video (makes the play/pause work)",propType:"React.MutableRefObject<HTMLDivElement>"}),(0,S.jsx)(Me,{propName:"onEnd",propDesc:"the function that will fire when the video ends",propType:"function"}),(0,S.jsx)(Me,{propName:"onError",propDesc:"the function that will fire when the video errors",propType:"function"}),(0,S.jsx)(Me,{propName:"showControls",propDesc:"whether or not to show the video controls",propType:"boolean"}),(0,S.jsx)(Me,{propName:"showSpeedControls",propDesc:"whether or not to show the video speed controls",propType:"boolean"}),(0,S.jsx)(Me,{propName:"shouldSaveVideoPosition",propType:"boolean",propDesc:"boolean that will determine if we should save the video position"}),(0,S.jsxs)(Le,{children:[(0,S.jsxs)("button",{customStyles:{width:"fit-content","--tw-bg-opacity":"1",backgroundColor:"rgb(59 130 246 / var(--tw-bg-opacity))"},onClick:function(){return vt(!0)},children:["Test Video"," "]}),ft&&(0,S.jsx)(ge.Z,{title:"View Componenets",src:Re.AcellusGoldEdition,onClose:function(){return vt(!1)},playerRef:qe,showControls:!0,showSpeedControls:!0,autoplay:!0})]})]})}),(0,S.jsx)(Fe,{title:"PieChart.jsx",author:"Drake Taylor",children:(0,S.jsxs)(Ie,{title:"PieChart",description:"A simple pie chart.",hasProps:!0,forwardRef:"HTMLDivElement",children:[(0,S.jsx)(Me,{propName:"data",propDesc:"The data to render within the chart",propType:"Array<{ value: number, name: string, color?: string | string[] } | { name: string, data: Array<{ value: number, name: string, color?: string | string[] }>, value?: number, color?: string | string[] }>"}),(0,S.jsx)(Me,{propName:"hover",propDesc:"The information for the currently hovered slice",propType:"{ name: string, childName?: string, active: boolean }"}),(0,S.jsx)(Me,{propName:"setHover",propDesc:"Setter for updating the hover state",propType:"React.Dispatch<React.SetStateAction<{ name: string, childName?: string, active: boolean }>>"}),(0,S.jsx)(Me,{propName:"innerRadius",propDesc:"A number from 0 to 1 to cut-out a percentage of the center of the chart",propType:"number",optional:!0}),(0,S.jsx)(Me,{propName:"neutralColor",propDesc:"The color to use when a slice value is 0",propType:"string",optional:!0}),(0,S.jsx)(Me,{propName:"children",propDesc:"The children to render inside the chart",propType:"React.ReactNode",optional:!0}),(0,S.jsx)(Me,{propName:"wrapperStyles",propDesc:"Custom styles prop for changing the styles of the wrapper",propType:"TwStyle | SerializedStyles",optional:!0}),(0,S.jsx)(Me,{propName:"hoverRef",propDesc:"Used to attach a ref to the hovered slice",propType:"React.MutableRefObject<HTMLDivElement>",optional:!0}),(0,S.jsx)(Me,{propName:"noClick",propDesc:"",propType:"boolean",optional:!0}),(0,S.jsxs)(Le,{children:[(0,S.jsx)(Se.Z,{data:W,hover:lt,setHover:ct,wrapperStyles:{width:"33.333333%"}}),(0,S.jsx)(Se.Z,{data:B,hover:ut,setHover:mt,wrapperStyles:{width:"33.333333%"}})]})]})}),(0,S.jsx)(Fe,{title:"ColorKey.jsx",author:"Drake Taylor",children:(0,S.jsxs)(Ie,{title:"ColorKey",description:"A simple color key.",hasProps:!0,forwardRef:"HTMLDivElement",children:[(0,S.jsx)(Me,{propName:"data",propDesc:"The data to render within the chart",propType:"Array<{ value: number, name: string, color?: string | string[] } | { name: string, data: Array<{ value: number, name: string, color?: string | string[] }>, value?: number, color?: string | string[] }>"}),(0,S.jsx)(Me,{propName:"neutralColor",propDesc:"Neutral color to use when data value is zero",propType:"string"}),(0,S.jsx)(Me,{propName:"setHover",propDesc:"Setter for updating the hover state",propType:"React.Dispatch<React.SetStateAction<{ name: string, childName?: string, active: boolean }>>",optional:!0}),(0,S.jsx)(Me,{propName:"containerStyles",propDesc:"Custom styles for the key container",propType:"TwStyle | SerializedStyles",optional:!0}),(0,S.jsx)(Me,{propName:"itemStyles",propDesc:"Custom styles for the key container",propType:"TwStyle | SerializedStyles",optional:!0}),(0,S.jsx)(Me,{propName:"textStyles",propDesc:"Custom styles for the key container",propType:"TwStyle | SerializedStyles",optional:!0}),(0,S.jsx)(Me,{propName:"doneElement",propDesc:"Element to display within the color dot when the item is done.",propType:"React.ReactNode",optional:!0,defaultValue:"<StarIcon />"}),(0,S.jsx)(Me,{propName:"hoverRef",propDesc:"Ref that gets attached to the hovered key item.",propType:"React.MutableRefObject<HTMLSpanElement>",optional:!0}),(0,S.jsxs)(Le,{children:[(0,S.jsx)(Te.ZP,{data:W,hover:lt,setHover:ct}),(0,S.jsx)(Te.ZP,{data:B,hover:ut,setHover:mt})]})]})}),(0,S.jsxs)(Fe,{title:"TooltipColorKey.jsx",author:"Drake Taylor",children:[(0,S.jsxs)(Ie,{title:"TooltipColorKey",description:"Similar to ColorKey, but without most of the functionality and intended for use inside a Tooltip.",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"data",propDesc:"The data to render within the chart",propType:"Array<{ value: number, name: string, color?: string | string[] } | { name: string, data: Array<{ value: number, name: string, color?: string | string[] }>, value?: number, color?: string | string[] }>"}),(0,S.jsx)(Me,{propName:"formatValue",propDesc:"Formatter function",propType:"(value: number, index: number, data: { value: number, name: string, color?: string | string[] }) => React.ReactNode"}),(0,S.jsx)(Me,{propName:"neutralColor",propDesc:"Neutral color to use when data value is zero",propType:"string"}),(0,S.jsx)(Me,{propName:"doneElement",propDesc:"Element to display within the color dot when the item is done.",propType:"React.ReactNode",optional:!0,defaultValue:"<StarIcon />"})]}),(0,S.jsxs)(Le,{children:[(0,S.jsx)(Ne.Z,{data:W}),(0,S.jsx)(Ne.Z,{data:B})]})]}),(0,S.jsx)(Fe,{title:"TimeSpentChart.jsx",author:"Drake Taylor",children:(0,S.jsxs)(Ie,{title:"TimeSpentChart",description:"Used for display how much time was spent in a given course",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"data",propDesc:"The data to render within the chart",propType:"Array<{ value: number, name: string, color?: string | string[] } | { name: string, data: Array<{ value: number, name: string, color?: string | string[] }>, value?: number, color?: string | string[] }>"}),(0,S.jsx)(Me,{propName:"setData",propDesc:"Data setter",propType:"React.Dispatch<React.SetStateAction<Array<{ value: number, name: string, color?: string | string[] } | { name: string, data: Array<{ value: number, name: string, color?: string | string[] }>, value?: number, color?: string | string[] }>>>"}),(0,S.jsx)(Me,{propName:"direction",propDesc:"Used to change the flow of the chart",propType:"auto | col | twoCol",defaultValue:"auto"}),(0,S.jsx)(Me,{propName:"whiteText",propDesc:"",propType:"boolean",defaultValue:!1}),(0,S.jsx)(Me,{propName:"emptyTitle",propDesc:"Empty state title",propType:"string",defaultValue:"Let's get started!"}),(0,S.jsx)(Me,{propName:"emptySubtext",propDesc:"Empty state subtext",propType:"string",defaultValue:"Start a course to display the time spent in each course."}),(0,S.jsx)(Me,{propName:"force",propDesc:"If force then we render the chart even if the data is empty",propType:"boolean",defaultValue:!0}),(0,S.jsx)(Me,{propName:"iconStyles",propDesc:"Custom icon styles",propType:"TwStyle | SerializedStyles",optional:!0}),(0,S.jsx)(Me,{propName:"containerStyles",propDesc:"Custom container styles",propType:"TwStyle | SerializedStyles",optional:!0}),(0,S.jsx)(Me,{propName:"innerRadius",propDesc:"A number between 0 and 1 to cut-out the center of the chart.",propType:"number",optional:!0}),(0,S.jsx)(Me,{propName:"children",propDesc:"Children to render inside the chart",propType:"React.ReactNode",optional:!0}),(0,S.jsx)(Me,{propName:"formatActivityMessage",propDesc:"Formatter for the acctivity message",propType:"(data: { name: string, value: number, color?: string | string[] }) => string",optional:!0}),(0,S.jsx)(Me,{propName:"customPopupStyles",propDesc:"Custom styles for the popup",propType:"TwStyle | SerializedStyles",optional:!0}),(0,S.jsx)(Me,{propName:"activityStyles",propDesc:"Custom styles for activity",propType:"TwStyle | SerializedStyles",optional:!0}),(0,S.jsx)(Me,{propName:"badColor",propDesc:"Bad colors to apply to the bad data",propType:"{ slice: string | string[], group?: string | stringp[] } | () => { slice: string | string[], group?: string | string[]}",defaultValue:{slice:"red"}}),(0,S.jsx)(Me,{propName:"neutralColor",propDesc:"The neutral color to us in-case there is a slice with no data",propType:"string",defaultValue:"#9ca3af96"}),(0,S.jsx)(Me,{propName:"keyContainerStyles",propDesc:"Custom key container styles",propType:"TwStyle | SerializedStyles",optional:!0}),(0,S.jsx)(Me,{propName:"keyTextStyles",propDesc:"Custom key text styles",propType:"TwStyle | SerializedStyles",optional:!0}),(0,S.jsx)(Me,{propName:"keyItemStyles",propDesc:"Custom key item styles",propType:"TwStyle | SerializedStyles",optional:!0}),(0,S.jsx)(Me,{propName:"chartWrapperStyles",propDesc:"Custom chart wrapper styles",propType:"TwStyle | SerializedStyles",optional:!0}),(0,S.jsx)(Me,{propName:"noClick",propDesc:"",propType:"boolean",optional:!0}),(0,S.jsx)(Me,{propName:"keyRef",propDesc:"Ref to attach to the key",propType:"React.MutableRefObject<HTMLDivElement>",optional:!0}),(0,S.jsx)(Le,{children:(0,S.jsx)(De.Z,{data:yt,setData:xt})})]})})]}),(0,S.jsx)(Fe,{title:"SharedProgressBar.jsx",author:"Jake Toomay",children:(0,S.jsxs)(Ie,{title:"SharedProgressBar",description:"a simple progress bar",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"progress",propType:"number",propDesc:"Progress that the progress bar should show. Will accept any number between 1-100"}),(0,S.jsx)(Me,{propName:"title",propType:"string",propDesc:"Title of the progress bar. If passed in, a title will be rendered",optional:!0}),(0,S.jsx)(Me,{propName:"titleStyles",propType:"TwStyle",propDesc:"Styles for the title. ",optional:!0}),(0,S.jsx)(Me,{propName:"progressStyles",propType:"TwStyle",propDesc:"Color that the progressBar should be. Can be a solid color or a gradient",optional:!0}),(0,S.jsx)(Me,{propName:"progressWrapperStyles",propType:"TwStyle",propDesc:"styles that can be applied to the progress wrapper",optional:!0}),(0,S.jsx)(Me,{propName:"wrapperStyles",propType:"TwStyle",propDesc:"styles that can be applied to the wrapper",optional:!0}),(0,S.jsx)(Me,{propName:"tooltipText",propType:"string",propDesc:"Text that will show when hovering over the progress",optional:!0}),(0,S.jsx)(Me,{propName:"isGlowing",propType:"boolean",propDesc:"If true, the progress bar will have a glowing effect (for MS)",optional:!0}),(0,S.jsx)(Me,{propName:"goalMet",propType:"boolean",propDesc:'if the students goal is met a star will be rendered with an aria label that says "Goal Met"',optional:!0}),(0,S.jsx)(Le,{children:(0,S.jsx)(ue.Z,{progress:73,progressStyles:{"--tw-bg-opacity":"1",backgroundColor:"rgb(59 130 246 / var(--tw-bg-opacity))"},progressWrapperStyles:{"--tw-bg-opacity":"1",backgroundColor:"rgb(243 244 246 / var(--tw-bg-opacity))"},title:"Title Example",titleStyles:{"--tw-bg-opacity":"1",backgroundColor:"rgb(59 130 246 / var(--tw-bg-opacity))"},tooltipText:"tooltipText example"})})]})}),(0,S.jsxs)(Fe,{title:"BarChart.jsx",author:["Drake Taylor","Wes Nelson"],children:[(0,S.jsxs)(Ie,{title:"BarChart",description:"Used to display data",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"data",propType:"number[] | (ChartData | number)[][]",propDesc:"The date to display on the chart."}),(0,S.jsx)(Me,{propName:"barColors",propType:"Record<string, string[]> | string[]",propDesc:"The colors used to color the bars",optional:!0}),(0,S.jsx)(Me,{propName:"barWidth",propType:"number",propDesc:"The thickness of the bars in %",defaultValue:4}),(0,S.jsx)(Me,{propName:"yLabels",propType:"boolean | string[]",propDesc:"The Y-Labels to display. By default this will display 0 to the heighestValue with 25% increments",defaultValue:!1}),(0,S.jsx)(Me,{propName:"xLabels",propType:"boolean | string[]",propDesc:"The X-Labels to display. By default this will display 1 to data.length",defaultValue:!0}),(0,S.jsx)(Me,{propName:"dataTitles",propType:"string[]",propDesc:"The titles for use within the tooltip. This can be ignored if tooltipLabel is provided.",optional:!0}),(0,S.jsx)(Me,{propName:"tooltipLabel",propType:"string | (value: number) => string",propDesc:"The label for the tooltip. This overrides data[][].label and dataTitles",optional:!0}),(0,S.jsx)(Me,{propName:"targetValue",propType:"number | number[]",propDesc:"The target value on the bar chart",optional:!0}),(0,S.jsx)(Me,{propName:"heighestValue",propType:"number | (largestValue: number) => number",propDesc:"The highest value the chart goes to. By default this will be the highest value in the provided data.",defaultValue:function(e){return 20*Math.ceil(e/20)}}),(0,S.jsx)(Me,{propName:"strict",propType:"boolean",propDesc:"If the chart is in strict mode then heighestValue is an absolute and the chart wont change size to accomidate larger data",defaultValue:!1}),(0,S.jsx)(Me,{propName:"wrapperStyles",propType:"TwStyle | SerializedStyles",propDesc:"Custom styles to apply to the figure",optional:!0}),(0,S.jsx)(Me,{propName:"xLabelStyles",propType:"TwStyle | SerializedStyles",propDesc:"Custom styles to apply to the overflow line",optional:!0}),(0,S.jsx)(Me,{propName:"yLabelStyles",propType:"TwStyle | SerializedStyles",propDesc:"Custom styles to apply to the overflow line",optional:!0}),(0,S.jsx)(Me,{propName:"tooltipStyles",propType:"TwStyle | SerializedStyles",propDesc:"Custom styles to apply to the tooltip",optional:!0}),(0,S.jsx)(Me,{propName:"tooltipArrowStyles",propType:"TwStyle | SerializedStyles",propDesc:"Custom styles to apply to the tooltip arrow",optional:!0}),(0,S.jsx)(Me,{propName:"tooltipContentStyles",propType:"TwStyle | SerializedStyles",propDesc:"Custom styles to apply to the tooltip content",optional:!0}),(0,S.jsx)(Me,{propName:"tooltipTextStyles",propType:"TwStyle | SerializedStyles",propDesc:"Custom styles to apply to the tooltip text",optional:!0}),(0,S.jsx)(Me,{propName:"bubbleStyles",propType:"TwStyle | SerializedStyles",propDesc:"Custom styles to apply to bubbles/points on the graph",optional:!0}),(0,S.jsx)(Me,{propName:"roundedPercentage",propType:"number",propDesc:"The percent of the rx value.",optional:!0}),(0,S.jsx)(Me,{propName:"children",propType:"ReactNode | (props: ChildProps) => ReactNode",propDesc:"Used to add custom SVGElements to the top of the SVG",optional:!0})]}),(0,S.jsxs)(Le,{children:[(0,S.jsx)(g.Z,{data:[[{value:10,label:" Wowzas"},{value:20,label:" Zoinks"}],[{value:30,label:" Wowzas"},{value:15,label:" Zoinks"}],[{value:2,label:" Wowzas"},{value:4,label:" Zoinks"}],[{value:6,label:" Wowzas"},{value:39,label:" Zoinks"}]],dataTitles:["First","Second","Third","Fourth"],yLabels:!0,targetValue:[45,20,3,15],xLabels:!1,barColors:{good:["#AAAAFF","#0000FF"],bad:["#FFAAAA","#FF0000"]},yLabelStyles:{fontSize:"2.5rem"}}),(0,S.jsx)(g.Z,{roundedCorners:!0,data:[[{value:10,label:" Wowzas",target:20},{value:20,label:" Zoinks",target:40}],[{value:30,label:" Wowzas",target:5},{value:15,label:" Zoinks",target:10}],[{value:2,label:" Wowzas",target:3},{value:4,label:" Zoinks",target:2}],[{value:6,label:" Wowzas",target:3},{value:39,label:" Zoinks",target:40}]],dataTitles:["First","Second","Third","Fourth"],yLabels:!0,targetValue:15,tooltipLabel:function(e){return"".concat(e," total")},xLabels:!1,barColors:{good:["#AAAAFF","#0000FF"],bad:["#FFAAAA","#FF0000"]}})]})]}),(0,S.jsx)(Fe,{title:"Select.jsx",author:["Jake Toomay","Wes Nelson","Drake Taylor"],children:(0,S.jsxs)(Ie,{title:"Select",description:"A styled list box component",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"data",optional:!0,propType:"array",propDesc:"Data to pass in the listbox component"}),(0,S.jsx)(Me,{propName:"selected",optional:!0,propType:"string",propDesc:"The currently selected item in the listbox"}),(0,S.jsx)(Me,{propName:"placeholder",optional:!0,propType:"string",propDesc:"Placeholder value of the listbox"}),(0,S.jsx)(Me,{propName:"static",optional:!0,propType:"boolean",propDesc:"A bool that, if true, will make the listbox static (making it so the select options never unmount from the dom)"}),(0,S.jsx)(Me,{propName:"error",optional:!0,propType:"string",propDesc:"An error message to display"}),(0,S.jsx)(Me,{propName:"name",optional:!0,propType:"string",propDesc:"The name to use for form control."}),(0,S.jsx)(Me,{propName:"parentId",optional:!0,propType:"string",propDesc:"The html id to parent the element to."}),(0,S.jsx)(Me,{propName:"disabled",optional:!0,propType:"boolean",propDesc:"A boolean that will disable the listbox when true"}),(0,S.jsx)(Me,{propName:"labelText",optional:!0,propType:"string",propDesc:"If the listbox needs a label above the listbox, pass in a string and it will be rendered"}),(0,S.jsx)(Me,{propName:"onChange",optional:!0,propType:"(selected: any, value: string, name: string) => void",propDesc:"A function that will fire when the listbox is changed"}),(0,S.jsx)(Me,{propName:"getLabel",optional:!0,propType:"(selected: any, index: number) => string",propDesc:"When parsing a non-conforming data array. This can be used to get the correct label for the given option."}),(0,S.jsx)(Me,{propName:"getValue",optional:!0,propType:"(selected: any, index: number) => string",propDesc:"When parsing a non-conforming data array. This can be used to get the correct value for the given option."}),(0,S.jsx)(Me,{propName:"onClick",optional:!0,propType:"function",propDesc:"A function that will fire when an item is clicked"}),(0,S.jsx)(Me,{propName:"onOpen",optional:!0,propType:"(selected: any, value: string, name: string) => void",propDesc:"A function that will fire when the listbox is opened"}),(0,S.jsx)(Me,{propName:"onClose",optional:!0,propType:"(selected: any, value: string, name: string) => void",propDesc:"A function that will fire when the listbox is closed"}),(0,S.jsx)(Me,{propName:"isLoading",optional:!0,propType:"boolean",propDesc:"A bool that, if true, will render a loading state"}),(0,S.jsx)(Me,{propName:"arrowIcon",optional:!0,propType:"JSX.Element | (open: boolean) => JSX.Element",propDesc:"An element or element getter to render in-place of the arrow icon."}),(0,S.jsx)(Me,{propName:"customOptionStyles",optional:!0,propType:"TwStyle | SerializedStyles",propDesc:"Custom styles to apply to the options."}),(0,S.jsx)(Me,{propName:"customIconStyles",optional:!0,propType:"TwStyle | SerializedStyles",propDesc:"Custom styles to apply to the icon."}),(0,S.jsx)(Me,{propName:"fixed",optional:!0,propType:"boolean",propDesc:"A bool that, if true, will make the listbox options fixed. This will need to be added if we put this component in something that has fixed positioning"}),(0,S.jsx)(Me,{propName:"toggleScroll",optional:!0,propType:"boolean",propDesc:"A bool that, if true, will scroll the listbox options to the selected item when we open listbox"}),(0,S.jsx)(Le,{children:(0,S.jsx)(he.Z,{placeholder:"Choose the swaggiest developer",data:["jake","jake","jake","jake","jake","jake"]})})]})}),(0,S.jsxs)(Fe,{title:"CropPic.js, EditImage.js, & UploadImage.js",children:[(0,S.jsxs)(Ie,{title:"CropPic",description:"Three components for cropping, editing, and uploading images",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"goBack",propType:"function",propDesc:" to go back and removes the state of the image"}),(0,S.jsx)(Me,{propName:"isCircle",propType:"boolean",propDesc:"if true, gives an initial width and aspectof cropping area"}),(0,S.jsx)(Me,{propName:"originalImage",propType:"file, url, string",propDesc:" takes in a string of the original src image"}),(0,S.jsx)(Me,{propName:"uploadImage",propType:"function",propDesc:" to upload picture to server, and for setting the finished cropped image "})]}),(0,S.jsxs)(Ie,{title:"EditImage",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"task",propType:"function",propDesc:"  used to process the uploaded image"}),(0,S.jsx)(Me,{propName:"close",propType:"function",propDesc:" to close the component"}),(0,S.jsx)(Me,{propName:"buttonColor",propType:"string",propDesc:" takes in a color name"}),(0,S.jsx)(Me,{propName:"buttonColorNum",propType:"number",propDesc:" takes in color number style"}),(0,S.jsx)(Me,{propName:"popoverColor",propType:"string",propDesc:" takes in a color style"}),(0,S.jsx)(Me,{propName:"popoverColorNum",propType:"number",propDesc:" takes in a color number style"}),(0,S.jsx)(Me,{propName:"borderColor",propType:"string",propDesc:" takes in color name"}),(0,S.jsx)(Me,{propName:"borderColorNum",propType:"number",propDesc:" takes in color number style"}),(0,S.jsx)(Me,{propName:"editProfile",propType:"boolean",propDesc:" adds styling if true"})]}),(0,S.jsxs)(Ie,{title:"UploadImage",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"close",propType:"function",propDesc:" to close the component"}),(0,S.jsx)(Me,{propName:"task",propDesc:"used to process the uploaded image"}),(0,S.jsx)(Me,{propName:"popoverColor",propType:"string",propDesc:" takes in a color name"}),(0,S.jsx)(Me,{propName:"popoverColorNum",propType:"number",propDesc:" takes in a color number style"})]}),(0,S.jsx)(tt,{children:(0,S.jsx)(l.J,{as:"div",children:function(e){var t=e.close;return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(et,{src:"https://images.generated.photos/8J-SWbZom0CdHDIyRI0XfaRcO4XhP9Jifll07cXVgnA/rs:fit:512:512/wm:0.95:sowe:18:18:0.33/czM6Ly9pY29uczgu/Z3Bob3Rvcy1wcm9k/LnBob3Rvcy92M18w/MDY5OTI0LmpwZw.jpg"}),(0,S.jsx)(Q.Z,{close:t,buttonColor:"teacherBlue",buttonColorNum:500})]})}})})]}),(0,S.jsx)(Fe,{title:"DateRange.jsx",author:"Drake Taylor",children:(0,S.jsxs)(Ie,{title:"DateRange",description:"Used to display and select date ranges in forms",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"startDateState",propType:"[Date | null, Dispatch<SetStateAction<Date | null>>]",propDesc:"State for controlling the start date"}),(0,S.jsx)(Me,{propName:"endDateState",propType:"[Date | null, Dispatch<SetStateAction<Date | null>>]",propDesc:"State for controlling the end date"}),(0,S.jsx)(Me,{propName:"dateButtonStyles",propType:"TwStyle | SerializedStyles",propDesc:"Custom styles to apply to the date highlight element"}),(0,S.jsx)(Me,{propName:"dateTextStyles",propType:"TwStyle | SerializedStyles",propDesc:"Custom styles to apply to the date text element"}),(0,S.jsx)(Le,{children:(0,S.jsx)(D,{startDateState:$e,endDateState:_e,dateButtonStyles:{"&.highlight":{"--tw-bg-opacity":"1",backgroundColor:"rgb(82 82 82 / var(--tw-bg-opacity))"}},dateTextStyles:{".group:nth-child(odd) &":{"--tw-text-opacity":"1",color:"rgb(168 85 247 / var(--tw-text-opacity))"},".group:nth-child(even) &":{"--tw-text-opacity":"1",color:"rgb(22 163 74 / var(--tw-text-opacity))"},".group:hover &":{"--tw-text-opacity":"1",color:"rgb(255 255 255 / var(--tw-text-opacity))"},".group:nth-child(odd):hover &":{"--tw-bg-opacity":"1",backgroundColor:"rgb(168 85 247 / var(--tw-bg-opacity))"},".group:nth-child(even):hover &":{"--tw-bg-opacity":"1",backgroundColor:"rgb(22 163 74 / var(--tw-bg-opacity))"},".group:active &":{"--tw-text-opacity":"1",color:"rgb(255 255 255 / var(--tw-text-opacity))"},".group:nth-child(odd):active &":{"--tw-bg-opacity":"1",backgroundColor:"rgb(192 132 252 / var(--tw-bg-opacity))"},".group:nth-child(even):active &":{"--tw-bg-opacity":"1",backgroundColor:"rgb(34 197 94 / var(--tw-bg-opacity))"},"&.highlight":{"--tw-text-opacity":"1 !important",color:"rgb(255 255 255 / var(--tw-text-opacity)) !important"},".group:hover &.highlight":{"--tw-bg-opacity":"1",backgroundColor:"rgb(115 115 115 / var(--tw-bg-opacity))"}}})})]})}),(0,S.jsx)(Fe,{title:"DisplayPDF.js",author:"Gavin Orlich",children:(0,S.jsxs)(Ie,{title:"DisplayPDF",description:"A way to display PDF files in the browser",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"file",propType:"string",propDesc:"A url of the PDF file to display"}),(0,S.jsx)(Le,{children:(0,S.jsx)($.Z,{file:u})})]})}),(0,S.jsx)(Fe,{title:"EmptyState.js",author:"Gavin Riggs",children:(0,S.jsxs)(Ie,{title:"EmptyState",description:"A way to show an empty state. That also allows you to display a message.",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"title",propType:"string",propDesc:" main text. color adjust based on bg"}),(0,S.jsx)(Me,{propName:"subText",propType:"string",propDesc:" subtext content"}),(0,S.jsx)(Me,{propName:"bgColor",propType:"TwStyle",propDesc:" takes a tw string to pass in a color. Default is transparent"}),(0,S.jsx)(Me,{propName:"children",propDesc:"(any) takes in children. Primarily styled icons"}),(0,S.jsx)(Me,{propName:"whiteText",propDesc:"if true, text will be white",propType:"boolean"}),(0,S.jsx)(Me,{propName:"customStyles",propDesc:"Any custom tailwind / CSS styles you need to pass in. (useful for heights) ",propType:"TwStyle"}),(0,S.jsx)(ee.Z,{title:"Empty state title",subtext:"This is the subtext for the empty state component.",children:(0,S.jsx)(pt,{})})]})}),(0,S.jsx)(Fe,{title:"Error.js",children:(0,S.jsxs)(Ie,{title:"Error",description:"A way to display an error.",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"error_msg",propType:"string",propDesc:" passes error message"}),(0,S.jsx)(Me,{propName:"error",propType:"number",propDesc:" passes error code"}),(0,S.jsx)(Me,{propName:"fullWidth",propType:"boolean",propDesc:" adds width styling"}),(0,S.jsx)(Me,{propName:"useIcon",propType:" boolean",propDesc:" passes a svg icon"}),(0,S.jsxs)(Le,{children:[(0,S.jsx)(te.Z,{}),(0,S.jsx)(te.Z,{error_msg:"this is a custom error"}),(0,S.jsx)(te.Z,{error:31,fullWidth:!0}),(0,S.jsx)(te.Z,{error:2,useIcon:!0})]})]})}),(0,S.jsx)(Fe,{title:"ErrorModal.js",children:(0,S.jsxs)(Ie,{title:"ErrorModal",description:"A way to display an error",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"setErrorEnabled",propType:"boolean",propDesc:" enables error"}),(0,S.jsx)(Me,{propName:"error",propType:"boolean",propDesc:" if error is true, setEnabled is true"}),(0,S.jsx)(Le,{children:(0,S.jsx)(Qe,{customStyle:{display:"flex",justifyContent:"flex-end"},children:(0,S.jsx)(ae,{setErrorEnabled:r,error:p})})})]})}),(0,S.jsxs)(Fe,{title:"Form.js",children:[(0,S.jsxs)(Ie,{title:"Input",description:"Shared form input element.",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"labelText",propType:"string",propDesc:"Text that will show for the label, won't render if not provided"}),(0,S.jsx)(Me,{propName:"error",propType:"string",propDesc:"If an error message is provided, it will be shown along with other error indicators"}),(0,S.jsx)(Me,{propName:"noAutoComplete",propType:"boolean",propDesc:"If true, the browser will not make any input suggestions"}),(0,S.jsx)(Me,{propName:"id",propType:"string",propDesc:"The id attribute. If not passed, it will use useID for labelText"}),(0,S.jsx)(Me,{propName:"styles",propType:"TwStyle",propDesc:"Custom tw string that you can pass into the styled input"}),(0,S.jsx)(Me,{propName:"children",propType:"ReactNode",propDesc:"Children of the component. It's technically a sibling of the input, but we use absolute to make it look like it's inside"}),(0,S.jsx)(Me,{propName:"props",propType:"HTMLProps<HTMLInputElement>",propDesc:"Anything else gets passed directly to the button DOM element (value, onChange, etc.)"}),(0,S.jsx)(Me,{propName:"ref",propType:"MutableRefObject<HTMLInputElement>",propDesc:"Forwarded ref"}),(0,S.jsx)(Le,{children:(0,S.jsx)(T.II,{placeholder:"Input with labelText defined",value:Ee,onChange:function(e){return We(e.target.value)},labelText:"This is the labelText"})})]}),(0,S.jsxs)(Ie,{title:"Select",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"name",propType:"string",propDesc:"will add a name to the select. Used for forms"}),(0,S.jsx)(Me,{propName:"value",propType:"string | number",propDesc:" the current selected value of the select"}),(0,S.jsx)(Me,{propName:"disabled",propType:"boolean",propDesc:" the current selected value of the select",optional:!0,defaultValue:!1}),(0,S.jsx)(Me,{propName:"onChange",propType:"function",propDesc:"the function that will update the select's state"}),(0,S.jsx)(Me,{propName:"labelText",propType:"string",propDesc:"if you pass in text, that text will be added as a label for the select"}),(0,S.jsx)(Me,{propName:"displayJSX",propType:"ReactNode",propDesc:"children is already used for passing in the selectOptions, this is for when you want to pass an icon into the select itself"}),(0,S.jsx)(Me,{propName:"setIsHover",propType:"boolean",propDesc:" sets a value to true depending on if the user is hovering over the select"}),(0,S.jsx)(Me,{propName:"error",propType:"boolean",propDesc:" if true, an error will be displayed, and the styles will change to reflect that"}),(0,S.jsx)(Me,{propName:"isPlaceholder",propType:"boolean",propDesc:" if true, the text will be placeholder (turn the text lighter)"}),(0,S.jsx)(Me,{propName:"bgStyles",propType:"TwStyle",propDesc:"bg styles for the select, and for the div that holds all the select options"}),(0,S.jsx)(Me,{propName:"textAndChevronStyles",propType:"TwStyle",propDesc:"styles that only apply to the text/chevron"}),(0,S.jsx)(Me,{propName:"focusedSelectStyles",propType:"TwStyle",propDesc:"styles that are only applied when the select is focused (border, ring, etc)"}),(0,S.jsx)(Me,{propName:"children",propType:"ReactNode",propDesc:"Child elements that can be passed into the select"}),(0,S.jsx)(Le,{children:(0,S.jsx)(T.c,{labelText:"LabelText",value:M,onChange:z,children:(0,S.jsxs)(T.PN,{children:[(0,S.jsx)(T.$m,{value:"Option 1",children:" Option 1 "}),(0,S.jsx)(T.$m,{value:"Option 2",children:" Option 2 "}),(0,S.jsx)(T.$m,{value:"Option 3",children:" Option 3 "})]})})})]}),(0,S.jsxs)(Ie,{title:"SelectOptions",description:"This styled component is the container that holds all of the individual select options",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"textAndChevronStyles",propType:"TwStyle",propDesc:"styles that only apply to the text/chevron"}),(0,S.jsx)(Me,{propName:"bgStyles",propType:"TwStyle",propDesc:"styles for the background "}),(0,S.jsx)(Me,{propName:"selectOptionContainerStyles",propType:"TwStyle",propDesc:"styles that can be passed into this component"}),(0,S.jsx)(Me,{propName:"children",propType:"ReactNode",propDesc:"child elements that can be passed into the select (the individual select options) "})]}),(0,S.jsxs)(Ie,{title:"SelectOption",description:"This styled component is the individual select option",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"isSelected",propType:"boolean",propDesc:"if true, the option will be selected"}),(0,S.jsx)(Me,{propName:"selectOptionStyles",propType:"TwStyle",propDesc:"styles that can be passed into an individual select option.  "}),(0,S.jsx)(Me,{propName:"disabled",propType:"boolean",propDesc:"whether or not the option is disabled"}),(0,S.jsx)(Me,{propName:"value",propType:"string | number",propDesc:"the value of the select option"})]}),(0,S.jsxs)(Ie,{title:"StepCounterButton",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"labelText",propType:"string",propDesc:"renders a label above the StepCounterButton"}),(0,S.jsx)(Me,{propName:"steps",propType:"number",propDesc:"the number state that the counter is on"}),(0,S.jsx)(Me,{propName:"onStepChange",propType:"function",propDesc:"function that handles the new number of steps the user wants. (So this should change the steps that is inputted)"}),(0,S.jsx)(Me,{propName:"disable",propType:"boolean",propDesc:"whether the input is disabled or not"}),(0,S.jsx)(Le,{children:(0,S.jsx)(T.aK,{steps:Ve,labelText:"Label Text",onStepChange:function(e){return Ye(e)}})})]})]}),(0,S.jsx)(Fe,{title:"HiddenScroll.js",author:"David Billings",children:(0,S.jsx)(Ie,{hasProps:!0,title:"HiddenScroll",description:"hides the scrollbar until hovered. Wrap this around the component that needs it",children:(0,S.jsx)(Me,{propName:"scrollThumbStyle",propType:"twStyle",propDesc:"(optional) for passing in bg styles for the scroll thumb (applied on hover). if not passed, the scroll thumb will be white with an opacity on hover"})})}),(0,S.jsxs)(Fe,{title:"HorizontalSlider.js",noWrapper:!0,author:"David Billings",children:[(0,S.jsxs)(He,{children:[(0,S.jsxs)(Ie,{hasProps:!0,title:"HorizontalSlider",description:"A wrapper for side scrolling cards, adds a snap scroll.",children:[(0,S.jsx)(Me,{propName:"showMore",propType:"boolean",propDesc:'If the "showMore" button has been clicked. Makes the cards wrap instead of scrolling off the screen'}),(0,S.jsx)(Me,{propName:"customStyles",propType:"TwStyle",propDesc:"tw string with custom styles (mainly gap styles) ex: tw`gap-[5%]`"}),(0,S.jsx)(Me,{propName:"scrollThumbStyle",propType:"TwStyle",propDesc:"the bg styles for the scroll thumb when hovered (default is white)"}),(0,S.jsx)(Me,{propName:"children",propType:"JSX.Element",propDesc:"Children of the component"})]}),(0,S.jsxs)(Ie,{hasProps:!0,title:"TextUnderCard",description:"A clickable card with a 'snapshot' under it",children:[(0,S.jsx)(Me,{propName:"title",propType:"string",propDesc:"Title of the Item"}),(0,S.jsx)(Me,{propName:"instructor",propType:"string",propDesc:"Instructor of the Item"}),(0,S.jsx)(Me,{propName:"thumbnail",propType:"string",propDesc:"Thumbnail of the Item"}),(0,S.jsx)(Me,{propName:"path",propType:"string",propDesc:"Path to the Item (when clicked)"}),(0,S.jsx)(Me,{propName:"newLabel",propType:"boolean",propDesc:'Whether or not the "NEW" label should be added'}),(0,S.jsx)(Me,{propName:"children",propType:"JSX.Element",propDesc:"Children of the component"})]}),(0,S.jsx)(ze,{children:"An example of TextUnderCard inside of HorizontalSlider:"})]}),(0,S.jsxs)(pe.r,{children:[(0,S.jsx)(pe.h,{newLabel:!0,title:"Tacos for Sale",instructor:"David Billings",thumbnail:"https://source.unsplash.com/random/600x343?tacos",path:"/"}),(0,S.jsx)(pe.h,{newLabel:!0,title:"Spaghetti for Sale",instructor:"Tim Vanlerberg",thumbnail:"https://source.unsplash.com/random/600x343?spaghetti",path:"/"}),(0,S.jsx)(pe.h,{title:"Corn Dogs for Sale",instructor:"Jake Toomay",thumbnail:"https://source.unsplash.com/random/600x343?corndogs",path:"/"}),(0,S.jsx)(pe.h,{title:"Popsicles for Sale",instructor:"Dillon Fruhwirth",thumbnail:"https://source.unsplash.com/random/600x343?popsicle",path:"/"}),(0,S.jsx)(pe.h,{newLabel:!0,title:"Salad for Sale",instructor:"Timothy Hsu",thumbnail:"https://source.unsplash.com/random/600x343?salad",path:"/"}),(0,S.jsx)(pe.h,{newLabel:!0,title:"Plants for Sale",instructor:"Gavin Riggs",thumbnail:"https://source.unsplash.com/random/600x343?plants",path:"/"})]})]}),(0,S.jsx)(Fe,{title:"Loading.js",children:(0,S.jsxs)(Ie,{title:"loading",description:"A loading screen that typically will take up the entire screen with a slight opacity.",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"strokeStyle",propType:"TwStyle",propDesc:"if passed adds a tailwind style"}),(0,S.jsx)(Le,{children:(0,S.jsx)(ot,{children:(0,S.jsx)(rt,{children:"Loading..."})})})]})}),(0,S.jsx)(Fe,{title:"LoadingState.js",children:(0,S.jsxs)(Ie,{title:"LoadingState",description:"A loading State with a circle pattern that gives viewers a visual cue that their content is loading and that they have to wait for their content to populate",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"strokeStyle",propType:"TWStyle",propDesc:"passes stroke style"}),(0,S.jsx)(ie.Z,{})]})}),(0,S.jsx)(Fe,{title:"LoadingSpinner.js",children:(0,S.jsxs)(Ie,{title:"LoadingSpinnerCheck",description:"A loading state that will animate to a check when a good return is received",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"confirm",propType:"boolean",propDesc:"if confirm is true/successful, will begin animation"}),(0,S.jsx)(Me,{propName:"color",propType:"string",propDesc:"Takes a color name"}),(0,S.jsx)(Me,{propName:"ColorNum",propType:"number",propDesc:"takes a color number type"}),(0,S.jsx)(Me,{propName:"error",propType:"boolean",propDesc:"if confirm is false, means an error has return, so error returns error style"}),(0,S.jsxs)(Le,{children:[(0,S.jsx)("button",{className:"h-16 w-96 flex relative rounded-3xl bg-blue-400",onClick:function(){return b((function(e){return!e}))},children:(0,S.jsx)(se.W,{confirm:x})})," ",(0,S.jsx)("p",{children:"Click to see animation"})]})]})}),(0,S.jsx)(Fe,{title:"LoadingState.js",children:(0,S.jsxs)(Ie,{title:"LoadingState",description:"A loading State with a circle pattern that gives viewers a visual cue that their content is loading and that they have to wait for their content to populate",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"strokeStyle",propType:"TWStyle",propDesc:"passes stroke style"}),(0,S.jsx)(ie.Z,{})]})}),(0,S.jsx)(Fe,{title:"ModalBase.js",author:"David Billings",children:(0,S.jsxs)(Ie,{title:"ModalBase",description:"A basic modal with rounded corners, on a dark blurred background.",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"bgColor",propType:"TwStyle",propDesc:"For passing in the bg color. Since it's a tw string, you can pass in gradients when needed"}),(0,S.jsx)(Me,{propName:"bgImg",propType:"string",propDesc:"File path to a background image"}),(0,S.jsx)(Me,{propName:"onClose",propType:"function",propDesc:"If passed takes in a callback function for when the modal closes"}),(0,S.jsx)(Me,{propName:"small",propType:"boolean",propDesc:"if passed in, the modal will be smaller"}),(0,S.jsx)(Me,{propName:"getConfirmation",propType:"boolean",propDesc:"If provided this function will be called before allowing the modal to close"}),(0,S.jsx)(Me,{propName:"children",propType:"JSX.Element",propDesc:"Children of the component"})]})}),(0,S.jsx)(Fe,{title:"NotFound.js",children:(0,S.jsx)(Ie,{title:"NotFound",description:"A way to show a broken link or a path that doesn't work or can't be found.",children:(0,S.jsx)(Le,{children:(0,S.jsx)(Qe,{customStyle:{"--tw-bg-opacity":"1",backgroundColor:"rgb(163 163 163 / var(--tw-bg-opacity))"},children:(0,S.jsx)(ne.Z,{})})})})}),(0,S.jsx)(Fe,{title:"PopoverPanel.js",children:(0,S.jsxs)(Ie,{title:"PopoverPanel",description:"This uses the Props below.",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"bgColor",propType:"string",propDesc:"background color of the notification panel defaults to white if undefined"}),(0,S.jsx)(Me,{propName:"bgColorNum",propType:"number",propDesc:"background color number of the notification panel"}),(0,S.jsx)(Me,{propName:"positionStyles",propType:"TwStyle",propDesc:"position styles is put on the Popover.Panel and used for specific responsive positioning"}),(0,S.jsx)(Me,{propName:"pointerStyles",propType:"TwStyle",propDesc:"panel arrow styles defaults to border-gray-300 if undefined"}),(0,S.jsx)(Me,{propName:"borderStyles",propType:"TwStyle",propDesc:"border styles defaults to border-gray-300 and shadow-lg if undefined"}),(0,S.jsx)(Me,{propName:"borderWidth",propType:"TwStyle | SerializedStyles",propDesc:" border width defaults to 2px if undefined"}),(0,S.jsx)(Le,{children:(0,S.jsx)(Qe,{customStyle:{display:"flex",justifyContent:"flex-end"},children:(0,S.jsx)(l.J,{children:function(e){var t=e.open;return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(l.J.Button,{open:t,className:"bg-black",children:(0,S.jsx)("p",{children:"Click me to see the panel"})}),(0,S.jsx)(le.Z,{bgColor:{"--tw-bg-opacity":"1",backgroundColor:"rgb(239 68 68 / var(--tw-bg-opacity))"},pointerStyles:{"--tw-bg-opacity":"1",backgroundColor:"rgb(107 33 168 / var(--tw-bg-opacity))"},borderStyles:{"--tw-bg-opacity":"1",backgroundColor:"rgb(74 222 128 / var(--tw-bg-opacity))"},positionStyles:{position:"absolute",left:"2rem",right:"2rem",top:"7rem","@media (min-width: 768px)":{position:"static",left:"auto"}},borderWidth:{width:"100%"},children:(0,S.jsx)("p",{children:"This is the PopoverPanel"})})]})}})})})]})}),(0,S.jsx)(Fe,{title:"ProfileAvatar.js",children:(0,S.jsxs)(Ie,{title:"ProfileAvatar",description:"A way to display initials or profile picture. the Props are url, w, userID, shadow, isClickable, props.type(teacher, or student).",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"url",propType:"string",propDesc:"src for imageURL (will override the one from userID)"}),(0,S.jsx)(Me,{propName:"acellusID",propType:"number",propDesc:"number represents acellusID (if no url provided, will try to get it from the API using userID)"}),(0,S.jsx)(Me,{propName:"name",propType:"string",propDesc:"first and last name separated"}),(0,S.jsx)(Me,{propName:"customStyles",propType:"TwStyle",propDesc:"custom styles to be applied to the avatar"}),(0,S.jsx)(Me,{propName:"to",propType:"string",propDesc:"The url to navigate to when clicking the avatar"}),(0,S.jsx)(Me,{propName:"onClick",propType:"ClickEventHandler<HTMLButtonElement>",propDesc:"onClick handler callback"}),(0,S.jsx)(Le,{children:(0,S.jsx)(ce.Z,{customStyles:{height:"10rem",width:"10rem",borderStyle:"none"},name:"Timothy Fee"})})]})}),(0,S.jsx)(Fe,{title:"RouterError.js",children:(0,S.jsxs)(Ie,{title:"RouterError",description:"Will add a custom message to a component when an error is thrown. Prevents the whole page from erroring out if there is an error.",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"fallbackMessage",propType:"string",propDesc:'(Optional) error message to show when an error is thrown. Will be "An unknown error occurred" by default'}),(0,S.jsx)(de.Z,{})]})}),(0,S.jsx)(Fe,{title:"SanitizeHTML.js",author:"Gavin Orlich",children:(0,S.jsxs)(Ie,{title:"SanitizeHTML",description:"A component that is used to dangerously set HTML after cleaning it of XSS attacks",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"htmlToClean",propType:"string",propDesc:"The html that is to be put through the sanitizer"}),(0,S.jsx)(Me,{propName:"as",propType:"string",propDesc:"Decides what text tag will be used for the element. Defaults to div",optional:!0}),(0,S.jsx)(Me,{propName:"customStyles",propType:"TwStyle | SerializedStyles",propDesc:"Tailwind string for applying styles to the element",optional:!0}),(0,S.jsx)(Me,{propName:"ref",propType:"MutableRefObject<HTMLElement>",propDesc:"Forwarded ref",optional:!0})]})}),(0,S.jsx)(Fe,{title:"SimpleDropdown.js",children:(0,S.jsxs)(Ie,{title:"SimpleDropdown",description:"A dropdown that displays links/buttons. Props are items, and title",children:[(0,S.jsx)(Me,{propName:"items",propType:"Array",propDesc:"array of Objects that have a name field and either a link field or onClick field, to make the option either a Link or a button"}),(0,S.jsx)(Me,{propName:"title",propType:"string",propDesc:"(Optional) holds the title"}),(0,S.jsx)(Le,{children:(0,S.jsx)(Qe,{customStyle:{borderRadius:"1.5rem",borderWidth:"1px","--tw-bg-opacity":"1",backgroundColor:"rgb(163 163 163 / var(--tw-bg-opacity))"},children:(0,S.jsx)(c.v,{as:"div",className:"ml-3 relative",children:function(e){var t=e.open;return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(c.v.Button,{open:t,"data-testid":"options-button","aria-label":"Menu","data-tooltip":"title",children:"Click me"}),(0,S.jsx)(d.u,{as:h.Fragment,enter:"transition ease-out duration-100",enterFrom:"transform opacity-0 scale-95",enterTo:"transform opacity-100 scale-100",leave:"transition ease-in duration-75",leaveFrom:"transform opacity-100 scale-100",leaveTo:"transform opacity-0 scale-95",children:(0,S.jsx)(at,{children:(0,S.jsx)(me.Z,{"data-testid":"group-button",items:je})})})]})}})})})]})}),(0,S.jsx)(Fe,{title:"StackedProfiles.js",children:(0,S.jsxs)(Ie,{title:"StackedProfiles",description:"Component which displays profile images in a stacked display",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"acellusIDs",propType:"number[]",propDesc:"Array of acellusIDs to display"}),(0,S.jsx)(Me,{propName:"stackLength",propType:"number",propDesc:"The total amount of profile images to display"}),(0,S.jsx)(Le,{children:(0,S.jsx)(ye.Z,{acellusIDs:[1234567890,1234567891,9010020345],stackLength:5})})]})}),(0,S.jsx)(Fe,{title:"Status.js",children:(0,S.jsxs)(Ie,{title:"Status",hasProps:!0,description:"The Status.js Shared component takes three props: messages={['Message 1', 'Message 2']} close={() > setStatus(null)} type={'ERROR'}. You will want to pass in the messages as an array of strings. The close function will be the function that will close the status. The type will be either 'ERROR', 'WARNING' or 'SUCCESS'. This will determine the color of the status.",children:[(0,S.jsx)(Me,{propName:"messages",propDesc:"array of messages that are passed in",propType:"array"}),(0,S.jsx)(Me,{propName:"headerText",propDesc:"the header text",propType:"string"}),(0,S.jsx)(Me,{propName:"close",propDesc:"will render an x button if there is a function passed in. That function will fire once you click the x button",propType:"function"}),(0,S.jsx)(Me,{propName:"type",propDesc:"renders an error message or a warning if there is one",propType:"string"}),(0,S.jsxs)(Le,{children:[H&&(0,S.jsx)(xe.Z,{messages:H.messages,close:function(){return Y(null)},type:H.type}),U&&(0,S.jsx)(xe.Z,{messages:U.messages,close:function(){return G(null)},type:U.type}),oe&&(0,S.jsx)(xe.Z,{messages:oe.messages,close:function(){return re(null)},type:oe.type})]})]})}),(0,S.jsxs)(Fe,{title:"SubNav.js",children:[(0,S.jsxs)(Ie,{title:"SubNav [type=state]",hasProps:!0,description:"A way to navigate pages and modals in a sub navigation. The different types of navs are shown below",children:[(0,S.jsx)(Me,{propName:"type",propDesc:"'query', 'route', or ['state'] - The type of subnav to use propType=' ' "}),(0,S.jsx)(Me,{propName:"navigation",propDesc:"Navigation Object. Inside the object it takes a name and path",propType:"Object"}),(0,S.jsx)(Me,{propName:"selectedTab",propDesc:"The state variable storing the current path",propType:"string"}),(0,S.jsx)(Me,{propName:"setSelectedTab",propDesc:" SetterCallback<string>, The state setter for updating the current path",propType:""}),(0,S.jsx)(Me,{propName:"barStyle",propDesc:"takes in tailwind strings for styling",propType:"TwStyle"}),(0,S.jsx)(Me,{propName:"textStyle",propDesc:"applies styling to the selected text",propType:"TwStyle"}),(0,S.jsx)(Me,{propName:"secondaryTextStyle",propDesc:"applies styling to the unselected text",propType:"TwStyle"}),(0,S.jsx)(Me,{propName:"fullWidth",propDesc:"gives the nav ful width when changed to true",propType:"boolean [false]"}),(0,S.jsx)(Me,{propName:"isModal",propDesc:" Changes the styling to a modal when passed as true",propType:"boolean [false]"}),(0,S.jsx)(Me,{propName:"extraGap",propDesc:"Adds 3 rem of gap",propType:"boolean"}),(0,S.jsx)(Me,{propName:"transparent",propDesc:"Applies bg-transparent",propType:"boolean"}),(0,S.jsx)(Me,{propName:"noGap",propDesc:"Applies !gap-0",propType:"boolean"}),(0,S.jsx)(Me,{propName:"mobilePath",propDesc:"The intended path from the interface to the slash before target location. Example: /teacher/manage-users/",propType:"string"})]}),(0,S.jsxs)(Ie,{title:"SubNav [type='route']",hasProps:!0,description:"SubNav with a Route Type (inherits subNav)",children:[(0,S.jsx)(Me,{propName:"navigation",propDesc:"Navigation Object. Inside the object it takes a name and path",propType:"Object"}),(0,S.jsx)(Me,{propName:"type ['route']",propDesc:"Creates a subnav that uses routes to store selected tab",propType:"string"}),(0,S.jsx)(Le,{children:(0,S.jsx)(be.ZP,{type:"route",navigation:[{path:"",name:"View Components"},{path:"test",name:"Test"},{path:"example",name:"Example"},{path:"foo-bar",name:"Foo Bar"},{path:"alex",name:"Steve"},{path:"tim",name:"In Honor of Tim"}],setSelectedTab:N,selectedTab:j,textStyle:{"--tw-text-opacity":"1",color:"rgb(55 106 215 / var(--tw-text-opacity))"},barStyle:{"--tw-border-opacity":"1",borderColor:"rgb(55 106 215 / var(--tw-border-opacity))","--tw-bg-opacity":"1",backgroundColor:"rgb(55 106 215 / var(--tw-bg-opacity))"}})})]}),(0,S.jsxs)(Ie,{title:"SubNav [type='state']",hasProps:!0,description:"Creates a subnav that uses state to store selected tabs",children:[(0,S.jsx)(Me,{propName:"type ['state'] ",propType:"string",propDesc:"type for the subnav. (Must be State to use this)"}),(0,S.jsx)(Le,{children:(0,S.jsx)(be.ZP,{type:"state",navigation:w,setSelectedTab:R,selectedTab:Z,textStyle:{"--tw-text-opacity":"1",color:"rgb(55 106 215 / var(--tw-text-opacity))"},barStyle:{"--tw-border-opacity":"1",borderColor:"rgb(55 106 215 / var(--tw-border-opacity))","--tw-bg-opacity":"1",backgroundColor:"rgb(55 106 215 / var(--tw-bg-opacity))"}})})]}),(0,S.jsxs)(Ie,{title:"SubNav [type='query']",hasProps:!0,description:"Creates a subnav that uses query parameters to store selected tab",children:[(0,S.jsx)(Me,{propName:"type ['query']",propType:"string",propDesc:"type for the subnav. (Must be Query to use this)"}),(0,S.jsx)(Me,{propName:"letter",propType:"string",propDesc:"The name of the query parameter to store our path in"}),(0,S.jsx)(Le,{children:(0,S.jsx)(be.ZP,{type:"query",navigation:w,setSelectedTab:F,selectedTab:A,letter:"query",textStyle:{"--tw-text-opacity":"1",color:"rgb(55 106 215 / var(--tw-text-opacity))"},barStyle:{"--tw-border-opacity":"1",borderColor:"rgb(55 106 215 / var(--tw-border-opacity))","--tw-bg-opacity":"1",backgroundColor:"rgb(55 106 215 / var(--tw-bg-opacity))"}})})]})]}),(0,S.jsx)(Fe,{title:"ToggleWithText.js",author:"Gavin Riggs",children:(0,S.jsxs)(Ie,{title:"ToggleWithText",hasProps:!0,description:"A toggle component that will display options labeled in text. IMPORTANT: If your toggle has more than three options, it will automatically go to a select on phones",children:[(0,S.jsx)(Me,{propName:"toggles",propDesc:"An array of toggle values in string form that will be displayed (ex. ['Toggle 1', 'Toggle 2', 'Toggle 3'])",propType:""}),(0,S.jsx)(Me,{propName:"toggle",propDesc:"Which toggle from toggles is selected",propType:"string"}),(0,S.jsx)(Me,{propName:"setToggle",propDesc:"Function that will update the currently selected toggle",propType:"function"}),(0,S.jsx)(Me,{propName:"sliderStyles",propDesc:"Styles for the selected option.",propType:"TwStyle"}),(0,S.jsx)(Me,{propName:"containerStyles",propDesc:"Styles for the container / unselected options.",propType:"TwStyle"}),(0,S.jsx)(Me,{propName:"textStyles",propDesc:"Styles for the text of the options.",propType:"TwStyle"}),(0,S.jsx)(Me,{propName:"wrapperStyles",propDesc:"Styles that will be applied to the wrapper",propType:"TwStyle"}),(0,S.jsx)(Le,{children:(0,S.jsx)(Qe,{children:(0,S.jsx)(we.Z,{toggles:Xe,toggle:Ge,setToggle:Ke,sliderStyles:{backgroundColor:"rgb(250 204 21 / 0.75)",":is(.dark &)":{backgroundColor:"rgb(250 204 21 / 0.75)"}},containerStyles:{"--tw-bg-opacity":"1",backgroundColor:"rgb(71 85 105 / var(--tw-bg-opacity))"},textStyles:{paddingLeft:"2rem",paddingRight:"2rem"}})})})]})}),(0,S.jsx)(Fe,{title:"Tooltip.jsx",children:(0,S.jsxs)(Ie,{title:"Tooltip",description:"Tooltip that will appear when hovering over a child element",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"targetRef",propType:"MutableRefObject<HTMLElement>",propDesc:"The element which this tooltip is applied too"}),(0,S.jsx)(Me,{propName:"containerRef",propType:"MutableRefObject<HTMLElement>",propDesc:"The container ref to use for direction flow",optional:!0}),(0,S.jsx)(Me,{propName:"customStyles",propType:"TwStyle | SerializedStyles",propDesc:"Custom styles for the tooltip wrapper",optional:!0}),(0,S.jsx)(Me,{propName:"customContentStyles",propType:"TwStyle | SerializedStyles",propDesc:"Custom styles for the tooltip content",optional:!0}),(0,S.jsx)(Me,{propName:"customArrowStyles",propType:"TwStyle | SerializedStyles",propDesc:"Custom styles for the tooltip arrow",optional:!0}),(0,S.jsx)(Me,{propName:"isStatic",propType:"boolean",propDesc:" Whether or not the tooltip should follow the cursor or lock to the targeted element",defaultValue:!1}),(0,S.jsx)(Me,{propName:"noHover",propType:"boolean",propDesc:"Whether or not the tooltip should stay if hovered over",defaultValue:!1}),(0,S.jsx)(Me,{propName:"isPopup",propType:"boolean",propDesc:"Whether or not the tooltip is a popup; a tooltip which disappears after a set amount of time",defaultValue:!1}),(0,S.jsx)(Me,{propName:"popupTime",propType:"number",propDesc:"How long the popup should display",defaultValue:1e3}),(0,S.jsx)(Me,{propName:"xDirection",propType:"'left' | 'center' | 'right' ",propDesc:"The x quadrant to align the tooltip to",optional:!0}),(0,S.jsx)(Me,{propName:"yDirection",propType:"'top' | 'bottom'",propDesc:"The y quadrant to align the tooltip to",optional:!0}),(0,S.jsx)(Me,{propName:"xOffset",propType:"number",propDesc:"The x offset to apply to the tooltip",defaultValue:0}),(0,S.jsx)(Me,{propName:"yOffset",propType:"number",propDesc:"The y offset to apply to the tooltip",defaultValue:0}),(0,S.jsx)(Me,{propName:"children",propType:"ReactNode",propDesc:"what you want to be rendered inside of the tooltip"}),(0,S.jsx)(Ie,{title:"TooltipText",description:"Styled text to pass into the tooltip as children."}),(0,S.jsxs)(Le,{children:[(0,S.jsx)(fe.Z,{targetRef:n,containerRef:n,children:(0,S.jsxs)(fe.k,{children:["I guess I wasn't scary enough for you to not hover. ",(0,S.jsx)("br",{})," Brave you are (yoda voice)"]})}),(0,S.jsx)(st,{ref:n,children:(0,S.jsx)("p",{children:"Hover over me IF YOU DARE!!!"})})]})]})}),(0,S.jsx)(Fe,{title:"VideoPlayer.js",description:"Props that are used are shown below:",children:(0,S.jsxs)(Ie,{title:"VideoPlayer",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"src",propDesc:"the url of the video",propType:"string"}),(0,S.jsx)(Me,{propName:"onEnd",propDesc:"function to run when the video ends",propType:"function"}),(0,S.jsx)(Me,{propName:"showControls",propDesc:"whether or not to show the video controls",propType:"boolean"}),(0,S.jsx)(Me,{propName:"showSpeedControls",propDesc:"whether or not to show the video speed controls",propType:"boolean"}),(0,S.jsx)(Me,{propName:"shouldSaveVideoPosition",propType:"boolean",propDesc:"boolean that will determine if we should save the video position"}),(0,S.jsx)(Me,{propName:"onError",propDesc:"function to run when there is an error with the video",propType:"function"}),(0,S.jsx)(Me,{propName:"autoplay",propDesc:"whether or not to autoplay the video",propType:"boolean"}),(0,S.jsx)(Me,{propName:"playerRef",propDesc:"ref to the player",propType:"MutableRefObject"}),(0,S.jsx)(Me,{propName:"setVideoProgressPercent",propDesc:"function to set the percentage of where in the video the user is in",propType:"function"}),(0,S.jsx)(Me,{propName:"initialLoading",propDesc:"if true, don't start the video yet",propType:"boolean"}),(0,S.jsx)(Me,{propName:"transitionDivPosition",propDesc:"what position the problem is in (0 - waiting to load, 1 - answering problem, 2 - hiding the problem, 3 - problem hidden )",propType:"number (0,1,2,3)"}),(0,S.jsx)(Le,{children:(0,S.jsx)(ve.Z,{src:"https://media1.acellus.com/Library/IAS_KSCIENCE_Plts Anim Hp EaOr-A-v2.mp4",showControls:!0,showSpeedControls:!0,playerRef:qe})})]})}),(0,S.jsxs)(Fe,{author:"David Billings",title:"Wrapper.js",description:"Gives all the pages consistent padding on the sides. It is being used to add the padding on the sides of this page, which changes responsively.",children:[(0,S.jsx)(Ie,{hasProps:!0,title:"WrapperStyles",description:"A tw string with a css variable (--spacing) being set. This variable is set to different values responsively, to adjust the spacing on the sides responsively.",children:(0,S.jsx)(Me,{propName:"student",propType:"boolean",propDesc:"If student is passed in, a max width is added. Designed to be passed in when used on a student page."})}),(0,S.jsx)(Ie,{title:"Wrapper",description:"Uses the variable from WrapperStyles, gives you a div with px-[var(--spacing)]. This is used on most pages where a normal wrapper is needed to add spacing on the sides."})]}),(0,S.jsx)(Fe,{title:"DraggableItem.js",author:"Dillon Fruhwirth",children:(0,S.jsxs)(Ie,{title:"DraggableItem",description:"Contains the js logic for draggable elements. Props needed are: startFunction, moveFunction, endFunction, className, is Draggable, and children.",hasProps:!0,children:[(0,S.jsx)(Me,{propName:"type",propType:'"translate" | "absolute"',propDesc:"Whether to move using translate or absolute positioning. Translate is better if you want to be able to use a transition, absolute if you need to drag something from a scrollable element"}),(0,S.jsx)(Me,{propName:"onStart",propType:"function",propDesc:"Function to execute on dragstart or touchstart",optional:!0}),(0,S.jsx)(Me,{propName:"onMove",propType:"function",propDesc:"Function to execute on drag or touchmove",optional:!0}),(0,S.jsx)(Me,{propName:"onEnd",propType:"function",propDesc:"Function to execute on dragend or touchend",optional:!0}),(0,S.jsx)(Me,{propName:"shouldCenter",propType:"boolean",propDesc:"Whether or not to center the item on the mouse as you drag",optional:!0}),(0,S.jsx)(Me,{propName:"customStyles",propType:"TwStyle",propDesc:"tw styles that can be added",optional:!0}),(0,S.jsx)(Me,{propName:"isDraggable",propType:"boolean",propDesc:"Bool that can switch off ability to drag",defaultValue:!0,optional:!0}),(0,S.jsx)(Me,{propName:"children",propType:"ReactNode",propDesc:"Children that are needing to be rendered inside of the component",optional:!0}),(0,S.jsx)(Me,{propName:"ref",propType:"MutableRefObject<HTMLElement>",propDesc:"Forwarded ref",optional:!0}),(0,S.jsxs)(Le,{children:[(0,S.jsxs)(_.Z,{type:"translate",children:[(0,S.jsx)("img",{src:Ze.StickerCandy}),(0,S.jsx)("span",{className:"text-black",children:"Translate"})]}),(0,S.jsxs)(_.Z,{type:"absolute",children:[(0,S.jsx)("img",{src:Ze.StickerBees}),(0,S.jsx)("span",{className:"text-black",children:"Absolute"})]})]})]})})]})}function Ae(e){var t=e.title,o=e.description,r=e.schoolLevel;return(0,S.jsx)(We,{schoolLevel:r,children:(0,S.jsx)(je.i,{maxWidth:!0,children:(0,S.jsxs)(ke.$,{children:[(0,S.jsx)(Be,{children:t}),(0,S.jsx)(Oe,{children:o})]})})})}function Fe(e){var t=e.title,o=e.noWrapper,r=e.children,a=e.author;return(0,S.jsxs)(Ve,{children:[(0,S.jsxs)(je.i,{maxWidth:!0,children:[(0,S.jsxs)(Ye,{children:[t," File"]}),a&&(0,S.jsxs)(ze,{children:[(0,Pe.bh)(Array.isArray(a)?a.length:1,"Author",!1),":"," ",Array.isArray(a)?[a.slice(0,-1).join(", "),a[a.length-1]].filter((function(e){return e})).join(" and "):a]})]}),(0,S.jsx)(He,{maxWidth:!0,noWrapper:o,children:r})]})}function Ie(e){var t=e.title,o=e.description,r=e.children,a=e.hasProps,p=void 0!==a&&a,s=e.forwardRef,i=void 0!==s&&s;return(0,S.jsxs)(Xe,{children:[(0,S.jsxs)(Je,{children:[(0,S.jsxs)(Ge,{children:[t," Component"]}),i&&(0,S.jsx)(Ue,{"data-tooltip":!0,"aria-label":"React.MutableRefObject<".concat("string"===typeof i?i:"any",">"),children:"forwardRef"})]}),(0,S.jsx)(Ke,{children:o}),(0,S.jsx)(qe,{hasProps:p,children:"Props:"}),(0,S.jsx)($e,{hasProps:p,children:"- No props"}),r]})}var Le=n.Z.div({display:"flex",flexDirection:"column",gap:"2rem",paddingTop:"1.5rem"});function Me(e){var t=e.propName,o=e.propType,r=e.propDesc,a=e.optional,p=void 0!==a&&a,s=e.defaultValue;return(0,S.jsxs)(ze,{children:["-"," ",(0,S.jsx)(_e,{optional:p,defaultValue:s,"data-tooltip":void 0!==s||void 0,"aria-label":"By default: ".concat("function"===typeof s?s.toString():JSON.stringify(s)),children:t})," ","(",o,") - ",r]})}var ze=n.Z.p({fontFamily:"Inter",fontSize:"1.4rem !important",lineHeight:"2 !important","--tw-text-opacity":"1",color:"rgb(75 85 99 / var(--tw-text-opacity))"}),We=n.Z.div((function(e){var t=e.schoolLevel;return["E"===t?{"--tw-bg-opacity":"1",backgroundColor:"rgb(139 92 246 / var(--tw-bg-opacity))"}:"M"===t?{"--tw-bg-opacity":"1",backgroundColor:"rgb(8 145 178 / var(--tw-bg-opacity))"}:{"--tw-bg-opacity":"1",backgroundColor:"rgb(59 130 246 / var(--tw-bg-opacity))"}]})),Be=n.Z.h2({fontFamily:"Ebrima",fontSize:"3.5rem !important","--tw-text-opacity":"1",color:"rgb(255 255 255 / var(--tw-text-opacity))"}),Oe=(0,n.Z)(ze)({"--tw-text-opacity":"1",color:"rgb(219 234 254 / var(--tw-text-opacity))"}),Ve=(0,n.Z)(ke.$)({display:"flex",flexDirection:"column",gap:"2.5rem",borderBottomWidth:"1px",borderColor:"rgb(0 0 0 / 0.1)",paddingTop:"4rem !important",paddingBottom:"4rem !important"}),He=(0,n.Z)(je.i)((function(e){return[e.noWrapper?{padding:"0px !important"}:{display:"flex",flexDirection:"column",gap:"2.5rem"}]})),Ye=n.Z.h2({fontFamily:"Ebrima",fontSize:"2.5rem !important",fontWeight:"700",lineHeight:"1.5 !important","--tw-text-opacity":"1",color:"rgb(31 41 55 / var(--tw-text-opacity))"}),Xe=n.Z.div({position:"relative",width:"fit-content",maxWidth:"100%",overflowX:"auto",borderRadius:"0.75rem",borderWidth:"1px","--tw-border-opacity":"1",borderColor:"rgb(209 213 219 / var(--tw-border-opacity))","--tw-bg-opacity":"1",backgroundColor:"rgb(255 255 255 / var(--tw-bg-opacity))",paddingLeft:"2.5rem",paddingRight:"2.5rem",paddingTop:"2rem",paddingBottom:"2rem","--tw-shadow":"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)","--tw-shadow-colored":"0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color)",boxShadow:"var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)"}),Je=n.Z.div({display:"flex",alignItems:"center",justifyContent:"space-between"}),Ue=n.Z.span({borderRadius:"0.375rem","--tw-bg-opacity":"1",backgroundColor:"rgb(229 231 235 / var(--tw-bg-opacity))",paddingLeft:"1rem",paddingRight:"1rem",paddingTop:"0.25rem",paddingBottom:"0.25rem",fontSize:"1.4rem"}),Ge=n.Z.h6({marginTop:"0.5rem",marginBottom:"0.5rem",width:"fit-content",borderLeftWidth:"1px","--tw-border-opacity":"1",borderColor:"rgb(31 41 55 / var(--tw-border-opacity))","--tw-bg-opacity":"1",backgroundColor:"rgb(229 231 235 / var(--tw-bg-opacity))",paddingLeft:"1rem",paddingRight:"1rem",paddingTop:"0.25rem",paddingBottom:"0.25rem",fontFamily:"monospace",fontSize:"1.6rem !important","--tw-text-opacity":"1",color:"rgb(31 41 55 / var(--tw-text-opacity))"}),Ke=(0,n.Z)(ze)({paddingBottom:"1.5rem"}),qe=(0,n.Z)(ze)((function(e){return[e.hasProps?{fontWeight:"700"}:{display:"none"}]})),$e=(0,n.Z)(ze)((function(e){return[e.hasProps&&{display:"none"}]})),_e=(0,n.Z)(ze)((function(e){var t=e.optional,o=e.defaultValue;return[{display:"inline",fontWeight:"700"},t||void 0!==o?{"--tw-text-opacity":"1",color:"rgb(249 115 22 / var(--tw-text-opacity))"}:{"--tw-text-opacity":"1",color:"rgb(59 130 246 / var(--tw-text-opacity))"},void 0!==o&&{textDecorationLine:"underline"}]})),Qe=n.Z.div((function(e){return[{height:"auto",width:"100%",paddingLeft:"2.5rem",paddingRight:"2.5rem",paddingTop:"1.25rem",paddingBottom:"1.25rem"},e.customStyle]})),et=n.Z.img({zIndex:"0",marginLeft:"auto",marginRight:"auto",height:"16rem",borderRadius:"9999px","@media (min-width: 640px)":{marginLeft:"0px",marginRight:"0px"},"@media (min-width: 1024px)":{height:"12rem"},"@media (min-width: 1280px)":{height:"14rem"}}),tt=n.Z.div({position:"relative",zIndex:"10",width:"fit-content"}),ot=n.Z.div({inset:"0px",display:"flex",height:"24rem",width:"24rem",alignItems:"center",justifyContent:"center",gap:"0.5rem","--tw-bg-opacity":"0.8",backgroundColor:"rgb(31 41 55 / var(--tw-bg-opacity))","--tw-text-opacity":"1",color:"rgb(255 255 255 / var(--tw-text-opacity))"}),rt=n.Z.span({fontSize:"2rem",letterSpacing:"0.025em"}),at=n.Z.div({position:"absolute",top:"-4rem",right:"50%"}),pt=(0,n.Z)(m.r)({"--tw-text-opacity":"1 !important",color:"rgb(83 126 220 / var(--tw-text-opacity)) !important"}),st=(n.Z.div({borderRadius:"0.75rem","--tw-bg-opacity":"1",backgroundColor:"rgb(31 41 55 / var(--tw-bg-opacity))",paddingLeft:"8rem",paddingRight:"8rem",paddingTop:"2.5rem",paddingBottom:"2.5rem"}),n.Z.div({position:"relative",display:"flex",height:"20rem",width:"20rem",alignItems:"center",borderRadius:"1rem","--tw-bg-opacity":"1",backgroundColor:"rgb(249 115 22 / var(--tw-bg-opacity))",textAlign:"center"}))}}]);