@tenancy.nz/ui 1.0.2 → 1.0.3

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

@@ -1,21 +1,12 @@
 "use strict";
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
 import styled, { css } from 'styled-components';
 import MuiBadge from '@mui/material/Badge';
 
-const StyledBadge = styled(MuiBadge)`
-  ${({ variant }) => css`
-    ${variant !== "dot" && css`
-      & .MuiBadge-badge {
-        min-width: 14px;
-        height: 14px;
-        border: 1px solid #fff;
-        padding: 0 3px;
-        border-radius: 50%;
-        font-size: 8px;
-        font-weight: 700;
-      }
-    `}
-  `}
-`;
+var _templateObject, _templateObject2, _templateObject3;
+var StyledBadge = styled(MuiBadge)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var variant = _ref.variant;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", "\n  "])), variant !== "dot" && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      & .MuiBadge-badge {\n        min-width: 14px;\n        height: 14px;\n        border: 1px solid #fff;\n        padding: 0 3px;\n        border-radius: 50%;\n        font-size: 8px;\n        font-weight: 700;\n      }\n    "]))));
+});
 
 export { StyledBadge };

package/dist/esm/components/BankAccountInput.js

@@ -1,4 +1,5 @@
 "use strict";
+import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
@@ -11,103 +12,155 @@ import 'mime/lite';
 import { stripNonNumeric } from '../utils/helpers/string.js';
 import '../utils/helpers/time.js';
 
-function BankAccountInput({
-  disabled = false,
-  edges = "normal",
-  errorMessage = "",
-  fullWidth = false,
-  helperText = "",
-  helperTextPlacement = "below",
-  hideLabel = false,
-  label = "",
-  name,
-  onChange,
-  onClear = void 0,
-  required = false,
-  showError = false,
-  value = void 0,
-  variant = "outlined"
-}) {
-  const bankRef = useRef(null);
-  const branchRef = useRef(null);
-  const accountRef = useRef(null);
-  const suffixRef = useRef(null);
-  const [bank, setBank] = useState(value && value.bank || "");
-  const [branch, setBranch] = useState(value && value.branch || "");
-  const [account, setAccount] = useState(value && value.account || "");
-  const [suffix, setSuffix] = useState(value && value.suffix || "");
-  const [focused, setFocused] = useState(false);
-  const valueStr = `${bank}${branch}${account}${suffix}`;
-  const handleFocus = () => {
+function BankAccountInput(_ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$edges = _ref.edges,
+    edges = _ref$edges === void 0 ? "normal" : _ref$edges,
+    _ref$errorMessage = _ref.errorMessage,
+    errorMessage = _ref$errorMessage === void 0 ? "" : _ref$errorMessage,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    _ref$helperText = _ref.helperText,
+    helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+    _ref$helperTextPlacem = _ref.helperTextPlacement,
+    helperTextPlacement = _ref$helperTextPlacem === void 0 ? "below" : _ref$helperTextPlacem,
+    _ref$hideLabel = _ref.hideLabel,
+    hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    name = _ref.name,
+    onChange = _ref.onChange,
+    _ref$onClear = _ref.onClear,
+    onClear = _ref$onClear === void 0 ? void 0 : _ref$onClear,
+    _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$value = _ref.value,
+    value = _ref$value === void 0 ? void 0 : _ref$value,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "outlined" : _ref$variant;
+  var bankRef = useRef(null);
+  var branchRef = useRef(null);
+  var accountRef = useRef(null);
+  var suffixRef = useRef(null);
+  var _useState = useState(value && value.bank || ""),
+    _useState2 = _slicedToArray(_useState, 2),
+    bank = _useState2[0],
+    setBank = _useState2[1];
+  var _useState3 = useState(value && value.branch || ""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    branch = _useState4[0],
+    setBranch = _useState4[1];
+  var _useState5 = useState(value && value.account || ""),
+    _useState6 = _slicedToArray(_useState5, 2),
+    account = _useState6[0],
+    setAccount = _useState6[1];
+  var _useState7 = useState(value && value.suffix || ""),
+    _useState8 = _slicedToArray(_useState7, 2),
+    suffix = _useState8[0],
+    setSuffix = _useState8[1];
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    focused = _useState0[0],
+    setFocused = _useState0[1];
+  var valueStr = "".concat(bank).concat(branch).concat(account).concat(suffix);
+  var handleFocus = function handleFocus() {
     setFocused(true);
   };
-  const handleBlur = () => {
+  var handleBlur = function handleBlur() {
     setFocused(false);
   };
-  const handleNextFieldFocus = (e) => {
-    const { target } = e;
-    if (target.id === `${name}_bank` && branch.length === 0) {
+  var handleNextFieldFocus = function handleNextFieldFocus(e) {
+    var target = e.target;
+    if (target.id === "".concat(name, "_bank") && branch.length === 0) {
       branchRef.current.focus();
-    } else if (target.id === `${name}_branch` && account.length === 0) {
+    } else if (target.id === "".concat(name, "_branch") && account.length === 0) {
       accountRef.current.focus();
-    } else if (target.id === `${name}_account` && suffix.length === 0) {
+    } else if (target.id === "".concat(name, "_account") && suffix.length === 0) {
       suffixRef.current.focus();
-    } else if (target.id === `${name}_suffix` && bank.length === 0) {
+    } else if (target.id === "".concat(name, "_suffix") && bank.length === 0) {
       bankRef.current.focus();
     }
   };
-  const handleClear = () => {
+  var handleClear = function handleClear() {
     setAccount("");
     setBank("");
     setBranch("");
     setSuffix("");
-    onClear({ account, bank, branch, suffix });
+    onClear({
+      account: account,
+      bank: bank,
+      branch: branch,
+      suffix: suffix
+    });
   };
-  const handleBankChange = (e) => {
-    const thisValue = stripNonNumeric(e.target.value);
+  var handleBankChange = function handleBankChange(e) {
+    var thisValue = stripNonNumeric(e.target.value);
     if (thisValue !== bank) {
-      onChange({ account, bank: thisValue, branch, suffix });
+      onChange({
+        account: account,
+        bank: thisValue,
+        branch: branch,
+        suffix: suffix
+      });
       setBank(thisValue);
       if (thisValue && isNumber(thisValue) && thisValue.length === 2) {
         handleNextFieldFocus(e);
       }
     }
   };
-  const handleBranchChange = (e) => {
-    const thisValue = stripNonNumeric(e.target.value);
+  var handleBranchChange = function handleBranchChange(e) {
+    var thisValue = stripNonNumeric(e.target.value);
     if (thisValue !== branch) {
-      onChange({ account, bank, branch: thisValue, suffix });
+      onChange({
+        account: account,
+        bank: bank,
+        branch: thisValue,
+        suffix: suffix
+      });
       setBranch(thisValue);
       if (thisValue && isNumber(thisValue) && thisValue.length === 4) {
         handleNextFieldFocus(e);
       }
     }
   };
-  const handleAccountChange = (e) => {
-    const thisValue = stripNonNumeric(e.target.value);
+  var handleAccountChange = function handleAccountChange(e) {
+    var thisValue = stripNonNumeric(e.target.value);
     if (thisValue !== account) {
-      onChange({ account: thisValue, bank, branch, suffix });
+      onChange({
+        account: thisValue,
+        bank: bank,
+        branch: branch,
+        suffix: suffix
+      });
       setAccount(thisValue);
       if (thisValue && isNumber(thisValue) && thisValue.length === 7) {
         handleNextFieldFocus(e);
       }
     }
   };
-  const handleSuffixChange = (e) => {
-    const thisValue = stripNonNumeric(e.target.value);
+  var handleSuffixChange = function handleSuffixChange(e) {
+    var thisValue = stripNonNumeric(e.target.value);
     if (thisValue !== suffix) {
-      onChange({ account, bank, branch, suffix: thisValue });
+      onChange({
+        account: account,
+        bank: bank,
+        branch: branch,
+        suffix: thisValue
+      });
       setSuffix(thisValue);
       if (thisValue && isNumber(thisValue) && thisValue.length === 3) {
         handleNextFieldFocus(e);
       }
     }
   };
-  const handlePaste = (e) => {
-    const text = (e.clipboardData || window.clipboardData).getData("text");
-    const sanitizedText = stripNonNumeric(text);
+  var handlePaste = function handlePaste(e) {
+    var text = (e.clipboardData || window.clipboardData).getData("text");
+    var sanitizedText = stripNonNumeric(text);
     if (bankRef.current.id === e.target.id && !bankRef.current.value) {
-      const values = {
+      var values = {
         bank: sanitizedText.slice(0, bankRef.current.maxLength),
         branch: sanitizedText.slice(2, 2 + branchRef.current.maxLength),
         account: sanitizedText.slice(6, 6 + accountRef.current.maxLength),
@@ -120,109 +173,87 @@ function BankAccountInput({
       setSuffix(values.suffix);
     }
   };
-  return /* @__PURE__ */ jsxs(StyledWrapper, { fullWidth, children: [
-    /* @__PURE__ */ jsxs(
-      FormControl,
-      {
-        fullWidth,
-        disabled,
-        name,
-        required,
-        label,
-        hideLabel,
-        helperText,
-        helperTextPlacement,
-        showError,
-        errorMessage,
-        edges,
-        children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "hidden",
-              name,
-              value: `${bank} ${branch} ${account} ${suffix}`
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            StyledInputWrapper,
-            {
-              disabled,
-              edges,
-              focused,
-              fullWidth,
-              required: required && valueStr.length < 15,
-              variant,
-              children: [
-                /* @__PURE__ */ jsx(
-                  StyledInput,
-                  {
-                    disabled,
-                    id: `${name}_bank`,
-                    fieldType: "bank",
-                    placeholder: "Bank",
-                    maxLength: "2",
-                    ref: bankRef,
-                    value: bank,
-                    onChange: handleBankChange,
-                    onFocus: handleFocus,
-                    onBlur: handleBlur,
-                    onPaste: handlePaste
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  StyledInput,
-                  {
-                    disabled,
-                    id: `${name}_branch`,
-                    fieldType: "branch",
-                    placeholder: "Branch",
-                    maxLength: "4",
-                    ref: branchRef,
-                    value: branch,
-                    onChange: handleBranchChange,
-                    onFocus: handleFocus,
-                    onBlur: handleBlur
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  StyledInput,
-                  {
-                    disabled,
-                    id: `${name}_account`,
-                    fieldType: "account",
-                    placeholder: "Account",
-                    maxLength: "7",
-                    ref: accountRef,
-                    value: account,
-                    onChange: handleAccountChange,
-                    onFocus: handleFocus,
-                    onBlur: handleBlur
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  StyledInput,
-                  {
-                    disabled,
-                    id: `${name}_suffix`,
-                    fieldType: "suffix",
-                    placeholder: "Suffix",
-                    maxLength: "3",
-                    ref: suffixRef,
-                    value: suffix,
-                    onChange: handleSuffixChange,
-                    onFocus: handleFocus,
-                    onBlur: handleBlur
-                  }
-                )
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    isFunction(onClear) && valueStr && /* @__PURE__ */ jsx(StyledIcon, { children: /* @__PURE__ */ jsx(IconButton, { onClick: handleClear, size: "small", color: "inherit", children: /* @__PURE__ */ jsx(CancelIcon, {}) }) })
-  ] });
+  return /* @__PURE__ */jsxs(StyledWrapper, {
+    fullWidth: fullWidth,
+    children: [/* @__PURE__ */jsxs(FormControl, {
+      fullWidth: fullWidth,
+      disabled: disabled,
+      name: name,
+      required: required,
+      label: label,
+      hideLabel: hideLabel,
+      helperText: helperText,
+      helperTextPlacement: helperTextPlacement,
+      showError: showError,
+      errorMessage: errorMessage,
+      edges: edges,
+      children: [/* @__PURE__ */jsx("input", {
+        type: "hidden",
+        name: name,
+        value: "".concat(bank, " ").concat(branch, " ").concat(account, " ").concat(suffix)
+      }), /* @__PURE__ */jsxs(StyledInputWrapper, {
+        disabled: disabled,
+        edges: edges,
+        focused: focused,
+        fullWidth: fullWidth,
+        required: required && valueStr.length < 15,
+        variant: variant,
+        children: [/* @__PURE__ */jsx(StyledInput, {
+          disabled: disabled,
+          id: "".concat(name, "_bank"),
+          fieldType: "bank",
+          placeholder: "Bank",
+          maxLength: "2",
+          ref: bankRef,
+          value: bank,
+          onChange: handleBankChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          onPaste: handlePaste
+        }), /* @__PURE__ */jsx(StyledInput, {
+          disabled: disabled,
+          id: "".concat(name, "_branch"),
+          fieldType: "branch",
+          placeholder: "Branch",
+          maxLength: "4",
+          ref: branchRef,
+          value: branch,
+          onChange: handleBranchChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur
+        }), /* @__PURE__ */jsx(StyledInput, {
+          disabled: disabled,
+          id: "".concat(name, "_account"),
+          fieldType: "account",
+          placeholder: "Account",
+          maxLength: "7",
+          ref: accountRef,
+          value: account,
+          onChange: handleAccountChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur
+        }), /* @__PURE__ */jsx(StyledInput, {
+          disabled: disabled,
+          id: "".concat(name, "_suffix"),
+          fieldType: "suffix",
+          placeholder: "Suffix",
+          maxLength: "3",
+          ref: suffixRef,
+          value: suffix,
+          onChange: handleSuffixChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur
+        })]
+      })]
+    }), isFunction(onClear) && valueStr && /* @__PURE__ */jsx(StyledIcon, {
+      children: /* @__PURE__ */jsx(IconButton, {
+        onClick: handleClear,
+        size: "small",
+        color: "inherit",
+        children: /* @__PURE__ */jsx(CancelIcon, {})
+      })
+    })]
+  });
 }
 BankAccountInput.propTypes = {
   /**

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

@@ -1,158 +1,33 @@
 "use strict";
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
 import styled, { css } from 'styled-components';
 
-const StyledWrapper = styled.div`
-  ${({ fullWidth }) => css`
-    display: inline-flex;
-    align-items: center;
-    ${fullWidth && css`
-      width: 100%;
-    `}
-  `}
-`;
-const StyledInputWrapper = styled.div`
-  ${({ disabled, edges, focused, fullWidth, required, theme, variant }) => css`
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 500;
-    font-size: 15px;
-    line-height: 1.4375em;
-    color: #394869;
-    position: relative;
-    cursor: text;
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    padding: 0.75rem 0;
-    width: ${fullWidth ? "100%" : "400px"};
-
-    ${!required && !focused && css`
-      border: 1px solid rgba(0, 0, 0, 0.23);
-    `}
-
-    ${required && !focused && css`
-      border: 1px solid ${theme.palette.secondary.main};
-    `}
-
-    ${!required && focused && css`
-      border: 1px solid ${theme.palette.primary.main};
-    `}
-
-      ${required && focused && css`
-      border: 1px solid ${theme.palette.secondary.main};
-    `}
-
-    ${edges === "sharp" && css`
-      border-radius: 0px;
-    `}
-
-    ${edges === "normal" && css`
-      border-radius: 5px;
-    `}
-
-    ${edges === "rounded" && css`
-      border-radius: 9999px;
-    `}
-
-    ${variant === "filled" && css`
-      background: rgba(140, 152, 178, 0.1);
-      border-color: rgba(140, 152, 178, 0.1);
-    `}
-
-    ${disabled && css`
-      background: rgba(140, 152, 178, 0.1);
-    `}
-  `}
-`;
-const StyledInput = styled.input.attrs({
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+var StyledWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var fullWidth = _ref.fullWidth;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: inline-flex;\n    align-items: center;\n    ", "\n  "])), fullWidth && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      width: 100%;\n    "]))));
+});
+var StyledInputWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref2) {
+  var disabled = _ref2.disabled,
+    edges = _ref2.edges,
+    focused = _ref2.focused,
+    fullWidth = _ref2.fullWidth,
+    required = _ref2.required,
+    theme = _ref2.theme,
+    variant = _ref2.variant;
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 500;\n    font-size: 15px;\n    line-height: 1.4375em;\n    color: #394869;\n    position: relative;\n    cursor: text;\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n    padding: 0.75rem 0;\n    width: ", ";\n\n    ", "\n\n    ", "\n\n    ", "\n\n      ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), fullWidth ? "100%" : "400px", !required && !focused && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      border: 1px solid rgba(0, 0, 0, 0.23);\n    "]))), required && !focused && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      border: 1px solid ", ";\n    "])), theme.palette.secondary.main), !required && focused && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      border: 1px solid ", ";\n    "])), theme.palette.primary.main), required && focused && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      border: 1px solid ", ";\n    "])), theme.palette.secondary.main), edges === "sharp" && css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n      border-radius: 0px;\n    "]))), edges === "normal" && css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n      border-radius: 5px;\n    "]))), edges === "rounded" && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      border-radius: 9999px;\n    "]))), variant === "filled" && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      background: rgba(140, 152, 178, 0.1);\n      border-color: rgba(140, 152, 178, 0.1);\n    "]))), disabled && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      background: rgba(140, 152, 178, 0.1);\n    "]))));
+});
+var StyledInput = styled.input.attrs({
   type: "text",
   autoComplete: "off",
   inputMode: "numeric"
-})`
-  ${({ fieldType }) => css`
-    height: 1.4375em;
-    -webkit-tap-highlight-color: transparent;
-    background: transparent;
-    letter-spacing: inherit;
-    color: currentColor;
-    box-sizing: content-box;
-    font: inherit;
-    border: none;
-    border-left: 1px solid rgba(0, 0, 0, 0.23);
-    padding: 0 1rem;
-    text-align: center;
-
-    ${fieldType === "bank" && css`
-      width: 15%;
-    `}
-
-    ${fieldType === "branch" && css`
-      width: 22%;
-    `}
-
-    ${fieldType === "account" && css`
-      width: 43%;
-    `}
-
-    ${fieldType === "suffix" && css`
-      width: 20%;
-    `}
-
-    &:focus,
-    &:active {
-      box-shadow: none;
-      outline: none;
-    }
-
-    &:first-child {
-      border: none;
-    }
-
-    &::-webkit-input-placeholder {
-      transition: opacity 200ms ease;
-    }
-
-    &::-moz-placeholder {
-      transition: opacity 200ms ease;
-    }
-
-    &:-ms-input-placeholder {
-      transition: opacity 200ms ease;
-    }
-
-    &:-moz-placeholder {
-      transition: opacity 200ms ease;
-    }
-
-    &:focus::-webkit-input-placeholder {
-      opacity: 0.4;
-    }
-
-    &:focus::-moz-placeholder {
-      opacity: 0.4;
-    }
-
-    &:focus:-ms-input-placeholder {
-      opacity: 0.4;
-    }
-
-    &:focus:-moz-placeholder {
-      opacity: 0.4;
-    }
-  `}
-`;
-const StyledIcon = styled.div`
-  ${({ theme }) => css`
-    color: ${theme.palette.grey[300]};
-    margin-left: 5px;
-    transition: color 200ms ease;
-    svg {
-      font-size: 1.15rem;
-    }
-
-    &:hover {
-      color: ${theme.palette.grey[400]};
-    }
-  `}
-`;
+})(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref3) {
+  var fieldType = _ref3.fieldType;
+  return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    height: 1.4375em;\n    -webkit-tap-highlight-color: transparent;\n    background: transparent;\n    letter-spacing: inherit;\n    color: currentColor;\n    box-sizing: content-box;\n    font: inherit;\n    border: none;\n    border-left: 1px solid rgba(0, 0, 0, 0.23);\n    padding: 0 1rem;\n    text-align: center;\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    &:focus,\n    &:active {\n      box-shadow: none;\n      outline: none;\n    }\n\n    &:first-child {\n      border: none;\n    }\n\n    &::-webkit-input-placeholder {\n      transition: opacity 200ms ease;\n    }\n\n    &::-moz-placeholder {\n      transition: opacity 200ms ease;\n    }\n\n    &:-ms-input-placeholder {\n      transition: opacity 200ms ease;\n    }\n\n    &:-moz-placeholder {\n      transition: opacity 200ms ease;\n    }\n\n    &:focus::-webkit-input-placeholder {\n      opacity: 0.4;\n    }\n\n    &:focus::-moz-placeholder {\n      opacity: 0.4;\n    }\n\n    &:focus:-ms-input-placeholder {\n      opacity: 0.4;\n    }\n\n    &:focus:-moz-placeholder {\n      opacity: 0.4;\n    }\n  "])), fieldType === "bank" && css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n      width: 15%;\n    "]))), fieldType === "branch" && css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n      width: 22%;\n    "]))), fieldType === "account" && css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n      width: 43%;\n    "]))), fieldType === "suffix" && css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n      width: 20%;\n    "]))));
+});
+var StyledIcon = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    color: ", ";\n    margin-left: 5px;\n    transition: color 200ms ease;\n    svg {\n      font-size: 1.15rem;\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  "])), theme.palette.grey[300], theme.palette.grey[400]);
+});
 
 export { StyledIcon, StyledInput, StyledInputWrapper, StyledWrapper };