How to use the cozy-ui/transpiled/react.withBreakpoints function in cozy-ui

import React from 'react'
import { translate, withBreakpoints } from 'cozy-ui/transpiled/react'
import { withDispatch } from 'utils'
import { flowRight as compose } from 'lodash'
import NewAccountSettings from './NewAccountSettings'

const AccountSettings = function(props) {
  return 
}

export default compose(
  withDispatch,
  translate(),
  withBreakpoints()
)(AccountSettings)

)
  }
}

function mapStateToProps(state) {
  return {
    filteringDoc: state.filters.filteringDoc
  }
}

const ReimbursementsPage = compose(
  withBreakpoints(),
  connect(mapStateToProps)
)(RawReimbursementsPage)
export default ReimbursementsPage

)
}

const AccountSettingsForm = compose(
  withBreakpoints(),
  translate()
)(DumbAccountSettingsForm)

const FormControls = props => {
  const { t } = useI18n()
  const { onCancel, form, className, ...rest } = props

  return (
    <div>
      <button label="{t('General.cancel')}">
      </button></div>

)
  }
}

SelectDates.defaultProps = {
  options: getDefaultOptions()
}

SelectDates.propTypes = {
  onChange: PropTypes.func.isRequired
}

export default compose(
  translate(),
  scrollAware,
  withBreakpoints(),
  themed
)(SelectDates)

pointFillColor="white"
          pointStrokeColor="rgba(255, 255, 255, 0.3)"
          getTooltipContent={this.getTooltipContent}
          data={data}
          width={width}
          height={height}
          {...this.props}
        />
      
    )
  }
}

const EnhancedHistoryChart = compose(
  withRouter,
  withBreakpoints(),
  translate()
)(HistoryChart)

export const ConnectedHistoryChart = compose(
  withRouter,
  connect((state, ownProps) => ({
    data: getChartData(state, ownProps)
  })),
  withBreakpoints(),
  translate()
)(HistoryChart)

export default EnhancedHistoryChart

const mapStateToProps = (state, ownProps) => {
  const filteredTransactions = onSubcategory(ownProps)
    ? getFilteredTransactions(state, ownProps)
    : getTransactionsFilteredByAccount(state)

  return {
    filteringDoc: getFilteringDoc(state),
    filteredTransactions: filteredTransactions
  }
}

export const DumbTransactionsPage = TransactionsPage
export const UnpluggedTransactionsPage = compose(
  withRouter,
  translate(),
  withBreakpoints()
)(TransactionsPage)

UnpluggedTransactionsPage.propTypes = {
  filteredTransactions: PropTypes.array.isRequired
}

const ConnectedTransactionsPage = compose(
  withRouter,
  queryConnect({
    accounts: accountsConn,
    groups: groupsConn,
    triggers: triggersConn,
    transactions: transactionsConn
  }),
  connect(mapStateToProps)
)(UnpluggedTransactionsPage)

{children}
      {__TARGET__ === 'mobile' && (
        
          
        
      )}
    
  )
}

export default compose(
  withRouter,
  flag.connect,
  withBreakpoints()
)(Settings)

) : (
          
        )}
      
    )
  }
}

History.propTypes = {
  accounts: PropTypes.array.isRequired,
  className: PropTypes.string,
  transactions: PropTypes.object.isRequired
}

export default compose(
  withBreakpoints(),
  withSize()
)(History)

getIcon: ({ transaction }) => {
    const color = isPending(transaction)
      ? palette.pomegranate
      : palette.dodgerBlue

    return 
  },
  match: transaction => {
    return (
      isHealthExpense(transaction) &&
      getVendors(transaction) &&
      !flag('reimbursements.tag')
    )
  },
  Component: compose(
    withBreakpoints(),
    translate()
  )(Component)
}

export default action

)}
        
          {transactions.length > 0 && (
            
          )}
        
      
    )
  }
}

export default compose(
  withRouter,
  withBreakpoints(),
  withSize(),
  translate()
)(TransactionHeader)