@razorpay/blade 6.4.0 → 6.5.1

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

@@ -1,8 +1,11 @@
 /// <reference types="react" />
+/// <reference types="styled-components-react-native" />
+/// <reference types="~src/@types/globals" />
 import * as React$1 from 'react';
 import React__default, { ReactChild, ReactElement, ReactNode, SyntheticEvent, KeyboardEvent } from 'react';
-import { AccessibilityRole, ImageSourcePropType, View, GestureResponderEvent } from 'react-native';
+import * as styled_components from 'styled-components';
 import { CSSObject } from 'styled-components';
+import { AccessibilityRole, ImageSourcePropType, View, GestureResponderEvent } from 'react-native';
 
 type BorderRadius = Readonly<{
   /** none: 0(px/rem/pt) */
@@ -34,18 +37,73 @@ type Border = Readonly<{
 }>;
 
 type Breakpoints = Readonly<{
-  /** max width: 320px  */
+  /**
+   * `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;
-  /** min width: 321px and max width: 480px */
+  /**
+   * `@media screen and (min-width: 480px)`
+   *
+   * Mobiles and Small Tablets
+   */
   s: number;
-  /** min width: 481px and max width: 768px */
+  /**
+   * `@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;
-  /** min width: 769 and max width: 1024px */
+  /**
+   * `@media screen and (min-width: 1024px)`
+   *
+   * Desktop
+   */
   l: number;
-  /** min width: 1025 and max width: 1200px */
+  /**
+   * `@media screen and (min-width: 1200px)`
+   *
+   * HD Desktop
+   */
   xl: number;
-  /** min width: 1201px  */
-  max: number;
 }>;
 
 type FontFamily = {
@@ -200,6 +258,12 @@ type TypographyPlatforms$1 = 'onDesktop' | 'onMobile';
 
 type TypographyWithPlatforms = Record<TypographyPlatforms$1, 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;
@@ -848,6 +912,8 @@ type DotNotationColorStringToken<TokenType> = {
     : DotNotationColorStringToken<TokenType[K]>}`;
 }[keyof TokenType];
 
+type DotNotationSpacingStringToken = `spacing.${keyof Spacing}`;
+
 /**
  * Use this when you want children to be string.
  *
@@ -870,7 +936,7 @@ type DotNotationColorStringToken<TokenType> = {
  */
 type StringChildrenType = React__default.ReactText | React__default.ReactText[];
 
-type TestID = {
+type TestID$1 = {
   testID?: string;
 };
 
@@ -880,7 +946,7 @@ declare type ActionListProps = {
      * Decides the backgroundColor of ActionList
      */
     surfaceLevel?: 2 | 3;
-} & TestID;
+} & TestID$1;
 /**
  * ### ActionList
  *
@@ -941,6 +1007,362 @@ type Theme$1 = {
   typography: Typography;
 };
 
+/**
+ * Returns the value or the responsive object with that value
+ *
+ * ## Usage
+ *
+ * Example if you pass string argument, return type will be string or responsive object with string value
+ *
+ * `MakeValueResponsive<string>`
+ * ```ts
+ * string |
+ * {
+ *  base?: string;
+ *  xs?: string;
+ *  s?: string;
+ *  // ... other breakpoints
+ * }
+ * ```
+ *
+ */
+type MakeValueResponsive$1<T> =
+  | T
+  | {
+      // Using this instead of Record to maintain the jsdoc from breakpoints.ts
+      [P in keyof Breakpoints]?: T;
+    };
+
+/**
+ * Turns all the values in object into responsive object.
+ *
+ * ```ts
+ * MakeObjectResponsive<{ hello: string}>
+ *
+ * // Outputs:
+ * {
+ *  hello: string | {
+ *   base?: string;
+ *   xs?: string;
+ *   s?: string;
+ *   // ... other breakpoints
+ *  }
+ * }
+ * ```
+ */
+type MakeObjectResponsive$1<T> = { [P in keyof T]: MakeValueResponsive$1<T[P]> };
+
+type ArrayOfMaxLength4$1<T> = readonly [T?, T?, T?, T?];
+type SpaceUnits$1 = Platform.Select<{
+  web: 'px' | '%' | 'fr' | 'rem' | 'em' | 'vh' | 'vw';
+  native: 'px' | '%';
+}>;
+type SpacingValueType$1 = DotNotationSpacingStringToken | `${string}${SpaceUnits$1}` | 'auto';
+
+type MarginProps$1 = MakeObjectResponsive$1<{
+  /**
+   * ### Margin Shorthand
+   *
+   * #### Usage
+   *
+   * ```jsx
+   * margin="spacing.3"
+   * margin="20px"
+   * margin={["spacing.3", "spacing.1", "spacing.0", "10px"]}
+   * ```
+   *
+   * ---
+   * #### Spacing to Pixel values
+   *
+   * - `spacing.0` - 0px
+   * - `spacing.1` - 2px
+   * - `spacing.2` - 4px
+   * - `spacing.3` - 8px
+   * - `spacing.4` - 12px
+   * - `spacing.5` - 16px
+   * - `spacing.6` - 20px
+   * - `spacing.7` - 24px
+   * - `spacing.8` - 32px
+   * - `spacing.9` - 40px
+   * - `spacing.10` - 48px
+   * - `spacing.11` - 56px
+   *
+   * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+   *
+   */
+  margin: SpacingValueType$1 | ArrayOfMaxLength4$1<SpacingValueType$1>;
+  /**
+   * ### Margin Horizontal
+   *
+   * #### Usage
+   *
+   * ```jsx
+   * marginX="spacing.3"
+   * marginX="20px"
+   * ```
+   *
+   * ---
+   * #### Spacing to Pixel values
+   *
+   * - `spacing.0` - 0px
+   * - `spacing.1` - 2px
+   * - `spacing.2` - 4px
+   * - `spacing.3` - 8px
+   * - `spacing.4` - 12px
+   * - `spacing.5` - 16px
+   * - `spacing.6` - 20px
+   * - `spacing.7` - 24px
+   * - `spacing.8` - 32px
+   * - `spacing.9` - 40px
+   * - `spacing.10` - 48px
+   * - `spacing.11` - 56px
+   *
+   * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+   *
+   */
+  marginX: SpacingValueType$1;
+  /**
+   * ### Margin Vertical
+   *
+   * #### Usage
+   *
+   * ```jsx
+   * marginY="spacing.3"
+   * marginY="20px"
+   * ```
+   *
+   * ---
+   * #### Spacing to Pixel values
+   *
+   * - `spacing.0` - 0px
+   * - `spacing.1` - 2px
+   * - `spacing.2` - 4px
+   * - `spacing.3` - 8px
+   * - `spacing.4` - 12px
+   * - `spacing.5` - 16px
+   * - `spacing.6` - 20px
+   * - `spacing.7` - 24px
+   * - `spacing.8` - 32px
+   * - `spacing.9` - 40px
+   * - `spacing.10` - 48px
+   * - `spacing.11` - 56px
+   *
+   * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+   *
+   */
+  marginY: SpacingValueType$1;
+  /**
+   * ### Margin Top
+   *
+   * #### Usage
+   *
+   * ```jsx
+   * marginTop="spacing.3"
+   * marginTop="20px"
+   * ```
+   *
+   * ---
+   * #### Spacing to Pixel values
+   *
+   * - `spacing.0` - 0px
+   * - `spacing.1` - 2px
+   * - `spacing.2` - 4px
+   * - `spacing.3` - 8px
+   * - `spacing.4` - 12px
+   * - `spacing.5` - 16px
+   * - `spacing.6` - 20px
+   * - `spacing.7` - 24px
+   * - `spacing.8` - 32px
+   * - `spacing.9` - 40px
+   * - `spacing.10` - 48px
+   * - `spacing.11` - 56px
+   *
+   * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+   */
+  marginTop: SpacingValueType$1;
+  /**
+   * ### Margin Right
+   *
+   * #### Usage
+   *
+   * ```jsx
+   * marginRight="spacing.3"
+   * marginRight="20px"
+   * ```
+   *
+   * ---
+   * #### Spacing to Pixel values
+   *
+   * - `spacing.0` - 0px
+   * - `spacing.1` - 2px
+   * - `spacing.2` - 4px
+   * - `spacing.3` - 8px
+   * - `spacing.4` - 12px
+   * - `spacing.5` - 16px
+   * - `spacing.6` - 20px
+   * - `spacing.7` - 24px
+   * - `spacing.8` - 32px
+   * - `spacing.9` - 40px
+   * - `spacing.10` - 48px
+   * - `spacing.11` - 56px
+   *
+   * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+   */
+  marginRight: SpacingValueType$1;
+  /**
+   * ### Margin Bottom
+   *
+   * #### Usage
+   *
+   * ```jsx
+   * marginBottom="spacing.3"
+   * marginBottom="20px"
+   * ```
+   *
+   * ---
+   * #### Spacing to Pixel values
+   *
+   * - `spacing.0` - 0px
+   * - `spacing.1` - 2px
+   * - `spacing.2` - 4px
+   * - `spacing.3` - 8px
+   * - `spacing.4` - 12px
+   * - `spacing.5` - 16px
+   * - `spacing.6` - 20px
+   * - `spacing.7` - 24px
+   * - `spacing.8` - 32px
+   * - `spacing.9` - 40px
+   * - `spacing.10` - 48px
+   * - `spacing.11` - 56px
+   *
+   * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+   */
+  marginBottom: SpacingValueType$1;
+  /**
+   * ### Margin Left
+   *
+   * #### Usage
+   *
+   * ```jsx
+   * marginLeft="spacing.3"
+   * marginLeft="20px"
+   * ```
+   *
+   * ---
+   * #### Spacing to Pixel values
+   *
+   * - `spacing.0` - 0px
+   * - `spacing.1` - 2px
+   * - `spacing.2` - 4px
+   * - `spacing.3` - 8px
+   * - `spacing.4` - 12px
+   * - `spacing.5` - 16px
+   * - `spacing.6` - 20px
+   * - `spacing.7` - 24px
+   * - `spacing.8` - 32px
+   * - `spacing.9` - 40px
+   * - `spacing.10` - 48px
+   * - `spacing.11` - 56px
+   *
+   * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+   */
+  marginLeft: SpacingValueType$1;
+}>;
+
+type MakeObjectWebOnly$1<T> = {
+  [P in keyof T]: Platform.Select<{ web: T[P]; native: never }>;
+};
+
+type FlexboxProps$1 = MakeObjectResponsive$1<
+  {
+    /**
+     * This uses the native gap property which might not work on older browsers.
+     * If you want to support older browsers, you might want to use `margin` instead.
+     *
+     * @see https://caniuse.com/?search=gap
+     */
+    gap: SpacingValueType$1;
+    /**
+     * This uses the native row-gap property which might not work on older browsers.
+     * If you want to support older browsers, you might want to use `margin` instead.
+     *
+     * @see https://caniuse.com/?search=row-gap
+     */
+    rowGap: SpacingValueType$1;
+    /**
+     * This uses the native column-gap property which might not work on older browsers.
+     * If you want to support older browsers, you might want to use `margin` instead.
+     *
+     * @see https://caniuse.com/?search=column-gap
+     */
+    columnGap: SpacingValueType$1;
+  } & Pick<
+    CSSObject,
+    | 'flex'
+    | 'flexWrap'
+    | 'flexDirection'
+    | 'flexGrow'
+    | 'flexShrink'
+    | 'flexBasis'
+    | 'alignItems'
+    | 'alignContent'
+    | 'alignSelf'
+    | 'justifyItems'
+    | 'justifyContent'
+    | 'justifySelf'
+    | 'placeSelf'
+    | 'order'
+  >
+>;
+
+type PositionProps$1 = MakeObjectResponsive$1<
+  {
+    top: SpacingValueType$1;
+    right: SpacingValueType$1;
+    bottom: SpacingValueType$1;
+    left: SpacingValueType$1;
+  } & Pick<CSSObject, 'position' | 'zIndex'>
+>;
+
+type GridProps$1 = MakeObjectWebOnly$1<
+  MakeObjectResponsive$1<
+    Pick<
+      CSSObject,
+      | 'grid'
+      | 'gridColumn'
+      | 'gridRow'
+      | 'gridRowStart'
+      | 'gridRowEnd'
+      | 'gridColumnStart'
+      | 'gridColumnEnd'
+      | 'gridArea'
+      | 'gridAutoFlow'
+      | 'gridAutoRows'
+      | 'gridAutoColumns'
+      | 'gridTemplate'
+      | 'gridTemplateAreas'
+      | 'gridTemplateColumns'
+      | 'gridTemplateRows'
+    >
+  >
+>;
+
+type StyledPropsBlade = Partial<
+  MarginProps$1 &
+    Pick<FlexboxProps$1, 'alignSelf' | 'justifySelf' | 'placeSelf' | 'order'> &
+    PositionProps$1 &
+    Pick<
+      GridProps$1,
+      | 'gridColumn'
+      | 'gridRow'
+      | 'gridRowStart'
+      | 'gridRowEnd'
+      | 'gridColumnStart'
+      | 'gridColumnEnd'
+      | 'gridArea'
+    >
+>;
+
 type FeedbackIconColors$1 = `feedback.icon.${DotNotationColorStringToken<
   Theme$1['colors']['feedback']['icon']
 >}`;
@@ -979,7 +1401,7 @@ type IconProps$1 = {
     | BadgeIconColors$1
     | 'currentColor'; // currentColor is useful for letting the SVG inherit color property from its container
   size: IconSize$1;
-};
+} & StyledPropsBlade;
 type IconComponent$1 = React.ComponentType<IconProps$1>;
 
 declare type ActionListItemProps = {
@@ -1023,7 +1445,7 @@ declare type ActionListItemProps = {
      * @private
      */
     _index?: number;
-} & TestID;
+} & TestID$1;
 declare const ActionListSectionDivider: () => JSX.Element;
 declare type ActionListSectionProps = {
     title: string;
@@ -1036,7 +1458,7 @@ declare type ActionListSectionProps = {
      * @private
      */
     _hideDivider?: boolean;
-} & TestID;
+} & TestID$1;
 declare const ActionListSection: WithComponentId<ActionListSectionProps>;
 declare const ActionListItemIcon: WithComponentId<{
     icon: IconComponent$1;
@@ -1072,7 +1494,7 @@ declare type ActionListHeaderProps = {
      * Valid children - `ActionListHeaderIcon`
      */
     leading?: React__default.ReactNode;
-} & TestID;
+} & TestID$1;
 /**
  * ### ActionListHeader
  *
@@ -1111,7 +1533,7 @@ declare type ActionListFooterProps = {
      * Anything can be passed here but maybe don't? Should ideally have Button or Tick Icon Buttons.
      */
     trailing?: React__default.ReactNode;
-} & TestID;
+} & TestID$1;
 /**
  * ### ActionListFooter
  *
@@ -1225,8 +1647,8 @@ declare type AlertProps = {
          */
         secondary?: SecondaryAction;
     };
-} & TestID;
-declare const Alert: ({ description, title, isDismissible, onDismiss, contrast, isFullWidth, intent, actions, testID, }: AlertProps) => ReactElement | null;
+} & TestID$1 & StyledPropsBlade;
+declare const Alert: ({ description, title, isDismissible, onDismiss, contrast, isFullWidth, intent, actions, testID, ...styledProps }: AlertProps) => ReactElement | null;
 
 declare type BadgeProps = {
     /**
@@ -1264,8 +1686,8 @@ declare type BadgeProps = {
      * @default 'regular'
      */
     fontWeight?: 'regular' | 'bold';
-} & TestID;
-declare const Badge: ({ children, contrast, fontWeight, icon, size, variant, testID, }: BadgeProps) => ReactElement;
+} & TestID$1 & StyledPropsBlade;
+declare const Badge: ({ children, contrast, fontWeight, icon, size, variant, testID, ...styledProps }: BadgeProps) => ReactElement;
 
 declare type BladeProviderProps = {
     themeTokens: ThemeTokens;
@@ -1302,6 +1724,579 @@ declare type Theme = {
     typography: Typography;
 };
 
+/**
+ * Returns the value or the responsive object with that value
+ *
+ * ## Usage
+ *
+ * Example if you pass string argument, return type will be string or responsive object with string value
+ *
+ * `MakeValueResponsive<string>`
+ * ```ts
+ * string |
+ * {
+ *  base?: string;
+ *  xs?: string;
+ *  s?: string;
+ *  // ... other breakpoints
+ * }
+ * ```
+ *
+ */
+declare type MakeValueResponsive<T> = T | {
+    [P in keyof Breakpoints]?: T;
+};
+/**
+ * Turns all the values in object into responsive object.
+ *
+ * ```ts
+ * MakeObjectResponsive<{ hello: string}>
+ *
+ * // Outputs:
+ * {
+ *  hello: string | {
+ *   base?: string;
+ *   xs?: string;
+ *   s?: string;
+ *   // ... other breakpoints
+ *  }
+ * }
+ * ```
+ */
+declare type MakeObjectResponsive<T> = {
+    [P in keyof T]: MakeValueResponsive<T[P]>;
+};
+
+declare type ArrayOfMaxLength4<T> = readonly [T?, T?, T?, T?];
+declare type SpaceUnits = Platform.Select<{
+    web: 'px' | '%' | 'fr' | 'rem' | 'em' | 'vh' | 'vw';
+    native: 'px' | '%';
+}>;
+declare type SpacingValueType = DotNotationSpacingStringToken | `${string}${SpaceUnits}` | 'auto';
+/**
+ * @IMPORTANT
+ *
+ * I wish there was better way to re-use jsdoc but I checked and there isn't so we have to explicitly add docs to each prop.
+ *
+ * When you want to change a specific token value, you can select the entire block of spacing value mapping and do find and replace on it
+ *
+ * Checkout example of find and replace query-
+ * {@link https://user-images.githubusercontent.com/30949385/221802507-40c7adbc-484a-47b3-9035-ae1e97080b51.png}
+ *
+ */
+declare type PaddingProps = MakeObjectResponsive<{
+    /**
+     * ### Padding Shorthand
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * padding="spacing.3"
+     * padding="20px"
+     * padding={["spacing.3", "spacing.1", "spacing.0", "10px"]}
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+     *
+     */
+    padding: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
+    /**
+     * ### Padding Horizontal
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * paddingX="spacing.3"
+     * paddingX="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+     *
+     */
+    paddingX: SpacingValueType;
+    /**
+     * ### Padding Vertical
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * paddingY="spacing.3"
+     * paddingY="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+     *
+     */
+    paddingY: SpacingValueType;
+    /**
+     * ### Padding Top
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * paddingTop="spacing.3"
+     * paddingTop="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+     */
+    paddingTop: SpacingValueType;
+    /**
+     * ### Padding Right
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * paddingRight="spacing.3"
+     * paddingRight="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+     */
+    paddingRight: SpacingValueType;
+    /**
+     * ### Padding Bottom
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * paddingBottom="spacing.3"
+     * paddingBottom="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+     */
+    paddingBottom: SpacingValueType;
+    /**
+     * ### Padding Left
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * paddingLeft="spacing.3"
+     * paddingLeft="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+     */
+    paddingLeft: SpacingValueType;
+}>;
+declare type MarginProps = MakeObjectResponsive<{
+    /**
+     * ### Margin Shorthand
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * margin="spacing.3"
+     * margin="20px"
+     * margin={["spacing.3", "spacing.1", "spacing.0", "10px"]}
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+     *
+     */
+    margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
+    /**
+     * ### Margin Horizontal
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * marginX="spacing.3"
+     * marginX="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+     *
+     */
+    marginX: SpacingValueType;
+    /**
+     * ### Margin Vertical
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * marginY="spacing.3"
+     * marginY="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+     *
+     */
+    marginY: SpacingValueType;
+    /**
+     * ### Margin Top
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * marginTop="spacing.3"
+     * marginTop="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+     */
+    marginTop: SpacingValueType;
+    /**
+     * ### Margin Right
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * marginRight="spacing.3"
+     * marginRight="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+     */
+    marginRight: SpacingValueType;
+    /**
+     * ### Margin Bottom
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * marginBottom="spacing.3"
+     * marginBottom="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+     */
+    marginBottom: SpacingValueType;
+    /**
+     * ### Margin Left
+     *
+     * #### Usage
+     *
+     * ```jsx
+     * marginLeft="spacing.3"
+     * marginLeft="20px"
+     * ```
+     *
+     * ---
+     * #### Spacing to Pixel values
+     *
+     * - `spacing.0` - 0px
+     * - `spacing.1` - 2px
+     * - `spacing.2` - 4px
+     * - `spacing.3` - 8px
+     * - `spacing.4` - 12px
+     * - `spacing.5` - 16px
+     * - `spacing.6` - 20px
+     * - `spacing.7` - 24px
+     * - `spacing.8` - 32px
+     * - `spacing.9` - 40px
+     * - `spacing.10` - 48px
+     * - `spacing.11` - 56px
+     *
+     * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--page&globals=measureEnabled:false Spacing Token Ref}
+     */
+    marginLeft: SpacingValueType;
+}>;
+
+declare type MakeObjectWebOnly<T> = {
+    [P in keyof T]: Platform.Select<{
+        web: T[P];
+        native: never;
+    }>;
+};
+declare type LayoutProps = MakeObjectResponsive<{
+    height: SpacingValueType;
+    minHeight: SpacingValueType;
+    maxHeight: SpacingValueType;
+    width: SpacingValueType;
+    minWidth: SpacingValueType;
+    maxWidth: SpacingValueType;
+} & Pick<CSSObject, 'display' | 'overflow' | 'overflowX' | 'overflowY'>>;
+declare type FlexboxProps = MakeObjectResponsive<{
+    /**
+     * This uses the native gap property which might not work on older browsers.
+     * If you want to support older browsers, you might want to use `margin` instead.
+     *
+     * @see https://caniuse.com/?search=gap
+     */
+    gap: SpacingValueType;
+    /**
+     * This uses the native row-gap property which might not work on older browsers.
+     * If you want to support older browsers, you might want to use `margin` instead.
+     *
+     * @see https://caniuse.com/?search=row-gap
+     */
+    rowGap: SpacingValueType;
+    /**
+     * This uses the native column-gap property which might not work on older browsers.
+     * If you want to support older browsers, you might want to use `margin` instead.
+     *
+     * @see https://caniuse.com/?search=column-gap
+     */
+    columnGap: SpacingValueType;
+} & Pick<CSSObject, 'flex' | 'flexWrap' | 'flexDirection' | 'flexGrow' | 'flexShrink' | 'flexBasis' | 'alignItems' | 'alignContent' | 'alignSelf' | 'justifyItems' | 'justifyContent' | 'justifySelf' | 'placeSelf' | 'order'>>;
+declare type PositionProps = MakeObjectResponsive<{
+    top: SpacingValueType;
+    right: SpacingValueType;
+    bottom: SpacingValueType;
+    left: SpacingValueType;
+} & Pick<CSSObject, 'position' | 'zIndex'>>;
+declare type GridProps = MakeObjectWebOnly<MakeObjectResponsive<Pick<CSSObject, 'grid' | 'gridColumn' | 'gridRow' | 'gridRowStart' | 'gridRowEnd' | 'gridColumnStart' | 'gridColumnEnd' | 'gridArea' | 'gridAutoFlow' | 'gridAutoRows' | 'gridAutoColumns' | 'gridTemplate' | 'gridTemplateAreas' | 'gridTemplateColumns' | 'gridTemplateRows'>>>;
+declare type ColorObjects = 'feedback' | 'surface' | 'action';
+declare type BackgroundColorString<T extends ColorObjects> = `${T}.background.${DotNotationColorStringToken<Theme$1['colors'][T]['background']>}`;
+declare const validBoxAsValues: readonly ["div", "section", "footer", "header", "main", "aside", "nav", "span"];
+declare type BoxAsType = typeof validBoxAsValues[number];
+declare type BoxVisualProps = MakeObjectResponsive<{
+    backgroundColor: BackgroundColorString<'surface'>;
+}> & {
+    as: BoxAsType;
+};
+declare type BoxProps = Partial<PaddingProps & MarginProps & LayoutProps & FlexboxProps & PositionProps & GridProps & BoxVisualProps & {
+    children?: React.ReactNode | React.ReactNode[];
+} & TestID$1>;
+
+/**
+ * ## Box
+ *
+ * Box is the basic Layout component.
+ *
+ *
+ * Box components supports most spacing CSS properties like `display`, `padding*`, `flex*`, `height`, `width`, etc.
+ *
+ *  Check out {@linkcode BoxProps BoxPropsType} for complete list of props and [Layout RFC](https://github.com/razorpay/blade/blob/master/rfcs/2023-01-06-layout.md) for more details on API decision.
+ *
+ * ----
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * <Box display="flex">
+ * ```
+
+ * #### Responsive Props
+ *
+ * ```jsx
+ * <Box padding={{ base: 'spacing.3', m: 'spacing.10' }} />
+ * ```
+ *
+ * #### Margin and Padding Shorthands
+ *
+ * ```jsx
+ * <Box padding={["spacing.3", "spacing.10"]} />
+ * ```
+ *
+ * ---
+ *
+ * Checkout {@link https://blade.razorpay.com/?path=/docs/components-box Box Documentation}
+ *
+ */
+declare const Box: (props: BoxProps) => JSX.Element;
+
 declare const ComponentIds: {
     CardHeader: string;
     CardHeaderTrailing: string;
@@ -1337,11 +2332,11 @@ declare type CardProps = {
      * - Figma: https://shorturl.at/fsvwK
      */
     surfaceLevel?: 2 | 3;
-} & TestID;
-declare const Card: ({ children, surfaceLevel, testID }: CardProps) => React__default.ReactElement;
+} & TestID$1 & StyledPropsBlade;
+declare const Card: ({ children, surfaceLevel, testID, ...styledProps }: CardProps) => React__default.ReactElement;
 declare type CardBodyProps = {
     children: React__default.ReactNode;
-} & TestID;
+} & TestID$1;
 declare const CardBody: WithComponentId<CardBodyProps>;
 
 declare type LinkCommonProps = {
@@ -1359,7 +2354,7 @@ declare type LinkCommonProps = {
      * @default medium
      */
     size?: 'small' | 'medium';
-} & TestID;
+} & TestID$1 & StyledPropsBlade;
 declare type LinkWithoutIconProps = LinkCommonProps & {
     icon?: undefined;
     children: StringChildrenType;
@@ -1384,7 +2379,7 @@ declare type LinkButtonVariantProps = LinkPropsWithOrWithoutIcon & {
     rel?: undefined;
 };
 declare type LinkProps = LinkAnchorVariantProps | LinkButtonVariantProps;
-declare const Link: ({ children, icon, iconPosition, isDisabled, onClick, variant, href, target, rel, accessibilityLabel, size, testID, }: LinkProps) => ReactElement;
+declare const Link: ({ children, icon, iconPosition, isDisabled, onClick, variant, href, target, rel, accessibilityLabel, size, testID, ...styledProps }: LinkProps) => ReactElement;
 
 type BladeElementRef = Pick<HTMLElement, 'focus' | 'scrollIntoView'> | Pick<View, 'focus'>;
 
@@ -1401,7 +2396,7 @@ declare type ButtonCommonProps = {
         native: (event: GestureResponderEvent) => void;
         web: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
     }>;
-} & TestID;
+} & TestID$1 & StyledPropsBlade;
 declare type ButtonWithoutIconProps = ButtonCommonProps & {
     icon?: undefined;
     children: StringChildrenType;
@@ -1451,7 +2446,8 @@ type BaseTextProps$1 = {
    */
   numberOfLines?: number;
   componentName?: 'text' | 'title' | 'heading' | 'code';
-} & TestID;
+} & TestID$1 &
+  StyledPropsBlade;
 
 /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
 
@@ -1467,7 +2463,8 @@ type TextCommonProps$1 = {
    */
   color?: BaseTextProps$1['color'];
   textAlign?: BaseTextProps$1['textAlign'];
-} & TestID;
+} & TestID$1 &
+  StyledPropsBlade;
 
 type TextVariant$1 = 'body' | 'caption';
 
@@ -1523,7 +2520,8 @@ type CounterProps$1 = {
    * @default 'medium'
    */
   size?: 'small' | 'medium' | 'large';
-} & TestID;
+} & TestID$1 &
+  StyledPropsBlade;
 
 declare const CardHeaderIcon: WithComponentId<{
     icon: IconComponent$1;
@@ -1540,7 +2538,7 @@ declare type CardHeaderIconButtonProps = Omit<ButtonProps, 'variant' | 'size' |
 declare const CardHeaderIconButton: WithComponentId<CardHeaderIconButtonProps>;
 declare type CardHeaderProps = {
     children?: React__default.ReactNode;
-} & TestID;
+} & TestID$1;
 declare const CardHeader: WithComponentId<CardHeaderProps>;
 declare type CardHeaderLeadingProps = {
     title: string;
@@ -1574,7 +2572,7 @@ declare type CardFooterAction = Pick<ButtonProps, 'type' | 'accessibilityLabel'
 };
 declare type CardFooterProps = {
     children?: React__default.ReactNode;
-} & TestID;
+} & TestID$1;
 declare const CardFooter: WithComponentId<CardFooterProps>;
 declare type CardFooterLeadingProps = {
     title?: string;
@@ -1646,8 +2644,8 @@ declare type CounterProps = {
      * @default 'medium'
      */
     size?: 'small' | 'medium' | 'large';
-} & TestID;
-declare const Counter: ({ value, max, intent, contrast, size, testID, }: CounterProps) => React.ReactElement;
+} & TestID$1 & StyledPropsBlade;
+declare const Counter: ({ value, max, intent, contrast, size, testID, ...styledProps }: CounterProps) => React.ReactElement;
 
 declare type OnChange = ({ isChecked, event, value, }: {
     isChecked: boolean;
@@ -1732,7 +2730,7 @@ declare type CheckboxProps = {
      *
      */
     tabIndex?: number;
-} & TestID;
+} & TestID$1 & StyledPropsBlade;
 declare const Checkbox: React__default.ForwardRefExoticComponent<{
     /**
      * If `true`, The checkbox will be checked. This also makes the checkbox controlled
@@ -1811,7 +2809,40 @@ declare const Checkbox: React__default.ForwardRefExoticComponent<{
      *
      */
     tabIndex?: number | undefined;
-} & TestID & React__default.RefAttributes<BladeElementRef>>;
+} & TestID$1 & Partial<MakeObjectResponsive<{
+    margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
+    marginX: SpacingValueType;
+    marginY: SpacingValueType;
+    marginTop: SpacingValueType;
+    marginRight: SpacingValueType;
+    marginBottom: SpacingValueType;
+    marginLeft: SpacingValueType;
+}> & Pick<MakeObjectResponsive<{
+    gap: SpacingValueType;
+    rowGap: SpacingValueType;
+    columnGap: SpacingValueType;
+} & Pick<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "flex" | "placeSelf">>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
+    top: SpacingValueType;
+    right: SpacingValueType;
+    bottom: SpacingValueType;
+    left: SpacingValueType;
+} & Pick<styled_components.CSSObject, "position" | "zIndex">> & Pick<{
+    grid?: undefined;
+    gridAutoColumns?: undefined;
+    gridAutoFlow?: undefined;
+    gridAutoRows?: undefined;
+    gridColumnEnd?: undefined;
+    gridColumnStart?: undefined;
+    gridRowEnd?: undefined;
+    gridRowStart?: undefined;
+    gridTemplateAreas?: undefined;
+    gridTemplateColumns?: undefined;
+    gridTemplateRows?: undefined;
+    gridArea?: undefined;
+    gridColumn?: undefined;
+    gridRow?: undefined;
+    gridTemplate?: undefined;
+}, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">> & React__default.RefAttributes<BladeElementRef>>;
 
 declare type CheckboxGroupProps = {
     /**
@@ -1886,13 +2917,13 @@ declare type CheckboxGroupProps = {
      * @default "medium"
      */
     size?: 'small' | 'medium';
-} & TestID;
-declare const CheckboxGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, }: CheckboxGroupProps) => React__default.ReactElement;
+} & TestID$1 & StyledPropsBlade;
+declare const CheckboxGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, ...styledProps }: CheckboxGroupProps) => React__default.ReactElement;
 
 declare type DropdownProps = {
     selectionType?: 'single' | 'multiple';
     children: React__default.ReactNode[];
-};
+} & StyledPropsBlade;
 /**
  * ### Dropdown component
  *
@@ -1923,7 +2954,7 @@ declare const Dropdown: WithComponentId<DropdownProps>;
 
 declare type DropdownOverlayProps = {
     children: React__default.ReactNode;
-} & TestID;
+} & TestID$1;
 
 /**
  * Overlay of dropdown
@@ -1942,9 +2973,9 @@ declare const ArrowUpRightIcon: IconComponent;
 
 declare const ArrowUpIcon: IconComponent;
 
-declare const Attachment: ({ size, color }: IconProps) => ReactElement;
+declare const Attachment: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
-declare const CheckIcon: ({ size, color }: IconProps) => ReactElement;
+declare const CheckIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
 declare const ChevronDownIcon: IconComponent;
 
@@ -1960,9 +2991,9 @@ declare const CreditCardIcon: IconComponent;
 
 declare const DollarIcon: IconComponent;
 
-declare const DownloadIcon: ({ size, color }: IconProps) => ReactElement;
+declare const DownloadIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
-declare const EditIcon: ({ size, color }: IconProps) => ReactElement;
+declare const EditIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
 declare const EyeIcon: IconComponent;
 
@@ -1970,19 +3001,19 @@ declare const EyeOffIcon: IconComponent;
 
 declare const FileTextIcon: IconComponent;
 
-declare const HistoryIcon: ({ size, color }: IconProps) => ReactElement;
+declare const HistoryIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
 declare const HomeIcon: IconComponent;
 
-declare const InfoIcon: ({ size, color }: IconProps) => ReactElement;
+declare const InfoIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
 declare const LinkIcon: IconComponent;
 
 declare const LockIcon: IconComponent;
 
-declare const PauseIcon: ({ size, color }: IconProps) => ReactElement;
+declare const PauseIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
-declare const PlusIcon: ({ size, color }: IconProps) => ReactElement;
+declare const PlusIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
 declare const RupeeIcon: IconComponent;
 
@@ -1994,15 +3025,15 @@ declare const SlashIcon: IconComponent;
 
 declare const BankIcon: IconComponent;
 
-declare const TrashIcon: ({ size, color }: IconProps) => ReactElement;
+declare const TrashIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
-declare const AlertTriangleIcon$1: ({ size, color }: IconProps) => ReactElement;
+declare const AlertTriangleIcon$1: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
-declare const AlertTriangleIcon: ({ size, color }: IconProps) => ReactElement;
+declare const AlertTriangleIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
-declare const CheckCircleIcon: ({ size, color }: IconProps) => ReactElement;
+declare const CheckCircleIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
-declare const MinusIcon: ({ size, color }: IconProps) => ReactElement;
+declare const MinusIcon: ({ size, color, ...styledProps }: IconProps) => ReactElement;
 
 declare const TrendingUpIcon: IconComponent;
 
@@ -2487,7 +3518,7 @@ declare type IconProps = {
      */
     color: ActionIconColors | SurfaceActionIconColors | FeedbackIconColors | FeedbackActionIconColors | TextIconColors | BadgeIconColors | 'currentColor';
     size: IconSize;
-};
+} & StyledPropsBlade;
 declare type IconComponent = React.ComponentType<IconProps>;
 
 declare type FormInputLabelProps = {
@@ -2741,10 +3772,23 @@ declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
      * sets the autocapitalize behavior for the input
      */
     autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
-} & TestID;
+} & TestID$1 & Platform.Select<{
+    native: {
+        /**
+         * The callback function to be invoked when the value of the input field is submitted.
+         */
+        onSubmit?: FormInputOnEvent;
+    };
+    web: {
+        /**
+         * This is a react-native only prop and has no effect on web.
+         */
+        onSubmit?: undefined;
+    };
+}> & StyledPropsBlade;
 
 declare type Type = Exclude<BaseInputProps['type'], 'password'>;
-declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'value' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'maxCharacters' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'autoCapitalize' | 'testID'> & {
+declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'value' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'maxCharacters' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'onSubmit' | 'autoCapitalize' | 'testID'> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -2767,8 +3811,8 @@ declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | '
      * @default text
      */
     type?: Type;
-};
-declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "label" | "value" | "name" | "onBlur" | "onFocus" | "defaultValue" | "prefix" | "autoCapitalize" | "onChange" | "isDisabled" | "autoFocus" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "suffix" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
+} & StyledPropsBlade;
+declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "label" | "value" | "name" | "onBlur" | "onFocus" | "defaultValue" | "prefix" | "autoCapitalize" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "suffix" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -2791,7 +3835,40 @@ declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInput
      * @default text
      */
     type?: Type;
-} & React__default.RefAttributes<BladeElementRef>>;
+} & Partial<MakeObjectResponsive<{
+    margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
+    marginX: SpacingValueType;
+    marginY: SpacingValueType;
+    marginTop: SpacingValueType;
+    marginRight: SpacingValueType;
+    marginBottom: SpacingValueType;
+    marginLeft: SpacingValueType;
+}> & Pick<MakeObjectResponsive<{
+    gap: SpacingValueType;
+    rowGap: SpacingValueType;
+    columnGap: SpacingValueType;
+} & Pick<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "flex" | "placeSelf">>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
+    top: SpacingValueType;
+    right: SpacingValueType;
+    bottom: SpacingValueType;
+    left: SpacingValueType;
+} & Pick<styled_components.CSSObject, "position" | "zIndex">> & Pick<{
+    grid?: undefined;
+    gridAutoColumns?: undefined;
+    gridAutoFlow?: undefined;
+    gridAutoRows?: undefined;
+    gridColumnEnd?: undefined;
+    gridColumnStart?: undefined;
+    gridRowEnd?: undefined;
+    gridRowStart?: undefined;
+    gridTemplateAreas?: undefined;
+    gridTemplateColumns?: undefined;
+    gridTemplateRows?: undefined;
+    gridArea?: undefined;
+    gridColumn?: undefined;
+    gridRow?: undefined;
+    gridTemplate?: undefined;
+}, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">> & React__default.RefAttributes<BladeElementRef>>;
 
 declare type PasswordInputExtraProps = {
     /**
@@ -2823,10 +3900,43 @@ declare type PasswordInputExtraProps = {
      */
     autoCompleteSuggestionType?: Extract<BaseInputProps['autoCompleteSuggestionType'], 'none' | 'password' | 'newPassword'>;
 };
-declare type PasswordInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'maxCharacters' | 'validationState' | 'errorText' | 'successText' | 'helpText' | 'isDisabled' | 'defaultValue' | 'placeholder' | 'isRequired' | 'value' | 'onChange' | 'onBlur' | 'onFocus' | 'name' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'testID'> & PasswordInputExtraProps;
-declare const PasswordInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "label" | "value" | "name" | "onBlur" | "onFocus" | "defaultValue" | "onChange" | "isDisabled" | "autoFocus" | "labelPosition" | "validationState" | "helpText" | "errorText" | "successText" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & PasswordInputExtraProps & React__default.RefAttributes<BladeElementRef>>;
-
-declare type TextAreaProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'value' | 'isDisabled' | 'isRequired' | 'maxCharacters' | 'autoFocus' | 'numberOfLines' | 'testID'> & {
+declare type PasswordInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'maxCharacters' | 'validationState' | 'errorText' | 'successText' | 'helpText' | 'isDisabled' | 'defaultValue' | 'placeholder' | 'isRequired' | 'value' | 'onChange' | 'onBlur' | 'onSubmit' | 'onFocus' | 'name' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'testID'> & PasswordInputExtraProps & StyledPropsBlade;
+declare const PasswordInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "label" | "value" | "name" | "onBlur" | "onFocus" | "defaultValue" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "validationState" | "helpText" | "errorText" | "successText" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & PasswordInputExtraProps & Partial<MakeObjectResponsive<{
+    margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
+    marginX: SpacingValueType;
+    marginY: SpacingValueType;
+    marginTop: SpacingValueType;
+    marginRight: SpacingValueType;
+    marginBottom: SpacingValueType;
+    marginLeft: SpacingValueType;
+}> & Pick<MakeObjectResponsive<{
+    gap: SpacingValueType;
+    rowGap: SpacingValueType;
+    columnGap: SpacingValueType;
+} & Pick<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "flex" | "placeSelf">>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
+    top: SpacingValueType;
+    right: SpacingValueType;
+    bottom: SpacingValueType;
+    left: SpacingValueType;
+} & Pick<styled_components.CSSObject, "position" | "zIndex">> & Pick<{
+    grid?: undefined;
+    gridAutoColumns?: undefined;
+    gridAutoFlow?: undefined;
+    gridAutoRows?: undefined;
+    gridColumnEnd?: undefined;
+    gridColumnStart?: undefined;
+    gridRowEnd?: undefined;
+    gridRowStart?: undefined;
+    gridTemplateAreas?: undefined;
+    gridTemplateColumns?: undefined;
+    gridTemplateRows?: undefined;
+    gridArea?: undefined;
+    gridColumn?: undefined;
+    gridRow?: undefined;
+    gridTemplate?: undefined;
+}, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">> & React__default.RefAttributes<BladeElementRef>>;
+
+declare type TextAreaProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'onSubmit' | 'value' | 'isDisabled' | 'isRequired' | 'maxCharacters' | 'autoFocus' | 'numberOfLines' | 'testID'> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -2835,8 +3945,8 @@ declare type TextAreaProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'n
      * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
      */
     onClearButtonClick?: () => void;
-};
-declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "label" | "value" | "name" | "onBlur" | "onFocus" | "numberOfLines" | "defaultValue" | "onChange" | "isDisabled" | "autoFocus" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "maxCharacters"> & {
+} & StyledPropsBlade;
+declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "label" | "value" | "name" | "onBlur" | "onFocus" | "numberOfLines" | "defaultValue" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "maxCharacters"> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -2845,7 +3955,40 @@ declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputP
      * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
      */
     onClearButtonClick?: (() => void) | undefined;
-} & React__default.RefAttributes<BladeElementRef>>;
+} & Partial<MakeObjectResponsive<{
+    margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
+    marginX: SpacingValueType;
+    marginY: SpacingValueType;
+    marginTop: SpacingValueType;
+    marginRight: SpacingValueType;
+    marginBottom: SpacingValueType;
+    marginLeft: SpacingValueType;
+}> & Pick<MakeObjectResponsive<{
+    gap: SpacingValueType;
+    rowGap: SpacingValueType;
+    columnGap: SpacingValueType;
+} & Pick<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "flex" | "placeSelf">>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
+    top: SpacingValueType;
+    right: SpacingValueType;
+    bottom: SpacingValueType;
+    left: SpacingValueType;
+} & Pick<styled_components.CSSObject, "position" | "zIndex">> & Pick<{
+    grid?: undefined;
+    gridAutoColumns?: undefined;
+    gridAutoFlow?: undefined;
+    gridAutoRows?: undefined;
+    gridColumnEnd?: undefined;
+    gridColumnStart?: undefined;
+    gridRowEnd?: undefined;
+    gridRowStart?: undefined;
+    gridTemplateAreas?: undefined;
+    gridTemplateColumns?: undefined;
+    gridTemplateRows?: undefined;
+    gridArea?: undefined;
+    gridColumn?: undefined;
+    gridRow?: undefined;
+    gridTemplate?: undefined;
+}, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">> & React__default.RefAttributes<BladeElementRef>>;
 
 declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'onChange' | 'value' | 'isDisabled' | 'autoFocus' | 'keyboardReturnKeyType' | 'keyboardType' | 'placeholder' | 'testID'> & {
     /**
@@ -2875,7 +4018,7 @@ declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'v
      *
      */
     autoCompleteSuggestionType?: Extract<BaseInputProps['autoCompleteSuggestionType'], 'none' | 'oneTimeCode'>;
-};
+} & StyledPropsBlade;
 /**
  * OTPInput component can be used for accepting OTPs sent to users for authentication/verification purposes.
  *
@@ -2890,7 +4033,7 @@ declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'v
  *   />
  * ```
  */
-declare const OTPInput: ({ autoFocus, errorText, helpText, isDisabled, keyboardReturnKeyType, keyboardType, label, labelPosition, name, onChange, onOTPFilled, otpLength, placeholder, successText, validationState, value, isMasked, autoCompleteSuggestionType, testID, }: OTPInputProps) => React__default.ReactElement;
+declare const OTPInput: ({ autoFocus, errorText, helpText, isDisabled, keyboardReturnKeyType, keyboardType, label, labelPosition, name, onChange, onOTPFilled, otpLength, placeholder, successText, validationState, value, isMasked, autoCompleteSuggestionType, testID, ...styledProps }: OTPInputProps) => React__default.ReactElement;
 
 declare type SelectInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'autoFocus' | 'onClick' | 'onFocus' | 'onBlur' | 'placeholder' | 'testID'> & {
     icon?: IconComponent$1;
@@ -2947,7 +4090,7 @@ declare type IndicatorCommonProps = {
      * @default medium
      */
     size?: 'small' | 'medium' | 'large';
-} & TestID;
+} & TestID$1 & StyledPropsBlade;
 declare type IndicatorWithoutA11yLabel = {
     /**
      * A text label to show alongside the indicator dot
@@ -2969,7 +4112,7 @@ declare type IndicatorWithA11yLabel = {
     children?: StringChildrenType;
 };
 declare type IndicatorProps = IndicatorCommonProps & (IndicatorWithA11yLabel | IndicatorWithoutA11yLabel);
-declare const Indicator: ({ accessibilityLabel, children, size, intent, testID, }: IndicatorProps) => ReactElement;
+declare const Indicator: ({ accessibilityLabel, children, size, intent, testID, ...styledProps }: IndicatorProps) => ReactElement;
 
 declare type ListItemProps = {
     /**
@@ -2987,7 +4130,7 @@ declare type ListItemProps = {
      *
      */
     _itemNumber?: undefined;
-} & TestID;
+} & TestID$1;
 declare const ListItem: {
     ({ children, icon, _itemNumber, testID, }: ListItemProps): React__default.ReactElement;
     componentId: string;
@@ -3011,7 +4154,7 @@ declare type ListCommonProps = {
      * @default 'medium'
      */
     size?: 'small' | 'medium';
-} & TestID;
+} & TestID$1 & StyledPropsBlade;
 declare type ListWithIconProps = ListCommonProps & {
     variant?: 'unordered';
     icon?: IconComponent;
@@ -3042,7 +4185,7 @@ declare type ListProps = ListWithIconProps | ListWithoutIconProps;
  * ```
  */
 declare const List: {
-    ({ variant, size, children, icon, testID, }: ListProps): React__default.ReactElement;
+    ({ variant, size, children, icon, testID, ...styledProps }: ListProps): React__default.ReactElement;
     componentId: string;
 };
 
@@ -3057,8 +4200,8 @@ declare type TitleProps = {
     contrast?: ColorContrastTypes;
     type?: TextTypes;
     children: StringChildrenType;
-} & TestID;
-declare const Title: ({ size, type, contrast, children, testID, }: TitleProps) => ReactElement;
+} & TestID$1 & StyledPropsBlade;
+declare const Title: ({ size, type, contrast, children, testID, ...styledProps }: TitleProps) => ReactElement;
 
 declare type HeadingVariant = 'regular' | 'subheading';
 declare type HeadingSize = 'small' | 'medium' | 'large';
@@ -3066,7 +4209,7 @@ declare type HeadingCommonProps = {
     type?: TextTypes;
     contrast?: ColorContrastTypes;
     children: StringChildrenType;
-} & TestID;
+} & TestID$1 & StyledPropsBlade;
 declare type HeadingNormalVariant = HeadingCommonProps & {
     variant?: Exclude<HeadingVariant, 'subheading'>;
     /**
@@ -3093,7 +4236,7 @@ declare type HeadingProps<T> = T extends {
 } ? Variant extends Exclude<HeadingVariant, 'subheading'> ? HeadingNormalVariant : Variant extends 'subheading' ? HeadingSubHeadingVariant : T : T;
 declare const Heading: <T extends {
     variant: HeadingVariant;
-}>({ variant, size, type, weight, contrast, children, testID, }: HeadingProps<T>) => ReactElement;
+}>({ variant, size, type, weight, contrast, children, testID, ...styledProps }: HeadingProps<T>) => ReactElement;
 
 declare type FeedbackColors = `feedback.text.${DotNotationColorStringToken<Theme$1['colors']['feedback']['text']>}`;
 declare type FeedbackActionColors = `feedback.${Feedback}.action.text.${DotNotationColorStringToken<Theme$1['colors']['feedback'][Feedback]['action']['text']>}`;
@@ -3124,7 +4267,7 @@ declare type BaseTextProps = {
      */
     numberOfLines?: number;
     componentName?: 'text' | 'title' | 'heading' | 'code';
-} & TestID;
+} & TestID$1 & StyledPropsBlade;
 
 declare type TextCommonProps = {
     type?: TextTypes;
@@ -3137,7 +4280,7 @@ declare type TextCommonProps = {
      */
     color?: BaseTextProps['color'];
     textAlign?: BaseTextProps['textAlign'];
-} & TestID;
+} & TestID$1 & StyledPropsBlade;
 declare type TextVariant = 'body' | 'caption';
 declare type TextBodyVariant = TextCommonProps & {
     variant?: Extract<TextVariant, 'body'>;
@@ -3159,10 +4302,10 @@ declare type TextForwardedAs = {
 };
 declare const getTextProps: <T extends {
     variant: TextVariant;
-}>({ variant, type, weight, size, contrast, testID, textAlign, }: Pick<TextProps<T>, "testID" | "size" | "variant" | "type" | "weight" | "textAlign" | "contrast">) => Omit<BaseTextProps, 'children'> & TextForwardedAs;
+}>({ variant, type, weight, size, contrast, testID, textAlign, }: Pick<TextProps<T>, "testID" | "textAlign" | "size" | "weight" | "type" | "variant" | "contrast">) => Omit<BaseTextProps, 'children'> & TextForwardedAs;
 declare const Text: <T extends {
     variant: TextVariant;
-}>({ variant, weight, size, type, contrast, truncateAfterLines, children, color, testID, textAlign, }: TextProps<T>) => ReactElement;
+}>({ variant, weight, size, type, contrast, truncateAfterLines, children, color, testID, textAlign, ...styledProps }: TextProps<T>) => ReactElement;
 
 declare type CodeProps = {
     children: StringChildrenType;
@@ -3172,7 +4315,7 @@ declare type CodeProps = {
      * @default small
      */
     size?: 'small' | 'medium';
-} & TestID;
+} & TestID$1 & StyledPropsBlade;
 /**
  * Code component can be used for displaying token, variable names, or inlined code snippets.
  *
@@ -3199,7 +4342,7 @@ declare type CodeProps = {
  * </BaseBox>
  * ```
  */
-declare const Code: ({ children, size, testID }: CodeProps) => JSX.Element;
+declare const Code: ({ children, size, testID, ...styledProps }: CodeProps) => JSX.Element;
 
 declare type ListItemCodeProps = Exclude<CodeProps, 'size'>;
 declare const ListItemCode: {
@@ -3251,7 +4394,7 @@ declare type ProgressBarCommonProps = {
      * @default 100
      */
     max?: number;
-} & TestID;
+} & TestID$1 & StyledPropsBlade;
 declare type ProgressBarVariant = 'progress' | 'meter';
 declare type ProgressBarProgressProps = ProgressBarCommonProps & {
     /**
@@ -3288,7 +4431,7 @@ declare type ProgressBarMeterProps = ProgressBarCommonProps & {
     showPercentage?: undefined;
 };
 declare type ProgressBarProps = ProgressBarProgressProps | ProgressBarMeterProps;
-declare const ProgressBar: ({ accessibilityLabel, contrast, intent, isIndeterminate, label, showPercentage, size, value, variant, min, max, testID, }: ProgressBarProps) => ReactElement;
+declare const ProgressBar: ({ accessibilityLabel, contrast, intent, isIndeterminate, label, showPercentage, size, value, variant, min, max, testID, ...styledProps }: ProgressBarProps) => ReactElement;
 
 declare type RadioProps = {
     /**
@@ -3316,7 +4459,7 @@ declare type RadioProps = {
      * @default "medium"
      */
     size?: 'small' | 'medium';
-} & TestID;
+} & TestID$1 & StyledPropsBlade;
 declare const Radio: React__default.ForwardRefExoticComponent<{
     /**
      * Sets the label text of the Radio
@@ -3343,7 +4486,40 @@ declare const Radio: React__default.ForwardRefExoticComponent<{
      * @default "medium"
      */
     size?: "small" | "medium" | undefined;
-} & TestID & React__default.RefAttributes<BladeElementRef>>;
+} & TestID$1 & Partial<MakeObjectResponsive<{
+    margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
+    marginX: SpacingValueType;
+    marginY: SpacingValueType;
+    marginTop: SpacingValueType;
+    marginRight: SpacingValueType;
+    marginBottom: SpacingValueType;
+    marginLeft: SpacingValueType;
+}> & Pick<MakeObjectResponsive<{
+    gap: SpacingValueType;
+    rowGap: SpacingValueType;
+    columnGap: SpacingValueType;
+} & Pick<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "flex" | "placeSelf">>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
+    top: SpacingValueType;
+    right: SpacingValueType;
+    bottom: SpacingValueType;
+    left: SpacingValueType;
+} & Pick<styled_components.CSSObject, "position" | "zIndex">> & Pick<{
+    grid?: undefined;
+    gridAutoColumns?: undefined;
+    gridAutoFlow?: undefined;
+    gridAutoRows?: undefined;
+    gridColumnEnd?: undefined;
+    gridColumnStart?: undefined;
+    gridRowEnd?: undefined;
+    gridRowStart?: undefined;
+    gridTemplateAreas?: undefined;
+    gridTemplateColumns?: undefined;
+    gridTemplateRows?: undefined;
+    gridArea?: undefined;
+    gridColumn?: undefined;
+    gridRow?: undefined;
+    gridTemplate?: undefined;
+}, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">> & React__default.RefAttributes<BladeElementRef>>;
 
 declare type RadioGroupProps = {
     /**
@@ -3418,8 +4594,8 @@ declare type RadioGroupProps = {
      * @default "medium"
      */
     size?: 'small' | 'medium';
-} & TestID;
-declare const RadioGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, }: RadioGroupProps) => React__default.ReactElement;
+} & TestID$1 & StyledPropsBlade;
+declare const RadioGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, ...styledProps }: RadioGroupProps) => React__default.ReactElement;
 
 declare type BaseSpinnerProps = {
     intent?: Feedback;
@@ -3451,10 +4627,10 @@ declare type BaseSpinnerProps = {
      *
      */
     accessibilityLabel: string;
-} & TestID;
+} & TestID$1 & StyledPropsBlade;
 
 declare type SpinnerProps = Omit<BaseSpinnerProps, 'intent'>;
-declare const Spinner: ({ label, labelPosition, accessibilityLabel, contrast, size, testID, }: SpinnerProps) => React.ReactElement;
+declare const Spinner: ({ label, labelPosition, accessibilityLabel, contrast, size, testID, ...styledProps }: SpinnerProps) => React.ReactElement;
 
 declare type SkipNavLinkProps = {
     id?: string;
@@ -3465,7 +4641,7 @@ declare const SkipNavContent: (_props: SkipNavLinkProps) => never;
 
 declare type VisuallyHiddenProps = {
     children: React.ReactNode;
-} & TestID;
+} & TestID$1;
 
 declare const VisuallyHidden: ({ children, testID }: VisuallyHiddenProps) => JSX.Element;
 
@@ -3475,4 +4651,71 @@ declare const VisuallyHidden: ({ children, testID }: VisuallyHiddenProps) => JSX
  */
 declare const screenReaderStyles: CSSObject;
 
-export { ActionList, ActionListFooter, ActionListFooterIcon, ActionListFooterProps, ActionListHeader, ActionListHeaderIcon, ActionListHeaderProps, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionDivider, ActionListSectionProps, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BoxIcon, BriefcaseIcon, BulkPayoutsIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputProps, OctagonIcon, OffersIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonsIcon, PaymentLinksIcon, PaymentPagesIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RefreshIcon, RepeatIcon, ReportsIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaveIcon, ScissorsIcon, SearchIcon, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SpinnerProps, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, TabletIcon, TagIcon, TargetIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, TitleProps, ToggleLeftIcon, ToggleRightIcon, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
+declare type TestID = {
+    testID?: string;
+};
+
+declare const BaseBox: styled_components.StyledComponent<typeof View, styled_components.DefaultTheme, Omit<Partial<MakeObjectResponsive<{
+    padding: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
+    paddingX: SpacingValueType;
+    paddingY: SpacingValueType;
+    paddingTop: SpacingValueType;
+    paddingRight: SpacingValueType;
+    paddingBottom: SpacingValueType;
+    paddingLeft: SpacingValueType;
+}> & MakeObjectResponsive<{
+    margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
+    marginX: SpacingValueType;
+    marginY: SpacingValueType;
+    marginTop: SpacingValueType;
+    marginRight: SpacingValueType;
+    marginBottom: SpacingValueType;
+    marginLeft: SpacingValueType;
+}> & MakeObjectResponsive<{
+    height: SpacingValueType;
+    minHeight: SpacingValueType;
+    maxHeight: SpacingValueType;
+    width: SpacingValueType;
+    minWidth: SpacingValueType;
+    maxWidth: SpacingValueType;
+} & Pick<styled_components.CSSObject, "display" | "overflow" | "overflowX" | "overflowY">> & MakeObjectResponsive<{
+    gap: SpacingValueType;
+    rowGap: SpacingValueType;
+    columnGap: SpacingValueType;
+} & Pick<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "flex" | "placeSelf">> & MakeObjectResponsive<{
+    top: SpacingValueType;
+    right: SpacingValueType;
+    bottom: SpacingValueType;
+    left: SpacingValueType;
+} & Pick<styled_components.CSSObject, "position" | "zIndex">> & {
+    grid?: undefined;
+    gridAutoColumns?: undefined;
+    gridAutoFlow?: undefined;
+    gridAutoRows?: undefined;
+    gridColumnEnd?: undefined;
+    gridColumnStart?: undefined;
+    gridRowEnd?: undefined;
+    gridRowStart?: undefined;
+    gridTemplateAreas?: undefined;
+    gridTemplateColumns?: undefined;
+    gridTemplateRows?: undefined;
+    gridArea?: undefined;
+    gridColumn?: undefined;
+    gridRow?: undefined;
+    gridTemplate?: undefined;
+} & MakeObjectResponsive<{
+    backgroundColor: "surface.background.level1.lowContrast" | "surface.background.level1.highContrast" | "surface.background.level2.lowContrast" | "surface.background.level2.highContrast" | "surface.background.level3.lowContrast" | "surface.background.level3.highContrast";
+}> & {
+    as: "header" | "main" | "aside" | "div" | "footer" | "nav" | "section" | "span";
+} & {
+    children?: React$1.ReactNode | React$1.ReactNode[];
+} & TestID>, "backgroundColor" | "as"> & Partial<MakeObjectResponsive<{
+    borderRadius: "none" | "small" | "medium" | "large" | "max" | "round";
+    backgroundColor: "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.highContrast" | "surface.background.level1.lowContrast" | "surface.background.level1.highContrast" | "surface.background.level2.lowContrast" | "surface.background.level2.highContrast" | "surface.background.level3.lowContrast" | "surface.background.level3.highContrast" | "action.background.primary.disabled" | "action.background.primary.default" | "action.background.primary.hover" | "action.background.primary.focus" | "action.background.primary.active" | "action.background.secondary.disabled" | "action.background.secondary.default" | "action.background.secondary.hover" | "action.background.secondary.focus" | "action.background.secondary.active" | "action.background.tertiary.disabled" | "action.background.tertiary.default" | "action.background.tertiary.hover" | "action.background.tertiary.focus" | "action.background.tertiary.active" | (string & Record<never, never>);
+    lineHeight: SpacingValueType;
+} & Pick<styled_components.CSSObject, "border" | "transform" | "borderBottom" | "borderLeft" | "borderRight" | "borderTop">> & {
+    className?: string | undefined;
+    id?: string | undefined;
+}>, never>;
+
+export { ActionList, ActionListFooter, ActionListFooterIcon, ActionListFooterProps, ActionListHeader, ActionListHeaderIcon, ActionListHeaderProps, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionDivider, ActionListSectionProps, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, Box, BoxIcon, BoxProps, BriefcaseIcon, BulkPayoutsIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, BaseBox as InternalDontUsePleaseWillBeRemovedSoonBaseBox, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputProps, OctagonIcon, OffersIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonsIcon, PaymentLinksIcon, PaymentPagesIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RefreshIcon, RepeatIcon, ReportsIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaveIcon, ScissorsIcon, SearchIcon, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SpinnerProps, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, TabletIcon, TagIcon, TargetIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, TitleProps, ToggleLeftIcon, ToggleRightIcon, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };