@tenancy.nz/ui 1.0.2 → 1.0.4

package/dist/esm/components/Select.js

@@ -1,59 +1,79 @@
 "use strict";
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx } from 'react/jsx-runtime';
 import uuid from 'react-uuid';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import FormControl from './FormControl.js';
 import StyledSelect, { StyledSelectOption, StyledPlaceholder, StyledSelectValue } from './Select.styled.js';
 
-function Select({
-  color = "default",
-  disabled = false,
-  edges = "smooth",
-  errorMessage = "",
-  fullWidth = true,
-  helperText = "",
-  id = void 0,
-  inputRef = void 0,
-  inputProps = {},
-  label = void 0,
-  IconComponent = void 0,
-  message = "",
-  MenuProps = {},
-  name,
-  native = false,
-  placeholder = "",
-  required = false,
-  showError = false,
-  size = "medium",
-  readOnly = false,
-  options = [],
-  ...rest
-}) {
-  const allowEmpty = !!placeholder;
-  const inputAttrs = {
-    ...readOnly && { readOnly },
-    ...inputProps
-  };
-  const props = {
+var _excluded = ["color", "disabled", "edges", "errorMessage", "fullWidth", "helperText", "id", "inputRef", "inputProps", "label", "IconComponent", "message", "MenuProps", "name", "native", "placeholder", "required", "showError", "size", "readOnly", "options"],
+  _excluded2 = ["label"];
+function Select(_ref) {
+  var _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$edges = _ref.edges,
+    edges = _ref$edges === void 0 ? "smooth" : _ref$edges,
+    _ref$errorMessage = _ref.errorMessage,
+    errorMessage = _ref$errorMessage === void 0 ? "" : _ref$errorMessage,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? true : _ref$fullWidth,
+    _ref$helperText = _ref.helperText,
+    helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? void 0 : _ref$id,
+    _ref$inputRef = _ref.inputRef,
+    inputRef = _ref$inputRef === void 0 ? void 0 : _ref$inputRef,
+    _ref$inputProps = _ref.inputProps,
+    inputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? void 0 : _ref$label,
+    _ref$IconComponent = _ref.IconComponent,
+    IconComponent = _ref$IconComponent === void 0 ? void 0 : _ref$IconComponent,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? "" : _ref$message,
+    _ref$MenuProps = _ref.MenuProps,
+    MenuProps = _ref$MenuProps === void 0 ? {} : _ref$MenuProps,
+    name = _ref.name,
+    _ref$native = _ref.native,
+    native = _ref$native === void 0 ? false : _ref$native,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$showError = _ref.showError,
+    showError = _ref$showError === void 0 ? false : _ref$showError,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var allowEmpty = !!placeholder;
+  var inputAttrs = _objectSpread2(_objectSpread2({}, readOnly && {
+    readOnly: readOnly
+  }), inputProps);
+  var props = _objectSpread2(_objectSpread2({
     color: showError ? "error" : color,
-    disabled,
+    disabled: disabled,
     $edges: edges,
-    fullWidth,
+    fullWidth: fullWidth,
     id: id || name,
     inputProps: inputAttrs,
-    inputRef,
-    name,
-    placeholder,
-    required,
+    inputRef: inputRef,
+    name: name,
+    placeholder: placeholder,
+    required: required,
     error: showError,
-    readOnly,
-    size,
-    ...rest,
-    allowEmpty,
+    readOnly: readOnly,
+    size: size
+  }, rest), {}, {
+    allowEmpty: allowEmpty,
     displayEmpty: allowEmpty,
-    native,
-    MenuProps: {
-      ...MenuProps,
+    native: native,
+    MenuProps: _objectSpread2(_objectSpread2({}, MenuProps), {}, {
       anchorOrigin: {
         vertical: "bottom",
         horizontal: "center"
@@ -63,39 +83,45 @@ function Select({
         horizontal: "center"
       },
       marginThreshold: 0
-    },
+    }),
     IconComponent: IconComponent || KeyboardArrowDownIcon
-  };
-  const renderValue = (selected) => {
+  });
+  var renderValue = function renderValue(selected) {
     if (!selected) {
-      return /* @__PURE__ */ jsx(StyledPlaceholder, { children: placeholder });
+      return /* @__PURE__ */jsx(StyledPlaceholder, {
+        children: placeholder
+      });
     }
-    return /* @__PURE__ */ jsx(StyledSelectValue, { children: selected });
+    return /* @__PURE__ */jsx(StyledSelectValue, {
+      children: selected
+    });
   };
-  return /* @__PURE__ */ jsx(
-    FormControl,
-    {
-      color,
-      id: props.id,
-      label,
-      helperText,
-      showError,
-      message: errorMessage || message,
-      fullWidth,
-      disabled,
-      required,
-      size,
-      children: /* @__PURE__ */ jsx(StyledSelect, { renderValue, ...props, variant: "outlined", children: options.map(({ label: optionLabel, ...others }) => /* @__PURE__ */ jsx(
-        StyledSelectOption,
-        {
-          ...others,
-          ...native && { as: "option" },
+  return /* @__PURE__ */jsx(FormControl, {
+    color: color,
+    id: props.id,
+    label: label,
+    helperText: helperText,
+    showError: showError,
+    message: errorMessage || message,
+    fullWidth: fullWidth,
+    disabled: disabled,
+    required: required,
+    size: size,
+    children: /* @__PURE__ */jsx(StyledSelect, _objectSpread2(_objectSpread2({
+      renderValue: renderValue
+    }, props), {}, {
+      variant: "outlined",
+      children: options.map(function (_ref2) {
+        var optionLabel = _ref2.label,
+          others = _objectWithoutProperties(_ref2, _excluded2);
+        return /* @__PURE__ */jsx(StyledSelectOption, _objectSpread2(_objectSpread2(_objectSpread2({}, others), native && {
+          as: "option"
+        }), {}, {
           children: optionLabel
-        },
-        uuid()
-      )) })
-    }
-  );
+        }), uuid());
+      })
+    }))
+  });
 }
 
 export { Select as default };

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

@@ -1,4 +1,5 @@
 "use strict";
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { css } from '@emotion/react';
 import '@emotion/styled';
 import { styled } from '@mui/material/styles';
@@ -7,89 +8,53 @@ import Select from '@mui/material/Select';
 import { edgesStyles, sizeStyles, colorStyles, readOnlyStyles, disabledStyles } from './TextInput.styled.js';
 import { getObjectProp } from '../utils/helpers/object.js';
 
-const hoverStyles = css`
-  border-color: #1f1c4f;
-`;
-const focusStyles = ({ color, theme }) => css`
-  box-shadow: 0px 0px 6px 0px
-    ${getObjectProp(theme, `vars.palette.${color}.main`)};
-  border-color: ${getObjectProp(theme, `vars.palette.${color}.main`)};
-`;
-const StyledPlaceholder = styled(
-  "span"
-)`
-  ${({ disabled, theme }) => css`
-    color: ${getObjectProp(theme, "vars.palette.grey.600")};
-
-    ${disabled && `
-      color: ${getObjectProp(theme, "vars.palette.grey.600")};
-    `}
-  `}
-`;
-const StyledSelectValue = styled(
-  "span"
-)`
-  ${({ disabled, theme }) => css`
-    color: ${getObjectProp(theme, "vars.palette.text.primary")};
-
-    ${disabled && `
-      color: ${getObjectProp(theme, "vars.palette.grey.600")};
-    `}
-  `}
-`;
-const StyledSelectOption = styled(
-  MuiMenuItem
-)`
-  ${({ theme }) => css`
-    color: ${getObjectProp(theme, "vars.palette.text.primary")};
-  `}
-`;
-const StyledSelect = styled(Select)`
-  ${({ color, disabled, $edges, multiline, readOnly, size, theme }) => css`
-    font-weight: 400;
-    color: ${getObjectProp(theme, "vars.palette.text.primary")};
-    ${edgesStyles({ edges: $edges, theme })}
-    ${sizeStyles({ size, multiline, theme })}
-
-    .MuiSvgIcon-root,
-    .MuiSelect-select {
-      z-index: 2;
-    }
-
-    .MuiSelect-select {
-      padding-left: 0px;
-    }
-
-    .MuiNativeSelect-select {
-      padding-left: 0px;
-      padding-top: 0px;
-      padding-bottom: 0px;
-    }
-
-    fieldset {
-      ${colorStyles({ color, theme })}
-    }
-
-    &&:hover fieldset {
-      ${!disabled && !readOnly && hoverStyles}
-    }
-
-    &&.Mui-focused fieldset {
-      ${!disabled && !readOnly && focusStyles({ color: color === "default" ? "info" : color, theme })}
-    }
-
-    &&.Mui-readOnly fieldset {
-      ${!disabled && readOnly && readOnlyStyles({ theme })}
-      border: 1px solid ${getObjectProp(theme, "vars.palette.grey.600")};
-    }
-
-    &&.Mui-disabled {
-      color: ${getObjectProp(theme, "vars.palette.grey.600")};
-      fieldset {
-        ${disabled && disabledStyles({ theme })}
-      }
-    }
-  `}
-`;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0;
+var hoverStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-color: #1f1c4f;\n"])));
+var focusStyles = function focusStyles(_ref) {
+  var color = _ref.color,
+    theme = _ref.theme;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  box-shadow: 0px 0px 6px 0px\n    ", ";\n  border-color: ", ";\n"])), getObjectProp(theme, "vars.palette.".concat(color, ".main")), getObjectProp(theme, "vars.palette.".concat(color, ".main")));
+};
+var StyledPlaceholder = styled("span")(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref2) {
+  var disabled = _ref2.disabled,
+    theme = _ref2.theme;
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    color: ", ";\n\n    ", "\n  "])), getObjectProp(theme, "vars.palette.grey.600"), disabled && "\n      color: ".concat(getObjectProp(theme, "vars.palette.grey.600"), ";\n    "));
+});
+var StyledSelectValue = styled("span")(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref3) {
+  var disabled = _ref3.disabled,
+    theme = _ref3.theme;
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    color: ", ";\n\n    ", "\n  "])), getObjectProp(theme, "vars.palette.text.primary"), disabled && "\n      color: ".concat(getObjectProp(theme, "vars.palette.grey.600"), ";\n    "));
+});
+var StyledSelectOption = styled(MuiMenuItem)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), getObjectProp(theme, "vars.palette.text.primary"));
+});
+var StyledSelect = styled(Select)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref5) {
+  var color = _ref5.color,
+    disabled = _ref5.disabled,
+    $edges = _ref5.$edges,
+    multiline = _ref5.multiline,
+    readOnly = _ref5.readOnly,
+    size = _ref5.size,
+    theme = _ref5.theme;
+  return css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n    font-weight: 400;\n    color: ", ";\n    ", "\n    ", "\n\n    .MuiSvgIcon-root,\n    .MuiSelect-select {\n      z-index: 2;\n    }\n\n    .MuiSelect-select {\n      padding-left: 0px;\n    }\n\n    .MuiNativeSelect-select {\n      padding-left: 0px;\n      padding-top: 0px;\n      padding-bottom: 0px;\n    }\n\n    fieldset {\n      ", "\n    }\n\n    &&:hover fieldset {\n      ", "\n    }\n\n    &&.Mui-focused fieldset {\n      ", "\n    }\n\n    &&.Mui-readOnly fieldset {\n      ", "\n      border: 1px solid ", ";\n    }\n\n    &&.Mui-disabled {\n      color: ", ";\n      fieldset {\n        ", "\n      }\n    }\n  "])), getObjectProp(theme, "vars.palette.text.primary"), edgesStyles({
+    edges: $edges,
+    theme: theme
+  }), sizeStyles({
+    size: size,
+    multiline: multiline,
+    theme: theme
+  }), colorStyles({
+    color: color,
+    theme: theme
+  }), !disabled && !readOnly && hoverStyles, !disabled && !readOnly && focusStyles({
+    color: color === "default" ? "info" : color,
+    theme: theme
+  }), !disabled && readOnly && readOnlyStyles({
+    theme: theme
+  }), getObjectProp(theme, "vars.palette.grey.600"), getObjectProp(theme, "vars.palette.grey.600"), disabled && disabledStyles({
+    theme: theme
+  }));
+});
 
 export { StyledPlaceholder, StyledSelectOption, StyledSelectValue, StyledSelect as default, focusStyles, hoverStyles };

package/dist/esm/components/Skeleton.js

@@ -1,19 +1,30 @@
 "use strict";
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx } from 'react/jsx-runtime';
 import Skeleton$1 from '@mui/material/Skeleton';
 
-function Skeleton({
-  animation = "pulse",
-  children = void 0,
-  light = false,
-  variant = "text",
-  ...others
-}) {
-  const rest = { animation, variant, ...others };
-  const styles = {
-    ...light && { backgroundColor: "rgba(255, 255, 255, 0.13)" }
-  };
-  return /* @__PURE__ */ jsx(Skeleton$1, { ...rest, sx: styles, children });
+var _excluded = ["animation", "children", "light", "variant"];
+function Skeleton(_ref) {
+  var _ref$animation = _ref.animation,
+    animation = _ref$animation === void 0 ? "pulse" : _ref$animation,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? void 0 : _ref$children,
+    _ref$light = _ref.light,
+    light = _ref$light === void 0 ? false : _ref$light,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "text" : _ref$variant,
+    others = _objectWithoutProperties(_ref, _excluded);
+  var rest = _objectSpread2({
+    animation: animation,
+    variant: variant
+  }, others);
+  var styles = _objectSpread2({}, light && {
+    backgroundColor: "rgba(255, 255, 255, 0.13)"
+  });
+  return /* @__PURE__ */jsx(Skeleton$1, _objectSpread2(_objectSpread2({}, rest), {}, {
+    sx: styles,
+    children: children
+  }));
 }
 
 export { Skeleton as default };

package/dist/esm/components/StatusMessage.js

@@ -1,23 +1,28 @@
 "use strict";
+import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx } from 'react/jsx-runtime';
 import Alert from './Alert.js';
 
-function StatusMessage({
-  children,
-  color = "info",
-  sx = {}
-}) {
-  const styles = {
-    color: `${color}.main`,
+function StatusMessage(_ref) {
+  var children = _ref.children,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "info" : _ref$color,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx;
+  var styles = _objectSpread2({
+    color: "".concat(color, ".main"),
     border: "none",
     background: "none",
     padding: "0px",
     "& .MuiAlert-icon": {
-      color: `${color}.main`
-    },
-    ...sx
-  };
-  return /* @__PURE__ */ jsx(Alert, { variant: "standard", sx: styles, children });
+      color: "".concat(color, ".main")
+    }
+  }, sx);
+  return /* @__PURE__ */jsx(Alert, {
+    variant: "standard",
+    sx: styles,
+    children: children
+  });
 }
 
 export { StatusMessage as default };

package/dist/esm/components/StepIcon.js

@@ -1,4 +1,5 @@
 "use strict";
+import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import PropTypes from 'prop-types';
@@ -6,23 +7,39 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import CheckIcon from '@mui/icons-material/Check';
 import { StyledContainer, StyledText } from './StepIcon.styled.js';
 
-function StepIcon({ active, completed, error, icon }) {
-  const isMobile = useMediaQuery((theme) => theme.breakpoints.down("sm"));
-  const commonProps = {
-    active,
-    completed,
-    error,
-    isMobile
+function StepIcon(_ref) {
+  var active = _ref.active,
+    completed = _ref.completed,
+    error = _ref.error,
+    icon = _ref.icon;
+  var isMobile = useMediaQuery(function (theme) {
+    return theme.breakpoints.down("sm");
+  });
+  var commonProps = {
+    active: active,
+    completed: completed,
+    error: error,
+    isMobile: isMobile
   };
-  return /* @__PURE__ */ jsx(StyledContainer, { ...commonProps, children: (() => {
-    if (error) {
-      return /* @__PURE__ */ jsx(StyledText, { align: "center", ...commonProps, children: "!" });
-    }
-    if (completed && !active) {
-      return /* @__PURE__ */ jsx(CheckIcon, {});
-    }
-    return /* @__PURE__ */ jsx(StyledText, { align: "center", ...commonProps, children: icon });
-  })() });
+  return /* @__PURE__ */jsx(StyledContainer, _objectSpread2(_objectSpread2({}, commonProps), {}, {
+    children: function () {
+      if (error) {
+        return /* @__PURE__ */jsx(StyledText, _objectSpread2(_objectSpread2({
+          align: "center"
+        }, commonProps), {}, {
+          children: "!"
+        }));
+      }
+      if (completed && !active) {
+        return /* @__PURE__ */jsx(CheckIcon, {});
+      }
+      return /* @__PURE__ */jsx(StyledText, _objectSpread2(_objectSpread2({
+        align: "center"
+      }, commonProps), {}, {
+        children: icon
+      }));
+    }()
+  }));
 }
 StepIcon.propTypes = {
   /**

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

@@ -2,7 +2,7 @@
 import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 
-const backgroundColorStyles = (active, completed, error, theme) => {
+var backgroundColorStyles = function backgroundColorStyles(active, completed, error, theme) {
   if (active || completed) {
     return theme.palette.primary.main;
   }
@@ -11,23 +11,28 @@ const backgroundColorStyles = (active, completed, error, theme) => {
   }
   return "#fff";
 };
-const borderStyles = (active, completed, error, theme) => {
+var borderStyles = function borderStyles(active, completed, error, theme) {
   if (active || completed) {
-    return `1px solid ${theme.palette.primary.main}`;
+    return "1px solid ".concat(theme.palette.primary.main);
   }
   if (!completed || error) {
-    return `1px solid ${theme.palette.secondary.main}`;
+    return "1px solid ".concat(theme.palette.secondary.main);
   }
-  return `1px solid ${theme.palette.grey[400]}`;
+  return "1px solid ".concat(theme.palette.grey[400]);
 };
-const textColorStyles = (active, completed, error, theme) => {
+var textColorStyles = function textColorStyles(active, completed, error, theme) {
   if (!active && !error && !completed) {
     return theme.palette.secondary.main;
   }
   return "#fff";
 };
-const StyledContainer = styled("div")(
-  ({ active, completed, error, isMobile, theme }) => ({
+var StyledContainer = styled("div")(function (_ref) {
+  var active = _ref.active,
+    completed = _ref.completed,
+    error = _ref.error,
+    isMobile = _ref.isMobile,
+    theme = _ref.theme;
+  return {
     borderRadius: 99,
     height: isMobile ? 32 : 50,
     width: isMobile ? 32 : 50,
@@ -41,14 +46,19 @@ const StyledContainer = styled("div")(
     "& svg": {
       color: "#fff"
     }
-  })
-);
-const StyledText = styled(Typography)(
-  ({ active, completed, error, isMobile, theme }) => ({
+  };
+});
+var StyledText = styled(Typography)(function (_ref2) {
+  var active = _ref2.active,
+    completed = _ref2.completed,
+    error = _ref2.error,
+    isMobile = _ref2.isMobile,
+    theme = _ref2.theme;
+  return {
     fontSize: isMobile ? 16 : 22,
     fontWeight: 700,
     color: textColorStyles(active, completed, error, theme)
-  })
-);
+  };
+});
 
 export { StyledContainer, StyledText };