@trackunit/react-components 1.4.51 → 1.4.54

package/index.cjs.js

@@ -2563,16 +2563,20 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
 
 const cvaIndicator = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
 const cvaIndicatorIcon = cssClassVarianceUtilities.cvaMerge(["mr-2"]);
-const cvaIndicatorLabel = cssClassVarianceUtilities.cvaMerge(["font-medium", "capitalize", "text-secondary-600"], {
+const cvaIndicatorLabel = cssClassVarianceUtilities.cvaMerge(["capitalize", "text-secondary-600"], {
     variants: {
         size: {
             small: "pl-1 pr-1 text-xs",
             medium: "pl-2 pr-2 text-sm",
-            large: "pl-2 pr-2 text-base",
+        },
+        weight: {
+            normal: "font-normal",
+            medium: "font-medium",
         },
     },
     defaultVariants: {
         size: "medium",
+        weight: "medium",
     },
 });
 const cvaIndicatorPing = cssClassVarianceUtilities.cvaMerge(["animate-ping-sm", "absolute", "inline-flex", "h-full", "w-full", "rounded-full", "opacity-75", "bg-neutral-600"], {
@@ -2680,11 +2684,10 @@ const cvaIndicatorIconBackground = cssClassVarianceUtilities.cvaMerge(["rounded-
  * @param {IndicatorProps} props - The props for the Indicator component
  * @returns {ReactElement} Indicator component
  */
-const Indicator = ({ dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, size, className, ...rest }) => {
-    return (jsxRuntime.jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ...rest, children: [jsxRuntime.jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsxRuntime.jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label !== undefined && withLabel ? (jsxRuntime.jsx("div", { className: cvaIndicatorLabel({ size }), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label })) : null] }) }));
+const Indicator = ({ dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, size, weight, className, ...rest }) => {
+    return (jsxRuntime.jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxRuntime.jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ...rest, children: [jsxRuntime.jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsxRuntime.jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label !== undefined && withLabel ? (jsxRuntime.jsx("div", { className: cvaIndicatorLabel({ size, weight }), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label })) : null] }) }));
 };
 
-const cvaKPIContainer = cssClassVarianceUtilities.cvaMerge(["inline-flex"]);
 const cvaKPI = cssClassVarianceUtilities.cvaMerge(["w-full", "px-4", "py-2", "flex", "flex-col", "gap-1"], {
     variants: {
         variant: {
@@ -2741,13 +2744,12 @@ const LoadingContent$1 = () => (jsxRuntime.jsx("div", { className: "flex h-11 fl
  * @param {KPIProps} props - The props for the KPI component
  * @returns {ReactElement} KPI component
  */
-const KPI = ({ asChild = false, title, value, loading, unit, className, dataTestId, tooltipLabel, variant = "default", trend, ...rest }) => {
-    const Comp = asChild ? reactSlot.Slot : "div";
+const KPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, variant = "default", trend, ...rest }) => {
     const isSmallVariant = variant === "small";
-    return (jsxRuntime.jsxs(Comp, { className: cvaKPIContainer({ className }), "data-testid": `${dataTestId}-comp`, ...rest, children: [jsxRuntime.jsx(Tooltip, { className: "w-full", disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx("div", { className: cvaKPI({ variant }), children: loading ? (jsxRuntime.jsx(LoadingContent$1, {})) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text, { className: cvaKPITitleText(), dataTestId: `${dataTestId}-title`, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsxRuntime.jsx(Text, { className: cvaKPIvalueText({ variant }), dataTestId: `${dataTestId}-value`, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxRuntime.jsxs("div", { className: cvaKPIValueContainer({
-                                        isDefaultAndHasTrendValue: Boolean(trend?.value && !isSmallVariant),
-                                        className,
-                                    }), children: [jsxRuntime.jsxs("span", { className: cvaKPIvalueText({ variant }), children: [value, " ", unit] }), jsxRuntime.jsx(TrendIndicator, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }), !loading && jsxRuntime.jsx(reactSlot.Slottable, { children: rest.children })] }));
+    return (jsxRuntime.jsx(Tooltip, { disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsxRuntime.jsx(LoadingContent$1, {})) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text, { className: cvaKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsxRuntime.jsx(Text, { className: cvaKPIvalueText({ variant }), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxRuntime.jsxs("div", { className: cvaKPIValueContainer({
+                                isDefaultAndHasTrendValue: Boolean(trend?.value && !isSmallVariant),
+                                className,
+                            }), children: [jsxRuntime.jsxs("span", { className: cvaKPIvalueText({ variant }), children: [value, " ", unit] }), jsxRuntime.jsx(TrendIndicator, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }));
 };
 const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
     if (!trend) {
@@ -2756,7 +2758,7 @@ const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
     return (jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-1", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value ? (jsxRuntime.jsxs(Text, { dataTestId: "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, trend.variant?.icon ? jsxRuntime.jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxRuntime.jsxs(Text, { className: cvaKPITrendPercentage({ color: trend.variant?.color }), size: "small", weight: "bold", children: [trend.percentage, "%"] })) : null] }));
 };
 
-const cvaKPICard = cssClassVarianceUtilities.cvaMerge(["inline-flex", "gap-1", "p-0"], {
+const cvaKPICard = cssClassVarianceUtilities.cvaMerge(["inline-flex", "gap-1"], {
     variants: {
         isClickable: {
             true: ["hover:bg-slate-50", "component-card-border"],
@@ -2785,13 +2787,14 @@ const cvaKPICard = cssClassVarianceUtilities.cvaMerge(["inline-flex", "gap-1", "
  * @param {KPICardProps} props - The props for the KPICard component
  * @returns {ReactElement} KPICard component
  */
-const KPICard = ({ isActive, onClick, className, ...rest }) => {
+const KPICard = ({ isActive, onClick, className, dataTestId, children, ...rest }) => {
+    const isClickable = Boolean(onClick && !rest.loading);
     return (jsxRuntime.jsx(Card, { className: cvaKPICard({
-            isClickable: Boolean((onClick || rest.asChild) && !rest.loading),
+            isClickable,
             isActive,
             variant: rest.variant,
             className,
-        }), dataTestId: `${rest.dataTestId}-card`, onClick: Boolean(onClick || rest.asChild) ? () => onClick?.() : undefined, children: jsxRuntime.jsx(KPI, { ...rest, className: "overflow-hidden rounded-lg" }) }));
+        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxRuntime.jsxs(CardBody, { density: "compact", children: [jsxRuntime.jsx(KPI, { ...rest, className: "p-0", dataTestId: dataTestId ? `${dataTestId}-kpi` : undefined }), children] }) }));
 };
 
 const cvaMenuList = cssClassVarianceUtilities.cvaMerge([

package/index.esm.js

@@ -2561,16 +2561,20 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
 
 const cvaIndicator = cvaMerge(["flex", "items-center"]);
 const cvaIndicatorIcon = cvaMerge(["mr-2"]);
-const cvaIndicatorLabel = cvaMerge(["font-medium", "capitalize", "text-secondary-600"], {
+const cvaIndicatorLabel = cvaMerge(["capitalize", "text-secondary-600"], {
     variants: {
         size: {
             small: "pl-1 pr-1 text-xs",
             medium: "pl-2 pr-2 text-sm",
-            large: "pl-2 pr-2 text-base",
+        },
+        weight: {
+            normal: "font-normal",
+            medium: "font-medium",
         },
     },
     defaultVariants: {
         size: "medium",
+        weight: "medium",
     },
 });
 const cvaIndicatorPing = cvaMerge(["animate-ping-sm", "absolute", "inline-flex", "h-full", "w-full", "rounded-full", "opacity-75", "bg-neutral-600"], {
@@ -2678,11 +2682,10 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
  * @param {IndicatorProps} props - The props for the Indicator component
  * @returns {ReactElement} Indicator component
  */
-const Indicator = ({ dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, size, className, ...rest }) => {
-    return (jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ...rest, children: [jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label !== undefined && withLabel ? (jsx("div", { className: cvaIndicatorLabel({ size }), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label })) : null] }) }));
+const Indicator = ({ dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, size, weight, className, ...rest }) => {
+    return (jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", { "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId, ...rest, children: [jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label !== undefined && withLabel ? (jsx("div", { className: cvaIndicatorLabel({ size, weight }), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label })) : null] }) }));
 };
 
-const cvaKPIContainer = cvaMerge(["inline-flex"]);
 const cvaKPI = cvaMerge(["w-full", "px-4", "py-2", "flex", "flex-col", "gap-1"], {
     variants: {
         variant: {
@@ -2739,13 +2742,12 @@ const LoadingContent$1 = () => (jsx("div", { className: "flex h-11 flex-row item
  * @param {KPIProps} props - The props for the KPI component
  * @returns {ReactElement} KPI component
  */
-const KPI = ({ asChild = false, title, value, loading, unit, className, dataTestId, tooltipLabel, variant = "default", trend, ...rest }) => {
-    const Comp = asChild ? Slot : "div";
+const KPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, variant = "default", trend, ...rest }) => {
     const isSmallVariant = variant === "small";
-    return (jsxs(Comp, { className: cvaKPIContainer({ className }), "data-testid": `${dataTestId}-comp`, ...rest, children: [jsx(Tooltip, { className: "w-full", disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsx("div", { className: cvaKPI({ variant }), children: loading ? (jsx(LoadingContent$1, {})) : (jsxs(Fragment, { children: [jsx(Text, { className: cvaKPITitleText(), dataTestId: `${dataTestId}-title`, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsx(Text, { className: cvaKPIvalueText({ variant }), dataTestId: `${dataTestId}-value`, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxs("div", { className: cvaKPIValueContainer({
-                                        isDefaultAndHasTrendValue: Boolean(trend?.value && !isSmallVariant),
-                                        className,
-                                    }), children: [jsxs("span", { className: cvaKPIvalueText({ variant }), children: [value, " ", unit] }), jsx(TrendIndicator, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }), !loading && jsx(Slottable, { children: rest.children })] }));
+    return (jsx(Tooltip, { disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsx("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsx(LoadingContent$1, {})) : (jsxs(Fragment, { children: [jsx(Text, { className: cvaKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsx(Text, { className: cvaKPIvalueText({ variant }), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: jsxs("div", { className: cvaKPIValueContainer({
+                                isDefaultAndHasTrendValue: Boolean(trend?.value && !isSmallVariant),
+                                className,
+                            }), children: [jsxs("span", { className: cvaKPIvalueText({ variant }), children: [value, " ", unit] }), jsx(TrendIndicator, { isSmallVariant: isSmallVariant, trend: trend, unit: unit })] }) })] })) }) }));
 };
 const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
     if (!trend) {
@@ -2754,7 +2756,7 @@ const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
     return (jsxs("div", { className: "flex flex-row items-center gap-1", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value ? (jsxs(Text, { dataTestId: "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, trend.variant?.icon ? jsx(Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxs(Text, { className: cvaKPITrendPercentage({ color: trend.variant?.color }), size: "small", weight: "bold", children: [trend.percentage, "%"] })) : null] }));
 };
 
-const cvaKPICard = cvaMerge(["inline-flex", "gap-1", "p-0"], {
+const cvaKPICard = cvaMerge(["inline-flex", "gap-1"], {
     variants: {
         isClickable: {
             true: ["hover:bg-slate-50", "component-card-border"],
@@ -2783,13 +2785,14 @@ const cvaKPICard = cvaMerge(["inline-flex", "gap-1", "p-0"], {
  * @param {KPICardProps} props - The props for the KPICard component
  * @returns {ReactElement} KPICard component
  */
-const KPICard = ({ isActive, onClick, className, ...rest }) => {
+const KPICard = ({ isActive, onClick, className, dataTestId, children, ...rest }) => {
+    const isClickable = Boolean(onClick && !rest.loading);
     return (jsx(Card, { className: cvaKPICard({
-            isClickable: Boolean((onClick || rest.asChild) && !rest.loading),
+            isClickable,
             isActive,
             variant: rest.variant,
             className,
-        }), dataTestId: `${rest.dataTestId}-card`, onClick: Boolean(onClick || rest.asChild) ? () => onClick?.() : undefined, children: jsx(KPI, { ...rest, className: "overflow-hidden rounded-lg" }) }));
+        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxs(CardBody, { density: "compact", children: [jsx(KPI, { ...rest, className: "p-0", dataTestId: dataTestId ? `${dataTestId}-kpi` : undefined }), children] }) }));
 };
 
 const cvaMenuList = cvaMerge([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.4.51",
+  "version": "1.4.54",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -18,11 +18,11 @@
     "@tanstack/react-router": "1.47.1",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.3.43",
-    "@trackunit/css-class-variance-utilities": "1.3.43",
-    "@trackunit/shared-utils": "1.5.43",
-    "@trackunit/ui-icons": "1.3.43",
-    "@trackunit/react-table-pagination": "1.3.44"
+    "@trackunit/ui-design-tokens": "1.3.44",
+    "@trackunit/css-class-variance-utilities": "1.3.44",
+    "@trackunit/shared-utils": "1.5.44",
+    "@trackunit/ui-icons": "1.3.44",
+    "@trackunit/react-table-pagination": "1.3.45"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/components/Indicator/Indicator.d.ts

@@ -13,7 +13,11 @@ export interface IndicatorProps extends CommonProps {
     /**
      * The size of the label's text
      */
-    size?: "small" | "medium" | "large";
+    size?: "small" | "medium";
+    /**
+     * The weight of the label's text
+     */
+    weight?: "normal" | "medium";
     /**
      * A text label to be displayed next to the indicator
      */
@@ -43,4 +47,4 @@ export interface IndicatorProps extends CommonProps {
  * @param {IndicatorProps} props - The props for the Indicator component
  * @returns {ReactElement} Indicator component
  */
-export declare const Indicator: ({ dataTestId, icon, label, color, withBackground, withLabel, ping, size, className, ...rest }: IndicatorProps) => ReactElement;
+export declare const Indicator: ({ dataTestId, icon, label, color, withBackground, withLabel, ping, size, weight, className, ...rest }: IndicatorProps) => ReactElement;

package/src/components/Indicator/Indicator.variants.d.ts

@@ -1,7 +1,8 @@
 export declare const cvaIndicator: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaIndicatorIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaIndicatorLabel: (props?: ({
-    size?: "small" | "medium" | "large" | null | undefined;
+    size?: "small" | "medium" | null | undefined;
+    weight?: "medium" | "normal" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaIndicatorPing: (props?: ({
     color?: "primary" | "secondary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "moving" | "active" | "unknown" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "available" | "on_rent" | "pickup_ready" | "transfer" | "in_repair" | "returned" | "other_rental_status" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "white" | "black" | null | undefined;

package/src/components/KPI/KPI.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from "react";
+import { ReactElement } from "react";
 import { CommonProps } from "../../common";
 export interface KPIProps extends CommonProps {
     /**
@@ -17,20 +17,6 @@ export interface KPIProps extends CommonProps {
      * Whether or not to show the loading state
      */
     loading?: boolean;
-    /**
-     * Use asChild to render the KPI as another component
-     */
-    asChild?: boolean;
-    /**
-     * Only add when asChild is true.
-     * The child element is used to wrap the KPI component to set it to another HTML element.
-     *
-     * @example
-     * <KPI {...props}>
-     *   <Link to="/" />
-     * </KPI>
-     */
-    children?: ReactNode;
     /**
      * Label for the tooltip
      */
@@ -72,4 +58,4 @@ export interface KPIProps extends CommonProps {
  * @param {KPIProps} props - The props for the KPI component
  * @returns {ReactElement} KPI component
  */
-export declare const KPI: ({ asChild, title, value, loading, unit, className, dataTestId, tooltipLabel, variant, trend, ...rest }: KPIProps) => ReactElement;
+export declare const KPI: ({ title, value, loading, unit, className, dataTestId, tooltipLabel, variant, trend, ...rest }: KPIProps) => ReactElement;

package/src/components/KPI/KPI.variants.d.ts

@@ -1,4 +1,3 @@
-export declare const cvaKPIContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaKPI: (props?: ({
     variant?: "default" | "small" | "condensed" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/KPICard/KPICard.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import { ReactElement, ReactNode } from "react";
 import { KPIProps } from "../KPI/KPI";
 export interface KPICardProps extends KPIProps {
     /**
@@ -9,6 +9,10 @@ export interface KPICardProps extends KPIProps {
      * On kpi card click handler
      */
     onClick?: () => void;
+    /**
+     * Children to be rendered
+     */
+    children?: ReactNode;
 }
 /**
  * The KPICard component is used to display KPIs.
@@ -16,4 +20,4 @@ export interface KPICardProps extends KPIProps {
  * @param {KPICardProps} props - The props for the KPICard component
  * @returns {ReactElement} KPICard component
  */
-export declare const KPICard: ({ isActive, onClick, className, ...rest }: KPICardProps) => ReactElement;
+export declare const KPICard: ({ isActive, onClick, className, dataTestId, children, ...rest }: KPICardProps) => ReactElement;