import { ColorInput } from 'tinycolor2';

type BorderRadius = Readonly<{
    /** none: 0(px/rem/pt) */
    none: 0;
    /** 2xsmall: 2(px/rem/pt) */
    '2xsmall': 2;
    /** xsmall: 4(px/rem/pt) */
    xsmall: 4;
    /** small: 8(px/rem/pt) */
    small: 8;
    /** medium: 12(px/rem/pt) */
    medium: 12;
    /** large: 16(px/rem/pt) */
    large: 16;
    /** xlarge: 20(px/rem/pt) */
    xlarge: 20;
    /** 2xlarge: 24(px/rem/pt) */
    '2xlarge': 24;
    /** max: 9999(px/rem/pt). This will round the left and right side of the box element */
    max: 9999;
    /** round: 50%(pt). This will turn the box element into a circle */
    round: '50%';
}>;
type BorderWidth = Readonly<{
    /** none: 0(px/rem/pt) */
    none: 0;
    /** thinner: 0.5(px/rem/pt) */
    thinner: 0.5;
    /** thin: 1(px/rem/pt) */
    thin: 1;
    /** thick: 1.5(px/rem/pt) */
    thick: 1.5;
    /** thicker: 2(px/rem/pt) */
    thicker: 2;
}>;
type Border = Readonly<{
    radius: BorderRadius;
    width: BorderWidth;
}>;
declare const border: Border;

type BackdropBlur = Readonly<{
    /** low: 4px - Subtle background blur effect */
    low: 4;
    /** medium: 8px - Moderate background blur effect */
    medium: 8;
    /** high: 12px - Strong background blur effect */
    high: 12;
}>;
declare const backdropBlur: BackdropBlur;

type Breakpoints = Readonly<{
    /**
     * `base` is used for responsive styling following a **mobile first** approach. It starts from 0px till the next existing token
     *
     * Think of this as styles without any media query.
     *
     * ### Example
     *
     * This code will set margin as `spacing.2` on "m" size screens and above. And as `spacing.1` on less than "m" size screens
     * ```jsx
     * <Box margin={{ base: 'spacing.1', m: 'spacing.2' }} />
     * ```
     *
     * This roughly translates into -
     *
     * ```
     * .Box {
     *  margin: 'spacing.1';
     * }
     *
     * ＠media screen and (min-width: 768px) {
     *  .Box {
     *    margin: 'spacing.2';
     *  }
     * }
     * ```
     */
    base: number;
    /**
     * `@media screen and (min-width: 320px)`
     *
     * Small Mobiles
     */
    xs: number;
    /**
     * `@media screen and (min-width: 480px)`
     *
     * Mobiles and Small Tablets
     */
    s: number;
    /**
     * `@media screen and (min-width: 768px)`
     *
     * Medium and Large Tablets.
     *
     * Dimensions with `m` and above can be treated as desktop in mobile-first approach (with min-width).
     * Hence this breakpoint can be used for desktop styling.
     *
     * E.g. next example will keep flexDirection `row` on mobiles and `column` on large tablets, desktop, and larger screens
     *
     * ```jsx
     * <Box display="flex" flexDirection={{ base: 'row', m: 'column' }} />
     * ```
     *
     */
    m: number;
    /**
     * `@media screen and (min-width: 1024px)`
     *
     * Desktop
     */
    l: number;
    /**
     * `@media screen and (min-width: 1200px)`
     *
     * HD Desktop
     */
    xl: number;
}>;
declare const breakpoints: Breakpoints;

type ColorChromaticScale = Readonly<{
    50: string;
    100: string;
    200: string;
    300: string;
    400: string;
    500: string;
    600: string;
    700: string;
    800: string;
    900: string;
    1000: string;
    a50: string;
    a100: string;
    a150: string;
    a200: string;
    a400: string;
    a500?: string;
    a600?: string;
    a700?: string;
}>;
type ColorChromaticScaleExtended = Readonly<{
    50: string;
    100: string;
    200: string;
    300: string;
    400: string;
    500: string;
    600: string;
    700: string;
    800: string;
    900: string;
    1000: string;
    a50: string;
    a100: string;
    a150: string;
    a200: string;
    a400: string;
    a500: string;
    a600: string;
    a700: string;
}>;
type ColorNeutralGrayScale = Readonly<{
    0: string;
    50: string;
    100: string;
    200: string;
    300: string;
    400: string;
    500: string;
    600: string;
    700: string;
    800: string;
    900: string;
    1000: string;
    1100: string;
    1200: string;
    1300: string;
    a25: string;
    a50: string;
    a75: string;
    a100: string;
    a200: string;
    a400: string;
    a500?: string;
    a600?: string;
    a700?: string;
}>;
type ColorBlueGrayLightScale = Readonly<{
    0: string;
    50: string;
    100: string;
    200: string;
    300: string;
    400: string;
    500: string;
    600: string;
    700: string;
    800: string;
    900: string;
    1000: string;
    1100: string;
    1200: string;
    1300: string;
    a0: string;
    a1: string;
    a25: string;
    a48: string;
    a50: string;
    a75: string;
    a100: string;
    a200: string;
    a400: string;
    a406: string;
    a500: string;
    a600: string;
    a700: string;
    a906: string;
    a900: string;
    a909: string;
    a912: string;
    a918: string;
    a932: string;
    a964: string;
    a1072: string;
    a1106: string;
    a1264: string;
    a1288: string;
}>;
type ColorBlueGrayDarkScale = Readonly<{
    0: string;
    50: string;
    100: string;
    200: string;
    300: string;
    400: string;
    500: string;
    600: string;
    700: string;
    800: string;
    900: string;
    1000: string;
    1100: string;
    1200: string;
    1300: string;
    a0: string;
    a1: string;
    a25: string;
    a48: string;
    a50: string;
    a75: string;
    a100: string;
    a200: string;
    a300: string;
    a400: string;
    a500: string;
    a506: string;
    a509: string;
    a512: string;
    a518: string;
    a532: string;
    a564: string;
    a572: string;
    a888: string;
    a1188: string;
    a1194: string;
    a1312: string;
    a1388: string;
}>;
type ColorNeutralStaticScale = Readonly<{
    1: string;
    5: string;
    10: string;
    25: string;
    50: string;
    100: string;
    200: string;
    300: string;
    400: string;
    450: string;
    500: string;
}>;
type Color = Readonly<{
    chromatic: {
        azure: ColorChromaticScale;
        emerald: ColorChromaticScaleExtended;
        crimson: ColorChromaticScaleExtended;
        cider: ColorChromaticScaleExtended;
        sapphire: ColorChromaticScaleExtended;
        sea: ColorChromaticScale;
        cloud: ColorChromaticScale;
        forest: ColorChromaticScale;
        orchid: ColorChromaticScale;
        magenta: ColorChromaticScale;
        topaz: ColorChromaticScale;
    };
    neutral: {
        blueGrayLight: ColorBlueGrayLightScale;
        blueGrayDark: ColorBlueGrayDarkScale;
        ashGrayLight: ColorNeutralGrayScale;
        ashGrayDark: ColorNeutralGrayScale;
        white: ColorNeutralStaticScale;
        black: ColorNeutralStaticScale;
    };
}>;
declare const colors: Color;

type Opacity = Readonly<{
    /**0: 0 */
    0: number;
    /**1: 0.01 */
    1: number;
    /**50: 0.06 */
    50: number;
    /**100: 0.09 */
    100: number;
    /**200: 0.12 */
    200: number;
    /**300: 0.18 */
    300: number;
    /**400: 0.24 */
    400: number;
    /**500: 0.32 */
    500: number;
    /**600: 0.48 */
    600: number;
    /**700: 0.56 */
    700: number;
    /**800: 0.64 */
    800: number;
    /**900: 0.72 */
    900: number;
    /**1000: 0.8 */
    1000: number;
    /**1100: 0.88 */
    1100: number;
    /**1200: 0.94 */
    1200: number;
    /**1300: 1.0 */
    1300: number;
}>;
declare const opacity: Opacity;

type FontFamily = {
    /** Used for all type of textual content except code snippets, and headings */
    text: string;
    /** Used for code snippets  */
    code: string;
    /** Used for headings */
    heading: string;
};

type FontWeight = {
    regular: 400;
    medium: 500;
    semibold: 600;
    bold: 700;
};
/**
 * For font size and line-heights we can’t say from xl to 2xl the value will necessary increase.
 * it might decrease or remain same because these are alias tokens and we need aliases for cross platform.
 * so for example xl on mobile can be 32px and on desktop xl can be 34px,
 * similarly 2xl on mobile can be 34px but on desktop doesn’t necessarily mean 2xl will be more than xl(34px) it can be 32 as well since visually they make better hierarchy.
 */
type FontSize = {
    /** desktop: 10(px/rem/pt)
     *
     * mobile: 10(px/rem/pt)
     */
    25: number;
    /** desktop: 11(px/rem/pt)
     *
     * mobile: 11(px/rem/pt)
     */
    50: number;
    /** desktop: 12(px/rem/pt)
     *
     * mobile: 12(px/rem/pt)
     */
    75: number;
    /** desktop: 14(px/rem/pt)
     *
     * mobile: 14(px/rem/pt)
     */
    100: number;
    /** desktop: 16(px/rem/pt)
     *
     * mobile: 16(px/rem/pt)
     */
    200: number;
    /** desktop: 18(px/rem/pt)
     *
     * mobile: 16(px/rem/pt)
     */
    300: number;
    /** desktop: 20(px/rem/pt)
     *
     * mobile: 18(px/rem/pt)
     */
    400: number;
    /** desktop: 24(px/rem/pt)
     *
     * mobile: 20(px/rem/pt)
     */
    500: number;
    /** desktop: 32(px/rem/pt)
     *
     * mobile: 24(px/rem/pt)
     */
    600: number;
    /** desktop: 40(px/rem/pt)
     *
     * mobile: 32(px/rem/pt)
     */
    700: number;
    /** desktop: 48(px/rem/pt)
     *
     * mobile: 34(px/rem/pt)
     */
    800: number;
    /** desktop: 56(px/rem/pt)
     *
     * mobile: 36(px/rem/pt)
     */
    900: number;
    /** desktop: 64(px/rem/pt)
     *
     * mobile: 38(px/rem/pt)
     */
    1000: number;
    /** desktop: 72(px/rem/pt)
     *
     * mobile: 40(px/rem/pt)
     */
    1100: number;
};
type Typography = {
    fonts: {
        family: FontFamily;
        size: FontSize;
        weight: FontWeight;
    };
    lineHeights: {
        /** desktop: 0(px/rem/pt)
         *
         * mobile: 0(px/rem/pt)
         */
        0: number;
        /** desktop: 13(px/rem/pt)
         *
         * mobile: 13(px/rem/pt)
         */
        25: number;
        /** desktop: 16(px/rem/pt)
         *
         * mobile: 16(px/rem/pt)
         */
        50: number;
        /** desktop: 17(px/rem/pt)
         *
         * mobile: 17(px/rem/pt)
         */
        75: number;
        /** desktop: 20(px/rem/pt)
         *
         * mobile: 20(px/rem/pt)
         */
        100: number;
        /** desktop: 24(px/rem/pt)
         *
         * mobile: 24(px/rem/pt)
         */
        200: number;
        /** desktop: 24(px/rem/pt)
         *
         * mobile: 22(px/rem/pt)
         */
        300: number;
        /** desktop: 26(px/rem/pt)
         *
         * mobile: 24(px/rem/pt)
         */
        400: number;
        /** desktop: 32(px/rem/pt)
         *
         * mobile: 26(px/rem/pt)
         */
        500: number;
        /** desktop: 38(px/rem/pt)
         *
         * mobile: 32(px/rem/pt)
         */
        600: number;
        /** desktop: 46(px/rem/pt)
         *
         * mobile: 38(px/rem/pt)
         */
        700: number;
        /** desktop: 56(px/rem/pt)
         *
         * mobile: 40(px/rem/pt)
         */
        800: number;
        /** desktop: 64(px/rem/pt)
         *
         * mobile: 42(px/rem/pt)
         */
        900: number;
        /** desktop: 70(px/rem/pt)
         *
         * mobile: 46(px/rem/pt)
         */
        1000: number;
        /** desktop: 78(px/rem/pt)
         *
         * mobile: 48(px/rem/pt)
         */
        1100: number;
    };
    letterSpacings: {
        /** -3.3% */
        25: number;
        /** -1.3% */
        50: number;
        /** 0% */
        100: number;
    };
};
type TypographyPlatforms = 'onDesktop' | 'onMobile';
type TypographyWithPlatforms = Record<TypographyPlatforms, Typography>;
declare const typography: TypographyWithPlatforms;

/**
 * When any of the values are changed here, do change the jsdoc comments in BaseBox/types/spacingTypes.ts as well
 *
 * {@link ../../components/Box/BaseBox/types/spacingTypes.ts}
 */
type Spacing = Readonly<{
    /** 0: 0(px/rem/pt) */
    0: 0;
    /** 1: 2(px/rem/pt) */
    1: 2;
    /** 2: 4(px/rem/pt) */
    2: 4;
    /** 3: 8(px/rem/pt) */
    3: 8;
    /** 4: 12(px/rem/pt) */
    4: 12;
    /** 5: 16(px/rem/pt) */
    5: 16;
    /** 6: 20(px/rem/pt) */
    6: 20;
    /** 7: 24(px/rem/pt) */
    7: 24;
    /** 8: 32(px/rem/pt) */
    8: 32;
    /** 9: 40(px/rem/pt) */
    9: 40;
    /** 10: 48(px/rem/pt) */
    10: 48;
    /** 11: 56(px/rem/pt) */
    11: 56;
}>;
declare const spacing: Spacing;

/**
 *
 * When combined with union, this type utility will give you autocomplete of union while still supporting any string value as input
 *
 * ### Usage
 *
 * ```ts
 * type ThemeName = 'themeOne' | 'themeTwo' | StringWithAutocomplete;
 * ```
 *
 * This will show themeOne and themeTwo in autocomplete but also allow any other string as value.
 *
 * More details - https://github.com/razorpay/blade/pull/1031/commits/86b6ee0facf45e7556739efcbfa5396b11b1b3c9#r1121298293
 * Related TS Issue - https://github.com/microsoft/TypeScript/issues/29729
 *
 */
type StringWithAutocomplete = string & Record<never, never>;

type ColorSchemeNames = 'dark' | 'light';
type ColorSchemeNamesInput = ColorSchemeNames | 'system';
type ColorSchemeModes = 'onDark' | 'onLight';
type FeedbackColors = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';
type Emphasis = {
    subtle: string;
    moderate: string;
    intense: string;
    normal: string;
    muted: string;
    disabled: string;
};
type DataCategoricalEmphasis = Pick<Emphasis, 'subtle' | 'moderate' | 'intense'> & {
    faint: string;
    strong: string;
};
type DataSequentialEmphasis = Omit<ColorChromaticScale, 'a50' | 'a150' | 'a100' | 'a200' | 'a400' | 'a500' | 'a600' | 'a700'>;
type DataColorCategories = 'blue' | 'green' | 'red' | 'orange' | 'skyBlue' | 'purple' | 'pink' | 'gold' | 'gray';
type SubtleOrIntenseEmphasis = Pick<Emphasis, 'subtle' | 'intense'>;
type InteractiveStates = {
    default: string;
    highlighted: string;
    disabled: string;
    faded: string;
};
type InteractiveStatesWithFadedHighlighted = InteractiveStates & {
    fadedHighlighted: string;
};
type InteractiveBackgroundStatesWithGhost = InteractiveStatesWithFadedHighlighted & {
    ghost: string;
};
type InteractiveBackgroundColorsWithGhost = 'gray' | 'staticBlack' | 'staticWhite';
type InteractiveBorderColorsWithFadedHighlighted = 'staticBlack' | 'staticWhite';
type OnEmphasis = {
    onSubtle: string;
    onIntense: string;
};
type ColorCategories = {
    staticBlack: Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>;
    staticWhite: Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>;
    gray: Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>;
    onSea: Pick<OnEmphasis, 'onSubtle' | 'onIntense'>;
    onCloud: Pick<OnEmphasis, 'onSubtle' | 'onIntense'>;
    primary: Pick<Emphasis, 'normal'>;
};
type InteractiveColorKeys = FeedbackColors | Exclude<keyof ColorCategories, 'onSea' | 'onCloud'>;
/**
 * @deprecated
 * Use popup.[background|border].[color] instead
 */
type PopupDeprecatedTokens = {
    /**
     * @deprecated
     *
     * Use popup.[background|border].[color].subtle instead
     */
    subtle: string;
    /**
     * @deprecated
     * Use popup.[background|border].[color].intense instead
     */
    intense: string;
};
type Colors = {
    interactive: {
        background: Record<Exclude<InteractiveColorKeys, InteractiveBackgroundColorsWithGhost>, InteractiveStatesWithFadedHighlighted> & Record<InteractiveBackgroundColorsWithGhost, InteractiveBackgroundStatesWithGhost>;
        border: Record<Exclude<InteractiveColorKeys, InteractiveBorderColorsWithFadedHighlighted>, InteractiveStates> & Record<InteractiveBorderColorsWithFadedHighlighted, InteractiveStatesWithFadedHighlighted>;
        text: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
        icon: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
    };
    feedback: {
        background: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
        border: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
        text: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
        icon: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
    };
    surface: {
        background: {
            gray: Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>;
            primary: SubtleOrIntenseEmphasis;
            sea: SubtleOrIntenseEmphasis;
            cloud: SubtleOrIntenseEmphasis;
        };
        border: {
            gray: Pick<Emphasis, 'normal' | 'subtle' | 'muted'>;
            primary: Pick<Emphasis, 'normal' | 'muted'>;
        };
        text: ColorCategories;
        icon: ColorCategories;
    };
    overlay: {
        background: Pick<Emphasis, 'moderate' | 'subtle'>;
    };
    popup: {
        background: Record<FeedbackColors, Pick<Emphasis, 'moderate'>> & {
            gray: Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>;
        } & PopupDeprecatedTokens;
        border: Record<FeedbackColors, Pick<Emphasis, 'moderate'>> & {
            gray: Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>;
        } & PopupDeprecatedTokens;
    };
    transparent: string;
    data: {
        background: {
            categorical: Record<DataColorCategories, DataCategoricalEmphasis>;
            sequential: Record<DataColorCategories, DataSequentialEmphasis | ColorNeutralGrayScale>;
        };
    };
};
type ColorsWithModes = Record<ColorSchemeModes, Colors>;
type ThemeTokens = {
    name: 'bladeTheme' | StringWithAutocomplete;
    border: Border;
    backdropBlur: BackdropBlur;
    breakpoints: Breakpoints;
    colors: ColorsWithModes;
    motion: Motion;
    elevation: ElevationWithColorModes;
    spacing: Spacing;
    typography: TypographyWithPlatforms;
};

declare const bladeTheme: ThemeTokens;

type DeepPartial<T> = {
    [P in keyof T]?: T[P] extends Record<number | string, unknown> ? DeepPartial<T[P]> : T[P];
};

type OverrideTheme = {
    /**
     * base tokens
     */
    baseThemeTokens: ThemeTokens;
    /**
     * partial theme tokens
     */
    overrides: DeepPartial<ThemeTokens>;
};
/**
 * @deprecated Use `createTheme` from `@razorpay/blade/tokens` instead
 *
 * @description
 *
 * `overrideTheme` merges the `baseThemeTokens` and `overrides` and returns a new ThemeTokens object,
 * which you can pass into BladeProvider.
 *
 * @example
 * ```tsx
 * const customTheme = overrideTheme({
 *   baseThemeTokens: bladeTheme, // theme to override
 *   overrides: {
 *     colors: {
 *       onLight: {
 *         brand: {
 *           primary: {
 *             '500': 'hsla(222, 100%, 96%, 1)',
 *           },
 *         },
 *       },
 *     },
 *   },
 * });
 *
 * <BladeProvider themeTokens={customTheme} />
 * ```
 */
declare const overrideTheme: ({ baseThemeTokens, overrides }: OverrideTheme) => ThemeTokens;

/**
 * @param {Object} themeConfig - The brand color and overrides to apply to the theme
 * @param {string} themeConfig.brandColor - The brand color to use to generate the theme. Can be in hex, rgb, or hsl format.
 * @description
 * Creates a Blade Theme based on the custom brand color
 * @returns The Theme Tokens with the custom brand colors
 * @example
 * const { theme, brandColors } = createTheme({ brandColor: '#19BEA2'})
 **/
declare const createTheme: ({ brandColor, }: {
    brandColor: ColorInput;
}) => {
    theme: ThemeTokens;
    brandColors: ColorChromaticScale;
};

/**
 * Brands a type making them act as nominal
 * @see https://medium.com/@KevinBGreene/surviving-the-typescript-ecosystem-branding-and-type-tagging-6cf6e516523d
 */
type Brand<Type, Name extends string> = Type & {
    __brand__?: Name;
};
type NativeOrWebBrand = Brand<any, 'native' | 'web'>;

declare namespace Platform {
    type Name = 'native';
    /**
     * Right now, the module resolution is set to resolve `.native` files,
     *
     * Thus Platform.Select<> type will return the `native` type
     */
    type Select<Options extends {
        web: unknown;
        native: unknown;
    }> = Brand<Options[Name], 'platform-native'>;
    type CastNative<T extends NativeOrWebBrand | undefined> = Extract<T, {
        __brand__?: 'platform-native' | 'platform-all';
    }>;
    type CastWeb<T extends NativeOrWebBrand | undefined> = Extract<T, {
        __brand__?: 'platform-web' | 'platform-all';
    }>;
}

type Duration = {
    /** `80` milliseconds */
    '2xquick': 80;
    /** `160` milliseconds */
    xquick: 160;
    /** `200` milliseconds */
    quick: 200;
    /** `280` milliseconds */
    moderate: 280;
    /** `360` milliseconds */
    xmoderate: 360;
    /** `480` milliseconds */
    gentle: 480;
    /** `640` milliseconds */
    xgentle: 640;
    /** `960` milliseconds */
    '2xgentle': 960;
};
type Delay = {
    /** `80` milliseconds */
    '2xquick': 80;
    /** `160` milliseconds */
    xquick: 160;
    /** `280` milliseconds */
    moderate: 280;
    /** `480` milliseconds */
    gentle: 480;
    /** `960` milliseconds */
    xgentle: 960;
    /** `2000` milliseconds */
    long: 2000;
    /** `3000` milliseconds */
    xlong: 3000;
    /** `5000` milliseconds */
    '2xlong': 5000;
};
type EasingFactoryFn = {
    factory: () => (value: number) => number;
};
type EasingType<Value extends string> = Platform.Select<{
    web: Value;
    native: EasingFactoryFn;
}>;
type Easing = {
    /**
     * Linear Easing
     *
     * Use Case: Marquee, Progress Bar, etc
     *
     * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native
     */
    linear: EasingType<'cubic-bezier(0, 0, 0, 0)'>;
    /**
     * Entrance Animation Easing
     *
     * Use Case: Entry of modals, drawer, dropdown, etc
     *
     * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native
     */
    entrance: EasingType<'cubic-bezier(0, 0, 0.2, 1)'>;
    /**
     * Exit Animation Easing
     *
     * Use Case: Exit of modals, drawer, dropdown, etc
     *
     * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native
     */
    exit: EasingType<'cubic-bezier(0.17, 0, 1, 1)'>;
    /**
     * Standard Easing
     *
     * Use Case: Morph
     *
     * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native
     */
    standard: EasingType<'cubic-bezier(0.3, 0, 0.2, 1)'>;
    /**
     * Emphasized Easing
     *
     * Use Case: Hover states of interactive items
     *
     * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native
     */
    emphasized: EasingType<'cubic-bezier(0.5, 0, 0, 1)'>;
    /**
     * Overshoot Easing
     *
     * Use Case: Toast notifications
     *
     * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native
     */
    overshoot: EasingType<'cubic-bezier(0.5, 0, 0.3, 1.5)'>;
    /**
     * Error Easing
     *
     * Use Case: Error States
     *
     * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native
     */
    shake: EasingType<'cubic-bezier(1, 0.5, 0, 0.5)'>;
};
type Motion = Readonly<{
    delay: Delay;
    duration: Duration;
    easing: Easing;
}>;
type EasingString = `easing.${keyof Easing}`;
type DurationString = `duration.${keyof Duration}`;
type DelayString = `delay.${keyof Delay}`;
declare const motion: Motion;

/**
 * Size tokens are currently not exposed for users (therefore not available in theme)
 */
declare const size: {
    /** 0 px */
    readonly 0: 0;
    /** 1 px */
    readonly 1: 1;
    /** 2 px */
    readonly 2: 2;
    /** 3 px */
    readonly 3: 3;
    /** 4 px */
    readonly 4: 4;
    /** 5 px */
    readonly 5: 5;
    /** 6 px */
    readonly 6: 6;
    /** 7 px */
    readonly 7: 7;
    /** 8 px */
    readonly 8: 8;
    /** 10 px */
    readonly 10: 10;
    /** 12 px */
    readonly 12: 12;
    /** 14 px */
    readonly 14: 14;
    /** 15 px */
    readonly 15: 15;
    /** 16 px */
    readonly 16: 16;
    /** 18 px */
    readonly 18: 18;
    /** 20 px */
    readonly 20: 20;
    /** 24 px */
    readonly 24: 24;
    /** 26 px */
    readonly 26: 26;
    /** 28 px */
    readonly 28: 28;
    /** 30 px */
    readonly 30: 30;
    /** 31 px */
    readonly 31: 31;
    /** 32 px */
    readonly 32: 32;
    /** 33 px */
    readonly 33: 33;
    /** 34 px */
    readonly 34: 34;
    /** 36 px */
    readonly 36: 36;
    /** 37 px */
    readonly 37: 37;
    /** 38 px */
    readonly 38: 38;
    /** 40 px */
    readonly 40: 40;
    /** 42 px */
    readonly 42: 42;
    /** 44 px */
    readonly 44: 44;
    /** 46 px */
    readonly 46: 46;
    /** 48 px */
    readonly 48: 48;
    /** 50 px */
    readonly 50: 50;
    /** 52 px */
    readonly 52: 52;
    /** 56 px */
    readonly 56: 56;
    /** 59 px */
    readonly 59: 59;
    /** 60 px */
    readonly 60: 60;
    /** 62 px */
    readonly 62: 62;
    /** 64 px */
    readonly 64: 64;
    /** 66 px */
    readonly 66: 66;
    /** 72 px */
    readonly 72: 72;
    /** 78px */
    readonly 78: 78;
    /** 80 px */
    readonly 80: 80;
    /** 82 px */
    readonly 82: 82;
    /** 84 px */
    readonly 84: 84;
    /** 86 px */
    readonly 86: 86;
    /** 90 px */
    readonly 90: 90;
    /** 94 px */
    readonly 94: 94;
    /** 96 px */
    readonly 96: 96;
    /** 100 px */
    readonly 100: 100;
    /** 114 px */
    readonly 114: 114;
    /** 120 px */
    readonly 120: 120;
    /** 122 px */
    readonly 122: 122;
    /** 124 px */
    readonly 124: 124;
    /** 132 px */
    readonly 132: 132;
    /** 140 px */
    readonly 140: 140;
    /** 160 px */
    readonly 160: 160;
    /** 172 px */
    readonly 172: 172;
    /** 176 px */
    readonly 176: 176;
    /** 196 px */
    readonly 196: 196;
    /** 192 px */
    readonly 192: 192;
    /** 198 px */
    readonly 198: 198;
    /** 200 px */
    readonly 200: 200;
    /** 208 px */
    readonly 208: 208;
    /** 240 px */
    readonly 240: 240;
    /** 245 px */
    readonly 245: 245;
    /** 250 px */
    readonly 250: 250;
    /** 256 px */
    readonly 256: 256;
    /** 264 px */
    readonly 264: 264;
    /** 300 px */
    readonly 300: 300;
    /** 314 px */
    readonly 314: 314;
    /** 360 px */
    readonly 360: 360;
    /** 400 px */
    readonly 400: 400;
    /** 584 px */
    readonly 584: 584;
    /** 640 px */
    readonly 640: 640;
    /** 760 px */
    readonly 760: 760;
    /** 800 px */
    readonly 800: 800;
    /** 1024 px */
    readonly 1024: 1024;
    /** 1136 px */
    readonly 1136: 1136;
};
type Size = typeof size;

type ElevationLevels = 'none' | 'lowRaised' | 'midRaised' | 'highRaised';
type ElevationStyles = Readonly<{
    elevation: number;
    shadowColor: string;
    shadowOpacity: number;
    shadowRadius: number;
    shadowOffset: {
        /**
         * x-axis
         */
        width: number;
        /**
         * y-axis
         */
        height: number;
    };
}>;
type Elevation = Record<ElevationLevels, Platform.Select<{
    web: string;
    native: ElevationStyles;
}>>;
type ElevationWithColorModes = Record<ColorSchemeModes, Elevation>;

declare const elevation: ElevationWithColorModes;

export { BackdropBlur, Border, Breakpoints, Color, ColorSchemeNames, ColorSchemeNamesInput, Colors, ColorsWithModes, DelayString, DurationString, EasingFactoryFn, EasingString, Elevation, ElevationWithColorModes, FontFamily, FontSize, Motion, Opacity, Size, Spacing, ThemeTokens, Typography, TypographyPlatforms, TypographyWithPlatforms, backdropBlur, bladeTheme, border, breakpoints, colors, createTheme, elevation, motion, opacity, overrideTheme, size, spacing, typography };