@razorpay/blade 9.0.2 → 9.1.0

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import * as React$1 from 'react';
 import React__default, { ReactChild, ReactElement, ReactNode, SyntheticEvent, KeyboardEvent } from 'react';
-import * as react_native from 'react-native';
 import { View, ViewStyle, AccessibilityRole, ImageSourcePropType, GestureResponderEvent, PressableProps } from 'react-native';
 import { CSSObject } from 'styled-components';
 import { ReactDOMAttributes } from '@use-gesture/react/dist/declarations/src/types';
@@ -588,7 +587,7 @@ type Motion = Readonly<{
   easing: Easing;
 }>;
 
-type ElevationLevels = 'none' | 'lowRaised' | 'midRaised' | 'highRaised';
+type ElevationLevels$1 = 'none' | 'lowRaised' | 'midRaised' | 'highRaised';
 
 type ElevationStyles = Readonly<{
   elevation: number;
@@ -608,7 +607,7 @@ type ElevationStyles = Readonly<{
 }>;
 
 type Elevation = Record<
-  ElevationLevels,
+  ElevationLevels$1,
   Platform.Select<{
     web: string;
     native: ElevationStyles;
@@ -1368,6 +1367,8 @@ declare const validBoxAsValues$1 = [
 
 type BoxAsType$1 = typeof validBoxAsValues$1[number];
 
+type BrandColorString$1 = `brand.${DotNotationColorStringToken<Theme$1['colors']['brand']>}`;
+
 // Visual props that are common for both Box and BaseBox
 type CommonBoxVisualProps$1 = MakeObjectResponsive$1<
   {
@@ -1392,17 +1393,30 @@ type CommonBoxVisualProps$1 = MakeObjectResponsive$1<
     | 'backgroundPosition'
     | 'backgroundOrigin'
     | 'backgroundRepeat'
-  >
+  > & {
+      /**
+       * Sets the elevation for Box
+       *
+       * eg: `theme.elevation.midRaised`
+       *
+       * @default `theme.elevation.lowRaised`
+       *
+       * **Links:**
+       * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--page
+       */
+      elevation?: keyof Elevation;
+    }
 >;
 
 // Visual props that are specific BaseBox
 // This is used to ensure some of the more flexible BaseBox props are not passed to Box
-type BaseBoxVisualProps = MakeObjectResponsive$1<
+type BaseBoxVisualProps$1 = MakeObjectResponsive$1<
   {
     backgroundColor:
       | BackgroundColorString$1<'feedback'>
       | BackgroundColorString$1<'surface'>
       | BackgroundColorString$1<'action'>
+      | BrandColorString$1
       | (string & Record<never, never>);
     lineHeight: SpacingValueType$1;
     touchAction: CSSObject['touchAction'];
@@ -1420,14 +1434,14 @@ type BaseBoxVisualProps = MakeObjectResponsive$1<
 
 // Visual props that are specific to Box
 type BoxVisualProps$1 = MakeObjectResponsive$1<{
-  backgroundColor: BackgroundColorString$1<'surface'>;
+  backgroundColor: BackgroundColorString$1<'surface'> | BrandColorString$1;
 }> & {
   // Intentionally keeping this outside of MakeObjectResponsive since we only want as to be string and not responsive object
   // styled-components do not support passing `as` prop as an object
   as: BoxAsType$1;
 };
 
-type StyledPropsBlade = Partial<
+type StyledPropsBlade$1 = Partial<
   Omit<
     MarginProps$1 &
       Pick<FlexboxProps$1, 'alignSelf' | 'justifySelf' | 'placeSelf' | 'order'> &
@@ -1501,9 +1515,9 @@ type BoxProps$1 = Partial<
 // Visual props have different types for BaseBox and Box. BaseBox has more flexible types and more props exposed.
 // So first we Omit Visual props of Box
 // Then we append BaseBoxVisualProps and some other props for styled-components like class and id
-type BaseBoxProps = Omit<BoxProps$1, keyof BoxVisualProps$1> &
+type BaseBoxProps$1 = Omit<BoxProps$1, keyof BoxVisualProps$1> &
   Partial<
-    BaseBoxVisualProps & {
+    BaseBoxVisualProps$1 & {
       className?: string;
       id?: string;
       tabIndex?: number;
@@ -1859,7 +1873,7 @@ type IconProps$1 = {
     | BadgeIconColors$1
     | 'currentColor'; // currentColor is useful for letting the SVG inherit color property from its container
   size: IconSize$1;
-} & StyledPropsBlade;
+} & StyledPropsBlade$1;
 type IconComponent$1 = React.ComponentType<IconProps$1>;
 
 declare type ActionListItemProps = {
@@ -2016,7 +2030,7 @@ declare type AlertProps = {
          */
         secondary?: SecondaryAction;
     };
-} & TestID & StyledPropsBlade;
+} & TestID & StyledPropsBlade$1;
 declare const Alert: ({ description, title, isDismissible, onDismiss, contrast, isFullWidth, intent, actions, testID, ...styledProps }: AlertProps) => ReactElement | null;
 
 declare type BadgeProps = {
@@ -2055,7 +2069,7 @@ declare type BadgeProps = {
      * @default 'regular'
      */
     fontWeight?: 'regular' | 'bold';
-} & TestID & StyledPropsBlade;
+} & TestID & StyledPropsBlade$1;
 declare const Badge: ({ children, contrast, fontWeight, icon, size, variant, testID, ...styledProps }: BadgeProps) => ReactElement;
 
 declare type BladeProviderProps = {
@@ -2132,6 +2146,8 @@ declare type MakeObjectResponsive<T, K extends keyof T = Extract<keyof T, string
     [P in K]: MakeValueResponsive<T[P]>;
 };
 
+declare type ElevationLevels = 'none' | 'lowRaised' | 'midRaised' | 'highRaised';
+
 declare type ArrayOfMaxLength4<T> = readonly [T?, T?, T?, T?];
 declare type SpaceUnits = 'px' | '%' | 'fr' | 'rem' | 'em' | 'vh' | 'vw';
 declare type SpacingValueType = DotNotationSpacingStringToken | `${string}${SpaceUnits}` | `calc(${string})` | 'auto' | `min(${string})` | `max(${string})` | 'none' | 'initial' | 'fit-content' | 'max-content' | 'min-content';
@@ -2614,6 +2630,7 @@ declare type BackgroundColorString<T extends ColorObjects> = `${T}.background.${
 declare type BorderColorString<T extends ColorObjects> = `${T}.border.${DotNotationColorStringToken<Theme$1['colors'][T]['border']>}`;
 declare const validBoxAsValues: readonly ["div", "section", "footer", "header", "main", "aside", "nav", "span", "label"];
 declare type BoxAsType = typeof validBoxAsValues[number];
+declare type BrandColorString = `brand.${DotNotationColorStringToken<Theme$1['colors']['brand']>}`;
 declare type CommonBoxVisualProps = MakeObjectResponsive<{
     borderRadius: keyof Border['radius'];
     borderWidth: keyof Border['width'];
@@ -2630,12 +2647,31 @@ declare type CommonBoxVisualProps = MakeObjectResponsive<{
     borderTopRightRadius: keyof Border['radius'];
     borderBottomRightRadius: keyof Border['radius'];
     borderBottomLeftRadius: keyof Border['radius'];
-} & PickCSSByPlatform<'backgroundImage' | 'backgroundSize' | 'backgroundPosition' | 'backgroundOrigin' | 'backgroundRepeat'>>;
+} & PickCSSByPlatform<'backgroundImage' | 'backgroundSize' | 'backgroundPosition' | 'backgroundOrigin' | 'backgroundRepeat'> & {
+    /**
+     * Sets the elevation for Box
+     *
+     * eg: `theme.elevation.midRaised`
+     *
+     * @default `theme.elevation.lowRaised`
+     *
+     * **Links:**
+     * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--page
+     */
+    elevation?: keyof Elevation;
+}>;
+declare type BaseBoxVisualProps = MakeObjectResponsive<{
+    backgroundColor: BackgroundColorString<'feedback'> | BackgroundColorString<'surface'> | BackgroundColorString<'action'> | BrandColorString | (string & Record<never, never>);
+    lineHeight: SpacingValueType;
+    touchAction: CSSObject['touchAction'];
+    userSelect: CSSObject['userSelect'];
+} & PickCSSByPlatform<'border' | 'borderLeft' | 'borderRight' | 'borderTop' | 'borderBottom' | 'opacity' | 'pointerEvents'>>;
 declare type BoxVisualProps = MakeObjectResponsive<{
-    backgroundColor: BackgroundColorString<'surface'>;
+    backgroundColor: BackgroundColorString<'surface'> | BrandColorString;
 }> & {
     as: BoxAsType;
 };
+declare type StyledPropsBlade = Partial<Omit<MarginProps & Pick<FlexboxProps, 'alignSelf' | 'justifySelf' | 'placeSelf' | 'order'> & PositionProps & Pick<GridProps, 'gridColumn' | 'gridRow' | 'gridRowStart' | 'gridRowEnd' | 'gridColumnStart' | 'gridColumnEnd' | 'gridArea'>, '__brand__'>>;
 declare type BoxCallbackProps = Omit<Platform.Select<{
     web: {
         /**
@@ -2673,6 +2709,11 @@ declare type BoxProps = Partial<PaddingProps & MarginProps & LayoutProps & Flexb
     children?: React.ReactNode | React.ReactNode[];
     tabIndex?: number;
 } & TestID>;
+declare type BaseBoxProps = Omit<BoxProps, keyof BoxVisualProps> & Partial<BaseBoxVisualProps & {
+    className?: string;
+    id?: string;
+    tabIndex?: number;
+}> & BladeCommonEvents$1;
 declare type BoxRefType = Platform.Select<{
     web: Omit<HTMLElement, 'style'>;
     native: View;
@@ -2754,124 +2795,7 @@ declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps
         readonly l?: "platform-native" | undefined;
         readonly xl?: "platform-native" | undefined;
     } | undefined;
-} & {
-    alignContent?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | {
-        readonly base?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly xs?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly s?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly m?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly l?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly xl?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-    } | undefined;
-    alignItems?: react_native.FlexAlignType | {
-        readonly base?: react_native.FlexAlignType | undefined;
-        readonly xs?: react_native.FlexAlignType | undefined;
-        readonly s?: react_native.FlexAlignType | undefined;
-        readonly m?: react_native.FlexAlignType | undefined;
-        readonly l?: react_native.FlexAlignType | undefined;
-        readonly xl?: react_native.FlexAlignType | undefined;
-    } | undefined;
-    alignSelf?: "auto" | react_native.FlexAlignType | {
-        readonly base?: "auto" | react_native.FlexAlignType | undefined;
-        readonly xs?: "auto" | react_native.FlexAlignType | undefined;
-        readonly s?: "auto" | react_native.FlexAlignType | undefined;
-        readonly m?: "auto" | react_native.FlexAlignType | undefined;
-        readonly l?: "auto" | react_native.FlexAlignType | undefined;
-        readonly xl?: "auto" | react_native.FlexAlignType | 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?: 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;
-    } | undefined;
-    flexDirection?: "row" | "column" | "column-reverse" | "row-reverse" | {
-        readonly base?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly xs?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly s?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly m?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly l?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly xl?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-    } | undefined;
-    flexGrow?: number | {
-        readonly base?: number | undefined;
-        readonly xs?: number | undefined;
-        readonly s?: number | undefined;
-        readonly m?: number | undefined;
-        readonly l?: number | undefined;
-        readonly xl?: number | undefined;
-    } | undefined;
-    flexShrink?: number | {
-        readonly base?: number | undefined;
-        readonly xs?: number | undefined;
-        readonly s?: number | undefined;
-        readonly m?: number | undefined;
-        readonly l?: number | undefined;
-        readonly xl?: number | undefined;
-    } | undefined;
-    flexWrap?: "nowrap" | "wrap" | "wrap-reverse" | {
-        readonly base?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly xs?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly s?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly m?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly l?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly xl?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-    } | undefined;
-    justifyContent?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | {
-        readonly base?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly xs?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly s?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly m?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly l?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly xl?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-    } | undefined;
-    justifyItems: never;
-    justifySelf: never;
-    order: never;
-    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: never;
-    __brand__?: "platform-native" | {
-        readonly base?: "platform-native" | undefined;
-        readonly xs?: "platform-native" | undefined;
-        readonly s?: "platform-native" | undefined;
-        readonly m?: "platform-native" | undefined;
-        readonly l?: "platform-native" | undefined;
-        readonly xl?: "platform-native" | undefined;
-    } | undefined;
-} & {
+} & FlexboxProps & {
     bottom: SpacingValueType | {
         readonly base?: SpacingValueType | undefined;
         readonly xs?: SpacingValueType | undefined;
@@ -2958,6 +2882,14 @@ declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps
     onMouseLeave: undefined;
     onScroll: undefined;
 } & {
+    elevation?: ElevationLevels | {
+        readonly base?: ElevationLevels | undefined;
+        readonly xs?: ElevationLevels | undefined;
+        readonly s?: ElevationLevels | undefined;
+        readonly m?: ElevationLevels | undefined;
+        readonly l?: ElevationLevels | undefined;
+        readonly xl?: ElevationLevels | undefined;
+    } | undefined;
     backgroundImage: never;
     backgroundOrigin: never;
     backgroundRepeat: never;
@@ -3092,7 +3024,7 @@ declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps
         readonly xl?: "platform-native" | undefined;
     } | 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";
+    backgroundColor: "brand.primary.300" | "brand.primary.400" | "brand.primary.500" | "brand.primary.600" | "brand.primary.700" | "brand.primary.800" | "brand.secondary.500" | "brand.gray.200.lowContrast" | "brand.gray.200.highContrast" | "brand.gray.300.lowContrast" | "brand.gray.300.highContrast" | "brand.gray.400.lowContrast" | "brand.gray.400.highContrast" | "brand.gray.500.lowContrast" | "brand.gray.500.highContrast" | "brand.gray.600.lowContrast" | "brand.gray.600.highContrast" | "brand.gray.700.lowContrast" | "brand.gray.700.highContrast" | "brand.gray.a50.lowContrast" | "brand.gray.a50.highContrast" | "brand.gray.a100.lowContrast" | "brand.gray.a100.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";
 }, "backgroundColor"> & {
     as: "aside" | "div" | "footer" | "header" | "label" | "main" | "nav" | "section" | "span";
 } & {
@@ -3156,7 +3088,7 @@ declare type CardProps = {
      * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--page
      */
     padding?: Extract<SpacingValueType$1, 'spacing.0' | 'spacing.3' | 'spacing.5' | 'spacing.7'>;
-} & TestID & StyledPropsBlade;
+} & TestID & StyledPropsBlade$1;
 declare const Card: ({ children, surfaceLevel, elevation, testID, padding, ...styledProps }: CardProps) => React__default.ReactElement;
 declare type CardBodyProps = {
     children: React__default.ReactNode;
@@ -3201,7 +3133,7 @@ declare type BaseLinkCommonProps = {
      * The title of the link which is displayed as a tooltip. This is a web only prop and has no effect on react-native.
      */
     htmlTitle?: string;
-} & TestID & StyledPropsBlade & Omit<BladeCommonEvents$1, 'onBlur' | 'onMouseLeave'>;
+} & TestID & StyledPropsBlade$1 & Omit<BladeCommonEvents$1, 'onBlur' | 'onMouseLeave'>;
 declare type BaseLinkWithoutIconProps = BaseLinkCommonProps & {
     icon?: undefined;
     children: StringChildrenType;
@@ -3242,7 +3174,7 @@ declare type LinkCommonProps = {
      * @default medium
      */
     size?: BaseLinkProps['size'];
-} & TestID & StyledPropsBlade & BladeCommonEvents$1 & Platform.Select<{
+} & TestID & StyledPropsBlade$1 & BladeCommonEvents$1 & Platform.Select<{
     native: {
         /**
          * Defines how far your touch can start away from the link
@@ -3317,7 +3249,7 @@ declare type BaseButtonCommonProps = {
     variant?: 'primary' | 'secondary' | 'tertiary';
     contrast?: 'low' | 'high';
     intent?: 'positive' | 'negative' | 'notice' | 'information' | 'neutral';
-} & TestID & StyledPropsBlade & BladeCommonEvents$1;
+} & TestID & StyledPropsBlade$1 & BladeCommonEvents$1;
 declare type BaseButtonWithoutIconProps = BaseButtonCommonProps & {
     icon?: undefined;
     children: StringChildrenType;
@@ -3357,7 +3289,7 @@ declare type ButtonCommonProps = {
         native: (event: GestureResponderEvent) => void;
         web: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
     }>;
-} & TestID & StyledPropsBlade & BladeCommonEvents$1;
+} & TestID & StyledPropsBlade$1 & BladeCommonEvents$1;
 declare type ButtonWithoutIconProps = ButtonCommonProps & {
     icon?: undefined;
     children: StringChildrenType;
@@ -3404,7 +3336,7 @@ declare type CounterProps = {
      * @default 'medium'
      */
     size?: 'small' | 'medium' | 'large';
-} & TestID & StyledPropsBlade;
+} & TestID & StyledPropsBlade$1;
 declare const Counter: ({ value, max, intent, variant, contrast, size, testID, ...styledProps }: CounterProps) => React.ReactElement;
 
 type FeedbackColors$1 = `feedback.text.${DotNotationColorStringToken<
@@ -3421,6 +3353,8 @@ type BadgeTextColors$1 = `badge.text.${DotNotationColorStringToken<
   Theme$1['colors']['badge']['text']
 >}`;
 
+type BrandPrimaryColors$1 = `brand.primary.${keyof Theme$1['colors']['brand']['primary']}`;
+
 type As$1 =
   | 'code'
   | 'h1'
@@ -3438,7 +3372,13 @@ type As$1 =
   | 'div';
 type BaseTextProps$1 = {
   id?: string;
-  color?: ActionColors$1 | FeedbackColors$1 | SurfaceColors$1 | FeedbackActionColors$1 | BadgeTextColors$1;
+  color?:
+    | BrandPrimaryColors$1
+    | ActionColors$1
+    | FeedbackColors$1
+    | SurfaceColors$1
+    | FeedbackActionColors$1
+    | BadgeTextColors$1;
   fontFamily?: keyof Theme$1['typography']['fonts']['family'];
   fontSize?: keyof Theme$1['typography']['fonts']['size'];
   fontWeight?: keyof Theme$1['typography']['fonts']['weight'];
@@ -3461,7 +3401,7 @@ type BaseTextProps$1 = {
   numberOfLines?: number;
   componentName?: 'base-text' | 'text' | 'title' | 'heading' | 'code';
 } & TestID &
-  StyledPropsBlade;
+  StyledPropsBlade$1;
 
 /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
 
@@ -3483,7 +3423,7 @@ type TextCommonProps$1 = {
   textAlign?: BaseTextProps$1['textAlign'];
   textDecorationLine?: BaseTextProps$1['textDecorationLine'];
 } & TestID &
-  StyledPropsBlade;
+  StyledPropsBlade$1;
 
 type TextVariant$1 = 'body' | 'caption';
 
@@ -3705,7 +3645,7 @@ declare type CheckboxProps = {
      *
      */
     tabIndex?: number;
-} & TestID & StyledPropsBlade;
+} & TestID & StyledPropsBlade$1;
 declare const Checkbox: React__default.ForwardRefExoticComponent<{
     /**
      * If `true`, The checkbox will be checked. This also makes the checkbox controlled
@@ -3784,124 +3724,7 @@ declare const Checkbox: React__default.ForwardRefExoticComponent<{
      *
      */
     tabIndex?: number | undefined;
-} & TestID & Partial<Omit<MarginProps & Pick<{
-    alignContent?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | {
-        readonly base?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly xs?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly s?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly m?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly l?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly xl?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-    } | undefined;
-    alignItems?: react_native.FlexAlignType | {
-        readonly base?: react_native.FlexAlignType | undefined;
-        readonly xs?: react_native.FlexAlignType | undefined;
-        readonly s?: react_native.FlexAlignType | undefined;
-        readonly m?: react_native.FlexAlignType | undefined;
-        readonly l?: react_native.FlexAlignType | undefined;
-        readonly xl?: react_native.FlexAlignType | undefined;
-    } | undefined;
-    alignSelf?: "auto" | react_native.FlexAlignType | {
-        readonly base?: "auto" | react_native.FlexAlignType | undefined;
-        readonly xs?: "auto" | react_native.FlexAlignType | undefined;
-        readonly s?: "auto" | react_native.FlexAlignType | undefined;
-        readonly m?: "auto" | react_native.FlexAlignType | undefined;
-        readonly l?: "auto" | react_native.FlexAlignType | undefined;
-        readonly xl?: "auto" | react_native.FlexAlignType | 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?: 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;
-    } | undefined;
-    flexDirection?: "row" | "column" | "column-reverse" | "row-reverse" | {
-        readonly base?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly xs?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly s?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly m?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly l?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly xl?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-    } | undefined;
-    flexGrow?: number | {
-        readonly base?: number | undefined;
-        readonly xs?: number | undefined;
-        readonly s?: number | undefined;
-        readonly m?: number | undefined;
-        readonly l?: number | undefined;
-        readonly xl?: number | undefined;
-    } | undefined;
-    flexShrink?: number | {
-        readonly base?: number | undefined;
-        readonly xs?: number | undefined;
-        readonly s?: number | undefined;
-        readonly m?: number | undefined;
-        readonly l?: number | undefined;
-        readonly xl?: number | undefined;
-    } | undefined;
-    flexWrap?: "nowrap" | "wrap" | "wrap-reverse" | {
-        readonly base?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly xs?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly s?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly m?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly l?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly xl?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-    } | undefined;
-    justifyContent?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | {
-        readonly base?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly xs?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly s?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly m?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly l?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly xl?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-    } | undefined;
-    justifyItems: never;
-    justifySelf: never;
-    order: never;
-    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: never;
-    __brand__?: "platform-native" | {
-        readonly base?: "platform-native" | undefined;
-        readonly xs?: "platform-native" | undefined;
-        readonly s?: "platform-native" | undefined;
-        readonly m?: "platform-native" | undefined;
-        readonly l?: "platform-native" | undefined;
-        readonly xl?: "platform-native" | undefined;
-    } | undefined;
-}, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & {
+} & TestID & Partial<Omit<MarginProps & Pick<FlexboxProps, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & {
     bottom: SpacingValueType | {
         readonly base?: SpacingValueType | undefined;
         readonly xs?: SpacingValueType | undefined;
@@ -4062,7 +3885,7 @@ declare type CheckboxGroupProps = {
      * @default "medium"
      */
     size?: 'small' | 'medium';
-} & TestID & StyledPropsBlade;
+} & TestID & StyledPropsBlade$1;
 declare const CheckboxGroup: ({ children, label, helpText, isDisabled, isRequired, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, ...styledProps }: CheckboxGroupProps) => React__default.ReactElement;
 
 declare type DividerProps = {
@@ -4113,7 +3936,7 @@ declare type DropdownProps = {
     selectionType?: 'single' | 'multiple';
     onDismiss?: () => void;
     children: React.ReactNode[];
-} & StyledPropsBlade;
+} & StyledPropsBlade$1;
 declare type DropdownOverlayProps = {
     children: React.ReactElement[] | React.ReactElement;
 } & TestID;
@@ -4733,7 +4556,7 @@ declare type IconProps = {
      */
     color: ActionIconColors | SurfaceActionIconColors | FeedbackIconColors | FeedbackActionIconColors | TextIconColors | BadgeIconColors | 'currentColor';
     size: IconSize;
-} & StyledPropsBlade;
+} & StyledPropsBlade$1;
 declare type IconComponent = React.ComponentType<IconProps>;
 
 declare type FormInputLabelProps = {
@@ -5013,7 +4836,7 @@ declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
          */
         autoCompleteSuggestionType?: WebAutoCompleteSuggestionType;
     };
-}> & StyledPropsBlade;
+}> & StyledPropsBlade$1;
 
 declare type Type = Exclude<BaseInputProps['type'], 'password'>;
 declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'value' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'maxCharacters' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'onSubmit' | 'autoCapitalize' | 'testID'> & {
@@ -5047,8 +4870,8 @@ declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | '
      * @default text
      */
     type?: Type;
-} & StyledPropsBlade;
-declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "placeholder" | "name" | "testID" | "prefix" | "value" | "label" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "defaultValue" | "autoCapitalize" | "autoFocus" | "isDisabled" | "labelPosition" | "isRequired" | "validationState" | "necessityIndicator" | "helpText" | "errorText" | "successText" | "suffix" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
+} & StyledPropsBlade$1;
+declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "placeholder" | "name" | "testID" | "prefix" | "value" | "label" | "onBlur" | "onFocus" | "onChange" | "onSubmit" | "defaultValue" | "autoCapitalize" | "autoFocus" | "isDisabled" | "labelPosition" | "isRequired" | "validationState" | "necessityIndicator" | "helpText" | "errorText" | "successText" | "suffix" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -5079,124 +4902,7 @@ declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInput
      * @default text
      */
     type?: Type;
-} & Partial<Omit<MarginProps & Pick<{
-    alignContent?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | {
-        readonly base?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly xs?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly s?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly m?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly l?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly xl?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-    } | undefined;
-    alignItems?: react_native.FlexAlignType | {
-        readonly base?: react_native.FlexAlignType | undefined;
-        readonly xs?: react_native.FlexAlignType | undefined;
-        readonly s?: react_native.FlexAlignType | undefined;
-        readonly m?: react_native.FlexAlignType | undefined;
-        readonly l?: react_native.FlexAlignType | undefined;
-        readonly xl?: react_native.FlexAlignType | undefined;
-    } | undefined;
-    alignSelf?: "auto" | react_native.FlexAlignType | {
-        readonly base?: "auto" | react_native.FlexAlignType | undefined;
-        readonly xs?: "auto" | react_native.FlexAlignType | undefined;
-        readonly s?: "auto" | react_native.FlexAlignType | undefined;
-        readonly m?: "auto" | react_native.FlexAlignType | undefined;
-        readonly l?: "auto" | react_native.FlexAlignType | undefined;
-        readonly xl?: "auto" | react_native.FlexAlignType | 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?: 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;
-    } | undefined;
-    flexDirection?: "row" | "column" | "column-reverse" | "row-reverse" | {
-        readonly base?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly xs?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly s?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly m?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly l?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly xl?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-    } | undefined;
-    flexGrow?: number | {
-        readonly base?: number | undefined;
-        readonly xs?: number | undefined;
-        readonly s?: number | undefined;
-        readonly m?: number | undefined;
-        readonly l?: number | undefined;
-        readonly xl?: number | undefined;
-    } | undefined;
-    flexShrink?: number | {
-        readonly base?: number | undefined;
-        readonly xs?: number | undefined;
-        readonly s?: number | undefined;
-        readonly m?: number | undefined;
-        readonly l?: number | undefined;
-        readonly xl?: number | undefined;
-    } | undefined;
-    flexWrap?: "nowrap" | "wrap" | "wrap-reverse" | {
-        readonly base?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly xs?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly s?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly m?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly l?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly xl?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-    } | undefined;
-    justifyContent?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | {
-        readonly base?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly xs?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly s?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly m?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly l?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly xl?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-    } | undefined;
-    justifyItems: never;
-    justifySelf: never;
-    order: never;
-    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: never;
-    __brand__?: "platform-native" | {
-        readonly base?: "platform-native" | undefined;
-        readonly xs?: "platform-native" | undefined;
-        readonly s?: "platform-native" | undefined;
-        readonly m?: "platform-native" | undefined;
-        readonly l?: "platform-native" | undefined;
-        readonly xl?: "platform-native" | undefined;
-    } | undefined;
-}, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & {
+} & Partial<Omit<MarginProps & Pick<FlexboxProps, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & {
     bottom: SpacingValueType | {
         readonly base?: SpacingValueType | undefined;
         readonly xs?: SpacingValueType | undefined;
@@ -5309,125 +5015,8 @@ 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, "placeholder" | "name" | "testID" | "value" | "label" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "defaultValue" | "autoFocus" | "isDisabled" | "labelPosition" | "isRequired" | "validationState" | "helpText" | "errorText" | "successText" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & PasswordInputExtraProps & Partial<Omit<MarginProps & Pick<{
-    alignContent?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | {
-        readonly base?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly xs?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly s?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly m?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly l?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly xl?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-    } | undefined;
-    alignItems?: react_native.FlexAlignType | {
-        readonly base?: react_native.FlexAlignType | undefined;
-        readonly xs?: react_native.FlexAlignType | undefined;
-        readonly s?: react_native.FlexAlignType | undefined;
-        readonly m?: react_native.FlexAlignType | undefined;
-        readonly l?: react_native.FlexAlignType | undefined;
-        readonly xl?: react_native.FlexAlignType | undefined;
-    } | undefined;
-    alignSelf?: "auto" | react_native.FlexAlignType | {
-        readonly base?: "auto" | react_native.FlexAlignType | undefined;
-        readonly xs?: "auto" | react_native.FlexAlignType | undefined;
-        readonly s?: "auto" | react_native.FlexAlignType | undefined;
-        readonly m?: "auto" | react_native.FlexAlignType | undefined;
-        readonly l?: "auto" | react_native.FlexAlignType | undefined;
-        readonly xl?: "auto" | react_native.FlexAlignType | 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?: 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;
-    } | undefined;
-    flexDirection?: "row" | "column" | "column-reverse" | "row-reverse" | {
-        readonly base?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly xs?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly s?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly m?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly l?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly xl?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-    } | undefined;
-    flexGrow?: number | {
-        readonly base?: number | undefined;
-        readonly xs?: number | undefined;
-        readonly s?: number | undefined;
-        readonly m?: number | undefined;
-        readonly l?: number | undefined;
-        readonly xl?: number | undefined;
-    } | undefined;
-    flexShrink?: number | {
-        readonly base?: number | undefined;
-        readonly xs?: number | undefined;
-        readonly s?: number | undefined;
-        readonly m?: number | undefined;
-        readonly l?: number | undefined;
-        readonly xl?: number | undefined;
-    } | undefined;
-    flexWrap?: "nowrap" | "wrap" | "wrap-reverse" | {
-        readonly base?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly xs?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly s?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly m?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly l?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly xl?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-    } | undefined;
-    justifyContent?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | {
-        readonly base?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly xs?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly s?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly m?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly l?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly xl?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-    } | undefined;
-    justifyItems: never;
-    justifySelf: never;
-    order: never;
-    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: never;
-    __brand__?: "platform-native" | {
-        readonly base?: "platform-native" | undefined;
-        readonly xs?: "platform-native" | undefined;
-        readonly s?: "platform-native" | undefined;
-        readonly m?: "platform-native" | undefined;
-        readonly l?: "platform-native" | undefined;
-        readonly xl?: "platform-native" | undefined;
-    } | undefined;
-}, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & {
+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$1;
+declare const PasswordInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "placeholder" | "name" | "testID" | "value" | "label" | "onBlur" | "onFocus" | "onChange" | "onSubmit" | "defaultValue" | "autoFocus" | "isDisabled" | "labelPosition" | "isRequired" | "validationState" | "helpText" | "errorText" | "successText" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & PasswordInputExtraProps & Partial<Omit<MarginProps & Pick<FlexboxProps, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & {
     bottom: SpacingValueType | {
         readonly base?: SpacingValueType | undefined;
         readonly xs?: SpacingValueType | undefined;
@@ -5519,8 +5108,8 @@ declare type TextAreaProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'n
      * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
      */
     onClearButtonClick?: () => void;
-} & StyledPropsBlade;
-declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "placeholder" | "name" | "testID" | "value" | "label" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "defaultValue" | "autoFocus" | "numberOfLines" | "isDisabled" | "labelPosition" | "isRequired" | "validationState" | "necessityIndicator" | "helpText" | "errorText" | "successText" | "maxCharacters"> & {
+} & StyledPropsBlade$1;
+declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "placeholder" | "name" | "testID" | "value" | "label" | "onBlur" | "onFocus" | "onChange" | "onSubmit" | "defaultValue" | "autoFocus" | "numberOfLines" | "isDisabled" | "labelPosition" | "isRequired" | "validationState" | "necessityIndicator" | "helpText" | "errorText" | "successText" | "maxCharacters"> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -5529,124 +5118,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<Omit<MarginProps & Pick<{
-    alignContent?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | {
-        readonly base?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly xs?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly s?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly m?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly l?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly xl?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-    } | undefined;
-    alignItems?: react_native.FlexAlignType | {
-        readonly base?: react_native.FlexAlignType | undefined;
-        readonly xs?: react_native.FlexAlignType | undefined;
-        readonly s?: react_native.FlexAlignType | undefined;
-        readonly m?: react_native.FlexAlignType | undefined;
-        readonly l?: react_native.FlexAlignType | undefined;
-        readonly xl?: react_native.FlexAlignType | undefined;
-    } | undefined;
-    alignSelf?: "auto" | react_native.FlexAlignType | {
-        readonly base?: "auto" | react_native.FlexAlignType | undefined;
-        readonly xs?: "auto" | react_native.FlexAlignType | undefined;
-        readonly s?: "auto" | react_native.FlexAlignType | undefined;
-        readonly m?: "auto" | react_native.FlexAlignType | undefined;
-        readonly l?: "auto" | react_native.FlexAlignType | undefined;
-        readonly xl?: "auto" | react_native.FlexAlignType | 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?: 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;
-    } | undefined;
-    flexDirection?: "row" | "column" | "column-reverse" | "row-reverse" | {
-        readonly base?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly xs?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly s?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly m?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly l?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly xl?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-    } | undefined;
-    flexGrow?: number | {
-        readonly base?: number | undefined;
-        readonly xs?: number | undefined;
-        readonly s?: number | undefined;
-        readonly m?: number | undefined;
-        readonly l?: number | undefined;
-        readonly xl?: number | undefined;
-    } | undefined;
-    flexShrink?: number | {
-        readonly base?: number | undefined;
-        readonly xs?: number | undefined;
-        readonly s?: number | undefined;
-        readonly m?: number | undefined;
-        readonly l?: number | undefined;
-        readonly xl?: number | undefined;
-    } | undefined;
-    flexWrap?: "nowrap" | "wrap" | "wrap-reverse" | {
-        readonly base?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly xs?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly s?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly m?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly l?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly xl?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-    } | undefined;
-    justifyContent?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | {
-        readonly base?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly xs?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly s?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly m?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly l?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly xl?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-    } | undefined;
-    justifyItems: never;
-    justifySelf: never;
-    order: never;
-    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: never;
-    __brand__?: "platform-native" | {
-        readonly base?: "platform-native" | undefined;
-        readonly xs?: "platform-native" | undefined;
-        readonly s?: "platform-native" | undefined;
-        readonly m?: "platform-native" | undefined;
-        readonly l?: "platform-native" | undefined;
-        readonly xl?: "platform-native" | undefined;
-    } | undefined;
-}, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & {
+} & Partial<Omit<MarginProps & Pick<FlexboxProps, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & {
     bottom: SpacingValueType | {
         readonly base?: SpacingValueType | undefined;
         readonly xs?: SpacingValueType | undefined;
@@ -5770,7 +5242,7 @@ declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'v
      * The callback function to be invoked when one of the input fields is blurred
      */
     onBlur?: FormInputOnEventWithIndex;
-} & StyledPropsBlade;
+} & StyledPropsBlade$1;
 /**
  * OTPInput component can be used for accepting OTPs sent to users for authentication/verification purposes.
  *
@@ -5831,7 +5303,7 @@ declare type SelectInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' |
  *
  * Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-select--with-single-select SelectInput Documentation}.
  */
-declare const SelectInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "placeholder" | "name" | "testID" | "prefix" | "label" | "onFocus" | "onBlur" | "onClick" | "autoFocus" | "isDisabled" | "labelPosition" | "isRequired" | "validationState" | "necessityIndicator" | "helpText" | "errorText" | "successText" | "suffix"> & {
+declare const SelectInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "placeholder" | "name" | "testID" | "prefix" | "label" | "onBlur" | "onFocus" | "onClick" | "autoFocus" | "isDisabled" | "labelPosition" | "isRequired" | "validationState" | "necessityIndicator" | "helpText" | "errorText" | "successText" | "suffix"> & {
     icon?: IconComponent$1 | undefined;
     /**
      * Controlled value of the Select. Use it in combination of `onChange`.
@@ -5862,7 +5334,7 @@ declare type IndicatorCommonProps = {
      * @default medium
      */
     size?: 'small' | 'medium' | 'large';
-} & TestID & StyledPropsBlade;
+} & TestID & StyledPropsBlade$1;
 declare type IndicatorWithoutA11yLabel = {
     /**
      * A text label to show alongside the indicator dot
@@ -5923,7 +5395,7 @@ declare type ListCommonProps = {
      * @default 'medium'
      */
     size?: 'small' | 'medium';
-} & TestID & StyledPropsBlade;
+} & TestID & StyledPropsBlade$1;
 declare type ListWithIconProps = ListCommonProps & {
     variant?: 'unordered';
     icon?: IconComponent;
@@ -5943,10 +5415,11 @@ declare type FeedbackActionColors = `feedback.${Feedback}.action.text.${DotNotat
 declare type SurfaceColors = `surface.text.${DotNotationColorStringToken<Theme$1['colors']['surface']['text']>}`;
 declare type ActionColors = `action.text.${DotNotationColorStringToken<Theme$1['colors']['action']['text']>}`;
 declare type BadgeTextColors = `badge.text.${DotNotationColorStringToken<Theme$1['colors']['badge']['text']>}`;
+declare type BrandPrimaryColors = `brand.primary.${keyof Theme$1['colors']['brand']['primary']}`;
 declare type As = 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'abbr' | 'q' | 'cite' | 'figcaption' | 'div';
 declare type BaseTextProps = {
     id?: string;
-    color?: ActionColors | FeedbackColors | SurfaceColors | FeedbackActionColors | BadgeTextColors;
+    color?: BrandPrimaryColors | ActionColors | FeedbackColors | SurfaceColors | FeedbackActionColors | BadgeTextColors;
     fontFamily?: keyof Theme$1['typography']['fonts']['family'];
     fontSize?: keyof Theme$1['typography']['fonts']['size'];
     fontWeight?: keyof Theme$1['typography']['fonts']['weight'];
@@ -5968,7 +5441,7 @@ declare type BaseTextProps = {
      */
     numberOfLines?: number;
     componentName?: 'base-text' | 'text' | 'title' | 'heading' | 'code';
-} & TestID & StyledPropsBlade;
+} & TestID & StyledPropsBlade$1;
 
 declare const validAsValues$2: readonly ["span", "h1", "h2", "h3", "h4", "h5", "h6"];
 declare type TitleProps = {
@@ -5985,7 +5458,7 @@ declare type TitleProps = {
     children: React.ReactNode;
     textAlign?: BaseTextProps['textAlign'];
     textDecorationLine?: BaseTextProps['textDecorationLine'];
-} & TestID & StyledPropsBlade;
+} & TestID & StyledPropsBlade$1;
 declare const Title: ({ as, size, type, contrast, color, children, testID, textAlign, textDecorationLine, ...styledProps }: TitleProps) => ReactElement;
 
 declare type HeadingVariant = 'regular' | 'subheading';
@@ -6004,7 +5477,7 @@ declare type HeadingCommonProps = {
     children: React.ReactNode;
     textAlign?: BaseTextProps['textAlign'];
     textDecorationLine?: BaseTextProps['textDecorationLine'];
-} & TestID & StyledPropsBlade;
+} & TestID & StyledPropsBlade$1;
 declare type HeadingNormalVariant = HeadingCommonProps & {
     variant?: Exclude<HeadingVariant, 'subheading'>;
     /**
@@ -6049,7 +5522,7 @@ declare type TextCommonProps = {
     color?: BaseTextProps['color'];
     textAlign?: BaseTextProps['textAlign'];
     textDecorationLine?: BaseTextProps['textDecorationLine'];
-} & TestID & StyledPropsBlade;
+} & TestID & StyledPropsBlade$1;
 declare type TextVariant = 'body' | 'caption';
 declare type TextBodyVariant = TextCommonProps & {
     variant?: Extract<TextVariant, 'body'>;
@@ -6091,7 +5564,7 @@ declare type CodeCommonProps = {
     weight?: 'regular' | 'bold';
     isHighlighted?: boolean;
     color?: BaseTextProps['color'];
-} & TestID & StyledPropsBlade;
+} & TestID & StyledPropsBlade$1;
 declare type CodeHighlightedProps = CodeCommonProps & {
     /**
      * Adds background color to highlight the text
@@ -6214,7 +5687,7 @@ declare type ProgressBarCommonProps = {
      * @default 100
      */
     max?: number;
-} & TestID & StyledPropsBlade;
+} & TestID & StyledPropsBlade$1;
 declare type ProgressBarVariant = 'progress' | 'meter';
 declare type ProgressBarProgressProps = ProgressBarCommonProps & {
     /**
@@ -6279,7 +5752,7 @@ declare type RadioProps = {
      * @default "medium"
      */
     size?: 'small' | 'medium';
-} & TestID & StyledPropsBlade;
+} & TestID & StyledPropsBlade$1;
 declare const Radio: React__default.ForwardRefExoticComponent<{
     /**
      * Sets the label text of the Radio
@@ -6306,124 +5779,7 @@ declare const Radio: React__default.ForwardRefExoticComponent<{
      * @default "medium"
      */
     size?: "small" | "medium" | undefined;
-} & TestID & Partial<Omit<MarginProps & Pick<{
-    alignContent?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | {
-        readonly base?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly xs?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly s?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly m?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly l?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-        readonly xl?: "center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between" | undefined;
-    } | undefined;
-    alignItems?: react_native.FlexAlignType | {
-        readonly base?: react_native.FlexAlignType | undefined;
-        readonly xs?: react_native.FlexAlignType | undefined;
-        readonly s?: react_native.FlexAlignType | undefined;
-        readonly m?: react_native.FlexAlignType | undefined;
-        readonly l?: react_native.FlexAlignType | undefined;
-        readonly xl?: react_native.FlexAlignType | undefined;
-    } | undefined;
-    alignSelf?: "auto" | react_native.FlexAlignType | {
-        readonly base?: "auto" | react_native.FlexAlignType | undefined;
-        readonly xs?: "auto" | react_native.FlexAlignType | undefined;
-        readonly s?: "auto" | react_native.FlexAlignType | undefined;
-        readonly m?: "auto" | react_native.FlexAlignType | undefined;
-        readonly l?: "auto" | react_native.FlexAlignType | undefined;
-        readonly xl?: "auto" | react_native.FlexAlignType | 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?: 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;
-    } | undefined;
-    flexDirection?: "row" | "column" | "column-reverse" | "row-reverse" | {
-        readonly base?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly xs?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly s?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly m?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly l?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        readonly xl?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-    } | undefined;
-    flexGrow?: number | {
-        readonly base?: number | undefined;
-        readonly xs?: number | undefined;
-        readonly s?: number | undefined;
-        readonly m?: number | undefined;
-        readonly l?: number | undefined;
-        readonly xl?: number | undefined;
-    } | undefined;
-    flexShrink?: number | {
-        readonly base?: number | undefined;
-        readonly xs?: number | undefined;
-        readonly s?: number | undefined;
-        readonly m?: number | undefined;
-        readonly l?: number | undefined;
-        readonly xl?: number | undefined;
-    } | undefined;
-    flexWrap?: "nowrap" | "wrap" | "wrap-reverse" | {
-        readonly base?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly xs?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly s?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly m?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly l?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-        readonly xl?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-    } | undefined;
-    justifyContent?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | {
-        readonly base?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly xs?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly s?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly m?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly l?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-        readonly xl?: "center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "space-evenly" | undefined;
-    } | undefined;
-    justifyItems: never;
-    justifySelf: never;
-    order: never;
-    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: never;
-    __brand__?: "platform-native" | {
-        readonly base?: "platform-native" | undefined;
-        readonly xs?: "platform-native" | undefined;
-        readonly s?: "platform-native" | undefined;
-        readonly m?: "platform-native" | undefined;
-        readonly l?: "platform-native" | undefined;
-        readonly xl?: "platform-native" | undefined;
-    } | undefined;
-}, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & {
+} & TestID & Partial<Omit<MarginProps & Pick<FlexboxProps, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & {
     bottom: SpacingValueType | {
         readonly base?: SpacingValueType | undefined;
         readonly xs?: SpacingValueType | undefined;
@@ -6584,7 +5940,7 @@ declare type RadioGroupProps = {
      * @default "medium"
      */
     size?: 'small' | 'medium';
-} & TestID & StyledPropsBlade;
+} & TestID & StyledPropsBlade$1;
 declare const RadioGroup: ({ children, label, helpText, isDisabled, isRequired, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, ...styledProps }: RadioGroupProps) => React__default.ReactElement;
 
 declare type BaseSpinnerProps = {
@@ -6617,7 +5973,7 @@ declare type BaseSpinnerProps = {
      *
      */
     accessibilityLabel: string;
-} & TestID & StyledPropsBlade;
+} & TestID & StyledPropsBlade$1;
 
 declare type SpinnerProps = Omit<BaseSpinnerProps, 'intent'>;
 declare const Spinner: ({ label, labelPosition, accessibilityLabel, contrast, size, testID, ...styledProps }: SpinnerProps) => React.ReactElement;
@@ -6687,6 +6043,13 @@ declare type SwitchProps = {
 
 declare const Switch: React__default.ForwardRefExoticComponent<SwitchProps & React__default.RefAttributes<BladeElementRef>>;
 
+declare type SkeletonProps = StyledPropsBlade & Pick<BaseBoxProps, 'width' | 'maxWidth' | 'minWidth' | 'height' | 'maxHeight' | 'minHeight' | 'borderRadius'> & Partial<FlexboxProps> & {
+    contrast?: 'low' | 'high';
+    testID?: string;
+};
+
+declare const Skeleton: ({ contrast, width, maxWidth, minWidth, height, maxHeight, minHeight, borderRadius, flexWrap, flexDirection, flexGrow, flexShrink, flexBasis, alignItems, alignContent, alignSelf, justifyItems, justifyContent, justifySelf, placeSelf, order, testID, ...props }: SkeletonProps) => React.ReactElement;
+
 declare type VisuallyHiddenProps = {
     children: React.ReactNode;
 } & TestID;
@@ -6742,7 +6105,7 @@ declare type AmountProps = {
      * @default 'INR'
      * */
     currency?: Currency;
-} & TestID & StyledPropsBlade;
+} & TestID & StyledPropsBlade$1;
 declare const Amount: ({ value, suffix, size, isAffixSubtle, intent, prefix, testID, currency, ...styledProps }: AmountProps) => ReactElement;
 
 declare type SnapPoints = [number, number, number];
@@ -6836,7 +6199,7 @@ declare type AccordionProps = {
      * Accepts `AccordionItem` child nodes
      */
     children: ReactElement | ReactElement[];
-} & TestID & StyledPropsBlade;
+} & TestID & StyledPropsBlade$1;
 declare const Accordion: ({ defaultExpandedIndex, expandedIndex, onExpandChange, showNumberPrefix, children, testID, ...styledProps }: AccordionProps) => ReactElement;
 
 declare type AccordionItemProps = {
@@ -6899,7 +6262,7 @@ declare type CollapsibleProps = {
      * **Internal**: used to override responsive width restrictions
      */
     _shouldApplyWidthRestrictions?: boolean;
-} & TestID & StyledPropsBlade;
+} & TestID & StyledPropsBlade$1;
 declare const Collapsible: ({ children, direction, defaultIsExpanded, isExpanded, onExpandChange, testID, _shouldApplyWidthRestrictions, ...styledProps }: CollapsibleProps) => ReactElement;
 
 declare type CollapsibleLinkProps = Pick<LinkProps, 'size' | 'isDisabled' | 'testID' | 'accessibilityLabel' | 'children'>;
@@ -6913,7 +6276,7 @@ declare type CollapsibleBodyProps = {
     /**
      * **Internal**: used for React Native specific workarounds. Collapsible automatically takes care of width, you shouldn't need to configure this
      */
-    _width?: BaseBoxProps['width'];
+    _width?: BaseBoxProps$1['width'];
 } & TestID;
 declare const CollapsibleBody: ({ children, testID, _width }: CollapsibleBodyProps) => ReactElement;
 
@@ -6973,4 +6336,4 @@ declare type BladeCommonEvents = {
     }>;
 };
 
-export { Accordion, AccordionItem, AccordionItemProps, AccordionProps, ActionList, 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, BladeCommonEvents, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetBodyProps, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, BriefcaseIcon, BulkPayoutsIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleBodyProps, CollapsibleButton, CollapsibleButtonProps, CollapsibleLink, CollapsibleLinkProps, CollapsibleProps, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, Divider, DividerProps, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkButtonVariantProps, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, Modal, ModalBody, ModalBodyProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalProps, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputProps, OctagonIcon, OffersIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonsIcon, PaymentLinksIcon, PaymentPagesIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RefreshIcon, RepeatIcon, ReportsIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaveIcon, ScissorsIcon, SearchIcon, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SpinnerProps, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, Switch, SwitchProps, TabletIcon, TagIcon, TargetIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, TitleProps, ToggleLeftIcon, ToggleRightIcon, Tooltip, TooltipInteractiveWrapper, TooltipProps, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useActionListContext, useTheme };
+export { Accordion, AccordionItem, AccordionItemProps, AccordionProps, ActionList, 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, BladeCommonEvents, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetBodyProps, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, BriefcaseIcon, BulkPayoutsIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleBodyProps, CollapsibleButton, CollapsibleButtonProps, CollapsibleLink, CollapsibleLinkProps, CollapsibleProps, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, Divider, DividerProps, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkButtonVariantProps, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, Modal, ModalBody, ModalBodyProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalProps, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputProps, OctagonIcon, OffersIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonsIcon, PaymentLinksIcon, PaymentPagesIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RefreshIcon, RepeatIcon, ReportsIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaveIcon, ScissorsIcon, SearchIcon, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, Skeleton, SkeletonProps, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SpinnerProps, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, Switch, SwitchProps, TabletIcon, TagIcon, TargetIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, TitleProps, ToggleLeftIcon, ToggleRightIcon, Tooltip, TooltipInteractiveWrapper, TooltipProps, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useActionListContext, useTheme };