@razorpay/blade
Version:
The Design System that powers Razorpay
470 lines (467 loc) • 33.6 kB
JavaScript
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import React__default from 'react';
import { Divider } from '../Divider/Divider.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
import { Heading } from '../Typography/Heading/Heading.js';
import { Text } from '../Typography/Text/Text.js';
import '../Typography/Code/Code.js';
import '../Typography/Display/Display.js';
import { IconButton } from '../Button/IconButton/IconButton.js';
import '../Icons/AcceptPaymentsFilledIcon/AcceptPaymentsFilledIcon.js';
import '../Icons/AcceptPaymentsIcon/AcceptPaymentsIcon.js';
import '../Icons/ActivityIcon/ActivityIcon.js';
import '../Icons/AddressBookIcon/AddressBookIcon.js';
import '../Icons/AffordabilityFilledIcon/AffordabilityFilledIcon.js';
import '../Icons/AffordabilityIcon/AffordabilityIcon.js';
import '../Icons/AirplayIcon/AirplayIcon.js';
import '../Icons/AlertCircleIcon/AlertCircleIcon.js';
import '../Icons/AlertOctagonIcon/AlertOctagonIcon.js';
import '../Icons/AlertOnlyIcon/AlertOnlyIcon.js';
import '../Icons/AlertTriangleIcon/AlertTriangleIcon.js';
import '../Icons/AlignCenterIcon/AlignCenterIcon.js';
import '../Icons/AlignJustifyIcon/AlignJustifyIcon.js';
import '../Icons/AlignLeftIcon/AlignLeftIcon.js';
import '../Icons/AlignRightIcon/AlignRightIcon.js';
import '../Icons/AnchorIcon/AnchorIcon.js';
import '../Icons/AndroidIcon/AndroidIcon.js';
import '../Icons/AnnouncementIcon/AnnouncementIcon.js';
import '../Icons/ApertureIcon/ApertureIcon.js';
import '../Icons/AppStoreIcon/AppStoreIcon.js';
import '../Icons/AppleIcon/AppleIcon.js';
import '../Icons/ArrowDownIcon/ArrowDownIcon.js';
import '../Icons/ArrowDownLeftIcon/ArrowDownLeftIcon.js';
import '../Icons/ArrowDownRightIcon/ArrowDownRightIcon.js';
import '../Icons/ArrowLeftIcon/ArrowLeftIcon.js';
import '../Icons/ArrowRightIcon/ArrowRightIcon.js';
import '../Icons/ArrowSquareDownIcon/ArrowSquareDownIcon.js';
import '../Icons/ArrowSquareDownLeftIcon/ArrowSquareDownLeftIcon.js';
import '../Icons/ArrowSquareDownRightIcon/ArrowSquareDownRightIcon.js';
import '../Icons/ArrowSquareLeftIcon/ArrowSquareLeftIcon.js';
import '../Icons/ArrowSquareRightIcon/ArrowSquareRightIcon.js';
import '../Icons/ArrowSquareUpIcon/ArrowSquareUpIcon.js';
import '../Icons/ArrowSquareUpLeftIcon/ArrowSquareUpLeftIcon.js';
import '../Icons/ArrowSquareUpRightIcon/ArrowSquareUpRightIcon.js';
import '../Icons/ArrowUpIcon/ArrowUpIcon.js';
import '../Icons/ArrowUpLeftIcon/ArrowUpLeftIcon.js';
import '../Icons/ArrowUpRightIcon/ArrowUpRightIcon.js';
import '../Icons/AtSignIcon/AtSignIcon.js';
import '../Icons/AttachmentIcon/AttachmentIcon.js';
import '../Icons/AutomateAccountingIcon/AutomateAccountingIcon.js';
import '../Icons/AutomatePayrollFilledIcon/AutomatePayrollFilledIcon.js';
import '../Icons/AutomatePayrollIcon/AutomatePayrollIcon.js';
import '../Icons/AwardIcon/AwardIcon.js';
import '../Icons/BankAccountVerificationFilledIcon/BankAccountVerificationFilledIcon.js';
import '../Icons/BankAccountVerificationIcon/BankAccountVerificationIcon.js';
import '../Icons/BankIcon/BankIcon.js';
import '../Icons/BarChartAltIcon/BarChartAltIcon.js';
import '../Icons/BarChartIcon/BarChartIcon.js';
import '../Icons/BarCodeIcon/BarCodeIcon.js';
import '../Icons/Battery100PercentIcon/Battery100PercentIcon.js';
import '../Icons/Battery20PercentIcon/Battery20PercentIcon.js';
import '../Icons/Battery40PercentIcon/Battery40PercentIcon.js';
import '../Icons/Battery60PercentIcon/Battery60PercentIcon.js';
import '../Icons/Battery80PercentIcon/Battery80PercentIcon.js';
import '../Icons/BatteryChargingIcon/BatteryChargingIcon.js';
import '../Icons/BatteryIcon/BatteryIcon.js';
import '../Icons/BellIcon/BellIcon.js';
import '../Icons/BellOffIcon/BellOffIcon.js';
import '../Icons/BfsiFilledIcon/BfsiFilledIcon.js';
import '../Icons/BfsiIcon/BfsiIcon.js';
import '../Icons/BillIcon/BillIcon.js';
import '../Icons/BillMeFilledIcon/BillMeFilledIcon.js';
import '../Icons/BillMeIcon/BillMeIcon.js';
import '../Icons/BluetoothIcon/BluetoothIcon.js';
import '../Icons/BoldIcon/BoldIcon.js';
import '../Icons/BookIcon/BookIcon.js';
import '../Icons/BookmarkIcon/BookmarkIcon.js';
import '../Icons/BoxIcon/BoxIcon.js';
import '../Icons/BriefcaseIcon/BriefcaseIcon.js';
import '../Icons/BugIcon/BugIcon.js';
import '../Icons/BuildingIcon/BuildingIcon.js';
import '../Icons/BulkPayoutsFilledIcon/BulkPayoutsFilledIcon.js';
import '../Icons/BulkPayoutsIcon/BulkPayoutsIcon.js';
import '../Icons/BusinessBankingIcon/BusinessBankingIcon.js';
import '../Icons/BusinessSpendManagementFilledIcon/BusinessSpendManagementFilledIcon.js';
import '../Icons/BusinessSpendManagementIcon/BusinessSpendManagementIcon.js';
import '../Icons/CalendarIcon/CalendarIcon.js';
import '../Icons/CameraIcon/CameraIcon.js';
import '../Icons/CameraOffIcon/CameraOffIcon.js';
import '../Icons/CashIcon/CashIcon.js';
import '../Icons/CastIcon/CastIcon.js';
import '../Icons/CheckCircle2Icon/CheckCircle2Icon.js';
import '../Icons/CheckCircleIcon/CheckCircleIcon.js';
import '../Icons/CheckIcon/CheckIcon.js';
import '../Icons/CheckSquareIcon/CheckSquareIcon.js';
import '../Icons/ChevronDownIcon/ChevronDownIcon.js';
import ChevronLeftIcon from '../Icons/ChevronLeftIcon/ChevronLeftIcon.js';
import '../Icons/ChevronRightIcon/ChevronRightIcon.js';
import '../Icons/ChevronUpDownIcon/ChevronUpDownIcon.js';
import '../Icons/ChevronUpIcon/ChevronUpIcon.js';
import '../Icons/ChevronsDownIcon/ChevronsDownIcon.js';
import '../Icons/ChevronsLeftIcon/ChevronsLeftIcon.js';
import '../Icons/ChevronsRightIcon/ChevronsRightIcon.js';
import '../Icons/ChevronsUpIcon/ChevronsUpIcon.js';
import '../Icons/ChromeIcon/ChromeIcon.js';
import '../Icons/CircleIcon/CircleIcon.js';
import '../Icons/ClipboardIcon/ClipboardIcon.js';
import '../Icons/ClockIcon/ClockIcon.js';
import CloseIcon from '../Icons/CloseIcon/CloseIcon.js';
import '../Icons/ClosedCaptioningIcon/ClosedCaptioningIcon.js';
import '../Icons/CloudDrizzleIcon/CloudDrizzleIcon.js';
import '../Icons/CloudIcon/CloudIcon.js';
import '../Icons/CloudLightningIcon/CloudLightningIcon.js';
import '../Icons/CloudOffIcon/CloudOffIcon.js';
import '../Icons/CloudRainIcon/CloudRainIcon.js';
import '../Icons/CloudSnowIcon/CloudSnowIcon.js';
import '../Icons/CodeSnippetIcon/CodeSnippetIcon.js';
import '../Icons/CodepenIcon/CodepenIcon.js';
import '../Icons/CoinIcon/CoinIcon.js';
import '../Icons/CoinsIcon/CoinsIcon.js';
import '../Icons/CommandIcon/CommandIcon.js';
import '../Icons/CompanyRegistrationFilledIcon/CompanyRegistrationFilledIcon.js';
import '../Icons/CompanyRegistrationIcon/CompanyRegistrationIcon.js';
import '../Icons/CompassIcon/CompassIcon.js';
import '../Icons/ConfettiIcon/ConfettiIcon.js';
import '../Icons/ContactlessPaymentIcon/ContactlessPaymentIcon.js';
import '../Icons/CookieIcon/CookieIcon.js';
import '../Icons/CopyIcon/CopyIcon.js';
import '../Icons/CopyrightIcon/CopyrightIcon.js';
import '../Icons/CornerDownLeftIcon/CornerDownLeftIcon.js';
import '../Icons/CornerDownRightIcon/CornerDownRightIcon.js';
import '../Icons/CornerLeftDownIcon/CornerLeftDownIcon.js';
import '../Icons/CornerLeftUpIcon/CornerLeftUpIcon.js';
import '../Icons/CornerRightDownIcon/CornerRightDownIcon.js';
import '../Icons/CornerRightUpIcon/CornerRightUpIcon.js';
import '../Icons/CornerUpLeftIcon/CornerUpLeftIcon.js';
import '../Icons/CornerUpRightIcon/CornerUpRightIcon.js';
import '../Icons/CpuIcon/CpuIcon.js';
import '../Icons/CreditCardIcon/CreditCardIcon.js';
import '../Icons/CreditsAndLoansFilledIcon/CreditsAndLoansFilledIcon.js';
import '../Icons/CreditsAndLoansIcon/CreditsAndLoansIcon.js';
import '../Icons/CropIcon/CropIcon.js';
import '../Icons/CrosshairIcon/CrosshairIcon.js';
import '../Icons/CurrentAccountFilledIcon/CurrentAccountFilledIcon.js';
import '../Icons/CurrentAccountIcon/CurrentAccountIcon.js';
import '../Icons/CustomersIcon/CustomersIcon.js';
import '../Icons/CutIcon/CutIcon.js';
import '../Icons/DashboardIcon/DashboardIcon.js';
import '../Icons/DeleteIcon/DeleteIcon.js';
import '../Icons/DigitalLendingFilledIcon/DigitalLendingFilledIcon.js';
import '../Icons/DigitalLendingIcon/DigitalLendingIcon.js';
import '../Icons/DisbursePaymentsFilledIcon/DisbursePaymentsFilledIcon.js';
import '../Icons/DisbursePaymentsIcon/DisbursePaymentsIcon.js';
import '../Icons/DiscIcon/DiscIcon.js';
import '../Icons/DollarIcon/DollarIcon.js';
import '../Icons/DollarsIcon/DollarsIcon.js';
import '../Icons/DotIcon/DotIcon.js';
import '../Icons/DownloadCloudIcon/DownloadCloudIcon.js';
import '../Icons/DownloadIcon/DownloadIcon.js';
import '../Icons/DragHandleIcon/DragHandleIcon.js';
import '../Icons/DropletIcon/DropletIcon.js';
import '../Icons/EcommerceFilledIcon/EcommerceFilledIcon.js';
import '../Icons/EcommerceIcon/EcommerceIcon.js';
import '../Icons/EditComposeIcon/EditComposeIcon.js';
import '../Icons/EditIcon/EditIcon.js';
import '../Icons/EditInlineIcon/EditInlineIcon.js';
import '../Icons/EducationFilledIcon/EducationFilledIcon.js';
import '../Icons/EducationIcon/EducationIcon.js';
import '../Icons/EngageFilledIcon/EngageFilledIcon.js';
import '../Icons/EngageIcon/EngageIcon.js';
import '../Icons/EqualsIcon/EqualsIcon.js';
import '../Icons/EscrowAccountFilledIcon/EscrowAccountFilledIcon.js';
import '../Icons/EscrowAccountIcon/EscrowAccountIcon.js';
import '../Icons/ExportIcon/ExportIcon.js';
import '../Icons/ExternalLinkIcon/ExternalLinkIcon.js';
import '../Icons/EyeIcon/EyeIcon.js';
import '../Icons/EyeOffIcon/EyeOffIcon.js';
import '../Icons/FacebookIcon/FacebookIcon.js';
import '../Icons/FastForwardIcon/FastForwardIcon.js';
import '../Icons/FeatherIcon/FeatherIcon.js';
import '../Icons/FigmaIcon/FigmaIcon.js';
import '../Icons/FileIcon/FileIcon.js';
import '../Icons/FileMinusIcon/FileMinusIcon.js';
import '../Icons/FilePlusIcon/FilePlusIcon.js';
import '../Icons/FileTextIcon/FileTextIcon.js';
import '../Icons/FileZipIcon/FileZipIcon.js';
import '../Icons/FilmIcon/FilmIcon.js';
import '../Icons/FilterIcon/FilterIcon.js';
import '../Icons/FlagIcon/FlagIcon.js';
import '../Icons/FlaskIcon/FlaskIcon.js';
import '../Icons/FolderIcon/FolderIcon.js';
import '../Icons/ForexManagementFilledIcon/ForexManagementFilledIcon.js';
import '../Icons/ForexManagementIcon/ForexManagementIcon.js';
import '../Icons/FreelanceFilledIcon/FreelanceFilledIcon.js';
import '../Icons/FreelanceIcon/FreelanceIcon.js';
import '../Icons/FullScreenEnterIcon/FullScreenEnterIcon.js';
import '../Icons/FullScreenExitIcon/FullScreenExitIcon.js';
import '../Icons/GithubIcon/GithubIcon.js';
import '../Icons/GitlabIcon/GitlabIcon.js';
import '../Icons/GlobeIcon/GlobeIcon.js';
import '../Icons/GridIcon/GridIcon.js';
import '../Icons/HashIcon/HashIcon.js';
import '../Icons/HeadphoneIcon/HeadphoneIcon.js';
import '../Icons/HeadphonesIcon/HeadphonesIcon.js';
import '../Icons/HeadsetIcon/HeadsetIcon.js';
import '../Icons/HeartIcon/HeartIcon.js';
import '../Icons/HelpCircleIcon/HelpCircleIcon.js';
import '../Icons/HistoryIcon/HistoryIcon.js';
import '../Icons/HomeIcon/HomeIcon.js';
import '../Icons/ImageIcon/ImageIcon.js';
import '../Icons/InboxIcon/InboxIcon.js';
import '../Icons/IndiaFlagIcon/IndiaFlagIcon.js';
import '../Icons/InfoIcon/InfoIcon.js';
import '../Icons/InstagramIcon/InstagramIcon.js';
import '../Icons/InstantSettlementFilledIcon/InstantSettlementFilledIcon.js';
import '../Icons/InstantSettlementIcon/InstantSettlementIcon.js';
import '../Icons/InternationalPaymentsFilledIcon/InternationalPaymentsFilledIcon.js';
import '../Icons/InternationalPaymentsIcon/InternationalPaymentsIcon.js';
import '../Icons/InvoicesFilledIcon/InvoicesFilledIcon.js';
import '../Icons/InvoicesIcon/InvoicesIcon.js';
import '../Icons/ItalicIcon/ItalicIcon.js';
import '../Icons/KeyIcon/KeyIcon.js';
import '../Icons/KeyboardIcon/KeyboardIcon.js';
import '../Icons/LayersIcon/LayersIcon.js';
import '../Icons/LayoutIcon/LayoutIcon.js';
import '../Icons/LeftCircularCornerIcon/LeftCircularCornerIcon.js';
import '../Icons/LifeBuoyIcon/LifeBuoyIcon.js';
import '../Icons/LinkIcon/LinkIcon.js';
import '../Icons/ListIcon/ListIcon.js';
import '../Icons/ListSearchIcon/ListSearchIcon.js';
import '../Icons/LoaderIcon/LoaderIcon.js';
import '../Icons/LoansForBusinessesFilledIcon/LoansForBusinessesFilledIcon.js';
import '../Icons/LoansForBusinessesIcon/LoansForBusinessesIcon.js';
import '../Icons/LockIcon/LockIcon.js';
import '../Icons/LogInIcon/LogInIcon.js';
import '../Icons/LogOutIcon/LogOutIcon.js';
import '../Icons/MagicCheckoutFilledIcon/MagicCheckoutFilledIcon.js';
import '../Icons/MagicCheckoutIcon/MagicCheckoutIcon.js';
import '../Icons/MagicKonnectFilledIcon/MagicKonnectFilledIcon.js';
import '../Icons/MagicKonnectIcon/MagicKonnectIcon.js';
import '../Icons/MailIcon/MailIcon.js';
import '../Icons/MailOpenIcon/MailOpenIcon.js';
import '../Icons/MapIcon/MapIcon.js';
import '../Icons/MapPinIcon/MapPinIcon.js';
import '../Icons/MaximizeIcon/MaximizeIcon.js';
import '../Icons/MenuDotsIcon/MenuDotsIcon.js';
import '../Icons/MenuIcon/MenuIcon.js';
import '../Icons/MessageCircleIcon/MessageCircleIcon.js';
import '../Icons/MessageSquareIcon/MessageSquareIcon.js';
import '../Icons/MicIcon/MicIcon.js';
import '../Icons/MicOffIcon/MicOffIcon.js';
import '../Icons/MinimizeIcon/MinimizeIcon.js';
import '../Icons/MinusCircleIcon/MinusCircleIcon.js';
import '../Icons/MinusIcon/MinusIcon.js';
import '../Icons/MinusSquareIcon/MinusSquareIcon.js';
import '../Icons/MobileAppFilledIcon/MobileAppFilledIcon.js';
import '../Icons/MobileAppIcon/MobileAppIcon.js';
import '../Icons/MonitorIcon/MonitorIcon.js';
import '../Icons/MoonIcon/MoonIcon.js';
import '../Icons/MoreFilledIcon/MoreFilledIcon.js';
import '../Icons/MoreHorizontalIcon/MoreHorizontalIcon.js';
import '../Icons/MoreIcon/MoreIcon.js';
import '../Icons/MoreVerticalIcon/MoreVerticalIcon.js';
import '../Icons/MoveIcon/MoveIcon.js';
import '../Icons/MusicIcon/MusicIcon.js';
import '../Icons/MyAccountIcon/MyAccountIcon.js';
import '../Icons/NavigationIcon/NavigationIcon.js';
import '../Icons/NoSignalIcon/NoSignalIcon.js';
import '../Icons/OctagonIcon/OctagonIcon.js';
import '../Icons/OffersIcon/OffersIcon.js';
import '../Icons/OptimizerFilledIcon/OptimizerFilledIcon.js';
import '../Icons/OptimizerIcon/OptimizerIcon.js';
import '../Icons/PackageIcon/PackageIcon.js';
import '../Icons/PaperclipIcon/PaperclipIcon.js';
import '../Icons/PauseCircleIcon/PauseCircleIcon.js';
import '../Icons/PauseIcon/PauseIcon.js';
import '../Icons/PaymentButtonFilledIcon/PaymentButtonFilledIcon.js';
import '../Icons/PaymentButtonIcon/PaymentButtonIcon.js';
import '../Icons/PaymentButtonsIcon/PaymentButtonsIcon.js';
import '../Icons/PaymentGatewayFilledIcon/PaymentGatewayFilledIcon.js';
import '../Icons/PaymentGatewayIcon/PaymentGatewayIcon.js';
import '../Icons/PaymentLinkFilledIcon/PaymentLinkFilledIcon.js';
import '../Icons/PaymentLinkIcon/PaymentLinkIcon.js';
import '../Icons/PaymentLinksIcon/PaymentLinksIcon.js';
import '../Icons/PaymentPagesFilledIcon/PaymentPagesFilledIcon.js';
import '../Icons/PaymentPagesIcon/PaymentPagesIcon.js';
import '../Icons/PayoutLinkIcon/PayoutLinkIcon.js';
import '../Icons/PayrollAddonsFilledIcon/PayrollAddonsFilledIcon.js';
import '../Icons/PayrollAddonsIcon/PayrollAddonsIcon.js';
import '../Icons/PayrollForCaFilledIcon/PayrollForCaFilledIcon.js';
import '../Icons/PayrollForCaIcon/PayrollForCaIcon.js';
import '../Icons/PayrollForStartupOrSmeFilledIcon/PayrollForStartupOrSmeFilledIcon.js';
import '../Icons/PayrollForStartupOrSmeIcon/PayrollForStartupOrSmeIcon.js';
import '../Icons/PercentIcon/PercentIcon.js';
import '../Icons/PettyCashBudgetFilledIcon/PettyCashBudgetFilledIcon.js';
import '../Icons/PettyCashBudgetIcon/PettyCashBudgetIcon.js';
import '../Icons/PhoneCallIcon/PhoneCallIcon.js';
import '../Icons/PhoneForwardedIcon/PhoneForwardedIcon.js';
import '../Icons/PhoneIcon/PhoneIcon.js';
import '../Icons/PhoneIncomingIcon/PhoneIncomingIcon.js';
import '../Icons/PhoneMissedIcon/PhoneMissedIcon.js';
import '../Icons/PhoneOffIcon/PhoneOffIcon.js';
import '../Icons/PhoneOutgoingIcon/PhoneOutgoingIcon.js';
import '../Icons/PictureInPictureIcon/PictureInPictureIcon.js';
import '../Icons/PieChartIcon/PieChartIcon.js';
import '../Icons/PinIcon/PinIcon.js';
import '../Icons/PlayCircleIcon/PlayCircleIcon.js';
import '../Icons/PlayIcon/PlayIcon.js';
import '../Icons/PlusCircleIcon/PlusCircleIcon.js';
import '../Icons/PlusIcon/PlusIcon.js';
import '../Icons/PlusSquareIcon/PlusSquareIcon.js';
import '../Icons/PocketIcon/PocketIcon.js';
import '../Icons/PosFilledIcon/PosFilledIcon.js';
import '../Icons/PosIcon/PosIcon.js';
import '../Icons/PowerIcon/PowerIcon.js';
import '../Icons/PrinterIcon/PrinterIcon.js';
import '../Icons/PromptIcon/PromptIcon.js';
import '../Icons/QRCodeIcon/QRCodeIcon.js';
import '../Icons/RadioIcon/RadioIcon.js';
import '../Icons/RayIcon/RayIcon.js';
import '../Icons/RazorpayIcon/RazorpayIcon.js';
import '../Icons/RazorpayXIcon/RazorpayXIcon.js';
import '../Icons/RazorpayxPayrollFilledIcon/RazorpayxPayrollFilledIcon.js';
import '../Icons/RazorpayxPayrollIcon/RazorpayxPayrollIcon.js';
import '../Icons/RefreshIcon/RefreshIcon.js';
import '../Icons/RepeatIcon/RepeatIcon.js';
import '../Icons/ReportsIcon/ReportsIcon.js';
import '../Icons/ResizerIcon/ResizerIcon.js';
import '../Icons/ReticleIcon/ReticleIcon.js';
import '../Icons/RewindIcon/RewindIcon.js';
import '../Icons/RotateClockWiseIcon/RotateClockWiseIcon.js';
import '../Icons/RotateCounterClockWiseIcon/RotateCounterClockWiseIcon.js';
import '../Icons/RouteFilledIcon/RouteFilledIcon.js';
import '../Icons/RouteIcon/RouteIcon.js';
import '../Icons/RoutesIcon/RoutesIcon.js';
import '../Icons/RupeeIcon/RupeeIcon.js';
import '../Icons/RupeesIcon/RupeesIcon.js';
import '../Icons/SaasFilledIcon/SaasFilledIcon.js';
import '../Icons/SaasIcon/SaasIcon.js';
import '../Icons/SaveIcon/SaveIcon.js';
import '../Icons/ScissorsIcon/ScissorsIcon.js';
import '../Icons/SearchIcon/SearchIcon.js';
import '../Icons/SendIcon/SendIcon.js';
import '../Icons/ServerIcon/ServerIcon.js';
import '../Icons/SettingsIcon/SettingsIcon.js';
import '../Icons/SettlementsIcon/SettlementsIcon.js';
import '../Icons/ShareIcon/ShareIcon.js';
import '../Icons/ShieldIcon/ShieldIcon.js';
import '../Icons/ShoppingBagIcon/ShoppingBagIcon.js';
import '../Icons/ShoppingCartIcon/ShoppingCartIcon.js';
import '../Icons/ShuffleIcon/ShuffleIcon.js';
import '../Icons/SidebarIcon/SidebarIcon.js';
import '../Icons/Signal1BarIcon/Signal1BarIcon.js';
import '../Icons/Signal2BarIcon/Signal2BarIcon.js';
import '../Icons/Signal3BarIcon/Signal3BarIcon.js';
import '../Icons/Signal4BarIcon/Signal4BarIcon.js';
import '../Icons/SignalIcon/SignalIcon.js';
import '../Icons/SimCardIcon/SimCardIcon.js';
import '../Icons/SkipBackIcon/SkipBackIcon.js';
import '../Icons/SkipForwardIcon/SkipForwardIcon.js';
import '../Icons/SlackIcon/SlackIcon.js';
import '../Icons/SlashIcon/SlashIcon.js';
import '../Icons/SlidersIcon/SlidersIcon.js';
import '../Icons/SmartCollectFilledIcon/SmartCollectFilledIcon.js';
import '../Icons/SmartCollectIcon/SmartCollectIcon.js';
import '../Icons/SmartphoneIcon/SmartphoneIcon.js';
import '../Icons/SolutionsFilledIcon/SolutionsFilledIcon.js';
import '../Icons/SolutionsIcon/SolutionsIcon.js';
import '../Icons/SortIcon/SortIcon.js';
import '../Icons/SourceToPayFilledIcon/SourceToPayFilledIcon.js';
import '../Icons/SourceToPayIcon/SourceToPayIcon.js';
import '../Icons/SparklesIcon/SparklesIcon.js';
import '../Icons/SpeakerIcon/SpeakerIcon.js';
import '../Icons/SquareIcon/SquareIcon.js';
import '../Icons/StampIcon/StampIcon.js';
import '../Icons/StarIcon/StarIcon.js';
import '../Icons/StopCircleIcon/StopCircleIcon.js';
import '../Icons/StorefrontIcon/StorefrontIcon.js';
import '../Icons/SubscriptionsFilledIcon/SubscriptionsFilledIcon.js';
import '../Icons/SubscriptionsIcon/SubscriptionsIcon.js';
import '../Icons/SunIcon/SunIcon.js';
import '../Icons/SunriseIcon/SunriseIcon.js';
import '../Icons/SunsetIcon/SunsetIcon.js';
import '../Icons/TabletIcon/TabletIcon.js';
import '../Icons/TagIcon/TagIcon.js';
import '../Icons/TargetIcon/TargetIcon.js';
import '../Icons/TaxPaymentsFilledIcon/TaxPaymentsFilledIcon.js';
import '../Icons/TaxPaymentsIcon/TaxPaymentsIcon.js';
import '../Icons/TestIcon/TestIcon.js';
import '../Icons/ThermometerIcon/ThermometerIcon.js';
import '../Icons/ThumbsDownIcon/ThumbsDownIcon.js';
import '../Icons/ThumbsUpIcon/ThumbsUpIcon.js';
import '../Icons/TicketIcon/TicketIcon.js';
import '../Icons/ToggleLeftIcon/ToggleLeftIcon.js';
import '../Icons/ToggleRightIcon/ToggleRightIcon.js';
import '../Icons/TokenHqFilledIcon/TokenHqFilledIcon.js';
import '../Icons/TokenHqIcon/TokenHqIcon.js';
import '../Icons/TopLeftRoundedCornerIcon/TopLeftRoundedCornerIcon.js';
import '../Icons/TopLeftSharpCornerIcon/TopLeftSharpCornerIcon.js';
import '../Icons/TrademarkIcon/TrademarkIcon.js';
import '../Icons/TrademarkRegisteredIcon/TrademarkRegisteredIcon.js';
import '../Icons/TransactionsIcon/TransactionsIcon.js';
import '../Icons/TranslateIcon/TranslateIcon.js';
import '../Icons/TrashIcon/TrashIcon.js';
import '../Icons/TrendingDownIcon/TrendingDownIcon.js';
import '../Icons/TrendingUpIcon/TrendingUpIcon.js';
import '../Icons/TriangleIcon/TriangleIcon.js';
import '../Icons/TvIcon/TvIcon.js';
import '../Icons/TwitterIcon/TwitterIcon.js';
import '../Icons/TypeIcon/TypeIcon.js';
import '../Icons/UmbrellaIcon/UmbrellaIcon.js';
import '../Icons/UnderlineIcon/UnderlineIcon.js';
import '../Icons/UnlockIcon/UnlockIcon.js';
import '../Icons/UpiAutopayFilledIcon/UpiAutopayFilledIcon.js';
import '../Icons/UpiAutopayIcon/UpiAutopayIcon.js';
import '../Icons/UpiIcon/UpiIcon.js';
import '../Icons/UploadCloudIcon/UploadCloudIcon.js';
import '../Icons/UploadIcon/UploadIcon.js';
import '../Icons/UserCheckIcon/UserCheckIcon.js';
import '../Icons/UserIcon/UserIcon.js';
import '../Icons/UserMinusIcon/UserMinusIcon.js';
import '../Icons/UserPlusIcon/UserPlusIcon.js';
import '../Icons/UserXIcon/UserXIcon.js';
import '../Icons/UsersIcon/UsersIcon.js';
import '../Icons/VendorPaymentsFilledIcon/VendorPaymentsFilledIcon.js';
import '../Icons/VendorPaymentsIcon/VendorPaymentsIcon.js';
import '../Icons/VideoIcon/VideoIcon.js';
import '../Icons/VideoOffIcon/VideoOffIcon.js';
import '../Icons/ViewLiveDemoFilledIcon/ViewLiveDemoFilledIcon.js';
import '../Icons/ViewLiveDemoIcon/ViewLiveDemoIcon.js';
import '../Icons/VoicemailIcon/VoicemailIcon.js';
import '../Icons/VolumeHighIcon/VolumeHighIcon.js';
import '../Icons/VolumeIcon/VolumeIcon.js';
import '../Icons/VolumeLowIcon/VolumeLowIcon.js';
import '../Icons/VolumeMuteIcon/VolumeMuteIcon.js';
import '../Icons/VolumeOffIcon/VolumeOffIcon.js';
import '../Icons/VolumeOnIcon/VolumeOnIcon.js';
import '../Icons/WalletIcon/WalletIcon.js';
import '../Icons/WatchIcon/WatchIcon.js';
import '../Icons/WhatsAppIcon/WhatsAppIcon.js';
import '../Icons/WifiIcon/WifiIcon.js';
import '../Icons/WifiOffIcon/WifiOffIcon.js';
import '../Icons/WindIcon/WindIcon.js';
import '../Icons/WorldwideIcon/WorldwideIcon.js';
import '../Icons/XCircleIcon/XCircleIcon.js';
import '../Icons/XSquareIcon/XSquareIcon.js';
import '../Icons/YoutubeIcon/YoutubeIcon.js';
import '../Icons/ZapIcon/ZapIcon.js';
import '../Icons/ZoomInIcon/ZoomInIcon.js';
import '../Icons/ZoomOutIcon/ZoomOutIcon.js';
import { Box } from '../Box/Box.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
import { getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
import 'react-native';
import { throwBladeError, logger } from '../../utils/logger/logger.js';
import { isReactNative } from '../../utils/platform/isReactNative.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import '../../tokens/global/typography.js';
import '../../tokens/global/motion.js';
import { size } from '../../tokens/global/size.js';
import '../BladeProvider/useTheme.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.native.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { jsxs, jsx } from 'react/jsx-runtime';
var _excluded=["title","subtitle","leading","titleSuffix","trailing","showDivider","showBackButton","showCloseButton","onBackButtonClick","onCloseButtonClick","closeButtonRef","backButtonRef","testID","onClickCapture","onKeyDown","onKeyUp","onLostPointerCapture","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","metaComponentName","paddingX","marginY","marginBottom","marginTop","size","isDisabled","children","trailingInteractionElement","backgroundImage","alignItems","dividerProps","shouldAlignLeadingAndTrailingElementsToCenter"];var commonCenterBoxProps={display:'flex',alignItems:'center',justifyContent:'center'};var centerBoxProps={xlarge:Object.assign({},commonCenterBoxProps,{height:'28px'}),large:Object.assign({},commonCenterBoxProps,{height:'28px'}),medium:Object.assign({},commonCenterBoxProps,{height:'20px'})};var absolutePositionedButton={position:'absolute',top:'spacing.0',right:'spacing.0'};var sizeTokensMapping={xlarge:{title:'small',type:'heading'},large:{title:'large',type:'text'},medium:{title:'medium',type:'text'}};var propRestrictionMap={large:{Button:{size:'xsmall',variant:'tertiary'},IconButton:{size:'large'},Badge:{size:'medium'},Link:{size:'medium'},Text:{size:'medium',variant:'body'},Amount:{type:'body',size:'medium'}},xlarge:{Button:{size:'xsmall',variant:'tertiary'},IconButton:{size:'large'},Badge:{size:'medium'},Link:{size:'medium'},Text:{size:'medium',variant:'body'},Amount:{type:'body',size:'medium'}},medium:{Button:{size:'xsmall',variant:'tertiary'},IconButton:{size:'large'},Badge:{size:'small'},Link:{size:'small'},Text:{size:'small',variant:'body'},Amount:{type:'body',size:'small'}}};var useTrailingRestriction=function useTrailingRestriction(_ref){var trailing=_ref.trailing,size=_ref.size;var _React$useState=React__default.useState(null),_React$useState2=_slicedToArray(_React$useState,2),validatedTrailingComponent=_React$useState2[0],setValidatedTrailingComponent=_React$useState2[1];React__default.useEffect(function(){if(React__default.isValidElement(trailing)){var trailingComponentType=getComponentId(trailing);var restrictedProps=propRestrictionMap[size][trailingComponentType];var allowedComponents=Object.keys(propRestrictionMap[size]);if(__DEV__){if(!restrictedProps){throwBladeError({message:`Only one of \`${allowedComponents.join(', ')}\` component is accepted as trailing`,moduleName:'Header'});}}var restrictedPropKeys=Object.keys(propRestrictionMap[size][trailingComponentType]);for(var prop of restrictedPropKeys){var _trailing$props;if(trailing!=null&&(_trailing$props=trailing.props)!=null&&_trailing$props.hasOwnProperty(prop)){logger({message:`Do not pass "${prop}" to "${trailingComponentType}" while inside Header trailing, because we override it.`,moduleName:'Header',type:'warn'});}}setValidatedTrailingComponent(React__default.cloneElement(trailing,restrictedProps));}},[trailing,size]);return validatedTrailingComponent;};var _BaseHeader=function _BaseHeader(_ref2){var title=_ref2.title,subtitle=_ref2.subtitle,leading=_ref2.leading,titleSuffix=_ref2.titleSuffix,trailing=_ref2.trailing,_ref2$showDivider=_ref2.showDivider,showDivider=_ref2$showDivider===void 0?true:_ref2$showDivider,_ref2$showBackButton=_ref2.showBackButton,showBackButton=_ref2$showBackButton===void 0?false:_ref2$showBackButton,_ref2$showCloseButton=_ref2.showCloseButton,showCloseButton=_ref2$showCloseButton===void 0?true:_ref2$showCloseButton,onBackButtonClick=_ref2.onBackButtonClick,onCloseButtonClick=_ref2.onCloseButtonClick,closeButtonRef=_ref2.closeButtonRef,backButtonRef=_ref2.backButtonRef,testID=_ref2.testID,onClickCapture=_ref2.onClickCapture,onKeyDown=_ref2.onKeyDown,onKeyUp=_ref2.onKeyUp,onLostPointerCapture=_ref2.onLostPointerCapture,onPointerCancel=_ref2.onPointerCancel,onPointerDown=_ref2.onPointerDown,onPointerMove=_ref2.onPointerMove,onPointerUp=_ref2.onPointerUp,metaComponentName=_ref2.metaComponentName,paddingX=_ref2.paddingX,marginY=_ref2.marginY,marginBottom=_ref2.marginBottom,marginTop=_ref2.marginTop,_ref2$size=_ref2.size,size$1=_ref2$size===void 0?'large':_ref2$size,isDisabled=_ref2.isDisabled,children=_ref2.children,trailingInteractionElement=_ref2.trailingInteractionElement,backgroundImage=_ref2.backgroundImage,_ref2$alignItems=_ref2.alignItems,alignItems=_ref2$alignItems===void 0?'flex-start':_ref2$alignItems,dividerProps=_ref2.dividerProps,_ref2$shouldAlignLead=_ref2.shouldAlignLeadingAndTrailingElementsToCenter,shouldAlignLeadingAndTrailingElementsToCenter=_ref2$shouldAlignLead===void 0?false:_ref2$shouldAlignLead,rest=_objectWithoutProperties(_ref2,_excluded);var validatedTrailingComponent=useTrailingRestriction({trailing:trailing,size:size$1});var shouldWrapTitle=titleSuffix&&trailing&&showBackButton&&showCloseButton;var hasOnlyChildren=children&&!(title||subtitle||titleSuffix||leading);var webOnlyEventHandlers=isReactNative()?{}:{onClickCapture:onClickCapture,onKeyDown:onKeyDown,onKeyUp:onKeyUp,onLostPointerCapture:onLostPointerCapture,onPointerCancel:onPointerCancel,onPointerDown:onPointerDown,onPointerMove:onPointerMove,onPointerUp:onPointerUp};var renderTrailingInteractionElementWithChildren=function renderTrailingInteractionElementWithChildren(){if(trailingInteractionElement&&children){return jsx(Box,Object.assign({alignSelf:shouldAlignLeadingAndTrailingElementsToCenter?'center':'flex-start'},centerBoxProps[size$1],{children:trailingInteractionElement}));}return null;};var renderTrailingInteractionElementWithoutChildren=function renderTrailingInteractionElementWithoutChildren(){if(trailingInteractionElement&&!children){return jsx(Box,Object.assign({},centerBoxProps[size$1],{alignSelf:shouldAlignLeadingAndTrailingElementsToCenter?'center':undefined,children:trailingInteractionElement}));}return null;};var renderLeadingElement=function renderLeadingElement(){if(Boolean(leading)){return jsx(BaseBox,Object.assign({marginRight:"spacing.3"},centerBoxProps[size$1],{alignSelf:shouldAlignLeadingAndTrailingElementsToCenter?'center':undefined,children:leading}));}return null;};var renderTrailingElement=function renderTrailingElement(){if(shouldAlignLeadingAndTrailingElementsToCenter&&validatedTrailingComponent){return jsx(BaseBox,{marginRight:"spacing.5",display:"flex",alignItems:"center",justifyContent:"center",children:jsx(Box,Object.assign({},centerBoxProps[size$1],{children:validatedTrailingComponent}))});}if(validatedTrailingComponent){return jsx(BaseBox,{marginRight:"spacing.5",children:jsx(Box,Object.assign({},centerBoxProps[size$1],{children:validatedTrailingComponent}))});}return null;};return jsxs(BaseBox,Object.assign({},metaAttribute({name:metaComponentName,testID:testID}),makeAnalyticsAttribute(rest),{backgroundImage:backgroundImage,children:[jsxs(BaseBox,Object.assign({marginY:marginY!=null?marginY:{base:'spacing.5',m:'spacing.6'},paddingX:paddingX!=null?paddingX:{base:'spacing.5',m:'spacing.6'},marginTop:marginTop,marginBottom:marginBottom,touchAction:"none"},webOnlyEventHandlers,{children:[jsxs(BaseBox,{position:"relative",display:"flex",flexDirection:"row",userSelect:"none",children:[showBackButton?jsx(BaseBox,{overflow:"visible",marginRight:"spacing.5",children:jsx(Box,Object.assign({},centerBoxProps[size$1],{children:jsx(IconButton,{ref:backButtonRef,size:"large",icon:ChevronLeftIcon,onClick:function onClick(){return onBackButtonClick==null?void 0:onBackButtonClick();},accessibilityLabel:"Back"})}))}):null,hasOnlyChildren?null:jsxs(BaseBox,{paddingRight:"spacing.5",marginRight:"auto",flex:"auto",display:"flex",flexDirection:"row",alignItems:alignItems,children:[renderLeadingElement(),jsxs(BaseBox,{flex:"auto",children:[jsxs(BaseBox,{maxWidth:isReactNative()&&shouldWrapTitle?'100px':undefined,flexShrink:0,display:"flex",flexDirection:"row",children:[title?sizeTokensMapping[size$1].type==='heading'?jsx(Heading,{as:"h2",marginTop:makeSize(size['1']),size:sizeTokensMapping[size$1].title,weight:"semibold",color:isDisabled?'surface.text.gray.disabled':'surface.text.gray.normal',wordBreak:"break-word",children:title}):jsx(Text,{size:sizeTokensMapping[size$1].title,marginTop:makeSize(size['1']),weight:"semibold",color:isDisabled?'surface.text.gray.disabled':'surface.text.gray.normal',wordBreak:"break-word",children:title}):null,titleSuffix&&jsx(BaseBox,{marginLeft:"spacing.3",children:jsx(Box,Object.assign({},centerBoxProps[size$1],{children:titleSuffix}))})]}),subtitle?jsx(Text,{variant:"body",size:"small",weight:"regular",color:isDisabled?'surface.text.gray.disabled':'surface.text.gray.muted',children:subtitle}):null]})]}),renderTrailingElement(),showCloseButton?jsx(Box,Object.assign({},hasOnlyChildren?absolutePositionedButton:centerBoxProps[size$1],{children:jsx(IconButton,{ref:closeButtonRef,size:"large",icon:CloseIcon,accessibilityLabel:"Close",onClick:function onClick(){return onCloseButtonClick==null?void 0:onCloseButtonClick();}})})):null,renderTrailingInteractionElementWithoutChildren()]}),jsxs(BaseBox,{display:"flex",width:"100%",flexDirection:"row",alignItems:"center",justifyContent:"space-between",children:[jsx(Box,{width:"100%",children:children}),renderTrailingInteractionElementWithChildren()]})]})),showDivider?jsx(Divider,Object.assign({},dividerProps)):null]}));};var BaseHeader=assignWithoutSideEffects(_BaseHeader,{componentId:'BaseHeader'});
export { BaseHeader };
//# sourceMappingURL=BaseHeader.js.map