@tenancy.nz/ui 1.0.1 → 1.0.3

package/dist/cjs/components/AvatarInput.cjs

@@ -3,6 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var PropTypes = require('prop-types');
@@ -23,151 +24,204 @@ var Text = require('./Text.cjs');
 var AvatarCropDialog = require('./AvatarCropDialog.cjs');
 var AvatarInput_styled = require('./AvatarInput.styled.cjs');
 
-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] = React.useState(false);
-  const [droppedFile, setDroppedFile] = React.useState(null);
-  const [open, setOpen] = React.useState(false);
-  const [savedImage, setSavedImage] = React.useState("");
-  const [loading, setLoading] = React.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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var isNotMobile = useMediaQuery(function (theme) {
+    return theme.breakpoints.up("sm");
+  });
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    confirmDelete = _useState2[0],
+    setConfirmDelete = _useState2[1];
+  var _useState3 = React.useState(null),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    droppedFile = _useState4[0],
+    setDroppedFile = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+    open = _useState6[0],
+    setOpen = _useState6[1];
+  var _useState7 = React.useState(""),
+    _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
+    savedImage = _useState8[0],
+    setSavedImage = _useState8[1];
+  var _useState9 = React.useState(false),
+    _useState0 = _rollupPluginBabelHelpers.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
-  } = reactDropzone.useDropzone({
-    onDrop,
-    disabled,
-    accept: "image/*",
-    maxFiles: 1
-  });
-  const hasErrors = fileRejections.length > 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        AvatarInput_styled.StyledRoot,
-        {
-          disabled,
-          edges,
-          errors: hasErrors ? "yes" : "",
-          ...getRootProps(),
-          children: [
-            isDragActive && /* @__PURE__ */ jsxRuntime.jsx(AvatarInput_styled.StyledLinearProgress, { isDragReject }),
-            loading && !hasErrors && /* @__PURE__ */ jsxRuntime.jsx(AvatarInput_styled.StyledCircularProgress, {}),
-            /* @__PURE__ */ jsxRuntime.jsx("input", { ...getInputProps() }),
-            /* @__PURE__ */ jsxRuntime.jsxs(Grid, { container: true, spacing: 5, alignItems: "center", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(Grid, { item: true, xs: 12, sm: 3, md: 2, style: { textAlign: "center" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(AvatarInput_styled.StyledAvatarIcon, { children: [
-                  (() => {
-                    if (isDragReject) {
-                      return /* @__PURE__ */ jsxRuntime.jsx(WarningIcon, {});
-                    }
-                    if (isDragAccept) {
-                      return /* @__PURE__ */ jsxRuntime.jsx(CheckCircleIcon, {});
-                    }
-                    if (savedImage || value || placeholder) {
-                      return /* @__PURE__ */ jsxRuntime.jsx(AvatarInput_styled.StyledAvatar, { src: savedImage || value || placeholder });
-                    }
-                    if (DropzoneIcon) {
-                      return /* @__PURE__ */ jsxRuntime.jsx(DropzoneIcon, {});
-                    }
-                    return /* @__PURE__ */ jsxRuntime.jsx(PersonIcon, {});
-                  })(),
-                  !hasSelection && /* @__PURE__ */ jsxRuntime.jsx(AvatarInput_styled.StyledAddIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(AddIcon, { style: { color: "inherit" } }) })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Text.default,
-                  {
-                    align: "center",
-                    weight: "500",
-                    color: "textPrimary",
-                    noWrap: true,
-                    gutterBottom: false,
-                    children: isDragReject ? "Error!" : dropzoneLabel
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(Grid, { item: true, xs: 12, sm: 8, md: 9, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { pl: isNotMobile ? 5 : 0, children: /* @__PURE__ */ jsxRuntime.jsx(
-                Text.default,
-                {
-                  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 = reactDropzone.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__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */jsxRuntime.jsxs("div", {
+      style: {
+        position: "relative"
+      },
+      children: [/* @__PURE__ */jsxRuntime.jsxs(AvatarInput_styled.StyledRoot, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+        disabled: disabled,
+        edges: edges,
+        errors: hasErrors ? "yes" : ""
+      }, getRootProps()), {}, {
+        children: [isDragActive && /* @__PURE__ */jsxRuntime.jsx(AvatarInput_styled.StyledLinearProgress, {
+          isDragReject: isDragReject
+        }), loading && !hasErrors && /* @__PURE__ */jsxRuntime.jsx(AvatarInput_styled.StyledCircularProgress, {}), /* @__PURE__ */jsxRuntime.jsx("input", _rollupPluginBabelHelpers.objectSpread2({}, getInputProps())), /* @__PURE__ */jsxRuntime.jsxs(Grid, {
+          container: true,
+          spacing: 5,
+          alignItems: "center",
+          children: [/* @__PURE__ */jsxRuntime.jsxs(Grid, {
+            item: true,
+            xs: 12,
+            sm: 3,
+            md: 2,
+            style: {
+              textAlign: "center"
+            },
+            children: [/* @__PURE__ */jsxRuntime.jsxs(AvatarInput_styled.StyledAvatarIcon, {
+              children: [function () {
+                if (isDragReject) {
+                  return /* @__PURE__ */jsxRuntime.jsx(WarningIcon, {});
+                }
+                if (isDragAccept) {
+                  return /* @__PURE__ */jsxRuntime.jsx(CheckCircleIcon, {});
+                }
+                if (savedImage || value || placeholder) {
+                  return /* @__PURE__ */jsxRuntime.jsx(AvatarInput_styled.StyledAvatar, {
+                    src: savedImage || value || placeholder
+                  });
                 }
-              ) }) })
-            ] })
-          ]
-        }
-      ),
-      (savedImage || value) && // <ActionArea onClick={() => setConfirmDelete(true)}>
-      /* @__PURE__ */ jsxRuntime.jsx(AvatarInput_styled.StyledDeleteIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon, {}) })
-    ] }),
-    droppedFile && /* @__PURE__ */ jsxRuntime.jsxs(
-      Modal.default,
-      {
-        open,
-        onClose: () => setOpen(false),
-        fullWidth: true,
-        maxWidth: "lg",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ModalHeader.default, { onClose: () => setOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\xA0" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ModalContent.default, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            AvatarCropDialog.default,
-            {
-              droppedFile,
-              ...rest,
-              onSave: handleSave,
-              onDelete: handleDelete
-            }
-          ) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Confirmation.default,
-      {
-        open: confirmDelete,
-        onCancel: () => setConfirmDelete(false),
-        onConfirm: handleDelete,
-        message: "Are you sure you want to remove the attached image?"
-      }
-    )
-  ] });
+                if (DropzoneIcon) {
+                  return /* @__PURE__ */jsxRuntime.jsx(DropzoneIcon, {});
+                }
+                return /* @__PURE__ */jsxRuntime.jsx(PersonIcon, {});
+              }(), !hasSelection && /* @__PURE__ */jsxRuntime.jsx(AvatarInput_styled.StyledAddIcon, {
+                children: /* @__PURE__ */jsxRuntime.jsx(AddIcon, {
+                  style: {
+                    color: "inherit"
+                  }
+                })
+              })]
+            }), /* @__PURE__ */jsxRuntime.jsx(Text.default, {
+              align: "center",
+              weight: "500",
+              color: "textPrimary",
+              noWrap: true,
+              gutterBottom: false,
+              children: isDragReject ? "Error!" : dropzoneLabel
+            })]
+          }), /* @__PURE__ */jsxRuntime.jsx(Grid, {
+            item: true,
+            xs: 12,
+            sm: 8,
+            md: 9,
+            children: /* @__PURE__ */jsxRuntime.jsx(Box, {
+              pl: isNotMobile ? 5 : 0,
+              children: /* @__PURE__ */jsxRuntime.jsx(Text.default, {
+                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__ */
+      jsxRuntime.jsx(AvatarInput_styled.StyledDeleteIcon, {
+        children: /* @__PURE__ */jsxRuntime.jsx(DeleteIcon, {})
+      })]
+    }), droppedFile && /* @__PURE__ */jsxRuntime.jsxs(Modal.default, {
+      open: open,
+      onClose: function onClose() {
+        return setOpen(false);
+      },
+      fullWidth: true,
+      maxWidth: "lg",
+      children: [/* @__PURE__ */jsxRuntime.jsx(ModalHeader.default, {
+        onClose: function onClose() {
+          return setOpen(false);
+        },
+        children: /* @__PURE__ */jsxRuntime.jsx("span", {
+          children: "\xA0"
+        })
+      }), /* @__PURE__ */jsxRuntime.jsx(ModalContent.default, {
+        children: /* @__PURE__ */jsxRuntime.jsx(AvatarCropDialog.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+          droppedFile: droppedFile
+        }, rest), {}, {
+          onSave: handleSave,
+          onDelete: handleDelete
+        }))
+      })]
+    }), /* @__PURE__ */jsxRuntime.jsx(Confirmation.default, {
+      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/cjs/components/AvatarInput.styled.cjs

@@ -1,6 +1,7 @@
 "use strict";
 'use strict';
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var styles = require('@mui/material/styles');
 var styled = require('styled-components');
 var LinearProgress = require('@mui/material/LinearProgress');
@@ -8,7 +9,8 @@ var Box = require('@mui/material/Box');
 var CircularProgress = require('@mui/material/CircularProgress');
 var colors = require('../utils/colors.cjs');
 
-const borderRadius = (edges, theme) => {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var borderRadius = function borderRadius(edges, theme) {
   switch (edges) {
     case "rounded":
       return 99;
@@ -18,31 +20,39 @@ const borderRadius = (edges, theme) => {
       return theme.shape.borderRadius;
   }
 };
-const StyledRoot = styles.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: colors.hexToRgba(theme.palette.primary.main, 0.1)
-  },
-  "& .ReactCrop__crop-selection::before": {
-    content: "''"
-  }
-}));
-const StyledLinearProgress = styles.styled(LinearProgress)(
-  ({ isDragReject, theme }) => ({
+var StyledRoot = styles.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: colors.hexToRgba(theme.palette.primary.main, 0.1)
+    },
+    "& .ReactCrop__crop-selection::before": {
+      content: "''"
+    }
+  };
+});
+var StyledLinearProgress = styles.styled(LinearProgress)(function (_ref2) {
+  var isDragReject = _ref2.isDragReject,
+    theme = _ref2.theme;
+  return {
     position: "absolute",
     top: 0,
     left: 0,
@@ -51,96 +61,63 @@ const StyledLinearProgress = styles.styled(LinearProgress)(
     opacity: 0.2,
     backgroundColor: isDragReject ? theme.palette.error.main : theme.palette.primary.main,
     "& .MuiLinearProgress-barColorPrimary": {
-      background: colors.mixColors(
-        isDragReject ? theme.palette.error.main : theme.palette.primary.main,
-        "#ffffff",
-        60
-      )
+      background: colors.mixColors(isDragReject ? theme.palette.error.main : theme.palette.primary.main, "#ffffff", 60)
     }
-  })
-);
-const StyledCircularProgress = styles.styled(CircularProgress)({
+  };
+});
+var StyledCircularProgress = styles.styled(CircularProgress)({
   position: "absolute",
   top: "50%",
   left: "50%",
   marginTop: -20,
   marginLeft: -20
 });
-const StyledAvatar = styles.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 = styles.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.span`
-  ${({ theme }) => styled.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 = styles.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 = styles.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.span`
-  ${({ theme }) => styled.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.span(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return styled.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.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.span(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref6) {
+  var theme = _ref6.theme;
+  return styled.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers.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);
+});
 
 exports.StyledAddIcon = StyledAddIcon;
 exports.StyledAvatar = StyledAvatar;