@appquality/unguess-design-system 2.12.17 → 2.12.19

package/build/index.js

@@ -16,6 +16,12 @@ var reactButtons = require('@zendeskgarden/react-buttons');
 var reactTags = require('@zendeskgarden/react-tags');
 var reactLoaders = require('@zendeskgarden/react-loaders');
 var reactTypography = require('@zendeskgarden/react-typography');
+var bar = require('@nivo/bar');
+var bullet = require('@nivo/bullet');
+var pie = require('@nivo/pie');
+var stream = require('@nivo/stream');
+var sunburst = require('@nivo/sunburst');
+var waffle = require('@nivo/waffle');
 var reactModals = require('@zendeskgarden/react-modals');
 var reactDropdowns = require('@zendeskgarden/react-dropdowns');
 var react = require('@tiptap/react');
@@ -97,6 +103,16 @@ function __rest(s, e) {
     return t;
 }
 
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
 function __makeTemplateObject(cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -248,10 +264,10 @@ var isMac = function () {
     var os = parser.getOS().name;
     return os && /Mac OS|iOS/.test(os);
 };
-styled.css(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n  transition: opacity 0.2s ease;\n"], ["\n  transition: opacity 0.2s ease;\n"])));
+styled.css(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n  transition: opacity 0.2s ease;\n"], ["\n  transition: opacity 0.2s ease;\n"])));
 var sidebarNavItemExpanded = styled.css(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n  visibility: visible;\n  opacity: 1;\n  // transition: opacity 0.2s ease;\n"], ["\n  visibility: visible;\n  opacity: 1;\n  // transition: opacity 0.2s ease;\n"])));
 var sidebarNavItemHidden = styled.css(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  visibility: hidden;\n  pointer-events: none;\n  color: transparent;\n"], ["\n  visibility: hidden;\n  pointer-events: none;\n  color: transparent;\n"])));
-var templateObject_1$1j, templateObject_2$y, templateObject_3$l;
+var templateObject_1$1l, templateObject_2$y, templateObject_3$l;
 
 var gradients = {
     horizontal: "linear-gradient(90.81deg, ".concat(hex2rgba(palette.blue[600]), " 11.98%, ").concat(hex2rgba(palette.kale[400]), " 100%);"),
@@ -268,8 +284,8 @@ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), {
 var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { breakpoints: __assign(__assign({}, reactTheming.DEFAULT_THEME.breakpoints), { xxl: "1440px" }), colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[600], 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" }), lineHeights: __assign(__assign({}, reactTheming.DEFAULT_THEME.lineHeights), { xs: '16px' // same as sm
      }), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
 
-var GlobalStyle = styled.createGlobalStyle(templateObject_1$1i || (templateObject_1$1i = __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$1i;
+var GlobalStyle = styled.createGlobalStyle(templateObject_1$1k || (templateObject_1$1k = __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$1k;
 
 /**
  * Accordions are headers that can be expanded to reveal content or collapsed to hide it.
@@ -285,7 +301,7 @@ Accordion.Header = reactAccordions.Accordion.Header;
 Accordion.Label = reactAccordions.Accordion.Label;
 Accordion.Panel = reactAccordions.Accordion.Panel;
 
-var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$1h || (templateObject_1$1h = __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$1j || (templateObject_1$1j = __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) {
@@ -306,9 +322,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$1h, templateObject_2$x;
+var templateObject_1$1j, templateObject_2$x;
 
-var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$1g || (templateObject_1$1g = __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$1i || (templateObject_1$1i = __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, ";");
@@ -332,7 +348,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$1g;
+var templateObject_1$1i;
 
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
@@ -363,7 +379,7 @@ var getThemeStyle = function (props) {
     }
     return theme;
 };
-var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject([""], [""])));
+var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject([""], [""])));
 /**
  * Buttons let users take action quickly.
  * Use a Button to enable actions or decisions that are important to a user’s workflow.
@@ -382,7 +398,7 @@ var ButtonComponent = React.forwardRef(function (props, ref) {
 var Button = ButtonComponent;
 Button.StartIcon = UgButton.StartIcon;
 Button.EndIcon = UgButton.EndIcon;
-var templateObject_1$1f;
+var templateObject_1$1h;
 
 /**
 A Button group lets users make a selection from a set of options.
@@ -412,7 +428,7 @@ Used for this:
 **/
 var SplitButton = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(reactButtons.SplitButton, __assign({ ref: ref }, props)); });
 
-var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  cursor: pointer;\n\n  ", "\n"], ["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  cursor: pointer;\n\n  ", "\n"])), function (_a) {
+var UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  cursor: pointer;\n\n  ", "\n"], ["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  cursor: pointer;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.borderRadii.lg;
 }, function (_a) {
@@ -450,7 +466,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$1e, templateObject_2$w;
+var templateObject_1$1g, templateObject_2$w;
 
 /**
  * Tags let users categorize content using a keyword.
@@ -468,9 +484,7 @@ Tag.Avatar = reactTags.Tag.Avatar;
 Tag.Close = reactTags.Tag.Close;
 
 var _g$6, _path$q;
-
 function _extends$w() { _extends$w = 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$w.apply(this, arguments); }
-
 var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
     width: 24,
@@ -491,9 +505,7 @@ var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
 };
 
 var _g$5, _path$p, _path2$4, _path3$3, _path4$2, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1, _path11$1;
-
 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 SvgCampaignExperiential = function SvgCampaignExperiential(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
     width: 25,
@@ -564,9 +576,7 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
 };
 
 var _path$o, _path2$3, _path3$2, _path4$1;
-
 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 SvgCampaignCompleted = function SvgCampaignCompleted(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
     width: 24,
@@ -590,9 +600,7 @@ var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
 };
 
 var _path$n, _path2$2, _path3$1, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
-
 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 SvgCampaignProgress = function SvgCampaignProgress(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
     width: 24,
@@ -637,9 +645,7 @@ var SvgCampaignProgress = function SvgCampaignProgress(props) {
 };
 
 var _path$m, _path2$1, _path3;
-
 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 SvgCampaignIncoming = function SvgCampaignIncoming(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     width: 24,
@@ -665,7 +671,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
   })));
 };
 
-var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$1d || (templateObject_1$1d = __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$1f || (templateObject_1$1f = __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  ");
 });
@@ -683,22 +689,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$1d;
+var templateObject_1$1f;
 
-var CardMeta = styled__default["default"].div(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+var CardMeta = styled__default["default"].div(templateObject_1$1e || (templateObject_1$1e = __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$1c;
+var templateObject_1$1e;
 
-var CardThumbnail = styled__default["default"].div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+var CardThumbnail = styled__default["default"].div(templateObject_1$1d || (templateObject_1$1d = __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$1b;
+var templateObject_1$1d;
 
 /**
  *  Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
@@ -710,7 +716,7 @@ 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$2 = styled__default["default"](SM)(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var Label$2 = styled__default["default"](SM)(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[500];
 });
@@ -739,9 +745,9 @@ var CardHeader = function (props) { return jsxRuntime.jsx(Container$2, __assign(
 CardHeader.Label = Label$2;
 CardHeader.Title = Title$2;
 CardHeader.Text = Description$2;
-var templateObject_1$1a, templateObject_2$v, templateObject_3$k, templateObject_4$f;
+var templateObject_1$1c, templateObject_2$v, templateObject_3$k, templateObject_4$f;
 
-var Divider = styled__default["default"].div(templateObject_1$19 || (templateObject_1$19 = __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$1b || (templateObject_1$1b = __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) {
@@ -757,9 +763,9 @@ var Container$1 = styled__default["default"].div(templateObject_3$j || (template
     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$2, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container$1, __assign({}, props, { children: props.children }))] })); };
-var templateObject_1$19, templateObject_2$u, templateObject_3$j;
+var templateObject_1$1b, templateObject_2$u, templateObject_3$j;
 
-var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n\n  ", "\n\n  ", "\n"], ["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n\n  ", "\n\n  ", "\n"])), function (_a) {
+var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n\n  ", "\n\n  ", "\n"], ["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.borderRadii.lg;
 }, function (_a) {
@@ -789,7 +795,7 @@ SpecialCard.Meta = CardMeta;
 SpecialCard.Thumb = CardThumbnail;
 SpecialCard.Header = CardHeader;
 SpecialCard.Footer = CardFooter;
-var templateObject_1$18;
+var templateObject_1$1a;
 
 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%" } })] })] }));
@@ -822,7 +828,7 @@ var getTypeDataIcon = function (type) {
             return SvgCampaignFunctional;
     }
 };
-var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n  color: ", ";\n  cursor: pointer;\n"], ["\n  color: ", ";\n  cursor: pointer;\n"])), function (_a) {
+var StyledTag$2 = styled__default["default"](Tag)(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n  color: ", ";\n  cursor: pointer;\n"], ["\n  color: ", ";\n  cursor: pointer;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey["700"];
 });
@@ -849,9 +855,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$2, { 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$17, templateObject_2$t, templateObject_3$i;
+var templateObject_1$19, templateObject_2$t, templateObject_3$i;
 
-var StyledTagNew = styled__default["default"](Tag)(templateObject_1$16 || (templateObject_1$16 = __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$18 || (templateObject_1$18 = __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) {
@@ -868,9 +874,9 @@ 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$16;
+var templateObject_1$18;
 
-var ServiceSubtitle = styled__default["default"](SM)(templateObject_1$15 || (templateObject_1$15 = __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$17 || (templateObject_1$17 = __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) {
@@ -922,14 +928,332 @@ 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$15, templateObject_2$s, templateObject_3$h, templateObject_4$e, templateObject_5$6, templateObject_6$2, templateObject_7$1, templateObject_8$1;
+var templateObject_1$17, templateObject_2$s, templateObject_3$h, templateObject_4$e, templateObject_5$6, templateObject_6$2, templateObject_7$1, templateObject_8$1;
 
-var ButtonsWrap = styled__default["default"].div(templateObject_1$14 || (templateObject_1$14 = __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$16 || (templateObject_1$16 = __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$16;
+
+var DEFAULT_CHARTS_THEME = {
+    background: theme.palette.white,
+    fontSize: Number(theme.fontSizes.sm),
+    fontFamily: theme.fonts.system,
+    textColor: theme.palette.grey[600],
+    annotations: {
+        text: {
+            fontSize: Number(theme.fontSizes.sm),
+            fill: theme.colors.primaryHue,
+            outlineWidth: 2,
+            outlineColor: theme.palette.white,
+            outlineOpacity: 1,
+        },
+        link: {
+            stroke: theme.colors.primaryHue,
+            strokeWidth: 1,
+            outlineWidth: 2,
+            outlineColor: theme.palette.white,
+            outlineOpacity: 1,
+        },
+        outline: {
+            stroke: theme.colors.primaryHue,
+            strokeWidth: 2,
+            outlineWidth: 2,
+            outlineColor: theme.palette.white,
+            outlineOpacity: 1,
+        },
+        symbol: {
+            fill: theme.colors.primaryHue,
+            outlineWidth: 2,
+            outlineColor: theme.palette.white,
+            outlineOpacity: 1,
+        },
+    },
+    axis: {
+        domain: {
+            line: {
+                stroke: theme.palette.grey[600],
+                strokeWidth: 2,
+            },
+        },
+        legend: {
+            text: {
+                fontSize: Number(theme.fontSizes.sm),
+                fill: theme.palette.grey[600],
+            },
+        },
+        ticks: {
+            line: {
+                stroke: theme.palette.grey[600],
+                strokeWidth: 3,
+            },
+            text: {
+                fontSize: Number(theme.fontSizes.sm),
+                fill: theme.palette.grey[600],
+            },
+        },
+    },
+    crosshair: {
+        line: {
+            stroke: theme.palette.grey[600],
+            strokeWidth: 1,
+            strokeOpacity: 0.75,
+            strokeDasharray: "6 6",
+        },
+    },
+    dots: {
+        text: {
+            fill: theme.palette.grey[600],
+            fontSize: Number(theme.fontSizes.sm),
+            fontFamily: theme.fonts.system,
+        },
+    },
+    grid: {
+        line: {
+            stroke: theme.palette.grey[600],
+            strokeWidth: .5,
+        },
+    },
+    labels: {
+        text: {
+            fill: theme.palette.grey[600],
+            fontSize: Number(theme.fontSizes.sm),
+            fontFamily: theme.fonts.system,
+        },
+    },
+    legends: {
+        hidden: {
+            symbol: {
+                fill: theme.palette.grey[600],
+                opacity: 0.5,
+            },
+            text: {
+                opacity: 1,
+            },
+        },
+        title: {
+            text: {
+                fontSize: Number(theme.fontSizes.sm),
+                fill: theme.palette.grey[600],
+            },
+        },
+        text: {
+            fontWeight: theme.fontWeights.bold,
+            fontSize: Number(theme.fontSizes.sm),
+            fill: theme.palette.grey[600],
+        },
+        ticks: {
+            line: {},
+            text: {
+                fontSize: Number(theme.fontSizes.sm),
+                fill: theme.palette.grey[600],
+            },
+        },
+    },
+    markers: {
+        lineColor: theme.palette.grey[600],
+        lineStrokeWidth: 1,
+        textColor: theme.palette.grey[600],
+        fontSize: theme.fontSizes.sm,
+        text: {
+            fontFamily: theme.fonts.system,
+        },
+    },
+    tooltip: {
+        container: {
+            background: theme.palette.white,
+            color: theme.colors.primaryHue,
+            fontSize: Number(theme.fontSizes.sm),
+        },
+        basic: {},
+        chip: {},
+        table: {},
+        tableCell: {},
+        tableCellValue: {},
+    },
+};
+var chartColors = {
+    darkPine: "#02807A",
+    lightGrey: theme.palette.grey[200],
+    darkGrey: theme.palette.grey[600],
+    mattone: "#800208",
+    gubbioLight: "#C78430",
+    blueRoyal: "#024780",
+    greenLight: "#5FA41C",
+    blue: "#020880",
+    fucsia: "#CE2A7A",
+    violet: "#573ECF",
+    orchidea: "#B75CAD",
+    sky: "#3392CE",
+};
+var CHARTS_COLOR_SCHEME_CATEGORICAL_5 = [
+    chartColors.greenLight,
+    chartColors.blue,
+    chartColors.fucsia,
+    chartColors.violet,
+    chartColors.orchidea, // Orchidea 300
+];
+var CHARTS_COLOR_SCHEME_CATEGORICAL_8_A = [
+    chartColors.darkPine,
+    chartColors.fucsia,
+    chartColors.violet,
+    chartColors.greenLight,
+    chartColors.mattone,
+    chartColors.sky,
+    chartColors.orchidea,
+    chartColors.blue, // Blue 900
+];
+
+var ChartContainer = styled__default["default"].div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  width: ", ";\n"])), function (_a) {
+    var height = _a.height;
+    return height || "300px";
+}, function (_a) {
+    var width = _a.width;
+    return width || "100%";
+});
+var templateObject_1$15;
+
+var BarChart = function (_a) {
+    var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, props = __rest(_a, ["theme", "colors", "width", "height"]);
+    return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(bar.ResponsiveBar, __assign({ theme: __assign(__assign({}, DEFAULT_CHARTS_THEME), theme), colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_5, enableLabel: false }, props)) })));
+};
+
+var CustomBulletChartMarker = function (_a) {
+    var x = _a.x, y = _a.y, bulletRadius = _a.bulletRadius, fill = _a.fill, size = _a.size;
+    return (jsxRuntime.jsx("circle", { r: bulletRadius, fill: fill, transform: "translate(".concat(x, ",").concat(y, ") scale(").concat(size, ")") }));
+};
+
+var CustomBulletChartRange = function (_a) {
+    var x = _a.x, y = _a.y, width = _a.width, height = _a.height, fill = _a.fill;
+    return (jsxRuntime.jsx("rect", { x: x, y: y, width: width - 2, height: height, fill: fill }));
+};
+
+var UgBulletChart = styled__default["default"](bullet.ResponsiveBullet)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
+var BulletChart = function (_a) {
+    var width = _a.width, height = _a.height, ranges = _a.ranges, values = _a.values, markerColor = _a.markerColor, markerSize = _a.markerSize, rangeColor = _a.rangeColor, measureSize = _a.measureSize, measureColor = _a.measureColor, props = __rest(_a, ["width", "height", "ranges", "values", "markerColor", "markerSize", "rangeColor", "measureSize", "measureColor"]);
+    var rangesCount = ranges.length;
+    return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(UgBulletChart, __assign({ data: [{
+                    id: "",
+                    title: "",
+                    ranges: ranges,
+                    measures: values,
+                    markers: values,
+                }], measureColors: measureColor !== null && measureColor !== void 0 ? measureColor : chartColors.darkGrey, measureSize: measureSize !== null && measureSize !== void 0 ? measureSize : 0.2, markerComponent: function (_a) {
+                _a.size; var markerProps = __rest(_a, ["size"]);
+                return (jsxRuntime.jsx(CustomBulletChartMarker, __assign({ bulletRadius: 4, fill: markerColor !== null && markerColor !== void 0 ? markerColor : chartColors.darkPine, size: markerSize !== null && markerSize !== void 0 ? markerSize : 1 }, markerProps)));
+            }, rangeComponent: function (_a) {
+                var index = _a.index, width = _a.width, rangeProps = __rest(_a, ["index", "width"]);
+                var isLast = index === rangesCount - 1;
+                return (jsxRuntime.jsx(CustomBulletChartRange, __assign({ fill: rangeColor !== null && rangeColor !== void 0 ? rangeColor : chartColors.lightGrey }, rangeProps, { width: isLast ? width + 2 : width })));
+            }, margin: { top: 0, right: 10, bottom: -1, left: 10 } }, props)) })));
+};
 var templateObject_1$14;
 
+var CenteredItem = function (_a) {
+    var centerX = _a.centerX, centerY = _a.centerY, theme = _a.theme, radius = _a.radius, label = _a.label, value = _a.value;
+    var parameter = 6;
+    var fontSizeFactor = radius / (14 * parameter);
+    var spacing = radius / (parameter * 0.9);
+    var shift = -radius / (parameter * 2.5);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsx("g", __assign({ transform: "translate(".concat(centerX, ",").concat(centerY, ")") }, { children: jsxRuntime.jsx("text", __assign({ textAnchor: "middle", baselineShift: shift + (value ? spacing : spacing / 2), fill: theme.palette.grey[600], style: {
+                        fontSize: parseInt(theme.fontSizes.md.replace("px", "")) * fontSizeFactor,
+                    } }, { children: label })) }))), value && (jsxRuntime.jsx("g", __assign({ transform: "translate(".concat(centerX, ",").concat(centerY, ")") }, { children: jsxRuntime.jsx("text", __assign({ textAnchor: "middle", baselineShift: shift - (label ? spacing : spacing / 2), fill: theme.palette.blue[600], style: {
+                        fontSize: parseInt(theme.fontSizes.xxl.replace("px", "")) *
+                            fontSizeFactor,
+                        fontWeight: theme.fontWeights.semibold,
+                    } }, { children: value })) })))] }));
+};
+
+var PieChart = function (_a) {
+    var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, data = _a.data, centerItem = _a.centerItem, margin = _a.margin;
+    var themeContext = React.useContext(styled.ThemeContext);
+    return (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(pie.ResponsivePie, { theme: __assign(__assign({}, DEFAULT_CHARTS_THEME), theme), colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, enableArcLabels: false, arcLinkLabelsColor: { from: "color" }, padAngle: 1, data: data, margin: __assign({ top: 40, bottom: 40 }, margin), innerRadius: 0.8, arcLinkLabelsThickness: 2, arcLinkLabelsTextColor: themeContext.palette.grey[600], layers: __spreadArray([
+                    "arcs",
+                    "arcLabels",
+                    "arcLinkLabels"
+                ], (centerItem
+                    ? [
+                        function (props) { return (jsxRuntime.jsx(CenteredItem, __assign({}, props, { theme: themeContext, label: centerItem.label, value: centerItem.value }))); },
+                    ]
+                    : []), true), activeOuterRadiusOffset: 12 }) })) }));
+};
+
+var HalfPieChartComponent = function (_a) {
+    var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, data = _a.data, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, mode = _a.mode, showArcLinks = _a.showArcLinks, margin = _a.margin;
+    var themeContext = React.useContext(styled.ThemeContext);
+    return (jsxRuntime.jsx("div", __assign({ style: {
+            position: "absolute",
+            left: "0",
+            right: "0",
+            top: "0",
+            bottom: "0",
+            zIndex: mode === "front" ? 1 : undefined,
+            pointerEvents: mode === "front" ? "none" : undefined,
+        } }, { children: jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(pie.ResponsivePie, { theme: __assign(__assign(__assign({}, DEFAULT_CHARTS_THEME), theme), { background: mode === "front" ? "transparent" : undefined }), colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, enableArcLabels: false, arcLinkLabelsColor: { from: "color" }, padAngle: 2, data: data, margin: margin, innerRadius: mode === "front" ? 0.835 : 0.8, arcLinkLabelsThickness: 2, arcLinkLabelsTextColor: themeContext.palette.grey[600], layers: __spreadArray([
+                    "arcs"
+                ], (showArcLinks
+                    ? ["arcLabels", "arcLinkLabels"]
+                    : []), true), startAngle: -90, endAngle: 90, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, animate: false }) })) })));
+};
+
+var HalfPieChart = function (_a) {
+    var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, data = _a.data, margin = _a.margin, showArcLinks = _a.showArcLinks;
+    var themeContext = React.useContext(styled.ThemeContext);
+    var activeColors = colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A;
+    while (activeColors.length < data.length) {
+        activeColors.push.apply(activeColors, activeColors);
+    }
+    var numberOfColors = activeColors.length;
+    var grayOutColors = function (index) {
+        var newColors = Array(numberOfColors).fill(themeContext.palette.grey[200]);
+        newColors[index] = activeColors[index];
+        return newColors;
+    };
+    var _b = React.useState(grayOutColors(0)), currentColors = _b[0], setCurrentColors = _b[1];
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(HalfPieChartComponent, { theme: theme, colors: currentColors, width: width, height: height, data: data, onMouseEnter: function (data) {
+                    setCurrentColors(grayOutColors(data.arc.index));
+                }, onMouseLeave: function () {
+                    setCurrentColors(grayOutColors(0));
+                }, showArcLinks: showArcLinks, margin: margin, mode: "front" }), jsxRuntime.jsx(HalfPieChartComponent, { theme: theme, colors: activeColors, width: width, height: height, data: data, margin: margin, showArcLinks: showArcLinks, onMouseEnter: function (data) {
+                    setCurrentColors(grayOutColors(data.arc.index));
+                }, onMouseLeave: function () {
+                    setCurrentColors(grayOutColors(0));
+                }, mode: "back" })] }));
+};
+
+var StreamChart = function (_a) {
+    var theme = _a.theme, colors = _a.colors, height = _a.height, width = _a.width, props = __rest(_a, ["theme", "colors", "height", "width"]);
+    return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(stream.ResponsiveStream, __assign({ theme: __assign(__assign({}, DEFAULT_CHARTS_THEME), theme), colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_5 }, props)) })));
+};
+
+var SunburstChart = function (_a) {
+    var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, props = __rest(_a, ["theme", "colors", "width", "height"]);
+    return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(sunburst.ResponsiveSunburst, __assign({ theme: __assign(__assign({}, DEFAULT_CHARTS_THEME), theme), colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, childColor: {
+                from: 'color',
+                modifiers: [
+                    [
+                        'brighter',
+                        0.5
+                    ]
+                ]
+            } }, props)) })));
+};
+
+var CustomCell = function (_a) {
+    var position = _a.position, size = _a.size, x = _a.x, y = _a.y, color = _a.color, fill = _a.fill, opacity = _a.opacity, borderWidth = _a.borderWidth, borderColor = _a.borderColor, data = _a.data, onHover = _a.onHover, onLeave = _a.onLeave, onClick = _a.onClick;
+    return (jsxRuntime.jsx("circle", { r: size / 2, cx: x + size / 2, cy: y + size / 2, fill: fill || color, strokeWidth: borderWidth, stroke: borderColor, opacity: opacity, onMouseEnter: onHover, onMouseMove: onHover, onMouseLeave: onLeave, onClick: function (event) {
+            onClick({ position: position, color: color, x: x, y: y, data: data }, event);
+        } }));
+};
+
+var WaffleChart = function (_a) {
+    var theme = _a.theme, colors = _a.colors, height = _a.height, width = _a.width, props = __rest(_a, ["theme", "colors", "height", "width"]);
+    return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(waffle.ResponsiveWaffle, __assign({ theme: __assign(__assign({}, DEFAULT_CHARTS_THEME), theme), colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_5, motionStiffness: 90, motionDamping: 11, 
+            // @ts-ignore property cellComponent does not exist, but it does
+            cellComponent: CustomCell }, props)) })));
+};
+
 var UgClose = styled__default["default"](reactNotifications.Close)(templateObject_1$13 || (templateObject_1$13 = __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;
@@ -1152,9 +1476,7 @@ var editorStyle = styled.css(templateObject_1$Y || (templateObject_1$Y = __makeT
 var templateObject_1$Y;
 
 var _path$l;
-
 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 SvgBoldFill = function SvgBoldFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1169,9 +1491,7 @@ var SvgBoldFill = function SvgBoldFill(props) {
 };
 
 var _path$k;
-
 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 SvgItalicFill = function SvgItalicFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1189,9 +1509,7 @@ var SvgItalicFill = function SvgItalicFill(props) {
 };
 
 var _path$j, _path2;
-
 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 SvgQuoteFill = function SvgQuoteFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1212,9 +1530,7 @@ var SvgQuoteFill = function SvgQuoteFill(props) {
 };
 
 var _g$4;
-
 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 SvgH1Fill = function SvgH1Fill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1244,9 +1560,7 @@ var SvgH1Fill = function SvgH1Fill(props) {
 };
 
 var _g$3;
-
 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 SvgH2Fill = function SvgH2Fill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1276,9 +1590,7 @@ var SvgH2Fill = function SvgH2Fill(props) {
 };
 
 var _g$2;
-
 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 SvgH3Fill = function SvgH3Fill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1521,9 +1833,7 @@ var Input = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(UgInp
 var templateObject_1$P, templateObject_2$m;
 
 var _g$1;
-
 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 SvgNotesStroke = function SvgNotesStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1630,9 +1940,7 @@ var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props
 var templateObject_1$M;
 
 var _path$i;
-
 function _extends$k() { _extends$k = 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$k.apply(this, arguments); }
-
 var SvgCheckLg = function SvgCheckLg(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
     width: 16,
@@ -1721,9 +2029,7 @@ var Row$1 = function (props) { return jsxRuntime.jsx(reactGrid.Row, __assign({},
 var Grid = function (props) { return jsxRuntime.jsx(reactGrid.Grid, __assign({}, props)); };
 
 var _path$h;
-
 function _extends$j() { _extends$j = 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$j.apply(this, arguments); }
-
 var SvgUgSquare = function SvgUgSquare(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     width: 24,
@@ -1738,9 +2044,7 @@ var SvgUgSquare = function SvgUgSquare(props) {
 };
 
 var _path$g;
-
 function _extends$i() { _extends$i = 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$i.apply(this, arguments); }
-
 var SvgUgCircle = function SvgUgCircle(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
     width: 24,
@@ -1755,9 +2059,7 @@ var SvgUgCircle = function SvgUgCircle(props) {
 };
 
 var _path$f;
-
 function _extends$h() { _extends$h = 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$h.apply(this, arguments); }
-
 var SvgUgTriangle = function SvgUgTriangle(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     width: 24,
@@ -1820,9 +2122,7 @@ var templateObject_1$E;
 var Content = function (props) { return jsxRuntime.jsx(reactChrome.Content, __assign({}, props)); };
 
 var _path$e;
-
 function _extends$g() { _extends$g = 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$g.apply(this, arguments); }
-
 var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1883,9 +2183,7 @@ var Logo = function (props) {
 };
 
 var _path$d;
-
 function _extends$f() { _extends$f = 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$f.apply(this, arguments); }
-
 var SvgMenuStroke = function SvgMenuStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2041,9 +2339,7 @@ var templateObject_1$v;
 var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "158px" } }, { children: props.children })) }))); };
 
 var _path$c;
-
 function _extends$e() { _extends$e = 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$e.apply(this, arguments); }
-
 var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2058,9 +2354,7 @@ var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
 };
 
 var _path$b;
-
 function _extends$d() { _extends$d = 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$d.apply(this, arguments); }
-
 var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2117,9 +2411,7 @@ NavItemProject.SubTitle = UgProjectSubtitle;
 var templateObject_1$s, templateObject_2$g;
 
 var _path$a;
-
 function _extends$c() { _extends$c = 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$c.apply(this, arguments); }
-
 var SvgHomeFill = function SvgHomeFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2134,9 +2426,7 @@ var SvgHomeFill = function SvgHomeFill(props) {
 };
 
 var _linearGradient, _path$9;
-
 function _extends$b() { _extends$b = 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$b.apply(this, arguments); }
-
 var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2161,9 +2451,7 @@ var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
 };
 
 var _g, _defs$2;
-
 function _extends$a() { _extends$a = 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$a.apply(this, arguments); }
-
 var SvgToken = function SvgToken(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
     fill: "none",
@@ -2202,9 +2490,7 @@ var SvgToken = function SvgToken(props) {
 };
 
 var _path$8;
-
 function _extends$9() { _extends$9 = 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$9.apply(this, arguments); }
-
 var SvgFolderIcon = function SvgFolderIcon(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     width: 12,
@@ -2220,9 +2506,7 @@ var SvgFolderIcon = function SvgFolderIcon(props) {
 };
 
 var _path$7, _defs$1;
-
 function _extends$8() { _extends$8 = 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$8.apply(this, arguments); }
-
 var SvgTemplates = function SvgTemplates(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
     width: 26,
@@ -2251,9 +2535,7 @@ var SvgTemplates = function SvgTemplates(props) {
 };
 
 var _path$6, _defs;
-
 function _extends$7() { _extends$7 = 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$7.apply(this, arguments); }
-
 var SvgTemplatesActive = function SvgTemplatesActive(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
     width: 26,
@@ -2636,9 +2918,7 @@ PageHeader.Counters = MainCounters;
 var templateObject_1$h, templateObject_2$b, templateObject_3$9, templateObject_4$6;
 
 var _path$5;
-
 function _extends$6() { _extends$6 = 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$6.apply(this, arguments); }
-
 var SvgExit = function SvgExit(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
     width: 12,
@@ -2654,9 +2934,7 @@ var SvgExit = function SvgExit(props) {
 };
 
 var _path$4;
-
 function _extends$5() { _extends$5 = 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$5.apply(this, arguments); }
-
 var SvgThumbsUp = function SvgThumbsUp(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     width: 16,
@@ -2723,9 +3001,7 @@ var MenuItem = function (_a) {
 var templateObject_1$e, templateObject_2$9, templateObject_3$7, templateObject_4$4;
 
 var _path$3;
-
 function _extends$4() { _extends$4 = 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$4.apply(this, arguments); }
-
 var SvgQuestionMark = function SvgQuestionMark(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     width: 16,
@@ -2741,9 +3017,7 @@ var SvgQuestionMark = function SvgQuestionMark(props) {
 };
 
 var _path$2;
-
 function _extends$3() { _extends$3 = 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$3.apply(this, arguments); }
-
 var SvgCopy = function SvgCopy(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     width: 12,
@@ -2760,9 +3034,7 @@ var SvgCopy = function SvgCopy(props) {
 };
 
 var _path$1;
-
 function _extends$2() { _extends$2 = 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$2.apply(this, arguments); }
-
 var SvgInfoFill = function SvgInfoFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     width: 16,
@@ -2826,7 +3098,6 @@ var HelpItem = function (props) {
 var templateObject_1$b, templateObject_2$8, templateObject_3$6, templateObject_4$3, templateObject_5$2, templateObject_6;
 
 function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
-
 var SvgEmpty = function SvgEmpty(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     width: 16,
@@ -2838,9 +3109,7 @@ var SvgEmpty = function SvgEmpty(props) {
 };
 
 var _path;
-
 function _extends() { _extends = 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.apply(this, arguments); }
-
 var SvgTranslationExists = function SvgTranslationExists(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     width: 16,
@@ -3164,10 +3433,12 @@ exports.Anchor = Anchor;
 exports.AppHeader = AppHeader;
 exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
+exports.BarChart = BarChart;
 exports.Blockquote = Blockquote;
 exports.Body = Body$1;
 exports.BrandItem = BrandItem;
 exports.Breadcrumb = Breadcrumb;
+exports.BulletChart = BulletChart;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.CampaignCard = CampaignCard;
@@ -3194,6 +3465,7 @@ exports.GlobalStyle = GlobalStyle;
 exports.Grid = Grid;
 exports.GroupRow = GroupRow;
 exports.GroupedTable = GroupedTable;
+exports.HalfPieChart = HalfPieChart;
 exports.Header = Header;
 exports.HeaderCell = HeaderCell;
 exports.HeaderItem = HeaderItem;
@@ -3239,6 +3511,7 @@ exports.PageHeader = PageHeader;
 exports.PageLoader = PageLoader;
 exports.Pagination = Pagination;
 exports.Paragraph = Paragraph;
+exports.PieChart = PieChart;
 exports.PreviousItem = PreviousItem;
 exports.ProductCard = ProductCard;
 exports.ProfileModal = ProfileModal;
@@ -3257,6 +3530,8 @@ exports.SpecialCard = SpecialCard;
 exports.Spinner = Spinner;
 exports.SplitButton = SplitButton;
 exports.Stepper = Stepper;
+exports.StreamChart = StreamChart;
+exports.SunburstChart = SunburstChart;
 exports.Table = Table;
 exports.TableBody = Body;
 exports.TableCell = Cell;
@@ -3272,6 +3547,7 @@ exports.Toggle = Toggle;
 exports.TooltipModal = TooltipModal;
 exports.Trigger = Trigger;
 exports.UnorderedList = UnorderedList;
+exports.WaffleChart = WaffleChart;
 exports.XL = XL;
 exports.XXL = XXL;
 exports.XXXL = XXXL;