@razorpay/blade 11.19.1 → 11.21.0

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

@@ -3075,7 +3075,7 @@ type TextColors = `interactive.text.${InteractiveText}` | `surface.text.${Surfac
 type As = 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'abbr' | 'q' | 'cite' | 'figcaption' | 'div' | 'label';
 type BaseTextProps = {
     id?: string;
-    color?: TextColors;
+    color?: TextColors | 'currentColor';
     fontFamily?: keyof Theme['typography']['fonts']['family'];
     fontSize?: keyof Theme['typography']['fonts']['size'];
     fontWeight?: keyof Theme['typography']['fonts']['weight'];
@@ -5338,15 +5338,19 @@ type CollapsibleProps = {
     onExpandChange?: ({ isExpanded }: {
         isExpanded: boolean;
     }) => void;
+    /**
+     * **Internal**: disables trigger validations. Used for AccordionButton and SideNavLink internally
+     */
+    _dangerouslyDisableValidations?: boolean;
     /**
      * **Internal**: used to override responsive width restrictions
      */
     _shouldApplyWidthRestrictions?: boolean;
 } & TestID & StyledPropsBlade;
-declare const Collapsible: ({ children, direction, defaultIsExpanded, isExpanded, onExpandChange, testID, _shouldApplyWidthRestrictions, ...styledProps }: CollapsibleProps) => ReactElement;
+declare const Collapsible: ({ children, direction, defaultIsExpanded, isExpanded, onExpandChange, testID, _shouldApplyWidthRestrictions, _dangerouslyDisableValidations, ...styledProps }: CollapsibleProps) => ReactElement;
 
-type CollapsibleLinkProps = Pick<LinkProps, 'size' | 'isDisabled' | 'testID' | 'accessibilityLabel' | 'children'>;
-declare const CollapsibleLink: ({ children, size, isDisabled, testID, accessibilityLabel, }: CollapsibleLinkProps) => ReactElement;
+type CollapsibleLinkProps = Pick<LinkProps, 'color' | 'size' | 'isDisabled' | 'testID' | 'accessibilityLabel' | 'children'> & StyledPropsBlade;
+declare const CollapsibleLink: ({ children, size, color, isDisabled, testID, accessibilityLabel, ...styledProps }: CollapsibleLinkProps) => ReactElement;
 
 type CollapsibleButtonProps = Pick<ButtonProps, 'variant' | 'size' | 'iconPosition' | 'isDisabled' | 'testID' | 'accessibilityLabel' | 'icon' | 'children'>;
 declare const CollapsibleButton: React$1.ForwardRefExoticComponent<CollapsibleButtonProps & React$1.RefAttributes<BladeElementRef>>;
@@ -5354,8 +5358,15 @@ declare const CollapsibleButton: React$1.ForwardRefExoticComponent<CollapsibleBu
 type CollapsibleBodyProps = {
     children: ReactNode;
     width?: BaseBoxProps['width'];
+    /**
+     * Internal
+     *
+     * Set to false to remove margin of CollapsibleBody
+     */
+    _hasMargin?: boolean;
 } & TestID;
-declare const CollapsibleBody: ({ children, testID, width }: CollapsibleBodyProps) => ReactElement;
+
+declare const CollapsibleBody: ({ children, testID, width, _hasMargin, }: CollapsibleBodyProps) => ReactElement;
 
 type DividerProps = {
     /**
@@ -5430,6 +5441,13 @@ type DrawerProps = {
      * Ref to the element that should receive focus when opening the drawer.
      */
     initialFocusRef?: React.MutableRefObject<any>;
+    /**
+     * If `true`, the DrawerBody will be rendered only when it becomes active.
+     * Set to `false` to keep DrawerBody in DOM
+     *
+     * @default true
+     */
+    isLazy?: boolean;
 } & TestID;
 type DrawerHeaderProps = {
     /**
@@ -7503,6 +7521,227 @@ type RadioGroupProps = {
 } & TestID & StyledPropsBlade;
 declare const RadioGroup: ({ children, label, helpText, isDisabled, isRequired, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, ...styledProps }: RadioGroupProps) => React__default.ReactElement;
 
+type TooltipProps = {
+    /**
+     * Tooltip title
+     */
+    title?: string;
+    /**
+     * Tooltip content
+     */
+    content: string;
+    /**
+     * Placement of tooltip
+     *
+     * @default "top"
+     */
+    placement?: Exclude<UseFloatingOptions['placement'], 'left-end' | 'left-start' | 'right-end' | 'right-start'>;
+    children: React.ReactElement;
+    onOpenChange?: ({ isOpen }: {
+        isOpen: boolean;
+    }) => void;
+    /**
+     * Sets the z-index of the modal
+     * @default 1100
+     */
+    zIndex?: number;
+};
+
+declare const Tooltip: ({ title, content, children, placement, onOpenChange, zIndex, }: TooltipProps) => React__default.ReactElement;
+
+declare const TooltipInteractiveWrapper: React__default.ForwardRefExoticComponent<PressableProps & React__default.RefAttributes<View>>;
+
+type SideNavProps = {
+    /**
+     * Children slot.
+     *
+     * Supports SideNavFooter, SideNavBody
+     */
+    children: React__default.ReactNode;
+    /**
+     * **Only applicable in mobile**
+     *
+     * State for opening / closing the SideNav in mobile
+     */
+    isOpen?: DrawerProps['isOpen'];
+    /**
+     * **Only applicable in mobile**
+     *
+     * Callback when SideNav is closed
+     */
+    onDismiss?: DrawerProps['onDismiss'];
+    /**
+     * Banner slot for usecases like adding Activation Panel
+     *
+     * **IMPORTANT** Avoid adding promotional items in this
+     */
+    banner?: React__default.ReactElement;
+} & StyledPropsBlade & TestID;
+type SideNavLinkProps = {
+    /**
+     * title of the Link
+     */
+    title: string;
+    /**
+     * Slot after the title.
+     *
+     * Used for <Badge />, <Counter /> in most cases
+     */
+    titleSuffix?: React__default.ReactElement;
+    /**
+     * Trailing slot for item. Only visible on hover of the item
+     *
+     * Used for <Button />
+     */
+    trailing?: React__default.ReactElement;
+    /**
+     * href of the link
+     */
+    href?: LinkProps['href'];
+    /**
+     * Anchor tag `target` attribute
+     */
+    target?: LinkProps['target'];
+    /**
+     * as prop to pass ReactRouter's Link component.
+     *
+     * ```jsx
+     * import { Link } from 'react-router-dom';
+     *
+     * <SideNavLink as={Link} />
+     * ```
+     */
+    as: React__default.ComponentType<any>;
+    /**
+     * Set Active state of SideNavLink.
+     *
+     * Checkout SideNav documentation for usage
+     */
+    isActive?: boolean;
+    /**
+     * Leading icon for SideNavLink
+     */
+    icon?: IconComponent;
+    /**
+     * Children slot to add Nested Menu
+     *
+     * ```jsx
+     * <SideNavLink title="L2 Trigger" href="/l2-first-item">
+     *  <SideNavLevel>
+     *    <SideNavLink title="L2 Item" href="/l2-first-item" />
+     *    <SideNavLink title="L2 Item 2" href="/l2-second-item" />
+     *  </SideNavLevel>
+     * </SideNavLink>
+     * ```
+     */
+    children?: React__default.ReactElement;
+    /**
+     * Tooltip object to add tooltip to SideNavLink
+     *
+     * ```jsx
+     * <SideNavLink
+     *  tooltip={{
+     *    title: 'Tooltip Title',
+     *    content: 'Tooltip description'
+     *  }}
+     * />
+     * ```
+     */
+    tooltip?: Pick<TooltipProps, 'title' | 'content' | 'onOpenChange'>;
+};
+type SideNavSectionProps = {
+    title?: string;
+    /**
+     * Number of items after which the items are collapsed into `+x more`
+     */
+    maxVisibleItems?: number;
+    /**
+     * Default value if the nav section is expanded or collapsed after maxVisibleItems
+     *
+     * @default false
+     */
+    defaultIsExpanded?: boolean;
+    /**
+     * Callback when `+x more is clicked`
+     */
+    onExpandChange?: ({ isExpanded }: {
+        isExpanded: boolean;
+    }) => void;
+    /**
+     * Children slot for SideNavLink
+     */
+    children: React__default.ReactElement[];
+};
+type SideNavFooterProps = {
+    /**
+     * Children slot for SideNavLink, SideNavItem
+     */
+    children: React__default.ReactElement[] | React__default.ReactElement;
+};
+type SideNavItemProps = {
+    /**
+     * Leading slot for SideNavItem.
+     *
+     * Meant for Indicator, Icon, etc
+     */
+    leading: React__default.ReactElement;
+    /**
+     * Trailing slot for SideNavItem.
+     *
+     * Meant for Button, Switch, etc
+     */
+    trailing: React__default.ReactElement;
+    /**
+     * Title of SideNavItem
+     */
+    title: string;
+    /**
+     * Render item of container. Use as="label" when using Switch or form input in trailing
+     *
+     * @default div
+     */
+    as?: 'label' | 'div';
+    /**
+     * backgroundColor of the item
+     *
+     * @default undefined
+     */
+    backgroundColor?: BaseBoxProps['backgroundColor'];
+    /**
+     * Tooltip object to add tooltip to SideNavItem
+     *
+     * ```jsx
+     * <SideNavItem
+     *  tooltip={{
+     *    title: 'Tooltip Title',
+     *    content: 'Tooltip description'
+     *  }}
+     * />
+     * ```
+     */
+    tooltip?: SideNavLinkProps['tooltip'];
+};
+type SideNavBodyProps = {
+    children: React__default.ReactElement | React__default.ReactElement[];
+};
+type SideNavLevelProps = {
+    children: React__default.ReactElement | React__default.ReactElement[];
+};
+
+declare const SideNav: (_props: SideNavProps) => React.ReactElement;
+
+declare const SideNavLink: (_props: SideNavLinkProps) => React.ReactElement;
+
+declare const SideNavLevel: (_props: SideNavLevelProps) => React.ReactElement;
+
+declare const SideNavSection: (_props: SideNavSectionProps) => React.ReactElement;
+
+declare const SideNavItem: (_props: SideNavItemProps) => React.ReactElement;
+
+declare const SideNavFooter: (_props: SideNavFooterProps) => React.ReactElement;
+
+declare const SideNavBody: (_props: SideNavBodyProps) => React.ReactElement;
+
 type SkeletonProps = StyledPropsBlade & Pick<BaseBoxProps, 'width' | 'maxWidth' | 'minWidth' | 'height' | 'maxHeight' | 'minHeight' | 'borderRadius'> & Partial<FlexboxProps> & {
     testID?: string;
 };
@@ -8725,36 +8964,6 @@ type TagProps = {
  */
 declare const Tag: ({ size, icon: Icon, onDismiss, children, isDisabled, testID, _isVirtuallyFocused, _isTagInsideInput, ...styledProps }: TagProps) => React__default.ReactElement | null;
 
-type TooltipProps = {
-    /**
-     * Tooltip title
-     */
-    title?: string;
-    /**
-     * Tooltip content
-     */
-    content: string;
-    /**
-     * Placement of tooltip
-     *
-     * @default "top"
-     */
-    placement?: Exclude<UseFloatingOptions['placement'], 'left-end' | 'left-start' | 'right-end' | 'right-start'>;
-    children: React.ReactElement;
-    onOpenChange?: ({ isOpen }: {
-        isOpen: boolean;
-    }) => void;
-    /**
-     * Sets the z-index of the modal
-     * @default 1100
-     */
-    zIndex?: number;
-};
-
-declare const Tooltip: ({ title, content, children, placement, onOpenChange, zIndex, }: TooltipProps) => React__default.ReactElement;
-
-declare const TooltipInteractiveWrapper: React__default.ForwardRefExoticComponent<PressableProps & React__default.RefAttributes<View>>;
-
 declare const ToastContainer: () => React.ReactElement;
 
 type ToastProps = {
@@ -8836,4 +9045,4 @@ declare const VisuallyHidden: ({ children, testID }: VisuallyHiddenProps) => Rea
  */
 declare const screenReaderStyles: CSSObject;
 
-export { AcceptPaymentsIcon, Accordion, AccordionItem, AccordionItemBody, AccordionItemHeader, AccordionItemProps, AccordionProps, ActionList, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionProps, ActivityIcon, AddressBookIcon, AffordabilityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AttachmentIcon, AutoComplete, AutoCompleteProps, AutomateAccountingIcon, AutomatePayrollIcon, Avatar, AvatarGroup, AwardIcon, Badge, BadgeProps, BankAccountVerificationIcon, BankIcon, BarChartAltIcon, BarChartIcon, BarCodeIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BfsiIcon, BillIcon, BladeCommonEvents, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetBodyProps, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, Breadcrumb, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbProps, BriefcaseIcon, BugIcon, BuildingIcon, BulkPayoutsIcon, BusinessBankingIcon, BusinessSpendManagementIcon, Button, ButtonGroup, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderAmount, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, Carousel, CarouselItem, CarouselProps, CashIcon, CastIcon, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, Chip, ChipGroup, ChipGroupProps, ChipProps, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, ClosedCaptioningIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodeSnippetIcon, CodepenIcon, CoinIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleBodyProps, CollapsibleButton, CollapsibleButtonProps, CollapsibleLink, CollapsibleLinkProps, CollapsibleProps, CommandIcon, CompanyRegistrationIcon, CompassIcon, ComponentIds, ConfettiIcon, ContactlessPaymentIcon, CookieIcon, CopyIcon, CopyrightIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CreditsAndLoansIcon, CropIcon, CrosshairIcon, CurrentAccountIcon, CustomersIcon, CutIcon, DashboardIcon, DatePicker, DatePickerProps, DeleteIcon, DigitalLendingIcon, DisbursePaymentsIcon, DiscIcon, Display, DisplayProps, Divider, DividerProps, DollarIcon, DollarsIcon, DotIcon, DownloadCloudIcon, DownloadIcon, Drawer, DrawerBody, DrawerHeader, DrawerHeaderProps, DrawerProps, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EcommerceIcon, EditComposeIcon, EditIcon, EditInlineIcon, EducationIcon, EscrowAccountIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FileUpload, FileZipIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, ForexManagementIcon, FreelanceIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphoneIcon, HeadphonesIcon, HeadsetIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconColors, IconComponent, IconProps, IconSize, Identifier, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InstantSettlementIcon, InternationalPaymentsIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkButtonVariantProps, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListItemText, ListItemTextProps, ListProps, LoaderIcon, LoansForBusinessesIcon, LockIcon, LogInIcon, LogOutIcon, MagicCheckoutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MobileAppIcon, Modal, ModalBody, ModalBodyProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalProps, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputCommonProps, OTPInputProps, OctagonIcon, OffersIcon, OptimizerIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonIcon, PaymentButtonsIcon, PaymentGatewayIcon, PaymentLinkIcon, PaymentLinksIcon, PaymentPagesIcon, PayoutLinkIcon, PayrollAddonsIcon, PayrollForCaIcon, PayrollForStartupOrSmeIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneNumberInput, PhoneNumberInputProps, PhoneOffIcon, PhoneOutgoingIcon, PictureInPictureIcon, PieChartIcon, PinIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, Popover, PopoverInteractiveWrapper, PopoverProps, PopoverTriggerProps, PosIcon, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RazorpayxPayrollIcon, RefreshIcon, RepeatIcon, ReportsIcon, ResizerIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RouteIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaasIcon, SaveIcon, ScissorsIcon, SearchIcon, SearchInput, SearchInputProps, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, Skeleton, SkeletonProps, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SolutionsIcon, SourceToPayIcon, SparklesIcon, SpeakerIcon, Spinner, SpinnerProps, SpotlightPopoverStepRenderProps, SpotlightPopoverTourFooter, SpotlightPopoverTourProps, SpotlightPopoverTourStep, SpotlightPopoverTourSteps, SquareIcon, StampIcon, StarIcon, StepGroup, StepGroupProps, StepItem, StepItemIcon, StepItemIndicator, StepItemProps, StopCircleIcon, StorefrontIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, Switch, SwitchProps, TabItem, TabItemProps, TabList, TabPanel, TabPanelProps, Table, TableBackgroundColors, TableBody, TableBodyProps, TableCell, TableCellProps, TableData, TableFooter, TableFooterCell, TableFooterCellProps, TableFooterProps, TableFooterRow, TableFooterRowProps, TableHeader, TableHeaderCell, TableHeaderCellProps, TableHeaderProps, TableHeaderRow, TableHeaderRowProps, TableNode, TablePagination, TablePaginationCommonProps, TablePaginationProps$1 as TablePaginationProps, TablePaginationType, TableProps, TableRow, TableRowProps, TableToolbar, TableToolbarActions, TableToolbarActionsProps, TableToolbarProps, TabletIcon, Tabs, TabsProps, Tag, TagIcon, TagProps, TargetIcon, TaxPaymentsIcon, TestIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, TicketIcon, ToastContainer, ToastProps, ToggleLeftIcon, ToggleRightIcon, TokenHqIcon, Tooltip, TooltipInteractiveWrapper, TooltipProps, Tour, TrademarkIcon, TrademarkRegisteredIcon, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UpiAutopayIcon, UploadCloudIcon, UploadIcon, UseToastReturn, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VendorPaymentsIcon, VideoIcon, VideoOffIcon, ViewLiveDemoIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WalletIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getHeadingProps, getTextProps, screenReaderStyles, useTheme, useToast };
+export { AcceptPaymentsIcon, Accordion, AccordionItem, AccordionItemBody, AccordionItemHeader, AccordionItemProps, AccordionProps, ActionList, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionProps, ActivityIcon, AddressBookIcon, AffordabilityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AttachmentIcon, AutoComplete, AutoCompleteProps, AutomateAccountingIcon, AutomatePayrollIcon, Avatar, AvatarGroup, AwardIcon, Badge, BadgeProps, BankAccountVerificationIcon, BankIcon, BarChartAltIcon, BarChartIcon, BarCodeIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BfsiIcon, BillIcon, BladeCommonEvents, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetBodyProps, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, Breadcrumb, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbProps, BriefcaseIcon, BugIcon, BuildingIcon, BulkPayoutsIcon, BusinessBankingIcon, BusinessSpendManagementIcon, Button, ButtonGroup, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderAmount, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, Carousel, CarouselItem, CarouselProps, CashIcon, CastIcon, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, Chip, ChipGroup, ChipGroupProps, ChipProps, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, ClosedCaptioningIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodeSnippetIcon, CodepenIcon, CoinIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleBodyProps, CollapsibleButton, CollapsibleButtonProps, CollapsibleLink, CollapsibleLinkProps, CollapsibleProps, CommandIcon, CompanyRegistrationIcon, CompassIcon, ComponentIds, ConfettiIcon, ContactlessPaymentIcon, CookieIcon, CopyIcon, CopyrightIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CreditsAndLoansIcon, CropIcon, CrosshairIcon, CurrentAccountIcon, CustomersIcon, CutIcon, DashboardIcon, DatePicker, DatePickerProps, DeleteIcon, DigitalLendingIcon, DisbursePaymentsIcon, DiscIcon, Display, DisplayProps, Divider, DividerProps, DollarIcon, DollarsIcon, DotIcon, DownloadCloudIcon, DownloadIcon, Drawer, DrawerBody, DrawerHeader, DrawerHeaderProps, DrawerProps, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EcommerceIcon, EditComposeIcon, EditIcon, EditInlineIcon, EducationIcon, EscrowAccountIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FileUpload, FileZipIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, ForexManagementIcon, FreelanceIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphoneIcon, HeadphonesIcon, HeadsetIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconColors, IconComponent, IconProps, IconSize, Identifier, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InstantSettlementIcon, InternationalPaymentsIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkButtonVariantProps, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListItemText, ListItemTextProps, ListProps, LoaderIcon, LoansForBusinessesIcon, LockIcon, LogInIcon, LogOutIcon, MagicCheckoutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MobileAppIcon, Modal, ModalBody, ModalBodyProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalProps, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputCommonProps, OTPInputProps, OctagonIcon, OffersIcon, OptimizerIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonIcon, PaymentButtonsIcon, PaymentGatewayIcon, PaymentLinkIcon, PaymentLinksIcon, PaymentPagesIcon, PayoutLinkIcon, PayrollAddonsIcon, PayrollForCaIcon, PayrollForStartupOrSmeIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneNumberInput, PhoneNumberInputProps, PhoneOffIcon, PhoneOutgoingIcon, PictureInPictureIcon, PieChartIcon, PinIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, Popover, PopoverInteractiveWrapper, PopoverProps, PopoverTriggerProps, PosIcon, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RazorpayxPayrollIcon, RefreshIcon, RepeatIcon, ReportsIcon, ResizerIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RouteIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaasIcon, SaveIcon, ScissorsIcon, SearchIcon, SearchInput, SearchInputProps, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SideNav, SideNavBody, SideNavFooter, SideNavFooterProps, SideNavItem, SideNavItemProps, SideNavLevel, SideNavLink, SideNavLinkProps, SideNavProps, SideNavSection, SideNavSectionProps, SidebarIcon, Skeleton, SkeletonProps, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SolutionsIcon, SourceToPayIcon, SparklesIcon, SpeakerIcon, Spinner, SpinnerProps, SpotlightPopoverStepRenderProps, SpotlightPopoverTourFooter, SpotlightPopoverTourProps, SpotlightPopoverTourStep, SpotlightPopoverTourSteps, SquareIcon, StampIcon, StarIcon, StepGroup, StepGroupProps, StepItem, StepItemIcon, StepItemIndicator, StepItemProps, StopCircleIcon, StorefrontIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, Switch, SwitchProps, TabItem, TabItemProps, TabList, TabPanel, TabPanelProps, Table, TableBackgroundColors, TableBody, TableBodyProps, TableCell, TableCellProps, TableData, TableFooter, TableFooterCell, TableFooterCellProps, TableFooterProps, TableFooterRow, TableFooterRowProps, TableHeader, TableHeaderCell, TableHeaderCellProps, TableHeaderProps, TableHeaderRow, TableHeaderRowProps, TableNode, TablePagination, TablePaginationCommonProps, TablePaginationProps$1 as TablePaginationProps, TablePaginationType, TableProps, TableRow, TableRowProps, TableToolbar, TableToolbarActions, TableToolbarActionsProps, TableToolbarProps, TabletIcon, Tabs, TabsProps, Tag, TagIcon, TagProps, TargetIcon, TaxPaymentsIcon, TestIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, TicketIcon, ToastContainer, ToastProps, ToggleLeftIcon, ToggleRightIcon, TokenHqIcon, Tooltip, TooltipInteractiveWrapper, TooltipProps, Tour, TrademarkIcon, TrademarkRegisteredIcon, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UpiAutopayIcon, UploadCloudIcon, UploadIcon, UseToastReturn, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VendorPaymentsIcon, VideoIcon, VideoOffIcon, ViewLiveDemoIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WalletIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getHeadingProps, getTextProps, screenReaderStyles, useTheme, useToast };

package/build/types/tokens/index.d.ts

@@ -776,6 +776,8 @@ declare const size: {
     readonly 44: 44;
     /** 48 px */
     readonly 48: 48;
+    /** 52 px */
+    readonly 52: 52;
     /** 56 px */
     readonly 56: 56;
     /** 60 px */
@@ -798,6 +800,10 @@ declare const size: {
     readonly 200: 200;
     /** 240 px */
     readonly 240: 240;
+    /** 256 px */
+    readonly 256: 256;
+    /** 264 px */
+    readonly 264: 264;
     /** 300 px */
     readonly 300: 300;
     /** 314 px */

package/build/types/tokens/index.native.d.ts

@@ -776,6 +776,8 @@ declare const size: {
     readonly 44: 44;
     /** 48 px */
     readonly 48: 48;
+    /** 52 px */
+    readonly 52: 52;
     /** 56 px */
     readonly 56: 56;
     /** 60 px */
@@ -798,6 +800,10 @@ declare const size: {
     readonly 200: 200;
     /** 240 px */
     readonly 240: 240;
+    /** 256 px */
+    readonly 256: 256;
+    /** 264 px */
+    readonly 264: 264;
     /** 300 px */
     readonly 300: 300;
     /** 314 px */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "11.19.1",
+  "version": "11.21.0",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"
@@ -144,9 +144,9 @@
     "@table-library/react-table-library": "4.1.7",
     "tinycolor2": "1.6.0",
     "universal-base64": "2.1.0",
-    "@mantine/core": "7.8.1",
-    "@mantine/dates": "7.8.1",
-    "@mantine/hooks": "7.8.1",
+    "@mantine/core": "6.0.21",
+    "@mantine/dates": "6.0.21",
+    "@mantine/hooks": "6.0.21",
     "dayjs": "1.11.10"
   },
   "devDependencies": {