quicksnack 3.34.3 → 3.35.0

package/dist/bundle.js

@@ -1,2199 +0,0 @@
-'use strict';
-
-var React = require('react');
-var styledComponents = require('styled-components');
-var polished = require('polished');
-var isPropValid = require('@emotion/is-prop-valid');
-var clsx = require('clsx');
-var immer = require('immer');
-var _chunk = require('lodash.chunk');
-var _difference = require('lodash.difference');
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise */
-
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-const SPACING = 4;
-const BLACK = 'rgba(0,0,0,.87)';
-const WHITE = '#fff';
-const darkenPalette = (amount, palette, colorsToDarken) => Object
-    .entries(palette)
-    .reduce((acc, [key, val]) => (Object.assign(Object.assign({}, acc), { [key]: colorsToDarken.includes(key)
-        ? polished.shade(amount, val)
-        : val })), palette);
-const createButtonPalette = (_a) => {
-    var { colorsToDarken } = _a, palette = __rest(_a, ["colorsToDarken"]);
-    return ({
-        idle: palette,
-        hover: darkenPalette(.1, palette, colorsToDarken),
-        active: darkenPalette(.2, palette, colorsToDarken),
-    });
-};
-const createPanePalette = (palette) => ({
-    main: {
-        idle: palette,
-        hover: darkenPalette(.05, palette, ['background'])
-    },
-    alternate: {
-        idle: darkenPalette(.02, palette, ['background']),
-        hover: darkenPalette(.05, palette, ['background']),
-    }
-});
-const theme = {
-    spacing: (...args) => args.map(arg => `${arg * SPACING}px`).join(' '),
-    palette: {
-        common: {
-            black: BLACK,
-            white: WHITE,
-        },
-        colors: {
-            blue: '#007bff',
-            indigo: '#6610f2',
-            purple: '#6f42c1',
-            pink: '#e83e8c',
-            red: '#e83e3e',
-            orange: '#fd7e14',
-            yellow: '#ffc107',
-            green: '#23B294',
-            teal: '#20c997',
-            cyan: '#17a2b8',
-            gray: '#6c757d',
-            grayDark: '#343a40',
-            light: '#f8f9fa',
-            dark: '#343a40',
-        },
-        form: {
-            hint: '#C7C7C7',
-            error: '#9f3a38',
-        },
-        button: {
-            basic: createButtonPalette({
-                colorsToDarken: ['background', 'text'],
-                background: WHITE,
-                text: BLACK,
-            }),
-            default: createButtonPalette({
-                colorsToDarken: ['background', 'text'],
-                background: '#e0e1e2',
-                text: BLACK,
-            }),
-            text: {
-                idle: {
-                    text: '#999c9e',
-                    background: 'transparent'
-                },
-                active: {
-                    text: BLACK,
-                    background: 'transparent'
-                },
-                hover: {
-                    text: BLACK,
-                    background: 'transparent'
-                }
-            },
-            danger: createButtonPalette({
-                colorsToDarken: ['background'],
-                background: '#EC5969',
-                text: WHITE,
-            }),
-            primary: createButtonPalette({
-                colorsToDarken: ['background'],
-                background: '#2284C4',
-                text: WHITE,
-            }),
-            secondary: createButtonPalette({
-                colorsToDarken: ['background'],
-                background: '#23B294',
-                text: WHITE
-            }),
-        },
-        pane: {
-            basic: createPanePalette({
-                text: BLACK,
-                background: WHITE,
-                border: '#ddd'
-            }),
-            emphasized: createPanePalette({
-                text: BLACK,
-                background: '#f3f3f3',
-                border: '#ddd'
-            }),
-            info: createPanePalette({
-                text: '#0c5460',
-                background: '#d1ecf1',
-                border: '#bee5eb'
-            }),
-            negative: createPanePalette({
-                text: '#721c24',
-                background: '#f8d7da',
-                border: '#f5c6cb'
-            }),
-            positive: createPanePalette({
-                text: '#155724',
-                background: '#d4edda',
-                border: '#c3e6cb',
-            }),
-            warning: createPanePalette({
-                text: '#856404',
-                background: '#fff3cd',
-                border: '#ffeeba'
-            })
-        }
-    }
-};
-
-// Fix for styled-components with react-18.
-// Can be removed once this issue is resolved.
-// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/59765#issuecomment-1092938253
-const ThemeProviderFixed = styledComponents.ThemeProvider;
-const UiProvider = ({ children, theme: themeOverride }) => (React.createElement(ThemeProviderFixed, { theme: themeOverride || theme }, children));
-
-const noop$1 = () => { };
-const UiState = React.createContext({
-    isSideMenuOpen: false,
-    closeSideMenu: noop$1,
-    openSideMenu: noop$1,
-});
-const useUiStateContext = () => React.useContext(UiState);
-const UiStateProvider = ({ children }) => {
-    const [isSideMenuOpen, setIsSideMenuOpen] = React.useState(false);
-    const handleCloseSideMenu = React.useCallback(() => setIsSideMenuOpen(false), []);
-    const handleOpenSideMenu = React.useCallback(() => setIsSideMenuOpen(true), []);
-    return (React.createElement(UiState.Provider, { value: {
-            isSideMenuOpen,
-            closeSideMenu: handleCloseSideMenu,
-            openSideMenu: handleOpenSideMenu,
-        } }, children));
-};
-
-const Wrapper$d = styledComponents.styled.div `
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
-  color: ${props => props.theme.palette.common.black};
-  font-size: 14px;
-`;
-const UiWrapper = ({ theme, children }) => (React.createElement(UiProvider, { theme: theme },
-    React.createElement(UiStateProvider, null,
-        React.createElement(Wrapper$d, null, children))));
-
-const slideInFromTop = styledComponents.keyframes `
-  0% {
-    opacity: 0;
-    transform: translateY(-5px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-`;
-const SlideInFromTop = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  animation: ${slideInFromTop} ${props => props.speed || '.3s'} ease-in 0s 1;
-`;
-
-const sharedStyles$1 = styledComponents.css `
-  margin: 0 0;  
-  padding: 0 0;
-  font-weight: 700;
-  line-height: 1.28571429em;    
-`;
-const H1 = styledComponents.styled.h1.withConfig({ shouldForwardProp: isPropValid }) `
-  font-size: 2rem;
-  min-height: 1rem;
-  ${sharedStyles$1}
-`;
-const H2 = styledComponents.styled.h2.withConfig({ shouldForwardProp: isPropValid }) `
-  font-size: 1.71428571rem;
-  ${sharedStyles$1}
-`;
-const H3 = styledComponents.styled.h3.withConfig({ shouldForwardProp: isPropValid }) `
-  font-size: 1.28571429rem;
-  ${sharedStyles$1}
-`;
-const H4 = styledComponents.styled.h4.withConfig({ shouldForwardProp: isPropValid }) `
-  font-size: 1.07142857rem;
-  ${sharedStyles$1}
-`;
-const H5 = styledComponents.styled.h5.withConfig({ shouldForwardProp: isPropValid }) `
-  font-size: 1rem;
-  ${sharedStyles$1}
-`;
-const mapping = {
-    1: H1,
-    2: H2,
-    3: H3,
-    4: H4,
-    5: H5,
-};
-const Header = (_a) => {
-    var { level = 1 } = _a, restProps = __rest(_a, ["level"]);
-    const Component = mapping[level];
-    // @ts-ignore
-    return React.createElement(Component, Object.assign({}, restProps));
-};
-
-const Paragraph = styledComponents.styled.p `
-    font-size: 14px;
-    line-height: 20px;
-    // margin: 0 0 1em;
-    margin: 0;
-`;
-
-const breakPoints = [
-    "mobile",
-    "tablet",
-    "laptop",
-    "desktop",
-];
-const BreakPointValues = {
-    mobile: 0,
-    tablet: 768,
-    laptop: 1024,
-    desktop: 1430,
-};
-/**
- * Wraps given cssRules in the corresponding media-query:
- */
-const mq = (bk, cssRules) => styledComponents.css `
-  @media screen and (min-width: ${BreakPointValues[bk]}px) {
-    ${cssRules}        
-  }        
-`;
-const isResponsiveObject = (obj) => {
-    if (typeof obj !== "object") {
-        return false;
-    }
-    const keys = Object.keys(obj);
-    for (const breakPoint of breakPoints) {
-        if (keys.includes(breakPoint)) {
-            return true;
-        }
-    }
-    return false;
-};
-/**
- * Wraps 'responsive-props' in media-queries if necessary.
- */
-const responsiveProps = (props, map) => {
-    const nonResponsiveRules = Object
-        .entries(map)
-        .filter(([key]) => props[key] !== undefined && !isResponsiveObject(props[key]))
-        .map(([key, fun]) => fun(props[key]));
-    const mediaQueries = breakPoints
-        .map(bp => {
-        // See if we can make css-rules for this breakpoint:
-        const responsiveCssRules = Object
-            .entries(map)
-            .filter(([key]) => { var _a; return ((_a = props === null || props === void 0 ? void 0 : props[key]) === null || _a === void 0 ? void 0 : _a[bp]) !== undefined; })
-            .map(([key, fun]) => fun(props[key][bp]));
-        return (responsiveCssRules.length > 0)
-            ? mq(bp, responsiveCssRules) // Wrap css-rules in a mediaQuery
-            : undefined; // Undefined -> filter out later
-    })
-        .filter(_ => _ !== undefined);
-    return [
-        mediaQueries, ...nonResponsiveRules
-    ];
-};
-
-const Box = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  box-sizing: border-box;
-  
-  ${(props) => responsiveProps(props, {
-    "p": unit => styledComponents.css `padding: ${props.theme.spacing(unit)};`,
-    "pt": unit => styledComponents.css `padding-top: ${props.theme.spacing(unit)};`,
-    "pr": unit => styledComponents.css `padding-right: ${props.theme.spacing(unit)};`,
-    "pb": unit => styledComponents.css `padding-bottom: ${props.theme.spacing(unit)};`,
-    "pl": unit => styledComponents.css `padding-left: ${props.theme.spacing(unit)};`,
-    "m": unit => styledComponents.css `margin: ${props.theme.spacing(unit)};`,
-    "mt": unit => styledComponents.css `margin-top: ${props.theme.spacing(unit)};`,
-    "mr": unit => styledComponents.css `margin-right: ${props.theme.spacing(unit)};`,
-    "mb": unit => styledComponents.css `margin-bottom: ${props.theme.spacing(unit)};`,
-    "ml": unit => styledComponents.css `margin-left: ${props.theme.spacing(unit)};`,
-    "display": unit => styledComponents.css `display: ${unit};`,
-    "flexGrow": unit => styledComponents.css `flex-grow: ${unit};`,
-    "flexShrink": unit => styledComponents.css `flex-shrink: ${unit};`,
-    "flexDirection": unit => styledComponents.css `flex-direction: ${unit};`,
-    "alignItems": unit => styledComponents.css `align-items: ${unit};`,
-    "textAlign": unit => styledComponents.css `text-align: ${unit};`,
-    "justifyContent": unit => styledComponents.css `justify-content: ${unit};`,
-    "width": unit => styledComponents.css `width: ${typeof unit === 'number' ? props.theme.spacing(unit) : unit};`,
-})}
-`;
-
-const Wrapper$c = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  border-radius: 4px;     
-  border: 1px solid ${props => props.theme.palette.pane[props.variant].main.idle.border};
-  background-color: ${props => props.theme.palette.pane[props.variant].main.idle.background};      
-  color: ${props => props.theme.palette.pane[props.variant].main.idle.text};      
-`;
-const Alert = ({ children, title, variant = "basic" }) => (React.createElement(Wrapper$c, { variant: variant },
-    React.createElement(Box, { p: 3 },
-        title && (React.createElement(Box, { pb: children ? 1 : 0 },
-            React.createElement(Header, { level: 4 }, title))),
-        children && React.createElement(Paragraph, null, children))));
-
-const green = '#20c997';
-const Mask = styledComponents.styled.g `
-    fill: none; 
-    stroke: ${green};    
-    stroke-width: 10;
-`;
-const polyLineAnimation = styledComponents.keyframes `    
-    0% {
-        stroke-dashoffset: 100px
-    }
-    100% {
-        stroke-dashoffset: 0px
-    }
-`;
-const Polyline = styledComponents.styled.polyline `
-    stroke-dasharray: 100px, 100px;
-    stroke-dashoffset: 200px;
-    animation: ${polyLineAnimation} 0.42s ease-in-out 0.8s backwards;
-    stroke: ${green};
-    stroke-width: 10;     
-`;
-const circleAnimation = styledComponents.keyframes `
-    0% {
-        stroke-dashoffset: 480px 
-    }
-    100% {
-        stroke-dashoffset: 960px
-    }
-`;
-const Circle$1 = styledComponents.styled.circle `
-    stroke-dasharray: 480px, 480px; 
-    stroke-dashoffset: 960px;
-    animation: ${circleAnimation} 0.6s ease-in-out backwards;
-    stroke: ${green};
-    stroke-width: 10;    
-`;
-const circleColoredAnimation = styledComponents.keyframes `
-    0% { 
-        opacity:0; 
-    }
-    100% { 
-        opacity:100; 
-    }
-`;
-const CircleColored = styledComponents.styled.circle `
-    stroke-dasharray: 480px, 480px; 
-    stroke-dashoffset: 960px;
-    animation: ${circleColoredAnimation} 1.2s ease-in-out 1.4s backwards;
-    fill: #effaf8;    
-`;
-const AnimatedCheckmark = () => (React.createElement("svg", { viewBox: "0 0 154 154" },
-    React.createElement(Mask, null,
-        React.createElement(Circle$1, { cx: '77', cy: '77', r: '72' }),
-        React.createElement(CircleColored, { cx: '77', cy: '77', r: '72' }),
-        React.createElement(Polyline, { points: "43.5,77.8 63.7,97.9 112.2,49.4" }))));
-
-const BreadCrumbs = styledComponents.styled.ul `
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display:flex;
-`;
-const Crumb = styledComponents.styled.li `
-  display: flex;  
- 
-  &:not(:last-of-type):after {    
-    content: "/";
-    color: ${props => props.theme.palette.colors.gray};
-    line-height: 1em;
-    content: "/";
-    margin: auto auto;
-    padding: ${props => props.theme.spacing(0, 2, 0, 0)};
-  }
-`;
-
-const Wrapper$b = styledComponents.styled.div `       
-  background-color: ${props => props.theme.palette.common.white};
-  border-radius: 4px;
-  border: 1px solid #DEDEDF;
-  box-shadow: 0px 2px 3px rgb(0 0 0 / 6%);      
-`;
-const Meta = styledComponents.styled(Box) `       
-  font-size: 12px;
-  font-style: italic;              
-`;
-const Title = styledComponents.styled(Box) `
-  ${(props) => props.panelHasChildren && styledComponents.css `
-    border-radius: 4px;   
-    border-bottom: 1px solid rgba(34,36,38,.15);
-  `}
-  
-  ${(props) => !!props.onClick && styledComponents.css `
-    cursor: pointer;
-    user-select: none;
-  `}        
-`;
-const Footer$1 = styledComponents.styled(Box) `  
-  border-radius: 4px;   
-  background-color: #FFF;
-  border-top: 1px solid rgba(34,36,38,.15);
-`;
-const Panel = ({ children, className, title, titleAction, titleMeta, onClickTitle, footer, p = 3, titleLevel = 5 }) => (React.createElement(Wrapper$b, { className: className },
-    title && (React.createElement(Title, { p: 3, panelHasChildren: !!children, display: "flex", alignItems: "center", onClick: onClickTitle },
-        React.createElement(Box, { flexGrow: 1 },
-            React.createElement(Header, { level: titleLevel }, title)),
-        titleMeta && React.createElement(Meta, null, titleMeta),
-        titleAction && React.createElement(Box, { pl: 5 }, titleAction))),
-    children && (React.createElement(Box, { p: p }, children)),
-    footer && (React.createElement(Footer$1, { p: 3 }, footer))));
-
-const Animation = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `                
-  transform: ${props => props.isOpen ? `translate(0)` : `translateY(-101%)`};  
-  transition-duration: ${props => props.duration || 0.25}s;  
-  transition-property: transform;     
-}
-`;
-const Wrapper$a = styledComponents.styled.div `
-  overflow: hidden;
-`;
-const Hider = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-   display: ${props => props.isHidden ? 'none' : 'block'};
-`;
-// Returns the boolean value in the next tick.
-// Allows for transition to start when DOM is updated, it prevents a flickers.
-const useOnNextTick = (val) => {
-    const [delayedVal, setDelayedVal] = React.useState(val);
-    React.useEffect(() => {
-        const timeout = setTimeout(() => setDelayedVal(val), 0);
-        return () => clearTimeout(timeout);
-    }, [val, setDelayedVal]);
-    return delayedVal;
-};
-const SlideOpen = ({ isOpen, children, duration, onChange }) => {
-    const isDelayedOpen = useOnNextTick(isOpen);
-    const [isHidden, setIsHidden] = React.useState(!isOpen);
-    const handleTransitionEnd = React.useCallback(() => {
-        if (!isOpen) {
-            setIsHidden(true);
-            onChange === null || onChange === void 0 ? void 0 : onChange(false);
-        }
-    }, [isOpen, onChange]);
-    React.useEffect(() => {
-        if (isOpen) {
-            setIsHidden(false);
-            onChange === null || onChange === void 0 ? void 0 : onChange(true);
-        }
-    }, [isOpen, onChange]);
-    return (React.createElement(Wrapper$a, null,
-        React.createElement(Animation, { isOpen: isDelayedOpen, onTransitionEndCapture: handleTransitionEnd, duration: duration },
-            React.createElement(Hider, { isHidden: isHidden }, children))));
-};
-
-const TitleActionWrapper = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  transform: scaleY( ${props => props.isOpen ? '-1' : '1'} );
-`;
-const StyledPanel$2 = styledComponents.styled(Panel) `
-   ${props => !props.isOpen && styledComponents.css `border-bottom: 0;`}
-`;
-const CollapsiblePanel = (_a) => {
-    var { isInitiallyOpen, children, titleAction } = _a, rest = __rest(_a, ["isInitiallyOpen", "children", "titleAction"]);
-    const [isOpen, setIsOpen] = React.useState(isInitiallyOpen);
-    const toggleOpen = React.useCallback(() => setIsOpen(!isOpen), [setIsOpen, isOpen]);
-    return (React.createElement(StyledPanel$2, Object.assign({}, rest, { isOpen: isOpen, onClickTitle: toggleOpen, p: 0, titleAction: React.createElement(TitleActionWrapper, { isOpen: isOpen }, titleAction) }),
-        React.createElement(SlideOpen, { isOpen: isOpen },
-            React.createElement(Box, { p: 3 }, children))));
-};
-
-const useConfirmModal = ({ onConfirm }) => {
-    const [isOpen, setIsOpen] = React.useState(false);
-    const onCancel = () => setIsOpen(false);
-    const handleOpen = () => setIsOpen(true);
-    const handleConfirm = () => {
-        onConfirm();
-        setIsOpen(false);
-    };
-    return [
-        {
-            onCancel,
-            onConfirm: handleConfirm,
-            isOpen,
-        },
-        handleOpen,
-    ];
-};
-
-const delay = styledComponents.keyframes `
-  0% {
-    opacity: 0;
-  }    
-  100% {
-    opacity: 1;
-  }
-`;
-const Overlay = styledComponents.styled.div `
-  position: fixed;  
-  top: 0;
-  left: 0; 
-  right: 0;
-  bottom: 0;
-  z-index: 10;
-  opacity: 0;
-  background-color: rgba(0,0,0,0.6);
-  animation: ${delay} 0.2s forwards;
-`;
-
-const Wrapper$9 = styledComponents.styled.div `
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  
-  z-index: 50;
-`;
-const StyledPanel$1 = styledComponents.styled(Panel) `
-  box-shadow: 0 8px 8px 0 rgba(34,36,38,.15);
-`;
-const Content = styledComponents.styled.div `
-  line-height: ${props => props.theme.spacing(6)};
-  font-size: 15px;
-`;
-const Modal = (_a) => {
-    var { children, handleClickOverlay, buttons } = _a, panelProps = __rest(_a, ["children", "handleClickOverlay", "buttons"]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Overlay, { onClick: handleClickOverlay }),
-        React.createElement(Wrapper$9, null,
-            React.createElement(SlideInFromTop, null,
-                React.createElement(StyledPanel$1, Object.assign({ footer: buttons ? (React.createElement(Box, { display: "flex", justifyContent: "flex-end" }, buttons)) : undefined }, panelProps), children && (React.createElement(Content, null, children)))))));
-};
-
-const Wrapper$8 = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  ${props => props.stretch && `width: 100%;`}
-  ${props => props.actionButton || props.stretch
-    ? styledComponents.css `margin: 0;`
-    : styledComponents.css `margin: ${props => props.theme.spacing(0, 2, 0, 0)};`}      
-`;
-const StyledButton$1 = styledComponents.styled.button.withConfig({ shouldForwardProp: isPropValid }) `
-  font-size: 14px;
-  font-weight: bold;
-  letter-spacing: 1px;    
-  line-height: 1em;  
-  outline: 0;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  text-decoration: none;
-  font-family: "Open Sans", Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;   
-  transition: background-color .1s ease, color .1s ease;      
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  user-select: none;
-  min-height: ${props => props.inline ? 'auto' : '38px'};   
-  
-  ${props => props.stretch && styledComponents.css `
-      width: 100%;
-      display: block;
-  `}
-  
-  ${props => props.actionButton && styledComponents.css `
-      width: 100%;      
-      ${mq('laptop', `width: auto`)}
-  `}
-  
-   
-  ${props => props.variant !== 'text'
-    ? !props.icon
-        ? styledComponents.css `padding: ${props.theme.spacing(3, 5)}; min-width: ${props => props.theme.spacing(10)};`
-        : props.hasChildren && styledComponents.css `position: relative; padding: ${props.theme.spacing(3, 5, 3, 13)};`
-    : styledComponents.css `font-weight: 700; padding: 0;`} 
-    
-  &:disabled {
-    opacity: .5;
-    cursor: default;
-  }  
-                   
-  &:focus {
-    background-blend-mode: darken;
-  }        
-  
-  ${(props) => {
-    if (props.variant === "basic") {
-        return `
-        border: 1px solid rgba(34,36,38,.15);
-      `;
-    }
-}}
-          
-  ${(props) => {
-    var _a;
-    const { idle, hover, active } = theme.palette.button[(_a = props.variant) !== null && _a !== void 0 ? _a : 'default'];
-    return `
-        color: ${idle.text};
-        background-color: ${idle.background};        
-        
-        &:not(:disabled) {
-          &:hover, &:focus {
-            color: ${hover.text};
-            background-color: ${hover.background};        
-          }        
-  
-          &:active {
-            color: ${active.text};
-            background-color: ${active.background};        
-          } 
-        }
-                      
-    `;
-}}        
-`;
-const IconWrapper$1 = styledComponents.styled.span.withConfig({ shouldForwardProp: isPropValid }) `
-  ${props => props.variant !== "text" && styledComponents.css `
-     min-width: ${props.theme.spacing(10)};
-  `}
- 
-  ${props => props.variant === "text"
-    ? props.hasChildren && styledComponents.css `
-      padding-right: ${props.theme.spacing(2)};
-    `
-    : props.hasChildren && styledComponents.css `
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: ${props => props.theme.spacing(10)};
-      height: 100%;
-      background-color: rgba(0,0,0,.05);
-      
-      & > svg {
-        transform: translate(-50%, -50%);
-        position: absolute;
-        top: 50%;
-        left: 50%;
-      }
-  `}          
-`;
-const Button$1 = React.forwardRef((_a, ref) => {
-    var { children, icon, stretch } = _a, props = __rest(_a, ["children", "icon", "stretch"]);
-    return (React.createElement(Wrapper$8, { actionButton: props.actionButton, stretch: stretch },
-        React.createElement(StyledButton$1, Object.assign({ ref: ref, icon: icon, hasChildren: !!children, stretch: stretch }, props),
-            icon && (React.createElement(IconWrapper$1, { variant: props.variant, hasChildren: !!children }, icon)),
-            children)));
-});
-
-const ConfirmModal = ({ title, children, cancelLabel = "Nee, annuleren", confirmLabel = "Ja", confirmVariant = 'secondary', confirmIcon, cancelIcon, isOpen, onCancel, onConfirm, }) => {
-    return isOpen ? (React.createElement(Modal, { title: title, handleClickOverlay: onCancel, buttons: React.createElement(React.Fragment, null,
-            React.createElement(Button$1, { "data-testid": "btn-cancel", onClick: onCancel, variant: "basic", icon: cancelIcon }, cancelLabel),
-            React.createElement(Button$1, { "data-testid": "btn-confirm", onClick: onConfirm, variant: confirmVariant, icon: confirmIcon }, confirmLabel)) }, children)) : null;
-};
-
-const noop = () => { };
-const ConfirmButton = (_a) => {
-    var _b;
-    var { modalProps } = _a, buttonProps = __rest(_a, ["modalProps"]);
-    const [modalHandlerProps, openModal] = useConfirmModal({
-        onConfirm: (_b = modalProps.onConfirm) !== null && _b !== void 0 ? _b : noop
-    });
-    return React.createElement(React.Fragment, null,
-        React.createElement(Button$1, Object.assign({}, buttonProps, { onClick: openModal })),
-        React.createElement(ConfirmModal, Object.assign({ title: "Are you sure?" }, modalProps, modalHandlerProps)));
-};
-
-const StyledTable = styledComponents.styled.table.withConfig({ shouldForwardProp: isPropValid }) `
-  border-radius: 4px;
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  
-  ${(props) => responsiveProps(props, {
-    "tableLayout": unit => styledComponents.css `table-layout: ${unit};`,
-})}      
-`;
-const StyledTableRow = styledComponents.styled.tr.withConfig({ shouldForwardProp: isPropValid }) `
-  & > td {
-    transition: background-color .1s ease, color .1s ease;
-  }
-  
-  ${props => Object.entries(props.theme.palette.pane).map(([variant, value]) => `
-    &:nth-child(odd) > td.${variant} {    
-      color: ${value.main.idle.text};
-      background-color: ${value.main.idle.background};        
-    }                  
-    &:nth-child(even) > td.${variant} {    
-      color: ${value.alternate.idle.text};
-      background-color: ${value.alternate.idle.background};        
-    }            
-    
-    
-    ${!props.disableHover && `
-      &:nth-child(odd):hover > td.${variant} {
-        color: ${value.main.hover.text};
-        background-color: ${value.main.hover.background};          
-      }
-      &:nth-child(even):hover > td.${variant} {
-        color: ${value.alternate.hover.text};
-        background-color: ${value.alternate.hover.background};          
-      }
-    `} 
-  `)}    
-`;
-const StyledTableCell = styledComponents.styled.td.withConfig({ shouldForwardProp: isPropValid }) `
-  border-top: 1px solid rgba(34,36,38,.1);
-  border-right: 1px solid rgba(34,36,38,.1);    
-  padding: ${props => props.theme.spacing(2, 3)};
-  
-  &:last-of-type {
-    border-right: 0;
-  }
-        
-  ${(props) => responsiveProps(props, {
-    width: unit => styledComponents.css `width: ${unit};`,
-})}
-`;
-const StyledTableHeadCell = styledComponents.styled.th.withConfig({ shouldForwardProp: isPropValid }) `  
-  border-right: 1px solid rgba(34,36,38,.1); 
-  text-align: left;
-  padding: ${props => props.theme.spacing(2, 3)};  
-  font-weight: 700;
-  transition: background-color .1s ease, color .1s ease;
-
-  &:last-of-type {
-    border-right: 0;
-  }
-  
-  ${props => !!props.variant && styledComponents.css `
-    color: ${props.theme.palette.pane[props.variant].main.idle.text};
-    background-color: ${props.theme.palette.pane[props.variant].main.idle.background};
-    
-    &:hover {
-      color: ${props.theme.palette.pane[props.variant].main.hover.text};
-      background-color: ${props.theme.palette.pane[props.variant].main.hover.background};
-    }    
-  `}
-  
-  ${props => props.width ? `width: ${props.width};` : ''}
- 
-  ${props => props.sortable && `
-    cursor: pointer;
-    user-select: none;
-    
-    &:hover {      
-      background-color: ${props.theme.palette.pane.basic.main.hover.background};   
-    }       
-  `} 
-  
-  ${props => props.sortDirection && `         
-    position:relative;
-         
-    &:after {
-      content: " ";
-      position: absolute; 
-      right: 15px;
-      top: 50%;
-                     
-      height: 0;
-      width: 0;
-      border: 5px solid transparent;
-      
-      ${props.sortDirection === 'asc' ? `
-        border-top-color: #000;
-        transform: translateY(-25%);
-      ` : `
-        border-bottom-color: #000;
-        transform: translateY(-75%);
-      `}                            
-    }       
-  `}
-`;
-// Wrapper to allow for dot notated components:
-const Table = (props) => (React.createElement(StyledTable, Object.assign({}, props)));
-const TableCell = (_a) => {
-    var { variant, className } = _a, rest = __rest(_a, ["variant", "className"]);
-    return (React.createElement(StyledTableCell, Object.assign({ className: `${className || ''} ${variant || 'basic'}` }, rest)));
-};
-Table.Row = StyledTableRow;
-Table.HeadCell = StyledTableHeadCell;
-Table.Cell = TableCell;
-
-const StyledCell = styledComponents.styled(Table.Cell) `
-  ${(props) => props.firstRow && styledComponents.css ` border-top: 0px !important;`}
-  ${(props) => props.width && styledComponents.css ` width: ${props.width};`}
-  vertical-align: top;
-`;
-const Details = ({ details, firstColumnWidth }) => (React.createElement(Table, null,
-    React.createElement("tbody", null, Object.entries(details).map(([key, val], index) => (React.createElement(Table.Row, { key: key, disableHover: true },
-        React.createElement(StyledCell, { width: firstColumnWidth, firstRow: index === 0 }, key),
-        React.createElement(StyledCell, { firstRow: index === 0 }, val)))))));
-
-const Wrapper$7 = styledComponents.styled.div `
-  position: relative;
-`;
-const Dropper = styledComponents.styled.span.withConfig({ shouldForwardProp: isPropValid }) `
-  border-radius: 4px;
-  border: 1px solid rgba(34,36,38,.15);
-  position: absolute;
-  box-shadow: 0 8px 8px 0 rgba(34,36,38,.15);  
-  background-color: ${props => props.theme.palette.common.white};
-  z-index: 100;
-  
-  ${props => props.align === 'right' ? styledComponents.css `right: 0;` : styledComponents.css `left: 0;`}  
-`;
-const DropdownMenu = styledComponents.styled.ul `
-  list-style: none;
-  margin: 0;
-  padding: ${props => props.theme.spacing(2, 0)};  
-`;
-const DropdownMenuItem = styledComponents.styled.li `
-  cursor: pointer;
-  padding: ${props => props.theme.spacing(0, 3)};
-  &:hover {
-    background-color: #ddd;
-  }
-`;
-const Dropdown = ({ buttonProps, align, children, stayOpenOnClick }) => {
-    const dropper = React.useRef(null);
-    const [isOpen, setIsOpen] = React.useState(false);
-    const handleOpen = React.useCallback(() => setIsOpen(true), [setIsOpen]);
-    const handleClose = React.useCallback((e) => {
-        var _a;
-        if (stayOpenOnClick && ((_a = dropper.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)))
-            return;
-        setIsOpen(false);
-    }, [setIsOpen, stayOpenOnClick]);
-    React.useEffect(() => {
-        if (isOpen) {
-            setTimeout(() => document.addEventListener('click', handleClose), 1);
-        }
-        return () => {
-            document.removeEventListener('click', handleClose);
-        };
-    }, [isOpen, handleClose]);
-    return (React.createElement(Wrapper$7, null,
-        React.createElement(Button$1, Object.assign({}, buttonProps, { onClick: handleOpen })),
-        isOpen && (React.createElement(SlideInFromTop, { speed: '.1s' },
-            React.createElement(Dropper, { ref: dropper, align: align || 'left' }, children)))));
-};
-
-const HiddenInput$1 = styledComponents.styled.input `
-  display: none;
-`;
-const StyledDropZone = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  height: ${props => props.theme.spacing(25)};
-  
-  border-radius: 4px;
-  border: 1px solid rgba(34,36,38,.15);
-  
-  & > * {
-    pointerEvents: none;
-  }
-  
-  ${props => props.isReadyToDrop && styledComponents.css `
-    background-color: #FAFAFA;    
-  `}
-`;
-const Dropzone = (_a) => {
-    var { onChange, icon, label } = _a, rest = __rest(_a, ["onChange", "icon", "label"]);
-    const fileInput = React.useRef(null);
-    const dropzone = React.useRef(null);
-    const [isReadyToDrop, setIsReadyToDrop] = React.useState(false);
-    const handleChange = React.useCallback((fileList) => {
-        if (fileList && onChange) {
-            onChange(Array.from(fileList));
-        }
-    }, [onChange]);
-    const handleDragOver = React.useCallback((e) => {
-        e.preventDefault();
-        setIsReadyToDrop(true);
-    }, []);
-    const handleDragLeave = React.useCallback((e) => {
-        e.preventDefault();
-        setIsReadyToDrop(false);
-    }, []);
-    const handleDrop = React.useCallback((e) => {
-        var _a;
-        e.preventDefault();
-        setIsReadyToDrop(false);
-        handleChange((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files);
-    }, [handleChange]);
-    const handleClick = React.useCallback(() => {
-        var _a;
-        // We trigger the 'file pick' dialog by delegating the click to a hidden file-input.
-        (_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click();
-    }, [fileInput]);
-    const handleInputChange = React.useCallback(() => {
-        var _a;
-        handleChange((_a = fileInput === null || fileInput === void 0 ? void 0 : fileInput.current) === null || _a === void 0 ? void 0 : _a.files);
-    }, [fileInput, handleChange]);
-    return (React.createElement(StyledDropZone, Object.assign({ ref: dropzone, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleClick, isReadyToDrop: isReadyToDrop }, rest),
-        React.createElement(HiddenInput$1, { "data-testid": "dropzone-file-input", type: "file", ref: fileInput, onChange: handleInputChange, multiple: true }),
-        React.createElement(Box, null,
-            React.createElement(Button$1, { variant: "text", color: "secondary", type: "button", icon: icon }, label))));
-};
-
-const StyledBox$6 = styledComponents.styled(Box) `
-  width: 300px;  
-`;
-const Feedback = ({ onConfirm, buttonLabel, buttonIcon, title, subtitle }) => (React.createElement(Modal, { handleClickOverlay: onConfirm, buttons: React.createElement(Button$1, { "data-testid": 'confirm', stretch: true, icon: buttonIcon, variant: 'secondary', onClick: onConfirm }, buttonLabel) },
-    React.createElement(StyledBox$6, { pt: 3, pb: 3 },
-        React.createElement(Box, { pb: 5, textAlign: "center" },
-            React.createElement(Header, null, title),
-            subtitle && React.createElement(Box, { pt: 5 },
-                React.createElement(Header, { level: 5 }, subtitle))),
-        React.createElement(Box, { pt: 5, pb: 5, pl: 7, pr: 7 },
-            React.createElement(AnimatedCheckmark, null)))));
-
-const horizontalPadding = { laptop: 1 };
-const verticalPadding = { mobile: 1, laptop: 0 };
-const flexGrow = { laptop: 1 };
-const FloaterItem = (_a) => {
-    var { stretch, laptopWidth } = _a, props = __rest(_a, ["stretch", "laptopWidth"]);
-    const width = React.useMemo(() => ({ laptop: laptopWidth }), [laptopWidth]);
-    return React.createElement(Box, Object.assign({ flexGrow: stretch ? flexGrow : undefined, width: width, pt: verticalPadding, pb: verticalPadding, pl: horizontalPadding, pr: horizontalPadding }, props));
-};
-
-const horizontalMargin = { laptop: -1 };
-const verticalMargin = { mobile: -1, laptop: 0 };
-const display = { mobile: "block", laptop: "flex" };
-const hasElement = (item) => !!item.element;
-const Floater = (_a) => {
-    var { items, forceEqualWidth = false, stretch = false } = _a, props = __rest(_a, ["items", "forceEqualWidth", "stretch"]);
-    return React.createElement(Box, Object.assign({ mb: verticalMargin, mt: verticalMargin, ml: horizontalMargin, mr: horizontalMargin, display: display }, props), items
-        .filter(Boolean)
-        .map((item, i) => hasElement(item)
-        ? (React.createElement(FloaterItem, { key: i, laptopWidth: item.forceEqualWidth ? `${100 / items.length}%` : undefined, stretch: item.stretch || false }, item.element))
-        : React.createElement(FloaterItem, { key: i, laptopWidth: forceEqualWidth ? `${100 / items.length}%` : undefined, stretch: stretch }, item)));
-};
-
-const SIDEBAR_COLLAPSED_WIDTH = 15;
-const StyledSidebar = styledComponents.styled(Box) `
-  float: left;
-    
-  height: 100%;
-  width: 100%;  
-    
-  background-color: #243646;
-    
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  
-  z-index: 900;
-       
-  display: ${props => props.isMobileMenuOpen ? 'block' : 'none'};     
-  pointer-events: auto;
-     
-  ${mq("laptop", styledComponents.css `
-    position: static;    
-    display: block;
-    width: auto;
-    min-width: ${props => { var _a; return props.theme.spacing((_a = props.minWidth) !== null && _a !== void 0 ? _a : 75); }};
-    box-shadow: 2px 0px 6px -1px rgba(0,0,0,0.74);
-        
-    transition: transform .1s ease-out;
-    transform: ${props => props.isDesktopMenuOpen
-    ? 'transform: translateX(0);'
-    : styledComponents.css `translateX(calc(-100% + ${props => props.theme.spacing(SIDEBAR_COLLAPSED_WIDTH)}));`}; 
-             
-    & ul {
-      opacity: ${props => props.isDesktopMenuOpen ? '1' : '0'};
-    }                              
-  `)}  
-`;
-const SideBar = (props) => {
-    const { closeSideMenu, openSideMenu, isSideMenuOpen } = useUiStateContext();
-    return React.createElement(StyledSidebar, Object.assign({ isDesktopMenuOpen: isSideMenuOpen }, props, { onMouseEnter: openSideMenu, onMouseLeave: closeSideMenu }));
-};
-
-const StyledBox$5 = styledComponents.styled(Box) `
-  background-color: ${props => props.theme.palette.common.white};
-  border-top: 1px solid #DDDDDD;
-  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.04);  
-  box-sizing: border-box;
-`;
-const Footer = ({ children }) => (React.createElement(StyledBox$5, { pt: 2, pb: 2, pr: 5, pl: { mobile: 5, laptop: SIDEBAR_COLLAPSED_WIDTH + 5 } }, children));
-
-const Scroller = styledComponents.styled(Box) `
-  overflow-x: auto;
-  overflow-y: hidden;
-`;
-const HorizontalScroller = ({ children }) => (React.createElement(Scroller, null, children));
-
-const HamburgerButton = styledComponents.styled(Button$1) `
-  margin-right: ${props => props.theme.spacing(3)};    
-  ${mq("laptop", `display: none;`)} 
-`;
-
-const Menu = styledComponents.styled.ul `
-  padding: 0;
-  margin: 0;
-  list-style: none;
-`;
-const StyledMenuItem = styledComponents.styled.li.withConfig({ shouldForwardProp: isPropValid }) `
-  padding: ${props => props.theme.spacing(.5, 5)};
-    
-  ${props => props.isOpen && styledComponents.css `  
-      border-left: ${props.theme.spacing(1)} solid ${props.theme.palette.colors.blue};      
-      background: #293846;
-      
-      & > * {
-        margin-left: ${props.theme.spacing(-1)};
-      }
-  `}
-           
-  & button:hover, & button:active, & button:focus {
-     color: ${props => props.theme.palette.common.white} !important;
-  }
-  
-  & button {
-    width: 100%;
-  }
-  
-  ${props => props.isActive && styledComponents.css `
-    & button { 
-      color: ${props.theme.palette.common.white};
-    }
-  `}  
-`;
-const MenuItem = ({ item, isOpen, isActive, children }) => {
-    const [isDelayedOpen, setDelayedOpen] = React.useState(!!isOpen);
-    return (React.createElement(StyledMenuItem, { isOpen: isDelayedOpen, isActive: !!isActive },
-        item,
-        children && (React.createElement(SlideOpen, { onChange: setDelayedOpen, isOpen: !!isOpen, duration: .25 }, children))));
-};
-
-const MenuCloseButton = styledComponents.styled(Button$1) `      
-  ${mq("laptop", `display: none;`)} 
-`;
-
-const StyledBox$4 = styledComponents.styled(Box) `
-    display: none;
-    ${mq("laptop", `display: flex;`)}
-    
-    height: 100%;
-    flex-direction: row;
-    align-items: center;
-    
-    width: ${props => props.theme.spacing(SIDEBAR_COLLAPSED_WIDTH)};    
-    
-    & > svg {
-       margin: 0 auto; 
-    }
-    
-    ${StyledSidebar}:hover & {
-        display:none;
-    }
-`;
-const MenuSlideOpenIndicator = ({ children }) => (React.createElement(StyledBox$4, null, children));
-
-const VerticalRhythmLaptop = 7;
-const VerticalRhythmMobile = 4;
-
-const StyledBox$3 = styledComponents.styled(Box) `
-  box-sizing: border-box; 
-  color: ${props => props.theme.palette.button.text.idle.text};
-  font-weight: bold;  
-  
-  display: flex;    
-  text-align: center;
-  
-  font-size: 14px;
-  font-weight: bold;
-  letter-spacing: 1px;    
-  line-height: 1em;
-  
-  background-color: rgba(0,0,0,.2);
-  
-  ${mq('laptop', styledComponents.css `
-      min-height: ${props => props.theme.spacing(12)};
-  `)}  
-`;
-const SideBarHeader = ({ children, right }) => (React.createElement(StyledBox$3, { mb: VerticalRhythmLaptop },
-    React.createElement(Box, { flexGrow: 1, display: "flex" },
-        React.createElement(Box, { flexGrow: 1, display: "flex", flexDirection: "column", justifyContent: "center" }, children)),
-    right && React.createElement(Box, null, right)));
-
-const useCloseSidebarOnNavigate = (pathName) => {
-    const { closeSideMenu } = useUiStateContext();
-    React.useEffect(() => {
-        closeSideMenu();
-    }, [pathName, closeSideMenu]);
-};
-
-const useToggleMobileMenu = ({ currentRoute }) => {
-    const [isOpen, setIsOpen] = React.useState(false);
-    const toggle = React.useCallback(() => {
-        setIsOpen((val) => !val);
-    }, []);
-    const open = React.useCallback(() => {
-        setIsOpen(true);
-    }, []);
-    const close = React.useCallback(() => {
-        setIsOpen(false);
-    }, []);
-    React.useEffect(() => {
-        close();
-    }, [currentRoute, close]);
-    return {
-        isOpen,
-        open,
-        close,
-        toggle
-    };
-};
-
-const useResponsiveBreakpoints = () => {
-    const [windowWidth, setWindowWidth] = React.useState(window.innerWidth);
-    React.useEffect(() => {
-        const onResize = () => setWindowWidth(window.innerWidth);
-        window.addEventListener('resize', onResize);
-        return () => window.removeEventListener('resize', onResize);
-    }, []);
-    const responsiveMap = React.useMemo(() => ({
-        isMobile: windowWidth >= BreakPointValues.mobile,
-        isTablet: windowWidth >= BreakPointValues.tablet,
-        isLaptop: windowWidth >= BreakPointValues.laptop,
-        isDesktop: windowWidth >= BreakPointValues.desktop
-    }), [windowWidth]);
-    return responsiveMap;
-};
-
-const Wrapper$6 = styledComponents.styled.div `
-  display: flex;
-`;
-const Button = styledComponents.styled.button.withConfig({ shouldForwardProp: isPropValid }) `
-  user-select:none;
-  cursor: pointer;
-
-  min-height: ${props => props.theme.spacing(8)};
-  padding: .2em 1.3em .2em;
-  margin: 0;
-  line-height: 1em;  
-  outline: 0;
-  border: 1px solid rgba(34,36,38,.15);
-  
-  font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;   
-  background-color: ${props => props.active ? '#F2F2F2' : '#fff'};
- 
-  &:not(:first-of-type) {
-    border-left: 0;
-  }
- 
-  ${props => !props.disabled && (`
-    &:hover {    
-      background-color: #E9E9E9;        
-    }
-  `)}      
-`;
-const range = (start, end) => {
-    let nums = [];
-    for (let i = start; i < end; i++) {
-        nums.push(i);
-    }
-    return nums;
-};
-const Paginator = (props) => {
-    const { isTablet } = useResponsiveBreakpoints();
-    const { pageCount, onChange } = props;
-    const currentPage = Math.min(Math.max(props.currentPage, 0), pageCount);
-    const clamSize = isTablet ? 2 : 0;
-    const clamLower = Math.max(1, currentPage - clamSize);
-    const clamUpper = Math.min(pageCount, currentPage + clamSize);
-    return (React.createElement(Wrapper$6, null,
-        React.createElement(Button, { "data-testid": "paginate-prev", disabled: currentPage === 1, onClick: () => onChange(currentPage - 1) }, "\u27E8"),
-        clamLower > 1 && (React.createElement(Button, { "data-testid": "paginate-page-1", active: currentPage === 1, onClick: () => onChange(1) }, "1")),
-        clamLower > 2 && (React.createElement(Button, { disabled: true }, "...")),
-        range(clamLower, clamUpper + 1).map((pageNumber) => (React.createElement(Button, { "data-testid": `paginate-page-${pageNumber}`, key: pageNumber, active: currentPage === pageNumber, onClick: () => onChange(pageNumber) }, pageNumber))),
-        clamUpper < pageCount - 1 && (React.createElement(Button, { disabled: true }, "...")),
-        clamUpper < pageCount && (React.createElement(Button, { "data-testid": `paginate-page-${pageCount}`, active: currentPage === pageCount, onClick: () => onChange(pageCount) }, pageCount)),
-        React.createElement(Button, { "data-testid": "paginate-next", disabled: currentPage === pageCount, onClick: () => onChange(currentPage + 1) }, "\u27E9")));
-};
-
-const Section = (props) => (React.createElement(Box, Object.assign({ pb: { laptop: VerticalRhythmLaptop, mobile: VerticalRhythmMobile } }, props)));
-
-const Wrapper$5 = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  display: flex;
-  border-radius: ${props => props.theme.spacing(1)};
-  padding: ${props => props.theme.spacing(4)};
-  background-color: ${props => props.theme.palette.colors[props.backgroundColor]};  
-  box-sizing: border-box;
-  height: 100%;
-`;
-const Label$2 = styledComponents.styled.div `
-  text-transform: uppercase;
-  color: ${props => props.theme.palette.common.white};
-  font-size: ${props => props.theme.spacing(3)};  
-`;
-const Value = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  color: ${props => props.theme.palette.common.white};  
-  font-weight: bold;  
-  font-size: ${props => props.theme.spacing(props.smallerValue ? 5.5 : 7.5)};     
-`;
-const IconWrapper = styledComponents.styled.div `
-  margin: ${props => props.theme.spacing(1)} 0 auto 0; 
-  & svg {
-    height: 100%;
-    width: ${props => props.theme.spacing(10)};
-    color: white;
-  }
-`;
-const Statistic = ({ icon, value, label, backgroundColor, smallerValue }) => (React.createElement(Wrapper$5, { backgroundColor: backgroundColor },
-    React.createElement(IconWrapper, null, icon),
-    React.createElement(Box, { flexGrow: 1, textAlign: "right" },
-        React.createElement(Label$2, null, label),
-        React.createElement(Value, { smallerValue: smallerValue }, value))));
-
-const StyledBox$2 = styledComponents.styled(Box) `
-    
-    padding: ${props => props.theme.spacing(2.5, 5)};
-    
-    ${props => !props.isActive && styledComponents.css `
-        cursor: pointer;               
-        color: #337ab7;                
-        &:hover,
-        &:focus {
-          color: #23527c;
-          text-decoration: underline;
-        }
-    `}
-           
-    ${props => props.isActive && styledComponents.css `
-        font-weight: bold;
-        border: 1px solid rgba(34,36,38,.15);
-        border-bottom: 0px;
-        margin-bottom: -1px;
-        border-top-left-radius: 4px;  
-        border-top-right-radius: 4px;  
-        background-color: ${props => props.theme.palette.common.white};            
-    `}       
-    
-    ${props => props.variant && `
-        font-weight: bold;
-        color: ${props.theme.palette.form[props.variant]};
-        &:hover {
-            color: ${props.theme.palette.form[props.variant]};
-        }
-    `}
-    
-`;
-const Tab = (_a) => {
-    var { id, isActive, onClick } = _a, restProps = __rest(_a, ["id", "isActive", "onClick"]);
-    const handleClick = React.useCallback(() => {
-        if (!isActive) {
-            onClick === null || onClick === void 0 ? void 0 : onClick(id);
-        }
-    }, [id, isActive, onClick]);
-    return React.createElement(StyledBox$2, Object.assign({}, restProps, { onClick: handleClick, isActive: isActive }));
-};
-
-const StyledBox$1 = styledComponents.styled(Box) `
-    background-color: ${props => props.theme.palette.common.white};
-    border: 1px solid rgba(34,36,38,.15);
-    border-top: 0px;
-`;
-const TabContent = (props) => React.createElement(StyledBox$1, Object.assign({ p: 3 }, props));
-
-const Tabs = styledComponents.styled(Box) `
-    display: flex;
-    border-bottom: 1px solid rgba(34,36,38,.15);     
-`;
-
-const FlatPanel = styledComponents.styled(Panel) `
-  box-shadow: none;
-`;
-const Wrapper$4 = styledComponents.styled(Box) `
-  display: flex;
-  
-  &:last-of-type .line:before {
-    background: none;
-  }
-`;
-const Line = styledComponents.styled(Box) `
-  position: relative;
-  margin-right: ${props => props.theme.spacing(4)};
-  top: 4px;
-  
-  &:before {
-    background: #e7eaec;
-    content: '';
-    position: absolute;
-    top: 0;
-    left: ${props => props.theme.spacing(4.5)};
-    height: 100%;
-    width: ${props => props.theme.spacing(1)};
-  }
-    
-`;
-const Circle = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  position: relative;
-  background-color: ${props => props.color};
-  color: #fff; 
-  
-  left: 0;
-  width: ${props => props.theme.spacing(10)};
-  height: ${props => props.theme.spacing(10)};
-  border-radius: 50%;
-  font-size: ${props => props.theme.spacing(4)};
-  
-  & > * {
-     position: absolute;
-     top: 50%;
-     left: 50%;
-     transform: translate(-50%, -50%);
-  }
-`;
-const Timeline = ({ title, icon, color, isInitiallyOpen, titleMeta, chevron, children }) => (React.createElement(Wrapper$4, null,
-    React.createElement(Line, null,
-        React.createElement(Circle, { color: color }, icon)),
-    React.createElement(Box, { pb: 4, flexGrow: 1 },
-        React.createElement(CollapsiblePanel, { isInitiallyOpen: isInitiallyOpen, titleMeta: titleMeta, title: title, titleAction: chevron }, children))));
-const SimpleTimeline = ({ color, icon, title, titleMeta }) => (React.createElement(Wrapper$4, null,
-    React.createElement(Line, { className: 'line' },
-        React.createElement(Circle, { color: color }, icon)),
-    React.createElement(Box, { pb: 4, flexGrow: 1 },
-        React.createElement(FlatPanel, { titleMeta: titleMeta, title: title }))));
-
-const StyledBox = styledComponents.styled(Box) `
-  background-color: #FFFFFF;
-  border-bottom: 1px solid #DDDDDD;
-  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.04);   
-  box-sizing: border-box;
-`;
-const TopBar = ({ left, right }) => (React.createElement(StyledBox, null,
-    React.createElement(Box, { display: "flex", alignItems: "center", pb: 1, pt: 1, pr: 5, pl: { mobile: 5, laptop: 5 + SIDEBAR_COLLAPSED_WIDTH } },
-        React.createElement(Box, { flexGrow: 1, display: "flex", pl: 2 }, left),
-        React.createElement(Box, { flexGrow: 1, display: "flex", justifyContent: 'flex-end' }, right))));
-
-const Label$1 = styledComponents.styled.label `
-  position: relative;  
-`;
-const Input$1 = styledComponents.styled.input.withConfig({ shouldForwardProp: isPropValid }) ` 
-  position: absolute;
-  top: 0;
-  left: 0;
-  
-  width: 17px;
-  height: 17px;  
-  
-  z-index: 99;
-  opacity: 0;  
-  margin-right: ${props => props.theme.spacing(2)};
-  transform: translateY(1px);
-  
-  &~span {
-    user-select: none;
-    padding-left: 1.85714em;
-    cursor: pointer;
-    font-size: .92857143em;
-  }
-  
-  &~span:before, &~span:after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 17px;
-    height: 17px;
-    line-height: 17px;
-    content: '';    
-    border-radius: 4px;
-    border: 1px solid rgba(34,36,38,.15);
-    z-index:0;
-  }
-  
-  &:checked~span {
-    font-style: italic;
-  }
-  
-  &:checked~span:before {
-    background: #fff;
-    border-color: rgba(34,36,38,.35); 
-  }
-  
-  &:checked~span:after {    
-    font-style: normal; 
-    text-align: center;
-    content: '\\2714';
-    opacity: 1;
-    color: ${props => props.theme.palette.common.black}
-  }  
-  
-  &:focus~span:before, &:focus~span:after {
-    border-color: #85b7d9;
-    border-radius: 4px;
-    background: #fff;
-    box-shadow: 0 0 0 0 rgba(34,36,38,.35) inset;
-  } 
-  
-  &.error~span {
-    color: ${props => props.theme.palette.form.error}; 
-  }
-  
-  &.error~span:before, &.error~span:after {
-    background: #fff6f6;
-    border-color: #e0b4b4;
-    color: #9f3a38;
-  }  
-`;
-const Span = styledComponents.styled.span.withConfig({ shouldForwardProp: isPropValid }) `
-  ${props => props.dimmed ? styledComponents.css `color: #999c9e;` : ''}
-`;
-const Checkbox = React.forwardRef((_a, ref) => {
-    var { options, spacing = 1, name, dimmed } = _a, restProps = __rest(_a, ["options", "spacing", "name", "dimmed"]);
-    return (React.createElement(React.Fragment, null, Object.entries(options).map(([value, label]) => (React.createElement(Box, { key: value, mt: spacing, mb: spacing },
-        React.createElement(Label$1, { key: value },
-            React.createElement(Input$1, Object.assign({ type: "checkbox", value: value, name: name, ref: ref }, restProps)),
-            React.createElement(Span, { dimmed: dimmed }, label)))))));
-});
-
-const sharedStyles = styledComponents.css `
-  padding: .67857143em 1em;
-  line-height: 1.21428571em;
-  border-radius: 4px;
-  border: 1px solid rgba(34,36,38,.15);  
-  
-  color: ${props => props.theme.palette.common.black};
-  font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
-  
-  font-size: 1em;
-  outline: none;
-  
-  &:disabled, &:read-only {
-    background-color: #FAFAFA;
-  }
-  
-  &:focus {
-    color: rgba(0,0,0,.95);
-    border-color: #85b7d9;    
-    background: #fff;
-    box-shadow: 0 0 0 0 rgba(34,36,38,.35) inset;
-  }
-    
-  &.error {
-    background: #fff6f6;
-    border-color: #e0b4b4;
-    color: #9f3a38;
-  }  
-  
-  &.error:focus {
-    background: #fff6f6;
-  }
-     
-  &:focus::placeholder {
-    color:rgba(115,115,115,.87) 
-  }
-  
-  &::placeholder {
-    color:rgba(191,191,191,.87); 
-  }
-  
-  &.error::placeholder {
-    color: #e7bdbc;
-  }
-  
-  &.error:focus::placeholder {
-    color: #da9796;
-  }        
-`;
-const Input = styledComponents.styled.input.withConfig({ shouldForwardProp: isPropValid }) `
-  ${sharedStyles}
-`;
-const Textarea = styledComponents.styled.textarea.withConfig({ shouldForwardProp: isPropValid }) `
-  ${sharedStyles}
-  height: 100%;
-`;
-const TextField = React.forwardRef((_a, ref) => {
-    var { multiline = false } = _a, restProps = __rest(_a, ["multiline"]);
-    return multiline
-        ? React.createElement(Textarea, Object.assign({ ref: ref }, restProps))
-        : React.createElement(Input, Object.assign({ ref: ref, type: "text" }, restProps));
-});
-
-const Wrapper$3 = styledComponents.styled.div `
-  position: relative;
-  display: flex;    
-`;
-const HiddenInput = styledComponents.styled.input.withConfig({ shouldForwardProp: isPropValid }) `
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;    
-  width: 100%;
-  opacity:0;
-`;
-const StyledButton = styledComponents.styled(Button$1) `    
-  height: 40px;
-  
-  .has-error & {
-    background: #fff6f6;
-    border-color: #e0b4b4;
-    color: #9f3a38;
-  }  
-`;
-const StyledTextField = styledComponents.styled(TextField) `
-  flex: 1;  
-  padding-right: ${props => props.theme.spacing(8)}
-`;
-const DeleteButton = styledComponents.styled.button `    
-    background-color: transparent;
-    border: 0;
-    outline: 0;    
-    padding: 0;
-   
-    position: absolute;    
-    right: 0;
-    height: 100%;
-   
-   cursor: pointer;
-                   
-    &:after {
-        box-sizing: border-box;
-        
-        color: rgba(0, 0, 0, .3);
-        content: "×";
-        
-        text-align: center;
-        vertical-align: middle;
-        display: table-cell;
-        
-        font-size: 20px;
-        height: 38px;
-        width: 38px;
-        line-height: 38px;
-        padding: 0 8px;
-    }
-`;
-const FileField = React.forwardRef((_a, ref) => {
-    var { className, placeholder, chooseFileLabel = "Choose file", changeFileLabel = "Change file", onClear } = _a, props = __rest(_a, ["className", "placeholder", "chooseFileLabel", "changeFileLabel", "onClear"]);
-    const [originalRef, setOriginalRef] = React.useState();
-    const [fileName, setFilename] = React.useState("");
-    const handleChange = React.useCallback((e) => {
-        var _a;
-        const files = (e === null || e === void 0 ? void 0 : e.target).files;
-        setFilename(((_a = files === null || files === void 0 ? void 0 : files[0]) === null || _a === void 0 ? void 0 : _a.name) || "");
-    }, []);
-    const handleRemove = React.useCallback(() => {
-        if (originalRef) {
-            originalRef.value = '';
-            originalRef.files = null;
-            originalRef.dispatchEvent(new Event('change', { bubbles: true }));
-            if (onClear) {
-                onClear();
-            }
-        }
-    }, [originalRef, onClear]);
-    const extendedRef = React.useMemo(() => (el) => {
-        el === null || el === void 0 ? void 0 : el.addEventListener('change', handleChange);
-        setOriginalRef(el);
-        if (typeof ref === 'function') {
-            ref === null || ref === void 0 ? void 0 : ref(el);
-        }
-    }, [ref, handleChange]);
-    return (React.createElement(Wrapper$3, null,
-        React.createElement(HiddenInput, Object.assign({ type: 'file', ref: extendedRef }, props)),
-        React.createElement(StyledButton, { variant: 'basic' }, !!fileName ? changeFileLabel : chooseFileLabel),
-        React.createElement(StyledTextField, { placeholder: placeholder, className: className, disabled: true, value: fileName }),
-        !!fileName && onClear && React.createElement(DeleteButton, { "data-testid": 'file-clear', onClick: handleRemove })));
-});
-
-const Wrapper$2 = styledComponents.styled.div `
-  position: relative;
-`;
-const StyledSelect = styledComponents.styled.select.withConfig({ shouldForwardProp: isPropValid }) `
-  width: 100%;
-
-  padding: .67857143em 1em;
-  line-height: 1.21428571em;
-  border-radius: 4px;
-  border: 1px solid rgba(34,36,38,.15);  
-  
-  color: ${props => props.theme.palette.common.black};
-  font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
-  
-  font-size: 1em;
-  outline: none; 
-  
-  appearance: none;
-  
-  &.error {
-    background: #fff6f6;
-    border-color: #e0b4b4;
-    color: #9f3a38;
-  }
-  
-  &.error~div {
-    color: #9f3a38;
-  }    
-`;
-const PaddingOverlay = styledComponents.styled.div `
-  pointer-events: none;
-  padding: 0 1em;
-  position:absolute;  
-  height: 100%;
-  top: 0;
-  right: 0; 
-  font-size: 17px;
-  line-height: 40px;
-`;
-const Select = React.forwardRef((_a, ref) => {
-    var { options } = _a, props = __rest(_a, ["options"]);
-    const optionsArray = Array.isArray(options)
-        ? options
-        : Object.entries(options);
-    return (React.createElement(Wrapper$2, null,
-        React.createElement(StyledSelect, Object.assign({ ref: ref }, props), optionsArray.map(([value, label]) => (React.createElement("option", { key: value, value: value }, label)))),
-        React.createElement(PaddingOverlay, null, "\u25BE")));
-});
-
-const passwordMinLength = (val) => val.length >= 8;
-const passwordHasNumbers = (val) => /\d/.test(val);
-const passwordHasLowerAndUppercase = (val) => /[a-z]/.test(val) && /[A-Z]/.test(val);
-const passwordHasSpecialChars = (val) => /[-’/`~!#*$@_%+=.,^&(){}[\]|;:”<>?\\]/.test(val);
-const checks = [passwordMinLength, passwordHasNumbers, passwordHasLowerAndUppercase, passwordHasSpecialChars];
-const maxScore = checks.length + 1;
-const calculatePasswordScore = (val) => checks
-    .map((check) => check(val))
-    .reduce((acc, value) => value
-    ? acc + 1
-    : acc, 1);
-const Progress = styledComponents.styled.div `
-    margin-top: ${props => props.theme.spacing(1)};
-    height: 3px;
-    background-color: #f5f5f5;
-    border-radius: 4px;
-    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
-`;
-const ProgressBar = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-    width: ${props => props.score ? (props.score / maxScore) * 100 : 0}%;
-    height: 100%;
-    background-color: ${props => props.score <= 2 ? '#e90f10' : props.score <= 3 ? '#ffad00' : '#02b502'} ;
-    transition: width .6s ease, background-color .6s ease;
-`;
-const PasswordStrengthField = React.forwardRef((props, ref) => {
-    const [score, setScore] = React.useState(0);
-    const handleChange = React.useCallback((e) => {
-        const target = e.target;
-        setScore(target.value ? calculatePasswordScore(target.value) : 0);
-    }, []);
-    const extendedRef = React.useMemo(() => (el) => {
-        el === null || el === void 0 ? void 0 : el.addEventListener('keyup', handleChange);
-        if (typeof ref === 'function') {
-            ref === null || ref === void 0 ? void 0 : ref(el);
-        }
-    }, [ref, handleChange]);
-    return React.createElement(React.Fragment, null,
-        React.createElement(TextField, Object.assign({}, props, { type: "password", ref: extendedRef })),
-        React.createElement(Progress, null,
-            React.createElement(ProgressBar, { score: score })));
-});
-
-const NUM_ROWS_PER_FIELD = 2;
-// NOTE:
-//
-// We have to implement our own version of -ms-grid.
-// Styled-components does not automatically prefix it, as the specs do not completely overlap.
-// https://github.com/thysultan/stylis.js/issues/51
-//
-// We can achieve our goals using both specs though.
-const generateDimensionsCss = (position, rowOffset) => {
-    const parts = [];
-    if (position === undefined) {
-        return parts;
-    }
-    if (position.row !== undefined) {
-        parts.push(styledComponents.css `
-      grid-row-start: ${(position.row * NUM_ROWS_PER_FIELD) + 1 + rowOffset};
-      -ms-grid-row: ${(position.row * NUM_ROWS_PER_FIELD) + 1 + rowOffset};
-    `);
-    }
-    if (position.rowSpan && rowOffset) {
-        parts.push(styledComponents.css `
-      grid-row-end: span ${(position.rowSpan * NUM_ROWS_PER_FIELD) - 1};
-      -ms-grid-row-span: ${(position.rowSpan * NUM_ROWS_PER_FIELD) - 1};
-    `);
-    }
-    if (position.column !== undefined) {
-        parts.push(styledComponents.css `
-      grid-column-start: ${position.column + 1};
-      -ms-grid-column: ${position.column + 1};
-    `);
-    }
-    if (position.columnSpan !== undefined) {
-        parts.push(styledComponents.css `
-      grid-column-end: span ${position.columnSpan};
-      -ms-grid-column-span: ${position.columnSpan};
-    `);
-    }
-    return parts;
-};
-const FormGridCell = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) ` 
-  margin: 0px 8px;
-  
-  ${props => props.rowOffset !== undefined && styledComponents.css `
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 16px;`}
-       
-  align-self: ${props => props.rowOffset === undefined ? "end" : "initial"};
-  -ms-grid-row-align: ${props => props.rowOffset === undefined ? "end" : "initial"};
-  
-  ${(props) => responsiveProps(props, {
-    "align": unit => styledComponents.css `text-align: ${unit};`,
-    "position": unit => { var _a; return generateDimensionsCss(unit, (_a = props.rowOffset) !== null && _a !== void 0 ? _a : 0); }
-})} 
-`;
-FormGridCell.displayName = "FormGridCell";
-
-const Label = styledComponents.styled.label.withConfig({ shouldForwardProp: isPropValid }) `
-    display: block;
-    color: ${(props => !!props.error ? props.theme.palette.form.error : props.theme.palette.common.black)} ;    
-    font-weight: bold;
-    margin: ${props => props.theme.spacing(0, 0, 1, 0)};
-    line-height: 1.4em; 
-    font-size: .92857143em;
-`;
-const Hint = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-    color: ${(props => !!props.error ? "#da9796;" : props.theme.palette.form.hint)};
-    margin: ${props => props.theme.spacing(-1, 0, 1, 0)};
-    line-height: 1.4em;
-    font-size: .92857143em;        
-`;
-const RequiredAsterisk = styledComponents.styled.span.withConfig({ shouldForwardProp: isPropValid }) `
-    color: ${props => props.theme.palette.form.hint};
-`;
-const Error$1 = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `    
-    color: ${props => props.theme.palette.form.error};    
-    margin: ${props => props.theme.spacing(1, 0, 0, 0)};
-    font-weight: bold;       
-    font-style: italic;       
-    line-height: 1.4em;
-    font-size: .92857143em;    
-`;
-const getFormGridWrapperProps = ({ position, align, label, hint, error, isRequired }) => ({ position, align, label, hint, error, isRequired });
-const FormGridWrapper = ({ position, align, label, hint, error, isRequired, children }) => (React.createElement(React.Fragment, null,
-    React.createElement(FormGridCell, { position: position, align: align, className: 'form-grid-cell__label-hint' },
-        label && (React.createElement(Label, { error: error },
-            label,
-            isRequired && React.createElement(RequiredAsterisk, null, " *"))),
-        hint && (React.createElement(Hint, { error: error }, hint))),
-    React.createElement(FormGridCell, { position: position, align: align, rowOffset: 1, className: clsx({ 'form-grid-cell__field-error': true, 'has-error': !!error }) },
-        children,
-        error && (React.createElement(Error$1, null, error)))));
-
-const FormGrid = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  margin: 0 -8px -16px -8px;
-
-  display: -ms-grid;
-  display: grid;
-
-  -ms-grid-columns: 1fr;   
-  
-  ${(props) => responsiveProps(props, {
-    columns: (string) => styledComponents.css `
-        -ms-grid-columns: ${string};           
-        grid-template-columns: ${string};
-      `
-})}
-`;
-FormGrid.displayName = "FormGrid";
-
-const Wrapper$1 = styledComponents.styled(Box) ` 
-  background-color: #F3F3F4;
-`;
-const WrapperInner = styledComponents.styled(Box) ` 
-  position: relative;
-`;
-const SidebarWrapper = styledComponents.styled(Box) ` 
-  position: absolute;
-  height: 100%;
-  z-index: 50;
-  pointer-events: none;
-`;
-const ContentBox = styledComponents.styled(Box) `
-  height: 100%;
-`;
-const BasicLayout = ({ sideBarProps, topBarProps, footerProps, isLoading, loader, children }) => {
-    return (React.createElement(Wrapper$1, { flexGrow: 1, display: "flex", flexDirection: "column" },
-        React.createElement(WrapperInner, { flexGrow: 1, flexShrink: 0 },
-            sideBarProps && (React.createElement(SidebarWrapper, null,
-                React.createElement(SideBar, Object.assign({}, sideBarProps)))),
-            React.createElement(ContentBox, { display: "flex", flexDirection: "column" },
-                React.createElement(TopBar, Object.assign({}, topBarProps)),
-                React.createElement(Box, { p: { laptop: VerticalRhythmLaptop, mobile: VerticalRhythmMobile }, pl: { laptop: VerticalRhythmLaptop + SIDEBAR_COLLAPSED_WIDTH }, flexGrow: 1 }, isLoading && loader
-                    ? loader
-                    : children),
-                React.createElement(Footer, Object.assign({}, footerProps))))));
-};
-
-const Wrapper = styledComponents.styled(Box) `
-  background-color:  ${props => props.baseColor || 'white'};
-  position: absolute;
-  min-width: 100%;
-  min-height: 100%;  
-`;
-const Background = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-       
-  opacity: ${props => { var _a; return (_a = props.opacity) !== null && _a !== void 0 ? _a : 1; }} ;
-  background: url("${props => props.imageUrl}");
-  background-size: cover;
-`;
-const StyledAnimation = styledComponents.styled(SlideInFromTop) `
-  z-index: 10;
-  margin: auto auto;
-`;
-const StyledPanel = styledComponents.styled(Panel) `
-  box-shadow: 0 8px 8px 0 rgba(34,36,38,.15);  
-  min-width: 280px;   
-`;
-const Logo = styledComponents.styled.img `
-  display:none;
-  position: absolute;
-  left: 0;
-  top: ${props => props.theme.spacing(8)};
-  ${mq("tablet", `display: block;`)}
-`;
-const FloatingPanelLayout = ({ panelProps, imageUrl, alert, logoUrl, backgroundBaseColor, backgroundOpacity }) => (React.createElement(Wrapper, { display: "flex", alignItems: "center", baseColor: backgroundBaseColor },
-    React.createElement(Background, { imageUrl: imageUrl, opacity: backgroundOpacity }),
-    logoUrl && (React.createElement(Logo, { src: logoUrl, alt: "Logo" })),
-    React.createElement(StyledAnimation, null,
-        alert && (React.createElement(Box, { pb: VerticalRhythmLaptop }, alert)),
-        React.createElement(StyledPanel, Object.assign({}, panelProps)))));
-
-/**
- * Two dimensional array grid.
- * Useful to position elements with.
- *
- * Example:
- *
- * new Grid([
- *  [1,2,3],
- *  [4,5,6],
- *  [7,8,9]
- * ])
- *
- */
-class Grid {
-    constructor(grid) {
-        this.grid = grid;
-    }
-    getValues() {
-        return this.grid;
-    }
-    /**
-     * Returns an array of distinct values in this grid
-     */
-    getDistinctValues() {
-        const values = [];
-        this.grid.forEach((row) => {
-            row.forEach((item) => {
-                if (!values.includes(item)) {
-                    values.push(item);
-                }
-            });
-        });
-        return values;
-    }
-    sliceArea(topLeft, bottomRight) {
-        if (topLeft.x > bottomRight.x || topLeft.y > bottomRight.y) {
-            throw new Error("Coordinates are mixed up. Please ensure topLeft is actually in the top-left corner. And bottomRight is actually in the bottom-right corner");
-        }
-        return new Grid(this.grid
-            .slice(topLeft.y, bottomRight.y + 1)
-            .map(row => row.slice(topLeft.x, bottomRight.x + 1)));
-    }
-    getCoordinatesForValue(value) {
-        const x = [];
-        const y = [];
-        this.grid.forEach((row, yIndex) => {
-            row.forEach((item, xIndex) => {
-                if (item === value) {
-                    x.push(xIndex);
-                    y.push(yIndex);
-                }
-            });
-        });
-        return {
-            topLeft: { x: Math.min(...x), y: Math.min(...y) },
-            bottomRight: { x: Math.max(...x), y: Math.max(...y) }
-        };
-    }
-}
-
-/**
- * Makes sure all values in the grid have a rectangular shape.
- * We don't support Tetris types.
- */
-const assertGridIsValid = (availableKeys, grid) => {
-    const distinctValues = grid.getDistinctValues();
-    // Check if all `availableKeys` have a place in the given grid
-    if (distinctValues.length < availableKeys.length) {
-        throw new Error(`Not all given fields are present in the grid. Please add these fields ${_difference(distinctValues, availableKeys).map(_ => `"${_}"`).join(", ")}`);
-    }
-    // We don't support tetris-shaped values:
-    // E.g:
-    // [
-    //  [1,1,1],
-    //  [0,1,0]
-    // ]
-    distinctValues.forEach((value) => {
-        if (!availableKeys.includes(value)) {
-            throw new Error(`${value} is not an existing field. Existing fields are ${availableKeys.map(_ => `"${_}"`).join(", ")}.`);
-        }
-        const coordinates = grid.getCoordinatesForValue(value);
-        const subGrid = grid.sliceArea(coordinates.topLeft, coordinates.bottomRight);
-        const subGridDistinctValues = subGrid.getDistinctValues();
-        if (subGridDistinctValues.length !== 1 || subGridDistinctValues[0] !== value) {
-            throw new Error(`Grid contains an unsupported shape. Please make sure "${value}" has a rectangular shape.`);
-        }
-    });
-    return true;
-};
-
-const equalColumns = (num, buttonGutter) => {
-    const fractions = [...Array(num)].map(_ => "1fr");
-    if (buttonGutter) {
-        fractions.push("auto");
-    }
-    return fractions.join(" ");
-};
-
-class FormPositioner {
-    constructor(fields, columns = {} // -> ignore property, its used to pass along internally.
-    ) {
-        this.fields = fields;
-        this.columns = columns;
-    }
-    /**
-     * Position form elements responsively in a grid.
-     * Example usage:
-     *
-     *
-     * .setGrid("laptop", [                               // Breakpoint from laptop to bigger
-     *    ["title",   "title",        "title"],           // NOTE: title has a colspan of 3
-     *    ["street",  "number",       "city"],
-     *    ["code",    "description",  "description"],     // NOTE: description has a colspan of 2, and a rowspan of 2
-     *    ["status",  "description",  "description"]
-     * ])
-     * .setVertical("mobileS", 1)                         // NOTE: align everything in a single column for mobileS until laptop
-     *
-     */
-    setGrid(breakPoint, columns, arrayGrid) {
-        // We save the columns setting in a different prop.
-        if (typeof this.columns === "object") {
-            this.columns[breakPoint] = columns;
-        }
-        // Wrap array grid in a Grid object.
-        // It has some nice utility functions to work with.
-        const grid = new Grid(arrayGrid);
-        // Make sure the given grid is a valid grid:
-        assertGridIsValid(Object.keys(this.fields), grid);
-        // Update position attributes for the given fields:
-        const fields = immer.produce(this.fields, draftState => {
-            Object
-                .keys(this.fields)
-                .forEach(key => {
-                const fieldProps = draftState[key].props;
-                const { topLeft, bottomRight } = grid.getCoordinatesForValue(key);
-                if (fieldProps.position === undefined) {
-                    fieldProps.position = {};
-                }
-                if (!isResponsiveObject(fieldProps.position)) {
-                    // When there already was a position set, but it wasn't marked responsive,
-                    // We set that value to the lowest breakpoint:
-                    fieldProps.position = { mobile: fieldProps.position };
-                }
-                // Set values to breakpoint.
-                // @ts-ignore
-                fieldProps.position[breakPoint] = {
-                    column: topLeft.x,
-                    columnSpan: bottomRight.x - topLeft.x + 1,
-                    row: topLeft.y,
-                    rowSpan: bottomRight.y - topLeft.y + 1
-                };
-            });
-        });
-        // Return a new formPositioner.
-        // It allows us to chain, while still being immutable.
-        return new FormPositioner(fields, this.columns);
-    }
-    /**
-     * Aligns all input-fields vertically.
-     */
-    setVertical(breakPoint, numColumns = 1, columns) {
-        return this.setGrid(breakPoint, columns !== null && columns !== void 0 ? columns : equalColumns(numColumns, false), _chunk(Object.keys(this.fields), numColumns));
-    }
-    /**
-     * Aligns all input-fields horizontally.
-     */
-    setHorizontal(breakPoint, columns) {
-        const keys = Object.keys(this.fields);
-        return this.setGrid(breakPoint, columns !== null && columns !== void 0 ? columns : equalColumns(keys.length, false), [keys]);
-    }
-    getColumns() {
-        return this.columns;
-    }
-    getFields() {
-        return this.fields;
-    }
-    getScaffoldProps() {
-        return {
-            fields: this.fields,
-            columns: this.columns
-        };
-    }
-}
-
-const ScaffoldFormContext = React.createContext({ factory: undefined });
-const ScaffoldFormProvider = ({ factory, children }) => (React.createElement(ScaffoldFormContext.Provider, { value: { factory: factory } }, children));
-
-const useScaffoldFormContext = () => React.useContext(ScaffoldFormContext);
-
-const getComponent = (field) => {
-    switch (field.type) {
-        case "Button":
-            return Button$1;
-        case "Checkbox":
-            return Checkbox;
-        case "Select":
-            return Select;
-        case "FileField":
-            return FileField;
-        case "PasswordStrengthField":
-            return PasswordStrengthField;
-        case "TextField":
-        default:
-            return TextField;
-    }
-};
-const ScaffoldField = React.forwardRef((_a, ref) => {
-    var { name, field } = _a, restProps = __rest(_a, ["name", "field"]);
-    const { factory } = useScaffoldFormContext();
-    const formGridWrapperProps = getFormGridWrapperProps(field.props);
-    const Component = (factory === null || factory === void 0 ? void 0 : factory(field)) || getComponent(field);
-    // @ts-ignore
-    if (field.type === "TextField" && field.props.type === "hidden") {
-        return React.createElement(Component, Object.assign({ ref: ref, name: name }, restProps, field.props));
-    }
-    return (React.createElement(FormGridWrapper, Object.assign({}, formGridWrapperProps),
-        React.createElement(Component, Object.assign({ ref: ref, name: name, placeholder: field.props.placeholder || formGridWrapperProps.label, className: clsx(!!formGridWrapperProps.error && 'error', field.props.className) }, restProps, field.props))));
-});
-
-const ScaffoldForm = React.forwardRef((_a, ref) => {
-    var { children, columns, fields, prefixFieldNames } = _a, restProps = __rest(_a, ["children", "columns", "fields", "prefixFieldNames"]);
-    return (React.createElement(FormGrid, { columns: columns },
-        Object
-            .entries(fields)
-            .map(([key, fieldProps]) => (
-        // @ts-ignore
-        React.createElement(ScaffoldField, Object.assign({ name: `${prefixFieldNames !== null && prefixFieldNames !== void 0 ? prefixFieldNames : ''}${key}`, key: key, field: fieldProps, ref: ref }, restProps)))),
-        children));
-});
-
-exports.Alert = Alert;
-exports.AnimatedCheckmark = AnimatedCheckmark;
-exports.BasicLayout = BasicLayout;
-exports.Box = Box;
-exports.BreadCrumbs = BreadCrumbs;
-exports.BreakPointValues = BreakPointValues;
-exports.Button = Button$1;
-exports.Checkbox = Checkbox;
-exports.CollapsiblePanel = CollapsiblePanel;
-exports.ConfirmButton = ConfirmButton;
-exports.ConfirmModal = ConfirmModal;
-exports.Crumb = Crumb;
-exports.Details = Details;
-exports.Dropdown = Dropdown;
-exports.DropdownMenu = DropdownMenu;
-exports.DropdownMenuItem = DropdownMenuItem;
-exports.Dropzone = Dropzone;
-exports.Feedback = Feedback;
-exports.FileField = FileField;
-exports.Floater = Floater;
-exports.FloatingPanelLayout = FloatingPanelLayout;
-exports.Footer = Footer;
-exports.FormGrid = FormGrid;
-exports.FormGridWrapper = FormGridWrapper;
-exports.FormPositioner = FormPositioner;
-exports.HamburgerButton = HamburgerButton;
-exports.Header = Header;
-exports.HorizontalScroller = HorizontalScroller;
-exports.Menu = Menu;
-exports.MenuCloseButton = MenuCloseButton;
-exports.MenuItem = MenuItem;
-exports.MenuSlideOpenIndicator = MenuSlideOpenIndicator;
-exports.Modal = Modal;
-exports.Overlay = Overlay;
-exports.Paginator = Paginator;
-exports.Panel = Panel;
-exports.Paragraph = Paragraph;
-exports.PasswordStrengthField = PasswordStrengthField;
-exports.ScaffoldForm = ScaffoldForm;
-exports.ScaffoldFormContext = ScaffoldFormContext;
-exports.ScaffoldFormProvider = ScaffoldFormProvider;
-exports.Section = Section;
-exports.Select = Select;
-exports.SideBarHeader = SideBarHeader;
-exports.SimpleTimeline = SimpleTimeline;
-exports.SlideInFromTop = SlideInFromTop;
-exports.Statistic = Statistic;
-exports.StyledTable = StyledTable;
-exports.Tab = Tab;
-exports.TabContent = TabContent;
-exports.Table = Table;
-exports.Tabs = Tabs;
-exports.TextField = TextField;
-exports.Timeline = Timeline;
-exports.TopBar = TopBar;
-exports.UiProvider = UiProvider;
-exports.UiWrapper = UiWrapper;
-exports.VerticalRhythmLaptop = VerticalRhythmLaptop;
-exports.VerticalRhythmMobile = VerticalRhythmMobile;
-exports.calculatePasswordScore = calculatePasswordScore;
-exports.getFormGridWrapperProps = getFormGridWrapperProps;
-exports.isResponsiveObject = isResponsiveObject;
-exports.mq = mq;
-exports.passwordHasLowerAndUppercase = passwordHasLowerAndUppercase;
-exports.passwordHasNumbers = passwordHasNumbers;
-exports.passwordHasSpecialChars = passwordHasSpecialChars;
-exports.passwordMinLength = passwordMinLength;
-exports.responsiveProps = responsiveProps;
-exports.theme = theme;
-exports.useCloseSidebarOnNavigate = useCloseSidebarOnNavigate;
-exports.useResponsiveBreakpoints = useResponsiveBreakpoints;
-exports.useToggleMobileMenu = useToggleMobileMenu;