quicksnack 3.33.0 → 3.34.1

package/dist/bundle.js

@@ -0,0 +1,2199 @@
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var polished = require('polished');
+var isPropValid = require('@emotion/is-prop-valid');
+var clsx = require('clsx');
+var produce = 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 = styled.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 = 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 = styled.keyframes `
+  0% {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const SlideInFromTop = styled.div.withConfig({ shouldForwardProp: isPropValid }) `
+  animation: ${slideInFromTop} ${props => props.speed || '.3s'} ease-in 0s 1;
+`;
+
+const sharedStyles$1 = styled.css `
+  margin: 0 0;  
+  padding: 0 0;
+  font-weight: 700;
+  line-height: 1.28571429em;    
+`;
+const H1 = styled.h1.withConfig({ shouldForwardProp: isPropValid }) `
+  font-size: 2rem;
+  min-height: 1rem;
+  ${sharedStyles$1}
+`;
+const H2 = styled.h2.withConfig({ shouldForwardProp: isPropValid }) `
+  font-size: 1.71428571rem;
+  ${sharedStyles$1}
+`;
+const H3 = styled.h3.withConfig({ shouldForwardProp: isPropValid }) `
+  font-size: 1.28571429rem;
+  ${sharedStyles$1}
+`;
+const H4 = styled.h4.withConfig({ shouldForwardProp: isPropValid }) `
+  font-size: 1.07142857rem;
+  ${sharedStyles$1}
+`;
+const H5 = 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 = 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) => styled.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 = styled.div.withConfig({ shouldForwardProp: isPropValid }) `
+  box-sizing: border-box;
+  
+  ${(props) => responsiveProps(props, {
+    "p": unit => styled.css `padding: ${props.theme.spacing(unit)};`,
+    "pt": unit => styled.css `padding-top: ${props.theme.spacing(unit)};`,
+    "pr": unit => styled.css `padding-right: ${props.theme.spacing(unit)};`,
+    "pb": unit => styled.css `padding-bottom: ${props.theme.spacing(unit)};`,
+    "pl": unit => styled.css `padding-left: ${props.theme.spacing(unit)};`,
+    "m": unit => styled.css `margin: ${props.theme.spacing(unit)};`,
+    "mt": unit => styled.css `margin-top: ${props.theme.spacing(unit)};`,
+    "mr": unit => styled.css `margin-right: ${props.theme.spacing(unit)};`,
+    "mb": unit => styled.css `margin-bottom: ${props.theme.spacing(unit)};`,
+    "ml": unit => styled.css `margin-left: ${props.theme.spacing(unit)};`,
+    "display": unit => styled.css `display: ${unit};`,
+    "flexGrow": unit => styled.css `flex-grow: ${unit};`,
+    "flexShrink": unit => styled.css `flex-shrink: ${unit};`,
+    "flexDirection": unit => styled.css `flex-direction: ${unit};`,
+    "alignItems": unit => styled.css `align-items: ${unit};`,
+    "textAlign": unit => styled.css `text-align: ${unit};`,
+    "justifyContent": unit => styled.css `justify-content: ${unit};`,
+    "width": unit => styled.css `width: ${typeof unit === 'number' ? props.theme.spacing(unit) : unit};`,
+})}
+`;
+
+const Wrapper$c = 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 = styled.g `
+    fill: none; 
+    stroke: ${green};    
+    stroke-width: 10;
+`;
+const polyLineAnimation = styled.keyframes `    
+    0% {
+        stroke-dashoffset: 100px
+    }
+    100% {
+        stroke-dashoffset: 0px
+    }
+`;
+const Polyline = 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 = styled.keyframes `
+    0% {
+        stroke-dashoffset: 480px 
+    }
+    100% {
+        stroke-dashoffset: 960px
+    }
+`;
+const Circle$1 = styled.circle `
+    stroke-dasharray: 480px, 480px; 
+    stroke-dashoffset: 960px;
+    animation: ${circleAnimation} 0.6s ease-in-out backwards;
+    stroke: ${green};
+    stroke-width: 10;    
+`;
+const circleColoredAnimation = styled.keyframes `
+    0% { 
+        opacity:0; 
+    }
+    100% { 
+        opacity:100; 
+    }
+`;
+const CircleColored = 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 = styled.ul `
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display:flex;
+`;
+const Crumb = 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 = 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 = styled(Box) `       
+  font-size: 12px;
+  font-style: italic;              
+`;
+const Title = styled(Box) `
+  ${(props) => props.panelHasChildren && styled.css `
+    border-radius: 4px;   
+    border-bottom: 1px solid rgba(34,36,38,.15);
+  `}
+  
+  ${(props) => !!props.onClick && styled.css `
+    cursor: pointer;
+    user-select: none;
+  `}        
+`;
+const Footer$1 = 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 = 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 = styled.div `
+  overflow: hidden;
+`;
+const Hider = 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 = styled.div.withConfig({ shouldForwardProp: isPropValid }) `
+  transform: scaleY( ${props => props.isOpen ? '-1' : '1'} );
+`;
+const StyledPanel$2 = styled(Panel) `
+   ${props => !props.isOpen && styled.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 = styled.keyframes `
+  0% {
+    opacity: 0;
+  }    
+  100% {
+    opacity: 1;
+  }
+`;
+const Overlay = 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 = 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 = styled(Panel) `
+  box-shadow: 0 8px 8px 0 rgba(34,36,38,.15);
+`;
+const Content = 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 = styled.div.withConfig({ shouldForwardProp: isPropValid }) `
+  ${props => props.stretch && `width: 100%;`}
+  ${props => props.actionButton || props.stretch
+    ? styled.css `margin: 0;`
+    : styled.css `margin: ${props => props.theme.spacing(0, 2, 0, 0)};`}      
+`;
+const StyledButton$1 = 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 && styled.css `
+      width: 100%;
+      display: block;
+  `}
+  
+  ${props => props.actionButton && styled.css `
+      width: 100%;      
+      ${mq('laptop', `width: auto`)}
+  `}
+  
+   
+  ${props => props.variant !== 'text'
+    ? !props.icon
+        ? styled.css `padding: ${props.theme.spacing(3, 5)}; min-width: ${props => props.theme.spacing(10)};`
+        : props.hasChildren && styled.css `position: relative; padding: ${props.theme.spacing(3, 5, 3, 13)};`
+    : styled.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 = styled.span.withConfig({ shouldForwardProp: isPropValid }) `
+  ${props => props.variant !== "text" && styled.css `
+     min-width: ${props.theme.spacing(10)};
+  `}
+ 
+  ${props => props.variant === "text"
+    ? props.hasChildren && styled.css `
+      padding-right: ${props.theme.spacing(2)};
+    `
+    : props.hasChildren && styled.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 = styled.table.withConfig({ shouldForwardProp: isPropValid }) `
+  border-radius: 4px;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  
+  ${(props) => responsiveProps(props, {
+    "tableLayout": unit => styled.css `table-layout: ${unit};`,
+})}      
+`;
+const StyledTableRow = 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 = 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 => styled.css `width: ${unit};`,
+})}
+`;
+const StyledTableHeadCell = 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 && styled.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 = styled(Table.Cell) `
+  ${(props) => props.firstRow && styled.css ` border-top: 0px !important;`}
+  ${(props) => props.width && styled.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 = styled.div `
+  position: relative;
+`;
+const Dropper = 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' ? styled.css `right: 0;` : styled.css `left: 0;`}  
+`;
+const DropdownMenu = styled.ul `
+  list-style: none;
+  margin: 0;
+  padding: ${props => props.theme.spacing(2, 0)};  
+`;
+const DropdownMenuItem = 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 = styled.input `
+  display: none;
+`;
+const StyledDropZone = 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 && styled.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 = 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 = 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", styled.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);'
+    : styled.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 = 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 = styled(Box) `
+  overflow-x: auto;
+  overflow-y: hidden;
+`;
+const HorizontalScroller = ({ children }) => (React.createElement(Scroller, null, children));
+
+const HamburgerButton = styled(Button$1) `
+  margin-right: ${props => props.theme.spacing(3)};    
+  ${mq("laptop", `display: none;`)} 
+`;
+
+const Menu = styled.ul `
+  padding: 0;
+  margin: 0;
+  list-style: none;
+`;
+const StyledMenuItem = styled.li.withConfig({ shouldForwardProp: isPropValid }) `
+  padding: ${props => props.theme.spacing(.5, 5)};
+    
+  ${props => props.isOpen && styled.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 && styled.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 = styled(Button$1) `      
+  ${mq("laptop", `display: none;`)} 
+`;
+
+const StyledBox$4 = 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 = 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', styled.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 = styled.div `
+  display: flex;
+`;
+const Button = 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 = 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 = styled.div `
+  text-transform: uppercase;
+  color: ${props => props.theme.palette.common.white};
+  font-size: ${props => props.theme.spacing(3)};  
+`;
+const Value = 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 = 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 = styled(Box) `
+    
+    padding: ${props => props.theme.spacing(2.5, 5)};
+    
+    ${props => !props.isActive && styled.css `
+        cursor: pointer;               
+        color: #337ab7;                
+        &:hover,
+        &:focus {
+          color: #23527c;
+          text-decoration: underline;
+        }
+    `}
+           
+    ${props => props.isActive && styled.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 = 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 = styled(Box) `
+    display: flex;
+    border-bottom: 1px solid rgba(34,36,38,.15);     
+`;
+
+const FlatPanel = styled(Panel) `
+  box-shadow: none;
+`;
+const Wrapper$4 = styled(Box) `
+  display: flex;
+  
+  &:last-of-type .line:before {
+    background: none;
+  }
+`;
+const Line = 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 = 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 = 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 = styled.label `
+  position: relative;  
+`;
+const Input$1 = 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 = styled.span.withConfig({ shouldForwardProp: isPropValid }) `
+  ${props => props.dimmed ? styled.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 = styled.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 = styled.input.withConfig({ shouldForwardProp: isPropValid }) `
+  ${sharedStyles}
+`;
+const Textarea = 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 = styled.div `
+  position: relative;
+  display: flex;    
+`;
+const HiddenInput = styled.input.withConfig({ shouldForwardProp: isPropValid }) `
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;    
+  width: 100%;
+  opacity:0;
+`;
+const StyledButton = styled(Button$1) `    
+  height: 40px;
+  
+  .has-error & {
+    background: #fff6f6;
+    border-color: #e0b4b4;
+    color: #9f3a38;
+  }  
+`;
+const StyledTextField = styled(TextField) `
+  flex: 1;  
+  padding-right: ${props => props.theme.spacing(8)}
+`;
+const DeleteButton = 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 = styled.div `
+  position: relative;
+`;
+const StyledSelect = 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 = 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 = 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 = 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(styled.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(styled.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(styled.css `
+      grid-column-start: ${position.column + 1};
+      -ms-grid-column: ${position.column + 1};
+    `);
+    }
+    if (position.columnSpan !== undefined) {
+        parts.push(styled.css `
+      grid-column-end: span ${position.columnSpan};
+      -ms-grid-column-span: ${position.columnSpan};
+    `);
+    }
+    return parts;
+};
+const FormGridCell = styled.div.withConfig({ shouldForwardProp: isPropValid }) ` 
+  margin: 0px 8px;
+  
+  ${props => props.rowOffset !== undefined && styled.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 => styled.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 = 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 = 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 = styled.span.withConfig({ shouldForwardProp: isPropValid }) `
+    color: ${props => props.theme.palette.form.hint};
+`;
+const Error$1 = 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 = styled.div.withConfig({ shouldForwardProp: isPropValid }) `
+  margin: 0 -8px -16px -8px;
+
+  display: -ms-grid;
+  display: grid;
+
+  -ms-grid-columns: 1fr;   
+  
+  ${(props) => responsiveProps(props, {
+    columns: (string) => styled.css `
+        -ms-grid-columns: ${string};           
+        grid-template-columns: ${string};
+      `
+})}
+`;
+FormGrid.displayName = "FormGrid";
+
+const Wrapper$1 = styled(Box) ` 
+  background-color: #F3F3F4;
+`;
+const WrapperInner = styled(Box) ` 
+  position: relative;
+`;
+const SidebarWrapper = styled(Box) ` 
+  position: absolute;
+  height: 100%;
+  z-index: 50;
+  pointer-events: none;
+`;
+const ContentBox = 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 = styled(Box) `
+  background-color:  ${props => props.baseColor || 'white'};
+  position: absolute;
+  min-width: 100%;
+  min-height: 100%;  
+`;
+const Background = 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 = styled(SlideInFromTop) `
+  z-index: 10;
+  margin: auto auto;
+`;
+const StyledPanel = styled(Panel) `
+  box-shadow: 0 8px 8px 0 rgba(34,36,38,.15);  
+  min-width: 280px;   
+`;
+const Logo = 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 = 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;