@trackunit/react-components 1.22.3 → 1.22.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.22.3",
+  "version": "1.22.6",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -13,10 +13,10 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.11.97",
-    "@trackunit/css-class-variance-utilities": "1.11.100",
-    "@trackunit/shared-utils": "1.13.100",
-    "@trackunit/ui-icons": "1.11.96",
+    "@trackunit/ui-design-tokens": "1.11.98",
+    "@trackunit/css-class-variance-utilities": "1.11.101",
+    "@trackunit/shared-utils": "1.13.101",
+    "@trackunit/ui-icons": "1.11.97",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",
     "dequal": "^2.0.3",

package/src/common/Styleable.d.ts

@@ -1,4 +1,8 @@
-import { CSSProperties } from "react";
+import type { CSSProperties } from "react";
 export type Styleable = {
     style?: CSSProperties;
 };
+/**
+ * Merges inline styles where `base` defines component defaults and `override` (typically from props) wins on conflicts.
+ */
+export declare function mergeDomStyles(base: CSSProperties | undefined, override: CSSProperties | undefined): CSSProperties | undefined;

package/src/components/Alert/Alert.d.ts

@@ -1,5 +1,6 @@
 import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
 export type AlertColors = "info" | "success" | "warning" | "danger" | "neutral";
 export type AlertActionType = "primary" | "secondary";
@@ -8,7 +9,7 @@ export type AlertAction = {
     onClick: MouseEventHandler<HTMLButtonElement>;
     loading?: boolean;
 };
-export interface AlertProps extends CommonProps, Refable<HTMLDivElement> {
+export interface AlertProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * Child nodes.
      */
@@ -109,4 +110,4 @@ export interface AlertProps extends CommonProps, Refable<HTMLDivElement> {
  * @param {AlertProps} props - The props for the Alert component
  * @returns {ReactElement} Alert component
  */
-export declare const Alert: ({ color, title, className, children, primaryAction, secondaryAction, onClickClose, "data-testid": dataTestId, autoScroll, actionsInline, ref, }: AlertProps) => ReactElement;
+export declare const Alert: ({ color, title, className, children, primaryAction, secondaryAction, onClickClose, "data-testid": dataTestId, autoScroll, actionsInline, style, ref, }: AlertProps) => ReactElement;

package/src/components/Badge/Badge.d.ts

@@ -1,10 +1,11 @@
 import { ThemeColors } from "@trackunit/ui-design-tokens";
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
 type BadgeColors = Extract<ThemeColors, "primary" | "danger" | "warning" | "neutral">;
 type BadgeSize = "default" | "condensed";
-interface BaseBadgeProps extends CommonProps, Refable<HTMLSpanElement> {
+interface BaseBadgeProps extends CommonProps, Styleable, Refable<HTMLSpanElement> {
     /**
      * The color of the badge.
      */
@@ -77,5 +78,5 @@ export type BadgeProps = BaseBadgeProps;
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {ReactElement} Badge component
  */
-export declare const Badge: ({ color, size, compact, className, count, max, hideZero, "data-testid": dataTestId, ref, }: BadgeProps) => ReactElement | null;
+export declare const Badge: ({ color, size, compact, className, count, max, hideZero, "data-testid": dataTestId, style, ref, }: BadgeProps) => ReactElement | null;
 export {};

package/src/components/Breadcrumb/Breadcrumb.d.ts

@@ -36,7 +36,7 @@ import { BreadcrumbContainerProps, BreadcrumbProps } from "./utils/types";
  * @param {BreadcrumbProps} props - The props for the Breadcrumb component
  * @returns {ReactElement} Breadcrumb component
  */
-export declare const Breadcrumb: ({ className, "data-testid": dataTestId, breadcrumbItems, onClickBack, ref, }: BreadcrumbProps) => ReactElement;
+export declare const Breadcrumb: ({ className, "data-testid": dataTestId, breadcrumbItems, onClickBack, style, ref, }: BreadcrumbProps) => ReactElement;
 /**
  * BreadcrumbContainer is a helper component that renders the breadcrumb items based on the screen size.
  *

package/src/components/Breadcrumb/BreadcrumbForLargeScreen.d.ts

@@ -3,4 +3,4 @@ import { BreadcrumbContainerProps } from "./utils/types";
 /**
  * BreadcrumbForLargeScreen is a helper component that renders the breadcrumb items for large screens.
  */
-export declare const BreadcrumbForLargeScreen: ({ "data-testid": dataTestId, breadcrumbItems, }: BreadcrumbContainerProps) => ReactElement;
+export declare const BreadcrumbForLargeScreen: ({ "data-testid": dataTestId, breadcrumbItems, className, style, }: BreadcrumbContainerProps) => ReactElement;

package/src/components/Breadcrumb/BreadcrumbForMediumScreen.d.ts

@@ -3,4 +3,4 @@ import { BreadcrumbContainerProps } from "./utils/types";
 /**
  * BreadcrumbForMediumScreen is a helper component that renders the breadcrumb items for medium screens.
  */
-export declare const BreadcrumbForMediumScreen: ({ "data-testid": dataTestId, breadcrumbItems, }: BreadcrumbContainerProps) => ReactElement;
+export declare const BreadcrumbForMediumScreen: ({ "data-testid": dataTestId, breadcrumbItems, className, style, }: BreadcrumbContainerProps) => ReactElement;

package/src/components/Breadcrumb/BreadcrumbForSmallScreen.d.ts

@@ -3,4 +3,4 @@ import { BreadcrumbContainerProps } from "./utils/types";
 /**
  * BreadcrumbForSmallScreen is a helper component that renders the breadcrumb items for small screens.
  */
-export declare const BreadcrumbForSmallScreen: ({ "data-testid": dataTestId, breadcrumbItems, }: BreadcrumbContainerProps) => ReactElement;
+export declare const BreadcrumbForSmallScreen: ({ "data-testid": dataTestId, breadcrumbItems, className, style, }: BreadcrumbContainerProps) => ReactElement;

package/src/components/Breadcrumb/BreadcrumbItem.d.ts

@@ -3,4 +3,4 @@ import { BreadcrumbItemRenderProps } from "./utils/types";
 /**
  * BreadcrumbItem is a helper component that renders the individual breadcrumb item.
  */
-export declare const BreadcrumbItem: ({ item, "data-testid": dataTestId }: BreadcrumbItemRenderProps) => ReactElement;
+export declare const BreadcrumbItem: ({ item, "data-testid": dataTestId, className, style, }: BreadcrumbItemRenderProps) => ReactElement;

package/src/components/Breadcrumb/utils/types.d.ts

@@ -1,5 +1,6 @@
 import { MouseEventHandler, ReactElement } from "react";
 import { CommonProps } from "../../../common/CommonProps";
+import type { Styleable } from "../../../common/Styleable";
 import { Refable } from "../../../common/Refable";
 export interface BreadcrumbItemProps {
     /** The display text for this breadcrumb item. */
@@ -7,7 +8,7 @@ export interface BreadcrumbItemProps {
     /** The route path this breadcrumb item links to. */
     to: string;
 }
-export interface BreadcrumbProps extends CommonProps, Refable<HTMLDivElement> {
+export interface BreadcrumbProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * The ordered list of breadcrumb items representing the navigation hierarchy.
      * The last item is rendered as plain text (the current page), all preceding items are rendered as clickable links.
@@ -18,9 +19,9 @@ export interface BreadcrumbProps extends CommonProps, Refable<HTMLDivElement> {
      */
     onClickBack: MouseEventHandler<HTMLButtonElement>;
 }
-export interface BreadcrumbContainerProps extends CommonProps {
+export interface BreadcrumbContainerProps extends CommonProps, Styleable {
     breadcrumbItems: Array<ReactElement<BreadcrumbItemProps>>;
 }
-export interface BreadcrumbItemRenderProps extends CommonProps {
+export interface BreadcrumbItemRenderProps extends CommonProps, Styleable {
     item: ReactElement<BreadcrumbItemProps>;
 }

package/src/components/Card/Card.d.ts

@@ -1,8 +1,9 @@
 import { InputHTMLAttributes, MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
 export declare const ROLE_CARD = "region";
-export interface CardProps extends CommonProps, Refable<HTMLDivElement>, InputHTMLAttributes<HTMLDivElement> {
+export interface CardProps extends CommonProps, Styleable, Refable<HTMLDivElement>, InputHTMLAttributes<HTMLDivElement> {
     /**
      * Whether the card should have full height or not.
      */

package/src/components/Card/CardBody.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
-export interface CardBodyProps extends CommonProps, Refable<HTMLDivElement> {
+export interface CardBodyProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * Sets flex direction
      */
@@ -66,4 +67,4 @@ export interface CardBodyProps extends CommonProps, Refable<HTMLDivElement> {
  * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {ReactElement} CardBody component
  */
-export declare const CardBody: ({ children, "data-testid": dataTestId, className, direction, gap, padding, id, ref, }: CardBodyProps) => ReactElement;
+export declare const CardBody: ({ children, "data-testid": dataTestId, className, direction, gap, padding, id, style, ref, }: CardBodyProps) => ReactElement;

package/src/components/Card/CardFooter.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
-export interface CardFooterProps extends CommonProps, Refable<HTMLDivElement> {
+export interface CardFooterProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * Element to render in the footer
      */
@@ -64,4 +65,4 @@ export interface CardFooterProps extends CommonProps, Refable<HTMLDivElement> {
  * @param {CardFooterProps} props - The props for the CardFooter component
  * @returns {ReactElement} CardFooter component
  */
-export declare const CardFooter: ({ "data-testid": dataTestId, className, children, padding, hideSeparator, ref, }: CardFooterProps) => ReactElement;
+export declare const CardFooter: ({ "data-testid": dataTestId, className, children, padding, hideSeparator, style, ref, }: CardFooterProps) => ReactElement;

package/src/components/Card/CardHeader.d.ts

@@ -1,8 +1,9 @@
 import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
 import { HeadingVariant } from "../Heading/Heading";
-export interface CardHeaderProps extends CommonProps, Refable<HTMLDivElement> {
+export interface CardHeaderProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * The text to show in the Cards main heading
      */
@@ -89,4 +90,4 @@ export interface CardHeaderProps extends CommonProps, Refable<HTMLDivElement> {
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {ReactElement} CardHeader component
  */
-export declare const CardHeader: ({ heading, headingVariant, subHeading, onClickClose, "data-testid": dataTestId, className, children, accessories, actions, padding, hideSeparator, ref, }: CardHeaderProps) => ReactElement;
+export declare const CardHeader: ({ heading, headingVariant, subHeading, onClickClose, "data-testid": dataTestId, className, children, accessories, actions, padding, hideSeparator, style, ref, }: CardHeaderProps) => ReactElement;

package/src/components/Collapse/Collapse.d.ts

@@ -1,7 +1,8 @@
 import { MouseEvent, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
-export interface CollapseProps extends CommonProps, Refable<HTMLDivElement> {
+export interface CollapseProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     id: string;
     /**
      * Visual variant of the collapse component.
@@ -84,4 +85,4 @@ export interface CollapseProps extends CommonProps, Refable<HTMLDivElement> {
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {ReactElement} Collapse component
  */
-export declare const Collapse: ({ id, variant, initialExpanded, onToggle, label, children, className, headerClassName, headerAddon, "data-testid": dataTestId, animate, extraPadding, ref, }: CollapseProps) => ReactElement;
+export declare const Collapse: ({ id, variant, initialExpanded, onToggle, label, children, className, headerClassName, headerAddon, "data-testid": dataTestId, animate, extraPadding, style, ref, }: CollapseProps) => ReactElement;

package/src/components/CompletionStatusIndicator/CompletionStatusIndicator.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
-export interface CompletionStatusIndicatorProps extends CommonProps {
+import type { Styleable } from "../../common/Styleable";
+export interface CompletionStatusIndicatorProps extends CommonProps, Styleable {
     loading: boolean;
     success: boolean;
     error: boolean;

package/src/components/CopyableText/CopyableText.d.ts

@@ -1,7 +1,8 @@
 import { type ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
-export interface CopyableTextProps extends CommonProps, Refable<HTMLButtonElement> {
+export interface CopyableTextProps extends CommonProps, Styleable, Refable<HTMLButtonElement> {
     /**
      * The text displayed in the UI and copied to clipboard on click.
      */
@@ -64,4 +65,4 @@ export interface CopyableTextProps extends CommonProps, Refable<HTMLButtonElemen
  * @param {CopyableTextProps} props - The props for the CopyableText component
  * @returns {ReactElement} CopyableText component
  */
-export declare const CopyableText: ({ text, withIcon, size, copyLabel, copiedLabel, "data-testid": dataTestId, className, ref, }: CopyableTextProps) => ReactElement | null;
+export declare const CopyableText: ({ text, withIcon, size, copyLabel, copiedLabel, "data-testid": dataTestId, className, style, ref, }: CopyableTextProps) => ReactElement | null;

package/src/components/DetailsList/DetailsList.d.ts

@@ -1,8 +1,9 @@
 import { ReactElement } from "react";
+import { CommonProps } from "../../common/CommonProps";
 import { Refable } from "../../common/Refable";
-interface DetailsListProps extends Refable<HTMLDivElement> {
+import type { Styleable } from "../../common/Styleable";
+interface DetailsListProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     details: Array<string>;
-    className?: string;
     hasLink?: boolean;
 }
 /**
@@ -36,5 +37,5 @@ interface DetailsListProps extends Refable<HTMLDivElement> {
  * @param {DetailsListProps} props - The props for the DetailsList component
  * @returns {ReactElement} DetailsList component
  */
-export declare const DetailsList: ({ details, className, hasLink, ref }: DetailsListProps) => ReactElement;
+export declare const DetailsList: ({ details, className, "data-testid": dataTestId, hasLink, style, ref, }: DetailsListProps) => ReactElement;
 export {};

package/src/components/EmptyState/EmptyState.d.ts

@@ -1,5 +1,6 @@
 import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
 type EmptyStateImage = "WORKER_WITH_SIGN" | "ROAD_BLOCK" | "BUILDING_ERROR" | "WALL_CONSTRUCTION" | "PHONE_LOCK_SECURITY" | "SEARCH_DOCUMENT";
 type EmptyStateButtonAction = {
@@ -12,7 +13,7 @@ type EmptyStateButtonAction = {
         target?: string;
     };
 };
-export interface EmptyStateProps extends CommonProps, Refable<HTMLDivElement> {
+export interface EmptyStateProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * Description text to display below the image. Explains the empty state and guides the user.
      */
@@ -95,5 +96,5 @@ export interface EmptyStateProps extends CommonProps, Refable<HTMLDivElement> {
  * );
  * ```
  */
-export declare const EmptyState: ({ description, altText, image, customImageSrc, loading, "data-testid": dataTestId, className, primaryAction, secondaryAction, additionalHelpAction, }: EmptyStateProps) => ReactElement;
+export declare const EmptyState: ({ description, altText, image, customImageSrc, loading, "data-testid": dataTestId, className, primaryAction, secondaryAction, additionalHelpAction, style, ref, }: EmptyStateProps) => ReactElement;
 export {};

package/src/components/EmptyValue/EmptyValue.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { Refable } from "../../common/Refable";
-export type EmptyValueProps = CommonProps & Refable<HTMLDivElement>;
+import type { Styleable } from "../../common/Styleable";
+export type EmptyValueProps = CommonProps & Styleable & Refable<HTMLDivElement>;
 /**
  * EmptyValue renders a consistent dash symbol ("–") to represent missing, null, undefined, or not applicable values.
  * It is primarily used in tables and detail lists to maintain visual consistency when data is absent.
@@ -26,4 +27,4 @@ export type EmptyValueProps = CommonProps & Refable<HTMLDivElement>;
  * @param {EmptyValueProps} props - The props for the EmptyValue component
  * @returns {ReactElement} EmptyValue component
  */
-export declare const EmptyValue: ({ className, "data-testid": dataTestId }: EmptyValueProps) => ReactElement;
+export declare const EmptyValue: ({ className, "data-testid": dataTestId, style, ref }: EmptyValueProps) => ReactElement;

package/src/components/ExternalLink/ExternalLink.d.ts

@@ -1,7 +1,8 @@
 import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
-export interface ExternalLinkProps extends CommonProps, Refable<HTMLAnchorElement> {
+export interface ExternalLinkProps extends CommonProps, Styleable, Refable<HTMLAnchorElement> {
     /**
      * The URL to which users are redirected
      */
@@ -65,4 +66,4 @@ export interface ExternalLinkProps extends CommonProps, Refable<HTMLAnchorElemen
  * @param {ExternalLinkProps} props - The props for the ExternalLink component
  * @returns {ReactElement} ExternalLink component
  */
-export declare const ExternalLink: ({ rel, target, href, className, children, title, "data-testid": dataTestId, onClick, color, ref, }: ExternalLinkProps) => ReactElement;
+export declare const ExternalLink: ({ rel, target, href, className, children, title, "data-testid": dataTestId, onClick, color, style, ref, }: ExternalLinkProps) => ReactElement;

package/src/components/GridAreas/GridAreas.d.ts

@@ -1,11 +1,12 @@
 import { ReactNode } from "react";
+import type { Styleable } from "../../common/Styleable";
 import { GridAreasResult, SlotProps } from "./types";
 /**
  * Props for the GridAreas component.
  *
  * Spread the result from useGridAreas() onto this component.
  */
-export type GridAreasProps<TAreaName extends string> = GridAreasResult<TAreaName> & {
+export type GridAreasProps<TAreaName extends string> = GridAreasResult<TAreaName> & Styleable & {
     /** Additional CSS classes to apply to the grid container */
     className?: string;
     /** Render prop that receives the slots object */
@@ -92,4 +93,4 @@ export type GridAreasProps<TAreaName extends string> = GridAreasResult<TAreaName
  * }
  * ```
  */
-export declare function GridAreas<TAreaName extends string>({ slots, css, containerProps, validationRef, className, children, asChild, }: GridAreasProps<TAreaName>): ReactNode;
+export declare function GridAreas<TAreaName extends string>({ slots, css, containerProps, validationRef, className, style, children, asChild, }: GridAreasProps<TAreaName>): ReactNode;

package/src/components/Heading/Heading.d.ts

@@ -1,8 +1,9 @@
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
 export type HeadingVariant = "primary" | "secondary" | "tertiary" | "subtitle";
-export interface HeadingProps extends CommonProps, Refable<HTMLHeadingElement> {
+export interface HeadingProps extends CommonProps, Styleable, Refable<HTMLHeadingElement> {
     /**
      * Child Nodes.
      */

package/src/components/Highlight/Highlight.d.ts

@@ -1,8 +1,9 @@
 import { ReactElement, ReactNode, Ref } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Size } from "../../common/Size";
 export type HighlightSize = Extract<Size, "small" | "medium">;
-export interface HighlightProps extends CommonProps {
+export interface HighlightProps extends CommonProps, Styleable {
     /**
      * The size of the highlight. Allowed values: "small" (text-xs), "medium" (text-sm).
      */
@@ -57,6 +58,6 @@ export interface HighlightProps extends CommonProps {
  * @returns {ReactElement} Highlight component
  */
 export declare const Highlight: {
-    ({ className, "data-testid": dataTestId, children, size, color, ref, }: HighlightProps): ReactElement;
+    ({ className, "data-testid": dataTestId, children, size, color, style, ref, }: HighlightProps): ReactElement;
     displayName: string;
 };

package/src/components/HorizontalOverflowScroller/HorizontalOverflowScroller.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
-import { Styleable } from "../../common/Styleable";
 export interface HorizontalOverflowScrollerProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     children: ReactNode;
     /**
@@ -40,4 +40,4 @@ export interface HorizontalOverflowScrollerProps extends CommonProps, Styleable,
  * @param {HorizontalOverflowScrollerProps} props - The props for the HorizontalOverflowScroller component
  * @returns {ReactElement} HorizontalOverflowScroller component
  */
-export declare const HorizontalOverflowScroller: ({ className, "data-testid": dataTestId, children, onScrollStateChange, ref, }: HorizontalOverflowScrollerProps) => ReactElement;
+export declare const HorizontalOverflowScroller: ({ className, "data-testid": dataTestId, children, onScrollStateChange, style, ref, }: HorizontalOverflowScrollerProps) => ReactElement;

package/src/components/HorizontalOverflowScroller/OverflowIndicator.d.ts

@@ -1,7 +1,8 @@
 import { MouseEventHandler, ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 type OverflowDirection = "left" | "right";
-export interface OverflowIndicatorProps extends CommonProps {
+export interface OverflowIndicatorProps extends CommonProps, Styleable {
     /**
      * Direction of the overflow indicator
      */
@@ -18,5 +19,5 @@ export interface OverflowIndicatorProps extends CommonProps {
  * @param {OverflowIndicatorProps} props - The props for the component
  * @returns {ReactElement} OverflowIndicator component
  */
-export declare const OverflowIndicator: ({ className, "data-testid": dataTestId, direction, onClickScroll, }: OverflowIndicatorProps) => ReactElement;
+export declare const OverflowIndicator: ({ className, "data-testid": dataTestId, direction, onClickScroll, style, }: OverflowIndicatorProps) => ReactElement;
 export {};

package/src/components/Icon/Icon.d.ts

@@ -1,10 +1,11 @@
 import { ActivityColors, CriticalityColors, GeneralColors, IntentColors, RentalStatusColors, SitesColors, UtilizationColors } from "@trackunit/ui-design-tokens";
 import { IconName } from "@trackunit/ui-icons";
-import { CSSProperties, MouseEventHandler, ReactElement } from "react";
+import { MouseEventHandler, ReactElement } from "react";
 import { AriaProps } from "../../common/AriaProps";
 import { CommonProps } from "../../common/CommonProps";
 import { Refable } from "../../common/Refable";
 import { Size } from "../../common/Size";
+import type { Styleable } from "../../common/Styleable";
 export type IconColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors | UtilizationColors | SitesColors | RentalStatusColors;
 export declare const iconPalette: {
     ON_RENT: {
@@ -255,7 +256,7 @@ type IconPropsLarge = {
     type?: "solid" | "outline";
 };
 type DiscriminatedIconProps = IconPropsSmall | IconPropsMedium | IconPropsLarge;
-export type IconProps = DiscriminatedIconProps & CommonProps & AriaProps & Refable<HTMLSpanElement> & {
+export type IconProps = DiscriminatedIconProps & CommonProps & Styleable & AriaProps & Refable<HTMLSpanElement> & {
     /**
      * The name of the icon to be rendered.
      * HeroIconName and TrackunitIconName are supported.
@@ -280,12 +281,6 @@ export type IconProps = DiscriminatedIconProps & CommonProps & AriaProps & Refab
      */
     type?: "solid" | "outline" | "mini";
     onClick?: MouseEventHandler<HTMLSpanElement>;
-    /**
-     * Custom styles object used to override existing styles or add some extra styling
-     *
-     * @memberof IconProps
-     */
-    style?: CSSProperties;
     /**
      * If true, the icon will be rendered with the font size of the parent element.
      *

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

@@ -1,8 +1,9 @@
 import { ActivityColors, CriticalityColors, GeneralColors, IntentColors, RentalStatusColors, SitesColors, UtilizationColors } from "@trackunit/ui-design-tokens";
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
-export interface IndicatorProps extends CommonProps, Refable<HTMLDivElement> {
+export interface IndicatorProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * The icon to be rendered inside the indicator component
      */

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

@@ -1,7 +1,7 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
-import { Styleable } from "../../common/Styleable";
 export interface KPIProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * The title of the KPI

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

@@ -1,7 +1,7 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
-import { Styleable } from "../../common/Styleable";
 export interface KPISkeletonProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * The size of the KPI skeleton

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

@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
-import { Styleable } from "../../common/Styleable";
 export interface KPICardSkeletonProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * Whether to show an icon skeleton

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

@@ -1,8 +1,9 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../../../common/CommonProps";
 import { Refable } from "../../../../common/Refable";
+import type { Styleable } from "../../../../common/Styleable";
 import { KPICardProps } from "../../KPICard";
-export interface TrendIndicatorProps extends CommonProps, Refable<HTMLDivElement> {
+export interface TrendIndicatorProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * The absolute value
      */
@@ -30,4 +31,4 @@ export interface TrendIndicatorProps extends CommonProps, Refable<HTMLDivElement
  * @param {TrendIndicatorProps} props - The props for the TrendIndicator component
  * @returns {ReactElement} TrendIndicator component
  */
-export declare const TrendIndicator: ({ value, trend, label, icon, color, "data-testid": dataTestId, className, ref, }: TrendIndicatorProps) => ReactElement;
+export declare const TrendIndicator: ({ value, trend, label, icon, color, "data-testid": dataTestId, className, style, ref, }: TrendIndicatorProps) => ReactElement;

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

@@ -1,8 +1,9 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../../common/CommonProps";
 import { Refable } from "../../../common/Refable";
+import type { Styleable } from "../../../common/Styleable";
 import { TrendIndicatorProps } from "./TrendIndicator/TrendIndicator";
-export interface TrendIndicatorsProps extends CommonProps, Refable<HTMLSpanElement> {
+export interface TrendIndicatorsProps extends CommonProps, Styleable, Refable<HTMLSpanElement> {
     trends: Array<Omit<TrendIndicatorProps, "className" | "data-testid">>;
 }
 /**
@@ -11,4 +12,4 @@ export interface TrendIndicatorsProps extends CommonProps, Refable<HTMLSpanEleme
  * @param {TrendIndicatorsProps} props - The props for the TrendIndicators component
  * @returns {ReactElement} TrendIndicators component
  */
-export declare const TrendIndicators: ({ trends, "data-testid": dataTestId, className, ref, }: TrendIndicatorsProps) => ReactElement;
+export declare const TrendIndicators: ({ trends, "data-testid": dataTestId, className, style, ref, }: TrendIndicatorsProps) => ReactElement;

package/src/components/List/List.d.ts

@@ -1,8 +1,9 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { UseListResult, VirtualizationListItemProps } from "./useList";
 export type { VirtualizationListItemProps } from "./useList";
-export interface ListProps<TItem = unknown> extends CommonProps, UseListResult<TItem> {
+export interface ListProps<TItem = unknown> extends CommonProps, Styleable, UseListResult<TItem> {
     /**
      * Function that renders each list item. Must spread `listItemProps` onto your element
      * and use the provided `key` prop for React's reconciliation.
@@ -91,4 +92,4 @@ export interface ListProps<TItem = unknown> extends CommonProps, UseListResult<T
  * );
  * ```
  */
-export declare const List: <TItem = unknown>({ children, className, "data-testid": dataTestId, containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, separator, topSeparatorOnScroll, isAtTop, contentFillsContainer, scrollOffset: _scrollOffset, getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }: ListProps<TItem>) => ReactElement;
+export declare const List: <TItem = unknown>({ children, className, "data-testid": dataTestId, style, containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, separator, topSeparatorOnScroll, isAtTop, contentFillsContainer, scrollOffset: _scrollOffset, getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }: ListProps<TItem>) => ReactElement;

package/src/components/List/ListLoadingIndicator.d.ts

@@ -1,4 +1,5 @@
 import { ReactElement } from "react";
+import type { Styleable } from "../../common/Styleable";
 type NoneLoadingIndicator = {
     type: "none";
     component?: never;
@@ -63,9 +64,9 @@ type SkeletonLoadingIndicator = {
      */
     scrollLoadingCount?: number;
 };
-export type ListLoadingIndicatorProps = NoneLoadingIndicator | SpinnerLoadingIndicator | CustomLoadingIndicator | SkeletonLoadingIndicator;
+export type ListLoadingIndicatorProps = Styleable & (NoneLoadingIndicator | SpinnerLoadingIndicator | CustomLoadingIndicator | SkeletonLoadingIndicator);
 /**
  *
  */
-export declare const ListLoadingIndicator: ({ type, hasThumbnail, thumbnailShape, hasDescription, component, hasMeta, hasDetails, }: ListLoadingIndicatorProps) => ReactElement | null;
+export declare const ListLoadingIndicator: ({ type, hasThumbnail, thumbnailShape, hasDescription, component, hasMeta, hasDetails, style, }: ListLoadingIndicatorProps) => ReactElement | null;
 export {};

package/src/components/List/useList.d.ts

@@ -1,5 +1,6 @@
 import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
 import { MouseEventHandler, ReactElement, RefObject } from "react";
+import type { Styleable } from "../../common/Styleable";
 import { RelayPagination } from "../../hooks/useRelayPagination";
 import { ListLoadingIndicatorProps } from "./ListLoadingIndicator";
 declare const DEFAULT_LOADING_INDICATOR_CONFIG: Extract<ListLoadingIndicatorProps, {
@@ -11,7 +12,7 @@ declare const DEFAULT_LOADING_INDICATOR_CONFIG: Extract<ListLoadingIndicatorProp
  *
  * **Important**: Consumers must add a `key` prop to their list items using the index parameter.
  */
-export interface VirtualizationListItemProps {
+export interface VirtualizationListItemProps extends Styleable {
     /** CSS classes for list styling and separators */
     className: string;
     /** Element ref for virtualization measurement and setting positioning transform styles */

package/src/components/ListItem/ListItem.d.ts

@@ -3,6 +3,7 @@ import { MappedOmit } from "@trackunit/shared-utils";
 import { tailwindPalette, ThemeColors } from "@trackunit/ui-design-tokens";
 import { MouseEventHandler, ReactElement, ReactNode, Ref } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { cvaListItem } from "./ListItem.variants";
 type ThemeColorShades = `${keyof (typeof tailwindPalette)[keyof typeof tailwindPalette]}`;
 export type ListItemVirtualizationProps = {
@@ -15,7 +16,7 @@ export type ListItemVirtualizationProps = {
     /** @internal */
     className?: string;
 };
-export interface ListItemProps extends CommonProps, ListItemVirtualizationProps, MappedOmit<VariantProps<typeof cvaListItem>, "className"> {
+export interface ListItemProps extends CommonProps, Styleable, ListItemVirtualizationProps, MappedOmit<VariantProps<typeof cvaListItem>, "className"> {
     /**The main text line of the ListItem */
     title: string | ReactElement<CommonProps>;
     /**Optional description for the ListItem. Can be used for descriptions, metadata, or other important details. */