// Generated by dts-bundle-generator v7.2.0

import React from 'react';
import { ButtonHTMLAttributes, ComponentPropsWithRef, DragEvent, HTMLAttributes, ImgHTMLAttributes, InputHTMLAttributes, OptgroupHTMLAttributes, OptionHTMLAttributes, PropsWithChildren, ReactElement, ReactNode, RefObject, SVGAttributes } from 'react';

export interface SkeletonProperties {
	/**
	 * Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
	 */
	width: string;
	/**
	 * Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.
	 */
	height: string;
	/**
	 * The border radius of the skeleton.
	 */
	borderRadius?: string;
	/**
	 * This is an attribute used to identify a DOM node for testing purposes.
	 */
	"data-testid"?: string;
}
export type SkeletonProps = SkeletonProperties & HTMLAttributes<HTMLDivElement>;
export declare const Skeleton: React.FC<SkeletonProps>;
export type BadgeSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "height" | "className">> & {
	/**
	 * Change the badge skeleton type between a text counter and a dot indicator.
	 * @default text
	 */
	type?: "text" | "dot";
	/**
	 * This is an attribute used to identify a DOM node for testing purposes.
	 */
	"data-testid"?: string;
};
export type BadgeSkeletonProps = BadgeSkeletonProperties;
declare const BadgeSkeleton: React.FC<BadgeSkeletonProps>;
export interface BadgeComponents {
	Skeleton: typeof BadgeSkeleton;
}
export interface BadgeProperties {
	/**
	 * Change the visual style of the badge.
	 * @default neutral
	 */
	appearance?: "primary" | "success" | "warning" | "danger" | "neutral";
	/**
	 * Total items to be displayed without badge
	 */
	count?: number | string;
	/**
	 * Change the color scheme of the badge.
	 * @default surface
	 */
	theme?: "surface" | "light";
	/**
	 * Change the badge type between a text counter and a dot indicator.
	 * @default text
	 */
	type?: "text" | "dot";
}
export type BadgeProps = BadgeProperties & HTMLAttributes<HTMLElement>;
export declare const Badge: React.FC<BadgeProps> & BadgeComponents;
export type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
export type ForwardRefExoticComponent<E, OwnProps> = React.ForwardRefExoticComponent<Merge<E extends React.ElementType ? React.ComponentPropsWithRef<E> : never, OwnProps & {
	as?: E;
}>>;
export interface PolymorphicForwardRefComponent<IntrinsicElementString, OwnProps = {}
/**
 * Extends original type to ensure built in React types play nice
 * with polymorphic components still e.g. `React.ElementRef` etc.
 */
> extends ForwardRefExoticComponent<IntrinsicElementString, OwnProps> {
	/**
	 * When `as` prop is passed, use this overload.
	 * Merges original own props (without DOM props) and the inferred props
	 * from `as` element with the own props taking precendence.
	 *
	 * We explicitly avoid `React.ElementType` and manually narrow the prop types
	 * so that events are typed when using JSX.IntrinsicElements.
	 */
	<As = IntrinsicElementString>(props: As extends "" ? {
		as: keyof React.JSX.IntrinsicElements;
	} : As extends React.ComponentType<infer P> ? Merge<P, OwnProps & {
		as: As;
	}> : As extends keyof React.JSX.IntrinsicElements ? Merge<React.JSX.IntrinsicElements[As], OwnProps & {
		as: As;
	}> : never): React.ReactElement | null;
}
export interface Conditions<T> {
	xs?: T;
	md?: T;
	lg?: T;
	xl?: T;
	xxl?: T;
}
export type AspectRatio = "1/1" | "16/9" | "9/16" | "4/3" | "3/4" | "2/1" | "1/2";
export type BorderStyle = "solid" | "none" | "hidden" | "dashed" | "dotted";
export type BoxSizing = "border-box" | "content-box";
export type Cursor = "auto" | "pointer" | "not-allowed" | "grab" | "inherit";
export type Display = "block" | "flex" | "inline-flex" | "grid" | "inline-grid" | "none";
export type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
export type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
export type JustifyContent = "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
export type AlignItems = "stretch" | "flex-start" | "flex-end" | "center" | "baseline";
export type AlignSelf = "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
export type TextAlign = "left" | "right" | "center" | "justify";
export type TextDecoration = "none" | "underline" | "line-through";
export type Position = "absolute" | "fixed" | "relative" | "static" | "sticky";
export type Overflow = "visible" | "hidden" | "scroll" | "auto";
export type PointerEvents = "auto" | "none" | "visiblePainted" | "visibleFill" | "visibleStroke" | "visible" | "painted" | "fill" | "stroke" | "all" | "inherit";
export type TransitionTiming = "ease" | "ease-in" | "ease-out" | "ease-in-out" | "linear" | "step-start" | "step-end";
export type WordBreak = "normal" | "break-all" | "keep-all" | "break-word";
export type TextOverflow = "clip" | "ellipsis";
export type WhiteSpace = "normal" | "nowrap" | "pre" | "pre-wrap" | "pre-line" | "break-spaces";
export type ScrollbarWidth = "auto" | "none" | "thin";
declare const propertiesBox: {
	gap: {
		none: string;
		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	gridGap: {
		none: string;
		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	display: Display[];
	flexDirection: FlexDirection[];
	flexWrap: FlexWrap[];
	justifyContent: JustifyContent[];
	alignItems: AlignItems[];
	alignSelf: AlignSelf[];
	pointerEvents: PointerEvents[];
	backgroundColor: {
		"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"ai-generative-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"ai-generative-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		transparent: string;
	};
	background: {
		"ai-generative-interactive-border": string;
		"ai-generative-interactive": string;
		transparent: string;
	};
	color: {
		currentColor: string;
		"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"ai-generative-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"ai-generative-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		transparent: string;
	};
	borderColor: {
		"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
		 * The gridTemplateAreas property specifies named grid areas, establishing the cells in the grid and assigning them names.
		 */
		"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"ai-generative-interactiveHover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		transparent: string;
	};
	borderRadius: {
		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		half: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		none: string;
	};
	borderWidth: {
		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		none: string;
	};
	borderStyle: BorderStyle[];
	boxSizing: BoxSizing[];
	cursor: Cursor[]; /**
	 * The padding properties are used to generate space around an box's content area.
	 */
	spacing: {
		none: string;
		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	margin: {
		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		auto: string;
		none: string;
	};
	position: Position[];
	overflow: Overflow[];
	overflowX: Overflow[];
	overflowY: Overflow[];
	boxShadow: {
		"0": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		focusRing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		aiFocus: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	transitionDuration: {
		base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		slower: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	transitionTimingFunction: TransitionTiming[];
	textDecoration: TextDecoration[];
	zIndex: {
		"100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1000": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	textAlign: TextAlign[];
	fontWeight: {
		regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	fontSize: {
		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	lineHeight: {
		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	scrollbarWidth: ScrollbarWidth[];
};
export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
export type BoxBorderRadiusProperties = keyof typeof propertiesBox.borderRadius;
export type BoxBorderWidthProperties = keyof typeof propertiesBox.borderWidth;
export type BoxBackgroundColorProperties = keyof typeof propertiesBox.backgroundColor;
export type BoxColorProperties = keyof typeof propertiesBox.color;
export type BoxShadowProperties = keyof typeof propertiesBox.boxShadow;
export type BoxSpacingProperties = keyof typeof propertiesBox.spacing;
export type BoxMarginProperties = keyof typeof propertiesBox.margin;
export type BoxGapProperties = keyof typeof propertiesBox.gap;
export type BoxGridGapProperties = keyof typeof propertiesBox.gridGap;
export type BoxZIndexProperties = keyof typeof propertiesBox.zIndex;
export type BoxTransitionDurationProperties = keyof typeof propertiesBox.transitionDuration;
export type BoxFontSizeProperties = keyof typeof propertiesBox.fontSize;
export type BoxFontWeightProperties = keyof typeof propertiesBox.fontWeight;
export type BoxLineHeightProperties = keyof typeof propertiesBox.lineHeight;
export type BoxBackgroundProperties = keyof typeof propertiesBox.background;
export interface BoxConditions<T> extends Conditions<T> {
	focus?: T;
	focusVisible?: T;
	focusWithin?: T;
	active?: T;
	hover?: T;
	disabled?: T;
}
export interface BoxSprinkle {
	/**
	 * The width property specifies the width of a box's content area.
	 */
	width?: string | BoxConditions<string>;
	/**
	 * The height property specifies the height of a box's content area.
	 */
	height?: string | BoxConditions<string>;
	/**
	 * The max width property specifies the width of a box's content area.
	 */
	maxWidth?: string | BoxConditions<string>;
	/**
	 * The max height property specifies the height of a box's content area.
	 */
	maxHeight?: string | BoxConditions<string>;
	/**
	 * The min width property specifies the width of a box's content area.
	 */
	minWidth?: string | BoxConditions<string>;
	/**
	 * The min height property specifies the height of a box's content area.
	 */
	minHeight?: string | BoxConditions<string>;
	/**
	 * The bottom property participates in setting the vertical position of a positioned box.
	 */
	bottom?: string | BoxConditions<string>;
	/**
	 * The left property participates in specifying the horizontal position of a positioned box.
	 */
	left?: string | BoxConditions<string>;
	/**
	 * The right property participates in specifying the horizontal position of a positioned box.
	 */
	right?: string | BoxConditions<string>;
	/**
	 * The top property participates in setting the vertical position of a positioned box.
	 */
	top?: string | BoxConditions<string>;
	/**
	 * This is the shorthand for flexGrow, flexShrink and flexBasis combined.
	 */
	flex?: string | BoxConditions<string>;
	/**
	 * This defines the ability for a flex item to shrink if necessary.
	 */
	flexShrink?: string | BoxConditions<string>;
	/**
	 * This defines the ability for a flex item to grow if necessary.
	 */
	flexGrow?: string | BoxConditions<string>;
	/**
	 * The flexWrap property sets whether flex items are forced onto one line or can wrap onto multiple lines.
	 */
	flexWrap?: FlexWrap | BoxConditions<FlexWrap>;
	/**
	 * The order property controls the order in which they appear in a flex container.
	 */
	order?: string | BoxConditions<string>;
	/**
	 * The gridTemplateColumns property defines the line names and track sizing functions of the grid columns.
	 */
	gridTemplateColumns?: string | BoxConditions<string>;
	/**
	 * The gridTemplateAreas property specifies named grid areas, establishing the cells in the grid and assigning them names.
	 */
	gridTemplateAreas?: string | BoxConditions<string>;
	/**
	 * The gridTemplateRows property defines the line names and track sizing functions of the grid rows.
	 */
	gridTemplateRows?: string | BoxConditions<string>;
	/**
	 * The gridArea shorthand property specifies a grid item's size and location within a grid by contributing a line,
	 * a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
	 */
	gridArea?: string | BoxConditions<string>;
	/**
	 * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
	 * such as grid or flex.
	 */
	display?: Display | BoxConditions<Display>;
	/**
	 * The justifyContent property defines how the browser distributes space between and around content items along
	 * the main-axis of a flex container, and the inline axis of a grid container.
	 */
	justifyContent?: JustifyContent | BoxConditions<JustifyContent>;
	/**
	 * The flexDirection property sets how flex items are placed in the flex container defining the main axis and the direction.
	 */
	flexDirection?: FlexDirection | BoxConditions<FlexDirection>;
	/**
	 * The alignItems property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis.
	 * In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
	 */
	alignItems?: AlignItems | BoxConditions<AlignItems>;
	/**
	 * The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area.
	 * In Flexbox, it aligns the item on the cross axis.
	 */
	alignSelf?: AlignSelf | BoxConditions<AlignSelf>;
	/**
	 * The gap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
	 */
	gap?: BoxGapProperties | BoxConditions<BoxGapProperties>;
	/**
	 * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
	 */
	gridGap?: BoxGridGapProperties | BoxConditions<BoxGridGapProperties>;
	/**
	 * The pointerEvents property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
	 */
	pointerEvents?: PointerEvents | BoxConditions<PointerEvents>;
	/**
	 * The position property sets how an box is positioned in a document.
	 */
	position?: Position | BoxConditions<Position>;
	/**
	 * The overflow shorthand property sets the desired behavior for an box's overflow.
	 */
	overflow?: Overflow | BoxConditions<Overflow>;
	/**
	 * The overflow-x property sets what shows when content overflows a block-level box's left and right edges.
	 */
	overflowX?: Overflow | BoxConditions<Overflow>;
	/**
	 * The overflow-y property sets what shows when content overflows a block-level box's top and bottom edges.
	 */
	overflowY?: Overflow | BoxConditions<Overflow>;
	/**
	 * The cursor property sets the mouse cursor, if any, to show when the mouse pointer is over an box.
	 */
	cursor?: Cursor | BoxConditions<Cursor>;
	/**
	 * The backgroundColor property sets the background color of the box.
	 * @default neutral-background
	 * @examples ["neutral-interactive", { xs: "neutral-surface", md: "neutral-interactive" }]
	 */
	backgroundColor?: BoxBackgroundColorProperties | BoxConditions<BoxBackgroundColorProperties>;
	/**
	 * The color property is used to set the color of the box.
	 */
	color?: BoxColorProperties | BoxConditions<BoxColorProperties>;
	/**
	 * The borderRadius property rounds the corners of an box's outer border edge.
	 */
	borderRadius?: BoxBorderRadiusProperties | BoxConditions<BoxBorderRadiusProperties>;
	/**
	 * The borderWidth property sets the width of an box's border.
	 */
	borderWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
	/**
	 * The borderTopWidth property defines the width of the border at the top of a box.
	 */
	borderTopWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
	/**
	 * The borderBottomWidth property defines the width of the border at the bottom of a box.
	 */
	borderBottomWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
	/**
	 * The borderLeftWidth property defines the width of the border at the left of a box.
	 */
	borderLeftWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
	/**
	 * The borderRightWidth property defines the width of the border at the right of a box.
	 */
	borderRightWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
	/**
	 * The borderWidthX shorthand property defines the width of the element's border on the left and right.
	 */
	borderWidthX?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
	/**
	 * The borderWidthY shorthand property defines the width of the element's border on the top and bottom.
	 */
	borderWidthY?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
	/**
	 * The borderColor property sets the color of the box's four borders.
	 */
	borderColor?: BoxBorderColorProperties | BoxConditions<BoxBorderColorProperties>;
	/**
	 * borderStyle property sets the line style for all four sides of an box's border.
	 */
	borderStyle?: BorderStyle | BoxConditions<BorderStyle>;
	/**
	 * The boxSizing property sets how the total width and height of an box is calculated.
	 * @default border-box
	 */
	boxSizing?: BoxSizing | BoxConditions<BoxSizing>;
	/**
	 * The boxShadow property adds shadow effects around an box's frame.
	 */
	boxShadow?: BoxShadowProperties | BoxConditions<BoxShadowProperties>;
	/**
	 * The padding properties are used to generate space around an box's content area.
	 */
	padding?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
	/**
	 * The paddingTop property sets the height of the padding area on the top of an box.
	 */
	paddingTop?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
	/**
	 * The paddingBottom property sets the height of the padding area on the bottom of an box.
	 */
	paddingBottom?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
	/**
	 * The paddingLeft property sets the width of the padding area to the left of an box.
	 */
	paddingLeft?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
	/**
	 * The paddingLeft property sets the width of the padding area to the right of an box.
	 */
	paddingRight?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
	/**
	 * The margin shorthand property sets the margin area on all four sides of an box.
	 */
	margin?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
	/**
	 * The marginTop property sets the margin area on the top of an box.
	 */
	marginTop?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
	/**
	 * The marginBottom property sets the margin area on the bottom of an box.
	 */
	marginBottom?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
	/**
	 * The marginLeft property sets the margin area on the left side of an box.
	 */
	marginLeft?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
	/**
	 * The marginRight property sets the margin area on the right side of an box.
	 */
	marginRight?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
	/**
	 * The transitionTimingFunction property sets how intermediate values are calculated for CSS properties being affected by a transition effect.
	 */
	transitionTimingFunction?: TransitionTiming | BoxConditions<TransitionTiming>;
	/**
	 * The transitionProperty property sets the CSS properties to which a transition effect should be applied.
	 */
	transitionProperty?: string | BoxConditions<string>;
	/**
	 * The transitionDelay property specifies the duration to wait before starting a property's transition effect when its value changes.
	 */
	transitionDelay?: string | BoxConditions<string>;
	/**
	 * The transitionDuration property sets the length of time a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.
	 */
	transitionDuration?: BoxTransitionDurationProperties | BoxConditions<BoxTransitionDurationProperties>;
	/**
	 * The zIndex property specifies the stack order of the box.
	 */
	zIndex?: BoxZIndexProperties | BoxConditions<BoxZIndexProperties>;
	/**
	 * The background property sets the background of the box.
	 */
	background?: BoxBackgroundProperties | BoxConditions<BoxBackgroundProperties>;
	/**
	 * The backgroundImage property sets one or more background images on an element.
	 */
	backgroundImage?: string | BoxConditions<string>;
	/**
	 * The backgroundPosition property sets the initial position for each background image.
	 * The position is relative to the position layer set by background-origin.
	 */
	backgroundPosition?: string | BoxConditions<string>;
	/**
	 * The backgroundBlendMode property sets how an element's background images should blend with each
	 * other and with the element's background color.
	 */
	backgroundBlendMode?: string | BoxConditions<string>;
	/**
	 * The backgroundRepeat property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
	 */
	backgroundRepeat?: string | BoxConditions<string>;
	/**
	 * The textDecoration shorthand property sets the appearance of decorative lines on text.
	 */
	textDecoration?: TextDecoration | BoxConditions<TextDecoration>;
	/**
	 * The backgroundSize property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
	 */
	backgroundSize?: string | BoxConditions<string>;
	/**
	 * The p shorthand property sets the margin area on all four sides of an box.
	 */
	p?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
	/**
	 * The pl shorthand property sets the width of the padding area to the left of an box.
	 */
	pl?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
	/**
	 * The pl shorthand property sets the width of the padding area to the right of an box.
	 */
	pr?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
	/**
	 * The pt shorthand property sets the height of the padding area on the top of an box.
	 */
	pt?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
	/**
	 * The pb shorthand property sets the height of the padding area on the botton of an box.
	 */
	pb?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
	/**
	 * The px shorthand property defines the width of the left and right padding area of a box.
	 */
	px?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
	/**
	 * The py pt shorthand property sets the height of the padding area at the top and bottom of a box.
	 */
	py?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
	/**
	 * The paddingX shorthand property defines the width of the left and right padding area of a box.
	 */
	paddingX?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
	/**
	 * The paddingY pt shorthand property sets the height of the padding area at the top and bottom of a box.
	 */
	paddingY?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
	/**
	 * The m shorthand property sets the margin area on all four sides of an box.
	 */
	m?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
	/**
	 * The mr property sets the margin area on the right side of an box.
	 */
	mr?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
	/**
	 * The ml property sets the margin area on the left side of an box.
	 */
	ml?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
	/**
	 * The mt property sets the margin area on the top of an box.
	 */
	mt?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
	/**
	 * The marginBottom property sets the margin area on the bottom of an box.
	 */
	mb?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
	/**
	 * The mx property defines the margin area on the left and right side of a box.
	 */
	mx?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
	/**
	 * The my property defines the margin area on the top and bottom of a box
	 */
	my?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
	/**
	 * The marginX property defines the margin area on the left and right side of a box.
	 */
	marginX?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
	/**
	 * The marginY property defines the margin area on the top and bottom of a box
	 */
	marginY?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
	/**
	 * The fontSize property sets the size of the box.
	 * @default base
	 */
	fontSize?: BoxFontSizeProperties | BoxConditions<BoxFontSizeProperties>;
	/**
	 * The fontWeight property sets how thick or thin characters in box should be displayed.
	 * @default regular
	 */
	fontWeight?: BoxFontWeightProperties | BoxConditions<BoxFontWeightProperties>;
	/**
	 * The lineHeight property specifies the line height of the box.
	 * @default base
	 */
	lineHeight?: BoxLineHeightProperties | BoxConditions<BoxLineHeightProperties>;
	/**
	 * The textAlign property specifies the horizontal alignment of box.
	 * @default left
	 */
	textAlign?: TextAlign | BoxConditions<TextAlign>;
	/**
	 * The scrollbarWidth property specifies the width of the scrollbar.
	 */
	scrollbarWidth?: ScrollbarWidth | BoxConditions<ScrollbarWidth>;
}
declare const fileUploader: {
	sprinkle: ((props: {
		aspectRatio?: "none" | AspectRatio | undefined;
		flexDirection?: "row" | "column" | undefined;
		cursor?: Cursor | undefined;
		backgroundColor?: "transparent" | "primary-surface" | "neutral-background" | undefined;
		borderColor?: "transparent" | "primary-interactive" | "ai-generativeInteractiveHover" | undefined;
	}) => string) & {
		properties: Set<"aspectRatio" | "backgroundColor" | "cursor" | "flexDirection" | "borderColor">;
	};
	properties: {
		aspectRatio: readonly [
			"none",
			...AspectRatio[]
		];
		flexDirection: readonly [
			"row",
			"column"
		];
		cursor: Cursor[];
		backgroundColor: {
			"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			transparent: string;
		};
		borderColor: {
			"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"ai-generativeInteractiveHover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			transparent: string;
		};
		borderRadius: {
			"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			half: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		};
	};
	classnames: {
		container: string;
		container__input: string;
		disabled: string;
		dragging: string;
		skeleton: string;
		asOverlay: string;
		overlay: string;
		overlay__content: string;
		overlay__content__text: string;
		overlay__image: string;
	};
};
declare const icon: {
	sprinkle: ((props: {
		color?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "warning-interactive" | "warning-surface" | "warning-textLow" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "neutral-textHigh" | "success-interactive" | "ai-generative" | "primary-textHigh" | "success-interactivePressed" | "success-textHigh" | "warning-textHigh" | "danger-textHigh" | "neutral-textDisabled" | "ai-gradientPurpleHigh" | undefined;
		cursor?: Cursor | undefined;
	}) => string) & {
		properties: Set<"color" | "cursor">;
	};
	properties: {
		color: {
			currentColor: string;
			"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"success-interactivePressed": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"success-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"warning-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"danger-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"ai-gradientPurpleHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"ai-generative": string;
		};
		cursor: Cursor[];
	};
	classnames: {
		base: string;
	};
};
declare const propertiesIconButton: {
	backgroundColor: {
		transparent: string;
		"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"ai-generativeSurface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	borderColor: {
		"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-interactiveHover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-interactivePressed": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		transparent: string;
		"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"ai-generativeSurface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
};
export type IconButtonBackgroundColorProperties = keyof typeof propertiesIconButton.backgroundColor;
export type IconButtonBorderColorProperties = keyof typeof propertiesIconButton.borderColor;
export interface IconButtonConditions<T> extends Conditions<T> {
	focus?: T;
	active?: T;
	hover?: T;
}
export interface IconButtonSprinkle {
	/**
	 * The size of the component.
	 * @default 2.75rem
	 */
	size?: string | IconButtonConditions<string>;
	/**
	 * The borderColor property sets the color of the icon button's four borders.
	 * @default { xs: "neutral-interactive", active: "neutral-interactivePressed", hover: "neutral-interactiveHover", focus: "primary-interactive" }
	 */
	borderColor?: IconButtonBorderColorProperties | IconButtonConditions<IconButtonBorderColorProperties>;
	/**
	 * The backgroundColor property sets the background color of the icon button.
	 * @default {  xs: "neutral-surface", active: "neutral-interactive", hover: "neutral-surfaceHighlight" }
	 */
	backgroundColor?: IconButtonBackgroundColorProperties | IconButtonConditions<IconButtonBackgroundColorProperties>;
}
declare const propertiesText: {
	color: {
		"ai-generative": "transparent";
		currentColor: string;
		"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-interactivePressed": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
		 * The whiteSpace property sets how white space inside an element is handled.
		 */
		"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	textAlign: TextAlign[];
	lineHeight: {
		readonly caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		readonly base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		readonly highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	fontWeight: {
		regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	fontSize: {
		caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
		 * The overflow property specifies what happens if content overflows an element's box.
		 */
		highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	wordBreak: WordBreak[];
	textDecoration: TextDecoration[];
	textOverflow: TextOverflow[];
	whiteSpace: WhiteSpace[];
	overflow: Overflow[];
};
export type TextColorProperties = keyof typeof propertiesText.color;
export type TextFontSizeProperties = keyof typeof propertiesText.fontSize;
export type TextFontWeightProperties = keyof typeof propertiesText.fontWeight;
export type TextLineHeightProperties = keyof typeof propertiesText.lineHeight;
export type TextConditions<T> = Conditions<T>;
export interface TextSprinkle {
	/**
	 * The fontSize property sets the size of the text.
	 * @default base
	 */
	fontSize?: TextFontSizeProperties | TextConditions<TextFontSizeProperties>;
	/**
	 * The fontWeight property sets how thick or thin characters in text should be displayed.
	 * @default regular
	 */
	fontWeight?: TextFontWeightProperties | TextConditions<TextFontWeightProperties>;
	/**
	 * The lineHeight property specifies the line height of the text.
	 * @default base
	 */
	lineHeight?: TextLineHeightProperties | TextConditions<TextLineHeightProperties>;
	/**
	 * The textAlign property specifies the horizontal alignment of text.
	 * @default left
	 */
	textAlign?: TextAlign | TextConditions<TextAlign>;
	/**
	 * The color property is used to set the color of the text.
	 * Note: Gradients like 'ai-generative' changes other properties like 'width' and 'display', which could make the component behave differently. Ensure to visually test the component when dynamically changing the color.
	 * @default neutral-textLow
	 */
	color?: TextColorProperties | TextConditions<TextColorProperties>;
	/**
	 * The amount of lines at which the text will be trimmed, showing an ellipsis when overflowed.
	 */
	lineClamp?: number | TextConditions<number>;
	/**
	 * The amount of lines at which the text will be trimmed, showing an ellipsis when overflowed.
	 */
	WebkitLineClamp?: number | TextConditions<number>;
	/**
	 * The wordBreak property sets whether line breaks appear wherever the text would otherwise overflow its content box.
	 */
	wordBreak?: WordBreak | TextConditions<WordBreak>;
	/**
	 * The textDecoration shorthand property sets the appearance of decorative lines on text.
	 */
	textDecoration?: TextDecoration | TextConditions<TextDecoration>;
	/**
	 * The textOverflow property specifies how overflowed content that is not displayed should be signaled to the user (e.g., 'ellipsis' for '...', 'clip' for hard cutoff).
	 * Note: This property only works when overflow is set to 'hidden'.
	 */
	textOverflow?: TextOverflow | TextConditions<TextOverflow>;
	/**
	 * The whiteSpace property sets how white space inside an element is handled.
	 */
	whiteSpace?: WhiteSpace | TextConditions<WhiteSpace>;
	/**
	 * The overflow property specifies what happens if content overflows an element's box.
	 */
	overflow?: Overflow | TextConditions<Overflow>;
}
declare const text: {
	sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
		{
			config: {
				color: {
					values: {
						currentColor: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"primary-interactive": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"primary-surface": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"primary-textLow": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"success-textLow": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"success-surface": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"warning-interactive": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"warning-surface": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"warning-textLow": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"danger-interactive": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"danger-surface": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"danger-textLow": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"neutral-background": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"neutral-interactive": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"neutral-surface": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"neutral-textLow": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"neutral-textHigh": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"success-interactive": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"ai-generative": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"primary-textHigh": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"success-interactivePressed": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"success-textHigh": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"warning-textHigh": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"danger-textHigh": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"neutral-textDisabled": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
					};
					staticScale: {
						"ai-generative": "transparent";
						currentColor: string;
						"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"success-interactivePressed": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"success-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"warning-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"danger-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
					};
					name: "color";
				};
				textAlign: {
					values: {
						center: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						left: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						right: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						justify: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
					};
					staticScale: TextAlign[];
					name: "textAlign";
				};
				lineHeight: {
					values: {
						caption: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						base: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						highlight: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
					};
					staticScale: {
						readonly caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						readonly base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						readonly highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
					};
					name: "lineHeight";
				};
				fontWeight: {
					values: {
						regular: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						medium: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						bold: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
					};
					staticScale: {
						regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
					};
					name: "fontWeight";
				};
				fontSize: {
					values: {
						caption: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						base: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						highlight: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
					};
					staticScale: {
						caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
					};
					name: "fontSize";
				};
				wordBreak: {
					values: {
						normal: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"break-word": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"break-all": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"keep-all": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
					};
					staticScale: WordBreak[];
					name: "wordBreak";
				};
				textDecoration: {
					values: {
						none: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"line-through": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						underline: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
					};
					staticScale: TextDecoration[];
					name: "textDecoration";
				};
				textOverflow: {
					values: {
						clip: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						ellipsis: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
					};
					staticScale: TextOverflow[];
					name: "textOverflow";
				};
				whiteSpace: {
					values: {
						pre: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						normal: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						nowrap: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"break-spaces": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"pre-line": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						"pre-wrap": {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
					};
					staticScale: WhiteSpace[];
					name: "whiteSpace";
				};
				overflow: {
					values: {
						hidden: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						auto: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						visible: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						scroll: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
					};
					staticScale: Overflow[];
					name: "overflow";
				};
			};
		} & {
			config: {
				lineClamp: {
					dynamic: {
						default: string;
						conditions: Record<"xs" | "md" | "lg" | "xl", string>;
					};
					dynamicScale: true;
					name: "lineClamp";
					vars: {
						default: string;
						conditions: Record<"xs" | "md" | "lg" | "xl", string>;
					};
				};
				WebkitLineClamp: {
					dynamic: {
						default: string;
						conditions: Record<"xs" | "md" | "lg" | "xl", string>;
					};
					dynamicScale: boolean;
					name: "WebkitLineClamp";
					vars: {
						default: string;
						conditions: Record<"xs" | "md" | "lg" | "xl", string>;
					};
				};
			};
		} & {
			config: {
				[x: string]: {
					mappings: ("fontSize" | "fontWeight" | "color" | "lineHeight" | "textAlign" | "textOverflow" | "whiteSpace" | "wordBreak" | "lineClamp" | "overflow" | "textDecoration" | "WebkitLineClamp")[];
				};
			};
		}
	]>;
	properties: {
		color: {
			"ai-generative": "transparent";
			currentColor: string;
			"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"success-interactivePressed": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"success-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"warning-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"danger-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		};
		textAlign: TextAlign[];
		lineHeight: {
			readonly caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			readonly base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			readonly highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		};
		fontWeight: {
			regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		};
		fontSize: {
			caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		};
		wordBreak: WordBreak[];
		textDecoration: TextDecoration[];
		textOverflow: TextOverflow[];
		whiteSpace: WhiteSpace[];
		overflow: Overflow[];
	};
	aiColors: {
		readonly "ai-generative": "transparent";
	};
	aiStyles: {
		readonly "ai-generative": string;
	};
	classnames: {
		base: string;
		trim: string;
		aiGenerative: string;
		aiStyles: {
			readonly "ai-generative": string;
		};
	};
};
declare const propertiesTitle: {
	color: {
		"primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	textAlign: TextAlign[];
	fontSize: {
		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	fontWeight: {
		regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	lineHeight: {
		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
};
export type TitleColorProperties = keyof typeof propertiesTitle.color;
export type TitleFontSizeProperties = keyof typeof propertiesTitle.fontSize;
export type TitleFontWeightProperties = keyof typeof propertiesTitle.fontWeight;
export type TitleLineHeightProperties = keyof typeof propertiesTitle.lineHeight;
export type TitleConditions<T> = Conditions<T>;
export interface TitleSprinkle {
	/**
	 * The fontSize property sets the size of the title.
	 * @default base
	 */
	fontSize?: TitleFontSizeProperties | TitleConditions<TitleFontSizeProperties>;
	/**
	 * The fontWeight property sets how thick or thin characters in title should be displayed.
	 * @default regular
	 */
	fontWeight?: TitleFontWeightProperties | TitleConditions<TitleFontWeightProperties>;
	/**
	 * The lineHeight property specifies the line height of the title.
	 * @default base
	 */
	lineHeight?: TitleLineHeightProperties | TitleConditions<TitleLineHeightProperties>;
	/**
	 * The textAlign property specifies the horizontal alignment of title.
	 * @default left
	 */
	textAlign?: TextAlign | TitleConditions<TextAlign>;
	/**
	 * The color property is used to set the color of the title.
	 * @default neutral-textLow
	 */
	color?: TitleColorProperties | TitleConditions<TitleColorProperties>;
}
declare const list: {
	classnames: {
		container: string;
		container__item: string;
		skeleton: string;
	};
	sprinkle: ((props: {
		padding?: "1" | "2" | "3" | "4" | "5" | "0-5" | "6" | "7" | "8" | undefined;
	}) => string) & {
		properties: Set<"padding">;
	};
	properties: {
		padding: {
			"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		};
	};
};
declare const multiSelect: {
	sprinkle: ((props: {
		zIndex?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "1000" | "1100" | {
			xs?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "1000" | "1100" | undefined;
			md?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "1000" | "1100" | undefined;
			lg?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "1000" | "1100" | undefined;
			xl?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "1000" | "1100" | undefined;
		} | undefined;
	}) => string) & {
		properties: Set<"zIndex">;
	};
	properties: {
		zIndex: {
			"100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"1000": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"1100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		};
	};
	classnames: {
		appearance: Record<"success" | "warning" | "danger" | "neutral", string>;
		container: string;
		container__icon: string;
		container__button: string;
	};
};
declare const propertiesPopover: {
	backgroundColor: {
		"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"primary-interactiveHover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	color: {
		"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"primary-interactiveHover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	padding: {
		base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		none: string;
	};
	zIndex: {
		"100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1000": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	overflow: Overflow[];
};
export type PopoverColorProperties = keyof typeof propertiesPopover.color;
export type PopoverBackgroundColorProperties = keyof typeof propertiesPopover.backgroundColor;
export type PopoverPaddingProperties = keyof typeof propertiesPopover.padding;
export type PopoverZIndexProperties = keyof typeof propertiesPopover.zIndex;
export interface PopoverSprinkle {
	/**
	 * The width property specifies the width of a popover's content area.
	 * @default fit-content
	 */
	width?: string | Conditions<string>;
	/**
	 * The maxWidth property specifies the maximum width of a popover's content area.
	 */
	maxWidth?: string | Conditions<string>;
	/**
	 * The height property specifies the height of a popover's content area.
	 */
	height?: string | Conditions<string>;
	/**
	 * The zIndex property specifies the stack order of the popover.
	 */
	zIndex?: PopoverZIndexProperties | Conditions<PopoverZIndexProperties>;
	/**
	 * The backgroundColor property sets the background color of the popover.
	 * @default neutral-background
	 * @examples ["neutral-interactive", { xs: "neutral-surface", md: "neutral-interactive" }]
	 */
	backgroundColor?: PopoverBackgroundColorProperties | Conditions<PopoverBackgroundColorProperties>;
	/**
	 * The color property is used to set the color of the popover.
	 * @default neutral-background
	 */
	color?: PopoverColorProperties | Conditions<PopoverColorProperties>;
	/**
	 * The padding properties are used to generate space around an popover's content area.
	 * @default base
	 */
	padding?: PopoverPaddingProperties | Conditions<PopoverPaddingProperties>;
	/**
	 * The overflow shorthand property sets the desired behavior for an popover's content overflow.
	 */
	overflow?: Overflow | Conditions<Overflow>;
}
declare const spinner: {
	sprinkle: ((props: {
		color?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "success-interactive" | undefined;
	}) => string) & {
		properties: Set<"color">;
	};
	properties: {
		color: {
			currentColor: string;
			"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		};
	};
	classnames: {
		base: string;
	};
};
declare const link: {
	sprinkle: ((props: {
		textDecoration?: TextDecoration | undefined;
		fontSize?: "caption" | "base" | "highlight" | undefined;
		lineHeight?: "caption" | "base" | "highlight" | undefined;
	}) => string) & {
		properties: Set<"fontSize" | "lineHeight" | "textDecoration">;
	};
	properties: {
		textDecoration: TextDecoration[];
		fontSize: {
			caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		};
		lineHeight: {
			readonly caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			readonly base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			readonly highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		};
	};
	classnames: {
		base: string;
		appearance: Record<"primary" | "danger" | "neutral" | "neutral-background", string>;
	};
};
export interface TooltipSprinkle {
	/**
	 * The maxWidth property specifies the maximum width of a popover's content area.
	 */
	maxWidth?: string | Conditions<string>;
}
declare const thumbnail: {
	sprinkle: ((props: {
		aspectRatio?: AspectRatio | undefined;
	}) => string) & {
		properties: Set<"aspectRatio">;
	};
	properties: {
		aspectRatio: AspectRatio[];
	};
	classnames: {
		container: string;
		container__image: string;
		container__placeholder: string;
		skeleton: string;
		width: string;
	};
};
declare const accordion: {
	sprinkle: ((props: {
		borderTop?: "base" | "none" | undefined;
		borderBottom?: "base" | "none" | undefined;
		padding?: "base" | "none" | undefined;
	}) => string) & {
		properties: Set<"borderBottom" | "borderTop" | "padding">;
	};
	properties: {
		borderTop: {
			none: string;
			base: string;
		};
		borderBottom: {
			none: string;
			base: string;
		};
		padding: {
			none: string;
			base: string;
		};
	};
	classnames: {
		header: string;
		header_static: string;
		header__content: string;
		header__description: string;
		header__title: string;
		header_active: string;
		body: string;
	};
};
declare const card: {
	classnames: {
		container: string;
		container__footer: string;
	};
	subComponents: {
		header: {
			sprinkle: ((props: {
				padding?: "base" | "small" | "none" | undefined;
			}) => string) & {
				properties: Set<"padding">;
			};
			properties: {
				padding: {
					base: string;
					small: string;
					none: string;
				};
			};
		};
		body: {
			sprinkle: ((props: {
				padding?: "base" | "small" | "none" | undefined;
			}) => string) & {
				properties: Set<"padding">;
			};
			properties: {
				padding: {
					base: string;
					small: string;
					none: string;
				};
			};
		};
		footer: {
			sprinkle: ((props: {
				padding?: "base" | "small" | "none" | undefined;
			}) => string) & {
				properties: Set<"padding">;
			};
			properties: {
				padding: {
					base: string;
					small: string;
					none: string;
				};
			};
		};
	};
	sprinkle: ((props: {
		backgroundColor?: "primary-surface" | "primary-surfaceHighlight" | "success-surface" | "success-surfaceHighlight" | "warning-surface" | "warning-surfaceHighlight" | "danger-surface" | "danger-surfaceHighlight" | "neutral-background" | "neutral-surface" | "neutral-surfaceHighlight" | undefined;
		padding?: "base" | "small" | "none" | undefined;
	}) => string) & {
		properties: Set<"backgroundColor" | "padding">;
	};
	properties: {
		backgroundColor: {
			"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		};
		padding: {
			base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			none: string;
		};
	};
};
declare const propertiesModal: {
	padding: {
		base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		none: string;
	};
};
export type PaddingProperties = keyof typeof propertiesModal.padding;
export interface ModalSprinkle {
	/**
	 * The maxWidth property specifies the maxWidth of a modal's content area. The width of the modal will be defined by the width of the content in this prop.
	 * @default { xs: "100%", md: "500px" }
	 */
	maxWidth?: string | Conditions<string>;
	/**
	 * The padding properties are used to generate space around an modal's content area.
	 * @default base
	 */
	padding?: PaddingProperties | Conditions<PaddingProperties>;
}
declare const modal: {
	classnames: {
		overlay: string;
		overlayZIndex: Record<"base" | "top", string>;
		overlayScoped: string;
		overlayScopedZIndex: Record<"base" | "top", string>;
		container: string;
		containerZIndex: Record<"base" | "top", string>;
		container__close: string;
		container__footer: string;
	};
	subComponents: {
		header: {
			sprinkle: ((props: {
				padding?: "base" | "small" | "none" | undefined;
			}) => string) & {
				properties: Set<"padding">;
			};
			properties: {
				padding: {
					base: string;
					small: string;
					none: string;
				};
			};
			content: string;
		};
		body: {
			sprinkle: ((props: {
				padding?: "base" | "small" | "none" | undefined;
			}) => string) & {
				properties: Set<"padding">;
			};
			properties: {
				padding: {
					base: string;
					small: string;
					none: string;
				};
			};
		};
		footer: {
			sprinkle: ((props: {
				padding?: "base" | "small" | "none" | undefined;
			}) => string) & {
				properties: Set<"padding">;
			};
			properties: {
				padding: {
					base: string;
					small: string;
					none: string;
				};
			};
		};
	};
	sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
		{
			config: {
				maxWidth: {
					dynamic: {
						default: string;
						conditions: Record<"xs" | "md" | "lg" | "xl", string>;
					};
					dynamicScale: true;
					name: "maxWidth";
					vars: {
						default: string;
						conditions: Record<"xs" | "md" | "lg" | "xl", string>;
					};
				};
				padding: {
					dynamic: {
						default: string;
						conditions: Record<"xs" | "md" | "lg" | "xl", string>;
					};
					dynamicScale: {
						base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						none: string;
					};
					name: "padding";
					vars: {
						default: string;
						conditions: Record<"xs" | "md" | "lg" | "xl", string>;
					};
				};
			};
		} & {
			config: {
				[x: string]: {
					mappings: ("maxWidth" | "padding")[];
				};
			};
		}
	]>;
	properties: {
		padding: {
			base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			none: string;
		};
	};
};
declare const sidebarSprinkle: {
	sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
		{
			config: {
				zIndex: {
					values: {
						100: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						200: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						300: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						400: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						500: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						600: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						700: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						800: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						900: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						1000: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						1100: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
					};
					staticScale: {
						"100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"1000": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"1100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
					};
					name: "zIndex";
				};
				padding: {
					values: {
						base: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						small: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						none: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
					};
					staticScale: {
						base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						none: string;
					};
					name: "padding";
				};
			};
		} & {
			config: {
				maxWidth: {
					dynamic: {
						default: string;
						conditions: Record<"xs" | "md" | "lg" | "xl", string>;
					};
					dynamicScale: true;
					name: "maxWidth";
					vars: {
						default: string;
						conditions: Record<"xs" | "md" | "lg" | "xl", string>;
					};
				};
			};
		} & {
			config: {
				[x: string]: {
					mappings: ("zIndex" | "maxWidth" | "padding")[];
				};
			};
		}
	]>;
	properties: {
		zIndex: {
			"100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"1000": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"1100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		};
		padding: {
			base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			none: string;
		};
	};
};
export type SidebarPaddingProperties = keyof typeof sidebarSprinkle.properties.padding;
export type SidebarZIndexProperties = keyof typeof sidebarSprinkle.properties.zIndex;
export interface SidebarSprinkle {
	/**
	 * The maxWidth property specifies the maxWidth of a sidebar's content area.
	 * @default 375px
	 */
	maxWidth?: string | Conditions<string>;
	/**
	 * The zIndex property specifies the stack order of the sidebar.
	 */
	zIndex?: SidebarZIndexProperties | Conditions<SidebarZIndexProperties>;
	/**
	 * The padding properties are used to generate space around an sidebar's content area.
	 * @default base
	 */
	padding?: SidebarPaddingProperties | Conditions<SidebarPaddingProperties>;
}
declare const sidebar: {
	sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
		{
			config: {
				zIndex: {
					values: {
						100: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						200: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						300: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						400: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						500: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						600: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						700: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						800: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						900: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						1000: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						1100: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
					};
					staticScale: {
						"100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"1000": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						"1100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
					};
					name: "zIndex";
				};
				padding: {
					values: {
						base: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						small: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
						none: {
							default: string;
							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
						};
					};
					staticScale: {
						base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
						none: string;
					};
					name: "padding";
				};
			};
		} & {
			config: {
				maxWidth: {
					dynamic: {
						default: string;
						conditions: Record<"xs" | "md" | "lg" | "xl", string>;
					};
					dynamicScale: true;
					name: "maxWidth";
					vars: {
						default: string;
						conditions: Record<"xs" | "md" | "lg" | "xl", string>;
					};
				};
			};
		} & {
			config: {
				[x: string]: {
					mappings: ("zIndex" | "maxWidth" | "padding")[];
				};
			};
		}
	]>;
	properties: {
		zIndex: {
			"100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"1000": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"1100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		};
		padding: {
			base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			none: string;
		};
	};
	classnames: {
		overlay: string;
		overlayScoped: string;
		container: string;
		containerScoped: string;
		container__header: string;
		container__body: string;
		container__footer: string;
		position: Record<"left" | "right", string>;
		isVisible: string;
	};
};
declare const propertiesTable: {
	backgroundColor: {
		transparent: string;
		"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	padding: {
		base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		none: string;
	};
};
declare const propertiesWrapper: {
	borderRadius: {
		none: string;
		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
};
export type TablePaddingProperties = keyof typeof propertiesTable.padding;
export type TableRowBackgroundColorProperties = keyof typeof propertiesTable.backgroundColor;
export type TableBorderRadiusProperties = keyof typeof propertiesWrapper.borderRadius;
export interface TableConditions<T> extends Conditions<T> {
	rest?: T;
	focus?: T;
	active?: T;
	hover?: T;
}
export interface TableSprinkle {
	/**
	 * The width property specifies the width of a table's content area.
	 */
	width?: string | TableConditions<string>;
	/**
	 * The maxWidth property specifies the maxWidth of a table's content area.
	 */
	maxWidth?: string | TableConditions<string>;
	/**
	 * The minWidth property specifies the minWidth of a table's content area.
	 */
	minWidth?: string | TableConditions<string>;
	/**
	 * The backgroundColor property sets the background color of the table.
	 */
	backgroundColor?: TableRowBackgroundColorProperties | TableConditions<TableRowBackgroundColorProperties>;
	/**
	 * The padding properties are used to generate space around an table's content area.
	 */
	padding?: TablePaddingProperties | TableConditions<TablePaddingProperties>;
}
export interface TableWrapperSprinkle {
	/**
	 * Controls the border radius of the table wrapper.
	 * Use "none" for no border radius or "2" for the default token value.
	 * @default "2"
	 */
	borderRadius?: TableBorderRadiusProperties;
}
export interface BoxProperties extends BoxSprinkle {
	/**
	 * Element to be rendered inside the Box component.
	 * @TJS-type React.ReactNode
	 */
	children?: ReactNode;
}
export type BoxBaseProps = BoxProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
export declare const Box: PolymorphicForwardRefComponent<"div", BoxBaseProps>;
export type BoxProps = ComponentPropsWithRef<typeof Box>;
export type ButtonSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "className" | "data-testid">>;
export type ButtonSkeletonProps = ButtonSkeletonProperties;
declare const ButtonSkeleton: React.FC<ButtonSkeletonProps>;
export interface ButtonComponents {
	Skeleton: typeof ButtonSkeleton;
}
export interface ButtonProperties {
	/**
	 * The content of the button.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * Change the visual style of the button.
	 * @default neutral
	 */
	appearance?: "primary" | "danger" | "neutral" | "transparent" | "ai-primary" | "ai-secondary";
	/**
	 * Disables the button, disallowing user interaction.
	 * @default false
	 */
	disabled?: boolean;
	/**
	 * Determines if the button should grow to fill the full width of its container.
	 * @default false
	 */
	fullWidth?: boolean;
	/**
	 * Change the size of the button.
	 * @default medium
	 */
	size?: "large" | "medium" | "small";
}
export type ButtonBaseProps = ButtonProperties & ButtonHTMLAttributes<HTMLButtonElement>;
export declare const Button: PolymorphicForwardRefComponent<"button" | "a", ButtonBaseProps> & ButtonComponents;
export type ButtonProps = ComponentPropsWithRef<typeof Button>;
export type CheckboxSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "className" | "data-testid">>;
export type CheckboxSkeletonProps = CheckboxSkeletonProperties;
declare const CheckboxSkeleton: React.FC<CheckboxSkeletonProps>;
export interface CheckboxComponents {
	Skeleton: typeof CheckboxSkeleton;
}
export interface CheckboxProperties {
	/**
	 * 	The name of the input element.
	 */
	name: string;
	/**
	 * Change the visual style of the checkbox.
	 * @default neutral
	 */
	appearance?: "primary" | "danger";
	/**
	 * Modifies true/false value of the native checkbox.
	 */
	checked?: boolean;
	/**
	 * Modifies the native disabled state of the native checkbox.
	 */
	disabled?: boolean;
	/**
	 * If true, the component appears indeterminate. This does not set the native input element to indeterminate due to inconsistent behavior across browsers. However, we set a data-indeterminate attribute on the input.
	 * @default false
	 */
	indeterminate?: boolean;
	/**
	 * Text to be rendered inside the component.
	 */
	label?: string;
	/**
	 * Highlights the checkbox to indicate its value was generated by AI.
	 * Applies AI gradient border that persists regardless of checked state.
	 * @default false
	 */
	aiGenerated?: boolean;
}
export type CheckboxProps = CheckboxProperties & InputHTMLAttributes<HTMLInputElement>;
export declare const Checkbox: React.FC<CheckboxProps> & CheckboxComponents;
export type ChipSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "height" | "className">> & {
	/**
	 * This is an attribute used to identify a DOM node for testing purposes.
	 */
	"data-testid"?: string;
};
export type ChipSkeletonProps = ChipSkeletonProperties;
declare const ChipSkeleton: React.FC<ChipSkeletonProps>;
export interface ChipComponents {
	Skeleton: typeof ChipSkeleton;
}
export interface ChipProperties {
	/**
	 Text to be displayed on chip.
	*/
	text: string;
	/**
	 * SVG icon to be displayed on chip.
	 * @TJS-type React.ReactNode
	 */
	icon?: ReactNode;
	/**
	 * Informs whether the close icon should be displayed.
	 */
	removable?: boolean;
	/**
	 * Highlights the chip to indicate its value was generated by AI.
	 * Applies AI gradient border and an AI outline.
	 */
	aiGenerated?: boolean;
}
export type ChipProps = ChipProperties & ButtonHTMLAttributes<HTMLButtonElement | HTMLDivElement>;
export declare const Chip: React.FC<ChipProps> & ChipComponents;
export type FileUploaderSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "height" | "className">> & Partial<Pick<FileUploaderProps, "aspectRatio">> & {
	/**
	 * This is an attribute used to identify a DOM node for testing purposes.
	 */
	"data-testid"?: string;
};
export type FileUploaderSkeletonProps = FileUploaderSkeletonProperties;
declare const FileUploaderSkeleton: React.FC<FileUploaderSkeletonProps>;
export interface FileUploaderOverlayProperties {
	/**
	 * Title text displayed in the overlay
	 */
	title?: string;
	/**
	 * Subtitle text displayed below the title
	 */
	subtitle?: string;
	/**
	 * Source URL for the image displayed in the overlay
	 */
	imageSrc?: string;
	/**
	 * Alt text for the image
	 */
	imageAlt?: string;
	/**
	 * Border color of the overlay
	 * @default primary-interactive
	 */
	borderColor?: keyof typeof fileUploader.properties.borderColor;
	/**
	 * Background color of the overlay
	 * @default primary-surface
	 */
	backgroundColor?: keyof typeof fileUploader.properties.backgroundColor;
	/**
	 * Border radius of the overlay
	 * @default 2
	 */
	borderRadius?: keyof typeof fileUploader.properties.borderRadius;
	/**
	 * Content to render inside the overlay
	 */
	children?: ReactNode;
}
export type FileUploaderOverlayProps = FileUploaderOverlayProperties & Omit<HTMLAttributes<HTMLDivElement>, "title">;
declare const FileUploaderOverlay: React.FC<FileUploaderOverlayProps>;
export interface FileUploaderComponents {
	Skeleton: typeof FileUploaderSkeleton;
	Overlay: typeof FileUploaderOverlay;
}
export interface FileUploaderProperties {
	/**
	 * Provide additional context to the action.
	 */
	placeholder?: string;
	/**
	 * Accept file types
	 * @default image/jpeg,image/gif,image/png
	 */
	accept?: string;
	/**
	 * Height value of the file uploader. Defaults to 100%.
	 * @default 100%
	 */
	height?: string;
	/**
	 * Width value of the file uploader. Defaults to 100%.
	 * @default 100%
	 */
	width?: string;
	/**
	 * Permitted aspect ratios for the size of the file uploader.
	 * @default 1/1
	 */
	aspectRatio?: (typeof fileUploader.properties.aspectRatio)[number];
	/**
	 * Defines the position of the placeholder in relation to the icon.
	 * @default column
	 */
	flexDirection?: (typeof fileUploader.properties.flexDirection)[number];
	/**
	 * Callback fired when files are dropped (before validation)
	 */
	onDrop?: (event: DragEvent<HTMLLabelElement | HTMLDivElement>) => void;
	/**
	 * Callback fired when all dropped files are rejected due to file type validation
	 */
	onDropReject?: (event: DragEvent<HTMLLabelElement | HTMLDivElement>) => void;
	/**
	 * Callback fired when files are successfully accepted and processed
	 */
	onDropSuccess?: (event: DragEvent<HTMLLabelElement | HTMLDivElement>) => void;
	/**
	 * Callback fired when an error occurs during file drop processing
	 */
	onError?: (error: Error) => void;
	/**
	 * Content to render inside the file uploader container
	 */
	children?: ReactNode;
	/**
	 * Custom overlay element to render when dragging files over the uploader.
	 * When defined, this overlay will be displayed instead of children during drag operations.
	 */
	dragOverlay?: ReactNode;
	/**
	 * When true, the file uploader will not be clickable and files can only be uploaded by dragging and dropping. Useful for invisible upload areas used along FileUploader.Overlay.
	 * @default false
	 */
	disableClickUpload?: boolean;
	/**
	 * When true, the file uploader will be rendered as an overlay. Useful for invisible upload areas used along FileUploader.Overlay.
	 * @default false
	 */
	asOverlay?: boolean;
}
export type FileUploaderProps = FileUploaderProperties & {
	dragOverlay?: ReactElement<FileUploaderOverlayProps>;
} & InputHTMLAttributes<HTMLInputElement>;
export declare const FileUploader: React.FC<FileUploaderProps> & FileUploaderComponents;
export type IconSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "height" | "className">> & {
	/**
	 * This is an attribute used to identify a DOM node for testing purposes.
	 */
	"data-testid"?: string;
};
export type IconSkeletonProps = IconSkeletonProperties;
declare const IconSkeleton: React.FC<IconSkeletonProps>;
export interface IconComponents {
	Skeleton: typeof IconSkeleton;
}
export interface IconProperties {
	/**
	 * The SVG contents to display in the Icon.
	 * @TJS-type React.ReactNode
	 */
	source: ReactNode;
	/**
	 * Set the color for the SVG fill.
	 * Use "ai-generative" to apply the Nimbus AI generative gradient.
	 * @default neutral-textLow
	 */
	color?: keyof typeof icon.properties.color | "ai-generative";
	/**
	 * The cursor property specifies the mouse cursor to be displayed when pointing over an element.
	 * @default inherit
	 */
	cursor?: (typeof icon.properties.cursor)[number];
}
export type IconProps = IconProperties & HTMLAttributes<HTMLDivElement>;
export declare const Icon: React.FC<IconProps> & IconComponents;
/**
 * Checks if a color value is valid (exists and is not "none" or "transparent")
 * @param color - The color value to check
 * @returns True if color is valid, false otherwise
 */
export declare const isValidColorValue: (color: string | undefined) => boolean;
/**
 * Checks if a color value can use gradient (valid and not already a URL reference)
 * @param color - The color value to check
 * @returns True if color can use gradient, false otherwise
 */
export declare const canUseGradient: (color: string) => boolean;
/**
 * Checks if a color value is a gradient
 * @param color - The color value to check
 * @returns True if color is a known gradient value, false otherwise
 */
export declare const isGradient: (color: string) => boolean;
/**
 * Collection of known gradient color values
 */
export declare const GRADIENT_COLORS: Set<string>;
export type IconButtonSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "height" | "className">> & {
	/**
	 * This is an attribute used to identify a DOM node for testing purposes.
	 */
	"data-testid"?: string;
};
export type IconButtonSkeletonProps = IconButtonSkeletonProperties;
declare const IconButtonSkeleton: React.FC<IconButtonSkeletonProps>;
export interface IconButtonComponents {
	Skeleton: typeof IconButtonSkeleton;
}
export interface IconButtonProperties extends IconButtonSprinkle {
	/**
	 * Type of html tag to create for the Icon Button component.
	 * @default button
	 */
	as?: "button" | "div";
	/**
	 * The SVG contents to display in the Icon button.
	 * @TJS-type React.ReactNode
	 */
	source: ReactNode;
	/**
	 * Set the color for the inner Icon fill.
	 * @default neutral-textHigh
	 */
	color?: IconProps["color"];
	/**
	 * AI gradient background appearance for the button container.
	 * When provided, container color/border sprinkles are ignored in favor of gradient styles.
	 */
	appearance?: "ai-generative";
}
export type IconButtonProps = IconButtonProperties & ButtonHTMLAttributes<HTMLButtonElement | HTMLDivElement>;
export declare const IconButton: React.FC<IconButtonProps> & IconButtonComponents;
export type InputPasswordProperties = Pick<InputBaseProps, "appearance" | "disabled" | "aiGenerated">;
declare const InputPassword: React.ForwardRefExoticComponent<InputPasswordProperties & Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof InputProperties> & React.RefAttributes<HTMLInputElement>>;
export type InputSearchProperties = Pick<InputBaseProps, "appearance" | "disabled" | "aiGenerated">;
declare const InputSearch: React.ForwardRefExoticComponent<InputSearchProperties & Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof InputProperties> & React.RefAttributes<HTMLInputElement>>;
export type InputSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "className" | "data-testid">>;
export type InputSkeletonProps = InputSkeletonProperties;
declare const InputSkeleton: React.FC<InputSkeletonProps>;
export interface InputComponents {
	Password: typeof InputPassword;
	Search: typeof InputSearch;
	Skeleton: typeof InputSkeleton;
}
export interface InputProperties {
	/**
	 * Change the visual style of the input.
	 * @default neutral
	 */
	appearance?: "neutral" | "success" | "warning" | "danger" | "ai-generative";
	/**
	 * Highlights the field to indicate its value was generated by AI.
	 * Applies AI gradient border, white background and an AI focus ring.
	 */
	aiGenerated?: boolean;
	/**
	 * Disables the input, disallowing user interaction.
	 */
	disabled?: boolean;
	/**
	 * Sent icon display position
	 * @default start
	 */
	appendPosition?: "end" | "start";
	/**
	 * SVG icon to be displayed on input.
	 * @TJS-type React.ReactNode
	 */
	append?: ReactNode;
	/**
	 * Static, non-interactive text displayed at the start of the input, inside
	 * the same container (e.g. a currency symbol such as "$"). Unlike
	 * `append`, it renders as plain text and is never wrapped in a button.
	 * @TJS-type React.ReactNode
	 */
	prefix?: ReactNode;
	/**
	 * Static, non-interactive text displayed at the end of the input, inside
	 * the same container (e.g. a unit of measure such as "kg" or "%").
	 * Unlike `append`, it renders as plain text and is never wrapped in a
	 * button.
	 * @TJS-type React.ReactNode
	 */
	suffix?: ReactNode;
	/**
	 * This is an attribute used to identify a DOM node for testing purposes.
	 */
	"data-testid"?: string;
}
export type InputBaseProps = InputProperties & Omit<InputHTMLAttributes<HTMLInputElement>, keyof InputProperties>;
export declare const Input: React.ForwardRefExoticComponent<InputProperties & Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof InputProperties> & React.RefAttributes<HTMLInputElement>> & InputComponents;
export type InputProps = ComponentPropsWithRef<typeof Input>;
export type LabelSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "height" | "className">> & {
	/**
	 * This is an attribute used to identify a DOM node for testing purposes.
	 */
	"data-testid"?: string;
};
export type LabelSkeletonProps = LabelSkeletonProperties;
declare const LabelSkeleton: React.FC<LabelSkeletonProps>;
export interface LabelComponents {
	Skeleton: typeof LabelSkeleton;
}
export interface LabelProperties {
	/**
	 * The content of the label.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * The for attribute specifies which form element a label is bound to.
	 */
	htmlFor?: string;
	/**
	 * If true the label will be visually hidden but maintain accessibility purpose
	 * @default false
	 */
	hidden?: boolean;
}
export type LabelProps = LabelProperties & HTMLAttributes<HTMLElement>;
export declare const Label: React.FC<LabelProps> & LabelComponents;
export type LinkSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "className" | "data-testid">>;
export type LinkSkeletonProps = LinkSkeletonProperties;
declare const LinkSkeleton: React.FC<LinkSkeletonProps>;
export interface LinkComponents {
	Skeleton: typeof LinkSkeleton;
}
export interface LinkProperties {
	/**
	 * The content of the link.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * Change the visual style of the link.
	 * @default neutral
	 */
	appearance?: "primary" | "danger" | "neutral" | "neutral-background";
	/**
	 * The textDecoration property specifies the decoration added to link.
	 * @default neutral
	 */
	textDecoration?: (typeof link.properties.textDecoration)[number];
	/**
	 * The fontSize property sets the size of the link.
	 * @default base
	 */
	fontSize?: keyof typeof link.properties.fontSize;
	/**
	 * The lineHeight property specifies the line height of the link
	 * @default base
	 */
	lineHeight?: keyof typeof link.properties.lineHeight;
}
export type LinkBaseProps = LinkProperties & HTMLAttributes<HTMLElement>;
export declare const Link: PolymorphicForwardRefComponent<"button" | "a", LinkBaseProps> & LinkComponents;
export type LinkProps = ComponentPropsWithRef<typeof Link>;
export type ListSkeletonItemProperties = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
	/**
	 * This is an attribute used to identify a DOM node for testing purposes.
	 */
	"data-testid"?: string;
};
export type ListSkeletonItemProps = ListSkeletonItemProperties;
declare const ListSkeletonItem: React.FC<ListSkeletonItemProps>;
export interface ListSkeletonProperties {
	/**
	 * The content of the list skeleton.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * This is an attribute used to identify a DOM node for testing purposes.
	 */
	"data-testid"?: string;
}
export type ListSkeletonProps = ListSkeletonProperties & HTMLAttributes<HTMLDivElement>;
declare const ListSkeleton: React.FC<ListSkeletonProps>;
export interface ListItemProperties {
	/**
	 * The content of the list item.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
}
export type ListItemProps = ListItemProperties & HTMLAttributes<HTMLLIElement>;
declare const ListItem: React.FC<ListItemProps>;
export interface ListComponents {
	Skeleton: typeof ListSkeleton;
	SkeletonItem: typeof ListSkeletonItem;
	Item: typeof ListItem;
}
export interface ListProperties {
	/**
	 * The content of the list.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * Determines the type of html list that will be rendered
	 * @default ul
	 */
	as?: "ul" | "ol";
	/**
	 * The padding of the list.
	 * @default 6
	 */
	padding?: keyof typeof list.properties.padding;
}
export type ListProps = ListProperties & HTMLAttributes<HTMLUListElement | HTMLOListElement>;
export declare const List: React.FC<ListProps> & ListComponents;
export type MultiSelectSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "className" | "data-testid">>;
export type MultiSelectSkeletonProps = MultiSelectSkeletonProperties & HTMLAttributes<HTMLDivElement>;
declare const MultiSelectSkeleton: React.FC<MultiSelectSkeletonProps>;
export interface MultiSelectComponents {
	Skeleton: typeof MultiSelectSkeleton;
}
export interface MultiSelectOption {
	/**
	 * Label for the option.
	 */
	label: string;
	/**
	 * Value of the option
	 */
	value: string;
}
export interface MultiSelectProperties {
	/**
	 * The name of the wrapper element or the select element when native.
	 */
	name: string;
	/**
	 * The id of the wrapper element or the select element when native.
	 */
	id: string;
	/**
	 * Change the visual style of the select.
	 * @default neutral
	 */
	appearance?: "success" | "warning" | "danger" | "neutral";
	/**
	 * Options of the MultiSelect
	 */
	options: MultiSelectOption[];
	/**
	 * Options of the MultiSelect
	 */
	onChange?: (values: MultiSelectOption[]) => void;
	/**
	 * Deafult of the MultiSelect
	 */
	value?: MultiSelectOption[];
	/**
	 * ZIndex of the MultiSelect
	 */
	zIndex?: keyof typeof multiSelect.properties.zIndex;
}
export type MultiSelectBaseProps = MultiSelectProperties & Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "value">;
export declare const MultiSelect: React.FC<MultiSelectBaseProps> & MultiSelectComponents;
export type MultiSelectProps = ComponentPropsWithRef<typeof MultiSelect>;
export type PopoverPlacement = "top" | "right" | "bottom" | "left" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | "top-start" | "top-end";
export interface PopoverProperties extends PopoverSprinkle {
	/**
	 * An HTML element, or a function that returns one. It's used to set the position of the popover.
	 * @TJS-type React.ReactNode | ((data: { open: boolean, setVisibility: (visibility: boolean) => void }) => React.ReactNode);
	 */
	children: ReactNode | ((data: {
		open: boolean;
		setVisibility: (visibility: boolean) => void;
	}) => ReactNode);
	/**
	 * The content of the popover.
	 * @TJS-type React.ReactNode
	 */
	content: ReactNode;
	/**
	 * If true, the component is shown.
	 */
	visible?: boolean;
	/**
	 * Function to control popover opening and closing.
	 * @TJS-type (visible: boolean) => void;
	 */
	onVisibility?: (visible: boolean) => void;
	/**
	 * Conditional for displaying the popover arrow.
	 * @default true
	 */
	arrow?: boolean;
	/**
	 * A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents.
	 * @default false
	 */
	matchReferenceWidth?: boolean;
	/**
	 * Position of the popover.
	 * @default bottom
	 */
	position?: PopoverPlacement;
	/**
	 * Adds hover event listeners that change the open state, like CSS :hover.
	 * @default false
	 */
	enabledHover?: boolean;
	/**
	 * Adds click event listeners that change the open state.
	 * @default true
	 */
	enabledClick?: boolean;
	/**
	 * Adds listeners that dismiss (close) the floating element.
	 * @default true
	 */
	enabledDismiss?: boolean;
	/**
	 * Offest displaces the floating element from its core placement along the specified axes.
	 * @default 10
	 */
	offset?: number;
	/**
	 * When enabled, renders an invisible overlay that prevents accidental clicks on elements behind the popover.
	 * @default false
	 */
	renderOverlay?: boolean;
}
export type PopoverProps = PopoverProperties & Omit<HTMLAttributes<HTMLDivElement>, "children" | "content">;
export declare const Popover: React.FC<PopoverProps>;
export type RadioSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "className">> & Partial<Pick<RadioProps, "as">> & {
	/**
	 * This is an attribute used to identify a DOM node for testing purposes.
	 */
	"data-testid"?: string;
};
export type RadioSkeletonProps = RadioSkeletonProperties;
declare const RadioSkeleton: React.FC<RadioSkeletonProps>;
export interface RadioComponents {
	Skeleton: typeof RadioSkeleton;
}
export interface RadioProperties {
	/**
	 * Name attribute of the input element.
	 */
	name: string;
	/**
	 * Change the visual style of the radio.
	 * @default radio
	 */
	as?: "radio" | "button";
	/**
	 * Modifies true/false value of the native radio.
	 */
	checked?: boolean;
	/**
	 * Modifies the native disabled state of the native radio.
	 */
	disabled?: boolean;
	/**
	 * Text to be rendered inside the component.
	 */
	label?: string;
}
export type RadioProps = RadioProperties & InputHTMLAttributes<HTMLInputElement>;
export declare const Radio: React.FC<RadioProps> & RadioComponents;
export interface SelectGroupProperties {
	/**
	 * Label for the option group.
	 */
	label: string;
	/**
	 * The content of the option group.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
}
export type SelectGroupProps = SelectGroupProperties & OptgroupHTMLAttributes<HTMLOptGroupElement>;
declare const SelectGroup: React.FC<SelectGroupProps>;
export interface SelectOptionProperties {
	/**
	 * Label for the option.
	 */
	label: string;
	/**
	 * Value of the option
	 */
	value: string;
}
export type SelectOptionProps = SelectOptionProperties & OptionHTMLAttributes<HTMLOptionElement>;
declare const SelectOption: React.FC<SelectOptionProps>;
export type SelectSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "className" | "data-testid">>;
export type SelectSkeletonProps = SelectSkeletonProperties;
declare const SelectSkeleton: React.FC<SelectSkeletonProps>;
export interface SelectComponents {
	Group: typeof SelectGroup;
	Option: typeof SelectOption;
	Skeleton: typeof SelectSkeleton;
}
export interface SelectProperties {
	/**
	 * The name of the wrapper element or the select element when native.
	 */
	name: string;
	/**
	 * The id of the wrapper element or the select element when native.
	 */
	id: string;
	/**
	 * The content of the select.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * Change the visual style of the select.
	 * @default neutral
	 */
	appearance?: "success" | "warning" | "danger" | "neutral" | "ai-generative";
	/**
	 * Shows ai-generative appearance with active ai focus shadow.
	 * When true, this styling takes precedence over `appearance`.
	 * @default false
	 */
	aiGenerated?: boolean;
}
export declare const Select: React.ForwardRefExoticComponent<SelectProperties & React.SelectHTMLAttributes<HTMLSelectElement> & React.InputHTMLAttributes<HTMLSelectElement> & React.RefAttributes<HTMLSelectElement>> & SelectComponents;
export type SelectProps = ComponentPropsWithRef<typeof Select>;
export interface SpinnerProperties {
	/**
	 * Sets the width and height of the spinner.
	 * @default large
	 */
	size?: "small" | "medium" | "large" | number;
	/**
	 * Set the color for the spinner SVG fill.
	 * @default primary-interactive
	 */
	color?: keyof typeof spinner.properties.color;
}
export type SpinnerProps = SpinnerProperties & SVGAttributes<SVGElement>;
export declare const Spinner: React.FC<SpinnerProps>;
/**
 * Available appearance variants for the slider fill.
 * Controls the color scheme of the active range portion of the slider.
 */
export type SliderAppearance = "primary" | "success" | "warning" | "danger" | "neutral";
/**
 * Common properties shared between single and range slider modes.
 */
export interface SliderCommonProperties {
	/**
	 * The minimum value of the slider range.
	 * @default 0
	 */
	min?: number;
	/**
	 * The maximum value of the slider range.
	 * @default 100
	 */
	max?: number;
	/**
	 * The step increment between values.
	 * @default 1
	 */
	step?: number;
	/**
	 * Visual appearance of the slider fill.
	 * @default "primary"
	 */
	appearance?: SliderAppearance;
	/**
	 * Whether the slider is disabled.
	 * @default false
	 */
	disabled?: boolean;
	/**
	 * This is an attribute used to identify a DOM node for testing purposes.
	 */
	"data-testid"?: string;
}
/**
 * Properties specific to single value slider mode.
 * Used for documentation generation.
 */
export interface SliderProperties extends SliderCommonProperties {
	/**
	 * The current value of the slider (single mode).
	 */
	value: number;
	/**
	 * Callback fired when the value changes.
	 */
	onChange?: (value: number) => void;
	/**
	 * Callback fired when the user finishes interacting with the slider.
	 */
	onChangeEnd?: (value: number) => void;
	/**
	 * Accessible label for the slider thumb.
	 * @default "Value"
	 */
	ariaLabel?: string;
}
/**
 * Properties specific to range slider mode (two thumbs).
 */
export interface SliderRangeProperties extends SliderCommonProperties {
	/**
	 * The current minimum value selected on the slider.
	 */
	minValue: number;
	/**
	 * The current maximum value selected on the slider.
	 */
	maxValue: number;
	/**
	 * Callback fired when the min or max value changes.
	 */
	onChange?: (minValue: number, maxValue: number) => void;
	/**
	 * Callback fired when the min value changes.
	 */
	onMinChange?: (value: number) => void;
	/**
	 * Callback fired when the max value changes.
	 */
	onMaxChange?: (value: number) => void;
	/**
	 * Callback fired when the user finishes interacting with the slider.
	 */
	onChangeEnd?: (minValue: number, maxValue: number) => void;
	/**
	 * Accessible label for the minimum value thumb.
	 * @default "Minimum value"
	 */
	minAriaLabel?: string;
	/**
	 * Accessible label for the maximum value thumb.
	 * @default "Maximum value"
	 */
	maxAriaLabel?: string;
}
/**
 * Props for single value slider mode.
 */
export type SliderBaseProps = SliderProperties & Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "style">;
/**
 * Props for range slider mode.
 */
export type SliderRangeBaseProps = SliderRangeProperties & Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "className" | "style">;
declare const SliderRange: React.ForwardRefExoticComponent<SliderRangeProperties & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style" | "onChange"> & React.RefAttributes<HTMLDivElement>>;
export type SliderRangeProps = ComponentPropsWithRef<typeof SliderRange>;
declare const SliderBase: React.ForwardRefExoticComponent<SliderProperties & Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "onChange"> & React.RefAttributes<HTMLDivElement>>;
/**
 * Slider component with Range subcomponent.
 *
 * @example
 * // Single value slider
 * <Slider value={50} onChange={(value) => console.log(value)} />
 *
 * @example
 * // Range slider
 * <Slider.Range minValue={25} maxValue={75} onChange={(min, max) => console.log(min, max)} />
 */
export declare const Slider: React.ForwardRefExoticComponent<SliderProperties & Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "onChange"> & React.RefAttributes<HTMLDivElement>> & {
	Range: React.ForwardRefExoticComponent<SliderRangeProperties & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style" | "onChange"> & React.RefAttributes<HTMLDivElement>>;
};
export type SliderProps = ComponentPropsWithRef<typeof SliderBase>;
export type TagSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "height" | "className">> & {
	/**
	 * This is an attribute used to identify a DOM node for testing purposes.
	 */
	"data-testid"?: string;
};
export type TagSkeletonProps = TagSkeletonProperties;
declare const TagSkeleton: React.FC<TagSkeletonProps>;
export interface TagComponents {
	Skeleton: typeof TagSkeleton;
}
export interface TagProperties {
	/**
	 * The content of the tag.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * Change the visual style of the tag.
	 * @default neutral
	 */
	appearance?: "primary" | "success" | "warning" | "danger" | "neutral" | "ai-generative";
}
export type TagProps = TagProperties & HTMLAttributes<HTMLDivElement>;
export declare const Tag: React.FC<TagProps> & TagComponents;
export type TextSkeletonProperties = {
	fontSize?: keyof typeof text.properties.fontSize;
} & Partial<Pick<SkeletonProps, "width" | "height" | "className" | "data-testid">>;
export type TextSkeletonProps = TextSkeletonProperties;
declare const TextSkeleton: React.FC<TextSkeletonProps>;
export interface TextComponents {
	Skeleton: typeof TextSkeleton;
}
export interface TextProperties extends Omit<TextSprinkle, "WebkitLineClamp"> {
	/**
	 * The content of the link.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * Type of html tag to create for the Text component.
	 * @default p
	 */
	as?: "p" | "span";
}
export type TextProps = TextProperties & Omit<TextSprinkle, "WebkitLineClamp"> & HTMLAttributes<HTMLParagraphElement>;
export declare const Text: React.FC<TextProps> & TextComponents;
export type TextareaSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "className" | "data-testid">>;
export type TextareaSkeletonProps = TextareaSkeletonProperties;
declare const TextareaSkeleton: React.FC<TextareaSkeletonProps>;
export interface TextareaComponents {
	Skeleton: typeof TextareaSkeleton;
}
export interface TextareaProperties {
	/**
	 * Change the visual style of the textarea.
	 * @default neutral
	 */
	appearance?: "neutral" | "success" | "warning" | "danger" | "ai-generative" | "transparent";
	/**
	 * Highlights the field to indicate its value was generated by AI.
	 * Applies AI gradient border, white background and an AI focus ring.
	 */
	aiGenerated?: boolean;
	/**
	 * Number of lines to be rendered for the user to input text
	 * @default 2
	 */
	lines?: number;
	/**
	 * Controls intrinsic sizing behavior of the field. When true, the textarea will grow with content up to the maxLines limit (if provided) and then scroll.
	 * @default false
	 */
	autoGrow?: boolean;
	/**
	 * Caps the textarea visual height to the given number of lines.
	 * When used together with autoGrow=true, the textarea will grow
	 * with content up to this limit and then scroll.
	 */
	maxLines?: number;
	/**
	 * Sets the minimum height of the textarea to the given number of lines.
	 * The textarea will never shrink below this height, even when empty.
	 */
	minLines?: number;
	/**
	 * ID of the textarea
	 * */
	id: string;
	/**
	 * Enable/disable textarea resize functionality
	 * @default true
	 */
	resize?: boolean;
}
export declare const Textarea: React.ForwardRefExoticComponent<TextareaProperties & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.InputHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>> & TextareaComponents;
export type TextareaProps = ComponentPropsWithRef<typeof Textarea>;
export type ThumbnailSkeletonProperties = Partial<Pick<ThumbnailProps, "aspectRatio">> & Partial<Pick<SkeletonProps, "width" | "className" | "data-testid">>;
export type ThumbnailSkeletonProps = ThumbnailSkeletonProperties;
declare const ThumbnailSkeleton: React.FC<ThumbnailSkeletonProps>;
export interface ThumbnailComponents {
	Skeleton: typeof ThumbnailSkeleton;
}
export interface ThumbnailProperties {
	/**
	 * The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
	 */
	alt: string;
	/**
	 * The content of the thumbnail.
	 * @TJS-type React.ReactNode
	 */
	children?: ReactNode;
	/**
	 * Permitted aspect ratios for the size of the thumbnail image.
	 * @default 1/1
	 */
	aspectRatio?: (typeof thumbnail.properties.aspectRatio)[number];
	/**
	 * Width value of the thumbnail image. Defaults to 100%.
	 * @default 100%
	 */
	width?: string;
}
export type ThumbnailProps = ThumbnailProperties & ImgHTMLAttributes<HTMLImageElement>;
export declare const Thumbnail: React.FC<ThumbnailProps> & ThumbnailComponents;
export type TitleSkeletonProperties = Pick<TitleProps, "as"> & Partial<Pick<SkeletonProps, "width" | "height" | "className" | "data-testid">>;
export type TitleSkeletonProps = TitleSkeletonProperties;
declare const TitleSkeleton: React.FC<TitleSkeletonProps>;
export interface TitleComponents {
	Skeleton: typeof TitleSkeleton;
}
export interface TitleProperties extends TitleSprinkle {
	/**
	 * The content of the title.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * Type of html tag to create for the title.
	 * @default h1
	 */
	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
}
export type TitleProps = TitleProperties & HTMLAttributes<HTMLHeadingElement>;
export declare const Title: React.FC<TitleProps> & TitleComponents;
export type ToastOffset = "default" | "high";
export type ToastBehavior = "stacked" | "single";
export interface ToastProviderProperties {
	/**
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * Controls the vertical offset of the toast container from the bottom.
	 * Use "high" for mobile apps with bottom navigation bars.
	 * @default "default"
	 */
	offset?: ToastOffset;
	/**
	 * Controls how multiple toasts are handled.
	 * "stacked" - new toasts are piled up alongside already rendered ones.
	 * "single" - only one toast is shown at a time; each new toast immediately replaces the previous one.
	 * @default "stacked"
	 */
	behavior?: ToastBehavior;
}
export type ToastProviderProps = ToastProviderProperties;
export declare const ToastProvider: React.FC<ToastProviderProps>;
export interface ToastComponents {
	Provider: typeof ToastProvider;
}
export type Types = "primary" | "success" | "danger" | "progress";
export interface ToastProperties {
	/**
	 * Unique toast ID used when hiding or removing a toast.
	 */
	id: string;
	/**
	 * The text that should appear in the toast message.
	 */
	text: string;
	/**
	 * Change the visual style of the toast.
	 * @default primary
	 */
	type?: Types;
	/**
	 * The time in milliseconds that the toast message should persist.
	 * @default 4000
	 */
	duration?: 4000 | 8000 | 16000;
	/**
	 * Tells you whether or not Toast should close automatically.
	 * @default true
	 */
	autoClose?: boolean;
	/**
	 * Tells the toast position when we are using multiple toasts.
	 * @default 0
	 */
	position?: number;
}
export type ToastProps = ToastProperties & HTMLAttributes<HTMLDivElement>;
export declare const Toast: React.FC<ToastProps> & ToastComponents;
export interface ToastContextProps {
	closeToast: (id: string) => void;
	addToast: (toast: Omit<ToastProps, "autoClose">) => void;
}
export declare const useToast: () => ToastContextProps;
export type ToggleSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "className" | "data-testid">>;
export type ToggleSkeletonProps = ToggleSkeletonProperties;
declare const ToggleSkeleton: React.FC<ToggleSkeletonProps>;
export interface ToggleComponents {
	Skeleton: typeof ToggleSkeleton;
}
export interface ToggleProperties {
	/**
	 * The name of the input element.
	 */
	name: string;
	/**
	 * Sets toggle state to activated or deactivated.
	 */
	active?: boolean;
	/**
	 * Text to be rendered inside the component
	 */
	label?: string;
}
export type ToggleProps = ToggleProperties & InputHTMLAttributes<HTMLInputElement>;
export declare const Toggle: React.FC<ToggleProps> & ToggleComponents;
export interface TooltipProperties extends TooltipSprinkle {
	/**
	 * An HTML element, or a function that returns one. It's used to set the position of the tooltip.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * The text that should appear in the tooltip message.
	 */
	content: string;
	/**
	 * Conditional for displaying the popover arrow.
	 * @default false
	 */
	arrow?: boolean;
	/**
	 * Position of the popover.
	 * @default bottom
	 */
	position?: "top" | "bottom" | "left" | "right";
}
export type TooltipProps = TooltipProperties & HTMLAttributes<HTMLDivElement>;
export declare const Tooltip: React.FC<TooltipProps>;
export type ProgressBarSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "height" | "className" | "data-testid">>;
declare const ProgressBarSkeleton: React.FC<ProgressBarSkeletonProperties>;
export interface ProgressBarComponents {
	Skeleton: typeof ProgressBarSkeleton;
}
export interface ProgressBarProperties {
	/**
	 * Progress value from 0 to 100
	 * @note Always renders with a minimum 8px width for visual consistency
	 */
	value: number;
	/**
	 * Change the visual style of the progress bar.
	 * @default neutral
	 */
	appearance?: "primary" | "success" | "warning" | "danger" | "neutral" | "ai-generative";
	/**
	 * Applies a box shadow to the progress bar fill using the appearance color.
	 * @default 0
	 */
	boxShadow?: 0 | 1 | 2;
	/**
	 * Custom height for the progress bar. Any valid CSS height value.
	 * @default "0.5rem"
	 */
	height?: string;
	/**
	 * Change the background color of the progress bar track.
	 * @default neutral-surfaceDisabled
	 */
	backgroundColor?: "neutral-surfaceDisabled" | "neutral-background";
}
/**
 * ProgressBar component displays the progress of an operation or task in a visual format.
 * It provides a horizontal bar that fills based on the completion percentage.
 *
 * @component
 * @example
 * <ProgressBar value={50} appearance="primary" />
 *
 * @example
 * // With skeleton loading state
 * <ProgressBar.Skeleton width="200px" />
 */
export declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProperties & Omit<React.HTMLAttributes<HTMLDivElement>, keyof ProgressBarProperties> & React.RefAttributes<HTMLDivElement>> & ProgressBarComponents;
export type ProgressBarProps = ComponentPropsWithRef<typeof ProgressBar>;
export interface DividerProperties {
	/**
	 * Defines the orientation of the divider.
	 * @default horizontal
	 */
	orientation?: "horizontal" | "vertical";
	/**
	 * Visual appearance color.
	 * @default neutral
	 */
	appearance?: "neutral" | "primary";
	/**
	 * Thickness level based on shape.border.width tokens.
	 * @default 1
	 */
	thickness?: 1 | 2 | 3;
	/**
	 * CSS width of the divider. Applies to horizontal orientation only.
	 * @default "100%"
	 */
	width?: string;
	/**
	 * CSS margin-left applied to the divider.
	 */
	marginLeft?: string;
	/**
	 * CSS margin-right applied to the divider.
	 */
	marginRight?: string;
}
export type DividerProps = DividerProperties & HTMLAttributes<HTMLHRElement>;
export declare const Divider: React.FC<DividerProps>;
export interface AccordionBodyProperties {
	/**
	 * The content of the accordion body.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * The borderBottom property defines a lower border of the accordion body.
	 * @default none
	 */
	borderBottom?: keyof typeof accordion.properties.borderBottom;
	/**
	 * The borderTop property defines a top border of the accordion body.
	 * @default none
	 */
	borderTop?: keyof typeof accordion.properties.borderTop;
	/**
	 * Padding properties are used to generate space around the content area of an Accordion.Body..
	 * @default base
	 */
	padding?: keyof typeof accordion.properties.padding;
}
export type AccordionBodyProps = AccordionBodyProperties & HTMLAttributes<HTMLElement>;
declare const AccordionBody: React.FC<AccordionBodyProps>;
export interface AccordionItemProperties {
	/**
	 * The content of the accordion body.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * Unique indicator to identify accordion items
	 */
	index: string;
	/**
	 * Determines if the accordion item is interactive (clickable) or static.
	 * When false, the header renders as a div without click handlers, hover effects, or toggle icon.
	 * @default true
	 */
	interactive?: boolean;
	/**
	 * This is an attribute used to identify a DOM node for testing purposes.
	 */
	testId?: string;
}
export type AccordionItemProps = AccordionItemProperties;
declare const AccordionItem: React.FC<AccordionItemProps>;
export interface AccordionHeaderProperties {
	/**
	 * The content of the accordion header.
	 * @TJS-type React.ReactNode | ((data: { selected: string; index: string }) => React.ReactNode);
	 */
	children?: ReactNode | ((data: {
		selected: string;
		index: string;
	}) => ReactNode);
	/**
	 * The title to display in the accordion header.
	 */
	title?: string;
	/**
	 * The subtitle to display in the accordion header.
	 */
	subtitle?: string;
	/**
	 * The SVG contents to display in the accordion header.
	 * @TJS-type React.ReactNode
	 */
	icon?: ReactNode;
	/**
	 * Removes the arrow icon that shows if the accordion item is open or not which makes it possible to create a custom indicator.
	 * @default false
	 */
	noIconToggle?: boolean;
	/**
	 * The borderTop property defines a lower border of the accordion header.
	 * @default base
	 */
	borderTop?: keyof typeof accordion.properties.borderTop;
	/**
	 * The borderBottom property defines a lower border of the accordion header.
	 */
	borderBottom?: keyof typeof accordion.properties.borderBottom;
}
export type AccordionHeaderProps = AccordionHeaderProperties & Omit<HTMLAttributes<HTMLElement>, "children">;
declare const AccordionHeader: React.FC<AccordionHeaderProps>;
export interface AccordionComponents {
	Body: typeof AccordionBody;
	Item: typeof AccordionItem;
	Header: typeof AccordionHeader;
}
export interface AccordionBaseProperties {
	/**
	 * The content of the accordion.
	 * @TJS-type React.ReactNode
	 */
	children?: ReactNode;
}
export interface UncontrolledAccordionProperties extends AccordionBaseProperties {
	/**
	 * Informs which accordion item is open by default, this value must be the same as informed in the index of each item
	 */
	selectedDefault?: string;
}
export interface ControlledAccordionProperties extends AccordionBaseProperties {
	/**
	 * The currently selected accordion item ID.
	 */
	selectedItem: string;
	/**
	 * Callback fired when the selected accordion item changes.
	 * @param selectedId The ID of the selected accordion item
	 */
	onItemSelect?: (selectedId: string) => void;
}
/**
 * Props for the Accordion component, supporting both controlled and uncontrolled modes
 */
export type AccordionProps = (UncontrolledAccordionProperties | ControlledAccordionProperties) & Omit<HTMLAttributes<HTMLElement>, "onItemSelect" | "selectedItem">;
export type AccordionProperties = AccordionBaseProperties & UncontrolledAccordionProperties & ControlledAccordionProperties;
export declare const Accordion: React.FC<AccordionProps> & AccordionComponents;
export type AlertSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "height" | "className" | "data-testid">>;
export type AlertSkeletonProps = AlertSkeletonProperties;
declare const AlertSkeleton: React.FC<AlertSkeletonProps>;
export interface AlertComponents {
	Skeleton: typeof AlertSkeleton;
}
export interface AlertProperties {
	/**
	 * The content for the title of the alert.
	 */
	title?: string;
	/**
	 * Change the visual style of the alert.
	 * @default neutral
	 */
	appearance?: "primary" | "success" | "warning" | "danger" | "neutral";
	/**
	 * The content of the alert.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * Function to be passed on actioning the dismiss button.
	 * @TJS-type () => void;
	 */
	onRemove?: () => void;
	/**
	 * Determines if the alert is shown or not.
	 * @default true
	 */
	show?: boolean;
}
export type AlertProps = AlertProperties & HTMLAttributes<HTMLElement>;
export declare const Alert: React.FC<AlertProps> & AlertComponents;
export interface CardBodyProperties {
	/**
	 * The content of the card body.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * The padding properties are used to generate space around an card's body content area.
	 * @default none
	 */
	padding?: keyof typeof card.subComponents.body.properties.padding;
}
export type CardBodyProps = CardBodyProperties & HTMLAttributes<HTMLElement>;
declare const CardBody: React.FC<CardBodyProps>;
export interface CardFooterProperties {
	/**
	 * The content of the card footer.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * The padding properties are used to generate space around an card's footer content area.
	 * @default none
	 */
	padding?: keyof typeof card.subComponents.footer.properties.padding;
}
export type CardFooterProps = CardFooterProperties & HTMLAttributes<HTMLElement>;
declare const CardFooter: React.FC<CardFooterProps>;
export interface CardHeaderProperties {
	/**
	 * The content of the card header.
	 * @TJS-type React.ReactNode
	 */
	children?: ReactNode;
	/**
	 * The title to display in the card header.
	 */
	title?: string;
	/**
	 * The padding properties are used to generate space around an card's header content area.
	 * @default none
	 */
	padding?: keyof typeof card.subComponents.header.properties.padding;
}
export type CardHeaderProps = CardHeaderProperties & HTMLAttributes<HTMLElement>;
declare const CardHeader: React.FC<CardHeaderProps>;
export interface CardComponents {
	Body: typeof CardBody;
	Footer: typeof CardFooter;
	Header: typeof CardHeader;
}
export interface CardProperties {
	/**
	 * The content of the card.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * The padding properties are used to generate space around an card's content area.
	 * @default base
	 */
	padding?: keyof typeof card.properties.padding;
	/**
	 * The backgroundColor property sets the background color of the card.
	 * @default neutral-background
	 */
	backgroundColor?: keyof typeof card.properties.backgroundColor;
}
export type CardProps = CardProperties & HTMLAttributes<HTMLElement>;
export declare const Card: React.FC<CardProps> & CardComponents;
export interface CollapsibleBodyProperties {
	/**
	 * The content of the collapsible body.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * Show Collapsible.Body when state is open or closed.
	 * @default open
	 */
	visibleWhen?: "open" | "closed";
	/**
	 * Set the direction that Collapsible.Body going to open
	 * @default none
	 */
	direction?: "top" | "bottom" | "none";
}
export type CollapsibleBodyProps = CollapsibleBodyProperties & HTMLAttributes<HTMLElement>;
declare const CollapsibleBody: React.FC<CollapsibleBodyProps>;
export interface CollapsibleItemProperties {
	/**
	 * The content of the collapsible body.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
}
export type CollapsibleItemProps = CollapsibleItemProperties;
declare const CollapsibleItem: React.FC<CollapsibleItemProps>;
export interface CollapsibleComponents {
	Body: typeof CollapsibleBody;
	Item: typeof CollapsibleItem;
}
export interface CollapsibleProperties {
	children?: ReactNode;
	open?: boolean;
}
export type CollapsibleBaseProps = CollapsibleProperties & Omit<HTMLAttributes<HTMLElement>, "onChange">;
export declare const Collapsible: React.FC<CollapsibleProperties> & CollapsibleComponents;
export type CloseOnOutsidePress = (event: PointerEvent | MouseEvent) => boolean;
export interface ModalBodyProperties {
	/**
	 * The content of the modal body.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * The padding properties are used to generate space around an modal's body content area.
	 * @default none
	 */
	padding?: keyof typeof modal.subComponents.body.properties.padding;
}
export type ModalBodyProps = ModalBodyProperties & HTMLAttributes<HTMLElement>;
declare const ModalBody: React.FC<ModalBodyProps>;
export interface ModalFooterProperties {
	/**
	 * The content of the modal footer.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * The padding properties are used to generate space around an modal's footer content area.
	 * @default none
	 */
	padding?: keyof typeof modal.subComponents.footer.properties.padding;
}
export type ModalFooterProps = ModalFooterProperties & HTMLAttributes<HTMLElement>;
declare const ModalFooter: React.FC<ModalFooterProps>;
export interface ModalHeaderProperties {
	/**
	 * The content of the modal header.
	 * @TJS-type React.ReactNode
	 */
	children?: ReactNode;
	/**
	 * The title to display in the modal header.
	 */
	title?: string;
	/**
	 * The tag to display next to the title.
	 * @TJS-type React.ReactNode
	 */
	tag?: ReactNode;
	/**
	 * The padding properties are used to generate space around an modal's header content area.
	 * @default none
	 */
	padding?: keyof typeof modal.subComponents.header.properties.padding;
}
export type ModalHeaderProps = ModalHeaderProperties & HTMLAttributes<HTMLElement>;
declare const ModalHeader: React.FC<ModalHeaderProps>;
export interface ModalComponents {
	Body: typeof ModalBody;
	Footer: typeof ModalFooter;
	Header: typeof ModalHeader;
}
export interface ModalProperties extends ModalSprinkle {
	/**
	 * The content of the modal.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * Whether the modal is open or not.
	 */
	open: boolean;
	/**
	 * Callback fired when the component requests to be closed.
	 * @TJS-type (open: boolean) => void;
	 */
	onDismiss?: (open: boolean) => void;
	/**
	 * Id to be embedded in the portal element
	 */
	portalId?: string;
	/**
	 * Controls whether clicking/pressing outside should close the modal.
	 * - boolean: enable/disable dismissal on outside press
	 * - function: receive the DOM event and return true to allow closing, false to ignore
	 *
	 * Defaults to true.
	 */
	closeOnOutsidePress?: boolean | CloseOnOutsidePress;
	/**
	 * The attribute name to ignore when checking for outside clicks. Useful to
	 * mark regions (e.g., a chat) that should not close the modal when clicked.
	 * @default "data-nimbus-outside-press-ignore"
	 */
	ignoreAttributeName?: string;
	/**
	 * The padding properties are used to generate space around an modal's content area.
	 * @default base
	 */
	padding?: keyof typeof modal.properties.padding;
	/**
	 * Controls whether the built-in close (X) button renders.
	 * Only takes effect when `onDismiss` is provided.
	 * @default true
	 */
	renderDismissButton?: boolean;
	/**
	 * Stacking layer for the modal.
	 * - "base": standard modal layer (above the page, below floating components like tooltip/toast/popover).
	 * - "top": renders above all other floating components. Reserved exclusively for Modal.
	 *   Only effective on the default portaled path; has no effect when `root` is provided.
	 * @default "base"
	 */
	zIndex?: "base" | "top";
}
export type ModalProps = ModalProperties & {
	/**
	 * Root element where the portal should be mounted. When provided and not null,
	 * the portal renders inside this element; when null/undefined, the default root is used.
	 */
	root?: HTMLElement | null;
} & HTMLAttributes<HTMLDivElement>;
export declare const Modal: React.FC<ModalProps> & ModalComponents;
export interface PaginationItemData {
	pageNumber: number | string;
	isCurrent: boolean;
}
export interface PaginationProperties {
	/**
	 * The currently selected page.
	 */
	activePage: number;
	/**
	 * The total number of pages.
	 */
	pageCount: number;
	/**
	 * Called with event and page number when a page is clicked.
	 * @TJS-type (page: number) => void;
	 */
	onPageChange: (page: number) => void;
	/**
	 * Determines whether page numbers should be shown.
	 * @default true
	 */
	showNumbers?: boolean;
	/**
	 * Custom render function for pagination items.
	 */
	renderItem?: (item: PaginationItemData) => React.ReactNode;
}
export type PaginationProps = PaginationProperties & HTMLAttributes<HTMLElement>;
export declare const Pagination: React.FC<PaginationProps>;
export interface ScrollPaneItemProperties {
	/**
	 * The content to be rendered inside the scroll pane item
	 */
	children: ReactNode;
	/**
	 * Custom class name for styling
	 */
	className?: string;
	/**
	 * Callback fired when the item is clicked
	 */
	onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
}
export type ScrollPaneItemProps = ScrollPaneItemProperties & {
	style?: React.CSSProperties;
} & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
export type ScrollPaneArrowProperties = {
	children: ReactNode;
};
export type ScrollPaneArrowVerticalEndProperties = ScrollPaneArrowProperties;
export type ScrollPaneArrowVerticalStartProperties = ScrollPaneArrowProperties;
export type ScrollPaneArrowHorizontalEndProperties = ScrollPaneArrowProperties;
export type ScrollPaneArrowHorizontalStartProperties = ScrollPaneArrowProperties;
export type ScrollPaneScrollBehavior = "hidden-items" | "always";
export interface ScrollPaneProperties {
	/**
	 * The content to be rendered inside the scroll pane
	 */
	children: ReactNode;
	/**
	 * Whether to show gradient overlays when content overflows
	 * @default true
	 */
	showGradients?: boolean;
	/**
	 * Whether to show navigation arrows for scrolling
	 * @default false
	 */
	showArrows?: boolean;
	/**
	 * Whether to show the scrollbar
	 * @default true
	 */
	showScrollbar?: boolean;
	/**
	 * The direction of the scroll (horizontal or vertical)
	 * @default "horizontal"
	 */
	direction?: "horizontal" | "vertical";
	/**
	 * Whether items should scroll into view when clicked
	 * @default true
	 */
	scrollToItemOnClick?: boolean;
	/**
	 * Defines the scroll behavior when clicking on items
	 * - 'hidden-items': Only scrolls to items that are not fully visible (default)
	 * - 'always': Always scrolls to items, centering them in the viewport
	 * @default "hidden-items"
	 */
	scrollBehavior?: ScrollPaneScrollBehavior;
	/**
	 * Enable grab-to-scroll functionality (click and drag to scroll)
	 * When enabled, prevents item dragging inside the ScrollPane
	 * @default false
	 */
	enableGrabScroll?: boolean;
	/**
	 * Custom arrow component to render at the start of the scroll area
	 */
	scrollPaneArrowStart?: React.ReactNode;
	/**
	 * Custom arrow component to render at the end of the scroll area
	 */
	scrollPaneArrowEnd?: React.ReactNode;
	/**
	 * Props to be passed to the content container
	 */
	contentContainerProps?: object;
}
export type ScrollPaneProps = ScrollPaneProperties & Omit<BoxProps, "children"> & {
	contentContainerProps?: BoxProps;
	/**
	 * Ref to the scroll container
	 */
	scrollContainerRef?: RefObject<HTMLDivElement | null>;
};
/**
 * ScrollPane component handles responsive scrolls in lists that are overflowing inside a container.
 * It provides gradient overlays, optional navigation arrows, and scroll-to-item functionality.
 *
 * @example
 * <ScrollPane showArrows showGradients showScrollbar>
 *   <ScrollPane.Item>Item 1</ScrollPane.Item>
 *   <ScrollPane.Item>Item 2</ScrollPane.Item>
 * </ScrollPane>
 */
export declare const ScrollPane: {
	({ children, showGradients, showArrows, showScrollbar, scrollContainerRef: externalScrollContainerRef, direction, scrollToItemOnClick, scrollBehavior, enableGrabScroll, scrollPaneArrowStart, scrollPaneArrowEnd, contentContainerProps, ...rest }: ScrollPaneProps): React.JSX.Element;
	displayName: string;
	Item: React.FC<ScrollPaneItemProps>;
	ArrowHorizontalStart: React.FC<ScrollPaneArrowProperties>;
	ArrowHorizontalEnd: React.FC<ScrollPaneArrowProperties>;
	ArrowVerticalStart: React.FC<ScrollPaneArrowProperties>;
	ArrowVerticalEnd: React.FC<ScrollPaneArrowProperties>;
};
export interface SidebarBodyProperties {
	/**
	 * The content of the sidebar body.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * The padding properties are used to generate space around an sidebar's body content area.
	 * @default base
	 */
	padding?: keyof typeof sidebar.properties.padding;
}
export type SidebarBodyProps = SidebarBodyProperties & HTMLAttributes<HTMLElement>;
declare const SidebarBody: React.FC<SidebarBodyProps>;
export interface SidebarFooterProperties {
	/**
	 * The content of the sidebar footer.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * The padding properties are used to generate space around an sidebar's footer content area.
	 * @default base
	 */
	padding?: keyof typeof sidebar.properties.padding;
}
export type SidebarFooterProps = SidebarFooterProperties & HTMLAttributes<HTMLElement>;
declare const SidebarFooter: React.FC<SidebarFooterProps>;
export interface SidebarHeaderProperties {
	/**
	 * The content of the sidebar header.
	 * @TJS-type React.ReactNode
	 */
	children?: ReactNode;
	/**
	 * The title to display in the sidebar header.
	 */
	title?: string;
	/**
	 * The padding properties are used to generate space around an sidebar's header content area.
	 * @default base
	 */
	padding?: keyof typeof sidebar.properties.padding;
}
export type SidebarHeaderProps = SidebarHeaderProperties & HTMLAttributes<HTMLElement>;
declare const SidebarHeader: React.FC<SidebarHeaderProps>;
export interface SidebarComponents {
	Body: typeof SidebarBody;
	Footer: typeof SidebarFooter;
	Header: typeof SidebarHeader;
}
export interface SidebarProperties extends SidebarSprinkle {
	/**
	 * Side from which the sidebar will appear.
	 * @default right
	 */
	position?: "right" | "left";
	/**
	 * The padding properties are used to generate space around an sidebar's content area.
	 * @default base
	 */
	padding?: keyof typeof sidebar.properties.padding;
	/**
	 * The content of the sidebar.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * Callback fired when the component requests to be closed.
	 * () => void;
	 */
	onRemove?: () => void;
	/**
	 * Determines if the sidebar is shown or not.
	 * @default true
	 */
	open?: boolean;
	/**
	 * Determines if RemoveScroll wraps sidebar's children component.
	 * @default true
	 */
	needRemoveScroll?: boolean;
	/**
	 * Controls whether clicking/pressing outside should close the sidebar.
	 * - boolean: enable/disable dismissal on outside press
	 * - function: receive the DOM event and return true to allow closing, false to ignore
	 *
	 * Defaults to true for backward compatibility.
	 */
	closeOnOutsidePress?: boolean | CloseOnOutsidePress;
	/**
	 * The attribute name to ignore when checking for outside clicks.
	 * @default "data-nimbus-outside-press-ignore"
	 */
	ignoreAttributeName?: string;
}
export type SidebarProps = SidebarProperties & {
	/**
	 * Root element where the portal should be mounted. When provided and not null,
	 * the portal renders inside this element; when null/undefined, the default root is used.
	 */
	root?: HTMLElement | null;
} & HTMLAttributes<HTMLDivElement>;
export declare const Sidebar: React.FC<SidebarProps> & SidebarComponents;
/**
 * Represents the visual state of a step
 */
export type StepState = "completed" | "started" | "pending";
export interface StepperItemProperties {
	/**
	 * The step number (0-based index) for this item.
	 * This is automatically assigned by the parent Stepper component.
	 */
	step: number;
	/**
	 * The label text to display for this step
	 */
	label?: string;
}
export type StepperItemProps = StepperItemProperties & HTMLAttributes<HTMLDivElement>;
export interface StepperCardProperties {
	className?: string;
	/**
	 * The content to be rendered inside the card container
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
}
export type StepperCardProps = StepperCardProperties;
export interface StepperComponents {
	Item: React.FC<Omit<StepperItemProps, "step">>;
	Card: React.FC<StepperCardProps>;
}
export interface BaseStepperProperties {
	/**
	 * The currently active step (0-based index).
	 * Steps before this will be marked as completed.
	 */
	activeStep: number;
	/**
	 * The content of the stepper (StepperItem components).
	 * Total steps will be calculated automatically based on the number of children.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
}
export interface ControlledStepperProperties extends BaseStepperProperties {
	/**
	 * The currently selected step (0-based index).
	 * This step will be visually highlighted to show user selection.
	 */
	selectedStep: number;
	/**
	 * Callback called when a step is selected.
	 * Receives the step number (0-based index) as parameter.
	 */
	onSelectStep: (step: number) => void;
}
/**
 * Props for the Stepper component, supporting both controlled and uncontrolled modes
 */
export type StepperProps = (BaseStepperProperties | ControlledStepperProperties) & Omit<BoxProps, "display" | "flexWrap" | "gap">;
export type StepperProperties = BaseStepperProperties & ControlledStepperProperties;
export declare const Stepper: React.FC<StepperProps> & StepperComponents;
/**
 * Context value provided by StepperContext to share state between stepper components
 */
export interface StepperContextValue {
	/**
	 * The total number of steps in the stepper
	 */
	totalSteps: number;
	/**
	 * The currently active step (0-based index)
	 */
	activeStep: number;
	/**
	 * The currently selected step (0-based index)
	 */
	selectedStep?: number;
	/**
	 * Callback to handle step selection
	 */
	onSelect?: (step: number) => void;
}
/**
 * Checks if the stepper is in controlled mode.
 * @param props - The props of the stepper
 * @returns True if the stepper is controlled, false otherwise
 */
export declare const isControlled: (props: any) => props is ControlledStepperProperties;
export interface TabsButtonProperties {
	/**
	 * Label of the tab button.
	 */
	label: string;
	/**
	 * Content of the tab button.
	 */
	labelContent?: ReactNode;
	/**
	 * Determines if tab is active.
	 * @default false
	 */
	active?: boolean;
	/**
	 * Position of the tab inside the tab list.
	 */
	index: number;
	/**
	 * Function executed when clicking the tab.
	 * @TJS-type (index: number) => void;
	 */
	setActiveTab: (index: number) => void;
	/**
	 * Determines if tab spans all available width.
	 * @default false
	 */
	fullWidth?: boolean;
}
export type TabsButtonProps = TabsButtonProperties & HTMLAttributes<HTMLLIElement>;
declare const TabsButton: React.FC<TabsButtonProps>;
export interface TabsItemProperties {
	/**
	 * Label of the tabpanel. Used to pair with it's corresponding tab control.
	 */
	label: string;
	/**
	 * Optional content of the tabpanel.
	 * @TJS-type ReactNode;
	 */
	labelContent?: ReactNode;
	/**
	 * The content of the tabs item.
	 * @TJS-type ReactNode | ReactNode[];
	 */
	children: ReactNode | ReactNode[];
}
export type TabsItemProps = TabsItemProperties & HTMLAttributes<HTMLElement>;
declare const TabsItem: React.FC<TabsItemProps>;
export interface TabsComponents {
	Button: typeof TabsButton;
	Item: typeof TabsItem;
}
export interface BaseTabsProperties {
	/**
	 * The content of the tabs.
	 * @TJS-type ReactElement<TabsButtonProps>[];
	 */
	children: ReactElement<TabsButtonProps>[];
	/**
	 * Sets the indicated tab as active by default. If unset, defaults to first tab.
	 */
	preSelectedTab?: number;
	/**
	 * Determines if tabs should span available width.
	 * @default false
	 */
	fullWidth?: boolean;
}
export interface ControlledTabsProperties extends BaseTabsProperties {
	/**
	 * The currently selected tab index.
	 */
	selected: number;
	/**
	 * Callback fired when the selected tab changes.
	 */
	onTabSelect: (index: number) => void;
	/**
	 * preSelectedTab is not used in controlled mode
	 */
	preSelectedTab?: never;
}
export type TabsProps = (BaseTabsProperties | ControlledTabsProperties) & Omit<HTMLAttributes<HTMLDivElement>, "children" | "onSelect">;
export declare const Tabs: React.FC<TabsProps> & TabsComponents;
export interface TableBodyProperties {
	/**
	 * The content of the table body.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
}
export type TableBodyProps = TableBodyProperties & HTMLAttributes<HTMLTableSectionElement>;
declare const TableBody: React.FC<TableBodyProps>;
export interface TableCellProperties extends TableSprinkle {
	/**
	 * The content of the table cell.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * Type of html tag to create for the table cell.
	 * @default td
	 */
	as?: "td" | "th";
	/**
	 * Column index (0-based) to apply minWidth constraint from the Table's columnLayout.
	 * When provided, the cell will inherit minWidth from the corresponding column definition.
	 */
	column?: number;
}
export type TableCellProps = TableCellProperties & HTMLAttributes<HTMLTableCellElement>;
declare const TableCell: React.FC<TableCellProps>;
export interface TableHeadProperties {
	/**
	 * The content of the table head.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
}
export type TableHeadProps = TableHeadProperties & HTMLAttributes<HTMLTableSectionElement>;
declare const TableHead: React.FC<TableHeadProps>;
export interface TableRowProperties extends TableSprinkle {
	/**
	 * The content of the table row.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * The ID of the table row.
	 */
	id?: string;
	/**
	 * Function to be passed when clicking on the table row.
	 * @TJS-type () => void;
	 */
	onClick?: () => void;
}
export type TableRowProps = TableRowProperties & HTMLAttributes<HTMLTableRowElement>;
declare const TableRow: React.FC<TableRowProps>;
export interface TableComponents {
	Body: typeof TableBody;
	Cell: typeof TableCell;
	Head: typeof TableHead;
	Row: typeof TableRow;
}
export interface TableColumnLayout {
	/**
	 * Unique identifier for the column.
	 */
	id: string;
	/**
	 * Fixed width applied to the column. Accepts any valid CSS width value in pixels.
	 */
	width?: string;
	/**
	 * Growth factor that distributes remaining space among columns without a fixed width.
	 * Must be a positive number greater than 0.
	 */
	grow?: number;
	/**
	 * Minimum width constraint for the column. The column will not shrink below this value.
	 * Only applies when using `grow`. Accepts any valid CSS width value in pixels.
	 */
	minWidth?: string;
	/**
	 * Determines which side the column will be fixed (sticky) to during horizontal scrolling.
	 * Fixed columns use CSS `position: sticky` and stay visible on the specified side.
	 * Only contiguous columns can be fixed (i.e. no 'normal' columns between fixed columns on the same side).
	 * Requires a defined `width` to calculate proper offsets.
	 * - 'left': Column sticks to the left side of the table
	 * - 'right': Column sticks to the right side of the table
	 */
	fixed?: "left" | "right";
}
export interface TableProperties extends TableWrapperSprinkle {
	/**
	 * The content of the table.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * Column sizing definitions applied from left to right. Use `width` for fixed columns and `grow` to distribute the remaining space proportionally.
	 */
	columnLayout?: TableColumnLayout[];
	/**
	 * Minimum width of the table. When the container is smaller, horizontal scrolling is enabled.
	 * Accepts any valid CSS width value (e.g., "600px", "50rem").
	 */
	minWidth?: string;
	/**
	 * Maximum width of the table. The table will not exceed this width.
	 * Accepts any valid CSS width value (e.g., "1200px", "80rem").
	 */
	maxWidth?: string;
	/**
	 * Shows a sticky scrollbar at the bottom of the viewport when the table overflows horizontally.
	 * The scrollbar stays visible while scrolling vertically, making it easier to navigate wide tables.
	 * @default false
	 */
	stickyScrollbar?: boolean;
}
export type TableProps = TableProperties & HTMLAttributes<HTMLTableElement>;
export declare const Table: React.FC<TableProps> & TableComponents;
export interface SegmentedControlButtonSkeletonProps {
	/** Width of the skeleton button */
	width?: string;
	/** Height of the skeleton button */
	height?: string;
	/** Additional CSS class name */
	className?: string;
}
export type SegmentedControlButtonProperties = PropsWithChildren<{
	/**
	 * Unique identifier for the segment button.
	 * Required for proper state management and accessibility.
	 */
	id: string;
	/**
	 * Label of the segment used for accessibility.
	 */
	label?: string;
	/**
	 * Determines if segment spans all available width.
	 * @default false
	 */
	fullWidth?: boolean;
}>;
export type SegmentedControlButtonProps = SegmentedControlButtonProperties & ButtonHTMLAttributes<HTMLButtonElement>;
export interface SegmentedControlButtonComponents {
	Skeleton: React.FC<SegmentedControlButtonSkeletonProps>;
}
declare const SegmentedControlButton: PolymorphicForwardRefComponent<"button" | "a", SegmentedControlButtonProps> & SegmentedControlButtonComponents;
declare const SegmentedControlButtonSkeleton: React.FC<SegmentedControlButtonSkeletonProps>;
export interface SegmentedControlBaseProps {
	/**
	 * The content of the segmented control.
	 * Should contain SegmentedControlButton components with unique id props.
	 */
	children: ReactNode;
	/**
	 * Determines if segments span all available width.
	 * @default false
	 */
	fullWidth?: boolean;
}
/**
 * Component composition structure for the SegmentedControl
 */
export interface SegmentedControlComponents {
	Button: typeof SegmentedControlButton;
	ButtonSkeleton: typeof SegmentedControlButtonSkeleton;
}
export interface ControlledSegmentedControlProperties extends SegmentedControlBaseProps {
	/**
	 * The currently selected segment IDs.
	 * Allows for single or multiple selection.
	 */
	selectedSegments: string[];
	/**
	 * Callback fired when the selected segments change.
	 * @param selectedIds Array of selected segment IDs
	 */
	onSegmentsSelect?: (selectedIds: string[]) => void;
}
/**
 * Props for the SegmentedControl component, supporting both controlled and uncontrolled modes
 */
export type SegmentedControlProps = (SegmentedControlBaseProps | ControlledSegmentedControlProperties) & Omit<BoxProps, "display" | "backgroundColor" | "gap" | "borderRadius" | "children">;
/**
 * SegmentedControl component for grouped selection controls
 */
export declare const SegmentedControl: React.FC<SegmentedControlProps> & SegmentedControlComponents;
export interface SegmentedControlContextValue {
	/**
	 * Register a button with its unique identifier
	 * @param id The unique identifier for the button
	 */
	registerButton: (id: string) => void;
	/**
	 * Unregister a button by its identifier
	 * @param id The identifier of the button to unregister
	 */
	unregisterButton: (id: string) => void;
	/**
	 * Toggle a segment's state by ID
	 * @param id The unique identifier of the segment to toggle
	 */
	toggleSegment: (id: string) => void;
	/**
	 * Check if a segment is currently selected by ID
	 * @param id The unique identifier of the segment to check
	 */
	isSelected: (id: string) => boolean;
	/**
	 * Whether buttons should span full width
	 */
	fullWidth: boolean;
}
/**
 * Hook to use SegmentedControl context with error if not found
 * @throws Error if not within a SegmentedControl
 */
export declare const useSegmentedControlContext: () => SegmentedControlContextValue;
export interface SplitButtonActionProperties {
	/**
	 * The content of the action item.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * Optional icon to display before the action text.
	 * @TJS-type React.ReactNode
	 */
	icon?: ReactNode;
	/**
	 * Callback function when the action is clicked.
	 * @TJS-type () => void;
	 */
	onClick?: () => void;
	/**
	 * Disables the action item.
	 * @default false
	 */
	disabled?: boolean;
}
export type SplitButtonActionProps = SplitButtonActionProperties & Pick<BoxProps, "className" | "backgroundColor" | "borderWidth" | "display" | "alignItems" | "gap" | "p" | "borderRadius">;
declare const SplitButtonAction: React.FC<SplitButtonActionProps>;
export interface SplitButtonPrimaryProperties {
	/**
	 * The content of the primary button.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * Callback function when the primary button is clicked.
	 * @TJS-type () => void;
	 */
	onClick?: () => void;
}
export type SplitButtonPrimaryProps = SplitButtonPrimaryProperties & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "children">;
declare const SplitButtonPrimary: React.FC<SplitButtonPrimaryProps>;
export interface SplitButtonSecondaryProperties {
	/**
	 * The content of the secondary dropdown menu.
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * Accessible label for the dropdown button.
	 * @default "Show more actions"
	 */
	ariaLabel?: string;
}
export type SplitButtonSecondaryProps = SplitButtonSecondaryProperties & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">;
declare const SplitButtonSecondary: React.FC<SplitButtonSecondaryProps>;
export interface SplitButtonComponents {
	Action: typeof SplitButtonAction;
	Primary: typeof SplitButtonPrimary;
	Secondary: typeof SplitButtonSecondary;
}
export interface SplitButtonProperties {
	/**
	 * The subcomponents (Primary and Secondary).
	 * @TJS-type React.ReactNode
	 */
	children: ReactNode;
	/**
	 * Disables the entire split button.
	 * @default false
	 */
	disabled?: boolean;
	/**
	 * Controls the visibility of the popover.
	 */
	open?: boolean;
	/**
	 * Callback function to control popover opening and closing.
	 * @TJS-type (open: boolean) => void;
	 */
	onOpenChange?: (open: boolean) => void;
	/**
	 * Position of the popover relative to the button.
	 * @default bottom-end
	 */
	popoverPosition?: PopoverProps["position"];
}
export type SplitButtonProps = SplitButtonProperties & Omit<BoxProps, "children" | "display" | "gap" | "position">;
/**
 * SplitButton component allows users to perform actions by clicking a primary button and displaying a dropdown menu with additional actions.
 */
export declare const SplitButton: React.FC<SplitButtonProps> & SplitButtonComponents;
export type TimeFormat = "12h" | "24h";
export type AmPm = "AM" | "PM";
export type TimePickerMode = "scroll" | "dropdown";
/**
 * Translatable labels for the TimePicker component.
 * All texts can be customized for localization.
 */
export interface TimePickerLabels {
	/**
	 * Label for the hours column in 24h format.
	 * @default "Hours"
	 */
	hoursLabel?: string;
	/**
	 * Label for the hour column in 12h format.
	 * @default "Hour"
	 */
	hourLabel?: string;
	/**
	 * Label for the minutes column.
	 * @default "Minutes"
	 */
	minutesLabel?: string;
	/**
	 * Accessible label for the AM/PM selector group.
	 * @default "AM/PM selector"
	 */
	amPmSelectorLabel?: string;
	/**
	 * Display text for the AM option.
	 * @default "AM"
	 */
	amLabel?: string;
	/**
	 * Display text for the PM option.
	 * @default "PM"
	 */
	pmLabel?: string;
}
export interface TimeValue {
	hours: number;
	minutes: number;
	ampm?: AmPm;
}
export interface TimePickerProperties {
	/**
	 * Display mode for the time picker panel.
	 * - "scroll": Shows a scroll-based wheel picker with separate hour/minute columns.
	 * - "dropdown": Shows a single scrollable list of time options.
	 * @default "scroll"
	 */
	mode?: TimePickerMode;
	/**
	 * Current time value (HH:mm string format or Date object).
	 * For 12h format, use "HH:mm AM/PM" or just "HH:mm" (will default to AM).
	 */
	value?: string | Date | null;
	/**
	 * Callback fired when the time changes.
	 * @param value - The formatted time string (HH:mm for 24h, hh:mm AM/PM for 12h).
	 * @param date - A Date object representing the selected time (today's date with selected time).
	 */
	onChange?: (value: string | null, date: Date | null) => void;
	/**
	 * Time format: 12-hour with AM/PM or 24-hour.
	 * @default "24h"
	 */
	format?: TimeFormat;
	/**
	 * Step interval in minutes for the time picker.
	 * For scroll mode: controls minute increments in the minutes column.
	 * For dropdown mode: controls the time options shown in the list.
	 * Common values: 1, 15, 30, 60.
	 * @default 1 for scroll picker, 30 for dropdown
	 */
	step?: number;
	/**
	 * Whether the picker is disabled.
	 * @default false
	 */
	disabled?: boolean;
	/**
	 * Placeholder text for the input field.
	 * @default "Select time"
	 */
	placeholder?: string;
	/**
	 * Controls the open state of the picker panel (controlled mode).
	 */
	open?: boolean;
	/**
	 * Callback fired when the panel open state changes.
	 */
	onOpenChange?: (open: boolean) => void;
	/**
	 * Accessible label for the time picker input.
	 */
	"aria-label"?: string;
	/**
	 * ID of an element that labels the time picker.
	 */
	"aria-labelledby"?: string;
	/**
	 * ID of an element that describes the time picker.
	 */
	"aria-describedby"?: string;
	/**
	 * Name attribute for the hidden input (for form submission).
	 */
	name?: string;
	/**
	 * Whether the input is required.
	 * @default false
	 */
	required?: boolean;
	/**
	 * ID attribute for the input element.
	 */
	id?: string;
	/**
	 * Translatable labels for localization.
	 * Allows customization of all text content rendered by the component.
	 */
	labels?: TimePickerLabels;
}
export type OmittedHTMLAttributes = "value" | "onChange" | "placeholder" | "disabled";
export interface TimePickerProps extends TimePickerProperties, Omit<HTMLAttributes<HTMLDivElement>, OmittedHTMLAttributes> {
}
/**
 * TimePicker allows users to select a time value using either a scroll-based
 * wheel picker (default) or a dropdown list of time options.
 *
 * @example
 * // Basic 24h scroll picker with 15-minute intervals
 * <TimePicker value="14:30" onChange={(value) => console.log(value)} step={15} />
 *
 * @example
 * // 12h format scroll picker
 * <TimePicker format="12h" step={30} />
 *
 * @example
 * // Dropdown mode
 * <TimePicker mode="dropdown" value="14:30" onChange={(value) => console.log(value)} step={30} />
 */
export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLDivElement>>;

export {};