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

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

declare const multiSelect: {
	sprinkle: ((props: {
		zIndex?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "1000" | "1100" | {
			xs?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "1000" | "1100" | undefined;
			md?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "1000" | "1100" | undefined;
			lg?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "1000" | "1100" | undefined;
			xl?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "1000" | "1100" | undefined;
		} | undefined;
	}) => string) & {
		properties: Set<"zIndex">;
	};
	properties: {
		zIndex: {
			"100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"1000": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
			"1100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		};
	};
	classnames: {
		appearance: Record<"success" | "warning" | "danger" | "neutral", string>;
		container: string;
		container__icon: string;
		container__button: string;
	};
};
export interface SkeletonProperties {
	/**
	 * Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
	 */
	width: string;
	/**
	 * Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.
	 */
	height: string;
	/**
	 * The border radius of the skeleton.
	 */
	borderRadius?: string;
	/**
	 * This is an attribute used to identify a DOM node for testing purposes.
	 */
	"data-testid"?: string;
}
export type SkeletonProps = SkeletonProperties & HTMLAttributes<HTMLDivElement>;
export type MultiSelectSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "className" | "data-testid">>;
export type MultiSelectSkeletonProps = MultiSelectSkeletonProperties & HTMLAttributes<HTMLDivElement>;
export declare const MultiSelectSkeleton: React.FC<MultiSelectSkeletonProps>;
export interface MultiSelectComponents {
	Skeleton: typeof MultiSelectSkeleton;
}
export interface MultiSelectOption {
	/**
	 * Label for the option.
	 */
	label: string;
	/**
	 * Value of the option
	 */
	value: string;
}
export interface MultiSelectProperties {
	/**
	 * The name of the wrapper element or the select element when native.
	 */
	name: string;
	/**
	 * The id of the wrapper element or the select element when native.
	 */
	id: string;
	/**
	 * Change the visual style of the select.
	 * @default neutral
	 */
	appearance?: "success" | "warning" | "danger" | "neutral";
	/**
	 * Options of the MultiSelect
	 */
	options: MultiSelectOption[];
	/**
	 * Options of the MultiSelect
	 */
	onChange?: (values: MultiSelectOption[]) => void;
	/**
	 * Deafult of the MultiSelect
	 */
	value?: MultiSelectOption[];
	/**
	 * ZIndex of the MultiSelect
	 */
	zIndex?: keyof typeof multiSelect.properties.zIndex;
}
export type MultiSelectBaseProps = MultiSelectProperties & Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "value">;
export declare const MultiSelect: React.FC<MultiSelectBaseProps> & MultiSelectComponents;
export type MultiSelectProps = ComponentPropsWithRef<typeof MultiSelect>;

export {};