@tenancy.nz/ui 1.0.4 → 1.0.6

package/dist/esm/components/StatusMessage.js

@@ -1,6 +1,5 @@
 "use strict";
 import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
 import Alert from './Alert.js';
 
 function StatusMessage(_ref) {
@@ -18,11 +17,10 @@ function StatusMessage(_ref) {
       color: "".concat(color, ".main")
     }
   }, sx);
-  return /* @__PURE__ */jsx(Alert, {
+  return /* @__PURE__ */React.createElement(Alert, {
     variant: "standard",
-    sx: styles,
-    children: children
-  });
+    sx: styles
+  }, children);
 }
 
 export { StatusMessage as default };

package/dist/esm/components/StepIcon.js

@@ -1,7 +1,6 @@
 "use strict";
 import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
-import 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import CheckIcon from '@mui/icons-material/Check';
@@ -21,25 +20,19 @@ function StepIcon(_ref) {
     error: error,
     isMobile: isMobile
   };
-  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({
+  return /* @__PURE__ */React.createElement(StyledContainer, _objectSpread2({}, commonProps), function () {
+    if (error) {
+      return /* @__PURE__ */React.createElement(StyledText, _objectSpread2({
         align: "center"
-      }, commonProps), {}, {
-        children: icon
-      }));
-    }()
-  }));
+      }, commonProps), "!");
+    }
+    if (completed && !active) {
+      return /* @__PURE__ */React.createElement(CheckIcon, null);
+    }
+    return /* @__PURE__ */React.createElement(StyledText, _objectSpread2({
+      align: "center"
+    }, commonProps), icon);
+  }());
 }
 StepIcon.propTypes = {
   /**

package/dist/esm/components/Stepper.js

@@ -1,6 +1,5 @@
 "use strict";
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import PropTypes from 'prop-types';
 import StepButton from '@mui/material/StepButton';
@@ -33,40 +32,35 @@ function Stepper(_ref) {
       onChange(step);
     };
   };
-  return /* @__PURE__ */jsxs(StyledContainer, {
-    isMobile: isMobile,
-    children: [isMobile && /* @__PURE__ */jsx(Heading, {
-      as: "h3",
-      align: "center",
-      gutterBottom: false,
-      children: steps[activeStep].label
-    }), /* @__PURE__ */jsx(MuiStepper, _objectSpread2(_objectSpread2({
-      alternativeLabel: true,
-      activeStep: activeStep
-    }, rest), {}, {
-      style: {
-        padding: isMobile ? "18px 0" : "5px 0px 24px 0px"
-      },
-      children: steps.map(function (_ref2, index) {
-        var label = _ref2.label,
-          error = _ref2.error,
-          completed = _ref2.completed,
-          disabled = _ref2.disabled;
-        return /* @__PURE__ */jsx(Step, {
-          completed: completed,
-          disabled: !!disabled,
-          children: /* @__PURE__ */jsx(StepButton, {
-            onClick: handleStep(index),
-            children: /* @__PURE__ */jsx(StepLabel, {
-              error: error,
-              StepIconComponent: StepIcon,
-              children: !isMobile && label
-            })
-          })
-        }, label);
-      })
-    }))]
-  });
+  return /* @__PURE__ */React.createElement(StyledContainer, {
+    isMobile: isMobile
+  }, isMobile && /* @__PURE__ */React.createElement(Heading, {
+    as: "h3",
+    align: "center",
+    gutterBottom: false
+  }, steps[activeStep].label), /* @__PURE__ */React.createElement(MuiStepper, _objectSpread2(_objectSpread2({
+    alternativeLabel: true,
+    activeStep: activeStep
+  }, rest), {}, {
+    style: {
+      padding: isMobile ? "18px 0" : "5px 0px 24px 0px"
+    }
+  }), steps.map(function (_ref2, index) {
+    var label = _ref2.label,
+      error = _ref2.error,
+      completed = _ref2.completed,
+      disabled = _ref2.disabled;
+    return /* @__PURE__ */React.createElement(Step, {
+      key: label,
+      completed: completed,
+      disabled: !!disabled
+    }, /* @__PURE__ */React.createElement(StepButton, {
+      onClick: handleStep(index)
+    }, /* @__PURE__ */React.createElement(StepLabel, {
+      error: error,
+      StepIconComponent: StepIcon
+    }, !isMobile && label)));
+  })));
 }
 Stepper.propTypes = {
   /**

package/dist/esm/components/SuccessModal.js

@@ -1,7 +1,6 @@
 "use strict";
 import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import { StyledContent, StyledIcon } from './SuccessModal.styled.js';
@@ -28,24 +27,16 @@ function SuccessModal(_ref) {
       }, duration);
     }
   }, [duration, show]);
-  return /* @__PURE__ */jsx(Modal, {
+  return /* @__PURE__ */React.createElement(Modal, {
     open: isOpen,
     fullWidth: true,
     maxWidth: "sm",
-    hideBackdrop: true,
-    children: /* @__PURE__ */jsx(ModalContent, {
-      children: /* @__PURE__ */jsxs(StyledContent, {
-        children: [/* @__PURE__ */jsx(StyledIcon, {
-          children: /* @__PURE__ */jsx(CheckCircleOutlineIcon, {})
-        }), /* @__PURE__ */jsx(Heading, {
-          align: "center",
-          as: "h4",
-          gutterBottom: false,
-          children: message
-        })]
-      })
-    })
-  });
+    hideBackdrop: true
+  }, /* @__PURE__ */React.createElement(ModalContent, null, /* @__PURE__ */React.createElement(StyledContent, null, /* @__PURE__ */React.createElement(StyledIcon, null, /* @__PURE__ */React.createElement(CheckCircleOutlineIcon, null)), /* @__PURE__ */React.createElement(Heading, {
+    align: "center",
+    as: "h4",
+    gutterBottom: false
+  }, message))));
 }
 SuccessModal.propTypes = {
   /**

package/dist/esm/components/Switch.js

@@ -1,6 +1,5 @@
 "use strict";
 import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
 import FormLabel from './FormLabel.js';
 import { StyledSwitch, StyledSwitchInput, StyledSwitchTrack, StyledSwitchKnob } from './Switch.styled.js';
 
@@ -37,27 +36,24 @@ function Switch(_ref) {
   }), value !== void 0 && {
     value: value
   });
-  return /* @__PURE__ */jsxs(StyledSwitch, {
+  return /* @__PURE__ */React.createElement(StyledSwitch, {
     disabled: disabled,
-    size: size,
-    children: [/* @__PURE__ */jsx(StyledSwitchInput, _objectSpread2(_objectSpread2({
-      color: color,
-      name: name,
-      size: size
-    }, inputProps), {}, {
-      type: "checkbox"
-    })), label && /* @__PURE__ */jsx(FormLabel, {
-      required: required,
-      margin: "none",
-      size: size,
-      children: label
-    }), /* @__PURE__ */jsx(StyledSwitchTrack, {
-      size: size,
-      children: /* @__PURE__ */jsx(StyledSwitchKnob, {
-        size: size
-      })
-    })]
-  });
+    size: size
+  }, /* @__PURE__ */React.createElement(StyledSwitchInput, _objectSpread2(_objectSpread2({
+    color: color,
+    name: name,
+    size: size
+  }, inputProps), {}, {
+    type: "checkbox"
+  })), label && /* @__PURE__ */React.createElement(FormLabel, {
+    required: required,
+    margin: "none",
+    size: size
+  }, label), /* @__PURE__ */React.createElement(StyledSwitchTrack, {
+    size: size
+  }, /* @__PURE__ */React.createElement(StyledSwitchKnob, {
+    size: size
+  })));
 }
 
 export { Switch as default };

package/dist/esm/components/Tab.js

@@ -1,7 +1,6 @@
 "use strict";
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
-import 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { StyledTab } from './Tab.styled.js';
 
@@ -11,7 +10,7 @@ function Tab(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /* @__PURE__ */jsx(StyledTab, _objectSpread2(_objectSpread2({
+  return /* @__PURE__ */React.createElement(StyledTab, _objectSpread2(_objectSpread2({
     label: label,
     disabled: disabled
   }, rest), {}, {

package/dist/esm/components/TabPanel.js

@@ -1,6 +1,5 @@
 "use strict";
-import { jsx } from 'react/jsx-runtime';
-import 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { StyledTabPanel } from './TabPanel.styled.js';
 
@@ -8,11 +7,10 @@ function TabPanel(_ref) {
   var children = _ref.children,
     index = _ref.index,
     value = _ref.value;
-  return /* @__PURE__ */jsx(StyledTabPanel, {
+  return /* @__PURE__ */React.createElement(StyledTabPanel, {
     index: index,
-    value: value,
-    children: children
-  });
+    value: value
+  }, children);
 }
 TabPanel.propTypes = {
   /**

package/dist/esm/components/Table.js

@@ -1,7 +1,6 @@
 "use strict";
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
-import 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import MuiTable from '@mui/material/Table';
 
@@ -9,9 +8,7 @@ var _excluded = ["children"];
 function Table(_ref) {
   var children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /* @__PURE__ */jsx(MuiTable, _objectSpread2(_objectSpread2({}, rest), {}, {
-    children: children
-  }));
+  return /* @__PURE__ */React.createElement(MuiTable, _objectSpread2({}, rest), children);
 }
 Table.propTypes = {
   /**

package/dist/esm/components/TableBody.js

@@ -1,7 +1,6 @@
 "use strict";
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
-import 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import MuiTableBody from '@mui/material/TableBody';
 
@@ -9,9 +8,7 @@ var _excluded = ["children"];
 function TableBody(_ref) {
   var children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /* @__PURE__ */jsx(MuiTableBody, _objectSpread2(_objectSpread2({}, rest), {}, {
-    children: children
-  }));
+  return /* @__PURE__ */React.createElement(MuiTableBody, _objectSpread2({}, rest), children);
 }
 TableBody.propTypes = {
   /**

package/dist/esm/components/TableCell.js

@@ -1,7 +1,6 @@
 "use strict";
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
-import 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import MuiTableCell from '@mui/material/TableCell';
 
@@ -9,9 +8,7 @@ var _excluded = ["children"];
 function TableCell(_ref) {
   var children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /* @__PURE__ */jsx(MuiTableCell, _objectSpread2(_objectSpread2({}, rest), {}, {
-    children: children
-  }));
+  return /* @__PURE__ */React.createElement(MuiTableCell, _objectSpread2({}, rest), children);
 }
 TableCell.propTypes = {
   /**

package/dist/esm/components/TableContainer.js

@@ -1,7 +1,6 @@
 "use strict";
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
-import 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import MuiTableContainer from '@mui/material/TableContainer';
 
@@ -9,9 +8,7 @@ var _excluded = ["children"];
 function TableContainer(_ref) {
   var children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /* @__PURE__ */jsx(MuiTableContainer, _objectSpread2(_objectSpread2({}, rest), {}, {
-    children: children
-  }));
+  return /* @__PURE__ */React.createElement(MuiTableContainer, _objectSpread2({}, rest), children);
 }
 TableContainer.propTypes = {
   /**

package/dist/esm/components/TableFooter.js

@@ -1,7 +1,6 @@
 "use strict";
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
-import 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import MuiTableFooter from '@mui/material/TableFooter';
 
@@ -9,9 +8,7 @@ var _excluded = ["children"];
 function TableFooter(_ref) {
   var children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /* @__PURE__ */jsx(MuiTableFooter, _objectSpread2(_objectSpread2({}, rest), {}, {
-    children: children
-  }));
+  return /* @__PURE__ */React.createElement(MuiTableFooter, _objectSpread2({}, rest), children);
 }
 TableFooter.propTypes = {
   /**

package/dist/esm/components/TableHead.js

@@ -1,7 +1,6 @@
 "use strict";
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
-import 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import MuiTableHead from '@mui/material/TableHead';
 
@@ -9,9 +8,7 @@ var _excluded = ["children"];
 function TableHead(_ref) {
   var children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /* @__PURE__ */jsx(MuiTableHead, _objectSpread2(_objectSpread2({}, rest), {}, {
-    children: children
-  }));
+  return /* @__PURE__ */React.createElement(MuiTableHead, _objectSpread2({}, rest), children);
 }
 TableHead.propTypes = {
   /**

package/dist/esm/components/TableRow.js

@@ -1,7 +1,6 @@
 "use strict";
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
-import 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import MuiTableRow from '@mui/material/TableRow';
 
@@ -9,9 +8,7 @@ var _excluded = ["children"];
 function TableRow(_ref) {
   var children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /* @__PURE__ */jsx(MuiTableRow, _objectSpread2(_objectSpread2({}, rest), {}, {
-    children: children
-  }));
+  return /* @__PURE__ */React.createElement(MuiTableRow, _objectSpread2({}, rest), children);
 }
 TableRow.propTypes = {
   /**

package/dist/esm/components/Tabs.js

@@ -1,7 +1,6 @@
 "use strict";
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
-import 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { StyledTabs } from './Tabs.styled.js';
 
@@ -14,13 +13,12 @@ function Tabs(_ref) {
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? false : _ref$value,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /* @__PURE__ */jsx(StyledTabs, _objectSpread2(_objectSpread2({}, rest), {}, {
+  return /* @__PURE__ */React.createElement(StyledTabs, _objectSpread2(_objectSpread2({}, rest), {}, {
     action: action,
     value: value,
     activecolor: activecolor,
-    textColor: "inherit",
-    children: children
-  }));
+    textColor: "inherit"
+  }), children);
 }
 Tabs.propTypes = {
   /**

package/dist/esm/components/Tag.js

@@ -1,6 +1,5 @@
 "use strict";
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
 import StyledTag, { StyledTagIcon, StyledTagIconDot } from './Tag.styled.js';
 
 var _excluded = ["endIcon", "label", "startIcon", "color", "edges", "size", "variant"];
@@ -19,25 +18,18 @@ function Tag(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? "standard" : _ref$variant,
     others = _objectWithoutProperties(_ref, _excluded);
-  return /* @__PURE__ */jsxs(StyledTag, _objectSpread2(_objectSpread2({
+  return /* @__PURE__ */React.createElement(StyledTag, _objectSpread2({
     color: color,
     edges: edges,
     variant: variant,
     size: size
-  }, others), {}, {
-    children: [startIcon && /* @__PURE__ */jsx(StyledTagIcon, {
-      size: size,
-      children: startIcon
-    }), !startIcon && !endIcon && /* @__PURE__ */jsx(StyledTagIcon, {
-      size: size,
-      children: /* @__PURE__ */jsx(StyledTagIconDot, {})
-    }), /* @__PURE__ */jsx("span", {
-      children: label
-    }), endIcon && /* @__PURE__ */jsx(StyledTagIcon, {
-      size: size,
-      children: endIcon
-    })]
-  }));
+  }, others), startIcon && /* @__PURE__ */React.createElement(StyledTagIcon, {
+    size: size
+  }, startIcon), !startIcon && !endIcon && /* @__PURE__ */React.createElement(StyledTagIcon, {
+    size: size
+  }, /* @__PURE__ */React.createElement(StyledTagIconDot, null)), /* @__PURE__ */React.createElement("span", null, label), endIcon && /* @__PURE__ */React.createElement(StyledTagIcon, {
+    size: size
+  }, endIcon));
 }
 
 export { Tag as default };

package/dist/esm/components/Text.js

@@ -1,6 +1,5 @@
 "use strict";
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
 import Typography from '@mui/material/Typography';
 
 var _excluded = ["as", "children", "italic", "transform", "weight", "display", "paragraph", "sx"];
@@ -35,12 +34,11 @@ function Text(_ref) {
   }, textStyles), paragraph && {
     my: "8px"
   }), sx);
-  return /* @__PURE__ */jsx(Typography, _objectSpread2(_objectSpread2({
+  return /* @__PURE__ */React.createElement(Typography, _objectSpread2(_objectSpread2({
     component: component
   }, others), {}, {
-    sx: styles,
-    children: children
-  }));
+    sx: styles
+  }), children);
 }
 
 export { Text as default };

package/dist/esm/components/TextInput.js

@@ -1,6 +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';
 import FormControl from './FormControl.js';
@@ -88,11 +87,10 @@ var TextInput = /*#__PURE__*/forwardRef(function TextInput2(_ref, ref) {
     autoFocus: autoFocus,
     color: showError ? "error" : color,
     disabled: disabled,
-    endAdornment: endAdornment && /* @__PURE__ */jsx(InputAdornment, {
+    endAdornment: endAdornment && /* @__PURE__ */React.createElement(InputAdornment, {
       position: "end",
-      variant: "outlined",
-      children: endAdornment
-    }),
+      variant: "outlined"
+    }, endAdornment),
     edges: edges,
     fullWidth: fullWidth,
     id: id || name,
@@ -104,11 +102,10 @@ var TextInput = /*#__PURE__*/forwardRef(function TextInput2(_ref, ref) {
     $error: showError,
     readOnly: readOnly,
     size: size,
-    startAdornment: startAdornment && /* @__PURE__ */jsx(InputAdornment, {
+    startAdornment: startAdornment && /* @__PURE__ */React.createElement(InputAdornment, {
       position: "start",
-      variant: "outlined",
-      children: startAdornment
-    }),
+      variant: "outlined"
+    }, startAdornment),
     type: typeMap[type] || type
   }, multiline && textareaProps), rest), {}, {
     margin: "none"
@@ -117,36 +114,32 @@ var TextInput = /*#__PURE__*/forwardRef(function TextInput2(_ref, ref) {
     var value = event.target.value;
     setNoOfChars(value.length);
   };
-  var controlLabel = showCounter ? /* @__PURE__ */jsxs(Box, {
+  var controlLabel = showCounter ? /* @__PURE__ */React.createElement(Box, {
     display: "flex",
-    mb: "8px",
-    children: [/* @__PURE__ */jsx(Box, {
-      as: "span",
-      children: /* @__PURE__ */jsx(FormLabel, {
-        disabled: disabled,
-        htmlFor: id,
-        required: required,
-        margin: "none",
-        size: size,
-        children: label
-      })
-    }), /* @__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");
-          }
-          return null;
+    mb: "8px"
+  }, /* @__PURE__ */React.createElement(Box, {
+    as: "span"
+  }, /* @__PURE__ */React.createElement(FormLabel, {
+    disabled: disabled,
+    htmlFor: id,
+    required: required,
+    margin: "none",
+    size: size
+  }, label)), /* @__PURE__ */React.createElement(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 ? " / ".concat(maxLength) : ""]
-    })]
-  }) : label;
-  return /* @__PURE__ */jsx(FormControl, {
+        return null;
+      }
+    }
+  }, noOfChars, maxLength ? " / ".concat(maxLength) : "")) : label;
+  return /* @__PURE__ */React.createElement(FormControl, {
     color: color,
     id: props.id,
     label: controlLabel,
@@ -157,13 +150,12 @@ var TextInput = /*#__PURE__*/forwardRef(function TextInput2(_ref, ref) {
     disabled: disabled,
     required: required,
     size: size,
-    ref: ref,
-    children: /* @__PURE__ */jsx(StyledTextInput, _objectSpread2(_objectSpread2({}, props), {}, {
-      error: true
-    }, showCounter && {
-      onKeyUp: handleChange
-    }))
-  });
+    ref: ref
+  }, /* @__PURE__ */React.createElement(StyledTextInput, _objectSpread2(_objectSpread2({}, props), {}, {
+    error: true
+  }, showCounter && {
+    onKeyUp: handleChange
+  })));
 });
 
 export { TextInput as default };