@tenancy.nz/ui 1.0.1 → 1.0.3

package/dist/cjs/components/Text.cjs

@@ -3,34 +3,48 @@
 
 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 Text({
-  as = "p",
-  children,
-  italic = false,
-  transform = void 0,
-  weight = "500",
-  display = "block",
-  paragraph = false,
-  sx = {},
-  ...others
-}) {
-  const component = paragraph ? "p" : as;
-  const inlineComponents = ["span", "small", "strong"];
-  const textStyles = {
-    fontWeight: weight,
-    ...italic && { fontStyle: "italic" },
-    ...transform && { textTransform: transform }
-  };
-  const styles = {
-    display: inlineComponents.includes(component) ? "inline-block" : display,
-    ...textStyles,
-    ...paragraph && { my: "8px" },
-    ...sx
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(Typography, { component, ...others, sx: styles, children });
+var _excluded = ["as", "children", "italic", "transform", "weight", "display", "paragraph", "sx"];
+function Text(_ref) {
+  var _ref$as = _ref.as,
+    as = _ref$as === void 0 ? "p" : _ref$as,
+    children = _ref.children,
+    _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 ? "500" : _ref$weight,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? "block" : _ref$display,
+    _ref$paragraph = _ref.paragraph,
+    paragraph = _ref$paragraph === void 0 ? false : _ref$paragraph,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx,
+    others = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var component = paragraph ? "p" : as;
+  var inlineComponents = ["span", "small", "strong"];
+  var textStyles = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    fontWeight: weight
+  }, italic && {
+    fontStyle: "italic"
+  }), transform && {
+    textTransform: transform
+  });
+  var styles = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    display: inlineComponents.includes(component) ? "inline-block" : display
+  }, textStyles), paragraph && {
+    my: "8px"
+  }), sx);
+  return /* @__PURE__ */jsxRuntime.jsx(Typography, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    component: component
+  }, others), {}, {
+    sx: styles,
+    children: children
+  }));
 }
 
 exports.default = Text;

package/dist/cjs/components/TextInput.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 InputAdornment = require('@mui/material/InputAdornment');
@@ -12,134 +13,161 @@ var TextInput_styled = require('./TextInput.styled.cjs');
 var number = require('../utils/helpers/number.cjs');
 var Box = require('./Box.cjs');
 
-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 = React.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] = React.useState(
-    rest.value ? rest.value.length : 0
-  );
-  const inputAttrs = {
-    minLength,
-    ...type === "number" && { inputMode: "decimal" },
-    ...!!maxLength && number.toNumber(maxLength) >= 0 && { maxLength },
-    ...readOnly && { readOnly },
-    ...inputProps
+var TextInput = /*#__PURE__*/React.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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var _useState = React.useState(rest.value ? rest.value.length : 0),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    noOfChars = _useState2[0],
+    setNoOfChars = _useState2[1];
+  var inputAttrs = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    minLength: minLength
+  }, type === "number" && {
+    inputMode: "decimal"
+  }), !!maxLength && number.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 = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    autoComplete: autoComplete,
+    autoFocus: autoFocus,
     color: showError ? "error" : color,
-    disabled,
-    endAdornment: endAdornment && /* @__PURE__ */ jsxRuntime.jsx(InputAdornment, { position: "end", variant: "outlined", children: endAdornment }),
-    edges,
-    fullWidth,
+    disabled: disabled,
+    endAdornment: endAdornment && /* @__PURE__ */jsxRuntime.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__ */ jsxRuntime.jsx(InputAdornment, { position: "start", variant: "outlined", children: startAdornment }),
-    type: typeMap[type] || type,
-    ...multiline && textareaProps,
-    ...rest,
+    readOnly: readOnly,
+    size: size,
+    startAdornment: startAdornment && /* @__PURE__ */jsxRuntime.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__ */ jsxRuntime.jsxs(Box.default, { display: "flex", mb: "8px", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Box.default, { as: "span", children: /* @__PURE__ */ jsxRuntime.jsx(
-      FormLabel.default,
-      {
-        disabled,
+  var controlLabel = showCounter ? /* @__PURE__ */jsxRuntime.jsxs(Box.default, {
+    display: "flex",
+    mb: "8px",
+    children: [/* @__PURE__ */jsxRuntime.jsx(Box.default, {
+      as: "span",
+      children: /* @__PURE__ */jsxRuntime.jsx(FormLabel.default, {
+        disabled: disabled,
         htmlFor: id,
-        required,
+        required: required,
         margin: "none",
-        size,
+        size: size,
         children: label
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      Box.default,
-      {
-        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__ */jsxRuntime.jsxs(Box.default, {
+      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__ */ jsxRuntime.jsx(
-    FormControl.default,
-    {
-      color,
-      id: props.id,
-      label: controlLabel,
-      helperText,
-      showError,
-      message: errorMessage || message,
-      fullWidth,
-      disabled,
-      required,
-      size,
-      ref,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        TextInput_styled.default,
-        {
-          ...props,
-          error: true,
-          ...showCounter && { onKeyUp: handleChange }
+          return null;
         }
-      )
-    }
-  );
+      },
+      children: [noOfChars, maxLength ? " / ".concat(maxLength) : ""]
+    })]
+  }) : label;
+  return /* @__PURE__ */jsxRuntime.jsx(FormControl.default, {
+    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__ */jsxRuntime.jsx(TextInput_styled.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
+      error: true
+    }, showCounter && {
+      onKeyUp: handleChange
+    }))
+  });
 });
 
 exports.default = TextInput;

package/dist/cjs/components/TextInput.styled.cjs

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

package/dist/cjs/components/ThemeProvider.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');
@@ -12,16 +13,30 @@ var styles = require('@mui/material/styles');
 var CssBaseline = require('@mui/material/CssBaseline');
 var index = require('../theme/index.cjs');
 
-function ThemeProvider({ theme = {}, children, ...rest }) {
-  const mergedTheme = styles.createTheme({
-    ...index.default,
-    ...theme,
-    cssVariables: { cssVarPrefix: "tn" }
+var _excluded = ["theme", "children"];
+function ThemeProvider(_ref) {
+  var _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? {} : _ref$theme,
+    children = _ref.children,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var mergedTheme = styles.createTheme(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, index.default), theme), {}, {
+    cssVariables: {
+      cssVarPrefix: "tn"
+    }
+  }));
+  return /* @__PURE__ */jsxRuntime.jsx(styles.StyledEngineProvider, {
+    children: /* @__PURE__ */jsxRuntime.jsx(styled.ThemeProvider, {
+      theme: mergedTheme,
+      children: /* @__PURE__ */jsxRuntime.jsx(react.ThemeProvider, {
+        theme: mergedTheme,
+        children: /* @__PURE__ */jsxRuntime.jsxs(styles.ThemeProvider, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+          theme: mergedTheme
+        }, rest), {}, {
+          children: [/* @__PURE__ */jsxRuntime.jsx(CssBaseline, {}), children]
+        }))
+      })
+    })
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(styles.StyledEngineProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(styled.ThemeProvider, { theme: mergedTheme, children: /* @__PURE__ */ jsxRuntime.jsx(react.ThemeProvider, { theme: mergedTheme, children: /* @__PURE__ */ jsxRuntime.jsxs(styles.ThemeProvider, { theme: mergedTheme, ...rest, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CssBaseline, {}),
-    children
-  ] }) }) }) });
 }
 ThemeProvider.propTypes = {
   theme: PropTypes.shape({