@appquality/unguess-design-system 2.10.59 → 2.10.62

package/CHANGELOG.md

@@ -1,3 +1,46 @@
+# v2.10.62 (Fri Jul 22 2022)
+
+#### ⚠️ Pushed to `master`
+
+- fix(editor): Trigger save on ctrl+click or cmd+click ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.10.61 (Fri Jul 22 2022)
+
+#### 🐛 Bug Fix
+
+- Add a new customizable editor component [#77](https://github.com/AppQuality/unguess-design-system/pull/77) ([@cannarocks](https://github.com/cannarocks))
+- feat(editor-ui): Add header and footer [#76](https://github.com/AppQuality/unguess-design-system/pull/76) ([@cannarocks](https://github.com/cannarocks))
+- Cup 1042 setup wygiwys editor [#75](https://github.com/AppQuality/unguess-design-system/pull/75) ([@cannarocks](https://github.com/cannarocks))
+
+#### 🔩 Dependency Updates
+
+- chore(deps): bump terser from 4.8.0 to 4.8.1 [#74](https://github.com/AppQuality/unguess-design-system/pull/74) ([@dependabot[bot]](https://github.com/dependabot[bot]))
+
+#### Authors: 2
+
+- [@dependabot[bot]](https://github.com/dependabot[bot])
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.10.60 (Tue Jun 21 2022)
+
+#### ⚠️ Pushed to `master`
+
+- fix(page-header): hide metaImage on mobile ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 1
+
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v2.10.59 (Tue Jun 21 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.d.ts

@@ -23,6 +23,7 @@ export * from "./stories/dropdowns/multiselect";
 export * from "./stories/dropdowns/select";
 export * from "./stories/dropdowns/autocomplete";
 export * from "./stories/dropdowns/menuheader";
+export * from "./stories/editor";
 export * from "./stories/forms/checkbox";
 export * from "./stories/forms/checkbox/cards";
 export * as FormField from "./stories/forms/field";

package/build/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var styled = require('styled-components');
 require('@zendeskgarden/css-bedrock');
 var reactTheming = require('@zendeskgarden/react-theming');
+var UAParser = require('ua-parser-js');
 var jsxRuntime = require('react/jsx-runtime');
 var reactAccordions = require('@zendeskgarden/react-accordions');
 var reactNotifications = require('@zendeskgarden/react-notifications');
@@ -17,6 +18,10 @@ var reactLoaders = require('@zendeskgarden/react-loaders');
 var reactTypography = require('@zendeskgarden/react-typography');
 var reactModals = require('@zendeskgarden/react-modals');
 var reactDropdowns = require('@zendeskgarden/react-dropdowns');
+var react = require('@tiptap/react');
+var Typography = require('@tiptap/extension-typography');
+var StarterKit = require('@tiptap/starter-kit');
+var Placeholder = require('@tiptap/extension-placeholder');
 var reactForms = require('@zendeskgarden/react-forms');
 var reactGrid = require('@zendeskgarden/react-grid');
 var reactChrome = require('@zendeskgarden/react-chrome');
@@ -46,7 +51,11 @@ function _interopNamespace(e) {
 }
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var UAParser__default = /*#__PURE__*/_interopDefaultLegacy(UAParser);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+var StarterKit__default = /*#__PURE__*/_interopDefaultLegacy(StarterKit);
+var Placeholder__default = /*#__PURE__*/_interopDefaultLegacy(Placeholder);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -231,6 +240,11 @@ var boxShadow = function (theme) {
     var blurRadius = "".concat(space.base * 2, "px");
     var shadowColor = reactTheming.getColor(palette.grey, 800, theme, 0.15);
     return shadows.lg(offsetY, blurRadius, shadowColor);
+};
+var isMac = function () {
+    var parser = new UAParser__default["default"]();
+    var os = parser.getOS().name;
+    return os && /Mac OS|iOS/.test(os);
 };
 
 var gradients = {
@@ -245,8 +259,8 @@ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), {
 
 var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[400], accentHue: palette.water[600] }), palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), fontWeights: __assign(__assign({}, reactTheming.DEFAULT_THEME.fontWeights), { semibold: 500 }), gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
 
-var GlobalStyle = styled.createGlobalStyle(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n  ::-webkit-scrollbar-track:hover {\n    border-left: solid 1px ", ";\n    border-right: solid 1px ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  ::-webkit-scrollbar-track {\n    border: solid 2px transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    box-shadow: inset 0 0 10px 10px ", ";\n    border: solid 2px transparent;\n    border-radius: 25px;\n  }\n\n  /* This stuff is for Firefox */\n  * {\n    scrollbar-color: ", " #FFFFFF;\n    scrollbar-width: thin;\n  }\n\n  html {\n    overflow-y: auto;\n  }\n\n  body {\n    font-family: ", ";\n    margin: 0;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n\n"], ["\n  ::-webkit-scrollbar-track:hover {\n    border-left: solid 1px ", ";\n    border-right: solid 1px ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  ::-webkit-scrollbar-track {\n    border: solid 2px transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    box-shadow: inset 0 0 10px 10px ", ";\n    border: solid 2px transparent;\n    border-radius: 25px;\n  }\n\n  /* This stuff is for Firefox */\n  * {\n    scrollbar-color: ", " #FFFFFF;\n    scrollbar-width: thin;\n  }\n\n  html {\n    overflow-y: auto;\n  }\n\n  body {\n    font-family: ", ";\n    margin: 0;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n\n"])), theme.palette.grey["200"], theme.palette.grey["200"], theme.palette.blue["200"], theme.palette.blue["200"], theme.fonts.system);
-var templateObject_1$19;
+var GlobalStyle = styled.createGlobalStyle(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n  ::-webkit-scrollbar-track:hover {\n    border-left: solid 1px ", ";\n    border-right: solid 1px ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  ::-webkit-scrollbar-track {\n    border: solid 2px transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    box-shadow: inset 0 0 10px 10px ", ";\n    border: solid 2px transparent;\n    border-radius: 25px;\n  }\n\n  /* This stuff is for Firefox */\n  * {\n    scrollbar-color: ", " #FFFFFF;\n    scrollbar-width: thin;\n  }\n\n  html {\n    overflow-y: auto;\n  }\n\n  body {\n    font-family: ", ";\n    margin: 0;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n\n"], ["\n  ::-webkit-scrollbar-track:hover {\n    border-left: solid 1px ", ";\n    border-right: solid 1px ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  ::-webkit-scrollbar-track {\n    border: solid 2px transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    box-shadow: inset 0 0 10px 10px ", ";\n    border: solid 2px transparent;\n    border-radius: 25px;\n  }\n\n  /* This stuff is for Firefox */\n  * {\n    scrollbar-color: ", " #FFFFFF;\n    scrollbar-width: thin;\n  }\n\n  html {\n    overflow-y: auto;\n  }\n\n  body {\n    font-family: ", ";\n    margin: 0;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n\n"])), theme.palette.grey["200"], theme.palette.grey["200"], theme.palette.blue["200"], theme.palette.blue["200"], theme.fonts.system);
+var templateObject_1$1e;
 
 /**
  * Accordions are headers that can be expanded to reveal content or collapsed to hide it.
@@ -261,14 +275,14 @@ Accordion.Header = reactAccordions.Accordion.Header;
 Accordion.Label = reactAccordions.Accordion.Label;
 Accordion.Panel = reactAccordions.Accordion.Panel;
 
-var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n   background-color: white;\n   color: ", ";\n   border-width: 2px;\n   font-size: ", ";\n"], ["\n   background-color: white;\n   color: ", ";\n   border-width: 2px;\n   font-size: ", ";\n"])), function (_a) {
+var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n   background-color: white;\n   color: ", ";\n   border-width: 2px;\n   font-size: ", ";\n"], ["\n   background-color: white;\n   color: ", ";\n   border-width: 2px;\n   font-size: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[700];
 }, function (_a) {
     var theme = _a.theme;
     return theme.fontSizes.sm;
 });
-var UgAlertTitle = styled__default["default"](reactNotifications.Title)(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n   font-size: ", ";\n"], ["\n   font-size: ", ";\n"])), function (_a) {
+var UgAlertTitle = styled__default["default"](reactNotifications.Title)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n   font-size: ", ";\n"], ["\n   font-size: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.fontSizes.md;
 });
@@ -282,9 +296,9 @@ var UgAlertTitle = styled__default["default"](reactNotifications.Title)(template
 var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
 Alert.Title = UgAlertTitle;
 Alert.Close = reactNotifications.Close;
-var templateObject_1$18, templateObject_2$s;
+var templateObject_1$1d, templateObject_2$u;
 
-var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n  text-transform: uppercase;\n\n  ", "\n"], ["\n  text-transform: uppercase;\n\n  ", "\n"])), function (props) {
+var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n  text-transform: uppercase;\n\n  ", "\n"], ["\n  text-transform: uppercase;\n\n  ", "\n"])), function (props) {
     return props.avatarType &&
         props.avatarType !== "image" &&
         "background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
@@ -308,7 +322,7 @@ var Avatar = function (props) {
     return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
 };
 Avatar.Text = UgAvatar.Text;
-var templateObject_1$17;
+var templateObject_1$1c;
 
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
@@ -339,7 +353,7 @@ var getThemeStyle = function (props) {
     }
     return theme;
 };
-var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject([""], [""])));
+var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject([""], [""])));
 /**
  * Buttons let users take action quickly.
  * Use a Button to enable actions or decisions that are important to a user’s workflow.
@@ -357,7 +371,7 @@ var Button = function (props) {
 };
 Button.StartIcon = UgButton.StartIcon;
 Button.EndIcon = UgButton.EndIcon;
-var templateObject_1$16;
+var templateObject_1$1b;
 
 /**
 A Button group lets users make a selection from a set of options.
@@ -387,7 +401,7 @@ Used for this:
 **/
 var SplitButton = function (props) { return (jsxRuntime.jsx(reactButtons.SplitButton, __assign({}, props))); };
 
-var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  ", "\n"], ["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  ", "\n"])), function (_a) {
+var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  ", "\n"], ["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.borderRadii.lg;
 }, function (_a) {
@@ -408,7 +422,7 @@ var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_
     - To group related content
  */
 var Card = function (props) { return jsxRuntime.jsx(UgCard, __assign({}, props)); };
-var UgContainerCard = styled__default["default"](reactNotifications.Well)(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n\n  @media (max-width: ", ") {\n    padding: ", ";\n  }\n"], ["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n\n  @media (max-width: ", ") {\n    padding: ", ";\n  }\n"])), function (_a) {
+var UgContainerCard = styled__default["default"](reactNotifications.Well)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n\n  @media (max-width: ", ") {\n    padding: ", ";\n  }\n"], ["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n\n  @media (max-width: ", ") {\n    padding: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.borderRadii.xl;
 }, function (_a) {
@@ -425,7 +439,7 @@ var UgContainerCard = styled__default["default"](reactNotifications.Well)(templa
     return "".concat(theme.space.xl, " ").concat(theme.space.md);
 });
 var ContainerCard = function (props) { return jsxRuntime.jsx(UgContainerCard, __assign({}, props)); };
-var templateObject_1$15, templateObject_2$r;
+var templateObject_1$1a, templateObject_2$t;
 
 /**
  * Tags let users categorize content using a keyword.
@@ -442,12 +456,12 @@ var Tag = function (props) { return jsxRuntime.jsx(reactTags.Tag, __assign({}, p
 Tag.Avatar = reactTags.Tag.Avatar;
 Tag.Close = reactTags.Tag.Close;
 
-var _g$2, _path$n;
+var _g$2, _path$t;
 
-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); }
+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); }
 
 var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -459,18 +473,18 @@ var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
     opacity: 0.3,
     d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z",
     fill: "#003A57"
-  }))), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
+  }))), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M17.9983 7.16705C17.5188 6.58566 17.1422 6.73039 17.1422 6.73039C17.1422 6.73039 16.406 7.02453 16.0401 7.16303C15.6742 7.30153 15.2408 7.17357 15.2408 7.17357L14.7579 6.8851C14.7579 6.8851 14.4296 6.56554 14.3656 6.18067C14.3123 5.78958 14.1888 5.00269 14.1888 5.00269C14.1888 5.00269 14.1356 4.61159 13.3938 4.47257C12.652 4.33356 12.4678 4.68715 12.4678 4.68715C12.4678 4.68715 12.0932 5.38344 11.9091 5.73703C11.7249 6.09062 11.3114 6.27118 11.3114 6.27118L10.7639 6.36908C10.7639 6.36908 10.3144 6.33771 10.0176 6.07271L9.12712 5.27769C9.12712 5.27769 8.8303 5.01268 8.18313 5.38632C7.53595 5.75997 7.61705 6.14953 7.61705 6.14953L7.86033 7.3182C7.94143 7.70776 7.74381 8.11275 7.74381 8.11275L7.38528 8.53794C7.38528 8.53794 7.02217 8.80577 6.62387 8.78845C6.22557 8.77114 5.43527 8.7474 5.43527 8.7474C5.43527 8.7474 5.03697 8.73009 4.78646 9.44201C4.53595 10.1539 4.84804 10.3956 4.84804 10.3956C4.84804 10.3956 5.46774 10.896 5.77983 11.1376C6.09192 11.3793 6.19373 11.8296 6.19373 11.8296L6.20207 12.3921C6.20207 12.3921 6.09618 12.8314 5.79331 13.079C5.49043 13.3266 4.86759 13.8171 4.86759 13.8171C4.86759 13.8171 4.56471 14.0647 4.81769 14.7769C5.08144 15.4828 5.46713 15.4783 5.46713 15.4783C5.46713 15.4783 6.26012 15.4569 6.64582 15.4524C7.03152 15.4479 7.40116 15.7145 7.40116 15.7145L7.76458 16.1447C7.76458 16.1447 7.96976 16.5499 7.89441 16.9425C7.81907 17.3351 7.66208 18.1094 7.66208 18.1094C7.66208 18.1094 7.58674 18.502 8.23785 18.8824C8.88895 19.2629 9.18553 19.0044 9.18553 19.0044C9.18553 19.0044 9.7724 18.4765 10.069 18.218C10.3655 17.9595 10.8115 17.9347 10.8115 17.9347L11.3609 18.0394C11.3609 18.0394 11.77 18.225 11.9608 18.5803C12.1516 18.9356 12.5268 19.6354 12.5268 19.6354C12.5268 19.6354 12.7176 19.9907 13.4583 19.8539C14.1946 19.7343 14.2529 19.337 14.2529 19.337C14.2529 19.337 14.3586 18.5487 14.4232 18.1623C14.4814 17.765 14.8086 17.4598 14.8086 17.4598L15.2939 17.1796C15.2939 17.1796 15.7281 17.0598 16.095 17.1971C16.4682 17.3453 17.1975 17.637 17.1975 17.637C17.1975 17.637 17.5707 17.7851 18.0424 17.2073C18.5142 16.6295 18.3189 16.2913 18.3189 16.2913C18.3189 16.2913 17.9006 15.6164 17.6882 15.2736C17.4759 14.9307 17.5197 14.4836 17.5197 14.4836L17.7038 13.9555C17.7038 13.9555 17.9482 13.5816 18.3203 13.454C18.6925 13.3264 19.4431 13.0822 19.4431 13.0822C19.4431 13.0822 19.8153 12.9546 19.8113 12.2005C19.8074 11.4464 19.4297 11.3153 19.4297 11.3153C19.4297 11.3153 18.6807 11.0641 18.303 10.9331C17.9253 10.802 17.677 10.4217 17.677 10.4217L17.4861 9.8919C17.4861 9.8919 17.4293 9.4447 17.6368 9.1067C17.8443 8.7687 18.2486 8.09891 18.2486 8.09891C18.2486 8.09891 18.4778 7.74844 17.9983 7.16707L17.9983 7.16705ZM9.33902 8.38466L10.6176 10.5992C10.0433 11.149 9.82793 11.9715 10.0567 12.7413L7.86713 14.0054C6.98868 12.0106 7.60355 9.66286 9.33905 8.38457L9.33902 8.38466ZM13.9748 16.414C11.9998 17.2778 9.65918 16.6363 8.37099 14.8783L10.5605 13.6141C11.1128 14.1971 11.9329 14.4219 12.6961 14.1994L13.9748 16.414ZM12.6552 13.132C12.1159 13.4434 11.4325 13.2561 11.1176 12.7107C10.8027 12.1652 10.9822 11.4797 11.5215 11.1684C12.0608 10.857 12.7441 11.0443 13.0591 11.5897C13.374 12.1352 13.1945 12.8207 12.6552 13.132ZM14.8376 15.9158L13.5591 13.7012C14.1333 13.1515 14.3487 12.3289 14.12 11.5591L16.3095 10.295C17.188 12.2898 16.5731 14.6376 14.8376 15.9159L14.8376 15.9158ZM13.6161 10.6863C13.0638 10.1034 12.2437 9.87862 11.4805 10.1011L10.2019 7.88652C12.1769 7.02266 14.5112 7.65314 15.8057 9.42223L13.6161 10.6863Z",
     fill: "#003A57"
   })));
 };
 
-var _g$1, _path$m, _path2$3, _path3$3, _path4$2, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1, _path11$1;
+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;
 
-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); }
+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); }
 
 var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
     width: 25,
     height: 24,
     viewBox: "0 0 25 24",
@@ -481,11 +495,11 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
   }, /*#__PURE__*/React__namespace.createElement("path", {
     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",
     fill: "#D3ECDB"
-  }))), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
+  }))), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
     opacity: 0.8,
     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",
     fill: "#70C38A"
-  })), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$4 || (_path2$4 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M6.55859 10.7679V10.1211H8.23278V10.7679H6.55859Z",
@@ -538,21 +552,21 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
   })));
 };
 
-var _path$l, _path2$2, _path3$2, _path4$1;
+var _path$r, _path2$3, _path3$2, _path4$1;
 
-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); }
+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); }
 
 var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
     fill: "#F8F9F9"
-  })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M20.6953 5.73905C21.0148 5.41953 21.0148 4.90149 20.6953 4.58197C20.3758 4.26245 19.8577 4.26245 19.5382 4.58197L11.88 12.2402L10.0849 9.95981C9.80539 9.60476 9.29098 9.54352 8.93593 9.82303C8.58088 10.1025 8.51963 10.6169 8.79914 10.972L11.1642 13.9763C11.3089 14.16 11.5252 14.2731 11.7586 14.2869C11.9921 14.3008 12.2203 14.2141 12.3856 14.0487L20.6953 5.73905Z",
     fill: "#27DD70"
   })), _path3$2 || (_path3$2 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -564,21 +578,21 @@ var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
   })));
 };
 
-var _path$k, _path2$1, _path3$1, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
+var _path$q, _path2$2, _path3$1, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
 
-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); }
+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); }
 
 var SvgCampaignProgress = function SvgCampaignProgress(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
     fill: "#F8F9F9"
-  })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M13.059 16.7647C13.059 16.1799 12.585 15.7059 12.0002 15.7059C11.4154 15.7059 10.9414 16.1799 10.9414 16.7647V19.9412C10.9414 20.5259 11.4154 21 12.0002 21C12.585 21 13.059 20.5259 13.059 19.9412V16.7647Z",
     fill: "#D1820A"
   })), _path3$1 || (_path3$1 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -611,21 +625,21 @@ var SvgCampaignProgress = function SvgCampaignProgress(props) {
   })));
 };
 
-var _path$j, _path2, _path3;
+var _path$p, _path2$1, _path3;
 
-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); }
+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); }
 
 var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
     fill: "#F8F9F9"
-  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M11.2266 13.0313H14.997M11.2266 9.26075V13.0313V9.26075ZM11.2266 13.0313L20.121 5.03906L11.2266 13.0313Z",
     stroke: "#1371D6",
     strokeWidth: 1.5,
@@ -640,7 +654,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
   })));
 };
 
-var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n  border-radius: ", ";\n  ", "\n"], ["\n  border-radius: ", ";\n  ", "\n"])), function (props) { return props.theme.borderRadii.xxl; }, function (props) {
+var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n  border-radius: ", ";\n  ", "\n"], ["\n  border-radius: ", ";\n  ", "\n"])), function (props) { return props.theme.borderRadii.xxl; }, function (props) {
     return props.isLight ?
         "\n    &:before {\n      background-image: linear-gradient(45deg, transparent, ".concat(props.theme.palette.grey[200], ", transparent);\n    }\n  ") : "\n    background-color: ".concat(props.theme.palette.grey[200], ";\n  ");
 });
@@ -658,22 +672,22 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
    - To communicate a typing status, use Inline instead
  */
 var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
-var templateObject_1$14;
+var templateObject_1$19;
 
-var CardMeta = styled__default["default"].div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+var CardMeta = styled__default["default"].div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
     var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent;
     return "\n      display: flex;\n      align-items: center;\n      flex-direction: ".concat(direction || "row", ";\n      justify-content: ").concat(justifyContent || "space-between", ";\n      height: ").concat(theme.space.base * 6, "px;\n      padding: ").concat(theme.space.xxs, " 0;\n      margin-bottom: ").concat(theme.space.xs, ";\n    ");
 });
-var templateObject_1$13;
+var templateObject_1$18;
 
-var CardThumbnail = styled__default["default"].div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+var CardThumbnail = styled__default["default"].div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
     var theme = _a.theme, align = _a.align, isStretched = _a.isStretched;
     return "\n    display: flex;\n\n    ".concat(!isStretched ? "max-width: ".concat(theme.space.base * 16, "px") : "", ";\n    max-height: ").concat(isStretched ? '150px' : "".concat(theme.space.base * 16, "px"), ";\n    ").concat(align === "left" ? "margin-right: auto;" : '', "\n    ").concat(align === "right" ? "margin-left: auto;" : '', "\n    ").concat(align === "center" || isStretched ? "margin: auto;" : '', "\n\n    padding: ").concat(theme.space.xxs, " 0;\n\n    svg {\n        width: 100%;\n        height: auto;\n    }\n  ");
 });
 CardThumbnail.defaultProps = {
     align: "left"
 };
-var templateObject_1$12;
+var templateObject_1$17;
 
 /**
  *  Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
@@ -685,11 +699,11 @@ var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({
 var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
 var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
 
-var Label$1 = styled__default["default"](SM)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var Label$1 = styled__default["default"](SM)(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[500];
 });
-var Title$2 = styled__default["default"](LG)(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  color: ", ";\n  font-weight: ", ";\n  margin-top: ", ";\n"], ["\n  color: ", ";\n  font-weight: ", ";\n  margin-top: ", ";\n"])), function (_a) {
+var Title$3 = styled__default["default"](LG)(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  color: ", ";\n  font-weight: ", ";\n  margin-top: ", ";\n"], ["\n  color: ", ";\n  font-weight: ", ";\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.colors.primaryHue;
 }, function (_a) {
@@ -712,11 +726,11 @@ var Container$1 = styled__default["default"].div(templateObject_4$b || (template
 });
 var CardHeader = function (props) { return jsxRuntime.jsx(Container$1, __assign({}, props)); };
 CardHeader.Label = Label$1;
-CardHeader.Title = Title$2;
+CardHeader.Title = Title$3;
 CardHeader.Text = Description$2;
-var templateObject_1$11, templateObject_2$q, templateObject_3$i, templateObject_4$b;
+var templateObject_1$16, templateObject_2$s, templateObject_3$i, templateObject_4$b;
 
-var Divider = styled__default["default"].div(templateObject_1$10 || (templateObject_1$10 = __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) {
+var Divider = styled__default["default"].div(templateObject_1$15 || (templateObject_1$15 = __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) {
     var theme = _a.theme;
     return theme.space.base * 3;
 }, function (_a) {
@@ -726,15 +740,15 @@ var Divider = styled__default["default"].div(templateObject_1$10 || (templateObj
     var theme = _a.theme;
     return theme.palette.grey["300"];
 });
-var Footer$1 = styled__default["default"].div(templateObject_2$p || (templateObject_2$p = __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"])));
+var Footer$2 = styled__default["default"].div(templateObject_2$r || (templateObject_2$r = __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"])));
 var Container = styled__default["default"].div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
     var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent, wrap = _a.wrap;
     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    ");
 });
-var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$1, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container, __assign({}, props, { children: props.children }))] })); };
-var templateObject_1$10, templateObject_2$p, templateObject_3$h;
+var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$2, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container, __assign({}, props, { children: props.children }))] })); };
+var templateObject_1$15, templateObject_2$r, templateObject_3$h;
 
-var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$$ || (templateObject_1$$ = __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) {
+var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$14 || (templateObject_1$14 = __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) {
     var theme = _a.theme;
     return theme.borderRadii.lg;
 }, function (_a) {
@@ -760,7 +774,7 @@ SpecialCard.Meta = CardMeta;
 SpecialCard.Thumb = CardThumbnail;
 SpecialCard.Header = CardHeader;
 SpecialCard.Footer = CardFooter;
-var templateObject_1$$;
+var templateObject_1$14;
 
 var CampaignCardSkeleton = function () {
     return (jsxRuntime.jsxs(SpecialCard, { children: [jsxRuntime.jsx(SpecialCard.Meta, { children: jsxRuntime.jsx(Skeleton, { width: "30%" }) }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "50%" }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Skeleton, { height: "26px", style: { backgroundColor: theme.palette.blue[400] } })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "45%" }), jsxRuntime.jsx(Skeleton, { width: "26px", height: "26px", style: { borderRadius: "100%" } })] })] }));
@@ -793,11 +807,11 @@ var getTypeDataIcon = function (type) {
             return SvgCampaignFunctional;
     }
 };
-var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n  color: ", ";\n  cursor: pointer;\n"], ["\n  color: ", ";\n  cursor: pointer;\n"])), function (_a) {
+var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n  color: ", ";\n  cursor: pointer;\n"], ["\n  color: ", ";\n  cursor: pointer;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey["700"];
 });
-var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  height: ", "px;\n  padding: ", "px\n    ", "px;\n  color: ", ";\n"], ["\n  height: ", "px;\n  padding: ", "px\n    ", "px;\n  color: ", ";\n"])), function (_a) {
+var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  height: ", "px;\n  padding: ", "px\n    ", "px;\n  color: ", ";\n"], ["\n  height: ", "px;\n  padding: ", "px\n    ", "px;\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base * 6;
 }, function (_a) {
@@ -820,9 +834,9 @@ var CampaignCard = function (_a) {
     var PillIcon = getTypeDataIcon(type);
     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, {})] })] })));
 };
-var templateObject_1$_, templateObject_2$o, templateObject_3$g;
+var templateObject_1$13, templateObject_2$q, templateObject_3$g;
 
-var StyledTagNew = styled__default["default"](Tag)(templateObject_1$Z || (templateObject_1$Z = __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) {
+var StyledTagNew = styled__default["default"](Tag)(templateObject_1$12 || (templateObject_1$12 = __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) {
     var theme = _a.theme;
     return theme.space.base * 6;
 }, function (_a) {
@@ -839,16 +853,16 @@ var ProductCard = function (props) {
     var isNew = props.isNew, productTitle = props.productTitle, labelNew = props.labelNew;
     return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, __assign({ title: productTitle }, props, { children: [jsxRuntime.jsx(SpecialCard.Meta, { children: isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" }))) }), props.icon && jsxRuntime.jsx(SpecialCard.Thumb, __assign({ align: "center" }, { children: props.icon })), jsxRuntime.jsxs(SpecialCard.Header, __assign({ onClick: props.onCtaClick, align: "center" }, { children: [props.preTitle && (jsxRuntime.jsx(SpecialCard.Header.Label, { children: props.preTitle })), jsxRuntime.jsx(SpecialCard.Header.Title, { children: productTitle })] })), jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(Button, __assign({ isPill: true, isPrimary: true, onClick: props.onCtaClick, themeColor: theme.colors.accentHue, size: "small" }, { children: props.ctaLabel })) }))] })));
 };
-var templateObject_1$Z;
+var templateObject_1$12;
 
-var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n  color: ", ";\n  margin-bottom: ", "px;\n"], ["\n  color: ", ";\n  margin-bottom: ", "px;\n"])), function (_a) {
+var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n  color: ", ";\n  margin-bottom: ", "px;\n"], ["\n  color: ", ";\n  margin-bottom: ", "px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[500];
 }, function (_a) {
     var theme = _a.theme;
     return theme.space.base;
 });
-var ServiceTitle = styled__default["default"](LG)(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  color: ", ";\n  margin-bottom: ", "px;\n  font-weight: ", ";\n"], ["\n  color: ", ";\n  margin-bottom: ", "px;\n  font-weight: ", ";\n"])), function (_a) {
+var ServiceTitle = styled__default["default"](LG)(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  color: ", ";\n  margin-bottom: ", "px;\n  font-weight: ", ";\n"], ["\n  color: ", ";\n  margin-bottom: ", "px;\n  font-weight: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.blue[600];
 }, function (_a) {
@@ -893,15 +907,15 @@ var ServiceCard = function (props) {
     var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
     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)); }) })))] })] })));
 };
-var templateObject_1$Y, templateObject_2$n, templateObject_3$f, templateObject_4$a, templateObject_5$5, templateObject_6$2, templateObject_7$1, templateObject_8$1;
+var templateObject_1$11, templateObject_2$p, templateObject_3$f, templateObject_4$a, templateObject_5$5, templateObject_6$2, templateObject_7$1, templateObject_8$1;
 
-var ButtonsWrap = styled__default["default"].div(templateObject_1$X || (templateObject_1$X = __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"])));
+var ButtonsWrap = styled__default["default"].div(templateObject_1$10 || (templateObject_1$10 = __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"])));
 var InfoCard = function (props) {
     return (jsxRuntime.jsxs(SpecialCard, __assign({}, (props.infoTitle && { title: props.infoTitle }), props, { children: [props.infoImg && (jsxRuntime.jsx(SpecialCard.Thumb, __assign({ isStretched: true }, { children: props.infoImg }))), jsxRuntime.jsxs(SpecialCard.Header, { children: [props.infoSubtitle && (jsxRuntime.jsx(SpecialCard.Header.Label, { children: props.infoSubtitle })), props.infoTitle && (jsxRuntime.jsx(SpecialCard.Header.Title, { children: props.infoTitle }))] }), props.infoButtons && (jsxRuntime.jsx(SpecialCard.Footer, __assign({ direction: "column", justifyContent: "center" }, { children: jsxRuntime.jsx(ButtonsWrap, { children: props.infoButtons.map(function (button) { return button; }) }) })))] })));
 };
-var templateObject_1$X;
+var templateObject_1$10;
 
-var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: ", ";\n    height: ", ";\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: ", ";\n    height: ", ";\n"])), function (_a) {
+var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: ", ";\n    height: ", ";\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: ", ";\n    height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.xl;
 }, function (_a) {
@@ -912,7 +926,7 @@ var UgClose = styled__default["default"](reactNotifications.Close)(templateObjec
  * Title is a basic component used to display a title. Often used in card headers.
  */
 var Close = function (props) { return jsxRuntime.jsx(UgClose, __assign({}, props)); };
-var templateObject_1$W;
+var templateObject_1$$;
 
 /**
  * Use Span to style and format inline text elements.
@@ -952,8 +966,8 @@ function useWindowSize() {
     return size;
 }
 
-var StyledSpan = styled__default["default"](Span)(templateObject_1$V || (templateObject_1$V = __makeTemplateObject([""], [""])));
-var StyledTag = styled__default["default"](Tag)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  background-color: transparent;\n  pointer-events: none;\n  ", "\n  svg {\n    margin-right: ", " !important;\n  }\n\n  ", " {\n    margin-left: ", ";\n    color: ", ";\n    font-weight: ", ";\n  }\n"], ["\n  background-color: transparent;\n  pointer-events: none;\n  ", "\n  svg {\n    margin-right: ", " !important;\n  }\n\n  ", " {\n    margin-left: ", ";\n    color: ", ";\n    font-weight: ", ";\n  }\n"])), function (_a) {
+var StyledSpan = styled__default["default"](Span)(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject([""], [""])));
+var StyledTag = styled__default["default"](Tag)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  background-color: transparent;\n  pointer-events: none;\n  ", "\n  svg {\n    margin-right: ", " !important;\n  }\n\n  ", " {\n    margin-left: ", ";\n    color: ", ";\n    font-weight: ", ";\n  }\n"], ["\n  background-color: transparent;\n  pointer-events: none;\n  ", "\n  svg {\n    margin-right: ", " !important;\n  }\n\n  ", " {\n    margin-left: ", ";\n    color: ", ";\n    font-weight: ", ";\n  }\n"])), function (_a) {
     var status = _a.status, theme = _a.theme;
     switch (status) {
         case "completed":
@@ -987,9 +1001,9 @@ var Counter = function (props) {
     return (jsxRuntime.jsxs(StyledTag, __assign({}, props, { size: props.size || "large" }, { children: [jsxRuntime.jsx(StyledTag.Avatar, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [status === "completed" && jsxRuntime.jsx(SvgCampaignCompleted, {}), status === "progress" && jsxRuntime.jsx(SvgCampaignProgress, {}), status === "incoming" && jsxRuntime.jsx(SvgCampaignIncoming, {}), status === "functional" && jsxRuntime.jsx(SvgCampaignFunctional, {}), status === "experiential" && jsxRuntime.jsx(SvgCampaignExperiential, {})] }) }), width > parseInt(theme.breakpoints.sm) && props.children, counter !== undefined && jsxRuntime.jsx(StyledSpan, { children: counter.toString() })] })));
 };
 Counter.Avatar = StyledTag.Avatar;
-var templateObject_1$V, templateObject_2$m;
+var templateObject_1$_, templateObject_2$o;
 
-var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n  @media (max-width: ", ") {\n    width: 100%;\n  }\n"], ["\n  @media (max-width: ", ") {\n    width: 100%;\n  }\n"])), function (_a) {
+var UgDrawer = styled__default["default"](reactModals.DrawerModal)(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n  @media (max-width: ", ") {\n    width: 100%;\n  }\n"], ["\n  @media (max-width: ", ") {\n    width: 100%;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.breakpoints.sm;
 });
@@ -1006,22 +1020,22 @@ Drawer.Body = reactModals.DrawerModal.Body;
 Drawer.Footer = reactModals.DrawerModal.Footer;
 Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
 Drawer.Close = reactModals.DrawerModal.Close;
-var templateObject_1$U;
+var templateObject_1$Z;
 
-var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject([""], [""])));
-var templateObject_1$T;
+var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject([""], [""])));
+var templateObject_1$Y;
 
 var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Field: Field$1
 });
 
-var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n  &[disabled] svg {\n    opacity: 0.5;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  &[disabled] svg {\n    opacity: 0.5;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n  &[disabled] svg {\n    opacity: 0.5;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  &[disabled] svg {\n    opacity: 0.5;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.blue[100];
 });
 var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
-var templateObject_1$S;
+var templateObject_1$X;
 
 /**
    * A Menu is a wrapper for items elements
@@ -1045,7 +1059,7 @@ var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaIte
  */
 var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
 
-var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     return props.isPrimary &&
         "\n      background-color: ".concat(props.theme.palette.blue[600], ";\n      color: white;\n      & svg[data-garden-id=\"forms.media_figure\"] {\n         color: white;\n      }\n   ");
 });
@@ -1062,7 +1076,7 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
 var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
 var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
 var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
-var templateObject_1$R;
+var templateObject_1$W;
 
 /**
  * Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
@@ -1077,6 +1091,248 @@ var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autoc
 
 var MenuHeaderItem = function (props) { return (jsxRuntime.jsx(reactDropdowns.HeaderItem, __assign({}, props))); };
 
+var editorStyle = styled.css(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n  > * + * {\n    margin-top: 0.75em;\n  }\n\n  *,\n  *:before,\n  *:after {\n    box-sizing: border-box;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    line-height: 1.1;\n    font-weight: 500;\n    color: ", ";\n  }\n\n  h1 {\n    font-size: 2.617924em;\n  }\n\n  h2 {\n    font-size: 1.618em;\n  }\n\n  h3 {\n    font-size: 1.5rem;\n  }\n\n  h4 {\n    font-size: 1.3rem;\n  }\n\n  h5 {\n    font-size: 1.2rem;\n  }\n\n  h6 {\n    font-size: 1.1rem;\n  }\n\n  /*=====\n      #Lists\n      =====*/\n  ul,\n  ol,\n  dl {\n    padding: 0.618em 0.618rem;\n    margin-left: 1rem;\n  }\n\n  ul {\n    list-style: disc;\n  }\n\n  ol {\n    list-style: decimal;\n  }\n\n  li {\n    padding: 0 0.618rem;\n    line-height: 1.618;\n  }\n\n  dt {\n    text-indent: -0.618rem;\n  }\n\n  dd {\n    margin: 0;\n    padding: 0 0.618rem 0 0.618rem;\n  }\n\n  hr {\n    border: none;\n    border-top: 2px solid rgba(#0d0d0d, 0.1);\n    margin: 2rem 0;\n  }\n\n  p,\n  blockquote {\n    line-height: 1.618;\n  }\n\n  p {\n    font-size: 1rem;\n    margin-bottom: 0.618em;\n  }\n\n  blockquote {\n    border-left: 3px solid;\n    border-color: ", ";\n    margin: 1.618em 0.618rem;\n    padding-left: 0.618em;\n  }\n\n  em,\n  i,\n  cite {\n    font-style: italic;\n  }\n\n  strong,\n  b {\n    font-weight: 500;\n  }\n\n  cite {\n    display: block;\n    text-align: right;\n  }\n\n  u {\n    text-decoration: none;\n    border-bottom: 1px dotted red;\n  }\n\n  small,\n  sub,\n  sup {\n    font-size: 0.618rem;\n    line-height: 1;\n  }\n\n  sub {\n    vertical-align: sub;\n  }\n\n  sup {\n    vertical-align: super;\n  }\n\n  s,\n  strike,\n  del {\n    text-decoration: strikethrough;\n  }\n\n  ins,\n  del {\n    background-color: rgba(220, 220, 220, 0.25);\n  }\n\n  ins {\n    text-decoration: none;\n  }\n\n  /*\n      mark and selection should be different, so user knows which one they've selected.\n      \n      mark and selections:\n      saturation: 44%\n      lightness: 75%\n      Hue is different\n      */\n  mark {\n    background-color: rgba(165, 220, 165, 0.9);\n  }\n\n  ::selection {\n    background-color: rgba(165, 220, 220, 0.9);\n  }\n\n  /* Because mark and selection have same saturation, brightenss, mark won't easily stand out if it's selected */\n  mark::selection {\n    background-color: rgba(165, 220, 110, 0.9);\n  }\n\n  /* dfn and dt both do the same thing: denote a term to be defined */\n  dfn,\n  dt {\n    font-style: oblique;\n    font-weight: 700;\n    text-transform: capitalize;\n  }\n\n  code {\n    background-color: ", ";\n    color: ", ";\n    padding: 0.2rem 0.3rem;\n    border-radius: 4px;\n  }\n\n  pre {\n    background: #0d0d0d;\n    color: #fff;\n    font-family: \"JetBrainsMono\", monospace;\n    padding: 0.75rem 1rem;\n    border-radius: 0.5rem;\n\n    code {\n      color: inherit;\n      padding: 0;\n      background: none;\n      font-size: 0.8rem;\n    }\n  }\n\n  kbd,\n  samp,\n  data {\n    background-color: rgba(165, 165, 165, 0.2);\n  }\n\n  kbd {\n    font-size: 0.75rem;\n    padding: 0.25ex 0.5ex;\n    border: 1px solid rgb(193, 193, 193);\n    border-radius: 3px;\n  }\n\n  /*Treat samp like a mini blockquote. because basically you're quoting what the computer would do*/\n  samp,\n  data {\n    padding: 0 10px;\n  }\n\n  var,\n  data {\n    font-style: italic;\n  }\n\n  samp {\n    border-left: 5px solid rgb(193, 193, 193);\n  }\n\n  data {\n    padding: 0 10px;\n  }\n\n  /* Placeholder (at the top) */\n    /*p.is-editor-empty:first-child::before {\n    content: attr(data-placeholder);\n    float: left;\n    color: #ced4da;\n    pointer-events: none;\n    height: 0;\n  }*/\n\n  /* Placeholder (on every new line) */\n  .is-empty::before {\n    content: attr(data-placeholder);\n    float: left;\n    color: #ced4da;\n    pointer-events: none;\n    height: 0;\n  }\n"], ["\n  > * + * {\n    margin-top: 0.75em;\n  }\n\n  *,\n  *:before,\n  *:after {\n    box-sizing: border-box;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    line-height: 1.1;\n    font-weight: 500;\n    color: ", ";\n  }\n\n  h1 {\n    font-size: 2.617924em;\n  }\n\n  h2 {\n    font-size: 1.618em;\n  }\n\n  h3 {\n    font-size: 1.5rem;\n  }\n\n  h4 {\n    font-size: 1.3rem;\n  }\n\n  h5 {\n    font-size: 1.2rem;\n  }\n\n  h6 {\n    font-size: 1.1rem;\n  }\n\n  /*=====\n      #Lists\n      =====*/\n  ul,\n  ol,\n  dl {\n    padding: 0.618em 0.618rem;\n    margin-left: 1rem;\n  }\n\n  ul {\n    list-style: disc;\n  }\n\n  ol {\n    list-style: decimal;\n  }\n\n  li {\n    padding: 0 0.618rem;\n    line-height: 1.618;\n  }\n\n  dt {\n    text-indent: -0.618rem;\n  }\n\n  dd {\n    margin: 0;\n    padding: 0 0.618rem 0 0.618rem;\n  }\n\n  hr {\n    border: none;\n    border-top: 2px solid rgba(#0d0d0d, 0.1);\n    margin: 2rem 0;\n  }\n\n  p,\n  blockquote {\n    line-height: 1.618;\n  }\n\n  p {\n    font-size: 1rem;\n    margin-bottom: 0.618em;\n  }\n\n  blockquote {\n    border-left: 3px solid;\n    border-color: ", ";\n    margin: 1.618em 0.618rem;\n    padding-left: 0.618em;\n  }\n\n  em,\n  i,\n  cite {\n    font-style: italic;\n  }\n\n  strong,\n  b {\n    font-weight: 500;\n  }\n\n  cite {\n    display: block;\n    text-align: right;\n  }\n\n  u {\n    text-decoration: none;\n    border-bottom: 1px dotted red;\n  }\n\n  small,\n  sub,\n  sup {\n    font-size: 0.618rem;\n    line-height: 1;\n  }\n\n  sub {\n    vertical-align: sub;\n  }\n\n  sup {\n    vertical-align: super;\n  }\n\n  s,\n  strike,\n  del {\n    text-decoration: strikethrough;\n  }\n\n  ins,\n  del {\n    background-color: rgba(220, 220, 220, 0.25);\n  }\n\n  ins {\n    text-decoration: none;\n  }\n\n  /*\n      mark and selection should be different, so user knows which one they've selected.\n      \n      mark and selections:\n      saturation: 44%\n      lightness: 75%\n      Hue is different\n      */\n  mark {\n    background-color: rgba(165, 220, 165, 0.9);\n  }\n\n  ::selection {\n    background-color: rgba(165, 220, 220, 0.9);\n  }\n\n  /* Because mark and selection have same saturation, brightenss, mark won't easily stand out if it's selected */\n  mark::selection {\n    background-color: rgba(165, 220, 110, 0.9);\n  }\n\n  /* dfn and dt both do the same thing: denote a term to be defined */\n  dfn,\n  dt {\n    font-style: oblique;\n    font-weight: 700;\n    text-transform: capitalize;\n  }\n\n  code {\n    background-color: ", ";\n    color: ", ";\n    padding: 0.2rem 0.3rem;\n    border-radius: 4px;\n  }\n\n  pre {\n    background: #0d0d0d;\n    color: #fff;\n    font-family: \"JetBrainsMono\", monospace;\n    padding: 0.75rem 1rem;\n    border-radius: 0.5rem;\n\n    code {\n      color: inherit;\n      padding: 0;\n      background: none;\n      font-size: 0.8rem;\n    }\n  }\n\n  kbd,\n  samp,\n  data {\n    background-color: rgba(165, 165, 165, 0.2);\n  }\n\n  kbd {\n    font-size: 0.75rem;\n    padding: 0.25ex 0.5ex;\n    border: 1px solid rgb(193, 193, 193);\n    border-radius: 3px;\n  }\n\n  /*Treat samp like a mini blockquote. because basically you're quoting what the computer would do*/\n  samp,\n  data {\n    padding: 0 10px;\n  }\n\n  var,\n  data {\n    font-style: italic;\n  }\n\n  samp {\n    border-left: 5px solid rgb(193, 193, 193);\n  }\n\n  data {\n    padding: 0 10px;\n  }\n\n  /* Placeholder (at the top) */\n    /*p.is-editor-empty:first-child::before {\n    content: attr(data-placeholder);\n    float: left;\n    color: #ced4da;\n    pointer-events: none;\n    height: 0;\n  }*/\n\n  /* Placeholder (on every new line) */\n  .is-empty::before {\n    content: attr(data-placeholder);\n    float: left;\n    color: #ced4da;\n    pointer-events: none;\n    height: 0;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey["800"];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey["300"];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[200];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.red[600];
+});
+var templateObject_1$V;
+
+var _path$o;
+
+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); }
+
+var SvgBoldFill = function SvgBoldFill(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16"
+  }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    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"
+  })));
+};
+
+var _path$n;
+
+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); }
+
+var SvgBoldStroke = function SvgBoldStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16"
+  }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    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"
+  })));
+};
+
+var _path$m;
+
+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); }
+
+var SvgItalicFill = function SvgItalicFill(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16"
+  }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeWidth: 2,
+    d: "M8 1h3M9.5 1l-3 14M5 15h3"
+  })));
+};
+
+var _path$l;
+
+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); }
+
+var SvgItalicStroke = function SvgItalicStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16"
+  }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M7.5 1.5h3M9 1.5l-3 14m-1.5 0h3"
+  })));
+};
+
+var _path$k, _path2;
+
+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); }
+
+var SvgQuoteFill = function SvgQuoteFill(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16"
+  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    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"
+  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeWidth: 2,
+    d: "M5.5 12C6.5 11 7 9.5 7 8V6m4.5 6c1-1 1.5-2.5 1.5-4V6"
+  })));
+};
+
+var _path$j;
+
+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); }
+
+var SvgQuoteStroke = function SvgQuoteStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16"
+  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    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"
+  })));
+};
+
+var MenuContainer = styled__default["default"](Card)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n  padding: ", ";\n"], ["\n  padding: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.space.xxs;
+});
+var FloatingMenu = function (props) {
+    var editor = props.editor;
+    if (!editor) {
+        return null;
+    }
+    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, {}) }))] })) })));
+};
+var templateObject_1$U;
+
+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) {
+    var theme = _a.theme;
+    return theme.space.xs;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.space.md;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[300];
+});
+var Title$2 = styled__default["default"](MD)(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.primaryHue;
+});
+var EditorHeader = function (_a) {
+    var title = _a.title;
+    return (jsxRuntime.jsx(Header$1, { children: jsxRuntime.jsx(Title$2, __assign({ isBold: true }, { children: title || "Write" })) }));
+};
+var templateObject_1$T, templateObject_2$n;
+
+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) {
+    var theme = _a.theme;
+    return theme.space.sm;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[100];
+});
+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"])));
+var EditorFooter = function (_a) {
+    var saveText = _a.saveText;
+    return jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsxs(Tag, { children: [isMac() ? "Cmd" : "Ctrl", "+enter"] }), "\u00A0", jsxRuntime.jsx(Text, { children: saveText || "to save" })] });
+};
+var templateObject_1$S, templateObject_2$m;
+
+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  .ProseMirror {\n    padding: ", ";\n    background-color: #fff;\n    min-height: 100px;\n    outline: none;\n\n    ", "\n  }\n"], ["\n  border: 2px solid ", ";\n  border-radius: ", ";\n  &:focus-within {\n    outline: ", ";\n    outline-style: solid;\n  }\n\n  .ProseMirror {\n    padding: ", ";\n    background-color: #fff;\n    min-height: 100px;\n    outline: none;\n\n    ", "\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.primaryHue;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.borderRadii.md;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.blue["300"];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.space.md;
+}, editorStyle);
+/**
+ * Editor is a wrapper around TipTap/ProseMirror
+ * <br>
+ * It's a rich text WYSIWYG editors.
+ * <hr>
+ * Used for this:
+    - To allow text customization with markup supports
+    - To develop collaborative text editing
+   
+   Not for this:
+    - Simple text input, use textarea instead.
+ */
+var Editor = function (_a) {
+    var onSave = _a.onSave, headerTitle = _a.headerTitle, footerSaveText = _a.footerSaveText, placeholderOptions = _a.placeholderOptions, props = __rest(_a, ["onSave", "headerTitle", "footerSaveText", "placeholderOptions"]);
+    var children = props.children, hasInlineMenu = props.hasInlineMenu, bubbleOptions = props.bubbleOptions;
+    var _b = React.useState(), activeEditor = _b[0], setActiveEditor = _b[1];
+    var onKeyDown = function (event) {
+        if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
+            if (onSave && activeEditor)
+                onSave(activeEditor);
+        }
+    };
+    var ed = react.useEditor(__assign({ extensions: [
+            Typography__default["default"],
+            StarterKit__default["default"],
+            Placeholder__default["default"].configure(__assign({ placeholder: function (_a) {
+                    var node = _a.node;
+                    if (node.type.name === "heading") {
+                        return "What’s the title?";
+                    }
+                    return "Can you add some further context?";
+                } }, placeholderOptions)),
+        ], content: children || "", editorProps: {
+            handleKeyDown: function (view, event) {
+                if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
+                    return true;
+                }
+                return false;
+            },
+        } }, props));
+    if (!ed) {
+        return null;
+    }
+    // Add here because we want to keep also the listener from the props.
+    ed.on("update", function (_a) {
+        var editor = _a.editor;
+        return setActiveEditor(editor);
+    });
+    return (jsxRuntime.jsxs(EditorContainer, { children: [jsxRuntime.jsx(EditorHeader, { title: headerTitle }), hasInlineMenu && (jsxRuntime.jsx(FloatingMenu, { editor: ed, tippyOptions: __assign({}, bubbleOptions) })), jsxRuntime.jsx(react.EditorContent, { editor: ed, onKeyDown: onKeyDown }), jsxRuntime.jsx(EditorFooter, { saveText: footerSaveText })] }));
+};
+var templateObject_1$R;
+
 var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject([""], [""])));
 /**
    * A Checkbox lets users select and unselect options from a list.
@@ -1496,7 +1752,7 @@ var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templ
 });
 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) {
     var theme = _a.theme;
-    return theme.palette.blue["600"];
+    return theme.colors.primaryHue;
 }, function (_a) {
     var theme = _a.theme;
     return theme.fonts.system;
@@ -1506,7 +1762,7 @@ var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObjec
 });
 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) {
     var theme = _a.theme;
-    return theme.palette.blue["600"];
+    return theme.colors.primaryHue;
 }, function (_a) {
     var theme = _a.theme;
     return theme.fonts.system;
@@ -1516,7 +1772,7 @@ var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateOb
 });
 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) {
     var theme = _a.theme;
-    return theme.palette.blue["600"];
+    return theme.colors.primaryHue;
 }, function (_a) {
     var theme = _a.theme;
     return theme.breakpoints.md;
@@ -1588,7 +1844,7 @@ var SelectedItemStyle = styled.css(templateObject_1$t || (templateObject_1$t = _
 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) {
     var theme = _a.theme;
     return theme.fonts.system;
-}, function (props) { return !props.isExpanded && "display: none;"; }, function (props) { return props.isCurrent && SelectedItemStyle; }, SelectedItemStyle, function (props) { return props.theme.palette.blue["600"]; }, function (props) { return props.theme.fontWeights.medium; }, function (props) {
+}, 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) {
     return props.isCurrent &&
         "\n    color: ".concat(props.theme.palette.blue["700"], ";\n    font-weight: ").concat(props.theme.fontWeights.semibold, ";\n  ");
 });
@@ -2040,7 +2296,10 @@ var InformationContainer = styled__default["default"].div(templateObject_2$b ||
     var theme = _a.theme;
     return theme.breakpoints.sm;
 });
-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  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n  flex-wrap: wrap;\n"])));
+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) {
+    var theme = _a.theme;
+    return theme.breakpoints.sm;
+});
 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) {
     var theme = _a.theme;
     return theme.palette.grey[600];
@@ -2090,7 +2349,7 @@ var Image = styled__default["default"].img(templateObject_9 || (templateObject_9
     return theme.components.pageHeader.imgMaxHeight;
 });
 var Main = function (props) {
-    return (jsxRuntime.jsx(MainContainer, { children: jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(StyledCol, __assign({ orderXs: 2, orderSm: 1, 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({ orderXs: 1, orderSm: 2, xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsx(MetaContainer, { children: jsxRuntime.jsx(Image, { src: props.metaImage, title: props.infoTitle, alt: props.infoTitle }) }) })))] }) }));
+    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 }) }) })))] }) }));
 };
 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;
 
@@ -2370,7 +2629,7 @@ var CompanyHolder = styled__default["default"](SM)(templateObject_2$6 || (templa
     return theme.space.base * 4;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.palette.blue["600"];
+    return theme.colors.primaryHue;
 });
 var UserDetails = styled__default["default"].div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n  text-align: center;\n"], ["\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n  text-align: center;\n"])), function (_a) {
     var theme = _a.theme;
@@ -2651,6 +2910,7 @@ exports.CursorPagination = CursorPagination;
 exports.Drawer = Drawer;
 exports.Dropdown = Dropdown;
 exports.DropdownField = index$1;
+exports.Editor = Editor;
 exports.Ellipsis = Ellipsis;
 exports.FooterItem = FooterItem;
 exports.FormField = index;

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

@@ -0,0 +1,12 @@
+import { PlaceholderOptions } from "@tiptap/extension-placeholder";
+import { BubbleMenuProps, Editor, EditorOptions } from "@tiptap/react";
+export interface EditorArgs extends Partial<EditorOptions> {
+    placeholderOptions?: Partial<PlaceholderOptions>;
+    hasInlineMenu?: boolean;
+    bubbleOptions?: any;
+    headerTitle?: string;
+    footerSaveText?: string;
+    onSave?: (editor: Editor) => void;
+}
+export interface FloatingMenuArgs extends Partial<BubbleMenuProps> {
+}

package/build/stories/editor/editorFooter.d.ts

@@ -0,0 +1,3 @@
+export declare const EditorFooter: ({ saveText }: {
+    saveText?: string | undefined;
+}) => JSX.Element;

package/build/stories/editor/editorHeader.d.ts

@@ -0,0 +1,3 @@
+export declare const EditorHeader: ({ title }: {
+    title?: string | undefined;
+}) => JSX.Element;

package/build/stories/editor/editorStyle.d.ts

@@ -0,0 +1 @@
+export declare const editorStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;

package/build/stories/editor/floatingMenu.d.ts

@@ -0,0 +1,2 @@
+import { FloatingMenuArgs } from "./_types";
+export declare const FloatingMenu: (props: FloatingMenuArgs) => JSX.Element | null;

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

@@ -0,0 +1,16 @@
+import { EditorArgs } from "./_types";
+import { PropsWithChildren } from "react";
+/**
+ * Editor is a wrapper around TipTap/ProseMirror
+ * <br>
+ * It's a rich text WYSIWYG editors.
+ * <hr>
+ * Used for this:
+    - To allow text customization with markup supports
+    - To develop collaborative text editing
+   
+   Not for this:
+    - Simple text input, use textarea instead.
+ */
+declare const Editor: ({ onSave, headerTitle, footerSaveText, placeholderOptions, ...props }: PropsWithChildren<EditorArgs>) => JSX.Element | null;
+export { Editor };

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { EditorArgs } from "./_types";
+interface EditorStoryArgs extends EditorArgs {
+    children?: any;
+}
+export declare const Default: Story<EditorStoryArgs>;
+export declare const Placeholder: Story<EditorStoryArgs>;
+export declare const BubbleMenu: Story<EditorStoryArgs>;
+declare const _default: ComponentMeta<({ onSave, headerTitle, footerSaveText, placeholderOptions, ...props }: import("react").PropsWithChildren<EditorArgs>) => JSX.Element | null>;
+export default _default;

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

@@ -1,3 +1,4 @@
 import { IGardenTheme } from "@zendeskgarden/react-theming";
 export declare const hex2rgba: (hex: string, alpha?: number) => string;
 export declare const boxShadow: (theme: IGardenTheme) => string;
+export declare const isMac: () => boolean | "" | undefined;

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.10.59",
+  "version": "2.10.62",
   "dependencies": {
+    "@tiptap/extension-bubble-menu": "^2.0.0-beta.61",
+    "@tiptap/extension-placeholder": "^2.0.0-beta.53",
+    "@tiptap/extension-typography": "^2.0.0-beta.22",
+    "@tiptap/react": "^2.0.0-beta.114",
+    "@tiptap/starter-kit": "^2.0.0-beta.191",
     "@zendeskgarden/css-bedrock": "^9.0.0",
     "@zendeskgarden/react-accordions": "^8.49.0",
     "@zendeskgarden/react-avatars": "^8.49.0",
@@ -18,7 +23,8 @@
     "@zendeskgarden/react-tooltips": "^8.49.0",
     "@zendeskgarden/react-typography": "^8.49.0",
     "react-spring": "^9.4.4",
-    "react-window": "^1.8.6"
+    "react-window": "^1.8.6",
+    "ua-parser-js": "^1.0.2"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -59,9 +65,9 @@
     ]
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.48.2",
     "@zendeskgarden/react-dropdowns": "^8.49.0",
     "@zendeskgarden/react-forms": "^8.49.0",
+    "@zendeskgarden/react-theming": "^8.48.2",
     "formik": "^2.2.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -87,6 +93,9 @@
     "@types/react-dom": "^17.0.11",
     "@types/react-window": "^1.8.5",
     "@types/styled-components": "^5.1.23",
+    "@types/ua-parser-js": "^0.7.36",
+    "@zendeskgarden/react-dropdowns": "^8.49.0",
+    "@zendeskgarden/react-forms": "^8.49.0",
     "@zendeskgarden/react-theming": "^8.48.2",
     "@zendeskgarden/svg-icons": "^6.31.1",
     "auto": "^10.36.5",
@@ -103,9 +112,7 @@
     "storybook-addon-designs": "^6.2.1",
     "styled-components": "^5.3.3",
     "typescript": "^4.5.0",
-    "web-vitals": "^2.1.4",
-    "@zendeskgarden/react-dropdowns": "^8.49.0",
-    "@zendeskgarden/react-forms": "^8.49.0"
+    "web-vitals": "^2.1.4"
   },
   "description": "Unguess design system",
   "author": "Luca Cannarozzo (@cannarocks)",