@tenancy.nz/ui 1.0.2 → 1.0.3

package/dist/esm/components/TextInput.js

@@ -1,4 +1,5 @@
 "use strict";
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useState } from 'react';
 import InputAdornment from '@mui/material/InputAdornment';
@@ -8,134 +9,161 @@ import StyledTextInput from './TextInput.styled.js';
 import { toNumber } from '../utils/helpers/number.js';
 import Box from './Box.js';
 
-const typeMap = {
+var _excluded = ["autoComplete", "autoFocus", "color", "disabled", "edges", "endAdornment", "errorMessage", "fullWidth", "helperText", "id", "inputRef", "inputProps", "label", "maxLength", "minLength", "message", "multiline", "name", "placeholder", "required", "showCounter", "showError", "size", "startAdornment", "readOnly", "type"];
+var typeMap = {
   number: "text"
 };
-const TextInput = forwardRef(function TextInput2({
-  autoComplete = "off",
-  autoFocus = false,
-  color = "default",
-  disabled = false,
-  edges = "smooth",
-  endAdornment = void 0,
-  errorMessage = "",
-  fullWidth = true,
-  helperText = "",
-  id = void 0,
-  inputRef = void 0,
-  inputProps = {},
-  label = "",
-  maxLength = void 0,
-  minLength = void 0,
-  message = "",
-  multiline = false,
-  name,
-  placeholder = "",
-  required = false,
-  showCounter = false,
-  showError = false,
-  size = "medium",
-  startAdornment = void 0,
-  readOnly = false,
-  type = "text",
-  ...rest
-}, ref) {
-  const [noOfChars, setNoOfChars] = useState(
-    rest.value ? rest.value.length : 0
-  );
-  const inputAttrs = {
-    minLength,
-    ...type === "number" && { inputMode: "decimal" },
-    ...!!maxLength && toNumber(maxLength) >= 0 && { maxLength },
-    ...readOnly && { readOnly },
-    ...inputProps
+var TextInput = /*#__PURE__*/forwardRef(function TextInput2(_ref, ref) {
+  var _ref$autoComplete = _ref.autoComplete,
+    autoComplete = _ref$autoComplete === void 0 ? "off" : _ref$autoComplete,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    _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$endAdornment = _ref.endAdornment,
+    endAdornment = _ref$endAdornment === void 0 ? void 0 : _ref$endAdornment,
+    _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 ? "" : _ref$label,
+    _ref$maxLength = _ref.maxLength,
+    maxLength = _ref$maxLength === void 0 ? void 0 : _ref$maxLength,
+    _ref$minLength = _ref.minLength,
+    minLength = _ref$minLength === void 0 ? void 0 : _ref$minLength,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? "" : _ref$message,
+    _ref$multiline = _ref.multiline,
+    multiline = _ref$multiline === void 0 ? false : _ref$multiline,
+    name = _ref.name,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$showCounter = _ref.showCounter,
+    showCounter = _ref$showCounter === void 0 ? false : _ref$showCounter,
+    _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$startAdornment = _ref.startAdornment,
+    startAdornment = _ref$startAdornment === void 0 ? void 0 : _ref$startAdornment,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "text" : _ref$type,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(rest.value ? rest.value.length : 0),
+    _useState2 = _slicedToArray(_useState, 2),
+    noOfChars = _useState2[0],
+    setNoOfChars = _useState2[1];
+  var inputAttrs = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+    minLength: minLength
+  }, type === "number" && {
+    inputMode: "decimal"
+  }), !!maxLength && toNumber(maxLength) >= 0 && {
+    maxLength: maxLength
+  }), readOnly && {
+    readOnly: readOnly
+  }), inputProps);
+  var textareaProps = {
+    multiline: multiline,
+    rows: 3.4
   };
-  const textareaProps = { multiline, rows: 3.4 };
-  const props = {
-    autoComplete,
-    autoFocus,
+  var props = _objectSpread2(_objectSpread2(_objectSpread2({
+    autoComplete: autoComplete,
+    autoFocus: autoFocus,
     color: showError ? "error" : color,
-    disabled,
-    endAdornment: endAdornment && /* @__PURE__ */ jsx(InputAdornment, { position: "end", variant: "outlined", children: endAdornment }),
-    edges,
-    fullWidth,
+    disabled: disabled,
+    endAdornment: endAdornment && /* @__PURE__ */jsx(InputAdornment, {
+      position: "end",
+      variant: "outlined",
+      children: endAdornment
+    }),
+    edges: edges,
+    fullWidth: fullWidth,
     id: id || name,
     inputProps: inputAttrs,
-    inputRef,
-    name,
-    placeholder,
-    required,
+    inputRef: inputRef,
+    name: name,
+    placeholder: placeholder,
+    required: required,
     $error: showError,
-    readOnly,
-    size,
-    startAdornment: startAdornment && /* @__PURE__ */ jsx(InputAdornment, { position: "start", variant: "outlined", children: startAdornment }),
-    type: typeMap[type] || type,
-    ...multiline && textareaProps,
-    ...rest,
+    readOnly: readOnly,
+    size: size,
+    startAdornment: startAdornment && /* @__PURE__ */jsx(InputAdornment, {
+      position: "start",
+      variant: "outlined",
+      children: startAdornment
+    }),
+    type: typeMap[type] || type
+  }, multiline && textareaProps), rest), {}, {
     margin: "none"
-  };
-  const handleChange = (event) => {
-    const { value } = event.target;
+  });
+  var handleChange = function handleChange(event) {
+    var value = event.target.value;
     setNoOfChars(value.length);
   };
-  const controlLabel = showCounter ? /* @__PURE__ */ jsxs(Box, { display: "flex", mb: "8px", children: [
-    /* @__PURE__ */ jsx(Box, { as: "span", children: /* @__PURE__ */ jsx(
-      FormLabel,
-      {
-        disabled,
+  var controlLabel = showCounter ? /* @__PURE__ */jsxs(Box, {
+    display: "flex",
+    mb: "8px",
+    children: [/* @__PURE__ */jsx(Box, {
+      as: "span",
+      children: /* @__PURE__ */jsx(FormLabel, {
+        disabled: disabled,
         htmlFor: id,
-        required,
+        required: required,
         margin: "none",
-        size,
+        size: size,
         children: label
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(
-      Box,
-      {
-        as: "span",
-        sx: {
-          color: disabled ? "grey.400" : "grey.600",
-          flexShrink: 0,
-          ml: "auto",
-          fontSize: (theme) => {
-            if (size === "medium") {
-              return `${theme.typography.fontSize}px`;
-            }
-            return null;
+      })
+    }), /* @__PURE__ */jsxs(Box, {
+      as: "span",
+      sx: {
+        color: disabled ? "grey.400" : "grey.600",
+        flexShrink: 0,
+        ml: "auto",
+        fontSize: function fontSize(theme) {
+          if (size === "medium") {
+            return "".concat(theme.typography.fontSize, "px");
           }
-        },
-        children: [
-          noOfChars,
-          maxLength ? ` / ${maxLength}` : ""
-        ]
-      }
-    )
-  ] }) : label;
-  return /* @__PURE__ */ jsx(
-    FormControl,
-    {
-      color,
-      id: props.id,
-      label: controlLabel,
-      helperText,
-      showError,
-      message: errorMessage || message,
-      fullWidth,
-      disabled,
-      required,
-      size,
-      ref,
-      children: /* @__PURE__ */ jsx(
-        StyledTextInput,
-        {
-          ...props,
-          error: true,
-          ...showCounter && { onKeyUp: handleChange }
+          return null;
         }
-      )
-    }
-  );
+      },
+      children: [noOfChars, maxLength ? " / ".concat(maxLength) : ""]
+    })]
+  }) : label;
+  return /* @__PURE__ */jsx(FormControl, {
+    color: color,
+    id: props.id,
+    label: controlLabel,
+    helperText: helperText,
+    showError: showError,
+    message: errorMessage || message,
+    fullWidth: fullWidth,
+    disabled: disabled,
+    required: required,
+    size: size,
+    ref: ref,
+    children: /* @__PURE__ */jsx(StyledTextInput, _objectSpread2(_objectSpread2({}, props), {}, {
+      error: true
+    }, showCounter && {
+      onKeyUp: handleChange
+    }))
+  });
 });
 
 export { TextInput as default };

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

@@ -1,105 +1,73 @@
 "use strict";
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { css } from '@emotion/react';
 import { styled } from '@mui/material/styles';
 import InputBase from '@mui/material/InputBase';
 import { getObjectProp } from '../utils/helpers/object.js';
 
-const colorStyles = ({ color, theme }) => css`
-  ${color === "default" && css`
-    border: 1px solid ${getObjectProp(theme, "vars.palette.grey.400")};
-  `}
-
-  ${color !== "default" && css`
-    border: 1px solid ${getObjectProp(theme, `vars.palette.${color}.main`)};
-    background-color: ${getObjectProp(theme, `vars.palette.${color}.light`)};
-  `}
-`;
-const disabledStyles = ({ theme }) => css`
-  border-color: ${getObjectProp(theme, "vars.palette.grey.200")};
-  color: ${getObjectProp(theme, "vars.palette.grey.600")};
-  background-color: ${getObjectProp(theme, "vars.palette.grey.200")};
-`;
-const edgesStyles = ({ edges, theme }) => css`
-  ${edges === "smooth" && css`
-    border-radius: ${getObjectProp(theme, "vars.shape.borderRadius")};
-  `}
-  ${edges === "sharp" && css`
-    border-radius: 0px;
-  `}
-    ${edges === "rounded" && css`
-    border-radius: 9999px;
-  `}
-`;
-const focusStyles = ({ theme, color }) => css`
-  ${color === "default" && css`
-    &:focus-within {
-      box-shadow: 0px 0px 6px 0px
-        ${getObjectProp(theme, "vars.palette.info.main")};
-      border-color: ${getObjectProp(theme, "vars.palette.info.main")};
-    }
-  `}
-  ${color !== "default" && css`
-    &:focus-within {
-      box-shadow: 0px 0px 6px 0px
-        ${getObjectProp(theme, `vars.palette.${color}.main`)};
-    }
-  `}
-
-  > input:focus::placeholder {
-    opacity: 0;
-  }
-`;
-const hoverStyles = css`
-  &:hover {
-    border-color: #1f1c4f;
-  }
-`;
-const placeholderStyles = ({ theme }) => css`
-  > input::placeholder {
-    color: ${getObjectProp(theme, "vars.palette.grey.600")};
-    opacity: 1;
-    transition: none;
-  }
-`;
-const readOnlyStyles = ({ theme }) => css`
-  background-color: ${getObjectProp(theme, "vars.palette.background.muted")};
-`;
-const sizeStyles = ({ size, multiline, theme }) => css`
-  ${size === "small" && css`
-    height: 36px;
-    padding: 8px 12px;
-    font-size: calc(${getObjectProp(theme, "typography.fontSize")}px - 2px);
-  `}
-  ${size === "medium" && css`
-    height: 48px;
-    padding: 12px 16px;
-    font-size: ${getObjectProp(theme, "typography.fontSize")}px;
-  `}
-  ${multiline && css`
-    height: auto;
-    min-height: 78px;
-  `}
-`;
-const StyledTextInput = styled(InputBase)`
-  ${({ color, disabled, edges, multiline, readOnly, size, theme }) => css`
-    background-color: #fff;
-    font-weight: 400;
-    transition: none;
-    color: ${getObjectProp(theme, "vars.palette.text.primary")};
-
-    ${colorStyles({ color, theme })}
-    ${edgesStyles({ edges, theme })}
-    ${!disabled && !readOnly && hoverStyles}
-    ${!disabled && !readOnly && focusStyles({ theme, color })}
-    ${!disabled && readOnly && readOnlyStyles({ theme })}
-    ${disabled && disabledStyles({ theme })}
-    ${placeholderStyles({ theme })}
-    ${sizeStyles({ size, multiline, theme })}
-
-    > input {
-      padding: 0;
-    }
-  `}
-`;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
+var colorStyles = function colorStyles(_ref) {
+  var color = _ref.color,
+    theme = _ref.theme;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n"])), color === "default" && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n  "])), getObjectProp(theme, "vars.palette.grey.400")), color !== "default" && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n    background-color: ", ";\n  "])), getObjectProp(theme, "vars.palette.".concat(color, ".main")), getObjectProp(theme, "vars.palette.".concat(color, ".light"))));
+};
+var disabledStyles = function disabledStyles(_ref2) {
+  var theme = _ref2.theme;
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-color: ", ";\n  color: ", ";\n  background-color: ", ";\n"])), getObjectProp(theme, "vars.palette.grey.200"), getObjectProp(theme, "vars.palette.grey.600"), getObjectProp(theme, "vars.palette.grey.200"));
+};
+var edgesStyles = function edgesStyles(_ref3) {
+  var edges = _ref3.edges,
+    theme = _ref3.theme;
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n    ", "\n"])), edges === "smooth" && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    border-radius: ", ";\n  "])), getObjectProp(theme, "vars.shape.borderRadius")), edges === "sharp" && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    border-radius: 0px;\n  "]))), edges === "rounded" && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    border-radius: 9999px;\n  "]))));
+};
+var focusStyles = function focusStyles(_ref4) {
+  var theme = _ref4.theme,
+    color = _ref4.color;
+  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n\n  > input:focus::placeholder {\n    opacity: 0;\n  }\n"])), color === "default" && css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n    &:focus-within {\n      box-shadow: 0px 0px 6px 0px\n        ", ";\n      border-color: ", ";\n    }\n  "])), getObjectProp(theme, "vars.palette.info.main"), getObjectProp(theme, "vars.palette.info.main")), color !== "default" && css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n    &:focus-within {\n      box-shadow: 0px 0px 6px 0px\n        ", ";\n    }\n  "])), getObjectProp(theme, "vars.palette.".concat(color, ".main"))));
+};
+var hoverStyles = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  &:hover {\n    border-color: #1f1c4f;\n  }\n"])));
+var placeholderStyles = function placeholderStyles(_ref5) {
+  var theme = _ref5.theme;
+  return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  > input::placeholder {\n    color: ", ";\n    opacity: 1;\n    transition: none;\n  }\n"])), getObjectProp(theme, "vars.palette.grey.600"));
+};
+var readOnlyStyles = function readOnlyStyles(_ref6) {
+  var theme = _ref6.theme;
+  return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), getObjectProp(theme, "vars.palette.background.muted"));
+};
+var sizeStyles = function sizeStyles(_ref7) {
+  var size = _ref7.size,
+    multiline = _ref7.multiline,
+    theme = _ref7.theme;
+  return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n"])), size === "small" && css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    height: 36px;\n    padding: 8px 12px;\n    font-size: calc(", "px - 2px);\n  "])), getObjectProp(theme, "typography.fontSize")), size === "medium" && css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    height: 48px;\n    padding: 12px 16px;\n    font-size: ", "px;\n  "])), getObjectProp(theme, "typography.fontSize")), multiline && css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    height: auto;\n    min-height: 78px;\n  "]))));
+};
+var StyledTextInput = styled(InputBase)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref8) {
+  var color = _ref8.color,
+    disabled = _ref8.disabled,
+    edges = _ref8.edges,
+    multiline = _ref8.multiline,
+    readOnly = _ref8.readOnly,
+    size = _ref8.size,
+    theme = _ref8.theme;
+  return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    background-color: #fff;\n    font-weight: 400;\n    transition: none;\n    color: ", ";\n\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    > input {\n      padding: 0;\n    }\n  "])), getObjectProp(theme, "vars.palette.text.primary"), colorStyles({
+    color: color,
+    theme: theme
+  }), edgesStyles({
+    edges: edges,
+    theme: theme
+  }), !disabled && !readOnly && hoverStyles, !disabled && !readOnly && focusStyles({
+    theme: theme,
+    color: color
+  }), !disabled && readOnly && readOnlyStyles({
+    theme: theme
+  }), disabled && disabledStyles({
+    theme: theme
+  }), placeholderStyles({
+    theme: theme
+  }), sizeStyles({
+    size: size,
+    multiline: multiline,
+    theme: theme
+  }));
+});
 
 export { colorStyles, StyledTextInput as default, disabledStyles, edgesStyles, focusStyles, hoverStyles, placeholderStyles, readOnlyStyles, sizeStyles };

package/dist/esm/components/ThemeProvider.js

@@ -1,4 +1,5 @@
 "use strict";
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import 'react';
 import PropTypes from 'prop-types';
@@ -8,16 +9,30 @@ import { createTheme, StyledEngineProvider, ThemeProvider as ThemeProvider$3 } f
 import CssBaseline from '@mui/material/CssBaseline';
 import theme from '../theme/index.js';
 
-function ThemeProvider({ theme: theme$1 = {}, children, ...rest }) {
-  const mergedTheme = createTheme({
-    ...theme,
-    ...theme$1,
-    cssVariables: { cssVarPrefix: "tn" }
+var _excluded = ["theme", "children"];
+function ThemeProvider(_ref) {
+  var _ref$theme = _ref.theme,
+    theme$1 = _ref$theme === void 0 ? {} : _ref$theme,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var mergedTheme = createTheme(_objectSpread2(_objectSpread2(_objectSpread2({}, theme), theme$1), {}, {
+    cssVariables: {
+      cssVarPrefix: "tn"
+    }
+  }));
+  return /* @__PURE__ */jsx(StyledEngineProvider, {
+    children: /* @__PURE__ */jsx(ThemeProvider$1, {
+      theme: mergedTheme,
+      children: /* @__PURE__ */jsx(ThemeProvider$2, {
+        theme: mergedTheme,
+        children: /* @__PURE__ */jsxs(ThemeProvider$3, _objectSpread2(_objectSpread2({
+          theme: mergedTheme
+        }, rest), {}, {
+          children: [/* @__PURE__ */jsx(CssBaseline, {}), children]
+        }))
+      })
+    })
   });
-  return /* @__PURE__ */ jsx(StyledEngineProvider, { children: /* @__PURE__ */ jsx(ThemeProvider$1, { theme: mergedTheme, children: /* @__PURE__ */ jsx(ThemeProvider$2, { theme: mergedTheme, children: /* @__PURE__ */ jsxs(ThemeProvider$3, { theme: mergedTheme, ...rest, children: [
-    /* @__PURE__ */ jsx(CssBaseline, {}),
-    children
-  ] }) }) }) });
 }
 ThemeProvider.propTypes = {
   theme: PropTypes.shape({