@appquality/unguess-design-system 2.4.1 → 2.5.2

package/build/index.js

@@ -13,14 +13,38 @@ var reactNotifications = require('@zendeskgarden/react-notifications');
 var reactDropdowns = require('@zendeskgarden/react-dropdowns');
 var reactForms = require('@zendeskgarden/react-forms');
 var reactGrid = require('@zendeskgarden/react-grid');
+var React = require('react');
 var reactLoaders = require('@zendeskgarden/react-loaders');
 var formik = require('formik');
-var reactTables = require('@zendeskgarden/react-tables');
+var reactModals = require('@zendeskgarden/react-modals');
+var reactChrome = require('@zendeskgarden/react-chrome');
 var reactTypography = require('@zendeskgarden/react-typography');
+var reactPagination = require('@zendeskgarden/react-pagination');
+var reactTables = require('@zendeskgarden/react-tables');
+var reactTags = require('@zendeskgarden/react-tags');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -48,6 +72,18 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __makeTemplateObject(cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -188,8 +224,8 @@ var gradients = {
 
 var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), gradients: gradients });
 
-var GlobalStyle = styled.createGlobalStyle(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  body {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n  \n  "], ["\n  body {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n  \n  "])), theme.fonts.system);
-var templateObject_1$h;
+var GlobalStyle = styled.createGlobalStyle(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  body {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n  \n  "], ["\n  body {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n  \n  "])), theme.fonts.system);
+var templateObject_1$w;
 
 /**
  * Accordions are headers that can be expanded to reveal content or collapsed to hide it.
@@ -204,7 +240,8 @@ Accordion.Header = reactAccordions.Accordion.Header;
 Accordion.Label = reactAccordions.Accordion.Label;
 Accordion.Panel = reactAccordions.Accordion.Panel;
 
-var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+// import useWindowSize from "../../hooks/useWindowSize";
+var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     return "\n    background: ".concat(props.backgroundColor || theme.gradients.dark, ";\n   ");
 });
 /**
@@ -215,10 +252,19 @@ var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$
  */
 var Avatar = function (props) {
     var fixedBadge = props.badge && props.badge > 9 ? "9+" : props.badge;
-    return jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge }));
+    var wrapChildren = function (type) {
+        if (type === "icon")
+            return props.children;
+        if (type === "image")
+            return jsxRuntime.jsx("img", { alt: "avatar", src: props.children });
+        if (type === "text")
+            return jsxRuntime.jsx(Avatar.Text, { children: props.children });
+    };
+    // const { width } = useWindowSize();
+    return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
 };
 Avatar.Text = UgAvatar.Text;
-var templateObject_1$g;
+var templateObject_1$v;
 
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
@@ -239,7 +285,7 @@ var Breadcrumb = function (props) { return jsxRuntime.jsx(reactBreadcrumbs.Bread
  */
 var Anchor = function (props) { return jsxRuntime.jsx(reactButtons.Anchor, __assign({}, props)); };
 
-var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject([""], [""])));
+var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject([""], [""])));
 /**
  * Buttons let users take action quickly.
  * Use a Button to enable actions or decisions that are important to a user’s workflow.
@@ -251,7 +297,7 @@ var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
 var Button = function (props) { return jsxRuntime.jsx(UgButton, __assign({}, props)); };
 Button.StartIcon = UgButton.StartIcon;
 Button.EndIcon = UgButton.EndIcon;
-var templateObject_1$f;
+var templateObject_1$u;
 
 /**
 A Button group lets users make a selection from a set of options.
@@ -294,25 +340,25 @@ var Card = function (props) { return jsxRuntime.jsx(reactNotifications.Well, __a
  */
 var Close = function (props) { return jsxRuntime.jsx(reactNotifications.Close, __assign({}, props)); };
 
-var UgField$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject([""], [""])));
+var UgField$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject([""], [""])));
 var Field$1 = function (props) { return jsxRuntime.jsx(UgField$1, __assign({}, props)); };
-var templateObject_1$e;
+var templateObject_1$t;
 
 var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Field: Field$1
 });
 
-var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject([""], [""])));
+var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject([""], [""])));
 var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
-var templateObject_1$d;
+var templateObject_1$s;
 
-var UgMenu = styled__default["default"](reactDropdowns.Menu)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject([""], [""])));
+var UgMenu = styled__default["default"](reactDropdowns.Menu)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject([""], [""])));
 /**
    * A Menu is a wrapper for items elements
    **/
 var Menu = function (props) { return jsxRuntime.jsx(UgMenu, __assign({}, props)); };
-var templateObject_1$c;
+var templateObject_1$r;
 
 /**
  * Multiselect lets users select multiple items from a list. Options are dynamically filtered as a user types in the input field and their selections appear as tags in the input field.
@@ -337,7 +383,7 @@ var Select = function (props) { return jsxRuntime.jsx(reactDropdowns.Select, __a
 var Dropdown = function (props) { return jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props)); };
 var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
 
-var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject([""], [""])));
+var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject([""], [""])));
 /**
    * A Checkbox lets users select and unselect options from a list.
    * <hr>
@@ -349,21 +395,21 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
    *  - To let users activate an option that takes effect immediately, use a Toggle instead
    **/
 var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
-var templateObject_1$b;
+var templateObject_1$q;
 
-var UgField = styled__default["default"](reactForms.Field)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject([""], [""])));
+var UgField = styled__default["default"](reactForms.Field)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject([""], [""])));
 /**
    * A Field is a wrapper for input elements
    **/
 var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
-var templateObject_1$a;
+var templateObject_1$p;
 
 var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Field: Field
 });
 
-var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject([""], [""])));
+var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject([""], [""])));
 /**
    * An Input lets users enter text into a field.
    * <hr>
@@ -372,9 +418,9 @@ var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$9 ||
    *  - To enter multiline text, use a Textarea
    **/
 var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
-var templateObject_1$9;
+var templateObject_1$o;
 
-var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject([""], [""])));
+var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject([""], [""])));
 /**
    * Radio buttons let users choose a single option among two or more mutually exclusive options.
    * <hr>
@@ -386,9 +432,9 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$8 ||
    *  - To select from a long list of options, use Select instead
    **/
 var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
-var templateObject_1$8;
+var templateObject_1$n;
 
-var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject([""], [""])));
+var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$m || (templateObject_1$m = __makeTemplateObject([""], [""])));
 /**
    * A Textarea is a form control for multi-line text.
    * <hr>
@@ -396,9 +442,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
    *  - To enter multi-line text
    **/
 var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
-var templateObject_1$7;
+var templateObject_1$m;
 
-var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject([""], [""])));
+var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject([""], [""])));
 /**
    * A Toggle lets users turn something on and off like a light switch. Unlike a Checkbox, which is used for selection, a Toggle is used for activation.
    * <hr>
@@ -409,7 +455,7 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$6
    *  - To let users select from a list of settings, use Checkboxes instead
    **/
 var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
-var templateObject_1$6;
+var templateObject_1$l;
 
 var Col = function (props) { return jsxRuntime.jsx(reactGrid.Col, __assign({}, props)); };
 
@@ -423,15 +469,112 @@ var Row = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, p
  */
 var Grid = function (props) { return jsxRuntime.jsx(reactGrid.Grid, __assign({}, props)); };
 
-var UgLabel = styled__default["default"](reactForms.Label)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject([""], [""])));
+var _path$9;
+
+function _extends$a() { _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
+
+var SvgUgSquare = function SvgUgSquare(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM18 19H6C5.45 19 5 18.55 5 18V6C5 5.45 5.45 5 6 5H18C18.55 5 19 5.45 19 6V18C19 18.55 18.55 19 18 19Z",
+    fill: "#E80C7A"
+  })));
+};
+
+var _path$8;
+
+function _extends$9() { _extends$9 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
+
+var SvgUgCircle = function SvgUgCircle(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z",
+    fill: "#FFCD1A"
+  })));
+};
+
+var _path$7;
+
+function _extends$8() { _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
+
+var SvgUgTriangle = function SvgUgTriangle(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M11.9993 7.32625L18.3893 17.5563H5.60929L11.9993 7.32625ZM11.1493 4.91625L2.94929 18.0262C2.53929 18.6962 3.01929 19.5563 3.79929 19.5563H20.1993C20.9893 19.5563 21.4593 18.6962 21.0493 18.0262L12.8493 4.91625C12.4593 4.28625 11.5393 4.28625 11.1493 4.91625Z",
+    fill: "#7B0DFF"
+  })));
+};
+
+var StyledUgIcon = styled__default["default"].span(templateObject_1$k || (templateObject_1$k = __makeTemplateObject([""], [""])));
+var Icon = function (props) {
+    var children = function (type, size) {
+        if (size === void 0) { size = 24; }
+        if (type === "square")
+            return jsxRuntime.jsx(SvgUgSquare, __assign({}, props && !props.size, props && { width: size, height: size }));
+        if (type === "triangle")
+            return jsxRuntime.jsx(SvgUgTriangle, __assign({}, props && !props.size, props && { width: size, height: size }));
+        if (type === "circle")
+            return jsxRuntime.jsx(SvgUgCircle, __assign({}, props && !props.size, props && { width: size, height: size }));
+    };
+    return (jsxRuntime.jsx(StyledUgIcon, { children: children(props.type, props.size) }));
+};
+var templateObject_1$k;
+
+var UgLabel = styled__default["default"](reactForms.Label)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject([""], [""])));
 /**
    * A Label is used to specify a title for an input.
    * <hr>
    **/
 var Label = function (props) { return jsxRuntime.jsx(UgLabel, __assign({}, props)); };
-var templateObject_1$5;
+var templateObject_1$j;
 
-var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject([""], [""])));
+var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject([""], [""])));
+/**
+ * A Progress loader communicates progress when downloading or uploading content.
+ * <hr>
+ * Used for this:
+ * - To communicate the amount of time left when downloading or uploading content
+ *
+   Not for this:
+    - When the loading time is unknown, use a Spinner instead
+    - When loading page content, use a Skeleton loader instead
+ */
+var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
+var templateObject_1$i;
+
+var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject([""], [""])));
+/**
+ * A Skeleton loader shows users a blank version of a page or section of a page into which content is gradually loaded. It provides a visual estimate of the space needed.
+ * <hr>
+ * Used for this:
+    - Skeleton is the default loader, used whenever the system can predict the format of the loading content
+    - To progressively load different parts of a page
+    - To avoid large layout shifts
+ 
+ * Not for this:
+   - When the system doesn’t have control over the content that is loading, use a Spinner instead
+   - To indicate that a component (like a button or search input) is busy, use Dots instead
+   - To communicate a typing status, use Inline instead
+ */
+var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
+var templateObject_1$h;
+
+var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject([""], [""])));
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
  * <hr>
@@ -440,7 +583,7 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
     - To provide a quick way to navigate to ancestor pages
  */
 var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
-var templateObject_1$4;
+var templateObject_1$g;
 
 /**
  * Title is a basic component used to display a title. Often used in card headers.
@@ -453,10 +596,422 @@ var Title = function (props) { return jsxRuntime.jsx(reactNotifications.Title, _
  * Used for this:
     - Login user to the application
  */
-var LoginForm = function (props) { return (jsxRuntime.jsx(formik.Formik, __assign({}, props, { initialValues: props.initialValues, onSubmit: props.onSubmit, validate: props.validate }, { children: function (_a) {
-        var values = _a.values, errors = _a.errors, touched = _a.touched, handleChange = _a.handleChange, handleSubmit = _a.handleSubmit, isSubmitting = _a.isSubmitting;
-        return (jsxRuntime.jsx(formik.Form, __assign({ onSubmit: handleSubmit }, { children: jsxRuntime.jsxs(Card, __assign({ isFloating: true }, { children: [jsxRuntime.jsx(Title, __assign({ style: { textAlign: "center", margin: theme.space.md } }, { children: props.title })), jsxRuntime.jsxs(Field, { children: [jsxRuntime.jsx(Input, __assign({ type: "email", name: "email", placeholder: props.placeholderEmail, onChange: handleChange, value: values.email }, touched && values.email ? touched.email = true : touched.email = false, errors && errors.email ? { validation: "error" } : (touched.email ? { validation: "success" } : ""))), (errors.email) ? (jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: errors.email }))) : ""] }), jsxRuntime.jsxs(Field, __assign({ style: { marginTop: theme.space.md } }, { children: [jsxRuntime.jsx(Input, __assign({ type: "password", name: "password", placeholder: props.placeholderPassword, onChange: handleChange, value: values.password }, touched && values.password ? touched.password = true : touched.password = false, errors && errors.password ? { validation: "error" } : (touched.password ? { validation: "success" } : ""))), (errors.password) ? (jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: errors.password }))) : ""] })), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Button, __assign({ type: "submit", isStretched: true, disabled: (Object.keys(errors).length) ? true : (isSubmitting) ? true : false, isPrimary: true }, { children: props.buttonText }))] })) })));
-    } }))); };
+var LoginForm = function (props) { return (jsxRuntime.jsxs(Card, __assign({ isFloating: true }, { children: [jsxRuntime.jsx(Title, __assign({ style: { textAlign: "center", margin: theme.space.md } }, { children: props.title })), jsxRuntime.jsx(formik.Formik, __assign({}, props, { initialValues: props.initialValues, onSubmit: props.onSubmit, validate: props.validate }, { children: function (_a) {
+                var values = _a.values, errors = _a.errors, touched = _a.touched, handleChange = _a.handleChange, handleSubmit = _a.handleSubmit, isSubmitting = _a.isSubmitting;
+                return (jsxRuntime.jsxs(formik.Form, __assign({ onSubmit: handleSubmit }, { children: [jsxRuntime.jsxs(Field, { children: [jsxRuntime.jsx(Input, __assign({ type: "email", name: "email", placeholder: props.placeholderEmail, onChange: handleChange, value: values.email }, (touched && values.email
+                                    ? (touched.email = true)
+                                    : (touched.email = false)), (errors && errors.email
+                                    ? { validation: "error" }
+                                    : touched.email
+                                        ? { validation: "success" }
+                                        : ""))), errors.email ? (jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: errors.email }))) : ("")] }), jsxRuntime.jsxs(Field, __assign({ style: { marginTop: theme.space.md } }, { children: [jsxRuntime.jsx(Input, __assign({ type: "password", name: "password", placeholder: props.placeholderPassword, onChange: handleChange, value: values.password }, (touched && values.password
+                                    ? (touched.password = true)
+                                    : (touched.password = false)), (errors && errors.password
+                                    ? { validation: "error" }
+                                    : touched.password
+                                        ? { validation: "success" }
+                                        : ""))), errors.password ? (jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: errors.password }))) : ("")] })), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Button, __assign({ type: "submit", isStretched: true, disabled: Object.keys(errors).length ? true : isSubmitting ? true : false, isPrimary: true }, { children: props.buttonText }))] })));
+            } }))] }))); };
+
+var img$2 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' %5b %3c!ENTITY ns_extend 'http://ns.adobe.com/Extensibility/1.0/'%3e %3c!ENTITY ns_ai 'http://ns.adobe.com/AdobeIllustrator/10.0/'%3e %3c!ENTITY ns_graphs 'http://ns.adobe.com/Graphs/1.0/'%3e %3c!ENTITY ns_vars 'http://ns.adobe.com/Variables/1.0/'%3e %3c!ENTITY ns_imrep 'http://ns.adobe.com/ImageReplacement/1.0/'%3e %3c!ENTITY ns_sfw 'http://ns.adobe.com/SaveForWeb/1.0/'%3e %3c!ENTITY ns_custom 'http://ns.adobe.com/GenericCustomNamespace/1.0/'%3e %3c!ENTITY ns_adobe_xpath 'http://ns.adobe.com/XPath/1.0/'%3e%5d%3e%3csvg enable-background='new 0 0 479.42 154.1' version='1.1' viewBox='0 0 479.42 154.1' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3e%3cstyle type='text/css'%3e .st0%7bfill:%23003A57%3b%7d .st1%7bfill:%2354C38A%3b%7d .st2%7bfill:%23B2C4CD%3b%7d .st3%7bfill:%23809CAB%3b%7d .st4%7bfill:%23CCEDDC%3b%7d .st5%7bfill:%23CCD8DD%3b%7d .st6%7bfill:%23E5EBEE%3b%7d .st7%7bfill:%23A9E1C5%3b%7d%3c/style%3e%3cswitch%3e %3cforeignObject width='1' height='1' requiredExtensions='http://ns.adobe.com/AdobeIllustrator/10.0/'%3e %3c/foreignObject%3e %3cg%3e %3cpath class='st0' d='m203.46 43.96c1.66 0 3.06 0.82 3.06 2.56 0 0.83-0.48 1.54-1.36 1.88 1.11 0.31 1.64 1.33 1.64 2.18 0 1.94-1.63 2.52-3.35 2.52h-3.99v-9.13h4zm-2.85 3.93h2.91c1.1 0 1.89-0.4 1.89-1.36 0-1.02-0.82-1.54-1.94-1.54h-2.86v2.9zm0 4.13h2.86c0.95 0 2.22-0.25 2.22-1.49-0.01-1.15-1.17-1.62-2.16-1.62h-2.91v3.11z'/%3e %3cpath class='st0' d='M212.75%2c43.96h6.41V45h-5.29v2.86h5.07v1.06h-5.07v3.09h5.5v1.08h-6.62V43.96z'/%3e %3cpath class='st0' d='m235.85 44.78c-1.16 0-2.4 0.46-2.4 1.56 0 0.99 1.13 1.28 2.48 1.5 1.83 0.29 3.62 0.65 3.62 2.71-0.01 2.05-1.97 2.71-3.72 2.71-1.62 0-3.16-0.59-3.86-2.11l0.94-0.55c0.59 1.08 1.81 1.6 2.93 1.6 1.11 0 2.58-0.35 2.58-1.69 0.01-1.13-1.26-1.46-2.63-1.67-1.76-0.27-3.47-0.68-3.47-2.53-0.03-1.9 1.92-2.55 3.49-2.55 1.36 0 2.65 0.27 3.45 1.66l-0.86 0.53c-0.48-0.79-1.54-1.15-2.55-1.17z'/%3e %3cpath class='st0' d='m250.07 50.22h-0.23l-3.31-4.64v7.51h-1.12v-9.13h1.36l3.21 4.69 3.18-4.69h1.36v9.13h-1.12v-7.49l-3.33 4.62z'/%3e %3cpath class='st0' d='m265.37 43.96 4.09 9.13h-1.23l-0.9-2.01h-5.22l-0.89 2.01h-1.22l4.09-9.13h1.28zm-0.64 1.15-2.16 4.93h4.33l-2.17-4.93z'/%3e %3cpath class='st0' d='m278.31 49.8h-2.22v3.29h-1.13v-9.13h4.15c2.06 0 3.09 1.43 3.09 2.92 0.01 1.38-0.74 2.67-2.62 2.83l3.01 3.38h-1.43l-2.85-3.29zm2.75-2.89c0.01-0.91-0.64-1.93-1.96-1.93h-3.01v3.81h2.96c1.37 0 2.01-0.85 2.01-1.88z'/%3e %3cpath class='st0' d='m287.15 44.98v-1.02h7.35v1.02h-3.12v8.11h-1.12v-8.11h-3.11z'/%3e %3cpath class='st0' d='m313.34 43.96v1.08h-5.2v3.18h4.98v1.06h-4.98v3.82h-1.14v-9.14h6.34z'/%3e %3cpath class='st0' d='m322.57 49.8h-2.22v3.29h-1.13v-9.13h4.15c2.06 0 3.09 1.43 3.09 2.92 0.01 1.38-0.74 2.67-2.62 2.83l3.01 3.38h-1.43l-2.85-3.29zm2.76-2.89c0.01-0.91-0.64-1.93-1.96-1.93h-3.01v3.81h2.96c1.37 0 2.01-0.85 2.01-1.88z'/%3e %3cpath class='st0' d='m341.26 48.55c-0.01 2.39-1.5 4.72-4.63 4.72s-4.64-2.32-4.64-4.72c0-2.65 1.77-4.75 4.65-4.75 3.1 0.02 4.64 2.34 4.62 4.75zm-4.61-3.7c-2.32 0-3.52 1.71-3.52 3.7 0 1.85 1.12 3.65 3.52 3.65s3.48-1.85 3.48-3.65c0.01-1.85-1.1-3.68-3.48-3.7z'/%3e %3cpath class='st0' d='m351.84 50.22h-0.23l-3.31-4.64v7.51h-1.12v-9.13h1.36l3.21 4.69 3.18-4.69h1.36v9.13h-1.12v-7.49l-3.33 4.62z'/%3e %3cpath class='st0' d='m368.77 44.98v-1.02h7.35v1.02h-3.12v8.11h-1.12v-8.11h-3.11z'/%3e %3cpath class='st0' d='m387.97 48.97h-5.22v4.12h-1.13v-9.13h1.13v3.95h5.22v-3.95h1.13v9.13h-1.13v-4.12z'/%3e %3cpath class='st0' d='M395.58%2c43.96H402V45h-5.29v2.86h5.07v1.06h-5.07v3.09h5.5v1.08h-6.62V43.96z'/%3e %3cpath class='st0' d='m418.68 44.78c-1.16 0-2.4 0.46-2.4 1.56 0 0.99 1.13 1.28 2.48 1.5 1.83 0.29 3.62 0.65 3.62 2.71-0.01 2.05-1.97 2.71-3.72 2.71-1.62 0-3.15-0.59-3.86-2.11l0.94-0.55c0.59 1.08 1.81 1.6 2.93 1.6 1.11 0 2.58-0.35 2.58-1.69 0.01-1.13-1.26-1.46-2.63-1.67-1.76-0.27-3.47-0.68-3.47-2.53-0.03-1.9 1.92-2.55 3.49-2.55 1.36 0 2.65 0.27 3.46 1.66l-0.86 0.53c-0.49-0.79-1.54-1.15-2.56-1.17z'/%3e %3cpath class='st0' d='m427.25 44.98v-1.02h7.35v1.02h-3.12v8.11h-1.12v-8.11h-3.11z'/%3e %3cpath class='st0' d='m443.63 43.96 4.09 9.13h-1.23l-0.9-2.01h-5.22l-0.89 2.01h-1.24l4.09-9.13h1.3zm-0.64 1.15-2.16 4.93h4.33l-2.17-4.93z'/%3e %3cpath class='st0' d='m456.57 49.8h-2.22v3.29h-1.13v-9.13h4.15c2.06 0 3.09 1.43 3.09 2.92 0.01 1.38-0.74 2.67-2.62 2.83l3.01 3.38h-1.43l-2.85-3.29zm2.75-2.89c0.01-0.91-0.64-1.93-1.96-1.93h-3.01v3.81h2.96c1.37 0 2.01-0.85 2.01-1.88z'/%3e %3cpath class='st0' d='m465.41 44.98v-1.02h7.35v1.02h-3.12v8.11h-1.12v-8.11h-3.11z'/%3e %3cpath class='st0' d='m157.64 115.24v-24.59c0-6.81-3.65-10.72-10.03-10.72-6 0-9.44 3.91-9.44 10.72v24.59h-8.58v-24.59c0-11.51 6.93-18.66 18.08-18.66 11.26 0 18.54 7.32 18.54 18.66v24.59h-8.57z'/%3e %3cpath class='st0' d='m214.63 116.35c-16.55 0-22.44-11.2-22.44-21.67 0-15.87 11.27-22.98 22.44-22.98 5.93 0 11.53 2.3 15.77 6.49l0.34 0.34-5.54 5.67-0.35-0.33c-2.55-2.44-6.57-4.02-10.23-4.02-8.14 0-13.82 6.1-13.82 14.83 0 6.48 3.63 13.4 13.82 13.4 3.51 0 6.11-0.89 8.89-3.07v-6.64h-10.61v-7.97h19.29v17.55l-0.63 0.76c-4.49 5.14-10.03 7.64-16.93 7.64z'/%3e %3cpath class='st0' d='m277.01 115.24c-11.26 0-18.54-7.32-18.54-18.66v-24.59h8.58v24.59c0 6.81 3.65 10.72 10.02 10.72 6 0 9.44-3.91 9.44-10.72v-24.59h8.58v24.59c0 11.51-6.92 18.66-18.08 18.66z'/%3e %3cpolygon class='st0' points='321.07 115.24 321.07 72.25 354.94 72.25 354.94 80.65 329.64 80.65 329.64 90.13 350.81 90.13 350.81 98.24 329.64 98.24 329.64 106.72 354.94 106.72 354.94 115.24'/%3e %3cpath class='st0' d='m397.19 116.06c-9.41 0-15.35-3.37-18.16-10.29l-0.17-0.41 7.25-3.76 0.2 0.5c1.55 3.85 5.66 6.14 10.99 6.14 2.08 0 8.86-0.4 8.86-5.61 0-3.05-2.94-4.85-8.97-5.5-14.45-1.72-16.4-7.43-16.4-12.79 0-8.43 8.14-12.27 16.22-12.33 8.06 0 13.73 2.88 16.41 8.34l0.21 0.43-6.92 3.56-0.23-0.39c-1.25-2.08-4.91-4.29-9.22-4.29-4.89 0-7.93 1.88-7.93 4.92 0 2.99 3.45 4.01 8.63 4.63 8.73 1.08 16.8 3.45 16.8 13.43-0.02 9.89-9.09 13.42-17.57 13.42z'/%3e %3cpath class='st0' d='m457.03 116.25c-9.4 0-15.33-3.36-18.14-10.28l-0.17-0.41 7.25-3.75 0.2 0.5c1.55 3.84 5.65 6.13 10.98 6.13 2.08 0 8.85-0.4 8.85-5.61 0-3.05-2.93-4.85-8.96-5.49-14.44-1.72-16.38-7.42-16.38-12.78 0-8.42 8.14-12.25 16.2-12.32 8.05 0 13.71 2.88 16.39 8.33l0.21 0.43-6.92 3.56-0.23-0.39c-1.25-2.08-4.9-4.29-9.21-4.29-4.89 0-7.93 1.88-7.93 4.91 0 2.99 3.45 4.01 8.62 4.62 8.72 1.07 16.79 3.44 16.79 13.42-0.01 9.9-9.07 13.42-17.55 13.42z'/%3e %3cpath class='st0' d='m94.63 93.63v4.23h-0.03c-0.36 6.13-3.75 9.62-9.43 9.62-6.03 0-9.62-3.49-10.01-9.62h-0.03v-4.23h-8.58v4.23 0.01 0.05c0.49 10.69 7.66 17.52 18.55 17.52 10.79 0 17.63-6.68 18.09-17.52v-4.29h-8.56z'/%3e %3crect class='st1' x='66.55' y='72.02' width='8.6' height='8.6'/%3e %3crect class='st0' x='94.41' y='72.02' width='8.72' height='8.72'/%3e %3crect class='st2' transform='matrix(-1.837e-16 1 -1 -1.837e-16 103.01 7.8599)' x='43.27' y='51.13' width='8.6' height='8.6'/%3e %3crect class='st3' transform='matrix(-1.837e-16 1 -1 -1.837e-16 126.9 6.4839)' x='55.9' y='62.39' width='8.6' height='8.6'/%3e %3crect class='st4' transform='matrix(-1.837e-16 1 -1 -1.837e-16 94.995 31.397)' x='27.5' y='58.89' width='8.6' height='8.6'/%3e %3crect class='st5' transform='matrix(-1.837e-16 1 -1 -1.837e-16 64.365 27.091)' x='14.34' y='41.43' width='8.6' height='8.6'/%3e %3crect class='st6' transform='matrix(-1.837e-16 1 -1 -1.837e-16 138.08 66.268)' x='31.6' y='97.87' width='8.6' height='8.6'/%3e %3crect class='st7' transform='matrix(-1.837e-16 1 -1 -1.837e-16 137.84 35.856)' x='46.69' y='82.55' width='8.6' height='8.6'/%3e %3c/g%3e%3c/switch%3e%3c/svg%3e";
+
+var img$1 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3c!-- Generator: Adobe Illustrator 26.0.1%2c SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 532 311.3' style='enable-background:new 0 0 532 311.3%3b' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:%23003A57%3b%7d .st1%7bfill:%2354C38A%3b%7d .st2%7bfill:%23B2C4CD%3b%7d .st3%7bfill:%23809CAB%3b%7d .st4%7bfill:%23CCEDDC%3b%7d .st5%7bfill:%23CCD8DD%3b%7d .st6%7bfill:%23E5EBEE%3b%7d .st7%7bfill:%23A9E1C5%3b%7d%3c/style%3e%3cg%3e %3cg%3e %3cpath class='st0' d='M89.4%2c278.2c2.4%2c0%2c4.4%2c1.2%2c4.4%2c3.7c0%2c1.2-0.7%2c2.2-1.9%2c2.7c1.6%2c0.4%2c2.4%2c1.9%2c2.4%2c3.1c0%2c2.8-2.3%2c3.6-4.8%2c3.6 h-5.7v-13.1H89.4z M85.3%2c283.8h4.2c1.6%2c0%2c2.7-0.6%2c2.7-1.9c0-1.5-1.2-2.2-2.8-2.2h-4.1V283.8z M85.3%2c289.8h4.1 c1.4%2c0%2c3.2-0.4%2c3.2-2.1c0-1.6-1.7-2.3-3.1-2.3h-4.2V289.8z'/%3e %3cpath class='st0' d='M101.9%2c278.2h9.2v1.5h-7.6v4.1h7.3v1.5h-7.3v4.4h7.9v1.6h-9.5V278.2z'/%3e %3cpath class='st0' d='M133.5%2c279.4c-1.7%2c0-3.4%2c0.7-3.4%2c2.2c0%2c1.4%2c1.6%2c1.8%2c3.6%2c2.2c2.6%2c0.4%2c5.2%2c0.9%2c5.2%2c3.9c0%2c2.9-2.8%2c3.9-5.3%2c3.9 c-2.3%2c0-4.5-0.8-5.5-3l1.3-0.8c0.8%2c1.6%2c2.6%2c2.3%2c4.2%2c2.3c1.6%2c0%2c3.7-0.5%2c3.7-2.4c0-1.6-1.8-2.1-3.8-2.4c-2.5-0.4-5-1-5-3.6 c0-2.7%2c2.8-3.7%2c5-3.7c1.9%2c0%2c3.8%2c0.4%2c5%2c2.4l-1.2%2c0.8C136.5%2c279.9%2c135%2c279.4%2c133.5%2c279.4z'/%3e %3cpath class='st0' d='M153.1%2c287.2h-0.3l-4.8-6.7v10.8h-1.6v-13.1h1.9l4.6%2c6.7l4.6-6.7h1.9v13.1h-1.6v-10.7L153.1%2c287.2z'/%3e %3cpath class='st0' d='M174.3%2c278.2l5.9%2c13.1h-1.8l-1.3-2.9h-7.5l-1.3%2c2.9h-1.8l5.9-13.1H174.3z M173.4%2c279.8l-3.1%2c7.1h6.2 L173.4%2c279.8z'/%3e %3cpath class='st0' d='M192.1%2c286.6h-3.2v4.7h-1.6v-13.1h5.9c3%2c0%2c4.4%2c2.1%2c4.4%2c4.2c0%2c2-1.1%2c3.8-3.8%2c4.1l4.3%2c4.8h-2.1L192.1%2c286.6z M196%2c282.4c0-1.3-0.9-2.8-2.8-2.8h-4.3v5.5h4.2C195.1%2c285.1%2c196%2c283.9%2c196%2c282.4z'/%3e %3cpath class='st0' d='M204%2c279.7v-1.5h10.6v1.5h-4.5v11.6h-1.6v-11.6H204z'/%3e %3cpath class='st0' d='M240%2c278.2v1.6h-7.5v4.6h7.1v1.5h-7.1v5.5h-1.6v-13.1H240z'/%3e %3cpath class='st0' d='M252.5%2c286.6h-3.2v4.7h-1.6v-13.1h5.9c3%2c0%2c4.4%2c2.1%2c4.4%2c4.2c0%2c2-1.1%2c3.8-3.8%2c4.1l4.3%2c4.8h-2.1L252.5%2c286.6z M256.4%2c282.4c0-1.3-0.9-2.8-2.8-2.8h-4.3v5.5h4.2C255.5%2c285.1%2c256.4%2c283.9%2c256.4%2c282.4z'/%3e %3cpath class='st0' d='M278.5%2c284.8c0%2c3.4-2.2%2c6.8-6.6%2c6.8c-4.5%2c0-6.7-3.3-6.7-6.8c0-3.8%2c2.5-6.8%2c6.7-6.8 C276.3%2c278%2c278.5%2c281.3%2c278.5%2c284.8z M271.9%2c279.5c-3.3%2c0-5.1%2c2.5-5.1%2c5.3c0%2c2.7%2c1.6%2c5.2%2c5.1%2c5.2c3.4%2c0%2c5-2.7%2c5-5.2 C276.9%2c282.1%2c275.3%2c279.5%2c271.9%2c279.5z'/%3e %3cpath class='st0' d='M292.9%2c287.2h-0.3l-4.8-6.7v10.8h-1.6v-13.1h1.9l4.6%2c6.7l4.6-6.7h1.9v13.1h-1.6v-10.7L292.9%2c287.2z'/%3e %3cpath class='st0' d='M315.6%2c279.7v-1.5h10.6v1.5h-4.5v11.6h-1.6v-11.6H315.6z'/%3e %3cpath class='st0' d='M342.4%2c285.4h-7.5v5.9h-1.6v-13.1h1.6v5.7h7.5v-5.7h1.6v13.1h-1.6V285.4z'/%3e %3cpath class='st0' d='M352.6%2c278.2h9.2v1.5h-7.6v4.1h7.3v1.5h-7.3v4.4h7.9v1.6h-9.5V278.2z'/%3e %3cpath class='st0' d='M384.1%2c279.4c-1.7%2c0-3.4%2c0.7-3.4%2c2.2c0%2c1.4%2c1.6%2c1.8%2c3.6%2c2.2c2.6%2c0.4%2c5.2%2c0.9%2c5.2%2c3.9c0%2c2.9-2.8%2c3.9-5.3%2c3.9 c-2.3%2c0-4.5-0.8-5.5-3l1.3-0.8c0.8%2c1.6%2c2.6%2c2.3%2c4.2%2c2.3c1.6%2c0%2c3.7-0.5%2c3.7-2.4c0-1.6-1.8-2.1-3.8-2.4c-2.5-0.4-5-1-5-3.6 c0-2.7%2c2.8-3.7%2c5-3.7c1.9%2c0%2c3.8%2c0.4%2c5%2c2.4l-1.2%2c0.8C387.1%2c279.9%2c385.6%2c279.4%2c384.1%2c279.4z'/%3e %3cpath class='st0' d='M395.7%2c279.7v-1.5h10.6v1.5h-4.5v11.6h-1.6v-11.6H395.7z'/%3e %3cpath class='st0' d='M418.4%2c278.2l5.9%2c13.1h-1.8l-1.3-2.9h-7.5l-1.3%2c2.9h-1.8l5.9-13.1H418.4z M417.5%2c279.8l-3.1%2c7.1h6.2 L417.5%2c279.8z'/%3e %3cpath class='st0' d='M436.2%2c286.6H433v4.7h-1.6v-13.1h5.9c3%2c0%2c4.4%2c2.1%2c4.4%2c4.2c0%2c2-1.1%2c3.8-3.8%2c4.1l4.3%2c4.8h-2.1L436.2%2c286.6z M440.1%2c282.4c0-1.3-0.9-2.8-2.8-2.8H433v5.5h4.2C439.2%2c285.1%2c440.1%2c283.9%2c440.1%2c282.4z'/%3e %3cpath class='st0' d='M448.1%2c279.7v-1.5h10.6v1.5h-4.5v11.6h-1.6v-11.6H448.1z'/%3e %3c/g%3e%3c/g%3e%3cpath class='st0' d='M144.4%2c246.7v-27.4c0-7.6-4.1-11.9-11.2-11.9c-6.7%2c0-10.5%2c4.4-10.5%2c11.9v27.4h-9.6v-27.4 c0-12.8%2c7.7-20.8%2c20.1-20.8c12.5%2c0%2c20.7%2c8.2%2c20.7%2c20.8v27.4H144.4z'/%3e%3cpath class='st0' d='M207.9%2c248c-18.4%2c0-25-12.5-25-24.1c0-17.7%2c12.6-25.6%2c25-25.6c6.6%2c0%2c12.8%2c2.6%2c17.6%2c7.2l0.4%2c0.4l-6.2%2c6.3 l-0.4-0.4c-2.8-2.7-7.3-4.5-11.4-4.5c-9.1%2c0-15.4%2c6.8-15.4%2c16.5c0%2c7.2%2c4%2c14.9%2c15.4%2c14.9c3.9%2c0%2c6.8-1%2c9.9-3.4v-7.4H206v-8.9h21.5 v19.5l-0.7%2c0.9C221.8%2c245.2%2c215.6%2c248%2c207.9%2c248z'/%3e%3cpath class='st0' d='M277.4%2c246.7c-12.5%2c0-20.7-8.2-20.7-20.8v-27.4h9.6V226c0%2c7.6%2c4.1%2c11.9%2c11.2%2c11.9c6.7%2c0%2c10.5-4.4%2c10.5-11.9 v-27.4h9.6V226C297.5%2c238.8%2c289.8%2c246.7%2c277.4%2c246.7z'/%3e%3cpath class='st0' d='M63.4%2c246.7c-12.5%2c0-20.7-8.2-20.7-20.8v-27.4h9.6V226c0%2c7.6%2c4.1%2c11.9%2c11.2%2c11.9c6.7%2c0%2c10.5-4.4%2c10.5-11.9 v-27.4h9.6V226C83.6%2c238.8%2c75.8%2c246.7%2c63.4%2c246.7z'/%3e%3cpolygon class='st0' points='326.4%2c246.7 326.4%2c198.9 364.2%2c198.9 364.2%2c208.2 336%2c208.2 336%2c218.8 359.6%2c218.8 359.6%2c227.8 336%2c227.8 336%2c237.3 364.2%2c237.3 364.2%2c246.7 '/%3e%3cpath class='st0' d='M411.2%2c247.6c-10.5%2c0-17.1-3.7-20.2-11.5l-0.2-0.5l8.1-4.2l0.2%2c0.6c1.7%2c4.3%2c6.3%2c6.8%2c12.2%2c6.8 c2.3%2c0%2c9.9-0.5%2c9.9-6.2c0-3.4-3.3-5.4-10-6.1c-16.1-1.9-18.3-8.3-18.3-14.2c0-9.4%2c9.1-13.7%2c18.1-13.7c9%2c0%2c15.3%2c3.2%2c18.3%2c9.3l0.2%2c0.5 l-7.7%2c4l-0.3-0.4c-1.4-2.3-5.5-4.8-10.3-4.8c-5.4%2c0-8.8%2c2.1-8.8%2c5.5c0%2c3.3%2c3.8%2c4.5%2c9.6%2c5.2c9.7%2c1.2%2c18.7%2c3.8%2c18.7%2c15 C430.7%2c243.7%2c420.7%2c247.6%2c411.2%2c247.6z'/%3e%3cpath class='st0' d='M477.9%2c247.6c-10.5%2c0-17.1-3.7-20.2-11.5l-0.2-0.5l8.1-4.2l0.2%2c0.6c1.7%2c4.3%2c6.3%2c6.8%2c12.2%2c6.8 c2.3%2c0%2c9.9-0.5%2c9.9-6.2c0-3.4-3.3-5.4-10-6.1c-16.1-1.9-18.3-8.3-18.3-14.2c0-9.4%2c9.1-13.7%2c18.1-13.7c9%2c0%2c15.3%2c3.2%2c18.3%2c9.3l0.2%2c0.5 l-7.7%2c4l-0.3-0.4c-1.4-2.3-5.5-4.8-10.3-4.8c-5.4%2c0-8.8%2c2.1-8.8%2c5.5c0%2c3.3%2c3.8%2c4.5%2c9.6%2c5.2c9.7%2c1.2%2c18.7%2c3.8%2c18.7%2c15 C497.4%2c243.7%2c487.3%2c247.6%2c477.9%2c247.6z'/%3e%3cg%3e %3cpath class='st0' d='M296.2%2c105.8v8h-0.1c-0.7%2c11.6-7.1%2c18.2-17.8%2c18.2c-11.4%2c0-18.2-6.6-18.9-18.2h-0.1v-8h-16.2v8h0c0%2c0%2c0%2c0%2c0%2c0 v0.1h0c0.9%2c20.2%2c14.5%2c33.1%2c35.1%2c33.1c20.4%2c0%2c33.3-12.6%2c34.2-33.1h0v-8.1H296.2z'/%3e %3crect x='243.2' y='65' class='st1' width='16.3' height='16.3'/%3e %3crect x='295.8' y='65' class='st0' width='16.5' height='16.5'/%3e %3crect x='199.1' y='25.5' transform='matrix(-1.836970e-16 1 -1 -1.836970e-16 240.8896 -173.6676)' class='st2' width='16.3' height='16.3'/%3e %3crect x='223' y='46.8' transform='matrix(-1.836970e-16 1 -1 -1.836970e-16 286.0495 -176.2692)' class='st3' width='16.3' height='16.3'/%3e %3crect x='169.3' y='40.2' transform='matrix(-1.836970e-16 1 -1 -1.836970e-16 225.7338 -129.1657)' class='st4' width='16.3' height='16.3'/%3e %3crect x='144.4' y='7.1' transform='matrix(-1.836970e-16 1 -1 -1.836970e-16 167.8209 -137.3073)' class='st5' width='16.3' height='16.3'/%3e %3crect x='177.1' y='113.8' transform='matrix(-1.836970e-16 1 -1 -1.836970e-16 307.1887 -63.2329)' class='st6' width='16.3' height='16.3'/%3e %3crect x='205.6' y='84.9' transform='matrix(-1.836970e-16 1 -1 -1.836970e-16 306.7381 -120.7343)' class='st7' width='16.3' height='16.3'/%3e%3c/g%3e%3c/svg%3e";
+
+var img = "data:image/svg+xml,%3csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M17.2597 12.9199V14.767H17.2367C17.075 17.4452 15.5974 18.969 13.127 18.969C10.4949 18.969 8.92496 17.4452 8.76335 14.767H8.74026V12.9199H5V14.767V14.7901C5.20779 19.4538 8.34777 22.4322 13.1039 22.4322C17.8139 22.4322 20.7922 19.5231 21 14.7901V12.9199H17.2597Z' fill='%23003A57'/%3e%3cpath d='M8.78629 3.5H5.02295V7.26335H8.78629V3.5Z' fill='%2370C38A'/%3e%3cpath d='M20.9768 3.5H17.1672V7.30952H20.9768V3.5Z' fill='%23003A57'/%3e%3c/svg%3e";
+
+/**
+ * A Logo is a visual way to represent a brand logo.
+ * <hr>
+ * Used for this:
+ *  - To visually represent a brand or product
+ *
+ * Not for this:
+ *  - To visually represent a common image
+ */
+var Logo = function (props) {
+    var _a;
+    return (jsxRuntime.jsx("img", __assign({}, props && !props.type, props && props.type === "horizontal" && { width: "".concat(props.size) }, props && props.type === "vertical" && { height: "".concat(props.size) }, props && props.type === "icon" && { width: "".concat(props.size) } && { height: "".concat(props.size) }, { className: props.className, alt: (_a = props.alt) !== null && _a !== void 0 ? _a : "Unguess Logo", src: {
+            'horizontal': img$2,
+            'vertical': img$1,
+            'icon': img,
+        }[props.type] })));
+};
+
+var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey["800"];
+});
+var Modal = function (props) { return jsxRuntime.jsx(reactModals.Modal, __assign({}, props)); };
+var FooterItem = reactModals.FooterItem;
+Modal.Header = reactModals.Header;
+Modal.Body = ugModalBody;
+Modal.Footer = reactModals.Footer;
+var templateObject_1$f;
+
+/**
+ * A Body defines the main content of an HTML document which displays on the browser
+ */
+var Body$1 = function (props) { return jsxRuntime.jsx(reactChrome.Body, __assign({}, props)); };
+
+/**
+ * A Content defines the main content of an HTML document which displays on the browser
+ */
+var Content = function (props) { return jsxRuntime.jsx(reactChrome.Content, __assign({}, props)); };
+
+var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; });
+var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
+var templateObject_1$e;
+
+var HeaderItemText = function (props) { return jsxRuntime.jsx(reactChrome.HeaderItemText, __assign({}, props)); };
+
+var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
+
+var _path$6;
+
+function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
+
+var SvgMenuStroke = function SvgMenuStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16"
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M1.5 3.5h13m-13 4h13m-13 4h13"
+  })));
+};
+
+var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  margin-right: 2px;\n  border-right: none;\n  @media (max-width: ", ") {\n    right: 0;\n    left: 0;\n    margin-right: auto;\n    margin-left: auto;\n    position: absolute;\n  }\n"], ["\n  margin-right: 2px;\n  border-right: none;\n  @media (max-width: ", ") {\n    right: 0;\n    left: 0;\n    margin-right: auto;\n    margin-left: auto;\n    position: absolute;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.breakpoints.sm;
+});
+var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  margin-right: auto;\n  margin-left: -8px;\n  color: ", ";\n  pointer-events: none;\n  @media (max-width: ", ") {\n    display: none;\n  }\n"], ["\n  margin-right: auto;\n  margin-left: -8px;\n  color: ", ";\n  pointer-events: none;\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.palette.blue["600"];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.breakpoints.sm;
+});
+var MenuItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  position: absolute;\n  left: 0;\n  @media (min-width: ", ") {\n    display: none;\n  }\n"], ["\n  color: ", ";\n  position: absolute;\n  left: 0;\n  @media (min-width: ", ") {\n    display: none;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.palette.blue["600"];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.breakpoints.sm;
+});
+var BrandItem = function (props) {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(MenuItem, __assign({}, props, { onClick: props.toggleMenu }, { children: [jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(SvgMenuStroke, {}) }), props.menuLabel && jsxRuntime.jsx(HeaderItemText, { children: props.menuLabel })] })), jsxRuntime.jsx(LogoIconContainer, __assign({}, props, { hasLogo: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }) })), props.brandName && (jsxRuntime.jsx(BrandName, __assign({}, props, { children: jsxRuntime.jsx(HeaderItemText, { children: props.brandName }) })))] }));
+};
+var templateObject_1$d, templateObject_2$3, templateObject_3;
+
+/**
+ * An Header is a visual way to display general information.
+ * This can include navList Items, modal, profile settings.
+ */
+var Header = function (props) { return jsxRuntime.jsx(reactChrome.Header, __assign({}, props)); };
+Header.HeaderItem = HeaderItem;
+Header.HeaderItemText = HeaderItemText;
+Header.HeaderItemIcon = HeaderItemIcon;
+
+var _path$5, _path2;
+
+function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
+
+var SvgMegaphoneStroke = function SvgMegaphoneStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16"
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "none",
+    stroke: "currentColor",
+    d: "M4.5 4.5v7H4a3.5 3.5 0 010-7h.5zm0 7h3V14a1.5 1.5 0 01-3 0v-2.5z"
+  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M5 5v6h6l4 4V1l-4 4H5zM14.293.293C14.923-.337 16 .109 16 1v14c0 .89-1.077 1.337-1.707.707L10.586 12H5a1 1 0 01-1-1V5a1 1 0 011-1h5.586L14.293.293z"
+  })));
+};
+
+var _path$4;
+
+function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
+
+var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16"
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
+  })));
+};
+
+var ChevronButton = styled__default["default"](IconButton)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  @media (max-width: ", ") {\n    display: none;\n  }\n"], ["\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.breakpoints.sm;
+});
+/**
+ * An Header is a visual way to display general information.
+ * This can include navList Items, modal, profile settings.
+ */
+var AppHeader = function (_a) {
+    var brand = _a.brand, avatar = _a.avatar, args = __rest(_a, ["brand", "avatar"]);
+    return (jsxRuntime.jsxs(Header, __assign({}, args, { children: [jsxRuntime.jsx(BrandItem, __assign({}, brand, { toggleMenu: args.onSidebarMenuToggle })), args.hasChangelog && (jsxRuntime.jsx(HeaderItem, __assign({ onClick: args.onChangelogClick, style: { marginRight: "-" + theme.space.sm } }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(SvgMegaphoneStroke, {}) }) }))), jsxRuntime.jsx(HeaderItem, __assign({ isRound: true, onClick: avatar === null || avatar === void 0 ? void 0 : avatar.onProfileModalToggle }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Avatar, __assign({}, avatar)), jsxRuntime.jsx(ChevronButton, __assign({ size: "small" }, { children: jsxRuntime.jsx(SvgChevronDownStroke, {}) }))] }) }) }))] })));
+};
+var templateObject_1$c;
+
+/**
+ * A Main defines the main content of an HTML document which displays on the browser
+ */
+var Main = function (props) { return jsxRuntime.jsx(reactChrome.Main, __assign({}, props)); };
+
+var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  border-right: ", ";\n  border-color: ", ";\n  ", "\n  ", "\n  transition: width 0.25s ease-in-out;\n  padding-top: ", ";\n  padding-left: ", ";\n"], ["\n  border-right: ", ";\n  border-color: ", ";\n  ", "\n  ", "\n  transition: width 0.25s ease-in-out;\n  padding-top: ", ";\n  padding-left: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.borders.sm;
+}, function (_a) {
+    var theme = _a.theme;
+    return reactTheming.getColor(theme.colors.neutralHue, 300);
+}, function (props) { return !props.isExpanded && "width:  ".concat(props.theme.space.base * 9, "px;"); }, function (props) {
+    return "\n      @media (max-width: ".concat(props.theme.breakpoints.sm, ") {\n         width: ").concat(props.isExpanded ? "100%" : "0", ";\n         border-right: none;\n      }\n  ");
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.space.sm;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.space.xs;
+});
+/**
+ * The Nav component provides a high-level layout structure and sets a framework for navigating around dashboards.
+ * <br>
+ * Used for this:
+    - To give a consistent dashboard and navigation experience
+ */
+var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
+var templateObject_1$b;
+
+var SelectedItemStyle = styled.css(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (props) { return props.theme.palette.kale["100"]; });
+var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  border-top-left-radius: ", "px;\n  border-bottom-left-radius: ", "px;\n  ", "\n  ", "\n  &:hover, &:focus {\n    ", "\n  }\n  opacity: 1;\n  color: ", ";\n  font-weight: ", ";\n  ", "\n"], ["\n  border-top-left-radius: ", "px;\n  border-bottom-left-radius: ", "px;\n  ", "\n  ", "\n  &:hover, &:focus {\n    ", "\n  }\n  opacity: 1;\n  color: ", ";\n  font-weight: ", ";\n  ", "\n"])), function (props) { return props.theme.space.base * 6; }, function (props) { return props.theme.space.base * 6; }, function (props) { return !props.isExpanded && "display: none;"; }, function (props) { return props.isCurrent && SelectedItemStyle; }, SelectedItemStyle, function (props) { return props.theme.palette.blue["600"]; }, function (props) { return props.theme.fontWeights.medium; }, function (props) {
+    return props.isCurrent &&
+        "\n    color: ".concat(props.theme.palette.blue["700"], ";\n    font-weight: ").concat(props.theme.fontWeights.semibold, ";\n  ");
+});
+var NavItem = function (props) {
+    // const { isExpanded } = props;
+    return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
+};
+var templateObject_1$a, templateObject_2$2;
+
+var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject([""], [""])));
+var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
+var templateObject_1$9;
+
+/**
+ *  Use Ellipsis to automatically provide text content with a native title attribute and text-overflow styling.
+ */
+var Ellipsis = function (props) { return jsxRuntime.jsx(reactTypography.Ellipsis, __assign({}, props)); };
+
+var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "180px" } }, { children: props.children })) }))); };
+
+var _path$3;
+
+function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
+
+var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16"
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
+  })));
+};
+
+var _path$2;
+
+function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+
+var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16"
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
+  })));
+};
+
+var StyledToggle = styled__default["default"](IconButton)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  min-width: ", ";\n  position: absolute;\n  top: ", "px;\n  right: -", "px;\n  background: ", "};\n  z-index: 1;\n  @media (max-width: ", ") {\n    display: none;\n  }\n"], ["\n  width: ", "px;\n  height: ", "px;\n  min-width: ", ";\n  position: absolute;\n  top: ", "px;\n  right: -", "px;\n  background: ", "};\n  z-index: 1;\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.space.base * 6;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.space.base * 6;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.space.md;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.space.base * 3;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.space.base * 3;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.gradients.dark;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.breakpoints.sm;
+});
+var NavToggle = function (props) {
+    return (jsxRuntime.jsx(StyledToggle, __assign({}, props, { isPrimary: true, size: "small" }, { children: props.isExpanded ? (jsxRuntime.jsx(SvgChevronLeftStroke, { style: { width: "100%" } })) : (jsxRuntime.jsx(SvgChevronRightStroke, { style: { width: "100%" } })) })));
+};
+var templateObject_1$8;
+
+var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  width: 100%;\n  min-height: ", ";\n  opacity: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  padding-right: ", ";\n  pointer-events: none;\n\n  &:after {\n    background: ", ";\n    height: 1px;\n    flex: 1;\n    content: \"\";\n  }\n\n  span {\n    background: #fff;\n    margin: 0;\n    margin-right: ", ";\n    color: ", ";\n    font-size: ", ";\n  }\n  ", "\n"], ["\n  width: 100%;\n  min-height: ", ";\n  opacity: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  padding-right: ", ";\n  pointer-events: none;\n\n  &:after {\n    background: ", ";\n    height: 1px;\n    flex: 1;\n    content: \"\";\n  }\n\n  span {\n    background: #fff;\n    margin: 0;\n    margin-right: ", ";\n    color: ", ";\n    font-size: ", ";\n  }\n  ", "\n"])), function (props) { return props.theme.space.lg; }, function (props) { return props.theme.space.sm; }, function (props) { return props.theme.palette.grey["200"]; }, function (props) { return props.theme.space.sm; }, function (props) { return props.theme.palette.grey["500"]; }, function (props) { return props.theme.fontSizes.sm; }, function (props) { return !props.isExpanded && "display: none;"; });
+var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { id: "ciolla" }, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
+var templateObject_1$7;
+
+var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n"], ["\n  color: ", ";\n  font-size: ", ";\n"])), function (props) { return props.theme.palette.grey["500"]; }, function (props) { return props.theme.fontSizes.sm; });
+var UgNavItem = styled__default["default"](NavItem)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  flex-flow: column;\n  align-items: flex-start;\n"], ["\n  flex-flow: column;\n  align-items: flex-start;\n"])));
+var NavItemProject = function (props) { return jsxRuntime.jsx(UgNavItem, __assign({}, props)); };
+NavItemProject.Title = NavItemText;
+NavItemProject.SubTitle = UgProjectSubtitle;
+var templateObject_1$6, templateObject_2$1;
+
+var _path$1;
+
+function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+
+var SvgHomeFill = function SvgHomeFill(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 26,
+    height: 26,
+    focusable: "false",
+    viewBox: "0 0 26 26"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M23.885 13.2l-1.328 1.639a.522.522 0 01-.737.084l-1.444-1.155v7.182c0 .577-.474 1.05-1.054 1.05H16.51c-.58 0-1.054-.473-1.054-1.05v-3.182a2.43 2.43 0 00-.716-1.732 2.448 2.448 0 00-1.74-.714 2.45 2.45 0 00-1.739.714 2.43 2.43 0 00-.716 1.732v3.182c0 .577-.474 1.05-1.054 1.05H6.678c-.582 0-1.054-.47-1.054-1.05v-7.182L4.18 14.923a.522.522 0 01-.737-.084L2.115 13.2a.52.52 0 01.084-.735l10.474-8.348a.51.51 0 01.654 0L23.8 12.466a.52.52 0 01.084.735"
+  })));
+};
+
+var _linearGradient, _path;
+
+function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+
+var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 26,
+    height: 26,
+    focusable: "false",
+    viewBox: "0 0 26 26"
+  }, props), _linearGradient || (_linearGradient = /*#__PURE__*/React__namespace.createElement("linearGradient", {
+    id: "unguessIconGradient"
+  }, /*#__PURE__*/React__namespace.createElement("stop", {
+    className: "stop1",
+    offset: "11.98%",
+    stopColor: "#70c38a"
+  }), /*#__PURE__*/React__namespace.createElement("stop", {
+    className: "stop3",
+    offset: "100%",
+    stopColor: "#001825"
+  }))), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "url(#unguessIconGradient)",
+    d: "M23.885 13.2l-1.328 1.639a.522.522 0 01-.737.084l-1.444-1.155v7.182c0 .577-.474 1.05-1.054 1.05H16.51c-.58 0-1.054-.473-1.054-1.05v-3.182a2.43 2.43 0 00-.716-1.732 2.448 2.448 0 00-1.74-.714 2.45 2.45 0 00-1.739.714 2.43 2.43 0 00-.716 1.732v3.182c0 .577-.474 1.05-1.054 1.05H6.678c-.582 0-1.054-.47-1.054-1.05v-7.182L4.18 14.923a.522.522 0 01-.737-.084L2.115 13.2a.52.52 0 01.084-.735l10.474-8.348a.51.51 0 01.654 0L23.8 12.466a.52.52 0 01.084.735"
+  })));
+};
+
+var _g, _defs;
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var SvgToken = function SvgToken(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    fill: "none",
+    viewBox: "0 0 32 32",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
+    clipPath: "url(#a)"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "m32 16c0 8.8363-7.1635 16-16 16-8.8369 0-16-7.1635-16-16 0-8.8367 7.1632-16 16-16 8.8364 0 16 7.1632 16 16z",
+    clipRule: "evenodd",
+    fill: "#9FD7B1",
+    fillRule: "evenodd"
+  }), /*#__PURE__*/React__namespace.createElement("rect", {
+    x: 4.129,
+    y: 4.129,
+    width: 23.742,
+    height: 23.742,
+    rx: 11.871,
+    fill: "#003A57"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "m18.662 16.433v1.1544h-0.0144c-0.1011 1.6739-1.0246 2.6263-2.5686 2.6263-1.645 0-2.6263-0.9524-2.7273-2.6263h-0.0144v-1.1544h-2.3377v1.1688c0.1299 2.9149 2.0924 4.7764 5.065 4.7764 2.9437 0 4.8052-1.8182 4.9351-4.7764v-1.1688h-2.3377z",
+    fill: "#fff"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "m13.367 10.545h-2.3522v2.3521h2.3522v-2.3521z",
+    fill: "#54C38A"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "m20.986 10.545h-2.381v2.381h2.381v-2.381z",
+    fill: "#fff"
+  }))), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+    id: "a"
+  }, /*#__PURE__*/React__namespace.createElement("rect", {
+    width: 32,
+    height: 32,
+    fill: "#fff"
+  })))));
+};
+
+/**
+ * Use Span to style and format inline text elements.
+ * <hr>
+ * Used for this:
+    - To apply styles to short strings of text
+    - To include icons inline with text
+ * Not for this:
+    - To style an entire block of text, use Paragraph instead
+ */
+var Span = function (props) { return jsxRuntime.jsx(reactTypography.Span, __assign({}, props)); };
+
+var TokenContainer = styled__default["default"].div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+/**
+ * The UNGUESS Sidebar component provides a high-level layout structure and sets a framework for navigating around projects.
+ * <br>
+ * Used for this:
+    - To give a consistent dashboard and navigation experience
+ */
+var Sidebar = function (props) {
+    var _a = React.useState(props.currentRoute || "home"), nav = _a[0], setNav = _a[1];
+    var toggleNav = function () {
+        props.onToggleMenu && props.onToggleMenu();
+    };
+    return (jsxRuntime.jsxs(Nav, __assign({}, props, { children: [jsxRuntime.jsx(NavToggle, { onClick: toggleNav, isExpanded: props.isExpanded }), props.tokens && (jsxRuntime.jsx(NavItem, __assign({ hasLogo: true, isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, __assign({ style: { padding: theme.space.sm, width: "70%" } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, __assign({ isBold: true, style: { marginLeft: theme.space.xs } }, { children: "12 Tokens" }))] }) })) }))), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: function () { return setNav("home"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), jsxRuntime.jsx(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: props.dividerLabel || "" })), props.projects &&
+                props.projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: props.isExpanded, isCurrent: nav === project.id, onClick: function () { return setNav(project.id); } }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }))); }), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none" } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
+};
+var templateObject_1$5;
+
+/**
+ * The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
+ * <br>
+ * Used for this:
+    - To give a consistent dashboard and navigation experience
+ */
+var Chrome = function (props) { return jsxRuntime.jsx(reactChrome.Chrome, __assign({}, props)); };
 
 /**
  * A Notification is a passive status update that keeps users informed of system progress.
@@ -469,6 +1024,18 @@ var Notification = function (props) { return (jsxRuntime.jsx(reactNotifications.
 var ToastProvider = function (props) { return jsxRuntime.jsx(reactNotifications.ToastProvider, __assign({}, props)); };
 var useToast = reactNotifications.useToast;
 
+var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject([""], [""])));
+/**
+ * Pagination separates content into pages and allows users to navigate between those pages.
+
+ * Used for this:
+    - To divide large amounts of data into manageable chunks
+
+ */
+var Pagination = function (props) { return jsxRuntime.jsx(UgPagination, __assign({}, props)); };
+var CursorPagination = reactPagination.CursorPagination;
+var templateObject_1$4;
+
 var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject([""], [""])));
 /**
  * A Table organizes data into columns and rows. Tables make it easier for users to compare and analyze information.
@@ -490,6 +1057,39 @@ var GroupRow = function (props) { return jsxRuntime.jsx(reactTables.GroupRow, __
 var Caption = function (props) { return jsxRuntime.jsx(reactTables.Caption, __assign({}, props)); };
 var templateObject_1$3;
 
+/**
+ * Tags let users categorize content using a keyword.
+
+ * Used for this:
+    - To add metadata to an element such as category, attribute, or property
+    - To communicate status
+    - To represent parameters of a filter
+
+ * Not for this:
+    - To prompt an action by the user, use a Button instead
+ */
+var Tag = function (props) { return jsxRuntime.jsx(reactTags.Tag, __assign({}, props)); };
+Tag.Avatar = reactTags.Tag.Avatar;
+Tag.Close = reactTags.Tag.Close;
+
+/**
+ * Tiles are Radio buttons styled with icons or images.
+
+ * Used for this:
+    - Like Radios, Tiles are for choices that can't occur at the same time
+
+ * Not for this:
+    - To choose more than one option at once, use a Checkbox instead
+    - To select from a long list of options, use a Select
+    - To define an action, use a Button instead
+    - For navigation, use an Anchor instead
+ */
+var Tiles = function (props) { return jsxRuntime.jsx(reactForms.Tiles, __assign({}, props)); };
+Tiles.Description = reactForms.Tiles.Description;
+Tiles.Icon = reactForms.Tiles.Icon;
+Tiles.Label = reactForms.Tiles.Label;
+Tiles.Tile = reactForms.Tiles.Tile;
+
 /**
  * A Trigger is a wrapper for input elements
  **/
@@ -507,11 +1107,6 @@ var UgCode = styled__default["default"](reactTypography.Code)(templateObject_1$2
 var Code = function (props) { return jsxRuntime.jsx(UgCode, __assign({}, props)); };
 var templateObject_1$2;
 
-/**
- *  Use Ellipsis to automatically provide text content with a native title attribute and text-overflow styling.
- */
-var Ellipsis = function (props) { return jsxRuntime.jsx(reactTypography.Ellipsis, __assign({}, props)); };
-
 var UgOrderedList = styled__default["default"](reactTypography.OrderedList)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject([""], [""])));
 var UgUnorderedList = styled__default["default"](reactTypography.UnorderedList)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
 /**
@@ -532,17 +1127,6 @@ var UgParagraph = styled__default["default"](reactTypography.Paragraph)(template
 var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
 var templateObject_1;
 
-/**
- * Use Span to style and format inline text elements.
- * <hr>
- * Used for this:
-    - To apply styles to short strings of text
-    - To include icons inline with text
- * Not for this:
-    - To style an entire block of text, use Paragraph instead
- */
-var Span = function (props) { return jsxRuntime.jsx(reactTypography.Span, __assign({}, props)); };
-
 /**
  *  Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
  */
@@ -555,43 +1139,69 @@ var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assi
 
 exports.Accordion = Accordion;
 exports.Anchor = Anchor;
+exports.AppHeader = AppHeader;
 exports.Avatar = Avatar;
 exports.Blockquote = Blockquote;
+exports.Body = Body$1;
+exports.BrandItem = BrandItem;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.Caption = Caption;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
+exports.Chrome = Chrome;
 exports.Close = Close;
 exports.Code = Code;
 exports.Col = Col;
+exports.Content = Content;
+exports.CursorPagination = CursorPagination;
 exports.Dropdown = Dropdown;
 exports.DropdownField = index$1;
 exports.Ellipsis = Ellipsis;
+exports.FooterItem = FooterItem;
 exports.FormField = index;
 exports.GlobalStyle = GlobalStyle;
 exports.Grid = Grid;
 exports.GroupRow = GroupRow;
+exports.Header = Header;
 exports.HeaderCell = HeaderCell;
+exports.HeaderItem = HeaderItem;
+exports.HeaderItemIcon = HeaderItemIcon;
+exports.HeaderItemText = HeaderItemText;
 exports.HeaderRow = HeaderRow;
+exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Input = Input;
 exports.Item = Item;
 exports.LG = LG;
 exports.Label = Label;
 exports.LoginForm = LoginForm;
+exports.Logo = Logo;
 exports.MD = MD;
+exports.Main = Main;
 exports.Menu = Menu;
 exports.Message = Message;
+exports.Modal = Modal;
 exports.Multiselect = Multiselect;
+exports.Nav = Nav;
+exports.NavDivider = NavDivider;
+exports.NavItem = NavItem;
+exports.NavItemIcon = NavItemIcon;
+exports.NavItemProject = NavItemProject;
+exports.NavItemText = NavItemText;
+exports.NavToggle = NavToggle;
 exports.Notification = Notification;
 exports.OrderedList = OrderedList;
+exports.Pagination = Pagination;
 exports.Paragraph = Paragraph;
+exports.Progress = Progress;
 exports.Radio = Radio;
 exports.Row = Row;
 exports.SM = SM;
 exports.Select = Select;
+exports.Sidebar = Sidebar;
+exports.Skeleton = Skeleton;
 exports.Span = Span;
 exports.Spinner = Spinner;
 exports.SplitButton = SplitButton;
@@ -599,7 +1209,9 @@ exports.Table = Table;
 exports.TableCell = Cell;
 exports.TableHead = Head;
 exports.TableRow = Body;
+exports.Tag = Tag;
 exports.Textarea = Textarea;
+exports.Tiles = Tiles;
 exports.Title = Title;
 exports.ToastProvider = ToastProvider;
 exports.Toggle = Toggle;