@junyiacademy/ui-test 1.6.9 → 1.7.0

package/dist/index.js.mjs

@@ -0,0 +1,1479 @@
+import { createTheme as K, styled as $, alpha as B } from "@mui/material/styles";
+import { jsx as o, jsxs as y, Fragment as it } from "react/jsx-runtime";
+import { forwardRef as H, useState as D } from "react";
+import { MenuItem as lt, InputLabel as X, OutlinedInput as st, FormControl as Z, Select as tt, FormHelperText as et, Input as dt, useMediaQuery as pt, Box as x, Button as ot, ButtonGroup as ct, FormControlLabel as ut, Radio as mt, Typography as w, TextField as ht, Card as gt, CardHeader as xt, IconButton as ft, CardMedia as bt, Divider as Ft, CardContent as yt, CardActions as Ct, Slide as $t, Modal as kt, Chip as vt, Popper as St } from "@mui/material";
+import Tt from "@mui/icons-material/ArrowRightRounded";
+import { menuItemClasses as wt } from "@mui/material/MenuItem";
+import { formHelperTextClasses as rt } from "@mui/material/FormHelperText";
+import { inputBaseClasses as _ } from "@mui/material/InputBase";
+import { inputLabelClasses as g } from "@mui/material/InputLabel";
+import { outlinedInputClasses as C } from "@mui/material/OutlinedInput";
+import { inputClasses as F } from "@mui/material/Input";
+import { buttonClasses as P } from "@mui/material/Button";
+import { buttonGroupClasses as A } from "@mui/material/ButtonGroup";
+import { formControlLabelClasses as j } from "@mui/material/FormControlLabel";
+import { radioClasses as Pt } from "@mui/material/Radio";
+import { textFieldClasses as Bt } from "@mui/material/TextField";
+import zt from "@mui/material/useMediaQuery";
+import Lt from "@mui/icons-material/Close";
+import { chipClasses as N } from "@mui/material/Chip";
+const M = {
+  yellow: { 200: "#FFFF99" },
+  blue: { 600: "#4990E2" },
+  lightGreen: { 400: "#99CC66" }
+}, Mt = (t) => ({
+  components: {
+    MuiLocalizationProvider: {
+      defaultProps: {
+        localeText: { ...t }
+      }
+    }
+  }
+}), Q = {
+  hours: "小時",
+  minutes: "分鐘",
+  seconds: "秒",
+  meridiem: "子午線"
+}, Et = {
+  // Calendar navigation
+  previousMonth: "上個月",
+  nextMonth: "下個月",
+  // View navigation
+  openPreviousView: "上一個視圖",
+  openNextView: "下一個視圖",
+  calendarViewSwitchingButtonAriaLabel: (t) => t === "year" ? "年視圖已打開，切換為日曆視圖" : "日曆視圖已打開，切換為年視圖",
+  // DateRange placeholders
+  start: "開始",
+  end: "結束",
+  // Action bar
+  cancelButtonLabel: "取消",
+  clearButtonLabel: "清除",
+  okButtonLabel: "確認",
+  todayButtonLabel: "今天",
+  nextStepButtonLabel: "下一步",
+  // Toolbar titles
+  datePickerToolbarTitle: "選擇日期",
+  dateTimePickerToolbarTitle: "選擇日期和時間",
+  timePickerToolbarTitle: "選擇時間",
+  dateRangePickerToolbarTitle: "選擇時間範圍",
+  // Clock labels
+  clockLabelText: (t, e) => `選擇 ${Q[t]}. ${e === null ? "未選擇時間" : `已選擇${e}`}`,
+  hoursClockNumberText: (t) => `${t}小時`,
+  minutesClockNumberText: (t) => `${t}分鐘`,
+  secondsClockNumberText: (t) => `${t}秒`,
+  // Digital clock labels
+  selectViewText: (t) => `選擇 ${Q[t]}`,
+  // Calendar labels
+  calendarWeekNumberHeaderLabel: "週數",
+  calendarWeekNumberHeaderText: "#",
+  calendarWeekNumberAriaLabelText: (t) => `第${t}週`,
+  calendarWeekNumberText: (t) => `${t}`,
+  // Open picker labels
+  openDatePickerDialogue: (t) => t ? `選擇日期，已選擇${t}` : "選擇日期",
+  openTimePickerDialogue: (t) => t ? `選擇時間，已選擇${t}` : "選擇時間",
+  // Table labels
+  timeTableLabel: "選擇時間",
+  dateTableLabel: "選擇日期",
+  // Field section placeholders
+  fieldYearPlaceholder: (t) => "Y".repeat(t.digitAmount),
+  fieldMonthPlaceholder: (t) => t.contentType === "letter" ? "MMMM" : "MM",
+  fieldDayPlaceholder: () => "DD",
+  fieldWeekDayPlaceholder: (t) => t.contentType === "letter" ? "EEEE" : "EE",
+  fieldHoursPlaceholder: () => "hh",
+  fieldMinutesPlaceholder: () => "mm",
+  fieldSecondsPlaceholder: () => "ss",
+  fieldMeridiemPlaceholder: () => "aa"
+}, At = Mt(Et), Y = K(), b = [
+  '"Noto Sans TC"',
+  "PingFang",
+  '"Microsoft JhengHei"',
+  "Arial",
+  "sans-serif"
+].join(","), he = K(
+  {
+    typography: {
+      fontFamily: b,
+      h1: { fontFamily: b, fontSize: 96, lineHeight: "112px" },
+      h2: { fontFamily: b, fontSize: 60, lineHeight: 1.2 },
+      h3: { fontFamily: b, fontSize: 48, lineHeight: 1.167 },
+      h4: { fontFamily: b, fontSize: 34, lineHeight: 1.235 },
+      h5: { fontFamily: b, fontSize: 24, lineHeight: 1.334 },
+      h6: { fontFamily: b, fontSize: 20, lineHeight: 1.6 },
+      subtitle1: {
+        fontFamily: b,
+        fontSize: 16,
+        lineHeight: 1.75
+      },
+      subtitle2: {
+        fontFamily: b,
+        fontSize: 14,
+        lineHeight: 1.57
+      },
+      body1: { fontFamily: b, fontSize: 16, lineHeight: 1.5 },
+      body2: { fontFamily: b, fontSize: 14, lineHeight: 1.43 },
+      button: { fontFamily: b },
+      caption: { fontFamily: b, fontSize: 12, lineHeight: 1.66 },
+      overline: { fontFamily: b, fontSize: 12, lineHeight: 2.66 }
+    },
+    palette: {
+      primary: {
+        light: "#82C0FF",
+        main: M.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: Y.palette.augmentColor({
+        color: { main: "#80BB5A", contrastText: "#FFFFFF" }
+      }),
+      darkOrange: Y.palette.augmentColor({
+        color: { main: "#D55704", contrastText: "#FFFFFF" }
+      }),
+      progressPrimary: {
+        main: M.blue[600],
+        dark: M.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: M.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: b
+            }
+          },
+          "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: M.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"
+          }
+        }
+      }
+    }
+  },
+  At
+), I = H(
+  (t, e) => {
+    const { children: r, value: a = "", ...m } = t, { sx: n, ...s } = m;
+    return /* @__PURE__ */ o(
+      lt,
+      {
+        ref: e,
+        sx: [
+          (p) => ({
+            whiteSpace: "unset",
+            color: p.palette.text.primary,
+            [`&.${wt.selected}`]: {
+              backgroundColor: p.palette.grey[300],
+              "&:hover": {
+                backgroundColor: p.palette.grey[200]
+              }
+            }
+          }),
+          ...Array.isArray(n) ? n : [n]
+        ],
+        value: a,
+        ...s,
+        children: r
+      }
+    );
+  }
+);
+I.displayName = "SelectMenuItem";
+const It = $(X, {
+  shouldForwardProp: (t) => t !== "color"
+})(({ color: t = "primary", theme: e }) => ({
+  color: e.palette.text.secondary,
+  [`&.${g.outlined}`]: {
+    [`&:not(.${g.disabled}) .${g.focused}`]: {
+      color: e.palette.action.active
+    },
+    [`&.${g.sizeSmall}:not(.${g.shrink})`]: {
+      transform: "translate(12px, 12px) scale(1)"
+    }
+  },
+  // eslint-disable-next-line
+  [`&.${g.shrink}:not(.${g.error}):not(.${g.disabled}).${g.focused}`]: {
+    color: e.palette[t].main
+  },
+  [`&.${g.shrink}`]: {
+    backgroundColor: "#ffffff",
+    padding: "0 2px"
+  }
+})), Dt = $(st)(
+  ({ theme: t }) => ({
+    [`&.${C.root}`]: {
+      [`&.${C.error}.${C.focused} .${C.notchedOutline}`]: {
+        borderColor: `${t.palette.error.main}`
+      },
+      [`&.${_.sizeSmall} > .${_.input}`]: {
+        padding: "12.5px 15px 12.5px 12px"
+      }
+    },
+    [`& .${C.input}`]: {
+      color: t.palette.text.primary,
+      "&:focus": {
+        background: "rgba(0,0,0,0)"
+      }
+    }
+  })
+), Ht = ({
+  label: t,
+  helperText: e,
+  FormControlProps: r = {},
+  InputLabelProps: a = {},
+  InputProps: m = {},
+  SelectProps: n = {},
+  MenuProps: s = {},
+  FormHelperTextProps: p = {},
+  className: c,
+  children: i,
+  color: u = "primary",
+  size: d = "small",
+  paperMaxHeight: h = "auto",
+  error: l = !1,
+  hasLabel: f = !0,
+  hasShrink: v = !1,
+  value: z = "",
+  disabled: T = !1
+}) => {
+  const W = !!e, { sx: L = [], ...V } = r, { sx: k = [], ...O } = p;
+  return /* @__PURE__ */ y(
+    Z,
+    {
+      sx: [
+        (R) => ({
+          backgroundColor: "white",
+          "&:hover": {
+            // eslint-disable-next-line
+            [`& :not(.${C.disabled}):not(.${C.error}) .${C.notchedOutline}`]: {
+              borderColor: R.palette[u].main
+            }
+          }
+        }),
+        ...Array.isArray(L) ? L : [L]
+      ],
+      size: d,
+      disabled: T,
+      error: l,
+      color: u,
+      className: c,
+      ...V,
+      children: [
+        f && /* @__PURE__ */ o(
+          It,
+          {
+            color: u,
+            shrink: v ? !0 : void 0,
+            ...a,
+            children: t
+          }
+        ),
+        /* @__PURE__ */ o(
+          tt,
+          {
+            value: z,
+            label: f ? t : void 0,
+            MenuProps: {
+              PaperProps: {
+                sx: {
+                  maxHeight: h
+                }
+              },
+              disableAutoFocusItem: !0,
+              anchorOrigin: {
+                vertical: 2,
+                horizontal: "left"
+              },
+              transformOrigin: {
+                vertical: "top",
+                horizontal: "left"
+              },
+              ...s
+            },
+            input: /* @__PURE__ */ o(
+              Dt,
+              {
+                color: u,
+                label: f ? t : void 0,
+                disabled: T,
+                ...m
+              }
+            ),
+            ...n,
+            children: i
+          }
+        ),
+        W && /* @__PURE__ */ o(
+          et,
+          {
+            sx: [
+              {
+                [`&.${rt.root}`]: {
+                  marginLeft: 0
+                }
+              },
+              ...Array.isArray(k) ? k : [k]
+            ],
+            ...O,
+            children: e
+          }
+        )
+      ]
+    }
+  );
+}, Wt = $(X, {
+  shouldForwardProp: (t) => t !== "color"
+})(({ color: t = "primary", theme: e }) => ({
+  [`&.${g.root}`]: {
+    color: e.palette.text.disabled
+  },
+  [`&.${g.focused}`]: {
+    color: e.palette[t].main
+  },
+  [`&.${g.error}`]: {
+    color: e.palette.error.main
+  }
+})), Ot = $(dt, {
+  shouldForwardProp: (t) => t !== "color"
+})(({ color: t = "primary", theme: e }) => ({
+  color: e.palette.text.primary,
+  [`& .${F.input}`]: {
+    "&:focus": {
+      background: "rgba(0,0,0,0)"
+    }
+  },
+  [`&.${F.underline}:not(.${F.disabled}):not(.${F.error})`]: {
+    "&:after,&:hover:before": {
+      borderBottomColor: e.palette[t].main
+    }
+  },
+  [`&.${F.underline}.${F.error}:not(.${F.disabled})`]: {
+    "&:after,&:hover:before": {
+      borderBottomColor: e.palette.error.main
+    }
+  }
+})), Rt = ({
+  label: t,
+  helperText: e,
+  FormControlProps: r = {},
+  InputLabelProps: a = {},
+  InputProps: m = {},
+  SelectProps: n = {},
+  FormHelperTextProps: s = {},
+  className: p,
+  children: c,
+  color: i = "primary",
+  size: u = "small",
+  paperMaxHeight: d = "auto",
+  error: h = !1,
+  hasLabel: l = !0,
+  hasShrink: f = !1,
+  value: v = "",
+  disabled: z = !1
+}) => {
+  const T = !!e;
+  return /* @__PURE__ */ y(
+    Z,
+    {
+      variant: "standard",
+      color: i,
+      size: u,
+      disabled: z,
+      error: h,
+      className: p,
+      ...r,
+      children: [
+        /* @__PURE__ */ o(
+          Wt,
+          {
+            color: i,
+            shrink: f ? !0 : void 0,
+            ...a,
+            children: l ? t : void 0
+          }
+        ),
+        /* @__PURE__ */ o(
+          tt,
+          {
+            value: v,
+            MenuProps: {
+              PaperProps: {
+                sx: {
+                  maxHeight: d
+                }
+              },
+              anchorOrigin: {
+                vertical: 2,
+                horizontal: "left"
+              },
+              transformOrigin: {
+                vertical: "top",
+                horizontal: "left"
+              }
+            },
+            input: /* @__PURE__ */ o(Ot, { color: i, ...m }),
+            ...n,
+            children: c
+          }
+        ),
+        T && /* @__PURE__ */ o(et, { ...s, children: e })
+      ]
+    }
+  );
+}, J = ({ variant: t, ...e }) => t === "outlined" ? /* @__PURE__ */ o(Ht, { ...e }) : /* @__PURE__ */ o(Rt, { ...e }), q = "請選擇", U = "option-for-reset", jt = "", Gt = (t, e, r) => {
+  const a = r && t === 0 ? U : jt;
+  return e?.[t + 1] || a;
+}, ge = ({
+  topicList: t,
+  onTopicSelected: e,
+  hasArrow: r,
+  selectedTopicIds: a,
+  onResetClick: m = () => {
+  },
+  hasResetOption: n = !1
+}) => {
+  const s = pt((u) => u.breakpoints.up("md")), [p, c] = D([]), i = (u, d) => {
+    if (u.target.value === U) {
+      m();
+      return;
+    }
+    e(u.target.value, {
+      layerNumber: d
+    }), c((h) => [
+      ...h.slice(0, d + 1),
+      !1
+    ]);
+  };
+  return /* @__PURE__ */ o(
+    x,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "wrap"
+      },
+      children: t.map((u, d) => {
+        const h = p[d] || !a[d + 1];
+        return u.isError ? null : /* @__PURE__ */ y(
+          x,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              width: s ? void 0 : "100%"
+            },
+            children: [
+              r && d !== 0 && /* @__PURE__ */ o(
+                Tt,
+                {
+                  sx: (l) => ({
+                    margin: l.spacing(-1, -1.5),
+                    fontSize: l.spacing(7),
+                    color: "#444"
+                  }),
+                  fontSize: "large",
+                  "data-testid": "topic-filter-arrow"
+                }
+              ),
+              u.isLoading ? /* @__PURE__ */ o(
+                J,
+                {
+                  variant: "outlined",
+                  size: "small",
+                  label: "載入資料中...",
+                  disabled: !0,
+                  FormControlProps: {
+                    sx: (l) => ({
+                      width: s ? 220 : "100%",
+                      margin: l.spacing(1)
+                    })
+                  }
+                }
+              ) : /* @__PURE__ */ y(
+                J,
+                {
+                  variant: "outlined",
+                  size: "small",
+                  label: q,
+                  paperMaxHeight: 412,
+                  hasLabel: h,
+                  value: Gt(
+                    d,
+                    a,
+                    n
+                  ),
+                  SelectProps: {
+                    "data-testid": `layered-topic-${d}`
+                  },
+                  InputProps: {
+                    inputProps: {
+                      "aria-label": `layered-topic-${d}`
+                    },
+                    onChange: (l) => {
+                      i(l, d);
+                    },
+                    onFocus: () => {
+                      c((l) => {
+                        const f = [...l];
+                        return f[d] = !0, f;
+                      });
+                    },
+                    onBlur: () => {
+                      c((l) => {
+                        const f = [...l];
+                        return f[d] = !1, f;
+                      });
+                    }
+                  },
+                  FormControlProps: {
+                    sx: (l) => ({
+                      width: s ? 220 : "100%",
+                      margin: l.spacing(1)
+                    })
+                  },
+                  children: [
+                    /* @__PURE__ */ o(I, { disabled: !0, value: "", children: q }),
+                    n && d === 0 && /* @__PURE__ */ o(I, { value: U, children: "所有科目" }),
+                    u.data?.children?.map((l) => /* @__PURE__ */ o(
+                      I,
+                      {
+                        value: l.id,
+                        "data-testid": `layered-menuitem-${d}`,
+                        "data-is-content-topic": l.hasContentChild,
+                        children: l.title
+                      },
+                      l.id
+                    ))
+                  ]
+                }
+              )
+            ]
+          },
+          d
+        );
+      })
+    }
+  );
+};
+function S(t) {
+  return `${t.charAt(0).toUpperCase()}${t.slice(1)}`;
+}
+const E = H(
+  (t, e) => {
+    const { children: r, ...a } = t;
+    return /* @__PURE__ */ o(ot, { ref: e, ...a, children: r });
+  }
+);
+E.displayName = "Button";
+const xe = $(E, {
+  shouldForwardProp: (t) => t !== "active"
+})(({ theme: t, active: e, color: r = "primary" }) => ({
+  // For variant: outlined
+  [`&.${P.outlined}${S(r)}`]: {
+    backgroundColor: e ? t.palette[r].main : t.palette.common.white,
+    color: e ? t.palette.common.white : t.palette[r].main,
+    borderColor: t.palette[r].main,
+    "&:hover": {
+      backgroundColor: e ? t.palette[r].main : B(t.palette[r].main, 0.1)
+    },
+    [`&.${P.disabled}`]: {
+      backgroundColor: t.palette.common.white,
+      borderColor: t.palette.action.disabledBackground,
+      color: t.palette.action.disabled
+    }
+  },
+  // For variant: text
+  [`&.${P.text}${S(r)}`]: {
+    "&:hover": {
+      backgroundColor: B(t.palette[r].main, 0.1)
+    }
+  }
+})), Ut = $(ot)(
+  ({ theme: t, color: e = "primary", loading: r }) => ({
+    // For variant: outlined
+    [`&.${P.outlined}${S(e)}`]: {
+      borderColor: !r && t.palette[e].main,
+      "&:hover": {
+        backgroundColor: B(t.palette[e].main, 0.1)
+      },
+      [`&.${P.disabled}`]: {
+        backgroundColor: !r && t.palette.common.white,
+        borderColor: !r && t.palette.action.disabledBackground,
+        color: !r && t.palette.action.disabled
+      }
+    },
+    // For variant: text
+    [`&.${P.text}${S(e)}`]: {
+      "&:hover": {
+        backgroundColor: B(t.palette[e].main, 0.1)
+      }
+    }
+  })
+), fe = ({
+  children: t,
+  ...e
+}) => /* @__PURE__ */ o(Ut, { ...e, children: /* @__PURE__ */ o("span", { children: t }) }), nt = H(
+  (t, e) => {
+    const { children: r, ...a } = t;
+    return /* @__PURE__ */ o(ct, { ref: e, ...a, children: r });
+  }
+);
+nt.displayName = "ButtonGroup";
+const be = $(
+  nt
+)(({ color: t = "primary", theme: e }) => ({
+  [`&.${A.outlined} > .${A.grouped}${S(t)}.${A.grouped}.${A.disabled}`]: {
+    borderColor: B(e.palette[t].main, 0.5),
+    color: B(e.palette[t].main, 0.5)
+  }
+})), Vt = $(ut)(({ theme: t }) => ({
+  [`& .${j.label}`]: {
+    color: t.palette.text.secondary,
+    [`&.${j.disabled}`]: {
+      color: t.palette.text.disabled
+    }
+  },
+  [`& .${Pt.checked} + .${j.label}`]: {
+    color: t.palette.text.primary
+  }
+})), Fe = ({
+  checked: t,
+  disabled: e,
+  label: r,
+  labelPlacement: a,
+  value: m,
+  FormControlLabelProps: n = {},
+  RadioProps: s = {},
+  TypographyProps: p = {},
+  color: c = "secondary",
+  size: i = "medium",
+  caption: u = ""
+}) => {
+  const { sx: d = [], ...h } = s, { sx: l = [], ...f } = p;
+  return /* @__PURE__ */ y(it, { children: [
+    /* @__PURE__ */ o(
+      Vt,
+      {
+        control: /* @__PURE__ */ o(
+          mt,
+          {
+            sx: [
+              (v) => ({
+                color: v.palette.text.primary
+              }),
+              ...Array.isArray(d) ? d : [d]
+            ],
+            color: c,
+            size: i,
+            ...h
+          }
+        ),
+        checked: t,
+        disabled: e,
+        label: r,
+        labelPlacement: a,
+        value: m,
+        ...n
+      }
+    ),
+    u && /* @__PURE__ */ o(
+      w,
+      {
+        sx: [
+          (v) => ({
+            color: v.palette.text.disabled,
+            margin: "0 0 0 30px"
+          }),
+          ...Array.isArray(l) ? l : [l]
+        ],
+        variant: "body2",
+        ...f,
+        children: u
+      }
+    )
+  ] });
+}, _t = $(ht)(
+  ({ label: t, color: e = "primary", theme: r }) => ({
+    [`& .${g.error}`]: {
+      [`&:not(.${g.shrink})`]: {
+        color: r.palette.text.secondary
+      },
+      [`&.${g.disabled}`]: {
+        color: r.palette.text.disabled
+      }
+    },
+    [`& .${g.error}.${g.focused}`]: {
+      color: r.palette.error.main
+    },
+    // For variant: standard | filled
+    [`& .${F.underline}:not(.${F.disabled})`]: {
+      [`&.MuiInputBase-color${S(e)}:hover:before`]: {
+        borderColor: r.palette[e].main
+      }
+    },
+    // For variant: outlined
+    [`& .${F.disabled} .${C.notchedOutline}`]: {
+      borderStyle: "dotted"
+    },
+    [`& .${F.error}.${F.focused} .${C.notchedOutline}`]: {
+      borderColor: r.palette.error.main
+    },
+    [`&.${Bt.root} :not(.${F.disabled}):not(.${F.error})`]: {
+      [`&.MuiInputBase-color${S(e)}:hover .${C.notchedOutline}`]: {
+        borderColor: r.palette[e].main
+      }
+    },
+    [`& .${C.notchedOutline}`]: {
+      "& > legend": {
+        maxWidth: t === "" && 0
+      }
+    }
+  })
+), ye = (t) => {
+  const { slotProps: e = {}, ...r } = t, {
+    inputLabel: a = {},
+    input: m = {},
+    formHelperText: n = {},
+    ...s
+  } = e, p = !!("endAdornment" in m && m?.endAdornment);
+  return /* @__PURE__ */ o(
+    _t,
+    {
+      slotProps: {
+        inputLabel: {
+          shrink: p ? !0 : void 0,
+          ...a
+        },
+        input: m,
+        formHelperText: {
+          ...n,
+          sx: [
+            (c) => ({
+              [`&.${rt.root}`]: {
+                marginLeft: 0,
+                [`&.${F.error}`]: {
+                  color: c.palette.error.main
+                }
+              }
+            })
+          ]
+        },
+        ...s
+      },
+      ...r
+    }
+  );
+}, at = H((t, e) => {
+  const {
+    title: r,
+    content: a,
+    imageUrl: m,
+    confirmButtonProps: n,
+    cancelButtonProps: s,
+    closeButtonProps: p,
+    context: c
+  } = t;
+  return /* @__PURE__ */ y(
+    gt,
+    {
+      ref: e,
+      sx: (i) => ({
+        zIndex: "10000",
+        backgroundColor: "white",
+        borderRadius: "10px",
+        boxShadow: "4px 6px 20px 0px #00000040",
+        padding: 0,
+        width: "400px",
+        [i.breakpoints.up(1024)]: {
+          position: "fixed",
+          left: "64px",
+          bottom: "50px"
+        },
+        [i.breakpoints.down(451)]: {
+          width: "80%"
+        }
+      }),
+      children: [
+        /* @__PURE__ */ o(
+          xt,
+          {
+            sx: (i) => ({
+              padding: i.spacing(p ? 1 : 2, 2, 0)
+            }),
+            action: p && /* @__PURE__ */ o(
+              ft,
+              {
+                onClick: () => {
+                  p instanceof Object && p?.onClick ? p.onClick(c) : c.close();
+                },
+                children: /* @__PURE__ */ o(Lt, {})
+              }
+            )
+          }
+        ),
+        m && /* @__PURE__ */ o(
+          bt,
+          {
+            sx: (i) => ({
+              padding: i.spacing(1, 2)
+            }),
+            children: /* @__PURE__ */ y(
+              x,
+              {
+                sx: (i) => ({
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: i.spacing(1)
+                }),
+                children: [
+                  /* @__PURE__ */ o(
+                    x,
+                    {
+                      component: "img",
+                      sx: {
+                        textAlign: "center",
+                        width: "100%",
+                        height: "100%",
+                        border: "0.5px solid #D2D2D2",
+                        borderRadius: "8px"
+                      },
+                      src: m
+                    }
+                  ),
+                  /* @__PURE__ */ o(Ft, {})
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ y(
+          yt,
+          {
+            sx: (i) => ({
+              padding: i.spacing(0, 2),
+              gap: i.spacing(1),
+              display: "flex",
+              flexDirection: "column"
+            }),
+            children: [
+              /* @__PURE__ */ y(
+                x,
+                {
+                  sx: (i) => ({
+                    gap: i.spacing(1),
+                    display: "flex"
+                  }),
+                  children: [
+                    /* @__PURE__ */ o(
+                      x,
+                      {
+                        component: "img",
+                        alt: "title icon",
+                        src: "https://www.junyiacademy.org/images/exam/title_icon.svg"
+                      }
+                    ),
+                    /* @__PURE__ */ o(x, { children: /* @__PURE__ */ o(w, { sx: { fontSize: "21px" }, children: r }) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ o(w, { sx: { color: "#b5b5b5", fontSize: "18px" }, children: a })
+            ]
+          }
+        ),
+        /* @__PURE__ */ y(
+          Ct,
+          {
+            sx: (i) => ({
+              padding: i.spacing(1, 1, 3, 1),
+              display: "flex",
+              justifyContent: "center",
+              gap: i.spacing(2)
+            }),
+            children: [
+              s && /* @__PURE__ */ o(
+                E,
+                {
+                  color: "cancel",
+                  variant: s?.variant ?? "contained",
+                  size: s?.size ?? "large",
+                  onClick: () => {
+                    s?.onClick && s.onClick(c);
+                  },
+                  children: s.title || "取消"
+                }
+              ),
+              n && /* @__PURE__ */ o(
+                E,
+                {
+                  variant: n?.variant ?? "contained",
+                  size: n?.size ?? "large",
+                  onClick: () => {
+                    n?.onClick && n.onClick(c);
+                  },
+                  children: n.title || "確定"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+at.displayName = "TutorialStep";
+const Ce = ({
+  steps: t = [],
+  initialStep: e = 0,
+  onClose: r
+}) => {
+  const [a, m] = D(e), n = zt((h) => h.breakpoints.up(1024)), [s, p] = D(!0), c = t[a], u = {
+    ...c,
+    context: {
+      close: () => {
+        p(!1), r && r();
+      },
+      goToStep: (h) => {
+        m(h);
+      },
+      currentStep: a,
+      currentStepProps: c
+    }
+  };
+  return ((h) => n ? /* @__PURE__ */ o($t, { in: s, direction: "up", mountOnEnter: !0, unmountOnExit: !0, children: h }) : /* @__PURE__ */ o(
+    kt,
+    {
+      open: s,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        outline: 0
+      },
+      children: /* @__PURE__ */ o(
+        x,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            outline: 0
+          },
+          children: h
+        }
+      )
+    }
+  ))(/* @__PURE__ */ o(at, { ...u }));
+}, Nt = ({
+  color: t = "progressUpgraded",
+  checked: e = !1,
+  ...r
+}) => {
+  const { sx: a = [], ...m } = r;
+  return /* @__PURE__ */ o(
+    vt,
+    {
+      variant: "outlined",
+      sx: [
+        (n) => ({
+          ...e ? {
+            backgroundColor: n.palette[t].main,
+            color: n.palette[t].contrastText,
+            ".MuiChip-icon": {
+              color: n.palette[t].contrastText
+            }
+          } : {
+            backgroundColor: n.palette[t].light,
+            color: n.palette.text.primary
+          },
+          [`&.${N.clickable}:hover`]: {
+            backgroundColor: n.palette[t].dark,
+            color: n.palette[t].contrastText
+          },
+          [`&.${N.clickable}:hover > .MuiChip-icon`]: {
+            color: n.palette[t].contrastText
+          }
+        }),
+        ...Array.isArray(a) ? a : [a]
+      ],
+      ...m
+    }
+  );
+}, Qt = $(St)(({ theme: t }) => ({
+  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 ${t.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: `${t.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 ${t.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 ${t.palette.common.white}`,
+        top: -13,
+        right: 1
+      },
+      "&::before": {
+        borderWidth: "7px 0 7px 7px",
+        borderColor: "transparent transparent transparent rgba(0, 0, 0, 0.4)"
+      }
+    }
+  }
+})), Yt = $("div")(({ hasBorder: t }) => ({
+  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: t ? "visible" : "hidden",
+    width: 0,
+    height: 0,
+    borderStyle: "solid"
+  }
+})), G = $(E)({
+  minWidth: "49px"
+}), $e = ({
+  anchorEl: t,
+  arrow: e,
+  placement: r = "right",
+  hasBorder: a = !0,
+  content: m = "",
+  helperText: n,
+  chipLabel: s,
+  TopLeftButtonProps: p,
+  TopRightButtonProps: c,
+  BottomRightButtonProps: i,
+  ChipProps: u,
+  PopperProps: d = {}
+}) => {
+  const [h, l] = D(null), { title: f, ...v } = p || {}, { title: z, ...T } = c || {}, { title: W, ...L } = i || {};
+  return /* @__PURE__ */ y(
+    Qt,
+    {
+      "data-testid": "info-popover",
+      open: !!t,
+      anchorEl: t,
+      placement: r,
+      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: e,
+          options: {
+            element: h,
+            padding: 10
+          }
+        }
+      ],
+      sx: {
+        maxWidth: 194,
+        width: "100%"
+      },
+      ...d,
+      children: [
+        e ? /* @__PURE__ */ o(
+          Yt,
+          {
+            "data-testid": "info-popover-arrow",
+            ref: l,
+            className: "MuiPopper-arrow",
+            hasBorder: a
+          }
+        ) : null,
+        /* @__PURE__ */ o(
+          x,
+          {
+            "data-testid": "info-popover-paper",
+            sx: (k) => ({
+              padding: 2,
+              backgroundColor: k.palette.background.paper,
+              borderRadius: "4px",
+              border: a ? "1px solid rgba(0, 0, 0, 0.4)" : null,
+              overflow: "auto",
+              boxShadow: k.shadows[2]
+            }),
+            children: /* @__PURE__ */ y(
+              x,
+              {
+                sx: {
+                  maxWidth: 194
+                },
+                children: [
+                  /* @__PURE__ */ o(
+                    w,
+                    {
+                      variant: "body1",
+                      sx: {
+                        width: "100%",
+                        "&:not(:last-child)": {
+                          marginBottom: 1
+                        }
+                      },
+                      children: m
+                    }
+                  ),
+                  s && u && /* @__PURE__ */ y(
+                    x,
+                    {
+                      sx: {
+                        display: "flex",
+                        justifyContent: "flex-end",
+                        alignItems: "center",
+                        "&:not(:last-child)": {
+                          marginBottom: 1
+                        }
+                      },
+                      children: [
+                        /* @__PURE__ */ o(w, { variant: "body2", children: s }),
+                        /* @__PURE__ */ o(
+                          Nt,
+                          {
+                            ...u,
+                            sx: {
+                              border: 0
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  n && /* @__PURE__ */ o(
+                    x,
+                    {
+                      sx: (k) => ({
+                        width: "100%",
+                        padding: k.spacing(1, 0),
+                        "&:not(:last-child)": {
+                          marginBottom: 1
+                        }
+                      }),
+                      children: n.split(`
+`).map((k, O) => /* @__PURE__ */ o(
+                        w,
+                        {
+                          variant: "body2",
+                          sx: (R) => ({
+                            color: R.palette.text.secondary,
+                            textAlign: "right"
+                          }),
+                          children: k
+                        },
+                        `helper-text-${O}`
+                      ))
+                    }
+                  ),
+                  (c || p) && /* @__PURE__ */ y(
+                    x,
+                    {
+                      sx: {
+                        display: "flex",
+                        justifyContent: "flex-end",
+                        alignItems: "center",
+                        "&:not(:last-child)": {
+                          marginBottom: 1
+                        }
+                      },
+                      children: [
+                        p && /* @__PURE__ */ o(
+                          x,
+                          {
+                            sx: {
+                              display: "flex"
+                            },
+                            children: /* @__PURE__ */ o(
+                              G,
+                              {
+                                "data-testid": "info-popover-top-left-button",
+                                variant: "contained",
+                                size: "medium",
+                                color: "primary",
+                                ...v,
+                                children: f
+                              }
+                            )
+                          }
+                        ),
+                        c && /* @__PURE__ */ o(
+                          x,
+                          {
+                            sx: {
+                              display: "flex",
+                              marginLeft: 1
+                            },
+                            children: /* @__PURE__ */ o(
+                              G,
+                              {
+                                "data-testid": "info-popover-top-right-button",
+                                variant: "contained",
+                                size: "medium",
+                                color: "primary",
+                                ...T,
+                                children: z
+                              }
+                            )
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  i && /* @__PURE__ */ o(
+                    x,
+                    {
+                      sx: {
+                        display: "flex",
+                        justifyContent: "flex-end",
+                        alignItems: "center",
+                        "&:not(:last-child)": {
+                          marginBottom: 1
+                        }
+                      },
+                      children: /* @__PURE__ */ o(
+                        G,
+                        {
+                          "data-testid": "info-popover-bottom-left-button",
+                          variant: "contained",
+                          size: "medium",
+                          color: "primary",
+                          ...L,
+                          children: W
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  xe as Button,
+  be as ButtonGroup,
+  Nt as Chip,
+  $e as InfoPopover,
+  fe as LoadingButton,
+  Fe as Radio,
+  J as Select,
+  I as SelectMenuItem,
+  ye as TextField,
+  ge as TopicFilter,
+  Ce as Tutorial,
+  M as colors,
+  he as theme
+};