@appquality/unguess-design-system 2.6.2 → 2.8.0

package/build/index.js

@@ -22,6 +22,7 @@ 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');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -231,8 +232,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, 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 GlobalStyle = styled.createGlobalStyle(templateObject_1$B || (templateObject_1$B = __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$B;
+var GlobalStyle = styled.createGlobalStyle(templateObject_1$L || (templateObject_1$L = __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$L;
 
 /**
  * Accordions are headers that can be expanded to reveal content or collapsed to hide it.
@@ -248,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$A || (templateObject_1$A = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     return "\n    background: ".concat(props.backgroundColor || theme.gradients.dark, ";\n   ");
 });
 /**
@@ -271,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$A;
+var templateObject_1$K;
 
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
@@ -292,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$z || (templateObject_1$z = __makeTemplateObject([""], [""])));
+var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject([""], [""])));
 /**
  * Buttons let users take action quickly.
  * Use a Button to enable actions or decisions that are important to a user’s workflow.
@@ -304,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$z;
+var templateObject_1$J;
 
 /**
 A Button group lets users make a selection from a set of options.
@@ -357,20 +358,20 @@ 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$y || (templateObject_1$y = __makeTemplateObject([""], [""])));
+var UgLabel = styled__default["default"](reactForms.Label)(templateObject_1$I || (templateObject_1$I = __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$y;
+var templateObject_1$I;
 
-var _g$4, _path$j, _path2$8, _path3$6, _path4$4, _path5$3, _path6$3, _path7$3, _path8$3, _path9$3, _path10$3, _path11$2;
+var _g$4, _path$q, _path2$8, _path3$6, _path4$4, _path5$3, _path6$3, _path7$3, _path8$3, _path9$3, _path10$3, _path11$2;
 
-function _extends$k() { _extends$k = 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$k.apply(this, arguments); }
+function _extends$s() { _extends$s = 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$s.apply(this, arguments); }
 
 var SvgFunctionalTestRoundIcon = function SvgFunctionalTestRoundIcon(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -382,7 +383,7 @@ var SvgFunctionalTestRoundIcon = function SvgFunctionalTestRoundIcon(props) {
     opacity: 0.3,
     d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z",
     fill: "#003A57"
-  }))), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
+  }))), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M12.4871 3.1964C8.68009 3.1964 5.59901 6.27748 5.59901 10.0844C5.59901 10.2596 5.59901 10.4347 5.62445 10.5854C5.29863 11.1861 4.82313 12.0129 4.24684 12.5138C3.82123 12.8896 3.92102 13.2907 3.97091 13.4404C4.09615 13.7662 4.44641 14.0411 5.02271 14.2417C5.22328 14.3171 5.44831 14.367 5.64889 14.4169L5.67433 16.8463C5.67433 17.7983 6.47565 18.625 7.4531 18.625L8.9305 18.1495L9.08117 19.0262C9.18097 19.6025 9.68191 20.0281 10.2837 20.0281C10.359 20.0281 10.4343 20.0281 10.5087 20.0026L15.1425 19.1769C15.8185 19.0516 16.2441 18.4254 16.1444 17.7494L15.8185 16.1213C17.9975 14.9188 19.375 12.5891 19.375 10.0843C19.375 6.30267 16.2696 3.19629 12.487 3.19629L12.4871 3.1964Z",
     fill: "#003A57",
     stroke: "#003A57"
@@ -439,12 +440,12 @@ var SvgFunctionalTestRoundIcon = function SvgFunctionalTestRoundIcon(props) {
   })));
 };
 
-var _g$3, _path$i;
+var _g$3, _path$p;
 
-function _extends$j() { _extends$j = 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$j.apply(this, arguments); }
+function _extends$r() { _extends$r = 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$r.apply(this, arguments); }
 
 var SvgRegressionTestRoundIcon = function SvgRegressionTestRoundIcon(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -456,18 +457,18 @@ var SvgRegressionTestRoundIcon = function SvgRegressionTestRoundIcon(props) {
     opacity: 0.3,
     d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z",
     fill: "#003A57"
-  }))), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
+  }))), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M17.9983 7.16705C17.5188 6.58566 17.1422 6.73039 17.1422 6.73039C17.1422 6.73039 16.406 7.02453 16.0401 7.16303C15.6742 7.30153 15.2408 7.17357 15.2408 7.17357L14.7579 6.8851C14.7579 6.8851 14.4296 6.56554 14.3656 6.18067C14.3123 5.78958 14.1888 5.00269 14.1888 5.00269C14.1888 5.00269 14.1356 4.61159 13.3938 4.47257C12.652 4.33356 12.4678 4.68715 12.4678 4.68715C12.4678 4.68715 12.0932 5.38344 11.9091 5.73703C11.7249 6.09062 11.3114 6.27118 11.3114 6.27118L10.7639 6.36908C10.7639 6.36908 10.3144 6.33771 10.0176 6.07271L9.12712 5.27769C9.12712 5.27769 8.8303 5.01268 8.18313 5.38632C7.53595 5.75997 7.61705 6.14953 7.61705 6.14953L7.86033 7.3182C7.94143 7.70776 7.74381 8.11275 7.74381 8.11275L7.38528 8.53794C7.38528 8.53794 7.02217 8.80577 6.62387 8.78845C6.22557 8.77114 5.43527 8.7474 5.43527 8.7474C5.43527 8.7474 5.03697 8.73009 4.78646 9.44201C4.53595 10.1539 4.84804 10.3956 4.84804 10.3956C4.84804 10.3956 5.46774 10.896 5.77983 11.1376C6.09192 11.3793 6.19373 11.8296 6.19373 11.8296L6.20207 12.3921C6.20207 12.3921 6.09618 12.8314 5.79331 13.079C5.49043 13.3266 4.86759 13.8171 4.86759 13.8171C4.86759 13.8171 4.56471 14.0647 4.81769 14.7769C5.08144 15.4828 5.46713 15.4783 5.46713 15.4783C5.46713 15.4783 6.26012 15.4569 6.64582 15.4524C7.03152 15.4479 7.40116 15.7145 7.40116 15.7145L7.76458 16.1447C7.76458 16.1447 7.96976 16.5499 7.89441 16.9425C7.81907 17.3351 7.66208 18.1094 7.66208 18.1094C7.66208 18.1094 7.58674 18.502 8.23785 18.8824C8.88895 19.2629 9.18553 19.0044 9.18553 19.0044C9.18553 19.0044 9.7724 18.4765 10.069 18.218C10.3655 17.9595 10.8115 17.9347 10.8115 17.9347L11.3609 18.0394C11.3609 18.0394 11.77 18.225 11.9608 18.5803C12.1516 18.9356 12.5268 19.6354 12.5268 19.6354C12.5268 19.6354 12.7176 19.9907 13.4583 19.8539C14.1946 19.7343 14.2529 19.337 14.2529 19.337C14.2529 19.337 14.3586 18.5487 14.4232 18.1623C14.4814 17.765 14.8086 17.4598 14.8086 17.4598L15.2939 17.1796C15.2939 17.1796 15.7281 17.0598 16.095 17.1971C16.4682 17.3453 17.1975 17.637 17.1975 17.637C17.1975 17.637 17.5707 17.7851 18.0424 17.2073C18.5142 16.6295 18.3189 16.2913 18.3189 16.2913C18.3189 16.2913 17.9006 15.6164 17.6882 15.2736C17.4759 14.9307 17.5197 14.4836 17.5197 14.4836L17.7038 13.9555C17.7038 13.9555 17.9482 13.5816 18.3203 13.454C18.6925 13.3264 19.4431 13.0822 19.4431 13.0822C19.4431 13.0822 19.8153 12.9546 19.8113 12.2005C19.8074 11.4464 19.4297 11.3153 19.4297 11.3153C19.4297 11.3153 18.6807 11.0641 18.303 10.9331C17.9253 10.802 17.677 10.4217 17.677 10.4217L17.4861 9.8919C17.4861 9.8919 17.4293 9.4447 17.6368 9.1067C17.8443 8.7687 18.2486 8.09891 18.2486 8.09891C18.2486 8.09891 18.4778 7.74844 17.9983 7.16707L17.9983 7.16705ZM9.33902 8.38466L10.6176 10.5992C10.0433 11.149 9.82793 11.9715 10.0567 12.7413L7.86713 14.0054C6.98868 12.0106 7.60355 9.66286 9.33905 8.38457L9.33902 8.38466ZM13.9748 16.414C11.9998 17.2778 9.65918 16.6363 8.37099 14.8783L10.5605 13.6141C11.1128 14.1971 11.9329 14.4219 12.6961 14.1994L13.9748 16.414ZM12.6552 13.132C12.1159 13.4434 11.4325 13.2561 11.1176 12.7107C10.8027 12.1652 10.9822 11.4797 11.5215 11.1684C12.0608 10.857 12.7441 11.0443 13.0591 11.5897C13.374 12.1352 13.1945 12.8207 12.6552 13.132ZM14.8376 15.9158L13.5591 13.7012C14.1333 13.1515 14.3487 12.3289 14.12 11.5591L16.3095 10.295C17.188 12.2898 16.5731 14.6376 14.8376 15.9159L14.8376 15.9158ZM13.6161 10.6863C13.0638 10.1034 12.2437 9.87862 11.4805 10.1011L10.2019 7.88652C12.1769 7.02266 14.5112 7.65314 15.8057 9.42223L13.6161 10.6863Z",
     fill: "#003A57"
   })));
 };
 
-var _circle$2, _path$h, _path2$7, _path3$5;
+var _circle$2, _path$o, _path2$7, _path3$5;
 
-function _extends$i() { _extends$i = 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$i.apply(this, arguments); }
+function _extends$q() { _extends$q = 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$q.apply(this, arguments); }
 
 var SvgCompletedStatusRoundIcon = function SvgCompletedStatusRoundIcon(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     width: 32,
     height: 32,
     viewBox: "0 0 32 32",
@@ -478,7 +479,7 @@ var SvgCompletedStatusRoundIcon = function SvgCompletedStatusRoundIcon(props) {
     cy: 16,
     r: 16,
     fill: "#F8F9F9"
-  })), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M24.6953 9.73905C25.0148 9.41953 25.0148 8.90149 24.6953 8.58197C24.3758 8.26245 23.8577 8.26245 23.5382 8.58197L15.88 16.2402L14.0849 13.9598C13.8054 13.6048 13.291 13.5435 12.9359 13.823C12.5809 14.1025 12.5196 14.6169 12.7991 14.972L15.1642 17.9763C15.3089 18.16 15.5252 18.2731 15.7586 18.2869C15.9921 18.3008 16.2203 18.2141 16.3856 18.0487L24.6953 9.73905Z",
     fill: "#27DD70"
   })), _path2$7 || (_path2$7 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -490,12 +491,12 @@ var SvgCompletedStatusRoundIcon = function SvgCompletedStatusRoundIcon(props) {
   })));
 };
 
-var _circle$1, _path$g, _path2$6, _path3$4, _path4$3, _path5$2, _path6$2, _path7$2, _path8$2, _path9$2, _path10$2;
+var _circle$1, _path$n, _path2$6, _path3$4, _path4$3, _path5$2, _path6$2, _path7$2, _path8$2, _path9$2, _path10$2;
 
-function _extends$h() { _extends$h = 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$h.apply(this, arguments); }
+function _extends$p() { _extends$p = 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$p.apply(this, arguments); }
 
 var SvgOnGoingStatusRoundIcon = function SvgOnGoingStatusRoundIcon(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
     width: 32,
     height: 32,
     viewBox: "0 0 32 32",
@@ -506,7 +507,7 @@ var SvgOnGoingStatusRoundIcon = function SvgOnGoingStatusRoundIcon(props) {
     cy: 16,
     r: 16,
     fill: "#F8F9F9"
-  })), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M17.059 20.7647C17.059 20.1799 16.585 19.7059 16.0002 19.7059C15.4154 19.7059 14.9414 20.1799 14.9414 20.7647V23.9412C14.9414 24.5259 15.4154 25 16.0002 25C16.585 25 17.059 24.5259 17.059 23.9412V20.7647Z",
     fill: "#D1820A"
   })), _path2$6 || (_path2$6 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -539,12 +540,12 @@ var SvgOnGoingStatusRoundIcon = function SvgOnGoingStatusRoundIcon(props) {
   })));
 };
 
-var _circle, _path$f, _path2$5;
+var _circle, _path$m, _path2$5;
 
-function _extends$g() { _extends$g = 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$g.apply(this, arguments); }
+function _extends$o() { _extends$o = 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$o.apply(this, arguments); }
 
 var SvgArrivalStatusRoundIcon = function SvgArrivalStatusRoundIcon(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
     width: 32,
     height: 32,
     viewBox: "0 0 32 32",
@@ -555,7 +556,7 @@ var SvgArrivalStatusRoundIcon = function SvgArrivalStatusRoundIcon(props) {
     cy: 16,
     r: 16,
     fill: "#F8F9F9"
-  })), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M15.2266 17.0313H18.997M15.2266 13.2607V17.0313V13.2607ZM15.2266 17.0313L24.121 9.03906L15.2266 17.0313Z",
     stroke: "#1371D6",
     strokeWidth: 1.5,
@@ -592,60 +593,56 @@ var getTypeData = function (type) {
             };
     }
 };
-var Wrapper = styled__default["default"](Card)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: 1rem;\n  border: 1px solid ", ";\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"], ["\n  border-radius: ", ";\n  padding: 1rem;\n  border: 1px solid ", ";\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"])), theme.borderRadii.lg, theme.palette.grey["200"], theme.shadows.boxShadow(theme));
-var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), theme.palette.grey["700"]);
-var StyledTagNew = styled__default["default"](Tag)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  height: ", "px;\n  padding: ", "px ", "px;\n  color: ", ";\n"], ["\n  height: ", "px;\n  padding: ", "px ", "px;\n  color: ", ";\n"])), function (_a) {
+var Wrapper = styled__default["default"](Card)(templateObject_1$H || (templateObject_1$H = __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  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"])), theme.borderRadii.lg, theme.palette.grey["200"], theme.shadows.boxShadow(theme));
+var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), theme.palette.grey["700"]);
+var StyledTagNew = styled__default["default"](Tag)(templateObject_3$6 || (templateObject_3$6 = __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;
     return theme.space.base * 6;
 }, theme.space.base, function (_a) {
     var theme = _a.theme;
     return theme.space.base * 2;
 }, theme.palette.white);
-var StyledLabel = styled__default["default"](Label)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: ", ";\n  color: ", "\n"], ["\n  font-size: ", ";\n  color: ", "\n"])), theme.fontSizes.sm, theme.palette.grey["500"]);
-var StyledTitleLabel = styled__default["default"](Label)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  word-wrap: break-word;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  word-wrap: break-word;\n"])), theme.palette.blue["600"], theme.fontSizes.lg);
-var Divider = styled__default["default"].div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 100%;\n  height: 1px;\n  margin: ", " 0;\n  background-color: ", ";\n"], ["\n  width: 100%;\n  height: 1px;\n  margin: ", " 0;\n  background-color: ", ";\n"])), theme.space.lg, theme.palette.grey["300"]);
-var CardHeader = styled__default["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
-var CardBody = styled__default["default"].div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n  justify-content: flex-start;\n  margin-top: ", ";\n"], ["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n  justify-content: flex-start;\n  margin-top: ", ";\n"])), theme.space.xxl);
+var StyledLabel = styled__default["default"](Label)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  font-size: ", ";\n  color: ", "\n"], ["\n  font-size: ", ";\n  color: ", "\n"])), theme.fontSizes.sm, theme.palette.grey["500"]);
+var StyledTitleLabel = styled__default["default"](Label)(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  word-wrap: break-word;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  word-wrap: break-word;\n"])), theme.palette.blue["600"], theme.fontSizes.lg);
+var Divider = styled__default["default"].div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  width: 100%;\n  height: 1px;\n  margin: ", " 0;\n  background-color: ", ";\n"], ["\n  width: 100%;\n  height: 1px;\n  margin: ", " 0;\n  background-color: ", ";\n"])), theme.space.lg, theme.palette.grey["300"]);
+var CardHeader = styled__default["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  justify-content: space-between;\n  height: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  justify-content: space-between;\n  height: ", "px;\n"])), theme.space.base * 6);
+var CardBody = styled__default["default"].div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n  justify-content: flex-start;\n  margin-top: ", ";\n  flex: 1;\n"], ["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n  justify-content: flex-start;\n  margin-top: ", ";\n  flex: 1;\n"])), theme.space.xxl);
 var CardFooter = styled__default["default"].div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
-var getFormattedLocaleDate = function () {
-    return new Date().toLocaleString().substring(0, 10);
-};
 var CampaignCard = function (props) {
-    var isNew = props.isNew, date = props.date, title = props.title, subTitle = props.subTitle, status = props.status, type = props.type;
-    var shownDate = date === getFormattedLocaleDate() ? "Today" : date;
+    var isNew = props.isNew, date = props.date, projectTitle = props.projectTitle, campaignTitle = props.campaignTitle, status = props.status, type = props.type, labelNew = props.labelNew;
     var StatusIcon = getStatusIcon(status !== null && status !== void 0 ? status : "PROGRESS");
     var typeData = getTypeData(type);
     var PillIcon = typeData === null || typeData === void 0 ? void 0 : typeData.pillIcon;
-    var titleCut = title;
-    if (title.length > 42) {
-        titleCut = "".concat(title.substring(0, 39), "...");
+    var projectTitleCut = projectTitle;
+    if (projectTitle.length > 42) {
+        projectTitleCut = "".concat(projectTitle.substring(0, 39), "...");
     }
-    var subTitleCut = subTitle;
-    if (subTitle.length > 29) {
-        subTitleCut = "".concat(subTitle.substring(0, 26), "...");
+    var campaignTitleCut = campaignTitle;
+    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: shownDate })), isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: "New!" }, { children: "New!" })))] }), jsxRuntime.jsxs(CardBody, { children: [jsxRuntime.jsx(StyledLabel, __assign({ isRegular: true }, { children: titleCut })), jsxRuntime.jsx(StyledTitleLabel, __assign({ isRegular: true }, { children: subTitleCut }))] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsxs(CardFooter, { children: [typeData &&
+    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, {})] })] }));
 };
-var templateObject_1$x, templateObject_2$4, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+var templateObject_1$H, templateObject_2$b, templateObject_3$6, templateObject_4$3, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
 
 /**
  * Title is a basic component used to display a title. Often used in card headers.
  */
 var Close = function (props) { return jsxRuntime.jsx(reactNotifications.Close, __assign({}, props)); };
 
-var _path$e, _path2$4, _path3$3, _path4$2;
+var _path$l, _path2$4, _path3$3, _path4$2;
 
-function _extends$f() { _extends$f = 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$f.apply(this, arguments); }
+function _extends$n() { _extends$n = 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$n.apply(this, arguments); }
 
 var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
     fill: "#F8F9F9"
   })), _path2$4 || (_path2$4 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -660,18 +657,18 @@ var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
   })));
 };
 
-var _path$d, _path2$3, _path3$2, _path4$1, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1, _path11$1;
+var _path$k, _path2$3, _path3$2, _path4$1, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1, _path11$1;
 
-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); }
+function _extends$m() { _extends$m = 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$m.apply(this, arguments); }
 
 var SvgCampaignProgress = function SvgCampaignProgress(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
     fill: "#F8F9F9"
   })), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -707,18 +704,18 @@ var SvgCampaignProgress = function SvgCampaignProgress(props) {
   })));
 };
 
-var _path$c, _path2$2, _path3$1;
+var _path$j, _path2$2, _path3$1;
 
-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); }
+function _extends$l() { _extends$l = 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$l.apply(this, arguments); }
 
 var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
     fill: "#F8F9F9"
   })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -736,12 +733,12 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
   })));
 };
 
-var _g$2, _path$b;
+var _g$2, _path$i;
 
-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); }
+function _extends$k() { _extends$k = 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$k.apply(this, arguments); }
 
 var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -753,18 +750,18 @@ var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
     opacity: 0.3,
     d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z",
     fill: "#003A57"
-  }))), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
+  }))), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M17.9983 7.16705C17.5188 6.58566 17.1422 6.73039 17.1422 6.73039C17.1422 6.73039 16.406 7.02453 16.0401 7.16303C15.6742 7.30153 15.2408 7.17357 15.2408 7.17357L14.7579 6.8851C14.7579 6.8851 14.4296 6.56554 14.3656 6.18067C14.3123 5.78958 14.1888 5.00269 14.1888 5.00269C14.1888 5.00269 14.1356 4.61159 13.3938 4.47257C12.652 4.33356 12.4678 4.68715 12.4678 4.68715C12.4678 4.68715 12.0932 5.38344 11.9091 5.73703C11.7249 6.09062 11.3114 6.27118 11.3114 6.27118L10.7639 6.36908C10.7639 6.36908 10.3144 6.33771 10.0176 6.07271L9.12712 5.27769C9.12712 5.27769 8.8303 5.01268 8.18313 5.38632C7.53595 5.75997 7.61705 6.14953 7.61705 6.14953L7.86033 7.3182C7.94143 7.70776 7.74381 8.11275 7.74381 8.11275L7.38528 8.53794C7.38528 8.53794 7.02217 8.80577 6.62387 8.78845C6.22557 8.77114 5.43527 8.7474 5.43527 8.7474C5.43527 8.7474 5.03697 8.73009 4.78646 9.44201C4.53595 10.1539 4.84804 10.3956 4.84804 10.3956C4.84804 10.3956 5.46774 10.896 5.77983 11.1376C6.09192 11.3793 6.19373 11.8296 6.19373 11.8296L6.20207 12.3921C6.20207 12.3921 6.09618 12.8314 5.79331 13.079C5.49043 13.3266 4.86759 13.8171 4.86759 13.8171C4.86759 13.8171 4.56471 14.0647 4.81769 14.7769C5.08144 15.4828 5.46713 15.4783 5.46713 15.4783C5.46713 15.4783 6.26012 15.4569 6.64582 15.4524C7.03152 15.4479 7.40116 15.7145 7.40116 15.7145L7.76458 16.1447C7.76458 16.1447 7.96976 16.5499 7.89441 16.9425C7.81907 17.3351 7.66208 18.1094 7.66208 18.1094C7.66208 18.1094 7.58674 18.502 8.23785 18.8824C8.88895 19.2629 9.18553 19.0044 9.18553 19.0044C9.18553 19.0044 9.7724 18.4765 10.069 18.218C10.3655 17.9595 10.8115 17.9347 10.8115 17.9347L11.3609 18.0394C11.3609 18.0394 11.77 18.225 11.9608 18.5803C12.1516 18.9356 12.5268 19.6354 12.5268 19.6354C12.5268 19.6354 12.7176 19.9907 13.4583 19.8539C14.1946 19.7343 14.2529 19.337 14.2529 19.337C14.2529 19.337 14.3586 18.5487 14.4232 18.1623C14.4814 17.765 14.8086 17.4598 14.8086 17.4598L15.2939 17.1796C15.2939 17.1796 15.7281 17.0598 16.095 17.1971C16.4682 17.3453 17.1975 17.637 17.1975 17.637C17.1975 17.637 17.5707 17.7851 18.0424 17.2073C18.5142 16.6295 18.3189 16.2913 18.3189 16.2913C18.3189 16.2913 17.9006 15.6164 17.6882 15.2736C17.4759 14.9307 17.5197 14.4836 17.5197 14.4836L17.7038 13.9555C17.7038 13.9555 17.9482 13.5816 18.3203 13.454C18.6925 13.3264 19.4431 13.0822 19.4431 13.0822C19.4431 13.0822 19.8153 12.9546 19.8113 12.2005C19.8074 11.4464 19.4297 11.3153 19.4297 11.3153C19.4297 11.3153 18.6807 11.0641 18.303 10.9331C17.9253 10.802 17.677 10.4217 17.677 10.4217L17.4861 9.8919C17.4861 9.8919 17.4293 9.4447 17.6368 9.1067C17.8443 8.7687 18.2486 8.09891 18.2486 8.09891C18.2486 8.09891 18.4778 7.74844 17.9983 7.16707L17.9983 7.16705ZM9.33902 8.38466L10.6176 10.5992C10.0433 11.149 9.82793 11.9715 10.0567 12.7413L7.86713 14.0054C6.98868 12.0106 7.60355 9.66286 9.33905 8.38457L9.33902 8.38466ZM13.9748 16.414C11.9998 17.2778 9.65918 16.6363 8.37099 14.8783L10.5605 13.6141C11.1128 14.1971 11.9329 14.4219 12.6961 14.1994L13.9748 16.414ZM12.6552 13.132C12.1159 13.4434 11.4325 13.2561 11.1176 12.7107C10.8027 12.1652 10.9822 11.4797 11.5215 11.1684C12.0608 10.857 12.7441 11.0443 13.0591 11.5897C13.374 12.1352 13.1945 12.8207 12.6552 13.132ZM14.8376 15.9158L13.5591 13.7012C14.1333 13.1515 14.3487 12.3289 14.12 11.5591L16.3095 10.295C17.188 12.2898 16.5731 14.6376 14.8376 15.9159L14.8376 15.9158ZM13.6161 10.6863C13.0638 10.1034 12.2437 9.87862 11.4805 10.1011L10.2019 7.88652C12.1769 7.02266 14.5112 7.65314 15.8057 9.42223L13.6161 10.6863Z",
     fill: "#003A57"
   })));
 };
 
-var _g$1, _path$a, _path2$1, _path3, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
+var _g$1, _path$h, _path2$1, _path3, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
 
-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); }
+function _extends$j() { _extends$j = 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$j.apply(this, arguments); }
 
 var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -776,7 +773,7 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
     opacity: 0.3,
     d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z",
     fill: "#003A57"
-  }))), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
+  }))), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M12.4871 3.1964C8.68009 3.1964 5.59901 6.27748 5.59901 10.0844C5.59901 10.2596 5.59901 10.4347 5.62445 10.5854C5.29863 11.1861 4.82313 12.0129 4.24684 12.5138C3.82123 12.8896 3.92102 13.2907 3.97091 13.4404C4.09615 13.7662 4.44641 14.0411 5.02271 14.2417C5.22328 14.3171 5.44831 14.367 5.64889 14.4169L5.67433 16.8463C5.67433 17.7983 6.47565 18.625 7.4531 18.625L8.9305 18.1495L9.08117 19.0262C9.18097 19.6025 9.68191 20.0281 10.2837 20.0281C10.359 20.0281 10.4343 20.0281 10.5087 20.0026L15.1425 19.1769C15.8185 19.0516 16.2441 18.4254 16.1444 17.7494L15.8185 16.1213C17.9975 14.9188 19.375 12.5891 19.375 10.0843C19.375 6.30267 16.2696 3.19629 12.487 3.19629L12.4871 3.1964Z",
     fill: "#003A57",
     stroke: "#003A57"
@@ -833,7 +830,7 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
   })));
 };
 
-var StyledTag = styled__default["default"](Tag)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  background-color: transparent;\n  pointer-events: none;\n  font-weight: ", ";\n  ", "\n  svg {\n    margin-right: ", " !important;\n  }\n\n  span {\n    font-weight: ", ";\n    margin-left: ", ";\n    color: ", ";\n  }\n"], ["\n  background-color: transparent;\n  pointer-events: none;\n  font-weight: ", ";\n  ", "\n  svg {\n    margin-right: ", " !important;\n  }\n\n  span {\n    font-weight: ", ";\n    margin-left: ", ";\n    color: ", ";\n  }\n"])), function (_a) {
+var StyledTag = styled__default["default"](Tag)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  background-color: transparent;\n  pointer-events: none;\n  font-weight: ", ";\n  ", "\n  svg {\n    margin-right: ", " !important;\n  }\n\n  span {\n    font-weight: ", ";\n    margin-left: ", ";\n    color: ", ";\n  }\n"], ["\n  background-color: transparent;\n  pointer-events: none;\n  font-weight: ", ";\n  ", "\n  svg {\n    margin-right: ", " !important;\n  }\n\n  span {\n    font-weight: ", ";\n    margin-left: ", ";\n    color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.fontWeights.regular;
 }, function (_a) {
@@ -869,27 +866,35 @@ var Counter = function (props) {
     return (jsxRuntime.jsxs(StyledTag, __assign({}, props, { size: props.size || "large" }, { children: [jsxRuntime.jsx(StyledTag.Avatar, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [status === "completed" && jsxRuntime.jsx(SvgCampaignCompleted, {}), status === "progress" && jsxRuntime.jsx(SvgCampaignProgress, {}), status === "incoming" && jsxRuntime.jsx(SvgCampaignIncoming, {}), status === "functional" && jsxRuntime.jsx(SvgCampaignFunctional, {}), status === "experiential" && jsxRuntime.jsx(SvgCampaignExperiential, {})] }) }), props.children, props.counter !== undefined && jsxRuntime.jsx("span", { children: props.counter })] })));
 };
 Counter.Avatar = StyledTag.Avatar;
-var templateObject_1$w;
+var templateObject_1$G;
 
-var UgField$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject([""], [""])));
+var UgField$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
 var Field$1 = function (props) { return jsxRuntime.jsx(UgField$1, __assign({}, props)); };
-var templateObject_1$v;
+var templateObject_1$F;
 
 var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Field: Field$1
 });
 
-var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject([""], [""])));
+var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
 var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
-var templateObject_1$u;
+var templateObject_1$E;
 
-var UgMenu = styled__default["default"](reactDropdowns.Menu)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject([""], [""])));
+var UgMenu = styled__default["default"](reactDropdowns.Menu)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
 /**
    * A Menu is a wrapper for items elements
    **/
 var Menu = function (props) { return jsxRuntime.jsx(UgMenu, __assign({}, props)); };
-var templateObject_1$t;
+// Extras
+var PreviousItem = function (props) { return jsxRuntime.jsx(reactDropdowns.PreviousItem, __assign({}, props)); };
+var Separator = function (props) { return jsxRuntime.jsx(reactDropdowns.Separator, __assign({}, props)); };
+var NextItem = function (props) { return jsxRuntime.jsx(reactDropdowns.NextItem, __assign({}, props)); };
+var ItemMeta = function (props) { return jsxRuntime.jsx(reactDropdowns.ItemMeta, __assign({}, props)); };
+var MediaBody = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaBody, __assign({}, props)); };
+var MediaFigure = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaFigure, __assign({}, props)); };
+var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaItem, __assign({}, props)); };
+var templateObject_1$D;
 
 /**
  * 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.
@@ -914,7 +919,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$s || (templateObject_1$s = __makeTemplateObject([""], [""])));
+var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject([""], [""])));
 /**
    * A Checkbox lets users select and unselect options from a list.
    * <hr>
@@ -926,14 +931,14 @@ 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$s;
+var templateObject_1$C;
 
-var UgField = styled__default["default"](reactForms.Field)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject([""], [""])));
+var UgField = styled__default["default"](reactForms.Field)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject([""], [""])));
 /**
    * A Field is a wrapper for input elements
    **/
 var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
-var templateObject_1$r;
+var templateObject_1$B;
 
 var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -941,7 +946,7 @@ var index = /*#__PURE__*/Object.freeze({
     Hint: reactForms.Hint
 });
 
-var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject([""], [""])));
+var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject([""], [""])));
 /**
    * An Input lets users enter text into a field.
    * <hr>
@@ -950,9 +955,9 @@ var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$q ||
    *  - To enter multiline text, use a Textarea
    **/
 var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
-var templateObject_1$q;
+var templateObject_1$A;
 
-var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject([""], [""])));
+var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject([""], [""])));
 /**
    * Radio buttons let users choose a single option among two or more mutually exclusive options.
    * <hr>
@@ -964,9 +969,9 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$p ||
    *  - To select from a long list of options, use Select instead
    **/
 var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
-var templateObject_1$p;
+var templateObject_1$z;
 
-var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject([""], [""])));
+var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$y || (templateObject_1$y = __makeTemplateObject([""], [""])));
 /**
    * A Textarea is a form control for multi-line text.
    * <hr>
@@ -974,9 +979,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$o;
+var templateObject_1$y;
 
-var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject([""], [""])));
+var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$x || (templateObject_1$x = __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>
@@ -987,11 +992,11 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$n
    *  - 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$n;
+var templateObject_1$x;
 
 var Col = function (props) { return jsxRuntime.jsx(reactGrid.Col, __assign({}, props)); };
 
-var Row = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, props)); };
+var Row$1 = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, props)); };
 
 /**
  * The Grid component is a framework for building modular layouts.
@@ -1001,58 +1006,58 @@ var Row = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, p
  */
 var Grid = function (props) { return jsxRuntime.jsx(reactGrid.Grid, __assign({}, props)); };
 
-var _path$9;
+var _path$g;
 
-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); }
+function _extends$i() { _extends$i = 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$i.apply(this, arguments); }
 
 var SvgUgSquare = function SvgUgSquare(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
     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", {
+  }, props), _path$g || (_path$g = /*#__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;
+var _path$f;
 
-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); }
+function _extends$h() { _extends$h = 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$h.apply(this, arguments); }
 
 var SvgUgCircle = function SvgUgCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     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", {
+  }, props), _path$f || (_path$f = /*#__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;
+var _path$e;
 
-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); }
+function _extends$g() { _extends$g = 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$g.apply(this, arguments); }
 
 var SvgUgTriangle = function SvgUgTriangle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
     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", {
+  }, props), _path$e || (_path$e = /*#__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$m || (templateObject_1$m = __makeTemplateObject([""], [""])));
+var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$w || (templateObject_1$w = __makeTemplateObject([""], [""])));
 var Icon = function (props) {
     var children = function (type, size) {
         if (size === void 0) { size = 24; }
@@ -1063,11 +1068,11 @@ var Icon = function (props) {
         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) }));
+    return (jsxRuntime.jsx(StyledUgIcon$1, { children: children(props.type, props.size) }));
 };
-var templateObject_1$m;
+var templateObject_1$w;
 
-var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject([""], [""])));
+var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject([""], [""])));
 /**
  * A Progress loader communicates progress when downloading or uploading content.
  * <hr>
@@ -1079,9 +1084,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
     - When loading page content, use a Skeleton loader instead
  */
 var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
-var templateObject_1$l;
+var templateObject_1$v;
 
-var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject([""], [""])));
+var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$u || (templateObject_1$u = __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>
@@ -1096,9 +1101,9 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
    - To communicate a typing status, use Inline instead
  */
 var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
-var templateObject_1$k;
+var templateObject_1$u;
 
-var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject([""], [""])));
+var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject([""], [""])));
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
  * <hr>
@@ -1107,7 +1112,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$j;
+var templateObject_1$t;
 
 /**
  * Title is a basic component used to display a title. Often used in card headers.
@@ -1124,18 +1129,18 @@ var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({
 var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
 var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
 
-var _path$6;
+var _path$d;
 
-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); }
+function _extends$f() { _extends$f = 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$f.apply(this, arguments); }
 
 var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     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", {
+  }, props), _path$d || (_path$d = /*#__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"
   })));
@@ -1198,7 +1203,7 @@ var Logo = function (props) {
         }[props.type] })));
 };
 
-var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey["800"];
 });
@@ -1207,9 +1212,9 @@ var FooterItem = reactModals.FooterItem;
 Modal.Header = reactModals.Header;
 Modal.Body = ugModalBody;
 Modal.Footer = reactModals.Footer;
-var templateObject_1$i;
+var templateObject_1$s;
 
-var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.white;
 });
@@ -1217,33 +1222,33 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$h ||
  * 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$h;
+var templateObject_1$r;
 
 /**
  * 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$g || (templateObject_1$g = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; });
+var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$q || (templateObject_1$q = __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$g;
+var templateObject_1$q;
 
 var HeaderItemText = function (props) { return jsxRuntime.jsx(reactChrome.HeaderItemText, __assign({}, props)); };
 
 var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
 
-var _path$5;
+var _path$c;
 
-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); }
+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 SvgMenuStroke = function SvgMenuStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     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", {
+  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -1251,18 +1256,18 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
   })));
 };
 
-var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$f || (templateObject_1$f = __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$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 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 BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$a || (templateObject_2$a = __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 MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$5 || (templateObject_3$5 = __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) {
@@ -1270,11 +1275,11 @@ var MenuItem = styled__default["default"](reactChrome.HeaderItem)(templateObject
     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 }) })))] }));
+    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$f, templateObject_2$3, templateObject_3;
+var templateObject_1$p, templateObject_2$a, templateObject_3$5;
 
-var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n    height: ", ";\n"], ["\n    height: ", ";\n"])), theme.components.Headers.height);
+var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$o || (templateObject_1$o = __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.
@@ -1283,20 +1288,20 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
 Header.HeaderItem = HeaderItem;
 Header.HeaderItemText = HeaderItemText;
 Header.HeaderItemIcon = HeaderItemIcon;
-var templateObject_1$e;
+var templateObject_1$o;
 
-var _path$4, _path2;
+var _path$b, _path2;
 
-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); }
+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); }
 
 var SvgMegaphoneStroke = function SvgMegaphoneStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
     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", {
+  }, props), _path$b || (_path$b = /*#__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"
@@ -1306,24 +1311,24 @@ var SvgMegaphoneStroke = function SvgMegaphoneStroke(props) {
   })));
 };
 
-var _path$3;
+var _path$a;
 
-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); }
+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 SvgChevronDownStroke = function SvgChevronDownStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+  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$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, 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 ChevronButton = styled__default["default"](IconButton)(templateObject_1$d || (templateObject_1$d = __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$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 theme = _a.theme;
     return theme.breakpoints.sm;
 });
@@ -1333,11 +1338,11 @@ var ChevronButton = styled__default["default"](IconButton)(templateObject_1$d ||
  */
 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, {}) }))] }) }) }))] })));
+    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: 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$d;
+var templateObject_1$n;
 
-var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$c || (templateObject_1$c = __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 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) {
@@ -1348,9 +1353,9 @@ var UgMain = styled__default["default"](reactChrome.Main)(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(UgMain, __assign({}, props)); };
-var templateObject_1$c;
+var templateObject_1$m;
 
-var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$b || (templateObject_1$b = __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$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 theme = _a.theme;
     return theme.borders.sm;
 }, function (_a) {
@@ -1372,10 +1377,10 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$b || (t
     - To give a consistent dashboard and navigation experience
  */
 var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
-var templateObject_1$b;
+var templateObject_1$l;
 
-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) {
+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 UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$9 || (templateObject_2$9 = __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  ");
 });
@@ -1383,11 +1388,11 @@ var NavItem = function (props) {
     // const { isExpanded } = props;
     return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
 };
-var templateObject_1$a, templateObject_2$2;
+var templateObject_1$k, templateObject_2$9;
 
-var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject([""], [""])));
+var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject([""], [""])));
 var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
-var templateObject_1$9;
+var templateObject_1$j;
 
 /**
  *  Use Ellipsis to automatically provide text content with a native title attribute and text-overflow styling.
@@ -1396,24 +1401,24 @@ 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$2;
+var _path$9;
 
-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); }
+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) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     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", {
+  }, 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"
   })));
 };
 
-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 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 theme = _a.theme;
     return theme.space.base * 6;
 }, function (_a) {
@@ -1438,42 +1443,42 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$8 ||
 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 templateObject_1$i;
 
-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 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 NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
+var templateObject_1$h;
 
-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 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 UgNavItem = styled__default["default"](NavItem)(templateObject_2$8 || (templateObject_2$8 = __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 templateObject_1$g, templateObject_2$8;
 
-var _path$1;
+var _path$8;
 
-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); }
+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 SvgHomeFill = function SvgHomeFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
     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", {
+  }, props), _path$8 || (_path$8 = /*#__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;
+var _linearGradient, _path$7;
 
-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); }
+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 SvgHomeFillStyled = function SvgHomeFillStyled(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
     width: 26,
     height: 26,
@@ -1489,7 +1494,7 @@ var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
     className: "stop3",
     offset: "100%",
     stopColor: "#001825"
-  }))), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+  }))), _path$7 || (_path$7 = /*#__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"
   })));
@@ -1497,10 +1502,10 @@ var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
 
 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); }
+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 SvgToken = function SvgToken(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
     fill: "none",
     viewBox: "0 0 32 32",
     xmlns: "http://www.w3.org/2000/svg"
@@ -1547,7 +1552,7 @@ var SvgToken = function SvgToken(props) {
  */
 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"])));
+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"])));
 /**
  * The UNGUESS Sidebar component provides a high-level layout structure and sets a framework for navigating around projects.
  * <br>
@@ -1562,7 +1567,7 @@ var Sidebar = function (props) {
     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 })] }), 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$5;
+var templateObject_1$f;
 
 /**
  * The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
@@ -1583,7 +1588,7 @@ 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([""], [""])));
+var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject([""], [""])));
 /**
  * Pagination separates content into pages and allows users to navigate between those pages.
 
@@ -1593,7 +1598,354 @@ var UgPagination = styled__default["default"](reactPagination.Pagination)(templa
  */
 var Pagination = function (props) { return jsxRuntime.jsx(UgPagination, __assign({}, props)); };
 var CursorPagination = reactPagination.CursorPagination;
-var templateObject_1$4;
+var templateObject_1$e;
+
+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 SvgExit = function SvgExit(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
+    width: 12,
+    height: 13,
+    viewBox: "0 0 12 13",
+    fill: "#68737D",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.5 12.9992C2.37 12.9992 2.25 12.9492 2.15 12.8592L0.15 10.9292C0.0580183 10.8314 0.0047128 10.7034 0 10.5692V3.42923C0 3.29923 0.06 3.16923 0.15 3.06923L2.15 1.13923C2.3 0.999232 2.51 0.959232 2.7 1.03923C2.88 1.11923 3 1.29923 3 1.49923V2.99923H6C6.55614 2.99923 7 3.44309 7 3.99923V4.99923C7 5.27537 6.77614 5.49923 6.5 5.49923C6.22386 5.49923 6 5.27537 6 4.99923V3.99923H3V9.99923H6V8.99923C6 8.72309 6.22386 8.49923 6.5 8.49923C6.77614 8.49923 7 8.72309 7 8.99923V9.99923C7 10.5554 6.55614 10.9992 6 10.9992H3V12.4992C3 12.6992 2.88 12.8792 2.7 12.9592C2.63 12.9892 2.57 12.9992 2.5 12.9992ZM9.5 9.49923C9.44 9.49923 9.37 9.48923 9.31 9.45923C9.12311 9.38275 9.00074 9.20117 9 8.99923L8.99631 7.49923H5C4.72386 7.49923 4.5 7.27537 4.5 6.99923C4.5 6.72309 4.72386 6.49923 5 6.49923H8.99384L8.99 4.93923C8.99 4.73923 9.11 4.54923 9.3 4.47923C9.49 4.39923 9.7 4.44923 9.84 4.58923L11.51 6.28923C11.89 6.67923 11.89 7.30923 11.5 7.69923L9.85 9.34923C9.75972 9.44637 9.6326 9.50085 9.5 9.49923Z"
+  })));
+};
+
+var _path$5;
+
+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 SvgThumbsUp = function SvgThumbsUp(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.5 15C14.2828 15 14.8192 11.8284 15 7.5C15 7.22386 14.7761 7 14.5 7H9.5C9.22386 7 9 6.77614 9 6.5V2C9 1.44772 8.55229 1 8 1C7.44772 1 7 1.44772 7 2C7 4.97341 6.19918 6.46065 5.02719 6.8454C5.01015 6.85409 4.99957 6.87174 5 6.9L4.99891 15C4.99927 15 13.5 15 13.5 15ZM10 6H14.5C15.3284 6 16 6.67157 15.9996 7.52082C15.7692 13.0486 15.2701 16 13.5 16L5.03301 15.9989C4.75408 16.0174 4.48075 15.9146 4.28308 15.7169C4.08542 15.5193 3.98264 15.2459 4 15L4.00008 6.90914C3.99274 6.50762 4.21507 6.13707 4.64189 5.92566C5.41645 5.66747 6 4.58373 6 2C6 0.89543 6.89543 0 8 0C9.10457 0 10 0.89543 10 2V6ZM1 7V15H2V7H1ZM1 6H2C2.55228 6 3 6.44772 3 7V15C3 15.5523 2.55228 16 2 16H1C0.447715 16 0 15.5523 0 15V7C0 6.44772 0.447715 6 1 6Z",
+    fill: "#68737D"
+  })));
+};
+
+var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  display: flex;\n  transition: opacity 0.1s ease-in-out;\n  opacity: ", ";\n  color: ", ";\n  margin-left: auto;\n  & > * {\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  display: flex;\n  transition: opacity 0.1s ease-in-out;\n  opacity: ", ";\n  color: ", ";\n  margin-left: auto;\n  & > * {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) { return (props.isVisible ? "1" : "0"); }, function (props) { return (props.isDisabled ? "inherit" : theme.palette.grey[600]); }, function (props) { return props.theme.iconSizes.md; }, function (props) { return props.theme.iconSizes.md; });
+var MenuItemIcon = function (props) { return (jsxRuntime.jsx(StyledMenuItemIcon, __assign({ isVisible: true }, props, { children: jsxRuntime.jsx(SvgChevronRightStroke, {}) }))); };
+var templateObject_1$d;
+
+var flexCenter = styled.css(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var flexColumnCenter = styled.css(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  ", ";\n  flex-direction: column;\n"], ["\n  ", ";\n  flex-direction: column;\n"])), flexCenter);
+var flexStart = styled.css(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return (theme.rtl ? "flex-end" : "flex-start");
+});
+var templateObject_1$c, templateObject_2$7, templateObject_3$4;
+
+/**
+ * 1. Allows an item to contain a positioned sub-menu.
+ * 2. Reset stacking context for sub-menu css-arrows.
+ **/
+var StyledItem = styled__default["default"].li(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  display: block;\n  position: relative; /* [1] */\n  z-index: 0; /* [2] */\n  cursor: ", ";\n  text-decoration: none;\n  line-height: ", "px;\n  word-wrap: break-word;\n  user-select: none;\n  &:first-child {\n    margin-top: ", "px;\n  }\n  &:last-child {\n    margin-bottom: ", "px;\n  }\n  &:focus {\n    outline: none;\n  }\n\n  width: fill-available;\n  ", "\n  height: ", ";\n  padding: ", " ", ";\n\n  ", ";\n\n  ", " {\n    right: ", ";\n    left: ", ";\n  }\n\n  \n  \n"], ["\n  display: block;\n  position: relative; /* [1] */\n  z-index: 0; /* [2] */\n  cursor: ", ";\n  text-decoration: none;\n  line-height: ", "px;\n  word-wrap: break-word;\n  user-select: none;\n  &:first-child {\n    margin-top: ", "px;\n  }\n  &:last-child {\n    margin-bottom: ", "px;\n  }\n  &:focus {\n    outline: none;\n  }\n\n  width: fill-available;\n  ", "\n  height: ", ";\n  padding: ", " ", ";\n\n  ", ";\n\n  ", " {\n    right: ", ";\n    left: ", ";\n  }\n\n  \n  \n"])), function (props) { return (props.disabled ? "default" : "pointer"); }, function (props) { return props.theme.space.base * 5; }, function (props) { return props.theme.space.base; }, function (props) { return props.theme.space.base; }, flexCenter, theme.space.xxl, theme.space.xs, theme.space.md, function (props) { return "\n  &:hover,\n  &:focus,\n  &:active {\n    background-color: ".concat(theme.palette.kale[100], ";\n    color: ").concat(props.isDanger ? theme.palette.red[500] : theme.palette.grey[800], ";\n  }"); }, StyledMenuItemIcon, function (props) {
+    return props.theme.rtl ? "auto" : "".concat(props.theme.space.base * 3, "px");
+}, function (props) {
+    return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : "auto";
+});
+var StyledBody$3 = styled__default["default"].li(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
+var IconContainer = styled__default["default"].div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  margin-right: ", ";\n  margin-top: 3px;\n"], ["\n  margin-right: ", ";\n  margin-top: 3px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.space.sm;
+});
+var MenuItemBody = styled__default["default"].div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), flexStart);
+var MenuItem = function (_a) {
+    var children = _a.children, selectedItem = _a.selectedItem, content = _a.content, props = __rest(_a, ["children", "selectedItem", "content"]);
+    var isActive = selectedItem && selectedItem === props.value;
+    var isVisible = isActive || selectedItem === "";
+    if (!isVisible)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    return isActive && content ? (jsxRuntime.jsx(StyledBody$3, { children: content }, props.value)) : (jsxRuntime.jsxs(StyledItem, __assign({}, props, { onClick: function () { return props.setActive(props.value); } }, { children: [props.icon && jsxRuntime.jsx(IconContainer, { children: props.icon }), children, content && jsxRuntime.jsx(MenuItemIcon, {})] }), props.value));
+};
+var templateObject_1$b, templateObject_2$6, templateObject_3$3, templateObject_4$2;
+
+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 SvgQuestionMark = function SvgQuestionMark(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "#68737D",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.99997 11.5C8.55226 11.5 8.99997 11.0523 8.99997 10.5V9.4C8.99997 8.83787 9.33361 8.32072 9.92997 7.948C11.3791 7.15957 12.2479 5.53522 11.9883 3.84794C11.7161 2.21413 10.3858 0.883851 8.76437 0.613605C6.74482 0.234732 4.81137 1.36258 4.24419 3.20591C4.08177 3.73378 4.37802 4.29336 4.90589 4.45578C5.43375 4.6182 5.99333 4.32195 6.15575 3.79409C6.41982 2.93586 7.36323 2.38554 8.41568 2.58287C9.2141 2.71615 9.88382 3.38587 10.0136 4.1644C10.139 4.98036 9.70294 5.79565 8.92112 6.2221C7.72579 6.96712 6.99997 8.09213 6.99997 9.4V10.5C6.99997 11.0523 7.44769 11.5 7.99997 11.5ZM7.99997 15.5C8.8284 15.5 9.49997 14.8284 9.49997 14C9.49997 13.1716 8.8284 12.5 7.99997 12.5C7.17155 12.5 6.49997 13.1716 6.49997 14C6.49997 14.8284 7.17155 15.5 7.99997 15.5Z"
+  })));
+};
+
+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 SvgCopy = function SvgCopy(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+    width: 12,
+    height: 16,
+    viewBox: "0 0 12 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.625 10C2.83211 10 3 10.2239 3 10.5C3 10.7761 2.83211 11 2.625 11H0.75C0.335786 11 0 10.5523 0 10V1C0 0.447715 0.335786 0 0.75 0H7.5C7.91421 0 8.25 0.447715 8.25 1V3.5C8.25 3.77614 8.08211 4 7.875 4C7.66789 4 7.5 3.77614 7.5 3.5V1H0.75V10H2.625ZM4.5 6V15H11.25V6H4.5ZM4.5 5H11.25C11.6642 5 12 5.44772 12 6V15C12 15.5523 11.6642 16 11.25 16H4.5C4.08579 16 3.75 15.5523 3.75 15V6C3.75 5.44772 4.08579 5 4.5 5Z",
+    fill: "#003A57"
+  })));
+};
+
+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 SvgInfoFill = function SvgInfoFill(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "#68737D",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.5 16C3.36 16 0 12.64 0 8.5C0 4.36 3.36 1 7.5 1C11.64 1 15 4.36 15 8.5C15 12.64 11.64 16 7.5 16ZM7 12.5C7 12.78 7.22 13 7.5 13C7.78 13 8 12.78 8 12.5V8C8 7.72 7.78 7.5 7.5 7.5C7.22 7.5 7 7.72 7 8V12.5ZM7.5 4C6.95 4 6.5 4.45 6.5 5C6.5 5.55 6.95 6 7.5 6C8.05 6 8.5 5.55 8.5 5C8.5 4.45 8.05 4 7.5 4Z"
+  })));
+};
+
+var StyledButton$1 = styled__default["default"](Button)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  color: ", ";\n  font-weight: ", ";\n  padding-left: 0;\n  justify-content: flex-start;\n"], ["\n  color: ", ";\n  font-weight: ", ";\n  padding-left: 0;\n  justify-content: flex-start;\n"])), function (props) { return props.theme.palette.grey[800]; }, function (props) { return props.theme.fontWeights.bold; });
+var PreviousButton = function (props) { return (jsxRuntime.jsxs(StyledButton$1, __assign({}, props, { isStretched: true }, { children: [jsxRuntime.jsx(StyledButton$1.StartIcon, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) }), props.children] }))); };
+var templateObject_1$a;
+
+var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject([""], [""])));
+/**
+ *  Use Paragraph to render blocks of text with Garden styling.
+ */
+var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
+var templateObject_1$9;
+
+var getInitials = function (name) {
+    var names = name.split(" ");
+    var initials = names.map(function (n) { return n[0]; }).join("");
+    return initials;
+};
+
+var StyledButton = styled__default["default"](Button)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  color: ", ";\n  padding-left: 0;\n  justify-content: flex-start;\n"], ["\n  color: ", ";\n  padding-left: 0;\n  justify-content: flex-start;\n"])), function (props) { return props.theme.palette.grey[800]; });
+var StyledBody$2 = styled__default["default"].div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  margin: ", "px\n    ", "px;\n"], ["\n  margin: ", "px\n    ", "px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.space.base * 6;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.space.base * 4;
+});
+var StyledParagraph = styled__default["default"](Paragraph)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  margin-top: ", "px;\n"], ["\n  margin-top: ", "px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.space.base * 4;
+});
+var Footer = styled__default["default"].div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  margin-top: auto;\n"], ["\n  margin-top: auto;\n"])));
+styled__default["default"](MD)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  text-align: left;\n  color: ", ";\n"], ["\n  text-align: left;\n  color: ", ";\n"])), theme.palette.blue[600]);
+var Description = styled__default["default"].div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n  justify-content: space-between;\n  text-align: left;\n  width: 100%;\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: 140%;\n  color: ", ";\n  margin: 2px 0px;\n"], ["\n  ", "\n  justify-content: space-between;\n  text-align: left;\n  width: 100%;\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: 140%;\n  color: ", ";\n  margin: 2px 0px;\n"])), flexCenter, theme.fontWeights.regular, theme.fontSizes.sm, theme.palette.grey["600"]);
+var HelpItem = function (props) {
+    var _a, _b, _c;
+    var csm = props.csm;
+    var email = csm.email;
+    var copyToClipBoard = function () {
+        navigator.clipboard.writeText(props.csm.email);
+    };
+    var csmEmailCut = email;
+    if (email.length > 24) {
+        csmEmailCut = "".concat(email.substring(0, 21), "...");
+    }
+    var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, __assign({ onClick: function () { return props.setActive(""); }, isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$2, { children: [jsxRuntime.jsx(Paragraph, __assign({ style: { color: theme.palette.grey[600] } }, { children: jsxRuntime.jsx(SM, { children: props.contactLabel }) })), jsxRuntime.jsx(StyledParagraph, { children: jsxRuntime.jsx(Avatar, { children: (_a = props.csm.picture) !== null && _a !== void 0 ? _a : getInitials(props.csm.name), avatarType: props.csm.picture ? "image" : "text", size: "large" }) }), jsxRuntime.jsxs(StyledParagraph, { children: [jsxRuntime.jsx(MD, __assign({ isBold: true }, { children: props.csm.name })), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Anchor, __assign({ href: "mailto:".concat(props.csm.email), style: { color: theme.palette.grey[600] } }, { children: csmEmailCut })), jsxRuntime.jsxs(Button, __assign({ isBasic: true, onClick: copyToClipBoard, size: "small", variant: "isBasic" }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgCopy, {}) }), (_b = props.copyLabel) !== null && _b !== void 0 ? _b : "Copy"] }))] })] })] }), jsxRuntime.jsxs(Footer, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledButton, __assign({ isStretched: true, isBasic: true, onClick: props.toggleChat, style: { paddingLeft: theme.space.xxs } }, { children: [jsxRuntime.jsx(StyledButton.StartIcon, { children: jsxRuntime.jsx(SvgInfoFill, { fill: theme.palette.blue[600] }) }), (_c = props.chatSupportLabel) !== null && _c !== void 0 ? _c : "Report a technical issue"] }))] })] }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, __assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgQuestionMark, { fill: theme.palette.grey[600] }) }, { children: props.title })) }));
+};
+var templateObject_1$8, templateObject_2$5, templateObject_3$2, templateObject_4$1, templateObject_5, templateObject_6;
+
+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 SvgCheckLg = function SvgCheckLg(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "#68737D",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.6464 2.64645C14.8417 2.45118 15.1583 2.45118 15.3536 2.64645C15.5488 2.84171 15.5488 3.15829 15.3536 3.35355L5.35355 13.3536C5.15829 13.5488 4.84171 13.5488 4.64645 13.3536L0.646447 9.35355C0.451184 9.15829 0.451184 8.84171 0.646447 8.64645C0.841709 8.45118 1.15829 8.45118 1.35355 8.64645L5 12.2929L14.6464 2.64645Z"
+  })));
+};
+
+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 SvgEmpty = function SvgEmpty(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "#68737D",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props));
+};
+
+var _path;
+
+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 SvgTranslationExists = function SvgTranslationExists(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "#68737D",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6 8.31C6.0087 8.47711 5.93254 8.63735 5.79747 8.73613C5.6624 8.83491 5.48662 8.85893 5.33 8.8C5 8.68 4.71 8.5 4.45 8.31C3.9 8.73 3.26 9 2.5 9C2.22 9 2 8.78 2 8.5C2 8.22 2.22 8 2.5 8C2.94 8 3.34 7.86 3.69 7.63C2.9 6.73 2.55 5.72 2.53 5.66C2.44 5.4 2.58 5.11 2.84 5.03C3.1 4.94 3.39 5.08 3.47 5.34C3.47 5.35 3.78 6.21 4.43 6.95C5.19 6.04 5.64 4.75 5.86 4H2.5C2.22 4 2 3.78 2 3.5C2 3.22 2.22 3 2.5 3H4V2.5C4 2.22 4.22 2 4.5 2C4.78 2 5 2.22 5 2.5V3H6.5C6.65 3 6.79 3.07 6.89 3.18C6.98 3.3 7.02 3.45 6.99 3.6C6.98 3.65 6.91 3.98 6.77 4.43C7.11 4.17 7.53 4 8 4H9V1C9 0.45 8.55 0 8 0H1C0.45 0 0 0.45 0 1V10C0 10.55 0.45 11 1 11H6V8.31ZM5.67 7.86C5.86 7.93 5.99 8.1 6 8.29V6.35C5.77 6.79 5.5 7.22 5.18 7.61C5.33 7.71 5.49 7.79 5.67 7.86ZM15 5H8C7.45 5 7 5.45 7 6V15C7 15.55 7.45 16 8 16H15C15.55 16 16 15.55 16 15V6C16 5.45 15.55 5 15 5ZM13.7 12.96C13.4459 13.0656 13.1538 12.9505 13.04 12.7L12.73 12H10.27L9.96 12.7C9.85 12.95 9.55 13.07 9.3 12.95C9.05 12.83 8.93 12.54 9.05 12.29L11.05 7.79C11.21 7.43 11.8 7.43 11.96 7.79L13.96 12.29C14.07 12.55 13.96 12.84 13.7 12.96ZM10.71 11H12.29L11.5 9.23L10.71 11Z"
+  })));
+};
+
+var StyledBody$1 = styled__default["default"].div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  margin: ", "px\n    ", "px;\n"], ["\n  margin: ", "px\n    ", "px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.space.base * 6;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.space.base * 4;
+});
+var StyledButtonContainer = styled__default["default"].div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  ", "\n  & button { \n    justify-content: flex-start;\n  }\n"], ["\n  ", "\n  & button { \n    justify-content: flex-start;\n  }\n"])), flexStart);
+var LanguageItem = function (props) {
+    var _a;
+    var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, __assign({ onClick: function () { return props.setActive(""); }, isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(StyledBody$1, { children: jsxRuntime.jsx(StyledButtonContainer, { children: Object.keys(props.languages).map(function (key) { return (jsxRuntime.jsxs(Button, __assign({ isBasic: true, isStretched: true, value: key, onClick: function () { return props.onSelectLanguage(key); } }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: props.currentLanguage === key ? jsxRuntime.jsx(SvgCheckLg, {}) : jsxRuntime.jsx(SvgEmpty, {}) }), jsxRuntime.jsx(Span, __assign({ isBold: props.currentLanguage === key }, { children: props.languages[key].label }))] }))); }) }) })] }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, __assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgTranslationExists, { fill: theme.palette.blue[600] }) }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.title, jsxRuntime.jsxs(MD, __assign({ style: { color: theme.palette.grey[600] } }, { children: [(_a = props.currentLanguageLabel) !== null && _a !== void 0 ? _a : "Now:", " " + props.languages[props.currentLanguage].label] }))] }) })) }));
+};
+var templateObject_1$7, templateObject_2$4;
+
+var ProfileContainer = styled__default["default"].div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  ", "\n  padding-top: ", "px;\n  margin-bottom: ", "px;\n"], ["\n  ", "\n  padding-top: ", "px;\n  margin-bottom: ", "px;\n"])), flexColumnCenter, function (_a) {
+    var theme = _a.theme;
+    return theme.space.base * 2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.space.base * 6;
+});
+var CompanyHolder = styled__default["default"](SM)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  text-transform: uppercase;\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n  color: ", ";\n"], ["\n  text-transform: uppercase;\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n  color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.space.base * 2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.space.base * 4;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.blue["600"];
+});
+var UserDetails = styled__default["default"].div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n  text-align: center;\n"], ["\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n  text-align: center;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.space.base * 4;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.space.base * 6;
+});
+var UserContainer = function (props) {
+    var _a;
+    return (jsxRuntime.jsxs(ProfileContainer, { children: [props.company && jsxRuntime.jsx(CompanyHolder, __assign({ isBold: true }, { children: props.company })), jsxRuntime.jsx(Avatar, { children: (_a = props.picture) !== null && _a !== void 0 ? _a : getInitials(props.name), avatarType: props.picture ? "image" : "text", size: "large" }), jsxRuntime.jsxs(UserDetails, { children: [jsxRuntime.jsx(MD, __assign({ isBold: true, style: { color: theme.palette.blue[600] } }, { children: props.name })), jsxRuntime.jsx(SM, __assign({ style: { color: theme.palette.grey[600] } }, { children: props.email }))] })] }));
+};
+var templateObject_1$6, templateObject_2$3, templateObject_3$1;
+
+var StyledList = styled__default["default"].ul(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  padding: 0;\n  margin: 0;\n"], ["\n  padding: 0;\n  margin: 0;\n"])));
+var UserMenu = function (props) {
+    var _a = React.useState(""), item = _a[0], setActiveItem = _a[1];
+    var toggleItem = function (item) {
+        setActiveItem(item);
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item === "" && jsxRuntime.jsx(UserContainer, __assign({}, props.user)), jsxRuntime.jsxs(StyledList, { children: [item === "" && jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(MenuItem, __assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgThumbsUp, {}), setActive: function () { return props.onFeedbackClick(); } }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.feedbackTitle || "Give us your feedback", jsxRuntime.jsx(MD, __assign({ style: { color: theme.palette.grey[600] } }, { children: props.feedbackSubTitle || "Help us improve UNGUESS!" }))] }) })), item === "" && jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(HelpItem, { value: "csm", selectedItem: item, setActive: function (i) { return toggleItem(i); }, title: props.csmTitle || "Need Help?", contactLabel: props.csmContactLabel || "Contact your CSM", csm: props.csm, toggleChat: props.onToggleChat }), jsxRuntime.jsx(LanguageItem, { title: props.languageTitle || "Change Language", value: "language-selector", selectedItem: item, setActive: function (i) { return toggleItem(i); }, languages: props.languages, currentLanguage: props.currentLanguage, onSelectLanguage: function (lang) { return props.onSelectLanguage(lang); } }), jsxRuntime.jsx(MenuItem, __assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgExit, { fill: theme.palette.red[600] }), setActive: function () { return props.onLogout(); } }, { children: props.logoutTitle || "Log out" }))] })] }));
+};
+var templateObject_1$5;
+
+function debounce(callback, wait) {
+    var timer;
+    return function () {
+        if (typeof timer !== "undefined")
+            clearTimeout(timer);
+        timer = setTimeout(function () {
+            timer = undefined;
+            callback();
+        }, wait);
+    };
+}
+function useWindowSize() {
+    var _a = React.useState({
+        width: window.innerWidth,
+        height: window.innerHeight,
+    }), size = _a[0], setSize = _a[1];
+    React.useLayoutEffect(function () {
+        var debounceUpdateSize = debounce(function () {
+            setSize({ width: window.innerWidth, height: window.innerHeight });
+        }, 300);
+        window.addEventListener("resize", debounceUpdateSize);
+        debounceUpdateSize();
+        return function () { return window.removeEventListener("resize", debounceUpdateSize); };
+    }, []);
+    return size;
+}
+
+var StyledModal = styled__default["default"](Modal)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  margin: 0;\n  left: auto;\n  right: auto;\n  top: auto;\n  bottom: auto;\n\n  max-height: calc(100vh - ", ");\n\n  @media (min-width: ", ") {\n    margin-top: calc(\n      ", "\n    );\n    margin-right: ", "px;\n  }\n"], ["\n  margin: 0;\n  left: auto;\n  right: auto;\n  top: auto;\n  bottom: auto;\n\n  max-height: calc(100vh - ", ");\n\n  @media (min-width: ", ") {\n    margin-top: calc(\n      ", "\n    );\n    margin-right: ", "px;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.space.xxl;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.breakpoints.sm;
+}, function (_a) {
+    var theme = _a.theme;
+    return "".concat(theme.components.Headers.height, " - ").concat(theme.space.xs);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.space.base * 3;
+});
+var StyledBody = styled__default["default"](Modal.Body)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  margin: ", ";\n  padding: 0;\n"], ["\n  margin: ", ";\n  padding: 0;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.space.xxs + " " + theme.space.xs;
+});
+var backDropStyle = {
+    backgroundColor: "transparent",
+    alignItems: "start",
+    justifyContent: "end",
+};
+/**
+ * Profile Modal
+
+ * Used for this:
+    - Show user main infos and actions
+
+ */
+var ProfileModal = function (_a) {
+    var menuArgs = _a.menuArgs, args = __rest(_a, ["menuArgs"]);
+    var width = useWindowSize().width;
+    var smBreakpoint = Number(theme.breakpoints.sm.replace("px", ""));
+    var backDrop = {
+        style: __assign({}, (width > smBreakpoint && __assign({}, backDropStyle))),
+    };
+    return (jsxRuntime.jsx(StyledModal, __assign({}, args, { style: { width: "300px" }, backdropProps: backDrop }, { children: jsxRuntime.jsx(StyledBody, { children: jsxRuntime.jsx(UserMenu, __assign({}, menuArgs)) }) })));
+};
+var templateObject_1$4, templateObject_2$2;
 
 var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject([""], [""])));
 /**
@@ -1607,15 +1959,48 @@ var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$3 |
  */
 var Table = function (props) { return jsxRuntime.jsx(UgTable, __assign({}, props)); };
 // Extras
-var Head = function (props) { return jsxRuntime.jsx(reactTables.Head, __assign({}, props)); };
+var Head = function (props) { return (jsxRuntime.jsx(reactTables.Head, __assign({}, props))); };
 var HeaderRow = function (props) { return jsxRuntime.jsx(reactTables.HeaderRow, __assign({}, props)); };
 var HeaderCell = function (props) { return jsxRuntime.jsx(reactTables.HeaderCell, __assign({}, props)); };
-var Body = function (props) { return jsxRuntime.jsx(reactTables.Body, __assign({}, props)); };
+var Body = function (props) { return (jsxRuntime.jsx(reactTables.Body, __assign({}, props))); };
+var Row = function (props) { return jsxRuntime.jsx(reactTables.Row, __assign({}, props)); };
 var Cell = function (props) { return jsxRuntime.jsx(reactTables.Cell, __assign({}, props)); };
-var GroupRow = function (props) { return jsxRuntime.jsx(reactTables.GroupRow, __assign({}, props)); };
-var Caption = function (props) { return jsxRuntime.jsx(reactTables.Caption, __assign({}, props)); };
+var Caption = function (props) { return (jsxRuntime.jsx(reactTables.Caption, __assign({}, props))); };
 var templateObject_1$3;
 
+var StyledAnimatedToggle = styled__default["default"](reactSpring.animated.div)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: inline-block;\n  float: right;\n"], ["\n  display: inline-block;\n  float: right;\n"])));
+var StyledUgIcon = styled__default["default"](Icon)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject([""], [""])));
+var UgGroupRow = styled__default["default"](reactTables.GroupRow)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n\n  &.empty {\n    cursor: default;\n\n    * {\n      color: ", " !important;\n      cursor: default !important;\n    }\n  }\n\n  svg {\n    vertical-align: middle;\n  }\n\n  .title {\n    padding-left: 10px;\n    vertical-align: middle;\n    font-size: ", ";\n    cursor: pointer;\n  }\n"], ["\n  cursor: pointer;\n\n  &.empty {\n    cursor: default;\n\n    * {\n      color: ", " !important;\n      cursor: default !important;\n    }\n  }\n\n  svg {\n    vertical-align: middle;\n  }\n\n  .title {\n    padding-left: 10px;\n    vertical-align: middle;\n    font-size: ", ";\n    cursor: pointer;\n  }\n"])), theme.palette.grey[500], theme.fontSizes.sm);
+var GroupRow = function (props) { return jsxRuntime.jsx(UgGroupRow, __assign({}, props)); };
+var GroupRowComponent = function (props) {
+    var toggleIconAnimation = reactSpring.useSpring({
+        config: { duration: 120 },
+        transform: props.group.items.length > 0
+            ? props.open
+                ? "rotate(180deg)"
+                : "rotate(0deg)"
+            : "rotate(0deg)",
+    });
+    return (jsxRuntime.jsx(GroupRow, __assign({}, (props && props.group.items.length === 0 && { className: "empty" }), (props &&
+        props.group.items.length > 0 && { onClick: props.handleToggle }), props, { children: jsxRuntime.jsxs(Cell, __assign({ colSpan: props.colSpan, className: props.open ? "open" : "closed" }, { children: [props.group.groupIcon && (jsxRuntime.jsx(StyledUgIcon, { size: 12, type: props.group.groupIcon })), jsxRuntime.jsxs(Label, __assign({ isRegular: true, className: "title" }, { children: [props.group.groupName, " ", jsxRuntime.jsxs("b", { children: ["(", props.group.items.length, ")"] })] })), jsxRuntime.jsx(StyledAnimatedToggle, __assign({ style: toggleIconAnimation }, { children: jsxRuntime.jsx(SvgChevronDownStroke, {}) }))] })) })));
+};
+var AnimatedRow = styled__default["default"](Row)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  &.render {\n    position: absolute;\n    opacity: 0;\n    z-index: -1;\n  }\n\n  &.show {\n    position: static;\n    opacity: 1;\n    transition: all 0.6s ease;\n  }\n"], ["\n  &.render {\n    position: absolute;\n    opacity: 0;\n    z-index: -1;\n  }\n\n  &.show {\n    position: static;\n    opacity: 1;\n    transition: all 0.6s ease;\n  }\n"])));
+var GroupComponent = function (_a) {
+    var group = _a.group, columns = _a.columns;
+    var _b = React.useState(true), open = _b[0], setOpen = _b[1];
+    var handleToggle = function () {
+        setOpen(!open);
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(GroupRowComponent, { colSpan: columns.length, handleToggle: handleToggle, open: open, group: group }), group.items.map(function (item, index) { return (jsxRuntime.jsx(AnimatedRow, __assign({ className: open ? "render show" : "render" }, { children: columns.map(function (column) { return (jsxRuntime.jsx(Cell, { children: item[column.field] }, column.field)); }) }), index)); })] }));
+};
+var GroupedTable = function (_a) {
+    var columns = _a.columns, groups = _a.groups, args = __rest(_a, ["columns", "groups"]);
+    return (jsxRuntime.jsxs(Table, __assign({ style: { minWidth: 500 } }, args, { children: [jsxRuntime.jsx(Head, { children: jsxRuntime.jsx(HeaderRow, { children: columns === null || columns === void 0 ? void 0 : columns.map(function (column) { return (jsxRuntime.jsx(HeaderCell, { children: column.name }, column.field)); }) }) }), jsxRuntime.jsx(Body, { children: groups === null || groups === void 0 ? void 0 : groups.map(function (group, index) {
+                    return jsxRuntime.jsx(GroupComponent, { columns: columns, group: group }, index);
+                }) })] })));
+};
+var templateObject_1$2, templateObject_2$1, templateObject_3, templateObject_4;
+
 /**
  * Tiles are Radio buttons styled with icons or images.
 
@@ -1644,14 +2029,14 @@ var Trigger = function (props) { return jsxRuntime.jsx(reactDropdowns.Trigger, _
  */
 var Blockquote = function (props) { return jsxRuntime.jsx(reactTypography.Blockquote, __assign({}, props)); };
 
-var UgCode = styled__default["default"](reactTypography.Code)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject([""], [""])));
+var UgCode = styled__default["default"](reactTypography.Code)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject([""], [""])));
 /**
  *  Use Code to style and format inline fragments of computer code.
  */
 var Code = function (props) { return jsxRuntime.jsx(UgCode, __assign({}, props)); };
-var templateObject_1$2;
+var templateObject_1$1;
 
-var UgOrderedList = styled__default["default"](reactTypography.OrderedList)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject([""], [""])));
+var UgOrderedList = styled__default["default"](reactTypography.OrderedList)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 var UgUnorderedList = styled__default["default"](reactTypography.UnorderedList)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
 /**
  *  Use Lists to style and format ordered and unordered lists.
@@ -1662,14 +2047,7 @@ var OrderedList = function (props) { return jsxRuntime.jsx(UgOrderedList, __assi
 OrderedList.Item = UgOrderedList.Item;
 var UnorderedList = function (props) { return jsxRuntime.jsx(UgUnorderedList, __assign({}, props)); };
 UnorderedList.Item = UgUnorderedList.Item;
-var templateObject_1$1, templateObject_2;
-
-var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-/**
- *  Use Paragraph to render blocks of text with Garden styling.
- */
-var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
-var templateObject_1;
+var templateObject_1, templateObject_2;
 
 Object.defineProperty(exports, 'ModalClose', {
     enumerable: true,
@@ -1704,6 +2082,7 @@ exports.FormField = index;
 exports.GlobalStyle = GlobalStyle;
 exports.Grid = Grid;
 exports.GroupRow = GroupRow;
+exports.GroupedTable = GroupedTable;
 exports.Header = Header;
 exports.HeaderCell = HeaderCell;
 exports.HeaderItem = HeaderItem;
@@ -1714,12 +2093,16 @@ exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Input = Input;
 exports.Item = Item;
+exports.ItemMeta = ItemMeta;
 exports.LG = LG;
 exports.Label = Label;
 exports.LoginForm = LoginForm;
 exports.Logo = Logo;
 exports.MD = MD;
 exports.Main = Main;
+exports.MediaBody = MediaBody;
+exports.MediaFigure = MediaFigure;
+exports.MediaItem = MediaItem;
 exports.Menu = Menu;
 exports.Message = Message;
 exports.Modal = Modal;
@@ -1731,24 +2114,29 @@ exports.NavItemIcon = NavItemIcon;
 exports.NavItemProject = NavItemProject;
 exports.NavItemText = NavItemText;
 exports.NavToggle = NavToggle;
+exports.NextItem = NextItem;
 exports.Notification = Notification;
 exports.OrderedList = OrderedList;
 exports.Pagination = Pagination;
 exports.Paragraph = Paragraph;
+exports.PreviousItem = PreviousItem;
+exports.ProfileModal = ProfileModal;
 exports.Progress = Progress;
 exports.Radio = Radio;
-exports.Row = Row;
+exports.Row = Row$1;
 exports.SM = SM;
 exports.Select = Select;
+exports.Separator = Separator;
 exports.Sidebar = Sidebar;
 exports.Skeleton = Skeleton;
 exports.Span = Span;
 exports.Spinner = Spinner;
 exports.SplitButton = SplitButton;
 exports.Table = Table;
+exports.TableBody = Body;
 exports.TableCell = Cell;
 exports.TableHead = Head;
-exports.TableRow = Body;
+exports.TableRow = Row;
 exports.Tag = Tag;
 exports.Textarea = Textarea;
 exports.Tiles = Tiles;