@trackunit/react-components 3.1.6 → 3.2.0

package/index.esm.js

@@ -2809,6 +2809,912 @@ const getIconName = (color) => {
     }
 };
 
+const cvaCard = cva({
+    base: [
+        "flex",
+        "border",
+        "flex-col",
+        "relative",
+        "bg-white",
+        "component-card-shadow",
+        "component-card-border",
+        "transition-colors",
+        "ease-in-out",
+        "overflow-clip", //otherwise rounded corners are not respected (clip is preferable to hidden since it doesn't create a scroll clipping box. )
+    ],
+    variants: {
+        clickable: {
+            false: "",
+            true: "cursor-pointer hover:bg-neutral-50",
+        },
+        fullHeight: {
+            false: "",
+            true: "h-full",
+        },
+    },
+    defaultVariants: {
+        clickable: false,
+        fullHeight: false,
+    },
+});
+const cvaCardFooterContainerRoot = cva({
+    base: ["flex", "border-t", "border-neutral-200", "justify-end", "flex-row"],
+    variants: {
+        border: {
+            default: "",
+            borderless: "border-t-0",
+        },
+        padding: {
+            none: "p-0",
+            default: "p-4",
+        },
+    },
+    defaultVariants: {
+        border: "default",
+        padding: "default",
+    },
+});
+const cvaCardFooterContainer = cva({
+    base: ["justify-self-end", "grid", "auto-cols-max", "grid-flow-col", "gap-2"],
+});
+const cvaCardHeader = cva({ base: ["flex", "justify-between", "flex-1"] });
+const cvaCardHeaderHeadingContainer = cva({ base: ["flex", "gap-4", "items-center"] });
+const cvaCardHeaderContainer = cva({
+    base: ["flex", "border-b", "border-neutral-200"],
+    variants: {
+        border: {
+            default: "",
+            borderless: "border-b-0",
+        },
+        padding: {
+            none: "p-0",
+            default: "p-4",
+        },
+    },
+    defaultVariants: {
+        border: "default",
+        padding: "default",
+    },
+});
+const cvaCardBodyContainer = cva({
+    base: ["flex", "flex-grow", "overflow-auto"],
+    variants: {
+        direction: {
+            row: "flex-row",
+            "row-reverse": "flex-row-reverse",
+            column: "flex-col",
+            "column-reverse": "flex-col-reverse",
+        },
+        padding: {
+            none: "p-0",
+            default: "p-4",
+        },
+        gap: {
+            none: "gap-0",
+            default: "gap-4",
+        },
+    },
+    defaultVariants: {
+        direction: "column",
+        padding: "default",
+        gap: "default",
+    },
+});
+
+const ROLE_CARD = "region";
+/**
+ * The Card component is a container for UI elements that groups related content together with a visual boundary.
+ * To get the most out of the Card, use it in combination with the CardHeader, CardBody and CardFooter.
+ *
+ * ### When to use
+ * Use cards to group related information and actions, such as in dashboards, list items, or content previews.
+ *
+ * ### When not to use
+ * Do not use cards for layout purposes only. Use standard containers or grid layouts instead.
+ *
+ * @example Basic card
+ * ```tsx
+ * import { Card, CardHeader, CardBody } from "@trackunit/react-components";
+ *
+ * const MyComponent = () => {
+ *   return (
+ *     <Card>
+ *       <CardHeader title="Asset Details" />
+ *       <CardBody>
+ *         <p>This card contains information about the asset.</p>
+ *       </CardBody>
+ *     </Card>
+ *   );
+ * };
+ * ```
+ * @example Clickable card with full content
+ * ```tsx
+ * import { Card, CardHeader, CardBody, CardFooter, Button } from "@trackunit/react-components";
+ *
+ * const AssetCard = () => {
+ *   return (
+ *     <Card onClick={() => console.log("Card clicked")}>
+ *       <CardHeader title="Excavator #1234" subtitle="Last updated: 2 hours ago" />
+ *       <CardBody>
+ *         <p>Operating hours: 1,234</p>
+ *         <p>Status: Active</p>
+ *       </CardBody>
+ *       <CardFooter>
+ *         <Button variant="secondary" size="small">View Details</Button>
+ *       </CardFooter>
+ *     </Card>
+ *   );
+ * };
+ * ```
+ * @param {CardProps} props - The props for the Card component
+ * @returns {ReactElement} Card component
+ */
+const Card = ({ children, onClick, fullHeight = false, onMouseEnter, onMouseLeave, className, "data-testid": dataTestId, ref, ...rest }) => {
+    return (jsx("div", { className: cvaCard({ fullHeight, clickable: Boolean(onClick), className }), "data-card": true, "data-testid": dataTestId, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: ref, role: ROLE_CARD, ...rest, children: children }));
+};
+Card.displayName = "Card";
+
+const cvaDetailsList = cva({
+    base: ["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-neutral-600", "font-medium", "pt-0"],
+    variants: {
+        hasLink: {
+            true: "pl-1",
+        },
+    },
+    defaultVariants: {
+        hasLink: false,
+    },
+});
+const cvaDetailsListItem = cva({ base: ["last:truncate"] });
+
+/**
+ * DetailsList renders a one-line list of text values separated by slash icons.
+ * It is used to display compact metadata such as model, serial number, or location in a single row.
+ *
+ * ### When to use
+ * Use DetailsList to display a compact, horizontal list of metadata values (e.g., in a card subtitle or list item description).
+ *
+ * ### When not to use
+ * Do not use DetailsList for key-value pairs — use a standard layout with labels. Do not use for long text — values should be short strings.
+ *
+ * @example Displaying asset metadata
+ * ```tsx
+ * import { DetailsList } from "@trackunit/react-components";
+ *
+ * const AssetMeta = () => (
+ *   <DetailsList details={["Excavator", "CAT 320", "SN-00142"]} />
+ * );
+ * ```
+ * @example DetailsList inside a linked context
+ * ```tsx
+ * import { DetailsList } from "@trackunit/react-components";
+ *
+ * const LinkedAssetMeta = () => (
+ *   <a href="/assets/123">
+ *     <DetailsList details={["Site: Oslo", "Group: Heavy"]} hasLink />
+ *   </a>
+ * );
+ * ```
+ * @param {DetailsListProps} props - The props for the DetailsList component
+ * @returns {ReactElement} DetailsList component
+ */
+const DetailsList = ({ details, className, "data-testid": dataTestId, hasLink = false, style, ref, }) => {
+    return (jsx("div", { className: cvaDetailsList({ className, hasLink }), "data-testid": dataTestId, ref: ref, style: style, children: details.map((value, index, array) => (jsxs(Fragment$1, { children: [jsx("span", { className: cvaDetailsListItem({ className }), children: value }), index < array.length - 1 && (jsx("div", { className: "mx-0.5 flex items-center", children: jsx(Icon, { className: "w-4 text-neutral-300", color: "neutral", name: "Slash", size: "small" }) }))] }, index))) }));
+};
+
+/**
+ * Applies standardized interaction-related styles to an element.
+ *
+ * Prefer using the "auto" settings — only resort to manual control if necessary!
+ * - selected: "auto" will apply styling when it contains a `checked` input aka. `:has(:checked)`.
+ * - focused: "auto" will apply styling when the element or it's children has focus aka. `:focus-within`.
+ *
+ * To be used for elements that do not have typical interactive roles and behaviors,
+ * such as divs, table rows, cards etc.
+ *
+ * To not be used for buttons, links, or other elements that have their own intrinsic interactive roles.
+ *
+ * @returns tailwind class names on the basis on the provided props.
+ */
+const cvaInteractableItem = cva({
+    base: ["transition-colors", "duration-100", "ease-in-out"],
+    variants: {
+        cursor: {
+            pointer: "cursor-pointer",
+            auto: "cursor-auto",
+            help: "cursor-help",
+            "zoom-in": "cursor-zoom-in",
+            "zoom-out": "cursor-zoom-out",
+            default: "cursor-default",
+            "not-allowed": "cursor-not-allowed",
+        },
+        selection: {
+            selected: ["bg-primary-50", "hover:bg-primary-100", "focus-within:bg-primary-50"],
+            unselected: "",
+            auto: [
+                "hover:bg-neutral-100",
+                "has-[:checked]:bg-primary-50",
+                "hover:has-[:checked]:bg-primary-50",
+                "focus-within:has-[:checked]:bg-primary-50",
+            ],
+        },
+        disabled: {
+            // Remember to also disable the element or set tabIndex=-1 to prevent actual interaction/focus!
+            true: ["pointer-events-none", "!bg-neutral-100", "!cursor-not-allowed"],
+            false: "", // use compoundVariants instead
+        },
+        focus: {
+            focused: ["bg-neutral-600/5"],
+            unfocused: "",
+            auto: "[&:has(:focus-visible)]:outline-native",
+        },
+    },
+    compoundVariants: [
+        {
+            disabled: false,
+            selection: "unselected",
+            className: ["hover:bg-neutral-600/5", "focus-within:bg-neutral-600/5"],
+        },
+    ],
+    defaultVariants: {
+        cursor: "auto",
+        selection: "auto",
+        disabled: false,
+        focus: "auto",
+    },
+});
+
+// The card layout intentionally mirrors the compact identity strip
+// vocabulary (image + title + subtitle + status + connectivity + chevron)
+// used across the app. Class definitions are colocated with the component
+// so it can evolve independently — if a similar layout emerges elsewhere,
+// promote the shared parts deliberately rather than re-plumbing here.
+// Horizontal row: main cluster (image/thumbnail + text) + optional chevron.
+// `gap-2` (8px) is the space between connectivity (the right edge of the
+// text stack) and the chevron. Image-to-metadata spacing lives on
+// `cvaCardMain` so tightening this gap does not pull the thumbnail closer
+// to the text. `px-4` insets the chevron 16px from the card's right edge
+// (see `cvaCardChevron`).
+const cvaCardContentRow = cva({
+    base: ["flex", "gap-2", "px-4", "py-3", "w-full", "min-w-0", "overflow-hidden"],
+});
+// Image/thumbnail + text stack. `gap-3` (12px) is the media-to-metadata
+// gutter — independent of the chevron gap on the parent row. When the text
+// stack renders a single row (title only — no subtitle or status), swap
+// `items-end` → `items-center` so the title sits centered against the
+// taller-than-text image slot rather than clinging to its bottom edge.
+// Multi-row cards keep `items-end` so the image and text share a bottom
+// edge — same alignment as the full `AssetPageHeader`.
+const cvaCardMain = cva({
+    base: ["flex", "gap-3", "min-w-0", "flex-1", "overflow-hidden"],
+    variants: {
+        singleLine: {
+            true: "items-center",
+            false: "items-end",
+        },
+    },
+    defaultVariants: {
+        singleLine: false,
+    },
+});
+// Asset image slot: `rounded-lg` for the same corner treatment as
+// `AssetPageHeader`. Height and width are supplied inline from a JS
+// measurement of the text stack so the image always spans exactly the
+// rendered lines of text at a 14:9 aspect ratio (168/108 — the `lg`
+// header image). `aspect-[14/9]` is a fallback for the first render
+// before the measurement resolves.
+const cvaCardImage = cva({
+    base: [
+        "shrink-0",
+        "flex",
+        "items-center",
+        "justify-center",
+        "overflow-hidden",
+        "rounded-lg",
+        "bg-neutral-100",
+        "aspect-[14/9]",
+    ],
+});
+// Icon-thumbnail slot: the square, colored badge alternative to the 14:9
+// asset image. Sized at `h-11 w-11` (44px) — matches the loaded card's
+// minimum image height (see `IDENTITY_MIN_IMAGE_HEIGHT_PX` in
+// `useIdentityImageSize.ts`) so the badge and the image slot occupy the
+// same footprint on title-only / title + subtitle cards. Deliberately
+// larger than `ListItem`'s 32-square thumbnail: the identity card is a
+// more prominent surface and needs a beefier badge to read as balanced
+// next to the text. `rounded-md` keeps the same corner treatment as
+// `ListItem` so the "colored badge for site / customer / user" vocabulary
+// still reads as one thing across the two components. `self-center`
+// overrides `cvaCardMain`'s `items-end` for multi-row cards so the
+// badge stays vertically balanced against the text stack regardless of
+// its height (mirrors the chevron slot's alignment strategy).
+const cvaCardThumbnail = cva({
+    base: [
+        "shrink-0",
+        "self-center",
+        "flex",
+        "h-11",
+        "w-11",
+        "items-center",
+        "justify-center",
+        "overflow-hidden",
+        "rounded-md",
+    ],
+});
+// Outer column: separates the "identity" group (title + connectivity +
+// subtitle) from the status-indicator row with a `gap-2` so the indicators
+// sit visually distinct from the naming block — same gap as the full
+// `AssetPageHeader` title-block → status row.
+const cvaCardTextStack = cva({
+    base: ["flex", "min-w-0", "flex-1", "flex-col", "gap-2", "overflow-hidden"],
+});
+// Identity group: keeps the title row and subtitle tight (`gap-1`) so they
+// read as one naming block; the parent `cvaCardTextStack` adds the larger
+// `gap-2` between this group and the status-indicator row below.
+// Title-only cards (`singleLine`) still reserve the two-row height
+// (`min-h-11` = 44px, matching `IDENTITY_MIN_IMAGE_HEIGHT_PX`) so the
+// card does not collapse when subtitle / status are omitted.
+// `justify-center` keeps the title (and optional connectivity) vertically
+// centered in that reserved space — same optical alignment as before the
+// min-height was added.
+const cvaCardIdentityGroup = cva({
+    base: ["flex", "min-w-0", "flex-col", "gap-1", "overflow-hidden"],
+    variants: {
+        singleLine: {
+            true: ["min-h-11", "justify-center"],
+            false: "",
+        },
+    },
+    defaultVariants: {
+        singleLine: false,
+    },
+});
+// Top row inside the identity group: title on the left, connectivity slot
+// on the right. Isolating connectivity to this row means the subtitle and
+// status rows below get the full text-stack width.
+const cvaCardTitleRow = cva({
+    base: ["flex", "items-center", "gap-3", "min-w-0"],
+});
+// Left cluster inside the title row: wraps the title so it consumes the
+// available flex-1 space, leaving the right-side connectivity slot pinned to
+// the right edge. `min-w-0` lets the truncating title inside shrink.
+const cvaCardTitleCluster = cva({
+    base: ["flex", "min-w-0", "flex-1", "items-center", "gap-2"],
+});
+// Title typography. `leading-6` locks the line-height so it matches the
+// natural text-stack height that drives the image measurement (see
+// `useIdentityImageSize`).
+const cvaCardTitle = cva({
+    base: ["min-w-0", "flex-1", "truncate", "text-base", "font-semibold", "leading-6", "text-neutral-900"],
+});
+const cvaCardStatusRow = cva({
+    base: [
+        "flex",
+        "flex-nowrap",
+        "items-center",
+        "gap-2",
+        "overflow-hidden",
+        // Guard against wrapping *inside* an indicator: multi-word labels
+        // (notably `RentalIndicator`'s "In Repair") would otherwise wrap,
+        // inflate the measured text-stack height, and kick off a feedback loop
+        // where the image steals more width. Same treatment as `AssetPageHeader`.
+        "whitespace-nowrap",
+    ],
+});
+// Skeleton row for `statusIndicators` — two empty chip placeholders sized to
+// match the loaded criticality + activity indicators.
+const cvaCardStatusSkeletonRow = cva({
+    base: ["flex", "flex-nowrap", "items-center", "gap-2", "whitespace-nowrap"],
+});
+const cvaCardConnectivity = cva({
+    base: [
+        "shrink-0",
+        "flex",
+        "items-center",
+        // `gap-1` keeps the GSM + GPS last-seen chips as a tight pair. Each
+        // chip should be a single child (icon + label wrapped together) so the
+        // gap sits between chips, not between an icon and its label.
+        "gap-2",
+        // Match the header's muted last-seen treatment so a plain "MapPin +
+        // relative time" chip sits at the same weight/size/color. Consumers
+        // that pass richer elements (e.g. Highlight with its own colored
+        // label) still win via more specific styles on the child.
+        "text-sm",
+        "font-medium",
+        "leading-5",
+        "text-neutral-500",
+    ],
+});
+// Right-side chevron slot (shown only when the card is clickable).
+// `self-center` keeps the chevron vertically centered against the main
+// cluster regardless of the stack's height. No extra padding of its own:
+// the parent row's `gap-2` provides the 8px gap from connectivity / the
+// text stack, and the row's `px-4` places the chevron 16px inset from the
+// card's right edge — matching the image inset on the left.
+const cvaCardChevron = cva({
+    base: ["shrink-0", "self-center", "flex", "items-center", "text-neutral-500"],
+});
+
+// Minimum asset-image height (in px). Matches the natural text-stack height
+// of a title + subtitle row (h3 `leading-6` + `gap-1` + `text-xs`
+// line-height) so a title-only identity never collapses the image to the
+// title's line height.
+const IDENTITY_MIN_IMAGE_HEIGHT_PX = 44;
+// Matches `AssetPageHeader`'s `lg` image (168×108).
+const IDENTITY_IMAGE_ASPECT_RATIO = 168 / 108;
+/**
+ * Measures the rendered text-stack height and returns matching image
+ * dimensions at a 14:9 (168/108) aspect ratio, clamped to the identity
+ * minimum so title-only identities keep a reasonable image footprint. Kept
+ * as a shared hook so the loaded `IdentityCard` and its `IdentityCardSkeleton`
+ * cannot drift out of sync — the skeleton → loaded transition would jump
+ * if the two measurements diverged.
+ *
+ * Measured in `useLayoutEffect` so the image slot is sized before the
+ * browser paints. `useMeasure` is the usual choice here, but it observes
+ * in `useEffect` (after paint), which would flash the unsized
+ * `aspect-[14/9]` fallback for a frame.
+ *
+ * Attach `textStackRef` to the text-stack container; subsequent layout
+ * changes (title text, subtitle wrap, status row toggling on/off)
+ * re-measure automatically.
+ *
+ * @param enabled - When false, the hook is inert (no measurement). Use this
+ *   to gate on `showImage` / `hasImage`.
+ */
+const useIdentityImageSize = (enabled) => {
+    const [element, setElement] = useState(null);
+    const [imageSize, setImageSize] = useState(null);
+    const textStackRef = useCallback(node => {
+        setElement(node);
+    }, []);
+    useLayoutEffect(() => {
+        if (!enabled || element === null) {
+            return;
+        }
+        const measure = (height) => {
+            if (height > 0) {
+                const clamped = Math.max(height, IDENTITY_MIN_IMAGE_HEIGHT_PX);
+                setImageSize({ height: clamped, width: Math.round(clamped * IDENTITY_IMAGE_ASPECT_RATIO) });
+            }
+        };
+        measure(element.offsetHeight);
+        const observer = new ResizeObserver(entries => {
+            const entry = entries[0];
+            if (entry) {
+                measure(entry.contentRect.height);
+            }
+        });
+        observer.observe(element);
+        return () => {
+            observer.disconnect();
+        };
+    }, [enabled, element]);
+    return useMemo(() => ({ imageSize, textStackRef }), [imageSize, textStackRef]);
+};
+
+/**
+ * IdentityCard is the entity-agnostic, `Card`-wrapped identity component.
+ * It renders a slot-based identity strip (14:9 image, title + subtitle,
+ * status indicators, connectivity) inside a bordered surface —
+ * the compact list-row / drawer-row shape used to *reference* a related
+ * entity (an asset, site, customer, user, …) from inside a surface whose
+ * real focus is something else (an alert, service ticket, inspection, …).
+ *
+ * When `onClick` is supplied, the whole card becomes clickable and a
+ * `ChevronRight` icon is rendered on the right edge to signal navigation.
+ * Clickable cards are meant to route the user to the referenced entity's
+ * own surface — pair the handler with the app's navigation hook
+ * (`useNavigateInHost` from `@trackunit/react-core-hooks`) rather than
+ * treating it as an in-place action. Clickable cards are keyboard-operable
+ * out of the box: they receive `role="button"`, join the tab order, and
+ * activate on Enter / Space with a visible focus ring.
+ *
+ * The card stays presentational: it owns layout only; domain hydration
+ * (indicator wiring, translations, last-seen formatting,
+ * click targets) lives at the call-site. The API stays lean so the
+ * inline-reference shape doesn't compete with the surrounding surface's
+ * real focus.
+ *
+ * For the loading placeholder, use the paired `IdentityCardSkeleton`
+ * component — it renders the same layout with per-slot skeleton blocks.
+ *
+ * ### When to use
+ * Use `IdentityCard` when the surface you're building is really **about
+ * something else** (an alert, a service ticket, an inspection, a scheduled
+ * job) and needs to *mention* a related entity in its content, usually
+ * with a click-through to that entity's own page.
+ *
+ * ### When not to use
+ * Do not use `IdentityCard` as the header of a surface whose subject
+ * **is** the entity (an asset's side panel, an asset overview card, a
+ * page-level asset header). The card is a reference that lives *inside*
+ * someone else's content.
+ *
+ * @example Clickable asset reference inside a service ticket panel
+ * ```tsx
+ * import { IdentityCard, Highlight } from "@trackunit/react-components";
+ * import { useNavigateInHost } from "@trackunit/react-core-hooks";
+ *
+ * const ServicedAssetRow = ({ assetId }: { assetId: string }) => {
+ *   const { gotoAssetHome } = useNavigateInHost();
+ *   return (
+ *     <IdentityCard
+ *       title="Trackunit-AWP343"
+ *       subtitle={["Trackunit", "Scissorlift", "GS4390"]}
+ *       image={<OEMModelImage brandName="Trackunit" model="GS4390" />}
+ *       statusIndicators={statusChips}
+ *       connectivity={
+ *         <>
+ *           <Highlight color="clear" iconName="ChartBar" size="small">
+ *             2h
+ *           </Highlight>
+ *           <Highlight color="danger" iconName="MapPin" size="small">
+ *             2y
+ *           </Highlight>
+ *         </>
+ *       }
+ *       onClick={() => gotoAssetHome(assetId)}
+ *     />
+ *   );
+ * };
+ * ```
+ * @example Non-clickable (chevron omitted)
+ * ```tsx
+ * <IdentityCard
+ *   image={<OEMModelImage brandName="Trackunit" model="GS4390" />}
+ *   title="Trackunit-AWP343"
+ *   subtitle={["Trackunit", "Scissorlift", "GS4390"]}
+ * />
+ * ```
+ * @example Non-asset entity (site) with an icon thumbnail
+ * ```tsx
+ * import { IdentityCard, Icon } from "@trackunit/react-components";
+ *
+ * <IdentityCard
+ *   title="Riverside Job Site"
+ *   subtitle={["Riverside Street 12, Copenhagen, Denmark"]}
+ *   thumbnail={<Icon name="ConstructionCone" />}
+ *   thumbnailColor="site_construction_site-500"
+ *   thumbnailBackground="site_construction_site-100"
+ *   onClick={() => gotoSiteHome(siteId)}
+ * />
+ * ```
+ * @param {IdentityCardProps} props - The props for the IdentityCard component
+ * @returns {ReactElement} IdentityCard component
+ */
+const IdentityCard = ({ title, subtitle, image, thumbnail, thumbnailColor = "info-600", thumbnailBackground = "info-100", statusIndicators, connectivity, onClick, className, "data-testid": dataTestId, style, ref, }) => {
+    const hasSubtitleRow = subtitle !== undefined && subtitle.length > 0;
+    const showImage = image !== null && image !== undefined;
+    // `image` and `thumbnail` are mutually exclusive slots — the 14:9 asset
+    // photo and the 44-square icon badge share the same left-side position
+    // and would fight for layout otherwise. When both are supplied, prefer
+    // `image` (documented on the props) so a call-site adding a photo
+    // doesn't silently regress to a badge.
+    const showThumbnail = !showImage && thumbnail !== undefined;
+    const hasConnectivitySlot = connectivity !== null && connectivity !== undefined;
+    const hasStatusSlot = statusIndicators !== null && statusIndicators !== undefined;
+    const isClickable = onClick !== undefined;
+    // Single-line layout kicks in when the text stack renders the title row
+    // only — no subtitle or status row. The `connectivity` slot lives on the
+    // title row itself, so it doesn't add a line and doesn't disqualify the
+    // single-line state.
+    const isSingleLine = !hasSubtitleRow && !hasStatusSlot;
+    // Match the image height to the rendered text stack so the asset image
+    // always spans exactly the lines of text at a 14:9 (168/108) aspect
+    // ratio. The measurement lives in a shared hook so `IdentityCardSkeleton`
+    // stays in sync — the skeleton → loaded transition jumps otherwise.
+    const { imageSize, textStackRef } = useIdentityImageSize(showImage);
+    const imageSlotStyle = showImage && imageSize !== null ? { height: imageSize.height, width: imageSize.width } : undefined;
+    // Keyboard activation for the clickable branch. `Card` renders a `div`
+    // with `role="region"` by default, so on its own it can't be reached with
+    // Tab and Enter/Space wouldn't fire `onClick`. When we're clickable, opt
+    // into button semantics (focusable, activatable) and dispatch a real
+    // click on Enter/Space — the native `.click()` fires our own `onClick`
+    // handler with a genuine `MouseEvent`, so we don't have to fabricate one
+    // from a keyboard event.
+    const handleKeyDown = (event) => {
+        if (event.repeat) {
+            return;
+        }
+        if (event.key !== "Enter" && event.key !== " ") {
+            return;
+        }
+        event.preventDefault();
+        event.currentTarget.click();
+    };
+    const clickableProps = isClickable
+        ? {
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: handleKeyDown,
+        }
+        : {};
+    return (jsx(Card, { className: isClickable
+            ? cvaInteractableItem({
+                cursor: "pointer",
+                className: ["focus-visible:outline-native", className],
+            })
+            : className, "data-testid": dataTestId, onClick: onClick, ref: ref, style: style, ...clickableProps, children: jsxs("div", { className: cvaCardContentRow(), children: [jsxs("div", { className: cvaCardMain({ singleLine: isSingleLine }), children: [showImage ? (jsx("div", { className: cvaCardImage(), "data-testid": dataTestId ? `${dataTestId}-image` : undefined, style: imageSlotStyle, children: image })) : null, showThumbnail ? (jsx("div", { className: cvaCardThumbnail({
+                                className: `text-${thumbnailColor} bg-${thumbnailBackground}`,
+                            }), "data-testid": dataTestId ? `${dataTestId}-thumbnail` : undefined, children: thumbnail })) : null, jsxs("div", { className: cvaCardTextStack(), ref: textStackRef, children: [jsxs("div", { className: cvaCardIdentityGroup({ singleLine: isSingleLine }), "data-testid": dataTestId ? `${dataTestId}-identity-group` : undefined, children: [jsxs("div", { className: cvaCardTitleRow(), children: [jsx("div", { className: cvaCardTitleCluster(), children: jsx("h3", { className: cvaCardTitle(), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, 
+                                                        // Inline text-wrap defeats the unlayered global
+                                                        // `h1,h2,h3,h4 { text-wrap: balance }` rule from
+                                                        // `@trackunit/css-core` — otherwise a wrapping title
+                                                        // fights the `truncate` on the same element and the
+                                                        // ellipsis never appears.
+                                                        style: { textWrap: "nowrap" }, title: title, children: title }) }), hasConnectivitySlot ? (jsx("div", { className: cvaCardConnectivity(), "data-testid": dataTestId ? `${dataTestId}-connectivity` : undefined, children: connectivity })) : null] }), subtitle !== undefined && subtitle.length > 0 ? (jsx(DetailsList, { "data-testid": dataTestId ? `${dataTestId}-subtitle` : undefined, details: subtitle })) : null] }), hasStatusSlot ? (jsx("div", { className: cvaCardStatusRow(), "data-testid": dataTestId ? `${dataTestId}-status` : undefined, children: statusIndicators })) : null] })] }), isClickable ? (jsx("div", { className: cvaCardChevron(), "data-testid": dataTestId ? `${dataTestId}-chevron` : undefined, children: jsx(Icon, { name: "ChevronRight", size: "medium" }) })) : null] }) }));
+};
+
+/**
+ * Merges inline styles where `base` defines component defaults and `override` (typically from props) wins on conflicts.
+ */
+function mergeDomStyles(base, override) {
+    if (base === undefined && override === undefined) {
+        return undefined;
+    }
+    if (base === undefined) {
+        return override;
+    }
+    if (override === undefined) {
+        return base;
+    }
+    return { ...base, ...override };
+}
+
+const cvaSkeleton = cva({
+    base: [
+        "relative",
+        "overflow-hidden",
+        "rounded-lg",
+        // Gradient background
+        "bg-linear-to-r",
+        "from-neutral-200/80",
+        "via-neutral-300/60",
+        "to-neutral-200/80",
+        // Pulse animation
+        "animate-pulse",
+        // Shimmer overlay
+        "before:absolute",
+        "before:inset-0",
+        "before:bg-linear-to-r",
+        "before:from-transparent",
+        "before:via-white/50",
+        "before:to-transparent",
+        "before:opacity-0",
+        "before:animate-pulse",
+        // Smooth transitions for accessibility
+        "transition-all",
+        "duration-300",
+        "ease-in-out",
+    ],
+    variants: {
+        textSize: {
+            "text-xs": ["my-[calc((var(--line-height-xs)-var(--font-size-xs)*0.7)/2)]"],
+            "text-sm": ["my-[calc((var(--line-height-sm)-var(--font-size-sm)*0.7)/2)]"],
+            "text-base": ["my-[calc((var(--line-height-base)-var(--font-size-base)*0.7)/2)]"],
+            "text-lg": ["my-[calc((var(--line-height-lg)-var(--font-size-lg)*0.7)/2)]"],
+            "text-xl": ["my-[calc((var(--line-height-xl)-var(--font-size-xl)*0.7)/2)]"],
+            "text-2xl": ["my-[calc((var(--line-height-2xl)-var(--font-size-2xl)*0.7)/2)]"],
+            "text-3xl": ["my-[calc((var(--line-height-3xl)-var(--font-size-3xl)*0.7)/2)]"],
+            "text-4xl": ["my-[calc((var(--line-height-4xl)-var(--font-size-4xl)*0.7)/2)]"],
+            "text-5xl": ["my-[calc((var(--line-height-5xl)-var(--font-size-5xl)*0.7)/2)]"],
+            "text-6xl": ["my-[calc((var(--line-height-6xl)-var(--font-size-6xl)*0.7)/2)]"],
+            "text-7xl": ["my-[calc((var(--line-height-7xl)-var(--font-size-7xl)*0.7)/2)]"],
+            "text-8xl": ["my-[calc((var(--line-height-8xl)-var(--font-size-8xl)*0.7)/2)]"],
+            "text-9xl": ["my-[calc((var(--line-height-9xl)-var(--font-size-9xl)*0.7)/2)]"],
+        },
+    },
+});
+
+/**
+ * SkeletonBlock renders a single animated placeholder block for shape-based elements (images, icons, buttons, avatars)
+ * before data is loaded. It uses exact height and width values to match the element it replaces.
+ *
+ * ### When to use
+ * Use SkeletonBlock for loading placeholders of shape-based UI elements: images, icons, badges, buttons, avatars, thumbnails.
+ *
+ * ### When not to use
+ * For text content, use `SkeletonLabel` which accounts for text line-height margins.
+ * For multiple text lines, use `SkeletonLines`.
+ *
+ * @example Skeleton block for an avatar and button
+ * ```tsx
+ * import { SkeletonBlock } from "@trackunit/react-components";
+ *
+ * const AvatarSkeleton = () => (
+ *   <div className="flex items-center gap-3">
+ *     <SkeletonBlock height={40} width={40} className="rounded-full" />
+ *     <SkeletonBlock height={32} width={120} className="rounded-md" />
+ *   </div>
+ * );
+ * ```
+ * @param {SkeletonBlockProps} props - The props for the SkeletonBlock component
+ * @returns {ReactElement} SkeletonBlock component
+ */
+const SkeletonBlock = memo((props) => {
+    const { width = "100%", height = 16, flexibleWidth = false, className, "data-testid": dataTestId, children, style, ref, } = props;
+    const widthValue = typeof width === "number" ? `${width}px` : width;
+    const heightValue = typeof height === "number" ? `${height}px` : height;
+    return (jsx("div", { "aria-label": "Loading", className: cvaSkeleton({ className }), "data-testid": dataTestId, ref: ref, role: "status", style: mergeDomStyles({
+            width: flexibleWidth ? "100%" : widthValue,
+            maxWidth: flexibleWidth ? widthValue : undefined,
+            height: heightValue,
+        }, style), children: children }));
+});
+SkeletonBlock.displayName = "SkeletonBlock";
+
+const VALID_SIZE_KEYS = [
+    "xs",
+    "sm",
+    "base",
+    "lg",
+    "xl",
+    "2xl",
+    "3xl",
+    "4xl",
+    "5xl",
+    "6xl",
+    "7xl",
+    "8xl",
+    "9xl",
+];
+/**
+ * Extract the size key from a text size string (e.g., "text-base" → "base").
+ *
+ * @param value - The text size string to parse
+ * @returns {fontSizeKeys | null} The extracted size key or null if invalid
+ */
+const extractSizeKey = (value) => {
+    if (!value.startsWith("text-")) {
+        return null;
+    }
+    const sizeKey = value.replace("text-", "");
+    return VALID_SIZE_KEYS.find(key => key === sizeKey) ?? null;
+};
+/**
+ * Calculate the height value based on the height prop and variant.
+ *
+ * @param height - The height value (number, CSS length, or text size key)
+ * @param variant - The skeleton variant ("text" or "block")
+ * @returns {string} The calculated CSS height value
+ */
+const getHeightValue = (height, variant) => {
+    if (typeof height === "number") {
+        return `${height}px`;
+    }
+    const sizeKey = extractSizeKey(height);
+    if (sizeKey) {
+        // Text variant: use font-size × 0.7 to approximate cap-height
+        // Block variant: use full line-height (for when text size keys are passed to block variant)
+        return `calc(var(--font-size-${sizeKey}) * 0.7)` ;
+    }
+    return height;
+};
+/**
+ * Type-safe helper to construct a CSSLength from a number and unit.
+ * Uses a generic to preserve the specific unit type in the return type.
+ */
+const makeCSSLength = (value, unit) => {
+    return `${value}${unit}`;
+};
+/**
+ * Generates a random CSS length value.
+ *
+ * Note: For React components, prefer `useRandomCSSLengths` hook to ensure stable values across re-renders.
+ *
+ * @param params - The parameters object
+ * @param params.min - Minimum numeric value
+ * @param params.max - Maximum numeric value
+ * @param params.unit - CSS unit (defaults to "%")
+ * @returns {CSSLength} A CSS length string (e.g., "65%", "120px", "4rem")
+ */
+const getRandomCSSLength = ({ min, max, unit = "%", }) => {
+    const randomValue = Math.floor(Math.random() * (max - min + 1)) + min;
+    return makeCSSLength(randomValue, unit);
+};
+/**
+ * React hook that generates stable random CSS length values for skeleton loading components.
+ *
+ * Values are memoized and only regenerate when count, min, max, or unit changes.
+ *
+ * @param params - The parameters object
+ * @param params.count - Number of random lengths to generate
+ * @param params.min - Minimum numeric value
+ * @param params.max - Maximum numeric value
+ * @param params.unit - CSS unit (defaults to "%")
+ * @returns {Array<CSSLength>} Array of CSS length strings (e.g., ["65%", "42%", "78%"])
+ */
+const useRandomCSSLengths = ({ count, min, max, unit = "%", }) => {
+    return useMemo(() => Array.from({ length: count }, () => getRandomCSSLength({ min, max, unit })), [count, min, max, unit]);
+};
+
+/**
+ * SkeletonLabel renders a single animated placeholder line for text content. It uses text-size keys (text-xs, text-sm, text-base, etc.)
+ * to match the visual cap-height of actual text, with appropriate vertical margins to maintain line-height alignment.
+ *
+ * ### When to use
+ * Use SkeletonLabel as a loading placeholder for single text lines: labels, titles, descriptions, values.
+ *
+ * ### When not to use
+ * For multiple text lines, use `SkeletonLines`.
+ * For shape-based elements (images, icons, avatars), use `SkeletonBlock`.
+ *
+ * @example Skeleton label for a title and description
+ * ```tsx
+ * import { SkeletonLabel } from "@trackunit/react-components";
+ *
+ * const TextSkeleton = () => (
+ *   <div className="flex flex-col gap-1">
+ *     <SkeletonLabel textSize="text-lg" width={200} />
+ *     <SkeletonLabel textSize="text-sm" width="80%" />
+ *   </div>
+ * );
+ * ```
+ * @param {SkeletonLabelProps} props - The props for the SkeletonLabel component
+ * @returns {ReactElement} SkeletonLabel component
+ */
+const SkeletonLabel = memo((props) => {
+    const { width = "100%", textSize = "text-base", flexibleWidth = true, className, "data-testid": dataTestId, children, style, ref, } = props;
+    const widthValue = typeof width === "number" ? `${width}px` : width;
+    const heightValue = getHeightValue(textSize);
+    return (jsx("div", { "aria-label": "Loading", className: cvaSkeleton({ textSize, className }), "data-testid": dataTestId, ref: ref, role: "status", style: mergeDomStyles({
+            width: flexibleWidth ? "100%" : widthValue,
+            maxWidth: flexibleWidth ? widthValue : undefined,
+            height: heightValue,
+        }, style), children: children }));
+});
+SkeletonLabel.displayName = "SkeletonLabel";
+
+/**
+ * IdentityCardSkeleton is the loading placeholder paired with
+ * `IdentityCard`. It renders per-slot skeleton blocks (title +
+ * optional subtitle / status indicators / image / thumbnail / connectivity)
+ * inside the same `Card` shell so the skeleton → loaded
+ * transition is visually stable. When `hasChevron` is on, the real
+ * `ChevronRight` is shown — that icon does not depend on loaded data.
+ *
+ * The slot toggles (`hasImage`, `hasThumbnail`, `hasSubtitle`,
+ * `hasStatusIndicators`, `hasConnectivity`, `hasChevron`) are the skeleton
+ * counterparts to the loaded `IdentityCard`'s slot props / `onClick` —
+ * flip on the slots you'll render once the data resolves.
+ *
+ * ### When to use
+ * Use `IdentityCardSkeleton` in place of `IdentityCard` while
+ * the referenced entity's data is being fetched.
+ *
+ * ### When not to use
+ * Do not use for generic text loading — use `SkeletonLabel` /
+ * `SkeletonBlock` directly. Do not use to represent partial data (some
+ * fields loaded, others not); render `IdentityCard` with the fields
+ * you have and omit the rest.
+ *
+ * @example Compact card (title + subtitle)
+ * ```tsx
+ * import { IdentityCardSkeleton } from "@trackunit/react-components";
+ *
+ * const Loading = () => <IdentityCardSkeleton />;
+ * ```
+ * @example Clickable card with image + status + connectivity
+ * ```tsx
+ * <IdentityCardSkeleton hasImage hasStatusIndicators hasConnectivity hasChevron />
+ * ```
+ * @param {IdentityCardSkeletonProps} props - The props for the IdentityCardSkeleton component
+ * @returns {ReactElement} IdentityCardSkeleton component
+ */
+const IdentityCardSkeleton = ({ hasImage = false, hasThumbnail = false, hasSubtitle = true, hasStatusIndicators = false, hasConnectivity = false, hasChevron = false, className, "data-testid": dataTestId, style, ref, }) => {
+    // Mirror the loaded card's slot precedence: `hasImage` wins over
+    // `hasThumbnail` so the skeleton → loaded transition doesn't jump if a
+    // call-site mis-toggles both.
+    const showThumbnail = hasThumbnail && !hasImage;
+    const { imageSize, textStackRef } = useIdentityImageSize(hasImage);
+    const imageSlotStyle = hasImage && imageSize !== null ? { height: imageSize.height, width: imageSize.width } : undefined;
+    // Mirror the loaded `IdentityCard` single-line rule so the skeleton →
+    // loaded transition keeps the same vertical alignment against the image.
+    const isSingleLine = !hasSubtitle && !hasStatusIndicators;
+    return (jsx(Card, { className: className, "data-testid": dataTestId, ref: ref, style: style, children: jsxs("div", { className: cvaCardContentRow(), children: [jsxs("div", { className: cvaCardMain({ singleLine: isSingleLine }), children: [hasImage ? (jsx("div", { className: cvaCardImage(), "data-testid": dataTestId ? `${dataTestId}-image` : undefined, style: imageSlotStyle, children: jsx(SkeletonBlock, { "data-testid": dataTestId ? `${dataTestId}-image-skeleton` : undefined, height: "100%", width: "100%" }) })) : null, showThumbnail ? (jsx("div", { className: cvaCardThumbnail(), "data-testid": dataTestId ? `${dataTestId}-thumbnail` : undefined, children: jsx(SkeletonBlock, { "data-testid": dataTestId ? `${dataTestId}-thumbnail-skeleton` : undefined, height: "100%", width: "100%" }) })) : null, jsxs("div", { className: cvaCardTextStack(), ref: textStackRef, children: [jsxs("div", { className: cvaCardIdentityGroup({ singleLine: isSingleLine }), "data-testid": dataTestId ? `${dataTestId}-identity-group` : undefined, children: [jsxs("div", { className: cvaCardTitleRow(), children: [jsx("div", { className: cvaCardTitleCluster(), children: jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-title-skeleton` : undefined, textSize: "text-base", width: 140 }) }), hasConnectivity ? (jsx(SkeletonBlock, { "data-testid": dataTestId ? `${dataTestId}-connectivity-skeleton` : undefined, height: 14, width: 50 })) : null] }), hasSubtitle ? (jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-subtitle-skeleton` : undefined, textSize: "text-xs", width: 180 })) : null] }), hasStatusIndicators ? (jsxs("div", { className: cvaCardStatusSkeletonRow(), "data-testid": dataTestId ? `${dataTestId}-status-skeleton` : undefined, children: [jsx(SkeletonBlock, { height: 14, width: 42 }), jsx(SkeletonBlock, { height: 14, width: 64 })] })) : null] })] }), hasChevron ? (jsx("div", { className: cvaCardChevron(), "data-testid": dataTestId ? `${dataTestId}-chevron` : undefined, children: jsx(Icon, { name: "ChevronRight", size: "medium" }) })) : null] }) }));
+};
+
 const cvaBadge = cva({
     base: [
         "box-border",
@@ -3162,157 +4068,12 @@ const Breadcrumb = ({ className, "data-testid": dataTestId, breadcrumbItems, onC
  *   return <StarButton starred={starred} onClick={() => setStarred(s => !s)} />;
  * };
  * ```
- * @param {StarButtonProps} props - The props for the StarButton component
- * @returns {ReactElement} StarButton component
- */
-const StarButton = ({ starred, onClick, className, "data-testid": dataTestId, style, ref, }) => {
-    return (jsx("div", { className: className, "data-testid": dataTestId ?? "starred-filter", onClick: onClick, ref: ref, style: style, children: jsx(Icon, { color: starred ? "primary" : "neutral", name: "Star", size: "medium" }) }));
-};
-
-const cvaCard = cva({
-    base: [
-        "flex",
-        "border",
-        "flex-col",
-        "relative",
-        "bg-white",
-        "component-card-shadow",
-        "component-card-border",
-        "transition-colors",
-        "ease-in-out",
-        "overflow-clip", //otherwise rounded corners are not respected (clip is preferable to hidden since it doesn't create a scroll clipping box. )
-    ],
-    variants: {
-        clickable: {
-            false: "",
-            true: "cursor-pointer hover:bg-neutral-50",
-        },
-        fullHeight: {
-            false: "",
-            true: "h-full",
-        },
-    },
-    defaultVariants: {
-        clickable: false,
-        fullHeight: false,
-    },
-});
-const cvaCardFooterContainerRoot = cva({
-    base: ["flex", "border-t", "border-neutral-200", "justify-end", "flex-row"],
-    variants: {
-        border: {
-            default: "",
-            borderless: "border-t-0",
-        },
-        padding: {
-            none: "p-0",
-            default: "p-4",
-        },
-    },
-    defaultVariants: {
-        border: "default",
-        padding: "default",
-    },
-});
-const cvaCardFooterContainer = cva({
-    base: ["justify-self-end", "grid", "auto-cols-max", "grid-flow-col", "gap-2"],
-});
-const cvaCardHeader = cva({ base: ["flex", "justify-between", "flex-1"] });
-const cvaCardHeaderHeadingContainer = cva({ base: ["flex", "gap-4", "items-center"] });
-const cvaCardHeaderContainer = cva({
-    base: ["flex", "border-b", "border-neutral-200"],
-    variants: {
-        border: {
-            default: "",
-            borderless: "border-b-0",
-        },
-        padding: {
-            none: "p-0",
-            default: "p-4",
-        },
-    },
-    defaultVariants: {
-        border: "default",
-        padding: "default",
-    },
-});
-const cvaCardBodyContainer = cva({
-    base: ["flex", "flex-grow", "overflow-auto"],
-    variants: {
-        direction: {
-            row: "flex-row",
-            "row-reverse": "flex-row-reverse",
-            column: "flex-col",
-            "column-reverse": "flex-col-reverse",
-        },
-        padding: {
-            none: "p-0",
-            default: "p-4",
-        },
-        gap: {
-            none: "gap-0",
-            default: "gap-4",
-        },
-    },
-    defaultVariants: {
-        direction: "column",
-        padding: "default",
-        gap: "default",
-    },
-});
-
-const ROLE_CARD = "region";
-/**
- * The Card component is a container for UI elements that groups related content together with a visual boundary.
- * To get the most out of the Card, use it in combination with the CardHeader, CardBody and CardFooter.
- *
- * ### When to use
- * Use cards to group related information and actions, such as in dashboards, list items, or content previews.
- *
- * ### When not to use
- * Do not use cards for layout purposes only. Use standard containers or grid layouts instead.
- *
- * @example Basic card
- * ```tsx
- * import { Card, CardHeader, CardBody } from "@trackunit/react-components";
- *
- * const MyComponent = () => {
- *   return (
- *     <Card>
- *       <CardHeader title="Asset Details" />
- *       <CardBody>
- *         <p>This card contains information about the asset.</p>
- *       </CardBody>
- *     </Card>
- *   );
- * };
- * ```
- * @example Clickable card with full content
- * ```tsx
- * import { Card, CardHeader, CardBody, CardFooter, Button } from "@trackunit/react-components";
- *
- * const AssetCard = () => {
- *   return (
- *     <Card onClick={() => console.log("Card clicked")}>
- *       <CardHeader title="Excavator #1234" subtitle="Last updated: 2 hours ago" />
- *       <CardBody>
- *         <p>Operating hours: 1,234</p>
- *         <p>Status: Active</p>
- *       </CardBody>
- *       <CardFooter>
- *         <Button variant="secondary" size="small">View Details</Button>
- *       </CardFooter>
- *     </Card>
- *   );
- * };
- * ```
- * @param {CardProps} props - The props for the Card component
- * @returns {ReactElement} Card component
+ * @param {StarButtonProps} props - The props for the StarButton component
+ * @returns {ReactElement} StarButton component
  */
-const Card = ({ children, onClick, fullHeight = false, onMouseEnter, onMouseLeave, className, "data-testid": dataTestId, ref, ...rest }) => {
-    return (jsx("div", { className: cvaCard({ fullHeight, clickable: Boolean(onClick), className }), "data-card": true, "data-testid": dataTestId, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: ref, role: ROLE_CARD, ...rest, children: children }));
+const StarButton = ({ starred, onClick, className, "data-testid": dataTestId, style, ref, }) => {
+    return (jsx("div", { className: className, "data-testid": dataTestId ?? "starred-filter", onClick: onClick, ref: ref, style: style, children: jsx(Icon, { color: starred ? "primary" : "neutral", name: "Star", size: "medium" }) }));
 };
-Card.displayName = "Card";
 
 /**
  * CardBody is the main content area of a Card. It provides consistent padding and gap between child elements.
@@ -3918,341 +4679,111 @@ const useCopyToClipboard = () => {
                 textArea.readOnly = false;
                 const range = document.createRange();
                 range.selectNodeContents(textArea);
-                const selection = window.getSelection();
-                if (selection) {
-                    selection.removeAllRanges();
-                    selection.addRange(range);
-                }
-                textArea.setSelectionRange(0, 999999);
-            }
-            else {
-                textArea.select();
-            }
-            const successful = document.execCommand("copy");
-            document.body.removeChild(textArea);
-            if (successful) {
-                setIsCopied(true);
-            }
-            else {
-                throw new Error("Copy command was unsuccessful");
-            }
-        }
-        catch (error) {
-            setIsCopied(false);
-            // Re-throw with more context for debugging
-            const errorMessage = error instanceof Error ? error.message : "Unknown error";
-            throw new Error(`Copy failed: ${errorMessage}`);
-        }
-    }, []);
-    return useMemo(() => [isCopied, copyToClipboard], [isCopied, copyToClipboard]);
-};
-
-/**
- * CopyButton is a standalone icon button that copies a value to the clipboard when clicked,
- * showing brief tooltip feedback. The copied value is not itself the clickable/displayed
- * element, so the button can be placed next to plain (non-clickable) text.
- *
- * ### When to use
- * - Icon-only (default): the copyable value is displayed as plain text (e.g. in a table cell or
- *   row) and only a dedicated icon should trigger the copy, keeping the rest of the row clickable.
- * - Labelled (`label` set): copying is the primary action of a panel or section — e.g. an invite
- *   link — and deserves a full button that is itself the click target.
- *
- * ### When not to use
- * Do not hand-roll copy affordances (custom icons, click-to-copy text) — this component is the
- * one copy control; pick icon-only or labelled mode instead.
- *
- * ### Empty values
- * CopyButton renders nothing when `value` is empty, so consumers never present a copy control
- * that has no meaningful result.
- *
- * @example Icon button next to plain text
- * ```tsx
- * import { CopyButton, Text } from "@trackunit/react-components";
- *
- * const ShortCode = ({ code }: { code: string }) => (
- *   <div className="flex items-center gap-0.5">
- *     <Text type="span">{code}</Text>
- *     <CopyButton value={code} />
- *   </div>
- * );
- * ```
- * @param {CopyButtonProps} props - The props for the CopyButton component
- * @returns {ReactElement} CopyButton component
- */
-const CopyButton = ({ value, copyLabel, copiedLabel, size = "small", label, variant = "ghost-neutral", className, style, "data-testid": dataTestId, onCopy, ref, }) => {
-    const [t] = useTranslation();
-    const [showCopied, setShowCopied] = useState(false);
-    const [, copyToClipboard] = useCopyToClipboard();
-    const resetTimerRef = useRef(undefined);
-    useEffect(() => () => clearTimeout(resetTimerRef.current), []);
-    // Localized defaults, so call sites don't each re-declare "Copy"/"Copied!"
-    // in their own translation files; the props stay as context-specific overrides.
-    const resolvedCopyLabel = copyLabel ?? t("copyButton.copy");
-    const resolvedCopiedLabel = copiedLabel ?? t("copyButton.copied");
-    if (!value) {
-        return null;
-    }
-    const handleCopy = (e) => {
-        e.stopPropagation();
-        void copyToClipboard(value)
-            // Rejections (both clipboard mechanisms failed) are intentionally
-            // swallowed; the icon simply doesn't flip. A throwing onCopy is a
-            // consumer bug and surfaces as an unhandled rejection instead.
-            .then(() => {
-            // Flip the icon to a checkmark for a moment, then revert. The timer
-            // owns the copied state so the confirmation survives the pointer
-            // leaving the button, and runs even if onCopy below throws.
-            setShowCopied(true);
-            clearTimeout(resetTimerRef.current);
-            resetTimerRef.current = setTimeout(() => setShowCopied(false), COPIED_FEEDBACK_DURATION_MS);
-            onCopy?.();
-        }, () => undefined);
-    };
-    const icon = (jsx(Icon, { ariaHidden: true, name: showCopied ? "Check" : "Square2Stack", size: size === "large" ? "medium" : "small" }));
-    if (label) {
-        // Labelled mode: a regular (non-square) button whose prefix icon carries
-        // the copied confirmation. `extraSmall` is icon-only, so it collapses to small.
-        // The visible label stays the accessible name (WCAG 2.5.3 Label in Name);
-        // since the copied feedback is otherwise visual-only, it is announced
-        // through the polite live region rendered next to the button.
-        return (jsxs(Fragment, { children: [jsx(Tooltip, { delayed: !showCopied, label: showCopied ? resolvedCopiedLabel : resolvedCopyLabel, placement: "top", children: jsx(Button, { className: className, "data-testid": dataTestId, onClick: handleCopy, prefix: icon, ref: ref, size: toButtonSize(size), style: style, variant: variant, children: label }) }), jsx("span", { className: "sr-only", role: "status", children: showCopied ? resolvedCopiedLabel : undefined })] }));
-    }
-    return (jsx(Tooltip, { delayed: !showCopied, label: showCopied ? resolvedCopiedLabel : resolvedCopyLabel, placement: "top", children: jsx(Button, { ariaLabel: showCopied ? resolvedCopiedLabel : resolvedCopyLabel, className: cvaIconButton({ size, className }), "data-testid": dataTestId, onClick: handleCopy, prefix: icon, ref: ref, size: toButtonSize(size), square: true, style: style, variant: variant }) }));
-};
-CopyButton.displayName = "CopyButton";
-const COPIED_FEEDBACK_DURATION_MS = 2000;
-
-const cvaDetailsList = cva({
-    base: ["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-neutral-600", "font-medium", "pt-0"],
-    variants: {
-        hasLink: {
-            true: "pl-1",
-        },
-    },
-    defaultVariants: {
-        hasLink: false,
-    },
-});
-const cvaDetailsListItem = cva({ base: ["last:truncate"] });
-
-/**
- * DetailsList renders a one-line list of text values separated by slash icons.
- * It is used to display compact metadata such as model, serial number, or location in a single row.
- *
- * ### When to use
- * Use DetailsList to display a compact, horizontal list of metadata values (e.g., in a card subtitle or list item description).
- *
- * ### When not to use
- * Do not use DetailsList for key-value pairs — use a standard layout with labels. Do not use for long text — values should be short strings.
- *
- * @example Displaying asset metadata
- * ```tsx
- * import { DetailsList } from "@trackunit/react-components";
- *
- * const AssetMeta = () => (
- *   <DetailsList details={["Excavator", "CAT 320", "SN-00142"]} />
- * );
- * ```
- * @example DetailsList inside a linked context
- * ```tsx
- * import { DetailsList } from "@trackunit/react-components";
- *
- * const LinkedAssetMeta = () => (
- *   <a href="/assets/123">
- *     <DetailsList details={["Site: Oslo", "Group: Heavy"]} hasLink />
- *   </a>
- * );
- * ```
- * @param {DetailsListProps} props - The props for the DetailsList component
- * @returns {ReactElement} DetailsList component
- */
-const DetailsList = ({ details, className, "data-testid": dataTestId, hasLink = false, style, ref, }) => {
-    return (jsx("div", { className: cvaDetailsList({ className, hasLink }), "data-testid": dataTestId, ref: ref, style: style, children: details.map((value, index, array) => (jsxs(Fragment$1, { children: [jsx("span", { className: cvaDetailsListItem({ className }), children: value }), index < array.length - 1 && (jsx("div", { className: "mx-0.5 flex items-center", children: jsx(Icon, { className: "w-4 text-neutral-300", color: "neutral", name: "Slash", size: "small" }) }))] }, index))) }));
-};
-
-/**
- * Merges inline styles where `base` defines component defaults and `override` (typically from props) wins on conflicts.
- */
-function mergeDomStyles(base, override) {
-    if (base === undefined && override === undefined) {
-        return undefined;
-    }
-    if (base === undefined) {
-        return override;
-    }
-    if (override === undefined) {
-        return base;
-    }
-    return { ...base, ...override };
-}
-
-const VALID_SIZE_KEYS = [
-    "xs",
-    "sm",
-    "base",
-    "lg",
-    "xl",
-    "2xl",
-    "3xl",
-    "4xl",
-    "5xl",
-    "6xl",
-    "7xl",
-    "8xl",
-    "9xl",
-];
-/**
- * Extract the size key from a text size string (e.g., "text-base" → "base").
- *
- * @param value - The text size string to parse
- * @returns {fontSizeKeys | null} The extracted size key or null if invalid
- */
-const extractSizeKey = (value) => {
-    if (!value.startsWith("text-")) {
-        return null;
-    }
-    const sizeKey = value.replace("text-", "");
-    return VALID_SIZE_KEYS.find(key => key === sizeKey) ?? null;
-};
-/**
- * Calculate the height value based on the height prop and variant.
- *
- * @param height - The height value (number, CSS length, or text size key)
- * @param variant - The skeleton variant ("text" or "block")
- * @returns {string} The calculated CSS height value
- */
-const getHeightValue = (height, variant) => {
-    if (typeof height === "number") {
-        return `${height}px`;
-    }
-    const sizeKey = extractSizeKey(height);
-    if (sizeKey) {
-        // Text variant: use font-size × 0.7 to approximate cap-height
-        // Block variant: use full line-height (for when text size keys are passed to block variant)
-        return `calc(var(--font-size-${sizeKey}) * 0.7)` ;
-    }
-    return height;
-};
-/**
- * Type-safe helper to construct a CSSLength from a number and unit.
- * Uses a generic to preserve the specific unit type in the return type.
- */
-const makeCSSLength = (value, unit) => {
-    return `${value}${unit}`;
-};
-/**
- * Generates a random CSS length value.
- *
- * Note: For React components, prefer `useRandomCSSLengths` hook to ensure stable values across re-renders.
- *
- * @param params - The parameters object
- * @param params.min - Minimum numeric value
- * @param params.max - Maximum numeric value
- * @param params.unit - CSS unit (defaults to "%")
- * @returns {CSSLength} A CSS length string (e.g., "65%", "120px", "4rem")
- */
-const getRandomCSSLength = ({ min, max, unit = "%", }) => {
-    const randomValue = Math.floor(Math.random() * (max - min + 1)) + min;
-    return makeCSSLength(randomValue, unit);
-};
-/**
- * React hook that generates stable random CSS length values for skeleton loading components.
- *
- * Values are memoized and only regenerate when count, min, max, or unit changes.
- *
- * @param params - The parameters object
- * @param params.count - Number of random lengths to generate
- * @param params.min - Minimum numeric value
- * @param params.max - Maximum numeric value
- * @param params.unit - CSS unit (defaults to "%")
- * @returns {Array<CSSLength>} Array of CSS length strings (e.g., ["65%", "42%", "78%"])
- */
-const useRandomCSSLengths = ({ count, min, max, unit = "%", }) => {
-    return useMemo(() => Array.from({ length: count }, () => getRandomCSSLength({ min, max, unit })), [count, min, max, unit]);
+                const selection = window.getSelection();
+                if (selection) {
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                }
+                textArea.setSelectionRange(0, 999999);
+            }
+            else {
+                textArea.select();
+            }
+            const successful = document.execCommand("copy");
+            document.body.removeChild(textArea);
+            if (successful) {
+                setIsCopied(true);
+            }
+            else {
+                throw new Error("Copy command was unsuccessful");
+            }
+        }
+        catch (error) {
+            setIsCopied(false);
+            // Re-throw with more context for debugging
+            const errorMessage = error instanceof Error ? error.message : "Unknown error";
+            throw new Error(`Copy failed: ${errorMessage}`);
+        }
+    }, []);
+    return useMemo(() => [isCopied, copyToClipboard], [isCopied, copyToClipboard]);
 };
 
-const cvaSkeleton = cva({
-    base: [
-        "relative",
-        "overflow-hidden",
-        "rounded-lg",
-        // Gradient background
-        "bg-linear-to-r",
-        "from-neutral-200/80",
-        "via-neutral-300/60",
-        "to-neutral-200/80",
-        // Pulse animation
-        "animate-pulse",
-        // Shimmer overlay
-        "before:absolute",
-        "before:inset-0",
-        "before:bg-linear-to-r",
-        "before:from-transparent",
-        "before:via-white/50",
-        "before:to-transparent",
-        "before:opacity-0",
-        "before:animate-pulse",
-        // Smooth transitions for accessibility
-        "transition-all",
-        "duration-300",
-        "ease-in-out",
-    ],
-    variants: {
-        textSize: {
-            "text-xs": ["my-[calc((var(--line-height-xs)-var(--font-size-xs)*0.7)/2)]"],
-            "text-sm": ["my-[calc((var(--line-height-sm)-var(--font-size-sm)*0.7)/2)]"],
-            "text-base": ["my-[calc((var(--line-height-base)-var(--font-size-base)*0.7)/2)]"],
-            "text-lg": ["my-[calc((var(--line-height-lg)-var(--font-size-lg)*0.7)/2)]"],
-            "text-xl": ["my-[calc((var(--line-height-xl)-var(--font-size-xl)*0.7)/2)]"],
-            "text-2xl": ["my-[calc((var(--line-height-2xl)-var(--font-size-2xl)*0.7)/2)]"],
-            "text-3xl": ["my-[calc((var(--line-height-3xl)-var(--font-size-3xl)*0.7)/2)]"],
-            "text-4xl": ["my-[calc((var(--line-height-4xl)-var(--font-size-4xl)*0.7)/2)]"],
-            "text-5xl": ["my-[calc((var(--line-height-5xl)-var(--font-size-5xl)*0.7)/2)]"],
-            "text-6xl": ["my-[calc((var(--line-height-6xl)-var(--font-size-6xl)*0.7)/2)]"],
-            "text-7xl": ["my-[calc((var(--line-height-7xl)-var(--font-size-7xl)*0.7)/2)]"],
-            "text-8xl": ["my-[calc((var(--line-height-8xl)-var(--font-size-8xl)*0.7)/2)]"],
-            "text-9xl": ["my-[calc((var(--line-height-9xl)-var(--font-size-9xl)*0.7)/2)]"],
-        },
-    },
-});
-
 /**
- * SkeletonLabel renders a single animated placeholder line for text content. It uses text-size keys (text-xs, text-sm, text-base, etc.)
- * to match the visual cap-height of actual text, with appropriate vertical margins to maintain line-height alignment.
+ * CopyButton is a standalone icon button that copies a value to the clipboard when clicked,
+ * showing brief tooltip feedback. The copied value is not itself the clickable/displayed
+ * element, so the button can be placed next to plain (non-clickable) text.
  *
  * ### When to use
- * Use SkeletonLabel as a loading placeholder for single text lines: labels, titles, descriptions, values.
+ * - Icon-only (default): the copyable value is displayed as plain text (e.g. in a table cell or
+ *   row) and only a dedicated icon should trigger the copy, keeping the rest of the row clickable.
+ * - Labelled (`label` set): copying is the primary action of a panel or section — e.g. an invite
+ *   link — and deserves a full button that is itself the click target.
  *
  * ### When not to use
- * For multiple text lines, use `SkeletonLines`.
- * For shape-based elements (images, icons, avatars), use `SkeletonBlock`.
+ * Do not hand-roll copy affordances (custom icons, click-to-copy text) — this component is the
+ * one copy control; pick icon-only or labelled mode instead.
  *
- * @example Skeleton label for a title and description
+ * ### Empty values
+ * CopyButton renders nothing when `value` is empty, so consumers never present a copy control
+ * that has no meaningful result.
+ *
+ * @example Icon button next to plain text
  * ```tsx
- * import { SkeletonLabel } from "@trackunit/react-components";
+ * import { CopyButton, Text } from "@trackunit/react-components";
  *
- * const TextSkeleton = () => (
- *   <div className="flex flex-col gap-1">
- *     <SkeletonLabel textSize="text-lg" width={200} />
- *     <SkeletonLabel textSize="text-sm" width="80%" />
+ * const ShortCode = ({ code }: { code: string }) => (
+ *   <div className="flex items-center gap-0.5">
+ *     <Text type="span">{code}</Text>
+ *     <CopyButton value={code} />
  *   </div>
  * );
  * ```
- * @param {SkeletonLabelProps} props - The props for the SkeletonLabel component
- * @returns {ReactElement} SkeletonLabel component
+ * @param {CopyButtonProps} props - The props for the CopyButton component
+ * @returns {ReactElement} CopyButton component
  */
-const SkeletonLabel = memo((props) => {
-    const { width = "100%", textSize = "text-base", flexibleWidth = true, className, "data-testid": dataTestId, children, style, ref, } = props;
-    const widthValue = typeof width === "number" ? `${width}px` : width;
-    const heightValue = getHeightValue(textSize);
-    return (jsx("div", { "aria-label": "Loading", className: cvaSkeleton({ textSize, className }), "data-testid": dataTestId, ref: ref, role: "status", style: mergeDomStyles({
-            width: flexibleWidth ? "100%" : widthValue,
-            maxWidth: flexibleWidth ? widthValue : undefined,
-            height: heightValue,
-        }, style), children: children }));
-});
-SkeletonLabel.displayName = "SkeletonLabel";
+const CopyButton = ({ value, copyLabel, copiedLabel, size = "small", label, variant = "ghost-neutral", className, style, "data-testid": dataTestId, onCopy, ref, }) => {
+    const [t] = useTranslation();
+    const [showCopied, setShowCopied] = useState(false);
+    const [, copyToClipboard] = useCopyToClipboard();
+    const resetTimerRef = useRef(undefined);
+    useEffect(() => () => clearTimeout(resetTimerRef.current), []);
+    // Localized defaults, so call sites don't each re-declare "Copy"/"Copied!"
+    // in their own translation files; the props stay as context-specific overrides.
+    const resolvedCopyLabel = copyLabel ?? t("copyButton.copy");
+    const resolvedCopiedLabel = copiedLabel ?? t("copyButton.copied");
+    if (!value) {
+        return null;
+    }
+    const handleCopy = (e) => {
+        e.stopPropagation();
+        void copyToClipboard(value)
+            // Rejections (both clipboard mechanisms failed) are intentionally
+            // swallowed; the icon simply doesn't flip. A throwing onCopy is a
+            // consumer bug and surfaces as an unhandled rejection instead.
+            .then(() => {
+            // Flip the icon to a checkmark for a moment, then revert. The timer
+            // owns the copied state so the confirmation survives the pointer
+            // leaving the button, and runs even if onCopy below throws.
+            setShowCopied(true);
+            clearTimeout(resetTimerRef.current);
+            resetTimerRef.current = setTimeout(() => setShowCopied(false), COPIED_FEEDBACK_DURATION_MS);
+            onCopy?.();
+        }, () => undefined);
+    };
+    const buttonSize = toButtonSize(size);
+    const icon = (jsx(Icon, { ariaHidden: true, name: showCopied ? "Check" : "Square2Stack", size: buttonSize === "large" ? "medium" : "small" }));
+    if (label) {
+        // Labelled mode: a regular (non-square) button whose prefix icon carries
+        // the copied confirmation. `extraSmall` is icon-only, so it collapses to small.
+        // The visible label stays the accessible name (WCAG 2.5.3 Label in Name);
+        // since the copied feedback is otherwise visual-only, it is announced
+        // through the polite live region rendered next to the button.
+        return (jsxs(Fragment, { children: [jsx(Tooltip, { delayed: !showCopied, label: showCopied ? resolvedCopiedLabel : resolvedCopyLabel, placement: "top", children: jsx(Button, { className: className, "data-testid": dataTestId, onClick: handleCopy, prefix: icon, ref: ref, size: buttonSize, style: style, variant: variant, children: label }) }), jsx("span", { className: "sr-only", role: "status", children: showCopied ? resolvedCopiedLabel : undefined })] }));
+    }
+    return (jsx(Tooltip, { delayed: !showCopied, label: showCopied ? resolvedCopiedLabel : resolvedCopyLabel, placement: "top", children: jsx(Button, { ariaLabel: showCopied ? resolvedCopiedLabel : resolvedCopyLabel, className: cvaIconButton({ size, className }), "data-testid": dataTestId, onClick: handleCopy, prefix: icon, ref: ref, size: buttonSize, square: true, style: style, variant: variant }) }));
+};
+CopyButton.displayName = "CopyButton";
+const COPIED_FEEDBACK_DURATION_MS = 2000;
 
 const cvaContainerStyles = cva({
     base: [
@@ -5850,8 +6381,11 @@ const HorizontalOverflowScroller = ({ className, "data-testid": dataTestId, chil
 const cvaIndicator = cva({ base: ["inline-flex", "items-center"] });
 const cvaIndicatorIcon = cva({ base: ["mr-2"] });
 const cvaIndicatorLabel = cva({
-    base: ["capitalize"],
     variants: {
+        content: {
+            text: "capitalize",
+            custom: null,
+        },
         size: {
             small: "text-xs",
             medium: "text-sm",
@@ -5866,6 +6400,7 @@ const cvaIndicatorLabel = cva({
         },
     },
     defaultVariants: {
+        content: "text",
         size: "medium",
         weight: "medium",
         background: "visible",
@@ -6015,71 +6550,14 @@ const cvaIndicatorIconBackground = cva({
  * @returns {ReactElement} Indicator component
  */
 const Indicator = ({ "data-testid": dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, size = "medium", weight = "normal", className, ref, ...rest }) => {
-    return (jsx(Tooltip, { disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", { "aria-label": label, className: cvaIndicator({ className }), "data-testid": dataTestId, ref: ref, ...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 && withLabel ? (jsx("div", { className: cvaIndicatorLabel({ size, weight, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-label` : undefined, children: label })) : null] }) }));
+    return (jsx(Tooltip, { disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaIndicator({ className }), "data-testid": dataTestId, ref: ref, ...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] }), withLabel && typeof label !== "boolean" && label !== null && label !== undefined && label !== "" ? (jsx("div", { className: cvaIndicatorLabel({
+                        content: typeof label === "string" ? "text" : "custom",
+                        size,
+                        weight,
+                        background: withBackground ? "visible" : "hidden",
+                    }), "data-testid": dataTestId ? `${dataTestId}-label` : undefined, children: label })) : null] }) }));
 };
 
-/**
- * Applies standardized interaction-related styles to an element.
- *
- * Prefer using the "auto" settings — only resort to manual control if necessary!
- * - selected: "auto" will apply styling when it contains a `checked` input aka. `:has(:checked)`.
- * - focused: "auto" will apply styling when the element or it's children has focus aka. `:focus-within`.
- *
- * To be used for elements that do not have typical interactive roles and behaviors,
- * such as divs, table rows, cards etc.
- *
- * To not be used for buttons, links, or other elements that have their own intrinsic interactive roles.
- *
- * @returns tailwind class names on the basis on the provided props.
- */
-const cvaInteractableItem = cva({
-    base: ["transition-colors", "duration-100", "ease-in-out"],
-    variants: {
-        cursor: {
-            pointer: "cursor-pointer",
-            auto: "cursor-auto",
-            help: "cursor-help",
-            "zoom-in": "cursor-zoom-in",
-            "zoom-out": "cursor-zoom-out",
-            default: "cursor-default",
-            "not-allowed": "cursor-not-allowed",
-        },
-        selection: {
-            selected: ["bg-primary-50", "hover:bg-primary-100", "focus-within:bg-primary-50"],
-            unselected: "",
-            auto: [
-                "hover:bg-neutral-100",
-                "has-[:checked]:bg-primary-50",
-                "hover:has-[:checked]:bg-primary-50",
-                "focus-within:has-[:checked]:bg-primary-50",
-            ],
-        },
-        disabled: {
-            // Remember to also disable the element or set tabIndex=-1 to prevent actual interaction/focus!
-            true: ["pointer-events-none", "!bg-neutral-100", "!cursor-not-allowed"],
-            false: "", // use compoundVariants instead
-        },
-        focus: {
-            focused: ["bg-neutral-600/5"],
-            unfocused: "",
-            auto: "[&:has(:focus-visible)]:outline-native",
-        },
-    },
-    compoundVariants: [
-        {
-            disabled: false,
-            selection: "unselected",
-            className: ["hover:bg-neutral-600/5", "focus-within:bg-neutral-600/5"],
-        },
-    ],
-    defaultVariants: {
-        cursor: "auto",
-        selection: "auto",
-        disabled: false,
-        focus: "auto",
-    },
-});
-
 const cvaKPI = cva({
     base: ["flex", "flex-col"],
     variants: {
@@ -6457,43 +6935,6 @@ const KPICard = ({ isActive = false, onClick, className, "data-testid": dataTest
         }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, ref: ref, children: jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: tooltipLabel === undefined || tooltipLabel === "", label: tooltipLabel, placement: "bottom", children: jsxs(CardBody, { className: cvaKPICardBody(), gap: "none", padding: "none", children: [jsxs("div", { className: cvaKPICardHeader(), children: [jsx(KPI, { ...rest, className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined, unit: unit }), iconName ? (jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null] }), trends !== undefined && trends.length > 0 ? (jsx(TrendIndicators, { "data-testid": dataTestId ? `${dataTestId}-trend-indicators` : undefined, trends: trends })) : null, valueBar !== undefined ? (jsx(ValueBar, { className: "h-2", "data-testid": dataTestId ? `${dataTestId}-value-bar` : undefined, ...valueBar })) : null, notice !== undefined ? (jsxs("div", { className: "flex items-center gap-1 truncate", "data-testid": dataTestId ? `${dataTestId}-notice` : undefined, children: [notice.iconName ? (jsx(Icon, { color: notice.iconColor, "data-testid": dataTestId ? `${dataTestId}-notice-icon` : undefined, name: notice.iconName, size: "small" })) : null, jsx(Text, { className: "truncate text-neutral-900", "data-testid": dataTestId ? `${dataTestId}-notice-label` : undefined, size: "small", children: notice.label })] })) : null, children] }) }) }));
 };
 
-/**
- * SkeletonBlock renders a single animated placeholder block for shape-based elements (images, icons, buttons, avatars)
- * before data is loaded. It uses exact height and width values to match the element it replaces.
- *
- * ### When to use
- * Use SkeletonBlock for loading placeholders of shape-based UI elements: images, icons, badges, buttons, avatars, thumbnails.
- *
- * ### When not to use
- * For text content, use `SkeletonLabel` which accounts for text line-height margins.
- * For multiple text lines, use `SkeletonLines`.
- *
- * @example Skeleton block for an avatar and button
- * ```tsx
- * import { SkeletonBlock } from "@trackunit/react-components";
- *
- * const AvatarSkeleton = () => (
- *   <div className="flex items-center gap-3">
- *     <SkeletonBlock height={40} width={40} className="rounded-full" />
- *     <SkeletonBlock height={32} width={120} className="rounded-md" />
- *   </div>
- * );
- * ```
- * @param {SkeletonBlockProps} props - The props for the SkeletonBlock component
- * @returns {ReactElement} SkeletonBlock component
- */
-const SkeletonBlock = memo((props) => {
-    const { width = "100%", height = 16, flexibleWidth = false, className, "data-testid": dataTestId, children, style, ref, } = props;
-    const widthValue = typeof width === "number" ? `${width}px` : width;
-    const heightValue = typeof height === "number" ? `${height}px` : height;
-    return (jsx("div", { "aria-label": "Loading", className: cvaSkeleton({ className }), "data-testid": dataTestId, ref: ref, role: "status", style: mergeDomStyles({
-            width: flexibleWidth ? "100%" : widthValue,
-            maxWidth: flexibleWidth ? widthValue : undefined,
-            height: heightValue,
-        }, style), children: children }));
-});
-SkeletonBlock.displayName = "SkeletonBlock";
-
 /**
  * KPICardSkeleton is a loading placeholder that mimics the layout of a KPICard.
  * It renders skeleton lines for the KPI title/value, and optional icon, trends, value bar, and notice slots.
@@ -6527,7 +6968,7 @@ const cvaLabeledValue = cva({
     base: ["flex", "text-sm"],
     variants: {
         orientation: {
-            horizontal: ["flex-row", "items-start", "gap-6"],
+            horizontal: ["flex-row", "items-start", "gap-2"],
             vertical: ["flex-col"],
         },
     },
@@ -6539,7 +6980,7 @@ const cvaLabeledValueLabel = cva({
     base: ["font-medium", "text-neutral-500"],
     variants: {
         orientation: {
-            horizontal: ["min-w-[40%]", "max-w-[40%]"],
+            horizontal: ["min-w-[30%]", "max-w-[30%]"],
             vertical: ["mb-1"],
         },
     },
@@ -15032,4 +15473,4 @@ const useWindowActivity = ({ onFocus, onBlur, skip = false } = { onBlur: undefin
  */
 setupLibraryTranslations();
 
-export { Alert, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyButton, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, LabeledValue, LabeledValueList, List, ListItem, MAX_HASH_LENGTH, MAX_URL_LENGTH, MenuContent, MenuDivider, MenuItem, MenuTree, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SHEET_TRANSITION_DURATION, SHEET_TRANSITION_DURATION_MS, SHEET_TRANSITION_EASING, SectionHeader, SegmentedValueBar, Sheet, Sidebar, SidebarContentLayout, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, useBidirectionalScroll, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useCopyToClipboard, useCursorUrlSync, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGridAreas, useHashParamSync, useHold, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMenuSearchField, useMenuTree, useMergeRefs, useModifierKey, useOptionalPopoverContext, useOverflowBorder, useOverflowItems, usePersistedState, usePopoverContext, usePrevious, usePrompt, useRandomCSSLengths, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSearchParamSync, useSelfUpdatingRef, useSessionStorage, useSessionStorageReducer, useSheet, useSheetSnap, useStorageKey, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };
+export { Alert, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyButton, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, IdentityCard, IdentityCardSkeleton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, LabeledValue, LabeledValueList, List, ListItem, MAX_HASH_LENGTH, MAX_URL_LENGTH, MenuContent, MenuDivider, MenuItem, MenuTree, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SHEET_TRANSITION_DURATION, SHEET_TRANSITION_DURATION_MS, SHEET_TRANSITION_EASING, SectionHeader, SegmentedValueBar, Sheet, Sidebar, SidebarContentLayout, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, useBidirectionalScroll, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useCopyToClipboard, useCursorUrlSync, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGridAreas, useHashParamSync, useHold, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMenuSearchField, useMenuTree, useMergeRefs, useModifierKey, useOptionalPopoverContext, useOverflowBorder, useOverflowItems, usePersistedState, usePopoverContext, usePrevious, usePrompt, useRandomCSSLengths, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSearchParamSync, useSelfUpdatingRef, useSessionStorage, useSessionStorageReducer, useSheet, useSheetSnap, useStorageKey, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };