chore: reformat code

2025-05-12 14:49:39 +01:00 · 2025-05-12 14:49:39 +01:00 · aedabcbdee
commit aedabcbdee
parent 3d930aa73b
509 changed files with 6030 additions and 4266 deletions
--- a/packages/admin-ui/src/components/Carousel.module.css
+++ b/packages/admin-ui/src/components/Carousel.module.css
@ -42,4 +42,4 @@

 .navButton:hover {
  background-color: rgba(0, 0, 0, 0.04);
-}
+}
--- a/packages/admin-ui/src/components/CollapsibleCard.jsx
+++ b/packages/admin-ui/src/components/CollapsibleCard.jsx
@ -7,7 +7,7 @@ import classnames from 'classnames'
 const cardState = Object.freeze({
  DEFAULT: 'default',
  SHRUNK: 'shrunk',
-  EXPANDED: 'expanded'
+  EXPANDED: 'expanded',
 })

 const CollapsibleCard = ({ className, state, shrunkComponent, children }) => {
@ -19,7 +19,7 @@ const CollapsibleCard = ({ className, state, shrunkComponent, children }) => {
 }

 CollapsibleCard.propTypes = {
-  shrunkComponent: PropTypes.node.isRequired
+  shrunkComponent: PropTypes.node.isRequired,
 }

 export default CollapsibleCard
--- a/packages/admin-ui/src/components/ConfirmDialog.jsx
+++ b/packages/admin-ui/src/components/ConfirmDialog.jsx
@ -101,5 +101,5 @@ export const ConfirmDialog = memo(
        </DialogActions>
      </Dialog>
    )
-  }
+  },
 )
--- a/packages/admin-ui/src/components/CopyToClipboard.jsx
+++ b/packages/admin-ui/src/components/CopyToClipboard.jsx
@ -14,7 +14,7 @@ const CopyToClipboard = ({
  buttonClassname,
  children,
  wrapperClassname,
-  removeSpace = true
+  removeSpace = true,
 }) => {
  const [anchorEl, setAnchorEl] = useState(null)

@ -68,7 +68,7 @@ const CopyToClipboard = ({
        </>
      )}
    </div>
-  );
+  )
 }

 export default CopyToClipboard
--- a/packages/admin-ui/src/components/DeleteDialog.jsx
+++ b/packages/admin-ui/src/components/DeleteDialog.jsx
@ -34,7 +34,7 @@ export const DeleteDialog = ({
  item = 'item',
  confirmationMessage = `Are you sure you want to delete this ${item}?`,
  extraMessage,
-  errorMessage = ''
+  errorMessage = '',
 }) => {
  return (
    <Dialog open={open} aria-labelledby="form-dialog-title">
--- a/packages/admin-ui/src/components/ImagePopper.jsx
+++ b/packages/admin-ui/src/components/ImagePopper.jsx
@ -50,7 +50,7 @@ const ImagePopper = memo(
        </div>
      </ClickAwayListener>
    )
-  }
+  },
 )

 export default ImagePopper
--- a/packages/admin-ui/src/components/InformativeDialog.jsx
+++ b/packages/admin-ui/src/components/InformativeDialog.jsx
@ -7,7 +7,7 @@ import { H1 } from 'src/components/typography'
 import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'

 export const InformativeDialog = memo(
-  ({ title = '', open, onDissmised, disabled = false, data, ...props }) => {
+  ({ title = '', open, onDissmised, data, ...props }) => {
    const innerOnClose = () => {
      onDissmised()
    }
@ -16,8 +16,8 @@ export const InformativeDialog = memo(
      <Dialog
        PaperProps={{
          style: {
-            borderRadius: 8
-          }
+            borderRadius: 8,
+          },
        }}
        fullWidth
        open={open}
@ -35,5 +35,5 @@ export const InformativeDialog = memo(
        <DialogContent>{data}</DialogContent>
      </Dialog>
    )
-  }
+  },
 )
--- a/packages/admin-ui/src/components/LogsDownloaderPopper.jsx
+++ b/packages/admin-ui/src/components/LogsDownloaderPopper.jsx
@ -15,7 +15,6 @@ import { formatDate } from 'src/utils/timezones'
 import Popper from './Popper'
 import DateRangePicker from './date-range-picker/DateRangePicker'
 import { RadioGroup } from './inputs'
-import typographyStyles from './typography/styles'
 import { H4, Info1, Label1, Label2 } from './typography/index.jsx'

 const DateContainer = ({ date, children }) => {
@ -31,7 +30,7 @@ const DateContainer = ({ date, children }) => {
            <div className="flex flex-col">
              <Label2 noMargin>{`${format(
                'MMM',
-                date
+                date,
              )} ${format('yyyy', date)}`}</Label2>
              <Label1 noMargin className="text-comet">
                {format('EEEE', date)}
@ -57,7 +56,7 @@ const LogsDownloaderPopover = ({
  getLogs,
  timezone,
  simplified,
-  className
+  className,
 }) => {
  const [selectedRadio, setSelectedRadio] = useState(ALL)
  const [selectedAdvancedRadio, setSelectedAdvancedRadio] = useState(ADVANCED)
@ -65,12 +64,12 @@ const LogsDownloaderPopover = ({
  const [range, setRange] = useState({ from: null, until: null })
  const [anchorEl, setAnchorEl] = useState(null)
  const [fetchLogs] = useLazyQuery(query, {
-    onCompleted: data => createLogsFile(getLogs(data), range)
+    onCompleted: data => createLogsFile(getLogs(data), range),
  })

  const dateRangePickerClasses = {
    'block h-full': selectedRadio === RANGE,
-    hidden: selectedRadio === ALL
+    hidden: selectedRadio === ALL,
  }

  const handleRadioButtons = evt => {
@ -88,7 +87,7 @@ const LogsDownloaderPopover = ({
    (from, until) => {
      setRange({ from, until })
    },
-    [setRange]
+    [setRange],
  )

  const downloadLogs = (range, args) => {
@ -97,8 +96,8 @@ const LogsDownloaderPopover = ({
        variables: {
          ...args,
          simplified: selectedAdvancedRadio === SIMPLIFIED,
-          excludeTestingCustomers: true
-        }
+          excludeTestingCustomers: true,
+        },
      })
    }

@ -112,8 +111,8 @@ const LogsDownloaderPopover = ({
          from: range.from,
          until: range.until,
          simplified: selectedAdvancedRadio === SIMPLIFIED,
-          excludeTestingCustomers: true
-        }
+          excludeTestingCustomers: true,
+        },
      })
    }
  }
@ -124,7 +123,7 @@ const LogsDownloaderPopover = ({
    }

    const blob = new window.Blob([logs], {
-      type: 'text/plain;charset=utf-8'
+      type: 'text/plain;charset=utf-8',
    })

    FileSaver.saveAs(
@ -132,8 +131,8 @@ const LogsDownloaderPopover = ({
      selectedRadio === ALL
        ? `${formatDateFile(new Date())}_${name}.csv`
        : `${formatDateFile(range.from)}_${formatDateFile(
-            range.until
-          )}_${name}.csv`
+            range.until,
+          )}_${name}.csv`,
    )
  }

@ -147,12 +146,12 @@ const LogsDownloaderPopover = ({

  const radioButtonOptions = [
    { display: 'All logs', code: ALL },
-    { display: 'Date range', code: RANGE }
+    { display: 'Date range', code: RANGE },
  ]

  const advancedRadioButtonOptions = [
    { display: 'Advanced logs', code: ADVANCED },
-    { display: 'Simplified logs', code: SIMPLIFIED }
+    { display: 'Simplified logs', code: SIMPLIFIED },
  ]

  const open = Boolean(anchorEl)
@ -201,9 +200,9 @@ const LogsDownloaderPopover = ({
                      hours: 23,
                      minutes: 59,
                      seconds: 59,
-                      milliseconds: 999
+                      milliseconds: 999,
                    },
-                    new Date()
+                    new Date(),
                  )}
                  onRangeChange={handleRangeChange}
                />
--- a/packages/admin-ui/src/components/Modal.jsx
+++ b/packages/admin-ui/src/components/Modal.jsx
@ -17,14 +17,12 @@ const Modal = ({
  infoPanel,
  handleClose,
  children,
-  secondaryModal,
  className,
  closeOnEscape,
  closeOnBackdropClick,
  ...props
 }) => {
  const TitleCase = small ? H4 : H1
-  const closeSize = xl ? 28 : small ? 16 : 20

  const innerClose = (evt, reason) => {
    if (!closeOnBackdropClick && reason === 'backdropClick') return
@ -44,7 +42,7 @@ const Modal = ({
          style={{ width, height, minHeight: height ?? 400 }}
          className={classnames(
            'flex flex-col max-h-[90vh] rounded-lg outline-0',
-            className
+            className,
          )}>
          <div className="flex">
            {title && (
@ -78,11 +76,11 @@ const Modal = ({
            style={{
              width,
              height: infoPanelHeight,
-              minHeight: infoPanelHeight ?? 200
+              minHeight: infoPanelHeight ?? 200,
            }}
            className={classnames(
              'mt-4 flex flex-col max-h-[90vh] overflow-y-auto rounded-lg outline-0',
-              className
+              className,
            )}>
            <div className="w-full flex flex-col flex-1 py-0 px-6">
              {infoPanel}
--- a/packages/admin-ui/src/components/NotificationCenter/NotificationCenter.jsx
+++ b/packages/admin-ui/src/components/NotificationCenter/NotificationCenter.jsx
@ -52,28 +52,28 @@ const NotificationCenter = ({
  hasUnreadProp,
  buttonCoords,
  popperRef,
-  refetchHasUnreadHeader
+  refetchHasUnreadHeader,
 }) => {
  const { data, loading } = useQuery(GET_NOTIFICATIONS, {
-    pollInterval: 60000
+    pollInterval: 60000,
  })
  const [xOffset, setXoffset] = useState(300)

  const [showingUnread, setShowingUnread] = useState(false)
  const machines = R.compose(
    R.map(R.prop('name')),
-    R.indexBy(R.prop('deviceId'))
+    R.indexBy(R.prop('deviceId')),
  )(R.path(['machines'])(data) ?? [])
  const notifications = R.path(['notifications'])(data) ?? []
  const [hasUnread, setHasUnread] = useState(hasUnreadProp)

  const [toggleClearNotification] = useMutation(TOGGLE_CLEAR_NOTIFICATION, {
    onError: () => console.error('Error while clearing notification'),
-    refetchQueries: () => ['getNotifications']
+    refetchQueries: () => ['getNotifications'],
  })
  const [clearAllNotifications] = useMutation(CLEAR_ALL_NOTIFICATIONS, {
    onError: () => console.error('Error while clearing all notifications'),
-    refetchQueries: () => ['getNotifications']
+    refetchQueries: () => ['getNotifications'],
  })

  useEffect(() => {
@ -103,7 +103,7 @@ const NotificationCenter = ({
          valid={n.valid}
          toggleClear={() =>
            toggleClearNotification({
-              variables: { id: n.id, read: !n.read }
+              variables: { id: n.id, read: !n.read },
            })
          }
        />
@ -121,7 +121,7 @@ const NotificationCenter = ({
            className={classes.notificationIcon}
            style={{
              top: buttonCoords?.y ?? 0,
-              left: buttonCoords?.x ? buttonCoords.x - xOffset : 0
+              left: buttonCoords?.x ? buttonCoords.x - xOffset : 0,
            }}>
            <NotificationIconZodiac />
            {hasUnread && <div className={classes.hasUnread} />}
--- a/packages/admin-ui/src/components/NotificationCenter/NotificationCenter.module.css
+++ b/packages/admin-ui/src/components/NotificationCenter/NotificationCenter.module.css
@ -6,8 +6,10 @@
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.24);
 }

-.container @media only screen and (max-width: 1920px) {
-  width: 30vw;
+@media only screen and (max-width: 1920px) {
+  .container {
+    width: 30vw;
+  }
 }

 .header {
@ -75,7 +77,7 @@
 }

 .unread {
-  background-color: var(--spring3)
+  background-color: var(--spring3);
 }

 .notificationRowIcon {
@ -83,11 +85,11 @@
 }

 .notificationRowIcon > * {
-  margin-left: 24px
+  margin-left: 24px;
 }

 .readIconWrapper {
-  flex-grow: 1
+  flex-grow: 1;
 }

 .unreadIcon {
@ -118,7 +120,7 @@
 }

 .notificationBody {
-  margin: 0
+  margin: 0;
 }

 .notificationSubtitle {
@ -142,4 +144,4 @@
  height: 9px;
  background-color: var(--spring);
  border-radius: 50%;
-}
+}
--- a/packages/admin-ui/src/components/NotificationCenter/NotificationRow.jsx
+++ b/packages/admin-ui/src/components/NotificationCenter/NotificationRow.jsx
@ -12,37 +12,36 @@ import classes from './NotificationCenter.module.css'
 const types = {
  transaction: {
    display: 'Transactions',
-    icon: <Transaction height={16} width={16} />
+    icon: <Transaction height={16} width={16} />,
  },
  highValueTransaction: {
    display: 'Transactions',
-    icon: <Transaction height={16} width={16} />
+    icon: <Transaction height={16} width={16} />,
  },
  fiatBalance: {
    display: 'Maintenance',
-    icon: <Wrench height={16} width={16} />
+    icon: <Wrench height={16} width={16} />,
  },
  cryptoBalance: {
    display: 'Maintenance',
-    icon: <Wrench height={16} width={16} />
+    icon: <Wrench height={16} width={16} />,
  },
  compliance: {
    display: 'Compliance',
-    icon: <WarningIcon height={16} width={16} />
+    icon: <WarningIcon height={16} width={16} />,
  },
-  error: { display: 'Error', icon: <WarningIcon height={16} width={16} /> }
+  error: { display: 'Error', icon: <WarningIcon height={16} width={16} /> },
 }

 const NotificationRow = ({
  id,
  type,
-  detail,
  message,
  deviceName,
  created,
  read,
  valid,
-  toggleClear
+  toggleClear,
 }) => {
  const typeDisplay = R.path([type, 'display'])(types) ?? null
  const icon = R.path([type, 'icon'])(types) ?? (
@ -50,7 +49,7 @@ const NotificationRow = ({
  )
  const age = prettyMs(new Date().getTime() - new Date(created).getTime(), {
    compact: true,
-    verbose: true
+    verbose: true,
  })
  const notificationTitle =
    typeDisplay && deviceName
@ -61,13 +60,13 @@ const NotificationRow = ({

  const iconClass = {
    [classes.readIcon]: read,
-    [classes.unreadIcon]: !read
+    [classes.unreadIcon]: !read,
  }
  return (
    <div
      className={classnames(
        classes.notificationRow,
-        !read && valid ? classes.unread : ''
+        !read && valid ? classes.unread : '',
      )}>
      <div className={classes.notificationRowIcon}>
        <div>{icon}</div>
--- a/packages/admin-ui/src/components/NotificationCenter/index.js
+++ b/packages/admin-ui/src/components/NotificationCenter/index.js
@ -1,2 +1,3 @@
 import NotificationCenter from './NotificationCenter'
+
 export default NotificationCenter
--- a/packages/admin-ui/src/components/Popper.jsx
+++ b/packages/admin-ui/src/components/Popper.jsx
@ -14,7 +14,7 @@ const Popover = ({ children, bgColor = white, className, ...props }) => {
    top: ['bottom'],
    bottom: ['top'],
    left: ['right'],
-    right: ['left']
+    right: ['left'],
  }

  const modifiers = [
@ -22,36 +22,36 @@ const Popover = ({ children, bgColor = white, className, ...props }) => {
      name: 'flip',
      enabled: R.defaultTo(false, props.flip),
      options: {
-        allowedAutoPlacements: flipPlacements[props.placement]
-      }
+        allowedAutoPlacements: flipPlacements[props.placement],
+      },
    },
    {
      name: 'preventOverflow',
      enabled: true,
      options: {
-        rootBoundary: 'scrollParent'
-      }
+        rootBoundary: 'scrollParent',
+      },
    },
    {
      name: 'offset',
      enabled: true,
      options: {
-        offset: [0, 10]
-      }
+        offset: [0, 10],
+      },
    },
    {
      name: 'arrow',
      enabled: R.defaultTo(true, props.showArrow),
      options: {
-        element: arrowRef
-      }
+        element: arrowRef,
+      },
    },
    {
      name: 'computeStyles',
      options: {
-        gpuAcceleration: false
-      }
-    }
+        gpuAcceleration: false,
+      },
+    },
  ]

  return (
--- a/packages/admin-ui/src/components/Popper.module.css
+++ b/packages/admin-ui/src/components/Popper.module.css
@ -30,4 +30,4 @@

 .tooltip[data-popper-placement^='right'] > div > span {
  left: -4px;
-}
+}
--- a/packages/admin-ui/src/components/SearchBox.jsx
+++ b/packages/admin-ui/src/components/SearchBox.jsx
@ -12,7 +12,6 @@ const SearchBox = memo(
    filters = [],
    options = [],
    inputPlaceholder = '',
-    size,
    onChange,
    ...props
  }) => {
@ -20,7 +19,7 @@ const SearchBox = memo(

    const inputClasses = {
      'flex flex-1 h-8 px-2 py-2 font-md items-center rounded-2xl bg-zircon text-comet': true,
-      'rounded-b-none': popupOpen
+      'rounded-b-none': popupOpen,
    }

    const innerOnChange = filters => onChange(filters)
@ -57,7 +56,7 @@ const SearchBox = memo(
              placeholder={inputPlaceholder}
              inputProps={{
                className: 'font-bold',
-                ...params.inputProps
+                ...params.inputProps,
              }}
            />
          )
@ -74,10 +73,11 @@ const SearchBox = memo(
              <div className="w-[88%] h-[1px] my-p mx-auto border-1 border-comet" />
              {children}
            </Paper>
-          )
-        }} />
-    );
-  }
+          ),
+        }}
+      />
+    )
+  },
 )

 export default SearchBox
--- a/packages/admin-ui/src/components/SearchFilter.jsx
+++ b/packages/admin-ui/src/components/SearchFilter.jsx
@ -12,7 +12,7 @@ const SearchFilter = ({
  filters,
  onFilterDelete,
  deleteAllFilters,
-  entries = 0
+  entries = 0,
 }) => {
  return (
    <>
@ -33,7 +33,7 @@ const SearchFilter = ({
            <Label3 className="text-comet m-auto mr-3">{`${entries} ${singularOrPlural(
              entries,
              `entry`,
-              `entries`
+              `entries`,
            )}`}</Label3>
          }
          <ActionButton
--- a/packages/admin-ui/src/components/Stepper.jsx
+++ b/packages/admin-ui/src/components/Stepper.jsx
@ -18,13 +18,13 @@ const Stepper = memo(({ steps, currentStep, color = 'spring', className }) => {
  const separatorClasses = {
    'w-7 h-[2px] border-2 z-1': true,
    'border-spring': color === 'spring',
-    'border-zodiac': color === 'zodiac'
+    'border-zodiac': color === 'zodiac',
  }

  const separatorEmptyClasses = {
    'w-7 h-[2px] border-2 z-1': true,
    'border-dust': color === 'spring',
-    'border-comet': color === 'zodiac'
+    'border-comet': color === 'zodiac',
  }

  return (
--- a/packages/admin-ui/src/components/Stepper.module.css
+++ b/packages/admin-ui/src/components/Stepper.module.css
@ -9,4 +9,4 @@
  height: 100%;
  width: 100%;
  overflow: visible;
-}
+}
--- a/packages/admin-ui/src/components/Subtitle.jsx
+++ b/packages/admin-ui/src/components/Subtitle.jsx
@ -6,7 +6,7 @@ import { TL1 } from './typography'
 const Subtitle = memo(({ children, className, extraMarginTop }) => {
  const classNames = {
    'text-comet my-4': true,
-    'mt-18': extraMarginTop
+    'mt-18': extraMarginTop,
  }

  return <TL1 className={classnames(classNames, className)}>{children}</TL1>
--- a/packages/admin-ui/src/components/Tooltip.jsx
+++ b/packages/admin-ui/src/components/Tooltip.jsx
@ -4,30 +4,6 @@ import React, { useState, memo } from 'react'
 import Popper from 'src/components/Popper'
 import HelpIcon from 'src/styling/icons/action/help/zodiac.svg?react'

-const useStyles = {
-  transparentButton: {
-    border: 'none',
-    backgroundColor: 'transparent',
-    outline: 'none',
-    cursor: 'pointer',
-    marginTop: 4
-  },
-  relativelyPositioned: {
-    position: 'relative'
-  },
-  safeSpace: {
-    position: 'absolute',
-    backgroundColor: '#0000',
-    height: 40,
-    left: '-50%',
-    width: '200%'
-  },
-  popoverContent: ({ width }) => ({
-    width,
-    padding: [[10, 15]]
-  })
-}
-
 const usePopperHandler = () => {
  const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null)

@ -50,7 +26,7 @@ const usePopperHandler = () => {
    helpPopperOpen,
    handleOpenHelpPopper,
    openHelpPopper,
-    handleCloseHelpPopper
+    handleCloseHelpPopper,
  }
 }

--- a/packages/admin-ui/src/components/booleanPropertiesTable/BooleanPropertiesTable.jsx
+++ b/packages/admin-ui/src/components/booleanPropertiesTable/BooleanPropertiesTable.jsx
@ -25,27 +25,27 @@ const BooleanPropertiesTable = memo(
    const [editing, setEditing] = useState(forcedEditing)

    const initialValues = R.fromPairs(
-      elements.map(it => [it.name, data[it.name]?.toString() ?? 'false'])
+      elements.map(it => [it.name, data[it.name]?.toString() ?? 'false']),
    )

    const validationSchema = Yup.object().shape(
      R.fromPairs(
        elements.map(it => [
          it.name,
-          Yup.mixed().oneOf(['true', 'false', true, false]).required()
-        ])
-      )
+          Yup.mixed().oneOf(['true', 'false', true, false]).required(),
+        ]),
+      ),
    )

    const innerSave = async values => {
-      const toBoolean = (num, _) => R.equals(num, 'true')
+      const toBoolean = num => R.equals(num, 'true')
      save(R.mapObjIndexed(toBoolean, R.filter(R.complement(R.isNil))(values)))
      setEditing(false)
    }

    const radioButtonOptions = [
      { display: 'Yes', code: 'true' },
-      { display: 'No', code: 'false' }
+      { display: 'No', code: 'false' },
    ]
    return (
      <div className="flex w-sm flex-col ">
@ -117,7 +117,7 @@ const BooleanPropertiesTable = memo(
        </Formik>
      </div>
    )
-  }
+  },
 )

 export default BooleanPropertiesTable
--- a/packages/admin-ui/src/components/buttons/ActionButton.jsx
+++ b/packages/admin-ui/src/components/buttons/ActionButton.jsx
@ -21,7 +21,7 @@ const ActionButton = memo(
      [moduleStyles.secondary]: color === 'secondary',
      [moduleStyles.spring]: color === 'spring',
      [moduleStyles.tomato]: color === 'tomato',
-      [moduleStyles.center]: center
+      [moduleStyles.center]: center,
    }

    return (
@ -35,7 +35,7 @@ const ActionButton = memo(
          <div
            className={classnames(
              moduleStyles.actionButtonIcon,
-              moduleStyles.actionButtonIconActive
+              moduleStyles.actionButtonIconActive,
            )}>
            <InverseIcon />
          </div>
@ -43,7 +43,7 @@ const ActionButton = memo(
        {children && <div>{children}</div>}
      </button>
    )
-  }
+  },
 )

 export default ActionButton
--- a/packages/admin-ui/src/components/buttons/BaseButton.styles.js
+++ b/packages/admin-ui/src/components/buttons/BaseButton.styles.js
@ -4,18 +4,18 @@ import {
  subheaderColor,
  subheaderDarkColor,
  offColor,
-  offDarkColor
+  offDarkColor,
 } from 'src/styling/variables'

 const colors = (color1, color2, color3) => {
  return {
    backgroundColor: color1,
    '&:hover': {
-      backgroundColor: color2
+      backgroundColor: color2,
    },
    '&:active': {
-      backgroundColor: color3
-    }
+      backgroundColor: color3,
+    },
  }
 }

@ -30,23 +30,23 @@ export default {
    height: buttonHeight,
    color: fontColor,
    '&:active': {
-      color: white
-    }
+      color: white,
+    },
  },
  primary: {
    extend: colors(subheaderColor, subheaderDarkColor, offColor),
    '&:active': {
      color: white,
      '& $buttonIcon': {
-        display: 'none'
+        display: 'none',
      },
      '& $buttonIconActive': {
-        display: 'block'
-      }
+        display: 'block',
+      },
    },
    '& $buttonIconActive': {
-      display: 'none'
-    }
+      display: 'none',
+    },
  },
  secondary: {
    extend: colors(offColor, offDarkColor, white),
@ -54,17 +54,17 @@ export default {
    '&:active': {
      color: fontColor,
      '& $buttonIcon': {
-        display: 'flex'
+        display: 'flex',
      },
      '& $buttonIconActive': {
-        display: 'none'
-      }
+        display: 'none',
+      },
    },
    '& $buttonIcon': {
-      display: 'none'
+      display: 'none',
    },
    '& $buttonIconActive': {
-      display: 'flex'
-    }
-  }
+      display: 'flex',
+    },
+  },
 }
--- a/packages/admin-ui/src/components/buttons/Button.jsx
+++ b/packages/admin-ui/src/components/buttons/Button.jsx
@ -29,15 +29,15 @@ const ActionButton = memo(
            'text-white',
            {
              [moduleStyles.buttonSm]: size === 'sm',
-              [moduleStyles.buttonXl]: size === 'xl'
-            }
+              [moduleStyles.buttonXl]: size === 'xl',
+            },
          )}
          {...props}>
          {children}
        </button>
      </div>
    )
-  }
+  },
 )

 export default ActionButton
--- a/packages/admin-ui/src/components/buttons/Button.module.css
+++ b/packages/admin-ui/src/components/buttons/Button.module.css
@ -14,13 +14,13 @@
 .buttonXl {
  composes: h1 from '../typography/typography.module.css';
  height: 61px;
-  border-radius: 15px
+  border-radius: 15px;
 }

 .buttonSm {
  height: 32px;
  padding: 0 16px;
-  border-radius: 8px
+  border-radius: 8px;
 }

 .button:disabled {
@ -46,4 +46,4 @@
  margin-top: 2px;
  background-color: var(--spring2);
  box-shadow: 0 2px var(--spring4);
-}
+}
--- a/packages/admin-ui/src/components/buttons/FeatureButton.jsx
+++ b/packages/admin-ui/src/components/buttons/FeatureButton.jsx
@ -11,7 +11,7 @@ const FeatureButton = memo(
          classes.baseButton,
          classes.roundButton,
          classes.primary,
-          className
+          className,
        )}
        {...props}>
        {Icon && (
@ -23,7 +23,7 @@ const FeatureButton = memo(
          <div
            className={classnames(
              classes.buttonIcon,
-              classes.buttonIconActive
+              classes.buttonIconActive,
            )}>
            <InverseIcon />
          </div>
@ -31,7 +31,7 @@ const FeatureButton = memo(
        {children}
      </button>
    )
-  }
+  },
 )

 export default FeatureButton
--- a/packages/admin-ui/src/components/buttons/IDButton.jsx
+++ b/packages/admin-ui/src/components/buttons/IDButton.jsx
@ -11,7 +11,6 @@ const IDButton = memo(
    className,
    Icon,
    InverseIcon,
-    popoverWidth = 152,
    children,
    popoverClassname,
    ...props
@ -25,11 +24,11 @@ const IDButton = memo(
      [classes.idButton]: true,
      [classes.primary]: true,
      [classes.open]: open,
-      [classes.closed]: !open
+      [classes.closed]: !open,
    }

    const iconClassNames = {
-      [classes.buttonIcon]: true
+      [classes.buttonIcon]: true,
    }

    const handleClick = event => {
@ -74,7 +73,7 @@ const IDButton = memo(
        </Popover>
      </>
    )
-  }
+  },
 )

 export default IDButton
--- a/packages/admin-ui/src/components/buttons/Link.jsx
+++ b/packages/admin-ui/src/components/buttons/Link.jsx
@ -10,7 +10,7 @@ const Link = memo(
      [classes.primary]: color === 'primary',
      [classes.secondary]: color === 'secondary',
      [classes.noColor]: color === 'noColor',
-      [classes.action]: color === 'action'
+      [classes.action]: color === 'action',
    }

    return (
@ -21,7 +21,7 @@ const Link = memo(
        {children}
      </button>
    )
-  }
+  },
 )

 export default Link
--- a/packages/admin-ui/src/components/buttons/Link.module.css
+++ b/packages/admin-ui/src/components/buttons/Link.module.css
@ -44,4 +44,4 @@
 .action:hover {
  box-shadow: none;
  background-color: rgba(72, 246, 148, 0.8);
-}
+}
--- a/packages/admin-ui/src/components/buttons/SubpageButton.jsx
+++ b/packages/admin-ui/src/components/buttons/SubpageButton.jsx
@ -12,14 +12,14 @@ const SubpageButton = memo(
    InverseIcon,
    toggle,
    forceDisable = false,
-    children
+    children,
  }) => {
    const [active, setActive] = useState(false)
    const isActive = forceDisable ? false : active
    const classNames = {
      [classes.button]: true,
      [classes.normal]: !isActive,
-      [classes.active]: isActive
+      [classes.active]: isActive,
    }

    const normalButton = <Icon className={classes.buttonIcon} />
@ -29,14 +29,14 @@ const SubpageButton = memo(
        <InverseIcon
          className={classnames(
            classes.buttonIcon,
-            classes.buttonIconActiveLeft
+            classes.buttonIconActiveLeft,
          )}
        />
        <H4 className="text-white">{children}</H4>
        <CancelIconInverse
          className={classnames(
            classes.buttonIcon,
-            classes.buttonIconActiveRight
+            classes.buttonIconActiveRight,
          )}
        />
      </>
@ -56,7 +56,7 @@ const SubpageButton = memo(
        {isActive ? activeButton : normalButton}
      </button>
    )
-  }
+  },
 )

 export default SubpageButton
--- a/packages/admin-ui/src/components/buttons/SubpageButton.module.css
+++ b/packages/admin-ui/src/components/buttons/SubpageButton.module.css
@ -27,7 +27,7 @@
 }

 .active:hover {
-   background-color: var(--comet);
+  background-color: var(--comet);
 }

 .buttonIcon {
--- a/packages/admin-ui/src/components/buttons/SubpageButton.styles.js
+++ b/packages/admin-ui/src/components/buttons/SubpageButton.styles.js
@ -8,10 +8,10 @@ export default {
    extend: baseButton,
    padding: 0,
    color: white,
-    borderRadius: baseButton.height / 2
+    borderRadius: baseButton.height / 2,
  },
  normalButton: {
-    width: baseButton.height
+    width: baseButton.height,
  },
  activeButton: {
    display: 'flex',
@ -21,26 +21,26 @@ export default {
    fontWeight: 'bold',
    padding: '0 5px',
    '&:hover': {
-      backgroundColor: offColor
-    }
+      backgroundColor: offColor,
+    },
  },
  buttonIcon: {
    width: 16,
    height: 16,
    overflow: 'visible',
    '& g': {
-      strokeWidth: 1.8
-    }
+      strokeWidth: 1.8,
+    },
  },
  buttonIconActiveLeft: {
    marginRight: 12,
-    marginLeft: 4
+    marginLeft: 4,
  },
  buttonIconActiveRight: {
    marginRight: 5,
-    marginLeft: 20
+    marginLeft: 20,
  },
  white: {
-    color: white
-  }
+    color: white,
+  },
 }
--- a/packages/admin-ui/src/components/buttons/index.js
+++ b/packages/admin-ui/src/components/buttons/index.js
@ -15,5 +15,5 @@ export {
  IDButton,
  AddButton,
  SupportLinkButton,
-  SubpageButton
+  SubpageButton,
 }
--- a/packages/admin-ui/src/components/date-range-picker/Calendar.jsx
+++ b/packages/admin-ui/src/components/date-range-picker/Calendar.jsx
@ -10,7 +10,7 @@ import {
  lastDayOfMonth,
  startOfMonth,
  startOfWeek,
-  sub
+  sub,
 } from 'date-fns/fp'
 import * as R from 'ramda'
 import React, { useState } from 'react'
@ -24,7 +24,7 @@ const Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {
  const [currentDisplayedMonth, setCurrentDisplayedMonth] = useState(new Date())

  const weekdays = Array.from(Array(7)).map((_, i) =>
-    format('EEEEE', add({ days: i }, startOfWeek(new Date())))
+    format('EEEEE', add({ days: i }, startOfWeek(new Date()))),
  )

  const monthLength = month => getDaysInMonth(month)
@ -33,21 +33,21 @@ const Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {
    const lastMonth = sub({ months: 1 }, month)
    const lastMonthRange = R.range(0, getDay(startOfMonth(month))).reverse()
    const lastMonthDays = R.map(i =>
-      sub({ days: i }, lastDayOfMonth(lastMonth))
+      sub({ days: i }, lastDayOfMonth(lastMonth)),
    )(lastMonthRange)

    const thisMonthRange = R.range(0, monthLength(month))
    const thisMonthDays = R.map(i => add({ days: i }, startOfMonth(month)))(
-      thisMonthRange
+      thisMonthRange,
    )

    const nextMonth = add({ months: 1 }, month)
    const nextMonthRange = R.range(
      0,
-      42 - lastMonthDays.length - thisMonthDays.length
+      42 - lastMonthDays.length - thisMonthDays.length,
    )
    const nextMonthDays = R.map(i => add({ days: i }, startOfMonth(nextMonth)))(
-      nextMonthRange
+      nextMonthRange,
    )

    return R.concat(R.concat(lastMonthDays, thisMonthDays), nextMonthDays)
@ -63,7 +63,7 @@ const Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {
        isSameMonth(minDate, prevMonth) ||
          differenceInMonths(minDate, prevMonth) > 0
          ? prevMonth
-          : currentDisplayedMonth
+          : currentDisplayedMonth,
      )
    }
  }
@ -75,7 +75,7 @@ const Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {
        isSameMonth(maxDate, nextMonth) ||
          differenceInMonths(nextMonth, maxDate) > 0
          ? nextMonth
-          : currentDisplayedMonth
+          : currentDisplayedMonth,
      )
    }
  }
@ -91,7 +91,7 @@ const Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {
        <span>
          {`${format('MMMM', currentDisplayedMonth)} ${format(
            'yyyy',
-            currentDisplayedMonth
+            currentDisplayedMonth,
          )}`}
        </span>
        <button
--- a/packages/admin-ui/src/components/date-range-picker/Calendar.module.css
+++ b/packages/admin-ui/src/components/date-range-picker/Calendar.module.css
@ -53,7 +53,7 @@
  padding-right: 5px;
 }

-.table th, 
+.table th,
 .table td {
  margin: 0;
  padding: 3px 0 3px 0;
@ -63,4 +63,4 @@
  font-size: 13px;
  font-family: var(--museo);
  font-weight: 700;
-}
+}
--- a/packages/admin-ui/src/components/date-range-picker/DateRangePicker.jsx
+++ b/packages/admin-ui/src/components/date-range-picker/DateRangePicker.jsx
@ -23,14 +23,14 @@ const DateRangePicker = ({ minDate, maxDate, className, onRangeChange }) => {
    if (from && !to) {
      if (differenceInDays(from, day) >= 0) {
        setTo(
-          set({ hours: 23, minutes: 59, seconds: 59, milliseconds: 999 }, day)
+          set({ hours: 23, minutes: 59, seconds: 59, milliseconds: 999 }, day),
        )
      } else {
        setTo(
          set(
            { hours: 23, minutes: 59, seconds: 59, milliseconds: 999 },
-            R.clone(from)
-          )
+            R.clone(from),
+          ),
        )
        setFrom(day)
      }
--- a/packages/admin-ui/src/components/date-range-picker/Tile.jsx
+++ b/packages/admin-ui/src/components/date-range-picker/Tile.jsx
@ -8,24 +8,24 @@ const Tile = ({
  isUpperBound,
  isBetween,
  isDisabled,
-  children
+  children,
 }) => {
  const selected = isLowerBound || isUpperBound

  const rangeClasses = {
    [classes.between]: isBetween && !(isLowerBound && isUpperBound),
    [classes.lowerBound]: isLowerBound && !isUpperBound,
-    [classes.upperBound]: isUpperBound && !isLowerBound
+    [classes.upperBound]: isUpperBound && !isLowerBound,
  }

  const buttonWrapperClasses = {
    [classes.wrapper]: true,
-    [classes.selected]: selected
+    [classes.selected]: selected,
  }

  const buttonClasses = {
    [classes.button]: true,
-    [classes.disabled]: isDisabled
+    [classes.disabled]: isDisabled,
  }

  return (
--- a/packages/admin-ui/src/components/editableTable/Header.jsx
+++ b/packages/admin-ui/src/components/editableTable/Header.jsx
@ -5,7 +5,7 @@ import {
  Td,
  THead,
  TDoubleLevelHead,
-  ThDoubleLevel
+  ThDoubleLevel,
 } from 'src/components/fake-table/Table'

 import { sentenceCase } from 'src/utils/string'
@ -24,11 +24,11 @@ const groupSecondHeader = elements => {
            {
              width: R.sum(R.map(R.prop('width'), group)),
              elements: group,
-              name: doubleHeader(group[0])
-            }
-          ]
+              name: doubleHeader(group[0]),
+            },
+          ],
    ),
-    R.reduce(R.concat, [])
+    R.reduce(R.concat, []),
  )

  return R.all(R.pipe(doubleHeader, R.isNil), elements)
@ -47,7 +47,7 @@ const Header = () => {
    enableToggle,
    toggleWidth,
    orderedBy,
-    DEFAULT_COL_SIZE
+    DEFAULT_COL_SIZE,
  } = useContext(TableCtx)

  const mapElement2 = (it, idx) => {
@ -66,11 +66,13 @@ const Header = () => {

  const mapElement = (
    { name, display, width = DEFAULT_COL_SIZE, header, textAlign },
-    idx
+    idx,
  ) => {
    const orderClasses = classnames({
      'whitespace-nowrap':
-        R.isNil(header) && !R.isNil(orderedBy) && R.equals(name, orderedBy.code)
+        R.isNil(header) &&
+        !R.isNil(orderedBy) &&
+        R.equals(name, orderedBy.code),
    })

    const attachOrderedByToComplexHeader = header => {
@ -82,6 +84,7 @@ const Header = () => {
          spanChild.props.children = R.append(' -', spanChild.props.children)
          return cloneHeader
        } catch (e) {
+          console.error(e)
          return header
        }
      }
--- a/packages/admin-ui/src/components/editableTable/NamespacedTable.jsx
+++ b/packages/admin-ui/src/components/editableTable/NamespacedTable.jsx
@ -18,7 +18,7 @@ const NamespacedTable = ({

  const innerData = R.map(it => ({
    id: it,
-    ...fromNamespace(it)(data)
+    ...fromNamespace(it)(data),
  }))(namespaces)

  return (
--- a/packages/admin-ui/src/components/editableTable/Row.jsx
+++ b/packages/admin-ui/src/components/editableTable/Row.jsx
@ -35,7 +35,7 @@ const ActionCol = ({ disabled, editing }) => {
    forceAdd,
    clearError,
    actionColSize,
-    error
+    error,
  } = useContext(TableCtx)

  const disableEdit = disabled || (disableRowEdit && disableRowEdit(values))
@ -136,10 +136,10 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
    PrefixComponent = Label2,
    suffix,
    SuffixComponent = Label2,
-    textStyle = it => {},
-    isHidden = it => false,
+    textStyle = () => {},
+    isHidden = () => false,
    view = it => it?.toString(),
-    inputProps = {}
+    inputProps = {},
  } = config

  const fields = names ?? [name]
@ -158,7 +158,7 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
    size,
    bold,
    textAlign: isEditing ? editingAlign : textAlign,
-    ...inputProps
+    ...inputProps,
  }

  const newAlign = isEditing ? editingAlign : textAlign
@ -174,7 +174,7 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
          className={{
            [moduleStyles.extraPaddingRight]: extraPaddingRight,
            [moduleStyles.extraPadding]: extraPadding,
-            'flex items-center': suffix || prefix
+            'flex items-center': suffix || prefix,
          }}
          width={width}
          size={size}
@ -225,7 +225,7 @@ const groupStriped = elements => {
  return R.insert(
    index,
    { width, editable: false, view: () => <StripesSvg /> },
-    noStripe
+    noStripe,
  )
 }

@ -238,7 +238,7 @@ const ERow = ({ editing, disabled, lastOfGroup, newRow }) => {
    error,
    enableToggle,
    rowSize,
-    stripeWhen
+    stripeWhen,
  } = useContext(TableCtx)

  const shouldStripe = !editing && stripeWhen && stripeWhen(values)
@ -255,11 +255,11 @@ const ERow = ({ editing, disabled, lastOfGroup, newRow }) => {
    : -1

  const elementToFocusIndex = innerElements.findIndex(
-    it => it.editable === undefined || it.editable
+    it => it.editable === undefined || it.editable,
  )

  const classNames = {
-    [moduleStyles.lastOfGroup]: lastOfGroup
+    [moduleStyles.lastOfGroup]: lastOfGroup,
  }

  const touchedErrors = R.pick(R.keys(touched), errors)
--- a/packages/admin-ui/src/components/editableTable/Row.module.css
+++ b/packages/admin-ui/src/components/editableTable/Row.module.css
@ -26,4 +26,4 @@
 .fields {
  display: flex;
  flex-direction: column;
-}
+}
--- a/packages/admin-ui/src/components/editableTable/Table.jsx
+++ b/packages/admin-ui/src/components/editableTable/Table.jsx
@ -19,7 +19,7 @@ const DEFAULT_COL_SIZE = 100

 const getWidth = R.compose(
  R.reduce(R.add)(0),
-  R.map(it => it.width ?? DEFAULT_COL_SIZE)
+  R.map(it => it.width ?? DEFAULT_COL_SIZE),
 )

 const ETable = ({
@ -54,7 +54,7 @@ const ETable = ({
  createText = 'Add override',
  forceAdd = false,
  tbodyWrapperClass,
-  orderedBy = null
+  orderedBy = null,
 }) => {
  const [editingId, setEditingId] = useState(null)
  const [adding, setAdding] = useState(false)
@ -80,6 +80,7 @@ const ETable = ({
      try {
        await save({ [name]: list }, it)
      } catch (err) {
+        console.error(err)
        setSaving(false)
        return
      }
@ -152,7 +153,7 @@ const ETable = ({
    stripeWhen,
    forceAdd,
    orderedBy,
-    DEFAULT_COL_SIZE
+    DEFAULT_COL_SIZE,
  }

  return (
--- a/packages/admin-ui/src/components/fake-table/Table.jsx
+++ b/packages/admin-ui/src/components/fake-table/Table.jsx
@ -35,20 +35,20 @@ const Td = ({
  size,
  bold,
  textAlign,
-  action
+  action,
 }) => {
  const inlineStyle = {
    ...style,
    width,
    textAlign,
-    fontSize: size === 'sm' ? '14px' : size === 'lg' ? '24px' : ''
+    fontSize: size === 'sm' ? '14px' : size === 'lg' ? '24px' : '',
  }

  const cssClasses = {
    [styles.td]: !header,
    [styles.tdHeader]: header,
    'font-bold': !header && (bold || size === 'lg'),
-    [styles.actionCol]: action
+    [styles.actionCol]: action,
  }

  return (
@ -88,21 +88,21 @@ const Tr = ({
  children,
  className,
  size,
-  newRow
+  newRow,
 }) => {
  const inlineStyle = {
-    minHeight: size === 'sm' ? '34px' : size === 'lg' ? '68px' : '48px'
+    minHeight: size === 'sm' ? '34px' : size === 'lg' ? '68px' : '48px',
  }
  const cardClasses = {
    [styles.card]: true,
    [styles.trError]: error,
-    [styles.trAdding]: newRow
+    [styles.trAdding]: newRow,
  }

  const mainContentClasses = {
    [styles.mainContent]: true,
    [styles.sizeSm]: size === 'sm',
-    [styles.sizeLg]: size === 'lg'
+    [styles.sizeLg]: size === 'lg',
  }

  return (
@ -141,5 +141,5 @@ export {
  Td,
  Th,
  ThDoubleLevel,
-  EditCell
+  EditCell,
 }
--- a/packages/admin-ui/src/components/inputs/base/Autocomplete.jsx
+++ b/packages/admin-ui/src/components/inputs/base/Autocomplete.jsx
@ -9,7 +9,6 @@ import { P } from 'src/components/typography'
 import TextInput from './TextInput'

 const Autocomplete = ({
-  optionsLimit = 5, // set limit = null for no limit
  limit,
  options,
  label,
@ -17,7 +16,6 @@ const Autocomplete = ({
  multiple,
  onChange,
  labelProp,
-  shouldStayOpen,
  value: outsideValue,
  error,
  fullWidth,
@ -61,11 +59,11 @@ const Autocomplete = ({
  const filterOptions = (array, { inputValue }) =>
    R.union(
      R.isEmpty(inputValue) ? valueArray() : [],
-      filter(array, inputValue)
+      filter(array, inputValue),
    ).slice(
      0,
      R.defaultTo(undefined)(limit) &&
-        Math.max(limit, R.isEmpty(inputValue) ? valueArray().length : 0)
+        Math.max(limit, R.isEmpty(inputValue) ? valueArray().length : 0),
    )

  return (
@ -105,7 +103,7 @@ const Autocomplete = ({
          'flex w-4 h-4 rounded-md': true,
          'bg-spring4': props.warning === 'clean',
          'bg-orange-yellow': props.warning === 'partial',
-          'bg-tomato': props.warning === 'important'
+          'bg-tomato': props.warning === 'important',
        }

        const hoverableElement = <div className={classnames(className)} />
@ -122,9 +120,10 @@ const Autocomplete = ({
        )
      }}
      slotProps={{
-        chip: { onDelete: null }
-      }} />
-  );
+        chip: { onDelete: null },
+      }}
+    />
+  )
 }

 export default Autocomplete
--- a/packages/admin-ui/src/components/inputs/base/CodeInput.jsx
+++ b/packages/admin-ui/src/components/inputs/base/CodeInput.jsx
@ -11,7 +11,7 @@ const CodeInput = ({
  numInputs,
  error,
  inputStyle,
-  containerStyle
+  containerStyle,
 }) => {
  return (
    <OtpInput
@ -26,7 +26,7 @@ const CodeInput = ({
        inputStyle,
        classes.input,
        'font-museo font-black text-4xl',
-        error && 'border-tomato'
+        error && 'border-tomato',
      )}
      inputType={'tel'}
      renderInput={props => <input {...props} />}
--- a/packages/admin-ui/src/components/inputs/base/Dropdown.jsx
+++ b/packages/admin-ui/src/components/inputs/base/Dropdown.jsx
@ -23,7 +23,7 @@ const Dropdown = ({ label, name, options, onChange, value, className }) => {
        ))}
      </Select>
    </FormControl>
-  );
+  )
 }

 export default Dropdown
--- a/packages/admin-ui/src/components/inputs/base/NumberInput.jsx
+++ b/packages/admin-ui/src/components/inputs/base/NumberInput.jsx
@ -18,7 +18,6 @@ const NumberInput = memo(
    bold,
    className,
    decimalPlaces,
-    InputProps,
    ...props
  }) => {
    return (
@ -41,14 +40,14 @@ const NumberInput = memo(
          onChange({
            target: {
              id: name,
-              value: values.floatValue
-            }
+              value: values.floatValue,
+            },
          })
        }}
        {...props}
      />
    )
-  }
+  },
 )

 export default NumberInput
--- a/packages/admin-ui/src/components/inputs/base/RadioGroup.jsx
+++ b/packages/admin-ui/src/components/inputs/base/RadioGroup.jsx
@ -13,7 +13,7 @@ const RadioGroup = ({
  onChange,
  className,
  labelClassName,
-  radioClassName
+  radioClassName,
 }) => {
  return (
    <>
--- a/packages/admin-ui/src/components/inputs/base/SecretInput.jsx
+++ b/packages/admin-ui/src/components/inputs/base/SecretInput.jsx
@ -29,7 +29,7 @@ const SecretInput = memo(
        placeholder={isPasswordFilled ? placeholder : ''}
      />
    )
-  }
+  },
 )

 export default SecretInput
--- a/packages/admin-ui/src/components/inputs/base/Select.jsx
+++ b/packages/admin-ui/src/components/inputs/base/Select.jsx
@ -7,20 +7,19 @@ import Arrowdown from 'src/styling/icons/action/arrow/regular.svg?react'
 import styles from './Select.module.css'

 function Select({ className, label, items, ...props }) {
-
  const {
    isOpen,
    selectedItem,
    getToggleButtonProps,
    getLabelProps,
    getMenuProps,
-    getItemProps
+    getItemProps,
  } = useSelect({
    items,
    selectedItem: props.selectedItem,
    onSelectedItemChange: item => {
      props.onSelectedItemChange(item.selectedItem)
-    }
+    },
  })

  const selectClassNames = {
@ -28,7 +27,7 @@ function Select({ className, label, items, ...props }) {
    [styles.selectFiltered]: props.defaultAsFilter
      ? true
      : !R.equals(selectedItem, props.default),
-    [styles.open]: isOpen
+    [styles.open]: isOpen,
  }

  return (
--- a/packages/admin-ui/src/components/inputs/base/Select.module.css
+++ b/packages/admin-ui/src/components/inputs/base/Select.module.css
@ -97,4 +97,4 @@

 .open button {
  border-radius: 8px 8px 0 0;
-}
+}
--- a/packages/admin-ui/src/components/inputs/base/TextInput.jsx
+++ b/packages/admin-ui/src/components/inputs/base/TextInput.jsx
@ -13,7 +13,6 @@ const TextInput = memo(
    onBlur,
    value,
    error,
-    suffix,
    textAlign,
    width,
    inputClasses,
@ -29,7 +28,7 @@ const TextInput = memo(

    const style = {
      width: width,
-      textAlign: textAlign
+      textAlign: textAlign,
    }

    const sizeClass =
@ -40,7 +39,7 @@ const TextInput = memo(
          : styles.size

    const divClass = {
-      [styles.bold]: bold
+      [styles.bold]: bold,
    }

    return (
@ -60,15 +59,16 @@ const TextInput = memo(
            classes: {
              root: sizeClass,
              underline: filled ? styles.underline : null,
-              input: inputClasses
+              input: inputClasses,
            },
-            ...InputProps
+            ...InputProps,
          },

-          htmlInput: { style: { textAlign } }
-        }} />
-    );
-  }
+          htmlInput: { style: { textAlign } },
+        }}
+      />
+    )
+  },
 )

 export default TextInput
--- a/packages/admin-ui/src/components/inputs/base/TextInput.module.css
+++ b/packages/admin-ui/src/components/inputs/base/TextInput.module.css
@ -21,4 +21,4 @@

 .underline:hover:not(.Mui-disabled)::before {
  border-bottom-color: var(--spring);
-}
+}
--- a/packages/admin-ui/src/components/inputs/base/index.js
+++ b/packages/admin-ui/src/components/inputs/base/index.js
@ -7,6 +7,7 @@ import RadioGroup from './RadioGroup'
 import SecretInput from './SecretInput'
 import TextInput from './TextInput'
 import ToggleButtonGroup from './ToggleButtonGroup'
+
 export {
  Checkbox,
  CodeInput,
@ -16,5 +17,5 @@ export {
  RadioGroup,
  Autocomplete,
  ToggleButtonGroup,
-  Dropdown
+  Dropdown,
 }
--- a/packages/admin-ui/src/components/inputs/cashbox/Cashbox.jsx
+++ b/packages/admin-ui/src/components/inputs/cashbox/Cashbox.jsx
@ -11,12 +11,12 @@ import { primaryColor as zodiac, tomato } from '../../../styling/variables.js'
 const colors = {
  cashOut: {
    empty: tomato,
-    full: zodiac
+    full: zodiac,
  },
  cashIn: {
    empty: zodiac,
-    full: tomato
-  }
+    full: tomato,
+  },
 }

 const Cashbox = ({
@ -28,7 +28,7 @@ const Cashbox = ({
  emptyPartClassName,
  labelClassName,
  omitInnerPercentage,
-  isLow
+  isLow,
 }) => {
  const ltHalf = percent <= 51
  const color =
@ -72,7 +72,7 @@ const CashIn = ({
  width,
  height,
  total,
-  omitInnerPercentage
+  omitInnerPercentage,
 }) => {
  const percent = (100 * notes) / capacity
  const isLow = percent < threshold
@ -117,7 +117,7 @@ const CashOut = ({
  threshold,
  width,
  height,
-  omitInnerPercentage
+  omitInnerPercentage,
 }) => {
  const percent = (100 * notes) / capacity
  const isLow = percent < threshold
@ -159,7 +159,7 @@ const CashOutLite = ({
  currency,
  notes,
  threshold,
-  width
+  width,
 }) => {
  const percent = (100 * notes) / capacity
  const isLow = percent < threshold
--- a/packages/admin-ui/src/components/inputs/cashbox/Cashbox.module.css
+++ b/packages/admin-ui/src/components/inputs/cashbox/Cashbox.module.css
@ -49,4 +49,4 @@
  border: 2px solid;
  text-align: end;
  display: inline-block;
-}
+}
--- a/packages/admin-ui/src/components/inputs/formik/CashCassetteInput.jsx
+++ b/packages/admin-ui/src/components/inputs/formik/CashCassetteInput.jsx
@ -33,7 +33,7 @@ const CashCassetteInput = memo(
        />
      </div>
    )
-  }
+  },
 )

 export default CashCassetteInput
--- a/packages/admin-ui/src/components/inputs/formik/Checkbox.jsx
+++ b/packages/admin-ui/src/components/inputs/formik/Checkbox.jsx
@ -3,20 +3,13 @@ import React, { memo } from 'react'
 import { Checkbox } from '../base'

 const CheckboxInput = memo(
-  ({
-    label,
-    textAlign,
-    fullWidth,
-    enabled = true,
-    disabledMessage = '',
-    ...props
-  }) => {
+  ({ label, enabled = true, disabledMessage = '', ...props }) => {
    const { name, onChange, value } = props.field

    const settings = {
      enabled: enabled,
      label: label,
-      disabledMessage: disabledMessage
+      disabledMessage: disabledMessage,
    }

    return (
@ -28,7 +21,7 @@ const CheckboxInput = memo(
        {...props}
      />
    )
-  }
+  },
 )

 export default CheckboxInput
--- a/packages/admin-ui/src/components/inputs/formik/index.js
+++ b/packages/admin-ui/src/components/inputs/formik/index.js
@ -15,5 +15,5 @@ export {
  SecretInput,
  RadioGroup,
  CashCassetteInput,
-  Dropdown
+  Dropdown,
 }
--- a/packages/admin-ui/src/components/inputs/index.js
+++ b/packages/admin-ui/src/components/inputs/index.js
@ -14,5 +14,5 @@ export {
  Select,
  RadioGroup,
  CashIn,
-  CashOut
+  CashOut,
 }
--- a/packages/admin-ui/src/components/layout/Header.jsx
+++ b/packages/admin-ui/src/components/layout/Header.jsx
@ -177,16 +177,16 @@ const Header = memo(({ tree, user }) => {
                      name: 'offset',
                      enabled: true,
                      options: {
-                        offset: ['100vw', '100vw']
-                      }
+                        offset: ['100vw', '100vw'],
+                      },
                    },
                    {
                      name: 'preventOverflow',
                      enabled: true,
                      options: {
-                        rootBoundary: 'viewport'
-                      }
-                    }
+                        rootBoundary: 'viewport',
+                      },
+                    },
                  ]}>
                  <NotificationCenter
                    popperRef={popperRef}
--- a/packages/admin-ui/src/components/layout/Header.module.css
+++ b/packages/admin-ui/src/components/layout/Header.module.css
@ -49,7 +49,7 @@
 }

 .li::after {
-  content: "";
+  content: '';
  display: block;
  background: white;
  width: 0;
--- a/packages/admin-ui/src/components/layout/Sidebar.jsx
+++ b/packages/admin-ui/src/components/layout/Sidebar.jsx
@ -14,7 +14,7 @@ const Sidebar = ({
  onClick,
  children,
  itemRender,
-  loading = false
+  loading = false,
 }) => {
  return (
    <div className={styles.sidebar}>
@ -30,7 +30,7 @@ const Sidebar = ({
                [styles.activeLink]: isSelected(it),
                [styles.customRenderActiveLink]: itemRender && isSelected(it),
                [styles.customRenderLink]: itemRender,
-                [styles.link]: true
+                [styles.link]: true,
              })}>
              {itemRender ? itemRender(it, isSelected(it)) : displayName(it)}
            </div>
@ -54,7 +54,7 @@ const Stepper = ({ step, it, idx, steps }) => {
        className={classnames({
          [styles.itemText]: true,
          [styles.itemTextActive]: active,
-          [styles.itemTextPast]: past
+          [styles.itemTextPast]: past,
        })}>
        {it.label}
      </span>
@ -65,7 +65,7 @@ const Stepper = ({ step, it, idx, steps }) => {
        <div
          className={classnames({
            [styles.stepperPath]: true,
-            [styles.stepperPast]: past
+            [styles.stepperPast]: past,
          })}></div>
      )}
    </div>
--- a/packages/admin-ui/src/components/layout/Sidebar.module.css
+++ b/packages/admin-ui/src/components/layout/Sidebar.module.css
@ -39,7 +39,7 @@
 }

 .link::after {
-  content: "";
+  content: '';
  display: block;
  background: var(--zodiac);
  width: 4px;
@ -103,4 +103,4 @@

 .stepperPast {
  border: 1px solid var(--zodiac);
-}
+}
--- a/packages/admin-ui/src/components/layout/TitleSection.jsx
+++ b/packages/admin-ui/src/components/layout/TitleSection.jsx
@ -15,13 +15,13 @@ const TitleSection = ({
  buttons = [],
  children,
  appendix,
-  appendixRight
+  appendixRight,
 }) => {
  return (
    <div
      className={classnames(
        'flex justify-between items-center flex-row',
-        className
+        className,
      )}>
      <div className="flex items-center">
        <Title>{title}</Title>
@ -44,7 +44,7 @@ const TitleSection = ({
                    {button.text}
                  </Info1>
                </SubpageButton>
-              )
+              ),
            )}
          </>
        )}
--- a/packages/admin-ui/src/components/machineActions/DiagnosticsModal.jsx
+++ b/packages/admin-ui/src/components/machineActions/DiagnosticsModal.jsx
@ -12,7 +12,7 @@ const STATES = {
  EMPTY: 'EMPTY',
  RUNNING: 'RUNNING',
  FAILURE: 'FAILURE',
-  FILLED: 'FILLED'
+  FILLED: 'FILLED',
 }

 const MACHINE = gql`
@ -47,7 +47,7 @@ const MACHINE_LOGS = gql`

 const createCsv = async ({ machineLogsCsv }) => {
  const machineLogs = new Blob([machineLogsCsv], {
-    type: 'text/plain;charset=utf-8'
+    type: 'text/plain;charset=utf-8',
  })

  FileSaver.saveAs(machineLogs, 'machineLogs.csv')
@ -59,11 +59,11 @@ const DiagnosticsModal = ({ onClose, deviceId, sendAction }) => {
  let timeout = null

  const [fetchSummary, { loading }] = useLazyQuery(MACHINE_LOGS, {
-    onCompleted: data => createCsv(data)
+    onCompleted: data => createCsv(data),
  })

  const { data, stopPolling, startPolling } = useQuery(MACHINE, {
-    variables: { deviceId }
+    variables: { deviceId },
  })

  useEffect(() => {
@ -168,8 +168,8 @@ const DiagnosticsModal = ({ onClose, deviceId, sendAction }) => {
              variables: {
                from: subMinutes(new Date(timestamp), 5),
                deviceId,
-                limit: 500
-              }
+                limit: 500,
+              },
            })
          }}
          className="mt-auto ml-auto mr-2 mb-0">
--- a/packages/admin-ui/src/components/machineActions/MachineActions.jsx
+++ b/packages/admin-ui/src/components/machineActions/MachineActions.jsx
@ -49,7 +49,7 @@ const isStaticState = machineState => {
    'unpaired',
    'maintenance',
    'virgin',
-    'wifiList'
+    'wifiList',
  ]
  return staticStates.includes(machineState)
 }
@ -73,7 +73,7 @@ const MachineActions = memo(({ machine, onActionSuccess }) => {

  const [fetchMachineEvents, { loading: loadingEvents }] = useLazyQuery(
    MACHINE,
-    preflightOptions
+    preflightOptions,
  )

  const [simpleMachineAction] = useMutation(MACHINE_ACTION)
@ -86,7 +86,7 @@ const MachineActions = memo(({ machine, onActionSuccess }) => {
    onCompleted: () => {
      onActionSuccess && onActionSuccess()
      setAction({ display: action.display, command: null })
-    }
+    },
  })

  const confirmDialogOpen = Boolean(action.command)
@ -100,7 +100,7 @@ const MachineActions = memo(({ machine, onActionSuccess }) => {
          ? warningMessage
          : null
        setAction({ ...actionToDo, message })
-      }
+      },
    })
    fetchMachineEvents()
  }
@ -118,7 +118,7 @@ const MachineActions = memo(({ machine, onActionSuccess }) => {
            setAction({
              command: 'rename',
              display: 'Rename',
-              confirmationMessage: 'Write the new name for this machine'
+              confirmationMessage: 'Write the new name for this machine',
            })
          }>
          Rename
@ -131,7 +131,7 @@ const MachineActions = memo(({ machine, onActionSuccess }) => {
          onClick={() =>
            setAction({
              command: 'unpair',
-              display: 'Unpair'
+              display: 'Unpair',
            })
          }>
          Unpair
@ -144,7 +144,7 @@ const MachineActions = memo(({ machine, onActionSuccess }) => {
          onClick={() =>
            setAction({
              command: 'reboot',
-              display: 'Reboot'
+              display: 'Reboot',
            })
          }>
          Reboot
@ -159,7 +159,7 @@ const MachineActions = memo(({ machine, onActionSuccess }) => {
              command: 'shutdown',
              display: 'Shutdown',
              message:
-                'In order to bring it back online, the machine will need to be visited and its power reset.'
+                'In order to bring it back online, the machine will need to be visited and its power reset.',
            })
          }>
          Shutdown
@ -172,7 +172,7 @@ const MachineActions = memo(({ machine, onActionSuccess }) => {
          onClick={() => {
            machineStatusPreflight({
              command: 'restartServices',
-              display: 'Restart services for'
+              display: 'Restart services for',
            })
          }}>
          Restart services
@ -188,7 +188,7 @@ const MachineActions = memo(({ machine, onActionSuccess }) => {
                command: 'emptyUnit',
                display: 'Empty',
                message:
-                  "Triggering this action will move all cash inside the machine towards its cashbox (if possible), allowing for the collection of cash from the machine via only its cashbox. Depending on how full the cash units are, it's possible that this action will need to be used more than once to ensure that the unit is left completely empty."
+                  "Triggering this action will move all cash inside the machine towards its cashbox (if possible), allowing for the collection of cash from the machine via only its cashbox. Depending on how full the cash units are, it's possible that this action will need to be used more than once to ensure that the unit is left completely empty.",
              })
            }}>
            Empty Unit
@ -205,7 +205,7 @@ const MachineActions = memo(({ machine, onActionSuccess }) => {
                command: 'refillUnit',
                display: 'Refill',
                message:
-                  'Triggering this action will refill the recyclers in this machine, by using bills present in its cassettes. This action may require manual operation of the cassettes and close attention to make sure that the denominations in the cassettes match the denominations in the recyclers.'
+                  'Triggering this action will refill the recyclers in this machine, by using bills present in its cassettes. This action may require manual operation of the cassettes and close attention to make sure that the denominations in the cassettes match the denominations in the recyclers.',
              })
            }}>
            Refill Unit
@ -228,8 +228,8 @@ const MachineActions = memo(({ machine, onActionSuccess }) => {
            simpleMachineAction({
              variables: {
                deviceId: machine.deviceId,
-                action: 'diagnostics'
-              }
+                action: 'diagnostics',
+              },
            })
          }
          deviceId={machine.deviceId}
@ -253,8 +253,8 @@ const MachineActions = memo(({ machine, onActionSuccess }) => {
            variables: {
              deviceId: machine.deviceId,
              action: `${action?.command}`,
-              ...(action?.command === 'rename' && { newName: value })
-            }
+              ...(action?.command === 'rename' && { newName: value }),
+            },
          })
        }}
        onDismissed={() => {
--- a/packages/admin-ui/src/components/single-row-table/SingleRowTable.jsx
+++ b/packages/admin-ui/src/components/single-row-table/SingleRowTable.jsx
@ -7,7 +7,7 @@ import {
  TBody,
  Td,
  Th,
-  Tr
+  Tr,
 } from 'src/components/fake-table/Table'
 import EditIcon from 'src/styling/icons/action/edit/white.svg?react'

@ -19,7 +19,7 @@ const SingleRowTable = ({
  title,
  items,
  onEdit,
-  className
+  className,
 }) => {
  return (
    <>
--- a/packages/admin-ui/src/components/table/EmptyTable.jsx
+++ b/packages/admin-ui/src/components/table/EmptyTable.jsx
@ -8,7 +8,7 @@ const EmptyTable = memo(({ message, className }) => {
    <div
      className={classNames(
        className,
-        'flex flex-col items-center w-full mt-13 text-sm font-bold font-museo'
+        'flex flex-col items-center w-full mt-13 text-sm font-bold font-museo',
      )}>
      <EmptyTableIcon />
      <H4>{message}</H4>
--- a/packages/admin-ui/src/components/table/Table.jsx
+++ b/packages/admin-ui/src/components/table/Table.jsx
@ -7,7 +7,7 @@ const Table = memo(({ className, children, ...props }) => {
      {...props}
      className={classnames(
        'table-fixed border-separate border-spacing-0',
-        className
+        className,
      )}>
      {children}
    </table>
--- a/packages/admin-ui/src/components/table/TableCell.jsx
+++ b/packages/admin-ui/src/components/table/TableCell.jsx
@ -7,7 +7,7 @@ const TableCell = memo(
  ({ colspan, rightAlign, className, children, ...props }) => {
    const styles = {
      [classes.tableCell]: true,
-      'text-right': rightAlign
+      'text-right': rightAlign,
    }

    return (
@ -18,7 +18,7 @@ const TableCell = memo(
        {children}
      </td>
    )
-  }
+  },
 )

 export default TableCell
--- a/packages/admin-ui/src/components/table/TableHeader.jsx
+++ b/packages/admin-ui/src/components/table/TableHeader.jsx
@ -5,7 +5,7 @@ const TableHeaderCell = memo(
  ({ rightAlign, children, className, ...props }) => {
    const styles = {
      'bg-zodiac text-white py-0 px-6 h-8 text-sm text-left': true,
-      'text-right': rightAlign
+      'text-right': rightAlign,
    }

    return (
@ -13,7 +13,7 @@ const TableHeaderCell = memo(
        {children}
      </th>
    )
-  }
+  },
 )

 export default TableHeaderCell
--- a/packages/admin-ui/src/components/table/TableRow.jsx
+++ b/packages/admin-ui/src/components/table/TableRow.jsx
@ -8,7 +8,7 @@ const TableRow = memo(
      'h-8': !header && size === 'sm',
      'h-9 font-bold text-base ': !header && size === 'lg',
      'bg-misty-rose': error,
-      'bg-spring3': success
+      'bg-spring3': success,
    }

    return (
@ -16,7 +16,7 @@ const TableRow = memo(
        {children}
      </tr>
    )
-  }
+  },
 )

 export default TableRow
--- a/packages/admin-ui/src/components/table/index.js
+++ b/packages/admin-ui/src/components/table/index.js
@ -15,5 +15,5 @@ export {
  TableHead,
  TableHeader,
  TableRow,
-  TableBody
+  TableBody,
 }
--- a/packages/admin-ui/src/components/tables/DataTable.jsx
+++ b/packages/admin-ui/src/components/tables/DataTable.jsx
@ -5,7 +5,7 @@ import {
  AutoSizer,
  List,
  CellMeasurer,
-  CellMeasurerCache
+  CellMeasurerCache,
 } from 'react-virtualized'
 import {
  Table,
@ -13,7 +13,7 @@ import {
  THead,
  Tr,
  Td,
-  Th
+  Th,
 } from 'src/components/fake-table/Table'
 import { H4 } from 'src/components/typography'
 import ExpandClosedIcon from 'src/styling/icons/action/expand/closed.svg?react'
@ -40,7 +40,7 @@ const Row = ({
  const trClasses = {
    'cursor-pointer': hasPointer,
    'border-2 border-transparent': true,
-    'border-2 border-zircon shadow-md': expanded
+    'border-2 border-zircon shadow-md': expanded,
  }

  return (
@ -79,7 +79,7 @@ const Row = ({
        <div className="pb-3">
          <Tr
            className={classnames({
-              'border-2 border-zircon shadow-md': expanded
+              'border-2 border-zircon shadow-md': expanded,
            })}>
            <Td width={width}>
              <Details it={data} timezone={props.timezone} />
@ -126,7 +126,7 @@ const DataTable = ({

  const cache = new CellMeasurerCache({
    defaultHeight: 58,
-    fixedWidth: true
+    fixedWidth: true,
  })

  function rowRenderer({ index, key, parent, style }) {
@ -168,12 +168,12 @@ const DataTable = ({
    <div
      className={classnames({
        'flex flex-1 flex-col': true,
-        [className]: !!className
+        [className]: !!className,
      })}>
      <Table
        className={classnames(
          'mb-12 min-h-50 flex-1 flex flex-col',
-          tableClassName
+          tableClassName,
        )}
        style={{ width }}>
        <THead>
--- a/packages/admin-ui/src/components/typography/index.jsx
+++ b/packages/admin-ui/src/components/typography/index.jsx
@ -7,7 +7,7 @@ function H1({ children, noMargin, className, ...props }) {
  const classNames = {
    [styles.h1]: true,
    [styles.noMargin]: noMargin,
-    [className]: !!className
+    [className]: !!className,
  }

  return (
@ -21,7 +21,7 @@ function H2({ children, noMargin, className, ...props }) {
  const classNames = {
    [styles.h2]: true,
    [styles.noMargin]: noMargin,
-    [className]: !!className
+    [className]: !!className,
  }

  return (
@ -35,7 +35,7 @@ function H3({ children, noMargin, className, ...props }) {
  const classNames = {
    [styles.h3]: true,
    [styles.noMargin]: noMargin,
-    [className]: !!className
+    [className]: !!className,
  }

  return (
@ -49,7 +49,7 @@ function H4({ children, noMargin, className, ...props }) {
  const classNames = {
    [styles.h4]: true,
    [styles.noMargin]: noMargin,
-    [className]: !!className
+    [className]: !!className,
  }

  return (
@ -63,7 +63,7 @@ function H5({ children, noMargin, className, ...props }) {
  const classNames = {
    [styles.h5]: true,
    [styles.noMargin]: noMargin,
-    [className]: !!className
+    [className]: !!className,
  }

  return (
@ -90,7 +90,7 @@ function pBuilder(elementClass) {
      [className]: !!className,
      [styles[elementClass]]: elementClass,
      [styles.inline]: inline,
-      [styles.noMargin]: noMargin
+      [styles.noMargin]: noMargin,
    }
    return (
      <p className={classnames(classNames)} {...props}>
@ -115,5 +115,5 @@ export {
  Mono,
  Label1,
  Label2,
-  Label3
+  Label3,
 }
--- a/packages/admin-ui/src/components/typography/styles.js
+++ b/packages/admin-ui/src/components/typography/styles.js
@ -7,132 +7,132 @@ import {
  fontSize5,
  fontPrimary,
  fontSecondary,
-  fontMonospaced
+  fontMonospaced,
 } from 'src/styling/variables'

 const base = {
  lineHeight: '120%',
-  color: fontColor
+  color: fontColor,
 }

 export default {
  base: {
    lineHeight: '120%',
-    color: fontColor
+    color: fontColor,
  },
  h1: {
    extend: base,
    fontSize: fontSize1,
    fontFamily: fontPrimary,
-    fontWeight: 900
+    fontWeight: 900,
  },
  h2: {
    extend: base,
    fontSize: fontSize2,
    fontFamily: fontPrimary,
-    fontWeight: 900
+    fontWeight: 900,
  },
  h3: {
    extend: base,
    fontSize: fontSize4,
    fontFamily: fontPrimary,
-    fontWeight: 900
+    fontWeight: 900,
  },
  h4: {
    extend: base,
    fontSize: fontSize4,
    fontFamily: fontPrimary,
-    fontWeight: 700
+    fontWeight: 700,
  },
  h5: {
    extend: base,
    fontSize: fontSize3,
    fontFamily: fontPrimary,
-    fontWeight: 700
+    fontWeight: 700,
  },
  p: {
    ...base,
    fontSize: fontSize4,
    fontFamily: fontSecondary,
-    fontWeight: 500
+    fontWeight: 500,
  },
  tl1: {
    extend: base,
    fontSize: fontSize2,
    fontFamily: fontSecondary,
-    fontWeight: 700
+    fontWeight: 700,
  },
  tl2: {
    extend: base,
    fontSize: fontSize4,
    fontFamily: fontSecondary,
-    fontWeight: 700
+    fontWeight: 700,
  },
  info1: {
    extend: base,
    fontSize: fontSize1,
    fontFamily: fontSecondary,
-    fontWeight: 700
+    fontWeight: 700,
  },
  info2: {
    extend: base,
    fontSize: fontSize3,
    fontFamily: fontSecondary,
-    fontWeight: 700
+    fontWeight: 700,
  },
  info3: {
    extend: base,
    fontSize: fontSize3,
    fontFamily: fontSecondary,
-    fontWeight: 500
+    fontWeight: 500,
  },
  mono: {
    extend: base,
    fontSize: fontSize4,
    fontFamily: fontMonospaced,
-    fontWeight: 500
+    fontWeight: 500,
  },
  monoBold: {
-    fontWeight: 700
+    fontWeight: 700,
  },
  monoSmall: {
-    fontSize: fontSize5
+    fontSize: fontSize5,
  },
  inputFont: {
    fontSize: fontSize2,
    fontFamily: fontSecondary,
    fontWeight: 500,
    lineHeight: '110%',
-    color: fontColor
+    color: fontColor,
  },
  regularLabel: {
    fontSize: fontSize4,
    fontFamily: fontSecondary,
    fontWeight: 500,
-    lineHeight: '110%'
+    lineHeight: '110%',
  },
  label1: {
    fontSize: fontSize5,
    fontFamily: fontSecondary,
    fontWeight: 500,
-    color: fontColor
+    color: fontColor,
  },
  label2: {
    fontSize: fontSize5,
    fontFamily: fontSecondary,
    fontWeight: 700,
-    color: fontColor
+    color: fontColor,
  },
  label3: {
    fontSize: fontSize4,
    fontFamily: fontSecondary,
    fontWeight: 500,
-    color: fontColor
+    color: fontColor,
  },
  inline: {
-    display: 'inline'
+    display: 'inline',
  },
  noMargin: {
-    margin: 0
-  }
+    margin: 0,
+  },
 }