@rungalileo/jupiter-ds 0.0.1 → 0.0.3

package/dist/index.d.ts

@@ -1,3 +1,1309 @@
-export * from './lib/design-system';
-export * from './lib/components';
-//# sourceMappingURL=index.d.ts.map
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _mantine_core from '@mantine/core';
+import { MantineTheme, MantineProviderProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, BadgeProps as BadgeProps$1, TextInputProps, RadioProps as RadioProps$1, SwitchProps as SwitchProps$1, TabsProps as TabsProps$1, TextareaProps as TextareaProps$1, TooltipProps as TooltipProps$1, MenuProps, TableProps as TableProps$1, HoverCardProps } from '@mantine/core';
+export { TooltipProps as MantineTooltipProps } from '@mantine/core';
+import * as react from 'react';
+import react__default, { ReactNode, CSSProperties, JSX } from 'react';
+import { CodeHighlightTabsProps } from '@mantine/code-highlight';
+import { LinkProps } from 'next/link';
+import { DatePickerType, DatePickerProps, DateInputProps as DateInputProps$1, DateTimePickerProps as DateTimePickerProps$1 } from '@mantine/dates';
+import { ColumnDef, RowSelectionState, OnChangeFn, SortingState } from '@tanstack/react-table';
+export { ColumnDef, RowSelectionState } from '@tanstack/react-table';
+
+/**
+ * Component Variants
+ * Custom variants and dynamic styling for components
+ * THIS FILE IS NOT USED YET
+ */
+declare const buttonVariants: {
+    readonly 'gray-outline': {
+        readonly vars: {
+            readonly '--button-color': "#4b5563";
+        };
+    };
+};
+declare const createButtonVars: (theme: any, props: any) => {
+    root: {
+        '--button-color': any;
+    };
+} | {
+    root: {
+        '--button-color'?: undefined;
+    };
+};
+declare const componentVariantVariables: {
+    readonly '--button-gray-outline-color': "#4b5563";
+};
+type ButtonVariant = keyof typeof buttonVariants;
+
+/**
+ * Design Tokens - Colors
+ * Based on existing Mantine theme from client-legacy
+ */
+declare const colors: {
+    brand: readonly ["#f6f5ff", "#eeebfe", "#ddd7fe", "#bab0fd", "#8674fb", "#644DF9", "#4a2ff9", "#1d06b2", "#130477", "#0a023b", "#0085FF", "#DAEAFD"];
+    base: readonly ["#000000", "#ffffff", "#ffffff00"];
+    slate: readonly ["#f8fafc", "#f1f5f9", "#e2e8f0", "#cbd5e1", "#94a3b8", "#64748b", "#475569", "#334155", "#1e293b", "#0f172a", "#020617"];
+    gray: readonly ["#f9fafb", "#f3f4f6", "#e5e7eb", "#d1d5db", "#9ca3af", "#6b7280", "#4b5563", "#374151", "#1f2937", "#111827", "#030712"];
+    zinc: readonly ["#fafafa", "#f4f4f5", "#e4e4e7", "#d4d4d8", "#a1a1aa", "#71717a", "#52525b", "#3f3f46", "#27272a", "#18181b", "#09090b"];
+    neutral: readonly ["#fafafa", "#f5f5f5", "#e5e5e5", "#d4d4d4", "#a3a3a3", "#737373", "#525252", "#404040", "#262626", "#171717", "#0a0a0a"];
+    stone: readonly ["#fafaf9", "#f5f5f4", "#e7e5e4", "#d6d3d1", "#a8a29e", "#78716c", "#57534e", "#44403c", "#292524", "#1c1917", "#0c0a09"];
+    red: readonly ["#fef2f2", "#fee2e2", "#fecaca", "#fca5a5", "#f87171", "#ef4444", "#dc2626", "#b91c1c", "#991b1b", "#7f1d1d", "#450a0a"];
+    orange: readonly ["#fff7ed", "#ffedd5", "#fed7aa", "#fdba74", "#fb923c", "#f97316", "#ea580c", "#c2410c", "#9a3412", "#7c2d12", "#431407"];
+    amber: readonly ["#fffbeb", "#fef3c7", "#fde68a", "#fcd34d", "#fbbf24", "#f59e0b", "#d97706", "#b45309", "#92400e", "#78350f", "#451a03"];
+    yellow: readonly ["#fefce8", "#fef9c3", "#fef08a", "#fde047", "#facc15", "#eab308", "#ca8a04", "#a16207", "#854d0e", "#713f12", "#422006"];
+    lime: readonly ["#f7fee7", "#ecfccb", "#d9f99d", "#bef264", "#a3e635", "#84cc16", "#65a30d", "#4d7c0f", "#3f6212", "#365314", "#1a2e05"];
+    green: readonly ["#f0fdf4", "#dcfce7", "#bbf7d0", "#86efac", "#4ade80", "#22c55e", "#16a34a", "#15803d", "#166534", "#14532d", "#052e16"];
+    emerald: readonly ["#ecfdf5", "#d1fae5", "#a7f3d0", "#6ee7b7", "#34d399", "#10b981", "#059669", "#047857", "#065f46", "#064e3b", "#022c22"];
+    teal: readonly ["#f0fdfa", "#ccfbf1", "#99f6e4", "#5eead4", "#2dd4bf", "#14b8a6", "#0d9488", "#0f766e", "#115e59", "#134e4a", "#042f2e"];
+    cyan: readonly ["#ecfeff", "#cffafe", "#a5f3fc", "#67e8f9", "#22d3ee", "#06b6d4", "#0891b2", "#0e7490", "#155e75", "#164e63", "#083344"];
+    sky: readonly ["#f0f9ff", "#e0f2fe", "#bae6fd", "#7dd3fc", "#38bdf8", "#0ea5e9", "#0284c7", "#0369a1", "#075985", "#0c4a6e", "#082f49"];
+    blue: readonly ["#eff6ff", "#dbeafe", "#bfdbfe", "#93c5fd", "#60a5fa", "#3b82f6", "#2563eb", "#1d4ed8", "#1e40af", "#1e3a8a", "#172554"];
+    indigo: readonly ["#eef2ff", "#e0e7ff", "#c7d2fe", "#a5b4fc", "#818cf8", "#6366f1", "#4f46e5", "#4338ca", "#3730a3", "#312e81", "#1e1b4b"];
+    violet: readonly ["#f5f3ff", "#ede9fe", "#ddd6fe", "#c4b5fd", "#a78bfa", "#8b5cf6", "#7c3aed", "#6d28d9", "#5b21b6", "#4c1d95", "#2e1065"];
+    purple: readonly ["#faf5ff", "#f3e8ff", "#e9d5ff", "#d8b4fe", "#c084fc", "#a855f7", "#9333ea", "#7e22ce", "#6b21a8", "#581c87", "#3b0764"];
+    fuchsia: readonly ["#fdf4ff", "#fae8ff", "#f5d0fe", "#f0abfc", "#e879f9", "#d946ef", "#c026d3", "#a21caf", "#86198f", "#701a75", "#4a044e"];
+    pink: readonly ["#fdf2f8", "#fce7f3", "#fbcfe8", "#f9a8d4", "#f472b6", "#ec4899", "#db2777", "#be185d", "#9d174d", "#831843", "#500724"];
+    rose: readonly ["#fff1f2", "#ffe4e6", "#fecdd3", "#fda4af", "#fb7185", "#f43f5e", "#e11d48", "#be123c", "#9f1239", "#881337", "#4c0519"];
+};
+
+/**
+ * Spacing Configuration
+ * Based on Mantine's defaultRadius configuration
+ */
+declare const radius: {
+    readonly xxs: "0.125rem";
+    readonly xs: "0.25rem";
+    readonly sm: "0.375rem";
+    readonly md: "0.5rem";
+    readonly lg: "0.625rem";
+    readonly xl: "0.175rem";
+    readonly full: "9999px";
+};
+type RadiusToken = keyof typeof radius;
+/**
+ * Z-Index & Layout Constants
+ * Based on existing client-legacy Z_INDEX constants
+ */
+declare const zIndex: {
+    readonly negative: "-1";
+    readonly zero: "0";
+    readonly base: "1";
+    readonly overlays: "2";
+    readonly stickyContent: "10";
+    readonly stickySubHeader: "11";
+    readonly stickyHeader: "12";
+    readonly dropdowns: "100";
+    readonly drawers: "9996";
+    readonly subModal: "9997";
+    readonly modals: "9998";
+    readonly tooltips: "9999";
+};
+type ZIndexToken = keyof typeof zIndex;
+/**
+ * Spacing Configuration
+ * Based on 4px base unit (0.25rem)
+ */
+declare const spacing: {
+    readonly xs: "0.5rem";
+    readonly sm: "0.75rem";
+    readonly md: "1rem";
+    readonly lg: "1.25rem";
+    readonly xl: "1.5rem";
+    readonly 1: "0.25rem";
+    readonly 2: "0.375rem";
+    readonly 3: "0.75rem";
+    readonly 4: "1rem";
+    readonly 5: "1.25rem";
+    readonly 6: "1.5rem";
+    readonly 7: "1.75rem";
+    readonly 8: "2rem";
+    readonly 9: "2.25rem";
+    readonly 10: "2.5rem";
+};
+type SpacingToken = keyof typeof spacing;
+/**
+ * Shadow Configuration
+ */
+declare const shadows: {
+    readonly xs: "0 1px 2px rgba(0, 0, 0, 0.05)";
+    readonly sm: "0 1px 3px rgba(0, 0, 0, 0.1)";
+    readonly md: "0 4px 6px rgba(0, 0, 0, 0.1)";
+    readonly lg: "0 10px 15px rgba(0, 0, 0, 0.1)";
+    readonly xl: "0 20px 25px rgba(0, 0, 0, 0.1)";
+};
+type ShadowToken = keyof typeof shadows;
+
+/**
+ * Typography Configuration
+ */
+declare const typography: {
+    readonly fontFamily: {
+        readonly sans: "Inter, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"";
+        readonly mono: "Fira Mono, ui-monospace, SFMono-Regular, \"Menlo\", \"Monaco\", \"Consolas\", \"Liberation Mono\", \"Courier New\", monospace";
+    };
+    readonly fontSizes: {
+        base: string;
+        xs: string;
+        sm: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+    };
+    readonly lineHeights: {
+        readonly base: "24px";
+        readonly xs: "16px";
+        readonly sm: "20px";
+        readonly lg: "24px";
+        readonly xl: "28px";
+        readonly '2xl': "32px";
+        readonly '3xl': "36px";
+        readonly '4xl': "40px";
+        readonly '5xl': "48px";
+        readonly '6xl': "60px";
+        readonly '7xl': "72px";
+        readonly '8xl': "96px";
+        readonly '9xl': "128px";
+    };
+    readonly fontWeights: {
+        thin: string;
+        extralight: string;
+        light: string;
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+        extrabold: string;
+        black: string;
+    };
+};
+type TypographyToken = keyof typeof typography;
+
+/**
+ * Jupiter Design System Theme.
+ * Main theme configuration for Mantine Provider
+ * Supports light/dark color schemes via setColorScheme
+ */
+declare const jupiterTheme: {
+    focusRing?: "auto" | "always" | "never" | undefined;
+    scale?: number | undefined;
+    fontSmoothing?: boolean | undefined;
+    white?: string | undefined;
+    black?: string | undefined;
+    colors?: {
+        [x: string & {}]: _mantine_core.MantineColorsTuple | undefined;
+        dark?: _mantine_core.MantineColorsTuple | undefined;
+        gray?: _mantine_core.MantineColorsTuple | undefined;
+        red?: _mantine_core.MantineColorsTuple | undefined;
+        pink?: _mantine_core.MantineColorsTuple | undefined;
+        grape?: _mantine_core.MantineColorsTuple | undefined;
+        violet?: _mantine_core.MantineColorsTuple | undefined;
+        indigo?: _mantine_core.MantineColorsTuple | undefined;
+        blue?: _mantine_core.MantineColorsTuple | undefined;
+        cyan?: _mantine_core.MantineColorsTuple | undefined;
+        green?: _mantine_core.MantineColorsTuple | undefined;
+        lime?: _mantine_core.MantineColorsTuple | undefined;
+        yellow?: _mantine_core.MantineColorsTuple | undefined;
+        orange?: _mantine_core.MantineColorsTuple | undefined;
+        teal?: _mantine_core.MantineColorsTuple | undefined;
+    } | undefined;
+    primaryShade?: _mantine_core.MantineColorShade | {
+        light?: _mantine_core.MantineColorShade | undefined;
+        dark?: _mantine_core.MantineColorShade | undefined;
+    } | undefined;
+    primaryColor?: string | undefined;
+    variantColorResolver?: _mantine_core.VariantColorsResolver | undefined;
+    autoContrast?: boolean | undefined;
+    luminanceThreshold?: number | undefined;
+    fontFamily?: string | undefined;
+    fontFamilyMonospace?: string | undefined;
+    headings?: {
+        fontFamily?: string | undefined;
+        fontWeight?: string | undefined;
+        textWrap?: "balance" | "nowrap" | "wrap" | "stable" | "pretty" | undefined;
+        sizes?: {
+            h1?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h2?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h3?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h4?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h5?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+            h6?: {
+                fontSize?: string | undefined;
+                fontWeight?: string | undefined;
+                lineHeight?: string | undefined;
+            } | undefined;
+        } | undefined;
+    } | undefined;
+    radius?: {
+        [x: string & {}]: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    defaultRadius?: _mantine_core.MantineRadius | undefined;
+    spacing?: {
+        [x: number]: string | undefined;
+        [x: string & {}]: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    fontSizes?: {
+        [x: string & {}]: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    lineHeights?: {
+        [x: string & {}]: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    breakpoints?: {
+        [x: string & {}]: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    shadows?: {
+        [x: string & {}]: string | undefined;
+        xs?: string | undefined;
+        sm?: string | undefined;
+        md?: string | undefined;
+        lg?: string | undefined;
+        xl?: string | undefined;
+    } | undefined;
+    respectReducedMotion?: boolean | undefined;
+    cursorType?: "default" | "pointer" | undefined;
+    defaultGradient?: {
+        from?: string | undefined;
+        to?: string | undefined;
+        deg?: number | undefined;
+    } | undefined;
+    activeClassName?: string | undefined;
+    focusClassName?: string | undefined;
+    components?: {
+        [x: string]: {
+            classNames?: any;
+            styles?: any;
+            vars?: any;
+            defaultProps?: any;
+        } | undefined;
+    } | undefined;
+    other?: {
+        [x: string]: any;
+    } | undefined;
+};
+/**
+ * CSS Variables Resolver for Jupiter DS
+ * Defines custom CSS variables that adapt to light/dark themes.
+ *
+ * Some Mantine CSS variables were recreated with the `--jds-*` prefix to keep
+ * Jupiter DS tokens and components isolated and free from style conflicts
+ * when used alongside legacy themes/components.
+ *
+ * Examples:
+ * - --mantine-spacing-2  → --jds-spacing-2
+ * - --mantine-font-size-sm → --jds-font-size-sm
+ * - --color-primary → --jds-color-primary
+ */
+declare const jupiterCSSVariablesResolver: (theme: MantineTheme) => {
+    variables: {
+        '--jds-border-radius-rounded-xl': string;
+        '--jds-border-width-border': string;
+        '--jds-default-outline': string;
+        '--jds-default-outline-offset': string;
+        '--jds-color-destructive-outline': string;
+        '--jds-input-destructive-outline': string;
+        '--jds-input-outline': string;
+        '--jds-color-black': "#000000";
+        '--jds-color-brand-blue': "#0085FF";
+        '--jds-font-family-sans': "Inter, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"";
+        '--jds-font-family-mono': "Fira Mono, ui-monospace, SFMono-Regular, \"Menlo\", \"Monaco\", \"Consolas\", \"Liberation Mono\", \"Courier New\", monospace";
+        '--jds-spacing-xs': "0.5rem";
+        '--jds-spacing-sm': "0.75rem";
+        '--jds-spacing-md': "1rem";
+        '--jds-spacing-lg': "1.25rem";
+        '--jds-spacing-xl': "1.5rem";
+        '--jds-spacing-1': "0.25rem";
+        '--jds-spacing-2': "0.375rem";
+        '--jds-spacing-3': "0.75rem";
+        '--jds-spacing-4': "1rem";
+        '--jds-spacing-5': "1.25rem";
+        '--jds-spacing-6': "1.5rem";
+        '--jds-spacing-7': "1.75rem";
+        '--jds-spacing-8': "2rem";
+        '--jds-spacing-9': "2.25rem";
+        '--jds-spacing-10': "2.5rem";
+        '--jds-radius-xxs': "0.125rem";
+        '--jds-radius-xs': "0.25rem";
+        '--jds-radius-sm': "0.375rem";
+        '--jds-radius-md': "0.5rem";
+        '--jds-radius-lg': "0.625rem";
+        '--jds-radius-xl': "0.175rem";
+        '--jds-radius-full': "9999px";
+        '--jds-font-size-base': string;
+        '--jds-font-size-xs': string;
+        '--jds-font-size-sm': string;
+        '--jds-font-size-md': string;
+        '--jds-font-size-lg': string;
+        '--jds-font-size-xl': string;
+        '--jds-font-size-2xl': string;
+        '--jds-font-size-3xl': string;
+        '--jds-font-size-4xl': string;
+        '--jds-font-size-5xl': string;
+        '--jds-font-size-6xl': string;
+        '--jds-font-size-7xl': string;
+        '--jds-font-size-8xl': string;
+        '--jds-font-size-9xl': string;
+        '--jds-font-weight-thin': string;
+        '--jds-font-weight-extralight': string;
+        '--jds-font-weight-light': string;
+        '--jds-font-weight-normal': string;
+        '--jds-font-weight-medium': string;
+        '--jds-font-weight-semibold': string;
+        '--jds-font-weight-bold': string;
+        '--jds-font-weight-extrabold': string;
+        '--jds-font-weight-black': string;
+        '--jds-line-height-base': "24px";
+        '--jds-line-height-xs': "16px";
+        '--jds-line-height-sm': "20px";
+        '--jds-line-height-lg': "24px";
+        '--jds-line-height-xl': "28px";
+        '--jds-line-height-2xl': "32px";
+        '--jds-line-height-3xl': "36px";
+        '--jds-line-height-4xl': "40px";
+        '--jds-line-height-5xl': "48px";
+        '--jds-line-height-6xl': "60px";
+        '--jds-line-height-7xl': "72px";
+        '--jds-line-height-8xl': "96px";
+        '--jds-line-height-9xl': "128px";
+        '--jds-shadow-xs': "0 1px 2px rgba(0, 0, 0, 0.05)";
+        '--jds-shadow-sm': "0 1px 3px rgba(0, 0, 0, 0.1)";
+        '--jds-shadow-md': "0 4px 6px rgba(0, 0, 0, 0.1)";
+        '--jds-shadow-lg': "0 10px 15px rgba(0, 0, 0, 0.1)";
+        '--jds-shadow-xl': "0 20px 25px rgba(0, 0, 0, 0.1)";
+        '--jds-z-index-negative': "-1";
+        '--jds-z-index-zero': "0";
+        '--jds-z-index-base': "1";
+        '--jds-z-index-overlays': "2";
+        '--jds-z-index-stickyContent': "10";
+        '--jds-z-index-stickySubHeader': "11";
+        '--jds-z-index-stickyHeader': "12";
+        '--jds-z-index-dropdowns': "100";
+        '--jds-z-index-drawers': "9996";
+        '--jds-z-index-subModal': "9997";
+        '--jds-z-index-modals': "9998";
+        '--jds-z-index-tooltips': "9999";
+    };
+    light: {
+        '--jds-color-primary': "#9333ea";
+        '--jds-color-accent': "#f5f5f5";
+        '--jds-color-accent-foreground': "#171717";
+        '--jds-color-background': "#ffffff";
+        '--jds-color-border': "#e5e5e5";
+        '--jds-color-card': "#ffffff";
+        '--jds-color-card-foreground': "#0a0a0a";
+        '--jds-color-destructive': "#dc2626";
+        '--jds-color-destructive-foreground': "#fef2f2";
+        '--jds-color-foreground': "#0a0a0a";
+        '--jds-color-input': "#e5e5e5";
+        '--jds-color-input-background': "#ffffff";
+        '--jds-color-muted': "#f5f5f5";
+        '--jds-color-muted-foreground': "#737373";
+        '--jds-color-popover': "#171717";
+        '--jds-color-popover-foreground': "#f5f5f5";
+        '--jds-color-checkbox-background': "#ffffff";
+        '--jds-color-primary-foreground': "#fafafa";
+        '--jds-color-ring': "#a3a3a3";
+        '--jds-color-secondary': "#f5f5f5";
+        '--jds-color-secondary-foreground': "#171717";
+        '--jds-color-radio-input-background': "#ffffff";
+        '--jds-color-radio-input-primary': "#ffffff";
+        '--jds-color-radio-input-box-background': string;
+        '--jds-color-radio-input-box-primary': "#f5f5f5";
+        '--jds-color-radio-box-background': "#faf5ff";
+        '--jds-color-chart-1': "#ea580c";
+        '--jds-color-chart-2': "#0d9488";
+        '--jds-color-chart-3': "#164e63";
+        '--jds-color-chart-4': "#fbbf24";
+        '--jds-color-chart-5': "#f59e0b";
+        '--jds-color-codehighlight-background': "#f5f5f5";
+        '--jds-color-codehighlight-comment': "#737373";
+        '--jds-color-codehighlight-keyword': "#9333ea";
+        '--jds-color-codehighlight-tag': "#1d4ed8";
+        '--jds-color-codehighlight-literal': "#10b981";
+        '--jds-color-codehighlight-string': "#16a34a";
+        '--jds-color-codehighlight-variable': "#f3e8ff";
+        '--jds-color-codehighlight-class': "#f43f5e";
+        '--jds-color-codehighlight-number': "#1d4ed8";
+        '--jds-color-codehighlight-header-background': string;
+        '--jds-data-pill-number-bg': string;
+        '--jds-data-pill-number-color': "#000000";
+        '--jds-data-pill-positive-bg': "#dcfce7";
+        '--jds-data-pill-positive-color': "#15803d";
+        '--jds-data-pill-positive-bg-hover': "#bbf7d0";
+        '--jds-data-pill-neutral-bg': "#f3f4f6";
+        '--jds-data-pill-neutral-color': "#374151";
+        '--jds-data-pill-neutral-bg-hover': "#e5e7eb";
+        '--jds-data-pill-negative-bg': "#fee2e2";
+        '--jds-data-pill-negative-color': "#b91c1c";
+        '--jds-data-pill-negative-bg-hover': "#fecaca";
+        '--jds-data-pill-orange-bg': "#ffedd5";
+        '--jds-data-pill-orange-color': "#c2410c";
+        '--jds-data-pill-orange-bg-hover': "#fed7aa";
+        '--jds-data-pill-blue-bg': "#dbeafe";
+        '--jds-data-pill-blue-color': "#1d4ed8";
+        '--jds-data-pill-blue-bg-hover': "#bfdbfe";
+        '--jds-data-pill-purple-bg': "#f3e8ff";
+        '--jds-data-pill-purple-color': "#7e22ce";
+        '--jds-data-pill-purple-bg-hover': "#e9d5ff";
+        '--jds-color-neutral-0': "#fafafa";
+        '--jds-color-neutral-1': "#f5f5f5";
+        '--jds-color-neutral-2': "#e5e5e5";
+        '--jds-color-neutral-3': "#d4d4d4";
+        '--jds-color-neutral-4': "#a3a3a3";
+        '--jds-color-neutral-5': "#737373";
+        '--jds-color-neutral-6': "#525252";
+        '--jds-color-neutral-7': "#404040";
+        '--jds-color-neutral-8': "#262626";
+        '--jds-color-neutral-9': "#171717";
+        '--jds-color-menu-hover-bg': string;
+        '--jds-color-menu-hover-accent': string;
+        '--jds-color-hover-card-bg': "#DAEAFD";
+        '--jds-color-hover-card-border': "#0085FF";
+    };
+    dark: {
+        '--jds-color-primary': "#f3e8ff";
+        '--jds-color-accent': "#404040";
+        '--jds-color-accent-foreground': "#fafafa";
+        '--jds-color-background': "#0a0a0a";
+        '--jds-color-border': string;
+        '--jds-color-card': "#171717";
+        '--jds-color-card-foreground': "#fafafa";
+        '--jds-color-destructive': string;
+        '--jds-color-destructive-foreground': "#fef2f2";
+        '--jds-color-foreground': "#fafafa";
+        '--jds-color-input': string;
+        '--jds-color-input-background': string;
+        '--jds-color-muted': "#262626";
+        '--jds-color-muted-foreground': "#a3a3a3";
+        '--jds-color-popover': "#e5e5e5";
+        '--jds-color-popover-foreground': "#262626";
+        '--jds-color-checkbox-background': "#262626";
+        '--jds-color-primary-foreground': "#262626";
+        '--jds-color-ring': "#737373";
+        '--jds-color-secondary': "#262626";
+        '--jds-color-secondary-foreground': "#fafafa";
+        '--jds-color-radio-input-background': string;
+        '--jds-color-radio-input-primary': "#ffffff";
+        '--jds-color-radio-input-box-background': string;
+        '--jds-color-radio-input-box-primary': "#262626";
+        '--jds-color-radio-box-background': string;
+        '--jds-color-chart-1': "#1d4ed8";
+        '--jds-color-chart-2': "#10b981";
+        '--jds-color-chart-3': "#f59e0b";
+        '--jds-color-chart-4': "#a855f7";
+        '--jds-color-chart-5': "#f43f5e";
+        '--jds-color-codehighlight-background': "#171717";
+        '--jds-color-codehighlight-comment': "#737373";
+        '--jds-color-codehighlight-keyword': "#9333ea";
+        '--jds-color-codehighlight-tag': "#1d4ed8";
+        '--jds-color-codehighlight-literal': "#10b981";
+        '--jds-color-codehighlight-string': "#16a34a";
+        '--jds-color-codehighlight-variable': "#a855f7";
+        '--jds-color-codehighlight-class': "#f43f5e";
+        '--jds-color-codehighlight-number': "#1d4ed8";
+        '--jds-color-codehighlight-header-background': string;
+        '--jds-data-pill-number-bg': string;
+        '--jds-data-pill-number-color': "#ffffff";
+        '--jds-data-pill-positive-bg': "#1a2e05";
+        '--jds-data-pill-positive-color': "#86efac";
+        '--jds-data-pill-positive-bg-hover': "#365314";
+        '--jds-data-pill-neutral-bg': "#171717";
+        '--jds-data-pill-neutral-color': "#cbd5e1";
+        '--jds-data-pill-neutral-bg-hover': "#262626";
+        '--jds-data-pill-negative-bg': "#450a0a";
+        '--jds-data-pill-negative-color': "#fda4af";
+        '--jds-data-pill-negative-bg-hover': "#7f1d1d";
+        '--jds-data-pill-orange-bg': "#422006";
+        '--jds-data-pill-orange-color': "#fcd34d";
+        '--jds-data-pill-orange-bg-hover': "#713f12";
+        '--jds-data-pill-blue-bg': "#083344";
+        '--jds-data-pill-blue-color': "#93c5fd";
+        '--jds-data-pill-blue-bg-hover': "#164e63";
+        '--jds-data-pill-purple-bg': "#3b0764";
+        '--jds-data-pill-purple-color': "#d8b4fe";
+        '--jds-data-pill-purple-bg-hover': "#581c87";
+        '--jds-color-neutral-0': "#0a0a0a";
+        '--jds-color-neutral-1': "#171717";
+        '--jds-color-neutral-2': "#262626";
+        '--jds-color-neutral-3': "#404040";
+        '--jds-color-neutral-4': "#525252";
+        '--jds-color-neutral-5': "#737373";
+        '--jds-color-neutral-6': "#a3a3a3";
+        '--jds-color-neutral-7': "#d4d4d4";
+        '--jds-color-neutral-8': "#e5e5e5";
+        '--jds-color-neutral-9': "#f5f5f5";
+        '--jds-color-menu-hover-bg': string;
+        '--jds-color-menu-hover-accent': string;
+        '--jds-color-hover-card-bg': string;
+        '--jds-color-hover-card-border': "#DAEAFD";
+    };
+};
+declare const JupiterThemeProvider: ({ children, ...props }: {
+    children: React.ReactNode;
+} & MantineProviderProps) => react_jsx_runtime.JSX.Element;
+
+interface BadgeProps {
+    /**
+     * Badge variant
+     * @default 'default'
+     */
+    variant?: 'default' | 'secondary' | 'outline' | 'destructive';
+    /** @default 'md' */
+    size?: 'sm' | 'md';
+    /**
+     * Badge content
+     */
+    children: ReactNode;
+    /**
+     * Custom className for additional styling
+     */
+    className?: string;
+    /**
+     * Custom style object
+     */
+    style?: CSSProperties;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+    /**
+     * Click handler - makes the badge interactive
+     */
+    onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+    /**
+     * Tab index for keyboard navigation
+     * @default 0 when onClick is provided, -1 otherwise
+     */
+    tabIndex?: number;
+}
+/**
+ * Badge component based on Jupiter Design System
+ * A compact UI element used to display status, labels, or categorical information
+ */
+declare const Badge: react.NamedExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface ButtonProps extends Omit<ButtonProps$1, 'color' | 'variant' | 'size'> {
+    /**
+     * Button variant
+     * @default 'filled'
+     */
+    variant?: 'filled' | 'secondary' | 'destructive' | 'outline' | 'ghost';
+    /**
+     * Button size
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Whether the button is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button is loading. When loading is true, the button will be disabled.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Whether the button is an icon-only button
+     * @default false
+     */
+    icon?: boolean;
+    /**
+     * Click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Test ID for testing
+     */
+    'data-testid': string;
+}
+/**
+ * Button component with polymorphic support
+ * Can be rendered as any element using the `component` prop
+ * @example
+ * <Button component={Link} href="/path">Link Button</Button>
+ */
+declare const Button: (<C = "button">(props: _mantine_core.PolymorphicComponentProps<C, ButtonProps>) => React.ReactElement) & Omit<react.FunctionComponent<(ButtonProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, keyof ButtonProps | "component"> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+}) | (ButtonProps & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & Record<string, never>;
+
+interface CardProps {
+    /** Will be hidden if no title is provided */
+    title?: string;
+    /** Will be hidden if no description is provided */
+    description?: string;
+    /** Heading level for the title */
+    headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /** Content to be displayed inside the card */
+    children: ReactNode;
+    /** Additional CSS class name */
+    className?: string;
+    /** Custom CSS variables for dynamic styling */
+    style?: react__default.CSSProperties;
+    /** Test identifier for testing purposes */
+    'data-testid'?: string;
+    /** Click handler - when provided, card becomes a button for semantic accessibility */
+    onClick?: () => void;
+}
+/**
+ * Card component that provides a container with consistent spacing,
+ * border, shadow, and background styling following design system specifications.
+ *
+ * Uses semantic HTML structure - renders as div by default, but becomes
+ * a button when onClick is provided for proper accessibility.
+ */
+declare const Card: react__default.NamedExoticComponent<CardProps & react__default.RefAttributes<HTMLButtonElement | HTMLDivElement>>;
+
+interface CheckboxProps extends CheckboxProps$1 {
+    /** Main label text for the checkbox */
+    title?: string;
+    /** Optional description text below the title */
+    description?: string;
+    /** Test identifier for testing purposes */
+    'data-testid'?: string;
+}
+/**
+ * Checkbox component that provides a consistent checkbox input with optional
+ * title and description text following design system specifications.
+ *
+ * Uses semantic HTML structure with proper accessibility attributes.
+ * Supports both controlled and uncontrolled usage patterns.
+ */
+declare const Checkbox: react.NamedExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+interface CodeBlockProps {
+    code: string | CodeHighlightTabsProps['code'];
+    language?: string;
+    activeTab?: number;
+    onTabChange?: (tab: number) => void;
+    /**
+     * In case we need line numbers in the future, we can use the following code:
+     * https://v3.mantine.dev/others/prism/#line-numbers
+     */
+    className?: string;
+    style?: react__default.CSSProperties;
+    'data-testid'?: string;
+}
+/**
+ * CodeBlock component that displays code with syntax highlighting.
+ * Supports both single code blocks and multi-tab code blocks.
+ * Uses Jupiter Design System variables for consistent theming.
+ */
+declare const CodeBlock: react__default.NamedExoticComponent<CodeBlockProps & react__default.RefAttributes<HTMLDivElement>>;
+
+interface DataPillProps extends Omit<BadgeProps$1, 'children' | 'leftSection' | 'variant'> {
+    /** The value to display in the pill (e.g., percentage, count) */
+    value: ReactNode;
+    /** The sentiment or category variant @default 'neutral' */
+    variant?: 'positive' | 'neutral' | 'negative' | 'orange' | 'blue' | 'purple';
+    /** Custom className for additional styling */
+    className?: string;
+    /** Custom style object */
+    style?: CSSProperties;
+    /** Test ID for testing */
+    'data-testid'?: string;
+    /** Click handler */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /** ARIA label for accessibility */
+    'aria-label'?: string;
+    /** Left section content (icon, etc.) */
+    leftSection?: ReactNode;
+    /** Right content (number or text) */
+    rightContent?: string | number;
+}
+/**
+ * DataPill component for displaying data values with sentiment-based styling
+ * Built on top of Mantine Badge with custom variant styling
+ * Supports positive, neutral, and negative variants with automatic hover states
+ */
+declare const DataPill: react.NamedExoticComponent<DataPillProps & react.RefAttributes<HTMLDivElement>>;
+
+interface InputProps extends TextInputProps {
+    /** Main label text for the input field */
+    label?: string;
+    /** Optional description text below the input */
+    description?: string;
+    /** Position of the label relative to the input */
+    labelPosition?: 'above' | 'left';
+    /** Test identifier for testing purposes */
+    'data-testid'?: string;
+}
+/**
+ * Input component that provides a consistent text input with optional
+ * label and description text following design system specifications.
+ */
+declare const Input: react.NamedExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+type Files = File[] | null;
+interface FileInputProps {
+    /** Main label text for the file input field */
+    label?: string;
+    /** Optional description text below the input */
+    description?: string;
+    /** Position of the label relative to the input */
+    labelPosition?: 'above' | 'left';
+    /** Test identifier for testing purposes */
+    'data-testid'?: string;
+    /** Accept attribute for file input */
+    accept?: string;
+    /** Multiple files allowed */
+    multiple?: boolean;
+    /** File change handler */
+    onChange?: (files: Files) => void;
+    /** Current selected files */
+    value?: Files;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Input id */
+    id?: string;
+    /** Name attribute */
+    name?: string;
+    /** Whether the input is auto focused */
+    autoFocus?: boolean;
+}
+/**
+ * FileInput component that provides a consistent file input with optional
+ * label and description text following design system specifications.
+ */
+declare const FileInput: react.NamedExoticComponent<FileInputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface InteractiveChipRightSection {
+    /** Text to display in the right section */
+    text?: string;
+    /** Icon to show on hover (defaults to IconArrowUpRight) */
+    onHoverIcon?: ReactNode;
+}
+interface InteractiveChipProps extends Omit<BadgeProps$1, 'children' | 'rightSection'> {
+    /** The main text content to display */
+    children: ReactNode;
+    /** Right section content (text and/or hover icon) */
+    rightSection?: InteractiveChipRightSection;
+    /** Custom className for additional styling */
+    className?: string;
+    /** Custom style object */
+    style?: CSSProperties;
+    /** Test ID for testing */
+    'data-testid'?: string;
+    /** Click handler */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+/**
+ * InteractiveChip component for displaying interactive chip elements
+ * Built on top of Mantine Badge with custom right section functionality
+ * Supports text content with optional right section (text and hover icon)
+ */
+declare const InteractiveChip: react.NamedExoticComponent<InteractiveChipProps & react.RefAttributes<HTMLDivElement>>;
+
+interface JupiterLinkProps {
+    /** Type of link component */
+    linkType?: 'internal-link' | 'external-link' | 'as-button';
+    /** Link destination (href for internal/external, undefined for as-button) */
+    href?: LinkProps['href'];
+    /** Click handler (primarily for as-button type) */
+    onClick?: (event: React.MouseEvent) => void;
+    /** Children content */
+    children: React.ReactNode;
+    /** Whether link is disabled */
+    disabled?: boolean;
+    /** Additional CSS class */
+    className?: string;
+    /** CSS variables only */
+    style?: React.CSSProperties;
+    /** Required test ID */
+    'data-testid': string;
+    /** Open in new tab (for external-link) */
+    target?: string;
+    /** Additional props forwarded to underlying component */
+    [key: string]: any;
+}
+/**
+ * Link component based on Jupiter Design System
+ * Supports three types: internal-link (Next.js), external-link (Mantine Anchor), and as-button (UnstyledButton)
+ *
+ * **Please always** use the `href` prop to define the link destination, and avoid using a button without an `href` or without an anchor element.
+ */
+declare const Link: react.NamedExoticComponent<JupiterLinkProps>;
+
+interface RadioProps extends RadioProps$1 {
+    /** A radio group is defined by giving each of radio buttons in the group the same name. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/radio#defining_a_radio_group */
+    name?: string;
+    /** Main label text for the radio button */
+    title?: string;
+    /** Optional description text below the title */
+    description?: string;
+    /** Variant of the radio button */
+    variant?: 'default' | 'box';
+    /** Test identifier for testing purposes */
+    'data-testid'?: string;
+}
+/**
+ * Radio component that provides a consistent radio input with optional
+ * title and description text following design system specifications.
+ *
+ * Supports two variants:
+ * - default: Standard radio button with label
+ * - box: Radio button within a card-like container
+ *
+ * Supports both controlled and uncontrolled usage patterns.
+ */
+declare const Radio: react.NamedExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+
+interface SwitchProps extends Omit<SwitchProps$1, 'description'> {
+    /** Switch label */
+    label?: ReactNode;
+    /** Switch description */
+    description?: string;
+    /** Switch visual variant */
+    variant?: 'switch' | 'box';
+    /** Switch alignment */
+    alignment?: 'left' | 'right';
+    /** Test identifier for testing purposes */
+    'data-testid'?: string;
+}
+/**
+ * Switch component that provides a toggle control for binary choices.
+ *
+ * Built on top of Mantine Switch with custom Jupiter DS styling and variants.
+ * Supports controlled and uncontrolled modes.
+ */
+declare const Switch: react.NamedExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
+
+type TabsVariant = 'pills' | 'line';
+interface TabItem {
+    /** Unique identifier for the tab */
+    value: string;
+    /** Tab label text or element */
+    label: ReactNode;
+    /** Tab content. If not provided, you will need to control the content outside the Tabs component.*/
+    children?: ReactNode;
+    /** Tab icon (optional) */
+    icon?: ReactNode;
+    /** Badge content (optional) */
+    badge?: string | number;
+    /** Whether the tab is disabled */
+    disabled?: boolean;
+    /** Test identifier for testing purposes */
+    'data-testid'?: string;
+}
+interface TabsProps extends Omit<TabsProps$1, 'children' | 'variant'> {
+    /** Variant (supports Mantine and Jupiter DS variants) */
+    variant?: TabsProps$1['variant'] | TabsVariant;
+    /** Array of tab items */
+    items: TabItem[];
+    /** Currently active tab value */
+    value?: string;
+    /** Default active tab value */
+    defaultValue?: string;
+    /** Callback fired when tab changes */
+    onTabChange?: (value: string | null) => void;
+    /** Test identifier for testing purposes */
+    'data-testid'?: string;
+}
+/**
+ * Tabs component that provides a tabbed interface for organizing content.
+ *
+ * Built on top of Mantine Tabs with custom Jupiter DS styling.
+ * Supports controlled and uncontrolled modes, icons, badges, and accessibility.
+ */
+declare const Tabs: react.NamedExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>>;
+
+interface TextareaProps extends TextareaProps$1 {
+    /** Main label text for the textarea field */
+    label?: string;
+    /** Optional description text below the textarea */
+    description?: string;
+    /** Position of the label relative to the textarea */
+    labelPosition?: 'above' | 'left';
+    /** Test identifier for testing purposes */
+    'data-testid'?: string;
+}
+/**
+ * Textarea component that provides a consistent multi-line text input with optional
+ * label and description text following design system specifications.
+ */
+declare const Textarea: react.NamedExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+interface TooltipProps extends TooltipProps$1 {
+    /**
+     * Test ID for testing and automation purposes
+     */
+    'data-testid'?: string;
+}
+/**
+ * Tooltip atom, wrapper around Mantine Tooltip with Jupiter DS defaults
+ */
+declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLDivElement>>;
+
+interface CalendarProps<Type extends DatePickerType = 'default'> extends DatePickerProps<Type> {
+    /** Additional CSS class name for the calendar wrapper */
+    className?: string;
+    /** Additional inline styles (for CSS variables only) */
+    style?: React.CSSProperties;
+    /** Data test id for testing */
+    'data-testid'?: string;
+}
+/**
+ * Calendar component for date selection using Mantine DatePicker
+ * Supports single (default), range, and multiple date selection with built-in navigation.
+ * NOTE: the onChange will be different based on the type of calendar.
+ */
+declare function Calendar<Type extends DatePickerType = 'default'>({ className, style, 'data-testid': dataTestId, type, ...props }: CalendarProps<Type>): react_jsx_runtime.JSX.Element;
+declare namespace Calendar {
+    var displayName: string;
+}
+
+interface DateInputProps extends Omit<DateInputProps$1, 'classNames'> {
+    /** Additional CSS class name for the input */
+    className?: string;
+    /** Additional inline styles (for CSS variables only) */
+    style?: React.CSSProperties;
+    /** Data test id for testing */
+    'data-testid'?: string;
+}
+/**
+ * DateInput component for date selection with text input and calendar popup.
+ * Shares calendar styling with Calendar and DateTimePicker components.
+ *
+ * Features:
+ * - Free-form date input with format validation
+ * - Calendar popup for date selection
+ * - Optional clear button
+ * - Min/max date constraints
+ * - Custom date parsing
+ */
+declare const DateInput: react.NamedExoticComponent<DateInputProps>;
+
+interface DateTimePickerProps extends Omit<DateTimePickerProps$1, 'classNames'> {
+    /** Additional CSS class name for the input */
+    className?: string;
+    /** Additional inline styles (for CSS variables only) */
+    style?: React.CSSProperties;
+    /** Data test id for testing */
+    'data-testid'?: string;
+}
+/**
+ * DateTimePicker component for date and time selection with text input and calendar popup.
+ * Shares calendar styling with Calendar and DateInput components.
+ *
+ * Features:
+ * - Date and time input with format validation
+ * - Calendar popup for date selection
+ * - Time selection integrated in the input
+ * - Optional clear button
+ * - Min/max date constraints
+ * - Support for seconds
+ */
+declare const DateTimePicker: react.NamedExoticComponent<DateTimePickerProps>;
+
+/**
+ * Shared classNames for all calendar-based components.
+ * These classes provide consistent styling across Calendar, DateInput, and DateTimePicker.
+ *
+ * Usage:
+ * ```tsx
+ * <MantineDatePicker classNames={calendarClassNames} />
+ * <MantineDateInput classNames={calendarClassNames} />
+ * ```
+ */
+declare const calendarClassNames: {
+    readonly calendarHeader: string;
+    readonly calendarHeaderLevel: string;
+    readonly calendarHeaderControl: string;
+    readonly levelsGroup: string;
+    readonly yearsList: string;
+    readonly yearsListCell: string;
+    readonly yearsListControl: string;
+    readonly monthsList: string;
+    readonly monthsListCell: string;
+    readonly monthsListControl: string;
+    readonly month: string;
+    readonly monthThead: string;
+    readonly monthCell: string;
+    readonly day: string;
+};
+
+type TimeRangeType = 'last5Mins' | 'last15Mins' | 'last30Mins' | 'lastHour' | 'last3Hours' | 'last6Hours' | 'last12Hours' | 'last24Hours' | 'last2Days' | 'lastWeek' | 'lastMonth' | 'last6Months' | 'lastYear' | 'custom';
+interface TimeRangeOption {
+    /** Display label for the option */
+    label: string;
+    /** Value identifier */
+    value: TimeRangeType;
+}
+interface TimeRangeValue {
+    /** Selected time range type */
+    type: TimeRangeType;
+    /** Custom start date (ISO string) */
+    customStart?: string;
+    /** Custom end date (ISO string) */
+    customEnd?: string;
+    /** Custom start time (HH:mm:ss format) */
+    customFromTime?: string;
+    /** Custom end time (HH:mm:ss format) */
+    customToTime?: string;
+}
+interface TimeRangeSwitchProps {
+    /** Current value */
+    value: TimeRangeValue;
+    /** Callback when value changes */
+    onChange: (value: TimeRangeValue) => void;
+    /** Quick segment options (shown as buttons) */
+    segmentOptions?: TimeRangeOption[];
+    /** All time range options for dropdown menu */
+    menuOptions?: TimeRangeOption[];
+    /** Whether the dropdown menu is open */
+    isMenuOpen?: boolean;
+    /** Callback when menu open state changes */
+    onMenuOpenChange?: (isOpen: boolean) => void;
+    /** Maximum selectable date (defaults to today) */
+    maxDate?: Date;
+    /** Minimum time range in milliseconds */
+    minRangeMs?: number;
+    /** Timezone display string */
+    timezone?: string;
+    /** Additional CSS class name */
+    className?: string;
+    /** Additional inline styles (for CSS variables only) */
+    style?: React.CSSProperties;
+    /** Data test id for testing */
+    'data-testid'?: string;
+}
+/**
+ * TimeRangeSwitch component for selecting time ranges.
+ *
+ * Features:
+ * - Quick segment options (12H, 1D, 1W, etc.)
+ * - Dropdown with all relative time options
+ * - Custom absolute date/time range picker
+ * - Timezone display
+ * - Validation for minimum range
+ */
+declare const TimeRangeSwitch: react.NamedExoticComponent<TimeRangeSwitchProps & react.RefAttributes<HTMLDivElement>>;
+
+type DropdownMenuItemType = 'checkbox' | 'radio' | 'text' | 'title' | 'link' | 'divider' | 'menu';
+interface DropdownMenuItem {
+    /** Unique identifier for the item, used for click handling */
+    value: string;
+    /** Type of the menu item */
+    type: DropdownMenuItemType;
+    /** Label text for the item */
+    label?: string | ReactNode;
+    /** URL for link type items */
+    url?: string;
+    /** Left content (icons, radio buttons, checkboxes, etc.) */
+    leftContent?: JSX.Element;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** For checkbox and radio items - whether they are checked */
+    checked?: boolean;
+    /** For radio items - the radio group name */
+    radioGroup?: string;
+    /** For menu type - submenu items */
+    submenu?: DropdownMenuItem[];
+    /** Additional CSS class name */
+    className?: string;
+    /** Whether to close the menu on item click */
+    closeMenuOnClick?: boolean;
+    /** Description for the item */
+    description?: string;
+    /** Whether to truncate the label text. Defaults to true. */
+    truncate?: boolean;
+    /** Whether to allow word wrapping. When true, text will wrap to multiple lines instead of truncating. */
+    wordWrap?: boolean;
+    /** Maximum width of the item label. `IF NOT PROVIDED, THE LABEL MAY NOT BE TRUNCATED`. */
+    maxWidth?: string;
+}
+interface DropdownMenuProps extends Omit<MenuProps, 'children'> {
+    /** Array of menu items configuration. Should be memoized for better performance. */
+    items: DropdownMenuItem[];
+    /** Trigger element for the dropdown */
+    children?: ReactNode;
+    /** Label for the default dropdown button */
+    label?: string | ReactNode;
+    /** Handler for checkbox changes. This handler should be memoized. */
+    onCheckboxChange?: (itemValue: string, checked: boolean) => void;
+    /** Handler for radio group changes. This handler should be memoized. */
+    onRadioChange?: (groupName: string, itemValue: string) => void;
+    /** Handler for item clicks (text, link types). This handler should be memoized. */
+    onItemClick?: (itemValue: string, event?: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Enable search functionality in the dropdown */
+    canSearch?: boolean;
+    /** Handler for search input changes. This handler should be memoized. */
+    onChangeSearch?: (value: string) => void;
+    /** Current search value (controlled input) */
+    searchValue?: string;
+    /** Placeholder text for the search input */
+    searchPlaceholder?: string;
+    /** Style for the default button with dots icon */
+    dotsStyle?: 'vertical' | 'horizontal';
+    /** Maximum height of the dropdown menu. Defaults to 300px. Set to 0 to disable. */
+    maxHeight?: number;
+    /** Maximum width of the dropdown menu. */
+    maxWidthDropdown?: number | string;
+    /** Maximum width of the trigger element (default button). */
+    maxWidthTrigger?: number | string;
+    /** Width of the trigger element (default button). */
+    widthTrigger?: number | string;
+    style?: React.CSSProperties;
+}
+/**
+ * Flexible dropdown menu component that supports various item types
+ * including checkboxes, radio buttons, links, titles, dividers, and nested menus
+ */
+declare const DropdownMenu: React.FC<DropdownMenuProps>;
+
+interface TableProps<T> extends Omit<TableProps$1, 'children' | 'data'> {
+    /** TanStack Table column definitions */
+    columns: ColumnDef<T, any>[];
+    /** Array of data rows */
+    data: T[];
+    /** Table caption */
+    caption?: string;
+    /** Whether to show table footer */
+    showFooter?: boolean;
+    /** Footer content */
+    footerContent?: ReactNode;
+    /** Handler for row click */
+    onRowClick?: (row: T) => void;
+    /** Additional CSS class name */
+    className?: string;
+    /** Whether to use tabular numbers for better alignment */
+    tabularNums?: boolean;
+    /** Whether to highlight rows on hover */
+    highlightOnHover?: boolean;
+    /** Whether to show column borders */
+    withColumnBorders?: boolean;
+    /** Whether to show loading skeleton */
+    isLoading?: boolean;
+    /** Whether to enable row selection with checkboxes */
+    enableRowSelection?: boolean;
+    /** Row selection state (controlled) */
+    rowSelection?: RowSelectionState;
+    /** Handler for row selection change (controlled) */
+    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+    /** Function to get unique row ID */
+    getRowId?: (row: T, index: number) => string;
+    /** Whether to enable sorting */
+    enableSorting?: boolean;
+    /** Sorting state (controlled) */
+    sorting?: SortingState;
+    /** Handler for sorting change (controlled) */
+    onSortingChange?: OnChangeFn<SortingState>;
+    /** Maximum height of the table (enables vertical scrolling with sticky header) */
+    maxHeight?: number | string;
+}
+/**
+ * Flexible table component built with TanStack Table and Mantine.
+ *
+ * Follows Jupiter DS design patterns.
+ *
+ * If you need to set the width of a column, you can do it by setting the `size` property of the column.
+ *
+ * Set the `size` property to `0` to make the column width auto-adjust to the content.
+ */
+declare const Table: <T>(props: TableProps<T> & {
+    ref?: React.ForwardedRef<HTMLTableElement>;
+}) => React.ReactElement;
+
+interface DetailedPopoverProps extends Omit<HoverCardProps, 'children' | 'width'> {
+    /** Node that triggers the popover when hovered */
+    trigger: ReactNode;
+    /** Main title displayed at the top of the dropdown */
+    title?: ReactNode;
+    /** Subtitle displayed under the title */
+    subtitle?: ReactNode;
+    /** Primary body content */
+    body?: ReactNode;
+    /** Footer area rendered at the bottom of the dropdown */
+    footer?: ReactNode;
+    /** Optional class applied to the dropdown container */
+    dropdownClassName?: string;
+    /** Optional class applied to the internal content wrapper */
+    contentClassName?: string;
+    /** Custom dropdown width (number becomes px) */
+    dropdownWidth?: number | string;
+    /** Custom dropdown max-height (number becomes px) */
+    dropdownMaxHeight?: number | string;
+    /** Test id applied to the dropdown element */
+    'data-testid'?: string;
+    /** Test id applied to the trigger element */
+    triggerTestId?: string;
+    /** Custom inline style applied to the header wrapper */
+    headerInlineStyle?: CSSProperties;
+    /** Custom inline style applied to the body wrapper */
+    bodyInlineStyle?: CSSProperties;
+    /** Custom inline style applied to the footer wrapper */
+    footerInlineStyle?: CSSProperties;
+}
+/**
+ * Generic popover that can present titles, subtitles, body, and footer.
+ * Built on Mantine HoverCard with Jupiter DS styling.
+ */
+declare const DetailedPopover: react.NamedExoticComponent<DetailedPopoverProps>;
+
+declare const TemporaryFakeOrganism: () => null;
+
+export { Badge, Button, Calendar, Card, Checkbox, CodeBlock, DataPill, DateInput, DateTimePicker, DetailedPopover, DropdownMenu, FileInput, Input, InteractiveChip, JupiterThemeProvider, Link, Radio, Switch, Table, Tabs, TemporaryFakeOrganism, Textarea, TimeRangeSwitch, Tooltip, buttonVariants, calendarClassNames, colors, componentVariantVariables, createButtonVars, jupiterCSSVariablesResolver, jupiterTheme, radius, shadows, spacing, typography, zIndex };
+export type { BadgeProps, ButtonProps, ButtonVariant, CalendarProps, CardProps, CheckboxProps, CodeBlockProps, DataPillProps, DateInputProps, DateTimePickerProps, DetailedPopoverProps, DropdownMenuItem, DropdownMenuItemType, DropdownMenuProps, FileInputProps, InputProps, InteractiveChipProps, InteractiveChipRightSection, JupiterLinkProps as LinkProps, RadioProps, RadiusToken, ShadowToken, SpacingToken, SwitchProps, TabItem, TableProps, TabsProps, TabsVariant, TextareaProps, TimeRangeOption, TimeRangeSwitchProps, TimeRangeType, TimeRangeValue, TooltipProps, TypographyToken, ZIndexToken };