@razorpay/blade 8.2.3 → 8.3.0

package/build/components/index.d.ts

@@ -2237,43 +2237,72 @@ declare type BoxVisualProps = MakeObjectResponsive<{
 declare type BoxProps = Partial<PaddingProps & MarginProps & LayoutProps & FlexboxProps & PositionProps & GridProps & BoxVisualProps & {
     children?: React.ReactNode | React.ReactNode[];
 } & TestID>;
+declare type BoxRefType = Platform.Select<{
+    web: Omit<HTMLElement, 'style'>;
+    native: View;
+}>;
 
-/**
- * ## Box
- *
- * Box is the basic Layout component.
- *
- *
- * Box components supports most spacing CSS properties like `display`, `padding*`, `flex*`, `height`, `width`, etc.
- *
- *  Check out {@linkcode BoxProps BoxPropsType} for complete list of props and [Layout RFC](https://github.com/razorpay/blade/blob/master/rfcs/2023-01-06-layout.md) for more details on API decision.
- *
- * ----
- *
- * ### Usage
- *
- * ```jsx
- * <Box display="flex">
- * ```
-
- * #### Responsive Props
- *
- * ```jsx
- * <Box padding={{ base: 'spacing.3', m: 'spacing.10' }} />
- * ```
- *
- * #### Margin and Padding Shorthands
- *
- * ```jsx
- * <Box padding={["spacing.3", "spacing.10"]} />
- * ```
- *
- * ---
- *
- * Checkout {@link https://blade.razorpay.com/?path=/docs/components-box Box Documentation}
- *
- */
-declare const Box: (props: BoxProps) => JSX.Element;
+declare const Box: React__default.ForwardRefExoticComponent<Partial<MakeObjectResponsive<{
+    padding: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
+    paddingX: SpacingValueType;
+    paddingY: SpacingValueType;
+    paddingTop: SpacingValueType;
+    paddingRight: SpacingValueType;
+    paddingBottom: SpacingValueType;
+    paddingLeft: SpacingValueType;
+}> & MakeObjectResponsive<{
+    margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
+    marginX: SpacingValueType;
+    marginY: SpacingValueType;
+    marginTop: SpacingValueType;
+    marginRight: SpacingValueType;
+    marginBottom: SpacingValueType;
+    marginLeft: SpacingValueType;
+}> & MakeObjectResponsive<{
+    height: SpacingValueType;
+    minHeight: SpacingValueType;
+    maxHeight: SpacingValueType;
+    width: SpacingValueType;
+    minWidth: SpacingValueType;
+    maxWidth: SpacingValueType;
+} & PickIfExist$1<styled_components.CSSObject, "display" | "overflowX" | "overflowY" | "overflow"> & {
+    __brand__?: "platform-web" | undefined;
+}> & MakeObjectResponsive<{
+    gap: SpacingValueType;
+    rowGap: SpacingValueType;
+    columnGap: SpacingValueType;
+    flex: string | number;
+} & PickIfExist$1<styled_components.CSSObject, "alignContent" | "alignItems" | "alignSelf" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "justifyContent" | "justifyItems" | "justifySelf" | "order" | "placeSelf"> & {
+    __brand__?: "platform-web" | undefined;
+}> & MakeObjectResponsive<{
+    top: SpacingValueType;
+    right: SpacingValueType;
+    bottom: SpacingValueType;
+    left: SpacingValueType;
+} & PickIfExist$1<styled_components.CSSObject, "position" | "zIndex"> & {
+    __brand__?: "platform-web" | undefined;
+}> & MakeObjectResponsive<PickCSSByPlatform$1<"grid" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate">> & 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";
+    borderWidth: "none" | "thin" | "thick";
+    borderColor: "surface.border.normal.lowContrast" | "surface.border.normal.highContrast" | "surface.border.subtle.lowContrast" | "surface.border.subtle.highContrast";
+    borderTopWidth: "none" | "thin" | "thick";
+    borderTopColor: "surface.border.normal.lowContrast" | "surface.border.normal.highContrast" | "surface.border.subtle.lowContrast" | "surface.border.subtle.highContrast";
+    borderRightWidth: "none" | "thin" | "thick";
+    borderRightColor: "surface.border.normal.lowContrast" | "surface.border.normal.highContrast" | "surface.border.subtle.lowContrast" | "surface.border.subtle.highContrast";
+    borderBottomWidth: "none" | "thin" | "thick";
+    borderBottomColor: "surface.border.normal.lowContrast" | "surface.border.normal.highContrast" | "surface.border.subtle.lowContrast" | "surface.border.subtle.highContrast";
+    borderLeftWidth: "none" | "thin" | "thick";
+    borderLeftColor: "surface.border.normal.lowContrast" | "surface.border.normal.highContrast" | "surface.border.subtle.lowContrast" | "surface.border.subtle.highContrast";
+    borderRadius: "none" | "small" | "medium" | "large" | "max" | "round";
+    borderTopLeftRadius: "none" | "small" | "medium" | "large" | "max" | "round";
+    borderTopRightRadius: "none" | "small" | "medium" | "large" | "max" | "round";
+    borderBottomRightRadius: "none" | "small" | "medium" | "large" | "max" | "round";
+    borderBottomLeftRadius: "none" | "small" | "medium" | "large" | "max" | "round";
+}> & {
+    as: "header" | "main" | "aside" | "div" | "footer" | "nav" | "section" | "span";
+} & {
+    children?: React__default.ReactNode | React__default.ReactNode[];
+} & TestID> & React__default.RefAttributes<BoxRefType>>;
 
 declare const ComponentIds: {
     CardHeader: string;
@@ -3875,7 +3904,7 @@ declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | '
      */
     type?: Type;
 } & StyledPropsBlade;
-declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "testID" | "placeholder" | "label" | "value" | "defaultValue" | "prefix" | "autoCapitalize" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "autoFocus" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "suffix" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
+declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "testID" | "placeholder" | "label" | "value" | "prefix" | "defaultValue" | "autoCapitalize" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "autoFocus" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "suffix" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -4806,4 +4835,4 @@ declare const BottomSheetBody: ({ children }: {
 
 declare const BottomSheet: ({ isOpen, onDismiss, children, initialFocusRef, snapPoints, }: BottomSheetProps) => React__default.ReactElement;
 
-export { ActionList, ActionListFooter, ActionListFooterIcon, ActionListFooterProps, ActionListHeader, ActionListHeaderIcon, ActionListHeaderProps, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionDivider, ActionListSectionProps, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BriefcaseIcon, BulkPayoutsIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownButton, 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, useActionListContext, useTheme };
+export { ActionList, ActionListFooter, ActionListFooterIcon, ActionListFooterProps, ActionListHeader, ActionListHeaderIcon, ActionListHeaderProps, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionDivider, ActionListSectionProps, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, BriefcaseIcon, BulkPayoutsIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownButton, 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, useActionListContext, useTheme };

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

@@ -2239,43 +2239,72 @@ declare type BoxVisualProps = MakeObjectResponsive<{
 declare type BoxProps = Partial<PaddingProps & MarginProps & LayoutProps & FlexboxProps & PositionProps & GridProps & BoxVisualProps & {
     children?: React.ReactNode | React.ReactNode[];
 } & TestID>;
+declare type BoxRefType = Platform.Select<{
+    web: Omit<HTMLElement, 'style'>;
+    native: View;
+}>;
 
-/**
- * ## Box
- *
- * Box is the basic Layout component.
- *
- *
- * Box components supports most spacing CSS properties like `display`, `padding*`, `flex*`, `height`, `width`, etc.
- *
- *  Check out {@linkcode BoxProps BoxPropsType} for complete list of props and [Layout RFC](https://github.com/razorpay/blade/blob/master/rfcs/2023-01-06-layout.md) for more details on API decision.
- *
- * ----
- *
- * ### Usage
- *
- * ```jsx
- * <Box display="flex">
- * ```
-
- * #### Responsive Props
- *
- * ```jsx
- * <Box padding={{ base: 'spacing.3', m: 'spacing.10' }} />
- * ```
- *
- * #### Margin and Padding Shorthands
- *
- * ```jsx
- * <Box padding={["spacing.3", "spacing.10"]} />
- * ```
- *
- * ---
- *
- * Checkout {@link https://blade.razorpay.com/?path=/docs/components-box Box Documentation}
- *
- */
-declare const Box: (props: BoxProps) => JSX.Element;
+declare const Box: React__default.ForwardRefExoticComponent<Partial<MakeObjectResponsive<{
+    padding: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
+    paddingX: SpacingValueType;
+    paddingY: SpacingValueType;
+    paddingTop: SpacingValueType;
+    paddingRight: SpacingValueType;
+    paddingBottom: SpacingValueType;
+    paddingLeft: SpacingValueType;
+}> & MakeObjectResponsive<{
+    margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
+    marginX: SpacingValueType;
+    marginY: SpacingValueType;
+    marginTop: SpacingValueType;
+    marginRight: SpacingValueType;
+    marginBottom: SpacingValueType;
+    marginLeft: SpacingValueType;
+}> & MakeObjectResponsive<{
+    height: SpacingValueType;
+    minHeight: SpacingValueType;
+    maxHeight: SpacingValueType;
+    width: SpacingValueType;
+    minWidth: SpacingValueType;
+    maxWidth: SpacingValueType;
+} & PickIfExist$1<react_native.ViewStyle, "display" | "overflowX" | "overflowY" | "overflow"> & {
+    __brand__?: "platform-native" | undefined;
+}> & MakeObjectResponsive<{
+    gap: SpacingValueType;
+    rowGap: SpacingValueType;
+    columnGap: SpacingValueType;
+    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;
+}> & MakeObjectResponsive<{
+    top: SpacingValueType;
+    right: SpacingValueType;
+    bottom: SpacingValueType;
+    left: SpacingValueType;
+} & PickIfExist$1<react_native.ViewStyle, "position" | "zIndex"> & {
+    __brand__?: "platform-native" | undefined;
+}> & MakeObjectResponsive<PickCSSByPlatform$1<"grid" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate">> & 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";
+    borderWidth: "none" | "thin" | "thick";
+    borderColor: "surface.border.normal.lowContrast" | "surface.border.normal.highContrast" | "surface.border.subtle.lowContrast" | "surface.border.subtle.highContrast";
+    borderTopWidth: "none" | "thin" | "thick";
+    borderTopColor: "surface.border.normal.lowContrast" | "surface.border.normal.highContrast" | "surface.border.subtle.lowContrast" | "surface.border.subtle.highContrast";
+    borderRightWidth: "none" | "thin" | "thick";
+    borderRightColor: "surface.border.normal.lowContrast" | "surface.border.normal.highContrast" | "surface.border.subtle.lowContrast" | "surface.border.subtle.highContrast";
+    borderBottomWidth: "none" | "thin" | "thick";
+    borderBottomColor: "surface.border.normal.lowContrast" | "surface.border.normal.highContrast" | "surface.border.subtle.lowContrast" | "surface.border.subtle.highContrast";
+    borderLeftWidth: "none" | "thin" | "thick";
+    borderLeftColor: "surface.border.normal.lowContrast" | "surface.border.normal.highContrast" | "surface.border.subtle.lowContrast" | "surface.border.subtle.highContrast";
+    borderRadius: "none" | "small" | "medium" | "large" | "max" | "round";
+    borderTopLeftRadius: "none" | "small" | "medium" | "large" | "max" | "round";
+    borderTopRightRadius: "none" | "small" | "medium" | "large" | "max" | "round";
+    borderBottomRightRadius: "none" | "small" | "medium" | "large" | "max" | "round";
+    borderBottomLeftRadius: "none" | "small" | "medium" | "large" | "max" | "round";
+}> & {
+    as: "header" | "main" | "aside" | "div" | "footer" | "nav" | "section" | "span";
+} & {
+    children?: React__default.ReactNode | React__default.ReactNode[];
+} & TestID> & React__default.RefAttributes<BoxRefType>>;
 
 declare const ComponentIds: {
     CardHeader: string;
@@ -3878,7 +3907,7 @@ declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | '
      */
     type?: Type;
 } & StyledPropsBlade;
-declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "name" | "placeholder" | "label" | "value" | "defaultValue" | "prefix" | "autoCapitalize" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "autoFocus" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "suffix" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
+declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "name" | "placeholder" | "label" | "value" | "prefix" | "defaultValue" | "autoCapitalize" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "autoFocus" | "isDisabled" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "suffix" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -4792,4 +4821,4 @@ declare const BottomSheetFooter: ({ children }: BottomSheetFooterProps) => React
 
 declare const BottomSheet: ({ children, snapPoints, isOpen, onDismiss, initialFocusRef, }: BottomSheetProps) => React__default.ReactElement;
 
-export { ActionList, ActionListFooter, ActionListFooterIcon, ActionListFooterProps, ActionListHeader, ActionListHeaderIcon, ActionListHeaderProps, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionDivider, ActionListSectionProps, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BriefcaseIcon, BulkPayoutsIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownButton, 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, useActionListContext, useTheme };
+export { ActionList, ActionListFooter, ActionListFooterIcon, ActionListFooterProps, ActionListHeader, ActionListHeaderIcon, ActionListHeaderProps, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionDivider, ActionListSectionProps, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, BriefcaseIcon, BulkPayoutsIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownButton, 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, useActionListContext, useTheme };

package/build/components/index.native.js

@@ -3979,7 +3979,7 @@ var _excluded$m=["children","contrast","fontWeight","icon","size","variant","tes
 
 var validBoxAsValues=['div','section','footer','header','main','aside','nav','span'];
 
-var validateBackgroundString=function validateBackgroundString(stringBackgroundColorValue){if(!stringBackgroundColorValue.startsWith('surface.background')){throw new Error("[Blade - Box]: Oops! Currently you can only use `surface.background.*` tokens with backgroundColor property but we received `"+stringBackgroundColorValue+"` instead.\n\n Do you have a usecase of using other values? Create an issue on https://github.com/razorpay/blade repo to let us know and we can discuss \u2728");}};var validateBackgroundProp=function validateBackgroundProp(responsiveBackgroundColor){if(responsiveBackgroundColor){if(typeof responsiveBackgroundColor==='string'){validateBackgroundString(responsiveBackgroundColor);return;}Object.values(responsiveBackgroundColor).forEach(function(backgroundColor){validateBackgroundString(backgroundColor);});}};var makeBoxProps=function makeBoxProps(props){return {display:props.display,overflow:props.overflow,overflowX:props.overflowX,overflowY:props.overflowY,height:props.height,minHeight:props.minHeight,maxHeight:props.maxHeight,width:props.width,minWidth:props.minWidth,maxWidth:props.maxWidth,flex:props.flex,flexWrap:props.flexWrap,flexDirection:props.flexDirection,flexGrow:props.flexGrow,flexShrink:props.flexShrink,flexBasis:props.flexBasis,alignItems:props.alignItems,alignContent:props.alignContent,alignSelf:props.alignSelf,justifyItems:props.justifyItems,justifyContent:props.justifyContent,justifySelf:props.justifySelf,placeSelf:props.placeSelf,order:props.order,grid:props.grid,gridColumn:props.gridColumn,gridRow:props.gridRow,gridRowStart:props.gridRowStart,gridRowEnd:props.gridRowEnd,gridColumnStart:props.gridColumnStart,gridColumnEnd:props.gridColumnEnd,gridArea:props.gridArea,gridAutoFlow:props.gridAutoFlow,gridAutoRows:props.gridAutoRows,gridAutoColumns:props.gridAutoColumns,gridTemplate:props.gridTemplate,gridTemplateAreas:props.gridTemplateAreas,gridTemplateColumns:props.gridTemplateColumns,gridTemplateRows:props.gridTemplateRows,padding:props.padding,paddingTop:props.paddingTop,paddingBottom:props.paddingBottom,paddingRight:props.paddingRight,paddingLeft:props.paddingLeft,paddingX:props.paddingX,paddingY:props.paddingY,margin:props.margin,marginBottom:props.marginBottom,marginTop:props.marginTop,marginRight:props.marginRight,marginLeft:props.marginLeft,marginX:props.marginX,marginY:props.marginY,gap:props.gap,rowGap:props.rowGap,columnGap:props.columnGap,position:props.position,zIndex:props.zIndex,top:props.top,right:props.right,bottom:props.bottom,left:props.left,backgroundColor:props.backgroundColor,borderWidth:props.borderWidth,borderColor:props.borderColor,borderTopWidth:props.borderTopWidth,borderTopColor:props.borderTopColor,borderRightWidth:props.borderRightWidth,borderRightColor:props.borderRightColor,borderBottomWidth:props.borderBottomWidth,borderBottomColor:props.borderBottomColor,borderLeftWidth:props.borderLeftWidth,borderLeftColor:props.borderLeftColor,borderRadius:props.borderRadius,borderTopLeftRadius:props.borderTopLeftRadius,borderTopRightRadius:props.borderTopRightRadius,borderBottomRightRadius:props.borderBottomRightRadius,borderBottomLeftRadius:props.borderBottomLeftRadius,children:props.children,as:isReactNative$4()?undefined:props.as};};var Box=function Box(props){React__default.useEffect(function(){validateBackgroundProp(props.backgroundColor);},[props.backgroundColor]);React__default.useEffect(function(){if(props.as){if(isReactNative$4()){throw new Error('[Blade - Box]: `as` prop is not supported on React Native');}if(!validBoxAsValues.includes(props.as)){throw new Error("[Blade - Box]: Invalid `as` prop value - "+props.as+". Only "+validBoxAsValues.join(', ')+" are valid values");}}},[props.as]);return jsx(BaseBox,_extends({},metaAttribute({name:MetaConstants.Box,testID:props.testID}),makeBoxProps(props)));};
+var validateBackgroundString=function validateBackgroundString(stringBackgroundColorValue){if(!stringBackgroundColorValue.startsWith('surface.background')){throw new Error("[Blade - Box]: Oops! Currently you can only use `surface.background.*` tokens with backgroundColor property but we received `"+stringBackgroundColorValue+"` instead.\n\n Do you have a usecase of using other values? Create an issue on https://github.com/razorpay/blade repo to let us know and we can discuss \u2728");}};var validateBackgroundProp=function validateBackgroundProp(responsiveBackgroundColor){if(responsiveBackgroundColor){if(typeof responsiveBackgroundColor==='string'){validateBackgroundString(responsiveBackgroundColor);return;}Object.values(responsiveBackgroundColor).forEach(function(backgroundColor){validateBackgroundString(backgroundColor);});}};var makeBoxProps=function makeBoxProps(props){return {display:props.display,overflow:props.overflow,overflowX:props.overflowX,overflowY:props.overflowY,height:props.height,minHeight:props.minHeight,maxHeight:props.maxHeight,width:props.width,minWidth:props.minWidth,maxWidth:props.maxWidth,flex:props.flex,flexWrap:props.flexWrap,flexDirection:props.flexDirection,flexGrow:props.flexGrow,flexShrink:props.flexShrink,flexBasis:props.flexBasis,alignItems:props.alignItems,alignContent:props.alignContent,alignSelf:props.alignSelf,justifyItems:props.justifyItems,justifyContent:props.justifyContent,justifySelf:props.justifySelf,placeSelf:props.placeSelf,order:props.order,grid:props.grid,gridColumn:props.gridColumn,gridRow:props.gridRow,gridRowStart:props.gridRowStart,gridRowEnd:props.gridRowEnd,gridColumnStart:props.gridColumnStart,gridColumnEnd:props.gridColumnEnd,gridArea:props.gridArea,gridAutoFlow:props.gridAutoFlow,gridAutoRows:props.gridAutoRows,gridAutoColumns:props.gridAutoColumns,gridTemplate:props.gridTemplate,gridTemplateAreas:props.gridTemplateAreas,gridTemplateColumns:props.gridTemplateColumns,gridTemplateRows:props.gridTemplateRows,padding:props.padding,paddingTop:props.paddingTop,paddingBottom:props.paddingBottom,paddingRight:props.paddingRight,paddingLeft:props.paddingLeft,paddingX:props.paddingX,paddingY:props.paddingY,margin:props.margin,marginBottom:props.marginBottom,marginTop:props.marginTop,marginRight:props.marginRight,marginLeft:props.marginLeft,marginX:props.marginX,marginY:props.marginY,gap:props.gap,rowGap:props.rowGap,columnGap:props.columnGap,position:props.position,zIndex:props.zIndex,top:props.top,right:props.right,bottom:props.bottom,left:props.left,backgroundColor:props.backgroundColor,borderWidth:props.borderWidth,borderColor:props.borderColor,borderTopWidth:props.borderTopWidth,borderTopColor:props.borderTopColor,borderRightWidth:props.borderRightWidth,borderRightColor:props.borderRightColor,borderBottomWidth:props.borderBottomWidth,borderBottomColor:props.borderBottomColor,borderLeftWidth:props.borderLeftWidth,borderLeftColor:props.borderLeftColor,borderRadius:props.borderRadius,borderTopLeftRadius:props.borderTopLeftRadius,borderTopRightRadius:props.borderTopRightRadius,borderBottomRightRadius:props.borderBottomRightRadius,borderBottomLeftRadius:props.borderBottomLeftRadius,children:props.children,as:isReactNative$4()?undefined:props.as};};var _Box=function _Box(props,ref){React__default.useEffect(function(){validateBackgroundProp(props.backgroundColor);},[props.backgroundColor]);React__default.useEffect(function(){if(props.as){if(isReactNative$4()){throw new Error('[Blade - Box]: `as` prop is not supported on React Native');}if(!validBoxAsValues.includes(props.as)){throw new Error("[Blade - Box]: Invalid `as` prop value - "+props.as+". Only "+validBoxAsValues.join(', ')+" are valid values");}}},[props.as]);return jsx(BaseBox,_extends({ref:ref},metaAttribute({name:MetaConstants.Box,testID:props.testID}),makeBoxProps(props)));};var Box=assignWithoutSideEffects(React__default.forwardRef(_Box),{displayName:'Box'});
 
 var _excluded$l=["children","surfaceLevel","elevation"];var CardSurfaceStyled=styled(BaseBox)(function(_ref){var surfaceLevel=_ref.surfaceLevel,elevation=_ref.elevation,theme=_ref.theme;var backgroundColor=theme.colors.surface.background["level"+surfaceLevel].lowContrast;return {width:'100%',display:'flex',flexDirection:'column',borderWidth:elevation==='none'?""+theme.border.width.thin:undefined,borderStyle:elevation==='none'?'solid':undefined,borderColor:elevation==='none'?""+theme.colors.surface.border.normal.lowContrast:undefined,backgroundColor:backgroundColor};});var CardSurface=function CardSurface(_ref2){var children=_ref2.children,surfaceLevel=_ref2.surfaceLevel,elevation=_ref2.elevation,props=_objectWithoutProperties(_ref2,_excluded$l);var _useTheme=useTheme(),theme=_useTheme.theme;return jsx(CardSurfaceStyled,_extends({},props,{surfaceLevel:surfaceLevel,elevation:elevation,style:castNativeType(theme.elevation[elevation]),children:children}));};