@razorpay/blade 8.8.0 → 8.8.2

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,7 +1073,14 @@ 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 = 'px' | '%' | 'fr' | 'rem' | 'em' | 'vh' | 'vw';
@@ -1322,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'
@@ -1345,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'
@@ -1726,8 +1733,8 @@ 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?];
@@ -2170,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.
@@ -2199,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']>}`;
@@ -2273,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>;
@@ -2334,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[];
@@ -2617,6 +3013,37 @@ declare type ButtonWithIconProps = ButtonCommonProps & {
 declare type ButtonProps = ButtonWithoutIconProps | ButtonWithIconProps;
 declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<BladeElementRef>>;
 
+declare type CounterProps = {
+    /**
+     * Sets the value for the counter.
+     */
+    value: number;
+    /**
+     * Sets the max value for the counter.
+     * If value exceedes `max` it will render `value+`
+     */
+    max?: number;
+    /**
+     * Sets the intent of the counter.
+     *
+     * @default 'neutral'
+     */
+    intent?: Feedback;
+    /**
+     * Sets the contrast of the counter.
+     *
+     * @default 'low'
+     */
+    contrast?: 'high' | 'low';
+    /**
+     * Sets the size of the counter.
+     *
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+} & TestID & StyledPropsBlade;
+declare const Counter: ({ value, max, intent, contrast, size, testID, ...styledProps }: CounterProps) => React.ReactElement;
+
 type FeedbackColors$1 = `feedback.text.${DotNotationColorStringToken<
   Theme$1['colors']['feedback']['text']
 >}`;
@@ -2703,41 +3130,10 @@ type TextProps$1<T> = T extends {
     : T
   : T;
 
-type CounterProps$1 = {
-  /**
-   * Sets the value for the counter.
-   */
-  value: number;
-  /**
-   * Sets the max value for the counter.
-   * If value exceedes `max` it will render `value+`
-   */
-  max?: number;
-  /**
-   * Sets the intent of the counter.
-   *
-   * @default 'neutral'
-   */
-  intent?: Feedback;
-  /**
-   * Sets the contrast of the counter.
-   *
-   * @default 'low'
-   */
-  contrast?: 'high' | 'low';
-  /**
-   * Sets the size of the counter.
-   *
-   * @default 'medium'
-   */
-  size?: 'small' | 'medium' | 'large';
-} & TestID &
-  StyledPropsBlade;
-
 declare const CardHeaderIcon: ({ icon }: {
     icon: IconComponent$1;
 }) => React__default.ReactElement;
-declare const CardHeaderCounter: (props: CounterProps$1) => React__default.ReactElement;
+declare const CardHeaderCounter: (props: CounterProps) => React__default.ReactElement;
 declare const CardHeaderBadge: (props: BadgeProps) => React__default.ReactElement;
 declare const CardHeaderText: (props: TextProps$1<{
     variant: TextVariant$1;
@@ -2823,37 +3219,6 @@ declare type IconButtonProps = {
 };
 declare const IconButton: React__default.ForwardRefExoticComponent<IconButtonProps & React__default.RefAttributes<BladeElementRef>>;
 
-declare type CounterProps = {
-    /**
-     * Sets the value for the counter.
-     */
-    value: number;
-    /**
-     * Sets the max value for the counter.
-     * If value exceedes `max` it will render `value+`
-     */
-    max?: number;
-    /**
-     * Sets the intent of the counter.
-     *
-     * @default 'neutral'
-     */
-    intent?: Feedback;
-    /**
-     * Sets the contrast of the counter.
-     *
-     * @default 'low'
-     */
-    contrast?: 'high' | 'low';
-    /**
-     * Sets the size of the counter.
-     *
-     * @default 'medium'
-     */
-    size?: 'small' | 'medium' | 'large';
-} & TestID & StyledPropsBlade;
-declare const Counter: ({ value, max, intent, contrast, size, testID, ...styledProps }: CounterProps) => React.ReactElement;
-
 declare type OnChange$1 = ({ isChecked, event, value, }: {
     isChecked: boolean;
     event?: React__default.ChangeEvent;
@@ -3016,29 +3381,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 = {
     /**
@@ -3698,36 +4372,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
@@ -4071,29 +4715,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 = {
     /**
@@ -4126,29 +5079,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'> & {
     /**
@@ -4169,29 +5431,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;
@@ -4838,29 +6409,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 = {
     /**