@razorpay/blade 10.7.0 → 10.8.0

package/build/tokens/index.d.ts

@@ -1,4 +1,4 @@
-declare type BorderRadius$1 = Readonly<{
+declare type BorderRadius = Readonly<{
     /** none: 0(px/rem/pt) */
     none: 0;
     /** small: 2(px/rem/pt) */
@@ -12,7 +12,7 @@ declare type BorderRadius$1 = Readonly<{
     /** round: 50%(pt). This will turn the box element into a circle */
     round: '50%';
 }>;
-declare type BorderWidth$1 = Readonly<{
+declare type BorderWidth = Readonly<{
     /** none: 0(px/rem/pt) */
     none: 0;
     /** thinner: 0.5(px/rem/pt) */
@@ -24,13 +24,13 @@ declare type BorderWidth$1 = Readonly<{
     /** thicker: 2(px/rem/pt) */
     thicker: 2;
 }>;
-declare type Border$1 = Readonly<{
-    radius: BorderRadius$1;
-    width: BorderWidth$1;
+declare type Border = Readonly<{
+    radius: BorderRadius;
+    width: BorderWidth;
 }>;
-declare const border: Border$1;
+declare const border: Border;
 
-declare type Breakpoints$1 = Readonly<{
+declare type Breakpoints = Readonly<{
     /**
      * `base` is used for responsive styling following a **mobile first** approach. It starts from 0px till the next existing token
      *
@@ -99,7 +99,7 @@ declare type Breakpoints$1 = Readonly<{
      */
     xl: number;
 }>;
-declare const breakpoints: Breakpoints$1;
+declare const breakpoints: Breakpoints;
 
 declare type ColorChromaticScale = Readonly<{
     50: string;
@@ -188,14 +188,14 @@ declare type Opacity = Readonly<{
 }>;
 declare const opacity: Opacity;
 
-declare type FontFamily$1 = {
+declare type FontFamily = {
     /** Used for all type of textual content except code snippets */
     text: string;
     /** Used for code snippets  */
     code: string;
 };
 
-declare type FontWeight$1 = {
+declare type FontWeight = {
     regular: 400;
     bold: 700;
 };
@@ -205,7 +205,7 @@ declare type FontWeight$1 = {
  * 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 = {
+declare type FontSize = {
     /** desktop: 9(px/rem/pt)
      *
      * mobile: 9(px/rem/pt)
@@ -297,11 +297,11 @@ declare type FontSize$1 = {
      */
     1600: number;
 };
-declare type Typography$1 = {
+declare type Typography = {
     fonts: {
-        family: FontFamily$1;
-        size: FontSize$1;
-        weight: FontWeight$1;
+        family: FontFamily;
+        size: FontSize;
+        weight: FontWeight;
     };
     lineHeights: {
         /** desktop: 0(px/rem/pt)
@@ -386,16 +386,16 @@ declare type Typography$1 = {
         1500: number;
     };
 };
-declare type TypographyPlatforms$1 = 'onDesktop' | 'onMobile';
-declare type TypographyWithPlatforms$1 = Record<TypographyPlatforms$1, Typography$1>;
-declare const typography: TypographyWithPlatforms$1;
+declare type TypographyPlatforms = 'onDesktop' | 'onMobile';
+declare 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}
  */
-declare type Spacing$1 = Readonly<{
+declare type Spacing = Readonly<{
     /** 0: 0(px/rem/pt) */
     0: 0;
     /** 1: 2(px/rem/pt) */
@@ -421,533 +421,198 @@ declare type Spacing$1 = Readonly<{
     /** 11: 56(px/rem/pt) */
     11: 56;
 }>;
-declare const spacing: Spacing$1;
+declare const spacing: Spacing;
 
-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;
-}>;
-
-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;
+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 FontWeight = {
-  regular: 400;
-  bold: 700;
+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;
+    elevation: ElevationWithColorModes;
+    spacing: Spacing;
+    typography: TypographyWithPlatforms;
 };
 
-/**
- * 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 const paymentTheme: ThemeTokens;
+
+declare const bankingTheme: ThemeTokens;
 
-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;
+declare type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends Record<number | string, unknown> ? DeepPartial<T[P]> : T[P];
 };
 
-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)
+declare type OverrideTheme = {
+    /**
+     * base tokens
      */
-    1100: number;
-    /** desktop: 104(px/rem/pt)
-     *
-     * mobile: 72(px/rem/pt)
+    baseThemeTokens: ThemeTokens;
+    /**
+     * partial theme tokens
      */
-    1500: number;
-  };
-  // letterSpacings: {};
+    overrides: DeepPartial<ThemeTokens>;
 };
-
-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
+ * @description
  *
- * {@link ../../components/Box/BaseBox/types/spacingTypes.ts}
+ * `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} />
+ * ```
  */
-
-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 */
+declare const overrideTheme: ({ baseThemeTokens, overrides }: OverrideTheme) => ThemeTokens;
 
 /**
  * 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 = '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<
-    Options[Name],
-    'platform-web'
-  >;
-
-  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;
+declare type Brand<Type, Name extends string> = Type & {
+    __brand__?: Name;
 };
+declare type NativeOrWebBrand = Brand<any, 'native' | 'web'>;
 
-type EasingFactoryFn$1 = { factory: () => (value: number) => number }; // similar to EasingFactoryFn of `react-native-reanimated`
-type EasingType$1<Value extends string> = Platform.Select<{
-  web: Value;
-  native: EasingFactoryFn$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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` 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 `EasingFactoryFn` 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;
+declare namespace Platform {
+    type Name = 'web';
     /**
-     * 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>;
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
+     * Right now, the module resolution is set to resolve `.web` files,
+     *
+     * Thus Platform.Select<> type will return the `web` type
+     */
+    type Select<Options extends {
+        web: unknown;
+        native: unknown;
+    }> = Brand<Options[Name], 'platform-web'>;
+    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 DotNotationMotionStringToken<TokenType> = {
-  [K in keyof TokenType]: `${Extract<K, string>}.${TokenType[K] extends Record<
-    string,
-    string | EasingFactoryFn$1
-  >
-    ? Extract<keyof TokenType[K], string | EasingFactoryFn$1>
-    : DotNotationMotionStringToken<TokenType[K]>}`;
+declare type DotNotationMotionStringToken<TokenType> = {
+    [K in keyof TokenType]: `${Extract<K, string>}.${TokenType[K] extends Record<string, string | EasingFactoryFn> ? Extract<keyof TokenType[K], string | EasingFactoryFn> : 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
@@ -964,7 +629,7 @@ type DotNotationMotionStringToken<TokenType> = {
  * Related TS Issue - https://github.com/microsoft/TypeScript/issues/29729
  *
  */
-type StringWithAutocomplete = string & Record<never, never>;
+declare type StringWithAutocomplete = string & Record<never, never>;
 
 declare type Duration = {
     /** `70` milliseconds */
@@ -1143,119 +808,6 @@ declare const size: {
 };
 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;
@@ -1281,46 +833,4 @@ 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, EasingFactoryFn, 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 };
+export { Border, Breakpoints, Color, ColorSchemeNames, ColorSchemeNamesInput, ColorsWithModes, DelayString, DurationString, EasingFactoryFn, EasingString, Elevation, ElevationWithColorModes, FontFamily, FontSize, Motion, Opacity, Size, Spacing, ThemeTokens, Typography, TypographyPlatforms, TypographyWithPlatforms, bankingTheme, border, breakpoints, colors, elevation, motion, opacity, overrideTheme, paymentTheme, size, spacing, typography };