@nualang/nualang-ui-components 0.1.1413 → 0.1.1414

package/dist/Assignments/AssignmentCardsList/AssignmentCardsList.js

@@ -30,7 +30,8 @@ const AssignmentCardsList = ({
   isLoadingAssignments,
   isChallengeModeStudent,
   isReadWriteModeStudent,
-  scrollableTarget = null
+  scrollableTarget = null,
+  openSnackbar
 }) => {
   const [lastClickedExerciseId, setLastClickedExerciseId] = useState(null);
   const [filter, setFilter] = useState("all");
@@ -355,7 +356,8 @@ const AssignmentCardsList = ({
         handleViewProgress: handleViewProgress,
         assignedStudents: assignmentMembersById[assignment.assignmentId] || [],
         isChallengeModeStudent: isChallengeModeStudent,
-        isReadWriteModeStudent: isReadWriteModeStudent
+        isReadWriteModeStudent: isReadWriteModeStudent,
+        openSnackbar: openSnackbar
       }, assignment.assignmentId))
     })]
   });

package/dist/Dialogs/CreatePhrase/CreatePhrase.js

@@ -57,6 +57,7 @@ function CreatePhrase({
   verificationStatus,
   makeChatGptApiRequest,
   difficulty,
+  openSnackbar,
   ...otherProps
 }) {
   const translationInputRef = useRef();
@@ -723,7 +724,8 @@ function CreatePhrase({
             autoSuggest: true,
             autoSuggestedImages: autoSuggestedImages,
             selectedImage: selectedImage,
-            verificationStatus: verificationStatus
+            verificationStatus: verificationStatus,
+            openSnackbar: openSnackbar
           })
         })]
       })]

package/dist/Dialogs/CreatePhraseGroupDialog/CreatePhraseGroupDialog.js

@@ -71,7 +71,8 @@ export default function CreatePhraseGroupDialog({
   onCreated,
   t = text => text,
   fileSizeLimit,
-  verificationStatus
+  verificationStatus,
+  openSnackbar
 }) {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
@@ -180,7 +181,8 @@ export default function CreatePhraseGroupDialog({
           autoCrop: true,
           autoSuggest: false,
           selectedImage: selectedImage,
-          verificationStatus: verificationStatus
+          verificationStatus: verificationStatus,
+          openSnackbar: openSnackbar
         })
       })]
     })

package/dist/Dialogs/ImageBuilder/ImageBuilderDialog.js

@@ -7,13 +7,8 @@ import ImageBuilderControls from "./ImageBuilderControls";
 import ImageBuilderPreview from "./ImageBuilderPreview";
 import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
 import { PRESET_COLORS, ICON_KEYS } from "./iconPaths";
-import { generatePatternCanvas, getCenterCropDataUrl, getOptimalIconOpacity, shouldUseDarkIcons } from "./imageBuilderUtils";
-
-// Matches placeholder SVG ratio (21144 x 4890), scaled down 10x
+import { generateBuilderImages, getOptimalIconOpacity, shouldUseDarkIcons } from "./imageBuilderUtils";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const BANNER_W = 2114;
-const BANNER_H = 489;
-const CARD_SIZE = 489;
 const useStyles = makeStyles()(theme => ({
   body: {
     display: "flex",
@@ -51,19 +46,13 @@ export default function ImageBuilderDialog({
         cardDataUrl: null
       };
     }
-    const canvas = generatePatternCanvas({
+    return generateBuilderImages({
       color,
       iconKey,
       density: "dense",
       iconOpacity,
-      darkIcons,
-      width: BANNER_W,
-      height: BANNER_H
+      darkIcons
     });
-    return {
-      bannerDataUrl: canvas.toDataURL("image/png"),
-      cardDataUrl: getCenterCropDataUrl(canvas, CARD_SIZE)
-    };
   }, [color, iconKey, iconOpacity, darkIcons]);
 
   // Reset state when dialog opens

package/dist/Dialogs/ImageBuilder/imageBuilderUtils.js

@@ -4,6 +4,19 @@ const DENSITY_COLS = {
   medium: 10,
   dense: 14
 };
+
+// Base (logical) dimensions of a builder image. Matches placeholder SVG ratio
+// (21144 x 4890), scaled down 10x. The card is a centre-cropped square.
+export const BANNER_W = 2114;
+export const BANNER_H = 489;
+export const CARD_SIZE = 489;
+
+// Supersampling factor applied to the generated pixel dimensions so the stored
+// image stays crisp when scaled up on large / HiDPI screens. Device-independent
+// on purpose — the image is persisted and shared across devices, so we must not
+// bake window.devicePixelRatio into it. Tune this single knob to trade payload
+// size against sharpness.
+export const OUTPUT_SCALE = 2;
 function hexToRgb(hex) {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   return result ? {
@@ -87,6 +100,7 @@ export function generatePatternCanvas({
   canvas.width = width;
   canvas.height = height;
   const ctx = canvas.getContext("2d");
+  ctx.imageSmoothingQuality = "high";
 
   // 1. Solid background
   ctx.fillStyle = color;
@@ -107,10 +121,18 @@ export function generatePatternCanvas({
   };
   const maxDim = Math.max(vb.width, vb.height);
   const scale = iconSize / maxDim;
+
+  // Rasterise the stamp at its final on-canvas size by filling the vector paths
+  // through a scaled context. Previously the stamp was drawn at the raw viewBox
+  // size (e.g. 24px) and then upscaled ~4x when blitted onto the pattern canvas,
+  // which baked a blurry raster upscale into the source image. Filling from
+  // vectors at the target size keeps icons crisp while preserving the single
+  // stamp (so overlapping sub-paths don't double-composite at globalAlpha < 1).
   const stampCanvas = document.createElement("canvas");
-  stampCanvas.width = vb.width;
-  stampCanvas.height = vb.height;
+  stampCanvas.width = Math.ceil(vb.width * scale);
+  stampCanvas.height = Math.ceil(vb.height * scale);
   const stampCtx = stampCanvas.getContext("2d");
+  stampCtx.scale(scale, scale);
   stampCtx.fillStyle = darkIcons ? "#000" : "#fff";
   const path2Ds = iconData.paths.map(d => new Path2D(d));
   for (const p of path2Ds) {
@@ -131,9 +153,8 @@ export function generatePatternCanvas({
       ctx.save();
       ctx.translate(x, y);
       ctx.rotate(rotation);
-      ctx.scale(scale, scale);
-      ctx.translate(-vb.width / 2, -vb.height / 2);
-      ctx.drawImage(stampCanvas, 0, 0);
+      // Draw the pre-scaled stamp 1:1 (centred) — no upscaling here.
+      ctx.drawImage(stampCanvas, -stampCanvas.width / 2, -stampCanvas.height / 2);
       ctx.restore();
     }
   }
@@ -156,4 +177,25 @@ export function getCenterCropDataUrl(source, size) {
   const sx = (source.width - source.height) / 2;
   ctx.drawImage(source, sx, 0, source.height, source.height, 0, 0, size, size);
   return cropCanvas.toDataURL("image/png");
+}
+
+/**
+ * Generate the builder images (banner + centre-cropped card) at the shared
+ * supersampled output resolution. Single source of truth for the builder
+ * dimensions so callers don't duplicate the magic numbers.
+ *
+ * @param {Object} opts – forwarded to generatePatternCanvas (color, iconKey,
+ *   density, iconOpacity, darkIcons, seed)
+ * @returns {{ bannerDataUrl: string, cardDataUrl: string }}
+ */
+export function generateBuilderImages(opts) {
+  const canvas = generatePatternCanvas({
+    ...opts,
+    width: BANNER_W * OUTPUT_SCALE,
+    height: BANNER_H * OUTPUT_SCALE
+  });
+  return {
+    bannerDataUrl: canvas.toDataURL("image/png"),
+    cardDataUrl: getCenterCropDataUrl(canvas, CARD_SIZE * OUTPUT_SCALE)
+  };
 }

package/dist/Dialogs/QuickCreateClassroomDialog/QuickCreateClassroomDialog.js

@@ -80,7 +80,8 @@ export default function QuickCreateClassroomDialog({
   userImage,
   forLang,
   languages,
-  forLanguages
+  forLanguages,
+  openSnackbar
 }) {
   const [classroomName, setClassroomName] = useState("");
   const [classroomDescription, setClassroomDescription] = useState("");
@@ -275,7 +276,8 @@ export default function QuickCreateClassroomDialog({
           autoSuggest: false,
           selectedImage: selectedImage,
           verificationStatus: verificationStatus,
-          onBuilderSettingsChange: setBuilderSettings
+          onBuilderSettingsChange: setBuilderSettings,
+          openSnackbar: openSnackbar
         })
       })]
     })

package/dist/Dialogs/QuickCreateCourseDialog/QuickCreateCourseDialog.js

@@ -83,7 +83,8 @@ export default function QuickCreateCourseDialog({
   difficulties = ["A1", "A2", "B1", "B2", "C1", "C2"],
   fileSizeLimit,
   verificationStatus,
-  userImage
+  userImage,
+  openSnackbar
 }) {
   const defaultSelectedImage = {
     image: "",
@@ -289,7 +290,8 @@ export default function QuickCreateCourseDialog({
           autoSuggest: false,
           selectedImage: selectedImage,
           verificationStatus: verificationStatus,
-          onBuilderSettingsChange: setBuilderSettings
+          onBuilderSettingsChange: setBuilderSettings,
+          openSnackbar: openSnackbar
         })
       })]
     })

package/dist/Dialogs/QuickCreateTopicDialog/QuickCreateTopicDialog.js

@@ -83,7 +83,8 @@ export default function QuickCreateTopicDialog({
   userImage,
   coursePicture,
   coursePictureBuilderColor,
-  coursePictureBuilderIcon
+  coursePictureBuilderIcon,
+  openSnackbar
 }) {
   // Only inherit the parent course image when it's a real user-set image.
   // If the course has no image, or its image was itself generated by the image
@@ -274,7 +275,8 @@ export default function QuickCreateTopicDialog({
           autoSuggest: false,
           selectedImage: selectedImage,
           verificationStatus: verificationStatus,
-          onBuilderSettingsChange: setBuilderSettings
+          onBuilderSettingsChange: setBuilderSettings,
+          openSnackbar: openSnackbar
         })
       })]
     })

package/dist/Editors/Bot/Bot.js

@@ -770,7 +770,8 @@ function Bot({
         courseId: courseId,
         sectionId: sectionId,
         topicId: topicId,
-        initialTopicGoal: initialTopicGoal
+        initialTopicGoal: initialTopicGoal,
+        openSnackbar: openSnackbar
       }) : null, tabValue === 1 ? /*#__PURE__*/_jsx(Box, {
         className: hidden ? classes.paneFull : classes.pane,
         children: BotPreview
@@ -791,7 +792,8 @@ function Bot({
           subscription: subscription,
           handleBotInstructionsImageUpload: handleBotInstructionsImageUpload,
           isUserInternal: isUserInternal,
-          verificationStatus: verificationStatus
+          verificationStatus: verificationStatus,
+          openSnackbar: openSnackbar
         })
       }) : null]
     }), /*#__PURE__*/_jsx(ResponsiveDialog, {

package/dist/Editors/Bot/Editor/BotDesigner/AddImageModal/AddImageModal.js

@@ -14,7 +14,8 @@ function AddImageModal(props) {
     open,
     handleUploadBotExerciseImage,
     botId,
-    verificationStatus
+    verificationStatus,
+    openSnackbar
   } = props;
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
@@ -76,7 +77,8 @@ function AddImageModal(props) {
         name: "image",
         value: selectedImage.image,
         handleChange: handleImageChange,
-        verificationStatus: verificationStatus
+        verificationStatus: verificationStatus,
+        openSnackbar: openSnackbar
       })]
     }), /*#__PURE__*/_jsxs(DialogActions, {
       children: [/*#__PURE__*/_jsx(Button, {

package/dist/Editors/Bot/Editor/BotDesigner/BotDesigner.js

@@ -36,7 +36,8 @@ function BotDesigner(props) {
     handleUpdateAllVariables,
     handleUploadBotExerciseImage,
     botId,
-    handleOnBlur
+    handleOnBlur,
+    openSnackbar
   } = props;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [rivescriptJSON && rivescriptJSON.begin.var && /*#__PURE__*/_jsx(VarList, {
@@ -49,7 +50,8 @@ function BotDesigner(props) {
       handleUploadBotExerciseImage: handleUploadBotExerciseImage,
       botId: botId,
       handleOnBlur: handleOnBlur,
-      handleUpdateVariable: handleUpdateVariable
+      handleUpdateVariable: handleUpdateVariable,
+      openSnackbar: openSnackbar
     }), rivescriptJSON && rivescriptJSON.begin.array && /*#__PURE__*/_jsx(AlternativesList, {
       t: t,
       alternatives: rivescriptJSON.begin.array,

package/dist/Editors/Bot/Editor/BotDesigner/VarList.js

@@ -26,7 +26,8 @@ function VarListItem({
   handleOnBlur,
   handleUploadBotExerciseImage,
   verificationStatus,
-  botId
+  botId,
+  openSnackbar
 }) {
   const [selectedImage, setSelectedImage] = useState("");
   if (varValue && markdownImageLinkRegex.test(varValue)) {
@@ -72,6 +73,7 @@ function VarListItem({
           handleChange: handleImageChange,
           cropCompletedCallback: cropCompletedCallback,
           verificationStatus: verificationStatus,
+          openSnackbar: openSnackbar,
           autoGenerateDefault: false
           // fileSizeLimit={fileSizeLimit}
           ,
@@ -256,7 +258,8 @@ function VarList({
   handleSelectCurrentInput,
   handleUploadBotExerciseImage,
   botId,
-  handleOnBlur
+  handleOnBlur,
+  openSnackbar
 }) {
   const [open, setOpen] = useState(true);
   const [varUploader, setVarUploader] = useState(false);
@@ -276,7 +279,8 @@ function VarList({
       handleUploadBotExerciseImage: handleUploadBotExerciseImage,
       handleOnBlur: handleOnBlur,
       botId: botId,
-      handleUpdateVariable: handleUpdateVariable
+      handleUpdateVariable: handleUpdateVariable,
+      openSnackbar: openSnackbar
     }));
   }
   return /*#__PURE__*/_jsxs(List, {

package/dist/Editors/Bot/Editor/Editor.js

@@ -93,7 +93,8 @@ function Editor({
   sectionId,
   topicId,
   initialTopicGoal,
-  verificationStatus
+  verificationStatus,
+  openSnackbar
 }) {
   const [formattingOptionsAnchorEl, setFormattingOptionsAnchorEl] = useState(null);
   const isFormattingOptionsOpen = Boolean(formattingOptionsAnchorEl);
@@ -566,7 +567,8 @@ function Editor({
         handleUpdateAlternatives: handleUpdateAlternatives,
         handleUploadBotExerciseImage: handleUploadBotExerciseImage,
         botId: bot.botId,
-        handleUpdateVariable: handleUpdateVariable
+        handleUpdateVariable: handleUpdateVariable,
+        openSnackbar: openSnackbar
       }), /*#__PURE__*/_jsx(TriggerDialog, {
         t: t,
         open: isTriggerModalOpen,
@@ -602,7 +604,8 @@ function Editor({
         botId: bot.botId,
         handleUploadBotExerciseImage: handleUploadBotExerciseImage,
         handleAddImage: handleAddImage,
-        verificationStatus: verificationStatus
+        verificationStatus: verificationStatus,
+        openSnackbar: openSnackbar
       }), /*#__PURE__*/_jsx(AddLinkModal, {
         classes: {},
         t: t,

package/dist/Editors/PhraseList/PhraseList.js

@@ -96,7 +96,8 @@ function PhraseList({
   otherPhraseLists,
   otherPhraseListsLoading,
   handleTransferPhrase,
-  handleCreatePhraseListFromSelection
+  handleCreatePhraseListFromSelection,
+  openSnackbar
 }) {
   const theme = useTheme();
   const {
@@ -357,7 +358,8 @@ function PhraseList({
           isGeneratePhrasesDialogOpen: isGeneratePhrasesDialogOpen,
           setIsGeneratePhrasesDialogOpen: setIsGeneratePhrasesDialogOpen,
           mode: mode,
-          scriptDownloadRef: scriptDownloadRef
+          scriptDownloadRef: scriptDownloadRef,
+          openSnackbar: openSnackbar
         })
       }) : null, tabValue === 1 ? /*#__PURE__*/_jsx(Box, {
         sx: {
@@ -378,7 +380,8 @@ function PhraseList({
           onSubmitExerciseSettings: onSubmitExerciseSettings,
           handleSpeak: handleSpeak,
           fileSizeLimit: fileSizeLimit,
-          verificationStatus: verificationStatus
+          verificationStatus: verificationStatus,
+          openSnackbar: openSnackbar
         })
       }) : null]
     })

package/dist/Editors/Phrases/Phrases.js

@@ -289,7 +289,8 @@ function PhrasesEditor(props) {
     isGeneratePhrasesDialogOpen,
     setIsGeneratePhrasesDialogOpen,
     mode = Modes.NORMAL,
-    scriptDownloadRef
+    scriptDownloadRef,
+    openSnackbar
   } = props;
   const [errors, setErrors] = useState([]);
   const [selectionModel, setSelectionModel] = useState({
@@ -551,7 +552,8 @@ function PhrasesEditor(props) {
       siteLanguage: siteLanguage,
       verificationStatus: verificationStatus,
       makeChatGptApiRequest: makeChatGptApiRequest,
-      difficulty: difficulty
+      difficulty: difficulty,
+      openSnackbar: openSnackbar
     }), /*#__PURE__*/_jsx(UploadPhrasesDialog, {
       t: t,
       learnLang: learnLang,

package/dist/Editors/Roleplay/Roleplay.js

@@ -280,7 +280,8 @@ function Roleplay({
   topicId,
   initialTopicGoal,
   isUserInternal,
-  verificationStatus
+  verificationStatus,
+  openSnackbar
 }) {
   // console.log("Edit Roleplay -> phrases", phrases);
   const [isGenerateRoleplayDialogOpen, setIsGenerateRoleplayDialogOpen] = useState(false);
@@ -848,7 +849,8 @@ function Roleplay({
         fileSizeLimit: fileSizeLimit,
         subscription: subscription,
         isUserInternal: isUserInternal,
-        verificationStatus: verificationStatus
+        verificationStatus: verificationStatus,
+        openSnackbar: openSnackbar
       })
     }) : null, /*#__PURE__*/_jsx(CreateQuestionDialog, {
       t: t,

package/dist/Forms/CreateBot/Steps/BotInformation/BotInformation.js

@@ -59,7 +59,8 @@ function BotInformation({
   handleBotInstructionsImageUpload,
   langChar,
   isUserInternal,
-  verificationStatus
+  verificationStatus,
+  openSnackbar
 }) {
   const {
     classes
@@ -257,7 +258,8 @@ function BotInformation({
           handleChange: handleChange,
           fileSizeLimit: fileSizeLimit,
           previewComponent: PreviewCard,
-          verificationStatus: verificationStatus
+          verificationStatus: verificationStatus,
+          openSnackbar: openSnackbar
         })
       }), /*#__PURE__*/_jsx(Grid, {
         size: 12,

package/dist/Forms/CreateClassroom/Steps/Customization/Customization.js

@@ -10,7 +10,8 @@ function Customization({
   values,
   fileSizeLimit,
   verificationStatus,
-  isUpdateClassroom = false
+  isUpdateClassroom = false,
+  openSnackbar
 }) {
   const {
     picture,
@@ -56,7 +57,8 @@ function Customization({
             }) => {
               setFieldValue("pictureBuilderColor", color);
               setFieldValue("pictureBuilderIcon", iconKey);
-            }
+            },
+            openSnackbar: openSnackbar
           })
         })]
       }), /*#__PURE__*/_jsxs(Grid, {
@@ -87,7 +89,8 @@ function Customization({
             }) => {
               setFieldValue("bannerBuilderColor", color);
               setFieldValue("bannerBuilderIcon", iconKey);
-            }
+            },
+            openSnackbar: openSnackbar
           })
         })]
       })]

package/dist/Forms/CreateCourse/Steps/Customization/Customization.js

@@ -10,7 +10,8 @@ function Customization({
   values,
   fileSizeLimit,
   isUpdateCourse = false,
-  verificationStatus
+  verificationStatus,
+  openSnackbar
 }) {
   const {
     picture,
@@ -56,7 +57,8 @@ function Customization({
             }) => {
               setFieldValue("pictureBuilderColor", color);
               setFieldValue("pictureBuilderIcon", iconKey);
-            }
+            },
+            openSnackbar: openSnackbar
           })
         })]
       }), /*#__PURE__*/_jsxs(Grid, {
@@ -87,7 +89,8 @@ function Customization({
             }) => {
               setFieldValue("bannerBuilderColor", color);
               setFieldValue("bannerBuilderIcon", iconKey);
-            }
+            },
+            openSnackbar: openSnackbar
           })
         })]
       })]

package/dist/Forms/CreateMeetingMultiStepForm/CreateMeetingMultiStepForm.js

@@ -37,7 +37,8 @@ export default function CreateMeetingMultiStepForm({
   getCourseSections,
   courseSectionTopicId,
   createDiscussion,
-  username
+  username,
+  openSnackbar
 }) {
   function getSteps() {
     return [MeetingForm, GroupAssignment];
@@ -65,7 +66,8 @@ export default function CreateMeetingMultiStepForm({
       getCourseSections: getCourseSections,
       courseSectionTopicId: courseSectionTopicId,
       createDiscussion: createDiscussion,
-      username: username
+      username: username,
+      openSnackbar: openSnackbar
     });
   }
   return /*#__PURE__*/_jsx(MultiStepForm, {
@@ -83,6 +85,7 @@ export default function CreateMeetingMultiStepForm({
     getCourseSections: getCourseSections,
     courseSectionTopicId: courseSectionTopicId,
     createDiscussion: createDiscussion,
-    username: username
+    username: username,
+    openSnackbar: openSnackbar
   });
 }

package/dist/Forms/CreateMeetingMultiStepForm/MeetingForm.js

@@ -32,7 +32,8 @@ function MeetingForm({
   getCourseSections,
   courseSectionTopicId,
   createDiscussion,
-  username
+  username,
+  openSnackbar
 }) {
   const {
     meetingPrompt,
@@ -348,7 +349,8 @@ function MeetingForm({
           handleChange: handleChange,
           fileSizeLimit: 5000000,
           initialImages: initialBackgroundImages,
-          previewComponent: PreviewCard
+          previewComponent: PreviewCard,
+          openSnackbar: openSnackbar
         })]
       }), /*#__PURE__*/_jsxs(Grid, {
         size: {
@@ -379,7 +381,8 @@ function MeetingForm({
           handleChange: handleChange,
           fileSizeLimit: 5000000,
           initialImages: initialMeetingImages,
-          previewComponent: PreviewCard
+          previewComponent: PreviewCard,
+          openSnackbar: openSnackbar
         })]
       }), /*#__PURE__*/_jsx(Grid, {
         size: {

package/dist/Forms/CreateRoleplay/Steps/RoleplayInformation/RoleplayInformation.js

@@ -299,7 +299,8 @@ function RoleplayInformation({
   errors,
   langChar,
   isUserInternal,
-  verificationStatus
+  verificationStatus,
+  openSnackbar
 }) {
   const {
     roleplayName,
@@ -380,7 +381,8 @@ function RoleplayInformation({
           handleChange: handleChange,
           fileSizeLimit: fileSizeLimit,
           previewComponent: PreviewCard,
-          verificationStatus: verificationStatus
+          verificationStatus: verificationStatus,
+          openSnackbar: openSnackbar
         })
       }), /*#__PURE__*/_jsx(Grid, {
         size: 12,

package/dist/Forms/CreateTopic/Steps/Customization/Customization.js

@@ -10,7 +10,8 @@ function Customization({
   values,
   fileSizeLimit,
   isUpdateTopic = false,
-  verificationStatus
+  verificationStatus,
+  openSnackbar
 }) {
   const {
     picture,
@@ -56,7 +57,8 @@ function Customization({
             }) => {
               setFieldValue("pictureBuilderColor", color);
               setFieldValue("pictureBuilderIcon", iconKey);
-            }
+            },
+            openSnackbar: openSnackbar
           })
         })]
       }), isUpdateTopic ? /*#__PURE__*/_jsxs(Grid, {
@@ -87,7 +89,8 @@ function Customization({
             }) => {
               setFieldValue("bannerBuilderColor", color);
               setFieldValue("bannerBuilderIcon", iconKey);
-            }
+            },
+            openSnackbar: openSnackbar
           })
         })]
       }) : null]