@servicetitan/marketing-ui 1.5.0 → 1.8.0

package/dist/utils/formatters.js

@@ -25,7 +25,7 @@ const formatPercentValue = (value) => {
     if (!value) {
         return '0';
     }
-    const valueMain = value ? Math.abs(Math.floor(value)) : 0;
+    const valueMain = value ? Math.abs(Math.round(value)) : 0;
     if (valueMain > 0) {
         return accounting.formatNumber(valueMain, 0);
     }
@@ -45,27 +45,27 @@ const formatMoney = (value) => (value < 0 ? '-' : '') + accounting.formatMoney(M
 exports.formatMoney = formatMoney;
 const formatPercent100 = (value) => `${formatPercentValue(value)}%`;
 exports.formatPercent100 = formatPercent100;
-const formatPercent = (value) => exports.formatPercent100(value * 100);
+const formatPercent = (value) => (0, exports.formatPercent100)(value * 100);
 exports.formatPercent = formatPercent;
 const formatNumber = (value) => accounting.formatNumber(value, 0, ',');
 exports.formatNumber = formatNumber;
 const formatValue = (value, format) => {
     if (format === 'money') {
-        return exports.formatMoney(value);
+        return (0, exports.formatMoney)(value);
     }
     if (format === 'percent') {
-        return exports.formatPercent(value);
+        return (0, exports.formatPercent)(value);
     }
     if (format === 'percent-100') {
-        return exports.formatPercent100(value);
+        return (0, exports.formatPercent100)(value);
     }
     if (format === 'number') {
-        return exports.formatNumber(value);
+        return (0, exports.formatNumber)(value);
     }
     if (format === 'rate') {
-        return exports.formatRate(value);
+        return (0, exports.formatRate)(value);
     }
-    return exports.formatNumber(value);
+    return (0, exports.formatNumber)(value);
 };
 exports.formatValue = formatValue;
 //# sourceMappingURL=formatters.js.map

package/dist/utils/formatters.js.map

@@ -1 +1 @@
-{"version":3,"file":"formatters.js","sourceRoot":"","sources":["../../src/utils/formatters.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,uDAAyC;AAIzC,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAU,EAAE;IACjD,IAAI,CAAC,KAAK,EAAE;QACR,OAAO,GAAG,CAAC;KACd;IAED,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE1D,IAAI,SAAS,GAAG,CAAC,EAAE;QACf,OAAO,UAAU,CAAC,YAAY,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;KAChD;IAED,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,SAAS,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;IAE1E,OAAO,KAAK,YAAY,EAAE,CAAC;AAC/B,CAAC,CAAC;AAEK,MAAM,UAAU,GAAG,CAAC,KAAa,EAAU,EAAE;IAChD,IAAI,CAAC,KAAK,EAAE;QACR,OAAO,MAAM,CAAC;KACjB;IAED,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,SAAS,GAAG,EAAE,CAAC;IAE7D,OAAO,GAAG,SAAS,IAAI,YAAY,GAAG,CAAC;AAC3C,CAAC,CAAC;AATW,QAAA,UAAU,cASrB;AAEK,MAAM,WAAW,GAAG,CAAC,KAAa,EAAU,EAAE,CACjD,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC;AADtE,QAAA,WAAW,eAC2D;AAC5E,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,GAAG,CAAC;AAA9E,QAAA,gBAAgB,oBAA8D;AACpF,MAAM,aAAa,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,wBAAgB,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC;AAAzE,QAAA,aAAa,iBAA4D;AAC/E,MAAM,YAAY,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC;AAAjF,QAAA,YAAY,gBAAqE;AAEvF,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,MAAwB,EAAE,EAAE;IACnE,IAAI,MAAM,KAAK,OAAO,EAAE;QACpB,OAAO,mBAAW,CAAC,KAAK,CAAC,CAAC;KAC7B;IAED,IAAI,MAAM,KAAK,SAAS,EAAE;QACtB,OAAO,qBAAa,CAAC,KAAK,CAAC,CAAC;KAC/B;IAED,IAAI,MAAM,KAAK,aAAa,EAAE;QAC1B,OAAO,wBAAgB,CAAC,KAAK,CAAC,CAAC;KAClC;IAED,IAAI,MAAM,KAAK,QAAQ,EAAE;QACrB,OAAO,oBAAY,CAAC,KAAK,CAAC,CAAC;KAC9B;IAED,IAAI,MAAM,KAAK,MAAM,EAAE;QACnB,OAAO,kBAAU,CAAC,KAAK,CAAC,CAAC;KAC5B;IAED,OAAO,oBAAY,CAAC,KAAK,CAAC,CAAC;AAC/B,CAAC,CAAC;AAtBW,QAAA,WAAW,eAsBtB"}
+{"version":3,"file":"formatters.js","sourceRoot":"","sources":["../../src/utils/formatters.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,uDAAyC;AAIzC,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAU,EAAE;IACjD,IAAI,CAAC,KAAK,EAAE;QACR,OAAO,GAAG,CAAC;KACd;IAED,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE1D,IAAI,SAAS,GAAG,CAAC,EAAE;QACf,OAAO,UAAU,CAAC,YAAY,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;KAChD;IAED,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,SAAS,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;IAE1E,OAAO,KAAK,YAAY,EAAE,CAAC;AAC/B,CAAC,CAAC;AAEK,MAAM,UAAU,GAAG,CAAC,KAAa,EAAU,EAAE;IAChD,IAAI,CAAC,KAAK,EAAE;QACR,OAAO,MAAM,CAAC;KACjB;IAED,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,SAAS,GAAG,EAAE,CAAC;IAE7D,OAAO,GAAG,SAAS,IAAI,YAAY,GAAG,CAAC;AAC3C,CAAC,CAAC;AATW,QAAA,UAAU,cASrB;AAEK,MAAM,WAAW,GAAG,CAAC,KAAa,EAAU,EAAE,CACjD,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC;AADtE,QAAA,WAAW,eAC2D;AAC5E,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,GAAG,CAAC;AAA9E,QAAA,gBAAgB,oBAA8D;AACpF,MAAM,aAAa,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,IAAA,wBAAgB,EAAC,KAAK,GAAG,GAAG,CAAC,CAAC;AAAzE,QAAA,aAAa,iBAA4D;AAC/E,MAAM,YAAY,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC;AAAjF,QAAA,YAAY,gBAAqE;AAEvF,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,MAAwB,EAAE,EAAE;IACnE,IAAI,MAAM,KAAK,OAAO,EAAE;QACpB,OAAO,IAAA,mBAAW,EAAC,KAAK,CAAC,CAAC;KAC7B;IAED,IAAI,MAAM,KAAK,SAAS,EAAE;QACtB,OAAO,IAAA,qBAAa,EAAC,KAAK,CAAC,CAAC;KAC/B;IAED,IAAI,MAAM,KAAK,aAAa,EAAE;QAC1B,OAAO,IAAA,wBAAgB,EAAC,KAAK,CAAC,CAAC;KAClC;IAED,IAAI,MAAM,KAAK,QAAQ,EAAE;QACrB,OAAO,IAAA,oBAAY,EAAC,KAAK,CAAC,CAAC;KAC9B;IAED,IAAI,MAAM,KAAK,MAAM,EAAE;QACnB,OAAO,IAAA,kBAAU,EAAC,KAAK,CAAC,CAAC;KAC5B;IAED,OAAO,IAAA,oBAAY,EAAC,KAAK,CAAC,CAAC;AAC/B,CAAC,CAAC;AAtBW,QAAA,WAAW,eAsBtB"}

package/dist/utils/use-client-rect.js

@@ -22,14 +22,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useClientRect = void 0;
 const react_1 = __importStar(require("react"));
 const useClientRect = () => {
-    const element = react_1.useRef(null);
-    const [rect, setRect] = react_1.useState(null);
-    const handleResize = react_1.useCallback(() => {
+    const element = (0, react_1.useRef)(null);
+    const [rect, setRect] = (0, react_1.useState)(null);
+    const handleResize = (0, react_1.useCallback)(() => {
         if (element.current) {
             setRect(element.current.getBoundingClientRect());
         }
     }, []);
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (!rect) {
             return;
         }

package/dist/utils/use-client-rect.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-client-rect.js","sourceRoot":"","sources":["../../src/utils/use-client-rect.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwE;AAEjE,MAAM,aAAa,GAAG,GAI3B,EAAE;IACA,MAAM,OAAO,GAAG,cAAM,CAAqB,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,gBAAQ,CAAiB,IAAI,CAAC,CAAC;IAEvD,MAAM,YAAY,GAAG,mBAAW,CAAC,GAAG,EAAE;QAClC,IAAI,OAAO,CAAC,OAAO,EAAE;YACjB,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,CAAC;SACpD;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,iBAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,IAAI,EAAE;YACP,OAAO;SACV;QAED;;;WAGG;QACH,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE;;YACvB,MAAM,OAAO,GAAG,MAAA,OAAO,CAAC,OAAO,0CAAE,qBAAqB,EAAE,CAAC;YAEzD,IACI,OAAO;gBACP,IAAI;gBACJ,CAAC,OAAO,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;oBACzB,OAAO,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM;oBAC9B,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC;oBACpB,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,EAC3B;gBACE,OAAO,CAAC,OAAO,CAAC,CAAC;aACpB;QACL,CAAC,EAAE,CAAC,CAAC,CAAC;QAEN,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,MAAM,GAAG,GAAG,eAAK,CAAC,WAAW,CACzB,CAAC,IAAwB,EAAE,EAAE;QACzB,IAAI,IAAI,KAAK,IAAI,EAAE;YACf,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YAChD,OAAO,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,CAAC;SACzC;aAAM;YACH,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YACnD,OAAO,CAAC,IAAI,CAAC,CAAC;SACjB;QACD,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;IAC3B,CAAC,EACD,CAAC,YAAY,CAAC,CACjB,CAAC;IAEF,OAAO,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;AACxC,CAAC,CAAC;AAxDW,QAAA,aAAa,iBAwDxB"}
+{"version":3,"file":"use-client-rect.js","sourceRoot":"","sources":["../../src/utils/use-client-rect.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwE;AAEjE,MAAM,aAAa,GAAG,GAI3B,EAAE;IACA,MAAM,OAAO,GAAG,IAAA,cAAM,EAAqB,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAiB,IAAI,CAAC,CAAC;IAEvD,MAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAClC,IAAI,OAAO,CAAC,OAAO,EAAE;YACjB,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,CAAC;SACpD;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,CAAC,IAAI,EAAE;YACP,OAAO;SACV;QAED;;;WAGG;QACH,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE;;YACvB,MAAM,OAAO,GAAG,MAAA,OAAO,CAAC,OAAO,0CAAE,qBAAqB,EAAE,CAAC;YAEzD,IACI,OAAO;gBACP,IAAI;gBACJ,CAAC,OAAO,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;oBACzB,OAAO,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM;oBAC9B,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC;oBACpB,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,EAC3B;gBACE,OAAO,CAAC,OAAO,CAAC,CAAC;aACpB;QACL,CAAC,EAAE,CAAC,CAAC,CAAC;QAEN,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,MAAM,GAAG,GAAG,eAAK,CAAC,WAAW,CACzB,CAAC,IAAwB,EAAE,EAAE;QACzB,IAAI,IAAI,KAAK,IAAI,EAAE;YACf,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YAChD,OAAO,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,CAAC;SACzC;aAAM;YACH,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YACnD,OAAO,CAAC,IAAI,CAAC,CAAC;SACjB;QACD,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;IAC3B,CAAC,EACD,CAAC,YAAY,CAAC,CACjB,CAAC;IAEF,OAAO,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;AACxC,CAAC,CAAC;AAxDW,QAAA,aAAa,iBAwDxB"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/marketing-ui",
-    "version": "1.5.0",
+    "version": "1.8.0",
     "description": "Marketing UI component and utils",
     "repository": {
         "type": "git",
@@ -50,5 +50,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "e30c18044c37f4d8b8c18855499bd5dab801bc5c"
+    "gitHead": "fbd5f09b2656da18e7dd0e03d6a7aa05cc4f8cc6"
 }

package/src/components/charts/line-chart/components/body.module.less

@@ -1,7 +1,7 @@
 @import (reference) '~@servicetitan/tokens/dist/tokens.less';
 
 .chart-wrapper {
-    height: 250px;
+    height: 440px;
     position: relative;
 }
 

package/src/components/charts/line-chart/components/body.tsx

@@ -98,7 +98,7 @@ export const Body: React.FC<{ classNameTitle?: string }> = provide({ singletons:
                     />
                 )}
                 {display.metricsTitlePosition === 'bottom' && (
-                    <Stack direction="row" justifyContent="center" className="p-2">
+                    <Stack direction="row" justifyContent="center" className="p-3">
                         <MetricsTitle metrics={metrics} />
                     </Stack>
                 )}

package/src/components/charts/line-chart/components/hover-popover.module.less

@@ -6,7 +6,7 @@
     width: 1px;
     top: 0;
     background-color: @color-neutral-60;
-    padding: @spacing-2 0;
+    padding: @spacing-2 @spacing-0;
 }
 
 .trigger {

package/src/components/charts/line-chart/components/sidebar.module.less

@@ -63,7 +63,7 @@
     }
 
     .sidebar-no-title {
-        padding: 0 0 0 @spacing-2;
+        padding: @spacing-0 @spacing-0 @spacing-0 @spacing-2;
     }
 }
 
@@ -82,6 +82,6 @@
     }
 
     .sidebar-no-title {
-        padding: 0 @spacing-2 0 0;
+        padding: @spacing-0 @spacing-2 @spacing-0 @spacing-0;
     }
 }

package/src/components/charts/line-chart/components/stuff.tsx

@@ -47,7 +47,7 @@ export const MetricsTitle: React.FC<MetricsTitleProps> = ({ metrics }) => (
                 label={m.title}
                 color={m.color}
                 dashed={m.opts?.dashed}
-                className="m-x-1"
+                className="m-r-4"
             />
         ))}
     </Stack>

package/src/components/charts/line-chart/stores/line-chart.store.ts

@@ -43,10 +43,13 @@ const getSideMetricsSettings = (
             .filter(metricValues => stackedBarMetricIDs.includes(metricValues.metricId))
             .map(metric => metric.values);
 
-        const summedStackedMetrics = stackChartMetricValues[0].map((value, i) =>
+        const summedStackedMetrics = stackChartMetricValues[0]?.map((value, i) =>
             stackChartMetricValues.reduce((sum, metricValues) => sum + metricValues[i], 0)
         );
-        maxRange = Math.max(...summedStackedMetrics, maxRange);
+
+        if (summedStackedMetrics?.length) {
+            maxRange = Math.max(...summedStackedMetrics, maxRange);
+        }
     }
 
     if (!maxRange) {

package/src/components/stat/stat-card.module.less

@@ -2,6 +2,13 @@
 
 .stat-diff {
     white-space: nowrap;
+    span {
+        font-size: @typescale-0;
+    }
+}
+
+.stat-extended-diff {
+    margin-bottom: 2px;
 }
 
 .title {

package/src/components/stat/stat-card.module.less.d.ts

@@ -1,4 +1,5 @@
 export const __esModule: true;
 export const statDiff: string;
+export const statExtendedDiff: string;
 export const title: string;
 

package/src/components/stat/stat-card.tsx

@@ -55,7 +55,8 @@ export const StatDiff: React.FC<StatDiffProps> = ({
 }) => {
     const percents = format === 'percent';
     const [absDiff, diffPercent, isIncrease] = calculateDiff(value ?? 0, prev ?? 0, percents);
-    let text = absDiff === 0 ? '' : isIncrease ? '▲ ' : '▼ ';
+    const diff = absDiff === 0 ? '' : isIncrease ? '▲ ' : '▼ ';
+    let text = '';
 
     if (percents) {
         text += formatDifferencePercentage(absDiff, isIncrease);
@@ -80,6 +81,7 @@ export const StatDiff: React.FC<StatDiffProps> = ({
             )}
             size={size ?? 'small'}
         >
+            <span>{diff}</span>
             {value === undefined ? '\u00A0' : text}
         </BodyText>
     );

package/src/components/stat/stat-extended-card.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { BodyText, Icon, Headline, Eyebrow, Stack, Tooltip } from '@servicetitan/design-system';
 import { formatValue } from '../../utils/formatters';
 import { StatDiff } from './stat-card';
+import * as Styles from './stat-card.module.less';
 
 export interface StatExtendedCardProps {
     title: string;
@@ -54,11 +55,11 @@ export const StatExtendedCard: FC<StatExtendedCardProps> = ({
                     </Tooltip>
                 )}
             </Stack>
-            <Eyebrow size="small" className="m-t-3 c-black">
+            <Eyebrow size="small" className="m-t-2 c-black">
                 {title2}
             </Eyebrow>
 
-            <Stack justifyContent="space-between">
+            <Stack justifyContent="space-between" className="m-t-half">
                 <Stack alignItems="flex-end" className="flex-grow-1 flex-basis-0">
                     <Headline className="m-b-0-i m-r-half fw-normal-i" size="xlarge">
                         {formatValue(value, format)}
@@ -72,7 +73,7 @@ export const StatExtendedCard: FC<StatExtendedCardProps> = ({
                             format={format}
                             inverted={inverted}
                             neutral={neutral}
-                            className="m-l-1"
+                            className={classNames(Styles.statExtendedDiff, 'm-l-1')}
                         />
                     ) : undefined}
                 </Stack>

package/src/components/ui/date-range-picker/date-range-picker.module.less

@@ -13,7 +13,7 @@
         }
 
         .FormField__label {
-            margin: 0;
+            margin: @spacing-0;
         }
 
         .DateRangeTrigger__shortLabel {

package/src/utils/__tests__/formatters.test.ts

@@ -35,7 +35,7 @@ describe('formatPercent', () => {
         [0, '0%'],
         [0.1, '10%'],
         [0.0011, '0.1%'],
-        [0.9999, '99%'],
+        [0.9999, '100%'],
     ];
 
     tc.map(([value, result]) =>

package/src/utils/formatters.ts

@@ -7,7 +7,7 @@ const formatPercentValue = (value: number): string => {
         return '0';
     }
 
-    const valueMain = value ? Math.abs(Math.floor(value)) : 0;
+    const valueMain = value ? Math.abs(Math.round(value)) : 0;
 
     if (valueMain > 0) {
         return accounting.formatNumber(valueMain, 0);