import * as react from 'react';
import { ReactElement, ComponentType, Ref, FC, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, ReactNode, ForwardedRef, RefObject, FunctionComponentElement, PropsWithChildren } from 'react';
import { Role, ImageRequireSource, ScrollViewProps } from 'react-native';
import { Path, LayoutEvent, DistributiveOmit, DeepWritable, DeepPartial, TargetElement, Either } from '@vibrant-ui/utils';
export { LayoutEvent } from '@vibrant-ui/utils';
import { GradientKind, LinearGradient, Theme, Rounded, ColorToken, OpacityToken, ElevationLevel, BoxShadow, NativeShadow, OnColorToken, TypographyKind, TypographyWeight, CurrentTheme, ThemeMode } from '@vibrant-ui/theme';

type ReactElementChild = ReactElement | false | null | undefined;

type ReactElementChildren = ReactElementChild | ReactElementChildren[];

type ReactTextChild = number | string | false | null | undefined;

type ReactTextChildren = ReactTextChild | ReactTextChildren[];

type Primitive = boolean | number | string;
type ResponsiveValue<Value = Primitive> = Value | Value[];

type UnResponsiveValue<Value> = Value extends (infer T)[] ? (T extends any[] ? T : never) : Value;

type WindowDimensions = {
    width: number;
    height: number;
};

type BackgroundSystemProps = {
    background?: ResponsiveValue<string>;
    backgroundColor?: ResponsiveValue<string>;
    backgroundImage?: ResponsiveValue<string>;
    backgroundSize?: ResponsiveValue<'auto' | 'contain' | 'cover'>;
    backgroundPosition?: ResponsiveValue<'bottom' | 'center' | 'left' | 'right' | 'top'>;
    backgroundRepeat?: ResponsiveValue<'no-repeat' | 'repeat-x' | 'repeat-y' | 'repeat' | 'round' | 'space'>;
    gradient?: ResponsiveValue<GradientKind>;
    linearGradient?: ResponsiveValue<Omit<LinearGradient, 'type'>>;
    backdropBlurRadius?: ResponsiveValue<number>;
};

type SystemPropThemeScale = Extract<Path<Theme>, 'borderRadius' | 'colors' | 'elevation' | 'gradient' | 'opacity' | 'typography' | 'typographyWeight'>;
type SystemPropConfig = {
    property: string;
    styleProperty?: string;
    scale?: SystemPropThemeScale;
    shouldInterpolation?: 'after' | 'before' | false;
    disabled?: boolean;
    transform?: (value: any) => Record<string, any> | undefined;
};
type SystemProp = {
    (value: any, theme: Record<SystemPropThemeScale, any>, interpolation?: (props: any) => any): Record<string, any>[];
    propName: string;
    disabled: boolean;
};

declare const createSystemProp: (config: SystemPropConfig) => SystemProp;

type BorderStyle = 'dashed' | 'none' | 'solid';
type BorderSystemProps = {
    borderWidth?: ResponsiveValue<number>;
    borderStyle?: ResponsiveValue<BorderStyle>;
    borderColor?: ResponsiveValue<string>;
    borderTopWidth?: ResponsiveValue<number>;
    borderTopStyle?: ResponsiveValue<BorderStyle>;
    borderTopColor?: ResponsiveValue<string>;
    borderRightWidth?: ResponsiveValue<number>;
    borderRightStyle?: ResponsiveValue<BorderStyle>;
    borderRightColor?: ResponsiveValue<string>;
    borderBottomWidth?: ResponsiveValue<number>;
    borderBottomStyle?: ResponsiveValue<BorderStyle>;
    borderBottomColor?: ResponsiveValue<string>;
    borderLeftWidth?: ResponsiveValue<number>;
    borderLeftStyle?: ResponsiveValue<BorderStyle>;
    borderLeftColor?: ResponsiveValue<string>;
    borderRadius?: ResponsiveValue<number | string>;
    borderTopLeftRadius?: ResponsiveValue<number | string>;
    borderTopRightRadius?: ResponsiveValue<number | string>;
    borderBottomLeftRadius?: ResponsiveValue<number | string>;
    borderBottomRightRadius?: ResponsiveValue<number | string>;
    rounded?: ResponsiveValue<Rounded>;
    roundedTopLeft?: ResponsiveValue<Rounded>;
    roundedTopRight?: ResponsiveValue<Rounded>;
    roundedBottomLeft?: ResponsiveValue<Rounded>;
    roundedBottomRight?: ResponsiveValue<Rounded>;
    borderCollapse?: ResponsiveValue<'collapse' | 'separate'>;
    outlineWidth?: ResponsiveValue<number>;
    outlineStyle?: ResponsiveValue<'none' | 'solid'>;
    outlineColor?: ResponsiveValue<string>;
    outlineOffset?: ResponsiveValue<number>;
};

type ColorSystemProps = {
    color?: ResponsiveValue<ColorToken>;
};

type DisplaySystemProps = {
    display?: ResponsiveValue<'flex' | 'inline-flex' | 'none' | 'web_block' | 'web_grid' | 'web_table-cell' | 'web_table-row-group' | 'web_table-row' | 'web_table'>;
    visibility?: ResponsiveValue<'hidden' | 'inherit' | 'visible'>;
    opacity?: ResponsiveValue<OpacityToken | number>;
    hidden?: ResponsiveValue<boolean>;
    tableLayout?: ResponsiveValue<'auto' | 'fixed'>;
    writingMode?: ResponsiveValue<'horizontal-tb' | 'vertical-lr' | 'vertical-rl'>;
};

type ElevationSystemProps = {
    elevationLevel?: ResponsiveValue<ElevationLevel>;
    boxShadow?: ResponsiveValue<BoxShadow[]>;
    nativeShadow?: ResponsiveValue<NativeShadow[]>;
};

type FlexboxSystemProps = {
    flex?: ResponsiveValue<number>;
    flexGrow?: ResponsiveValue<number>;
    flexShrink?: ResponsiveValue<number>;
    flexBasis?: ResponsiveValue<number | string>;
    flexDirection?: ResponsiveValue<'column-reverse' | 'column' | 'row-reverse' | 'row'>;
    flexWrap?: ResponsiveValue<'nowrap' | 'wrap-reverse' | 'wrap'>;
    alignContent?: ResponsiveValue<'baseline' | 'center' | 'flex-end' | 'flex-start' | 'normal' | 'space-around' | 'space-between' | 'space-evenly' | 'stretch'>;
    alignItems?: ResponsiveValue<'baseline' | 'center' | 'flex-end' | 'flex-start' | 'normal' | 'self-end' | 'self-start' | 'stretch'>;
    alignSelf?: ResponsiveValue<'auto' | 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'normal' | 'self-end' | 'self-start' | 'stretch'>;
    justifyContent?: ResponsiveValue<'center' | 'flex-end' | 'flex-start' | 'left' | 'normal' | 'right' | 'space-around' | 'space-between' | 'space-evenly' | 'stretch'>;
    justifyItems?: ResponsiveValue<'baseline' | 'center' | 'flex-end' | 'flex-start' | 'left' | 'legacy' | 'normal' | 'right' | 'self-end' | 'self-start' | 'stretch'>;
    justifySelf?: ResponsiveValue<'auto' | 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'left' | 'normal' | 'right' | 'self-end' | 'self-start' | 'stretch'>;
    order?: ResponsiveValue<number>;
    gap?: ResponsiveValue<number>;
    rowGap?: ResponsiveValue<number>;
    columnGap?: ResponsiveValue<number>;
};

type InputSystemProps = {
    placeholderColor?: ResponsiveValue<OnColorToken>;
    hideInputSpinButton?: ResponsiveValue<boolean>;
    textAlign?: ResponsiveValue<'center' | 'end' | 'justify' | 'left' | 'match-parent' | 'right' | 'start'>;
};

type HitSlopRect = {
    top?: number;
    bottom?: number;
    left?: number;
    right?: number;
};
type InteractionSystemProps = {
    cursor?: ResponsiveValue<'default' | 'pointer' | 'text'>;
    pointerEvents?: ResponsiveValue<'auto' | 'none'>;
    hitSlop?: ResponsiveValue<HitSlopRect | number>;
    tabIndex?: -1 | 0;
};

type OverflowSystemProps = {
    overflow?: ResponsiveValue<'hidden' | 'visible'>;
};

type PositionSystemProps = {
    position?: ResponsiveValue<'absolute' | 'fixed' | 'relative' | 'web_static' | 'web_sticky'>;
    top?: ResponsiveValue<number | string>;
    right?: ResponsiveValue<number | string>;
    bottom?: ResponsiveValue<number | string>;
    left?: ResponsiveValue<number | string>;
    zIndex?: ResponsiveValue<number>;
};

type PseudoClassSystemProps = {
    pseudoHover?: ResponsiveValue<any>;
    pseudoFocus?: ResponsiveValue<any>;
    pseudoActive?: ResponsiveValue<any>;
    pseudoBefore?: ResponsiveValue<any>;
    pseudoAfter?: ResponsiveValue<any>;
    pseudoPlaceholder?: ResponsiveValue<any>;
};

type SizingSystemProps = {
    width?: ResponsiveValue<number | string | 'auto' | 'fit-content' | 'max-content' | 'min-content'>;
    minWidth?: ResponsiveValue<number | string | 'auto' | 'fit-content' | 'max-content' | 'min-content'>;
    maxWidth?: ResponsiveValue<number | string | 'auto' | 'fit-content' | 'max-content' | 'min-content' | 'none'>;
    height?: ResponsiveValue<number | string | 'auto' | 'fit-content' | 'max-content' | 'min-content'>;
    minHeight?: ResponsiveValue<number | string | 'auto' | 'fit-content' | 'max-content' | 'min-content'>;
    maxHeight?: ResponsiveValue<number | string | 'auto' | 'fit-content' | 'max-content' | 'min-content' | 'none'>;
    boxSizing?: 'border-box' | 'content-box';
    aspectRatio?: ResponsiveValue<number | string>;
};

type SpacingSystemProps = {
    m?: ResponsiveValue<number | string>;
    mt?: ResponsiveValue<number | string>;
    mr?: ResponsiveValue<number | string>;
    mb?: ResponsiveValue<number | string>;
    ml?: ResponsiveValue<number | string>;
    my?: ResponsiveValue<number | string>;
    mx?: ResponsiveValue<number | string>;
    p?: ResponsiveValue<number | string>;
    pt?: ResponsiveValue<number | string>;
    pr?: ResponsiveValue<number | string>;
    pb?: ResponsiveValue<number | string>;
    pl?: ResponsiveValue<number | string>;
    py?: ResponsiveValue<number | string>;
    px?: ResponsiveValue<number | string>;
};

type SvgSystemProps = {
    fill?: ResponsiveValue<ColorToken>;
    stroke?: ResponsiveValue<ColorToken>;
};

type TextShadow = {
    color?: string;
    offsetX?: number;
    offsetY?: number;
    blurRadius?: number;
};
type TextSystemProps = {
    letterSpacing?: ResponsiveValue<number | string>;
    textAlign?: ResponsiveValue<'center' | 'end' | 'justify' | 'left' | 'match-parent' | 'right' | 'start'>;
    textTransform?: ResponsiveValue<'capitalize' | 'full-size-kana' | 'full-width' | 'lowercase' | 'none' | 'uppercase'>;
    whiteSpace?: ResponsiveValue<'break-spaces' | 'normal' | 'nowrap' | 'pre-line' | 'pre-wrap' | 'pre'>;
    wordBreak?: ResponsiveValue<'break-all' | 'break-word' | 'keep-all' | 'normal'>;
    wordWrap?: ResponsiveValue<'break-word' | 'normal'>;
    overflowWrap?: ResponsiveValue<'anywhere' | 'break-word' | 'normal'>;
    textDecorationLine?: ResponsiveValue<'line-through' | 'none' | 'underline line-through' | 'underline'>;
    lineLimit?: ResponsiveValue<number>;
    textShadow?: ResponsiveValue<TextShadow>;
};

type Transform = {
    rotate?: string;
    rotateX?: string;
    rotateY?: string;
    rotateZ?: string;
    scale?: number;
    scaleX?: number;
    scaleY?: number;
    translateX?: number;
    translateY?: number;
    skewX?: string;
    skewY?: string;
};
type TransformSystemProps = {
    transform?: ResponsiveValue<Transform>;
};

type TypographySystemProps = {
    typography?: ResponsiveValue<TypographyKind>;
    fontFamily?: ResponsiveValue<string>;
    fontSize?: ResponsiveValue<number | string>;
    fontWeight?: ResponsiveValue<TypographyWeight>;
    fontStyle?: ResponsiveValue<'italic' | 'normal' | 'oblique'>;
    lineHeight?: ResponsiveValue<number | string>;
};

type AllSystemProps = BackgroundSystemProps & BorderSystemProps & ColorSystemProps & DisplaySystemProps & ElevationSystemProps & FlexboxSystemProps & InputSystemProps & InteractionSystemProps & OverflowSystemProps & PositionSystemProps & PseudoClassSystemProps & SizingSystemProps & SpacingSystemProps & SvgSystemProps & TextSystemProps & TransformSystemProps & TypographySystemProps;

type MediaSystemProps = {
    objectFit?: ResponsiveValue<'contain' | 'cover' | 'fill' | 'none'>;
};

type GridSystemProps = {
    gridTemplateColumns?: ResponsiveValue<string>;
    gridTemplateRows?: ResponsiveValue<string>;
    gridColumn?: ResponsiveValue<string>;
    gridRow?: ResponsiveValue<string>;
};

type ScrollSystemProps = {
    scrollSnap?: ResponsiveValue<string>;
    horizontal?: ResponsiveValue<boolean>;
    hideScroll?: ResponsiveValue<boolean>;
    scrollPaddingTop?: ResponsiveValue<number | string>;
    scrollPaddingLeft?: ResponsiveValue<number | string>;
    scrollPaddingRight?: ResponsiveValue<number | string>;
    scrollPaddingBottom?: ResponsiveValue<number | string>;
};

type ScrollItemSystemProps = {
    scrollSnapStop?: ResponsiveValue<string>;
    snapAlignment?: ResponsiveValue<'center' | 'end' | 'start'>;
};

type SystemProps$4 = BackgroundSystemProps & BorderSystemProps & ColorSystemProps & DisplaySystemProps & ElevationSystemProps & FlexboxSystemProps & InputSystemProps & InteractionSystemProps & OverflowSystemProps & PositionSystemProps & PseudoClassSystemProps & SizingSystemProps & SpacingSystemProps & SvgSystemProps & TextSystemProps & TypographySystemProps & TransformSystemProps & MediaSystemProps & GridSystemProps & ScrollItemSystemProps;
type BoxElements = 'a' | 'article' | 'aside' | 'button' | 'circle' | 'clipPath' | 'defs' | 'div' | 'footer' | 'form' | 'g' | 'header' | 'img' | 'input' | 'label' | 'li' | 'linearGradient' | 'main' | 'mask' | 'nav' | 'ol' | 'path' | 'section' | 'span' | 'stop' | 'svg' | 'table' | 'tbody' | 'td' | 'th' | 'thead' | 'tr' | 'ul';
type ComponentProps<Component extends ComponentType<any> | undefined> = Component extends undefined ? undefined : Component extends ComponentType<infer ComponentProps> ? ComponentProps : undefined;
type BoxProps<BaseComponent extends ComponentType<any> | undefined = undefined, ElementName extends BoxElements | undefined = undefined> = SystemProps$4 & {
    as?: ElementName;
    base?: BaseComponent;
    id?: string;
    role?: Role;
    ariaLabel?: string;
    ariaChecked?: boolean;
    ariaLabelledBy?: string;
    ariaCurrent?: 'date' | 'location' | 'page' | 'step' | 'time' | 'true';
    ariaSelected?: boolean;
    onLayout?: (layoutEvent: LayoutEvent) => void;
} & DistributiveOmit<ComponentProps<BaseComponent> extends undefined ? (ElementName extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[ElementName] : Record<never, never>) & {
    ref?: Ref<HTMLElement>;
    children?: ReactElementChildren;
} : Omit<ComponentProps<BaseComponent>, 'onLayout'>, keyof SystemProps$4>;

declare const Box: <BaseComponent extends ComponentType<any> | undefined = undefined, ElementName extends BoxElements | undefined = undefined>(props: BoxProps<BaseComponent, ElementName>) => ReactElement;

type StrokeProps = {
    strokeWidth?: number;
    strokeOpacity?: number;
    strokeDasharray?: number;
    strokeDashoffset?: number;
    strokeLinecap?: 'round' | 'square';
};
type CircleProps = SvgSystemProps & StrokeProps & {
    cx?: number | string;
    cy?: number | string;
    r?: number | string;
};
type ClipPathProps = {
    id?: string;
    children?: ReactElementChild | ReactElementChild[];
};
type DefsProps = {
    id?: string;
    children?: ReactElementChild | ReactElementChild[];
};
type GProps = {
    clipPath?: string;
    children?: ReactElementChild | ReactElementChild[];
};
type LinearGradientProps = {
    gradientTransform?: string;
};
type MaskProps = {
    id?: string;
    children?: ReactElementChild | ReactElementChild[];
};
type PathProps = StrokeProps & {
    d?: string;
    fillRule?: 'evenodd' | 'nonzero';
    clipRule?: 'evenodd' | 'nonzero';
    children?: ReactElementChild | ReactElementChild[];
};
type StopProps = {
    offset?: number;
    stopColor?: string;
};
type SvgProps = Pick<SizingSystemProps, 'height' | 'width'> & SvgSystemProps & {
    viewBox?: string;
    children?: ReactElementChild | ReactElementChild[];
};
type SvgComponentType = FC<SvgProps> & {
    ClipPath: FC<ClipPathProps>;
    Defs: FC<DefsProps>;
    G: FC<GProps>;
    LinearGradient: FC<LinearGradientProps>;
    Mask: FC<MaskProps>;
    Path: FC<PathProps>;
    Stop: FC<StopProps>;
    Circle: FC<CircleProps>;
};

declare const Svg: SvgComponentType;

type SystemProps$3 = ColorSystemProps & DisplaySystemProps & Pick<FlexboxSystemProps, 'alignSelf' | 'flex' | 'flexBasis' | 'flexGrow' | 'flexShrink'> & PositionSystemProps & SpacingSystemProps & TextSystemProps & TypographySystemProps & SizingSystemProps;
type TextElements = 'br' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'p' | 'span';
type TextChildren = ReactElementChild | ReactTextChild | TextChildren[];
type TextProps = SystemProps$3 & {
    as?: TextElements;
    id?: string;
    children?: TextChildren;
    onCopy?: () => void;
    ref?: Ref<any>;
};

declare const Text: FC<TextProps>;

type SystemProps$2 = BackgroundSystemProps & BorderSystemProps & ColorSystemProps & DisplaySystemProps & InputSystemProps & SpacingSystemProps & SizingSystemProps & TypographySystemProps;
type TextInputType = 'email' | 'number' | 'password' | 'search' | 'text' | 'url';
type EnterKeyType = 'done' | 'go' | 'next' | 'search' | 'send';
type TextInputRef = {
    focus: () => void;
    blur: () => void;
    clear: () => void;
    isFocused: () => boolean;
};
declare const HTMLAutoCompleteOptions: {
    readonly none: "off";
    readonly email: "email";
    readonly password: "current-password";
    readonly newPassword: "new-password";
    readonly name: "name";
    readonly username: "username";
    readonly familyName: "family-name";
    readonly givenName: "given-name";
    readonly middleName: "additional-name";
    readonly namePrefix: "honorific-prefix";
    readonly nameSuffix: "honorific-suffix";
    readonly ccNumber: "cc-number";
    readonly postalCode: "postal-code";
    readonly addressCountry: "country";
    readonly addressRegion: "address-level1";
    readonly addressStreet: "address-line1";
    readonly tel: "tel";
    readonly addressCity: "address-level2";
    readonly addressExtended: "address-line2";
    readonly birthDayDay: "bday-day";
    readonly birthDayFull: "bday";
    readonly birthDayMonth: "bday-month";
    readonly birthDayYear: "bday-year";
    readonly ccCsc: "cc-csc";
    readonly ccExp: "cc-exp";
    readonly ccExpMonth: "cc-exp-month";
    readonly ccExpYear: "cc-exp-year";
    readonly otp: "one-time-code";
};
type AutoCapitalizeOption = 'characters' | 'none' | 'sentences' | 'words';
type AutoCompleteOption = keyof typeof HTMLAutoCompleteOptions;
type TextInputProps = SystemProps$2 & ({
    type: Exclude<TextInputType, 'number'>;
    min?: never;
    max?: never;
    pattern?: RegExp;
} | {
    type: Extract<TextInputType, 'number'>;
    min?: number;
    max?: number;
    pattern?: never;
}) & {
    enterKeyType?: EnterKeyType;
    defaultValue?: string;
    placeholder?: string;
    maxLength?: number;
    autoFocus?: boolean;
    tabIndex?: number;
    readOnly?: boolean;
    disabled?: boolean;
    hidden?: boolean;
    focusStyle?: SystemProps$2;
    autoCapitalize?: AutoCapitalizeOption;
    autoComplete?: AutoCompleteOption;
    cursor?: number;
    onFocus?: () => void;
    onBlur?: () => void;
    onKeyPress?: ({ key, prevent }: {
        key: string;
        prevent: () => void;
    }) => void;
    onValueChange?: ({ value, prevent, target, }: {
        value: string;
        prevent: () => void;
        target?: HTMLInputElement | null;
    }) => void;
    onSubmit?: (value: string) => void;
    /**
     * Vertically align text when `multiline` is set to true.
     * on Android only.
     */
    textAlignVertical?: 'auto' | 'bottom' | 'center' | 'top';
};

declare const TextInput: react.ForwardRefExoticComponent<TextInputProps & react.RefAttributes<TextInputRef>>;

type VariantFn<PrevProps, NextProps> = (props: PrevProps) => NextProps;
type IsNullable<Value> = Value extends undefined ? true : false;
type IsResponsiveValue<Value> = 1 | 2 extends (Value extends any[][] ? 1 : Value extends any[] ? 2 : Value extends any ? 1 : false) ? true : false;
type BooleanToKey<Prop> = false extends Prop ? 'false' : Prop | true extends Prop ? 'true' : Prop;
type PropConfig<Props, PropKey extends keyof Props> = {
    name: PropKey;
    keep?: boolean;
} & (IsNullable<Props[PropKey]> extends true ? {
    default: Props[PropKey];
} : {
    default?: Props[PropKey];
}) & (IsResponsiveValue<Props[PropKey]> extends true ? {
    responsive: true;
} : {
    responsive?: false;
});
type AnyPropConfig<Props> = {
    [PropKey in keyof Props]-?: PropConfig<Props, PropKey>;
}[keyof Props];
type IncludeResponsiveProp<PropsConfig> = PropsConfig extends [infer First, ...infer Rest] ? First extends {
    responsive: true;
} ? true : IncludeResponsiveProp<Rest> : false;
type VariantsReturnProps<PropsConfig, Variants> = Variants extends (args: any) => infer FnResult ? VariantsValue<PropsConfig, FnResult> : Variants extends infer F ? keyof F extends infer K ? F extends {
    [k in K & (number | string | symbol)]: infer O;
} ? VariantsValue<PropsConfig, O> : unknown : unknown : unknown;
type VariantsValue<PropsConfig, Value> = {
    [key in keyof Value]: Value[key] extends undefined ? Value[key] : DeepWritable<IncludeResponsiveProp<PropsConfig> extends true ? ResponsiveValue<Value[key]> : Value[key]>;
};
type VariantsFnProps<Props, PropsConfig extends readonly AnyPropConfig<Props>[]> = {
    [K in PropsConfig[number] as K extends {
        name: infer Name;
    } ? Name extends keyof Props ? Name : never : never]: K extends {
        name: infer Name;
    } ? Name extends keyof Props ? Exclude<UnResponsiveValue<Props[Name]>, K extends {
        default: any;
    } ? undefined : never> : never : never;
};
type SkipForwards<Props, PropsConfig> = PropsConfig extends [infer First, ...infer Rest] ? First extends {
    name: infer P;
} ? First extends {
    keep: true;
} ? SkipForwards<Props, Rest> : Omit<SkipForwards<Props, Rest>, P & (number | string | symbol)> : Props : Props;
type VariantsConfig<Props, PropsConfig extends readonly AnyPropConfig<Props>[], VariantsReturn = Record<string, any>> = PropsConfig extends readonly [infer First, ...infer Rest] ? Rest extends [any] ? (props: VariantsFnProps<Props, PropsConfig>) => VariantsReturn : First extends {
    name: keyof Props;
} ? Record<BooleanToKey<UnResponsiveValue<Props[First['name']] & (number | string | symbol)>>, VariantsReturn> | ((props: VariantsFnProps<Props, PropsConfig>) => VariantsReturn) : unknown : unknown;

declare function propVariant<Props extends Record<string, any>, const PropsConfig extends readonly AnyPropConfig<Props>[], Variants extends VariantsConfig<Props, PropsConfig>>({ props, variants, }: {
    props: readonly [...PropsConfig];
    variants: Variants;
}): VariantFn<Props, SkipForwards<Props, PropsConfig> & VariantsReturnProps<PropsConfig, Variants>>;

type WindowDimensionsContextValue = {
    width: number;
    height: number;
};

declare const WindowDimensionsProvider: FC<{
    children: ReactElementChild;
}>;
declare const useWindowDimensions: () => WindowDimensionsContextValue;

type PickRefElement<Props, DefaultElement = HTMLElement> = Props extends {
    ref?: Ref<infer Element>;
} ? Element : DefaultElement;
type ComponentWithRef<Props, DefaultElement = HTMLElement> = ForwardRefExoticComponent<PropsWithoutRef<Props> & RefAttributes<PickRefElement<Props, DefaultElement>>>;
type WithInnerRef<Props> = Props extends {
    ref?: infer RefValue;
} ? Omit<Props, 'ref'> & {
    innerRef?: RefValue;
} : Props;
type ComponentWithInnerRef<Props> = FC<WithInnerRef<Props>>;
type WithVariationFn<Props> = {
    (): (c: ComponentWithInnerRef<Props>) => ComponentWithRef<Props>;
    <V1>(v1: VariantFn<Props, V1>): (c: ComponentWithInnerRef<V1>) => ComponentWithRef<Props>;
    <V1, V2>(v1: VariantFn<Props, V1>, v2: VariantFn<V1, V2>): (c: ComponentWithInnerRef<V2>) => ComponentWithRef<Props>;
    <V1, V2, V3>(v1: VariantFn<Props, V1>, v2: VariantFn<V1, V2>, v3: VariantFn<V2, V3>): (c: ComponentWithInnerRef<V3>) => ComponentWithRef<Props>;
    <V1, V2, V3, V4>(v1: VariantFn<Props, V1>, v2: VariantFn<V1, V2>, v3: VariantFn<V2, V3>, v4: VariantFn<V3, V4>): (c: ComponentWithInnerRef<V4>) => ComponentWithRef<Props>;
    <V1, V2, V3, V4, V5>(v1: VariantFn<Props, V1>, v2: VariantFn<V1, V2>, v3: VariantFn<V2, V3>, v4: VariantFn<V3, V4>, v5: VariantFn<V4, V5>): (c: ComponentWithInnerRef<V5>) => ComponentWithRef<Props>;
    <V1, V2, V3, V4, V5, V6>(v1: VariantFn<Props, V1>, v2: VariantFn<V1, V2>, v3: VariantFn<V2, V3>, v4: VariantFn<V3, V4>, v5: VariantFn<V4, V5>, v6: VariantFn<V5, V6>): (c: ComponentWithInnerRef<V6>) => ComponentWithRef<Props>;
    <V1, V2, V3, V4, V5, V6, V7>(v1: VariantFn<Props, V1>, v2: VariantFn<V1, V2>, v3: VariantFn<V2, V3>, v4: VariantFn<V3, V4>, v5: VariantFn<V4, V5>, v6: VariantFn<V5, V6>, v7: VariantFn<V6, V7>): (c: ComponentWithInnerRef<V7>) => ComponentWithRef<Props>;
    <V1, V2, V3, V4, V5, V6, V7, V8>(v1: VariantFn<Props, V1>, v2: VariantFn<V1, V2>, v3: VariantFn<V2, V3>, v4: VariantFn<V3, V4>, v5: VariantFn<V4, V5>, v6: VariantFn<V5, V6>, v7: VariantFn<V6, V7>, v8: VariantFn<V7, V8>): (c: ComponentWithInnerRef<V8>) => ComponentWithRef<Props>;
    <V1, V2, V3, V4, V5, V6, V7, V8, V9>(v1: VariantFn<Props, V1>, v2: VariantFn<V1, V2>, v3: VariantFn<V2, V3>, v4: VariantFn<V3, V4>, v5: VariantFn<V4, V5>, v6: VariantFn<V5, V6>, v7: VariantFn<V6, V7>, v8: VariantFn<V7, V8>, v9: VariantFn<V8, V9>): (c: ComponentWithInnerRef<V9>) => ComponentWithRef<Props>;
    <V1, V2, V3, V4, V5, V6, V7, V8, V9, V10>(v1: VariantFn<Props, V1>, v2: VariantFn<V1, V2>, v3: VariantFn<V2, V3>, v4: VariantFn<V3, V4>, v5: VariantFn<V4, V5>, v6: VariantFn<V5, V6>, v7: VariantFn<V6, V7>, v8: VariantFn<V7, V8>, v9: VariantFn<V8, V9>, v10: VariantFn<V9, V10>): (c: ComponentWithInnerRef<V10>) => ComponentWithRef<Props>;
};
declare function withVariation<Props>(componentName: string): WithVariationFn<Props>;

type ThemeProviderProps = {
    theme: DeepPartial<Theme>;
    root?: boolean;
    children: ReactElementChild;
};
declare const ThemeProvider: FC<ThemeProviderProps>;
declare const useCurrentTheme: ({ root }?: {
    root: boolean;
}) => {
    theme: CurrentTheme;
};
declare const useCurrentThemeMode: ({ root }?: {
    root: boolean;
}) => {
    mode: ThemeMode;
};

type OnColorContainerProps = {
    backgroundColor: ResponsiveValue<string>;
    children: ReactElement;
};
declare const OnColorContainer: FC<OnColorContainerProps>;

type Dependencies = {
    nativeLinearGradient?: ComponentType<{
        colors: any;
        locations?: any;
        start?: any;
        end?: any;
    }>;
    nativeShadows?: ComponentType<{
        shadows: {
            startColor?: any;
            distance?: any;
            offset?: any;
        }[];
    }>;
    image?: ComponentType<{
        src: ImageRequireSource | string;
        alt?: string;
        ref?: any;
        sizes?: ResponsiveValue<number>;
        display?: ResponsiveValue<'flex' | 'none'>;
        draggable?: boolean;
        loading?: 'eager' | 'lazy';
        onError?: () => void;
        onLoad?: () => void;
    } & SizingSystemProps & MediaSystemProps & BorderSystemProps>;
    link?: ComponentType<{
        className?: string;
        href: string;
        ref?: any;
        target?: string;
        rel?: string;
        onClick?: () => void;
        onMouseEnter?: () => void;
        onMouseLeave?: () => void;
        onMouseDown?: (event?: {
            stopPropagation: () => void;
        }) => void;
        onMouseUp?: () => void;
        onFocus?: () => void;
        onBlur?: () => void;
        children?: ReactNode;
    }>;
};
type Translation = {
    datePicker: {
        ariaLabel: string;
    };
    calendar: {
        title: string;
        days: string[];
        months: string[];
    };
    table: {
        numberOfSelected: string;
    };
    tableFooter: {
        rowsPerPage: string;
        total: string;
    };
    pagination: {
        ariaLabel: string;
        prev: string;
        next: string;
    };
    tableFilterGroup: {
        add: string;
        initialize: string;
        delete: string;
        stringFilter: {
            filterLabel: {
                empty: string;
                notEmpty: string;
            };
            operators: {
                equals: string;
                notEquals: string;
                contains: string;
                notContains: string;
                empty: string;
                notEmpty: string;
            };
        };
        dateFilter: {
            filterLabel: {
                equals: string;
                notEquals: string;
                before: string;
                after: string;
                onOrBefore: string;
                onOrAfter: string;
                empty: string;
                notEmpty: string;
                between: string;
            };
            operators: {
                equals: string;
                notEquals: string;
                before: string;
                after: string;
                onOrBefore: string;
                onOrAfter: string;
                between: string;
                empty: string;
                notEmpty: string;
            };
        };
        multiSelectFilter: {
            reset: string;
            filterLabel: {
                contains: string;
                notContains: string;
            };
            operators: {
                contains: string;
                notContains: string;
            };
        };
        resourceSelectFilter: {
            filterLabel: {
                contains: {
                    overOne: string;
                    one: string;
                };
                notContains: string;
            };
        };
    };
    drawer: {
        drawerHeader: {
            ariaLabel: string;
        };
    };
};
type ConfigContextValue = {
    dependencies: Dependencies;
    translations: Translation;
};
type ConfigProviderProps = {
    children: ReactElementChild;
    dependencies?: Dependencies;
    translations?: Partial<Translation>;
};
declare const ConfigProvider: FC<ConfigProviderProps>;
declare const useConfig: () => ConfigContextValue;

type UseResponsiveValueProps = {
    useRootBreakPoints?: boolean;
    disabled?: boolean;
};

declare const useResponsiveValue: ({ useRootBreakPoints }?: UseResponsiveValueProps) => {
    getResponsiveValue: <Value>(responsiveValue: ResponsiveValue<Value>) => Value;
    breakpointIndex: number;
};

type VibrantProviderProps = Partial<ConfigProviderProps & ThemeProviderProps> & {
    children: ReactElementChild;
    portalRootZIndex?: number;
    portalTopPriorityOrder?: string[];
    portalBottomPriorityOrder?: string[];
};
declare const VibrantProvider: FC<VibrantProviderProps>;

type UnResponsiveValues<Values extends Record<string, ResponsiveValue<any>>> = {
    [key in keyof Values]: UnResponsiveValue<Values[key]>;
};
type PickType<Value, Keys extends AllKeys<Value>> = Value extends {
    [key in Keys]?: any;
} ? Value[Keys] : undefined;
type AllKeys<Value> = Value extends any ? keyof Value : never;
type MergeObjectToArrayValue<Value extends object> = {
    [key in AllKeys<Value>]: PickType<Value, key>[];
};
declare function calculateResponsiveValues<Values extends Record<string, ResponsiveValue<any>>, Result extends Record<string, any>>(values: Values, fn: (value: UnResponsiveValues<Values>) => Result): MergeObjectToArrayValue<Result>;

declare const getElementPosition: (ref: TargetElement) => Promise<{
    top: number;
    left: number;
    bottom: number;
    right: number;
    width: number;
    height: number;
}>;

declare const toResponsiveValue: <Type>(value: ResponsiveValue<Type>, length: number) => Type[];

declare const transformResponsiveValue: <Value, TransformReturn>(value: ResponsiveValue<Value>, transform: (value: Value) => TransformReturn) => ResponsiveValue<TransformReturn>;

declare const useInterpolation: () => {
    useInterpolateStyle: (style: Record<string, any>) => Record<string, any>;
};

declare function getWindowDimensions(): WindowDimensions;

type ShadowComponentType = ComponentType<{
    startColor?: any;
    distance?: any;
    offset?: any;
    viewStyle?: any;
    paintInside?: boolean;
    children?: ReactNode;
}>;
type ShadowsProps = {
    shadows: {
        startColor?: string;
        offset?: [number, number];
        distance?: number;
    }[];
    style?: any;
    children?: ReactElement;
};
declare const createShadowsComponent: (ShadowComponent: ShadowComponentType) => react.ForwardRefExoticComponent<ShadowsProps & react.RefAttributes<any>>;

type ImageComponentType = ComponentType<{
    source?: ImageRequireSource | {
        uri?: string;
    };
    resizeMode?: 'center' | 'contain' | 'cover' | 'stretch';
}>;
type ImageProps$1 = {
    ref?: any;
    src: ImageRequireSource | string;
} & MediaSystemProps;
declare const createNativeImageComponent: (ImageComponent: ImageComponentType) => react.ForwardRefExoticComponent<Omit<ImageProps$1, "ref"> & react.RefAttributes<any>>;

type SystemProps$1 = BackgroundSystemProps & BorderSystemProps & ColorSystemProps & DisplaySystemProps & FlexboxSystemProps & InteractionSystemProps & OverflowSystemProps & PositionSystemProps & SizingSystemProps & SpacingSystemProps & TransformSystemProps;
type PressableBoxProps = {
    ref?: Ref<any>;
    disabled?: boolean;
    onClick?: () => void;
    onFocusIn?: () => void;
    onFocusOut?: () => void;
    onPressIn?: () => void;
    onPressOut?: () => void;
    onHoverIn?: () => void;
    onHoverOut?: () => void;
    children?: ReactElementChild | ReactElementChild[];
    id?: string;
    role?: Role;
    ariaLabel?: string;
    ariaSelected?: boolean;
    ariaChecked?: boolean;
    ariaLabelledBy?: string;
    as?: BoxElements;
    buttonType?: 'button' | 'submit';
    tabIndex?: -1 | 0;
} & SystemProps$1;

declare const PressableBox: ComponentWithRef<PressableBoxProps, HTMLElement>;

declare const PortalBox: ComponentWithRef<Omit<BoxProps, "position"> & {
    onMount?: (() => void) | undefined;
    scrollable?: boolean | undefined;
}, HTMLElement>;

declare const isNative = false;

type KeyboardAvoidingBoxProps = {
    keyboardVerticalOffset?: number;
    children?: ReactElementChildren;
};

declare const KeyboardAvoidingBox: ComponentWithRef<KeyboardAvoidingBoxProps, HTMLElement>;

type SystemProps = BackgroundSystemProps & BorderSystemProps & ColorSystemProps & DisplaySystemProps & FlexboxSystemProps & PositionSystemProps & SizingSystemProps & SpacingSystemProps & TransformSystemProps & ScrollSystemProps & ScrollItemSystemProps;
type ScrollBoxProps = {
    ref?: Ref<any>;
    as?: BoxElements;
    children: ReactElementChildren;
    scrollEnabled?: ResponsiveValue<boolean>;
    onLayout?: (layoutEvent: LayoutEvent) => void;
} & SystemProps & Pick<ScrollViewProps, 'keyboardShouldPersistTaps'> & {
    ariaLabel?: string;
    ariaChecked?: boolean;
    ariaLabelledBy?: string;
    ariaCurrent?: 'date' | 'location' | 'page' | 'step' | 'time' | 'true';
    ariaSelected?: boolean;
};

declare const ScrollBox: react.ForwardRefExoticComponent<Omit<ScrollBoxProps, "ref"> & react.RefAttributes<any>>;

type SafeAreaProviderProps = {
    children: ReactElementChild;
};
type Edge = 'bottom' | 'left' | 'right' | 'top';
type Insets = {
    [edge in Edge]: number;
};
type MinInsets = {
    [edge in Edge]?: ResponsiveValue<number>;
};
type GenerateStyle = ({ edges, minInsets }: {
    edges?: Edge[];
    minInsets?: MinInsets;
}) => {
    [key in Edge]?: number | string;
};
type SafeAreaContextValue = {
    insets: Insets;
    generateStyle: GenerateStyle;
};

declare const SafeAreaProvider: FC<SafeAreaProviderProps>;
declare const useSafeArea: () => SafeAreaContextValue;

type CreateContainer = () => Promise<{
    index: number;
    container: Element | number | null;
} | null>;
type RemoveContainer = (index: number) => void;
type PortalRootContextValue = {
    container: Element | number | null;
    createContainer: CreateContainer;
    removeContainer: RemoveContainer;
};
type PortalRootProviderProps = {
    children: ReactElementChild;
    zIndex: number;
};
declare const PortalRootProvider: FC<PortalRootProviderProps>;
declare const usePortalRoot: () => PortalRootContextValue;

type Platform = 'android' | 'ios' | 'unknown' | 'web';

declare const platform: Platform;

type OverlayBoxProps = SizingSystemProps & Omit<PositionSystemProps, 'position'> & {
    open: boolean;
    ref?: ForwardedRef<any>;
    targetRef: RefObject<any>;
    children: FunctionComponentElement<{
        ref?: ForwardedRef<any>;
    }>;
    onDismiss?: () => void;
};

declare const OverlayBox: ComponentWithRef<OverlayBoxProps, HTMLElement>;

type PopoverProviderProps = {
    children: ReactElementChild;
};
declare const PopoverProvider: FC<PopoverProviderProps>;
declare const usePopover: ({ id, value }: {
    id?: string;
    value?: boolean | undefined;
}) => {
    isOpen: boolean | undefined;
    open: () => void;
    close: () => void;
};

type Position = 'bottom' | 'top';
type Offset = number | string;
type StackOptions = {
    position: Position;
    id: string;
    order: number;
    offset?: Offset;
    safeAreaInset?: boolean;
};

declare const useStackedPortal: ({ position, id, order, offset, safeAreaInset }: StackOptions) => {
    offset: Offset | undefined;
    renderedIndex: number | undefined;
    unregister: () => void;
    changeHeight: (height: number) => void;
};
declare const useStackedOffset: ({ position }: {
    position: Position;
}) => {
    offset: Offset;
};

declare const useLockBodyScroll: (active?: boolean) => void;

type ScrollDirection = 'down' | 'unset' | 'up';
type EventListenerCallback = (args: {
    scrollDirection: ScrollDirection;
    scrollPosition: number;
}) => void;
type PageScrollContextValue = {
    addEventListener: (callback: EventListenerCallback) => () => void;
    scrollDirection: ScrollDirection;
};
type PageScrollProps = {
    children: ReactElement;
};

declare const PageScroll: FC<PropsWithChildren<PageScrollProps>>;
declare const useScroll: () => PageScrollContextValue;

type ImageProps = {
    src: ResponsiveValue<ImageRequireSource | string>;
    ref?: any;
    alt?: string;
    loading?: 'eager' | 'lazy';
    sizes?: ResponsiveValue<number>;
    draggable?: boolean;
    testId?: string;
    onError?: () => void;
    onLoad?: () => void;
} & SizingSystemProps & MediaSystemProps & BorderSystemProps;

declare const Image: ComponentWithRef<ImageProps, HTMLElement>;

type TabViewItemProps = {
    title: string;
    tabId: string;
    onTabSelected?: () => void;
    renderContent: () => ReactElement;
    testId?: string;
};

declare const TabViewItem: ComponentWithRef<TabViewItemProps, HTMLElement>;

declare const TabView: ComponentWithRef<{
    tabId?: string | undefined;
    children: react.ReactElement<TabViewItemProps, string | react.JSXElementConstructor<any>> | react.ReactElement<TabViewItemProps, string | react.JSXElementConstructor<any>>[];
    renderTobBarItem: (_: {
        title: string;
        isSelected: boolean;
        onClick: () => void;
        tabId: string;
    }) => react.ReactElement<any, string | react.JSXElementConstructor<any>>;
    renderTobBarContainer: (props: ReactElementChildren) => react.ReactElement<any, string | react.JSXElementConstructor<any>>;
    onTabChange?: (() => void) | undefined;
    testId?: string | undefined;
    native_swipeEnabled?: boolean | undefined;
}, HTMLElement>;

type FlatListProps<Data> = {
    id?: string;
    testId?: string;
    data: Data[];
    renderItem: (_: {
        item: Data;
        index: number;
    }) => ReactElement | null;
    keyExtractor: (item: Data, index: number) => string;
    maxRows?: ResponsiveValue<number>;
    columnSpacing?: ResponsiveValue<number>;
    px?: ResponsiveValue<number>;
    rowSpacing?: ResponsiveValue<number>;
    onItemImpressed?: (item: Data, index: number | null) => void;
    onEndReached?: () => void;
    snap?: boolean;
    loop?: boolean;
    initialIndex?: number;
    snapAlignment?: 'center' | 'end' | 'start';
    hideScroll?: boolean;
} & Either<{
    horizontal?: false;
    columns: ResponsiveValue<number>;
    columnWidth?: never;
}, {
    horizontal: true;
    columnWidth: ResponsiveValue<number>;
    columns?: never;
}>;

declare const FlatList: <Data>(props: FlatListProps<Data>) => ReactElement;

type LinkProps = {
    testId?: string;
    ref?: any;
    href: string;
    isExternal?: boolean;
    ariaCurrent?: 'date' | 'location' | 'page' | 'step' | 'time' | 'true';
    onClick?: () => void;
    onFocusIn?: () => void;
    onFocusOut?: () => void;
    onPressIn?: () => void;
    onPressOut?: () => void;
    onHoverIn?: () => void;
    onHoverOut?: () => void;
    children?: ReactElementChild | ReactElementChild[];
} & BackgroundSystemProps & BorderSystemProps & ColorSystemProps & DisplaySystemProps & FlexboxSystemProps & InteractionSystemProps & OverflowSystemProps & PositionSystemProps & SizingSystemProps & SpacingSystemProps & TransformSystemProps;

declare const Link: ComponentWithRef<LinkProps, HTMLElement>;

export { type AllSystemProps, type AutoCapitalizeOption, type AutoCompleteOption, type BackgroundSystemProps, type BorderSystemProps, Box, type BoxElements, type BoxProps, type ColorSystemProps, type ComponentWithRef, ConfigProvider, type Dependencies, type DisplaySystemProps, type Edge, type ElevationSystemProps, type EventListenerCallback, FlatList, type FlexboxSystemProps, type HitSlopRect, Image, type ImageProps, type Insets, type InteractionSystemProps, KeyboardAvoidingBox, Link, type LinkProps, type MediaSystemProps, type MinInsets, OnColorContainer, type OverflowSystemProps, OverlayBox, PageScroll, type Platform, PopoverProvider, PortalBox, PortalRootProvider, type PositionSystemProps, PressableBox, type PressableBoxProps, type PseudoClassSystemProps, type ReactElementChild, type ReactElementChildren, type ReactTextChild, type ReactTextChildren, type ResponsiveValue, SafeAreaProvider, ScrollBox, type ScrollDirection, type ScrollItemSystemProps, type ScrollSystemProps, type SizingSystemProps, type SpacingSystemProps, Svg, type SvgProps, type SvgSystemProps, type SystemPropThemeScale, TabView, TabViewItem, Text, type TextChildren, type TextElements, TextInput, type TextInputProps, type TextInputRef, type TextInputType, type TextProps, type TextSystemProps, ThemeProvider, type TransformSystemProps, type Translation, type TypographySystemProps, type UnResponsiveValue, VibrantProvider, type WindowDimensions, WindowDimensionsProvider, calculateResponsiveValues, createNativeImageComponent, createShadowsComponent, createSystemProp, getElementPosition, getWindowDimensions, isNative, platform, propVariant, toResponsiveValue, transformResponsiveValue, useConfig, useCurrentTheme, useCurrentThemeMode, useInterpolation, useLockBodyScroll, usePopover, usePortalRoot, useResponsiveValue, useSafeArea, useScroll, useStackedOffset, useStackedPortal, useWindowDimensions, withVariation };