quicksnack 3.35.2 → 3.37.0

package/dist/bundle.js

@@ -4,6 +4,36 @@ var React = require('react');
 var styledComponents = require('styled-components');
 var immer = require('immer');
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$3 = ":root{--common-black:#000000de;--common-white:#fff;--colors-blue:#007bff;--colors-indigo:#6610f2;--colors-purple:#6f42c1;--colors-pink:#e83e8c;--colors-red:#e83e3e;--colors-orange:#fd7e14;--colors-yellow:#ffc107;--colors-green:#23b294;--colors-teal:#20c997;--colors-cyan:#17a2b8;--colors-gray:#6c757d;--colors-grayDark:#343a40;--colors-light:#f8f9fa;--colors-dark:#343a40;--form-hint:#c7c7c7;--form-error:#9f3a38;--button-basic-idle-background:#fff;--button-basic-idle-text:#000000de;--button-basic-hover-background:#e5e5e5;--button-basic-hover-text:rgba(0,0,0,.883);--button-basic-active-background:#ccc;--button-basic-active-text:rgba(0,0,0,.896);--button-default-idle-background:#e0e1e2;--button-default-idle-text:#000000de;--button-default-hover-background:#c9cacb;--button-default-hover-text:rgba(0,0,0,.883);--button-default-active-background:#b3b4b4;--button-default-active-text:rgba(0,0,0,.896);--button-text-idle-text:#999c9e;--button-text-idle-background:#0000;--button-text-active-text:#000000de;--button-text-active-background:#0000;--button-text-hover-text:#000000de;--button-text-hover-background:#0000;--button-danger-idle-background:#ec5969;--button-danger-idle-text:#fff;--button-danger-hover-background:#d4505e;--button-danger-hover-text:#fff;--button-danger-active-background:#bc4754;--button-danger-active-text:#fff;--button-primary-idle-background:#2284c4;--button-primary-idle-text:#fff;--button-primary-hover-background:#1e76b0;--button-primary-hover-text:#fff;--button-primary-active-background:#1b699c;--button-primary-active-text:#fff;--button-secondary-idle-background:#23b294;--button-secondary-idle-text:#fff;--button-secondary-hover-background:#1fa085;--button-secondary-hover-text:#fff;--button-secondary-active-background:#1c8e76;--button-secondary-active-text:#fff;--pane-basic-main-idle-text:#000000de;--pane-basic-main-idle-background:#fff;--pane-basic-main-idle-border:#ddd;--pane-basic-main-hover-text:#000000de;--pane-basic-main-hover-background:#f2f2f2;--pane-basic-main-hover-border:#ddd;--pane-basic-alternate-idle-text:#000000de;--pane-basic-alternate-idle-background:#f9f9f9;--pane-basic-alternate-idle-border:#ddd;--pane-basic-alternate-hover-text:#000000de;--pane-basic-alternate-hover-background:#f2f2f2;--pane-basic-alternate-hover-border:#ddd;--pane-emphasized-main-idle-text:#000000de;--pane-emphasized-main-idle-background:#f3f3f3;--pane-emphasized-main-idle-border:#ddd;--pane-emphasized-main-hover-text:#000000de;--pane-emphasized-main-hover-background:#e6e6e6;--pane-emphasized-main-hover-border:#ddd;--pane-emphasized-alternate-idle-text:#000000de;--pane-emphasized-alternate-idle-background:#eee;--pane-emphasized-alternate-idle-border:#ddd;--pane-emphasized-alternate-hover-text:#000000de;--pane-emphasized-alternate-hover-background:#e6e6e6;--pane-emphasized-alternate-hover-border:#ddd;--pane-info-main-idle-text:#0c5460;--pane-info-main-idle-background:#d1ecf1;--pane-info-main-idle-border:#bee5eb;--pane-info-main-hover-text:#0c5460;--pane-info-main-hover-background:#c6e0e4;--pane-info-main-hover-border:#bee5eb;--pane-info-alternate-idle-text:#0c5460;--pane-info-alternate-idle-background:#cce7ec;--pane-info-alternate-idle-border:#bee5eb;--pane-info-alternate-hover-text:#0c5460;--pane-info-alternate-hover-background:#c6e0e4;--pane-info-alternate-hover-border:#bee5eb;--pane-negative-main-idle-text:#721c24;--pane-negative-main-idle-background:#f8d7da;--pane-negative-main-idle-border:#f5c6cb;--pane-negative-main-hover-text:#721c24;--pane-negative-main-hover-background:#ebcccf;--pane-negative-main-hover-border:#f5c6cb;--pane-negative-alternate-idle-text:#721c24;--pane-negative-alternate-idle-background:#f3d2d5;--pane-negative-alternate-idle-border:#f5c6cb;--pane-negative-alternate-hover-text:#721c24;--pane-negative-alternate-hover-background:#ebcccf;--pane-negative-alternate-hover-border:#f5c6cb;--pane-positive-main-idle-text:#155724;--pane-positive-main-idle-background:#d4edda;--pane-positive-main-idle-border:#c3e6cb;--pane-positive-main-hover-text:#155724;--pane-positive-main-hover-background:#c9e1cf;--pane-positive-main-hover-border:#c3e6cb;--pane-positive-alternate-idle-text:#155724;--pane-positive-alternate-idle-background:#cfe8d5;--pane-positive-alternate-idle-border:#c3e6cb;--pane-positive-alternate-hover-text:#155724;--pane-positive-alternate-hover-background:#c9e1cf;--pane-positive-alternate-hover-border:#c3e6cb;--pane-warning-main-idle-text:#856404;--pane-warning-main-idle-background:#fff3cd;--pane-warning-main-idle-border:#ffeeba;--pane-warning-main-hover-text:#856404;--pane-warning-main-hover-background:#f2e6c2;--pane-warning-main-hover-border:#ffeeba;--pane-warning-alternate-idle-text:#856404;--pane-warning-alternate-idle-background:#f9eec8;--pane-warning-alternate-idle-border:#ffeeba;--pane-warning-alternate-hover-text:#856404;--pane-warning-alternate-hover-background:#f2e6c2;--pane-warning-alternate-hover-border:#ffeeba;--spacing:4px}";
+styleInject(css_248z$3);
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -999,7 +1029,7 @@ const UiStateProvider = ({ children }) => {
         } }, children));
 };
 
-const Wrapper$d = styledComponents.styled.div `
+const Wrapper$c = styledComponents.styled.div `
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -1009,7 +1039,7 @@ const Wrapper$d = styledComponents.styled.div `
 `;
 const UiWrapper = ({ theme, children }) => (React.createElement(UiProvider, { theme: theme },
     React.createElement(UiStateProvider, null,
-        React.createElement(Wrapper$d, null, children))));
+        React.createElement(Wrapper$c, null, children))));
 
 function memoize(fn) {
   var cache = Object.create(null);
@@ -1045,6 +1075,10 @@ const SlideInFromTop = styledComponents.styled.div.withConfig({ shouldForwardPro
   animation: ${slideInFromTop} ${props => props.speed || '.3s'} ease-in 0s 1;
 `;
 
+var css_248z$2 = ".Alert-module_wrapper__zP8eL{border-radius:4px}.Alert-module_variant-positive__Cqab0{background-color:var(--pane-positive-main-idle-background);border:1px solid var(--pane-positive-main-idle-border);color:var(--pane-positive-main-idle-text)}.Alert-module_variant-negative__mORCP{background-color:var(--pane-negative-main-idle-background);border:1px solid var(--pane-negative-main-idle-border);color:var(--pane-negative-main-idle-text)}.Alert-module_variant-info__b3OY9{background-color:var(--pane-info-main-idle-background);border:1px solid var(--pane-info-main-idle-border);color:var(--pane-info-main-idle-text)}.Alert-module_variant-warning__gBX5-{background-color:var(--pane-warning-main-idle-background);border:1px solid var(--pane-warning-main-idle-border);color:var(--pane-warning-main-idle-text)}.Alert-module_variant-basic__AQmn7{background-color:var(--pane-basic-main-idle-background);border:1px solid var(--pane-basic-main-idle-border);color:var(--pane-basic-main-idle-text)}.Alert-module_variant-emphasized__8GiYF{background-color:var(--pane-emphasized-main-idle-background);border:1px solid var(--pane-emphasized-main-idle-border);color:var(--pane-emphasized-main-idle-text)}";
+var classes$2 = {"wrapper":"Alert-module_wrapper__zP8eL","variant-positive":"Alert-module_variant-positive__Cqab0","variant-negative":"Alert-module_variant-negative__mORCP","variant-info":"Alert-module_variant-info__b3OY9","variant-warning":"Alert-module_variant-warning__gBX5-","variant-basic":"Alert-module_variant-basic__AQmn7","variant-emphasized":"Alert-module_variant-emphasized__8GiYF"};
+styleInject(css_248z$2);
+
 const sharedStyles$1 = styledComponents.css `
   margin: 0 0;  
   padding: 0 0;
@@ -1150,38 +1184,112 @@ const responsiveProps = (props, map) => {
     ];
 };
 
-const Box = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  box-sizing: border-box;
-  
-  ${(props) => responsiveProps(props, {
-    "p": unit => styledComponents.css `padding: ${props.theme.spacing(unit)};`,
-    "pt": unit => styledComponents.css `padding-top: ${props.theme.spacing(unit)};`,
-    "pr": unit => styledComponents.css `padding-right: ${props.theme.spacing(unit)};`,
-    "pb": unit => styledComponents.css `padding-bottom: ${props.theme.spacing(unit)};`,
-    "pl": unit => styledComponents.css `padding-left: ${props.theme.spacing(unit)};`,
-    "m": unit => styledComponents.css `margin: ${props.theme.spacing(unit)};`,
-    "mt": unit => styledComponents.css `margin-top: ${props.theme.spacing(unit)};`,
-    "mr": unit => styledComponents.css `margin-right: ${props.theme.spacing(unit)};`,
-    "mb": unit => styledComponents.css `margin-bottom: ${props.theme.spacing(unit)};`,
-    "ml": unit => styledComponents.css `margin-left: ${props.theme.spacing(unit)};`,
-    "display": unit => styledComponents.css `display: ${unit};`,
-    "flexGrow": unit => styledComponents.css `flex-grow: ${unit};`,
-    "flexShrink": unit => styledComponents.css `flex-shrink: ${unit};`,
-    "flexDirection": unit => styledComponents.css `flex-direction: ${unit};`,
-    "alignItems": unit => styledComponents.css `align-items: ${unit};`,
-    "textAlign": unit => styledComponents.css `text-align: ${unit};`,
-    "justifyContent": unit => styledComponents.css `justify-content: ${unit};`,
-    "width": unit => styledComponents.css `width: ${typeof unit === 'number' ? props.theme.spacing(unit) : unit};`,
-})}
-`;
+var css_248z$1 = ".Box-module_box__Wgbf3{box-sizing:border-box}@media (min-width:0px){.Box-module_p__uTNSv{padding:var(--p)}.Box-module_pt__MH-Lm{padding-top:var(--pt)}.Box-module_pr__3616n{padding-right:var(--pr)}.Box-module_pb__Kvp5q{padding-bottom:var(--pb)}.Box-module_pl__bOUi1{padding-left:var(--pl)}.Box-module_m__mpyOZ{margin:var(--m)}.Box-module_mt__pIuu-{margin-top:var(--mt)}.Box-module_mr__U03MD{margin-right:var(--mr)}.Box-module_mb__aqoO-{margin-bottom:var(--mb)}.Box-module_ml__-kvBt{margin-left:var(--ml)}.Box-module_display__spr38{display:var(--display)}.Box-module_flexGrow__pea61{flex-grow:var(--flexGrow)}.Box-module_flexShrink__oFCTI{flex-shrink:var(--flexShrink)}.Box-module_flexDirection__5aoqo{flex-direction:var(--flexDirection)}.Box-module_alignItems__-jg7t{align-items:var(--alignItems)}.Box-module_textAlign__nv7di{text-align:var(--textAlign)}.Box-module_justifyContent__tRuSe{justify-content:var(--justifyContent)}}@media (min-width:768px){.Box-module_tablet_p__hAV67{padding:var(--tablet_p)}.Box-module_tablet_pt__6WosU{padding-top:var(--tablet_pt)}.Box-module_tablet_pr__4twiC{padding-right:var(--tablet_pr)}.Box-module_tablet_pb__OGIGX{padding-bottom:var(--tablet_pb)}.Box-module_tablet_pl__niebc{padding-left:var(--tablet_pl)}.Box-module_tablet_m__DRZCy{margin:var(--tablet_m)}.Box-module_tablet_mt__ySyc8{margin-top:var(--tablet_mt)}.Box-module_tablet_mr__wSu4Q{margin-right:var(--tablet_mr)}.Box-module_tablet_mb__cAy-T{margin-bottom:var(--tablet_mb)}.Box-module_tablet_ml__QoOMl{margin-left:var(--tablet_ml)}.Box-module_tablet_display__VoPGZ{display:var(--tablet_display)}.Box-module_tablet_flexGrow__Csxsp{flex-grow:var(--tablet_flexGrow)}.Box-module_tablet_flexShrink__zC-Gw{flex-shrink:var(--tablet_flexShrink)}.Box-module_tablet_flexDirection__nKcqC{flex-direction:var(--tablet_flexDirection)}.Box-module_tablet_alignItems__aY4YO{align-items:var(--tablet_alignItems)}.Box-module_tablet_textAlign__ktytQ{text-align:var(--tablet_textAlign)}.Box-module_tablet_justifyContent__QdUvl{justify-content:var(--tablet_justifyContent)}}@media (min-width:1024px){.Box-module_laptop_p__fen5Y{padding:var(--laptop_p)}.Box-module_laptop_pt__2sptE{padding-top:var(--laptop_pt)}.Box-module_laptop_pr__HphRq{padding-right:var(--laptop_pr)}.Box-module_laptop_pb__XNnCT{padding-bottom:var(--laptop_pb)}.Box-module_laptop_pl__M4QS2{padding-left:var(--laptop_pl)}.Box-module_laptop_m__R8AG4{margin:var(--laptop_m)}.Box-module_laptop_mt__AyUmA{margin-top:var(--laptop_mt)}.Box-module_laptop_mr__kFgGv{margin-right:var(--laptop_mr)}.Box-module_laptop_mb__HTwl1{margin-bottom:var(--laptop_mb)}.Box-module_laptop_ml__r15Wy{margin-left:var(--laptop_ml)}.Box-module_laptop_display__5zhD1{display:var(--laptop_display)}.Box-module_laptop_flexGrow__Alvjd{flex-grow:var(--laptop_flexGrow)}.Box-module_laptop_flexShrink__4csEV{flex-shrink:var(--laptop_flexShrink)}.Box-module_laptop_flexDirection__8RZcn{flex-direction:var(--laptop_flexDirection)}.Box-module_laptop_alignItems__pKKwU{align-items:var(--laptop_alignItems)}.Box-module_laptop_textAlign__-Vu9x{text-align:var(--laptop_textAlign)}.Box-module_laptop_justifyContent__u5iA5{justify-content:var(--laptop_justifyContent)}}@media (min-width:1430px){.Box-module_desktop_p__wV4wh{padding:var(--desktop_p)}.Box-module_desktop_pt__ofwcu{padding-top:var(--desktop_pt)}.Box-module_desktop_pr__H4xgR{padding-right:var(--desktop_pr)}.Box-module_desktop_pb__9ztdj{padding-bottom:var(--desktop_pb)}.Box-module_desktop_pl__Z7vkV{padding-left:var(--desktop_pl)}.Box-module_desktop_m__D-4oh{margin:var(--desktop_m)}.Box-module_desktop_mt__vxldQ{margin-top:var(--desktop_mt)}.Box-module_desktop_mr__sZ2up{margin-right:var(--desktop_mr)}.Box-module_desktop_mb__ZRC-9{margin-bottom:var(--desktop_mb)}.Box-module_desktop_ml__GPz0g{margin-left:var(--desktop_ml)}.Box-module_desktop_display__bwoeF{display:var(--desktop_display)}.Box-module_desktop_flexGrow__R6dyW{flex-grow:var(--desktop_flexGrow)}.Box-module_desktop_flexShrink__3KncJ{flex-shrink:var(--desktop_flexShrink)}.Box-module_desktop_flexDirection__R4-6Y{flex-direction:var(--desktop_flexDirection)}.Box-module_desktop_alignItems__idN53{align-items:var(--desktop_alignItems)}.Box-module_desktop_textAlign__Hbg7-{text-align:var(--desktop_textAlign)}.Box-module_desktop_justifyContent__IP16d{justify-content:var(--desktop_justifyContent)}}";
+var classes$1 = {"box":"Box-module_box__Wgbf3","p":"Box-module_p__uTNSv","pt":"Box-module_pt__MH-Lm","pr":"Box-module_pr__3616n","pb":"Box-module_pb__Kvp5q","pl":"Box-module_pl__bOUi1","m":"Box-module_m__mpyOZ","mt":"Box-module_mt__pIuu-","mr":"Box-module_mr__U03MD","mb":"Box-module_mb__aqoO-","ml":"Box-module_ml__-kvBt","display":"Box-module_display__spr38","flexGrow":"Box-module_flexGrow__pea61","flexShrink":"Box-module_flexShrink__oFCTI","flexDirection":"Box-module_flexDirection__5aoqo","alignItems":"Box-module_alignItems__-jg7t","textAlign":"Box-module_textAlign__nv7di","justifyContent":"Box-module_justifyContent__tRuSe","tablet_p":"Box-module_tablet_p__hAV67","tablet_pt":"Box-module_tablet_pt__6WosU","tablet_pr":"Box-module_tablet_pr__4twiC","tablet_pb":"Box-module_tablet_pb__OGIGX","tablet_pl":"Box-module_tablet_pl__niebc","tablet_m":"Box-module_tablet_m__DRZCy","tablet_mt":"Box-module_tablet_mt__ySyc8","tablet_mr":"Box-module_tablet_mr__wSu4Q","tablet_mb":"Box-module_tablet_mb__cAy-T","tablet_ml":"Box-module_tablet_ml__QoOMl","tablet_display":"Box-module_tablet_display__VoPGZ","tablet_flexGrow":"Box-module_tablet_flexGrow__Csxsp","tablet_flexShrink":"Box-module_tablet_flexShrink__zC-Gw","tablet_flexDirection":"Box-module_tablet_flexDirection__nKcqC","tablet_alignItems":"Box-module_tablet_alignItems__aY4YO","tablet_textAlign":"Box-module_tablet_textAlign__ktytQ","tablet_justifyContent":"Box-module_tablet_justifyContent__QdUvl","laptop_p":"Box-module_laptop_p__fen5Y","laptop_pt":"Box-module_laptop_pt__2sptE","laptop_pr":"Box-module_laptop_pr__HphRq","laptop_pb":"Box-module_laptop_pb__XNnCT","laptop_pl":"Box-module_laptop_pl__M4QS2","laptop_m":"Box-module_laptop_m__R8AG4","laptop_mt":"Box-module_laptop_mt__AyUmA","laptop_mr":"Box-module_laptop_mr__kFgGv","laptop_mb":"Box-module_laptop_mb__HTwl1","laptop_ml":"Box-module_laptop_ml__r15Wy","laptop_display":"Box-module_laptop_display__5zhD1","laptop_flexGrow":"Box-module_laptop_flexGrow__Alvjd","laptop_flexShrink":"Box-module_laptop_flexShrink__4csEV","laptop_flexDirection":"Box-module_laptop_flexDirection__8RZcn","laptop_alignItems":"Box-module_laptop_alignItems__pKKwU","laptop_textAlign":"Box-module_laptop_textAlign__-Vu9x","laptop_justifyContent":"Box-module_laptop_justifyContent__u5iA5","desktop_p":"Box-module_desktop_p__wV4wh","desktop_pt":"Box-module_desktop_pt__ofwcu","desktop_pr":"Box-module_desktop_pr__H4xgR","desktop_pb":"Box-module_desktop_pb__9ztdj","desktop_pl":"Box-module_desktop_pl__Z7vkV","desktop_m":"Box-module_desktop_m__D-4oh","desktop_mt":"Box-module_desktop_mt__vxldQ","desktop_mr":"Box-module_desktop_mr__sZ2up","desktop_mb":"Box-module_desktop_mb__ZRC-9","desktop_ml":"Box-module_desktop_ml__GPz0g","desktop_display":"Box-module_desktop_display__bwoeF","desktop_flexGrow":"Box-module_desktop_flexGrow__R6dyW","desktop_flexShrink":"Box-module_desktop_flexShrink__3KncJ","desktop_flexDirection":"Box-module_desktop_flexDirection__R4-6Y","desktop_alignItems":"Box-module_desktop_alignItems__idN53","desktop_textAlign":"Box-module_desktop_textAlign__Hbg7-","desktop_justifyContent":"Box-module_desktop_justifyContent__IP16d"};
+styleInject(css_248z$1);
 
-const Wrapper$c = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  border-radius: 4px;     
-  border: 1px solid ${props => props.theme.palette.pane[props.variant].main.idle.border};
-  background-color: ${props => props.theme.palette.pane[props.variant].main.idle.background};      
-  color: ${props => props.theme.palette.pane[props.variant].main.idle.text};      
-`;
-const Alert = ({ children, title, variant = "basic" }) => (React.createElement(Wrapper$c, { variant: variant },
+function toVal(mix) {
+	var k, y, str='';
+
+	if (typeof mix === 'string' || typeof mix === 'number') {
+		str += mix;
+	} else if (typeof mix === 'object') {
+		if (Array.isArray(mix)) {
+			for (k=0; k < mix.length; k++) {
+				if (mix[k]) {
+					if (y = toVal(mix[k])) {
+						str && (str += ' ');
+						str += y;
+					}
+				}
+			}
+		} else {
+			for (k in mix) {
+				if (mix[k]) {
+					str && (str += ' ');
+					str += k;
+				}
+			}
+		}
+	}
+
+	return str;
+}
+
+function clsx () {
+	var i=0, tmp, x, str='';
+	while (i < arguments.length) {
+		if (tmp = arguments[i++]) {
+			if (x = toVal(tmp)) {
+				str && (str += ' ');
+				str += x;
+			}
+		}
+	}
+	return str;
+}
+
+const Box = (_a) => {
+    var { children, className, p, pt, pr, pb, pl, m, mt, mr, mb, ml, display, flexGrow, flexShrink, flexDirection, alignItems, textAlign, justifyContent, width } = _a, rest = __rest(_a, ["children", "className", "p", "pt", "pr", "pb", "pl", "m", "mt", "mr", "mb", "ml", "display", "flexGrow", "flexShrink", "flexDirection", "alignItems", "textAlign", "justifyContent", "width"]);
+    const responsiveProps = Object.entries({
+        p,
+        pt,
+        pr,
+        pb,
+        pl,
+        m,
+        mt,
+        mr,
+        mb,
+        ml,
+        display,
+        flexGrow,
+        flexShrink,
+        flexDirection,
+        alignItems,
+        textAlign,
+        justifyContent,
+        width,
+    }).filter(([, prop]) => Boolean(prop));
+    const responsiveCssVariables = responsiveProps
+        .flatMap(([name, prop]) => responsivePropToCssVariable(name, prop))
+        .reduce((acc, [key, val]) => (Object.assign(Object.assign({}, acc), { [key]: val })), {});
+    const responsiveClassNames = responsiveProps
+        .map(([name, prop]) => responsivePropToClassname(name, prop))
+        .join(" ");
+    return (React.createElement("div", Object.assign({ className: clsx(classes$1.box, className, responsiveClassNames), style: responsiveCssVariables }, rest), children));
+};
+const responsivePropToClassname = (name, prop) => !isResponsiveObject(prop)
+    ? classes$1[name]
+    : Object.entries(prop)
+        .map(([breakpoint]) => classes$1[`${parseBreakPoint(breakpoint)}${name}`])
+        .join(" ");
+const responsivePropToCssVariable = (name, prop) => !isResponsiveObject(prop)
+    ? [[`--${name}`, parseValue(name, prop)]]
+    : Object.entries(prop).map(([breakpoint, prop]) => [
+        `--${parseBreakPoint(breakpoint)}${name}`,
+        parseValue(name, prop),
+    ]);
+const parseBreakPoint = (breakpoint) => breakpoint === "mobile" ? "" : `${breakpoint}_`;
+const parseValue = (name, prop) => {
+    switch (name) {
+        case "p":
+        case "pt":
+        case "pr":
+        case "pb":
+        case "pl":
+        case "m":
+        case "mt":
+        case "mr":
+        case "mb":
+        case "ml":
+            return `calc(var(--spacing) * ${prop})`;
+        default:
+            return prop;
+    }
+};
+
+const Alert = ({ children, title, variant = "basic" }) => (React.createElement("div", { className: clsx(classes$2.wrapper, classes$2[`variant-${variant}`]) },
     React.createElement(Box, { p: 3 },
         title && (React.createElement(Box, { pb: children ? 1 : 0 },
             React.createElement(Header, { level: 4 }, title))),
@@ -1243,85 +1351,74 @@ 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" }))));
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
+const _Box = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
+  box-sizing: border-box;
+  
+  ${(props) => responsiveProps(props, {
+    "p": unit => styledComponents.css `padding: ${props.theme.spacing(unit)};`,
+    "pt": unit => styledComponents.css `padding-top: ${props.theme.spacing(unit)};`,
+    "pr": unit => styledComponents.css `padding-right: ${props.theme.spacing(unit)};`,
+    "pb": unit => styledComponents.css `padding-bottom: ${props.theme.spacing(unit)};`,
+    "pl": unit => styledComponents.css `padding-left: ${props.theme.spacing(unit)};`,
+    "m": unit => styledComponents.css `margin: ${props.theme.spacing(unit)};`,
+    "mt": unit => styledComponents.css `margin-top: ${props.theme.spacing(unit)};`,
+    "mr": unit => styledComponents.css `margin-right: ${props.theme.spacing(unit)};`,
+    "mb": unit => styledComponents.css `margin-bottom: ${props.theme.spacing(unit)};`,
+    "ml": unit => styledComponents.css `margin-left: ${props.theme.spacing(unit)};`,
+    "display": unit => styledComponents.css `display: ${unit};`,
+    "flexGrow": unit => styledComponents.css `flex-grow: ${unit};`,
+    "flexShrink": unit => styledComponents.css `flex-shrink: ${unit};`,
+    "flexDirection": unit => styledComponents.css `flex-direction: ${unit};`,
+    "alignItems": unit => styledComponents.css `align-items: ${unit};`,
+    "textAlign": unit => styledComponents.css `text-align: ${unit};`,
+    "justifyContent": unit => styledComponents.css `justify-content: ${unit};`,
+    "width": unit => styledComponents.css `width: ${typeof unit === 'number' ? props.theme.spacing(unit) : unit};`,
+})}
+`;
 
-var css_248z = ".BreadCrumbs-module_breadcrumbs__-UMJj {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    display:flex;\n}\n\n.BreadCrumbs-module_crumb__SSW-t {\n    display: flex;\n\n    &:not(:last-of-type):after {\n        content: \"/\";\n        color: var(--colors-gray);\n        line-height: 1em;\n        margin: auto auto;\n        padding: 0 var(--spacing-2) 0 0;\n    }\n}";
+var css_248z = ".BreadCrumbs-module_breadcrumbs__-UMJj{display:flex;list-style:none;margin:0;padding:0}.BreadCrumbs-module_crumb__SSW-t{display:flex}.BreadCrumbs-module_crumb__SSW-t:not(:last-of-type):after{color:var(--colors-gray);content:\"/\";line-height:1em;margin:auto;padding:0 var(--spacing-2) 0 0}";
 var classes = {"breadcrumbs":"BreadCrumbs-module_breadcrumbs__-UMJj","crumb":"BreadCrumbs-module_crumb__SSW-t"};
 styleInject(css_248z);
 
-const BreadCrumbs = (props) => React.createElement("ul", Object.assign({ className: classes.breadcrumbs }, props));
-const Crumb = styledComponents.styled.li `
-  display: flex;  
- 
-  &:not(:last-of-type):after {    
-    content: "/";
-    color: ${props => props.theme.palette.colors.gray};
-    line-height: 1em;
-    content: "/";
-    margin: auto auto;
-    padding: ${props => props.theme.spacing(0, 2, 0, 0)};
-  }
-`;
+const BreadCrumbs = (props) => React.createElement("ul", Object.assign({ className: clsx(classes.breadcrumbs, props.className) }, props));
+const Crumb = (props) => React.createElement("li", Object.assign({ className: clsx(classes.breadcrumbs, props.className) }, props));
 
-const Wrapper$b = styledComponents.styled.div `       
-  background-color: ${props => props.theme.palette.common.white};
+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%);      
+  border: 1px solid #dededf;
+  box-shadow: 0px 2px 3px rgb(0 0 0 / 6%);
 `;
-const Meta = styledComponents.styled(Box) `       
+const Meta = styledComponents.styled(Box) `
   font-size: 12px;
-  font-style: italic;              
+  font-style: italic;
 `;
 const Title = styledComponents.styled(Box) `
-  ${(props) => props.panelHasChildren && styledComponents.css `
-    border-radius: 4px;   
-    border-bottom: 1px solid rgba(34,36,38,.15);
-  `}
-  
-  ${(props) => !!props.onClick && styledComponents.css `
-    cursor: pointer;
-    user-select: none;
-  `}        
+  ${(props) => props.panelHasChildren &&
+    styledComponents.css `
+      border-radius: 4px;
+      border-bottom: 1px solid rgba(34, 36, 38, 0.15);
+    `}
+
+  ${(props) => !!props.onClick &&
+    styledComponents.css `
+      cursor: pointer;
+      user-select: none;
+    `}
 `;
-const Footer$1 = styledComponents.styled(Box) `  
-  border-radius: 4px;   
-  background-color: #FFF;
-  border-top: 1px solid rgba(34,36,38,.15);
+const Footer$1 = styledComponents.styled(Box) `
+  border-radius: 4px;
+  background-color: #fff;
+  border-top: 1px solid rgba(34, 36, 38, 0.15);
 `;
-const Panel = ({ children, className, title, titleAction, titleMeta, onClickTitle, footer, p = 3, titleLevel = 5 }) => (React.createElement(Wrapper$b, { className: className },
+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))));
+    children && React.createElement(Box, { p: p }, children),
+    footer && React.createElement(Footer$1, { p: 3 }, footer)));
 
 const Animation = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `                
   transform: ${props => props.isOpen ? `translate(0)` : `translateY(-101%)`};  
@@ -1832,7 +1929,7 @@ 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));
+    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 };
@@ -1841,11 +1938,7 @@ 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)));
+    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;
@@ -1891,12 +1984,12 @@ const SideBar = (props) => {
 };
 
 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);  
+  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 Footer = ({ children, }) => (React.createElement(StyledBox$5, { pt: 2, pb: 2, pr: 5, pl: { mobile: 5, laptop: SIDEBAR_COLLAPSED_WIDTH + 5 } }, children));
 
 const Scroller = styledComponents.styled(Box) `
   overflow-x: auto;
@@ -2239,88 +2332,98 @@ const SimpleTimeline = ({ color, icon, title, titleMeta }) => (React.createEleme
         React.createElement(FlatPanel, { titleMeta: titleMeta, title: title }))));
 
 const StyledBox = styledComponents.styled(Box) `
-  background-color: #FFFFFF;
-  border-bottom: 1px solid #DDDDDD;
-  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.04);   
+  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 } },
+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))));
+        React.createElement(Box, { flexGrow: 1, display: "flex", justifyContent: "flex-end" }, right))));
 
 const Label$1 = styledComponents.styled.label `
-  position: relative;  
+  position: relative;
 `;
-const Input$1 = styledComponents.styled.input.withConfig({ shouldForwardProp: isPropValid }) ` 
+const Input$1 = styledComponents.styled.input.withConfig({ shouldForwardProp: isPropValid }) `
   position: absolute;
   top: 0;
   left: 0;
-  
+
   width: 17px;
-  height: 17px;  
-  
+  height: 17px;
+
   z-index: 99;
-  opacity: 0;  
-  margin-right: ${props => props.theme.spacing(2)};
+  opacity: 0;
+  margin-right: ${(props) => props.theme.spacing(2)};
   transform: translateY(1px);
-  
-  &~span {
+
+  & ~ span {
     user-select: none;
     padding-left: 1.85714em;
     cursor: pointer;
-    font-size: .92857143em;
+    font-size: 0.92857143em;
   }
-  
-  &~span:before, &~span:after {
+
+  & ~ span:before,
+  & ~ span:after {
     position: absolute;
     top: 0;
     left: 0;
     width: 17px;
     height: 17px;
     line-height: 17px;
-    content: '';    
+    content: "";
     border-radius: 4px;
-    border: 1px solid rgba(34,36,38,.15);
-    z-index:0;
+    border: 1px solid rgba(34, 36, 38, 0.15);
+    z-index: 0;
   }
-  
-  &:checked~span {
+
+  &:checked ~ span {
     font-style: italic;
   }
-  
-  &:checked~span:before {
+
+  &:checked ~ span:before {
     background: #fff;
-    border-color: rgba(34,36,38,.35); 
+    border-color: rgba(34, 36, 38, 0.35);
   }
-  
-  &:checked~span:after {    
-    font-style: normal; 
+
+  &:checked ~ span:after {
+    font-style: normal;
     text-align: center;
-    content: '\\2714';
+    content: "\\2714";
     opacity: 1;
-    color: ${props => props.theme.palette.common.black}
-  }  
-  
-  &:focus~span:before, &:focus~span:after {
+    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}; 
+    box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset;
   }
-  
-  &.error~span:before, &.error~span:after {
+
+  &.error ~ span {
+    color: ${(props) => props.theme.palette.form.error};
+  }
+
+  &.error ~ span:before,
+  &.error ~ span:after {
     background: #fff6f6;
     border-color: #e0b4b4;
     color: #9f3a38;
-  }  
+  }
 `;
 const Span = styledComponents.styled.span.withConfig({ shouldForwardProp: isPropValid }) `
-  ${props => props.dimmed ? styledComponents.css `color: #999c9e;` : ''}
+  ${(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"]);
@@ -2572,47 +2675,6 @@ const PasswordStrengthField = React.forwardRef((props, ref) => {
             React.createElement(ProgressBar, { score: score })));
 });
 
-function toVal(mix) {
-	var k, y, str='';
-
-	if (typeof mix === 'string' || typeof mix === 'number') {
-		str += mix;
-	} else if (typeof mix === 'object') {
-		if (Array.isArray(mix)) {
-			for (k=0; k < mix.length; k++) {
-				if (mix[k]) {
-					if (y = toVal(mix[k])) {
-						str && (str += ' ');
-						str += y;
-					}
-				}
-			}
-		} else {
-			for (k in mix) {
-				if (mix[k]) {
-					str && (str += ' ');
-					str += k;
-				}
-			}
-		}
-	}
-
-	return str;
-}
-
-function clsx () {
-	var i=0, tmp, x, str='';
-	while (i < arguments.length) {
-		if (tmp = arguments[i++]) {
-			if (x = toVal(tmp)) {
-				str && (str += ' ');
-				str += x;
-			}
-		}
-	}
-	return str;
-}
-
 const NUM_ROWS_PER_FIELD = 2;
 // NOTE:
 //
@@ -2723,13 +2785,13 @@ const FormGrid = styledComponents.styled.div.withConfig({ shouldForwardProp: isP
 `;
 FormGrid.displayName = "FormGrid";
 
-const Wrapper$1 = styledComponents.styled(Box) ` 
-  background-color: #F3F3F4;
+const Wrapper$1 = styledComponents.styled(Box) `
+  background-color: #f3f3f4;
 `;
-const WrapperInner = styledComponents.styled(Box) ` 
+const WrapperInner = styledComponents.styled(Box) `
   position: relative;
 `;
-const SidebarWrapper = styledComponents.styled(Box) ` 
+const SidebarWrapper = styledComponents.styled(Box) `
   position: absolute;
   height: 100%;
   z-index: 50;
@@ -2738,16 +2800,14 @@ const SidebarWrapper = styledComponents.styled(Box) `
 const ContentBox = styledComponents.styled(Box) `
   height: 100%;
 `;
-const BasicLayout = ({ sideBarProps, topBarProps, footerProps, isLoading, loader, children }) => {
+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(Box, { p: { laptop: VerticalRhythmLaptop, mobile: VerticalRhythmMobile }, pl: { laptop: VerticalRhythmLaptop + SIDEBAR_COLLAPSED_WIDTH }, flexGrow: 1 }, isLoading && loader ? loader : children),
                 React.createElement(Footer, Object.assign({}, footerProps))))));
 };
 
@@ -4680,7 +4740,6 @@ const ScaffoldForm = React.forwardRef((_a, ref) => {
 exports.Alert = Alert;
 exports.AnimatedCheckmark = AnimatedCheckmark;
 exports.BasicLayout = BasicLayout;
-exports.Box = Box;
 exports.BreadCrumbs = BreadCrumbs;
 exports.BreakPointValues = BreakPointValues;
 exports.Button = Button$1;
@@ -4736,6 +4795,7 @@ exports.UiProvider = UiProvider;
 exports.UiWrapper = UiWrapper;
 exports.VerticalRhythmLaptop = VerticalRhythmLaptop;
 exports.VerticalRhythmMobile = VerticalRhythmMobile;
+exports._Box = _Box;
 exports.calculatePasswordScore = calculatePasswordScore;
 exports.getFormGridWrapperProps = getFormGridWrapperProps;
 exports.isResponsiveObject = isResponsiveObject;