@motech-development/breeze-ui 2.3.1 → 3.0.0

package/lib/index.esm.js

@@ -1,2846 +0,0 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { faTimes, faAngleDoubleLeft, faAngleLeft, faAngleRight, faAngleDoubleRight, faExclamation, faCalendar, faBell, faAsterisk, faAngleDown, faExclamationCircle, faCheckCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useRef, useState, useEffect, Suspense, Children, createContext, useContext, useCallback, useMemo } from 'react';
-import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
-import reset from 'styled-reset';
-import { darken, rgba } from 'polished';
-import { DateTime as DateTime$1, Info } from 'luxon';
-import { getIn, Field, Formik, Form as Form$1 } from 'formik';
-import { Manager, Reference, Popper, usePopper } from 'react-popper';
-import { Link as Link$1, useLocation } from 'react-router-dom';
-import { createPortal } from 'react-dom';
-import { PatternFormat, NumericFormat } from 'react-number-format';
-
-const alertTheme = {
-    danger: {
-        background: 'rgb(199,56,79)',
-        colour: '#fff'
-    },
-    primary: {
-        background: '#007fa8',
-        colour: '#fff'
-    },
-    secondary: {
-        background: '#f6f9fc',
-        colour: '#333'
-    },
-    success: {
-        background: 'rgb(0,128,93)',
-        colour: '#fff'
-    }
-};
-const BaseAlert = styled.div`
-  ${({ $colour, $icon, $spacing, theme })=>`
-    background-color: ${theme[$colour].background};
-    color: ${theme[$colour].colour};
-    margin-bottom: ${(()=>{
-        switch($spacing){
-            case 'lg':
-                return '20px';
-            case 'md':
-                return '10px';
-            default:
-                return '5px';
-        }
-    })()};
-    padding: 12px 56px 12px ${$icon ? '56px' : '20px'};
-    position: relative;
-  `}
-`;
-const AlertIconWrapper = styled.div`
-  left: 20px;
-  position: absolute;
-  top: 12px;
-`;
-const AlertDismissButton = styled.button`
-  ${({ $colour, theme })=>`
-    appearance: none;
-    background-color: ${theme[$colour].background};
-    border: 0;
-    color: ${theme[$colour].colour};
-    cursor: pointer;
-    font-size: inherit;
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    right: 20px;
-    top: 12px;
-  `}
-`;
-const Alert = ({ colour = 'primary', dismissable = false, icon, message, spacing = 'md', onDismiss })=>{
-    const renderCheck = process.env.NODE_ENV === 'development' ? 2 : 1;
-    const renderCount = useRef(0);
-    const [visible, setVisiblity] = useState(true);
-    const dismiss = ()=>{
-        setVisiblity(false);
-        if (onDismiss) {
-            onDismiss();
-        }
-    };
-    useEffect(()=>{
-        renderCount.current += 1;
-    }, []);
-    useEffect(()=>()=>{
-            if (renderCount.current >= renderCheck) {
-                setVisiblity(false);
-            }
-        }, // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    useEffect(()=>{
-        let timeout;
-        if (typeof dismissable === 'number') {
-            timeout = setTimeout(dismiss, dismissable);
-        }
-        return ()=>{
-            if (timeout) {
-                clearTimeout(timeout);
-            }
-        };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    if (visible) {
-        return /*#__PURE__*/ jsx(ThemeProvider, {
-            theme: alertTheme,
-            children: /*#__PURE__*/ jsxs(BaseAlert, {
-                role: "alert",
-                $colour: colour,
-                $icon: !!icon,
-                $spacing: spacing,
-                children: [
-                    icon && /*#__PURE__*/ jsx(AlertIconWrapper, {
-                        children: icon
-                    }),
-                    message,
-                    dismissable && /*#__PURE__*/ jsx(AlertDismissButton, {
-                        type: "button",
-                        "aria-label": "Dismiss",
-                        $colour: colour,
-                        onClick: dismiss,
-                        children: /*#__PURE__*/ jsx(FontAwesomeIcon, {
-                            icon: faTimes
-                        })
-                    })
-                ]
-            })
-        });
-    }
-    return null;
-};
-
-const AppBarInner = styled.div`
-  align-items: center;
-  display: flex;
-  min-height: 64px;
-  padding: 0 1rem;
-`;
-const AppBarToolbar = styled.header`
-  ${({ $colour, theme })=>`
-    background-color: ${theme[$colour].background};
-    border-bottom: 1px solid ${theme[$colour].border};
-    box-sizing: border-box;
-    color: ${theme[$colour].colour};
-    display: flex;
-    flex-direction: column;
-    flex-shrink: 0;
-    user-select: none;
-    width: 100%;
-    z-index: 1100;
-  `}
-`;
-const appBarTheme = {
-    primary: {
-        background: '#161616',
-        border: '#222',
-        colour: '#fff'
-    },
-    secondary: {
-        background: '#f6f9fc',
-        border: '#ccc',
-        colour: '#333'
-    }
-};
-const AppBarBase = styled.div`
-  ${({ $fixed })=>`
-    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14),
-      0 1px 14px 0 rgba(0, 0, 0, 0.12);
-    flex-grow: 1;
-    left: 0;
-    position: ${$fixed ? 'fixed' : 'relative'};
-    top: 0;
-    width: 100%;
-    z-index: 10;
-  `}
-`;
-const AppBar = ({ children, colour = 'primary', element = 'header', fixed = false })=>/*#__PURE__*/ jsx(ThemeProvider, {
-        theme: appBarTheme,
-        children: /*#__PURE__*/ jsx(AppBarBase, {
-            $fixed: fixed,
-            children: /*#__PURE__*/ jsx(AppBarToolbar, {
-                as: element,
-                $colour: colour,
-                children: /*#__PURE__*/ jsx(AppBarInner, {
-                    children: children
-                })
-            })
-        })
-    });
-
-const Image = styled.img`
-  ${({ $width })=>`
-    display: block;
-    width: ${$width ? `${$width}px` : 'auto'};
-  `}
-`;
-const Wrapper$5 = styled.div`
-  ${({ $width })=>`
-    border-radius: 50%;
-    display: inline-block;
-    overflow: hidden;
-    width: ${$width ? `${$width}px` : 'auto'};
-
-    ${$width ? `min-width: ${$width}px` : ''}
-  `}
-`;
-const Avatar = ({ alt, src, width = 0 })=>/*#__PURE__*/ jsx(Wrapper$5, {
-        $width: width,
-        children: /*#__PURE__*/ jsx(Image, {
-            alt: alt,
-            src: src,
-            $width: width
-        })
-    });
-
-const BaseStyles = createGlobalStyle`
-  ${reset}
-
-  body,
-  html {
-    background: #161616;
-    color: #fff;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  }
-
-  *,
-  *:before,
-  *:after {
-    box-sizing: border-box;
-  }
-`;
-
-const useWindowSize = ()=>{
-    const getWindowSize = ()=>({
-            height: window.innerHeight,
-            width: window.innerWidth
-        });
-    const [windowSize, setWindowSize] = useState(getWindowSize);
-    const handleResize = ()=>{
-        setWindowSize(getWindowSize);
-    };
-    useEffect(()=>{
-        window.addEventListener('resize', handleResize);
-        return ()=>{
-            window.removeEventListener('resize', handleResize);
-        };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    return windowSize;
-};
-
-const getBreakpoint = ()=>{
-    const lg = window.matchMedia('(min-width: 992px)');
-    const md = window.matchMedia('(min-width: 768px)');
-    const sm = window.matchMedia('(min-width: 576px)');
-    if (lg.matches) {
-        return 'lg';
-    }
-    if (md.matches) {
-        return 'md';
-    }
-    if (sm.matches) {
-        return 'sm';
-    }
-    return 'xs';
-};
-const useBreakpoint = ()=>{
-    const [breakpoint, setBreakpoint] = useState('xs');
-    const { width } = useWindowSize();
-    useEffect(()=>{
-        setBreakpoint(getBreakpoint);
-    }, [
-        width
-    ]);
-    return breakpoint;
-};
-
-const Breakpoint = ({ children, lg = true, md = true, sm = true, xs = true })=>{
-    const breakpoint = useBreakpoint();
-    const matrix = {
-        lg,
-        md,
-        sm,
-        xs
-    };
-    if (matrix[breakpoint]) {
-        return /*#__PURE__*/ jsx(Fragment, {
-            children: children
-        });
-    }
-    return null;
-};
-
-const buttonTheme = {
-    danger: {
-        background: 'rgb(199,56,79)',
-        colour: '#fff'
-    },
-    primary: {
-        background: '#007fa8',
-        colour: '#fff'
-    },
-    secondary: {
-        background: '#f6f9fc',
-        colour: '#333'
-    },
-    success: {
-        background: 'rgb(0,128,93)',
-        colour: '#fff'
-    }
-};
-const BaseButton = styled('button').withConfig({
-    shouldForwardProp: (prop)=>![
-            'block',
-            'colour',
-            'size'
-        ].includes(prop)
-})`
-  ${({ block = false, colour = 'primary', size = 'md', theme })=>`
-    appearance: none;
-    background-color: ${theme[colour].background};
-    border: 0;
-    color: ${theme[colour].colour};
-    cursor: pointer;
-    font-family: 'Cabin', sans-serif;
-    font-weight: 600;
-    position: relative;
-    vertical-align: middle;
-    text-align: center;
-    text-decoration: none;
-    user-select: none;
-    white-space: nowrap;
-
-    ${block ? `
-          display: block;
-          width: 100%;
-        ` : `
-          display: inline-block;
-        `}
-
-    ${(()=>{
-        switch(size){
-            case 'sm':
-                return `
-            font-size: 16px;
-            height: 32px;
-            line-height: 32px;
-            padding: ${block ? '0' : '0 16px'};
-          `;
-            case 'lg':
-                return `
-            font-size: 18px;
-            height: 46px;
-            line-height: 46px;
-            padding: ${block ? '0' : '0 32px'};
-          `;
-            default:
-                return `
-            font-size: 16px;
-            height: 40px;
-            line-height: 40px;
-            padding: ${block ? '0' : '0 24px'};
-          `;
-        }
-    })()}
-
-    :hover {
-      background-color: ${darken(0.1, theme[colour].background ?? '')};
-    }
-
-    :disabled {
-      background-color: ${theme[colour].background};
-      opacity: .6;
-    }
-  `}
-`;
-
-const Circle = styled.circle`
-  ${({ $colour })=>`
-    animation: dash 1.5s ease-in-out infinite;
-    stroke: ${$colour === 'default' ? '#007fa8' : '#fff'};
-    stroke-linecap: round;
-
-    @keyframes dash {
-      0% {
-        stroke-dasharray: 1, 150;
-        stroke-dashoffset: 0;
-      }
-      50% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -35;
-      }
-      100% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -124;
-      }
-    }
-  `}
-`;
-const BaseLoader = styled.svg`
-  animation: rotate 2s linear infinite;
-  height: 50px;
-  left: 50%;
-  margin: -25px 0 0 -25px;
-  position: absolute;
-  top: 50%;
-  width: 50px;
-
-  @keyframes rotate {
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-`;
-const Loader = ({ colour = 'default', className = '' })=>/*#__PURE__*/ jsx(BaseLoader, {
-        className: className,
-        viewBox: "0 0 50 50",
-        children: /*#__PURE__*/ jsx(Circle, {
-            $colour: colour,
-            cx: "25",
-            cy: "25",
-            r: "20",
-            fill: "none",
-            strokeWidth: "4"
-        })
-    });
-
-const loaderSizes = {
-    lg: {
-        height: '36px',
-        margin: '-18px 0 0 -18px',
-        width: '36px'
-    },
-    md: {
-        height: '28px',
-        margin: '-14px 0 0 -14px',
-        width: '28px'
-    },
-    sm: {
-        height: '20px',
-        margin: '-10px 0 0 -10px',
-        width: '20px'
-    }
-};
-const ButtonLoader = styled(Loader)`
-  ${({ $size })=>`
-    height: ${loaderSizes[$size].height};
-    margin: ${loaderSizes[$size].margin};
-    width: ${loaderSizes[$size].width};
-  `}
-`;
-const ButtonContainer = styled.span`
-  ${({ $isLoading })=>`
-    visibility: ${$isLoading ? 'hidden' : 'visible'};
-  `}
-`;
-const Button = ({ block = false, children, colour = 'primary', disabled = false, loading = false, size = 'md', type = 'button', ...rest })=>{
-    const loadingColour = colour === 'secondary' ? 'default' : 'secondary';
-    return /*#__PURE__*/ jsx(ThemeProvider, {
-        theme: buttonTheme,
-        children: /*#__PURE__*/ jsxs(BaseButton, {
-            block: block,
-            colour: colour,
-            type: type,
-            size: size,
-            disabled: disabled || loading,
-            ...rest,
-            children: [
-                loading && /*#__PURE__*/ jsx(ButtonLoader, {
-                    colour: loadingColour,
-                    $size: size
-                }),
-                /*#__PURE__*/ jsx(ButtonContainer, {
-                    $isLoading: loading,
-                    children: children
-                })
-            ]
-        })
-    });
-};
-
-const BaseLink = styled.a`
-  appearance: none;
-  background: none;
-  border: 0;
-  color: #007aa3;
-  cursor: pointer;
-  font-weight: 600;
-  font-size: inherit;
-  margin: 0;
-  padding: 0;
-  text-decoration: underline;
-
-  :hover {
-    color: rgb(199, 56, 79);
-    text-decoration: none;
-  }
-`;
-
-const ButtonLink = (props)=>// eslint-disable-next-line react/jsx-props-no-spreading
-    /*#__PURE__*/ jsx(BaseLink, {
-        as: "button",
-        ...props
-    });
-
-const Wrapper$4 = styled.div`
-  border-bottom: 2px solid #007fa8;
-  display: block;
-  overflow-x: auto;
-  width: 100%;
-  -webkit-overflow-scrolling: touch;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-`;
-const BaseTable = styled.table`
-  ${({ $fixed })=>`
-    background-color: #fff;
-    max-width: 100%;
-    table-layout: ${$fixed ? 'fixed' : 'auto'};
-    width: 100%;
-  `}
-`;
-const Table = ({ children, fixed = false, ...rest })=>/*#__PURE__*/ jsx(Wrapper$4, {
-        children: /*#__PURE__*/ jsx(BaseTable, {
-            $fixed: fixed,
-            ...rest,
-            children: children
-        })
-    });
-
-const TableBody = styled.tbody`
-  background-color: #fff;
-  color: #000;
-`;
-
-const baseStyles = (noWrap, align = 'inherit')=>`
-  padding: 10px;
-  text-align: ${align};
-  vertical-align: middle;
-  ${noWrap ? 'white-space: nowrap;' : ''}
-`;
-const TableDataCell = styled.td`
-  ${({ align, $noWrap })=>`
-    ${baseStyles($noWrap, align)}
-    font-weight: 300;
-  `}
-`;
-const TableHeadCell = styled.th`
-  ${({ align, $noWrap })=>`
-    ${baseStyles($noWrap, align)}
-    font-family: 'Cabin', sans-serif;
-    font-weight: 600;
-  `}
-`;
-const TableCell = ({ as = 'td', noWrap = true, ...rest })=>as === 'td' ? /*#__PURE__*/ jsx(TableDataCell, {
-        $noWrap: noWrap,
-        ...rest
-    }) : /*#__PURE__*/ jsx(TableHeadCell, {
-        $noWrap: noWrap,
-        ...rest
-    });
-
-const TableHead = styled.thead`
-  font-weight: 600;
-`;
-
-const tableRowTheme = {
-    default: {
-        background: '#fff',
-        border: '#eee',
-        colour: '#000'
-    },
-    primary: {
-        background: '#007fa8',
-        border: darken(0.02, '#007fa8'),
-        colour: '#fff'
-    },
-    secondary: {
-        background: '#f6f9fc',
-        border: '#eee',
-        colour: '#333'
-    }
-};
-const BaseTableRow = styled.tr`
-  ${({ $colour, theme })=>`
-    background-color: ${theme[$colour].background};
-    border-bottom: 2px solid ${theme[$colour].border};
-    color: ${theme[$colour].colour};
-  `}
-`;
-const TableRow = ({ colour = 'default', ...rest })=>/*#__PURE__*/ jsx(ThemeProvider, {
-        theme: tableRowTheme,
-        children: /*#__PURE__*/ jsx(BaseTableRow, {
-            $colour: colour,
-            ...rest
-        })
-    });
-
-const margins = {
-    lg: 1,
-    md: 0.5,
-    none: 0,
-    sm: 0.25
-};
-const BaseTypography = styled.p`
-  ${({ $align, $breakWord, $margin, $truncate, $variant })=>`
-    margin: ${margins[$margin] ? `0 0 ${margins[$margin]}rem` : '0'};
-    text-align: ${$align};
-
-    ${$breakWord ? `
-      hyphens: auto;
-      overflow-wrap: break-word;
-      word-wrap: break-word;
-      word-break: break-all;
-      word-break: break-word;
-    ` : ''}
-
-    ${$truncate ? `
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    ` : ''}
-
-    ${(()=>{
-        switch($variant){
-            case 'p':
-                return `
-            color: inherit;
-            line-height: 1.5;
-          `;
-            case 'lead':
-                return `
-            font-size: 1.25rem;
-            font-weight: 300;
-            line-height: 1.5;
-          `;
-            default:
-                return `
-            color: inherit;
-            font-family: 'Cabin', sans-serif;
-            font-size: ${(()=>{
-                    switch($variant){
-                        case 'h6':
-                            return '1rem';
-                        case 'h5':
-                            return '1.25rem';
-                        case 'h4':
-                            return '1.5rem';
-                        case 'h3':
-                            return '1.75rem';
-                        case 'h2':
-                            return '2rem';
-                        default:
-                            return '2.5rem';
-                    }
-                })()};
-            font-weight: 600;
-            line-height: 1.2;
-        `;
-        }
-    })()}
-  `}
-`;
-const Line = styled.hr`
-  ${({ $margin })=>`
-    border: 0;
-    border-top: 2.5px solid #007fa8;
-    margin: ${margins[$margin] ? `${margins[$margin]}rem 0` : '0'};
-    padding: 0;
-
-  `}
-`;
-const Typography = ({ align = 'left', breakWord = false, children, className = '', component, id, margin = 'md', rule = false, truncate = false, variant })=>/*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx(BaseTypography, {
-                id: id,
-                as: component,
-                className: className,
-                $align: align,
-                $breakWord: breakWord,
-                $margin: margin,
-                $truncate: truncate,
-                $variant: variant,
-                children: children
-            }),
-            rule && /*#__PURE__*/ jsx(Line, {
-                $margin: margin
-            })
-        ]
-    });
-
-const Toolbar = styled.div`
-  align-items: stretch;
-  background-color: #007fa8;
-  color: #fff;
-  display: flex;
-  flex-direction: row;
-`;
-const Title = styled(Typography)`
-  flex-grow: 1;
-  line-height: 40px;
-`;
-const CalendarButton = styled(Button)`
-  ${({ $fixed = false })=>`
-    ${$fixed ? 'width' : 'min-width'}: 40px;
-    padding: 0;
-  `}
-`;
-const Weekdays = ()=>{
-    const short = Info.weekdays('short');
-    const abbrs = Info.weekdays();
-    return /*#__PURE__*/ jsx(TableHead, {
-        children: /*#__PURE__*/ jsx(TableRow, {
-            colour: "primary",
-            children: short.map((day, i)=>/*#__PURE__*/ jsx(TableCell, {
-                    abbr: abbrs[i],
-                    as: "th",
-                    align: "center",
-                    scope: "col",
-                    children: day
-                }, day))
-        })
-    });
-};
-const Dates = ({ date, id, onSelect, view })=>{
-    const currentDay = parseInt(date.toFormat('dd'), 10);
-    const { daysInMonth } = view;
-    const firstDayOfMonth = parseInt(view.startOf('month').toFormat('c'), 10);
-    const previousMonth = view.minus({
-        months: 1
-    });
-    const lastDayOfPreviousMonth = parseInt(previousMonth.endOf('month').toFormat('dd'), 10);
-    const nextMonth = view.plus({
-        months: 1
-    });
-    const blanks = [
-        ...Array(firstDayOfMonth - 1)
-    ].map((_, i)=>{
-        const day = lastDayOfPreviousMonth - i;
-        const thisMonth = date.hasSame(previousMonth, 'month');
-        let colour;
-        if (thisMonth) {
-            colour = day === currentDay ? 'primary' : 'secondary';
-        } else {
-            colour = 'secondary';
-        }
-        return /*#__PURE__*/ jsx(TableCell, {
-            align: "center",
-            children: /*#__PURE__*/ jsx(CalendarButton, {
-                block: true,
-                disabled: true,
-                colour: colour,
-                children: day
-            })
-        }, 0 - i);
-    }).reverse();
-    const days = [
-        ...Array(daysInMonth)
-    ].map((_, i)=>{
-        const day = i + 1;
-        const month = view.get('month');
-        const year = view.get('year');
-        const thisMonth = date.hasSame(view, 'month');
-        let colour;
-        if (thisMonth) {
-            colour = day === currentDay ? 'primary' : 'secondary';
-        } else {
-            colour = 'secondary';
-        }
-        return /*#__PURE__*/ jsx(TableCell, {
-            align: "center",
-            children: /*#__PURE__*/ jsx(CalendarButton, {
-                block: true,
-                colour: colour,
-                "data-testid": `calendar-day-${day}`,
-                tabIndex: -1,
-                onClick: ()=>onSelect(day, month, year),
-                children: day
-            })
-        }, day);
-    });
-    const totalSlots = [
-        ...blanks,
-        ...days
-    ];
-    const rows = [];
-    let cells = [];
-    totalSlots.forEach((row, i)=>{
-        if (i % 7 !== 0) {
-            cells.push(row);
-        } else {
-            rows.push(cells);
-            cells = [];
-            cells.push(row);
-        }
-        if (i === totalSlots.length - 1) {
-            const filler = [
-                ...Array(7 - cells.length)
-            ].map((_, fillerIndex)=>{
-                const key = daysInMonth + fillerIndex + 1;
-                const day = 1 + fillerIndex;
-                const thisMonth = date.hasSame(nextMonth, 'month');
-                let colour;
-                if (thisMonth) {
-                    colour = day === currentDay ? 'primary' : 'secondary';
-                } else {
-                    colour = 'secondary';
-                }
-                return /*#__PURE__*/ jsx(TableCell, {
-                    align: "center",
-                    children: /*#__PURE__*/ jsx(CalendarButton, {
-                        block: true,
-                        disabled: true,
-                        colour: colour,
-                        children: day
-                    })
-                }, key);
-            });
-            rows.push([
-                ...cells,
-                ...filler
-            ]);
-        }
-    });
-    return /*#__PURE__*/ jsxs(Table, {
-        id: id,
-        role: "grid",
-        children: [
-            /*#__PURE__*/ jsx(Weekdays, {}),
-            /*#__PURE__*/ jsx(TableBody, {
-                children: rows.map((d, i)=>/*#__PURE__*/ jsx(TableRow, {
-                        children: d
-                    }, i))
-            })
-        ]
-    });
-};
-const selectMoment = (start, date)=>date || start;
-const Calendar = ({ onDateChange, id, selectedDate = '' })=>{
-    const [startDate] = useState(()=>{
-        if (selectedDate !== '') {
-            return DateTime$1.fromISO(selectedDate).toUTC();
-        }
-        return DateTime$1.utc();
-    });
-    const [date, setDate] = useState();
-    const [view, setView] = useState();
-    const [currentMonth, setCurrentMonth] = useState('');
-    const [currentYear, setCurrentYear] = useState('');
-    const selected = selectMoment(startDate, date);
-    const selectedView = selectMoment(startDate, view);
-    const grid = `${id}-calendar`;
-    const label = `${id}-dialog-label`;
-    const setDay = (day, month, year)=>{
-        const updated = selected.set({
-            day,
-            month,
-            year
-        });
-        setDate(updated);
-    };
-    const next = (unit)=>{
-        const updated = selectedView.plus({
-            [unit]: 1
-        });
-        setView(updated);
-    };
-    const previous = (unit)=>{
-        const updated = selectedView.minus({
-            [unit]: 1
-        });
-        setView(updated);
-    };
-    useEffect(()=>{
-        setCurrentMonth(selectedView.toFormat('MMMM'));
-        setCurrentYear(selectedView.toFormat('y'));
-    }, [
-        selectedView
-    ]);
-    useEffect(()=>{
-        const isoDate = date?.toISO();
-        if (isoDate) {
-            onDateChange(isoDate);
-        }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        date
-    ]);
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsxs(Toolbar, {
-                children: [
-                    /*#__PURE__*/ jsx(CalendarButton, {
-                        $fixed: true,
-                        block: true,
-                        "aria-label": "Previous year",
-                        onClick: ()=>previous('year'),
-                        children: /*#__PURE__*/ jsx(FontAwesomeIcon, {
-                            icon: faAngleDoubleLeft
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(CalendarButton, {
-                        $fixed: true,
-                        block: true,
-                        "aria-label": "Previous month",
-                        onClick: ()=>previous('month'),
-                        children: /*#__PURE__*/ jsx(FontAwesomeIcon, {
-                            icon: faAngleLeft
-                        })
-                    }),
-                    /*#__PURE__*/ jsxs(Title, {
-                        id: label,
-                        component: "p",
-                        variant: "h6",
-                        align: "center",
-                        margin: "none",
-                        children: [
-                            currentMonth,
-                            " ",
-                            currentYear
-                        ]
-                    }),
-                    /*#__PURE__*/ jsx(CalendarButton, {
-                        $fixed: true,
-                        block: true,
-                        "aria-label": "Next month",
-                        onClick: ()=>next('month'),
-                        children: /*#__PURE__*/ jsx(FontAwesomeIcon, {
-                            icon: faAngleRight
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(CalendarButton, {
-                        $fixed: true,
-                        block: true,
-                        "aria-label": "Next year",
-                        onClick: ()=>next('year'),
-                        children: /*#__PURE__*/ jsx(FontAwesomeIcon, {
-                            icon: faAngleDoubleRight
-                        })
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx(Dates, {
-                id: grid,
-                date: selected,
-                view: selectedView,
-                onSelect: setDay
-            })
-        ]
-    });
-};
-
-const cardTheme = {
-    lg: {
-        padding: '20px'
-    },
-    md: {
-        padding: '10px'
-    },
-    none: {
-        padding: '0'
-    },
-    sm: {
-        padding: '5px'
-    }
-};
-const BaseCard = styled.div`
-  ${({ $padding, theme })=>`
-    background: #f8f8f8;
-    color: #000;
-    padding: ${theme[$padding].padding}
-  `}
-`;
-const Card = ({ children, padding = 'md' })=>/*#__PURE__*/ jsx(ThemeProvider, {
-        theme: cardTheme,
-        children: /*#__PURE__*/ jsx(BaseCard, {
-            $padding: padding,
-            children: children
-        })
-    });
-
-const CheckableInput = styled.input`
-  cursor: pointer;
-  height: 100%;
-  left: 0;
-  margin: 0;
-  padding: 0;
-  position: absolute;
-  opacity: 0;
-  top: 0;
-  width: 100%;
-  z-index: 1;
-`;
-
-const helpTextSpacing = {
-    lg: '20px',
-    md: '10px',
-    sm: '5px'
-};
-const HelpText = styled('p').withConfig({
-    shouldForwardProp: (prop)=>![
-            'error',
-            'spacing'
-        ].includes(prop)
-})`
-  ${({ error, spacing })=>`
-    color: ${error ? 'rgb(199,56,79)' : '#727272'};
-    font-size: 0.75rem;
-    margin-bottom: ${helpTextSpacing[spacing]};
-  `}
-`;
-
-const Wrapper$3 = styled.div`
-  background-color: rgb(199, 56, 79);
-  border-radius: 50%;
-  color: #fff;
-  cursor: pointer;
-  display: block;
-  height: 22px;
-  line-height: 22px;
-  text-align: center;
-  width: 22px;
-`;
-const InputAlert = ()=>/*#__PURE__*/ jsx(Wrapper$3, {
-        role: "alert",
-        children: /*#__PURE__*/ jsx(FontAwesomeIcon, {
-            icon: faExclamation
-        })
-    });
-
-const tooltipTheme = {
-    danger: {
-        background: 'rgb(199,56,79)',
-        colour: '#fff'
-    },
-    primary: {
-        background: '#007fa8',
-        colour: '#fff'
-    },
-    secondary: {
-        background: '#f6f9fc',
-        colour: '#333'
-    },
-    success: {
-        background: 'rgb(0,128,93)',
-        colour: '#fff'
-    }
-};
-const TooltipArrow = styled.div`
-  ${({ $colour, $placement, theme })=>`
-    height: 0;
-    position: absolute;
-    width: 0;
-
-    ${(()=>{
-        switch($placement){
-            case 'bottom':
-                return `
-            border-bottom: 5px solid ${theme[$colour].background};
-            border-left: 5px solid transparent;
-            border-right: 5px solid transparent;
-            top: -5px;
-          `;
-            case 'left':
-                return `
-            border-bottom: 5px solid transparent;
-            border-left: 5px solid ${theme[$colour].background};
-            border-top: 5px solid transparent;
-            right: -5px;
-          `;
-            case 'right':
-                return `
-            border-bottom: 5px solid transparent;
-            border-right: 5px solid ${theme[$colour].background};
-            border-top: 5px solid transparent;
-            left: -5px;
-          `;
-            case 'top':
-                return `
-            border-left: 5px solid transparent;
-            border-right: 5px solid transparent;
-            border-top: 5px solid ${theme[$colour].background};
-            bottom: -5px;
-          `;
-            default:
-                return '';
-        }
-    })()}
-  `}
-`;
-const TooltipWrapper = styled.div`
-  display: inline-block;
-  position: relative;
-`;
-const TooltipContent = styled.div`
-  ${({ $colour, $visible, theme })=>`
-    background-color: ${theme[$colour].background};
-    color: ${theme[$colour].colour};
-    font-size: 14px;
-    line-height: 22px;
-    padding: 0 5px;
-    visibility: ${$visible ? 'visible' : 'hidden'};
-    z-index: 10;
-  `}
-`;
-const Tooltip = ({ colour = 'primary', message, id, parent, placement })=>{
-    let timer;
-    const [visible, setVisibility] = useState(false);
-    const mounted = useRef(false);
-    const hideTooltip = ()=>{
-        timer = setTimeout(()=>{
-            if (mounted.current) {
-                setVisibility(false);
-            }
-        }, 1000);
-    };
-    const showTooltip = ()=>{
-        clearTimeout(timer);
-        setVisibility(true);
-    };
-    useEffect(()=>{
-        mounted.current = true;
-        return ()=>{
-            mounted.current = false;
-        };
-    });
-    return /*#__PURE__*/ jsx(ThemeProvider, {
-        theme: tooltipTheme,
-        children: /*#__PURE__*/ jsxs(Manager, {
-            children: [
-                /*#__PURE__*/ jsx(Reference, {
-                    children: ({ ref })=>/*#__PURE__*/ jsx(TooltipWrapper, {
-                            ref: ref,
-                            onBlur: hideTooltip,
-                            onFocus: showTooltip,
-                            onMouseOver: showTooltip,
-                            onMouseOut: hideTooltip,
-                            children: parent
-                        })
-                }),
-                /*#__PURE__*/ jsx(Popper, {
-                    placement: placement,
-                    strategy: "fixed",
-                    modifiers: [
-                        {
-                            name: 'offset',
-                            options: {
-                                offset: [
-                                    0,
-                                    5
-                                ]
-                            }
-                        }
-                    ],
-                    children: ({ arrowProps, placement: popperPlacement, ref, style })=>{
-                        const placementToUse = process.env.NODE_ENV === 'test' ? placement : popperPlacement;
-                        return /*#__PURE__*/ jsxs(TooltipContent, {
-                            $placement: placementToUse,
-                            $visible: visible,
-                            id: id,
-                            role: "tooltip",
-                            ref: ref,
-                            $colour: colour,
-                            style: style,
-                            children: [
-                                message,
-                                /*#__PURE__*/ jsx(TooltipArrow, {
-                                    $placement: placementToUse,
-                                    ref: arrowProps.ref,
-                                    $colour: colour,
-                                    style: arrowProps.style
-                                })
-                            ]
-                        });
-                    }
-                })
-            ]
-        })
-    });
-};
-
-const ValidatorWrapper = styled.div`
-  margin-top: -11px;
-  position: absolute;
-  right: 8px;
-  top: 50%;
-  z-index: 1;
-`;
-
-const BaseFieldSet = styled.fieldset`
-  padding-right: 38px;
-  position: relative;
-`;
-const FieldSet = ({ error, children, helpText = null, message, name, spacing })=>{
-    const describedBy = `${name}-error`;
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsxs(BaseFieldSet, {
-                children: [
-                    children,
-                    /*#__PURE__*/ jsx(ValidatorWrapper, {
-                        children: error && /*#__PURE__*/ jsx(Tooltip, {
-                            id: describedBy,
-                            parent: /*#__PURE__*/ jsx(InputAlert, {
-                                message: message
-                            }),
-                            colour: "danger",
-                            placement: "left",
-                            message: message
-                        })
-                    })
-                ]
-            }),
-            helpText && /*#__PURE__*/ jsx(HelpText, {
-                error: error,
-                spacing: spacing,
-                children: helpText
-            })
-        ]
-    });
-};
-
-const useInputValidation = (name, errors, touched)=>{
-    const [error, setError] = useState(false);
-    useEffect(()=>{
-        const touch = getIn(touched, name);
-        const err = getIn(errors, name);
-        setError(!!touch && !!err);
-    }, [
-        errors,
-        name,
-        touched
-    ]);
-    return error;
-};
-
-const Legend = styled('legend').withConfig({
-    shouldForwardProp: (prop)=>![
-            'error'
-        ].includes(prop)
-})`
-  ${({ error })=>`
-    color: ${error ? 'rgb(199,56,79)' : '#007aa3'};
-    font-size: 16px;
-    margin-bottom: 10px;
-  `}
-`;
-
-const BaseOptionLabel = styled.label`
-  ${({ $disabled, $selected })=>`
-    cursor: pointer;
-    display: inline-flex;
-    margin: 0 10px 10px 0;
-    padding: 0 8px;
-    position: relative;
-
-    ${$disabled ? `
-      background: #fff;
-      border-bottom: 2px solid #eee;
-      color: #767676;
-    ` : `
-      background: ${$selected ? '#007fa8' : '#fff'};
-      border-bottom: 2px solid ${$selected ? darken(0.02, '#007fa8') : '#eee'};
-      color: ${$selected ? '#fff' : '#000'};
-    `}
-  `}
-`;
-const OptionLabel = ({ children, disabled, selected })=>/*#__PURE__*/ jsx(BaseOptionLabel, {
-        $disabled: disabled,
-        $selected: selected,
-        children: children
-    });
-
-const OptionLabelText = styled.div`
-  line-height: 44px;
-`;
-
-const InternalCheckBox = ({ disabled, field, form, helpText, label, legend, onChange, readOnly, spacing })=>{
-    const { errors, handleChange, touched } = form;
-    const error = useInputValidation(field.name, errors, touched);
-    const markAsDisabled = disabled || readOnly;
-    const doChange = (e)=>{
-        handleChange(e);
-        if (onChange) {
-            onChange(e, form);
-        }
-    };
-    return /*#__PURE__*/ jsxs(FieldSet, {
-        error: error,
-        helpText: helpText,
-        message: getIn(errors, field.name),
-        name: field.name,
-        spacing: spacing,
-        children: [
-            /*#__PURE__*/ jsx(Legend, {
-                error: error,
-                children: legend
-            }),
-            /*#__PURE__*/ jsxs(OptionLabel, {
-                disabled: disabled,
-                selected: field.value,
-                children: [
-                    /*#__PURE__*/ jsx(CheckableInput, {
-                        ...field,
-                        checked: field.value,
-                        disabled: markAsDisabled,
-                        readOnly: readOnly,
-                        type: "checkbox",
-                        onChange: doChange
-                    }),
-                    /*#__PURE__*/ jsx(OptionLabelText, {
-                        children: label
-                    })
-                ]
-            }),
-            readOnly && /*#__PURE__*/ jsx("input", {
-                type: "hidden",
-                ...field
-            })
-        ]
-    });
-};
-const CheckBox = ({ disabled = false, helpText = null, label, legend, name, onChange, readOnly = false, spacing = 'md' })=>/*#__PURE__*/ jsx(Field, {
-        id: name,
-        component: InternalCheckBox,
-        disabled: disabled,
-        helpText: helpText,
-        label: label,
-        legend: legend,
-        name: name,
-        onChange: onChange,
-        readOnly: readOnly,
-        spacing: spacing
-    });
-
-const ColContainer = styled.div`
-  ${({ $align, $lg, $lgOffset, $md, $mdOffset, $sm, $smOffset, $verticalAlign, $xs, $xsOffset })=>`
-    grid-column: ${$xsOffset > 0 ? `${$xsOffset} / span ${$xs}` : `span ${$xs}`};
-    position: relative;
-    text-align ${$align === 'centre' ? 'center' : $align};
-
-    ${$verticalAlign ? `
-      align-items: center;
-      display: flex;
-    ` : ``}
-
-    ${$sm ? `
-      @media (min-width: 576px) {
-        grid-column: ${$smOffset > 0 ? `${$smOffset} / span ${$sm}` : `span ${$sm}`};
-      }
-    ` : ''}
-
-    ${$md ? `
-      @media (min-width: 768px) {
-        grid-column: ${$mdOffset > 0 ? `${$mdOffset} / span ${$md}` : `span ${$md}`};
-      }
-    ` : ''}
-
-    ${$lg ? `
-      @media (min-width: 992px) {
-        grid-column: ${$lgOffset > 0 ? `${$lgOffset} / span ${$lg}` : `span ${$lg}`};
-      }
-    ` : ''}
-  `}
-`;
-const VericalAlignWrapper = styled.div`
-  flex: 1;
-`;
-const Col = ({ children, align = 'left', lg = 0, lgOffset = 0, md = 0, mdOffset = 0, sm = 0, smOffset = 0, verticalAlign = null, xs = 12, xsOffset = 0 })=>/*#__PURE__*/ jsx(ColContainer, {
-        $align: align,
-        $lg: lg,
-        $lgOffset: lgOffset,
-        $md: md,
-        $mdOffset: mdOffset,
-        $sm: sm,
-        $smOffset: smOffset,
-        $verticalAlign: !!verticalAlign,
-        $xs: xs,
-        $xsOffset: xsOffset,
-        children: verticalAlign ? /*#__PURE__*/ jsx(VericalAlignWrapper, {
-            children: children
-        }) : children
-    });
-
-const Wrapper$2 = styled.section`
-  background-color: #f8f8f8;
-  color: #000;
-  display: block;
-  padding: 1rem;
-`;
-const Content = ({ children })=>/*#__PURE__*/ jsx(Wrapper$2, {
-        children: children
-    });
-
-function DataTable({ header = null, items, noResults, row, theme = 'primary' }) {
-    if (items.length === 0) {
-        return /*#__PURE__*/ jsx(Fragment, {
-            children: noResults
-        });
-    }
-    return /*#__PURE__*/ jsxs(Table, {
-        children: [
-            header && /*#__PURE__*/ jsx(TableHead, {
-                children: /*#__PURE__*/ jsx(TableRow, {
-                    colour: theme,
-                    children: header
-                })
-            }),
-            /*#__PURE__*/ jsx(TableBody, {
-                children: items.map((item, i)=>// eslint-disable-next-line react/no-array-index-key
-                    /*#__PURE__*/ jsx(TableRow, {
-                        children: row(item)
-                    }, i))
-            })
-        ]
-    });
-}
-
-const defaultFormat = 'dd/MM/yyyy';
-const formatDateTime = (value, format = defaultFormat)=>{
-    const date = typeof value === 'string' ? DateTime$1.fromISO(value) : DateTime$1.fromSeconds(value);
-    return {
-        ISOString: date.toUTC().toISO(),
-        formatted: date.toFormat(format)
-    };
-};
-const DateTime = ({ format = defaultFormat, value })=>{
-    const { ISOString, formatted } = formatDateTime(value, format);
-    return /*#__PURE__*/ jsx("time", {
-        dateTime: ISOString,
-        children: formatted
-    });
-};
-
-const useOutsideClick = (ref, handler)=>{
-    useEffect(()=>{
-        const listener = (event)=>{
-            if (!ref || ref.contains(event.target)) {
-                return;
-            }
-            handler(event);
-        };
-        document.addEventListener('mousedown', listener);
-        document.addEventListener('touchstart', listener);
-        return ()=>{
-            document.removeEventListener('mousedown', listener);
-            document.removeEventListener('touchstart', listener);
-        };
-    }, [
-        handler,
-        ref
-    ]);
-};
-
-const inputWrapperTheme = {
-    lg: {
-        spacing: '20px'
-    },
-    md: {
-        spacing: '10px'
-    },
-    sm: {
-        spacing: '5px'
-    }
-};
-const BaseInputWrapper = styled.div`
-  ${({ theme, $error, $spacing })=>`
-    background: #fff;
-    border-bottom: 2px solid ${$error ? 'rgb(199,56,79)' : '#eee'};
-    margin-bottom: ${theme[$spacing].spacing};
-    padding: 0 38px 0 8px;
-    position: relative;
-  `}
-`;
-const InputWrapper = ({ children, error, helpText = null, message, name, spacing })=>{
-    const describedBy = `${name}-error`;
-    return /*#__PURE__*/ jsxs(ThemeProvider, {
-        theme: inputWrapperTheme,
-        children: [
-            /*#__PURE__*/ jsxs(BaseInputWrapper, {
-                $error: error,
-                $spacing: helpText ? 'md' : spacing,
-                children: [
-                    children,
-                    /*#__PURE__*/ jsx(ValidatorWrapper, {
-                        children: error && /*#__PURE__*/ jsx(Tooltip, {
-                            id: describedBy,
-                            parent: /*#__PURE__*/ jsx(InputAlert, {
-                                message: message
-                            }),
-                            colour: "danger",
-                            placement: "left",
-                            message: message
-                        })
-                    })
-                ]
-            }),
-            helpText && /*#__PURE__*/ jsx(HelpText, {
-                error: error,
-                spacing: spacing,
-                children: helpText
-            })
-        ]
-    });
-};
-
-const Label = styled('label').withConfig({
-    shouldForwardProp: (prop)=>![
-            'active',
-            'error'
-        ].includes(prop)
-})`
-  ${({ active, error })=>`
-    color: ${(()=>{
-        if (error) {
-            return 'rgb(199,56,79)';
-        }
-        if (active) {
-            return '#007fa8';
-        }
-        return '#767676';
-    })()};
-    font-size: 16px;
-    pointer-events: none;
-    position: absolute;
-    transform: ${active ? 'translate(0,4px) scale(.75)' : 'translate(0,16px) scale(1)'};
-    transform-origin: top left;
-    transition: all .1s ease-in-out;
-  `}
-`;
-
-const LikeInput = styled.div`
-  ${({ $disabled })=>`
-    background: #fff;
-    border: none;
-    color: ${$disabled ? '#767676' : '#333'};
-    font-size: 16px;
-    line-height: 18px;
-    outline: 0;
-    padding: 16px 0 10px;
-    width: 100%;
-  `}
-`;
-
-const IconOuter$1 = styled.div`
-  margin-top: -21px;
-  position: absolute;
-  right: 38px;
-  top: 50%;
-  z-index: 1;
-`;
-const IconButton = styled.button`
-  appearance: none;
-  background-color: #fff;
-  border: 0;
-  color: #767676;
-  cursor: pointer;
-  display: block;
-  height: 42px;
-  line-height: 42px;
-  padding: 0;
-  text-align: center;
-  width: 42px;
-`;
-const DatePickerWrapper = styled.div`
-  position: relative;
-`;
-const CalendarWrapper = styled.div`
-  z-index: 1000;
-`;
-const InnerDatePicker = ({ disabled, field, form, helpText, label, readOnly, spacing })=>{
-    const [referenceElement, setReferenceElement] = useState(null);
-    const [popperElement, setPopperElement] = useState(null);
-    const { attributes, styles } = usePopper(referenceElement, popperElement, {
-        placement: 'bottom-end'
-    });
-    const [error, setError] = useState(false);
-    const [visible, setVisible] = useState(false);
-    const { name, value } = field;
-    const [date, setDate] = useState(()=>{
-        if (value === '') {
-            return DateTime$1.utc().toISO();
-        }
-        return DateTime$1.fromISO(value).toUTC().toISO();
-    });
-    const { errors, setFieldValue } = form;
-    const markAsDisabled = disabled || readOnly;
-    const describedBy = `${name}-error`;
-    const { formatted } = formatDateTime(value);
-    const selectDate = (d)=>{
-        setDate(d);
-    };
-    useEffect(()=>{
-        setFieldValue(name, date).catch(()=>{});
-        setVisible(false);
-        const err = getIn(errors, name);
-        setError(!!err);
-    }, [
-        date,
-        errors,
-        name,
-        setFieldValue
-    ]);
-    useOutsideClick(referenceElement, ()=>{
-        setVisible(false);
-    });
-    return /*#__PURE__*/ jsxs(DatePickerWrapper, {
-        ref: setReferenceElement,
-        children: [
-            /*#__PURE__*/ jsxs(InputWrapper, {
-                error: error,
-                helpText: helpText,
-                message: getIn(errors, name),
-                name: name,
-                spacing: spacing,
-                children: [
-                    /*#__PURE__*/ jsx(Label, {
-                        active: true,
-                        htmlFor: name,
-                        error: error,
-                        children: label
-                    }),
-                    /*#__PURE__*/ jsx("input", {
-                        hidden: true,
-                        id: name,
-                        disabled: disabled,
-                        readOnly: readOnly,
-                        ...field
-                    }),
-                    /*#__PURE__*/ jsx(LikeInput, {
-                        "aria-describedby": error ? describedBy : undefined,
-                        $disabled: disabled,
-                        children: /*#__PURE__*/ jsx(DateTime, {
-                            value: value
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(IconOuter$1, {
-                        children: /*#__PURE__*/ jsx(IconButton, {
-                            "data-testid": "date-picker",
-                            disabled: markAsDisabled,
-                            type: "button",
-                            "aria-label": `Choose ${label}, selected date is ${formatted}`,
-                            onClick: ()=>setVisible(!visible),
-                            children: /*#__PURE__*/ jsx(FontAwesomeIcon, {
-                                icon: faCalendar
-                            })
-                        })
-                    })
-                ]
-            }),
-            visible && /*#__PURE__*/ jsx(CalendarWrapper, {
-                ref: setPopperElement,
-                style: styles.popper,
-                ...attributes.popper,
-                children: /*#__PURE__*/ jsx(Calendar, {
-                    id: name,
-                    selectedDate: value,
-                    onDateChange: selectDate
-                })
-            })
-        ]
-    });
-};
-const DatePicker = ({ disabled = false, helpText = null, label, name, readOnly = false, spacing = 'md' })=>/*#__PURE__*/ jsx(Field, {
-        component: InnerDatePicker,
-        disabled: disabled,
-        helpText: helpText,
-        id: name,
-        label: label,
-        name: name,
-        readOnly: readOnly,
-        spacing: spacing
-    });
-
-const UploadInput = styled.input`
-  ${({ $active })=>`
-    cursor: ${$active ? 'text' : 'pointer'};
-    height: 44px;
-    left: 0;
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-  `}
-`;
-const InnerFileUpload = styled.div`
-  display: flex;
-`;
-const UploadButton = styled(Button)`
-  height: 44px;
-`;
-const InputContainer = styled.div`
-  flex-grow: 1;
-  position: relative;
-`;
-const InternalFileUpload = ({ accept, buttonText, disabled, field, form, helpText, label, loading, onSelect, spacing })=>{
-    const [active, setActive] = useState(false);
-    const { errors, touched } = form;
-    const { name } = field;
-    const [fileName, setFileName] = useState('');
-    const error = useInputValidation(name, errors, touched);
-    const onChange = (e)=>{
-        if (e.target.files && e.target.files.length > 0) {
-            const file = e.target.files[0];
-            setFileName(file.name);
-            Promise.resolve(onSelect(file, form)).then(async ()=>{
-                await form.setFieldTouched(name, true);
-            }).catch(()=>{});
-        }
-    };
-    const onClick = ()=>{
-        const input = document.getElementById(name);
-        input.click();
-    };
-    useEffect(()=>{
-        setActive(!!fileName);
-    }, [
-        fileName
-    ]);
-    return /*#__PURE__*/ jsx(InputWrapper, {
-        error: error,
-        helpText: helpText,
-        message: getIn(errors, name),
-        name: name,
-        spacing: spacing,
-        children: /*#__PURE__*/ jsxs(InnerFileUpload, {
-            children: [
-                /*#__PURE__*/ jsxs(InputContainer, {
-                    children: [
-                        /*#__PURE__*/ jsx(Label, {
-                            htmlFor: name,
-                            active: active,
-                            error: error,
-                            children: label
-                        }),
-                        /*#__PURE__*/ jsx(LikeInput, {
-                            $disabled: disabled,
-                            children: fileName
-                        }),
-                        /*#__PURE__*/ jsx(UploadInput, {
-                            $active: active,
-                            id: name,
-                            disabled: disabled,
-                            type: "file",
-                            accept: accept,
-                            onChange: onChange
-                        }),
-                        /*#__PURE__*/ jsx("input", {
-                            ...field,
-                            type: "hidden",
-                            disabled: disabled
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx(UploadButton, {
-                    colour: "secondary",
-                    disabled: disabled,
-                    loading: loading,
-                    onClick: onClick,
-                    children: buttonText
-                })
-            ]
-        })
-    });
-};
-const FileUpload = ({ accept, buttonText, disabled = false, helpText, label, loading = false, name, onSelect, spacing = 'md' })=>/*#__PURE__*/ jsx(Field, {
-        component: InternalFileUpload,
-        accept: accept,
-        buttonText: buttonText,
-        disabled: disabled,
-        helpText: helpText,
-        label: label,
-        loading: loading,
-        name: name,
-        onSelect: onSelect,
-        spacing: spacing
-    });
-
-const RowContainer = styled.div`
-  ${({ $columns, $gutter })=>`
-    display: grid;
-    gap: ${$gutter};
-    grid-template-columns: repeat(${$columns},1fr);
-  `}
-`;
-const Row = ({ children, columns = 12, gutter = '1rem' })=>/*#__PURE__*/ jsx(RowContainer, {
-        $columns: columns,
-        $gutter: gutter,
-        children: children
-    });
-
-const isObject = (value)=>typeof value === 'object' && !Array.isArray(value) && value !== null;
-function encodeNullValues(values) {
-    const initialValues = {
-        ...values
-    };
-    return Object.keys(initialValues).reduce((aggregate, key)=>{
-        const value = initialValues[key];
-        if (value === null) {
-            return {
-                ...aggregate,
-                [key]: ''
-            };
-        }
-        if (isObject(value)) {
-            return {
-                ...aggregate,
-                [key]: encodeNullValues(value)
-            };
-        }
-        return {
-            ...aggregate,
-            [key]: value
-        };
-    }, {});
-}
-function formNormaliser(values) {
-    return encodeNullValues({
-        ...values
-    });
-}
-function Form({ children, cancel = null, initialValues, loading = false, onPreSubmit, onSubmit, submitLabel, validationSchema }) {
-    const doSubmit = async (values)=>{
-        const payload = onPreSubmit ? await Promise.resolve(onPreSubmit(values)) : values;
-        await Promise.resolve(onSubmit(payload));
-    };
-    return /*#__PURE__*/ jsx(Formik, {
-        validateOnMount: true,
-        initialValues: formNormaliser(initialValues),
-        validationSchema: validationSchema,
-        onSubmit: doSubmit,
-        children: ({ isValid })=>/*#__PURE__*/ jsx(Form$1, {
-                autoComplete: "off",
-                "aria-label": "form",
-                children: /*#__PURE__*/ jsxs(Row, {
-                    children: [
-                        /*#__PURE__*/ jsx(Col, {
-                            children: children
-                        }),
-                        /*#__PURE__*/ jsx(Col, {
-                            children: /*#__PURE__*/ jsxs(Row, {
-                                children: [
-                                    /*#__PURE__*/ jsx(Col, {
-                                        xs: 12,
-                                        md: cancel ? 3 : 6,
-                                        mdOffset: 7,
-                                        children: /*#__PURE__*/ jsx(Button, {
-                                            block: true,
-                                            type: "submit",
-                                            colour: "success",
-                                            disabled: !isValid,
-                                            size: "lg",
-                                            loading: loading,
-                                            children: submitLabel
-                                        })
-                                    }),
-                                    cancel && /*#__PURE__*/ jsx(Col, {
-                                        xs: 12,
-                                        md: 3,
-                                        children: cancel
-                                    })
-                                ]
-                            })
-                        })
-                    ]
-                })
-            })
-    });
-}
-
-const Link = (props)=>// eslint-disable-next-line react/jsx-props-no-spreading
-    /*#__PURE__*/ jsx(BaseLink, {
-        as: Link$1,
-        ...props
-    });
-
-const InternalLink = ({ className, colour, block, ...rest })=>// eslint-disable-next-line react/jsx-props-no-spreading
-    /*#__PURE__*/ jsx(Link$1, {
-        className: className,
-        ...rest
-    });
-const LinkButton = ({ block = false, colour = 'primary', size = 'md', ...rest })=>/*#__PURE__*/ jsx(ThemeProvider, {
-        theme: buttonTheme,
-        children: /*#__PURE__*/ jsx(BaseButton, {
-            as: InternalLink,
-            block: block,
-            colour: colour,
-            size: size,
-            ...rest
-        })
-    });
-
-const MasonryItem = styled.div`
-  ${({ $gutter })=>`
-    margin-bottom: ${$gutter};
-  `}
-`;
-const calculateCols = (cols)=>12 / cols;
-const Masonry = ({ children, gutter = '1rem', lg, md, sm, xs })=>{
-    const breakpoints = {
-        lg,
-        md,
-        sm,
-        xs
-    };
-    const breakpoint = useBreakpoint();
-    const columns = breakpoints[breakpoint];
-    const cols = Array.from(new Array(columns), ()=>[]);
-    const flat = Array.isArray(children) ? children.flat() : [
-        children
-    ];
-    flat.forEach((child, i)=>{
-        const colIndex = i % columns;
-        cols[colIndex].push(// eslint-disable-next-line react/no-array-index-key
-        /*#__PURE__*/ jsx(MasonryItem, {
-            $gutter: gutter,
-            children: child
-        }, i));
-    });
-    return /*#__PURE__*/ jsx(Row, {
-        gutter: gutter,
-        children: cols.map((_, i)=>/*#__PURE__*/ jsx(Col, {
-                xs: calculateCols(xs),
-                sm: calculateCols(sm),
-                md: calculateCols(md),
-                lg: calculateCols(lg),
-                children: cols[i]
-            }, i))
-    });
-};
-
-const Overlay = styled.div`
-  background: rgba(0, 0, 0, 0.5);
-  bottom: 0;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 1000;
-`;
-
-const ModalOuter = styled.div`
-  bottom: 0;
-  left: 0;
-  outline: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 1100;
-`;
-const ModalContent = styled.div`
-  outline: 0;
-  position: relative;
-  width: 100%;
-  pointer-events: auto;
-`;
-const ModalDialog = styled.div`
-  box-shadow:
-    0 3px 5px -1px rgba(0, 0, 0, 0.2),
-    0 5px 8px 0 rgba(0, 0, 0, 0.14),
-    0 1px 14px 0 rgba(0, 0, 0, 0.12);
-  margin: 5rem auto;
-  max-width: ${({ size })=>size === 'sm' ? '500px' : '90vw'};
-  pointer-events: none;
-  position: relative;
-`;
-const Modal = ({ children, isOpen, onDismiss, size = 'sm', title })=>{
-    const doNotDismiss = (e)=>{
-        e.stopPropagation();
-    };
-    useEffect(()=>{
-        const keyboardEvent = (e)=>{
-            if (e.key === 'Escape') {
-                onDismiss();
-            }
-        };
-        document.addEventListener('keydown', keyboardEvent, false);
-        return ()=>{
-            document.body.style.removeProperty('overflow');
-            document.removeEventListener('keydown', keyboardEvent, false);
-        };
-    }, [
-        onDismiss
-    ]);
-    useEffect(()=>{
-        if (isOpen) {
-            document.body.style.overflow = 'hidden';
-        }
-    }, [
-        isOpen
-    ]);
-    if (isOpen) {
-        return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsxs(Suspense, {
-            fallback: /*#__PURE__*/ jsx(Loader, {}),
-            children: [
-                /*#__PURE__*/ jsx(ModalOuter, {
-                    "aria-modal": true,
-                    "aria-label": title,
-                    role: "dialog",
-                    tabIndex: -1,
-                    onClick: onDismiss,
-                    children: /*#__PURE__*/ jsx(ModalDialog, {
-                        size: size,
-                        role: "document",
-                        children: /*#__PURE__*/ jsx(ModalContent, {
-                            onClick: doNotDismiss,
-                            children: /*#__PURE__*/ jsx(Card, {
-                                padding: "lg",
-                                children: children
-                            })
-                        })
-                    })
-                }),
-                /*#__PURE__*/ jsx(Overlay, {})
-            ]
-        }), document.body);
-    }
-    return null;
-};
-
-const NotificationArrow = styled.div`
-  height: 0;
-  position: absolute;
-  width: 0;
-  border-bottom: 5px solid #007fa8;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  top: -5px;
-`;
-const NotificationButton = styled(Button)`
-  background: none;
-  color: inherit;
-
-  :hover {
-    background: none;
-    color: inherit;
-  }
-`;
-const NotificationContainer = styled.div`
-  box-shadow:
-    0 3px 5px -1px rgba(0, 0, 0, 0.2),
-    0 5px 8px 0 rgba(0, 0, 0, 0.14),
-    0 1px 14px 0 rgba(0, 0, 0, 0.12);
-`;
-const NotificationWrapper = styled.div`
-  position: relative;
-`;
-const AlertWrapper = styled.div`
-  background-color: rgb(199, 56, 79);
-  border-radius: 50%;
-  color: #fff;
-  padding: 5px;
-  pointer-events: none;
-  position: absolute;
-  right: 5px;
-  top: -5px;
-  transform: scale(0.5);
-  z-index: 1;
-`;
-const NotificationAlert = ()=>/*#__PURE__*/ jsx(AlertWrapper, {
-        children: /*#__PURE__*/ jsx(FontAwesomeIcon, {
-            icon: faAsterisk
-        })
-    });
-function Notifications({ alert, cols = 1, items, label, noResults, onClose, placement = 'bottom', row }) {
-    const isFirstRun = useRef(true);
-    const [visible, setVisible] = useState(false);
-    const [referenceElement, setReferenceElement] = useState(null);
-    const [arrowElement, setArrowElement] = useState(null);
-    const [popperElement, setPopperElement] = useState(null);
-    const { attributes, styles } = usePopper(referenceElement, popperElement, {
-        modifiers: [
-            {
-                name: 'arrow',
-                options: {
-                    element: arrowElement
-                }
-            }
-        ],
-        placement,
-        strategy: 'fixed'
-    });
-    const toggleNotifications = ()=>{
-        setVisible(!visible);
-    };
-    useOutsideClick(referenceElement, ()=>{
-        setVisible(false);
-    });
-    useEffect(()=>{
-        if (isFirstRun.current) {
-            isFirstRun.current = false;
-            return;
-        }
-        if (!visible) {
-            Promise.resolve().then(onClose, ()=>{});
-        }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        visible
-    ]);
-    return /*#__PURE__*/ jsxs(NotificationWrapper, {
-        ref: setReferenceElement,
-        children: [
-            alert && /*#__PURE__*/ jsx(NotificationAlert, {}),
-            /*#__PURE__*/ jsx(NotificationButton, {
-                "aria-label": label,
-                size: "sm",
-                onClick: toggleNotifications,
-                children: /*#__PURE__*/ jsx(FontAwesomeIcon, {
-                    icon: faBell
-                })
-            }),
-            visible && /*#__PURE__*/ jsxs(NotificationContainer, {
-                ref: setPopperElement,
-                style: styles.popper,
-                ...attributes.popper,
-                children: [
-                    /*#__PURE__*/ jsx(DataTable, {
-                        header: /*#__PURE__*/ jsx(TableCell, {
-                            as: "th",
-                            align: "left",
-                            colSpan: cols,
-                            children: label
-                        }),
-                        items: items,
-                        noResults: noResults,
-                        row: row
-                    }),
-                    /*#__PURE__*/ jsx(NotificationArrow, {
-                        ref: setArrowElement,
-                        style: styles.arrow
-                    })
-                ]
-            })
-        ]
-    });
-}
-
-const PageTitleTypography = styled(Typography)`
-  line-height: 1.4;
-  margin: 0 0 0.2rem;
-`;
-const TitleInner = styled.span`
-  background-color: #007fa8;
-  box-decoration-break: clone;
-  color: #fff;
-  display: inline;
-  padding: 0.25rem 0.5rem;
-`;
-const SubTitleInner = styled.span`
-  background-color: #f8f8f8;
-  box-decoration-break: clone;
-  color: #000;
-  display: inline;
-  padding: 0.25rem 0.5rem;
-`;
-const Split = styled.hr`
-  border: 0;
-  margin: 0;
-  padding: 0;
-`;
-const Wrapper$1 = styled.div`
-  margin-bottom: 1rem;
-  padding: 0 0.25rem 0 0;
-`;
-const PageTitle = ({ subTitle = null, title })=>/*#__PURE__*/ jsxs(Wrapper$1, {
-        children: [
-            /*#__PURE__*/ jsx(PageTitleTypography, {
-                component: "h2",
-                variant: "h2",
-                children: /*#__PURE__*/ jsx(TitleInner, {
-                    children: title
-                })
-            }),
-            /*#__PURE__*/ jsx(Split, {}),
-            subTitle && /*#__PURE__*/ jsx(PageTitleTypography, {
-                component: "p",
-                variant: "lead",
-                margin: "none",
-                children: /*#__PURE__*/ jsx(SubTitleInner, {
-                    children: subTitle
-                })
-            })
-        ]
-    });
-
-const ProgressBarInternal = styled.progress`
-  appearance: none;
-  background-color: ${rgba('#007fa8', 0.25)};
-  border: none;
-  height: 20px;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-
-  &::-webkit-progress-bar {
-    background-color: ${rgba('#007fa8', 0.25)};
-    height: 20px;
-  }
-
-  &::-webkit-progress-value {
-    background-color: #007fa8;
-    height: 20px;
-  }
-
-  &::-moz-progress-bar {
-    background-color: #007fa8;
-    height: 20px;
-  }
-`;
-const ProgressBar = ({ max = 100, progress })=>/*#__PURE__*/ jsx(ProgressBarInternal, {
-        max: max,
-        value: progress
-    });
-
-const InternalRadio = ({ disabled, field, form, helpText, label, onChange, options, readOnly, spacing })=>{
-    const { errors, handleChange, setFieldValue, touched } = form;
-    const error = useInputValidation(field.name, errors, touched);
-    const markAsDisabled = disabled || readOnly;
-    const doChange = (e, value)=>{
-        handleChange(e);
-        setFieldValue(field.name, value).catch(()=>{});
-        if (onChange) {
-            onChange(e, form);
-        }
-    };
-    return /*#__PURE__*/ jsxs(FieldSet, {
-        error: error,
-        helpText: helpText,
-        message: getIn(errors, field.name),
-        name: field.name,
-        spacing: spacing,
-        children: [
-            /*#__PURE__*/ jsx(Legend, {
-                error: error,
-                children: label
-            }),
-            options.map(({ name, value })=>/*#__PURE__*/ jsxs(OptionLabel, {
-                    disabled: disabled,
-                    selected: field.value === value,
-                    children: [
-                        /*#__PURE__*/ jsx(CheckableInput, {
-                            ...field,
-                            checked: field.value === value,
-                            disabled: markAsDisabled,
-                            readOnly: readOnly,
-                            type: "radio",
-                            value: value,
-                            onChange: (e)=>doChange(e, value)
-                        }),
-                        /*#__PURE__*/ jsx(OptionLabelText, {
-                            children: name
-                        })
-                    ]
-                }, value)),
-            readOnly && /*#__PURE__*/ jsx("input", {
-                type: "hidden",
-                ...field
-            })
-        ]
-    });
-};
-const Radio = ({ disabled = false, helpText = null, label, name, onChange, options, readOnly = false, spacing = 'md' })=>/*#__PURE__*/ jsx(Field, {
-        id: name,
-        component: InternalRadio,
-        disabled: disabled,
-        helpText: helpText,
-        name: name,
-        onChange: onChange,
-        options: options,
-        readOnly: readOnly,
-        label: label,
-        spacing: spacing
-    });
-
-const ScrollToTop = ()=>{
-    const { pathname } = useLocation();
-    useEffect(()=>{
-        window.scrollTo(0, 0);
-    }, [
-        pathname
-    ]);
-    return null;
-};
-
-const BaseSelectInput = styled.select`
-  ${({ $active, $readOnly })=>`
-    appearance: none;
-    background: #fff;
-    border: none;
-    color: ${$active ? '#333' : '#fff'};
-    cursor: pointer;
-    font-size: 16px;
-    outline: 0;
-    padding: 16px 0 10px;
-    width: 100%;
-
-    ${$readOnly ? `
-      :disabled {
-        color: ${$active ? '#333' : '#fff'};
-      }
-    ` : `
-      :disabled {
-        color: ${$active ? '#767676' : '#fff'};
-      }
-    `}
-  `}
-`;
-const SelectInput = ({ active, describedBy, errors, readOnly, ...rest })=>/*#__PURE__*/ jsx(BaseSelectInput, {
-        $active: active,
-        $readOnly: readOnly,
-        "aria-describedby": errors ? describedBy : undefined,
-        ...rest
-    });
-const IconOuter = styled.div`
-  margin-top: -21px;
-  pointer-events: none;
-  position: absolute;
-  right: 38px;
-  top: 50%;
-  z-index: 1;
-`;
-const IconInner = styled.div`
-  color: #767676;
-  cursor: pointer;
-  display: block;
-  height: 42px;
-  line-height: 42px;
-  text-align: center;
-  width: 42px;
-`;
-const InternalSelect = ({ active, disabled, field, form, helpText, label, onChange, options, readOnly, placeholder, setFocus, spacing, ...props })=>{
-    useEffect(()=>{
-        const focus = !!field.value || field.value === 0;
-        setFocus(focus);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    const { onBlur, ...rest } = field;
-    const { errors, handleBlur, handleChange, touched } = form;
-    const error = useInputValidation(field.name, errors, touched);
-    const markAsDisabled = disabled || readOnly;
-    const describedBy = `${field.name}-error`;
-    const doBlur = (e)=>{
-        handleBlur(e);
-        if (!field.value && field.value !== 0) {
-            setFocus(false);
-        }
-        onBlur(e);
-    };
-    const doChange = (e)=>{
-        handleChange(e);
-        if (onChange) {
-            onChange(e, form);
-        }
-    };
-    const doFocus = ()=>{
-        if (!field.value && field.value !== 0) {
-            setFocus(true);
-        }
-    };
-    return /*#__PURE__*/ jsxs(InputWrapper, {
-        error: error,
-        helpText: helpText,
-        message: getIn(errors, field.name),
-        name: field.name,
-        spacing: spacing,
-        children: [
-            /*#__PURE__*/ jsx(Label, {
-                htmlFor: field.name,
-                active: active,
-                error: error,
-                children: label
-            }),
-            /*#__PURE__*/ jsxs(SelectInput, {
-                ...props,
-                ...rest,
-                active: active,
-                describedBy: describedBy,
-                disabled: markAsDisabled,
-                errors: error,
-                onBlur: doBlur,
-                onChange: doChange,
-                onFocus: doFocus,
-                readOnly: readOnly,
-                children: [
-                    /*#__PURE__*/ jsx("option", {
-                        disabled: true,
-                        value: "",
-                        children: placeholder
-                    }),
-                    options.map(({ name, value })=>/*#__PURE__*/ jsx("option", {
-                            value: value,
-                            children: name
-                        }, value))
-                ]
-            }),
-            /*#__PURE__*/ jsx(IconOuter, {
-                children: /*#__PURE__*/ jsx(IconInner, {
-                    children: /*#__PURE__*/ jsx(FontAwesomeIcon, {
-                        icon: faAngleDown
-                    })
-                })
-            }),
-            readOnly && /*#__PURE__*/ jsx("input", {
-                type: "hidden",
-                ...field
-            })
-        ]
-    });
-};
-const Select = ({ disabled = false, helpText = null, label, name, onChange, options, placeholder, readOnly = false, spacing = 'md' })=>{
-    const [focus, setFocus] = useState();
-    return /*#__PURE__*/ jsx(Field, {
-        id: name,
-        component: InternalSelect,
-        active: focus,
-        disabled: disabled,
-        helpText: helpText,
-        name: name,
-        onChange: onChange,
-        options: options,
-        placeholder: placeholder,
-        readOnly: readOnly,
-        setFocus: setFocus,
-        label: label,
-        spacing: spacing
-    });
-};
-
-const Stepper = ({ children, enableNext = ()=>true, nextLabel, onComplete, onStart, previousLabel, start = 0 })=>{
-    const [step, setStep] = useState(start);
-    const activeStep = Children.toArray(children)[step];
-    const steps = Children.count(children) - 1;
-    const next = ()=>{
-        setStep(step + 1);
-    };
-    const showNext = step < steps;
-    const previous = ()=>{
-        setStep(step - 1);
-    };
-    const disablePrevious = step === 0;
-    const progress = step / steps * 100;
-    const showOnStart = disablePrevious && onStart;
-    return /*#__PURE__*/ jsxs(Row, {
-        children: [
-            /*#__PURE__*/ jsx(Col, {
-                children: activeStep
-            }),
-            /*#__PURE__*/ jsx(Col, {
-                children: /*#__PURE__*/ jsx(Row, {
-                    children: /*#__PURE__*/ jsxs(Col, {
-                        xs: 12,
-                        md: 6,
-                        mdOffset: 7,
-                        children: [
-                            /*#__PURE__*/ jsx(Card, {
-                                padding: "none",
-                                children: /*#__PURE__*/ jsx(ProgressBar, {
-                                    progress: progress
-                                })
-                            }),
-                            /*#__PURE__*/ jsx(Card, {
-                                padding: "lg",
-                                children: /*#__PURE__*/ jsxs(Row, {
-                                    children: [
-                                        /*#__PURE__*/ jsxs(Col, {
-                                            xs: 12,
-                                            md: 6,
-                                            children: [
-                                                showOnStart && onStart,
-                                                !showOnStart && /*#__PURE__*/ jsx(Button, {
-                                                    block: true,
-                                                    disabled: disablePrevious,
-                                                    size: "lg",
-                                                    onClick: previous,
-                                                    children: previousLabel
-                                                })
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ jsxs(Col, {
-                                            xs: 12,
-                                            md: 6,
-                                            align: "right",
-                                            children: [
-                                                showNext && /*#__PURE__*/ jsx(Button, {
-                                                    block: true,
-                                                    disabled: !enableNext(step),
-                                                    size: "lg",
-                                                    onClick: next,
-                                                    children: nextLabel
-                                                }),
-                                                !showNext && onComplete
-                                            ]
-                                        })
-                                    ]
-                                })
-                            })
-                        ]
-                    })
-                })
-            })
-        ]
-    });
-};
-
-const BaseTextBox = styled.input`
-  ${({ $active })=>`
-    background: #fff;
-    border: none;
-    color: ${$active ? '#333' : '#fff'};
-    cursor: ${$active ? 'text' : 'pointer'};
-    font-size: 16px;
-    outline: 0;
-    padding: 16px 0 10px;
-    width: 100%;
-
-    :disabled {
-      color: #767676;
-    }
-
-    ::placeholder {
-      color: ${$active ? '#767676' : '#fff'};
-    }
-
-    :-ms-input-placeholder {
-      color: ${$active ? '#767676' : '#fff'};
-    }
-
-    ::-ms-input-placeholder {
-      color: ${$active ? '#767676' : '#fff'};
-    }
-
-    ::-webkit-outer-spin-button,
-    ::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-
-    [type="number"] {
-      -moz-appearance: textfield;
-    }
-  `}
-`;
-const Input = ({ active, describedBy, errors, ...rest })=>/*#__PURE__*/ jsx(BaseTextBox, {
-        $active: active,
-        "aria-describedby": errors ? describedBy : undefined,
-        ...rest
-    });
-const InternalTextBox = ({ active, decimalScale, field, format, form, helpText, label, onChange, prefix, setFocus, spacing, suffix, ...props })=>{
-    useEffect(()=>{
-        const focus = !!field.value || field.value === 0;
-        setFocus(focus);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        field.value
-    ]);
-    const { onBlur, ...rest } = field;
-    const { errors, handleBlur, handleChange, setFieldValue, touched } = form;
-    const error = useInputValidation(field.name, errors, touched);
-    const describedBy = `${field.name}-error`;
-    const useNumberFormat = Boolean(decimalScale || format || prefix || suffix);
-    const doBlur = (e)=>{
-        handleBlur(e);
-        if (!field.value && field.value !== 0) {
-            setFocus(false);
-        }
-        onBlur(e);
-    };
-    const doFocus = ()=>{
-        if (!field.value && field.value !== 0) {
-            setFocus(true);
-        }
-    };
-    const doValueChange = ({ floatValue, formattedValue })=>{
-        if (format) {
-            setFieldValue(field.name, formattedValue).catch(()=>{});
-        } else {
-            setFieldValue(field.name, floatValue).catch(()=>{});
-        }
-    };
-    const doChange = (e)=>{
-        if (!useNumberFormat) {
-            handleChange(e);
-        }
-        if (onChange) {
-            Promise.resolve(onChange(e, form)).catch(()=>{});
-        }
-    };
-    return /*#__PURE__*/ jsxs(InputWrapper, {
-        error: error,
-        helpText: helpText,
-        message: getIn(errors, field.name),
-        name: field.name,
-        spacing: spacing,
-        children: [
-            /*#__PURE__*/ jsx(Label, {
-                htmlFor: field.name,
-                active: active,
-                error: error,
-                children: label
-            }),
-            (()=>{
-                if (useNumberFormat) {
-                    if (format) {
-                        return /*#__PURE__*/ jsx(PatternFormat, {
-                            ...props,
-                            ...rest,
-                            valueIsNumericString: Boolean(prefix || suffix),
-                            customInput: Input,
-                            format: format,
-                            inputMode: "decimal",
-                            prefix: prefix,
-                            active: active,
-                            describedBy: describedBy,
-                            errors: error,
-                            onBlur: doBlur,
-                            onChange: doChange,
-                            onFocus: doFocus,
-                            onValueChange: doValueChange
-                        });
-                    }
-                    return /*#__PURE__*/ jsx(NumericFormat, {
-                        ...props,
-                        ...rest,
-                        valueIsNumericString: Boolean(prefix || suffix),
-                        customInput: Input,
-                        decimalScale: decimalScale,
-                        fixedDecimalScale: !!decimalScale,
-                        inputMode: "decimal",
-                        prefix: prefix,
-                        suffix: suffix,
-                        active: active,
-                        describedBy: describedBy,
-                        errors: error,
-                        onBlur: doBlur,
-                        onChange: doChange,
-                        onFocus: doFocus,
-                        onValueChange: doValueChange
-                    });
-                }
-                return /*#__PURE__*/ jsx(Input, {
-                    ...props,
-                    ...rest,
-                    active: active,
-                    describedBy: describedBy,
-                    errors: error,
-                    onBlur: doBlur,
-                    onChange: doChange,
-                    onFocus: doFocus
-                });
-            })()
-        ]
-    });
-};
-const TextBox = ({ decimalScale, disabled = false, format, helpText = null, label, name, onChange, placeholder = '', prefix, readOnly = false, spacing = 'md', suffix, type = 'text' })=>{
-    const [focus, setFocus] = useState();
-    return /*#__PURE__*/ jsx(Field, {
-        id: name,
-        component: InternalTextBox,
-        decimalScale: decimalScale,
-        disabled: disabled,
-        active: focus,
-        format: format,
-        helpText: helpText,
-        type: type,
-        name: name,
-        onChange: onChange,
-        placeholder: placeholder,
-        prefix: prefix,
-        readOnly: readOnly,
-        setFocus: setFocus,
-        suffix: suffix,
-        label: label,
-        spacing: spacing
-    });
-};
-
-const ToastContainer = styled.div`
-  bottom: 0;
-  left: 1rem;
-  position: fixed;
-  right: 1rem;
-  z-index: 1800;
-`;
-const ToastContext = /*#__PURE__*/ createContext(null);
-const useToast = ()=>useContext(ToastContext);
-const generateId = ()=>{
-    const array = new Uint32Array(2);
-    const output = crypto.getRandomValues(array);
-    return output[0].toString(36).substring(2, 15) + output[1].toString(36).substring(2, 15);
-};
-const selectIcon = (alertType)=>{
-    switch(alertType){
-        case 'danger':
-            return faExclamationTriangle;
-        case 'success':
-            return faCheckCircle;
-        case 'primary':
-        case 'secondary':
-        default:
-            return faExclamationCircle;
-    }
-};
-const ToastProvider = ({ children })=>{
-    const [toasts, setToasts] = useState([]);
-    const add = useCallback(({ colour, message, onDismiss })=>{
-        const id = generateId();
-        setToasts([
-            ...toasts,
-            {
-                colour,
-                id,
-                message,
-                onDismiss
-            }
-        ]);
-    }, [
-        toasts
-    ]);
-    const remove = useCallback((id)=>{
-        setToasts((value)=>{
-            const item = value.findIndex((t)=>t.id === id);
-            if (value[item]?.onDismiss) {
-                value[item].onDismiss();
-            }
-            if (item !== -1) {
-                value.splice(item, 1);
-            }
-            return value;
-        });
-    }, []);
-    const value = useMemo(()=>({
-            add,
-            remove
-        }), [
-        add,
-        remove
-    ]);
-    return /*#__PURE__*/ jsxs(ToastContext.Provider, {
-        value: value,
-        children: [
-            children,
-            /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(ToastContainer, {
-                children: toasts.map(({ colour, id, message })=>/*#__PURE__*/ jsx(Alert, {
-                        spacing: "lg",
-                        dismissable: 5000,
-                        icon: /*#__PURE__*/ jsx(FontAwesomeIcon, {
-                            icon: selectIcon(colour)
-                        }),
-                        colour: colour,
-                        message: message,
-                        onDismiss: ()=>{
-                            remove(id);
-                        }
-                    }, id))
-            }), document.body)
-        ]
-    });
-};
-
-const TypeaheadWrapper = styled.div`
-  position: relative;
-`;
-const Suggestions = styled.div`
-  width: 100%;
-  z-index: 10;
-`;
-const Suggestion = styled(Button)`
-  padding-left: 8px;
-  padding-right: 8px;
-  text-align: left;
-`;
-const Typeahead = ({ suggestions, ...rest })=>{
-    const { name } = rest;
-    const [filteredSuggestions, setFilteredSuggestions] = useState(suggestions);
-    const [referenceElement, setReferenceElement] = useState(null);
-    const [popperElement, setPopperElement] = useState(null);
-    const [visible, setVisible] = useState(false);
-    const [form, setForm] = useState();
-    const { attributes, styles } = usePopper(referenceElement, popperElement, {
-        placement: 'bottom'
-    });
-    const setValue = (value)=>{
-        form.setFieldValue(name, value).catch(()=>{});
-        setVisible(false);
-    };
-    useOutsideClick(referenceElement, ()=>{
-        setVisible(false);
-    });
-    return /*#__PURE__*/ jsxs(TypeaheadWrapper, {
-        ref: setReferenceElement,
-        children: [
-            /*#__PURE__*/ jsx(TextBox, {
-                type: "text",
-                onChange: (e, context)=>{
-                    if (!form) {
-                        setForm(context);
-                    }
-                    const input = e.currentTarget.value;
-                    const filter = suggestions.filter(({ name: suggestion })=>suggestion.toLowerCase().indexOf(input.toLowerCase()) > -1);
-                    setFilteredSuggestions(filter);
-                    if (visible) {
-                        setVisible(!!input);
-                    } else {
-                        setVisible(true);
-                    }
-                },
-                ...rest
-            }),
-            visible && /*#__PURE__*/ jsx(Suggestions, {
-                ref: setPopperElement,
-                style: styles.popper,
-                ...attributes.popper,
-                children: [
-                    ...filteredSuggestions
-                ].sort((a, b)=>a.name.localeCompare(b.name)).map(({ name: suggestion, value })=>/*#__PURE__*/ jsx(Suggestion, {
-                        block: true,
-                        colour: "secondary",
-                        size: "sm",
-                        onClick: ()=>setValue(value),
-                        children: suggestion
-                    }, value))
-            })
-        ]
-    });
-};
-
-const Wrapper = styled.div`
-  margin: 100px 0;
-  padding: 1rem;
-`;
-const Window = ({ children })=>/*#__PURE__*/ jsx(Wrapper, {
-        children: /*#__PURE__*/ jsx(Row, {
-            children: /*#__PURE__*/ jsx(Col, {
-                sm: 8,
-                smOffset: 3,
-                md: 6,
-                mdOffset: 4,
-                lg: 4,
-                lgOffset: 5,
-                children: children
-            })
-        })
-    });
-
-export { Alert, AppBar, Avatar, BaseStyles, Breakpoint, Button, ButtonLink, Calendar, Card, CheckBox, Col, Content, DataTable, DatePicker, DateTime, FileUpload, Form, Link, LinkButton, Loader, Masonry, Modal, Notifications, Overlay, PageTitle, ProgressBar, Radio, Row, ScrollToTop, Select, Stepper, Table, TableBody, TableCell, TableHead, TableRow, TextBox, ToastContext, ToastProvider, Tooltip, Typeahead, Typography, Window, formatDateTime, useBreakpoint, useOutsideClick, useToast, useWindowSize };
-//# sourceMappingURL=index.esm.js.map