@nimbus-ds/components 5.29.0-rc.1 → 5.29.1-rc.1

package/dist/ScrollPane/index.d.ts

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