@tenancy.nz/ui 1.0.1 → 1.0.3

package/dist/esm/components/AvatarInput.js

@@ -1,4 +1,5 @@
 "use strict";
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import PropTypes from 'prop-types';
@@ -19,151 +20,204 @@ import Text from './Text.js';
 import AvatarCropDialog from './AvatarCropDialog.js';
 import { StyledRoot, StyledLinearProgress, StyledCircularProgress, StyledAvatarIcon, StyledAvatar, StyledAddIcon, StyledDeleteIcon } from './AvatarInput.styled.js';
 
-function AvatarInput({
-  disabled = false,
-  edges = "normal",
-  dropzoneLabel = "Upload file",
-  dropzoneDescription = "Drag and drop a file here, or click to select a file",
-  placeholder = "https://via.placeholder.com/500x300",
-  onSave = () => Promise.resolve(true),
-  onDelete = () => Promise.resolve(true),
-  value = "",
-  DropzoneIcon = null,
-  hasSelection = false,
-  ...rest
-}) {
-  const isNotMobile = useMediaQuery((theme) => theme.breakpoints.up("sm"));
-  const [confirmDelete, setConfirmDelete] = useState(false);
-  const [droppedFile, setDroppedFile] = useState(null);
-  const [open, setOpen] = useState(false);
-  const [savedImage, setSavedImage] = useState("");
-  const [loading, setLoading] = useState(false);
-  const onDrop = (acceptedFiles) => {
+var _excluded = ["disabled", "edges", "dropzoneLabel", "dropzoneDescription", "placeholder", "onSave", "onDelete", "value", "DropzoneIcon", "hasSelection"];
+function AvatarInput(_ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$edges = _ref.edges,
+    edges = _ref$edges === void 0 ? "normal" : _ref$edges,
+    _ref$dropzoneLabel = _ref.dropzoneLabel,
+    dropzoneLabel = _ref$dropzoneLabel === void 0 ? "Upload file" : _ref$dropzoneLabel,
+    _ref$dropzoneDescript = _ref.dropzoneDescription,
+    dropzoneDescription = _ref$dropzoneDescript === void 0 ? "Drag and drop a file here, or click to select a file" : _ref$dropzoneDescript,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "https://via.placeholder.com/500x300" : _ref$placeholder,
+    _ref$onSave = _ref.onSave,
+    onSave = _ref$onSave === void 0 ? function () {
+      return Promise.resolve(true);
+    } : _ref$onSave,
+    _ref$onDelete = _ref.onDelete,
+    onDelete = _ref$onDelete === void 0 ? function () {
+      return Promise.resolve(true);
+    } : _ref$onDelete,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? "" : _ref$value,
+    _ref$DropzoneIcon = _ref.DropzoneIcon,
+    DropzoneIcon = _ref$DropzoneIcon === void 0 ? null : _ref$DropzoneIcon,
+    _ref$hasSelection = _ref.hasSelection,
+    hasSelection = _ref$hasSelection === void 0 ? false : _ref$hasSelection,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var isNotMobile = useMediaQuery(function (theme) {
+    return theme.breakpoints.up("sm");
+  });
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    confirmDelete = _useState2[0],
+    setConfirmDelete = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    droppedFile = _useState4[0],
+    setDroppedFile = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    open = _useState6[0],
+    setOpen = _useState6[1];
+  var _useState7 = useState(""),
+    _useState8 = _slicedToArray(_useState7, 2),
+    savedImage = _useState8[0],
+    setSavedImage = _useState8[1];
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    loading = _useState0[0],
+    setLoading = _useState0[1];
+  var onDrop = function onDrop(acceptedFiles) {
     setLoading(true);
-    const reader = new FileReader();
-    reader.addEventListener("load", () => {
+    var reader = new FileReader();
+    reader.addEventListener("load", function () {
       setDroppedFile(reader.result);
       setOpen(true);
       setLoading(false);
     });
     reader.readAsDataURL(acceptedFiles[0]);
   };
-  const handleSave = (result, blob) => onSave(result, blob).then(() => {
-    setSavedImage(result);
-    setOpen(false);
-  }).catch((e) => console.error(e));
-  const handleDelete = () => onDelete().then(() => {
-    setDroppedFile(null);
-    setSavedImage("");
-    setConfirmDelete(false);
-    setOpen(false);
-  });
-  const {
-    getRootProps,
-    getInputProps,
-    isDragActive,
-    isDragAccept,
-    isDragReject,
-    fileRejections
-  } = useDropzone({
-    onDrop,
-    disabled,
-    accept: "image/*",
-    maxFiles: 1
-  });
-  const hasErrors = fileRejections.length > 0;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsxs(
-        StyledRoot,
-        {
-          disabled,
-          edges,
-          errors: hasErrors ? "yes" : "",
-          ...getRootProps(),
-          children: [
-            isDragActive && /* @__PURE__ */ jsx(StyledLinearProgress, { isDragReject }),
-            loading && !hasErrors && /* @__PURE__ */ jsx(StyledCircularProgress, {}),
-            /* @__PURE__ */ jsx("input", { ...getInputProps() }),
-            /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 5, alignItems: "center", children: [
-              /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, sm: 3, md: 2, style: { textAlign: "center" }, children: [
-                /* @__PURE__ */ jsxs(StyledAvatarIcon, { children: [
-                  (() => {
-                    if (isDragReject) {
-                      return /* @__PURE__ */ jsx(WarningIcon, {});
-                    }
-                    if (isDragAccept) {
-                      return /* @__PURE__ */ jsx(CheckCircleIcon, {});
-                    }
-                    if (savedImage || value || placeholder) {
-                      return /* @__PURE__ */ jsx(StyledAvatar, { src: savedImage || value || placeholder });
-                    }
-                    if (DropzoneIcon) {
-                      return /* @__PURE__ */ jsx(DropzoneIcon, {});
-                    }
-                    return /* @__PURE__ */ jsx(PersonIcon, {});
-                  })(),
-                  !hasSelection && /* @__PURE__ */ jsx(StyledAddIcon, { children: /* @__PURE__ */ jsx(AddIcon, { style: { color: "inherit" } }) })
-                ] }),
-                /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    align: "center",
-                    weight: "500",
-                    color: "textPrimary",
-                    noWrap: true,
-                    gutterBottom: false,
-                    children: isDragReject ? "Error!" : dropzoneLabel
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 8, md: 9, children: /* @__PURE__ */ jsx(Box, { pl: isNotMobile ? 5 : 0, children: /* @__PURE__ */ jsx(
-                Text,
-                {
-                  align: isNotMobile ? "left" : "center",
-                  weight: "500",
-                  color: "textPrimary",
-                  children: isDragReject ? "The selected file(s) will not be accepted" : dropzoneDescription
+  var handleSave = function handleSave(result, blob) {
+    return onSave(result, blob).then(function () {
+      setSavedImage(result);
+      setOpen(false);
+    }).catch(function (e) {
+      return console.error(e);
+    });
+  };
+  var handleDelete = function handleDelete() {
+    return onDelete().then(function () {
+      setDroppedFile(null);
+      setSavedImage("");
+      setConfirmDelete(false);
+      setOpen(false);
+    });
+  };
+  var _useDropzone = useDropzone({
+      onDrop: onDrop,
+      disabled: disabled,
+      accept: "image/*",
+      maxFiles: 1
+    }),
+    getRootProps = _useDropzone.getRootProps,
+    getInputProps = _useDropzone.getInputProps,
+    isDragActive = _useDropzone.isDragActive,
+    isDragAccept = _useDropzone.isDragAccept,
+    isDragReject = _useDropzone.isDragReject,
+    fileRejections = _useDropzone.fileRejections;
+  var hasErrors = fileRejections.length > 0;
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsxs("div", {
+      style: {
+        position: "relative"
+      },
+      children: [/* @__PURE__ */jsxs(StyledRoot, _objectSpread2(_objectSpread2({
+        disabled: disabled,
+        edges: edges,
+        errors: hasErrors ? "yes" : ""
+      }, getRootProps()), {}, {
+        children: [isDragActive && /* @__PURE__ */jsx(StyledLinearProgress, {
+          isDragReject: isDragReject
+        }), loading && !hasErrors && /* @__PURE__ */jsx(StyledCircularProgress, {}), /* @__PURE__ */jsx("input", _objectSpread2({}, getInputProps())), /* @__PURE__ */jsxs(Grid, {
+          container: true,
+          spacing: 5,
+          alignItems: "center",
+          children: [/* @__PURE__ */jsxs(Grid, {
+            item: true,
+            xs: 12,
+            sm: 3,
+            md: 2,
+            style: {
+              textAlign: "center"
+            },
+            children: [/* @__PURE__ */jsxs(StyledAvatarIcon, {
+              children: [function () {
+                if (isDragReject) {
+                  return /* @__PURE__ */jsx(WarningIcon, {});
+                }
+                if (isDragAccept) {
+                  return /* @__PURE__ */jsx(CheckCircleIcon, {});
+                }
+                if (savedImage || value || placeholder) {
+                  return /* @__PURE__ */jsx(StyledAvatar, {
+                    src: savedImage || value || placeholder
+                  });
                 }
-              ) }) })
-            ] })
-          ]
-        }
-      ),
-      (savedImage || value) && // <ActionArea onClick={() => setConfirmDelete(true)}>
-      /* @__PURE__ */ jsx(StyledDeleteIcon, { children: /* @__PURE__ */ jsx(DeleteIcon, {}) })
-    ] }),
-    droppedFile && /* @__PURE__ */ jsxs(
-      Modal,
-      {
-        open,
-        onClose: () => setOpen(false),
-        fullWidth: true,
-        maxWidth: "lg",
-        children: [
-          /* @__PURE__ */ jsx(ModalHeader, { onClose: () => setOpen(false), children: /* @__PURE__ */ jsx("span", { children: "\xA0" }) }),
-          /* @__PURE__ */ jsx(ModalContent, { children: /* @__PURE__ */ jsx(
-            AvatarCropDialog,
-            {
-              droppedFile,
-              ...rest,
-              onSave: handleSave,
-              onDelete: handleDelete
-            }
-          ) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Confirmation,
-      {
-        open: confirmDelete,
-        onCancel: () => setConfirmDelete(false),
-        onConfirm: handleDelete,
-        message: "Are you sure you want to remove the attached image?"
-      }
-    )
-  ] });
+                if (DropzoneIcon) {
+                  return /* @__PURE__ */jsx(DropzoneIcon, {});
+                }
+                return /* @__PURE__ */jsx(PersonIcon, {});
+              }(), !hasSelection && /* @__PURE__ */jsx(StyledAddIcon, {
+                children: /* @__PURE__ */jsx(AddIcon, {
+                  style: {
+                    color: "inherit"
+                  }
+                })
+              })]
+            }), /* @__PURE__ */jsx(Text, {
+              align: "center",
+              weight: "500",
+              color: "textPrimary",
+              noWrap: true,
+              gutterBottom: false,
+              children: isDragReject ? "Error!" : dropzoneLabel
+            })]
+          }), /* @__PURE__ */jsx(Grid, {
+            item: true,
+            xs: 12,
+            sm: 8,
+            md: 9,
+            children: /* @__PURE__ */jsx(Box, {
+              pl: isNotMobile ? 5 : 0,
+              children: /* @__PURE__ */jsx(Text, {
+                align: isNotMobile ? "left" : "center",
+                weight: "500",
+                color: "textPrimary",
+                children: isDragReject ? "The selected file(s) will not be accepted" : dropzoneDescription
+              })
+            })
+          })]
+        })]
+      })), (savedImage || value) &&
+      // <ActionArea onClick={() => setConfirmDelete(true)}>
+      /* @__PURE__ */
+      jsx(StyledDeleteIcon, {
+        children: /* @__PURE__ */jsx(DeleteIcon, {})
+      })]
+    }), droppedFile && /* @__PURE__ */jsxs(Modal, {
+      open: open,
+      onClose: function onClose() {
+        return setOpen(false);
+      },
+      fullWidth: true,
+      maxWidth: "lg",
+      children: [/* @__PURE__ */jsx(ModalHeader, {
+        onClose: function onClose() {
+          return setOpen(false);
+        },
+        children: /* @__PURE__ */jsx("span", {
+          children: "\xA0"
+        })
+      }), /* @__PURE__ */jsx(ModalContent, {
+        children: /* @__PURE__ */jsx(AvatarCropDialog, _objectSpread2(_objectSpread2({
+          droppedFile: droppedFile
+        }, rest), {}, {
+          onSave: handleSave,
+          onDelete: handleDelete
+        }))
+      })]
+    }), /* @__PURE__ */jsx(Confirmation, {
+      open: confirmDelete,
+      onCancel: function onCancel() {
+        return setConfirmDelete(false);
+      },
+      onConfirm: handleDelete,
+      message: "Are you sure you want to remove the attached image?"
+    })]
+  });
 }
 AvatarInput.propTypes = {
   /**

package/dist/esm/components/AvatarInput.styled.js

@@ -1,4 +1,5 @@
 "use strict";
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { styled } from '@mui/material/styles';
 import styled$1, { css } from 'styled-components';
 import LinearProgress from '@mui/material/LinearProgress';
@@ -6,7 +7,8 @@ import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 import { hexToRgba, mixColors } from '../utils/colors.js';
 
-const borderRadius = (edges, theme) => {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var borderRadius = function borderRadius(edges, theme) {
   switch (edges) {
     case "rounded":
       return 99;
@@ -16,31 +18,39 @@ const borderRadius = (edges, theme) => {
       return theme.shape.borderRadius;
   }
 };
-const StyledRoot = styled(Box)(({ disabled, edges, errors, theme }) => ({
-  padding: "1rem 1.5rem 0.8rem 1.5rem",
-  marginBottom: "0.25rem",
-  color: theme.palette.text.primary,
-  position: "relative",
-  border: `2px dashed ${errors === "yes" ? theme.palette.error.main : theme.palette.primary.main}`,
-  background: disabled ? theme.palette.grey[300] : null,
-  opacity: disabled ? 0.5 : 1,
-  borderRadius: borderRadius(edges, theme),
-  "& img": {
-    width: "100%",
-    height: "auto",
-    display: "block"
-  },
-  "&:focus": {
-    border: `2px solid ${theme.palette.primary.main}`,
-    outline: "none",
-    background: hexToRgba(theme.palette.primary.main, 0.1)
-  },
-  "& .ReactCrop__crop-selection::before": {
-    content: "''"
-  }
-}));
-const StyledLinearProgress = styled(LinearProgress)(
-  ({ isDragReject, theme }) => ({
+var StyledRoot = styled(Box)(function (_ref) {
+  var disabled = _ref.disabled,
+    edges = _ref.edges,
+    errors = _ref.errors,
+    theme = _ref.theme;
+  return {
+    padding: "1rem 1.5rem 0.8rem 1.5rem",
+    marginBottom: "0.25rem",
+    color: theme.palette.text.primary,
+    position: "relative",
+    border: "2px dashed ".concat(errors === "yes" ? theme.palette.error.main : theme.palette.primary.main),
+    background: disabled ? theme.palette.grey[300] : null,
+    opacity: disabled ? 0.5 : 1,
+    borderRadius: borderRadius(edges, theme),
+    "& img": {
+      width: "100%",
+      height: "auto",
+      display: "block"
+    },
+    "&:focus": {
+      border: "2px solid ".concat(theme.palette.primary.main),
+      outline: "none",
+      background: hexToRgba(theme.palette.primary.main, 0.1)
+    },
+    "& .ReactCrop__crop-selection::before": {
+      content: "''"
+    }
+  };
+});
+var StyledLinearProgress = styled(LinearProgress)(function (_ref2) {
+  var isDragReject = _ref2.isDragReject,
+    theme = _ref2.theme;
+  return {
     position: "absolute",
     top: 0,
     left: 0,
@@ -49,95 +59,62 @@ const StyledLinearProgress = styled(LinearProgress)(
     opacity: 0.2,
     backgroundColor: isDragReject ? theme.palette.error.main : theme.palette.primary.main,
     "& .MuiLinearProgress-barColorPrimary": {
-      background: mixColors(
-        isDragReject ? theme.palette.error.main : theme.palette.primary.main,
-        "#ffffff",
-        60
-      )
+      background: mixColors(isDragReject ? theme.palette.error.main : theme.palette.primary.main, "#ffffff", 60)
     }
-  })
-);
-const StyledCircularProgress = styled(CircularProgress)({
+  };
+});
+var StyledCircularProgress = styled(CircularProgress)({
   position: "absolute",
   top: "50%",
   left: "50%",
   marginTop: -20,
   marginLeft: -20
 });
-const StyledAvatar = styled("div")(({ src, theme }) => ({
-  backgroundColor: theme.palette.grey.transparent,
-  backgroundImage: src ? `url(${src})` : null,
-  borderRadius: "50%",
-  overflow: "hidden",
-  backgroundSize: "cover",
-  backgroundPosition: "center",
-  position: "absolute",
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
-  height: "100%",
-  width: "100%"
-}));
-const StyledAvatarIcon = styled("div")(({ theme }) => ({
-  textAlign: "center",
-  display: "inline-block",
-  padding: 20,
-  marginBottom: 10,
-  height: 110,
-  width: 110,
-  position: "relative",
-  "& svg": {
-    width: "100%",
-    maxWidth: 150,
-    height: "auto",
-    color: theme.palette.grey.main,
-    display: "block"
-  }
-}));
-const StyledDeleteIcon = styled$1.span`
-  ${({ theme }) => css`
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    top: 50%;
-    right: 25px;
-    z-index: 9;
-    background: transparent;
-    color: ${theme.palette.grey.main};
-    width: 48px;
-    height: 48px;
-    margin-top: -12px;
-    font-size: 20px;
-    transition: all 0.25s ease-in-out;
-    transform: translateY(-50%) scale(0.9);
-    box-shadow: ${theme.shadows[2]};
-    border-radius: 50%;
-    &:hover {
-      background: rgba(0, 0, 0, 0.04);
-      transform: translateY(-50%) scale(1.05);
-      color: ${theme.palette.secondary.main};
-      box-shadow: ${theme.shadows[4]};
+var StyledAvatar = styled("div")(function (_ref3) {
+  var src = _ref3.src,
+    theme = _ref3.theme;
+  return {
+    backgroundColor: theme.palette.grey.transparent,
+    backgroundImage: src ? "url(".concat(src, ")") : null,
+    borderRadius: "50%",
+    overflow: "hidden",
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    height: "100%",
+    width: "100%"
+  };
+});
+var StyledAvatarIcon = styled("div")(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    textAlign: "center",
+    display: "inline-block",
+    padding: 20,
+    marginBottom: 10,
+    height: 110,
+    width: 110,
+    position: "relative",
+    "& svg": {
+      width: "100%",
+      maxWidth: 150,
+      height: "auto",
+      color: theme.palette.grey.main,
+      display: "block"
     }
-  `}
-`;
-const StyledAddIcon = styled$1.span`
-  ${({ theme }) => css`
-    display: inline-flex;
-    width: 12px;
-    height: 12px;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-    background: ${theme.palette.background.paper};
-    color: ${theme.palette.primaryAlt.main};
-    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.4);
-    position: absolute;
-    right: 12px;
-    z-index: 2;
-    bottom: 8px;
-  `}
-`;
+  };
+});
+var StyledDeleteIcon = styled$1.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    top: 50%;\n    right: 25px;\n    z-index: 9;\n    background: transparent;\n    color: ", ";\n    width: 48px;\n    height: 48px;\n    margin-top: -12px;\n    font-size: 20px;\n    transition: all 0.25s ease-in-out;\n    transform: translateY(-50%) scale(0.9);\n    box-shadow: ", ";\n    border-radius: 50%;\n    &:hover {\n      background: rgba(0, 0, 0, 0.04);\n      transform: translateY(-50%) scale(1.05);\n      color: ", ";\n      box-shadow: ", ";\n    }\n  "])), theme.palette.grey.main, theme.shadows[2], theme.palette.secondary.main, theme.shadows[4]);
+});
+var StyledAddIcon = styled$1.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref6) {
+  var theme = _ref6.theme;
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: inline-flex;\n    width: 12px;\n    height: 12px;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    background: ", ";\n    color: ", ";\n    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.4);\n    position: absolute;\n    right: 12px;\n    z-index: 2;\n    bottom: 8px;\n  "])), theme.palette.background.paper, theme.palette.primaryAlt.main);
+});
 
 export { StyledAddIcon, StyledAvatar, StyledAvatarIcon, StyledCircularProgress, StyledDeleteIcon, StyledLinearProgress, StyledRoot };

package/dist/esm/components/Badge.js

@@ -1,37 +1,47 @@
 "use strict";
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import PropTypes from 'prop-types';
 import { StyledBadge } from './Badge.styled.js';
 
-function Badge({
-  anchorOrigin = void 0,
-  badgeContent = " ",
-  color = "error",
-  invisible = false,
-  max = 99,
-  overlap = "circular",
-  showZero = false,
-  variant = "standard",
-  children,
-  ...rest
-}) {
-  const defaultAnchorOrigin = {
+var _excluded = ["anchorOrigin", "badgeContent", "color", "invisible", "max", "overlap", "showZero", "variant", "children"];
+function Badge(_ref) {
+  var _ref$anchorOrigin = _ref.anchorOrigin,
+    anchorOrigin = _ref$anchorOrigin === void 0 ? void 0 : _ref$anchorOrigin,
+    _ref$badgeContent = _ref.badgeContent,
+    badgeContent = _ref$badgeContent === void 0 ? " " : _ref$badgeContent,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "error" : _ref$color,
+    _ref$invisible = _ref.invisible,
+    invisible = _ref$invisible === void 0 ? false : _ref$invisible,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 99 : _ref$max,
+    _ref$overlap = _ref.overlap,
+    overlap = _ref$overlap === void 0 ? "circular" : _ref$overlap,
+    _ref$showZero = _ref.showZero,
+    showZero = _ref$showZero === void 0 ? false : _ref$showZero,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "standard" : _ref$variant,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var defaultAnchorOrigin = {
     horizontal: "right",
     vertical: "top"
   };
-  const props = {
+  var props = _objectSpread2({
     anchorOrigin: anchorOrigin || defaultAnchorOrigin,
-    badgeContent,
-    color,
-    invisible,
-    max,
-    overlap,
-    showZero,
-    variant,
-    ...rest
-  };
-  return /* @__PURE__ */ jsx(StyledBadge, { ...props, children });
+    badgeContent: badgeContent,
+    color: color,
+    invisible: invisible,
+    max: max,
+    overlap: overlap,
+    showZero: showZero,
+    variant: variant
+  }, rest);
+  return /* @__PURE__ */jsx(StyledBadge, _objectSpread2(_objectSpread2({}, props), {}, {
+    children: children
+  }));
 }
 Badge.propTypes = {
   /**