@junyiacademy/ui-test 1.6.9 → 1.7.0

package/dist/index.js.umd.js

@@ -0,0 +1,2 @@
+(function(a,h){typeof exports=="object"&&typeof module<"u"?h(exports,require("@mui/material/styles"),require("react/jsx-runtime"),require("react"),require("@mui/material"),require("@mui/icons-material/ArrowRightRounded"),require("@mui/material/MenuItem"),require("@mui/material/FormHelperText"),require("@mui/material/InputBase"),require("@mui/material/InputLabel"),require("@mui/material/OutlinedInput"),require("@mui/material/Input"),require("@mui/material/Button"),require("@mui/material/ButtonGroup"),require("@mui/material/FormControlLabel"),require("@mui/material/Radio"),require("@mui/material/TextField"),require("@mui/material/useMediaQuery"),require("@mui/icons-material/Close"),require("@mui/material/Chip")):typeof define=="function"&&define.amd?define(["exports","@mui/material/styles","react/jsx-runtime","react","@mui/material","@mui/icons-material/ArrowRightRounded","@mui/material/MenuItem","@mui/material/FormHelperText","@mui/material/InputBase","@mui/material/InputLabel","@mui/material/OutlinedInput","@mui/material/Input","@mui/material/Button","@mui/material/ButtonGroup","@mui/material/FormControlLabel","@mui/material/Radio","@mui/material/TextField","@mui/material/useMediaQuery","@mui/icons-material/Close","@mui/material/Chip"],h):(a=typeof globalThis<"u"?globalThis:a||self,h(a.JunyiJUI={},a.styles,a.jsxRuntime,a.React,a.MaterialUI,a.ArrowRightRoundedIcon,a.MenuItem,a.FormHelperText,a.InputBase,a.InputLabel,a.OutlinedInput,a.Input,a.Button$1,a.ButtonGroup$1,a.FormControlLabel,a.Radio$1,a.TextField$1,a.useMediaQuery,a.Close,a.Chip$1))})(this,function(a,h,t,k,r,Z,R,U,V,F,$,b,B,H,E,ee,te,oe,re,Q){"use strict";const w={yellow:{200:"#FFFF99"},blue:{600:"#4990E2"},lightGreen:{400:"#99CC66"}},ne=e=>({components:{MuiLocalizationProvider:{defaultProps:{localeText:{...e}}}}}),_={hours:"小時",minutes:"分鐘",seconds:"秒",meridiem:"子午線"},ae=ne({previousMonth:"上個月",nextMonth:"下個月",openPreviousView:"上一個視圖",openNextView:"下一個視圖",calendarViewSwitchingButtonAriaLabel:e=>e==="year"?"年視圖已打開，切換為日曆視圖":"日曆視圖已打開，切換為年視圖",start:"開始",end:"結束",cancelButtonLabel:"取消",clearButtonLabel:"清除",okButtonLabel:"確認",todayButtonLabel:"今天",nextStepButtonLabel:"下一步",datePickerToolbarTitle:"選擇日期",dateTimePickerToolbarTitle:"選擇日期和時間",timePickerToolbarTitle:"選擇時間",dateRangePickerToolbarTitle:"選擇時間範圍",clockLabelText:(e,o)=>`選擇 ${_[e]}. ${o===null?"未選擇時間":`已選擇${o}`}`,hoursClockNumberText:e=>`${e}小時`,minutesClockNumberText:e=>`${e}分鐘`,secondsClockNumberText:e=>`${e}秒`,selectViewText:e=>`選擇 ${_[e]}`,calendarWeekNumberHeaderLabel:"週數",calendarWeekNumberHeaderText:"#",calendarWeekNumberAriaLabelText:e=>`第${e}週`,calendarWeekNumberText:e=>`${e}`,openDatePickerDialogue:e=>e?`選擇日期，已選擇${e}`:"選擇日期",openTimePickerDialogue:e=>e?`選擇時間，已選擇${e}`:"選擇時間",timeTableLabel:"選擇時間",dateTableLabel:"選擇日期",fieldYearPlaceholder:e=>"Y".repeat(e.digitAmount),fieldMonthPlaceholder:e=>e.contentType==="letter"?"MMMM":"MM",fieldDayPlaceholder:()=>"DD",fieldWeekDayPlaceholder:e=>e.contentType==="letter"?"EEEE":"EE",fieldHoursPlaceholder:()=>"hh",fieldMinutesPlaceholder:()=>"mm",fieldSecondsPlaceholder:()=>"ss",fieldMeridiemPlaceholder:()=>"aa"}),J=h.createTheme(),C=['"Noto Sans TC"',"PingFang",'"Microsoft JhengHei"',"Arial","sans-serif"].join(","),ie=h.createTheme({typography:{fontFamily:C,h1:{fontFamily:C,fontSize:96,lineHeight:"112px"},h2:{fontFamily:C,fontSize:60,lineHeight:1.2},h3:{fontFamily:C,fontSize:48,lineHeight:1.167},h4:{fontFamily:C,fontSize:34,lineHeight:1.235},h5:{fontFamily:C,fontSize:24,lineHeight:1.334},h6:{fontFamily:C,fontSize:20,lineHeight:1.6},subtitle1:{fontFamily:C,fontSize:16,lineHeight:1.75},subtitle2:{fontFamily:C,fontSize:14,lineHeight:1.57},body1:{fontFamily:C,fontSize:16,lineHeight:1.5},body2:{fontFamily:C,fontSize:14,lineHeight:1.43},button:{fontFamily:C},caption:{fontFamily:C,fontSize:12,lineHeight:1.66},overline:{fontFamily:C,fontSize:12,lineHeight:2.66}},palette:{primary:{light:"#82C0FF",main:w.blue[600],dark:"#0063B0"},secondary:{light:"#FFD759",main:"#F5A623",dark:"#BD7700",contrastText:"#FFFFFF"},cancel:{main:"#C4C4C4",contrastText:"#FFFFFF"},primaryGreen:{light:"#9DD49E",main:"#5CB85D",dark:"#218838",contrastText:"#FFFFFF"},blueGreen:{main:"#19A696",contrastText:"#FFFFFF"},grassGreen:J.palette.augmentColor({color:{main:"#80BB5A",contrastText:"#FFFFFF"}}),darkOrange:J.palette.augmentColor({color:{main:"#D55704",contrastText:"#FFFFFF"}}),progressPrimary:{main:w.blue[600],dark:w.blue[600],light:"#FFFFFF",contrastText:"#FFFFFF"},progressUpgraded:{main:"#EEEEEE",light:"#FFF",dark:"#D4D4D4",contrastText:"#000000DE"},progressUnstarted:{main:"#EEEEEE",light:"#FFF",dark:"#D4D4D4",contrastText:"#000000DE"},progressStart:{main:"#BEDEFF",light:"#FFFFFF",dark:"#ABC8E5",contrastText:"#000000DE"},progressLevel1:{main:"#82C0FF",light:"#FFFFFF",dark:"#75ADE5",contrastText:"#000000DE"},progressLevel2:{main:w.blue[600],light:"#FFFFFF",dark:"#4180C9",contrastText:"#FFFFFF"},progressLevel3:{main:"#0063B0",light:"#FFFFFF",dark:"#005596",contrastText:"#FFFFFF"},progressFinished:{main:"#05396B",light:"#FFFFFF",dark:"#042B52",contrastText:"#FFFFFF"},progressStruggle:{main:"#C62828",light:"#FFFFFF",dark:"#AD2323",contrastText:"#FFFFFF"},text:{secondary:"rgba(0, 0, 0, 0.54)",disabled:"rgba(0, 0, 0, 0.38)"}},components:{MuiCssBaseline:{styleOverrides:{body:{color:"rgba(0, 0, 0, 0.6)",lineHeight:"1.2",WebkitFontSmoothing:"auto","& .swal2-container":{zIndex:1350},button:{fontFamily:C}},"ol, ul":{listStyle:"none"},"h1, h2, h3, h4, h5, h6, p":{color:"rgba(0, 0, 0, 0.87)",margin:0,padding:0,border:0},a:{color:w.blue[600],textDecoration:"none",cursor:"pointer"},"a:hover, a:focus":{color:"#0063b0"}}},MuiButton:{styleOverrides:{sizeSmall:{fontSize:12,fontWeight:500,lineHeight:"22px"},sizeMedium:{fontSize:14,fontWeight:500,lineHeight:"24px"},sizeLarge:{fontSize:15,fontWeight:500,lineHeight:"26px"}}}}},ae),z=k.forwardRef((e,o)=>{const{children:n,value:s="",...f}=e,{sx:i,...p}=f;return t.jsx(r.MenuItem,{ref:o,sx:[u=>({whiteSpace:"unset",color:u.palette.text.primary,[`&.${R.menuItemClasses.selected}`]:{backgroundColor:u.palette.grey[300],"&:hover":{backgroundColor:u.palette.grey[200]}}}),...Array.isArray(i)?i:[i]],value:s,...p,children:n})});z.displayName="SelectMenuItem";const se=h.styled(r.InputLabel,{shouldForwardProp:e=>e!=="color"})(({color:e="primary",theme:o})=>({color:o.palette.text.secondary,[`&.${F.inputLabelClasses.outlined}`]:{[`&:not(.${F.inputLabelClasses.disabled}) .${F.inputLabelClasses.focused}`]:{color:o.palette.action.active},[`&.${F.inputLabelClasses.sizeSmall}:not(.${F.inputLabelClasses.shrink})`]:{transform:"translate(12px, 12px) scale(1)"}},[`&.${F.inputLabelClasses.shrink}:not(.${F.inputLabelClasses.error}):not(.${F.inputLabelClasses.disabled}).${F.inputLabelClasses.focused}`]:{color:o.palette[e].main},[`&.${F.inputLabelClasses.shrink}`]:{backgroundColor:"#ffffff",padding:"0 2px"}})),le=h.styled(r.OutlinedInput)(({theme:e})=>({[`&.${$.outlinedInputClasses.root}`]:{[`&.${$.outlinedInputClasses.error}.${$.outlinedInputClasses.focused} .${$.outlinedInputClasses.notchedOutline}`]:{borderColor:`${e.palette.error.main}`},[`&.${V.inputBaseClasses.sizeSmall} > .${V.inputBaseClasses.input}`]:{padding:"12.5px 15px 12.5px 12px"}},[`& .${$.outlinedInputClasses.input}`]:{color:e.palette.text.primary,"&:focus":{background:"rgba(0,0,0,0)"}}})),de=({label:e,helperText:o,FormControlProps:n={},InputLabelProps:s={},InputProps:f={},SelectProps:i={},MenuProps:p={},FormHelperTextProps:u={},className:x,children:l,color:g="primary",size:c="small",paperMaxHeight:m="auto",error:d=!1,hasLabel:y=!0,hasShrink:S=!1,value:M="",disabled:P=!1})=>{const q=!!o,{sx:A=[],...O}=n,{sx:T=[],...j}=u;return t.jsxs(r.FormControl,{sx:[G=>({backgroundColor:"white","&:hover":{[`& :not(.${$.outlinedInputClasses.disabled}):not(.${$.outlinedInputClasses.error}) .${$.outlinedInputClasses.notchedOutline}`]:{borderColor:G.palette[g].main}}}),...Array.isArray(A)?A:[A]],size:c,disabled:P,error:d,color:g,className:x,...O,children:[y&&t.jsx(se,{color:g,shrink:S?!0:void 0,...s,children:e}),t.jsx(r.Select,{value:M,label:y?e:void 0,MenuProps:{PaperProps:{sx:{maxHeight:m}},disableAutoFocusItem:!0,anchorOrigin:{vertical:2,horizontal:"left"},transformOrigin:{vertical:"top",horizontal:"left"},...p},input:t.jsx(le,{color:g,label:y?e:void 0,disabled:P,...f}),...i,children:l}),q&&t.jsx(r.FormHelperText,{sx:[{[`&.${U.formHelperTextClasses.root}`]:{marginLeft:0}},...Array.isArray(T)?T:[T]],...j,children:o})]})},pe=h.styled(r.InputLabel,{shouldForwardProp:e=>e!=="color"})(({color:e="primary",theme:o})=>({[`&.${F.inputLabelClasses.root}`]:{color:o.palette.text.disabled},[`&.${F.inputLabelClasses.focused}`]:{color:o.palette[e].main},[`&.${F.inputLabelClasses.error}`]:{color:o.palette.error.main}})),ce=h.styled(r.Input,{shouldForwardProp:e=>e!=="color"})(({color:e="primary",theme:o})=>({color:o.palette.text.primary,[`& .${b.inputClasses.input}`]:{"&:focus":{background:"rgba(0,0,0,0)"}},[`&.${b.inputClasses.underline}:not(.${b.inputClasses.disabled}):not(.${b.inputClasses.error})`]:{"&:after,&:hover:before":{borderBottomColor:o.palette[e].main}},[`&.${b.inputClasses.underline}.${b.inputClasses.error}:not(.${b.inputClasses.disabled})`]:{"&:after,&:hover:before":{borderBottomColor:o.palette.error.main}}})),ue=({label:e,helperText:o,FormControlProps:n={},InputLabelProps:s={},InputProps:f={},SelectProps:i={},FormHelperTextProps:p={},className:u,children:x,color:l="primary",size:g="small",paperMaxHeight:c="auto",error:m=!1,hasLabel:d=!0,hasShrink:y=!1,value:S="",disabled:M=!1})=>{const P=!!o;return t.jsxs(r.FormControl,{variant:"standard",color:l,size:g,disabled:M,error:m,className:u,...n,children:[t.jsx(pe,{color:l,shrink:y?!0:void 0,...s,children:d?e:void 0}),t.jsx(r.Select,{value:S,MenuProps:{PaperProps:{sx:{maxHeight:c}},anchorOrigin:{vertical:2,horizontal:"left"},transformOrigin:{vertical:"top",horizontal:"left"}},input:t.jsx(ce,{color:l,...f}),...i,children:x}),P&&t.jsx(r.FormHelperText,{...p,children:o})]})},D=({variant:e,...o})=>e==="outlined"?t.jsx(de,{...o}):t.jsx(ue,{...o}),N="請選擇",W="option-for-reset",he="",xe=(e,o,n)=>{const s=n&&e===0?W:he;return o?.[e+1]||s},ge=({topicList:e,onTopicSelected:o,hasArrow:n,selectedTopicIds:s,onResetClick:f=()=>{},hasResetOption:i=!1})=>{const p=r.useMediaQuery(g=>g.breakpoints.up("md")),[u,x]=k.useState([]),l=(g,c)=>{if(g.target.value===W){f();return}o(g.target.value,{layerNumber:c}),x(m=>[...m.slice(0,c+1),!1])};return t.jsx(r.Box,{sx:{display:"flex",alignItems:"center",flexWrap:"wrap"},children:e.map((g,c)=>{const m=u[c]||!s[c+1];return g.isError?null:t.jsxs(r.Box,{sx:{display:"flex",alignItems:"center",width:p?void 0:"100%"},children:[n&&c!==0&&t.jsx(Z,{sx:d=>({margin:d.spacing(-1,-1.5),fontSize:d.spacing(7),color:"#444"}),fontSize:"large","data-testid":"topic-filter-arrow"}),g.isLoading?t.jsx(D,{variant:"outlined",size:"small",label:"載入資料中...",disabled:!0,FormControlProps:{sx:d=>({width:p?220:"100%",margin:d.spacing(1)})}}):t.jsxs(D,{variant:"outlined",size:"small",label:N,paperMaxHeight:412,hasLabel:m,value:xe(c,s,i),SelectProps:{"data-testid":`layered-topic-${c}`},InputProps:{inputProps:{"aria-label":`layered-topic-${c}`},onChange:d=>{l(d,c)},onFocus:()=>{x(d=>{const y=[...d];return y[c]=!0,y})},onBlur:()=>{x(d=>{const y=[...d];return y[c]=!1,y})}},FormControlProps:{sx:d=>({width:p?220:"100%",margin:d.spacing(1)})},children:[t.jsx(z,{disabled:!0,value:"",children:N}),i&&c===0&&t.jsx(z,{value:W,children:"所有科目"}),g.data?.children?.map(d=>t.jsx(z,{value:d.id,"data-testid":`layered-menuitem-${c}`,"data-is-content-topic":d.hasContentChild,children:d.title},d.id))]})]},c)})})};function v(e){return`${e.charAt(0).toUpperCase()}${e.slice(1)}`}const L=k.forwardRef((e,o)=>{const{children:n,...s}=e;return t.jsx(r.Button,{ref:o,...s,children:n})});L.displayName="Button";const fe=h.styled(L,{shouldForwardProp:e=>e!=="active"})(({theme:e,active:o,color:n="primary"})=>({[`&.${B.buttonClasses.outlined}${v(n)}`]:{backgroundColor:o?e.palette[n].main:e.palette.common.white,color:o?e.palette.common.white:e.palette[n].main,borderColor:e.palette[n].main,"&:hover":{backgroundColor:o?e.palette[n].main:h.alpha(e.palette[n].main,.1)},[`&.${B.buttonClasses.disabled}`]:{backgroundColor:e.palette.common.white,borderColor:e.palette.action.disabledBackground,color:e.palette.action.disabled}},[`&.${B.buttonClasses.text}${v(n)}`]:{"&:hover":{backgroundColor:h.alpha(e.palette[n].main,.1)}}})),Fe=h.styled(r.Button)(({theme:e,color:o="primary",loading:n})=>({[`&.${B.buttonClasses.outlined}${v(o)}`]:{borderColor:!n&&e.palette[o].main,"&:hover":{backgroundColor:h.alpha(e.palette[o].main,.1)},[`&.${B.buttonClasses.disabled}`]:{backgroundColor:!n&&e.palette.common.white,borderColor:!n&&e.palette.action.disabledBackground,color:!n&&e.palette.action.disabled}},[`&.${B.buttonClasses.text}${v(o)}`]:{"&:hover":{backgroundColor:h.alpha(e.palette[o].main,.1)}}})),me=({children:e,...o})=>t.jsx(Fe,{...o,children:t.jsx("span",{children:e})}),Y=k.forwardRef((e,o)=>{const{children:n,...s}=e;return t.jsx(r.ButtonGroup,{ref:o,...s,children:n})});Y.displayName="ButtonGroup";const be=h.styled(Y)(({color:e="primary",theme:o})=>({[`&.${H.buttonGroupClasses.outlined} > .${H.buttonGroupClasses.grouped}${v(e)}.${H.buttonGroupClasses.grouped}.${H.buttonGroupClasses.disabled}`]:{borderColor:h.alpha(o.palette[e].main,.5),color:h.alpha(o.palette[e].main,.5)}})),Ce=h.styled(r.FormControlLabel)(({theme:e})=>({[`& .${E.formControlLabelClasses.label}`]:{color:e.palette.text.secondary,[`&.${E.formControlLabelClasses.disabled}`]:{color:e.palette.text.disabled}},[`& .${ee.radioClasses.checked} + .${E.formControlLabelClasses.label}`]:{color:e.palette.text.primary}})),ye=({checked:e,disabled:o,label:n,labelPlacement:s,value:f,FormControlLabelProps:i={},RadioProps:p={},TypographyProps:u={},color:x="secondary",size:l="medium",caption:g=""})=>{const{sx:c=[],...m}=p,{sx:d=[],...y}=u;return t.jsxs(t.Fragment,{children:[t.jsx(Ce,{control:t.jsx(r.Radio,{sx:[S=>({color:S.palette.text.primary}),...Array.isArray(c)?c:[c]],color:x,size:l,...m}),checked:e,disabled:o,label:n,labelPlacement:s,value:f,...i}),g&&t.jsx(r.Typography,{sx:[S=>({color:S.palette.text.disabled,margin:"0 0 0 30px"}),...Array.isArray(d)?d:[d]],variant:"body2",...y,children:g})]})},$e=h.styled(r.TextField)(({label:e,color:o="primary",theme:n})=>({[`& .${F.inputLabelClasses.error}`]:{[`&:not(.${F.inputLabelClasses.shrink})`]:{color:n.palette.text.secondary},[`&.${F.inputLabelClasses.disabled}`]:{color:n.palette.text.disabled}},[`& .${F.inputLabelClasses.error}.${F.inputLabelClasses.focused}`]:{color:n.palette.error.main},[`& .${b.inputClasses.underline}:not(.${b.inputClasses.disabled})`]:{[`&.MuiInputBase-color${v(o)}:hover:before`]:{borderColor:n.palette[o].main}},[`& .${b.inputClasses.disabled} .${$.outlinedInputClasses.notchedOutline}`]:{borderStyle:"dotted"},[`& .${b.inputClasses.error}.${b.inputClasses.focused} .${$.outlinedInputClasses.notchedOutline}`]:{borderColor:n.palette.error.main},[`&.${te.textFieldClasses.root} :not(.${b.inputClasses.disabled}):not(.${b.inputClasses.error})`]:{[`&.MuiInputBase-color${v(o)}:hover .${$.outlinedInputClasses.notchedOutline}`]:{borderColor:n.palette[o].main}},[`& .${$.outlinedInputClasses.notchedOutline}`]:{"& > legend":{maxWidth:e===""&&0}}})),Te=e=>{const{slotProps:o={},...n}=e,{inputLabel:s={},input:f={},formHelperText:i={},...p}=o,u=!!("endAdornment"in f&&f?.endAdornment);return t.jsx($e,{slotProps:{inputLabel:{shrink:u?!0:void 0,...s},input:f,formHelperText:{...i,sx:[x=>({[`&.${U.formHelperTextClasses.root}`]:{marginLeft:0,[`&.${b.inputClasses.error}`]:{color:x.palette.error.main}}})]},...p},...n})},K=k.forwardRef((e,o)=>{const{title:n,content:s,imageUrl:f,confirmButtonProps:i,cancelButtonProps:p,closeButtonProps:u,context:x}=e;return t.jsxs(r.Card,{ref:o,sx:l=>({zIndex:"10000",backgroundColor:"white",borderRadius:"10px",boxShadow:"4px 6px 20px 0px #00000040",padding:0,width:"400px",[l.breakpoints.up(1024)]:{position:"fixed",left:"64px",bottom:"50px"},[l.breakpoints.down(451)]:{width:"80%"}}),children:[t.jsx(r.CardHeader,{sx:l=>({padding:l.spacing(u?1:2,2,0)}),action:u&&t.jsx(r.IconButton,{onClick:()=>{u instanceof Object&&u?.onClick?u.onClick(x):x.close()},children:t.jsx(re,{})})}),f&&t.jsx(r.CardMedia,{sx:l=>({padding:l.spacing(1,2)}),children:t.jsxs(r.Box,{sx:l=>({display:"flex",flexDirection:"column",gap:l.spacing(1)}),children:[t.jsx(r.Box,{component:"img",sx:{textAlign:"center",width:"100%",height:"100%",border:"0.5px solid #D2D2D2",borderRadius:"8px"},src:f}),t.jsx(r.Divider,{})]})}),t.jsxs(r.CardContent,{sx:l=>({padding:l.spacing(0,2),gap:l.spacing(1),display:"flex",flexDirection:"column"}),children:[t.jsxs(r.Box,{sx:l=>({gap:l.spacing(1),display:"flex"}),children:[t.jsx(r.Box,{component:"img",alt:"title icon",src:"https://www.junyiacademy.org/images/exam/title_icon.svg"}),t.jsx(r.Box,{children:t.jsx(r.Typography,{sx:{fontSize:"21px"},children:n})})]}),t.jsx(r.Typography,{sx:{color:"#b5b5b5",fontSize:"18px"},children:s})]}),t.jsxs(r.CardActions,{sx:l=>({padding:l.spacing(1,1,3,1),display:"flex",justifyContent:"center",gap:l.spacing(2)}),children:[p&&t.jsx(L,{color:"cancel",variant:p?.variant??"contained",size:p?.size??"large",onClick:()=>{p?.onClick&&p.onClick(x)},children:p.title||"取消"}),i&&t.jsx(L,{variant:i?.variant??"contained",size:i?.size??"large",onClick:()=>{i?.onClick&&i.onClick(x)},children:i.title||"確定"})]})]})});K.displayName="TutorialStep";const Se=({steps:e=[],initialStep:o=0,onClose:n})=>{const[s,f]=k.useState(o),i=oe(m=>m.breakpoints.up(1024)),[p,u]=k.useState(!0),x=e[s],g={...x,context:{close:()=>{u(!1),n&&n()},goToStep:m=>{f(m)},currentStep:s,currentStepProps:x}};return(m=>i?t.jsx(r.Slide,{in:p,direction:"up",mountOnEnter:!0,unmountOnExit:!0,children:m}):t.jsx(r.Modal,{open:p,sx:{display:"flex",alignItems:"center",justifyContent:"center",outline:0},children:t.jsx(r.Box,{sx:{display:"flex",alignItems:"center",justifyContent:"center",outline:0},children:m})}))(t.jsx(K,{...g}))},X=({color:e="progressUpgraded",checked:o=!1,...n})=>{const{sx:s=[],...f}=n;return t.jsx(r.Chip,{variant:"outlined",sx:[i=>({...o?{backgroundColor:i.palette[e].main,color:i.palette[e].contrastText,".MuiChip-icon":{color:i.palette[e].contrastText}}:{backgroundColor:i.palette[e].light,color:i.palette.text.primary},[`&.${Q.chipClasses.clickable}:hover`]:{backgroundColor:i.palette[e].dark,color:i.palette[e].contrastText},[`&.${Q.chipClasses.clickable}:hover > .MuiChip-icon`]:{color:i.palette[e].contrastText}}),...Array.isArray(s)?s:[s]],...f})},ke=h.styled(r.Popper)(({theme:e})=>({zIndex:1e3,"& > div":{position:"relative"},'&[data-popper-placement*="bottom"]':{"& > div":{marginTop:6},"& .MuiPopper-arrow":{top:0,left:0,marginTop:"-0.9em",width:"3em",height:"1em","&::after":{borderWidth:"0 1em 1em 1em",borderColor:`transparent transparent ${e.palette.common.white} transparent`,top:1},"&::before":{borderWidth:"0 1em 1em 1em",borderColor:"transparent transparent rgba(0, 0, 0, 0.4) transparent",top:6}}},'&[data-popper-placement*="top"]':{"& > div":{marginBottom:6},"& .MuiPopper-arrow":{bottom:0,left:0,marginBottom:"-0.9em",width:"3em",height:"1em","&::after":{borderWidth:"6px 6px 0 6px",borderColor:`${e.palette.common.white} transparent transparent transparent`,bottom:14},"&::before":{borderWidth:"7px 7px 0 7px",borderColor:"rgba(0, 0, 0, 0.4) transparent transparent transparent",bottom:6}}},'&[data-popper-placement*="right"]':{"& > div":{marginLeft:6},"& .MuiPopper-arrow":{left:6,marginLeft:"-0.9em",height:"3em",width:"1em","&::after":{borderWidth:"6px 6px 6px 0",borderColor:`transparent ${e.palette.common.white} transparent transparent`,top:-13,left:1},"&::before":{borderWidth:"7px 7px 7px 0",borderColor:"transparent rgba(0, 0, 0, 0.4) transparent transparent"}}},'&[data-popper-placement*="left"]':{"& > div":{marginRight:6},"& .MuiPopper-arrow":{right:6,marginRight:"-0.9em",height:"3em",width:"1em","&::after":{borderWidth:"6px 0 6px 6px",borderColor:`transparent transparent transparent ${e.palette.common.white}`,top:-13,right:1},"&::before":{borderWidth:"7px 0 7px 7px",borderColor:"transparent transparent transparent rgba(0, 0, 0, 0.4)"}}}})),ve=h.styled("div")(({hasBorder:e})=>({position:"absolute",fontSize:7,width:"3em",height:"3em",zIndex:1,"&::after":{position:"relative",content:'""',margin:"auto",display:"block",width:0,height:0,borderStyle:"solid",zIndex:2},"&::before":{position:"relative",content:'""',margin:"auto",display:"block",visibility:e?"visible":"hidden",width:0,height:0,borderStyle:"solid"}})),I=h.styled(L)({minWidth:"49px"}),Be=({anchorEl:e,arrow:o,placement:n="right",hasBorder:s=!0,content:f="",helperText:i,chipLabel:p,TopLeftButtonProps:u,TopRightButtonProps:x,BottomRightButtonProps:l,ChipProps:g,PopperProps:c={}})=>{const[m,d]=k.useState(null),{title:y,...S}=u||{},{title:M,...P}=x||{},{title:q,...A}=l||{},O=!!e;return t.jsxs(ke,{"data-testid":"info-popover",open:O,anchorEl:e,placement:n,disablePortal:!0,modifiers:[{name:"flip",enabled:!0,options:{altBoundary:!0,rootBoundary:"document",padding:8}},{name:"preventOverflow",enabled:!0,options:{altAxis:!1,altBoundary:!0,tether:!0,rootBoundary:"document",padding:8}},{name:"arrow",enabled:o,options:{element:m,padding:10}}],sx:{maxWidth:194,width:"100%"},...c,children:[o?t.jsx(ve,{"data-testid":"info-popover-arrow",ref:d,className:"MuiPopper-arrow",hasBorder:s}):null,t.jsx(r.Box,{"data-testid":"info-popover-paper",sx:T=>({padding:2,backgroundColor:T.palette.background.paper,borderRadius:"4px",border:s?"1px solid rgba(0, 0, 0, 0.4)":null,overflow:"auto",boxShadow:T.shadows[2]}),children:t.jsxs(r.Box,{sx:{maxWidth:194},children:[t.jsx(r.Typography,{variant:"body1",sx:{width:"100%","&:not(:last-child)":{marginBottom:1}},children:f}),p&&g&&t.jsxs(r.Box,{sx:{display:"flex",justifyContent:"flex-end",alignItems:"center","&:not(:last-child)":{marginBottom:1}},children:[t.jsx(r.Typography,{variant:"body2",children:p}),t.jsx(X,{...g,sx:{border:0}})]}),i&&t.jsx(r.Box,{sx:T=>({width:"100%",padding:T.spacing(1,0),"&:not(:last-child)":{marginBottom:1}}),children:i.split(`
+`).map((T,j)=>t.jsx(r.Typography,{variant:"body2",sx:G=>({color:G.palette.text.secondary,textAlign:"right"}),children:T},`helper-text-${j}`))}),(x||u)&&t.jsxs(r.Box,{sx:{display:"flex",justifyContent:"flex-end",alignItems:"center","&:not(:last-child)":{marginBottom:1}},children:[u&&t.jsx(r.Box,{sx:{display:"flex"},children:t.jsx(I,{"data-testid":"info-popover-top-left-button",variant:"contained",size:"medium",color:"primary",...S,children:y})}),x&&t.jsx(r.Box,{sx:{display:"flex",marginLeft:1},children:t.jsx(I,{"data-testid":"info-popover-top-right-button",variant:"contained",size:"medium",color:"primary",...P,children:M})})]}),l&&t.jsx(r.Box,{sx:{display:"flex",justifyContent:"flex-end",alignItems:"center","&:not(:last-child)":{marginBottom:1}},children:t.jsx(I,{"data-testid":"info-popover-bottom-left-button",variant:"contained",size:"medium",color:"primary",...A,children:q})})]})})]})};a.Button=fe,a.ButtonGroup=be,a.Chip=X,a.InfoPopover=Be,a.LoadingButton=me,a.Radio=ye,a.Select=D,a.SelectMenuItem=z,a.TextField=Te,a.TopicFilter=ge,a.Tutorial=Se,a.colors=w,a.theme=ie,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,9 +1,17 @@
 {
   "name": "@junyiacademy/ui-test",
-  "version": "1.6.9",
+  "version": "1.7.0",
   "description": "junyiacademy ui library",
-  "main": "./dist/index.js",
+  "main": "./dist/index.js.umd.js",
+  "module": "./dist/index.js.mjs",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js.mjs",
+      "require": "./dist/index.js.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "directories": {
     "lib": "lib"
   },
@@ -12,7 +20,7 @@
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rm -rf ./dist && tsc && vite build"
+    "build": "rm -rf ./dist && vite build"
   },
   "keywords": [
     "junyiacademy"
@@ -35,7 +43,7 @@
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
     "@mui/material": "^7.3.1",
-    "@types/react": "^18.0.0",
+    "@types/react": "^18.2.24",
     "axios": "~1.13.2",
     "react": "^18.2.0",
     "react-dom": "^=18.2.0",