@texturehq/edges 1.17.0 → 1.18.0

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-import { Key, ValidationResult, BreadcrumbProps, BreadcrumbsProps, ButtonProps as ButtonProps$1, DateValue, CalendarProps as CalendarProps$1, CheckboxProps as CheckboxProps$1, CheckboxRenderProps, CheckboxGroupProps as CheckboxGroupProps$1, DisclosurePanelProps, DisclosureProps, DisclosureGroupProps, DateRangePickerProps as DateRangePickerProps$1, TextProps, FormProps, ListBoxProps as ListBoxProps$1, ListBoxItemProps, ModalOverlayProps, NumberFieldProps as NumberFieldProps$1, PopoverProps as PopoverProps$1, ProgressBarProps as ProgressBarProps$1, RadioProps, RadioGroupProps as RadioGroupProps$1, RangeCalendarProps as RangeCalendarProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps, TabsProps as TabsProps$2, TextFieldProps as TextFieldProps$1, TimeFieldProps as TimeFieldProps$1, TimeValue, TooltipProps as TooltipProps$1 } from 'react-aria-components';
+import { Key, ValidationResult, BreadcrumbProps, BreadcrumbsProps, ButtonProps as ButtonProps$1, DateValue, CalendarProps as CalendarProps$1, CheckboxProps as CheckboxProps$1, CheckboxRenderProps, CheckboxGroupProps as CheckboxGroupProps$1, DisclosurePanelProps, DisclosureProps, DisclosureGroupProps, TextProps, TextFieldProps as TextFieldProps$1, DateRangePickerProps as DateRangePickerProps$1, FormProps, ListBoxProps as ListBoxProps$1, ListBoxItemProps, ModalOverlayProps, NumberFieldProps as NumberFieldProps$1, PopoverProps as PopoverProps$1, ProgressBarProps as ProgressBarProps$1, RadioProps, RadioGroupProps as RadioGroupProps$1, RangeCalendarProps as RangeCalendarProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps, TabsProps as TabsProps$2, TimeFieldProps as TimeFieldProps$1, TimeValue, TooltipProps as TooltipProps$1 } from 'react-aria-components';
 export { BreadcrumbProps, BreadcrumbsProps, DialogTrigger } from 'react-aria-components';
 import * as React$1 from 'react';
-import React__default, { RefObject, HTMLAttributes, ReactNode, ComponentProps, CSSProperties, ComponentType, Component, ErrorInfo } from 'react';
-import { F as FieldValue, B as BooleanFormat, a as FormattedValue, C as CurrentFormat, D as DateFormat, b as DistanceFormat, E as EnergyFormat, c as CurrencyFormat, N as NumberFormat, P as PhoneFormat, d as PowerFormat, e as FormatterFunction, R as ResistanceFormat, T as TemperatureUnitString, f as TemperatureUnit, g as TemperatureFormat, h as TextFormat, V as VoltageFormat, i as FieldFormat, j as BaseDataPoint, I as Icon, k as BadgeProps, Y as YFormatType, l as TooltipData, m as IconName$3, n as DeviceState, G as GridState, o as ComponentFormatter, L as LayerSpec, p as CustomPinsSpec, q as GeoJsonLayerSpec, r as RasterLayerSpec, s as VectorLayerSpec, t as ClusteredVectorLayerSpec } from './colors-wUwMI6WH.js';
-export { A as ActionItem, v as ActionMenu, u as ActionMenuProps, x as AppShell, w as AppShellProps, z as Avatar, y as AvatarProps, H as Badge, aN as BaseFormat, au as ChartContext, aw as ChartMargin, O as CodeEditor, J as CodeEditorProps, K as CodeLanguage, M as CodeTheme, $ as ColorSpec, aK as ComponentFormatOptions, aV as CurrentUnit, aY as CustomFormat, S as DateField, Q as DateFieldProps, aR as DateFormatStyle, aX as DistanceUnit, ap as ENTITY_CONFIG, aS as EnergyUnit, an as EntityConfig, ao as EntityType, W as FileUpload, U as FileUploadProps, X as Heading, a7 as InteractiveMap, a0 as InteractiveMapProps, a1 as LayerFeature, a2 as LayerStyle, Z as Loader, _ as Logo, a8 as MAP_TYPES, a3 as MapPoint, ab as Meter, aa as MeterProps, aZ as MetricFormat, aQ as PercentageFormat, aT as PowerUnit, a4 as RenderType, aW as ResistanceUnit, ad as RichTextEditor, ac as RichTextEditorProps, af as SegmentOption, ag as SegmentedControl, ae as SegmentedControlProps, aj as SideNav, ah as SideNavItem, ai as SideNavProps, a9 as StaticMap, a5 as StaticMapProps, ak as TextLink, aO as TextTransform, aP as TextTruncatePosition, at as TooltipSeries, am as TopNav, al as TopNavProps, aU as VoltageUnit, aB as YFormatSettings, a6 as ZoomStops, a$ as activeDeviceStates, aC as clearColorCache, aD as createCategoryColorMap, ax as createXScale, ay as createYScale, az as defaultMargin, b0 as deviceStateLabels, a_ as deviceStateMetricFormats, aL as formatComponentValue, aE as getContrastingTextColor, aF as getDefaultChartColor, aG as getDefaultColors, b2 as getDeviceStateDisplayLabel, b2 as getDeviceStateLabel, aq as getEntityConfig, ar as getEntityIcon, as as getEntityLabel, b4 as getGridStateLabel, aH as getResolvedColor, aI as getThemeCategoricalColors, aA as getYFormatSettings, b3 as gridStateLabels, b1 as isActiveDeviceState, b1 as isActiveState, aJ as isLightColor, av as useChartContext, aM as useComponentFormatter } from './colors-wUwMI6WH.js';
+import React__default, { RefObject, HTMLAttributes, ReactNode, ComponentProps, ComponentType, CSSProperties, Component, ErrorInfo } from 'react';
+import { F as FieldValue, B as BooleanFormat, a as FormattedValue, C as CurrentFormat, D as DateFormat, b as DistanceFormat, E as EnergyFormat, c as CurrencyFormat, N as NumberFormat, P as PhoneFormat, d as PowerFormat, e as FormatterFunction, R as ResistanceFormat, T as TemperatureUnitString, f as TemperatureUnit, g as TemperatureFormat, h as TextFormat, V as VoltageFormat, i as FieldFormat, j as BaseDataPoint, I as Icon, k as BadgeProps, Y as YFormatType, l as TooltipData, m as IconName$3, n as DeviceState, G as GridState, o as ComponentFormatter, L as LayerSpec, p as CustomPinsSpec, q as GeoJsonLayerSpec, r as RasterLayerSpec, s as VectorLayerSpec, t as ClusteredVectorLayerSpec } from './colors-Kck1-4Zq.js';
+export { A as ActionItem, v as ActionMenu, u as ActionMenuProps, x as AppShell, w as AppShellProps, z as Avatar, y as AvatarProps, H as Badge, aN as BaseFormat, au as ChartContext, aw as ChartMargin, O as CodeEditor, J as CodeEditorProps, K as CodeLanguage, M as CodeTheme, $ as ColorSpec, aK as ComponentFormatOptions, aV as CurrentUnit, aY as CustomFormat, S as DateField, Q as DateFieldProps, aR as DateFormatStyle, aX as DistanceUnit, ap as ENTITY_CONFIG, aS as EnergyUnit, an as EntityConfig, ao as EntityType, W as FileUpload, U as FileUploadProps, X as Heading, a7 as InteractiveMap, a0 as InteractiveMapProps, a1 as LayerFeature, a2 as LayerStyle, Z as Loader, _ as Logo, a8 as MAP_TYPES, a3 as MapPoint, ab as Meter, aa as MeterProps, aZ as MetricFormat, aQ as PercentageFormat, aT as PowerUnit, a4 as RenderType, aW as ResistanceUnit, ad as RichTextEditor, ac as RichTextEditorProps, af as SegmentOption, ag as SegmentedControl, ae as SegmentedControlProps, aj as SideNav, ah as SideNavItem, ai as SideNavProps, a9 as StaticMap, a5 as StaticMapProps, ak as TextLink, aO as TextTransform, aP as TextTruncatePosition, at as TooltipSeries, am as TopNav, al as TopNavProps, aU as VoltageUnit, aB as YFormatSettings, a6 as ZoomStops, a$ as activeDeviceStates, aC as clearColorCache, aD as createCategoryColorMap, ax as createXScale, ay as createYScale, az as defaultMargin, b0 as deviceStateLabels, a_ as deviceStateMetricFormats, aL as formatComponentValue, aE as getContrastingTextColor, aF as getDefaultChartColor, aG as getDefaultColors, b2 as getDeviceStateDisplayLabel, b2 as getDeviceStateLabel, aq as getEntityConfig, ar as getEntityIcon, as as getEntityLabel, b4 as getGridStateLabel, aH as getResolvedColor, aI as getThemeCategoricalColors, aA as getYFormatSettings, b3 as gridStateLabels, b1 as isActiveDeviceState, b1 as isActiveState, aJ as isLightColor, av as useChartContext, aM as useComponentFormatter } from './colors-Kck1-4Zq.js';
 import { Virtualizer } from '@tanstack/react-virtual';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ScaleTime, ScaleLinear } from 'd3-scale';
@@ -1781,6 +1781,253 @@ declare namespace CollapseContent {
     var displayName: string;
 }
 
+interface InputStyleProps {
+    /** Whether the input is in an invalid state */
+    isInvalid?: boolean;
+    /** Whether the input is disabled */
+    isDisabled?: boolean;
+    /** Whether the input should have a transparent background */
+    transparent?: boolean;
+    /** The size variant of the input */
+    size?: Size;
+    /** Whether the input is currently focused */
+    isFocused?: boolean;
+    /** Additional CSS classes to apply */
+    className?: string;
+}
+interface BaseProps {
+    /** The size variant of the component */
+    size?: Size;
+    /** Additional CSS classes to apply */
+    className?: string;
+}
+interface BaseInputProps extends BaseProps {
+    /** Whether the input should have a transparent background */
+    transparent?: boolean;
+    /** Whether to show a clear button when the input has a value */
+    isClearable?: boolean;
+    /** Callback when the clear button is clicked */
+    onClear?: () => void;
+    /** Whether to show a search icon */
+    showSearchIcon?: boolean;
+}
+interface LabelProps extends BaseProps {
+    /** The label content */
+    children: React__default.ReactNode;
+    /** Optional tooltip text to show next to the label */
+    tooltip?: string;
+    /** Whether to show a required field indicator (*) */
+    isRequired?: boolean;
+    /** The ID of the input this label is associated with */
+    htmlFor?: string;
+}
+interface FieldErrorProps extends BaseProps {
+    /** The error message to display */
+    children: React__default.ReactNode;
+}
+interface InputProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size">, InputStyleProps {
+    /** The size variant of the input */
+    size?: Size;
+}
+interface DescriptionProps extends Omit<TextProps, "className">, BaseProps {
+    /** The description content */
+    children: React__default.ReactNode;
+}
+interface FieldGroupProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, "children">, InputStyleProps {
+    /** Whether any child of the group is focused */
+    isFocusWithin?: boolean;
+    /** Children can be either a ReactNode or a render function */
+    children?: React__default.ReactNode | ((props: InputStyleProps) => React__default.ReactNode);
+}
+/**
+ * Hook for managing input focus state
+ */
+declare function useInputFocus(): {
+    isFocused: boolean;
+    handleFocus: (e: React__default.FocusEvent<HTMLInputElement>, onFocus?: (e: React__default.FocusEvent<HTMLInputElement>) => void) => void;
+    handleBlur: (e: React__default.FocusEvent<HTMLInputElement>, onBlur?: (e: React__default.FocusEvent<HTMLInputElement>) => void) => void;
+};
+/**
+ * Wrapper component for input containers
+ */
+declare function InputWrapper({ children, className, }: {
+    children: React__default.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * Clear button component for inputs
+ */
+declare function ClearButton({ onClick, size, className, }: {
+    onClick: () => void;
+    size?: Size;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * Generates state-specific styles for inputs based on their current state
+ * (invalid, disabled, focused).
+ *
+ * State Priority:
+ * 1. Disabled (overrides all other states)
+ * 2. Invalid + Focused
+ * 3. Invalid
+ * 4. Focused
+ * 5. Default
+ *
+ * @example
+ * ```tsx
+ * const styles = getInputStateStyles({ isInvalid: true, isFocused: true });
+ * ```
+ */
+declare function getInputStateStyles(props: {
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    isFocused?: boolean;
+}): "border rounded-[var(--control-border-radius)] !outline-none  border-border-muted" | "border rounded-[var(--control-border-radius)] !outline-none  border-feedback-error-border shadow-[inset_0_0_0_1px_var(--color-feedback-error-border)]" | "border rounded-[var(--control-border-radius)] !outline-none  border-feedback-error-border" | "border rounded-[var(--control-border-radius)] !outline-none  border-border-focus shadow-[inset_0_0_0_1px_var(--color-border-focus)]" | "border rounded-[var(--control-border-radius)] !outline-none  border-border-default";
+/**
+ * Generates background styles based on the transparent and disabled props.
+ * Uses Tailwind classes for consistent styling across light/dark modes.
+ */
+declare function getInputBackgroundStyles(props: {
+    transparent?: boolean;
+    isDisabled?: boolean;
+}): "bg-transparent" | "bg-background-muted" | "bg-background-input";
+/**
+ * Generates the complete set of base styles for input components.
+ * This includes state styles, background, sizing, and custom classes.
+ *
+ * @example
+ * ```tsx
+ * const styles = getInputBaseStyles({
+ *   isInvalid: formState.hasError,
+ *   isDisabled: isLoading,
+ *   size: "md"
+ * });
+ * ```
+ */
+declare function getInputBaseStyles(props: InputStyleProps): string;
+/**
+ * Generates styles for grouped form elements (like input with buttons)
+ *
+ * @example
+ * ```tsx
+ * <div className={getFieldGroupStyles({ size: "md" })}>
+ *   <Input />
+ *   <Button>Submit</Button>
+ * </div>
+ * ```
+ */
+declare function getFieldGroupStyles(props: FieldGroupProps): string;
+/**
+ * Label component for form fields. Supports tooltips and required field indicators.
+ *
+ * @example
+ * ```tsx
+ * <Label
+ *   htmlFor="email"
+ *   tooltip="Enter your work email"
+ *   isRequired
+ * >
+ *   Email Address
+ * </Label>
+ * ```
+ */
+declare function Label({ children, size, tooltip, isRequired, className, htmlFor, }: LabelProps): react_jsx_runtime.JSX.Element;
+/**
+ * Description component for providing additional context about a form field.
+ *
+ * @example
+ * ```tsx
+ * <Description>Must be at least 8 characters</Description>
+ * ```
+ */
+declare function Description({ size, className, children, ...props }: DescriptionProps): react_jsx_runtime.JSX.Element;
+/**
+ * Error message component for form fields. Automatically handles
+ * accessibility attributes for screen readers.
+ *
+ * @example
+ * ```tsx
+ * {hasError && <FieldError>This field is required</FieldError>}
+ * ```
+ */
+declare function FieldError({ children, size, className }: FieldErrorProps): react_jsx_runtime.JSX.Element;
+/**
+ * Base input component with consistent styling and state handling.
+ * Extends the native input element with our custom styling system.
+ *
+ * @example
+ * ```tsx
+ * <Input
+ *   size="md"
+ *   isInvalid={hasError}
+ *   isDisabled={isLoading}
+ *   transparent={false}
+ * />
+ * ```
+ */
+declare function Input({ size, isInvalid, isDisabled, isFocused, transparent, className, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+/**
+ * Container for grouping form elements with consistent styling.
+ * Useful for creating compound components like input with buttons.
+ *
+ * @example
+ * ```tsx
+ * <FieldGroup>
+ *   <Input placeholder="Search..." />
+ *   <Button>Search</Button>
+ * </FieldGroup>
+ * ```
+ */
+declare function FieldGroup(props: FieldGroupProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * ColorField Props
+ */
+interface ColorFieldProps extends Omit<TextFieldProps$1, "isRequired" | "size" | "className">, BaseInputProps {
+    /** Label text displayed above the color field */
+    label?: string;
+    /** Helper text displayed below the color field */
+    description?: string;
+    /** Error message or function to generate error message */
+    errorMessage?: string | ((validation: ValidationResult) => string);
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Optional tooltip text to show next to the label */
+    tooltip?: string;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Additional CSS classes to apply */
+    className?: string;
+    /** Validation result object */
+    validationResult?: ValidationResult;
+    /** The current hex color value (controlled) */
+    value?: string;
+    /** Default hex color value (uncontrolled) */
+    defaultValue?: string;
+    /** Callback when the color changes */
+    onChange?: (color: string) => void;
+    /** Whether to show the color swatch preview */
+    showColorSwatch?: boolean;
+}
+/**
+ * ColorField Component
+ *
+ * A form control that allows users to input hex color codes manually
+ * or select colors using a visual color picker. Integrates seamlessly
+ * with the Edges design system.
+ *
+ * @example
+ * ```tsx
+ * <ColorField
+ *   label="Brand Color"
+ *   value={color}
+ *   onChange={setColor}
+ *   description="Choose your primary brand color"
+ * />
+ * ```
+ */
+declare function ColorField({ label, description, errorMessage, size, tooltip, isRequired, transparent, className, validationResult, value: controlledValue, defaultValue, onChange, placeholder, showColorSwatch, ...props }: ColorFieldProps): react_jsx_runtime.JSX.Element;
+
 interface ConfirmProps {
     /**
      * Whether the confirm dialog is open
@@ -1875,35 +2122,244 @@ interface ConnectionStatusBadgeProps extends Omit<BadgeProps, "variant" | "child
  */
 declare function ConnectionStatusBadge({ isConnected, connectedAt, disconnectedAt, showTimestamp, isLoading, size, shape, ...badgeProps }: ConnectionStatusBadgeProps): react_jsx_runtime.JSX.Element;
 
-interface CopyToClipboardProps {
-    /**
-     * The value to copy to clipboard. If not provided, will use the text content of children
-     */
-    value?: string;
-    /**
-     * The content to display
+interface ContactCardProps {
+    /** First name */
+    firstName: string;
+    /** Last name */
+    lastName: string;
+    /** Email address (optional) */
+    email?: string;
+    /** Phone number (optional) */
+    phone?: string;
+    /** Avatar image URL (optional) */
+    avatarUrl?: string;
+    /** Link to contact detail page (optional) */
+    href?: string;
+    /** Custom link component (e.g., Next.js Link) */
+    LinkComponent?: ComponentType<{
+        href: string;
+        className?: string;
+        children: React.ReactNode;
+    }>;
+    /** Card variant */
+    variant?: "outlined" | "elevated" | "filled" | "ghost";
+    /** Show email address
+     * @default true
      */
-    children: React__default.ReactNode;
-    /**
-     * Optional className for the container
+    showEmail?: boolean;
+    /** Show phone number
+     * @default false
      */
+    showPhone?: boolean;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Additional classes for the card */
     className?: string;
-    /**
-     * Size of the copy button, defaults to "sm"
-     */
-    size?: "sm" | "md";
-}
-declare function CopyToClipboard({ value, children, className, size }: CopyToClipboardProps): react_jsx_runtime.JSX.Element;
-
-interface AreaSeriesProps {
-    data: BaseDataPoint[];
-    color?: string;
-    label?: string;
-    categoryColors?: Record<string, string>;
-    categoryLabels?: Record<string, string>;
+    /** Additional classes for the card content (for padding control, etc.) */
+    contentClassName?: string;
 }
 /**
- * AreaSeries
+ * ContactCard
+ *
+ * A card component for displaying contact information with avatar.
+ * Includes name, optional email, and optional phone number.
+ *
+ * @example
+ * ```tsx
+ * <ContactCard
+ *   firstName="John"
+ *   lastName="Doe"
+ *   email="john.doe@example.com"
+ *   phone="+1 (555) 123-4567"
+ *   showEmail
+ *   showPhone
+ *   href="/contacts/123"
+ * />
+ * ```
+ */
+declare function ContactCard({ firstName, lastName, email, phone, avatarUrl, href, LinkComponent, variant, showEmail, showPhone, isLoading, className, contentClassName, }: ContactCardProps): react_jsx_runtime.JSX.Element;
+
+type SortDirection = "asc" | "desc";
+type CellAlignment = "left" | "center" | "right";
+type TableDensity = "compact" | "default" | "relaxed";
+type CellEmphasis = "strong" | "high" | "normal" | "low";
+type LinkBehavior = "none" | "hover" | "visible";
+type TableLayout = "auto" | "fixed" | "responsive";
+type TableWidth = "full" | "auto" | "contained";
+type MobileRenderer = "auto" | "cards" | "custom" | "none";
+type MobileBreakpoint = "sm" | "md" | "lg" | "xl";
+interface SortConfig {
+    columnId: string;
+    direction: SortDirection;
+}
+interface CellContext {
+    isLoading: boolean;
+    isSelected?: boolean;
+    isHovered?: boolean;
+    rowIndex: number;
+    columnIndex: number;
+    density: TableDensity;
+}
+interface CellComponentProps<T = any> {
+    value: any;
+    row: T;
+    context: CellContext;
+    [key: string]: any;
+}
+type CellComponent<T = any> = ComponentType<CellComponentProps<T>>;
+interface MobileConfig {
+    priority?: 1 | 2 | 3;
+    format?: "primary" | "secondary" | "badge" | "inline";
+    label?: boolean;
+    icon?: string;
+}
+interface Column<T> {
+    id: string;
+    label: string;
+    accessor?: keyof T | ((row: T) => any);
+    align?: CellAlignment;
+    width?: string | number;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    flex?: number;
+    cell?: CellComponent<T>;
+    cellProps?: Record<string, any> | ((value: any, row: T) => Record<string, any>);
+    render?: (value: any, row: T, context: CellContext) => ReactNode;
+    sortable?: boolean;
+    mobile?: MobileConfig | false;
+    popover?: string | ((value: unknown, row: T) => ReactNode) | {
+        content: string | ((value: unknown, row: T) => ReactNode);
+        placement?: "top" | "bottom" | "left" | "right";
+        showArrow?: boolean;
+        trigger?: "hover" | "click";
+    };
+}
+interface DataTableProps<T> {
+    columns: Column<T>[];
+    data: T[];
+    className?: string;
+    density?: TableDensity;
+    width?: TableWidth;
+    height?: string | number;
+    maxHeight?: string | number;
+    layout?: TableLayout;
+    mobileRenderer?: MobileRenderer;
+    customMobileRowRender?: (row: T, index: number) => ReactNode;
+    mobileBreakpoint?: MobileBreakpoint;
+    isLoading?: boolean;
+    loadingState?: LoadingState;
+    loadingRowCount?: number;
+    onLoadMore?: () => void | Promise<void>;
+    hasMore?: boolean;
+    enableVirtualization?: boolean;
+    estimatedRowHeight?: number;
+    loadingIndicator?: ReactNode;
+    stickyHeader?: boolean;
+    onRowClick?: (row: T) => void;
+    getRowId?: (row: T) => string;
+    hideHeader?: boolean;
+    onSort?: (sortConfig: SortConfig | null) => void;
+    "aria-label"?: string;
+}
+
+interface ContactMetaDisplayProps {
+    /** First name */
+    firstName: string;
+    /** Last name */
+    lastName: string;
+    /** Email address (optional) */
+    email?: string;
+    /** Avatar image URL (optional) */
+    avatarUrl?: string;
+    /** Layout variant - stacked (vertical) or inline (horizontal) */
+    layout?: "stacked" | "inline";
+    /** Size variant */
+    size?: "xs" | "sm" | "md" | "lg";
+    /** Link to contact detail page (optional) */
+    href?: string;
+    /** Custom link component (e.g., Next.js Link) */
+    LinkComponent?: ComponentType<{
+        href: string;
+        className?: string;
+        children: React.ReactNode;
+    }>;
+    /** Link variant for the name */
+    linkVariant?: "default" | "brand" | "muted" | "unstyled";
+    /** Text emphasis level - "strong"/"high" for bold, "normal" for regular, "low" for muted */
+    emphasis?: CellEmphasis;
+    /** Show email address (only for stacked layout) */
+    showEmail?: boolean;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Additional classes */
+    className?: string;
+}
+/**
+ * ContactMetaDisplay
+ *
+ * Reusable component for displaying contact information with avatar.
+ * Supports stacked and inline layouts with size variants and optional linking.
+ *
+ * **Stacked layout**: Avatar, name above, optional email below
+ * **Inline layout**: Avatar + name only (horizontal)
+ *
+ * Use this component directly in cards, lists, or other layouts.
+ * For DataTable cells, use ContactMetaCell which wraps this component.
+ *
+ * @example
+ * ```tsx
+ * // Stacked layout (default)
+ * <ContactMetaDisplay
+ *   firstName="John"
+ *   lastName="Doe"
+ *   email="john@example.com"
+ *   layout="stacked"
+ *   size="md"
+ *   showEmail
+ *   href="/contacts/123"
+ * />
+ *
+ * // Inline layout
+ * <ContactMetaDisplay
+ *   firstName="John"
+ *   lastName="Doe"
+ *   layout="inline"
+ *   size="sm"
+ *   href="/contacts/123"
+ * />
+ * ```
+ */
+declare function ContactMetaDisplay({ firstName, lastName, email, avatarUrl, layout, size, href, LinkComponent, linkVariant, emphasis, showEmail, isLoading, className, }: ContactMetaDisplayProps): react_jsx_runtime.JSX.Element;
+
+interface CopyToClipboardProps {
+    /**
+     * The value to copy to clipboard. If not provided, will use the text content of children
+     */
+    value?: string;
+    /**
+     * The content to display
+     */
+    children: React__default.ReactNode;
+    /**
+     * Optional className for the container
+     */
+    className?: string;
+    /**
+     * Size of the copy button, defaults to "sm"
+     */
+    size?: "sm" | "md";
+}
+declare function CopyToClipboard({ value, children, className, size }: CopyToClipboardProps): react_jsx_runtime.JSX.Element;
+
+interface AreaSeriesProps {
+    data: BaseDataPoint[];
+    color?: string;
+    label?: string;
+    categoryColors?: Record<string, string>;
+    categoryLabels?: Record<string, string>;
+}
+/**
+ * AreaSeries
  *
  * Chart component for rendering area charts with gradient fill.
  * Displays data as a filled area with optional line path, supporting animations and custom colors.
@@ -2441,83 +2897,6 @@ interface SearchControlProps {
  */
 declare function SearchControl({ value, onChange, onClear, placeholder, size, className, }: SearchControlProps): react_jsx_runtime.JSX.Element;
 
-type SortDirection = "asc" | "desc";
-type CellAlignment = "left" | "center" | "right";
-type TableDensity = "compact" | "default" | "relaxed";
-type CellEmphasis = "strong" | "high" | "normal" | "low";
-type LinkBehavior = "none" | "hover" | "visible";
-type TableLayout = "auto" | "fixed" | "responsive";
-type TableWidth = "full" | "auto" | "contained";
-type MobileRenderer = "auto" | "cards" | "custom" | "none";
-type MobileBreakpoint = "sm" | "md" | "lg" | "xl";
-interface SortConfig {
-    columnId: string;
-    direction: SortDirection;
-}
-interface CellContext {
-    isLoading: boolean;
-    isSelected?: boolean;
-    isHovered?: boolean;
-    rowIndex: number;
-    columnIndex: number;
-    density: TableDensity;
-}
-interface CellComponentProps<T = any> {
-    value: any;
-    row: T;
-    context: CellContext;
-    [key: string]: any;
-}
-type CellComponent<T = any> = ComponentType<CellComponentProps<T>>;
-interface MobileConfig {
-    priority?: 1 | 2 | 3;
-    format?: "primary" | "secondary" | "badge" | "inline";
-    label?: boolean;
-    icon?: string;
-}
-interface Column<T> {
-    id: string;
-    label: string;
-    accessor?: keyof T | ((row: T) => any);
-    align?: CellAlignment;
-    width?: string | number;
-    minWidth?: string | number;
-    maxWidth?: string | number;
-    flex?: number;
-    cell?: CellComponent<T>;
-    cellProps?: Record<string, any> | ((value: any, row: T) => Record<string, any>);
-    render?: (value: any, row: T, context: CellContext) => ReactNode;
-    sortable?: boolean;
-    mobile?: MobileConfig | false;
-}
-interface DataTableProps<T> {
-    columns: Column<T>[];
-    data: T[];
-    className?: string;
-    density?: TableDensity;
-    width?: TableWidth;
-    height?: string | number;
-    maxHeight?: string | number;
-    layout?: TableLayout;
-    mobileRenderer?: MobileRenderer;
-    customMobileRowRender?: (row: T, index: number) => ReactNode;
-    mobileBreakpoint?: MobileBreakpoint;
-    isLoading?: boolean;
-    loadingState?: LoadingState;
-    loadingRowCount?: number;
-    onLoadMore?: () => void | Promise<void>;
-    hasMore?: boolean;
-    enableVirtualization?: boolean;
-    estimatedRowHeight?: number;
-    loadingIndicator?: ReactNode;
-    stickyHeader?: boolean;
-    onRowClick?: (row: T) => void;
-    getRowId?: (row: T) => string;
-    hideHeader?: boolean;
-    onSort?: (sortConfig: SortConfig | null) => void;
-    "aria-label"?: string;
-}
-
 /**
  * Action configuration for ActionCell
  */
@@ -2543,6 +2922,81 @@ interface ActionCellProps<T = any> extends CellComponentProps<T> {
  */
 declare function ActionCell<T = any>({ row, context, actions, align, size, }: ActionCellProps<T>): react_jsx_runtime.JSX.Element | null;
 
+interface BadgeCellProps<T = any> extends CellComponentProps<T> {
+    /** The variant to use - can be static or a function that maps value to variant */
+    variant?: BadgeProps["variant"] | ((value: any, row: T) => BadgeProps["variant"]);
+    /** Optional label override - if not provided, will use the value */
+    label?: string | ((value: any, row: T) => string);
+    /** Badge size */
+    size?: BadgeProps["size"];
+    /** Badge shape */
+    shape?: BadgeProps["shape"];
+    /** Whether to show a dot indicator */
+    dot?: boolean | ((value: any, row: T) => boolean);
+    /** Position of the dot */
+    dotPosition?: BadgeProps["dotPosition"];
+    /** Whether the dot should pulse */
+    dotPulse?: boolean | ((value: any, row: T) => boolean);
+    /** Alignment of the cell content */
+    align?: "left" | "center" | "right";
+    /** Text to show for null/undefined values */
+    emptyText?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * BadgeCell
+ *
+ * A flexible DataTable cell component for displaying any value as a Badge.
+ * Supports mapping values to semantic variants (success, error, warning, etc.)
+ * and customizing the display label.
+ *
+ * @example
+ * ```tsx
+ * // Simple usage with static variant
+ * {
+ *   id: "status",
+ *   label: "Status",
+ *   accessor: "status",
+ *   cell: BadgeCell,
+ *   cellProps: {
+ *     variant: "success",
+ *   }
+ * }
+ *
+ * // Map value to variant
+ * {
+ *   id: "status",
+ *   label: "Status",
+ *   accessor: "status",
+ *   cell: BadgeCell,
+ *   cellProps: {
+ *     variant: (value) => {
+ *       if (value === "active") return "success";
+ *       if (value === "error") return "error";
+ *       if (value === "pending") return "warning";
+ *       return "neutral";
+ *     },
+ *     label: (value) => value.toUpperCase(),
+ *   }
+ * }
+ *
+ * // With dot indicator
+ * {
+ *   id: "online",
+ *   label: "Status",
+ *   accessor: "onlineStatus",
+ *   cell: BadgeCell,
+ *   cellProps: {
+ *     variant: (value) => value === "online" ? "success" : "neutral",
+ *     dot: true,
+ *     dotPulse: (value) => value === "online",
+ *   }
+ * }
+ * ```
+ */
+declare function BadgeCell<T = any>({ value, row, context, variant, label, size, shape, dot, dotPosition, dotPulse, align, emptyText, className, }: BadgeCellProps<T>): react_jsx_runtime.JSX.Element;
+
 interface BooleanCellProps<T = any> extends CellComponentProps<T> {
     format?: "icon" | "text" | "badge";
     trueText?: string;
@@ -2562,13 +3016,73 @@ interface BooleanCellProps<T = any> extends CellComponentProps<T> {
  */
 declare function BooleanCell<T = any>({ value, context, format, trueText, falseText, trueIcon, falseIcon, showFalse, align, emphasis, className, }: BooleanCellProps<T>): react_jsx_runtime.JSX.Element | null;
 
-/**
- * Get alignment classes for cell content
- */
-declare function getCellAlignmentClasses(align?: CellAlignment): string;
-/**
- * Get text styling based on emphasis level
- */
+interface ContactMetaCellProps<T = unknown> extends CellComponentProps<T> {
+    /** First name (can be a function to extract from row) */
+    firstName: string | ((row: T) => string);
+    /** Last name (can be a function to extract from row) */
+    lastName: string | ((row: T) => string);
+    /** Email address (optional, can be a function to extract from row) */
+    email?: string | ((row: T) => string | undefined);
+    /** Avatar image URL (optional, can be a function to extract from row) */
+    avatarUrl?: string | ((row: T) => string | undefined);
+    /** Layout variant - stacked (vertical) or inline (horizontal) */
+    layout?: "stacked" | "inline";
+    /** Size variant */
+    size?: "xs" | "sm" | "md" | "lg";
+    /** Link to contact detail page (optional) */
+    href?: string | ((row: T) => string);
+    /** Custom link component (e.g., Next.js Link) */
+    LinkComponent?: ComponentType<{
+        href: string;
+        className?: string;
+        children: React.ReactNode;
+    }>;
+    /** Link variant for the name */
+    linkVariant?: "default" | "brand" | "muted" | "unstyled";
+    /** Text emphasis level - "strong"/"high" for bold, "normal" for regular, "low" for muted */
+    emphasis?: CellEmphasis;
+    /** Show email address (only for stacked layout) */
+    showEmail?: boolean;
+    /** Alignment */
+    align?: "left" | "center" | "right";
+    /** Additional classes */
+    className?: string;
+}
+/**
+ * ContactMetaCell
+ *
+ * DataTable cell component for displaying contact information with avatar.
+ * Wraps ContactMetaDisplay for use in DataTable columns with layout="stacked" by default.
+ *
+ * @example
+ * ```tsx
+ * // In DataTable column definition
+ * {
+ *   id: "contact",
+ *   label: "Contact",
+ *   cell: ContactMetaCell,
+ *   cellProps: {
+ *     firstName: (row) => row.firstName,
+ *     lastName: (row) => row.lastName,
+ *     email: (row) => row.email,
+ *     avatarUrl: (row) => row.avatarUrl,
+ *     href: (row) => `/contacts/${row.id}`,
+ *     showEmail: true,
+ *     layout: "stacked",
+ *     size: "sm"
+ *   }
+ * }
+ * ```
+ */
+declare function ContactMetaCell<T = unknown>({ row, context, firstName, lastName, email, avatarUrl, layout, size, href, LinkComponent, linkVariant, showEmail, emphasis, align, className, }: ContactMetaCellProps<T>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Get alignment classes for cell content
+ */
+declare function getCellAlignmentClasses(align?: CellAlignment): string;
+/**
+ * Get text styling based on emphasis level
+ */
 declare function getCellTextClasses(emphasis?: CellEmphasis, isLink?: boolean): string;
 /**
  * Get container classes for cells
@@ -2649,12 +3163,24 @@ interface DeviceMetaCellProps<T = unknown> extends CellComponentProps<T> {
     deviceType: DeviceType | ((row: T) => DeviceType);
     /** URL to manufacturer logo (optional, can be a function to extract from row) */
     logoUrl?: string | ((row: T) => string | undefined);
+    /** Layout variant - stacked (vertical) or inline (horizontal) */
+    layout?: "stacked" | "inline";
+    /** Size variant */
+    size?: "xs" | "sm" | "md" | "lg";
     /** Link to device detail page (optional) */
     href?: string | ((row: T) => string);
+    /** Custom link component (e.g., Next.js Link) */
+    LinkComponent?: ComponentType<{
+        href: string;
+        className?: string;
+        children: React.ReactNode;
+    }>;
     /** Link variant for the manufacturer name */
     linkVariant?: "default" | "brand" | "muted" | "unstyled";
-    /** Show device type icon next to model name */
+    /** Show device type icon next to model name (stacked) or hide logo (inline) */
     showDeviceTypeIcon?: boolean;
+    /** Show logo in stacked layout (can be hidden for compact view) */
+    showLogo?: boolean;
     /** Alignment */
     align?: "left" | "center" | "right";
     /** Additional classes */
@@ -2664,8 +3190,7 @@ interface DeviceMetaCellProps<T = unknown> extends CellComponentProps<T> {
  * DeviceMetaCell
  *
  * DataTable cell component for displaying device metadata (manufacturer, model, logo).
- * Displays manufacturer logo (with device type icon fallback) and device information.
- * Manufacturer name can be linked to device detail page.
+ * Wraps DeviceMetaDisplay for use in DataTable columns with layout="stacked" by default.
  *
  * @example
  * ```tsx
@@ -2680,12 +3205,13 @@ interface DeviceMetaCellProps<T = unknown> extends CellComponentProps<T> {
  *     deviceType: (row) => row.type,
  *     logoUrl: (row) => row.manufacturerProfile?.logo,
  *     href: (row) => `/devices/${row.id}`,
- *     linkVariant: "default"
+ *     layout: "stacked",
+ *     size: "sm"
  *   }
  * }
  * ```
  */
-declare function DeviceMetaCell<T = unknown>({ row, context, manufacturer, model, deviceType, logoUrl, href, linkVariant, showDeviceTypeIcon, align, className, }: DeviceMetaCellProps<T>): react_jsx_runtime.JSX.Element;
+declare function DeviceMetaCell<T = unknown>({ row, context, manufacturer, model, deviceType, logoUrl, layout, size, href, LinkComponent, linkVariant, showDeviceTypeIcon, showLogo, emphasis, align, className, }: DeviceMetaCellProps<T>): react_jsx_runtime.JSX.Element;
 
 interface DeviceStateCellProps<T = any> extends Omit<CellComponentProps<T>, "value"> {
     /** The device state value */
@@ -2801,6 +3327,57 @@ interface FormattedCellProps<T = any> extends CellComponentProps<T> {
  */
 declare function FormattedCell<T = any>({ value, row, context, formatter, align, emphasis, href, linkBehavior, className, emptyText, emptyClassName, }: FormattedCellProps<T>): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
 
+interface HorizontalBarCellProps extends CellComponentProps {
+    value: number;
+    min: number;
+    max: number;
+    color?: string | "auto";
+    backgroundColor?: string | "none";
+    colorScale?: {
+        type: "sequential" | "diverging";
+        scheme?: string;
+        center?: number;
+    };
+    showLabel?: boolean;
+    formatLabel?: (value: number) => string;
+    height?: number;
+    minWidth?: number;
+    segments?: number;
+    segmentGap?: number;
+}
+/**
+ * HorizontalBarCell
+ *
+ * Horizontal comparison bar with automatic color scaling.
+ * Perfect for showing relative values with color-coded performance indicators.
+ * Supports segmented "power meter" style with optional gradient coloring.
+ */
+declare const HorizontalBarCell: React__default.NamedExoticComponent<HorizontalBarCellProps>;
+
+type MiniBarDatum = (BaseDataPoint & {
+    category?: string;
+}) | {
+    x: Date;
+    y: number;
+    category?: string;
+};
+interface MiniBarCellProps extends CellComponentProps {
+    data?: MiniBarDatum[];
+    color?: string;
+    categoryColors?: Record<string, string>;
+    categoryLabels?: Record<string, string>;
+    width?: number;
+    height?: number;
+}
+/**
+ * MiniBarCell
+ *
+ * Mini vertical bar chart for table cells.
+ * Uses the same BaseDataPoint[] data structure as full BarSeries components.
+ * Supports category-based coloring for conditional visualization.
+ */
+declare const MiniBarCell: React__default.NamedExoticComponent<MiniBarCellProps>;
+
 interface NumberCellProps<T = any> extends CellComponentProps<T> {
     format?: "number" | "currency" | "percent" | "compact";
     decimals?: number;
@@ -2823,6 +3400,29 @@ interface NumberCellProps<T = any> extends CellComponentProps<T> {
  */
 declare function NumberCell<T = any>({ value, row, context, format, decimals, prefix, suffix, emptyText, align, emphasis, href, linkBehavior, showPositiveSign, colorCode, className, }: NumberCellProps<T>): react_jsx_runtime.JSX.Element;
 
+interface PercentBarCellProps extends CellComponentProps {
+    value: number;
+    showLabel?: boolean;
+    color?: string | "auto";
+    backgroundColor?: string | "none";
+    height?: number;
+    segments?: number;
+    segmentGap?: number;
+    colorScale?: {
+        type: "sequential" | "diverging";
+        scheme?: string;
+        center?: number;
+    };
+}
+/**
+ * PercentBarCell
+ *
+ * Horizontal bar showing percentage (0-100%).
+ * Perfect for battery charge, progress indicators, and utilization metrics.
+ * Supports segmented "LED meter" style with optional gradient coloring.
+ */
+declare const PercentBarCell: React__default.NamedExoticComponent<PercentBarCellProps>;
+
 interface SelectCellProps<T = any> extends CellComponentProps<T> {
     isSelected?: boolean;
     onSelect?: (row: T, checked: boolean) => void;
@@ -2837,6 +3437,82 @@ interface SelectCellProps<T = any> extends CellComponentProps<T> {
  */
 declare function SelectCell<T = any>({ row, context, isSelected, onSelect, isDisabled, align, }: SelectCellProps<T>): react_jsx_runtime.JSX.Element;
 
+interface SiteMetaCellProps<T = unknown> extends CellComponentProps<T> {
+    /** Street address (can be a function to extract from row) */
+    streetAddress: string | ((row: T) => string);
+    /** City name (optional, can be a function to extract from row) */
+    city?: string | ((row: T) => string | undefined);
+    /** State/province (optional, can be a function to extract from row) */
+    state?: string | ((row: T) => string | undefined);
+    /** Postal/ZIP code (optional, can be a function to extract from row) */
+    postalCode?: string | ((row: T) => string | undefined);
+    /** Layout variant - stacked (vertical) or inline (horizontal) */
+    layout?: "stacked" | "inline";
+    /** Size variant */
+    size?: "xs" | "sm" | "md" | "lg";
+    /** Link to site detail page (optional) */
+    href?: string | ((row: T) => string);
+    /** Custom link component (e.g., Next.js Link) */
+    LinkComponent?: ComponentType<{
+        href: string;
+        className?: string;
+        children: React.ReactNode;
+    }>;
+    /** Link variant for the street address */
+    linkVariant?: "default" | "brand" | "muted" | "unstyled";
+    /** Text emphasis level - "strong"/"high" for bold, "normal" for regular, "low" for muted */
+    emphasis?: CellEmphasis;
+    /** Alignment */
+    align?: "left" | "center" | "right";
+    /** Additional classes */
+    className?: string;
+}
+/**
+ * SiteMetaCell
+ *
+ * DataTable cell component for displaying site location information.
+ * Wraps SiteMetaDisplay for use in DataTable columns with layout="stacked" by default.
+ *
+ * @example
+ * ```tsx
+ * // In DataTable column definition
+ * {
+ *   id: "site",
+ *   label: "Site",
+ *   cell: SiteMetaCell,
+ *   cellProps: {
+ *     streetAddress: (row) => row.location.streetOne,
+ *     city: (row) => row.location.city,
+ *     state: (row) => row.location.state,
+ *     postalCode: (row) => row.location.postalCode,
+ *     href: (row) => `/sites/${row.id}`,
+ *     layout: "stacked",
+ *     size: "sm"
+ *   }
+ * }
+ * ```
+ */
+declare function SiteMetaCell<T = unknown>({ row, context, streetAddress, city, state, postalCode, layout, size, href, LinkComponent, linkVariant, emphasis, align, className, }: SiteMetaCellProps<T>): react_jsx_runtime.JSX.Element;
+
+interface SparklineCellProps extends CellComponentProps {
+    data?: BaseDataPoint[];
+    type?: "line" | "area" | "both";
+    color?: string;
+    strokeWidth?: number;
+    categoryColors?: Record<string, string>;
+    categoryLabels?: Record<string, string>;
+    width?: number;
+    height?: number;
+}
+/**
+ * SparklineCell
+ *
+ * Mini line and/or area chart for time series previews in table cells.
+ * Uses the same BaseDataPoint[] data structure as full LineSeries/AreaSeries components.
+ * Supports category-based coloring for conditional visualization.
+ */
+declare const SparklineCell: React__default.NamedExoticComponent<SparklineCellProps>;
+
 interface TextCellProps<T = any> extends CellComponentProps<T> {
     prefix?: string;
     suffix?: string;
@@ -2933,12 +3609,26 @@ interface DeviceMetaDisplayProps {
     deviceType: DeviceType;
     /** URL to manufacturer logo (optional) */
     logoUrl?: string;
+    /** Layout variant - stacked (vertical) or inline (horizontal) */
+    layout?: "stacked" | "inline";
+    /** Size variant */
+    size?: "xs" | "sm" | "md" | "lg";
     /** Link to device detail page (optional) */
     href?: string;
+    /** Custom link component (e.g., Next.js Link) */
+    LinkComponent?: ComponentType<{
+        href: string;
+        className?: string;
+        children: React.ReactNode;
+    }>;
     /** Link variant for the manufacturer name */
     linkVariant?: "default" | "brand" | "muted" | "unstyled";
-    /** Show device type icon next to model name */
+    /** Show device type icon next to model name (stacked) or hide logo (inline) */
     showDeviceTypeIcon?: boolean;
+    /** Show logo in stacked layout (can be hidden for compact view) */
+    showLogo?: boolean;
+    /** Text emphasis level - "strong"/"high" for bold, "normal" for regular, "low" for muted */
+    emphasis?: CellEmphasis;
     /** Loading state */
     isLoading?: boolean;
     /** Additional classes */
@@ -2948,25 +3638,39 @@ interface DeviceMetaDisplayProps {
  * DeviceMetaDisplay
  *
  * Reusable component for displaying device metadata (manufacturer, model, logo).
- * Displays manufacturer logo (with device type icon fallback) and device information.
- * Manufacturer name can be linked to device detail page.
+ * Supports stacked and inline layouts with size variants and optional linking.
+ *
+ * **Stacked layout**: Large icon/logo, manufacturer name above, device type icon + model below
+ * **Inline layout**: Small icon + "Manufacturer Model" as single text string
  *
  * Use this component directly in cards, lists, or other layouts.
  * For DataTable cells, use DeviceMetaCell which wraps this component.
  *
  * @example
  * ```tsx
+ * // Stacked layout (default)
  * <DeviceMetaDisplay
  *   manufacturer="Tesla"
  *   model="Powerwall 2"
  *   deviceType="battery"
+ *   layout="stacked"
+ *   size="md"
  *   logoUrl="https://..."
  *   href="/devices/123"
- *   showDeviceTypeIcon
+ * />
+ *
+ * // Inline layout
+ * <DeviceMetaDisplay
+ *   manufacturer="Tesla"
+ *   model="Powerwall 2"
+ *   deviceType="battery"
+ *   layout="inline"
+ *   size="sm"
+ *   href="/devices/123"
  * />
  * ```
  */
-declare function DeviceMetaDisplay({ manufacturer, model, deviceType, logoUrl, href, linkVariant, showDeviceTypeIcon, isLoading, className, }: DeviceMetaDisplayProps): react_jsx_runtime.JSX.Element;
+declare function DeviceMetaDisplay({ manufacturer, model, deviceType, logoUrl, layout, size, href, LinkComponent, linkVariant, showDeviceTypeIcon, showLogo, emphasis, isLoading, className, }: DeviceMetaDisplayProps): react_jsx_runtime.JSX.Element;
 
 interface DeviceStateBadgeProps extends Omit<BadgeProps, "variant" | "children"> {
     /** The device state to display */
@@ -3083,365 +3787,166 @@ type WithBackArrow = BaseDialogHeaderProps & {
     hasBackArrow: true;
     onBack: () => void;
 };
-type WithoutBackArrow = BaseDialogHeaderProps & {
-    hasBackArrow?: false;
-    onBack?: never;
-};
-/**
- * DialogHeader
- *
- * Header area for dialogs with optional back arrow.
- */
-type DialogHeaderProps = WithBackArrow | WithoutBackArrow;
-declare const DialogHeader: React__default.FC<DialogHeaderProps>;
-
-interface DrawerProps extends DialogHeaderConfig, DialogFooterConfig {
-    /**
-     * Drawer content
-     */
-    children?: React__default.ReactNode;
-    /**
-     * Whether the drawer is open
-     */
-    isOpen: boolean;
-    /**
-     * Side to slide in from
-     * @default "right"
-     */
-    slideInFrom?: "left" | "right";
-    /**
-     * Whether to use a transparent backdrop
-     * @default false
-     */
-    transparentOverlay?: boolean;
-    /**
-     * Callback when the drawer is closed
-     */
-    onClose?: () => void;
-    /**
-     * Additional CSS classes
-     */
-    className?: string;
-    /**
-     * Whether to include padding inside the content area
-     * @default true
-     */
-    contentPadding?: boolean;
-    /**
-     * Maximum width of the drawer
-     * @default "400px"
-     */
-    maxWidth?: string;
-}
-/**
- * Drawer
- *
- * Sliding panel that anchors to screen edges.
- */
-declare function Drawer({ children, title, headerContent, titleAlign, hideCloseIcon, hasBackArrow, onBack, isOpen, slideInFrom, transparentOverlay, onClose, className, primaryAction, secondaryAction, footerContent, contentPadding, maxWidth, }: DrawerProps): react_jsx_runtime.JSX.Element | null;
-declare namespace Drawer {
-    var displayName: string;
-}
-
-type EmptyStateSize = "sm" | "md" | "lg";
-type EmptyStateAlignment = "center" | "start";
-interface EmptyStateAction {
-    /** Label for the action button/link */
-    label: string;
-    /** Click handler for the action */
-    onPress?: () => void;
-    /** Optional href for link-style actions */
-    href?: string;
-    /** Whether the action is loading */
-    isLoading?: boolean;
-    /** Whether the action is disabled */
-    isDisabled?: boolean;
-}
-interface EmptyStateProps {
-    /** Icon name from Icon component to show at the top of the empty state. */
-    icon?: IconName$3;
-    /** Primary title describing the state. */
-    title: ReactNode;
-    /** Optional description providing more context. */
-    description?: ReactNode;
-    /** Primary action (rendered as a button). */
-    primaryAction?: EmptyStateAction;
-    /** Secondary action (rendered as a text link). */
-    secondaryAction?: EmptyStateAction;
-    /** Optional custom action area. Use this for complete control over actions. Overrides primaryAction and secondaryAction. */
-    actions?: ReactNode;
-    /** Controls the component padding and typography. */
-    size?: EmptyStateSize;
-    /** Aligns the content horizontally. */
-    alignment?: EmptyStateAlignment;
-    /** When true the component expands to fill the available height and vertically centers content. */
-    fullHeight?: boolean;
-    /** Additional className to merge with default styles. */
-    className?: string;
-}
-/**
- * EmptyState
- *
- * Minimal, composable empty state surface for communicating lack of data.
- * Supports optional icon, description and opinionated action patterns.
- *
- * Use `primaryAction` (button) and `secondaryAction` (text link) for consistent styling,
- * or use `actions` for complete control over the action area.
- */
-declare function EmptyState({ icon, title, description, primaryAction, secondaryAction, actions, size, alignment, fullHeight, className, }: EmptyStateProps): react_jsx_runtime.JSX.Element;
-
-type EnrollmentStatus = "enrolled" | "eligible" | "not_eligible" | "pending" | "opted_out";
-interface EnrollmentStatusBadgeProps extends Omit<BadgeProps, "variant" | "children"> {
-    /** Enrollment status */
-    status: EnrollmentStatus;
-    /** Program name (shown in tooltip) */
-    programName?: string;
-    /** Loading state */
-    isLoading?: boolean;
-}
-/**
- * EnrollmentStatusBadge
- *
- * Displays device enrollment status for programs.
- * Color-coded status with optional program name in tooltip.
- *
- * Status mapping:
- * - enrolled → success (green)
- * - eligible → info (blue)
- * - pending → warning (yellow)
- * - not_eligible → neutral (gray)
- * - opted_out → neutral (gray)
- *
- * @example
- * ```tsx
- * <EnrollmentStatusBadge status="enrolled" programName="Demand Response Q4" />
- * <EnrollmentStatusBadge status="eligible" />
- * <EnrollmentStatusBadge status="pending" />
- * ```
- */
-declare function EnrollmentStatusBadge({ status, programName, isLoading, size, shape, ...badgeProps }: EnrollmentStatusBadgeProps): react_jsx_runtime.JSX.Element;
-
-interface Props {
-    children: ReactNode;
-    fallback?: ReactNode;
-    title?: string;
-}
-interface State {
-    hasError: boolean;
-    error?: Error;
-}
-/**
- * ErrorBoundary
- *
- * React error boundary component for graceful error handling.
- * Catches JavaScript errors in child components and displays a fallback UI with retry option.
- */
-declare class ErrorBoundary extends Component<Props, State> {
-    state: State;
-    static getDerivedStateFromError(error: Error): State;
-    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    private handleRetry;
-    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
-}
-
-interface InputStyleProps {
-    /** Whether the input is in an invalid state */
-    isInvalid?: boolean;
-    /** Whether the input is disabled */
-    isDisabled?: boolean;
-    /** Whether the input should have a transparent background */
-    transparent?: boolean;
-    /** The size variant of the input */
-    size?: Size;
-    /** Whether the input is currently focused */
-    isFocused?: boolean;
-    /** Additional CSS classes to apply */
-    className?: string;
-}
-interface BaseProps {
-    /** The size variant of the component */
-    size?: Size;
-    /** Additional CSS classes to apply */
-    className?: string;
-}
-interface BaseInputProps extends BaseProps {
-    /** Whether the input should have a transparent background */
-    transparent?: boolean;
-    /** Whether to show a clear button when the input has a value */
-    isClearable?: boolean;
-    /** Callback when the clear button is clicked */
-    onClear?: () => void;
-    /** Whether to show a search icon */
-    showSearchIcon?: boolean;
-}
-interface LabelProps extends BaseProps {
-    /** The label content */
-    children: React__default.ReactNode;
-    /** Optional tooltip text to show next to the label */
-    tooltip?: string;
-    /** Whether to show a required field indicator (*) */
-    isRequired?: boolean;
-    /** The ID of the input this label is associated with */
-    htmlFor?: string;
-}
-interface FieldErrorProps extends BaseProps {
-    /** The error message to display */
-    children: React__default.ReactNode;
-}
-interface InputProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size">, InputStyleProps {
-    /** The size variant of the input */
-    size?: Size;
-}
-interface DescriptionProps extends Omit<TextProps, "className">, BaseProps {
-    /** The description content */
-    children: React__default.ReactNode;
-}
-interface FieldGroupProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, "children">, InputStyleProps {
-    /** Whether any child of the group is focused */
-    isFocusWithin?: boolean;
-    /** Children can be either a ReactNode or a render function */
-    children?: React__default.ReactNode | ((props: InputStyleProps) => React__default.ReactNode);
-}
-/**
- * Hook for managing input focus state
- */
-declare function useInputFocus(): {
-    isFocused: boolean;
-    handleFocus: (e: React__default.FocusEvent<HTMLInputElement>, onFocus?: (e: React__default.FocusEvent<HTMLInputElement>) => void) => void;
-    handleBlur: (e: React__default.FocusEvent<HTMLInputElement>, onBlur?: (e: React__default.FocusEvent<HTMLInputElement>) => void) => void;
-};
-/**
- * Wrapper component for input containers
- */
-declare function InputWrapper({ children, className, }: {
-    children: React__default.ReactNode;
-    className?: string;
-}): react_jsx_runtime.JSX.Element;
-/**
- * Clear button component for inputs
- */
-declare function ClearButton({ onClick, size, className, }: {
-    onClick: () => void;
-    size?: Size;
-    className?: string;
-}): react_jsx_runtime.JSX.Element;
-/**
- * Generates state-specific styles for inputs based on their current state
- * (invalid, disabled, focused).
- *
- * State Priority:
- * 1. Disabled (overrides all other states)
- * 2. Invalid + Focused
- * 3. Invalid
- * 4. Focused
- * 5. Default
- *
- * @example
- * ```tsx
- * const styles = getInputStateStyles({ isInvalid: true, isFocused: true });
- * ```
- */
-declare function getInputStateStyles(props: {
-    isInvalid?: boolean;
-    isDisabled?: boolean;
-    isFocused?: boolean;
-}): "border rounded-[var(--control-border-radius)] !outline-none  border-border-muted" | "border rounded-[var(--control-border-radius)] !outline-none  border-feedback-error-border shadow-[inset_0_0_0_1px_var(--color-feedback-error-border)]" | "border rounded-[var(--control-border-radius)] !outline-none  border-feedback-error-border" | "border rounded-[var(--control-border-radius)] !outline-none  border-border-focus shadow-[inset_0_0_0_1px_var(--color-border-focus)]" | "border rounded-[var(--control-border-radius)] !outline-none  border-border-default";
-/**
- * Generates background styles based on the transparent and disabled props.
- * Uses Tailwind classes for consistent styling across light/dark modes.
- */
-declare function getInputBackgroundStyles(props: {
-    transparent?: boolean;
-    isDisabled?: boolean;
-}): "bg-transparent" | "bg-background-muted" | "bg-background-input";
-/**
- * Generates the complete set of base styles for input components.
- * This includes state styles, background, sizing, and custom classes.
- *
- * @example
- * ```tsx
- * const styles = getInputBaseStyles({
- *   isInvalid: formState.hasError,
- *   isDisabled: isLoading,
- *   size: "md"
- * });
- * ```
- */
-declare function getInputBaseStyles(props: InputStyleProps): string;
+type WithoutBackArrow = BaseDialogHeaderProps & {
+    hasBackArrow?: false;
+    onBack?: never;
+};
 /**
- * Generates styles for grouped form elements (like input with buttons)
+ * DialogHeader
  *
- * @example
- * ```tsx
- * <div className={getFieldGroupStyles({ size: "md" })}>
- *   <Input />
- *   <Button>Submit</Button>
- * </div>
- * ```
+ * Header area for dialogs with optional back arrow.
  */
-declare function getFieldGroupStyles(props: FieldGroupProps): string;
+type DialogHeaderProps = WithBackArrow | WithoutBackArrow;
+declare const DialogHeader: React__default.FC<DialogHeaderProps>;
+
+interface DrawerProps extends DialogHeaderConfig, DialogFooterConfig {
+    /**
+     * Drawer content
+     */
+    children?: React__default.ReactNode;
+    /**
+     * Whether the drawer is open
+     */
+    isOpen: boolean;
+    /**
+     * Side to slide in from
+     * @default "right"
+     */
+    slideInFrom?: "left" | "right";
+    /**
+     * Whether to use a transparent backdrop
+     * @default false
+     */
+    transparentOverlay?: boolean;
+    /**
+     * Callback when the drawer is closed
+     */
+    onClose?: () => void;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Whether to include padding inside the content area
+     * @default true
+     */
+    contentPadding?: boolean;
+    /**
+     * Maximum width of the drawer
+     * @default "400px"
+     */
+    maxWidth?: string;
+}
 /**
- * Label component for form fields. Supports tooltips and required field indicators.
+ * Drawer
  *
- * @example
- * ```tsx
- * <Label
- *   htmlFor="email"
- *   tooltip="Enter your work email"
- *   isRequired
- * >
- *   Email Address
- * </Label>
- * ```
+ * Sliding panel that anchors to screen edges.
  */
-declare function Label({ children, size, tooltip, isRequired, className, htmlFor, }: LabelProps): react_jsx_runtime.JSX.Element;
+declare function Drawer({ children, title, headerContent, titleAlign, hideCloseIcon, hasBackArrow, onBack, isOpen, slideInFrom, transparentOverlay, onClose, className, primaryAction, secondaryAction, footerContent, contentPadding, maxWidth, }: DrawerProps): react_jsx_runtime.JSX.Element | null;
+declare namespace Drawer {
+    var displayName: string;
+}
+
+type EmptyStateSize = "sm" | "md" | "lg";
+type EmptyStateAlignment = "center" | "start";
+interface EmptyStateAction {
+    /** Label for the action button/link */
+    label: string;
+    /** Click handler for the action */
+    onPress?: () => void;
+    /** Optional href for link-style actions */
+    href?: string;
+    /** Whether the action is loading */
+    isLoading?: boolean;
+    /** Whether the action is disabled */
+    isDisabled?: boolean;
+}
+interface EmptyStateProps {
+    /** Icon name from Icon component to show at the top of the empty state. */
+    icon?: IconName$3;
+    /** Primary title describing the state. */
+    title: ReactNode;
+    /** Optional description providing more context. */
+    description?: ReactNode;
+    /** Primary action (rendered as a button). */
+    primaryAction?: EmptyStateAction;
+    /** Secondary action (rendered as a text link). */
+    secondaryAction?: EmptyStateAction;
+    /** Optional custom action area. Use this for complete control over actions. Overrides primaryAction and secondaryAction. */
+    actions?: ReactNode;
+    /** Controls the component padding and typography. */
+    size?: EmptyStateSize;
+    /** Aligns the content horizontally. */
+    alignment?: EmptyStateAlignment;
+    /** When true the component expands to fill the available height and vertically centers content. */
+    fullHeight?: boolean;
+    /** Additional className to merge with default styles. */
+    className?: string;
+}
 /**
- * Description component for providing additional context about a form field.
+ * EmptyState
  *
- * @example
- * ```tsx
- * <Description>Must be at least 8 characters</Description>
- * ```
- */
-declare function Description({ size, className, children, ...props }: DescriptionProps): react_jsx_runtime.JSX.Element;
-/**
- * Error message component for form fields. Automatically handles
- * accessibility attributes for screen readers.
+ * Minimal, composable empty state surface for communicating lack of data.
+ * Supports optional icon, description and opinionated action patterns.
  *
- * @example
- * ```tsx
- * {hasError && <FieldError>This field is required</FieldError>}
- * ```
+ * Use `primaryAction` (button) and `secondaryAction` (text link) for consistent styling,
+ * or use `actions` for complete control over the action area.
  */
-declare function FieldError({ children, size, className }: FieldErrorProps): react_jsx_runtime.JSX.Element;
+declare function EmptyState({ icon, title, description, primaryAction, secondaryAction, actions, size, alignment, fullHeight, className, }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+type EnrollmentStatus = "enrolled" | "eligible" | "not_eligible" | "pending" | "opted_out";
+interface EnrollmentStatusBadgeProps extends Omit<BadgeProps, "variant" | "children"> {
+    /** Enrollment status */
+    status: EnrollmentStatus;
+    /** Program name (shown in tooltip) */
+    programName?: string;
+    /** Loading state */
+    isLoading?: boolean;
+}
 /**
- * Base input component with consistent styling and state handling.
- * Extends the native input element with our custom styling system.
+ * EnrollmentStatusBadge
+ *
+ * Displays device enrollment status for programs.
+ * Color-coded status with optional program name in tooltip.
+ *
+ * Status mapping:
+ * - enrolled → success (green)
+ * - eligible → info (blue)
+ * - pending → warning (yellow)
+ * - not_eligible → neutral (gray)
+ * - opted_out → neutral (gray)
  *
  * @example
  * ```tsx
- * <Input
- *   size="md"
- *   isInvalid={hasError}
- *   isDisabled={isLoading}
- *   transparent={false}
- * />
+ * <EnrollmentStatusBadge status="enrolled" programName="Demand Response Q4" />
+ * <EnrollmentStatusBadge status="eligible" />
+ * <EnrollmentStatusBadge status="pending" />
  * ```
  */
-declare function Input({ size, isInvalid, isDisabled, isFocused, transparent, className, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+declare function EnrollmentStatusBadge({ status, programName, isLoading, size, shape, ...badgeProps }: EnrollmentStatusBadgeProps): react_jsx_runtime.JSX.Element;
+
+interface Props {
+    children: ReactNode;
+    fallback?: ReactNode;
+    title?: string;
+}
+interface State {
+    hasError: boolean;
+    error?: Error;
+}
 /**
- * Container for grouping form elements with consistent styling.
- * Useful for creating compound components like input with buttons.
+ * ErrorBoundary
  *
- * @example
- * ```tsx
- * <FieldGroup>
- *   <Input placeholder="Search..." />
- *   <Button>Search</Button>
- * </FieldGroup>
- * ```
+ * React error boundary component for graceful error handling.
+ * Catches JavaScript errors in child components and displays a fallback UI with retry option.
  */
-declare function FieldGroup(props: FieldGroupProps): react_jsx_runtime.JSX.Element;
+declare class ErrorBoundary extends Component<Props, State> {
+    state: State;
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    private handleRetry;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+}
 
 interface FirmwareVersionBadgeProps extends Omit<BadgeProps, "variant" | "children"> {
     /** Firmware version string */
@@ -3672,7 +4177,7 @@ interface KpiProps {
     /** Layout orientation */
     orientation?: KpiOrientation;
     /** Loading state */
-    loading?: boolean;
+    isLoading?: boolean;
     /** Empty state */
     empty?: boolean;
     /** Error state */
@@ -3688,7 +4193,7 @@ interface KpiProps {
     /** Custom trend renderer */
     renderTrend?: (points?: TrendPoint[]) => React__default.ReactNode;
 }
-declare function Kpi({ label, value, formatter, delta, deltaPeriodLabel, deltaIntent, trend, status, helpText, size, orientation, loading, empty, error, onClick, className, renderValue, renderDelta, renderTrend, }: KpiProps): react_jsx_runtime.JSX.Element;
+declare function Kpi({ label, value, formatter, delta, deltaPeriodLabel, deltaIntent, trend, status, helpText, size, orientation, isLoading, empty, error, onClick, className, renderValue, renderDelta, renderTrend, }: KpiProps): react_jsx_runtime.JSX.Element;
 
 /**
  * KpiGroup Component — Layout container for multiple KPIs
@@ -3730,11 +4235,11 @@ interface KpiGroupProps {
     /** Optional header content */
     header?: React__default.ReactNode;
     /** Loading state for all children */
-    loading?: boolean;
+    isLoading?: boolean;
     /** Additional CSS classes */
     className?: string;
 }
-declare function KpiGroup({ children, cols, gap, align, equalizeHeights, header, loading, className, }: KpiGroupProps): react_jsx_runtime.JSX.Element;
+declare function KpiGroup({ children, cols, gap, align, equalizeHeights, header, isLoading, className, }: KpiGroupProps): react_jsx_runtime.JSX.Element;
 declare namespace KpiGroup {
     var displayName: string;
 }
@@ -4678,8 +5183,223 @@ interface SelectProps<T extends SelectItem> extends Omit<SelectProps$1<T>, "chil
     validationResult?: ValidationResult;
     /** Whether to use transparent background */
     transparent?: boolean;
+    /** Placement of the dropdown menu relative to the trigger. Defaults to "bottom start" */
+    placement?: "bottom" | "bottom left" | "bottom right" | "bottom start" | "bottom end" | "top" | "top left" | "top right" | "top start" | "top end" | "left" | "left top" | "left bottom" | "start" | "start top" | "start bottom" | "right" | "right top" | "right bottom" | "end" | "end top" | "end bottom";
+    /** Whether the menu should flip to the opposite side when there's not enough space. Defaults to true */
+    shouldFlip?: boolean;
+    /**
+     * Controls the menu width behavior relative to the trigger.
+     * - "match": Menu width matches trigger width exactly (default)
+     * - "auto": Menu width grows to fit content, with minimum of trigger width
+     * @default "match"
+     */
+    menuWidth?: "match" | "auto";
+}
+declare function Select<T extends SelectItem>({ label, description, errorMessage, children, items, renderItem, size, selectedKey: controlledSelectedKey, defaultSelectedKey, onSelectionChange, placeholder, showErrors, tooltip, isRequired, transparent, placement, shouldFlip, menuWidth, ...props }: SelectProps<T>): react_jsx_runtime.JSX.Element;
+
+interface SiteCardProps {
+    /** Street address */
+    streetAddress: string;
+    /** City name (optional) */
+    city?: string;
+    /** State/province (optional) */
+    state?: string;
+    /** Postal/ZIP code (optional) */
+    postalCode?: string;
+    /** Longitude for map display */
+    longitude?: number;
+    /** Latitude for map display */
+    latitude?: number;
+    /** Link to site detail page (optional) */
+    href?: string;
+    /** Custom link component (e.g., Next.js Link) */
+    LinkComponent?: ComponentType<{
+        href: string;
+        className?: string;
+        children: React.ReactNode;
+    }>;
+    /** Card variant */
+    variant?: "outlined" | "elevated" | "filled" | "ghost";
+    /** Show map (requires longitude/latitude) */
+    showMap?: boolean;
+    /** Map height */
+    mapHeight?: number | string;
+    /** Mapbox access token (required for map display) */
+    mapboxAccessToken?: string;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Additional classes for the card */
+    className?: string;
+    /** Additional classes for the card content (for padding control, etc.) */
+    contentClassName?: string;
+}
+/**
+ * SiteCard
+ *
+ * A card component for displaying site/location information.
+ * Can include an optional static map showing the site's location.
+ *
+ * @example
+ * ```tsx
+ * <SiteCard
+ *   streetAddress="123 Main St"
+ *   city="San Francisco"
+ *   state="CA"
+ *   postalCode="94102"
+ *   longitude={-122.4194}
+ *   latitude={37.7749}
+ *   showMap
+ *   href="/sites/123"
+ * />
+ * ```
+ */
+declare function SiteCard({ streetAddress, city, state, postalCode, longitude, latitude, href, LinkComponent, variant, showMap, mapHeight, mapboxAccessToken, isLoading, className, contentClassName, }: SiteCardProps): react_jsx_runtime.JSX.Element;
+
+interface SiteContactCardProps {
+    /** Site information */
+    site: {
+        streetAddress: string;
+        city?: string;
+        state?: string;
+        postalCode?: string;
+        longitude?: number;
+        latitude?: number;
+        href?: string;
+    };
+    /** Contact information (optional) */
+    contact?: {
+        firstName: string;
+        lastName: string;
+        email?: string;
+        phone?: string;
+        avatarUrl?: string;
+        href?: string;
+    };
+    /** Custom link component (e.g., Next.js Link) */
+    LinkComponent?: ComponentType<{
+        href: string;
+        className?: string;
+        children: React.ReactNode;
+    }>;
+    /** Card variant */
+    variant?: "outlined" | "elevated" | "filled" | "ghost";
+    /** Show map (requires site longitude/latitude) */
+    showMap?: boolean;
+    /** Map height */
+    mapHeight?: number | string;
+    /** Mapbox access token (required for map display) */
+    mapboxAccessToken?: string;
+    /** Show contact email
+     * @default true
+     */
+    showEmail?: boolean;
+    /** Show contact phone
+     * @default false
+     */
+    showPhone?: boolean;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Additional classes for the card */
+    className?: string;
+    /** Additional classes for the card content (for padding control, etc.) */
+    contentClassName?: string;
+}
+/**
+ * SiteContactCard
+ *
+ * A combined card component for displaying both site and contact information.
+ * Shows site details with optional map, followed by associated contact information.
+ *
+ * @example
+ * ```tsx
+ * <SiteContactCard
+ *   site={{
+ *     streetAddress: "123 Main St",
+ *     city: "San Francisco",
+ *     state: "CA",
+ *     postalCode: "94102",
+ *     longitude: -122.4194,
+ *     latitude: 37.7749,
+ *     href: "/sites/123"
+ *   }}
+ *   contact={{
+ *     firstName: "John",
+ *     lastName: "Doe",
+ *     email: "john.doe@example.com",
+ *     phone: "+1 (555) 123-4567",
+ *     href: "/contacts/123"
+ *   }}
+ *   showMap
+ * />
+ * ```
+ */
+declare function SiteContactCard({ site, contact, LinkComponent, variant, showMap, mapHeight, mapboxAccessToken, showEmail, showPhone, isLoading, className, contentClassName, }: SiteContactCardProps): react_jsx_runtime.JSX.Element;
+
+interface SiteMetaDisplayProps {
+    /** Street address (combined street lines) */
+    streetAddress: string;
+    /** City name (optional) */
+    city?: string;
+    /** State/province (optional) */
+    state?: string;
+    /** Postal/ZIP code (optional) */
+    postalCode?: string;
+    /** Layout variant - stacked (vertical) or inline (horizontal) */
+    layout?: "stacked" | "inline";
+    /** Size variant */
+    size?: "xs" | "sm" | "md" | "lg";
+    /** Link to site detail page (optional) */
+    href?: string;
+    /** Custom link component (e.g., Next.js Link) */
+    LinkComponent?: ComponentType<{
+        href: string;
+        className?: string;
+        children: React.ReactNode;
+    }>;
+    /** Link variant for the address */
+    linkVariant?: "default" | "brand" | "muted" | "unstyled";
+    /** Text emphasis level - "strong"/"high" for bold, "normal" for regular, "low" for muted */
+    emphasis?: CellEmphasis;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Additional classes */
+    className?: string;
 }
-declare function Select<T extends SelectItem>({ label, description, errorMessage, children, items, renderItem, size, selectedKey: controlledSelectedKey, defaultSelectedKey, onSelectionChange, placeholder, showErrors, tooltip, isRequired, transparent, ...props }: SelectProps<T>): react_jsx_runtime.JSX.Element;
+/**
+ * SiteMetaDisplay
+ *
+ * Reusable component for displaying site location information.
+ * Supports stacked and inline layouts with size variants and optional linking.
+ *
+ * **Stacked layout**: MapPin icon, street address above, city/state/zip below
+ * **Inline layout**: MapPin icon + street address only (no city/state)
+ *
+ * Use this component directly in cards, lists, or other layouts.
+ * For DataTable cells, use SiteMetaCell which wraps this component.
+ *
+ * @example
+ * ```tsx
+ * // Stacked layout (default)
+ * <SiteMetaDisplay
+ *   streetAddress="123 Main St"
+ *   city="San Francisco"
+ *   state="CA"
+ *   postalCode="94102"
+ *   layout="stacked"
+ *   size="md"
+ *   href="/sites/123"
+ * />
+ *
+ * // Inline layout
+ * <SiteMetaDisplay
+ *   streetAddress="123 Main St"
+ *   layout="inline"
+ *   size="sm"
+ *   href="/sites/123"
+ * />
+ * ```
+ */
+declare function SiteMetaDisplay({ streetAddress, city, state, postalCode, layout, size, href, LinkComponent, linkVariant, emphasis, isLoading, className, }: SiteMetaDisplayProps): react_jsx_runtime.JSX.Element;
 
 interface SkeletonProps {
     width?: number | string;
@@ -5162,7 +5882,7 @@ interface TimelineProps {
 declare function Timeline({ children, className }: TimelineProps): react_jsx_runtime.JSX.Element;
 
 type IconName$1 = React.ComponentProps<typeof Icon>["name"];
-type TimelineItemVariant = "default" | "active" | "muted";
+type TimelineItemVariant = "default" | "active" | "muted" | "success" | "error" | "warning" | "info";
 interface TimelineItemProps {
     children: ReactNode;
     /** Visual variant of the timeline item */
@@ -5336,4 +6056,4 @@ type StatTone = "success" | "warning" | "error" | "info" | "neutral";
  */
 declare function getStateTone(state: DeviceState): StatTone;
 
-export { type Action, ActionCell, type ActionCellProps, ActivityFeed, ActivityFeedGroup, type ActivityFeedGroupProps, type ActivityFeedProps, type ActivityFeedSize, type ActivityFeedVariant, ActivityItem, type ActivityItemProps, type ActivityItemSurface, type ActivityItemTone, Alert, type AlertProps, AreaSeries, AutoMobileRenderer, Autocomplete, BREAKPOINTS, BadgeProps, BarSeries, BaseDataPoint, type BaseInputProps, type BaseProps, BooleanCell, type BooleanCellProps, BooleanFormat, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type Breakpoint, type BreakpointState, Button, Calendar, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, CardMobileRenderer, type CardProps, type CardVariant, type CellAlignment, type CellComponent, type CellComponentProps, type CellContext, type CellEmphasis, ChartAxis, ChartBottomBar, ChartContainer, ChartEventMarkers, type ChartEventMarkersProps, type ChartExportMetadata, ChartTooltip, Checkbox, CheckboxGroup, Chip, ClearButton, Collapse, CollapseContent, type CollapseContentProps, type CollapseDensity, CollapseHeader, type CollapseHeaderProps, CollapseItem, type CollapseItemProps, type CollapseProps, type CollapseVariant, ColorModeProvider, type Column, ComponentFormatter, Confirm, type ConfirmProps, ConnectionStatusBadge, type ConnectionStatusBadgeProps, CopyToClipboard, CurrencyFormat, CurrentFormat, CustomPinsSpec, DataControls, type Filter as DataControlsFilter, type DataControlsProps, type SortOption as DataControlsSortOption, DataTable, type DataTableProps, DateCell, type DateCellProps, DateFormat, DateRangePicker, Description, type DescriptionProps, DeviceHealthBadge, type DeviceHealthBadgeProps, DeviceMetaCell, type DeviceMetaCellProps, DeviceMetaDisplay, type DeviceMetaDisplayProps, DeviceState, DeviceStateBadge, type DeviceStateBadgeProps, DeviceStateCell, type DeviceStateCellProps, DeviceStateWithMetric, type DeviceStateWithMetricProps, type DeviceType, DeviceTypeIcon, type DeviceTypeIconProps, Dialog, type DialogAction, type DialogFooterConfig, DialogHeader, type DialogHeaderConfig, type DialogHeaderProps, type DialogProps, DistanceFormat, Drawer, type DrawerProps, EmptyState, type EmptyStateAction, type EmptyStateAlignment, type EmptyStateProps, type EmptyStateSize, EnergyFormat, type EnrollmentStatus, EnrollmentStatusBadge, type EnrollmentStatusBadgeProps, ErrorBoundary, type EventMarker, type ExportType, type FacetConfig, type FacetCounts, type FacetType, FieldError, type FieldErrorProps, FieldFormat, FieldGroup, type FieldGroupProps, FieldValue, type FilterChip, FilterChips, type FilterChipsProps, type FilterCondition, FilterDialog, type FilterDialogProps, type FilterGroup, type FilterOperator, type FilterState, FirmwareVersionBadge, type FirmwareVersionBadgeProps, Form, FormatRegistry, FormattedCell, FormattedValue, FormatterFunction, FunnelSeries, type FunnelSeriesProps, type FunnelStage as FunnelSeriesStage, GeoJsonLayerSpec, Grid, type GridAlign, type GridCols, type GridFlow, type GridGap, type GridItemProps, type GridJustify, type GridProps, type GridSpan, GridState, GridStateBadge, type GridStateBadgeProps, type HealthStatus, Icon, InfiniteScrollIndicator, type InfiniteScrollIndicatorProps, Input, type InputProps, type InputStyleProps, InputWrapper, Kpi, KpiGroup, type KpiGroupAlign, type KpiGroupCols, type KpiGroupGap, type KpiGroupProps, type KpiOrientation, type KpiProps, type KpiSize, type KpiStatus, Label, type LabelProps, LayerSpec, LineSeries, type LinkBehavior, List, ListBox, ListBoxItem, ListItem, type ListItemProps, ListPane, type ListPaneProps, type ListProps, type LoadingState, type MobileBreakpoint, type MobileConfig, type MobileRenderer, ModalBackdrop, type ModalBackdropProps, Notice, NoticeContainer, type NoticeContainerProps, type NoticeOptions, type NoticeProps, NoticeProvider, type NoticeProviderProps, type NoticeVariant, NumberCell, type NumberCellProps, NumberField, NumberFormat, type PageAsideProps, type PageBreadcrumbItem, type PageContentProps, type PageHeaderProps, PageLayout, type PageLayoutProps, type PageScrollableContentProps, PhoneFormat, PlaceSearch, Popover, PowerFormat, type PresetRange, ProgressBar, Radio, RadioCard, RadioCardGroup, type RadioCardGroupProps, type RadioCardProps, RadioGroup, RangeCalendar, RasterLayerSpec, ResistanceFormat, type ResponsiveValue, ResultsCount, type ResultsCountProps, SKELETON_SIZES, type SearchConfig, SearchControl, type SearchControlProps, Section, SectionNav, type SectionNavItem, type SectionNavOrientation, type SectionNavProps, type SectionProps, type SectionSpacing, type SectionVariant, Select, SelectCell, type SelectCellProps, Skeleton, Slider, type SortConfig, SortControl, type SortControlProps, type SortDirection, type SortState, SplitPane, type SplitPaneOrientation, type SplitPanePanelProps, type SplitPaneProps, type StatAlign, type StatFormatter, type StatItem, type StatLayout, StatList, type StatListProps, type StatThreshold, type StatTone$1 as StatTone, type StatValue, Switch, Tab, TabList, TabPanel, type TableDensity, type TableLayout, type TableWidth, Tabs, type TabsProps$1 as TabsProps, TemperatureFormat, TemperatureUnit, TemperatureUnitString, TextArea, TextAreaWithChips, TextCell, type TextCellProps, TextField, TextFormat, TimeControls, type TimeControlsProps, TimeField, type TimeRange, Timeline, TimelineItem, type TimelineItemProps, type TimelineItemVariant, ToggleButton, Tooltip, TooltipData, Tray, type TrayProps, type TrendPoint, type UseBreakpointReturn, type UseClientDataControlsOptions, type UseClientDataControlsResult, type UseDataControlsClientOptions, type UseDataControlsOptions, type UseDataControlsResult, type UseDataControlsServerOptions, type UseInfiniteScrollOptions, type UseInfiniteScrollReturn, type UseServerDataControlsOptions, VectorLayerSpec, VoltageFormat, type WindowSize, type WindowSizeOption, YFormatType, addFilterCondition, autoScaleCurrent, autoScaleDistance, autoScaleEnergy, autoScalePower, autoScaleResistance, autoScaleVoltage, camelCaseToWords, capitalize, celsiusToFahrenheit, celsiusToKelvin, centimetersToInches, createEmptyFilter, createFilter, createFilters, createFormat, enumToSentenceCase, exportChart, fahrenheitToCelsius, fahrenheitToKelvin, feetToMeters, feetToMiles, filterToChips, formatBoolean, formatCapacity, formatCurrency, formatCurrent, formatDate, formatDistance, formatEmptyValue, formatEnergy, formatFieldValue, formatInternationalPhone, formatNumber, formatPercent, formatPhone, formatPhoneNumber, formatPower, formatPowerRating, formatResistance, formatTemperature, formatText, formatUSPhone, formatVoltage, getBadgeClasses, getBooleanBadgeVariant, getCellAlignmentClasses, getCellContainerClasses, getCellTextClasses, getDateParts, getExportFormatName, getFieldGroupStyles, getFilterFields, getInputBackgroundStyles, getInputBaseStyles, getInputStateStyles, getLinkClasses, getNumericColorClasses, getSkeletonSize, getStateTone, inchesToCentimeters, isCustomPinsLayer, isExportSupported, isFilterEmpty, isGeoJsonLayer, isNil, isRasterLayer, isVectorLayer, kelvinToCelsius, kelvinToFahrenheit, kilometersToMiles, layer, metersToFeet, metersToMiles, metersToYards, milesToFeet, milesToKilometers, milesToMeters, parseBoolean, removeFilterCondition, resolveValue, snakeCaseToWords, temperatureStringToSymbol, toA, toActiveInactive, toAmps, toBoolean, toCelsius, toCentimeters, toCheckmark, toCompactNumber, toCurrency, toCustomDateFormat, toDateString, toEnabledDisabled, toFahrenheit, toFeet, toFloat, toFormattedNumber, toFullDateTime, toGW, toGWh, toGigawatts, toISOString, toInches, toInteger, toKA, toKV, toKW, toKelvin, toKiloamps, toKilohms, toKilometers, toKilovolts, toKilowatts, toLowerCase, toMA, toMV, toMW, toMWh, toMegawatts, toMegohms, toMeters, toMiles, toMilliamps, toMillimeters, toMilliohms, toMillivolts, toNauticalMiles, toOhms, toOnOff, toPercentage, toRelativeTime, toScientificNotation, toSecret, toSentenceCase, toTemperature, toTitleCase, toTrueFalse, toUpperCase, toV, toVolts, toW, toWatts, toWh, toYards, tokWh, truncateEnd, truncateMiddle, truncateStart, ucFirst, useBreakpoint, useClientDataControls, useColorMode, useDataControls, useDebounce, useInfiniteScroll, useInputFocus, useLocalStorage, useMediaQuery, useNotice, useServerDataControls, wrapWithLink, yardsToMeters };
+export { type Action, ActionCell, type ActionCellProps, ActivityFeed, ActivityFeedGroup, type ActivityFeedGroupProps, type ActivityFeedProps, type ActivityFeedSize, type ActivityFeedVariant, ActivityItem, type ActivityItemProps, type ActivityItemSurface, type ActivityItemTone, Alert, type AlertProps, AreaSeries, AutoMobileRenderer, Autocomplete, BREAKPOINTS, BadgeCell, type BadgeCellProps, BadgeProps, BarSeries, BaseDataPoint, type BaseInputProps, type BaseProps, BooleanCell, type BooleanCellProps, BooleanFormat, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type Breakpoint, type BreakpointState, Button, Calendar, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, CardMobileRenderer, type CardProps, type CardVariant, type CellAlignment, type CellComponent, type CellComponentProps, type CellContext, type CellEmphasis, ChartAxis, ChartBottomBar, ChartContainer, ChartEventMarkers, type ChartEventMarkersProps, type ChartExportMetadata, ChartTooltip, Checkbox, CheckboxGroup, Chip, ClearButton, Collapse, CollapseContent, type CollapseContentProps, type CollapseDensity, CollapseHeader, type CollapseHeaderProps, CollapseItem, type CollapseItemProps, type CollapseProps, type CollapseVariant, ColorField, type ColorFieldProps, ColorModeProvider, type Column, ComponentFormatter, Confirm, type ConfirmProps, ConnectionStatusBadge, type ConnectionStatusBadgeProps, ContactCard, type ContactCardProps, ContactMetaCell, ContactMetaDisplay, type ContactMetaDisplayProps, CopyToClipboard, CurrencyFormat, CurrentFormat, CustomPinsSpec, DataControls, type Filter as DataControlsFilter, type DataControlsProps, type SortOption as DataControlsSortOption, DataTable, type DataTableProps, DateCell, type DateCellProps, DateFormat, DateRangePicker, Description, type DescriptionProps, DeviceHealthBadge, type DeviceHealthBadgeProps, DeviceMetaCell, type DeviceMetaCellProps, DeviceMetaDisplay, type DeviceMetaDisplayProps, DeviceState, DeviceStateBadge, type DeviceStateBadgeProps, DeviceStateCell, type DeviceStateCellProps, DeviceStateWithMetric, type DeviceStateWithMetricProps, type DeviceType, DeviceTypeIcon, type DeviceTypeIconProps, Dialog, type DialogAction, type DialogFooterConfig, DialogHeader, type DialogHeaderConfig, type DialogHeaderProps, type DialogProps, DistanceFormat, Drawer, type DrawerProps, EmptyState, type EmptyStateAction, type EmptyStateAlignment, type EmptyStateProps, type EmptyStateSize, EnergyFormat, type EnrollmentStatus, EnrollmentStatusBadge, type EnrollmentStatusBadgeProps, ErrorBoundary, type EventMarker, type ExportType, type FacetConfig, type FacetCounts, type FacetType, FieldError, type FieldErrorProps, FieldFormat, FieldGroup, type FieldGroupProps, FieldValue, type FilterChip, FilterChips, type FilterChipsProps, type FilterCondition, FilterDialog, type FilterDialogProps, type FilterGroup, type FilterOperator, type FilterState, FirmwareVersionBadge, type FirmwareVersionBadgeProps, Form, FormatRegistry, FormattedCell, FormattedValue, FormatterFunction, FunnelSeries, type FunnelSeriesProps, type FunnelStage as FunnelSeriesStage, GeoJsonLayerSpec, Grid, type GridAlign, type GridCols, type GridFlow, type GridGap, type GridItemProps, type GridJustify, type GridProps, type GridSpan, GridState, GridStateBadge, type GridStateBadgeProps, type HealthStatus, HorizontalBarCell, type HorizontalBarCellProps, Icon, InfiniteScrollIndicator, type InfiniteScrollIndicatorProps, Input, type InputProps, type InputStyleProps, InputWrapper, Kpi, KpiGroup, type KpiGroupAlign, type KpiGroupCols, type KpiGroupGap, type KpiGroupProps, type KpiOrientation, type KpiProps, type KpiSize, type KpiStatus, Label, type LabelProps, LayerSpec, LineSeries, type LinkBehavior, List, ListBox, ListBoxItem, ListItem, type ListItemProps, ListPane, type ListPaneProps, type ListProps, type LoadingState, MiniBarCell, type MiniBarCellProps, type MobileBreakpoint, type MobileConfig, type MobileRenderer, ModalBackdrop, type ModalBackdropProps, Notice, NoticeContainer, type NoticeContainerProps, type NoticeOptions, type NoticeProps, NoticeProvider, type NoticeProviderProps, type NoticeVariant, NumberCell, type NumberCellProps, NumberField, NumberFormat, type PageAsideProps, type PageBreadcrumbItem, type PageContentProps, type PageHeaderProps, PageLayout, type PageLayoutProps, type PageScrollableContentProps, PercentBarCell, type PercentBarCellProps, PhoneFormat, PlaceSearch, Popover, PowerFormat, type PresetRange, ProgressBar, Radio, RadioCard, RadioCardGroup, type RadioCardGroupProps, type RadioCardProps, RadioGroup, RangeCalendar, RasterLayerSpec, ResistanceFormat, type ResponsiveValue, ResultsCount, type ResultsCountProps, SKELETON_SIZES, type SearchConfig, SearchControl, type SearchControlProps, Section, SectionNav, type SectionNavItem, type SectionNavOrientation, type SectionNavProps, type SectionProps, type SectionSpacing, type SectionVariant, Select, SelectCell, type SelectCellProps, SiteCard, type SiteCardProps, SiteContactCard, type SiteContactCardProps, SiteMetaCell, SiteMetaDisplay, type SiteMetaDisplayProps, Skeleton, Slider, type SortConfig, SortControl, type SortControlProps, type SortDirection, type SortState, SparklineCell, type SparklineCellProps, SplitPane, type SplitPaneOrientation, type SplitPanePanelProps, type SplitPaneProps, type StatAlign, type StatFormatter, type StatItem, type StatLayout, StatList, type StatListProps, type StatThreshold, type StatTone$1 as StatTone, type StatValue, Switch, Tab, TabList, TabPanel, type TableDensity, type TableLayout, type TableWidth, Tabs, type TabsProps$1 as TabsProps, TemperatureFormat, TemperatureUnit, TemperatureUnitString, TextArea, TextAreaWithChips, TextCell, type TextCellProps, TextField, TextFormat, TimeControls, type TimeControlsProps, TimeField, type TimeRange, Timeline, TimelineItem, type TimelineItemProps, type TimelineItemVariant, ToggleButton, Tooltip, TooltipData, Tray, type TrayProps, type TrendPoint, type UseBreakpointReturn, type UseClientDataControlsOptions, type UseClientDataControlsResult, type UseDataControlsClientOptions, type UseDataControlsOptions, type UseDataControlsResult, type UseDataControlsServerOptions, type UseInfiniteScrollOptions, type UseInfiniteScrollReturn, type UseServerDataControlsOptions, VectorLayerSpec, VoltageFormat, type WindowSize, type WindowSizeOption, YFormatType, addFilterCondition, autoScaleCurrent, autoScaleDistance, autoScaleEnergy, autoScalePower, autoScaleResistance, autoScaleVoltage, camelCaseToWords, capitalize, celsiusToFahrenheit, celsiusToKelvin, centimetersToInches, createEmptyFilter, createFilter, createFilters, createFormat, enumToSentenceCase, exportChart, fahrenheitToCelsius, fahrenheitToKelvin, feetToMeters, feetToMiles, filterToChips, formatBoolean, formatCapacity, formatCurrency, formatCurrent, formatDate, formatDistance, formatEmptyValue, formatEnergy, formatFieldValue, formatInternationalPhone, formatNumber, formatPercent, formatPhone, formatPhoneNumber, formatPower, formatPowerRating, formatResistance, formatTemperature, formatText, formatUSPhone, formatVoltage, getBadgeClasses, getBooleanBadgeVariant, getCellAlignmentClasses, getCellContainerClasses, getCellTextClasses, getDateParts, getExportFormatName, getFieldGroupStyles, getFilterFields, getInputBackgroundStyles, getInputBaseStyles, getInputStateStyles, getLinkClasses, getNumericColorClasses, getSkeletonSize, getStateTone, inchesToCentimeters, isCustomPinsLayer, isExportSupported, isFilterEmpty, isGeoJsonLayer, isNil, isRasterLayer, isVectorLayer, kelvinToCelsius, kelvinToFahrenheit, kilometersToMiles, layer, metersToFeet, metersToMiles, metersToYards, milesToFeet, milesToKilometers, milesToMeters, parseBoolean, removeFilterCondition, resolveValue, snakeCaseToWords, temperatureStringToSymbol, toA, toActiveInactive, toAmps, toBoolean, toCelsius, toCentimeters, toCheckmark, toCompactNumber, toCurrency, toCustomDateFormat, toDateString, toEnabledDisabled, toFahrenheit, toFeet, toFloat, toFormattedNumber, toFullDateTime, toGW, toGWh, toGigawatts, toISOString, toInches, toInteger, toKA, toKV, toKW, toKelvin, toKiloamps, toKilohms, toKilometers, toKilovolts, toKilowatts, toLowerCase, toMA, toMV, toMW, toMWh, toMegawatts, toMegohms, toMeters, toMiles, toMilliamps, toMillimeters, toMilliohms, toMillivolts, toNauticalMiles, toOhms, toOnOff, toPercentage, toRelativeTime, toScientificNotation, toSecret, toSentenceCase, toTemperature, toTitleCase, toTrueFalse, toUpperCase, toV, toVolts, toW, toWatts, toWh, toYards, tokWh, truncateEnd, truncateMiddle, truncateStart, ucFirst, useBreakpoint, useClientDataControls, useColorMode, useDataControls, useDebounce, useInfiniteScroll, useInputFocus, useLocalStorage, useMediaQuery, useNotice, useServerDataControls, wrapWithLink, yardsToMeters };