@mamrp/components 1.7.60 → 1.7.62

package/dist/index.d.mts

@@ -756,4 +756,18 @@ interface MapPickerProps {
 }
 declare function MapLocationPicker({ control, nameLat, nameLong, nameAddress, isLoading, defaultLat, defaultLng, defaultZoom, minZoom, maxZoom, }: MapPickerProps): React$1.JSX.Element;
 
-export { Page as Accordion, AdvancedSearchButton, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, CustomDateTimePicker, CustomDialog, type CustomDialogProps, CustomTimePicker, DataTable, DateFilter, DateFilterRange, DateMonthPicker, JalaliDatePicker$2 as DatePicker, JalaliDatePicker$1 as DateTimePicker, JalaliDateTimeRangePicker as DateTimeRangePicker, DraggablePaper, UploadImage$1 as EnhancedUploadImage, FormInputNumber, FormInputText, HorizontalStepper, imgViewer as ImgViewer, LicensePlate, MapLocationPicker, JalaliDatePicker as MobileDateTimePicker, ConfirmationDialog as Modal, NestedSelect as NestedSelectort, NoResult, PaginationList, type PaletteColor, PatternTextField, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage };
+declare function CheckBoxGroup({ name, label, options, control, align, disabledBoarder, direction, }: {
+    name: string;
+    label: string | React$1.ReactNode;
+    control: Control<any>;
+    options: {
+        value: any;
+        name: string;
+        id: any;
+    }[];
+    align?: "start" | "center" | "end";
+    disabledBoarder?: boolean;
+    direction?: "row" | "column";
+}): React$1.JSX.Element;
+
+export { Page as Accordion, AdvancedSearchButton, CheckBoxGroup, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, CustomDateTimePicker, CustomDialog, type CustomDialogProps, CustomTimePicker, DataTable, DateFilter, DateFilterRange, DateMonthPicker, JalaliDatePicker$2 as DatePicker, JalaliDatePicker$1 as DateTimePicker, JalaliDateTimeRangePicker as DateTimeRangePicker, DraggablePaper, UploadImage$1 as EnhancedUploadImage, FormInputNumber, FormInputText, HorizontalStepper, imgViewer as ImgViewer, LicensePlate, MapLocationPicker, JalaliDatePicker as MobileDateTimePicker, ConfirmationDialog as Modal, NestedSelect as NestedSelectort, NoResult, PaginationList, type PaletteColor, PatternTextField, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage };

package/dist/index.d.ts

@@ -756,4 +756,18 @@ interface MapPickerProps {
 }
 declare function MapLocationPicker({ control, nameLat, nameLong, nameAddress, isLoading, defaultLat, defaultLng, defaultZoom, minZoom, maxZoom, }: MapPickerProps): React$1.JSX.Element;
 
-export { Page as Accordion, AdvancedSearchButton, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, CustomDateTimePicker, CustomDialog, type CustomDialogProps, CustomTimePicker, DataTable, DateFilter, DateFilterRange, DateMonthPicker, JalaliDatePicker$2 as DatePicker, JalaliDatePicker$1 as DateTimePicker, JalaliDateTimeRangePicker as DateTimeRangePicker, DraggablePaper, UploadImage$1 as EnhancedUploadImage, FormInputNumber, FormInputText, HorizontalStepper, imgViewer as ImgViewer, LicensePlate, MapLocationPicker, JalaliDatePicker as MobileDateTimePicker, ConfirmationDialog as Modal, NestedSelect as NestedSelectort, NoResult, PaginationList, type PaletteColor, PatternTextField, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage };
+declare function CheckBoxGroup({ name, label, options, control, align, disabledBoarder, direction, }: {
+    name: string;
+    label: string | React$1.ReactNode;
+    control: Control<any>;
+    options: {
+        value: any;
+        name: string;
+        id: any;
+    }[];
+    align?: "start" | "center" | "end";
+    disabledBoarder?: boolean;
+    direction?: "row" | "column";
+}): React$1.JSX.Element;
+
+export { Page as Accordion, AdvancedSearchButton, CheckBoxGroup, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, CustomDateTimePicker, CustomDialog, type CustomDialogProps, CustomTimePicker, DataTable, DateFilter, DateFilterRange, DateMonthPicker, JalaliDatePicker$2 as DatePicker, JalaliDatePicker$1 as DateTimePicker, JalaliDateTimeRangePicker as DateTimeRangePicker, DraggablePaper, UploadImage$1 as EnhancedUploadImage, FormInputNumber, FormInputText, HorizontalStepper, imgViewer as ImgViewer, LicensePlate, MapLocationPicker, JalaliDatePicker as MobileDateTimePicker, ConfirmationDialog as Modal, NestedSelect as NestedSelectort, NoResult, PaginationList, type PaletteColor, PatternTextField, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage };

package/dist/index.js

@@ -32,6 +32,7 @@ var src_exports = {};
 __export(src_exports, {
   Accordion: () => Page,
   AdvancedSearchButton: () => AdvancedSearchButton,
+  CheckBoxGroup: () => CheckBoxGroup,
   ConfirmationDialog: () => ConfirmationDialog,
   ConnectToBasculeButton: () => bascule_connection_button_default,
   CustomCheckbox: () => CustomCheckbox,
@@ -84,8 +85,8 @@ var import_react = require("react");
 function Page({
   data
 }) {
-  const Accordion = (0, import_styles.styled)((props) => /* @__PURE__ */ React.createElement(import_Accordion.default, { disableGutters: true, elevation: 0, square: true, ...props }))(({ theme: theme3 }) => ({
-    border: `1px solid ${theme3.palette.divider}`,
+  const Accordion = (0, import_styles.styled)((props) => /* @__PURE__ */ React.createElement(import_Accordion.default, { disableGutters: true, elevation: 0, square: true, ...props }))(({ theme: theme4 }) => ({
+    border: `1px solid ${theme4.palette.divider}`,
     "&:not(:last-child)": {
       borderBottom: 0
     },
@@ -93,21 +94,21 @@ function Page({
       display: "none"
     }
   }));
-  const AccordionSummary = (0, import_styles.styled)((props) => /* @__PURE__ */ React.createElement(import_AccordionSummary.default, { expandIcon: /* @__PURE__ */ React.createElement(import_io.IoIosArrowForward, null), ...props }))(({ theme: theme3 }) => ({
+  const AccordionSummary = (0, import_styles.styled)((props) => /* @__PURE__ */ React.createElement(import_AccordionSummary.default, { expandIcon: /* @__PURE__ */ React.createElement(import_io.IoIosArrowForward, null), ...props }))(({ theme: theme4 }) => ({
     backgroundColor: "rgba(0, 0, 0, .03)",
     flexDirection: "row-reverse",
     [`& .${import_AccordionSummary.accordionSummaryClasses.expandIconWrapper}.${import_AccordionSummary.accordionSummaryClasses.expanded}`]: {
       transform: "rotate(90deg)"
     },
     [`& .${import_AccordionSummary.accordionSummaryClasses.content}`]: {
-      marginLeft: theme3.spacing(1)
+      marginLeft: theme4.spacing(1)
     },
-    ...theme3.applyStyles("dark", {
+    ...theme4.applyStyles("dark", {
       backgroundColor: "rgba(255, 255, 255, .05)"
     })
   }));
-  const AccordionDetails = (0, import_styles.styled)(import_AccordionDetails.default)(({ theme: theme3 }) => ({
-    padding: theme3.spacing(2),
+  const AccordionDetails = (0, import_styles.styled)(import_AccordionDetails.default)(({ theme: theme4 }) => ({
+    padding: theme4.spacing(2),
     borderTop: "1px solid rgba(0, 0, 0, .125)"
   }));
   const [expanded, setExpanded] = (0, import_react.useState)("");
@@ -216,7 +217,7 @@ function LicensePlate({
   readOnly = true,
   size
 }) {
-  const theme3 = (0, import_material2.useTheme)();
+  const theme4 = (0, import_material2.useTheme)();
   const [open, setOpen] = (0, import_react2.useState)(false);
   const [inputValues, setInputValues] = (0, import_react2.useState)({
     input1: "",
@@ -268,7 +269,7 @@ function LicensePlate({
     }
   };
   const inputStyle = {
-    color: theme3.palette.text.primary,
+    color: theme4.palette.text.primary,
     width: "30px",
     textAlign: "center",
     backgroundColor: "transparent",
@@ -807,8 +808,8 @@ function AdvancedSearchButton({
   backgroundColor,
   border = false
 }) {
-  const theme3 = (0, import_material6.useTheme)();
-  const isDarkMode = theme3.palette.mode === "dark";
+  const theme4 = (0, import_material6.useTheme)();
+  const isDarkMode = theme4.palette.mode === "dark";
   return /* @__PURE__ */ import_react5.default.createElement(
     import_material6.Button,
     {
@@ -818,7 +819,7 @@ function AdvancedSearchButton({
       },
       startIcon: /* @__PURE__ */ import_react5.default.createElement(AnimatedIcon, { isShowFilter }),
       sx: {
-        color: theme3.palette.text.primary ?? color,
+        color: theme4.palette.text.primary ?? color,
         borderRadius: borderRadius ?? 2,
         paddingY,
         fontSize,
@@ -968,7 +969,7 @@ function ConfirmationDialog({
           position: "absolute",
           right: 8,
           top: 8,
-          color: (theme3) => theme3.palette.grey[500]
+          color: (theme4) => theme4.palette.grey[500]
         }
       },
       /* @__PURE__ */ React8.createElement(import_md.MdClose, null)
@@ -1141,7 +1142,7 @@ var DateTimePickerComponent = ({
   clearable = false,
   variant = "outlined"
 }) => {
-  const theme3 = (0, import_material11.useTheme)();
+  const theme4 = (0, import_material11.useTheme)();
   const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
   const [hasUserInteracted, setHasUserInteracted] = (0, import_react9.useState)(false);
   const hourInputRef = (0, import_react9.useRef)(null);
@@ -1714,7 +1715,7 @@ var DateTimePickerComponent = ({
             fontWeight: isSelected(day) ? 700 : 400,
             bgcolor: isSelected(day) ? "primary.main" : isToday(day) ? "primary.lighter" : "transparent",
             color: isSelected(day) ? "primary.contrastText" : isToday(day) ? "primary.main" : index % 7 === 6 ? "error.main" : "text.primary",
-            border: isToday(day) && !isSelected(day) ? `2px solid ${theme3.palette.primary.main}` : "none",
+            border: isToday(day) && !isSelected(day) ? `2px solid ${theme4.palette.primary.main}` : "none",
             transition: "all 0.15s ease",
             "&:hover": day ? {
               bgcolor: isSelected(day) ? "primary.dark" : "action.hover"
@@ -1775,7 +1776,7 @@ function CustomDialog({
         {
           alignItems: "center",
           sx: {
-            color: iconColor ? (theme3) => {
+            color: iconColor ? (theme4) => {
               const paletteColors = [
                 "primary",
                 "secondary",
@@ -1794,11 +1795,11 @@ function CustomDialog({
                 "customRed"
               ];
               if (paletteColors.includes(iconColor)) {
-                const palette = theme3.palette;
+                const palette = theme4.palette;
                 return palette[iconColor]?.main || iconColor;
               }
               return iconColor;
-            } : (theme3) => theme3.palette.info.main,
+            } : (theme4) => theme4.palette.info.main,
             pr: 0.5
           }
         },
@@ -1814,7 +1815,7 @@ function CustomDialog({
           position: "absolute",
           right: 8,
           top: 8,
-          color: (theme3) => theme3.palette.grey[500]
+          color: (theme4) => theme4.palette.grey[500]
         },
         disabled: isSubmiting
       },
@@ -1879,7 +1880,7 @@ var TimePickerComponent = ({
   disabled = false,
   variant = "outlined"
 }) => {
-  const theme3 = (0, import_material13.useTheme)();
+  const theme4 = (0, import_material13.useTheme)();
   const initialHour = value ? parseInt(value.split(":")[0]) : null;
   const initialMinute = value ? parseInt(value.split(":")[1]) : null;
   const [isModalOpen, setIsModalOpen] = (0, import_react10.useState)(false);
@@ -1981,7 +1982,7 @@ var TimePickerComponent = ({
       },
       InputProps: {
         ...!disabled && {
-          endAdornment: /* @__PURE__ */ React.createElement(import_material13.InputAdornment, { position: "end" }, /* @__PURE__ */ React.createElement(import_material13.Tooltip, { title: "\u0627\u0646\u062A\u062E\u0627\u0628 \u0632\u0645\u0627\u0646" }, /* @__PURE__ */ React.createElement(import_material13.IconButton, { onClick: () => setIsModalOpen(true) }, /* @__PURE__ */ React.createElement(import_common2.Clock, { size: 22, color: theme3.palette.text.primary }))))
+          endAdornment: /* @__PURE__ */ React.createElement(import_material13.InputAdornment, { position: "end" }, /* @__PURE__ */ React.createElement(import_material13.Tooltip, { title: "\u0627\u0646\u062A\u062E\u0627\u0628 \u0632\u0645\u0627\u0646" }, /* @__PURE__ */ React.createElement(import_material13.IconButton, { onClick: () => setIsModalOpen(true) }, /* @__PURE__ */ React.createElement(import_common2.Clock, { size: 22, color: theme4.palette.text.primary }))))
         }
       },
       sx: {
@@ -2048,7 +2049,7 @@ var TimePickerComponent = ({
           position: "absolute",
           right: 8,
           top: 8,
-          color: (theme4) => theme4.palette.grey[500]
+          color: (theme5) => theme5.palette.grey[500]
         }
       },
       /* @__PURE__ */ React.createElement(import_md4.MdClose, null)
@@ -3744,6 +3745,23 @@ function ImageViewer({
 }
 
 // src/enhanced-upload-image/index.tsx
+var import_heic2any = __toESM(require("heic2any"));
+var isHeic = (file) => file.type === "image/heic" || file.type === "image/heif" || file.name.toLowerCase().endsWith(".heic") || file.name.toLowerCase().endsWith(".heif");
+var convertHeicToJpeg = async (file) => {
+  const convertedBlob = await (0, import_heic2any.default)({
+    blob: file,
+    toType: "image/jpeg",
+    quality: 0.9
+  });
+  return new File(
+    [convertedBlob],
+    file.name.replace(/\.(heic|heif)$/i, ".jpg"),
+    {
+      type: "image/jpeg",
+      lastModified: Date.now()
+    }
+  );
+};
 var UploadImage = ({
   placeholder,
   name,
@@ -3805,20 +3823,20 @@ var UploadImage = ({
     });
   };
   const handleImageChange = async (event) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      console.log("Original file size (KB):", (file.size / 1024).toFixed(2));
-      const compressedFile = await compressImage(file);
-      if (compressedFile) {
-        console.log(
-          "Compressed file size (KB):",
-          (compressedFile.size / 1024).toFixed(2)
-        );
-        const objectURL = URL.createObjectURL(compressedFile);
-        setSelectedImage(objectURL);
-        setValue(name, compressedFile);
+    let file = event.target.files?.[0];
+    if (!file) return;
+    if (isHeic(file)) {
+      try {
+        file = await convertHeicToJpeg(file);
+      } catch (e) {
+        return;
       }
     }
+    const compressedFile = await compressImage(file);
+    if (!compressedFile) return;
+    const objectURL = URL.createObjectURL(compressedFile);
+    setSelectedImage(objectURL);
+    setValue(name, compressedFile);
   };
   const handleRemoveImage = () => {
     setSelectedImage(null);
@@ -4308,7 +4326,7 @@ function SearchLicensePlate({
   readOnly = true,
   size = "small"
 }) {
-  const theme3 = (0, import_material22.useTheme)();
+  const theme4 = (0, import_material22.useTheme)();
   const [open, setOpen] = (0, import_react21.useState)(false);
   const [inputValues, setInputValues] = (0, import_react21.useState)({
     input1: "",
@@ -4323,7 +4341,7 @@ function SearchLicensePlate({
     input4: (0, import_react21.useRef)(null)
   };
   const inputStyle = {
-    color: theme3.palette.text.primary,
+    color: theme4.palette.text.primary,
     width: "30px",
     textAlign: "center",
     backgroundColor: "transparent",
@@ -4861,7 +4879,7 @@ function ConfirmationDialog2({
         position: "absolute",
         right: 8,
         top: 8,
-        color: (theme3) => theme3.palette.grey[500]
+        color: (theme4) => theme4.palette.grey[500]
       }
     },
     /* @__PURE__ */ React15.createElement(import_md10.MdClose, null)
@@ -4914,7 +4932,7 @@ function NoResult({
   description,
   sx = {}
 }) {
-  const theme3 = (0, import_material25.useTheme)();
+  const theme4 = (0, import_material25.useTheme)();
   return /* @__PURE__ */ import_react23.default.createElement(
     import_material25.Card,
     {
@@ -4922,7 +4940,7 @@ function NoResult({
         width: "100%",
         minWidth: 300,
         borderRadius: "12px",
-        border: `1px solid ${theme3.palette.secondary.light}`
+        border: `1px solid ${theme4.palette.secondary.light}`
       }
     },
     /* @__PURE__ */ import_react23.default.createElement(
@@ -5370,11 +5388,11 @@ var SwitchButton = ({
   iconChecked,
   iconUnchecked
 }) => {
-  const theme3 = (0, import_material31.useTheme)();
-  const isDarkMode = theme3.palette.mode === "dark";
-  const CustomSwitch = (0, import_system8.styled)(import_material30.Switch)(({ theme: theme4 }) => ({
+  const theme4 = (0, import_material31.useTheme)();
+  const isDarkMode = theme4.palette.mode === "dark";
+  const CustomSwitch = (0, import_system8.styled)(import_material30.Switch)(({ theme: theme5 }) => ({
     "& .MuiSwitch-switchBase.Mui-checked": {
-      color: theme4.palette.primary.main
+      color: theme5.palette.primary.main
     },
     "& .MuiSwitch-switchBase": {
       color: isDarkMode ? "rgba(220,220,220,1)" : "rgba(188,188,188,1)"
@@ -5385,16 +5403,16 @@ var SwitchButton = ({
       border: isDarkMode ? "2px solid white" : "2px solid rgba(80,80,80, 1)"
     }
   }));
-  const BoxContainer = (0, import_system8.styled)(import_material30.Box)(({ theme: theme4 }) => ({
+  const BoxContainer = (0, import_system8.styled)(import_material30.Box)(({ theme: theme5 }) => ({
     display: "flex",
     alignItems: "center",
     backgroundColor: "rgba(188,188,188, 0.1)",
     border: "2px solid rgba(200,200,200, 1)",
     borderRadius: 10,
     transition: "all 0.3s ease",
-    paddingTop: theme4.spacing(0.1),
-    paddingBottom: theme4.spacing(0.1),
-    paddingLeft: theme4.spacing(1)
+    paddingTop: theme5.spacing(0.1),
+    paddingBottom: theme5.spacing(0.1),
+    paddingLeft: theme5.spacing(1)
   }));
   const LabelContainer = (0, import_system8.styled)("div")({
     transition: "all 0.2s ease",
@@ -6140,8 +6158,8 @@ function MapLocationPicker({
   minZoom = 10,
   maxZoom = 19
 }) {
-  const theme3 = (0, import_material34.useTheme)();
-  const isDarkMode = theme3.palette.mode === "dark";
+  const theme4 = (0, import_material34.useTheme)();
+  const isDarkMode = theme4.palette.mode === "dark";
   const { field: latField, fieldState: latState } = (0, import_react_hook_form18.useController)({
     name: nameLat,
     control
@@ -6490,7 +6508,7 @@ function MapLocationPicker({
           onClick: handleClearLocation,
           sx: {
             backgroundColor: isDarkMode ? "#1e1e1e" : "white",
-            color: theme3.palette.error.main,
+            color: theme4.palette.error.main,
             boxShadow: 2,
             "&:hover": {
               backgroundColor: isDarkMode ? "#2a2a2a" : "#f5f5f5"
@@ -6530,10 +6548,118 @@ function MapLocationPicker({
     helperText
   ));
 }
+
+// src/checkbox-group/index.tsx
+var React28 = __toESM(require("react"));
+var import_react_hook_form19 = require("react-hook-form");
+var import_Checkbox = __toESM(require("@mui/material/Checkbox"));
+var import_FormControlLabel2 = __toESM(require("@mui/material/FormControlLabel"));
+var import_FormControl2 = __toESM(require("@mui/material/FormControl"));
+var import_FormLabel2 = __toESM(require("@mui/material/FormLabel"));
+var import_material35 = require("@mui/material");
+var import_system9 = require("@mui/system");
+var import_theme3 = __toESM(require("@mamrp/layout/theme"));
+function CheckBoxGroup({
+  name,
+  label,
+  options,
+  control,
+  align = "start",
+  disabledBoarder,
+  direction = "row"
+}) {
+  const normalize = (v) => typeof v === "string" && !isNaN(Number(v)) ? Number(v) : v;
+  return /* @__PURE__ */ React28.createElement(
+    import_FormControl2.default,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: direction,
+        alignItems: "center",
+        justifyContent: "start"
+      }
+    },
+    /* @__PURE__ */ React28.createElement(
+      import_react_hook_form19.Controller,
+      {
+        name,
+        control,
+        defaultValue: [],
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ React28.createElement(import_system9.Box, { display: "flex", width: "100%", flexDirection: "column" }, label && /* @__PURE__ */ React28.createElement(
+          import_FormLabel2.default,
+          {
+            sx: {
+              position: "absolute",
+              top: -10,
+              left: 15,
+              px: 0.5,
+              backgroundColor: "background.paper",
+              color: error?.message ? import_theme3.default.CustomComponents.RadioButton.errorColor : import_theme3.default.CustomComponents.RadioButton.textColor,
+              fontSize: 15,
+              zIndex: 1
+            }
+          },
+          label
+        ), /* @__PURE__ */ React28.createElement(
+          import_system9.Box,
+          {
+            sx: {
+              width: "100%",
+              p: 0.8,
+              px: 1,
+              borderRadius: 3,
+              display: "flex",
+              justifyContent: align,
+              flexDirection: "row",
+              border: disabledBoarder ? "" : `${import_theme3.default.CustomComponents.RadioButton.borderSize}px solid`,
+              borderColor: error?.message ? import_theme3.default.CustomComponents.RadioButton.errorColor : import_theme3.default.CustomComponents.RadioButton.borderColor
+            }
+          },
+          options.map((option) => /* @__PURE__ */ React28.createElement(
+            import_FormControlLabel2.default,
+            {
+              key: option.value,
+              label: option.name,
+              control: /* @__PURE__ */ React28.createElement(
+                import_Checkbox.default,
+                {
+                  checked: Array.isArray(field.value) && field.value.includes(normalize(option.value)),
+                  onChange: (e) => {
+                    const checked = e.target.checked;
+                    const value = normalize(option.value);
+                    const currentValue = Array.isArray(field.value) ? field.value.map(normalize) : [];
+                    if (checked) {
+                      if (!currentValue.includes(value)) {
+                        field.onChange([...currentValue, value]);
+                      }
+                    } else {
+                      field.onChange(
+                        currentValue.filter((v) => v !== value)
+                      );
+                    }
+                  }
+                }
+              )
+            }
+          ))
+        ), error?.message && /* @__PURE__ */ React28.createElement(
+          import_material35.Typography,
+          {
+            color: "error",
+            fontSize: import_theme3.default.CustomComponents.RadioButton.errorFontSize,
+            ml: 2
+          },
+          error?.message
+        ))
+      }
+    )
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
   AdvancedSearchButton,
+  CheckBoxGroup,
   ConfirmationDialog,
   ConnectToBasculeButton,
   CustomCheckbox,