@razorpay/blade 8.7.0 → 8.8.1

package/build/components/index.d.ts

@@ -2,8 +2,8 @@
 import * as React$1 from 'react';
 import React__default, { ReactChild, ReactElement, ReactNode, SyntheticEvent, KeyboardEvent } from 'react';
 import { AccessibilityRole, ViewStyle, View, GestureResponderEvent } from 'react-native';
-import * as styled_components from 'styled-components';
 import { CSSObject } from 'styled-components';
+import * as csstype from 'csstype';
 import { ReactDOMAttributes } from '@use-gesture/react/dist/declarations/src/types';
 
 type BorderRadius = Readonly<{
@@ -984,7 +984,7 @@ type TestID = {
  * native: PickIfExist<ViewStyle, T>;
  * ```
  */
-type PickIfExist$1<T, K extends keyof T> = {
+type PickIfExist<T, K extends keyof T> = {
   [P in K]: P extends keyof T ? T[P] : never;
 };
 
@@ -998,10 +998,10 @@ type PickIfExist$1<T, K extends keyof T> = {
  * // On Native --> This will be just `flex` and `none`
  * ```
  */
-type PickCSSByPlatform$1<T extends keyof React__default.CSSProperties | keyof ViewStyle> = Platform.Select<{
-  web: PickIfExist$1<CSSObject, T>;
+type PickCSSByPlatform<T extends keyof React__default.CSSProperties | keyof ViewStyle> = Platform.Select<{
+  web: PickIfExist<CSSObject, T>;
   // @ts-expect-error: T passed here may not neccessarily exist. We return `never` type when it doesn't
-  native: PickIfExist$1<ViewStyle, T>;
+  native: PickIfExist<ViewStyle, T>;
 }>;
 
 declare type ActionListContextProp = Pick<ActionListProps, 'surfaceLevel'>;
@@ -1073,14 +1073,22 @@ type MakeValueResponsive$1<T> = [T] extends [never]
  * }
  * ```
  */
-type MakeObjectResponsive$1<T> = { [P in keyof T]: MakeValueResponsive$1<T[P]> };
+type MakeObjectResponsive$1<
+  T,
+  // using this workaround to preserve the jsdocs
+  // https://github.com/microsoft/TypeScript/issues/31992
+  K extends keyof T = Extract<keyof T, string>
+> = {
+  [P in K]: 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 SpaceUnits$1 = 'px' | '%' | 'fr' | 'rem' | 'em' | 'vh' | 'vw';
+type SpacingValueType$1 =
+  | DotNotationSpacingStringToken
+  | `${string}${SpaceUnits$1}`
+  | `calc(${string})`
+  | 'auto';
 
 type MarginProps$1 = MakeObjectResponsive$1<{
   /**
@@ -1321,7 +1329,7 @@ type FlexboxProps$1 = MakeObjectResponsive$1<
      * @see https://developer.mozilla.org/docs/Web/CSS/flex
      */
     flex: string | number;
-  } & PickCSSByPlatform$1<
+  } & PickCSSByPlatform<
     | 'flexWrap'
     | 'flexDirection'
     | 'flexGrow'
@@ -1344,11 +1352,11 @@ type PositionProps$1 = MakeObjectResponsive$1<
     right: SpacingValueType$1;
     bottom: SpacingValueType$1;
     left: SpacingValueType$1;
-  } & PickCSSByPlatform$1<'position' | 'zIndex'>
+  } & PickCSSByPlatform<'position' | 'zIndex'>
 >;
 
 type GridProps$1 = MakeObjectResponsive$1<
-  PickCSSByPlatform$1<
+  PickCSSByPlatform<
     | 'grid'
     | 'gridColumn'
     | 'gridRow'
@@ -1725,16 +1733,13 @@ declare type MakeValueResponsive<T> = [T] extends [never] ? never : T | {
  * }
  * ```
  */
-declare type MakeObjectResponsive<T> = {
-    [P in keyof T]: MakeValueResponsive<T[P]>;
+declare type MakeObjectResponsive<T, K extends keyof T = Extract<keyof T, string>> = {
+    [P in K]: 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';
+declare type SpaceUnits = 'px' | '%' | 'fr' | 'rem' | 'em' | 'vh' | 'vw';
+declare type SpacingValueType = DotNotationSpacingStringToken | `${string}${SpaceUnits}` | `calc(${string})` | 'auto';
 /**
  * @IMPORTANT
  *
@@ -2172,7 +2177,7 @@ declare type LayoutProps = MakeObjectResponsive<{
     width: SpacingValueType;
     minWidth: SpacingValueType;
     maxWidth: SpacingValueType;
-} & PickCSSByPlatform$1<'display' | 'overflow' | 'overflowX' | 'overflowY' | 'textAlign'>>;
+} & PickCSSByPlatform<'display' | 'overflow' | 'overflowX' | 'overflowY' | 'textAlign'>>;
 declare type FlexboxProps = MakeObjectResponsive<{
     /**
      * This uses the native gap property which might not work on older browsers.
@@ -2201,14 +2206,14 @@ declare type FlexboxProps = MakeObjectResponsive<{
      * @see https://developer.mozilla.org/docs/Web/CSS/flex
      */
     flex: string | number;
-} & PickCSSByPlatform$1<'flexWrap' | 'flexDirection' | 'flexGrow' | 'flexShrink' | 'flexBasis' | 'alignItems' | 'alignContent' | 'alignSelf' | 'justifyItems' | 'justifyContent' | 'justifySelf' | 'placeSelf' | 'order'>>;
+} & PickCSSByPlatform<'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;
-} & PickCSSByPlatform$1<'position' | 'zIndex'>>;
-declare type GridProps = MakeObjectResponsive<PickCSSByPlatform$1<'grid' | 'gridColumn' | 'gridRow' | 'gridRowStart' | 'gridRowEnd' | 'gridColumnStart' | 'gridColumnEnd' | 'gridArea' | 'gridAutoFlow' | 'gridAutoRows' | 'gridAutoColumns' | 'gridTemplate' | 'gridTemplateAreas' | 'gridTemplateColumns' | 'gridTemplateRows'>>;
+} & PickCSSByPlatform<'position' | 'zIndex'>>;
+declare type GridProps = MakeObjectResponsive<PickCSSByPlatform<'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 type BorderColorString<T extends ColorObjects> = `${T}.border.${DotNotationColorStringToken<Theme$1['colors'][T]['border']>}`;
@@ -2275,46 +2280,435 @@ declare type BoxRefType = Platform.Select<{
     native: View;
 }>;
 
-declare const Box: React__default.ForwardRefExoticComponent<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;
-} & PickIfExist$1<styled_components.CSSObject, "display" | "overflowX" | "overflowY" | "textAlign" | "overflow"> & {
-    __brand__?: "platform-web" | undefined;
-}> & MakeObjectResponsive<{
-    gap: SpacingValueType;
-    rowGap: SpacingValueType;
-    columnGap: SpacingValueType;
-    flex: string | number;
-} & PickIfExist$1<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
-    __brand__?: "platform-web" | undefined;
-}> & MakeObjectResponsive<{
-    top: SpacingValueType;
-    right: SpacingValueType;
-    bottom: SpacingValueType;
-    left: SpacingValueType;
-} & PickIfExist$1<styled_components.CSSObject, "position" | "zIndex"> & {
-    __brand__?: "platform-web" | undefined;
-}> & MakeObjectResponsive<PickCSSByPlatform$1<"grid" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate">> & {
+declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps & MarginProps & {
+    width: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    display?: csstype.Property.Display | {
+        readonly base?: csstype.Property.Display | undefined;
+        readonly xs?: csstype.Property.Display | undefined;
+        readonly s?: csstype.Property.Display | undefined;
+        readonly m?: csstype.Property.Display | undefined;
+        readonly l?: csstype.Property.Display | undefined;
+        readonly xl?: csstype.Property.Display | undefined;
+    } | undefined;
+    height: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    maxHeight: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    maxWidth: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    minHeight: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    minWidth: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    overflowX?: csstype.Property.OverflowX | {
+        readonly base?: csstype.Property.OverflowX | undefined;
+        readonly xs?: csstype.Property.OverflowX | undefined;
+        readonly s?: csstype.Property.OverflowX | undefined;
+        readonly m?: csstype.Property.OverflowX | undefined;
+        readonly l?: csstype.Property.OverflowX | undefined;
+        readonly xl?: csstype.Property.OverflowX | undefined;
+    } | undefined;
+    overflowY?: csstype.Property.OverflowY | {
+        readonly base?: csstype.Property.OverflowY | undefined;
+        readonly xs?: csstype.Property.OverflowY | undefined;
+        readonly s?: csstype.Property.OverflowY | undefined;
+        readonly m?: csstype.Property.OverflowY | undefined;
+        readonly l?: csstype.Property.OverflowY | undefined;
+        readonly xl?: csstype.Property.OverflowY | undefined;
+    } | undefined;
+    textAlign?: csstype.Property.TextAlign | {
+        readonly base?: csstype.Property.TextAlign | undefined;
+        readonly xs?: csstype.Property.TextAlign | undefined;
+        readonly s?: csstype.Property.TextAlign | undefined;
+        readonly m?: csstype.Property.TextAlign | undefined;
+        readonly l?: csstype.Property.TextAlign | undefined;
+        readonly xl?: csstype.Property.TextAlign | undefined;
+    } | undefined;
+    overflow?: csstype.Property.Overflow | {
+        readonly base?: csstype.Property.Overflow | undefined;
+        readonly xs?: csstype.Property.Overflow | undefined;
+        readonly s?: csstype.Property.Overflow | undefined;
+        readonly m?: csstype.Property.Overflow | undefined;
+        readonly l?: csstype.Property.Overflow | undefined;
+        readonly xl?: csstype.Property.Overflow | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+} & {
+    alignContent?: csstype.Property.AlignContent | {
+        readonly base?: csstype.Property.AlignContent | undefined;
+        readonly xs?: csstype.Property.AlignContent | undefined;
+        readonly s?: csstype.Property.AlignContent | undefined;
+        readonly m?: csstype.Property.AlignContent | undefined;
+        readonly l?: csstype.Property.AlignContent | undefined;
+        readonly xl?: csstype.Property.AlignContent | undefined;
+    } | undefined;
+    alignItems?: csstype.Property.AlignItems | {
+        readonly base?: csstype.Property.AlignItems | undefined;
+        readonly xs?: csstype.Property.AlignItems | undefined;
+        readonly s?: csstype.Property.AlignItems | undefined;
+        readonly m?: csstype.Property.AlignItems | undefined;
+        readonly l?: csstype.Property.AlignItems | undefined;
+        readonly xl?: csstype.Property.AlignItems | undefined;
+    } | undefined;
+    alignSelf?: csstype.Property.AlignSelf | {
+        readonly base?: csstype.Property.AlignSelf | undefined;
+        readonly xs?: csstype.Property.AlignSelf | undefined;
+        readonly s?: csstype.Property.AlignSelf | undefined;
+        readonly m?: csstype.Property.AlignSelf | undefined;
+        readonly l?: csstype.Property.AlignSelf | undefined;
+        readonly xl?: csstype.Property.AlignSelf | undefined;
+    } | undefined;
+    columnGap: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    flexBasis?: csstype.Property.FlexBasis<string | number> | {
+        readonly base?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly xs?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly s?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly m?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly l?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly xl?: csstype.Property.FlexBasis<string | number> | undefined;
+    } | undefined;
+    flexDirection?: csstype.Property.FlexDirection | {
+        readonly base?: csstype.Property.FlexDirection | undefined;
+        readonly xs?: csstype.Property.FlexDirection | undefined;
+        readonly s?: csstype.Property.FlexDirection | undefined;
+        readonly m?: csstype.Property.FlexDirection | undefined;
+        readonly l?: csstype.Property.FlexDirection | undefined;
+        readonly xl?: csstype.Property.FlexDirection | undefined;
+    } | undefined;
+    flexGrow?: csstype.Property.FlexGrow | {
+        readonly base?: csstype.Property.FlexGrow | undefined;
+        readonly xs?: csstype.Property.FlexGrow | undefined;
+        readonly s?: csstype.Property.FlexGrow | undefined;
+        readonly m?: csstype.Property.FlexGrow | undefined;
+        readonly l?: csstype.Property.FlexGrow | undefined;
+        readonly xl?: csstype.Property.FlexGrow | undefined;
+    } | undefined;
+    flexShrink?: csstype.Property.FlexShrink | {
+        readonly base?: csstype.Property.FlexShrink | undefined;
+        readonly xs?: csstype.Property.FlexShrink | undefined;
+        readonly s?: csstype.Property.FlexShrink | undefined;
+        readonly m?: csstype.Property.FlexShrink | undefined;
+        readonly l?: csstype.Property.FlexShrink | undefined;
+        readonly xl?: csstype.Property.FlexShrink | undefined;
+    } | undefined;
+    flexWrap?: csstype.Property.FlexWrap | {
+        readonly base?: csstype.Property.FlexWrap | undefined;
+        readonly xs?: csstype.Property.FlexWrap | undefined;
+        readonly s?: csstype.Property.FlexWrap | undefined;
+        readonly m?: csstype.Property.FlexWrap | undefined;
+        readonly l?: csstype.Property.FlexWrap | undefined;
+        readonly xl?: csstype.Property.FlexWrap | undefined;
+    } | undefined;
+    justifyContent?: csstype.Property.JustifyContent | {
+        readonly base?: csstype.Property.JustifyContent | undefined;
+        readonly xs?: csstype.Property.JustifyContent | undefined;
+        readonly s?: csstype.Property.JustifyContent | undefined;
+        readonly m?: csstype.Property.JustifyContent | undefined;
+        readonly l?: csstype.Property.JustifyContent | undefined;
+        readonly xl?: csstype.Property.JustifyContent | undefined;
+    } | undefined;
+    justifyItems?: csstype.Property.JustifyItems | {
+        readonly base?: csstype.Property.JustifyItems | undefined;
+        readonly xs?: csstype.Property.JustifyItems | undefined;
+        readonly s?: csstype.Property.JustifyItems | undefined;
+        readonly m?: csstype.Property.JustifyItems | undefined;
+        readonly l?: csstype.Property.JustifyItems | undefined;
+        readonly xl?: csstype.Property.JustifyItems | undefined;
+    } | undefined;
+    justifySelf?: csstype.Property.JustifySelf | {
+        readonly base?: csstype.Property.JustifySelf | undefined;
+        readonly xs?: csstype.Property.JustifySelf | undefined;
+        readonly s?: csstype.Property.JustifySelf | undefined;
+        readonly m?: csstype.Property.JustifySelf | undefined;
+        readonly l?: csstype.Property.JustifySelf | undefined;
+        readonly xl?: csstype.Property.JustifySelf | undefined;
+    } | undefined;
+    order?: csstype.Property.Order | {
+        readonly base?: csstype.Property.Order | undefined;
+        readonly xs?: csstype.Property.Order | undefined;
+        readonly s?: csstype.Property.Order | undefined;
+        readonly m?: csstype.Property.Order | undefined;
+        readonly l?: csstype.Property.Order | undefined;
+        readonly xl?: csstype.Property.Order | undefined;
+    } | undefined;
+    rowGap: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    flex: string | number | {
+        readonly base?: string | number | undefined;
+        readonly xs?: string | number | undefined;
+        readonly s?: string | number | undefined;
+        readonly m?: string | number | undefined;
+        readonly l?: string | number | undefined;
+        readonly xl?: string | number | undefined;
+    };
+    gap: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    placeSelf?: csstype.Property.PlaceSelf | {
+        readonly base?: csstype.Property.PlaceSelf | undefined;
+        readonly xs?: csstype.Property.PlaceSelf | undefined;
+        readonly s?: csstype.Property.PlaceSelf | undefined;
+        readonly m?: csstype.Property.PlaceSelf | undefined;
+        readonly l?: csstype.Property.PlaceSelf | undefined;
+        readonly xl?: csstype.Property.PlaceSelf | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+} & {
+    bottom: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    left: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    position?: csstype.Property.Position | {
+        readonly base?: csstype.Property.Position | undefined;
+        readonly xs?: csstype.Property.Position | undefined;
+        readonly s?: csstype.Property.Position | undefined;
+        readonly m?: csstype.Property.Position | undefined;
+        readonly l?: csstype.Property.Position | undefined;
+        readonly xl?: csstype.Property.Position | undefined;
+    } | undefined;
+    right: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    top: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    zIndex?: csstype.Property.ZIndex | {
+        readonly base?: csstype.Property.ZIndex | undefined;
+        readonly xs?: csstype.Property.ZIndex | undefined;
+        readonly s?: csstype.Property.ZIndex | undefined;
+        readonly m?: csstype.Property.ZIndex | undefined;
+        readonly l?: csstype.Property.ZIndex | undefined;
+        readonly xl?: csstype.Property.ZIndex | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+} & {
+    grid?: csstype.Property.Grid | {
+        readonly base?: csstype.Property.Grid | undefined;
+        readonly xs?: csstype.Property.Grid | undefined;
+        readonly s?: csstype.Property.Grid | undefined;
+        readonly m?: csstype.Property.Grid | undefined;
+        readonly l?: csstype.Property.Grid | undefined;
+        readonly xl?: csstype.Property.Grid | undefined;
+    } | undefined;
+    gridAutoColumns?: csstype.Property.GridAutoColumns<string | number> | {
+        readonly base?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly xs?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly s?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly m?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly l?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly xl?: csstype.Property.GridAutoColumns<string | number> | undefined;
+    } | undefined;
+    gridAutoFlow?: csstype.Property.GridAutoFlow | {
+        readonly base?: csstype.Property.GridAutoFlow | undefined;
+        readonly xs?: csstype.Property.GridAutoFlow | undefined;
+        readonly s?: csstype.Property.GridAutoFlow | undefined;
+        readonly m?: csstype.Property.GridAutoFlow | undefined;
+        readonly l?: csstype.Property.GridAutoFlow | undefined;
+        readonly xl?: csstype.Property.GridAutoFlow | undefined;
+    } | undefined;
+    gridAutoRows?: csstype.Property.GridAutoRows<string | number> | {
+        readonly base?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly xs?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly s?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly m?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly l?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly xl?: csstype.Property.GridAutoRows<string | number> | undefined;
+    } | undefined;
+    gridColumnEnd?: csstype.Property.GridColumnEnd | {
+        readonly base?: csstype.Property.GridColumnEnd | undefined;
+        readonly xs?: csstype.Property.GridColumnEnd | undefined;
+        readonly s?: csstype.Property.GridColumnEnd | undefined;
+        readonly m?: csstype.Property.GridColumnEnd | undefined;
+        readonly l?: csstype.Property.GridColumnEnd | undefined;
+        readonly xl?: csstype.Property.GridColumnEnd | undefined;
+    } | undefined;
+    gridColumnStart?: csstype.Property.GridColumnStart | {
+        readonly base?: csstype.Property.GridColumnStart | undefined;
+        readonly xs?: csstype.Property.GridColumnStart | undefined;
+        readonly s?: csstype.Property.GridColumnStart | undefined;
+        readonly m?: csstype.Property.GridColumnStart | undefined;
+        readonly l?: csstype.Property.GridColumnStart | undefined;
+        readonly xl?: csstype.Property.GridColumnStart | undefined;
+    } | undefined;
+    gridRowEnd?: csstype.Property.GridRowEnd | {
+        readonly base?: csstype.Property.GridRowEnd | undefined;
+        readonly xs?: csstype.Property.GridRowEnd | undefined;
+        readonly s?: csstype.Property.GridRowEnd | undefined;
+        readonly m?: csstype.Property.GridRowEnd | undefined;
+        readonly l?: csstype.Property.GridRowEnd | undefined;
+        readonly xl?: csstype.Property.GridRowEnd | undefined;
+    } | undefined;
+    gridRowStart?: csstype.Property.GridRowStart | {
+        readonly base?: csstype.Property.GridRowStart | undefined;
+        readonly xs?: csstype.Property.GridRowStart | undefined;
+        readonly s?: csstype.Property.GridRowStart | undefined;
+        readonly m?: csstype.Property.GridRowStart | undefined;
+        readonly l?: csstype.Property.GridRowStart | undefined;
+        readonly xl?: csstype.Property.GridRowStart | undefined;
+    } | undefined;
+    gridTemplateAreas?: csstype.Property.GridTemplateAreas | {
+        readonly base?: csstype.Property.GridTemplateAreas | undefined;
+        readonly xs?: csstype.Property.GridTemplateAreas | undefined;
+        readonly s?: csstype.Property.GridTemplateAreas | undefined;
+        readonly m?: csstype.Property.GridTemplateAreas | undefined;
+        readonly l?: csstype.Property.GridTemplateAreas | undefined;
+        readonly xl?: csstype.Property.GridTemplateAreas | undefined;
+    } | undefined;
+    gridTemplateColumns?: csstype.Property.GridTemplateColumns<string | number> | {
+        readonly base?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly xs?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly s?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly m?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly l?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly xl?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+    } | undefined;
+    gridTemplateRows?: csstype.Property.GridTemplateRows<string | number> | {
+        readonly base?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly xs?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly s?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly m?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly l?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly xl?: csstype.Property.GridTemplateRows<string | number> | undefined;
+    } | undefined;
+    gridArea?: csstype.Property.GridArea | {
+        readonly base?: csstype.Property.GridArea | undefined;
+        readonly xs?: csstype.Property.GridArea | undefined;
+        readonly s?: csstype.Property.GridArea | undefined;
+        readonly m?: csstype.Property.GridArea | undefined;
+        readonly l?: csstype.Property.GridArea | undefined;
+        readonly xl?: csstype.Property.GridArea | undefined;
+    } | undefined;
+    gridColumn?: csstype.Property.GridColumn | {
+        readonly base?: csstype.Property.GridColumn | undefined;
+        readonly xs?: csstype.Property.GridColumn | undefined;
+        readonly s?: csstype.Property.GridColumn | undefined;
+        readonly m?: csstype.Property.GridColumn | undefined;
+        readonly l?: csstype.Property.GridColumn | undefined;
+        readonly xl?: csstype.Property.GridColumn | undefined;
+    } | undefined;
+    gridRow?: csstype.Property.GridRow | {
+        readonly base?: csstype.Property.GridRow | undefined;
+        readonly xs?: csstype.Property.GridRow | undefined;
+        readonly s?: csstype.Property.GridRow | undefined;
+        readonly m?: csstype.Property.GridRow | undefined;
+        readonly l?: csstype.Property.GridRow | undefined;
+        readonly xl?: csstype.Property.GridRow | undefined;
+    } | undefined;
+    gridTemplate?: csstype.Property.GridTemplate | {
+        readonly base?: csstype.Property.GridTemplate | undefined;
+        readonly xs?: csstype.Property.GridTemplate | undefined;
+        readonly s?: csstype.Property.GridTemplate | undefined;
+        readonly m?: csstype.Property.GridTemplate | undefined;
+        readonly l?: csstype.Property.GridTemplate | undefined;
+        readonly xl?: csstype.Property.GridTemplate | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+} & {
     onMouseOver: React__default.MouseEventHandler<HTMLElement>;
     onMouseEnter: React__default.MouseEventHandler<HTMLElement>;
     onMouseLeave: React__default.MouseEventHandler<HTMLElement>;
@@ -2336,7 +2730,7 @@ declare const Box: React__default.ForwardRefExoticComponent<Partial<MakeObjectRe
     borderTopRightRadius: "none" | "small" | "medium" | "large" | "max" | "round";
     borderBottomRightRadius: "none" | "small" | "medium" | "large" | "max" | "round";
     borderBottomLeftRadius: "none" | "small" | "medium" | "large" | "max" | "round";
-}> & {
+}, "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomWidth" | "borderLeftColor" | "borderLeftWidth" | "borderRightColor" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopWidth" | "borderColor" | "borderRadius" | "borderWidth"> & {
     as: "header" | "main" | "label" | "aside" | "div" | "footer" | "nav" | "section" | "span";
 } & {
     children?: React__default.ReactNode | React__default.ReactNode[];
@@ -3018,29 +3412,338 @@ declare const Checkbox: React__default.ForwardRefExoticComponent<{
      *
      */
     tabIndex?: number | undefined;
-} & TestID & Partial<Omit<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;
-    flex: string | number;
-} & PickIfExist$1<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
-    __brand__?: "platform-web" | undefined;
-}>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
-    top: SpacingValueType;
-    right: SpacingValueType;
-    bottom: SpacingValueType;
-    left: SpacingValueType;
-} & PickIfExist$1<styled_components.CSSObject, "position" | "zIndex"> & {
-    __brand__?: "platform-web" | undefined;
-}> & Pick<MakeObjectResponsive<PickCSSByPlatform$1<"grid" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate">>, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
+} & TestID & Partial<Omit<MarginProps & Pick<{
+    alignContent?: csstype.Property.AlignContent | {
+        readonly base?: csstype.Property.AlignContent | undefined;
+        readonly xs?: csstype.Property.AlignContent | undefined;
+        readonly s?: csstype.Property.AlignContent | undefined;
+        readonly m?: csstype.Property.AlignContent | undefined;
+        readonly l?: csstype.Property.AlignContent | undefined;
+        readonly xl?: csstype.Property.AlignContent | undefined;
+    } | undefined;
+    alignItems?: csstype.Property.AlignItems | {
+        readonly base?: csstype.Property.AlignItems | undefined;
+        readonly xs?: csstype.Property.AlignItems | undefined;
+        readonly s?: csstype.Property.AlignItems | undefined;
+        readonly m?: csstype.Property.AlignItems | undefined;
+        readonly l?: csstype.Property.AlignItems | undefined;
+        readonly xl?: csstype.Property.AlignItems | undefined;
+    } | undefined;
+    alignSelf?: csstype.Property.AlignSelf | {
+        readonly base?: csstype.Property.AlignSelf | undefined;
+        readonly xs?: csstype.Property.AlignSelf | undefined;
+        readonly s?: csstype.Property.AlignSelf | undefined;
+        readonly m?: csstype.Property.AlignSelf | undefined;
+        readonly l?: csstype.Property.AlignSelf | undefined;
+        readonly xl?: csstype.Property.AlignSelf | undefined;
+    } | undefined;
+    columnGap: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    flexBasis?: csstype.Property.FlexBasis<string | number> | {
+        readonly base?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly xs?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly s?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly m?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly l?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly xl?: csstype.Property.FlexBasis<string | number> | undefined;
+    } | undefined;
+    flexDirection?: csstype.Property.FlexDirection | {
+        readonly base?: csstype.Property.FlexDirection | undefined;
+        readonly xs?: csstype.Property.FlexDirection | undefined;
+        readonly s?: csstype.Property.FlexDirection | undefined;
+        readonly m?: csstype.Property.FlexDirection | undefined;
+        readonly l?: csstype.Property.FlexDirection | undefined;
+        readonly xl?: csstype.Property.FlexDirection | undefined;
+    } | undefined;
+    flexGrow?: csstype.Property.FlexGrow | {
+        readonly base?: csstype.Property.FlexGrow | undefined;
+        readonly xs?: csstype.Property.FlexGrow | undefined;
+        readonly s?: csstype.Property.FlexGrow | undefined;
+        readonly m?: csstype.Property.FlexGrow | undefined;
+        readonly l?: csstype.Property.FlexGrow | undefined;
+        readonly xl?: csstype.Property.FlexGrow | undefined;
+    } | undefined;
+    flexShrink?: csstype.Property.FlexShrink | {
+        readonly base?: csstype.Property.FlexShrink | undefined;
+        readonly xs?: csstype.Property.FlexShrink | undefined;
+        readonly s?: csstype.Property.FlexShrink | undefined;
+        readonly m?: csstype.Property.FlexShrink | undefined;
+        readonly l?: csstype.Property.FlexShrink | undefined;
+        readonly xl?: csstype.Property.FlexShrink | undefined;
+    } | undefined;
+    flexWrap?: csstype.Property.FlexWrap | {
+        readonly base?: csstype.Property.FlexWrap | undefined;
+        readonly xs?: csstype.Property.FlexWrap | undefined;
+        readonly s?: csstype.Property.FlexWrap | undefined;
+        readonly m?: csstype.Property.FlexWrap | undefined;
+        readonly l?: csstype.Property.FlexWrap | undefined;
+        readonly xl?: csstype.Property.FlexWrap | undefined;
+    } | undefined;
+    justifyContent?: csstype.Property.JustifyContent | {
+        readonly base?: csstype.Property.JustifyContent | undefined;
+        readonly xs?: csstype.Property.JustifyContent | undefined;
+        readonly s?: csstype.Property.JustifyContent | undefined;
+        readonly m?: csstype.Property.JustifyContent | undefined;
+        readonly l?: csstype.Property.JustifyContent | undefined;
+        readonly xl?: csstype.Property.JustifyContent | undefined;
+    } | undefined;
+    justifyItems?: csstype.Property.JustifyItems | {
+        readonly base?: csstype.Property.JustifyItems | undefined;
+        readonly xs?: csstype.Property.JustifyItems | undefined;
+        readonly s?: csstype.Property.JustifyItems | undefined;
+        readonly m?: csstype.Property.JustifyItems | undefined;
+        readonly l?: csstype.Property.JustifyItems | undefined;
+        readonly xl?: csstype.Property.JustifyItems | undefined;
+    } | undefined;
+    justifySelf?: csstype.Property.JustifySelf | {
+        readonly base?: csstype.Property.JustifySelf | undefined;
+        readonly xs?: csstype.Property.JustifySelf | undefined;
+        readonly s?: csstype.Property.JustifySelf | undefined;
+        readonly m?: csstype.Property.JustifySelf | undefined;
+        readonly l?: csstype.Property.JustifySelf | undefined;
+        readonly xl?: csstype.Property.JustifySelf | undefined;
+    } | undefined;
+    order?: csstype.Property.Order | {
+        readonly base?: csstype.Property.Order | undefined;
+        readonly xs?: csstype.Property.Order | undefined;
+        readonly s?: csstype.Property.Order | undefined;
+        readonly m?: csstype.Property.Order | undefined;
+        readonly l?: csstype.Property.Order | undefined;
+        readonly xl?: csstype.Property.Order | undefined;
+    } | undefined;
+    rowGap: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    flex: string | number | {
+        readonly base?: string | number | undefined;
+        readonly xs?: string | number | undefined;
+        readonly s?: string | number | undefined;
+        readonly m?: string | number | undefined;
+        readonly l?: string | number | undefined;
+        readonly xl?: string | number | undefined;
+    };
+    gap: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    placeSelf?: csstype.Property.PlaceSelf | {
+        readonly base?: csstype.Property.PlaceSelf | undefined;
+        readonly xs?: csstype.Property.PlaceSelf | undefined;
+        readonly s?: csstype.Property.PlaceSelf | undefined;
+        readonly m?: csstype.Property.PlaceSelf | undefined;
+        readonly l?: csstype.Property.PlaceSelf | undefined;
+        readonly xl?: csstype.Property.PlaceSelf | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+}, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & {
+    bottom: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    left: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    position?: csstype.Property.Position | {
+        readonly base?: csstype.Property.Position | undefined;
+        readonly xs?: csstype.Property.Position | undefined;
+        readonly s?: csstype.Property.Position | undefined;
+        readonly m?: csstype.Property.Position | undefined;
+        readonly l?: csstype.Property.Position | undefined;
+        readonly xl?: csstype.Property.Position | undefined;
+    } | undefined;
+    right: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    top: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    zIndex?: csstype.Property.ZIndex | {
+        readonly base?: csstype.Property.ZIndex | undefined;
+        readonly xs?: csstype.Property.ZIndex | undefined;
+        readonly s?: csstype.Property.ZIndex | undefined;
+        readonly m?: csstype.Property.ZIndex | undefined;
+        readonly l?: csstype.Property.ZIndex | undefined;
+        readonly xl?: csstype.Property.ZIndex | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+} & Pick<{
+    grid?: csstype.Property.Grid | {
+        readonly base?: csstype.Property.Grid | undefined;
+        readonly xs?: csstype.Property.Grid | undefined;
+        readonly s?: csstype.Property.Grid | undefined;
+        readonly m?: csstype.Property.Grid | undefined;
+        readonly l?: csstype.Property.Grid | undefined;
+        readonly xl?: csstype.Property.Grid | undefined;
+    } | undefined;
+    gridAutoColumns?: csstype.Property.GridAutoColumns<string | number> | {
+        readonly base?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly xs?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly s?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly m?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly l?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly xl?: csstype.Property.GridAutoColumns<string | number> | undefined;
+    } | undefined;
+    gridAutoFlow?: csstype.Property.GridAutoFlow | {
+        readonly base?: csstype.Property.GridAutoFlow | undefined;
+        readonly xs?: csstype.Property.GridAutoFlow | undefined;
+        readonly s?: csstype.Property.GridAutoFlow | undefined;
+        readonly m?: csstype.Property.GridAutoFlow | undefined;
+        readonly l?: csstype.Property.GridAutoFlow | undefined;
+        readonly xl?: csstype.Property.GridAutoFlow | undefined;
+    } | undefined;
+    gridAutoRows?: csstype.Property.GridAutoRows<string | number> | {
+        readonly base?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly xs?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly s?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly m?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly l?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly xl?: csstype.Property.GridAutoRows<string | number> | undefined;
+    } | undefined;
+    gridColumnEnd?: csstype.Property.GridColumnEnd | {
+        readonly base?: csstype.Property.GridColumnEnd | undefined;
+        readonly xs?: csstype.Property.GridColumnEnd | undefined;
+        readonly s?: csstype.Property.GridColumnEnd | undefined;
+        readonly m?: csstype.Property.GridColumnEnd | undefined;
+        readonly l?: csstype.Property.GridColumnEnd | undefined;
+        readonly xl?: csstype.Property.GridColumnEnd | undefined;
+    } | undefined;
+    gridColumnStart?: csstype.Property.GridColumnStart | {
+        readonly base?: csstype.Property.GridColumnStart | undefined;
+        readonly xs?: csstype.Property.GridColumnStart | undefined;
+        readonly s?: csstype.Property.GridColumnStart | undefined;
+        readonly m?: csstype.Property.GridColumnStart | undefined;
+        readonly l?: csstype.Property.GridColumnStart | undefined;
+        readonly xl?: csstype.Property.GridColumnStart | undefined;
+    } | undefined;
+    gridRowEnd?: csstype.Property.GridRowEnd | {
+        readonly base?: csstype.Property.GridRowEnd | undefined;
+        readonly xs?: csstype.Property.GridRowEnd | undefined;
+        readonly s?: csstype.Property.GridRowEnd | undefined;
+        readonly m?: csstype.Property.GridRowEnd | undefined;
+        readonly l?: csstype.Property.GridRowEnd | undefined;
+        readonly xl?: csstype.Property.GridRowEnd | undefined;
+    } | undefined;
+    gridRowStart?: csstype.Property.GridRowStart | {
+        readonly base?: csstype.Property.GridRowStart | undefined;
+        readonly xs?: csstype.Property.GridRowStart | undefined;
+        readonly s?: csstype.Property.GridRowStart | undefined;
+        readonly m?: csstype.Property.GridRowStart | undefined;
+        readonly l?: csstype.Property.GridRowStart | undefined;
+        readonly xl?: csstype.Property.GridRowStart | undefined;
+    } | undefined;
+    gridTemplateAreas?: csstype.Property.GridTemplateAreas | {
+        readonly base?: csstype.Property.GridTemplateAreas | undefined;
+        readonly xs?: csstype.Property.GridTemplateAreas | undefined;
+        readonly s?: csstype.Property.GridTemplateAreas | undefined;
+        readonly m?: csstype.Property.GridTemplateAreas | undefined;
+        readonly l?: csstype.Property.GridTemplateAreas | undefined;
+        readonly xl?: csstype.Property.GridTemplateAreas | undefined;
+    } | undefined;
+    gridTemplateColumns?: csstype.Property.GridTemplateColumns<string | number> | {
+        readonly base?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly xs?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly s?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly m?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly l?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly xl?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+    } | undefined;
+    gridTemplateRows?: csstype.Property.GridTemplateRows<string | number> | {
+        readonly base?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly xs?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly s?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly m?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly l?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly xl?: csstype.Property.GridTemplateRows<string | number> | undefined;
+    } | undefined;
+    gridArea?: csstype.Property.GridArea | {
+        readonly base?: csstype.Property.GridArea | undefined;
+        readonly xs?: csstype.Property.GridArea | undefined;
+        readonly s?: csstype.Property.GridArea | undefined;
+        readonly m?: csstype.Property.GridArea | undefined;
+        readonly l?: csstype.Property.GridArea | undefined;
+        readonly xl?: csstype.Property.GridArea | undefined;
+    } | undefined;
+    gridColumn?: csstype.Property.GridColumn | {
+        readonly base?: csstype.Property.GridColumn | undefined;
+        readonly xs?: csstype.Property.GridColumn | undefined;
+        readonly s?: csstype.Property.GridColumn | undefined;
+        readonly m?: csstype.Property.GridColumn | undefined;
+        readonly l?: csstype.Property.GridColumn | undefined;
+        readonly xl?: csstype.Property.GridColumn | undefined;
+    } | undefined;
+    gridRow?: csstype.Property.GridRow | {
+        readonly base?: csstype.Property.GridRow | undefined;
+        readonly xs?: csstype.Property.GridRow | undefined;
+        readonly s?: csstype.Property.GridRow | undefined;
+        readonly m?: csstype.Property.GridRow | undefined;
+        readonly l?: csstype.Property.GridRow | undefined;
+        readonly xl?: csstype.Property.GridRow | undefined;
+    } | undefined;
+    gridTemplate?: csstype.Property.GridTemplate | {
+        readonly base?: csstype.Property.GridTemplate | undefined;
+        readonly xs?: csstype.Property.GridTemplate | undefined;
+        readonly s?: csstype.Property.GridTemplate | undefined;
+        readonly m?: csstype.Property.GridTemplate | undefined;
+        readonly l?: csstype.Property.GridTemplate | undefined;
+        readonly xl?: csstype.Property.GridTemplate | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+}, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
 
 declare type CheckboxGroupProps = {
     /**
@@ -3700,36 +4403,6 @@ declare type IconProps = {
 } & StyledPropsBlade;
 declare type IconComponent = React.ComponentType<IconProps>;
 
-/**
- * Similar to `Pick` except this returns `never` when value doesn't exist (native `Pick` returns `unknown`).
- *
- * You might have to ts-ignore the non-existing type error while using this. This is done so that you can get jsdoc from actual type.
- *
- * E.g. This will pick from ViewStyle prop if value exists else returns undefined.
- *
- * ```ts
- * // @ts-expect-error: T passed here may not neccessarily exist. We return `never` type when it doesn't
- * native: PickIfExist<ViewStyle, T>;
- * ```
- */
-declare type PickIfExist<T, K extends keyof T> = {
-    [P in K]: P extends keyof T ? T[P] : never;
-};
-/**
- * Picks the types based on the platform (web / native).
- *
- * E.g.
- * ```ts
- * type CSSObject = PickCSSByPlatform<'display'>
- * // On Web --> This will be all possible web display properties like `block`, `flex`, `inline`, and more.
- * // On Native --> This will be just `flex` and `none`
- * ```
- */
-declare type PickCSSByPlatform<T extends keyof React__default.CSSProperties | keyof ViewStyle> = Platform.Select<{
-    web: PickIfExist<CSSObject, T>;
-    native: PickIfExist<ViewStyle, T>;
-}>;
-
 declare type FormInputLabelProps = {
     /**
      * Label to be shown for the input field
@@ -3790,6 +4463,8 @@ type FormInputOnKeyDownEvent = {
   event: KeyboardEvent<HTMLInputElement>;
 };
 
+declare type CommonAutoCompleteSuggestionTypes = 'none' | 'name' | 'email' | 'username' | 'password' | 'newPassword' | 'oneTimeCode' | 'telephone' | 'postalCode' | 'countryName' | 'creditCardNumber' | 'creditCardCSC' | 'creditCardExpiry' | 'creditCardExpiryMonth' | 'creditCardExpiryYear';
+declare type WebAutoCompleteSuggestionType = CommonAutoCompleteSuggestionTypes | 'on';
 declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
     /**
      * Determines if it needs to be rendered as input, textarea or button
@@ -3915,17 +4590,6 @@ declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
      * `previous` is only available on native android
      */
     keyboardReturnKeyType?: 'default' | 'go' | 'done' | 'next' | 'previous' | 'search' | 'send';
-    /**
-     * determines what autoComplete suggestion type to show
-     *
-     * Internally it'll render platform specific attributes:
-     *
-     * - web: `autocomplete`
-     * - iOS: `textContentType`
-     * - android: `autoComplete`
-     *
-     */
-    autoCompleteSuggestionType?: 'none' | 'name' | 'email' | 'username' | 'password' | 'newPassword' | 'oneTimeCode' | 'telephone' | 'postalCode' | 'countryName' | 'creditCardNumber' | 'creditCardCSC' | 'creditCardExpiry' | 'creditCardExpiryMonth' | 'creditCardExpiryYear';
     /**
      * Element to be rendered on the trailing slot of input field label
      */
@@ -3987,12 +4651,34 @@ declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
          * The callback function to be invoked when the value of the input field is submitted.
          */
         onSubmit?: FormInputOnEvent;
+        /**
+         * determines what autoComplete suggestion type to show
+         *
+         * Internally it'll render platform specific attributes:
+         *
+         * - web: `autocomplete`
+         * - iOS: `textContentType`
+         * - android: `autoComplete`
+         *
+         */
+        autoCompleteSuggestionType?: CommonAutoCompleteSuggestionTypes;
     };
     web: {
         /**
          * This is a react-native only prop and has no effect on web.
          */
         onSubmit?: undefined;
+        /**
+         * determines what autoComplete suggestion type to show
+         *
+         * Internally it'll render platform specific attributes:
+         *
+         * - web: `autocomplete`
+         * - iOS: `textContentType`
+         * - android: `autoComplete`
+         *
+         */
+        autoCompleteSuggestionType?: WebAutoCompleteSuggestionType;
     };
 }> & StyledPropsBlade;
 
@@ -4060,29 +4746,338 @@ declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInput
      * @default text
      */
     type?: Type;
-} & Partial<Omit<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;
-    flex: string | number;
-} & PickIfExist<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
-    __brand__?: "platform-web" | undefined;
-}>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
-    top: SpacingValueType;
-    right: SpacingValueType;
-    bottom: SpacingValueType;
-    left: SpacingValueType;
-} & PickIfExist<styled_components.CSSObject, "position" | "zIndex"> & {
-    __brand__?: "platform-web" | undefined;
-}> & Pick<MakeObjectResponsive<PickCSSByPlatform<"grid" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate">>, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
+} & Partial<Omit<MarginProps & Pick<{
+    alignContent?: csstype.Property.AlignContent | {
+        readonly base?: csstype.Property.AlignContent | undefined;
+        readonly xs?: csstype.Property.AlignContent | undefined;
+        readonly s?: csstype.Property.AlignContent | undefined;
+        readonly m?: csstype.Property.AlignContent | undefined;
+        readonly l?: csstype.Property.AlignContent | undefined;
+        readonly xl?: csstype.Property.AlignContent | undefined;
+    } | undefined;
+    alignItems?: csstype.Property.AlignItems | {
+        readonly base?: csstype.Property.AlignItems | undefined;
+        readonly xs?: csstype.Property.AlignItems | undefined;
+        readonly s?: csstype.Property.AlignItems | undefined;
+        readonly m?: csstype.Property.AlignItems | undefined;
+        readonly l?: csstype.Property.AlignItems | undefined;
+        readonly xl?: csstype.Property.AlignItems | undefined;
+    } | undefined;
+    alignSelf?: csstype.Property.AlignSelf | {
+        readonly base?: csstype.Property.AlignSelf | undefined;
+        readonly xs?: csstype.Property.AlignSelf | undefined;
+        readonly s?: csstype.Property.AlignSelf | undefined;
+        readonly m?: csstype.Property.AlignSelf | undefined;
+        readonly l?: csstype.Property.AlignSelf | undefined;
+        readonly xl?: csstype.Property.AlignSelf | undefined;
+    } | undefined;
+    columnGap: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    flexBasis?: csstype.Property.FlexBasis<string | number> | {
+        readonly base?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly xs?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly s?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly m?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly l?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly xl?: csstype.Property.FlexBasis<string | number> | undefined;
+    } | undefined;
+    flexDirection?: csstype.Property.FlexDirection | {
+        readonly base?: csstype.Property.FlexDirection | undefined;
+        readonly xs?: csstype.Property.FlexDirection | undefined;
+        readonly s?: csstype.Property.FlexDirection | undefined;
+        readonly m?: csstype.Property.FlexDirection | undefined;
+        readonly l?: csstype.Property.FlexDirection | undefined;
+        readonly xl?: csstype.Property.FlexDirection | undefined;
+    } | undefined;
+    flexGrow?: csstype.Property.FlexGrow | {
+        readonly base?: csstype.Property.FlexGrow | undefined;
+        readonly xs?: csstype.Property.FlexGrow | undefined;
+        readonly s?: csstype.Property.FlexGrow | undefined;
+        readonly m?: csstype.Property.FlexGrow | undefined;
+        readonly l?: csstype.Property.FlexGrow | undefined;
+        readonly xl?: csstype.Property.FlexGrow | undefined;
+    } | undefined;
+    flexShrink?: csstype.Property.FlexShrink | {
+        readonly base?: csstype.Property.FlexShrink | undefined;
+        readonly xs?: csstype.Property.FlexShrink | undefined;
+        readonly s?: csstype.Property.FlexShrink | undefined;
+        readonly m?: csstype.Property.FlexShrink | undefined;
+        readonly l?: csstype.Property.FlexShrink | undefined;
+        readonly xl?: csstype.Property.FlexShrink | undefined;
+    } | undefined;
+    flexWrap?: csstype.Property.FlexWrap | {
+        readonly base?: csstype.Property.FlexWrap | undefined;
+        readonly xs?: csstype.Property.FlexWrap | undefined;
+        readonly s?: csstype.Property.FlexWrap | undefined;
+        readonly m?: csstype.Property.FlexWrap | undefined;
+        readonly l?: csstype.Property.FlexWrap | undefined;
+        readonly xl?: csstype.Property.FlexWrap | undefined;
+    } | undefined;
+    justifyContent?: csstype.Property.JustifyContent | {
+        readonly base?: csstype.Property.JustifyContent | undefined;
+        readonly xs?: csstype.Property.JustifyContent | undefined;
+        readonly s?: csstype.Property.JustifyContent | undefined;
+        readonly m?: csstype.Property.JustifyContent | undefined;
+        readonly l?: csstype.Property.JustifyContent | undefined;
+        readonly xl?: csstype.Property.JustifyContent | undefined;
+    } | undefined;
+    justifyItems?: csstype.Property.JustifyItems | {
+        readonly base?: csstype.Property.JustifyItems | undefined;
+        readonly xs?: csstype.Property.JustifyItems | undefined;
+        readonly s?: csstype.Property.JustifyItems | undefined;
+        readonly m?: csstype.Property.JustifyItems | undefined;
+        readonly l?: csstype.Property.JustifyItems | undefined;
+        readonly xl?: csstype.Property.JustifyItems | undefined;
+    } | undefined;
+    justifySelf?: csstype.Property.JustifySelf | {
+        readonly base?: csstype.Property.JustifySelf | undefined;
+        readonly xs?: csstype.Property.JustifySelf | undefined;
+        readonly s?: csstype.Property.JustifySelf | undefined;
+        readonly m?: csstype.Property.JustifySelf | undefined;
+        readonly l?: csstype.Property.JustifySelf | undefined;
+        readonly xl?: csstype.Property.JustifySelf | undefined;
+    } | undefined;
+    order?: csstype.Property.Order | {
+        readonly base?: csstype.Property.Order | undefined;
+        readonly xs?: csstype.Property.Order | undefined;
+        readonly s?: csstype.Property.Order | undefined;
+        readonly m?: csstype.Property.Order | undefined;
+        readonly l?: csstype.Property.Order | undefined;
+        readonly xl?: csstype.Property.Order | undefined;
+    } | undefined;
+    rowGap: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    flex: string | number | {
+        readonly base?: string | number | undefined;
+        readonly xs?: string | number | undefined;
+        readonly s?: string | number | undefined;
+        readonly m?: string | number | undefined;
+        readonly l?: string | number | undefined;
+        readonly xl?: string | number | undefined;
+    };
+    gap: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    placeSelf?: csstype.Property.PlaceSelf | {
+        readonly base?: csstype.Property.PlaceSelf | undefined;
+        readonly xs?: csstype.Property.PlaceSelf | undefined;
+        readonly s?: csstype.Property.PlaceSelf | undefined;
+        readonly m?: csstype.Property.PlaceSelf | undefined;
+        readonly l?: csstype.Property.PlaceSelf | undefined;
+        readonly xl?: csstype.Property.PlaceSelf | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+}, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & {
+    bottom: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    left: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    position?: csstype.Property.Position | {
+        readonly base?: csstype.Property.Position | undefined;
+        readonly xs?: csstype.Property.Position | undefined;
+        readonly s?: csstype.Property.Position | undefined;
+        readonly m?: csstype.Property.Position | undefined;
+        readonly l?: csstype.Property.Position | undefined;
+        readonly xl?: csstype.Property.Position | undefined;
+    } | undefined;
+    right: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    top: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    zIndex?: csstype.Property.ZIndex | {
+        readonly base?: csstype.Property.ZIndex | undefined;
+        readonly xs?: csstype.Property.ZIndex | undefined;
+        readonly s?: csstype.Property.ZIndex | undefined;
+        readonly m?: csstype.Property.ZIndex | undefined;
+        readonly l?: csstype.Property.ZIndex | undefined;
+        readonly xl?: csstype.Property.ZIndex | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+} & Pick<{
+    grid?: csstype.Property.Grid | {
+        readonly base?: csstype.Property.Grid | undefined;
+        readonly xs?: csstype.Property.Grid | undefined;
+        readonly s?: csstype.Property.Grid | undefined;
+        readonly m?: csstype.Property.Grid | undefined;
+        readonly l?: csstype.Property.Grid | undefined;
+        readonly xl?: csstype.Property.Grid | undefined;
+    } | undefined;
+    gridAutoColumns?: csstype.Property.GridAutoColumns<string | number> | {
+        readonly base?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly xs?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly s?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly m?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly l?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly xl?: csstype.Property.GridAutoColumns<string | number> | undefined;
+    } | undefined;
+    gridAutoFlow?: csstype.Property.GridAutoFlow | {
+        readonly base?: csstype.Property.GridAutoFlow | undefined;
+        readonly xs?: csstype.Property.GridAutoFlow | undefined;
+        readonly s?: csstype.Property.GridAutoFlow | undefined;
+        readonly m?: csstype.Property.GridAutoFlow | undefined;
+        readonly l?: csstype.Property.GridAutoFlow | undefined;
+        readonly xl?: csstype.Property.GridAutoFlow | undefined;
+    } | undefined;
+    gridAutoRows?: csstype.Property.GridAutoRows<string | number> | {
+        readonly base?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly xs?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly s?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly m?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly l?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly xl?: csstype.Property.GridAutoRows<string | number> | undefined;
+    } | undefined;
+    gridColumnEnd?: csstype.Property.GridColumnEnd | {
+        readonly base?: csstype.Property.GridColumnEnd | undefined;
+        readonly xs?: csstype.Property.GridColumnEnd | undefined;
+        readonly s?: csstype.Property.GridColumnEnd | undefined;
+        readonly m?: csstype.Property.GridColumnEnd | undefined;
+        readonly l?: csstype.Property.GridColumnEnd | undefined;
+        readonly xl?: csstype.Property.GridColumnEnd | undefined;
+    } | undefined;
+    gridColumnStart?: csstype.Property.GridColumnStart | {
+        readonly base?: csstype.Property.GridColumnStart | undefined;
+        readonly xs?: csstype.Property.GridColumnStart | undefined;
+        readonly s?: csstype.Property.GridColumnStart | undefined;
+        readonly m?: csstype.Property.GridColumnStart | undefined;
+        readonly l?: csstype.Property.GridColumnStart | undefined;
+        readonly xl?: csstype.Property.GridColumnStart | undefined;
+    } | undefined;
+    gridRowEnd?: csstype.Property.GridRowEnd | {
+        readonly base?: csstype.Property.GridRowEnd | undefined;
+        readonly xs?: csstype.Property.GridRowEnd | undefined;
+        readonly s?: csstype.Property.GridRowEnd | undefined;
+        readonly m?: csstype.Property.GridRowEnd | undefined;
+        readonly l?: csstype.Property.GridRowEnd | undefined;
+        readonly xl?: csstype.Property.GridRowEnd | undefined;
+    } | undefined;
+    gridRowStart?: csstype.Property.GridRowStart | {
+        readonly base?: csstype.Property.GridRowStart | undefined;
+        readonly xs?: csstype.Property.GridRowStart | undefined;
+        readonly s?: csstype.Property.GridRowStart | undefined;
+        readonly m?: csstype.Property.GridRowStart | undefined;
+        readonly l?: csstype.Property.GridRowStart | undefined;
+        readonly xl?: csstype.Property.GridRowStart | undefined;
+    } | undefined;
+    gridTemplateAreas?: csstype.Property.GridTemplateAreas | {
+        readonly base?: csstype.Property.GridTemplateAreas | undefined;
+        readonly xs?: csstype.Property.GridTemplateAreas | undefined;
+        readonly s?: csstype.Property.GridTemplateAreas | undefined;
+        readonly m?: csstype.Property.GridTemplateAreas | undefined;
+        readonly l?: csstype.Property.GridTemplateAreas | undefined;
+        readonly xl?: csstype.Property.GridTemplateAreas | undefined;
+    } | undefined;
+    gridTemplateColumns?: csstype.Property.GridTemplateColumns<string | number> | {
+        readonly base?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly xs?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly s?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly m?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly l?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly xl?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+    } | undefined;
+    gridTemplateRows?: csstype.Property.GridTemplateRows<string | number> | {
+        readonly base?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly xs?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly s?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly m?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly l?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly xl?: csstype.Property.GridTemplateRows<string | number> | undefined;
+    } | undefined;
+    gridArea?: csstype.Property.GridArea | {
+        readonly base?: csstype.Property.GridArea | undefined;
+        readonly xs?: csstype.Property.GridArea | undefined;
+        readonly s?: csstype.Property.GridArea | undefined;
+        readonly m?: csstype.Property.GridArea | undefined;
+        readonly l?: csstype.Property.GridArea | undefined;
+        readonly xl?: csstype.Property.GridArea | undefined;
+    } | undefined;
+    gridColumn?: csstype.Property.GridColumn | {
+        readonly base?: csstype.Property.GridColumn | undefined;
+        readonly xs?: csstype.Property.GridColumn | undefined;
+        readonly s?: csstype.Property.GridColumn | undefined;
+        readonly m?: csstype.Property.GridColumn | undefined;
+        readonly l?: csstype.Property.GridColumn | undefined;
+        readonly xl?: csstype.Property.GridColumn | undefined;
+    } | undefined;
+    gridRow?: csstype.Property.GridRow | {
+        readonly base?: csstype.Property.GridRow | undefined;
+        readonly xs?: csstype.Property.GridRow | undefined;
+        readonly s?: csstype.Property.GridRow | undefined;
+        readonly m?: csstype.Property.GridRow | undefined;
+        readonly l?: csstype.Property.GridRow | undefined;
+        readonly xl?: csstype.Property.GridRow | undefined;
+    } | undefined;
+    gridTemplate?: csstype.Property.GridTemplate | {
+        readonly base?: csstype.Property.GridTemplate | undefined;
+        readonly xs?: csstype.Property.GridTemplate | undefined;
+        readonly s?: csstype.Property.GridTemplate | undefined;
+        readonly m?: csstype.Property.GridTemplate | undefined;
+        readonly l?: csstype.Property.GridTemplate | undefined;
+        readonly xl?: csstype.Property.GridTemplate | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+}, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
 
 declare type PasswordInputExtraProps = {
     /**
@@ -4115,29 +5110,338 @@ 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' | 'onSubmit' | 'onFocus' | 'name' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'testID'> & PasswordInputExtraProps & StyledPropsBlade;
-declare const PasswordInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "testID" | "placeholder" | "label" | "value" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "autoFocus" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "successText" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & PasswordInputExtraProps & Partial<Omit<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;
-    flex: string | number;
-} & PickIfExist<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
-    __brand__?: "platform-web" | undefined;
-}>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
-    top: SpacingValueType;
-    right: SpacingValueType;
-    bottom: SpacingValueType;
-    left: SpacingValueType;
-} & PickIfExist<styled_components.CSSObject, "position" | "zIndex"> & {
-    __brand__?: "platform-web" | undefined;
-}> & Pick<MakeObjectResponsive<PickCSSByPlatform<"grid" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate">>, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
+declare const PasswordInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "testID" | "placeholder" | "label" | "value" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "autoFocus" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "successText" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & PasswordInputExtraProps & Partial<Omit<MarginProps & Pick<{
+    alignContent?: csstype.Property.AlignContent | {
+        readonly base?: csstype.Property.AlignContent | undefined;
+        readonly xs?: csstype.Property.AlignContent | undefined;
+        readonly s?: csstype.Property.AlignContent | undefined;
+        readonly m?: csstype.Property.AlignContent | undefined;
+        readonly l?: csstype.Property.AlignContent | undefined;
+        readonly xl?: csstype.Property.AlignContent | undefined;
+    } | undefined;
+    alignItems?: csstype.Property.AlignItems | {
+        readonly base?: csstype.Property.AlignItems | undefined;
+        readonly xs?: csstype.Property.AlignItems | undefined;
+        readonly s?: csstype.Property.AlignItems | undefined;
+        readonly m?: csstype.Property.AlignItems | undefined;
+        readonly l?: csstype.Property.AlignItems | undefined;
+        readonly xl?: csstype.Property.AlignItems | undefined;
+    } | undefined;
+    alignSelf?: csstype.Property.AlignSelf | {
+        readonly base?: csstype.Property.AlignSelf | undefined;
+        readonly xs?: csstype.Property.AlignSelf | undefined;
+        readonly s?: csstype.Property.AlignSelf | undefined;
+        readonly m?: csstype.Property.AlignSelf | undefined;
+        readonly l?: csstype.Property.AlignSelf | undefined;
+        readonly xl?: csstype.Property.AlignSelf | undefined;
+    } | undefined;
+    columnGap: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    flexBasis?: csstype.Property.FlexBasis<string | number> | {
+        readonly base?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly xs?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly s?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly m?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly l?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly xl?: csstype.Property.FlexBasis<string | number> | undefined;
+    } | undefined;
+    flexDirection?: csstype.Property.FlexDirection | {
+        readonly base?: csstype.Property.FlexDirection | undefined;
+        readonly xs?: csstype.Property.FlexDirection | undefined;
+        readonly s?: csstype.Property.FlexDirection | undefined;
+        readonly m?: csstype.Property.FlexDirection | undefined;
+        readonly l?: csstype.Property.FlexDirection | undefined;
+        readonly xl?: csstype.Property.FlexDirection | undefined;
+    } | undefined;
+    flexGrow?: csstype.Property.FlexGrow | {
+        readonly base?: csstype.Property.FlexGrow | undefined;
+        readonly xs?: csstype.Property.FlexGrow | undefined;
+        readonly s?: csstype.Property.FlexGrow | undefined;
+        readonly m?: csstype.Property.FlexGrow | undefined;
+        readonly l?: csstype.Property.FlexGrow | undefined;
+        readonly xl?: csstype.Property.FlexGrow | undefined;
+    } | undefined;
+    flexShrink?: csstype.Property.FlexShrink | {
+        readonly base?: csstype.Property.FlexShrink | undefined;
+        readonly xs?: csstype.Property.FlexShrink | undefined;
+        readonly s?: csstype.Property.FlexShrink | undefined;
+        readonly m?: csstype.Property.FlexShrink | undefined;
+        readonly l?: csstype.Property.FlexShrink | undefined;
+        readonly xl?: csstype.Property.FlexShrink | undefined;
+    } | undefined;
+    flexWrap?: csstype.Property.FlexWrap | {
+        readonly base?: csstype.Property.FlexWrap | undefined;
+        readonly xs?: csstype.Property.FlexWrap | undefined;
+        readonly s?: csstype.Property.FlexWrap | undefined;
+        readonly m?: csstype.Property.FlexWrap | undefined;
+        readonly l?: csstype.Property.FlexWrap | undefined;
+        readonly xl?: csstype.Property.FlexWrap | undefined;
+    } | undefined;
+    justifyContent?: csstype.Property.JustifyContent | {
+        readonly base?: csstype.Property.JustifyContent | undefined;
+        readonly xs?: csstype.Property.JustifyContent | undefined;
+        readonly s?: csstype.Property.JustifyContent | undefined;
+        readonly m?: csstype.Property.JustifyContent | undefined;
+        readonly l?: csstype.Property.JustifyContent | undefined;
+        readonly xl?: csstype.Property.JustifyContent | undefined;
+    } | undefined;
+    justifyItems?: csstype.Property.JustifyItems | {
+        readonly base?: csstype.Property.JustifyItems | undefined;
+        readonly xs?: csstype.Property.JustifyItems | undefined;
+        readonly s?: csstype.Property.JustifyItems | undefined;
+        readonly m?: csstype.Property.JustifyItems | undefined;
+        readonly l?: csstype.Property.JustifyItems | undefined;
+        readonly xl?: csstype.Property.JustifyItems | undefined;
+    } | undefined;
+    justifySelf?: csstype.Property.JustifySelf | {
+        readonly base?: csstype.Property.JustifySelf | undefined;
+        readonly xs?: csstype.Property.JustifySelf | undefined;
+        readonly s?: csstype.Property.JustifySelf | undefined;
+        readonly m?: csstype.Property.JustifySelf | undefined;
+        readonly l?: csstype.Property.JustifySelf | undefined;
+        readonly xl?: csstype.Property.JustifySelf | undefined;
+    } | undefined;
+    order?: csstype.Property.Order | {
+        readonly base?: csstype.Property.Order | undefined;
+        readonly xs?: csstype.Property.Order | undefined;
+        readonly s?: csstype.Property.Order | undefined;
+        readonly m?: csstype.Property.Order | undefined;
+        readonly l?: csstype.Property.Order | undefined;
+        readonly xl?: csstype.Property.Order | undefined;
+    } | undefined;
+    rowGap: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    flex: string | number | {
+        readonly base?: string | number | undefined;
+        readonly xs?: string | number | undefined;
+        readonly s?: string | number | undefined;
+        readonly m?: string | number | undefined;
+        readonly l?: string | number | undefined;
+        readonly xl?: string | number | undefined;
+    };
+    gap: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    placeSelf?: csstype.Property.PlaceSelf | {
+        readonly base?: csstype.Property.PlaceSelf | undefined;
+        readonly xs?: csstype.Property.PlaceSelf | undefined;
+        readonly s?: csstype.Property.PlaceSelf | undefined;
+        readonly m?: csstype.Property.PlaceSelf | undefined;
+        readonly l?: csstype.Property.PlaceSelf | undefined;
+        readonly xl?: csstype.Property.PlaceSelf | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+}, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & {
+    bottom: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    left: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    position?: csstype.Property.Position | {
+        readonly base?: csstype.Property.Position | undefined;
+        readonly xs?: csstype.Property.Position | undefined;
+        readonly s?: csstype.Property.Position | undefined;
+        readonly m?: csstype.Property.Position | undefined;
+        readonly l?: csstype.Property.Position | undefined;
+        readonly xl?: csstype.Property.Position | undefined;
+    } | undefined;
+    right: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    top: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    zIndex?: csstype.Property.ZIndex | {
+        readonly base?: csstype.Property.ZIndex | undefined;
+        readonly xs?: csstype.Property.ZIndex | undefined;
+        readonly s?: csstype.Property.ZIndex | undefined;
+        readonly m?: csstype.Property.ZIndex | undefined;
+        readonly l?: csstype.Property.ZIndex | undefined;
+        readonly xl?: csstype.Property.ZIndex | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+} & Pick<{
+    grid?: csstype.Property.Grid | {
+        readonly base?: csstype.Property.Grid | undefined;
+        readonly xs?: csstype.Property.Grid | undefined;
+        readonly s?: csstype.Property.Grid | undefined;
+        readonly m?: csstype.Property.Grid | undefined;
+        readonly l?: csstype.Property.Grid | undefined;
+        readonly xl?: csstype.Property.Grid | undefined;
+    } | undefined;
+    gridAutoColumns?: csstype.Property.GridAutoColumns<string | number> | {
+        readonly base?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly xs?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly s?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly m?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly l?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly xl?: csstype.Property.GridAutoColumns<string | number> | undefined;
+    } | undefined;
+    gridAutoFlow?: csstype.Property.GridAutoFlow | {
+        readonly base?: csstype.Property.GridAutoFlow | undefined;
+        readonly xs?: csstype.Property.GridAutoFlow | undefined;
+        readonly s?: csstype.Property.GridAutoFlow | undefined;
+        readonly m?: csstype.Property.GridAutoFlow | undefined;
+        readonly l?: csstype.Property.GridAutoFlow | undefined;
+        readonly xl?: csstype.Property.GridAutoFlow | undefined;
+    } | undefined;
+    gridAutoRows?: csstype.Property.GridAutoRows<string | number> | {
+        readonly base?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly xs?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly s?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly m?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly l?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly xl?: csstype.Property.GridAutoRows<string | number> | undefined;
+    } | undefined;
+    gridColumnEnd?: csstype.Property.GridColumnEnd | {
+        readonly base?: csstype.Property.GridColumnEnd | undefined;
+        readonly xs?: csstype.Property.GridColumnEnd | undefined;
+        readonly s?: csstype.Property.GridColumnEnd | undefined;
+        readonly m?: csstype.Property.GridColumnEnd | undefined;
+        readonly l?: csstype.Property.GridColumnEnd | undefined;
+        readonly xl?: csstype.Property.GridColumnEnd | undefined;
+    } | undefined;
+    gridColumnStart?: csstype.Property.GridColumnStart | {
+        readonly base?: csstype.Property.GridColumnStart | undefined;
+        readonly xs?: csstype.Property.GridColumnStart | undefined;
+        readonly s?: csstype.Property.GridColumnStart | undefined;
+        readonly m?: csstype.Property.GridColumnStart | undefined;
+        readonly l?: csstype.Property.GridColumnStart | undefined;
+        readonly xl?: csstype.Property.GridColumnStart | undefined;
+    } | undefined;
+    gridRowEnd?: csstype.Property.GridRowEnd | {
+        readonly base?: csstype.Property.GridRowEnd | undefined;
+        readonly xs?: csstype.Property.GridRowEnd | undefined;
+        readonly s?: csstype.Property.GridRowEnd | undefined;
+        readonly m?: csstype.Property.GridRowEnd | undefined;
+        readonly l?: csstype.Property.GridRowEnd | undefined;
+        readonly xl?: csstype.Property.GridRowEnd | undefined;
+    } | undefined;
+    gridRowStart?: csstype.Property.GridRowStart | {
+        readonly base?: csstype.Property.GridRowStart | undefined;
+        readonly xs?: csstype.Property.GridRowStart | undefined;
+        readonly s?: csstype.Property.GridRowStart | undefined;
+        readonly m?: csstype.Property.GridRowStart | undefined;
+        readonly l?: csstype.Property.GridRowStart | undefined;
+        readonly xl?: csstype.Property.GridRowStart | undefined;
+    } | undefined;
+    gridTemplateAreas?: csstype.Property.GridTemplateAreas | {
+        readonly base?: csstype.Property.GridTemplateAreas | undefined;
+        readonly xs?: csstype.Property.GridTemplateAreas | undefined;
+        readonly s?: csstype.Property.GridTemplateAreas | undefined;
+        readonly m?: csstype.Property.GridTemplateAreas | undefined;
+        readonly l?: csstype.Property.GridTemplateAreas | undefined;
+        readonly xl?: csstype.Property.GridTemplateAreas | undefined;
+    } | undefined;
+    gridTemplateColumns?: csstype.Property.GridTemplateColumns<string | number> | {
+        readonly base?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly xs?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly s?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly m?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly l?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly xl?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+    } | undefined;
+    gridTemplateRows?: csstype.Property.GridTemplateRows<string | number> | {
+        readonly base?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly xs?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly s?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly m?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly l?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly xl?: csstype.Property.GridTemplateRows<string | number> | undefined;
+    } | undefined;
+    gridArea?: csstype.Property.GridArea | {
+        readonly base?: csstype.Property.GridArea | undefined;
+        readonly xs?: csstype.Property.GridArea | undefined;
+        readonly s?: csstype.Property.GridArea | undefined;
+        readonly m?: csstype.Property.GridArea | undefined;
+        readonly l?: csstype.Property.GridArea | undefined;
+        readonly xl?: csstype.Property.GridArea | undefined;
+    } | undefined;
+    gridColumn?: csstype.Property.GridColumn | {
+        readonly base?: csstype.Property.GridColumn | undefined;
+        readonly xs?: csstype.Property.GridColumn | undefined;
+        readonly s?: csstype.Property.GridColumn | undefined;
+        readonly m?: csstype.Property.GridColumn | undefined;
+        readonly l?: csstype.Property.GridColumn | undefined;
+        readonly xl?: csstype.Property.GridColumn | undefined;
+    } | undefined;
+    gridRow?: csstype.Property.GridRow | {
+        readonly base?: csstype.Property.GridRow | undefined;
+        readonly xs?: csstype.Property.GridRow | undefined;
+        readonly s?: csstype.Property.GridRow | undefined;
+        readonly m?: csstype.Property.GridRow | undefined;
+        readonly l?: csstype.Property.GridRow | undefined;
+        readonly xl?: csstype.Property.GridRow | undefined;
+    } | undefined;
+    gridTemplate?: csstype.Property.GridTemplate | {
+        readonly base?: csstype.Property.GridTemplate | undefined;
+        readonly xs?: csstype.Property.GridTemplate | undefined;
+        readonly s?: csstype.Property.GridTemplate | undefined;
+        readonly m?: csstype.Property.GridTemplate | undefined;
+        readonly l?: csstype.Property.GridTemplate | undefined;
+        readonly xl?: csstype.Property.GridTemplate | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+}, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">, "__brand__">> & 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'> & {
     /**
@@ -4158,29 +5462,338 @@ 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;
-} & Partial<Omit<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;
-    flex: string | number;
-} & PickIfExist<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
-    __brand__?: "platform-web" | undefined;
-}>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
-    top: SpacingValueType;
-    right: SpacingValueType;
-    bottom: SpacingValueType;
-    left: SpacingValueType;
-} & PickIfExist<styled_components.CSSObject, "position" | "zIndex"> & {
-    __brand__?: "platform-web" | undefined;
-}> & Pick<MakeObjectResponsive<PickCSSByPlatform<"grid" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate">>, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
+} & Partial<Omit<MarginProps & Pick<{
+    alignContent?: csstype.Property.AlignContent | {
+        readonly base?: csstype.Property.AlignContent | undefined;
+        readonly xs?: csstype.Property.AlignContent | undefined;
+        readonly s?: csstype.Property.AlignContent | undefined;
+        readonly m?: csstype.Property.AlignContent | undefined;
+        readonly l?: csstype.Property.AlignContent | undefined;
+        readonly xl?: csstype.Property.AlignContent | undefined;
+    } | undefined;
+    alignItems?: csstype.Property.AlignItems | {
+        readonly base?: csstype.Property.AlignItems | undefined;
+        readonly xs?: csstype.Property.AlignItems | undefined;
+        readonly s?: csstype.Property.AlignItems | undefined;
+        readonly m?: csstype.Property.AlignItems | undefined;
+        readonly l?: csstype.Property.AlignItems | undefined;
+        readonly xl?: csstype.Property.AlignItems | undefined;
+    } | undefined;
+    alignSelf?: csstype.Property.AlignSelf | {
+        readonly base?: csstype.Property.AlignSelf | undefined;
+        readonly xs?: csstype.Property.AlignSelf | undefined;
+        readonly s?: csstype.Property.AlignSelf | undefined;
+        readonly m?: csstype.Property.AlignSelf | undefined;
+        readonly l?: csstype.Property.AlignSelf | undefined;
+        readonly xl?: csstype.Property.AlignSelf | undefined;
+    } | undefined;
+    columnGap: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    flexBasis?: csstype.Property.FlexBasis<string | number> | {
+        readonly base?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly xs?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly s?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly m?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly l?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly xl?: csstype.Property.FlexBasis<string | number> | undefined;
+    } | undefined;
+    flexDirection?: csstype.Property.FlexDirection | {
+        readonly base?: csstype.Property.FlexDirection | undefined;
+        readonly xs?: csstype.Property.FlexDirection | undefined;
+        readonly s?: csstype.Property.FlexDirection | undefined;
+        readonly m?: csstype.Property.FlexDirection | undefined;
+        readonly l?: csstype.Property.FlexDirection | undefined;
+        readonly xl?: csstype.Property.FlexDirection | undefined;
+    } | undefined;
+    flexGrow?: csstype.Property.FlexGrow | {
+        readonly base?: csstype.Property.FlexGrow | undefined;
+        readonly xs?: csstype.Property.FlexGrow | undefined;
+        readonly s?: csstype.Property.FlexGrow | undefined;
+        readonly m?: csstype.Property.FlexGrow | undefined;
+        readonly l?: csstype.Property.FlexGrow | undefined;
+        readonly xl?: csstype.Property.FlexGrow | undefined;
+    } | undefined;
+    flexShrink?: csstype.Property.FlexShrink | {
+        readonly base?: csstype.Property.FlexShrink | undefined;
+        readonly xs?: csstype.Property.FlexShrink | undefined;
+        readonly s?: csstype.Property.FlexShrink | undefined;
+        readonly m?: csstype.Property.FlexShrink | undefined;
+        readonly l?: csstype.Property.FlexShrink | undefined;
+        readonly xl?: csstype.Property.FlexShrink | undefined;
+    } | undefined;
+    flexWrap?: csstype.Property.FlexWrap | {
+        readonly base?: csstype.Property.FlexWrap | undefined;
+        readonly xs?: csstype.Property.FlexWrap | undefined;
+        readonly s?: csstype.Property.FlexWrap | undefined;
+        readonly m?: csstype.Property.FlexWrap | undefined;
+        readonly l?: csstype.Property.FlexWrap | undefined;
+        readonly xl?: csstype.Property.FlexWrap | undefined;
+    } | undefined;
+    justifyContent?: csstype.Property.JustifyContent | {
+        readonly base?: csstype.Property.JustifyContent | undefined;
+        readonly xs?: csstype.Property.JustifyContent | undefined;
+        readonly s?: csstype.Property.JustifyContent | undefined;
+        readonly m?: csstype.Property.JustifyContent | undefined;
+        readonly l?: csstype.Property.JustifyContent | undefined;
+        readonly xl?: csstype.Property.JustifyContent | undefined;
+    } | undefined;
+    justifyItems?: csstype.Property.JustifyItems | {
+        readonly base?: csstype.Property.JustifyItems | undefined;
+        readonly xs?: csstype.Property.JustifyItems | undefined;
+        readonly s?: csstype.Property.JustifyItems | undefined;
+        readonly m?: csstype.Property.JustifyItems | undefined;
+        readonly l?: csstype.Property.JustifyItems | undefined;
+        readonly xl?: csstype.Property.JustifyItems | undefined;
+    } | undefined;
+    justifySelf?: csstype.Property.JustifySelf | {
+        readonly base?: csstype.Property.JustifySelf | undefined;
+        readonly xs?: csstype.Property.JustifySelf | undefined;
+        readonly s?: csstype.Property.JustifySelf | undefined;
+        readonly m?: csstype.Property.JustifySelf | undefined;
+        readonly l?: csstype.Property.JustifySelf | undefined;
+        readonly xl?: csstype.Property.JustifySelf | undefined;
+    } | undefined;
+    order?: csstype.Property.Order | {
+        readonly base?: csstype.Property.Order | undefined;
+        readonly xs?: csstype.Property.Order | undefined;
+        readonly s?: csstype.Property.Order | undefined;
+        readonly m?: csstype.Property.Order | undefined;
+        readonly l?: csstype.Property.Order | undefined;
+        readonly xl?: csstype.Property.Order | undefined;
+    } | undefined;
+    rowGap: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    flex: string | number | {
+        readonly base?: string | number | undefined;
+        readonly xs?: string | number | undefined;
+        readonly s?: string | number | undefined;
+        readonly m?: string | number | undefined;
+        readonly l?: string | number | undefined;
+        readonly xl?: string | number | undefined;
+    };
+    gap: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    placeSelf?: csstype.Property.PlaceSelf | {
+        readonly base?: csstype.Property.PlaceSelf | undefined;
+        readonly xs?: csstype.Property.PlaceSelf | undefined;
+        readonly s?: csstype.Property.PlaceSelf | undefined;
+        readonly m?: csstype.Property.PlaceSelf | undefined;
+        readonly l?: csstype.Property.PlaceSelf | undefined;
+        readonly xl?: csstype.Property.PlaceSelf | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+}, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & {
+    bottom: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    left: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    position?: csstype.Property.Position | {
+        readonly base?: csstype.Property.Position | undefined;
+        readonly xs?: csstype.Property.Position | undefined;
+        readonly s?: csstype.Property.Position | undefined;
+        readonly m?: csstype.Property.Position | undefined;
+        readonly l?: csstype.Property.Position | undefined;
+        readonly xl?: csstype.Property.Position | undefined;
+    } | undefined;
+    right: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    top: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    zIndex?: csstype.Property.ZIndex | {
+        readonly base?: csstype.Property.ZIndex | undefined;
+        readonly xs?: csstype.Property.ZIndex | undefined;
+        readonly s?: csstype.Property.ZIndex | undefined;
+        readonly m?: csstype.Property.ZIndex | undefined;
+        readonly l?: csstype.Property.ZIndex | undefined;
+        readonly xl?: csstype.Property.ZIndex | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+} & Pick<{
+    grid?: csstype.Property.Grid | {
+        readonly base?: csstype.Property.Grid | undefined;
+        readonly xs?: csstype.Property.Grid | undefined;
+        readonly s?: csstype.Property.Grid | undefined;
+        readonly m?: csstype.Property.Grid | undefined;
+        readonly l?: csstype.Property.Grid | undefined;
+        readonly xl?: csstype.Property.Grid | undefined;
+    } | undefined;
+    gridAutoColumns?: csstype.Property.GridAutoColumns<string | number> | {
+        readonly base?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly xs?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly s?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly m?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly l?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly xl?: csstype.Property.GridAutoColumns<string | number> | undefined;
+    } | undefined;
+    gridAutoFlow?: csstype.Property.GridAutoFlow | {
+        readonly base?: csstype.Property.GridAutoFlow | undefined;
+        readonly xs?: csstype.Property.GridAutoFlow | undefined;
+        readonly s?: csstype.Property.GridAutoFlow | undefined;
+        readonly m?: csstype.Property.GridAutoFlow | undefined;
+        readonly l?: csstype.Property.GridAutoFlow | undefined;
+        readonly xl?: csstype.Property.GridAutoFlow | undefined;
+    } | undefined;
+    gridAutoRows?: csstype.Property.GridAutoRows<string | number> | {
+        readonly base?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly xs?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly s?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly m?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly l?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly xl?: csstype.Property.GridAutoRows<string | number> | undefined;
+    } | undefined;
+    gridColumnEnd?: csstype.Property.GridColumnEnd | {
+        readonly base?: csstype.Property.GridColumnEnd | undefined;
+        readonly xs?: csstype.Property.GridColumnEnd | undefined;
+        readonly s?: csstype.Property.GridColumnEnd | undefined;
+        readonly m?: csstype.Property.GridColumnEnd | undefined;
+        readonly l?: csstype.Property.GridColumnEnd | undefined;
+        readonly xl?: csstype.Property.GridColumnEnd | undefined;
+    } | undefined;
+    gridColumnStart?: csstype.Property.GridColumnStart | {
+        readonly base?: csstype.Property.GridColumnStart | undefined;
+        readonly xs?: csstype.Property.GridColumnStart | undefined;
+        readonly s?: csstype.Property.GridColumnStart | undefined;
+        readonly m?: csstype.Property.GridColumnStart | undefined;
+        readonly l?: csstype.Property.GridColumnStart | undefined;
+        readonly xl?: csstype.Property.GridColumnStart | undefined;
+    } | undefined;
+    gridRowEnd?: csstype.Property.GridRowEnd | {
+        readonly base?: csstype.Property.GridRowEnd | undefined;
+        readonly xs?: csstype.Property.GridRowEnd | undefined;
+        readonly s?: csstype.Property.GridRowEnd | undefined;
+        readonly m?: csstype.Property.GridRowEnd | undefined;
+        readonly l?: csstype.Property.GridRowEnd | undefined;
+        readonly xl?: csstype.Property.GridRowEnd | undefined;
+    } | undefined;
+    gridRowStart?: csstype.Property.GridRowStart | {
+        readonly base?: csstype.Property.GridRowStart | undefined;
+        readonly xs?: csstype.Property.GridRowStart | undefined;
+        readonly s?: csstype.Property.GridRowStart | undefined;
+        readonly m?: csstype.Property.GridRowStart | undefined;
+        readonly l?: csstype.Property.GridRowStart | undefined;
+        readonly xl?: csstype.Property.GridRowStart | undefined;
+    } | undefined;
+    gridTemplateAreas?: csstype.Property.GridTemplateAreas | {
+        readonly base?: csstype.Property.GridTemplateAreas | undefined;
+        readonly xs?: csstype.Property.GridTemplateAreas | undefined;
+        readonly s?: csstype.Property.GridTemplateAreas | undefined;
+        readonly m?: csstype.Property.GridTemplateAreas | undefined;
+        readonly l?: csstype.Property.GridTemplateAreas | undefined;
+        readonly xl?: csstype.Property.GridTemplateAreas | undefined;
+    } | undefined;
+    gridTemplateColumns?: csstype.Property.GridTemplateColumns<string | number> | {
+        readonly base?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly xs?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly s?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly m?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly l?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly xl?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+    } | undefined;
+    gridTemplateRows?: csstype.Property.GridTemplateRows<string | number> | {
+        readonly base?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly xs?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly s?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly m?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly l?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly xl?: csstype.Property.GridTemplateRows<string | number> | undefined;
+    } | undefined;
+    gridArea?: csstype.Property.GridArea | {
+        readonly base?: csstype.Property.GridArea | undefined;
+        readonly xs?: csstype.Property.GridArea | undefined;
+        readonly s?: csstype.Property.GridArea | undefined;
+        readonly m?: csstype.Property.GridArea | undefined;
+        readonly l?: csstype.Property.GridArea | undefined;
+        readonly xl?: csstype.Property.GridArea | undefined;
+    } | undefined;
+    gridColumn?: csstype.Property.GridColumn | {
+        readonly base?: csstype.Property.GridColumn | undefined;
+        readonly xs?: csstype.Property.GridColumn | undefined;
+        readonly s?: csstype.Property.GridColumn | undefined;
+        readonly m?: csstype.Property.GridColumn | undefined;
+        readonly l?: csstype.Property.GridColumn | undefined;
+        readonly xl?: csstype.Property.GridColumn | undefined;
+    } | undefined;
+    gridRow?: csstype.Property.GridRow | {
+        readonly base?: csstype.Property.GridRow | undefined;
+        readonly xs?: csstype.Property.GridRow | undefined;
+        readonly s?: csstype.Property.GridRow | undefined;
+        readonly m?: csstype.Property.GridRow | undefined;
+        readonly l?: csstype.Property.GridRow | undefined;
+        readonly xl?: csstype.Property.GridRow | undefined;
+    } | undefined;
+    gridTemplate?: csstype.Property.GridTemplate | {
+        readonly base?: csstype.Property.GridTemplate | undefined;
+        readonly xs?: csstype.Property.GridTemplate | undefined;
+        readonly s?: csstype.Property.GridTemplate | undefined;
+        readonly m?: csstype.Property.GridTemplate | undefined;
+        readonly l?: csstype.Property.GridTemplate | undefined;
+        readonly xl?: csstype.Property.GridTemplate | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+}, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
 
 declare type FormInputOnEventWithIndex = ({ name, value, inputIndex, }: {
     name?: string;
@@ -4608,6 +6221,95 @@ declare function clearAnnouncer(assertiveness: Assertiveness): void;
  */
 declare function destroyAnnouncer(): void;
 
+declare type BaseHeaderProps = {
+    title?: string;
+    subtitle?: string;
+    /**
+     * Leading part of the header placed at the left most side of the header
+     */
+    leading?: React__default.ReactNode;
+    /**
+     * Trailing part of the header placed at the right most side of the header
+     */
+    trailing?: React__default.ReactNode;
+    /**
+     * Placed adjacent to the title text
+     */
+    titleSuffix?: React__default.ReactNode;
+    /**
+     * @default true
+     */
+    showDivider?: boolean;
+    /**
+     * @default false
+     */
+    showBackButton?: boolean;
+    /**
+     * @default true
+     */
+    showCloseButton?: boolean;
+    onCloseButtonClick?: () => void;
+    onBackButtonClick?: () => void;
+    closeButtonRef: React__default.MutableRefObject<any>;
+    metaComponentName?: string;
+} & Pick<ReactDOMAttributes, 'onClickCapture' | 'onKeyDown' | 'onKeyUp' | 'onLostPointerCapture' | 'onPointerCancel' | 'onPointerDown' | 'onPointerMove' | 'onPointerUp'>;
+
+declare type ModalHeaderProps = Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'trailing' | 'titleSuffix'>;
+declare const ModalHeader: ({ leading, subtitle, title, titleSuffix, trailing, }: ModalHeaderProps) => React.ReactElement;
+
+declare type BaseFooterProps$1 = {
+    children: React__default.ReactNode;
+    metaComponentName?: string;
+    showDivider?: boolean;
+};
+
+declare type ModalFooterProps = Pick<BaseFooterProps$1, 'children'>;
+declare const ModalFooter: (props: ModalFooterProps) => React__default.ReactElement;
+
+declare type ModalBodyProps = {
+    children: React__default.ReactNode;
+    /**
+     * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately
+     * @default `spacing.6`
+     *
+     * **Links:**
+     * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--page
+     */
+    padding?: Extract<SpacingValueType$1, 'spacing.0' | 'spacing.6'>;
+};
+declare const ModalBody: ({ children, padding }: ModalBodyProps) => React__default.ReactElement;
+
+declare type ModalProps = {
+    /**
+     *  Children of Modal
+     * Only ModalHeader, ModalBody and ModalFooter are allowed as children
+     */
+    children: React__default.ReactNode;
+    /**
+     Sets the modal to open or close
+     * @default false
+     */
+    isOpen: boolean;
+    /**
+     *  Callback function when user clicks on close button or outside the modal or on pressing escape key.
+     */
+    onDismiss: () => void;
+    /**
+     *  Ref to the element to be focused on opening the modal.
+     */
+    initialFocusRef?: React__default.MutableRefObject<any>;
+    /**
+     *  Size of the modal
+     * @default 'small'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     *  Accessibility label for the modal
+     */
+    accessibilityLabel?: string;
+};
+declare const Modal: ({ isOpen, children, onDismiss, initialFocusRef, size, accessibilityLabel, }: ModalProps) => React__default.ReactElement;
+
 declare type ProgressBarCommonProps = {
     /**
      * Sets aria-label to help users know what the progress bar is for. Default value is the same as the `label` passed.
@@ -4738,29 +6440,338 @@ declare const Radio: React__default.ForwardRefExoticComponent<{
      * @default "medium"
      */
     size?: "small" | "medium" | undefined;
-} & TestID & Partial<Omit<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;
-    flex: string | number;
-} & PickIfExist$1<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
-    __brand__?: "platform-web" | undefined;
-}>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
-    top: SpacingValueType;
-    right: SpacingValueType;
-    bottom: SpacingValueType;
-    left: SpacingValueType;
-} & PickIfExist$1<styled_components.CSSObject, "position" | "zIndex"> & {
-    __brand__?: "platform-web" | undefined;
-}> & Pick<MakeObjectResponsive<PickCSSByPlatform$1<"grid" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate">>, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
+} & TestID & Partial<Omit<MarginProps & Pick<{
+    alignContent?: csstype.Property.AlignContent | {
+        readonly base?: csstype.Property.AlignContent | undefined;
+        readonly xs?: csstype.Property.AlignContent | undefined;
+        readonly s?: csstype.Property.AlignContent | undefined;
+        readonly m?: csstype.Property.AlignContent | undefined;
+        readonly l?: csstype.Property.AlignContent | undefined;
+        readonly xl?: csstype.Property.AlignContent | undefined;
+    } | undefined;
+    alignItems?: csstype.Property.AlignItems | {
+        readonly base?: csstype.Property.AlignItems | undefined;
+        readonly xs?: csstype.Property.AlignItems | undefined;
+        readonly s?: csstype.Property.AlignItems | undefined;
+        readonly m?: csstype.Property.AlignItems | undefined;
+        readonly l?: csstype.Property.AlignItems | undefined;
+        readonly xl?: csstype.Property.AlignItems | undefined;
+    } | undefined;
+    alignSelf?: csstype.Property.AlignSelf | {
+        readonly base?: csstype.Property.AlignSelf | undefined;
+        readonly xs?: csstype.Property.AlignSelf | undefined;
+        readonly s?: csstype.Property.AlignSelf | undefined;
+        readonly m?: csstype.Property.AlignSelf | undefined;
+        readonly l?: csstype.Property.AlignSelf | undefined;
+        readonly xl?: csstype.Property.AlignSelf | undefined;
+    } | undefined;
+    columnGap: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    flexBasis?: csstype.Property.FlexBasis<string | number> | {
+        readonly base?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly xs?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly s?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly m?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly l?: csstype.Property.FlexBasis<string | number> | undefined;
+        readonly xl?: csstype.Property.FlexBasis<string | number> | undefined;
+    } | undefined;
+    flexDirection?: csstype.Property.FlexDirection | {
+        readonly base?: csstype.Property.FlexDirection | undefined;
+        readonly xs?: csstype.Property.FlexDirection | undefined;
+        readonly s?: csstype.Property.FlexDirection | undefined;
+        readonly m?: csstype.Property.FlexDirection | undefined;
+        readonly l?: csstype.Property.FlexDirection | undefined;
+        readonly xl?: csstype.Property.FlexDirection | undefined;
+    } | undefined;
+    flexGrow?: csstype.Property.FlexGrow | {
+        readonly base?: csstype.Property.FlexGrow | undefined;
+        readonly xs?: csstype.Property.FlexGrow | undefined;
+        readonly s?: csstype.Property.FlexGrow | undefined;
+        readonly m?: csstype.Property.FlexGrow | undefined;
+        readonly l?: csstype.Property.FlexGrow | undefined;
+        readonly xl?: csstype.Property.FlexGrow | undefined;
+    } | undefined;
+    flexShrink?: csstype.Property.FlexShrink | {
+        readonly base?: csstype.Property.FlexShrink | undefined;
+        readonly xs?: csstype.Property.FlexShrink | undefined;
+        readonly s?: csstype.Property.FlexShrink | undefined;
+        readonly m?: csstype.Property.FlexShrink | undefined;
+        readonly l?: csstype.Property.FlexShrink | undefined;
+        readonly xl?: csstype.Property.FlexShrink | undefined;
+    } | undefined;
+    flexWrap?: csstype.Property.FlexWrap | {
+        readonly base?: csstype.Property.FlexWrap | undefined;
+        readonly xs?: csstype.Property.FlexWrap | undefined;
+        readonly s?: csstype.Property.FlexWrap | undefined;
+        readonly m?: csstype.Property.FlexWrap | undefined;
+        readonly l?: csstype.Property.FlexWrap | undefined;
+        readonly xl?: csstype.Property.FlexWrap | undefined;
+    } | undefined;
+    justifyContent?: csstype.Property.JustifyContent | {
+        readonly base?: csstype.Property.JustifyContent | undefined;
+        readonly xs?: csstype.Property.JustifyContent | undefined;
+        readonly s?: csstype.Property.JustifyContent | undefined;
+        readonly m?: csstype.Property.JustifyContent | undefined;
+        readonly l?: csstype.Property.JustifyContent | undefined;
+        readonly xl?: csstype.Property.JustifyContent | undefined;
+    } | undefined;
+    justifyItems?: csstype.Property.JustifyItems | {
+        readonly base?: csstype.Property.JustifyItems | undefined;
+        readonly xs?: csstype.Property.JustifyItems | undefined;
+        readonly s?: csstype.Property.JustifyItems | undefined;
+        readonly m?: csstype.Property.JustifyItems | undefined;
+        readonly l?: csstype.Property.JustifyItems | undefined;
+        readonly xl?: csstype.Property.JustifyItems | undefined;
+    } | undefined;
+    justifySelf?: csstype.Property.JustifySelf | {
+        readonly base?: csstype.Property.JustifySelf | undefined;
+        readonly xs?: csstype.Property.JustifySelf | undefined;
+        readonly s?: csstype.Property.JustifySelf | undefined;
+        readonly m?: csstype.Property.JustifySelf | undefined;
+        readonly l?: csstype.Property.JustifySelf | undefined;
+        readonly xl?: csstype.Property.JustifySelf | undefined;
+    } | undefined;
+    order?: csstype.Property.Order | {
+        readonly base?: csstype.Property.Order | undefined;
+        readonly xs?: csstype.Property.Order | undefined;
+        readonly s?: csstype.Property.Order | undefined;
+        readonly m?: csstype.Property.Order | undefined;
+        readonly l?: csstype.Property.Order | undefined;
+        readonly xl?: csstype.Property.Order | undefined;
+    } | undefined;
+    rowGap: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    flex: string | number | {
+        readonly base?: string | number | undefined;
+        readonly xs?: string | number | undefined;
+        readonly s?: string | number | undefined;
+        readonly m?: string | number | undefined;
+        readonly l?: string | number | undefined;
+        readonly xl?: string | number | undefined;
+    };
+    gap: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    placeSelf?: csstype.Property.PlaceSelf | {
+        readonly base?: csstype.Property.PlaceSelf | undefined;
+        readonly xs?: csstype.Property.PlaceSelf | undefined;
+        readonly s?: csstype.Property.PlaceSelf | undefined;
+        readonly m?: csstype.Property.PlaceSelf | undefined;
+        readonly l?: csstype.Property.PlaceSelf | undefined;
+        readonly xl?: csstype.Property.PlaceSelf | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+}, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & {
+    bottom: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    left: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    position?: csstype.Property.Position | {
+        readonly base?: csstype.Property.Position | undefined;
+        readonly xs?: csstype.Property.Position | undefined;
+        readonly s?: csstype.Property.Position | undefined;
+        readonly m?: csstype.Property.Position | undefined;
+        readonly l?: csstype.Property.Position | undefined;
+        readonly xl?: csstype.Property.Position | undefined;
+    } | undefined;
+    right: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    top: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    zIndex?: csstype.Property.ZIndex | {
+        readonly base?: csstype.Property.ZIndex | undefined;
+        readonly xs?: csstype.Property.ZIndex | undefined;
+        readonly s?: csstype.Property.ZIndex | undefined;
+        readonly m?: csstype.Property.ZIndex | undefined;
+        readonly l?: csstype.Property.ZIndex | undefined;
+        readonly xl?: csstype.Property.ZIndex | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+} & Pick<{
+    grid?: csstype.Property.Grid | {
+        readonly base?: csstype.Property.Grid | undefined;
+        readonly xs?: csstype.Property.Grid | undefined;
+        readonly s?: csstype.Property.Grid | undefined;
+        readonly m?: csstype.Property.Grid | undefined;
+        readonly l?: csstype.Property.Grid | undefined;
+        readonly xl?: csstype.Property.Grid | undefined;
+    } | undefined;
+    gridAutoColumns?: csstype.Property.GridAutoColumns<string | number> | {
+        readonly base?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly xs?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly s?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly m?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly l?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly xl?: csstype.Property.GridAutoColumns<string | number> | undefined;
+    } | undefined;
+    gridAutoFlow?: csstype.Property.GridAutoFlow | {
+        readonly base?: csstype.Property.GridAutoFlow | undefined;
+        readonly xs?: csstype.Property.GridAutoFlow | undefined;
+        readonly s?: csstype.Property.GridAutoFlow | undefined;
+        readonly m?: csstype.Property.GridAutoFlow | undefined;
+        readonly l?: csstype.Property.GridAutoFlow | undefined;
+        readonly xl?: csstype.Property.GridAutoFlow | undefined;
+    } | undefined;
+    gridAutoRows?: csstype.Property.GridAutoRows<string | number> | {
+        readonly base?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly xs?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly s?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly m?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly l?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly xl?: csstype.Property.GridAutoRows<string | number> | undefined;
+    } | undefined;
+    gridColumnEnd?: csstype.Property.GridColumnEnd | {
+        readonly base?: csstype.Property.GridColumnEnd | undefined;
+        readonly xs?: csstype.Property.GridColumnEnd | undefined;
+        readonly s?: csstype.Property.GridColumnEnd | undefined;
+        readonly m?: csstype.Property.GridColumnEnd | undefined;
+        readonly l?: csstype.Property.GridColumnEnd | undefined;
+        readonly xl?: csstype.Property.GridColumnEnd | undefined;
+    } | undefined;
+    gridColumnStart?: csstype.Property.GridColumnStart | {
+        readonly base?: csstype.Property.GridColumnStart | undefined;
+        readonly xs?: csstype.Property.GridColumnStart | undefined;
+        readonly s?: csstype.Property.GridColumnStart | undefined;
+        readonly m?: csstype.Property.GridColumnStart | undefined;
+        readonly l?: csstype.Property.GridColumnStart | undefined;
+        readonly xl?: csstype.Property.GridColumnStart | undefined;
+    } | undefined;
+    gridRowEnd?: csstype.Property.GridRowEnd | {
+        readonly base?: csstype.Property.GridRowEnd | undefined;
+        readonly xs?: csstype.Property.GridRowEnd | undefined;
+        readonly s?: csstype.Property.GridRowEnd | undefined;
+        readonly m?: csstype.Property.GridRowEnd | undefined;
+        readonly l?: csstype.Property.GridRowEnd | undefined;
+        readonly xl?: csstype.Property.GridRowEnd | undefined;
+    } | undefined;
+    gridRowStart?: csstype.Property.GridRowStart | {
+        readonly base?: csstype.Property.GridRowStart | undefined;
+        readonly xs?: csstype.Property.GridRowStart | undefined;
+        readonly s?: csstype.Property.GridRowStart | undefined;
+        readonly m?: csstype.Property.GridRowStart | undefined;
+        readonly l?: csstype.Property.GridRowStart | undefined;
+        readonly xl?: csstype.Property.GridRowStart | undefined;
+    } | undefined;
+    gridTemplateAreas?: csstype.Property.GridTemplateAreas | {
+        readonly base?: csstype.Property.GridTemplateAreas | undefined;
+        readonly xs?: csstype.Property.GridTemplateAreas | undefined;
+        readonly s?: csstype.Property.GridTemplateAreas | undefined;
+        readonly m?: csstype.Property.GridTemplateAreas | undefined;
+        readonly l?: csstype.Property.GridTemplateAreas | undefined;
+        readonly xl?: csstype.Property.GridTemplateAreas | undefined;
+    } | undefined;
+    gridTemplateColumns?: csstype.Property.GridTemplateColumns<string | number> | {
+        readonly base?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly xs?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly s?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly m?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly l?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly xl?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+    } | undefined;
+    gridTemplateRows?: csstype.Property.GridTemplateRows<string | number> | {
+        readonly base?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly xs?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly s?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly m?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly l?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly xl?: csstype.Property.GridTemplateRows<string | number> | undefined;
+    } | undefined;
+    gridArea?: csstype.Property.GridArea | {
+        readonly base?: csstype.Property.GridArea | undefined;
+        readonly xs?: csstype.Property.GridArea | undefined;
+        readonly s?: csstype.Property.GridArea | undefined;
+        readonly m?: csstype.Property.GridArea | undefined;
+        readonly l?: csstype.Property.GridArea | undefined;
+        readonly xl?: csstype.Property.GridArea | undefined;
+    } | undefined;
+    gridColumn?: csstype.Property.GridColumn | {
+        readonly base?: csstype.Property.GridColumn | undefined;
+        readonly xs?: csstype.Property.GridColumn | undefined;
+        readonly s?: csstype.Property.GridColumn | undefined;
+        readonly m?: csstype.Property.GridColumn | undefined;
+        readonly l?: csstype.Property.GridColumn | undefined;
+        readonly xl?: csstype.Property.GridColumn | undefined;
+    } | undefined;
+    gridRow?: csstype.Property.GridRow | {
+        readonly base?: csstype.Property.GridRow | undefined;
+        readonly xs?: csstype.Property.GridRow | undefined;
+        readonly s?: csstype.Property.GridRow | undefined;
+        readonly m?: csstype.Property.GridRow | undefined;
+        readonly l?: csstype.Property.GridRow | undefined;
+        readonly xl?: csstype.Property.GridRow | undefined;
+    } | undefined;
+    gridTemplate?: csstype.Property.GridTemplate | {
+        readonly base?: csstype.Property.GridTemplate | undefined;
+        readonly xs?: csstype.Property.GridTemplate | undefined;
+        readonly s?: csstype.Property.GridTemplate | undefined;
+        readonly m?: csstype.Property.GridTemplate | undefined;
+        readonly l?: csstype.Property.GridTemplate | undefined;
+        readonly xl?: csstype.Property.GridTemplate | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+}, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
 
 declare type RadioGroupProps = {
     /**
@@ -4999,43 +7010,6 @@ declare type AmountProps = {
 } & TestID & StyledPropsBlade;
 declare const Amount: ({ value, suffix, size, isAffixSubtle, intent, prefix, testID, currency, ...styledProps }: AmountProps) => ReactElement;
 
-declare type BaseHeaderProps = {
-    title?: string;
-    subtitle?: string;
-    /**
-     * Leading part of the header placed at the left most side of the header
-     */
-    leading?: React__default.ReactNode;
-    /**
-     * Trailing part of the header placed at the right most side of the header
-     */
-    trailing?: React__default.ReactNode;
-    /**
-     * Placed adjacent to the title text
-     */
-    titleSuffix?: React__default.ReactNode;
-    /**
-     * @default true
-     */
-    showDivider?: boolean;
-    /**
-     * @default false
-     */
-    showBackButton?: boolean;
-    /**
-     * @default true
-     */
-    showCloseButton?: boolean;
-    onCloseButtonClick?: () => void;
-    onBackButtonClick?: () => void;
-    closeButtonRef: React__default.MutableRefObject<any>;
-} & Pick<ReactDOMAttributes, 'onClickCapture' | 'onKeyDown' | 'onKeyUp' | 'onLostPointerCapture' | 'onPointerCancel' | 'onPointerDown' | 'onPointerMove' | 'onPointerUp'>;
-
-declare type BaseFooterProps$1 = {
-    children: React__default.ReactNode;
-    showDivider?: boolean;
-};
-
 declare type SnapPoints = [number, number, number];
 
 declare type BottomSheetProps = {
@@ -5086,6 +7060,7 @@ declare const BottomSheetHeader: ({ title, subtitle, leading, titleSuffix, trail
 
 type BaseFooterProps = {
   children: React__default.ReactNode;
+  metaComponentName?: string;
   showDivider?: boolean;
 };
 
@@ -5097,4 +7072,4 @@ declare const BottomSheetBody: ({ children }: {
 
 declare const BottomSheet: ({ isOpen, onDismiss, children, initialFocusRef, snapPoints, }: BottomSheetProps) => React__default.ReactElement;
 
-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, Amount, AmountProps, 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, BottomSheet, BottomSheetBody, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, 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, DropdownButton, DropdownLink, 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, LinkButtonVariantProps, 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, Switch, SwitchProps, 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, useActionListContext, useTheme };
+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, Amount, AmountProps, 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, BottomSheet, BottomSheetBody, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, 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, DropdownButton, DropdownLink, 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, LinkButtonVariantProps, 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, Modal, ModalBody, ModalBodyProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalProps, 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, Switch, SwitchProps, 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, useActionListContext, useTheme };