quicksnack 3.34.1 → 3.34.2

package/dist/bundle.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var styled = require('styled-components');
+var styledComponents = require('styled-components');
 var polished = require('polished');
 var isPropValid = require('@emotion/is-prop-valid');
 var clsx = require('clsx');
@@ -170,7 +170,7 @@ const theme = {
 // 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 ThemeProviderFixed = styledComponents.ThemeProvider;
 const UiProvider = ({ children, theme: themeOverride }) => (React.createElement(ThemeProviderFixed, { theme: themeOverride || theme }, children));
 
 const noop$1 = () => { };
@@ -191,7 +191,7 @@ const UiStateProvider = ({ children }) => {
         } }, children));
 };
 
-const Wrapper$d = styled.div `
+const Wrapper$d = styledComponents.styled.div `
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -203,7 +203,7 @@ const UiWrapper = ({ theme, children }) => (React.createElement(UiProvider, { th
     React.createElement(UiStateProvider, null,
         React.createElement(Wrapper$d, null, children))));
 
-const slideInFromTop = styled.keyframes `
+const slideInFromTop = styledComponents.keyframes `
   0% {
     opacity: 0;
     transform: translateY(-5px);
@@ -213,34 +213,34 @@ const slideInFromTop = styled.keyframes `
     transform: translateY(0);
   }
 `;
-const SlideInFromTop = styled.div.withConfig({ shouldForwardProp: isPropValid }) `
+const SlideInFromTop = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
   animation: ${slideInFromTop} ${props => props.speed || '.3s'} ease-in 0s 1;
 `;
 
-const sharedStyles$1 = styled.css `
+const sharedStyles$1 = styledComponents.css `
   margin: 0 0;  
   padding: 0 0;
   font-weight: 700;
   line-height: 1.28571429em;    
 `;
-const H1 = styled.h1.withConfig({ shouldForwardProp: isPropValid }) `
+const H1 = styledComponents.styled.h1.withConfig({ shouldForwardProp: isPropValid }) `
   font-size: 2rem;
   min-height: 1rem;
   ${sharedStyles$1}
 `;
-const H2 = styled.h2.withConfig({ shouldForwardProp: isPropValid }) `
+const H2 = styledComponents.styled.h2.withConfig({ shouldForwardProp: isPropValid }) `
   font-size: 1.71428571rem;
   ${sharedStyles$1}
 `;
-const H3 = styled.h3.withConfig({ shouldForwardProp: isPropValid }) `
+const H3 = styledComponents.styled.h3.withConfig({ shouldForwardProp: isPropValid }) `
   font-size: 1.28571429rem;
   ${sharedStyles$1}
 `;
-const H4 = styled.h4.withConfig({ shouldForwardProp: isPropValid }) `
+const H4 = styledComponents.styled.h4.withConfig({ shouldForwardProp: isPropValid }) `
   font-size: 1.07142857rem;
   ${sharedStyles$1}
 `;
-const H5 = styled.h5.withConfig({ shouldForwardProp: isPropValid }) `
+const H5 = styledComponents.styled.h5.withConfig({ shouldForwardProp: isPropValid }) `
   font-size: 1rem;
   ${sharedStyles$1}
 `;
@@ -258,7 +258,7 @@ const Header = (_a) => {
     return React.createElement(Component, Object.assign({}, restProps));
 };
 
-const Paragraph = styled.p `
+const Paragraph = styledComponents.styled.p `
     font-size: 14px;
     line-height: 20px;
     // margin: 0 0 1em;
@@ -280,7 +280,7 @@ const BreakPointValues = {
 /**
  * Wraps given cssRules in the corresponding media-query:
  */
-const mq = (bk, cssRules) => styled.css `
+const mq = (bk, cssRules) => styledComponents.css `
   @media screen and (min-width: ${BreakPointValues[bk]}px) {
     ${cssRules}        
   }        
@@ -322,32 +322,32 @@ const responsiveProps = (props, map) => {
     ];
 };
 
-const Box = styled.div.withConfig({ shouldForwardProp: isPropValid }) `
+const Box = styledComponents.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};`,
+    "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 = styled.div.withConfig({ shouldForwardProp: isPropValid }) `
+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};      
@@ -360,12 +360,12 @@ const Alert = ({ children, title, variant = "basic" }) => (React.createElement(W
         children && React.createElement(Paragraph, null, children))));
 
 const green = '#20c997';
-const Mask = styled.g `
+const Mask = styledComponents.styled.g `
     fill: none; 
     stroke: ${green};    
     stroke-width: 10;
 `;
-const polyLineAnimation = styled.keyframes `    
+const polyLineAnimation = styledComponents.keyframes `    
     0% {
         stroke-dashoffset: 100px
     }
@@ -373,14 +373,14 @@ const polyLineAnimation = styled.keyframes `
         stroke-dashoffset: 0px
     }
 `;
-const Polyline = styled.polyline `
+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 = styled.keyframes `
+const circleAnimation = styledComponents.keyframes `
     0% {
         stroke-dashoffset: 480px 
     }
@@ -388,14 +388,14 @@ const circleAnimation = styled.keyframes `
         stroke-dashoffset: 960px
     }
 `;
-const Circle$1 = styled.circle `
+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 = styled.keyframes `
+const circleColoredAnimation = styledComponents.keyframes `
     0% { 
         opacity:0; 
     }
@@ -403,7 +403,7 @@ const circleColoredAnimation = styled.keyframes `
         opacity:100; 
     }
 `;
-const CircleColored = styled.circle `
+const CircleColored = styledComponents.styled.circle `
     stroke-dasharray: 480px, 480px; 
     stroke-dashoffset: 960px;
     animation: ${circleColoredAnimation} 1.2s ease-in-out 1.4s backwards;
@@ -415,13 +415,13 @@ const AnimatedCheckmark = () => (React.createElement("svg", { viewBox: "0 0 154
         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 `
+const BreadCrumbs = styledComponents.styled.ul `
   list-style: none;
   padding: 0;
   margin: 0;
   display:flex;
 `;
-const Crumb = styled.li `
+const Crumb = styledComponents.styled.li `
   display: flex;  
  
   &:not(:last-of-type):after {    
@@ -434,28 +434,28 @@ const Crumb = styled.li `
   }
 `;
 
-const Wrapper$b = styled.div `       
+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 = styled(Box) `       
+const Meta = styledComponents.styled(Box) `       
   font-size: 12px;
   font-style: italic;              
 `;
-const Title = styled(Box) `
-  ${(props) => props.panelHasChildren && styled.css `
+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 && styled.css `
+  ${(props) => !!props.onClick && styledComponents.css `
     cursor: pointer;
     user-select: none;
   `}        
 `;
-const Footer$1 = styled(Box) `  
+const Footer$1 = styledComponents.styled(Box) `  
   border-radius: 4px;   
   background-color: #FFF;
   border-top: 1px solid rgba(34,36,38,.15);
@@ -469,16 +469,16 @@ const Panel = ({ children, className, title, titleAction, titleMeta, onClickTitl
     children && (React.createElement(Box, { p: p }, children)),
     footer && (React.createElement(Footer$1, { p: 3 }, footer))));
 
-const Animation = styled.div.withConfig({ shouldForwardProp: isPropValid }) `                
+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 = styled.div `
+const Wrapper$a = styledComponents.styled.div `
   overflow: hidden;
 `;
-const Hider = styled.div.withConfig({ shouldForwardProp: isPropValid }) `
+const Hider = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
    display: ${props => props.isHidden ? 'none' : 'block'};
 `;
 // Returns the boolean value in the next tick.
@@ -511,11 +511,11 @@ const SlideOpen = ({ isOpen, children, duration, onChange }) => {
             React.createElement(Hider, { isHidden: isHidden }, children))));
 };
 
-const TitleActionWrapper = styled.div.withConfig({ shouldForwardProp: isPropValid }) `
+const TitleActionWrapper = styledComponents.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 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"]);
@@ -544,7 +544,7 @@ const useConfirmModal = ({ onConfirm }) => {
     ];
 };
 
-const delay = styled.keyframes `
+const delay = styledComponents.keyframes `
   0% {
     opacity: 0;
   }    
@@ -552,7 +552,7 @@ const delay = styled.keyframes `
     opacity: 1;
   }
 `;
-const Overlay = styled.div `
+const Overlay = styledComponents.styled.div `
   position: fixed;  
   top: 0;
   left: 0; 
@@ -564,7 +564,7 @@ const Overlay = styled.div `
   animation: ${delay} 0.2s forwards;
 `;
 
-const Wrapper$9 = styled.div `
+const Wrapper$9 = styledComponents.styled.div `
   position: fixed;
   top: 0;
   left: 0;
@@ -577,10 +577,10 @@ const Wrapper$9 = styled.div `
   
   z-index: 50;
 `;
-const StyledPanel$1 = styled(Panel) `
+const StyledPanel$1 = styledComponents.styled(Panel) `
   box-shadow: 0 8px 8px 0 rgba(34,36,38,.15);
 `;
-const Content = styled.div `
+const Content = styledComponents.styled.div `
   line-height: ${props => props.theme.spacing(6)};
   font-size: 15px;
 `;
@@ -593,13 +593,13 @@ const Modal = (_a) => {
                 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 }) `
+const Wrapper$8 = styledComponents.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)};`}      
+    ? styledComponents.css `margin: 0;`
+    : styledComponents.css `margin: ${props => props.theme.spacing(0, 2, 0, 0)};`}      
 `;
-const StyledButton$1 = styled.button.withConfig({ shouldForwardProp: isPropValid }) `
+const StyledButton$1 = styledComponents.styled.button.withConfig({ shouldForwardProp: isPropValid }) `
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 1px;    
@@ -617,12 +617,12 @@ const StyledButton$1 = styled.button.withConfig({ shouldForwardProp: isPropValid
   user-select: none;
   min-height: ${props => props.inline ? 'auto' : '38px'};   
   
-  ${props => props.stretch && styled.css `
+  ${props => props.stretch && styledComponents.css `
       width: 100%;
       display: block;
   `}
   
-  ${props => props.actionButton && styled.css `
+  ${props => props.actionButton && styledComponents.css `
       width: 100%;      
       ${mq('laptop', `width: auto`)}
   `}
@@ -630,9 +630,9 @@ const StyledButton$1 = styled.button.withConfig({ shouldForwardProp: isPropValid
    
   ${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;`} 
+        ? 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;
@@ -673,16 +673,16 @@ const StyledButton$1 = styled.button.withConfig({ shouldForwardProp: isPropValid
     `;
 }}        
 `;
-const IconWrapper$1 = styled.span.withConfig({ shouldForwardProp: isPropValid }) `
-  ${props => props.variant !== "text" && styled.css `
+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 && styled.css `
+    ? props.hasChildren && styledComponents.css `
       padding-right: ${props.theme.spacing(2)};
     `
-    : props.hasChildren && styled.css `
+    : props.hasChildren && styledComponents.css `
       position: absolute;
       left: 0;
       top: 0;
@@ -724,17 +724,17 @@ const ConfirmButton = (_a) => {
         React.createElement(ConfirmModal, Object.assign({ title: "Are you sure?" }, modalProps, modalHandlerProps)));
 };
 
-const StyledTable = styled.table.withConfig({ shouldForwardProp: isPropValid }) `
+const StyledTable = styledComponents.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};`,
+    "tableLayout": unit => styledComponents.css `table-layout: ${unit};`,
 })}      
 `;
-const StyledTableRow = styled.tr.withConfig({ shouldForwardProp: isPropValid }) `
+const StyledTableRow = styledComponents.styled.tr.withConfig({ shouldForwardProp: isPropValid }) `
   & > td {
     transition: background-color .1s ease, color .1s ease;
   }
@@ -762,7 +762,7 @@ const StyledTableRow = styled.tr.withConfig({ shouldForwardProp: isPropValid })
     `} 
   `)}    
 `;
-const StyledTableCell = styled.td.withConfig({ shouldForwardProp: isPropValid }) `
+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)};
@@ -772,10 +772,10 @@ const StyledTableCell = styled.td.withConfig({ shouldForwardProp: isPropValid })
   }
         
   ${(props) => responsiveProps(props, {
-    width: unit => styled.css `width: ${unit};`,
+    width: unit => styledComponents.css `width: ${unit};`,
 })}
 `;
-const StyledTableHeadCell = styled.th.withConfig({ shouldForwardProp: isPropValid }) `  
+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)};  
@@ -786,7 +786,7 @@ const StyledTableHeadCell = styled.th.withConfig({ shouldForwardProp: isPropVali
     border-right: 0;
   }
   
-  ${props => !!props.variant && styled.css `
+  ${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};
     
@@ -840,9 +840,9 @@ 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};`}
+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,
@@ -850,10 +850,10 @@ const Details = ({ details, firstColumnWidth }) => (React.createElement(Table, n
         React.createElement(StyledCell, { width: firstColumnWidth, firstRow: index === 0 }, key),
         React.createElement(StyledCell, { firstRow: index === 0 }, val)))))));
 
-const Wrapper$7 = styled.div `
+const Wrapper$7 = styledComponents.styled.div `
   position: relative;
 `;
-const Dropper = styled.span.withConfig({ shouldForwardProp: isPropValid }) `
+const Dropper = styledComponents.styled.span.withConfig({ shouldForwardProp: isPropValid }) `
   border-radius: 4px;
   border: 1px solid rgba(34,36,38,.15);
   position: absolute;
@@ -861,14 +861,14 @@ const Dropper = styled.span.withConfig({ shouldForwardProp: isPropValid }) `
   background-color: ${props => props.theme.palette.common.white};
   z-index: 100;
   
-  ${props => props.align === 'right' ? styled.css `right: 0;` : styled.css `left: 0;`}  
+  ${props => props.align === 'right' ? styledComponents.css `right: 0;` : styledComponents.css `left: 0;`}  
 `;
-const DropdownMenu = styled.ul `
+const DropdownMenu = styledComponents.styled.ul `
   list-style: none;
   margin: 0;
   padding: ${props => props.theme.spacing(2, 0)};  
 `;
-const DropdownMenuItem = styled.li `
+const DropdownMenuItem = styledComponents.styled.li `
   cursor: pointer;
   padding: ${props => props.theme.spacing(0, 3)};
   &:hover {
@@ -899,10 +899,10 @@ const Dropdown = ({ buttonProps, align, children, stayOpenOnClick }) => {
             React.createElement(Dropper, { ref: dropper, align: align || 'left' }, children)))));
 };
 
-const HiddenInput$1 = styled.input `
+const HiddenInput$1 = styledComponents.styled.input `
   display: none;
 `;
-const StyledDropZone = styled.div.withConfig({ shouldForwardProp: isPropValid }) `
+const StyledDropZone = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -917,7 +917,7 @@ const StyledDropZone = styled.div.withConfig({ shouldForwardProp: isPropValid })
     pointerEvents: none;
   }
   
-  ${props => props.isReadyToDrop && styled.css `
+  ${props => props.isReadyToDrop && styledComponents.css `
     background-color: #FAFAFA;    
   `}
 `;
@@ -960,7 +960,7 @@ const Dropzone = (_a) => {
             React.createElement(Button$1, { variant: "text", color: "secondary", type: "button", icon: icon }, label))));
 };
 
-const StyledBox$6 = styled(Box) `
+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) },
@@ -995,7 +995,7 @@ const Floater = (_a) => {
 };
 
 const SIDEBAR_COLLAPSED_WIDTH = 15;
-const StyledSidebar = styled(Box) `
+const StyledSidebar = styledComponents.styled(Box) `
   float: left;
     
   height: 100%;
@@ -1014,7 +1014,7 @@ const StyledSidebar = styled(Box) `
   display: ${props => props.isMobileMenuOpen ? 'block' : 'none'};     
   pointer-events: auto;
      
-  ${mq("laptop", styled.css `
+  ${mq("laptop", styledComponents.css `
     position: static;    
     display: block;
     width: auto;
@@ -1024,7 +1024,7 @@ const StyledSidebar = styled(Box) `
     transition: transform .1s ease-out;
     transform: ${props => props.isDesktopMenuOpen
     ? 'transform: translateX(0);'
-    : styled.css `translateX(calc(-100% + ${props => props.theme.spacing(SIDEBAR_COLLAPSED_WIDTH)}));`}; 
+    : styledComponents.css `translateX(calc(-100% + ${props => props.theme.spacing(SIDEBAR_COLLAPSED_WIDTH)}));`}; 
              
     & ul {
       opacity: ${props => props.isDesktopMenuOpen ? '1' : '0'};
@@ -1036,7 +1036,7 @@ const SideBar = (props) => {
     return React.createElement(StyledSidebar, Object.assign({ isDesktopMenuOpen: isSideMenuOpen }, props, { onMouseEnter: openSideMenu, onMouseLeave: closeSideMenu }));
 };
 
-const StyledBox$5 = styled(Box) `
+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);  
@@ -1044,26 +1044,26 @@ const StyledBox$5 = styled(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) `
+const Scroller = styledComponents.styled(Box) `
   overflow-x: auto;
   overflow-y: hidden;
 `;
 const HorizontalScroller = ({ children }) => (React.createElement(Scroller, null, children));
 
-const HamburgerButton = styled(Button$1) `
+const HamburgerButton = styledComponents.styled(Button$1) `
   margin-right: ${props => props.theme.spacing(3)};    
   ${mq("laptop", `display: none;`)} 
 `;
 
-const Menu = styled.ul `
+const Menu = styledComponents.styled.ul `
   padding: 0;
   margin: 0;
   list-style: none;
 `;
-const StyledMenuItem = styled.li.withConfig({ shouldForwardProp: isPropValid }) `
+const StyledMenuItem = styledComponents.styled.li.withConfig({ shouldForwardProp: isPropValid }) `
   padding: ${props => props.theme.spacing(.5, 5)};
     
-  ${props => props.isOpen && styled.css `  
+  ${props => props.isOpen && styledComponents.css `  
       border-left: ${props.theme.spacing(1)} solid ${props.theme.palette.colors.blue};      
       background: #293846;
       
@@ -1080,7 +1080,7 @@ const StyledMenuItem = styled.li.withConfig({ shouldForwardProp: isPropValid })
     width: 100%;
   }
   
-  ${props => props.isActive && styled.css `
+  ${props => props.isActive && styledComponents.css `
     & button { 
       color: ${props.theme.palette.common.white};
     }
@@ -1093,11 +1093,11 @@ const MenuItem = ({ item, isOpen, isActive, children }) => {
         children && (React.createElement(SlideOpen, { onChange: setDelayedOpen, isOpen: !!isOpen, duration: .25 }, children))));
 };
 
-const MenuCloseButton = styled(Button$1) `      
+const MenuCloseButton = styledComponents.styled(Button$1) `      
   ${mq("laptop", `display: none;`)} 
 `;
 
-const StyledBox$4 = styled(Box) `
+const StyledBox$4 = styledComponents.styled(Box) `
     display: none;
     ${mq("laptop", `display: flex;`)}
     
@@ -1120,7 +1120,7 @@ const MenuSlideOpenIndicator = ({ children }) => (React.createElement(StyledBox$
 const VerticalRhythmLaptop = 7;
 const VerticalRhythmMobile = 4;
 
-const StyledBox$3 = styled(Box) `
+const StyledBox$3 = styledComponents.styled(Box) `
   box-sizing: border-box; 
   color: ${props => props.theme.palette.button.text.idle.text};
   font-weight: bold;  
@@ -1135,7 +1135,7 @@ const StyledBox$3 = styled(Box) `
   
   background-color: rgba(0,0,0,.2);
   
-  ${mq('laptop', styled.css `
+  ${mq('laptop', styledComponents.css `
       min-height: ${props => props.theme.spacing(12)};
   `)}  
 `;
@@ -1189,10 +1189,10 @@ const useResponsiveBreakpoints = () => {
     return responsiveMap;
 };
 
-const Wrapper$6 = styled.div `
+const Wrapper$6 = styledComponents.styled.div `
   display: flex;
 `;
-const Button = styled.button.withConfig({ shouldForwardProp: isPropValid }) `
+const Button = styledComponents.styled.button.withConfig({ shouldForwardProp: isPropValid }) `
   user-select:none;
   cursor: pointer;
 
@@ -1242,7 +1242,7 @@ const Paginator = (props) => {
 
 const Section = (props) => (React.createElement(Box, Object.assign({ pb: { laptop: VerticalRhythmLaptop, mobile: VerticalRhythmMobile } }, props)));
 
-const Wrapper$5 = styled.div.withConfig({ shouldForwardProp: isPropValid }) `
+const Wrapper$5 = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
   display: flex;
   border-radius: ${props => props.theme.spacing(1)};
   padding: ${props => props.theme.spacing(4)};
@@ -1250,17 +1250,17 @@ const Wrapper$5 = styled.div.withConfig({ shouldForwardProp: isPropValid }) `
   box-sizing: border-box;
   height: 100%;
 `;
-const Label$2 = styled.div `
+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 = styled.div.withConfig({ shouldForwardProp: isPropValid }) `
+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 = styled.div `
+const IconWrapper = styledComponents.styled.div `
   margin: ${props => props.theme.spacing(1)} 0 auto 0; 
   & svg {
     height: 100%;
@@ -1274,11 +1274,11 @@ const Statistic = ({ icon, value, label, backgroundColor, smallerValue }) => (Re
         React.createElement(Label$2, null, label),
         React.createElement(Value, { smallerValue: smallerValue }, value))));
 
-const StyledBox$2 = styled(Box) `
+const StyledBox$2 = styledComponents.styled(Box) `
     
     padding: ${props => props.theme.spacing(2.5, 5)};
     
-    ${props => !props.isActive && styled.css `
+    ${props => !props.isActive && styledComponents.css `
         cursor: pointer;               
         color: #337ab7;                
         &:hover,
@@ -1288,7 +1288,7 @@ const StyledBox$2 = styled(Box) `
         }
     `}
            
-    ${props => props.isActive && styled.css `
+    ${props => props.isActive && styledComponents.css `
         font-weight: bold;
         border: 1px solid rgba(34,36,38,.15);
         border-bottom: 0px;
@@ -1317,29 +1317,29 @@ const Tab = (_a) => {
     return React.createElement(StyledBox$2, Object.assign({}, restProps, { onClick: handleClick, isActive: isActive }));
 };
 
-const StyledBox$1 = styled(Box) `
+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 = styled(Box) `
+const Tabs = styledComponents.styled(Box) `
     display: flex;
     border-bottom: 1px solid rgba(34,36,38,.15);     
 `;
 
-const FlatPanel = styled(Panel) `
+const FlatPanel = styledComponents.styled(Panel) `
   box-shadow: none;
 `;
-const Wrapper$4 = styled(Box) `
+const Wrapper$4 = styledComponents.styled(Box) `
   display: flex;
   
   &:last-of-type .line:before {
     background: none;
   }
 `;
-const Line = styled(Box) `
+const Line = styledComponents.styled(Box) `
   position: relative;
   margin-right: ${props => props.theme.spacing(4)};
   top: 4px;
@@ -1355,7 +1355,7 @@ const Line = styled(Box) `
   }
     
 `;
-const Circle = styled.div.withConfig({ shouldForwardProp: isPropValid }) `
+const Circle = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
   position: relative;
   background-color: ${props => props.color};
   color: #fff; 
@@ -1384,7 +1384,7 @@ const SimpleTimeline = ({ color, icon, title, titleMeta }) => (React.createEleme
     React.createElement(Box, { pb: 4, flexGrow: 1 },
         React.createElement(FlatPanel, { titleMeta: titleMeta, title: title }))));
 
-const StyledBox = styled(Box) `
+const StyledBox = styledComponents.styled(Box) `
   background-color: #FFFFFF;
   border-bottom: 1px solid #DDDDDD;
   box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.04);   
@@ -1395,10 +1395,10 @@ const TopBar = ({ left, right }) => (React.createElement(StyledBox, null,
         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 `
+const Label$1 = styledComponents.styled.label `
   position: relative;  
 `;
-const Input$1 = styled.input.withConfig({ shouldForwardProp: isPropValid }) ` 
+const Input$1 = styledComponents.styled.input.withConfig({ shouldForwardProp: isPropValid }) ` 
   position: absolute;
   top: 0;
   left: 0;
@@ -1465,8 +1465,8 @@ const Input$1 = styled.input.withConfig({ shouldForwardProp: isPropValid }) `
     color: #9f3a38;
   }  
 `;
-const Span = styled.span.withConfig({ shouldForwardProp: isPropValid }) `
-  ${props => props.dimmed ? styled.css `color: #999c9e;` : ''}
+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"]);
@@ -1476,7 +1476,7 @@ const Checkbox = React.forwardRef((_a, ref) => {
             React.createElement(Span, { dimmed: dimmed }, label)))))));
 });
 
-const sharedStyles = styled.css `
+const sharedStyles = styledComponents.css `
   padding: .67857143em 1em;
   line-height: 1.21428571em;
   border-radius: 4px;
@@ -1525,10 +1525,10 @@ const sharedStyles = styled.css `
     color: #da9796;
   }        
 `;
-const Input = styled.input.withConfig({ shouldForwardProp: isPropValid }) `
+const Input = styledComponents.styled.input.withConfig({ shouldForwardProp: isPropValid }) `
   ${sharedStyles}
 `;
-const Textarea = styled.textarea.withConfig({ shouldForwardProp: isPropValid }) `
+const Textarea = styledComponents.styled.textarea.withConfig({ shouldForwardProp: isPropValid }) `
   ${sharedStyles}
   height: 100%;
 `;
@@ -1539,11 +1539,11 @@ const TextField = React.forwardRef((_a, ref) => {
         : React.createElement(Input, Object.assign({ ref: ref, type: "text" }, restProps));
 });
 
-const Wrapper$3 = styled.div `
+const Wrapper$3 = styledComponents.styled.div `
   position: relative;
   display: flex;    
 `;
-const HiddenInput = styled.input.withConfig({ shouldForwardProp: isPropValid }) `
+const HiddenInput = styledComponents.styled.input.withConfig({ shouldForwardProp: isPropValid }) `
   position: absolute;
   left: 0;
   right: 0;
@@ -1552,7 +1552,7 @@ const HiddenInput = styled.input.withConfig({ shouldForwardProp: isPropValid })
   width: 100%;
   opacity:0;
 `;
-const StyledButton = styled(Button$1) `    
+const StyledButton = styledComponents.styled(Button$1) `    
   height: 40px;
   
   .has-error & {
@@ -1561,11 +1561,11 @@ const StyledButton = styled(Button$1) `
     color: #9f3a38;
   }  
 `;
-const StyledTextField = styled(TextField) `
+const StyledTextField = styledComponents.styled(TextField) `
   flex: 1;  
   padding-right: ${props => props.theme.spacing(8)}
 `;
-const DeleteButton = styled.button `    
+const DeleteButton = styledComponents.styled.button `    
     background-color: transparent;
     border: 0;
     outline: 0;    
@@ -1627,10 +1627,10 @@ const FileField = React.forwardRef((_a, ref) => {
         !!fileName && onClear && React.createElement(DeleteButton, { "data-testid": 'file-clear', onClick: handleRemove })));
 });
 
-const Wrapper$2 = styled.div `
+const Wrapper$2 = styledComponents.styled.div `
   position: relative;
 `;
-const StyledSelect = styled.select.withConfig({ shouldForwardProp: isPropValid }) `
+const StyledSelect = styledComponents.styled.select.withConfig({ shouldForwardProp: isPropValid }) `
   width: 100%;
 
   padding: .67857143em 1em;
@@ -1656,7 +1656,7 @@ const StyledSelect = styled.select.withConfig({ shouldForwardProp: isPropValid }
     color: #9f3a38;
   }    
 `;
-const PaddingOverlay = styled.div `
+const PaddingOverlay = styledComponents.styled.div `
   pointer-events: none;
   padding: 0 1em;
   position:absolute;  
@@ -1687,14 +1687,14 @@ const calculatePasswordScore = (val) => checks
     .reduce((acc, value) => value
     ? acc + 1
     : acc, 1);
-const Progress = styled.div `
+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 = styled.div.withConfig({ shouldForwardProp: isPropValid }) `
+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'} ;
@@ -1732,35 +1732,35 @@ const generateDimensionsCss = (position, rowOffset) => {
         return parts;
     }
     if (position.row !== undefined) {
-        parts.push(styled.css `
+        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(styled.css `
+        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(styled.css `
+        parts.push(styledComponents.css `
       grid-column-start: ${position.column + 1};
       -ms-grid-column: ${position.column + 1};
     `);
     }
     if (position.columnSpan !== undefined) {
-        parts.push(styled.css `
+        parts.push(styledComponents.css `
       grid-column-end: span ${position.columnSpan};
       -ms-grid-column-span: ${position.columnSpan};
     `);
     }
     return parts;
 };
-const FormGridCell = styled.div.withConfig({ shouldForwardProp: isPropValid }) ` 
+const FormGridCell = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) ` 
   margin: 0px 8px;
   
-  ${props => props.rowOffset !== undefined && styled.css `
+  ${props => props.rowOffset !== undefined && styledComponents.css `
     display: flex;
     flex-direction: column;
     margin-bottom: 16px;`}
@@ -1769,13 +1769,13 @@ const FormGridCell = styled.div.withConfig({ shouldForwardProp: isPropValid }) `
   -ms-grid-row-align: ${props => props.rowOffset === undefined ? "end" : "initial"};
   
   ${(props) => responsiveProps(props, {
-    "align": unit => styled.css `text-align: ${unit};`,
+    "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 = styled.label.withConfig({ shouldForwardProp: isPropValid }) `
+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;
@@ -1783,16 +1783,16 @@ const Label = styled.label.withConfig({ shouldForwardProp: isPropValid }) `
     line-height: 1.4em; 
     font-size: .92857143em;
 `;
-const Hint = styled.div.withConfig({ shouldForwardProp: isPropValid }) `
+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 = styled.span.withConfig({ shouldForwardProp: isPropValid }) `
+const RequiredAsterisk = styledComponents.styled.span.withConfig({ shouldForwardProp: isPropValid }) `
     color: ${props => props.theme.palette.form.hint};
 `;
-const Error$1 = styled.div.withConfig({ shouldForwardProp: isPropValid }) `    
+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;       
@@ -1811,7 +1811,7 @@ const FormGridWrapper = ({ position, align, label, hint, error, isRequired, chil
         children,
         error && (React.createElement(Error$1, null, error)))));
 
-const FormGrid = styled.div.withConfig({ shouldForwardProp: isPropValid }) `
+const FormGrid = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
   margin: 0 -8px -16px -8px;
 
   display: -ms-grid;
@@ -1820,7 +1820,7 @@ const FormGrid = styled.div.withConfig({ shouldForwardProp: isPropValid }) `
   -ms-grid-columns: 1fr;   
   
   ${(props) => responsiveProps(props, {
-    columns: (string) => styled.css `
+    columns: (string) => styledComponents.css `
         -ms-grid-columns: ${string};           
         grid-template-columns: ${string};
       `
@@ -1828,19 +1828,19 @@ const FormGrid = styled.div.withConfig({ shouldForwardProp: isPropValid }) `
 `;
 FormGrid.displayName = "FormGrid";
 
-const Wrapper$1 = styled(Box) ` 
+const Wrapper$1 = styledComponents.styled(Box) ` 
   background-color: #F3F3F4;
 `;
-const WrapperInner = styled(Box) ` 
+const WrapperInner = styledComponents.styled(Box) ` 
   position: relative;
 `;
-const SidebarWrapper = styled(Box) ` 
+const SidebarWrapper = styledComponents.styled(Box) ` 
   position: absolute;
   height: 100%;
   z-index: 50;
   pointer-events: none;
 `;
-const ContentBox = styled(Box) `
+const ContentBox = styledComponents.styled(Box) `
   height: 100%;
 `;
 const BasicLayout = ({ sideBarProps, topBarProps, footerProps, isLoading, loader, children }) => {
@@ -1856,13 +1856,13 @@ const BasicLayout = ({ sideBarProps, topBarProps, footerProps, isLoading, loader
                 React.createElement(Footer, Object.assign({}, footerProps))))));
 };
 
-const Wrapper = styled(Box) `
+const Wrapper = styledComponents.styled(Box) `
   background-color:  ${props => props.baseColor || 'white'};
   position: absolute;
   min-width: 100%;
   min-height: 100%;  
 `;
-const Background = styled.div.withConfig({ shouldForwardProp: isPropValid }) `
+const Background = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
   position: absolute;
   top: 0;
   left: 0;
@@ -1873,15 +1873,15 @@ const Background = styled.div.withConfig({ shouldForwardProp: isPropValid }) `
   background: url("${props => props.imageUrl}");
   background-size: cover;
 `;
-const StyledAnimation = styled(SlideInFromTop) `
+const StyledAnimation = styledComponents.styled(SlideInFromTop) `
   z-index: 10;
   margin: auto auto;
 `;
-const StyledPanel = styled(Panel) `
+const StyledPanel = styledComponents.styled(Panel) `
   box-shadow: 0 8px 8px 0 rgba(34,36,38,.15);  
   min-width: 280px;   
 `;
-const Logo = styled.img `
+const Logo = styledComponents.styled.img `
   display:none;
   position: absolute;
   left: 0;