@appquality/unguess-design-system 2.12.29 → 2.12.31

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v2.12.31 (Tue Nov 15 2022)
+
+#### 🐛 Bug Fix
+
+- fix(bullet chart): tooltip & theme [#105](https://github.com/AppQuality/unguess-design-system/pull/105) ([@iacopolea](https://github.com/iacopolea) [@marcbon](https://github.com/marcbon))
+
+#### Authors: 2
+
+- Iacopo Leardini ([@iacopolea](https://github.com/iacopolea))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
+# 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`

package/build/index.js

@@ -18,6 +18,7 @@ var reactLoaders = require('@zendeskgarden/react-loaders');
 var reactTypography = require('@zendeskgarden/react-typography');
 var bar = require('@nivo/bar');
 var bullet = require('@nivo/bullet');
+var web = require('@react-spring/web');
 var pie = require('@nivo/pie');
 var stream = require('@nivo/stream');
 var sunburst = require('@nivo/sunburst');
@@ -265,10 +266,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 +286,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 +303,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 +324,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 +350,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 +381,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 +400,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 +430,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 +468,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 +673,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 +691,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 +718,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 +747,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 +765,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 +797,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 +830,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 +857,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 +876,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 +930,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,50 +1111,55 @@ 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"]);
     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 CustomBulletChartMarkers = function (_a) {
+    var x = _a.x, y = _a.y, size = _a.size, _b = _a.animatedProps, color = _b.color, transform = _b.transform, data = _a.data, onMouseEnter = _a.onMouseEnter, onMouseMove = _a.onMouseMove, onMouseLeave = _a.onMouseLeave, onClick = _a.onClick;
+    return (jsxRuntime.jsx(web.animated.circle, { transform: transform, cx: x, cy: y, fill: color, stroke: color, r: size, 
+        // @ts-ignore onMouseMove event for circle is not supported, but it works
+        onMouseMove: function (event) { return onMouseMove(data, event); }, 
+        // @ts-ignore onMouseEnter event for circle is not supported, but it works
+        onMouseEnter: function (event) { return onMouseEnter(data, event); }, 
+        // @ts-ignore onMouseLeave event for circle is not supported, but it works
+        onMouseLeave: function (event) { return onMouseLeave(data, event); }, 
+        // @ts-ignore onClick event for circle is not supported, but it works
+        onClick: function (event) { return onClick(data, event); } }));
 };
 
-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 CustomMeasure = function (_a) {
+    var x = _a.x, y = _a.y, width = _a.width, height = _a.height; _a.color;
+    return (jsxRuntime.jsx("rect", { x: x + 2, y: y + 2, width: width - 4, height: height - 4, fill: chartColors.darkGrey }));
 };
 
-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;
-    return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(UgBulletChart, __assign({ data: [{
+    var width = _a.width, height = _a.height, ranges = _a.ranges, values = _a.values;
+    return (jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height, id: "ciolla" }, { children: jsxRuntime.jsx(UgBulletChart, { theme: DEFAULT_CHARTS_THEME, 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) {
+                },
+            ], measureComponent: CustomMeasure, markerColors: chartColors.darkPine, 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)) })));
+                return (jsxRuntime.jsx(CustomBulletChartMarkers, __assign({}, markerProps, { size: 4 })));
+            }, rangeColors: chartColors.lightGrey, rangeBorderColor: "white", rangeBorderWidth: 2, margin: { top: 0, right: 10, bottom: -1, left: 10 } }) })));
 };
-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 +1190,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,11 +1222,11 @@ var HalfPieChart = function (_a) {
         return newColors;
     };
     var _b = React.useState(grayOutColors(0)), currentColors = _b[0], setCurrentColors = _b[1];
-    return (jsxRuntime.jsxs("div", __assign({ style: { width: width, height: height, position: "relative" } }, { children: [jsxRuntime.jsx(HalfPieChartComponent, { theme: theme, colors: currentColors, width: "100%", 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));

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/bullet/CustomBulletChartMarker.d.ts

@@ -1,9 +1,2 @@
-interface CustomBulletChartMarkerProps {
-    x: number;
-    y: number;
-    bulletRadius: number;
-    fill: string;
-    size: number;
-}
-export declare const CustomBulletChartMarker: ({ x, y, bulletRadius, fill, size, }: CustomBulletChartMarkerProps) => JSX.Element;
-export {};
+import { BulletMarkersItemProps } from "@nivo/bullet";
+export declare const CustomBulletChartMarkers: ({ x, y, size, animatedProps: { color, transform }, data, onMouseEnter, onMouseMove, onMouseLeave, onClick, }: BulletMarkersItemProps) => JSX.Element;

package/build/stories/charts/bullet/CustomBulletChartMeasure.d.ts

@@ -0,0 +1,8 @@
+export interface CustomBulletChartMeasureProps {
+    x: number;
+    y: number;
+    color: string;
+    width: number;
+    height: number;
+}
+export declare const CustomMeasure: ({ x, y, width, height, color }: CustomBulletChartMeasureProps) => JSX.Element;

package/build/stories/charts/bullet/_types.d.ts

@@ -3,9 +3,4 @@ export interface BulletChartProps {
     values: number[];
     width?: string;
     height?: string;
-    markerColor?: string;
-    markerSize?: number;
-    rangeColor?: string;
-    measureSize?: number;
-    measureColor?: string;
 }

package/build/stories/charts/bullet/index.d.ts

@@ -1,3 +1,3 @@
 import { BulletChartProps } from "./_types";
-declare const BulletChart: ({ width, height, ranges, values, markerColor, markerSize, rangeColor, measureSize, measureColor, ...props }: BulletChartProps) => JSX.Element;
+declare const BulletChart: ({ width, height, ranges, values }: BulletChartProps) => JSX.Element;
 export { BulletChart };

package/build/stories/charts/bullet/index.stories.d.ts

@@ -2,5 +2,5 @@ import { ComponentMeta, Story } from "@storybook/react";
 import { BulletChartProps } from "./_types";
 export declare const Default: Story<BulletChartProps>;
 export declare const Widget: Story<BulletChartProps>;
-declare const _default: ComponentMeta<({ width, height, ranges, values, markerColor, markerSize, rangeColor, measureSize, measureColor, ...props }: BulletChartProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ width, height, ranges, values }: BulletChartProps) => JSX.Element>;
 export default _default;

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.29",
+  "version": "2.12.31",
   "dependencies": {
     "@nivo/bar": "^0.80.0",
     "@nivo/bullet": "^0.80.0",

package/build/stories/charts/bullet/CustomBulletChartRange.d.ts

@@ -1,8 +0,0 @@
-export interface CustomBulletChartRangeProps {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    fill: string;
-}
-export declare const CustomBulletChartRange: ({ x, y, width, height, fill }: CustomBulletChartRangeProps) => JSX.Element;