@razorpay/blade 7.0.1 → 7.0.3

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

@@ -1,11 +1,9 @@
 /// <reference types="react" />
-/// <reference types="styled-components-react-native" />
-/// <reference types="~src/@types/globals" />
 import * as React$1 from 'react';
 import React__default, { ReactChild, ReactElement, ReactNode, SyntheticEvent, KeyboardEvent } from 'react';
-import * as styled_components from 'styled-components';
+import * as react_native from 'react-native';
+import { AccessibilityRole, ViewStyle, ImageSourcePropType, View, GestureResponderEvent } from 'react-native';
 import { CSSObject } from 'styled-components';
-import { AccessibilityRole, ImageSourcePropType, View, GestureResponderEvent } from 'react-native';
 
 type BorderRadius = Readonly<{
   /** none: 0(px/rem/pt) */
@@ -960,17 +958,49 @@ type StringChildrenType = React__default.ReactText | React__default.ReactText[];
  */
 type StringWithAutocomplete = string & Record<never, never>;
 
-type TestID$1 = {
+type TestID = {
   testID?: string;
 };
 
+/**
+ * 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>;
+ * ```
+ */
+type PickIfExist$1<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`
+ * ```
+ */
+type PickCSSByPlatform$1<T extends keyof React__default.CSSProperties | keyof ViewStyle> = Platform.Select<{
+  web: PickIfExist$1<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>;
+}>;
+
 declare type ActionListProps = {
     children: React__default.ReactNode[];
     /**
      * Decides the backgroundColor of ActionList
      */
     surfaceLevel?: 2 | 3;
-} & TestID$1;
+} & TestID;
 declare const ActionList: React__default.MemoExoticComponent<({ children, surfaceLevel, testID }: ActionListProps) => JSX.Element>;
 
 type Theme$1 = {
@@ -1007,12 +1037,16 @@ type Theme$1 = {
  * ```
  *
  */
-type MakeValueResponsive$1<T> =
-  | T
-  | {
-      // Using this instead of Record to maintain the jsdoc from breakpoints.ts
-      [P in keyof Breakpoints]?: T;
-    };
+// When type is `never`, we just want to return `never` rather than { base: never, ...etc } since that prop is intended to be never used
+// Explaination of [T] extends [never] -> https://stackoverflow.com/questions/65492464/typescript-never-type-condition
+type MakeValueResponsive$1<T> = [T] extends [never]
+  ? never
+  :
+      | T
+      | {
+          // Using this instead of Record to maintain the jsdoc from breakpoints.ts
+          [P in keyof Breakpoints]?: T;
+        };
 
 /**
  * Turns all the values in object into responsive object.
@@ -1250,10 +1284,6 @@ type MarginProps$1 = MakeObjectResponsive$1<{
   marginLeft: SpacingValueType$1;
 }>;
 
-type MakeObjectWebOnly$1<T> = {
-  [P in keyof T]: Platform.Select<{ web: T[P]; native: never }>;
-};
-
 type FlexboxProps$1 = MakeObjectResponsive$1<
   {
     /**
@@ -1277,9 +1307,13 @@ type FlexboxProps$1 = MakeObjectResponsive$1<
      * @see https://caniuse.com/?search=column-gap
      */
     columnGap: SpacingValueType$1;
-  } & Pick<
-    CSSObject,
-    | 'flex'
+    /**
+     * The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/flex
+     */
+    flex: string | number;
+  } & PickCSSByPlatform$1<
     | 'flexWrap'
     | 'flexDirection'
     | 'flexGrow'
@@ -1302,46 +1336,46 @@ type PositionProps$1 = MakeObjectResponsive$1<
     right: SpacingValueType$1;
     bottom: SpacingValueType$1;
     left: SpacingValueType$1;
-  } & Pick<CSSObject, 'position' | 'zIndex'>
+  } & PickCSSByPlatform$1<'position' | 'zIndex'>
 >;
 
-type GridProps$1 = MakeObjectWebOnly$1<
-  MakeObjectResponsive$1<
-    Pick<
-      CSSObject,
-      | 'grid'
-      | 'gridColumn'
-      | 'gridRow'
-      | 'gridRowStart'
-      | 'gridRowEnd'
-      | 'gridColumnStart'
-      | 'gridColumnEnd'
-      | 'gridArea'
-      | 'gridAutoFlow'
-      | 'gridAutoRows'
-      | 'gridAutoColumns'
-      | 'gridTemplate'
-      | 'gridTemplateAreas'
-      | 'gridTemplateColumns'
-      | 'gridTemplateRows'
-    >
+type GridProps$1 = MakeObjectResponsive$1<
+  PickCSSByPlatform$1<
+    | 'grid'
+    | 'gridColumn'
+    | 'gridRow'
+    | 'gridRowStart'
+    | 'gridRowEnd'
+    | 'gridColumnStart'
+    | 'gridColumnEnd'
+    | 'gridArea'
+    | 'gridAutoFlow'
+    | 'gridAutoRows'
+    | 'gridAutoColumns'
+    | 'gridTemplate'
+    | 'gridTemplateAreas'
+    | 'gridTemplateColumns'
+    | 'gridTemplateRows'
   >
 >;
 
 type StyledPropsBlade = Partial<
-  MarginProps$1 &
-    Pick<FlexboxProps$1, 'alignSelf' | 'justifySelf' | 'placeSelf' | 'order'> &
-    PositionProps$1 &
-    Pick<
-      GridProps$1,
-      | 'gridColumn'
-      | 'gridRow'
-      | 'gridRowStart'
-      | 'gridRowEnd'
-      | 'gridColumnStart'
-      | 'gridColumnEnd'
-      | 'gridArea'
-    >
+  Omit<
+    MarginProps$1 &
+      Pick<FlexboxProps$1, 'alignSelf' | 'justifySelf' | 'placeSelf' | 'order'> &
+      PositionProps$1 &
+      Pick<
+        GridProps$1,
+        | 'gridColumn'
+        | 'gridRow'
+        | 'gridRowStart'
+        | 'gridRowEnd'
+        | 'gridColumnStart'
+        | 'gridColumnEnd'
+        | 'gridArea'
+      >,
+    '__brand__'
+  >
 >;
 
 type FeedbackIconColors$1 = `feedback.icon.${DotNotationColorStringToken<
@@ -1426,7 +1460,7 @@ declare type ActionListItemProps = {
      * @private
      */
     _index?: number;
-} & TestID$1;
+} & TestID;
 declare const ActionListSectionDivider: () => JSX.Element;
 declare type ActionListSectionProps = {
     title: string;
@@ -1439,7 +1473,7 @@ declare type ActionListSectionProps = {
      * @private
      */
     _hideDivider?: boolean;
-} & TestID$1;
+} & TestID;
 declare const ActionListSection: ({ title, children, testID, _hideDivider, }: ActionListSectionProps) => JSX.Element;
 declare const ActionListItemIcon: ({ icon }: {
     icon: IconComponent$1;
@@ -1457,7 +1491,7 @@ declare type ActionListHeaderProps = {
      * Valid children - `ActionListHeaderIcon`
      */
     leading?: React__default.ReactNode;
-} & TestID$1;
+} & TestID;
 declare const ActionListHeader: (props: ActionListHeaderProps) => JSX.Element;
 declare const ActionListHeaderIcon: ({ icon }: {
     icon: IconComponent$1;
@@ -1477,7 +1511,7 @@ declare type ActionListFooterProps = {
      * Anything can be passed here but maybe don't? Should ideally have Button or Tick Icon Buttons.
      */
     trailing?: React__default.ReactNode;
-} & TestID$1;
+} & TestID;
 declare const ActionListFooter: (props: ActionListFooterProps) => JSX.Element;
 declare const ActionListFooterIcon: ({ icon }: {
     icon: IconComponent$1;
@@ -1567,7 +1601,7 @@ declare type AlertProps = {
          */
         secondary?: SecondaryAction;
     };
-} & TestID$1 & StyledPropsBlade;
+} & TestID & StyledPropsBlade;
 declare const Alert: ({ description, title, isDismissible, onDismiss, contrast, isFullWidth, intent, actions, testID, ...styledProps }: AlertProps) => ReactElement | null;
 
 declare type BadgeProps = {
@@ -1606,7 +1640,7 @@ declare type BadgeProps = {
      * @default 'regular'
      */
     fontWeight?: 'regular' | 'bold';
-} & TestID$1 & StyledPropsBlade;
+} & TestID & StyledPropsBlade;
 declare const Badge: ({ children, contrast, fontWeight, icon, size, variant, testID, ...styledProps }: BadgeProps) => ReactElement;
 
 declare type BladeProviderProps = {
@@ -1664,7 +1698,7 @@ declare type Theme = {
  * ```
  *
  */
-declare type MakeValueResponsive<T> = T | {
+declare type MakeValueResponsive<T> = [T] extends [never] ? never : T | {
     [P in keyof Breakpoints]?: T;
 };
 /**
@@ -2124,12 +2158,6 @@ declare type MarginProps = MakeObjectResponsive<{
     marginLeft: SpacingValueType;
 }>;
 
-declare type MakeObjectWebOnly<T> = {
-    [P in keyof T]: Platform.Select<{
-        web: T[P];
-        native: never;
-    }>;
-};
 declare type LayoutProps = MakeObjectResponsive<{
     height: SpacingValueType;
     minHeight: SpacingValueType;
@@ -2137,29 +2165,7 @@ declare type LayoutProps = MakeObjectResponsive<{
     width: SpacingValueType;
     minWidth: SpacingValueType;
     maxWidth: SpacingValueType;
-} & Pick<CSSObject, 'overflow' | 'overflowX' | 'overflowY'> & Platform.Select<{
-    web: {
-        /**
-         *
-         * On Web, The **`display`** CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
-         *
-         * @see https://developer.mozilla.org/docs/Web/CSS/display
-         */
-        display: CSSObject['display'];
-    };
-    native: {
-        /**
-         *
-         *
-         * On React Native, **`display`** property sets whether an element can be `flex` or `none`
-         *
-         * @see https://reactnative.dev/docs/layout-props.html#display
-         *
-         * @default 'flex'
-         */
-        display: 'none' | 'flex';
-    };
-}>>;
+} & PickCSSByPlatform$1<'display' | 'overflow' | 'overflowX' | 'overflowY'>>;
 declare type FlexboxProps = MakeObjectResponsive<{
     /**
      * This uses the native gap property which might not work on older browsers.
@@ -2182,14 +2188,20 @@ declare type FlexboxProps = MakeObjectResponsive<{
      * @see https://caniuse.com/?search=column-gap
      */
     columnGap: SpacingValueType;
-} & Pick<CSSObject, 'flex' | 'flexWrap' | 'flexDirection' | 'flexGrow' | 'flexShrink' | 'flexBasis' | 'alignItems' | 'alignContent' | 'alignSelf' | 'justifyItems' | 'justifyContent' | 'justifySelf' | 'placeSelf' | 'order'>>;
+    /**
+     * The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.
+     *
+     * @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'>>;
 declare type PositionProps = MakeObjectResponsive<{
     top: SpacingValueType;
     right: SpacingValueType;
     bottom: SpacingValueType;
     left: SpacingValueType;
-} & Pick<CSSObject, 'position' | 'zIndex'>>;
-declare type GridProps = MakeObjectWebOnly<MakeObjectResponsive<Pick<CSSObject, 'grid' | 'gridColumn' | 'gridRow' | 'gridRowStart' | 'gridRowEnd' | 'gridColumnStart' | 'gridColumnEnd' | 'gridArea' | 'gridAutoFlow' | 'gridAutoRows' | 'gridAutoColumns' | 'gridTemplate' | 'gridTemplateAreas' | 'gridTemplateColumns' | 'gridTemplateRows'>>>;
+} & 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'>>;
 declare type ColorObjects = 'feedback' | 'surface' | 'action';
 declare type BackgroundColorString<T extends ColorObjects> = `${T}.background.${DotNotationColorStringToken<Theme$1['colors'][T]['background']>}`;
 declare const validBoxAsValues: readonly ["div", "section", "footer", "header", "main", "aside", "nav", "span"];
@@ -2201,7 +2213,7 @@ declare type BoxVisualProps = MakeObjectResponsive<{
 };
 declare type BoxProps = Partial<PaddingProps & MarginProps & LayoutProps & FlexboxProps & PositionProps & GridProps & BoxVisualProps & {
     children?: React.ReactNode | React.ReactNode[];
-} & TestID$1>;
+} & TestID>;
 
 /**
  * ## Box
@@ -2275,11 +2287,11 @@ declare type CardProps = {
      * - Figma: https://shorturl.at/fsvwK
      */
     surfaceLevel?: 2 | 3;
-} & TestID$1 & StyledPropsBlade;
+} & TestID & StyledPropsBlade;
 declare const Card: ({ children, surfaceLevel, testID, ...styledProps }: CardProps) => React__default.ReactElement;
 declare type CardBodyProps = {
     children: React__default.ReactNode;
-} & TestID$1;
+} & TestID;
 declare const CardBody: ({ children, testID }: CardBodyProps) => React__default.ReactElement;
 
 declare type LinkCommonProps = {
@@ -2297,7 +2309,7 @@ declare type LinkCommonProps = {
      * @default medium
      */
     size?: 'small' | 'medium' | 'large';
-} & TestID$1 & StyledPropsBlade & Platform.Select<{
+} & TestID & StyledPropsBlade & Platform.Select<{
     native: {
         /**
          * Defines how far your touch can start away from the link
@@ -2308,12 +2320,20 @@ declare type LinkCommonProps = {
             bottom?: number;
             left?: number;
         } | number;
+        /**
+         * This is a web only prop and has no effect on react-native.
+         */
+        htmlTitle?: undefined;
     };
     web: {
         /**
          * This is a react-native only prop and has no effect on web.
          */
         hitSlop?: undefined;
+        /**
+         * The title of the link which is displayed as a tooltip.
+         */
+        htmlTitle?: string;
     };
 }>;
 declare type LinkWithoutIconProps = LinkCommonProps & {
@@ -2340,7 +2360,7 @@ declare type LinkButtonVariantProps = LinkPropsWithOrWithoutIcon & {
     rel?: undefined;
 };
 declare type LinkProps = LinkAnchorVariantProps | LinkButtonVariantProps;
-declare const Link: ({ children, icon, iconPosition, isDisabled, onClick, variant, href, target, rel, accessibilityLabel, size, testID, hitSlop, ...styledProps }: LinkProps) => ReactElement;
+declare const Link: ({ children, icon, iconPosition, isDisabled, onClick, variant, href, target, rel, accessibilityLabel, size, testID, hitSlop, htmlTitle, ...styledProps }: LinkProps) => ReactElement;
 
 type BladeElementRef = Pick<HTMLElement, 'focus' | 'scrollIntoView'> | Pick<View, 'focus'>;
 
@@ -2357,7 +2377,7 @@ declare type ButtonCommonProps = {
         native: (event: GestureResponderEvent) => void;
         web: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
     }>;
-} & TestID$1 & StyledPropsBlade;
+} & TestID & StyledPropsBlade;
 declare type ButtonWithoutIconProps = ButtonCommonProps & {
     icon?: undefined;
     children: StringChildrenType;
@@ -2407,7 +2427,7 @@ type BaseTextProps$1 = {
    */
   numberOfLines?: number;
   componentName?: 'text' | 'title' | 'heading' | 'code';
-} & TestID$1 &
+} & TestID &
   StyledPropsBlade;
 
 /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
@@ -2424,7 +2444,7 @@ type TextCommonProps$1 = {
    */
   color?: BaseTextProps$1['color'];
   textAlign?: BaseTextProps$1['textAlign'];
-} & TestID$1 &
+} & TestID &
   StyledPropsBlade;
 
 type TextVariant$1 = 'body' | 'caption';
@@ -2481,7 +2501,7 @@ type CounterProps$1 = {
    * @default 'medium'
    */
   size?: 'small' | 'medium' | 'large';
-} & TestID$1 &
+} & TestID &
   StyledPropsBlade;
 
 declare const CardHeaderIcon: ({ icon }: {
@@ -2499,7 +2519,7 @@ declare type CardHeaderIconButtonProps = Omit<ButtonProps, 'variant' | 'size' |
 declare const CardHeaderIconButton: (props: CardHeaderIconButtonProps) => React__default.ReactElement;
 declare type CardHeaderProps = {
     children?: React__default.ReactNode;
-} & TestID$1;
+} & TestID;
 declare const CardHeader: ({ children, testID }: CardHeaderProps) => React__default.ReactElement;
 declare type CardHeaderLeadingProps = {
     title: string;
@@ -2533,7 +2553,7 @@ declare type CardFooterAction = Pick<ButtonProps, 'type' | 'accessibilityLabel'
 };
 declare type CardFooterProps = {
     children?: React__default.ReactNode;
-} & TestID$1;
+} & TestID;
 declare const CardFooter: ({ children, testID }: CardFooterProps) => React__default.ReactElement;
 declare type CardFooterLeadingProps = {
     title?: string;
@@ -2605,7 +2625,7 @@ declare type CounterProps = {
      * @default 'medium'
      */
     size?: 'small' | 'medium' | 'large';
-} & TestID$1 & StyledPropsBlade;
+} & TestID & StyledPropsBlade;
 declare const Counter: ({ value, max, intent, contrast, size, testID, ...styledProps }: CounterProps) => React.ReactElement;
 
 declare type OnChange = ({ isChecked, event, value, }: {
@@ -2691,7 +2711,7 @@ declare type CheckboxProps = {
      *
      */
     tabIndex?: number;
-} & TestID$1 & StyledPropsBlade;
+} & TestID & StyledPropsBlade;
 declare const Checkbox: React__default.ForwardRefExoticComponent<{
     /**
      * If `true`, The checkbox will be checked. This also makes the checkbox controlled
@@ -2770,7 +2790,7 @@ declare const Checkbox: React__default.ForwardRefExoticComponent<{
      *
      */
     tabIndex?: number | undefined;
-} & TestID$1 & Partial<MakeObjectResponsive<{
+} & TestID & Partial<Omit<MakeObjectResponsive<{
     margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
     marginX: SpacingValueType;
     marginY: SpacingValueType;
@@ -2782,28 +2802,17 @@ declare const Checkbox: React__default.ForwardRefExoticComponent<{
     gap: SpacingValueType;
     rowGap: SpacingValueType;
     columnGap: SpacingValueType;
-} & Pick<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "flex" | "placeSelf">>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
+    flex: string | number;
+} & PickIfExist$1<react_native.ViewStyle, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
+    __brand__?: "platform-native" | undefined;
+}>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
     top: SpacingValueType;
     right: SpacingValueType;
     bottom: SpacingValueType;
     left: SpacingValueType;
-} & Pick<styled_components.CSSObject, "position" | "zIndex">> & Pick<{
-    grid?: undefined;
-    gridAutoColumns?: undefined;
-    gridAutoFlow?: undefined;
-    gridAutoRows?: undefined;
-    gridColumnEnd?: undefined;
-    gridColumnStart?: undefined;
-    gridRowEnd?: undefined;
-    gridRowStart?: undefined;
-    gridTemplateAreas?: undefined;
-    gridTemplateColumns?: undefined;
-    gridTemplateRows?: undefined;
-    gridArea?: undefined;
-    gridColumn?: undefined;
-    gridRow?: undefined;
-    gridTemplate?: undefined;
-}, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">> & React__default.RefAttributes<BladeElementRef>>;
+} & PickIfExist$1<react_native.ViewStyle, "position" | "zIndex"> & {
+    __brand__?: "platform-native" | 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>>;
 
 declare type CheckboxGroupProps = {
     /**
@@ -2878,7 +2887,7 @@ declare type CheckboxGroupProps = {
      * @default "medium"
      */
     size?: 'small' | 'medium';
-} & TestID$1 & StyledPropsBlade;
+} & TestID & StyledPropsBlade;
 declare const CheckboxGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, ...styledProps }: CheckboxGroupProps) => React__default.ReactElement;
 
 declare type DropdownProps = {
@@ -2889,7 +2898,7 @@ declare const Dropdown: ({ children, selectionType, ...styledProps }: DropdownPr
 
 declare type DropdownOverlayProps = {
     children: React__default.ReactNode;
-} & TestID$1;
+} & TestID;
 
 declare const DropdownOverlay: ({ children, testID }: DropdownOverlayProps) => JSX.Element;
 
@@ -3451,6 +3460,36 @@ 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
@@ -3702,7 +3741,7 @@ declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
      * sets the autocapitalize behavior for the input
      */
     autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
-} & TestID$1 & Platform.Select<{
+} & TestID & Platform.Select<{
     native: {
         /**
          * The callback function to be invoked when the value of the input field is submitted.
@@ -3738,6 +3777,14 @@ declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | '
     /**
      * Type of Input Field to be rendered. Use `PasswordInput` for type `password`
      *
+     *
+     * **Note on number type**
+     *
+     * `type="number"` internally uses `inputMode="numeric"` instead of HTML's `type="number"` which also allows text characters.
+     * If you have a usecase where you only want to support number input, you can handle it on validations end.
+     *
+     * Check out [Why the GOV.UK Design System team changed the input type for numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) for reasoning
+     *
      * @default text
      */
     type?: Type;
@@ -3762,10 +3809,18 @@ declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInput
     /**
      * Type of Input Field to be rendered. Use `PasswordInput` for type `password`
      *
+     *
+     * **Note on number type**
+     *
+     * `type="number"` internally uses `inputMode="numeric"` instead of HTML's `type="number"` which also allows text characters.
+     * If you have a usecase where you only want to support number input, you can handle it on validations end.
+     *
+     * Check out [Why the GOV.UK Design System team changed the input type for numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) for reasoning
+     *
      * @default text
      */
     type?: Type;
-} & Partial<MakeObjectResponsive<{
+} & Partial<Omit<MakeObjectResponsive<{
     margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
     marginX: SpacingValueType;
     marginY: SpacingValueType;
@@ -3777,28 +3832,19 @@ declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInput
     gap: SpacingValueType;
     rowGap: SpacingValueType;
     columnGap: SpacingValueType;
-} & Pick<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "flex" | "placeSelf">>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
+    flex: string | number; /**
+     * Decides whether to show a loading spinner for the input field.
+     */
+} & PickIfExist<react_native.ViewStyle, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
+    __brand__?: "platform-native" | undefined;
+}>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
     top: SpacingValueType;
     right: SpacingValueType;
     bottom: SpacingValueType;
     left: SpacingValueType;
-} & Pick<styled_components.CSSObject, "position" | "zIndex">> & Pick<{
-    grid?: undefined;
-    gridAutoColumns?: undefined;
-    gridAutoFlow?: undefined;
-    gridAutoRows?: undefined;
-    gridColumnEnd?: undefined;
-    gridColumnStart?: undefined;
-    gridRowEnd?: undefined;
-    gridRowStart?: undefined;
-    gridTemplateAreas?: undefined;
-    gridTemplateColumns?: undefined;
-    gridTemplateRows?: undefined;
-    gridArea?: undefined;
-    gridColumn?: undefined;
-    gridRow?: undefined;
-    gridTemplate?: undefined;
-}, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">> & React__default.RefAttributes<BladeElementRef>>;
+} & PickIfExist<react_native.ViewStyle, "position" | "zIndex"> & {
+    __brand__?: "platform-native" | 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 type PasswordInputExtraProps = {
     /**
@@ -3831,7 +3877,7 @@ 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, "testID" | "placeholder" | "name" | "label" | "value" | "onBlur" | "onFocus" | "defaultValue" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "validationState" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & PasswordInputExtraProps & Partial<MakeObjectResponsive<{
+declare const PasswordInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "name" | "label" | "value" | "onBlur" | "onFocus" | "defaultValue" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "validationState" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & PasswordInputExtraProps & Partial<Omit<MakeObjectResponsive<{
     margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
     marginX: SpacingValueType;
     marginY: SpacingValueType;
@@ -3843,28 +3889,17 @@ declare const PasswordInput: React__default.ForwardRefExoticComponent<Pick<BaseI
     gap: SpacingValueType;
     rowGap: SpacingValueType;
     columnGap: SpacingValueType;
-} & Pick<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "flex" | "placeSelf">>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
+    flex: string | number;
+} & PickIfExist<react_native.ViewStyle, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
+    __brand__?: "platform-native" | undefined;
+}>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
     top: SpacingValueType;
     right: SpacingValueType;
     bottom: SpacingValueType;
     left: SpacingValueType;
-} & Pick<styled_components.CSSObject, "position" | "zIndex">> & Pick<{
-    grid?: undefined;
-    gridAutoColumns?: undefined;
-    gridAutoFlow?: undefined;
-    gridAutoRows?: undefined;
-    gridColumnEnd?: undefined;
-    gridColumnStart?: undefined;
-    gridRowEnd?: undefined;
-    gridRowStart?: undefined;
-    gridTemplateAreas?: undefined;
-    gridTemplateColumns?: undefined;
-    gridTemplateRows?: undefined;
-    gridArea?: undefined;
-    gridColumn?: undefined;
-    gridRow?: undefined;
-    gridTemplate?: undefined;
-}, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">> & React__default.RefAttributes<BladeElementRef>>;
+} & PickIfExist<react_native.ViewStyle, "position" | "zIndex"> & {
+    __brand__?: "platform-native" | 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 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'> & {
     /**
@@ -3885,7 +3920,7 @@ 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<MakeObjectResponsive<{
+} & Partial<Omit<MakeObjectResponsive<{
     margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
     marginX: SpacingValueType;
     marginY: SpacingValueType;
@@ -3897,28 +3932,17 @@ declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputP
     gap: SpacingValueType;
     rowGap: SpacingValueType;
     columnGap: SpacingValueType;
-} & Pick<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "flex" | "placeSelf">>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
+    flex: string | number;
+} & PickIfExist<react_native.ViewStyle, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
+    __brand__?: "platform-native" | undefined;
+}>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
     top: SpacingValueType;
     right: SpacingValueType;
     bottom: SpacingValueType;
     left: SpacingValueType;
-} & Pick<styled_components.CSSObject, "position" | "zIndex">> & Pick<{
-    grid?: undefined;
-    gridAutoColumns?: undefined;
-    gridAutoFlow?: undefined;
-    gridAutoRows?: undefined;
-    gridColumnEnd?: undefined;
-    gridColumnStart?: undefined;
-    gridRowEnd?: undefined;
-    gridRowStart?: undefined;
-    gridTemplateAreas?: undefined;
-    gridTemplateColumns?: undefined;
-    gridTemplateRows?: undefined;
-    gridArea?: undefined;
-    gridColumn?: undefined;
-    gridRow?: undefined;
-    gridTemplate?: undefined;
-}, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">> & React__default.RefAttributes<BladeElementRef>>;
+} & PickIfExist<react_native.ViewStyle, "position" | "zIndex"> & {
+    __brand__?: "platform-native" | 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 type FormInputOnEventWithIndex = ({ name, value, inputIndex, }: {
     name?: string;
@@ -4033,7 +4057,7 @@ declare type IndicatorCommonProps = {
      * @default medium
      */
     size?: 'small' | 'medium' | 'large';
-} & TestID$1 & StyledPropsBlade;
+} & TestID & StyledPropsBlade;
 declare type IndicatorWithoutA11yLabel = {
     /**
      * A text label to show alongside the indicator dot
@@ -4073,7 +4097,7 @@ declare type ListItemProps = {
      *
      */
     _itemNumber?: undefined;
-} & TestID$1;
+} & TestID;
 declare const ListItem: ({ children, icon, _itemNumber, testID, }: ListItemProps) => React__default.ReactElement;
 
 declare type ListCommonProps = {
@@ -4094,7 +4118,7 @@ declare type ListCommonProps = {
      * @default 'medium'
      */
     size?: 'small' | 'medium';
-} & TestID$1 & StyledPropsBlade;
+} & TestID & StyledPropsBlade;
 declare type ListWithIconProps = ListCommonProps & {
     variant?: 'unordered';
     icon?: IconComponent;
@@ -4114,7 +4138,7 @@ declare type TitleProps = {
     contrast?: ColorContrastTypes;
     type?: TextTypes;
     children: StringChildrenType;
-} & TestID$1 & StyledPropsBlade;
+} & TestID & StyledPropsBlade;
 declare const Title: ({ size, type, contrast, children, testID, ...styledProps }: TitleProps) => ReactElement;
 
 declare type HeadingVariant = 'regular' | 'subheading';
@@ -4123,7 +4147,7 @@ declare type HeadingCommonProps = {
     type?: TextTypes;
     contrast?: ColorContrastTypes;
     children: StringChildrenType;
-} & TestID$1 & StyledPropsBlade;
+} & TestID & StyledPropsBlade;
 declare type HeadingNormalVariant = HeadingCommonProps & {
     variant?: Exclude<HeadingVariant, 'subheading'>;
     /**
@@ -4181,7 +4205,7 @@ declare type BaseTextProps = {
      */
     numberOfLines?: number;
     componentName?: 'text' | 'title' | 'heading' | 'code';
-} & TestID$1 & StyledPropsBlade;
+} & TestID & StyledPropsBlade;
 
 declare type TextCommonProps = {
     type?: TextTypes;
@@ -4194,7 +4218,7 @@ declare type TextCommonProps = {
      */
     color?: BaseTextProps['color'];
     textAlign?: BaseTextProps['textAlign'];
-} & TestID$1 & StyledPropsBlade;
+} & TestID & StyledPropsBlade;
 declare type TextVariant = 'body' | 'caption';
 declare type TextBodyVariant = TextCommonProps & {
     variant?: Extract<TextVariant, 'body'>;
@@ -4234,7 +4258,7 @@ declare type CodeProps = {
      */
     size?: 'small' | 'medium';
     weight?: 'regular' | 'bold';
-} & TestID$1 & StyledPropsBlade;
+} & TestID & StyledPropsBlade;
 /**
  * Code component can be used for displaying token, variable names, or inlined code snippets.
  *
@@ -4310,7 +4334,7 @@ declare type ProgressBarCommonProps = {
      * @default 100
      */
     max?: number;
-} & TestID$1 & StyledPropsBlade;
+} & TestID & StyledPropsBlade;
 declare type ProgressBarVariant = 'progress' | 'meter';
 declare type ProgressBarProgressProps = ProgressBarCommonProps & {
     /**
@@ -4375,7 +4399,7 @@ declare type RadioProps = {
      * @default "medium"
      */
     size?: 'small' | 'medium';
-} & TestID$1 & StyledPropsBlade;
+} & TestID & StyledPropsBlade;
 declare const Radio: React__default.ForwardRefExoticComponent<{
     /**
      * Sets the label text of the Radio
@@ -4402,7 +4426,7 @@ declare const Radio: React__default.ForwardRefExoticComponent<{
      * @default "medium"
      */
     size?: "small" | "medium" | undefined;
-} & TestID$1 & Partial<MakeObjectResponsive<{
+} & TestID & Partial<Omit<MakeObjectResponsive<{
     margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
     marginX: SpacingValueType;
     marginY: SpacingValueType;
@@ -4414,28 +4438,17 @@ declare const Radio: React__default.ForwardRefExoticComponent<{
     gap: SpacingValueType;
     rowGap: SpacingValueType;
     columnGap: SpacingValueType;
-} & Pick<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "flex" | "placeSelf">>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
+    flex: string | number;
+} & PickIfExist$1<react_native.ViewStyle, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
+    __brand__?: "platform-native" | undefined;
+}>, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & MakeObjectResponsive<{
     top: SpacingValueType;
     right: SpacingValueType;
     bottom: SpacingValueType;
     left: SpacingValueType;
-} & Pick<styled_components.CSSObject, "position" | "zIndex">> & Pick<{
-    grid?: undefined;
-    gridAutoColumns?: undefined;
-    gridAutoFlow?: undefined;
-    gridAutoRows?: undefined;
-    gridColumnEnd?: undefined;
-    gridColumnStart?: undefined;
-    gridRowEnd?: undefined;
-    gridRowStart?: undefined;
-    gridTemplateAreas?: undefined;
-    gridTemplateColumns?: undefined;
-    gridTemplateRows?: undefined;
-    gridArea?: undefined;
-    gridColumn?: undefined;
-    gridRow?: undefined;
-    gridTemplate?: undefined;
-}, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">> & React__default.RefAttributes<BladeElementRef>>;
+} & PickIfExist$1<react_native.ViewStyle, "position" | "zIndex"> & {
+    __brand__?: "platform-native" | 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>>;
 
 declare type RadioGroupProps = {
     /**
@@ -4510,7 +4523,7 @@ declare type RadioGroupProps = {
      * @default "medium"
      */
     size?: 'small' | 'medium';
-} & TestID$1 & StyledPropsBlade;
+} & TestID & StyledPropsBlade;
 declare const RadioGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, ...styledProps }: RadioGroupProps) => React__default.ReactElement;
 
 declare type BaseSpinnerProps = {
@@ -4543,7 +4556,7 @@ declare type BaseSpinnerProps = {
      *
      */
     accessibilityLabel: string;
-} & TestID$1 & StyledPropsBlade;
+} & TestID & StyledPropsBlade;
 
 declare type SpinnerProps = Omit<BaseSpinnerProps, 'intent'>;
 declare const Spinner: ({ label, labelPosition, accessibilityLabel, contrast, size, testID, ...styledProps }: SpinnerProps) => React.ReactElement;
@@ -4557,7 +4570,7 @@ declare const SkipNavContent: (_props: SkipNavLinkProps) => never;
 
 declare type VisuallyHiddenProps = {
     children: React.ReactNode;
-} & TestID$1;
+} & TestID;
 
 declare const VisuallyHidden: ({ children, testID }: VisuallyHiddenProps) => JSX.Element;
 
@@ -4610,78 +4623,7 @@ declare type AmountProps = {
      * @default 'INR'
      * */
     currency?: Currency;
-} & TestID$1 & StyledPropsBlade;
+} & TestID & StyledPropsBlade;
 declare const Amount: ({ value, suffix, size, isAffixSubtle, intent, prefix, testID, currency, ...styledProps }: AmountProps) => ReactElement;
 
-declare type TestID = {
-    testID?: string;
-};
-
-declare const BaseBox: styled_components.StyledComponent<typeof View, styled_components.DefaultTheme, Omit<Partial<MakeObjectResponsive<{
-    padding: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
-    paddingX: SpacingValueType;
-    paddingY: SpacingValueType;
-    paddingTop: SpacingValueType;
-    paddingRight: SpacingValueType;
-    paddingBottom: SpacingValueType;
-    paddingLeft: SpacingValueType;
-}> & MakeObjectResponsive<{
-    margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
-    marginX: SpacingValueType;
-    marginY: SpacingValueType;
-    marginTop: SpacingValueType;
-    marginRight: SpacingValueType;
-    marginBottom: SpacingValueType;
-    marginLeft: SpacingValueType;
-}> & MakeObjectResponsive<{
-    height: SpacingValueType;
-    minHeight: SpacingValueType;
-    maxHeight: SpacingValueType;
-    width: SpacingValueType;
-    minWidth: SpacingValueType;
-    maxWidth: SpacingValueType;
-} & Pick<styled_components.CSSObject, "overflow" | "overflowX" | "overflowY"> & {
-    display: "none" | "flex";
-} & {
-    __brand__?: "platform-native" | undefined;
-}> & MakeObjectResponsive<{
-    gap: SpacingValueType;
-    rowGap: SpacingValueType;
-    columnGap: SpacingValueType;
-} & Pick<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "flex" | "placeSelf">> & MakeObjectResponsive<{
-    top: SpacingValueType;
-    right: SpacingValueType;
-    bottom: SpacingValueType;
-    left: SpacingValueType;
-} & Pick<styled_components.CSSObject, "position" | "zIndex">> & {
-    grid?: undefined;
-    gridAutoColumns?: undefined;
-    gridAutoFlow?: undefined;
-    gridAutoRows?: undefined;
-    gridColumnEnd?: undefined;
-    gridColumnStart?: undefined;
-    gridRowEnd?: undefined;
-    gridRowStart?: undefined;
-    gridTemplateAreas?: undefined;
-    gridTemplateColumns?: undefined;
-    gridTemplateRows?: undefined;
-    gridArea?: undefined;
-    gridColumn?: undefined;
-    gridRow?: undefined;
-    gridTemplate?: undefined;
-} & MakeObjectResponsive<{
-    backgroundColor: "surface.background.level1.lowContrast" | "surface.background.level1.highContrast" | "surface.background.level2.lowContrast" | "surface.background.level2.highContrast" | "surface.background.level3.lowContrast" | "surface.background.level3.highContrast";
-}> & {
-    as: "header" | "main" | "aside" | "div" | "footer" | "nav" | "section" | "span";
-} & {
-    children?: React$1.ReactNode | React$1.ReactNode[];
-} & TestID>, "backgroundColor" | "as"> & Partial<MakeObjectResponsive<{
-    borderRadius: "none" | "small" | "medium" | "large" | "max" | "round";
-    backgroundColor: (string & Record<never, never>) | "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.highContrast" | "surface.background.level1.lowContrast" | "surface.background.level1.highContrast" | "surface.background.level2.lowContrast" | "surface.background.level2.highContrast" | "surface.background.level3.lowContrast" | "surface.background.level3.highContrast" | "action.background.primary.disabled" | "action.background.primary.default" | "action.background.primary.hover" | "action.background.primary.focus" | "action.background.primary.active" | "action.background.secondary.disabled" | "action.background.secondary.default" | "action.background.secondary.hover" | "action.background.secondary.focus" | "action.background.secondary.active" | "action.background.tertiary.disabled" | "action.background.tertiary.default" | "action.background.tertiary.hover" | "action.background.tertiary.focus" | "action.background.tertiary.active";
-    lineHeight: SpacingValueType;
-} & Pick<styled_components.CSSObject, "border" | "transform" | "borderBottom" | "borderLeft" | "borderRight" | "borderTop">> & {
-    className?: string | undefined;
-    id?: string | undefined;
-}>, never>;
-
-export { ActionList, ActionListFooter, ActionListFooterIcon, ActionListFooterProps, ActionListHeader, ActionListHeaderIcon, ActionListHeaderProps, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionDivider, ActionListSectionProps, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, Box, BoxIcon, BoxProps, BriefcaseIcon, BulkPayoutsIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, BaseBox as InternalDontUsePleaseWillBeRemovedSoonBaseBox, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputProps, OctagonIcon, OffersIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonsIcon, PaymentLinksIcon, PaymentPagesIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RefreshIcon, RepeatIcon, ReportsIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaveIcon, ScissorsIcon, SearchIcon, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SpinnerProps, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, TabletIcon, TagIcon, TargetIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, TitleProps, ToggleLeftIcon, ToggleRightIcon, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
+export { ActionList, ActionListFooter, ActionListFooterIcon, ActionListFooterProps, ActionListHeader, ActionListHeaderIcon, ActionListHeaderProps, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionDivider, ActionListSectionProps, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, Box, BoxIcon, BoxProps, BriefcaseIcon, BulkPayoutsIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputProps, OctagonIcon, OffersIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonsIcon, PaymentLinksIcon, PaymentPagesIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RefreshIcon, RepeatIcon, ReportsIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaveIcon, ScissorsIcon, SearchIcon, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SpinnerProps, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, TabletIcon, TagIcon, TargetIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, TitleProps, ToggleLeftIcon, ToggleRightIcon, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };