@appquality/unguess-design-system 2.12.28 → 2.12.30

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v2.12.30 (Tue Nov 15 2022)
+
+#### 🐛 Bug Fix
+
+- fix(halfpie): Make toplevel component relative instead of absolute [#106](https://github.com/AppQuality/unguess-design-system/pull/106) ([@d-beezee](https://github.com/d-beezee))
+
+#### Authors: 1
+
+- [@d-beezee](https://github.com/d-beezee)
+
+---
+
+# v2.12.29 (Tue Nov 15 2022)
+
+#### ⚠️ Pushed to `master`
+
+- fix(halfpie): Make toplevel component relative instead of absolute ([@d-beezee](https://github.com/d-beezee))
+
+#### Authors: 1
+
+- [@d-beezee](https://github.com/d-beezee)
+
+---
+
 # v2.12.28 (Tue Nov 15 2022)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -265,10 +265,10 @@ var isMac = function () {
     var os = parser.getOS().name;
     return os && /Mac OS|iOS/.test(os);
 };
-styled.css(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n  transition: opacity 0.2s ease;\n"], ["\n  transition: opacity 0.2s ease;\n"])));
+styled.css(templateObject_1$1m || (templateObject_1$1m = __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$1l, templateObject_2$y, templateObject_3$l;
+var templateObject_1$1m, 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%);"),
@@ -285,8 +285,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$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;
+var GlobalStyle = styled.createGlobalStyle(templateObject_1$1l || (templateObject_1$1l = __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$1l;
 
 /**
  * Accordions are headers that can be expanded to reveal content or collapsed to hide it.
@@ -302,7 +302,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$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 UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$1k || (templateObject_1$1k = __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) {
@@ -323,9 +323,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$1j, templateObject_2$x;
+var templateObject_1$1k, templateObject_2$x;
 
-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) {
+var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$1j || (templateObject_1$1j = __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, ";");
@@ -349,7 +349,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$1i;
+var templateObject_1$1j;
 
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
@@ -380,7 +380,7 @@ var getThemeStyle = function (props) {
     }
     return theme;
 };
-var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject([""], [""])));
+var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject([""], [""])));
 /**
  * Buttons let users take action quickly.
  * Use a Button to enable actions or decisions that are important to a user’s workflow.
@@ -399,7 +399,7 @@ var ButtonComponent = React.forwardRef(function (props, ref) {
 var Button = ButtonComponent;
 Button.StartIcon = UgButton.StartIcon;
 Button.EndIcon = UgButton.EndIcon;
-var templateObject_1$1h;
+var templateObject_1$1i;
 
 /**
 A Button group lets users make a selection from a set of options.
@@ -429,7 +429,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$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 UgCard = styled__default["default"](reactNotifications.Well)(templateObject_1$1h || (templateObject_1$1h = __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) {
@@ -467,7 +467,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$1g, templateObject_2$w;
+var templateObject_1$1h, templateObject_2$w;
 
 /**
  * Tags let users categorize content using a keyword.
@@ -672,7 +672,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(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) {
+var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$1g || (templateObject_1$1g = __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  ");
 });
@@ -690,22 +690,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$1f;
+var templateObject_1$1g;
 
-var CardMeta = styled__default["default"].div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+var CardMeta = styled__default["default"].div(templateObject_1$1f || (templateObject_1$1f = __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$1e;
+var templateObject_1$1f;
 
-var CardThumbnail = styled__default["default"].div(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+var CardThumbnail = styled__default["default"].div(templateObject_1$1e || (templateObject_1$1e = __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$1d;
+var templateObject_1$1e;
 
 /**
  *  Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
@@ -717,7 +717,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$1c || (templateObject_1$1c = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var Label$2 = styled__default["default"](SM)(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[500];
 });
@@ -746,9 +746,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$1c, templateObject_2$v, templateObject_3$k, templateObject_4$f;
+var templateObject_1$1d, templateObject_2$v, templateObject_3$k, templateObject_4$f;
 
-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 Divider = styled__default["default"].div(templateObject_1$1c || (templateObject_1$1c = __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) {
@@ -764,9 +764,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$1b, templateObject_2$u, templateObject_3$j;
+var templateObject_1$1c, templateObject_2$u, templateObject_3$j;
 
-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 UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$1b || (templateObject_1$1b = __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) {
@@ -796,7 +796,7 @@ SpecialCard.Meta = CardMeta;
 SpecialCard.Thumb = CardThumbnail;
 SpecialCard.Header = CardHeader;
 SpecialCard.Footer = CardFooter;
-var templateObject_1$1a;
+var templateObject_1$1b;
 
 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%" } })] })] }));
@@ -829,7 +829,7 @@ var getTypeDataIcon = function (type) {
             return SvgCampaignFunctional;
     }
 };
-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 StyledTag$2 = styled__default["default"](Tag)(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n  color: ", ";\n  cursor: pointer;\n"], ["\n  color: ", ";\n  cursor: pointer;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey["700"];
 });
@@ -856,9 +856,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$19, templateObject_2$t, templateObject_3$i;
+var templateObject_1$1a, templateObject_2$t, templateObject_3$i;
 
-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 StyledTagNew = styled__default["default"](Tag)(templateObject_1$19 || (templateObject_1$19 = __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) {
@@ -875,9 +875,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$18;
+var templateObject_1$19;
 
-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 ServiceSubtitle = styled__default["default"](SM)(templateObject_1$18 || (templateObject_1$18 = __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) {
@@ -929,13 +929,13 @@ 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$17, templateObject_2$s, templateObject_3$h, templateObject_4$e, templateObject_5$6, templateObject_6$2, templateObject_7$1, templateObject_8$1;
+var templateObject_1$18, 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$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 ButtonsWrap = styled__default["default"].div(templateObject_1$17 || (templateObject_1$17 = __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 templateObject_1$17;
 
 var DEFAULT_CHARTS_THEME = {
     background: theme.palette.white,
@@ -1110,14 +1110,14 @@ var CHARTS_COLOR_SCHEME_CATEGORICAL_8_A = [
     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 ChartContainer = styled__default["default"].div(templateObject_1$16 || (templateObject_1$16 = __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 templateObject_1$16;
 
 var BarChart = function (_a) {
     var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, props = __rest(_a, ["theme", "colors", "width", "height"]);
@@ -1134,7 +1134,7 @@ var CustomBulletChartRange = function (_a) {
     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 UgBulletChart = styled__default["default"](bullet.ResponsiveBullet)(templateObject_1$15 || (templateObject_1$15 = __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;
@@ -1153,7 +1153,7 @@ var BulletChart = function (_a) {
                 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 templateObject_1$15;
 
 var CenteredItem = function (_a) {
     var centerX = _a.centerX, centerY = _a.centerY, theme = _a.theme, radius = _a.radius, label = _a.label, value = _a.value;
@@ -1184,23 +1184,23 @@ var PieChart = function (_a) {
                     : []), true), activeOuterRadiusOffset: 12 }) })) }));
 };
 
+var AbsoluteChartContainer = styled__default["default"](ChartContainer)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  ", ";\n  ", ";\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  ", ";\n  ", ";\n"])), function (_a) {
+    var mode = _a.mode;
+    return (mode === "front" ? "z-index: 1;" : "");
+}, function (_a) {
+    var mode = _a.mode;
+    return (mode === "front" ? "pointer-events: none;" : "");
+});
 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 theme = _a.theme, colors = _a.colors, 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 }) })) })));
-};
+    return (jsxRuntime.jsx(AbsoluteChartContainer, __assign({ mode: mode, 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 templateObject_1$14;
 
 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;
@@ -1216,15 +1216,15 @@ var HalfPieChart = function (_a) {
         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) {
+    return (jsxRuntime.jsxs("div", __assign({ style: { width: width, height: height, position: "relative" } }, { children: [jsxRuntime.jsx(HalfPieChartComponent, { theme: theme, colors: currentColors, 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) {
+                }, showArcLinks: showArcLinks, margin: margin, mode: "front" }), jsxRuntime.jsx(HalfPieChartComponent, { theme: theme, colors: activeColors, height: height, data: data, margin: margin, showArcLinks: showArcLinks, onMouseEnter: function (data) {
                     setCurrentColors(grayOutColors(data.arc.index));
                 }, onMouseLeave: function () {
                     setCurrentColors(grayOutColors(0));
-                }, mode: "back" })] }));
+                }, mode: "back" })] })));
 };
 
 var StreamChart = function (_a) {

package/build/stories/charts/ChartContainer.d.ts

@@ -1,6 +1,5 @@
-interface ChartContainerProps {
+export interface ChartContainerProps {
     width?: string;
     height?: string;
 }
 export declare const ChartContainer: import("styled-components").StyledComponent<"div", any, ChartContainerProps, never>;
-export {};

package/build/stories/charts/halfPie/HalfPieChartComponent.d.ts

@@ -1,5 +1,5 @@
 import { PieChartProps } from "./_types";
-declare const HalfPieChartComponent: ({ theme, colors, width, height, data, onMouseEnter, onMouseLeave, mode, showArcLinks, margin, }: PieChartProps & {
+declare const HalfPieChartComponent: ({ theme, colors, height, data, onMouseEnter, onMouseLeave, mode, showArcLinks, margin, }: PieChartProps & {
     onMouseEnter?: ((props: any) => void) | undefined;
     onMouseLeave?: ((props: any) => void) | undefined;
     mode: "back" | "front";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.12.28",
+  "version": "2.12.30",
   "dependencies": {
     "@nivo/bar": "^0.80.0",
     "@nivo/bullet": "^0.80.0",