@tenancy.nz/ui 1.2.4 → 1.2.6

package/dist/cjs/components/AvatarCropDialog.cjs

@@ -32,8 +32,8 @@ function AvatarCropDialog(_ref) {
     } : _ref$onDelete,
     _ref$droppedFile = _ref.droppedFile,
     droppedFile = _ref$droppedFile === void 0 ? null : _ref$droppedFile;
-  var isNotMobile = useMediaQuery(function (theme) {
-    return theme.breakpoints.up("md");
+  var isMobile = useMediaQuery(function (theme) {
+    return theme.breakpoints.down("md");
   });
   var _useState = React.useState({
       aspect: 1,
@@ -75,9 +75,13 @@ function AvatarCropDialog(_ref) {
     });
   };
   var handleCropChange = function handleCropChange(newCrop) {
-    return setCrop(newCrop);
+    setCrop(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newCrop), {}, {
+      height: newCrop.width,
+      aspect: 1
+    }));
   };
-  var handleImageLoaded = function handleImageLoaded(image) {
+  var handleImageLoaded = function handleImageLoaded(e) {
+    var image = e.target;
     var width = image.width;
     if (window.innerHeight * 0.7 < image.height) {
       width = image.width * (window.innerHeight * 0.7 / image.height);
@@ -147,21 +151,29 @@ function AvatarCropDialog(_ref) {
     },
     circularCrop: true,
     onChange: handleCropChange,
-    onImageLoaded: handleImageLoaded,
     keepSelection: true
   }, /* @__PURE__ */React.createElement("img", {
-    src: droppedFile
-  })))), /* @__PURE__ */React.createElement(ModalActions.default, null, /* @__PURE__ */React.createElement(Button.default, {
+    src: droppedFile,
+    onLoad: handleImageLoaded
+  })))), /* @__PURE__ */React.createElement(ModalActions.default, {
+    sx: {
+      flexDirection: {
+        xs: "column",
+        md: "row",
+        gap: "16px"
+      }
+    }
+  }, /* @__PURE__ */React.createElement(Button.default, {
     onClick: handleCancel,
     variant: "outlined",
     loading: cancelling,
     color: "primaryAlt",
-    fullWidth: !isNotMobile
+    fill: isMobile
   }, "Cancel"), /* @__PURE__ */React.createElement(Button.default, {
     onClick: handleImageSave,
     loading: saving,
     color: "primaryAlt",
-    fullWidth: !isNotMobile
+    fill: isMobile
   }, "Save")), /* @__PURE__ */React.createElement(Confirmation.default, {
     open: confirmDelete,
     onCancel: function onCancel() {

package/dist/cjs/components/AvatarInput.cjs

@@ -169,12 +169,21 @@ function AvatarInput(_ref) {
     align: isNotMobile ? "left" : "center",
     weight: "500",
     color: "textPrimary"
-  }, isDragReject ? "The selected file(s) will not be accepted" : dropzoneDescription))))), (savedImage || value) && /* @__PURE__ */React.createElement(IconButton.default, {
+  }, isDragReject ? "The selected file(s) will not be accepted" : dropzoneDescription))))), (savedImage || value) && /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      position: "absolute",
+      top: "50%",
+      right: "25px",
+      zIndex: 9,
+      transform: "translateY(-50%)"
+    }
+  }, /* @__PURE__ */React.createElement(IconButton.default, {
     color: "error",
+    size: "large",
     onClick: function onClick() {
       return setConfirmDelete(true);
     }
-  }, /* @__PURE__ */React.createElement(DeleteIcon, null))), droppedFile && /* @__PURE__ */React.createElement(Modal.default, {
+  }, /* @__PURE__ */React.createElement(DeleteIcon, null)))), droppedFile && /* @__PURE__ */React.createElement(Modal.default, {
     open: open,
     onClose: function onClose() {
       return setOpen(false);

package/dist/cjs/components/Switch.cjs

@@ -54,8 +54,12 @@ function Switch(_ref) {
     margin: "none",
     size: size
   }, label), /* @__PURE__ */React.createElement(Switch_styled.StyledSwitchTrack, {
+    color: color,
+    checked: !!checked,
     size: size
   }, /* @__PURE__ */React.createElement(Switch_styled.StyledSwitchKnob, {
+    color: color,
+    checked: !!checked,
     size: size
   })));
 }

package/dist/cjs/components/Switch.styled.cjs

@@ -5,7 +5,7 @@ var react = require('@emotion/react');
 var styled = require('@emotion/styled');
 var object = require('../utils/helpers/object.cjs');
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 var StyledSwitch = styled.label(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
   var disabled = _ref.disabled;
   return react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    position: relative;\n    cursor: pointer;\n    display: inline-flex;\n    gap: 20px;\n    align-items: center;\n    ", "\n  "])), disabled && react.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      opacity: 0.5;\n      pointer-events: none;\n    "]))));
@@ -16,21 +16,19 @@ var StyledSwitchLabel = styled.span(_templateObject4 || (_templateObject4 = _rol
   return react.css(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    font-size: 13px;\n    font-weight: 600;\n    color: ", ";\n\n    ", "\n  "])), object.getObjectProp(theme, "palette.text.primary"), required && react.css(_templateObject6 || (_templateObject6 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      &:after {\n        content: '*';\n        color: ", ";\n      }\n    "])), object.getObjectProp(theme, "palette.error.main")));
 });
 var StyledSwitchKnob = styled.span(_templateObject7 || (_templateObject7 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref3) {
-  var size = _ref3.size,
+  var checked = _ref3.checked,
+    size = _ref3.size,
     theme = _ref3.theme;
-  return react.css(_templateObject8 || (_templateObject8 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    border-radius: 99999px;\n    box-shadow: ", ";\n    background: #fff;\n    position: absolute;\n    transition:\n      translate 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n      transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n\n    ", "\n\n    ", "\n  "])), object.getObjectProp(theme, "shadows.1"), size === "medium" && react.css(_templateObject9 || (_templateObject9 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      width: 20px;\n      height: 20px;\n      top: 2px;\n      left: 2px;\n    "]))), size === "small" && react.css(_templateObject0 || (_templateObject0 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      width: 14px;\n      height: 14px;\n      top: 2px;\n      left: 2px;\n    "]))));
+  return react.css(_templateObject8 || (_templateObject8 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    border-radius: 99999px;\n    box-shadow: ", ";\n    background: #fff;\n    position: absolute;\n    transition:\n      translate 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n      transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), object.getObjectProp(theme, "shadows.1"), size === "medium" && react.css(_templateObject9 || (_templateObject9 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      width: 20px;\n      height: 20px;\n      top: 2px;\n      left: 2px;\n    "]))), size === "small" && react.css(_templateObject0 || (_templateObject0 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      width: 14px;\n      height: 14px;\n      top: 2px;\n      left: 2px;\n    "]))), checked && react.css(_templateObject1 || (_templateObject1 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      transform: translateX(", "px);\n    "])), size === "small" ? "20" : "20"));
 });
-var StyledSwitchTrack = styled.span(_templateObject1 || (_templateObject1 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref4) {
-  var size = _ref4.size,
+var StyledSwitchTrack = styled.span(_templateObject10 || (_templateObject10 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref4) {
+  var checked = _ref4.checked,
+    color = _ref4.color,
+    size = _ref4.size,
     theme = _ref4.theme;
-  return react.css(_templateObject10 || (_templateObject10 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    position: relative;\n    background: ", ";\n    transition: background 150ms linear;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n\n    &:focus {\n      box-shadow: 0px 0px 6px #1f1c4f;\n    }\n\n    ", "\n\n    ", "\n  "])), object.getObjectProp(theme, "palette.grey.300"), size === "medium" && react.css(_templateObject11 || (_templateObject11 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      height: 24px;\n      width: 44px;\n      border-radius: 12px;\n    "]))), size === "small" && react.css(_templateObject12 || (_templateObject12 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      height: 18px;\n      width: 38px;\n      border-radius: 11px;\n    "]))));
-});
-var StyledSwitchInput = styled.input(_templateObject13 || (_templateObject13 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref5) {
-  var color = _ref5.color,
-    size = _ref5.size,
-    theme = _ref5.theme;
-  return react.css(_templateObject14 || (_templateObject14 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    position: absolute;\n    left: 0;\n    top: 0;\n    z-index: -1;\n    visibility: hidden;\n    opacity: 0;\n\n    &:checked ~ ", " {\n      background: ", ";\n    }\n\n    &:checked ~ ", " ", " {\n      transform: translateX(", "px);\n    }\n  "])), StyledSwitchTrack, object.getObjectProp(theme, "palette.".concat(color, ".main")), StyledSwitchTrack, StyledSwitchKnob, size === "small" ? "20" : "20");
+  return react.css(_templateObject11 || (_templateObject11 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    position: relative;\n\n    transition: background 150ms linear;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n\n    &:focus {\n      box-shadow: 0px 0px 6px #1f1c4f;\n    }\n\n    ", "\n\n    ", "\n\n     ", "\n\n    ", "\n  "])), size === "medium" && react.css(_templateObject12 || (_templateObject12 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      height: 24px;\n      width: 44px;\n      border-radius: 12px;\n    "]))), size === "small" && react.css(_templateObject13 || (_templateObject13 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      height: 18px;\n      width: 38px;\n      border-radius: 11px;\n    "]))), !checked && react.css(_templateObject14 || (_templateObject14 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      background: ", ";\n    "])), object.getObjectProp(theme, "palette.grey.300")), checked && react.css(_templateObject15 || (_templateObject15 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      background: ", ";\n    "])), object.getObjectProp(theme, "palette.".concat(color, ".main"))));
 });
+var StyledSwitchInput = styled.input(_templateObject16 || (_templateObject16 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: -1;\n  visibility: hidden;\n  opacity: 0;\n  margin: 0 !important;\n  padding: 0 !important;\n"])));
 
 exports.StyledSwitch = StyledSwitch;
 exports.StyledSwitchInput = StyledSwitchInput;

package/dist/esm/components/AvatarCropDialog.js

@@ -1,4 +1,4 @@
-import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import useMediaQuery from '@mui/material/useMediaQuery';
@@ -28,8 +28,8 @@ function AvatarCropDialog(_ref) {
     } : _ref$onDelete,
     _ref$droppedFile = _ref.droppedFile,
     droppedFile = _ref$droppedFile === void 0 ? null : _ref$droppedFile;
-  var isNotMobile = useMediaQuery(function (theme) {
-    return theme.breakpoints.up("md");
+  var isMobile = useMediaQuery(function (theme) {
+    return theme.breakpoints.down("md");
   });
   var _useState = useState({
       aspect: 1,
@@ -71,9 +71,13 @@ function AvatarCropDialog(_ref) {
     });
   };
   var handleCropChange = function handleCropChange(newCrop) {
-    return setCrop(newCrop);
+    setCrop(_objectSpread2(_objectSpread2({}, newCrop), {}, {
+      height: newCrop.width,
+      aspect: 1
+    }));
   };
-  var handleImageLoaded = function handleImageLoaded(image) {
+  var handleImageLoaded = function handleImageLoaded(e) {
+    var image = e.target;
     var width = image.width;
     if (window.innerHeight * 0.7 < image.height) {
       width = image.width * (window.innerHeight * 0.7 / image.height);
@@ -143,21 +147,29 @@ function AvatarCropDialog(_ref) {
     },
     circularCrop: true,
     onChange: handleCropChange,
-    onImageLoaded: handleImageLoaded,
     keepSelection: true
   }, /* @__PURE__ */React.createElement("img", {
-    src: droppedFile
-  })))), /* @__PURE__ */React.createElement(ModalActions, null, /* @__PURE__ */React.createElement(Button, {
+    src: droppedFile,
+    onLoad: handleImageLoaded
+  })))), /* @__PURE__ */React.createElement(ModalActions, {
+    sx: {
+      flexDirection: {
+        xs: "column",
+        md: "row",
+        gap: "16px"
+      }
+    }
+  }, /* @__PURE__ */React.createElement(Button, {
     onClick: handleCancel,
     variant: "outlined",
     loading: cancelling,
     color: "primaryAlt",
-    fullWidth: !isNotMobile
+    fill: isMobile
   }, "Cancel"), /* @__PURE__ */React.createElement(Button, {
     onClick: handleImageSave,
     loading: saving,
     color: "primaryAlt",
-    fullWidth: !isNotMobile
+    fill: isMobile
   }, "Save")), /* @__PURE__ */React.createElement(Confirmation, {
     open: confirmDelete,
     onCancel: function onCancel() {

package/dist/esm/components/AvatarInput.js

@@ -165,12 +165,21 @@ function AvatarInput(_ref) {
     align: isNotMobile ? "left" : "center",
     weight: "500",
     color: "textPrimary"
-  }, isDragReject ? "The selected file(s) will not be accepted" : dropzoneDescription))))), (savedImage || value) && /* @__PURE__ */React.createElement(IconButton, {
+  }, isDragReject ? "The selected file(s) will not be accepted" : dropzoneDescription))))), (savedImage || value) && /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      position: "absolute",
+      top: "50%",
+      right: "25px",
+      zIndex: 9,
+      transform: "translateY(-50%)"
+    }
+  }, /* @__PURE__ */React.createElement(IconButton, {
     color: "error",
+    size: "large",
     onClick: function onClick() {
       return setConfirmDelete(true);
     }
-  }, /* @__PURE__ */React.createElement(DeleteIcon, null))), droppedFile && /* @__PURE__ */React.createElement(Modal, {
+  }, /* @__PURE__ */React.createElement(DeleteIcon, null)))), droppedFile && /* @__PURE__ */React.createElement(Modal, {
     open: open,
     onClose: function onClose() {
       return setOpen(false);

package/dist/esm/components/Switch.js

@@ -50,8 +50,12 @@ function Switch(_ref) {
     margin: "none",
     size: size
   }, label), /* @__PURE__ */React.createElement(StyledSwitchTrack, {
+    color: color,
+    checked: !!checked,
     size: size
   }, /* @__PURE__ */React.createElement(StyledSwitchKnob, {
+    color: color,
+    checked: !!checked,
     size: size
   })));
 }

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

@@ -3,7 +3,7 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { getObjectProp } from '../utils/helpers/object.js';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 var StyledSwitch = styled.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
   var disabled = _ref.disabled;
   return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    cursor: pointer;\n    display: inline-flex;\n    gap: 20px;\n    align-items: center;\n    ", "\n  "])), disabled && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      opacity: 0.5;\n      pointer-events: none;\n    "]))));
@@ -14,20 +14,18 @@ var StyledSwitchLabel = styled.span(_templateObject4 || (_templateObject4 = _tag
   return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    font-size: 13px;\n    font-weight: 600;\n    color: ", ";\n\n    ", "\n  "])), getObjectProp(theme, "palette.text.primary"), required && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      &:after {\n        content: '*';\n        color: ", ";\n      }\n    "])), getObjectProp(theme, "palette.error.main")));
 });
 var StyledSwitchKnob = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref3) {
-  var size = _ref3.size,
+  var checked = _ref3.checked,
+    size = _ref3.size,
     theme = _ref3.theme;
-  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    border-radius: 99999px;\n    box-shadow: ", ";\n    background: #fff;\n    position: absolute;\n    transition:\n      translate 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n      transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n\n    ", "\n\n    ", "\n  "])), getObjectProp(theme, "shadows.1"), size === "medium" && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      width: 20px;\n      height: 20px;\n      top: 2px;\n      left: 2px;\n    "]))), size === "small" && css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n      width: 14px;\n      height: 14px;\n      top: 2px;\n      left: 2px;\n    "]))));
+  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    border-radius: 99999px;\n    box-shadow: ", ";\n    background: #fff;\n    position: absolute;\n    transition:\n      translate 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n      transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), getObjectProp(theme, "shadows.1"), size === "medium" && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      width: 20px;\n      height: 20px;\n      top: 2px;\n      left: 2px;\n    "]))), size === "small" && css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n      width: 14px;\n      height: 14px;\n      top: 2px;\n      left: 2px;\n    "]))), checked && css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n      transform: translateX(", "px);\n    "])), size === "small" ? "20" : "20"));
 });
-var StyledSwitchTrack = styled.span(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref4) {
-  var size = _ref4.size,
+var StyledSwitchTrack = styled.span(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref4) {
+  var checked = _ref4.checked,
+    color = _ref4.color,
+    size = _ref4.size,
     theme = _ref4.theme;
-  return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    position: relative;\n    background: ", ";\n    transition: background 150ms linear;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n\n    &:focus {\n      box-shadow: 0px 0px 6px #1f1c4f;\n    }\n\n    ", "\n\n    ", "\n  "])), getObjectProp(theme, "palette.grey.300"), size === "medium" && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      height: 24px;\n      width: 44px;\n      border-radius: 12px;\n    "]))), size === "small" && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      height: 18px;\n      width: 38px;\n      border-radius: 11px;\n    "]))));
-});
-var StyledSwitchInput = styled.input(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref5) {
-  var color = _ref5.color,
-    size = _ref5.size,
-    theme = _ref5.theme;
-  return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    position: absolute;\n    left: 0;\n    top: 0;\n    z-index: -1;\n    visibility: hidden;\n    opacity: 0;\n\n    &:checked ~ ", " {\n      background: ", ";\n    }\n\n    &:checked ~ ", " ", " {\n      transform: translateX(", "px);\n    }\n  "])), StyledSwitchTrack, getObjectProp(theme, "palette.".concat(color, ".main")), StyledSwitchTrack, StyledSwitchKnob, size === "small" ? "20" : "20");
+  return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    position: relative;\n\n    transition: background 150ms linear;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n\n    &:focus {\n      box-shadow: 0px 0px 6px #1f1c4f;\n    }\n\n    ", "\n\n    ", "\n\n     ", "\n\n    ", "\n  "])), size === "medium" && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      height: 24px;\n      width: 44px;\n      border-radius: 12px;\n    "]))), size === "small" && css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      height: 18px;\n      width: 38px;\n      border-radius: 11px;\n    "]))), !checked && css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      background: ", ";\n    "])), getObjectProp(theme, "palette.grey.300")), checked && css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n      background: ", ";\n    "])), getObjectProp(theme, "palette.".concat(color, ".main"))));
 });
+var StyledSwitchInput = styled.input(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: -1;\n  visibility: hidden;\n  opacity: 0;\n  margin: 0 !important;\n  padding: 0 !important;\n"])));
 
 export { StyledSwitch, StyledSwitchInput, StyledSwitchKnob, StyledSwitchLabel, StyledSwitchTrack };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenancy.nz/ui",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "Library of React UI components for tenancy.co.nz apps.",
   "author": "Tenancy.co.nz <monty@tenancy.co.nz>",
   "keywords": [