@tenancy.nz/ui 1.0.2 → 1.0.3

package/dist/cjs/components/Nameplate.cjs

@@ -3,6 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 require('react');
 var PropTypes = require('prop-types');
@@ -14,75 +15,84 @@ var Heading = require('./Heading.cjs');
 var Text = require('./Text.cjs');
 var Nameplate_styled = require('./Nameplate.styled.cjs');
 
-function Nameplate({
-  heading = "",
-  logo = "",
-  skeleton = false,
-  subHeading = "",
-  title = "",
-  ...rest
-}) {
-  const isMobile = useMediaQuery((theme) => theme.breakpoints.down("sm"));
-  return /* @__PURE__ */ jsxRuntime.jsx(Nameplate_styled.StyledWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(MuiContainer, { maxWidth: "lg", ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Box,
-    {
-      sx: {
-        display: "flex",
-        justifyContent: "space-between",
-        flexWrap: "nowrap",
-        alignItems: "center",
-        px: isMobile ? 2 : 0,
-        py: 4
-      },
-      children: skeleton ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flexGrow: 1 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Skeleton,
-            {
+var _excluded = ["heading", "logo", "skeleton", "subHeading", "title"];
+function Nameplate(_ref) {
+  var _ref$heading = _ref.heading,
+    heading = _ref$heading === void 0 ? "" : _ref$heading,
+    _ref$logo = _ref.logo,
+    logo = _ref$logo === void 0 ? "" : _ref$logo,
+    _ref$skeleton = _ref.skeleton,
+    skeleton = _ref$skeleton === void 0 ? false : _ref$skeleton,
+    _ref$subHeading = _ref.subHeading,
+    subHeading = _ref$subHeading === void 0 ? "" : _ref$subHeading,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "" : _ref$title,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var isMobile = useMediaQuery(function (theme) {
+    return theme.breakpoints.down("sm");
+  });
+  return /* @__PURE__ */jsxRuntime.jsx(Nameplate_styled.StyledWrapper, {
+    children: /* @__PURE__ */jsxRuntime.jsx(MuiContainer, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+      maxWidth: "lg"
+    }, rest), {}, {
+      children: /* @__PURE__ */jsxRuntime.jsx(Box, {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          flexWrap: "nowrap",
+          alignItems: "center",
+          px: isMobile ? 2 : 0,
+          py: 4
+        },
+        children: skeleton ? /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/* @__PURE__ */jsxRuntime.jsxs("div", {
+            style: {
+              flexGrow: 1
+            },
+            children: [/* @__PURE__ */jsxRuntime.jsx(Skeleton, {
               width: isMobile ? "80%" : "40%",
               height: isMobile ? 22 : 30
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Skeleton,
-            {
+            }), /* @__PURE__ */jsxRuntime.jsx(Skeleton, {
               width: isMobile ? "60%" : "30%",
               height: isMobile ? 22 : 30
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", height: 100, width: 100 })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          title && /* @__PURE__ */ jsxRuntime.jsxs(Text.default, { color: "textSecondary", variant: "body1", weight: "600", children: [
-            isMobile && /* @__PURE__ */ jsxRuntime.jsx("small", { children: /* @__PURE__ */ jsxRuntime.jsx("small", { children: title }) }),
-            !isMobile && title
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            Heading.default,
-            {
+            })]
+          }), /* @__PURE__ */jsxRuntime.jsx(Skeleton, {
+            variant: "rect",
+            height: 100,
+            width: 100
+          })]
+        }) : /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/* @__PURE__ */jsxRuntime.jsxs("div", {
+            children: [title && /* @__PURE__ */jsxRuntime.jsxs(Text.default, {
+              color: "textSecondary",
+              variant: "body1",
+              weight: "600",
+              children: [isMobile && /* @__PURE__ */jsxRuntime.jsx("small", {
+                children: /* @__PURE__ */jsxRuntime.jsx("small", {
+                  children: title
+                })
+              }), !isMobile && title]
+            }), /* @__PURE__ */jsxRuntime.jsxs(Heading.default, {
               as: isMobile ? "h5" : "h3",
               weight: "400",
               color: "textPrimary",
               gutterBottom: false,
-              children: [
-                heading,
-                subHeading && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-                  " ",
-                  subHeading
-                ] })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Nameplate_styled.StyledImgWrapper, { children: [
-          logo && /* @__PURE__ */ jsxRuntime.jsx(Nameplate_styled.StyledImg, { src: logo, alt: heading }),
-          !logo && heading && /* @__PURE__ */ jsxRuntime.jsx(Nameplate_styled.StyledImgText, { children: heading[0].toUpperCase() })
-        ] })
-      ] })
-    }
-  ) }) });
+              children: [heading, subHeading && /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [/* @__PURE__ */jsxRuntime.jsx("br", {}), " ", subHeading]
+              })]
+            })]
+          }), /* @__PURE__ */jsxRuntime.jsxs(Nameplate_styled.StyledImgWrapper, {
+            children: [logo && /* @__PURE__ */jsxRuntime.jsx(Nameplate_styled.StyledImg, {
+              src: logo,
+              alt: heading
+            }), !logo && heading && /* @__PURE__ */jsxRuntime.jsx(Nameplate_styled.StyledImgText, {
+              children: heading[0].toUpperCase()
+            })]
+          })]
+        })
+      })
+    }))
+  });
 }
 Nameplate.propTypes = {
   /**

package/dist/cjs/components/Nameplate.styled.cjs

@@ -1,47 +1,28 @@
 "use strict";
 'use strict';
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var styled = require('styled-components');
 var styles = require('@mui/material/styles');
 var colors = require('../utils/colors.cjs');
 
-const StyledWrapper = styles.styled("div")(({ theme }) => ({
-  background: "#fff",
-  borderBottom: `1px solid ${colors.hexToRgba(theme.palette.default.main, 0.4)}`
-}));
-const StyledImgWrapper = styled.div`
-  ${({ theme }) => styled.css`
-    display: flex;
-    overflow: hidden;
-    margin-left: 0.5em;
-    flex-basis: 150px;
-    justify-content: flex-end;
-    align-items: center;
-    height: 80px;
-
-    @media screen and (min-width: ${theme.breakpoints.md}px) {
-      margin-left: 1em;
-      flex-basis: 200px;
-      height: 100px;
-    }
-  `}
-`;
-const StyledImg = styled.img`
-  max-width: 100%;
-  max-height: 100%;
-`;
-const StyledImgText = styled.div`
-  ${({ theme }) => styled.css`
-    width: 100%;
-    height: 100%;
-    background: ${theme.palette.grey[400]};
-    color: ${theme.palette.background.paper};
-    font-size: ${theme.typography.size.scale(9)};
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  `}
-`;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var StyledWrapper = styles.styled("div")(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    background: "#fff",
+    borderBottom: "1px solid ".concat(colors.hexToRgba(theme.palette.default.main, 0.4))
+  };
+});
+var StyledImgWrapper = styled.div(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return styled.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    display: flex;\n    overflow: hidden;\n    margin-left: 0.5em;\n    flex-basis: 150px;\n    justify-content: flex-end;\n    align-items: center;\n    height: 80px;\n\n    @media screen and (min-width: ", "px) {\n      margin-left: 1em;\n      flex-basis: 200px;\n      height: 100px;\n    }\n  "])), theme.breakpoints.md);
+});
+var StyledImg = styled.img(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  max-width: 100%;\n  max-height: 100%;\n"])));
+var StyledImgText = styled.div(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return styled.css(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    width: 100%;\n    height: 100%;\n    background: ", ";\n    color: ", ";\n    font-size: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  "])), theme.palette.grey[400], theme.palette.background.paper, theme.typography.size.scale(9));
+});
 
 exports.StyledImg = StyledImg;
 exports.StyledImgText = StyledImgText;

package/dist/cjs/components/Pagination.cjs

@@ -3,6 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 require('react');
 var PropTypes = require('prop-types');
@@ -11,7 +12,8 @@ var usePagination = require('@mui/material/usePagination');
 var MoreHorizIcon = require('@mui/icons-material/MoreHoriz');
 var Pagination_styled = require('./Pagination.styled.cjs');
 
-const getLabel = (type) => {
+var _excluded = ["boundaryCount", "color", "count", "defaultPage", "disabled", "onChange", "shape", "showFirstLastButtons", "showNexPrevButtons", "siblingCount", "size"];
+var getLabel = function getLabel(type) {
   if (type === "first") {
     return "First";
   }
@@ -25,59 +27,70 @@ const getLabel = (type) => {
     return "Next";
   }
   if (type === "start-ellipsis" || type === "end-ellipsis") {
-    return /* @__PURE__ */ jsxRuntime.jsx(MoreHorizIcon, { fontSize: "inherit" });
+    return /* @__PURE__ */jsxRuntime.jsx(MoreHorizIcon, {
+      fontSize: "inherit"
+    });
   }
   return null;
 };
-function Pagination({
-  boundaryCount = 1,
-  color = "textPrimary",
-  count = 1,
-  defaultPage = 1,
-  disabled = false,
-  onChange = void 0,
-  shape = "round",
-  showFirstLastButtons = false,
-  showNexPrevButtons = true,
-  siblingCount = 1,
-  size = "large",
-  ...others
-}) {
-  const rest = {
-    boundaryCount,
-    color,
-    count,
-    defaultPage,
-    disabled,
-    onChange,
-    shape,
-    showFirstLastButtons,
-    showNexPrevButtons,
-    siblingCount,
-    size,
-    ...others
-  };
-  const { items } = usePagination({
-    ...rest,
-    hideNextButton: !showNexPrevButtons,
-    hidePrevButton: !showNexPrevButtons,
-    showFirstButton: showFirstLastButtons,
-    showLastButton: showFirstLastButtons
+function Pagination(_ref) {
+  var _ref$boundaryCount = _ref.boundaryCount,
+    boundaryCount = _ref$boundaryCount === void 0 ? 1 : _ref$boundaryCount,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "textPrimary" : _ref$color,
+    _ref$count = _ref.count,
+    count = _ref$count === void 0 ? 1 : _ref$count,
+    _ref$defaultPage = _ref.defaultPage,
+    defaultPage = _ref$defaultPage === void 0 ? 1 : _ref$defaultPage,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? void 0 : _ref$onChange,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? "round" : _ref$shape,
+    _ref$showFirstLastBut = _ref.showFirstLastButtons,
+    showFirstLastButtons = _ref$showFirstLastBut === void 0 ? false : _ref$showFirstLastBut,
+    _ref$showNexPrevButto = _ref.showNexPrevButtons,
+    showNexPrevButtons = _ref$showNexPrevButto === void 0 ? true : _ref$showNexPrevButto,
+    _ref$siblingCount = _ref.siblingCount,
+    siblingCount = _ref$siblingCount === void 0 ? 1 : _ref$siblingCount,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "large" : _ref$size,
+    others = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var rest = _rollupPluginBabelHelpers.objectSpread2({
+    boundaryCount: boundaryCount,
+    color: color,
+    count: count,
+    defaultPage: defaultPage,
+    disabled: disabled,
+    onChange: onChange,
+    shape: shape,
+    showFirstLastButtons: showFirstLastButtons,
+    showNexPrevButtons: showNexPrevButtons,
+    siblingCount: siblingCount,
+    size: size
+  }, others);
+  var _usePagination = usePagination(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
+      hideNextButton: !showNexPrevButtons,
+      hidePrevButton: !showNexPrevButtons,
+      showFirstButton: showFirstLastButtons,
+      showLastButton: showFirstLastButtons
+    })),
+    items = _usePagination.items;
+  return /* @__PURE__ */jsxRuntime.jsx(Pagination_styled.StyledList, {
+    children: items.map(function (item) {
+      return /* @__PURE__ */jsxRuntime.jsx(Pagination_styled.StyledListItem, {
+        children: /* @__PURE__ */jsxRuntime.jsxs(Pagination_styled.StyledButton, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+          color: color,
+          shape: shape,
+          size: size,
+          type: item.type
+        }, item), {}, {
+          children: [item.type !== "page" && getLabel(item.type), item.type === "page" && item.page]
+        }))
+      }, uuid(item));
+    })
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(Pagination_styled.StyledList, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(Pagination_styled.StyledListItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    Pagination_styled.StyledButton,
-    {
-      color,
-      shape,
-      size,
-      type: item.type,
-      ...item,
-      children: [
-        item.type !== "page" && getLabel(item.type),
-        item.type === "page" && item.page
-      ]
-    }
-  ) }, uuid(item))) });
 }
 Pagination.propTypes = {
   /**
@@ -88,20 +101,7 @@ Pagination.propTypes = {
    * The color of the component. It supports those theme
    * colors that make sense for this component.
    */
-  color: PropTypes.oneOf([
-    "default",
-    "primary",
-    "primaryAlt",
-    "secondary",
-    "secondaryAlt",
-    "textPrimary",
-    "textSecondary",
-    "tertiary",
-    "error",
-    "warning",
-    "success",
-    "info"
-  ]),
+  color: PropTypes.oneOf(["default", "primary", "primaryAlt", "secondary", "secondaryAlt", "textPrimary", "textSecondary", "tertiary", "error", "warning", "success", "info"]),
   /**
    * The total number of pages.
    */

package/dist/cjs/components/Pagination.styled.cjs

@@ -1,9 +1,11 @@
 "use strict";
 'use strict';
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var styled = require('styled-components');
 
-const mapColors = (color, theme) => {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1;
+var mapColors = function mapColors(color, theme) {
   if (color === "textPrimary") {
     return theme.palette.text.primary;
   }
@@ -15,68 +17,18 @@ const mapColors = (color, theme) => {
   }
   return "inherit";
 };
-const StyledList = styled.ul`
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-`;
-const StyledListItem = styled.li`
-  margin: 0 3px;
-`;
-const StyledButton = styled.button`
-  ${({ color, disabled, selected, shape, size, theme, type }) => styled.css`
-    background: transparent;
-    border: none;
-    box-sizing: border-box;
-    color: ${mapColors(color, theme)};
-    cursor: pointer;
-    font-family: ${theme.typography.fontFamily};
-    font-weight: 400;
-    text-align: center;
-    padding: 0;
-    margin: 0;
-
-    ${size === "small" && styled.css`
-      height: 28px;
-      min-width: 28px;
-      font-size: ${theme.typography.size.small};
-    `}
-
-    ${size === "large" && styled.css`
-      height: 32px;
-      min-width: 32px;
-      font-size: ${theme.typography.size.large};
-    `}
-
-    ${disabled && styled.css`
-      opacity: 0.38;
-      pointer-events: none;
-      cursor: default;
-    `}
-
-    ${shape === "round" && styled.css`
-      border-radius: 99999px;
-    `}
-
-    ${shape === "rounded" && styled.css`
-      border-radius: 4px;
-    `}
-
-    ${["end-ellipsis", "start-ellipsis"].includes(type) && styled.css`
-      svg {
-        vertical-align: bottom;
-      }
-    `}
-
-    ${selected && styled.css`
-      font-weight: 600;
-      border: 1px solid currentColor;
-    `}
-  `}
-`;
+var StyledList = styled.ul(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  padding: 0;\n  margin: 0;\n  list-style: none;\n"])));
+var StyledListItem = styled.li(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  margin: 0 3px;\n"])));
+var StyledButton = styled.button(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var color = _ref.color,
+    disabled = _ref.disabled,
+    selected = _ref.selected,
+    shape = _ref.shape,
+    size = _ref.size,
+    theme = _ref.theme,
+    type = _ref.type;
+  return styled.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    background: transparent;\n    border: none;\n    box-sizing: border-box;\n    color: ", ";\n    cursor: pointer;\n    font-family: ", ";\n    font-weight: 400;\n    text-align: center;\n    padding: 0;\n    margin: 0;\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), mapColors(color, theme), theme.typography.fontFamily, size === "small" && styled.css(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      height: 28px;\n      min-width: 28px;\n      font-size: ", ";\n    "])), theme.typography.size.small), size === "large" && styled.css(_templateObject6 || (_templateObject6 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      height: 32px;\n      min-width: 32px;\n      font-size: ", ";\n    "])), theme.typography.size.large), disabled && styled.css(_templateObject7 || (_templateObject7 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      opacity: 0.38;\n      pointer-events: none;\n      cursor: default;\n    "]))), shape === "round" && styled.css(_templateObject8 || (_templateObject8 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      border-radius: 99999px;\n    "]))), shape === "rounded" && styled.css(_templateObject9 || (_templateObject9 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      border-radius: 4px;\n    "]))), ["end-ellipsis", "start-ellipsis"].includes(type) && styled.css(_templateObject0 || (_templateObject0 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      svg {\n        vertical-align: bottom;\n      }\n    "]))), selected && styled.css(_templateObject1 || (_templateObject1 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      font-weight: 600;\n      border: 1px solid currentColor;\n    "]))));
+});
 
 exports.StyledButton = StyledButton;
 exports.StyledList = StyledList;

package/dist/cjs/components/Paper.cjs

@@ -6,29 +6,32 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var Paper_styled = require('./Paper.styled.cjs');
 
-function Paper({
-  children,
-  elevate = true,
-  fill = false,
-  inset = "none",
-  outlined = false,
-  overflow = true,
-  rounded = true,
-  sx = {}
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Paper_styled.default,
-    {
-      elevate: outlined ? false : elevate,
-      fill,
-      inset,
-      outlined,
-      rounded,
-      noOverflow: !overflow,
-      sx,
-      children
-    }
-  );
+function Paper(_ref) {
+  var children = _ref.children,
+    _ref$elevate = _ref.elevate,
+    elevate = _ref$elevate === void 0 ? true : _ref$elevate,
+    _ref$fill = _ref.fill,
+    fill = _ref$fill === void 0 ? false : _ref$fill,
+    _ref$inset = _ref.inset,
+    inset = _ref$inset === void 0 ? "none" : _ref$inset,
+    _ref$outlined = _ref.outlined,
+    outlined = _ref$outlined === void 0 ? false : _ref$outlined,
+    _ref$overflow = _ref.overflow,
+    overflow = _ref$overflow === void 0 ? true : _ref$overflow,
+    _ref$rounded = _ref.rounded,
+    rounded = _ref$rounded === void 0 ? true : _ref$rounded,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx;
+  return /* @__PURE__ */jsxRuntime.jsx(Paper_styled.default, {
+    elevate: outlined ? false : elevate,
+    fill: fill,
+    inset: inset,
+    outlined: outlined,
+    rounded: rounded,
+    noOverflow: !overflow,
+    sx: sx,
+    children: children
+  });
 }
 
 exports.default = Paper;

package/dist/cjs/components/Paper.styled.cjs

@@ -3,14 +3,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var react = require('@emotion/react');
 var Box = require('@mui/material/Box');
 var styles = require('@mui/material/styles');
 var object = require('../utils/helpers/object.cjs');
 
-const getPadding = (inset) => {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var getPadding = function getPadding(inset) {
   if (typeof inset === "number") {
-    return `${inset}px`;
+    return "".concat(inset, "px");
   }
   if (inset === "none") {
     return "0px";
@@ -27,37 +29,17 @@ const getPadding = (inset) => {
   if (inset === "xlarge") {
     return "32px";
   }
-  return `${inset}`;
+  return "".concat(inset);
 };
-const StyledPaper = styles.styled(Box)`
-  ${({ elevate, fill, inset, noOverflow, outlined, rounded, theme }) => react.css`
-    background-color: ${object.getObjectProp(theme, "vars.palette.background.paper")};
-    font-family: ${object.getObjectProp(theme, "typography.fontFamily")};
-    padding: ${getPadding(inset)};
-
-    ${elevate && !outlined && react.css`
-      border: none;
-      box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.1);
-    `}
-
-    ${noOverflow && react.css`
-      overflow: hidden;
-    `}
-
-    ${outlined && react.css`
-      border: 1px solid rgba(0, 0, 0, 0.1);
-      box-shadow: none;
-    `}
-
-    ${rounded && react.css`
-      border-radius: 8px;
-    `}
-
-     ${fill && react.css`
-      height: 100%;
-      width: 100%;
-    `}
-  `};
-`;
+var StyledPaper = styles.styled(Box)(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref) {
+  var elevate = _ref.elevate,
+    fill = _ref.fill,
+    inset = _ref.inset,
+    noOverflow = _ref.noOverflow,
+    outlined = _ref.outlined,
+    rounded = _ref.rounded,
+    theme = _ref.theme;
+  return react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    background-color: ", ";\n    font-family: ", ";\n    padding: ", ";\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n     ", "\n  "])), object.getObjectProp(theme, "vars.palette.background.paper"), object.getObjectProp(theme, "typography.fontFamily"), getPadding(inset), elevate && !outlined && react.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      border: none;\n      box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.1);\n    "]))), noOverflow && react.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      overflow: hidden;\n    "]))), outlined && react.css(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      border: 1px solid rgba(0, 0, 0, 0.1);\n      box-shadow: none;\n    "]))), rounded && react.css(_templateObject6 || (_templateObject6 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      border-radius: 8px;\n    "]))), fill && react.css(_templateObject7 || (_templateObject7 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      height: 100%;\n      width: 100%;\n    "]))));
+});
 
 exports.default = StyledPaper;