@appquality/unguess-design-system 2.8.26 → 2.8.27

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v2.8.27 (Fri Apr 15 2022)
+
+#### 🐛 Bug Fix
+
+- Cup 604 skeleton [#40](https://github.com/AppQuality/unguess-design-system/pull/40) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.8.26 (Fri Apr 15 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.d.ts

@@ -31,6 +31,7 @@ export * from "./stories/label";
 export * from "./stories/loaders/progress";
 export * from "./stories/loaders/skeleton";
 export * from "./stories/loaders/spinner";
+export * from "./stories/page/pageLoader";
 export * from "./stories/login-form";
 export * from "./stories/logo";
 export * from "./stories/modals";

package/build/index.js

@@ -13,13 +13,13 @@ var reactNotifications = require('@zendeskgarden/react-notifications');
 var reactTags = require('@zendeskgarden/react-tags');
 var reactForms = require('@zendeskgarden/react-forms');
 var React = require('react');
+var reactLoaders = require('@zendeskgarden/react-loaders');
 var reactDropdowns = require('@zendeskgarden/react-dropdowns');
 var reactGrid = require('@zendeskgarden/react-grid');
-var reactLoaders = require('@zendeskgarden/react-loaders');
-var formik = require('formik');
+var reactChrome = require('@zendeskgarden/react-chrome');
 var reactTypography = require('@zendeskgarden/react-typography');
+var formik = require('formik');
 var reactModals = require('@zendeskgarden/react-modals');
-var reactChrome = require('@zendeskgarden/react-chrome');
 var reactPagination = require('@zendeskgarden/react-pagination');
 var reactTables = require('@zendeskgarden/react-tables');
 var reactSpring = require('react-spring');
@@ -230,10 +230,10 @@ var gradients = {
     dark: "linear-gradient(90.81deg, ".concat(hex2rgba(palette.blue[800]), " 0%, ").concat(hex2rgba(palette.blue[600]), " 100%);"),
 };
 
-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, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px" }), components: __assign(__assign({}, reactTheming.DEFAULT_THEME.components), { Headers: __assign(__assign({}, reactTheming.DEFAULT_THEME.components.Headers), { height: "64px" }) }), shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
+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, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), components: __assign(__assign({}, reactTheming.DEFAULT_THEME.components), { Headers: __assign(__assign({}, reactTheming.DEFAULT_THEME.components.Headers), { height: "64px" }) }), shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
 
-var GlobalStyle = styled.createGlobalStyle(templateObject_1$O || (templateObject_1$O = __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$O;
+var GlobalStyle = styled.createGlobalStyle(templateObject_1$P || (templateObject_1$P = __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$P;
 
 /**
  * Accordions are headers that can be expanded to reveal content or collapsed to hide it.
@@ -249,7 +249,7 @@ Accordion.Label = reactAccordions.Accordion.Label;
 Accordion.Panel = reactAccordions.Accordion.Panel;
 
 // import useWindowSize from "../../hooks/useWindowSize";
-var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     return "\n    background: ".concat(props.backgroundColor || theme.gradients.dark, ";\n   ");
 });
 /**
@@ -272,7 +272,7 @@ var Avatar = function (props) {
     return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
 };
 Avatar.Text = UgAvatar.Text;
-var templateObject_1$N;
+var templateObject_1$O;
 
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
@@ -293,7 +293,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$M || (templateObject_1$M = __makeTemplateObject([""], [""])));
+var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject([""], [""])));
 /**
  * Buttons let users take action quickly.
  * Use a Button to enable actions or decisions that are important to a user’s workflow.
@@ -305,7 +305,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$M;
+var templateObject_1$N;
 
 /**
 A Button group lets users make a selection from a set of options.
@@ -358,13 +358,13 @@ var Tag = function (props) { return jsxRuntime.jsx(reactTags.Tag, __assign({}, p
 Tag.Avatar = reactTags.Tag.Avatar;
 Tag.Close = reactTags.Tag.Close;
 
-var UgLabel = styled__default["default"](reactForms.Label)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
+var UgLabel = styled__default["default"](reactForms.Label)(templateObject_1$M || (templateObject_1$M = __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$L;
+var templateObject_1$M;
 
 var _g$4, _path$p, _path2$7, _path3$6, _path4$4, _path5$3, _path6$3, _path7$3, _path8$3, _path9$3, _path10$3, _path11$2;
 
@@ -571,6 +571,27 @@ var SvgArrivalStatusRoundIcon = function SvgArrivalStatusRoundIcon(props) {
   })));
 };
 
+var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", ";\n"], ["\n  background-color: ", ";\n  border-radius: ", ";\n"])), function (props) { return props.theme.palette.grey[500]; }, function (props) { return props.theme.borderRadii.xxl; });
+/**
+ * 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$L;
+
+var CampaignCardSkeleton = function () {
+    return (jsxRuntime.jsxs(Wrapper, { children: [jsxRuntime.jsx(CardHeader, { children: jsxRuntime.jsx(Skeleton, { width: "30%" }) }), jsxRuntime.jsxs(CardBody, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "50%" }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Skeleton, { height: "26px", style: { backgroundColor: theme.palette.blue[400] } })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsxs(CardFooter, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "45%" }), " ", jsxRuntime.jsx(Skeleton, { width: "26px", height: "26px", style: { borderRadius: "100%" } })] })] }));
+};
+
 var getStatusIcon = function (status) {
     switch (status) {
         case "COMPLETED":
@@ -593,7 +614,7 @@ var getTypeData = function (type) {
             };
     }
 };
-var Wrapper = styled__default["default"](Card)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n\n  border-radius: ", ";\n  padding: 1rem;\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  cursor: pointer;\n"], ["\n\n  border-radius: ", ";\n  padding: 1rem;\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  cursor: pointer;\n"])), theme.borderRadii.lg, theme.palette.grey["200"], theme.shadows.boxShadow(theme));
+var Wrapper = styled__default["default"](Card)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: 1rem;\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  cursor: pointer;\n"], ["\n  border-radius: ", ";\n  padding: 1rem;\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  cursor: pointer;\n"])), theme.borderRadii.lg, theme.palette.grey["200"], theme.shadows.boxShadow(theme));
 var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  color: ", ";\n  max-width: 75%;\n  cursor: pointer;\n"], ["\n  color: ", ";\n  max-width: 75%;\n  cursor: pointer;\n"])), theme.palette.grey["700"]);
 var StyledTagNew = styled__default["default"](Tag)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  height: ", "px;\n  padding: ", "px ", "px;\n  color: ", ";\n"], ["\n  height: ", "px;\n  padding: ", "px ", "px;\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -621,8 +642,7 @@ var CampaignCard = function (props) {
     if (campaignTitle.length > 29) {
         campaignTitleCut = "".concat(campaignTitle.substring(0, 26), "...");
     }
-    return jsxRuntime.jsxs(Wrapper, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel, __assign({ isRegular: true }, { children: date })), isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(CardBody, { children: [jsxRuntime.jsx(StyledLabel, __assign({ isRegular: true }, { children: projectTitleCut })), jsxRuntime.jsx(StyledTitleLabel, __assign({ isRegular: true }, { children: campaignTitleCut }))] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsxs(CardFooter, { children: [typeData &&
-                        jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), props.pillText] })), jsxRuntime.jsx(StatusIcon, {})] })] }));
+    return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel, __assign({ isRegular: true }, { children: date })), isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(CardBody, { children: [jsxRuntime.jsx(StyledLabel, __assign({ isRegular: true }, { children: projectTitleCut })), jsxRuntime.jsx(StyledTitleLabel, __assign({ isRegular: true }, { children: campaignTitleCut }))] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsxs(CardFooter, { children: [typeData && (jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), props.pillText] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
 };
 var templateObject_1$K, templateObject_2$c, templateObject_3$7, templateObject_4$3, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
 
@@ -1104,24 +1124,7 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
 var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
 var templateObject_1$w;
 
-var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$v || (templateObject_1$v = __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$v;
-
-var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject([""], [""])));
+var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject([""], [""])));
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
  * <hr>
@@ -1130,28 +1133,28 @@ 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$u;
+var templateObject_1$v;
 
+var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.palette.white;
+});
 /**
- * Title is a basic component used to display a title. Often used in card headers.
+ * A Body defines the main content of an HTML document which displays on the browser
  */
-var Title = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
+var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
+var templateObject_1$u;
 
 /**
- *  Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
+ * A Content defines the main content of an HTML document which displays on the browser
  */
-var SM = function (props) { return jsxRuntime.jsx(reactTypography.SM, __assign({}, props)); };
-var MD = function (props) { return jsxRuntime.jsx(reactTypography.MD, __assign({}, props)); };
-var LG = function (props) { return jsxRuntime.jsx(reactTypography.LG, __assign({}, props)); };
-var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({}, props)); };
-var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
-var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
+var Content = function (props) { return jsxRuntime.jsx(reactChrome.Content, __assign({}, props)); };
 
 var _path$c;
 
 function _extends$e() { _extends$e = 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$e.apply(this, arguments); }
 
-var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
+var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
@@ -1160,40 +1163,25 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
     viewBox: "0 0 16 16"
   }, props), _path$c || (_path$c = /*#__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"
+    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"
   })));
 };
 
-/**
- * Login Form
- * <hr>
- * Used for this:
-    - Login user to the application
- */
-var LoginForm = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Card, __assign({ isFloating: true }, props.card, { children: [jsxRuntime.jsx(Title, __assign({ style: {
-                        textAlign: "center",
-                        marginTop: theme.space.sm,
-                        marginBottom: theme.space.lg,
-                    } }, { children: jsxRuntime.jsx(XL, __assign({ style: { color: theme.palette.blue[600] } }, { 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, status = _a.status, 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 }))), props.passwordForgotLink && (jsxRuntime.jsx(reactForms.Hint, __assign({ style: { textAlign: "right" } }, { children: jsxRuntime.jsx(Anchor, __assign({ href: props.passwordForgotLink, style: { color: theme.palette.grey[500] } }, { children: props.passwordForgotLabel || "Forgot Password?" })) })))] })), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Button, __assign({ type: "submit", isStretched: true, disabled: Object.keys(errors).length
-                                        ? true
-                                        : isSubmitting
-                                            ? true
-                                            : false, isPrimary: true, style: { marginBottom: theme.space.md } }, { children: props.buttonText })), status && (jsxRuntime.jsx("div", __assign({ style: { textAlign: "center" } }, { children: jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: status.message })) })))] })));
-                    } }))] })), props.onBackClick && (jsxRuntime.jsxs(Button, __assign({ onClick: props.onBackClick, isBasic: true, style: { marginTop: theme.space.md } }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) }), props.backToLabel || "Back to UNGUESS"] })))] })); };
+var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  ", ";\n  font-family: ", ";\n"], ["\n  ", ";\n  font-family: ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; }, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.system;
+});
+var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
+var templateObject_1$t;
+
+var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n    font-family: ", ";\n"], ["\n    font-family: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.system;
+});
+var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
+var templateObject_1$s;
+
+var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
 
 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";
 
@@ -1221,48 +1209,6 @@ var Logo = function (props) {
         }[props.type] })));
 };
 
-var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$t || (templateObject_1$t = __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$t;
-
-var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.palette.white;
-});
-/**
- * A Body defines the main content of an HTML document which displays on the browser
- */
-var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
-var templateObject_1$s;
-
-/**
- * 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$r || (templateObject_1$r = __makeTemplateObject(["\n  ", ";\n  font-family: ", ";\n"], ["\n  ", ";\n  font-family: ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; }, function (_a) {
-    var theme = _a.theme;
-    return theme.fonts.system;
-});
-var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
-var templateObject_1$r;
-
-var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n    font-family: ", ";\n"], ["\n    font-family: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.fonts.system;
-});
-var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
-var templateObject_1$q;
-
-var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
-
 var _path$b;
 
 function _extends$d() { _extends$d = 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$d.apply(this, arguments); }
@@ -1282,7 +1228,7 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
   })));
 };
 
-var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$p || (templateObject_1$p = __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 LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$r || (templateObject_1$r = __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;
 });
@@ -1306,9 +1252,9 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
 var BrandItem = function (props) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(MenuItem$1, __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$p, templateObject_2$b, templateObject_3$6;
+var templateObject_1$r, templateObject_2$b, templateObject_3$6;
 
-var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n    height: ", ";\n"], ["\n    height: ", ";\n"])), theme.components.Headers.height);
+var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n    height: ", ";\n"], ["\n    height: ", ";\n"])), theme.components.Headers.height);
 /**
  * An Header is a visual way to display general information.
  * This can include navList Items, modal, profile settings.
@@ -1317,26 +1263,13 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
 Header.HeaderItem = HeaderItem;
 Header.HeaderItemText = HeaderItemText;
 Header.HeaderItemIcon = HeaderItemIcon;
-var templateObject_1$o;
-
-var _path$a;
-
-function _extends$c() { _extends$c = 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$c.apply(this, arguments); }
+var templateObject_1$q;
 
-var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
-  }, props), _path$a || (_path$a = /*#__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 HeaderSkeleton = function () {
+    return (jsxRuntime.jsxs(Header, __assign({ isStandalone: true }, { children: [jsxRuntime.jsx(LogoIconContainer, __assign({ hasLogo: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }) })), jsxRuntime.jsx(HeaderItem, __assign({ style: { marginRight: "auto", marginLeft: "-4px" } }, { children: jsxRuntime.jsx(Skeleton, { width: "200px", height: theme.space.sm }) })), jsxRuntime.jsx(HeaderItem, __assign({ isRound: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) }) }) }))] })));
 };
 
-var ChevronButton = styled__default["default"](IconButton)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  @media (max-width: ", ") {\n    display: none;\n  }\n"], ["\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), function (_a) {
+var ChevronButton = styled__default["default"](IconButton)(templateObject_1$p || (templateObject_1$p = __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;
 });
@@ -1345,25 +1278,12 @@ var ChevronButton = styled__default["default"](IconButton)(templateObject_1$n ||
  * 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 && args.changelogItem && (jsxRuntime.jsx(HeaderItem, __assign({ style: { marginRight: "-" + theme.space.sm } }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: args.changelogItem }) }))), jsxRuntime.jsx(HeaderItem, __assign({ isRound: true, onClick: args.onProfileModalToggle }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Avatar, __assign({}, avatar)), jsxRuntime.jsx(ChevronButton, __assign({ size: "small", isRotated: args.isProfileModalOpen }, { children: jsxRuntime.jsx(SvgChevronDownStroke, {}) }))] }) }) }))] })));
+    var brand = _a.brand, avatar = _a.avatar, isLoading = _a.isLoading, args = __rest(_a, ["brand", "avatar", "isLoading"]);
+    return isLoading ? jsxRuntime.jsx(HeaderSkeleton, {}) : (jsxRuntime.jsxs(Header, __assign({}, args, { children: [jsxRuntime.jsx(BrandItem, __assign({}, brand, { toggleMenu: args.onSidebarMenuToggle })), args.hasChangelog && args.changelogItem && (jsxRuntime.jsx(HeaderItem, __assign({ style: { marginRight: "-" + theme.space.xs } }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: args.changelogItem }) }))), jsxRuntime.jsx(HeaderItem, __assign({ isRound: true, onClick: args.onProfileModalToggle }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Avatar, __assign({}, avatar)), jsxRuntime.jsx(ChevronButton, __assign({ size: "small", isRotated: args.isProfileModalOpen }, { children: jsxRuntime.jsx(SvgChevronDownStroke, {}) }))] }) }) }))] })));
 };
-var templateObject_1$n;
+var templateObject_1$p;
 
-var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  @media (min-width: ", ") {\n    margin: ", "\n  }\n  \n  /* hide scrollbar for IE, Edge and Firefox */\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  \n"], ["\n  @media (min-width: ", ") {\n    margin: ", "\n  }\n  \n  /* hide scrollbar for IE, Edge and Firefox */\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  \n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.breakpoints.sm;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.space.xxl;
-});
-/**
- * A Main defines the main content of an HTML document which displays on the browser
- */
-var Main = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
-var templateObject_1$m;
-
-var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  border-right: ", ";\n  border-color: ", ";\n  ", "\n  transition: width 0.25s ease-in-out;\n  padding-top: ", ";\n  padding-left: ", ";\n"], ["\n  border-right: ", ";\n  border-color: ", ";\n  ", "\n  transition: width 0.25s ease-in-out;\n  padding-top: ", ";\n  padding-left: ", ";\n"])), function (_a) {
+var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  border-right: ", ";\n  border-color: ", ";\n  ", "\n  transition: width 0.25s ease-in-out;\n  padding-top: ", ";\n  padding-left: ", ";\n"], ["\n  border-right: ", ";\n  border-color: ", ";\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) {
@@ -1385,9 +1305,9 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$l || (t
     - To give a consistent dashboard and navigation experience
  */
 var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
-var templateObject_1$l;
+var templateObject_1$o;
 
-var SelectedItemStyle = styled.css(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (props) { return props.theme.palette.kale["100"]; });
+var SelectedItemStyle = styled.css(templateObject_1$n || (templateObject_1$n = __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$a || (templateObject_2$a = __makeTemplateObject(["\n  border-top-left-radius: ", "px;\n  border-bottom-left-radius: ", "px;\n  font-family: ", ";\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  font-family: ", ";\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 (_a) {
     var theme = _a.theme;
     return theme.fonts.system;
@@ -1399,11 +1319,11 @@ var NavItem = function (props) {
     // const { isExpanded } = props;
     return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
 };
-var templateObject_1$k, templateObject_2$a;
+var templateObject_1$n, templateObject_2$a;
 
-var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject([""], [""])));
+var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$m || (templateObject_1$m = __makeTemplateObject([""], [""])));
 var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
-var templateObject_1$j;
+var templateObject_1$m;
 
 /**
  *  Use Ellipsis to automatically provide text content with a native title attribute and text-overflow styling.
@@ -1412,11 +1332,28 @@ var Ellipsis = function (props) { return jsxRuntime.jsx(reactTypography.Ellipsis
 
 var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "200px" } }, { children: props.children })) }))); };
 
+var _path$a;
+
+function _extends$c() { _extends$c = 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$c.apply(this, arguments); }
+
+var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16"
+  }, props), _path$a || (_path$a = /*#__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$9;
 
 function _extends$b() { _extends$b = 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$b.apply(this, arguments); }
 
-var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
+var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
@@ -1425,11 +1362,11 @@ var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
     viewBox: "0 0 16 16"
   }, props), _path$9 || (_path$9 = /*#__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"
+    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$i || (templateObject_1$i = __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 StyledToggle = styled__default["default"](IconButton)(templateObject_1$l || (templateObject_1$l = __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) {
@@ -1454,18 +1391,18 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$i ||
 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$i;
+var templateObject_1$l;
 
-var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$h || (templateObject_1$h = __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 UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$k || (templateObject_1$k = __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, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
-var templateObject_1$h;
+var templateObject_1$k;
 
-var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$g || (templateObject_1$g = __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 UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$j || (templateObject_1$j = __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$9 || (templateObject_2$9 = __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$g, templateObject_2$9;
+var templateObject_1$j, templateObject_2$9;
 
 var _path$8;
 
@@ -1563,7 +1500,12 @@ var SvgToken = function SvgToken(props) {
  */
 var Span = function (props) { return jsxRuntime.jsx(reactTypography.Span, __assign({}, props)); };
 
-var TokenContainer = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __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"])));
+var LoadingSidebar = function () {
+    var isExpanded = true;
+    return (jsxRuntime.jsxs(Nav, __assign({ style: { width: "250px" } }, { children: [jsxRuntime.jsx(NavToggle, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: isExpanded, isCurrent: true }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) })), jsxRuntime.jsx(Skeleton, { height: "12px", width: "60%" }), jsxRuntime.jsx(NavItemText, {})] })), jsxRuntime.jsx(NavDivider, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 1), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 2), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 3), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 3), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none" } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
+};
+
+var TokenContainer = styled__default["default"].div(templateObject_1$i || (templateObject_1$i = __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"])));
 var ScrollingContainer = styled__default["default"].div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  order: 1;\n  overflow-y: auto;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  order: 1;\n  overflow-y: auto;\n  height: 100%;\n"])));
 /**
  * The UNGUESS Sidebar component provides a high-level layout structure and sets a framework for navigating around projects.
@@ -1580,10 +1522,86 @@ var Sidebar = function (props) {
         props.onNavToggle && props.onNavToggle(route);
         setNav(route);
     };
-    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: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: function () { return navigate("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 || "" })), jsxRuntime.jsx(ScrollingContainer, { children: props.projects &&
+    return props.isLoading ? jsxRuntime.jsx(LoadingSidebar, {}) : (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: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: function () { return navigate("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 || "" })), jsxRuntime.jsx(ScrollingContainer, { children: props.projects &&
                     props.projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: props.isExpanded, isCurrent: nav === project.id, onClick: function () { return navigate(project.id); } }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id)); }) }), 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$f, templateObject_2$8;
+var templateObject_1$i, templateObject_2$8;
+
+var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  @media (min-width: ", ") {\n    margin: ", "\n  }\n  \n  /* hide scrollbar for IE, Edge and Firefox */\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  \n"], ["\n  @media (min-width: ", ") {\n    margin: ", "\n  }\n  \n  /* hide scrollbar for IE, Edge and Firefox */\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  \n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.breakpoints.sm;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.space.xxl;
+});
+/**
+ * A Main defines the main content of an HTML document which displays on the browser
+ */
+var Main = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
+var templateObject_1$h;
+
+var StyledHr = styled__default["default"].hr(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  margin: ", "px 0 ", "px 0;\n  border: none;\n  border-top: 1px solid ", ";\n"], ["\n  margin: ", "px 0 ", "px 0;\n  border: none;\n  border-top: 1px solid ", ";\n"])), theme.space.base * 6, theme.space.base * 8, theme.palette.grey[300]);
+var PageLoader = function () {
+    return (jsxRuntime.jsx(reactChrome.Chrome, __assign({ isFluid: true, hue: theme.palette.white }, { children: jsxRuntime.jsxs(Body$1, { children: [jsxRuntime.jsx(AppHeader, { isLoading: true }), jsxRuntime.jsxs(Content, { children: [jsxRuntime.jsx(Sidebar, { isLoading: true }), jsxRuntime.jsxs(Main, { children: [jsxRuntime.jsx(Skeleton, { width: "30%", height: "32px" }), jsxRuntime.jsx(StyledHr, { style: { margin: "24px 0" } }), jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(Col, __assign({ size: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ size: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ size: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ size: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) }))] })] })] })] }) })));
+};
+var templateObject_1$g;
+
+/**
+ * Title is a basic component used to display a title. Often used in card headers.
+ */
+var Title = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
+
+/**
+ *  Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
+ */
+var SM = function (props) { return jsxRuntime.jsx(reactTypography.SM, __assign({}, props)); };
+var MD = function (props) { return jsxRuntime.jsx(reactTypography.MD, __assign({}, props)); };
+var LG = function (props) { return jsxRuntime.jsx(reactTypography.LG, __assign({}, props)); };
+var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({}, props)); };
+var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
+var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
+
+/**
+ * Login Form
+ * <hr>
+ * Used for this:
+    - Login user to the application
+ */
+var LoginForm = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Card, __assign({ isFloating: true }, props.card, { children: [jsxRuntime.jsx(Title, __assign({ style: {
+                        textAlign: "center",
+                        marginTop: theme.space.sm,
+                        marginBottom: theme.space.lg,
+                    } }, { children: jsxRuntime.jsx(XL, __assign({ style: { color: theme.palette.blue[600] } }, { 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, status = _a.status, 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 }))), props.passwordForgotLink && (jsxRuntime.jsx(reactForms.Hint, __assign({ style: { textAlign: "right" } }, { children: jsxRuntime.jsx(Anchor, __assign({ href: props.passwordForgotLink, style: { color: theme.palette.grey[500] } }, { children: props.passwordForgotLabel || "Forgot Password?" })) })))] })), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Button, __assign({ type: "submit", isStretched: true, disabled: Object.keys(errors).length
+                                        ? true
+                                        : isSubmitting
+                                            ? true
+                                            : false, isPrimary: true, style: { marginBottom: theme.space.md } }, { children: props.buttonText })), status && (jsxRuntime.jsx("div", __assign({ style: { textAlign: "center" } }, { children: jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: status.message })) })))] })));
+                    } }))] })), props.onBackClick && (jsxRuntime.jsxs(Button, __assign({ onClick: props.onBackClick, isBasic: true, style: { marginTop: theme.space.md } }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) }), props.backToLabel || "Back to UNGUESS"] })))] })); };
+
+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;
 
 /**
  * The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
@@ -2083,6 +2101,9 @@ exports.ButtonGroup = ButtonGroup;
 exports.CampaignCard = CampaignCard;
 exports.Caption = Caption;
 exports.Card = Card;
+exports.CardBody = CardBody;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
 exports.Checkbox = Checkbox;
 exports.Chrome = Chrome;
 exports.Close = Close;
@@ -2091,6 +2112,7 @@ exports.Col = Col;
 exports.Content = Content;
 exports.Counter = Counter;
 exports.CursorPagination = CursorPagination;
+exports.Divider = Divider;
 exports.Dropdown = Dropdown;
 exports.DropdownField = index$1;
 exports.Ellipsis = Ellipsis;
@@ -2135,6 +2157,7 @@ exports.NavToggle = NavToggle;
 exports.NextItem = NextItem;
 exports.Notification = Notification;
 exports.OrderedList = OrderedList;
+exports.PageLoader = PageLoader;
 exports.Pagination = Pagination;
 exports.Paragraph = Paragraph;
 exports.PreviousItem = PreviousItem;
@@ -2163,6 +2186,7 @@ exports.ToastProvider = ToastProvider;
 exports.Toggle = Toggle;
 exports.Trigger = Trigger;
 exports.UnorderedList = UnorderedList;
+exports.Wrapper = Wrapper;
 exports.XL = XL;
 exports.XXL = XXL;
 exports.XXXL = XXXL;

package/build/stories/campaignCards/_types.d.ts

@@ -40,4 +40,5 @@ export interface CampaignCardsProps extends CardProps {
      * this renders the new flag label
      */
     labelNew?: string;
+    isLoading?: boolean;
 }

package/build/stories/campaignCards/index.d.ts

@@ -1,4 +1,9 @@
 /// <reference types="react" />
 import { CampaignCardsProps } from "./_types";
+export declare const Wrapper: import("styled-components").StyledComponent<(props: import("../cards/_types").CardProps) => JSX.Element, any, {}, never>;
+export declare const Divider: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardBody: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const CampaignCard: (props: CampaignCardsProps) => JSX.Element;
 export { CampaignCard };

package/build/stories/campaignCards/skeleton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const CampaignCardSkeleton: () => JSX.Element;

package/build/stories/navigation/app-header/_types.d.ts

@@ -19,4 +19,5 @@ export interface AppHeaderArgs extends HeaderArgs {
     onSidebarMenuToggle?: () => void;
     /** Callback when the Logo Item is clicked */
     onLogoItemClick?: () => void;
+    isLoading?: boolean;
 }

package/build/stories/navigation/app-header/index.d.ts

@@ -4,5 +4,5 @@ import { AppHeaderArgs } from "./_types";
  * An Header is a visual way to display general information.
  * This can include navList Items, modal, profile settings.
  */
-declare const AppHeader: ({ brand, avatar, ...args }: AppHeaderArgs) => JSX.Element;
+declare const AppHeader: ({ brand, avatar, isLoading, ...args }: AppHeaderArgs) => JSX.Element;
 export { AppHeader };

package/build/stories/navigation/app-header/index.stories.d.ts

@@ -2,5 +2,5 @@
 import { ComponentMeta, Story } from "@storybook/react";
 import { AppHeaderArgs } from "./_types";
 export declare const Default: Story<AppHeaderArgs>;
-declare const _default: ComponentMeta<({ brand, avatar, ...args }: AppHeaderArgs) => JSX.Element>;
+declare const _default: ComponentMeta<({ brand, avatar, isLoading, ...args }: AppHeaderArgs) => JSX.Element>;
 export default _default;

package/build/stories/navigation/app-header/skeleton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const HeaderSkeleton: () => JSX.Element;

package/build/stories/navigation/header/header-item/brandItem.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
 import { BrandItemArgs } from "./_types";
+export declare const LogoIconContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-chrome").IHeaderItemProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
 declare const BrandItem: (props: BrandItemArgs) => JSX.Element;
 export { BrandItem };

package/build/stories/navigation/sidebar/_types.d.ts

@@ -9,6 +9,7 @@ export interface SidebarArgs extends NavArgs {
     isExpanded?: boolean;
     onToggleMenu?: () => void;
     onNavToggle?: (route: string) => void;
+    isLoading?: boolean;
 }
 export interface ProjectItem {
     id: string;

package/build/stories/navigation/sidebar/skeleton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LoadingSidebar: () => JSX.Element;

package/build/stories/page/index.d.ts

@@ -4,5 +4,6 @@ import { AppHeaderArgs } from "../navigation/app-header/_types";
 export interface PageTemplatesArgs {
     sidebar?: SidebarArgs;
     header?: AppHeaderArgs;
+    isLoading?: boolean;
 }
 export declare const PageTemplate: ({ sidebar, header, ...args }: PageTemplatesArgs) => JSX.Element;

package/build/stories/page/pageLoader.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PageLoader: () => JSX.Element;

package/build/stories/theme/index.d.ts

@@ -150,6 +150,8 @@ declare const theme: {
     };
     borderRadii: {
         lg: string;
+        xl: string;
+        xxl: string;
         sm: string;
         md: string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.8.26",
+  "version": "2.8.27",
   "dependencies": {
     "@zendeskgarden/react-accordions": "^8.49.0",
     "@zendeskgarden/react-avatars": "^8.49.0",