@appquality/unguess-design-system 2.10.69 → 2.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/build/index.js CHANGED
@@ -254,8 +254,8 @@ var gradients = {
254
254
  dark: "linear-gradient(90.81deg, ".concat(hex2rgba(palette.blue[800]), " 0%, ").concat(hex2rgba(palette.blue[600]), " 100%);"),
255
255
  };
256
256
 
257
- var _a, _b, _c, _d, _e, _f, _g$3, _h;
258
- var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), { chrome: __assign(__assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: __assign(__assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }), nav: __assign(__assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: __assign(__assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: __assign(__assign({}, (_h = (_g$3 = reactTheming.DEFAULT_THEME.components) === null || _g$3 === void 0 ? void 0 : _g$3.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) }), pageHeader: {
257
+ var _a, _b, _c, _d, _e, _f, _g$6, _h;
258
+ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), { chrome: __assign(__assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: __assign(__assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }), nav: __assign(__assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: __assign(__assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: __assign(__assign({}, (_h = (_g$6 = reactTheming.DEFAULT_THEME.components) === null || _g$6 === void 0 ? void 0 : _g$6.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) }), pageHeader: {
259
259
  imgMaxHeight: "214px",
260
260
  }, autocomplete: {
261
261
  thumbSize: "60px",
@@ -460,7 +460,7 @@ var Tag = function (props) { return jsxRuntime.jsx(reactTags.Tag, __assign({}, p
460
460
  Tag.Avatar = reactTags.Tag.Avatar;
461
461
  Tag.Close = reactTags.Tag.Close;
462
462
 
463
- var _g$2, _path$t;
463
+ var _g$5, _path$q;
464
464
 
465
465
  function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : 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$v.apply(this, arguments); }
466
466
 
@@ -471,19 +471,19 @@ var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
471
471
  viewBox: "0 0 24 24",
472
472
  fill: "none",
473
473
  xmlns: "http://www.w3.org/2000/svg"
474
- }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
474
+ }, props), _g$5 || (_g$5 = /*#__PURE__*/React__namespace.createElement("g", {
475
475
  opacity: 0.3
476
476
  }, /*#__PURE__*/React__namespace.createElement("path", {
477
477
  opacity: 0.3,
478
478
  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",
479
479
  fill: "#003A57"
480
- }))), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
480
+ }))), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
481
481
  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",
482
482
  fill: "#003A57"
483
483
  })));
484
484
  };
485
485
 
486
- var _g$1, _path$s, _path2$4, _path3$3, _path4$2, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1, _path11$1;
486
+ var _g$4, _path$p, _path2$4, _path3$3, _path4$2, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1, _path11$1;
487
487
 
488
488
  function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : 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$u.apply(this, arguments); }
489
489
 
@@ -494,12 +494,12 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
494
494
  viewBox: "0 0 25 24",
495
495
  fill: "none",
496
496
  xmlns: "http://www.w3.org/2000/svg"
497
- }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
497
+ }, props), _g$4 || (_g$4 = /*#__PURE__*/React__namespace.createElement("g", {
498
498
  opacity: 0.3
499
499
  }, /*#__PURE__*/React__namespace.createElement("path", {
500
500
  d: "M12.1641 24C18.7915 24 24.1641 18.6274 24.1641 12C24.1641 5.37258 18.7915 0 12.1641 0C5.53665 0 0.164062 5.37258 0.164062 12C0.164062 18.6274 5.53665 24 12.1641 24Z",
501
501
  fill: "#D3ECDB"
502
- }))), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
502
+ }))), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
503
503
  opacity: 0.8,
504
504
  d: "M12.653 3.1964C8.84605 3.1964 5.76496 6.27748 5.76496 10.0844C5.76496 10.2596 5.76496 10.4347 5.7904 10.5854C5.46458 11.1861 4.98908 12.0129 4.41279 12.5138C3.98719 12.8896 4.08697 13.2907 4.13687 13.4404C4.26211 13.7662 4.61237 14.0411 5.18866 14.2417C5.38924 14.3171 5.61427 14.367 5.81485 14.4169L5.84028 16.8463C5.84028 17.7983 6.6416 18.625 7.61905 18.625L9.09645 18.1495L9.24713 19.0262C9.34693 19.6025 9.84787 20.0281 10.4496 20.0281C10.5249 20.0281 10.6003 20.0281 10.6746 20.0026L15.3084 19.1769C15.9845 19.0516 16.4101 18.4254 16.3103 17.7494L15.9845 16.1213C18.1634 14.9188 19.541 12.5891 19.541 10.0843C19.541 6.30267 16.4356 3.19629 12.6529 3.19629L12.653 3.1964Z",
505
505
  fill: "#70C38A"
@@ -556,7 +556,7 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
556
556
  })));
557
557
  };
558
558
 
559
- var _path$r, _path2$3, _path3$2, _path4$1;
559
+ var _path$o, _path2$3, _path3$2, _path4$1;
560
560
 
561
561
  function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : 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$t.apply(this, arguments); }
562
562
 
@@ -567,7 +567,7 @@ var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
567
567
  viewBox: "0 0 24 24",
568
568
  fill: "none",
569
569
  xmlns: "http://www.w3.org/2000/svg"
570
- }, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
570
+ }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
571
571
  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",
572
572
  fill: "#F8F9F9"
573
573
  })), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -582,7 +582,7 @@ var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
582
582
  })));
583
583
  };
584
584
 
585
- var _path$q, _path2$2, _path3$1, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
585
+ var _path$n, _path2$2, _path3$1, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
586
586
 
587
587
  function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : 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); }
588
588
 
@@ -593,7 +593,7 @@ var SvgCampaignProgress = function SvgCampaignProgress(props) {
593
593
  viewBox: "0 0 24 24",
594
594
  fill: "none",
595
595
  xmlns: "http://www.w3.org/2000/svg"
596
- }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
596
+ }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
597
597
  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",
598
598
  fill: "#F8F9F9"
599
599
  })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -629,7 +629,7 @@ var SvgCampaignProgress = function SvgCampaignProgress(props) {
629
629
  })));
630
630
  };
631
631
 
632
- var _path$p, _path2$1, _path3;
632
+ var _path$m, _path2$1, _path3;
633
633
 
634
634
  function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : 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); }
635
635
 
@@ -640,7 +640,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
640
640
  viewBox: "0 0 24 24",
641
641
  fill: "none",
642
642
  xmlns: "http://www.w3.org/2000/svg"
643
- }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
643
+ }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
644
644
  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",
645
645
  fill: "#F8F9F9"
646
646
  })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -717,14 +717,14 @@ var Title$3 = styled__default["default"](LG)(templateObject_2$t || (templateObje
717
717
  var theme = _a.theme;
718
718
  return theme.space.xxs;
719
719
  });
720
- var Description$3 = styled__default["default"](MD)(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n color: ", ";\n margin-top: ", ";\n"], ["\n color: ", ";\n margin-top: ", ";\n"])), function (_a) {
720
+ var Description$3 = styled__default["default"](MD)(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n color: ", ";\n margin-top: ", ";\n"], ["\n color: ", ";\n margin-top: ", ";\n"])), function (_a) {
721
721
  var theme = _a.theme;
722
722
  return theme.palette.grey[700];
723
723
  }, function (_a) {
724
724
  var theme = _a.theme;
725
725
  return theme.space.xxs;
726
726
  });
727
- var Container$2 = styled__default["default"].div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
727
+ var Container$2 = styled__default["default"].div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
728
728
  var theme = _a.theme, align = _a.align;
729
729
  return "\n display: flex;\n align-items: ".concat(align || "start", ";\n flex-direction: column;\n flex-grow: 1;\n justify-content: start;\n padding: ").concat(theme.space.xxs, " 0;\n margin-top: ").concat(theme.space.xs, ";\n ");
730
730
  });
@@ -732,7 +732,7 @@ var CardHeader = function (props) { return jsxRuntime.jsx(Container$2, __assign(
732
732
  CardHeader.Label = Label$2;
733
733
  CardHeader.Title = Title$3;
734
734
  CardHeader.Text = Description$3;
735
- var templateObject_1$17, templateObject_2$t, templateObject_3$j, templateObject_4$c;
735
+ var templateObject_1$17, templateObject_2$t, templateObject_3$i, templateObject_4$b;
736
736
 
737
737
  var Divider = styled__default["default"].div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n margin-top: ", "px;\n margin-bottom: ", ";\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n margin-top: ", "px;\n margin-bottom: ", ";\n background-color: ", ";\n"])), function (_a) {
738
738
  var theme = _a.theme;
@@ -745,14 +745,14 @@ var Divider = styled__default["default"].div(templateObject_1$16 || (templateObj
745
745
  return theme.palette.grey["300"];
746
746
  });
747
747
  var Footer$2 = styled__default["default"].div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: auto;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: auto;\n width: 100%;\n"])));
748
- var Container$1 = styled__default["default"].div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
748
+ var Container$1 = styled__default["default"].div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
749
749
  var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent, wrap = _a.wrap;
750
750
  return "\n display: flex;\n align-items: center;\n flex-direction: ".concat(direction || "row", ";\n justify-content: ").concat(justifyContent || "space-between", ";\n padding: ").concat(theme.space.xxs, " 0;\n margin-top: ").concat(theme.space.xs, ";\n ").concat(wrap ? "flex-wrap: wrap;" : "", "\n ");
751
751
  });
752
752
  var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$2, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container$1, __assign({}, props, { children: props.children }))] })); };
753
- var templateObject_1$16, templateObject_2$s, templateObject_3$i;
753
+ var templateObject_1$16, templateObject_2$s, templateObject_3$h;
754
754
 
755
- var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n"])), function (_a) {
755
+ var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n\n ", "\n"])), function (_a) {
756
756
  var theme = _a.theme;
757
757
  return theme.borderRadii.lg;
758
758
  }, function (_a) {
@@ -765,6 +765,10 @@ var UgContentCard = styled__default["default"](reactNotifications.Well)(template
765
765
  var isFloating = _a.isFloating, theme = _a.theme;
766
766
  return !isFloating &&
767
767
  "\n &:hover {\n box-shadow: ".concat(theme.shadows.boxShadow(theme), ";\n }");
768
+ }, function (_a) {
769
+ var isDisabled = _a.isDisabled;
770
+ return isDisabled &&
771
+ "\n pointer-events: none;\n opacity: 0.7;\n ";
768
772
  });
769
773
  /**
770
774
  * A SpecialCard is a spefic type of card with an opinionated set of default spaces and subcomponents order.
@@ -828,7 +832,7 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$r || (temp
828
832
  var theme = _a.theme;
829
833
  return theme.palette.white;
830
834
  });
831
- var StyledLabel$1 = styled__default["default"](SM)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
835
+ var StyledLabel$1 = styled__default["default"](SM)(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
832
836
  var theme = _a.theme;
833
837
  return theme.palette.grey["500"];
834
838
  });
@@ -838,7 +842,7 @@ var CampaignCard = function (_a) {
838
842
  var PillIcon = getTypeDataIcon(type);
839
843
  return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, __assign({ title: campaignTitle }, props, { children: [jsxRuntime.jsxs(SpecialCard.Meta, { children: [jsxRuntime.jsx(StyledLabel$1, { children: date }), isNew && (jsxRuntime.jsx(StyledTagNew$1, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: projectTitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: campaignTitle })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$2, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), jsxRuntime.jsx(Ellipsis, __assign({ style: { maxWidth: "180px" } }, { children: props.pillText }))] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
840
844
  };
841
- var templateObject_1$14, templateObject_2$r, templateObject_3$h;
845
+ var templateObject_1$14, templateObject_2$r, templateObject_3$g;
842
846
 
843
847
  var StyledTagNew = styled__default["default"](Tag)(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n position: absolute;\n right: 16px;\n top: 16px;\n"], ["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n position: absolute;\n right: 16px;\n top: 16px;\n"])), function (_a) {
844
848
  var theme = _a.theme;
@@ -876,14 +880,14 @@ var ServiceTitle = styled__default["default"](LG)(templateObject_2$q || (templat
876
880
  var theme = _a.theme;
877
881
  return theme.fontWeights.semibold;
878
882
  });
879
- var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: ", ";\n"], ["\n margin-right: ", ";\n margin-top: ", ";\n"])), function (_a) {
883
+ var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: ", ";\n"], ["\n margin-right: ", ";\n margin-top: ", ";\n"])), function (_a) {
880
884
  var theme = _a.theme;
881
885
  return theme.space.xs;
882
886
  }, function (_a) {
883
887
  var theme = _a.theme;
884
888
  return theme.space.xs;
885
889
  });
886
- var CardContent = styled__default["default"].div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"], ["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"])));
890
+ var CardContent = styled__default["default"].div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"], ["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"])));
887
891
  var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n padding: ", " 0;\n \n }\n\n button:not(:first-child) {\n margin-top: ", "px;\n }\n"], ["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n padding: ", " 0;\n \n }\n\n button:not(:first-child) {\n margin-top: ", "px;\n }\n"])), function (_a) {
888
892
  var theme = _a.theme;
889
893
  return theme.space.base;
@@ -911,7 +915,7 @@ var ServiceCard = function (props) {
911
915
  var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
912
916
  return (jsxRuntime.jsxs(StyledCard$1, __assign({}, props, { children: [props.isHoverable && (jsxRuntime.jsxs(HoverBody, { children: [jsxRuntime.jsxs(HoverMetaContainer, { children: [props.hoverTitle && (jsxRuntime.jsx(ServiceTitle, { children: props.hoverTitle })), props.hoverSubtitle && (jsxRuntime.jsx(ServiceSubtitle, { children: props.hoverSubtitle }))] }), props.hoverButtons && (jsxRuntime.jsx(ButtonsWrap$1, { children: props.hoverButtons.map(function (button) { return button; }) }))] })), jsxRuntime.jsxs(CardContent, { children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [serviceIcon && jsxRuntime.jsx(SpecialCard.Thumb, { children: serviceIcon }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: serviceSubtitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: serviceTitle })] })] }), props.tags && (jsxRuntime.jsx(SpecialCard.Footer, __assign({ justifyContent: "start", wrap: true }, { children: props.tags.map(function (tag, index) { return (jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(StyledTag$1.Avatar, { children: tag.icon }), tag.label] }), index)); }) })))] })] })));
913
917
  };
914
- var templateObject_1$12, templateObject_2$q, templateObject_3$g, templateObject_4$b, templateObject_5$6, templateObject_6$2, templateObject_7$1, templateObject_8$1;
918
+ var templateObject_1$12, templateObject_2$q, templateObject_3$f, templateObject_4$a, templateObject_5$6, templateObject_6$2, templateObject_7$1, templateObject_8$1;
915
919
 
916
920
  var ButtonsWrap = styled__default["default"].div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n"], ["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n"])));
917
921
  var InfoCard = function (props) {
@@ -1043,19 +1047,19 @@ var templateObject_1$Y;
1043
1047
 
1044
1048
  var Container = styled__default["default"].div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n"])));
1045
1049
  var MetaContainer$1 = styled__default["default"].div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n"])));
1046
- var ThumbContainer = styled__default["default"].div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n margin-right: ", ";\n width: 100%;\n max-width: ", ";\n\n > div {\n height: 100%;\n }\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n margin-right: ", ";\n width: 100%;\n max-width: ", ";\n\n > div {\n height: 100%;\n }\n"])), function (_a) {
1050
+ var ThumbContainer = styled__default["default"].div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n margin-right: ", ";\n width: 100%;\n max-width: ", ";\n\n > div {\n height: 100%;\n }\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n margin-right: ", ";\n width: 100%;\n max-width: ", ";\n\n > div {\n height: 100%;\n }\n"])), function (_a) {
1047
1051
  var theme = _a.theme;
1048
1052
  return theme.space.sm;
1049
1053
  }, function (_a) {
1050
1054
  var theme = _a.theme;
1051
1055
  return theme.components.autocomplete.thumbSize;
1052
1056
  });
1053
- var Label$1 = styled__default["default"](MD)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n"])), function (_a) {
1057
+ var Label$1 = styled__default["default"](MD)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n"])), function (_a) {
1054
1058
  var theme = _a.theme;
1055
1059
  return theme.fontWeights.medium;
1056
1060
  }, function (_a) {
1057
1061
  var theme = _a.theme;
1058
- return theme.colors.primaryHue;
1062
+ return theme.palette.grey[800];
1059
1063
  });
1060
1064
  var Description$2 = styled__default["default"](SM)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
1061
1065
  var theme = _a.theme;
@@ -1067,9 +1071,9 @@ var Image$1 = React.memo(function (_a) {
1067
1071
  });
1068
1072
  var ItemContent = function (props) {
1069
1073
  var thumbSrc = props.thumbSrc, description = props.description, label = props.label;
1070
- return (jsxRuntime.jsxs(Container, { children: [thumbSrc && (jsxRuntime.jsx(ThumbContainer, { children: jsxRuntime.jsx(Image$1, { src: thumbSrc }) })), jsxRuntime.jsxs(MetaContainer$1, { children: [label && jsxRuntime.jsx(Label$1, { children: label }), description && jsxRuntime.jsx(Description$2, { children: description })] })] }));
1074
+ return (jsxRuntime.jsxs(Container, { children: [thumbSrc && (jsxRuntime.jsx(ThumbContainer, { children: jsxRuntime.jsx(Image$1, { src: thumbSrc }) })), jsxRuntime.jsxs(MetaContainer$1, { children: [label && jsxRuntime.jsx(Label$1, __assign({ isBold: true }, { children: label })), description && jsxRuntime.jsx(Description$2, { children: description })] })] }));
1071
1075
  };
1072
- var templateObject_1$X, templateObject_2$o, templateObject_3$f, templateObject_4$a, templateObject_5$5;
1076
+ var templateObject_1$X, templateObject_2$o, templateObject_3$e, templateObject_4$9, templateObject_5$5;
1073
1077
 
1074
1078
  /**
1075
1079
  * A Menu is a wrapper for items elements
@@ -1140,7 +1144,7 @@ var editorStyle = styled.css(templateObject_1$V || (templateObject_1$V = __makeT
1140
1144
  });
1141
1145
  var templateObject_1$V;
1142
1146
 
1143
- var _path$o;
1147
+ var _path$l;
1144
1148
 
1145
1149
  function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : 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); }
1146
1150
 
@@ -1151,122 +1155,170 @@ var SvgBoldFill = function SvgBoldFill(props) {
1151
1155
  height: 16,
1152
1156
  focusable: "false",
1153
1157
  viewBox: "0 0 16 16"
1154
- }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
1158
+ }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
1155
1159
  fill: "currentColor",
1156
1160
  d: "M7.5 0C9.952 0 12 2.048 12 4.5a4.483 4.483 0 01-1.27 3.108C12.078 8.39 13 9.855 13 11.5c0 2.452-2.048 4.5-4.5 4.5H4a1 1 0 01-1-1V1a1 1 0 011-1h3.5zM5 14h3.5c1.348 0 2.5-1.152 2.5-2.5S9.848 9 8.5 9H5v5zM7.5 2H5v5h2.5C8.848 7 10 5.848 10 4.5S8.848 2 7.5 2z"
1157
1161
  })));
1158
1162
  };
1159
1163
 
1160
- var _path$n;
1164
+ var _path$k;
1161
1165
 
1162
1166
  function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : 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); }
1163
1167
 
1164
- var SvgBoldStroke = function SvgBoldStroke(props) {
1168
+ var SvgItalicFill = function SvgItalicFill(props) {
1165
1169
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
1166
1170
  xmlns: "http://www.w3.org/2000/svg",
1167
1171
  width: 16,
1168
1172
  height: 16,
1169
1173
  focusable: "false",
1170
1174
  viewBox: "0 0 16 16"
1171
- }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
1172
- fill: "currentColor",
1173
- d: "M7 1c2.176 0 4 1.824 4 4 0 1.315-.666 2.501-1.673 3.234C10.869 8.792 12 10.287 12 12c0 2.176-1.824 4-4 4H3.5a.5.5 0 01-.5-.5v-14a.5.5 0 01.5-.5H7zM4 15h4c1.624 0 3-1.376 3-3S9.624 9 8 9H4v6zM7 2H4v6h3c1.624 0 3-1.376 3-3S8.624 2 7 2z"
1175
+ }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
1176
+ fill: "none",
1177
+ stroke: "currentColor",
1178
+ strokeLinecap: "round",
1179
+ strokeWidth: 2,
1180
+ d: "M8 1h3M9.5 1l-3 14M5 15h3"
1174
1181
  })));
1175
1182
  };
1176
1183
 
1177
- var _path$m;
1184
+ var _path$j, _path2;
1178
1185
 
1179
1186
  function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : 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); }
1180
1187
 
1181
- var SvgItalicFill = function SvgItalicFill(props) {
1188
+ var SvgQuoteFill = function SvgQuoteFill(props) {
1182
1189
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
1183
1190
  xmlns: "http://www.w3.org/2000/svg",
1184
1191
  width: 16,
1185
1192
  height: 16,
1186
1193
  focusable: "false",
1187
1194
  viewBox: "0 0 16 16"
1188
- }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
1195
+ }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
1196
+ fill: "currentColor",
1197
+ d: "M7 8H4c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3c0 .55-.45 1-1 1zm6 0h-3c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3c0 .55-.45 1-1 1z"
1198
+ })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
1189
1199
  fill: "none",
1190
1200
  stroke: "currentColor",
1191
1201
  strokeLinecap: "round",
1192
1202
  strokeWidth: 2,
1193
- d: "M8 1h3M9.5 1l-3 14M5 15h3"
1203
+ d: "M5.5 12C6.5 11 7 9.5 7 8V6m4.5 6c1-1 1.5-2.5 1.5-4V6"
1194
1204
  })));
1195
1205
  };
1196
1206
 
1197
- var _path$l;
1207
+ var _g$3;
1198
1208
 
1199
1209
  function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : 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); }
1200
1210
 
1201
- var SvgItalicStroke = function SvgItalicStroke(props) {
1211
+ var SvgH1Fill = function SvgH1Fill(props) {
1202
1212
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
1203
1213
  xmlns: "http://www.w3.org/2000/svg",
1204
1214
  width: 16,
1205
1215
  height: 16,
1206
1216
  focusable: "false",
1207
1217
  viewBox: "0 0 16 16"
1208
- }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
1218
+ }, props), _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", {
1219
+ transform: "translate(-464 -332)"
1220
+ }, /*#__PURE__*/React__namespace.createElement("rect", {
1221
+ width: 16,
1222
+ height: 16,
1223
+ transform: "translate(464 332)",
1224
+ fill: "none"
1225
+ }), /*#__PURE__*/React__namespace.createElement("path", {
1226
+ d: "M3,1V12.273M11.052,1V12.273M3,6.636h8.052",
1227
+ transform: "translate(462 333.5)",
1209
1228
  fill: "none",
1210
1229
  stroke: "currentColor",
1211
1230
  strokeLinecap: "round",
1212
- d: "M7.5 1.5h3M9 1.5l-3 14m-1.5 0h3"
1213
- })));
1231
+ strokeWidth: 2
1232
+ }), /*#__PURE__*/React__namespace.createElement("path", {
1233
+ fill: "currentColor",
1234
+ d: "M1.755,15A.731.731,0,0,1,1,14.375a.7.7,0,0,1,.617-.739l.136-.011H2.51V6.346l-.22.2a.81.81,0,0,1-1.018.043.646.646,0,0,1-.137-.92l.086-.1L2.731,4.2l.063-.051.094-.058.091-.041.094-.028.082-.016L3.2,4l.082,0a.734.734,0,0,1,.094.007L3.265,4l.08,0,.113.019.1.028.115.055.083.055L3.8,4.2l.056.056.063.085.045.082.03.085.023.113,0,.063v8.937h.755a.731.731,0,0,1,.753.625.7.7,0,0,1-.617.739L4.775,15Z",
1235
+ transform: "translate(474.469 331)"
1236
+ }))));
1214
1237
  };
1215
1238
 
1216
- var _path$k, _path2;
1239
+ var _g$2;
1217
1240
 
1218
1241
  function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : 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); }
1219
1242
 
1220
- var SvgQuoteFill = function SvgQuoteFill(props) {
1243
+ var SvgH2Fill = function SvgH2Fill(props) {
1221
1244
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
1222
1245
  xmlns: "http://www.w3.org/2000/svg",
1223
1246
  width: 16,
1224
1247
  height: 16,
1225
1248
  focusable: "false",
1226
1249
  viewBox: "0 0 16 16"
1227
- }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
1228
- fill: "currentColor",
1229
- d: "M7 8H4c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3c0 .55-.45 1-1 1zm6 0h-3c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3c0 .55-.45 1-1 1z"
1230
- })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
1250
+ }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
1251
+ transform: "translate(-464 -332)"
1252
+ }, /*#__PURE__*/React__namespace.createElement("rect", {
1253
+ width: 16,
1254
+ height: 16,
1255
+ transform: "translate(464 332)",
1256
+ fill: "none"
1257
+ }), /*#__PURE__*/React__namespace.createElement("path", {
1258
+ d: "M3,1V12.273M11.052,1V12.273M3,6.636h8.052",
1259
+ transform: "translate(462 333.5)",
1231
1260
  fill: "none",
1232
1261
  stroke: "currentColor",
1233
1262
  strokeLinecap: "round",
1234
- strokeWidth: 2,
1235
- d: "M5.5 12C6.5 11 7 9.5 7 8V6m4.5 6c1-1 1.5-2.5 1.5-4V6"
1236
- })));
1263
+ strokeWidth: 2
1264
+ }), /*#__PURE__*/React__namespace.createElement("path", {
1265
+ fill: "currentColor",
1266
+ d: "M5.5,6.75a2.576,2.576,0,1,1,5.141,0,4.961,4.961,0,0,1-1.1,3l-.256.348-1,1.291a8.564,8.564,0,0,0-1.222,2.047l-.071.191H10a.656.656,0,0,1,.632.564l.01.124a.677.677,0,0,1-.527.676L10,15H6.143a.627.627,0,0,1-.5-.252.723.723,0,0,1-.133-.57,8.183,8.183,0,0,1,1.753-3.637L8.24,9.292l.085-.111A3.975,3.975,0,0,0,9.355,6.75a1.288,1.288,0,1,0-2.57,0,.644.644,0,1,1-1.285,0Z",
1267
+ transform: "translate(469.359 331)"
1268
+ }))));
1237
1269
  };
1238
1270
 
1239
- var _path$j;
1271
+ var _g$1;
1240
1272
 
1241
1273
  function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : 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); }
1242
1274
 
1243
- var SvgQuoteStroke = function SvgQuoteStroke(props) {
1275
+ var SvgH3Fill = function SvgH3Fill(props) {
1244
1276
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
1245
1277
  xmlns: "http://www.w3.org/2000/svg",
1246
1278
  width: 16,
1247
1279
  height: 16,
1248
1280
  focusable: "false",
1249
1281
  viewBox: "0 0 16 16"
1250
- }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
1282
+ }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
1283
+ transform: "translate(-464 -332)"
1284
+ }, /*#__PURE__*/React__namespace.createElement("rect", {
1285
+ width: 16,
1286
+ height: 16,
1287
+ transform: "translate(464 332)",
1288
+ fill: "none"
1289
+ }), /*#__PURE__*/React__namespace.createElement("path", {
1290
+ d: "M3,1V12.273M11.052,1V12.273M3,6.636h8.052",
1291
+ transform: "translate(462 333.5)",
1251
1292
  fill: "none",
1252
1293
  stroke: "currentColor",
1253
1294
  strokeLinecap: "round",
1254
- d: "M7 7.5H4c-.3 0-.5-.2-.5-.5V4c0-.3.2-.5.5-.5h3c.3 0 .5.2.5.5v3c0 .3-.2.5-.5.5zm6 0h-3c-.3 0-.5-.2-.5-.5V4c0-.3.2-.5.5-.5h3c.3 0 .5.2.5.5v3c0 .3-.2.5-.5.5zM12 12c1-1 1.5-2.5 1.5-4V6M6 12c1-1 1.5-2.5 1.5-4V6"
1255
- })));
1295
+ strokeWidth: 2
1296
+ }), /*#__PURE__*/React__namespace.createElement("path", {
1297
+ fill: "currentColor",
1298
+ d: "M15.375,4A.658.658,0,0,1,16,4.688a3.531,3.531,0,0,1-.744,1.665l-.3.44-.171.238-.384.514-.438.568-.136.168.145.043a2.839,2.839,0,0,1,1.95,2.5l.031.225.015.151.021.294.01.334,0,.424a3.323,3.323,0,0,1-.3,1.339A2.286,2.286,0,0,1,13.5,15c-1.6,0-2.5-1-2.5-2.75a.628.628,0,1,1,1.25,0c0,1,.345,1.375,1.25,1.375a1.053,1.053,0,0,0,1.081-.652,1.9,1.9,0,0,0,.169-.723l0-.378-.015-.415-.021-.238c-.134-1.172-.653-1.719-2.149-1.719a.625.625,0,0,1-.571-.407.741.741,0,0,1,.106-.739l.494-.61.446-.564.4-.518.347-.465.3-.41.282-.411H11.625a.645.645,0,0,1-.615-.564L11,4.688a.673.673,0,0,1,.512-.676L11.625,4Z",
1299
+ transform: "translate(464.001 331)"
1300
+ }))));
1256
1301
  };
1257
1302
 
1258
- var MenuContainer = styled__default["default"](Card)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n padding: ", ";\n"], ["\n padding: ", ";\n"])), function (_a) {
1303
+ var StyledIconButton = styled__default["default"](IconButton)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject([""], [""])));
1304
+ var MenuContainer = styled__default["default"](Card)(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n padding: ", ";\n\n ", " {\n :first-child {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n :last-child {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n :not(:first-child):not(:last-child) {\n border-radius: 0;\n }\n }\n"], ["\n padding: ", ";\n\n ", " {\n :first-child {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n :last-child {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n :not(:first-child):not(:last-child) {\n border-radius: 0;\n }\n }\n"])), function (_a) {
1259
1305
  var theme = _a.theme;
1260
1306
  return theme.space.xxs;
1261
- });
1307
+ }, StyledIconButton);
1262
1308
  var FloatingMenu = function (props) {
1263
1309
  var editor = props.editor;
1264
1310
  if (!editor) {
1265
1311
  return null;
1266
1312
  }
1267
- return (jsxRuntime.jsx(react.BubbleMenu, __assign({}, props, { editor: editor }, { children: jsxRuntime.jsxs(MenuContainer, __assign({ isFloating: true }, { children: [jsxRuntime.jsx(IconButton, __assign({ size: "small", onClick: function () { return editor.chain().focus().toggleBold().run(); }, isBasic: !editor.isActive("bold"), isPill: false }, { children: editor.isActive("bold") ? jsxRuntime.jsx(SvgBoldFill, {}) : jsxRuntime.jsx(SvgBoldStroke, {}) })), jsxRuntime.jsx(IconButton, __assign({ size: "small", onClick: function () { return editor.chain().focus().toggleItalic().run(); }, isBasic: !editor.isActive("italic"), isPill: false }, { children: editor.isActive("italic") ? jsxRuntime.jsx(SvgItalicFill, {}) : jsxRuntime.jsx(SvgItalicStroke, {}) })), jsxRuntime.jsx(IconButton, __assign({ size: "small", onClick: function () { return editor.chain().focus().toggleBlockquote().run(); }, isBasic: !editor.isActive("blockquote"), isPill: false }, { children: editor.isActive("blockquote") ? jsxRuntime.jsx(SvgQuoteFill, {}) : jsxRuntime.jsx(SvgQuoteStroke, {}) }))] })) })));
1313
+ return (jsxRuntime.jsx(react.BubbleMenu, __assign({}, props, { editor: editor }, { children: jsxRuntime.jsxs(MenuContainer, __assign({ isFloating: true }, { children: [jsxRuntime.jsx(StyledIconButton, __assign({ size: "small", onClick: function () {
1314
+ return editor.chain().focus().toggleHeading({ level: 1 }).run();
1315
+ }, isBasic: !editor.isActive("heading", { level: 1 }), isPrimary: editor.isActive("heading", { level: 1 }), isPill: false }, { children: jsxRuntime.jsx(SvgH1Fill, {}, "ug-h1-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, __assign({ size: "small", onClick: function () {
1316
+ return editor.chain().focus().toggleHeading({ level: 2 }).run();
1317
+ }, isBasic: !editor.isActive("heading", { level: 2 }), isPrimary: editor.isActive("heading", { level: 2 }), isPill: false }, { children: jsxRuntime.jsx(SvgH2Fill, {}, "ug-h2-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, __assign({ size: "small", onClick: function () {
1318
+ return editor.chain().focus().toggleHeading({ level: 3 }).run();
1319
+ }, isBasic: !editor.isActive("heading", { level: 3 }), isPrimary: editor.isActive("heading", { level: 3 }), isPill: false }, { children: jsxRuntime.jsx(SvgH3Fill, {}, "ug-h3-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, __assign({ size: "small", onClick: function () { return editor.chain().focus().toggleBold().run(); }, isBasic: !editor.isActive("bold"), isPrimary: editor.isActive("bold"), isPill: false }, { children: jsxRuntime.jsx(SvgBoldFill, {}, "ug-bold-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, __assign({ size: "small", onClick: function () { return editor.chain().focus().toggleItalic().run(); }, isBasic: !editor.isActive("italic"), isPrimary: editor.isActive("italic"), isPill: false }, { children: jsxRuntime.jsx(SvgItalicFill, {}, "ug-italic-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, __assign({ size: "small", onClick: function () { return editor.chain().focus().toggleBlockquote().run(); }, isBasic: !editor.isActive("blockquote"), isPrimary: editor.isActive("blockquote"), isPill: false }, { children: jsxRuntime.jsx(SvgQuoteFill, {}, "ug-quote-button-bubble-menu") }))] })) })));
1268
1320
  };
1269
- var templateObject_1$U;
1321
+ var templateObject_1$U, templateObject_2$n;
1270
1322
 
1271
1323
  var Header$1 = styled__default["default"].div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: ", " ", ";\n border-bottom: 1px solid ", ";\n"], ["\n display: flex;\n flex-direction: column;\n padding: ", " ", ";\n border-bottom: 1px solid ", ";\n"])), function (_a) {
1272
1324
  var theme = _a.theme;
@@ -1278,7 +1330,7 @@ var Header$1 = styled__default["default"].div(templateObject_1$T || (templateObj
1278
1330
  var theme = _a.theme;
1279
1331
  return theme.palette.grey[300];
1280
1332
  });
1281
- var Title$2 = styled__default["default"](MD)(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
1333
+ var Title$2 = styled__default["default"](MD)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
1282
1334
  var validation = _a.validation, theme = _a.theme;
1283
1335
  if (validation === "success") {
1284
1336
  return "color: ".concat(theme.colors.successHue, ";");
@@ -1297,7 +1349,7 @@ var EditorHeader = function (props) {
1297
1349
  var title = props.title, validation = props.validation;
1298
1350
  return (jsxRuntime.jsx(Header$1, { children: jsxRuntime.jsx(Title$2, __assign({ isBold: true, validation: validation }, { children: title || "Write" })) }));
1299
1351
  };
1300
- var templateObject_1$T, templateObject_2$n;
1352
+ var templateObject_1$T, templateObject_2$m;
1301
1353
 
1302
1354
  var Footer$1 = styled__default["default"].div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: ", " 16px;\n background-color: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n padding: ", " 16px;\n background-color: ", ";\n"])), function (_a) {
1303
1355
  var theme = _a.theme;
@@ -1306,12 +1358,12 @@ var Footer$1 = styled__default["default"].div(templateObject_1$S || (templateObj
1306
1358
  var theme = _a.theme;
1307
1359
  return theme.palette.grey[100];
1308
1360
  });
1309
- var Text = styled__default["default"](SM)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n line-height: 1.7;\n"], ["\n line-height: 1.7;\n"])));
1361
+ var Text = styled__default["default"](SM)(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n line-height: 1.7;\n"], ["\n line-height: 1.7;\n"])));
1310
1362
  var EditorFooter = function (_a) {
1311
1363
  var saveText = _a.saveText;
1312
1364
  return jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsxs(Tag, { children: [isMac() ? "Cmd" : "Ctrl", "+enter"] }), "\u00A0", jsxRuntime.jsx(Text, { children: saveText || "to save" })] });
1313
1365
  };
1314
- var templateObject_1$S, templateObject_2$m;
1366
+ var templateObject_1$S, templateObject_2$l;
1315
1367
 
1316
1368
  var EditorContainer = styled__default["default"].div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n border: 2px solid;\n border-radius: ", ";\n &:focus-within {\n outline: ", ";\n outline-style: solid;\n }\n\n ", "\n\n ", "\n\n .ProseMirror {\n padding: ", ";\n background-color: #fff;\n min-height: 100px;\n outline: none;\n\n ", "\n\n ", "\n }\n"], ["\n border: 2px solid;\n border-radius: ", ";\n &:focus-within {\n outline: ", ";\n outline-style: solid;\n }\n\n ", "\n\n ", "\n\n .ProseMirror {\n padding: ", ";\n background-color: #fff;\n min-height: 100px;\n outline: none;\n\n ", "\n\n ", "\n }\n"])), function (_a) {
1317
1369
  var theme = _a.theme;
@@ -1421,43 +1473,7 @@ var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$P
1421
1473
  var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
1422
1474
  var templateObject_1$P;
1423
1475
 
1424
- var flexCenter = styled.css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
1425
- var flexColumnCenter = styled.css(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
1426
- var flexStart = styled.css(templateObject_3$e || (templateObject_3$e = __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) {
1427
- var theme = _a.theme;
1428
- return (theme.rtl ? "flex-end" : "flex-start");
1429
- });
1430
- var cardStyle = styled.css(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n position: relative;\n overflow: hidden;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n position: relative;\n overflow: hidden;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"])), function (_a) {
1431
- var theme = _a.theme;
1432
- return theme.borderRadii.lg;
1433
- }, function (_a) {
1434
- var theme = _a.theme;
1435
- return theme.components.notification.card.padding;
1436
- }, function (_a) {
1437
- var theme = _a.theme;
1438
- return theme.palette.grey["200"];
1439
- }, function (_a) {
1440
- var theme = _a.theme;
1441
- return theme.shadows.boxShadow(theme);
1442
- });
1443
- var templateObject_1$O, templateObject_2$l, templateObject_3$e, templateObject_4$9;
1444
-
1445
- styled__default["default"](Card)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n ", "\n text-align: center;\n justify-content: center;\n align-items: center;\n\n &.card-active {\n border-color: ", ";\n }\n"], ["\n ", "\n text-align: center;\n justify-content: center;\n align-items: center;\n\n &.card-active {\n border-color: ", ";\n }\n"])), cardStyle, function (_a) {
1446
- var theme = _a.theme;
1447
- return theme.palette.blue[300];
1448
- });
1449
- styled__default["default"].div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
1450
- var theme = _a.theme;
1451
- return theme.space.base;
1452
- });
1453
- styled__default["default"](Label)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n margin: ", "px auto;\n color: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"], ["\n margin: ", "px auto;\n color: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"])), function (_a) {
1454
- var theme = _a.theme;
1455
- return theme.space.base;
1456
- }, function (_a) {
1457
- var theme = _a.theme;
1458
- return theme.palette.grey[700];
1459
- });
1460
- var StyledLabel = styled__default["default"](Label)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
1476
+ var StyledLabel = styled__default["default"](Label)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
1461
1477
  var theme = _a.theme;
1462
1478
  return theme.space.base;
1463
1479
  });
@@ -1470,14 +1486,14 @@ var CheckboxCard = function (props) {
1470
1486
  };
1471
1487
  return (jsxRuntime.jsxs(SpecialCard, __assign({ title: props.label }, cardArgs, (props && !props.disabled && { onClick: handleToggle }), { className: checked ? "card-active" : "" }, { children: [jsxRuntime.jsx(SpecialCard.Thumb, __assign({ isStretched: true }, { children: props.iconActive && checked ? props.iconActive : props.icon })), jsxRuntime.jsx(SpecialCard.Header, __assign({ align: "center" }, { children: jsxRuntime.jsx(SpecialCard.Header.Text, { children: jsxRuntime.jsx(MD, __assign({ isBold: true, style: checked ? { color: theme.colors.primaryHue } : {} }, { children: props.label })) }) })), jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center", noDivider: true }, { children: jsxRuntime.jsx(Checkbox, __assign({}, props, { checked: checked, value: checked ? 1 : 0, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledLabel, __assign({ hidden: true }, { children: props.label })) })) }))] })));
1472
1488
  };
1473
- var templateObject_1$N, templateObject_2$k, templateObject_3$d, templateObject_4$8;
1489
+ var templateObject_1$O;
1474
1490
 
1475
- var UgField = styled__default["default"](reactForms.Field)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject([""], [""])));
1491
+ var UgField = styled__default["default"](reactForms.Field)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject([""], [""])));
1476
1492
  /**
1477
1493
  * A Field is a wrapper for input elements
1478
1494
  **/
1479
1495
  var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
1480
- var templateObject_1$M;
1496
+ var templateObject_1$N;
1481
1497
 
1482
1498
  var index = /*#__PURE__*/Object.freeze({
1483
1499
  __proto__: null,
@@ -1485,8 +1501,8 @@ var index = /*#__PURE__*/Object.freeze({
1485
1501
  Hint: reactForms.Hint
1486
1502
  });
1487
1503
 
1488
- var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
1489
- var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject([""], [""])));
1504
+ var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject([""], [""])));
1505
+ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$k || (templateObject_2$k = __makeTemplateObject([""], [""])));
1490
1506
  /**
1491
1507
  * An Input lets users enter text into a field.
1492
1508
  * <hr>
@@ -1495,9 +1511,9 @@ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$j || (te
1495
1511
  * - To enter multiline text, use a Textarea
1496
1512
  **/
1497
1513
  var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
1498
- var templateObject_1$L, templateObject_2$j;
1514
+ var templateObject_1$M, templateObject_2$k;
1499
1515
 
1500
- var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject([""], [""])));
1516
+ var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
1501
1517
  /**
1502
1518
  * Media elements add even more context to an input.
1503
1519
  * <hr>
@@ -1506,9 +1522,9 @@ var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObj
1506
1522
  * - To enter multiline text, use a Textarea
1507
1523
  **/
1508
1524
  var MediaInput = function (props) { return jsxRuntime.jsx(UgMediaInput, __assign({}, props)); };
1509
- var templateObject_1$K;
1525
+ var templateObject_1$L;
1510
1526
 
1511
- var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject([""], [""])));
1527
+ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject([""], [""])));
1512
1528
  /**
1513
1529
  * Radio buttons let users choose a single option among two or more mutually exclusive options.
1514
1530
  * <hr>
@@ -1520,7 +1536,7 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$J ||
1520
1536
  * - To select from a long list of options, use Select instead
1521
1537
  **/
1522
1538
  var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
1523
- var templateObject_1$J;
1539
+ var templateObject_1$K;
1524
1540
 
1525
1541
  var _path$i;
1526
1542
 
@@ -1540,7 +1556,7 @@ var SvgCheckLg = function SvgCheckLg(props) {
1540
1556
  })));
1541
1557
  };
1542
1558
 
1543
- var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"], ["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"])), function (_a) {
1559
+ var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"], ["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"])), function (_a) {
1544
1560
  var theme = _a.theme;
1545
1561
  return theme.space.base;
1546
1562
  }, function (_a) {
@@ -1550,7 +1566,7 @@ var StyledText = styled__default["default"](reactTypography.LG)(templateObject_1
1550
1566
  var theme = _a.theme;
1551
1567
  return theme.fontWeights.medium;
1552
1568
  });
1553
- var Circle = styled__default["default"].div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-left: auto;\n ", "\n"], ["\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-left: auto;\n ", "\n"])), function (_a) {
1569
+ var Circle = styled__default["default"].div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-left: auto;\n ", "\n"], ["\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-left: auto;\n ", "\n"])), function (_a) {
1554
1570
  var theme = _a.theme;
1555
1571
  return theme.space.base * 6;
1556
1572
  }, function (_a) {
@@ -1574,9 +1590,9 @@ var RadioCard = function (_a) {
1574
1590
  props.onChecked && props.onChecked(props.value);
1575
1591
  } }, { children: [jsxRuntime.jsx(SpecialCard.Meta, __assign({ justifyContent: "end" }, { children: jsxRuntime.jsx(Circle, __assign({ checked: (_b = props.checked) !== null && _b !== void 0 ? _b : false }, { children: jsxRuntime.jsx(SvgCheckLg, { fill: "white" }) })) })), jsxRuntime.jsx(SpecialCard.Thumb, __assign({ isStretched: true }, { children: iconActive && props.checked ? iconActive : icon })), jsxRuntime.jsx("input", { hidden: true, type: "radio", value: props.value, name: props.name, checked: props.checked }), jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(StyledText, __assign({ style: props.checked ? { color: theme.colors.primaryHue } : {} }, { children: props.label })) }))] })));
1576
1592
  };
1577
- var templateObject_1$I, templateObject_2$i;
1593
+ var templateObject_1$J, templateObject_2$j;
1578
1594
 
1579
- var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject([""], [""])));
1595
+ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject([""], [""])));
1580
1596
  /**
1581
1597
  * A Textarea is a form control for multi-line text.
1582
1598
  * <hr>
@@ -1584,9 +1600,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
1584
1600
  * - To enter multi-line text
1585
1601
  **/
1586
1602
  var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
1587
- var templateObject_1$H;
1603
+ var templateObject_1$I;
1588
1604
 
1589
- var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject([""], [""])));
1605
+ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject([""], [""])));
1590
1606
  /**
1591
1607
  * 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.
1592
1608
  * <hr>
@@ -1597,11 +1613,11 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$G
1597
1613
  * - To let users select from a list of settings, use Checkboxes instead
1598
1614
  **/
1599
1615
  var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
1600
- var templateObject_1$G;
1616
+ var templateObject_1$H;
1601
1617
 
1602
- var StyledCol$1 = styled__default["default"](reactGrid.Col)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n margin-bottom: ", ";\n\n @media screen and (max-width: ", ") {\n margin-bottom: ", ";\n }\n"], ["\n margin-bottom: ", ";\n\n @media screen and (max-width: ", ") {\n margin-bottom: ", ";\n }\n"])), theme.space.lg, theme.breakpoints.sm, theme.space.md);
1618
+ var StyledCol$1 = styled__default["default"](reactGrid.Col)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n margin-bottom: ", ";\n\n @media screen and (max-width: ", ") {\n margin-bottom: ", ";\n }\n"], ["\n margin-bottom: ", ";\n\n @media screen and (max-width: ", ") {\n margin-bottom: ", ";\n }\n"])), theme.space.lg, theme.breakpoints.sm, theme.space.md);
1603
1619
  var Col = function (props) { return jsxRuntime.jsx(StyledCol$1, __assign({}, props)); };
1604
- var templateObject_1$F;
1620
+ var templateObject_1$G;
1605
1621
 
1606
1622
  var Row$1 = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({}, props)); };
1607
1623
 
@@ -1664,15 +1680,15 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
1664
1680
  })));
1665
1681
  };
1666
1682
 
1667
- var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
1683
+ var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
1668
1684
  var Icon = function (props) {
1669
1685
  var type = props.type, size = props.size;
1670
1686
  var dim = size !== null && size !== void 0 ? size : 24;
1671
1687
  return (jsxRuntime.jsxs(StyledUgIcon$1, { children: [type === "square" && jsxRuntime.jsx(SvgUgSquare, { width: dim, height: dim }), type === "triangle" && jsxRuntime.jsx(SvgUgTriangle, { width: dim, height: dim }), type === "circle" && jsxRuntime.jsx(SvgUgCircle, { width: dim, height: dim })] }));
1672
1688
  };
1673
- var templateObject_1$E;
1689
+ var templateObject_1$F;
1674
1690
 
1675
- var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
1691
+ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
1676
1692
  /**
1677
1693
  * A Progress loader communicates progress when downloading or uploading content.
1678
1694
  * <hr>
@@ -1684,9 +1700,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
1684
1700
  - When loading page content, use a Skeleton loader instead
1685
1701
  */
1686
1702
  var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
1687
- var templateObject_1$D;
1703
+ var templateObject_1$E;
1688
1704
 
1689
- var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject([""], [""])));
1705
+ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
1690
1706
  /**
1691
1707
  * Breadcrumbs mark and communicate a user’s location in the product.
1692
1708
  * <hr>
@@ -1695,9 +1711,9 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
1695
1711
  - To provide a quick way to navigate to ancestor pages
1696
1712
  */
1697
1713
  var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
1698
- var templateObject_1$C;
1714
+ var templateObject_1$D;
1699
1715
 
1700
- var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
1716
+ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
1701
1717
  var theme = _a.theme;
1702
1718
  return theme.palette.white;
1703
1719
  });
@@ -1705,7 +1721,7 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$B ||
1705
1721
  * A Body defines the main content of an HTML document which displays on the browser
1706
1722
  */
1707
1723
  var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
1708
- var templateObject_1$B;
1724
+ var templateObject_1$C;
1709
1725
 
1710
1726
  /**
1711
1727
  * A Content defines the main content of an HTML document which displays on the browser
@@ -1729,23 +1745,23 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
1729
1745
  })));
1730
1746
  };
1731
1747
 
1732
- var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n ", ";\n font-family: ", ";\n"], ["\n ", ";\n font-family: ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; }, function (_a) {
1748
+ var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n ", ";\n font-family: ", ";\n"], ["\n ", ";\n font-family: ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; }, function (_a) {
1733
1749
  var theme = _a.theme;
1734
1750
  return theme.fonts.system;
1735
1751
  });
1736
- styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
1752
+ styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
1737
1753
  var theme = _a.theme;
1738
1754
  return theme.fonts.system;
1739
1755
  });
1740
1756
  var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
1741
- var templateObject_1$A, templateObject_2$h;
1757
+ var templateObject_1$B, templateObject_2$i;
1742
1758
 
1743
- var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
1759
+ var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
1744
1760
  var theme = _a.theme;
1745
1761
  return theme.fonts.system;
1746
1762
  });
1747
1763
  var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
1748
- var templateObject_1$z;
1764
+ var templateObject_1$A;
1749
1765
 
1750
1766
  var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
1751
1767
 
@@ -1794,7 +1810,7 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
1794
1810
  })));
1795
1811
  };
1796
1812
 
1797
- var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
1813
+ var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
1798
1814
  var theme = _a.theme, isCompact = _a.isCompact;
1799
1815
  return isCompact &&
1800
1816
  "\n width: ".concat(theme.components.chrome.nav.workspaceDropdownWidth, "px; \n ");
@@ -1810,13 +1826,13 @@ var WorkspacesDropdown = function (props) {
1810
1826
  ? selectedWorkspace.company + "'s workspace"
1811
1827
  : "Select workspace" })) })) }), jsxRuntime.jsxs(Menu, { children: [jsxRuntime.jsx(MenuHeaderItem, { children: jsxRuntime.jsx(MD, __assign({ isBold: true, style: { color: theme.palette.grey[800] } }, { children: props.workspacesLabel || "Workspaces" })) }), jsxRuntime.jsx(Separator, {}), props.workspaces && props.workspaces.map(function (item) { return (jsxRuntime.jsx(Item, __assign({ value: item }, { children: item.company }))); })] })] })));
1812
1828
  };
1813
- var templateObject_1$y;
1829
+ var templateObject_1$z;
1814
1830
 
1815
- var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$x || (templateObject_1$x = __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) {
1831
+ var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$y || (templateObject_1$y = __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) {
1816
1832
  var theme = _a.theme;
1817
1833
  return theme.breakpoints.md;
1818
1834
  });
1819
- var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n pointer-events: none;\n font-family: ", ";\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n pointer-events: none;\n font-family: ", ";\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
1835
+ var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n pointer-events: none;\n font-family: ", ";\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n pointer-events: none;\n font-family: ", ";\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
1820
1836
  var theme = _a.theme;
1821
1837
  return theme.colors.primaryHue;
1822
1838
  }, function (_a) {
@@ -1826,7 +1842,7 @@ var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObjec
1826
1842
  var theme = _a.theme;
1827
1843
  return theme.breakpoints.md;
1828
1844
  });
1829
- var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n font-family: ", ";\n z-index: 2;\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n font-family: ", ";\n z-index: 2;\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
1845
+ var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n font-family: ", ";\n z-index: 2;\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n font-family: ", ";\n z-index: 2;\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
1830
1846
  var theme = _a.theme;
1831
1847
  return theme.colors.primaryHue;
1832
1848
  }, function (_a) {
@@ -1836,7 +1852,7 @@ var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateOb
1836
1852
  var theme = _a.theme;
1837
1853
  return theme.breakpoints.md;
1838
1854
  });
1839
- var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_4$7 || (templateObject_4$7 = __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) {
1855
+ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_4$8 || (templateObject_4$8 = __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) {
1840
1856
  var theme = _a.theme;
1841
1857
  return theme.colors.primaryHue;
1842
1858
  }, function (_a) {
@@ -1846,9 +1862,9 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
1846
1862
  var BrandItem = function (props) {
1847
1863
  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.workspaces && props.workspaces.length > 1 ? (jsxRuntime.jsx(DropdownItem, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.brandName && (jsxRuntime.jsx(BrandName, __assign({}, props, { children: jsxRuntime.jsx(HeaderItemText, { children: props.brandName }) }))) }))] }));
1848
1864
  };
1849
- var templateObject_1$x, templateObject_2$g, templateObject_3$c, templateObject_4$7;
1865
+ var templateObject_1$y, templateObject_2$h, templateObject_3$d, templateObject_4$8;
1850
1866
 
1851
- var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), theme.components.chrome.header.height);
1867
+ var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), theme.components.chrome.header.height);
1852
1868
  /**
1853
1869
  * An Header is a visual way to display general information.
1854
1870
  * This can include navList Items, modal, profile settings.
@@ -1857,13 +1873,13 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
1857
1873
  Header.HeaderItem = HeaderItem;
1858
1874
  Header.HeaderItemText = HeaderItemText;
1859
1875
  Header.HeaderItemIcon = HeaderItemIcon;
1860
- var templateObject_1$w;
1876
+ var templateObject_1$x;
1861
1877
 
1862
1878
  var HeaderSkeleton = function () {
1863
1879
  return (jsxRuntime.jsxs(Header, __assign({ isStandalone: true }, { children: [jsxRuntime.jsx(LogoIconContainer, __assign({ hasLogo: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }) })), jsxRuntime.jsx(HeaderItem, __assign({ style: { marginRight: "auto", marginLeft: "-4px" } }, { children: window.matchMedia("only screen and (min-width: 576px)").matches ? (jsxRuntime.jsx(Skeleton, { width: "200px", height: theme.space.sm })) : (jsxRuntime.jsx(Skeleton, { width: "80px", height: theme.space.sm, style: { marginLeft: theme.space.sm } })) })), jsxRuntime.jsx(HeaderItem, __assign({ isRound: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) }) }) }))] })));
1864
1880
  };
1865
1881
 
1866
- var ChevronButton = styled__default["default"](IconButton)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
1882
+ var ChevronButton = styled__default["default"](IconButton)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
1867
1883
  var theme = _a.theme;
1868
1884
  return theme.breakpoints.sm;
1869
1885
  });
@@ -1875,9 +1891,9 @@ var AppHeader = function (_a) {
1875
1891
  var brand = _a.brand, avatar = _a.avatar, isLoading = _a.isLoading, args = __rest(_a, ["brand", "avatar", "isLoading"]);
1876
1892
  return isLoading ? jsxRuntime.jsx(HeaderSkeleton, {}) : (jsxRuntime.jsxs(Header, __assign({}, args, { children: [jsxRuntime.jsx(BrandItem, __assign({}, brand, { toggleMenu: args.onSidebarMenuToggle })), args.hasChangelog && args.changelogItem && (jsxRuntime.jsx(HeaderItem, __assign({ style: { marginRight: "-" + theme.space.xs } }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: args.changelogItem }) }))), jsxRuntime.jsx(HeaderItem, __assign({ isRound: true, onClick: args.onProfileModalToggle }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Avatar, __assign({}, avatar)), jsxRuntime.jsx(ChevronButton, __assign({ size: "small", isRotated: args.isProfileModalOpen }, { children: jsxRuntime.jsx(SvgChevronDownStroke, {}) }))] }) }) }))] })));
1877
1893
  };
1878
- var templateObject_1$v;
1894
+ var templateObject_1$w;
1879
1895
 
1880
- var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n border-right: ", ";\n border-color: ", ";\n ", "\n transition: width 0.25s ease-in-out;\n padding-top: ", ";\n @media (min-width: ", ") {\n padding-left: ", ";\n }\n"], ["\n border-right: ", ";\n border-color: ", ";\n ", "\n transition: width 0.25s ease-in-out;\n padding-top: ", ";\n @media (min-width: ", ") {\n padding-left: ", ";\n }\n"])), function (_a) {
1896
+ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n border-right: ", ";\n border-color: ", ";\n ", "\n transition: width 0.25s ease-in-out;\n padding-top: ", ";\n @media (min-width: ", ") {\n padding-left: ", ";\n }\n"], ["\n border-right: ", ";\n border-color: ", ";\n ", "\n transition: width 0.25s ease-in-out;\n padding-top: ", ";\n @media (min-width: ", ") {\n padding-left: ", ";\n }\n"])), function (_a) {
1881
1897
  var theme = _a.theme;
1882
1898
  return theme.borders.sm;
1883
1899
  }, function (_a) {
@@ -1904,10 +1920,10 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$u || (t
1904
1920
  - To give a consistent dashboard and navigation experience
1905
1921
  */
1906
1922
  var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
1907
- var templateObject_1$u;
1923
+ var templateObject_1$v;
1908
1924
 
1909
- var SelectedItemStyle = styled.css(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) { return props.theme.palette.kale["100"]; });
1910
- var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"], ["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"])), function (props) { return props.theme.space.base * 6; }, function (props) { return props.theme.space.base * 6; }, function (_a) {
1925
+ var SelectedItemStyle = styled.css(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) { return props.theme.palette.kale["100"]; });
1926
+ var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"], ["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"])), function (props) { return props.theme.space.base * 6; }, function (props) { return props.theme.space.base * 6; }, function (_a) {
1911
1927
  var theme = _a.theme;
1912
1928
  return theme.fonts.system;
1913
1929
  }, function (props) { return !props.isExpanded && "display: none;"; }, function (props) { return props.isCurrent && SelectedItemStyle; }, SelectedItemStyle, function (props) { return props.theme.colors.primaryHue; }, function (props) { return props.theme.fontWeights.medium; }, function (props) {
@@ -1918,11 +1934,11 @@ var NavItem = function (props) {
1918
1934
  // const { isExpanded } = props;
1919
1935
  return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
1920
1936
  };
1921
- var templateObject_1$t, templateObject_2$f;
1937
+ var templateObject_1$u, templateObject_2$g;
1922
1938
 
1923
- var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject([""], [""])));
1939
+ var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject([""], [""])));
1924
1940
  var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
1925
- var templateObject_1$s;
1941
+ var templateObject_1$t;
1926
1942
 
1927
1943
  var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "200px" } }, { children: props.children })) }))); };
1928
1944
 
@@ -1960,7 +1976,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
1960
1976
  })));
1961
1977
  };
1962
1978
 
1963
- var StyledToggle = styled__default["default"](IconButton)(templateObject_1$r || (templateObject_1$r = __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) {
1979
+ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$s || (templateObject_1$s = __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) {
1964
1980
  var theme = _a.theme;
1965
1981
  return theme.space.base * 6;
1966
1982
  }, function (_a) {
@@ -1985,18 +2001,18 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$r ||
1985
2001
  var NavToggle = function (props) {
1986
2002
  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%" } })) })));
1987
2003
  };
1988
- var templateObject_1$r;
2004
+ var templateObject_1$s;
1989
2005
 
1990
- var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$q || (templateObject_1$q = __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;"; });
2006
+ var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$r || (templateObject_1$r = __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;"; });
1991
2007
  var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
1992
- var templateObject_1$q;
2008
+ var templateObject_1$r;
1993
2009
 
1994
- var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$p || (templateObject_1$p = __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; });
1995
- var UgNavItem = styled__default["default"](NavItem)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n flex-flow: column;\n align-items: flex-start;\n"], ["\n flex-flow: column;\n align-items: flex-start;\n"])));
2010
+ var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$q || (templateObject_1$q = __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; });
2011
+ var UgNavItem = styled__default["default"](NavItem)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n flex-flow: column;\n align-items: flex-start;\n"], ["\n flex-flow: column;\n align-items: flex-start;\n"])));
1996
2012
  var NavItemProject = function (props) { return jsxRuntime.jsx(UgNavItem, __assign({}, props)); };
1997
2013
  NavItemProject.Title = NavItemText;
1998
2014
  NavItemProject.SubTitle = UgProjectSubtitle;
1999
- var templateObject_1$p, templateObject_2$e;
2015
+ var templateObject_1$q, templateObject_2$f;
2000
2016
 
2001
2017
  var _path$a;
2002
2018
 
@@ -2165,7 +2181,7 @@ var SvgTemplatesActive = function SvgTemplatesActive(props) {
2165
2181
  })))));
2166
2182
  };
2167
2183
 
2168
- var StyledNav = styled__default["default"](Nav)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
2184
+ var StyledNav = styled__default["default"](Nav)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
2169
2185
  var isExpanded = _a.isExpanded, theme = _a.theme;
2170
2186
  return isExpanded && "width: ".concat(theme.components.chrome.nav.openWidth);
2171
2187
  });
@@ -2173,11 +2189,11 @@ var LoadingSidebar = function (props) {
2173
2189
  var isExpanded = props.isExpanded;
2174
2190
  return (jsxRuntime.jsxs(StyledNav, __assign({}, props, { isExpanded: isExpanded }, { children: [jsxRuntime.jsx(NavToggle, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: isExpanded, isCurrent: true }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) })), jsxRuntime.jsx(Skeleton, { height: "12px", width: "60%" }), jsxRuntime.jsx(NavItemText, {})] })), jsxRuntime.jsx(NavDivider, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 1), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 2), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 3), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 3), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none" } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
2175
2191
  };
2176
- var templateObject_1$o;
2192
+ var templateObject_1$p;
2177
2193
 
2178
- var TokenContainer = styled__default["default"].div(templateObject_1$n || (templateObject_1$n = __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"])));
2179
- var ScrollingContainer = styled__default["default"].div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"])));
2180
- var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"], ["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"])), function (_a) {
2194
+ var TokenContainer = styled__default["default"].div(templateObject_1$o || (templateObject_1$o = __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"])));
2195
+ var ScrollingContainer = styled__default["default"].div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"])));
2196
+ var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"], ["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"])), function (_a) {
2181
2197
  var isExpanded = _a.isExpanded;
2182
2198
  return isExpanded &&
2183
2199
  "\n display: block;\n padding-right: ".concat(theme.space.md, ";\n ");
@@ -2212,9 +2228,9 @@ var Sidebar = function (props) {
2212
2228
  } }, { children: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: function () { return navigate("home"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "services", onClick: function () { return navigate("services"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "services" ? jsxRuntime.jsx(SvgTemplatesActive, {}) : jsxRuntime.jsx(SvgTemplates, {}) })), jsxRuntime.jsx(NavItemText, { children: props.servicesItemLabel || "Services" })] })), jsxRuntime.jsxs(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: [jsxRuntime.jsx(SvgFolderIcon, {}), " ", props.dividerLabel || ""] })), jsxRuntime.jsx(ScrollingContainer, { children: props.projects &&
2213
2229
  props.projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "projects/".concat(project.id), onClick: function () { return navigate("projects", 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", paddingBottom: theme.space.md } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
2214
2230
  };
2215
- var templateObject_1$n, templateObject_2$d, templateObject_3$b;
2231
+ var templateObject_1$o, templateObject_2$e, templateObject_3$c;
2216
2232
 
2217
- 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 @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"])), function (_a) {
2233
+ var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$n || (templateObject_1$n = __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 @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"])), function (_a) {
2218
2234
  var theme = _a.theme;
2219
2235
  return theme.breakpoints.sm;
2220
2236
  }, function (_a) {
@@ -2225,21 +2241,21 @@ var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$m ||
2225
2241
  * A Main defines the main content of an HTML document which displays on the browser
2226
2242
  */
2227
2243
  var Main$1 = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
2228
- var templateObject_1$m;
2244
+ var templateObject_1$n;
2229
2245
 
2230
- var StyledHr = styled__default["default"].hr(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n margin: ", "px 0 ", "px 0;\n border: none;\n border-top: 1px solid ", ";\n"], ["\n margin: ", "px 0 ", "px 0;\n border: none;\n border-top: 1px solid ", ";\n"])), theme.space.base * 6, theme.space.base * 8, theme.palette.grey[300]);
2246
+ var StyledHr = styled__default["default"].hr(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n margin: ", "px 0 ", "px 0;\n border: none;\n border-top: 1px solid ", ";\n"], ["\n margin: ", "px 0 ", "px 0;\n border: none;\n border-top: 1px solid ", ";\n"])), theme.space.base * 6, theme.space.base * 8, theme.palette.grey[300]);
2231
2247
  var PageLoader = function () {
2232
2248
  var isSidebarOpen = window.matchMedia("only screen and (min-width: 576px)").matches;
2233
2249
  return (jsxRuntime.jsx(reactChrome.Chrome, __assign({ isFluid: true, hue: theme.palette.white }, { children: jsxRuntime.jsxs(Body$1, { children: [jsxRuntime.jsx(AppHeader, { isLoading: true }), jsxRuntime.jsxs(Content, { children: [jsxRuntime.jsx(Sidebar, { isExpanded: isSidebarOpen, isLoading: true }), jsxRuntime.jsxs(Main$1, { children: [jsxRuntime.jsx(Skeleton, { width: "30%", height: "32px", style: { marginTop: theme.space.sm, marginLeft: theme.space.sm } }), jsxRuntime.jsx(StyledHr, { style: { margin: "24px 0" } }), jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) }))] })] })] })] }) })));
2234
2250
  };
2235
- var templateObject_1$l;
2251
+ var templateObject_1$m;
2236
2252
 
2237
2253
  /**
2238
2254
  * Title is a basic component used to display a title. Often used in card headers.
2239
2255
  */
2240
2256
  var Title$1 = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
2241
2257
 
2242
- var StyledCard = styled__default["default"](ContainerCard)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n @media screen and (max-width: ", ") {\n border: 0;\n }\n"], ["\n @media screen and (max-width: ", ") {\n border: 0;\n }\n"])), theme.breakpoints.sm);
2258
+ var StyledCard = styled__default["default"](ContainerCard)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n @media screen and (max-width: ", ") {\n border: 0;\n }\n"], ["\n @media screen and (max-width: ", ") {\n border: 0;\n }\n"])), theme.breakpoints.sm);
2243
2259
  /**
2244
2260
  * Login Form
2245
2261
  * <hr>
@@ -2270,9 +2286,9 @@ var LoginForm = function (props) {
2270
2286
  : false, isPrimary: true, isPill: true, themeColor: theme.colors.accentHue, style: { marginBottom: theme.space.md } }, { children: props.buttonText })), status && (jsxRuntime.jsx("div", __assign({ style: { textAlign: "center" } }, { children: jsxRuntime.jsx(Message, __assign({ validation: "error" }, { children: status.message })) })))] })));
2271
2287
  } }))] })), props.onBackClick && (jsxRuntime.jsxs(Button, __assign({ onClick: props.onBackClick, isBasic: true, style: { marginTop: theme.space.md } }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) }), props.backToLabel || "Back to UNGUESS"] })))] }));
2272
2288
  };
2273
- var templateObject_1$k;
2289
+ var templateObject_1$l;
2274
2290
 
2275
- var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
2291
+ var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
2276
2292
  var theme = _a.theme;
2277
2293
  return theme.palette.grey["800"];
2278
2294
  });
@@ -2281,10 +2297,10 @@ var FooterItem = reactModals.FooterItem;
2281
2297
  Modal.Header = reactModals.Header;
2282
2298
  Modal.Body = ugModalBody;
2283
2299
  Modal.Footer = reactModals.Footer;
2284
- var templateObject_1$j;
2300
+ var templateObject_1$k;
2285
2301
 
2286
- var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n max-height: 100%;\n border-radius: 0;\n left: unset;\n right: unset;\n top: unset;\n bottom: unset;\n"], ["\n width: 100%;\n height: 100%;\n max-height: 100%;\n border-radius: 0;\n left: unset;\n right: unset;\n top: unset;\n bottom: unset;\n"])));
2287
- var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
2302
+ var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n max-height: 100%;\n border-radius: 0;\n left: unset;\n right: unset;\n top: unset;\n bottom: unset;\n"], ["\n width: 100%;\n height: 100%;\n max-height: 100%;\n border-radius: 0;\n left: unset;\n right: unset;\n top: unset;\n bottom: unset;\n"])));
2303
+ var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
2288
2304
  var theme = _a.theme;
2289
2305
  return "".concat(theme.space.sm, " ").concat(theme.space.base * 6, "px");
2290
2306
  }, function (_a) {
@@ -2294,7 +2310,7 @@ var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$c |
2294
2310
  var theme = _a.theme;
2295
2311
  return theme.space.md;
2296
2312
  });
2297
- var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n background-color: ", ";\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n background-color: ", ";\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
2313
+ var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n background-color: ", ";\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n background-color: ", ";\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
2298
2314
  var theme = _a.theme;
2299
2315
  return theme.palette.grey["100"];
2300
2316
  }, function (_a) {
@@ -2307,7 +2323,7 @@ var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$a ||
2307
2323
  var theme = _a.theme;
2308
2324
  return "".concat(theme.space.lg, " ").concat(theme.space.md);
2309
2325
  });
2310
- var StyledFooter = styled__default["default"](Modal.Footer)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n padding: ", "px\n ", "px;\n"], ["\n padding: ", "px\n ", "px;\n"])), function (_a) {
2326
+ var StyledFooter = styled__default["default"](Modal.Footer)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n padding: ", "px\n ", "px;\n"], ["\n padding: ", "px\n ", "px;\n"])), function (_a) {
2311
2327
  var theme = _a.theme;
2312
2328
  return theme.space.base * 4;
2313
2329
  }, function (_a) {
@@ -2321,7 +2337,7 @@ ModalFullScreen.Body = StyledBody$4;
2321
2337
  ModalFullScreen.Footer = StyledFooter;
2322
2338
  ModalFullScreen.Close = StyledModalClose;
2323
2339
  ModalFullScreen.FooterItem = FooterItem;
2324
- var templateObject_1$i, templateObject_2$c, templateObject_3$a, templateObject_4$6, templateObject_5$4;
2340
+ var templateObject_1$j, templateObject_2$d, templateObject_3$b, templateObject_4$7, templateObject_5$4;
2325
2341
 
2326
2342
  /**
2327
2343
  * The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
@@ -2342,7 +2358,7 @@ var Notification = function (props) { return (jsxRuntime.jsx(reactNotifications.
2342
2358
  var ToastProvider = function (props) { return jsxRuntime.jsx(reactNotifications.ToastProvider, __assign({}, props)); };
2343
2359
  var useToast = reactNotifications.useToast;
2344
2360
 
2345
- var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject([""], [""])));
2361
+ var UgPagination = styled__default["default"](reactPagination.Pagination)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject([""], [""])));
2346
2362
  /**
2347
2363
  * Pagination separates content into pages and allows users to navigate between those pages.
2348
2364
 
@@ -2352,21 +2368,21 @@ var UgPagination = styled__default["default"](reactPagination.Pagination)(templa
2352
2368
  */
2353
2369
  var Pagination = function (props) { return jsxRuntime.jsx(UgPagination, __assign({}, props)); };
2354
2370
  var CursorPagination = reactPagination.CursorPagination;
2355
- var templateObject_1$h;
2371
+ var templateObject_1$i;
2356
2372
 
2357
- var MainContainer = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
2358
- var InformationContainer = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n padding: ", "; 0;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n flex-wrap: wrap;\n flex-direction: column;\n\n @media screen and (max-width: ", ") \n height: auto;\n } \n"], ["\n padding: ", "; 0;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n flex-wrap: wrap;\n flex-direction: column;\n\n @media screen and (max-width: ", ") \n height: auto;\n } \n"])), function (_a) {
2373
+ var MainContainer = styled__default["default"].div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
2374
+ var InformationContainer = styled__default["default"].div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n padding: ", "; 0;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n flex-wrap: wrap;\n flex-direction: column;\n\n @media screen and (max-width: ", ") \n height: auto;\n } \n"], ["\n padding: ", "; 0;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n flex-wrap: wrap;\n flex-direction: column;\n\n @media screen and (max-width: ", ") \n height: auto;\n } \n"])), function (_a) {
2359
2375
  var theme = _a.theme;
2360
2376
  return theme.space.xs;
2361
2377
  }, function (_a) {
2362
2378
  var theme = _a.theme;
2363
2379
  return theme.breakpoints.sm;
2364
2380
  });
2365
- var MetaContainer = styled__default["default"].div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-wrap: wrap;\n\n @media screen and (max-width: ", ") {\n display: none;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-wrap: wrap;\n\n @media screen and (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
2381
+ var MetaContainer = styled__default["default"].div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-wrap: wrap;\n\n @media screen and (max-width: ", ") {\n display: none;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-wrap: wrap;\n\n @media screen and (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
2366
2382
  var theme = _a.theme;
2367
2383
  return theme.breakpoints.sm;
2368
2384
  });
2369
- var Overline = styled__default["default"](MD)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n margin-bottom: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (_a) {
2385
+ var Overline = styled__default["default"](MD)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n margin-bottom: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (_a) {
2370
2386
  var theme = _a.theme;
2371
2387
  return theme.palette.grey[600];
2372
2388
  }, function (_a) {
@@ -2417,9 +2433,9 @@ var Image = styled__default["default"].img(templateObject_9 || (templateObject_9
2417
2433
  var Main = function (props) {
2418
2434
  return (jsxRuntime.jsx(MainContainer, { children: jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(StyledCol, __assign({ xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsxs(InformationContainer, { children: [props.infoOverline && jsxRuntime.jsx(Overline, { children: props.infoOverline }), props.infoTitle && jsxRuntime.jsx(Title, { children: props.infoTitle }), props.infoDescription && (jsxRuntime.jsx(Description$1, { children: props.infoDescription })), props.infoCounters && jsxRuntime.jsx(Counters, { children: props.infoCounters })] }) })), props.metaImage && (jsxRuntime.jsx(StyledCol, __assign({ xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsx(MetaContainer, { children: jsxRuntime.jsx(Image, { src: props.metaImage, title: props.infoTitle, alt: props.infoTitle }) }) })))] }) }));
2419
2435
  };
2420
- var templateObject_1$g, templateObject_2$b, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
2436
+ var templateObject_1$h, templateObject_2$c, templateObject_3$a, templateObject_4$6, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
2421
2437
 
2422
- var StyledPageHeader = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n background-color: ", ";\n padding: ", ";\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n background-color: ", ";\n padding: ", ";\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
2438
+ var StyledPageHeader = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n background-color: ", ";\n padding: ", ";\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n background-color: ", ";\n padding: ", ";\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
2423
2439
  var theme = _a.theme;
2424
2440
  return theme.palette.white;
2425
2441
  }, function (_a) {
@@ -2435,14 +2451,14 @@ var StyledPageHeader = styled__default["default"].div(templateObject_1$f || (tem
2435
2451
  var theme = _a.theme;
2436
2452
  return "".concat(theme.space.md, " ").concat(theme.space.md, " ").concat(theme.space.xs);
2437
2453
  });
2438
- var PullLeft = styled__default["default"].div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n padding: ", ";\n margin-bottom: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n padding: ", ";\n margin-bottom: ", ";\n"])), function (_a) {
2454
+ var PullLeft = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n padding: ", ";\n margin-bottom: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n padding: ", ";\n margin-bottom: ", ";\n"])), function (_a) {
2439
2455
  var theme = _a.theme;
2440
2456
  return "".concat(theme.space.xs, " 10px");
2441
2457
  }, function (_a) {
2442
2458
  var theme = _a.theme;
2443
2459
  return theme.space.xs;
2444
2460
  });
2445
- var ButtonContainer = styled__default["default"].div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n margin: ", " 0;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n margin: ", " 0;\n"])), function (_a) {
2461
+ var ButtonContainer = styled__default["default"].div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n margin: ", " 0;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n margin: ", " 0;\n"])), function (_a) {
2446
2462
  var theme = _a.theme;
2447
2463
  return theme.space.md;
2448
2464
  });
@@ -2463,7 +2479,7 @@ var PageHeader = function (props) {
2463
2479
  PageHeader.Breadcrumb = StyledBreadcrumb;
2464
2480
  PageHeader.Main = Main;
2465
2481
  PageHeader.Buttons = Buttons;
2466
- var templateObject_1$f, templateObject_2$a, templateObject_3$8;
2482
+ var templateObject_1$g, templateObject_2$b, templateObject_3$9;
2467
2483
 
2468
2484
  var _path$5;
2469
2485
 
@@ -2502,9 +2518,30 @@ var SvgThumbsUp = function SvgThumbsUp(props) {
2502
2518
  })));
2503
2519
  };
2504
2520
 
2505
- var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$e || (templateObject_1$e = __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; });
2521
+ var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __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; });
2506
2522
  var MenuItemIcon = function (props) { return (jsxRuntime.jsx(StyledMenuItemIcon, __assign({ isVisible: true }, props, { children: jsxRuntime.jsx(SvgChevronRightStroke, {}) }))); };
2507
- var templateObject_1$e;
2523
+ var templateObject_1$f;
2524
+
2525
+ var flexCenter = styled.css(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
2526
+ var flexColumnCenter = styled.css(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
2527
+ var flexStart = styled.css(templateObject_3$8 || (templateObject_3$8 = __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) {
2528
+ var theme = _a.theme;
2529
+ return (theme.rtl ? "flex-end" : "flex-start");
2530
+ });
2531
+ styled.css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n position: relative;\n overflow: hidden;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n position: relative;\n overflow: hidden;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"])), function (_a) {
2532
+ var theme = _a.theme;
2533
+ return theme.borderRadii.lg;
2534
+ }, function (_a) {
2535
+ var theme = _a.theme;
2536
+ return theme.components.notification.card.padding;
2537
+ }, function (_a) {
2538
+ var theme = _a.theme;
2539
+ return theme.palette.grey["200"];
2540
+ }, function (_a) {
2541
+ var theme = _a.theme;
2542
+ return theme.shadows.boxShadow(theme);
2543
+ });
2544
+ var templateObject_1$e, templateObject_2$a, templateObject_3$8, templateObject_4$5;
2508
2545
 
2509
2546
  /**
2510
2547
  * 1. Allows an item to contain a positioned sub-menu.