@tenancy.nz/ui 1.0.1 → 1.0.3

package/dist/cjs/components/FormControl.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 framerMotion = require('framer-motion');
@@ -14,89 +15,86 @@ var boolean = require('../utils/helpers/boolean.cjs');
 require('mime/lite');
 require('../utils/helpers/time.cjs');
 
-const FormControl = React.forwardRef(
-  function FormControl2({
-    children,
-    color = "default",
-    disabled = false,
-    errorMessage = "",
-    fullWidth = false,
-    helperText = "",
-    label = void 0,
-    message = "",
-    required = false,
-    showError = false,
-    id,
-    size = "medium"
-  }, ref) {
-    const props = {
-      color: showError ? "error" : color,
-      $disabled: disabled,
-      fullWidth,
-      $required: required
-    };
-    const statusMessage = errorMessage || message;
-    return (
-      /** @ts-ignore */
-      /* @__PURE__ */ jsxRuntime.jsxs(FormControl_styled.default, { ...props, ref, children: [
-        !!label && boolean.isString(label) ? /* @__PURE__ */ jsxRuntime.jsx(
-          FormLabel.default,
-          {
-            disabled,
-            htmlFor: id,
-            required,
-            size,
-            children: label
-          }
-        ) : label,
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          framerMotion.motion.div,
-          {
-            layout: true,
-            initial: "collapsed",
-            animate: "open",
-            exit: "collapsed",
-            variants: {
-              open: { opacity: 1, height: "auto" },
-              collapsed: { opacity: 0, height: 0 }
-            },
-            transition: {
-              delay: 0.15,
-              duration: 0.3,
-              ease: [0.04, 0.62, 0.23, 0.98]
-            },
-            children: !!statusMessage && /* @__PURE__ */ jsxRuntime.jsx(
-              StatusMessage.default,
-              {
-                color: props.color === "default" ? "info" : props.color,
-                children: statusMessage
-              }
-            )
+var FormControl = /*#__PURE__*/React.forwardRef(function FormControl2(_ref, ref) {
+  var children = _ref.children,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "default" : _ref$color,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$errorMessage = _ref.errorMessage,
+    errorMessage = _ref$errorMessage === void 0 ? "" : _ref$errorMessage,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    _ref$helperText = _ref.helperText,
+    helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? void 0 : _ref$label,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? "" : _ref$message,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$showError = _ref.showError,
+    showError = _ref$showError === void 0 ? false : _ref$showError,
+    id = _ref.id,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size;
+  var props = {
+    color: showError ? "error" : color,
+    $disabled: disabled,
+    fullWidth: fullWidth,
+    $required: required
+  };
+  var statusMessage = errorMessage || message;
+  return /** @ts-ignore */ /* @__PURE__ */jsxRuntime.jsxs(FormControl_styled.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
+    ref: ref,
+    children: [!!label && boolean.isString(label) ? /* @__PURE__ */jsxRuntime.jsx(FormLabel.default, {
+      disabled: disabled,
+      htmlFor: id,
+      required: required,
+      size: size,
+      children: label
+    }) : label, children, /* @__PURE__ */jsxRuntime.jsx(framerMotion.AnimatePresence, {
+      children: /* @__PURE__ */jsxRuntime.jsx(framerMotion.motion.div, {
+        layout: true,
+        initial: "collapsed",
+        animate: "open",
+        exit: "collapsed",
+        variants: {
+          open: {
+            opacity: 1,
+            height: "auto"
           },
-          `${id}_message`
-        ) }),
-        !!helperText && /* @__PURE__ */ jsxRuntime.jsx(
-          FormHelperText,
-          {
-            sx: {
-              color: "text.primary",
-              fontSize: (theme) => {
-                if (size === "medium") {
-                  return `${theme.typography.fontSize}px`;
-                }
-                return null;
-              },
-              padding: 0,
-              margin: 0,
-              mt: statusMessage ? 0 : "8px"
-            },
-            children: helperText
+          collapsed: {
+            opacity: 0,
+            height: 0
+          }
+        },
+        transition: {
+          delay: 0.15,
+          duration: 0.3,
+          ease: [0.04, 0.62, 0.23, 0.98]
+        },
+        children: !!statusMessage && /* @__PURE__ */jsxRuntime.jsx(StatusMessage.default, {
+          color: props.color === "default" ? "info" : props.color,
+          children: statusMessage
+        })
+      }, "".concat(id, "_message"))
+    }), !!helperText && /* @__PURE__ */jsxRuntime.jsx(FormHelperText, {
+      sx: {
+        color: "text.primary",
+        fontSize: function fontSize(theme) {
+          if (size === "medium") {
+            return "".concat(theme.typography.fontSize, "px");
           }
-        )
-      ] })
-    );
-  }
-);
+          return null;
+        },
+        padding: 0,
+        margin: 0,
+        mt: statusMessage ? 0 : "8px"
+      },
+      children: helperText
+    })]
+  }));
+});
 
 exports.default = FormControl;

package/dist/cjs/components/FormControl.styled.cjs

@@ -3,20 +3,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var react = require('@emotion/react');
 var styles = require('@mui/material/styles');
 var FormControl = require('@mui/material/FormControl');
 var object = require('../utils/helpers/object.cjs');
 
-const StyledFormControl = styles.styled(FormControl)`
-  ${({ size, theme }) => react.css`
-    ${size === "small" && react.css`
-      font-size: calc(${object.getObjectProp(theme, "typography.fontSize")}px - 2px);
-    `}
-    ${size === "medium" && react.css`
-      font-size: ${object.getObjectProp(theme, "typography.fontSize")}px;
-    `}
-  `}
-`;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var StyledFormControl = styles.styled(FormControl)(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var size = _ref.size,
+    theme = _ref.theme;
+  return react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    ", "\n    ", "\n  "])), size === "small" && react.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      font-size: calc(", "px - 2px);\n    "])), object.getObjectProp(theme, "typography.fontSize")), size === "medium" && react.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      font-size: ", "px;\n    "])), object.getObjectProp(theme, "typography.fontSize")));
+});
 
 exports.default = StyledFormControl;

package/dist/cjs/components/FormFocus.cjs

@@ -7,28 +7,26 @@ var jsxRuntime = require('react/jsx-runtime');
 require('react');
 var PropTypes = require('prop-types');
 
-function FormFocus({ name }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      name,
-      style: {
-        appearance: "none",
-        border: "none",
-        outline: "none",
-        margin: 0,
-        padding: 0,
-        // needs to be 'visisble for iOS to scroll to..
-        width: "100%",
-        height: 1,
-        marginBottom: -1,
-        opacity: 0.1,
-        // prevent zoom...
-        fontSize: 20
-      },
-      readOnly: true
-    }
-  );
+function FormFocus(_ref) {
+  var name = _ref.name;
+  return /* @__PURE__ */jsxRuntime.jsx("input", {
+    name: name,
+    style: {
+      appearance: "none",
+      border: "none",
+      outline: "none",
+      margin: 0,
+      padding: 0,
+      // needs to be 'visisble for iOS to scroll to..
+      width: "100%",
+      height: 1,
+      marginBottom: -1,
+      opacity: 0.1,
+      // prevent zoom...
+      fontSize: 20
+    },
+    readOnly: true
+  });
 }
 FormFocus.propTypes = {
   name: PropTypes.string.isRequired

package/dist/cjs/components/FormLabel.cjs

@@ -3,22 +3,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var FormLabel_styled = require('./FormLabel.styled.cjs');
 
-function FormLabel({
-  children,
-  disabled = false,
-  margin = "default",
-  required = false,
-  ...rest
-}) {
-  const props = {
-    disabled,
-    margin,
-    required
+var _excluded = ["children", "disabled", "margin", "required"];
+function FormLabel(_ref) {
+  var children = _ref.children,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? "default" : _ref$margin,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var props = {
+    disabled: disabled,
+    margin: margin,
+    required: required
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(FormLabel_styled.default, { ...rest, ...props, children });
+  return /* @__PURE__ */jsxRuntime.jsx(FormLabel_styled.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), props), {}, {
+    children: children
+  }));
 }
 
 exports.default = FormLabel;

package/dist/cjs/components/FormLabel.styled.cjs

@@ -3,53 +3,33 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var styles = require('@mui/material/styles');
 var react = require('@emotion/react');
 var FormLabel = require('@mui/material/FormLabel');
 var object = require('../utils/helpers/object.cjs');
 
-const colorStyles = ({ disabled, theme }) => react.css`
-  ${!disabled && react.css`
-    color: ${object.getObjectProp(theme, "vars.palette.text.primary")};
-  `}
-
-  ${disabled && react.css`
-    color: ${object.getObjectProp(theme, "vars.palette.grey.400")};
-    pointer-events: none;
-    user-select: none;
-  `}
-`;
-const marginStyles = ({ margin }) => react.css`
-  ${margin === "default" && react.css`
-    margin-bottom: 8px;
-  `}
-  ${margin === "dense" && react.css`
-    margin-bottom: 4px;
-  `}
-`;
-const StyledFormLabel = styles.styled(FormLabel)`
-  ${({ disabled, margin, size, theme }) => react.css`
-    font-weight: 600;
-    ${marginStyles({ margin })}
-    && {
-      display: inline-flex;
-      ${colorStyles({ disabled, theme })}
-    }
-
-    ${size === "small" && react.css`
-      font-size: calc(${object.getObjectProp(theme, "typography.fontSize")}px - 2px);
-    `}
-    ${size === "medium" && react.css`
-      font-size: ${object.getObjectProp(theme, "typography.fontSize")}px;
-    `}
-
-    .MuiFormLabel-asterisk {
-      color: ${object.getObjectProp(
-  theme,
-  disabled ? "vars.palette.grey.400" : "vars.palette.error.main"
-)};
-    }
-  `}
-`;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0;
+var colorStyles = function colorStyles(_ref) {
+  var disabled = _ref.disabled,
+    theme = _ref.theme;
+  return react.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n\n  ", "\n"])), !disabled && react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    color: ", ";\n  "])), object.getObjectProp(theme, "vars.palette.text.primary")), disabled && react.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    color: ", ";\n    pointer-events: none;\n    user-select: none;\n  "])), object.getObjectProp(theme, "vars.palette.grey.400")));
+};
+var marginStyles = function marginStyles(_ref2) {
+  var margin = _ref2.margin;
+  return react.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), margin === "default" && react.css(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    margin-bottom: 8px;\n  "]))), margin === "dense" && react.css(_templateObject6 || (_templateObject6 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    margin-bottom: 4px;\n  "]))));
+};
+var StyledFormLabel = styles.styled(FormLabel)(_templateObject7 || (_templateObject7 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref3) {
+  var disabled = _ref3.disabled,
+    margin = _ref3.margin,
+    size = _ref3.size,
+    theme = _ref3.theme;
+  return react.css(_templateObject8 || (_templateObject8 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    font-weight: 600;\n    ", "\n    && {\n      display: inline-flex;\n      ", "\n    }\n\n    ", "\n    ", "\n\n    .MuiFormLabel-asterisk {\n      color: ", ";\n    }\n  "])), marginStyles({
+    margin: margin
+  }), colorStyles({
+    disabled: disabled,
+    theme: theme
+  }), size === "small" && react.css(_templateObject9 || (_templateObject9 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      font-size: calc(", "px - 2px);\n    "])), object.getObjectProp(theme, "typography.fontSize")), size === "medium" && react.css(_templateObject0 || (_templateObject0 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      font-size: ", "px;\n    "])), object.getObjectProp(theme, "typography.fontSize")), object.getObjectProp(theme, disabled ? "vars.palette.grey.400" : "vars.palette.error.main"));
+});
 
 exports.default = StyledFormLabel;

package/dist/cjs/components/Grid.cjs

@@ -3,37 +3,40 @@
 
 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');
 var MuiGrid = require('@mui/material/GridLegacy');
 var styles = require('@mui/material/styles');
 
-function Grid({
-  children,
-  marginFix = false,
-  spacing = 0,
-  container = false,
-  ...rest
-}) {
-  const theme = styles.useTheme();
-  return marginFix && spacing && container ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: `${theme.spacing(spacing)}` }, children: /* @__PURE__ */ jsxRuntime.jsx(
-    MuiGrid,
-    {
+var _excluded = ["children", "marginFix", "spacing", "container"];
+function Grid(_ref) {
+  var children = _ref.children,
+    _ref$marginFix = _ref.marginFix,
+    marginFix = _ref$marginFix === void 0 ? false : _ref$marginFix,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? 0 : _ref$spacing,
+    _ref$container = _ref.container,
+    container = _ref$container === void 0 ? false : _ref$container,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var theme = styles.useTheme();
+  return marginFix && spacing && container ? /* @__PURE__ */jsxRuntime.jsx("div", {
+    style: {
+      padding: "".concat(theme.spacing(spacing))
+    },
+    children: /* @__PURE__ */jsxRuntime.jsx(MuiGrid, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
       container: true,
-      spacing,
-      ...rest,
-      children
-    }
-  ) }) : /* @__PURE__ */ jsxRuntime.jsx(
-    MuiGrid,
-    {
-      spacing,
-      container,
-      ...rest,
-      children
-    }
-  );
+      spacing: spacing
+    }, rest), {}, {
+      children: children
+    }))
+  }) : /* @__PURE__ */jsxRuntime.jsx(MuiGrid, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    spacing: spacing,
+    container: container
+  }, rest), {}, {
+    children: children
+  }));
 }
 Grid.propTypes = {
   /**

package/dist/cjs/components/Grid.styled.cjs

@@ -4,9 +4,14 @@
 var Box = require('@mui/material/Box');
 var styles = require('@mui/material/styles');
 
-const StyledGridBox = styles.styled(Box)(({ borderStyle, error, theme }) => ({
-  border: `${borderStyle} 1px ${error ? theme.palette.error.main : theme.palette.grey.A100}`,
-  borderRadius: theme.shape.borderRadius
-}));
+var StyledGridBox = styles.styled(Box)(function (_ref) {
+  var borderStyle = _ref.borderStyle,
+    error = _ref.error,
+    theme = _ref.theme;
+  return {
+    border: "".concat(borderStyle, " 1px ").concat(error ? theme.palette.error.main : theme.palette.grey.A100),
+    borderRadius: theme.shape.borderRadius
+  };
+});
 
 exports.StyledGridBox = StyledGridBox;

package/dist/cjs/components/Heading.cjs

@@ -3,39 +3,40 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var Typography = require('@mui/material/Typography');
 
-function Heading({
-  as,
-  children,
-  color = "textPrimary",
-  italic = false,
-  transform = void 0,
-  weight = "600",
-  sx = {},
-  ...rest
-}) {
-  const textStyles = {
-    fontWeight: weight,
-    ...italic && { fontStyle: "italic" },
-    ...transform && { textTransform: transform }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Typography,
-    {
-      ...rest,
-      color,
-      component: as,
-      variant: as,
-      paragraph: false,
-      sx: {
-        ...textStyles,
-        ...sx
-      },
-      children
-    }
-  );
+var _excluded = ["as", "children", "color", "italic", "transform", "weight", "sx"];
+function Heading(_ref) {
+  var as = _ref.as,
+    children = _ref.children,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "textPrimary" : _ref$color,
+    _ref$italic = _ref.italic,
+    italic = _ref$italic === void 0 ? false : _ref$italic,
+    _ref$transform = _ref.transform,
+    transform = _ref$transform === void 0 ? void 0 : _ref$transform,
+    _ref$weight = _ref.weight,
+    weight = _ref$weight === void 0 ? "600" : _ref$weight,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var textStyles = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    fontWeight: weight
+  }, italic && {
+    fontStyle: "italic"
+  }), transform && {
+    textTransform: transform
+  });
+  return /* @__PURE__ */jsxRuntime.jsx(Typography, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
+    color: color,
+    component: as,
+    variant: as,
+    paragraph: false,
+    sx: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, textStyles), sx),
+    children: children
+  }));
 }
 
 exports.default = Heading;

package/dist/cjs/components/IconButton.cjs

@@ -3,29 +3,33 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var IconButton_styled = require('./IconButton.styled.cjs');
 
-function IconButton({
-  children,
-  color = "default",
-  edges = "smooth",
-  disabled = false,
-  size = "medium",
-  ...others
-}) {
-  const rest = { size, ...others };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    IconButton_styled.default,
-    {
-      type: "button",
-      color,
-      edges,
-      disabled,
-      ...rest,
-      children
-    }
-  );
+var _excluded = ["children", "color", "edges", "disabled", "size"];
+function IconButton(_ref) {
+  var children = _ref.children,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "default" : _ref$color,
+    _ref$edges = _ref.edges,
+    edges = _ref$edges === void 0 ? "smooth" : _ref$edges,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size,
+    others = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var rest = _rollupPluginBabelHelpers.objectSpread2({
+    size: size
+  }, others);
+  return /* @__PURE__ */jsxRuntime.jsx(IconButton_styled.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    type: "button",
+    color: color,
+    edges: edges,
+    disabled: disabled
+  }, rest), {}, {
+    children: children
+  }));
 }
 
 exports.default = IconButton;

package/dist/cjs/components/IconButton.styled.cjs

@@ -3,29 +3,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var react = require('@emotion/react');
 var styles = require('@mui/material/styles');
 var IconButton = require('@mui/material/IconButton');
 var Button_styled = require('./Button.styled.cjs');
 
-const sizeStyles = ({ size }) => react.css`
-  ${size === "small" && react.css`
-    font-size: 24px;
-  `}
-  ${size === "medium" && react.css`
-    font-size: 30px;
-  `}
-    ${size === "large" && react.css`
-    font-size: 36px;
-  `}
-`;
-const StyledIconButton = styles.styled(IconButton)`
-  ${({ disabled, edges, size, theme }) => react.css`
-    padding: 4px;
-    ${disabled && Button_styled.disabledStyles}
-    ${Button_styled.edgesStyles({ edges, theme })}
-    ${sizeStyles({ size })}
-  `}
-`;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var sizeStyles = function sizeStyles(_ref) {
+  var size = _ref.size;
+  return react.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n  ", "\n    ", "\n"])), size === "small" && react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    font-size: 24px;\n  "]))), size === "medium" && react.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    font-size: 30px;\n  "]))), size === "large" && react.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    font-size: 36px;\n  "]))));
+};
+var StyledIconButton = styles.styled(IconButton)(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref2) {
+  var disabled = _ref2.disabled,
+    edges = _ref2.edges,
+    size = _ref2.size,
+    theme = _ref2.theme;
+  return react.css(_templateObject6 || (_templateObject6 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    padding: 4px;\n    ", "\n    ", "\n    ", "\n  "])), disabled && Button_styled.disabledStyles, Button_styled.edgesStyles({
+    edges: edges,
+    theme: theme
+  }), sizeStyles({
+    size: size
+  }));
+});
 
 exports.default = StyledIconButton;