@nimbus-ds/components 5.24.0-rc.2 → 5.24.0

package/dist/index.d.ts

@@ -0,0 +1,3970 @@
+// Generated by dts-bundle-generator v7.2.0
+
+import React from 'react';
+import { ButtonHTMLAttributes, ComponentPropsWithRef, HTMLAttributes, ImgHTMLAttributes, InputHTMLAttributes, OptgroupHTMLAttributes, OptionHTMLAttributes, PropsWithChildren, ReactElement, ReactNode, 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">> & Partial<Pick<SkeletonProps, "height">> & {
+	/**
+	 * 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";
+}
+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 JSX.IntrinsicElements;
+	} : As extends React.ComponentType<infer P> ? Merge<P, OwnProps & {
+		as: As;
+	}> : As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], OwnProps & {
+		as: As;
+	}> : never): React.ReactElement | null;
+}
+export interface Conditions<T> {
+	xs?: T;
+	md?: T;
+	lg?: T;
+	xl?: 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";
+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})`; /**
+		 * The min height property specifies the height of a box's content area.
+		 */
+		"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})`;
+		"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})`; /**
+		 * The min height property specifies the height of a box's content area.
+		 */
+		"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})`;
+		"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})`;
+		"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})`;
+		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[];
+	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})`;
+	};
+	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})`; /**
+		 * This defines the ability for a flex item to shrink if necessary.
+		 */
+		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})`;
+	};
+};
+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;
+	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>;
+}
+declare const fileUploader: {
+	sprinkle: ((props: {
+		aspectRatio?: "none" | AspectRatio | undefined;
+		flexDirection?: "row" | "column" | undefined;
+		cursor?: Cursor | undefined;
+	}) => string) & {
+		properties: Set<"aspectRatio" | "cursor" | "flexDirection">;
+	};
+	properties: {
+		aspectRatio: readonly [
+			"none",
+			...AspectRatio[]
+		];
+		flexDirection: readonly [
+			"row",
+			"column"
+		];
+		cursor: Cursor[];
+	};
+	classnames: {
+		container: string;
+		container__input: string;
+		disabled: string;
+		skeleton: 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" | "success-interactive" | "ai-generative" | "primary-textHigh" | "success-textHigh" | "warning-textHigh" | "danger-textHigh" | "neutral-textDisabled" | "neutral-textHigh" | 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-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-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: {
+		currentColor: string;
+		"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
+		 * The color property is used to set the color of the text.
+		 * @default neutral-textLow
+		 */
+		"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-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})`; /**
+		 * The textDecoration shorthand property sets the appearance of decorative lines on text.
+		 */
+		"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[];
+};
+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.
+	 * @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 amount of lines at which the text will be trimmed, showing an ellipsis when overflowed.
+	 */
+	wordBreak?: WordBreak | TextConditions<WordBreak>;
+	/**
+	 * The textDecoration shorthand property sets the appearance of decorative lines on text.
+	 */
+	textDecoration?: TextDecoration | TextConditions<TextDecoration>;
+}
+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>;
+						};
+						"success-interactive": {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+						};
+						"primary-textHigh": {
+							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>;
+						};
+						"neutral-textHigh": {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+						};
+					};
+					staticScale: {
+						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-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";
+				};
+			};
+		} & {
+			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" | "wordBreak" | "lineClamp" | "textDecoration" | "WebkitLineClamp")[];
+				};
+			};
+		}
+	]>;
+	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-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[];
+	};
+	classnames: {
+		base: string;
+		trim: 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})`;
+		"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 multiSelect: {
+	sprinkle: ((props: {
+		zIndex?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | {
+			xs?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+			md?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+			lg?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+			xl?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 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})`;
+		};
+	};
+	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})`;
+	};
+	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__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;
+		overlayScoped: string;
+		container: 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;
+				};
+			};
+		};
+		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>;
+						};
+					};
+					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})`;
+					};
+					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})`;
+		};
+		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>;
+						};
+					};
+					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})`;
+					};
+					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})`;
+		};
+		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;
+	};
+};
+export type TablePaddingProperties = keyof typeof propertiesTable.padding;
+export type TableRowBackgroundColorProperties = keyof typeof propertiesTable.backgroundColor;
+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 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" | "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;
+}
+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" | "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;
+}
+export type CheckboxProps = CheckboxProperties & InputHTMLAttributes<HTMLInputElement>;
+export declare const Checkbox: React.FC<CheckboxProps> & CheckboxComponents;
+export type ChipSkeletonProperties = 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 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">> & Partial<Pick<SkeletonProps, "height">> & 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 FileUploaderComponents {
+	Skeleton: typeof FileUploaderSkeleton;
+}
+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];
+}
+export type FileUploaderProps = FileUploaderProperties & InputHTMLAttributes<HTMLInputElement>;
+export declare const FileUploader: React.FC<FileUploaderProps> & FileUploaderComponents;
+export type IconSkeletonProperties = 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 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">> & {
+	/**
+	 * 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 & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
+export type InputSearchProperties = Pick<InputBaseProps, "appearance" | "disabled" | "aiGenerated">;
+declare const InputSearch: React.ForwardRefExoticComponent<InputSearchProperties & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
+export type InputSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "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;
+	/**
+	 * This is an attribute used to identify a DOM node for testing purposes.
+	 */
+	"data-testid"?: string;
+}
+export type InputBaseProps = InputProperties & InputHTMLAttributes<HTMLInputElement>;
+export declare const Input: React.ForwardRefExoticComponent<InputProperties & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>> & InputComponents;
+export type InputProps = ComponentPropsWithRef<typeof Input>;
+export type LabelSkeletonProperties = 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 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" | "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";
+}
+export type ListProps = ListProperties & HTMLAttributes<HTMLUListElement | HTMLOListElement>;
+export declare const List: React.FC<ListProps> & ListComponents;
+export type MultiSelectSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "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">> & 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" | "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";
+}
+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>;
+export type TagSkeletonProperties = 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 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";
+}
+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" | "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" | "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";
+	/**
+	 * Number of lines to be rendered for the user to input text
+	 * @default 2
+	 */
+	lines?: number;
+	/**
+	 * ID of the textarea
+	 * */
+	id: string;
+}
+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" | "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" | "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 interface ToastProviderProperties {
+	/**
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+}
+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" | "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" | "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";
+}
+/**
+ * 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 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;
+	/**
+	 * 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 AccordionProperties {
+	/**
+	 * The content of the accordion.
+	 * @TJS-type React.ReactNode
+	 */
+	children?: ReactNode;
+	/**
+	 * 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 type AccordionProps = AccordionProperties & HTMLAttributes<HTMLElement>;
+export declare const Accordion: React.FC<AccordionProps> & AccordionComponents;
+export type AlertSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "height" | "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 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;
+}
+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;
+	/**
+	 * Custom inline styles
+	 */
+	style?: React.CSSProperties;
+	/**
+	 * Callback fired when the item is clicked
+	 */
+	onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+export type ScrollPaneItemProps = ScrollPaneItemProperties & Omit<BoxProps, "children">;
+export type ScrollPaneArrowProperties = {
+	children: ReactNode;
+};
+export type ScrollPaneArrowVerticalEndProperties = ScrollPaneArrowProperties;
+export type ScrollPaneArrowVerticalStartProperties = ScrollPaneArrowProperties;
+export type ScrollPaneArrowHorizontalEndProperties = ScrollPaneArrowProperties;
+export type ScrollPaneArrowHorizontalStartProperties = ScrollPaneArrowProperties;
+export interface ScrollPaneComponents {
+	Item: React.FC<ScrollPaneItemProps>;
+	ArrowHorizontalStart: React.FC<ScrollPaneArrowHorizontalStartProperties>;
+	ArrowHorizontalEnd: React.FC<ScrollPaneArrowHorizontalEndProperties>;
+	ArrowVerticalStart: React.FC<ScrollPaneArrowVerticalStartProperties>;
+	ArrowVerticalEnd: React.FC<ScrollPaneArrowVerticalEndProperties>;
+}
+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;
+	/**
+	 * 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;
+};
+/**
+ * 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: React.FC<ScrollPaneProps> & ScrollPaneComponents;
+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 {
+	/**
+	 * 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";
+}
+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 TableProperties {
+	/**
+	 * The content of the table.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+}
+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;
+}
+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 {};