@bunnyapp/components 1.6.0-beta.8 → 1.6.0-beta.9

package/dist/cjs/index.js

@@ -22643,6 +22643,24 @@ const getFeatureUsage = async ({ subscriptionChargeId, token, apiHost, }) => {
         throw new Error('No data found');
 };
 
+var utc$2 = {exports: {}};
+
+var utc$1 = utc$2.exports;
+
+var hasRequiredUtc;
+
+function requireUtc () {
+	if (hasRequiredUtc) return utc$2.exports;
+	hasRequiredUtc = 1;
+	(function (module, exports) {
+		!function(t,i){module.exports=i();}(utc$1,(function(){var t="minute",i=/[+-]\d\d(?::?\d\d)?/g,e=/([+-]|\d\d)/g;return function(s,f,n){var u=f.prototype;n.utc=function(t){var i={date:t,utc:!0,args:arguments};return new f(i)},u.utc=function(i){var e=n(this.toDate(),{locale:this.$L,utc:!0});return i?e.add(this.utcOffset(),t):e},u.local=function(){return n(this.toDate(),{locale:this.$L,utc:!1})};var r=u.parse;u.parse=function(t){t.utc&&(this.$u=!0),this.$utils().u(t.$offset)||(this.$offset=t.$offset),r.call(this,t);};var o=u.init;u.init=function(){if(this.$u){var t=this.$d;this.$y=t.getUTCFullYear(),this.$M=t.getUTCMonth(),this.$D=t.getUTCDate(),this.$W=t.getUTCDay(),this.$H=t.getUTCHours(),this.$m=t.getUTCMinutes(),this.$s=t.getUTCSeconds(),this.$ms=t.getUTCMilliseconds();}else o.call(this);};var a=u.utcOffset;u.utcOffset=function(s,f){var n=this.$utils().u;if(n(s))return this.$u?0:n(this.$offset)?a.call(this):this.$offset;if("string"==typeof s&&(s=function(t){void 0===t&&(t="");var s=t.match(i);if(!s)return null;var f=(""+s[0]).match(e)||["-",0,0],n=f[0],u=60*+f[1]+ +f[2];return 0===u?0:"+"===n?u:-u}(s),null===s))return this;var u=Math.abs(s)<=16?60*s:s;if(0===u)return this.utc(f);var r=this.clone();if(f)return r.$offset=u,r.$u=!1,r;var o=this.$u?this.toDate().getTimezoneOffset():-1*this.utcOffset();return (r=this.local().add(u+o,t)).$offset=u,r.$x.$localOffset=o,r};var h=u.format;u.format=function(t){var i=t||(this.$u?"YYYY-MM-DDTHH:mm:ss[Z]":"");return h.call(this,i)},u.valueOf=function(){var t=this.$utils().u(this.$offset)?0:this.$offset+(this.$x.$localOffset||this.$d.getTimezoneOffset());return this.$d.valueOf()-6e4*t},u.isUTC=function(){return !!this.$u},u.toISOString=function(){return this.toDate().toISOString()},u.toString=function(){return this.toDate().toUTCString()};var l=u.toDate;u.toDate=function(t){return "s"===t&&this.$offset?n(this.format("YYYY-MM-DD HH:mm:ss:SSS")).toDate():l.call(this)};var c=u.diff;u.diff=function(t,i,e){if(t&&this.$u===t.$u)return c.call(this,t,i,e);var s=this.local(),f=n(t).local();return c.call(s,f,i,e)};}})); 
+	} (utc$2));
+	return utc$2.exports;
+}
+
+var utcExports = requireUtc();
+var utc = /*@__PURE__*/getDefaultExportFromCjs(utcExports);
+
 const StyledModal = defaultStyled(antd.Modal) `
   z-index: 2000;
 
@@ -22675,74 +22693,103 @@ const HeaderModalWrapper = (props) => {
 };
 
 const { isPlural } = pkg;
+dayjs.extend(utc);
 const getDateFormat = (dataInterval) => {
     return dataInterval === common.DataInterval.DAILY
-        ? "MMM DD"
+        ? 'MMM DD'
         : dataInterval === common.DataInterval.MONTHLY
-            ? "MMM"
+            ? 'MMM'
             : dataInterval === common.DataInterval.QUARTERLY
-                ? "MMM"
+                ? 'MMM'
                 : dataInterval === common.DataInterval.SEMIANNUALLY
-                    ? "MMM"
-                    : "YYYY";
+                    ? 'MMM'
+                    : 'YYYY';
 };
-const FeatureUsageGraph = ({ charge, featureUsage, }) => {
+const USAGE_ROW_HEIGHT = 20;
+const FeatureUsageGraph = ({ charge, featureUsage, useAreaChart = false, }) => {
     var _a;
     // State
-    const [isModalOpen, setIsModalOpen] = react.useState(false);
-    const dataFormat = getDateFormat(featureUsage.dataInterval);
-    const chargeFeatureName = ((_a = charge.feature) === null || _a === void 0 ? void 0 : _a.name) || "";
+    const [open, setOpen] = react.useState(false);
+    const chargeFeatureName = ((_a = charge.feature) === null || _a === void 0 ? void 0 : _a.name) || '';
     const featureName = isPlural(chargeFeatureName)
         ? chargeFeatureName
         : pkg(chargeFeatureName);
-    const basicViewData = featureUsage.data.map((data) => ({
-        label: dayjs(data.periodStart).format(dataFormat) +
-            " - " +
-            dayjs(data.periodEnd).format(dataFormat),
-        [featureName]: data.intervalsTotal,
-    }));
-    const detailedViewData = featureUsage.data.flatMap((data) => {
-        return data.intervals.map((interval) => ({
-            label: dayjs(interval.intervalStart).format(dataFormat),
+    if (!featureUsage)
+        return null;
+    const dataFormat = getDateFormat(featureUsage.dataInterval);
+    // Use individual intervals instead of grouped periods
+    const basicViewData = featureUsage.data.flatMap(data => {
+        return data.intervals.map(interval => ({
+            label: dayjs.utc(interval.intervalStart).format(dataFormat),
             [featureName]: interval.intervalUsage,
         }));
     });
-    if (!basicViewData.some((d) => {
+    const detailedViewData = basicViewData;
+    if (!basicViewData.some(d => {
         const usage = d[featureName];
-        if (typeof usage === "number") {
+        if (typeof usage === 'number') {
             return usage > 0;
         }
         return false;
     }))
-        return jsxRuntime.jsx("div", { children: "no usage" });
-    return (jsxRuntime.jsxs("div", { onClick: () => {
-            setIsModalOpen(true);
-        }, children: [jsxRuntime.jsx("div", { style: {
-                    height: "36px",
-                }, children: jsxRuntime.jsx(FeatureBarChart, { data: basicViewData, featureName: featureName, height: 36, width: 120 }) }), jsxRuntime.jsx(HeaderModalWrapper, { footer: null, open: isModalOpen, onCancel: (e) => {
-                    e.stopPropagation();
-                    setIsModalOpen(false);
-                }, title: `Usage for period ${dayjs(charge.startDate).format("MMM DD, YYYY")} - ${dayjs(charge.endDate).format("MMM DD, YYYY")}`, children: jsxRuntime.jsx("div", { className: "bunny-py-4 bunny-px-6 bunny-overflow-visible", children: jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 200, children: jsxRuntime.jsx(FeatureBarChart, { data: detailedViewData, displayXAxis: true, featureName: featureName }) }) }) })] }));
+        return 'no usage';
+    return (jsxRuntime.jsxs("div", { className: "bunny-cursor-pointer", onClick: e => {
+            e === null || e === void 0 ? void 0 : e.stopPropagation();
+        }, children: [jsxRuntime.jsx("div", { onClick: () => setOpen(true), style: {
+                    height: USAGE_ROW_HEIGHT,
+                }, children: jsxRuntime.jsx(FeatureBarChart, { data: basicViewData, featureName: featureName, height: USAGE_ROW_HEIGHT, width: 120, useAreaChart: useAreaChart }) }), jsxRuntime.jsx(HeaderModalWrapper, { footer: null, onCancel: () => {
+                    setOpen(false);
+                }, open: open, title: `Usage for period ${dayjs.utc(charge.startDate).format('MMM DD, YYYY')} - ${dayjs
+                    .utc(charge.endDate)
+                    .format('MMM DD, YYYY')}`, children: jsxRuntime.jsx("div", { className: "bunny-py-4 bunny-px-6", onClick: e => e.stopPropagation(), children: jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 200, children: jsxRuntime.jsx(FeatureBarChart, { data: detailedViewData, displayXAxis: true, featureName: featureName }) }) }) })] }));
 };
-const FeatureBarChart = ({ data, displayXAxis, featureName, height, width, }) => {
-    // Context
-    const { brandColor } = react.useContext(BrandContext);
-    return (jsxRuntime.jsxs(StyledBarChart, { width: width, height: height, data: data, children: [jsxRuntime.jsx(recharts.XAxis, { className: "bunny-text-xs", dataKey: "label", ...(displayXAxis
+const FeatureBarChart = ({ data, displayXAxis, featureName, height, width, useAreaChart, }) => {
+    const BLUE_300 = '#93c5fd';
+    if (useAreaChart) {
+        return (jsxRuntime.jsxs(StyledAreaChart, { data: data, height: height, style: { overflow: 'visible' }, width: width, margin: { top: 0, right: 0, left: 0, bottom: 0 }, children: [jsxRuntime.jsx(recharts.XAxis, { className: "bunny-text-xs", dataKey: "label", interval: "equidistantPreserveStart", axisLine: false, ...(displayXAxis
+                        ? {}
+                        : {
+                            tickFormatter: () => '',
+                            tickLine: false,
+                        }), style: {
+                        fill: common.SLATE_500,
+                    }, height: displayXAxis ? undefined : 1 }), jsxRuntime.jsx(recharts.Tooltip, { cursor: { fill: common.SLATE_200 }, ...(displayXAxis
+                        ? {}
+                        : {
+                            position: { y: -62 },
+                        }), wrapperStyle: { zIndex: 1000 }, content: ({ payload, label }) => {
+                        var _a, _b;
+                        const usage = (_b = (_a = payload === null || payload === void 0 ? void 0 : payload[0]) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.toLocaleString();
+                        return (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-rounded bunny-bg-white bunny-p-2 bunny-shadow bunny-gap-1", children: [jsxRuntime.jsx("div", { className: "bunny-text-left bunny-text-sm bunny-font-medium", children: label }), jsxRuntime.jsxs("div", { className: "bunny-text-left bunny-flex bunny-items-center bunny-text-sm", children: [jsxRuntime.jsxs("span", { children: [featureName, ": "] }), jsxRuntime.jsxs("span", { children: ["\u00A0", usage] })] })] }));
+                    } }), jsxRuntime.jsx(recharts.Area, { type: "monotone", dataKey: featureName, stroke: BLUE_300, fill: BLUE_300, fillOpacity: 0.6 })] }));
+    }
+    return (jsxRuntime.jsxs(StyledBarChart, { data: data, height: height, style: { overflow: 'visible' }, width: width, margin: { top: 0, right: 0, left: 0, bottom: 0 }, children: [jsxRuntime.jsx(recharts.XAxis, { className: "bunny-text-xs", dataKey: "label", interval: "equidistantPreserveStart", ...(displayXAxis
                     ? {}
                     : {
-                        tickFormatter: () => "",
+                        tickFormatter: () => '',
                         tickLine: false,
-                    }), height: displayXAxis ? undefined : 1, interval: "equidistantPreserveStart", style: {
+                    }), style: {
                     fill: common.SLATE_500,
-                } }), jsxRuntime.jsx(recharts.Tooltip, { cursor: { fill: common.SLATE_200 }, ...(displayXAxis
+                }, height: displayXAxis ? undefined : 1 }), jsxRuntime.jsx(recharts.Tooltip, { cursor: { fill: common.SLATE_200 }, ...(displayXAxis
                     ? {}
                     : {
                         position: { y: -62 },
-                    }) }), jsxRuntime.jsx(recharts.Bar, { dataKey: featureName, fill: brandColor, activeBar: jsxRuntime.jsx(recharts.Rectangle, { fill: brandColor }) })] }));
+                    }), wrapperStyle: { zIndex: 1000 }, content: ({ payload, label }) => {
+                    var _a, _b;
+                    const usage = (_b = (_a = payload === null || payload === void 0 ? void 0 : payload[0]) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.toLocaleString();
+                    return (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-rounded bunny-bg-white bunny-p-2 bunny-shadow bunny-gap-1", children: [jsxRuntime.jsx("div", { className: "bunny-text-left bunny-text-sm bunny-font-medium", children: label }), jsxRuntime.jsxs("div", { className: "bunny-text-left bunny-flex bunny-items-center bunny-text-sm", children: [jsxRuntime.jsxs("span", { children: [featureName, ": "] }), jsxRuntime.jsxs("span", { children: ["\u00A0", usage] })] })] }));
+                } }), jsxRuntime.jsx(recharts.Bar, { activeBar: jsxRuntime.jsx(recharts.Rectangle, { fill: BLUE_300 }), dataKey: featureName, fill: BLUE_300 })] }));
 };
 const StyledBarChart = defaultStyled(recharts.BarChart) `
   .recharts-surface {
     overflow: visible;
+    outline: none;
+  }
+`;
+const StyledAreaChart = defaultStyled(recharts.AreaChart) `
+  .recharts-surface {
+    overflow: visible;
+    outline: none;
   }
 `;
 
@@ -23221,7 +23268,7 @@ const SubscriptionCardDesktopRow = ({ charge, chargeIndex, subscription, }) => {
     return (jsxRuntime.jsxs("div", { className: "bunny-contents", children: [(isRampFirstRow || !isRamp) && (jsxRuntime.jsx(SubscriptionsListCell, { gridColumn: isRamp ? '1/-1' : '1', children: jsxRuntime.jsx("div", { className: `bunny-flex bunny-items-center bunny-gap-2 ${isDiscount ? 'bunny-pl-4' : ''}`, children: jsxRuntime.jsx("div", { children: isRampFirstRow || (!isRamp && !dontShowChargeName) ? charge.name : '' }) }) })), jsxRuntime.jsx(SubscriptionsListCell, { gridColumn: 2, children: jsxRuntime.jsx("div", { children: chargePeriod }) }), jsxRuntime.jsx(SubscriptionsListCell, { right: true, children: charge.kind === common.QuoteChangeKind.DISCOUNT
                     ? ''
                     : charge.chargeType === common.ChargeType.USAGE
-                        ? data && jsxRuntime.jsx(FeatureUsageGraph, { charge: charge, featureUsage: data })
+                        ? data && jsxRuntime.jsx(FeatureUsageGraph, { charge: charge, featureUsage: data, useAreaChart: true })
                         : charge.isAmendment
                             ? `+${(_b = charge.quantity) === null || _b === void 0 ? void 0 : _b.toLocaleString()}`
                             : (_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString() }), jsxRuntime.jsx(SubscriptionsListCell, { right: true, children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: subscription.currencyId }) }), jsxRuntime.jsx(SubscriptionsListCell, { right: true, children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) })] }));

package/dist/esm/index.js

@@ -15,7 +15,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useElements, useStripe, PaymentElement, Elements } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js/pure/index.js';
 import { print } from 'graphql';
-import { BarChart, ResponsiveContainer, XAxis, Tooltip as Tooltip$1, Bar, Rectangle } from 'recharts';
+import { BarChart, AreaChart, ResponsiveContainer, XAxis, Tooltip as Tooltip$1, Area, Bar, Rectangle } from 'recharts';
 import { omit } from 'lodash-es';
 import pkg from 'pluralize';
 
@@ -22641,6 +22641,24 @@ const getFeatureUsage = async ({ subscriptionChargeId, token, apiHost, }) => {
         throw new Error('No data found');
 };
 
+var utc$2 = {exports: {}};
+
+var utc$1 = utc$2.exports;
+
+var hasRequiredUtc;
+
+function requireUtc () {
+	if (hasRequiredUtc) return utc$2.exports;
+	hasRequiredUtc = 1;
+	(function (module, exports) {
+		!function(t,i){module.exports=i();}(utc$1,(function(){var t="minute",i=/[+-]\d\d(?::?\d\d)?/g,e=/([+-]|\d\d)/g;return function(s,f,n){var u=f.prototype;n.utc=function(t){var i={date:t,utc:!0,args:arguments};return new f(i)},u.utc=function(i){var e=n(this.toDate(),{locale:this.$L,utc:!0});return i?e.add(this.utcOffset(),t):e},u.local=function(){return n(this.toDate(),{locale:this.$L,utc:!1})};var r=u.parse;u.parse=function(t){t.utc&&(this.$u=!0),this.$utils().u(t.$offset)||(this.$offset=t.$offset),r.call(this,t);};var o=u.init;u.init=function(){if(this.$u){var t=this.$d;this.$y=t.getUTCFullYear(),this.$M=t.getUTCMonth(),this.$D=t.getUTCDate(),this.$W=t.getUTCDay(),this.$H=t.getUTCHours(),this.$m=t.getUTCMinutes(),this.$s=t.getUTCSeconds(),this.$ms=t.getUTCMilliseconds();}else o.call(this);};var a=u.utcOffset;u.utcOffset=function(s,f){var n=this.$utils().u;if(n(s))return this.$u?0:n(this.$offset)?a.call(this):this.$offset;if("string"==typeof s&&(s=function(t){void 0===t&&(t="");var s=t.match(i);if(!s)return null;var f=(""+s[0]).match(e)||["-",0,0],n=f[0],u=60*+f[1]+ +f[2];return 0===u?0:"+"===n?u:-u}(s),null===s))return this;var u=Math.abs(s)<=16?60*s:s;if(0===u)return this.utc(f);var r=this.clone();if(f)return r.$offset=u,r.$u=!1,r;var o=this.$u?this.toDate().getTimezoneOffset():-1*this.utcOffset();return (r=this.local().add(u+o,t)).$offset=u,r.$x.$localOffset=o,r};var h=u.format;u.format=function(t){var i=t||(this.$u?"YYYY-MM-DDTHH:mm:ss[Z]":"");return h.call(this,i)},u.valueOf=function(){var t=this.$utils().u(this.$offset)?0:this.$offset+(this.$x.$localOffset||this.$d.getTimezoneOffset());return this.$d.valueOf()-6e4*t},u.isUTC=function(){return !!this.$u},u.toISOString=function(){return this.toDate().toISOString()},u.toString=function(){return this.toDate().toUTCString()};var l=u.toDate;u.toDate=function(t){return "s"===t&&this.$offset?n(this.format("YYYY-MM-DD HH:mm:ss:SSS")).toDate():l.call(this)};var c=u.diff;u.diff=function(t,i,e){if(t&&this.$u===t.$u)return c.call(this,t,i,e);var s=this.local(),f=n(t).local();return c.call(s,f,i,e)};}})); 
+	} (utc$2));
+	return utc$2.exports;
+}
+
+var utcExports = requireUtc();
+var utc = /*@__PURE__*/getDefaultExportFromCjs(utcExports);
+
 const StyledModal = defaultStyled(Modal) `
   z-index: 2000;
 
@@ -22673,74 +22691,103 @@ const HeaderModalWrapper = (props) => {
 };
 
 const { isPlural } = pkg;
+dayjs.extend(utc);
 const getDateFormat = (dataInterval) => {
     return dataInterval === DataInterval.DAILY
-        ? "MMM DD"
+        ? 'MMM DD'
         : dataInterval === DataInterval.MONTHLY
-            ? "MMM"
+            ? 'MMM'
             : dataInterval === DataInterval.QUARTERLY
-                ? "MMM"
+                ? 'MMM'
                 : dataInterval === DataInterval.SEMIANNUALLY
-                    ? "MMM"
-                    : "YYYY";
+                    ? 'MMM'
+                    : 'YYYY';
 };
-const FeatureUsageGraph = ({ charge, featureUsage, }) => {
+const USAGE_ROW_HEIGHT = 20;
+const FeatureUsageGraph = ({ charge, featureUsage, useAreaChart = false, }) => {
     var _a;
     // State
-    const [isModalOpen, setIsModalOpen] = useState(false);
-    const dataFormat = getDateFormat(featureUsage.dataInterval);
-    const chargeFeatureName = ((_a = charge.feature) === null || _a === void 0 ? void 0 : _a.name) || "";
+    const [open, setOpen] = useState(false);
+    const chargeFeatureName = ((_a = charge.feature) === null || _a === void 0 ? void 0 : _a.name) || '';
     const featureName = isPlural(chargeFeatureName)
         ? chargeFeatureName
         : pkg(chargeFeatureName);
-    const basicViewData = featureUsage.data.map((data) => ({
-        label: dayjs(data.periodStart).format(dataFormat) +
-            " - " +
-            dayjs(data.periodEnd).format(dataFormat),
-        [featureName]: data.intervalsTotal,
-    }));
-    const detailedViewData = featureUsage.data.flatMap((data) => {
-        return data.intervals.map((interval) => ({
-            label: dayjs(interval.intervalStart).format(dataFormat),
+    if (!featureUsage)
+        return null;
+    const dataFormat = getDateFormat(featureUsage.dataInterval);
+    // Use individual intervals instead of grouped periods
+    const basicViewData = featureUsage.data.flatMap(data => {
+        return data.intervals.map(interval => ({
+            label: dayjs.utc(interval.intervalStart).format(dataFormat),
             [featureName]: interval.intervalUsage,
         }));
     });
-    if (!basicViewData.some((d) => {
+    const detailedViewData = basicViewData;
+    if (!basicViewData.some(d => {
         const usage = d[featureName];
-        if (typeof usage === "number") {
+        if (typeof usage === 'number') {
             return usage > 0;
         }
         return false;
     }))
-        return jsx("div", { children: "no usage" });
-    return (jsxs("div", { onClick: () => {
-            setIsModalOpen(true);
-        }, children: [jsx("div", { style: {
-                    height: "36px",
-                }, children: jsx(FeatureBarChart, { data: basicViewData, featureName: featureName, height: 36, width: 120 }) }), jsx(HeaderModalWrapper, { footer: null, open: isModalOpen, onCancel: (e) => {
-                    e.stopPropagation();
-                    setIsModalOpen(false);
-                }, title: `Usage for period ${dayjs(charge.startDate).format("MMM DD, YYYY")} - ${dayjs(charge.endDate).format("MMM DD, YYYY")}`, children: jsx("div", { className: "bunny-py-4 bunny-px-6 bunny-overflow-visible", children: jsx(ResponsiveContainer, { width: "100%", height: 200, children: jsx(FeatureBarChart, { data: detailedViewData, displayXAxis: true, featureName: featureName }) }) }) })] }));
+        return 'no usage';
+    return (jsxs("div", { className: "bunny-cursor-pointer", onClick: e => {
+            e === null || e === void 0 ? void 0 : e.stopPropagation();
+        }, children: [jsx("div", { onClick: () => setOpen(true), style: {
+                    height: USAGE_ROW_HEIGHT,
+                }, children: jsx(FeatureBarChart, { data: basicViewData, featureName: featureName, height: USAGE_ROW_HEIGHT, width: 120, useAreaChart: useAreaChart }) }), jsx(HeaderModalWrapper, { footer: null, onCancel: () => {
+                    setOpen(false);
+                }, open: open, title: `Usage for period ${dayjs.utc(charge.startDate).format('MMM DD, YYYY')} - ${dayjs
+                    .utc(charge.endDate)
+                    .format('MMM DD, YYYY')}`, children: jsx("div", { className: "bunny-py-4 bunny-px-6", onClick: e => e.stopPropagation(), children: jsx(ResponsiveContainer, { width: "100%", height: 200, children: jsx(FeatureBarChart, { data: detailedViewData, displayXAxis: true, featureName: featureName }) }) }) })] }));
 };
-const FeatureBarChart = ({ data, displayXAxis, featureName, height, width, }) => {
-    // Context
-    const { brandColor } = useContext(BrandContext);
-    return (jsxs(StyledBarChart, { width: width, height: height, data: data, children: [jsx(XAxis, { className: "bunny-text-xs", dataKey: "label", ...(displayXAxis
+const FeatureBarChart = ({ data, displayXAxis, featureName, height, width, useAreaChart, }) => {
+    const BLUE_300 = '#93c5fd';
+    if (useAreaChart) {
+        return (jsxs(StyledAreaChart, { data: data, height: height, style: { overflow: 'visible' }, width: width, margin: { top: 0, right: 0, left: 0, bottom: 0 }, children: [jsx(XAxis, { className: "bunny-text-xs", dataKey: "label", interval: "equidistantPreserveStart", axisLine: false, ...(displayXAxis
+                        ? {}
+                        : {
+                            tickFormatter: () => '',
+                            tickLine: false,
+                        }), style: {
+                        fill: SLATE_500,
+                    }, height: displayXAxis ? undefined : 1 }), jsx(Tooltip$1, { cursor: { fill: SLATE_200 }, ...(displayXAxis
+                        ? {}
+                        : {
+                            position: { y: -62 },
+                        }), wrapperStyle: { zIndex: 1000 }, content: ({ payload, label }) => {
+                        var _a, _b;
+                        const usage = (_b = (_a = payload === null || payload === void 0 ? void 0 : payload[0]) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.toLocaleString();
+                        return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-rounded bunny-bg-white bunny-p-2 bunny-shadow bunny-gap-1", children: [jsx("div", { className: "bunny-text-left bunny-text-sm bunny-font-medium", children: label }), jsxs("div", { className: "bunny-text-left bunny-flex bunny-items-center bunny-text-sm", children: [jsxs("span", { children: [featureName, ": "] }), jsxs("span", { children: ["\u00A0", usage] })] })] }));
+                    } }), jsx(Area, { type: "monotone", dataKey: featureName, stroke: BLUE_300, fill: BLUE_300, fillOpacity: 0.6 })] }));
+    }
+    return (jsxs(StyledBarChart, { data: data, height: height, style: { overflow: 'visible' }, width: width, margin: { top: 0, right: 0, left: 0, bottom: 0 }, children: [jsx(XAxis, { className: "bunny-text-xs", dataKey: "label", interval: "equidistantPreserveStart", ...(displayXAxis
                     ? {}
                     : {
-                        tickFormatter: () => "",
+                        tickFormatter: () => '',
                         tickLine: false,
-                    }), height: displayXAxis ? undefined : 1, interval: "equidistantPreserveStart", style: {
+                    }), style: {
                     fill: SLATE_500,
-                } }), jsx(Tooltip$1, { cursor: { fill: SLATE_200 }, ...(displayXAxis
+                }, height: displayXAxis ? undefined : 1 }), jsx(Tooltip$1, { cursor: { fill: SLATE_200 }, ...(displayXAxis
                     ? {}
                     : {
                         position: { y: -62 },
-                    }) }), jsx(Bar, { dataKey: featureName, fill: brandColor, activeBar: jsx(Rectangle, { fill: brandColor }) })] }));
+                    }), wrapperStyle: { zIndex: 1000 }, content: ({ payload, label }) => {
+                    var _a, _b;
+                    const usage = (_b = (_a = payload === null || payload === void 0 ? void 0 : payload[0]) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.toLocaleString();
+                    return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-rounded bunny-bg-white bunny-p-2 bunny-shadow bunny-gap-1", children: [jsx("div", { className: "bunny-text-left bunny-text-sm bunny-font-medium", children: label }), jsxs("div", { className: "bunny-text-left bunny-flex bunny-items-center bunny-text-sm", children: [jsxs("span", { children: [featureName, ": "] }), jsxs("span", { children: ["\u00A0", usage] })] })] }));
+                } }), jsx(Bar, { activeBar: jsx(Rectangle, { fill: BLUE_300 }), dataKey: featureName, fill: BLUE_300 })] }));
 };
 const StyledBarChart = defaultStyled(BarChart) `
   .recharts-surface {
     overflow: visible;
+    outline: none;
+  }
+`;
+const StyledAreaChart = defaultStyled(AreaChart) `
+  .recharts-surface {
+    overflow: visible;
+    outline: none;
   }
 `;
 
@@ -23219,7 +23266,7 @@ const SubscriptionCardDesktopRow = ({ charge, chargeIndex, subscription, }) => {
     return (jsxs("div", { className: "bunny-contents", children: [(isRampFirstRow || !isRamp) && (jsx(SubscriptionsListCell, { gridColumn: isRamp ? '1/-1' : '1', children: jsx("div", { className: `bunny-flex bunny-items-center bunny-gap-2 ${isDiscount ? 'bunny-pl-4' : ''}`, children: jsx("div", { children: isRampFirstRow || (!isRamp && !dontShowChargeName) ? charge.name : '' }) }) })), jsx(SubscriptionsListCell, { gridColumn: 2, children: jsx("div", { children: chargePeriod }) }), jsx(SubscriptionsListCell, { right: true, children: charge.kind === QuoteChangeKind.DISCOUNT
                     ? ''
                     : charge.chargeType === ChargeType.USAGE
-                        ? data && jsx(FeatureUsageGraph, { charge: charge, featureUsage: data })
+                        ? data && jsx(FeatureUsageGraph, { charge: charge, featureUsage: data, useAreaChart: true })
                         : charge.isAmendment
                             ? `+${(_b = charge.quantity) === null || _b === void 0 ? void 0 : _b.toLocaleString()}`
                             : (_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString() }), jsx(SubscriptionsListCell, { right: true, children: jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: subscription.currencyId }) }), jsx(SubscriptionsListCell, { right: true, children: jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bunnyapp/components",
-  "version": "1.6.0-beta.8",
+  "version": "1.6.0-beta.9",
   "description": "Components from the Bunny portal to embed Bunny UI functionality into your application.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -65,7 +65,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "storybook": "^8.6.14",
-    "tailwindcss": "^4.1.17",
+    "tailwindcss": "^3.4.18",
     "typescript": "^5.9.3",
     "vite": "^6.4.1"
   },
@@ -86,13 +86,13 @@
     "graphql-request": "^6.1.0",
     "interweave": "^13.1.0",
     "less": "^4.2.0",
+    "rimraf": "^6.1.0",
     "lodash-es": "^4.17.21",
     "pluralize": "^8.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "recharts": "^2.15.0",
     "recoil": "^0.7.7",
-    "rimraf": "^6.1.0",
     "styled-components": "^6.1.13"
   },
   "msw": {