@nimbus-ds/components 5.31.0 → 5.32.1

package/dist/SplitButton/index.d.ts

@@ -0,0 +1,1013 @@
+// Generated by dts-bundle-generator v7.2.0
+
+import React from 'react';
+import { ButtonHTMLAttributes, 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})`; /**
+		 * The min height property specifies the height of a box's content area.
+		 */
+		"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"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})`; /**
+		 * The min height property specifies the height of a box's content area.
+		 */
+		"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"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})`;
+		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+	};
+	margin: {
+		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		auto: string;
+		none: string;
+	};
+	position: Position[];
+	overflow: Overflow[];
+	overflowX: Overflow[];
+	overflowY: Overflow[];
+	boxShadow: {
+		"0": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		focusRing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		aiFocus: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+	};
+	transitionDuration: {
+		base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		slower: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+	};
+	transitionTimingFunction: TransitionTiming[];
+	textDecoration: TextDecoration[];
+	zIndex: {
+		"100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+	};
+	textAlign: TextAlign[];
+	fontWeight: {
+		regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+	};
+	fontSize: {
+		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
+		 * This defines the ability for a flex item to shrink if necessary.
+		 */
+		h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+	};
+	lineHeight: {
+		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+	}; /**
+	 * The paddingBottom property sets the height of the padding area on the bottom of an 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 type BoxBackgroundProperties = keyof typeof propertiesBox.background;
+export interface BoxConditions<T> extends Conditions<T> {
+	focus?: T;
+	focusWithin?: T;
+	active?: T;
+	hover?: T;
+	disabled?: T;
+}
+export interface BoxSprinkle {
+	/**
+	 * The width property specifies the width of a box's content area.
+	 */
+	width?: string | BoxConditions<string>;
+	/**
+	 * The height property specifies the height of a box's content area.
+	 */
+	height?: string | BoxConditions<string>;
+	/**
+	 * The max width property specifies the width of a box's content area.
+	 */
+	maxWidth?: string | BoxConditions<string>;
+	/**
+	 * The max height property specifies the height of a box's content area.
+	 */
+	maxHeight?: string | BoxConditions<string>;
+	/**
+	 * The min width property specifies the width of a box's content area.
+	 */
+	minWidth?: string | BoxConditions<string>;
+	/**
+	 * The min height property specifies the height of a box's content area.
+	 */
+	minHeight?: string | BoxConditions<string>;
+	/**
+	 * The bottom property participates in setting the vertical position of a positioned box.
+	 */
+	bottom?: string | BoxConditions<string>;
+	/**
+	 * The left property participates in specifying the horizontal position of a positioned box.
+	 */
+	left?: string | BoxConditions<string>;
+	/**
+	 * The right property participates in specifying the horizontal position of a positioned box.
+	 */
+	right?: string | BoxConditions<string>;
+	/**
+	 * The top property participates in setting the vertical position of a positioned box.
+	 */
+	top?: string | BoxConditions<string>;
+	/**
+	 * This is the shorthand for flexGrow, flexShrink and flexBasis combined.
+	 */
+	flex?: string | BoxConditions<string>;
+	/**
+	 * This defines the ability for a flex item to shrink if necessary.
+	 */
+	flexShrink?: string | BoxConditions<string>;
+	/**
+	 * This defines the ability for a flex item to grow if necessary.
+	 */
+	flexGrow?: string | BoxConditions<string>;
+	/**
+	 * The flexWrap property sets whether flex items are forced onto one line or can wrap onto multiple lines.
+	 */
+	flexWrap?: FlexWrap | BoxConditions<FlexWrap>;
+	/**
+	 * The order property controls the order in which they appear in a flex container.
+	 */
+	order?: string | BoxConditions<string>;
+	/**
+	 * The gridTemplateColumns property defines the line names and track sizing functions of the grid columns.
+	 */
+	gridTemplateColumns?: string | BoxConditions<string>;
+	/**
+	 * The gridTemplateAreas property specifies named grid areas, establishing the cells in the grid and assigning them names.
+	 */
+	gridTemplateAreas?: string | BoxConditions<string>;
+	/**
+	 * The gridTemplateRows property defines the line names and track sizing functions of the grid rows.
+	 */
+	gridTemplateRows?: string | BoxConditions<string>;
+	/**
+	 * The gridArea shorthand property specifies a grid item's size and location within a grid by contributing a line,
+	 * a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
+	 */
+	gridArea?: string | BoxConditions<string>;
+	/**
+	 * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
+	 * such as grid or flex.
+	 */
+	display?: Display | BoxConditions<Display>;
+	/**
+	 * The justifyContent property defines how the browser distributes space between and around content items along
+	 * the main-axis of a flex container, and the inline axis of a grid container.
+	 */
+	justifyContent?: JustifyContent | BoxConditions<JustifyContent>;
+	/**
+	 * The flexDirection property sets how flex items are placed in the flex container defining the main axis and the direction.
+	 */
+	flexDirection?: FlexDirection | BoxConditions<FlexDirection>;
+	/**
+	 * The alignItems property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis.
+	 * In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
+	 */
+	alignItems?: AlignItems | BoxConditions<AlignItems>;
+	/**
+	 * The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area.
+	 * In Flexbox, it aligns the item on the cross axis.
+	 */
+	alignSelf?: AlignSelf | BoxConditions<AlignSelf>;
+	/**
+	 * The gap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
+	 */
+	gap?: BoxGapProperties | BoxConditions<BoxGapProperties>;
+	/**
+	 * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
+	 */
+	gridGap?: BoxGridGapProperties | BoxConditions<BoxGridGapProperties>;
+	/**
+	 * The pointerEvents property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
+	 */
+	pointerEvents?: PointerEvents | BoxConditions<PointerEvents>;
+	/**
+	 * The position property sets how an box is positioned in a document.
+	 */
+	position?: Position | BoxConditions<Position>;
+	/**
+	 * The overflow shorthand property sets the desired behavior for an box's overflow.
+	 */
+	overflow?: Overflow | BoxConditions<Overflow>;
+	/**
+	 * The overflow-x property sets what shows when content overflows a block-level box's left and right edges.
+	 */
+	overflowX?: Overflow | BoxConditions<Overflow>;
+	/**
+	 * The overflow-y property sets what shows when content overflows a block-level box's top and bottom edges.
+	 */
+	overflowY?: Overflow | BoxConditions<Overflow>;
+	/**
+	 * The cursor property sets the mouse cursor, if any, to show when the mouse pointer is over an box.
+	 */
+	cursor?: Cursor | BoxConditions<Cursor>;
+	/**
+	 * The backgroundColor property sets the background color of the box.
+	 * @default neutral-background
+	 * @examples ["neutral-interactive", { xs: "neutral-surface", md: "neutral-interactive" }]
+	 */
+	backgroundColor?: BoxBackgroundColorProperties | BoxConditions<BoxBackgroundColorProperties>;
+	/**
+	 * The color property is used to set the color of the box.
+	 */
+	color?: BoxColorProperties | BoxConditions<BoxColorProperties>;
+	/**
+	 * The borderRadius property rounds the corners of an box's outer border edge.
+	 */
+	borderRadius?: BoxBorderRadiusProperties | BoxConditions<BoxBorderRadiusProperties>;
+	/**
+	 * The borderWidth property sets the width of an box's border.
+	 */
+	borderWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
+	/**
+	 * The borderTopWidth property defines the width of the border at the top of a box.
+	 */
+	borderTopWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
+	/**
+	 * The borderBottomWidth property defines the width of the border at the bottom of a box.
+	 */
+	borderBottomWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
+	/**
+	 * The borderLeftWidth property defines the width of the border at the left of a box.
+	 */
+	borderLeftWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
+	/**
+	 * The borderRightWidth property defines the width of the border at the right of a box.
+	 */
+	borderRightWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
+	/**
+	 * The borderWidthX shorthand property defines the width of the element's border on the left and right.
+	 */
+	borderWidthX?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
+	/**
+	 * The borderWidthY shorthand property defines the width of the element's border on the top and bottom.
+	 */
+	borderWidthY?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
+	/**
+	 * The borderColor property sets the color of the box's four borders.
+	 */
+	borderColor?: BoxBorderColorProperties | BoxConditions<BoxBorderColorProperties>;
+	/**
+	 * borderStyle property sets the line style for all four sides of an box's border.
+	 */
+	borderStyle?: BorderStyle | BoxConditions<BorderStyle>;
+	/**
+	 * The boxSizing property sets how the total width and height of an box is calculated.
+	 * @default border-box
+	 */
+	boxSizing?: BoxSizing | BoxConditions<BoxSizing>;
+	/**
+	 * The boxShadow property adds shadow effects around an box's frame.
+	 */
+	boxShadow?: BoxShadowProperties | BoxConditions<BoxShadowProperties>;
+	/**
+	 * The padding properties are used to generate space around an box's content area.
+	 */
+	padding?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
+	/**
+	 * The paddingTop property sets the height of the padding area on the top of an box.
+	 */
+	paddingTop?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
+	/**
+	 * The paddingBottom property sets the height of the padding area on the bottom of an box.
+	 */
+	paddingBottom?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
+	/**
+	 * The paddingLeft property sets the width of the padding area to the left of an box.
+	 */
+	paddingLeft?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
+	/**
+	 * The paddingLeft property sets the width of the padding area to the right of an box.
+	 */
+	paddingRight?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
+	/**
+	 * The margin shorthand property sets the margin area on all four sides of an box.
+	 */
+	margin?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The marginTop property sets the margin area on the top of an box.
+	 */
+	marginTop?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The marginBottom property sets the margin area on the bottom of an box.
+	 */
+	marginBottom?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The marginLeft property sets the margin area on the left side of an box.
+	 */
+	marginLeft?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The marginRight property sets the margin area on the right side of an box.
+	 */
+	marginRight?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The transitionTimingFunction property sets how intermediate values are calculated for CSS properties being affected by a transition effect.
+	 */
+	transitionTimingFunction?: TransitionTiming | BoxConditions<TransitionTiming>;
+	/**
+	 * The transitionProperty property sets the CSS properties to which a transition effect should be applied.
+	 */
+	transitionProperty?: string | BoxConditions<string>;
+	/**
+	 * The transitionDelay property specifies the duration to wait before starting a property's transition effect when its value changes.
+	 */
+	transitionDelay?: string | BoxConditions<string>;
+	/**
+	 * The transitionDuration property sets the length of time a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.
+	 */
+	transitionDuration?: BoxTransitionDurationProperties | BoxConditions<BoxTransitionDurationProperties>;
+	/**
+	 * The zIndex property specifies the stack order of the box.
+	 */
+	zIndex?: BoxZIndexProperties | BoxConditions<BoxZIndexProperties>;
+	/**
+	 * The background property sets the background of the box.
+	 */
+	background?: BoxBackgroundProperties | BoxConditions<BoxBackgroundProperties>;
+	/**
+	 * The backgroundImage property sets one or more background images on an element.
+	 */
+	backgroundImage?: string | BoxConditions<string>;
+	/**
+	 * The backgroundPosition property sets the initial position for each background image.
+	 * The position is relative to the position layer set by background-origin.
+	 */
+	backgroundPosition?: string | BoxConditions<string>;
+	/**
+	 * The backgroundBlendMode property sets how an element's background images should blend with each
+	 * other and with the element's background color.
+	 */
+	backgroundBlendMode?: string | BoxConditions<string>;
+	/**
+	 * The backgroundRepeat property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
+	 */
+	backgroundRepeat?: string | BoxConditions<string>;
+	/**
+	 * The textDecoration shorthand property sets the appearance of decorative lines on text.
+	 */
+	textDecoration?: TextDecoration | BoxConditions<TextDecoration>;
+	/**
+	 * The backgroundSize property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
+	 */
+	backgroundSize?: string | BoxConditions<string>;
+	/**
+	 * The p shorthand property sets the margin area on all four sides of an box.
+	 */
+	p?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
+	/**
+	 * The pl shorthand property sets the width of the padding area to the left of an box.
+	 */
+	pl?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
+	/**
+	 * The pl shorthand property sets the width of the padding area to the right of an box.
+	 */
+	pr?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
+	/**
+	 * The pt shorthand property sets the height of the padding area on the top of an box.
+	 */
+	pt?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
+	/**
+	 * The pb shorthand property sets the height of the padding area on the botton of an box.
+	 */
+	pb?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
+	/**
+	 * The px shorthand property defines the width of the left and right padding area of a box.
+	 */
+	px?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
+	/**
+	 * The py pt shorthand property sets the height of the padding area at the top and bottom of a box.
+	 */
+	py?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
+	/**
+	 * The paddingX shorthand property defines the width of the left and right padding area of a box.
+	 */
+	paddingX?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
+	/**
+	 * The paddingY pt shorthand property sets the height of the padding area at the top and bottom of a box.
+	 */
+	paddingY?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
+	/**
+	 * The m shorthand property sets the margin area on all four sides of an box.
+	 */
+	m?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The mr property sets the margin area on the right side of an box.
+	 */
+	mr?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The ml property sets the margin area on the left side of an box.
+	 */
+	ml?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The mt property sets the margin area on the top of an box.
+	 */
+	mt?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The marginBottom property sets the margin area on the bottom of an box.
+	 */
+	mb?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The mx property defines the margin area on the left and right side of a box.
+	 */
+	mx?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The my property defines the margin area on the top and bottom of a box
+	 */
+	my?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The marginX property defines the margin area on the left and right side of a box.
+	 */
+	marginX?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The marginY property defines the margin area on the top and bottom of a box
+	 */
+	marginY?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The fontSize property sets the size of the box.
+	 * @default base
+	 */
+	fontSize?: BoxFontSizeProperties | BoxConditions<BoxFontSizeProperties>;
+	/**
+	 * The fontWeight property sets how thick or thin characters in box should be displayed.
+	 * @default regular
+	 */
+	fontWeight?: BoxFontWeightProperties | BoxConditions<BoxFontWeightProperties>;
+	/**
+	 * The lineHeight property specifies the line height of the box.
+	 * @default base
+	 */
+	lineHeight?: BoxLineHeightProperties | BoxConditions<BoxLineHeightProperties>;
+	/**
+	 * The textAlign property specifies the horizontal alignment of box.
+	 * @default left
+	 */
+	textAlign?: TextAlign | BoxConditions<TextAlign>;
+}
+declare const 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>;
+}
+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>;
+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 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">;
+export 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">;
+export 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">;
+export 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 {};