quicksnack 3.35.2 → 3.36.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$2 = ":root {\n    --common-black: rgba(0,0,0,.87);\n    --common-white: #fff;\n\n    --colors-blue: #007bff;\n    --colors-indigo: #6610f2;\n    --colors-purple: #6f42c1;\n    --colors-pink: #e83e8c;\n    --colors-red: #e83e3e;\n    --colors-orange: #fd7e14;\n    --colors-yellow: #ffc107;\n    --colors-green: #23B294;\n    --colors-teal: #20c997;\n    --colors-cyan: #17a2b8;\n    --colors-gray: #6c757d;\n    --colors-grayDark: #343a40;\n    --colors-light: #f8f9fa;\n    --colors-dark: #343a40;\n\n    --form-hint: #C7C7C7;\n    --form-error: #9f3a38\n;\n    --button-basic-idle-background: #fff;\n    --button-basic-idle-text: rgba(0,0,0,.87);\n    --button-basic-hover-background: #e5e5e5;\n    --button-basic-hover-text: rgba(0,0,0,0.883);\n    --button-basic-active-background: #ccc;\n    --button-basic-active-text: rgba(0,0,0,0.8960000000000001);\n\n    --button-default-idle-background: #e0e1e2;\n    --button-default-idle-text: rgba(0,0,0,.87);\n    --button-default-hover-background: #c9cacb;\n    --button-default-hover-text: rgba(0,0,0,0.883);\n    --button-default-active-background: #b3b4b4;\n    --button-default-active-text: rgba(0,0,0,0.8960000000000001);\n\n    --button-text-idle-text: #999c9e;\n    --button-text-idle-background: transparent;\n    --button-text-active-text: rgba(0,0,0,.87);\n    --button-text-active-background: transparent;\n    --button-text-hover-text: rgba(0,0,0,.87);\n    --button-text-hover-background: transparent;\n\n    --button-danger-idle-background: #EC5969;\n    --button-danger-idle-text: #fff;\n    --button-danger-hover-background: #d4505e;\n    --button-danger-hover-text: #fff;\n    --button-danger-active-background: #bc4754;\n    --button-danger-active-text: #fff;\n\n    --button-primary-idle-background: #2284C4;\n    --button-primary-idle-text: #fff;\n    --button-primary-hover-background: #1e76b0;\n    --button-primary-hover-text: #fff;\n    --button-primary-active-background: #1b699c;\n    --button-primary-active-text: #fff;\n\n    --button-secondary-idle-background: #23B294;\n    --button-secondary-idle-text: #fff;\n    --button-secondary-hover-background: #1fa085;\n    --button-secondary-hover-text: #fff;\n    --button-secondary-active-background: #1c8e76;\n    --button-secondary-active-text: #fff;\n\n    --pane-basic-main-idle-text: rgba(0,0,0,.87);\n    --pane-basic-main-idle-background: #fff;\n    --pane-basic-main-idle-border: #ddd;\n    --pane-basic-main-hover-text: rgba(0,0,0,.87);\n    --pane-basic-main-hover-background: #f2f2f2;\n    --pane-basic-main-hover-border: #ddd;\n    --pane-basic-alternate-idle-text: rgba(0,0,0,.87);\n    --pane-basic-alternate-idle-background: #f9f9f9;\n    --pane-basic-alternate-idle-border: #ddd;\n    --pane-basic-alternate-hover-text: rgba(0,0,0,.87);\n    --pane-basic-alternate-hover-background: #f2f2f2;\n    --pane-basic-alternate-hover-border: #ddd;\n\n    --pane-emphasized-main-idle-text: rgba(0,0,0,.87);\n    --pane-emphasized-main-idle-background: #f3f3f3;\n    --pane-emphasized-main-idle-border: #ddd;\n    --pane-emphasized-main-hover-text: rgba(0,0,0,.87);\n    --pane-emphasized-main-hover-background: #e6e6e6;\n    --pane-emphasized-main-hover-border: #ddd;\n    --pane-emphasized-alternate-idle-text: rgba(0,0,0,.87);\n    --pane-emphasized-alternate-idle-background: #eee;\n    --pane-emphasized-alternate-idle-border: #ddd;\n    --pane-emphasized-alternate-hover-text: rgba(0,0,0,.87);\n    --pane-emphasized-alternate-hover-background: #e6e6e6;\n    --pane-emphasized-alternate-hover-border: #ddd;\n\n    --pane-info-main-idle-text: #0c5460;\n    --pane-info-main-idle-background: #d1ecf1;\n    --pane-info-main-idle-border: #bee5eb;\n    --pane-info-main-hover-text: #0c5460;\n    --pane-info-main-hover-background: #c6e0e4;\n    --pane-info-main-hover-border: #bee5eb;\n    --pane-info-alternate-idle-text: #0c5460;\n    --pane-info-alternate-idle-background: #cce7ec;\n    --pane-info-alternate-idle-border: #bee5eb;\n    --pane-info-alternate-hover-text: #0c5460;\n    --pane-info-alternate-hover-background: #c6e0e4;\n    --pane-info-alternate-hover-border: #bee5eb;\n\n    --pane-negative-main-idle-text: #721c24;\n    --pane-negative-main-idle-background: #f8d7da;\n    --pane-negative-main-idle-border: #f5c6cb;\n    --pane-negative-main-hover-text: #721c24;\n    --pane-negative-main-hover-background: #ebcccf;\n    --pane-negative-main-hover-border: #f5c6cb;\n    --pane-negative-alternate-idle-text: #721c24;\n    --pane-negative-alternate-idle-background: #f3d2d5;\n    --pane-negative-alternate-idle-border: #f5c6cb;\n    --pane-negative-alternate-hover-text: #721c24;\n    --pane-negative-alternate-hover-background: #ebcccf;\n    --pane-negative-alternate-hover-border: #f5c6cb;\n\n    --pane-positive-main-idle-text: #155724;\n    --pane-positive-main-idle-background: #d4edda;\n    --pane-positive-main-idle-border: #c3e6cb;\n    --pane-positive-main-hover-text: #155724;\n    --pane-positive-main-hover-background: #c9e1cf;\n    --pane-positive-main-hover-border: #c3e6cb;\n    --pane-positive-alternate-idle-text: #155724;\n    --pane-positive-alternate-idle-background: #cfe8d5;\n    --pane-positive-alternate-idle-border: #c3e6cb;\n    --pane-positive-alternate-hover-text: #155724;\n    --pane-positive-alternate-hover-background: #c9e1cf;\n    --pane-positive-alternate-hover-border: #c3e6cb;\n\n    --pane-warning-main-idle-text: #856404;\n    --pane-warning-main-idle-background: #fff3cd;\n    --pane-warning-main-idle-border: #ffeeba;\n    --pane-warning-main-hover-text: #856404;\n    --pane-warning-main-hover-background: #f2e6c2;\n    --pane-warning-main-hover-border: #ffeeba;\n    --pane-warning-alternate-idle-text: #856404;\n    --pane-warning-alternate-idle-background: #f9eec8;\n    --pane-warning-alternate-idle-border: #ffeeba;\n    --pane-warning-alternate-hover-text: #856404;\n    --pane-warning-alternate-hover-background: #f2e6c2;\n    --pane-warning-alternate-hover-border: #ffeeba;\n\n\n    --spacing: 4px;\n    --spacing-2: calc(var(--spacing) * 2);\n    --spacing-3: calc(var(--spacing) * 3);\n    --spacing-4: calc(var(--spacing) * 4);\n    --spacing-5: calc(var(--spacing) * 5);\n}";
+styleInject(css_248z$2);
+
 /******************************************************************************
 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$1 = ".Alert-module_wrapper__zP8eL {\n    border-radius: 4px;\n}\n\n.Alert-module_variant-positive__Cqab0 {\n        border: 1px solid var(--pane-positive-main-idle-border);\n        background-color: var(--pane-positive-main-idle-background);\n        color: var(--pane-positive-main-idle-text);\n    }\n\n.Alert-module_variant-negative__mORCP {\n        border: 1px solid var(--pane-negative-main-idle-border);\n        background-color: var(--pane-negative-main-idle-background);\n        color: var(--pane-negative-main-idle-text);\n    }\n\n.Alert-module_variant-info__b3OY9 {\n        border: 1px solid var(--pane-info-main-idle-border);\n        background-color: var(--pane-info-main-idle-background);\n        color: var(--pane-info-main-idle-text);\n    }\n\n.Alert-module_variant-warning__gBX5- {\n        border: 1px solid var(--pane-warning-main-idle-border);\n        background-color: var(--pane-warning-main-idle-background);\n        color: var(--pane-warning-main-idle-text);\n    }\n\n.Alert-module_variant-basic__AQmn7 {\n        border: 1px solid var(--pane-basic-main-idle-border);\n        background-color: var(--pane-basic-main-idle-background);\n        color: var(--pane-basic-main-idle-text);\n    }\n\n.Alert-module_variant-emphasized__8GiYF {\n        border: 1px solid var(--pane-emphasized-main-idle-border);\n        background-color: var(--pane-emphasized-main-idle-background);\n        color: var(--pane-emphasized-main-idle-text);\n    }\n\n.Alert-module_variant-__raLwR {\n        border: 1px solid var(--pane--main-idle-border);\n        background-color: var(--pane--main-idle-background);\n        color: var(--pane--main-idle-text);\n    }";
+var classes$1 = {"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","variant-":"Alert-module_variant-__raLwR"};
+styleInject(css_248z$1);
+
 const sharedStyles$1 = styledComponents.css `
   margin: 0 0;  
   padding: 0 0;
@@ -1175,13 +1209,48 @@ const Box = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropVa
 })}
 `;
 
-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 Alert = ({ children, title, variant = "basic" }) => (React.createElement("div", { className: clsx(classes$1.wrapper, classes$1[`variant-${variant}`]) },
     React.createElement(Box, { p: 3 },
         title && (React.createElement(Box, { pb: children ? 1 : 0 },
             React.createElement(Header, { level: 4 }, title))),
@@ -1243,50 +1312,12 @@ 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));
-  }
-}
-
-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 {\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\n.BreadCrumbs-module_crumb__SSW-t: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    }";
 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};
@@ -2572,47 +2603,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:
 //