@razorpay/blade 8.2.2 → 8.3.0

package/build/tokens/index.native.d.ts

@@ -0,0 +1,1210 @@
+declare type BorderRadius$1 = Readonly<{
+    /** none: 0(px/rem/pt) */
+    none: 0;
+    /** small: 2(px/rem/pt) */
+    small: 2;
+    /** medium: 4(px/rem/pt) */
+    medium: 4;
+    /** large: 8(px/rem/pt) */
+    large: 8;
+    /** 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%';
+}>;
+declare type BorderWidth$1 = Readonly<{
+    /** none: 0(px/rem/pt) */
+    none: 0;
+    /** thin: 1(px/rem/pt) */
+    thin: 1;
+    /** thick: 1.5(px/rem/pt) */
+    thick: 1.5;
+}>;
+declare type Border$1 = Readonly<{
+    radius: BorderRadius$1;
+    width: BorderWidth$1;
+}>;
+declare const border: Border$1;
+
+declare type Breakpoints$1 = 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$1;
+
+declare type ColorChromaticScale = Readonly<{
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
+    a00: string;
+    a50: string;
+    a100: string;
+    a200: string;
+}>;
+declare type ColorNeutralScale = 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;
+    a00: string;
+    a50: string;
+    a100: string;
+    a200: string;
+    a300: string;
+    a400: string;
+    a500: string;
+}>;
+declare type Color = Readonly<{
+    chromatic: {
+        azure: ColorChromaticScale;
+        emerald: ColorChromaticScale;
+        crimson: ColorChromaticScale;
+        cider: ColorChromaticScale;
+        orchid: ColorChromaticScale;
+        magenta: ColorChromaticScale;
+        sapphire: ColorChromaticScale;
+    };
+    neutral: {
+        blueGrayLight: ColorNeutralScale;
+        blueGrayDark: ColorNeutralScale;
+        navyGrayLight: ColorNeutralScale;
+        navyGrayDark: ColorNeutralScale;
+        ashGrayLight: ColorNeutralScale;
+        ashGrayDark: ColorNeutralScale;
+    };
+}>;
+declare const colors: Color;
+
+declare type Opacity = Readonly<{
+    /**0: 0 */
+    0: number;
+    /**1: 0.09 */
+    1: number;
+    /**2: 0.18 */
+    2: number;
+    /**3: 0.32 */
+    3: number;
+    /**4: 1.0 */
+    4: number;
+    /**5: 1.0 */
+    5: number;
+    /**6: 1.0 */
+    6: number;
+    /**7: 1.0 */
+    7: number;
+    /**8: 1.0 */
+    8: number;
+    /**9: 1.0 */
+    9: number;
+}>;
+declare const opacity: Opacity;
+
+declare type FontFamily$1 = {
+    /** Used for all type of textual content except code snippets */
+    text: string;
+    /** Used for code snippets  */
+    code: string;
+};
+
+declare type FontWeight$1 = {
+    regular: 400;
+    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.
+ */
+declare type FontSize$1 = {
+    /** desktop: 9(px/rem/pt)
+     *
+     * mobile: 9(px/rem/pt)
+     */
+    10: number;
+    /** 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: 22(px/rem/pt)
+     *
+     * mobile: 20(px/rem/pt)
+     */
+    500: number;
+    /** desktop: 24(px/rem/pt)
+     *
+     * mobile: 20(px/rem/pt)
+     */
+    600: number;
+    /** desktop: 28(px/rem/pt)
+     *
+     * mobile: 24(px/rem/pt)
+     */
+    700: number;
+    /** desktop: 32(px/rem/pt)
+     *
+     * mobile: 28(px/rem/pt)
+     */
+    800: number;
+    /** desktop: 36(px/rem/pt)
+     *
+     * mobile: 32(px/rem/pt)
+     */
+    900: number;
+    /** desktop: 40(px/rem/pt)
+     *
+     * mobile: 32(px/rem/pt)
+     */
+    1000: number;
+};
+declare type Typography$1 = {
+    fonts: {
+        family: FontFamily$1;
+        size: FontSize$1;
+        weight: FontWeight$1;
+    };
+    lineHeights: {
+        /** desktop: 0(px/rem/pt)
+         *
+         * mobile: 0(px/rem/pt)
+         */
+        0: number;
+        /** desktop: 14(px/rem/pt)
+         *
+         * mobile: 14(px/rem/pt)
+         */
+        25: number;
+        /** desktop: 16(px/rem/pt)
+         *
+         * mobile: 16(px/rem/pt)
+         */
+        50: number;
+        /** desktop: 18(px/rem/pt)
+         *
+         * mobile: 18(px/rem/pt)
+         */
+        75: number;
+        /** desktop: 20(px/rem/pt)
+         *
+         * mobile: 20(px/rem/pt)
+         */
+        100: number;
+        /** desktop: 24(px/rem/pt)
+         *
+         * mobile: 20(px/rem/pt)
+         */
+        200: number;
+        /** desktop: 24(px/rem/pt)
+         *
+         * mobile: 24(px/rem/pt)
+         */
+        300: number;
+        /** desktop: 28(px/rem/pt)
+         *
+         * mobile: 24(px/rem/pt)
+         */
+        400: number;
+        /** desktop: 32(px/rem/pt)
+         *
+         * mobile: 28(px/rem/pt)
+         */
+        500: number;
+        /** desktop: 40(px/rem/pt)
+         *
+         * mobile: 32(px/rem/pt)
+         */
+        600: number;
+        /** desktop: 40(px/rem/pt)
+         *
+         * mobile: 40(px/rem/pt)
+         */
+        700: number;
+        /** desktop: 48(px/rem/pt)
+         *
+         * mobile: 40(px/rem/pt)
+         */
+        800: number;
+    };
+};
+declare type TypographyPlatforms$1 = 'onDesktop' | 'onMobile';
+declare type TypographyWithPlatforms$1 = Record<TypographyPlatforms$1, Typography$1>;
+declare const typography: TypographyWithPlatforms$1;
+
+/**
+ * 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}
+ */
+declare type Spacing$1 = 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$1;
+
+type BorderRadius = Readonly<{
+  /** none: 0(px/rem/pt) */
+  none: 0;
+  /** small: 2(px/rem/pt) */
+  small: 2;
+  /** medium: 4(px/rem/pt) */
+  medium: 4;
+  /** large: 8(px/rem/pt) */
+  large: 8;
+  /** 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;
+  /** thin: 1(px/rem/pt) */
+  thin: 1;
+  /** thick: 1.5(px/rem/pt) */
+  thick: 1.5;
+}>;
+
+type Border = Readonly<{
+  radius: BorderRadius;
+  width: BorderWidth;
+}>;
+
+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;
+}>;
+
+type FontFamily = {
+  /** Used for all type of textual content except code snippets */
+  text: string;
+  /** Used for code snippets  */
+  code: string;
+};
+
+type FontWeight = {
+  regular: 400;
+  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: 9(px/rem/pt)
+   *
+   * mobile: 9(px/rem/pt)
+   */
+  10: number;
+  /** 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: 22(px/rem/pt)
+   *
+   * mobile: 20(px/rem/pt)
+   */
+  500: number;
+  /** desktop: 24(px/rem/pt)
+   *
+   * mobile: 20(px/rem/pt)
+   */
+  600: number;
+  /** desktop: 28(px/rem/pt)
+   *
+   * mobile: 24(px/rem/pt)
+   */
+  700: number;
+  /** desktop: 32(px/rem/pt)
+   *
+   * mobile: 28(px/rem/pt)
+   */
+  800: number;
+  /** desktop: 36(px/rem/pt)
+   *
+   * mobile: 32(px/rem/pt)
+   */
+  900: number;
+  /** desktop: 40(px/rem/pt)
+   *
+   * mobile: 32(px/rem/pt)
+   */
+  1000: number;
+};
+
+type Typography = {
+  fonts: {
+    family: FontFamily;
+    size: FontSize;
+    weight: FontWeight;
+  };
+  lineHeights: {
+    /** desktop: 0(px/rem/pt)
+     *
+     * mobile: 0(px/rem/pt)
+     */
+    0: number;
+    /** desktop: 14(px/rem/pt)
+     *
+     * mobile: 14(px/rem/pt)
+     */
+    25: number;
+    /** desktop: 16(px/rem/pt)
+     *
+     * mobile: 16(px/rem/pt)
+     */
+    50: number;
+    /** desktop: 18(px/rem/pt)
+     *
+     * mobile: 18(px/rem/pt)
+     */
+    75: number;
+    /** desktop: 20(px/rem/pt)
+     *
+     * mobile: 20(px/rem/pt)
+     */
+    100: number;
+    /** desktop: 24(px/rem/pt)
+     *
+     * mobile: 20(px/rem/pt)
+     */
+    200: number;
+    /** desktop: 24(px/rem/pt)
+     *
+     * mobile: 24(px/rem/pt)
+     */
+    300: number;
+    /** desktop: 28(px/rem/pt)
+     *
+     * mobile: 24(px/rem/pt)
+     */
+    400: number;
+    /** desktop: 32(px/rem/pt)
+     *
+     * mobile: 28(px/rem/pt)
+     */
+    500: number;
+    /** desktop: 40(px/rem/pt)
+     *
+     * mobile: 32(px/rem/pt)
+     */
+    600: number;
+    /** desktop: 40(px/rem/pt)
+     *
+     * mobile: 40(px/rem/pt)
+     */
+    700: number;
+    /** desktop: 48(px/rem/pt)
+     *
+     * mobile: 40(px/rem/pt)
+     */
+    800: number;
+  };
+  // letterSpacings: {};
+};
+
+type TypographyPlatforms = 'onDesktop' | 'onMobile';
+
+type TypographyWithPlatforms = Record<TypographyPlatforms, Typography>;
+
+/**
+ * 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;
+}>;
+
+type ColorSchemeModes$1 = 'onDark' | 'onLight';
+
+/* eslint-disable no-console */
+
+
+type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends Record<number | string, unknown> ? DeepPartial<T[P]> : T[P];
+};
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/**
+ * 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'>;
+
+/* eslint-disable @typescript-eslint/no-namespace */
+
+
+declare namespace Platform {
+  export type Name = 'native';
+  /**
+   * Right now, the module resolution is set to resolve `.native` files,
+   *
+   * Thus Platform.Select<> type will return the `native` type
+   */
+  export type Select<Options extends { web: unknown; native: unknown }> = Brand<
+    Options[Name],
+    'platform-native'
+  >;
+
+  export type CastNative<T extends NativeOrWebBrand | undefined> = Extract<
+    T,
+    { __brand__?: 'platform-native' | 'platform-all' }
+  >;
+
+  export type CastWeb<T extends NativeOrWebBrand | undefined> = Extract<
+    T,
+    { __brand__?: 'platform-web' | 'platform-all' }
+  >;
+}
+
+type Duration$1 = {
+  /** `70` milliseconds */
+  '2xquick': 70;
+  /** `150` milliseconds */
+  xquick: 150;
+  /** `200` milliseconds */
+  quick: 200;
+  /** `250` milliseconds */
+  moderate: 250;
+  /** `300` milliseconds */
+  xmoderate: 300;
+  /** `400` milliseconds */
+  gentle: 400;
+  /** `600` milliseconds */
+  xgentle: 600;
+  /** `900` milliseconds */
+  '2xgentle': 900;
+};
+
+type Delay$1 = {
+  /** `70` milliseconds */
+  '2xshort': 70;
+  /** `120` milliseconds */
+  xshort: 120;
+  /** `180` milliseconds */
+  short: 180;
+  /** `3000` milliseconds */
+  long: 3000;
+  /** `5000` milliseconds */
+  xlong: 5000;
+};
+
+type EasingFunctionFactory$1 = { factory: () => (value: number) => number }; // similar to EasingFunctionFactory of `react-native-reanimated`
+type EasingType$1<Value extends string> = Platform.Select<{
+  web: Value;
+  native: EasingFunctionFactory$1;
+}>;
+
+type Easing$1 = {
+  /** Easings for all standard animations*/
+  standard: {
+    /** `cubic-bezier(0.5, 0, 0.3, 1.5)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    attentive: EasingType$1<'cubic-bezier(0.5, 0, 0.3, 1.5)'>;
+    /** `cubic-bezier(0.3, 0, 0.2, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    effective: EasingType$1<'cubic-bezier(0.3, 0, 0.2, 1)'>;
+    /** `cubic-bezier(0.5, 0, 0, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    revealing: EasingType$1<'cubic-bezier(0.5, 0, 0, 1)'>;
+    /** `cubic-bezier(1, 0.5, 0, 0.5)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    wary: EasingType$1<'cubic-bezier(1, 0.5, 0, 0.5)'>;
+  };
+  /** Easings for all entrance animations*/
+  entrance: {
+    /** `cubic-bezier(0.5, 0, 0.3, 1.5)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    attentive: EasingType$1<'cubic-bezier(0.5, 0, 0.3, 1.5)'>;
+    /** `cubic-bezier(0, 0, 0.2, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    effective: EasingType$1<'cubic-bezier(0, 0, 0.2, 1)'>;
+    /** `cubic-bezier(0, 0, 0, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    revealing: EasingType$1<'cubic-bezier(0, 0, 0, 1)'>;
+  };
+  /** Easings for all exit animations*/
+  exit: {
+    /** `cubic-bezier(0.7, 0, 0.5, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    attentive: EasingType$1<'cubic-bezier(0.7, 0, 0.5, 1)'>;
+    /** `cubic-bezier(0.17, 0, 1, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    effective: EasingType$1<'cubic-bezier(0.17, 0, 1, 1)'>;
+    /** `cubic-bezier(0.5, 0, 1, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    revealing: EasingType$1<'cubic-bezier(0.5, 0, 1, 1)'>;
+  };
+};
+
+type Motion$1 = Readonly<{
+  delay: Delay$1;
+  duration: Duration$1;
+  easing: Easing$1;
+}>;
+
+type ElevationLevels$1 = 'none' | 'lowRaised' | 'midRaised' | 'highRaised';
+
+type ElevationStyles$1 = Readonly<{
+  elevation: number;
+  shadowColor: string;
+  shadowOpacity: number;
+  shadowRadius: number;
+  shadowOffset: {
+    /**
+     * x-axis
+     */
+    width: number;
+    /**
+     * y-axis
+     */
+    height: number;
+  };
+}>;
+
+type Elevation$1 = Record<
+  ElevationLevels$1,
+  Platform.Select<{
+    web: string;
+    native: ElevationStyles$1;
+  }>
+>;
+
+type ElevationWithColorModes$1 = Record<ColorSchemeModes$1, Elevation$1>;
+
+type DotNotationMotionStringToken<TokenType> = {
+  [K in keyof TokenType]: `${Extract<K, string>}.${TokenType[K] extends Record<
+    string,
+    string | EasingFunctionFactory$1
+  >
+    ? Extract<keyof TokenType[K], string | EasingFunctionFactory$1>
+    : DotNotationMotionStringToken<TokenType[K]>}`;
+}[keyof TokenType];
+
+/**
+ *
+ * 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 = 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete;
+ * ```
+ *
+ * This will show paymentTheme and bankingTheme 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>;
+
+declare type Duration = {
+    /** `70` milliseconds */
+    '2xquick': 70;
+    /** `150` milliseconds */
+    xquick: 150;
+    /** `200` milliseconds */
+    quick: 200;
+    /** `250` milliseconds */
+    moderate: 250;
+    /** `300` milliseconds */
+    xmoderate: 300;
+    /** `400` milliseconds */
+    gentle: 400;
+    /** `600` milliseconds */
+    xgentle: 600;
+    /** `900` milliseconds */
+    '2xgentle': 900;
+};
+declare type Delay = {
+    /** `70` milliseconds */
+    '2xshort': 70;
+    /** `120` milliseconds */
+    xshort: 120;
+    /** `180` milliseconds */
+    short: 180;
+    /** `3000` milliseconds */
+    long: 3000;
+    /** `5000` milliseconds */
+    xlong: 5000;
+};
+declare type EasingFunctionFactory = {
+    factory: () => (value: number) => number;
+};
+declare type EasingType<Value extends string> = Platform.Select<{
+    web: Value;
+    native: EasingFunctionFactory;
+}>;
+declare type Easing = {
+    /** Easings for all standard animations*/
+    standard: {
+        /** `cubic-bezier(0.5, 0, 0.3, 1.5)`
+         *
+         *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+        attentive: EasingType<'cubic-bezier(0.5, 0, 0.3, 1.5)'>;
+        /** `cubic-bezier(0.3, 0, 0.2, 1)`
+         *
+         *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+        effective: EasingType<'cubic-bezier(0.3, 0, 0.2, 1)'>;
+        /** `cubic-bezier(0.5, 0, 0, 1)`
+         *
+         *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+        revealing: EasingType<'cubic-bezier(0.5, 0, 0, 1)'>;
+        /** `cubic-bezier(1, 0.5, 0, 0.5)`
+         *
+         *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+        wary: EasingType<'cubic-bezier(1, 0.5, 0, 0.5)'>;
+    };
+    /** Easings for all entrance animations*/
+    entrance: {
+        /** `cubic-bezier(0.5, 0, 0.3, 1.5)`
+         *
+         *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+        attentive: EasingType<'cubic-bezier(0.5, 0, 0.3, 1.5)'>;
+        /** `cubic-bezier(0, 0, 0.2, 1)`
+         *
+         *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+        effective: EasingType<'cubic-bezier(0, 0, 0.2, 1)'>;
+        /** `cubic-bezier(0, 0, 0, 1)`
+         *
+         *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+        revealing: EasingType<'cubic-bezier(0, 0, 0, 1)'>;
+    };
+    /** Easings for all exit animations*/
+    exit: {
+        /** `cubic-bezier(0.7, 0, 0.5, 1)`
+         *
+         *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+        attentive: EasingType<'cubic-bezier(0.7, 0, 0.5, 1)'>;
+        /** `cubic-bezier(0.17, 0, 1, 1)`
+         *
+         *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+        effective: EasingType<'cubic-bezier(0.17, 0, 1, 1)'>;
+        /** `cubic-bezier(0.5, 0, 1, 1)`
+         *
+         *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+        revealing: EasingType<'cubic-bezier(0.5, 0, 1, 1)'>;
+    };
+};
+declare type Motion = Readonly<{
+    delay: Delay;
+    duration: Duration;
+    easing: Easing;
+}>;
+declare type EasingString = `easing.${DotNotationMotionStringToken<Easing>}`;
+declare type DurationString = `duration.${keyof Duration}`;
+declare 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;
+    /** 8 px */
+    readonly 8: 8;
+    /** 10 px */
+    readonly 10: 10;
+    /** 12 px */
+    readonly 12: 12;
+    /** 16 px */
+    readonly 16: 16;
+    /** 18 px */
+    readonly 18: 18;
+    /** 20 px */
+    readonly 20: 20;
+    /** 24 px */
+    readonly 24: 24;
+    /** 28 px */
+    readonly 28: 28;
+    /** 32 px */
+    readonly 32: 32;
+    /** 36 px */
+    readonly 36: 36;
+    /** 40 px */
+    readonly 40: 40;
+    /** 48 px */
+    readonly 48: 48;
+    /** 60 px */
+    readonly 56: 56;
+    /** 100 px */
+    readonly 100: 100;
+    /** 120 px */
+    readonly 120: 120;
+    /** 300 px */
+    readonly 300: 300;
+    /** 584 px */
+    readonly 584: 584;
+};
+declare type Size = typeof size;
+
+declare type ColorSchemeNames = 'dark' | 'light';
+declare type ColorSchemeNamesInput = ColorSchemeNames | 'system';
+declare type ColorSchemeModes = 'onDark' | 'onLight';
+declare type TextTypes = 'muted' | 'normal' | 'placeholder' | 'subdued' | 'subtle';
+declare type ColorContrastTypes = 'low' | 'high';
+declare type Feedback = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';
+declare type ColorContrast = {
+    [K in ColorContrastTypes as `${Extract<K, string>}Contrast`]: string;
+};
+declare type ActionStates = {
+    default: string;
+    hover: string;
+    focus: string;
+    active: string;
+    disabled: string;
+};
+declare type LinkActionStates = ActionStates & {
+    visited: string;
+};
+declare type ActionStatesWithContrast = {
+    default: ColorContrast;
+    hover: ColorContrast;
+    focus: ColorContrast;
+    active: ColorContrast;
+    disabled: ColorContrast;
+};
+declare type ActionVariants = {
+    primary: ActionStates;
+    secondary: ActionStates;
+    tertiary: ActionStates;
+    link: LinkActionStates;
+};
+declare type ActionVariantsWithContrast = {
+    primary: ActionStatesWithContrast;
+    secondary: ActionStatesWithContrast;
+    tertiary: ActionStatesWithContrast;
+    link: ActionStatesWithContrast;
+};
+declare type FeedbackActions = {
+    background: Pick<ActionVariantsWithContrast, 'primary'>;
+    border: Pick<ActionVariantsWithContrast, 'primary'>;
+    text: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;
+    icon: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;
+};
+declare type Colors = {
+    brand: {
+        primary: Record<300 | 400 | 500 | 600 | 700 | 800, string>;
+        secondary: Record<500, string>;
+        gray: Record<200 | 300 | 400 | 500 | 600 | 700 | 'a50' | 'a100', ColorContrast>;
+    };
+    feedback: {
+        background: Record<Feedback, ColorContrast>;
+        border: Record<Feedback, ColorContrast>;
+        text: Record<Feedback, ColorContrast>;
+        icon: Record<Feedback, ColorContrast>;
+        positive: {
+            action: FeedbackActions;
+        };
+        negative: {
+            action: FeedbackActions;
+        };
+        information: {
+            action: FeedbackActions;
+        };
+        notice: {
+            action: FeedbackActions;
+        };
+        neutral: {
+            action: FeedbackActions;
+        };
+    };
+    surface: {
+        background: Record<'level1' | 'level2' | 'level3', ColorContrast>;
+        border: Record<'normal' | 'subtle', ColorContrast>;
+        text: Record<TextTypes, ColorContrast>;
+        action: {
+            icon: ActionStatesWithContrast;
+        };
+    };
+    overlay: Record<'background', string>;
+    action: {
+        background: Omit<ActionVariants, 'link'>;
+        border: Omit<ActionVariants, 'link'>;
+        text: ActionVariants;
+        icon: ActionVariants;
+    };
+    badge: {
+        background: {
+            blue: ColorContrast;
+        };
+        border: {
+            blue: ColorContrast;
+        };
+        text: {
+            blue: ColorContrast;
+        };
+        icon: {
+            blue: ColorContrast;
+        };
+    };
+};
+declare type ColorsWithModes = Record<ColorSchemeModes, Colors>;
+declare type ThemeTokens = {
+    name: 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete;
+    border: Border;
+    breakpoints: Breakpoints;
+    colors: ColorsWithModes;
+    motion: Motion$1;
+    elevation: ElevationWithColorModes$1;
+    spacing: Spacing;
+    typography: TypographyWithPlatforms;
+};
+
+declare type ElevationLevels = 'none' | 'lowRaised' | 'midRaised' | 'highRaised';
+declare type ElevationStyles = Readonly<{
+    elevation: number;
+    shadowColor: string;
+    shadowOpacity: number;
+    shadowRadius: number;
+    shadowOffset: {
+        /**
+         * x-axis
+         */
+        width: number;
+        /**
+         * y-axis
+         */
+        height: number;
+    };
+}>;
+declare type Elevation = Record<ElevationLevels, Platform.Select<{
+    web: string;
+    native: ElevationStyles;
+}>>;
+declare type ElevationWithColorModes = Record<ColorSchemeModes, Elevation>;
+
+declare const elevation: ElevationWithColorModes;
+
+declare const paymentTheme: ThemeTokens;
+
+declare const bankingTheme: ThemeTokens;
+
+declare type OverrideTheme = {
+    /**
+     * base tokens
+     */
+    baseThemeTokens: ThemeTokens;
+    /**
+     * partial theme tokens
+     */
+    overrides: DeepPartial<ThemeTokens>;
+};
+/**
+ * @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: paymentTheme, // theme to override
+ *   overrides: {
+ *     colors: {
+ *       onLight: {
+ *         brand: {
+ *           primary: {
+ *             '500': 'hsla(222, 100%, 96%, 1)',
+ *           },
+ *         },
+ *       },
+ *     },
+ *   },
+ * });
+ *
+ * <BladeProvider themeTokens={customTheme} />
+ * ```
+ */
+declare const overrideTheme: ({ baseThemeTokens, overrides }: OverrideTheme) => ThemeTokens;
+
+export { Border$1 as Border, Breakpoints$1 as Breakpoints, Color, ColorSchemeNames, ColorSchemeNamesInput, ColorsWithModes, DelayString, DurationString, EasingFunctionFactory, EasingString, Elevation, ElevationWithColorModes, FontFamily$1 as FontFamily, FontSize$1 as FontSize, Motion, Opacity, Size, Spacing$1 as Spacing, ThemeTokens, Typography$1 as Typography, TypographyPlatforms$1 as TypographyPlatforms, TypographyWithPlatforms$1 as TypographyWithPlatforms, bankingTheme, border, breakpoints, colors, elevation, motion, opacity, overrideTheme, paymentTheme, size, spacing, typography };