@nimbus-ds/components 5.43.0-rc.1 → 5.44.0-rc.1

package/dist/index.d.ts

@@ -1,4565 +0,0 @@
-// Generated by dts-bundle-generator v7.2.0
-
-import React from 'react';
-import { ButtonHTMLAttributes, ComponentPropsWithRef, DragEvent, 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;
-	xxl?: T;
-}
-export type AspectRatio = "1/1" | "16/9" | "9/16" | "4/3" | "3/4" | "2/1" | "1/2";
-export type BorderStyle = "solid" | "none" | "hidden" | "dashed" | "dotted";
-export type BoxSizing = "border-box" | "content-box";
-export type Cursor = "auto" | "pointer" | "not-allowed" | "grab" | "inherit";
-export type Display = "block" | "flex" | "inline-flex" | "grid" | "inline-grid" | "none";
-export type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
-export type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
-export type JustifyContent = "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
-export type AlignItems = "stretch" | "flex-start" | "flex-end" | "center" | "baseline";
-export type AlignSelf = "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
-export type TextAlign = "left" | "right" | "center" | "justify";
-export type TextDecoration = "none" | "underline" | "line-through";
-export type Position = "absolute" | "fixed" | "relative" | "static" | "sticky";
-export type Overflow = "visible" | "hidden" | "scroll" | "auto";
-export type PointerEvents = "auto" | "none" | "visiblePainted" | "visibleFill" | "visibleStroke" | "visible" | "painted" | "fill" | "stroke" | "all" | "inherit";
-export type TransitionTiming = "ease" | "ease-in" | "ease-out" | "ease-in-out" | "linear" | "step-start" | "step-end";
-export type WordBreak = "normal" | "break-all" | "keep-all" | "break-word";
-export type TextOverflow = "clip" | "ellipsis";
-export type WhiteSpace = "normal" | "nowrap" | "pre" | "pre-wrap" | "pre-line" | "break-spaces";
-export type ScrollbarWidth = "auto" | "none" | "thin";
-declare const propertiesBox: {
-	gap: {
-		none: string;
-		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
-		 * 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.
-		 */
-		"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})`; /**
-		 * 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.
-		 */
-		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-	};
-	display: Display[];
-	flexDirection: FlexDirection[];
-	flexWrap: FlexWrap[];
-	justifyContent: JustifyContent[];
-	alignItems: AlignItems[];
-	alignSelf: AlignSelf[];
-	pointerEvents: PointerEvents[];
-	backgroundColor: {
-		"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"ai-generative-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"ai-generative-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		transparent: string;
-	};
-	background: {
-		"ai-generative-interactive-border": string;
-		"ai-generative-interactive": string;
-		transparent: string;
-	};
-	color: {
-		currentColor: string;
-		"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"ai-generative-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"ai-generative-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		transparent: string;
-	};
-	borderColor: {
-		"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"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})`; /**
-		 * 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.
-		 */
-		"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})`; /**
-		 * 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.
-		 */
-		"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})`; /**
-		 * 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.
-		 */
-		"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})`; /**
-		 * This defines the ability for a flex item to grow if necessary.
-		 */
-		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})`; /**
-		 * 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.
-		 */
-		"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})`; /**
-		 * The flexWrap property sets whether flex items are forced onto one line or can wrap onto multiple lines.
-		 */
-		h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-	};
-	scrollbarWidth: ScrollbarWidth[];
-};
-export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
-export type BoxBorderRadiusProperties = keyof typeof propertiesBox.borderRadius;
-export type BoxBorderWidthProperties = keyof typeof propertiesBox.borderWidth;
-export type BoxBackgroundColorProperties = keyof typeof propertiesBox.backgroundColor;
-export type BoxColorProperties = keyof typeof propertiesBox.color;
-export type BoxShadowProperties = keyof typeof propertiesBox.boxShadow;
-export type BoxSpacingProperties = keyof typeof propertiesBox.spacing;
-export type BoxMarginProperties = keyof typeof propertiesBox.margin;
-export type BoxGapProperties = keyof typeof propertiesBox.gap;
-export type BoxGridGapProperties = keyof typeof propertiesBox.gridGap;
-export type BoxZIndexProperties = keyof typeof propertiesBox.zIndex;
-export type BoxTransitionDurationProperties = keyof typeof propertiesBox.transitionDuration;
-export type BoxFontSizeProperties = keyof typeof propertiesBox.fontSize;
-export type BoxFontWeightProperties = keyof typeof propertiesBox.fontWeight;
-export type BoxLineHeightProperties = keyof typeof propertiesBox.lineHeight;
-export type BoxBackgroundProperties = keyof typeof propertiesBox.background;
-export interface BoxConditions<T> extends Conditions<T> {
-	focus?: T;
-	focusVisible?: T;
-	focusWithin?: T;
-	active?: T;
-	hover?: T;
-	disabled?: T;
-}
-export interface BoxSprinkle {
-	/**
-	 * The width property specifies the width of a box's content area.
-	 */
-	width?: string | BoxConditions<string>;
-	/**
-	 * The height property specifies the height of a box's content area.
-	 */
-	height?: string | BoxConditions<string>;
-	/**
-	 * The max width property specifies the width of a box's content area.
-	 */
-	maxWidth?: string | BoxConditions<string>;
-	/**
-	 * The max height property specifies the height of a box's content area.
-	 */
-	maxHeight?: string | BoxConditions<string>;
-	/**
-	 * The min width property specifies the width of a box's content area.
-	 */
-	minWidth?: string | BoxConditions<string>;
-	/**
-	 * The min height property specifies the height of a box's content area.
-	 */
-	minHeight?: string | BoxConditions<string>;
-	/**
-	 * The bottom property participates in setting the vertical position of a positioned box.
-	 */
-	bottom?: string | BoxConditions<string>;
-	/**
-	 * The left property participates in specifying the horizontal position of a positioned box.
-	 */
-	left?: string | BoxConditions<string>;
-	/**
-	 * The right property participates in specifying the horizontal position of a positioned box.
-	 */
-	right?: string | BoxConditions<string>;
-	/**
-	 * The top property participates in setting the vertical position of a positioned box.
-	 */
-	top?: string | BoxConditions<string>;
-	/**
-	 * This is the shorthand for flexGrow, flexShrink and flexBasis combined.
-	 */
-	flex?: string | BoxConditions<string>;
-	/**
-	 * This defines the ability for a flex item to shrink if necessary.
-	 */
-	flexShrink?: string | BoxConditions<string>;
-	/**
-	 * This defines the ability for a flex item to grow if necessary.
-	 */
-	flexGrow?: string | BoxConditions<string>;
-	/**
-	 * The flexWrap property sets whether flex items are forced onto one line or can wrap onto multiple lines.
-	 */
-	flexWrap?: FlexWrap | BoxConditions<FlexWrap>;
-	/**
-	 * The order property controls the order in which they appear in a flex container.
-	 */
-	order?: string | BoxConditions<string>;
-	/**
-	 * The gridTemplateColumns property defines the line names and track sizing functions of the grid columns.
-	 */
-	gridTemplateColumns?: string | BoxConditions<string>;
-	/**
-	 * The gridTemplateAreas property specifies named grid areas, establishing the cells in the grid and assigning them names.
-	 */
-	gridTemplateAreas?: string | BoxConditions<string>;
-	/**
-	 * The gridTemplateRows property defines the line names and track sizing functions of the grid rows.
-	 */
-	gridTemplateRows?: string | BoxConditions<string>;
-	/**
-	 * The gridArea shorthand property specifies a grid item's size and location within a grid by contributing a line,
-	 * a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
-	 */
-	gridArea?: string | BoxConditions<string>;
-	/**
-	 * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
-	 * such as grid or flex.
-	 */
-	display?: Display | BoxConditions<Display>;
-	/**
-	 * The justifyContent property defines how the browser distributes space between and around content items along
-	 * the main-axis of a flex container, and the inline axis of a grid container.
-	 */
-	justifyContent?: JustifyContent | BoxConditions<JustifyContent>;
-	/**
-	 * The flexDirection property sets how flex items are placed in the flex container defining the main axis and the direction.
-	 */
-	flexDirection?: FlexDirection | BoxConditions<FlexDirection>;
-	/**
-	 * The alignItems property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis.
-	 * In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
-	 */
-	alignItems?: AlignItems | BoxConditions<AlignItems>;
-	/**
-	 * The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area.
-	 * In Flexbox, it aligns the item on the cross axis.
-	 */
-	alignSelf?: AlignSelf | BoxConditions<AlignSelf>;
-	/**
-	 * The gap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
-	 */
-	gap?: BoxGapProperties | BoxConditions<BoxGapProperties>;
-	/**
-	 * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
-	 */
-	gridGap?: BoxGridGapProperties | BoxConditions<BoxGridGapProperties>;
-	/**
-	 * The pointerEvents property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
-	 */
-	pointerEvents?: PointerEvents | BoxConditions<PointerEvents>;
-	/**
-	 * The position property sets how an box is positioned in a document.
-	 */
-	position?: Position | BoxConditions<Position>;
-	/**
-	 * The overflow shorthand property sets the desired behavior for an box's overflow.
-	 */
-	overflow?: Overflow | BoxConditions<Overflow>;
-	/**
-	 * The overflow-x property sets what shows when content overflows a block-level box's left and right edges.
-	 */
-	overflowX?: Overflow | BoxConditions<Overflow>;
-	/**
-	 * The overflow-y property sets what shows when content overflows a block-level box's top and bottom edges.
-	 */
-	overflowY?: Overflow | BoxConditions<Overflow>;
-	/**
-	 * The cursor property sets the mouse cursor, if any, to show when the mouse pointer is over an box.
-	 */
-	cursor?: Cursor | BoxConditions<Cursor>;
-	/**
-	 * The backgroundColor property sets the background color of the box.
-	 * @default neutral-background
-	 * @examples ["neutral-interactive", { xs: "neutral-surface", md: "neutral-interactive" }]
-	 */
-	backgroundColor?: BoxBackgroundColorProperties | BoxConditions<BoxBackgroundColorProperties>;
-	/**
-	 * The color property is used to set the color of the box.
-	 */
-	color?: BoxColorProperties | BoxConditions<BoxColorProperties>;
-	/**
-	 * The borderRadius property rounds the corners of an box's outer border edge.
-	 */
-	borderRadius?: BoxBorderRadiusProperties | BoxConditions<BoxBorderRadiusProperties>;
-	/**
-	 * The borderWidth property sets the width of an box's border.
-	 */
-	borderWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
-	/**
-	 * The borderTopWidth property defines the width of the border at the top of a box.
-	 */
-	borderTopWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
-	/**
-	 * The borderBottomWidth property defines the width of the border at the bottom of a box.
-	 */
-	borderBottomWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
-	/**
-	 * The borderLeftWidth property defines the width of the border at the left of a box.
-	 */
-	borderLeftWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
-	/**
-	 * The borderRightWidth property defines the width of the border at the right of a box.
-	 */
-	borderRightWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
-	/**
-	 * The borderWidthX shorthand property defines the width of the element's border on the left and right.
-	 */
-	borderWidthX?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
-	/**
-	 * The borderWidthY shorthand property defines the width of the element's border on the top and bottom.
-	 */
-	borderWidthY?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
-	/**
-	 * The borderColor property sets the color of the box's four borders.
-	 */
-	borderColor?: BoxBorderColorProperties | BoxConditions<BoxBorderColorProperties>;
-	/**
-	 * borderStyle property sets the line style for all four sides of an box's border.
-	 */
-	borderStyle?: BorderStyle | BoxConditions<BorderStyle>;
-	/**
-	 * The boxSizing property sets how the total width and height of an box is calculated.
-	 * @default border-box
-	 */
-	boxSizing?: BoxSizing | BoxConditions<BoxSizing>;
-	/**
-	 * The boxShadow property adds shadow effects around an box's frame.
-	 */
-	boxShadow?: BoxShadowProperties | BoxConditions<BoxShadowProperties>;
-	/**
-	 * The padding properties are used to generate space around an box's content area.
-	 */
-	padding?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
-	/**
-	 * The paddingTop property sets the height of the padding area on the top of an box.
-	 */
-	paddingTop?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
-	/**
-	 * The paddingBottom property sets the height of the padding area on the bottom of an box.
-	 */
-	paddingBottom?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
-	/**
-	 * The paddingLeft property sets the width of the padding area to the left of an box.
-	 */
-	paddingLeft?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
-	/**
-	 * The paddingLeft property sets the width of the padding area to the right of an box.
-	 */
-	paddingRight?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
-	/**
-	 * The margin shorthand property sets the margin area on all four sides of an box.
-	 */
-	margin?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
-	/**
-	 * The marginTop property sets the margin area on the top of an box.
-	 */
-	marginTop?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
-	/**
-	 * The marginBottom property sets the margin area on the bottom of an box.
-	 */
-	marginBottom?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
-	/**
-	 * The marginLeft property sets the margin area on the left side of an box.
-	 */
-	marginLeft?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
-	/**
-	 * The marginRight property sets the margin area on the right side of an box.
-	 */
-	marginRight?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
-	/**
-	 * The transitionTimingFunction property sets how intermediate values are calculated for CSS properties being affected by a transition effect.
-	 */
-	transitionTimingFunction?: TransitionTiming | BoxConditions<TransitionTiming>;
-	/**
-	 * The transitionProperty property sets the CSS properties to which a transition effect should be applied.
-	 */
-	transitionProperty?: string | BoxConditions<string>;
-	/**
-	 * The transitionDelay property specifies the duration to wait before starting a property's transition effect when its value changes.
-	 */
-	transitionDelay?: string | BoxConditions<string>;
-	/**
-	 * The transitionDuration property sets the length of time a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.
-	 */
-	transitionDuration?: BoxTransitionDurationProperties | BoxConditions<BoxTransitionDurationProperties>;
-	/**
-	 * The zIndex property specifies the stack order of the box.
-	 */
-	zIndex?: BoxZIndexProperties | BoxConditions<BoxZIndexProperties>;
-	/**
-	 * The background property sets the background of the box.
-	 */
-	background?: BoxBackgroundProperties | BoxConditions<BoxBackgroundProperties>;
-	/**
-	 * The backgroundImage property sets one or more background images on an element.
-	 */
-	backgroundImage?: string | BoxConditions<string>;
-	/**
-	 * The backgroundPosition property sets the initial position for each background image.
-	 * The position is relative to the position layer set by background-origin.
-	 */
-	backgroundPosition?: string | BoxConditions<string>;
-	/**
-	 * The backgroundBlendMode property sets how an element's background images should blend with each
-	 * other and with the element's background color.
-	 */
-	backgroundBlendMode?: string | BoxConditions<string>;
-	/**
-	 * The backgroundRepeat property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
-	 */
-	backgroundRepeat?: string | BoxConditions<string>;
-	/**
-	 * The textDecoration shorthand property sets the appearance of decorative lines on text.
-	 */
-	textDecoration?: TextDecoration | BoxConditions<TextDecoration>;
-	/**
-	 * The backgroundSize property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
-	 */
-	backgroundSize?: string | BoxConditions<string>;
-	/**
-	 * The p shorthand property sets the margin area on all four sides of an box.
-	 */
-	p?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
-	/**
-	 * The pl shorthand property sets the width of the padding area to the left of an box.
-	 */
-	pl?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
-	/**
-	 * The pl shorthand property sets the width of the padding area to the right of an box.
-	 */
-	pr?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
-	/**
-	 * The pt shorthand property sets the height of the padding area on the top of an box.
-	 */
-	pt?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
-	/**
-	 * The pb shorthand property sets the height of the padding area on the botton of an box.
-	 */
-	pb?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
-	/**
-	 * The px shorthand property defines the width of the left and right padding area of a box.
-	 */
-	px?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
-	/**
-	 * The py pt shorthand property sets the height of the padding area at the top and bottom of a box.
-	 */
-	py?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
-	/**
-	 * The paddingX shorthand property defines the width of the left and right padding area of a box.
-	 */
-	paddingX?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
-	/**
-	 * The paddingY pt shorthand property sets the height of the padding area at the top and bottom of a box.
-	 */
-	paddingY?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
-	/**
-	 * The m shorthand property sets the margin area on all four sides of an box.
-	 */
-	m?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
-	/**
-	 * The mr property sets the margin area on the right side of an box.
-	 */
-	mr?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
-	/**
-	 * The ml property sets the margin area on the left side of an box.
-	 */
-	ml?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
-	/**
-	 * The mt property sets the margin area on the top of an box.
-	 */
-	mt?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
-	/**
-	 * The marginBottom property sets the margin area on the bottom of an box.
-	 */
-	mb?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
-	/**
-	 * The mx property defines the margin area on the left and right side of a box.
-	 */
-	mx?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
-	/**
-	 * The my property defines the margin area on the top and bottom of a box
-	 */
-	my?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
-	/**
-	 * The marginX property defines the margin area on the left and right side of a box.
-	 */
-	marginX?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
-	/**
-	 * The marginY property defines the margin area on the top and bottom of a box
-	 */
-	marginY?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
-	/**
-	 * The fontSize property sets the size of the box.
-	 * @default base
-	 */
-	fontSize?: BoxFontSizeProperties | BoxConditions<BoxFontSizeProperties>;
-	/**
-	 * The fontWeight property sets how thick or thin characters in box should be displayed.
-	 * @default regular
-	 */
-	fontWeight?: BoxFontWeightProperties | BoxConditions<BoxFontWeightProperties>;
-	/**
-	 * The lineHeight property specifies the line height of the box.
-	 * @default base
-	 */
-	lineHeight?: BoxLineHeightProperties | BoxConditions<BoxLineHeightProperties>;
-	/**
-	 * The textAlign property specifies the horizontal alignment of box.
-	 * @default left
-	 */
-	textAlign?: TextAlign | BoxConditions<TextAlign>;
-	/**
-	 * The scrollbarWidth property specifies the width of the scrollbar.
-	 */
-	scrollbarWidth?: ScrollbarWidth | BoxConditions<ScrollbarWidth>;
-}
-declare const fileUploader: {
-	sprinkle: ((props: {
-		aspectRatio?: "none" | AspectRatio | undefined;
-		flexDirection?: "row" | "column" | undefined;
-		cursor?: Cursor | undefined;
-		backgroundColor?: "transparent" | "primary-surface" | "neutral-background" | undefined;
-		borderColor?: "transparent" | "primary-interactive" | "ai-generativeInteractiveHover" | undefined;
-	}) => string) & {
-		properties: Set<"aspectRatio" | "backgroundColor" | "cursor" | "flexDirection" | "borderColor">;
-	};
-	properties: {
-		aspectRatio: readonly [
-			"none",
-			...AspectRatio[]
-		];
-		flexDirection: readonly [
-			"row",
-			"column"
-		];
-		cursor: Cursor[];
-		backgroundColor: {
-			"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			transparent: string;
-		};
-		borderColor: {
-			"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"ai-generativeInteractiveHover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			transparent: string;
-		};
-		borderRadius: {
-			"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			half: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		};
-	};
-	classnames: {
-		container: string;
-		container__input: string;
-		disabled: string;
-		dragging: string;
-		skeleton: string;
-		asOverlay: string;
-		overlay: string;
-		overlay__content: string;
-		overlay__content__text: string;
-		overlay__image: string;
-	};
-};
-declare const icon: {
-	sprinkle: ((props: {
-		color?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "warning-interactive" | "warning-surface" | "warning-textLow" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "neutral-textHigh" | "success-interactive" | "ai-generative" | "primary-textHigh" | "success-textHigh" | "warning-textHigh" | "danger-textHigh" | "neutral-textDisabled" | "ai-gradientPurpleHigh" | undefined;
-		cursor?: Cursor | undefined;
-	}) => string) & {
-		properties: Set<"color" | "cursor">;
-	};
-	properties: {
-		color: {
-			currentColor: string;
-			"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"success-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"warning-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"danger-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"ai-gradientPurpleHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"ai-generative": string;
-		};
-		cursor: Cursor[];
-	};
-	classnames: {
-		base: string;
-	};
-};
-declare const propertiesIconButton: {
-	backgroundColor: {
-		transparent: string;
-		"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"ai-generativeSurface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-	};
-	borderColor: {
-		"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-interactiveHover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-interactivePressed": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		transparent: string;
-		"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"ai-generativeSurface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-	};
-};
-export type IconButtonBackgroundColorProperties = keyof typeof propertiesIconButton.backgroundColor;
-export type IconButtonBorderColorProperties = keyof typeof propertiesIconButton.borderColor;
-export interface IconButtonConditions<T> extends Conditions<T> {
-	focus?: T;
-	active?: T;
-	hover?: T;
-}
-export interface IconButtonSprinkle {
-	/**
-	 * The size of the component.
-	 * @default 2.75rem
-	 */
-	size?: string | IconButtonConditions<string>;
-	/**
-	 * The borderColor property sets the color of the icon button's four borders.
-	 * @default { xs: "neutral-interactive", active: "neutral-interactivePressed", hover: "neutral-interactiveHover", focus: "primary-interactive" }
-	 */
-	borderColor?: IconButtonBorderColorProperties | IconButtonConditions<IconButtonBorderColorProperties>;
-	/**
-	 * The backgroundColor property sets the background color of the icon button.
-	 * @default {  xs: "neutral-surface", active: "neutral-interactive", hover: "neutral-surfaceHighlight" }
-	 */
-	backgroundColor?: IconButtonBackgroundColorProperties | IconButtonConditions<IconButtonBackgroundColorProperties>;
-}
-declare const propertiesText: {
-	color: {
-		"ai-generative": "transparent";
-		currentColor: string; /**
-		 * The amount of lines at which the text will be trimmed, showing an ellipsis when overflowed.
-		 */
-		"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[];
-	textOverflow: TextOverflow[];
-	whiteSpace: WhiteSpace[];
-	overflow: Overflow[];
-};
-export type TextColorProperties = keyof typeof propertiesText.color;
-export type TextFontSizeProperties = keyof typeof propertiesText.fontSize;
-export type TextFontWeightProperties = keyof typeof propertiesText.fontWeight;
-export type TextLineHeightProperties = keyof typeof propertiesText.lineHeight;
-export type TextConditions<T> = Conditions<T>;
-export interface TextSprinkle {
-	/**
-	 * The fontSize property sets the size of the text.
-	 * @default base
-	 */
-	fontSize?: TextFontSizeProperties | TextConditions<TextFontSizeProperties>;
-	/**
-	 * The fontWeight property sets how thick or thin characters in text should be displayed.
-	 * @default regular
-	 */
-	fontWeight?: TextFontWeightProperties | TextConditions<TextFontWeightProperties>;
-	/**
-	 * The lineHeight property specifies the line height of the text.
-	 * @default base
-	 */
-	lineHeight?: TextLineHeightProperties | TextConditions<TextLineHeightProperties>;
-	/**
-	 * The textAlign property specifies the horizontal alignment of text.
-	 * @default left
-	 */
-	textAlign?: TextAlign | TextConditions<TextAlign>;
-	/**
-	 * The color property is used to set the color of the text.
-	 * Note: Gradients like 'ai-generative' changes other properties like 'width' and 'display', which could make the component behave differently. Ensure to visually test the component when dynamically changing the color.
-	 * @default neutral-textLow
-	 */
-	color?: TextColorProperties | TextConditions<TextColorProperties>;
-	/**
-	 * The amount of lines at which the text will be trimmed, showing an ellipsis when overflowed.
-	 */
-	lineClamp?: number | TextConditions<number>;
-	/**
-	 * The amount of lines at which the text will be trimmed, showing an ellipsis when overflowed.
-	 */
-	WebkitLineClamp?: number | TextConditions<number>;
-	/**
-	 * The wordBreak property sets whether line breaks appear wherever the text would otherwise overflow its content box.
-	 */
-	wordBreak?: WordBreak | TextConditions<WordBreak>;
-	/**
-	 * The textDecoration shorthand property sets the appearance of decorative lines on text.
-	 */
-	textDecoration?: TextDecoration | TextConditions<TextDecoration>;
-	/**
-	 * The textOverflow property specifies how overflowed content that is not displayed should be signaled to the user (e.g., 'ellipsis' for '...', 'clip' for hard cutoff).
-	 * Note: This property only works when overflow is set to 'hidden'.
-	 */
-	textOverflow?: TextOverflow | TextConditions<TextOverflow>;
-	/**
-	 * The whiteSpace property sets how white space inside an element is handled.
-	 */
-	whiteSpace?: WhiteSpace | TextConditions<WhiteSpace>;
-	/**
-	 * The overflow property specifies what happens if content overflows an element's box.
-	 */
-	overflow?: Overflow | TextConditions<Overflow>;
-}
-declare const text: {
-	sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
-		{
-			config: {
-				color: {
-					values: {
-						currentColor: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"primary-interactive": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"primary-surface": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"primary-textLow": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"success-textLow": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"success-surface": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"warning-interactive": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"warning-surface": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"warning-textLow": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"danger-interactive": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"danger-surface": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"danger-textLow": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"neutral-background": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"neutral-interactive": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"neutral-surface": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"neutral-textLow": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"neutral-textHigh": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"success-interactive": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"ai-generative": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"primary-textHigh": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"success-textHigh": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"warning-textHigh": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"danger-textHigh": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"neutral-textDisabled": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-					};
-					staticScale: {
-						"ai-generative": "transparent";
-						currentColor: string;
-						"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						"primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						"success-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						"warning-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						"danger-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						"neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-					};
-					name: "color";
-				};
-				textAlign: {
-					values: {
-						center: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						left: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						right: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						justify: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-					};
-					staticScale: TextAlign[];
-					name: "textAlign";
-				};
-				lineHeight: {
-					values: {
-						caption: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						base: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						highlight: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-					};
-					staticScale: {
-						readonly caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						readonly base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						readonly highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-					};
-					name: "lineHeight";
-				};
-				fontWeight: {
-					values: {
-						regular: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						medium: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						bold: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-					};
-					staticScale: {
-						regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-					};
-					name: "fontWeight";
-				};
-				fontSize: {
-					values: {
-						caption: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						base: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						highlight: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-					};
-					staticScale: {
-						caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-						highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-					};
-					name: "fontSize";
-				};
-				wordBreak: {
-					values: {
-						normal: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"break-word": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"break-all": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"keep-all": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-					};
-					staticScale: WordBreak[];
-					name: "wordBreak";
-				};
-				textDecoration: {
-					values: {
-						none: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"line-through": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						underline: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-					};
-					staticScale: TextDecoration[];
-					name: "textDecoration";
-				};
-				textOverflow: {
-					values: {
-						clip: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						ellipsis: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-					};
-					staticScale: TextOverflow[];
-					name: "textOverflow";
-				};
-				whiteSpace: {
-					values: {
-						pre: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						normal: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						nowrap: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"break-spaces": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"pre-line": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						"pre-wrap": {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-					};
-					staticScale: WhiteSpace[];
-					name: "whiteSpace";
-				};
-				overflow: {
-					values: {
-						hidden: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						auto: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						visible: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-						scroll: {
-							default: string;
-							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-						};
-					};
-					staticScale: Overflow[];
-					name: "overflow";
-				};
-			};
-		} & {
-			config: {
-				lineClamp: {
-					dynamic: {
-						default: string;
-						conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-					};
-					dynamicScale: true;
-					name: "lineClamp";
-					vars: {
-						default: string;
-						conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-					};
-				};
-				WebkitLineClamp: {
-					dynamic: {
-						default: string;
-						conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-					};
-					dynamicScale: boolean;
-					name: "WebkitLineClamp";
-					vars: {
-						default: string;
-						conditions: Record<"xs" | "md" | "lg" | "xl", string>;
-					};
-				};
-			};
-		} & {
-			config: {
-				[x: string]: {
-					mappings: ("fontSize" | "fontWeight" | "color" | "lineHeight" | "textAlign" | "textOverflow" | "whiteSpace" | "wordBreak" | "lineClamp" | "overflow" | "textDecoration" | "WebkitLineClamp")[];
-				};
-			};
-		}
-	]>;
-	properties: {
-		color: {
-			"ai-generative": "transparent";
-			currentColor: string;
-			"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"success-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"warning-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"danger-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		};
-		textAlign: TextAlign[];
-		lineHeight: {
-			readonly caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			readonly base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			readonly highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		};
-		fontWeight: {
-			regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		};
-		fontSize: {
-			caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		};
-		wordBreak: WordBreak[];
-		textDecoration: TextDecoration[];
-		textOverflow: TextOverflow[];
-		whiteSpace: WhiteSpace[];
-		overflow: Overflow[];
-	};
-	aiColors: {
-		readonly "ai-generative": "transparent";
-	};
-	aiStyles: {
-		readonly "ai-generative": string;
-	};
-	classnames: {
-		base: string;
-		trim: string;
-		aiGenerative: string;
-		aiStyles: {
-			readonly "ai-generative": string;
-		};
-	};
-};
-declare const propertiesTitle: {
-	color: {
-		"primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"success-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"warning-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"danger-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-	};
-	textAlign: TextAlign[];
-	fontSize: {
-		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-	};
-	fontWeight: {
-		regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-	};
-	lineHeight: {
-		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-	};
-};
-export type TitleColorProperties = keyof typeof propertiesTitle.color;
-export type TitleFontSizeProperties = keyof typeof propertiesTitle.fontSize;
-export type TitleFontWeightProperties = keyof typeof propertiesTitle.fontWeight;
-export type TitleLineHeightProperties = keyof typeof propertiesTitle.lineHeight;
-export type TitleConditions<T> = Conditions<T>;
-export interface TitleSprinkle {
-	/**
-	 * The fontSize property sets the size of the title.
-	 * @default base
-	 */
-	fontSize?: TitleFontSizeProperties | TitleConditions<TitleFontSizeProperties>;
-	/**
-	 * The fontWeight property sets how thick or thin characters in title should be displayed.
-	 * @default regular
-	 */
-	fontWeight?: TitleFontWeightProperties | TitleConditions<TitleFontWeightProperties>;
-	/**
-	 * The lineHeight property specifies the line height of the title.
-	 * @default base
-	 */
-	lineHeight?: TitleLineHeightProperties | TitleConditions<TitleLineHeightProperties>;
-	/**
-	 * The textAlign property specifies the horizontal alignment of title.
-	 * @default left
-	 */
-	textAlign?: TextAlign | TitleConditions<TextAlign>;
-	/**
-	 * The color property is used to set the color of the title.
-	 * @default neutral-textLow
-	 */
-	color?: TitleColorProperties | TitleConditions<TitleColorProperties>;
-}
-declare const list: {
-	classnames: {
-		container: string;
-		container__item: string;
-		skeleton: string;
-	};
-	sprinkle: ((props: {
-		padding?: "1" | "2" | "3" | "4" | "5" | "0-5" | "6" | "7" | "8" | undefined;
-	}) => string) & {
-		properties: Set<"padding">;
-	};
-	properties: {
-		padding: {
-			"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		};
-	};
-};
-declare const multiSelect: {
-	sprinkle: ((props: {
-		zIndex?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | {
-			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;
-	/**
-	 * Change the size of the button.
-	 * @default medium
-	 */
-	size?: "large" | "medium" | "small";
-}
-export type ButtonBaseProps = ButtonProperties & ButtonHTMLAttributes<HTMLButtonElement>;
-export declare const Button: PolymorphicForwardRefComponent<"button" | "a", ButtonBaseProps> & ButtonComponents;
-export type ButtonProps = ComponentPropsWithRef<typeof Button>;
-export type CheckboxSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "data-testid">>;
-export type CheckboxSkeletonProps = CheckboxSkeletonProperties;
-declare const CheckboxSkeleton: React.FC<CheckboxSkeletonProps>;
-export interface CheckboxComponents {
-	Skeleton: typeof CheckboxSkeleton;
-}
-export interface CheckboxProperties {
-	/**
-	 * 	The name of the input element.
-	 */
-	name: string;
-	/**
-	 * Change the visual style of the checkbox.
-	 * @default neutral
-	 */
-	appearance?: "primary" | "danger";
-	/**
-	 * Modifies true/false value of the native checkbox.
-	 */
-	checked?: boolean;
-	/**
-	 * Modifies the native disabled state of the native checkbox.
-	 */
-	disabled?: boolean;
-	/**
-	 * If true, the component appears indeterminate. This does not set the native input element to indeterminate due to inconsistent behavior across browsers. However, we set a data-indeterminate attribute on the input.
-	 * @default false
-	 */
-	indeterminate?: boolean;
-	/**
-	 * Text to be rendered inside the component.
-	 */
-	label?: string;
-	/**
-	 * Highlights the checkbox to indicate its value was generated by AI.
-	 * Applies AI gradient border that persists regardless of checked state.
-	 * @default false
-	 */
-	aiGenerated?: boolean;
-}
-export type CheckboxProps = CheckboxProperties & InputHTMLAttributes<HTMLInputElement>;
-export declare const Checkbox: React.FC<CheckboxProps> & CheckboxComponents;
-export type ChipSkeletonProperties = Partial<Pick<SkeletonProps, "width">> & 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 FileUploaderOverlayProperties {
-	/**
-	 * Title text displayed in the overlay
-	 */
-	title?: string;
-	/**
-	 * Subtitle text displayed below the title
-	 */
-	subtitle?: string;
-	/**
-	 * Source URL for the image displayed in the overlay
-	 */
-	imageSrc?: string;
-	/**
-	 * Alt text for the image
-	 */
-	imageAlt?: string;
-	/**
-	 * Border color of the overlay
-	 * @default primary-interactive
-	 */
-	borderColor?: keyof typeof fileUploader.properties.borderColor;
-	/**
-	 * Background color of the overlay
-	 * @default primary-surface
-	 */
-	backgroundColor?: keyof typeof fileUploader.properties.backgroundColor;
-	/**
-	 * Border radius of the overlay
-	 * @default 2
-	 */
-	borderRadius?: keyof typeof fileUploader.properties.borderRadius;
-	/**
-	 * Content to render inside the overlay
-	 */
-	children?: ReactNode;
-}
-export type FileUploaderOverlayProps = FileUploaderOverlayProperties & Omit<HTMLAttributes<HTMLDivElement>, "title">;
-declare const FileUploaderOverlay: React.FC<FileUploaderOverlayProps>;
-export interface FileUploaderComponents {
-	Skeleton: typeof FileUploaderSkeleton;
-	Overlay: typeof FileUploaderOverlay;
-}
-export interface FileUploaderProperties {
-	/**
-	 * Provide additional context to the action.
-	 */
-	placeholder?: string;
-	/**
-	 * Accept file types
-	 * @default image/jpeg,image/gif,image/png
-	 */
-	accept?: string;
-	/**
-	 * Height value of the file uploader. Defaults to 100%.
-	 * @default 100%
-	 */
-	height?: string;
-	/**
-	 * Width value of the file uploader. Defaults to 100%.
-	 * @default 100%
-	 */
-	width?: string;
-	/**
-	 * Permitted aspect ratios for the size of the file uploader.
-	 * @default 1/1
-	 */
-	aspectRatio?: (typeof fileUploader.properties.aspectRatio)[number];
-	/**
-	 * Defines the position of the placeholder in relation to the icon.
-	 * @default column
-	 */
-	flexDirection?: (typeof fileUploader.properties.flexDirection)[number];
-	/**
-	 * Callback fired when files are dropped (before validation)
-	 */
-	onDrop?: (event: DragEvent<HTMLLabelElement | HTMLDivElement>) => void;
-	/**
-	 * Callback fired when all dropped files are rejected due to file type validation
-	 */
-	onDropReject?: (event: DragEvent<HTMLLabelElement | HTMLDivElement>) => void;
-	/**
-	 * Callback fired when files are successfully accepted and processed
-	 */
-	onDropSuccess?: (event: DragEvent<HTMLLabelElement | HTMLDivElement>) => void;
-	/**
-	 * Callback fired when an error occurs during file drop processing
-	 */
-	onError?: (error: Error) => void;
-	/**
-	 * Content to render inside the file uploader container
-	 */
-	children?: ReactNode;
-	/**
-	 * Custom overlay element to render when dragging files over the uploader.
-	 * When defined, this overlay will be displayed instead of children during drag operations.
-	 */
-	dragOverlay?: ReactNode;
-	/**
-	 * When true, the file uploader will not be clickable and files can only be uploaded by dragging and dropping. Useful for invisible upload areas used along FileUploader.Overlay.
-	 * @default false
-	 */
-	disableClickUpload?: boolean;
-	/**
-	 * When true, the file uploader will be rendered as an overlay. Useful for invisible upload areas used along FileUploader.Overlay.
-	 * @default false
-	 */
-	asOverlay?: boolean;
-}
-export type FileUploaderProps = FileUploaderProperties & {
-	dragOverlay?: ReactElement<FileUploaderOverlayProps>;
-} & InputHTMLAttributes<HTMLInputElement>;
-export declare const FileUploader: React.FC<FileUploaderProps> & FileUploaderComponents;
-export type IconSkeletonProperties = Partial<Pick<SkeletonProps, "width">> & 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";
-	/**
-	 * The padding of the list.
-	 * @default 6
-	 */
-	padding?: keyof typeof list.properties.padding;
-}
-export type ListProps = ListProperties & HTMLAttributes<HTMLUListElement | HTMLOListElement>;
-export declare const List: React.FC<ListProps> & ListComponents;
-export type MultiSelectSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "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" | "ai-generative";
-	/**
-	 * Shows ai-generative appearance with active ai focus shadow.
-	 * When true, this styling takes precedence over `appearance`.
-	 * @default false
-	 */
-	aiGenerated?: boolean;
-}
-export declare const Select: React.ForwardRefExoticComponent<SelectProperties & React.SelectHTMLAttributes<HTMLSelectElement> & React.InputHTMLAttributes<HTMLSelectElement> & React.RefAttributes<HTMLSelectElement>> & SelectComponents;
-export type SelectProps = ComponentPropsWithRef<typeof Select>;
-export interface SpinnerProperties {
-	/**
-	 * Sets the width and height of the spinner.
-	 * @default large
-	 */
-	size?: "small" | "medium" | "large" | number;
-	/**
-	 * Set the color for the spinner SVG fill.
-	 * @default primary-interactive
-	 */
-	color?: keyof typeof spinner.properties.color;
-}
-export type SpinnerProps = SpinnerProperties & SVGAttributes<SVGElement>;
-export declare const Spinner: React.FC<SpinnerProps>;
-/**
- * Available appearance variants for the slider fill.
- * Controls the color scheme of the active range portion of the slider.
- */
-export type SliderAppearance = "primary" | "success" | "warning" | "danger" | "neutral";
-/**
- * Common properties shared between single and range slider modes.
- */
-export interface SliderCommonProperties {
-	/**
-	 * The minimum value of the slider range.
-	 * @default 0
-	 */
-	min?: number;
-	/**
-	 * The maximum value of the slider range.
-	 * @default 100
-	 */
-	max?: number;
-	/**
-	 * The step increment between values.
-	 * @default 1
-	 */
-	step?: number;
-	/**
-	 * Visual appearance of the slider fill.
-	 * @default "primary"
-	 */
-	appearance?: SliderAppearance;
-	/**
-	 * Whether the slider is disabled.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/**
-	 * This is an attribute used to identify a DOM node for testing purposes.
-	 */
-	"data-testid"?: string;
-}
-/**
- * Properties specific to single value slider mode.
- * Used for documentation generation.
- */
-export interface SliderProperties extends SliderCommonProperties {
-	/**
-	 * The current value of the slider (single mode).
-	 */
-	value: number;
-	/**
-	 * Callback fired when the value changes.
-	 */
-	onChange?: (value: number) => void;
-	/**
-	 * Callback fired when the user finishes interacting with the slider.
-	 */
-	onChangeEnd?: (value: number) => void;
-	/**
-	 * Accessible label for the slider thumb.
-	 * @default "Value"
-	 */
-	ariaLabel?: string;
-}
-/**
- * Properties specific to range slider mode (two thumbs).
- */
-export interface SliderRangeProperties extends SliderCommonProperties {
-	/**
-	 * The current minimum value selected on the slider.
-	 */
-	minValue: number;
-	/**
-	 * The current maximum value selected on the slider.
-	 */
-	maxValue: number;
-	/**
-	 * Callback fired when the min or max value changes.
-	 */
-	onChange?: (minValue: number, maxValue: number) => void;
-	/**
-	 * Callback fired when the min value changes.
-	 */
-	onMinChange?: (value: number) => void;
-	/**
-	 * Callback fired when the max value changes.
-	 */
-	onMaxChange?: (value: number) => void;
-	/**
-	 * Callback fired when the user finishes interacting with the slider.
-	 */
-	onChangeEnd?: (minValue: number, maxValue: number) => void;
-	/**
-	 * Accessible label for the minimum value thumb.
-	 * @default "Minimum value"
-	 */
-	minAriaLabel?: string;
-	/**
-	 * Accessible label for the maximum value thumb.
-	 * @default "Maximum value"
-	 */
-	maxAriaLabel?: string;
-}
-/**
- * Props for single value slider mode.
- */
-export type SliderBaseProps = SliderProperties & Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "className" | "style">;
-/**
- * Props for range slider mode.
- */
-export type SliderRangeBaseProps = SliderRangeProperties & Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "className" | "style">;
-declare const SliderRange: React.ForwardRefExoticComponent<SliderRangeProperties & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style" | "onChange"> & React.RefAttributes<HTMLDivElement>>;
-export type SliderRangeProps = ComponentPropsWithRef<typeof SliderRange>;
-declare const SliderBase: React.ForwardRefExoticComponent<SliderProperties & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style" | "onChange"> & React.RefAttributes<HTMLDivElement>>;
-/**
- * Slider component with Range subcomponent.
- *
- * @example
- * // Single value slider
- * <Slider value={50} onChange={(value) => console.log(value)} />
- *
- * @example
- * // Range slider
- * <Slider.Range minValue={25} maxValue={75} onChange={(min, max) => console.log(min, max)} />
- */
-export declare const Slider: React.ForwardRefExoticComponent<SliderProperties & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style" | "onChange"> & React.RefAttributes<HTMLDivElement>> & {
-	Range: React.ForwardRefExoticComponent<SliderRangeProperties & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style" | "onChange"> & React.RefAttributes<HTMLDivElement>>;
-};
-export type SliderProps = ComponentPropsWithRef<typeof SliderBase>;
-export type TagSkeletonProperties = Partial<Pick<SkeletonProps, "width">> & 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" | "ai-generative";
-}
-export type TagProps = TagProperties & HTMLAttributes<HTMLDivElement>;
-export declare const Tag: React.FC<TagProps> & TagComponents;
-export type TextSkeletonProperties = {
-	fontSize?: keyof typeof text.properties.fontSize;
-} & Partial<Pick<SkeletonProps, "width" | "height" | "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" | "transparent";
-	/**
-	 * Highlights the field to indicate its value was generated by AI.
-	 * Applies AI gradient border, white background and an AI focus ring.
-	 */
-	aiGenerated?: boolean;
-	/**
-	 * Number of lines to be rendered for the user to input text
-	 * @default 2
-	 */
-	lines?: number;
-	/**
-	 * Controls intrinsic sizing behavior of the field. When true, the textarea will grow with content up to the maxLines limit (if provided) and then scroll.
-	 * @default false
-	 */
-	autoGrow?: boolean;
-	/**
-	 * Caps the textarea visual height to the given number of lines.
-	 * When used together with autoGrow=true, the textarea will grow
-	 * with content up to this limit and then scroll.
-	 */
-	maxLines?: number;
-	/**
-	 * Sets the minimum height of the textarea to the given number of lines.
-	 * The textarea will never shrink below this height, even when empty.
-	 */
-	minLines?: number;
-	/**
-	 * ID of the textarea
-	 * */
-	id: string;
-	/**
-	 * Enable/disable textarea resize functionality
-	 * @default true
-	 */
-	resize?: boolean;
-}
-export declare const Textarea: React.ForwardRefExoticComponent<TextareaProperties & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.InputHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>> & TextareaComponents;
-export type TextareaProps = ComponentPropsWithRef<typeof Textarea>;
-export type ThumbnailSkeletonProperties = Partial<Pick<ThumbnailProps, "aspectRatio">> & Partial<Pick<SkeletonProps, "width" | "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 DividerProperties {
-	/**
-	 * Defines the orientation of the divider.
-	 * @default horizontal
-	 */
-	orientation?: "horizontal" | "vertical";
-	/**
-	 * Visual appearance color.
-	 * @default neutral
-	 */
-	appearance?: "neutral";
-	/**
-	 * Thickness level based on shape.border.width tokens.
-	 * @default 1
-	 */
-	thickness?: 1 | 2 | 3;
-}
-export type DividerProps = DividerProperties & HTMLAttributes<HTMLHRElement>;
-export declare const Divider: React.FC<DividerProps>;
-export interface AccordionBodyProperties {
-	/**
-	 * The content of the accordion body.
-	 * @TJS-type React.ReactNode
-	 */
-	children: ReactNode;
-	/**
-	 * The borderBottom property defines a lower border of the accordion body.
-	 * @default none
-	 */
-	borderBottom?: keyof typeof accordion.properties.borderBottom;
-	/**
-	 * The borderTop property defines a top border of the accordion body.
-	 * @default none
-	 */
-	borderTop?: keyof typeof accordion.properties.borderTop;
-	/**
-	 * Padding properties are used to generate space around the content area of an Accordion.Body..
-	 * @default base
-	 */
-	padding?: keyof typeof accordion.properties.padding;
-}
-export type AccordionBodyProps = AccordionBodyProperties & HTMLAttributes<HTMLElement>;
-declare const AccordionBody: React.FC<AccordionBodyProps>;
-export interface AccordionItemProperties {
-	/**
-	 * The content of the accordion body.
-	 * @TJS-type React.ReactNode
-	 */
-	children: ReactNode;
-	/**
-	 * Unique indicator to identify accordion items
-	 */
-	index: string;
-	/**
-	 * This is an attribute used to identify a DOM node for testing purposes.
-	 */
-	testId?: string;
-}
-export type AccordionItemProps = AccordionItemProperties;
-declare const AccordionItem: React.FC<AccordionItemProps>;
-export interface AccordionHeaderProperties {
-	/**
-	 * The content of the accordion header.
-	 * @TJS-type React.ReactNode | ((data: { selected: string; index: string }) => React.ReactNode);
-	 */
-	children?: ReactNode | ((data: {
-		selected: string;
-		index: string;
-	}) => ReactNode);
-	/**
-	 * The title to display in the accordion header.
-	 */
-	title?: string;
-	/**
-	 * The subtitle to display in the accordion header.
-	 */
-	subtitle?: string;
-	/**
-	 * The SVG contents to display in the accordion header.
-	 * @TJS-type React.ReactNode
-	 */
-	icon?: ReactNode;
-	/**
-	 * Removes the arrow icon that shows if the accordion item is open or not which makes it possible to create a custom indicator.
-	 * @default false
-	 */
-	noIconToggle?: boolean;
-	/**
-	 * The borderTop property defines a lower border of the accordion header.
-	 * @default base
-	 */
-	borderTop?: keyof typeof accordion.properties.borderTop;
-	/**
-	 * The borderBottom property defines a lower border of the accordion header.
-	 */
-	borderBottom?: keyof typeof accordion.properties.borderBottom;
-}
-export type AccordionHeaderProps = AccordionHeaderProperties & Omit<HTMLAttributes<HTMLElement>, "children">;
-declare const AccordionHeader: React.FC<AccordionHeaderProps>;
-export interface AccordionComponents {
-	Body: typeof AccordionBody;
-	Item: typeof AccordionItem;
-	Header: typeof AccordionHeader;
-}
-export interface AccordionBaseProperties {
-	/**
-	 * The content of the accordion.
-	 * @TJS-type React.ReactNode
-	 */
-	children?: ReactNode;
-}
-export interface UncontrolledAccordionProperties extends AccordionBaseProperties {
-	/**
-	 * Informs which accordion item is open by default, this value must be the same as informed in the index of each item
-	 */
-	selectedDefault?: string;
-}
-export interface ControlledAccordionProperties extends AccordionBaseProperties {
-	/**
-	 * The currently selected accordion item ID.
-	 */
-	selectedItem: string;
-	/**
-	 * Callback fired when the selected accordion item changes.
-	 * @param selectedId The ID of the selected accordion item
-	 */
-	onItemSelect?: (selectedId: string) => void;
-}
-/**
- * Props for the Accordion component, supporting both controlled and uncontrolled modes
- */
-export type AccordionProps = (UncontrolledAccordionProperties | ControlledAccordionProperties) & Omit<HTMLAttributes<HTMLElement>, "onItemSelect" | "selectedItem">;
-export type AccordionProperties = AccordionBaseProperties & UncontrolledAccordionProperties & ControlledAccordionProperties;
-export declare const Accordion: React.FC<AccordionProps> & AccordionComponents;
-export type AlertSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "height" | "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<React.HTMLAttributes<HTMLDivElement>, "children">;
-export type ScrollPaneArrowProperties = {
-	children: ReactNode;
-};
-export type ScrollPaneArrowVerticalEndProperties = ScrollPaneArrowProperties;
-export type ScrollPaneArrowVerticalStartProperties = ScrollPaneArrowProperties;
-export type ScrollPaneArrowHorizontalEndProperties = ScrollPaneArrowProperties;
-export type ScrollPaneArrowHorizontalStartProperties = ScrollPaneArrowProperties;
-export 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;
-	/**
-	 * Enable grab-to-scroll functionality (click and drag to scroll)
-	 * When enabled, prevents item dragging inside the ScrollPane
-	 * @default false
-	 */
-	enableGrabScroll?: boolean;
-	/**
-	 * Custom arrow component to render at the start of the scroll area
-	 */
-	scrollPaneArrowStart?: React.ReactNode;
-	/**
-	 * Custom arrow component to render at the end of the scroll area
-	 */
-	scrollPaneArrowEnd?: React.ReactNode;
-	/**
-	 * Props to be passed to the content container
-	 */
-	contentContainerProps?: object;
-}
-export type ScrollPaneProps = ScrollPaneProperties & Omit<BoxProps, "children"> & {
-	contentContainerProps?: BoxProps;
-};
-/**
- * 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";
-	/**
-	 * Column index (0-based) to apply minWidth constraint from the Table's columnLayout.
-	 * When provided, the cell will inherit minWidth from the corresponding column definition.
-	 */
-	column?: number;
-}
-export type TableCellProps = TableCellProperties & HTMLAttributes<HTMLTableCellElement>;
-declare const TableCell: React.FC<TableCellProps>;
-export interface TableHeadProperties {
-	/**
-	 * The content of the table head.
-	 * @TJS-type React.ReactNode
-	 */
-	children: ReactNode;
-}
-export type TableHeadProps = TableHeadProperties & HTMLAttributes<HTMLTableSectionElement>;
-declare const TableHead: React.FC<TableHeadProps>;
-export interface TableRowProperties extends TableSprinkle {
-	/**
-	 * The content of the table row.
-	 * @TJS-type React.ReactNode
-	 */
-	children: ReactNode;
-	/**
-	 * The ID of the table row.
-	 */
-	id?: string;
-	/**
-	 * Function to be passed when clicking on the table row.
-	 * @TJS-type () => void;
-	 */
-	onClick?: () => void;
-}
-export type TableRowProps = TableRowProperties & HTMLAttributes<HTMLTableRowElement>;
-declare const TableRow: React.FC<TableRowProps>;
-export interface TableComponents {
-	Body: typeof TableBody;
-	Cell: typeof TableCell;
-	Head: typeof TableHead;
-	Row: typeof TableRow;
-}
-export interface TableColumnLayout {
-	/**
-	 * Unique identifier for the column.
-	 */
-	id: string;
-	/**
-	 * Fixed width applied to the column. Accepts any valid CSS width value.
-	 */
-	width?: string;
-	/**
-	 * Growth factor that distributes remaining space among columns without a fixed width.
-	 * Must be a positive number greater than 0.
-	 */
-	grow?: number;
-	/**
-	 * Minimum width constraint for the column. The column will not shrink below this value.
-	 * Only applies when using `grow`. Accepts any valid CSS width value.
-	 */
-	minWidth?: string;
-}
-export interface TableProperties {
-	/**
-	 * The content of the table.
-	 * @TJS-type React.ReactNode
-	 */
-	children: ReactNode;
-	/**
-	 * Column sizing definitions applied from left to right. Use `width` for fixed columns and `grow` to distribute the remaining space proportionally.
-	 */
-	columnLayout?: TableColumnLayout[];
-}
-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 interface SplitButtonActionProperties {
-	/**
-	 * The content of the action item.
-	 * @TJS-type React.ReactNode
-	 */
-	children: ReactNode;
-	/**
-	 * Optional icon to display before the action text.
-	 * @TJS-type React.ReactNode
-	 */
-	icon?: ReactNode;
-	/**
-	 * Callback function when the action is clicked.
-	 * @TJS-type () => void;
-	 */
-	onClick?: () => void;
-	/**
-	 * Disables the action item.
-	 * @default false
-	 */
-	disabled?: boolean;
-}
-export type SplitButtonActionProps = SplitButtonActionProperties & Pick<BoxProps, "backgroundColor" | "borderWidth" | "display" | "alignItems" | "gap" | "p" | "borderRadius">;
-declare const SplitButtonAction: React.FC<SplitButtonActionProps>;
-export interface SplitButtonPrimaryProperties {
-	/**
-	 * The content of the primary button.
-	 * @TJS-type React.ReactNode
-	 */
-	children: ReactNode;
-	/**
-	 * Callback function when the primary button is clicked.
-	 * @TJS-type () => void;
-	 */
-	onClick?: () => void;
-}
-export type SplitButtonPrimaryProps = SplitButtonPrimaryProperties & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "children">;
-declare const SplitButtonPrimary: React.FC<SplitButtonPrimaryProps>;
-export interface SplitButtonSecondaryProperties {
-	/**
-	 * The content of the secondary dropdown menu.
-	 * @TJS-type React.ReactNode
-	 */
-	children: ReactNode;
-	/**
-	 * Accessible label for the dropdown button.
-	 * @default "Show more actions"
-	 */
-	ariaLabel?: string;
-}
-export type SplitButtonSecondaryProps = SplitButtonSecondaryProperties & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">;
-declare const SplitButtonSecondary: React.FC<SplitButtonSecondaryProps>;
-export interface SplitButtonComponents {
-	Action: typeof SplitButtonAction;
-	Primary: typeof SplitButtonPrimary;
-	Secondary: typeof SplitButtonSecondary;
-}
-export interface SplitButtonProperties {
-	/**
-	 * The subcomponents (Primary and Secondary).
-	 * @TJS-type React.ReactNode
-	 */
-	children: ReactNode;
-	/**
-	 * Disables the entire split button.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/**
-	 * Controls the visibility of the popover.
-	 */
-	open?: boolean;
-	/**
-	 * Callback function to control popover opening and closing.
-	 * @TJS-type (open: boolean) => void;
-	 */
-	onOpenChange?: (open: boolean) => void;
-	/**
-	 * Position of the popover relative to the button.
-	 * @default bottom-end
-	 */
-	popoverPosition?: PopoverProps["position"];
-}
-export type SplitButtonProps = SplitButtonProperties & Omit<BoxProps, "children" | "display" | "gap" | "position">;
-/**
- * SplitButton component allows users to perform actions by clicking a primary button and displaying a dropdown menu with additional actions.
- */
-export declare const SplitButton: React.FC<SplitButtonProps> & SplitButtonComponents;
-
-export {};