@nimbus-ds/stepper/dist/index.d.ts

Stepper component for guiding users through multi-step processes

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

import React from 'react';
import { ComponentPropsWithRef, HTMLAttributes, ReactNode } from 'react';

export type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
export type ForwardRefExoticComponent<E, OwnProps> = React.ForwardRefExoticComponent<Merge<E extends React.ElementType ? React.ComponentPropsWithRef<E> : never, OwnProps & {
	as?: E;
}>>;
export interface PolymorphicForwardRefComponent<IntrinsicElementString, OwnProps = {}
/**
 * Extends original type to ensure built in React types play nice
 * with polymorphic components still e.g. `React.ElementRef` etc.
 */
> extends ForwardRefExoticComponent<IntrinsicElementString, OwnProps> {
	/**
	 * When `as` prop is passed, use this overload.
	 * Merges original own props (without DOM props) and the inferred props
	 * from `as` element with the own props taking precendence.
	 *
	 * We explicitly avoid `React.ElementType` and manually narrow the prop types
	 * so that events are typed when using JSX.IntrinsicElements.
	 */
	<As = IntrinsicElementString>(props: As extends "" ? {
		as: keyof JSX.IntrinsicElements;
	} : As extends React.ComponentType<infer P> ? Merge<P, OwnProps & {
		as: As;
	}> : As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], OwnProps & {
		as: As;
	}> : never): React.ReactElement | null;
}
export interface Conditions<T> {
	xs?: T;
	md?: T;
	lg?: T;
	xl?: T;
}
export type 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";
declare const propertiesBox: {
	gap: {
		none: string;
		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	gridGap: {
		none: string;
		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	display: Display[];
	flexDirection: FlexDirection[];
	flexWrap: FlexWrap[];
	justifyContent: JustifyContent[];
	alignItems: AlignItems[];
	alignSelf: AlignSelf[];
	pointerEvents: PointerEvents[];
	backgroundColor: {
		"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		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})`;
		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})`; /**
		 * 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.
		 */
		"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})`;
		/**
		 * 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.
		 */
		base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		half: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		none: string;
	};
	borderWidth: {
		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		none: string;
	};
	borderStyle: BorderStyle[];
	boxSizing: BoxSizing[];
	cursor: Cursor[];
	spacing: {
		none: string;
		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	margin: {
		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		auto: string;
		none: string;
	};
	position: Position[];
	overflow: Overflow[];
	overflowX: Overflow[];
	overflowY: Overflow[];
	boxShadow: {
		"0": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		focusRing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	transitionDuration: {
		base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		slower: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	transitionTimingFunction: TransitionTiming[];
	textDecoration: TextDecoration[];
	zIndex: {
		"100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	textAlign: TextAlign[];
	fontWeight: {
		regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	fontSize: {
		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	lineHeight: {
		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	}; /**
	 * The boxSizing property sets how the total width and height of an box is calculated.
	 * @default border-box
	 */
};
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 interface BoxConditions<T> extends Conditions<T> {
	focus?: T;
	focusWithin?: T;
	active?: T;
	hover?: T;
	disabled?: T;
}
export interface BoxSprinkle {
	/**
	 * The width property specifies the width of a box's content area.
	 */
	width?: string | BoxConditions<string>;
	/**
	 * The height property specifies the height of a box's content area.
	 */
	height?: string | BoxConditions<string>;
	/**
	 * The max width property specifies the width of a box's content area.
	 */
	maxWidth?: string | BoxConditions<string>;
	/**
	 * The max height property specifies the height of a box's content area.
	 */
	maxHeight?: string | BoxConditions<string>;
	/**
	 * The min width property specifies the width of a box's content area.
	 */
	minWidth?: string | BoxConditions<string>;
	/**
	 * The min height property specifies the height of a box's content area.
	 */
	minHeight?: string | BoxConditions<string>;
	/**
	 * The bottom property participates in setting the vertical position of a positioned box.
	 */
	bottom?: string | BoxConditions<string>;
	/**
	 * The left property participates in specifying the horizontal position of a positioned box.
	 */
	left?: string | BoxConditions<string>;
	/**
	 * The right property participates in specifying the horizontal position of a positioned box.
	 */
	right?: string | BoxConditions<string>;
	/**
	 * The top property participates in setting the vertical position of a positioned box.
	 */
	top?: string | BoxConditions<string>;
	/**
	 * This is the shorthand for flexGrow, flexShrink and flexBasis combined.
	 */
	flex?: string | BoxConditions<string>;
	/**
	 * This defines the ability for a flex item to shrink if necessary.
	 */
	flexShrink?: string | BoxConditions<string>;
	/**
	 * This defines the ability for a flex item to grow if necessary.
	 */
	flexGrow?: string | BoxConditions<string>;
	/**
	 * The flexWrap property sets whether flex items are forced onto one line or can wrap onto multiple lines.
	 */
	flexWrap?: FlexWrap | BoxConditions<FlexWrap>;
	/**
	 * The order property controls the order in which they appear in a flex container.
	 */
	order?: string | BoxConditions<string>;
	/**
	 * The gridTemplateColumns property defines the line names and track sizing functions of the grid columns.
	 */
	gridTemplateColumns?: string | BoxConditions<string>;
	/**
	 * The gridTemplateAreas property specifies named grid areas, establishing the cells in the grid and assigning them names.
	 */
	gridTemplateAreas?: string | BoxConditions<string>;
	/**
	 * The gridTemplateRows property defines the line names and track sizing functions of the grid rows.
	 */
	gridTemplateRows?: string | BoxConditions<string>;
	/**
	 * The gridArea shorthand property specifies a grid item's size and location within a grid by contributing a line,
	 * a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
	 */
	gridArea?: string | BoxConditions<string>;
	/**
	 * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
	 * such as grid or flex.
	 */
	display?: Display | BoxConditions<Display>;
	/**
	 * The justifyContent property defines how the browser distributes space between and around content items along
	 * the main-axis of a flex container, and the inline axis of a grid container.
	 */
	justifyContent?: JustifyContent | BoxConditions<JustifyContent>;
	/**
	 * The flexDirection property sets how flex items are placed in the flex container defining the main axis and the direction.
	 */
	flexDirection?: FlexDirection | BoxConditions<FlexDirection>;
	/**
	 * The alignItems property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis.
	 * In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
	 */
	alignItems?: AlignItems | BoxConditions<AlignItems>;
	/**
	 * The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area.
	 * In Flexbox, it aligns the item on the cross axis.
	 */
	alignSelf?: AlignSelf | BoxConditions<AlignSelf>;
	/**
	 * The gap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
	 */
	gap?: BoxGapProperties | BoxConditions<BoxGapProperties>;
	/**
	 * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
	 */
	gridGap?: BoxGridGapProperties | BoxConditions<BoxGridGapProperties>;
	/**
	 * The pointerEvents property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
	 */
	pointerEvents?: PointerEvents | BoxConditions<PointerEvents>;
	/**
	 * The position property sets how an box is positioned in a document.
	 */
	position?: Position | BoxConditions<Position>;
	/**
	 * The overflow shorthand property sets the desired behavior for an box's overflow.
	 */
	overflow?: Overflow | BoxConditions<Overflow>;
	/**
	 * The overflow-x property sets what shows when content overflows a block-level box's left and right edges.
	 */
	overflowX?: Overflow | BoxConditions<Overflow>;
	/**
	 * The overflow-y property sets what shows when content overflows a block-level box's top and bottom edges.
	 */
	overflowY?: Overflow | BoxConditions<Overflow>;
	/**
	 * The cursor property sets the mouse cursor, if any, to show when the mouse pointer is over an box.
	 */
	cursor?: Cursor | BoxConditions<Cursor>;
	/**
	 * The backgroundColor property sets the background color of the box.
	 * @default neutral-background
	 * @examples ["neutral-interactive", { xs: "neutral-surface", md: "neutral-interactive" }]
	 */
	backgroundColor?: BoxBackgroundColorProperties | BoxConditions<BoxBackgroundColorProperties>;
	/**
	 * The color property is used to set the color of the box.
	 */
	color?: BoxColorProperties | BoxConditions<BoxColorProperties>;
	/**
	 * The borderRadius property rounds the corners of an box's outer border edge.
	 */
	borderRadius?: BoxBorderRadiusProperties | BoxConditions<BoxBorderRadiusProperties>;
	/**
	 * The borderWidth property sets the width of an box's border.
	 */
	borderWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
	/**
	 * The borderTopWidth property defines the width of the border at the top of a box.
	 */
	borderTopWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
	/**
	 * The borderBottomWidth property defines the width of the border at the bottom of a box.
	 */
	borderBottomWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
	/**
	 * The borderLeftWidth property defines the width of the border at the left of a box.
	 */
	borderLeftWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
	/**
	 * The borderRightWidth property defines the width of the border at the right of a box.
	 */
	borderRightWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
	/**
	 * The borderWidthX shorthand property defines the width of the element's border on the left and right.
	 */
	borderWidthX?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
	/**
	 * The borderWidthY shorthand property defines the width of the element's border on the top and bottom.
	 */
	borderWidthY?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
	/**
	 * The borderColor property sets the color of the box's four borders.
	 */
	borderColor?: BoxBorderColorProperties | BoxConditions<BoxBorderColorProperties>;
	/**
	 * borderStyle property sets the line style for all four sides of an box's border.
	 */
	borderStyle?: BorderStyle | BoxConditions<BorderStyle>;
	/**
	 * The boxSizing property sets how the total width and height of an box is calculated.
	 * @default border-box
	 */
	boxSizing?: BoxSizing | BoxConditions<BoxSizing>;
	/**
	 * The boxShadow property adds shadow effects around an box's frame.
	 */
	boxShadow?: BoxShadowProperties | BoxConditions<BoxShadowProperties>;
	/**
	 * The padding properties are used to generate space around an box's content area.
	 */
	padding?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
	/**
	 * The paddingTop property sets the height of the padding area on the top of an box.
	 */
	paddingTop?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
	/**
	 * The paddingBottom property sets the height of the padding area on the bottom of an box.
	 */
	paddingBottom?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
	/**
	 * The paddingLeft property sets the width of the padding area to the left of an box.
	 */
	paddingLeft?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
	/**
	 * The paddingLeft property sets the width of the padding area to the right of an box.
	 */
	paddingRight?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
	/**
	 * The margin shorthand property sets the margin area on all four sides of an box.
	 */
	margin?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
	/**
	 * The marginTop property sets the margin area on the top of an box.
	 */
	marginTop?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
	/**
	 * The marginBottom property sets the margin area on the bottom of an box.
	 */
	marginBottom?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
	/**
	 * The marginLeft property sets the margin area on the left side of an box.
	 */
	marginLeft?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
	/**
	 * The marginRight property sets the margin area on the right side of an box.
	 */
	marginRight?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
	/**
	 * The transitionTimingFunction property sets how intermediate values are calculated for CSS properties being affected by a transition effect.
	 */
	transitionTimingFunction?: TransitionTiming | BoxConditions<TransitionTiming>;
	/**
	 * The transitionProperty property sets the CSS properties to which a transition effect should be applied.
	 */
	transitionProperty?: string | BoxConditions<string>;
	/**
	 * The transitionDelay property specifies the duration to wait before starting a property's transition effect when its value changes.
	 */
	transitionDelay?: string | BoxConditions<string>;
	/**
	 * The transitionDuration property sets the length of time a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.
	 */
	transitionDuration?: BoxTransitionDurationProperties | BoxConditions<BoxTransitionDurationProperties>;
	/**
	 * The zIndex property specifies the stack order of the box.
	 */
	zIndex?: BoxZIndexProperties | BoxConditions<BoxZIndexProperties>;
	/**
	 * The 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>;
}
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">;
declare const Box: PolymorphicForwardRefComponent<"div", BoxBaseProps>;
export type BoxProps = ComponentPropsWithRef<typeof Box>;
/**
 * 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 {};