@nualang/nualang-ui-components 0.1.1400 → 0.1.1401

package/dist/Exercises/Roleplay/Games/TopBarActions.js

@@ -7,23 +7,10 @@ import EditIcon from "@mui/icons-material/Create";
 import Share from "@mui/icons-material/Share";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import { makeStyles } from "tss-react/mui";
-import { withStyles } from "tss-react/mui";
 import { alpha } from "@mui/material/styles";
 import VoiceSpeedSelector from "../../../Misc/VoiceSpeed/VoiceSpeed";
 import ReportProblem from "../../../Misc/ReportProblem/ReportProblem";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const RoundedLinearProgress = withStyles(LinearProgress, theme => ({
-  root: {
-    height: 12,
-    borderRadius: 4
-  },
-  colorPrimary: {
-    backgroundColor: alpha(theme.palette.success.light, 0.25)
-  },
-  barColorPrimary: {
-    backgroundColor: theme.palette.success.main
-  }
-}));
 const useStyles = makeStyles()((theme, _params, classes) => ({
   label: {
     color: "#fff"
@@ -238,13 +225,21 @@ const TopBarActions = ({
     children: roleplayHasStarted || isRoleplayPreview ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [!isRoleplayPreview && /*#__PURE__*/_jsx("div", {
         className: classes.progress,
-        children: /*#__PURE__*/_jsx(RoundedLinearProgress, {
+        children: /*#__PURE__*/_jsx(LinearProgress, {
           variant: "determinate",
           value: currentMessages.length / roleplay.script.length * 100,
           "aria-label": t("exercise"),
           "aria-valuemin": 0,
           "aria-valuemax": 100,
-          "aria-valuenow": currentMessages.length / roleplay.script.length * 100
+          "aria-valuenow": currentMessages.length / roleplay.script.length * 100,
+          sx: {
+            height: 12,
+            borderRadius: 4,
+            backgroundColor: theme => alpha(theme.palette.success.light, 0.25),
+            "& .MuiLinearProgress-bar": {
+              backgroundColor: theme => theme.palette.success.main
+            }
+          }
         })
       }), hiddenDown ? null : /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(VoiceSpeedSelector, {

package/dist/Exercises/Roleplay/OriginalRoleplay.js

@@ -1,9 +1,8 @@
 import { useEffect, useState, memo } from "react";
 import { Joyride, STATUS } from "react-joyride";
 import { useTheme, alpha } from "@mui/material/styles";
-import { withStyles } from "tss-react/mui";
 import { makeStyles } from "tss-react/mui";
-import { Grid, Slide, IconButton, Button, ButtonBase, Avatar, Dialog, Typography, Box, Divider, Tooltip, LinearProgress, useMediaQuery } from "@mui/material";
+import { Grid, Slide, IconButton, Button, ButtonBase, Avatar, Dialog, Typography, Box, Divider, Tooltip, useMediaQuery, LinearProgress } from "@mui/material";
 import Alert from "@mui/material/Alert";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
@@ -31,18 +30,6 @@ import ReportProblem from "../../Misc/ReportProblem/ReportProblem";
 import { removeExtraWhiteSpaces } from "../../utils";
 import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const RoundedLinearProgress = withStyles(LinearProgress, theme => ({
-  root: {
-    height: 12,
-    borderRadius: 4
-  },
-  colorPrimary: {
-    backgroundColor: alpha(theme.palette.success.light, 0.25)
-  },
-  barColorPrimary: {
-    backgroundColor: theme.palette.success.main
-  }
-}));
 const useStyles = makeStyles()((theme, {
   isActorOne
 }, classes) => ({
@@ -629,9 +616,17 @@ function Roleplay({
     children: roleplayHasStarted ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("div", {
         className: classes.progress,
-        children: /*#__PURE__*/_jsx(RoundedLinearProgress, {
+        children: /*#__PURE__*/_jsx(LinearProgress, {
           variant: "determinate",
-          value: currentMessages.length / roleplay.script.length * 100
+          value: currentMessages.length / roleplay.script.length * 100,
+          sx: {
+            height: 12,
+            borderRadius: 4,
+            backgroundColor: theme => alpha(theme.palette.success.light, 0.25),
+            "& .MuiLinearProgress-bar": {
+              backgroundColor: theme => theme.palette.success.main
+            }
+          }
         })
       }), hiddenDown ? null : /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsxs(Button, {

package/dist/Lists/ExerciseSelection/ExerciseSelection.js

@@ -27,7 +27,8 @@ function Exercise({
   sectionId,
   topicId,
   setIsExerciseSelected,
-  phrases
+  phrases,
+  topicName
 }) {
   const noRoleplays = name.toLowerCase() === "roleplays" && roleplays.length === 0;
   const noPhrases = name.toLowerCase() === "phrases" && !phrases?.length && !getPhraseLists;
@@ -96,7 +97,8 @@ function Exercise({
           isExerciseSelected: isExerciseSelected,
           setIsExerciseSelected: setIsExerciseSelected,
           isExpanded: phraseListsOpen,
-          onPhraseListsLoaded: handlePhraseListsLoaded
+          onPhraseListsLoaded: handlePhraseListsLoaded,
+          topicName: topicName
         })
       })
     }), name.toLowerCase() === "roleplays" && /*#__PURE__*/_jsx(Collapse, {
@@ -114,7 +116,8 @@ function Exercise({
           t: t,
           isExerciseSelected: isExerciseSelected,
           handleSelectExercise: handleSelectExercise,
-          useCase: useCase
+          useCase: useCase,
+          topicName: topicName
         })
       })
     })]
@@ -340,6 +343,7 @@ function Topic({
           handleStartExercise: handleStartExercise,
           isCreator: isCreator,
           getPhraseLists: getPhraseLists,
+          topicName: topicName,
           ...otherProps
         })
       })]

package/dist/Lists/Exercises/Exercises.js

@@ -15,7 +15,8 @@ import { searchStringToObj, objToSearchString } from "../../utils";
 import FlashOnIcon from "@mui/icons-material/FlashOn";
 import FlashOffIcon from "@mui/icons-material/FlashOff";
 import MenuBookIcon from "@mui/icons-material/MenuBook";
-import { Collapse, ListItemText, ListItemIcon, List, ListItemAvatar, IconButton, Badge, Tooltip, Box, Chip, LinearProgress } from "@mui/material";
+import { Collapse, ListItemText, ListItemIcon, List, ListItemAvatar, IconButton, Badge, Tooltip, Box, Chip } from "@mui/material";
+import ColorLinearProgress from "../../Misc/ColorLinearProgress/ColorLinearProgress";
 import Add from "@mui/icons-material/Add";
 import Face from "@mui/icons-material/Face";
 import ForumIcon from "@mui/icons-material/Forum";
@@ -181,13 +182,9 @@ function ItemProgressBar({
       sx: {
         width: 160
       },
-      children: /*#__PURE__*/_jsx(LinearProgress, {
+      children: /*#__PURE__*/_jsx(ColorLinearProgress, {
         variant: "determinate",
-        value: pct,
-        sx: {
-          height: 6,
-          borderRadius: 3
-        }
+        value: pct
       })
     }), /*#__PURE__*/_jsx(Typography, {
       variant: "caption",

package/dist/Lists/PhraseListSelection/PhraseListSelection.js

@@ -18,7 +18,8 @@ function PhraseList({
   setIsPhraseListSelected,
   t,
   isExerciseSelected,
-  setIsExerciseSelected
+  setIsExerciseSelected,
+  topicName
 }) {
   const [open, setOpen] = useState(false);
   const isTranslationHidden = phraseList?.hiddenPhraseGroupGames?.translation;
@@ -37,7 +38,8 @@ function PhraseList({
       timer: 30,
       answerOption: 0,
       phraseListId: phraseList.phraseListId,
-      phrases: phraseList.phrases || []
+      phrases: phraseList.phrases || [],
+      topicName: topicName ?? ""
     });
   };
   return /*#__PURE__*/_jsxs("div", {
@@ -162,7 +164,8 @@ function PhraseListSelection({
   isExerciseSelected,
   isExpanded,
   setIsExerciseSelected,
-  onPhraseListsLoaded
+  onPhraseListsLoaded,
+  topicName
 }) {
   const [isPhraseListSelected, setIsPhraseListSelected] = useState(false);
   const phraseListsQuery = courseQuerys.useCourseSectionTopicPhraseLists(async (cId, sId, tId, filters) => getPhraseLists(cId, sId, tId, filters), {
@@ -232,7 +235,8 @@ function PhraseListSelection({
     setIsPhraseListSelected: setIsPhraseListSelected,
     t: t,
     isExerciseSelected: isExerciseSelected,
-    setIsExerciseSelected: setIsExerciseSelected
+    setIsExerciseSelected: setIsExerciseSelected,
+    topicName: topicName
   }, phraseList.phraseListId || index));
 }
 export default PhraseListSelection;

package/dist/Lists/RoleplaySelection/RoleplaySelection.js

@@ -15,7 +15,8 @@ function Roleplay({
   setIsRoleplaySelected,
   t,
   isExerciseSelected,
-  handleSelectExercise = null
+  handleSelectExercise = null,
+  topicName
 }) {
   const [open, setOpen] = useState(false);
   const games = ["roleplay-story", "roleplay-fill-in-the-blanks", "roleplay-act-it-out", "roleplay-act-it-out-listening", "roleplay-act-it-out-speaking", "roleplay-act-it-out-listening-speaking"];
@@ -26,7 +27,8 @@ function Roleplay({
       exercise: exerciseName,
       timer: 30,
       answerOption: 0,
-      roleplayId: roleplay.roleplayId
+      roleplayId: roleplay.roleplayId,
+      topicName: topicName ?? ""
     });
   };
   const isRoleplayEmpty = roleplay?.script?.length === 0 || !roleplay?.script?.some(line => line.text !== undefined);
@@ -174,7 +176,8 @@ function RoleplaySelection({
   t,
   isExerciseSelected,
   handleSelectExercise,
-  useCase
+  useCase,
+  topicName
 }) {
   const [isRoleplaySelected, setIsRoleplaySelected] = useState(false);
   return roleplays.map((roleplay, index) => /*#__PURE__*/_jsx(Roleplay, {
@@ -186,7 +189,8 @@ function RoleplaySelection({
     t: t,
     isExerciseSelected: isExerciseSelected,
     handleSelectExercise: handleSelectExercise,
-    useCase: useCase
+    useCase: useCase,
+    topicName: topicName
   }, index));
 }
 export default RoleplaySelection;

package/dist/Misc/AchievementsBanner/AchievementsBanner.js

@@ -0,0 +1,62 @@
+import { Typography } from "@mui/material";
+import { makeStyles } from "tss-react/mui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()((theme, {
+  height,
+  backgroundImage
+}) => ({
+  banner: {
+    backgroundColor: theme.palette.secondary.main,
+    backgroundImage: backgroundImage ? `linear-gradient(to right, ${theme.palette.secondary.main} 50%, transparent 100%), url(${backgroundImage})` : undefined,
+    backgroundSize: "100% 100%, auto 100%",
+    backgroundPosition: "0 0, right center",
+    backgroundRepeat: "no-repeat",
+    minHeight: height,
+    display: "flex",
+    alignItems: "stretch",
+    borderRadius: 12,
+    marginBottom: theme.spacing(4)
+  },
+  text: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    padding: theme.spacing(3, 4),
+    flex: 1
+  }
+}));
+export default function AchievementsBanner({
+  title,
+  description,
+  backgroundImage,
+  height = 140
+}) {
+  const {
+    classes
+  } = useStyles({
+    height,
+    backgroundImage
+  });
+  return /*#__PURE__*/_jsx("div", {
+    className: classes.banner,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: classes.text,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "h5",
+        sx: {
+          color: "white",
+          fontWeight: "bold",
+          mb: 1
+        },
+        children: title
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        sx: {
+          color: "rgba(255,255,255,0.85)",
+          fontWeight: "bold"
+        },
+        children: description
+      })]
+    })
+  });
+}

package/dist/Misc/ColorLinearProgress/ColorLinearProgress.js

@@ -1,28 +1,25 @@
 import React from "react";
 import { LinearProgress } from "@mui/material";
-import { withStyles } from "tss-react/mui";
 import { alpha } from "@mui/system";
 import { jsx as _jsx } from "react/jsx-runtime";
-const ProgressBar = withStyles(LinearProgress, theme => ({
-  root: {
-    height: 8,
-    borderRadius: 4,
-    border: `1px solid ${theme.palette.success.main}`
-  },
-  colorPrimary: {
-    backgroundColor: alpha(theme.palette.success.light, 0.25)
-  },
-  barColorPrimary: {
-    backgroundColor: theme.palette.success.main
-  }
-}));
 function ColorLinearProgress({
   value,
-  variant
+  variant,
+  ...rest
 }) {
-  return /*#__PURE__*/_jsx(ProgressBar, {
+  return /*#__PURE__*/_jsx(LinearProgress, {
     variant: variant,
-    value: value
+    value: value,
+    ...rest,
+    sx: {
+      height: 8,
+      borderRadius: 4,
+      border: theme => `1px solid ${theme.palette.success.main}`,
+      backgroundColor: theme => alpha(theme.palette.success.light, 0.25),
+      "& .MuiLinearProgress-bar": {
+        backgroundColor: theme => theme.palette.success.main
+      }
+    }
   });
 }
 export default ColorLinearProgress;

package/dist/Misc/ExerciseProgressBar/ExerciseProgressBar.js

@@ -1,21 +1,7 @@
 import { alpha } from "@mui/material/styles";
-import { withStyles } from "tss-react/mui";
 import LinearProgress from "@mui/material/LinearProgress";
-//import Tooltip from '@mui/material/Tooltip';
 import { Box, Typography } from "@mui/material";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const RoundedLinearProgress = withStyles(LinearProgress, theme => ({
-  root: {
-    height: 12,
-    borderRadius: 4
-  },
-  colorPrimary: {
-    backgroundColor: alpha(theme.palette.success.light, 0.25)
-  },
-  barColorPrimary: {
-    backgroundColor: theme.palette.success.main
-  }
-}));
 function ExerciseProgressBar(props) {
   const {
     classes = {},
@@ -43,11 +29,19 @@ function ExerciseProgressBar(props) {
           flexGrow: 1,
           mx: 2
         },
-        children: /*#__PURE__*/_jsx(RoundedLinearProgress, {
+        children: /*#__PURE__*/_jsx(LinearProgress, {
           "aria-label": `${exercise}: ${numOfCorrectAnswers} / ${numOfQuestions}`,
           variant: "determinate",
           value: completed,
-          className: classes.progressBar
+          className: classes.progressBar,
+          sx: {
+            height: 12,
+            borderRadius: 4,
+            backgroundColor: theme => alpha(theme.palette.success.light, 0.25),
+            "& .MuiLinearProgress-bar": {
+              backgroundColor: theme => theme.palette.success.main
+            }
+          }
         })
       })]
     })

package/dist/Misc/MedalCard/MedalCard.js

@@ -0,0 +1,98 @@
+import { Typography, Box, Divider } from "@mui/material";
+import { makeStyles } from "tss-react/mui";
+import MedalSelector from "../MedalSelector/MedalSelector";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  slot: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    textAlign: "center",
+    flex: 1
+  },
+  info: {
+    marginTop: theme.spacing(1)
+  }
+}));
+export default function MedalCard({
+  medal,
+  mascot
+}) {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsxs("div", {
+    className: classes.slot,
+    children: [/*#__PURE__*/_jsxs("div", {
+      style: {
+        position: "relative"
+      },
+      children: [mascot && /*#__PURE__*/_jsx("div", {
+        style: {
+          position: "absolute",
+          bottom: "36%",
+          left: "50%",
+          transform: "translateX(-50%)",
+          zIndex: 0,
+          pointerEvents: "none"
+        },
+        children: mascot
+      }), /*#__PURE__*/_jsx("div", {
+        style: mascot ? {
+          position: "relative",
+          zIndex: 1
+        } : undefined,
+        children: /*#__PURE__*/_jsx(MedalSelector, {
+          color: medal ? medal.color : "placeholder",
+          width: "120px",
+          sx: medal ? {
+            filter: "drop-shadow(0px 4px 4px rgba(0,0,0,0.25))"
+          } : undefined
+        })
+      })]
+    }), medal && /*#__PURE__*/_jsxs(Box, {
+      className: classes.info,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        flex: 1,
+        width: "100%"
+      },
+      children: [/*#__PURE__*/_jsxs(Box, {
+        sx: {
+          flex: 1
+        },
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          sx: {
+            fontWeight: "bold"
+          },
+          children: medal.gameType
+        }), Array.isArray(medal.topicName) ? medal.topicName.map((line, i) => /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          children: line
+        }, i)) : /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          children: medal.topicName
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          color: "textSecondary",
+          sx: {
+            fontWeight: 500
+          },
+          children: medal.courseName
+        })]
+      }), /*#__PURE__*/_jsx(Divider, {
+        sx: {
+          my: 0.75,
+          width: 40,
+          mx: "auto"
+        }
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "caption",
+        color: "textSecondary",
+        children: medal.date
+      })]
+    })]
+  });
+}

package/dist/Misc/MedalSelector/MedalSelector.js

@@ -3,6 +3,7 @@ import { Box } from "@mui/material";
 import GoldMedal from "./GoldMedal";
 import SilverMedal from "./SilverMedal";
 import BronzeMedal from "./BronzeMedal";
+import PlaceholderMedal from "./PlaceholderMedal";
 import "./styles.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function MedalSelector({
@@ -24,6 +25,9 @@ export default function MedalSelector({
     case "bronze":
       badge = /*#__PURE__*/_jsx(BronzeMedal, {});
       break;
+    case "placeholder":
+      badge = /*#__PURE__*/_jsx(PlaceholderMedal, {});
+      break;
     default:
       badge = null;
   }

package/dist/Misc/MedalSelector/PlaceholderMedal.js

@@ -0,0 +1,96 @@
+import { useId } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PlaceholderMedal = props => {
+  const uid = useId();
+  const filterId = `filter0_i_placeholder_${uid}`;
+  const mask0Id = `mask0_placeholder_${uid}`;
+  const mask1Id = `mask1_placeholder_${uid}`;
+  return /*#__PURE__*/_jsxs("svg", {
+    viewBox: "0 0 128 128",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [/*#__PURE__*/_jsxs("g", {
+      filter: `url(#${filterId})`,
+      children: [/*#__PURE__*/_jsx("mask", {
+        id: mask0Id,
+        style: {
+          maskType: 'luminance'
+        },
+        maskUnits: "userSpaceOnUse",
+        x: "0",
+        y: "0",
+        width: "128",
+        height: "129",
+        children: /*#__PURE__*/_jsx("path", {
+          d: "M0 0H128V128.001H0V0Z",
+          fill: "white"
+        })
+      }), /*#__PURE__*/_jsxs("g", {
+        mask: `url(#${mask0Id})`,
+        children: [/*#__PURE__*/_jsx("mask", {
+          id: mask1Id,
+          style: {
+            maskType: 'luminance'
+          },
+          maskUnits: "userSpaceOnUse",
+          x: "0",
+          y: "0",
+          width: "128",
+          height: "129",
+          children: /*#__PURE__*/_jsx("path", {
+            d: "M64 0L73.0104 7.10949L83.7772 3.13275L90.1503 12.6778L101.619 12.2228L104.73 23.2709L115.777 26.3823L115.322 37.8508L124.868 44.2228L120.892 54.9896L128 64L120.892 73.0116L124.868 83.7772L115.322 90.1503L115.777 101.619L104.73 104.73L101.619 115.778L90.1503 115.323L83.7772 124.868L73.0104 120.892L64 128.001L54.9896 120.892L44.2228 124.868L37.8497 115.323L26.3812 115.778L23.2698 104.73L12.2228 101.619L12.6778 90.1503L3.13163 83.7772L7.10837 73.0116L0 64L7.10837 54.9896L3.13163 44.2228L12.6778 37.8508L12.2228 26.3823L23.2698 23.2709L26.3812 12.2228L37.8497 12.6778L44.2228 3.13275L54.9896 7.10949L64 0Z",
+            fill: "white"
+          })
+        }), /*#__PURE__*/_jsx("g", {
+          mask: `url(#${mask1Id})`,
+          children: /*#__PURE__*/_jsx("path", {
+            d: "M0 0V128.001H128V0H0Z",
+            fill: "#DCD9D9"
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsx("defs", {
+      children: /*#__PURE__*/_jsxs("filter", {
+        id: filterId,
+        x: "0",
+        y: "-4",
+        width: "128",
+        height: "132.001",
+        filterUnits: "userSpaceOnUse",
+        colorInterpolationFilters: "sRGB",
+        children: [/*#__PURE__*/_jsx("feFlood", {
+          floodOpacity: "0",
+          result: "BackgroundImageFix"
+        }), /*#__PURE__*/_jsx("feBlend", {
+          mode: "normal",
+          in: "SourceGraphic",
+          in2: "BackgroundImageFix",
+          result: "shape"
+        }), /*#__PURE__*/_jsx("feColorMatrix", {
+          in: "SourceAlpha",
+          type: "matrix",
+          values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+          result: "hardAlpha"
+        }), /*#__PURE__*/_jsx("feOffset", {
+          dy: "-4"
+        }), /*#__PURE__*/_jsx("feGaussianBlur", {
+          stdDeviation: "2"
+        }), /*#__PURE__*/_jsx("feComposite", {
+          in2: "hardAlpha",
+          operator: "arithmetic",
+          k2: "-1",
+          k3: "1"
+        }), /*#__PURE__*/_jsx("feColorMatrix", {
+          type: "matrix",
+          values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+        }), /*#__PURE__*/_jsx("feBlend", {
+          mode: "normal",
+          in2: "shape",
+          result: "effect1_innerShadow_placeholder"
+        })]
+      })
+    })]
+  });
+};
+export default PlaceholderMedal;

package/dist/Misc/MedalSelector/PlaceholderMedal.svg

@@ -0,0 +1,27 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_i_504_34002)">
+<mask id="mask0_504_34002" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="128" height="129">
+<path d="M0 0H128V128.001H0V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_504_34002)">
+<mask id="mask1_504_34002" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="128" height="129">
+<path d="M64 0L73.0104 7.10949L83.7772 3.13275L90.1503 12.6778L101.619 12.2228L104.73 23.2709L115.777 26.3823L115.322 37.8508L124.868 44.2228L120.892 54.9896L128 64L120.892 73.0116L124.868 83.7772L115.322 90.1503L115.777 101.619L104.73 104.73L101.619 115.778L90.1503 115.323L83.7772 124.868L73.0104 120.892L64 128.001L54.9896 120.892L44.2228 124.868L37.8497 115.323L26.3812 115.778L23.2698 104.73L12.2228 101.619L12.6778 90.1503L3.13163 83.7772L7.10837 73.0116L0 64L7.10837 54.9896L3.13163 44.2228L12.6778 37.8508L12.2228 26.3823L23.2698 23.2709L26.3812 12.2228L37.8497 12.6778L44.2228 3.13275L54.9896 7.10949L64 0Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_504_34002)">
+<path d="M0 0V128.001H128V0H0Z" fill="#DCD9D9"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_504_34002" x="0" y="-4" width="128" height="132.001" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_504_34002"/>
+</filter>
+</defs>
+</svg>