@razorpay/blade 10.7.0 → 10.8.0

package/build/utils/index.d.ts

@@ -1,560 +1,458 @@
-import { Platform as Platform$2 } from 'react-native';
+/// <reference types="react" />
+import { Platform as Platform$1 } from 'react-native';
+import * as React from 'react';
 import { MutableRefObject } from 'react';
 
-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%';
+declare 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;
-  /** 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;
+declare 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 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;
+declare 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;
+declare 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;
+declare 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;
-  /** desktop: 48(px/rem/pt)
-   *
-   * mobile: 40(px/rem/pt)
-   */
-  1100: number;
-  /** desktop: 56(px/rem/pt)
-   *
-   * mobile: 48(px/rem/pt)
-   */
-  1200: number;
-  /** desktop: 64(px/rem/pt)
-   *
-   * mobile: 56(px/rem/pt)
-   */
-  1300: number;
-  /** desktop: 88(px/rem/pt)
-   *
-   * mobile: 64(px/rem/pt)
-   */
-  1600: number;
-};
-
-type Typography = {
-  fonts: {
-    family: FontFamily;
-    size: FontSize;
-    weight: FontWeight;
-  };
-  lineHeights: {
-    /** desktop: 0(px/rem/pt)
-     *
-     * mobile: 0(px/rem/pt)
+declare 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)
      */
-    0: number;
+    50: number;
+    /** desktop: 12(px/rem/pt)
+     *
+     * mobile: 12(px/rem/pt)
+     */
+    75: number;
     /** desktop: 14(px/rem/pt)
      *
      * mobile: 14(px/rem/pt)
      */
-    25: number;
+    100: number;
     /** desktop: 16(px/rem/pt)
      *
      * mobile: 16(px/rem/pt)
      */
-    50: number;
+    200: number;
     /** desktop: 18(px/rem/pt)
      *
-     * mobile: 18(px/rem/pt)
+     * mobile: 16(px/rem/pt)
      */
-    75: number;
+    300: number;
     /** desktop: 20(px/rem/pt)
      *
-     * mobile: 20(px/rem/pt)
+     * mobile: 18(px/rem/pt)
      */
-    100: number;
-    /** desktop: 24(px/rem/pt)
+    400: number;
+    /** desktop: 22(px/rem/pt)
      *
      * mobile: 20(px/rem/pt)
      */
-    200: number;
+    500: number;
     /** desktop: 24(px/rem/pt)
      *
-     * mobile: 24(px/rem/pt)
+     * mobile: 20(px/rem/pt)
      */
-    300: number;
+    600: number;
     /** desktop: 28(px/rem/pt)
      *
      * mobile: 24(px/rem/pt)
      */
-    400: number;
+    700: number;
     /** desktop: 32(px/rem/pt)
      *
      * mobile: 28(px/rem/pt)
      */
-    500: number;
-    /** desktop: 40(px/rem/pt)
+    800: number;
+    /** desktop: 36(px/rem/pt)
      *
      * mobile: 32(px/rem/pt)
      */
-    600: number;
+    900: number;
     /** desktop: 40(px/rem/pt)
      *
-     * mobile: 40(px/rem/pt)
+     * mobile: 32(px/rem/pt)
      */
-    700: number;
+    1000: number;
     /** desktop: 48(px/rem/pt)
      *
      * mobile: 40(px/rem/pt)
      */
-    800: number;
+    1100: number;
     /** desktop: 56(px/rem/pt)
      *
      * mobile: 48(px/rem/pt)
      */
-    900: number;
+    1200: number;
     /** desktop: 64(px/rem/pt)
      *
      * mobile: 56(px/rem/pt)
      */
-    1000: number;
-    /** desktop: 72(px/rem/pt)
+    1300: number;
+    /** desktop: 88(px/rem/pt)
      *
      * mobile: 64(px/rem/pt)
      */
-    1100: number;
-    /** desktop: 104(px/rem/pt)
-     *
-     * mobile: 72(px/rem/pt)
-     */
-    1500: number;
-  };
-  // letterSpacings: {};
+    1600: number;
 };
-
-type TypographyPlatforms = 'onDesktop' | 'onMobile';
-
-type TypographyWithPlatforms = Record<TypographyPlatforms, Typography>;
+declare 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;
+        /** desktop: 56(px/rem/pt)
+         *
+         * mobile: 48(px/rem/pt)
+         */
+        900: number;
+        /** desktop: 64(px/rem/pt)
+         *
+         * mobile: 56(px/rem/pt)
+         */
+        1000: number;
+        /** desktop: 72(px/rem/pt)
+         *
+         * mobile: 64(px/rem/pt)
+         */
+        1100: number;
+        /** desktop: 104(px/rem/pt)
+         *
+         * mobile: 72(px/rem/pt)
+         */
+        1500: number;
+    };
+};
+declare type TypographyPlatforms = 'onDesktop' | 'onMobile';
+declare 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;
+declare 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 UseColorScheme$1 = {
-  colorScheme: ColorSchemeNames;
-  setColorScheme: (colorScheme: ColorSchemeNamesInput) => void;
-};
-
-/* 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$1<Type, Name extends string> = Type & { __brand__?: Name };
-
-type NativeOrWebBrand$1 = Brand$1<any, 'native' | 'web'>;
-
-/* eslint-disable @typescript-eslint/no-namespace */
-
-
-declare namespace Platform$1 {
-  export type Name = 'web';
-  /**
-   * Right now, the module resolution is set to resolve `.web` files,
-   *
-   * Thus Platform.Select<> type will return the `web` type
-   */
-  export type Select<Options extends { web: unknown; native: unknown }> = Brand$1<
-    Options[Name],
-    'platform-web'
-  >;
-
-  export type CastNative<T extends NativeOrWebBrand$1 | undefined> = Extract<
-    T,
-    { __brand__?: 'platform-native' | 'platform-all' }
-  >;
-
-  export type CastWeb<T extends NativeOrWebBrand$1 | undefined> = Extract<
-    T,
-    { __brand__?: 'platform-web' | 'platform-all' }
-  >;
-}
-
-type Theme = {
-  name: ThemeTokens['name'];
-  border: Border;
-  breakpoints: Breakpoints;
-  colors: Colors;
-  spacing: Spacing;
-  motion: Motion;
-  elevation: Elevation;
-  typography: Typography;
+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;
 };
-
-type ThemeContext = UseColorScheme$1 & {
-  theme: Theme;
-  platform: TypographyPlatforms;
+declare type Delay = {
+    /** `70` milliseconds */
+    '2xshort': 70;
+    /** `120` milliseconds */
+    xshort: 120;
+    /** `180` milliseconds */
+    short: 180;
+    /** `3000` milliseconds */
+    long: 3000;
+    /** `5000` milliseconds */
+    xlong: 5000;
 };
-
-declare const ThemeContext = createContext<ThemeContext>({
-  // @ts-expect-error set null
-  theme: null,
-  colorScheme: 'light',
-  platform: 'onDesktop',
-  setColorScheme: () => null,
-});
-
-declare const useTheme = (): ThemeContext => {
-  const themeContext = useContext<ThemeContext>(ThemeContext);
-  if (__DEV__) {
-    if (!themeContext.theme) {
-      throwBladeError({
-        message: 'BladeProvider is missing theme',
-        moduleName: 'BladeProvider',
-      });
-    }
-    if (themeContext === undefined) {
-      throwBladeError({
-        message: 'useTheme must be used within BladeProvider',
-        moduleName: 'BladeProvider',
-      });
-    }
-  }
-  return themeContext;
+declare type EasingFactoryFn = {
+    factory: () => (value: number) => number;
 };
-
-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;
-};
-
-type Delay = {
-  /** `70` milliseconds */
-  '2xshort': 70;
-  /** `120` milliseconds */
-  xshort: 120;
-  /** `180` milliseconds */
-  short: 180;
-  /** `3000` milliseconds */
-  long: 3000;
-  /** `5000` milliseconds */
-  xlong: 5000;
-};
-
-type EasingFactoryFn = { factory: () => (value: number) => number }; // similar to EasingFactoryFn of `react-native-reanimated`
-type EasingType<Value extends string> = Platform$1.Select<{
-  web: Value;
-  native: EasingFactoryFn;
+declare type EasingType<Value extends string> = Platform.Select<{
+    web: Value;
+    native: EasingFactoryFn;
 }>;
-
-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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` for native */
-    revealing: EasingType<'cubic-bezier(0.5, 0, 1, 1)'>;
-  };
+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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` for native */
+        revealing: EasingType<'cubic-bezier(0.5, 0, 1, 1)'>;
+    };
 };
-
-type Motion = Readonly<{
-  delay: Delay;
-  duration: Duration;
-  easing: Easing;
+declare type Motion = Readonly<{
+    delay: Delay;
+    duration: Duration;
+    easing: Easing;
 }>;
 
-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;
-  };
+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;
+    };
 }>;
-
-type Elevation = Record<
-  ElevationLevels,
-  Platform$1.Select<{
+declare type Elevation = Record<ElevationLevels, Platform.Select<{
     web: string;
     native: ElevationStyles;
-  }>
->;
-
-type ElevationWithColorModes = Record<ColorSchemeModes, Elevation>;
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
+}>>;
+declare type ElevationWithColorModes = Record<ColorSchemeModes, Elevation>;
 
 /**
  *
@@ -572,140 +470,119 @@ type ElevationWithColorModes = Record<ColorSchemeModes, Elevation>;
  * 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 TextTypes = 'muted' | 'normal' | 'placeholder' | 'subdued' | 'subtle';
-
-type ColorContrastTypes = 'low' | 'high';
-
-type Feedback = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';
-
-type ColorContrast = {
-  [K in ColorContrastTypes as `${Extract<K, string>}Contrast`]: string;
+declare type StringWithAutocomplete = string & Record<never, never>;
+
+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;
 };
-
-type ActionStates = {
-  default: string;
-  hover: string;
-  focus: string;
-  active: string;
-  disabled: string;
+declare type ActionStates = {
+    default: string;
+    hover: string;
+    focus: string;
+    active: string;
+    disabled: string;
 };
-
-type LinkActionStates = ActionStates & {
-  visited: string;
+declare type LinkActionStates = ActionStates & {
+    visited: string;
 };
-
-type ActionStatesWithContrast = {
-  default: ColorContrast;
-  hover: ColorContrast;
-  focus: ColorContrast;
-  active: ColorContrast;
-  disabled: ColorContrast;
+declare type ActionStatesWithContrast = {
+    default: ColorContrast;
+    hover: ColorContrast;
+    focus: ColorContrast;
+    active: ColorContrast;
+    disabled: ColorContrast;
 };
-
-type ActionVariants = {
-  primary: ActionStates;
-  secondary: ActionStates;
-  tertiary: ActionStates;
-  link: LinkActionStates;
+declare type ActionVariants = {
+    primary: ActionStates;
+    secondary: ActionStates;
+    tertiary: ActionStates;
+    link: LinkActionStates;
 };
-
-type ActionVariantsWithContrast = {
-  primary: ActionStatesWithContrast;
-  secondary: ActionStatesWithContrast;
-  tertiary: ActionStatesWithContrast;
-  link: ActionStatesWithContrast;
+declare type ActionVariantsWithContrast = {
+    primary: ActionStatesWithContrast;
+    secondary: ActionStatesWithContrast;
+    tertiary: ActionStatesWithContrast;
+    link: ActionStatesWithContrast;
 };
-
-// export type ActionProperties = {
-//   background: ActionVariants;
-//   border: ActionVariants;
-//   text: ActionVariants;
-//   icon: ActionVariants;
-// };
-
-type FeedbackActions = {
-  background: Pick<ActionVariantsWithContrast, 'primary'>;
-  border: Pick<ActionVariantsWithContrast, 'primary'>;
-  text: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;
-  icon: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;
+declare type FeedbackActions = {
+    background: Pick<ActionVariantsWithContrast, 'primary'>;
+    border: Pick<ActionVariantsWithContrast, 'primary'>;
+    text: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;
+    icon: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;
 };
-
-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;
+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>;
     };
-    negative: {
-      action: FeedbackActions;
+    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;
+        };
     };
-    information: {
-      action: FeedbackActions;
+    surface: {
+        background: Record<'level1' | 'level2' | 'level3', ColorContrast>;
+        border: Record<'normal' | 'subtle', ColorContrast>;
+        text: Record<TextTypes, ColorContrast>;
+        action: {
+            icon: ActionStatesWithContrast;
+        };
     };
-    notice: {
-      action: FeedbackActions;
-    };
-    neutral: {
-      action: FeedbackActions;
-    };
-  };
-  surface: {
-    background: Record<'level1' | 'level2' | 'level3', ColorContrast>;
-    border: Record<'normal' | 'subtle', ColorContrast>;
-    text: Record<TextTypes, ColorContrast>;
+    overlay: Record<'background', string>;
     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;
+        background: Omit<ActionVariants, 'link'>;
+        border: Omit<ActionVariants, 'link'>;
+        text: ActionVariants;
+        icon: ActionVariants;
     };
-    text: {
-      blue: ColorContrast;
+    badge: {
+        background: {
+            blue: ColorContrast;
+        };
+        border: {
+            blue: ColorContrast;
+        };
+        text: {
+            blue: ColorContrast;
+        };
+        icon: {
+            blue: ColorContrast;
+        };
     };
-    icon: {
-      blue: ColorContrast;
-    };
-  };
 };
-
-type ColorsWithModes = Record<ColorSchemeModes, Colors>;
-
-type ThemeTokens = {
-  name: 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete; // Can be used to watch over state changes between theme without watching over entire theme object
-  border: Border;
-  breakpoints: Breakpoints;
-  colors: ColorsWithModes;
-  motion: Motion;
-  elevation: ElevationWithColorModes;
-  spacing: Spacing;
-  typography: TypographyWithPlatforms;
+declare type ColorsWithModes = Record<ColorSchemeModes, Colors>;
+declare type ThemeTokens = {
+    name: 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete;
+    border: Border;
+    breakpoints: Breakpoints;
+    colors: ColorsWithModes;
+    motion: Motion;
+    elevation: ElevationWithColorModes;
+    spacing: Spacing;
+    typography: TypographyWithPlatforms;
 };
 
 declare const getColorScheme: (colorScheme?: ColorSchemeNamesInput) => ColorSchemeNames;
@@ -745,7 +622,7 @@ declare function useInterval(callback: () => void, { delay, enable }: {
 
 declare const isReactNative: () => boolean;
 
-declare const getOS: () => typeof Platform$2.OS;
+declare const getOS: () => typeof Platform$1.OS;
 declare const isAndroid: () => boolean;
 
 /**
@@ -814,7 +691,7 @@ declare const castNativeType: <T>(value: T) => Extract<T, {
 declare function makeBorderSize<T extends number>(size: T): `${T}px`;
 declare function makeBorderSize<T extends string>(size: T): T;
 
-declare type MakeMotionTime<Value extends number> = Platform$1.Select<{
+declare type MakeMotionTime<Value extends number> = Platform.Select<{
     native: number;
     web: `${Value}ms`;
 }>;
@@ -842,4 +719,22 @@ declare const toTitleCase: (inputString: string) => string;
  */
 declare function usePrevious<T>(value: T): MutableRefObject<T | undefined>['current'];
 
+declare type Theme = {
+    name: ThemeTokens['name'];
+    border: Border;
+    breakpoints: Breakpoints;
+    colors: Colors;
+    spacing: Spacing;
+    motion: Motion;
+    elevation: Elevation;
+    typography: Typography;
+};
+
+declare type ThemeContext = UseColorScheme & {
+    theme: Theme;
+    platform: TypographyPlatforms;
+};
+declare const ThemeContext: React.Context<ThemeContext>;
+declare const useTheme: () => ThemeContext;
+
 export { MakeSize, Platform, PlatformTypes, ThemeContext, UseColorScheme, castNativeType, castWebType, getColorScheme, getMediaQuery, getOS, getPlatformType, isAndroid, isReactNative, makeBorderSize, makeMotionTime, makeSize, makeSpace, makeTypographySize, toTitleCase, useBreakpoint, useColorScheme, useInterval, usePrevious, useTheme };