From ff3e54f5a3a735d66ef294ee2f4f9d433d787d78 Mon Sep 17 00:00:00 2001
From: Nitin Kumar <snitin315@gmail.com>
Date: Mon, 7 Aug 2023 14:45:29 +0530
Subject: [PATCH] chore: upgrde jest to v29 (#1473)

* chore: upgrde jest to v29

* fix: create react-native-reanimated patch

* fix: tests

* chore: fix react-native issues

* test: fix react native tests

* chore: fix react native tests

* test: fix ProgressBar test cases

* test: update snapshots

* test: fix styles in snapshots

* ci: enable jest sharding

* test: update Tooltip snapshot

* test: update Tooltip snapshot

* Update .github/workflows/blade-validate.yml

* chore: update snaps

* chore: patch bundlemon

* ci: apply patches when cache-hit

* ci: apply patches when cache-hit
---
 .../actions/install-dependencies/action.yml   |    8 +-
 .github/workflows/blade-validate.yml          |   28 +-
 packages/blade/docs/tokens/Border.stories.mdx |    4 +-
 packages/blade/jest-setup.native.js           |    6 +
 packages/blade/jest.web.config.js             |    1 +
 .../blade/jestStyledComponentsSerializer.js   |    5 +
 packages/blade/package.json                   |   23 +-
 packages/blade/patches/bundlemon+2.0.1.patch  |   12 +
 .../__tests__/Accordion.native.test.tsx       |    4 +-
 .../Accordion.native.test.tsx.snap            |  317 ++---
 .../__snapshots__/Accordion.ssr.test.tsx.snap |    2 +-
 .../__snapshots__/Alert.native.test.tsx.snap  |  140 +-
 .../__snapshots__/Alert.ssr.test.tsx.snap     |    2 +-
 .../__snapshots__/Amount.native.test.tsx.snap |  414 +++---
 .../__snapshots__/Amount.ssr.test.tsx.snap    |    2 +-
 .../__snapshots__/Badge.native.test.tsx.snap  |  400 +++---
 .../__snapshots__/Badge.ssr.test.tsx.snap     |    2 +-
 .../BottomSheet.native.test.tsx.snap          |  396 +++---
 .../BottomSheet.ssr.test.tsx.snap             |    2 +-
 .../Box/__tests__/Box.native.test.tsx         |    6 +-
 .../BaseBox.native.test.tsx.snap              |   21 +-
 .../__snapshots__/BaseBox.ssr.test.tsx.snap   |    2 +-
 .../__snapshots__/Box.ssr.test.tsx.snap       |    8 +-
 .../__tests__/baseBoxStyles.native.test.ts    |    6 +-
 .../Box/__tests__/baseBoxStyles.test.ts       |    4 +-
 .../Box/__tests__/baseBoxStyles.web.test.ts   |   40 +-
 .../Box/__tests__/styledProps.native.test.tsx |   14 +-
 .../Box/__tests__/styledProps.test.ts         |    4 +-
 .../__tests__/useMemoizedStyles.web.test.tsx  |    6 +-
 .../BaseButton.native.test.tsx.snap           |  864 ++++++------
 .../BaseButton.ssr.test.tsx.snap              |    2 +-
 .../__snapshots__/Button.native.test.tsx.snap |  309 +++--
 .../__snapshots__/Button.ssr.test.tsx.snap    |    4 +-
 .../__tests__/IconButton.native.test.tsx      |    4 +-
 .../IconButton.native.test.tsx.snap           |   20 +-
 .../IconButton.ssr.test.tsx.snap              |    2 +-
 .../__snapshots__/Card.native.test.tsx.snap   |  320 ++---
 .../__snapshots__/Card.ssr.test.tsx.snap      |    2 +-
 .../__tests__/CheckboxGroup.native.test.tsx   |   20 +-
 .../Checkbox.native.test.tsx.snap             |  146 +-
 .../__snapshots__/Checkbox.ssr.test.tsx.snap  |    2 +-
 .../CheckboxGroup.native.test.tsx.snap        |  329 ++---
 .../CheckboxGroup.ssr.test.tsx.snap           |    2 +-
 .../__tests__/Collapsible.native.test.tsx     |    4 +-
 .../Collapsible.native.test.tsx.snap          |  188 +--
 .../Collapsible.ssr.test.tsx.snap             |    2 +-
 .../Counter.native.test.tsx.snap              |  336 ++---
 .../__snapshots__/Counter.ssr.test.tsx.snap   |    2 +-
 .../Divider/__tests__/Divider.web.test.tsx    |    1 +
 .../Divider.native.test.tsx.snap              |   24 +-
 .../__snapshots__/Divider.ssr.test.tsx.snap   |    2 +-
 .../Dropdown.native.test.tsx.snap             |  272 ++--
 .../__snapshots__/Dropdown.ssr.test.tsx.snap  |    2 +-
 .../ActivityIcon.native.test.tsx.snap         |   16 +-
 .../AirplayIcon.native.test.tsx.snap          |   18 +-
 .../AlertCircleIcon.native.test.tsx.snap      |   20 +-
 .../AlertOctagonIcon.native.test.tsx.snap     |   20 +-
 .../AlertOnlyIcon.native.test.tsx.snap        |   16 +-
 .../AlertTriangleIcon.native.test.tsx.snap    |   20 +-
 .../AlignCenterIcon.native.test.tsx.snap      |   22 +-
 .../AlignJustifyIcon.native.test.tsx.snap     |   16 +-
 .../AlignLeftIcon.native.test.tsx.snap        |   22 +-
 .../AlignRightIcon.native.test.tsx.snap       |   22 +-
 .../AnchorIcon.native.test.tsx.snap           |   16 +-
 .../AnnouncementIcon.native.test.tsx.snap     |   16 +-
 .../ApertureIcon.native.test.tsx.snap         |   16 +-
 .../AppStoreIcon.native.test.tsx.snap         |   16 +-
 .../ArrowDownIcon.native.test.tsx.snap        |   16 +-
 .../ArrowDownLeftIcon.native.test.tsx.snap    |   16 +-
 .../ArrowDownRightIcon.native.test.tsx.snap   |   16 +-
 .../ArrowLeftIcon.native.test.tsx.snap        |   16 +-
 .../ArrowRightIcon.native.test.tsx.snap       |   16 +-
 .../ArrowUpIcon.native.test.tsx.snap          |   16 +-
 .../ArrowUpLeftIcon.native.test.tsx.snap      |   16 +-
 .../ArrowUpRightIcon.native.test.tsx.snap     |   16 +-
 .../AtSignIcon.native.test.tsx.snap           |   16 +-
 .../AttachmentIcon.native.test.tsx.snap       |   20 +-
 .../AwardIcon.native.test.tsx.snap            |   16 +-
 .../BankIcon.native.test.tsx.snap             |   16 +-
 .../BarChartAltIcon.native.test.tsx.snap      |   20 +-
 .../BarChartIcon.native.test.tsx.snap         |   20 +-
 .../BatteryChargingIcon.native.test.tsx.snap  |   16 +-
 .../BatteryIcon.native.test.tsx.snap          |   18 +-
 .../BellIcon.native.test.tsx.snap             |   16 +-
 .../BellOffIcon.native.test.tsx.snap          |   22 +-
 .../BillIcon.native.test.tsx.snap             |   22 +-
 .../BluetoothIcon.native.test.tsx.snap        |   18 +-
 .../BoldIcon.native.test.tsx.snap             |   16 +-
 .../BookIcon.native.test.tsx.snap             |   16 +-
 .../BookmarkIcon.native.test.tsx.snap         |   16 +-
 .../BoxIcon.native.test.tsx.snap              |   16 +-
 .../BriefcaseIcon.native.test.tsx.snap        |   16 +-
 .../BulkPayoutsIcon.native.test.tsx.snap      |   16 +-
 .../CalendarIcon.native.test.tsx.snap         |   22 +-
 .../CameraIcon.native.test.tsx.snap           |   18 +-
 .../CameraOffIcon.native.test.tsx.snap        |   18 +-
 .../CastIcon.native.test.tsx.snap             |   16 +-
 .../CheckCircleIcon.native.test.tsx.snap      |   20 +-
 .../CheckIcon.native.test.tsx.snap            |   16 +-
 .../CheckSquareIcon.native.test.tsx.snap      |   18 +-
 .../ChevronDownIcon.native.test.tsx.snap      |   16 +-
 .../ChevronLeftIcon.native.test.tsx.snap      |   16 +-
 .../ChevronRightIcon.native.test.tsx.snap     |   16 +-
 .../ChevronUpIcon.native.test.tsx.snap        |   16 +-
 .../ChevronsDownIcon.native.test.tsx.snap     |   18 +-
 .../ChevronsLeftIcon.native.test.tsx.snap     |   16 +-
 .../ChevronsRightIcon.native.test.tsx.snap    |   18 +-
 .../ChevronsUpIcon.native.test.tsx.snap       |   18 +-
 .../ChromeIcon.native.test.tsx.snap           |   16 +-
 .../CircleIcon.native.test.tsx.snap           |   16 +-
 .../ClipboardIcon.native.test.tsx.snap        |   16 +-
 .../ClockIcon.native.test.tsx.snap            |   18 +-
 .../CloseIcon.native.test.tsx.snap            |   16 +-
 .../CloudDrizzleIcon.native.test.tsx.snap     |   30 +-
 .../CloudIcon.native.test.tsx.snap            |   18 +-
 .../CloudLightningIcon.native.test.tsx.snap   |   20 +-
 .../CloudOffIcon.native.test.tsx.snap         |   18 +-
 .../CloudRainIcon.native.test.tsx.snap        |   24 +-
 .../CloudSnowIcon.native.test.tsx.snap        |   30 +-
 .../CodepenIcon.native.test.tsx.snap          |   16 +-
 .../CoinsIcon.native.test.tsx.snap            |   16 +-
 .../CommandIcon.native.test.tsx.snap          |   16 +-
 .../CompassIcon.native.test.tsx.snap          |   18 +-
 .../CopyIcon.native.test.tsx.snap             |   18 +-
 .../CornerDownLeftIcon.native.test.tsx.snap   |   16 +-
 .../CornerDownRightIcon.native.test.tsx.snap  |   16 +-
 .../CornerLeftDownIcon.native.test.tsx.snap   |   16 +-
 .../CornerLeftUpIcon.native.test.tsx.snap     |   16 +-
 .../CornerRightDownIcon.native.test.tsx.snap  |   16 +-
 .../CornerRightUpIcon.native.test.tsx.snap    |   16 +-
 .../CornerUpLeftIcon.native.test.tsx.snap     |   16 +-
 .../CornerUpRightIcon.native.test.tsx.snap    |   16 +-
 .../CpuIcon.native.test.tsx.snap              |   20 +-
 .../CreditCardIcon.native.test.tsx.snap       |   16 +-
 .../CropIcon.native.test.tsx.snap             |   18 +-
 .../CrosshairIcon.native.test.tsx.snap        |   16 +-
 .../CustomersIcon.native.test.tsx.snap        |   16 +-
 .../CutIcon.native.test.tsx.snap              |   26 +-
 .../DashboardIcon.native.test.tsx.snap        |   16 +-
 .../DeleteIcon.native.test.tsx.snap           |   18 +-
 .../DiscIcon.native.test.tsx.snap             |   18 +-
 .../DollarIcon.native.test.tsx.snap           |   16 +-
 .../DollarsIcon.native.test.tsx.snap          |   16 +-
 .../DownloadCloudIcon.native.test.tsx.snap    |   20 +-
 .../DownloadIcon.native.test.tsx.snap         |   18 +-
 .../DropletIcon.native.test.tsx.snap          |   16 +-
 .../EditComposeIcon.native.test.tsx.snap      |   18 +-
 .../EditIcon.native.test.tsx.snap             |   16 +-
 .../EditInlineIcon.native.test.tsx.snap       |   18 +-
 .../ExportIcon.native.test.tsx.snap           |   20 +-
 .../ExternalLinkIcon.native.test.tsx.snap     |   18 +-
 .../EyeIcon.native.test.tsx.snap              |   18 +-
 .../EyeOffIcon.native.test.tsx.snap           |   18 +-
 .../FacebookIcon.native.test.tsx.snap         |   16 +-
 .../FastForwardIcon.native.test.tsx.snap      |   16 +-
 .../FeatherIcon.native.test.tsx.snap          |   16 +-
 .../FileIcon.native.test.tsx.snap             |   16 +-
 .../FileMinusIcon.native.test.tsx.snap        |   18 +-
 .../FilePlusIcon.native.test.tsx.snap         |   18 +-
 .../FileTextIcon.native.test.tsx.snap         |   22 +-
 .../FilmIcon.native.test.tsx.snap             |   16 +-
 .../FilterIcon.native.test.tsx.snap           |   16 +-
 .../FlagIcon.native.test.tsx.snap             |   16 +-
 .../FolderIcon.native.test.tsx.snap           |   16 +-
 .../FullScreenEnterIcon.native.test.tsx.snap  |   16 +-
 .../FullScreenExitIcon.native.test.tsx.snap   |   16 +-
 .../GithubIcon.native.test.tsx.snap           |   18 +-
 .../GitlabIcon.native.test.tsx.snap           |   18 +-
 .../GlobeIcon.native.test.tsx.snap            |   16 +-
 .../GridIcon.native.test.tsx.snap             |   22 +-
 .../HashIcon.native.test.tsx.snap             |   16 +-
 .../HeadphonesIcon.native.test.tsx.snap       |   16 +-
 .../HeartIcon.native.test.tsx.snap            |   16 +-
 .../HelpCircleIcon.native.test.tsx.snap       |   20 +-
 .../HistoryIcon.native.test.tsx.snap          |   16 +-
 .../HomeIcon.native.test.tsx.snap             |   16 +-
 .../ImageIcon.native.test.tsx.snap            |   18 +-
 .../InboxIcon.native.test.tsx.snap            |   16 +-
 .../InfoIcon.native.test.tsx.snap             |   20 +-
 .../InstagramIcon.native.test.tsx.snap        |   18 +-
 .../InvoicesIcon.native.test.tsx.snap         |   16 +-
 .../ItalicIcon.native.test.tsx.snap           |   16 +-
 .../LayersIcon.native.test.tsx.snap           |   20 +-
 .../LayoutIcon.native.test.tsx.snap           |   16 +-
 .../LifeBuoyIcon.native.test.tsx.snap         |   16 +-
 .../LinkIcon.native.test.tsx.snap             |   18 +-
 .../ListIcon.native.test.tsx.snap             |   26 +-
 .../LoaderIcon.native.test.tsx.snap           |   30 +-
 .../LockIcon.native.test.tsx.snap             |   16 +-
 .../LogInIcon.native.test.tsx.snap            |   18 +-
 .../LogOutIcon.native.test.tsx.snap           |   18 +-
 .../MailIcon.native.test.tsx.snap             |   16 +-
 .../MailOpenIcon.native.test.tsx.snap         |   16 +-
 .../MapIcon.native.test.tsx.snap              |   16 +-
 .../MapPinIcon.native.test.tsx.snap           |   20 +-
 .../MaximizeIcon.native.test.tsx.snap         |   18 +-
 .../MenuDotsIcon.native.test.tsx.snap         |   16 +-
 .../MenuIcon.native.test.tsx.snap             |   20 +-
 .../MessageCircleIcon.native.test.tsx.snap    |   18 +-
 .../MessageSquareIcon.native.test.tsx.snap    |   16 +-
 .../MicIcon.native.test.tsx.snap              |   18 +-
 .../MicOffIcon.native.test.tsx.snap           |   22 +-
 .../MinimizeIcon.native.test.tsx.snap         |   18 +-
 .../MinusCircleIcon.native.test.tsx.snap      |   18 +-
 .../MinusIcon.native.test.tsx.snap            |   16 +-
 .../MinusSquareIcon.native.test.tsx.snap      |   18 +-
 .../MonitorIcon.native.test.tsx.snap          |   16 +-
 .../MoonIcon.native.test.tsx.snap             |   16 +-
 .../MoreHorizontalIcon.native.test.tsx.snap   |   20 +-
 .../MoreVerticalIcon.native.test.tsx.snap     |   20 +-
 .../MoveIcon.native.test.tsx.snap             |   16 +-
 .../MusicIcon.native.test.tsx.snap            |   16 +-
 .../MyAccountIcon.native.test.tsx.snap        |   16 +-
 .../NavigationIcon.native.test.tsx.snap       |   16 +-
 .../OctagonIcon.native.test.tsx.snap          |   16 +-
 .../OffersIcon.native.test.tsx.snap           |   16 +-
 .../PackageIcon.native.test.tsx.snap          |   16 +-
 .../PaperclipIcon.native.test.tsx.snap        |   16 +-
 .../PauseCircleIcon.native.test.tsx.snap      |   20 +-
 .../PauseIcon.native.test.tsx.snap            |   16 +-
 .../PaymentButtonsIcon.native.test.tsx.snap   |   16 +-
 .../PaymentLinksIcon.native.test.tsx.snap     |   16 +-
 .../PaymentPagesIcon.native.test.tsx.snap     |   16 +-
 .../PercentIcon.native.test.tsx.snap          |   20 +-
 .../PhoneCallIcon.native.test.tsx.snap        |   20 +-
 .../PhoneForwardedIcon.native.test.tsx.snap   |   18 +-
 .../PhoneIcon.native.test.tsx.snap            |   16 +-
 .../PhoneIncomingIcon.native.test.tsx.snap    |   18 +-
 .../PhoneMissedIcon.native.test.tsx.snap      |   18 +-
 .../PhoneOffIcon.native.test.tsx.snap         |   20 +-
 .../PhoneOutgoingIcon.native.test.tsx.snap    |   18 +-
 .../PieChartIcon.native.test.tsx.snap         |   18 +-
 .../PlayCircleIcon.native.test.tsx.snap       |   18 +-
 .../PlayIcon.native.test.tsx.snap             |   16 +-
 .../PlusCircleIcon.native.test.tsx.snap       |   16 +-
 .../PlusIcon.native.test.tsx.snap             |   16 +-
 .../PlusSquareIcon.native.test.tsx.snap       |   18 +-
 .../PocketIcon.native.test.tsx.snap           |   18 +-
 .../PowerIcon.native.test.tsx.snap            |   18 +-
 .../PrinterIcon.native.test.tsx.snap          |   16 +-
 .../QRCodeIcon.native.test.tsx.snap           |   18 +-
 .../RadioIcon.native.test.tsx.snap            |   16 +-
 .../RazorpayIcon.native.test.tsx.snap         |   16 +-
 .../RazorpayXIcon.native.test.tsx.snap        |   16 +-
 .../RefreshIcon.native.test.tsx.snap          |   16 +-
 .../RepeatIcon.native.test.tsx.snap           |   20 +-
 .../ReportsIcon.native.test.tsx.snap          |   16 +-
 .../RewindIcon.native.test.tsx.snap           |   16 +-
 .../RotateClockWiseIcon.native.test.tsx.snap  |   16 +-
 ...eCounterClockWiseIcon.native.test.tsx.snap |   16 +-
 .../RoutesIcon.native.test.tsx.snap           |   16 +-
 .../RupeeIcon.native.test.tsx.snap            |   16 +-
 .../RupeesIcon.native.test.tsx.snap           |   16 +-
 .../SaveIcon.native.test.tsx.snap             |   16 +-
 .../ScissorsIcon.native.test.tsx.snap         |   26 +-
 .../SearchIcon.native.test.tsx.snap           |   16 +-
 .../SendIcon.native.test.tsx.snap             |   16 +-
 .../ServerIcon.native.test.tsx.snap           |   22 +-
 .../SettingsIcon.native.test.tsx.snap         |   18 +-
 .../SettlementsIcon.native.test.tsx.snap      |   16 +-
 .../ShareIcon.native.test.tsx.snap            |   24 +-
 .../ShieldIcon.native.test.tsx.snap           |   16 +-
 .../ShoppingCartIcon.native.test.tsx.snap     |   22 +-
 .../ShuffleIcon.native.test.tsx.snap          |   16 +-
 .../SidebarIcon.native.test.tsx.snap          |   16 +-
 .../SkipBackIcon.native.test.tsx.snap         |   18 +-
 .../SkipForwardIcon.native.test.tsx.snap      |   18 +-
 .../SlackIcon.native.test.tsx.snap            |   20 +-
 .../SlashIcon.native.test.tsx.snap            |   16 +-
 .../SlidersIcon.native.test.tsx.snap          |   26 +-
 .../SmartCollectIcon.native.test.tsx.snap     |   16 +-
 .../SmartphoneIcon.native.test.tsx.snap       |   18 +-
 .../SpeakerIcon.native.test.tsx.snap          |   20 +-
 .../SquareIcon.native.test.tsx.snap           |   16 +-
 .../StampIcon.native.test.tsx.snap            |   16 +-
 .../StarIcon.native.test.tsx.snap             |   16 +-
 .../StopCircleIcon.native.test.tsx.snap       |   18 +-
 .../SubscriptionsIcon.native.test.tsx.snap    |   18 +-
 .../SunIcon.native.test.tsx.snap              |   34 +-
 .../SunriseIcon.native.test.tsx.snap          |   32 +-
 .../SunsetIcon.native.test.tsx.snap           |   30 +-
 .../TabletIcon.native.test.tsx.snap           |   18 +-
 .../TagIcon.native.test.tsx.snap              |   18 +-
 .../TargetIcon.native.test.tsx.snap           |   20 +-
 .../ThermometerIcon.native.test.tsx.snap      |   18 +-
 .../ThumbsDownIcon.native.test.tsx.snap       |   16 +-
 .../ThumbsUpIcon.native.test.tsx.snap         |   16 +-
 .../ToggleLeftIcon.native.test.tsx.snap       |   18 +-
 .../ToggleRightIcon.native.test.tsx.snap      |   18 +-
 .../TransactionsIcon.native.test.tsx.snap     |   16 +-
 .../TrashIcon.native.test.tsx.snap            |   18 +-
 .../TendingDownIcon.native.test.tsx.snap      |   18 +-
 .../TrendingDownIcon.native.test.tsx.snap     |   18 +-
 .../TendingUpIcon.native.test.tsx.snap        |   18 +-
 .../TrendingUpIcon.native.test.tsx.snap       |   18 +-
 .../TriangleIcon.native.test.tsx.snap         |   16 +-
 .../__snapshots__/TvIcon.native.test.tsx.snap |   16 +-
 .../TwitterIcon.native.test.tsx.snap          |   18 +-
 .../TypeIcon.native.test.tsx.snap             |   20 +-
 .../UmbrellaIcon.native.test.tsx.snap         |   18 +-
 .../UnderlineIcon.native.test.tsx.snap        |   18 +-
 .../UnlockIcon.native.test.tsx.snap           |   16 +-
 .../UploadCloudIcon.native.test.tsx.snap      |   20 +-
 .../UploadIcon.native.test.tsx.snap           |   18 +-
 .../UserCheckIcon.native.test.tsx.snap        |   20 +-
 .../UserIcon.native.test.tsx.snap             |   18 +-
 .../UserMinusIcon.native.test.tsx.snap        |   20 +-
 .../UserPlusIcon.native.test.tsx.snap         |   20 +-
 .../UserXIcon.native.test.tsx.snap            |   20 +-
 .../UsersIcon.native.test.tsx.snap            |   22 +-
 .../VideoIcon.native.test.tsx.snap            |   16 +-
 .../VideoOffIcon.native.test.tsx.snap         |   20 +-
 .../VoicemailIcon.native.test.tsx.snap        |   16 +-
 .../VolumeHighIcon.native.test.tsx.snap       |   20 +-
 .../VolumeIcon.native.test.tsx.snap           |   16 +-
 .../VolumeLowIcon.native.test.tsx.snap        |   18 +-
 .../VolumeMuteIcon.native.test.tsx.snap       |   18 +-
 .../WatchIcon.native.test.tsx.snap            |   20 +-
 .../WifiIcon.native.test.tsx.snap             |   24 +-
 .../WifiOffIcon.native.test.tsx.snap          |   24 +-
 .../WindIcon.native.test.tsx.snap             |   16 +-
 .../XCircleIcon.native.test.tsx.snap          |   18 +-
 .../XSquareIcon.native.test.tsx.snap          |   18 +-
 .../ZapIcon.native.test.tsx.snap              |   16 +-
 .../ZoomInIcon.native.test.tsx.snap           |   18 +-
 .../ZoomOutIcon.native.test.tsx.snap          |   18 +-
 .../__snapshots__/Circle.native.test.tsx.snap |   16 +-
 .../ClipPath.native.test.tsx.snap             |   16 +-
 .../__snapshots__/Defs.native.test.tsx.snap   |   16 +-
 .../__snapshots__/G.native.test.tsx.snap      |   16 +-
 .../__snapshots__/Path.native.test.tsx.snap   |   18 +-
 .../__snapshots__/Rect.native.test.tsx.snap   |   12 +-
 .../__snapshots__/Svg.native.test.tsx.snap    |   16 +-
 .../Indicator.native.test.tsx.snap            |  174 +--
 .../__snapshots__/Indicator.ssr.test.tsx.snap |    2 +-
 .../BaseInput.native.test.tsx.snap            |  172 +--
 .../__snapshots__/BaseInput.ssr.test.tsx.snap |    2 +-
 .../OTPInput.native.test.tsx.snap             |  226 ++--
 .../__snapshots__/OTPInput.ssr.test.tsx.snap  |    2 +-
 .../PasswordInput.native.test.tsx.snap        |   91 +-
 .../PasswordInput.ssr.test.tsx.snap           |    2 +-
 .../TextArea.native.test.tsx.snap             |   63 +-
 .../__snapshots__/TextArea.ssr.test.tsx.snap  |    2 +-
 .../TextInput.native.test.tsx.snap            |  174 +--
 .../__snapshots__/TextInput.ssr.test.tsx.snap |    2 +-
 .../BaseLink.native.test.tsx.snap             |  581 ++++----
 .../__snapshots__/BaseLink.ssr.test.tsx.snap  |    2 +-
 .../__snapshots__/Link.native.test.tsx.snap   |  246 ++--
 .../__snapshots__/Link.ssr.test.tsx.snap      |    2 +-
 .../__snapshots__/List.native.test.tsx.snap   | 1198 +++++++++--------
 .../__snapshots__/List.ssr.test.tsx.snap      |    2 +-
 .../__tests__/ProgressBar.native.test.tsx     |   48 +-
 .../ProgressBar.native.test.tsx.snap          |  958 ++++++-------
 .../ProgressBar.ssr.test.tsx.snap             |    2 +-
 .../__tests__/RadioGroup.native.test.tsx      |   20 +-
 .../__snapshots__/Radio.native.test.tsx.snap  |  160 +--
 .../__snapshots__/Radio.ssr.test.tsx.snap     |    2 +-
 .../RadioGroup.native.test.tsx.snap           |  329 ++---
 .../RadioGroup.ssr.test.tsx.snap              |    2 +-
 .../Skeleton.native.test.tsx.snap             |    8 +-
 .../__snapshots__/Skeleton.ssr.test.tsx.snap  |    2 +-
 .../BaseSpinner.native.test.tsx.snap          |  720 +++++-----
 .../BaseSpinner.ssr.test.tsx.snap             |    2 +-
 .../Spinner.native.test.tsx.snap              |  234 ++--
 .../__snapshots__/Spinner.ssr.test.tsx.snap   |    2 +-
 .../__snapshots__/Switch.native.test.tsx.snap |  100 +-
 .../__snapshots__/Switch.ssr.test.tsx.snap    |    2 +-
 .../__snapshots__/Tag.native.test.tsx.snap    |   43 +-
 .../__snapshots__/Tag.ssr.test.tsx.snap       |    2 +-
 .../Tooltip/__tests__/Tooltip.native.test.tsx |   20 +-
 .../Tooltip/__tests__/Tooltip.web.test.tsx    |    6 +-
 .../Tooltip.native.test.tsx.snap              |  132 +-
 .../__snapshots__/Tooltip.ssr.test.tsx.snap   |    2 +-
 .../BaseText.native.test.tsx.snap             |   21 +-
 .../__snapshots__/Code.native.test.tsx.snap   |   65 +-
 .../Heading.native.test.tsx.snap              |   61 +-
 .../__snapshots__/Text.native.test.tsx.snap   |   49 +-
 .../__snapshots__/Text.ssr.test.tsx.snap      |    2 +-
 .../__snapshots__/Title.native.test.tsx.snap  |   54 +-
 .../VisuallyHidden.native.test.tsx.snap       |    6 +-
 .../__tests__/makeAccessible.native.test.ts   |   10 +-
 .../makeAccessible/makeAccessible.native.ts   |    3 +
 yarn.lock                                     |  924 ++++++++++---
 383 files changed, 8901 insertions(+), 7773 deletions(-)
 create mode 100644 packages/blade/jestStyledComponentsSerializer.js
 create mode 100644 packages/blade/patches/bundlemon+2.0.1.patch

diff --git a/.github/actions/install-dependencies/action.yml b/.github/actions/install-dependencies/action.yml
index 5859e91df1d..e082bcab372 100644
--- a/.github/actions/install-dependencies/action.yml
+++ b/.github/actions/install-dependencies/action.yml
@@ -18,8 +18,14 @@ runs:
         key: ${{ runner.os }}-blade-${{ hashFiles('**/yarn.lock') }}
 
     # cache miss - install packages with `yarn --frozen-lockfile`
-    # cache hit - download packages from the cache
+    # cache hit - download packages from the cache and explicitly run postinstall script
     - name: install packages if cache miss
       run: yarn --frozen-lockfile
       shell: bash
       if: steps.cache.outputs.cache-hit != 'true'
+
+    - name: Run postinstall script
+      run: yarn postinstall
+      working-directory: packages/blade
+      shell: bash
+      if: steps.cache.outputs.cache-hit == 'true'
diff --git a/.github/workflows/blade-validate.yml b/.github/workflows/blade-validate.yml
index fa26a1d210f..e892d2b70d9 100644
--- a/.github/workflows/blade-validate.yml
+++ b/.github/workflows/blade-validate.yml
@@ -26,9 +26,6 @@ jobs:
       - name: Run TypeScript Checks
         run: yarn typecheck
         working-directory: packages/blade
-      - name: Run Web & Native Tests
-        run: yarn test
-        working-directory: packages/blade
       - name: Check Bundle Size
         run: yarn bundlemon
         working-directory: packages/blade
@@ -37,3 +34,28 @@ jobs:
       - name: Check Tree Shaking
         run: yarn size-limit
         working-directory: packages/blade
+
+  test:
+    name: Run Tests (${{ matrix.shard }})
+    runs-on: ubuntu-latest # nosemgrep: non-self-hosted-runner
+    strategy:
+      fail-fast: false
+      matrix:
+        shard: [1/4, 2/4, 3/4, 4/4]
+    steps:
+      - name: Checkout Codebase
+        uses: actions/checkout@v3
+      - name: Use Node v18
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.12.1
+      - name: Setup Cache & Install Dependencies
+        uses: ./.github/actions/install-dependencies
+      - name: Build Blade
+        run: yarn build
+        working-directory: packages/blade
+      - name: Run React Tests
+        run: yarn test
+        working-directory: packages/blade
+        env:
+          SHARD: ${{ matrix.shard }}
diff --git a/packages/blade/docs/tokens/Border.stories.mdx b/packages/blade/docs/tokens/Border.stories.mdx
index cd48bf23dcb..5a540b21b94 100644
--- a/packages/blade/docs/tokens/Border.stories.mdx
+++ b/packages/blade/docs/tokens/Border.stories.mdx
@@ -1,6 +1,6 @@
 import { Meta, DocsContainer } from '@storybook/addon-docs';
-import { useTheme, BladeProvider } from '../../src/components';
-import { makeBorderSize } from '../../src/utils';
+import { BladeProvider } from '../../src/components';
+import { makeBorderSize, useTheme } from '../../src/utils';
 import { paymentTheme, bankingTheme } from '../../src/tokens';
 
 <Meta
diff --git a/packages/blade/jest-setup.native.js b/packages/blade/jest-setup.native.js
index 836d2cfe7b7..35cc54f6c90 100644
--- a/packages/blade/jest-setup.native.js
+++ b/packages/blade/jest-setup.native.js
@@ -1,6 +1,12 @@
 /** Setup the React Native globals to differentiate between a web and react native app.
  * For browser we have `window`, for node we have `process` as globals, for React Native it's `global.navigator.product: ReactNative`
  **/
+import { configure } from '@testing-library/react-native';
+
+// Since v12, all queries exclude elements hidden from accessibility by default
+configure({
+  defaultIncludeHiddenElements: true,
+});
 
 Object.defineProperty(global.navigator, 'product', {
   value: 'ReactNative',
diff --git a/packages/blade/jest.web.config.js b/packages/blade/jest.web.config.js
index 4344d83ce2d..051a6f53ccd 100644
--- a/packages/blade/jest.web.config.js
+++ b/packages/blade/jest.web.config.js
@@ -10,6 +10,7 @@ const baseConfig = {
       statements: 75,
     },
   },
+  snapshotSerializers: ['<rootDir>/jestStyledComponentsSerializer.js'],
   moduleFileExtensions: ['web.ts', 'web.tsx', 'ts', 'tsx', 'js', 'json', 'node'],
   testMatch: ['**/*.test.{ts,tsx}'],
   transform: {
diff --git a/packages/blade/jestStyledComponentsSerializer.js b/packages/blade/jestStyledComponentsSerializer.js
new file mode 100644
index 00000000000..96d8de4daa4
--- /dev/null
+++ b/packages/blade/jestStyledComponentsSerializer.js
@@ -0,0 +1,5 @@
+// For compatibility with jest v28+, we need to export the serializer as a function.
+// See https://github.com/styled-components/jest-styled-components/issues/429
+const serializer = require('jest-styled-components').styleSheetSerializer;
+
+module.exports = serializer;
diff --git a/packages/blade/package.json b/packages/blade/package.json
index d9c957db7d1..9cdc006404f 100644
--- a/packages/blade/package.json
+++ b/packages/blade/package.json
@@ -98,8 +98,8 @@
     "react": "yarn run react:storybook",
     "react:storybook": "NODE_OPTIONS=--openssl-legacy-provider FRAMEWORK=REACT start-storybook -c ./.storybook/react -p 9009",
     "react:storybook:build": "NODE_OPTIONS=--openssl-legacy-provider FRAMEWORK=REACT build-storybook -c ./.storybook/react -o storybook-site",
-    "test:react": "FRAMEWORK=REACT jest -c ./jest.web.config.js",
-    "test:react-native": "FRAMEWORK=REACT_NATIVE jest -c ./jest.native.config.js",
+    "test:react": "FRAMEWORK=REACT jest -c ./jest.web.config.js --shard=$SHARD --forceExit",
+    "test:react-native": "FRAMEWORK=REACT_NATIVE jest -c ./jest.native.config.js --shard=$SHARD --forceExit",
     "start:ios": "NODE_OPTIONS=--openssl-legacy-provider run-p react-native:storybook:start react-native:storybook:ios",
     "start:android": "NODE_OPTIONS=--openssl-legacy-provider run-p react-native:storybook:start react-native:storybook:android",
     "start:native": "NODE_OPTIONS=--openssl-legacy-provider run-p react-native:storybook:start react-native:storybook:android react-native:storybook:ios",
@@ -160,13 +160,13 @@
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/jest-native": "5.4.2",
     "@testing-library/react": "12.1.5",
-    "@testing-library/react-hooks": "5.1.2",
-    "@testing-library/react-native": "9.1.0",
+    "@testing-library/react-hooks": "8.0.1",
+    "@testing-library/react-native": "12.1.3",
     "@testing-library/user-event": "14.4.3",
     "@types/body-scroll-lock": "3.1.0",
     "@types/dedent": "0.7.0",
-    "@types/jest": "26.0.23",
-    "@types/jest-axe": "3.5.3",
+    "@types/jest": "29.5.3",
+    "@types/jest-axe": "3.5.5",
     "@types/jscodeshift": "0.11.6",
     "@types/jsdom": "20.0.1",
     "@types/lodash": "4.14.168",
@@ -177,7 +177,7 @@
     "@types/styled-components-react-native": "5.1.3",
     "any-leaf": "1.2.2",
     "args-parser": "1.3.0",
-    "babel-jest": "26.6.3",
+    "babel-jest": "29.6.1",
     "babel-loader": "8.2.3",
     "babel-plugin-module-resolver": "4.1.0",
     "babel-plugin-styled-components": "1.12.0",
@@ -190,10 +190,11 @@
     "figures": "3.2.0",
     "flat": "5.0.2",
     "ismobilejs": "1.1.1",
-    "jest": "26.6.3",
-    "jest-axe": "6.0.0",
+    "jest": "29.6.1",
+    "jest-axe": "8.0.0",
+    "jest-environment-jsdom": "29.6.1",
     "jest-matchmedia-mock": "1.1.0",
-    "jest-styled-components": "7.0.8",
+    "jest-styled-components": "7.1.1",
     "jest-useragent-mock": "0.1.1",
     "jscodeshift": "0.13.1",
     "jsdom": "20.0.2",
@@ -206,7 +207,7 @@
     "react-dom": "17.0.2",
     "react-native": "0.66.5",
     "react-native-gesture-handler": "2.9.0",
-    "react-native-reanimated": "2.12.0",
+    "react-native-reanimated": "2.14.4",
     "react-native-svg": "12.3.0",
     "react-scripts": "4.0.3",
     "react-test-renderer": "17.0.2",
diff --git a/packages/blade/patches/bundlemon+2.0.1.patch b/packages/blade/patches/bundlemon+2.0.1.patch
new file mode 100644
index 00000000000..ad89615939e
--- /dev/null
+++ b/packages/blade/patches/bundlemon+2.0.1.patch
@@ -0,0 +1,12 @@
+diff --git a/node_modules/bundlemon/lib/main/analyzer/pathUtils.js b/node_modules/bundlemon/lib/main/analyzer/pathUtils.js
+index e9ce416..1c41a0c 100644
+--- a/node_modules/bundlemon/lib/main/analyzer/pathUtils.js
++++ b/node_modules/bundlemon/lib/main/analyzer/pathUtils.js
+@@ -42,6 +42,7 @@ function getAllPaths(dirPath) {
+         const files = entries.filter((file) => !file.isDirectory()).map((file) => path.join(dirPath, file.name));
+         const folders = entries.filter((folder) => folder.isDirectory());
+         for (const folder of folders)
++            if (folder.name !== 'node_modules')
+             files.push(...(yield getAllPaths(path.join(dirPath, folder.name))));
+         return files;
+     });
diff --git a/packages/blade/src/components/Accordion/__tests__/Accordion.native.test.tsx b/packages/blade/src/components/Accordion/__tests__/Accordion.native.test.tsx
index d1b625a6102..b7e4e0e8b1e 100644
--- a/packages/blade/src/components/Accordion/__tests__/Accordion.native.test.tsx
+++ b/packages/blade/src/components/Accordion/__tests__/Accordion.native.test.tsx
@@ -8,7 +8,9 @@ import { Button } from '~components/Button';
 describe('<Accordion />', () => {
   // Accordion uses Collapsible which uses animations and requestAnimationFrame which makes RN tests throw warnings
   beforeEach(() => {
-    jest.useFakeTimers();
+    jest.useFakeTimers({
+      legacyFakeTimers: true,
+    });
   });
   afterEach(() => {
     jest.useRealTimers();
diff --git a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.native.test.tsx.snap b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.native.test.tsx.snap
index ee0d4a1a9b7..e61e720c183 100644
--- a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.native.test.tsx.snap
+++ b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Accordion /> should render 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,30 +11,30 @@ exports[`<Accordion /> should render 1`] = `
   <View
     data-blade-component="accordion"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       data-blade-component="base-box"
       maxWidth={
-        Object {
+        {
           "l": "800px",
           "m": "640px",
           "s": "710px",
         }
       }
       minWidth={
-        Object {
+        {
           "l": "400px",
           "m": "360px",
           "s": "200px",
         }
       }
       style={
-        Array [
-          Object {
+        [
+          {
             "maxWidth": 710,
             "minWidth": 200,
             "width": "100%",
@@ -46,16 +46,16 @@ exports[`<Accordion /> should render 1`] = `
       <View
         data-blade-component="accordion-item"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
         <View
           data-blade-component="collapsible"
           style={
-            Array [
-              Object {},
+            [
+              {},
             ]
           }
         >
@@ -66,8 +66,8 @@ exports[`<Accordion /> should render 1`] = `
             flexDirection="column"
             minWidth="0px"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "flex-start",
                   "display": "flex",
                   "flexDirection": "column",
@@ -81,7 +81,7 @@ exports[`<Accordion /> should render 1`] = `
               accessibilityLabel="How can I setup Route?"
               accessibilityRole="button"
               accessibilityState={
-                Object {
+                {
                   "expanded": false,
                 }
               }
@@ -100,8 +100,8 @@ exports[`<Accordion /> should render 1`] = `
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "alignItems": "center",
                     "display": "flex",
                     "flexDirection": "row",
@@ -111,7 +111,7 @@ exports[`<Accordion /> should render 1`] = `
                     "paddingRight": 16,
                     "paddingTop": 16,
                   },
-                  Object {
+                  {
                     "backgroundColor": "hsla(0, 0%, 100%, 0)",
                   },
                 ]
@@ -124,8 +124,8 @@ exports[`<Accordion /> should render 1`] = `
                 flexDirection="row"
                 justifyContent="space-between"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "alignItems": "center",
                       "display": "flex",
                       "flexBasis": 0,
@@ -144,8 +144,8 @@ exports[`<Accordion /> should render 1`] = `
                   flexDirection="row"
                   flexShrink={1}
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "alignItems": "flex-start",
                         "display": "flex",
                         "flexDirection": "row",
@@ -157,6 +157,7 @@ exports[`<Accordion /> should render 1`] = `
                 >
                   <Text
                     accessibilityRole="header"
+                    accessible={true}
                     color="surface.text.normal.lowContrast"
                     data-blade-component="heading"
                     fontFamily="text"
@@ -165,8 +166,8 @@ exports[`<Accordion /> should render 1`] = `
                     fontWeight="bold"
                     lineHeight={300}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "color": "hsla(217, 56%, 17%, 1)",
                           "fontFamily": "Lato",
                           "fontSize": 16,
@@ -192,8 +193,8 @@ exports[`<Accordion /> should render 1`] = `
                 <View
                   data-blade-component="base-box"
                   style={
-                    Array [
-                      Object {},
+                    [
+                      {},
                     ]
                   }
                 >
@@ -201,9 +202,9 @@ exports[`<Accordion /> should render 1`] = `
                     accessibilityElementsHidden={true}
                     importantForAccessibility="no-hide-descendants"
                     style={
-                      Object {
-                        "transform": Array [
-                          Object {
+                      {
+                        "transform": [
+                          {
                             "rotateZ": "0deg",
                           },
                         ],
@@ -224,15 +225,15 @@ exports[`<Accordion /> should render 1`] = `
                       minX={0}
                       minY={0}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "backgroundColor": "transparent",
                             "borderWidth": 0,
                           },
-                          Array [
-                            Object {},
+                          [
+                            {},
                           ],
-                          Object {
+                          {
                             "flex": 0,
                             "height": 20,
                             "width": 20,
@@ -246,7 +247,7 @@ exports[`<Accordion /> should render 1`] = `
                       <RNSVGGroup
                         fill={null}
                         propList={
-                          Array [
+                          [
                             "fill",
                           ]
                         }
@@ -257,7 +258,7 @@ exports[`<Accordion /> should render 1`] = `
                           fill={4288851646}
                           fillRule={0}
                           propList={
-                            Array [
+                            [
                               "fill",
                               "fillRule",
                             ]
@@ -276,8 +277,8 @@ exports[`<Accordion /> should render 1`] = `
               id="collapsible-body-1"
               importantForAccessibility="no-hide-descendants"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "width": "100%",
                   },
                 ]
@@ -287,11 +288,11 @@ exports[`<Accordion /> should render 1`] = `
               <View
                 isExpanded={false}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "overflow": "hidden",
                     },
-                    Object {
+                    {
                       "height": 0,
                       "opacity": 0.8,
                     },
@@ -301,7 +302,7 @@ exports[`<Accordion /> should render 1`] = `
                 <View
                   onLayout={[Function]}
                   style={
-                    Object {
+                    {
                       "position": "relative",
                     }
                   }
@@ -309,8 +310,8 @@ exports[`<Accordion /> should render 1`] = `
                   <View
                     data-blade-component="box"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginBottom": 0,
                           "marginTop": 16,
                         },
@@ -320,8 +321,8 @@ exports[`<Accordion /> should render 1`] = `
                     <View
                       data-blade-component="base-box"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "marginLeft": 16,
                             "marginRight": 16,
                           },
@@ -329,6 +330,7 @@ exports[`<Accordion /> should render 1`] = `
                       }
                     >
                       <Text
+                        accessible={true}
                         color="surface.text.subtle.lowContrast"
                         data-blade-component="text"
                         fontFamily="text"
@@ -337,8 +339,8 @@ exports[`<Accordion /> should render 1`] = `
                         fontWeight="regular"
                         lineHeight={100}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "hsla(216, 27%, 36%, 1)",
                               "fontFamily": "Lato",
                               "fontSize": 14,
@@ -363,8 +365,8 @@ exports[`<Accordion /> should render 1`] = `
                       <View
                         data-blade-component="base-box"
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "marginTop": 0,
                             },
                           ]
@@ -375,12 +377,13 @@ exports[`<Accordion /> should render 1`] = `
                         data-blade-component="base-box"
                         importantForAccessibility="no-hide-descendants"
                         style={
-                          Array [
-                            Object {},
+                          [
+                            {},
                           ]
                         }
                       >
                         <Text
+                          accessible={true}
                           color="surface.text.normal.lowContrast"
                           data-blade-component="text"
                           fontFamily="text"
@@ -389,8 +392,8 @@ exports[`<Accordion /> should render 1`] = `
                           fontWeight="regular"
                           lineHeight={100}
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "color": "hsla(217, 56%, 17%, 1)",
                                 "fontFamily": "Lato",
                                 "fontSize": 14,
@@ -428,13 +431,13 @@ exports[`<Accordion /> should render 1`] = `
           dividerStyle="solid"
           isDividerHorizontal={true}
           style={
-            Array [
-              Object {
+            [
+              {
                 "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
                 "borderStyle": "solid",
                 "borderWidth": 0,
               },
-              Object {
+              {
                 "borderBottomStyle": "solid",
                 "borderBottomWidth": 1,
                 "flexGrow": 1,
@@ -447,16 +450,16 @@ exports[`<Accordion /> should render 1`] = `
       <View
         data-blade-component="accordion-item"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
         <View
           data-blade-component="collapsible"
           style={
-            Array [
-              Object {},
+            [
+              {},
             ]
           }
         >
@@ -467,8 +470,8 @@ exports[`<Accordion /> should render 1`] = `
             flexDirection="column"
             minWidth="0px"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "flex-start",
                   "display": "flex",
                   "flexDirection": "column",
@@ -482,7 +485,7 @@ exports[`<Accordion /> should render 1`] = `
               accessibilityLabel="How can I setup QR Codes?"
               accessibilityRole="button"
               accessibilityState={
-                Object {
+                {
                   "expanded": false,
                 }
               }
@@ -501,8 +504,8 @@ exports[`<Accordion /> should render 1`] = `
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "alignItems": "center",
                     "display": "flex",
                     "flexDirection": "row",
@@ -512,7 +515,7 @@ exports[`<Accordion /> should render 1`] = `
                     "paddingRight": 16,
                     "paddingTop": 16,
                   },
-                  Object {
+                  {
                     "backgroundColor": "hsla(0, 0%, 100%, 0)",
                   },
                 ]
@@ -525,8 +528,8 @@ exports[`<Accordion /> should render 1`] = `
                 flexDirection="row"
                 justifyContent="space-between"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "alignItems": "center",
                       "display": "flex",
                       "flexBasis": 0,
@@ -545,8 +548,8 @@ exports[`<Accordion /> should render 1`] = `
                   flexDirection="row"
                   flexShrink={1}
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "alignItems": "flex-start",
                         "display": "flex",
                         "flexDirection": "row",
@@ -558,6 +561,7 @@ exports[`<Accordion /> should render 1`] = `
                 >
                   <Text
                     accessibilityRole="header"
+                    accessible={true}
                     color="surface.text.normal.lowContrast"
                     data-blade-component="heading"
                     fontFamily="text"
@@ -566,8 +570,8 @@ exports[`<Accordion /> should render 1`] = `
                     fontWeight="bold"
                     lineHeight={300}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "color": "hsla(217, 56%, 17%, 1)",
                           "fontFamily": "Lato",
                           "fontSize": 16,
@@ -593,8 +597,8 @@ exports[`<Accordion /> should render 1`] = `
                 <View
                   data-blade-component="base-box"
                   style={
-                    Array [
-                      Object {},
+                    [
+                      {},
                     ]
                   }
                 >
@@ -602,9 +606,9 @@ exports[`<Accordion /> should render 1`] = `
                     accessibilityElementsHidden={true}
                     importantForAccessibility="no-hide-descendants"
                     style={
-                      Object {
-                        "transform": Array [
-                          Object {
+                      {
+                        "transform": [
+                          {
                             "rotateZ": "0deg",
                           },
                         ],
@@ -625,15 +629,15 @@ exports[`<Accordion /> should render 1`] = `
                       minX={0}
                       minY={0}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "backgroundColor": "transparent",
                             "borderWidth": 0,
                           },
-                          Array [
-                            Object {},
+                          [
+                            {},
                           ],
-                          Object {
+                          {
                             "flex": 0,
                             "height": 20,
                             "width": 20,
@@ -647,7 +651,7 @@ exports[`<Accordion /> should render 1`] = `
                       <RNSVGGroup
                         fill={null}
                         propList={
-                          Array [
+                          [
                             "fill",
                           ]
                         }
@@ -658,7 +662,7 @@ exports[`<Accordion /> should render 1`] = `
                           fill={4288851646}
                           fillRule={0}
                           propList={
-                            Array [
+                            [
                               "fill",
                               "fillRule",
                             ]
@@ -677,8 +681,8 @@ exports[`<Accordion /> should render 1`] = `
               id="collapsible-body-2"
               importantForAccessibility="no-hide-descendants"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "width": "100%",
                   },
                 ]
@@ -688,11 +692,11 @@ exports[`<Accordion /> should render 1`] = `
               <View
                 isExpanded={false}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "overflow": "hidden",
                     },
-                    Object {
+                    {
                       "height": 0,
                       "opacity": 0.8,
                     },
@@ -702,7 +706,7 @@ exports[`<Accordion /> should render 1`] = `
                 <View
                   onLayout={[Function]}
                   style={
-                    Object {
+                    {
                       "position": "relative",
                     }
                   }
@@ -710,8 +714,8 @@ exports[`<Accordion /> should render 1`] = `
                   <View
                     data-blade-component="box"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginBottom": 0,
                           "marginTop": 16,
                         },
@@ -721,8 +725,8 @@ exports[`<Accordion /> should render 1`] = `
                     <View
                       data-blade-component="base-box"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "marginLeft": 16,
                             "marginRight": 16,
                           },
@@ -730,6 +734,7 @@ exports[`<Accordion /> should render 1`] = `
                       }
                     >
                       <Text
+                        accessible={true}
                         color="surface.text.subtle.lowContrast"
                         data-blade-component="text"
                         fontFamily="text"
@@ -738,8 +743,8 @@ exports[`<Accordion /> should render 1`] = `
                         fontWeight="regular"
                         lineHeight={100}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "hsla(216, 27%, 36%, 1)",
                               "fontFamily": "Lato",
                               "fontSize": 14,
@@ -764,8 +769,8 @@ exports[`<Accordion /> should render 1`] = `
                       <View
                         data-blade-component="base-box"
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "marginTop": 0,
                             },
                           ]
@@ -776,12 +781,13 @@ exports[`<Accordion /> should render 1`] = `
                         data-blade-component="base-box"
                         importantForAccessibility="no-hide-descendants"
                         style={
-                          Array [
-                            Object {},
+                          [
+                            {},
                           ]
                         }
                       >
                         <Text
+                          accessible={true}
                           color="surface.text.normal.lowContrast"
                           data-blade-component="text"
                           fontFamily="text"
@@ -790,8 +796,8 @@ exports[`<Accordion /> should render 1`] = `
                           fontWeight="regular"
                           lineHeight={100}
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "color": "hsla(217, 56%, 17%, 1)",
                                 "fontFamily": "Lato",
                                 "fontSize": 14,
@@ -829,13 +835,13 @@ exports[`<Accordion /> should render 1`] = `
           dividerStyle="solid"
           isDividerHorizontal={true}
           style={
-            Array [
-              Object {
+            [
+              {
                 "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
                 "borderStyle": "solid",
                 "borderWidth": 0,
               },
-              Object {
+              {
                 "borderBottomStyle": "solid",
                 "borderBottomWidth": 1,
                 "flexGrow": 1,
@@ -848,16 +854,16 @@ exports[`<Accordion /> should render 1`] = `
       <View
         data-blade-component="accordion-item"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
         <View
           data-blade-component="collapsible"
           style={
-            Array [
-              Object {},
+            [
+              {},
             ]
           }
         >
@@ -868,8 +874,8 @@ exports[`<Accordion /> should render 1`] = `
             flexDirection="column"
             minWidth="0px"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "flex-start",
                   "display": "flex",
                   "flexDirection": "column",
@@ -883,7 +889,7 @@ exports[`<Accordion /> should render 1`] = `
               accessibilityLabel="How can I setup Subscriptions?"
               accessibilityRole="button"
               accessibilityState={
-                Object {
+                {
                   "expanded": false,
                 }
               }
@@ -902,8 +908,8 @@ exports[`<Accordion /> should render 1`] = `
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "alignItems": "center",
                     "display": "flex",
                     "flexDirection": "row",
@@ -913,7 +919,7 @@ exports[`<Accordion /> should render 1`] = `
                     "paddingRight": 16,
                     "paddingTop": 16,
                   },
-                  Object {
+                  {
                     "backgroundColor": "hsla(0, 0%, 100%, 0)",
                   },
                 ]
@@ -926,8 +932,8 @@ exports[`<Accordion /> should render 1`] = `
                 flexDirection="row"
                 justifyContent="space-between"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "alignItems": "center",
                       "display": "flex",
                       "flexBasis": 0,
@@ -946,8 +952,8 @@ exports[`<Accordion /> should render 1`] = `
                   flexDirection="row"
                   flexShrink={1}
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "alignItems": "flex-start",
                         "display": "flex",
                         "flexDirection": "row",
@@ -959,6 +965,7 @@ exports[`<Accordion /> should render 1`] = `
                 >
                   <Text
                     accessibilityRole="header"
+                    accessible={true}
                     color="surface.text.normal.lowContrast"
                     data-blade-component="heading"
                     fontFamily="text"
@@ -967,8 +974,8 @@ exports[`<Accordion /> should render 1`] = `
                     fontWeight="bold"
                     lineHeight={300}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "color": "hsla(217, 56%, 17%, 1)",
                           "fontFamily": "Lato",
                           "fontSize": 16,
@@ -994,8 +1001,8 @@ exports[`<Accordion /> should render 1`] = `
                 <View
                   data-blade-component="base-box"
                   style={
-                    Array [
-                      Object {},
+                    [
+                      {},
                     ]
                   }
                 >
@@ -1003,9 +1010,9 @@ exports[`<Accordion /> should render 1`] = `
                     accessibilityElementsHidden={true}
                     importantForAccessibility="no-hide-descendants"
                     style={
-                      Object {
-                        "transform": Array [
-                          Object {
+                      {
+                        "transform": [
+                          {
                             "rotateZ": "0deg",
                           },
                         ],
@@ -1026,15 +1033,15 @@ exports[`<Accordion /> should render 1`] = `
                       minX={0}
                       minY={0}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "backgroundColor": "transparent",
                             "borderWidth": 0,
                           },
-                          Array [
-                            Object {},
+                          [
+                            {},
                           ],
-                          Object {
+                          {
                             "flex": 0,
                             "height": 20,
                             "width": 20,
@@ -1048,7 +1055,7 @@ exports[`<Accordion /> should render 1`] = `
                       <RNSVGGroup
                         fill={null}
                         propList={
-                          Array [
+                          [
                             "fill",
                           ]
                         }
@@ -1059,7 +1066,7 @@ exports[`<Accordion /> should render 1`] = `
                           fill={4288851646}
                           fillRule={0}
                           propList={
-                            Array [
+                            [
                               "fill",
                               "fillRule",
                             ]
@@ -1078,8 +1085,8 @@ exports[`<Accordion /> should render 1`] = `
               id="collapsible-body-3"
               importantForAccessibility="no-hide-descendants"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "width": "100%",
                   },
                 ]
@@ -1089,11 +1096,11 @@ exports[`<Accordion /> should render 1`] = `
               <View
                 isExpanded={false}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "overflow": "hidden",
                     },
-                    Object {
+                    {
                       "height": 0,
                       "opacity": 0.8,
                     },
@@ -1103,7 +1110,7 @@ exports[`<Accordion /> should render 1`] = `
                 <View
                   onLayout={[Function]}
                   style={
-                    Object {
+                    {
                       "position": "relative",
                     }
                   }
@@ -1111,8 +1118,8 @@ exports[`<Accordion /> should render 1`] = `
                   <View
                     data-blade-component="box"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginBottom": 0,
                           "marginTop": 16,
                         },
@@ -1122,8 +1129,8 @@ exports[`<Accordion /> should render 1`] = `
                     <View
                       data-blade-component="base-box"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "marginLeft": 16,
                             "marginRight": 16,
                           },
@@ -1131,6 +1138,7 @@ exports[`<Accordion /> should render 1`] = `
                       }
                     >
                       <Text
+                        accessible={true}
                         color="surface.text.subtle.lowContrast"
                         data-blade-component="text"
                         fontFamily="text"
@@ -1139,8 +1147,8 @@ exports[`<Accordion /> should render 1`] = `
                         fontWeight="regular"
                         lineHeight={100}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "hsla(216, 27%, 36%, 1)",
                               "fontFamily": "Lato",
                               "fontSize": 14,
@@ -1165,8 +1173,8 @@ exports[`<Accordion /> should render 1`] = `
                       <View
                         data-blade-component="base-box"
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "marginTop": 0,
                             },
                           ]
@@ -1177,12 +1185,13 @@ exports[`<Accordion /> should render 1`] = `
                         data-blade-component="base-box"
                         importantForAccessibility="no-hide-descendants"
                         style={
-                          Array [
-                            Object {},
+                          [
+                            {},
                           ]
                         }
                       >
                         <Text
+                          accessible={true}
                           color="surface.text.normal.lowContrast"
                           data-blade-component="text"
                           fontFamily="text"
@@ -1191,8 +1200,8 @@ exports[`<Accordion /> should render 1`] = `
                           fontWeight="regular"
                           lineHeight={100}
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "color": "hsla(217, 56%, 17%, 1)",
                                 "fontFamily": "Lato",
                                 "fontSize": 14,
@@ -1230,13 +1239,13 @@ exports[`<Accordion /> should render 1`] = `
           dividerStyle="solid"
           isDividerHorizontal={true}
           style={
-            Array [
-              Object {
+            [
+              {
                 "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
                 "borderStyle": "solid",
                 "borderWidth": 0,
               },
-              Object {
+              {
                 "borderBottomStyle": "solid",
                 "borderBottomWidth": 1,
                 "flexGrow": 1,
diff --git a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.ssr.test.tsx.snap b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.ssr.test.tsx.snap
index 84720b87e09..559b091e28c 100644
--- a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Accordion /> should render Accordion on server 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"accordion\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx hdfsfl\\"><div data-blade-component=\\"accordion-item\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"collapsible\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx ctIUBs\\"><div role=\\"heading\\" aria-level=\\"3\\" data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx iGUFMG\\"><button aria-expanded=\\"false\\" aria-controls=\\"collapsible-body-undefined\\" data-blade-component=\\"accordion-button\\" class=\\"StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 gIhPca\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx iIWYyh\\"><span class=\\"StyledBaseText-dVBfTO dFejDk\\" data-blade-component=\\"heading\\">How can I setup Route?</span></div><div direction=\\"bottom\\" aria-hidden=\\"true\\" data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0  huMgvz\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"20px\\" viewBox=\\"0 0 24 24\\" width=\\"20px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z\\" clip-rule=\\"evenodd\\" fill=\\"currentColor\\" fill-rule=\\"evenodd\\" data-blade-component=\\"svg-path\\"></path></svg></div></button></div><div id=\\"collapsible-body-undefined\\" role=\\"region\\" aria-hidden=\\"true\\" data-blade-component=\\"collapsible-body\\" class=\\"BaseBox-bmPWx\\"><div class=\\"CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 zckFh\\"><div data-blade-component=\\"box\\" class=\\"BaseBox-bmPWx hgWdUa\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bYimaU\\"><p class=\\"StyledBaseText-dVBfTO ktUwvA\\" data-blade-component=\\"text\\">You can use Razorpay Route from the Dashboard or using APIs to transfer money to customers. You may also check our docs for detailed instructions.</p></div></div></div></div></div></div><div data-blade-component=\\"divider\\" class=\\"BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR\\"></div></div><div data-blade-component=\\"accordion-item\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"collapsible\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx ctIUBs\\"><div role=\\"heading\\" aria-level=\\"3\\" data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx iGUFMG\\"><button aria-expanded=\\"false\\" aria-controls=\\"collapsible-body-undefined\\" data-blade-component=\\"accordion-button\\" class=\\"StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 gIhPca\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx iIWYyh\\"><span class=\\"StyledBaseText-dVBfTO dFejDk\\" data-blade-component=\\"heading\\">How can I setup QR Codes?</span></div><div direction=\\"bottom\\" aria-hidden=\\"true\\" data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0  huMgvz\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"20px\\" viewBox=\\"0 0 24 24\\" width=\\"20px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z\\" clip-rule=\\"evenodd\\" fill=\\"currentColor\\" fill-rule=\\"evenodd\\" data-blade-component=\\"svg-path\\"></path></svg></div></button></div><div id=\\"collapsible-body-undefined\\" role=\\"region\\" aria-hidden=\\"true\\" data-blade-component=\\"collapsible-body\\" class=\\"BaseBox-bmPWx\\"><div class=\\"CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 zckFh\\"><div data-blade-component=\\"box\\" class=\\"BaseBox-bmPWx hgWdUa\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bYimaU\\"><p class=\\"StyledBaseText-dVBfTO ktUwvA\\" data-blade-component=\\"text\\">Just use Razorpay. You may also check our docs for detailed instructions. Please use the search functionality to ask your queries.</p></div></div></div></div></div></div><div data-blade-component=\\"divider\\" class=\\"BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR\\"></div></div><div data-blade-component=\\"accordion-item\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"collapsible\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx ctIUBs\\"><div role=\\"heading\\" aria-level=\\"3\\" data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx iGUFMG\\"><button aria-expanded=\\"false\\" aria-controls=\\"collapsible-body-undefined\\" data-blade-component=\\"accordion-button\\" class=\\"StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 gIhPca\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx iIWYyh\\"><span class=\\"StyledBaseText-dVBfTO dFejDk\\" data-blade-component=\\"heading\\">How can I setup Subscriptions?</span></div><div direction=\\"bottom\\" aria-hidden=\\"true\\" data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0  huMgvz\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"20px\\" viewBox=\\"0 0 24 24\\" width=\\"20px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z\\" clip-rule=\\"evenodd\\" fill=\\"currentColor\\" fill-rule=\\"evenodd\\" data-blade-component=\\"svg-path\\"></path></svg></div></button></div><div id=\\"collapsible-body-undefined\\" role=\\"region\\" aria-hidden=\\"true\\" data-blade-component=\\"collapsible-body\\" class=\\"BaseBox-bmPWx\\"><div class=\\"CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 zckFh\\"><div data-blade-component=\\"box\\" class=\\"BaseBox-bmPWx hgWdUa\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bYimaU\\"><p class=\\"StyledBaseText-dVBfTO ktUwvA\\" data-blade-component=\\"text\\">Just use Razorpay.</p></div></div></div></div></div></div><div data-blade-component=\\"divider\\" class=\\"BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR\\"></div></div></div></div></div>"`;
+exports[`<Accordion /> should render Accordion on server 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="accordion" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hdfsfl"><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx ctIUBs"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx iGUFMG"><button aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 gIhPca"><div data-blade-component="base-box" class="BaseBox-bmPWx iIWYyh"><span class="StyledBaseText-dVBfTO dFejDk" data-blade-component="heading">How can I setup Route?</span></div><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0  huMgvz"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 zckFh"><div data-blade-component="box" class="BaseBox-bmPWx hgWdUa"><div data-blade-component="base-box" class="BaseBox-bmPWx bYimaU"><p class="StyledBaseText-dVBfTO ktUwvA" data-blade-component="text">You can use Razorpay Route from the Dashboard or using APIs to transfer money to customers. You may also check our docs for detailed instructions.</p></div></div></div></div></div></div><div data-blade-component="divider" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR"></div></div><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx ctIUBs"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx iGUFMG"><button aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 gIhPca"><div data-blade-component="base-box" class="BaseBox-bmPWx iIWYyh"><span class="StyledBaseText-dVBfTO dFejDk" data-blade-component="heading">How can I setup QR Codes?</span></div><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0  huMgvz"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 zckFh"><div data-blade-component="box" class="BaseBox-bmPWx hgWdUa"><div data-blade-component="base-box" class="BaseBox-bmPWx bYimaU"><p class="StyledBaseText-dVBfTO ktUwvA" data-blade-component="text">Just use Razorpay. You may also check our docs for detailed instructions. Please use the search functionality to ask your queries.</p></div></div></div></div></div></div><div data-blade-component="divider" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR"></div></div><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx ctIUBs"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx iGUFMG"><button aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 gIhPca"><div data-blade-component="base-box" class="BaseBox-bmPWx iIWYyh"><span class="StyledBaseText-dVBfTO dFejDk" data-blade-component="heading">How can I setup Subscriptions?</span></div><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0  huMgvz"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 zckFh"><div data-blade-component="box" class="BaseBox-bmPWx hgWdUa"><div data-blade-component="base-box" class="BaseBox-bmPWx bYimaU"><p class="StyledBaseText-dVBfTO ktUwvA" data-blade-component="text">Just use Razorpay.</p></div></div></div></div></div></div><div data-blade-component="divider" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR"></div></div></div></div></div>"`;
 
 exports[`<Accordion /> should render Accordion on server 2`] = `
 <div
diff --git a/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.native.test.tsx.snap b/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.native.test.tsx.snap
index b19eca828b1..41fe8772469 100644
--- a/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.native.test.tsx.snap
+++ b/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.native.test.tsx.snap
@@ -3,17 +3,18 @@
 exports[`<Alert /> should render 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <View
     accessibilityRole="alert"
+    accessible={true}
     data-blade-component="alert"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -24,11 +25,11 @@ exports[`<Alert /> should render 1`] = `
       isDesktop={false}
       isFullWidth={false}
       style={
-        Array [
-          Object {
+        [
+          {
             "textAlign": "left",
           },
-          Object {
+          {
             "alignItems": "flex-start",
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
             "borderColor": "hsla(216, 15%, 54%, 0.32)",
@@ -52,8 +53,8 @@ exports[`<Alert /> should render 1`] = `
         data-blade-component="base-box"
         display="flex"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "marginTop": 0,
             },
@@ -74,15 +75,15 @@ exports[`<Alert /> should render 1`] = `
           minX={0}
           minY={0}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "borderWidth": 0,
               },
-              Array [
-                Object {},
+              [
+                {},
               ],
-              Object {
+              {
                 "flex": 0,
                 "height": 16,
                 "width": 16,
@@ -96,7 +97,7 @@ exports[`<Alert /> should render 1`] = `
           <RNSVGGroup
             fill={null}
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
@@ -105,7 +106,7 @@ exports[`<Alert /> should render 1`] = `
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
               fill={4282603381}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -114,7 +115,7 @@ exports[`<Alert /> should render 1`] = `
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
               fill={4282603381}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -125,7 +126,7 @@ exports[`<Alert /> should render 1`] = `
               fill={4282603381}
               fillRule={0}
               propList={
-                Array [
+                [
                   "fill",
                   "fillRule",
                 ]
@@ -137,8 +138,8 @@ exports[`<Alert /> should render 1`] = `
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "flexBasis": 0,
               "flexGrow": 1,
               "flexShrink": 1,
@@ -151,14 +152,15 @@ exports[`<Alert /> should render 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginTop": 0,
               },
             ]
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subtle.lowContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -167,8 +169,8 @@ exports[`<Alert /> should render 1`] = `
             fontWeight="regular"
             lineHeight={50}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(216, 27%, 36%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -195,8 +197,8 @@ exports[`<Alert /> should render 1`] = `
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -217,8 +219,8 @@ exports[`<Alert /> should render 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignSelf": "center",
               },
             ]
@@ -238,15 +240,15 @@ exports[`<Alert /> should render 1`] = `
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 16,
                   "width": 16,
@@ -260,7 +262,7 @@ exports[`<Alert /> should render 1`] = `
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -269,7 +271,7 @@ exports[`<Alert /> should render 1`] = `
                 d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
                 fill={4288851646}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -286,17 +288,18 @@ exports[`<Alert /> should render 1`] = `
 exports[`<Alert /> should render positive intent and full width 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <View
     accessibilityRole="alert"
+    accessible={true}
     data-blade-component="alert"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -307,11 +310,11 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
       isDesktop={false}
       isFullWidth={true}
       style={
-        Array [
-          Object {
+        [
+          {
             "textAlign": "left",
           },
-          Object {
+          {
             "alignItems": "flex-start",
             "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
             "borderColor": "hsla(155, 100%, 31%, 0.32)",
@@ -336,8 +339,8 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
         data-blade-component="base-box"
         display="flex"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "marginTop": 2,
             },
@@ -358,15 +361,15 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
           minX={0}
           minY={0}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "borderWidth": 0,
               },
-              Array [
-                Object {},
+              [
+                {},
               ],
-              Object {
+              {
                 "flex": 0,
                 "height": 20,
                 "width": 20,
@@ -380,7 +383,7 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
           <RNSVGGroup
             fill={null}
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
@@ -392,7 +395,7 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
                 d="M4.15845 7.14679C6.74812 4.11688 11.0222 3.1512 14.663 4.77343C15.1675 4.99821 15.7586 4.77147 15.9834 4.267C16.2082 3.76253 15.9815 3.17135 15.477 2.94657C11.0272 0.96385 5.80325 2.14413 2.6381 5.84735C-0.527049 9.55057 -0.879431 14.8946 1.77205 18.9813C4.42353 23.0681 9.44725 24.9241 14.1189 23.5429C18.7905 22.1616 21.9972 17.8716 22 13V12.07C22 11.5177 21.5523 11.07 21 11.07C20.4477 11.07 20 11.5177 20 12.07V12.9994C19.9977 16.9852 17.3741 20.4948 13.5518 21.6249C9.72957 22.7551 5.61926 21.2365 3.44986 17.8928C1.28047 14.5491 1.56878 10.1767 4.15845 7.14679Z"
                 fill={4278224216}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -401,7 +404,7 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
                 d="M22.7071 4.70711C23.0976 4.31658 23.0976 3.68342 22.7071 3.29289C22.3166 2.90237 21.6834 2.90237 21.2929 3.29289L11 13.5858L8.70711 11.2929C8.31658 10.9024 7.68342 10.9024 7.29289 11.2929C6.90237 11.6834 6.90237 12.3166 7.29289 12.7071L10.2929 15.7071C10.6834 16.0976 11.3166 16.0976 11.7071 15.7071L22.7071 4.70711Z"
                 fill={4278224216}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -415,7 +418,7 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
                   fill={4294967295}
                   height="24"
                   propList={
-                    Array [
+                    [
                       "fill",
                     ]
                   }
@@ -431,8 +434,8 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "flexBasis": 0,
               "flexGrow": 1,
               "flexShrink": 1,
@@ -445,14 +448,15 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginTop": 0,
               },
             ]
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subtle.lowContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -461,8 +465,8 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
             fontWeight="regular"
             lineHeight={100}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(216, 27%, 36%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 14,
@@ -489,8 +493,8 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -511,8 +515,8 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignSelf": "center",
               },
             ]
@@ -532,15 +536,15 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 20,
                   "width": 20,
@@ -554,7 +558,7 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -563,7 +567,7 @@ exports[`<Alert /> should render positive intent and full width 1`] = `
                 d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
                 fill={4288851646}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
diff --git a/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.ssr.test.tsx.snap b/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.ssr.test.tsx.snap
index 24073a17b31..7bfc3581966 100644
--- a/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Alert /> should render Alert on server 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div role=\\"status\\" data-blade-component=\\"alert\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx StyledAlert-sc-1dcpe4h-0 dUEwku iCTQmE\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx jrjaVi\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"16px\\" viewBox=\\"0 0 24 24\\" width=\\"16px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><g clip-path=\\"url(#clip0_60_208)\\" data-blade-component=\\"svg-g\\"><path d=\\"M4.15845 7.14679C6.74812 4.11688 11.0222 3.1512 14.663 4.77343C15.1675 4.99821 15.7586 4.77147 15.9834 4.267C16.2082 3.76253 15.9815 3.17135 15.477 2.94657C11.0272 0.96385 5.80325 2.14413 2.6381 5.84735C-0.527049 9.55057 -0.879431 14.8946 1.77205 18.9813C4.42353 23.0681 9.44725 24.9241 14.1189 23.5429C18.7905 22.1616 21.9972 17.8716 22 13V12.07C22 11.5177 21.5523 11.07 21 11.07C20.4477 11.07 20 11.5177 20 12.07V12.9994C19.9977 16.9852 17.3741 20.4948 13.5518 21.6249C9.72957 22.7551 5.61926 21.2365 3.44986 17.8928C1.28047 14.5491 1.56878 10.1767 4.15845 7.14679Z\\" fill=\\"hsla(160, 100%, 26%, 1)\\" data-blade-component=\\"svg-path\\"></path><path d=\\"M22.7071 4.70711C23.0976 4.31658 23.0976 3.68342 22.7071 3.29289C22.3166 2.90237 21.6834 2.90237 21.2929 3.29289L11 13.5858L8.70711 11.2929C8.31658 10.9024 7.68342 10.9024 7.29289 11.2929C6.90237 11.6834 6.90237 12.3166 7.29289 12.7071L10.2929 15.7071C10.6834 16.0976 11.3166 16.0976 11.7071 15.7071L22.7071 4.70711Z\\" fill=\\"hsla(160, 100%, 26%, 1)\\" data-blade-component=\\"svg-path\\"></path></g><defs data-blade-component=\\"svg-defs\\"><clipPath id=\\"clip0_60_208\\" data-blade-component=\\"svg-clippath\\"><rect data-blade-component=\\"svg-rect\\" height=\\"24\\" width=\\"24\\" fill=\\"white\\"></rect></clipPath></defs></svg></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx SQWdp\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bSlxMW\\"><p class=\\"StyledBaseText-dVBfTO gOAMqV\\" data-blade-component=\\"text\\">Currently you can only accept payments in international currencies using PayPal.</p></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx cWiAP\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bFqlVY\\"><button type=\\"button\\" data-blade-component=\\"button\\" role=\\"button\\" class=\\"StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 jeSVWZ\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 kkGTK NIPoA\\"><div class=\\"StyledBaseText-dVBfTO bIWwhG\\" data-blade-component=\\"base-text\\">Primary</div></div></button></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx idQQCA\\"><a data-blade-component=\\"link\\" class=\\"StyledBaseLinkweb__StyledLink-sc-1yj1z8h-0 kzvYbf\\" role=\\"link\\" aria-disabled=\\"false\\"><span class=\\"BaseBox-bmPWx fSbYvl content-container\\" data-blade-component=\\"base-box\\"><span class=\\"StyledBaseText-dVBfTO bIWwhG\\" data-blade-component=\\"base-text\\">Link</span></span></a></div></div></div><button type=\\"button\\" aria-label=\\"Dismiss alert\\" data-blade-component=\\"icon-button\\" class=\\"StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 gvuEeM\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"16px\\" viewBox=\\"0 0 24 24\\" width=\\"16px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z\\" fill=\\"currentColor\\" data-blade-component=\\"svg-path\\"></path></svg></button></div></div></div>"`;
+exports[`<Alert /> should render Alert on server 1`] = `"<div id="root" data-reactroot=""><div role="status" data-blade-component="alert" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledAlert-sc-1dcpe4h-0 dUEwku iCTQmE"><div data-blade-component="base-box" class="BaseBox-bmPWx jrjaVi"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><g clip-path="url(#clip0_60_208)" data-blade-component="svg-g"><path d="M4.15845 7.14679C6.74812 4.11688 11.0222 3.1512 14.663 4.77343C15.1675 4.99821 15.7586 4.77147 15.9834 4.267C16.2082 3.76253 15.9815 3.17135 15.477 2.94657C11.0272 0.96385 5.80325 2.14413 2.6381 5.84735C-0.527049 9.55057 -0.879431 14.8946 1.77205 18.9813C4.42353 23.0681 9.44725 24.9241 14.1189 23.5429C18.7905 22.1616 21.9972 17.8716 22 13V12.07C22 11.5177 21.5523 11.07 21 11.07C20.4477 11.07 20 11.5177 20 12.07V12.9994C19.9977 16.9852 17.3741 20.4948 13.5518 21.6249C9.72957 22.7551 5.61926 21.2365 3.44986 17.8928C1.28047 14.5491 1.56878 10.1767 4.15845 7.14679Z" fill="hsla(160, 100%, 26%, 1)" data-blade-component="svg-path"></path><path d="M22.7071 4.70711C23.0976 4.31658 23.0976 3.68342 22.7071 3.29289C22.3166 2.90237 21.6834 2.90237 21.2929 3.29289L11 13.5858L8.70711 11.2929C8.31658 10.9024 7.68342 10.9024 7.29289 11.2929C6.90237 11.6834 6.90237 12.3166 7.29289 12.7071L10.2929 15.7071C10.6834 16.0976 11.3166 16.0976 11.7071 15.7071L22.7071 4.70711Z" fill="hsla(160, 100%, 26%, 1)" data-blade-component="svg-path"></path></g><defs data-blade-component="svg-defs"><clipPath id="clip0_60_208" data-blade-component="svg-clippath"><rect data-blade-component="svg-rect" height="24" width="24" fill="white"></rect></clipPath></defs></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx SQWdp"><div data-blade-component="base-box" class="BaseBox-bmPWx bSlxMW"><p class="StyledBaseText-dVBfTO gOAMqV" data-blade-component="text">Currently you can only accept payments in international currencies using PayPal.</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx cWiAP"><div data-blade-component="base-box" class="BaseBox-bmPWx bFqlVY"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 jeSVWZ"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 kkGTK NIPoA"><div class="StyledBaseText-dVBfTO bIWwhG" data-blade-component="base-text">Primary</div></div></button></div><div data-blade-component="base-box" class="BaseBox-bmPWx idQQCA"><a data-blade-component="link" class="StyledBaseLinkweb__StyledLink-sc-1yj1z8h-0 kzvYbf" role="link" aria-disabled="false"><span class="BaseBox-bmPWx fSbYvl content-container" data-blade-component="base-box"><span class="StyledBaseText-dVBfTO bIWwhG" data-blade-component="base-text">Link</span></span></a></div></div></div><button type="button" aria-label="Dismiss alert" data-blade-component="icon-button" class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 gvuEeM"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z" fill="currentColor" data-blade-component="svg-path"></path></svg></button></div></div></div>"`;
 
 exports[`<Alert /> should render Alert on server 2`] = `
 <div
diff --git a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap
index cf7157bf811..deaef0086c6 100644
--- a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap
+++ b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Amount /> should render Amount with default props 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -12,8 +12,8 @@ exports[`<Amount /> should render Amount with default props 1`] = `
     data-blade-component="amount"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -25,8 +25,8 @@ exports[`<Amount /> should render Amount with default props 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
@@ -37,14 +37,15 @@ exports[`<Amount /> should render Amount with default props 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="surface.text.muted.lowContrast"
         data-blade-component="base-text"
         fontSize={75}
         fontWeight="bold"
         marginRight="spacing.1"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(216, 16%, 60%, 1)",
               "fontFamily": "Lato",
               "fontSize": 12,
@@ -67,10 +68,11 @@ exports[`<Amount /> should render Amount with default props 1`] = `
         ₹
       </Text>
       <Text
+        accessible={true}
         data-blade-component="base-text"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(217, 56%, 17%, 1)",
               "fontFamily": "Lato",
               "fontSize": 16,
@@ -91,14 +93,15 @@ exports[`<Amount /> should render Amount with default props 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="surface.text.normal.lowContrast"
           data-blade-component="base-text"
           fontSize={100}
           fontWeight="regular"
           lineHeight={100}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(217, 56%, 17%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 14,
@@ -122,14 +125,15 @@ exports[`<Amount /> should render Amount with default props 1`] = `
           .
         </Text>
         <Text
+          accessible={true}
           color="surface.text.muted.lowContrast"
           data-blade-component="base-text"
           fontSize={75}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 16%, 60%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -160,7 +164,7 @@ exports[`<Amount /> should render Amount with default props 1`] = `
 exports[`<Amount /> should render MYR currency Amount  1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -169,8 +173,8 @@ exports[`<Amount /> should render MYR currency Amount  1`] = `
     data-blade-component="amount"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -182,8 +186,8 @@ exports[`<Amount /> should render MYR currency Amount  1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
@@ -194,14 +198,15 @@ exports[`<Amount /> should render MYR currency Amount  1`] = `
       }
     >
       <Text
+        accessible={true}
         color="surface.text.muted.lowContrast"
         data-blade-component="base-text"
         fontSize={75}
         fontWeight="bold"
         marginRight="spacing.1"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(216, 16%, 60%, 1)",
               "fontFamily": "Lato",
               "fontSize": 12,
@@ -224,10 +229,11 @@ exports[`<Amount /> should render MYR currency Amount  1`] = `
         RM
       </Text>
       <Text
+        accessible={true}
         data-blade-component="base-text"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(217, 56%, 17%, 1)",
               "fontFamily": "Lato",
               "fontSize": 16,
@@ -248,14 +254,15 @@ exports[`<Amount /> should render MYR currency Amount  1`] = `
         }
       >
         <Text
+          accessible={true}
           color="surface.text.normal.lowContrast"
           data-blade-component="base-text"
           fontSize={100}
           fontWeight="regular"
           lineHeight={100}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(217, 56%, 17%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 14,
@@ -279,14 +286,15 @@ exports[`<Amount /> should render MYR currency Amount  1`] = `
           .
         </Text>
         <Text
+          accessible={true}
           color="surface.text.muted.lowContrast"
           data-blade-component="base-text"
           fontSize={75}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 16%, 60%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -317,7 +325,7 @@ exports[`<Amount /> should render MYR currency Amount  1`] = `
 exports[`<Amount /> should render all sizes of Amount 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -326,8 +334,8 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
     data-blade-component="amount"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -339,8 +347,8 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
@@ -351,14 +359,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="surface.text.muted.lowContrast"
         data-blade-component="base-text"
         fontSize={75}
         fontWeight="bold"
         marginRight="spacing.1"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(216, 16%, 60%, 1)",
               "fontFamily": "Lato",
               "fontSize": 12,
@@ -381,10 +390,11 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         ₹
       </Text>
       <Text
+        accessible={true}
         data-blade-component="base-text"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(217, 56%, 17%, 1)",
               "fontFamily": "Lato",
               "fontSize": 16,
@@ -405,14 +415,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="surface.text.normal.lowContrast"
           data-blade-component="base-text"
           fontSize={100}
           fontWeight="regular"
           lineHeight={100}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(217, 56%, 17%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 14,
@@ -436,14 +447,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
           .
         </Text>
         <Text
+          accessible={true}
           color="surface.text.muted.lowContrast"
           data-blade-component="base-text"
           fontSize={75}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 16%, 60%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -472,8 +484,8 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
     data-blade-component="amount"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -485,8 +497,8 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
@@ -497,14 +509,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="surface.text.muted.lowContrast"
         data-blade-component="base-text"
         fontSize={75}
         fontWeight="bold"
         marginRight="spacing.1"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(216, 16%, 60%, 1)",
               "fontFamily": "Lato",
               "fontSize": 12,
@@ -527,10 +540,11 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         ₹
       </Text>
       <Text
+        accessible={true}
         data-blade-component="base-text"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(217, 56%, 17%, 1)",
               "fontFamily": "Lato",
               "fontSize": 16,
@@ -551,14 +565,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="surface.text.normal.lowContrast"
           data-blade-component="base-text"
           fontSize={100}
           fontWeight="bold"
           lineHeight={100}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(217, 56%, 17%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 14,
@@ -582,14 +597,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
           .
         </Text>
         <Text
+          accessible={true}
           color="surface.text.muted.lowContrast"
           data-blade-component="base-text"
           fontSize={75}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 16%, 60%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -618,8 +634,8 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
     data-blade-component="amount"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -631,8 +647,8 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
@@ -643,14 +659,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="surface.text.muted.lowContrast"
         data-blade-component="base-text"
         fontSize={75}
         fontWeight="bold"
         marginRight="spacing.1"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(216, 16%, 60%, 1)",
               "fontFamily": "Lato",
               "fontSize": 12,
@@ -673,10 +690,11 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         ₹
       </Text>
       <Text
+        accessible={true}
         data-blade-component="base-text"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(217, 56%, 17%, 1)",
               "fontFamily": "Lato",
               "fontSize": 16,
@@ -697,14 +715,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="surface.text.normal.lowContrast"
           data-blade-component="base-text"
           fontSize={75}
           fontWeight="regular"
           lineHeight={50}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(217, 56%, 17%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -728,14 +747,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
           .
         </Text>
         <Text
+          accessible={true}
           color="surface.text.muted.lowContrast"
           data-blade-component="base-text"
           fontSize={75}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 16%, 60%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -764,8 +784,8 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
     data-blade-component="amount"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -777,8 +797,8 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
@@ -789,14 +809,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="surface.text.muted.lowContrast"
         data-blade-component="base-text"
         fontSize={75}
         fontWeight="bold"
         marginRight="spacing.1"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(216, 16%, 60%, 1)",
               "fontFamily": "Lato",
               "fontSize": 12,
@@ -819,10 +840,11 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         ₹
       </Text>
       <Text
+        accessible={true}
         data-blade-component="base-text"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(217, 56%, 17%, 1)",
               "fontFamily": "Lato",
               "fontSize": 16,
@@ -843,14 +865,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="surface.text.normal.lowContrast"
           data-blade-component="base-text"
           fontSize={75}
           fontWeight="bold"
           lineHeight={50}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(217, 56%, 17%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -874,14 +897,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
           .
         </Text>
         <Text
+          accessible={true}
           color="surface.text.muted.lowContrast"
           data-blade-component="base-text"
           fontSize={75}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 16%, 60%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -910,8 +934,8 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
     data-blade-component="amount"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -923,8 +947,8 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
@@ -935,14 +959,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="surface.text.muted.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         marginRight="spacing.1"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(216, 16%, 60%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -965,10 +990,11 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         ₹
       </Text>
       <Text
+        accessible={true}
         data-blade-component="base-text"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(217, 56%, 17%, 1)",
               "fontFamily": "Lato",
               "fontSize": 16,
@@ -989,14 +1015,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="surface.text.normal.lowContrast"
           data-blade-component="base-text"
           fontSize={400}
           fontWeight="regular"
           lineHeight={400}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(217, 56%, 17%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 18,
@@ -1020,14 +1047,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
           .
         </Text>
         <Text
+          accessible={true}
           color="surface.text.muted.lowContrast"
           data-blade-component="base-text"
           fontSize={100}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 16%, 60%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 14,
@@ -1056,8 +1084,8 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
     data-blade-component="amount"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -1069,8 +1097,8 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
@@ -1081,14 +1109,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="surface.text.muted.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         marginRight="spacing.1"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(216, 16%, 60%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -1111,10 +1140,11 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         ₹
       </Text>
       <Text
+        accessible={true}
         data-blade-component="base-text"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(217, 56%, 17%, 1)",
               "fontFamily": "Lato",
               "fontSize": 16,
@@ -1135,14 +1165,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="surface.text.normal.lowContrast"
           data-blade-component="base-text"
           fontSize={400}
           fontWeight="bold"
           lineHeight={400}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(217, 56%, 17%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 18,
@@ -1166,14 +1197,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
           .
         </Text>
         <Text
+          accessible={true}
           color="surface.text.muted.lowContrast"
           data-blade-component="base-text"
           fontSize={100}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 16%, 60%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 14,
@@ -1202,8 +1234,8 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
     data-blade-component="amount"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -1215,8 +1247,8 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
@@ -1227,14 +1259,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="surface.text.muted.lowContrast"
         data-blade-component="base-text"
         fontSize={75}
         fontWeight="bold"
         marginRight="spacing.1"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(216, 16%, 60%, 1)",
               "fontFamily": "Lato",
               "fontSize": 12,
@@ -1257,10 +1290,11 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         ₹
       </Text>
       <Text
+        accessible={true}
         data-blade-component="base-text"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(217, 56%, 17%, 1)",
               "fontFamily": "Lato",
               "fontSize": 16,
@@ -1281,14 +1315,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="surface.text.normal.lowContrast"
           data-blade-component="base-text"
           fontSize={200}
           fontWeight="regular"
           lineHeight={300}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(217, 56%, 17%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 16,
@@ -1312,14 +1347,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
           .
         </Text>
         <Text
+          accessible={true}
           color="surface.text.muted.lowContrast"
           data-blade-component="base-text"
           fontSize={75}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 16%, 60%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -1348,8 +1384,8 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
     data-blade-component="amount"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -1361,8 +1397,8 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
@@ -1373,14 +1409,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="surface.text.muted.lowContrast"
         data-blade-component="base-text"
         fontSize={75}
         fontWeight="bold"
         marginRight="spacing.1"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(216, 16%, 60%, 1)",
               "fontFamily": "Lato",
               "fontSize": 12,
@@ -1403,10 +1440,11 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         ₹
       </Text>
       <Text
+        accessible={true}
         data-blade-component="base-text"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(217, 56%, 17%, 1)",
               "fontFamily": "Lato",
               "fontSize": 16,
@@ -1427,14 +1465,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="surface.text.normal.lowContrast"
           data-blade-component="base-text"
           fontSize={200}
           fontWeight="bold"
           lineHeight={300}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(217, 56%, 17%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 16,
@@ -1458,14 +1497,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
           .
         </Text>
         <Text
+          accessible={true}
           color="surface.text.muted.lowContrast"
           data-blade-component="base-text"
           fontSize={75}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 16%, 60%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -1494,8 +1534,8 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
     data-blade-component="amount"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -1507,8 +1547,8 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
@@ -1519,14 +1559,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="surface.text.muted.lowContrast"
         data-blade-component="base-text"
         fontSize={400}
         fontWeight="bold"
         marginRight="spacing.1"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(216, 16%, 60%, 1)",
               "fontFamily": "Lato",
               "fontSize": 18,
@@ -1549,10 +1590,11 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         ₹
       </Text>
       <Text
+        accessible={true}
         data-blade-component="base-text"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(217, 56%, 17%, 1)",
               "fontFamily": "Lato",
               "fontSize": 16,
@@ -1573,14 +1615,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="surface.text.normal.lowContrast"
           data-blade-component="base-text"
           fontSize={700}
           fontWeight="bold"
           lineHeight={600}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(217, 56%, 17%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 24,
@@ -1604,14 +1647,15 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
           .
         </Text>
         <Text
+          accessible={true}
           color="surface.text.muted.lowContrast"
           data-blade-component="base-text"
           fontSize={400}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 16%, 60%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 18,
@@ -1642,7 +1686,7 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
 exports[`<Amount /> should render amount with Decimal value 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1651,8 +1695,8 @@ exports[`<Amount /> should render amount with Decimal value 1`] = `
     data-blade-component="amount"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -1664,8 +1708,8 @@ exports[`<Amount /> should render amount with Decimal value 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
@@ -1676,14 +1720,15 @@ exports[`<Amount /> should render amount with Decimal value 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="surface.text.muted.lowContrast"
         data-blade-component="base-text"
         fontSize={75}
         fontWeight="bold"
         marginRight="spacing.1"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(216, 16%, 60%, 1)",
               "fontFamily": "Lato",
               "fontSize": 12,
@@ -1706,10 +1751,11 @@ exports[`<Amount /> should render amount with Decimal value 1`] = `
         ₹
       </Text>
       <Text
+        accessible={true}
         data-blade-component="base-text"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(217, 56%, 17%, 1)",
               "fontFamily": "Lato",
               "fontSize": 16,
@@ -1730,14 +1776,15 @@ exports[`<Amount /> should render amount with Decimal value 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="surface.text.normal.lowContrast"
           data-blade-component="base-text"
           fontSize={200}
           fontWeight="regular"
           lineHeight={300}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(217, 56%, 17%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 16,
@@ -1761,14 +1808,15 @@ exports[`<Amount /> should render amount with Decimal value 1`] = `
           .
         </Text>
         <Text
+          accessible={true}
           color="surface.text.muted.lowContrast"
           data-blade-component="base-text"
           fontSize={75}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 16%, 60%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -1799,7 +1847,7 @@ exports[`<Amount /> should render amount with Decimal value 1`] = `
 exports[`<Amount /> should render amount with Humanize value 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1808,8 +1856,8 @@ exports[`<Amount /> should render amount with Humanize value 1`] = `
     data-blade-component="amount"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -1821,8 +1869,8 @@ exports[`<Amount /> should render amount with Humanize value 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
@@ -1833,14 +1881,15 @@ exports[`<Amount /> should render amount with Humanize value 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="surface.text.muted.lowContrast"
         data-blade-component="base-text"
         fontSize={75}
         fontWeight="bold"
         marginRight="spacing.1"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(216, 16%, 60%, 1)",
               "fontFamily": "Lato",
               "fontSize": 12,
@@ -1863,14 +1912,15 @@ exports[`<Amount /> should render amount with Humanize value 1`] = `
         ₹
       </Text>
       <Text
+        accessible={true}
         color="surface.text.normal.lowContrast"
         data-blade-component="base-text"
         fontSize={200}
         fontWeight="regular"
         lineHeight={300}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(217, 56%, 17%, 1)",
               "fontFamily": "Lato",
               "fontSize": 16,
@@ -1900,7 +1950,7 @@ exports[`<Amount /> should render amount with Humanize value 1`] = `
 exports[`<Amount /> should render information intent Amount  1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1909,8 +1959,8 @@ exports[`<Amount /> should render information intent Amount  1`] = `
     data-blade-component="amount"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -1922,8 +1972,8 @@ exports[`<Amount /> should render information intent Amount  1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
@@ -1934,14 +1984,15 @@ exports[`<Amount /> should render information intent Amount  1`] = `
       }
     >
       <Text
+        accessible={true}
         color="feedback.text.information.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="regular"
         marginRight="spacing.1"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(193, 100%, 35%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -1964,14 +2015,15 @@ exports[`<Amount /> should render information intent Amount  1`] = `
         ₹
       </Text>
       <Text
+        accessible={true}
         color="feedback.text.information.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="regular"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(193, 100%, 35%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -2001,7 +2053,7 @@ exports[`<Amount /> should render information intent Amount  1`] = `
 exports[`<Amount /> should render positive intent Amount  1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2010,8 +2062,8 @@ exports[`<Amount /> should render positive intent Amount  1`] = `
     data-blade-component="amount"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -2023,8 +2075,8 @@ exports[`<Amount /> should render positive intent Amount  1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "baseline",
             "display": "flex",
             "flexDirection": "row",
@@ -2035,14 +2087,15 @@ exports[`<Amount /> should render positive intent Amount  1`] = `
       }
     >
       <Text
+        accessible={true}
         color="feedback.text.positive.lowContrast"
         data-blade-component="base-text"
         fontSize={75}
         fontWeight="bold"
         marginRight="spacing.1"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(160, 100%, 26%, 1)",
               "fontFamily": "Lato",
               "fontSize": 12,
@@ -2065,10 +2118,11 @@ exports[`<Amount /> should render positive intent Amount  1`] = `
         ₹
       </Text>
       <Text
+        accessible={true}
         data-blade-component="base-text"
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(217, 56%, 17%, 1)",
               "fontFamily": "Lato",
               "fontSize": 16,
@@ -2089,14 +2143,15 @@ exports[`<Amount /> should render positive intent Amount  1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.positive.lowContrast"
           data-blade-component="base-text"
           fontSize={100}
           fontWeight="regular"
           lineHeight={100}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(160, 100%, 26%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 14,
@@ -2120,14 +2175,15 @@ exports[`<Amount /> should render positive intent Amount  1`] = `
           .
         </Text>
         <Text
+          accessible={true}
           color="feedback.text.positive.lowContrast"
           data-blade-component="base-text"
           fontSize={75}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(160, 100%, 26%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
diff --git a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.ssr.test.tsx.snap b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.ssr.test.tsx.snap
index f4877dfd5f2..2de186059c1 100644
--- a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Amount /> should render Amount on server 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"amount\\" class=\\"BaseBox-bmPWx bcSLaJ\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx iaZUuq\\"><span class=\\"StyledBaseText-dVBfTO cQGNSm\\" data-blade-component=\\"base-text\\">₹</span><span class=\\"StyledBaseText-dVBfTO eIdQFo\\" data-blade-component=\\"base-text\\">10,000<!-- -->.</span><span class=\\"StyledBaseText-dVBfTO ghBMue\\" data-blade-component=\\"base-text\\">00</span></div></div></div>"`;
+exports[`<Amount /> should render Amount on server 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="amount" class="BaseBox-bmPWx bcSLaJ"><div data-blade-component="base-box" class="BaseBox-bmPWx iaZUuq"><span class="StyledBaseText-dVBfTO cQGNSm" data-blade-component="base-text">₹</span><span class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="base-text">10,000<!-- -->.</span><span class="StyledBaseText-dVBfTO ghBMue" data-blade-component="base-text">00</span></div></div></div>"`;
 
 exports[`<Amount /> should render Amount on server 2`] = `
 <div
diff --git a/packages/blade/src/components/Badge/__tests__/__snapshots__/Badge.native.test.tsx.snap b/packages/blade/src/components/Badge/__tests__/__snapshots__/Badge.native.test.tsx.snap
index ced5e9b80af..33110fd0117 100644
--- a/packages/blade/src/components/Badge/__tests__/__snapshots__/Badge.native.test.tsx.snap
+++ b/packages/blade/src/components/Badge/__tests__/__snapshots__/Badge.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Badge /> should render Badge with Icon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -12,8 +12,8 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
     data-blade-component="badge"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -24,12 +24,12 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
       data-blade-component="base-box"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
             "textAlign": "left",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
             "borderRadius": 9999,
@@ -48,8 +48,8 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -67,8 +67,8 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
           data-blade-component="base-box"
           display="flex"
           style={
-            Array [
-              Object {
+            [
+              {
                 "display": "flex",
                 "paddingRight": 4,
               },
@@ -89,15 +89,15 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 12,
                   "width": 12,
@@ -111,7 +111,7 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -120,7 +120,7 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
                 d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
                 fill={4282603381}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -129,7 +129,7 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
                 d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
                 fill={4282603381}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -140,7 +140,7 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
                 fill={4282603381}
                 fillRule={0}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillRule",
                   ]
@@ -150,6 +150,7 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
           </RNSVGSvgView>
         </View>
         <Text
+          accessible={true}
           color="feedback.text.neutral.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -159,8 +160,8 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 27%, 36%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -191,7 +192,7 @@ exports[`<Badge /> should render Badge with Icon 1`] = `
 exports[`<Badge /> should render Badge with bold font 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -200,8 +201,8 @@ exports[`<Badge /> should render Badge with bold font 1`] = `
     data-blade-component="badge"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -212,12 +213,12 @@ exports[`<Badge /> should render Badge with bold font 1`] = `
       data-blade-component="base-box"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
             "textAlign": "left",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
             "borderRadius": 9999,
@@ -236,8 +237,8 @@ exports[`<Badge /> should render Badge with bold font 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -252,6 +253,7 @@ exports[`<Badge /> should render Badge with bold font 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.neutral.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -261,8 +263,8 @@ exports[`<Badge /> should render Badge with bold font 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 27%, 36%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -293,7 +295,7 @@ exports[`<Badge /> should render Badge with bold font 1`] = `
 exports[`<Badge /> should render Badge with default props 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -302,8 +304,8 @@ exports[`<Badge /> should render Badge with default props 1`] = `
     data-blade-component="badge"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -314,12 +316,12 @@ exports[`<Badge /> should render Badge with default props 1`] = `
       data-blade-component="base-box"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
             "textAlign": "left",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
             "borderRadius": 9999,
@@ -338,8 +340,8 @@ exports[`<Badge /> should render Badge with default props 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -354,6 +356,7 @@ exports[`<Badge /> should render Badge with default props 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.neutral.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -363,8 +366,8 @@ exports[`<Badge /> should render Badge with default props 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 27%, 36%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -395,7 +398,7 @@ exports[`<Badge /> should render Badge with default props 1`] = `
 exports[`<Badge /> should render high contrast blue variant Badge 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -404,8 +407,8 @@ exports[`<Badge /> should render high contrast blue variant Badge 1`] = `
     data-blade-component="badge"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -416,12 +419,12 @@ exports[`<Badge /> should render high contrast blue variant Badge 1`] = `
       data-blade-component="base-box"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(218, 89%, 51%, 1)",
             "textAlign": "left",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(218, 89%, 51%, 1)",
             "borderRadius": 9999,
@@ -440,8 +443,8 @@ exports[`<Badge /> should render high contrast blue variant Badge 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -456,6 +459,7 @@ exports[`<Badge /> should render high contrast blue variant Badge 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="badge.text.blue.highContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -465,8 +469,8 @@ exports[`<Badge /> should render high contrast blue variant Badge 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(0, 0%, 100%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -497,7 +501,7 @@ exports[`<Badge /> should render high contrast blue variant Badge 1`] = `
 exports[`<Badge /> should render high contrast information variant Badge 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -506,8 +510,8 @@ exports[`<Badge /> should render high contrast information variant Badge 1`] = `
     data-blade-component="badge"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -518,12 +522,12 @@ exports[`<Badge /> should render high contrast information variant Badge 1`] = `
       data-blade-component="base-box"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(193, 100%, 35%, 1)",
             "textAlign": "left",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(193, 100%, 35%, 1)",
             "borderRadius": 9999,
@@ -542,8 +546,8 @@ exports[`<Badge /> should render high contrast information variant Badge 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -558,6 +562,7 @@ exports[`<Badge /> should render high contrast information variant Badge 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.information.highContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -567,8 +572,8 @@ exports[`<Badge /> should render high contrast information variant Badge 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(0, 0%, 100%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -599,7 +604,7 @@ exports[`<Badge /> should render high contrast information variant Badge 1`] = `
 exports[`<Badge /> should render high contrast negative variant Badge 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -608,8 +613,8 @@ exports[`<Badge /> should render high contrast negative variant Badge 1`] = `
     data-blade-component="badge"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -620,12 +625,12 @@ exports[`<Badge /> should render high contrast negative variant Badge 1`] = `
       data-blade-component="base-box"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(8, 73%, 47%, 1)",
             "textAlign": "left",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(8, 73%, 47%, 1)",
             "borderRadius": 9999,
@@ -644,8 +649,8 @@ exports[`<Badge /> should render high contrast negative variant Badge 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -660,6 +665,7 @@ exports[`<Badge /> should render high contrast negative variant Badge 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.negative.highContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -669,8 +675,8 @@ exports[`<Badge /> should render high contrast negative variant Badge 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(0, 0%, 100%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -701,7 +707,7 @@ exports[`<Badge /> should render high contrast negative variant Badge 1`] = `
 exports[`<Badge /> should render high contrast neutral variant Badge 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -710,8 +716,8 @@ exports[`<Badge /> should render high contrast neutral variant Badge 1`] = `
     data-blade-component="badge"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -722,12 +728,12 @@ exports[`<Badge /> should render high contrast neutral variant Badge 1`] = `
       data-blade-component="base-box"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(216, 33%, 29%, 1)",
             "textAlign": "left",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(216, 33%, 29%, 1)",
             "borderRadius": 9999,
@@ -746,8 +752,8 @@ exports[`<Badge /> should render high contrast neutral variant Badge 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -762,6 +768,7 @@ exports[`<Badge /> should render high contrast neutral variant Badge 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.neutral.highContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -771,8 +778,8 @@ exports[`<Badge /> should render high contrast neutral variant Badge 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(0, 0%, 100%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -803,7 +810,7 @@ exports[`<Badge /> should render high contrast neutral variant Badge 1`] = `
 exports[`<Badge /> should render high contrast notice variant Badge 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -812,8 +819,8 @@ exports[`<Badge /> should render high contrast notice variant Badge 1`] = `
     data-blade-component="badge"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -824,12 +831,12 @@ exports[`<Badge /> should render high contrast notice variant Badge 1`] = `
       data-blade-component="base-box"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(38, 97%, 38%, 1)",
             "textAlign": "left",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(38, 97%, 38%, 1)",
             "borderRadius": 9999,
@@ -848,8 +855,8 @@ exports[`<Badge /> should render high contrast notice variant Badge 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -864,6 +871,7 @@ exports[`<Badge /> should render high contrast notice variant Badge 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.notice.highContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -873,8 +881,8 @@ exports[`<Badge /> should render high contrast notice variant Badge 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(0, 0%, 100%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -905,7 +913,7 @@ exports[`<Badge /> should render high contrast notice variant Badge 1`] = `
 exports[`<Badge /> should render high contrast positive variant Badge 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -914,8 +922,8 @@ exports[`<Badge /> should render high contrast positive variant Badge 1`] = `
     data-blade-component="badge"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -926,12 +934,12 @@ exports[`<Badge /> should render high contrast positive variant Badge 1`] = `
       data-blade-component="base-box"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(160, 100%, 26%, 1)",
             "textAlign": "left",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(160, 100%, 26%, 1)",
             "borderRadius": 9999,
@@ -950,8 +958,8 @@ exports[`<Badge /> should render high contrast positive variant Badge 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -966,6 +974,7 @@ exports[`<Badge /> should render high contrast positive variant Badge 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.positive.highContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -975,8 +984,8 @@ exports[`<Badge /> should render high contrast positive variant Badge 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(0, 0%, 100%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -1007,7 +1016,7 @@ exports[`<Badge /> should render high contrast positive variant Badge 1`] = `
 exports[`<Badge /> should render large size Badge 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1016,8 +1025,8 @@ exports[`<Badge /> should render large size Badge 1`] = `
     data-blade-component="badge"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -1028,12 +1037,12 @@ exports[`<Badge /> should render large size Badge 1`] = `
       data-blade-component="base-box"
       size="large"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
             "textAlign": "left",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
             "borderRadius": 9999,
@@ -1052,8 +1061,8 @@ exports[`<Badge /> should render large size Badge 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -1068,6 +1077,7 @@ exports[`<Badge /> should render large size Badge 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.neutral.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -1077,8 +1087,8 @@ exports[`<Badge /> should render large size Badge 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 27%, 36%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -1109,7 +1119,7 @@ exports[`<Badge /> should render large size Badge 1`] = `
 exports[`<Badge /> should render low contrast blue variant Badge 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1118,8 +1128,8 @@ exports[`<Badge /> should render low contrast blue variant Badge 1`] = `
     data-blade-component="badge"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -1130,12 +1140,12 @@ exports[`<Badge /> should render low contrast blue variant Badge 1`] = `
       data-blade-component="base-box"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(218, 89%, 51%, 0.09)",
             "textAlign": "left",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(218, 89%, 51%, 0.09)",
             "borderRadius": 9999,
@@ -1154,8 +1164,8 @@ exports[`<Badge /> should render low contrast blue variant Badge 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -1170,6 +1180,7 @@ exports[`<Badge /> should render low contrast blue variant Badge 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="badge.text.blue.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -1179,8 +1190,8 @@ exports[`<Badge /> should render low contrast blue variant Badge 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(218, 89%, 51%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -1211,7 +1222,7 @@ exports[`<Badge /> should render low contrast blue variant Badge 1`] = `
 exports[`<Badge /> should render low contrast information variant Badge 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1220,8 +1231,8 @@ exports[`<Badge /> should render low contrast information variant Badge 1`] = `
     data-blade-component="badge"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -1232,12 +1243,12 @@ exports[`<Badge /> should render low contrast information variant Badge 1`] = `
       data-blade-component="base-box"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(193, 100%, 35%, 0.09)",
             "textAlign": "left",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(193, 100%, 35%, 0.09)",
             "borderRadius": 9999,
@@ -1256,8 +1267,8 @@ exports[`<Badge /> should render low contrast information variant Badge 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -1272,6 +1283,7 @@ exports[`<Badge /> should render low contrast information variant Badge 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.information.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -1281,8 +1293,8 @@ exports[`<Badge /> should render low contrast information variant Badge 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(193, 100%, 35%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -1313,7 +1325,7 @@ exports[`<Badge /> should render low contrast information variant Badge 1`] = `
 exports[`<Badge /> should render low contrast negative variant Badge 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1322,8 +1334,8 @@ exports[`<Badge /> should render low contrast negative variant Badge 1`] = `
     data-blade-component="badge"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -1334,12 +1346,12 @@ exports[`<Badge /> should render low contrast negative variant Badge 1`] = `
       data-blade-component="base-box"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
             "textAlign": "left",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
             "borderRadius": 9999,
@@ -1358,8 +1370,8 @@ exports[`<Badge /> should render low contrast negative variant Badge 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -1374,6 +1386,7 @@ exports[`<Badge /> should render low contrast negative variant Badge 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.negative.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -1383,8 +1396,8 @@ exports[`<Badge /> should render low contrast negative variant Badge 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(8, 73%, 47%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -1415,7 +1428,7 @@ exports[`<Badge /> should render low contrast negative variant Badge 1`] = `
 exports[`<Badge /> should render low contrast neutral variant Badge 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1424,8 +1437,8 @@ exports[`<Badge /> should render low contrast neutral variant Badge 1`] = `
     data-blade-component="badge"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -1436,12 +1449,12 @@ exports[`<Badge /> should render low contrast neutral variant Badge 1`] = `
       data-blade-component="base-box"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
             "textAlign": "left",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
             "borderRadius": 9999,
@@ -1460,8 +1473,8 @@ exports[`<Badge /> should render low contrast neutral variant Badge 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -1476,6 +1489,7 @@ exports[`<Badge /> should render low contrast neutral variant Badge 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.neutral.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -1485,8 +1499,8 @@ exports[`<Badge /> should render low contrast neutral variant Badge 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 27%, 36%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -1517,7 +1531,7 @@ exports[`<Badge /> should render low contrast neutral variant Badge 1`] = `
 exports[`<Badge /> should render low contrast notice variant Badge 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1526,8 +1540,8 @@ exports[`<Badge /> should render low contrast notice variant Badge 1`] = `
     data-blade-component="badge"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -1538,12 +1552,12 @@ exports[`<Badge /> should render low contrast notice variant Badge 1`] = `
       data-blade-component="base-box"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(36, 100%, 44%, 0.09)",
             "textAlign": "left",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(36, 100%, 44%, 0.09)",
             "borderRadius": 9999,
@@ -1562,8 +1576,8 @@ exports[`<Badge /> should render low contrast notice variant Badge 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -1578,6 +1592,7 @@ exports[`<Badge /> should render low contrast notice variant Badge 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.notice.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -1587,8 +1602,8 @@ exports[`<Badge /> should render low contrast notice variant Badge 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(38, 97%, 38%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -1619,7 +1634,7 @@ exports[`<Badge /> should render low contrast notice variant Badge 1`] = `
 exports[`<Badge /> should render low contrast positive variant Badge 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1628,8 +1643,8 @@ exports[`<Badge /> should render low contrast positive variant Badge 1`] = `
     data-blade-component="badge"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -1640,12 +1655,12 @@ exports[`<Badge /> should render low contrast positive variant Badge 1`] = `
       data-blade-component="base-box"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
             "textAlign": "left",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
             "borderRadius": 9999,
@@ -1664,8 +1679,8 @@ exports[`<Badge /> should render low contrast positive variant Badge 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -1680,6 +1695,7 @@ exports[`<Badge /> should render low contrast positive variant Badge 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.positive.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -1689,8 +1705,8 @@ exports[`<Badge /> should render low contrast positive variant Badge 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(160, 100%, 26%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -1721,7 +1737,7 @@ exports[`<Badge /> should render low contrast positive variant Badge 1`] = `
 exports[`<Badge /> should render medium size Badge 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1730,8 +1746,8 @@ exports[`<Badge /> should render medium size Badge 1`] = `
     data-blade-component="badge"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -1742,12 +1758,12 @@ exports[`<Badge /> should render medium size Badge 1`] = `
       data-blade-component="base-box"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
             "textAlign": "left",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
             "borderRadius": 9999,
@@ -1766,8 +1782,8 @@ exports[`<Badge /> should render medium size Badge 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -1782,6 +1798,7 @@ exports[`<Badge /> should render medium size Badge 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.neutral.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -1791,8 +1808,8 @@ exports[`<Badge /> should render medium size Badge 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 27%, 36%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -1823,7 +1840,7 @@ exports[`<Badge /> should render medium size Badge 1`] = `
 exports[`<Badge /> should render small size Badge 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1832,8 +1849,8 @@ exports[`<Badge /> should render small size Badge 1`] = `
     data-blade-component="badge"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -1844,12 +1861,12 @@ exports[`<Badge /> should render small size Badge 1`] = `
       data-blade-component="base-box"
       size="small"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
             "textAlign": "left",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
             "borderRadius": 9999,
@@ -1868,8 +1885,8 @@ exports[`<Badge /> should render small size Badge 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -1884,6 +1901,7 @@ exports[`<Badge /> should render small size Badge 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.neutral.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -1893,8 +1911,8 @@ exports[`<Badge /> should render small size Badge 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 27%, 36%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 10,
diff --git a/packages/blade/src/components/Badge/__tests__/__snapshots__/Badge.ssr.test.tsx.snap b/packages/blade/src/components/Badge/__tests__/__snapshots__/Badge.ssr.test.tsx.snap
index a74ce591838..4e91282a16d 100644
--- a/packages/blade/src/components/Badge/__tests__/__snapshots__/Badge.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Badge/__tests__/__snapshots__/Badge.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Badge /> should render Badge on server 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"badge\\" class=\\"BaseBox-bmPWx jLCxzZ\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx StyledBadgeweb__StyledBadge-sc-1svn4tv-0 cRtrfR dnvyGQ\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx iRrOid\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx gOCFFA\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"12px\\" viewBox=\\"0 0 24 24\\" width=\\"12px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z\\" fill=\\"hsla(216, 27%, 36%, 1)\\" data-blade-component=\\"svg-path\\"></path><path d=\\"M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z\\" fill=\\"hsla(216, 27%, 36%, 1)\\" data-blade-component=\\"svg-path\\"></path><path d=\\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z\\" clip-rule=\\"evenodd\\" fill=\\"hsla(216, 27%, 36%, 1)\\" fill-rule=\\"evenodd\\" data-blade-component=\\"svg-path\\"></path></svg></div><p class=\\"StyledBaseText-dVBfTO eIOpN\\" data-blade-component=\\"text\\">Label</p></div></div></div></div>"`;
+exports[`<Badge /> should render Badge on server 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="badge" class="BaseBox-bmPWx jLCxzZ"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledBadgeweb__StyledBadge-sc-1svn4tv-0 cRtrfR dnvyGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx iRrOid"><div data-blade-component="base-box" class="BaseBox-bmPWx gOCFFA"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(216, 27%, 36%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(216, 27%, 36%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(216, 27%, 36%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><p class="StyledBaseText-dVBfTO eIOpN" data-blade-component="text">Label</p></div></div></div></div>"`;
 
 exports[`<Badge /> should render Badge on server 2`] = `
 <div
diff --git a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.native.test.tsx.snap b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.native.test.tsx.snap
index 9ebb082cfba..7e9ccb46d52 100644
--- a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.native.test.tsx.snap
+++ b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -20,24 +20,24 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
     onGestureHandlerStateChange={[Function]}
     pointerEvents="auto"
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "black",
         },
-        Array [
-          Object {
+        [
+          {
             "bottom": 0,
             "left": 0,
             "position": "absolute",
             "right": 0,
             "top": 0,
           },
-          Object {
+          {
             "backgroundColor": "hsla(214, 15%, 18%, 0.64)",
             "zIndex": 100,
           },
         ],
-        Object {
+        {
           "flex": 1,
           "opacity": undefined,
         },
@@ -48,18 +48,18 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
     onLayout={[Function]}
     pointerEvents="box-none"
     style={
-      Array [
-        Object {
+      [
+        {
           "zIndex": 100,
         },
-        Object {
+        {
           "bottom": 0,
           "left": 0,
           "position": "absolute",
           "right": 0,
           "top": 0,
         },
-        Object {
+        {
           "bottom": 0,
           "overflow": "hidden",
           "top": 0,
@@ -69,27 +69,27 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
   >
     <View
       style={
-        Array [
-          Object {
+        [
+          {
             "shadowColor": "hsla(217,56%,17%,0.64)",
-            "shadowOffset": Object {
+            "shadowOffset": {
               "height": -18,
               "width": 0,
             },
             "shadowOpacity": 0.2,
             "shadowRadius": 12,
           },
-          Object {
+          {
             "flexDirection": "column-reverse",
             "left": 0,
             "position": "absolute",
             "right": 0,
             "top": 0,
           },
-          Object {
+          {
             "opacity": 1,
-            "transform": Array [
-              Object {
+            "transform": [
+              {
                 "translateY": 1334,
               },
             ],
@@ -99,23 +99,23 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
     >
       <View
         animatedIndex={
-          Object {
+          {
             "value": -1,
           }
         }
         animatedPosition={
-          Object {
+          {
             "value": 1334,
           }
         }
         data-blade-component="base-box"
         pointerEvents="none"
         style={
-          Array [
-            Object {
+          [
+            {
               "pointerEvents": "none",
             },
-            Object {
+            {
               "alignItems": "center",
               "backgroundColor": "hsla(0, 0%, 100%, 1)",
               "borderTopLeftRadius": 16,
@@ -123,7 +123,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
               "justifyContent": "center",
               "position": "relative",
             },
-            Object {
+            {
               "bottom": 0,
               "left": 0,
               "position": "absolute",
@@ -136,11 +136,11 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
       <View
         pointerEvents="box-none"
         style={
-          Array [
-            Object {
+          [
+            {
               "overflow": "hidden",
             },
-            Object {
+            {
               "paddingBottom": -999,
             },
           ]
@@ -153,9 +153,9 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
           onGestureHandlerEvent={[Function]}
           onGestureHandlerStateChange={[Function]}
           style={
-            Array [
-              Object {},
-              Object {
+            [
+              {},
+              {
                 "height": 0,
               },
             ]
@@ -165,8 +165,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
             onLayout={[Function]}
             pointerEvents="box-none"
             style={
-              Array [
-                Object {
+              [
+                {
                   "left": 0,
                   "position": "absolute",
                   "right": 0,
@@ -174,9 +174,9 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                   "zIndex": 9999,
                 },
                 undefined,
-                Object {
-                  "transform": Array [
-                    Object {
+                {
+                  "transform": [
+                    {
                       "translateY": 999,
                     },
                   ],
@@ -192,8 +192,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                 data-blade-component="base-box"
                 flexShrink={0}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "backgroundColor": "hsla(0, 0%, 100%, 1)",
                       "flexShrink": 0,
                       "marginTop": "auto",
@@ -215,13 +215,13 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                   dividerStyle="solid"
                   isDividerHorizontal={true}
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
                         "borderStyle": "solid",
                         "borderWidth": 0,
                       },
-                      Object {
+                      {
                         "borderBottomStyle": "solid",
                         "borderBottomWidth": 1,
                         "flexGrow": 1,
@@ -233,8 +233,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                 <View
                   data-blade-component="base-box"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "paddingBottom": 16,
                         "paddingLeft": 16,
                         "paddingRight": 16,
@@ -246,7 +246,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                   <View
                     accessibilityRole="button"
                     accessibilityState={
-                      Object {
+                      {
                         "disabled": false,
                       }
                     }
@@ -284,8 +284,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                     onResponderTerminationRequest={[Function]}
                     onStartShouldSetResponder={[Function]}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "alignSelf": "center",
                           "backgroundColor": "hsla(218, 89%, 51%, 0)",
@@ -306,7 +306,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                           "textDecorationStyle": "solid",
                           "width": "100%",
                         },
-                        Object {
+                        {
                           "backgroundColor": "hsla(218, 89%, 51%, 0)",
                           "borderColor": "hsla(218, 89%, 51%, 1)",
                         },
@@ -322,8 +322,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                       isHidden={false}
                       justifyContent="center"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "center",
                             "display": "flex",
                             "flexBasis": 0,
@@ -332,21 +332,22 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                             "flexShrink": 1,
                             "justifyContent": "center",
                           },
-                          Object {
+                          {
                             "opacity": 1,
                           },
                         ]
                       }
                     >
                       <Text
+                        accessible={true}
                         color="action.text.secondary.default"
                         data-blade-component="base-text"
                         fontSize={100}
                         fontWeight="bold"
                         lineHeight={100}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "hsla(218, 89%, 51%, 1)",
                               "fontFamily": "Lato",
                               "fontSize": 14,
@@ -397,8 +398,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
           position="relative"
           right="spacing.0"
           style={
-            Array [
-              Object {
+            [
+              {
                 "left": 0,
                 "position": "relative",
                 "right": 0,
@@ -411,8 +412,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "zIndex": 100,
                 },
               ]
@@ -422,9 +423,9 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
             <View
               data-blade-component="base-box"
               style={
-                Array [
-                  Object {},
-                  Object {
+                [
+                  {},
+                  {
                     "alignItems": "center",
                     "display": "flex",
                     "flexDirection": "column",
@@ -443,9 +444,9 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
               <View
                 data-blade-component="base-box"
                 style={
-                  Array [
-                    Object {},
-                    Object {
+                  [
+                    {},
+                    {
                       "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
                       "borderRadius": 16,
                       "content": "''",
@@ -466,8 +467,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
             flexShrink={0}
             overflow="visible"
             style={
-              Array [
-                Object {
+              [
+                {
                   "flexShrink": 0,
                   "overflow": "visible",
                 },
@@ -477,16 +478,16 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
             <View
               data-blade-component="base-box"
               style={
-                Array [
-                  Object {},
+                [
+                  {},
                 ]
               }
             >
               <View
                 data-blade-component="base-box"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "marginBottom": 16,
                       "marginTop": 16,
                       "paddingLeft": 16,
@@ -502,8 +503,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                   display="flex"
                   flexDirection="row"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                         "flexDirection": "row",
                         "userSelect": "none",
@@ -518,8 +519,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                     display="flex"
                     flexDirection="row"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "flex-start",
                           "display": "flex",
                           "flexBasis": "auto",
@@ -535,8 +536,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                     <View
                       data-blade-component="base-box"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "flexBasis": "auto",
                             "flexGrow": 1,
                             "flexShrink": 1,
@@ -550,8 +551,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                         flexDirection="row"
                         flexShrink={0}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "display": "flex",
                               "flexDirection": "row",
                               "flexShrink": 0,
@@ -561,6 +562,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                       >
                         <Text
                           accessibilityRole="header"
+                          accessible={true}
                           color="surface.text.normal.lowContrast"
                           data-blade-component="heading"
                           fontFamily="text"
@@ -569,8 +571,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                           fontWeight="bold"
                           lineHeight={300}
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "color": "hsla(217, 56%, 17%, 1)",
                                 "fontFamily": "Lato",
                                 "fontSize": 16,
@@ -595,8 +597,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                         <View
                           data-blade-component="base-box"
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "marginLeft": 8,
                               },
                             ]
@@ -609,8 +611,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                             height="28px"
                             justifyContent="center"
                             style={
-                              Array [
-                                Object {
+                              [
+                                {
                                   "alignItems": "center",
                                   "display": "flex",
                                   "height": 28,
@@ -623,8 +625,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                               data-blade-component="counter"
                               display="flex"
                               style={
-                                Array [
-                                  Object {
+                                [
+                                  {
                                     "display": "flex",
                                   },
                                 ]
@@ -636,11 +638,11 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                                 platform="onMobile"
                                 size="medium"
                                 style={
-                                  Array [
-                                    Object {
+                                  [
+                                    {
                                       "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
                                     },
-                                    Object {
+                                    {
                                       "alignSelf": "center",
                                       "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
                                       "borderRadius": 9999,
@@ -659,8 +661,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                                   justifyContent="center"
                                   overflow="hidden"
                                   style={
-                                    Array [
-                                      Object {
+                                    [
+                                      {
                                         "alignItems": "center",
                                         "display": "flex",
                                         "flexDirection": "row",
@@ -675,6 +677,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                                   }
                                 >
                                   <Text
+                                    accessible={true}
                                     color="feedback.text.positive.lowContrast"
                                     data-blade-component="text"
                                     fontFamily="text"
@@ -684,8 +687,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                                     lineHeight={50}
                                     numberOfLines={1}
                                     style={
-                                      Array [
-                                        Object {
+                                      [
+                                        {
                                           "color": "hsla(160, 100%, 26%, 1)",
                                           "fontFamily": "Lato",
                                           "fontSize": 12,
@@ -716,6 +719,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                         </View>
                       </View>
                       <Text
+                        accessible={true}
                         color="surface.text.muted.lowContrast"
                         data-blade-component="text"
                         fontFamily="text"
@@ -724,8 +728,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                         fontWeight="regular"
                         lineHeight={50}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "hsla(216, 16%, 60%, 1)",
                               "fontFamily": "Lato",
                               "fontSize": 12,
@@ -752,8 +756,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                   <View
                     data-blade-component="base-box"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginRight": 16,
                         },
                       ]
@@ -766,8 +770,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                       height="28px"
                       justifyContent="center"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "center",
                             "display": "flex",
                             "height": 28,
@@ -780,8 +784,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                         data-blade-component="badge"
                         display="flex"
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "display": "flex",
                             },
                           ]
@@ -792,12 +796,12 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                           data-blade-component="base-box"
                           size="medium"
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
                                 "textAlign": "left",
                               },
-                              Object {
+                              {
                                 "alignSelf": "center",
                                 "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
                                 "borderRadius": 9999,
@@ -816,8 +820,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                             justifyContent="center"
                             overflow="hidden"
                             style={
-                              Array [
-                                Object {
+                              [
+                                {
                                   "alignItems": "center",
                                   "display": "flex",
                                   "flexDirection": "row",
@@ -832,6 +836,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                             }
                           >
                             <Text
+                              accessible={true}
                               color="feedback.text.positive.lowContrast"
                               data-blade-component="text"
                               fontFamily="text"
@@ -841,8 +846,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                               lineHeight={50}
                               numberOfLines={1}
                               style={
-                                Array [
-                                  Object {
+                                [
+                                  {
                                     "color": "hsla(160, 100%, 26%, 1)",
                                     "fontFamily": "Lato",
                                     "fontSize": 12,
@@ -876,8 +881,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                     height="28px"
                     justifyContent="center"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "display": "flex",
                           "height": 28,
@@ -903,8 +908,8 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                       onResponderTerminationRequest={[Function]}
                       onStartShouldSetResponder={[Function]}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignSelf": "center",
                           },
                         ]
@@ -924,15 +929,15 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                         minX={0}
                         minY={0}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "backgroundColor": "transparent",
                               "borderWidth": 0,
                             },
-                            Array [
-                              Object {},
+                            [
+                              {},
                             ],
-                            Object {
+                            {
                               "flex": 0,
                               "height": 20,
                               "width": 20,
@@ -946,7 +951,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                         <RNSVGGroup
                           fill={null}
                           propList={
-                            Array [
+                            [
                               "fill",
                             ]
                           }
@@ -955,7 +960,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                             d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
                             fill={4288851646}
                             propList={
-                              Array [
+                              [
                                 "fill",
                               ]
                             }
@@ -974,13 +979,13 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
                 dividerStyle="solid"
                 isDividerHorizontal={true}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
                       "borderStyle": "solid",
                       "borderWidth": 0,
                     },
-                    Object {
+                    {
                       "borderBottomStyle": "solid",
                       "borderBottomWidth": 1,
                       "flexGrow": 1,
@@ -1001,7 +1006,7 @@ exports[`<BottomSheet /> should render Header/Footer/Body properly 1`] = `
 exports[`<BottomSheet /> should render empty header 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1018,24 +1023,24 @@ exports[`<BottomSheet /> should render empty header 1`] = `
     onGestureHandlerStateChange={[Function]}
     pointerEvents="auto"
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "black",
         },
-        Array [
-          Object {
+        [
+          {
             "bottom": 0,
             "left": 0,
             "position": "absolute",
             "right": 0,
             "top": 0,
           },
-          Object {
+          {
             "backgroundColor": "hsla(214, 15%, 18%, 0.64)",
             "zIndex": 100,
           },
         ],
-        Object {
+        {
           "flex": 1,
           "opacity": undefined,
         },
@@ -1046,18 +1051,18 @@ exports[`<BottomSheet /> should render empty header 1`] = `
     onLayout={[Function]}
     pointerEvents="box-none"
     style={
-      Array [
-        Object {
+      [
+        {
           "zIndex": 100,
         },
-        Object {
+        {
           "bottom": 0,
           "left": 0,
           "position": "absolute",
           "right": 0,
           "top": 0,
         },
-        Object {
+        {
           "bottom": 0,
           "overflow": "hidden",
           "top": 0,
@@ -1067,27 +1072,27 @@ exports[`<BottomSheet /> should render empty header 1`] = `
   >
     <View
       style={
-        Array [
-          Object {
+        [
+          {
             "shadowColor": "hsla(217,56%,17%,0.64)",
-            "shadowOffset": Object {
+            "shadowOffset": {
               "height": -18,
               "width": 0,
             },
             "shadowOpacity": 0.2,
             "shadowRadius": 12,
           },
-          Object {
+          {
             "flexDirection": "column-reverse",
             "left": 0,
             "position": "absolute",
             "right": 0,
             "top": 0,
           },
-          Object {
+          {
             "opacity": 1,
-            "transform": Array [
-              Object {
+            "transform": [
+              {
                 "translateY": 1334,
               },
             ],
@@ -1097,23 +1102,23 @@ exports[`<BottomSheet /> should render empty header 1`] = `
     >
       <View
         animatedIndex={
-          Object {
+          {
             "value": -1,
           }
         }
         animatedPosition={
-          Object {
+          {
             "value": 1334,
           }
         }
         data-blade-component="base-box"
         pointerEvents="none"
         style={
-          Array [
-            Object {
+          [
+            {
               "pointerEvents": "none",
             },
-            Object {
+            {
               "alignItems": "center",
               "backgroundColor": "hsla(0, 0%, 100%, 1)",
               "borderTopLeftRadius": 16,
@@ -1121,7 +1126,7 @@ exports[`<BottomSheet /> should render empty header 1`] = `
               "justifyContent": "center",
               "position": "relative",
             },
-            Object {
+            {
               "bottom": 0,
               "left": 0,
               "position": "absolute",
@@ -1134,11 +1139,11 @@ exports[`<BottomSheet /> should render empty header 1`] = `
       <View
         pointerEvents="box-none"
         style={
-          Array [
-            Object {
+          [
+            {
               "overflow": "hidden",
             },
-            Object {
+            {
               "paddingBottom": -999,
             },
           ]
@@ -1151,9 +1156,9 @@ exports[`<BottomSheet /> should render empty header 1`] = `
           onGestureHandlerEvent={[Function]}
           onGestureHandlerStateChange={[Function]}
           style={
-            Array [
-              Object {},
-              Object {
+            [
+              {},
+              {
                 "height": 0,
               },
             ]
@@ -1163,8 +1168,8 @@ exports[`<BottomSheet /> should render empty header 1`] = `
             onLayout={[Function]}
             pointerEvents="box-none"
             style={
-              Array [
-                Object {
+              [
+                {
                   "left": 0,
                   "position": "absolute",
                   "right": 0,
@@ -1172,9 +1177,9 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                   "zIndex": 9999,
                 },
                 undefined,
-                Object {
-                  "transform": Array [
-                    Object {
+                {
+                  "transform": [
+                    {
                       "translateY": 999,
                     },
                   ],
@@ -1190,8 +1195,8 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                 data-blade-component="base-box"
                 flexShrink={0}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "backgroundColor": "hsla(0, 0%, 100%, 1)",
                       "flexShrink": 0,
                       "marginTop": "auto",
@@ -1213,13 +1218,13 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                   dividerStyle="solid"
                   isDividerHorizontal={true}
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
                         "borderStyle": "solid",
                         "borderWidth": 0,
                       },
-                      Object {
+                      {
                         "borderBottomStyle": "solid",
                         "borderBottomWidth": 1,
                         "flexGrow": 1,
@@ -1231,8 +1236,8 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                 <View
                   data-blade-component="base-box"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "paddingBottom": 16,
                         "paddingLeft": 16,
                         "paddingRight": 16,
@@ -1244,7 +1249,7 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                   <View
                     accessibilityRole="button"
                     accessibilityState={
-                      Object {
+                      {
                         "disabled": false,
                       }
                     }
@@ -1282,8 +1287,8 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                     onResponderTerminationRequest={[Function]}
                     onStartShouldSetResponder={[Function]}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "alignSelf": "center",
                           "backgroundColor": "hsla(218, 89%, 51%, 0)",
@@ -1304,7 +1309,7 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                           "textDecorationStyle": "solid",
                           "width": "100%",
                         },
-                        Object {
+                        {
                           "backgroundColor": "hsla(218, 89%, 51%, 0)",
                           "borderColor": "hsla(218, 89%, 51%, 1)",
                         },
@@ -1320,8 +1325,8 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                       isHidden={false}
                       justifyContent="center"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "center",
                             "display": "flex",
                             "flexBasis": 0,
@@ -1330,21 +1335,22 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                             "flexShrink": 1,
                             "justifyContent": "center",
                           },
-                          Object {
+                          {
                             "opacity": 1,
                           },
                         ]
                       }
                     >
                       <Text
+                        accessible={true}
                         color="action.text.secondary.default"
                         data-blade-component="base-text"
                         fontSize={100}
                         fontWeight="bold"
                         lineHeight={100}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "hsla(218, 89%, 51%, 1)",
                               "fontFamily": "Lato",
                               "fontSize": 14,
@@ -1395,8 +1401,8 @@ exports[`<BottomSheet /> should render empty header 1`] = `
           position="absolute"
           right="spacing.0"
           style={
-            Array [
-              Object {
+            [
+              {
                 "left": 0,
                 "position": "absolute",
                 "right": 0,
@@ -1409,8 +1415,8 @@ exports[`<BottomSheet /> should render empty header 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "zIndex": 100,
                 },
               ]
@@ -1420,9 +1426,9 @@ exports[`<BottomSheet /> should render empty header 1`] = `
             <View
               data-blade-component="base-box"
               style={
-                Array [
-                  Object {},
-                  Object {
+                [
+                  {},
+                  {
                     "alignItems": "center",
                     "display": "flex",
                     "flexDirection": "column",
@@ -1441,9 +1447,9 @@ exports[`<BottomSheet /> should render empty header 1`] = `
               <View
                 data-blade-component="base-box"
                 style={
-                  Array [
-                    Object {},
-                    Object {
+                  [
+                    {},
+                    {
                       "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
                       "borderRadius": 16,
                       "content": "''",
@@ -1464,8 +1470,8 @@ exports[`<BottomSheet /> should render empty header 1`] = `
             flexShrink={0}
             overflow="visible"
             style={
-              Array [
-                Object {
+              [
+                {
                   "flexShrink": 0,
                   "overflow": "visible",
                 },
@@ -1478,8 +1484,8 @@ exports[`<BottomSheet /> should render empty header 1`] = `
               position="relative"
               right="spacing.0"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "height": 8,
                     "position": "relative",
                     "right": 0,
@@ -1503,8 +1509,8 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                 position="absolute"
                 right="spacing.5"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "alignItems": "center",
                       "backgroundColor": "hsla(0, 0%, 100%, 1)",
                       "borderRadius": 9999,
@@ -1541,8 +1547,8 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                   onResponderTerminationRequest={[Function]}
                   onStartShouldSetResponder={[Function]}
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "alignSelf": "center",
                       },
                     ]
@@ -1562,15 +1568,15 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                     minX={0}
                     minY={0}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "backgroundColor": "transparent",
                           "borderWidth": 0,
                         },
-                        Array [
-                          Object {},
+                        [
+                          {},
                         ],
-                        Object {
+                        {
                           "flex": 0,
                           "height": 20,
                           "width": 20,
@@ -1584,7 +1590,7 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                     <RNSVGGroup
                       fill={null}
                       propList={
-                        Array [
+                        [
                           "fill",
                         ]
                       }
@@ -1593,7 +1599,7 @@ exports[`<BottomSheet /> should render empty header 1`] = `
                         d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
                         fill={4288851646}
                         propList={
-                          Array [
+                          [
                             "fill",
                           ]
                         }
diff --git a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.ssr.test.tsx.snap b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.ssr.test.tsx.snap
index 17a3b16ff4a..1f296787bda 100644
--- a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.ssr.test.tsx.snap
+++ b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<BottomSheet /> should render a BottomSheet ssr 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-testid=\\"bottomsheet-backdrop\\" opacity=\\"1\\" data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BottomSheetBackdropweb__StyledBottomSheetBackdrop-sc-198k9f6-0 ginxff gQNTBU\\"></div><div data-blade-component=\\"bottom-sheet\\" aria-modal=\\"true\\" role=\\"dialog\\" style=\\"opacity:1;pointer-events:all;height:0;bottom:0;top:auto;z-index:101\\" class=\\"BottomSheetweb__BottomSheetSurface-qlloie-0 gtDWSk\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx gWGQoD\\"><div data-blade-component=\\"BottomSheetGrabHandle\\" class=\\"BottomSheetGrabHandleweb__BottomSheetGrabHandle-mo12ak-0 jpGBjs\\"></div><div data-blade-component=\\"bottom-sheet-header\\" class=\\"BaseBox-bmPWx cImMcF\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx HnFxS\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx isYLKC\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx jPnCFC\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx lhloZM\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx kGcQUv\\"><h6 class=\\"StyledBaseText-dVBfTO dFejDk\\" data-blade-component=\\"heading\\">Address Details</h6><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx ktWMhw\\"><div data-blade-component=\\"box\\" class=\\"BaseBox-bmPWx bhAnXJ\\"><div data-blade-component=\\"counter\\" class=\\"BaseBox-bmPWx jLCxzZ\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx StyledCounterweb__StyledCounter-sc-1itt9w6-0 bEaUIc hNXeTn\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx KJLNh\\"><p class=\\"StyledBaseText-dVBfTO kHUjbS\\" data-blade-component=\\"text\\">2</p></div></div></div></div></div></div><p class=\\"StyledBaseText-dVBfTO cGMqFI\\" data-blade-component=\\"text\\">Saving addresses will improve your checkout experience</p></div></div><div data-blade-component=\\"box\\" class=\\"BaseBox-bmPWx bhAnXJ\\"><button type=\\"button\\" aria-label=\\"Close\\" data-blade-component=\\"icon-button\\" class=\\"StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 gvuEeM\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"20px\\" viewBox=\\"0 0 24 24\\" width=\\"20px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z\\" fill=\\"currentColor\\" data-blade-component=\\"svg-path\\"></path></svg></button></div></div></div><div data-blade-component=\\"divider\\" class=\\"BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR\\"></div></div></div><div data-blade-component=\\"bottom-sheet-body\\" data-testid=\\"bottomsheet-body\\" style=\\"-webkit-tap-highlight-color:revert;-webkit-touch-callout:revert;-webkit-user-select:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;user-select:auto;overflow:auto;touch-action:none\\" class=\\"BaseBox-bmPWx jiLTJh\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx lhcKjI\\"><p class=\\"StyledBaseText-dVBfTO eIdQFo\\" data-blade-component=\\"text\\">BottomSheet body</p></div></div><div data-blade-component=\\"bottom-sheet-footer\\" class=\\"BaseBox-bmPWx dazEdx\\"><div data-blade-component=\\"divider\\" class=\\"BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR\\"></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx kGtVIy\\"><button type=\\"button\\" data-blade-component=\\"button\\" role=\\"button\\" class=\\"StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 hDfvuZ\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 kkGTK NIPoA\\"><div class=\\"StyledBaseText-dVBfTO jSaisz\\" data-blade-component=\\"base-text\\">Remove address</div></div></button></div></div></div></div></div>"`;
+exports[`<BottomSheet /> should render a BottomSheet ssr 1`] = `"<div id="root" data-reactroot=""><div data-testid="bottomsheet-backdrop" opacity="1" data-blade-component="base-box" class="BaseBox-bmPWx BottomSheetBackdropweb__StyledBottomSheetBackdrop-sc-198k9f6-0 ginxff gQNTBU"></div><div data-blade-component="bottom-sheet" aria-modal="true" role="dialog" style="opacity:1;pointer-events:all;height:0;bottom:0;top:auto;z-index:101" class="BottomSheetweb__BottomSheetSurface-qlloie-0 gtDWSk"><div data-blade-component="base-box" class="BaseBox-bmPWx gWGQoD"><div data-blade-component="BottomSheetGrabHandle" class="BottomSheetGrabHandleweb__BottomSheetGrabHandle-mo12ak-0 jpGBjs"></div><div data-blade-component="bottom-sheet-header" class="BaseBox-bmPWx cImMcF"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx HnFxS"><div data-blade-component="base-box" class="BaseBox-bmPWx isYLKC"><div data-blade-component="base-box" class="BaseBox-bmPWx jPnCFC"><div data-blade-component="base-box" class="BaseBox-bmPWx lhloZM"><div data-blade-component="base-box" class="BaseBox-bmPWx kGcQUv"><h6 class="StyledBaseText-dVBfTO dFejDk" data-blade-component="heading">Address Details</h6><div data-blade-component="base-box" class="BaseBox-bmPWx ktWMhw"><div data-blade-component="box" class="BaseBox-bmPWx bhAnXJ"><div data-blade-component="counter" class="BaseBox-bmPWx jLCxzZ"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledCounterweb__StyledCounter-sc-1itt9w6-0 bEaUIc hNXeTn"><div data-blade-component="base-box" class="BaseBox-bmPWx KJLNh"><p class="StyledBaseText-dVBfTO kHUjbS" data-blade-component="text">2</p></div></div></div></div></div></div><p class="StyledBaseText-dVBfTO cGMqFI" data-blade-component="text">Saving addresses will improve your checkout experience</p></div></div><div data-blade-component="box" class="BaseBox-bmPWx bhAnXJ"><button type="button" aria-label="Close" data-blade-component="icon-button" class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 gvuEeM"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z" fill="currentColor" data-blade-component="svg-path"></path></svg></button></div></div></div><div data-blade-component="divider" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR"></div></div></div><div data-blade-component="bottom-sheet-body" data-testid="bottomsheet-body" style="-webkit-tap-highlight-color:revert;-webkit-touch-callout:revert;-webkit-user-select:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;user-select:auto;overflow:auto;touch-action:none" class="BaseBox-bmPWx jiLTJh"><div data-blade-component="base-box" class="BaseBox-bmPWx lhcKjI"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">BottomSheet body</p></div></div><div data-blade-component="bottom-sheet-footer" class="BaseBox-bmPWx dazEdx"><div data-blade-component="divider" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR"></div><div data-blade-component="base-box" class="BaseBox-bmPWx kGtVIy"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 hDfvuZ"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 kkGTK NIPoA"><div class="StyledBaseText-dVBfTO jSaisz" data-blade-component="base-text">Remove address</div></div></button></div></div></div></div></div>"`;
 
 exports[`<BottomSheet /> should render a BottomSheet ssr 2`] = `
 <div
diff --git a/packages/blade/src/components/Box/__tests__/Box.native.test.tsx b/packages/blade/src/components/Box/__tests__/Box.native.test.tsx
index 8976761f4bd..7018d93d1f2 100644
--- a/packages/blade/src/components/Box/__tests__/Box.native.test.tsx
+++ b/packages/blade/src/components/Box/__tests__/Box.native.test.tsx
@@ -20,7 +20,7 @@ describe('<Box />', () => {
     expect(toJSON()).toMatchInlineSnapshot(`
       <View
         style={
-          Object {
+          {
             "flex": 1,
           }
         }
@@ -29,8 +29,8 @@ describe('<Box />', () => {
           data-blade-component="box"
           display="flex"
           style={
-            Array [
-              Object {
+            [
+              {
                 "display": "flex",
                 "paddingBottom": 0,
                 "paddingLeft": 0,
diff --git a/packages/blade/src/components/Box/__tests__/__snapshots__/BaseBox.native.test.tsx.snap b/packages/blade/src/components/Box/__tests__/__snapshots__/BaseBox.native.test.tsx.snap
index 09e615e7ef2..6ce02fb9d23 100644
--- a/packages/blade/src/components/Box/__tests__/__snapshots__/BaseBox.native.test.tsx.snap
+++ b/packages/blade/src/components/Box/__tests__/__snapshots__/BaseBox.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<BaseBox /> should render BaseBox component with elevation 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -14,16 +14,16 @@ exports[`<BaseBox /> should render BaseBox component with elevation 1`] = `
     elevation="highRaised"
     height="200px"
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "hsla(220, 30%, 96%, 1)",
           "height": 200,
           "width": 200,
         },
-        Object {
+        {
           "elevation": 26,
           "shadowColor": "hsla(217, 56%, 17%, 0.64)",
-          "shadowOffset": Object {
+          "shadowOffset": {
             "height": 18,
             "width": 0,
           },
@@ -36,6 +36,7 @@ exports[`<BaseBox /> should render BaseBox component with elevation 1`] = `
     width="200px"
   >
     <Text
+      accessible={true}
       color="surface.text.normal.lowContrast"
       data-blade-component="text"
       fontFamily="text"
@@ -44,8 +45,8 @@ exports[`<BaseBox /> should render BaseBox component with elevation 1`] = `
       fontWeight="regular"
       lineHeight={100}
       style={
-        Array [
-          Object {
+        [
+          {
             "color": "hsla(217, 56%, 17%, 1)",
             "fontFamily": "Lato",
             "fontSize": 14,
@@ -74,7 +75,7 @@ exports[`<BaseBox /> should render BaseBox component with elevation 1`] = `
 exports[`<BaseBox /> should render BaseBox component with the correct styles 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -96,8 +97,8 @@ exports[`<BaseBox /> should render BaseBox component with the correct styles 1`]
     position="absolute"
     right="0px"
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "bottom": 0,
diff --git a/packages/blade/src/components/Box/__tests__/__snapshots__/BaseBox.ssr.test.tsx.snap b/packages/blade/src/components/Box/__tests__/__snapshots__/BaseBox.ssr.test.tsx.snap
index 7bf28f5126e..3504bbdff8c 100644
--- a/packages/blade/src/components/Box/__tests__/__snapshots__/BaseBox.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Box/__tests__/__snapshots__/BaseBox.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<BaseBox /> should render BaseBox component with the correct styles 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fZuncA\\"></div></div>"`;
+exports[`<BaseBox /> should render BaseBox component with the correct styles 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="base-box" class="BaseBox-bmPWx fZuncA"></div></div>"`;
 
 exports[`<BaseBox /> should render BaseBox component with the correct styles 2`] = `
 <div
diff --git a/packages/blade/src/components/Box/__tests__/__snapshots__/Box.ssr.test.tsx.snap b/packages/blade/src/components/Box/__tests__/__snapshots__/Box.ssr.test.tsx.snap
index 60901ab62ae..4b0707f15ab 100644
--- a/packages/blade/src/components/Box/__tests__/__snapshots__/Box.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Box/__tests__/__snapshots__/Box.ssr.test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Box /> should render Box as footer tag 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><footer data-blade-component=\\"box\\" class=\\"BaseBox-bmPWx zgBJD\\">Footer test!</footer></div>"`;
+exports[`<Box /> should render Box as footer tag 1`] = `"<div id="root" data-reactroot=""><footer data-blade-component="box" class="BaseBox-bmPWx zgBJD">Footer test!</footer></div>"`;
 
-exports[`<Box /> should render Box component with supported styles 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"box\\" class=\\"BaseBox-bmPWx jBndhd\\">children test!</div></div>"`;
+exports[`<Box /> should render Box component with supported styles 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="box" class="BaseBox-bmPWx jBndhd">children test!</div></div>"`;
 
-exports[`<Box /> should throw error for unsupport as prop 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><button data-blade-component=\\"box\\" class=\\"BaseBox-bmPWx\\"></button></div>"`;
+exports[`<Box /> should throw error for unsupport as prop 1`] = `"<div id="root" data-reactroot=""><button data-blade-component="box" class="BaseBox-bmPWx"></button></div>"`;
 
-exports[`<Box /> should throw error for unsupport values 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"box\\" class=\\"BaseBox-bmPWx gqmjXZ\\"></div></div>"`;
+exports[`<Box /> should throw error for unsupport values 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="box" class="BaseBox-bmPWx gqmjXZ"></div></div>"`;
diff --git a/packages/blade/src/components/Box/__tests__/baseBoxStyles.native.test.ts b/packages/blade/src/components/Box/__tests__/baseBoxStyles.native.test.ts
index bffb28ed884..3c085a573df 100644
--- a/packages/blade/src/components/Box/__tests__/baseBoxStyles.native.test.ts
+++ b/packages/blade/src/components/Box/__tests__/baseBoxStyles.native.test.ts
@@ -67,7 +67,7 @@ describe('getBaseBoxStyles', () => {
     });
     const boxStylesWithoutUndefined = JSON.parse(JSON.stringify(boxStyles));
     expect(boxStylesWithoutUndefined).toMatchInlineSnapshot(`
-      Object {
+      {
         "margin": "2px 12px 100%",
       }
     `);
@@ -77,7 +77,7 @@ describe('getBaseBoxStyles', () => {
 describe('getAllMediaQueries', () => {
   it('should return empty object', () => {
     expect(getAllMediaQueries({ display: 'flex', theme: paymentLightTheme })).toMatchInlineSnapshot(
-      `Object {}`,
+      `{}`,
     );
   });
 });
@@ -92,7 +92,7 @@ describe('getAllProps', () => {
     };
 
     expect(removeUndefinedValues(getAllProps(baseBoxProps))).toMatchInlineSnapshot(`
-      Object {
+      {
         "display": "flex",
         "padding": "20px",
       }
diff --git a/packages/blade/src/components/Box/__tests__/baseBoxStyles.test.ts b/packages/blade/src/components/Box/__tests__/baseBoxStyles.test.ts
index c0e3e062a13..2db0c00d9eb 100644
--- a/packages/blade/src/components/Box/__tests__/baseBoxStyles.test.ts
+++ b/packages/blade/src/components/Box/__tests__/baseBoxStyles.test.ts
@@ -56,7 +56,7 @@ describe('getBaseBoxStyles', () => {
     const boxStyles = getBaseBoxStyles({ backgroundColor: 'red', theme: paymentLightTheme });
     const boxStylesWithoutUndefined = JSON.parse(JSON.stringify(boxStyles));
     expect(boxStylesWithoutUndefined).toMatchInlineSnapshot(`
-      Object {
+      {
         "backgroundColor": "red",
       }
     `);
@@ -67,6 +67,6 @@ describe('getBaseBoxStyles', () => {
       theme: paymentLightTheme,
     });
     const boxStylesWithoutUndefined = JSON.parse(JSON.stringify(boxStyles));
-    expect(boxStylesWithoutUndefined).toMatchInlineSnapshot(`Object {}`);
+    expect(boxStylesWithoutUndefined).toMatchInlineSnapshot(`{}`);
   });
 });
diff --git a/packages/blade/src/components/Box/__tests__/baseBoxStyles.web.test.ts b/packages/blade/src/components/Box/__tests__/baseBoxStyles.web.test.ts
index 0c35461a5b8..98dceb67695 100644
--- a/packages/blade/src/components/Box/__tests__/baseBoxStyles.web.test.ts
+++ b/packages/blade/src/components/Box/__tests__/baseBoxStyles.web.test.ts
@@ -80,19 +80,19 @@ describe('getBaseBoxStyles', () => {
     });
     const boxStylesWithoutUndefined = JSON.parse(JSON.stringify(boxStyles));
     expect(boxStylesWithoutUndefined).toMatchInlineSnapshot(`
-          Object {
-            "@media screen and (min-width: 1200px)": Object {
-              "margin": "auto",
-            },
-            "@media screen and (min-width: 480px)": Object {
-              "margin": "2px 12px 100%",
-            },
-            "@media screen and (min-width: 768px)": Object {
-              "margin": "22px",
-            },
-            "margin": "2px",
-          }
-      `);
+      {
+        "@media screen and (min-width: 1200px)": {
+          "margin": "auto",
+        },
+        "@media screen and (min-width: 480px)": {
+          "margin": "2px 12px 100%",
+        },
+        "@media screen and (min-width: 768px)": {
+          "margin": "22px",
+        },
+        "margin": "2px",
+      }
+    `);
   });
 });
 
@@ -100,7 +100,7 @@ describe('getAllMediaQueries', () => {
   it('should return empty object', () => {
     expect(
       removeUndefinedValues(getAllMediaQueries({ display: 'block', theme: paymentLightTheme })),
-    ).toMatchInlineSnapshot(`Object {}`);
+    ).toMatchInlineSnapshot(`{}`);
   });
 
   it('should return the media queries', () => {
@@ -112,11 +112,11 @@ describe('getAllMediaQueries', () => {
         }),
       ),
     ).toMatchInlineSnapshot(`
-      Object {
-        "@media screen and (min-width: 1200px)": Object {
+      {
+        "@media screen and (min-width: 1200px)": {
           "display": "flex",
         },
-        "@media screen and (min-width: 768px)": Object {
+        "@media screen and (min-width: 768px)": {
           "display": "none",
         },
       }
@@ -134,20 +134,20 @@ describe('getAllProps', () => {
     };
 
     expect(removeUndefinedValues(getAllProps(baseBoxProps))).toMatchInlineSnapshot(`
-      Object {
+      {
         "display": "block",
         "padding": "2px",
       }
     `);
 
     expect(removeUndefinedValues(getAllProps(baseBoxProps, 'm'))).toMatchInlineSnapshot(`
-      Object {
+      {
         "margin": "2px",
       }
     `);
 
     expect(removeUndefinedValues(getAllProps(baseBoxProps, 'l'))).toMatchInlineSnapshot(`
-      Object {
+      {
         "padding": "20px",
       }
     `);
diff --git a/packages/blade/src/components/Box/__tests__/styledProps.native.test.tsx b/packages/blade/src/components/Box/__tests__/styledProps.native.test.tsx
index bfa00579ff1..f648cd509ad 100644
--- a/packages/blade/src/components/Box/__tests__/styledProps.native.test.tsx
+++ b/packages/blade/src/components/Box/__tests__/styledProps.native.test.tsx
@@ -31,7 +31,7 @@ describe('styledProps with getStyledProps', () => {
     expect(toJSON()).toMatchInlineSnapshot(`
       <View
         style={
-          Object {
+          {
             "flex": 1,
           }
         }
@@ -39,8 +39,8 @@ describe('styledProps with getStyledProps', () => {
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 0,
                 "marginLeft": 48,
                 "marginRight": 48,
@@ -63,21 +63,21 @@ describe('styledProps with useStyledProps', () => {
     expect(toJSON()).toMatchInlineSnapshot(`
       <View
         style={
-          Object {
+          {
             "flex": 1,
           }
         }
       >
         <Text
           margin={
-            Array [
+            [
               "spacing.0",
               "spacing.10",
             ]
           }
           style={
-            Array [
-              Object {
+            [
+              {
                 "display": "flex",
                 "marginBottom": 0,
                 "marginLeft": 48,
diff --git a/packages/blade/src/components/Box/__tests__/styledProps.test.ts b/packages/blade/src/components/Box/__tests__/styledProps.test.ts
index 8bb5c1e729d..3329754d746 100644
--- a/packages/blade/src/components/Box/__tests__/styledProps.test.ts
+++ b/packages/blade/src/components/Box/__tests__/styledProps.test.ts
@@ -3,7 +3,7 @@ import { makeStyledProps, getStyledProps } from '~components/Box/styledProps';
 describe('getStyledProps', () => {
   it('should ignore props that are not styledProps', () => {
     expect(getStyledProps({ marginTop: 'spacing.2', padding: 'spacing.1' })).toMatchInlineSnapshot(`
-      Object {
+      {
         "marginTop": "spacing.2",
       }
     `);
@@ -13,7 +13,7 @@ describe('getStyledProps', () => {
     // This test is meant like an alert if we end up adding some prop unexpectedly.
     // Do update the snapshot if adding new prop was intentional
     expect(makeStyledProps({})).toMatchInlineSnapshot(`
-      Object {
+      {
         "alignSelf": undefined,
         "bottom": undefined,
         "display": undefined,
diff --git a/packages/blade/src/components/Box/__tests__/useMemoizedStyles.web.test.tsx b/packages/blade/src/components/Box/__tests__/useMemoizedStyles.web.test.tsx
index 33c0ae03e15..01220a229ef 100644
--- a/packages/blade/src/components/Box/__tests__/useMemoizedStyles.web.test.tsx
+++ b/packages/blade/src/components/Box/__tests__/useMemoizedStyles.web.test.tsx
@@ -25,9 +25,7 @@ describe('getDependencyProp', () => {
         theme: { name: 'paymentTheme', something: 'something' },
         colorScheme: 'light',
       }),
-    ).toMatchInlineSnapshot(
-      `"{\\"paddingLeft\\":\\"12px\\",\\"display\\":\\"block\\"}-paymentTheme-light"`,
-    );
+    ).toMatchInlineSnapshot(`"{"paddingLeft":"12px","display":"block"}-paymentTheme-light"`);
   });
 });
 
@@ -46,7 +44,7 @@ describe('useMemoizedStyles', () => {
     );
 
     expect(JSON.stringify(result.current)).toMatchInlineSnapshot(
-      `"{\\"padding\\":\\"48px\\",\\"margin\\":\\"2px 4px\\"}"`,
+      `"{"padding":"48px","margin":"2px 4px"}"`,
     );
   });
 });
diff --git a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap
index accb3f1ae8d..f35ef458f8f 100644
--- a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap
+++ b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<BaseButton /> should render button with default properties 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,7 +11,7 @@ exports[`<BaseButton /> should render button with default properties 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -49,8 +49,8 @@ exports[`<BaseButton /> should render button with default properties 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -71,7 +71,7 @@ exports[`<BaseButton /> should render button with default properties 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -87,8 +87,8 @@ exports[`<BaseButton /> should render button with default properties 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -97,21 +97,22 @@ exports[`<BaseButton /> should render button with default properties 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.primary.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 0%, 100%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -143,7 +144,7 @@ exports[`<BaseButton /> should render button with default properties 1`] = `
 exports[`<BaseButton /> should render button with full width 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -151,7 +152,7 @@ exports[`<BaseButton /> should render button with full width 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -189,8 +190,8 @@ exports[`<BaseButton /> should render button with full width 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -211,7 +212,7 @@ exports[`<BaseButton /> should render button with full width 1`] = `
           "textDecorationStyle": "solid",
           "width": "100%",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -227,8 +228,8 @@ exports[`<BaseButton /> should render button with full width 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -237,21 +238,22 @@ exports[`<BaseButton /> should render button with full width 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.primary.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 0%, 100%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -283,7 +285,7 @@ exports[`<BaseButton /> should render button with full width 1`] = `
 exports[`<BaseButton /> should render button with icon with default iconPosition 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -291,7 +293,7 @@ exports[`<BaseButton /> should render button with icon with default iconPosition
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -329,8 +331,8 @@ exports[`<BaseButton /> should render button with icon with default iconPosition
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -351,7 +353,7 @@ exports[`<BaseButton /> should render button with icon with default iconPosition
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -367,8 +369,8 @@ exports[`<BaseButton /> should render button with icon with default iconPosition
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -377,7 +379,7 @@ exports[`<BaseButton /> should render button with icon with default iconPosition
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
@@ -389,8 +391,8 @@ exports[`<BaseButton /> should render button with icon with default iconPosition
         display="flex"
         justifyContent="center"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "justifyContent": "center",
@@ -413,15 +415,15 @@ exports[`<BaseButton /> should render button with icon with default iconPosition
           minX={0}
           minY={0}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "borderWidth": 0,
               },
-              Array [
-                Object {},
+              [
+                {},
               ],
-              Object {
+              {
                 "flex": 0,
                 "height": 16,
                 "width": 16,
@@ -435,7 +437,7 @@ exports[`<BaseButton /> should render button with icon with default iconPosition
           <RNSVGGroup
             fill={null}
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
@@ -446,7 +448,7 @@ exports[`<BaseButton /> should render button with icon with default iconPosition
               fill={4294967295}
               fillRule={0}
               propList={
-                Array [
+                [
                   "fill",
                   "fillRule",
                 ]
@@ -456,14 +458,15 @@ exports[`<BaseButton /> should render button with icon with default iconPosition
         </RNSVGSvgView>
       </View>
       <Text
+        accessible={true}
         color="action.text.primary.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 0%, 100%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -495,7 +498,7 @@ exports[`<BaseButton /> should render button with icon with default iconPosition
 exports[`<BaseButton /> should render button with icon with left iconPosition 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -503,7 +506,7 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 1`
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -541,8 +544,8 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 1`
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -563,7 +566,7 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 1`
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -579,8 +582,8 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 1`
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -589,7 +592,7 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 1`
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
@@ -601,8 +604,8 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 1`
         display="flex"
         justifyContent="center"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "justifyContent": "center",
@@ -625,15 +628,15 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 1`
           minX={0}
           minY={0}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "borderWidth": 0,
               },
-              Array [
-                Object {},
+              [
+                {},
               ],
-              Object {
+              {
                 "flex": 0,
                 "height": 16,
                 "width": 16,
@@ -647,7 +650,7 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 1`
           <RNSVGGroup
             fill={null}
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
@@ -658,7 +661,7 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 1`
               fill={4294967295}
               fillRule={0}
               propList={
-                Array [
+                [
                   "fill",
                   "fillRule",
                 ]
@@ -668,14 +671,15 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 1`
         </RNSVGSvgView>
       </View>
       <Text
+        accessible={true}
         color="action.text.primary.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 0%, 100%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -707,7 +711,7 @@ exports[`<BaseButton /> should render button with icon with left iconPosition 1`
 exports[`<BaseButton /> should render button with icon with right iconPosition 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -715,7 +719,7 @@ exports[`<BaseButton /> should render button with icon with right iconPosition 1
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -753,8 +757,8 @@ exports[`<BaseButton /> should render button with icon with right iconPosition 1
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -775,7 +779,7 @@ exports[`<BaseButton /> should render button with icon with right iconPosition 1
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -791,8 +795,8 @@ exports[`<BaseButton /> should render button with icon with right iconPosition 1
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -801,21 +805,22 @@ exports[`<BaseButton /> should render button with icon with right iconPosition 1
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.primary.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 0%, 100%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -845,8 +850,8 @@ exports[`<BaseButton /> should render button with icon with right iconPosition 1
         display="flex"
         justifyContent="center"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "justifyContent": "center",
@@ -869,15 +874,15 @@ exports[`<BaseButton /> should render button with icon with right iconPosition 1
           minX={0}
           minY={0}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "borderWidth": 0,
               },
-              Array [
-                Object {},
+              [
+                {},
               ],
-              Object {
+              {
                 "flex": 0,
                 "height": 16,
                 "width": 16,
@@ -891,7 +896,7 @@ exports[`<BaseButton /> should render button with icon with right iconPosition 1
           <RNSVGGroup
             fill={null}
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
@@ -902,7 +907,7 @@ exports[`<BaseButton /> should render button with icon with right iconPosition 1
               fill={4294967295}
               fillRule={0}
               propList={
-                Array [
+                [
                   "fill",
                   "fillRule",
                 ]
@@ -919,7 +924,7 @@ exports[`<BaseButton /> should render button with icon with right iconPosition 1
 exports[`<BaseButton /> should render button with icon without text 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -927,7 +932,7 @@ exports[`<BaseButton /> should render button with icon without text 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -965,8 +970,8 @@ exports[`<BaseButton /> should render button with icon without text 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -987,7 +992,7 @@ exports[`<BaseButton /> should render button with icon without text 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -1003,8 +1008,8 @@ exports[`<BaseButton /> should render button with icon without text 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -1013,7 +1018,7 @@ exports[`<BaseButton /> should render button with icon without text 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
@@ -1025,8 +1030,8 @@ exports[`<BaseButton /> should render button with icon without text 1`] = `
         display="flex"
         justifyContent="center"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "justifyContent": "center",
@@ -1048,15 +1053,15 @@ exports[`<BaseButton /> should render button with icon without text 1`] = `
           minX={0}
           minY={0}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "borderWidth": 0,
               },
-              Array [
-                Object {},
+              [
+                {},
               ],
-              Object {
+              {
                 "flex": 0,
                 "height": 20,
                 "width": 20,
@@ -1070,7 +1075,7 @@ exports[`<BaseButton /> should render button with icon without text 1`] = `
           <RNSVGGroup
             fill={null}
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
@@ -1081,7 +1086,7 @@ exports[`<BaseButton /> should render button with icon without text 1`] = `
               fill={4294967295}
               fillRule={0}
               propList={
-                Array [
+                [
                   "fill",
                   "fillRule",
                 ]
@@ -1098,7 +1103,7 @@ exports[`<BaseButton /> should render button with icon without text 1`] = `
 exports[`<BaseButton /> should render disabled button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1106,7 +1111,7 @@ exports[`<BaseButton /> should render disabled button 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": true,
       }
     }
@@ -1144,8 +1149,8 @@ exports[`<BaseButton /> should render disabled button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(216, 19%, 89%, 1)",
@@ -1166,7 +1171,7 @@ exports[`<BaseButton /> should render disabled button 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(216, 19%, 89%, 1)",
           "borderColor": "hsla(216, 19%, 89%, 1)",
         },
@@ -1182,8 +1187,8 @@ exports[`<BaseButton /> should render disabled button 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -1192,21 +1197,22 @@ exports[`<BaseButton /> should render disabled button 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.primary.disabled"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(216, 16%, 60%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -1238,7 +1244,7 @@ exports[`<BaseButton /> should render disabled button 1`] = `
 exports[`<BaseButton /> should render disabled information intent high contrast button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1246,7 +1252,7 @@ exports[`<BaseButton /> should render disabled information intent high contrast
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": true,
       }
     }
@@ -1284,8 +1290,8 @@ exports[`<BaseButton /> should render disabled information intent high contrast
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(193, 100%, 35%, 1)",
@@ -1306,7 +1312,7 @@ exports[`<BaseButton /> should render disabled information intent high contrast
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(193, 100%, 35%, 1)",
           "borderColor": "hsla(187, 68%, 52%, 1)",
         },
@@ -1322,8 +1328,8 @@ exports[`<BaseButton /> should render disabled information intent high contrast
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -1332,21 +1338,22 @@ exports[`<BaseButton /> should render disabled information intent high contrast
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="feedback.information.action.text.primary.disabled.highContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(187, 68%, 52%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -1378,7 +1385,7 @@ exports[`<BaseButton /> should render disabled information intent high contrast
 exports[`<BaseButton /> should render disabled information intent low contrast button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1386,7 +1393,7 @@ exports[`<BaseButton /> should render disabled information intent low contrast b
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": true,
       }
     }
@@ -1424,8 +1431,8 @@ exports[`<BaseButton /> should render disabled information intent low contrast b
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(193, 100%, 35%, 0.09)",
@@ -1446,7 +1453,7 @@ exports[`<BaseButton /> should render disabled information intent low contrast b
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(193, 100%, 35%, 0.09)",
           "borderColor": "hsla(193, 100%, 35%, 0.32)",
         },
@@ -1462,8 +1469,8 @@ exports[`<BaseButton /> should render disabled information intent low contrast b
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -1472,21 +1479,22 @@ exports[`<BaseButton /> should render disabled information intent low contrast b
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="feedback.information.action.text.primary.disabled.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(193, 100%, 35%, 0.32)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -1518,7 +1526,7 @@ exports[`<BaseButton /> should render disabled information intent low contrast b
 exports[`<BaseButton /> should render disabled negative intent high contrast button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1526,7 +1534,7 @@ exports[`<BaseButton /> should render disabled negative intent high contrast but
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": true,
       }
     }
@@ -1564,8 +1572,8 @@ exports[`<BaseButton /> should render disabled negative intent high contrast but
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(8, 73%, 47%, 1)",
@@ -1586,7 +1594,7 @@ exports[`<BaseButton /> should render disabled negative intent high contrast but
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(8, 73%, 47%, 1)",
           "borderColor": "hsla(8, 99%, 65%, 1)",
         },
@@ -1602,8 +1610,8 @@ exports[`<BaseButton /> should render disabled negative intent high contrast but
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -1612,21 +1620,22 @@ exports[`<BaseButton /> should render disabled negative intent high contrast but
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="feedback.negative.action.text.primary.disabled.highContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(8, 99%, 65%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -1658,7 +1667,7 @@ exports[`<BaseButton /> should render disabled negative intent high contrast but
 exports[`<BaseButton /> should render disabled negative intent low contrast button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1666,7 +1675,7 @@ exports[`<BaseButton /> should render disabled negative intent low contrast butt
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": true,
       }
     }
@@ -1704,8 +1713,8 @@ exports[`<BaseButton /> should render disabled negative intent low contrast butt
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
@@ -1726,7 +1735,7 @@ exports[`<BaseButton /> should render disabled negative intent low contrast butt
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
           "borderColor": "hsla(9, 91%, 56%, 0.32)",
         },
@@ -1742,8 +1751,8 @@ exports[`<BaseButton /> should render disabled negative intent low contrast butt
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -1752,21 +1761,22 @@ exports[`<BaseButton /> should render disabled negative intent low contrast butt
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="feedback.negative.action.text.primary.disabled.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(9, 91%, 56%, 0.32)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -1798,7 +1808,7 @@ exports[`<BaseButton /> should render disabled negative intent low contrast butt
 exports[`<BaseButton /> should render disabled neutral intent high contrast button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1806,7 +1816,7 @@ exports[`<BaseButton /> should render disabled neutral intent high contrast butt
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": true,
       }
     }
@@ -1844,8 +1854,8 @@ exports[`<BaseButton /> should render disabled neutral intent high contrast butt
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(216, 33%, 29%, 1)",
@@ -1866,7 +1876,7 @@ exports[`<BaseButton /> should render disabled neutral intent high contrast butt
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(216, 33%, 29%, 1)",
           "borderColor": "hsla(216, 15%, 54%, 1)",
         },
@@ -1882,8 +1892,8 @@ exports[`<BaseButton /> should render disabled neutral intent high contrast butt
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -1892,21 +1902,22 @@ exports[`<BaseButton /> should render disabled neutral intent high contrast butt
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="feedback.neutral.action.text.primary.disabled.highContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(216, 15%, 54%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -1938,7 +1949,7 @@ exports[`<BaseButton /> should render disabled neutral intent high contrast butt
 exports[`<BaseButton /> should render disabled neutral intent low contrast button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1946,7 +1957,7 @@ exports[`<BaseButton /> should render disabled neutral intent low contrast butto
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": true,
       }
     }
@@ -1984,8 +1995,8 @@ exports[`<BaseButton /> should render disabled neutral intent low contrast butto
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
@@ -2006,7 +2017,7 @@ exports[`<BaseButton /> should render disabled neutral intent low contrast butto
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
           "borderColor": "hsla(216, 15%, 54%, 0.32)",
         },
@@ -2022,8 +2033,8 @@ exports[`<BaseButton /> should render disabled neutral intent low contrast butto
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -2032,21 +2043,22 @@ exports[`<BaseButton /> should render disabled neutral intent low contrast butto
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="feedback.neutral.action.text.primary.disabled.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(216, 15%, 54%, 0.32)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -2078,7 +2090,7 @@ exports[`<BaseButton /> should render disabled neutral intent low contrast butto
 exports[`<BaseButton /> should render disabled notice intent high contrast button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2086,7 +2098,7 @@ exports[`<BaseButton /> should render disabled notice intent high contrast butto
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": true,
       }
     }
@@ -2124,8 +2136,8 @@ exports[`<BaseButton /> should render disabled notice intent high contrast butto
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(38, 97%, 38%, 1)",
@@ -2146,7 +2158,7 @@ exports[`<BaseButton /> should render disabled notice intent high contrast butto
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(38, 97%, 38%, 1)",
           "borderColor": "hsla(35, 84%, 54%, 1)",
         },
@@ -2162,8 +2174,8 @@ exports[`<BaseButton /> should render disabled notice intent high contrast butto
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -2172,21 +2184,22 @@ exports[`<BaseButton /> should render disabled notice intent high contrast butto
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="feedback.notice.action.text.primary.disabled.highContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(35, 84%, 54%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -2218,7 +2231,7 @@ exports[`<BaseButton /> should render disabled notice intent high contrast butto
 exports[`<BaseButton /> should render disabled notice intent low contrast button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2226,7 +2239,7 @@ exports[`<BaseButton /> should render disabled notice intent low contrast button
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": true,
       }
     }
@@ -2264,8 +2277,8 @@ exports[`<BaseButton /> should render disabled notice intent low contrast button
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(36, 100%, 44%, 0.09)",
@@ -2286,7 +2299,7 @@ exports[`<BaseButton /> should render disabled notice intent low contrast button
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(36, 100%, 44%, 0.09)",
           "borderColor": "hsla(36, 100%, 44%, 0.32)",
         },
@@ -2302,8 +2315,8 @@ exports[`<BaseButton /> should render disabled notice intent low contrast button
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -2312,21 +2325,22 @@ exports[`<BaseButton /> should render disabled notice intent low contrast button
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="feedback.notice.action.text.primary.disabled.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(36, 100%, 44%, 0.32)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -2358,7 +2372,7 @@ exports[`<BaseButton /> should render disabled notice intent low contrast button
 exports[`<BaseButton /> should render disabled positive intent high contrast button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2366,7 +2380,7 @@ exports[`<BaseButton /> should render disabled positive intent high contrast but
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": true,
       }
     }
@@ -2404,8 +2418,8 @@ exports[`<BaseButton /> should render disabled positive intent high contrast but
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(160, 100%, 26%, 1)",
@@ -2426,7 +2440,7 @@ exports[`<BaseButton /> should render disabled positive intent high contrast but
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(160, 100%, 26%, 1)",
           "borderColor": "hsla(149, 99%, 35%, 1)",
         },
@@ -2442,8 +2456,8 @@ exports[`<BaseButton /> should render disabled positive intent high contrast but
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -2452,21 +2466,22 @@ exports[`<BaseButton /> should render disabled positive intent high contrast but
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="feedback.positive.action.text.primary.disabled.highContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(149, 99%, 35%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -2498,7 +2513,7 @@ exports[`<BaseButton /> should render disabled positive intent high contrast but
 exports[`<BaseButton /> should render disabled positive intent low contrast button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2506,7 +2521,7 @@ exports[`<BaseButton /> should render disabled positive intent low contrast butt
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": true,
       }
     }
@@ -2544,8 +2559,8 @@ exports[`<BaseButton /> should render disabled positive intent low contrast butt
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
@@ -2566,7 +2581,7 @@ exports[`<BaseButton /> should render disabled positive intent low contrast butt
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
           "borderColor": "hsla(155, 100%, 31%, 0.32)",
         },
@@ -2582,8 +2597,8 @@ exports[`<BaseButton /> should render disabled positive intent low contrast butt
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -2592,21 +2607,22 @@ exports[`<BaseButton /> should render disabled positive intent low contrast butt
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="feedback.positive.action.text.primary.disabled.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(155, 100%, 31%, 0.32)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -2638,7 +2654,7 @@ exports[`<BaseButton /> should render disabled positive intent low contrast butt
 exports[`<BaseButton /> should render disabled secondary variant button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2646,7 +2662,7 @@ exports[`<BaseButton /> should render disabled secondary variant button 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": true,
       }
     }
@@ -2684,8 +2700,8 @@ exports[`<BaseButton /> should render disabled secondary variant button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(216, 44%, 23%, 0)",
@@ -2706,7 +2722,7 @@ exports[`<BaseButton /> should render disabled secondary variant button 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(216, 44%, 23%, 0)",
           "borderColor": "hsla(218, 19%, 81%, 1)",
         },
@@ -2722,8 +2738,8 @@ exports[`<BaseButton /> should render disabled secondary variant button 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -2732,21 +2748,22 @@ exports[`<BaseButton /> should render disabled secondary variant button 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.secondary.disabled"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(218, 19%, 81%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -2778,7 +2795,7 @@ exports[`<BaseButton /> should render disabled secondary variant button 1`] = `
 exports[`<BaseButton /> should render disabled tertiary variant button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2786,7 +2803,7 @@ exports[`<BaseButton /> should render disabled tertiary variant button 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": true,
       }
     }
@@ -2824,8 +2841,8 @@ exports[`<BaseButton /> should render disabled tertiary variant button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(0, 0%, 100%, 1)",
@@ -2846,7 +2863,7 @@ exports[`<BaseButton /> should render disabled tertiary variant button 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(0, 0%, 100%, 1)",
           "borderColor": "hsla(216, 19%, 89%, 1)",
         },
@@ -2862,8 +2879,8 @@ exports[`<BaseButton /> should render disabled tertiary variant button 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -2872,21 +2889,22 @@ exports[`<BaseButton /> should render disabled tertiary variant button 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.tertiary.disabled"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(218, 19%, 81%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -2918,7 +2936,7 @@ exports[`<BaseButton /> should render disabled tertiary variant button 1`] = `
 exports[`<BaseButton /> should render information intent high contrast button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2926,7 +2944,7 @@ exports[`<BaseButton /> should render information intent high contrast button 1`
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -2964,8 +2982,8 @@ exports[`<BaseButton /> should render information intent high contrast button 1`
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(193, 100%, 35%, 1)",
@@ -2986,7 +3004,7 @@ exports[`<BaseButton /> should render information intent high contrast button 1`
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(193, 100%, 35%, 1)",
           "borderColor": "hsla(180, 100%, 97%, 1)",
         },
@@ -3002,8 +3020,8 @@ exports[`<BaseButton /> should render information intent high contrast button 1`
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -3012,21 +3030,22 @@ exports[`<BaseButton /> should render information intent high contrast button 1`
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="feedback.information.action.text.primary.default.highContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(180, 100%, 97%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -3058,7 +3077,7 @@ exports[`<BaseButton /> should render information intent high contrast button 1`
 exports[`<BaseButton /> should render information intent low contrast button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -3066,7 +3085,7 @@ exports[`<BaseButton /> should render information intent low contrast button 1`]
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -3104,8 +3123,8 @@ exports[`<BaseButton /> should render information intent low contrast button 1`]
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(193, 100%, 35%, 0.09)",
@@ -3126,7 +3145,7 @@ exports[`<BaseButton /> should render information intent low contrast button 1`]
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(193, 100%, 35%, 0.09)",
           "borderColor": "hsla(193, 100%, 35%, 0.32)",
         },
@@ -3142,8 +3161,8 @@ exports[`<BaseButton /> should render information intent low contrast button 1`]
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -3152,21 +3171,22 @@ exports[`<BaseButton /> should render information intent low contrast button 1`]
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="feedback.information.action.text.primary.default.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(195, 100%, 31%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -3198,7 +3218,7 @@ exports[`<BaseButton /> should render information intent low contrast button 1`]
 exports[`<BaseButton /> should render large size button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -3206,7 +3226,7 @@ exports[`<BaseButton /> should render large size button 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -3244,8 +3264,8 @@ exports[`<BaseButton /> should render large size button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -3266,7 +3286,7 @@ exports[`<BaseButton /> should render large size button 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -3282,8 +3302,8 @@ exports[`<BaseButton /> should render large size button 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -3292,21 +3312,22 @@ exports[`<BaseButton /> should render large size button 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.primary.default"
         data-blade-component="base-text"
         fontSize={200}
         fontWeight="bold"
         lineHeight={300}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 0%, 100%, 1)",
               "fontFamily": "Lato",
               "fontSize": 16,
@@ -3338,7 +3359,7 @@ exports[`<BaseButton /> should render large size button 1`] = `
 exports[`<BaseButton /> should render loading button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -3346,7 +3367,7 @@ exports[`<BaseButton /> should render loading button 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": true,
       }
     }
@@ -3384,8 +3405,8 @@ exports[`<BaseButton /> should render loading button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(216, 19%, 89%, 1)",
@@ -3406,7 +3427,7 @@ exports[`<BaseButton /> should render loading button 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(216, 19%, 89%, 1)",
           "borderColor": "hsla(216, 19%, 89%, 1)",
         },
@@ -3424,8 +3445,8 @@ exports[`<BaseButton /> should render loading button 1`] = `
       position="absolute"
       right="0px"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "bottom": 0,
             "display": "flex",
@@ -3442,21 +3463,22 @@ exports[`<BaseButton /> should render loading button 1`] = `
       <View
         data-blade-component="spinner"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
         <View
           accessibilityLabel="Loading"
           accessibilityRole="progressbar"
+          accessible={true}
           alignItems="center"
           data-blade-component="base-box"
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -3468,8 +3490,8 @@ exports[`<BaseButton /> should render loading button 1`] = `
             alignSelf="center"
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignSelf": "center",
                 },
               ]
@@ -3477,9 +3499,9 @@ exports[`<BaseButton /> should render loading button 1`] = `
           >
             <View
               style={
-                Object {
-                  "transform": Array [
-                    Object {
+                {
+                  "transform": [
+                    {
                       "rotateZ": "0deg",
                     },
                   ],
@@ -3500,15 +3522,15 @@ exports[`<BaseButton /> should render loading button 1`] = `
                 minX={0}
                 minY={0}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "backgroundColor": "transparent",
                       "borderWidth": 0,
                     },
-                    Array [
-                      Object {},
+                    [
+                      {},
                     ],
-                    Object {
+                    {
                       "flex": 0,
                       "height": 20,
                       "width": 20,
@@ -3522,7 +3544,7 @@ exports[`<BaseButton /> should render loading button 1`] = `
                 <RNSVGGroup
                   fill={null}
                   propList={
-                    Array [
+                    [
                       "fill",
                     ]
                   }
@@ -3532,7 +3554,7 @@ exports[`<BaseButton /> should render loading button 1`] = `
                     fill={4284378759}
                     fillOpacity={0.2}
                     propList={
-                      Array [
+                      [
                         "fill",
                         "fillOpacity",
                       ]
@@ -3542,7 +3564,7 @@ exports[`<BaseButton /> should render loading button 1`] = `
                     d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                     fill={4284378759}
                     propList={
-                      Array [
+                      [
                         "fill",
                       ]
                     }
@@ -3551,7 +3573,7 @@ exports[`<BaseButton /> should render loading button 1`] = `
                     d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                     fill={4284378759}
                     propList={
-                      Array [
+                      [
                         "fill",
                       ]
                     }
@@ -3571,8 +3593,8 @@ exports[`<BaseButton /> should render loading button 1`] = `
       isHidden={true}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -3581,21 +3603,22 @@ exports[`<BaseButton /> should render loading button 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 0,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.primary.disabled"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(216, 16%, 60%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -3627,7 +3650,7 @@ exports[`<BaseButton /> should render loading button 1`] = `
 exports[`<BaseButton /> should render medium size button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -3635,7 +3658,7 @@ exports[`<BaseButton /> should render medium size button 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -3673,8 +3696,8 @@ exports[`<BaseButton /> should render medium size button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -3695,7 +3718,7 @@ exports[`<BaseButton /> should render medium size button 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -3711,8 +3734,8 @@ exports[`<BaseButton /> should render medium size button 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -3721,21 +3744,22 @@ exports[`<BaseButton /> should render medium size button 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.primary.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 0%, 100%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -3767,7 +3791,7 @@ exports[`<BaseButton /> should render medium size button 1`] = `
 exports[`<BaseButton /> should render negative intent high contrast button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -3775,7 +3799,7 @@ exports[`<BaseButton /> should render negative intent high contrast button 1`] =
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -3813,8 +3837,8 @@ exports[`<BaseButton /> should render negative intent high contrast button 1`] =
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(8, 73%, 47%, 1)",
@@ -3835,7 +3859,7 @@ exports[`<BaseButton /> should render negative intent high contrast button 1`] =
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(8, 73%, 47%, 1)",
           "borderColor": "hsla(0, 100%, 97%, 1)",
         },
@@ -3851,8 +3875,8 @@ exports[`<BaseButton /> should render negative intent high contrast button 1`] =
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -3861,21 +3885,22 @@ exports[`<BaseButton /> should render negative intent high contrast button 1`] =
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="feedback.negative.action.text.primary.default.highContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 100%, 97%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -3907,7 +3932,7 @@ exports[`<BaseButton /> should render negative intent high contrast button 1`] =
 exports[`<BaseButton /> should render negative intent low contrast button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -3915,7 +3940,7 @@ exports[`<BaseButton /> should render negative intent low contrast button 1`] =
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -3953,8 +3978,8 @@ exports[`<BaseButton /> should render negative intent low contrast button 1`] =
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
@@ -3975,7 +4000,7 @@ exports[`<BaseButton /> should render negative intent low contrast button 1`] =
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
           "borderColor": "hsla(9, 91%, 56%, 0.32)",
         },
@@ -3991,8 +4016,8 @@ exports[`<BaseButton /> should render negative intent low contrast button 1`] =
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -4001,21 +4026,22 @@ exports[`<BaseButton /> should render negative intent low contrast button 1`] =
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="feedback.negative.action.text.primary.default.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(8, 73%, 47%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -4047,7 +4073,7 @@ exports[`<BaseButton /> should render negative intent low contrast button 1`] =
 exports[`<BaseButton /> should render neutral intent high contrast button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -4055,7 +4081,7 @@ exports[`<BaseButton /> should render neutral intent high contrast button 1`] =
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -4093,8 +4119,8 @@ exports[`<BaseButton /> should render neutral intent high contrast button 1`] =
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(216, 33%, 29%, 1)",
@@ -4115,7 +4141,7 @@ exports[`<BaseButton /> should render neutral intent high contrast button 1`] =
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(216, 33%, 29%, 1)",
           "borderColor": "hsla(214, 18%, 69%, 1)",
         },
@@ -4131,8 +4157,8 @@ exports[`<BaseButton /> should render neutral intent high contrast button 1`] =
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -4141,21 +4167,22 @@ exports[`<BaseButton /> should render neutral intent high contrast button 1`] =
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="feedback.neutral.action.text.primary.default.highContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(220, 27%, 98%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -4187,7 +4214,7 @@ exports[`<BaseButton /> should render neutral intent high contrast button 1`] =
 exports[`<BaseButton /> should render neutral intent low contrast button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -4195,7 +4222,7 @@ exports[`<BaseButton /> should render neutral intent low contrast button 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -4233,8 +4260,8 @@ exports[`<BaseButton /> should render neutral intent low contrast button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
@@ -4255,7 +4282,7 @@ exports[`<BaseButton /> should render neutral intent low contrast button 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
           "borderColor": "hsla(216, 15%, 54%, 0.32)",
         },
@@ -4271,8 +4298,8 @@ exports[`<BaseButton /> should render neutral intent low contrast button 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -4281,21 +4308,22 @@ exports[`<BaseButton /> should render neutral intent low contrast button 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="feedback.neutral.action.text.primary.default.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(216, 27%, 36%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -4327,7 +4355,7 @@ exports[`<BaseButton /> should render neutral intent low contrast button 1`] = `
 exports[`<BaseButton /> should render notice intent high contrast button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -4335,7 +4363,7 @@ exports[`<BaseButton /> should render notice intent high contrast button 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -4373,8 +4401,8 @@ exports[`<BaseButton /> should render notice intent high contrast button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(38, 97%, 38%, 1)",
@@ -4395,7 +4423,7 @@ exports[`<BaseButton /> should render notice intent high contrast button 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(38, 97%, 38%, 1)",
           "borderColor": "hsla(32, 100%, 94%, 1)",
         },
@@ -4411,8 +4439,8 @@ exports[`<BaseButton /> should render notice intent high contrast button 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -4421,21 +4449,22 @@ exports[`<BaseButton /> should render notice intent high contrast button 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="feedback.notice.action.text.primary.default.highContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(32, 100%, 94%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -4467,7 +4496,7 @@ exports[`<BaseButton /> should render notice intent high contrast button 1`] = `
 exports[`<BaseButton /> should render notice intent low contrast button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -4475,7 +4504,7 @@ exports[`<BaseButton /> should render notice intent low contrast button 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -4513,8 +4542,8 @@ exports[`<BaseButton /> should render notice intent low contrast button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(36, 100%, 44%, 0.09)",
@@ -4535,7 +4564,7 @@ exports[`<BaseButton /> should render notice intent low contrast button 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(36, 100%, 44%, 0.09)",
           "borderColor": "hsla(36, 100%, 44%, 0.32)",
         },
@@ -4551,8 +4580,8 @@ exports[`<BaseButton /> should render notice intent low contrast button 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -4561,21 +4590,22 @@ exports[`<BaseButton /> should render notice intent low contrast button 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="feedback.notice.action.text.primary.default.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(38, 97%, 38%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -4607,7 +4637,7 @@ exports[`<BaseButton /> should render notice intent low contrast button 1`] = `
 exports[`<BaseButton /> should render positive intent high contrast button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -4615,7 +4645,7 @@ exports[`<BaseButton /> should render positive intent high contrast button 1`] =
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -4653,8 +4683,8 @@ exports[`<BaseButton /> should render positive intent high contrast button 1`] =
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(160, 100%, 26%, 1)",
@@ -4675,7 +4705,7 @@ exports[`<BaseButton /> should render positive intent high contrast button 1`] =
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(160, 100%, 26%, 1)",
           "borderColor": "hsla(107, 100%, 96%, 1)",
         },
@@ -4691,8 +4721,8 @@ exports[`<BaseButton /> should render positive intent high contrast button 1`] =
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -4701,21 +4731,22 @@ exports[`<BaseButton /> should render positive intent high contrast button 1`] =
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="feedback.positive.action.text.primary.default.highContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(107, 100%, 96%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -4747,7 +4778,7 @@ exports[`<BaseButton /> should render positive intent high contrast button 1`] =
 exports[`<BaseButton /> should render positive intent low contrast button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -4755,7 +4786,7 @@ exports[`<BaseButton /> should render positive intent low contrast button 1`] =
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -4793,8 +4824,8 @@ exports[`<BaseButton /> should render positive intent low contrast button 1`] =
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
@@ -4815,7 +4846,7 @@ exports[`<BaseButton /> should render positive intent low contrast button 1`] =
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
           "borderColor": "hsla(155, 100%, 31%, 0.32)",
         },
@@ -4831,8 +4862,8 @@ exports[`<BaseButton /> should render positive intent low contrast button 1`] =
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -4841,21 +4872,22 @@ exports[`<BaseButton /> should render positive intent low contrast button 1`] =
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="feedback.positive.action.text.primary.default.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(160, 100%, 26%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -4887,7 +4919,7 @@ exports[`<BaseButton /> should render positive intent low contrast button 1`] =
 exports[`<BaseButton /> should render secondary variant button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -4895,7 +4927,7 @@ exports[`<BaseButton /> should render secondary variant button 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -4933,8 +4965,8 @@ exports[`<BaseButton /> should render secondary variant button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 0)",
@@ -4955,7 +4987,7 @@ exports[`<BaseButton /> should render secondary variant button 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 0)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -4971,8 +5003,8 @@ exports[`<BaseButton /> should render secondary variant button 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -4981,21 +5013,22 @@ exports[`<BaseButton /> should render secondary variant button 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.secondary.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(218, 89%, 51%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -5027,7 +5060,7 @@ exports[`<BaseButton /> should render secondary variant button 1`] = `
 exports[`<BaseButton /> should render small size button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -5035,7 +5068,7 @@ exports[`<BaseButton /> should render small size button 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -5073,8 +5106,8 @@ exports[`<BaseButton /> should render small size button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -5095,7 +5128,7 @@ exports[`<BaseButton /> should render small size button 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -5111,8 +5144,8 @@ exports[`<BaseButton /> should render small size button 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -5121,21 +5154,22 @@ exports[`<BaseButton /> should render small size button 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.primary.default"
         data-blade-component="base-text"
         fontSize={75}
         fontWeight="bold"
         lineHeight={50}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 0%, 100%, 1)",
               "fontFamily": "Lato",
               "fontSize": 12,
@@ -5167,7 +5201,7 @@ exports[`<BaseButton /> should render small size button 1`] = `
 exports[`<BaseButton /> should render tertiary variant button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -5175,7 +5209,7 @@ exports[`<BaseButton /> should render tertiary variant button 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -5213,8 +5247,8 @@ exports[`<BaseButton /> should render tertiary variant button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(0, 0%, 100%, 1)",
@@ -5235,7 +5269,7 @@ exports[`<BaseButton /> should render tertiary variant button 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(0, 0%, 100%, 1)",
           "borderColor": "hsla(216, 19%, 89%, 1)",
         },
@@ -5251,8 +5285,8 @@ exports[`<BaseButton /> should render tertiary variant button 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -5261,21 +5295,22 @@ exports[`<BaseButton /> should render tertiary variant button 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.tertiary.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(216, 33%, 29%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -5307,7 +5342,7 @@ exports[`<BaseButton /> should render tertiary variant button 1`] = `
 exports[`<BaseButton /> should render xsmall size button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -5315,7 +5350,7 @@ exports[`<BaseButton /> should render xsmall size button 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -5353,8 +5388,8 @@ exports[`<BaseButton /> should render xsmall size button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -5375,7 +5410,7 @@ exports[`<BaseButton /> should render xsmall size button 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -5391,8 +5426,8 @@ exports[`<BaseButton /> should render xsmall size button 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -5401,21 +5436,22 @@ exports[`<BaseButton /> should render xsmall size button 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.primary.default"
         data-blade-component="base-text"
         fontSize={75}
         fontWeight="bold"
         lineHeight={50}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 0%, 100%, 1)",
               "fontFamily": "Lato",
               "fontSize": 12,
diff --git a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.ssr.test.tsx.snap b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.ssr.test.tsx.snap
index 08948846ca8..fc673ddb70c 100644
--- a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<BaseButton /> should render button with icon with left iconPosition 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><button type=\\"button\\" data-blade-component=\\"button\\" role=\\"button\\" class=\\"StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 dOlUqh\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 kkGTK NIPoA\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx eqKXGg\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"16px\\" viewBox=\\"0 0 24 24\\" width=\\"16px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M3 3C1.34315 3 0 4.34315 0 6V18C0 19.6569 1.34314 21 3 21H21C22.6569 21 24 19.6569 24 18V6C24 4.34315 22.6569 3 21 3H3ZM22 9V6C22 5.44771 21.5523 5 21 5H3C2.44772 5 2 5.44772 2 6V9H22ZM2 11H22V18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18V11Z\\" clip-rule=\\"evenodd\\" fill=\\"hsla(0, 0%, 100%, 1)\\" fill-rule=\\"evenodd\\" data-blade-component=\\"svg-path\\"></path></svg></div><div class=\\"StyledBaseText-dVBfTO brGLEM\\" data-blade-component=\\"base-text\\">Pay Now</div></div></button></div>"`;
+exports[`<BaseButton /> should render button with icon with left iconPosition 1`] = `"<div id="root" data-reactroot=""><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 dOlUqh"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 kkGTK NIPoA"><div data-blade-component="base-box" class="BaseBox-bmPWx eqKXGg"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M3 3C1.34315 3 0 4.34315 0 6V18C0 19.6569 1.34314 21 3 21H21C22.6569 21 24 19.6569 24 18V6C24 4.34315 22.6569 3 21 3H3ZM22 9V6C22 5.44771 21.5523 5 21 5H3C2.44772 5 2 5.44772 2 6V9H22ZM2 11H22V18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18V11Z" clip-rule="evenodd" fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><div class="StyledBaseText-dVBfTO brGLEM" data-blade-component="base-text">Pay Now</div></div></button></div>"`;
 
 exports[`<BaseButton /> should render button with icon with left iconPosition 2`] = `
 <div
diff --git a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap
index 43cb0fe314c..4e660f2c009 100644
--- a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap
+++ b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Button /> should render button with default properties 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,7 +11,7 @@ exports[`<Button /> should render button with default properties 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -49,8 +49,8 @@ exports[`<Button /> should render button with default properties 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -71,7 +71,7 @@ exports[`<Button /> should render button with default properties 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -87,8 +87,8 @@ exports[`<Button /> should render button with default properties 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -97,21 +97,22 @@ exports[`<Button /> should render button with default properties 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.primary.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 0%, 100%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -143,7 +144,7 @@ exports[`<Button /> should render button with default properties 1`] = `
 exports[`<Button /> should render button with full width 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -151,7 +152,7 @@ exports[`<Button /> should render button with full width 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -189,8 +190,8 @@ exports[`<Button /> should render button with full width 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -211,7 +212,7 @@ exports[`<Button /> should render button with full width 1`] = `
           "textDecorationStyle": "solid",
           "width": "100%",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -227,8 +228,8 @@ exports[`<Button /> should render button with full width 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -237,21 +238,22 @@ exports[`<Button /> should render button with full width 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.primary.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 0%, 100%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -283,7 +285,7 @@ exports[`<Button /> should render button with full width 1`] = `
 exports[`<Button /> should render button with icon with default iconPosition 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -291,7 +293,7 @@ exports[`<Button /> should render button with icon with default iconPosition 1`]
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -329,8 +331,8 @@ exports[`<Button /> should render button with icon with default iconPosition 1`]
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -351,7 +353,7 @@ exports[`<Button /> should render button with icon with default iconPosition 1`]
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -367,8 +369,8 @@ exports[`<Button /> should render button with icon with default iconPosition 1`]
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -377,7 +379,7 @@ exports[`<Button /> should render button with icon with default iconPosition 1`]
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
@@ -389,8 +391,8 @@ exports[`<Button /> should render button with icon with default iconPosition 1`]
         display="flex"
         justifyContent="center"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "justifyContent": "center",
@@ -413,15 +415,15 @@ exports[`<Button /> should render button with icon with default iconPosition 1`]
           minX={0}
           minY={0}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "borderWidth": 0,
               },
-              Array [
-                Object {},
+              [
+                {},
               ],
-              Object {
+              {
                 "flex": 0,
                 "height": 16,
                 "width": 16,
@@ -435,7 +437,7 @@ exports[`<Button /> should render button with icon with default iconPosition 1`]
           <RNSVGGroup
             fill={null}
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
@@ -446,7 +448,7 @@ exports[`<Button /> should render button with icon with default iconPosition 1`]
               fill={4294967295}
               fillRule={0}
               propList={
-                Array [
+                [
                   "fill",
                   "fillRule",
                 ]
@@ -456,14 +458,15 @@ exports[`<Button /> should render button with icon with default iconPosition 1`]
         </RNSVGSvgView>
       </View>
       <Text
+        accessible={true}
         color="action.text.primary.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 0%, 100%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -495,7 +498,7 @@ exports[`<Button /> should render button with icon with default iconPosition 1`]
 exports[`<Button /> should render button with icon with right iconPosition 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -503,7 +506,7 @@ exports[`<Button /> should render button with icon with right iconPosition 1`] =
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -541,8 +544,8 @@ exports[`<Button /> should render button with icon with right iconPosition 1`] =
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -563,7 +566,7 @@ exports[`<Button /> should render button with icon with right iconPosition 1`] =
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -579,8 +582,8 @@ exports[`<Button /> should render button with icon with right iconPosition 1`] =
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -589,21 +592,22 @@ exports[`<Button /> should render button with icon with right iconPosition 1`] =
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.primary.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 0%, 100%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -633,8 +637,8 @@ exports[`<Button /> should render button with icon with right iconPosition 1`] =
         display="flex"
         justifyContent="center"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "justifyContent": "center",
@@ -657,15 +661,15 @@ exports[`<Button /> should render button with icon with right iconPosition 1`] =
           minX={0}
           minY={0}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "borderWidth": 0,
               },
-              Array [
-                Object {},
+              [
+                {},
               ],
-              Object {
+              {
                 "flex": 0,
                 "height": 16,
                 "width": 16,
@@ -679,7 +683,7 @@ exports[`<Button /> should render button with icon with right iconPosition 1`] =
           <RNSVGGroup
             fill={null}
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
@@ -690,7 +694,7 @@ exports[`<Button /> should render button with icon with right iconPosition 1`] =
               fill={4294967295}
               fillRule={0}
               propList={
-                Array [
+                [
                   "fill",
                   "fillRule",
                 ]
@@ -707,7 +711,7 @@ exports[`<Button /> should render button with icon with right iconPosition 1`] =
 exports[`<Button /> should render disabled button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -715,7 +719,7 @@ exports[`<Button /> should render disabled button 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": true,
       }
     }
@@ -753,8 +757,8 @@ exports[`<Button /> should render disabled button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(216, 19%, 89%, 1)",
@@ -775,7 +779,7 @@ exports[`<Button /> should render disabled button 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(216, 19%, 89%, 1)",
           "borderColor": "hsla(216, 19%, 89%, 1)",
         },
@@ -791,8 +795,8 @@ exports[`<Button /> should render disabled button 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -801,21 +805,22 @@ exports[`<Button /> should render disabled button 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.primary.disabled"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(216, 16%, 60%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -847,7 +852,7 @@ exports[`<Button /> should render disabled button 1`] = `
 exports[`<Button /> should render disabled secondary variant button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -855,7 +860,7 @@ exports[`<Button /> should render disabled secondary variant button 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": true,
       }
     }
@@ -893,8 +898,8 @@ exports[`<Button /> should render disabled secondary variant button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(216, 44%, 23%, 0)",
@@ -915,7 +920,7 @@ exports[`<Button /> should render disabled secondary variant button 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(216, 44%, 23%, 0)",
           "borderColor": "hsla(218, 19%, 81%, 1)",
         },
@@ -931,8 +936,8 @@ exports[`<Button /> should render disabled secondary variant button 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -941,21 +946,22 @@ exports[`<Button /> should render disabled secondary variant button 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.secondary.disabled"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(218, 19%, 81%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -987,7 +993,7 @@ exports[`<Button /> should render disabled secondary variant button 1`] = `
 exports[`<Button /> should render disabled tertiary variant button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -995,7 +1001,7 @@ exports[`<Button /> should render disabled tertiary variant button 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": true,
       }
     }
@@ -1033,8 +1039,8 @@ exports[`<Button /> should render disabled tertiary variant button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(0, 0%, 100%, 1)",
@@ -1055,7 +1061,7 @@ exports[`<Button /> should render disabled tertiary variant button 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(0, 0%, 100%, 1)",
           "borderColor": "hsla(216, 19%, 89%, 1)",
         },
@@ -1071,8 +1077,8 @@ exports[`<Button /> should render disabled tertiary variant button 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -1081,21 +1087,22 @@ exports[`<Button /> should render disabled tertiary variant button 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.tertiary.disabled"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(218, 19%, 81%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -1127,7 +1134,7 @@ exports[`<Button /> should render disabled tertiary variant button 1`] = `
 exports[`<Button /> should render large size button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1135,7 +1142,7 @@ exports[`<Button /> should render large size button 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -1173,8 +1180,8 @@ exports[`<Button /> should render large size button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -1195,7 +1202,7 @@ exports[`<Button /> should render large size button 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -1211,8 +1218,8 @@ exports[`<Button /> should render large size button 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -1221,21 +1228,22 @@ exports[`<Button /> should render large size button 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.primary.default"
         data-blade-component="base-text"
         fontSize={200}
         fontWeight="bold"
         lineHeight={300}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 0%, 100%, 1)",
               "fontFamily": "Lato",
               "fontSize": 16,
@@ -1267,7 +1275,7 @@ exports[`<Button /> should render large size button 1`] = `
 exports[`<Button /> should render medium size button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1275,7 +1283,7 @@ exports[`<Button /> should render medium size button 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -1313,8 +1321,8 @@ exports[`<Button /> should render medium size button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -1335,7 +1343,7 @@ exports[`<Button /> should render medium size button 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -1351,8 +1359,8 @@ exports[`<Button /> should render medium size button 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -1361,21 +1369,22 @@ exports[`<Button /> should render medium size button 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.primary.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 0%, 100%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -1407,7 +1416,7 @@ exports[`<Button /> should render medium size button 1`] = `
 exports[`<Button /> should render secondary variant button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1415,7 +1424,7 @@ exports[`<Button /> should render secondary variant button 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -1453,8 +1462,8 @@ exports[`<Button /> should render secondary variant button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 0)",
@@ -1475,7 +1484,7 @@ exports[`<Button /> should render secondary variant button 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 0)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -1491,8 +1500,8 @@ exports[`<Button /> should render secondary variant button 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -1501,21 +1510,22 @@ exports[`<Button /> should render secondary variant button 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.secondary.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(218, 89%, 51%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -1547,7 +1557,7 @@ exports[`<Button /> should render secondary variant button 1`] = `
 exports[`<Button /> should render small size button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1555,7 +1565,7 @@ exports[`<Button /> should render small size button 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -1593,8 +1603,8 @@ exports[`<Button /> should render small size button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -1615,7 +1625,7 @@ exports[`<Button /> should render small size button 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -1631,8 +1641,8 @@ exports[`<Button /> should render small size button 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -1641,21 +1651,22 @@ exports[`<Button /> should render small size button 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.primary.default"
         data-blade-component="base-text"
         fontSize={75}
         fontWeight="bold"
         lineHeight={50}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 0%, 100%, 1)",
               "fontFamily": "Lato",
               "fontSize": 12,
@@ -1687,7 +1698,7 @@ exports[`<Button /> should render small size button 1`] = `
 exports[`<Button /> should render tertiary variant button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1695,7 +1706,7 @@ exports[`<Button /> should render tertiary variant button 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -1733,8 +1744,8 @@ exports[`<Button /> should render tertiary variant button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(0, 0%, 100%, 1)",
@@ -1755,7 +1766,7 @@ exports[`<Button /> should render tertiary variant button 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(0, 0%, 100%, 1)",
           "borderColor": "hsla(216, 19%, 89%, 1)",
         },
@@ -1771,8 +1782,8 @@ exports[`<Button /> should render tertiary variant button 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -1781,21 +1792,22 @@ exports[`<Button /> should render tertiary variant button 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.tertiary.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(216, 33%, 29%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -1827,7 +1839,7 @@ exports[`<Button /> should render tertiary variant button 1`] = `
 exports[`<Button /> should render xsmall size button 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1835,7 +1847,7 @@ exports[`<Button /> should render xsmall size button 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -1873,8 +1885,8 @@ exports[`<Button /> should render xsmall size button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -1895,7 +1907,7 @@ exports[`<Button /> should render xsmall size button 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -1911,8 +1923,8 @@ exports[`<Button /> should render xsmall size button 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -1921,21 +1933,22 @@ exports[`<Button /> should render xsmall size button 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.primary.default"
         data-blade-component="base-text"
         fontSize={75}
         fontWeight="bold"
         lineHeight={50}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 0%, 100%, 1)",
               "fontFamily": "Lato",
               "fontSize": 12,
diff --git a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.ssr.test.tsx.snap b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.ssr.test.tsx.snap
index 672c6cadead..64d16ca3574 100644
--- a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Button /> should render button as anchor tag 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><a href=\\"https://youtu.be/iPaBUhIsslA\\" target=\\"_blank\\" rel=\\"noreferrer noopener\\" type=\\"button\\" data-blade-component=\\"button\\" role=\\"link\\" class=\\"StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 dOlUqh\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 kkGTK NIPoA\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx eqKXGg\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"16px\\" viewBox=\\"0 0 24 24\\" width=\\"16px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M3 3C1.34315 3 0 4.34315 0 6V18C0 19.6569 1.34314 21 3 21H21C22.6569 21 24 19.6569 24 18V6C24 4.34315 22.6569 3 21 3H3ZM22 9V6C22 5.44771 21.5523 5 21 5H3C2.44772 5 2 5.44772 2 6V9H22ZM2 11H22V18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18V11Z\\" clip-rule=\\"evenodd\\" fill=\\"hsla(0, 0%, 100%, 1)\\" fill-rule=\\"evenodd\\" data-blade-component=\\"svg-path\\"></path></svg></div><div class=\\"StyledBaseText-dVBfTO brGLEM\\" data-blade-component=\\"base-text\\">Pay Now</div></div></a></div>"`;
+exports[`<Button /> should render button as anchor tag 1`] = `"<div id="root" data-reactroot=""><a href="https://youtu.be/iPaBUhIsslA" target="_blank" rel="noreferrer noopener" type="button" data-blade-component="button" role="link" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 dOlUqh"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 kkGTK NIPoA"><div data-blade-component="base-box" class="BaseBox-bmPWx eqKXGg"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M3 3C1.34315 3 0 4.34315 0 6V18C0 19.6569 1.34314 21 3 21H21C22.6569 21 24 19.6569 24 18V6C24 4.34315 22.6569 3 21 3H3ZM22 9V6C22 5.44771 21.5523 5 21 5H3C2.44772 5 2 5.44772 2 6V9H22ZM2 11H22V18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18V11Z" clip-rule="evenodd" fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><div class="StyledBaseText-dVBfTO brGLEM" data-blade-component="base-text">Pay Now</div></div></a></div>"`;
 
 exports[`<Button /> should render button as anchor tag 2`] = `
 <div
@@ -53,7 +53,7 @@ exports[`<Button /> should render button as anchor tag 2`] = `
 </div>
 `;
 
-exports[`<Button /> should render button with icon with default iconPosition 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><button type=\\"button\\" data-blade-component=\\"button\\" role=\\"button\\" class=\\"StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 dOlUqh\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 kkGTK NIPoA\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx eqKXGg\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"16px\\" viewBox=\\"0 0 24 24\\" width=\\"16px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M3 3C1.34315 3 0 4.34315 0 6V18C0 19.6569 1.34314 21 3 21H21C22.6569 21 24 19.6569 24 18V6C24 4.34315 22.6569 3 21 3H3ZM22 9V6C22 5.44771 21.5523 5 21 5H3C2.44772 5 2 5.44772 2 6V9H22ZM2 11H22V18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18V11Z\\" clip-rule=\\"evenodd\\" fill=\\"hsla(0, 0%, 100%, 1)\\" fill-rule=\\"evenodd\\" data-blade-component=\\"svg-path\\"></path></svg></div><div class=\\"StyledBaseText-dVBfTO brGLEM\\" data-blade-component=\\"base-text\\">Pay Now</div></div></button></div>"`;
+exports[`<Button /> should render button with icon with default iconPosition 1`] = `"<div id="root" data-reactroot=""><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 dOlUqh"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 kkGTK NIPoA"><div data-blade-component="base-box" class="BaseBox-bmPWx eqKXGg"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M3 3C1.34315 3 0 4.34315 0 6V18C0 19.6569 1.34314 21 3 21H21C22.6569 21 24 19.6569 24 18V6C24 4.34315 22.6569 3 21 3H3ZM22 9V6C22 5.44771 21.5523 5 21 5H3C2.44772 5 2 5.44772 2 6V9H22ZM2 11H22V18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18V11Z" clip-rule="evenodd" fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><div class="StyledBaseText-dVBfTO brGLEM" data-blade-component="base-text">Pay Now</div></div></button></div>"`;
 
 exports[`<Button /> should render button with icon with default iconPosition 2`] = `
 <div
diff --git a/packages/blade/src/components/Button/IconButton/__tests__/IconButton.native.test.tsx b/packages/blade/src/components/Button/IconButton/__tests__/IconButton.native.test.tsx
index aee6861ed7a..42224ab51b2 100644
--- a/packages/blade/src/components/Button/IconButton/__tests__/IconButton.native.test.tsx
+++ b/packages/blade/src/components/Button/IconButton/__tests__/IconButton.native.test.tsx
@@ -31,10 +31,10 @@ describe('<IconButton />', () => {
   it('should have a11y label', () => {
     const noop = () => {};
     const a11yLabel = 'Close modal';
-    const { getByA11yLabel } = renderWithTheme(
+    const { getByLabelText } = renderWithTheme(
       <IconButton accessibilityLabel={a11yLabel} icon={CloseIcon} onClick={noop} />,
     );
-    const iconButton = getByA11yLabel(a11yLabel);
+    const iconButton = getByLabelText(a11yLabel);
 
     expect(iconButton).toBeTruthy();
   });
diff --git a/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.native.test.tsx.snap b/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.native.test.tsx.snap
index 153aa7f3f50..a980130cc05 100644
--- a/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.native.test.tsx.snap
+++ b/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<IconButton /> should render 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -25,8 +25,8 @@ exports[`<IconButton /> should render 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "center",
         },
       ]
@@ -46,15 +46,15 @@ exports[`<IconButton /> should render 1`] = `
       minX={0}
       minY={0}
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "transparent",
             "borderWidth": 0,
           },
-          Array [
-            Object {},
+          [
+            {},
           ],
-          Object {
+          {
             "flex": 0,
             "height": 16,
             "width": 16,
@@ -68,7 +68,7 @@ exports[`<IconButton /> should render 1`] = `
       <RNSVGGroup
         fill={null}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -77,7 +77,7 @@ exports[`<IconButton /> should render 1`] = `
           d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
           fill={4288851646}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
diff --git a/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.ssr.test.tsx.snap b/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.ssr.test.tsx.snap
index c583f0c960c..646837c0221 100644
--- a/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<IconButton /> should render 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><button type=\\"button\\" aria-label=\\"Close modal\\" data-blade-component=\\"icon-button\\" class=\\"StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 gvuEeM\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"16px\\" viewBox=\\"0 0 24 24\\" width=\\"16px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z\\" fill=\\"currentColor\\" data-blade-component=\\"svg-path\\"></path></svg></button></div>"`;
+exports[`<IconButton /> should render 1`] = `"<div id="root" data-reactroot=""><button type="button" aria-label="Close modal" data-blade-component="icon-button" class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 gvuEeM"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z" fill="currentColor" data-blade-component="svg-path"></path></svg></button></div>"`;
 
 exports[`<IconButton /> should render 2`] = `
 <div
diff --git a/packages/blade/src/components/Card/__tests__/__snapshots__/Card.native.test.tsx.snap b/packages/blade/src/components/Card/__tests__/__snapshots__/Card.native.test.tsx.snap
index 44b027ad879..adf2c2fed81 100644
--- a/packages/blade/src/components/Card/__tests__/__snapshots__/Card.native.test.tsx.snap
+++ b/packages/blade/src/components/Card/__tests__/__snapshots__/Card.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Card /> should render a Card with Footer 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,8 +11,8 @@ exports[`<Card /> should render a Card with Footer 1`] = `
   <View
     data-blade-component="card"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -21,8 +21,8 @@ exports[`<Card /> should render a Card with Footer 1`] = `
       data-blade-component="base-box"
       elevation="lowRaised"
       style={
-        Array [
-          Object {
+        [
+          {
             "borderRadius": 4,
             "paddingBottom": 24,
             "paddingLeft": 24,
@@ -30,18 +30,18 @@ exports[`<Card /> should render a Card with Footer 1`] = `
             "paddingTop": 24,
             "textAlign": "left",
           },
-          Object {
+          {
             "elevation": 4,
             "shadowColor": "hsla(217, 56%, 17%, 0.64)",
-            "shadowOffset": Object {
+            "shadowOffset": {
               "height": 3,
               "width": 0,
             },
             "shadowOpacity": 0.12,
             "shadowRadius": 2,
           },
-          Array [
-            Object {
+          [
+            {
               "backgroundColor": "hsla(0, 0%, 100%, 1)",
               "display": "flex",
               "flexDirection": "column",
@@ -56,12 +56,13 @@ exports[`<Card /> should render a Card with Footer 1`] = `
       <View
         data-blade-component="card-body"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
         <Text
+          accessible={true}
           color="surface.text.normal.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -70,8 +71,8 @@ exports[`<Card /> should render a Card with Footer 1`] = `
           fontWeight="regular"
           lineHeight={100}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(217, 56%, 17%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 14,
@@ -97,8 +98,8 @@ exports[`<Card /> should render a Card with Footer 1`] = `
       <View
         data-blade-component="card-footer"
         style={
-          Array [
-            Object {
+          [
+            {
               "marginTop": "auto",
             },
           ]
@@ -107,8 +108,8 @@ exports[`<Card /> should render a Card with Footer 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginTop": 24,
               },
             ]
@@ -122,13 +123,13 @@ exports[`<Card /> should render a Card with Footer 1`] = `
           dividerStyle="solid"
           isDividerHorizontal={true}
           style={
-            Array [
-              Object {
+            [
+              {
                 "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
                 "borderStyle": "solid",
                 "borderWidth": 0,
               },
-              Object {
+              {
                 "borderBottomStyle": "solid",
                 "borderBottomWidth": 1,
                 "flexGrow": 1,
@@ -144,8 +145,8 @@ exports[`<Card /> should render a Card with Footer 1`] = `
           flexDirection="column"
           justifyContent="space-between"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "stretch",
                 "display": "flex",
                 "flexDirection": "column",
@@ -158,8 +159,8 @@ exports[`<Card /> should render a Card with Footer 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "textAlign": "left",
                 },
               ]
@@ -167,6 +168,7 @@ exports[`<Card /> should render a Card with Footer 1`] = `
             textAlign="left"
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -175,8 +177,8 @@ exports[`<Card /> should render a Card with Footer 1`] = `
               fontWeight="bold"
               lineHeight={100}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 14,
@@ -199,6 +201,7 @@ exports[`<Card /> should render a Card with Footer 1`] = `
               Card Header
             </Text>
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -207,8 +210,8 @@ exports[`<Card /> should render a Card with Footer 1`] = `
               fontWeight="regular"
               lineHeight={50}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 12,
@@ -237,8 +240,8 @@ exports[`<Card /> should render a Card with Footer 1`] = `
             display="flex"
             flexDirection="row"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignSelf": "auto",
                   "display": "flex",
                   "flexDirection": "row",
@@ -252,8 +255,8 @@ exports[`<Card /> should render a Card with Footer 1`] = `
               data-blade-component="base-box"
               flexGrow={1}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "flexGrow": 1,
                   },
                 ]
@@ -262,7 +265,7 @@ exports[`<Card /> should render a Card with Footer 1`] = `
               <View
                 accessibilityRole="button"
                 accessibilityState={
-                  Object {
+                  {
                     "disabled": false,
                   }
                 }
@@ -300,8 +303,8 @@ exports[`<Card /> should render a Card with Footer 1`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "alignItems": "center",
                       "alignSelf": "center",
                       "backgroundColor": "hsla(218, 89%, 51%, 0)",
@@ -322,7 +325,7 @@ exports[`<Card /> should render a Card with Footer 1`] = `
                       "textDecorationStyle": "solid",
                       "width": "100%",
                     },
-                    Object {
+                    {
                       "backgroundColor": "hsla(218, 89%, 51%, 0)",
                       "borderColor": "hsla(218, 89%, 51%, 1)",
                     },
@@ -338,8 +341,8 @@ exports[`<Card /> should render a Card with Footer 1`] = `
                   isHidden={false}
                   justifyContent="center"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "alignItems": "center",
                         "display": "flex",
                         "flexBasis": 0,
@@ -348,21 +351,22 @@ exports[`<Card /> should render a Card with Footer 1`] = `
                         "flexShrink": 1,
                         "justifyContent": "center",
                       },
-                      Object {
+                      {
                         "opacity": 1,
                       },
                     ]
                   }
                 >
                   <Text
+                    accessible={true}
                     color="action.text.secondary.default"
                     data-blade-component="base-text"
                     fontSize={100}
                     fontWeight="bold"
                     lineHeight={100}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "color": "hsla(218, 89%, 51%, 1)",
                           "fontFamily": "Lato",
                           "fontSize": 14,
@@ -392,8 +396,8 @@ exports[`<Card /> should render a Card with Footer 1`] = `
             <View
               data-blade-component="base-box"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "marginLeft": 16,
                   },
                 ]
@@ -403,8 +407,8 @@ exports[`<Card /> should render a Card with Footer 1`] = `
               data-blade-component="base-box"
               flexGrow={1}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "flexGrow": 1,
                   },
                 ]
@@ -413,7 +417,7 @@ exports[`<Card /> should render a Card with Footer 1`] = `
               <View
                 accessibilityRole="button"
                 accessibilityState={
-                  Object {
+                  {
                     "disabled": false,
                   }
                 }
@@ -451,8 +455,8 @@ exports[`<Card /> should render a Card with Footer 1`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "alignItems": "center",
                       "alignSelf": "center",
                       "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -473,7 +477,7 @@ exports[`<Card /> should render a Card with Footer 1`] = `
                       "textDecorationStyle": "solid",
                       "width": "100%",
                     },
-                    Object {
+                    {
                       "backgroundColor": "hsla(218, 89%, 51%, 1)",
                       "borderColor": "hsla(218, 89%, 51%, 1)",
                     },
@@ -489,8 +493,8 @@ exports[`<Card /> should render a Card with Footer 1`] = `
                   isHidden={false}
                   justifyContent="center"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "alignItems": "center",
                         "display": "flex",
                         "flexBasis": 0,
@@ -499,21 +503,22 @@ exports[`<Card /> should render a Card with Footer 1`] = `
                         "flexShrink": 1,
                         "justifyContent": "center",
                       },
-                      Object {
+                      {
                         "opacity": 1,
                       },
                     ]
                   }
                 >
                   <Text
+                    accessible={true}
                     color="action.text.primary.default"
                     data-blade-component="base-text"
                     fontSize={100}
                     fontWeight="bold"
                     lineHeight={100}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "color": "hsla(0, 0%, 100%, 1)",
                           "fontFamily": "Lato",
                           "fontSize": 14,
@@ -551,7 +556,7 @@ exports[`<Card /> should render a Card with Footer 1`] = `
 exports[`<Card /> should render a Card with Header 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -559,8 +564,8 @@ exports[`<Card /> should render a Card with Header 1`] = `
   <View
     data-blade-component="card"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -569,8 +574,8 @@ exports[`<Card /> should render a Card with Header 1`] = `
       data-blade-component="base-box"
       elevation="lowRaised"
       style={
-        Array [
-          Object {
+        [
+          {
             "borderRadius": 4,
             "paddingBottom": 24,
             "paddingLeft": 24,
@@ -578,18 +583,18 @@ exports[`<Card /> should render a Card with Header 1`] = `
             "paddingTop": 24,
             "textAlign": "left",
           },
-          Object {
+          {
             "elevation": 4,
             "shadowColor": "hsla(217, 56%, 17%, 0.64)",
-            "shadowOffset": Object {
+            "shadowOffset": {
               "height": 3,
               "width": 0,
             },
             "shadowOpacity": 0.12,
             "shadowRadius": 2,
           },
-          Array [
-            Object {
+          [
+            {
               "backgroundColor": "hsla(0, 0%, 100%, 1)",
               "display": "flex",
               "flexDirection": "column",
@@ -604,8 +609,8 @@ exports[`<Card /> should render a Card with Header 1`] = `
       <View
         data-blade-component="card-header"
         style={
-          Array [
-            Object {
+          [
+            {
               "marginBottom": 24,
             },
           ]
@@ -617,8 +622,8 @@ exports[`<Card /> should render a Card with Header 1`] = `
           flexDirection="row"
           justifyContent="space-between"
           style={
-            Array [
-              Object {
+            [
+              {
                 "display": "flex",
                 "flexDirection": "row",
                 "justifyContent": "space-between",
@@ -632,8 +637,8 @@ exports[`<Card /> should render a Card with Header 1`] = `
             display="flex"
             flexDirection="row"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "flex",
                   "flexBasis": 0,
                   "flexDirection": "row",
@@ -648,8 +653,8 @@ exports[`<Card /> should render a Card with Header 1`] = `
               data-blade-component="base-box"
               display="flex"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "alignSelf": "center",
                     "display": "flex",
                     "marginRight": 8,
@@ -671,15 +676,15 @@ exports[`<Card /> should render a Card with Header 1`] = `
                 minX={0}
                 minY={0}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "backgroundColor": "transparent",
                       "borderWidth": 0,
                     },
-                    Array [
-                      Object {},
+                    [
+                      {},
                     ],
-                    Object {
+                    {
                       "flex": 0,
                       "height": 24,
                       "width": 24,
@@ -693,7 +698,7 @@ exports[`<Card /> should render a Card with Header 1`] = `
                 <RNSVGGroup
                   fill={null}
                   propList={
-                    Array [
+                    [
                       "fill",
                     ]
                   }
@@ -702,7 +707,7 @@ exports[`<Card /> should render a Card with Header 1`] = `
                     d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
                     fill={4279445060}
                     propList={
-                      Array [
+                      [
                         "fill",
                       ]
                     }
@@ -711,7 +716,7 @@ exports[`<Card /> should render a Card with Header 1`] = `
                     d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
                     fill={4279445060}
                     propList={
-                      Array [
+                      [
                         "fill",
                       ]
                     }
@@ -722,7 +727,7 @@ exports[`<Card /> should render a Card with Header 1`] = `
                     fill={4279445060}
                     fillRule={0}
                     propList={
-                      Array [
+                      [
                         "fill",
                         "fillRule",
                       ]
@@ -734,8 +739,8 @@ exports[`<Card /> should render a Card with Header 1`] = `
             <View
               data-blade-component="base-box"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "marginRight": 16,
                   },
                 ]
@@ -748,8 +753,8 @@ exports[`<Card /> should render a Card with Header 1`] = `
                 flexDirection="row"
                 flexWrap="wrap"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "alignItems": "center",
                       "display": "flex",
                       "flexDirection": "row",
@@ -760,6 +765,7 @@ exports[`<Card /> should render a Card with Header 1`] = `
               >
                 <Text
                   accessibilityRole="header"
+                  accessible={true}
                   color="surface.text.normal.lowContrast"
                   data-blade-component="heading"
                   fontFamily="text"
@@ -768,8 +774,8 @@ exports[`<Card /> should render a Card with Header 1`] = `
                   fontWeight="bold"
                   lineHeight={300}
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "color": "hsla(217, 56%, 17%, 1)",
                         "fontFamily": "Lato",
                         "fontSize": 16,
@@ -794,8 +800,8 @@ exports[`<Card /> should render a Card with Header 1`] = `
                 <View
                   data-blade-component="base-box"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "marginLeft": 8,
                       },
                     ]
@@ -805,8 +811,8 @@ exports[`<Card /> should render a Card with Header 1`] = `
                     data-blade-component="counter"
                     display="flex"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "display": "flex",
                         },
                       ]
@@ -818,11 +824,11 @@ exports[`<Card /> should render a Card with Header 1`] = `
                       platform="onMobile"
                       size="medium"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
                           },
-                          Object {
+                          {
                             "alignSelf": "center",
                             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
                             "borderRadius": 9999,
@@ -841,8 +847,8 @@ exports[`<Card /> should render a Card with Header 1`] = `
                         justifyContent="center"
                         overflow="hidden"
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "alignItems": "center",
                               "display": "flex",
                               "flexDirection": "row",
@@ -857,6 +863,7 @@ exports[`<Card /> should render a Card with Header 1`] = `
                         }
                       >
                         <Text
+                          accessible={true}
                           color="feedback.text.neutral.lowContrast"
                           data-blade-component="text"
                           fontFamily="text"
@@ -866,8 +873,8 @@ exports[`<Card /> should render a Card with Header 1`] = `
                           lineHeight={50}
                           numberOfLines={1}
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "color": "hsla(216, 27%, 36%, 1)",
                                 "fontFamily": "Lato",
                                 "fontSize": 12,
@@ -897,6 +904,7 @@ exports[`<Card /> should render a Card with Header 1`] = `
                 </View>
               </View>
               <Text
+                accessible={true}
                 color="surface.text.normal.lowContrast"
                 data-blade-component="text"
                 fontFamily="text"
@@ -905,8 +913,8 @@ exports[`<Card /> should render a Card with Header 1`] = `
                 fontWeight="regular"
                 lineHeight={50}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "hsla(217, 56%, 17%, 1)",
                       "fontFamily": "Lato",
                       "fontSize": 12,
@@ -936,8 +944,8 @@ exports[`<Card /> should render a Card with Header 1`] = `
             alignSelf="center"
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignSelf": "center",
                 },
               ]
@@ -947,8 +955,8 @@ exports[`<Card /> should render a Card with Header 1`] = `
               data-blade-component="badge"
               display="flex"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "display": "flex",
                   },
                 ]
@@ -959,12 +967,12 @@ exports[`<Card /> should render a Card with Header 1`] = `
                 data-blade-component="base-box"
                 size="medium"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
                       "textAlign": "left",
                     },
-                    Object {
+                    {
                       "alignSelf": "center",
                       "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
                       "borderRadius": 9999,
@@ -983,8 +991,8 @@ exports[`<Card /> should render a Card with Header 1`] = `
                   justifyContent="center"
                   overflow="hidden"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "alignItems": "center",
                         "display": "flex",
                         "flexDirection": "row",
@@ -999,6 +1007,7 @@ exports[`<Card /> should render a Card with Header 1`] = `
                   }
                 >
                   <Text
+                    accessible={true}
                     color="feedback.text.neutral.lowContrast"
                     data-blade-component="text"
                     fontFamily="text"
@@ -1008,8 +1017,8 @@ exports[`<Card /> should render a Card with Header 1`] = `
                     lineHeight={50}
                     numberOfLines={1}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "color": "hsla(216, 27%, 36%, 1)",
                           "fontFamily": "Lato",
                           "fontSize": 12,
@@ -1044,13 +1053,13 @@ exports[`<Card /> should render a Card with Header 1`] = `
           dividerStyle="solid"
           isDividerHorizontal={true}
           style={
-            Array [
-              Object {
+            [
+              {
                 "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
                 "borderStyle": "solid",
                 "borderWidth": 0,
               },
-              Object {
+              {
                 "borderBottomStyle": "solid",
                 "borderBottomWidth": 1,
                 "flexGrow": 1,
@@ -1063,12 +1072,13 @@ exports[`<Card /> should render a Card with Header 1`] = `
       <View
         data-blade-component="card-body"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
         <Text
+          accessible={true}
           color="surface.text.normal.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -1077,8 +1087,8 @@ exports[`<Card /> should render a Card with Header 1`] = `
           fontWeight="regular"
           lineHeight={100}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(217, 56%, 17%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 14,
@@ -1109,7 +1119,7 @@ exports[`<Card /> should render a Card with Header 1`] = `
 exports[`<Card /> should render a Card without 0 padding 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1117,8 +1127,8 @@ exports[`<Card /> should render a Card without 0 padding 1`] = `
   <View
     data-blade-component="card"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -1127,8 +1137,8 @@ exports[`<Card /> should render a Card without 0 padding 1`] = `
       data-blade-component="base-box"
       elevation="lowRaised"
       style={
-        Array [
-          Object {
+        [
+          {
             "borderRadius": 4,
             "paddingBottom": 0,
             "paddingLeft": 0,
@@ -1136,18 +1146,18 @@ exports[`<Card /> should render a Card without 0 padding 1`] = `
             "paddingTop": 0,
             "textAlign": "left",
           },
-          Object {
+          {
             "elevation": 4,
             "shadowColor": "hsla(217, 56%, 17%, 0.64)",
-            "shadowOffset": Object {
+            "shadowOffset": {
               "height": 3,
               "width": 0,
             },
             "shadowOpacity": 0.12,
             "shadowRadius": 2,
           },
-          Array [
-            Object {
+          [
+            {
               "backgroundColor": "hsla(0, 0%, 100%, 1)",
               "display": "flex",
               "flexDirection": "column",
@@ -1162,8 +1172,8 @@ exports[`<Card /> should render a Card without 0 padding 1`] = `
       <View
         data-blade-component="card-body"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -1177,7 +1187,7 @@ exports[`<Card /> should render a Card without 0 padding 1`] = `
 exports[`<Card /> should render a border when elevation is \`none\` 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1185,8 +1195,8 @@ exports[`<Card /> should render a border when elevation is \`none\` 1`] = `
   <View
     data-blade-component="card"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -1195,8 +1205,8 @@ exports[`<Card /> should render a border when elevation is \`none\` 1`] = `
       data-blade-component="base-box"
       elevation="none"
       style={
-        Array [
-          Object {
+        [
+          {
             "borderRadius": 4,
             "paddingBottom": 24,
             "paddingLeft": 24,
@@ -1204,18 +1214,18 @@ exports[`<Card /> should render a border when elevation is \`none\` 1`] = `
             "paddingTop": 24,
             "textAlign": "left",
           },
-          Object {
+          {
             "elevation": 0,
             "shadowColor": "",
-            "shadowOffset": Object {
+            "shadowOffset": {
               "height": 0,
               "width": 0,
             },
             "shadowOpacity": 0,
             "shadowRadius": 0,
           },
-          Array [
-            Object {
+          [
+            {
               "backgroundColor": "hsla(0, 0%, 100%, 1)",
               "borderColor": "hsla(216, 15%, 54%, 0.18)",
               "borderStyle": "solid",
@@ -1233,12 +1243,13 @@ exports[`<Card /> should render a border when elevation is \`none\` 1`] = `
       <View
         data-blade-component="card-body"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
         <Text
+          accessible={true}
           color="surface.text.normal.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -1247,8 +1258,8 @@ exports[`<Card /> should render a border when elevation is \`none\` 1`] = `
           fontWeight="regular"
           lineHeight={100}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(217, 56%, 17%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 14,
@@ -1279,7 +1290,7 @@ exports[`<Card /> should render a border when elevation is \`none\` 1`] = `
 exports[`<Card /> should render a plain Card 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1287,8 +1298,8 @@ exports[`<Card /> should render a plain Card 1`] = `
   <View
     data-blade-component="card"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -1297,8 +1308,8 @@ exports[`<Card /> should render a plain Card 1`] = `
       data-blade-component="base-box"
       elevation="highRaised"
       style={
-        Array [
-          Object {
+        [
+          {
             "borderRadius": 4,
             "paddingBottom": 24,
             "paddingLeft": 24,
@@ -1306,18 +1317,18 @@ exports[`<Card /> should render a plain Card 1`] = `
             "paddingTop": 24,
             "textAlign": "left",
           },
-          Object {
+          {
             "elevation": 26,
             "shadowColor": "hsla(217, 56%, 17%, 0.64)",
-            "shadowOffset": Object {
+            "shadowOffset": {
               "height": 18,
               "width": 0,
             },
             "shadowOpacity": 0.2,
             "shadowRadius": 12,
           },
-          Array [
-            Object {
+          [
+            {
               "backgroundColor": "hsla(220, 27%, 98%, 1)",
               "display": "flex",
               "flexDirection": "column",
@@ -1332,12 +1343,13 @@ exports[`<Card /> should render a plain Card 1`] = `
       <View
         data-blade-component="card-body"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
         <Text
+          accessible={true}
           color="surface.text.normal.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -1346,8 +1358,8 @@ exports[`<Card /> should render a plain Card 1`] = `
           fontWeight="regular"
           lineHeight={100}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(217, 56%, 17%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 14,
diff --git a/packages/blade/src/components/Card/__tests__/__snapshots__/Card.ssr.test.tsx.snap b/packages/blade/src/components/Card/__tests__/__snapshots__/Card.ssr.test.tsx.snap
index 80d157b3754..83a29e709a9 100644
--- a/packages/blade/src/components/Card/__tests__/__snapshots__/Card.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Card/__tests__/__snapshots__/Card.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Card /> should render a Card with Header & Footer 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"card\\" class=\\"BaseBox-bmPWx\\"><div elevation=\\"lowRaised\\" data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx CardSurfaceweb__CardSurface-sc-1pgxikk-0 dXrkKy htwYNg\\"><div data-blade-component=\\"card-header\\" class=\\"BaseBox-bmPWx gvTYQa\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx cEYTaO\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx iOdcTa\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx eFvDfp\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"24px\\" viewBox=\\"0 0 24 24\\" width=\\"24px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z\\" fill=\\"hsla(217, 56%, 17%, 1)\\" data-blade-component=\\"svg-path\\"></path><path d=\\"M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z\\" fill=\\"hsla(217, 56%, 17%, 1)\\" data-blade-component=\\"svg-path\\"></path><path d=\\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z\\" clip-rule=\\"evenodd\\" fill=\\"hsla(217, 56%, 17%, 1)\\" fill-rule=\\"evenodd\\" data-blade-component=\\"svg-path\\"></path></svg></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx kFTMWM\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bdZEQS\\"><h6 class=\\"StyledBaseText-dVBfTO dFejDk\\" data-blade-component=\\"heading\\">Card Header</h6><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx ktWMhw\\"><div data-blade-component=\\"counter\\" class=\\"BaseBox-bmPWx jLCxzZ\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx StyledCounterweb__StyledCounter-sc-1itt9w6-0 lldTHu dTYmGd\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx KJLNh\\"><p class=\\"StyledBaseText-dVBfTO hlMkHt\\" data-blade-component=\\"text\\">12</p></div></div></div></div></div><p class=\\"StyledBaseText-dVBfTO eCIRwe\\" data-blade-component=\\"text\\">Card subtitle</p></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx cxaWQL\\"><div data-blade-component=\\"badge\\" class=\\"BaseBox-bmPWx jLCxzZ\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx StyledBadgeweb__StyledBadge-sc-1svn4tv-0 cRtrfR dnvyGQ\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx KJLNh\\"><p class=\\"StyledBaseText-dVBfTO fuxoMy\\" data-blade-component=\\"text\\">NEW</p></div></div></div></div></div><div data-blade-component=\\"divider\\" class=\\"BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR\\"></div></div><div data-blade-component=\\"card-body\\" class=\\"BaseBox-bmPWx\\"><p class=\\"StyledBaseText-dVBfTO eIdQFo\\" data-blade-component=\\"text\\">Plain Card</p></div><div data-blade-component=\\"card-footer\\" class=\\"BaseBox-bmPWx jWqAWn\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx ekWGYe\\"></div><div data-blade-component=\\"divider\\" class=\\"BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR\\"></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx beNNrm\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx dUEwku\\"><p class=\\"StyledBaseText-dVBfTO ldPEnv\\" data-blade-component=\\"text\\">Card Footer</p><p class=\\"StyledBaseText-dVBfTO fedBF\\" data-blade-component=\\"text\\">Card footer subtitle</p></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx cgOfrU\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx lawERa\\"><button type=\\"button\\" data-blade-component=\\"button\\" role=\\"button\\" class=\\"StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 hDfvuZ\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 kkGTK NIPoA\\"><div class=\\"StyledBaseText-dVBfTO jSaisz\\" data-blade-component=\\"base-text\\">Delete</div></div></button></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx hFfAen\\"></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx lawERa\\"><button type=\\"button\\" data-blade-component=\\"button\\" role=\\"button\\" class=\\"StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 fcmfVa\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 kkGTK NIPoA\\"><div class=\\"StyledBaseText-dVBfTO brGLEM\\" data-blade-component=\\"base-text\\">Save</div></div></button></div></div></div></div></div></div></div>"`;
+exports[`<Card /> should render a Card with Header & Footer 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="card" class="BaseBox-bmPWx"><div elevation="lowRaised" data-blade-component="base-box" class="BaseBox-bmPWx CardSurfaceweb__CardSurface-sc-1pgxikk-0 dXrkKy htwYNg"><div data-blade-component="card-header" class="BaseBox-bmPWx gvTYQa"><div data-blade-component="base-box" class="BaseBox-bmPWx cEYTaO"><div data-blade-component="base-box" class="BaseBox-bmPWx iOdcTa"><div data-blade-component="base-box" class="BaseBox-bmPWx eFvDfp"><svg aria-hidden="true" data-blade-component="icon" height="24px" viewBox="0 0 24 24" width="24px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(217, 56%, 17%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(217, 56%, 17%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(217, 56%, 17%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx kFTMWM"><div data-blade-component="base-box" class="BaseBox-bmPWx bdZEQS"><h6 class="StyledBaseText-dVBfTO dFejDk" data-blade-component="heading">Card Header</h6><div data-blade-component="base-box" class="BaseBox-bmPWx ktWMhw"><div data-blade-component="counter" class="BaseBox-bmPWx jLCxzZ"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledCounterweb__StyledCounter-sc-1itt9w6-0 lldTHu dTYmGd"><div data-blade-component="base-box" class="BaseBox-bmPWx KJLNh"><p class="StyledBaseText-dVBfTO hlMkHt" data-blade-component="text">12</p></div></div></div></div></div><p class="StyledBaseText-dVBfTO eCIRwe" data-blade-component="text">Card subtitle</p></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx cxaWQL"><div data-blade-component="badge" class="BaseBox-bmPWx jLCxzZ"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledBadgeweb__StyledBadge-sc-1svn4tv-0 cRtrfR dnvyGQ"><div data-blade-component="base-box" class="BaseBox-bmPWx KJLNh"><p class="StyledBaseText-dVBfTO fuxoMy" data-blade-component="text">NEW</p></div></div></div></div></div><div data-blade-component="divider" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR"></div></div><div data-blade-component="card-body" class="BaseBox-bmPWx"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">Plain Card</p></div><div data-blade-component="card-footer" class="BaseBox-bmPWx jWqAWn"><div data-blade-component="base-box" class="BaseBox-bmPWx ekWGYe"></div><div data-blade-component="divider" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR"></div><div data-blade-component="base-box" class="BaseBox-bmPWx beNNrm"><div data-blade-component="base-box" class="BaseBox-bmPWx dUEwku"><p class="StyledBaseText-dVBfTO ldPEnv" data-blade-component="text">Card Footer</p><p class="StyledBaseText-dVBfTO fedBF" data-blade-component="text">Card footer subtitle</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx cgOfrU"><div data-blade-component="base-box" class="BaseBox-bmPWx lawERa"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 hDfvuZ"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 kkGTK NIPoA"><div class="StyledBaseText-dVBfTO jSaisz" data-blade-component="base-text">Delete</div></div></button></div><div data-blade-component="base-box" class="BaseBox-bmPWx hFfAen"></div><div data-blade-component="base-box" class="BaseBox-bmPWx lawERa"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 fcmfVa"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 kkGTK NIPoA"><div class="StyledBaseText-dVBfTO brGLEM" data-blade-component="base-text">Save</div></div></button></div></div></div></div></div></div></div>"`;
 
 exports[`<Card /> should render a Card with Header & Footer 2`] = `
 <div
diff --git a/packages/blade/src/components/Checkbox/__tests__/CheckboxGroup.native.test.tsx b/packages/blade/src/components/Checkbox/__tests__/CheckboxGroup.native.test.tsx
index 47475cf4fff..5a55a17f1c3 100644
--- a/packages/blade/src/components/Checkbox/__tests__/CheckboxGroup.native.test.tsx
+++ b/packages/blade/src/components/Checkbox/__tests__/CheckboxGroup.native.test.tsx
@@ -46,14 +46,14 @@ describe('<CheckboxGroup />', () => {
 
   it('should propagate isDisabled prop to child checkboxes', () => {
     const labelText = 'Select fruits';
-    const { getAllByA11yRole } = renderWithTheme(
+    const { getAllByRole } = renderWithTheme(
       <CheckboxGroup isDisabled label={labelText}>
         <Checkbox value="apple">Apple</Checkbox>
         <Checkbox value="mango">Mango</Checkbox>
         <Checkbox value="orange">Orange</Checkbox>
       </CheckboxGroup>,
     );
-    const checkboxes = getAllByA11yRole('checkbox');
+    const checkboxes = getAllByRole('checkbox');
     checkboxes.forEach((checkbox) => {
       expect(checkbox.props.accessibilityState.disabled).toBeTruthy();
     });
@@ -61,7 +61,7 @@ describe('<CheckboxGroup />', () => {
 
   it('should propagate name prop to child checkboxes', () => {
     const labelText = 'Select fruits';
-    const { getAllByA11yRole } = renderWithTheme(
+    const { getAllByRole } = renderWithTheme(
       <CheckboxGroup isDisabled label={labelText} name="fruits">
         <Checkbox value="apple">Apple</Checkbox>
         <Checkbox value="mango">Mango</Checkbox>
@@ -69,7 +69,7 @@ describe('<CheckboxGroup />', () => {
       </CheckboxGroup>,
     );
 
-    const checkboxes = getAllByA11yRole('checkbox');
+    const checkboxes = getAllByRole('checkbox');
     checkboxes.forEach((checkbox) => {
       expect(checkbox.props.name).toBe('fruits');
     });
@@ -100,7 +100,7 @@ describe('<CheckboxGroup />', () => {
     const helpText = 'Select one';
     const errorText = 'Invalid selection';
 
-    const { getAllByA11yRole, queryByText } = renderWithTheme(
+    const { getAllByRole, queryByText } = renderWithTheme(
       <CheckboxGroup
         helpText={helpText}
         errorText={errorText}
@@ -116,7 +116,7 @@ describe('<CheckboxGroup />', () => {
     expect(queryByText(helpText)).toBeFalsy();
     expect(queryByText(errorText)).toBeTruthy();
 
-    const checkboxes = getAllByA11yRole('checkbox');
+    const checkboxes = getAllByRole('checkbox');
     checkboxes.forEach((checkbox) => {
       expect(checkbox.props.accessibilityInvalid).toBeTruthy();
     });
@@ -145,7 +145,7 @@ describe('<CheckboxGroup />', () => {
   it('should work in uncontrolled mode', () => {
     const labelText = 'Select fruits';
     const fn = jest.fn();
-    const { getAllByA11yRole, getByA11yState } = renderWithTheme(
+    const { getAllByRole, getByA11yState } = renderWithTheme(
       <CheckboxGroup
         label={labelText}
         defaultValue={['apple']}
@@ -160,7 +160,7 @@ describe('<CheckboxGroup />', () => {
     const checkbox = getByA11yState({ checked: true });
     expect(checkbox.props.value).toBe('apple');
 
-    const checkboxes = getAllByA11yRole('checkbox');
+    const checkboxes = getAllByRole('checkbox');
     const apple = checkboxes.find((checkbox) => checkbox.props.value === 'apple');
     const mango = checkboxes.find((checkbox) => checkbox.props.value === 'mango');
     const orange = checkboxes.find((checkbox) => checkbox.props.value === 'orange');
@@ -201,12 +201,12 @@ describe('<CheckboxGroup />', () => {
         </>
       );
     };
-    const { getAllByA11yRole, getByA11yState, getByTestId } = renderWithTheme(<Example />);
+    const { getAllByRole, getByA11yState, getByTestId } = renderWithTheme(<Example />);
 
     const checkbox = getByA11yState({ checked: true });
     expect(checkbox.props.value).toBe('apple');
 
-    const checkboxes = getAllByA11yRole('checkbox');
+    const checkboxes = getAllByRole('checkbox');
     const apple = checkboxes.find((checkbox) => checkbox.props.value === 'apple');
     const mango = checkboxes.find((checkbox) => checkbox.props.value === 'mango');
     const orange = checkboxes.find((checkbox) => checkbox.props.value === 'orange');
diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.native.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.native.test.tsx.snap
index ccd7b475f95..3171b305454 100644
--- a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.native.test.tsx.snap
+++ b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Checkbox /> should render checkbox with label 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,8 +11,8 @@ exports[`<Checkbox /> should render checkbox with label 1`] = `
   <View
     data-blade-component="checkbox"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -21,7 +21,7 @@ exports[`<Checkbox /> should render checkbox with label 1`] = `
       accessibilityRequired={false}
       accessibilityRole="checkbox"
       accessibilityState={
-        Object {
+        {
           "checked": false,
           "disabled": false,
         }
@@ -39,8 +39,8 @@ exports[`<Checkbox /> should render checkbox with label 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "row",
             "marginBottom": 2,
@@ -54,8 +54,8 @@ exports[`<Checkbox /> should render checkbox with label 1`] = `
         display="flex"
         flexDirection="column"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "column",
             },
@@ -68,8 +68,8 @@ exports[`<Checkbox /> should render checkbox with label 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -83,8 +83,8 @@ exports[`<Checkbox /> should render checkbox with label 1`] = `
             isNegative={false}
             size="medium"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "backgroundColor": "transparent",
                   "borderColor": "hsla(214, 18%, 69%, 1)",
@@ -107,14 +107,15 @@ exports[`<Checkbox /> should render checkbox with label 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "marginLeft": 4,
                 },
               ]
             }
           />
           <Text
+            accessible={true}
             color="surface.text.subtle.lowContrast"
             data-blade-component="base-text"
             fontFamily="text"
@@ -122,8 +123,8 @@ exports[`<Checkbox /> should render checkbox with label 1`] = `
             fontWeight="regular"
             lineHeight={100}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(216, 27%, 36%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 14,
@@ -149,8 +150,8 @@ exports[`<Checkbox /> should render checkbox with label 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginLeft": 24,
               },
             ]
@@ -165,7 +166,7 @@ exports[`<Checkbox /> should render checkbox with label 1`] = `
 exports[`<Checkbox /> should set disabled state with isDisabled 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -173,8 +174,8 @@ exports[`<Checkbox /> should set disabled state with isDisabled 1`] = `
   <View
     data-blade-component="checkbox"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -183,7 +184,7 @@ exports[`<Checkbox /> should set disabled state with isDisabled 1`] = `
       accessibilityRequired={false}
       accessibilityRole="checkbox"
       accessibilityState={
-        Object {
+        {
           "checked": false,
           "disabled": true,
         }
@@ -201,8 +202,8 @@ exports[`<Checkbox /> should set disabled state with isDisabled 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "row",
             "marginBottom": 2,
@@ -216,8 +217,8 @@ exports[`<Checkbox /> should set disabled state with isDisabled 1`] = `
         display="flex"
         flexDirection="column"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "column",
             },
@@ -230,8 +231,8 @@ exports[`<Checkbox /> should set disabled state with isDisabled 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -246,8 +247,8 @@ exports[`<Checkbox /> should set disabled state with isDisabled 1`] = `
             isNegative={false}
             size="medium"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "backgroundColor": "transparent",
                   "borderColor": "hsla(216, 15%, 54%, 0.18)",
@@ -270,14 +271,15 @@ exports[`<Checkbox /> should set disabled state with isDisabled 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "marginLeft": 4,
                 },
               ]
             }
           />
           <Text
+            accessible={true}
             color="surface.text.placeholder.lowContrast"
             data-blade-component="base-text"
             fontFamily="text"
@@ -285,8 +287,8 @@ exports[`<Checkbox /> should set disabled state with isDisabled 1`] = `
             fontWeight="regular"
             lineHeight={100}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(214, 18%, 69%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 14,
@@ -312,8 +314,8 @@ exports[`<Checkbox /> should set disabled state with isDisabled 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginLeft": 24,
               },
             ]
@@ -328,7 +330,7 @@ exports[`<Checkbox /> should set disabled state with isDisabled 1`] = `
 exports[`<Checkbox /> should set error state with validationState 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -336,8 +338,8 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
   <View
     data-blade-component="checkbox"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -347,7 +349,7 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
       accessibilityRequired={false}
       accessibilityRole="checkbox"
       accessibilityState={
-        Object {
+        {
           "checked": false,
           "disabled": false,
         }
@@ -365,8 +367,8 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "row",
             "marginBottom": 2,
@@ -380,8 +382,8 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
         display="flex"
         flexDirection="column"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "column",
             },
@@ -394,8 +396,8 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -409,8 +411,8 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
             isNegative={true}
             size="medium"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
                   "borderColor": "hsla(8, 73%, 47%, 1)",
@@ -433,14 +435,15 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "marginLeft": 4,
                 },
               ]
             }
           />
           <Text
+            accessible={true}
             color="surface.text.subtle.lowContrast"
             data-blade-component="base-text"
             fontFamily="text"
@@ -448,8 +451,8 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
             fontWeight="regular"
             lineHeight={100}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(216, 27%, 36%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 14,
@@ -475,8 +478,8 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginLeft": 24,
               },
             ]
@@ -487,8 +490,8 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
     <View
       data-blade-component="base-box"
       style={
-        Array [
-          Object {
+        [
+          {
             "marginTop": 4,
           },
         ]
@@ -500,8 +503,8 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
         display="flex"
         flexDirection="row"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -523,15 +526,15 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
           minX={0}
           minY={0}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "borderWidth": 0,
               },
-              Array [
-                Object {},
+              [
+                {},
               ],
-              Object {
+              {
                 "flex": 0,
                 "height": 12,
                 "width": 12,
@@ -545,7 +548,7 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
           <RNSVGGroup
             fill={null}
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
@@ -554,7 +557,7 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
               fill={4291770400}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -563,7 +566,7 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
               fill={4291770400}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -574,7 +577,7 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
               fill={4291770400}
               fillRule={0}
               propList={
-                Array [
+                [
                   "fill",
                   "fillRule",
                 ]
@@ -585,14 +588,15 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginRight": 4,
               },
             ]
           }
         />
         <Text
+          accessible={true}
           color="feedback.text.negative.lowContrast"
           data-blade-component="base-text"
           fontFamily="text"
@@ -600,8 +604,8 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
           fontStyle="italic"
           lineHeight={50}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(8, 73%, 47%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 11,
diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.ssr.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.ssr.test.tsx.snap
index 2ece53bbae0..b6c1d67a49a 100644
--- a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Checkbox /> should render checkbox with error validationState 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"checkbox\\" class=\\"BaseBox-bmPWx\\"><label data-blade-component=\\"checkbox-label\\" class=\\"SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 bgSmPY\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx xrMLB\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fSbYvl\\"><input type=\\"checkbox\\" checked=\\"\\" role=\\"checkbox\\" aria-required=\\"false\\" aria-invalid=\\"true\\" aria-disabled=\\"false\\" aria-checked=\\"true\\" aria-errormessage=\\"checkbox-undefined-errortext-undefined\\" class=\\"SelectorInputweb__StyledInput-sc-1bnkrae-0 hJscHc\\"/><div data-blade-component=\\"checkbox-icon-wrapper\\" class=\\"CheckboxIconWrapperweb__CheckboxIconWrapper-sc-3hpze0-0 gSkEBL\\"><div style=\\"opacity:0;position:absolute;display:flex\\" class=\\"Fadeweb__AnimatedFade-sc-1h424tv-0\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"12px\\" viewBox=\\"0 0 8 8\\" width=\\"12px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z\\" clip-rule=\\"evenodd\\" fill=\\"hsla(220, 27%, 98%, 1)\\" fill-rule=\\"evenodd\\" stroke=\\"white\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"0.5\\" data-blade-component=\\"svg-path\\"></path></svg></div><div style=\\"opacity:1;position:absolute;display:flex\\" class=\\"Fadeweb__AnimatedFade-sc-1h424tv-0 jkxAgI\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"12px\\" viewBox=\\"0 0 8 8\\" width=\\"12px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M6.90237 1.76413C7.03254 1.89431 7.03254 2.10536 6.90237 2.23554L3.2357 5.90221C3.10553 6.03238 2.89447 6.03238 2.7643 5.90221L1.09763 4.23554C0.967456 4.10536 0.967456 3.89431 1.09763 3.76414C1.22781 3.63396 1.43886 3.63396 1.56904 3.76414L3 5.1951L6.43096 1.76413C6.56114 1.63396 6.77219 1.63396 6.90237 1.76413Z\\" clip-rule=\\"evenodd\\" fill=\\"hsla(220, 27%, 98%, 1)\\" fill-rule=\\"evenodd\\" stroke=\\"white\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"0.5\\" data-blade-component=\\"svg-path\\"></path></svg></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bigiAM\\"></div><div class=\\"StyledBaseText-dVBfTO ktUwvA\\" data-blade-component=\\"base-text\\">Remember password</div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx cCkEge\\"></div></div></label><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx gnjvtY\\"><span style=\\"word-break:break-all\\" data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fSbYvl\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"12px\\" viewBox=\\"0 0 24 24\\" width=\\"12px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z\\" fill=\\"hsla(8, 73%, 47%, 1)\\" data-blade-component=\\"svg-path\\"></path><path d=\\"M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z\\" fill=\\"hsla(8, 73%, 47%, 1)\\" data-blade-component=\\"svg-path\\"></path><path d=\\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z\\" clip-rule=\\"evenodd\\" fill=\\"hsla(8, 73%, 47%, 1)\\" fill-rule=\\"evenodd\\" data-blade-component=\\"svg-path\\"></path></svg><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx joUrH\\"></div><span class=\\"StyledBaseText-dVBfTO fRqtgA\\" id=\\"checkbox-undefined-errortext-undefined\\" data-blade-component=\\"base-text\\">This has to be checked</span></span></div></div></div>"`;
+exports[`<Checkbox /> should render checkbox with error validationState 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="checkbox" class="BaseBox-bmPWx"><label data-blade-component="checkbox-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 bgSmPY"><div data-blade-component="base-box" class="BaseBox-bmPWx xrMLB"><div data-blade-component="base-box" class="BaseBox-bmPWx fSbYvl"><input type="checkbox" checked="" role="checkbox" aria-required="false" aria-invalid="true" aria-disabled="false" aria-checked="true" aria-errormessage="checkbox-undefined-errortext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 hJscHc"/><div data-blade-component="checkbox-icon-wrapper" class="CheckboxIconWrapperweb__CheckboxIconWrapper-sc-3hpze0-0 gSkEBL"><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 8 8" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" clip-rule="evenodd" fill="hsla(220, 27%, 98%, 1)" fill-rule="evenodd" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" data-blade-component="svg-path"></path></svg></div><div style="opacity:1;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0 jkxAgI"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 8 8" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M6.90237 1.76413C7.03254 1.89431 7.03254 2.10536 6.90237 2.23554L3.2357 5.90221C3.10553 6.03238 2.89447 6.03238 2.7643 5.90221L1.09763 4.23554C0.967456 4.10536 0.967456 3.89431 1.09763 3.76414C1.22781 3.63396 1.43886 3.63396 1.56904 3.76414L3 5.1951L6.43096 1.76413C6.56114 1.63396 6.77219 1.63396 6.90237 1.76413Z" clip-rule="evenodd" fill="hsla(220, 27%, 98%, 1)" fill-rule="evenodd" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" data-blade-component="svg-path"></path></svg></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bigiAM"></div><div class="StyledBaseText-dVBfTO ktUwvA" data-blade-component="base-text">Remember password</div></div><div data-blade-component="base-box" class="BaseBox-bmPWx cCkEge"></div></div></label><div data-blade-component="base-box" class="BaseBox-bmPWx gnjvtY"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fSbYvl"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(8, 73%, 47%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(8, 73%, 47%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(8, 73%, 47%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx joUrH"></div><span class="StyledBaseText-dVBfTO fRqtgA" id="checkbox-undefined-errortext-undefined" data-blade-component="base-text">This has to be checked</span></span></div></div></div>"`;
 
 exports[`<Checkbox /> should render checkbox with error validationState 2`] = `
 <div
diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.native.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.native.test.tsx.snap
index 61adc80e188..199f1ff4c02 100644
--- a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.native.test.tsx.snap
+++ b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CheckboxGroup /> should render with label 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,19 +11,20 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
   <View
     data-blade-component="base-box"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabelledBy="checkbox-group-19-label-24"
+      accessible={true}
       data-blade-component="checkbox-group"
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
           },
@@ -33,8 +34,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "marginBottom": 4,
               "marginRight": 16,
             },
@@ -50,8 +51,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
           gap="spacing.0"
           maxHeight="36px"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -63,6 +64,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subdued.lowContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -72,8 +74,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
             lineHeight={50}
             numberOfLines={2}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(217, 18%, 45%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -98,8 +100,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
           <View
             data-blade-component="visually-hidden"
             style={
-              Array [
-                Object {
+              [
+                {
                   "borderColor": "black",
                   "borderStyle": "solid",
                   "borderWidth": 0,
@@ -125,6 +127,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -133,8 +136,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
               fontWeight="regular"
               lineHeight={100}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 14,
@@ -162,8 +165,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -172,8 +175,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
           display="flex"
           flexDirection="column"
           style={
-            Array [
-              Object {
+            [
+              {
                 "display": "flex",
                 "flexDirection": "column",
               },
@@ -183,8 +186,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "marginBottom": 8,
                 },
               ]
@@ -193,8 +196,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
             <View
               data-blade-component="checkbox"
               style={
-                Array [
-                  Object {},
+                [
+                  {},
                 ]
               }
             >
@@ -203,7 +206,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                 accessibilityRequired={false}
                 accessibilityRole="checkbox"
                 accessibilityState={
-                  Object {
+                  {
                     "checked": false,
                     "disabled": false,
                   }
@@ -221,8 +224,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "display": "flex",
                       "flexDirection": "row",
                       "marginBottom": 2,
@@ -237,8 +240,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                   display="flex"
                   flexDirection="column"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                         "flexDirection": "column",
                       },
@@ -251,8 +254,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                     display="flex"
                     flexDirection="row"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "display": "flex",
                           "flexDirection": "row",
@@ -267,8 +270,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                       isNegative={false}
                       size="medium"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "center",
                             "backgroundColor": "transparent",
                             "borderColor": "hsla(214, 18%, 69%, 1)",
@@ -291,14 +294,15 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                     <View
                       data-blade-component="base-box"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "marginLeft": 4,
                           },
                         ]
                       }
                     />
                     <Text
+                      accessible={true}
                       color="surface.text.subtle.lowContrast"
                       data-blade-component="base-text"
                       fontFamily="text"
@@ -306,8 +310,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                       fontWeight="regular"
                       lineHeight={100}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "hsla(216, 27%, 36%, 1)",
                             "fontFamily": "Lato",
                             "fontSize": 14,
@@ -333,8 +337,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                   <View
                     data-blade-component="base-box"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginLeft": 24,
                         },
                       ]
@@ -347,8 +351,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "marginBottom": 8,
                 },
               ]
@@ -357,8 +361,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
             <View
               data-blade-component="checkbox"
               style={
-                Array [
-                  Object {},
+                [
+                  {},
                 ]
               }
             >
@@ -367,7 +371,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                 accessibilityRequired={false}
                 accessibilityRole="checkbox"
                 accessibilityState={
-                  Object {
+                  {
                     "checked": false,
                     "disabled": false,
                   }
@@ -385,8 +389,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "display": "flex",
                       "flexDirection": "row",
                       "marginBottom": 2,
@@ -401,8 +405,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                   display="flex"
                   flexDirection="column"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                         "flexDirection": "column",
                       },
@@ -415,8 +419,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                     display="flex"
                     flexDirection="row"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "display": "flex",
                           "flexDirection": "row",
@@ -431,8 +435,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                       isNegative={false}
                       size="medium"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "center",
                             "backgroundColor": "transparent",
                             "borderColor": "hsla(214, 18%, 69%, 1)",
@@ -455,14 +459,15 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                     <View
                       data-blade-component="base-box"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "marginLeft": 4,
                           },
                         ]
                       }
                     />
                     <Text
+                      accessible={true}
                       color="surface.text.subtle.lowContrast"
                       data-blade-component="base-text"
                       fontFamily="text"
@@ -470,8 +475,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                       fontWeight="regular"
                       lineHeight={100}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "hsla(216, 27%, 36%, 1)",
                             "fontFamily": "Lato",
                             "fontSize": 14,
@@ -497,8 +502,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                   <View
                     data-blade-component="base-box"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginLeft": 24,
                         },
                       ]
@@ -511,8 +516,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "marginBottom": 0,
                 },
               ]
@@ -521,8 +526,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
             <View
               data-blade-component="checkbox"
               style={
-                Array [
-                  Object {},
+                [
+                  {},
                 ]
               }
             >
@@ -531,7 +536,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                 accessibilityRequired={false}
                 accessibilityRole="checkbox"
                 accessibilityState={
-                  Object {
+                  {
                     "checked": false,
                     "disabled": false,
                   }
@@ -549,8 +554,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "display": "flex",
                       "flexDirection": "row",
                       "marginBottom": 2,
@@ -565,8 +570,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                   display="flex"
                   flexDirection="column"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                         "flexDirection": "column",
                       },
@@ -579,8 +584,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                     display="flex"
                     flexDirection="row"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "display": "flex",
                           "flexDirection": "row",
@@ -595,8 +600,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                       isNegative={false}
                       size="medium"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "center",
                             "backgroundColor": "transparent",
                             "borderColor": "hsla(214, 18%, 69%, 1)",
@@ -619,14 +624,15 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                     <View
                       data-blade-component="base-box"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "marginLeft": 4,
                           },
                         ]
                       }
                     />
                     <Text
+                      accessible={true}
                       color="surface.text.subtle.lowContrast"
                       data-blade-component="base-text"
                       fontFamily="text"
@@ -634,8 +640,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                       fontWeight="regular"
                       lineHeight={100}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "hsla(216, 27%, 36%, 1)",
                             "fontFamily": "Lato",
                             "fontSize": 14,
@@ -661,8 +667,8 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
                   <View
                     data-blade-component="base-box"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginLeft": 24,
                         },
                       ]
@@ -682,7 +688,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
 exports[`<CheckboxGroup /> should render with label 2`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -690,19 +696,20 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
   <View
     data-blade-component="base-box"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabelledBy="checkbox-group-49-label-54"
+      accessible={true}
       data-blade-component="checkbox-group"
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
           },
@@ -712,8 +719,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "marginBottom": 4,
               "marginRight": 16,
             },
@@ -729,8 +736,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
           gap="spacing.0"
           maxHeight="36px"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -742,6 +749,7 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subdued.lowContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -751,8 +759,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
             lineHeight={50}
             numberOfLines={2}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(217, 18%, 45%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -777,8 +785,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
           <View
             data-blade-component="visually-hidden"
             style={
-              Array [
-                Object {
+              [
+                {
                   "borderColor": "black",
                   "borderStyle": "solid",
                   "borderWidth": 0,
@@ -804,6 +812,7 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -812,8 +821,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
               fontWeight="regular"
               lineHeight={100}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 14,
@@ -841,8 +850,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -851,8 +860,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
           display="flex"
           flexDirection="column"
           style={
-            Array [
-              Object {
+            [
+              {
                 "display": "flex",
                 "flexDirection": "column",
               },
@@ -862,8 +871,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "marginBottom": 8,
                 },
               ]
@@ -872,8 +881,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
             <View
               data-blade-component="checkbox"
               style={
-                Array [
-                  Object {},
+                [
+                  {},
                 ]
               }
             >
@@ -882,7 +891,7 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                 accessibilityRequired={false}
                 accessibilityRole="checkbox"
                 accessibilityState={
-                  Object {
+                  {
                     "checked": false,
                     "disabled": false,
                   }
@@ -900,8 +909,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "display": "flex",
                       "flexDirection": "row",
                       "marginBottom": 2,
@@ -916,8 +925,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                   display="flex"
                   flexDirection="column"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                         "flexDirection": "column",
                       },
@@ -930,8 +939,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                     display="flex"
                     flexDirection="row"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "display": "flex",
                           "flexDirection": "row",
@@ -946,8 +955,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                       isNegative={false}
                       size="medium"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "center",
                             "backgroundColor": "transparent",
                             "borderColor": "hsla(214, 18%, 69%, 1)",
@@ -970,14 +979,15 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                     <View
                       data-blade-component="base-box"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "marginLeft": 4,
                           },
                         ]
                       }
                     />
                     <Text
+                      accessible={true}
                       color="surface.text.subtle.lowContrast"
                       data-blade-component="base-text"
                       fontFamily="text"
@@ -985,8 +995,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                       fontWeight="regular"
                       lineHeight={100}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "hsla(216, 27%, 36%, 1)",
                             "fontFamily": "Lato",
                             "fontSize": 14,
@@ -1012,8 +1022,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                   <View
                     data-blade-component="base-box"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginLeft": 24,
                         },
                       ]
@@ -1026,8 +1036,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "marginBottom": 8,
                 },
               ]
@@ -1036,8 +1046,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
             <View
               data-blade-component="checkbox"
               style={
-                Array [
-                  Object {},
+                [
+                  {},
                 ]
               }
             >
@@ -1046,7 +1056,7 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                 accessibilityRequired={false}
                 accessibilityRole="checkbox"
                 accessibilityState={
-                  Object {
+                  {
                     "checked": false,
                     "disabled": false,
                   }
@@ -1064,8 +1074,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "display": "flex",
                       "flexDirection": "row",
                       "marginBottom": 2,
@@ -1080,8 +1090,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                   display="flex"
                   flexDirection="column"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                         "flexDirection": "column",
                       },
@@ -1094,8 +1104,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                     display="flex"
                     flexDirection="row"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "display": "flex",
                           "flexDirection": "row",
@@ -1110,8 +1120,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                       isNegative={false}
                       size="medium"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "center",
                             "backgroundColor": "transparent",
                             "borderColor": "hsla(214, 18%, 69%, 1)",
@@ -1134,14 +1144,15 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                     <View
                       data-blade-component="base-box"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "marginLeft": 4,
                           },
                         ]
                       }
                     />
                     <Text
+                      accessible={true}
                       color="surface.text.subtle.lowContrast"
                       data-blade-component="base-text"
                       fontFamily="text"
@@ -1149,8 +1160,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                       fontWeight="regular"
                       lineHeight={100}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "hsla(216, 27%, 36%, 1)",
                             "fontFamily": "Lato",
                             "fontSize": 14,
@@ -1176,8 +1187,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                   <View
                     data-blade-component="base-box"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginLeft": 24,
                         },
                       ]
@@ -1190,8 +1201,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "marginBottom": 0,
                 },
               ]
@@ -1200,8 +1211,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
             <View
               data-blade-component="checkbox"
               style={
-                Array [
-                  Object {},
+                [
+                  {},
                 ]
               }
             >
@@ -1210,7 +1221,7 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                 accessibilityRequired={false}
                 accessibilityRole="checkbox"
                 accessibilityState={
-                  Object {
+                  {
                     "checked": false,
                     "disabled": false,
                   }
@@ -1228,8 +1239,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "display": "flex",
                       "flexDirection": "row",
                       "marginBottom": 2,
@@ -1244,8 +1255,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                   display="flex"
                   flexDirection="column"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                         "flexDirection": "column",
                       },
@@ -1258,8 +1269,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                     display="flex"
                     flexDirection="row"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "display": "flex",
                           "flexDirection": "row",
@@ -1274,8 +1285,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                       isNegative={false}
                       size="medium"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "center",
                             "backgroundColor": "transparent",
                             "borderColor": "hsla(214, 18%, 69%, 1)",
@@ -1298,14 +1309,15 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                     <View
                       data-blade-component="base-box"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "marginLeft": 4,
                           },
                         ]
                       }
                     />
                     <Text
+                      accessible={true}
                       color="surface.text.subtle.lowContrast"
                       data-blade-component="base-text"
                       fontFamily="text"
@@ -1313,8 +1325,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                       fontWeight="regular"
                       lineHeight={100}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "hsla(216, 27%, 36%, 1)",
                             "fontFamily": "Lato",
                             "fontSize": 14,
@@ -1340,8 +1352,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
                   <View
                     data-blade-component="base-box"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginLeft": 24,
                         },
                       ]
@@ -1355,8 +1367,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginTop": 4,
               },
             ]
@@ -1368,8 +1380,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
             display="flex"
             flexDirection="row"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "display": "flex",
                   "flexDirection": "row",
@@ -1378,6 +1390,7 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.muted.lowContrast"
               data-blade-component="base-text"
               fontFamily="text"
@@ -1385,8 +1398,8 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
               fontStyle="italic"
               lineHeight={50}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(216, 16%, 60%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 11,
diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.ssr.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.ssr.test.tsx.snap
index 68f5716d278..28447dc6d9e 100644
--- a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<CheckboxGroup /> should render errorText when validationState is set to error 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><div role=\\"group\\" aria-labelledby=\\"checkbox-group-undefined-label-undefined\\" data-blade-component=\\"checkbox-group\\" class=\\"BaseBox-bmPWx xrMLB\\"><span style=\\"width:auto;flex-shrink:0;margin-right:16px\\" id=\\"checkbox-group-undefined-label-undefined\\" data-blade-component=\\"form-label\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bqWBik\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx eeqPab\\"><p class=\\"StyledBaseText-dVBfTO gaMIEc\\" data-blade-component=\\"text\\">Select fruits</p><div data-blade-component=\\"visually-hidden\\" class=\\"VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw\\"><p class=\\"StyledBaseText-dVBfTO eIdQFo\\" data-blade-component=\\"text\\">,Invalid selection </p></div></div></div></span><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx xrMLB\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bqWBik\\"><div data-blade-component=\\"checkbox\\" class=\\"BaseBox-bmPWx\\"><label data-blade-component=\\"checkbox-label\\" class=\\"SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 bgSmPY\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx xrMLB\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fSbYvl\\"><input type=\\"checkbox\\" value=\\"apple\\" role=\\"checkbox\\" aria-required=\\"false\\" aria-invalid=\\"true\\" aria-disabled=\\"false\\" aria-checked=\\"false\\" aria-errormessage=\\"checkbox-undefined-errortext-undefined\\" class=\\"SelectorInputweb__StyledInput-sc-1bnkrae-0 hJscHc\\"/><div data-blade-component=\\"checkbox-icon-wrapper\\" class=\\"CheckboxIconWrapperweb__CheckboxIconWrapper-sc-3hpze0-0 iCAuYI\\"><div style=\\"opacity:0;position:absolute;display:flex\\" class=\\"Fadeweb__AnimatedFade-sc-1h424tv-0\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"12px\\" viewBox=\\"0 0 8 8\\" width=\\"12px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z\\" clip-rule=\\"evenodd\\" fill=\\"hsla(220, 27%, 98%, 1)\\" fill-rule=\\"evenodd\\" stroke=\\"white\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"0.5\\" data-blade-component=\\"svg-path\\"></path></svg></div><div style=\\"opacity:0;position:absolute;display:flex\\" class=\\"Fadeweb__AnimatedFade-sc-1h424tv-0 fqlNJV\\"></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bigiAM\\"></div><div class=\\"StyledBaseText-dVBfTO ktUwvA\\" data-blade-component=\\"base-text\\">Apple</div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx cCkEge\\"></div></div></label></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bqWBik\\"><div data-blade-component=\\"checkbox\\" class=\\"BaseBox-bmPWx\\"><label data-blade-component=\\"checkbox-label\\" class=\\"SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 bgSmPY\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx xrMLB\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fSbYvl\\"><input type=\\"checkbox\\" value=\\"mango\\" role=\\"checkbox\\" aria-required=\\"false\\" aria-invalid=\\"true\\" aria-disabled=\\"false\\" aria-checked=\\"false\\" aria-errormessage=\\"checkbox-undefined-errortext-undefined\\" class=\\"SelectorInputweb__StyledInput-sc-1bnkrae-0 hJscHc\\"/><div data-blade-component=\\"checkbox-icon-wrapper\\" class=\\"CheckboxIconWrapperweb__CheckboxIconWrapper-sc-3hpze0-0 iCAuYI\\"><div style=\\"opacity:0;position:absolute;display:flex\\" class=\\"Fadeweb__AnimatedFade-sc-1h424tv-0\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"12px\\" viewBox=\\"0 0 8 8\\" width=\\"12px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z\\" clip-rule=\\"evenodd\\" fill=\\"hsla(220, 27%, 98%, 1)\\" fill-rule=\\"evenodd\\" stroke=\\"white\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"0.5\\" data-blade-component=\\"svg-path\\"></path></svg></div><div style=\\"opacity:0;position:absolute;display:flex\\" class=\\"Fadeweb__AnimatedFade-sc-1h424tv-0 fqlNJV\\"></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bigiAM\\"></div><div class=\\"StyledBaseText-dVBfTO ktUwvA\\" data-blade-component=\\"base-text\\">Mango</div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx cCkEge\\"></div></div></label></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx cCNoRc\\"><div data-blade-component=\\"checkbox\\" class=\\"BaseBox-bmPWx\\"><label data-blade-component=\\"checkbox-label\\" class=\\"SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 bgSmPY\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx xrMLB\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fSbYvl\\"><input type=\\"checkbox\\" value=\\"orange\\" role=\\"checkbox\\" aria-required=\\"false\\" aria-invalid=\\"true\\" aria-disabled=\\"false\\" aria-checked=\\"false\\" aria-errormessage=\\"checkbox-undefined-errortext-undefined\\" class=\\"SelectorInputweb__StyledInput-sc-1bnkrae-0 hJscHc\\"/><div data-blade-component=\\"checkbox-icon-wrapper\\" class=\\"CheckboxIconWrapperweb__CheckboxIconWrapper-sc-3hpze0-0 iCAuYI\\"><div style=\\"opacity:0;position:absolute;display:flex\\" class=\\"Fadeweb__AnimatedFade-sc-1h424tv-0\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"12px\\" viewBox=\\"0 0 8 8\\" width=\\"12px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z\\" clip-rule=\\"evenodd\\" fill=\\"hsla(220, 27%, 98%, 1)\\" fill-rule=\\"evenodd\\" stroke=\\"white\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"0.5\\" data-blade-component=\\"svg-path\\"></path></svg></div><div style=\\"opacity:0;position:absolute;display:flex\\" class=\\"Fadeweb__AnimatedFade-sc-1h424tv-0 fqlNJV\\"></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bigiAM\\"></div><div class=\\"StyledBaseText-dVBfTO ktUwvA\\" data-blade-component=\\"base-text\\">Orange</div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx cCkEge\\"></div></div></label></div></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx gnjvtY\\"><span style=\\"word-break:break-all\\" data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fSbYvl\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"12px\\" viewBox=\\"0 0 24 24\\" width=\\"12px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z\\" fill=\\"hsla(8, 73%, 47%, 1)\\" data-blade-component=\\"svg-path\\"></path><path d=\\"M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z\\" fill=\\"hsla(8, 73%, 47%, 1)\\" data-blade-component=\\"svg-path\\"></path><path d=\\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z\\" clip-rule=\\"evenodd\\" fill=\\"hsla(8, 73%, 47%, 1)\\" fill-rule=\\"evenodd\\" data-blade-component=\\"svg-path\\"></path></svg><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx joUrH\\"></div><span class=\\"StyledBaseText-dVBfTO fRqtgA\\" data-blade-component=\\"base-text\\">Invalid selection</span></span></div></div></div></div></div>"`;
+exports[`<CheckboxGroup /> should render errorText when validationState is set to error 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="group" aria-labelledby="checkbox-group-undefined-label-undefined" data-blade-component="checkbox-group" class="BaseBox-bmPWx xrMLB"><span style="width:auto;flex-shrink:0;margin-right:16px" id="checkbox-group-undefined-label-undefined" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx bqWBik"><div data-blade-component="base-box" class="BaseBox-bmPWx eeqPab"><p class="StyledBaseText-dVBfTO gaMIEc" data-blade-component="text">Select fruits</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">,Invalid selection </p></div></div></div></span><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx xrMLB"><div data-blade-component="base-box" class="BaseBox-bmPWx bqWBik"><div data-blade-component="checkbox" class="BaseBox-bmPWx"><label data-blade-component="checkbox-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 bgSmPY"><div data-blade-component="base-box" class="BaseBox-bmPWx xrMLB"><div data-blade-component="base-box" class="BaseBox-bmPWx fSbYvl"><input type="checkbox" value="apple" role="checkbox" aria-required="false" aria-invalid="true" aria-disabled="false" aria-checked="false" aria-errormessage="checkbox-undefined-errortext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 hJscHc"/><div data-blade-component="checkbox-icon-wrapper" class="CheckboxIconWrapperweb__CheckboxIconWrapper-sc-3hpze0-0 iCAuYI"><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 8 8" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" clip-rule="evenodd" fill="hsla(220, 27%, 98%, 1)" fill-rule="evenodd" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" data-blade-component="svg-path"></path></svg></div><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0 fqlNJV"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bigiAM"></div><div class="StyledBaseText-dVBfTO ktUwvA" data-blade-component="base-text">Apple</div></div><div data-blade-component="base-box" class="BaseBox-bmPWx cCkEge"></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bqWBik"><div data-blade-component="checkbox" class="BaseBox-bmPWx"><label data-blade-component="checkbox-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 bgSmPY"><div data-blade-component="base-box" class="BaseBox-bmPWx xrMLB"><div data-blade-component="base-box" class="BaseBox-bmPWx fSbYvl"><input type="checkbox" value="mango" role="checkbox" aria-required="false" aria-invalid="true" aria-disabled="false" aria-checked="false" aria-errormessage="checkbox-undefined-errortext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 hJscHc"/><div data-blade-component="checkbox-icon-wrapper" class="CheckboxIconWrapperweb__CheckboxIconWrapper-sc-3hpze0-0 iCAuYI"><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 8 8" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" clip-rule="evenodd" fill="hsla(220, 27%, 98%, 1)" fill-rule="evenodd" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" data-blade-component="svg-path"></path></svg></div><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0 fqlNJV"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bigiAM"></div><div class="StyledBaseText-dVBfTO ktUwvA" data-blade-component="base-text">Mango</div></div><div data-blade-component="base-box" class="BaseBox-bmPWx cCkEge"></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx cCNoRc"><div data-blade-component="checkbox" class="BaseBox-bmPWx"><label data-blade-component="checkbox-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 bgSmPY"><div data-blade-component="base-box" class="BaseBox-bmPWx xrMLB"><div data-blade-component="base-box" class="BaseBox-bmPWx fSbYvl"><input type="checkbox" value="orange" role="checkbox" aria-required="false" aria-invalid="true" aria-disabled="false" aria-checked="false" aria-errormessage="checkbox-undefined-errortext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 hJscHc"/><div data-blade-component="checkbox-icon-wrapper" class="CheckboxIconWrapperweb__CheckboxIconWrapper-sc-3hpze0-0 iCAuYI"><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 8 8" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" clip-rule="evenodd" fill="hsla(220, 27%, 98%, 1)" fill-rule="evenodd" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" data-blade-component="svg-path"></path></svg></div><div style="opacity:0;position:absolute;display:flex" class="Fadeweb__AnimatedFade-sc-1h424tv-0 fqlNJV"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bigiAM"></div><div class="StyledBaseText-dVBfTO ktUwvA" data-blade-component="base-text">Orange</div></div><div data-blade-component="base-box" class="BaseBox-bmPWx cCkEge"></div></div></label></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx gnjvtY"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fSbYvl"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(8, 73%, 47%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(8, 73%, 47%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(8, 73%, 47%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx joUrH"></div><span class="StyledBaseText-dVBfTO fRqtgA" data-blade-component="base-text">Invalid selection</span></span></div></div></div></div></div>"`;
 
 exports[`<CheckboxGroup /> should render errorText when validationState is set to error 2`] = `
 <div
diff --git a/packages/blade/src/components/Collapsible/__tests__/Collapsible.native.test.tsx b/packages/blade/src/components/Collapsible/__tests__/Collapsible.native.test.tsx
index 902017d43ff..cd230e7e020 100644
--- a/packages/blade/src/components/Collapsible/__tests__/Collapsible.native.test.tsx
+++ b/packages/blade/src/components/Collapsible/__tests__/Collapsible.native.test.tsx
@@ -13,7 +13,9 @@ import { Button } from '~components/Button';
 describe('<Collapsible />', () => {
   // Collapsible uses animations and requestAnimationFrame which makes RN tests throw warnings
   beforeEach(() => {
-    jest.useFakeTimers();
+    jest.useFakeTimers({
+      legacyFakeTimers: true,
+    });
   });
   afterEach(() => {
     jest.useRealTimers();
diff --git a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap
index 273e0702058..1dfc97500f9 100644
--- a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap
+++ b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,8 +11,8 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
   <View
     data-blade-component="collapsible"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -22,7 +22,7 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
       display="flex"
       flexDirection="column"
       maxWidth={
-        Object {
+        {
           "l": "1136px",
           "m": "640px",
           "s": "710px",
@@ -30,8 +30,8 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
       }
       minWidth="200px"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "flex-start",
             "display": "flex",
             "flexDirection": "column",
@@ -45,7 +45,7 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
         accessibilityControls="collapsible-body-1"
         accessibilityRole="button"
         accessibilityState={
-          Object {
+          {
             "disabled": false,
             "expanded": false,
           }
@@ -85,8 +85,8 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "alignSelf": "flex-start",
               "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -107,7 +107,7 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
               "textDecorationStyle": "solid",
               "width": "auto",
             },
-            Object {
+            {
               "backgroundColor": "hsla(218, 89%, 51%, 1)",
               "borderColor": "hsla(218, 89%, 51%, 1)",
             },
@@ -123,8 +123,8 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
           isHidden={false}
           justifyContent="center"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexBasis": 0,
@@ -133,21 +133,22 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                 "flexShrink": 1,
                 "justifyContent": "center",
               },
-              Object {
+              {
                 "opacity": 1,
               },
             ]
           }
         >
           <Text
+            accessible={true}
             color="action.text.primary.default"
             data-blade-component="base-text"
             fontSize={100}
             fontWeight="bold"
             lineHeight={100}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(0, 0%, 100%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 14,
@@ -180,19 +181,19 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
         id="collapsible-body-1"
         importantForAccessibility="no-hide-descendants"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
         <View
           isExpanded={false}
           style={
-            Array [
-              Object {
+            [
+              {
                 "overflow": "hidden",
               },
-              Object {
+              {
                 "height": 0,
                 "opacity": 0.8,
               },
@@ -202,7 +203,7 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
           <View
             onLayout={[Function]}
             style={
-              Object {
+              {
                 "position": "relative",
               }
             }
@@ -210,8 +211,8 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
             <View
               data-blade-component="box"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "marginBottom": 0,
                     "marginTop": 16,
                   },
@@ -224,8 +225,8 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                 flexDirection="column"
                 minWidth="200px"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "display": "flex",
                       "flexDirection": "column",
                       "minWidth": 200,
@@ -234,6 +235,7 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                 }
               >
                 <Text
+                  accessible={true}
                   color="surface.text.normal.lowContrast"
                   data-blade-component="text"
                   fontFamily="text"
@@ -242,8 +244,8 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                   fontWeight="regular"
                   lineHeight={100}
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "color": "hsla(217, 56%, 17%, 1)",
                         "fontFamily": "Lato",
                         "fontSize": 14,
@@ -269,8 +271,8 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                   data-blade-component="amount"
                   display="flex"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                       },
                     ]
@@ -282,8 +284,8 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                     display="flex"
                     flexDirection="row"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "baseline",
                           "display": "flex",
                           "flexDirection": "row",
@@ -294,14 +296,15 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                     }
                   >
                     <Text
+                      accessible={true}
                       color="feedback.text.positive.lowContrast"
                       data-blade-component="base-text"
                       fontSize={75}
                       fontWeight="bold"
                       marginRight="spacing.1"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "hsla(160, 100%, 26%, 1)",
                             "fontFamily": "Lato",
                             "fontSize": 12,
@@ -324,10 +327,11 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                       ₹
                     </Text>
                     <Text
+                      accessible={true}
                       data-blade-component="base-text"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "hsla(217, 56%, 17%, 1)",
                             "fontFamily": "Lato",
                             "fontSize": 16,
@@ -348,14 +352,15 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                       }
                     >
                       <Text
+                        accessible={true}
                         color="feedback.text.positive.lowContrast"
                         data-blade-component="base-text"
                         fontSize={100}
                         fontWeight="regular"
                         lineHeight={100}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "hsla(160, 100%, 26%, 1)",
                               "fontFamily": "Lato",
                               "fontSize": 14,
@@ -379,14 +384,15 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                         .
                       </Text>
                       <Text
+                        accessible={true}
                         color="feedback.text.positive.lowContrast"
                         data-blade-component="base-text"
                         fontSize={75}
                         fontWeight="regular"
                         marginLeft="spacing.1"
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "hsla(160, 100%, 26%, 1)",
                               "fontFamily": "Lato",
                               "fontSize": 12,
@@ -424,7 +430,7 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
 exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -432,8 +438,8 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
   <View
     data-blade-component="collapsible"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -443,7 +449,7 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
       display="flex"
       flexDirection="column"
       maxWidth={
-        Object {
+        {
           "l": "1136px",
           "m": "640px",
           "s": "710px",
@@ -451,8 +457,8 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
       }
       minWidth="200px"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "flex-start",
             "display": "flex",
             "flexDirection": "column",
@@ -466,7 +472,7 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
         accessibilityControls="collapsible-body-3"
         accessibilityRole="button"
         accessibilityState={
-          Object {
+          {
             "disabled": false,
             "expanded": false,
           }
@@ -484,8 +490,8 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "flex-start",
               "backgroundColor": "transparent",
               "borderColor": "black",
@@ -510,8 +516,8 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -520,14 +526,15 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
           }
         >
           <Text
+            accessible={true}
             color="action.text.link.default"
             data-blade-component="base-text"
             fontSize={100}
             fontWeight="bold"
             lineHeight={100}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(218, 89%, 51%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 14,
@@ -557,8 +564,8 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
             data-blade-component="base-box"
             display="flex"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "display": "flex",
                   "paddingLeft": 4,
@@ -570,9 +577,9 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
               accessibilityElementsHidden={true}
               importantForAccessibility="no-hide-descendants"
               style={
-                Object {
-                  "transform": Array [
-                    Object {
+                {
+                  "transform": [
+                    {
                       "rotateZ": "0deg",
                     },
                   ],
@@ -593,15 +600,15 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                 minX={0}
                 minY={0}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "backgroundColor": "transparent",
                       "borderWidth": 0,
                     },
-                    Array [
-                      Object {},
+                    [
+                      {},
                     ],
-                    Object {
+                    {
                       "flex": 0,
                       "height": 16,
                       "width": 16,
@@ -615,7 +622,7 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                 <RNSVGGroup
                   fill={null}
                   propList={
-                    Array [
+                    [
                       "fill",
                     ]
                   }
@@ -626,7 +633,7 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                     fill={4279461105}
                     fillRule={0}
                     propList={
-                      Array [
+                      [
                         "fill",
                         "fillRule",
                       ]
@@ -645,19 +652,19 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
         id="collapsible-body-3"
         importantForAccessibility="no-hide-descendants"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
         <View
           isExpanded={false}
           style={
-            Array [
-              Object {
+            [
+              {
                 "overflow": "hidden",
               },
-              Object {
+              {
                 "height": 0,
                 "opacity": 0.8,
               },
@@ -667,7 +674,7 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
           <View
             onLayout={[Function]}
             style={
-              Object {
+              {
                 "position": "relative",
               }
             }
@@ -675,8 +682,8 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
             <View
               data-blade-component="box"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "marginBottom": 0,
                     "marginTop": 16,
                   },
@@ -689,8 +696,8 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                 flexDirection="column"
                 minWidth="200px"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "display": "flex",
                       "flexDirection": "column",
                       "minWidth": 200,
@@ -699,6 +706,7 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                 }
               >
                 <Text
+                  accessible={true}
                   color="surface.text.normal.lowContrast"
                   data-blade-component="text"
                   fontFamily="text"
@@ -707,8 +715,8 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                   fontWeight="regular"
                   lineHeight={100}
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "color": "hsla(217, 56%, 17%, 1)",
                         "fontFamily": "Lato",
                         "fontSize": 14,
@@ -734,8 +742,8 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                   data-blade-component="amount"
                   display="flex"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                       },
                     ]
@@ -747,8 +755,8 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                     display="flex"
                     flexDirection="row"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "baseline",
                           "display": "flex",
                           "flexDirection": "row",
@@ -759,14 +767,15 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                     }
                   >
                     <Text
+                      accessible={true}
                       color="feedback.text.positive.lowContrast"
                       data-blade-component="base-text"
                       fontSize={75}
                       fontWeight="bold"
                       marginRight="spacing.1"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "hsla(160, 100%, 26%, 1)",
                             "fontFamily": "Lato",
                             "fontSize": 12,
@@ -789,10 +798,11 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                       ₹
                     </Text>
                     <Text
+                      accessible={true}
                       data-blade-component="base-text"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "hsla(217, 56%, 17%, 1)",
                             "fontFamily": "Lato",
                             "fontSize": 16,
@@ -813,14 +823,15 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                       }
                     >
                       <Text
+                        accessible={true}
                         color="feedback.text.positive.lowContrast"
                         data-blade-component="base-text"
                         fontSize={100}
                         fontWeight="regular"
                         lineHeight={100}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "hsla(160, 100%, 26%, 1)",
                               "fontFamily": "Lato",
                               "fontSize": 14,
@@ -844,14 +855,15 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                         .
                       </Text>
                       <Text
+                        accessible={true}
                         color="feedback.text.positive.lowContrast"
                         data-blade-component="base-text"
                         fontSize={75}
                         fontWeight="regular"
                         marginLeft="spacing.1"
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "hsla(160, 100%, 26%, 1)",
                               "fontFamily": "Lato",
                               "fontSize": 12,
diff --git a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.ssr.test.tsx.snap b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.ssr.test.tsx.snap
index ab7f2c422b6..b57054f03eb 100644
--- a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Collapsible /> should render Collapsible on server 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"collapsible\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx iBXzln\\"><button type=\\"button\\" data-blade-component=\\"button\\" role=\\"button\\" aria-controls=\\"collapsible-body-undefined\\" aria-expanded=\\"true\\" class=\\"StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 dOlUqh\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 kkGTK NIPoA\\"><div class=\\"StyledBaseText-dVBfTO brGLEM\\" data-blade-component=\\"base-text\\">View Price Breakdown</div></div></button><div id=\\"collapsible-body-undefined\\" role=\\"region\\" aria-hidden=\\"false\\" data-blade-component=\\"collapsible-body\\" class=\\"BaseBox-bmPWx\\"><div class=\\"CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 gxKLCW\\"><div data-blade-component=\\"box\\" class=\\"BaseBox-bmPWx hgWdUa\\"><div data-blade-component=\\"box\\" class=\\"BaseBox-bmPWx lmtAaL\\"><div data-blade-component=\\"box\\" class=\\"BaseBox-bmPWx hfsNNB\\"><p class=\\"StyledBaseText-dVBfTO eIdQFo\\" data-blade-component=\\"text\\">Actual amount</p><div data-blade-component=\\"amount\\" class=\\"BaseBox-bmPWx bcSLaJ\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx iaZUuq\\"><span class=\\"StyledBaseText-dVBfTO jKuOWA\\" data-blade-component=\\"base-text\\">₹</span><span class=\\"StyledBaseText-dVBfTO chIjgb\\" data-blade-component=\\"base-text\\">1,000<!-- -->.</span><span class=\\"StyledBaseText-dVBfTO eDQkPo\\" data-blade-component=\\"base-text\\">00</span></div></div></div><div data-blade-component=\\"box\\" class=\\"BaseBox-bmPWx hfsNNB\\"><p class=\\"StyledBaseText-dVBfTO ljwJlt\\" data-blade-component=\\"text\\">Razorpay Platform Fees</p><p class=\\"StyledBaseText-dVBfTO eIdQFo\\" data-blade-component=\\"text\\">2%</p></div><div data-blade-component=\\"box\\" class=\\"BaseBox-bmPWx hfsNNB\\"><p class=\\"StyledBaseText-dVBfTO ljwJlt\\" data-blade-component=\\"text\\">GST</p><p class=\\"StyledBaseText-dVBfTO eIdQFo\\" data-blade-component=\\"text\\">18%</p></div></div></div></div></div></div></div></div>"`;
+exports[`<Collapsible /> should render Collapsible on server 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx iBXzln"><button type="button" data-blade-component="button" role="button" aria-controls="collapsible-body-undefined" aria-expanded="true" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 dOlUqh"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 kkGTK NIPoA"><div class="StyledBaseText-dVBfTO brGLEM" data-blade-component="base-text">View Price Breakdown</div></div></button><div id="collapsible-body-undefined" role="region" aria-hidden="false" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 gxKLCW"><div data-blade-component="box" class="BaseBox-bmPWx hgWdUa"><div data-blade-component="box" class="BaseBox-bmPWx lmtAaL"><div data-blade-component="box" class="BaseBox-bmPWx hfsNNB"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">Actual amount</p><div data-blade-component="amount" class="BaseBox-bmPWx bcSLaJ"><div data-blade-component="base-box" class="BaseBox-bmPWx iaZUuq"><span class="StyledBaseText-dVBfTO jKuOWA" data-blade-component="base-text">₹</span><span class="StyledBaseText-dVBfTO chIjgb" data-blade-component="base-text">1,000<!-- -->.</span><span class="StyledBaseText-dVBfTO eDQkPo" data-blade-component="base-text">00</span></div></div></div><div data-blade-component="box" class="BaseBox-bmPWx hfsNNB"><p class="StyledBaseText-dVBfTO ljwJlt" data-blade-component="text">Razorpay Platform Fees</p><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">2%</p></div><div data-blade-component="box" class="BaseBox-bmPWx hfsNNB"><p class="StyledBaseText-dVBfTO ljwJlt" data-blade-component="text">GST</p><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">18%</p></div></div></div></div></div></div></div></div>"`;
 
 exports[`<Collapsible /> should render Collapsible on server 2`] = `
 <div
diff --git a/packages/blade/src/components/Counter/__tests__/__snapshots__/Counter.native.test.tsx.snap b/packages/blade/src/components/Counter/__tests__/__snapshots__/Counter.native.test.tsx.snap
index 057d178449a..c227db8314b 100644
--- a/packages/blade/src/components/Counter/__tests__/__snapshots__/Counter.native.test.tsx.snap
+++ b/packages/blade/src/components/Counter/__tests__/__snapshots__/Counter.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Counter /> should render Counter with default props 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -12,8 +12,8 @@ exports[`<Counter /> should render Counter with default props 1`] = `
     data-blade-component="counter"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -25,11 +25,11 @@ exports[`<Counter /> should render Counter with default props 1`] = `
       platform="onMobile"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
             "borderRadius": 9999,
@@ -48,8 +48,8 @@ exports[`<Counter /> should render Counter with default props 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -64,6 +64,7 @@ exports[`<Counter /> should render Counter with default props 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.neutral.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -73,8 +74,8 @@ exports[`<Counter /> should render Counter with default props 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 27%, 36%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -107,7 +108,7 @@ exports[`<Counter /> should render Counter with default props 1`] = `
 exports[`<Counter /> should render high contrast blue variant Counter 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -116,8 +117,8 @@ exports[`<Counter /> should render high contrast blue variant Counter 1`] = `
     data-blade-component="counter"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -129,11 +130,11 @@ exports[`<Counter /> should render high contrast blue variant Counter 1`] = `
       platform="onMobile"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(218, 89%, 51%, 1)",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(218, 89%, 51%, 1)",
             "borderRadius": 9999,
@@ -152,8 +153,8 @@ exports[`<Counter /> should render high contrast blue variant Counter 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -168,6 +169,7 @@ exports[`<Counter /> should render high contrast blue variant Counter 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="badge.text.blue.highContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -177,8 +179,8 @@ exports[`<Counter /> should render high contrast blue variant Counter 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(0, 0%, 100%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -211,7 +213,7 @@ exports[`<Counter /> should render high contrast blue variant Counter 1`] = `
 exports[`<Counter /> should render high contrast information variant Counter 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -220,8 +222,8 @@ exports[`<Counter /> should render high contrast information variant Counter 1`]
     data-blade-component="counter"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -233,11 +235,11 @@ exports[`<Counter /> should render high contrast information variant Counter 1`]
       platform="onMobile"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(193, 100%, 35%, 1)",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(193, 100%, 35%, 1)",
             "borderRadius": 9999,
@@ -256,8 +258,8 @@ exports[`<Counter /> should render high contrast information variant Counter 1`]
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -272,6 +274,7 @@ exports[`<Counter /> should render high contrast information variant Counter 1`]
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.information.highContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -281,8 +284,8 @@ exports[`<Counter /> should render high contrast information variant Counter 1`]
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(0, 0%, 100%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -315,7 +318,7 @@ exports[`<Counter /> should render high contrast information variant Counter 1`]
 exports[`<Counter /> should render high contrast negative variant Counter 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -324,8 +327,8 @@ exports[`<Counter /> should render high contrast negative variant Counter 1`] =
     data-blade-component="counter"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -337,11 +340,11 @@ exports[`<Counter /> should render high contrast negative variant Counter 1`] =
       platform="onMobile"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(8, 73%, 47%, 1)",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(8, 73%, 47%, 1)",
             "borderRadius": 9999,
@@ -360,8 +363,8 @@ exports[`<Counter /> should render high contrast negative variant Counter 1`] =
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -376,6 +379,7 @@ exports[`<Counter /> should render high contrast negative variant Counter 1`] =
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.negative.highContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -385,8 +389,8 @@ exports[`<Counter /> should render high contrast negative variant Counter 1`] =
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(0, 0%, 100%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -419,7 +423,7 @@ exports[`<Counter /> should render high contrast negative variant Counter 1`] =
 exports[`<Counter /> should render high contrast neutral variant Counter 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -428,8 +432,8 @@ exports[`<Counter /> should render high contrast neutral variant Counter 1`] = `
     data-blade-component="counter"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -441,11 +445,11 @@ exports[`<Counter /> should render high contrast neutral variant Counter 1`] = `
       platform="onMobile"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(216, 33%, 29%, 1)",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(216, 33%, 29%, 1)",
             "borderRadius": 9999,
@@ -464,8 +468,8 @@ exports[`<Counter /> should render high contrast neutral variant Counter 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -480,6 +484,7 @@ exports[`<Counter /> should render high contrast neutral variant Counter 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.neutral.highContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -489,8 +494,8 @@ exports[`<Counter /> should render high contrast neutral variant Counter 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(0, 0%, 100%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -523,7 +528,7 @@ exports[`<Counter /> should render high contrast neutral variant Counter 1`] = `
 exports[`<Counter /> should render high contrast notice variant Counter 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -532,8 +537,8 @@ exports[`<Counter /> should render high contrast notice variant Counter 1`] = `
     data-blade-component="counter"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -545,11 +550,11 @@ exports[`<Counter /> should render high contrast notice variant Counter 1`] = `
       platform="onMobile"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(38, 97%, 38%, 1)",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(38, 97%, 38%, 1)",
             "borderRadius": 9999,
@@ -568,8 +573,8 @@ exports[`<Counter /> should render high contrast notice variant Counter 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -584,6 +589,7 @@ exports[`<Counter /> should render high contrast notice variant Counter 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.notice.highContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -593,8 +599,8 @@ exports[`<Counter /> should render high contrast notice variant Counter 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(0, 0%, 100%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -627,7 +633,7 @@ exports[`<Counter /> should render high contrast notice variant Counter 1`] = `
 exports[`<Counter /> should render high contrast positive variant Counter 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -636,8 +642,8 @@ exports[`<Counter /> should render high contrast positive variant Counter 1`] =
     data-blade-component="counter"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -649,11 +655,11 @@ exports[`<Counter /> should render high contrast positive variant Counter 1`] =
       platform="onMobile"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(160, 100%, 26%, 1)",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(160, 100%, 26%, 1)",
             "borderRadius": 9999,
@@ -672,8 +678,8 @@ exports[`<Counter /> should render high contrast positive variant Counter 1`] =
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -688,6 +694,7 @@ exports[`<Counter /> should render high contrast positive variant Counter 1`] =
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.positive.highContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -697,8 +704,8 @@ exports[`<Counter /> should render high contrast positive variant Counter 1`] =
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(0, 0%, 100%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -731,7 +738,7 @@ exports[`<Counter /> should render high contrast positive variant Counter 1`] =
 exports[`<Counter /> should render large size Counter 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -740,8 +747,8 @@ exports[`<Counter /> should render large size Counter 1`] = `
     data-blade-component="counter"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -753,11 +760,11 @@ exports[`<Counter /> should render large size Counter 1`] = `
       platform="onMobile"
       size="large"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
             "borderRadius": 9999,
@@ -776,8 +783,8 @@ exports[`<Counter /> should render large size Counter 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -792,6 +799,7 @@ exports[`<Counter /> should render large size Counter 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.neutral.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -801,8 +809,8 @@ exports[`<Counter /> should render large size Counter 1`] = `
           lineHeight={100}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 27%, 36%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 14,
@@ -835,7 +843,7 @@ exports[`<Counter /> should render large size Counter 1`] = `
 exports[`<Counter /> should render low contrast blue variant Counter 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -844,8 +852,8 @@ exports[`<Counter /> should render low contrast blue variant Counter 1`] = `
     data-blade-component="counter"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -857,11 +865,11 @@ exports[`<Counter /> should render low contrast blue variant Counter 1`] = `
       platform="onMobile"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(218, 89%, 51%, 0.09)",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(218, 89%, 51%, 0.09)",
             "borderRadius": 9999,
@@ -880,8 +888,8 @@ exports[`<Counter /> should render low contrast blue variant Counter 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -896,6 +904,7 @@ exports[`<Counter /> should render low contrast blue variant Counter 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="badge.text.blue.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -905,8 +914,8 @@ exports[`<Counter /> should render low contrast blue variant Counter 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(218, 89%, 51%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -939,7 +948,7 @@ exports[`<Counter /> should render low contrast blue variant Counter 1`] = `
 exports[`<Counter /> should render low contrast information variant Counter 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -948,8 +957,8 @@ exports[`<Counter /> should render low contrast information variant Counter 1`]
     data-blade-component="counter"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -961,11 +970,11 @@ exports[`<Counter /> should render low contrast information variant Counter 1`]
       platform="onMobile"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(193, 100%, 35%, 0.09)",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(193, 100%, 35%, 0.09)",
             "borderRadius": 9999,
@@ -984,8 +993,8 @@ exports[`<Counter /> should render low contrast information variant Counter 1`]
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -1000,6 +1009,7 @@ exports[`<Counter /> should render low contrast information variant Counter 1`]
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.information.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -1009,8 +1019,8 @@ exports[`<Counter /> should render low contrast information variant Counter 1`]
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(193, 100%, 35%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -1043,7 +1053,7 @@ exports[`<Counter /> should render low contrast information variant Counter 1`]
 exports[`<Counter /> should render low contrast negative variant Counter 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1052,8 +1062,8 @@ exports[`<Counter /> should render low contrast negative variant Counter 1`] = `
     data-blade-component="counter"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -1065,11 +1075,11 @@ exports[`<Counter /> should render low contrast negative variant Counter 1`] = `
       platform="onMobile"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(9, 91%, 56%, 0.09)",
             "borderRadius": 9999,
@@ -1088,8 +1098,8 @@ exports[`<Counter /> should render low contrast negative variant Counter 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -1104,6 +1114,7 @@ exports[`<Counter /> should render low contrast negative variant Counter 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.negative.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -1113,8 +1124,8 @@ exports[`<Counter /> should render low contrast negative variant Counter 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(8, 73%, 47%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -1147,7 +1158,7 @@ exports[`<Counter /> should render low contrast negative variant Counter 1`] = `
 exports[`<Counter /> should render low contrast neutral variant Counter 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1156,8 +1167,8 @@ exports[`<Counter /> should render low contrast neutral variant Counter 1`] = `
     data-blade-component="counter"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -1169,11 +1180,11 @@ exports[`<Counter /> should render low contrast neutral variant Counter 1`] = `
       platform="onMobile"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
             "borderRadius": 9999,
@@ -1192,8 +1203,8 @@ exports[`<Counter /> should render low contrast neutral variant Counter 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -1208,6 +1219,7 @@ exports[`<Counter /> should render low contrast neutral variant Counter 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.neutral.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -1217,8 +1229,8 @@ exports[`<Counter /> should render low contrast neutral variant Counter 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 27%, 36%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -1251,7 +1263,7 @@ exports[`<Counter /> should render low contrast neutral variant Counter 1`] = `
 exports[`<Counter /> should render low contrast notice variant Counter 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1260,8 +1272,8 @@ exports[`<Counter /> should render low contrast notice variant Counter 1`] = `
     data-blade-component="counter"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -1273,11 +1285,11 @@ exports[`<Counter /> should render low contrast notice variant Counter 1`] = `
       platform="onMobile"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(36, 100%, 44%, 0.09)",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(36, 100%, 44%, 0.09)",
             "borderRadius": 9999,
@@ -1296,8 +1308,8 @@ exports[`<Counter /> should render low contrast notice variant Counter 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -1312,6 +1324,7 @@ exports[`<Counter /> should render low contrast notice variant Counter 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.notice.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -1321,8 +1334,8 @@ exports[`<Counter /> should render low contrast notice variant Counter 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(38, 97%, 38%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -1355,7 +1368,7 @@ exports[`<Counter /> should render low contrast notice variant Counter 1`] = `
 exports[`<Counter /> should render low contrast positive variant Counter 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1364,8 +1377,8 @@ exports[`<Counter /> should render low contrast positive variant Counter 1`] = `
     data-blade-component="counter"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -1377,11 +1390,11 @@ exports[`<Counter /> should render low contrast positive variant Counter 1`] = `
       platform="onMobile"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(155, 100%, 31%, 0.09)",
             "borderRadius": 9999,
@@ -1400,8 +1413,8 @@ exports[`<Counter /> should render low contrast positive variant Counter 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -1416,6 +1429,7 @@ exports[`<Counter /> should render low contrast positive variant Counter 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.positive.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -1425,8 +1439,8 @@ exports[`<Counter /> should render low contrast positive variant Counter 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(160, 100%, 26%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -1459,7 +1473,7 @@ exports[`<Counter /> should render low contrast positive variant Counter 1`] = `
 exports[`<Counter /> should render medium size Counter 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1468,8 +1482,8 @@ exports[`<Counter /> should render medium size Counter 1`] = `
     data-blade-component="counter"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -1481,11 +1495,11 @@ exports[`<Counter /> should render medium size Counter 1`] = `
       platform="onMobile"
       size="medium"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
             "borderRadius": 9999,
@@ -1504,8 +1518,8 @@ exports[`<Counter /> should render medium size Counter 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -1520,6 +1534,7 @@ exports[`<Counter /> should render medium size Counter 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.neutral.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -1529,8 +1544,8 @@ exports[`<Counter /> should render medium size Counter 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 27%, 36%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -1563,7 +1578,7 @@ exports[`<Counter /> should render medium size Counter 1`] = `
 exports[`<Counter /> should render small size Counter 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1572,8 +1587,8 @@ exports[`<Counter /> should render small size Counter 1`] = `
     data-blade-component="counter"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -1585,11 +1600,11 @@ exports[`<Counter /> should render small size Counter 1`] = `
       platform="onMobile"
       size="small"
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
           },
-          Object {
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
             "borderRadius": 9999,
@@ -1608,8 +1623,8 @@ exports[`<Counter /> should render small size Counter 1`] = `
         justifyContent="center"
         overflow="hidden"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -1624,6 +1639,7 @@ exports[`<Counter /> should render small size Counter 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="feedback.text.neutral.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -1633,8 +1649,8 @@ exports[`<Counter /> should render small size Counter 1`] = `
           lineHeight={50}
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 27%, 36%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 10,
diff --git a/packages/blade/src/components/Counter/__tests__/__snapshots__/Counter.ssr.test.tsx.snap b/packages/blade/src/components/Counter/__tests__/__snapshots__/Counter.ssr.test.tsx.snap
index 27d581f597d..6d8a766b2ec 100644
--- a/packages/blade/src/components/Counter/__tests__/__snapshots__/Counter.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Counter/__tests__/__snapshots__/Counter.ssr.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Counter /> should limit value with max prop 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"counter\\" class=\\"BaseBox-bmPWx jLCxzZ\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx StyledCounterweb__StyledCounter-sc-1itt9w6-0 lldTHu dTYmGd\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx KJLNh\\"><p class=\\"StyledBaseText-dVBfTO hlMkHt\\" data-blade-component=\\"text\\">10+</p></div></div></div></div>"`;
+exports[`<Counter /> should limit value with max prop 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="counter" class="BaseBox-bmPWx jLCxzZ"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledCounterweb__StyledCounter-sc-1itt9w6-0 lldTHu dTYmGd"><div data-blade-component="base-box" class="BaseBox-bmPWx KJLNh"><p class="StyledBaseText-dVBfTO hlMkHt" data-blade-component="text">10+</p></div></div></div></div>"`;
diff --git a/packages/blade/src/components/Divider/__tests__/Divider.web.test.tsx b/packages/blade/src/components/Divider/__tests__/Divider.web.test.tsx
index cfd0827db91..a4fca38fea4 100644
--- a/packages/blade/src/components/Divider/__tests__/Divider.web.test.tsx
+++ b/packages/blade/src/components/Divider/__tests__/Divider.web.test.tsx
@@ -1,6 +1,7 @@
 import { Divider } from '../Divider';
 import { Box } from '~components/Box';
 import renderWithTheme from '~utils/testing/renderWithTheme.web';
+import 'jest-styled-components';
 
 describe('<Divider />', () => {
   it('should render Divider within flex container', () => {
diff --git a/packages/blade/src/components/Divider/__tests__/__snapshots__/Divider.native.test.tsx.snap b/packages/blade/src/components/Divider/__tests__/__snapshots__/Divider.native.test.tsx.snap
index fffdb5b5625..de9dc31123c 100644
--- a/packages/blade/src/components/Divider/__tests__/__snapshots__/Divider.native.test.tsx.snap
+++ b/packages/blade/src/components/Divider/__tests__/__snapshots__/Divider.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Divider /> should render Divider using height 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -13,8 +13,8 @@ exports[`<Divider /> should render Divider using height 1`] = `
     display="flex"
     height="100px"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
           "height": 100,
         },
@@ -30,14 +30,14 @@ exports[`<Divider /> should render Divider using height 1`] = `
       height="100%"
       isDividerHorizontal={false}
       style={
-        Array [
-          Object {
+        [
+          {
             "borderLeftColor": "hsla(216, 15%, 54%, 0.18)",
             "borderStyle": "solid",
             "borderWidth": 0,
             "height": "100%",
           },
-          Object {
+          {
             "alignSelf": "stretch",
             "borderLeftStyle": "solid",
             "borderLeftWidth": 1,
@@ -54,7 +54,7 @@ exports[`<Divider /> should render Divider using height 1`] = `
 exports[`<Divider /> should render Divider within flex container 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -63,8 +63,8 @@ exports[`<Divider /> should render Divider within flex container 1`] = `
     data-blade-component="box"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -78,13 +78,13 @@ exports[`<Divider /> should render Divider within flex container 1`] = `
       dividerStyle="solid"
       isDividerHorizontal={true}
       style={
-        Array [
-          Object {
+        [
+          {
             "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
             "borderStyle": "solid",
             "borderWidth": 0,
           },
-          Object {
+          {
             "borderBottomStyle": "solid",
             "borderBottomWidth": 1,
             "flexGrow": 1,
diff --git a/packages/blade/src/components/Divider/__tests__/__snapshots__/Divider.ssr.test.tsx.snap b/packages/blade/src/components/Divider/__tests__/__snapshots__/Divider.ssr.test.tsx.snap
index ae97fc57e46..6c7f0204415 100644
--- a/packages/blade/src/components/Divider/__tests__/__snapshots__/Divider.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Divider/__tests__/__snapshots__/Divider.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Divider /> should render Divider on server 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"box\\" class=\\"BaseBox-bmPWx jLCxzZ\\"><div data-blade-component=\\"divider\\" class=\\"BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR\\"></div></div></div>"`;
+exports[`<Divider /> should render Divider on server 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="box" class="BaseBox-bmPWx jLCxzZ"><div data-blade-component="divider" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR"></div></div></div>"`;
 
 exports[`<Divider /> should render Divider on server 2`] = `
 <div
diff --git a/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.native.test.tsx.snap b/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.native.test.tsx.snap
index d3a74eccf7c..4d7afe03ea5 100644
--- a/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.native.test.tsx.snap
+++ b/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Dropdown /> should render dropdown 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,8 +11,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
   <View
     data-blade-component="dropdown"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -20,8 +20,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
       data-blade-component="base-box"
       position="relative"
       style={
-        Array [
-          Object {
+        [
+          {
             "position": "relative",
             "textAlign": "left",
           },
@@ -33,8 +33,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
         data-blade-component="base-box"
         position="relative"
         style={
-          Array [
-            Object {
+          [
+            {
               "position": "relative",
             },
           ]
@@ -43,8 +43,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
         <View
           data-blade-component="select-input"
           style={
-            Array [
-              Object {},
+            [
+              {},
             ]
           }
         >
@@ -54,8 +54,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
             flexDirection="column"
             position="relative"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "flex",
                   "flexDirection": "column",
                   "position": "relative",
@@ -71,8 +71,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
               flexDirection="row"
               justifyContent="space-between"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "display": "flex",
                     "flexDirection": "row",
                     "justifyContent": "space-between",
@@ -85,8 +85,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
               <View
                 data-blade-component="base-box"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "marginBottom": 4,
                       "marginRight": 16,
                     },
@@ -102,8 +102,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                   gap="spacing.0"
                   maxHeight="36px"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "alignItems": "center",
                         "display": "flex",
                         "flexDirection": "row",
@@ -115,6 +115,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                   }
                 >
                   <Text
+                    accessible={true}
                     color="surface.text.subdued.lowContrast"
                     data-blade-component="text"
                     fontFamily="text"
@@ -124,8 +125,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                     lineHeight={50}
                     numberOfLines={2}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "color": "hsla(217, 18%, 45%, 1)",
                           "fontFamily": "Lato",
                           "fontSize": 12,
@@ -150,8 +151,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                   <View
                     data-blade-component="visually-hidden"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "borderColor": "black",
                           "borderStyle": "solid",
                           "borderWidth": 0,
@@ -177,6 +178,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                     }
                   >
                     <Text
+                      accessible={true}
                       color="surface.text.normal.lowContrast"
                       data-blade-component="text"
                       fontFamily="text"
@@ -185,8 +187,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                       fontWeight="regular"
                       lineHeight={100}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "hsla(217, 56%, 17%, 1)",
                             "fontFamily": "Lato",
                             "fontSize": 14,
@@ -217,14 +219,14 @@ exports[`<Dropdown /> should render dropdown 1`] = `
               flexDirection="row"
               position="relative"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "display": "flex",
                     "flexDirection": "row",
                     "position": "relative",
                     "width": "100%",
                   },
-                  Object {
+                  {
                     "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
                     "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
                     "borderBottomStyle": "solid",
@@ -239,7 +241,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
               <View
                 accessibilityRole="combobox"
                 accessibilityState={
-                  Object {
+                  {
                     "disabled": false,
                     "expanded": false,
                   }
@@ -254,7 +256,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  Object {
+                  {
                     "backgroundColor": "transparent",
                     "color": "hsla(214, 18%, 69%, 1)",
                     "flexBasis": 0,
@@ -281,6 +283,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                 }
               >
                 <Text
+                  accessible={true}
                   color="surface.text.placeholder.lowContrast"
                   data-blade-component="text"
                   fontFamily="text"
@@ -289,8 +292,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                   fontWeight="regular"
                   lineHeight={100}
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "color": "hsla(214, 18%, 69%, 1)",
                         "fontFamily": "Lato",
                         "fontSize": 14,
@@ -319,8 +322,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                 display="flex"
                 flexDirection="row"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "alignItems": "center",
                       "display": "flex",
                       "flexDirection": "row",
@@ -332,8 +335,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                   data-blade-component="base-box"
                   display="flex"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                         "paddingRight": 12,
                       },
@@ -352,7 +355,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                     onResponderTerminationRequest={[Function]}
                     onStartShouldSetResponder={[Function]}
                     style={
-                      Object {
+                      {
                         "display": "flex",
                         "justifyContent": "center",
                         "opacity": 1,
@@ -373,15 +376,15 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                       minX={0}
                       minY={0}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "backgroundColor": "transparent",
                             "borderWidth": 0,
                           },
-                          Array [
-                            Object {},
+                          [
+                            {},
                           ],
-                          Object {
+                          {
                             "flex": 0,
                             "height": 16,
                             "width": 16,
@@ -395,7 +398,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                       <RNSVGGroup
                         fill={null}
                         propList={
-                          Array [
+                          [
                             "fill",
                           ]
                         }
@@ -406,7 +409,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                           fill={4279445060}
                           fillRule={0}
                           propList={
-                            Array [
+                            [
                               "fill",
                               "fillRule",
                             ]
@@ -419,8 +422,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
               </View>
               <View
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "backgroundColor": "hsla(218, 89%, 51%, 1)",
                       "bottom": 0,
                       "height": 1,
@@ -429,7 +432,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                       "position": "absolute",
                       "right": 0,
                     },
-                    Object {
+                    {
                       "opacity": undefined,
                       "width": "undefined%",
                     },
@@ -441,8 +444,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "marginLeft": 0,
                 },
               ]
@@ -454,8 +457,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
               flexDirection="row"
               justifyContent="flex-end"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "display": "flex",
                     "flexDirection": "row",
                     "justifyContent": "flex-end",
@@ -470,8 +473,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
         data-blade-component="base-box"
         position="relative"
         style={
-          Array [
-            Object {
+          [
+            {
               "position": "relative",
             },
           ]
@@ -492,8 +495,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Array [
-              Object {
+            [
+              {
                 "display": "none",
                 "height": "100%",
                 "position": "static",
@@ -509,20 +512,20 @@ exports[`<Dropdown /> should render dropdown 1`] = `
             isInBottomSheet={false}
             position="absolute"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "none",
                   "position": "absolute",
                   "width": "100%",
                 },
-                Object {
+                {
                   "backgroundColor": "hsla(0, 0%, 100%, 1)",
                   "borderColor": "hsla(216, 15%, 54%, 0.18)",
                   "borderRadius": 4,
                   "borderStyle": "solid",
                   "borderWidth": 1,
-                  "transform": Array [
-                    Object {
+                  "transform": [
+                    {
                       "translateY": 8,
                     },
                   ],
@@ -537,8 +540,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
               flexShrink={0}
               overflow="auto"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "flexShrink": 0,
                     "overflow": "auto",
                   },
@@ -548,16 +551,16 @@ exports[`<Dropdown /> should render dropdown 1`] = `
               <View
                 data-blade-component="dropdown-header"
                 style={
-                  Array [
-                    Object {},
+                  [
+                    {},
                   ]
                 }
               >
                 <View
                   data-blade-component="base-box"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "marginBottom": 16,
                         "marginTop": 16,
                         "paddingLeft": 16,
@@ -573,8 +576,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                     display="flex"
                     flexDirection="row"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "display": "flex",
                           "flexDirection": "row",
                           "userSelect": "none",
@@ -589,8 +592,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                       display="flex"
                       flexDirection="row"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "flex-start",
                             "display": "flex",
                             "flexBasis": "auto",
@@ -606,8 +609,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                       <View
                         data-blade-component="base-box"
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "flexBasis": "auto",
                               "flexGrow": 1,
                               "flexShrink": 1,
@@ -621,8 +624,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                           flexDirection="row"
                           flexShrink={0}
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "display": "flex",
                                 "flexDirection": "row",
                                 "flexShrink": 0,
@@ -632,6 +635,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                         >
                           <Text
                             accessibilityRole="header"
+                            accessible={true}
                             color="surface.text.normal.lowContrast"
                             data-blade-component="heading"
                             fontFamily="text"
@@ -640,8 +644,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                             fontWeight="bold"
                             lineHeight={300}
                             style={
-                              Array [
-                                Object {
+                              [
+                                {
                                   "color": "hsla(217, 56%, 17%, 1)",
                                   "fontFamily": "Lato",
                                   "fontSize": 16,
@@ -676,13 +680,13 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                   dividerStyle="solid"
                   isDividerHorizontal={true}
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
                         "borderStyle": "solid",
                         "borderWidth": 0,
                       },
-                      Object {
+                      {
                         "borderBottomStyle": "solid",
                         "borderBottomWidth": 1,
                         "flexGrow": 1,
@@ -695,25 +699,27 @@ exports[`<Dropdown /> should render dropdown 1`] = `
             </View>
             <View
               accessibilityLabelledBy="dropdown-7-label"
+              accessible={true}
               data-blade-component="action-list"
               id="dropdown-7-actionlist"
               style={
-                Array [
-                  Object {},
+                [
+                  {},
                 ]
               }
             >
               <RCTScrollView
+                accessible={true}
                 data={
-                  Array [
-                    Object {
-                      "data": Array [
-                        Object {
+                  [
+                    {
+                      "data": [
+                        {
                           "_index": 0,
                           "title": "Apple",
                           "value": "apple",
                         },
-                        Object {
+                        {
                           "_index": 1,
                           "title": "Mango",
                           "value": "mango",
@@ -738,10 +744,10 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                 onScrollEndDrag={[Function]}
                 renderItem={[Function]}
                 scrollEventThrottle={50}
-                stickyHeaderIndices={Array []}
+                stickyHeaderIndices={[]}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "marginBottom": 0,
                       "maxHeight": 300,
                       "paddingBottom": 8,
@@ -765,7 +771,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                     <View
                       accessibilityRole="menuitem"
                       accessibilityState={
-                        Object {
+                        {
                           "disabled": undefined,
                           "selected": false,
                         }
@@ -780,7 +786,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                       onResponderTerminationRequest={[Function]}
                       onStartShouldSetResponder={[Function]}
                       style={
-                        Object {
+                        {
                           "borderColor": "transparent",
                           "borderRadius": 4,
                           "borderStyle": "solid",
@@ -805,8 +811,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                         flexDirection="row"
                         justifyContent="center"
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "alignItems": "center",
                               "display": "flex",
                               "flexDirection": "row",
@@ -821,8 +827,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                           display="flex"
                           justifyContent="center"
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "alignItems": "center",
                                 "display": "flex",
                                 "justifyContent": "center",
@@ -833,8 +839,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                         <View
                           data-blade-component="base-box"
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "paddingLeft": 0,
                                 "paddingRight": 8,
                               },
@@ -842,6 +848,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                           }
                         >
                           <Text
+                            accessible={true}
                             color="surface.text.normal.lowContrast"
                             data-blade-component="text"
                             fontFamily="text"
@@ -851,8 +858,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                             lineHeight={100}
                             numberOfLines={1}
                             style={
-                              Array [
-                                Object {
+                              [
+                                {
                                   "color": "hsla(217, 56%, 17%, 1)",
                                   "fontFamily": "Lato",
                                   "fontSize": 14,
@@ -878,8 +885,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                         <View
                           data-blade-component="base-box"
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "marginLeft": "auto",
                               },
                             ]
@@ -889,8 +896,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                       <View
                         data-blade-component="base-box"
                         style={
-                          Array [
-                            Object {},
+                          [
+                            {},
                           ]
                         }
                       />
@@ -903,7 +910,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                     <View
                       accessibilityRole="menuitem"
                       accessibilityState={
-                        Object {
+                        {
                           "disabled": undefined,
                           "selected": false,
                         }
@@ -918,7 +925,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                       onResponderTerminationRequest={[Function]}
                       onStartShouldSetResponder={[Function]}
                       style={
-                        Object {
+                        {
                           "borderColor": "transparent",
                           "borderRadius": 4,
                           "borderStyle": "solid",
@@ -943,8 +950,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                         flexDirection="row"
                         justifyContent="center"
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "alignItems": "center",
                               "display": "flex",
                               "flexDirection": "row",
@@ -959,8 +966,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                           display="flex"
                           justifyContent="center"
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "alignItems": "center",
                                 "display": "flex",
                                 "justifyContent": "center",
@@ -971,8 +978,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                         <View
                           data-blade-component="base-box"
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "paddingLeft": 0,
                                 "paddingRight": 8,
                               },
@@ -980,6 +987,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                           }
                         >
                           <Text
+                            accessible={true}
                             color="surface.text.normal.lowContrast"
                             data-blade-component="text"
                             fontFamily="text"
@@ -989,8 +997,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                             lineHeight={100}
                             numberOfLines={1}
                             style={
-                              Array [
-                                Object {
+                              [
+                                {
                                   "color": "hsla(217, 56%, 17%, 1)",
                                   "fontFamily": "Lato",
                                   "fontSize": 14,
@@ -1016,8 +1024,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                         <View
                           data-blade-component="base-box"
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "marginLeft": "auto",
                               },
                             ]
@@ -1027,8 +1035,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                       <View
                         data-blade-component="base-box"
                         style={
-                          Array [
-                            Object {},
+                          [
+                            {},
                           ]
                         }
                       />
@@ -1042,10 +1050,11 @@ exports[`<Dropdown /> should render dropdown 1`] = `
               </RCTScrollView>
             </View>
             <View
+              accessible={true}
               data-blade-component="base-box"
               style={
-                Array [
-                  Object {},
+                [
+                  {},
                 ]
               }
             >
@@ -1057,13 +1066,13 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                 dividerStyle="solid"
                 isDividerHorizontal={true}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
                       "borderStyle": "solid",
                       "borderWidth": 0,
                     },
-                    Object {
+                    {
                       "borderBottomStyle": "solid",
                       "borderBottomWidth": 1,
                       "flexGrow": 1,
@@ -1075,8 +1084,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
               <View
                 data-blade-component="dropdown-footer"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "paddingBottom": 16,
                       "paddingLeft": 16,
                       "paddingRight": 16,
@@ -1088,7 +1097,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                 <View
                   accessibilityRole="button"
                   accessibilityState={
-                    Object {
+                    {
                       "disabled": false,
                     }
                   }
@@ -1126,8 +1135,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                   onResponderTerminationRequest={[Function]}
                   onStartShouldSetResponder={[Function]}
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "alignItems": "center",
                         "alignSelf": "center",
                         "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -1148,7 +1157,7 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                         "textDecorationStyle": "solid",
                         "width": "auto",
                       },
-                      Object {
+                      {
                         "backgroundColor": "hsla(218, 89%, 51%, 1)",
                         "borderColor": "hsla(218, 89%, 51%, 1)",
                       },
@@ -1164,8 +1173,8 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                     isHidden={false}
                     justifyContent="center"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "display": "flex",
                           "flexBasis": 0,
@@ -1174,21 +1183,22 @@ exports[`<Dropdown /> should render dropdown 1`] = `
                           "flexShrink": 1,
                           "justifyContent": "center",
                         },
-                        Object {
+                        {
                           "opacity": 1,
                         },
                       ]
                     }
                   >
                     <Text
+                      accessible={true}
                       color="action.text.primary.default"
                       data-blade-component="base-text"
                       fontSize={100}
                       fontWeight="bold"
                       lineHeight={100}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "hsla(0, 0%, 100%, 1)",
                             "fontFamily": "Lato",
                             "fontSize": 14,
diff --git a/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.ssr.test.tsx.snap b/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.ssr.test.tsx.snap
index 57dc9abd52e..a33858b7cb0 100644
--- a/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Dropdown/__tests__/__snapshots__/Dropdown.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Dropdown /> should render dropdown and make it visible on click 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"dropdown\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx eoXGsO\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx epXLnJ\\"><div data-blade-component=\\"visually-hidden\\" class=\\"VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw\\"><input tabindex=\\"-1\\" value=\\"\\" aria-hidden=\\"true\\"/></div><div data-blade-component=\\"select-input\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx edjBu\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fJyvvB\\"><label for=\\"dropdown-undefined-trigger-undefined-input-undefined\\" style=\\"width:auto;flex-shrink:0;margin-right:16px\\" id=\\"dropdown-undefined-label\\" data-blade-component=\\"form-label\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bqWBik\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx eeqPab\\"><p class=\\"StyledBaseText-dVBfTO gaMIEc\\" data-blade-component=\\"text\\">Fruits</p><div data-blade-component=\\"visually-hidden\\" class=\\"VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw\\"><p class=\\"StyledBaseText-dVBfTO eIdQFo\\" data-blade-component=\\"text\\"></p></div></div></div></label></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseInputWrapper__StyledBaseInputWrapper-sc-27jk75-0 kRxJZq iWQtne\\"><button type=\\"button\\" id=\\"dropdown-undefined-trigger-undefined-input-undefined\\" value=\\"\\" placeholder=\\"Select Option\\" data-blade-component=\\"styled-base-input\\" aria-required=\\"false\\" aria-disabled=\\"false\\" aria-invalid=\\"false\\" aria-describedby=\\"\\" aria-haspopup=\\"listbox\\" aria-expanded=\\"false\\" aria-controls=\\"dropdown-undefined-actionlist\\" role=\\"combobox\\" class=\\"StyledBaseInputweb__StyledBaseNativeButton-hsusrk-1 fERdBR\\">Select Option</button><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fSbYvl\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx ZITjD\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fIMmEF\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"16px\\" viewBox=\\"0 0 24 24\\" width=\\"16px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z\\" clip-rule=\\"evenodd\\" fill=\\"hsla(217, 56%, 17%, 1)\\" fill-rule=\\"evenodd\\" data-blade-component=\\"svg-path\\"></path></svg></div></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo\\"></div></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx jgxKDg\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx ctznZr\\"></div></div></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx epXLnJ\\"><div style=\\"opacity:0\\" data-blade-component=\\"dropdown-overlay\\" class=\\"BaseBox-bmPWx StyledDropdownOverlay-sc-1dik5mo-0 DropdownOverlayweb__AnimatedOverlay-sc-9pwxtx-0 bEcBfZ gEQWfr fUYZTv\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx cImMcF\\"><div data-blade-component=\\"dropdown-header\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx HnFxS\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx isYLKC\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx jPnCFC\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx lhloZM\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx kGcQUv\\"><h6 class=\\"StyledBaseText-dVBfTO dFejDk\\" data-blade-component=\\"heading\\">Recent Searches</h6></div></div></div></div></div><div data-blade-component=\\"divider\\" class=\\"BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR\\"></div></div></div><div id=\\"dropdown-undefined-actionlist\\" role=\\"listbox\\" aria-multiselectable=\\"false\\" aria-labelledby=\\"dropdown-undefined-label\\" data-blade-component=\\"action-list\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx StyledListBoxWrapperweb__StyledListBoxWrapper-sc-1eo4pr6-0  iclxbZ\\"><button id=\\"dropdown-undefined-0\\" type=\\"button\\" tabindex=\\"-1\\" class=\\"BaseBox-bmPWx StyledActionListItemweb__StyledActionListItem-sc-1okp9u4-0  jhMmTr\\" aria-selected=\\"false\\" role=\\"option\\" data-blade-component=\\"action-list-item\\" data-value=\\"apple\\" data-index=\\"0\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx hVfznU\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx exgaAZ\\"></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx icqJAq\\"><p class=\\"StyledBaseText-dVBfTO cwEniv\\" data-blade-component=\\"text\\">Apple</p></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx eWDSVX\\"></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"></div></button><button id=\\"dropdown-undefined-1\\" type=\\"button\\" tabindex=\\"-1\\" class=\\"BaseBox-bmPWx StyledActionListItemweb__StyledActionListItem-sc-1okp9u4-0  jhMmTr\\" aria-selected=\\"false\\" role=\\"option\\" data-blade-component=\\"action-list-item\\" data-value=\\"mango\\" data-index=\\"1\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx hVfznU\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx exgaAZ\\"></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx icqJAq\\"><p class=\\"StyledBaseText-dVBfTO cwEniv\\" data-blade-component=\\"text\\">Mango</p></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx eWDSVX\\"></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"></div></button></div></div><div role=\\"group\\" data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"divider\\" class=\\"BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR\\"></div><div data-blade-component=\\"dropdown-footer\\" class=\\"BaseBox-bmPWx kGtVIy\\"><button type=\\"button\\" data-blade-component=\\"button\\" role=\\"button\\" class=\\"StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 fcmfVa\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 kkGTK NIPoA\\"><div class=\\"StyledBaseText-dVBfTO brGLEM\\" data-blade-component=\\"base-text\\">Apply</div></div></button></div></div></div></div></div></div></div>"`;
+exports[`<Dropdown /> should render dropdown and make it visible on click 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="dropdown" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx eoXGsO"><div data-blade-component="base-box" class="BaseBox-bmPWx epXLnJ"><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw"><input tabindex="-1" value="" aria-hidden="true"/></div><div data-blade-component="select-input" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx edjBu"><div data-blade-component="base-box" class="BaseBox-bmPWx fJyvvB"><label for="dropdown-undefined-trigger-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" id="dropdown-undefined-label" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx bqWBik"><div data-blade-component="base-box" class="BaseBox-bmPWx eeqPab"><p class="StyledBaseText-dVBfTO gaMIEc" data-blade-component="text">Fruits</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputWrapper__StyledBaseInputWrapper-sc-27jk75-0 kRxJZq iWQtne"><button type="button" id="dropdown-undefined-trigger-undefined-input-undefined" value="" placeholder="Select Option" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-haspopup="listbox" aria-expanded="false" aria-controls="dropdown-undefined-actionlist" role="combobox" class="StyledBaseInputweb__StyledBaseNativeButton-hsusrk-1 fERdBR">Select Option</button><div data-blade-component="base-box" class="BaseBox-bmPWx fSbYvl"><div data-blade-component="base-box" class="BaseBox-bmPWx ZITjD"><div data-blade-component="base-box" class="BaseBox-bmPWx fIMmEF"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="hsla(217, 56%, 17%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx jgxKDg"><div data-blade-component="base-box" class="BaseBox-bmPWx ctznZr"></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx epXLnJ"><div style="opacity:0" data-blade-component="dropdown-overlay" class="BaseBox-bmPWx StyledDropdownOverlay-sc-1dik5mo-0 DropdownOverlayweb__AnimatedOverlay-sc-9pwxtx-0 bEcBfZ gEQWfr fUYZTv"><div data-blade-component="base-box" class="BaseBox-bmPWx cImMcF"><div data-blade-component="dropdown-header" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx HnFxS"><div data-blade-component="base-box" class="BaseBox-bmPWx isYLKC"><div data-blade-component="base-box" class="BaseBox-bmPWx jPnCFC"><div data-blade-component="base-box" class="BaseBox-bmPWx lhloZM"><div data-blade-component="base-box" class="BaseBox-bmPWx kGcQUv"><h6 class="StyledBaseText-dVBfTO dFejDk" data-blade-component="heading">Recent Searches</h6></div></div></div></div></div><div data-blade-component="divider" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR"></div></div></div><div id="dropdown-undefined-actionlist" role="listbox" aria-multiselectable="false" aria-labelledby="dropdown-undefined-label" data-blade-component="action-list" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledListBoxWrapperweb__StyledListBoxWrapper-sc-1eo4pr6-0  iclxbZ"><button id="dropdown-undefined-0" type="button" tabindex="-1" class="BaseBox-bmPWx StyledActionListItemweb__StyledActionListItem-sc-1okp9u4-0  jhMmTr" aria-selected="false" role="option" data-blade-component="action-list-item" data-value="apple" data-index="0"><div data-blade-component="base-box" class="BaseBox-bmPWx hVfznU"><div data-blade-component="base-box" class="BaseBox-bmPWx exgaAZ"></div><div data-blade-component="base-box" class="BaseBox-bmPWx icqJAq"><p class="StyledBaseText-dVBfTO cwEniv" data-blade-component="text">Apple</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx eWDSVX"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx"></div></button><button id="dropdown-undefined-1" type="button" tabindex="-1" class="BaseBox-bmPWx StyledActionListItemweb__StyledActionListItem-sc-1okp9u4-0  jhMmTr" aria-selected="false" role="option" data-blade-component="action-list-item" data-value="mango" data-index="1"><div data-blade-component="base-box" class="BaseBox-bmPWx hVfznU"><div data-blade-component="base-box" class="BaseBox-bmPWx exgaAZ"></div><div data-blade-component="base-box" class="BaseBox-bmPWx icqJAq"><p class="StyledBaseText-dVBfTO cwEniv" data-blade-component="text">Mango</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx eWDSVX"></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx"></div></button></div></div><div role="group" data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="divider" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 jfizlv jvaPlR"></div><div data-blade-component="dropdown-footer" class="BaseBox-bmPWx kGtVIy"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 fcmfVa"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 kkGTK NIPoA"><div class="StyledBaseText-dVBfTO brGLEM" data-blade-component="base-text">Apply</div></div></button></div></div></div></div></div></div></div>"`;
 
 exports[`<Dropdown /> should render dropdown and make it visible on click 2`] = `
 <div
diff --git a/packages/blade/src/components/Icons/ActivityIcon/__snapshots__/ActivityIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ActivityIcon/__snapshots__/ActivityIcon.native.test.tsx.snap
index 39452cb8e98..d869e926903 100644
--- a/packages/blade/src/components/Icons/ActivityIcon/__snapshots__/ActivityIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ActivityIcon/__snapshots__/ActivityIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ActivityIcon /> should render ActivityIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ActivityIcon /> should render ActivityIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ActivityIcon /> should render ActivityIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<ActivityIcon /> should render ActivityIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/AirplayIcon/__snapshots__/AirplayIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AirplayIcon/__snapshots__/AirplayIcon.native.test.tsx.snap
index 16bed998c77..5f5e5bf5156 100644
--- a/packages/blade/src/components/Icons/AirplayIcon/__snapshots__/AirplayIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AirplayIcon/__snapshots__/AirplayIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<AirplayIcon /> should render AirplayIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<AirplayIcon /> should render AirplayIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<AirplayIcon /> should render AirplayIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<AirplayIcon /> should render AirplayIcon 1`] = `
         d="M3 4C3 3.44772 3.44772 3 4 3H20C20.5523 3 21 3.44772 21 4V14C21 14.5523 20.5523 15 20 15H19C18.4477 15 18 15.4477 18 16C18 16.5523 18.4477 17 19 17H20C21.6569 17 23 15.6569 23 14V4C23 2.34315 21.6569 1 20 1H4C2.34315 1 1 2.34315 1 4V14C1 15.6569 2.34315 17 4 17H5C5.55228 17 6 16.5523 6 16C6 15.4477 5.55228 15 5 15H4C3.44772 15 3 14.5523 3 14V4Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -64,7 +64,7 @@ exports[`<AirplayIcon /> should render AirplayIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/AlertCircleIcon/__snapshots__/AlertCircleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AlertCircleIcon/__snapshots__/AlertCircleIcon.native.test.tsx.snap
index 256716a7ae0..adb9671a3a1 100644
--- a/packages/blade/src/components/Icons/AlertCircleIcon/__snapshots__/AlertCircleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlertCircleIcon/__snapshots__/AlertCircleIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<AlertCircleIcon /> should render AlertCircleIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<AlertCircleIcon /> should render AlertCircleIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<AlertCircleIcon /> should render AlertCircleIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<AlertCircleIcon /> should render AlertCircleIcon 1`] = `
         d="M12 7C12.5523 7 13 7.44772 13 8V12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12V8C11 7.44772 11.4477 7 12 7Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<AlertCircleIcon /> should render AlertCircleIcon 1`] = `
         d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -73,7 +73,7 @@ exports[`<AlertCircleIcon /> should render AlertCircleIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/AlertOctagonIcon/__snapshots__/AlertOctagonIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AlertOctagonIcon/__snapshots__/AlertOctagonIcon.native.test.tsx.snap
index 292fdd45cff..780ae8fbdf3 100644
--- a/packages/blade/src/components/Icons/AlertOctagonIcon/__snapshots__/AlertOctagonIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlertOctagonIcon/__snapshots__/AlertOctagonIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<AlertOctagonIcon /> should render AlertOctagonIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<AlertOctagonIcon /> should render AlertOctagonIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<AlertOctagonIcon /> should render AlertOctagonIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<AlertOctagonIcon /> should render AlertOctagonIcon 1`] = `
         d="M12 7C12.5523 7 13 7.44772 13 8V12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12V8C11 7.44772 11.4477 7 12 7Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<AlertOctagonIcon /> should render AlertOctagonIcon 1`] = `
         d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -73,7 +73,7 @@ exports[`<AlertOctagonIcon /> should render AlertOctagonIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/AlertOnlyIcon/__snapshots__/AlertOnlyIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AlertOnlyIcon/__snapshots__/AlertOnlyIcon.native.test.tsx.snap
index 74f6d8e24b8..64ba5f704b4 100644
--- a/packages/blade/src/components/Icons/AlertOnlyIcon/__snapshots__/AlertOnlyIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlertOnlyIcon/__snapshots__/AlertOnlyIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<AlertOnlyIcon /> should render AlertOnlyIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<AlertOnlyIcon /> should render AlertOnlyIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<AlertOnlyIcon /> should render AlertOnlyIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<AlertOnlyIcon /> should render AlertOnlyIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/AlertTriangleIcon/__snapshots__/AlertTriangleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AlertTriangleIcon/__snapshots__/AlertTriangleIcon.native.test.tsx.snap
index ed59eaaddf3..addd1361f5e 100644
--- a/packages/blade/src/components/Icons/AlertTriangleIcon/__snapshots__/AlertTriangleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlertTriangleIcon/__snapshots__/AlertTriangleIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<AlertTriangleIcon /> should render AlertTriangleIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<AlertTriangleIcon /> should render AlertTriangleIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<AlertTriangleIcon /> should render AlertTriangleIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<AlertTriangleIcon /> should render AlertTriangleIcon 1`] = `
         d="M12 8.10275C12.5523 8.10275 13 8.55047 13 9.10275V13.1028C13 13.655 12.5523 14.1028 12 14.1028C11.4477 14.1028 11 13.655 11 13.1028V9.10275C11 8.55047 11.4477 8.10275 12 8.10275Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<AlertTriangleIcon /> should render AlertTriangleIcon 1`] = `
         d="M12 18.1028C12.5523 18.1028 13 17.655 13 17.1028C13 16.5505 12.5523 16.1028 12 16.1028C11.4477 16.1028 11 16.5505 11 17.1028C11 17.655 11.4477 18.1028 12 18.1028Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -73,7 +73,7 @@ exports[`<AlertTriangleIcon /> should render AlertTriangleIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/AlignCenterIcon/__snapshots__/AlignCenterIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AlignCenterIcon/__snapshots__/AlignCenterIcon.native.test.tsx.snap
index 109d665994f..71c1f3e4af4 100644
--- a/packages/blade/src/components/Icons/AlignCenterIcon/__snapshots__/AlignCenterIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlignCenterIcon/__snapshots__/AlignCenterIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<AlignCenterIcon /> should render AlignCenterIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<AlignCenterIcon /> should render AlignCenterIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<AlignCenterIcon /> should render AlignCenterIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<AlignCenterIcon /> should render AlignCenterIcon 1`] = `
         d="M3 5C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7H21C21.5523 7 22 6.55228 22 6C22 5.44772 21.5523 5 21 5H3Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<AlignCenterIcon /> should render AlignCenterIcon 1`] = `
         d="M6 9C5.44772 9 5 9.44772 5 10C5 10.5523 5.44772 11 6 11H18C18.5523 11 19 10.5523 19 10C19 9.44772 18.5523 9 18 9H6Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -71,7 +71,7 @@ exports[`<AlignCenterIcon /> should render AlignCenterIcon 1`] = `
         d="M2 14C2 13.4477 2.44772 13 3 13H21C21.5523 13 22 13.4477 22 14C22 14.5523 21.5523 15 21 15H3C2.44772 15 2 14.5523 2 14Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -80,7 +80,7 @@ exports[`<AlignCenterIcon /> should render AlignCenterIcon 1`] = `
         d="M6 17C5.44772 17 5 17.4477 5 18C5 18.5523 5.44772 19 6 19H18C18.5523 19 19 18.5523 19 18C19 17.4477 18.5523 17 18 17H6Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/AlignJustifyIcon/__snapshots__/AlignJustifyIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AlignJustifyIcon/__snapshots__/AlignJustifyIcon.native.test.tsx.snap
index 976ec5755a3..8a2bfe7678f 100644
--- a/packages/blade/src/components/Icons/AlignJustifyIcon/__snapshots__/AlignJustifyIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlignJustifyIcon/__snapshots__/AlignJustifyIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<AlignJustifyIcon /> should render AlignJustifyIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<AlignJustifyIcon /> should render AlignJustifyIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<AlignJustifyIcon /> should render AlignJustifyIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<AlignJustifyIcon /> should render AlignJustifyIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/AlignLeftIcon/__snapshots__/AlignLeftIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AlignLeftIcon/__snapshots__/AlignLeftIcon.native.test.tsx.snap
index 97e562506ca..553741c31a9 100644
--- a/packages/blade/src/components/Icons/AlignLeftIcon/__snapshots__/AlignLeftIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlignLeftIcon/__snapshots__/AlignLeftIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<AlignLeftIcon /> should render AlignLeftIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<AlignLeftIcon /> should render AlignLeftIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<AlignLeftIcon /> should render AlignLeftIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<AlignLeftIcon /> should render AlignLeftIcon 1`] = `
         d="M3 5C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7H21C21.5523 7 22 6.55228 22 6C22 5.44772 21.5523 5 21 5H3Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<AlignLeftIcon /> should render AlignLeftIcon 1`] = `
         d="M3 9C2.44772 9 2 9.44772 2 10C2 10.5523 2.44772 11 3 11H17C17.5523 11 18 10.5523 18 10C18 9.44772 17.5523 9 17 9H3Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -71,7 +71,7 @@ exports[`<AlignLeftIcon /> should render AlignLeftIcon 1`] = `
         d="M2 14C2 13.4477 2.44772 13 3 13H21C21.5523 13 22 13.4477 22 14C22 14.5523 21.5523 15 21 15H3C2.44772 15 2 14.5523 2 14Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -80,7 +80,7 @@ exports[`<AlignLeftIcon /> should render AlignLeftIcon 1`] = `
         d="M3 17C2.44772 17 2 17.4477 2 18C2 18.5523 2.44772 19 3 19H17C17.5523 19 18 18.5523 18 18C18 17.4477 17.5523 17 17 17H3Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/AlignRightIcon/__snapshots__/AlignRightIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AlignRightIcon/__snapshots__/AlignRightIcon.native.test.tsx.snap
index a0e72295eff..520737a0469 100644
--- a/packages/blade/src/components/Icons/AlignRightIcon/__snapshots__/AlignRightIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AlignRightIcon/__snapshots__/AlignRightIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<AlignRightIcon /> should render AlignRightIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<AlignRightIcon /> should render AlignRightIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<AlignRightIcon /> should render AlignRightIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<AlignRightIcon /> should render AlignRightIcon 1`] = `
         d="M3 5C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7H21C21.5523 7 22 6.55228 22 6C22 5.44772 21.5523 5 21 5H3Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<AlignRightIcon /> should render AlignRightIcon 1`] = `
         d="M7 9C6.44772 9 6 9.44772 6 10C6 10.5523 6.44772 11 7 11H21C21.5523 11 22 10.5523 22 10C22 9.44772 21.5523 9 21 9H7Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -71,7 +71,7 @@ exports[`<AlignRightIcon /> should render AlignRightIcon 1`] = `
         d="M2 14C2 13.4477 2.44772 13 3 13H21C21.5523 13 22 13.4477 22 14C22 14.5523 21.5523 15 21 15H3C2.44772 15 2 14.5523 2 14Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -80,7 +80,7 @@ exports[`<AlignRightIcon /> should render AlignRightIcon 1`] = `
         d="M7 17C6.44772 17 6 17.4477 6 18C6 18.5523 6.44772 19 7 19H21C21.5523 19 22 18.5523 22 18C22 17.4477 21.5523 17 21 17H7Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/AnchorIcon/__snapshots__/AnchorIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AnchorIcon/__snapshots__/AnchorIcon.native.test.tsx.snap
index c7fafa87e8d..765c1f7a4a4 100644
--- a/packages/blade/src/components/Icons/AnchorIcon/__snapshots__/AnchorIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AnchorIcon/__snapshots__/AnchorIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<AnchorIcon /> should render AnchorIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<AnchorIcon /> should render AnchorIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<AnchorIcon /> should render AnchorIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<AnchorIcon /> should render AnchorIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/AnnouncementIcon/__snapshots__/AnnouncementIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AnnouncementIcon/__snapshots__/AnnouncementIcon.native.test.tsx.snap
index df0fc2a1fed..cac24a32e00 100644
--- a/packages/blade/src/components/Icons/AnnouncementIcon/__snapshots__/AnnouncementIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AnnouncementIcon/__snapshots__/AnnouncementIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<AnnouncementIcon /> should render AnnouncementIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<AnnouncementIcon /> should render AnnouncementIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<AnnouncementIcon /> should render AnnouncementIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<AnnouncementIcon /> should render AnnouncementIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/ApertureIcon/__snapshots__/ApertureIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ApertureIcon/__snapshots__/ApertureIcon.native.test.tsx.snap
index 138823ff706..eca853adc26 100644
--- a/packages/blade/src/components/Icons/ApertureIcon/__snapshots__/ApertureIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ApertureIcon/__snapshots__/ApertureIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ApertureIcon /> should render ApertureIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ApertureIcon /> should render ApertureIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ApertureIcon /> should render ApertureIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<ApertureIcon /> should render ApertureIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/AppStoreIcon/__snapshots__/AppStoreIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AppStoreIcon/__snapshots__/AppStoreIcon.native.test.tsx.snap
index 91bd1105723..2b26d43e3af 100644
--- a/packages/blade/src/components/Icons/AppStoreIcon/__snapshots__/AppStoreIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AppStoreIcon/__snapshots__/AppStoreIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<AppStoreIcon /> should render AppStoreIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<AppStoreIcon /> should render AppStoreIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<AppStoreIcon /> should render AppStoreIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<AppStoreIcon /> should render AppStoreIcon 1`] = `
         d="M17.5549 4.37079L20.7774 7.74158L17.5549 11.1124L14.3323 7.74158L17.5549 4.37079ZM8.8323 4.94252V9.70689H4.27743V4.94252H8.8323ZM20.2195 16.8534V21.6178H15.6646V16.8534H20.2195ZM8.8323 16.8534V21.6178H4.27743V16.8534H8.8323ZM18.2771 1.75409C17.8834 1.34299 17.2264 1.34299 16.8327 1.75409L11.7716 7.03861C11.4014 7.4251 11.4012 8.0345 11.771 8.42132L16.832 13.7152C17.2259 14.1271 17.8838 14.1271 18.2777 13.7152L23.3388 8.42132C23.7086 8.0345 23.7083 7.4251 23.3382 7.03861L18.2771 1.75409ZM11.1097 3.56033C11.1097 3.00805 10.662 2.56033 10.1097 2.56033H3C2.44771 2.56033 2 3.00805 2 3.56033V11.0891C2 11.6414 2.44772 12.0891 3 12.0891H10.1097C10.662 12.0891 11.1097 11.6414 11.1097 11.0891V3.56033ZM22.4969 15.4713C22.4969 14.919 22.0492 14.4713 21.4969 14.4713H14.3872C13.8349 14.4713 13.3872 14.919 13.3872 15.4713V23C13.3872 23.5523 13.8349 24 14.3872 24H21.4969C22.0492 24 22.4969 23.5523 22.4969 23V15.4713ZM11.1097 15.4713C11.1097 14.919 10.662 14.4713 10.1097 14.4713H3C2.44771 14.4713 2 14.919 2 15.4713V23C2 23.5523 2.44772 24 3 24H10.1097C10.662 24 11.1097 23.5523 11.1097 23V15.4713Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/ArrowDownIcon/__snapshots__/ArrowDownIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ArrowDownIcon/__snapshots__/ArrowDownIcon.native.test.tsx.snap
index f542dace84a..4bc7447b036 100644
--- a/packages/blade/src/components/Icons/ArrowDownIcon/__snapshots__/ArrowDownIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowDownIcon/__snapshots__/ArrowDownIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ArrowDownIcon /> should render ArrowDownIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ArrowDownIcon /> should render ArrowDownIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ArrowDownIcon /> should render ArrowDownIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<ArrowDownIcon /> should render ArrowDownIcon 1`] = `
         d="M13 4a1 1 0 1 0-2 0v13.586l-4.293-4.293a1 1 0 0 0-1.414 1.414l6 6a1 1 0 0 0 1.414 0l6-6a1 1 0 0 0-1.414-1.414L13 17.586V4Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/ArrowDownLeftIcon/__snapshots__/ArrowDownLeftIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ArrowDownLeftIcon/__snapshots__/ArrowDownLeftIcon.native.test.tsx.snap
index 3f2827f4299..a7fef0b6f79 100644
--- a/packages/blade/src/components/Icons/ArrowDownLeftIcon/__snapshots__/ArrowDownLeftIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowDownLeftIcon/__snapshots__/ArrowDownLeftIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ArrowDownLeftIcon /> should render ArrowDownLeftIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ArrowDownLeftIcon /> should render ArrowDownLeftIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ArrowDownLeftIcon /> should render ArrowDownLeftIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<ArrowDownLeftIcon /> should render ArrowDownLeftIcon 1`] = `
         d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L7 15.5858V9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V17.9998C5 18.1354 5.02699 18.2649 5.07588 18.3828C5.12432 18.4999 5.19595 18.6096 5.29078 18.705C5.29219 18.7064 5.2936 18.7078 5.29502 18.7092C5.48924 18.9023 5.74301 18.9992 5.997 19C5.998 19 5.999 19 6 19H15C15.5523 19 16 18.5523 16 18C16 17.4477 15.5523 17 15 17H8.41421L18.7071 6.70711Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/ArrowDownRightIcon/__snapshots__/ArrowDownRightIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ArrowDownRightIcon/__snapshots__/ArrowDownRightIcon.native.test.tsx.snap
index be115be6f41..03a8b8d466c 100644
--- a/packages/blade/src/components/Icons/ArrowDownRightIcon/__snapshots__/ArrowDownRightIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowDownRightIcon/__snapshots__/ArrowDownRightIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ArrowDownRightIcon /> should render ArrowDownRightIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ArrowDownRightIcon /> should render ArrowDownRightIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ArrowDownRightIcon /> should render ArrowDownRightIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<ArrowDownRightIcon /> should render ArrowDownRightIcon 1`] = `
         d="M6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L15.5858 17H9C8.44772 17 8 17.4477 8 18C8 18.5523 8.44772 19 9 19H17.9993C18.0003 19 18.002 19 18.003 19C18.1375 18.9996 18.2657 18.9727 18.3828 18.9241C18.498 18.8764 18.6062 18.8063 18.7005 18.7136C18.7049 18.7093 18.7093 18.7049 18.7136 18.7005C18.8901 18.5208 18.9992 18.2746 19 18.003C19 18.002 19 18.001 19 18V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V15.5858L6.70711 5.29289Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/ArrowLeftIcon/__snapshots__/ArrowLeftIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ArrowLeftIcon/__snapshots__/ArrowLeftIcon.native.test.tsx.snap
index 0ed535a325e..27235d96c2c 100644
--- a/packages/blade/src/components/Icons/ArrowLeftIcon/__snapshots__/ArrowLeftIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowLeftIcon/__snapshots__/ArrowLeftIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ArrowLeftIcon /> should render ArrowLeftIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ArrowLeftIcon /> should render ArrowLeftIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ArrowLeftIcon /> should render ArrowLeftIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<ArrowLeftIcon /> should render ArrowLeftIcon 1`] = `
         d="M10.707 6.707a1 1 0 0 0-1.414-1.414l-6 6a1 1 0 0 0 0 1.414l6 6a1 1 0 0 0 1.414-1.414L6.414 13H20a1 1 0 1 0 0-2H6.414l4.293-4.293Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/ArrowRightIcon/__snapshots__/ArrowRightIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ArrowRightIcon/__snapshots__/ArrowRightIcon.native.test.tsx.snap
index 03576a233a8..b60feb79a31 100644
--- a/packages/blade/src/components/Icons/ArrowRightIcon/__snapshots__/ArrowRightIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowRightIcon/__snapshots__/ArrowRightIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ArrowRightIcon /> should render ArrowRightIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ArrowRightIcon /> should render ArrowRightIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ArrowRightIcon /> should render ArrowRightIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<ArrowRightIcon /> should render ArrowRightIcon 1`] = `
         d="M14.707 5.293a1 1 0 1 0-1.414 1.414L17.586 11H4a1 1 0 1 0 0 2h13.586l-4.293 4.293a1 1 0 0 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414l-6-6Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/ArrowUpIcon/__snapshots__/ArrowUpIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ArrowUpIcon/__snapshots__/ArrowUpIcon.native.test.tsx.snap
index 36f9c92e336..13192efb4b9 100644
--- a/packages/blade/src/components/Icons/ArrowUpIcon/__snapshots__/ArrowUpIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowUpIcon/__snapshots__/ArrowUpIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ArrowUpIcon /> should render ArrowUpIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ArrowUpIcon /> should render ArrowUpIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ArrowUpIcon /> should render ArrowUpIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<ArrowUpIcon /> should render ArrowUpIcon 1`] = `
         d="M12.707 3.293a1 1 0 0 0-1.414 0l-6 6a1 1 0 0 0 1.414 1.414L11 6.414V20a1 1 0 1 0 2 0V6.414l4.293 4.293a1 1 0 0 0 1.414-1.414l-6-6Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/ArrowUpLeftIcon/__snapshots__/ArrowUpLeftIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ArrowUpLeftIcon/__snapshots__/ArrowUpLeftIcon.native.test.tsx.snap
index ac789d1bdbc..94c4fa54c9f 100644
--- a/packages/blade/src/components/Icons/ArrowUpLeftIcon/__snapshots__/ArrowUpLeftIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowUpLeftIcon/__snapshots__/ArrowUpLeftIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ArrowUpLeftIcon /> should render ArrowUpLeftIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ArrowUpLeftIcon /> should render ArrowUpLeftIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ArrowUpLeftIcon /> should render ArrowUpLeftIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<ArrowUpLeftIcon /> should render ArrowUpLeftIcon 1`] = `
         d="M6 5C5.44772 5 5 5.44772 5 6V15C5 15.5523 5.44772 16 6 16C6.55228 16 7 15.5523 7 15V8.41421L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L8.41421 7H15C15.5523 7 16 6.55228 16 6C16 5.44772 15.5523 5 15 5H6Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/ArrowUpRightIcon/__snapshots__/ArrowUpRightIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ArrowUpRightIcon/__snapshots__/ArrowUpRightIcon.native.test.tsx.snap
index de291d86a9e..d88b6207eaa 100644
--- a/packages/blade/src/components/Icons/ArrowUpRightIcon/__snapshots__/ArrowUpRightIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ArrowUpRightIcon/__snapshots__/ArrowUpRightIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ArrowUpRightIcon /> should render ArrowUpRightIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ArrowUpRightIcon /> should render ArrowUpRightIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ArrowUpRightIcon /> should render ArrowUpRightIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<ArrowUpRightIcon /> should render ArrowUpRightIcon 1`] = `
         d="M9 5a1 1 0 0 0 0 2h6.586L5.293 17.293a1 1 0 1 0 1.414 1.414L17 8.414V15a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1H9Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/AtSignIcon/__snapshots__/AtSignIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AtSignIcon/__snapshots__/AtSignIcon.native.test.tsx.snap
index 2e261fcd778..e95a0d08aec 100644
--- a/packages/blade/src/components/Icons/AtSignIcon/__snapshots__/AtSignIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AtSignIcon/__snapshots__/AtSignIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<AtSignIcon /> should render AtSignIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<AtSignIcon /> should render AtSignIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<AtSignIcon /> should render AtSignIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<AtSignIcon /> should render AtSignIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/AttachmentIcon/__snapshots__/AttachmentIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AttachmentIcon/__snapshots__/AttachmentIcon.native.test.tsx.snap
index baf7ba70b63..b2661d8ef47 100644
--- a/packages/blade/src/components/Icons/AttachmentIcon/__snapshots__/AttachmentIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AttachmentIcon/__snapshots__/AttachmentIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<AttachmentIcon /> should render AttachmentIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<AttachmentIcon /> should render AttachmentIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<AttachmentIcon /> should render AttachmentIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<AttachmentIcon /> should render AttachmentIcon 1`] = `
         d="M2 12C2 9.79086 3.79086 8 6 8H9C9.55229 8 10 7.55228 10 7C10 6.44772 9.55229 6 9 6H6C2.68629 6 0 8.68629 0 12C0 13.5913 0.632141 15.1174 1.75736 16.2426C2.88258 17.3679 4.4087 18 6 18H9C9.55229 18 10 17.5523 10 17C10 16.4477 9.55229 16 9 16H6C4.93913 16 3.92172 15.5786 3.17157 14.8284C2.42143 14.0783 2 13.0609 2 12Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<AttachmentIcon /> should render AttachmentIcon 1`] = `
         d="M15 6C14.4477 6 14 6.44772 14 7C14 7.55228 14.4477 8 15 8H18C19.0609 8 20.0783 8.42143 20.8284 9.17157C21.5786 9.92172 22 10.9391 22 12C22 14.2091 20.2091 16 18 16H15C14.4477 16 14 16.4477 14 17C14 17.5523 14.4477 18 15 18H18C21.3137 18 24 15.3137 24 12C24 10.4087 23.3679 8.88258 22.2426 7.75736C21.1174 6.63214 19.5913 6 18 6H15Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -71,7 +71,7 @@ exports[`<AttachmentIcon /> should render AttachmentIcon 1`] = `
         d="M8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H16C16.5523 13 17 12.5523 17 12C17 11.4477 16.5523 11 16 11H8Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/AwardIcon/__snapshots__/AwardIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/AwardIcon/__snapshots__/AwardIcon.native.test.tsx.snap
index d1618b1db90..fe14865d013 100644
--- a/packages/blade/src/components/Icons/AwardIcon/__snapshots__/AwardIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/AwardIcon/__snapshots__/AwardIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<AwardIcon /> should render AwardIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<AwardIcon /> should render AwardIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<AwardIcon /> should render AwardIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<AwardIcon /> should render AwardIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/BankIcon/__snapshots__/BankIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BankIcon/__snapshots__/BankIcon.native.test.tsx.snap
index 5ebf31ecf5e..4b9dd372683 100644
--- a/packages/blade/src/components/Icons/BankIcon/__snapshots__/BankIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BankIcon/__snapshots__/BankIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<BankIcon /> should render CloseIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<BankIcon /> should render CloseIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<BankIcon /> should render CloseIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<BankIcon /> should render CloseIcon 1`] = `
         d="M5.105 10.429a1 1 0 0 0-1 1v5.333a1 1 0 0 0 1 1h1.158a1 1 0 0 0 1-1v-5.333a1 1 0 0 0-1-1H5.105Zm6.316 0a1 1 0 0 0-1 1v5.333a1 1 0 0 0 1 1h1.158a1 1 0 0 0 1-1v-5.333a1 1 0 0 0-1-1H11.42ZM2 22a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-1.143a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1V22Zm15.737-11.571a1 1 0 0 0-1 1v5.333a1 1 0 0 0 1 1h1.158a1 1 0 0 0 1-1v-5.333a1 1 0 0 0-1-1h-1.158Zm-5.273-9.186a1 1 0 0 0-.928 0l-9 4.714A1 1 0 0 0 2 6.843v.49a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-.49a1 1 0 0 0-.536-.886l-9-4.714Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/BarChartAltIcon/__snapshots__/BarChartAltIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BarChartAltIcon/__snapshots__/BarChartAltIcon.native.test.tsx.snap
index ca17430d743..80ff70a0bfa 100644
--- a/packages/blade/src/components/Icons/BarChartAltIcon/__snapshots__/BarChartAltIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BarChartAltIcon/__snapshots__/BarChartAltIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<BarChartAltIcon /> should render BarChartAltIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<BarChartAltIcon /> should render BarChartAltIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<BarChartAltIcon /> should render BarChartAltIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<BarChartAltIcon /> should render BarChartAltIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<BarChartAltIcon /> should render BarChartAltIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -79,7 +79,7 @@ exports[`<BarChartAltIcon /> should render BarChartAltIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/BarChartIcon/__snapshots__/BarChartIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BarChartIcon/__snapshots__/BarChartIcon.native.test.tsx.snap
index 9e8af5e15df..5d5541414b8 100644
--- a/packages/blade/src/components/Icons/BarChartIcon/__snapshots__/BarChartIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BarChartIcon/__snapshots__/BarChartIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<BarChartIcon /> should render BarChartIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<BarChartIcon /> should render BarChartIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<BarChartIcon /> should render BarChartIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<BarChartIcon /> should render BarChartIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<BarChartIcon /> should render BarChartIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -79,7 +79,7 @@ exports[`<BarChartIcon /> should render BarChartIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/BatteryChargingIcon/__snapshots__/BatteryChargingIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BatteryChargingIcon/__snapshots__/BatteryChargingIcon.native.test.tsx.snap
index 4ed40e0a0cf..d6e990c8202 100644
--- a/packages/blade/src/components/Icons/BatteryChargingIcon/__snapshots__/BatteryChargingIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BatteryChargingIcon/__snapshots__/BatteryChargingIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<BatteryChargingIcon /> should render BatteryChargingIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<BatteryChargingIcon /> should render BatteryChargingIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<BatteryChargingIcon /> should render BatteryChargingIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<BatteryChargingIcon /> should render BatteryChargingIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/BatteryIcon/__snapshots__/BatteryIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BatteryIcon/__snapshots__/BatteryIcon.native.test.tsx.snap
index 6eae2bd2816..9bfcafa33de 100644
--- a/packages/blade/src/components/Icons/BatteryIcon/__snapshots__/BatteryIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BatteryIcon/__snapshots__/BatteryIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<BatteryIcon /> should render BatteryIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<BatteryIcon /> should render BatteryIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<BatteryIcon /> should render BatteryIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<BatteryIcon /> should render BatteryIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -65,7 +65,7 @@ exports[`<BatteryIcon /> should render BatteryIcon 1`] = `
         d="M24 11C24 10.4477 23.5523 10 23 10C22.4477 10 22 10.4477 22 11V13C22 13.5523 22.4477 14 23 14C23.5523 14 24 13.5523 24 13V11Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/BellIcon/__snapshots__/BellIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BellIcon/__snapshots__/BellIcon.native.test.tsx.snap
index 31ab0f5cd0d..249e96b4719 100644
--- a/packages/blade/src/components/Icons/BellIcon/__snapshots__/BellIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BellIcon/__snapshots__/BellIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<BellIcon /> should render BellIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<BellIcon /> should render BellIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<BellIcon /> should render BellIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<BellIcon /> should render BellIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/BellOffIcon/__snapshots__/BellOffIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BellOffIcon/__snapshots__/BellOffIcon.native.test.tsx.snap
index 581f10040ff..21934799198 100644
--- a/packages/blade/src/components/Icons/BellOffIcon/__snapshots__/BellOffIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BellOffIcon/__snapshots__/BellOffIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<BellOffIcon /> should render BellOffIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<BellOffIcon /> should render BellOffIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<BellOffIcon /> should render BellOffIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -58,7 +58,7 @@ exports[`<BellOffIcon /> should render BellOffIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -68,7 +68,7 @@ exports[`<BellOffIcon /> should render BellOffIcon 1`] = `
           d="M9.05144 3.77092C10.9096 2.72242 13.1848 2.73955 15.0269 3.81591C16.8691 4.89227 18.0011 6.86592 18 8.99949V13C18 13.5523 18.4477 14 19 14C19.5523 14 20 13.5523 20 13V9.00051C20.0015 6.15576 18.4921 3.52422 16.0359 2.08907C13.5797 0.65393 10.5461 0.631087 8.06858 2.02908C7.58758 2.30049 7.41768 2.91043 7.68909 3.39143C7.9605 3.87242 8.57044 4.04233 9.05144 3.77092Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -77,7 +77,7 @@ exports[`<BellOffIcon /> should render BellOffIcon 1`] = `
           d="M11.135 20.4982C10.8579 20.0205 10.246 19.8579 9.76824 20.135C9.29051 20.4121 9.12789 21.024 9.40501 21.5018C9.9417 22.427 10.9304 22.9965 12 22.9965C13.0696 22.9965 14.0583 22.427 14.595 21.5018C14.8721 21.024 14.7095 20.4121 14.2318 20.135C13.7541 19.8579 13.1421 20.0205 12.865 20.4982C12.6861 20.8066 12.3565 20.9965 12 20.9965C11.6435 20.9965 11.3139 20.8066 11.135 20.4982Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -91,7 +91,7 @@ exports[`<BellOffIcon /> should render BellOffIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/BillIcon/__snapshots__/BillIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BillIcon/__snapshots__/BillIcon.native.test.tsx.snap
index ee392ce7b41..992c368578d 100644
--- a/packages/blade/src/components/Icons/BillIcon/__snapshots__/BillIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BillIcon/__snapshots__/BillIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<BillIcon /> should render BillIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<BillIcon /> should render BillIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<BillIcon /> should render BillIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<BillIcon /> should render BillIcon 1`] = `
         d="M8.36841 8.13722C7.81612 8.13722 7.36841 8.58786 7.36841 9.14376C7.36841 9.69965 7.81612 10.1503 8.36841 10.1503H14.9579C15.5102 10.1503 15.9579 9.69965 15.9579 9.14376C15.9579 8.58786 15.5102 8.13722 14.9579 8.13722H8.36841Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<BillIcon /> should render BillIcon 1`] = `
         d="M7.36841 6.03268C7.36841 5.47678 7.81612 5.02614 8.36841 5.02614H14.9579C15.5102 5.02614 15.9579 5.47678 15.9579 6.03268C15.9579 6.58857 15.5102 7.03921 14.9579 7.03921H8.36841C7.81612 7.03921 7.36841 6.58857 7.36841 6.03268Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -71,7 +71,7 @@ exports[`<BillIcon /> should render BillIcon 1`] = `
         d="M8.36841 11.7974C7.81612 11.7974 7.36841 12.248 7.36841 12.8039C7.36841 13.3598 7.81612 13.8105 8.36841 13.8105H10.5789C11.1312 13.8105 11.5789 13.3598 11.5789 12.8039C11.5789 12.248 11.1312 11.7974 10.5789 11.7974H8.36841Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -82,7 +82,7 @@ exports[`<BillIcon /> should render BillIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/BluetoothIcon/__snapshots__/BluetoothIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BluetoothIcon/__snapshots__/BluetoothIcon.native.test.tsx.snap
index adf211f796d..7af458dc8cd 100644
--- a/packages/blade/src/components/Icons/BluetoothIcon/__snapshots__/BluetoothIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BluetoothIcon/__snapshots__/BluetoothIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<BluetoothIcon /> should render BluetoothIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<BluetoothIcon /> should render BluetoothIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<BluetoothIcon /> should render BluetoothIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<BluetoothIcon /> should render BluetoothIcon 1`] = `
         <RNSVGPath
           d="M6.5 6.5L17.5 17.5L12 23V1L17.5 6.5L6.5 17.5"
           propList={
-            Array [
+            [
               "stroke",
               "strokeWidth",
               "strokeLinecap",
@@ -76,7 +76,7 @@ exports[`<BluetoothIcon /> should render BluetoothIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/BoldIcon/__snapshots__/BoldIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BoldIcon/__snapshots__/BoldIcon.native.test.tsx.snap
index e8a07726108..fdb4abc4243 100644
--- a/packages/blade/src/components/Icons/BoldIcon/__snapshots__/BoldIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BoldIcon/__snapshots__/BoldIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<BoldIcon /> should render BoldIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<BoldIcon /> should render BoldIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<BoldIcon /> should render BoldIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<BoldIcon /> should render BoldIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/BookIcon/__snapshots__/BookIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BookIcon/__snapshots__/BookIcon.native.test.tsx.snap
index 0de1908222c..678c4e57641 100644
--- a/packages/blade/src/components/Icons/BookIcon/__snapshots__/BookIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BookIcon/__snapshots__/BookIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<BookIcon /> should render BookIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<BookIcon /> should render BookIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<BookIcon /> should render BookIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<BookIcon /> should render BookIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/BookmarkIcon/__snapshots__/BookmarkIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BookmarkIcon/__snapshots__/BookmarkIcon.native.test.tsx.snap
index 8090e448faf..86794bd16ad 100644
--- a/packages/blade/src/components/Icons/BookmarkIcon/__snapshots__/BookmarkIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BookmarkIcon/__snapshots__/BookmarkIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<BookmarkIcon /> should render BookmarkIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<BookmarkIcon /> should render BookmarkIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<BookmarkIcon /> should render BookmarkIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<BookmarkIcon /> should render BookmarkIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/BoxIcon/__snapshots__/BoxIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BoxIcon/__snapshots__/BoxIcon.native.test.tsx.snap
index f8a5b97ceb8..e1c89771dc0 100644
--- a/packages/blade/src/components/Icons/BoxIcon/__snapshots__/BoxIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BoxIcon/__snapshots__/BoxIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<BoxIcon /> should render BoxIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<BoxIcon /> should render BoxIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<BoxIcon /> should render BoxIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<BoxIcon /> should render BoxIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/BriefcaseIcon/__snapshots__/BriefcaseIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BriefcaseIcon/__snapshots__/BriefcaseIcon.native.test.tsx.snap
index 925bbe52177..a0fbdc2450a 100644
--- a/packages/blade/src/components/Icons/BriefcaseIcon/__snapshots__/BriefcaseIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BriefcaseIcon/__snapshots__/BriefcaseIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<BriefcaseIcon /> should render BriefcaseIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<BriefcaseIcon /> should render BriefcaseIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<BriefcaseIcon /> should render BriefcaseIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<BriefcaseIcon /> should render BriefcaseIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/BulkPayoutsIcon/__snapshots__/BulkPayoutsIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/BulkPayoutsIcon/__snapshots__/BulkPayoutsIcon.native.test.tsx.snap
index 8bf058652c0..ad28ce738b3 100644
--- a/packages/blade/src/components/Icons/BulkPayoutsIcon/__snapshots__/BulkPayoutsIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/BulkPayoutsIcon/__snapshots__/BulkPayoutsIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<BulkPayoutsIcon /> should render BulkPayoutsIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<BulkPayoutsIcon /> should render BulkPayoutsIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<BulkPayoutsIcon /> should render BulkPayoutsIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<BulkPayoutsIcon /> should render BulkPayoutsIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/CalendarIcon/__snapshots__/CalendarIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CalendarIcon/__snapshots__/CalendarIcon.native.test.tsx.snap
index 3267deaff2e..1a4692d6c63 100644
--- a/packages/blade/src/components/Icons/CalendarIcon/__snapshots__/CalendarIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CalendarIcon/__snapshots__/CalendarIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CalendarIcon /> should render CalendarIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CalendarIcon /> should render CalendarIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CalendarIcon /> should render CalendarIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<CalendarIcon /> should render CalendarIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<CalendarIcon /> should render CalendarIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -79,7 +79,7 @@ exports[`<CalendarIcon /> should render CalendarIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -91,7 +91,7 @@ exports[`<CalendarIcon /> should render CalendarIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/CameraIcon/__snapshots__/CameraIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CameraIcon/__snapshots__/CameraIcon.native.test.tsx.snap
index 3485fbe89c3..b5bace34aa3 100644
--- a/packages/blade/src/components/Icons/CameraIcon/__snapshots__/CameraIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CameraIcon/__snapshots__/CameraIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CameraIcon /> should render CameraIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CameraIcon /> should render CameraIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CameraIcon /> should render CameraIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<CameraIcon /> should render CameraIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<CameraIcon /> should render CameraIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/CameraOffIcon/__snapshots__/CameraOffIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CameraOffIcon/__snapshots__/CameraOffIcon.native.test.tsx.snap
index 272277576ee..951b061e5cb 100644
--- a/packages/blade/src/components/Icons/CameraOffIcon/__snapshots__/CameraOffIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CameraOffIcon/__snapshots__/CameraOffIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CameraOffIcon /> should render CameraOffIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CameraOffIcon /> should render CameraOffIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CameraOffIcon /> should render CameraOffIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -58,7 +58,7 @@ exports[`<CameraOffIcon /> should render CameraOffIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -73,7 +73,7 @@ exports[`<CameraOffIcon /> should render CameraOffIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/CastIcon/__snapshots__/CastIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CastIcon/__snapshots__/CastIcon.native.test.tsx.snap
index 250e8edee16..93dd6a58b54 100644
--- a/packages/blade/src/components/Icons/CastIcon/__snapshots__/CastIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CastIcon/__snapshots__/CastIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CastIcon /> should render CastIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CastIcon /> should render CastIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CastIcon /> should render CastIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<CastIcon /> should render CastIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/CheckCircleIcon/__snapshots__/CheckCircleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CheckCircleIcon/__snapshots__/CheckCircleIcon.native.test.tsx.snap
index 80ecef61886..2ce015e508d 100644
--- a/packages/blade/src/components/Icons/CheckCircleIcon/__snapshots__/CheckCircleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CheckCircleIcon/__snapshots__/CheckCircleIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CheckCircleIcon /> should render CheckCircleIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CheckCircleIcon /> should render CheckCircleIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CheckCircleIcon /> should render CheckCircleIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -56,7 +56,7 @@ exports[`<CheckCircleIcon /> should render CheckCircleIcon 1`] = `
           d="M4.15845 7.14679C6.74812 4.11688 11.0222 3.1512 14.663 4.77343C15.1675 4.99821 15.7586 4.77147 15.9834 4.267C16.2082 3.76253 15.9815 3.17135 15.477 2.94657C11.0272 0.96385 5.80325 2.14413 2.6381 5.84735C-0.527049 9.55057 -0.879431 14.8946 1.77205 18.9813C4.42353 23.0681 9.44725 24.9241 14.1189 23.5429C18.7905 22.1616 21.9972 17.8716 22 13V12.07C22 11.5177 21.5523 11.07 21 11.07C20.4477 11.07 20 11.5177 20 12.07V12.9994C19.9977 16.9852 17.3741 20.4948 13.5518 21.6249C9.72957 22.7551 5.61926 21.2365 3.44986 17.8928C1.28047 14.5491 1.56878 10.1767 4.15845 7.14679Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -65,7 +65,7 @@ exports[`<CheckCircleIcon /> should render CheckCircleIcon 1`] = `
           d="M22.7071 4.70711C23.0976 4.31658 23.0976 3.68342 22.7071 3.29289C22.3166 2.90237 21.6834 2.90237 21.2929 3.29289L11 13.5858L8.70711 11.2929C8.31658 10.9024 7.68342 10.9024 7.29289 11.2929C6.90237 11.6834 6.90237 12.3166 7.29289 12.7071L10.2929 15.7071C10.6834 16.0976 11.3166 16.0976 11.7071 15.7071L22.7071 4.70711Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -79,7 +79,7 @@ exports[`<CheckCircleIcon /> should render CheckCircleIcon 1`] = `
             fill={4294967295}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/CheckIcon/__snapshots__/CheckIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CheckIcon/__snapshots__/CheckIcon.native.test.tsx.snap
index daf6373ae81..4775337d594 100644
--- a/packages/blade/src/components/Icons/CheckIcon/__snapshots__/CheckIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CheckIcon/__snapshots__/CheckIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CheckIcon /> should render CheckIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CheckIcon /> should render CheckIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CheckIcon /> should render CheckIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<CheckIcon /> should render CheckIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/CheckSquareIcon/__snapshots__/CheckSquareIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CheckSquareIcon/__snapshots__/CheckSquareIcon.native.test.tsx.snap
index 9ac46306668..47780a52e62 100644
--- a/packages/blade/src/components/Icons/CheckSquareIcon/__snapshots__/CheckSquareIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CheckSquareIcon/__snapshots__/CheckSquareIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CheckSquareIcon /> should render CheckSquareIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CheckSquareIcon /> should render CheckSquareIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CheckSquareIcon /> should render CheckSquareIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<CheckSquareIcon /> should render CheckSquareIcon 1`] = `
         d="M3 5C3 4.44772 3.44772 4 4 4H15C15.5523 4 16 3.55228 16 3C16 2.44772 15.5523 2 15 2H4C2.34315 2 1 3.34315 1 5V19C1 20.6569 2.34315 22 4 22H18C19.6569 22 21 20.6569 21 19V12C21 11.4477 20.5523 11 20 11C19.4477 11 19 11.4477 19 12V19C19 19.5523 18.5523 20 18 20H4C3.44772 20 3 19.5523 3 19V5Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<CheckSquareIcon /> should render CheckSquareIcon 1`] = `
         d="M11.7071 14.7071L22.7071 3.70711C23.0976 3.31658 23.0976 2.68342 22.7071 2.29289C22.3166 1.90237 21.6834 1.90237 21.2929 2.29289L11 12.5858L8.70711 10.2929C8.31658 9.90237 7.68342 9.90237 7.29289 10.2929C6.90237 10.6834 6.90237 11.3166 7.29289 11.7071L10.2929 14.7071C10.6834 15.0976 11.3166 15.0976 11.7071 14.7071Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/ChevronDownIcon/__snapshots__/ChevronDownIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ChevronDownIcon/__snapshots__/ChevronDownIcon.native.test.tsx.snap
index c9c71d68153..7b2b6442402 100644
--- a/packages/blade/src/components/Icons/ChevronDownIcon/__snapshots__/ChevronDownIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronDownIcon/__snapshots__/ChevronDownIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ChevronDownIcon /> should render ChevronDownIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ChevronDownIcon /> should render ChevronDownIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ChevronDownIcon /> should render ChevronDownIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<ChevronDownIcon /> should render ChevronDownIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/ChevronLeftIcon/__snapshots__/ChevronLeftIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ChevronLeftIcon/__snapshots__/ChevronLeftIcon.native.test.tsx.snap
index cd56e660edb..ea100cd7910 100644
--- a/packages/blade/src/components/Icons/ChevronLeftIcon/__snapshots__/ChevronLeftIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronLeftIcon/__snapshots__/ChevronLeftIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ChevronLeftIcon /> should render ChevronLeftIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ChevronLeftIcon /> should render ChevronLeftIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ChevronLeftIcon /> should render ChevronLeftIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<ChevronLeftIcon /> should render ChevronLeftIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/ChevronRightIcon/__snapshots__/ChevronRightIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ChevronRightIcon/__snapshots__/ChevronRightIcon.native.test.tsx.snap
index 2d169b48d9e..41d4b311f99 100644
--- a/packages/blade/src/components/Icons/ChevronRightIcon/__snapshots__/ChevronRightIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronRightIcon/__snapshots__/ChevronRightIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ChevronRightIcon /> should render ChevronRightIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ChevronRightIcon /> should render ChevronRightIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ChevronRightIcon /> should render ChevronRightIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<ChevronRightIcon /> should render ChevronRightIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/ChevronUpIcon/__snapshots__/ChevronUpIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ChevronUpIcon/__snapshots__/ChevronUpIcon.native.test.tsx.snap
index 81720ad7fed..3e6918bdba4 100644
--- a/packages/blade/src/components/Icons/ChevronUpIcon/__snapshots__/ChevronUpIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronUpIcon/__snapshots__/ChevronUpIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ChevronUpIcon /> should render ChevronUpIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ChevronUpIcon /> should render ChevronUpIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ChevronUpIcon /> should render ChevronUpIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<ChevronUpIcon /> should render ChevronUpIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/ChevronsDownIcon/__snapshots__/ChevronsDownIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ChevronsDownIcon/__snapshots__/ChevronsDownIcon.native.test.tsx.snap
index 82d93893cca..177be455c5d 100644
--- a/packages/blade/src/components/Icons/ChevronsDownIcon/__snapshots__/ChevronsDownIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronsDownIcon/__snapshots__/ChevronsDownIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ChevronsDownIcon /> should render ChevronsDownIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ChevronsDownIcon /> should render ChevronsDownIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ChevronsDownIcon /> should render ChevronsDownIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<ChevronsDownIcon /> should render ChevronsDownIcon 1`] = `
         d="M7.70711 5.29289C7.31658 4.90237 6.68342 4.90237 6.29289 5.29289C5.90237 5.68342 5.90237 6.31658 6.29289 6.70711L11.2929 11.7071C11.6834 12.0976 12.3166 12.0976 12.7071 11.7071L17.7071 6.70711C18.0976 6.31658 18.0976 5.68342 17.7071 5.29289C17.3166 4.90237 16.6834 4.90237 16.2929 5.29289L12 9.58579L7.70711 5.29289Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<ChevronsDownIcon /> should render ChevronsDownIcon 1`] = `
         d="M7.70711 12.2929C7.31658 11.9024 6.68342 11.9024 6.29289 12.2929C5.90237 12.6834 5.90237 13.3166 6.29289 13.7071L11.2929 18.7071C11.6834 19.0976 12.3166 19.0976 12.7071 18.7071L17.7071 13.7071C18.0976 13.3166 18.0976 12.6834 17.7071 12.2929C17.3166 11.9024 16.6834 11.9024 16.2929 12.2929L12 16.5858L7.70711 12.2929Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/ChevronsLeftIcon/__snapshots__/ChevronsLeftIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ChevronsLeftIcon/__snapshots__/ChevronsLeftIcon.native.test.tsx.snap
index 875b23e97c2..ada19c4fba6 100644
--- a/packages/blade/src/components/Icons/ChevronsLeftIcon/__snapshots__/ChevronsLeftIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronsLeftIcon/__snapshots__/ChevronsLeftIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ChevronsLeftIcon /> should render ChevronsLeftIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ChevronsLeftIcon /> should render ChevronsLeftIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ChevronsLeftIcon /> should render ChevronsLeftIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<ChevronsLeftIcon /> should render ChevronsLeftIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/ChevronsRightIcon/__snapshots__/ChevronsRightIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ChevronsRightIcon/__snapshots__/ChevronsRightIcon.native.test.tsx.snap
index d035c2bb7c8..1383535db56 100644
--- a/packages/blade/src/components/Icons/ChevronsRightIcon/__snapshots__/ChevronsRightIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronsRightIcon/__snapshots__/ChevronsRightIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ChevronsRightIcon /> should render ChevronsRightIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ChevronsRightIcon /> should render ChevronsRightIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ChevronsRightIcon /> should render ChevronsRightIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<ChevronsRightIcon /> should render ChevronsRightIcon 1`] = `
         d="M6.70711 6.29289C6.31658 5.90237 5.68342 5.90237 5.29289 6.29289C4.90237 6.68342 4.90237 7.31658 5.29289 7.70711L9.58579 12L5.29289 16.2929C4.90237 16.6834 4.90237 17.3166 5.29289 17.7071C5.68342 18.0976 6.31658 18.0976 6.70711 17.7071L11.7071 12.7071C12.0976 12.3166 12.0976 11.6834 11.7071 11.2929L6.70711 6.29289Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<ChevronsRightIcon /> should render ChevronsRightIcon 1`] = `
         d="M13.7071 6.29289C13.3166 5.90237 12.6834 5.90237 12.2929 6.29289C11.9024 6.68342 11.9024 7.31658 12.2929 7.70711L16.5858 12L12.2929 16.2929C11.9024 16.6834 11.9024 17.3166 12.2929 17.7071C12.6834 18.0976 13.3166 18.0976 13.7071 17.7071L18.7071 12.7071C19.0976 12.3166 19.0976 11.6834 18.7071 11.2929L13.7071 6.29289Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/ChevronsUpIcon/__snapshots__/ChevronsUpIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ChevronsUpIcon/__snapshots__/ChevronsUpIcon.native.test.tsx.snap
index 8877c668126..7bbd6dd3c05 100644
--- a/packages/blade/src/components/Icons/ChevronsUpIcon/__snapshots__/ChevronsUpIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChevronsUpIcon/__snapshots__/ChevronsUpIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ChevronsUpIcon /> should render ChevronsUpIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ChevronsUpIcon /> should render ChevronsUpIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ChevronsUpIcon /> should render ChevronsUpIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<ChevronsUpIcon /> should render ChevronsUpIcon 1`] = `
         d="M12.7071 5.29289C12.3166 4.90237 11.6834 4.90237 11.2929 5.29289L6.29289 10.2929C5.90237 10.6834 5.90237 11.3166 6.29289 11.7071C6.68342 12.0976 7.31658 12.0976 7.70711 11.7071L12 7.41421L16.2929 11.7071C16.6834 12.0976 17.3166 12.0976 17.7071 11.7071C18.0976 11.3166 18.0976 10.6834 17.7071 10.2929L12.7071 5.29289Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<ChevronsUpIcon /> should render ChevronsUpIcon 1`] = `
         d="M17.7071 17.2929L12.7071 12.2929C12.3166 11.9024 11.6834 11.9024 11.2929 12.2929L6.29289 17.2929C5.90237 17.6834 5.90237 18.3166 6.29289 18.7071C6.68342 19.0976 7.31658 19.0976 7.70711 18.7071L12 14.4142L16.2929 18.7071C16.6834 19.0976 17.3166 19.0976 17.7071 18.7071C18.0976 18.3166 18.0976 17.6834 17.7071 17.2929Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/ChromeIcon/__snapshots__/ChromeIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ChromeIcon/__snapshots__/ChromeIcon.native.test.tsx.snap
index 9de125ff2da..e023fbaa3fc 100644
--- a/packages/blade/src/components/Icons/ChromeIcon/__snapshots__/ChromeIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ChromeIcon/__snapshots__/ChromeIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ChromeIcon /> should render ChromeIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ChromeIcon /> should render ChromeIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ChromeIcon /> should render ChromeIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<ChromeIcon /> should render ChromeIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/CircleIcon/__snapshots__/CircleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CircleIcon/__snapshots__/CircleIcon.native.test.tsx.snap
index 1ce4c25c212..bab01824dd5 100644
--- a/packages/blade/src/components/Icons/CircleIcon/__snapshots__/CircleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CircleIcon/__snapshots__/CircleIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CircleIcon /> should render CircleIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CircleIcon /> should render CircleIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CircleIcon /> should render CircleIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<CircleIcon /> should render CircleIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/ClipboardIcon/__snapshots__/ClipboardIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ClipboardIcon/__snapshots__/ClipboardIcon.native.test.tsx.snap
index eaf4e574215..902e0df028d 100644
--- a/packages/blade/src/components/Icons/ClipboardIcon/__snapshots__/ClipboardIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ClipboardIcon/__snapshots__/ClipboardIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ClipboardIcon /> should render ClipboardIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ClipboardIcon /> should render ClipboardIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ClipboardIcon /> should render ClipboardIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<ClipboardIcon /> should render ClipboardIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/ClockIcon/__snapshots__/ClockIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ClockIcon/__snapshots__/ClockIcon.native.test.tsx.snap
index 165a33fdd33..3bc3c48805f 100644
--- a/packages/blade/src/components/Icons/ClockIcon/__snapshots__/ClockIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ClockIcon/__snapshots__/ClockIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ClockIcon /> should render ClockIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ClockIcon /> should render ClockIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ClockIcon /> should render ClockIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<ClockIcon /> should render ClockIcon 1`] = `
         d="M13 6a1 1 0 1 0-2 0v6a1 1 0 0 0 .293.707l3 3a1 1 0 0 0 1.414-1.414L13 11.586V6Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -64,7 +64,7 @@ exports[`<ClockIcon /> should render ClockIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/CloseIcon/__snapshots__/CloseIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CloseIcon/__snapshots__/CloseIcon.native.test.tsx.snap
index 440494c8b30..0de5d1f7429 100644
--- a/packages/blade/src/components/Icons/CloseIcon/__snapshots__/CloseIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CloseIcon/__snapshots__/CloseIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CloseIcon /> should render CloseIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CloseIcon /> should render CloseIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CloseIcon /> should render CloseIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<CloseIcon /> should render CloseIcon 1`] = `
         d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/CloudDrizzleIcon/__snapshots__/CloudDrizzleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CloudDrizzleIcon/__snapshots__/CloudDrizzleIcon.native.test.tsx.snap
index 496abaad02c..b77b3d71cb1 100644
--- a/packages/blade/src/components/Icons/CloudDrizzleIcon/__snapshots__/CloudDrizzleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CloudDrizzleIcon/__snapshots__/CloudDrizzleIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CloudDrizzleIcon /> should render CloudDrizzleIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CloudDrizzleIcon /> should render CloudDrizzleIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CloudDrizzleIcon /> should render CloudDrizzleIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -56,7 +56,7 @@ exports[`<CloudDrizzleIcon /> should render CloudDrizzleIcon 1`] = `
           d="M9.50019 0.0145815C5.59012 -0.205596 1.9865 2.12799 0.587786 5.78596C-0.810924 9.44392 0.316386 13.5865 3.37582 16.0313C3.80727 16.376 4.43653 16.3058 4.7813 15.8743C5.12607 15.4429 5.0558 14.8136 4.62435 14.4688C2.24479 12.5673 1.36799 9.34535 2.45588 6.50026C3.54376 3.65518 6.34658 1.84017 9.38774 2.01142C12.4289 2.18267 15.0102 4.30086 15.7718 7.25009C15.8859 7.69159 16.2841 8.00006 16.7401 8.00006H17.9993C19.8914 8.00247 21.5231 9.33036 21.9098 11.1826C22.2965 13.035 21.3323 14.9049 19.5989 15.6641C19.093 15.8856 18.8625 16.4753 19.0841 16.9812C19.3056 17.4871 19.8954 17.7176 20.4013 17.4961C23.0013 16.3573 24.4476 13.5524 23.8676 10.7739C23.2875 7.99532 20.8397 6.0034 18.0013 6.00006H17.4796C16.2801 2.60323 13.1473 0.219954 9.50019 0.0145815Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -65,7 +65,7 @@ exports[`<CloudDrizzleIcon /> should render CloudDrizzleIcon 1`] = `
           d="M8 12.0001C8.55229 12.0001 9 12.4478 9 13.0001V15.0001C9 15.5523 8.55229 16.0001 8 16.0001C7.44772 16.0001 7 15.5523 7 15.0001V13.0001C7 12.4478 7.44772 12.0001 8 12.0001Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -74,7 +74,7 @@ exports[`<CloudDrizzleIcon /> should render CloudDrizzleIcon 1`] = `
           d="M8 18.0001C8.55229 18.0001 9 18.4478 9 19.0001V21.0001C9 21.5523 8.55229 22.0001 8 22.0001C7.44772 22.0001 7 21.5523 7 21.0001V19.0001C7 18.4478 7.44772 18.0001 8 18.0001Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -83,7 +83,7 @@ exports[`<CloudDrizzleIcon /> should render CloudDrizzleIcon 1`] = `
           d="M17 19.0001C17 18.4478 16.5523 18.0001 16 18.0001C15.4477 18.0001 15 18.4478 15 19.0001V21.0001C15 21.5523 15.4477 22.0001 16 22.0001C16.5523 22.0001 17 21.5523 17 21.0001V19.0001Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -92,7 +92,7 @@ exports[`<CloudDrizzleIcon /> should render CloudDrizzleIcon 1`] = `
           d="M16 12.0001C16.5523 12.0001 17 12.4478 17 13.0001V15.0001C17 15.5523 16.5523 16.0001 16 16.0001C15.4477 16.0001 15 15.5523 15 15.0001V13.0001C15 12.4478 15.4477 12.0001 16 12.0001Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -101,7 +101,7 @@ exports[`<CloudDrizzleIcon /> should render CloudDrizzleIcon 1`] = `
           d="M13 21.0001C13 20.4478 12.5523 20.0001 12 20.0001C11.4477 20.0001 11 20.4478 11 21.0001V23.0001C11 23.5523 11.4477 24.0001 12 24.0001C12.5523 24.0001 13 23.5523 13 23.0001V21.0001Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -110,7 +110,7 @@ exports[`<CloudDrizzleIcon /> should render CloudDrizzleIcon 1`] = `
           d="M12 14.0001C12.5523 14.0001 13 14.4478 13 15.0001V17.0001C13 17.5523 12.5523 18.0001 12 18.0001C11.4477 18.0001 11 17.5523 11 17.0001V15.0001C11 14.4478 11.4477 14.0001 12 14.0001Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -124,7 +124,7 @@ exports[`<CloudDrizzleIcon /> should render CloudDrizzleIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/CloudIcon/__snapshots__/CloudIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CloudIcon/__snapshots__/CloudIcon.native.test.tsx.snap
index 9bdc46f0ee5..e8c58cca4bd 100644
--- a/packages/blade/src/components/Icons/CloudIcon/__snapshots__/CloudIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CloudIcon/__snapshots__/CloudIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CloudIcon /> should render CloudIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CloudIcon /> should render CloudIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CloudIcon /> should render CloudIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -58,7 +58,7 @@ exports[`<CloudIcon /> should render CloudIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -73,7 +73,7 @@ exports[`<CloudIcon /> should render CloudIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/CloudLightningIcon/__snapshots__/CloudLightningIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CloudLightningIcon/__snapshots__/CloudLightningIcon.native.test.tsx.snap
index e4f15e6c961..eb18f3871e7 100644
--- a/packages/blade/src/components/Icons/CloudLightningIcon/__snapshots__/CloudLightningIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CloudLightningIcon/__snapshots__/CloudLightningIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CloudLightningIcon /> should render CloudLightningIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CloudLightningIcon /> should render CloudLightningIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CloudLightningIcon /> should render CloudLightningIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -56,7 +56,7 @@ exports[`<CloudLightningIcon /> should render CloudLightningIcon 1`] = `
           d="M0.587786 5.78596C1.9865 2.12799 5.59012 -0.205596 9.50019 0.0145815C13.1473 0.219954 16.2801 2.60323 17.4796 6.00006H18.0013C20.8397 6.0034 23.2875 7.99532 23.8676 10.7739C24.4476 13.5524 23.0013 16.3573 20.4013 17.4961C19.8954 17.7176 19.3056 17.4871 19.0841 16.9812C18.8625 16.4753 19.093 15.8856 19.5989 15.6641C21.3323 14.9049 22.2965 13.035 21.9098 11.1826C21.5231 9.33036 19.8914 8.00247 17.9993 8.00006H16.7401C16.2841 8.00006 15.8859 7.69159 15.7718 7.25009C15.0102 4.30086 12.4289 2.18267 9.38774 2.01142C6.34658 1.84017 3.54376 3.65518 2.45588 6.50026C1.36799 9.34535 2.24479 12.5673 4.62435 14.4688C5.0558 14.8136 5.12607 15.4429 4.7813 15.8743C4.43653 16.3058 3.80727 16.376 3.37582 16.0313C0.316386 13.5865 -0.810924 9.44392 0.587786 5.78596Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -65,7 +65,7 @@ exports[`<CloudLightningIcon /> should render CloudLightningIcon 1`] = `
           d="M13.8321 11.5547C14.1384 11.0952 14.0142 10.4743 13.5547 10.168C13.0952 9.86164 12.4743 9.98582 12.168 10.4453L8.16795 16.4453C7.96338 16.7522 7.94431 17.1467 8.11833 17.4719C8.29235 17.7971 8.63121 18 9 18H13.1315L10.168 22.4453C9.8616 22.9049 9.98577 23.5257 10.4453 23.8321C10.9048 24.1384 11.5257 24.0143 11.8321 23.5547L15.8321 17.5547C16.0366 17.2479 16.0557 16.8533 15.8817 16.5282C15.7077 16.203 15.3688 16 15 16H10.8685L13.8321 11.5547Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -79,7 +79,7 @@ exports[`<CloudLightningIcon /> should render CloudLightningIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/CloudOffIcon/__snapshots__/CloudOffIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CloudOffIcon/__snapshots__/CloudOffIcon.native.test.tsx.snap
index 440f4371203..a1a0ec02f4f 100644
--- a/packages/blade/src/components/Icons/CloudOffIcon/__snapshots__/CloudOffIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CloudOffIcon/__snapshots__/CloudOffIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CloudOffIcon /> should render CloudOffIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CloudOffIcon /> should render CloudOffIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CloudOffIcon /> should render CloudOffIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -58,7 +58,7 @@ exports[`<CloudOffIcon /> should render CloudOffIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -73,7 +73,7 @@ exports[`<CloudOffIcon /> should render CloudOffIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/CloudRainIcon/__snapshots__/CloudRainIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CloudRainIcon/__snapshots__/CloudRainIcon.native.test.tsx.snap
index 7859ca4f782..5726f305b23 100644
--- a/packages/blade/src/components/Icons/CloudRainIcon/__snapshots__/CloudRainIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CloudRainIcon/__snapshots__/CloudRainIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CloudRainIcon /> should render CloudRainIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CloudRainIcon /> should render CloudRainIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CloudRainIcon /> should render CloudRainIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -56,7 +56,7 @@ exports[`<CloudRainIcon /> should render CloudRainIcon 1`] = `
           d="M9.50019 0.0145815C5.59012 -0.205596 1.9865 2.12799 0.587786 5.78596C-0.810924 9.44392 0.316386 13.5865 3.37582 16.0313C3.80727 16.376 4.43653 16.3058 4.7813 15.8743C5.12607 15.4429 5.0558 14.8136 4.62435 14.4688C2.24479 12.5673 1.36799 9.34535 2.45588 6.50026C3.54376 3.65518 6.34658 1.84017 9.38774 2.01142C12.4289 2.18267 15.0102 4.30086 15.7718 7.25009C15.8859 7.69159 16.2841 8.00006 16.7401 8.00006H17.9993C19.8914 8.00247 21.5231 9.33036 21.9098 11.1826C22.2965 13.035 21.3323 14.9049 19.5989 15.6641C19.093 15.8856 18.8625 16.4753 19.0841 16.9812C19.3056 17.4871 19.8954 17.7176 20.4013 17.4961C23.0013 16.3573 24.4476 13.5524 23.8676 10.7739C23.2875 7.99532 20.8397 6.0034 18.0013 6.00006H17.4796C16.2801 2.60323 13.1473 0.219954 9.50019 0.0145815Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -65,7 +65,7 @@ exports[`<CloudRainIcon /> should render CloudRainIcon 1`] = `
           d="M9.00006 13.0001C9.00006 12.4478 8.55235 12.0001 8.00006 12.0001C7.44778 12.0001 7.00006 12.4478 7.00006 13.0001V21.0001C7.00006 21.5523 7.44778 22.0001 8.00006 22.0001C8.55235 22.0001 9.00006 21.5523 9.00006 21.0001V13.0001Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -74,7 +74,7 @@ exports[`<CloudRainIcon /> should render CloudRainIcon 1`] = `
           d="M17.0001 13.0001C17.0001 12.4478 16.5523 12.0001 16.0001 12.0001C15.4478 12.0001 15.0001 12.4478 15.0001 13.0001V21.0001C15.0001 21.5523 15.4478 22.0001 16.0001 22.0001C16.5523 22.0001 17.0001 21.5523 17.0001 21.0001V13.0001Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -83,7 +83,7 @@ exports[`<CloudRainIcon /> should render CloudRainIcon 1`] = `
           d="M12.0001 14.0001C12.5523 14.0001 13.0001 14.4478 13.0001 15.0001V23.0001C13.0001 23.5523 12.5523 24.0001 12.0001 24.0001C11.4478 24.0001 11.0001 23.5523 11.0001 23.0001V15.0001C11.0001 14.4478 11.4478 14.0001 12.0001 14.0001Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -97,7 +97,7 @@ exports[`<CloudRainIcon /> should render CloudRainIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/CloudSnowIcon/__snapshots__/CloudSnowIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CloudSnowIcon/__snapshots__/CloudSnowIcon.native.test.tsx.snap
index 26c3ab900ad..7172169fb3b 100644
--- a/packages/blade/src/components/Icons/CloudSnowIcon/__snapshots__/CloudSnowIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CloudSnowIcon/__snapshots__/CloudSnowIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CloudSnowIcon /> should render CloudSnowIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CloudSnowIcon /> should render CloudSnowIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CloudSnowIcon /> should render CloudSnowIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -56,7 +56,7 @@ exports[`<CloudSnowIcon /> should render CloudSnowIcon 1`] = `
           d="M8.08235 1.04655C9.50123 0.902065 10.9341 1.09686 12.2629 1.61487C13.5918 2.13288 14.7784 2.95928 15.7252 4.02595C16.498 4.89662 17.0928 5.90703 17.4793 6.99996H18.0012C19.3783 7.00158 20.713 7.47691 21.7812 8.34616C22.8494 9.21541 23.586 10.4257 23.8675 11.7738C24.1489 13.1219 23.958 14.5258 23.3268 15.7498C22.6957 16.9738 21.6626 17.9435 20.4011 18.496C19.8953 18.7175 19.3055 18.487 19.084 17.9811C18.8624 17.4752 19.0929 16.8855 19.5988 16.664C20.4398 16.2956 21.1285 15.6492 21.5493 14.8332C21.97 14.0172 22.0973 13.0812 21.9097 12.1825C21.722 11.2838 21.231 10.4769 20.5188 9.89742C19.8068 9.31801 18.9172 9.00113 17.9992 8.99996H16.74C16.284 8.99996 15.8857 8.69149 15.7717 8.24999C15.4944 7.17595 14.9657 6.1832 14.2294 5.35357C13.493 4.52394 12.5701 3.88119 11.5365 3.47829C10.503 3.07539 9.38853 2.92388 8.28496 3.03626C7.18139 3.14863 6.12032 3.52167 5.18922 4.12462C4.25812 4.72757 3.48364 5.54317 2.92963 6.50419C2.37561 7.46521 2.05792 8.54414 2.00275 9.65205C1.94757 10.76 2.15648 11.8651 2.61226 12.8764C3.06805 13.8877 3.75765 14.7763 4.62424 15.4687C5.05569 15.8135 5.12596 16.4428 4.78119 16.8742C4.43642 17.3057 3.80716 17.3759 3.37571 17.0312C2.26153 16.1408 1.3749 14.9985 0.788889 13.6982C0.202881 12.3979 -0.0657213 10.977 0.00522189 9.55257C0.0761651 8.12812 0.484622 6.74092 1.19693 5.50532C1.90923 4.26972 2.90498 3.22109 4.10212 2.44586C5.29925 1.67064 6.66347 1.19103 8.08235 1.04655Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -65,7 +65,7 @@ exports[`<CloudSnowIcon /> should render CloudSnowIcon 1`] = `
           d="M7 16C7 15.4477 7.44772 15 8 15H8.01C8.56228 15 9.01 15.4477 9.01 16C9.01 16.5522 8.56228 17 8.01 17H8C7.44772 17 7 16.5522 7 16Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -74,7 +74,7 @@ exports[`<CloudSnowIcon /> should render CloudSnowIcon 1`] = `
           d="M8 19C7.44772 19 7 19.4477 7 20C7 20.5522 7.44772 21 8 21H8.01C8.56228 21 9.01 20.5522 9.01 20C9.01 19.4477 8.56228 19 8.01 19H8Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -83,7 +83,7 @@ exports[`<CloudSnowIcon /> should render CloudSnowIcon 1`] = `
           d="M11 18C11 17.4477 11.4477 17 12 17H12.01C12.5623 17 13.01 17.4477 13.01 18C13.01 18.5522 12.5623 19 12.01 19H12C11.4477 19 11 18.5522 11 18Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -92,7 +92,7 @@ exports[`<CloudSnowIcon /> should render CloudSnowIcon 1`] = `
           d="M12 21C11.4477 21 11 21.4477 11 22C11 22.5522 11.4477 23 12 23H12.01C12.5623 23 13.01 22.5522 13.01 22C13.01 21.4477 12.5623 21 12.01 21H12Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -101,7 +101,7 @@ exports[`<CloudSnowIcon /> should render CloudSnowIcon 1`] = `
           d="M15 16C15 15.4477 15.4477 15 16 15H16.01C16.5623 15 17.01 15.4477 17.01 16C17.01 16.5522 16.5623 17 16.01 17H16C15.4477 17 15 16.5522 15 16Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -110,7 +110,7 @@ exports[`<CloudSnowIcon /> should render CloudSnowIcon 1`] = `
           d="M16 19C15.4477 19 15 19.4477 15 20C15 20.5522 15.4477 21 16 21H16.01C16.5623 21 17.01 20.5522 17.01 20C17.01 19.4477 16.5623 19 16.01 19H16Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -124,7 +124,7 @@ exports[`<CloudSnowIcon /> should render CloudSnowIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/CodepenIcon/__snapshots__/CodepenIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CodepenIcon/__snapshots__/CodepenIcon.native.test.tsx.snap
index 9948a012ef1..80c415d609f 100644
--- a/packages/blade/src/components/Icons/CodepenIcon/__snapshots__/CodepenIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CodepenIcon/__snapshots__/CodepenIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CodepenIcon /> should render CodepenIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CodepenIcon /> should render CodepenIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CodepenIcon /> should render CodepenIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<CodepenIcon /> should render CodepenIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/CoinsIcon/__snapshots__/CoinsIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CoinsIcon/__snapshots__/CoinsIcon.native.test.tsx.snap
index 3183c9beb87..153978ddbab 100644
--- a/packages/blade/src/components/Icons/CoinsIcon/__snapshots__/CoinsIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CoinsIcon/__snapshots__/CoinsIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CoinsIcon /> should render CoinsIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CoinsIcon /> should render CoinsIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CoinsIcon /> should render CoinsIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<CoinsIcon /> should render CoinsIcon 1`] = `
         d="M15 4C10.58 4 7 7.58 7 12C7 16.42 10.58 20 15 20C19.42 20 23 16.42 23 12C23 7.58 19.42 4 15 4ZM15 18C11.69 18 9 15.31 9 12C9 8.69 11.69 6 15 6C18.31 6 21 8.69 21 12C21 15.31 18.31 18 15 18ZM3 12C3 9.61 4.4 7.54 6.43 6.58C6.77 6.42 7 6.11 7 5.74V5.55C7 4.87 6.29 4.44 5.68 4.73C2.92 5.99 1 8.77 1 12C1 15.23 2.92 18.01 5.68 19.27C6.29 19.55 7 19.13 7 18.45V18.27C7 17.9 6.77 17.58 6.43 17.42C4.4 16.46 3 14.39 3 12Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/CommandIcon/__snapshots__/CommandIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CommandIcon/__snapshots__/CommandIcon.native.test.tsx.snap
index fbca29f82a0..ae33f89278b 100644
--- a/packages/blade/src/components/Icons/CommandIcon/__snapshots__/CommandIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CommandIcon/__snapshots__/CommandIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CommandIcon /> should render CommandIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CommandIcon /> should render CommandIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CommandIcon /> should render CommandIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<CommandIcon /> should render CommandIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/CompassIcon/__snapshots__/CompassIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CompassIcon/__snapshots__/CompassIcon.native.test.tsx.snap
index f8209c299a5..4020a665702 100644
--- a/packages/blade/src/components/Icons/CompassIcon/__snapshots__/CompassIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CompassIcon/__snapshots__/CompassIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CompassIcon /> should render CompassIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CompassIcon /> should render CompassIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CompassIcon /> should render CompassIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<CompassIcon /> should render CompassIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<CompassIcon /> should render CompassIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/CopyIcon/__snapshots__/CopyIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CopyIcon/__snapshots__/CopyIcon.native.test.tsx.snap
index 96902b38ac6..7e73beb6e23 100644
--- a/packages/blade/src/components/Icons/CopyIcon/__snapshots__/CopyIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CopyIcon/__snapshots__/CopyIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CopyIcon /> should render CopyIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CopyIcon /> should render CopyIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CopyIcon /> should render CopyIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<CopyIcon /> should render CopyIcon 1`] = `
         d="M3 4C3 3.44772 3.44772 3 4 3H13C13.5523 3 14 3.44772 14 4V5C14 5.55228 14.4477 6 15 6C15.5523 6 16 5.55228 16 5V4C16 2.34315 14.6569 1 13 1H4C2.34315 1 1 2.34315 1 4V13C1 14.6569 2.34315 16 4 16H5C5.55228 16 6 15.5523 6 15C6 14.4477 5.55228 14 5 14H4C3.44772 14 3 13.5523 3 13V4Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -64,7 +64,7 @@ exports[`<CopyIcon /> should render CopyIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/CornerDownLeftIcon/__snapshots__/CornerDownLeftIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CornerDownLeftIcon/__snapshots__/CornerDownLeftIcon.native.test.tsx.snap
index 6d19a974df6..409c4002b0f 100644
--- a/packages/blade/src/components/Icons/CornerDownLeftIcon/__snapshots__/CornerDownLeftIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerDownLeftIcon/__snapshots__/CornerDownLeftIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CornerDownLeftIcon /> should render CornerDownLeftIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CornerDownLeftIcon /> should render CornerDownLeftIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CornerDownLeftIcon /> should render CornerDownLeftIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<CornerDownLeftIcon /> should render CornerDownLeftIcon 1`] = `
         d="M21 4C21 3.44772 20.5523 3 20 3C19.4477 3 19 3.44772 19 4V11C19 12.6569 17.6569 14 16 14H6.41421L9.70711 10.7071C10.0976 10.3166 10.0976 9.68342 9.70711 9.29289C9.31658 8.90237 8.68342 8.90237 8.29289 9.29289L3.29289 14.2929C2.90237 14.6834 2.90237 15.3166 3.29289 15.7071L8.29289 20.7071C8.68342 21.0976 9.31658 21.0976 9.70711 20.7071C10.0976 20.3166 10.0976 19.6834 9.70711 19.2929L6.41421 16H16C18.7614 16 21 13.7614 21 11V4Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/CornerDownRightIcon/__snapshots__/CornerDownRightIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CornerDownRightIcon/__snapshots__/CornerDownRightIcon.native.test.tsx.snap
index 8600c8662b0..fe8bd3c288a 100644
--- a/packages/blade/src/components/Icons/CornerDownRightIcon/__snapshots__/CornerDownRightIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerDownRightIcon/__snapshots__/CornerDownRightIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CornerDownRightIcon /> should render CornerDownRightIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CornerDownRightIcon /> should render CornerDownRightIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CornerDownRightIcon /> should render CornerDownRightIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<CornerDownRightIcon /> should render CornerDownRightIcon 1`] = `
         d="M5 4C5 3.44772 4.55228 3 4 3C3.44772 3 3 3.44772 3 4V11C3 13.7614 5.23858 16 8 16H17.5858L14.2929 19.2929C13.9024 19.6834 13.9024 20.3166 14.2929 20.7071C14.6834 21.0976 15.3166 21.0976 15.7071 20.7071L20.7071 15.7071C21.0976 15.3166 21.0976 14.6834 20.7071 14.2929L15.7071 9.29289C15.3166 8.90237 14.6834 8.90237 14.2929 9.29289C13.9024 9.68342 13.9024 10.3166 14.2929 10.7071L17.5858 14H8C6.34315 14 5 12.6569 5 11V4Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/CornerLeftDownIcon/__snapshots__/CornerLeftDownIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CornerLeftDownIcon/__snapshots__/CornerLeftDownIcon.native.test.tsx.snap
index a1c432c3731..9c53856a3f8 100644
--- a/packages/blade/src/components/Icons/CornerLeftDownIcon/__snapshots__/CornerLeftDownIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerLeftDownIcon/__snapshots__/CornerLeftDownIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CornerLeftDownIcon /> should render CornerLeftDownIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CornerLeftDownIcon /> should render CornerLeftDownIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CornerLeftDownIcon /> should render CornerLeftDownIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<CornerLeftDownIcon /> should render CornerLeftDownIcon 1`] = `
         d="M13 3C10.2386 3 8 5.23858 8 8V17.5858L4.70711 14.2929C4.31658 13.9024 3.68342 13.9024 3.29289 14.2929C2.90237 14.6834 2.90237 15.3166 3.29289 15.7071L8.29289 20.7071C8.68342 21.0976 9.31658 21.0976 9.70711 20.7071L14.7071 15.7071C15.0976 15.3166 15.0976 14.6834 14.7071 14.2929C14.3166 13.9024 13.6834 13.9024 13.2929 14.2929L10 17.5858V8C10 6.34315 11.3431 5 13 5H20C20.5523 5 21 4.55228 21 4C21 3.44772 20.5523 3 20 3H13Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/CornerLeftUpIcon/__snapshots__/CornerLeftUpIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CornerLeftUpIcon/__snapshots__/CornerLeftUpIcon.native.test.tsx.snap
index 1c9a94feb2e..e3ee8f26782 100644
--- a/packages/blade/src/components/Icons/CornerLeftUpIcon/__snapshots__/CornerLeftUpIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerLeftUpIcon/__snapshots__/CornerLeftUpIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CornerLeftUpIcon /> should render CornerLeftUpIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CornerLeftUpIcon /> should render CornerLeftUpIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CornerLeftUpIcon /> should render CornerLeftUpIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<CornerLeftUpIcon /> should render CornerLeftUpIcon 1`] = `
         d="M9.70711 3.29289C9.31658 2.90237 8.68342 2.90237 8.29289 3.29289L3.29289 8.29289C2.90237 8.68342 2.90237 9.31658 3.29289 9.70711C3.68342 10.0976 4.31658 10.0976 4.70711 9.70711L8 6.41421V16C8 18.7614 10.2386 21 13 21H20C20.5523 21 21 20.5523 21 20C21 19.4477 20.5523 19 20 19H13C11.3431 19 10 17.6569 10 16V6.41421L13.2929 9.70711C13.6834 10.0976 14.3166 10.0976 14.7071 9.70711C15.0976 9.31658 15.0976 8.68342 14.7071 8.29289L9.70711 3.29289Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/CornerRightDownIcon/__snapshots__/CornerRightDownIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CornerRightDownIcon/__snapshots__/CornerRightDownIcon.native.test.tsx.snap
index 22c6589b043..b1b8f89a2ce 100644
--- a/packages/blade/src/components/Icons/CornerRightDownIcon/__snapshots__/CornerRightDownIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerRightDownIcon/__snapshots__/CornerRightDownIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CornerRightDownIcon /> should render CornerRightDownIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CornerRightDownIcon /> should render CornerRightDownIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CornerRightDownIcon /> should render CornerRightDownIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<CornerRightDownIcon /> should render CornerRightDownIcon 1`] = `
         d="M4 3C3.44772 3 3 3.44772 3 4C3 4.55228 3.44772 5 4 5H11C12.6569 5 14 6.34315 14 8V17.5858L10.7071 14.2929C10.3166 13.9024 9.68342 13.9024 9.29289 14.2929C8.90237 14.6834 8.90237 15.3166 9.29289 15.7071L14.2929 20.7071C14.6834 21.0976 15.3166 21.0976 15.7071 20.7071L20.7071 15.7071C21.0976 15.3166 21.0976 14.6834 20.7071 14.2929C20.3166 13.9024 19.6834 13.9024 19.2929 14.2929L16 17.5858V8C16 5.23858 13.7614 3 11 3H4Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/CornerRightUpIcon/__snapshots__/CornerRightUpIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CornerRightUpIcon/__snapshots__/CornerRightUpIcon.native.test.tsx.snap
index 11b734649a7..143d7f9fea2 100644
--- a/packages/blade/src/components/Icons/CornerRightUpIcon/__snapshots__/CornerRightUpIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerRightUpIcon/__snapshots__/CornerRightUpIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CornerRightUpIcon /> should render CornerRightUpIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CornerRightUpIcon /> should render CornerRightUpIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CornerRightUpIcon /> should render CornerRightUpIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<CornerRightUpIcon /> should render CornerRightUpIcon 1`] = `
         d="M15.7071 3.29289C15.3166 2.90237 14.6834 2.90237 14.2929 3.29289L9.29289 8.29289C8.90237 8.68342 8.90237 9.31658 9.29289 9.70711C9.68342 10.0976 10.3166 10.0976 10.7071 9.70711L14 6.41421V16C14 17.6569 12.6569 19 11 19H4C3.44772 19 3 19.4477 3 20C3 20.5523 3.44772 21 4 21H11C13.7614 21 16 18.7614 16 16V6.41421L19.2929 9.70711C19.6834 10.0976 20.3166 10.0976 20.7071 9.70711C21.0976 9.31658 21.0976 8.68342 20.7071 8.29289L15.7071 3.29289Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/CornerUpLeftIcon/__snapshots__/CornerUpLeftIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CornerUpLeftIcon/__snapshots__/CornerUpLeftIcon.native.test.tsx.snap
index 13aeaf22353..7f1630c023c 100644
--- a/packages/blade/src/components/Icons/CornerUpLeftIcon/__snapshots__/CornerUpLeftIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerUpLeftIcon/__snapshots__/CornerUpLeftIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CornerUpLeftIcon /> should render CornerUpLeftIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CornerUpLeftIcon /> should render CornerUpLeftIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CornerUpLeftIcon /> should render CornerUpLeftIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<CornerUpLeftIcon /> should render CornerUpLeftIcon 1`] = `
         d="M9.70711 4.70711C10.0976 4.31658 10.0976 3.68342 9.70711 3.29289C9.31658 2.90237 8.68342 2.90237 8.29289 3.29289L3.29289 8.29289C2.90237 8.68342 2.90237 9.31658 3.29289 9.70711L8.29289 14.7071C8.68342 15.0976 9.31658 15.0976 9.70711 14.7071C10.0976 14.3166 10.0976 13.6834 9.70711 13.2929L6.41421 10H16C17.6569 10 19 11.3431 19 13V20C19 20.5523 19.4477 21 20 21C20.5523 21 21 20.5523 21 20V13C21 10.2386 18.7614 8 16 8H6.41421L9.70711 4.70711Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/CornerUpRightIcon/__snapshots__/CornerUpRightIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CornerUpRightIcon/__snapshots__/CornerUpRightIcon.native.test.tsx.snap
index bac23222bf8..2e90a62fab1 100644
--- a/packages/blade/src/components/Icons/CornerUpRightIcon/__snapshots__/CornerUpRightIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CornerUpRightIcon/__snapshots__/CornerUpRightIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CornerUpRightIcon /> should render CornerUpRightIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CornerUpRightIcon /> should render CornerUpRightIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CornerUpRightIcon /> should render CornerUpRightIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<CornerUpRightIcon /> should render CornerUpRightIcon 1`] = `
         d="M15.7071 3.29289C15.3166 2.90237 14.6834 2.90237 14.2929 3.29289C13.9024 3.68342 13.9024 4.31658 14.2929 4.70711L17.5858 8H8C5.23858 8 3 10.2386 3 13V20C3 20.5523 3.44772 21 4 21C4.55228 21 5 20.5523 5 20V13C5 11.3431 6.34315 10 8 10H17.5858L14.2929 13.2929C13.9024 13.6834 13.9024 14.3166 14.2929 14.7071C14.6834 15.0976 15.3166 15.0976 15.7071 14.7071L20.7071 9.70711C21.0976 9.31658 21.0976 8.68342 20.7071 8.29289L15.7071 3.29289Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/CpuIcon/__snapshots__/CpuIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CpuIcon/__snapshots__/CpuIcon.native.test.tsx.snap
index b34ca0f5b0b..edb56f901b9 100644
--- a/packages/blade/src/components/Icons/CpuIcon/__snapshots__/CpuIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CpuIcon/__snapshots__/CpuIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CpuIcon /> should render CpuIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CpuIcon /> should render CpuIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CpuIcon /> should render CpuIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -58,7 +58,7 @@ exports[`<CpuIcon /> should render CpuIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -70,7 +70,7 @@ exports[`<CpuIcon /> should render CpuIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -85,7 +85,7 @@ exports[`<CpuIcon /> should render CpuIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/CreditCardIcon/__snapshots__/CreditCardIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CreditCardIcon/__snapshots__/CreditCardIcon.native.test.tsx.snap
index 87aac5d05e2..ba13214363d 100644
--- a/packages/blade/src/components/Icons/CreditCardIcon/__snapshots__/CreditCardIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CreditCardIcon/__snapshots__/CreditCardIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CreditCardIcon /> should render CreditCardIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CreditCardIcon /> should render CreditCardIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CreditCardIcon /> should render CreditCardIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<CreditCardIcon /> should render CreditCardIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/CropIcon/__snapshots__/CropIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CropIcon/__snapshots__/CropIcon.native.test.tsx.snap
index ae494f954b7..967deab2c80 100644
--- a/packages/blade/src/components/Icons/CropIcon/__snapshots__/CropIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CropIcon/__snapshots__/CropIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CropIcon /> should render CropIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CropIcon /> should render CropIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CropIcon /> should render CropIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -58,7 +58,7 @@ exports[`<CropIcon /> should render CropIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -73,7 +73,7 @@ exports[`<CropIcon /> should render CropIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/CrosshairIcon/__snapshots__/CrosshairIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CrosshairIcon/__snapshots__/CrosshairIcon.native.test.tsx.snap
index 88831ce45fb..f963167368b 100644
--- a/packages/blade/src/components/Icons/CrosshairIcon/__snapshots__/CrosshairIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CrosshairIcon/__snapshots__/CrosshairIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CrosshairIcon /> should render CrosshairIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CrosshairIcon /> should render CrosshairIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CrosshairIcon /> should render CrosshairIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<CrosshairIcon /> should render CrosshairIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/CustomersIcon/__snapshots__/CustomersIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CustomersIcon/__snapshots__/CustomersIcon.native.test.tsx.snap
index 485a894e0a2..1a16aafe4bc 100644
--- a/packages/blade/src/components/Icons/CustomersIcon/__snapshots__/CustomersIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CustomersIcon/__snapshots__/CustomersIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CustomersIcon /> should render CustomersIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CustomersIcon /> should render CustomersIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CustomersIcon /> should render CustomersIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<CustomersIcon /> should render CustomersIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/CutIcon/__snapshots__/CutIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/CutIcon/__snapshots__/CutIcon.native.test.tsx.snap
index 730fb4828fe..3f1761b51bc 100644
--- a/packages/blade/src/components/Icons/CutIcon/__snapshots__/CutIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/CutIcon/__snapshots__/CutIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<CutIcon /> should render CutIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<CutIcon /> should render CutIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<CutIcon /> should render CutIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -57,7 +57,7 @@ exports[`<CutIcon /> should render CutIcon 1`] = `
           d="M6 9C7.65685 9 9 7.65685 9 6C9 4.34315 7.65685 3 6 3C4.34315 3 3 4.34315 3 6C3 7.65685 4.34315 9 6 9Z"
           fillRule={0}
           propList={
-            Array [
+            [
               "fillRule",
               "stroke",
               "strokeWidth",
@@ -75,7 +75,7 @@ exports[`<CutIcon /> should render CutIcon 1`] = `
           d="M6 21C7.65685 21 9 19.6569 9 18C9 16.3431 7.65685 15 6 15C4.34315 15 3 16.3431 3 18C3 19.6569 4.34315 21 6 21Z"
           fillRule={0}
           propList={
-            Array [
+            [
               "fillRule",
               "stroke",
               "strokeWidth",
@@ -91,7 +91,7 @@ exports[`<CutIcon /> should render CutIcon 1`] = `
         <RNSVGPath
           d="M20 4L8.12 15.88"
           propList={
-            Array [
+            [
               "stroke",
               "strokeWidth",
               "strokeLinecap",
@@ -106,7 +106,7 @@ exports[`<CutIcon /> should render CutIcon 1`] = `
         <RNSVGPath
           d="M14.47 14.48L20 20"
           propList={
-            Array [
+            [
               "stroke",
               "strokeWidth",
               "strokeLinecap",
@@ -121,7 +121,7 @@ exports[`<CutIcon /> should render CutIcon 1`] = `
         <RNSVGPath
           d="M8.12 8.12L12 12"
           propList={
-            Array [
+            [
               "stroke",
               "strokeWidth",
               "strokeLinecap",
@@ -142,7 +142,7 @@ exports[`<CutIcon /> should render CutIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/DashboardIcon/__snapshots__/DashboardIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/DashboardIcon/__snapshots__/DashboardIcon.native.test.tsx.snap
index f39d1646bac..f46563ef792 100644
--- a/packages/blade/src/components/Icons/DashboardIcon/__snapshots__/DashboardIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DashboardIcon/__snapshots__/DashboardIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<DashboardIcon /> should render DashboardIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<DashboardIcon /> should render DashboardIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<DashboardIcon /> should render DashboardIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<DashboardIcon /> should render DashboardIcon 1`] = `
         d="M19.7778 2H4.22222C3 2 2 3 2 4.22222V19.7778C2 21 3 22 4.22222 22H19.7778C21 22 22 21 22 19.7778V4.22222C22 3 21 2 19.7778 2ZM8.66667 17.5556H6.44444V9.77778H8.66667V17.5556ZM13.1111 17.5556H10.8889V6.44444H13.1111V17.5556ZM17.5556 17.5556H15.3333V13.1111H17.5556V17.5556Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/DeleteIcon/__snapshots__/DeleteIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/DeleteIcon/__snapshots__/DeleteIcon.native.test.tsx.snap
index a25caa43cfd..0479481ac22 100644
--- a/packages/blade/src/components/Icons/DeleteIcon/__snapshots__/DeleteIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DeleteIcon/__snapshots__/DeleteIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<DeleteIcon /> should render DeleteIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<DeleteIcon /> should render DeleteIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<DeleteIcon /> should render DeleteIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<DeleteIcon /> should render DeleteIcon 1`] = `
         d="M18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L16.4142 12L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L15 13.4142L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071C10.9024 15.3166 10.9024 14.6834 11.2929 14.2929L13.5858 12L11.2929 9.70711C10.9024 9.31658 10.9024 8.68342 11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L15 10.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -64,7 +64,7 @@ exports[`<DeleteIcon /> should render DeleteIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/DiscIcon/__snapshots__/DiscIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/DiscIcon/__snapshots__/DiscIcon.native.test.tsx.snap
index ed51b7f0d8d..726ec06a0e1 100644
--- a/packages/blade/src/components/Icons/DiscIcon/__snapshots__/DiscIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DiscIcon/__snapshots__/DiscIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<DiscIcon /> should render DiscIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<DiscIcon /> should render DiscIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<DiscIcon /> should render DiscIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<DiscIcon /> should render DiscIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<DiscIcon /> should render DiscIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/DollarIcon/__snapshots__/DollarIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/DollarIcon/__snapshots__/DollarIcon.native.test.tsx.snap
index 6bdf89144b7..a0c80e10c34 100644
--- a/packages/blade/src/components/Icons/DollarIcon/__snapshots__/DollarIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DollarIcon/__snapshots__/DollarIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<DollarIcon /> should render DollarIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<DollarIcon /> should render DollarIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<DollarIcon /> should render DollarIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<DollarIcon /> should render DollarIcon 1`] = `
         d="M11.3963 21L11.4488 3H12.6824L12.6299 21H11.3963ZM14.8609 8.58281C14.7909 7.91719 14.5022 7.40156 13.9948 7.03594C13.4873 6.66563 12.8486 6.48047 12.0787 6.48047C11.5276 6.48047 11.0507 6.57422 10.6483 6.76172C10.2458 6.94453 9.93307 7.19766 9.70997 7.52109C9.49125 7.83984 9.38189 8.20313 9.38189 8.61094C9.38189 8.95313 9.45626 9.24844 9.60499 9.49688C9.75809 9.74531 9.95713 9.95391 10.2021 10.1227C10.4514 10.2867 10.7183 10.425 11.0026 10.5375C11.287 10.6453 11.5604 10.7344 11.8228 10.8047L13.1352 11.1703C13.5639 11.2828 14.0035 11.4352 14.4541 11.6273C14.9046 11.8195 15.3224 12.0727 15.7073 12.3867C16.0923 12.7008 16.4029 13.0898 16.6391 13.5539C16.8797 14.018 17 14.5734 17 15.2203C17 16.0359 16.8032 16.7602 16.4094 17.393C16.0201 18.0258 15.4536 18.525 14.71 18.8906C13.9707 19.2563 13.0761 19.4391 12.0262 19.4391C11.0201 19.4391 10.1496 19.268 9.4147 18.9258C8.67979 18.5836 8.10455 18.0984 7.68898 17.4703C7.2734 16.8375 7.04374 16.0875 7 15.2203H9.03412C9.07349 15.7406 9.23097 16.1742 9.50656 16.5211C9.78653 16.8633 10.143 17.1188 10.5761 17.2875C11.0136 17.4516 11.4926 17.5336 12.0131 17.5336C12.5862 17.5336 13.0958 17.4375 13.542 17.2453C13.9926 17.0484 14.3469 16.7766 14.605 16.4297C14.8631 16.0781 14.9921 15.668 14.9921 15.1992C14.9921 14.7727 14.8784 14.4234 14.6509 14.1516C14.4278 13.8797 14.1238 13.6547 13.7388 13.4766C13.3583 13.2984 12.9274 13.1414 12.4462 13.0055L10.8583 12.5414C9.78215 12.2273 8.92913 11.7656 8.29921 11.1563C7.67367 10.5469 7.36089 9.74063 7.36089 8.7375C7.36089 7.90781 7.57087 7.18359 7.99081 6.56484C8.41076 5.94609 8.97944 5.46563 9.69685 5.12344C10.4143 4.77656 11.2235 4.60313 12.1247 4.60313C13.0346 4.60313 13.8373 4.77422 14.5328 5.11641C15.2327 5.45859 15.7839 5.92969 16.1864 6.52969C16.5888 7.125 16.7988 7.80938 16.8163 8.58281H14.8609Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/DollarsIcon/__snapshots__/DollarsIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/DollarsIcon/__snapshots__/DollarsIcon.native.test.tsx.snap
index 6624da8ad45..b952c888f14 100644
--- a/packages/blade/src/components/Icons/DollarsIcon/__snapshots__/DollarsIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DollarsIcon/__snapshots__/DollarsIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<DollarsIcon /> should render DollarsIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<DollarsIcon /> should render DollarsIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<DollarsIcon /> should render DollarsIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<DollarsIcon /> should render DollarsIcon 1`] = `
         d="M11.3963 21L11.4488 3H12.6824L12.6299 21H11.3963ZM14.8609 8.58281C14.7909 7.91719 14.5022 7.40156 13.9948 7.03594C13.4873 6.66563 12.8486 6.48047 12.0787 6.48047C11.5276 6.48047 11.0507 6.57422 10.6483 6.76172C10.2458 6.94453 9.93307 7.19766 9.70997 7.52109C9.49125 7.83984 9.38189 8.20313 9.38189 8.61094C9.38189 8.95313 9.45626 9.24844 9.60499 9.49688C9.75809 9.74531 9.95713 9.95391 10.2021 10.1227C10.4514 10.2867 10.7183 10.425 11.0026 10.5375C11.287 10.6453 11.5604 10.7344 11.8228 10.8047L13.1352 11.1703C13.5639 11.2828 14.0035 11.4352 14.4541 11.6273C14.9046 11.8195 15.3224 12.0727 15.7073 12.3867C16.0923 12.7008 16.4029 13.0898 16.6391 13.5539C16.8797 14.018 17 14.5734 17 15.2203C17 16.0359 16.8032 16.7602 16.4094 17.393C16.0201 18.0258 15.4536 18.525 14.71 18.8906C13.9707 19.2563 13.0761 19.4391 12.0262 19.4391C11.0201 19.4391 10.1496 19.268 9.4147 18.9258C8.67979 18.5836 8.10455 18.0984 7.68898 17.4703C7.2734 16.8375 7.04374 16.0875 7 15.2203H9.03412C9.07349 15.7406 9.23097 16.1742 9.50656 16.5211C9.78653 16.8633 10.143 17.1188 10.5761 17.2875C11.0136 17.4516 11.4926 17.5336 12.0131 17.5336C12.5862 17.5336 13.0958 17.4375 13.542 17.2453C13.9926 17.0484 14.3469 16.7766 14.605 16.4297C14.8631 16.0781 14.9921 15.668 14.9921 15.1992C14.9921 14.7727 14.8784 14.4234 14.6509 14.1516C14.4278 13.8797 14.1238 13.6547 13.7388 13.4766C13.3583 13.2984 12.9274 13.1414 12.4462 13.0055L10.8583 12.5414C9.78215 12.2273 8.92913 11.7656 8.29921 11.1563C7.67367 10.5469 7.36089 9.74063 7.36089 8.7375C7.36089 7.90781 7.57087 7.18359 7.99081 6.56484C8.41076 5.94609 8.97944 5.46563 9.69685 5.12344C10.4143 4.77656 11.2235 4.60313 12.1247 4.60313C13.0346 4.60313 13.8373 4.77422 14.5328 5.11641C15.2327 5.45859 15.7839 5.92969 16.1864 6.52969C16.5888 7.125 16.7988 7.80938 16.8163 8.58281H14.8609Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/DownloadCloudIcon/__snapshots__/DownloadCloudIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/DownloadCloudIcon/__snapshots__/DownloadCloudIcon.native.test.tsx.snap
index 8bbec8e6320..d49f5e83484 100644
--- a/packages/blade/src/components/Icons/DownloadCloudIcon/__snapshots__/DownloadCloudIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DownloadCloudIcon/__snapshots__/DownloadCloudIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<DownloadCloudIcon /> should render DownloadCloudIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<DownloadCloudIcon /> should render DownloadCloudIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<DownloadCloudIcon /> should render DownloadCloudIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -56,7 +56,7 @@ exports[`<DownloadCloudIcon /> should render DownloadCloudIcon 1`] = `
           d="M10.0209 3.04746C6.31707 2.62087 2.73368 4.52209 1.01031 7.82818C-0.713067 11.1343 -0.219588 15.1607 2.25118 17.9527C2.61719 18.3663 3.24917 18.4049 3.66277 18.0389C4.07636 17.6729 4.11494 17.0409 3.74894 16.6273C1.82723 14.4557 1.44341 11.3241 2.78382 8.75267C4.12422 6.18126 6.9113 4.70253 9.79204 5.03433C12.6728 5.36612 15.0507 7.43975 15.7714 10.2485C15.8849 10.6908 16.2835 11 16.7401 11L18.0008 11C19.7457 10.9986 21.2901 12.1285 21.8172 13.7919C22.3442 15.4552 21.7322 17.2683 20.3048 18.272C19.8531 18.5897 19.7444 19.2135 20.0621 19.6652C20.3797 20.117 21.0035 20.2257 21.4553 19.908C23.5962 18.4025 24.5143 15.6829 23.7238 13.1878C22.9333 10.693 20.6163 8.9983 17.9993 9L17.4807 9C16.3464 5.77429 13.4628 3.44389 10.0209 3.04746Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -65,7 +65,7 @@ exports[`<DownloadCloudIcon /> should render DownloadCloudIcon 1`] = `
           d="M12 12C12.5523 12 13 12.4477 13 13V19.5858L15.2929 17.2929C15.6834 16.9024 16.3166 16.9024 16.7071 17.2929C17.0976 17.6834 17.0976 18.3166 16.7071 18.7071L12.7071 22.7071C12.3166 23.0976 11.6834 23.0976 11.2929 22.7071L7.29289 18.7071C6.90237 18.3166 6.90237 17.6834 7.29289 17.2929C7.68342 16.9024 8.31658 16.9024 8.70711 17.2929L11 19.5858V13C11 12.4477 11.4477 12 12 12Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -79,7 +79,7 @@ exports[`<DownloadCloudIcon /> should render DownloadCloudIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/DownloadIcon/__snapshots__/DownloadIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/DownloadIcon/__snapshots__/DownloadIcon.native.test.tsx.snap
index 91bcd502a44..1aeef8cbf39 100644
--- a/packages/blade/src/components/Icons/DownloadIcon/__snapshots__/DownloadIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DownloadIcon/__snapshots__/DownloadIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<DownloadIcon /> should render DownloadIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<DownloadIcon /> should render DownloadIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<DownloadIcon /> should render DownloadIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<DownloadIcon /> should render DownloadIcon 1`] = `
         d="M13 2a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 0 0-1.414 1.414l4 4 .007.007a.996.996 0 0 0 .697.286h.006c.272 0 .518-.11.697-.286l.008-.008 4-3.999a1 1 0 0 0-1.415-1.414L13 13.586V2Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<DownloadIcon /> should render DownloadIcon 1`] = `
         d="M3 16a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3a1 1 0 1 1 2 0v3a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-3a1 1 0 0 1 1-1Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/DropletIcon/__snapshots__/DropletIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/DropletIcon/__snapshots__/DropletIcon.native.test.tsx.snap
index 8ebb451b281..b5ac78493ba 100644
--- a/packages/blade/src/components/Icons/DropletIcon/__snapshots__/DropletIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/DropletIcon/__snapshots__/DropletIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<DropletIcon /> should render DropletIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<DropletIcon /> should render DropletIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<DropletIcon /> should render DropletIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<DropletIcon /> should render DropletIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/EditComposeIcon/__snapshots__/EditComposeIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/EditComposeIcon/__snapshots__/EditComposeIcon.native.test.tsx.snap
index e6a777d6d3d..941fc5b4048 100644
--- a/packages/blade/src/components/Icons/EditComposeIcon/__snapshots__/EditComposeIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/EditComposeIcon/__snapshots__/EditComposeIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<EditComposeIcon /> should render EditComposeIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<EditComposeIcon /> should render EditComposeIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<EditComposeIcon /> should render EditComposeIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<EditComposeIcon /> should render EditComposeIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -65,7 +65,7 @@ exports[`<EditComposeIcon /> should render EditComposeIcon 1`] = `
         d="M4 5C4 4.44772 4.44772 4 5 4H10.34C10.8923 4 11.34 3.55228 11.34 3C11.34 2.44772 10.8923 2 10.34 2H5C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V13.66C22 13.1077 21.5523 12.66 21 12.66C20.4477 12.66 20 13.1077 20 13.66V19C20 19.5523 19.5523 20 19 20H5C4.44772 20 4 19.5523 4 19V5Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/EditIcon/__snapshots__/EditIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/EditIcon/__snapshots__/EditIcon.native.test.tsx.snap
index e02d89290be..3eed7acea95 100644
--- a/packages/blade/src/components/Icons/EditIcon/__snapshots__/EditIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/EditIcon/__snapshots__/EditIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<EditIcon /> should render EditIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<EditIcon /> should render EditIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<EditIcon /> should render EditIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<EditIcon /> should render EditIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/EditInlineIcon/__snapshots__/EditInlineIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/EditInlineIcon/__snapshots__/EditInlineIcon.native.test.tsx.snap
index b9775da180b..dffdddce949 100644
--- a/packages/blade/src/components/Icons/EditInlineIcon/__snapshots__/EditInlineIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/EditInlineIcon/__snapshots__/EditInlineIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<EditInlineIcon /> should render EditInlineIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<EditInlineIcon /> should render EditInlineIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<EditInlineIcon /> should render EditInlineIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<EditInlineIcon /> should render EditInlineIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -65,7 +65,7 @@ exports[`<EditInlineIcon /> should render EditInlineIcon 1`] = `
         d="M3 21C2.44772 21 2 21.4477 2 22C2 22.5523 2.44772 23 3 23H21C21.5523 23 22 22.5523 22 22C22 21.4477 21.5523 21 21 21H3Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/ExportIcon/__snapshots__/ExportIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ExportIcon/__snapshots__/ExportIcon.native.test.tsx.snap
index 96493e4113a..103ca7d321e 100644
--- a/packages/blade/src/components/Icons/ExportIcon/__snapshots__/ExportIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ExportIcon/__snapshots__/ExportIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ExportIcon /> should render ExportIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ExportIcon /> should render ExportIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ExportIcon /> should render ExportIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<ExportIcon /> should render ExportIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<ExportIcon /> should render ExportIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -79,7 +79,7 @@ exports[`<ExportIcon /> should render ExportIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/ExternalLinkIcon/__snapshots__/ExternalLinkIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ExternalLinkIcon/__snapshots__/ExternalLinkIcon.native.test.tsx.snap
index 49dc37607b2..aadf3de4f74 100644
--- a/packages/blade/src/components/Icons/ExternalLinkIcon/__snapshots__/ExternalLinkIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ExternalLinkIcon/__snapshots__/ExternalLinkIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ExternalLinkIcon /> should render ExternalLinkIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ExternalLinkIcon /> should render ExternalLinkIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ExternalLinkIcon /> should render ExternalLinkIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<ExternalLinkIcon /> should render ExternalLinkIcon 1`] = `
         d="M14 3C14 2.44772 14.4477 2 15 2H21C21.5523 2 22 2.44772 22 3V9C22 9.55228 21.5523 10 21 10C20.4477 10 20 9.55228 20 9V5.41421L10.7071 14.7071C10.3166 15.0976 9.68342 15.0976 9.29289 14.7071C8.90237 14.3166 8.90237 13.6834 9.29289 13.2929L18.5858 4H15C14.4477 4 14 3.55228 14 3Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<ExternalLinkIcon /> should render ExternalLinkIcon 1`] = `
         d="M5 7C4.44772 7 4 7.44772 4 8V19C4 19.5523 4.44772 20 5 20H16C16.5523 20 17 19.5523 17 19V13C17 12.4477 17.4477 12 18 12C18.5523 12 19 12.4477 19 13V19C19 20.6569 17.6569 22 16 22H5C3.34315 22 2 20.6569 2 19V8C2 6.34315 3.34315 5 5 5H11C11.5523 5 12 5.44772 12 6C12 6.55228 11.5523 7 11 7H5Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/EyeIcon/__snapshots__/EyeIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/EyeIcon/__snapshots__/EyeIcon.native.test.tsx.snap
index 069f2945250..dab3f8c3636 100644
--- a/packages/blade/src/components/Icons/EyeIcon/__snapshots__/EyeIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/EyeIcon/__snapshots__/EyeIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<EyeIcon /> should render EyeIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<EyeIcon /> should render EyeIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<EyeIcon /> should render EyeIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<EyeIcon /> should render EyeIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<EyeIcon /> should render EyeIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/EyeOffIcon/__snapshots__/EyeOffIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/EyeOffIcon/__snapshots__/EyeOffIcon.native.test.tsx.snap
index 72649293510..d94d9bae023 100644
--- a/packages/blade/src/components/Icons/EyeOffIcon/__snapshots__/EyeOffIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/EyeOffIcon/__snapshots__/EyeOffIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<EyeOffIcon /> should render EyeOffIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<EyeOffIcon /> should render EyeOffIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<EyeOffIcon /> should render EyeOffIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -58,7 +58,7 @@ exports[`<EyeOffIcon /> should render EyeOffIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -73,7 +73,7 @@ exports[`<EyeOffIcon /> should render EyeOffIcon 1`] = `
             fill={null}
             height="100%"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/FacebookIcon/__snapshots__/FacebookIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FacebookIcon/__snapshots__/FacebookIcon.native.test.tsx.snap
index d16860781d8..b70ae1f2ced 100644
--- a/packages/blade/src/components/Icons/FacebookIcon/__snapshots__/FacebookIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FacebookIcon/__snapshots__/FacebookIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<FacebookIcon /> should render FacebookIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<FacebookIcon /> should render FacebookIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<FacebookIcon /> should render FacebookIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<FacebookIcon /> should render FacebookIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/FastForwardIcon/__snapshots__/FastForwardIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FastForwardIcon/__snapshots__/FastForwardIcon.native.test.tsx.snap
index 7c33d46a8cf..1e16539a30a 100644
--- a/packages/blade/src/components/Icons/FastForwardIcon/__snapshots__/FastForwardIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FastForwardIcon/__snapshots__/FastForwardIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<FastForwardIcon /> should render FastForwardIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<FastForwardIcon /> should render FastForwardIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<FastForwardIcon /> should render FastForwardIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<FastForwardIcon /> should render FastForwardIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/FeatherIcon/__snapshots__/FeatherIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FeatherIcon/__snapshots__/FeatherIcon.native.test.tsx.snap
index aaa28875806..9b5809f0d62 100644
--- a/packages/blade/src/components/Icons/FeatherIcon/__snapshots__/FeatherIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FeatherIcon/__snapshots__/FeatherIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<FeatherIcon /> should render FeatherIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<FeatherIcon /> should render FeatherIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<FeatherIcon /> should render FeatherIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<FeatherIcon /> should render FeatherIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/FileIcon/__snapshots__/FileIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FileIcon/__snapshots__/FileIcon.native.test.tsx.snap
index 3a23bd2e363..764b70e6818 100644
--- a/packages/blade/src/components/Icons/FileIcon/__snapshots__/FileIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FileIcon/__snapshots__/FileIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<FileIcon /> should render FileIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<FileIcon /> should render FileIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<FileIcon /> should render FileIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<FileIcon /> should render FileIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/FileMinusIcon/__snapshots__/FileMinusIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FileMinusIcon/__snapshots__/FileMinusIcon.native.test.tsx.snap
index bdf847ae0c7..4e3a24404b4 100644
--- a/packages/blade/src/components/Icons/FileMinusIcon/__snapshots__/FileMinusIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FileMinusIcon/__snapshots__/FileMinusIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<FileMinusIcon /> should render FileMinusIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<FileMinusIcon /> should render FileMinusIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<FileMinusIcon /> should render FileMinusIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<FileMinusIcon /> should render FileMinusIcon 1`] = `
         d="M9 14C8.44772 14 8 14.4477 8 15C8 15.5523 8.44772 16 9 16H15C15.5523 16 16 15.5523 16 15C16 14.4477 15.5523 14 15 14H9Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -64,7 +64,7 @@ exports[`<FileMinusIcon /> should render FileMinusIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/FilePlusIcon/__snapshots__/FilePlusIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FilePlusIcon/__snapshots__/FilePlusIcon.native.test.tsx.snap
index 234637ca476..0c8155b8f23 100644
--- a/packages/blade/src/components/Icons/FilePlusIcon/__snapshots__/FilePlusIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FilePlusIcon/__snapshots__/FilePlusIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<FilePlusIcon /> should render FilePlusIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<FilePlusIcon /> should render FilePlusIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<FilePlusIcon /> should render FilePlusIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<FilePlusIcon /> should render FilePlusIcon 1`] = `
         d="M12 11C12.5523 11 13 11.4477 13 12V14H15C15.5523 14 16 14.4477 16 15C16 15.5523 15.5523 16 15 16H13V18C13 18.5523 12.5523 19 12 19C11.4477 19 11 18.5523 11 18V16H9C8.44772 16 8 15.5523 8 15C8 14.4477 8.44772 14 9 14H11V12C11 11.4477 11.4477 11 12 11Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -64,7 +64,7 @@ exports[`<FilePlusIcon /> should render FilePlusIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/FileTextIcon/__snapshots__/FileTextIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FileTextIcon/__snapshots__/FileTextIcon.native.test.tsx.snap
index 5d9d0198060..4dad48b4305 100644
--- a/packages/blade/src/components/Icons/FileTextIcon/__snapshots__/FileTextIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FileTextIcon/__snapshots__/FileTextIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<FileTextIcon /> should render FileTextIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<FileTextIcon /> should render FileTextIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<FileTextIcon /> should render FileTextIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<FileTextIcon /> should render FileTextIcon 1`] = `
         d="M8 12C7.44772 12 7 12.4477 7 13C7 13.5523 7.44772 14 8 14H16C16.5523 14 17 13.5523 17 13C17 12.4477 16.5523 12 16 12H8Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<FileTextIcon /> should render FileTextIcon 1`] = `
         d="M7 17C7 16.4477 7.44772 16 8 16H16C16.5523 16 17 16.4477 17 17C17 17.5523 16.5523 18 16 18H8C7.44772 18 7 17.5523 7 17Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -71,7 +71,7 @@ exports[`<FileTextIcon /> should render FileTextIcon 1`] = `
         d="M8 8C7.44772 8 7 8.44772 7 9C7 9.55229 7.44772 10 8 10H10C10.5523 10 11 9.55229 11 9C11 8.44772 10.5523 8 10 8H8Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -82,7 +82,7 @@ exports[`<FileTextIcon /> should render FileTextIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/FilmIcon/__snapshots__/FilmIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FilmIcon/__snapshots__/FilmIcon.native.test.tsx.snap
index 06659d492a8..db301e84b74 100644
--- a/packages/blade/src/components/Icons/FilmIcon/__snapshots__/FilmIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FilmIcon/__snapshots__/FilmIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<FilmIcon /> should render FilmIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<FilmIcon /> should render FilmIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<FilmIcon /> should render FilmIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<FilmIcon /> should render FilmIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/FilterIcon/__snapshots__/FilterIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FilterIcon/__snapshots__/FilterIcon.native.test.tsx.snap
index 7fa3686e0ab..bc48e1c460f 100644
--- a/packages/blade/src/components/Icons/FilterIcon/__snapshots__/FilterIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FilterIcon/__snapshots__/FilterIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<FilterIcon /> should render FilterIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<FilterIcon /> should render FilterIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<FilterIcon /> should render FilterIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<FilterIcon /> should render FilterIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/FlagIcon/__snapshots__/FlagIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FlagIcon/__snapshots__/FlagIcon.native.test.tsx.snap
index 9f3b7532e7f..b5070adde24 100644
--- a/packages/blade/src/components/Icons/FlagIcon/__snapshots__/FlagIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FlagIcon/__snapshots__/FlagIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<FlagIcon /> should render FlagIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<FlagIcon /> should render FlagIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<FlagIcon /> should render FlagIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<FlagIcon /> should render FlagIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/FolderIcon/__snapshots__/FolderIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FolderIcon/__snapshots__/FolderIcon.native.test.tsx.snap
index f67cd8ab6ce..ad6ab19a436 100644
--- a/packages/blade/src/components/Icons/FolderIcon/__snapshots__/FolderIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FolderIcon/__snapshots__/FolderIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<FolderIcon /> should render FolderIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<FolderIcon /> should render FolderIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<FolderIcon /> should render FolderIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<FolderIcon /> should render FolderIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/FullScreenEnterIcon/__snapshots__/FullScreenEnterIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FullScreenEnterIcon/__snapshots__/FullScreenEnterIcon.native.test.tsx.snap
index 4305ba5215a..af4fcb8ee46 100644
--- a/packages/blade/src/components/Icons/FullScreenEnterIcon/__snapshots__/FullScreenEnterIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FullScreenEnterIcon/__snapshots__/FullScreenEnterIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<FullScreenEnterIcon /> should render FullScreenEnterIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<FullScreenEnterIcon /> should render FullScreenEnterIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<FullScreenEnterIcon /> should render FullScreenEnterIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<FullScreenEnterIcon /> should render FullScreenEnterIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/FullScreenExitIcon/__snapshots__/FullScreenExitIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FullScreenExitIcon/__snapshots__/FullScreenExitIcon.native.test.tsx.snap
index feb6510e416..b4453974449 100644
--- a/packages/blade/src/components/Icons/FullScreenExitIcon/__snapshots__/FullScreenExitIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/FullScreenExitIcon/__snapshots__/FullScreenExitIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<FullScreenExitIcon /> should render FullScreenExitIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<FullScreenExitIcon /> should render FullScreenExitIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<FullScreenExitIcon /> should render FullScreenExitIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<FullScreenExitIcon /> should render FullScreenExitIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/GithubIcon/__snapshots__/GithubIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/GithubIcon/__snapshots__/GithubIcon.native.test.tsx.snap
index 8e460ddaca8..882962cd9e6 100644
--- a/packages/blade/src/components/Icons/GithubIcon/__snapshots__/GithubIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/GithubIcon/__snapshots__/GithubIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<GithubIcon /> should render GithubIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<GithubIcon /> should render GithubIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<GithubIcon /> should render GithubIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -58,7 +58,7 @@ exports[`<GithubIcon /> should render GithubIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -73,7 +73,7 @@ exports[`<GithubIcon /> should render GithubIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/GitlabIcon/__snapshots__/GitlabIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/GitlabIcon/__snapshots__/GitlabIcon.native.test.tsx.snap
index ac6631f0f46..fa3df38250d 100644
--- a/packages/blade/src/components/Icons/GitlabIcon/__snapshots__/GitlabIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/GitlabIcon/__snapshots__/GitlabIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<GitlabIcon /> should render GitlabIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<GitlabIcon /> should render GitlabIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<GitlabIcon /> should render GitlabIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -58,7 +58,7 @@ exports[`<GitlabIcon /> should render GitlabIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -73,7 +73,7 @@ exports[`<GitlabIcon /> should render GitlabIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/GlobeIcon/__snapshots__/GlobeIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/GlobeIcon/__snapshots__/GlobeIcon.native.test.tsx.snap
index 28bf8e73c7b..a6f9bfcb1d4 100644
--- a/packages/blade/src/components/Icons/GlobeIcon/__snapshots__/GlobeIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/GlobeIcon/__snapshots__/GlobeIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<GlobeIcon /> should render GlobeIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<GlobeIcon /> should render GlobeIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<GlobeIcon /> should render GlobeIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<GlobeIcon /> should render GlobeIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/GridIcon/__snapshots__/GridIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/GridIcon/__snapshots__/GridIcon.native.test.tsx.snap
index a62a964d3dd..b7a6dfad290 100644
--- a/packages/blade/src/components/Icons/GridIcon/__snapshots__/GridIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/GridIcon/__snapshots__/GridIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<GridIcon /> should render GridIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<GridIcon /> should render GridIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<GridIcon /> should render GridIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<GridIcon /> should render GridIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<GridIcon /> should render GridIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -79,7 +79,7 @@ exports[`<GridIcon /> should render GridIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -91,7 +91,7 @@ exports[`<GridIcon /> should render GridIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/HashIcon/__snapshots__/HashIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/HashIcon/__snapshots__/HashIcon.native.test.tsx.snap
index 87cde7cc613..5e54be0fb66 100644
--- a/packages/blade/src/components/Icons/HashIcon/__snapshots__/HashIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/HashIcon/__snapshots__/HashIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<HashIcon /> should render HashIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<HashIcon /> should render HashIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<HashIcon /> should render HashIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<HashIcon /> should render HashIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/HeadphonesIcon/__snapshots__/HeadphonesIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/HeadphonesIcon/__snapshots__/HeadphonesIcon.native.test.tsx.snap
index a020a35f4e3..755fddd113a 100644
--- a/packages/blade/src/components/Icons/HeadphonesIcon/__snapshots__/HeadphonesIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/HeadphonesIcon/__snapshots__/HeadphonesIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<HeadphonesIcon /> should render HeadphonesIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<HeadphonesIcon /> should render HeadphonesIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<HeadphonesIcon /> should render HeadphonesIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<HeadphonesIcon /> should render HeadphonesIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/HeartIcon/__snapshots__/HeartIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/HeartIcon/__snapshots__/HeartIcon.native.test.tsx.snap
index 7b6bd48b6bd..d990a52891a 100644
--- a/packages/blade/src/components/Icons/HeartIcon/__snapshots__/HeartIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/HeartIcon/__snapshots__/HeartIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<HeartIcon /> should render HeartIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<HeartIcon /> should render HeartIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<HeartIcon /> should render HeartIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<HeartIcon /> should render HeartIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/HelpCircleIcon/__snapshots__/HelpCircleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/HelpCircleIcon/__snapshots__/HelpCircleIcon.native.test.tsx.snap
index 23325e6d5f6..708327f1811 100644
--- a/packages/blade/src/components/Icons/HelpCircleIcon/__snapshots__/HelpCircleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/HelpCircleIcon/__snapshots__/HelpCircleIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<HelpCircleIcon /> should render HelpCircleIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<HelpCircleIcon /> should render HelpCircleIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<HelpCircleIcon /> should render HelpCircleIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<HelpCircleIcon /> should render HelpCircleIcon 1`] = `
         d="M12.2581 8.02434C11.2969 7.85947 10.357 8.4119 10.0333 9.33187C9.85006 9.85286 9.27914 10.1266 8.75815 9.94336C8.23716 9.76009 7.96339 9.18917 8.14666 8.66818C8.79391 6.82824 10.6738 5.72339 12.5962 6.05313C14.5184 6.38284 15.9226 8.05072 15.92 10.0009C15.9195 11.5313 14.7849 12.5419 13.9747 13.0821C13.5391 13.3725 13.1105 13.586 12.7949 13.7263C12.6356 13.7971 12.5015 13.8508 12.4049 13.8876C12.3565 13.9061 12.3173 13.9204 12.2887 13.9305L12.254 13.9427L12.2429 13.9465L12.239 13.9478L12.2375 13.9483C12.2375 13.9483 12.2362 13.9487 11.92 13L12.2362 13.9487C11.7123 14.1234 11.146 13.8402 10.9713 13.3163C10.7968 12.7927 11.0794 12.2267 11.6027 12.0517L11.6187 12.0461C11.6341 12.0406 11.6593 12.0315 11.6929 12.0187C11.7603 11.993 11.8606 11.9529 11.9826 11.8987C12.2294 11.789 12.5509 11.6276 12.8653 11.418C13.5549 10.9582 13.92 10.4692 13.92 10L13.92 9.99854C13.9214 9.0233 13.2193 8.18921 12.2581 8.02434Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<HelpCircleIcon /> should render HelpCircleIcon 1`] = `
         d="M12 18C12.5523 18 13 17.5523 13 17C13 16.4477 12.5523 16 12 16C11.4477 16 11 16.4477 11 17C11 17.5523 11.4477 18 12 18Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -73,7 +73,7 @@ exports[`<HelpCircleIcon /> should render HelpCircleIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/HistoryIcon/__snapshots__/HistoryIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/HistoryIcon/__snapshots__/HistoryIcon.native.test.tsx.snap
index 9e41d97eca9..6fd9ab9b9cd 100644
--- a/packages/blade/src/components/Icons/HistoryIcon/__snapshots__/HistoryIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/HistoryIcon/__snapshots__/HistoryIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<HistoryIcon /> should render HistoryIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<HistoryIcon /> should render HistoryIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<HistoryIcon /> should render HistoryIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<HistoryIcon /> should render HistoryIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/HomeIcon/__snapshots__/HomeIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/HomeIcon/__snapshots__/HomeIcon.native.test.tsx.snap
index d90d26491c2..f84bee48d6a 100644
--- a/packages/blade/src/components/Icons/HomeIcon/__snapshots__/HomeIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/HomeIcon/__snapshots__/HomeIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<HomeIcon /> should render HomeIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<HomeIcon /> should render HomeIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<HomeIcon /> should render HomeIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<HomeIcon /> should render HomeIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/ImageIcon/__snapshots__/ImageIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ImageIcon/__snapshots__/ImageIcon.native.test.tsx.snap
index 9d71b830d01..157415c9479 100644
--- a/packages/blade/src/components/Icons/ImageIcon/__snapshots__/ImageIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ImageIcon/__snapshots__/ImageIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ImageIcon /> should render ImageIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ImageIcon /> should render ImageIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ImageIcon /> should render ImageIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<ImageIcon /> should render ImageIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<ImageIcon /> should render ImageIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/InboxIcon/__snapshots__/InboxIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/InboxIcon/__snapshots__/InboxIcon.native.test.tsx.snap
index dc6846c8b2f..3b08efe6854 100644
--- a/packages/blade/src/components/Icons/InboxIcon/__snapshots__/InboxIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/InboxIcon/__snapshots__/InboxIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<InboxIcon /> should render InboxIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<InboxIcon /> should render InboxIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<InboxIcon /> should render InboxIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<InboxIcon /> should render InboxIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/InfoIcon/__snapshots__/InfoIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/InfoIcon/__snapshots__/InfoIcon.native.test.tsx.snap
index d92fad98bf9..f847cb6cae6 100644
--- a/packages/blade/src/components/Icons/InfoIcon/__snapshots__/InfoIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/InfoIcon/__snapshots__/InfoIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<InfoIcon /> should render InfoIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<InfoIcon /> should render InfoIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<InfoIcon /> should render InfoIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<InfoIcon /> should render InfoIcon 1`] = `
         d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<InfoIcon /> should render InfoIcon 1`] = `
         d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -73,7 +73,7 @@ exports[`<InfoIcon /> should render InfoIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/InstagramIcon/__snapshots__/InstagramIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/InstagramIcon/__snapshots__/InstagramIcon.native.test.tsx.snap
index 08200d4e49e..d46bf6d250a 100644
--- a/packages/blade/src/components/Icons/InstagramIcon/__snapshots__/InstagramIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/InstagramIcon/__snapshots__/InstagramIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<InstagramIcon /> should render InstagramIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<InstagramIcon /> should render InstagramIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<InstagramIcon /> should render InstagramIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<InstagramIcon /> should render InstagramIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<InstagramIcon /> should render InstagramIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/InvoicesIcon/__snapshots__/InvoicesIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/InvoicesIcon/__snapshots__/InvoicesIcon.native.test.tsx.snap
index c6011130172..4fcab15023e 100644
--- a/packages/blade/src/components/Icons/InvoicesIcon/__snapshots__/InvoicesIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/InvoicesIcon/__snapshots__/InvoicesIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<InvoicesIcon /> should render InvoicesIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<InvoicesIcon /> should render InvoicesIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<InvoicesIcon /> should render InvoicesIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<InvoicesIcon /> should render InvoicesIcon 1`] = `
         d="M19.7778 3.2H15.1333C14.6667 1.924 13.4444 1 12 1C10.5556 1 9.33333 1.924 8.86667 3.2H4.22222C3 3.2 2 4.19 2 5.4V20.8C2 22.01 3 23 4.22222 23H19.7778C21 23 22 22.01 22 20.8V5.4C22 4.19 21 3.2 19.7778 3.2ZM12 3.2C12.6111 3.2 13.1111 3.695 13.1111 4.3C13.1111 4.905 12.6111 5.4 12 5.4C11.3889 5.4 10.8889 4.905 10.8889 4.3C10.8889 3.695 11.3889 3.2 12 3.2ZM14.2222 18.6H6.44444V16.4H14.2222V18.6ZM17.5556 14.2H6.44444V12H17.5556V14.2ZM17.5556 9.8H6.44444V7.6H17.5556V9.8Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/ItalicIcon/__snapshots__/ItalicIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ItalicIcon/__snapshots__/ItalicIcon.native.test.tsx.snap
index d903936b7ea..160c83d3db5 100644
--- a/packages/blade/src/components/Icons/ItalicIcon/__snapshots__/ItalicIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ItalicIcon/__snapshots__/ItalicIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ItalicIcon /> should render ItalicIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ItalicIcon /> should render ItalicIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ItalicIcon /> should render ItalicIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<ItalicIcon /> should render ItalicIcon 1`] = `
         d="M15.0222 3H19C19.5523 3 20 3.44772 20 4C20 4.55228 19.5523 5 19 5H15.693L10.443 19H14C14.5523 19 15 19.4477 15 20C15 20.5523 14.5523 21 14 21H9.02418C9.00802 21.0004 8.99181 21.0004 8.97557 21H5C4.44772 21 4 20.5523 4 20C4 19.4477 4.44772 19 5 19H8.30704L13.557 5H10C9.44772 5 9 4.55228 9 4C9 3.44772 9.44772 3 10 3H14.9782C14.9928 2.99968 15.0075 2.99967 15.0222 3Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/LayersIcon/__snapshots__/LayersIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/LayersIcon/__snapshots__/LayersIcon.native.test.tsx.snap
index 33fd460b829..d916f0b2543 100644
--- a/packages/blade/src/components/Icons/LayersIcon/__snapshots__/LayersIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LayersIcon/__snapshots__/LayersIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<LayersIcon /> should render LayersIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<LayersIcon /> should render LayersIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<LayersIcon /> should render LayersIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<LayersIcon /> should render LayersIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -65,7 +65,7 @@ exports[`<LayersIcon /> should render LayersIcon 1`] = `
         d="M1.10555 16.5528C1.35254 16.0588 1.95321 15.8586 2.44719 16.1055L12 20.8819L21.5528 16.1055C22.0467 15.8586 22.6474 16.0588 22.8944 16.5528C23.1414 17.0467 22.9412 17.6474 22.4472 17.8944L12.4472 22.8944C12.1657 23.0352 11.8343 23.0352 11.5528 22.8944L1.55276 17.8944C1.05878 17.6474 0.858558 17.0467 1.10555 16.5528Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -74,7 +74,7 @@ exports[`<LayersIcon /> should render LayersIcon 1`] = `
         d="M2.44719 11.1055C1.95321 10.8586 1.35254 11.0588 1.10555 11.5528C0.858558 12.0467 1.05878 12.6474 1.55276 12.8944L11.5528 17.8944C11.8343 18.0352 12.1657 18.0352 12.4472 17.8944L22.4472 12.8944C22.9412 12.6474 23.1414 12.0467 22.8944 11.5528C22.6474 11.0588 22.0467 10.8586 21.5528 11.1055L12 15.8819L2.44719 11.1055Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/LayoutIcon/__snapshots__/LayoutIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/LayoutIcon/__snapshots__/LayoutIcon.native.test.tsx.snap
index 142c4364f9d..3fcfbdf2100 100644
--- a/packages/blade/src/components/Icons/LayoutIcon/__snapshots__/LayoutIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LayoutIcon/__snapshots__/LayoutIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<LayoutIcon /> should render LayoutIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<LayoutIcon /> should render LayoutIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<LayoutIcon /> should render LayoutIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<LayoutIcon /> should render LayoutIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/LifeBuoyIcon/__snapshots__/LifeBuoyIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/LifeBuoyIcon/__snapshots__/LifeBuoyIcon.native.test.tsx.snap
index b5b415ca294..a1ac681d44e 100644
--- a/packages/blade/src/components/Icons/LifeBuoyIcon/__snapshots__/LifeBuoyIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LifeBuoyIcon/__snapshots__/LifeBuoyIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<LifeBuoyIcon /> should render LifeBuoyIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<LifeBuoyIcon /> should render LifeBuoyIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<LifeBuoyIcon /> should render LifeBuoyIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<LifeBuoyIcon /> should render LifeBuoyIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/LinkIcon/__snapshots__/LinkIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/LinkIcon/__snapshots__/LinkIcon.native.test.tsx.snap
index dc438ae1d9e..884a11f7212 100644
--- a/packages/blade/src/components/Icons/LinkIcon/__snapshots__/LinkIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LinkIcon/__snapshots__/LinkIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<LinkIcon /> should render LinkIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<LinkIcon /> should render LinkIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<LinkIcon /> should render LinkIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<LinkIcon /> should render LinkIcon 1`] = `
         d="M20.1863 1.82377C17.8719 -0.490636 14.1296 -0.523155 11.7753 1.75068L11.765 1.7608L10.045 3.4708C9.65336 3.86019 9.65151 4.49335 10.0409 4.88501C10.4303 5.27667 11.0634 5.27852 11.4551 4.88913L13.1697 3.18451C14.7395 1.67341 17.2307 1.69666 18.772 3.23798C20.313 4.77898 20.3366 7.26948 18.8265 8.83934L15.833 11.8329C15.0124 12.6537 13.8758 13.0778 12.7181 12.9949C11.5605 12.9119 10.496 12.3303 9.80083 11.401C9.47002 10.9587 8.84333 10.8684 8.40108 11.1992C7.95883 11.53 7.86849 12.1567 8.1993 12.5989C9.24204 13.993 10.8388 14.8654 12.5753 14.9897C14.3117 15.1141 16.0165 14.4782 17.2473 13.2469L20.2472 10.2471L20.2593 10.2347C22.5332 7.8804 22.5007 4.13817 20.1863 1.82377Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<LinkIcon /> should render LinkIcon 1`] = `
         d="M9.42474 7.01016C7.68837 6.8858 5.9836 7.52171 4.75285 8.75283L1.75285 11.7528L1.74067 11.7652C-0.533165 14.1195 -0.500646 17.8617 1.81376 20.1761C4.12816 22.4905 7.8704 22.5231 10.2247 20.2492L10.2371 20.237L11.9471 18.527C12.3376 18.1365 12.3376 17.5034 11.9471 17.1128C11.5565 16.7223 10.9234 16.7223 10.5329 17.1128L8.82933 18.8164C7.25947 20.3265 4.76897 20.3029 3.22797 18.7619C1.68697 17.2209 1.66341 14.7304 3.17354 13.1606L6.16719 10.1669C6.9877 9.34611 8.12425 8.92214 9.28187 9.00505C10.4395 9.08796 11.504 9.66956 12.1992 10.5989C12.53 11.0412 13.1567 11.1315 13.5989 10.8007C14.0412 10.4699 14.1315 9.84321 13.8007 9.40096C12.758 8.00693 11.1612 7.13452 9.42474 7.01016Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/ListIcon/__snapshots__/ListIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ListIcon/__snapshots__/ListIcon.native.test.tsx.snap
index b3ea02f733c..43259c6e924 100644
--- a/packages/blade/src/components/Icons/ListIcon/__snapshots__/ListIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ListIcon/__snapshots__/ListIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ListIcon /> should render ListIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ListIcon /> should render ListIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ListIcon /> should render ListIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<ListIcon /> should render ListIcon 1`] = `
         d="M4 5C4.55228 5 5 5.44772 5 6C5 6.55228 4.55228 7 4 7H3C2.44772 7 2 6.55228 2 6C2 5.44772 2.44772 5 3 5H4Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<ListIcon /> should render ListIcon 1`] = `
         d="M8 5C7.44772 5 7 5.44772 7 6C7 6.55228 7.44772 7 8 7H21C21.5523 7 22 6.55228 22 6C22 5.44772 21.5523 5 21 5H8Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -71,7 +71,7 @@ exports[`<ListIcon /> should render ListIcon 1`] = `
         d="M8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H21C21.5523 13 22 12.5523 22 12C22 11.4477 21.5523 11 21 11H8Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -80,7 +80,7 @@ exports[`<ListIcon /> should render ListIcon 1`] = `
         d="M7 18C7 17.4477 7.44772 17 8 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H8C7.44772 19 7 18.5523 7 18Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -89,7 +89,7 @@ exports[`<ListIcon /> should render ListIcon 1`] = `
         d="M5 12C5 11.4477 4.55228 11 4 11H3C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13H4C4.55228 13 5 12.5523 5 12Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -98,7 +98,7 @@ exports[`<ListIcon /> should render ListIcon 1`] = `
         d="M4 17C4.55228 17 5 17.4477 5 18C5 18.5523 4.55228 19 4 19H3C2.44772 19 2 18.5523 2 18C2 17.4477 2.44772 17 3 17H4Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/LoaderIcon/__snapshots__/LoaderIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/LoaderIcon/__snapshots__/LoaderIcon.native.test.tsx.snap
index f5497fc0122..4bc992d0bb1 100644
--- a/packages/blade/src/components/Icons/LoaderIcon/__snapshots__/LoaderIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LoaderIcon/__snapshots__/LoaderIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<LoaderIcon /> should render LoaderIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<LoaderIcon /> should render LoaderIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<LoaderIcon /> should render LoaderIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<LoaderIcon /> should render LoaderIcon 1`] = `
         d="M13 2C13 1.44772 12.5523 1 12 1C11.4477 1 11 1.44772 11 2V6C11 6.55228 11.4477 7 12 7C12.5523 7 13 6.55228 13 6V2Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<LoaderIcon /> should render LoaderIcon 1`] = `
         d="M13 18C13 17.4477 12.5523 17 12 17C11.4477 17 11 17.4477 11 18V22C11 22.5523 11.4477 23 12 23C12.5523 23 13 22.5523 13 22V18Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -71,7 +71,7 @@ exports[`<LoaderIcon /> should render LoaderIcon 1`] = `
         d="M4.22289 4.22289C4.61341 3.83236 5.24658 3.83236 5.6371 4.22289L8.4671 7.05289C8.85762 7.44341 8.85762 8.07658 8.4671 8.4671C8.07658 8.85762 7.44341 8.85762 7.05289 8.4671L4.22289 5.6371C3.83236 5.24658 3.83236 4.61341 4.22289 4.22289Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -80,7 +80,7 @@ exports[`<LoaderIcon /> should render LoaderIcon 1`] = `
         d="M16.9471 15.5329C16.5566 15.1424 15.9234 15.1424 15.5329 15.5329C15.1424 15.9234 15.1424 16.5566 15.5329 16.9471L18.3629 19.7771C18.7534 20.1676 19.3866 20.1676 19.7771 19.7771C20.1676 19.3866 20.1676 18.7534 19.7771 18.3629L16.9471 15.5329Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -89,7 +89,7 @@ exports[`<LoaderIcon /> should render LoaderIcon 1`] = `
         d="M1 12C1 11.4477 1.44772 11 2 11H6C6.55228 11 7 11.4477 7 12C7 12.5523 6.55228 13 6 13H2C1.44772 13 1 12.5523 1 12Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -98,7 +98,7 @@ exports[`<LoaderIcon /> should render LoaderIcon 1`] = `
         d="M18 11C17.4477 11 17 11.4477 17 12C17 12.5523 17.4477 13 18 13H22C22.5523 13 23 12.5523 23 12C23 11.4477 22.5523 11 22 11H18Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -107,7 +107,7 @@ exports[`<LoaderIcon /> should render LoaderIcon 1`] = `
         d="M8.4671 15.5329C8.85762 15.9234 8.85762 16.5566 8.4671 16.9471L5.6371 19.7771C5.24658 20.1676 4.61341 20.1676 4.22289 19.7771C3.83236 19.3866 3.83236 18.7534 4.22289 18.3629L7.05289 15.5329C7.44341 15.1424 8.07658 15.1424 8.4671 15.5329Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -116,7 +116,7 @@ exports[`<LoaderIcon /> should render LoaderIcon 1`] = `
         d="M19.7771 5.6371C20.1676 5.24658 20.1676 4.61341 19.7771 4.22289C19.3866 3.83236 18.7534 3.83236 18.3629 4.22289L15.5329 7.05289C15.1424 7.44341 15.1424 8.07658 15.5329 8.4671C15.9234 8.85762 16.5566 8.85762 16.9471 8.4671L19.7771 5.6371Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/LockIcon/__snapshots__/LockIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/LockIcon/__snapshots__/LockIcon.native.test.tsx.snap
index 4209cb02e55..4fca216d4f3 100644
--- a/packages/blade/src/components/Icons/LockIcon/__snapshots__/LockIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LockIcon/__snapshots__/LockIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<LockIcon /> should render LockIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<LockIcon /> should render LockIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<LockIcon /> should render LockIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<LockIcon /> should render LockIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/LogInIcon/__snapshots__/LogInIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/LogInIcon/__snapshots__/LogInIcon.native.test.tsx.snap
index 5db8388ac39..e906bafe6ba 100644
--- a/packages/blade/src/components/Icons/LogInIcon/__snapshots__/LogInIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LogInIcon/__snapshots__/LogInIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<LogInIcon /> should render LogInIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<LogInIcon /> should render LogInIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<LogInIcon /> should render LogInIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<LogInIcon /> should render LogInIcon 1`] = `
         d="M13 2C13 1.44772 13.4477 1 14 1H19C20.6569 1 22 2.34315 22 4V20C22 21.6569 20.6569 23 19 23H14C13.4477 23 13 22.5523 13 22C13 21.4477 13.4477 21 14 21H19C19.5523 21 20 20.5523 20 20V4C20 3.44772 19.5523 3 19 3H14C13.4477 3 13 2.55228 13 2Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<LogInIcon /> should render LogInIcon 1`] = `
         d="M10.2929 7.29289C10.6834 6.90237 11.3166 6.90237 11.7071 7.29289L15.7071 11.2929C16.0976 11.6834 16.0976 12.3166 15.7071 12.7071L11.7071 16.7071C11.3166 17.0976 10.6834 17.0976 10.2929 16.7071C9.90237 16.3166 9.90237 15.6834 10.2929 15.2929L12.5858 13H3C2.44772 13 2 12.5523 2 12C2 11.4477 2.44772 11 3 11H12.5858L10.2929 8.70711C9.90237 8.31658 9.90237 7.68342 10.2929 7.29289Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/LogOutIcon/__snapshots__/LogOutIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/LogOutIcon/__snapshots__/LogOutIcon.native.test.tsx.snap
index a182825b678..3ad29393119 100644
--- a/packages/blade/src/components/Icons/LogOutIcon/__snapshots__/LogOutIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/LogOutIcon/__snapshots__/LogOutIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<LogOutIcon /> should render LogOutIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<LogOutIcon /> should render LogOutIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<LogOutIcon /> should render LogOutIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<LogOutIcon /> should render LogOutIcon 1`] = `
         d="M5 3C4.44772 3 4 3.44772 4 4V20C4 20.5523 4.44772 21 5 21H10C10.5523 21 11 21.4477 11 22C11 22.5523 10.5523 23 10 23H5C3.34315 23 2 21.6569 2 20V4C2 2.34315 3.34315 1 5 1H10C10.5523 1 11 1.44772 11 2C11 2.55228 10.5523 3 10 3H5Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<LogOutIcon /> should render LogOutIcon 1`] = `
         d="M16.2929 7.29289C16.6834 6.90237 17.3166 6.90237 17.7071 7.29289L21.7071 11.2929C22.0976 11.6834 22.0976 12.3166 21.7071 12.7071L17.7071 16.7071C17.3166 17.0976 16.6834 17.0976 16.2929 16.7071C15.9024 16.3166 15.9024 15.6834 16.2929 15.2929L18.5858 13H9C8.44772 13 8 12.5523 8 12C8 11.4477 8.44772 11 9 11H18.5858L16.2929 8.70711C15.9024 8.31658 15.9024 7.68342 16.2929 7.29289Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/MailIcon/__snapshots__/MailIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MailIcon/__snapshots__/MailIcon.native.test.tsx.snap
index 3fbaa92fa4e..5cb508a2abf 100644
--- a/packages/blade/src/components/Icons/MailIcon/__snapshots__/MailIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MailIcon/__snapshots__/MailIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<MailIcon /> should render MailIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<MailIcon /> should render MailIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<MailIcon /> should render MailIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<MailIcon /> should render MailIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/MailOpenIcon/__snapshots__/MailOpenIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MailOpenIcon/__snapshots__/MailOpenIcon.native.test.tsx.snap
index 21bc8e1b46f..bbb5649e9fa 100644
--- a/packages/blade/src/components/Icons/MailOpenIcon/__snapshots__/MailOpenIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MailOpenIcon/__snapshots__/MailOpenIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<MailOpenIcon /> should render MailOpenIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<MailOpenIcon /> should render MailOpenIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<MailOpenIcon /> should render MailOpenIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<MailOpenIcon /> should render MailOpenIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/MapIcon/__snapshots__/MapIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MapIcon/__snapshots__/MapIcon.native.test.tsx.snap
index 068d146b2f2..29e2c67eae8 100644
--- a/packages/blade/src/components/Icons/MapIcon/__snapshots__/MapIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MapIcon/__snapshots__/MapIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<MapIcon /> should render MapIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<MapIcon /> should render MapIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<MapIcon /> should render MapIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<MapIcon /> should render MapIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/MapPinIcon/__snapshots__/MapPinIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MapPinIcon/__snapshots__/MapPinIcon.native.test.tsx.snap
index bd5e726f1e9..7aed9cca8db 100644
--- a/packages/blade/src/components/Icons/MapPinIcon/__snapshots__/MapPinIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MapPinIcon/__snapshots__/MapPinIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<MapPinIcon /> should render MapPinIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<MapPinIcon /> should render MapPinIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<MapPinIcon /> should render MapPinIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<MapPinIcon /> should render MapPinIcon 1`] = `
         d="M11.4448 23.8317C11.4448 23.8317 11.4453 23.8321 12 23L12.5547 23.8321C12.2188 24.056 11.7807 24.0556 11.4448 23.8317Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -64,7 +64,7 @@ exports[`<MapPinIcon /> should render MapPinIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -76,7 +76,7 @@ exports[`<MapPinIcon /> should render MapPinIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/MaximizeIcon/__snapshots__/MaximizeIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MaximizeIcon/__snapshots__/MaximizeIcon.native.test.tsx.snap
index f5b5c44169e..82b001c0afc 100644
--- a/packages/blade/src/components/Icons/MaximizeIcon/__snapshots__/MaximizeIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MaximizeIcon/__snapshots__/MaximizeIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<MaximizeIcon /> should render MaximizeIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<MaximizeIcon /> should render MaximizeIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<MaximizeIcon /> should render MaximizeIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<MaximizeIcon /> should render MaximizeIcon 1`] = `
         d="M15 2C14.4477 2 14 2.44772 14 3C14 3.55228 14.4477 4 15 4H18.5858L13.2929 9.29289C12.9024 9.68342 12.9024 10.3166 13.2929 10.7071C13.6834 11.0976 14.3166 11.0976 14.7071 10.7071L20 5.41421V9C20 9.55228 20.4477 10 21 10C21.5523 10 22 9.55228 22 9V3C22 2.44772 21.5523 2 21 2H15Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<MaximizeIcon /> should render MaximizeIcon 1`] = `
         d="M4 15C4 14.4477 3.55228 14 3 14C2.44772 14 2 14.4477 2 15V21C2 21.5523 2.44772 22 3 22H9C9.55228 22 10 21.5523 10 21C10 20.4477 9.55228 20 9 20H5.41421L10.7071 14.7071C11.0976 14.3166 11.0976 13.6834 10.7071 13.2929C10.3166 12.9024 9.68342 12.9024 9.29289 13.2929L4 18.5858V15Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/MenuDotsIcon/__snapshots__/MenuDotsIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MenuDotsIcon/__snapshots__/MenuDotsIcon.native.test.tsx.snap
index 2284ae3c1f5..30f68342005 100644
--- a/packages/blade/src/components/Icons/MenuDotsIcon/__snapshots__/MenuDotsIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MenuDotsIcon/__snapshots__/MenuDotsIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<MenuDotsIcon /> should render MenuDotsIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<MenuDotsIcon /> should render MenuDotsIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<MenuDotsIcon /> should render MenuDotsIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<MenuDotsIcon /> should render MenuDotsIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/MenuIcon/__snapshots__/MenuIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MenuIcon/__snapshots__/MenuIcon.native.test.tsx.snap
index bca58dbca1c..b3fe31599f1 100644
--- a/packages/blade/src/components/Icons/MenuIcon/__snapshots__/MenuIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MenuIcon/__snapshots__/MenuIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<MenuIcon /> should render MenuIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<MenuIcon /> should render MenuIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<MenuIcon /> should render MenuIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<MenuIcon /> should render MenuIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<MenuIcon /> should render MenuIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -79,7 +79,7 @@ exports[`<MenuIcon /> should render MenuIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/MessageCircleIcon/__snapshots__/MessageCircleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MessageCircleIcon/__snapshots__/MessageCircleIcon.native.test.tsx.snap
index 4747364fe84..bc199412872 100644
--- a/packages/blade/src/components/Icons/MessageCircleIcon/__snapshots__/MessageCircleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MessageCircleIcon/__snapshots__/MessageCircleIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<MessageCircleIcon /> should render MessageCircleIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<MessageCircleIcon /> should render MessageCircleIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<MessageCircleIcon /> should render MessageCircleIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -58,7 +58,7 @@ exports[`<MessageCircleIcon /> should render MessageCircleIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -73,7 +73,7 @@ exports[`<MessageCircleIcon /> should render MessageCircleIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/MessageSquareIcon/__snapshots__/MessageSquareIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MessageSquareIcon/__snapshots__/MessageSquareIcon.native.test.tsx.snap
index 61cf6b619b6..986e0b4bf98 100644
--- a/packages/blade/src/components/Icons/MessageSquareIcon/__snapshots__/MessageSquareIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MessageSquareIcon/__snapshots__/MessageSquareIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<MessageSquareIcon /> should render MessageSquareIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<MessageSquareIcon /> should render MessageSquareIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<MessageSquareIcon /> should render MessageSquareIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<MessageSquareIcon /> should render MessageSquareIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/MicIcon/__snapshots__/MicIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MicIcon/__snapshots__/MicIcon.native.test.tsx.snap
index ad2cfa69c22..37cfefea129 100644
--- a/packages/blade/src/components/Icons/MicIcon/__snapshots__/MicIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MicIcon/__snapshots__/MicIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<MicIcon /> should render MicIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<MicIcon /> should render MicIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<MicIcon /> should render MicIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<MicIcon /> should render MicIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -65,7 +65,7 @@ exports[`<MicIcon /> should render MicIcon 1`] = `
         d="M6 10C6 9.44771 5.55228 9 5 9C4.44772 9 4 9.44771 4 10V12C4 16.0796 7.05369 19.446 11 19.9381V22H8C7.44772 22 7 22.4477 7 23C7 23.5523 7.44772 24 8 24H16C16.5523 24 17 23.5523 17 23C17 22.4477 16.5523 22 16 22H13V19.9381C16.9463 19.446 20 16.0796 20 12V10C20 9.44771 19.5523 9 19 9C18.4477 9 18 9.44771 18 10V12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12V10Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/MicOffIcon/__snapshots__/MicOffIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MicOffIcon/__snapshots__/MicOffIcon.native.test.tsx.snap
index d4d6c40922a..f3feb418e80 100644
--- a/packages/blade/src/components/Icons/MicOffIcon/__snapshots__/MicOffIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MicOffIcon/__snapshots__/MicOffIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<MicOffIcon /> should render MicOffIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<MicOffIcon /> should render MicOffIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<MicOffIcon /> should render MicOffIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -56,7 +56,7 @@ exports[`<MicOffIcon /> should render MicOffIcon 1`] = `
           d="M12.3535 0.0126975C13.8025 0.0334948 14.7788 0.713743 15.3459 1.598C15.876 2.42454 16.0189 3.37324 16 4.01597V9.50006C16 10.0523 15.5523 10.5001 15 10.5001C14.4477 10.5001 14 10.0523 14 9.50006V4.00006C14 3.98851 14.0002 3.97697 14.0006 3.96543C14.0127 3.61648 13.9246 3.0866 13.6624 2.6777C13.4382 2.32811 13.0632 2.01557 12.2972 2.01223C12.2651 2.01209 12.233 2.01041 12.2011 2.00718C11.1788 1.90392 10.2445 2.59211 10.0401 3.59907C9.93016 4.1403 9.4023 4.48997 8.86106 4.38007C8.31982 4.27017 7.97016 3.74231 8.08006 3.20107C8.48576 1.20311 10.3279 -0.167383 12.3535 0.0126975Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -67,7 +67,7 @@ exports[`<MicOffIcon /> should render MicOffIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -77,7 +77,7 @@ exports[`<MicOffIcon /> should render MicOffIcon 1`] = `
           d="M20 10.0001C20 9.44778 19.5523 9.00006 19 9.00006C18.4477 9.00006 18 9.44778 18 10.0001V12.0001C18 12.215 17.9214 12.9213 17.6056 13.5528C17.3586 14.0468 17.5588 14.6475 18.0528 14.8945C18.5468 15.1415 19.1474 14.9413 19.3944 14.4473C19.8786 13.4789 20 12.4518 20 12.0001V10.0001Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -91,7 +91,7 @@ exports[`<MicOffIcon /> should render MicOffIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/MinimizeIcon/__snapshots__/MinimizeIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MinimizeIcon/__snapshots__/MinimizeIcon.native.test.tsx.snap
index b3b37b3bf8c..d8157cb296b 100644
--- a/packages/blade/src/components/Icons/MinimizeIcon/__snapshots__/MinimizeIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MinimizeIcon/__snapshots__/MinimizeIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<MinimizeIcon /> should render MinimizeIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<MinimizeIcon /> should render MinimizeIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<MinimizeIcon /> should render MinimizeIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<MinimizeIcon /> should render MinimizeIcon 1`] = `
         d="M21.7071 3.70711L16.4142 9H20C20.5523 9 21 9.44772 21 10C21 10.5523 20.5523 11 20 11H14.0007L13.997 11C13.743 10.9992 13.4892 10.9023 13.295 10.7092L13.2908 10.705C13.196 10.6096 13.1243 10.4999 13.0759 10.3828C13.0273 10.2657 13.0004 10.1375 13 10.003L13 10V4C13 3.44772 13.4477 3 14 3C14.5523 3 15 3.44772 15 4V7.58579L20.2929 2.29289C20.6834 1.90237 21.3166 1.90237 21.7071 2.29289C22.0976 2.68342 22.0976 3.31658 21.7071 3.70711Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<MinimizeIcon /> should render MinimizeIcon 1`] = `
         d="M4 13C3.44772 13 3 13.4477 3 14C3 14.5523 3.44772 15 4 15H7.58579L2.29289 20.2929C1.90237 20.6834 1.90237 21.3166 2.29289 21.7071C2.68342 22.0976 3.31658 22.0976 3.70711 21.7071L9 16.4142V20C9 20.5523 9.44772 21 10 21C10.5523 21 11 20.5523 11 20V14.0007C11 13.9997 11 13.998 11 13.997C10.9992 13.7231 10.8883 13.4752 10.7092 13.295C10.7078 13.2936 10.7064 13.2922 10.705 13.2908C10.6096 13.196 10.4999 13.1243 10.3828 13.0759C10.2657 13.0273 10.1375 13.0004 10.003 13C10.002 13 10.001 13 10 13H4Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/MinusCircleIcon/__snapshots__/MinusCircleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MinusCircleIcon/__snapshots__/MinusCircleIcon.native.test.tsx.snap
index 34c91aa9f7d..fb20b55b5f5 100644
--- a/packages/blade/src/components/Icons/MinusCircleIcon/__snapshots__/MinusCircleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MinusCircleIcon/__snapshots__/MinusCircleIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<MinusCircleIcon /> should render MinusCircleIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<MinusCircleIcon /> should render MinusCircleIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<MinusCircleIcon /> should render MinusCircleIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<MinusCircleIcon /> should render MinusCircleIcon 1`] = `
         d="M8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H16C16.5523 13 17 12.5523 17 12C17 11.4477 16.5523 11 16 11H8Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -64,7 +64,7 @@ exports[`<MinusCircleIcon /> should render MinusCircleIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/MinusIcon/__snapshots__/MinusIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MinusIcon/__snapshots__/MinusIcon.native.test.tsx.snap
index 5770f5bede9..a2a4a771ecb 100644
--- a/packages/blade/src/components/Icons/MinusIcon/__snapshots__/MinusIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MinusIcon/__snapshots__/MinusIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<MinusIcon /> should render MinusIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<MinusIcon /> should render MinusIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<MinusIcon /> should render MinusIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<MinusIcon /> should render MinusIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/MinusSquareIcon/__snapshots__/MinusSquareIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MinusSquareIcon/__snapshots__/MinusSquareIcon.native.test.tsx.snap
index 239a6a5cedf..7ad54619678 100644
--- a/packages/blade/src/components/Icons/MinusSquareIcon/__snapshots__/MinusSquareIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MinusSquareIcon/__snapshots__/MinusSquareIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<MinusSquareIcon /> should render MinusSquareIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<MinusSquareIcon /> should render MinusSquareIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<MinusSquareIcon /> should render MinusSquareIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<MinusSquareIcon /> should render MinusSquareIcon 1`] = `
         d="M8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H16C16.5523 13 17 12.5523 17 12C17 11.4477 16.5523 11 16 11H8Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -64,7 +64,7 @@ exports[`<MinusSquareIcon /> should render MinusSquareIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/MonitorIcon/__snapshots__/MonitorIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MonitorIcon/__snapshots__/MonitorIcon.native.test.tsx.snap
index 738c20e8b97..925196df74f 100644
--- a/packages/blade/src/components/Icons/MonitorIcon/__snapshots__/MonitorIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MonitorIcon/__snapshots__/MonitorIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<MonitorIcon /> should render MonitorIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<MonitorIcon /> should render MonitorIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<MonitorIcon /> should render MonitorIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<MonitorIcon /> should render MonitorIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/MoonIcon/__snapshots__/MoonIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MoonIcon/__snapshots__/MoonIcon.native.test.tsx.snap
index ea85a70fd4d..0991f033705 100644
--- a/packages/blade/src/components/Icons/MoonIcon/__snapshots__/MoonIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MoonIcon/__snapshots__/MoonIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<MoonIcon /> should render MoonIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<MoonIcon /> should render MoonIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<MoonIcon /> should render MoonIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<MoonIcon /> should render MoonIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/MoreHorizontalIcon/__snapshots__/MoreHorizontalIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MoreHorizontalIcon/__snapshots__/MoreHorizontalIcon.native.test.tsx.snap
index 5c8dd3ab6ab..e90cbc1ccd7 100644
--- a/packages/blade/src/components/Icons/MoreHorizontalIcon/__snapshots__/MoreHorizontalIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MoreHorizontalIcon/__snapshots__/MoreHorizontalIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<MoreHorizontalIcon /> should render MoreHorizontalIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<MoreHorizontalIcon /> should render MoreHorizontalIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<MoreHorizontalIcon /> should render MoreHorizontalIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<MoreHorizontalIcon /> should render MoreHorizontalIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<MoreHorizontalIcon /> should render MoreHorizontalIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -79,7 +79,7 @@ exports[`<MoreHorizontalIcon /> should render MoreHorizontalIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/MoreVerticalIcon/__snapshots__/MoreVerticalIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MoreVerticalIcon/__snapshots__/MoreVerticalIcon.native.test.tsx.snap
index 13487e67b4d..ea76edac4a5 100644
--- a/packages/blade/src/components/Icons/MoreVerticalIcon/__snapshots__/MoreVerticalIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MoreVerticalIcon/__snapshots__/MoreVerticalIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<MoreVerticalIcon /> should render MoreVerticalIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<MoreVerticalIcon /> should render MoreVerticalIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<MoreVerticalIcon /> should render MoreVerticalIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<MoreVerticalIcon /> should render MoreVerticalIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<MoreVerticalIcon /> should render MoreVerticalIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -79,7 +79,7 @@ exports[`<MoreVerticalIcon /> should render MoreVerticalIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/MoveIcon/__snapshots__/MoveIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MoveIcon/__snapshots__/MoveIcon.native.test.tsx.snap
index c1ee7258146..2340b781c3a 100644
--- a/packages/blade/src/components/Icons/MoveIcon/__snapshots__/MoveIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MoveIcon/__snapshots__/MoveIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<MoveIcon /> should render MoveIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<MoveIcon /> should render MoveIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<MoveIcon /> should render MoveIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<MoveIcon /> should render MoveIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/MusicIcon/__snapshots__/MusicIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MusicIcon/__snapshots__/MusicIcon.native.test.tsx.snap
index b89baaf1ec2..028280ddfd4 100644
--- a/packages/blade/src/components/Icons/MusicIcon/__snapshots__/MusicIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MusicIcon/__snapshots__/MusicIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<MusicIcon /> should render MusicIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<MusicIcon /> should render MusicIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<MusicIcon /> should render MusicIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<MusicIcon /> should render MusicIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/MyAccountIcon/__snapshots__/MyAccountIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MyAccountIcon/__snapshots__/MyAccountIcon.native.test.tsx.snap
index e4b658c27ba..08a59e69e24 100644
--- a/packages/blade/src/components/Icons/MyAccountIcon/__snapshots__/MyAccountIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/MyAccountIcon/__snapshots__/MyAccountIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<MyAccountIcon /> should render MyAccountIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<MyAccountIcon /> should render MyAccountIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<MyAccountIcon /> should render MyAccountIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<MyAccountIcon /> should render MyAccountIcon 1`] = `
         d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 5C13.66 5 15 6.34 15 8C15 9.66 13.66 11 12 11C10.34 11 9 9.66 9 8C9 6.34 10.34 5 12 5ZM12 19.2C9.5 19.2 7.29 17.92 6 15.98C6.03 13.99 10 12.9 12 12.9C13.99 12.9 17.97 13.99 18 15.98C16.71 17.92 14.5 19.2 12 19.2Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/NavigationIcon/__snapshots__/NavigationIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/NavigationIcon/__snapshots__/NavigationIcon.native.test.tsx.snap
index d2c139e39d3..3d5bf3316d7 100644
--- a/packages/blade/src/components/Icons/NavigationIcon/__snapshots__/NavigationIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/NavigationIcon/__snapshots__/NavigationIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<NavigationIcon /> should render NavigationIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<NavigationIcon /> should render NavigationIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<NavigationIcon /> should render NavigationIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<NavigationIcon /> should render NavigationIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/OctagonIcon/__snapshots__/OctagonIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/OctagonIcon/__snapshots__/OctagonIcon.native.test.tsx.snap
index 40d7dddd33f..b26883d0afe 100644
--- a/packages/blade/src/components/Icons/OctagonIcon/__snapshots__/OctagonIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/OctagonIcon/__snapshots__/OctagonIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<OctagonIcon /> should render OctagonIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<OctagonIcon /> should render OctagonIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<OctagonIcon /> should render OctagonIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<OctagonIcon /> should render OctagonIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/OffersIcon/__snapshots__/OffersIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/OffersIcon/__snapshots__/OffersIcon.native.test.tsx.snap
index 6b109140335..82c83f24781 100644
--- a/packages/blade/src/components/Icons/OffersIcon/__snapshots__/OffersIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/OffersIcon/__snapshots__/OffersIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<OffersIcon /> should render OffersIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<OffersIcon /> should render OffersIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<OffersIcon /> should render OffersIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<OffersIcon /> should render OffersIcon 1`] = `
         d="M21.41 11.58L12.415 2.585C12.05 2.225 11.55 2 11 2H4C2.895 2 2 2.895 2 4V11C2 11.555 2.225 12.055 2.59 12.415L11.59 21.415C11.95 21.775 12.45 22 13 22C13.55 22 14.055 21.775 14.415 21.415L21.415 14.415C21.775 14.05 22 13.55 22 13C22 12.445 21.775 11.945 21.41 11.58ZM5.5 7C4.67 7 4 6.33 4 5.5C4 4.67 4.67 4 5.5 4C6.33 4 7 4.67 7 5.5C7 6.33 6.33 7 5.5 7Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/PackageIcon/__snapshots__/PackageIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PackageIcon/__snapshots__/PackageIcon.native.test.tsx.snap
index 1537c452e50..ace6c239ac2 100644
--- a/packages/blade/src/components/Icons/PackageIcon/__snapshots__/PackageIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PackageIcon/__snapshots__/PackageIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PackageIcon /> should render PackageIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PackageIcon /> should render PackageIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PackageIcon /> should render PackageIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<PackageIcon /> should render PackageIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/PaperclipIcon/__snapshots__/PaperclipIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PaperclipIcon/__snapshots__/PaperclipIcon.native.test.tsx.snap
index 1a83583e1af..850308cc53d 100644
--- a/packages/blade/src/components/Icons/PaperclipIcon/__snapshots__/PaperclipIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PaperclipIcon/__snapshots__/PaperclipIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PaperclipIcon /> should render PaperclipIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PaperclipIcon /> should render PaperclipIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PaperclipIcon /> should render PaperclipIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<PaperclipIcon /> should render PaperclipIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/PauseCircleIcon/__snapshots__/PauseCircleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PauseCircleIcon/__snapshots__/PauseCircleIcon.native.test.tsx.snap
index 369a85b8be5..3e5f14b9003 100644
--- a/packages/blade/src/components/Icons/PauseCircleIcon/__snapshots__/PauseCircleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PauseCircleIcon/__snapshots__/PauseCircleIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PauseCircleIcon /> should render PauseCircleIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PauseCircleIcon /> should render PauseCircleIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PauseCircleIcon /> should render PauseCircleIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<PauseCircleIcon /> should render PauseCircleIcon 1`] = `
         d="M10 8C10.5523 8 11 8.44772 11 9V15C11 15.5523 10.5523 16 10 16C9.44771 16 9 15.5523 9 15V9C9 8.44772 9.44771 8 10 8Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<PauseCircleIcon /> should render PauseCircleIcon 1`] = `
         d="M15 9C15 8.44772 14.5523 8 14 8C13.4477 8 13 8.44772 13 9V15C13 15.5523 13.4477 16 14 16C14.5523 16 15 15.5523 15 15V9Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -73,7 +73,7 @@ exports[`<PauseCircleIcon /> should render PauseCircleIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/PauseIcon/__snapshots__/PauseIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PauseIcon/__snapshots__/PauseIcon.native.test.tsx.snap
index 1955fd824be..2a884acad07 100644
--- a/packages/blade/src/components/Icons/PauseIcon/__snapshots__/PauseIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PauseIcon/__snapshots__/PauseIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PauseIcon /> should render PauseIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PauseIcon /> should render PauseIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PauseIcon /> should render PauseIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<PauseIcon /> should render PauseIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/PaymentButtonsIcon/__snapshots__/PaymentButtonsIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PaymentButtonsIcon/__snapshots__/PaymentButtonsIcon.native.test.tsx.snap
index 0b3388f1226..1335a8d4c91 100644
--- a/packages/blade/src/components/Icons/PaymentButtonsIcon/__snapshots__/PaymentButtonsIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PaymentButtonsIcon/__snapshots__/PaymentButtonsIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PaymentButtonsIcon /> should render PaymentButtonsIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PaymentButtonsIcon /> should render PaymentButtonsIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PaymentButtonsIcon /> should render PaymentButtonsIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<PaymentButtonsIcon /> should render PaymentButtonsIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/PaymentLinksIcon/__snapshots__/PaymentLinksIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PaymentLinksIcon/__snapshots__/PaymentLinksIcon.native.test.tsx.snap
index 24ce642096c..18e785b10b3 100644
--- a/packages/blade/src/components/Icons/PaymentLinksIcon/__snapshots__/PaymentLinksIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PaymentLinksIcon/__snapshots__/PaymentLinksIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PaymentLinksIcon /> should render PaymentLinksIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PaymentLinksIcon /> should render PaymentLinksIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PaymentLinksIcon /> should render PaymentLinksIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<PaymentLinksIcon /> should render PaymentLinksIcon 1`] = `
         d="M3.9 12C3.9 10.29 5.29 8.9 7 8.9H11V7H7C4.24 7 2 9.24 2 12C2 14.76 4.24 17 7 17H11V15.1H7C5.29 15.1 3.9 13.71 3.9 12ZM8 13H16V11H8V13ZM17 7H13V8.9H17C18.71 8.9 20.1 10.29 20.1 12C20.1 13.71 18.71 15.1 17 15.1H13V17H17C19.76 17 22 14.76 22 12C22 9.24 19.76 7 17 7Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/PaymentPagesIcon/__snapshots__/PaymentPagesIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PaymentPagesIcon/__snapshots__/PaymentPagesIcon.native.test.tsx.snap
index c276d105a87..dc07c11687f 100644
--- a/packages/blade/src/components/Icons/PaymentPagesIcon/__snapshots__/PaymentPagesIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PaymentPagesIcon/__snapshots__/PaymentPagesIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PaymentPagesIcon /> should render PaymentPagesIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PaymentPagesIcon /> should render PaymentPagesIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PaymentPagesIcon /> should render PaymentPagesIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<PaymentPagesIcon /> should render PaymentPagesIcon 1`] = `
         d="M16.0588 2L21 7.26316V20.2456C21 21.2105 20.2588 21.9912 19.3529 21.9912L7.82353 22C6.91765 22 6.17647 21.2193 6.17647 20.2544V3.75439C6.17647 2.78947 6.91765 2 7.82353 2H16.0588ZM3 5.15789H4.71429V20.9474H3V5.15789ZM9.35294 10.4211V11.4737H17.8235V10.4211H9.35294ZM9.35294 12.5263V13.5789H17.8235V12.5263H9.35294ZM9.35294 14.6316V15.6842H17.8235V14.6316H9.35294ZM15 3.31579V8.14035H19.7143L15 3.31579Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/PercentIcon/__snapshots__/PercentIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PercentIcon/__snapshots__/PercentIcon.native.test.tsx.snap
index ed0be92bded..6b13dae16e0 100644
--- a/packages/blade/src/components/Icons/PercentIcon/__snapshots__/PercentIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PercentIcon/__snapshots__/PercentIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PercentIcon /> should render PercentIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PercentIcon /> should render PercentIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PercentIcon /> should render PercentIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<PercentIcon /> should render PercentIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -65,7 +65,7 @@ exports[`<PercentIcon /> should render PercentIcon 1`] = `
         d="M19.7071 5.70711L5.70711 19.7071C5.31658 20.0976 4.68342 20.0976 4.29289 19.7071C3.90237 19.3166 3.90237 18.6834 4.29289 18.2929L18.2929 4.29289C18.6834 3.90237 19.3166 3.90237 19.7071 4.29289C20.0976 4.68342 20.0976 5.31658 19.7071 5.70711Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -76,7 +76,7 @@ exports[`<PercentIcon /> should render PercentIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/PhoneCallIcon/__snapshots__/PhoneCallIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PhoneCallIcon/__snapshots__/PhoneCallIcon.native.test.tsx.snap
index cb2718f92ff..ed95a05209c 100644
--- a/packages/blade/src/components/Icons/PhoneCallIcon/__snapshots__/PhoneCallIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PhoneCallIcon/__snapshots__/PhoneCallIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PhoneCallIcon /> should render PhoneCallIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PhoneCallIcon /> should render PhoneCallIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PhoneCallIcon /> should render PhoneCallIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<PhoneCallIcon /> should render PhoneCallIcon 1`] = `
         d="M13.0561 1.88955C13.1171 1.34065 13.6115 0.945101 14.1604 1.00608C18.8043 1.52198 22.472 5.18501 22.9937 9.8283C23.0554 10.3771 22.6605 10.872 22.1116 10.9337C21.5628 10.9954 21.0679 10.6005 21.0062 10.0516C20.5888 6.337 17.6547 3.40658 13.9396 2.99385C13.3907 2.93287 12.9951 2.43846 13.0561 1.88955Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<PhoneCallIcon /> should render PhoneCallIcon 1`] = `
         d="M13.0685 5.80848C13.1742 5.26642 13.6994 4.91272 14.2415 5.01848C16.639 5.48626 18.5137 7.36089 18.9815 9.75848C19.0872 10.3005 18.7335 10.8257 18.1915 10.9315C17.6494 11.0372 17.1242 10.6835 17.0185 10.1415C16.7066 8.54308 15.4569 7.29332 13.8585 6.98147C13.3164 6.87571 12.9627 6.35054 13.0685 5.80848Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -73,7 +73,7 @@ exports[`<PhoneCallIcon /> should render PhoneCallIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/PhoneForwardedIcon/__snapshots__/PhoneForwardedIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PhoneForwardedIcon/__snapshots__/PhoneForwardedIcon.native.test.tsx.snap
index 4f79f68013c..9161992565e 100644
--- a/packages/blade/src/components/Icons/PhoneForwardedIcon/__snapshots__/PhoneForwardedIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PhoneForwardedIcon/__snapshots__/PhoneForwardedIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PhoneForwardedIcon /> should render PhoneForwardedIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PhoneForwardedIcon /> should render PhoneForwardedIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PhoneForwardedIcon /> should render PhoneForwardedIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<PhoneForwardedIcon /> should render PhoneForwardedIcon 1`] = `
         d="M17.2929 1.29289C17.6834 0.902369 18.3166 0.902369 18.7071 1.29289L22.7071 5.29289C23.0976 5.68342 23.0976 6.31658 22.7071 6.70711L18.7071 10.7071C18.3166 11.0976 17.6834 11.0976 17.2929 10.7071C16.9023 10.3166 16.9023 9.68342 17.2929 9.29289L19.5858 7H14C13.4477 7 13 6.55228 13 6C13 5.44772 13.4477 5 14 5H19.5858L17.2929 2.70711C16.9023 2.31658 16.9023 1.68342 17.2929 1.29289Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -64,7 +64,7 @@ exports[`<PhoneForwardedIcon /> should render PhoneForwardedIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/PhoneIcon/__snapshots__/PhoneIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PhoneIcon/__snapshots__/PhoneIcon.native.test.tsx.snap
index 258f9837a87..1d92ec47e99 100644
--- a/packages/blade/src/components/Icons/PhoneIcon/__snapshots__/PhoneIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PhoneIcon/__snapshots__/PhoneIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PhoneIcon /> should render PhoneIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PhoneIcon /> should render PhoneIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PhoneIcon /> should render PhoneIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<PhoneIcon /> should render PhoneIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/PhoneIncomingIcon/__snapshots__/PhoneIncomingIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PhoneIncomingIcon/__snapshots__/PhoneIncomingIcon.native.test.tsx.snap
index b6ab0b790bf..27f3743cb8c 100644
--- a/packages/blade/src/components/Icons/PhoneIncomingIcon/__snapshots__/PhoneIncomingIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PhoneIncomingIcon/__snapshots__/PhoneIncomingIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PhoneIncomingIcon /> should render PhoneIncomingIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PhoneIncomingIcon /> should render PhoneIncomingIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PhoneIncomingIcon /> should render PhoneIncomingIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<PhoneIncomingIcon /> should render PhoneIncomingIcon 1`] = `
         d="M22.7071 2.70711L17.4142 8H21C21.5523 8 22 8.44772 22 9C22 9.55228 21.5523 10 21 10H15.0007L14.997 10C14.7421 9.99924 14.4874 9.90161 14.2929 9.70711C14.197 9.61123 14.1247 9.50073 14.0759 9.38278C14.027 9.26488 14 9.13559 14 9V3C14 2.44772 14.4477 2 15 2C15.5523 2 16 2.44772 16 3V6.58579L21.2929 1.29289C21.6834 0.902369 22.3166 0.902369 22.7071 1.29289C23.0976 1.68342 23.0976 2.31658 22.7071 2.70711Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -64,7 +64,7 @@ exports[`<PhoneIncomingIcon /> should render PhoneIncomingIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/PhoneMissedIcon/__snapshots__/PhoneMissedIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PhoneMissedIcon/__snapshots__/PhoneMissedIcon.native.test.tsx.snap
index 91220f247de..3059c7740a3 100644
--- a/packages/blade/src/components/Icons/PhoneMissedIcon/__snapshots__/PhoneMissedIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PhoneMissedIcon/__snapshots__/PhoneMissedIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PhoneMissedIcon /> should render PhoneMissedIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PhoneMissedIcon /> should render PhoneMissedIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PhoneMissedIcon /> should render PhoneMissedIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<PhoneMissedIcon /> should render PhoneMissedIcon 1`] = `
         d="M21.2929 1.29289C21.6834 0.902369 22.3166 0.902369 22.7071 1.29289C23.0976 1.68342 23.0976 2.31658 22.7071 2.70711L20.4142 5L22.7071 7.29289C23.0976 7.68342 23.0976 8.31658 22.7071 8.70711C22.3166 9.09763 21.6834 9.09763 21.2929 8.70711L19 6.41421L16.7071 8.70711C16.3166 9.09763 15.6834 9.09763 15.2929 8.70711C14.9024 8.31658 14.9024 7.68342 15.2929 7.29289L17.5858 5L15.2929 2.70711C14.9024 2.31658 14.9024 1.68342 15.2929 1.29289C15.6834 0.902369 16.3166 0.902369 16.7071 1.29289L19 3.58579L21.2929 1.29289Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -64,7 +64,7 @@ exports[`<PhoneMissedIcon /> should render PhoneMissedIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/PhoneOffIcon/__snapshots__/PhoneOffIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PhoneOffIcon/__snapshots__/PhoneOffIcon.native.test.tsx.snap
index 12fa39054a5..76e10f4807c 100644
--- a/packages/blade/src/components/Icons/PhoneOffIcon/__snapshots__/PhoneOffIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PhoneOffIcon/__snapshots__/PhoneOffIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PhoneOffIcon /> should render PhoneOffIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PhoneOffIcon /> should render PhoneOffIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PhoneOffIcon /> should render PhoneOffIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -58,7 +58,7 @@ exports[`<PhoneOffIcon /> should render PhoneOffIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -68,7 +68,7 @@ exports[`<PhoneOffIcon /> should render PhoneOffIcon 1`] = `
           d="M7.11985 2.99996C7.62052 2.99503 8.04746 3.36111 8.11931 3.85623C8.25597 4.88918 8.50883 5.9034 8.87311 6.87961L8.87395 6.88187C9.01105 7.24659 8.92381 7.65765 8.65057 7.93523L7.3829 9.2029C6.99237 9.59343 6.99237 10.2266 7.3829 10.6171C7.77342 11.0076 8.40659 11.0076 8.79711 10.6171L10.0671 9.34713L10.0711 9.34315C10.8943 8.51066 11.158 7.27537 10.7465 6.17936C10.4345 5.34307 10.2182 4.47417 10.1015 3.58924L10.1002 3.58006C9.88967 2.09079 8.60903 0.987878 7.10557 1.00001L4.10906 1.00001C3.26695 1.0008 2.46395 1.35549 1.89621 1.97744C1.32847 2.59939 1.04827 3.43132 1.12406 4.27001L1.12586 4.28803C1.47711 7.52069 2.58174 10.6259 4.35099 13.3541C4.65148 13.8175 5.27073 13.9495 5.73411 13.649C6.19748 13.3485 6.32952 12.7293 6.02902 12.2659C4.43188 9.80307 3.43399 7.00034 3.11529 4.08242C3.09238 3.80543 3.1858 3.53126 3.37333 3.32582C3.56248 3.1186 3.82998 3.00039 4.11053 3.00001L7.11 3.00006L7.11985 2.99996Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -82,7 +82,7 @@ exports[`<PhoneOffIcon /> should render PhoneOffIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/PhoneOutgoingIcon/__snapshots__/PhoneOutgoingIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PhoneOutgoingIcon/__snapshots__/PhoneOutgoingIcon.native.test.tsx.snap
index 2d506f750cf..4ce87bbd0f4 100644
--- a/packages/blade/src/components/Icons/PhoneOutgoingIcon/__snapshots__/PhoneOutgoingIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PhoneOutgoingIcon/__snapshots__/PhoneOutgoingIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PhoneOutgoingIcon /> should render PhoneOutgoingIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PhoneOutgoingIcon /> should render PhoneOutgoingIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PhoneOutgoingIcon /> should render PhoneOutgoingIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<PhoneOutgoingIcon /> should render PhoneOutgoingIcon 1`] = `
         d="M15 2C15 1.44772 15.4477 1 16 1H22C22.5523 1 23 1.44772 23 2V8C23 8.55228 22.5523 9 22 9C21.4477 9 21 8.55228 21 8V4.41421L15.7071 9.70711C15.3166 10.0976 14.6834 10.0976 14.2929 9.70711C13.9024 9.31658 13.9024 8.68342 14.2929 8.29289L19.5858 3H16C15.4477 3 15 2.55228 15 2Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -64,7 +64,7 @@ exports[`<PhoneOutgoingIcon /> should render PhoneOutgoingIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/PieChartIcon/__snapshots__/PieChartIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PieChartIcon/__snapshots__/PieChartIcon.native.test.tsx.snap
index 9210b7ecb92..ec8ce1f9d80 100644
--- a/packages/blade/src/components/Icons/PieChartIcon/__snapshots__/PieChartIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PieChartIcon/__snapshots__/PieChartIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PieChartIcon /> should render PieChartIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PieChartIcon /> should render PieChartIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PieChartIcon /> should render PieChartIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<PieChartIcon /> should render PieChartIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -65,7 +65,7 @@ exports[`<PieChartIcon /> should render PieChartIcon 1`] = `
         d="M8.39997 3.74656C8.90615 3.52567 9.13743 2.93625 8.91654 2.43007C8.69565 1.92388 8.10623 1.6926 7.60005 1.91349C3.06956 3.89052 0.414221 8.64678 1.10871 13.5408C1.8032 18.4349 5.67694 22.2646 10.5786 22.9032C15.4803 23.5417 20.2059 20.8323 22.131 16.2795C22.3461 15.7708 22.1082 15.1841 21.5995 14.969C21.0908 14.7539 20.5041 14.9919 20.289 15.5006C18.7138 19.2256 14.8474 21.4424 10.837 20.9199C6.82652 20.3975 3.65709 17.2641 3.08887 13.2598C2.52065 9.25562 4.6932 5.36413 8.39997 3.74656Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/PlayCircleIcon/__snapshots__/PlayCircleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PlayCircleIcon/__snapshots__/PlayCircleIcon.native.test.tsx.snap
index b6901d21e7e..d0511f74fa1 100644
--- a/packages/blade/src/components/Icons/PlayCircleIcon/__snapshots__/PlayCircleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PlayCircleIcon/__snapshots__/PlayCircleIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PlayCircleIcon /> should render PlayCircleIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PlayCircleIcon /> should render PlayCircleIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PlayCircleIcon /> should render PlayCircleIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<PlayCircleIcon /> should render PlayCircleIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<PlayCircleIcon /> should render PlayCircleIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/PlayIcon/__snapshots__/PlayIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PlayIcon/__snapshots__/PlayIcon.native.test.tsx.snap
index f9cdbb9838c..3242b6407fe 100644
--- a/packages/blade/src/components/Icons/PlayIcon/__snapshots__/PlayIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PlayIcon/__snapshots__/PlayIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PlayIcon /> should render PlayIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PlayIcon /> should render PlayIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PlayIcon /> should render PlayIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<PlayIcon /> should render PlayIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/PlusCircleIcon/__snapshots__/PlusCircleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PlusCircleIcon/__snapshots__/PlusCircleIcon.native.test.tsx.snap
index 8dd0a93b7d0..b59e9677c32 100644
--- a/packages/blade/src/components/Icons/PlusCircleIcon/__snapshots__/PlusCircleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PlusCircleIcon/__snapshots__/PlusCircleIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PlusCircleIcon /> should render PlusCircleIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PlusCircleIcon /> should render PlusCircleIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PlusCircleIcon /> should render PlusCircleIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<PlusCircleIcon /> should render PlusCircleIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/PlusIcon/__snapshots__/PlusIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PlusIcon/__snapshots__/PlusIcon.native.test.tsx.snap
index 237f851ad55..b9f39c809dd 100644
--- a/packages/blade/src/components/Icons/PlusIcon/__snapshots__/PlusIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PlusIcon/__snapshots__/PlusIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PlusIcon /> should render PlusIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PlusIcon /> should render PlusIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PlusIcon /> should render PlusIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<PlusIcon /> should render PlusIcon 1`] = `
         d="M13 5a1 1 0 1 0-2 0v6H5a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6V5Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/PlusSquareIcon/__snapshots__/PlusSquareIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PlusSquareIcon/__snapshots__/PlusSquareIcon.native.test.tsx.snap
index 119d848abe6..0e35efb5897 100644
--- a/packages/blade/src/components/Icons/PlusSquareIcon/__snapshots__/PlusSquareIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PlusSquareIcon/__snapshots__/PlusSquareIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PlusSquareIcon /> should render PlusSquareIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PlusSquareIcon /> should render PlusSquareIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PlusSquareIcon /> should render PlusSquareIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<PlusSquareIcon /> should render PlusSquareIcon 1`] = `
         d="M12 7C12.5523 7 13 7.44772 13 8V11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V13H8C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11H11V8C11 7.44772 11.4477 7 12 7Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -64,7 +64,7 @@ exports[`<PlusSquareIcon /> should render PlusSquareIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/PocketIcon/__snapshots__/PocketIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PocketIcon/__snapshots__/PocketIcon.native.test.tsx.snap
index 0fdb73261f8..f7d3ca2d201 100644
--- a/packages/blade/src/components/Icons/PocketIcon/__snapshots__/PocketIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PocketIcon/__snapshots__/PocketIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PocketIcon /> should render PocketIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PocketIcon /> should render PocketIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PocketIcon /> should render PocketIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<PocketIcon /> should render PocketIcon 1`] = `
         d="M8.70711 9.29289C8.31658 8.90237 7.68342 8.90237 7.29289 9.29289C6.90237 9.68342 6.90237 10.3166 7.29289 10.7071L11.2929 14.7071C11.6834 15.0976 12.3166 15.0976 12.7071 14.7071L16.7071 10.7071C17.0976 10.3166 17.0976 9.68342 16.7071 9.29289C16.3166 8.90237 15.6834 8.90237 15.2929 9.29289L12 12.5858L8.70711 9.29289Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -64,7 +64,7 @@ exports[`<PocketIcon /> should render PocketIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/PowerIcon/__snapshots__/PowerIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PowerIcon/__snapshots__/PowerIcon.native.test.tsx.snap
index 738966be7ca..c9b63f28cc2 100644
--- a/packages/blade/src/components/Icons/PowerIcon/__snapshots__/PowerIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PowerIcon/__snapshots__/PowerIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PowerIcon /> should render PowerIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PowerIcon /> should render PowerIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PowerIcon /> should render PowerIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<PowerIcon /> should render PowerIcon 1`] = `
         d="M13 2C13 1.44772 12.5523 1 12 1C11.4477 1 11 1.44772 11 2V12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12V2Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<PowerIcon /> should render PowerIcon 1`] = `
         d="M6.33722 7.34701C6.72768 6.95642 6.72757 6.32325 6.33699 5.93279C5.9464 5.54233 5.31323 5.54244 4.92277 5.93302C1.01847 9.8386 1.01916 16.1697 4.92431 20.0744C8.82947 23.9791 15.1605 23.9791 19.0657 20.0744C22.9708 16.1697 22.9715 9.8386 19.0672 5.93302C18.6768 5.54244 18.0436 5.54233 17.653 5.93279C17.2624 6.32325 17.2623 6.95642 17.6528 7.34701C20.7762 10.4715 20.7757 15.5363 17.6515 18.6601C14.5274 21.7839 9.46257 21.7839 6.33845 18.6601C3.21432 15.5363 3.21377 10.4715 6.33722 7.34701Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/PrinterIcon/__snapshots__/PrinterIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PrinterIcon/__snapshots__/PrinterIcon.native.test.tsx.snap
index ebc13b03af6..b104f81394d 100644
--- a/packages/blade/src/components/Icons/PrinterIcon/__snapshots__/PrinterIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/PrinterIcon/__snapshots__/PrinterIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PrinterIcon /> should render PrinterIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<PrinterIcon /> should render PrinterIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<PrinterIcon /> should render PrinterIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<PrinterIcon /> should render PrinterIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/QRCodeIcon/__snapshots__/QRCodeIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/QRCodeIcon/__snapshots__/QRCodeIcon.native.test.tsx.snap
index e645a47705d..d14e85eed42 100644
--- a/packages/blade/src/components/Icons/QRCodeIcon/__snapshots__/QRCodeIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/QRCodeIcon/__snapshots__/QRCodeIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<QRCodeIcon /> should render QRCodeIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<QRCodeIcon /> should render QRCodeIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<QRCodeIcon /> should render QRCodeIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -56,7 +56,7 @@ exports[`<QRCodeIcon /> should render QRCodeIcon 1`] = `
           d="M4 4.5C4 4.22386 4.22386 4 4.5 4H9.5C9.77614 4 10 4.22386 10 4.5V9.5C10 9.77614 9.77614 10 9.5 10H4.5C4.22386 10 4 9.77614 4 9.5V4.5ZM19.5 4C19.7761 4 20 4.22386 20 4.5V9.5C20 9.77614 19.7761 10 19.5 10H14.5C14.2239 10 14 9.77614 14 9.5V4.5C14 4.22386 14.2239 4 14.5 4H19.5ZM14 15.5C14 15.2239 14.2239 15 14.5 15H16V13H14.5C14.2239 13 14 12.7761 14 12.5V11.5C14 11.2239 14.2239 11 14.5 11H15.5C15.7761 11 16 11.2239 16 11.5V13H18V11.5C18 11.2239 18.2239 11 18.5 11H19.5C19.7761 11 20 11.2239 20 11.5V12.5C20 12.7761 19.7761 13 19.5 13H18V15H19.5C19.7761 15 20 15.2239 20 15.5V17.5C20 17.7761 19.7761 18 19.5 18H18V19.5C18 19.7761 17.7761 20 17.5 20H16.5C16.2239 20 16 19.7761 16 19.5V18H13.5C13.2239 18 13 18.2239 13 18.5V19.5C13 19.7761 12.7761 20 12.5 20H11.5C11.2239 20 11 19.7761 11 19.5V16.5C11 16.2239 11.2239 16 11.5 16H13.5C13.7761 16 14 15.7761 14 15.5ZM16 15V18H18V15H16ZM4.5 20C4.22386 20 4 19.7761 4 19.5V14.5C4 14.2239 4.22386 14 4.5 14H9.5C9.77614 14 10 14.2239 10 14.5V19.5C10 19.7761 9.77614 20 9.5 20H4.5ZM6.5 6C6.22386 6 6 6.22386 6 6.5V7.5C6 7.77614 6.22386 8 6.5 8H7.5C7.77614 8 8 7.77614 8 7.5V6.5C8 6.22386 7.77614 6 7.5 6H6.5ZM16.5 6C16.2239 6 16 6.22386 16 6.5V7.5C16 7.77614 16.2239 8 16.5 8H17.5C17.7761 8 18 7.77614 18 7.5V6.5C18 6.22386 17.7761 6 17.5 6H16.5ZM6.5 16C6.22386 16 6 16.2239 6 16.5V17.5C6 17.7761 6.22386 18 6.5 18H7.5C7.77614 18 8 17.7761 8 17.5V16.5C8 16.2239 7.77614 16 7.5 16H6.5ZM4 11.5C4 11.2239 4.22386 11 4.5 11H5.5C5.77614 11 6 11.2239 6 11.5V12.5C6 12.7761 5.77614 13 5.5 13H4.5C4.22386 13 4 12.7761 4 12.5V11.5ZM9 11.5C9 11.2239 9.22386 11 9.5 11H12.5C12.7761 11 13 11.2239 13 11.5V14.5C13 14.7761 12.7761 15 12.5 15H11.5C11.2239 15 11 14.7761 11 14.5V13.5C11 13.2239 10.7761 13 10.5 13H9.5C9.22386 13 9 12.7761 9 12.5V11.5ZM11 6.5C11 6.22386 11.2239 6 11.5 6H12.5C12.7761 6 13 6.22386 13 6.5V9.5C13 9.77614 12.7761 10 12.5 10H11.5C11.2239 10 11 9.77614 11 9.5V6.5ZM2.5 2C2.22386 2 2 2.22386 2 2.5V5.5C2 5.77614 1.77614 6 1.5 6H0.5C0.223858 6 0 5.77614 0 5.5V2C0 1.46957 0.210714 0.960859 0.585786 0.585786C0.960859 0.210714 1.46957 0 2 0L5.5 0C5.77614 0 6 0.223858 6 0.5V1.5C6 1.77614 5.77614 2 5.5 2H2.5ZM22 0C22.5304 0 23.0391 0.210714 23.4142 0.585786C23.7893 0.960859 24 1.46957 24 2V5.5C24 5.77614 23.7761 6 23.5 6H22.5C22.2239 6 22 5.77614 22 5.5V2.5C22 2.22386 21.7761 2 21.5 2H18.5C18.2239 2 18 1.77614 18 1.5V0.5C18 0.223858 18.2239 0 18.5 0H22ZM1.5 18C1.77614 18 2 18.2239 2 18.5V21.5C2 21.7761 2.22386 22 2.5 22H5.5C5.77614 22 6 22.2239 6 22.5V23.5C6 23.7761 5.77614 24 5.5 24H2C1.46957 24 0.960859 23.7893 0.585786 23.4142C0.210714 23.0391 0 22.5304 0 22V18.5C0 18.2239 0.223858 18 0.5 18H1.5ZM21.5 22C21.7761 22 22 21.7761 22 21.5V18.5C22 18.2239 22.2239 18 22.5 18H23.5C23.7761 18 24 18.2239 24 18.5V22C24 22.5304 23.7893 23.0391 23.4142 23.4142C23.0391 23.7893 22.5304 24 22 24H18.5C18.2239 24 18 23.7761 18 23.5V22.5C18 22.2239 18.2239 22 18.5 22H21.5Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -70,7 +70,7 @@ exports[`<QRCodeIcon /> should render QRCodeIcon 1`] = `
             fill={4294967295}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/RadioIcon/__snapshots__/RadioIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/RadioIcon/__snapshots__/RadioIcon.native.test.tsx.snap
index a800f58257a..ac70c80cd1b 100644
--- a/packages/blade/src/components/Icons/RadioIcon/__snapshots__/RadioIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RadioIcon/__snapshots__/RadioIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<RadioIcon /> should render RadioIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<RadioIcon /> should render RadioIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<RadioIcon /> should render RadioIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<RadioIcon /> should render RadioIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/RazorpayIcon/__snapshots__/RazorpayIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/RazorpayIcon/__snapshots__/RazorpayIcon.native.test.tsx.snap
index e3acd0e3040..c9bb9e91275 100644
--- a/packages/blade/src/components/Icons/RazorpayIcon/__snapshots__/RazorpayIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RazorpayIcon/__snapshots__/RazorpayIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<RazorpayIcon /> should render RazorpayIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<RazorpayIcon /> should render RazorpayIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<RazorpayIcon /> should render RazorpayIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<RazorpayIcon /> should render RazorpayIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/RazorpayXIcon/__snapshots__/RazorpayXIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/RazorpayXIcon/__snapshots__/RazorpayXIcon.native.test.tsx.snap
index 607aa7ce9b5..3edc2848e44 100644
--- a/packages/blade/src/components/Icons/RazorpayXIcon/__snapshots__/RazorpayXIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RazorpayXIcon/__snapshots__/RazorpayXIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<RazorpayXIcon /> should render RazorpayXIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<RazorpayXIcon /> should render RazorpayXIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<RazorpayXIcon /> should render RazorpayXIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<RazorpayXIcon /> should render RazorpayXIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/RefreshIcon/__snapshots__/RefreshIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/RefreshIcon/__snapshots__/RefreshIcon.native.test.tsx.snap
index a4462887da9..40d12f8b89d 100644
--- a/packages/blade/src/components/Icons/RefreshIcon/__snapshots__/RefreshIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RefreshIcon/__snapshots__/RefreshIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<RefreshIcon /> should render RefreshIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<RefreshIcon /> should render RefreshIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<RefreshIcon /> should render RefreshIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<RefreshIcon /> should render RefreshIcon 1`] = `
         d="M10.229 4.2a8 8 0 0 1 7.446 2.169L20.525 9H17a1 1 0 1 0 0 2h6a1 1 0 0 0 1-1V4a1 1 0 1 0-2 0v3.64l-2.944-2.718A10 10 0 0 0 2.567 8.666a1 1 0 0 0 1.886.668A8 8 0 0 1 10.229 4.2ZM2 16.36V20a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H3.474l2.85 2.631a8 8 0 0 0 13.223-2.965 1 1 0 0 1 1.886.668 10 10 0 0 1-16.489 3.744L2 16.361Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/RepeatIcon/__snapshots__/RepeatIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/RepeatIcon/__snapshots__/RepeatIcon.native.test.tsx.snap
index 6edbd413f63..ed80f478e76 100644
--- a/packages/blade/src/components/Icons/RepeatIcon/__snapshots__/RepeatIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RepeatIcon/__snapshots__/RepeatIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<RepeatIcon /> should render RepeatIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<RepeatIcon /> should render RepeatIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<RepeatIcon /> should render RepeatIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -56,7 +56,7 @@ exports[`<RepeatIcon /> should render RepeatIcon 1`] = `
           d="M17.7071 0.292893C17.3166 -0.0976311 16.6834 -0.0976311 16.2929 0.292893C15.9024 0.683417 15.9024 1.31658 16.2929 1.70711L18.5858 4H7C4.23858 4 2 6.23858 2 9V11C2 11.5523 2.44772 12 3 12C3.55228 12 4 11.5523 4 11V9C4 7.34315 5.34315 6 7 6H18.5858L16.2929 8.29289C15.9024 8.68342 15.9024 9.31658 16.2929 9.70711C16.6834 10.0976 17.3166 10.0976 17.7071 9.70711L21.7071 5.70711C22.0976 5.31658 22.0976 4.68342 21.7071 4.29289L17.7071 0.292893Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -65,7 +65,7 @@ exports[`<RepeatIcon /> should render RepeatIcon 1`] = `
           d="M7.70711 14.2929C8.09763 14.6834 8.09763 15.3166 7.70711 15.7071L5.41421 18H17C18.6569 18 20 16.6569 20 15V13C20 12.4477 20.4477 12 21 12C21.5523 12 22 12.4477 22 13V15C22 17.7614 19.7614 20 17 20H5.41421L7.70711 22.2929C8.09763 22.6834 8.09763 23.3166 7.70711 23.7071C7.31658 24.0976 6.68342 24.0976 6.29289 23.7071L2.29289 19.7071C1.90237 19.3166 1.90237 18.6834 2.29289 18.2929L6.29289 14.2929C6.68342 13.9024 7.31658 13.9024 7.70711 14.2929Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -79,7 +79,7 @@ exports[`<RepeatIcon /> should render RepeatIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/ReportsIcon/__snapshots__/ReportsIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ReportsIcon/__snapshots__/ReportsIcon.native.test.tsx.snap
index 918e0a4207f..41ab2b1a957 100644
--- a/packages/blade/src/components/Icons/ReportsIcon/__snapshots__/ReportsIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ReportsIcon/__snapshots__/ReportsIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ReportsIcon /> should render ReportsIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ReportsIcon /> should render ReportsIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ReportsIcon /> should render ReportsIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<ReportsIcon /> should render ReportsIcon 1`] = `
         d="M4 6H2V20C2 21.1 2.9 22 4 22H18V20H4V6ZM20 2H8C6.9 2 6 2.9 6 4V16C6 17.1 6.9 18 8 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2ZM19 11H9V9H19V11ZM15 15H9V13H15V15ZM19 7H9V5H19V7Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/RewindIcon/__snapshots__/RewindIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/RewindIcon/__snapshots__/RewindIcon.native.test.tsx.snap
index d5adc65c615..9a7199d2f7f 100644
--- a/packages/blade/src/components/Icons/RewindIcon/__snapshots__/RewindIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RewindIcon/__snapshots__/RewindIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<RewindIcon /> should render RewindIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<RewindIcon /> should render RewindIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<RewindIcon /> should render RewindIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<RewindIcon /> should render RewindIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/RotateClockWiseIcon/__snapshots__/RotateClockWiseIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/RotateClockWiseIcon/__snapshots__/RotateClockWiseIcon.native.test.tsx.snap
index da7cf8afbc6..298da8a7e05 100644
--- a/packages/blade/src/components/Icons/RotateClockWiseIcon/__snapshots__/RotateClockWiseIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RotateClockWiseIcon/__snapshots__/RotateClockWiseIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<RotateClockWiseIcon /> should render RotateClockWiseIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<RotateClockWiseIcon /> should render RotateClockWiseIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<RotateClockWiseIcon /> should render RotateClockWiseIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<RotateClockWiseIcon /> should render RotateClockWiseIcon 1`] = `
         d="M7.14125 4.99635C10.2617 3.27579 14.1439 3.82644 16.6627 6.34689C16.6699 6.35405 16.6771 6.36109 16.6845 6.36802L19.528 9H16C15.4477 9 15 9.44772 15 10C15 10.5523 15.4477 11 16 11H22C22.5523 11 23 10.5523 23 10V4C23 3.44772 22.5523 3 22 3C21.4477 3 21 3.44772 21 4V7.63742L18.0664 4.92215C14.9175 1.78097 10.0715 1.09674 6.17554 3.24495C2.27503 5.39565 0.267187 9.86684 1.25111 14.211C2.23504 18.5551 5.97351 21.7248 10.4201 21.9849C14.8666 22.245 18.9492 19.5329 20.4329 15.3331C20.6169 14.8124 20.3439 14.2411 19.8232 14.0571C19.3024 13.8731 18.7311 14.1462 18.5472 14.6669C17.3602 18.0267 14.0941 20.1964 10.5369 19.9883C6.97962 19.7802 3.98884 17.2445 3.2017 13.7692C2.41456 10.2939 4.02084 6.71691 7.14125 4.99635Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/RotateCounterClockWiseIcon/__snapshots__/RotateCounterClockWiseIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/RotateCounterClockWiseIcon/__snapshots__/RotateCounterClockWiseIcon.native.test.tsx.snap
index 27a4a61cf35..9d463741c64 100644
--- a/packages/blade/src/components/Icons/RotateCounterClockWiseIcon/__snapshots__/RotateCounterClockWiseIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RotateCounterClockWiseIcon/__snapshots__/RotateCounterClockWiseIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<RotateCounterClockWiseIcon /> should render RotateCounterClockWiseIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<RotateCounterClockWiseIcon /> should render RotateCounterClockWiseIcon
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<RotateCounterClockWiseIcon /> should render RotateCounterClockWiseIcon
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<RotateCounterClockWiseIcon /> should render RotateCounterClockWiseIcon
         d="M17.8366 3.25759C13.9432 1.10528 9.09681 1.784 5.94449 4.92134L3 7.63918V4C3 3.44772 2.55228 3 2 3C1.44772 3 1 3.44772 1 4V10C1 10.5523 1.44772 11 2 11H8C8.55228 11 9 10.5523 9 10C9 9.44772 8.55228 9 8 9H4.47426L7.32478 6.36875C7.33213 6.36185 7.33937 6.35483 7.34651 6.34771C9.86814 3.83034 13.7507 3.28409 16.869 5.00794C19.9874 6.7318 21.5898 10.3102 20.7992 13.7845C20.0085 17.2588 17.0155 19.7914 13.4583 19.9961C9.90104 20.2009 6.63718 18.0283 5.45318 14.6677C5.26966 14.1468 4.69861 13.8733 4.17771 14.0568C3.65681 14.2403 3.38331 14.8114 3.56683 15.3323C5.04683 19.5331 9.12665 22.2487 13.5732 21.9928C18.0197 21.7369 21.761 18.5711 22.7493 14.2283C23.7376 9.8854 21.7346 5.41241 17.8366 3.25759Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/RoutesIcon/__snapshots__/RoutesIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/RoutesIcon/__snapshots__/RoutesIcon.native.test.tsx.snap
index e2a6ca5ea56..d8e1312ee2e 100644
--- a/packages/blade/src/components/Icons/RoutesIcon/__snapshots__/RoutesIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RoutesIcon/__snapshots__/RoutesIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<RoutesIcon /> should render RoutesIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<RoutesIcon /> should render RoutesIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<RoutesIcon /> should render RoutesIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<RoutesIcon /> should render RoutesIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/RupeeIcon/__snapshots__/RupeeIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/RupeeIcon/__snapshots__/RupeeIcon.native.test.tsx.snap
index eadfda8ff0b..ac52ed46854 100644
--- a/packages/blade/src/components/Icons/RupeeIcon/__snapshots__/RupeeIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RupeeIcon/__snapshots__/RupeeIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<RupeeIcon /> should render RupeeIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<RupeeIcon /> should render RupeeIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<RupeeIcon /> should render RupeeIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<RupeeIcon /> should render RupeeIcon 1`] = `
         d="M17 7.78125L16.5015 9.59375H7L7.49853 7.78125H17ZM12.5425 20L7.17595 13L7.14663 11.6875H9.81525C10.5093 11.6875 11.1007 11.5833 11.5894 11.375C12.0782 11.1615 12.4521 10.8437 12.7111 10.4219C12.9702 9.99479 13.0997 9.45833 13.0997 8.8125C13.0997 7.85937 12.8309 7.11198 12.2933 6.57031C11.7556 6.02344 10.9296 5.75 9.81525 5.75H7L7.49853 4H9.81525C11.0078 4 11.9853 4.21094 12.7478 4.63281C13.5152 5.04948 14.0821 5.6224 14.4487 6.35156C14.8201 7.07552 15.0059 7.89583 15.0059 8.8125C15.0059 9.64062 14.8348 10.4036 14.4927 11.1016C14.1554 11.7943 13.6129 12.3516 12.8651 12.7734C12.1222 13.1953 11.1398 13.4062 9.91789 13.4062H9.8739L14.8299 19.875V20H12.5425ZM17 4L16.5015 5.8125L9.02346 5.75L9.52199 4H17Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/RupeesIcon/__snapshots__/RupeesIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/RupeesIcon/__snapshots__/RupeesIcon.native.test.tsx.snap
index 43148d672ef..8b25ff7d43c 100644
--- a/packages/blade/src/components/Icons/RupeesIcon/__snapshots__/RupeesIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/RupeesIcon/__snapshots__/RupeesIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<RupeesIcon /> should render RupeesIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<RupeesIcon /> should render RupeesIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<RupeesIcon /> should render RupeesIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<RupeesIcon /> should render RupeesIcon 1`] = `
         d="M17 7.78125L16.5015 9.59375H7L7.49853 7.78125H17ZM12.5425 20L7.17595 13L7.14663 11.6875H9.81525C10.5093 11.6875 11.1007 11.5833 11.5894 11.375C12.0782 11.1615 12.4521 10.8437 12.7111 10.4219C12.9702 9.99479 13.0997 9.45833 13.0997 8.8125C13.0997 7.85937 12.8309 7.11198 12.2933 6.57031C11.7556 6.02344 10.9296 5.75 9.81525 5.75H7L7.49853 4H9.81525C11.0078 4 11.9853 4.21094 12.7478 4.63281C13.5152 5.04948 14.0821 5.6224 14.4487 6.35156C14.8201 7.07552 15.0059 7.89583 15.0059 8.8125C15.0059 9.64062 14.8348 10.4036 14.4927 11.1016C14.1554 11.7943 13.6129 12.3516 12.8651 12.7734C12.1222 13.1953 11.1398 13.4062 9.91789 13.4062H9.8739L14.8299 19.875V20H12.5425ZM17 4L16.5015 5.8125L9.02346 5.75L9.52199 4H17Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/SaveIcon/__snapshots__/SaveIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SaveIcon/__snapshots__/SaveIcon.native.test.tsx.snap
index 4b5ed661f07..5a97734476f 100644
--- a/packages/blade/src/components/Icons/SaveIcon/__snapshots__/SaveIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SaveIcon/__snapshots__/SaveIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<SaveIcon /> should render SaveIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<SaveIcon /> should render SaveIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<SaveIcon /> should render SaveIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<SaveIcon /> should render SaveIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/ScissorsIcon/__snapshots__/ScissorsIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ScissorsIcon/__snapshots__/ScissorsIcon.native.test.tsx.snap
index 7669e3d573c..d9d56b3dff7 100644
--- a/packages/blade/src/components/Icons/ScissorsIcon/__snapshots__/ScissorsIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ScissorsIcon/__snapshots__/ScissorsIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ScissorsIcon /> should render ScissorsIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ScissorsIcon /> should render ScissorsIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ScissorsIcon /> should render ScissorsIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -57,7 +57,7 @@ exports[`<ScissorsIcon /> should render ScissorsIcon 1`] = `
           d="M6 9C7.65685 9 9 7.65685 9 6C9 4.34315 7.65685 3 6 3C4.34315 3 3 4.34315 3 6C3 7.65685 4.34315 9 6 9Z"
           fillRule={0}
           propList={
-            Array [
+            [
               "fillRule",
               "stroke",
               "strokeWidth",
@@ -75,7 +75,7 @@ exports[`<ScissorsIcon /> should render ScissorsIcon 1`] = `
           d="M6 21C7.65685 21 9 19.6569 9 18C9 16.3431 7.65685 15 6 15C4.34315 15 3 16.3431 3 18C3 19.6569 4.34315 21 6 21Z"
           fillRule={0}
           propList={
-            Array [
+            [
               "fillRule",
               "stroke",
               "strokeWidth",
@@ -91,7 +91,7 @@ exports[`<ScissorsIcon /> should render ScissorsIcon 1`] = `
         <RNSVGPath
           d="M20 4L8.12 15.88"
           propList={
-            Array [
+            [
               "stroke",
               "strokeWidth",
               "strokeLinecap",
@@ -106,7 +106,7 @@ exports[`<ScissorsIcon /> should render ScissorsIcon 1`] = `
         <RNSVGPath
           d="M14.47 14.48L20 20"
           propList={
-            Array [
+            [
               "stroke",
               "strokeWidth",
               "strokeLinecap",
@@ -121,7 +121,7 @@ exports[`<ScissorsIcon /> should render ScissorsIcon 1`] = `
         <RNSVGPath
           d="M8.12 8.12L12 12"
           propList={
-            Array [
+            [
               "stroke",
               "strokeWidth",
               "strokeLinecap",
@@ -142,7 +142,7 @@ exports[`<ScissorsIcon /> should render ScissorsIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/SearchIcon/__snapshots__/SearchIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SearchIcon/__snapshots__/SearchIcon.native.test.tsx.snap
index 915ee9a37f0..0a631bcfd75 100644
--- a/packages/blade/src/components/Icons/SearchIcon/__snapshots__/SearchIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SearchIcon/__snapshots__/SearchIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<SearchIcon /> should render SearchIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<SearchIcon /> should render SearchIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<SearchIcon /> should render SearchIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<SearchIcon /> should render SearchIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/SendIcon/__snapshots__/SendIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SendIcon/__snapshots__/SendIcon.native.test.tsx.snap
index c76b3f029c4..5f91d1e71da 100644
--- a/packages/blade/src/components/Icons/SendIcon/__snapshots__/SendIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SendIcon/__snapshots__/SendIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<SendIcon /> should render SendIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<SendIcon /> should render SendIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<SendIcon /> should render SendIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<SendIcon /> should render SendIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/ServerIcon/__snapshots__/ServerIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ServerIcon/__snapshots__/ServerIcon.native.test.tsx.snap
index bc12d5720a1..1d004e62202 100644
--- a/packages/blade/src/components/Icons/ServerIcon/__snapshots__/ServerIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ServerIcon/__snapshots__/ServerIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ServerIcon /> should render ServerIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ServerIcon /> should render ServerIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ServerIcon /> should render ServerIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<ServerIcon /> should render ServerIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<ServerIcon /> should render ServerIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -77,7 +77,7 @@ exports[`<ServerIcon /> should render ServerIcon 1`] = `
         d="M7 6C7 6.55228 6.55228 7 6 7C5.44772 7 5 6.55228 5 6C5 5.44772 5.44772 5 6 5C6.55228 5 7 5.44772 7 6Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -86,7 +86,7 @@ exports[`<ServerIcon /> should render ServerIcon 1`] = `
         d="M7 18C7 18.5523 6.55228 19 6 19C5.44772 19 5 18.5523 5 18C5 17.4477 5.44772 17 6 17C6.55228 17 7 17.4477 7 18Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/SettingsIcon/__snapshots__/SettingsIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SettingsIcon/__snapshots__/SettingsIcon.native.test.tsx.snap
index 02948389d25..9e51181d55a 100644
--- a/packages/blade/src/components/Icons/SettingsIcon/__snapshots__/SettingsIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SettingsIcon/__snapshots__/SettingsIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<SettingsIcon /> should render SettingsIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<SettingsIcon /> should render SettingsIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<SettingsIcon /> should render SettingsIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<SettingsIcon /> should render SettingsIcon 1`] = `
         d="M8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12ZM12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<SettingsIcon /> should render SettingsIcon 1`] = `
         d="M12 2C11.4477 2 11 2.44772 11 3V3.17399C10.9958 4.2302 10.3647 5.18306 9.39393 5.59914C9.30943 5.63535 9.22054 5.65966 9.1298 5.67154C8.18476 6.00287 7.12514 5.77346 6.40073 5.06486L6.39285 5.05715L6.33289 4.99711C6.14533 4.80933 5.89041 4.70343 5.625 4.70343C5.35959 4.70343 5.10507 4.80894 4.9175 4.99671L4.91671 4.9975C4.72894 5.18507 4.62343 5.43959 4.62343 5.705C4.62343 5.97041 4.72894 6.22493 4.91671 6.4125L4.98491 6.48069C5.73506 7.24758 5.94813 8.39018 5.52745 9.37478C5.14428 10.3797 4.19067 11.0545 3.11338 11.0797L3.09 11.08H3C2.44772 11.08 2 11.5277 2 12.08C2 12.6323 2.44772 13.08 3 13.08H3.17399C4.22841 13.0842 5.17982 13.7131 5.59701 14.6811C6.03158 15.6711 5.82114 16.8261 5.06486 17.5993L5.05715 17.6071L4.99711 17.6671C4.80933 17.8547 4.70343 18.1096 4.70343 18.375C4.70343 18.6404 4.80894 18.8949 4.99671 19.0825L4.9975 19.0833C5.18507 19.2711 5.43959 19.3766 5.705 19.3766C5.97041 19.3766 6.22493 19.2711 6.4125 19.0833L6.48069 19.0151C7.24757 18.2649 8.39018 18.0519 9.37477 18.4725C10.3797 18.8557 11.0545 19.8093 11.0797 20.8866L11.08 20.91V21C11.08 21.5523 11.5277 22 12.08 22C12.6323 22 13.08 21.5523 13.08 21V20.83L13.08 20.826C13.0842 19.7716 13.7132 18.8201 14.6812 18.4029C15.6712 17.9684 16.8261 18.1789 17.5993 18.9351L17.6071 18.9428L17.6671 19.0029C17.8547 19.1907 18.1096 19.2966 18.375 19.2966C18.6404 19.2966 18.8949 19.1911 19.0825 19.0033L19.0833 19.0025C19.2711 18.8149 19.3766 18.5604 19.3766 18.295C19.3766 18.0296 19.2711 17.7751 19.0833 17.5875L19.0151 17.5193C18.2588 16.7462 18.0484 15.5912 18.4829 14.6012C18.9001 13.6332 19.8516 13.0042 20.906 13L20.91 13L21 13C21.5523 13 22 12.5523 22 12C22 11.4477 21.5523 11 21 11H20.83L20.826 11C19.7698 10.9958 18.8169 10.3647 18.4009 9.39393C18.3646 9.30943 18.3403 9.22054 18.3285 9.1298C17.9971 8.18476 18.2265 7.12514 18.9351 6.40073L18.9428 6.39285L19.0029 6.3329C19.1907 6.14533 19.2966 5.89041 19.2966 5.625C19.2966 5.35959 19.1911 5.10507 19.0033 4.9175L19.0025 4.91671C18.8149 4.72894 18.5604 4.62343 18.295 4.62343C18.0296 4.62343 17.7751 4.72894 17.5875 4.91671L17.5193 4.98491C16.7462 5.74119 15.5911 5.95158 14.6011 5.51701C13.6331 5.09982 13.0042 4.14841 13 3.09399L13 3.09V3C13 2.44772 12.5523 2 12 2ZM9 3C9 1.34315 10.3431 0 12 0C13.6569 0 15 1.34315 15 3V3.0875C15.0016 3.34598 15.1563 3.579 15.3939 3.68086L15.4038 3.68508C15.6456 3.7918 15.9277 3.74149 16.1177 3.55811L16.1725 3.50329C16.7352 2.93996 17.4988 2.62343 18.295 2.62343C19.0912 2.62343 19.8548 2.93996 20.4175 3.50329C20.9803 4.06592 21.2966 4.82914 21.2966 5.625C21.2966 6.42104 20.9802 7.18444 20.4171 7.7471L20.3619 7.80231C20.1785 7.99225 20.1281 8.27444 20.2349 8.51624C20.2631 8.58029 20.2845 8.64696 20.2988 8.71513C20.4175 8.88998 20.6161 8.99864 20.8325 9H21C22.6569 9 24 10.3431 24 12C24 13.6569 22.6569 15 21 15H20.9125C20.654 15.0016 20.421 15.1563 20.3191 15.3939L20.3149 15.4038C20.2082 15.6456 20.2585 15.9277 20.4419 16.1177L20.4967 16.1725C21.0598 16.7352 21.3766 17.499 21.3766 18.295C21.3766 19.091 21.0602 19.8544 20.4971 20.4171C19.9344 20.9802 19.171 21.2966 18.375 21.2966C17.579 21.2966 16.8156 20.9802 16.2529 20.4171L16.1977 20.3619C16.0077 20.1785 15.7256 20.1282 15.4838 20.2349L15.474 20.2392C15.2363 20.3411 15.0816 20.574 15.08 20.8325V21C15.08 22.6569 13.7369 24 12.08 24C10.4231 24 9.08 22.6569 9.08 21V20.9244C9.07021 20.6612 8.90248 20.4296 8.65482 20.3385C8.63505 20.3313 8.61551 20.3234 8.59624 20.3149C8.35443 20.2081 8.07224 20.2585 7.8823 20.4419L7.8275 20.4967C7.26483 21.0598 6.50105 21.3766 5.705 21.3766C4.90914 21.3766 4.14592 21.0603 3.58329 20.4975C3.01996 19.9348 2.70343 19.1712 2.70343 18.375C2.70343 17.5788 3.01996 16.8152 3.58329 16.2525L3.63811 16.1977C3.82149 16.0077 3.87185 15.7256 3.76514 15.4838L3.76081 15.474C3.65895 15.2363 3.42598 15.0816 3.1675 15.08H3C1.34315 15.08 0 13.7369 0 12.08C0 10.4231 1.34315 9.08 3 9.08H3.07565C3.33875 9.07021 3.57038 8.90248 3.66146 8.65482C3.66874 8.63505 3.67663 8.61551 3.68514 8.59624C3.79185 8.35444 3.74149 8.07225 3.5581 7.88231L3.50329 7.8275C2.93996 7.2648 2.62343 6.50123 2.62343 5.705C2.62343 4.90896 2.93981 4.14556 3.50289 3.58289C4.06556 3.01981 4.82896 2.70343 5.625 2.70343C6.42123 2.70343 7.1848 3.01996 7.7475 3.58329L7.80231 3.6381C7.99225 3.82149 8.27444 3.87185 8.51624 3.76514C8.5803 3.73687 8.64697 3.71548 8.71514 3.70121C8.88999 3.58253 8.99864 3.38394 9 3.1675V3Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/SettlementsIcon/__snapshots__/SettlementsIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SettlementsIcon/__snapshots__/SettlementsIcon.native.test.tsx.snap
index 52fdaa9cbb2..20f11c71e15 100644
--- a/packages/blade/src/components/Icons/SettlementsIcon/__snapshots__/SettlementsIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SettlementsIcon/__snapshots__/SettlementsIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<SettlementsIcon /> should render SettlementsIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<SettlementsIcon /> should render SettlementsIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<SettlementsIcon /> should render SettlementsIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<SettlementsIcon /> should render SettlementsIcon 1`] = `
         d="m22.763 7.879-7.797 9.697c-.097.118-.22.216-.362.29a1.283 1.283 0 0 1-.461.134h-.11c-.293 0-.575-.099-.79-.276l-3.58-2.957-2.054 2.582a1.059 1.059 0 0 1-.357.302c-.142.075-.302.12-.467.132h-.11c-.29.004-.57-.095-.779-.276l-4.502-3.705a1.01 1.01 0 0 1-.281-.321.906.906 0 0 1-.036-.798.984.984 0 0 1 .25-.34 1.09 1.09 0 0 1 .358-.252 1.2 1.2 0 0 1 1.268.193l3.558 2.907 7.006-8.742c.083-.115.192-.213.32-.288a1.22 1.22 0 0 1 .877-.13c.148.035.286.097.406.182.13.075.241.173.326.289a.928.928 0 0 1 .166.383.887.887 0 0 1-.022.41.95.95 0 0 1-.207.367l-4.392 5.41 2.833 2.346 7.072-8.752a1.05 1.05 0 0 1 .322-.286 1.22 1.22 0 0 1 .876-.124c.148.035.286.098.405.184.129.074.238.172.322.287a.93.93 0 0 1 .164.38.887.887 0 0 1-.02.407.949.949 0 0 1-.202.365Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/ShareIcon/__snapshots__/ShareIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ShareIcon/__snapshots__/ShareIcon.native.test.tsx.snap
index 15622934e84..6ee18029a91 100644
--- a/packages/blade/src/components/Icons/ShareIcon/__snapshots__/ShareIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ShareIcon/__snapshots__/ShareIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ShareIcon /> should render ShareIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ShareIcon /> should render ShareIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ShareIcon /> should render ShareIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<ShareIcon /> should render ShareIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<ShareIcon /> should render ShareIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -79,7 +79,7 @@ exports[`<ShareIcon /> should render ShareIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -91,7 +91,7 @@ exports[`<ShareIcon /> should render ShareIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -103,7 +103,7 @@ exports[`<ShareIcon /> should render ShareIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/ShieldIcon/__snapshots__/ShieldIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ShieldIcon/__snapshots__/ShieldIcon.native.test.tsx.snap
index 1a7bc9fb0b2..ff9fdd6382e 100644
--- a/packages/blade/src/components/Icons/ShieldIcon/__snapshots__/ShieldIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ShieldIcon/__snapshots__/ShieldIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ShieldIcon /> should render ShieldIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ShieldIcon /> should render ShieldIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ShieldIcon /> should render ShieldIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<ShieldIcon /> should render ShieldIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/ShoppingCartIcon/__snapshots__/ShoppingCartIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ShoppingCartIcon/__snapshots__/ShoppingCartIcon.native.test.tsx.snap
index c27a6103cb3..6f5fb7bed4c 100644
--- a/packages/blade/src/components/Icons/ShoppingCartIcon/__snapshots__/ShoppingCartIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ShoppingCartIcon/__snapshots__/ShoppingCartIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ShoppingCartIcon /> should render ShoppingCartIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ShoppingCartIcon /> should render ShoppingCartIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ShoppingCartIcon /> should render ShoppingCartIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -58,7 +58,7 @@ exports[`<ShoppingCartIcon /> should render ShoppingCartIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -70,7 +70,7 @@ exports[`<ShoppingCartIcon /> should render ShoppingCartIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -82,7 +82,7 @@ exports[`<ShoppingCartIcon /> should render ShoppingCartIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -97,7 +97,7 @@ exports[`<ShoppingCartIcon /> should render ShoppingCartIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/ShuffleIcon/__snapshots__/ShuffleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ShuffleIcon/__snapshots__/ShuffleIcon.native.test.tsx.snap
index ab7799cb655..e01a28576fa 100644
--- a/packages/blade/src/components/Icons/ShuffleIcon/__snapshots__/ShuffleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ShuffleIcon/__snapshots__/ShuffleIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ShuffleIcon /> should render ShuffleIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ShuffleIcon /> should render ShuffleIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ShuffleIcon /> should render ShuffleIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<ShuffleIcon /> should render ShuffleIcon 1`] = `
         d="M14 3a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V5.414L3.707 20.707a1 1 0 0 1-1.414-1.414L17.586 4H15a1 1 0 0 1-1-1ZM21 16a1 1 0 1 0-2 0v2.586l-4.293-4.293a1 1 0 0 0-1.414 1.414L17.586 20H15a1 1 0 1 0 0 2h5a1 1 0 0 0 1-1v-5ZM3.707 3.293a1 1 0 0 0-1.414 1.414l5 5a1 1 0 0 0 1.414-1.414l-5-5Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/SidebarIcon/__snapshots__/SidebarIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SidebarIcon/__snapshots__/SidebarIcon.native.test.tsx.snap
index b6e4691b4d7..55bb4edfcf7 100644
--- a/packages/blade/src/components/Icons/SidebarIcon/__snapshots__/SidebarIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SidebarIcon/__snapshots__/SidebarIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<SidebarIcon /> should render SidebarIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<SidebarIcon /> should render SidebarIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<SidebarIcon /> should render SidebarIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<SidebarIcon /> should render SidebarIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/SkipBackIcon/__snapshots__/SkipBackIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SkipBackIcon/__snapshots__/SkipBackIcon.native.test.tsx.snap
index 0d65aeff11b..d0ce4c99dca 100644
--- a/packages/blade/src/components/Icons/SkipBackIcon/__snapshots__/SkipBackIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SkipBackIcon/__snapshots__/SkipBackIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<SkipBackIcon /> should render SkipBackIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<SkipBackIcon /> should render SkipBackIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<SkipBackIcon /> should render SkipBackIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<SkipBackIcon /> should render SkipBackIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -65,7 +65,7 @@ exports[`<SkipBackIcon /> should render SkipBackIcon 1`] = `
         d="M6 5C6 4.44772 5.55228 4 5 4C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20C5.55228 20 6 19.5523 6 19V5Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/SkipForwardIcon/__snapshots__/SkipForwardIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SkipForwardIcon/__snapshots__/SkipForwardIcon.native.test.tsx.snap
index d66fb58a869..ea91c2d37e3 100644
--- a/packages/blade/src/components/Icons/SkipForwardIcon/__snapshots__/SkipForwardIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SkipForwardIcon/__snapshots__/SkipForwardIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<SkipForwardIcon /> should render SkipForwardIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<SkipForwardIcon /> should render SkipForwardIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<SkipForwardIcon /> should render SkipForwardIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<SkipForwardIcon /> should render SkipForwardIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<SkipForwardIcon /> should render SkipForwardIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/SlackIcon/__snapshots__/SlackIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SlackIcon/__snapshots__/SlackIcon.native.test.tsx.snap
index f3e00a32da7..796a66edb8e 100644
--- a/packages/blade/src/components/Icons/SlackIcon/__snapshots__/SlackIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SlackIcon/__snapshots__/SlackIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<SlackIcon /> should render SlackIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<SlackIcon /> should render SlackIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<SlackIcon /> should render SlackIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -58,7 +58,7 @@ exports[`<SlackIcon /> should render SlackIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -70,7 +70,7 @@ exports[`<SlackIcon /> should render SlackIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -85,7 +85,7 @@ exports[`<SlackIcon /> should render SlackIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/SlashIcon/__snapshots__/SlashIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SlashIcon/__snapshots__/SlashIcon.native.test.tsx.snap
index ccf6099c3f3..6729bacfbe9 100644
--- a/packages/blade/src/components/Icons/SlashIcon/__snapshots__/SlashIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SlashIcon/__snapshots__/SlashIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<SlashIcon /> should render SlashIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<SlashIcon /> should render SlashIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<SlashIcon /> should render SlashIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<SlashIcon /> should render SlashIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/SlidersIcon/__snapshots__/SlidersIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SlidersIcon/__snapshots__/SlidersIcon.native.test.tsx.snap
index 870f33b1a4d..49938ac705f 100644
--- a/packages/blade/src/components/Icons/SlidersIcon/__snapshots__/SlidersIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SlidersIcon/__snapshots__/SlidersIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<SlidersIcon /> should render SlidersIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<SlidersIcon /> should render SlidersIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<SlidersIcon /> should render SlidersIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<SlidersIcon /> should render SlidersIcon 1`] = `
         d="M4 2C4.55228 2 5 2.44772 5 3V10C5 10.5523 4.55228 11 4 11C3.44772 11 3 10.5523 3 10V3C3 2.44772 3.44772 2 4 2Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<SlidersIcon /> should render SlidersIcon 1`] = `
         d="M5 15H7C7.55228 15 8 14.5523 8 14C8 13.4477 7.55228 13 7 13H1C0.447715 13 0 13.4477 0 14C0 14.5523 0.447715 15 1 15H3V21C3 21.5523 3.44772 22 4 22C4.55228 22 5 21.5523 5 21V15Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -71,7 +71,7 @@ exports[`<SlidersIcon /> should render SlidersIcon 1`] = `
         d="M13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V21C11 21.5523 11.4477 22 12 22C12.5523 22 13 21.5523 13 21V12Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -80,7 +80,7 @@ exports[`<SlidersIcon /> should render SlidersIcon 1`] = `
         d="M12 2C12.5523 2 13 2.44772 13 3V7H15C15.5523 7 16 7.44772 16 8C16 8.55228 15.5523 9 15 9H9C8.44771 9 8 8.55228 8 8C8 7.44772 8.44771 7 9 7H11V3C11 2.44772 11.4477 2 12 2Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -89,7 +89,7 @@ exports[`<SlidersIcon /> should render SlidersIcon 1`] = `
         d="M23 15C23.5523 15 24 15.4477 24 16C24 16.5523 23.5523 17 23 17H21V21C21 21.5523 20.5523 22 20 22C19.4477 22 19 21.5523 19 21V17H17C16.4477 17 16 16.5523 16 16C16 15.4477 16.4477 15 17 15H23Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -98,7 +98,7 @@ exports[`<SlidersIcon /> should render SlidersIcon 1`] = `
         d="M20 2C20.5523 2 21 2.44772 21 3V12C21 12.5523 20.5523 13 20 13C19.4477 13 19 12.5523 19 12V3C19 2.44772 19.4477 2 20 2Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/SmartCollectIcon/__snapshots__/SmartCollectIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SmartCollectIcon/__snapshots__/SmartCollectIcon.native.test.tsx.snap
index 96680c31332..897112babea 100644
--- a/packages/blade/src/components/Icons/SmartCollectIcon/__snapshots__/SmartCollectIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SmartCollectIcon/__snapshots__/SmartCollectIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<SmartCollectIcon /> should render SmartCollectIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<SmartCollectIcon /> should render SmartCollectIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<SmartCollectIcon /> should render SmartCollectIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<SmartCollectIcon /> should render SmartCollectIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/SmartphoneIcon/__snapshots__/SmartphoneIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SmartphoneIcon/__snapshots__/SmartphoneIcon.native.test.tsx.snap
index bd5ead801eb..dc955a07f89 100644
--- a/packages/blade/src/components/Icons/SmartphoneIcon/__snapshots__/SmartphoneIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SmartphoneIcon/__snapshots__/SmartphoneIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<SmartphoneIcon /> should render SmartphoneIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<SmartphoneIcon /> should render SmartphoneIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<SmartphoneIcon /> should render SmartphoneIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<SmartphoneIcon /> should render SmartphoneIcon 1`] = `
         d="M12 19C12.5523 19 13 18.5523 13 18C13 17.4477 12.5523 17 12 17C11.4477 17 11 17.4477 11 18C11 18.5523 11.4477 19 12 19Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -64,7 +64,7 @@ exports[`<SmartphoneIcon /> should render SmartphoneIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/SpeakerIcon/__snapshots__/SpeakerIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SpeakerIcon/__snapshots__/SpeakerIcon.native.test.tsx.snap
index 8144ba32f6a..f0f54b1bf6d 100644
--- a/packages/blade/src/components/Icons/SpeakerIcon/__snapshots__/SpeakerIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SpeakerIcon/__snapshots__/SpeakerIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<SpeakerIcon /> should render SpeakerIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<SpeakerIcon /> should render SpeakerIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<SpeakerIcon /> should render SpeakerIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<SpeakerIcon /> should render SpeakerIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -65,7 +65,7 @@ exports[`<SpeakerIcon /> should render SpeakerIcon 1`] = `
         d="M12 7C12.5523 7 13 6.55228 13 6C13 5.44772 12.5523 5 12 5C11.4477 5 11 5.44772 11 6C11 6.55228 11.4477 7 12 7Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -76,7 +76,7 @@ exports[`<SpeakerIcon /> should render SpeakerIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/SquareIcon/__snapshots__/SquareIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SquareIcon/__snapshots__/SquareIcon.native.test.tsx.snap
index 2142326cd37..6da9730de9f 100644
--- a/packages/blade/src/components/Icons/SquareIcon/__snapshots__/SquareIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SquareIcon/__snapshots__/SquareIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<SquareIcon /> should render SquareIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<SquareIcon /> should render SquareIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<SquareIcon /> should render SquareIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<SquareIcon /> should render SquareIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/StampIcon/__snapshots__/StampIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/StampIcon/__snapshots__/StampIcon.native.test.tsx.snap
index 7c52956b2a9..caaad8c576c 100644
--- a/packages/blade/src/components/Icons/StampIcon/__snapshots__/StampIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/StampIcon/__snapshots__/StampIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<StampIcon /> should render StampIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<StampIcon /> should render StampIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<StampIcon /> should render StampIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<StampIcon /> should render StampIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/StarIcon/__snapshots__/StarIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/StarIcon/__snapshots__/StarIcon.native.test.tsx.snap
index 367f9eb68d5..37505f92f69 100644
--- a/packages/blade/src/components/Icons/StarIcon/__snapshots__/StarIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/StarIcon/__snapshots__/StarIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<StarIcon /> should render StarIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<StarIcon /> should render StarIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<StarIcon /> should render StarIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<StarIcon /> should render StarIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/StopCircleIcon/__snapshots__/StopCircleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/StopCircleIcon/__snapshots__/StopCircleIcon.native.test.tsx.snap
index 0b0c8b52ff6..05adf12b8c0 100644
--- a/packages/blade/src/components/Icons/StopCircleIcon/__snapshots__/StopCircleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/StopCircleIcon/__snapshots__/StopCircleIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<StopCircleIcon /> should render StopCircleIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<StopCircleIcon /> should render StopCircleIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<StopCircleIcon /> should render StopCircleIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<StopCircleIcon /> should render StopCircleIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<StopCircleIcon /> should render StopCircleIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/SubscriptionsIcon/__snapshots__/SubscriptionsIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SubscriptionsIcon/__snapshots__/SubscriptionsIcon.native.test.tsx.snap
index a30da1781a0..ba84fc25bd7 100644
--- a/packages/blade/src/components/Icons/SubscriptionsIcon/__snapshots__/SubscriptionsIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SubscriptionsIcon/__snapshots__/SubscriptionsIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<SubscriptionsIcon /> should render SubscriptionsIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<SubscriptionsIcon /> should render SubscriptionsIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<SubscriptionsIcon /> should render SubscriptionsIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<SubscriptionsIcon /> should render SubscriptionsIcon 1`] = `
         d="M10.3766 4.97811C12.8324 4.43243 15.4017 5.16223 17.1817 6.91113C17.1884 6.91778 17.1953 6.92433 17.2023 6.93077L19.8153 9.29939H16.5833C16.0771 9.29939 15.6667 9.70243 15.6667 10.1996C15.6667 10.6968 16.0771 11.0998 16.5833 11.0998H22.0833C22.5896 11.0998 23 10.6968 23 10.1996V4.79841C23 4.30125 22.5896 3.89822 22.0833 3.89822C21.5771 3.89822 21.1667 4.30125 21.1667 4.79841V8.0744L18.4679 5.62814C16.2433 3.4494 13.037 2.54107 9.97198 3.22211C6.90215 3.90422 4.40333 6.08529 3.35336 8.99911C3.18447 9.46779 3.43445 9.98219 3.91172 10.148C4.38898 10.3139 4.91278 10.0684 5.08167 9.59971C5.92165 7.26866 7.9207 5.5238 10.3766 4.97811Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<SubscriptionsIcon /> should render SubscriptionsIcon 1`] = `
         d="M2.83333 15.9256V19.2015C2.83333 19.6987 2.42293 20.1017 1.91667 20.1017C1.41041 20.1017 1 19.6987 1 19.2015V13.8004C1 13.3032 1.41041 12.9002 1.91667 12.9002H7.41667C7.92293 12.9002 8.33333 13.3032 8.33333 13.8004C8.33333 14.2975 7.92293 14.7006 7.41667 14.7006H4.18472L6.79771 17.0692C6.8047 17.0757 6.81157 17.0822 6.81835 17.0889C8.59836 18.8378 11.1676 19.5676 13.6234 19.0219C16.0793 18.4762 18.0784 16.7313 18.9183 14.4003C19.0872 13.9316 19.611 13.6861 20.0883 13.852C20.5656 14.0178 20.8155 14.5322 20.6467 15.0009C19.5967 17.9147 17.0979 20.0958 14.028 20.7779C10.963 21.4589 7.75671 20.5506 5.5321 18.3719L2.83333 15.9256Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/SunIcon/__snapshots__/SunIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SunIcon/__snapshots__/SunIcon.native.test.tsx.snap
index 5d55c3ac68c..406e88dca64 100644
--- a/packages/blade/src/components/Icons/SunIcon/__snapshots__/SunIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SunIcon/__snapshots__/SunIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<SunIcon /> should render SunIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -58,7 +58,7 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -70,7 +70,7 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -82,7 +82,7 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -94,7 +94,7 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -106,7 +106,7 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -118,7 +118,7 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -130,7 +130,7 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -142,7 +142,7 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -154,7 +154,7 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -169,7 +169,7 @@ exports[`<SunIcon /> should render SunIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/SunriseIcon/__snapshots__/SunriseIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SunriseIcon/__snapshots__/SunriseIcon.native.test.tsx.snap
index 3cecefacd08..abec8547ed4 100644
--- a/packages/blade/src/components/Icons/SunriseIcon/__snapshots__/SunriseIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SunriseIcon/__snapshots__/SunriseIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<SunriseIcon /> should render SunriseIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<SunriseIcon /> should render SunriseIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<SunriseIcon /> should render SunriseIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -58,7 +58,7 @@ exports[`<SunriseIcon /> should render SunriseIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -70,7 +70,7 @@ exports[`<SunriseIcon /> should render SunriseIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -82,7 +82,7 @@ exports[`<SunriseIcon /> should render SunriseIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -94,7 +94,7 @@ exports[`<SunriseIcon /> should render SunriseIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -106,7 +106,7 @@ exports[`<SunriseIcon /> should render SunriseIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -118,7 +118,7 @@ exports[`<SunriseIcon /> should render SunriseIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -130,7 +130,7 @@ exports[`<SunriseIcon /> should render SunriseIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -142,7 +142,7 @@ exports[`<SunriseIcon /> should render SunriseIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -157,7 +157,7 @@ exports[`<SunriseIcon /> should render SunriseIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/SunsetIcon/__snapshots__/SunsetIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SunsetIcon/__snapshots__/SunsetIcon.native.test.tsx.snap
index a86c9d95dea..0fd634b69bf 100644
--- a/packages/blade/src/components/Icons/SunsetIcon/__snapshots__/SunsetIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/SunsetIcon/__snapshots__/SunsetIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<SunsetIcon /> should render SunsetIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<SunsetIcon /> should render SunsetIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<SunsetIcon /> should render SunsetIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<SunsetIcon /> should render SunsetIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<SunsetIcon /> should render SunsetIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -79,7 +79,7 @@ exports[`<SunsetIcon /> should render SunsetIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -91,7 +91,7 @@ exports[`<SunsetIcon /> should render SunsetIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -103,7 +103,7 @@ exports[`<SunsetIcon /> should render SunsetIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -115,7 +115,7 @@ exports[`<SunsetIcon /> should render SunsetIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -127,7 +127,7 @@ exports[`<SunsetIcon /> should render SunsetIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -139,7 +139,7 @@ exports[`<SunsetIcon /> should render SunsetIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/TabletIcon/__snapshots__/TabletIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TabletIcon/__snapshots__/TabletIcon.native.test.tsx.snap
index 8a091bd1acd..84947571d6b 100644
--- a/packages/blade/src/components/Icons/TabletIcon/__snapshots__/TabletIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TabletIcon/__snapshots__/TabletIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<TabletIcon /> should render TabletIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<TabletIcon /> should render TabletIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<TabletIcon /> should render TabletIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<TabletIcon /> should render TabletIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -65,7 +65,7 @@ exports[`<TabletIcon /> should render TabletIcon 1`] = `
         d="M13 18C13 18.5523 12.5523 19 12 19C11.4477 19 11 18.5523 11 18C11 17.4477 11.4477 17 12 17C12.5523 17 13 17.4477 13 18Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/TagIcon/__snapshots__/TagIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TagIcon/__snapshots__/TagIcon.native.test.tsx.snap
index 3caaa095912..0b839bbe70e 100644
--- a/packages/blade/src/components/Icons/TagIcon/__snapshots__/TagIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TagIcon/__snapshots__/TagIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<TagIcon /> should render TagIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<TagIcon /> should render TagIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<TagIcon /> should render TagIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<TagIcon /> should render TagIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -65,7 +65,7 @@ exports[`<TagIcon /> should render TagIcon 1`] = `
         d="M10 8.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/TargetIcon/__snapshots__/TargetIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TargetIcon/__snapshots__/TargetIcon.native.test.tsx.snap
index 4f8c7fc3b2b..941c13078aa 100644
--- a/packages/blade/src/components/Icons/TargetIcon/__snapshots__/TargetIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TargetIcon/__snapshots__/TargetIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<TargetIcon /> should render TargetIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<TargetIcon /> should render TargetIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<TargetIcon /> should render TargetIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<TargetIcon /> should render TargetIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<TargetIcon /> should render TargetIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -79,7 +79,7 @@ exports[`<TargetIcon /> should render TargetIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/ThermometerIcon/__snapshots__/ThermometerIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ThermometerIcon/__snapshots__/ThermometerIcon.native.test.tsx.snap
index 0db7b86cfe3..43a9dfe9963 100644
--- a/packages/blade/src/components/Icons/ThermometerIcon/__snapshots__/ThermometerIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ThermometerIcon/__snapshots__/ThermometerIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ThermometerIcon /> should render ThermometerIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ThermometerIcon /> should render ThermometerIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ThermometerIcon /> should render ThermometerIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -58,7 +58,7 @@ exports[`<ThermometerIcon /> should render ThermometerIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -73,7 +73,7 @@ exports[`<ThermometerIcon /> should render ThermometerIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/ThumbsDownIcon/__snapshots__/ThumbsDownIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ThumbsDownIcon/__snapshots__/ThumbsDownIcon.native.test.tsx.snap
index 276d4dbe261..3b733c99279 100644
--- a/packages/blade/src/components/Icons/ThumbsDownIcon/__snapshots__/ThumbsDownIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ThumbsDownIcon/__snapshots__/ThumbsDownIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ThumbsDownIcon /> should render ThumbsDownIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ThumbsDownIcon /> should render ThumbsDownIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ThumbsDownIcon /> should render ThumbsDownIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<ThumbsDownIcon /> should render ThumbsDownIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/ThumbsUpIcon/__snapshots__/ThumbsUpIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ThumbsUpIcon/__snapshots__/ThumbsUpIcon.native.test.tsx.snap
index bd29ce44ac9..961ac34264c 100644
--- a/packages/blade/src/components/Icons/ThumbsUpIcon/__snapshots__/ThumbsUpIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ThumbsUpIcon/__snapshots__/ThumbsUpIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ThumbsUpIcon /> should render ThumbsUpIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ThumbsUpIcon /> should render ThumbsUpIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ThumbsUpIcon /> should render ThumbsUpIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<ThumbsUpIcon /> should render ThumbsUpIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/ToggleLeftIcon/__snapshots__/ToggleLeftIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ToggleLeftIcon/__snapshots__/ToggleLeftIcon.native.test.tsx.snap
index 45e6c565f19..fb2ba639266 100644
--- a/packages/blade/src/components/Icons/ToggleLeftIcon/__snapshots__/ToggleLeftIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ToggleLeftIcon/__snapshots__/ToggleLeftIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ToggleLeftIcon /> should render ToggleLeftIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ToggleLeftIcon /> should render ToggleLeftIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ToggleLeftIcon /> should render ToggleLeftIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<ToggleLeftIcon /> should render ToggleLeftIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<ToggleLeftIcon /> should render ToggleLeftIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/ToggleRightIcon/__snapshots__/ToggleRightIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ToggleRightIcon/__snapshots__/ToggleRightIcon.native.test.tsx.snap
index 501d27fd33d..f5f6fd2799b 100644
--- a/packages/blade/src/components/Icons/ToggleRightIcon/__snapshots__/ToggleRightIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ToggleRightIcon/__snapshots__/ToggleRightIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ToggleRightIcon /> should render ToggleRightIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ToggleRightIcon /> should render ToggleRightIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ToggleRightIcon /> should render ToggleRightIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<ToggleRightIcon /> should render ToggleRightIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<ToggleRightIcon /> should render ToggleRightIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/TransactionsIcon/__snapshots__/TransactionsIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TransactionsIcon/__snapshots__/TransactionsIcon.native.test.tsx.snap
index 8e0c0c73524..f45c976f8a9 100644
--- a/packages/blade/src/components/Icons/TransactionsIcon/__snapshots__/TransactionsIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TransactionsIcon/__snapshots__/TransactionsIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<TransactionsIcon /> should render TransactionsIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<TransactionsIcon /> should render TransactionsIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<TransactionsIcon /> should render TransactionsIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<TransactionsIcon /> should render TransactionsIcon 1`] = `
         d="M6.24 12.03a.878.878 0 0 1 .26.623.898.898 0 0 1-.249.627.85.85 0 0 1-.61.257.833.833 0 0 1-.606-.268L1.25 9.377a.869.869 0 0 1-.107-.134c-.014-.022-.024-.044-.036-.067a.853.853 0 0 1-.042-.084.843.843 0 0 1-.027-.087c-.007-.026-.017-.05-.022-.076a.91.91 0 0 1 0-.343c.005-.026.015-.05.022-.075a.812.812 0 0 1 .027-.087.91.91 0 0 1 .042-.085c.012-.022.022-.043.036-.066a.895.895 0 0 1 .107-.135l3.785-3.892a.84.84 0 0 1 .6-.246.84.84 0 0 1 .595.257.89.89 0 0 1 .01 1.228L3.91 7.883h9.715a.84.84 0 0 1 .602.256c.16.164.25.387.25.62 0 .232-.09.455-.25.62a.84.84 0 0 1-.602.256H3.909l2.332 2.395Zm16.617 3.674c.014-.022.024-.044.035-.067a.896.896 0 0 0 .043-.084.806.806 0 0 0 .027-.088c.007-.024.017-.049.022-.074a.912.912 0 0 0 0-.344c-.005-.026-.015-.05-.022-.075a.836.836 0 0 0-.027-.088.843.843 0 0 0-.043-.083c-.011-.023-.021-.044-.035-.067a.87.87 0 0 0-.107-.134l-3.785-3.893a.84.84 0 0 0-1.195.011.889.889 0 0 0-.25.612.89.89 0 0 0 .24.616l2.33 2.397h-9.715a.84.84 0 0 0-.602.257.889.889 0 0 0-.25.62c0 .232.09.455.25.62a.84.84 0 0 0 .602.256h9.716l-2.332 2.397a.877.877 0 0 0-.26.623.898.898 0 0 0 .25.627.85.85 0 0 0 .61.257.833.833 0 0 0 .605-.267l3.786-3.893a.894.894 0 0 0 .107-.134v-.002Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/TrashIcon/__snapshots__/TrashIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TrashIcon/__snapshots__/TrashIcon.native.test.tsx.snap
index 53451a29752..b6e966646fb 100644
--- a/packages/blade/src/components/Icons/TrashIcon/__snapshots__/TrashIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TrashIcon/__snapshots__/TrashIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<TrashIcon /> should render TrashIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<TrashIcon /> should render TrashIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<TrashIcon /> should render TrashIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<TrashIcon /> should render TrashIcon 1`] = `
         d="M10 10a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1ZM15 11a1 1 0 1 0-2 0v6a1 1 0 1 0 2 0v-6Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -64,7 +64,7 @@ exports[`<TrashIcon /> should render TrashIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/TrendingDownIcon/__snapshots__/TendingDownIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TrendingDownIcon/__snapshots__/TendingDownIcon.native.test.tsx.snap
index 7d6f5e50312..d3209ceeff2 100644
--- a/packages/blade/src/components/Icons/TrendingDownIcon/__snapshots__/TendingDownIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TrendingDownIcon/__snapshots__/TendingDownIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<TrendingDownIcon /> should render TrendingDownIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<TrendingDownIcon /> should render TrendingDownIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<TrendingDownIcon /> should render TrendingDownIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -56,7 +56,7 @@ exports[`<TrendingDownIcon /> should render TrendingDownIcon 1`] = `
           d="M1.70711 5.29289C1.31658 4.90237 0.683417 4.90237 0.292893 5.29289C-0.0976311 5.68342 -0.0976311 6.31658 0.292893 6.70711L7.79289 14.2071C8.18342 14.5976 8.81658 14.5976 9.20711 14.2071L13.5 9.91421L20.5858 17H17C16.4477 17 16 17.4477 16 18C16 18.5523 16.4477 19 17 19H22.9993C23.0003 19 23.002 19 23.003 19C23.1375 18.9996 23.2657 18.9727 23.3828 18.9241C23.5007 18.8753 23.6112 18.803 23.7071 18.7071C23.8902 18.524 23.9874 18.2877 23.9989 18.048C23.9996 18.032 24 18.016 24 18C24 17.9997 24 18.0003 24 18V12C24 11.4477 23.5523 11 23 11C22.4477 11 22 11.4477 22 12V15.5858L14.2071 7.79289C13.8166 7.40237 13.1834 7.40237 12.7929 7.79289L8.5 12.0858L1.70711 5.29289Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -70,7 +70,7 @@ exports[`<TrendingDownIcon /> should render TrendingDownIcon 1`] = `
             fill={4294967295}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/TrendingDownIcon/__snapshots__/TrendingDownIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TrendingDownIcon/__snapshots__/TrendingDownIcon.native.test.tsx.snap
index 7d6f5e50312..d3209ceeff2 100644
--- a/packages/blade/src/components/Icons/TrendingDownIcon/__snapshots__/TrendingDownIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TrendingDownIcon/__snapshots__/TrendingDownIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<TrendingDownIcon /> should render TrendingDownIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<TrendingDownIcon /> should render TrendingDownIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<TrendingDownIcon /> should render TrendingDownIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -56,7 +56,7 @@ exports[`<TrendingDownIcon /> should render TrendingDownIcon 1`] = `
           d="M1.70711 5.29289C1.31658 4.90237 0.683417 4.90237 0.292893 5.29289C-0.0976311 5.68342 -0.0976311 6.31658 0.292893 6.70711L7.79289 14.2071C8.18342 14.5976 8.81658 14.5976 9.20711 14.2071L13.5 9.91421L20.5858 17H17C16.4477 17 16 17.4477 16 18C16 18.5523 16.4477 19 17 19H22.9993C23.0003 19 23.002 19 23.003 19C23.1375 18.9996 23.2657 18.9727 23.3828 18.9241C23.5007 18.8753 23.6112 18.803 23.7071 18.7071C23.8902 18.524 23.9874 18.2877 23.9989 18.048C23.9996 18.032 24 18.016 24 18C24 17.9997 24 18.0003 24 18V12C24 11.4477 23.5523 11 23 11C22.4477 11 22 11.4477 22 12V15.5858L14.2071 7.79289C13.8166 7.40237 13.1834 7.40237 12.7929 7.79289L8.5 12.0858L1.70711 5.29289Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -70,7 +70,7 @@ exports[`<TrendingDownIcon /> should render TrendingDownIcon 1`] = `
             fill={4294967295}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/TrendingUpIcon/__snapshots__/TendingUpIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TrendingUpIcon/__snapshots__/TendingUpIcon.native.test.tsx.snap
index 6320137b6b3..b14a7f54020 100644
--- a/packages/blade/src/components/Icons/TrendingUpIcon/__snapshots__/TendingUpIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TrendingUpIcon/__snapshots__/TendingUpIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<TrendingUpIcon /> should render TrendingUpIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<TrendingUpIcon /> should render TrendingUpIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<TrendingUpIcon /> should render TrendingUpIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -56,7 +56,7 @@ exports[`<TrendingUpIcon /> should render TrendingUpIcon 1`] = `
           d="M17 5C16.4477 5 16 5.44772 16 6C16 6.55228 16.4477 7 17 7H20.5858L13.5 14.0858L9.20711 9.79289C8.81658 9.40237 8.18342 9.40237 7.79289 9.79289L0.292893 17.2929C-0.0976311 17.6834 -0.0976311 18.3166 0.292893 18.7071C0.683417 19.0976 1.31658 19.0976 1.70711 18.7071L8.5 11.9142L12.7929 16.2071C13.1834 16.5976 13.8166 16.5976 14.2071 16.2071L22 8.41421V12C22 12.5523 22.4477 13 23 13C23.5523 13 24 12.5523 24 12V6C24 5.44772 23.5523 5 23 5H17Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -70,7 +70,7 @@ exports[`<TrendingUpIcon /> should render TrendingUpIcon 1`] = `
             fill={4294967295}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/TrendingUpIcon/__snapshots__/TrendingUpIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TrendingUpIcon/__snapshots__/TrendingUpIcon.native.test.tsx.snap
index 6320137b6b3..b14a7f54020 100644
--- a/packages/blade/src/components/Icons/TrendingUpIcon/__snapshots__/TrendingUpIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TrendingUpIcon/__snapshots__/TrendingUpIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<TrendingUpIcon /> should render TrendingUpIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<TrendingUpIcon /> should render TrendingUpIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<TrendingUpIcon /> should render TrendingUpIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -56,7 +56,7 @@ exports[`<TrendingUpIcon /> should render TrendingUpIcon 1`] = `
           d="M17 5C16.4477 5 16 5.44772 16 6C16 6.55228 16.4477 7 17 7H20.5858L13.5 14.0858L9.20711 9.79289C8.81658 9.40237 8.18342 9.40237 7.79289 9.79289L0.292893 17.2929C-0.0976311 17.6834 -0.0976311 18.3166 0.292893 18.7071C0.683417 19.0976 1.31658 19.0976 1.70711 18.7071L8.5 11.9142L12.7929 16.2071C13.1834 16.5976 13.8166 16.5976 14.2071 16.2071L22 8.41421V12C22 12.5523 22.4477 13 23 13C23.5523 13 24 12.5523 24 12V6C24 5.44772 23.5523 5 23 5H17Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -70,7 +70,7 @@ exports[`<TrendingUpIcon /> should render TrendingUpIcon 1`] = `
             fill={4294967295}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/TriangleIcon/__snapshots__/TriangleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TriangleIcon/__snapshots__/TriangleIcon.native.test.tsx.snap
index 63c620ac5b6..a7d71675748 100644
--- a/packages/blade/src/components/Icons/TriangleIcon/__snapshots__/TriangleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TriangleIcon/__snapshots__/TriangleIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<TriangleIcon /> should render TriangleIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<TriangleIcon /> should render TriangleIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<TriangleIcon /> should render TriangleIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<TriangleIcon /> should render TriangleIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/TvIcon/__snapshots__/TvIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TvIcon/__snapshots__/TvIcon.native.test.tsx.snap
index c206469aa11..3ec0956fe2c 100644
--- a/packages/blade/src/components/Icons/TvIcon/__snapshots__/TvIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TvIcon/__snapshots__/TvIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<TvIcon /> should render TvIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<TvIcon /> should render TvIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<TvIcon /> should render TvIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<TvIcon /> should render TvIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/TwitterIcon/__snapshots__/TwitterIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TwitterIcon/__snapshots__/TwitterIcon.native.test.tsx.snap
index 9f30d765a14..2da7e93f0e3 100644
--- a/packages/blade/src/components/Icons/TwitterIcon/__snapshots__/TwitterIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TwitterIcon/__snapshots__/TwitterIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<TwitterIcon /> should render TwitterIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<TwitterIcon /> should render TwitterIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<TwitterIcon /> should render TwitterIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -58,7 +58,7 @@ exports[`<TwitterIcon /> should render TwitterIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -73,7 +73,7 @@ exports[`<TwitterIcon /> should render TwitterIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/TypeIcon/__snapshots__/TypeIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/TypeIcon/__snapshots__/TypeIcon.native.test.tsx.snap
index 9e9e9215f27..17c06e77e60 100644
--- a/packages/blade/src/components/Icons/TypeIcon/__snapshots__/TypeIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/TypeIcon/__snapshots__/TypeIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<TypeIcon /> should render TypeIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<TypeIcon /> should render TypeIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<TypeIcon /> should render TypeIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<TypeIcon /> should render TypeIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<TypeIcon /> should render TypeIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -79,7 +79,7 @@ exports[`<TypeIcon /> should render TypeIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/UmbrellaIcon/__snapshots__/UmbrellaIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/UmbrellaIcon/__snapshots__/UmbrellaIcon.native.test.tsx.snap
index d6d1b845a7d..fc95a0490f7 100644
--- a/packages/blade/src/components/Icons/UmbrellaIcon/__snapshots__/UmbrellaIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UmbrellaIcon/__snapshots__/UmbrellaIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<UmbrellaIcon /> should render UmbrellaIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<UmbrellaIcon /> should render UmbrellaIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<UmbrellaIcon /> should render UmbrellaIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -58,7 +58,7 @@ exports[`<UmbrellaIcon /> should render UmbrellaIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -73,7 +73,7 @@ exports[`<UmbrellaIcon /> should render UmbrellaIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/UnderlineIcon/__snapshots__/UnderlineIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/UnderlineIcon/__snapshots__/UnderlineIcon.native.test.tsx.snap
index e247f603148..7df675fc048 100644
--- a/packages/blade/src/components/Icons/UnderlineIcon/__snapshots__/UnderlineIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UnderlineIcon/__snapshots__/UnderlineIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<UnderlineIcon /> should render UnderlineIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<UnderlineIcon /> should render UnderlineIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<UnderlineIcon /> should render UnderlineIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<UnderlineIcon /> should render UnderlineIcon 1`] = `
         d="M7 2C7 1.44772 6.55228 1 6 1C5.44772 1 5 1.44772 5 2V9C5 12.866 8.13401 16 12 16C15.866 16 19 12.866 19 9V2C19 1.44772 18.5523 1 18 1C17.4477 1 17 1.44772 17 2V9C17 11.7614 14.7614 14 12 14C9.23858 14 7 11.7614 7 9V2Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<UnderlineIcon /> should render UnderlineIcon 1`] = `
         d="M4 19C3.44772 19 3 19.4477 3 20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20C21 19.4477 20.5523 19 20 19H4Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/UnlockIcon/__snapshots__/UnlockIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/UnlockIcon/__snapshots__/UnlockIcon.native.test.tsx.snap
index d6671a85fd6..a58e31a2495 100644
--- a/packages/blade/src/components/Icons/UnlockIcon/__snapshots__/UnlockIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UnlockIcon/__snapshots__/UnlockIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<UnlockIcon /> should render UnlockIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<UnlockIcon /> should render UnlockIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<UnlockIcon /> should render UnlockIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<UnlockIcon /> should render UnlockIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/UploadCloudIcon/__snapshots__/UploadCloudIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/UploadCloudIcon/__snapshots__/UploadCloudIcon.native.test.tsx.snap
index 28f593968a6..33200275e3d 100644
--- a/packages/blade/src/components/Icons/UploadCloudIcon/__snapshots__/UploadCloudIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UploadCloudIcon/__snapshots__/UploadCloudIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<UploadCloudIcon /> should render UploadCloudIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<UploadCloudIcon /> should render UploadCloudIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<UploadCloudIcon /> should render UploadCloudIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -56,7 +56,7 @@ exports[`<UploadCloudIcon /> should render UploadCloudIcon 1`] = `
           d="M1.01328 6.84348C2.73489 3.53956 6.31417 1.63791 10.0157 2.06055C13.4557 2.45333 16.3404 4.77817 17.4793 7.99999H18C20.7422 8.0018 23.1349 9.86253 23.8113 12.52C24.4877 15.1775 23.2764 17.9554 20.8687 19.268C20.3838 19.5323 19.7764 19.3536 19.512 18.8687C19.2477 18.3837 19.4265 17.7763 19.9114 17.512C21.5165 16.6369 22.3241 14.785 21.8731 13.0133C21.4222 11.2417 19.8275 10.0012 17.9994 9.99999H16.74C16.2841 9.99999 15.886 9.69167 15.7719 9.2503C15.0466 6.44488 12.6677 4.37635 9.78879 4.04764C6.90984 3.71892 4.12596 5.19798 2.78693 7.76769C1.4479 10.3374 1.83056 13.4665 3.74936 15.6378C4.11508 16.0516 4.07607 16.6836 3.66222 17.0493C3.24838 17.415 2.61641 17.376 2.2507 16.9622C-0.216341 14.1705 -0.708325 10.1474 1.01328 6.84348Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -65,7 +65,7 @@ exports[`<UploadCloudIcon /> should render UploadCloudIcon 1`] = `
           d="M12.7071 11.2929C12.3166 10.9024 11.6834 10.9024 11.2929 11.2929L7.29289 15.2929C6.90237 15.6834 6.90237 16.3166 7.29289 16.7071C7.68342 17.0976 8.31658 17.0976 8.70711 16.7071L11 14.4142V21C11 21.5523 11.4477 22 12 22C12.5523 22 13 21.5523 13 21V14.4142L15.2929 16.7071C15.6834 17.0976 16.3166 17.0976 16.7071 16.7071C17.0976 16.3166 17.0976 15.6834 16.7071 15.2929L12.7071 11.2929Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -79,7 +79,7 @@ exports[`<UploadCloudIcon /> should render UploadCloudIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/UploadIcon/__snapshots__/UploadIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/UploadIcon/__snapshots__/UploadIcon.native.test.tsx.snap
index 86fd97d72fa..dd540d8cbb1 100644
--- a/packages/blade/src/components/Icons/UploadIcon/__snapshots__/UploadIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UploadIcon/__snapshots__/UploadIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<UploadIcon /> should render UploadIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<UploadIcon /> should render UploadIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<UploadIcon /> should render UploadIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<UploadIcon /> should render UploadIcon 1`] = `
         d="M11.2929 1.29289C11.6834 0.902369 12.3166 0.902369 12.7071 1.29289L16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711C16.3166 7.09763 15.6834 7.09763 15.2929 6.70711L13 4.41421V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V4.41421L8.70711 6.70711C8.31658 7.09763 7.68342 7.09763 7.29289 6.70711C6.90237 6.31658 6.90237 5.68342 7.29289 5.29289L11.2929 1.29289Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<UploadIcon /> should render UploadIcon 1`] = `
         d="M3 16C3.55228 16 4 16.4477 4 17V20C4 20.5523 4.44772 21 5 21H19C19.5523 21 20 20.5523 20 20V17C20 16.4477 20.4477 16 21 16C21.5523 16 22 16.4477 22 17V20C22 21.6569 20.6569 23 19 23H5C3.34315 23 2 21.6569 2 20V17C2 16.4477 2.44772 16 3 16Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/UserCheckIcon/__snapshots__/UserCheckIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/UserCheckIcon/__snapshots__/UserCheckIcon.native.test.tsx.snap
index 26ce667a2d3..dd06c7603b9 100644
--- a/packages/blade/src/components/Icons/UserCheckIcon/__snapshots__/UserCheckIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UserCheckIcon/__snapshots__/UserCheckIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<UserCheckIcon /> should render UserCheckIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<UserCheckIcon /> should render UserCheckIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<UserCheckIcon /> should render UserCheckIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<UserCheckIcon /> should render UserCheckIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -65,7 +65,7 @@ exports[`<UserCheckIcon /> should render UserCheckIcon 1`] = `
         d="M0 19C0 16.2386 2.23858 14 5 14H12C14.7614 14 17 16.2386 17 19V21C17 21.5523 16.5523 22 16 22C15.4477 22 15 21.5523 15 21V19C15 17.3431 13.6569 16 12 16H5C3.34315 16 2 17.3431 2 19V21C2 21.5523 1.55228 22 1 22C0.447715 22 0 21.5523 0 21V19Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -74,7 +74,7 @@ exports[`<UserCheckIcon /> should render UserCheckIcon 1`] = `
         d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L19 11.5858L17.7071 10.2929C17.3166 9.90237 16.6834 9.90237 16.2929 10.2929C15.9024 10.6834 15.9024 11.3166 16.2929 11.7071L18.2929 13.7071C18.6834 14.0976 19.3166 14.0976 19.7071 13.7071L23.7071 9.70711Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/UserIcon/__snapshots__/UserIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/UserIcon/__snapshots__/UserIcon.native.test.tsx.snap
index 23534981292..ad6510cbb48 100644
--- a/packages/blade/src/components/Icons/UserIcon/__snapshots__/UserIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UserIcon/__snapshots__/UserIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<UserIcon /> should render UserIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<UserIcon /> should render UserIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<UserIcon /> should render UserIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<UserIcon /> should render UserIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -65,7 +65,7 @@ exports[`<UserIcon /> should render UserIcon 1`] = `
         d="M8 14a5 5 0 0 0-5 5v2a1 1 0 1 0 2 0v-2a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v2a1 1 0 1 0 2 0v-2a5 5 0 0 0-5-5H8Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/UserMinusIcon/__snapshots__/UserMinusIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/UserMinusIcon/__snapshots__/UserMinusIcon.native.test.tsx.snap
index 7c8f52eb92c..23e67823a8c 100644
--- a/packages/blade/src/components/Icons/UserMinusIcon/__snapshots__/UserMinusIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UserMinusIcon/__snapshots__/UserMinusIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<UserMinusIcon /> should render UserMinusIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<UserMinusIcon /> should render UserMinusIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<UserMinusIcon /> should render UserMinusIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<UserMinusIcon /> should render UserMinusIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -65,7 +65,7 @@ exports[`<UserMinusIcon /> should render UserMinusIcon 1`] = `
         d="M0 19C0 16.2386 2.23858 14 5 14H12C14.7614 14 17 16.2386 17 19V21C17 21.5523 16.5523 22 16 22C15.4477 22 15 21.5523 15 21V19C15 17.3431 13.6569 16 12 16H5C3.34315 16 2 17.3431 2 19V21C2 21.5523 1.55228 22 1 22C0.447715 22 0 21.5523 0 21V19Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -74,7 +74,7 @@ exports[`<UserMinusIcon /> should render UserMinusIcon 1`] = `
         d="M17 10C16.4477 10 16 10.4477 16 11C16 11.5523 16.4477 12 17 12H23C23.5523 12 24 11.5523 24 11C24 10.4477 23.5523 10 23 10H17Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/UserPlusIcon/__snapshots__/UserPlusIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/UserPlusIcon/__snapshots__/UserPlusIcon.native.test.tsx.snap
index ee1c955cc4c..8c10a97de5a 100644
--- a/packages/blade/src/components/Icons/UserPlusIcon/__snapshots__/UserPlusIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UserPlusIcon/__snapshots__/UserPlusIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<UserPlusIcon /> should render UserPlusIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<UserPlusIcon /> should render UserPlusIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<UserPlusIcon /> should render UserPlusIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<UserPlusIcon /> should render UserPlusIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -65,7 +65,7 @@ exports[`<UserPlusIcon /> should render UserPlusIcon 1`] = `
         d="M5 14C2.23858 14 0 16.2386 0 19V21C0 21.5523 0.447715 22 1 22C1.55228 22 2 21.5523 2 21V19C2 17.3431 3.34315 16 5 16H12C13.6569 16 15 17.3431 15 19V21C15 21.5523 15.4477 22 16 22C16.5523 22 17 21.5523 17 21V19C17 16.2386 14.7614 14 12 14H5Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -74,7 +74,7 @@ exports[`<UserPlusIcon /> should render UserPlusIcon 1`] = `
         d="M20 7C20.5523 7 21 7.44772 21 8V10H23C23.5523 10 24 10.4477 24 11C24 11.5523 23.5523 12 23 12H21V14C21 14.5523 20.5523 15 20 15C19.4477 15 19 14.5523 19 14V12H17C16.4477 12 16 11.5523 16 11C16 10.4477 16.4477 10 17 10H19V8C19 7.44772 19.4477 7 20 7Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/UserXIcon/__snapshots__/UserXIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/UserXIcon/__snapshots__/UserXIcon.native.test.tsx.snap
index cdb8ad8cee2..7b1d281d26c 100644
--- a/packages/blade/src/components/Icons/UserXIcon/__snapshots__/UserXIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UserXIcon/__snapshots__/UserXIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<UserXIcon /> should render UserXIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<UserXIcon /> should render UserXIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<UserXIcon /> should render UserXIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<UserXIcon /> should render UserXIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -65,7 +65,7 @@ exports[`<UserXIcon /> should render UserXIcon 1`] = `
         d="M5 14C2.23858 14 0 16.2386 0 19V21C0 21.5523 0.447715 22 1 22C1.55228 22 2 21.5523 2 21V19C2 17.3431 3.34315 16 5 16H12C13.6569 16 15 17.3431 15 19V21C15 21.5523 15.4477 22 16 22C16.5523 22 17 21.5523 17 21V19C17 16.2386 14.7614 14 12 14H5Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -74,7 +74,7 @@ exports[`<UserXIcon /> should render UserXIcon 1`] = `
         d="M17.2929 7.29289C17.6834 6.90237 18.3166 6.90237 18.7071 7.29289L20.5 9.08579L22.2929 7.29289C22.6834 6.90237 23.3166 6.90237 23.7071 7.29289C24.0976 7.68342 24.0976 8.31658 23.7071 8.70711L21.9142 10.5L23.7071 12.2929C24.0976 12.6834 24.0976 13.3166 23.7071 13.7071C23.3166 14.0976 22.6834 14.0976 22.2929 13.7071L20.5 11.9142L18.7071 13.7071C18.3166 14.0976 17.6834 14.0976 17.2929 13.7071C16.9024 13.3166 16.9024 12.6834 17.2929 12.2929L19.0858 10.5L17.2929 8.70711C16.9024 8.31658 16.9024 7.68342 17.2929 7.29289Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/UsersIcon/__snapshots__/UsersIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/UsersIcon/__snapshots__/UsersIcon.native.test.tsx.snap
index af3307f872c..caeec1431fa 100644
--- a/packages/blade/src/components/Icons/UsersIcon/__snapshots__/UsersIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/UsersIcon/__snapshots__/UsersIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<UsersIcon /> should render UsersIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<UsersIcon /> should render UsersIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<UsersIcon /> should render UsersIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<UsersIcon /> should render UsersIcon 1`] = `
         d="M9 0C6.23858 0 4 2.23858 4 5C4 7.76142 6.23858 10 9 10C11.7614 10 14 7.76142 14 5C14 2.23858 11.7614 0 9 0ZM6 5C6 3.34315 7.34315 2 9 2C10.6569 2 12 3.34315 12 5C12 6.65685 10.6569 8 9 8C7.34315 8 6 6.65685 6 5Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<UsersIcon /> should render UsersIcon 1`] = `
         d="M5 12C2.23858 12 0 14.2386 0 17V19C0 19.5523 0.447715 20 1 20C1.55228 20 2 19.5523 2 19V17C2 15.3431 3.34315 14 5 14H13C14.6569 14 16 15.3431 16 17V19C16 19.5523 16.4477 20 17 20C17.5523 20 18 19.5523 18 19V17C18 14.2386 15.7614 12 13 12H5Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -71,7 +71,7 @@ exports[`<UsersIcon /> should render UsersIcon 1`] = `
         d="M19.0318 12.88C19.1698 12.3453 19.7153 12.0237 20.25 12.1618C22.4562 12.7314 23.9983 14.7207 24 16.9993V19C24 19.5523 23.5523 20 23 20C22.4477 20 22 19.5523 22 19V17.0007C21.9988 15.6337 21.0737 14.44 19.75 14.0982C19.2153 13.9602 18.8937 13.4148 19.0318 12.88Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -80,7 +80,7 @@ exports[`<UsersIcon /> should render UsersIcon 1`] = `
         d="M16.248 0.161251C15.713 0.0242632 15.1682 0.346936 15.0312 0.881962C14.8943 1.41699 15.2169 1.96176 15.752 2.09875C17.0794 2.43863 18.0078 3.63474 18.0078 5.005C18.0078 6.37526 17.0794 7.57137 15.752 7.91125C15.2169 8.04824 14.8943 8.59301 15.0312 9.12804C15.1682 9.66307 15.713 9.98574 16.248 9.84875C18.4604 9.28229 20.0078 7.28876 20.0078 5.005C20.0078 2.72124 18.4604 0.727714 16.248 0.161251Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/VideoIcon/__snapshots__/VideoIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/VideoIcon/__snapshots__/VideoIcon.native.test.tsx.snap
index 4ed6a4cfa19..0cb7a893b02 100644
--- a/packages/blade/src/components/Icons/VideoIcon/__snapshots__/VideoIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/VideoIcon/__snapshots__/VideoIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<VideoIcon /> should render VideoIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<VideoIcon /> should render VideoIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<VideoIcon /> should render VideoIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<VideoIcon /> should render VideoIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/VideoOffIcon/__snapshots__/VideoOffIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/VideoOffIcon/__snapshots__/VideoOffIcon.native.test.tsx.snap
index 9eac9d63cdf..e1bc9eacbaf 100644
--- a/packages/blade/src/components/Icons/VideoOffIcon/__snapshots__/VideoOffIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/VideoOffIcon/__snapshots__/VideoOffIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<VideoOffIcon /> should render VideoOffIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<VideoOffIcon /> should render VideoOffIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<VideoOffIcon /> should render VideoOffIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -58,7 +58,7 @@ exports[`<VideoOffIcon /> should render VideoOffIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -68,7 +68,7 @@ exports[`<VideoOffIcon /> should render VideoOffIcon 1`] = `
           d="M14 4H10.66C10.1077 4 9.66 4.44772 9.66 5C9.66 5.55228 10.1077 6 10.66 6H14C14.5523 6 15 6.44772 15 7V10.34C15 10.6052 15.1054 10.8596 15.2929 11.0471L16.2929 12.0471C16.6402 12.3944 17.1882 12.4381 17.5861 12.1503L22 8.95752V17C22 17.5523 22.4477 18 23 18C23.5523 18 24 17.5523 24 17V7C24 6.62434 23.7895 6.28037 23.4549 6.10947C23.1204 5.93857 22.7183 5.96958 22.4139 6.18975L17.1045 10.0303L17 9.92579V7C17 5.34315 15.6569 4 14 4Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -82,7 +82,7 @@ exports[`<VideoOffIcon /> should render VideoOffIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/VoicemailIcon/__snapshots__/VoicemailIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/VoicemailIcon/__snapshots__/VoicemailIcon.native.test.tsx.snap
index 49b75bb2355..9a9b94b0de6 100644
--- a/packages/blade/src/components/Icons/VoicemailIcon/__snapshots__/VoicemailIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/VoicemailIcon/__snapshots__/VoicemailIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<VoicemailIcon /> should render VoicemailIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<VoicemailIcon /> should render VoicemailIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<VoicemailIcon /> should render VoicemailIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<VoicemailIcon /> should render VoicemailIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/VolumeHighIcon/__snapshots__/VolumeHighIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/VolumeHighIcon/__snapshots__/VolumeHighIcon.native.test.tsx.snap
index 2944c61ee76..b646dad2aa8 100644
--- a/packages/blade/src/components/Icons/VolumeHighIcon/__snapshots__/VolumeHighIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/VolumeHighIcon/__snapshots__/VolumeHighIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<VolumeHighIcon /> should render VolumeHighIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<VolumeHighIcon /> should render VolumeHighIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<VolumeHighIcon /> should render VolumeHighIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<VolumeHighIcon /> should render VolumeHighIcon 1`] = `
         d="M19.7773 4.22318C19.3868 3.83259 18.7536 3.8325 18.363 4.22296C17.9725 4.61343 17.9724 5.24659 18.3628 5.63718C21.8763 9.15167 21.8763 14.8487 18.3628 18.3632C17.9724 18.7538 17.9725 19.3869 18.363 19.7774C18.7536 20.1679 19.3868 20.1678 19.7773 19.7772C24.0715 15.4817 24.0715 8.51867 19.7773 4.22318Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -62,7 +62,7 @@ exports[`<VolumeHighIcon /> should render VolumeHighIcon 1`] = `
         d="M16.2473 7.75318C15.8568 7.36259 15.2236 7.3625 14.833 7.75296C14.4425 8.14343 14.4424 8.77659 14.8328 9.16718C16.3944 10.7292 16.3944 13.2612 14.8328 14.8232C14.4424 15.2138 14.4425 15.8469 14.833 16.2374C15.2236 16.6279 15.8568 16.6278 16.2473 16.2372C18.5895 13.8942 18.5895 10.0962 16.2473 7.75318Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -73,7 +73,7 @@ exports[`<VolumeHighIcon /> should render VolumeHighIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/VolumeIcon/__snapshots__/VolumeIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/VolumeIcon/__snapshots__/VolumeIcon.native.test.tsx.snap
index 33a2406cf20..3d401d72cde 100644
--- a/packages/blade/src/components/Icons/VolumeIcon/__snapshots__/VolumeIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/VolumeIcon/__snapshots__/VolumeIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<VolumeIcon /> should render VolumeIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<VolumeIcon /> should render VolumeIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<VolumeIcon /> should render VolumeIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<VolumeIcon /> should render VolumeIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/VolumeLowIcon/__snapshots__/VolumeLowIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/VolumeLowIcon/__snapshots__/VolumeLowIcon.native.test.tsx.snap
index 5e420584be3..c14a43b7710 100644
--- a/packages/blade/src/components/Icons/VolumeLowIcon/__snapshots__/VolumeLowIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/VolumeLowIcon/__snapshots__/VolumeLowIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<VolumeLowIcon /> should render VolumeLowIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<VolumeLowIcon /> should render VolumeLowIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<VolumeLowIcon /> should render VolumeLowIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<VolumeLowIcon /> should render VolumeLowIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -67,7 +67,7 @@ exports[`<VolumeLowIcon /> should render VolumeLowIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/VolumeMuteIcon/__snapshots__/VolumeMuteIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/VolumeMuteIcon/__snapshots__/VolumeMuteIcon.native.test.tsx.snap
index 05fa2803c14..fb165d807ca 100644
--- a/packages/blade/src/components/Icons/VolumeMuteIcon/__snapshots__/VolumeMuteIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/VolumeMuteIcon/__snapshots__/VolumeMuteIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<VolumeMuteIcon /> should render VolumeMuteIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<VolumeMuteIcon /> should render VolumeMuteIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<VolumeMuteIcon /> should render VolumeMuteIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<VolumeMuteIcon /> should render VolumeMuteIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
@@ -65,7 +65,7 @@ exports[`<VolumeMuteIcon /> should render VolumeMuteIcon 1`] = `
         d="M22.7071 8.29289C23.0976 8.68342 23.0976 9.31658 22.7071 9.70711L20.4142 12L22.7071 14.2929C23.0976 14.6834 23.0976 15.3166 22.7071 15.7071C22.3166 16.0976 21.6834 16.0976 21.2929 15.7071L19 13.4142L16.7071 15.7071C16.3166 16.0976 15.6834 16.0976 15.2929 15.7071C14.9024 15.3166 14.9024 14.6834 15.2929 14.2929L17.5858 12L15.2929 9.70711C14.9024 9.31658 14.9024 8.68342 15.2929 8.29289C15.6834 7.90237 16.3166 7.90237 16.7071 8.29289L19 10.5858L21.2929 8.29289C21.6834 7.90237 22.3166 7.90237 22.7071 8.29289Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Icons/WatchIcon/__snapshots__/WatchIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/WatchIcon/__snapshots__/WatchIcon.native.test.tsx.snap
index 65d675f3f2c..f68f5c59da7 100644
--- a/packages/blade/src/components/Icons/WatchIcon/__snapshots__/WatchIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/WatchIcon/__snapshots__/WatchIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<WatchIcon /> should render WatchIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<WatchIcon /> should render WatchIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<WatchIcon /> should render WatchIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -56,7 +56,7 @@ exports[`<WatchIcon /> should render WatchIcon 1`] = `
           d="M13 9C13 8.44771 12.5523 8 12 8C11.4477 8 11 8.44771 11 9V12C11 12.2652 11.1054 12.5196 11.2929 12.7071L12.7929 14.2071C13.1834 14.5976 13.8166 14.5976 14.2071 14.2071C14.5976 13.8166 14.5976 13.1834 14.2071 12.7929L13 11.5858V9Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -67,7 +67,7 @@ exports[`<WatchIcon /> should render WatchIcon 1`] = `
           fill={4282603381}
           fillRule={0}
           propList={
-            Array [
+            [
               "fill",
               "fillRule",
             ]
@@ -82,7 +82,7 @@ exports[`<WatchIcon /> should render WatchIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/WifiIcon/__snapshots__/WifiIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/WifiIcon/__snapshots__/WifiIcon.native.test.tsx.snap
index 73d5216cb30..8d77016dd91 100644
--- a/packages/blade/src/components/Icons/WifiIcon/__snapshots__/WifiIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/WifiIcon/__snapshots__/WifiIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<WifiIcon /> should render WifiIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<WifiIcon /> should render WifiIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<WifiIcon /> should render WifiIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -56,7 +56,7 @@ exports[`<WifiIcon /> should render WifiIcon 1`] = `
           d="M1.66126 10.7475C7.32983 5.75083 15.8302 5.75083 21.4988 10.7475C21.9131 11.1127 22.545 11.0729 22.9102 10.6586C23.2754 10.2443 23.2356 9.61238 22.8213 9.24718C16.3969 3.58427 6.76314 3.58427 0.338762 9.24718C-0.0755428 9.61238 -0.115352 10.2443 0.249847 10.6586C0.615045 11.0729 1.24696 11.1127 1.66126 10.7475Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -65,7 +65,7 @@ exports[`<WifiIcon /> should render WifiIcon 1`] = `
           d="M5.2201 14.3158C8.92791 11.2274 14.3123 11.2274 18.0201 14.3158C18.4445 14.6692 19.075 14.6117 19.4285 14.1874C19.7819 13.763 19.7245 13.1325 19.3001 12.779C14.8507 9.07301 8.38948 9.07301 3.9401 12.779C3.51574 13.1325 3.45827 13.763 3.81173 14.1874C4.16519 14.6117 4.79574 14.6692 5.2201 14.3158Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -74,7 +74,7 @@ exports[`<WifiIcon /> should render WifiIcon 1`] = `
           d="M14.4809 17.9225C12.7469 16.6905 10.4233 16.6905 8.68923 17.9225C8.239 18.2424 7.61472 18.1367 7.29486 17.6864C6.97499 17.2362 7.08067 16.6119 7.5309 16.2921C9.95853 14.5674 13.2116 14.5674 15.6392 16.2921C16.0895 16.6119 16.1951 17.2362 15.8753 17.6864C15.5554 18.1367 14.9311 18.2424 14.4809 17.9225Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -83,7 +83,7 @@ exports[`<WifiIcon /> should render WifiIcon 1`] = `
           d="M12 22C12.5523 22 13 21.5523 13 21C13 20.4477 12.5523 20 12 20C11.4477 20 11 20.4477 11 21C11 21.5523 11.4477 22 12 22Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -97,7 +97,7 @@ exports[`<WifiIcon /> should render WifiIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/WifiOffIcon/__snapshots__/WifiOffIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/WifiOffIcon/__snapshots__/WifiOffIcon.native.test.tsx.snap
index 7e6c535f064..20c15ca43d1 100644
--- a/packages/blade/src/components/Icons/WifiOffIcon/__snapshots__/WifiOffIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/WifiOffIcon/__snapshots__/WifiOffIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<WifiOffIcon /> should render WifiOffIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<WifiOffIcon /> should render WifiOffIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<WifiOffIcon /> should render WifiOffIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -56,7 +56,7 @@ exports[`<WifiOffIcon /> should render WifiOffIcon 1`] = `
           d="M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.81081 5.3966C6.82218 5.40743 6.8333 5.41856 6.84418 5.42997L10.7878 9.37359C10.8507 9.42296 10.9077 9.47987 10.9575 9.54326L23.7071 22.2929C24.0976 22.6834 24.0976 23.3166 23.7071 23.7071C23.3166 24.0976 22.6834 24.0976 22.2929 23.7071L15.6763 17.0905C15.4156 17.1427 15.1347 17.0913 14.9008 16.9252C13.1668 15.6932 10.8432 15.6932 9.10915 16.9252C8.65893 17.245 8.03464 17.1394 7.71478 16.6891C7.39491 16.2389 7.50059 15.6146 7.95082 15.2948C9.33815 14.3091 10.9951 13.8868 12.6134 14.0277L9.83187 11.2461C8.29273 11.593 6.85566 12.3019 5.64146 13.3171C5.21776 13.6714 4.5871 13.6151 4.23285 13.1914C3.87859 12.7677 3.93489 12.137 4.35859 11.7828C5.50171 10.827 6.80929 10.0972 8.21145 9.62566L5.88764 7.30186C4.50326 7.91882 3.21984 8.74381 2.08234 9.74927C1.66854 10.115 1.03657 10.0761 0.670802 9.6623C0.305033 9.2485 0.343971 8.61653 0.757772 8.25076C1.85745 7.27873 3.07738 6.45542 4.38598 5.80019L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -65,7 +65,7 @@ exports[`<WifiOffIcon /> should render WifiOffIcon 1`] = `
           d="M13 20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20C11 19.4477 11.4477 19 12 19C12.5523 19 13 19.4477 13 20Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -74,7 +74,7 @@ exports[`<WifiOffIcon /> should render WifiOffIcon 1`] = `
           d="M17.1585 10.1614C16.6622 9.91913 16.0635 10.1251 15.8213 10.6214C15.579 11.1178 15.785 11.7165 16.2814 11.9587C17.0256 12.3219 17.7215 12.7767 18.353 13.3125C18.7741 13.6699 19.4051 13.6182 19.7624 13.197C20.1198 12.7759 20.0681 12.1449 19.647 11.7876C18.8885 11.1439 18.0525 10.5976 17.1585 10.1614Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -83,7 +83,7 @@ exports[`<WifiOffIcon /> should render WifiOffIcon 1`] = `
           d="M10.7903 6.0468C14.8485 5.71979 18.8654 7.05648 21.9185 9.74992C22.3326 10.1153 22.9645 10.0757 23.3299 9.66158C23.6953 9.24743 23.6557 8.6155 23.2416 8.25013C19.7814 5.19756 15.229 3.68266 10.6297 4.05326C10.0792 4.09762 9.66889 4.57984 9.71324 5.13034C9.7576 5.68085 10.2398 6.09115 10.7903 6.0468Z"
           fill={4282603381}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -97,7 +97,7 @@ exports[`<WifiOffIcon /> should render WifiOffIcon 1`] = `
             fill={4282603381}
             height="24"
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
diff --git a/packages/blade/src/components/Icons/WindIcon/__snapshots__/WindIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/WindIcon/__snapshots__/WindIcon.native.test.tsx.snap
index 332e1660329..a23775c2dfc 100644
--- a/packages/blade/src/components/Icons/WindIcon/__snapshots__/WindIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/WindIcon/__snapshots__/WindIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<WindIcon /> should render WindIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<WindIcon /> should render WindIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<WindIcon /> should render WindIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<WindIcon /> should render WindIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/XCircleIcon/__snapshots__/XCircleIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/XCircleIcon/__snapshots__/XCircleIcon.native.test.tsx.snap
index a5da31e7d24..250abd0b184 100644
--- a/packages/blade/src/components/Icons/XCircleIcon/__snapshots__/XCircleIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/XCircleIcon/__snapshots__/XCircleIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<XCircleIcon /> should render XCircleIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<XCircleIcon /> should render XCircleIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<XCircleIcon /> should render XCircleIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<XCircleIcon /> should render XCircleIcon 1`] = `
         d="M15.7071 8.29289C16.0976 8.68342 16.0976 9.31658 15.7071 9.70711L13.4142 12L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L12 13.4142L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L10.5858 12L8.29289 9.70711C7.90237 9.31658 7.90237 8.68342 8.29289 8.29289C8.68342 7.90237 9.31658 7.90237 9.70711 8.29289L12 10.5858L14.2929 8.29289C14.6834 7.90237 15.3166 7.90237 15.7071 8.29289Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -64,7 +64,7 @@ exports[`<XCircleIcon /> should render XCircleIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/XSquareIcon/__snapshots__/XSquareIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/XSquareIcon/__snapshots__/XSquareIcon.native.test.tsx.snap
index b69cb1cd91b..7346a6e5178 100644
--- a/packages/blade/src/components/Icons/XSquareIcon/__snapshots__/XSquareIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/XSquareIcon/__snapshots__/XSquareIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<XSquareIcon /> should render XSquareIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<XSquareIcon /> should render XSquareIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<XSquareIcon /> should render XSquareIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<XSquareIcon /> should render XSquareIcon 1`] = `
         d="M8.29289 8.29289C8.68342 7.90237 9.31658 7.90237 9.70711 8.29289L12 10.5858L14.2929 8.29289C14.6834 7.90237 15.3166 7.90237 15.7071 8.29289C16.0976 8.68342 16.0976 9.31658 15.7071 9.70711L13.4142 12L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L12 13.4142L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L10.5858 12L8.29289 9.70711C7.90237 9.31658 7.90237 8.68342 8.29289 8.29289Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -64,7 +64,7 @@ exports[`<XSquareIcon /> should render XSquareIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/ZapIcon/__snapshots__/ZapIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ZapIcon/__snapshots__/ZapIcon.native.test.tsx.snap
index 27c9d410771..0a919c72105 100644
--- a/packages/blade/src/components/Icons/ZapIcon/__snapshots__/ZapIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ZapIcon/__snapshots__/ZapIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ZapIcon /> should render ZapIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ZapIcon /> should render ZapIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ZapIcon /> should render ZapIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -55,7 +55,7 @@ exports[`<ZapIcon /> should render ZapIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/ZoomInIcon/__snapshots__/ZoomInIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ZoomInIcon/__snapshots__/ZoomInIcon.native.test.tsx.snap
index f082873f84d..1b2529713c2 100644
--- a/packages/blade/src/components/Icons/ZoomInIcon/__snapshots__/ZoomInIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ZoomInIcon/__snapshots__/ZoomInIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ZoomInIcon /> should render ZoomInIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ZoomInIcon /> should render ZoomInIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ZoomInIcon /> should render ZoomInIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<ZoomInIcon /> should render ZoomInIcon 1`] = `
         d="M11 7C11.5523 7 12 7.44772 12 8V10H14C14.5523 10 15 10.4477 15 11C15 11.5523 14.5523 12 14 12H12V14C12 14.5523 11.5523 15 11 15C10.4477 15 10 14.5523 10 14V12H8C7.44772 12 7 11.5523 7 11C7 10.4477 7.44772 10 8 10H10V8C10 7.44772 10.4477 7 11 7Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -64,7 +64,7 @@ exports[`<ZoomInIcon /> should render ZoomInIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/ZoomOutIcon/__snapshots__/ZoomOutIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ZoomOutIcon/__snapshots__/ZoomOutIcon.native.test.tsx.snap
index 3a01561364c..16302f9c69c 100644
--- a/packages/blade/src/components/Icons/ZoomOutIcon/__snapshots__/ZoomOutIcon.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/ZoomOutIcon/__snapshots__/ZoomOutIcon.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ZoomOutIcon /> should render ZoomOutIcon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ZoomOutIcon /> should render ZoomOutIcon 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<ZoomOutIcon /> should render ZoomOutIcon 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<ZoomOutIcon /> should render ZoomOutIcon 1`] = `
         d="M8 10C7.44772 10 7 10.4477 7 11C7 11.5523 7.44772 12 8 12H14C14.5523 12 15 11.5523 15 11C15 10.4477 14.5523 10 14 10H8Z"
         fill={4282603381}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
@@ -64,7 +64,7 @@ exports[`<ZoomOutIcon /> should render ZoomOutIcon 1`] = `
         fill={4282603381}
         fillRule={0}
         propList={
-          Array [
+          [
             "fill",
             "fillRule",
           ]
diff --git a/packages/blade/src/components/Icons/_Svg/Circle/__tests__/__snapshots__/Circle.native.test.tsx.snap b/packages/blade/src/components/Icons/_Svg/Circle/__tests__/__snapshots__/Circle.native.test.tsx.snap
index 3766707b258..75302f0a7d1 100644
--- a/packages/blade/src/components/Icons/_Svg/Circle/__tests__/__snapshots__/Circle.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/_Svg/Circle/__tests__/__snapshots__/Circle.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Circle /> should render react-native-svg Circle component 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -21,15 +21,15 @@ exports[`<Circle /> should render react-native-svg Circle component 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 110,
           "width": 400,
@@ -45,7 +45,7 @@ exports[`<Circle /> should render react-native-svg Circle component 1`] = `
         cx="200"
         cy="100"
         matrix={
-          Array [
+          [
             1,
             0,
             -0,
@@ -55,7 +55,7 @@ exports[`<Circle /> should render react-native-svg Circle component 1`] = `
           ]
         }
         propList={
-          Array [
+          [
             "strokeWidth",
           ]
         }
diff --git a/packages/blade/src/components/Icons/_Svg/ClipPath/__tests__/__snapshots__/ClipPath.native.test.tsx.snap b/packages/blade/src/components/Icons/_Svg/ClipPath/__tests__/__snapshots__/ClipPath.native.test.tsx.snap
index bff66f45e10..0d36ebf2091 100644
--- a/packages/blade/src/components/Icons/_Svg/ClipPath/__tests__/__snapshots__/ClipPath.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/_Svg/ClipPath/__tests__/__snapshots__/ClipPath.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ClipPath /> should render react-native-svg ClipPath component 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<ClipPath /> should render react-native-svg ClipPath component 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 40,
           "width": 40,
@@ -44,7 +44,7 @@ exports[`<ClipPath /> should render react-native-svg ClipPath component 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -56,7 +56,7 @@ exports[`<ClipPath /> should render react-native-svg ClipPath component 1`] = `
           d="M2 2h2v2H2V2"
           fill={4278190080}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
diff --git a/packages/blade/src/components/Icons/_Svg/Defs/__tests__/__snapshots__/Defs.native.test.tsx.snap b/packages/blade/src/components/Icons/_Svg/Defs/__tests__/__snapshots__/Defs.native.test.tsx.snap
index 608c6873729..8de44e3a9a2 100644
--- a/packages/blade/src/components/Icons/_Svg/Defs/__tests__/__snapshots__/Defs.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/_Svg/Defs/__tests__/__snapshots__/Defs.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Defs /> should render react-native-svg Defs component 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<Defs /> should render react-native-svg Defs component 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 40,
           "width": 40,
@@ -44,7 +44,7 @@ exports[`<Defs /> should render react-native-svg Defs component 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -54,7 +54,7 @@ exports[`<Defs /> should render react-native-svg Defs component 1`] = `
           d="M2 2h2v2H2V2"
           fill={4278190080}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
diff --git a/packages/blade/src/components/Icons/_Svg/G/__tests__/__snapshots__/G.native.test.tsx.snap b/packages/blade/src/components/Icons/_Svg/G/__tests__/__snapshots__/G.native.test.tsx.snap
index b612d81ffb5..fdc8277e7bd 100644
--- a/packages/blade/src/components/Icons/_Svg/G/__tests__/__snapshots__/G.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/_Svg/G/__tests__/__snapshots__/G.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<G /> should render react-native-svg G component 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<G /> should render react-native-svg G component 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 40,
           "width": 40,
@@ -44,7 +44,7 @@ exports[`<G /> should render react-native-svg G component 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -56,7 +56,7 @@ exports[`<G /> should render react-native-svg G component 1`] = `
           d="M2 2h2v2H2V2"
           fill={4278190080}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
diff --git a/packages/blade/src/components/Icons/_Svg/Path/__tests__/__snapshots__/Path.native.test.tsx.snap b/packages/blade/src/components/Icons/_Svg/Path/__tests__/__snapshots__/Path.native.test.tsx.snap
index fbb9dac9687..16d7d6c988d 100644
--- a/packages/blade/src/components/Icons/_Svg/Path/__tests__/__snapshots__/Path.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/_Svg/Path/__tests__/__snapshots__/Path.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Path /> should not accept dashed props 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -17,7 +17,7 @@ exports[`<Path /> should not accept dashed props 1`] = `
 exports[`<Path /> should render react-native-svg Path component 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -36,15 +36,15 @@ exports[`<Path /> should render react-native-svg Path component 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 40,
           "width": 40,
@@ -58,7 +58,7 @@ exports[`<Path /> should render react-native-svg Path component 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -71,7 +71,7 @@ exports[`<Path /> should render react-native-svg Path component 1`] = `
         fillOpacity={0.5}
         fillRule={1}
         propList={
-          Array [
+          [
             "fill",
             "fillOpacity",
             "fillRule",
diff --git a/packages/blade/src/components/Icons/_Svg/Rect/__tests__/__snapshots__/Rect.native.test.tsx.snap b/packages/blade/src/components/Icons/_Svg/Rect/__tests__/__snapshots__/Rect.native.test.tsx.snap
index acf5a8cc43c..ded5f48835c 100644
--- a/packages/blade/src/components/Icons/_Svg/Rect/__tests__/__snapshots__/Rect.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/_Svg/Rect/__tests__/__snapshots__/Rect.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Rect /> should render react-native-svg Rect component 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -21,15 +21,15 @@ exports[`<Rect /> should render react-native-svg Rect component 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 110,
           "width": 400,
diff --git a/packages/blade/src/components/Icons/_Svg/Svg/__tests__/__snapshots__/Svg.native.test.tsx.snap b/packages/blade/src/components/Icons/_Svg/Svg/__tests__/__snapshots__/Svg.native.test.tsx.snap
index 5a7f50b7a46..c670c5f24f3 100644
--- a/packages/blade/src/components/Icons/_Svg/Svg/__tests__/__snapshots__/Svg.native.test.tsx.snap
+++ b/packages/blade/src/components/Icons/_Svg/Svg/__tests__/__snapshots__/Svg.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Svg /> should render react-native-svg Svg component 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -22,15 +22,15 @@ exports[`<Svg /> should render react-native-svg Svg component 1`] = `
     minX={0}
     minY={0}
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
-        Array [
-          Object {},
+        [
+          {},
         ],
-        Object {
+        {
           "flex": 0,
           "height": 20,
           "width": 20,
@@ -44,7 +44,7 @@ exports[`<Svg /> should render react-native-svg Svg component 1`] = `
     <RNSVGGroup
       fill={null}
       propList={
-        Array [
+        [
           "fill",
         ]
       }
@@ -53,7 +53,7 @@ exports[`<Svg /> should render react-native-svg Svg component 1`] = `
         d="M2 2h2v2H2V2"
         fill={4278190080}
         propList={
-          Array [
+          [
             "fill",
           ]
         }
diff --git a/packages/blade/src/components/Indicator/__tests__/__snapshots__/Indicator.native.test.tsx.snap b/packages/blade/src/components/Indicator/__tests__/__snapshots__/Indicator.native.test.tsx.snap
index 0f37aa1c799..eb4bb300715 100644
--- a/packages/blade/src/components/Indicator/__tests__/__snapshots__/Indicator.native.test.tsx.snap
+++ b/packages/blade/src/components/Indicator/__tests__/__snapshots__/Indicator.native.test.tsx.snap
@@ -3,18 +3,19 @@
 exports[`<Indicator /> should render 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <View
     accessibilityLabel="Success"
+    accessible={true}
     data-blade-component="indicator"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -26,8 +27,8 @@ exports[`<Indicator /> should render 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -49,15 +50,15 @@ exports[`<Indicator /> should render 1`] = `
         minX={0}
         minY={0}
         style={
-          Array [
-            Object {
+          [
+            {
               "backgroundColor": "transparent",
               "borderWidth": 0,
             },
-            Array [
-              Object {},
+            [
+              {},
             ],
-            Object {
+            {
               "flex": 0,
               "height": 8,
               "width": 8,
@@ -71,7 +72,7 @@ exports[`<Indicator /> should render 1`] = `
         <RNSVGGroup
           fill={null}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -81,7 +82,7 @@ exports[`<Indicator /> should render 1`] = `
             cy="5"
             fill={4281484642}
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
@@ -91,7 +92,7 @@ exports[`<Indicator /> should render 1`] = `
             cx="5"
             cy="5"
             propList={
-              Array [
+              [
                 "stroke",
                 "strokeWidth",
               ]
@@ -105,14 +106,15 @@ exports[`<Indicator /> should render 1`] = `
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 4,
             },
           ]
         }
       >
         <Text
+          accessible={true}
           color="surface.text.subtle.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -121,8 +123,8 @@ exports[`<Indicator /> should render 1`] = `
           fontWeight="regular"
           lineHeight={100}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 27%, 36%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 14,
@@ -153,18 +155,19 @@ exports[`<Indicator /> should render 1`] = `
 exports[`<Indicator /> should render different variants for size and intent 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <View
     accessibilityLabel="Warning"
+    accessible={true}
     data-blade-component="indicator"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -176,8 +179,8 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -199,15 +202,15 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
         minX={0}
         minY={0}
         style={
-          Array [
-            Object {
+          [
+            {
               "backgroundColor": "transparent",
               "borderWidth": 0,
             },
-            Array [
-              Object {},
+            [
+              {},
             ],
-            Object {
+            {
               "flex": 0,
               "height": 6,
               "width": 6,
@@ -221,7 +224,7 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
         <RNSVGGroup
           fill={null}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -231,7 +234,7 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
             cy="5"
             fill={4290738691}
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
@@ -241,7 +244,7 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
             cx="5"
             cy="5"
             propList={
-              Array [
+              [
                 "stroke",
                 "strokeWidth",
               ]
@@ -255,14 +258,15 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 4,
             },
           ]
         }
       >
         <Text
+          accessible={true}
           color="surface.text.subtle.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -271,8 +275,8 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
           fontWeight="regular"
           lineHeight={50}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 27%, 36%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -299,11 +303,12 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
   </View>
   <View
     accessibilityLabel="Success"
+    accessible={true}
     data-blade-component="indicator"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -315,8 +320,8 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -338,15 +343,15 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
         minX={0}
         minY={0}
         style={
-          Array [
-            Object {
+          [
+            {
               "backgroundColor": "transparent",
               "borderWidth": 0,
             },
-            Array [
-              Object {},
+            [
+              {},
             ],
-            Object {
+            {
               "flex": 0,
               "height": 8,
               "width": 8,
@@ -360,7 +365,7 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
         <RNSVGGroup
           fill={null}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -370,7 +375,7 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
             cy="5"
             fill={4278224216}
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
@@ -380,7 +385,7 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
             cx="5"
             cy="5"
             propList={
-              Array [
+              [
                 "stroke",
                 "strokeWidth",
               ]
@@ -394,14 +399,15 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 4,
             },
           ]
         }
       >
         <Text
+          accessible={true}
           color="surface.text.subtle.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -410,8 +416,8 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
           fontWeight="regular"
           lineHeight={100}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 27%, 36%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 14,
@@ -438,11 +444,12 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
   </View>
   <View
     accessibilityLabel="Error"
+    accessible={true}
     data-blade-component="indicator"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -454,8 +461,8 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -477,15 +484,15 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
         minX={0}
         minY={0}
         style={
-          Array [
-            Object {
+          [
+            {
               "backgroundColor": "transparent",
               "borderWidth": 0,
             },
-            Array [
-              Object {},
+            [
+              {},
             ],
-            Object {
+            {
               "flex": 0,
               "height": 10,
               "width": 10,
@@ -499,7 +506,7 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
         <RNSVGGroup
           fill={null}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -509,7 +516,7 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
             cy="5"
             fill={4291770400}
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
@@ -519,7 +526,7 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
             cx="5"
             cy="5"
             propList={
-              Array [
+              [
                 "stroke",
                 "strokeWidth",
               ]
@@ -533,14 +540,15 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 4,
             },
           ]
         }
       >
         <Text
+          accessible={true}
           color="surface.text.subtle.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -549,8 +557,8 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
           fontWeight="regular"
           lineHeight={100}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 27%, 36%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 14,
@@ -577,11 +585,12 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
   </View>
   <View
     accessibilityLabel="Info"
+    accessible={true}
     data-blade-component="indicator"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -593,8 +602,8 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -616,15 +625,15 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
         minX={0}
         minY={0}
         style={
-          Array [
-            Object {
+          [
+            {
               "backgroundColor": "transparent",
               "borderWidth": 0,
             },
-            Array [
-              Object {},
+            [
+              {},
             ],
-            Object {
+            {
               "flex": 0,
               "height": 8,
               "width": 8,
@@ -638,7 +647,7 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
         <RNSVGGroup
           fill={null}
           propList={
-            Array [
+            [
               "fill",
             ]
           }
@@ -648,7 +657,7 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
             cy="5"
             fill={4278226099}
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
@@ -658,7 +667,7 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
             cx="5"
             cy="5"
             propList={
-              Array [
+              [
                 "stroke",
                 "strokeWidth",
               ]
@@ -672,14 +681,15 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 4,
             },
           ]
         }
       >
         <Text
+          accessible={true}
           color="surface.text.subtle.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -688,8 +698,8 @@ exports[`<Indicator /> should render different variants for size and intent 1`]
           fontWeight="regular"
           lineHeight={100}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 27%, 36%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 14,
diff --git a/packages/blade/src/components/Indicator/__tests__/__snapshots__/Indicator.ssr.test.tsx.snap b/packages/blade/src/components/Indicator/__tests__/__snapshots__/Indicator.ssr.test.tsx.snap
index f2aa5e5eb1c..4bd5be1337f 100644
--- a/packages/blade/src/components/Indicator/__tests__/__snapshots__/Indicator.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Indicator/__tests__/__snapshots__/Indicator.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Indicator /> should have role and a11y label when text label is passed 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div aria-label=\\"Active\\" role=\\"status\\" data-blade-component=\\"indicator\\" class=\\"BaseBox-bmPWx jLCxzZ\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fSbYvl\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"8\\" viewBox=\\"0 0 10 10\\" width=\\"8\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><circle cx=\\"5\\" cy=\\"5\\" r=\\"5\\" fill=\\"hsla(216, 33%, 29%, 1)\\" data-blade-component=\\"svg-circle\\"></circle><circle cx=\\"5\\" cy=\\"5\\" r=\\"4.75\\" stroke=\\"hsla(214, 21%, 94%, 0.18)\\" stroke-width=\\"0.5\\" data-blade-component=\\"svg-circle\\"></circle></svg><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bigiAM\\"><p class=\\"StyledBaseText-dVBfTO dJlkAX\\" data-blade-component=\\"text\\">Active</p></div></div></div></div>"`;
+exports[`<Indicator /> should have role and a11y label when text label is passed 1`] = `"<div id="root" data-reactroot=""><div aria-label="Active" role="status" data-blade-component="indicator" class="BaseBox-bmPWx jLCxzZ"><div data-blade-component="base-box" class="BaseBox-bmPWx fSbYvl"><svg aria-hidden="true" data-blade-component="icon" height="8" viewBox="0 0 10 10" width="8" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><circle cx="5" cy="5" r="5" fill="hsla(216, 33%, 29%, 1)" data-blade-component="svg-circle"></circle><circle cx="5" cy="5" r="4.75" stroke="hsla(214, 21%, 94%, 0.18)" stroke-width="0.5" data-blade-component="svg-circle"></circle></svg><div data-blade-component="base-box" class="BaseBox-bmPWx bigiAM"><p class="StyledBaseText-dVBfTO dJlkAX" data-blade-component="text">Active</p></div></div></div></div>"`;
 
 exports[`<Indicator /> should have role and a11y label when text label is passed 2`] = `
 <div
diff --git a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.native.test.tsx.snap b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.native.test.tsx.snap
index 16c56723720..f5d74109ab3 100644
--- a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.native.test.tsx.snap
+++ b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<BaseInput /> should render 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,8 +11,8 @@ exports[`<BaseInput /> should render 1`] = `
   <View
     data-blade-component="base-box"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -22,8 +22,8 @@ exports[`<BaseInput /> should render 1`] = `
       flexDirection="column"
       position="relative"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "position": "relative",
@@ -39,8 +39,8 @@ exports[`<BaseInput /> should render 1`] = `
         flexDirection="row"
         justifyContent="space-between"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -53,8 +53,8 @@ exports[`<BaseInput /> should render 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
                 "marginRight": 16,
               },
@@ -70,8 +70,8 @@ exports[`<BaseInput /> should render 1`] = `
             gap="spacing.0"
             maxHeight="36px"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "display": "flex",
                   "flexDirection": "row",
@@ -83,6 +83,7 @@ exports[`<BaseInput /> should render 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.subdued.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -92,8 +93,8 @@ exports[`<BaseInput /> should render 1`] = `
               lineHeight={50}
               numberOfLines={2}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 18%, 45%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 12,
@@ -118,8 +119,8 @@ exports[`<BaseInput /> should render 1`] = `
             <View
               data-blade-component="visually-hidden"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "borderColor": "black",
                     "borderStyle": "solid",
                     "borderWidth": 0,
@@ -145,6 +146,7 @@ exports[`<BaseInput /> should render 1`] = `
               }
             >
               <Text
+                accessible={true}
                 color="surface.text.normal.lowContrast"
                 data-blade-component="text"
                 fontFamily="text"
@@ -153,8 +155,8 @@ exports[`<BaseInput /> should render 1`] = `
                 fontWeight="regular"
                 lineHeight={100}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "hsla(217, 56%, 17%, 1)",
                       "fontFamily": "Lato",
                       "fontSize": 14,
@@ -185,14 +187,14 @@ exports[`<BaseInput /> should render 1`] = `
         flexDirection="row"
         position="relative"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "position": "relative",
               "width": "100%",
             },
-            Object {
+            {
               "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
               "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
               "borderBottomStyle": "solid",
@@ -209,11 +211,12 @@ exports[`<BaseInput /> should render 1`] = `
           accessibilityInvalid={false}
           accessibilityRequired={false}
           accessibilityState={
-            Object {
+            {
               "disabled": false,
               "expanded": undefined,
             }
           }
+          accessible={true}
           data-blade-component="styled-base-input"
           editable={true}
           id="name-1-input-2"
@@ -229,8 +232,8 @@ exports[`<BaseInput /> should render 1`] = `
           onSubmitEditing={[Function]}
           secureTextEntry={false}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "color": "hsla(216, 27%, 36%, 1)",
                 "flexBasis": 0,
@@ -258,8 +261,8 @@ exports[`<BaseInput /> should render 1`] = `
         />
         <View
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(218, 89%, 51%, 1)",
                 "bottom": 0,
                 "height": 1,
@@ -268,7 +271,7 @@ exports[`<BaseInput /> should render 1`] = `
                 "position": "absolute",
                 "right": 0,
               },
-              Object {
+              {
                 "opacity": undefined,
                 "width": "undefined%",
               },
@@ -280,8 +283,8 @@ exports[`<BaseInput /> should render 1`] = `
     <View
       data-blade-component="base-box"
       style={
-        Array [
-          Object {
+        [
+          {
             "marginLeft": 0,
           },
         ]
@@ -293,8 +296,8 @@ exports[`<BaseInput /> should render 1`] = `
         flexDirection="row"
         justifyContent="flex-end"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "flex-end",
@@ -310,7 +313,7 @@ exports[`<BaseInput /> should render 1`] = `
 exports[`<BaseInput /> should render with icons 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -318,8 +321,8 @@ exports[`<BaseInput /> should render with icons 1`] = `
   <View
     data-blade-component="base-box"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -329,8 +332,8 @@ exports[`<BaseInput /> should render with icons 1`] = `
       flexDirection="column"
       position="relative"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "position": "relative",
@@ -346,8 +349,8 @@ exports[`<BaseInput /> should render with icons 1`] = `
         flexDirection="row"
         justifyContent="space-between"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -360,8 +363,8 @@ exports[`<BaseInput /> should render with icons 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
                 "marginRight": 16,
               },
@@ -377,8 +380,8 @@ exports[`<BaseInput /> should render with icons 1`] = `
             gap="spacing.0"
             maxHeight="36px"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "display": "flex",
                   "flexDirection": "row",
@@ -390,6 +393,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.subdued.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -399,8 +403,8 @@ exports[`<BaseInput /> should render with icons 1`] = `
               lineHeight={50}
               numberOfLines={2}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 18%, 45%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 12,
@@ -425,8 +429,8 @@ exports[`<BaseInput /> should render with icons 1`] = `
             <View
               data-blade-component="visually-hidden"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "borderColor": "black",
                     "borderStyle": "solid",
                     "borderWidth": 0,
@@ -452,6 +456,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
               }
             >
               <Text
+                accessible={true}
                 color="surface.text.normal.lowContrast"
                 data-blade-component="text"
                 fontFamily="text"
@@ -460,8 +465,8 @@ exports[`<BaseInput /> should render with icons 1`] = `
                 fontWeight="regular"
                 lineHeight={100}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "hsla(217, 56%, 17%, 1)",
                       "fontFamily": "Lato",
                       "fontSize": 14,
@@ -492,14 +497,14 @@ exports[`<BaseInput /> should render with icons 1`] = `
         flexDirection="row"
         position="relative"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "position": "relative",
               "width": "100%",
             },
-            Object {
+            {
               "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
               "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
               "borderBottomStyle": "solid",
@@ -517,8 +522,8 @@ exports[`<BaseInput /> should render with icons 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -530,8 +535,8 @@ exports[`<BaseInput /> should render with icons 1`] = `
             data-blade-component="base-box"
             display="flex"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "flex",
                   "paddingLeft": 12,
                 },
@@ -552,15 +557,15 @@ exports[`<BaseInput /> should render with icons 1`] = `
               minX={0}
               minY={0}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "transparent",
                     "borderWidth": 0,
                   },
-                  Array [
-                    Object {},
+                  [
+                    {},
                   ],
-                  Object {
+                  {
                     "flex": 0,
                     "height": 16,
                     "width": 16,
@@ -574,7 +579,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
               <RNSVGGroup
                 fill={null}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -585,7 +590,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
                   fill={4282603381}
                   fillRule={0}
                   propList={
-                    Array [
+                    [
                       "fill",
                       "fillRule",
                     ]
@@ -597,7 +602,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
                   fill={4282603381}
                   fillRule={0}
                   propList={
-                    Array [
+                    [
                       "fill",
                       "fillRule",
                     ]
@@ -612,11 +617,12 @@ exports[`<BaseInput /> should render with icons 1`] = `
           accessibilityInvalid={false}
           accessibilityRequired={false}
           accessibilityState={
-            Object {
+            {
               "disabled": false,
               "expanded": undefined,
             }
           }
+          accessible={true}
           data-blade-component="styled-base-input"
           editable={true}
           id="name-31-input-32"
@@ -634,8 +640,8 @@ exports[`<BaseInput /> should render with icons 1`] = `
           placeholder="First Last"
           secureTextEntry={false}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "color": "hsla(216, 27%, 36%, 1)",
                 "flexBasis": 0,
@@ -668,8 +674,8 @@ exports[`<BaseInput /> should render with icons 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -681,8 +687,8 @@ exports[`<BaseInput /> should render with icons 1`] = `
             data-blade-component="base-box"
             display="flex"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "flex",
                   "paddingRight": 12,
                 },
@@ -703,15 +709,15 @@ exports[`<BaseInput /> should render with icons 1`] = `
               minX={0}
               minY={0}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "transparent",
                     "borderWidth": 0,
                   },
-                  Array [
-                    Object {},
+                  [
+                    {},
                   ],
-                  Object {
+                  {
                     "flex": 0,
                     "height": 16,
                     "width": 16,
@@ -725,7 +731,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
               <RNSVGGroup
                 fill={null}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -734,7 +740,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
                   d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
                   fill={4282603381}
                   propList={
-                    Array [
+                    [
                       "fill",
                     ]
                   }
@@ -745,8 +751,8 @@ exports[`<BaseInput /> should render with icons 1`] = `
         </View>
         <View
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(218, 89%, 51%, 1)",
                 "bottom": 0,
                 "height": 1,
@@ -755,7 +761,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
                 "position": "absolute",
                 "right": 0,
               },
-              Object {
+              {
                 "opacity": undefined,
                 "width": "undefined%",
               },
@@ -767,8 +773,8 @@ exports[`<BaseInput /> should render with icons 1`] = `
     <View
       data-blade-component="base-box"
       style={
-        Array [
-          Object {
+        [
+          {
             "marginLeft": 0,
           },
         ]
@@ -780,8 +786,8 @@ exports[`<BaseInput /> should render with icons 1`] = `
         flexDirection="row"
         justifyContent="flex-end"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "flex-end",
diff --git a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.ssr.test.tsx.snap b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.ssr.test.tsx.snap
index b252637afef..dd08e6d568b 100644
--- a/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<BaseInput /> should display success validation state 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx edjBu\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fJyvvB\\"><label for=\\"name-undefined-input-undefined\\" style=\\"width:auto;flex-shrink:0;margin-right:16px\\" data-blade-component=\\"form-label\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bqWBik\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx eeqPab\\"><p class=\\"StyledBaseText-dVBfTO gaMIEc\\" data-blade-component=\\"text\\">Enter name</p><div data-blade-component=\\"visually-hidden\\" class=\\"VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw\\"><p class=\\"StyledBaseText-dVBfTO eIdQFo\\" data-blade-component=\\"text\\"></p></div></div></div></label></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseInputWrapper__StyledBaseInputWrapper-sc-27jk75-0 kRxJZq kkYblY\\"><input type=\\"text\\" id=\\"name-undefined-input-undefined\\" data-blade-component=\\"styled-base-input\\" aria-required=\\"false\\" aria-disabled=\\"false\\" aria-invalid=\\"false\\" aria-describedby=\\"name-undefined-successtext-undefined\\" class=\\"StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 jxivIr\\"/><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo\\"></div></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx jgxKDg\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx XURfx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx gnjvtY\\"><span style=\\"word-break:break-all\\" data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fSbYvl\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"12px\\" viewBox=\\"0 0 24 24\\" width=\\"12px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z\\" clip-rule=\\"evenodd\\" fill=\\"hsla(160, 100%, 26%, 1)\\" fill-rule=\\"evenodd\\" data-blade-component=\\"svg-path\\"></path></svg><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx joUrH\\"></div><span class=\\"StyledBaseText-dVBfTO cGPVnl\\" id=\\"name-undefined-successtext-undefined\\" data-blade-component=\\"base-text\\">Success</span></span></div></div></div></div></div>"`;
+exports[`<BaseInput /> should display success validation state 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx edjBu"><div data-blade-component="base-box" class="BaseBox-bmPWx fJyvvB"><label for="name-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx bqWBik"><div data-blade-component="base-box" class="BaseBox-bmPWx eeqPab"><p class="StyledBaseText-dVBfTO gaMIEc" data-blade-component="text">Enter name</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputWrapper__StyledBaseInputWrapper-sc-27jk75-0 kRxJZq kkYblY"><input type="text" id="name-undefined-input-undefined" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="name-undefined-successtext-undefined" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 jxivIr"/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx jgxKDg"><div data-blade-component="base-box" class="BaseBox-bmPWx XURfx"><div data-blade-component="base-box" class="BaseBox-bmPWx gnjvtY"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fSbYvl"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z" clip-rule="evenodd" fill="hsla(160, 100%, 26%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx joUrH"></div><span class="StyledBaseText-dVBfTO cGPVnl" id="name-undefined-successtext-undefined" data-blade-component="base-text">Success</span></span></div></div></div></div></div>"`;
 
 exports[`<BaseInput /> should display success validation state 2`] = `
 <div
diff --git a/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.native.test.tsx.snap b/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.native.test.tsx.snap
index dbb12fdd59a..207292e40d2 100644
--- a/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.native.test.tsx.snap
+++ b/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<OTPInput /> should render 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,8 +11,8 @@ exports[`<OTPInput /> should render 1`] = `
   <View
     data-blade-component="otp-input"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -22,8 +22,8 @@ exports[`<OTPInput /> should render 1`] = `
       flexDirection="column"
       position="relative"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "position": "relative",
@@ -34,8 +34,8 @@ exports[`<OTPInput /> should render 1`] = `
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "marginBottom": 4,
               "marginRight": 16,
             },
@@ -51,8 +51,8 @@ exports[`<OTPInput /> should render 1`] = `
           gap="spacing.0"
           maxHeight="36px"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -64,6 +64,7 @@ exports[`<OTPInput /> should render 1`] = `
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subdued.lowContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -73,8 +74,8 @@ exports[`<OTPInput /> should render 1`] = `
             lineHeight={50}
             numberOfLines={2}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(217, 18%, 45%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -99,8 +100,8 @@ exports[`<OTPInput /> should render 1`] = `
           <View
             data-blade-component="visually-hidden"
             style={
-              Array [
-                Object {
+              [
+                {
                   "borderColor": "black",
                   "borderStyle": "solid",
                   "borderWidth": 0,
@@ -126,6 +127,7 @@ exports[`<OTPInput /> should render 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -134,8 +136,8 @@ exports[`<OTPInput /> should render 1`] = `
               fontWeight="regular"
               lineHeight={100}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 14,
@@ -163,8 +165,8 @@ exports[`<OTPInput /> should render 1`] = `
         display="flex"
         flexDirection="row"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
             },
@@ -174,8 +176,8 @@ exports[`<OTPInput /> should render 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "flexBasis": 0,
                 "flexGrow": 1,
                 "flexShrink": 1,
@@ -187,8 +189,8 @@ exports[`<OTPInput /> should render 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {},
+              [
+                {},
               ]
             }
           >
@@ -198,8 +200,8 @@ exports[`<OTPInput /> should render 1`] = `
               flexDirection="column"
               position="relative"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "display": "flex",
                     "flexDirection": "column",
                     "position": "relative",
@@ -216,14 +218,14 @@ exports[`<OTPInput /> should render 1`] = `
                 flexDirection="row"
                 position="relative"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "display": "flex",
                       "flexDirection": "row",
                       "position": "relative",
                       "width": "100%",
                     },
-                    Object {
+                    {
                       "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
                       "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
                       "borderBottomStyle": "solid",
@@ -241,11 +243,12 @@ exports[`<OTPInput /> should render 1`] = `
                   accessibilityLabel="Enter OTP character 1"
                   accessibilityRequired={true}
                   accessibilityState={
-                    Object {
+                    {
                       "disabled": false,
                       "expanded": undefined,
                     }
                   }
+                  accessible={true}
                   autoCompleteType="sms-otp"
                   data-blade-component="styled-base-input"
                   editable={true}
@@ -263,8 +266,8 @@ exports[`<OTPInput /> should render 1`] = `
                   placeholder=""
                   secureTextEntry={false}
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "backgroundColor": "transparent",
                         "color": "hsla(216, 27%, 36%, 1)",
                         "flexBasis": 0,
@@ -295,8 +298,8 @@ exports[`<OTPInput /> should render 1`] = `
                 />
                 <View
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "backgroundColor": "hsla(218, 89%, 51%, 1)",
                         "bottom": 0,
                         "height": 1,
@@ -305,7 +308,7 @@ exports[`<OTPInput /> should render 1`] = `
                         "position": "absolute",
                         "right": 0,
                       },
-                      Object {
+                      {
                         "opacity": undefined,
                         "width": "undefined%",
                       },
@@ -319,8 +322,8 @@ exports[`<OTPInput /> should render 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "flexBasis": 0,
                 "flexGrow": 1,
                 "flexShrink": 1,
@@ -332,8 +335,8 @@ exports[`<OTPInput /> should render 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {},
+              [
+                {},
               ]
             }
           >
@@ -343,8 +346,8 @@ exports[`<OTPInput /> should render 1`] = `
               flexDirection="column"
               position="relative"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "display": "flex",
                     "flexDirection": "column",
                     "position": "relative",
@@ -361,14 +364,14 @@ exports[`<OTPInput /> should render 1`] = `
                 flexDirection="row"
                 position="relative"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "display": "flex",
                       "flexDirection": "row",
                       "position": "relative",
                       "width": "100%",
                     },
-                    Object {
+                    {
                       "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
                       "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
                       "borderBottomStyle": "solid",
@@ -386,11 +389,12 @@ exports[`<OTPInput /> should render 1`] = `
                   accessibilityLabel=" character 2"
                   accessibilityRequired={true}
                   accessibilityState={
-                    Object {
+                    {
                       "disabled": false,
                       "expanded": undefined,
                     }
                   }
+                  accessible={true}
                   autoCompleteType="sms-otp"
                   data-blade-component="styled-base-input"
                   editable={true}
@@ -408,8 +412,8 @@ exports[`<OTPInput /> should render 1`] = `
                   placeholder=""
                   secureTextEntry={false}
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "backgroundColor": "transparent",
                         "color": "hsla(216, 27%, 36%, 1)",
                         "flexBasis": 0,
@@ -440,8 +444,8 @@ exports[`<OTPInput /> should render 1`] = `
                 />
                 <View
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "backgroundColor": "hsla(218, 89%, 51%, 1)",
                         "bottom": 0,
                         "height": 1,
@@ -450,7 +454,7 @@ exports[`<OTPInput /> should render 1`] = `
                         "position": "absolute",
                         "right": 0,
                       },
-                      Object {
+                      {
                         "opacity": undefined,
                         "width": "undefined%",
                       },
@@ -464,8 +468,8 @@ exports[`<OTPInput /> should render 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "flexBasis": 0,
                 "flexGrow": 1,
                 "flexShrink": 1,
@@ -477,8 +481,8 @@ exports[`<OTPInput /> should render 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {},
+              [
+                {},
               ]
             }
           >
@@ -488,8 +492,8 @@ exports[`<OTPInput /> should render 1`] = `
               flexDirection="column"
               position="relative"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "display": "flex",
                     "flexDirection": "column",
                     "position": "relative",
@@ -506,14 +510,14 @@ exports[`<OTPInput /> should render 1`] = `
                 flexDirection="row"
                 position="relative"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "display": "flex",
                       "flexDirection": "row",
                       "position": "relative",
                       "width": "100%",
                     },
-                    Object {
+                    {
                       "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
                       "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
                       "borderBottomStyle": "solid",
@@ -531,11 +535,12 @@ exports[`<OTPInput /> should render 1`] = `
                   accessibilityLabel=" character 3"
                   accessibilityRequired={true}
                   accessibilityState={
-                    Object {
+                    {
                       "disabled": false,
                       "expanded": undefined,
                     }
                   }
+                  accessible={true}
                   autoCompleteType="sms-otp"
                   data-blade-component="styled-base-input"
                   editable={true}
@@ -553,8 +558,8 @@ exports[`<OTPInput /> should render 1`] = `
                   placeholder=""
                   secureTextEntry={false}
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "backgroundColor": "transparent",
                         "color": "hsla(216, 27%, 36%, 1)",
                         "flexBasis": 0,
@@ -585,8 +590,8 @@ exports[`<OTPInput /> should render 1`] = `
                 />
                 <View
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "backgroundColor": "hsla(218, 89%, 51%, 1)",
                         "bottom": 0,
                         "height": 1,
@@ -595,7 +600,7 @@ exports[`<OTPInput /> should render 1`] = `
                         "position": "absolute",
                         "right": 0,
                       },
-                      Object {
+                      {
                         "opacity": undefined,
                         "width": "undefined%",
                       },
@@ -609,8 +614,8 @@ exports[`<OTPInput /> should render 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "flexBasis": 0,
                 "flexGrow": 1,
                 "flexShrink": 1,
@@ -622,8 +627,8 @@ exports[`<OTPInput /> should render 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {},
+              [
+                {},
               ]
             }
           >
@@ -633,8 +638,8 @@ exports[`<OTPInput /> should render 1`] = `
               flexDirection="column"
               position="relative"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "display": "flex",
                     "flexDirection": "column",
                     "position": "relative",
@@ -651,14 +656,14 @@ exports[`<OTPInput /> should render 1`] = `
                 flexDirection="row"
                 position="relative"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "display": "flex",
                       "flexDirection": "row",
                       "position": "relative",
                       "width": "100%",
                     },
-                    Object {
+                    {
                       "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
                       "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
                       "borderBottomStyle": "solid",
@@ -676,11 +681,12 @@ exports[`<OTPInput /> should render 1`] = `
                   accessibilityLabel=" character 4"
                   accessibilityRequired={true}
                   accessibilityState={
-                    Object {
+                    {
                       "disabled": false,
                       "expanded": undefined,
                     }
                   }
+                  accessible={true}
                   autoCompleteType="sms-otp"
                   data-blade-component="styled-base-input"
                   editable={true}
@@ -698,8 +704,8 @@ exports[`<OTPInput /> should render 1`] = `
                   placeholder=""
                   secureTextEntry={false}
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "backgroundColor": "transparent",
                         "color": "hsla(216, 27%, 36%, 1)",
                         "flexBasis": 0,
@@ -730,8 +736,8 @@ exports[`<OTPInput /> should render 1`] = `
                 />
                 <View
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "backgroundColor": "hsla(218, 89%, 51%, 1)",
                         "bottom": 0,
                         "height": 1,
@@ -740,7 +746,7 @@ exports[`<OTPInput /> should render 1`] = `
                         "position": "absolute",
                         "right": 0,
                       },
-                      Object {
+                      {
                         "opacity": undefined,
                         "width": "undefined%",
                       },
@@ -754,8 +760,8 @@ exports[`<OTPInput /> should render 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "flexBasis": 0,
                 "flexGrow": 1,
                 "flexShrink": 1,
@@ -767,8 +773,8 @@ exports[`<OTPInput /> should render 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {},
+              [
+                {},
               ]
             }
           >
@@ -778,8 +784,8 @@ exports[`<OTPInput /> should render 1`] = `
               flexDirection="column"
               position="relative"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "display": "flex",
                     "flexDirection": "column",
                     "position": "relative",
@@ -796,14 +802,14 @@ exports[`<OTPInput /> should render 1`] = `
                 flexDirection="row"
                 position="relative"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "display": "flex",
                       "flexDirection": "row",
                       "position": "relative",
                       "width": "100%",
                     },
-                    Object {
+                    {
                       "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
                       "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
                       "borderBottomStyle": "solid",
@@ -821,11 +827,12 @@ exports[`<OTPInput /> should render 1`] = `
                   accessibilityLabel=" character 5"
                   accessibilityRequired={true}
                   accessibilityState={
-                    Object {
+                    {
                       "disabled": false,
                       "expanded": undefined,
                     }
                   }
+                  accessible={true}
                   autoCompleteType="sms-otp"
                   data-blade-component="styled-base-input"
                   editable={true}
@@ -843,8 +850,8 @@ exports[`<OTPInput /> should render 1`] = `
                   placeholder=""
                   secureTextEntry={false}
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "backgroundColor": "transparent",
                         "color": "hsla(216, 27%, 36%, 1)",
                         "flexBasis": 0,
@@ -875,8 +882,8 @@ exports[`<OTPInput /> should render 1`] = `
                 />
                 <View
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "backgroundColor": "hsla(218, 89%, 51%, 1)",
                         "bottom": 0,
                         "height": 1,
@@ -885,7 +892,7 @@ exports[`<OTPInput /> should render 1`] = `
                         "position": "absolute",
                         "right": 0,
                       },
-                      Object {
+                      {
                         "opacity": undefined,
                         "width": "undefined%",
                       },
@@ -899,8 +906,8 @@ exports[`<OTPInput /> should render 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "flexBasis": 0,
                 "flexGrow": 1,
                 "flexShrink": 1,
@@ -912,8 +919,8 @@ exports[`<OTPInput /> should render 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {},
+              [
+                {},
               ]
             }
           >
@@ -923,8 +930,8 @@ exports[`<OTPInput /> should render 1`] = `
               flexDirection="column"
               position="relative"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "display": "flex",
                     "flexDirection": "column",
                     "position": "relative",
@@ -941,14 +948,14 @@ exports[`<OTPInput /> should render 1`] = `
                 flexDirection="row"
                 position="relative"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "display": "flex",
                       "flexDirection": "row",
                       "position": "relative",
                       "width": "100%",
                     },
-                    Object {
+                    {
                       "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
                       "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
                       "borderBottomStyle": "solid",
@@ -966,11 +973,12 @@ exports[`<OTPInput /> should render 1`] = `
                   accessibilityLabel=" character 6"
                   accessibilityRequired={true}
                   accessibilityState={
-                    Object {
+                    {
                       "disabled": false,
                       "expanded": undefined,
                     }
                   }
+                  accessible={true}
                   autoCompleteType="sms-otp"
                   data-blade-component="styled-base-input"
                   editable={true}
@@ -988,8 +996,8 @@ exports[`<OTPInput /> should render 1`] = `
                   placeholder=""
                   secureTextEntry={false}
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "backgroundColor": "transparent",
                         "color": "hsla(216, 27%, 36%, 1)",
                         "flexBasis": 0,
@@ -1020,8 +1028,8 @@ exports[`<OTPInput /> should render 1`] = `
                 />
                 <View
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "backgroundColor": "hsla(218, 89%, 51%, 1)",
                         "bottom": 0,
                         "height": 1,
@@ -1030,7 +1038,7 @@ exports[`<OTPInput /> should render 1`] = `
                         "position": "absolute",
                         "right": 0,
                       },
-                      Object {
+                      {
                         "opacity": undefined,
                         "width": "undefined%",
                       },
@@ -1046,8 +1054,8 @@ exports[`<OTPInput /> should render 1`] = `
     <View
       data-blade-component="base-box"
       style={
-        Array [
-          Object {
+        [
+          {
             "marginLeft": 0,
           },
         ]
diff --git a/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.ssr.test.tsx.snap b/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.ssr.test.tsx.snap
index 412fab4a879..1cd5b1dfcb0 100644
--- a/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Input/OTPInput/__tests__/__snapshots__/OTPInput.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<OTPInput /> should have hidden input for form submissions 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"otp-input\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx etNGXF\\"><label for=\\"otp-undefined-input-undefined\\" style=\\"width:auto;flex-shrink:0;margin-right:16px\\" data-blade-component=\\"form-label\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bqWBik\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx eeqPab\\"><p class=\\"StyledBaseText-dVBfTO gaMIEc\\" data-blade-component=\\"text\\">Enter OTP</p><div data-blade-component=\\"visually-hidden\\" class=\\"VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw\\"><p class=\\"StyledBaseText-dVBfTO eIdQFo\\" data-blade-component=\\"text\\"></p></div></div></div></label><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx djEyfF\\"><input hidden=\\"\\" id=\\"otp-undefined-input-undefined\\" name=\\"otpInput\\" value=\\"\\" readonly=\\"\\"/><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx goISJX\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx edjBu\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseInputWrapper__StyledBaseInputWrapper-sc-27jk75-0 kRxJZq iWQtne\\"><input type=\\"text\\" name=\\"otpInput\\" required=\\"\\" inputMode=\\"decimal\\" autoComplete=\\"one-time-code\\" id=\\"otp-undefined-input-undefined-0-undefined-input-undefined\\" value=\\"\\" placeholder=\\"\\" data-blade-component=\\"styled-base-input\\" aria-required=\\"true\\" aria-disabled=\\"false\\" aria-invalid=\\"false\\" aria-describedby=\\"\\" aria-label=\\"Enter OTP character 1\\" class=\\"StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 jSWunf\\"/><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo\\"></div></div></div></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx kqrvPH\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx edjBu\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseInputWrapper__StyledBaseInputWrapper-sc-27jk75-0 kRxJZq iWQtne\\"><input type=\\"text\\" name=\\"otpInput\\" required=\\"\\" inputMode=\\"decimal\\" autoComplete=\\"one-time-code\\" id=\\"otp-undefined-input-undefined-1-undefined-input-undefined\\" value=\\"\\" placeholder=\\"\\" data-blade-component=\\"styled-base-input\\" aria-required=\\"true\\" aria-disabled=\\"false\\" aria-invalid=\\"false\\" aria-describedby=\\"\\" aria-label=\\" character 2\\" class=\\"StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 jSWunf\\"/><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo\\"></div></div></div></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx kqrvPH\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx edjBu\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseInputWrapper__StyledBaseInputWrapper-sc-27jk75-0 kRxJZq iWQtne\\"><input type=\\"text\\" name=\\"otpInput\\" required=\\"\\" inputMode=\\"decimal\\" autoComplete=\\"one-time-code\\" id=\\"otp-undefined-input-undefined-2-undefined-input-undefined\\" value=\\"\\" placeholder=\\"\\" data-blade-component=\\"styled-base-input\\" aria-required=\\"true\\" aria-disabled=\\"false\\" aria-invalid=\\"false\\" aria-describedby=\\"\\" aria-label=\\" character 3\\" class=\\"StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 jSWunf\\"/><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo\\"></div></div></div></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx kqrvPH\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx edjBu\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseInputWrapper__StyledBaseInputWrapper-sc-27jk75-0 kRxJZq iWQtne\\"><input type=\\"text\\" name=\\"otpInput\\" required=\\"\\" inputMode=\\"decimal\\" autoComplete=\\"one-time-code\\" id=\\"otp-undefined-input-undefined-3-undefined-input-undefined\\" value=\\"\\" placeholder=\\"\\" data-blade-component=\\"styled-base-input\\" aria-required=\\"true\\" aria-disabled=\\"false\\" aria-invalid=\\"false\\" aria-describedby=\\"\\" aria-label=\\" character 4\\" class=\\"StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 jSWunf\\"/><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo\\"></div></div></div></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx kqrvPH\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx edjBu\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseInputWrapper__StyledBaseInputWrapper-sc-27jk75-0 kRxJZq iWQtne\\"><input type=\\"text\\" name=\\"otpInput\\" required=\\"\\" inputMode=\\"decimal\\" autoComplete=\\"one-time-code\\" id=\\"otp-undefined-input-undefined-4-undefined-input-undefined\\" value=\\"\\" placeholder=\\"\\" data-blade-component=\\"styled-base-input\\" aria-required=\\"true\\" aria-disabled=\\"false\\" aria-invalid=\\"false\\" aria-describedby=\\"\\" aria-label=\\" character 5\\" class=\\"StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 jSWunf\\"/><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo\\"></div></div></div></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx kqrvPH\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx edjBu\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseInputWrapper__StyledBaseInputWrapper-sc-27jk75-0 kRxJZq iWQtne\\"><input type=\\"text\\" name=\\"otpInput\\" required=\\"\\" inputMode=\\"decimal\\" autoComplete=\\"one-time-code\\" id=\\"otp-undefined-input-undefined-5-undefined-input-undefined\\" value=\\"\\" placeholder=\\"\\" data-blade-component=\\"styled-base-input\\" aria-required=\\"true\\" aria-disabled=\\"false\\" aria-invalid=\\"false\\" aria-describedby=\\"\\" aria-label=\\" character 6\\" class=\\"StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 jSWunf\\"/><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo\\"></div></div></div></div></div></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx jgxKDg\\"></div></div></div>"`;
+exports[`<OTPInput /> should have hidden input for form submissions 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="otp-input" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx etNGXF"><label for="otp-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx bqWBik"><div data-blade-component="base-box" class="BaseBox-bmPWx eeqPab"><p class="StyledBaseText-dVBfTO gaMIEc" data-blade-component="text">Enter OTP</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text"></p></div></div></div></label><div data-blade-component="base-box" class="BaseBox-bmPWx djEyfF"><input hidden="" id="otp-undefined-input-undefined" name="otpInput" value="" readonly=""/><div data-blade-component="base-box" class="BaseBox-bmPWx goISJX"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx edjBu"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputWrapper__StyledBaseInputWrapper-sc-27jk75-0 kRxJZq iWQtne"><input type="text" name="otpInput" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-0-undefined-input-undefined" value="" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label="Enter OTP character 1" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 jSWunf"/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx kqrvPH"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx edjBu"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputWrapper__StyledBaseInputWrapper-sc-27jk75-0 kRxJZq iWQtne"><input type="text" name="otpInput" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-1-undefined-input-undefined" value="" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 2" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 jSWunf"/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx kqrvPH"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx edjBu"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputWrapper__StyledBaseInputWrapper-sc-27jk75-0 kRxJZq iWQtne"><input type="text" name="otpInput" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-2-undefined-input-undefined" value="" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 3" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 jSWunf"/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx kqrvPH"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx edjBu"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputWrapper__StyledBaseInputWrapper-sc-27jk75-0 kRxJZq iWQtne"><input type="text" name="otpInput" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-3-undefined-input-undefined" value="" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 4" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 jSWunf"/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx kqrvPH"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx edjBu"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputWrapper__StyledBaseInputWrapper-sc-27jk75-0 kRxJZq iWQtne"><input type="text" name="otpInput" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-4-undefined-input-undefined" value="" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 5" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 jSWunf"/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo"></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx kqrvPH"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx edjBu"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputWrapper__StyledBaseInputWrapper-sc-27jk75-0 kRxJZq iWQtne"><input type="text" name="otpInput" required="" inputMode="decimal" autoComplete="one-time-code" id="otp-undefined-input-undefined-5-undefined-input-undefined" value="" placeholder="" data-blade-component="styled-base-input" aria-required="true" aria-disabled="false" aria-invalid="false" aria-describedby="" aria-label=" character 6" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 jSWunf"/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo"></div></div></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx jgxKDg"></div></div></div>"`;
 
 exports[`<OTPInput /> should have hidden input for form submissions 2`] = `
 <div
diff --git a/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.native.test.tsx.snap b/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.native.test.tsx.snap
index 6d13dc21ea2..6fc8cdf22a9 100644
--- a/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.native.test.tsx.snap
+++ b/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<PasswordInput /> should render 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,8 +11,8 @@ exports[`<PasswordInput /> should render 1`] = `
   <View
     data-blade-component="password-input"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -22,8 +22,8 @@ exports[`<PasswordInput /> should render 1`] = `
       flexDirection="column"
       position="relative"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "position": "relative",
@@ -39,8 +39,8 @@ exports[`<PasswordInput /> should render 1`] = `
         flexDirection="row"
         justifyContent="space-between"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -53,8 +53,8 @@ exports[`<PasswordInput /> should render 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
                 "marginRight": 16,
               },
@@ -70,8 +70,8 @@ exports[`<PasswordInput /> should render 1`] = `
             gap="spacing.0"
             maxHeight="36px"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "display": "flex",
                   "flexDirection": "row",
@@ -83,6 +83,7 @@ exports[`<PasswordInput /> should render 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.subdued.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -92,8 +93,8 @@ exports[`<PasswordInput /> should render 1`] = `
               lineHeight={50}
               numberOfLines={2}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 18%, 45%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 12,
@@ -118,8 +119,8 @@ exports[`<PasswordInput /> should render 1`] = `
             <View
               data-blade-component="visually-hidden"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "borderColor": "black",
                     "borderStyle": "solid",
                     "borderWidth": 0,
@@ -145,6 +146,7 @@ exports[`<PasswordInput /> should render 1`] = `
               }
             >
               <Text
+                accessible={true}
                 color="surface.text.normal.lowContrast"
                 data-blade-component="text"
                 fontFamily="text"
@@ -153,8 +155,8 @@ exports[`<PasswordInput /> should render 1`] = `
                 fontWeight="regular"
                 lineHeight={100}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "hsla(217, 56%, 17%, 1)",
                       "fontFamily": "Lato",
                       "fontSize": 14,
@@ -186,14 +188,14 @@ exports[`<PasswordInput /> should render 1`] = `
         isDisabled={false}
         position="relative"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "position": "relative",
               "width": "100%",
             },
-            Object {
+            {
               "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
               "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
               "borderBottomStyle": "solid",
@@ -210,11 +212,12 @@ exports[`<PasswordInput /> should render 1`] = `
           accessibilityInvalid={false}
           accessibilityRequired={false}
           accessibilityState={
-            Object {
+            {
               "disabled": false,
               "expanded": undefined,
             }
           }
+          accessible={true}
           autoCapitalize="none"
           autoFocus={false}
           data-blade-component="styled-base-input"
@@ -241,8 +244,8 @@ exports[`<PasswordInput /> should render 1`] = `
           returnKeyType="done"
           secureTextEntry={true}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "color": "hsla(216, 27%, 36%, 1)",
                 "flexBasis": 0,
@@ -274,8 +277,8 @@ exports[`<PasswordInput /> should render 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -287,8 +290,8 @@ exports[`<PasswordInput /> should render 1`] = `
             data-blade-component="base-box"
             display="flex"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "flex",
                   "paddingRight": 12,
                 },
@@ -312,8 +315,8 @@ exports[`<PasswordInput /> should render 1`] = `
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "alignSelf": "center",
                   },
                 ]
@@ -333,15 +336,15 @@ exports[`<PasswordInput /> should render 1`] = `
                 minX={0}
                 minY={0}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "backgroundColor": "transparent",
                       "borderWidth": 0,
                     },
-                    Array [
-                      Object {},
+                    [
+                      {},
                     ],
-                    Object {
+                    {
                       "flex": 0,
                       "height": 16,
                       "width": 16,
@@ -355,7 +358,7 @@ exports[`<PasswordInput /> should render 1`] = `
                 <RNSVGGroup
                   fill={null}
                   propList={
-                    Array [
+                    [
                       "fill",
                     ]
                   }
@@ -366,7 +369,7 @@ exports[`<PasswordInput /> should render 1`] = `
                     fill={4288851646}
                     fillRule={0}
                     propList={
-                      Array [
+                      [
                         "fill",
                         "fillRule",
                       ]
@@ -378,7 +381,7 @@ exports[`<PasswordInput /> should render 1`] = `
                     fill={4288851646}
                     fillRule={0}
                     propList={
-                      Array [
+                      [
                         "fill",
                         "fillRule",
                       ]
@@ -391,8 +394,8 @@ exports[`<PasswordInput /> should render 1`] = `
         </View>
         <View
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(218, 89%, 51%, 1)",
                 "bottom": 0,
                 "height": 1,
@@ -401,7 +404,7 @@ exports[`<PasswordInput /> should render 1`] = `
                 "position": "absolute",
                 "right": 0,
               },
-              Object {
+              {
                 "opacity": undefined,
                 "width": "undefined%",
               },
@@ -413,8 +416,8 @@ exports[`<PasswordInput /> should render 1`] = `
     <View
       data-blade-component="base-box"
       style={
-        Array [
-          Object {
+        [
+          {
             "marginLeft": 0,
           },
         ]
@@ -426,8 +429,8 @@ exports[`<PasswordInput /> should render 1`] = `
         flexDirection="row"
         justifyContent="flex-end"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "flex-end",
diff --git a/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.ssr.test.tsx.snap b/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.ssr.test.tsx.snap
index b772681818f..a5dcdb6d9b3 100644
--- a/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Input/PasswordInput/__tests__/__snapshots__/PasswordInput.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<PasswordInput /> should display error validation state 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"password-input\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx edjBu\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fJyvvB\\"><label for=\\"password-field-undefined-input-undefined\\" style=\\"width:auto;flex-shrink:0;margin-right:16px\\" data-blade-component=\\"form-label\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bqWBik\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx eeqPab\\"><p class=\\"StyledBaseText-dVBfTO gaMIEc\\" data-blade-component=\\"text\\">Enter password</p><div data-blade-component=\\"visually-hidden\\" class=\\"VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw\\"><p class=\\"StyledBaseText-dVBfTO eIdQFo\\" data-blade-component=\\"text\\"></p></div></div></div></label></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseInputWrapper__StyledBaseInputWrapper-sc-27jk75-0 kRxJZq XzacR\\"><input type=\\"password\\" autoCapitalize=\\"none\\" enterKeyHint=\\"done\\" id=\\"password-field-undefined-input-undefined\\" data-blade-component=\\"styled-base-input\\" aria-required=\\"false\\" aria-disabled=\\"false\\" aria-invalid=\\"true\\" aria-describedby=\\"password-field-undefined-errortext-undefined\\" class=\\"StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 kwHTus\\"/><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fSbYvl\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx ZITjD\\"><button type=\\"button\\" aria-label=\\"Show password\\" data-blade-component=\\"icon-button\\" class=\\"StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 gvuEeM\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"16px\\" viewBox=\\"0 0 24 24\\" width=\\"16px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z\\" clip-rule=\\"evenodd\\" fill=\\"currentColor\\" fill-rule=\\"evenodd\\" data-blade-component=\\"svg-path\\"></path><path d=\\"M12 3C8.8711 3 6.22807 4.48937 4.23728 6.25113C2.24678 8.01264 0.822273 10.1194 0.105573 11.5528C-0.0351909 11.8343 -0.0351909 12.1657 0.105573 12.4472C0.822273 13.8806 2.24678 15.9874 4.23728 17.7489C6.22807 19.5106 8.8711 21 12 21C15.1289 21 17.7719 19.5106 19.7627 17.7489C21.7532 15.9874 23.1777 13.8806 23.8944 12.4472C24.0352 12.1657 24.0352 11.8343 23.8944 11.5528C23.1777 10.1194 21.7532 8.01264 19.7627 6.25113C17.7719 4.48937 15.1289 3 12 3ZM5.56272 16.2511C3.98954 14.8589 2.80913 13.2146 2.13142 12C2.80913 10.7854 3.98954 9.14106 5.56272 7.74887C7.3386 6.17729 9.5289 5 12 5C14.4711 5 16.6614 6.17729 18.4373 7.74887C20.0105 9.14106 21.1909 10.7854 21.8686 12C21.1909 13.2146 20.0105 14.8589 18.4373 16.2511C16.6614 17.8227 14.4711 19 12 19C9.5289 19 7.3386 17.8227 5.56272 16.2511Z\\" clip-rule=\\"evenodd\\" fill=\\"currentColor\\" fill-rule=\\"evenodd\\" data-blade-component=\\"svg-path\\"></path></svg></button></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo\\"></div></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx jgxKDg\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx XURfx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx gnjvtY\\"><span style=\\"word-break:break-all\\" data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fSbYvl\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"12px\\" viewBox=\\"0 0 24 24\\" width=\\"12px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z\\" fill=\\"hsla(8, 73%, 47%, 1)\\" data-blade-component=\\"svg-path\\"></path><path d=\\"M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z\\" fill=\\"hsla(8, 73%, 47%, 1)\\" data-blade-component=\\"svg-path\\"></path><path d=\\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z\\" clip-rule=\\"evenodd\\" fill=\\"hsla(8, 73%, 47%, 1)\\" fill-rule=\\"evenodd\\" data-blade-component=\\"svg-path\\"></path></svg><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx joUrH\\"></div><span class=\\"StyledBaseText-dVBfTO fRqtgA\\" id=\\"password-field-undefined-errortext-undefined\\" data-blade-component=\\"base-text\\">Error</span></span></div></div></div></div></div>"`;
+exports[`<PasswordInput /> should display error validation state 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="password-input" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx edjBu"><div data-blade-component="base-box" class="BaseBox-bmPWx fJyvvB"><label for="password-field-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx bqWBik"><div data-blade-component="base-box" class="BaseBox-bmPWx eeqPab"><p class="StyledBaseText-dVBfTO gaMIEc" data-blade-component="text">Enter password</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputWrapper__StyledBaseInputWrapper-sc-27jk75-0 kRxJZq XzacR"><input type="password" autoCapitalize="none" enterKeyHint="done" id="password-field-undefined-input-undefined" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="true" aria-describedby="password-field-undefined-errortext-undefined" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 kwHTus"/><div data-blade-component="base-box" class="BaseBox-bmPWx fSbYvl"><div data-blade-component="base-box" class="BaseBox-bmPWx ZITjD"><button type="button" aria-label="Show password" data-blade-component="icon-button" class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 gvuEeM"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path><path d="M12 3C8.8711 3 6.22807 4.48937 4.23728 6.25113C2.24678 8.01264 0.822273 10.1194 0.105573 11.5528C-0.0351909 11.8343 -0.0351909 12.1657 0.105573 12.4472C0.822273 13.8806 2.24678 15.9874 4.23728 17.7489C6.22807 19.5106 8.8711 21 12 21C15.1289 21 17.7719 19.5106 19.7627 17.7489C21.7532 15.9874 23.1777 13.8806 23.8944 12.4472C24.0352 12.1657 24.0352 11.8343 23.8944 11.5528C23.1777 10.1194 21.7532 8.01264 19.7627 6.25113C17.7719 4.48937 15.1289 3 12 3ZM5.56272 16.2511C3.98954 14.8589 2.80913 13.2146 2.13142 12C2.80913 10.7854 3.98954 9.14106 5.56272 7.74887C7.3386 6.17729 9.5289 5 12 5C14.4711 5 16.6614 6.17729 18.4373 7.74887C20.0105 9.14106 21.1909 10.7854 21.8686 12C21.1909 13.2146 20.0105 14.8589 18.4373 16.2511C16.6614 17.8227 14.4711 19 12 19C9.5289 19 7.3386 17.8227 5.56272 16.2511Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></button></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx jgxKDg"><div data-blade-component="base-box" class="BaseBox-bmPWx XURfx"><div data-blade-component="base-box" class="BaseBox-bmPWx gnjvtY"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fSbYvl"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(8, 73%, 47%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(8, 73%, 47%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(8, 73%, 47%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx joUrH"></div><span class="StyledBaseText-dVBfTO fRqtgA" id="password-field-undefined-errortext-undefined" data-blade-component="base-text">Error</span></span></div></div></div></div></div>"`;
 
 exports[`<PasswordInput /> should display error validation state 2`] = `
 <div
diff --git a/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.native.test.tsx.snap b/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.native.test.tsx.snap
index 03fc42b16f0..ff2f155bbd6 100644
--- a/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.native.test.tsx.snap
+++ b/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<TextArea /> should render 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,8 +11,8 @@ exports[`<TextArea /> should render 1`] = `
   <View
     data-blade-component="textarea"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -22,8 +22,8 @@ exports[`<TextArea /> should render 1`] = `
       flexDirection="column"
       position="relative"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "position": "relative",
@@ -40,8 +40,8 @@ exports[`<TextArea /> should render 1`] = `
         flexDirection="row"
         justifyContent="space-between"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "flex-start",
               "display": "flex",
               "flexDirection": "row",
@@ -55,8 +55,8 @@ exports[`<TextArea /> should render 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
                 "marginRight": 16,
               },
@@ -72,8 +72,8 @@ exports[`<TextArea /> should render 1`] = `
             gap="spacing.0"
             maxHeight="36px"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "display": "flex",
                   "flexDirection": "row",
@@ -85,6 +85,7 @@ exports[`<TextArea /> should render 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.subdued.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -94,8 +95,8 @@ exports[`<TextArea /> should render 1`] = `
               lineHeight={50}
               numberOfLines={2}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 18%, 45%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 12,
@@ -120,8 +121,8 @@ exports[`<TextArea /> should render 1`] = `
             <View
               data-blade-component="visually-hidden"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "borderColor": "black",
                     "borderStyle": "solid",
                     "borderWidth": 0,
@@ -147,6 +148,7 @@ exports[`<TextArea /> should render 1`] = `
               }
             >
               <Text
+                accessible={true}
                 color="surface.text.normal.lowContrast"
                 data-blade-component="text"
                 fontFamily="text"
@@ -155,8 +157,8 @@ exports[`<TextArea /> should render 1`] = `
                 fontWeight="regular"
                 lineHeight={100}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "hsla(217, 56%, 17%, 1)",
                       "fontFamily": "Lato",
                       "fontSize": 14,
@@ -188,15 +190,15 @@ exports[`<TextArea /> should render 1`] = `
         flexDirection="row"
         position="relative"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "flex-start",
               "display": "flex",
               "flexDirection": "row",
               "position": "relative",
               "width": "100%",
             },
-            Object {
+            {
               "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
               "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
               "borderBottomStyle": "solid",
@@ -213,11 +215,12 @@ exports[`<TextArea /> should render 1`] = `
           accessibilityInvalid={false}
           accessibilityRequired={false}
           accessibilityState={
-            Object {
+            {
               "disabled": false,
               "expanded": undefined,
             }
           }
+          accessible={true}
           data-blade-component="styled-base-input"
           editable={true}
           id="textarea-1-input-2"
@@ -235,8 +238,8 @@ exports[`<TextArea /> should render 1`] = `
           onSubmitEditing={[Function]}
           secureTextEntry={false}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "color": "hsla(216, 27%, 36%, 1)",
                 "flexBasis": 0,
@@ -264,8 +267,8 @@ exports[`<TextArea /> should render 1`] = `
         />
         <View
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(218, 89%, 51%, 1)",
                 "bottom": 0,
                 "height": 1,
@@ -274,7 +277,7 @@ exports[`<TextArea /> should render 1`] = `
                 "position": "absolute",
                 "right": 0,
               },
-              Object {
+              {
                 "opacity": undefined,
                 "width": "undefined%",
               },
@@ -286,8 +289,8 @@ exports[`<TextArea /> should render 1`] = `
     <View
       data-blade-component="base-box"
       style={
-        Array [
-          Object {
+        [
+          {
             "marginLeft": 0,
           },
         ]
@@ -299,8 +302,8 @@ exports[`<TextArea /> should render 1`] = `
         flexDirection="row"
         justifyContent="flex-end"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "flex-end",
diff --git a/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.ssr.test.tsx.snap b/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.ssr.test.tsx.snap
index 565f8e47948..ea77f858065 100644
--- a/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Input/TextArea/__tests__/__snapshots__/TextArea.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<TextArea /> should render TextArea on server and have autofocus on client 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"textarea\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx edjBu\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx grflbK\\"><label for=\\"textarea-undefined-input-undefined\\" style=\\"width:auto;flex-shrink:0;margin-right:16px\\" data-blade-component=\\"form-label\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bqWBik\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx eeqPab\\"><p class=\\"StyledBaseText-dVBfTO gaMIEc\\" data-blade-component=\\"text\\">Enter name</p><div data-blade-component=\\"visually-hidden\\" class=\\"VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw\\"><p class=\\"StyledBaseText-dVBfTO eIdQFo\\" data-blade-component=\\"text\\"></p></div></div></div></label></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseInputWrapper__StyledBaseInputWrapper-sc-27jk75-0 bsJDmb iWQtne\\"><textarea type=\\"text\\" rows=\\"2\\" id=\\"textarea-undefined-input-undefined\\" autofocus=\\"\\" data-blade-component=\\"styled-base-input\\" aria-required=\\"false\\" aria-disabled=\\"false\\" aria-invalid=\\"false\\" aria-describedby=\\"\\" class=\\"StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 jQfoEc\\"></textarea><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo\\"></div></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx jgxKDg\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx ctznZr\\"></div></div></div></div>"`;
+exports[`<TextArea /> should render TextArea on server and have autofocus on client 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="textarea" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx edjBu"><div data-blade-component="base-box" class="BaseBox-bmPWx grflbK"><label for="textarea-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx bqWBik"><div data-blade-component="base-box" class="BaseBox-bmPWx eeqPab"><p class="StyledBaseText-dVBfTO gaMIEc" data-blade-component="text">Enter name</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputWrapper__StyledBaseInputWrapper-sc-27jk75-0 bsJDmb iWQtne"><textarea type="text" rows="2" id="textarea-undefined-input-undefined" autofocus="" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 jQfoEc"></textarea><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx jgxKDg"><div data-blade-component="base-box" class="BaseBox-bmPWx ctznZr"></div></div></div></div>"`;
 
 exports[`<TextArea /> should render TextArea on server and have autofocus on client 2`] = `
 <div
diff --git a/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.native.test.tsx.snap b/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.native.test.tsx.snap
index 771f271b39a..77a33373b68 100644
--- a/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.native.test.tsx.snap
+++ b/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<TextInput /> should render 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,8 +11,8 @@ exports[`<TextInput /> should render 1`] = `
   <View
     data-blade-component="textinput"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -22,8 +22,8 @@ exports[`<TextInput /> should render 1`] = `
       flexDirection="column"
       position="relative"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "position": "relative",
@@ -39,8 +39,8 @@ exports[`<TextInput /> should render 1`] = `
         flexDirection="row"
         justifyContent="space-between"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -53,8 +53,8 @@ exports[`<TextInput /> should render 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
                 "marginRight": 16,
               },
@@ -70,8 +70,8 @@ exports[`<TextInput /> should render 1`] = `
             gap="spacing.0"
             maxHeight="36px"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "display": "flex",
                   "flexDirection": "row",
@@ -83,6 +83,7 @@ exports[`<TextInput /> should render 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.subdued.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -92,8 +93,8 @@ exports[`<TextInput /> should render 1`] = `
               lineHeight={50}
               numberOfLines={2}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 18%, 45%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 12,
@@ -118,8 +119,8 @@ exports[`<TextInput /> should render 1`] = `
             <View
               data-blade-component="visually-hidden"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "borderColor": "black",
                     "borderStyle": "solid",
                     "borderWidth": 0,
@@ -145,6 +146,7 @@ exports[`<TextInput /> should render 1`] = `
               }
             >
               <Text
+                accessible={true}
                 color="surface.text.normal.lowContrast"
                 data-blade-component="text"
                 fontFamily="text"
@@ -153,8 +155,8 @@ exports[`<TextInput /> should render 1`] = `
                 fontWeight="regular"
                 lineHeight={100}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "hsla(217, 56%, 17%, 1)",
                       "fontFamily": "Lato",
                       "fontSize": 14,
@@ -185,14 +187,14 @@ exports[`<TextInput /> should render 1`] = `
         flexDirection="row"
         position="relative"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "position": "relative",
               "width": "100%",
             },
-            Object {
+            {
               "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
               "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
               "borderBottomStyle": "solid",
@@ -209,11 +211,12 @@ exports[`<TextInput /> should render 1`] = `
           accessibilityInvalid={false}
           accessibilityRequired={false}
           accessibilityState={
-            Object {
+            {
               "disabled": false,
               "expanded": undefined,
             }
           }
+          accessible={true}
           autoCompleteType="off"
           data-blade-component="styled-base-input"
           editable={true}
@@ -232,8 +235,8 @@ exports[`<TextInput /> should render 1`] = `
           returnKeyType="default"
           secureTextEntry={false}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "color": "hsla(216, 27%, 36%, 1)",
                 "flexBasis": 0,
@@ -262,8 +265,8 @@ exports[`<TextInput /> should render 1`] = `
         />
         <View
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(218, 89%, 51%, 1)",
                 "bottom": 0,
                 "height": 1,
@@ -272,7 +275,7 @@ exports[`<TextInput /> should render 1`] = `
                 "position": "absolute",
                 "right": 0,
               },
-              Object {
+              {
                 "opacity": undefined,
                 "width": "undefined%",
               },
@@ -284,8 +287,8 @@ exports[`<TextInput /> should render 1`] = `
     <View
       data-blade-component="base-box"
       style={
-        Array [
-          Object {
+        [
+          {
             "marginLeft": 0,
           },
         ]
@@ -297,8 +300,8 @@ exports[`<TextInput /> should render 1`] = `
         flexDirection="row"
         justifyContent="flex-end"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "flex-end",
@@ -314,7 +317,7 @@ exports[`<TextInput /> should render 1`] = `
 exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -322,8 +325,8 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
   <View
     data-blade-component="textinput"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -333,8 +336,8 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
       flexDirection="column"
       position="relative"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "position": "relative",
@@ -350,8 +353,8 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
         flexDirection="row"
         justifyContent="space-between"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -364,8 +367,8 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
                 "marginRight": 16,
               },
@@ -381,8 +384,8 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
             gap="spacing.0"
             maxHeight="36px"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "display": "flex",
                   "flexDirection": "row",
@@ -394,6 +397,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.subdued.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -403,8 +407,8 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
               lineHeight={50}
               numberOfLines={2}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 18%, 45%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 12,
@@ -429,8 +433,8 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
             <View
               data-blade-component="visually-hidden"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "borderColor": "black",
                     "borderStyle": "solid",
                     "borderWidth": 0,
@@ -456,6 +460,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
               }
             >
               <Text
+                accessible={true}
                 color="surface.text.normal.lowContrast"
                 data-blade-component="text"
                 fontFamily="text"
@@ -464,8 +469,8 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
                 fontWeight="regular"
                 lineHeight={100}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "hsla(217, 56%, 17%, 1)",
                       "fontFamily": "Lato",
                       "fontSize": 14,
@@ -496,14 +501,14 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
         flexDirection="row"
         position="relative"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "position": "relative",
               "width": "100%",
             },
-            Object {
+            {
               "backgroundColor": "hsla(216, 15%, 54%, 0.09)",
               "borderBottomColor": "hsla(216, 15%, 54%, 0.18)",
               "borderBottomStyle": "solid",
@@ -521,8 +526,8 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -534,8 +539,8 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
             data-blade-component="base-box"
             display="flex"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "flex",
                   "paddingLeft": 12,
                 },
@@ -556,15 +561,15 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
               minX={0}
               minY={0}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "transparent",
                     "borderWidth": 0,
                   },
-                  Array [
-                    Object {},
+                  [
+                    {},
                   ],
-                  Object {
+                  {
                     "flex": 0,
                     "height": 16,
                     "width": 16,
@@ -578,7 +583,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
               <RNSVGGroup
                 fill={null}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -587,7 +592,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
                   d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
                   fill={4282603381}
                   propList={
-                    Array [
+                    [
                       "fill",
                     ]
                   }
@@ -596,7 +601,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
                   d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
                   fill={4282603381}
                   propList={
-                    Array [
+                    [
                       "fill",
                     ]
                   }
@@ -607,7 +612,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
                   fill={4282603381}
                   fillRule={0}
                   propList={
-                    Array [
+                    [
                       "fill",
                       "fillRule",
                     ]
@@ -619,14 +624,15 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "paddingLeft": 4,
                 },
               ]
             }
           >
             <Text
+              accessible={true}
               color="surface.text.subtle.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -635,8 +641,8 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
               fontWeight="regular"
               lineHeight={100}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(216, 27%, 36%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 14,
@@ -665,11 +671,12 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
           accessibilityInvalid={false}
           accessibilityRequired={false}
           accessibilityState={
-            Object {
+            {
               "disabled": false,
               "expanded": undefined,
             }
           }
+          accessible={true}
           autoCapitalize="none"
           autoCompleteType="off"
           data-blade-component="styled-base-input"
@@ -692,8 +699,8 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
           returnKeyType="go"
           secureTextEntry={false}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "color": "hsla(216, 27%, 36%, 1)",
                 "flexBasis": 0,
@@ -727,8 +734,8 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -739,14 +746,15 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "paddingRight": 12,
                 },
               ]
             }
           >
             <Text
+              accessible={true}
               color="surface.text.subtle.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -755,8 +763,8 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
               fontWeight="regular"
               lineHeight={100}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(216, 27%, 36%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 14,
@@ -782,8 +790,8 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
         </View>
         <View
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(218, 89%, 51%, 1)",
                 "bottom": 0,
                 "height": 1,
@@ -792,7 +800,7 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
                 "position": "absolute",
                 "right": 0,
               },
-              Object {
+              {
                 "opacity": undefined,
                 "width": "undefined%",
               },
@@ -804,8 +812,8 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
     <View
       data-blade-component="base-box"
       style={
-        Array [
-          Object {
+        [
+          {
             "marginLeft": 0,
           },
         ]
@@ -817,8 +825,8 @@ exports[`<TextInput /> should render with icon, prefix, suffix 1`] = `
         flexDirection="row"
         justifyContent="flex-end"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "flex-end",
diff --git a/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.ssr.test.tsx.snap b/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.ssr.test.tsx.snap
index 09ebff9a60b..c2d59c0edef 100644
--- a/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Input/TextInput/__tests__/__snapshots__/TextInput.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<TextInput /> should render TextInput 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"textinput\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx edjBu\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fJyvvB\\"><label for=\\"textinput-undefined-input-undefined\\" style=\\"width:auto;flex-shrink:0;margin-right:16px\\" data-blade-component=\\"form-label\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bqWBik\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx eeqPab\\"><p class=\\"StyledBaseText-dVBfTO gaMIEc\\" data-blade-component=\\"text\\">Enter company website</p><div data-blade-component=\\"visually-hidden\\" class=\\"VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw\\"><p class=\\"StyledBaseText-dVBfTO eIdQFo\\" data-blade-component=\\"text\\"></p></div></div></div></label></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseInputWrapper__StyledBaseInputWrapper-sc-27jk75-0 kRxJZq iWQtne\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fSbYvl\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx eCxLQc\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"16px\\" viewBox=\\"0 0 24 24\\" width=\\"16px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z\\" fill=\\"hsla(216, 27%, 36%, 1)\\" data-blade-component=\\"svg-path\\"></path><path d=\\"M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z\\" fill=\\"hsla(216, 27%, 36%, 1)\\" data-blade-component=\\"svg-path\\"></path><path d=\\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z\\" clip-rule=\\"evenodd\\" fill=\\"hsla(216, 27%, 36%, 1)\\" fill-rule=\\"evenodd\\" data-blade-component=\\"svg-path\\"></path></svg></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx iAPQgj\\"><p class=\\"StyledBaseText-dVBfTO ktUwvA\\" data-blade-component=\\"text\\">https://</p></div></div><input type=\\"url\\" inputMode=\\"url\\" autoCapitalize=\\"none\\" enterKeyHint=\\"go\\" autoComplete=\\"off\\" id=\\"textinput-undefined-input-undefined\\" placeholder=\\"something\\" prefix=\\"https://\\" data-blade-component=\\"styled-base-input\\" aria-required=\\"false\\" aria-disabled=\\"false\\" aria-invalid=\\"false\\" aria-describedby=\\"\\" class=\\"StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 ihQHHL\\"/><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fSbYvl\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx kZoXjP\\"><p class=\\"StyledBaseText-dVBfTO ktUwvA\\" data-blade-component=\\"text\\">.com</p></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo\\"></div></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx jgxKDg\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx ctznZr\\"></div></div></div></div>"`;
+exports[`<TextInput /> should render TextInput 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="textinput" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx edjBu"><div data-blade-component="base-box" class="BaseBox-bmPWx fJyvvB"><label for="textinput-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx bqWBik"><div data-blade-component="base-box" class="BaseBox-bmPWx eeqPab"><p class="StyledBaseText-dVBfTO gaMIEc" data-blade-component="text">Enter company website</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputWrapper__StyledBaseInputWrapper-sc-27jk75-0 kRxJZq iWQtne"><div data-blade-component="base-box" class="BaseBox-bmPWx fSbYvl"><div data-blade-component="base-box" class="BaseBox-bmPWx eCxLQc"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(216, 27%, 36%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(216, 27%, 36%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(216, 27%, 36%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx iAPQgj"><p class="StyledBaseText-dVBfTO ktUwvA" data-blade-component="text">https://</p></div></div><input type="url" inputMode="url" autoCapitalize="none" enterKeyHint="go" autoComplete="off" id="textinput-undefined-input-undefined" placeholder="something" prefix="https://" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 ihQHHL"/><div data-blade-component="base-box" class="BaseBox-bmPWx fSbYvl"><div data-blade-component="base-box" class="BaseBox-bmPWx kZoXjP"><p class="StyledBaseText-dVBfTO ktUwvA" data-blade-component="text">.com</p></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  dGtNgo"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx jgxKDg"><div data-blade-component="base-box" class="BaseBox-bmPWx ctznZr"></div></div></div></div>"`;
 
 exports[`<TextInput /> should render TextInput 2`] = `
 <div
diff --git a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap
index 7b4af0a0a8f..c5fcb4137c6 100644
--- a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap
+++ b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<BaseLink /> should change the link to a visited state after click 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,7 +11,7 @@ exports[`<BaseLink /> should change the link to a visited state after click 1`]
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -28,8 +28,8 @@ exports[`<BaseLink /> should change the link to a visited state after click 1`]
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -54,8 +54,8 @@ exports[`<BaseLink /> should change the link to a visited state after click 1`]
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -64,14 +64,15 @@ exports[`<BaseLink /> should change the link to a visited state after click 1`]
       }
     >
       <Text
+        accessible={true}
         color="action.text.link.visited"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(268, 100%, 79%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -104,7 +105,7 @@ exports[`<BaseLink /> should change the link to a visited state after click 1`]
 exports[`<BaseLink /> should not change the button to a visited state after click 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -112,7 +113,7 @@ exports[`<BaseLink /> should not change the button to a visited state after clic
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -129,8 +130,8 @@ exports[`<BaseLink /> should not change the button to a visited state after clic
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -155,8 +156,8 @@ exports[`<BaseLink /> should not change the button to a visited state after clic
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -165,14 +166,15 @@ exports[`<BaseLink /> should not change the button to a visited state after clic
       }
     >
       <Text
+        accessible={true}
         color="action.text.link.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(218, 89%, 51%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -205,7 +207,7 @@ exports[`<BaseLink /> should not change the button to a visited state after clic
 exports[`<BaseLink /> should render button variant of link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -213,7 +215,7 @@ exports[`<BaseLink /> should render button variant of link 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -230,8 +232,8 @@ exports[`<BaseLink /> should render button variant of link 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -256,8 +258,8 @@ exports[`<BaseLink /> should render button variant of link 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -266,14 +268,15 @@ exports[`<BaseLink /> should render button variant of link 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="action.text.link.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(218, 89%, 51%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -306,7 +309,7 @@ exports[`<BaseLink /> should render button variant of link 1`] = `
 exports[`<BaseLink /> should render disabled button variant of link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -314,7 +317,7 @@ exports[`<BaseLink /> should render disabled button variant of link 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": true,
       }
     }
@@ -331,8 +334,8 @@ exports[`<BaseLink /> should render disabled button variant of link 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -357,8 +360,8 @@ exports[`<BaseLink /> should render disabled button variant of link 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -367,14 +370,15 @@ exports[`<BaseLink /> should render disabled button variant of link 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="action.text.link.disabled"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(218, 19%, 81%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -407,7 +411,7 @@ exports[`<BaseLink /> should render disabled button variant of link 1`] = `
 exports[`<BaseLink /> should render disabled information intent high contrast link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -415,7 +419,7 @@ exports[`<BaseLink /> should render disabled information intent high contrast li
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -432,8 +436,8 @@ exports[`<BaseLink /> should render disabled information intent high contrast li
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -458,8 +462,8 @@ exports[`<BaseLink /> should render disabled information intent high contrast li
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -468,14 +472,15 @@ exports[`<BaseLink /> should render disabled information intent high contrast li
       }
     >
       <Text
+        accessible={true}
         color="feedback.information.action.text.link.default.highContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(180, 100%, 97%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -508,7 +513,7 @@ exports[`<BaseLink /> should render disabled information intent high contrast li
 exports[`<BaseLink /> should render disabled information intent low contrast link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -516,7 +521,7 @@ exports[`<BaseLink /> should render disabled information intent low contrast lin
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -533,8 +538,8 @@ exports[`<BaseLink /> should render disabled information intent low contrast lin
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -559,8 +564,8 @@ exports[`<BaseLink /> should render disabled information intent low contrast lin
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -569,14 +574,15 @@ exports[`<BaseLink /> should render disabled information intent low contrast lin
       }
     >
       <Text
+        accessible={true}
         color="feedback.information.action.text.link.default.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(195, 100%, 31%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -609,7 +615,7 @@ exports[`<BaseLink /> should render disabled information intent low contrast lin
 exports[`<BaseLink /> should render disabled negative intent high contrast link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -617,7 +623,7 @@ exports[`<BaseLink /> should render disabled negative intent high contrast link
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -634,8 +640,8 @@ exports[`<BaseLink /> should render disabled negative intent high contrast link
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -660,8 +666,8 @@ exports[`<BaseLink /> should render disabled negative intent high contrast link
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -670,14 +676,15 @@ exports[`<BaseLink /> should render disabled negative intent high contrast link
       }
     >
       <Text
+        accessible={true}
         color="feedback.negative.action.text.link.default.highContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 100%, 97%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -710,7 +717,7 @@ exports[`<BaseLink /> should render disabled negative intent high contrast link
 exports[`<BaseLink /> should render disabled negative intent low contrast link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -718,7 +725,7 @@ exports[`<BaseLink /> should render disabled negative intent low contrast link 1
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -735,8 +742,8 @@ exports[`<BaseLink /> should render disabled negative intent low contrast link 1
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -761,8 +768,8 @@ exports[`<BaseLink /> should render disabled negative intent low contrast link 1
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -771,14 +778,15 @@ exports[`<BaseLink /> should render disabled negative intent low contrast link 1
       }
     >
       <Text
+        accessible={true}
         color="feedback.negative.action.text.link.default.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(8, 73%, 47%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -811,7 +819,7 @@ exports[`<BaseLink /> should render disabled negative intent low contrast link 1
 exports[`<BaseLink /> should render disabled neutral intent high contrast link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -819,7 +827,7 @@ exports[`<BaseLink /> should render disabled neutral intent high contrast link 1
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -836,8 +844,8 @@ exports[`<BaseLink /> should render disabled neutral intent high contrast link 1
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -862,8 +870,8 @@ exports[`<BaseLink /> should render disabled neutral intent high contrast link 1
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -872,14 +880,15 @@ exports[`<BaseLink /> should render disabled neutral intent high contrast link 1
       }
     >
       <Text
+        accessible={true}
         color="feedback.neutral.action.text.link.default.highContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(220, 27%, 98%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -912,7 +921,7 @@ exports[`<BaseLink /> should render disabled neutral intent high contrast link 1
 exports[`<BaseLink /> should render disabled neutral intent low contrast link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -920,7 +929,7 @@ exports[`<BaseLink /> should render disabled neutral intent low contrast link 1`
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -937,8 +946,8 @@ exports[`<BaseLink /> should render disabled neutral intent low contrast link 1`
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -963,8 +972,8 @@ exports[`<BaseLink /> should render disabled neutral intent low contrast link 1`
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -973,14 +982,15 @@ exports[`<BaseLink /> should render disabled neutral intent low contrast link 1`
       }
     >
       <Text
+        accessible={true}
         color="feedback.neutral.action.text.link.default.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(216, 27%, 36%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -1013,7 +1023,7 @@ exports[`<BaseLink /> should render disabled neutral intent low contrast link 1`
 exports[`<BaseLink /> should render disabled notice intent high contrast link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1021,7 +1031,7 @@ exports[`<BaseLink /> should render disabled notice intent high contrast link 1`
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -1038,8 +1048,8 @@ exports[`<BaseLink /> should render disabled notice intent high contrast link 1`
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -1064,8 +1074,8 @@ exports[`<BaseLink /> should render disabled notice intent high contrast link 1`
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -1074,14 +1084,15 @@ exports[`<BaseLink /> should render disabled notice intent high contrast link 1`
       }
     >
       <Text
+        accessible={true}
         color="feedback.notice.action.text.link.default.highContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(32, 100%, 94%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -1114,7 +1125,7 @@ exports[`<BaseLink /> should render disabled notice intent high contrast link 1`
 exports[`<BaseLink /> should render disabled notice intent low contrast link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1122,7 +1133,7 @@ exports[`<BaseLink /> should render disabled notice intent low contrast link 1`]
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -1139,8 +1150,8 @@ exports[`<BaseLink /> should render disabled notice intent low contrast link 1`]
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -1165,8 +1176,8 @@ exports[`<BaseLink /> should render disabled notice intent low contrast link 1`]
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -1175,14 +1186,15 @@ exports[`<BaseLink /> should render disabled notice intent low contrast link 1`]
       }
     >
       <Text
+        accessible={true}
         color="feedback.notice.action.text.link.default.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(38, 97%, 38%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -1215,7 +1227,7 @@ exports[`<BaseLink /> should render disabled notice intent low contrast link 1`]
 exports[`<BaseLink /> should render disabled positive intent high contrast link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1223,7 +1235,7 @@ exports[`<BaseLink /> should render disabled positive intent high contrast link
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -1240,8 +1252,8 @@ exports[`<BaseLink /> should render disabled positive intent high contrast link
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -1266,8 +1278,8 @@ exports[`<BaseLink /> should render disabled positive intent high contrast link
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -1276,14 +1288,15 @@ exports[`<BaseLink /> should render disabled positive intent high contrast link
       }
     >
       <Text
+        accessible={true}
         color="feedback.positive.action.text.link.default.highContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(107, 100%, 96%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -1316,7 +1329,7 @@ exports[`<BaseLink /> should render disabled positive intent high contrast link
 exports[`<BaseLink /> should render disabled positive intent low contrast link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1324,7 +1337,7 @@ exports[`<BaseLink /> should render disabled positive intent low contrast link 1
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -1341,8 +1354,8 @@ exports[`<BaseLink /> should render disabled positive intent low contrast link 1
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -1367,8 +1380,8 @@ exports[`<BaseLink /> should render disabled positive intent low contrast link 1
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -1377,14 +1390,15 @@ exports[`<BaseLink /> should render disabled positive intent low contrast link 1
       }
     >
       <Text
+        accessible={true}
         color="feedback.positive.action.text.link.default.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(160, 100%, 26%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -1417,7 +1431,7 @@ exports[`<BaseLink /> should render disabled positive intent low contrast link 1
 exports[`<BaseLink /> should render icon only link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1425,7 +1439,7 @@ exports[`<BaseLink /> should render icon only link 1`] = `
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -1442,8 +1456,8 @@ exports[`<BaseLink /> should render icon only link 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -1468,8 +1482,8 @@ exports[`<BaseLink /> should render icon only link 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -1482,8 +1496,8 @@ exports[`<BaseLink /> should render icon only link 1`] = `
         data-blade-component="base-box"
         display="flex"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "paddingRight": 0,
@@ -1505,15 +1519,15 @@ exports[`<BaseLink /> should render icon only link 1`] = `
           minX={0}
           minY={0}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "borderWidth": 0,
               },
-              Array [
-                Object {},
+              [
+                {},
               ],
-              Object {
+              {
                 "flex": 0,
                 "height": 16,
                 "width": 16,
@@ -1527,7 +1541,7 @@ exports[`<BaseLink /> should render icon only link 1`] = `
           <RNSVGGroup
             fill={null}
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
@@ -1536,7 +1550,7 @@ exports[`<BaseLink /> should render icon only link 1`] = `
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
               fill={4279461105}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -1545,7 +1559,7 @@ exports[`<BaseLink /> should render icon only link 1`] = `
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
               fill={4279461105}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -1556,7 +1570,7 @@ exports[`<BaseLink /> should render icon only link 1`] = `
               fill={4279461105}
               fillRule={0}
               propList={
-                Array [
+                [
                   "fill",
                   "fillRule",
                 ]
@@ -1566,14 +1580,15 @@ exports[`<BaseLink /> should render icon only link 1`] = `
         </RNSVGSvgView>
       </View>
       <Text
+        accessible={true}
         color="action.text.link.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(218, 89%, 51%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -1604,7 +1619,7 @@ exports[`<BaseLink /> should render icon only link 1`] = `
 exports[`<BaseLink /> should render information intent high contrast link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1612,7 +1627,7 @@ exports[`<BaseLink /> should render information intent high contrast link 1`] =
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -1629,8 +1644,8 @@ exports[`<BaseLink /> should render information intent high contrast link 1`] =
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -1655,8 +1670,8 @@ exports[`<BaseLink /> should render information intent high contrast link 1`] =
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -1665,14 +1680,15 @@ exports[`<BaseLink /> should render information intent high contrast link 1`] =
       }
     >
       <Text
+        accessible={true}
         color="feedback.information.action.text.link.default.highContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(180, 100%, 97%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -1705,7 +1721,7 @@ exports[`<BaseLink /> should render information intent high contrast link 1`] =
 exports[`<BaseLink /> should render information intent low contrast link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1713,7 +1729,7 @@ exports[`<BaseLink /> should render information intent low contrast link 1`] = `
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -1730,8 +1746,8 @@ exports[`<BaseLink /> should render information intent low contrast link 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -1756,8 +1772,8 @@ exports[`<BaseLink /> should render information intent low contrast link 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -1766,14 +1782,15 @@ exports[`<BaseLink /> should render information intent low contrast link 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="feedback.information.action.text.link.default.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(195, 100%, 31%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -1806,7 +1823,7 @@ exports[`<BaseLink /> should render information intent low contrast link 1`] = `
 exports[`<BaseLink /> should render link with default properties 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1814,7 +1831,7 @@ exports[`<BaseLink /> should render link with default properties 1`] = `
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -1831,8 +1848,8 @@ exports[`<BaseLink /> should render link with default properties 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -1857,8 +1874,8 @@ exports[`<BaseLink /> should render link with default properties 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -1867,14 +1884,15 @@ exports[`<BaseLink /> should render link with default properties 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="action.text.link.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(218, 89%, 51%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -1907,7 +1925,7 @@ exports[`<BaseLink /> should render link with default properties 1`] = `
 exports[`<BaseLink /> should render link with icon with default iconPosition 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1915,7 +1933,7 @@ exports[`<BaseLink /> should render link with icon with default iconPosition 1`]
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -1932,8 +1950,8 @@ exports[`<BaseLink /> should render link with icon with default iconPosition 1`]
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -1958,8 +1976,8 @@ exports[`<BaseLink /> should render link with icon with default iconPosition 1`]
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -1972,8 +1990,8 @@ exports[`<BaseLink /> should render link with icon with default iconPosition 1`]
         data-blade-component="base-box"
         display="flex"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "paddingRight": 4,
@@ -1995,15 +2013,15 @@ exports[`<BaseLink /> should render link with icon with default iconPosition 1`]
           minX={0}
           minY={0}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "borderWidth": 0,
               },
-              Array [
-                Object {},
+              [
+                {},
               ],
-              Object {
+              {
                 "flex": 0,
                 "height": 16,
                 "width": 16,
@@ -2017,7 +2035,7 @@ exports[`<BaseLink /> should render link with icon with default iconPosition 1`]
           <RNSVGGroup
             fill={null}
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
@@ -2026,7 +2044,7 @@ exports[`<BaseLink /> should render link with icon with default iconPosition 1`]
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
               fill={4279461105}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -2035,7 +2053,7 @@ exports[`<BaseLink /> should render link with icon with default iconPosition 1`]
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
               fill={4279461105}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -2046,7 +2064,7 @@ exports[`<BaseLink /> should render link with icon with default iconPosition 1`]
               fill={4279461105}
               fillRule={0}
               propList={
-                Array [
+                [
                   "fill",
                   "fillRule",
                 ]
@@ -2056,14 +2074,15 @@ exports[`<BaseLink /> should render link with icon with default iconPosition 1`]
         </RNSVGSvgView>
       </View>
       <Text
+        accessible={true}
         color="action.text.link.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(218, 89%, 51%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -2096,7 +2115,7 @@ exports[`<BaseLink /> should render link with icon with default iconPosition 1`]
 exports[`<BaseLink /> should render link with icon with left iconPosition 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2104,7 +2123,7 @@ exports[`<BaseLink /> should render link with icon with left iconPosition 1`] =
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -2121,8 +2140,8 @@ exports[`<BaseLink /> should render link with icon with left iconPosition 1`] =
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -2147,8 +2166,8 @@ exports[`<BaseLink /> should render link with icon with left iconPosition 1`] =
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -2161,8 +2180,8 @@ exports[`<BaseLink /> should render link with icon with left iconPosition 1`] =
         data-blade-component="base-box"
         display="flex"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "paddingRight": 4,
@@ -2184,15 +2203,15 @@ exports[`<BaseLink /> should render link with icon with left iconPosition 1`] =
           minX={0}
           minY={0}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "borderWidth": 0,
               },
-              Array [
-                Object {},
+              [
+                {},
               ],
-              Object {
+              {
                 "flex": 0,
                 "height": 16,
                 "width": 16,
@@ -2206,7 +2225,7 @@ exports[`<BaseLink /> should render link with icon with left iconPosition 1`] =
           <RNSVGGroup
             fill={null}
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
@@ -2215,7 +2234,7 @@ exports[`<BaseLink /> should render link with icon with left iconPosition 1`] =
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
               fill={4279461105}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -2224,7 +2243,7 @@ exports[`<BaseLink /> should render link with icon with left iconPosition 1`] =
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
               fill={4279461105}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -2235,7 +2254,7 @@ exports[`<BaseLink /> should render link with icon with left iconPosition 1`] =
               fill={4279461105}
               fillRule={0}
               propList={
-                Array [
+                [
                   "fill",
                   "fillRule",
                 ]
@@ -2245,14 +2264,15 @@ exports[`<BaseLink /> should render link with icon with left iconPosition 1`] =
         </RNSVGSvgView>
       </View>
       <Text
+        accessible={true}
         color="action.text.link.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(218, 89%, 51%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -2285,7 +2305,7 @@ exports[`<BaseLink /> should render link with icon with left iconPosition 1`] =
 exports[`<BaseLink /> should render link with icon with right iconPosition 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2293,7 +2313,7 @@ exports[`<BaseLink /> should render link with icon with right iconPosition 1`] =
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -2310,8 +2330,8 @@ exports[`<BaseLink /> should render link with icon with right iconPosition 1`] =
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -2336,8 +2356,8 @@ exports[`<BaseLink /> should render link with icon with right iconPosition 1`] =
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -2346,14 +2366,15 @@ exports[`<BaseLink /> should render link with icon with right iconPosition 1`] =
       }
     >
       <Text
+        accessible={true}
         color="action.text.link.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(218, 89%, 51%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -2383,8 +2404,8 @@ exports[`<BaseLink /> should render link with icon with right iconPosition 1`] =
         data-blade-component="base-box"
         display="flex"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "paddingLeft": 4,
@@ -2406,15 +2427,15 @@ exports[`<BaseLink /> should render link with icon with right iconPosition 1`] =
           minX={0}
           minY={0}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "borderWidth": 0,
               },
-              Array [
-                Object {},
+              [
+                {},
               ],
-              Object {
+              {
                 "flex": 0,
                 "height": 16,
                 "width": 16,
@@ -2428,7 +2449,7 @@ exports[`<BaseLink /> should render link with icon with right iconPosition 1`] =
           <RNSVGGroup
             fill={null}
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
@@ -2437,7 +2458,7 @@ exports[`<BaseLink /> should render link with icon with right iconPosition 1`] =
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
               fill={4279461105}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -2446,7 +2467,7 @@ exports[`<BaseLink /> should render link with icon with right iconPosition 1`] =
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
               fill={4279461105}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -2457,7 +2478,7 @@ exports[`<BaseLink /> should render link with icon with right iconPosition 1`] =
               fill={4279461105}
               fillRule={0}
               propList={
-                Array [
+                [
                   "fill",
                   "fillRule",
                 ]
@@ -2474,7 +2495,7 @@ exports[`<BaseLink /> should render link with icon with right iconPosition 1`] =
 exports[`<BaseLink /> should render negative intent high contrast link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2482,7 +2503,7 @@ exports[`<BaseLink /> should render negative intent high contrast link 1`] = `
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -2499,8 +2520,8 @@ exports[`<BaseLink /> should render negative intent high contrast link 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -2525,8 +2546,8 @@ exports[`<BaseLink /> should render negative intent high contrast link 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -2535,14 +2556,15 @@ exports[`<BaseLink /> should render negative intent high contrast link 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="feedback.negative.action.text.link.default.highContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 100%, 97%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -2575,7 +2597,7 @@ exports[`<BaseLink /> should render negative intent high contrast link 1`] = `
 exports[`<BaseLink /> should render negative intent low contrast link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2583,7 +2605,7 @@ exports[`<BaseLink /> should render negative intent low contrast link 1`] = `
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -2600,8 +2622,8 @@ exports[`<BaseLink /> should render negative intent low contrast link 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -2626,8 +2648,8 @@ exports[`<BaseLink /> should render negative intent low contrast link 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -2636,14 +2658,15 @@ exports[`<BaseLink /> should render negative intent low contrast link 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="feedback.negative.action.text.link.default.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(8, 73%, 47%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -2676,7 +2699,7 @@ exports[`<BaseLink /> should render negative intent low contrast link 1`] = `
 exports[`<BaseLink /> should render neutral intent high contrast link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2684,7 +2707,7 @@ exports[`<BaseLink /> should render neutral intent high contrast link 1`] = `
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -2701,8 +2724,8 @@ exports[`<BaseLink /> should render neutral intent high contrast link 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -2727,8 +2750,8 @@ exports[`<BaseLink /> should render neutral intent high contrast link 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -2737,14 +2760,15 @@ exports[`<BaseLink /> should render neutral intent high contrast link 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="feedback.neutral.action.text.link.default.highContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(220, 27%, 98%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -2777,7 +2801,7 @@ exports[`<BaseLink /> should render neutral intent high contrast link 1`] = `
 exports[`<BaseLink /> should render neutral intent low contrast link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2785,7 +2809,7 @@ exports[`<BaseLink /> should render neutral intent low contrast link 1`] = `
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -2802,8 +2826,8 @@ exports[`<BaseLink /> should render neutral intent low contrast link 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -2828,8 +2852,8 @@ exports[`<BaseLink /> should render neutral intent low contrast link 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -2838,14 +2862,15 @@ exports[`<BaseLink /> should render neutral intent low contrast link 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="feedback.neutral.action.text.link.default.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(216, 27%, 36%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -2878,7 +2903,7 @@ exports[`<BaseLink /> should render neutral intent low contrast link 1`] = `
 exports[`<BaseLink /> should render notice intent high contrast link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2886,7 +2911,7 @@ exports[`<BaseLink /> should render notice intent high contrast link 1`] = `
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -2903,8 +2928,8 @@ exports[`<BaseLink /> should render notice intent high contrast link 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -2929,8 +2954,8 @@ exports[`<BaseLink /> should render notice intent high contrast link 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -2939,14 +2964,15 @@ exports[`<BaseLink /> should render notice intent high contrast link 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="feedback.notice.action.text.link.default.highContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(32, 100%, 94%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -2979,7 +3005,7 @@ exports[`<BaseLink /> should render notice intent high contrast link 1`] = `
 exports[`<BaseLink /> should render notice intent low contrast link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2987,7 +3013,7 @@ exports[`<BaseLink /> should render notice intent low contrast link 1`] = `
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -3004,8 +3030,8 @@ exports[`<BaseLink /> should render notice intent low contrast link 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -3030,8 +3056,8 @@ exports[`<BaseLink /> should render notice intent low contrast link 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -3040,14 +3066,15 @@ exports[`<BaseLink /> should render notice intent low contrast link 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="feedback.notice.action.text.link.default.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(38, 97%, 38%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -3080,7 +3107,7 @@ exports[`<BaseLink /> should render notice intent low contrast link 1`] = `
 exports[`<BaseLink /> should render positive intent high contrast link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -3088,7 +3115,7 @@ exports[`<BaseLink /> should render positive intent high contrast link 1`] = `
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -3105,8 +3132,8 @@ exports[`<BaseLink /> should render positive intent high contrast link 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -3131,8 +3158,8 @@ exports[`<BaseLink /> should render positive intent high contrast link 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -3141,14 +3168,15 @@ exports[`<BaseLink /> should render positive intent high contrast link 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="feedback.positive.action.text.link.default.highContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(107, 100%, 96%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -3181,7 +3209,7 @@ exports[`<BaseLink /> should render positive intent high contrast link 1`] = `
 exports[`<BaseLink /> should render positive intent low contrast link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -3189,7 +3217,7 @@ exports[`<BaseLink /> should render positive intent low contrast link 1`] = `
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -3206,8 +3234,8 @@ exports[`<BaseLink /> should render positive intent low contrast link 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -3232,8 +3260,8 @@ exports[`<BaseLink /> should render positive intent low contrast link 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -3242,14 +3270,15 @@ exports[`<BaseLink /> should render positive intent low contrast link 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="feedback.positive.action.text.link.default.lowContrast"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(160, 100%, 26%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
diff --git a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.ssr.test.tsx.snap b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.ssr.test.tsx.snap
index a3c4f30f669..f8221f27e8b 100644
--- a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<BaseLink /> should render link with a default rel set when target is _blank 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><a data-blade-component=\\"link\\" href=\\"https://www.google.com/\\" target=\\"_blank\\" rel=\\"noreferrer noopener\\" class=\\"StyledBaseLinkweb__StyledLink-sc-1yj1z8h-0 kzvYbf\\" role=\\"link\\" aria-disabled=\\"false\\"><span class=\\"BaseBox-bmPWx fSbYvl content-container\\" data-blade-component=\\"base-box\\"><span class=\\"StyledBaseText-dVBfTO jSaisz\\" data-blade-component=\\"base-text\\">Learn More</span></span></a></div>"`;
+exports[`<BaseLink /> should render link with a default rel set when target is _blank 1`] = `"<div id="root" data-reactroot=""><a data-blade-component="link" href="https://www.google.com/" target="_blank" rel="noreferrer noopener" class="StyledBaseLinkweb__StyledLink-sc-1yj1z8h-0 kzvYbf" role="link" aria-disabled="false"><span class="BaseBox-bmPWx fSbYvl content-container" data-blade-component="base-box"><span class="StyledBaseText-dVBfTO jSaisz" data-blade-component="base-text">Learn More</span></span></a></div>"`;
 
 exports[`<BaseLink /> should render link with a default rel set when target is _blank 2`] = `
 <div
diff --git a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap
index 993326536b5..b249fd99f55 100644
--- a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap
+++ b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Link /> should render button variant of link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,7 +11,7 @@ exports[`<Link /> should render button variant of link 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -28,8 +28,8 @@ exports[`<Link /> should render button variant of link 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -54,8 +54,8 @@ exports[`<Link /> should render button variant of link 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -64,14 +64,15 @@ exports[`<Link /> should render button variant of link 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="action.text.link.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(218, 89%, 51%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -104,7 +105,7 @@ exports[`<Link /> should render button variant of link 1`] = `
 exports[`<Link /> should render disabled button variant of link 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -112,7 +113,7 @@ exports[`<Link /> should render disabled button variant of link 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": true,
       }
     }
@@ -129,8 +130,8 @@ exports[`<Link /> should render disabled button variant of link 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -155,8 +156,8 @@ exports[`<Link /> should render disabled button variant of link 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -165,14 +166,15 @@ exports[`<Link /> should render disabled button variant of link 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="action.text.link.disabled"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(218, 19%, 81%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -205,7 +207,7 @@ exports[`<Link /> should render disabled button variant of link 1`] = `
 exports[`<Link /> should render link with default properties 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -213,7 +215,7 @@ exports[`<Link /> should render link with default properties 1`] = `
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -230,8 +232,8 @@ exports[`<Link /> should render link with default properties 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -256,8 +258,8 @@ exports[`<Link /> should render link with default properties 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -266,14 +268,15 @@ exports[`<Link /> should render link with default properties 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="action.text.link.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(218, 89%, 51%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -306,7 +309,7 @@ exports[`<Link /> should render link with default properties 1`] = `
 exports[`<Link /> should render link with icon with default iconPosition 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -314,7 +317,7 @@ exports[`<Link /> should render link with icon with default iconPosition 1`] = `
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -331,8 +334,8 @@ exports[`<Link /> should render link with icon with default iconPosition 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -357,8 +360,8 @@ exports[`<Link /> should render link with icon with default iconPosition 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -371,8 +374,8 @@ exports[`<Link /> should render link with icon with default iconPosition 1`] = `
         data-blade-component="base-box"
         display="flex"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "paddingRight": 4,
@@ -394,15 +397,15 @@ exports[`<Link /> should render link with icon with default iconPosition 1`] = `
           minX={0}
           minY={0}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "borderWidth": 0,
               },
-              Array [
-                Object {},
+              [
+                {},
               ],
-              Object {
+              {
                 "flex": 0,
                 "height": 16,
                 "width": 16,
@@ -416,7 +419,7 @@ exports[`<Link /> should render link with icon with default iconPosition 1`] = `
           <RNSVGGroup
             fill={null}
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
@@ -425,7 +428,7 @@ exports[`<Link /> should render link with icon with default iconPosition 1`] = `
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
               fill={4279461105}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -434,7 +437,7 @@ exports[`<Link /> should render link with icon with default iconPosition 1`] = `
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
               fill={4279461105}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -445,7 +448,7 @@ exports[`<Link /> should render link with icon with default iconPosition 1`] = `
               fill={4279461105}
               fillRule={0}
               propList={
-                Array [
+                [
                   "fill",
                   "fillRule",
                 ]
@@ -455,14 +458,15 @@ exports[`<Link /> should render link with icon with default iconPosition 1`] = `
         </RNSVGSvgView>
       </View>
       <Text
+        accessible={true}
         color="action.text.link.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(218, 89%, 51%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -495,7 +499,7 @@ exports[`<Link /> should render link with icon with default iconPosition 1`] = `
 exports[`<Link /> should render link with icon with left iconPosition 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -503,7 +507,7 @@ exports[`<Link /> should render link with icon with left iconPosition 1`] = `
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -520,8 +524,8 @@ exports[`<Link /> should render link with icon with left iconPosition 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -546,8 +550,8 @@ exports[`<Link /> should render link with icon with left iconPosition 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -560,8 +564,8 @@ exports[`<Link /> should render link with icon with left iconPosition 1`] = `
         data-blade-component="base-box"
         display="flex"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "paddingRight": 4,
@@ -583,15 +587,15 @@ exports[`<Link /> should render link with icon with left iconPosition 1`] = `
           minX={0}
           minY={0}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "borderWidth": 0,
               },
-              Array [
-                Object {},
+              [
+                {},
               ],
-              Object {
+              {
                 "flex": 0,
                 "height": 16,
                 "width": 16,
@@ -605,7 +609,7 @@ exports[`<Link /> should render link with icon with left iconPosition 1`] = `
           <RNSVGGroup
             fill={null}
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
@@ -614,7 +618,7 @@ exports[`<Link /> should render link with icon with left iconPosition 1`] = `
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
               fill={4279461105}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -623,7 +627,7 @@ exports[`<Link /> should render link with icon with left iconPosition 1`] = `
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
               fill={4279461105}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -634,7 +638,7 @@ exports[`<Link /> should render link with icon with left iconPosition 1`] = `
               fill={4279461105}
               fillRule={0}
               propList={
-                Array [
+                [
                   "fill",
                   "fillRule",
                 ]
@@ -644,14 +648,15 @@ exports[`<Link /> should render link with icon with left iconPosition 1`] = `
         </RNSVGSvgView>
       </View>
       <Text
+        accessible={true}
         color="action.text.link.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(218, 89%, 51%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -684,7 +689,7 @@ exports[`<Link /> should render link with icon with left iconPosition 1`] = `
 exports[`<Link /> should render link with icon with right iconPosition 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -692,7 +697,7 @@ exports[`<Link /> should render link with icon with right iconPosition 1`] = `
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -709,8 +714,8 @@ exports[`<Link /> should render link with icon with right iconPosition 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -735,8 +740,8 @@ exports[`<Link /> should render link with icon with right iconPosition 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -745,14 +750,15 @@ exports[`<Link /> should render link with icon with right iconPosition 1`] = `
       }
     >
       <Text
+        accessible={true}
         color="action.text.link.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(218, 89%, 51%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -782,8 +788,8 @@ exports[`<Link /> should render link with icon with right iconPosition 1`] = `
         data-blade-component="base-box"
         display="flex"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "paddingLeft": 4,
@@ -805,15 +811,15 @@ exports[`<Link /> should render link with icon with right iconPosition 1`] = `
           minX={0}
           minY={0}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "borderWidth": 0,
               },
-              Array [
-                Object {},
+              [
+                {},
               ],
-              Object {
+              {
                 "flex": 0,
                 "height": 16,
                 "width": 16,
@@ -827,7 +833,7 @@ exports[`<Link /> should render link with icon with right iconPosition 1`] = `
           <RNSVGGroup
             fill={null}
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
@@ -836,7 +842,7 @@ exports[`<Link /> should render link with icon with right iconPosition 1`] = `
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
               fill={4279461105}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -845,7 +851,7 @@ exports[`<Link /> should render link with icon with right iconPosition 1`] = `
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
               fill={4279461105}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -856,7 +862,7 @@ exports[`<Link /> should render link with icon with right iconPosition 1`] = `
               fill={4279461105}
               fillRule={0}
               propList={
-                Array [
+                [
                   "fill",
                   "fillRule",
                 ]
@@ -873,7 +879,7 @@ exports[`<Link /> should render link with icon with right iconPosition 1`] = `
 exports[`<Link /> should render link with icon without text 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -881,7 +887,7 @@ exports[`<Link /> should render link with icon without text 1`] = `
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -898,8 +904,8 @@ exports[`<Link /> should render link with icon without text 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -924,8 +930,8 @@ exports[`<Link /> should render link with icon without text 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -938,8 +944,8 @@ exports[`<Link /> should render link with icon without text 1`] = `
         data-blade-component="base-box"
         display="flex"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "paddingRight": 0,
@@ -961,15 +967,15 @@ exports[`<Link /> should render link with icon without text 1`] = `
           minX={0}
           minY={0}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "borderWidth": 0,
               },
-              Array [
-                Object {},
+              [
+                {},
               ],
-              Object {
+              {
                 "flex": 0,
                 "height": 16,
                 "width": 16,
@@ -983,7 +989,7 @@ exports[`<Link /> should render link with icon without text 1`] = `
           <RNSVGGroup
             fill={null}
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
@@ -992,7 +998,7 @@ exports[`<Link /> should render link with icon without text 1`] = `
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
               fill={4279461105}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -1001,7 +1007,7 @@ exports[`<Link /> should render link with icon without text 1`] = `
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
               fill={4279461105}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -1012,7 +1018,7 @@ exports[`<Link /> should render link with icon without text 1`] = `
               fill={4279461105}
               fillRule={0}
               propList={
-                Array [
+                [
                   "fill",
                   "fillRule",
                 ]
@@ -1022,14 +1028,15 @@ exports[`<Link /> should render link with icon without text 1`] = `
         </RNSVGSvgView>
       </View>
       <Text
+        accessible={true}
         color="action.text.link.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(218, 89%, 51%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -1060,7 +1067,7 @@ exports[`<Link /> should render link with icon without text 1`] = `
 exports[`<Link /> should render with small size 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1068,7 +1075,7 @@ exports[`<Link /> should render with small size 1`] = `
   <View
     accessibilityRole="link"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -1085,8 +1092,8 @@ exports[`<Link /> should render with small size 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignSelf": "flex-start",
           "backgroundColor": "transparent",
           "borderColor": "black",
@@ -1111,8 +1118,8 @@ exports[`<Link /> should render with small size 1`] = `
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -1125,8 +1132,8 @@ exports[`<Link /> should render with small size 1`] = `
         data-blade-component="base-box"
         display="flex"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "paddingRight": 4,
@@ -1148,15 +1155,15 @@ exports[`<Link /> should render with small size 1`] = `
           minX={0}
           minY={0}
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "transparent",
                 "borderWidth": 0,
               },
-              Array [
-                Object {},
+              [
+                {},
               ],
-              Object {
+              {
                 "flex": 0,
                 "height": 12,
                 "width": 12,
@@ -1170,7 +1177,7 @@ exports[`<Link /> should render with small size 1`] = `
           <RNSVGGroup
             fill={null}
             propList={
-              Array [
+              [
                 "fill",
               ]
             }
@@ -1179,7 +1186,7 @@ exports[`<Link /> should render with small size 1`] = `
               d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
               fill={4279461105}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -1188,7 +1195,7 @@ exports[`<Link /> should render with small size 1`] = `
               d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
               fill={4279461105}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -1199,7 +1206,7 @@ exports[`<Link /> should render with small size 1`] = `
               fill={4279461105}
               fillRule={0}
               propList={
-                Array [
+                [
                   "fill",
                   "fillRule",
                 ]
@@ -1209,14 +1216,15 @@ exports[`<Link /> should render with small size 1`] = `
         </RNSVGSvgView>
       </View>
       <Text
+        accessible={true}
         color="action.text.link.default"
         data-blade-component="base-text"
         fontSize={75}
         fontWeight="bold"
         lineHeight={50}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(218, 89%, 51%, 1)",
               "fontFamily": "Lato",
               "fontSize": 12,
diff --git a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.ssr.test.tsx.snap b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.ssr.test.tsx.snap
index 11aceb81e01..827f5952a22 100644
--- a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Link /> should render link with a default rel set when target is _blank 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><a data-blade-component=\\"link\\" href=\\"https://www.google.com/\\" target=\\"_blank\\" rel=\\"noreferrer noopener\\" class=\\"StyledBaseLinkweb__StyledLink-sc-1yj1z8h-0 kzvYbf\\" role=\\"link\\" aria-disabled=\\"false\\"><span class=\\"BaseBox-bmPWx fSbYvl content-container\\" data-blade-component=\\"base-box\\"><span class=\\"StyledBaseText-dVBfTO jSaisz\\" data-blade-component=\\"base-text\\">Learn More</span></span></a></div>"`;
+exports[`<Link /> should render link with a default rel set when target is _blank 1`] = `"<div id="root" data-reactroot=""><a data-blade-component="link" href="https://www.google.com/" target="_blank" rel="noreferrer noopener" class="StyledBaseLinkweb__StyledLink-sc-1yj1z8h-0 kzvYbf" role="link" aria-disabled="false"><span class="BaseBox-bmPWx fSbYvl content-container" data-blade-component="base-box"><span class="StyledBaseText-dVBfTO jSaisz" data-blade-component="base-text">Learn More</span></span></a></div>"`;
 
 exports[`<Link /> should render link with a default rel set when target is _blank 2`] = `
 <div
diff --git a/packages/blade/src/components/List/__tests__/__snapshots__/List.native.test.tsx.snap b/packages/blade/src/components/List/__tests__/__snapshots__/List.native.test.tsx.snap
index 8c06fc21284..58a62d5dd40 100644
--- a/packages/blade/src/components/List/__tests__/__snapshots__/List.native.test.tsx.snap
+++ b/packages/blade/src/components/List/__tests__/__snapshots__/List.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<List /> should render List with default properties 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,18 +11,19 @@ exports[`<List /> should render List with default properties 1`] = `
   <View
     data-blade-component="base-box"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityRole="list"
+      accessible={true}
       data-blade-component="list"
       marginTop="spacing.3"
       style={
-        Array [
-          Object {
+        [
+          {
             "marginTop": 8,
           },
         ]
@@ -33,8 +34,8 @@ exports[`<List /> should render List with default properties 1`] = `
         hasIcon={false}
         level={1}
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 4,
             },
           ]
@@ -47,8 +48,8 @@ exports[`<List /> should render List with default properties 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -62,8 +63,8 @@ exports[`<List /> should render List with default properties 1`] = `
             data-blade-component="base-box"
             display="flex"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignSelf": "flex-start",
                   "display": "flex",
                   "marginRight": 8,
@@ -86,15 +87,15 @@ exports[`<List /> should render List with default properties 1`] = `
               minX={0}
               minY={0}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "transparent",
                     "borderWidth": 0,
                   },
-                  Array [
-                    Object {},
+                  [
+                    {},
                   ],
-                  Object {
+                  {
                     "flex": 0,
                     "height": 6,
                     "width": 6,
@@ -108,7 +109,7 @@ exports[`<List /> should render List with default properties 1`] = `
               <RNSVGGroup
                 fill={null}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -118,7 +119,7 @@ exports[`<List /> should render List with default properties 1`] = `
                   cy="3px"
                   fill={4288851646}
                   propList={
-                    Array [
+                    [
                       "fill",
                     ]
                   }
@@ -133,8 +134,8 @@ exports[`<List /> should render List with default properties 1`] = `
             flexDirection="row"
             flexWrap="wrap"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "flex",
                   "flexDirection": "row",
                   "flexWrap": "wrap",
@@ -143,6 +144,7 @@ exports[`<List /> should render List with default properties 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -151,8 +153,8 @@ exports[`<List /> should render List with default properties 1`] = `
               fontWeight="regular"
               lineHeight={100}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 14,
@@ -179,17 +181,18 @@ exports[`<List /> should render List with default properties 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {},
+            [
+              {},
             ]
           }
         >
           <View
             accessibilityRole="list"
+            accessible={true}
             data-blade-component="list"
             style={
-              Array [
-                Object {},
+              [
+                {},
               ]
             }
           >
@@ -198,8 +201,8 @@ exports[`<List /> should render List with default properties 1`] = `
               hasIcon={false}
               level={2}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "marginLeft": 16,
                   },
                 ]
@@ -212,8 +215,8 @@ exports[`<List /> should render List with default properties 1`] = `
                 display="flex"
                 flexDirection="row"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "alignItems": "center",
                       "display": "flex",
                       "flexDirection": "row",
@@ -227,8 +230,8 @@ exports[`<List /> should render List with default properties 1`] = `
                   data-blade-component="base-box"
                   display="flex"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "alignSelf": "flex-start",
                         "display": "flex",
                         "marginRight": 8,
@@ -251,15 +254,15 @@ exports[`<List /> should render List with default properties 1`] = `
                     minX={0}
                     minY={0}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "backgroundColor": "transparent",
                           "borderWidth": 0,
                         },
-                        Array [
-                          Object {},
+                        [
+                          {},
                         ],
-                        Object {
+                        {
                           "flex": 0,
                           "height": 6,
                           "width": 6,
@@ -273,7 +276,7 @@ exports[`<List /> should render List with default properties 1`] = `
                     <RNSVGGroup
                       fill={null}
                       propList={
-                        Array [
+                        [
                           "fill",
                         ]
                       }
@@ -282,7 +285,7 @@ exports[`<List /> should render List with default properties 1`] = `
                         cx="3px"
                         cy="3px"
                         propList={
-                          Array [
+                          [
                             "stroke",
                           ]
                         }
@@ -298,8 +301,8 @@ exports[`<List /> should render List with default properties 1`] = `
                   flexDirection="row"
                   flexWrap="wrap"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                         "flexDirection": "row",
                         "flexWrap": "wrap",
@@ -308,6 +311,7 @@ exports[`<List /> should render List with default properties 1`] = `
                   }
                 >
                   <Text
+                    accessible={true}
                     color="surface.text.normal.lowContrast"
                     data-blade-component="text"
                     fontFamily="text"
@@ -316,8 +320,8 @@ exports[`<List /> should render List with default properties 1`] = `
                     fontWeight="regular"
                     lineHeight={100}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "color": "hsla(217, 56%, 17%, 1)",
                           "fontFamily": "Lato",
                           "fontSize": 14,
@@ -344,17 +348,18 @@ exports[`<List /> should render List with default properties 1`] = `
               <View
                 data-blade-component="base-box"
                 style={
-                  Array [
-                    Object {},
+                  [
+                    {},
                   ]
                 }
               >
                 <View
                   accessibilityRole="list"
+                  accessible={true}
                   data-blade-component="list"
                   style={
-                    Array [
-                      Object {},
+                    [
+                      {},
                     ]
                   }
                 >
@@ -363,8 +368,8 @@ exports[`<List /> should render List with default properties 1`] = `
                     hasIcon={false}
                     level={3}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginLeft": 16,
                         },
                       ]
@@ -377,8 +382,8 @@ exports[`<List /> should render List with default properties 1`] = `
                       display="flex"
                       flexDirection="row"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "center",
                             "display": "flex",
                             "flexDirection": "row",
@@ -392,8 +397,8 @@ exports[`<List /> should render List with default properties 1`] = `
                         data-blade-component="base-box"
                         display="flex"
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "alignSelf": "flex-start",
                               "display": "flex",
                               "marginRight": 8,
@@ -416,15 +421,15 @@ exports[`<List /> should render List with default properties 1`] = `
                           minX={0}
                           minY={0}
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "backgroundColor": "transparent",
                                 "borderWidth": 0,
                               },
-                              Array [
-                                Object {},
+                              [
+                                {},
                               ],
-                              Object {
+                              {
                                 "flex": 0,
                                 "height": 6,
                                 "width": 6,
@@ -438,7 +443,7 @@ exports[`<List /> should render List with default properties 1`] = `
                           <RNSVGGroup
                             fill={null}
                             propList={
-                              Array [
+                              [
                                 "fill",
                               ]
                             }
@@ -447,7 +452,7 @@ exports[`<List /> should render List with default properties 1`] = `
                               fill={4288851646}
                               height="6px"
                               propList={
-                                Array [
+                                [
                                   "fill",
                                 ]
                               }
@@ -465,8 +470,8 @@ exports[`<List /> should render List with default properties 1`] = `
                         flexDirection="row"
                         flexWrap="wrap"
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "display": "flex",
                               "flexDirection": "row",
                               "flexWrap": "wrap",
@@ -475,6 +480,7 @@ exports[`<List /> should render List with default properties 1`] = `
                         }
                       >
                         <Text
+                          accessible={true}
                           color="surface.text.normal.lowContrast"
                           data-blade-component="text"
                           fontFamily="text"
@@ -483,8 +489,8 @@ exports[`<List /> should render List with default properties 1`] = `
                           fontWeight="regular"
                           lineHeight={100}
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "color": "hsla(217, 56%, 17%, 1)",
                                 "fontFamily": "Lato",
                                 "fontSize": 14,
@@ -523,7 +529,7 @@ exports[`<List /> should render List with default properties 1`] = `
 exports[`<List /> should render List with inline ListItemCode 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -531,18 +537,19 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
   <View
     data-blade-component="base-box"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityRole="list"
+      accessible={true}
       data-blade-component="list"
       marginTop="spacing.3"
       style={
-        Array [
-          Object {
+        [
+          {
             "marginTop": 8,
           },
         ]
@@ -553,8 +560,8 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
         hasIcon={false}
         level={1}
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 4,
             },
           ]
@@ -567,8 +574,8 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -582,8 +589,8 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
             data-blade-component="base-box"
             display="flex"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignSelf": "flex-start",
                   "display": "flex",
                   "marginRight": 8,
@@ -606,15 +613,15 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
               minX={0}
               minY={0}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "transparent",
                     "borderWidth": 0,
                   },
-                  Array [
-                    Object {},
+                  [
+                    {},
                   ],
-                  Object {
+                  {
                     "flex": 0,
                     "height": 6,
                     "width": 6,
@@ -628,7 +635,7 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
               <RNSVGGroup
                 fill={null}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -638,7 +645,7 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
                   cy="3px"
                   fill={4288851646}
                   propList={
-                    Array [
+                    [
                       "fill",
                     ]
                   }
@@ -653,8 +660,8 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
             flexDirection="row"
             flexWrap="wrap"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "flex",
                   "flexDirection": "row",
                   "flexWrap": "wrap",
@@ -663,6 +670,7 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -671,8 +679,8 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
               fontWeight="regular"
               lineHeight={100}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 14,
@@ -699,9 +707,9 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
               isHighlighted={true}
               size="small"
               style={
-                Array [
-                  Object {},
-                  Object {
+                [
+                  {},
+                  {
                     "alignSelf": "center",
                     "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
                     "borderRadius": 4,
@@ -717,6 +725,7 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
               }
             >
               <Text
+                accessible={true}
                 color="surface.text.subtle.lowContrast"
                 data-blade-component="base-text"
                 fontFamily="code"
@@ -724,8 +733,8 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
                 fontWeight="regular"
                 lineHeight={25}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "hsla(216, 27%, 36%, 1)",
                       "fontFamily": "Courier",
                       "fontSize": 10,
@@ -756,8 +765,8 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
         hasIcon={false}
         level={1}
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 4,
             },
           ]
@@ -770,8 +779,8 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -785,8 +794,8 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
             data-blade-component="base-box"
             display="flex"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignSelf": "flex-start",
                   "display": "flex",
                   "marginRight": 8,
@@ -809,15 +818,15 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
               minX={0}
               minY={0}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "transparent",
                     "borderWidth": 0,
                   },
-                  Array [
-                    Object {},
+                  [
+                    {},
                   ],
-                  Object {
+                  {
                     "flex": 0,
                     "height": 6,
                     "width": 6,
@@ -831,7 +840,7 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
               <RNSVGGroup
                 fill={null}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -841,7 +850,7 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
                   cy="3px"
                   fill={4288851646}
                   propList={
-                    Array [
+                    [
                       "fill",
                     ]
                   }
@@ -856,8 +865,8 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
             flexDirection="row"
             flexWrap="wrap"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "flex",
                   "flexDirection": "row",
                   "flexWrap": "wrap",
@@ -866,6 +875,7 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -874,8 +884,8 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
               fontWeight="regular"
               lineHeight={100}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 14,
@@ -908,7 +918,7 @@ exports[`<List /> should render List with inline ListItemCode 1`] = `
 exports[`<List /> should render List with inline ListItemLink 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -916,18 +926,19 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
   <View
     data-blade-component="base-box"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityRole="list"
+      accessible={true}
       data-blade-component="list"
       marginTop="spacing.3"
       style={
-        Array [
-          Object {
+        [
+          {
             "marginTop": 8,
           },
         ]
@@ -938,8 +949,8 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
         hasIcon={false}
         level={1}
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 4,
             },
           ]
@@ -952,8 +963,8 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -967,8 +978,8 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
             data-blade-component="base-box"
             display="flex"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignSelf": "flex-start",
                   "display": "flex",
                   "marginRight": 8,
@@ -991,15 +1002,15 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
               minX={0}
               minY={0}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "transparent",
                     "borderWidth": 0,
                   },
-                  Array [
-                    Object {},
+                  [
+                    {},
                   ],
-                  Object {
+                  {
                     "flex": 0,
                     "height": 6,
                     "width": 6,
@@ -1013,7 +1024,7 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
               <RNSVGGroup
                 fill={null}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -1023,7 +1034,7 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
                   cy="3px"
                   fill={4288851646}
                   propList={
-                    Array [
+                    [
                       "fill",
                     ]
                   }
@@ -1038,8 +1049,8 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
             flexDirection="row"
             flexWrap="wrap"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "flex",
                   "flexDirection": "row",
                   "flexWrap": "wrap",
@@ -1048,6 +1059,7 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -1056,8 +1068,8 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
               fontWeight="regular"
               lineHeight={100}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 14,
@@ -1082,7 +1094,7 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
             <View
               accessibilityRole="link"
               accessibilityState={
-                Object {
+                {
                   "disabled": false,
                 }
               }
@@ -1099,8 +1111,8 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "alignSelf": "flex-start",
                     "backgroundColor": "transparent",
                     "borderColor": "black",
@@ -1125,8 +1137,8 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
                 display="flex"
                 flexDirection="row"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "alignItems": "center",
                       "display": "flex",
                       "flexDirection": "row",
@@ -1135,14 +1147,15 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
                 }
               >
                 <Text
+                  accessible={true}
                   color="action.text.link.default"
                   data-blade-component="base-text"
                   fontSize={100}
                   fontWeight="bold"
                   lineHeight={100}
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "color": "hsla(218, 89%, 51%, 1)",
                         "fontFamily": "Lato",
                         "fontSize": 14,
@@ -1177,8 +1190,8 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
         hasIcon={false}
         level={1}
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 4,
             },
           ]
@@ -1191,8 +1204,8 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -1206,8 +1219,8 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
             data-blade-component="base-box"
             display="flex"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignSelf": "flex-start",
                   "display": "flex",
                   "marginRight": 8,
@@ -1230,15 +1243,15 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
               minX={0}
               minY={0}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "transparent",
                     "borderWidth": 0,
                   },
-                  Array [
-                    Object {},
+                  [
+                    {},
                   ],
-                  Object {
+                  {
                     "flex": 0,
                     "height": 6,
                     "width": 6,
@@ -1252,7 +1265,7 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
               <RNSVGGroup
                 fill={null}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -1262,7 +1275,7 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
                   cy="3px"
                   fill={4288851646}
                   propList={
-                    Array [
+                    [
                       "fill",
                     ]
                   }
@@ -1277,8 +1290,8 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
             flexDirection="row"
             flexWrap="wrap"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "flex",
                   "flexDirection": "row",
                   "flexWrap": "wrap",
@@ -1287,6 +1300,7 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -1295,8 +1309,8 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
               fontWeight="regular"
               lineHeight={100}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 14,
@@ -1329,7 +1343,7 @@ exports[`<List /> should render List with inline ListItemLink 1`] = `
 exports[`<List /> should render List with inline ListItemText 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1337,18 +1351,19 @@ exports[`<List /> should render List with inline ListItemText 1`] = `
   <View
     data-blade-component="base-box"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityRole="list"
+      accessible={true}
       data-blade-component="list"
       marginTop="spacing.3"
       style={
-        Array [
-          Object {
+        [
+          {
             "marginTop": 8,
           },
         ]
@@ -1359,8 +1374,8 @@ exports[`<List /> should render List with inline ListItemText 1`] = `
         hasIcon={false}
         level={1}
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 4,
             },
           ]
@@ -1373,8 +1388,8 @@ exports[`<List /> should render List with inline ListItemText 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -1388,8 +1403,8 @@ exports[`<List /> should render List with inline ListItemText 1`] = `
             data-blade-component="base-box"
             display="flex"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignSelf": "flex-start",
                   "display": "flex",
                   "marginRight": 8,
@@ -1412,15 +1427,15 @@ exports[`<List /> should render List with inline ListItemText 1`] = `
               minX={0}
               minY={0}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "transparent",
                     "borderWidth": 0,
                   },
-                  Array [
-                    Object {},
+                  [
+                    {},
                   ],
-                  Object {
+                  {
                     "flex": 0,
                     "height": 6,
                     "width": 6,
@@ -1434,7 +1449,7 @@ exports[`<List /> should render List with inline ListItemText 1`] = `
               <RNSVGGroup
                 fill={null}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -1444,7 +1459,7 @@ exports[`<List /> should render List with inline ListItemText 1`] = `
                   cy="3px"
                   fill={4288851646}
                   propList={
-                    Array [
+                    [
                       "fill",
                     ]
                   }
@@ -1459,8 +1474,8 @@ exports[`<List /> should render List with inline ListItemText 1`] = `
             flexDirection="row"
             flexWrap="wrap"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "flex",
                   "flexDirection": "row",
                   "flexWrap": "wrap",
@@ -1469,6 +1484,7 @@ exports[`<List /> should render List with inline ListItemText 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="action.text.secondary.default"
               data-blade-component="text"
               fontFamily="text"
@@ -1477,8 +1493,8 @@ exports[`<List /> should render List with inline ListItemText 1`] = `
               fontWeight="bold"
               lineHeight={100}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(218, 89%, 51%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 14,
@@ -1511,7 +1527,7 @@ exports[`<List /> should render List with inline ListItemText 1`] = `
 exports[`<List /> should render medium ordered List 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1519,18 +1535,19 @@ exports[`<List /> should render medium ordered List 1`] = `
   <View
     data-blade-component="base-box"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityRole="list"
+      accessible={true}
       data-blade-component="list"
       marginTop="spacing.3"
       style={
-        Array [
-          Object {
+        [
+          {
             "marginTop": 8,
           },
         ]
@@ -1541,8 +1558,8 @@ exports[`<List /> should render medium ordered List 1`] = `
         hasIcon={false}
         level={1}
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 0,
             },
           ]
@@ -1555,8 +1572,8 @@ exports[`<List /> should render medium ordered List 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -1574,8 +1591,8 @@ exports[`<List /> should render medium ordered List 1`] = `
             height="24px"
             justifyContent="center"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "alignSelf": "flex-start",
                   "display": "flex",
@@ -1591,6 +1608,7 @@ exports[`<List /> should render medium ordered List 1`] = `
             width="24px"
           >
             <Text
+              accessible={true}
               color="surface.text.subtle.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -1599,8 +1617,8 @@ exports[`<List /> should render medium ordered List 1`] = `
               fontWeight="regular"
               lineHeight={100}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(216, 27%, 36%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 14,
@@ -1629,8 +1647,8 @@ exports[`<List /> should render medium ordered List 1`] = `
             flexDirection="row"
             flexWrap="wrap"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "flex",
                   "flexDirection": "row",
                   "flexWrap": "wrap",
@@ -1639,6 +1657,7 @@ exports[`<List /> should render medium ordered List 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -1647,8 +1666,8 @@ exports[`<List /> should render medium ordered List 1`] = `
               fontWeight="regular"
               lineHeight={100}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 14,
@@ -1675,17 +1694,18 @@ exports[`<List /> should render medium ordered List 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {},
+            [
+              {},
             ]
           }
         >
           <View
             accessibilityRole="list"
+            accessible={true}
             data-blade-component="list"
             style={
-              Array [
-                Object {},
+              [
+                {},
               ]
             }
           >
@@ -1694,8 +1714,8 @@ exports[`<List /> should render medium ordered List 1`] = `
               hasIcon={false}
               level={2}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "marginLeft": 16,
                   },
                 ]
@@ -1708,8 +1728,8 @@ exports[`<List /> should render medium ordered List 1`] = `
                 display="flex"
                 flexDirection="row"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "alignItems": "center",
                       "display": "flex",
                       "flexDirection": "row",
@@ -1723,8 +1743,8 @@ exports[`<List /> should render medium ordered List 1`] = `
                   data-blade-component="base-box"
                   display="flex"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "alignSelf": "flex-start",
                         "display": "flex",
                         "marginRight": 8,
@@ -1747,15 +1767,15 @@ exports[`<List /> should render medium ordered List 1`] = `
                     minX={0}
                     minY={0}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "backgroundColor": "transparent",
                           "borderWidth": 0,
                         },
-                        Array [
-                          Object {},
+                        [
+                          {},
                         ],
-                        Object {
+                        {
                           "flex": 0,
                           "height": 6,
                           "width": 6,
@@ -1769,7 +1789,7 @@ exports[`<List /> should render medium ordered List 1`] = `
                     <RNSVGGroup
                       fill={null}
                       propList={
-                        Array [
+                        [
                           "fill",
                         ]
                       }
@@ -1778,7 +1798,7 @@ exports[`<List /> should render medium ordered List 1`] = `
                         cx="3px"
                         cy="3px"
                         propList={
-                          Array [
+                          [
                             "stroke",
                           ]
                         }
@@ -1794,8 +1814,8 @@ exports[`<List /> should render medium ordered List 1`] = `
                   flexDirection="row"
                   flexWrap="wrap"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                         "flexDirection": "row",
                         "flexWrap": "wrap",
@@ -1804,6 +1824,7 @@ exports[`<List /> should render medium ordered List 1`] = `
                   }
                 >
                   <Text
+                    accessible={true}
                     color="surface.text.normal.lowContrast"
                     data-blade-component="text"
                     fontFamily="text"
@@ -1812,8 +1833,8 @@ exports[`<List /> should render medium ordered List 1`] = `
                     fontWeight="regular"
                     lineHeight={100}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "color": "hsla(217, 56%, 17%, 1)",
                           "fontFamily": "Lato",
                           "fontSize": 14,
@@ -1840,17 +1861,18 @@ exports[`<List /> should render medium ordered List 1`] = `
               <View
                 data-blade-component="base-box"
                 style={
-                  Array [
-                    Object {},
+                  [
+                    {},
                   ]
                 }
               >
                 <View
                   accessibilityRole="list"
+                  accessible={true}
                   data-blade-component="list"
                   style={
-                    Array [
-                      Object {},
+                    [
+                      {},
                     ]
                   }
                 >
@@ -1859,8 +1881,8 @@ exports[`<List /> should render medium ordered List 1`] = `
                     hasIcon={false}
                     level={3}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginLeft": 16,
                         },
                       ]
@@ -1873,8 +1895,8 @@ exports[`<List /> should render medium ordered List 1`] = `
                       display="flex"
                       flexDirection="row"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "center",
                             "display": "flex",
                             "flexDirection": "row",
@@ -1888,8 +1910,8 @@ exports[`<List /> should render medium ordered List 1`] = `
                         data-blade-component="base-box"
                         display="flex"
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "alignSelf": "flex-start",
                               "display": "flex",
                               "marginRight": 8,
@@ -1912,15 +1934,15 @@ exports[`<List /> should render medium ordered List 1`] = `
                           minX={0}
                           minY={0}
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "backgroundColor": "transparent",
                                 "borderWidth": 0,
                               },
-                              Array [
-                                Object {},
+                              [
+                                {},
                               ],
-                              Object {
+                              {
                                 "flex": 0,
                                 "height": 6,
                                 "width": 6,
@@ -1934,7 +1956,7 @@ exports[`<List /> should render medium ordered List 1`] = `
                           <RNSVGGroup
                             fill={null}
                             propList={
-                              Array [
+                              [
                                 "fill",
                               ]
                             }
@@ -1943,7 +1965,7 @@ exports[`<List /> should render medium ordered List 1`] = `
                               fill={4288851646}
                               height="6px"
                               propList={
-                                Array [
+                                [
                                   "fill",
                                 ]
                               }
@@ -1961,8 +1983,8 @@ exports[`<List /> should render medium ordered List 1`] = `
                         flexDirection="row"
                         flexWrap="wrap"
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "display": "flex",
                               "flexDirection": "row",
                               "flexWrap": "wrap",
@@ -1971,6 +1993,7 @@ exports[`<List /> should render medium ordered List 1`] = `
                         }
                       >
                         <Text
+                          accessible={true}
                           color="surface.text.normal.lowContrast"
                           data-blade-component="text"
                           fontFamily="text"
@@ -1979,8 +2002,8 @@ exports[`<List /> should render medium ordered List 1`] = `
                           fontWeight="regular"
                           lineHeight={100}
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "color": "hsla(217, 56%, 17%, 1)",
                                 "fontFamily": "Lato",
                                 "fontSize": 14,
@@ -2019,7 +2042,7 @@ exports[`<List /> should render medium ordered List 1`] = `
 exports[`<List /> should render medium ordered-filled List 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2027,18 +2050,19 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
   <View
     data-blade-component="base-box"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityRole="list"
+      accessible={true}
       data-blade-component="list"
       marginTop="spacing.3"
       style={
-        Array [
-          Object {
+        [
+          {
             "marginTop": 8,
           },
         ]
@@ -2049,8 +2073,8 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
         hasIcon={false}
         level={1}
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 0,
             },
           ]
@@ -2063,8 +2087,8 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -2084,8 +2108,8 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
             height="20px"
             justifyContent="center"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "alignSelf": "flex-start",
                   "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
@@ -2103,6 +2127,7 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
             width="20px"
           >
             <Text
+              accessible={true}
               color="surface.text.subtle.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -2111,8 +2136,8 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
               fontWeight="regular"
               lineHeight={50}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(216, 27%, 36%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 10,
@@ -2141,8 +2166,8 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
             flexDirection="row"
             flexWrap="wrap"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "flex",
                   "flexDirection": "row",
                   "flexWrap": "wrap",
@@ -2151,6 +2176,7 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -2159,8 +2185,8 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
               fontWeight="regular"
               lineHeight={100}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 14,
@@ -2190,8 +2216,8 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
         hasIcon={false}
         level={1}
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 0,
             },
           ]
@@ -2204,8 +2230,8 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -2225,8 +2251,8 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
             height="20px"
             justifyContent="center"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "alignSelf": "flex-start",
                   "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
@@ -2244,6 +2270,7 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
             width="20px"
           >
             <Text
+              accessible={true}
               color="surface.text.subtle.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -2252,8 +2279,8 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
               fontWeight="regular"
               lineHeight={50}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(216, 27%, 36%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 10,
@@ -2282,8 +2309,8 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
             flexDirection="row"
             flexWrap="wrap"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "flex",
                   "flexDirection": "row",
                   "flexWrap": "wrap",
@@ -2292,6 +2319,7 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -2300,8 +2328,8 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
               fontWeight="regular"
               lineHeight={100}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 14,
@@ -2331,8 +2359,8 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
         hasIcon={false}
         level={1}
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 0,
             },
           ]
@@ -2345,8 +2373,8 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -2366,8 +2394,8 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
             height="20px"
             justifyContent="center"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "alignSelf": "flex-start",
                   "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
@@ -2385,6 +2413,7 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
             width="20px"
           >
             <Text
+              accessible={true}
               color="surface.text.subtle.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -2393,8 +2422,8 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
               fontWeight="regular"
               lineHeight={50}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(216, 27%, 36%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 10,
@@ -2423,8 +2452,8 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
             flexDirection="row"
             flexWrap="wrap"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "flex",
                   "flexDirection": "row",
                   "flexWrap": "wrap",
@@ -2433,6 +2462,7 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -2441,8 +2471,8 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
               fontWeight="regular"
               lineHeight={100}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 14,
@@ -2475,7 +2505,7 @@ exports[`<List /> should render medium ordered-filled List 1`] = `
 exports[`<List /> should render medium unordered List with icon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2483,18 +2513,19 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
   <View
     data-blade-component="base-box"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityRole="list"
+      accessible={true}
       data-blade-component="list"
       marginTop="spacing.3"
       style={
-        Array [
-          Object {
+        [
+          {
             "marginTop": 8,
           },
         ]
@@ -2505,8 +2536,8 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
         hasIcon={true}
         level={1}
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 0,
             },
           ]
@@ -2519,8 +2550,8 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -2534,8 +2565,8 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
             data-blade-component="base-box"
             display="flex"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignSelf": "flex-start",
                   "display": "flex",
                   "marginRight": 8,
@@ -2558,15 +2589,15 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
               minX={0}
               minY={0}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "transparent",
                     "borderWidth": 0,
                   },
-                  Array [
-                    Object {},
+                  [
+                    {},
                   ],
-                  Object {
+                  {
                     "flex": 0,
                     "height": 16,
                     "width": 16,
@@ -2580,7 +2611,7 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
               <RNSVGGroup
                 fill={null}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -2589,7 +2620,7 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                   d="M14.707 5.293a1 1 0 1 0-1.414 1.414L17.586 11H4a1 1 0 1 0 0 2h13.586l-4.293 4.293a1 1 0 0 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414l-6-6Z"
                   fill={4284378759}
                   propList={
-                    Array [
+                    [
                       "fill",
                     ]
                   }
@@ -2603,8 +2634,8 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
             flexDirection="row"
             flexWrap="wrap"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "flex",
                   "flexDirection": "row",
                   "flexWrap": "wrap",
@@ -2613,6 +2644,7 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -2621,8 +2653,8 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
               fontWeight="regular"
               lineHeight={100}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 14,
@@ -2649,17 +2681,18 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {},
+            [
+              {},
             ]
           }
         >
           <View
             accessibilityRole="list"
+            accessible={true}
             data-blade-component="list"
             style={
-              Array [
-                Object {},
+              [
+                {},
               ]
             }
           >
@@ -2668,8 +2701,8 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
               hasIcon={true}
               level={2}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "marginLeft": 16,
                   },
                 ]
@@ -2682,8 +2715,8 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                 display="flex"
                 flexDirection="row"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "alignItems": "center",
                       "display": "flex",
                       "flexDirection": "row",
@@ -2697,8 +2730,8 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                   data-blade-component="base-box"
                   display="flex"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "alignSelf": "flex-start",
                         "display": "flex",
                         "marginRight": 8,
@@ -2721,15 +2754,15 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                     minX={0}
                     minY={0}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "backgroundColor": "transparent",
                           "borderWidth": 0,
                         },
-                        Array [
-                          Object {},
+                        [
+                          {},
                         ],
-                        Object {
+                        {
                           "flex": 0,
                           "height": 16,
                           "width": 16,
@@ -2743,7 +2776,7 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                     <RNSVGGroup
                       fill={null}
                       propList={
-                        Array [
+                        [
                           "fill",
                         ]
                       }
@@ -2752,7 +2785,7 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                         d="M12.707 3.293a1 1 0 0 0-1.414 0l-6 6a1 1 0 0 0 1.414 1.414L11 6.414V20a1 1 0 1 0 2 0V6.414l4.293 4.293a1 1 0 0 0 1.414-1.414l-6-6Z"
                         fill={4284378759}
                         propList={
-                          Array [
+                          [
                             "fill",
                           ]
                         }
@@ -2766,8 +2799,8 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                   flexDirection="row"
                   flexWrap="wrap"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                         "flexDirection": "row",
                         "flexWrap": "wrap",
@@ -2776,6 +2809,7 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                   }
                 >
                   <Text
+                    accessible={true}
                     color="surface.text.normal.lowContrast"
                     data-blade-component="text"
                     fontFamily="text"
@@ -2784,8 +2818,8 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                     fontWeight="regular"
                     lineHeight={100}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "color": "hsla(217, 56%, 17%, 1)",
                           "fontFamily": "Lato",
                           "fontSize": 14,
@@ -2812,17 +2846,18 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
               <View
                 data-blade-component="base-box"
                 style={
-                  Array [
-                    Object {},
+                  [
+                    {},
                   ]
                 }
               >
                 <View
                   accessibilityRole="list"
+                  accessible={true}
                   data-blade-component="list"
                   style={
-                    Array [
-                      Object {},
+                    [
+                      {},
                     ]
                   }
                 >
@@ -2831,8 +2866,8 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                     hasIcon={false}
                     level={3}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginLeft": 16,
                         },
                       ]
@@ -2845,8 +2880,8 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                       display="flex"
                       flexDirection="row"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "center",
                             "display": "flex",
                             "flexDirection": "row",
@@ -2860,8 +2895,8 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                         data-blade-component="base-box"
                         display="flex"
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "alignSelf": "flex-start",
                               "display": "flex",
                               "marginRight": 8,
@@ -2884,15 +2919,15 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                           minX={0}
                           minY={0}
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "backgroundColor": "transparent",
                                 "borderWidth": 0,
                               },
-                              Array [
-                                Object {},
+                              [
+                                {},
                               ],
-                              Object {
+                              {
                                 "flex": 0,
                                 "height": 6,
                                 "width": 6,
@@ -2906,7 +2941,7 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                           <RNSVGGroup
                             fill={null}
                             propList={
-                              Array [
+                              [
                                 "fill",
                               ]
                             }
@@ -2915,7 +2950,7 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                               fill={4288851646}
                               height="6px"
                               propList={
-                                Array [
+                                [
                                   "fill",
                                 ]
                               }
@@ -2933,8 +2968,8 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                         flexDirection="row"
                         flexWrap="wrap"
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "display": "flex",
                               "flexDirection": "row",
                               "flexWrap": "wrap",
@@ -2943,6 +2978,7 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                         }
                       >
                         <Text
+                          accessible={true}
                           color="surface.text.normal.lowContrast"
                           data-blade-component="text"
                           fontFamily="text"
@@ -2951,8 +2987,8 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
                           fontWeight="regular"
                           lineHeight={100}
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "color": "hsla(217, 56%, 17%, 1)",
                                 "fontFamily": "Lato",
                                 "fontSize": 14,
@@ -2991,7 +3027,7 @@ exports[`<List /> should render medium unordered List with icon 1`] = `
 exports[`<List /> should render small ordered List 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2999,18 +3035,19 @@ exports[`<List /> should render small ordered List 1`] = `
   <View
     data-blade-component="base-box"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityRole="list"
+      accessible={true}
       data-blade-component="list"
       marginTop="spacing.3"
       style={
-        Array [
-          Object {
+        [
+          {
             "marginTop": 8,
           },
         ]
@@ -3021,8 +3058,8 @@ exports[`<List /> should render small ordered List 1`] = `
         hasIcon={false}
         level={1}
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 0,
             },
           ]
@@ -3035,8 +3072,8 @@ exports[`<List /> should render small ordered List 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -3054,8 +3091,8 @@ exports[`<List /> should render small ordered List 1`] = `
             height="16px"
             justifyContent="center"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "alignSelf": "flex-start",
                   "display": "flex",
@@ -3071,6 +3108,7 @@ exports[`<List /> should render small ordered List 1`] = `
             width="16px"
           >
             <Text
+              accessible={true}
               color="surface.text.subtle.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -3079,8 +3117,8 @@ exports[`<List /> should render small ordered List 1`] = `
               fontWeight="regular"
               lineHeight={50}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(216, 27%, 36%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 12,
@@ -3109,8 +3147,8 @@ exports[`<List /> should render small ordered List 1`] = `
             flexDirection="row"
             flexWrap="wrap"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "flex",
                   "flexDirection": "row",
                   "flexWrap": "wrap",
@@ -3119,6 +3157,7 @@ exports[`<List /> should render small ordered List 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -3127,8 +3166,8 @@ exports[`<List /> should render small ordered List 1`] = `
               fontWeight="regular"
               lineHeight={50}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 12,
@@ -3155,17 +3194,18 @@ exports[`<List /> should render small ordered List 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {},
+            [
+              {},
             ]
           }
         >
           <View
             accessibilityRole="list"
+            accessible={true}
             data-blade-component="list"
             style={
-              Array [
-                Object {},
+              [
+                {},
               ]
             }
           >
@@ -3174,8 +3214,8 @@ exports[`<List /> should render small ordered List 1`] = `
               hasIcon={false}
               level={2}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "marginLeft": 16,
                   },
                 ]
@@ -3188,8 +3228,8 @@ exports[`<List /> should render small ordered List 1`] = `
                 display="flex"
                 flexDirection="row"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "alignItems": "center",
                       "display": "flex",
                       "flexDirection": "row",
@@ -3203,8 +3243,8 @@ exports[`<List /> should render small ordered List 1`] = `
                   data-blade-component="base-box"
                   display="flex"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "alignSelf": "flex-start",
                         "display": "flex",
                         "marginRight": 8,
@@ -3227,15 +3267,15 @@ exports[`<List /> should render small ordered List 1`] = `
                     minX={0}
                     minY={0}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "backgroundColor": "transparent",
                           "borderWidth": 0,
                         },
-                        Array [
-                          Object {},
+                        [
+                          {},
                         ],
-                        Object {
+                        {
                           "flex": 0,
                           "height": 5,
                           "width": 5,
@@ -3249,7 +3289,7 @@ exports[`<List /> should render small ordered List 1`] = `
                     <RNSVGGroup
                       fill={null}
                       propList={
-                        Array [
+                        [
                           "fill",
                         ]
                       }
@@ -3258,7 +3298,7 @@ exports[`<List /> should render small ordered List 1`] = `
                         cx="3px"
                         cy="3px"
                         propList={
-                          Array [
+                          [
                             "stroke",
                           ]
                         }
@@ -3274,8 +3314,8 @@ exports[`<List /> should render small ordered List 1`] = `
                   flexDirection="row"
                   flexWrap="wrap"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                         "flexDirection": "row",
                         "flexWrap": "wrap",
@@ -3284,6 +3324,7 @@ exports[`<List /> should render small ordered List 1`] = `
                   }
                 >
                   <Text
+                    accessible={true}
                     color="surface.text.normal.lowContrast"
                     data-blade-component="text"
                     fontFamily="text"
@@ -3292,8 +3333,8 @@ exports[`<List /> should render small ordered List 1`] = `
                     fontWeight="regular"
                     lineHeight={50}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "color": "hsla(217, 56%, 17%, 1)",
                           "fontFamily": "Lato",
                           "fontSize": 12,
@@ -3320,17 +3361,18 @@ exports[`<List /> should render small ordered List 1`] = `
               <View
                 data-blade-component="base-box"
                 style={
-                  Array [
-                    Object {},
+                  [
+                    {},
                   ]
                 }
               >
                 <View
                   accessibilityRole="list"
+                  accessible={true}
                   data-blade-component="list"
                   style={
-                    Array [
-                      Object {},
+                    [
+                      {},
                     ]
                   }
                 >
@@ -3339,8 +3381,8 @@ exports[`<List /> should render small ordered List 1`] = `
                     hasIcon={false}
                     level={3}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginLeft": 16,
                         },
                       ]
@@ -3353,8 +3395,8 @@ exports[`<List /> should render small ordered List 1`] = `
                       display="flex"
                       flexDirection="row"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "center",
                             "display": "flex",
                             "flexDirection": "row",
@@ -3368,8 +3410,8 @@ exports[`<List /> should render small ordered List 1`] = `
                         data-blade-component="base-box"
                         display="flex"
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "alignSelf": "flex-start",
                               "display": "flex",
                               "marginRight": 8,
@@ -3392,15 +3434,15 @@ exports[`<List /> should render small ordered List 1`] = `
                           minX={0}
                           minY={0}
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "backgroundColor": "transparent",
                                 "borderWidth": 0,
                               },
-                              Array [
-                                Object {},
+                              [
+                                {},
                               ],
-                              Object {
+                              {
                                 "flex": 0,
                                 "height": 5,
                                 "width": 5,
@@ -3414,7 +3456,7 @@ exports[`<List /> should render small ordered List 1`] = `
                           <RNSVGGroup
                             fill={null}
                             propList={
-                              Array [
+                              [
                                 "fill",
                               ]
                             }
@@ -3423,7 +3465,7 @@ exports[`<List /> should render small ordered List 1`] = `
                               fill={4288851646}
                               height="5px"
                               propList={
-                                Array [
+                                [
                                   "fill",
                                 ]
                               }
@@ -3441,8 +3483,8 @@ exports[`<List /> should render small ordered List 1`] = `
                         flexDirection="row"
                         flexWrap="wrap"
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "display": "flex",
                               "flexDirection": "row",
                               "flexWrap": "wrap",
@@ -3451,6 +3493,7 @@ exports[`<List /> should render small ordered List 1`] = `
                         }
                       >
                         <Text
+                          accessible={true}
                           color="surface.text.normal.lowContrast"
                           data-blade-component="text"
                           fontFamily="text"
@@ -3459,8 +3502,8 @@ exports[`<List /> should render small ordered List 1`] = `
                           fontWeight="regular"
                           lineHeight={50}
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "color": "hsla(217, 56%, 17%, 1)",
                                 "fontFamily": "Lato",
                                 "fontSize": 12,
@@ -3499,7 +3542,7 @@ exports[`<List /> should render small ordered List 1`] = `
 exports[`<List /> should render small ordered-filled List 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -3507,18 +3550,19 @@ exports[`<List /> should render small ordered-filled List 1`] = `
   <View
     data-blade-component="base-box"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityRole="list"
+      accessible={true}
       data-blade-component="list"
       marginTop="spacing.3"
       style={
-        Array [
-          Object {
+        [
+          {
             "marginTop": 8,
           },
         ]
@@ -3529,8 +3573,8 @@ exports[`<List /> should render small ordered-filled List 1`] = `
         hasIcon={false}
         level={1}
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 0,
             },
           ]
@@ -3543,8 +3587,8 @@ exports[`<List /> should render small ordered-filled List 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -3564,8 +3608,8 @@ exports[`<List /> should render small ordered-filled List 1`] = `
             height="16px"
             justifyContent="center"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "alignSelf": "flex-start",
                   "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
@@ -3583,6 +3627,7 @@ exports[`<List /> should render small ordered-filled List 1`] = `
             width="16px"
           >
             <Text
+              accessible={true}
               color="surface.text.subtle.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -3591,8 +3636,8 @@ exports[`<List /> should render small ordered-filled List 1`] = `
               fontWeight="regular"
               lineHeight={50}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(216, 27%, 36%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 10,
@@ -3621,8 +3666,8 @@ exports[`<List /> should render small ordered-filled List 1`] = `
             flexDirection="row"
             flexWrap="wrap"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "flex",
                   "flexDirection": "row",
                   "flexWrap": "wrap",
@@ -3631,6 +3676,7 @@ exports[`<List /> should render small ordered-filled List 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -3639,8 +3685,8 @@ exports[`<List /> should render small ordered-filled List 1`] = `
               fontWeight="regular"
               lineHeight={50}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 12,
@@ -3670,8 +3716,8 @@ exports[`<List /> should render small ordered-filled List 1`] = `
         hasIcon={false}
         level={1}
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 0,
             },
           ]
@@ -3684,8 +3730,8 @@ exports[`<List /> should render small ordered-filled List 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -3705,8 +3751,8 @@ exports[`<List /> should render small ordered-filled List 1`] = `
             height="16px"
             justifyContent="center"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "alignSelf": "flex-start",
                   "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
@@ -3724,6 +3770,7 @@ exports[`<List /> should render small ordered-filled List 1`] = `
             width="16px"
           >
             <Text
+              accessible={true}
               color="surface.text.subtle.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -3732,8 +3779,8 @@ exports[`<List /> should render small ordered-filled List 1`] = `
               fontWeight="regular"
               lineHeight={50}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(216, 27%, 36%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 10,
@@ -3762,8 +3809,8 @@ exports[`<List /> should render small ordered-filled List 1`] = `
             flexDirection="row"
             flexWrap="wrap"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "flex",
                   "flexDirection": "row",
                   "flexWrap": "wrap",
@@ -3772,6 +3819,7 @@ exports[`<List /> should render small ordered-filled List 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -3780,8 +3828,8 @@ exports[`<List /> should render small ordered-filled List 1`] = `
               fontWeight="regular"
               lineHeight={50}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 12,
@@ -3811,8 +3859,8 @@ exports[`<List /> should render small ordered-filled List 1`] = `
         hasIcon={false}
         level={1}
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 0,
             },
           ]
@@ -3825,8 +3873,8 @@ exports[`<List /> should render small ordered-filled List 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -3846,8 +3894,8 @@ exports[`<List /> should render small ordered-filled List 1`] = `
             height="16px"
             justifyContent="center"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "alignSelf": "flex-start",
                   "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
@@ -3865,6 +3913,7 @@ exports[`<List /> should render small ordered-filled List 1`] = `
             width="16px"
           >
             <Text
+              accessible={true}
               color="surface.text.subtle.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -3873,8 +3922,8 @@ exports[`<List /> should render small ordered-filled List 1`] = `
               fontWeight="regular"
               lineHeight={50}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(216, 27%, 36%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 10,
@@ -3903,8 +3952,8 @@ exports[`<List /> should render small ordered-filled List 1`] = `
             flexDirection="row"
             flexWrap="wrap"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "flex",
                   "flexDirection": "row",
                   "flexWrap": "wrap",
@@ -3913,6 +3962,7 @@ exports[`<List /> should render small ordered-filled List 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -3921,8 +3971,8 @@ exports[`<List /> should render small ordered-filled List 1`] = `
               fontWeight="regular"
               lineHeight={50}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 12,
@@ -3955,7 +4005,7 @@ exports[`<List /> should render small ordered-filled List 1`] = `
 exports[`<List /> should render small unordered List with icon 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -3963,18 +4013,19 @@ exports[`<List /> should render small unordered List with icon 1`] = `
   <View
     data-blade-component="base-box"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityRole="list"
+      accessible={true}
       data-blade-component="list"
       marginTop="spacing.3"
       style={
-        Array [
-          Object {
+        [
+          {
             "marginTop": 8,
           },
         ]
@@ -3985,8 +4036,8 @@ exports[`<List /> should render small unordered List with icon 1`] = `
         hasIcon={true}
         level={1}
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 0,
             },
           ]
@@ -3999,8 +4050,8 @@ exports[`<List /> should render small unordered List with icon 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -4014,8 +4065,8 @@ exports[`<List /> should render small unordered List with icon 1`] = `
             data-blade-component="base-box"
             display="flex"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignSelf": "flex-start",
                   "display": "flex",
                   "marginRight": 8,
@@ -4038,15 +4089,15 @@ exports[`<List /> should render small unordered List with icon 1`] = `
               minX={0}
               minY={0}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "transparent",
                     "borderWidth": 0,
                   },
-                  Array [
-                    Object {},
+                  [
+                    {},
                   ],
-                  Object {
+                  {
                     "flex": 0,
                     "height": 12,
                     "width": 12,
@@ -4060,7 +4111,7 @@ exports[`<List /> should render small unordered List with icon 1`] = `
               <RNSVGGroup
                 fill={null}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -4069,7 +4120,7 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                   d="M14.707 5.293a1 1 0 1 0-1.414 1.414L17.586 11H4a1 1 0 1 0 0 2h13.586l-4.293 4.293a1 1 0 0 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414l-6-6Z"
                   fill={4284378759}
                   propList={
-                    Array [
+                    [
                       "fill",
                     ]
                   }
@@ -4083,8 +4134,8 @@ exports[`<List /> should render small unordered List with icon 1`] = `
             flexDirection="row"
             flexWrap="wrap"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "flex",
                   "flexDirection": "row",
                   "flexWrap": "wrap",
@@ -4093,6 +4144,7 @@ exports[`<List /> should render small unordered List with icon 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -4101,8 +4153,8 @@ exports[`<List /> should render small unordered List with icon 1`] = `
               fontWeight="regular"
               lineHeight={50}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 12,
@@ -4129,17 +4181,18 @@ exports[`<List /> should render small unordered List with icon 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {},
+            [
+              {},
             ]
           }
         >
           <View
             accessibilityRole="list"
+            accessible={true}
             data-blade-component="list"
             style={
-              Array [
-                Object {},
+              [
+                {},
               ]
             }
           >
@@ -4148,8 +4201,8 @@ exports[`<List /> should render small unordered List with icon 1`] = `
               hasIcon={true}
               level={2}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "marginLeft": 16,
                   },
                 ]
@@ -4162,8 +4215,8 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                 display="flex"
                 flexDirection="row"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "alignItems": "center",
                       "display": "flex",
                       "flexDirection": "row",
@@ -4177,8 +4230,8 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                   data-blade-component="base-box"
                   display="flex"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "alignSelf": "flex-start",
                         "display": "flex",
                         "marginRight": 8,
@@ -4201,15 +4254,15 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                     minX={0}
                     minY={0}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "backgroundColor": "transparent",
                           "borderWidth": 0,
                         },
-                        Array [
-                          Object {},
+                        [
+                          {},
                         ],
-                        Object {
+                        {
                           "flex": 0,
                           "height": 12,
                           "width": 12,
@@ -4223,7 +4276,7 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                     <RNSVGGroup
                       fill={null}
                       propList={
-                        Array [
+                        [
                           "fill",
                         ]
                       }
@@ -4232,7 +4285,7 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                         d="M12.707 3.293a1 1 0 0 0-1.414 0l-6 6a1 1 0 0 0 1.414 1.414L11 6.414V20a1 1 0 1 0 2 0V6.414l4.293 4.293a1 1 0 0 0 1.414-1.414l-6-6Z"
                         fill={4284378759}
                         propList={
-                          Array [
+                          [
                             "fill",
                           ]
                         }
@@ -4246,8 +4299,8 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                   flexDirection="row"
                   flexWrap="wrap"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                         "flexDirection": "row",
                         "flexWrap": "wrap",
@@ -4256,6 +4309,7 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                   }
                 >
                   <Text
+                    accessible={true}
                     color="surface.text.normal.lowContrast"
                     data-blade-component="text"
                     fontFamily="text"
@@ -4264,8 +4318,8 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                     fontWeight="regular"
                     lineHeight={50}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "color": "hsla(217, 56%, 17%, 1)",
                           "fontFamily": "Lato",
                           "fontSize": 12,
@@ -4292,17 +4346,18 @@ exports[`<List /> should render small unordered List with icon 1`] = `
               <View
                 data-blade-component="base-box"
                 style={
-                  Array [
-                    Object {},
+                  [
+                    {},
                   ]
                 }
               >
                 <View
                   accessibilityRole="list"
+                  accessible={true}
                   data-blade-component="list"
                   style={
-                    Array [
-                      Object {},
+                    [
+                      {},
                     ]
                   }
                 >
@@ -4311,8 +4366,8 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                     hasIcon={false}
                     level={3}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginLeft": 16,
                         },
                       ]
@@ -4325,8 +4380,8 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                       display="flex"
                       flexDirection="row"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "center",
                             "display": "flex",
                             "flexDirection": "row",
@@ -4340,8 +4395,8 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                         data-blade-component="base-box"
                         display="flex"
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "alignSelf": "flex-start",
                               "display": "flex",
                               "marginRight": 8,
@@ -4364,15 +4419,15 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                           minX={0}
                           minY={0}
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "backgroundColor": "transparent",
                                 "borderWidth": 0,
                               },
-                              Array [
-                                Object {},
+                              [
+                                {},
                               ],
-                              Object {
+                              {
                                 "flex": 0,
                                 "height": 5,
                                 "width": 5,
@@ -4386,7 +4441,7 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                           <RNSVGGroup
                             fill={null}
                             propList={
-                              Array [
+                              [
                                 "fill",
                               ]
                             }
@@ -4395,7 +4450,7 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                               fill={4288851646}
                               height="5px"
                               propList={
-                                Array [
+                                [
                                   "fill",
                                 ]
                               }
@@ -4413,8 +4468,8 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                         flexDirection="row"
                         flexWrap="wrap"
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "display": "flex",
                               "flexDirection": "row",
                               "flexWrap": "wrap",
@@ -4423,6 +4478,7 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                         }
                       >
                         <Text
+                          accessible={true}
                           color="surface.text.normal.lowContrast"
                           data-blade-component="text"
                           fontFamily="text"
@@ -4431,8 +4487,8 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                           fontWeight="regular"
                           lineHeight={50}
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "color": "hsla(217, 56%, 17%, 1)",
                                 "fontFamily": "Lato",
                                 "fontSize": 12,
@@ -4471,7 +4527,7 @@ exports[`<List /> should render small unordered List with icon 1`] = `
 exports[`<List /> should render unordered List of small size 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -4479,18 +4535,19 @@ exports[`<List /> should render unordered List of small size 1`] = `
   <View
     data-blade-component="base-box"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityRole="list"
+      accessible={true}
       data-blade-component="list"
       marginTop="spacing.3"
       style={
-        Array [
-          Object {
+        [
+          {
             "marginTop": 8,
           },
         ]
@@ -4501,8 +4558,8 @@ exports[`<List /> should render unordered List of small size 1`] = `
         hasIcon={false}
         level={1}
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 4,
             },
           ]
@@ -4515,8 +4572,8 @@ exports[`<List /> should render unordered List of small size 1`] = `
           display="flex"
           flexDirection="row"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -4530,8 +4587,8 @@ exports[`<List /> should render unordered List of small size 1`] = `
             data-blade-component="base-box"
             display="flex"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignSelf": "flex-start",
                   "display": "flex",
                   "marginRight": 8,
@@ -4554,15 +4611,15 @@ exports[`<List /> should render unordered List of small size 1`] = `
               minX={0}
               minY={0}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "transparent",
                     "borderWidth": 0,
                   },
-                  Array [
-                    Object {},
+                  [
+                    {},
                   ],
-                  Object {
+                  {
                     "flex": 0,
                     "height": 5,
                     "width": 5,
@@ -4576,7 +4633,7 @@ exports[`<List /> should render unordered List of small size 1`] = `
               <RNSVGGroup
                 fill={null}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -4586,7 +4643,7 @@ exports[`<List /> should render unordered List of small size 1`] = `
                   cy="3px"
                   fill={4288851646}
                   propList={
-                    Array [
+                    [
                       "fill",
                     ]
                   }
@@ -4601,8 +4658,8 @@ exports[`<List /> should render unordered List of small size 1`] = `
             flexDirection="row"
             flexWrap="wrap"
             style={
-              Array [
-                Object {
+              [
+                {
                   "display": "flex",
                   "flexDirection": "row",
                   "flexWrap": "wrap",
@@ -4611,6 +4668,7 @@ exports[`<List /> should render unordered List of small size 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -4619,8 +4677,8 @@ exports[`<List /> should render unordered List of small size 1`] = `
               fontWeight="regular"
               lineHeight={50}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 12,
@@ -4647,17 +4705,18 @@ exports[`<List /> should render unordered List of small size 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {},
+            [
+              {},
             ]
           }
         >
           <View
             accessibilityRole="list"
+            accessible={true}
             data-blade-component="list"
             style={
-              Array [
-                Object {},
+              [
+                {},
               ]
             }
           >
@@ -4666,8 +4725,8 @@ exports[`<List /> should render unordered List of small size 1`] = `
               hasIcon={false}
               level={2}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "marginLeft": 16,
                   },
                 ]
@@ -4680,8 +4739,8 @@ exports[`<List /> should render unordered List of small size 1`] = `
                 display="flex"
                 flexDirection="row"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "alignItems": "center",
                       "display": "flex",
                       "flexDirection": "row",
@@ -4695,8 +4754,8 @@ exports[`<List /> should render unordered List of small size 1`] = `
                   data-blade-component="base-box"
                   display="flex"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "alignSelf": "flex-start",
                         "display": "flex",
                         "marginRight": 8,
@@ -4719,15 +4778,15 @@ exports[`<List /> should render unordered List of small size 1`] = `
                     minX={0}
                     minY={0}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "backgroundColor": "transparent",
                           "borderWidth": 0,
                         },
-                        Array [
-                          Object {},
+                        [
+                          {},
                         ],
-                        Object {
+                        {
                           "flex": 0,
                           "height": 5,
                           "width": 5,
@@ -4741,7 +4800,7 @@ exports[`<List /> should render unordered List of small size 1`] = `
                     <RNSVGGroup
                       fill={null}
                       propList={
-                        Array [
+                        [
                           "fill",
                         ]
                       }
@@ -4750,7 +4809,7 @@ exports[`<List /> should render unordered List of small size 1`] = `
                         cx="3px"
                         cy="3px"
                         propList={
-                          Array [
+                          [
                             "stroke",
                           ]
                         }
@@ -4766,8 +4825,8 @@ exports[`<List /> should render unordered List of small size 1`] = `
                   flexDirection="row"
                   flexWrap="wrap"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                         "flexDirection": "row",
                         "flexWrap": "wrap",
@@ -4776,6 +4835,7 @@ exports[`<List /> should render unordered List of small size 1`] = `
                   }
                 >
                   <Text
+                    accessible={true}
                     color="surface.text.normal.lowContrast"
                     data-blade-component="text"
                     fontFamily="text"
@@ -4784,8 +4844,8 @@ exports[`<List /> should render unordered List of small size 1`] = `
                     fontWeight="regular"
                     lineHeight={50}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "color": "hsla(217, 56%, 17%, 1)",
                           "fontFamily": "Lato",
                           "fontSize": 12,
@@ -4812,17 +4872,18 @@ exports[`<List /> should render unordered List of small size 1`] = `
               <View
                 data-blade-component="base-box"
                 style={
-                  Array [
-                    Object {},
+                  [
+                    {},
                   ]
                 }
               >
                 <View
                   accessibilityRole="list"
+                  accessible={true}
                   data-blade-component="list"
                   style={
-                    Array [
-                      Object {},
+                    [
+                      {},
                     ]
                   }
                 >
@@ -4831,8 +4892,8 @@ exports[`<List /> should render unordered List of small size 1`] = `
                     hasIcon={false}
                     level={3}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginLeft": 16,
                         },
                       ]
@@ -4845,8 +4906,8 @@ exports[`<List /> should render unordered List of small size 1`] = `
                       display="flex"
                       flexDirection="row"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "center",
                             "display": "flex",
                             "flexDirection": "row",
@@ -4860,8 +4921,8 @@ exports[`<List /> should render unordered List of small size 1`] = `
                         data-blade-component="base-box"
                         display="flex"
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "alignSelf": "flex-start",
                               "display": "flex",
                               "marginRight": 8,
@@ -4884,15 +4945,15 @@ exports[`<List /> should render unordered List of small size 1`] = `
                           minX={0}
                           minY={0}
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "backgroundColor": "transparent",
                                 "borderWidth": 0,
                               },
-                              Array [
-                                Object {},
+                              [
+                                {},
                               ],
-                              Object {
+                              {
                                 "flex": 0,
                                 "height": 5,
                                 "width": 5,
@@ -4906,7 +4967,7 @@ exports[`<List /> should render unordered List of small size 1`] = `
                           <RNSVGGroup
                             fill={null}
                             propList={
-                              Array [
+                              [
                                 "fill",
                               ]
                             }
@@ -4915,7 +4976,7 @@ exports[`<List /> should render unordered List of small size 1`] = `
                               fill={4288851646}
                               height="5px"
                               propList={
-                                Array [
+                                [
                                   "fill",
                                 ]
                               }
@@ -4933,8 +4994,8 @@ exports[`<List /> should render unordered List of small size 1`] = `
                         flexDirection="row"
                         flexWrap="wrap"
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "display": "flex",
                               "flexDirection": "row",
                               "flexWrap": "wrap",
@@ -4943,6 +5004,7 @@ exports[`<List /> should render unordered List of small size 1`] = `
                         }
                       >
                         <Text
+                          accessible={true}
                           color="surface.text.normal.lowContrast"
                           data-blade-component="text"
                           fontFamily="text"
@@ -4951,8 +5013,8 @@ exports[`<List /> should render unordered List of small size 1`] = `
                           fontWeight="regular"
                           lineHeight={50}
                           style={
-                            Array [
-                              Object {
+                            [
+                              {
                                 "color": "hsla(217, 56%, 17%, 1)",
                                 "fontFamily": "Lato",
                                 "fontSize": 12,
diff --git a/packages/blade/src/components/List/__tests__/__snapshots__/List.ssr.test.tsx.snap b/packages/blade/src/components/List/__tests__/__snapshots__/List.ssr.test.tsx.snap
index ba6310d39a4..55e37098649 100644
--- a/packages/blade/src/components/List/__tests__/__snapshots__/List.ssr.test.tsx.snap
+++ b/packages/blade/src/components/List/__tests__/__snapshots__/List.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<List /> should render List with default properties 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><ul data-blade-component=\\"list\\" role=\\"list\\" class=\\"UnorderedListweb__UnorderedList-sc-1tb6ajo-0 List__StyledUnorderedList-bqf6r7-1 dbSpGu erLmOF\\"><li data-blade-component=\\"list-item\\" class=\\"ListItemElementweb__ListItemElement-sc-2pr284-0 ListItem__StyledListItem-sc-6bxu4b-0  bALAZM\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx dKbTtw\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx gXoKZy\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"6px\\" viewBox=\\"0 0 6 6\\" width=\\"6px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><circle cx=\\"3px\\" cy=\\"3px\\" r=\\"3px\\" fill=\\"hsla(214, 18%, 69%, 1)\\" data-blade-component=\\"svg-circle\\"></circle></svg></div><p class=\\"StyledBaseText-dVBfTO eIdQFo\\" data-blade-component=\\"text\\">Level 1</p></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><ul data-blade-component=\\"list\\" role=\\"list\\" class=\\"UnorderedListweb__UnorderedList-sc-1tb6ajo-0 List__StyledUnorderedList-bqf6r7-1 dbSpGu\\"><li data-blade-component=\\"list-item\\" class=\\"ListItemElementweb__ListItemElement-sc-2pr284-0 ListItem__StyledListItem-sc-6bxu4b-0  hWTYHD\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx dKbTtw\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx gXoKZy\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"6px\\" viewBox=\\"0 0 6 6\\" width=\\"6px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><circle cx=\\"3px\\" cy=\\"3px\\" r=\\"2.5px\\" stroke=\\"hsla(214, 18%, 69%, 1)\\" data-blade-component=\\"svg-circle\\"></circle></svg></div><p class=\\"StyledBaseText-dVBfTO eIdQFo\\" data-blade-component=\\"text\\">Level 2</p></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><ul data-blade-component=\\"list\\" role=\\"list\\" class=\\"UnorderedListweb__UnorderedList-sc-1tb6ajo-0 List__StyledUnorderedList-bqf6r7-1 dbSpGu\\"><li data-blade-component=\\"list-item\\" class=\\"ListItemElementweb__ListItemElement-sc-2pr284-0 ListItem__StyledListItem-sc-6bxu4b-0  hWTYHD\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx dKbTtw\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx gXoKZy\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"6px\\" viewBox=\\"0 0 6 6\\" width=\\"6px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><rect data-blade-component=\\"svg-rect\\" height=\\"6px\\" width=\\"6px\\" rx=\\"1px\\" fill=\\"hsla(214, 18%, 69%, 1)\\"></rect></svg></div><p class=\\"StyledBaseText-dVBfTO eIdQFo\\" data-blade-component=\\"text\\">Level 3</p></div></li></ul></div></li></ul></div></li></ul></div></div>"`;
+exports[`<List /> should render List with default properties 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="base-box" class="BaseBox-bmPWx"><ul data-blade-component="list" role="list" class="UnorderedListweb__UnorderedList-sc-1tb6ajo-0 List__StyledUnorderedList-bqf6r7-1 dbSpGu erLmOF"><li data-blade-component="list-item" class="ListItemElementweb__ListItemElement-sc-2pr284-0 ListItem__StyledListItem-sc-6bxu4b-0  bALAZM"><div data-blade-component="base-box" class="BaseBox-bmPWx dKbTtw"><div data-blade-component="base-box" class="BaseBox-bmPWx gXoKZy"><svg aria-hidden="true" data-blade-component="icon" height="6px" viewBox="0 0 6 6" width="6px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><circle cx="3px" cy="3px" r="3px" fill="hsla(214, 18%, 69%, 1)" data-blade-component="svg-circle"></circle></svg></div><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">Level 1</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx"><ul data-blade-component="list" role="list" class="UnorderedListweb__UnorderedList-sc-1tb6ajo-0 List__StyledUnorderedList-bqf6r7-1 dbSpGu"><li data-blade-component="list-item" class="ListItemElementweb__ListItemElement-sc-2pr284-0 ListItem__StyledListItem-sc-6bxu4b-0  hWTYHD"><div data-blade-component="base-box" class="BaseBox-bmPWx dKbTtw"><div data-blade-component="base-box" class="BaseBox-bmPWx gXoKZy"><svg aria-hidden="true" data-blade-component="icon" height="6px" viewBox="0 0 6 6" width="6px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><circle cx="3px" cy="3px" r="2.5px" stroke="hsla(214, 18%, 69%, 1)" data-blade-component="svg-circle"></circle></svg></div><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">Level 2</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx"><ul data-blade-component="list" role="list" class="UnorderedListweb__UnorderedList-sc-1tb6ajo-0 List__StyledUnorderedList-bqf6r7-1 dbSpGu"><li data-blade-component="list-item" class="ListItemElementweb__ListItemElement-sc-2pr284-0 ListItem__StyledListItem-sc-6bxu4b-0  hWTYHD"><div data-blade-component="base-box" class="BaseBox-bmPWx dKbTtw"><div data-blade-component="base-box" class="BaseBox-bmPWx gXoKZy"><svg aria-hidden="true" data-blade-component="icon" height="6px" viewBox="0 0 6 6" width="6px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><rect data-blade-component="svg-rect" height="6px" width="6px" rx="1px" fill="hsla(214, 18%, 69%, 1)"></rect></svg></div><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">Level 3</p></div></li></ul></div></li></ul></div></li></ul></div></div>"`;
 
 exports[`<List /> should render List with default properties 2`] = `
 <div
diff --git a/packages/blade/src/components/ProgressBar/__tests__/ProgressBar.native.test.tsx b/packages/blade/src/components/ProgressBar/__tests__/ProgressBar.native.test.tsx
index 6fb335b0ea8..ce19816b6bc 100644
--- a/packages/blade/src/components/ProgressBar/__tests__/ProgressBar.native.test.tsx
+++ b/packages/blade/src/components/ProgressBar/__tests__/ProgressBar.native.test.tsx
@@ -111,24 +111,22 @@ describe('<ProgressBar />', () => {
   });
 
   it('should have accessibility attributes for progress variant', () => {
-    const { getByRole, getByA11yValue } = renderWithTheme(
+    const { getByRole } = renderWithTheme(
       <ProgressBar label="Label" accessibilityLabel="Downloading" value={70} variant="progress" />,
     );
 
     const progressbar = getByRole('progressbar');
     expect(progressbar.findByProps({ accessibilityLabel: 'Downloading' })).toBeTruthy();
-    expect(
-      getByA11yValue({
-        max: 100,
-        min: 0,
-        now: 70,
-        text: '70%',
-      }),
-    ).toBeTruthy();
+    expect(progressbar).toHaveAccessibilityValue({
+      max: 100,
+      min: 0,
+      now: 70,
+      text: '70%',
+    });
   });
 
   it('should have the right accessibility attributes for progress variant in indeterminate state', () => {
-    const { getByRole, getByA11yValue } = renderWithTheme(
+    const { getByRole } = renderWithTheme(
       <ProgressBar
         label="Label"
         accessibilityLabel="Checking"
@@ -139,31 +137,27 @@ describe('<ProgressBar />', () => {
 
     const progressbar = getByRole('progressbar');
     expect(progressbar.findByProps({ accessibilityLabel: 'Checking' })).toBeTruthy();
-    expect(
-      getByA11yValue({
-        max: undefined,
-        min: undefined,
-        now: undefined,
-        text: undefined,
-      }),
-    ).toBeTruthy();
+    expect(progressbar).toHaveAccessibilityValue({
+      max: undefined,
+      min: undefined,
+      now: undefined,
+      text: undefined,
+    });
   });
 
   it('should have accessibility attributes for meter variant', () => {
-    const { getByRole, findByA11yValue } = renderWithTheme(
+    const { getByRole } = renderWithTheme(
       <ProgressBar label="Label" accessibilityLabel="Amount" value={70} variant="meter" />,
     );
 
     const progressbar = getByRole('progressbar');
     expect(progressbar.findByProps({ accessibilityLabel: 'Amount' })).toBeTruthy();
-    expect(
-      findByA11yValue({
-        max: 100,
-        min: 0,
-        now: 70,
-        text: '70',
-      }),
-    ).toBeTruthy();
+    expect(progressbar).toHaveAccessibilityValue({
+      max: 100,
+      min: 0,
+      now: 70,
+      text: '70',
+    });
   });
 
   it('should throw an error when the variant is meter and isIndeterminate is set', () => {
diff --git a/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.native.test.tsx.snap b/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.native.test.tsx.snap
index 39311dbb191..ed56d171184 100644
--- a/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.native.test.tsx.snap
+++ b/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,8 +11,8 @@ exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
   <View
     data-blade-component="progress-bar"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -21,8 +21,8 @@ exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "width": "100%",
@@ -37,8 +37,8 @@ exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
         flexDirection="row"
         justifyContent="space-between"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -49,8 +49,8 @@ exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
                 "marginRight": 16,
               },
@@ -66,8 +66,8 @@ exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
             gap="spacing.0"
             maxHeight="36px"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "display": "flex",
                   "flexDirection": "row",
@@ -79,6 +79,7 @@ exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.subdued.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -88,8 +89,8 @@ exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
               lineHeight={50}
               numberOfLines={2}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 18%, 45%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 12,
@@ -114,8 +115,8 @@ exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
             <View
               data-blade-component="visually-hidden"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "borderColor": "black",
                     "borderStyle": "solid",
                     "borderWidth": 0,
@@ -141,6 +142,7 @@ exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
               }
             >
               <Text
+                accessible={true}
                 color="surface.text.normal.lowContrast"
                 data-blade-component="text"
                 fontFamily="text"
@@ -149,8 +151,8 @@ exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
                 fontWeight="regular"
                 lineHeight={100}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "hsla(217, 56%, 17%, 1)",
                       "fontFamily": "Lato",
                       "fontSize": 14,
@@ -176,14 +178,15 @@ exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
               },
             ]
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subdued.lowContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -192,8 +195,8 @@ exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
             fontWeight="regular"
             lineHeight={50}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(217, 18%, 45%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -221,18 +224,19 @@ exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
         accessibilityLabel="Label"
         accessibilityRole="progressbar"
         accessibilityValue={
-          Object {
+          {
             "max": 100,
             "min": 0,
             "now": 20,
             "text": "20%",
           }
         }
+        accessible={true}
         data-blade-component="base-box"
         id="progress-1"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -243,8 +247,8 @@ exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
           overflow="hidden"
           position="relative"
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
                 "height": 2,
                 "overflow": "hidden",
@@ -257,13 +261,13 @@ exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
             backgroundColor="hsla(218, 89%, 51%, 1)"
             progress={20}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "hsla(218, 89%, 51%, 1)",
                   "height": "100%",
                   "width": "20%",
                 },
-                Object {
+                {
                   "width": "20%",
                 },
               ]
@@ -271,14 +275,14 @@ exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "white",
                     "height": "100%",
                     "opacity": 0,
                     "width": "100%",
                   },
-                  Object {
+                  {
                     "opacity": 0,
                   },
                 ]
@@ -295,7 +299,7 @@ exports[`<ProgressBar /> should render ProgressBar with default props 1`] = `
 exports[`<ProgressBar /> should render ProgressBar without label and percentage 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -303,8 +307,8 @@ exports[`<ProgressBar /> should render ProgressBar without label and percentage
   <View
     data-blade-component="progress-bar"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -313,8 +317,8 @@ exports[`<ProgressBar /> should render ProgressBar without label and percentage
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "width": "100%",
@@ -329,8 +333,8 @@ exports[`<ProgressBar /> should render ProgressBar without label and percentage
         flexDirection="row"
         justifyContent="flex-end"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "flex-end",
@@ -341,18 +345,19 @@ exports[`<ProgressBar /> should render ProgressBar without label and percentage
       <View
         accessibilityRole="progressbar"
         accessibilityValue={
-          Object {
+          {
             "max": 100,
             "min": 0,
             "now": 50,
             "text": "50%",
           }
         }
+        accessible={true}
         data-blade-component="base-box"
         id="progress-7"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -363,8 +368,8 @@ exports[`<ProgressBar /> should render ProgressBar without label and percentage
           overflow="hidden"
           position="relative"
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
                 "height": 2,
                 "overflow": "hidden",
@@ -377,13 +382,13 @@ exports[`<ProgressBar /> should render ProgressBar without label and percentage
             backgroundColor="hsla(218, 89%, 51%, 1)"
             progress={50}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "hsla(218, 89%, 51%, 1)",
                   "height": "100%",
                   "width": "50%",
                 },
-                Object {
+                {
                   "width": "50%",
                 },
               ]
@@ -391,14 +396,14 @@ exports[`<ProgressBar /> should render ProgressBar without label and percentage
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "white",
                     "height": "100%",
                     "opacity": 0,
                     "width": "100%",
                   },
-                  Object {
+                  {
                     "opacity": 0,
                   },
                 ]
@@ -415,7 +420,7 @@ exports[`<ProgressBar /> should render ProgressBar without label and percentage
 exports[`<ProgressBar /> should render high contrast ProgressBar 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -423,8 +428,8 @@ exports[`<ProgressBar /> should render high contrast ProgressBar 1`] = `
   <View
     data-blade-component="progress-bar"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -433,8 +438,8 @@ exports[`<ProgressBar /> should render high contrast ProgressBar 1`] = `
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "width": "100%",
@@ -449,8 +454,8 @@ exports[`<ProgressBar /> should render high contrast ProgressBar 1`] = `
         flexDirection="row"
         justifyContent="flex-end"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "flex-end",
@@ -461,14 +466,15 @@ exports[`<ProgressBar /> should render high contrast ProgressBar 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
               },
             ]
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subdued.highContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -477,8 +483,8 @@ exports[`<ProgressBar /> should render high contrast ProgressBar 1`] = `
             fontWeight="regular"
             lineHeight={50}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(216, 19%, 89%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -505,18 +511,19 @@ exports[`<ProgressBar /> should render high contrast ProgressBar 1`] = `
       <View
         accessibilityRole="progressbar"
         accessibilityValue={
-          Object {
+          {
             "max": 100,
             "min": 0,
             "now": 20,
             "text": "20%",
           }
         }
+        accessible={true}
         data-blade-component="base-box"
         id="progress-9"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -527,8 +534,8 @@ exports[`<ProgressBar /> should render high contrast ProgressBar 1`] = `
           overflow="hidden"
           position="relative"
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(214, 21%, 94%, 0.18)",
                 "height": 2,
                 "overflow": "hidden",
@@ -541,13 +548,13 @@ exports[`<ProgressBar /> should render high contrast ProgressBar 1`] = `
             backgroundColor="hsla(218, 89%, 51%, 1)"
             progress={20}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "hsla(218, 89%, 51%, 1)",
                   "height": "100%",
                   "width": "20%",
                 },
-                Object {
+                {
                   "width": "20%",
                 },
               ]
@@ -555,14 +562,14 @@ exports[`<ProgressBar /> should render high contrast ProgressBar 1`] = `
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "white",
                     "height": "100%",
                     "opacity": 0,
                     "width": "100%",
                   },
-                  Object {
+                  {
                     "opacity": 0,
                   },
                 ]
@@ -579,7 +586,7 @@ exports[`<ProgressBar /> should render high contrast ProgressBar 1`] = `
 exports[`<ProgressBar /> should render high contrast information intent ProgressBar 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -587,8 +594,8 @@ exports[`<ProgressBar /> should render high contrast information intent Progress
   <View
     data-blade-component="progress-bar"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -597,8 +604,8 @@ exports[`<ProgressBar /> should render high contrast information intent Progress
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "width": "100%",
@@ -613,8 +620,8 @@ exports[`<ProgressBar /> should render high contrast information intent Progress
         flexDirection="row"
         justifyContent="flex-end"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "flex-end",
@@ -625,14 +632,15 @@ exports[`<ProgressBar /> should render high contrast information intent Progress
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
               },
             ]
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subdued.highContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -641,8 +649,8 @@ exports[`<ProgressBar /> should render high contrast information intent Progress
             fontWeight="regular"
             lineHeight={50}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(216, 19%, 89%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -669,18 +677,19 @@ exports[`<ProgressBar /> should render high contrast information intent Progress
       <View
         accessibilityRole="progressbar"
         accessibilityValue={
-          Object {
+          {
             "max": 100,
             "min": 0,
             "now": 20,
             "text": "20%",
           }
         }
+        accessible={true}
         data-blade-component="base-box"
         id="progress-17"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -691,8 +700,8 @@ exports[`<ProgressBar /> should render high contrast information intent Progress
           overflow="hidden"
           position="relative"
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(214, 21%, 94%, 0.18)",
                 "height": 2,
                 "overflow": "hidden",
@@ -705,13 +714,13 @@ exports[`<ProgressBar /> should render high contrast information intent Progress
             backgroundColor="hsla(193, 100%, 35%, 1)"
             progress={20}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "hsla(193, 100%, 35%, 1)",
                   "height": "100%",
                   "width": "20%",
                 },
-                Object {
+                {
                   "width": "20%",
                 },
               ]
@@ -719,14 +728,14 @@ exports[`<ProgressBar /> should render high contrast information intent Progress
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "white",
                     "height": "100%",
                     "opacity": 0,
                     "width": "100%",
                   },
-                  Object {
+                  {
                     "opacity": 0,
                   },
                 ]
@@ -743,7 +752,7 @@ exports[`<ProgressBar /> should render high contrast information intent Progress
 exports[`<ProgressBar /> should render high contrast negative intent ProgressBar 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -751,8 +760,8 @@ exports[`<ProgressBar /> should render high contrast negative intent ProgressBar
   <View
     data-blade-component="progress-bar"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -761,8 +770,8 @@ exports[`<ProgressBar /> should render high contrast negative intent ProgressBar
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "width": "100%",
@@ -777,8 +786,8 @@ exports[`<ProgressBar /> should render high contrast negative intent ProgressBar
         flexDirection="row"
         justifyContent="flex-end"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "flex-end",
@@ -789,14 +798,15 @@ exports[`<ProgressBar /> should render high contrast negative intent ProgressBar
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
               },
             ]
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subdued.highContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -805,8 +815,8 @@ exports[`<ProgressBar /> should render high contrast negative intent ProgressBar
             fontWeight="regular"
             lineHeight={50}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(216, 19%, 89%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -833,18 +843,19 @@ exports[`<ProgressBar /> should render high contrast negative intent ProgressBar
       <View
         accessibilityRole="progressbar"
         accessibilityValue={
-          Object {
+          {
             "max": 100,
             "min": 0,
             "now": 20,
             "text": "20%",
           }
         }
+        accessible={true}
         data-blade-component="base-box"
         id="progress-13"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -855,8 +866,8 @@ exports[`<ProgressBar /> should render high contrast negative intent ProgressBar
           overflow="hidden"
           position="relative"
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(214, 21%, 94%, 0.18)",
                 "height": 2,
                 "overflow": "hidden",
@@ -869,13 +880,13 @@ exports[`<ProgressBar /> should render high contrast negative intent ProgressBar
             backgroundColor="hsla(8, 73%, 47%, 1)"
             progress={20}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "hsla(8, 73%, 47%, 1)",
                   "height": "100%",
                   "width": "20%",
                 },
-                Object {
+                {
                   "width": "20%",
                 },
               ]
@@ -883,14 +894,14 @@ exports[`<ProgressBar /> should render high contrast negative intent ProgressBar
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "white",
                     "height": "100%",
                     "opacity": 0,
                     "width": "100%",
                   },
-                  Object {
+                  {
                     "opacity": 0,
                   },
                 ]
@@ -907,7 +918,7 @@ exports[`<ProgressBar /> should render high contrast negative intent ProgressBar
 exports[`<ProgressBar /> should render high contrast neutral intent ProgressBar 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -915,8 +926,8 @@ exports[`<ProgressBar /> should render high contrast neutral intent ProgressBar
   <View
     data-blade-component="progress-bar"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -925,8 +936,8 @@ exports[`<ProgressBar /> should render high contrast neutral intent ProgressBar
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "width": "100%",
@@ -941,8 +952,8 @@ exports[`<ProgressBar /> should render high contrast neutral intent ProgressBar
         flexDirection="row"
         justifyContent="flex-end"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "flex-end",
@@ -953,14 +964,15 @@ exports[`<ProgressBar /> should render high contrast neutral intent ProgressBar
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
               },
             ]
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subdued.highContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -969,8 +981,8 @@ exports[`<ProgressBar /> should render high contrast neutral intent ProgressBar
             fontWeight="regular"
             lineHeight={50}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(216, 19%, 89%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -997,18 +1009,19 @@ exports[`<ProgressBar /> should render high contrast neutral intent ProgressBar
       <View
         accessibilityRole="progressbar"
         accessibilityValue={
-          Object {
+          {
             "max": 100,
             "min": 0,
             "now": 20,
             "text": "20%",
           }
         }
+        accessible={true}
         data-blade-component="base-box"
         id="progress-19"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -1019,8 +1032,8 @@ exports[`<ProgressBar /> should render high contrast neutral intent ProgressBar
           overflow="hidden"
           position="relative"
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(214, 21%, 94%, 0.18)",
                 "height": 2,
                 "overflow": "hidden",
@@ -1033,13 +1046,13 @@ exports[`<ProgressBar /> should render high contrast neutral intent ProgressBar
             backgroundColor="hsla(216, 33%, 29%, 1)"
             progress={20}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "hsla(216, 33%, 29%, 1)",
                   "height": "100%",
                   "width": "20%",
                 },
-                Object {
+                {
                   "width": "20%",
                 },
               ]
@@ -1047,14 +1060,14 @@ exports[`<ProgressBar /> should render high contrast neutral intent ProgressBar
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "white",
                     "height": "100%",
                     "opacity": 0,
                     "width": "100%",
                   },
-                  Object {
+                  {
                     "opacity": 0,
                   },
                 ]
@@ -1071,7 +1084,7 @@ exports[`<ProgressBar /> should render high contrast neutral intent ProgressBar
 exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1079,8 +1092,8 @@ exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1
   <View
     data-blade-component="progress-bar"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -1089,8 +1102,8 @@ exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "width": "100%",
@@ -1105,8 +1118,8 @@ exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1
         flexDirection="row"
         justifyContent="flex-end"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "flex-end",
@@ -1117,14 +1130,15 @@ exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
               },
             ]
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subdued.highContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -1133,8 +1147,8 @@ exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1
             fontWeight="regular"
             lineHeight={50}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(216, 19%, 89%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -1161,18 +1175,19 @@ exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1
       <View
         accessibilityRole="progressbar"
         accessibilityValue={
-          Object {
+          {
             "max": 100,
             "min": 0,
             "now": 20,
             "text": "20%",
           }
         }
+        accessible={true}
         data-blade-component="base-box"
         id="progress-15"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -1183,8 +1198,8 @@ exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1
           overflow="hidden"
           position="relative"
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(214, 21%, 94%, 0.18)",
                 "height": 2,
                 "overflow": "hidden",
@@ -1197,13 +1212,13 @@ exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1
             backgroundColor="hsla(38, 97%, 38%, 1)"
             progress={20}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "hsla(38, 97%, 38%, 1)",
                   "height": "100%",
                   "width": "20%",
                 },
-                Object {
+                {
                   "width": "20%",
                 },
               ]
@@ -1211,14 +1226,14 @@ exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "white",
                     "height": "100%",
                     "opacity": 0,
                     "width": "100%",
                   },
-                  Object {
+                  {
                     "opacity": 0,
                   },
                 ]
@@ -1235,7 +1250,7 @@ exports[`<ProgressBar /> should render high contrast notice intent ProgressBar 1
 exports[`<ProgressBar /> should render high contrast positive intent ProgressBar 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1243,8 +1258,8 @@ exports[`<ProgressBar /> should render high contrast positive intent ProgressBar
   <View
     data-blade-component="progress-bar"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -1253,8 +1268,8 @@ exports[`<ProgressBar /> should render high contrast positive intent ProgressBar
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "width": "100%",
@@ -1269,8 +1284,8 @@ exports[`<ProgressBar /> should render high contrast positive intent ProgressBar
         flexDirection="row"
         justifyContent="flex-end"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "flex-end",
@@ -1281,14 +1296,15 @@ exports[`<ProgressBar /> should render high contrast positive intent ProgressBar
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
               },
             ]
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subdued.highContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -1297,8 +1313,8 @@ exports[`<ProgressBar /> should render high contrast positive intent ProgressBar
             fontWeight="regular"
             lineHeight={50}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(216, 19%, 89%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -1325,18 +1341,19 @@ exports[`<ProgressBar /> should render high contrast positive intent ProgressBar
       <View
         accessibilityRole="progressbar"
         accessibilityValue={
-          Object {
+          {
             "max": 100,
             "min": 0,
             "now": 20,
             "text": "20%",
           }
         }
+        accessible={true}
         data-blade-component="base-box"
         id="progress-11"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -1347,8 +1364,8 @@ exports[`<ProgressBar /> should render high contrast positive intent ProgressBar
           overflow="hidden"
           position="relative"
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(214, 21%, 94%, 0.18)",
                 "height": 2,
                 "overflow": "hidden",
@@ -1361,13 +1378,13 @@ exports[`<ProgressBar /> should render high contrast positive intent ProgressBar
             backgroundColor="hsla(160, 100%, 26%, 1)"
             progress={20}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "hsla(160, 100%, 26%, 1)",
                   "height": "100%",
                   "width": "20%",
                 },
-                Object {
+                {
                   "width": "20%",
                 },
               ]
@@ -1375,14 +1392,14 @@ exports[`<ProgressBar /> should render high contrast positive intent ProgressBar
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "white",
                     "height": "100%",
                     "opacity": 0,
                     "width": "100%",
                   },
-                  Object {
+                  {
                     "opacity": 0,
                   },
                 ]
@@ -1399,7 +1416,7 @@ exports[`<ProgressBar /> should render high contrast positive intent ProgressBar
 exports[`<ProgressBar /> should render low contrast information intent ProgressBar 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1407,8 +1424,8 @@ exports[`<ProgressBar /> should render low contrast information intent ProgressB
   <View
     data-blade-component="progress-bar"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -1417,8 +1434,8 @@ exports[`<ProgressBar /> should render low contrast information intent ProgressB
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "width": "100%",
@@ -1433,8 +1450,8 @@ exports[`<ProgressBar /> should render low contrast information intent ProgressB
         flexDirection="row"
         justifyContent="flex-end"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "flex-end",
@@ -1445,14 +1462,15 @@ exports[`<ProgressBar /> should render low contrast information intent ProgressB
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
               },
             ]
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subdued.lowContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -1461,8 +1479,8 @@ exports[`<ProgressBar /> should render low contrast information intent ProgressB
             fontWeight="regular"
             lineHeight={50}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(217, 18%, 45%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -1489,18 +1507,19 @@ exports[`<ProgressBar /> should render low contrast information intent ProgressB
       <View
         accessibilityRole="progressbar"
         accessibilityValue={
-          Object {
+          {
             "max": 100,
             "min": 0,
             "now": 20,
             "text": "20%",
           }
         }
+        accessible={true}
         data-blade-component="base-box"
         id="progress-16"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -1511,8 +1530,8 @@ exports[`<ProgressBar /> should render low contrast information intent ProgressB
           overflow="hidden"
           position="relative"
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
                 "height": 2,
                 "overflow": "hidden",
@@ -1525,13 +1544,13 @@ exports[`<ProgressBar /> should render low contrast information intent ProgressB
             backgroundColor="hsla(193, 100%, 35%, 1)"
             progress={20}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "hsla(193, 100%, 35%, 1)",
                   "height": "100%",
                   "width": "20%",
                 },
-                Object {
+                {
                   "width": "20%",
                 },
               ]
@@ -1539,14 +1558,14 @@ exports[`<ProgressBar /> should render low contrast information intent ProgressB
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "white",
                     "height": "100%",
                     "opacity": 0,
                     "width": "100%",
                   },
-                  Object {
+                  {
                     "opacity": 0,
                   },
                 ]
@@ -1563,7 +1582,7 @@ exports[`<ProgressBar /> should render low contrast information intent ProgressB
 exports[`<ProgressBar /> should render low contrast negative intent ProgressBar 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1571,8 +1590,8 @@ exports[`<ProgressBar /> should render low contrast negative intent ProgressBar
   <View
     data-blade-component="progress-bar"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -1581,8 +1600,8 @@ exports[`<ProgressBar /> should render low contrast negative intent ProgressBar
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "width": "100%",
@@ -1597,8 +1616,8 @@ exports[`<ProgressBar /> should render low contrast negative intent ProgressBar
         flexDirection="row"
         justifyContent="flex-end"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "flex-end",
@@ -1609,14 +1628,15 @@ exports[`<ProgressBar /> should render low contrast negative intent ProgressBar
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
               },
             ]
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subdued.lowContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -1625,8 +1645,8 @@ exports[`<ProgressBar /> should render low contrast negative intent ProgressBar
             fontWeight="regular"
             lineHeight={50}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(217, 18%, 45%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -1653,18 +1673,19 @@ exports[`<ProgressBar /> should render low contrast negative intent ProgressBar
       <View
         accessibilityRole="progressbar"
         accessibilityValue={
-          Object {
+          {
             "max": 100,
             "min": 0,
             "now": 20,
             "text": "20%",
           }
         }
+        accessible={true}
         data-blade-component="base-box"
         id="progress-12"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -1675,8 +1696,8 @@ exports[`<ProgressBar /> should render low contrast negative intent ProgressBar
           overflow="hidden"
           position="relative"
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
                 "height": 2,
                 "overflow": "hidden",
@@ -1689,13 +1710,13 @@ exports[`<ProgressBar /> should render low contrast negative intent ProgressBar
             backgroundColor="hsla(8, 73%, 47%, 1)"
             progress={20}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "hsla(8, 73%, 47%, 1)",
                   "height": "100%",
                   "width": "20%",
                 },
-                Object {
+                {
                   "width": "20%",
                 },
               ]
@@ -1703,14 +1724,14 @@ exports[`<ProgressBar /> should render low contrast negative intent ProgressBar
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "white",
                     "height": "100%",
                     "opacity": 0,
                     "width": "100%",
                   },
-                  Object {
+                  {
                     "opacity": 0,
                   },
                 ]
@@ -1727,7 +1748,7 @@ exports[`<ProgressBar /> should render low contrast negative intent ProgressBar
 exports[`<ProgressBar /> should render low contrast neutral intent ProgressBar 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1735,8 +1756,8 @@ exports[`<ProgressBar /> should render low contrast neutral intent ProgressBar 1
   <View
     data-blade-component="progress-bar"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -1745,8 +1766,8 @@ exports[`<ProgressBar /> should render low contrast neutral intent ProgressBar 1
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "width": "100%",
@@ -1761,8 +1782,8 @@ exports[`<ProgressBar /> should render low contrast neutral intent ProgressBar 1
         flexDirection="row"
         justifyContent="flex-end"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "flex-end",
@@ -1773,14 +1794,15 @@ exports[`<ProgressBar /> should render low contrast neutral intent ProgressBar 1
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
               },
             ]
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subdued.lowContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -1789,8 +1811,8 @@ exports[`<ProgressBar /> should render low contrast neutral intent ProgressBar 1
             fontWeight="regular"
             lineHeight={50}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(217, 18%, 45%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -1817,18 +1839,19 @@ exports[`<ProgressBar /> should render low contrast neutral intent ProgressBar 1
       <View
         accessibilityRole="progressbar"
         accessibilityValue={
-          Object {
+          {
             "max": 100,
             "min": 0,
             "now": 20,
             "text": "20%",
           }
         }
+        accessible={true}
         data-blade-component="base-box"
         id="progress-18"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -1839,8 +1862,8 @@ exports[`<ProgressBar /> should render low contrast neutral intent ProgressBar 1
           overflow="hidden"
           position="relative"
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
                 "height": 2,
                 "overflow": "hidden",
@@ -1853,13 +1876,13 @@ exports[`<ProgressBar /> should render low contrast neutral intent ProgressBar 1
             backgroundColor="hsla(216, 33%, 29%, 1)"
             progress={20}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "hsla(216, 33%, 29%, 1)",
                   "height": "100%",
                   "width": "20%",
                 },
-                Object {
+                {
                   "width": "20%",
                 },
               ]
@@ -1867,14 +1890,14 @@ exports[`<ProgressBar /> should render low contrast neutral intent ProgressBar 1
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "white",
                     "height": "100%",
                     "opacity": 0,
                     "width": "100%",
                   },
-                  Object {
+                  {
                     "opacity": 0,
                   },
                 ]
@@ -1891,7 +1914,7 @@ exports[`<ProgressBar /> should render low contrast neutral intent ProgressBar 1
 exports[`<ProgressBar /> should render low contrast notice intent ProgressBar 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1899,8 +1922,8 @@ exports[`<ProgressBar /> should render low contrast notice intent ProgressBar 1`
   <View
     data-blade-component="progress-bar"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -1909,8 +1932,8 @@ exports[`<ProgressBar /> should render low contrast notice intent ProgressBar 1`
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "width": "100%",
@@ -1925,8 +1948,8 @@ exports[`<ProgressBar /> should render low contrast notice intent ProgressBar 1`
         flexDirection="row"
         justifyContent="flex-end"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "flex-end",
@@ -1937,14 +1960,15 @@ exports[`<ProgressBar /> should render low contrast notice intent ProgressBar 1`
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
               },
             ]
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subdued.lowContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -1953,8 +1977,8 @@ exports[`<ProgressBar /> should render low contrast notice intent ProgressBar 1`
             fontWeight="regular"
             lineHeight={50}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(217, 18%, 45%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -1981,18 +2005,19 @@ exports[`<ProgressBar /> should render low contrast notice intent ProgressBar 1`
       <View
         accessibilityRole="progressbar"
         accessibilityValue={
-          Object {
+          {
             "max": 100,
             "min": 0,
             "now": 20,
             "text": "20%",
           }
         }
+        accessible={true}
         data-blade-component="base-box"
         id="progress-14"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -2003,8 +2028,8 @@ exports[`<ProgressBar /> should render low contrast notice intent ProgressBar 1`
           overflow="hidden"
           position="relative"
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
                 "height": 2,
                 "overflow": "hidden",
@@ -2017,13 +2042,13 @@ exports[`<ProgressBar /> should render low contrast notice intent ProgressBar 1`
             backgroundColor="hsla(38, 97%, 38%, 1)"
             progress={20}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "hsla(38, 97%, 38%, 1)",
                   "height": "100%",
                   "width": "20%",
                 },
-                Object {
+                {
                   "width": "20%",
                 },
               ]
@@ -2031,14 +2056,14 @@ exports[`<ProgressBar /> should render low contrast notice intent ProgressBar 1`
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "white",
                     "height": "100%",
                     "opacity": 0,
                     "width": "100%",
                   },
-                  Object {
+                  {
                     "opacity": 0,
                   },
                 ]
@@ -2055,7 +2080,7 @@ exports[`<ProgressBar /> should render low contrast notice intent ProgressBar 1`
 exports[`<ProgressBar /> should render low contrast positive intent ProgressBar 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2063,8 +2088,8 @@ exports[`<ProgressBar /> should render low contrast positive intent ProgressBar
   <View
     data-blade-component="progress-bar"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -2073,8 +2098,8 @@ exports[`<ProgressBar /> should render low contrast positive intent ProgressBar
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "width": "100%",
@@ -2089,8 +2114,8 @@ exports[`<ProgressBar /> should render low contrast positive intent ProgressBar
         flexDirection="row"
         justifyContent="flex-end"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "flex-end",
@@ -2101,14 +2126,15 @@ exports[`<ProgressBar /> should render low contrast positive intent ProgressBar
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
               },
             ]
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subdued.lowContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -2117,8 +2143,8 @@ exports[`<ProgressBar /> should render low contrast positive intent ProgressBar
             fontWeight="regular"
             lineHeight={50}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(217, 18%, 45%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -2145,18 +2171,19 @@ exports[`<ProgressBar /> should render low contrast positive intent ProgressBar
       <View
         accessibilityRole="progressbar"
         accessibilityValue={
-          Object {
+          {
             "max": 100,
             "min": 0,
             "now": 20,
             "text": "20%",
           }
         }
+        accessible={true}
         data-blade-component="base-box"
         id="progress-10"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -2167,8 +2194,8 @@ exports[`<ProgressBar /> should render low contrast positive intent ProgressBar
           overflow="hidden"
           position="relative"
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
                 "height": 2,
                 "overflow": "hidden",
@@ -2181,13 +2208,13 @@ exports[`<ProgressBar /> should render low contrast positive intent ProgressBar
             backgroundColor="hsla(160, 100%, 26%, 1)"
             progress={20}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "hsla(160, 100%, 26%, 1)",
                   "height": "100%",
                   "width": "20%",
                 },
-                Object {
+                {
                   "width": "20%",
                 },
               ]
@@ -2195,14 +2222,14 @@ exports[`<ProgressBar /> should render low contrast positive intent ProgressBar
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "white",
                     "height": "100%",
                     "opacity": 0,
                     "width": "100%",
                   },
-                  Object {
+                  {
                     "opacity": 0,
                   },
                 ]
@@ -2219,7 +2246,7 @@ exports[`<ProgressBar /> should render low contrast positive intent ProgressBar
 exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2227,8 +2254,8 @@ exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
   <View
     data-blade-component="progress-bar"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -2237,8 +2264,8 @@ exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "width": "100%",
@@ -2253,8 +2280,8 @@ exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
         flexDirection="row"
         justifyContent="space-between"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -2265,8 +2292,8 @@ exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
                 "marginRight": 16,
               },
@@ -2282,8 +2309,8 @@ exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
             gap="spacing.0"
             maxHeight="36px"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "display": "flex",
                   "flexDirection": "row",
@@ -2295,6 +2322,7 @@ exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.subdued.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -2304,8 +2332,8 @@ exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
               lineHeight={50}
               numberOfLines={2}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 18%, 45%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 12,
@@ -2330,8 +2358,8 @@ exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
             <View
               data-blade-component="visually-hidden"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "borderColor": "black",
                     "borderStyle": "solid",
                     "borderWidth": 0,
@@ -2357,6 +2385,7 @@ exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
               }
             >
               <Text
+                accessible={true}
                 color="surface.text.normal.lowContrast"
                 data-blade-component="text"
                 fontFamily="text"
@@ -2365,8 +2394,8 @@ exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
                 fontWeight="regular"
                 lineHeight={100}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "hsla(217, 56%, 17%, 1)",
                       "fontFamily": "Lato",
                       "fontSize": 14,
@@ -2392,14 +2421,15 @@ exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
               },
             ]
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subdued.lowContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -2408,8 +2438,8 @@ exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
             fontWeight="regular"
             lineHeight={50}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(217, 18%, 45%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -2437,18 +2467,19 @@ exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
         accessibilityLabel="Label"
         accessibilityRole="progressbar"
         accessibilityValue={
-          Object {
+          {
             "max": 100,
             "min": 0,
             "now": 20,
             "text": "20%",
           }
         }
+        accessible={true}
         data-blade-component="base-box"
         id="progress-6"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -2459,8 +2490,8 @@ exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
           overflow="hidden"
           position="relative"
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
                 "height": 4,
                 "overflow": "hidden",
@@ -2473,13 +2504,13 @@ exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
             backgroundColor="hsla(218, 89%, 51%, 1)"
             progress={20}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "hsla(218, 89%, 51%, 1)",
                   "height": "100%",
                   "width": "20%",
                 },
-                Object {
+                {
                   "width": "20%",
                 },
               ]
@@ -2487,14 +2518,14 @@ exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "white",
                     "height": "100%",
                     "opacity": 0,
                     "width": "100%",
                   },
-                  Object {
+                  {
                     "opacity": 0,
                   },
                 ]
@@ -2511,7 +2542,7 @@ exports[`<ProgressBar /> should render medium size ProgressBar 1`] = `
 exports[`<ProgressBar /> should render meter variant of ProgressBar  1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2519,8 +2550,8 @@ exports[`<ProgressBar /> should render meter variant of ProgressBar  1`] = `
   <View
     data-blade-component="progress-bar"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -2529,8 +2560,8 @@ exports[`<ProgressBar /> should render meter variant of ProgressBar  1`] = `
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "width": "100%",
@@ -2545,8 +2576,8 @@ exports[`<ProgressBar /> should render meter variant of ProgressBar  1`] = `
         flexDirection="row"
         justifyContent="flex-end"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "flex-end",
@@ -2557,18 +2588,19 @@ exports[`<ProgressBar /> should render meter variant of ProgressBar  1`] = `
       <View
         accessibilityRole="progressbar"
         accessibilityValue={
-          Object {
+          {
             "max": 100,
             "min": 0,
             "now": 70,
             "text": "70",
           }
         }
+        accessible={true}
         data-blade-component="base-box"
         id="meter-8"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -2579,8 +2611,8 @@ exports[`<ProgressBar /> should render meter variant of ProgressBar  1`] = `
           overflow="hidden"
           position="relative"
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
                 "height": 2,
                 "overflow": "hidden",
@@ -2593,13 +2625,13 @@ exports[`<ProgressBar /> should render meter variant of ProgressBar  1`] = `
             backgroundColor="hsla(218, 89%, 51%, 1)"
             progress={70}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "hsla(218, 89%, 51%, 1)",
                   "height": "100%",
                   "width": "70%",
                 },
-                Object {
+                {
                   "width": "70%",
                 },
               ]
@@ -2607,14 +2639,14 @@ exports[`<ProgressBar /> should render meter variant of ProgressBar  1`] = `
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "white",
                     "height": "100%",
                     "opacity": 0,
                     "width": "100%",
                   },
-                  Object {
+                  {
                     "opacity": 0,
                   },
                 ]
@@ -2631,7 +2663,7 @@ exports[`<ProgressBar /> should render meter variant of ProgressBar  1`] = `
 exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2639,8 +2671,8 @@ exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
   <View
     data-blade-component="progress-bar"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -2649,8 +2681,8 @@ exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "width": "100%",
@@ -2665,8 +2697,8 @@ exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
         flexDirection="row"
         justifyContent="space-between"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -2677,8 +2709,8 @@ exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
                 "marginRight": 16,
               },
@@ -2694,8 +2726,8 @@ exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
             gap="spacing.0"
             maxHeight="36px"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "display": "flex",
                   "flexDirection": "row",
@@ -2707,6 +2739,7 @@ exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.subdued.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -2716,8 +2749,8 @@ exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
               lineHeight={50}
               numberOfLines={2}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 18%, 45%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 12,
@@ -2742,8 +2775,8 @@ exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
             <View
               data-blade-component="visually-hidden"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "borderColor": "black",
                     "borderStyle": "solid",
                     "borderWidth": 0,
@@ -2769,6 +2802,7 @@ exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
               }
             >
               <Text
+                accessible={true}
                 color="surface.text.normal.lowContrast"
                 data-blade-component="text"
                 fontFamily="text"
@@ -2777,8 +2811,8 @@ exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
                 fontWeight="regular"
                 lineHeight={100}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "hsla(217, 56%, 17%, 1)",
                       "fontFamily": "Lato",
                       "fontSize": 14,
@@ -2804,14 +2838,15 @@ exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
               },
             ]
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subdued.lowContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -2820,8 +2855,8 @@ exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
             fontWeight="regular"
             lineHeight={50}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(217, 18%, 45%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -2849,18 +2884,19 @@ exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
         accessibilityLabel="Label"
         accessibilityRole="progressbar"
         accessibilityValue={
-          Object {
+          {
             "max": 100,
             "min": 0,
             "now": 20,
             "text": "20%",
           }
         }
+        accessible={true}
         data-blade-component="base-box"
         id="progress-5"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -2871,8 +2907,8 @@ exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
           overflow="hidden"
           position="relative"
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
                 "height": 2,
                 "overflow": "hidden",
@@ -2885,13 +2921,13 @@ exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
             backgroundColor="hsla(218, 89%, 51%, 1)"
             progress={20}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "hsla(218, 89%, 51%, 1)",
                   "height": "100%",
                   "width": "20%",
                 },
-                Object {
+                {
                   "width": "20%",
                 },
               ]
@@ -2899,14 +2935,14 @@ exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "white",
                     "height": "100%",
                     "opacity": 0,
                     "width": "100%",
                   },
-                  Object {
+                  {
                     "opacity": 0,
                   },
                 ]
@@ -2923,7 +2959,7 @@ exports[`<ProgressBar /> should render small size ProgressBar 1`] = `
 exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2931,7 +2967,7 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -2969,8 +3005,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -2991,7 +3027,7 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -3007,8 +3043,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -3017,21 +3053,22 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.primary.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 0%, 100%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -3060,8 +3097,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
   <View
     data-blade-component="progress-bar"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -3070,8 +3107,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "width": "100%",
@@ -3086,8 +3123,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
         flexDirection="row"
         justifyContent="space-between"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -3098,8 +3135,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
                 "marginRight": 16,
               },
@@ -3115,8 +3152,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
             gap="spacing.0"
             maxHeight="36px"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "display": "flex",
                   "flexDirection": "row",
@@ -3128,6 +3165,7 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.subdued.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -3137,8 +3175,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
               lineHeight={50}
               numberOfLines={2}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 18%, 45%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 12,
@@ -3163,8 +3201,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
             <View
               data-blade-component="visually-hidden"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "borderColor": "black",
                     "borderStyle": "solid",
                     "borderWidth": 0,
@@ -3190,6 +3228,7 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
               }
             >
               <Text
+                accessible={true}
                 color="surface.text.normal.lowContrast"
                 data-blade-component="text"
                 fontFamily="text"
@@ -3198,8 +3237,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
                 fontWeight="regular"
                 lineHeight={100}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "hsla(217, 56%, 17%, 1)",
                       "fontFamily": "Lato",
                       "fontSize": 14,
@@ -3225,14 +3264,15 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
               },
             ]
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subdued.lowContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -3241,8 +3281,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
             fontWeight="regular"
             lineHeight={50}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(217, 18%, 45%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -3270,18 +3310,19 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
         accessibilityLabel="Label"
         accessibilityRole="progressbar"
         accessibilityValue={
-          Object {
+          {
             "max": 100,
             "min": 0,
             "now": 0,
             "text": "0%",
           }
         }
+        accessible={true}
         data-blade-component="base-box"
         id="progress-3"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -3292,8 +3333,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
           overflow="hidden"
           position="relative"
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
                 "height": 2,
                 "overflow": "hidden",
@@ -3306,13 +3347,13 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
             backgroundColor="hsla(218, 89%, 51%, 1)"
             progress={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "hsla(218, 89%, 51%, 1)",
                   "height": "100%",
                   "width": "0%",
                 },
-                Object {
+                {
                   "width": "0%",
                 },
               ]
@@ -3320,14 +3361,14 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "white",
                     "height": "100%",
                     "opacity": 0,
                     "width": "100%",
                   },
-                  Object {
+                  {
                     "opacity": 0,
                   },
                 ]
@@ -3344,7 +3385,7 @@ exports[`<ProgressBar /> should update the progress value appropriately 1`] = `
 exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -3352,7 +3393,7 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -3390,8 +3431,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -3412,7 +3453,7 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -3428,8 +3469,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -3438,21 +3479,22 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.primary.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 0%, 100%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -3481,8 +3523,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
   <View
     data-blade-component="progress-bar"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
@@ -3491,8 +3533,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
             "width": "100%",
@@ -3507,8 +3549,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
         flexDirection="row"
         justifyContent="space-between"
         style={
-          Array [
-            Object {
+          [
+            {
               "display": "flex",
               "flexDirection": "row",
               "justifyContent": "space-between",
@@ -3519,8 +3561,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
                 "marginRight": 16,
               },
@@ -3536,8 +3578,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
             gap="spacing.0"
             maxHeight="36px"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "display": "flex",
                   "flexDirection": "row",
@@ -3549,6 +3591,7 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.subdued.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -3558,8 +3601,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
               lineHeight={50}
               numberOfLines={2}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 18%, 45%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 12,
@@ -3584,8 +3627,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
             <View
               data-blade-component="visually-hidden"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "borderColor": "black",
                     "borderStyle": "solid",
                     "borderWidth": 0,
@@ -3611,6 +3654,7 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
               }
             >
               <Text
+                accessible={true}
                 color="surface.text.normal.lowContrast"
                 data-blade-component="text"
                 fontFamily="text"
@@ -3619,8 +3663,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
                 fontWeight="regular"
                 lineHeight={100}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "hsla(217, 56%, 17%, 1)",
                       "fontFamily": "Lato",
                       "fontSize": 14,
@@ -3646,14 +3690,15 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 4,
               },
             ]
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subdued.lowContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -3662,8 +3707,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
             fontWeight="regular"
             lineHeight={50}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(217, 18%, 45%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -3691,18 +3736,19 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
         accessibilityLabel="Label"
         accessibilityRole="progressbar"
         accessibilityValue={
-          Object {
+          {
             "max": 100,
             "min": 0,
             "now": 60,
             "text": "60%",
           }
         }
+        accessible={true}
         data-blade-component="base-box"
         id="progress-3"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -3713,8 +3759,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
           overflow="hidden"
           position="relative"
           style={
-            Array [
-              Object {
+            [
+              {
                 "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
                 "height": 2,
                 "overflow": "hidden",
@@ -3727,13 +3773,13 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
             backgroundColor="hsla(218, 89%, 51%, 1)"
             progress={60}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "hsla(218, 89%, 51%, 1)",
                   "height": "100%",
                   "width": "60%",
                 },
-                Object {
+                {
                   "width": "60%",
                 },
               ]
@@ -3741,14 +3787,14 @@ exports[`<ProgressBar /> should update the progress value appropriately 2`] = `
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "white",
                     "height": "100%",
                     "opacity": 0,
                     "width": "100%",
                   },
-                  Object {
+                  {
                     "opacity": 0,
                   },
                 ]
diff --git a/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.ssr.test.tsx.snap b/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.ssr.test.tsx.snap
index 668638be4a5..31f4cc17dcb 100644
--- a/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.ssr.test.tsx.snap
+++ b/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ProgressBar /> should render ProgressBar with default properties 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"progress-bar\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx hnXODi\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx ctznZr\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bqWBik\\"><p class=\\"StyledBaseText-dVBfTO deSIOg\\" data-blade-component=\\"text\\">20%</p></div></div><div id=\\"progress-undefined\\" role=\\"progressbar\\" aria-valuenow=\\"20\\" aria-valuetext=\\"20%\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\" data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx lbzRdB\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx ProgressBarFilledweb__BoxWithProgressFillTransition-sc-15oi5xk-3 ProgressBarFilledweb__DeterminateFilledContainer-sc-15oi5xk-4 fNXoki kYqHzO lplggX\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx ProgressBarFilledweb__BoxWithProgressFillTransition-sc-15oi5xk-3 ProgressBarFilledweb__DeterminatePulseAnimation-sc-15oi5xk-5  bHgVSx jPQGWt\\"></div></div></div></div></div></div></div>"`;
+exports[`<ProgressBar /> should render ProgressBar with default properties 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="progress-bar" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hnXODi"><div data-blade-component="base-box" class="BaseBox-bmPWx ctznZr"><div data-blade-component="base-box" class="BaseBox-bmPWx bqWBik"><p class="StyledBaseText-dVBfTO deSIOg" data-blade-component="text">20%</p></div></div><div id="progress-undefined" role="progressbar" aria-valuenow="20" aria-valuetext="20%" aria-valuemin="0" aria-valuemax="100" data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx lbzRdB"><div data-blade-component="base-box" class="BaseBox-bmPWx ProgressBarFilledweb__BoxWithProgressFillTransition-sc-15oi5xk-3 ProgressBarFilledweb__DeterminateFilledContainer-sc-15oi5xk-4 fNXoki kYqHzO lplggX"><div data-blade-component="base-box" class="BaseBox-bmPWx ProgressBarFilledweb__BoxWithProgressFillTransition-sc-15oi5xk-3 ProgressBarFilledweb__DeterminatePulseAnimation-sc-15oi5xk-5  bHgVSx jPQGWt"></div></div></div></div></div></div></div>"`;
 
 exports[`<ProgressBar /> should render ProgressBar with default properties 2`] = `
 <div
diff --git a/packages/blade/src/components/Radio/__tests__/RadioGroup.native.test.tsx b/packages/blade/src/components/Radio/__tests__/RadioGroup.native.test.tsx
index 2738b8dba78..624965148b5 100644
--- a/packages/blade/src/components/Radio/__tests__/RadioGroup.native.test.tsx
+++ b/packages/blade/src/components/Radio/__tests__/RadioGroup.native.test.tsx
@@ -42,7 +42,7 @@ describe('<RadioGroup />', () => {
 
   it('should propagate isDisabled prop to child radios', () => {
     const labelText = 'Select fruits';
-    const { getAllByA11yRole } = renderWithTheme(
+    const { getAllByRole } = renderWithTheme(
       <RadioGroup isDisabled label={labelText}>
         <Radio value="apple">Apple</Radio>
         <Radio value="mango">Mango</Radio>
@@ -50,7 +50,7 @@ describe('<RadioGroup />', () => {
       </RadioGroup>,
     );
 
-    const radios = getAllByA11yRole('radio');
+    const radios = getAllByRole('radio');
     radios.forEach((radio) => {
       expect(radio.props.accessibilityState.disabled).toBeTruthy();
     });
@@ -58,7 +58,7 @@ describe('<RadioGroup />', () => {
 
   it('should propagate name prop to child radios', () => {
     const labelText = 'Select fruits';
-    const { getAllByA11yRole } = renderWithTheme(
+    const { getAllByRole } = renderWithTheme(
       <RadioGroup isDisabled label={labelText} name="fruits">
         <Radio value="apple">Apple</Radio>
         <Radio value="mango">Mango</Radio>
@@ -66,7 +66,7 @@ describe('<RadioGroup />', () => {
       </RadioGroup>,
     );
 
-    const radios = getAllByA11yRole('radio');
+    const radios = getAllByRole('radio');
     radios.forEach((radio) => {
       expect(radio.props.name).toBe('fruits');
     });
@@ -97,7 +97,7 @@ describe('<RadioGroup />', () => {
     const helpText = 'Select one';
     const errorText = 'Invalid selection';
 
-    const { getAllByA11yRole, queryByText } = renderWithTheme(
+    const { getAllByRole, queryByText } = renderWithTheme(
       <RadioGroup
         helpText={helpText}
         errorText={errorText}
@@ -113,7 +113,7 @@ describe('<RadioGroup />', () => {
     expect(queryByText(helpText)).toBeFalsy();
     expect(queryByText(errorText)).toBeTruthy();
 
-    const radios = getAllByA11yRole('radio');
+    const radios = getAllByRole('radio');
     radios.forEach((radio) => {
       expect(radio.props.accessibilityInvalid).toBeTruthy();
     });
@@ -122,7 +122,7 @@ describe('<RadioGroup />', () => {
   it('should work in uncontrolled mode', () => {
     const labelText = 'Select fruits';
     const onChange = jest.fn();
-    const { getByA11yState, getAllByA11yRole } = renderWithTheme(
+    const { getByA11yState, getAllByRole } = renderWithTheme(
       <RadioGroup name="fruits" label={labelText} defaultValue="apple" onChange={onChange}>
         <Radio value="apple">Apple</Radio>
         <Radio value="mango">Mango</Radio>
@@ -133,7 +133,7 @@ describe('<RadioGroup />', () => {
     const radio = getByA11yState({ checked: true });
     expect(radio.props.value).toBe('apple');
 
-    const radios = getAllByA11yRole('radio');
+    const radios = getAllByRole('radio');
     const apple = radios.find((radio) => radio.props.value === 'apple');
     const mango = radios.find((radio) => radio.props.value === 'mango');
     const orange = radios.find((radio) => radio.props.value === 'orange');
@@ -174,12 +174,12 @@ describe('<RadioGroup />', () => {
         </>
       );
     };
-    const { getByA11yState, getAllByA11yRole, getByTestId } = renderWithTheme(<Example />);
+    const { getByA11yState, getAllByRole, getByTestId } = renderWithTheme(<Example />);
 
     const radio = getByA11yState({ checked: true });
     expect(radio.props.value).toBe('apple');
 
-    const radios = getAllByA11yRole('radio');
+    const radios = getAllByRole('radio');
     const apple = radios.find((radio) => radio.props.value === 'apple');
     const mango = radios.find((radio) => radio.props.value === 'mango');
     const orange = radios.find((radio) => radio.props.value === 'orange');
diff --git a/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.native.test.tsx.snap b/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.native.test.tsx.snap
index 488df7a124b..c725446f1a5 100644
--- a/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.native.test.tsx.snap
+++ b/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Radio /> should render radio with label 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,20 +11,21 @@ exports[`<Radio /> should render radio with label 1`] = `
   <View
     data-blade-component="base-box"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabelledBy="radio-group-3-label"
       accessibilityRole="radiogroup"
+      accessible={true}
       data-blade-component="radio-group"
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
           },
@@ -34,8 +35,8 @@ exports[`<Radio /> should render radio with label 1`] = `
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "marginBottom": 4,
               "marginRight": 16,
             },
@@ -51,8 +52,8 @@ exports[`<Radio /> should render radio with label 1`] = `
           gap="spacing.0"
           maxHeight="36px"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -64,6 +65,7 @@ exports[`<Radio /> should render radio with label 1`] = `
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subdued.lowContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -73,8 +75,8 @@ exports[`<Radio /> should render radio with label 1`] = `
             lineHeight={50}
             numberOfLines={2}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(217, 18%, 45%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -99,8 +101,8 @@ exports[`<Radio /> should render radio with label 1`] = `
           <View
             data-blade-component="visually-hidden"
             style={
-              Array [
-                Object {
+              [
+                {
                   "borderColor": "black",
                   "borderStyle": "solid",
                   "borderWidth": 0,
@@ -126,6 +128,7 @@ exports[`<Radio /> should render radio with label 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -134,8 +137,8 @@ exports[`<Radio /> should render radio with label 1`] = `
               fontWeight="regular"
               lineHeight={100}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 14,
@@ -163,8 +166,8 @@ exports[`<Radio /> should render radio with label 1`] = `
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -173,8 +176,8 @@ exports[`<Radio /> should render radio with label 1`] = `
           display="flex"
           flexDirection="column"
           style={
-            Array [
-              Object {
+            [
+              {
                 "display": "flex",
                 "flexDirection": "column",
               },
@@ -184,8 +187,8 @@ exports[`<Radio /> should render radio with label 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "marginBottom": 0,
                 },
               ]
@@ -194,8 +197,8 @@ exports[`<Radio /> should render radio with label 1`] = `
             <View
               data-blade-component="base-box"
               style={
-                Array [
-                  Object {},
+                [
+                  {},
                 ]
               }
             >
@@ -205,7 +208,7 @@ exports[`<Radio /> should render radio with label 1`] = `
                 accessibilityRequired={false}
                 accessibilityRole="radio"
                 accessibilityState={
-                  Object {
+                  {
                     "checked": false,
                     "disabled": false,
                   }
@@ -224,8 +227,8 @@ exports[`<Radio /> should render radio with label 1`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "display": "flex",
                       "flexDirection": "row",
                       "marginBottom": 2,
@@ -240,8 +243,8 @@ exports[`<Radio /> should render radio with label 1`] = `
                   display="flex"
                   flexDirection="column"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                         "flexDirection": "column",
                       },
@@ -254,8 +257,8 @@ exports[`<Radio /> should render radio with label 1`] = `
                     display="flex"
                     flexDirection="row"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "display": "flex",
                           "flexDirection": "row",
@@ -270,8 +273,8 @@ exports[`<Radio /> should render radio with label 1`] = `
                       isNegative={false}
                       size="medium"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "center",
                             "backgroundColor": "transparent",
                             "borderColor": "hsla(214, 18%, 69%, 1)",
@@ -294,14 +297,15 @@ exports[`<Radio /> should render radio with label 1`] = `
                     <View
                       data-blade-component="base-box"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "marginLeft": 4,
                           },
                         ]
                       }
                     />
                     <Text
+                      accessible={true}
                       color="surface.text.subtle.lowContrast"
                       data-blade-component="base-text"
                       fontFamily="text"
@@ -309,8 +313,8 @@ exports[`<Radio /> should render radio with label 1`] = `
                       fontWeight="regular"
                       lineHeight={100}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "hsla(216, 27%, 36%, 1)",
                             "fontFamily": "Lato",
                             "fontSize": 14,
@@ -336,8 +340,8 @@ exports[`<Radio /> should render radio with label 1`] = `
                   <View
                     data-blade-component="base-box"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginLeft": 24,
                         },
                       ]
@@ -357,7 +361,7 @@ exports[`<Radio /> should render radio with label 1`] = `
 exports[`<Radio /> should set disabled state with isDisabled 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -365,20 +369,21 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
   <View
     data-blade-component="base-box"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabelledBy="radio-group-10-label"
       accessibilityRole="radiogroup"
+      accessible={true}
       data-blade-component="radio-group"
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
           },
@@ -388,8 +393,8 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "marginBottom": 4,
               "marginRight": 16,
             },
@@ -405,8 +410,8 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
           gap="spacing.0"
           maxHeight="36px"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -418,6 +423,7 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subdued.lowContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -427,8 +433,8 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
             lineHeight={50}
             numberOfLines={2}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(217, 18%, 45%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -453,8 +459,8 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
           <View
             data-blade-component="visually-hidden"
             style={
-              Array [
-                Object {
+              [
+                {
                   "borderColor": "black",
                   "borderStyle": "solid",
                   "borderWidth": 0,
@@ -480,6 +486,7 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -488,8 +495,8 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
               fontWeight="regular"
               lineHeight={100}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 14,
@@ -517,8 +524,8 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -527,8 +534,8 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
           display="flex"
           flexDirection="column"
           style={
-            Array [
-              Object {
+            [
+              {
                 "display": "flex",
                 "flexDirection": "column",
               },
@@ -538,8 +545,8 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "marginBottom": 0,
                 },
               ]
@@ -548,8 +555,8 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
             <View
               data-blade-component="base-box"
               style={
-                Array [
-                  Object {},
+                [
+                  {},
                 ]
               }
             >
@@ -559,7 +566,7 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
                 accessibilityRequired={false}
                 accessibilityRole="radio"
                 accessibilityState={
-                  Object {
+                  {
                     "checked": false,
                     "disabled": true,
                   }
@@ -578,8 +585,8 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "display": "flex",
                       "flexDirection": "row",
                       "marginBottom": 2,
@@ -594,8 +601,8 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
                   display="flex"
                   flexDirection="column"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                         "flexDirection": "column",
                       },
@@ -608,8 +615,8 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
                     display="flex"
                     flexDirection="row"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "display": "flex",
                           "flexDirection": "row",
@@ -624,8 +631,8 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
                       isNegative={false}
                       size="medium"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "center",
                             "backgroundColor": "transparent",
                             "borderColor": "hsla(216, 15%, 54%, 0.18)",
@@ -648,14 +655,15 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
                     <View
                       data-blade-component="base-box"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "marginLeft": 4,
                           },
                         ]
                       }
                     />
                     <Text
+                      accessible={true}
                       color="surface.text.placeholder.lowContrast"
                       data-blade-component="base-text"
                       fontFamily="text"
@@ -663,8 +671,8 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
                       fontWeight="regular"
                       lineHeight={100}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "hsla(214, 18%, 69%, 1)",
                             "fontFamily": "Lato",
                             "fontSize": 14,
@@ -690,8 +698,8 @@ exports[`<Radio /> should set disabled state with isDisabled 1`] = `
                   <View
                     data-blade-component="base-box"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginLeft": 24,
                         },
                       ]
diff --git a/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.ssr.test.tsx.snap b/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.ssr.test.tsx.snap
index 0830890ca6b..24fee4198fb 100644
--- a/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Radio /> should render with help text 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><div role=\\"group\\" aria-labelledby=\\"radio-group-undefined-label\\" data-blade-component=\\"radio-group\\" class=\\"BaseBox-bmPWx xrMLB\\"><span style=\\"width:auto;flex-shrink:0;margin-right:16px\\" id=\\"radio-group-undefined-label\\" data-blade-component=\\"form-label\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bqWBik\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx eeqPab\\"><p class=\\"StyledBaseText-dVBfTO gaMIEc\\" data-blade-component=\\"text\\">Select fruit</p><div data-blade-component=\\"visually-hidden\\" class=\\"VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw\\"><p class=\\"StyledBaseText-dVBfTO eIdQFo\\" data-blade-component=\\"text\\">,Select One</p></div></div></div></span><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx xrMLB\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bqWBik\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><label data-blade-component=\\"radio-label\\" class=\\"SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 bgSmPY\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx xrMLB\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fSbYvl\\"><input type=\\"radio\\" name=\\"radio-group-undefined\\" value=\\"apple\\" role=\\"radio\\" aria-required=\\"false\\" aria-invalid=\\"false\\" aria-disabled=\\"false\\" aria-checked=\\"false\\" aria-describedby=\\"radio-undefined-helptext-undefined\\" class=\\"SelectorInputweb__StyledInput-sc-1bnkrae-0 eWXntk\\"/><div data-blade-component=\\"radio-icon-wrapper\\" class=\\"RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 doUKpB\\"></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bigiAM\\"></div><div class=\\"StyledBaseText-dVBfTO ktUwvA\\" data-blade-component=\\"base-text\\">Apple</div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx cCkEge\\"><span class=\\"StyledBaseText-dVBfTO eZXGXv\\" id=\\"radio-undefined-helptext-undefined\\" data-blade-component=\\"base-text\\">Apple Help</span></div></div></label></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx cCNoRc\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><label data-blade-component=\\"radio-label\\" class=\\"SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 bgSmPY\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx xrMLB\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fSbYvl\\"><input type=\\"radio\\" name=\\"radio-group-undefined\\" value=\\"mango\\" role=\\"radio\\" aria-required=\\"false\\" aria-invalid=\\"false\\" aria-disabled=\\"false\\" aria-checked=\\"false\\" aria-describedby=\\"radio-undefined-helptext-undefined\\" class=\\"SelectorInputweb__StyledInput-sc-1bnkrae-0 eWXntk\\"/><div data-blade-component=\\"radio-icon-wrapper\\" class=\\"RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 doUKpB\\"></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bigiAM\\"></div><div class=\\"StyledBaseText-dVBfTO ktUwvA\\" data-blade-component=\\"base-text\\">Mango</div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx cCkEge\\"></div></div></label></div></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx gnjvtY\\"><span style=\\"word-break:break-all\\" data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fSbYvl\\"><span class=\\"StyledBaseText-dVBfTO eZXGXv\\" data-blade-component=\\"base-text\\">Select One</span></span></div></div></div></div></div>"`;
+exports[`<Radio /> should render with help text 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="group" aria-labelledby="radio-group-undefined-label" data-blade-component="radio-group" class="BaseBox-bmPWx xrMLB"><span style="width:auto;flex-shrink:0;margin-right:16px" id="radio-group-undefined-label" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx bqWBik"><div data-blade-component="base-box" class="BaseBox-bmPWx eeqPab"><p class="StyledBaseText-dVBfTO gaMIEc" data-blade-component="text">Select fruit</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">,Select One</p></div></div></div></span><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx xrMLB"><div data-blade-component="base-box" class="BaseBox-bmPWx bqWBik"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 bgSmPY"><div data-blade-component="base-box" class="BaseBox-bmPWx xrMLB"><div data-blade-component="base-box" class="BaseBox-bmPWx fSbYvl"><input type="radio" name="radio-group-undefined" value="apple" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 eWXntk"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 doUKpB"></div><div data-blade-component="base-box" class="BaseBox-bmPWx bigiAM"></div><div class="StyledBaseText-dVBfTO ktUwvA" data-blade-component="base-text">Apple</div></div><div data-blade-component="base-box" class="BaseBox-bmPWx cCkEge"><span class="StyledBaseText-dVBfTO eZXGXv" id="radio-undefined-helptext-undefined" data-blade-component="base-text">Apple Help</span></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx cCNoRc"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 bgSmPY"><div data-blade-component="base-box" class="BaseBox-bmPWx xrMLB"><div data-blade-component="base-box" class="BaseBox-bmPWx fSbYvl"><input type="radio" name="radio-group-undefined" value="mango" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 eWXntk"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 doUKpB"></div><div data-blade-component="base-box" class="BaseBox-bmPWx bigiAM"></div><div class="StyledBaseText-dVBfTO ktUwvA" data-blade-component="base-text">Mango</div></div><div data-blade-component="base-box" class="BaseBox-bmPWx cCkEge"></div></div></label></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx gnjvtY"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fSbYvl"><span class="StyledBaseText-dVBfTO eZXGXv" data-blade-component="base-text">Select One</span></span></div></div></div></div></div>"`;
 
 exports[`<Radio /> should render with help text 2`] = `
 <div
diff --git a/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.native.test.tsx.snap b/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.native.test.tsx.snap
index 55e3c8a8b6a..b3ab45dd0e9 100644
--- a/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.native.test.tsx.snap
+++ b/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<RadioGroup /> should render with help text 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,20 +11,21 @@ exports[`<RadioGroup /> should render with help text 1`] = `
   <View
     data-blade-component="base-box"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabelledBy="radio-group-15-label"
       accessibilityRole="radiogroup"
+      accessible={true}
       data-blade-component="radio-group"
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
           },
@@ -34,8 +35,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "marginBottom": 4,
               "marginRight": 16,
             },
@@ -51,8 +52,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
           gap="spacing.0"
           maxHeight="36px"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -64,6 +65,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subdued.lowContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -73,8 +75,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
             lineHeight={50}
             numberOfLines={2}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(217, 18%, 45%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -99,8 +101,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
           <View
             data-blade-component="visually-hidden"
             style={
-              Array [
-                Object {
+              [
+                {
                   "borderColor": "black",
                   "borderStyle": "solid",
                   "borderWidth": 0,
@@ -126,6 +128,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -134,8 +137,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
               fontWeight="regular"
               lineHeight={100}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 14,
@@ -163,8 +166,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -173,8 +176,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
           display="flex"
           flexDirection="column"
           style={
-            Array [
-              Object {
+            [
+              {
                 "display": "flex",
                 "flexDirection": "column",
               },
@@ -184,8 +187,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "marginBottom": 8,
                 },
               ]
@@ -194,8 +197,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
             <View
               data-blade-component="base-box"
               style={
-                Array [
-                  Object {},
+                [
+                  {},
                 ]
               }
             >
@@ -205,7 +208,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                 accessibilityRequired={false}
                 accessibilityRole="radio"
                 accessibilityState={
-                  Object {
+                  {
                     "checked": false,
                     "disabled": false,
                   }
@@ -224,8 +227,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "display": "flex",
                       "flexDirection": "row",
                       "marginBottom": 2,
@@ -240,8 +243,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                   display="flex"
                   flexDirection="column"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                         "flexDirection": "column",
                       },
@@ -254,8 +257,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                     display="flex"
                     flexDirection="row"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "display": "flex",
                           "flexDirection": "row",
@@ -270,8 +273,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                       isNegative={false}
                       size="medium"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "center",
                             "backgroundColor": "transparent",
                             "borderColor": "hsla(214, 18%, 69%, 1)",
@@ -294,14 +297,15 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                     <View
                       data-blade-component="base-box"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "marginLeft": 4,
                           },
                         ]
                       }
                     />
                     <Text
+                      accessible={true}
                       color="surface.text.subtle.lowContrast"
                       data-blade-component="base-text"
                       fontFamily="text"
@@ -309,8 +313,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                       fontWeight="regular"
                       lineHeight={100}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "hsla(216, 27%, 36%, 1)",
                             "fontFamily": "Lato",
                             "fontSize": 14,
@@ -336,8 +340,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                   <View
                     data-blade-component="base-box"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginLeft": 24,
                         },
                       ]
@@ -350,8 +354,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "marginBottom": 8,
                 },
               ]
@@ -360,8 +364,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
             <View
               data-blade-component="base-box"
               style={
-                Array [
-                  Object {},
+                [
+                  {},
                 ]
               }
             >
@@ -371,7 +375,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                 accessibilityRequired={false}
                 accessibilityRole="radio"
                 accessibilityState={
-                  Object {
+                  {
                     "checked": false,
                     "disabled": false,
                   }
@@ -390,8 +394,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "display": "flex",
                       "flexDirection": "row",
                       "marginBottom": 2,
@@ -406,8 +410,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                   display="flex"
                   flexDirection="column"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                         "flexDirection": "column",
                       },
@@ -420,8 +424,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                     display="flex"
                     flexDirection="row"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "display": "flex",
                           "flexDirection": "row",
@@ -436,8 +440,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                       isNegative={false}
                       size="medium"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "center",
                             "backgroundColor": "transparent",
                             "borderColor": "hsla(214, 18%, 69%, 1)",
@@ -460,14 +464,15 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                     <View
                       data-blade-component="base-box"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "marginLeft": 4,
                           },
                         ]
                       }
                     />
                     <Text
+                      accessible={true}
                       color="surface.text.subtle.lowContrast"
                       data-blade-component="base-text"
                       fontFamily="text"
@@ -475,8 +480,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                       fontWeight="regular"
                       lineHeight={100}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "hsla(216, 27%, 36%, 1)",
                             "fontFamily": "Lato",
                             "fontSize": 14,
@@ -502,8 +507,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                   <View
                     data-blade-component="base-box"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginLeft": 24,
                         },
                       ]
@@ -516,8 +521,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "marginBottom": 0,
                 },
               ]
@@ -526,8 +531,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
             <View
               data-blade-component="base-box"
               style={
-                Array [
-                  Object {},
+                [
+                  {},
                 ]
               }
             >
@@ -537,7 +542,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                 accessibilityRequired={false}
                 accessibilityRole="radio"
                 accessibilityState={
-                  Object {
+                  {
                     "checked": false,
                     "disabled": false,
                   }
@@ -556,8 +561,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "display": "flex",
                       "flexDirection": "row",
                       "marginBottom": 2,
@@ -572,8 +577,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                   display="flex"
                   flexDirection="column"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                         "flexDirection": "column",
                       },
@@ -586,8 +591,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                     display="flex"
                     flexDirection="row"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "display": "flex",
                           "flexDirection": "row",
@@ -602,8 +607,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                       isNegative={false}
                       size="medium"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "center",
                             "backgroundColor": "transparent",
                             "borderColor": "hsla(214, 18%, 69%, 1)",
@@ -626,14 +631,15 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                     <View
                       data-blade-component="base-box"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "marginLeft": 4,
                           },
                         ]
                       }
                     />
                     <Text
+                      accessible={true}
                       color="surface.text.subtle.lowContrast"
                       data-blade-component="base-text"
                       fontFamily="text"
@@ -641,8 +647,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                       fontWeight="regular"
                       lineHeight={100}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "hsla(216, 27%, 36%, 1)",
                             "fontFamily": "Lato",
                             "fontSize": 14,
@@ -668,8 +674,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
                   <View
                     data-blade-component="base-box"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginLeft": 24,
                         },
                       ]
@@ -683,8 +689,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
         <View
           data-blade-component="base-box"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginTop": 4,
               },
             ]
@@ -696,8 +702,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
             display="flex"
             flexDirection="row"
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "display": "flex",
                   "flexDirection": "row",
@@ -706,6 +712,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.muted.lowContrast"
               data-blade-component="base-text"
               fontFamily="text"
@@ -713,8 +720,8 @@ exports[`<RadioGroup /> should render with help text 1`] = `
               fontStyle="italic"
               lineHeight={50}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(216, 16%, 60%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 11,
@@ -747,7 +754,7 @@ exports[`<RadioGroup /> should render with help text 1`] = `
 exports[`<RadioGroup /> should render with label 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -755,20 +762,21 @@ exports[`<RadioGroup /> should render with label 1`] = `
   <View
     data-blade-component="base-box"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabelledBy="radio-group-7-label"
       accessibilityRole="radiogroup"
+      accessible={true}
       data-blade-component="radio-group"
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "column",
           },
@@ -778,8 +786,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "marginBottom": 4,
               "marginRight": 16,
             },
@@ -795,8 +803,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
           gap="spacing.0"
           maxHeight="36px"
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "flexDirection": "row",
@@ -808,6 +816,7 @@ exports[`<RadioGroup /> should render with label 1`] = `
           }
         >
           <Text
+            accessible={true}
             color="surface.text.subdued.lowContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -817,8 +826,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
             lineHeight={50}
             numberOfLines={2}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(217, 18%, 45%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -843,8 +852,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
           <View
             data-blade-component="visually-hidden"
             style={
-              Array [
-                Object {
+              [
+                {
                   "borderColor": "black",
                   "borderStyle": "solid",
                   "borderWidth": 0,
@@ -870,6 +879,7 @@ exports[`<RadioGroup /> should render with label 1`] = `
             }
           >
             <Text
+              accessible={true}
               color="surface.text.normal.lowContrast"
               data-blade-component="text"
               fontFamily="text"
@@ -878,8 +888,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
               fontWeight="regular"
               lineHeight={100}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "hsla(217, 56%, 17%, 1)",
                     "fontFamily": "Lato",
                     "fontSize": 14,
@@ -907,8 +917,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {},
+          [
+            {},
           ]
         }
       >
@@ -917,8 +927,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
           display="flex"
           flexDirection="column"
           style={
-            Array [
-              Object {
+            [
+              {
                 "display": "flex",
                 "flexDirection": "column",
               },
@@ -928,8 +938,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "marginBottom": 8,
                 },
               ]
@@ -938,8 +948,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
             <View
               data-blade-component="base-box"
               style={
-                Array [
-                  Object {},
+                [
+                  {},
                 ]
               }
             >
@@ -949,7 +959,7 @@ exports[`<RadioGroup /> should render with label 1`] = `
                 accessibilityRequired={false}
                 accessibilityRole="radio"
                 accessibilityState={
-                  Object {
+                  {
                     "checked": false,
                     "disabled": false,
                   }
@@ -968,8 +978,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "display": "flex",
                       "flexDirection": "row",
                       "marginBottom": 2,
@@ -984,8 +994,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
                   display="flex"
                   flexDirection="column"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                         "flexDirection": "column",
                       },
@@ -998,8 +1008,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
                     display="flex"
                     flexDirection="row"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "display": "flex",
                           "flexDirection": "row",
@@ -1014,8 +1024,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
                       isNegative={false}
                       size="medium"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "center",
                             "backgroundColor": "transparent",
                             "borderColor": "hsla(214, 18%, 69%, 1)",
@@ -1038,14 +1048,15 @@ exports[`<RadioGroup /> should render with label 1`] = `
                     <View
                       data-blade-component="base-box"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "marginLeft": 4,
                           },
                         ]
                       }
                     />
                     <Text
+                      accessible={true}
                       color="surface.text.subtle.lowContrast"
                       data-blade-component="base-text"
                       fontFamily="text"
@@ -1053,8 +1064,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
                       fontWeight="regular"
                       lineHeight={100}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "hsla(216, 27%, 36%, 1)",
                             "fontFamily": "Lato",
                             "fontSize": 14,
@@ -1080,8 +1091,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
                   <View
                     data-blade-component="base-box"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginLeft": 24,
                         },
                       ]
@@ -1094,8 +1105,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "marginBottom": 8,
                 },
               ]
@@ -1104,8 +1115,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
             <View
               data-blade-component="base-box"
               style={
-                Array [
-                  Object {},
+                [
+                  {},
                 ]
               }
             >
@@ -1115,7 +1126,7 @@ exports[`<RadioGroup /> should render with label 1`] = `
                 accessibilityRequired={false}
                 accessibilityRole="radio"
                 accessibilityState={
-                  Object {
+                  {
                     "checked": false,
                     "disabled": false,
                   }
@@ -1134,8 +1145,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "display": "flex",
                       "flexDirection": "row",
                       "marginBottom": 2,
@@ -1150,8 +1161,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
                   display="flex"
                   flexDirection="column"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                         "flexDirection": "column",
                       },
@@ -1164,8 +1175,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
                     display="flex"
                     flexDirection="row"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "display": "flex",
                           "flexDirection": "row",
@@ -1180,8 +1191,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
                       isNegative={false}
                       size="medium"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "center",
                             "backgroundColor": "transparent",
                             "borderColor": "hsla(214, 18%, 69%, 1)",
@@ -1204,14 +1215,15 @@ exports[`<RadioGroup /> should render with label 1`] = `
                     <View
                       data-blade-component="base-box"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "marginLeft": 4,
                           },
                         ]
                       }
                     />
                     <Text
+                      accessible={true}
                       color="surface.text.subtle.lowContrast"
                       data-blade-component="base-text"
                       fontFamily="text"
@@ -1219,8 +1231,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
                       fontWeight="regular"
                       lineHeight={100}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "hsla(216, 27%, 36%, 1)",
                             "fontFamily": "Lato",
                             "fontSize": 14,
@@ -1246,8 +1258,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
                   <View
                     data-blade-component="base-box"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginLeft": 24,
                         },
                       ]
@@ -1260,8 +1272,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
           <View
             data-blade-component="base-box"
             style={
-              Array [
-                Object {
+              [
+                {
                   "marginBottom": 0,
                 },
               ]
@@ -1270,8 +1282,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
             <View
               data-blade-component="base-box"
               style={
-                Array [
-                  Object {},
+                [
+                  {},
                 ]
               }
             >
@@ -1281,7 +1293,7 @@ exports[`<RadioGroup /> should render with label 1`] = `
                 accessibilityRequired={false}
                 accessibilityRole="radio"
                 accessibilityState={
-                  Object {
+                  {
                     "checked": false,
                     "disabled": false,
                   }
@@ -1300,8 +1312,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "display": "flex",
                       "flexDirection": "row",
                       "marginBottom": 2,
@@ -1316,8 +1328,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
                   display="flex"
                   flexDirection="column"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "display": "flex",
                         "flexDirection": "column",
                       },
@@ -1330,8 +1342,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
                     display="flex"
                     flexDirection="row"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "display": "flex",
                           "flexDirection": "row",
@@ -1346,8 +1358,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
                       isNegative={false}
                       size="medium"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "alignItems": "center",
                             "backgroundColor": "transparent",
                             "borderColor": "hsla(214, 18%, 69%, 1)",
@@ -1370,14 +1382,15 @@ exports[`<RadioGroup /> should render with label 1`] = `
                     <View
                       data-blade-component="base-box"
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "marginLeft": 4,
                           },
                         ]
                       }
                     />
                     <Text
+                      accessible={true}
                       color="surface.text.subtle.lowContrast"
                       data-blade-component="base-text"
                       fontFamily="text"
@@ -1385,8 +1398,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
                       fontWeight="regular"
                       lineHeight={100}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "hsla(216, 27%, 36%, 1)",
                             "fontFamily": "Lato",
                             "fontSize": 14,
@@ -1412,8 +1425,8 @@ exports[`<RadioGroup /> should render with label 1`] = `
                   <View
                     data-blade-component="base-box"
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginLeft": 24,
                         },
                       ]
diff --git a/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.ssr.test.tsx.snap b/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.ssr.test.tsx.snap
index b9642ba9672..fbbf3e590ae 100644
--- a/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Radio/__tests__/__snapshots__/RadioGroup.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<RadioGroup /> should render with help text 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><div role=\\"group\\" aria-labelledby=\\"radio-group-undefined-label\\" data-blade-component=\\"radio-group\\" class=\\"BaseBox-bmPWx xrMLB\\"><span style=\\"width:auto;flex-shrink:0;margin-right:16px\\" id=\\"radio-group-undefined-label\\" data-blade-component=\\"form-label\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bqWBik\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx eeqPab\\"><p class=\\"StyledBaseText-dVBfTO gaMIEc\\" data-blade-component=\\"text\\">Select fruit</p><div data-blade-component=\\"visually-hidden\\" class=\\"VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw\\"><p class=\\"StyledBaseText-dVBfTO eIdQFo\\" data-blade-component=\\"text\\">,Select one</p></div></div></div></span><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx xrMLB\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bqWBik\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><label data-blade-component=\\"radio-label\\" class=\\"SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 bgSmPY\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx xrMLB\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fSbYvl\\"><input type=\\"radio\\" name=\\"radio-group-undefined\\" value=\\"apple\\" role=\\"radio\\" aria-required=\\"false\\" aria-invalid=\\"false\\" aria-disabled=\\"false\\" aria-checked=\\"false\\" aria-describedby=\\"radio-undefined-helptext-undefined\\" class=\\"SelectorInputweb__StyledInput-sc-1bnkrae-0 eWXntk\\"/><div data-blade-component=\\"radio-icon-wrapper\\" class=\\"RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 doUKpB\\"></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bigiAM\\"></div><div class=\\"StyledBaseText-dVBfTO ktUwvA\\" data-blade-component=\\"base-text\\">Apple</div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx cCkEge\\"></div></div></label></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bqWBik\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><label data-blade-component=\\"radio-label\\" class=\\"SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 bgSmPY\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx xrMLB\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fSbYvl\\"><input type=\\"radio\\" name=\\"radio-group-undefined\\" value=\\"mango\\" role=\\"radio\\" aria-required=\\"false\\" aria-invalid=\\"false\\" aria-disabled=\\"false\\" aria-checked=\\"false\\" aria-describedby=\\"radio-undefined-helptext-undefined\\" class=\\"SelectorInputweb__StyledInput-sc-1bnkrae-0 eWXntk\\"/><div data-blade-component=\\"radio-icon-wrapper\\" class=\\"RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 doUKpB\\"></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bigiAM\\"></div><div class=\\"StyledBaseText-dVBfTO ktUwvA\\" data-blade-component=\\"base-text\\">Mango</div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx cCkEge\\"></div></div></label></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx cCNoRc\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx\\"><label data-blade-component=\\"radio-label\\" class=\\"SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 bgSmPY\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx xrMLB\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fSbYvl\\"><input type=\\"radio\\" name=\\"radio-group-undefined\\" value=\\"orange\\" role=\\"radio\\" aria-required=\\"false\\" aria-invalid=\\"false\\" aria-disabled=\\"false\\" aria-checked=\\"false\\" aria-describedby=\\"radio-undefined-helptext-undefined\\" class=\\"SelectorInputweb__StyledInput-sc-1bnkrae-0 eWXntk\\"/><div data-blade-component=\\"radio-icon-wrapper\\" class=\\"RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 doUKpB\\"></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx bigiAM\\"></div><div class=\\"StyledBaseText-dVBfTO ktUwvA\\" data-blade-component=\\"base-text\\">Orange</div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx cCkEge\\"></div></div></label></div></div></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx gnjvtY\\"><span style=\\"word-break:break-all\\" data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fSbYvl\\"><span class=\\"StyledBaseText-dVBfTO eZXGXv\\" data-blade-component=\\"base-text\\">Select one</span></span></div></div></div></div></div>"`;
+exports[`<RadioGroup /> should render with help text 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="group" aria-labelledby="radio-group-undefined-label" data-blade-component="radio-group" class="BaseBox-bmPWx xrMLB"><span style="width:auto;flex-shrink:0;margin-right:16px" id="radio-group-undefined-label" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx bqWBik"><div data-blade-component="base-box" class="BaseBox-bmPWx eeqPab"><p class="StyledBaseText-dVBfTO gaMIEc" data-blade-component="text">Select fruit</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 ijVANw"><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">,Select one</p></div></div></div></span><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx xrMLB"><div data-blade-component="base-box" class="BaseBox-bmPWx bqWBik"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 bgSmPY"><div data-blade-component="base-box" class="BaseBox-bmPWx xrMLB"><div data-blade-component="base-box" class="BaseBox-bmPWx fSbYvl"><input type="radio" name="radio-group-undefined" value="apple" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 eWXntk"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 doUKpB"></div><div data-blade-component="base-box" class="BaseBox-bmPWx bigiAM"></div><div class="StyledBaseText-dVBfTO ktUwvA" data-blade-component="base-text">Apple</div></div><div data-blade-component="base-box" class="BaseBox-bmPWx cCkEge"></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bqWBik"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 bgSmPY"><div data-blade-component="base-box" class="BaseBox-bmPWx xrMLB"><div data-blade-component="base-box" class="BaseBox-bmPWx fSbYvl"><input type="radio" name="radio-group-undefined" value="mango" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 eWXntk"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 doUKpB"></div><div data-blade-component="base-box" class="BaseBox-bmPWx bigiAM"></div><div class="StyledBaseText-dVBfTO ktUwvA" data-blade-component="base-text">Mango</div></div><div data-blade-component="base-box" class="BaseBox-bmPWx cCkEge"></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx cCNoRc"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 bgSmPY"><div data-blade-component="base-box" class="BaseBox-bmPWx xrMLB"><div data-blade-component="base-box" class="BaseBox-bmPWx fSbYvl"><input type="radio" name="radio-group-undefined" value="orange" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 eWXntk"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 doUKpB"></div><div data-blade-component="base-box" class="BaseBox-bmPWx bigiAM"></div><div class="StyledBaseText-dVBfTO ktUwvA" data-blade-component="base-text">Orange</div></div><div data-blade-component="base-box" class="BaseBox-bmPWx cCkEge"></div></div></label></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx gnjvtY"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fSbYvl"><span class="StyledBaseText-dVBfTO eZXGXv" data-blade-component="base-text">Select one</span></span></div></div></div></div></div>"`;
 
 exports[`<RadioGroup /> should render with help text 2`] = `
 <div
diff --git a/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.native.test.tsx.snap b/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.native.test.tsx.snap
index f27e2cfaea4..fbd691d444b 100644
--- a/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.native.test.tsx.snap
+++ b/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Skeleton /> should render skeleton 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -15,12 +15,12 @@ exports[`<Skeleton /> should render skeleton 1`] = `
     height="50px"
     importantForAccessibility="no-hide-descendants"
     style={
-      Array [
-        Object {
+      [
+        {
           "height": 50,
           "width": "100%",
         },
-        Object {
+        {
           "backgroundColor": undefined,
         },
       ]
diff --git a/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.ssr.test.tsx.snap b/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.ssr.test.tsx.snap
index a69fbf91cd8..6d8e4e6411c 100644
--- a/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Skeleton /> should render 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div aria-hidden=\\"true\\" data-blade-component=\\"skeleton\\" class=\\"BaseBox-bmPWx PulseAnimationweb__PulseAnimation-sc-184soy3-0 hdzzwq jvGWrK\\"></div></div>"`;
+exports[`<Skeleton /> should render 1`] = `"<div id="root" data-reactroot=""><div aria-hidden="true" data-blade-component="skeleton" class="BaseBox-bmPWx PulseAnimationweb__PulseAnimation-sc-184soy3-0 hdzzwq jvGWrK"></div></div>"`;
 
 exports[`<Skeleton /> should render 2`] = `
 <div
diff --git a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.native.test.tsx.snap b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.native.test.tsx.snap
index f150855b373..5287d499236 100644
--- a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.native.test.tsx.snap
+++ b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<BaseSpinner /> should render BaseSpinner with default props 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,21 +11,22 @@ exports[`<BaseSpinner /> should render BaseSpinner with default props 1`] = `
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -37,8 +38,8 @@ exports[`<BaseSpinner /> should render BaseSpinner with default props 1`] = `
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -46,9 +47,9 @@ exports[`<BaseSpinner /> should render BaseSpinner with default props 1`] = `
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -69,15 +70,15 @@ exports[`<BaseSpinner /> should render BaseSpinner with default props 1`] = `
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 16,
                   "width": 16,
@@ -91,7 +92,7 @@ exports[`<BaseSpinner /> should render BaseSpinner with default props 1`] = `
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -101,7 +102,7 @@ exports[`<BaseSpinner /> should render BaseSpinner with default props 1`] = `
                 fill={4284378759}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -111,7 +112,7 @@ exports[`<BaseSpinner /> should render BaseSpinner with default props 1`] = `
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={4284378759}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -120,7 +121,7 @@ exports[`<BaseSpinner /> should render BaseSpinner with default props 1`] = `
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={4284378759}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -137,7 +138,7 @@ exports[`<BaseSpinner /> should render BaseSpinner with default props 1`] = `
 exports[`<BaseSpinner /> should render high contrast BaseSpinner 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -145,21 +146,22 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner 1`] = `
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -171,8 +173,8 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner 1`] = `
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -180,9 +182,9 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner 1`] = `
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -203,15 +205,15 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner 1`] = `
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 16,
                   "width": 16,
@@ -225,7 +227,7 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner 1`] = `
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -235,7 +237,7 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner 1`] = `
                 fill={4294112504}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -245,7 +247,7 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner 1`] = `
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={4294112504}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -254,7 +256,7 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner 1`] = `
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={4294112504}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -271,7 +273,7 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner 1`] = `
 exports[`<BaseSpinner /> should render high contrast BaseSpinner with bottom label 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -279,21 +281,22 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner with bottom lab
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="column"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "column",
@@ -305,8 +308,8 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner with bottom lab
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -314,9 +317,9 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner with bottom lab
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -337,15 +340,15 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner with bottom lab
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 16,
                   "width": 16,
@@ -359,7 +362,7 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner with bottom lab
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -369,7 +372,7 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner with bottom lab
                 fill={4294112504}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -379,7 +382,7 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner with bottom lab
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={4294112504}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -388,7 +391,7 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner with bottom lab
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={4294112504}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -400,8 +403,8 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner with bottom lab
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 0,
               "marginTop": 8,
             },
@@ -409,6 +412,7 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner with bottom lab
         }
       >
         <Text
+          accessible={true}
           color="surface.text.subdued.highContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -417,8 +421,8 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner with bottom lab
           fontWeight="regular"
           lineHeight={50}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 19%, 89%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -449,7 +453,7 @@ exports[`<BaseSpinner /> should render high contrast BaseSpinner with bottom lab
 exports[`<BaseSpinner /> should render high contrast information intent BaseSpinner 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -457,21 +461,22 @@ exports[`<BaseSpinner /> should render high contrast information intent BaseSpin
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -483,8 +488,8 @@ exports[`<BaseSpinner /> should render high contrast information intent BaseSpin
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -492,9 +497,9 @@ exports[`<BaseSpinner /> should render high contrast information intent BaseSpin
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -515,15 +520,15 @@ exports[`<BaseSpinner /> should render high contrast information intent BaseSpin
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 16,
                   "width": 16,
@@ -537,7 +542,7 @@ exports[`<BaseSpinner /> should render high contrast information intent BaseSpin
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -547,7 +552,7 @@ exports[`<BaseSpinner /> should render high contrast information intent BaseSpin
                 fill={4281451736}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -557,7 +562,7 @@ exports[`<BaseSpinner /> should render high contrast information intent BaseSpin
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={4281451736}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -566,7 +571,7 @@ exports[`<BaseSpinner /> should render high contrast information intent BaseSpin
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={4281451736}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -583,7 +588,7 @@ exports[`<BaseSpinner /> should render high contrast information intent BaseSpin
 exports[`<BaseSpinner /> should render high contrast negative intent BaseSpinner 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -591,21 +596,22 @@ exports[`<BaseSpinner /> should render high contrast negative intent BaseSpinner
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -617,8 +623,8 @@ exports[`<BaseSpinner /> should render high contrast negative intent BaseSpinner
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -626,9 +632,9 @@ exports[`<BaseSpinner /> should render high contrast negative intent BaseSpinner
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -649,15 +655,15 @@ exports[`<BaseSpinner /> should render high contrast negative intent BaseSpinner
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 16,
                   "width": 16,
@@ -671,7 +677,7 @@ exports[`<BaseSpinner /> should render high contrast negative intent BaseSpinner
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -681,7 +687,7 @@ exports[`<BaseSpinner /> should render high contrast negative intent BaseSpinner
                 fill={4294862157}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -691,7 +697,7 @@ exports[`<BaseSpinner /> should render high contrast negative intent BaseSpinner
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={4294862157}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -700,7 +706,7 @@ exports[`<BaseSpinner /> should render high contrast negative intent BaseSpinner
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={4294862157}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -717,7 +723,7 @@ exports[`<BaseSpinner /> should render high contrast negative intent BaseSpinner
 exports[`<BaseSpinner /> should render high contrast neutral intent BaseSpinner 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -725,21 +731,22 @@ exports[`<BaseSpinner /> should render high contrast neutral intent BaseSpinner
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -751,8 +758,8 @@ exports[`<BaseSpinner /> should render high contrast neutral intent BaseSpinner
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -760,9 +767,9 @@ exports[`<BaseSpinner /> should render high contrast neutral intent BaseSpinner
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -783,15 +790,15 @@ exports[`<BaseSpinner /> should render high contrast neutral intent BaseSpinner
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 16,
                   "width": 16,
@@ -805,7 +812,7 @@ exports[`<BaseSpinner /> should render high contrast neutral intent BaseSpinner
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -815,7 +822,7 @@ exports[`<BaseSpinner /> should render high contrast neutral intent BaseSpinner
                 fill={4286088859}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -825,7 +832,7 @@ exports[`<BaseSpinner /> should render high contrast neutral intent BaseSpinner
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={4286088859}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -834,7 +841,7 @@ exports[`<BaseSpinner /> should render high contrast neutral intent BaseSpinner
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={4286088859}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -851,7 +858,7 @@ exports[`<BaseSpinner /> should render high contrast neutral intent BaseSpinner
 exports[`<BaseSpinner /> should render high contrast notice intent BaseSpinner 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -859,21 +866,22 @@ exports[`<BaseSpinner /> should render high contrast notice intent BaseSpinner 1
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -885,8 +893,8 @@ exports[`<BaseSpinner /> should render high contrast notice intent BaseSpinner 1
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -894,9 +902,9 @@ exports[`<BaseSpinner /> should render high contrast notice intent BaseSpinner 1
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -917,15 +925,15 @@ exports[`<BaseSpinner /> should render high contrast notice intent BaseSpinner 1
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 16,
                   "width": 16,
@@ -939,7 +947,7 @@ exports[`<BaseSpinner /> should render high contrast notice intent BaseSpinner 1
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -949,7 +957,7 @@ exports[`<BaseSpinner /> should render high contrast notice intent BaseSpinner 1
                 fill={4293696039}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -959,7 +967,7 @@ exports[`<BaseSpinner /> should render high contrast notice intent BaseSpinner 1
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={4293696039}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -968,7 +976,7 @@ exports[`<BaseSpinner /> should render high contrast notice intent BaseSpinner 1
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={4293696039}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -985,7 +993,7 @@ exports[`<BaseSpinner /> should render high contrast notice intent BaseSpinner 1
 exports[`<BaseSpinner /> should render high contrast positive intent BaseSpinner 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -993,21 +1001,22 @@ exports[`<BaseSpinner /> should render high contrast positive intent BaseSpinner
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -1019,8 +1028,8 @@ exports[`<BaseSpinner /> should render high contrast positive intent BaseSpinner
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -1028,9 +1037,9 @@ exports[`<BaseSpinner /> should render high contrast positive intent BaseSpinner
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -1051,15 +1060,15 @@ exports[`<BaseSpinner /> should render high contrast positive intent BaseSpinner
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 16,
                   "width": 16,
@@ -1073,7 +1082,7 @@ exports[`<BaseSpinner /> should render high contrast positive intent BaseSpinner
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -1083,7 +1092,7 @@ exports[`<BaseSpinner /> should render high contrast positive intent BaseSpinner
                 fill={4278301270}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -1093,7 +1102,7 @@ exports[`<BaseSpinner /> should render high contrast positive intent BaseSpinner
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={4278301270}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -1102,7 +1111,7 @@ exports[`<BaseSpinner /> should render high contrast positive intent BaseSpinner
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={4278301270}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -1119,7 +1128,7 @@ exports[`<BaseSpinner /> should render high contrast positive intent BaseSpinner
 exports[`<BaseSpinner /> should render large size BaseSpinner 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1127,21 +1136,22 @@ exports[`<BaseSpinner /> should render large size BaseSpinner 1`] = `
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -1153,8 +1163,8 @@ exports[`<BaseSpinner /> should render large size BaseSpinner 1`] = `
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -1162,9 +1172,9 @@ exports[`<BaseSpinner /> should render large size BaseSpinner 1`] = `
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -1185,15 +1195,15 @@ exports[`<BaseSpinner /> should render large size BaseSpinner 1`] = `
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 20,
                   "width": 20,
@@ -1207,7 +1217,7 @@ exports[`<BaseSpinner /> should render large size BaseSpinner 1`] = `
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -1217,7 +1227,7 @@ exports[`<BaseSpinner /> should render large size BaseSpinner 1`] = `
                 fill={4284378759}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -1227,7 +1237,7 @@ exports[`<BaseSpinner /> should render large size BaseSpinner 1`] = `
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={4284378759}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -1236,7 +1246,7 @@ exports[`<BaseSpinner /> should render large size BaseSpinner 1`] = `
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={4284378759}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -1253,7 +1263,7 @@ exports[`<BaseSpinner /> should render large size BaseSpinner 1`] = `
 exports[`<BaseSpinner /> should render low contrast BaseSpinner 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1261,21 +1271,22 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner 1`] = `
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -1287,8 +1298,8 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner 1`] = `
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -1296,9 +1307,9 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner 1`] = `
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -1319,15 +1330,15 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner 1`] = `
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 16,
                   "width": 16,
@@ -1341,7 +1352,7 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner 1`] = `
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -1351,7 +1362,7 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner 1`] = `
                 fill={4284378759}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -1361,7 +1372,7 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner 1`] = `
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={4284378759}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -1370,7 +1381,7 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner 1`] = `
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={4284378759}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -1387,7 +1398,7 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner 1`] = `
 exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1395,21 +1406,22 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -1421,8 +1433,8 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -1430,9 +1442,9 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -1453,15 +1465,15 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 16,
                   "width": 16,
@@ -1475,7 +1487,7 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -1485,7 +1497,7 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label
                 fill={4284378759}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -1495,7 +1507,7 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={4284378759}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -1504,7 +1516,7 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={4284378759}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -1516,8 +1528,8 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label
       <View
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "marginLeft": 8,
               "marginTop": 0,
             },
@@ -1525,6 +1537,7 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label
         }
       >
         <Text
+          accessible={true}
           color="surface.text.subdued.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -1533,8 +1546,8 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label
           fontWeight="regular"
           lineHeight={50}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(217, 18%, 45%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -1565,7 +1578,7 @@ exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label
 exports[`<BaseSpinner /> should render low contrast information intent BaseSpinner 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1573,21 +1586,22 @@ exports[`<BaseSpinner /> should render low contrast information intent BaseSpinn
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -1599,8 +1613,8 @@ exports[`<BaseSpinner /> should render low contrast information intent BaseSpinn
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -1608,9 +1622,9 @@ exports[`<BaseSpinner /> should render low contrast information intent BaseSpinn
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -1631,15 +1645,15 @@ exports[`<BaseSpinner /> should render low contrast information intent BaseSpinn
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 16,
                   "width": 16,
@@ -1653,7 +1667,7 @@ exports[`<BaseSpinner /> should render low contrast information intent BaseSpinn
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -1663,7 +1677,7 @@ exports[`<BaseSpinner /> should render low contrast information intent BaseSpinn
                 fill={1375767731}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -1673,7 +1687,7 @@ exports[`<BaseSpinner /> should render low contrast information intent BaseSpinn
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={1375767731}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -1682,7 +1696,7 @@ exports[`<BaseSpinner /> should render low contrast information intent BaseSpinn
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={1375767731}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -1699,7 +1713,7 @@ exports[`<BaseSpinner /> should render low contrast information intent BaseSpinn
 exports[`<BaseSpinner /> should render low contrast negative intent BaseSpinner 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1707,21 +1721,22 @@ exports[`<BaseSpinner /> should render low contrast negative intent BaseSpinner
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -1733,8 +1748,8 @@ exports[`<BaseSpinner /> should render low contrast negative intent BaseSpinner
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -1742,9 +1757,9 @@ exports[`<BaseSpinner /> should render low contrast negative intent BaseSpinner
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -1765,15 +1780,15 @@ exports[`<BaseSpinner /> should render low contrast negative intent BaseSpinner
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 16,
                   "width": 16,
@@ -1787,7 +1802,7 @@ exports[`<BaseSpinner /> should render low contrast negative intent BaseSpinner
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -1797,7 +1812,7 @@ exports[`<BaseSpinner /> should render low contrast negative intent BaseSpinner
                 fill={1391806249}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -1807,7 +1822,7 @@ exports[`<BaseSpinner /> should render low contrast negative intent BaseSpinner
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={1391806249}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -1816,7 +1831,7 @@ exports[`<BaseSpinner /> should render low contrast negative intent BaseSpinner
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={1391806249}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -1833,7 +1848,7 @@ exports[`<BaseSpinner /> should render low contrast negative intent BaseSpinner
 exports[`<BaseSpinner /> should render low contrast neutral intent BaseSpinner 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1841,21 +1856,22 @@ exports[`<BaseSpinner /> should render low contrast neutral intent BaseSpinner 1
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -1867,8 +1883,8 @@ exports[`<BaseSpinner /> should render low contrast neutral intent BaseSpinner 1
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -1876,9 +1892,9 @@ exports[`<BaseSpinner /> should render low contrast neutral intent BaseSpinner 1
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -1899,15 +1915,15 @@ exports[`<BaseSpinner /> should render low contrast neutral intent BaseSpinner 1
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 16,
                   "width": 16,
@@ -1921,7 +1937,7 @@ exports[`<BaseSpinner /> should render low contrast neutral intent BaseSpinner 1
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -1931,7 +1947,7 @@ exports[`<BaseSpinner /> should render low contrast neutral intent BaseSpinner 1
                 fill={1383630491}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -1941,7 +1957,7 @@ exports[`<BaseSpinner /> should render low contrast neutral intent BaseSpinner 1
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={1383630491}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -1950,7 +1966,7 @@ exports[`<BaseSpinner /> should render low contrast neutral intent BaseSpinner 1
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={1383630491}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -1967,7 +1983,7 @@ exports[`<BaseSpinner /> should render low contrast neutral intent BaseSpinner 1
 exports[`<BaseSpinner /> should render low contrast notice intent BaseSpinner 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -1975,21 +1991,22 @@ exports[`<BaseSpinner /> should render low contrast notice intent BaseSpinner 1`
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -2001,8 +2018,8 @@ exports[`<BaseSpinner /> should render low contrast notice intent BaseSpinner 1`
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -2010,9 +2027,9 @@ exports[`<BaseSpinner /> should render low contrast notice intent BaseSpinner 1`
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -2033,15 +2050,15 @@ exports[`<BaseSpinner /> should render low contrast notice intent BaseSpinner 1`
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 16,
                   "width": 16,
@@ -2055,7 +2072,7 @@ exports[`<BaseSpinner /> should render low contrast notice intent BaseSpinner 1`
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -2065,7 +2082,7 @@ exports[`<BaseSpinner /> should render low contrast notice intent BaseSpinner 1`
                 fill={1390446336}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -2075,7 +2092,7 @@ exports[`<BaseSpinner /> should render low contrast notice intent BaseSpinner 1`
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={1390446336}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -2084,7 +2101,7 @@ exports[`<BaseSpinner /> should render low contrast notice intent BaseSpinner 1`
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={1390446336}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -2101,7 +2118,7 @@ exports[`<BaseSpinner /> should render low contrast notice intent BaseSpinner 1`
 exports[`<BaseSpinner /> should render low contrast positive intent BaseSpinner 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2109,21 +2126,22 @@ exports[`<BaseSpinner /> should render low contrast positive intent BaseSpinner
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -2135,8 +2153,8 @@ exports[`<BaseSpinner /> should render low contrast positive intent BaseSpinner
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -2144,9 +2162,9 @@ exports[`<BaseSpinner /> should render low contrast positive intent BaseSpinner
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -2167,15 +2185,15 @@ exports[`<BaseSpinner /> should render low contrast positive intent BaseSpinner
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 16,
                   "width": 16,
@@ -2189,7 +2207,7 @@ exports[`<BaseSpinner /> should render low contrast positive intent BaseSpinner
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -2199,7 +2217,7 @@ exports[`<BaseSpinner /> should render low contrast positive intent BaseSpinner
                 fill={1375772252}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -2209,7 +2227,7 @@ exports[`<BaseSpinner /> should render low contrast positive intent BaseSpinner
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={1375772252}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -2218,7 +2236,7 @@ exports[`<BaseSpinner /> should render low contrast positive intent BaseSpinner
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={1375772252}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -2235,7 +2253,7 @@ exports[`<BaseSpinner /> should render low contrast positive intent BaseSpinner
 exports[`<BaseSpinner /> should render medium size BaseSpinner 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2243,21 +2261,22 @@ exports[`<BaseSpinner /> should render medium size BaseSpinner 1`] = `
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -2269,8 +2288,8 @@ exports[`<BaseSpinner /> should render medium size BaseSpinner 1`] = `
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -2278,9 +2297,9 @@ exports[`<BaseSpinner /> should render medium size BaseSpinner 1`] = `
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -2301,15 +2320,15 @@ exports[`<BaseSpinner /> should render medium size BaseSpinner 1`] = `
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 16,
                   "width": 16,
@@ -2323,7 +2342,7 @@ exports[`<BaseSpinner /> should render medium size BaseSpinner 1`] = `
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -2333,7 +2352,7 @@ exports[`<BaseSpinner /> should render medium size BaseSpinner 1`] = `
                 fill={4284378759}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -2343,7 +2362,7 @@ exports[`<BaseSpinner /> should render medium size BaseSpinner 1`] = `
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={4284378759}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -2352,7 +2371,7 @@ exports[`<BaseSpinner /> should render medium size BaseSpinner 1`] = `
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={4284378759}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -2369,7 +2388,7 @@ exports[`<BaseSpinner /> should render medium size BaseSpinner 1`] = `
 exports[`<BaseSpinner /> should render xlarge size BaseSpinner 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -2377,21 +2396,22 @@ exports[`<BaseSpinner /> should render xlarge size BaseSpinner 1`] = `
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -2403,8 +2423,8 @@ exports[`<BaseSpinner /> should render xlarge size BaseSpinner 1`] = `
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -2412,9 +2432,9 @@ exports[`<BaseSpinner /> should render xlarge size BaseSpinner 1`] = `
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -2435,15 +2455,15 @@ exports[`<BaseSpinner /> should render xlarge size BaseSpinner 1`] = `
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 24,
                   "width": 24,
@@ -2457,7 +2477,7 @@ exports[`<BaseSpinner /> should render xlarge size BaseSpinner 1`] = `
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -2467,7 +2487,7 @@ exports[`<BaseSpinner /> should render xlarge size BaseSpinner 1`] = `
                 fill={4284378759}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -2477,7 +2497,7 @@ exports[`<BaseSpinner /> should render xlarge size BaseSpinner 1`] = `
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={4284378759}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -2486,7 +2506,7 @@ exports[`<BaseSpinner /> should render xlarge size BaseSpinner 1`] = `
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={4284378759}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
diff --git a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.ssr.test.tsx.snap b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.ssr.test.tsx.snap
index d9243605a62..fcc4303bfbf 100644
--- a/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Spinner/BaseSpinner/__tests__/__snapshots__/BaseSpinner.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"spinner\\" class=\\"BaseBox-bmPWx\\"><div aria-label=\\"Loading\\" role=\\"progressbar\\" data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fSbYvl\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx SpinningBoxweb__SpinningBox-zswieh-0  lkFZfN\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"16px\\" viewBox=\\"0 0 24 24\\" width=\\"16px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z\\" fill=\\"hsla(217, 18%, 45%, 1)\\" fill-opacity=\\"0.2\\" data-blade-component=\\"svg-path\\"></path><path d=\\"M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z\\" fill=\\"hsla(217, 18%, 45%, 1)\\" data-blade-component=\\"svg-path\\"></path><path d=\\"M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z\\" fill=\\"hsla(217, 18%, 45%, 1)\\" data-blade-component=\\"svg-path\\"></path></svg></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx frHIPp\\"><p class=\\"StyledBaseText-dVBfTO deSIOg\\" data-blade-component=\\"text\\">Loading</p></div></div></div></div>"`;
+exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="spinner" class="BaseBox-bmPWx"><div aria-label="Loading" role="progressbar" data-blade-component="base-box" class="BaseBox-bmPWx fSbYvl"><div data-blade-component="base-box" class="BaseBox-bmPWx SpinningBoxweb__SpinningBox-zswieh-0  lkFZfN"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z" fill="hsla(217, 18%, 45%, 1)" fill-opacity="0.2" data-blade-component="svg-path"></path><path d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z" fill="hsla(217, 18%, 45%, 1)" data-blade-component="svg-path"></path><path d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z" fill="hsla(217, 18%, 45%, 1)" data-blade-component="svg-path"></path></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx frHIPp"><p class="StyledBaseText-dVBfTO deSIOg" data-blade-component="text">Loading</p></div></div></div></div>"`;
 
 exports[`<BaseSpinner /> should render low contrast BaseSpinner with right label 2`] = `
 <div
diff --git a/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.native.test.tsx.snap b/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.native.test.tsx.snap
index 7bc0ddd317e..454163ca180 100644
--- a/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.native.test.tsx.snap
+++ b/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Spinner /> should render Spinner with default props 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,21 +11,22 @@ exports[`<Spinner /> should render Spinner with default props 1`] = `
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -37,8 +38,8 @@ exports[`<Spinner /> should render Spinner with default props 1`] = `
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -46,9 +47,9 @@ exports[`<Spinner /> should render Spinner with default props 1`] = `
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -69,15 +70,15 @@ exports[`<Spinner /> should render Spinner with default props 1`] = `
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 16,
                   "width": 16,
@@ -91,7 +92,7 @@ exports[`<Spinner /> should render Spinner with default props 1`] = `
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -101,7 +102,7 @@ exports[`<Spinner /> should render Spinner with default props 1`] = `
                 fill={4284378759}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -111,7 +112,7 @@ exports[`<Spinner /> should render Spinner with default props 1`] = `
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={4284378759}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -120,7 +121,7 @@ exports[`<Spinner /> should render Spinner with default props 1`] = `
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={4284378759}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -137,7 +138,7 @@ exports[`<Spinner /> should render Spinner with default props 1`] = `
 exports[`<Spinner /> should render high contrast Spinner 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -145,21 +146,22 @@ exports[`<Spinner /> should render high contrast Spinner 1`] = `
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -171,8 +173,8 @@ exports[`<Spinner /> should render high contrast Spinner 1`] = `
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -180,9 +182,9 @@ exports[`<Spinner /> should render high contrast Spinner 1`] = `
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -203,15 +205,15 @@ exports[`<Spinner /> should render high contrast Spinner 1`] = `
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 16,
                   "width": 16,
@@ -225,7 +227,7 @@ exports[`<Spinner /> should render high contrast Spinner 1`] = `
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -235,7 +237,7 @@ exports[`<Spinner /> should render high contrast Spinner 1`] = `
                 fill={4294112504}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -245,7 +247,7 @@ exports[`<Spinner /> should render high contrast Spinner 1`] = `
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={4294112504}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -254,7 +256,7 @@ exports[`<Spinner /> should render high contrast Spinner 1`] = `
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={4294112504}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -271,7 +273,7 @@ exports[`<Spinner /> should render high contrast Spinner 1`] = `
 exports[`<Spinner /> should render large size Spinner 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -279,21 +281,22 @@ exports[`<Spinner /> should render large size Spinner 1`] = `
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -305,8 +308,8 @@ exports[`<Spinner /> should render large size Spinner 1`] = `
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -314,9 +317,9 @@ exports[`<Spinner /> should render large size Spinner 1`] = `
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -337,15 +340,15 @@ exports[`<Spinner /> should render large size Spinner 1`] = `
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 20,
                   "width": 20,
@@ -359,7 +362,7 @@ exports[`<Spinner /> should render large size Spinner 1`] = `
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -369,7 +372,7 @@ exports[`<Spinner /> should render large size Spinner 1`] = `
                 fill={4284378759}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -379,7 +382,7 @@ exports[`<Spinner /> should render large size Spinner 1`] = `
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={4284378759}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -388,7 +391,7 @@ exports[`<Spinner /> should render large size Spinner 1`] = `
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={4284378759}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -405,7 +408,7 @@ exports[`<Spinner /> should render large size Spinner 1`] = `
 exports[`<Spinner /> should render low contrast Spinner 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -413,21 +416,22 @@ exports[`<Spinner /> should render low contrast Spinner 1`] = `
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -439,8 +443,8 @@ exports[`<Spinner /> should render low contrast Spinner 1`] = `
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -448,9 +452,9 @@ exports[`<Spinner /> should render low contrast Spinner 1`] = `
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -471,15 +475,15 @@ exports[`<Spinner /> should render low contrast Spinner 1`] = `
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 16,
                   "width": 16,
@@ -493,7 +497,7 @@ exports[`<Spinner /> should render low contrast Spinner 1`] = `
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -503,7 +507,7 @@ exports[`<Spinner /> should render low contrast Spinner 1`] = `
                 fill={4284378759}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -513,7 +517,7 @@ exports[`<Spinner /> should render low contrast Spinner 1`] = `
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={4284378759}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -522,7 +526,7 @@ exports[`<Spinner /> should render low contrast Spinner 1`] = `
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={4284378759}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -539,7 +543,7 @@ exports[`<Spinner /> should render low contrast Spinner 1`] = `
 exports[`<Spinner /> should render medium size Spinner 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -547,21 +551,22 @@ exports[`<Spinner /> should render medium size Spinner 1`] = `
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -573,8 +578,8 @@ exports[`<Spinner /> should render medium size Spinner 1`] = `
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -582,9 +587,9 @@ exports[`<Spinner /> should render medium size Spinner 1`] = `
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -605,15 +610,15 @@ exports[`<Spinner /> should render medium size Spinner 1`] = `
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 16,
                   "width": 16,
@@ -627,7 +632,7 @@ exports[`<Spinner /> should render medium size Spinner 1`] = `
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -637,7 +642,7 @@ exports[`<Spinner /> should render medium size Spinner 1`] = `
                 fill={4284378759}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -647,7 +652,7 @@ exports[`<Spinner /> should render medium size Spinner 1`] = `
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={4284378759}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -656,7 +661,7 @@ exports[`<Spinner /> should render medium size Spinner 1`] = `
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={4284378759}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -673,7 +678,7 @@ exports[`<Spinner /> should render medium size Spinner 1`] = `
 exports[`<Spinner /> should render xlarge size Spinner 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -681,21 +686,22 @@ exports[`<Spinner /> should render xlarge size Spinner 1`] = `
   <View
     data-blade-component="spinner"
     style={
-      Array [
-        Object {},
+      [
+        {},
       ]
     }
   >
     <View
       accessibilityLabel="Loading"
       accessibilityRole="progressbar"
+      accessible={true}
       alignItems="center"
       data-blade-component="base-box"
       display="flex"
       flexDirection="row"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexDirection": "row",
@@ -707,8 +713,8 @@ exports[`<Spinner /> should render xlarge size Spinner 1`] = `
         alignSelf="center"
         data-blade-component="base-box"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignSelf": "center",
             },
           ]
@@ -716,9 +722,9 @@ exports[`<Spinner /> should render xlarge size Spinner 1`] = `
       >
         <View
           style={
-            Object {
-              "transform": Array [
-                Object {
+            {
+              "transform": [
+                {
                   "rotateZ": "0deg",
                 },
               ],
@@ -739,15 +745,15 @@ exports[`<Spinner /> should render xlarge size Spinner 1`] = `
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 24,
                   "width": 24,
@@ -761,7 +767,7 @@ exports[`<Spinner /> should render xlarge size Spinner 1`] = `
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -771,7 +777,7 @@ exports[`<Spinner /> should render xlarge size Spinner 1`] = `
                 fill={4284378759}
                 fillOpacity={0.2}
                 propList={
-                  Array [
+                  [
                     "fill",
                     "fillOpacity",
                   ]
@@ -781,7 +787,7 @@ exports[`<Spinner /> should render xlarge size Spinner 1`] = `
                 d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z"
                 fill={4284378759}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
@@ -790,7 +796,7 @@ exports[`<Spinner /> should render xlarge size Spinner 1`] = `
                 d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z"
                 fill={4284378759}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
diff --git a/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.ssr.test.tsx.snap b/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.ssr.test.tsx.snap
index 89480326e8a..d08e1bc6250 100644
--- a/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Spinner/Spinner/__tests__/__snapshots__/Spinner.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Spinner /> should render high contrast Spinner 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"spinner\\" class=\\"BaseBox-bmPWx\\"><div aria-label=\\"Loading\\" role=\\"progressbar\\" data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx fSbYvl\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx SpinningBoxweb__SpinningBox-zswieh-0  lkFZfN\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"16px\\" viewBox=\\"0 0 24 24\\" width=\\"16px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z\\" fill=\\"hsla(220, 30%, 96%, 1)\\" fill-opacity=\\"0.2\\" data-blade-component=\\"svg-path\\"></path><path d=\\"M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z\\" fill=\\"hsla(220, 30%, 96%, 1)\\" data-blade-component=\\"svg-path\\"></path><path d=\\"M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z\\" fill=\\"hsla(220, 30%, 96%, 1)\\" data-blade-component=\\"svg-path\\"></path></svg></div><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx frHIPp\\"><p class=\\"StyledBaseText-dVBfTO cZJNWw\\" data-blade-component=\\"text\\">Loading</p></div></div></div></div>"`;
+exports[`<Spinner /> should render high contrast Spinner 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="spinner" class="BaseBox-bmPWx"><div aria-label="Loading" role="progressbar" data-blade-component="base-box" class="BaseBox-bmPWx fSbYvl"><div data-blade-component="base-box" class="BaseBox-bmPWx SpinningBoxweb__SpinningBox-zswieh-0  lkFZfN"><svg aria-hidden="true" data-blade-component="icon" height="16px" viewBox="0 0 24 24" width="16px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12Z" fill="hsla(220, 30%, 96%, 1)" fill-opacity="0.2" data-blade-component="svg-path"></path><path d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8324 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.29181 23.4127L9.21886 20.5595C10.5696 20.9984 12.0051 21.1114 13.4079 20.8892C14.8107 20.667 16.141 20.116 17.2901 19.2812C18.4391 18.4463 19.3743 17.3514 20.0191 16.0859C20.6639 14.8204 21 13.4203 21 12H24Z" fill="hsla(220, 30%, 96%, 1)" data-blade-component="svg-path"></path><path d="M-1.33514e-05 12C-1.33514e-05 10.1063 0.448176 8.23944 1.30791 6.55211C2.16764 4.86479 3.41451 3.4049 4.94656 2.2918C6.47862 1.17869 8.25236 0.443983 10.1228 0.147739C11.9932 -0.148504 13.9072 0.00212896 15.7082 0.587322L14.7811 3.44049C13.4304 3.0016 11.9949 2.88862 10.5921 3.11081C9.18927 3.33299 7.85896 3.88402 6.70992 4.71885C5.56088 5.55367 4.62573 6.64859 3.98093 7.91409C3.33613 9.17958 2.99999 10.5797 2.99999 12H-1.33514e-05Z" fill="hsla(220, 30%, 96%, 1)" data-blade-component="svg-path"></path></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx frHIPp"><p class="StyledBaseText-dVBfTO cZJNWw" data-blade-component="text">Loading</p></div></div></div></div>"`;
 
 exports[`<Spinner /> should render high contrast Spinner 2`] = `
 <div
diff --git a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap
index 9364a61fb45..2ce7da37851 100644
--- a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap
+++ b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Switch /> should render switch with label 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -12,8 +12,8 @@ exports[`<Switch /> should render switch with label 1`] = `
     data-blade-component="switch"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -25,7 +25,7 @@ exports[`<Switch /> should render switch with label 1`] = `
       accessibilityRequired={false}
       accessibilityRole="switch"
       accessibilityState={
-        Object {
+        {
           "checked": false,
           "disabled": false,
         }
@@ -43,8 +43,8 @@ exports[`<Switch /> should render switch with label 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "row",
             "marginBottom": 2,
@@ -61,8 +61,8 @@ exports[`<Switch /> should render switch with label 1`] = `
         isDisabled={false}
         size="medium"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "backgroundColor": "hsla(214, 18%, 69%, 1)",
               "borderRadius": 9999,
@@ -81,7 +81,7 @@ exports[`<Switch /> should render switch with label 1`] = `
               "transitionTimingFunction": "0.3 0 0.2 1",
               "width": 44,
             },
-            Object {
+            {
               "backgroundColor": undefined,
             },
           ]
@@ -93,9 +93,9 @@ exports[`<Switch /> should render switch with label 1`] = `
           isChecked={false}
           size="medium"
           style={
-            Array [
-              Object {},
-              Object {
+            [
+              {},
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "height": 20,
@@ -113,8 +113,8 @@ exports[`<Switch /> should render switch with label 1`] = `
         >
           <View
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "backgroundColor": "hsla(220, 30%, 96%, 1)",
                   "borderRadius": 9999,
@@ -125,10 +125,10 @@ exports[`<Switch /> should render switch with label 1`] = `
                   "position": "absolute",
                   "width": "100%",
                 },
-                Object {
+                {
                   "left": 0,
-                  "transform": Array [
-                    Object {
+                  "transform": [
+                    {
                       "translateX": undefined,
                     },
                   ],
@@ -139,7 +139,7 @@ exports[`<Switch /> should render switch with label 1`] = `
           >
             <View
               style={
-                Object {
+                {
                   "opacity": undefined,
                 }
               }
@@ -158,15 +158,15 @@ exports[`<Switch /> should render switch with label 1`] = `
                 minX={0}
                 minY={0}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "backgroundColor": "transparent",
                       "borderWidth": 0,
                     },
-                    Array [
-                      Object {},
+                    [
+                      {},
                     ],
-                    Object {
+                    {
                       "flex": 0,
                       "height": 10,
                       "width": 10,
@@ -180,7 +180,7 @@ exports[`<Switch /> should render switch with label 1`] = `
                 <RNSVGGroup
                   fill={null}
                   propList={
-                    Array [
+                    [
                       "fill",
                     ]
                   }
@@ -191,7 +191,7 @@ exports[`<Switch /> should render switch with label 1`] = `
                     fill={4281484642}
                     fillRule={0}
                     propList={
-                      Array [
+                      [
                         "fill",
                         "fillRule",
                       ]
@@ -211,7 +211,7 @@ exports[`<Switch /> should render switch with label 1`] = `
 exports[`<Switch /> should set disabled state with isDisabled 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -220,8 +220,8 @@ exports[`<Switch /> should set disabled state with isDisabled 1`] = `
     data-blade-component="switch"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -233,7 +233,7 @@ exports[`<Switch /> should set disabled state with isDisabled 1`] = `
       accessibilityRequired={false}
       accessibilityRole="switch"
       accessibilityState={
-        Object {
+        {
           "checked": false,
           "disabled": true,
         }
@@ -251,8 +251,8 @@ exports[`<Switch /> should set disabled state with isDisabled 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Array [
-          Object {
+        [
+          {
             "display": "flex",
             "flexDirection": "row",
             "marginBottom": 2,
@@ -269,8 +269,8 @@ exports[`<Switch /> should set disabled state with isDisabled 1`] = `
         isDisabled={true}
         size="medium"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
               "borderRadius": 9999,
@@ -289,7 +289,7 @@ exports[`<Switch /> should set disabled state with isDisabled 1`] = `
               "transitionTimingFunction": "0.3 0 0.2 1",
               "width": 44,
             },
-            Object {
+            {
               "backgroundColor": undefined,
             },
           ]
@@ -301,9 +301,9 @@ exports[`<Switch /> should set disabled state with isDisabled 1`] = `
           isChecked={false}
           size="medium"
           style={
-            Array [
-              Object {},
-              Object {
+            [
+              {},
+              {
                 "alignItems": "center",
                 "display": "flex",
                 "height": 20,
@@ -322,8 +322,8 @@ exports[`<Switch /> should set disabled state with isDisabled 1`] = `
           <View
             isDisabled={true}
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "backgroundColor": "hsla(220, 27%, 98%, 1)",
                   "borderRadius": 9999,
@@ -334,10 +334,10 @@ exports[`<Switch /> should set disabled state with isDisabled 1`] = `
                   "position": "absolute",
                   "width": "100%",
                 },
-                Object {
+                {
                   "left": 0,
-                  "transform": Array [
-                    Object {
+                  "transform": [
+                    {
                       "translateX": undefined,
                     },
                   ],
@@ -348,7 +348,7 @@ exports[`<Switch /> should set disabled state with isDisabled 1`] = `
           >
             <View
               style={
-                Object {
+                {
                   "opacity": undefined,
                 }
               }
@@ -367,15 +367,15 @@ exports[`<Switch /> should set disabled state with isDisabled 1`] = `
                 minX={0}
                 minY={0}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "backgroundColor": "transparent",
                       "borderWidth": 0,
                     },
-                    Array [
-                      Object {},
+                    [
+                      {},
                     ],
-                    Object {
+                    {
                       "flex": 0,
                       "height": 10,
                       "width": 10,
@@ -389,7 +389,7 @@ exports[`<Switch /> should set disabled state with isDisabled 1`] = `
                 <RNSVGGroup
                   fill={null}
                   propList={
-                    Array [
+                    [
                       "fill",
                     ]
                   }
@@ -400,7 +400,7 @@ exports[`<Switch /> should set disabled state with isDisabled 1`] = `
                     fill={4288851646}
                     fillRule={0}
                     propList={
-                      Array [
+                      [
                         "fill",
                         "fillRule",
                       ]
diff --git a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.ssr.test.tsx.snap b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.ssr.test.tsx.snap
index 6dcfc686bd0..4dfbb51af4a 100644
--- a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Switch /> should render switch ssr 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"switch\\" class=\\"BaseBox-bmPWx dhmCzz\\"><label style=\\"cursor:pointer\\" data-blade-component=\\"switch-label\\" class=\\"SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 bgSmPY\\"><input type=\\"checkbox\\" role=\\"switch\\" aria-required=\\"false\\" aria-invalid=\\"false\\" aria-disabled=\\"false\\" aria-checked=\\"false\\" aria-label=\\"Toggle Darkmode\\" class=\\"SelectorInputweb__StyledInput-sc-1bnkrae-0 jHlQyY\\"/><div aria-hidden=\\"true\\" data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx SwitchTrackweb__SwitchTrack-t4l0ax-0  cwBdxr\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx Thumb-jf4wbz-0  gYYaLo\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx AnimatedThumbweb__AnimatedThumb-i5qu0o-0  cZLYHA\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"8px\\" viewBox=\\"0 0 11 8\\" width=\\"8px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0 AnimatedThumbIconweb__AnimatedThumbIcon-sc-3hk5w7-0 ezMhSy\\"><path d=\\"M8.81891 0.546661C9.12722 0.238352 9.62709 0.238353 9.9354 0.546661C10.2437 0.85497 10.2437 1.35484 9.9354 1.66315L4.14592 7.45262C3.83761 7.76093 3.33775 7.76093 3.02944 7.45262L0.397858 4.82104C0.0895488 4.51273 0.0895488 4.01286 0.397857 3.70456C0.706166 3.39625 1.20603 3.39625 1.51434 3.70456L3.58768 5.77789L8.81891 0.546661Z\\" clip-rule=\\"evenodd\\" fill=\\"hsla(216, 33%, 29%, 1)\\" fill-rule=\\"evenodd\\" data-blade-component=\\"svg-path\\"></path></svg></div></div></div></label></div></div>"`;
+exports[`<Switch /> should render switch ssr 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="switch" class="BaseBox-bmPWx dhmCzz"><label style="cursor:pointer" data-blade-component="switch-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 bgSmPY"><input type="checkbox" role="switch" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-label="Toggle Darkmode" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 jHlQyY"/><div aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx SwitchTrackweb__SwitchTrack-t4l0ax-0  cwBdxr"><div data-blade-component="base-box" class="BaseBox-bmPWx Thumb-jf4wbz-0  gYYaLo"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedThumbweb__AnimatedThumb-i5qu0o-0  cZLYHA"><svg aria-hidden="true" data-blade-component="icon" height="8px" viewBox="0 0 11 8" width="8px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0 AnimatedThumbIconweb__AnimatedThumbIcon-sc-3hk5w7-0 ezMhSy"><path d="M8.81891 0.546661C9.12722 0.238352 9.62709 0.238353 9.9354 0.546661C10.2437 0.85497 10.2437 1.35484 9.9354 1.66315L4.14592 7.45262C3.83761 7.76093 3.33775 7.76093 3.02944 7.45262L0.397858 4.82104C0.0895488 4.51273 0.0895488 4.01286 0.397857 3.70456C0.706166 3.39625 1.20603 3.39625 1.51434 3.70456L3.58768 5.77789L8.81891 0.546661Z" clip-rule="evenodd" fill="hsla(216, 33%, 29%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></div></div></label></div></div>"`;
 
 exports[`<Switch /> should render switch ssr 2`] = `
 <div
diff --git a/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.native.test.tsx.snap b/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.native.test.tsx.snap
index 3aee3489980..26d69b97eb4 100644
--- a/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.native.test.tsx.snap
+++ b/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Tag /> should render tag 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -12,8 +12,8 @@ exports[`<Tag /> should render tag 1`] = `
     data-blade-component="tag"
     display="flex"
     style={
-      Array [
-        Object {
+      [
+        {
           "display": "flex",
         },
       ]
@@ -28,8 +28,8 @@ exports[`<Tag /> should render tag 1`] = `
       flexDirection="row"
       flexWrap="nowrap"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignSelf": "center",
             "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
             "borderRadius": 9999,
@@ -41,7 +41,7 @@ exports[`<Tag /> should render tag 1`] = `
             "paddingRight": 8,
             "paddingTop": 4,
           },
-          Object {},
+          {},
         ]
       }
     >
@@ -52,8 +52,8 @@ exports[`<Tag /> should render tag 1`] = `
         flexDirection="row"
         maxWidth="100px"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -63,6 +63,7 @@ exports[`<Tag /> should render tag 1`] = `
         }
       >
         <Text
+          accessible={true}
           color="surface.text.subtle.lowContrast"
           data-blade-component="text"
           fontFamily="text"
@@ -73,8 +74,8 @@ exports[`<Tag /> should render tag 1`] = `
           marginRight="spacing.2"
           numberOfLines={1}
           style={
-            Array [
-              Object {
+            [
+              {
                 "color": "hsla(216, 27%, 36%, 1)",
                 "fontFamily": "Lato",
                 "fontSize": 12,
@@ -104,8 +105,8 @@ exports[`<Tag /> should render tag 1`] = `
         flexDirection="row"
         justifyContent="center"
         style={
-          Array [
-            Object {
+          [
+            {
               "alignItems": "center",
               "display": "flex",
               "flexDirection": "row",
@@ -131,8 +132,8 @@ exports[`<Tag /> should render tag 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Array [
-              Object {
+            [
+              {
                 "alignSelf": "center",
               },
             ]
@@ -152,15 +153,15 @@ exports[`<Tag /> should render tag 1`] = `
             minX={0}
             minY={0}
             style={
-              Array [
-                Object {
+              [
+                {
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                Array [
-                  Object {},
+                [
+                  {},
                 ],
-                Object {
+                {
                   "flex": 0,
                   "height": 12,
                   "width": 12,
@@ -174,7 +175,7 @@ exports[`<Tag /> should render tag 1`] = `
             <RNSVGGroup
               fill={null}
               propList={
-                Array [
+                [
                   "fill",
                 ]
               }
@@ -183,7 +184,7 @@ exports[`<Tag /> should render tag 1`] = `
                 d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
                 fill={4288851646}
                 propList={
-                  Array [
+                  [
                     "fill",
                   ]
                 }
diff --git a/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.ssr.test.tsx.snap b/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.ssr.test.tsx.snap
index 658f62604d2..0c7456a2020 100644
--- a/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Tag /> should render tag 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><div data-blade-component=\\"tag\\" class=\\"BaseBox-bmPWx bcSLaJ\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx Tag__FocussableTag-jmwb4r-0 iZePvJ\\"><div data-blade-component=\\"box\\" class=\\"BaseBox-bmPWx fdWAve\\"><p class=\\"StyledBaseText-dVBfTO kDKzNc\\" data-blade-component=\\"text\\">in:User</p></div><div data-blade-component=\\"box\\" class=\\"BaseBox-bmPWx fCLMvl\\"><button type=\\"button\\" aria-label=\\"Close in:User tag\\" data-blade-component=\\"icon-button\\" class=\\"StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 gvuEeM\\"><svg aria-hidden=\\"true\\" data-blade-component=\\"icon\\" height=\\"12px\\" viewBox=\\"0 0 24 24\\" width=\\"12px\\" fill=\\"none\\" class=\\"Svgweb__StyledSvg-vcmjs8-0\\"><path d=\\"M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z\\" fill=\\"currentColor\\" data-blade-component=\\"svg-path\\"></path></svg></button></div></div></div></div>"`;
+exports[`<Tag /> should render tag 1`] = `"<div id="root" data-reactroot=""><div data-blade-component="tag" class="BaseBox-bmPWx bcSLaJ"><div data-blade-component="base-box" class="BaseBox-bmPWx Tag__FocussableTag-jmwb4r-0 iZePvJ"><div data-blade-component="box" class="BaseBox-bmPWx fdWAve"><p class="StyledBaseText-dVBfTO kDKzNc" data-blade-component="text">in:User</p></div><div data-blade-component="box" class="BaseBox-bmPWx fCLMvl"><button type="button" aria-label="Close in:User tag" data-blade-component="icon-button" class="StyledIconButtonweb__StyledButton-sc-1f4cg7d-0 gvuEeM"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z" fill="currentColor" data-blade-component="svg-path"></path></svg></button></div></div></div></div>"`;
 
 exports[`<Tag /> should render tag 2`] = `
 <div
diff --git a/packages/blade/src/components/Tooltip/__tests__/Tooltip.native.test.tsx b/packages/blade/src/components/Tooltip/__tests__/Tooltip.native.test.tsx
index 90399f4b9f1..e881b320497 100644
--- a/packages/blade/src/components/Tooltip/__tests__/Tooltip.native.test.tsx
+++ b/packages/blade/src/components/Tooltip/__tests__/Tooltip.native.test.tsx
@@ -13,12 +13,14 @@ const triggerId = 'tooltip-interactive-wrapper';
 const modalBackdropId = 'tooltip-modal-backdrop';
 
 describe('<Tooltip />', () => {
-  jest.useFakeTimers();
+  jest.useFakeTimers({
+    legacyFakeTimers: true,
+  });
 
   it('should render', () => {
     const tooltipContent = 'Hello world';
     const buttonText = 'Hover me';
-    const { toJSON, getByRole, getByA11yLabel } = renderWithTheme(
+    const { toJSON, getByRole, getByLabelText } = renderWithTheme(
       <Tooltip content={tooltipContent}>
         <Button>{buttonText}</Button>
       </Tooltip>,
@@ -27,7 +29,7 @@ describe('<Tooltip />', () => {
     expect(getByRole('button')).toBeTruthy();
     fireEvent(getByRole('button'), 'touchEnd');
 
-    expect(getByA11yLabel(tooltipContent)).toHaveProp('visible', true);
+    expect(getByLabelText(tooltipContent)).toHaveProp('visible', true);
 
     expect(toJSON()).toMatchSnapshot();
   });
@@ -35,7 +37,7 @@ describe('<Tooltip />', () => {
   it('should open on pressing trigger', () => {
     const triggerText = 'Press me';
     const tooltipContent = 'hello world';
-    const { getByTestId, getByA11yLabel } = renderWithTheme(
+    const { getByTestId, getByLabelText } = renderWithTheme(
       <Tooltip content={tooltipContent}>
         <TooltipInteractiveWrapper>
           <Text>{triggerText}</Text>
@@ -44,17 +46,17 @@ describe('<Tooltip />', () => {
     );
 
     expect(getByTestId(triggerId)).toBeTruthy();
-    expect(getByA11yLabel(tooltipContent)).toHaveProp('visible', false);
+    expect(getByLabelText(tooltipContent)).toHaveProp('visible', false);
 
     fireEvent(getByTestId(triggerId), 'touchEnd');
 
-    expect(getByA11yLabel(tooltipContent)).toHaveProp('visible', true);
+    expect(getByLabelText(tooltipContent)).toHaveProp('visible', true);
   });
 
   it('should close on pressing outside of trigger', async () => {
     const triggerText = 'Press me';
     const tooltipContent = 'hello world';
-    const { getByTestId, getByA11yLabel } = renderWithTheme(
+    const { getByTestId, getByLabelText } = renderWithTheme(
       <Tooltip content={tooltipContent}>
         <TooltipInteractiveWrapper>
           <Text>{triggerText}</Text>
@@ -64,7 +66,7 @@ describe('<Tooltip />', () => {
 
     expect(getByTestId(triggerId)).toBeTruthy();
     fireEvent(getByTestId(triggerId), 'touchEnd');
-    expect(getByA11yLabel(tooltipContent)).toHaveProp('visible', true);
+    expect(getByLabelText(tooltipContent)).toHaveProp('visible', true);
 
     // close on clicking backdrop
     fireEvent.press(getByTestId(modalBackdropId));
@@ -73,7 +75,7 @@ describe('<Tooltip />', () => {
     await act(async () => {
       jest.advanceTimersByTime(paymentTheme.motion.duration.gentle);
     });
-    expect(getByA11yLabel(tooltipContent)).toHaveProp('visible', false);
+    expect(getByLabelText(tooltipContent)).toHaveProp('visible', false);
   });
 
   it('should render tooltip with custom zIndex', () => {
diff --git a/packages/blade/src/components/Tooltip/__tests__/Tooltip.web.test.tsx b/packages/blade/src/components/Tooltip/__tests__/Tooltip.web.test.tsx
index 1bfde4a52ae..281c48b2b02 100644
--- a/packages/blade/src/components/Tooltip/__tests__/Tooltip.web.test.tsx
+++ b/packages/blade/src/components/Tooltip/__tests__/Tooltip.web.test.tsx
@@ -18,8 +18,10 @@ import assertAccessible from '~utils/testing/assertAccessible.web';
 const waitForPosition = () => act(async () => {});
 const animationDuration = paymentTheme.motion.duration.quick;
 
-describe('<Tooltip />', async () => {
-  jest.useFakeTimers();
+describe('<Tooltip />', () => {
+  jest.useFakeTimers({
+    legacyFakeTimers: true,
+  });
 
   it('should render', () => {
     const buttonText = 'Hover me';
diff --git a/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.native.test.tsx.snap b/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.native.test.tsx.snap
index a33c01bba9b..7517f6ba344 100644
--- a/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.native.test.tsx.snap
+++ b/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Tooltip /> should render 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,7 +11,7 @@ exports[`<Tooltip /> should render 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -50,8 +50,8 @@ exports[`<Tooltip /> should render 1`] = `
     onStartShouldSetResponder={[Function]}
     onTouchEnd={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -72,7 +72,7 @@ exports[`<Tooltip /> should render 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -88,8 +88,8 @@ exports[`<Tooltip /> should render 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -98,21 +98,22 @@ exports[`<Tooltip /> should render 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.primary.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 0%, 100%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -156,7 +157,7 @@ exports[`<Tooltip /> should render 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
+        {
           "flex": 1,
           "flexShrink": 0,
           "opacity": 1,
@@ -166,10 +167,10 @@ exports[`<Tooltip /> should render 1`] = `
     >
       <View
         style={
-          Object {
+          {
             "opacity": 0,
-            "transform": Array [
-              Object {
+            "transform": [
+              {
                 "translateX": 4,
               },
             ],
@@ -183,8 +184,8 @@ exports[`<Tooltip /> should render 1`] = `
           maxWidth="200px"
           position="absolute"
           style={
-            Array [
-              Object {
+            [
+              {
                 "maxWidth": 200,
                 "paddingBottom": 8,
                 "paddingLeft": 12,
@@ -192,7 +193,7 @@ exports[`<Tooltip /> should render 1`] = `
                 "paddingTop": 8,
                 "position": "absolute",
               },
-              Object {
+              {
                 "backgroundColor": "hsla(216, 33%, 29%, 1)",
                 "borderColor": "hsla(216, 27%, 36%, 1)",
                 "borderRadius": 4,
@@ -203,10 +204,10 @@ exports[`<Tooltip /> should render 1`] = `
                 "top": -200,
                 "zIndex": 1100,
               },
-              Object {
+              {
                 "elevation": 4,
                 "shadowColor": "hsla(217, 56%, 17%, 0.64)",
-                "shadowOffset": Object {
+                "shadowOffset": {
                   "height": 3,
                   "width": 0,
                 },
@@ -216,7 +217,7 @@ exports[`<Tooltip /> should render 1`] = `
             ]
           }
           styles={
-            Object {
+            {
               "left": -200,
               "position": "absolute",
               "top": -200,
@@ -225,6 +226,7 @@ exports[`<Tooltip /> should render 1`] = `
           }
         >
           <Text
+            accessible={true}
             color="feedback.text.neutral.highContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -233,8 +235,8 @@ exports[`<Tooltip /> should render 1`] = `
             fontWeight="regular"
             lineHeight={50}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(0, 0%, 100%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -259,7 +261,7 @@ exports[`<Tooltip /> should render 1`] = `
           <View
             collapsable={false}
             style={
-              Object {
+              {
                 "bottom": 0,
                 "left": 0,
                 "position": "absolute",
@@ -281,23 +283,23 @@ exports[`<Tooltip /> should render 1`] = `
               minX={0}
               minY={0}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "transparent",
                     "borderWidth": 0,
                   },
-                  Array [
-                    Object {},
-                    Object {},
+                  [
+                    {},
+                    {},
                   ],
-                  Object {
+                  {
                     "flex": 0,
                     "height": 14,
                     "width": 14,
                   },
                 ]
               }
-              styles={Object {}}
+              styles={{}}
               vbHeight={14}
               vbWidth={14}
               width="14px"
@@ -307,7 +309,7 @@ exports[`<Tooltip /> should render 1`] = `
                   d="M0,0 H14 L7,7 Q7,7 7,7 Z"
                   fill={null}
                   propList={
-                    Array [
+                    [
                       "fill",
                       "stroke",
                       "strokeWidth",
@@ -320,7 +322,7 @@ exports[`<Tooltip /> should render 1`] = `
                   d="M0,0 H14 L7,7 Q7,7 7,7 Z"
                   fill={4281484642}
                   propList={
-                    Array [
+                    [
                       "fill",
                       "stroke",
                     ]
@@ -340,7 +342,7 @@ exports[`<Tooltip /> should render 1`] = `
 exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -348,7 +350,7 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
   <View
     accessibilityRole="button"
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -387,8 +389,8 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
     onStartShouldSetResponder={[Function]}
     onTouchEnd={[Function]}
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
           "alignSelf": "center",
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
@@ -409,7 +411,7 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
           "textDecorationStyle": "solid",
           "width": "auto",
         },
-        Object {
+        {
           "backgroundColor": "hsla(218, 89%, 51%, 1)",
           "borderColor": "hsla(218, 89%, 51%, 1)",
         },
@@ -425,8 +427,8 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
       isHidden={false}
       justifyContent="center"
       style={
-        Array [
-          Object {
+        [
+          {
             "alignItems": "center",
             "display": "flex",
             "flexBasis": 0,
@@ -435,21 +437,22 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
             "flexShrink": 1,
             "justifyContent": "center",
           },
-          Object {
+          {
             "opacity": 1,
           },
         ]
       }
     >
       <Text
+        accessible={true}
         color="action.text.primary.default"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="bold"
         lineHeight={100}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "hsla(0, 0%, 100%, 1)",
               "fontFamily": "Lato",
               "fontSize": 14,
@@ -493,7 +496,7 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
+        {
           "flex": 1,
           "flexShrink": 0,
           "opacity": 1,
@@ -503,10 +506,10 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
     >
       <View
         style={
-          Object {
+          {
             "opacity": 0,
-            "transform": Array [
-              Object {
+            "transform": [
+              {
                 "translateX": 4,
               },
             ],
@@ -520,8 +523,8 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
           maxWidth="200px"
           position="absolute"
           style={
-            Array [
-              Object {
+            [
+              {
                 "maxWidth": 200,
                 "paddingBottom": 8,
                 "paddingLeft": 12,
@@ -529,7 +532,7 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
                 "paddingTop": 8,
                 "position": "absolute",
               },
-              Object {
+              {
                 "backgroundColor": "hsla(216, 33%, 29%, 1)",
                 "borderColor": "hsla(216, 27%, 36%, 1)",
                 "borderRadius": 4,
@@ -540,10 +543,10 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
                 "top": -200,
                 "zIndex": 9999,
               },
-              Object {
+              {
                 "elevation": 4,
                 "shadowColor": "hsla(217, 56%, 17%, 0.64)",
-                "shadowOffset": Object {
+                "shadowOffset": {
                   "height": 3,
                   "width": 0,
                 },
@@ -553,7 +556,7 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
             ]
           }
           styles={
-            Object {
+            {
               "left": -200,
               "position": "absolute",
               "top": -200,
@@ -562,6 +565,7 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
           }
         >
           <Text
+            accessible={true}
             color="feedback.text.neutral.highContrast"
             data-blade-component="text"
             fontFamily="text"
@@ -570,8 +574,8 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
             fontWeight="regular"
             lineHeight={50}
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "hsla(0, 0%, 100%, 1)",
                   "fontFamily": "Lato",
                   "fontSize": 12,
@@ -596,7 +600,7 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
           <View
             collapsable={false}
             style={
-              Object {
+              {
                 "bottom": 0,
                 "left": 0,
                 "position": "absolute",
@@ -618,23 +622,23 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
               minX={0}
               minY={0}
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "backgroundColor": "transparent",
                     "borderWidth": 0,
                   },
-                  Array [
-                    Object {},
-                    Object {},
+                  [
+                    {},
+                    {},
                   ],
-                  Object {
+                  {
                     "flex": 0,
                     "height": 14,
                     "width": 14,
                   },
                 ]
               }
-              styles={Object {}}
+              styles={{}}
               vbHeight={14}
               vbWidth={14}
               width="14px"
@@ -644,7 +648,7 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
                   d="M0,0 H14 L7,7 Q7,7 7,7 Z"
                   fill={null}
                   propList={
-                    Array [
+                    [
                       "fill",
                       "stroke",
                       "strokeWidth",
@@ -657,7 +661,7 @@ exports[`<Tooltip /> should render tooltip with custom zIndex 1`] = `
                   d="M0,0 H14 L7,7 Q7,7 7,7 Z"
                   fill={4281484642}
                   propList={
-                    Array [
+                    [
                       "fill",
                       "stroke",
                     ]
diff --git a/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.ssr.test.tsx.snap b/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.ssr.test.tsx.snap
index 1345819ad6a..03d6deb9fb6 100644
--- a/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Tooltip /> should render Tooltip ssr 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><button type=\\"button\\" data-blade-component=\\"button\\" role=\\"button\\" class=\\"StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 dOlUqh\\"><div data-blade-component=\\"base-box\\" class=\\"BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 kkGTK NIPoA\\"><div class=\\"StyledBaseText-dVBfTO brGLEM\\" data-blade-component=\\"base-text\\">Hello world</div></div></button></div>"`;
+exports[`<Tooltip /> should render Tooltip ssr 1`] = `"<div id="root" data-reactroot=""><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 dOlUqh"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 kkGTK NIPoA"><div class="StyledBaseText-dVBfTO brGLEM" data-blade-component="base-text">Hello world</div></div></button></div>"`;
 
 exports[`<Tooltip /> should render Tooltip ssr 2`] = `
 <div
diff --git a/packages/blade/src/components/Typography/BaseText/__tests__/__snapshots__/BaseText.native.test.tsx.snap b/packages/blade/src/components/Typography/BaseText/__tests__/__snapshots__/BaseText.native.test.tsx.snap
index 072bef239b4..839f0c870da 100644
--- a/packages/blade/src/components/Typography/BaseText/__tests__/__snapshots__/BaseText.native.test.tsx.snap
+++ b/packages/blade/src/components/Typography/BaseText/__tests__/__snapshots__/BaseText.native.test.tsx.snap
@@ -3,12 +3,13 @@
 exports[`<BaseText /> should render regular text 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
+    accessible={true}
     color="surface.text.normal.highContrast"
     data-blade-component="base-text"
     fontFamily="text"
@@ -16,8 +17,8 @@ exports[`<BaseText /> should render regular text 1`] = `
     fontWeight="regular"
     lineHeight={100}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(0, 0%, 100%, 1)",
           "fontFamily": "Lato",
           "fontSize": 10,
@@ -45,12 +46,13 @@ exports[`<BaseText /> should render regular text 1`] = `
 exports[`<BaseText /> should render text in italics style with line-through 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
+    accessible={true}
     color="surface.text.normal.highContrast"
     data-blade-component="base-text"
     fontFamily="text"
@@ -59,8 +61,8 @@ exports[`<BaseText /> should render text in italics style with line-through 1`]
     fontWeight="regular"
     lineHeight={100}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(0, 0%, 100%, 1)",
           "fontFamily": "Lato",
           "fontSize": 10,
@@ -89,16 +91,17 @@ exports[`<BaseText /> should render text in italics style with line-through 1`]
 exports[`<BaseText /> should render text with default properties 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
+    accessible={true}
     data-blade-component="base-text"
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(217, 56%, 17%, 1)",
           "fontFamily": "Lato",
           "fontSize": 16,
diff --git a/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.native.test.tsx.snap b/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.native.test.tsx.snap
index 82aa8e47851..d21c131d3dd 100644
--- a/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.native.test.tsx.snap
+++ b/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Code /> should render Code with color 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -13,9 +13,9 @@ exports[`<Code /> should render Code with color 1`] = `
     isHighlighted={false}
     size="small"
     style={
-      Array [
-        Object {},
-        Object {
+      [
+        {},
+        {
           "alignSelf": "center",
           "borderRadius": 4,
           "display": "flex",
@@ -30,6 +30,7 @@ exports[`<Code /> should render Code with color 1`] = `
     }
   >
     <Text
+      accessible={true}
       color="action.text.link.disabled"
       data-blade-component="base-text"
       fontFamily="code"
@@ -37,8 +38,8 @@ exports[`<Code /> should render Code with color 1`] = `
       fontWeight="regular"
       lineHeight={25}
       style={
-        Array [
-          Object {
+        [
+          {
             "color": "hsla(218, 19%, 81%, 1)",
             "fontFamily": "Courier",
             "fontSize": 10,
@@ -67,7 +68,7 @@ exports[`<Code /> should render Code with color 1`] = `
 exports[`<Code /> should render Code with default properties 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -77,9 +78,9 @@ exports[`<Code /> should render Code with default properties 1`] = `
     isHighlighted={true}
     size="small"
     style={
-      Array [
-        Object {},
-        Object {
+      [
+        {},
+        {
           "alignSelf": "center",
           "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
           "borderRadius": 4,
@@ -95,6 +96,7 @@ exports[`<Code /> should render Code with default properties 1`] = `
     }
   >
     <Text
+      accessible={true}
       color="surface.text.subtle.lowContrast"
       data-blade-component="base-text"
       fontFamily="code"
@@ -102,8 +104,8 @@ exports[`<Code /> should render Code with default properties 1`] = `
       fontWeight="regular"
       lineHeight={25}
       style={
-        Array [
-          Object {
+        [
+          {
             "color": "hsla(216, 27%, 36%, 1)",
             "fontFamily": "Courier",
             "fontSize": 10,
@@ -132,7 +134,7 @@ exports[`<Code /> should render Code with default properties 1`] = `
 exports[`<Code /> should render isHighlighted false Code 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -142,9 +144,9 @@ exports[`<Code /> should render isHighlighted false Code 1`] = `
     isHighlighted={false}
     size="small"
     style={
-      Array [
-        Object {},
-        Object {
+      [
+        {},
+        {
           "alignSelf": "center",
           "borderRadius": 4,
           "display": "flex",
@@ -159,6 +161,7 @@ exports[`<Code /> should render isHighlighted false Code 1`] = `
     }
   >
     <Text
+      accessible={true}
       color="surface.text.normal.lowContrast"
       data-blade-component="base-text"
       fontFamily="code"
@@ -166,8 +169,8 @@ exports[`<Code /> should render isHighlighted false Code 1`] = `
       fontWeight="regular"
       lineHeight={25}
       style={
-        Array [
-          Object {
+        [
+          {
             "color": "hsla(217, 56%, 17%, 1)",
             "fontFamily": "Courier",
             "fontSize": 10,
@@ -196,7 +199,7 @@ exports[`<Code /> should render isHighlighted false Code 1`] = `
 exports[`<Code /> should render medium Code 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -206,9 +209,9 @@ exports[`<Code /> should render medium Code 1`] = `
     isHighlighted={true}
     size="medium"
     style={
-      Array [
-        Object {},
-        Object {
+      [
+        {},
+        {
           "alignSelf": "center",
           "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
           "borderRadius": 4,
@@ -224,6 +227,7 @@ exports[`<Code /> should render medium Code 1`] = `
     }
   >
     <Text
+      accessible={true}
       color="surface.text.subtle.lowContrast"
       data-blade-component="base-text"
       fontFamily="code"
@@ -231,8 +235,8 @@ exports[`<Code /> should render medium Code 1`] = `
       fontWeight="regular"
       lineHeight={75}
       style={
-        Array [
-          Object {
+        [
+          {
             "color": "hsla(216, 27%, 36%, 1)",
             "fontFamily": "Courier",
             "fontSize": 12,
@@ -261,7 +265,7 @@ exports[`<Code /> should render medium Code 1`] = `
 exports[`<Code /> should render small Code 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -271,9 +275,9 @@ exports[`<Code /> should render small Code 1`] = `
     isHighlighted={true}
     size="small"
     style={
-      Array [
-        Object {},
-        Object {
+      [
+        {},
+        {
           "alignSelf": "center",
           "backgroundColor": "hsla(216, 15%, 54%, 0.18)",
           "borderRadius": 4,
@@ -289,6 +293,7 @@ exports[`<Code /> should render small Code 1`] = `
     }
   >
     <Text
+      accessible={true}
       color="surface.text.subtle.lowContrast"
       data-blade-component="base-text"
       fontFamily="code"
@@ -296,8 +301,8 @@ exports[`<Code /> should render small Code 1`] = `
       fontWeight="regular"
       lineHeight={25}
       style={
-        Array [
-          Object {
+        [
+          {
             "color": "hsla(216, 27%, 36%, 1)",
             "fontFamily": "Courier",
             "fontSize": 10,
diff --git a/packages/blade/src/components/Typography/Heading/__tests__/__snapshots__/Heading.native.test.tsx.snap b/packages/blade/src/components/Typography/Heading/__tests__/__snapshots__/Heading.native.test.tsx.snap
index ff900a28b9c..fca1f6d30fd 100644
--- a/packages/blade/src/components/Typography/Heading/__tests__/__snapshots__/Heading.native.test.tsx.snap
+++ b/packages/blade/src/components/Typography/Heading/__tests__/__snapshots__/Heading.native.test.tsx.snap
@@ -3,13 +3,14 @@
 exports[`<Heading /> should render Heading with color 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
     accessibilityRole="header"
+    accessible={true}
     color="surface.text.placeholder.lowContrast"
     data-blade-component="heading"
     fontFamily="text"
@@ -18,8 +19,8 @@ exports[`<Heading /> should render Heading with color 1`] = `
     fontWeight="bold"
     lineHeight={300}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(214, 18%, 69%, 1)",
           "fontFamily": "Lato",
           "fontSize": 16,
@@ -47,13 +48,14 @@ exports[`<Heading /> should render Heading with color 1`] = `
 exports[`<Heading /> should render Heading with default properties 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
     accessibilityRole="header"
+    accessible={true}
     color="surface.text.normal.lowContrast"
     data-blade-component="heading"
     fontFamily="text"
@@ -62,8 +64,8 @@ exports[`<Heading /> should render Heading with default properties 1`] = `
     fontWeight="bold"
     lineHeight={300}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(217, 56%, 17%, 1)",
           "fontFamily": "Lato",
           "fontSize": 16,
@@ -91,13 +93,14 @@ exports[`<Heading /> should render Heading with default properties 1`] = `
 exports[`<Heading /> should render Heading with mixed color 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
     accessibilityRole="header"
+    accessible={true}
     color="surface.text.normal.lowContrast"
     data-blade-component="heading"
     fontFamily="text"
@@ -106,8 +109,8 @@ exports[`<Heading /> should render Heading with mixed color 1`] = `
     fontWeight="bold"
     lineHeight={300}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(217, 56%, 17%, 1)",
           "fontFamily": "Lato",
           "fontSize": 16,
@@ -131,6 +134,7 @@ exports[`<Heading /> should render Heading with mixed color 1`] = `
      
     <Text
       accessibilityRole="header"
+      accessible={true}
       color="feedback.information.action.text.primary.default.lowContrast"
       data-blade-component="heading"
       fontFamily="text"
@@ -139,8 +143,8 @@ exports[`<Heading /> should render Heading with mixed color 1`] = `
       fontWeight="bold"
       lineHeight={300}
       style={
-        Array [
-          Object {
+        [
+          {
             "color": "hsla(195, 100%, 31%, 1)",
             "fontFamily": "Lato",
             "fontSize": 16,
@@ -169,13 +173,14 @@ exports[`<Heading /> should render Heading with mixed color 1`] = `
 exports[`<Heading /> should render Heading with size "large" 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
     accessibilityRole="header"
+    accessible={true}
     color="surface.text.subdued.lowContrast"
     data-blade-component="heading"
     fontFamily="text"
@@ -184,8 +189,8 @@ exports[`<Heading /> should render Heading with size "large" 1`] = `
     fontWeight="regular"
     lineHeight={400}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(217, 18%, 45%, 1)",
           "fontFamily": "Lato",
           "fontSize": 18,
@@ -213,13 +218,14 @@ exports[`<Heading /> should render Heading with size "large" 1`] = `
 exports[`<Heading /> should render Heading with size "medium" 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
     accessibilityRole="header"
+    accessible={true}
     color="surface.text.muted.lowContrast"
     data-blade-component="heading"
     fontFamily="text"
@@ -228,8 +234,8 @@ exports[`<Heading /> should render Heading with size "medium" 1`] = `
     fontWeight="regular"
     lineHeight={200}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(216, 16%, 60%, 1)",
           "fontFamily": "Lato",
           "fontSize": 16,
@@ -257,13 +263,14 @@ exports[`<Heading /> should render Heading with size "medium" 1`] = `
 exports[`<Heading /> should render Heading with size "small" 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
     accessibilityRole="header"
+    accessible={true}
     color="surface.text.normal.lowContrast"
     data-blade-component="heading"
     fontFamily="text"
@@ -272,8 +279,8 @@ exports[`<Heading /> should render Heading with size "small" 1`] = `
     fontWeight="regular"
     lineHeight={300}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(217, 56%, 17%, 1)",
           "fontFamily": "Lato",
           "fontSize": 16,
@@ -301,13 +308,14 @@ exports[`<Heading /> should render Heading with size "small" 1`] = `
 exports[`<Heading /> should render Heading with size "small" and contrast "high" 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
     accessibilityRole="header"
+    accessible={true}
     color="surface.text.normal.highContrast"
     data-blade-component="heading"
     fontFamily="text"
@@ -316,8 +324,8 @@ exports[`<Heading /> should render Heading with size "small" and contrast "high"
     fontWeight="regular"
     lineHeight={300}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(0, 0%, 100%, 1)",
           "fontFamily": "Lato",
           "fontSize": 16,
@@ -345,13 +353,14 @@ exports[`<Heading /> should render Heading with size "small" and contrast "high"
 exports[`<Heading /> should render Heading with variant "subheading" and weight "bold" 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
     accessibilityRole="header"
+    accessible={true}
     color="surface.text.subdued.lowContrast"
     data-blade-component="heading"
     fontFamily="text"
@@ -360,8 +369,8 @@ exports[`<Heading /> should render Heading with variant "subheading" and weight
     fontWeight="bold"
     lineHeight={50}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(217, 18%, 45%, 1)",
           "fontFamily": "Lato",
           "fontSize": 12,
diff --git a/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.native.test.tsx.snap b/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.native.test.tsx.snap
index 897a7b81775..2ab09acfb5f 100644
--- a/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.native.test.tsx.snap
+++ b/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.native.test.tsx.snap
@@ -3,12 +3,13 @@
 exports[`<Text /> should render Text with center textAlign 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
+    accessible={true}
     color="surface.text.normal.lowContrast"
     data-blade-component="text"
     fontFamily="text"
@@ -17,8 +18,8 @@ exports[`<Text /> should render Text with center textAlign 1`] = `
     fontWeight="regular"
     lineHeight={100}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(217, 56%, 17%, 1)",
           "fontFamily": "Lato",
           "fontSize": 14,
@@ -48,12 +49,13 @@ exports[`<Text /> should render Text with center textAlign 1`] = `
 exports[`<Text /> should render Text with color 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
+    accessible={true}
     color="surface.text.muted.lowContrast"
     data-blade-component="text"
     fontFamily="text"
@@ -62,8 +64,8 @@ exports[`<Text /> should render Text with color 1`] = `
     fontWeight="regular"
     lineHeight={100}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(216, 16%, 60%, 1)",
           "fontFamily": "Lato",
           "fontSize": 14,
@@ -91,12 +93,13 @@ exports[`<Text /> should render Text with color 1`] = `
 exports[`<Text /> should render Text with default properties 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
+    accessible={true}
     color="surface.text.normal.lowContrast"
     data-blade-component="text"
     fontFamily="text"
@@ -105,8 +108,8 @@ exports[`<Text /> should render Text with default properties 1`] = `
     fontWeight="regular"
     lineHeight={100}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(217, 56%, 17%, 1)",
           "fontFamily": "Lato",
           "fontSize": 14,
@@ -134,12 +137,13 @@ exports[`<Text /> should render Text with default properties 1`] = `
 exports[`<Text /> should render Text with variant "body" 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
+    accessible={true}
     color="surface.text.normal.lowContrast"
     data-blade-component="text"
     fontFamily="text"
@@ -149,8 +153,8 @@ exports[`<Text /> should render Text with variant "body" 1`] = `
     lineHeight={100}
     numberOfLines={3}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(217, 56%, 17%, 1)",
           "fontFamily": "Lato",
           "fontSize": 14,
@@ -178,12 +182,13 @@ exports[`<Text /> should render Text with variant "body" 1`] = `
 exports[`<Text /> should render Text with variant "body" and contrast "high" 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
+    accessible={true}
     color="surface.text.normal.highContrast"
     data-blade-component="text"
     fontFamily="text"
@@ -193,8 +198,8 @@ exports[`<Text /> should render Text with variant "body" and contrast "high" 1`]
     lineHeight={100}
     numberOfLines={3}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(0, 0%, 100%, 1)",
           "fontFamily": "Lato",
           "fontSize": 14,
@@ -222,12 +227,13 @@ exports[`<Text /> should render Text with variant "body" and contrast "high" 1`]
 exports[`<Text /> should render Text with variant "body" and size "small" 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
+    accessible={true}
     color="surface.text.normal.lowContrast"
     data-blade-component="text"
     fontFamily="text"
@@ -237,8 +243,8 @@ exports[`<Text /> should render Text with variant "body" and size "small" 1`] =
     lineHeight={50}
     numberOfLines={3}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(217, 56%, 17%, 1)",
           "fontFamily": "Lato",
           "fontSize": 12,
@@ -266,12 +272,13 @@ exports[`<Text /> should render Text with variant "body" and size "small" 1`] =
 exports[`<Text /> should render Text with variant "caption" 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
+    accessible={true}
     color="surface.text.normal.lowContrast"
     data-blade-component="text"
     fontFamily="text"
@@ -280,8 +287,8 @@ exports[`<Text /> should render Text with variant "caption" 1`] = `
     fontWeight="bold"
     lineHeight={100}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(217, 56%, 17%, 1)",
           "fontFamily": "Lato",
           "fontSize": 14,
diff --git a/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.ssr.test.tsx.snap b/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.ssr.test.tsx.snap
index c9627f9fe86..2239b8bf9e0 100644
--- a/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Text /> should render Text on server 1`] = `"<div id=\\"root\\" data-reactroot=\\"\\"><p class=\\"StyledBaseText-dVBfTO eIdQFo\\" data-blade-component=\\"text\\">Displaying some text</p></div>"`;
+exports[`<Text /> should render Text on server 1`] = `"<div id="root" data-reactroot=""><p class="StyledBaseText-dVBfTO eIdQFo" data-blade-component="text">Displaying some text</p></div>"`;
 
 exports[`<Text /> should render Text on server 2`] = `
 <div
diff --git a/packages/blade/src/components/Typography/Title/__tests__/__snapshots__/Title.native.test.tsx.snap b/packages/blade/src/components/Typography/Title/__tests__/__snapshots__/Title.native.test.tsx.snap
index 8e618e674f1..5a3126a90d4 100644
--- a/packages/blade/src/components/Typography/Title/__tests__/__snapshots__/Title.native.test.tsx.snap
+++ b/packages/blade/src/components/Typography/Title/__tests__/__snapshots__/Title.native.test.tsx.snap
@@ -3,13 +3,14 @@
 exports[`<Title /> should render Title with color 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
     accessibilityRole="header"
+    accessible={true}
     color="surface.text.subtle.highContrast"
     data-blade-component="title"
     fontFamily="text"
@@ -18,8 +19,8 @@ exports[`<Title /> should render Title with color 1`] = `
     fontWeight="bold"
     lineHeight={500}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(220, 30%, 96%, 1)",
           "fontFamily": "Lato",
           "fontSize": 20,
@@ -47,13 +48,14 @@ exports[`<Title /> should render Title with color 1`] = `
 exports[`<Title /> should render Title with default properties 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
     accessibilityRole="header"
+    accessible={true}
     color="surface.text.normal.lowContrast"
     data-blade-component="title"
     fontFamily="text"
@@ -62,8 +64,8 @@ exports[`<Title /> should render Title with default properties 1`] = `
     fontWeight="bold"
     lineHeight={500}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(217, 56%, 17%, 1)",
           "fontFamily": "Lato",
           "fontSize": 20,
@@ -91,13 +93,14 @@ exports[`<Title /> should render Title with default properties 1`] = `
 exports[`<Title /> should render Title with mixed color 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
     accessibilityRole="header"
+    accessible={true}
     color="surface.text.normal.lowContrast"
     data-blade-component="title"
     fontFamily="text"
@@ -106,8 +109,8 @@ exports[`<Title /> should render Title with mixed color 1`] = `
     fontWeight="bold"
     lineHeight={500}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(217, 56%, 17%, 1)",
           "fontFamily": "Lato",
           "fontSize": 20,
@@ -131,6 +134,7 @@ exports[`<Title /> should render Title with mixed color 1`] = `
      
     <Text
       accessibilityRole="header"
+      accessible={true}
       color="feedback.information.action.text.primary.default.lowContrast"
       data-blade-component="title"
       fontFamily="text"
@@ -139,8 +143,8 @@ exports[`<Title /> should render Title with mixed color 1`] = `
       fontWeight="bold"
       lineHeight={500}
       style={
-        Array [
-          Object {
+        [
+          {
             "color": "hsla(195, 100%, 31%, 1)",
             "fontFamily": "Lato",
             "fontSize": 20,
@@ -169,13 +173,14 @@ exports[`<Title /> should render Title with mixed color 1`] = `
 exports[`<Title /> should render Title with variant "large" 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
     accessibilityRole="header"
+    accessible={true}
     color="surface.text.subdued.lowContrast"
     data-blade-component="title"
     fontFamily="text"
@@ -184,8 +189,8 @@ exports[`<Title /> should render Title with variant "large" 1`] = `
     fontWeight="bold"
     lineHeight={700}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(217, 18%, 45%, 1)",
           "fontFamily": "Lato",
           "fontSize": 28,
@@ -213,13 +218,14 @@ exports[`<Title /> should render Title with variant "large" 1`] = `
 exports[`<Title /> should render Title with variant "medium" 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
     accessibilityRole="header"
+    accessible={true}
     color="surface.text.muted.lowContrast"
     data-blade-component="title"
     fontFamily="text"
@@ -228,8 +234,8 @@ exports[`<Title /> should render Title with variant "medium" 1`] = `
     fontWeight="bold"
     lineHeight={600}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(216, 16%, 60%, 1)",
           "fontFamily": "Lato",
           "fontSize": 24,
@@ -257,13 +263,14 @@ exports[`<Title /> should render Title with variant "medium" 1`] = `
 exports[`<Title /> should render Title with variant "small" 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
     accessibilityRole="header"
+    accessible={true}
     color="surface.text.normal.lowContrast"
     data-blade-component="title"
     fontFamily="text"
@@ -272,8 +279,8 @@ exports[`<Title /> should render Title with variant "small" 1`] = `
     fontWeight="bold"
     lineHeight={500}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(217, 56%, 17%, 1)",
           "fontFamily": "Lato",
           "fontSize": 20,
@@ -301,13 +308,14 @@ exports[`<Title /> should render Title with variant "small" 1`] = `
 exports[`<Title /> should render Title with variant "small" and contrast "high" 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <Text
     accessibilityRole="header"
+    accessible={true}
     color="surface.text.normal.highContrast"
     data-blade-component="title"
     fontFamily="text"
@@ -316,8 +324,8 @@ exports[`<Title /> should render Title with variant "small" and contrast "high"
     fontWeight="bold"
     lineHeight={500}
     style={
-      Array [
-        Object {
+      [
+        {
           "color": "hsla(0, 0%, 100%, 1)",
           "fontFamily": "Lato",
           "fontSize": 20,
diff --git a/packages/blade/src/components/VisuallyHidden/__tests__/__snapshots__/VisuallyHidden.native.test.tsx.snap b/packages/blade/src/components/VisuallyHidden/__tests__/__snapshots__/VisuallyHidden.native.test.tsx.snap
index 7b7e1677afc..851bd0b6f54 100644
--- a/packages/blade/src/components/VisuallyHidden/__tests__/__snapshots__/VisuallyHidden.native.test.tsx.snap
+++ b/packages/blade/src/components/VisuallyHidden/__tests__/__snapshots__/VisuallyHidden.native.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<VisuallyHidden /> should render VisuallyHidden content 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -11,8 +11,8 @@ exports[`<VisuallyHidden /> should render VisuallyHidden content 1`] = `
   <View
     data-blade-component="visually-hidden"
     style={
-      Array [
-        Object {
+      [
+        {
           "borderColor": "black",
           "borderStyle": "solid",
           "borderWidth": 0,
diff --git a/packages/blade/src/utils/makeAccessible/__tests__/makeAccessible.native.test.ts b/packages/blade/src/utils/makeAccessible/__tests__/makeAccessible.native.test.ts
index a392b063810..f55bd0ec039 100644
--- a/packages/blade/src/utils/makeAccessible/__tests__/makeAccessible.native.test.ts
+++ b/packages/blade/src/utils/makeAccessible/__tests__/makeAccessible.native.test.ts
@@ -12,6 +12,7 @@ describe('makeAccessible', () => {
       accessibilityLabel: 'hello world',
       accessibilityLabelledBy: 'id1',
       accessibilityRole: 'button',
+      accessible: true,
     });
   });
 
@@ -22,6 +23,7 @@ describe('makeAccessible', () => {
       }),
     ).toStrictEqual({
       accessibilityRole: 'adjustable',
+      accessible: true,
     });
 
     // native specific roles
@@ -31,25 +33,27 @@ describe('makeAccessible', () => {
       }),
     ).toStrictEqual({
       accessibilityRole: 'text',
+      accessible: true,
     });
 
     expect(
       makeAccessible({
         role: 'feed',
       }),
-    ).toStrictEqual({});
+    ).toStrictEqual({ accessible: true });
   });
 
   it('should return correct accessibility attributes for live region', () => {
     expect(makeAccessible({ liveRegion: 'polite' })).toStrictEqual({
       accessibilityLiveRegion: 'polite',
+      accessible: true,
     });
   });
 
   it('should ignore invalid roles in native', () => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error
-    expect(makeAccessible({ role: 'invalid' })).toStrictEqual({});
+    expect(makeAccessible({ role: 'invalid' })).toStrictEqual({ accessible: true });
   });
 
   it('should return correct attributes for accessibilityState', () => {
@@ -69,6 +73,7 @@ describe('makeAccessible', () => {
         expanded: false,
         busy: false,
       },
+      accessible: true,
     });
   });
 
@@ -87,6 +92,7 @@ describe('makeAccessible', () => {
         now: 2,
         text: 'text',
       },
+      accessible: true,
     });
 
     expect(
diff --git a/packages/blade/src/utils/makeAccessible/makeAccessible.native.ts b/packages/blade/src/utils/makeAccessible/makeAccessible.native.ts
index 641e6a13f28..4ca9cf7c13e 100644
--- a/packages/blade/src/utils/makeAccessible/makeAccessible.native.ts
+++ b/packages/blade/src/utils/makeAccessible/makeAccessible.native.ts
@@ -12,6 +12,8 @@ import { logger } from '~utils/logger';
 export const makeAccessible = (props: Partial<AccessibilityProps>): Record<string, unknown> => {
   const newProps: Record<string, any> = {};
 
+  newProps.accessible = true;
+
   // loop through all the incoming props and map them
   for (const key in props) {
     const propKey = key as keyof AccessibilityMap;
@@ -44,6 +46,7 @@ export const makeAccessible = (props: Partial<AccessibilityProps>): Record<strin
         newProps.importantForAccessibility = 'no-hide-descendants';
       }
 
+      delete newProps.accessible;
       delete newProps.accessibilityHidden;
       continue;
     }
diff --git a/yarn.lock b/yarn.lock
index 238f2285345..37ff7c90e51 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@adobe/css-tools@^4.0.1":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.2.0.tgz#e1a84fca468f4b337816fcb7f0964beb620ba855"
+  integrity sha512-E09FiIft46CmH5Qnjb0wsW54/YQd69LsxeKUOWawmws1XWvyFGURnAChH0mlr7YPFR1ofwvUQfcL0J3lMxXqPA==
+
 "@ampproject/remapping@^2.2.0":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
@@ -2576,6 +2581,18 @@
     jest-util "^29.5.0"
     slash "^3.0.0"
 
+"@jest/console@^29.6.1":
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-29.6.1.tgz#b48ba7b9c34b51483e6d590f46e5837f1ab5f639"
+  integrity sha512-Aj772AYgwTSr5w8qnyoJ0eDYvN6bMsH3ORH1ivMotrInHLKdUz6BDlaEXHdM6kODaBIkNIyQGzsMvRdOv7VG7Q==
+  dependencies:
+    "@jest/types" "^29.6.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^29.6.1"
+    jest-util "^29.6.1"
+    slash "^3.0.0"
+
 "@jest/core@^26.6.0", "@jest/core@^26.6.3":
   version "26.6.3"
   resolved "https://registry.yarnpkg.com/@jest/core/-/core-26.6.3.tgz#7639fcb3833d748a4656ada54bde193051e45fad"
@@ -2644,6 +2661,40 @@
     slash "^3.0.0"
     strip-ansi "^6.0.0"
 
+"@jest/core@^29.6.1":
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-29.6.1.tgz#fac0d9ddf320490c93356ba201451825231e95f6"
+  integrity sha512-CcowHypRSm5oYQ1obz1wfvkjZZ2qoQlrKKvlfPwh5jUXVU12TWr2qMeH8chLMuTFzHh5a1g2yaqlqDICbr+ukQ==
+  dependencies:
+    "@jest/console" "^29.6.1"
+    "@jest/reporters" "^29.6.1"
+    "@jest/test-result" "^29.6.1"
+    "@jest/transform" "^29.6.1"
+    "@jest/types" "^29.6.1"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    jest-changed-files "^29.5.0"
+    jest-config "^29.6.1"
+    jest-haste-map "^29.6.1"
+    jest-message-util "^29.6.1"
+    jest-regex-util "^29.4.3"
+    jest-resolve "^29.6.1"
+    jest-resolve-dependencies "^29.6.1"
+    jest-runner "^29.6.1"
+    jest-runtime "^29.6.1"
+    jest-snapshot "^29.6.1"
+    jest-util "^29.6.1"
+    jest-validate "^29.6.1"
+    jest-watcher "^29.6.1"
+    micromatch "^4.0.4"
+    pretty-format "^29.6.1"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
 "@jest/create-cache-key-function@^27.0.1":
   version "27.4.2"
   resolved "https://registry.yarnpkg.com/@jest/create-cache-key-function/-/create-cache-key-function-27.4.2.tgz#09b585f9dbafec0f56cfb0e4d4edfe2bec0e0768"
@@ -2671,6 +2722,16 @@
     "@types/node" "*"
     jest-mock "^29.5.0"
 
+"@jest/environment@^29.6.1":
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-29.6.1.tgz#ee358fff2f68168394b4a50f18c68278a21fe82f"
+  integrity sha512-RMMXx4ws+Gbvw3DfLSuo2cfQlK7IwGbpuEWXCqyYDcqYTI+9Ju3a5hDnXaxjNsa6uKh9PQF2v+qg+RLe63tz5A==
+  dependencies:
+    "@jest/fake-timers" "^29.6.1"
+    "@jest/types" "^29.6.1"
+    "@types/node" "*"
+    jest-mock "^29.6.1"
+
 "@jest/expect-utils@^29.5.0":
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-29.5.0.tgz#f74fad6b6e20f924582dc8ecbf2cb800fe43a036"
@@ -2678,6 +2739,13 @@
   dependencies:
     jest-get-type "^29.4.3"
 
+"@jest/expect-utils@^29.6.1":
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-29.6.1.tgz#ab83b27a15cdd203fe5f68230ea22767d5c3acc5"
+  integrity sha512-o319vIf5pEMx0LmzSxxkYYxo4wrRLKHq9dP1yJU7FoPTB0LfAKSz8SWD6D/6U3v/O52t9cF5t+MeJiRsfk7zMw==
+  dependencies:
+    jest-get-type "^29.4.3"
+
 "@jest/expect@^29.5.0":
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/@jest/expect/-/expect-29.5.0.tgz#80952f5316b23c483fbca4363ce822af79c38fba"
@@ -2686,6 +2754,14 @@
     expect "^29.5.0"
     jest-snapshot "^29.5.0"
 
+"@jest/expect@^29.6.1":
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/@jest/expect/-/expect-29.6.1.tgz#fef18265188f6a97601f1ea0a2912d81a85b4657"
+  integrity sha512-N5xlPrAYaRNyFgVf2s9Uyyvr795jnB6rObuPx4QFvNJz8aAjpZUDfO4bh5G/xuplMID8PrnuF1+SfSyDxhsgYg==
+  dependencies:
+    expect "^29.6.1"
+    jest-snapshot "^29.6.1"
+
 "@jest/fake-timers@^26.6.2":
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-26.6.2.tgz#459c329bcf70cee4af4d7e3f3e67848123535aad"
@@ -2710,6 +2786,18 @@
     jest-mock "^29.5.0"
     jest-util "^29.5.0"
 
+"@jest/fake-timers@^29.6.1":
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-29.6.1.tgz#c773efddbc61e1d2efcccac008139f621de57c69"
+  integrity sha512-RdgHgbXyosCDMVYmj7lLpUwXA4c69vcNzhrt69dJJdf8azUrpRh3ckFCaTPNjsEeRi27Cig0oKDGxy5j7hOgHg==
+  dependencies:
+    "@jest/types" "^29.6.1"
+    "@sinonjs/fake-timers" "^10.0.2"
+    "@types/node" "*"
+    jest-message-util "^29.6.1"
+    jest-mock "^29.6.1"
+    jest-util "^29.6.1"
+
 "@jest/globals@^26.6.2":
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-26.6.2.tgz#5b613b78a1aa2655ae908eba638cc96a20df720a"
@@ -2729,6 +2817,16 @@
     "@jest/types" "^29.5.0"
     jest-mock "^29.5.0"
 
+"@jest/globals@^29.6.1":
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-29.6.1.tgz#c8a8923e05efd757308082cc22893d82b8aa138f"
+  integrity sha512-2VjpaGy78JY9n9370H8zGRCFbYVWwjY6RdDMhoJHa1sYfwe6XM/azGN0SjY8kk7BOZApIejQ1BFPyH7FPG0w3A==
+  dependencies:
+    "@jest/environment" "^29.6.1"
+    "@jest/expect" "^29.6.1"
+    "@jest/types" "^29.6.1"
+    jest-mock "^29.6.1"
+
 "@jest/reporters@^26.6.2":
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-26.6.2.tgz#1f518b99637a5f18307bd3ecf9275f6882a667f6"
@@ -2791,6 +2889,36 @@
     strip-ansi "^6.0.0"
     v8-to-istanbul "^9.0.1"
 
+"@jest/reporters@^29.6.1":
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-29.6.1.tgz#3325a89c9ead3cf97ad93df3a427549d16179863"
+  integrity sha512-9zuaI9QKr9JnoZtFQlw4GREQbxgmNYXU6QuWtmuODvk5nvPUeBYapVR/VYMyi2WSx3jXTLJTJji8rN6+Cm4+FA==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^29.6.1"
+    "@jest/test-result" "^29.6.1"
+    "@jest/transform" "^29.6.1"
+    "@jest/types" "^29.6.1"
+    "@jridgewell/trace-mapping" "^0.3.18"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^5.1.0"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.1.3"
+    jest-message-util "^29.6.1"
+    jest-util "^29.6.1"
+    jest-worker "^29.6.1"
+    slash "^3.0.0"
+    string-length "^4.0.1"
+    strip-ansi "^6.0.0"
+    v8-to-istanbul "^9.0.1"
+
 "@jest/schemas@^29.4.3":
   version "29.4.3"
   resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.4.3.tgz#39cf1b8469afc40b6f5a2baaa146e332c4151788"
@@ -2798,6 +2926,13 @@
   dependencies:
     "@sinclair/typebox" "^0.25.16"
 
+"@jest/schemas@^29.6.0":
+  version "29.6.0"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.6.0.tgz#0f4cb2c8e3dca80c135507ba5635a4fd755b0040"
+  integrity sha512-rxLjXyJBTL4LQeJW3aKo0M/+GkCOXsO+8i9Iu7eDb6KwtP65ayoDsitrdPBtujxQ88k4wI2FNYfa6TOGwSn6cQ==
+  dependencies:
+    "@sinclair/typebox" "^0.27.8"
+
 "@jest/source-map@^26.6.2":
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-26.6.2.tgz#29af5e1e2e324cafccc936f218309f54ab69d535"
@@ -2816,6 +2951,15 @@
     callsites "^3.0.0"
     graceful-fs "^4.2.9"
 
+"@jest/source-map@^29.6.0":
+  version "29.6.0"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-29.6.0.tgz#bd34a05b5737cb1a99d43e1957020ac8e5b9ddb1"
+  integrity sha512-oA+I2SHHQGxDCZpbrsCQSoMLb3Bz547JnM+jUr9qEbuw0vQlWZfpPS7CO9J7XiwKicEz9OFn/IYoLkkiUD7bzA==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.18"
+    callsites "^3.0.0"
+    graceful-fs "^4.2.9"
+
 "@jest/test-result@^26.6.0", "@jest/test-result@^26.6.2":
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-26.6.2.tgz#55da58b62df134576cc95476efa5f7949e3f5f18"
@@ -2836,6 +2980,16 @@
     "@types/istanbul-lib-coverage" "^2.0.0"
     collect-v8-coverage "^1.0.0"
 
+"@jest/test-result@^29.6.1":
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-29.6.1.tgz#850e565a3f58ee8ca6ec424db00cb0f2d83c36ba"
+  integrity sha512-Ynr13ZRcpX6INak0TPUukU8GWRfm/vAytE3JbJNGAvINySWYdfE7dGZMbk36oVuK4CigpbhMn8eg1dixZ7ZJOw==
+  dependencies:
+    "@jest/console" "^29.6.1"
+    "@jest/types" "^29.6.1"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
 "@jest/test-sequencer@^26.6.3":
   version "26.6.3"
   resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-26.6.3.tgz#98e8a45100863886d074205e8ffdc5a7eb582b17"
@@ -2857,6 +3011,16 @@
     jest-haste-map "^29.5.0"
     slash "^3.0.0"
 
+"@jest/test-sequencer@^29.6.1":
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-29.6.1.tgz#e3e582ee074dd24ea9687d7d1aaf05ee3a9b068e"
+  integrity sha512-oBkC36PCDf/wb6dWeQIhaviU0l5u6VCsXa119yqdUosYAt7/FbQU2M2UoziO3igj/HBDEgp57ONQ3fm0v9uyyg==
+  dependencies:
+    "@jest/test-result" "^29.6.1"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.6.1"
+    slash "^3.0.0"
+
 "@jest/transform@^26.6.2":
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-26.6.2.tgz#5ac57c5fa1ad17b2aae83e73e45813894dcf2e4b"
@@ -2899,6 +3063,27 @@
     slash "^3.0.0"
     write-file-atomic "^4.0.2"
 
+"@jest/transform@^29.6.1":
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-29.6.1.tgz#acb5606019a197cb99beda3c05404b851f441c92"
+  integrity sha512-URnTneIU3ZjRSaf906cvf6Hpox3hIeJXRnz3VDSw5/X93gR8ycdfSIEy19FlVx8NFmpN7fe3Gb1xF+NjXaQLWg==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/types" "^29.6.1"
+    "@jridgewell/trace-mapping" "^0.3.18"
+    babel-plugin-istanbul "^6.1.1"
+    chalk "^4.0.0"
+    convert-source-map "^2.0.0"
+    fast-json-stable-stringify "^2.1.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.6.1"
+    jest-regex-util "^29.4.3"
+    jest-util "^29.6.1"
+    micromatch "^4.0.4"
+    pirates "^4.0.4"
+    slash "^3.0.0"
+    write-file-atomic "^4.0.2"
+
 "@jest/types@^26.6.0", "@jest/types@^26.6.2":
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.6.2.tgz#bef5a532030e1d88a2f5a6d933f84e97226ed48e"
@@ -2933,6 +3118,18 @@
     "@types/yargs" "^17.0.8"
     chalk "^4.0.0"
 
+"@jest/types@^29.6.1":
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.6.1.tgz#ae79080278acff0a6af5eb49d063385aaa897bf2"
+  integrity sha512-tPKQNMPuXgvdOn2/Lg9HNfUvjYVGolt04Hp03f5hAk878uwOLikN+JzeLY0HcVgKgFl9Hs3EIqpu3WX27XNhnw==
+  dependencies:
+    "@jest/schemas" "^29.6.0"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^17.0.8"
+    chalk "^4.0.0"
+
 "@jridgewell/gen-mapping@^0.1.0":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"
@@ -2991,7 +3188,7 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.15":
+"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.15", "@jridgewell/trace-mapping@^0.3.18":
   version "0.3.18"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz#25783b2086daf6ff1dcb53c9249ae480e4dd4cd6"
   integrity sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==
@@ -4352,6 +4549,11 @@
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.25.24.tgz#8c7688559979f7079aacaf31aa881c3aa410b718"
   integrity sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ==
 
+"@sinclair/typebox@^0.27.8":
+  version "0.27.8"
+  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e"
+  integrity sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==
+
 "@sinonjs/commons@^1.7.0":
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"
@@ -5704,17 +5906,17 @@
     pretty-format "^26.6.2"
 
 "@testing-library/dom@^8.0.0":
-  version "8.13.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.13.0.tgz#bc00bdd64c7d8b40841e27a70211399ad3af46f5"
-  integrity sha512-9VHgfIatKNXQNaZTtLnalIy0jNZzY35a4S3oi08YAt9Hv1VsfZ/DfA45lM8D/UhtHBGJ4/lGwp0PZkVndRkoOQ==
+  version "8.20.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.20.1.tgz#2e52a32e46fc88369eef7eef634ac2a192decd9f"
+  integrity sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==
   dependencies:
     "@babel/code-frame" "^7.10.4"
     "@babel/runtime" "^7.12.5"
-    "@types/aria-query" "^4.2.0"
-    aria-query "^5.0.0"
+    "@types/aria-query" "^5.0.1"
+    aria-query "5.1.3"
     chalk "^4.1.0"
     dom-accessibility-api "^0.5.9"
-    lz-string "^1.4.4"
+    lz-string "^1.5.0"
     pretty-format "^27.0.2"
 
 "@testing-library/jest-dom@5.16.4":
@@ -5743,24 +5945,20 @@
     pretty-format "^29.0.3"
     redent "^3.0.0"
 
-"@testing-library/react-hooks@5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-5.1.2.tgz#36e359d992bb652a9885c6fa9aa394639cbe8dd3"
-  integrity sha512-jwhtDYZ5gQUIX8cmVCVdtwNvuF5EiCOWjokRlTV+o/V0GdtRZDykUllL1OXq5PS4+J33wGLNQeeWzEHcWrH7tg==
+"@testing-library/react-hooks@8.0.1":
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz#0924bbd5b55e0c0c0502d1754657ada66947ca12"
+  integrity sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==
   dependencies:
     "@babel/runtime" "^7.12.5"
-    "@types/react" ">=16.9.0"
-    "@types/react-dom" ">=16.9.0"
-    "@types/react-test-renderer" ">=16.9.0"
-    filter-console "^0.1.1"
     react-error-boundary "^3.1.0"
 
-"@testing-library/react-native@9.1.0":
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-9.1.0.tgz#500698b4ae5ade98211cdea0ffd97d823c61c3ac"
-  integrity sha512-YBCSOIMYlh8gI0VG7ExRe80hNpfhC+i7j0cvpwiopUYtbpft8bMJXO35A4zEk7BkiWXEq6bYZ7VDJR3muSLhyQ==
+"@testing-library/react-native@12.1.3":
+  version "12.1.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-12.1.3.tgz#a4496ad8fa5bf71f7a8728b0cacd61b6b1b24c84"
+  integrity sha512-kQcvhNgGT0bxBwLllCk7zysgYbvN4HcYCvA1ng0L59Mjic8pmSqdX9VdIJ1MmSojGyLjRi5gO8Pe1p8k/B9k6A==
   dependencies:
-    pretty-format "^27.0.0"
+    pretty-format "^29.0.0"
 
 "@testing-library/react@12.1.5":
   version "12.1.5"
@@ -5818,6 +6016,11 @@
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.2.tgz#ed4e0ad92306a704f9fb132a0cfcf77486dbe2bc"
   integrity sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==
 
+"@types/aria-query@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.1.tgz#3286741fb8f1e1580ac28784add4c7a1d49bdfbc"
+  integrity sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==
+
 "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
   version "7.1.17"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.17.tgz#f50ac9d20d64153b510578d84f9643f9a3afbe64"
@@ -6014,11 +6217,6 @@
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz#693b316ad323ea97eed6b38ed1a3cc02b1672b57"
   integrity sha512-h4lTMgMJctJybDp8CQrxTUiiYmedihHWkjnF/8Pxseu2S6Nlfcy8kwboQ8yejh456rP2yWoEVm1sS/FVsfM48w==
 
-"@types/invariant@^2.2.35":
-  version "2.2.35"
-  resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.35.tgz#cd3ebf581a6557452735688d8daba6cf0bd5a3be"
-  integrity sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==
-
 "@types/is-ci@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/is-ci/-/is-ci-3.0.0.tgz#7e8910af6857601315592436f030aaa3ed9783c3"
@@ -6055,10 +6253,10 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
-"@types/jest-axe@3.5.3":
-  version "3.5.3"
-  resolved "https://registry.yarnpkg.com/@types/jest-axe/-/jest-axe-3.5.3.tgz#5af918553388aa0a448af75603b44093985778c6"
-  integrity sha512-ad9qI9f+00N8IlOuGh6dnZ6o0BDdV9VhGfTUr1zCejsPvOfZd6eohffe4JYxUoUuRYEftyMcaJ6Ux4+MsOpGHg==
+"@types/jest-axe@3.5.5":
+  version "3.5.5"
+  resolved "https://registry.yarnpkg.com/@types/jest-axe/-/jest-axe-3.5.5.tgz#21fd8152dc3963bf6e1f72f34a7ce4e827838b7b"
+  integrity sha512-b8WDIdoeKtr/JDJ2+QjFXMuS8UhfdMA6+15Z5KjjIie3jQrSXD9KZWMSQxc0nPtx7L9rIFKdiDpQk+m7s4a/8w==
   dependencies:
     "@types/jest" "*"
     axe-core "^3.5.5"
@@ -6087,6 +6285,14 @@
     expect "^29.0.0"
     pretty-format "^29.0.0"
 
+"@types/jest@29.5.3":
+  version "29.5.3"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.5.3.tgz#7a35dc0044ffb8b56325c6802a4781a626b05777"
+  integrity sha512-1Nq7YrO/vJE/FYnqYyw0FS8LdrjExSgIiHyKg7xPpn+yi8Q4huZryKnkJatN1ZRH89Kw2v33/8ZMB7DuZeSLlA==
+  dependencies:
+    expect "^29.0.0"
+    pretty-format "^29.0.0"
+
 "@types/jscodeshift@0.11.6":
   version "0.11.6"
   resolved "https://registry.yarnpkg.com/@types/jscodeshift/-/jscodeshift-0.11.6.tgz#9ced613c8dd92559000fb671d151685ea8e420c7"
@@ -6095,7 +6301,7 @@
     ast-types "^0.14.1"
     recast "^0.20.3"
 
-"@types/jsdom@20.0.1":
+"@types/jsdom@20.0.1", "@types/jsdom@^20.0.0":
   version "20.0.1"
   resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-20.0.1.tgz#07c14bc19bd2f918c1929541cdaacae894744808"
   integrity sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==
@@ -6273,19 +6479,12 @@
     "@types/react" "*"
 
 "@types/react-dom@<18.0.0":
-  version "17.0.15"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.15.tgz#f2c8efde11521a4b7991e076cb9c70ba3bb0d156"
-  integrity sha512-Tr9VU9DvNoHDWlmecmcsE5ZZiUkYx+nKBzum4Oxe1K0yJVyBlfbq7H3eXjxXqJczBKqPGq3EgfTru4MgKb9+Yw==
+  version "17.0.20"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.20.tgz#e0c8901469d732b36d8473b40b679ad899da1b53"
+  integrity sha512-4pzIjSxDueZZ90F52mU3aPoogkHIoSIDG+oQ+wQK7Cy2B9S+MvOqY0uEA/qawKz381qrEDkvpwyt8Bm31I8sbA==
   dependencies:
     "@types/react" "^17"
 
-"@types/react-dom@>=16.9.0":
-  version "17.0.11"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.11.tgz#e1eadc3c5e86bdb5f7684e00274ae228e7bcc466"
-  integrity sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-modal@^3.12.1":
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/@types/react-modal/-/react-modal-3.13.1.tgz#5b9845c205fccc85d9a77966b6e16dc70a60825a"
@@ -6321,14 +6520,14 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-test-renderer@17.0.1", "@types/react-test-renderer@>=16.9.0":
+"@types/react-test-renderer@17.0.1":
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3120f7d1c157fba9df0118dae20cb0297ee0e06b"
   integrity sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw==
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@17.0.38", "@types/react@>=16.0.0", "@types/react@>=16.9.0":
+"@types/react@*", "@types/react@17.0.38", "@types/react@>=16.0.0":
   version "17.0.38"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.38.tgz#f24249fefd89357d5fa71f739a686b8d7c7202bd"
   integrity sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==
@@ -6355,9 +6554,9 @@
     csstype "^3.0.2"
 
 "@types/react@^17":
-  version "17.0.44"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.44.tgz#c3714bd34dd551ab20b8015d9d0dbec812a51ec7"
-  integrity sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==
+  version "17.0.62"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.62.tgz#2efe8ddf8533500ec44b1334dd1a97caa2f860e3"
+  integrity sha512-eANCyz9DG8p/Vdhr0ZKST8JV12PhH2ACCDYlFw6DIO+D+ca+uP4jtEDEpVqXZrh/uZdXQGwk7whJa3ah5DtyLw==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -7267,16 +7466,21 @@ acorn@^8.0.0, acorn@^8.7.1, acorn@^8.8.2:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a"
   integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
 
-acorn@^8.1.0, acorn@^8.5.0, acorn@^8.8.0:
-  version "8.8.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.1.tgz#0a3f9cbecc4ec3bea6f0a80b66ae8dd2da250b73"
-  integrity sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==
+acorn@^8.1.0, acorn@^8.8.1:
+  version "8.10.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
+  integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
 
 acorn@^8.2.4, acorn@^8.4.1:
   version "8.7.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.0.tgz#90951fde0f8f09df93549481e5fc141445b791cf"
   integrity sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==
 
+acorn@^8.5.0, acorn@^8.8.0:
+  version "8.8.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.1.tgz#0a3f9cbecc4ec3bea6f0a80b66ae8dd2da250b73"
+  integrity sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==
+
 add-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/add-stream/-/add-stream-1.0.0.tgz#6a7990437ca736d5e1288db92bd3266d5f5cb2aa"
@@ -7554,6 +7758,13 @@ aria-hidden@^1.1.3:
   dependencies:
     tslib "^2.0.0"
 
+aria-query@5.1.3, aria-query@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
+  integrity sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==
+  dependencies:
+    deep-equal "^2.0.5"
+
 aria-query@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
@@ -7567,13 +7778,6 @@ aria-query@^5.0.0:
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.0.0.tgz#210c21aaf469613ee8c9a62c7f86525e058db52c"
   integrity sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg==
 
-aria-query@^5.1.3:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
-  integrity sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==
-  dependencies:
-    deep-equal "^2.0.5"
-
 arity-n@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/arity-n/-/arity-n-1.0.4.tgz#d9e76b11733e08569c0847ae7b39b2860b30b745"
@@ -7878,10 +8082,10 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
 
-axe-core@4.4.1:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.1.tgz#7dbdc25989298f9ad006645cd396782443757413"
-  integrity sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==
+axe-core@4.7.2:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.2.tgz#040a7342b20765cb18bb50b628394c21bccc17a0"
+  integrity sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g==
 
 axe-core@^3.5.5:
   version "3.5.6"
@@ -7956,7 +8160,20 @@ babel-extract-comments@^1.0.0:
   dependencies:
     babylon "^6.18.0"
 
-babel-jest@26.6.3, babel-jest@^26.6.0, babel-jest@^26.6.3:
+babel-jest@29.6.1, babel-jest@^29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-29.6.1.tgz#a7141ad1ed5ec50238f3cd36127636823111233a"
+  integrity sha512-qu+3bdPEQC6KZSPz+4Fyjbga5OODNcp49j6GKzG1EKbkfyJBxEYGVUmVGpwCSeGouG52R4EgYMLb6p9YeEEQ4A==
+  dependencies:
+    "@jest/transform" "^29.6.1"
+    "@types/babel__core" "^7.1.14"
+    babel-plugin-istanbul "^6.1.1"
+    babel-preset-jest "^29.5.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    slash "^3.0.0"
+
+babel-jest@^26.6.0, babel-jest@^26.6.3:
   version "26.6.3"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.6.3.tgz#d87d25cb0037577a0c89f82e5755c5d293c01056"
   integrity sha512-pl4Q+GAVOHwvjrck6jKjvmGhnO3jHX/xuB9d27f+EJZ/6k+6nMuPjorrYp7s++bKKdANwzElBWnLWaObvTnaZA==
@@ -9035,14 +9252,6 @@ chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
-  integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
 chalk@4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.1.tgz#c80b3fab28bf6371e6863325eee67e618b77e6ad"
@@ -9051,18 +9260,18 @@ chalk@4.1.1:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
-  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
+chalk@4.1.2, chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1, chalk@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
   dependencies:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1, chalk@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
-  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+chalk@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
+  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
   dependencies:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
@@ -10524,10 +10733,10 @@ decimal.js@^10.2.1:
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.3.1.tgz#d8c3a444a9c6774ba60ca6ad7261c3a94fd5e783"
   integrity sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==
 
-decimal.js@^10.4.1:
-  version "10.4.2"
-  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.2.tgz#0341651d1d997d86065a2ce3a441fbd0d8e8b98e"
-  integrity sha512-ic1yEvwT6GuvaYwBLLY6/aFFgjZdySKTE8en/fkU3QICTmRtgtSlFn0u0BXN06InZwtfCelR7j8LRiDI/02iGA==
+decimal.js@^10.4.1, decimal.js@^10.4.2:
+  version "10.4.3"
+  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23"
+  integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==
 
 decode-named-character-reference@^1.0.0:
   version "1.0.2"
@@ -10809,11 +11018,6 @@ diff-sequences@^27.4.0:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.4.0.tgz#d783920ad8d06ec718a060d00196dfef25b132a5"
   integrity sha512-YqiQzkrsmHMH5uuh8OdQFU9/ZpADnwzml8z0O5HvRNda+5UZsaX/xN+AAxfR2hWq1Y7HZnAzO9J5lJXOuDz2Ww==
 
-diff-sequences@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.5.1.tgz#eaecc0d327fd68c8d9672a1e64ab8dccb2ef5327"
-  integrity sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==
-
 diff-sequences@^29.4.3:
   version "29.4.3"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.4.3.tgz#9314bc1fabe09267ffeca9cbafc457d8499a13f2"
@@ -12350,6 +12554,18 @@ expect@^29.0.0, expect@^29.5.0:
     jest-message-util "^29.5.0"
     jest-util "^29.5.0"
 
+expect@^29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-29.6.1.tgz#64dd1c8f75e2c0b209418f2b8d36a07921adfdf1"
+  integrity sha512-XEdDLonERCU1n9uR56/Stx9OqojaLAQtZf9PrCHH9Hl8YXiEIka3H4NXJ3NOIBmQJTg7+j7buh34PMHfJujc8g==
+  dependencies:
+    "@jest/expect-utils" "^29.6.1"
+    "@types/node" "*"
+    jest-get-type "^29.4.3"
+    jest-matcher-utils "^29.6.1"
+    jest-message-util "^29.6.1"
+    jest-util "^29.6.1"
+
 express@^4.17.1:
   version "4.18.2"
   resolved "https://registry.yarnpkg.com/express/-/express-4.18.2.tgz#3fabe08296e930c796c19e3c516979386ba9fd59"
@@ -12661,11 +12877,6 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
-filter-console@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/filter-console/-/filter-console-0.1.1.tgz#6242be28982bba7415bcc6db74a79f4a294fa67c"
-  integrity sha512-zrXoV1Uaz52DqPs+qEwNJWJFAWZpYJ47UNmpN9q4j+/EYsz85uV0DC9k8tRND5kYmoVzL0W+Y75q4Rg8sRJCdg==
-
 filter-obj@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/filter-obj/-/filter-obj-1.1.0.tgz#9b311112bc6c6127a16e016c6c5d7f19e0805c5b"
@@ -15315,14 +15526,14 @@ jackspeak@^2.0.3:
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
-jest-axe@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/jest-axe/-/jest-axe-6.0.0.tgz#e5ca8e9a0363c8c5f4e00760317bd7d7d29b90b4"
-  integrity sha512-gAh/2zoWii4Rbhe6IUIo5TTiseGJDCitFnDFwBNpIuaOciyQgVZue6jtd4W7oMoKHewKoRSuIol7t/MuGx+mqg==
+jest-axe@8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/jest-axe/-/jest-axe-8.0.0.tgz#4d89a1756bda2999a4271e851370981319389155"
+  integrity sha512-4kNcNn7J0jPO4jANEYZOHeQ/tSBvkXS+MxTbX1CKbXGd0+ZbRGDn/v/8IYWI/MmYX15iLVyYRnRev9X3ksePWA==
   dependencies:
-    axe-core "4.4.1"
-    chalk "4.1.0"
-    jest-matcher-utils "27.0.2"
+    axe-core "4.7.2"
+    chalk "4.1.2"
+    jest-matcher-utils "29.2.2"
     lodash.merge "4.6.2"
 
 jest-changed-files@^26.6.2:
@@ -15395,7 +15606,33 @@ jest-circus@^29.5.0:
     slash "^3.0.0"
     stack-utils "^2.0.3"
 
-jest-cli@^26.6.0, jest-cli@^26.6.3:
+jest-circus@^29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-29.6.1.tgz#861dab37e71a89907d1c0fabc54a0019738ed824"
+  integrity sha512-tPbYLEiBU4MYAL2XoZme/bgfUeotpDBd81lgHLCbDZZFaGmECk0b+/xejPFtmiBP87GgP/y4jplcRpbH+fgCzQ==
+  dependencies:
+    "@jest/environment" "^29.6.1"
+    "@jest/expect" "^29.6.1"
+    "@jest/test-result" "^29.6.1"
+    "@jest/types" "^29.6.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    dedent "^0.7.0"
+    is-generator-fn "^2.0.0"
+    jest-each "^29.6.1"
+    jest-matcher-utils "^29.6.1"
+    jest-message-util "^29.6.1"
+    jest-runtime "^29.6.1"
+    jest-snapshot "^29.6.1"
+    jest-util "^29.6.1"
+    p-limit "^3.1.0"
+    pretty-format "^29.6.1"
+    pure-rand "^6.0.0"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-cli@^26.6.0:
   version "26.6.3"
   resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-26.6.3.tgz#43117cfef24bc4cd691a174a8796a532e135e92a"
   integrity sha512-GF9noBSa9t08pSyl3CY4frMrqp+aQXFGFkf5hEPbh/pIUFYWMK6ZLTfbmadxJVcJrdRoChlWQsA2VkJcDFK8hg==
@@ -15432,6 +15669,24 @@ jest-cli@^29.5.0:
     prompts "^2.0.1"
     yargs "^17.3.1"
 
+jest-cli@^29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-29.6.1.tgz#99d9afa7449538221c71f358f0fdd3e9c6e89f72"
+  integrity sha512-607dSgTA4ODIN6go9w6xY3EYkyPFGicx51a69H7yfvt7lN53xNswEVLovq+E77VsTRi5fWprLH0yl4DJgE8Ing==
+  dependencies:
+    "@jest/core" "^29.6.1"
+    "@jest/test-result" "^29.6.1"
+    "@jest/types" "^29.6.1"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    import-local "^3.0.2"
+    jest-config "^29.6.1"
+    jest-util "^29.6.1"
+    jest-validate "^29.6.1"
+    prompts "^2.0.1"
+    yargs "^17.3.1"
+
 jest-config@^26.6.3:
   version "26.6.3"
   resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-26.6.3.tgz#64f41444eef9eb03dc51d5c53b75c8c71f645349"
@@ -15484,6 +15739,34 @@ jest-config@^29.5.0:
     slash "^3.0.0"
     strip-json-comments "^3.1.1"
 
+jest-config@^29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-29.6.1.tgz#d785344509065d53a238224c6cdc0ed8e2f2f0dd"
+  integrity sha512-XdjYV2fy2xYixUiV2Wc54t3Z4oxYPAELUzWnV6+mcbq0rh742X2p52pii5A3oeRzYjLnQxCsZmp0qpI6klE2cQ==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/test-sequencer" "^29.6.1"
+    "@jest/types" "^29.6.1"
+    babel-jest "^29.6.1"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-circus "^29.6.1"
+    jest-environment-node "^29.6.1"
+    jest-get-type "^29.4.3"
+    jest-regex-util "^29.4.3"
+    jest-resolve "^29.6.1"
+    jest-runner "^29.6.1"
+    jest-util "^29.6.1"
+    jest-validate "^29.6.1"
+    micromatch "^4.0.4"
+    parse-json "^5.2.0"
+    pretty-format "^29.6.1"
+    slash "^3.0.0"
+    strip-json-comments "^3.1.1"
+
 jest-diff@^26.0.0, jest-diff@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.6.2.tgz#1aa7468b52c3a68d7d5c5fdcdfcd5e49bd164394"
@@ -15504,16 +15787,6 @@ jest-diff@^27.0.0:
     jest-get-type "^27.4.0"
     pretty-format "^27.4.2"
 
-jest-diff@^27.0.2:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.5.1.tgz#a07f5011ac9e6643cf8a95a462b7b1ecf6680def"
-  integrity sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==
-  dependencies:
-    chalk "^4.0.0"
-    diff-sequences "^27.5.1"
-    jest-get-type "^27.5.1"
-    pretty-format "^27.5.1"
-
 jest-diff@^29.0.1, jest-diff@^29.5.0:
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.5.0.tgz#e0d83a58eb5451dcc1fa61b1c3ee4e8f5a290d63"
@@ -15524,6 +15797,16 @@ jest-diff@^29.0.1, jest-diff@^29.5.0:
     jest-get-type "^29.4.3"
     pretty-format "^29.5.0"
 
+jest-diff@^29.2.1, jest-diff@^29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.6.1.tgz#13df6db0a89ee6ad93c747c75c85c70ba941e545"
+  integrity sha512-FsNCvinvl8oVxpNLttNQX7FAq7vR+gMDGj90tiP7siWw1UdakWUGqrylpsYrpvj908IYckm5Y0Q7azNAozU1Kg==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^29.4.3"
+    jest-get-type "^29.4.3"
+    pretty-format "^29.6.1"
+
 jest-docblock@^26.0.0:
   version "26.0.0"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-26.0.0.tgz#3e2fa20899fc928cb13bd0ff68bd3711a36889b5"
@@ -15560,6 +15843,31 @@ jest-each@^29.5.0:
     jest-util "^29.5.0"
     pretty-format "^29.5.0"
 
+jest-each@^29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-29.6.1.tgz#975058e5b8f55c6780beab8b6ab214921815c89c"
+  integrity sha512-n5eoj5eiTHpKQCAVcNTT7DRqeUmJ01hsAL0Q1SMiBHcBcvTKDELixQOGMCpqhbIuTcfC4kMfSnpmDqRgRJcLNQ==
+  dependencies:
+    "@jest/types" "^29.6.1"
+    chalk "^4.0.0"
+    jest-get-type "^29.4.3"
+    jest-util "^29.6.1"
+    pretty-format "^29.6.1"
+
+jest-environment-jsdom@29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-29.6.1.tgz#480bce658aa31589309c82ca510351fd7c683bbb"
+  integrity sha512-PoY+yLaHzVRhVEjcVKSfJ7wXmJW4UqPYNhR05h7u/TK0ouf6DmRNZFBL/Z00zgQMyWGMBXn69/FmOvhEJu8cIw==
+  dependencies:
+    "@jest/environment" "^29.6.1"
+    "@jest/fake-timers" "^29.6.1"
+    "@jest/types" "^29.6.1"
+    "@types/jsdom" "^20.0.0"
+    "@types/node" "*"
+    jest-mock "^29.6.1"
+    jest-util "^29.6.1"
+    jsdom "^20.0.0"
+
 jest-environment-jsdom@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-26.6.2.tgz#78d09fe9cf019a357009b9b7e1f101d23bd1da3e"
@@ -15597,22 +15905,29 @@ jest-environment-node@^29.5.0:
     jest-mock "^29.5.0"
     jest-util "^29.5.0"
 
+jest-environment-node@^29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-29.6.1.tgz#08a122dece39e58bc388da815a2166c58b4abec6"
+  integrity sha512-ZNIfAiE+foBog24W+2caIldl4Irh8Lx1PUhg/GZ0odM1d/h2qORAsejiFc7zb+SEmYPn1yDZzEDSU5PmDkmVLQ==
+  dependencies:
+    "@jest/environment" "^29.6.1"
+    "@jest/fake-timers" "^29.6.1"
+    "@jest/types" "^29.6.1"
+    "@types/node" "*"
+    jest-mock "^29.6.1"
+    jest-util "^29.6.1"
+
 jest-get-type@^26.3.0:
   version "26.3.0"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
   integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==
 
-jest-get-type@^27.0.1, jest-get-type@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.5.1.tgz#3cd613c507b0f7ace013df407a1c1cd578bcb4f1"
-  integrity sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==
-
 jest-get-type@^27.4.0:
   version "27.4.0"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.4.0.tgz#7503d2663fffa431638337b3998d39c5e928e9b5"
   integrity sha512-tk9o+ld5TWq41DkK14L4wox4s2D9MtTpKaAVzXfr5CUKm5ZK2ExcaFE0qls2W71zE/6R2TxxrK9w2r6svAFDBQ==
 
-jest-get-type@^29.4.3:
+jest-get-type@^29.2.0, jest-get-type@^29.4.3:
   version "29.4.3"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-29.4.3.tgz#1ab7a5207c995161100b5187159ca82dd48b3dd5"
   integrity sha512-J5Xez4nRRMjk8emnTpWrlkyb9pfRQQanDrvWHhsR1+VUfbwxi30eVcZFlcdGInRibU4G5LwHXpI7IRHU0CY+gg==
@@ -15657,6 +15972,25 @@ jest-haste-map@^29.5.0:
   optionalDependencies:
     fsevents "^2.3.2"
 
+jest-haste-map@^29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-29.6.1.tgz#62655c7a1c1b349a3206441330fb2dbdb4b63803"
+  integrity sha512-0m7f9PZXxOCk1gRACiVgX85knUKPKLPg4oRCjLoqIm9brTHXaorMA0JpmtmVkQiT8nmXyIVoZd/nnH1cfC33ig==
+  dependencies:
+    "@jest/types" "^29.6.1"
+    "@types/graceful-fs" "^4.1.3"
+    "@types/node" "*"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.9"
+    jest-regex-util "^29.4.3"
+    jest-util "^29.6.1"
+    jest-worker "^29.6.1"
+    micromatch "^4.0.4"
+    walker "^1.0.8"
+  optionalDependencies:
+    fsevents "^2.3.2"
+
 jest-jasmine2@^26.6.3:
   version "26.6.3"
   resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-26.6.3.tgz#adc3cf915deacb5212c93b9f3547cd12958f2edd"
@@ -15697,15 +16031,23 @@ jest-leak-detector@^29.5.0:
     jest-get-type "^29.4.3"
     pretty-format "^29.5.0"
 
-jest-matcher-utils@27.0.2:
-  version "27.0.2"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.0.2.tgz#f14c060605a95a466cdc759acc546c6f4cbfc4f0"
-  integrity sha512-Qczi5xnTNjkhcIB0Yy75Txt+Ez51xdhOxsukN7awzq2auZQGPHcQrJ623PZj0ECDEMOk2soxWx05EXdXGd1CbA==
+jest-leak-detector@^29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-29.6.1.tgz#66a902c81318e66e694df7d096a95466cb962f8e"
+  integrity sha512-OrxMNyZirpOEwkF3UHnIkAiZbtkBWiye+hhBweCHkVbCgyEy71Mwbb5zgeTNYWJBi1qgDVfPC1IwO9dVEeTLwQ==
+  dependencies:
+    jest-get-type "^29.4.3"
+    pretty-format "^29.6.1"
+
+jest-matcher-utils@29.2.2:
+  version "29.2.2"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.2.2.tgz#9202f8e8d3a54733266784ce7763e9a08688269c"
+  integrity sha512-4DkJ1sDPT+UX2MR7Y3od6KtvRi9Im1ZGLGgdLFLm4lPexbTaCgJW5NN3IOXlQHF7NSHY/VHhflQ+WoKtD/vyCw==
   dependencies:
     chalk "^4.0.0"
-    jest-diff "^27.0.2"
-    jest-get-type "^27.0.1"
-    pretty-format "^27.0.2"
+    jest-diff "^29.2.1"
+    jest-get-type "^29.2.0"
+    pretty-format "^29.2.1"
 
 jest-matcher-utils@^26.6.0, jest-matcher-utils@^26.6.2:
   version "26.6.2"
@@ -15727,6 +16069,16 @@ jest-matcher-utils@^29.0.1, jest-matcher-utils@^29.5.0:
     jest-get-type "^29.4.3"
     pretty-format "^29.5.0"
 
+jest-matcher-utils@^29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.6.1.tgz#6c60075d84655d6300c5d5128f46531848160b53"
+  integrity sha512-SLaztw9d2mfQQKHmJXKM0HCbl2PPVld/t9Xa6P9sgiExijviSp7TnZZpw2Fpt+OI3nwUO/slJbOfzfUMKKC5QA==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^29.6.1"
+    jest-get-type "^29.4.3"
+    pretty-format "^29.6.1"
+
 jest-matchmedia-mock@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/jest-matchmedia-mock/-/jest-matchmedia-mock-1.1.0.tgz#eaae8c5d1dee4e4f7c59f8cb1b38b5d7ea842552"
@@ -15762,6 +16114,21 @@ jest-message-util@^29.5.0:
     slash "^3.0.0"
     stack-utils "^2.0.3"
 
+jest-message-util@^29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-29.6.1.tgz#d0b21d87f117e1b9e165e24f245befd2ff34ff8d"
+  integrity sha512-KoAW2zAmNSd3Gk88uJ56qXUWbFk787QKmjjJVOjtGFmmGSZgDBrlIL4AfQw1xyMYPNVD7dNInfIbur9B2rd/wQ==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^29.6.1"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    micromatch "^4.0.4"
+    pretty-format "^29.6.1"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
 jest-mock@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-26.6.2.tgz#d6cb712b041ed47fe0d9b6fc3474bc6543feb302"
@@ -15779,6 +16146,15 @@ jest-mock@^29.5.0:
     "@types/node" "*"
     jest-util "^29.5.0"
 
+jest-mock@^29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-29.6.1.tgz#049ee26aea8cbf54c764af649070910607316517"
+  integrity sha512-brovyV9HBkjXAEdRooaTQK42n8usKoSRR3gihzUpYeV/vwqgSoNfrksO7UfSACnPmxasO/8TmHM3w9Hp3G1dgw==
+  dependencies:
+    "@jest/types" "^29.6.1"
+    "@types/node" "*"
+    jest-util "^29.6.1"
+
 jest-pnp-resolver@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
@@ -15811,6 +16187,14 @@ jest-resolve-dependencies@^29.5.0:
     jest-regex-util "^29.4.3"
     jest-snapshot "^29.5.0"
 
+jest-resolve-dependencies@^29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-29.6.1.tgz#b85b06670f987a62515bbf625d54a499e3d708f5"
+  integrity sha512-BbFvxLXtcldaFOhNMXmHRWx1nXQO5LoXiKSGQcA1LxxirYceZT6ch8KTE1bK3X31TNG/JbkI7OkS/ABexVahiw==
+  dependencies:
+    jest-regex-util "^29.4.3"
+    jest-snapshot "^29.6.1"
+
 jest-resolve@26.6.0:
   version "26.6.0"
   resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-26.6.0.tgz#070fe7159af87b03e50f52ea5e17ee95bbee40e1"
@@ -15854,6 +16238,21 @@ jest-resolve@^29.5.0:
     resolve.exports "^2.0.0"
     slash "^3.0.0"
 
+jest-resolve@^29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-29.6.1.tgz#4c3324b993a85e300add2f8609f51b80ddea39ee"
+  integrity sha512-AeRkyS8g37UyJiP9w3mmI/VXU/q8l/IH52vj/cDAyScDcemRbSBhfX/NMYIGilQgSVwsjxrCHf3XJu4f+lxCMg==
+  dependencies:
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.6.1"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^29.6.1"
+    jest-validate "^29.6.1"
+    resolve "^1.20.0"
+    resolve.exports "^2.0.0"
+    slash "^3.0.0"
+
 jest-runner@^26.6.0, jest-runner@^26.6.3:
   version "26.6.3"
   resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-26.6.3.tgz#2d1fed3d46e10f233fd1dbd3bfaa3fe8924be159"
@@ -15907,6 +16306,33 @@ jest-runner@^29.5.0:
     p-limit "^3.1.0"
     source-map-support "0.5.13"
 
+jest-runner@^29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-29.6.1.tgz#54557087e7972d345540d622ab5bfc3d8f34688c"
+  integrity sha512-tw0wb2Q9yhjAQ2w8rHRDxteryyIck7gIzQE4Reu3JuOBpGp96xWgF0nY8MDdejzrLCZKDcp8JlZrBN/EtkQvPQ==
+  dependencies:
+    "@jest/console" "^29.6.1"
+    "@jest/environment" "^29.6.1"
+    "@jest/test-result" "^29.6.1"
+    "@jest/transform" "^29.6.1"
+    "@jest/types" "^29.6.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    emittery "^0.13.1"
+    graceful-fs "^4.2.9"
+    jest-docblock "^29.4.3"
+    jest-environment-node "^29.6.1"
+    jest-haste-map "^29.6.1"
+    jest-leak-detector "^29.6.1"
+    jest-message-util "^29.6.1"
+    jest-resolve "^29.6.1"
+    jest-runtime "^29.6.1"
+    jest-util "^29.6.1"
+    jest-watcher "^29.6.1"
+    jest-worker "^29.6.1"
+    p-limit "^3.1.0"
+    source-map-support "0.5.13"
+
 jest-runtime@^26.6.0, jest-runtime@^26.6.3:
   version "26.6.3"
   resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-26.6.3.tgz#4f64efbcfac398331b74b4b3c82d27d401b8fa2b"
@@ -15968,6 +16394,34 @@ jest-runtime@^29.5.0:
     slash "^3.0.0"
     strip-bom "^4.0.0"
 
+jest-runtime@^29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-29.6.1.tgz#8a0fc9274ef277f3d70ba19d238e64334958a0dc"
+  integrity sha512-D6/AYOA+Lhs5e5il8+5pSLemjtJezUr+8zx+Sn8xlmOux3XOqx4d8l/2udBea8CRPqqrzhsKUsN/gBDE/IcaPQ==
+  dependencies:
+    "@jest/environment" "^29.6.1"
+    "@jest/fake-timers" "^29.6.1"
+    "@jest/globals" "^29.6.1"
+    "@jest/source-map" "^29.6.0"
+    "@jest/test-result" "^29.6.1"
+    "@jest/transform" "^29.6.1"
+    "@jest/types" "^29.6.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    cjs-module-lexer "^1.0.0"
+    collect-v8-coverage "^1.0.0"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.6.1"
+    jest-message-util "^29.6.1"
+    jest-mock "^29.6.1"
+    jest-regex-util "^29.4.3"
+    jest-resolve "^29.6.1"
+    jest-snapshot "^29.6.1"
+    jest-util "^29.6.1"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+
 jest-serializer@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-26.6.2.tgz#d139aafd46957d3a448f3a6cdabe2919ba0742d1"
@@ -16027,12 +16481,39 @@ jest-snapshot@^29.5.0:
     pretty-format "^29.5.0"
     semver "^7.3.5"
 
-jest-styled-components@7.0.8:
-  version "7.0.8"
-  resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-7.0.8.tgz#9ea3b43f002de060b4638fde3b422d14b3e3ec9f"
-  integrity sha512-0KE54d0yIzKcvtOv8eikyjG3rFRtKYUyQovaoha3nondtZzXYGB3bhsvYgEegU08Iry0ndWx2+g9f5ZzD4I+0Q==
+jest-snapshot@^29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-29.6.1.tgz#0d083cb7de716d5d5cdbe80d598ed2fbafac0239"
+  integrity sha512-G4UQE1QQ6OaCgfY+A0uR1W2AY0tGXUPQpoUClhWHq1Xdnx1H6JOrC2nH5lqnOEqaDgbHFgIwZ7bNq24HpB180A==
   dependencies:
-    css "^3.0.0"
+    "@babel/core" "^7.11.6"
+    "@babel/generator" "^7.7.2"
+    "@babel/plugin-syntax-jsx" "^7.7.2"
+    "@babel/plugin-syntax-typescript" "^7.7.2"
+    "@babel/types" "^7.3.3"
+    "@jest/expect-utils" "^29.6.1"
+    "@jest/transform" "^29.6.1"
+    "@jest/types" "^29.6.1"
+    "@types/prettier" "^2.1.5"
+    babel-preset-current-node-syntax "^1.0.0"
+    chalk "^4.0.0"
+    expect "^29.6.1"
+    graceful-fs "^4.2.9"
+    jest-diff "^29.6.1"
+    jest-get-type "^29.4.3"
+    jest-matcher-utils "^29.6.1"
+    jest-message-util "^29.6.1"
+    jest-util "^29.6.1"
+    natural-compare "^1.4.0"
+    pretty-format "^29.6.1"
+    semver "^7.5.3"
+
+jest-styled-components@7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-7.1.1.tgz#faf19c733e0de4bbef1f9151955b99e839b7df48"
+  integrity sha512-OUq31R5CivBF8oy81dnegNQrRW13TugMol/Dz6ZnFfEyo03exLASod7YGwyHGuayYlKmCstPtz0RQ1+NrAbIIA==
+  dependencies:
+    "@adobe/css-tools" "^4.0.1"
 
 jest-useragent-mock@0.1.1:
   version "0.1.1"
@@ -16063,6 +16544,18 @@ jest-util@^29.0.0, jest-util@^29.5.0:
     graceful-fs "^4.2.9"
     picomatch "^2.2.3"
 
+jest-util@^29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.6.1.tgz#c9e29a87a6edbf1e39e6dee2b4689b8a146679cb"
+  integrity sha512-NRFCcjc+/uO3ijUVyNOQJluf8PtGCe/W6cix36+M3cTFgiYqFOOW5MgN4JOOcvbUhcKTYVd1CvHz/LWi8d16Mg==
+  dependencies:
+    "@jest/types" "^29.6.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.9"
+    picomatch "^2.2.3"
+
 jest-validate@^26.5.2, jest-validate@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-26.6.2.tgz#23d380971587150467342911c3d7b4ac57ab20ec"
@@ -16087,6 +16580,18 @@ jest-validate@^29.5.0:
     leven "^3.1.0"
     pretty-format "^29.5.0"
 
+jest-validate@^29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-29.6.1.tgz#765e684af6e2c86dce950aebefbbcd4546d69f7b"
+  integrity sha512-r3Ds69/0KCN4vx4sYAbGL1EVpZ7MSS0vLmd3gV78O+NAx3PDQQukRU5hNHPXlyqCgFY8XUk7EuTMLugh0KzahA==
+  dependencies:
+    "@jest/types" "^29.6.1"
+    camelcase "^6.2.0"
+    chalk "^4.0.0"
+    jest-get-type "^29.4.3"
+    leven "^3.1.0"
+    pretty-format "^29.6.1"
+
 jest-watch-typeahead@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-0.6.1.tgz#45221b86bb6710b7e97baaa1640ae24a07785e63"
@@ -16127,6 +16632,20 @@ jest-watcher@^29.5.0:
     jest-util "^29.5.0"
     string-length "^4.0.1"
 
+jest-watcher@^29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-29.6.1.tgz#7c0c43ddd52418af134c551c92c9ea31e5ec942e"
+  integrity sha512-d4wpjWTS7HEZPaaj8m36QiaP856JthRZkrgcIY/7ISoUWPIillrXM23WPboZVLbiwZBt4/qn2Jke84Sla6JhFA==
+  dependencies:
+    "@jest/test-result" "^29.6.1"
+    "@jest/types" "^29.6.1"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    emittery "^0.13.1"
+    jest-util "^29.6.1"
+    string-length "^4.0.1"
+
 jest-worker@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
@@ -16172,6 +16691,16 @@ jest-worker@^29.5.0:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
+jest-worker@^29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-29.6.1.tgz#64b015f0e985ef3a8ad049b61fe92b3db74a5319"
+  integrity sha512-U+Wrbca7S8ZAxAe9L6nb6g8kPdia5hj32Puu5iOqBCMTMWFHXuK6dOV2IFrpedbTV8fjMFLdWNttQTBL6u2MRA==
+  dependencies:
+    "@types/node" "*"
+    jest-util "^29.6.1"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
 jest@26.6.0:
   version "26.6.0"
   resolved "https://registry.yarnpkg.com/jest/-/jest-26.6.0.tgz#546b25a1d8c888569dbbe93cae131748086a4a25"
@@ -16181,15 +16710,6 @@ jest@26.6.0:
     import-local "^3.0.2"
     jest-cli "^26.6.0"
 
-jest@26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-26.6.3.tgz#40e8fdbe48f00dfa1f0ce8121ca74b88ac9148ef"
-  integrity sha512-lGS5PXGAzR4RF7V5+XObhqz2KZIDUA1yD0DG6pBVmy10eh0ZIXQImRuzocsI/N2XZ1GrLFwTS27In2i2jlpq1Q==
-  dependencies:
-    "@jest/core" "^26.6.3"
-    import-local "^3.0.2"
-    jest-cli "^26.6.3"
-
 jest@29.5.0:
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/jest/-/jest-29.5.0.tgz#f75157622f5ce7ad53028f2f8888ab53e1f1f24e"
@@ -16200,6 +16720,16 @@ jest@29.5.0:
     import-local "^3.0.2"
     jest-cli "^29.5.0"
 
+jest@29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-29.6.1.tgz#74be1cb719c3abe439f2d94aeb18e6540a5b02ad"
+  integrity sha512-Nirw5B4nn69rVUZtemCQhwxOBhm0nsp3hmtF4rzCeWD7BkjAXRIji7xWQfnTNbz9g0aVsBX6aZK3n+23LM6uDw==
+  dependencies:
+    "@jest/core" "^29.6.1"
+    "@jest/types" "^29.6.1"
+    import-local "^3.0.2"
+    jest-cli "^29.6.1"
+
 jetifier@^1.6.2:
   version "1.6.8"
   resolved "https://registry.yarnpkg.com/jetifier/-/jetifier-1.6.8.tgz#e88068697875cbda98c32472902c4d3756247798"
@@ -16384,6 +16914,38 @@ jsdom@^16.4.0:
     ws "^7.4.6"
     xml-name-validator "^3.0.0"
 
+jsdom@^20.0.0:
+  version "20.0.3"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-20.0.3.tgz#886a41ba1d4726f67a8858028c99489fed6ad4db"
+  integrity sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==
+  dependencies:
+    abab "^2.0.6"
+    acorn "^8.8.1"
+    acorn-globals "^7.0.0"
+    cssom "^0.5.0"
+    cssstyle "^2.3.0"
+    data-urls "^3.0.2"
+    decimal.js "^10.4.2"
+    domexception "^4.0.0"
+    escodegen "^2.0.0"
+    form-data "^4.0.0"
+    html-encoding-sniffer "^3.0.0"
+    http-proxy-agent "^5.0.0"
+    https-proxy-agent "^5.0.1"
+    is-potential-custom-element-name "^1.0.1"
+    nwsapi "^2.2.2"
+    parse5 "^7.1.1"
+    saxes "^6.0.0"
+    symbol-tree "^3.2.4"
+    tough-cookie "^4.1.2"
+    w3c-xmlserializer "^4.0.0"
+    webidl-conversions "^7.0.0"
+    whatwg-encoding "^2.0.0"
+    whatwg-mimetype "^3.0.0"
+    whatwg-url "^11.0.0"
+    ws "^8.11.0"
+    xml-name-validator "^4.0.0"
+
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
@@ -17061,6 +17623,11 @@ lz-string@^1.4.4:
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
   integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
 
+lz-string@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
+  integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
+
 magic-string@^0.25.0, magic-string@^0.25.7:
   version "0.25.7"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
@@ -18993,9 +19560,9 @@ nwsapi@^2.2.0:
   integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
 
 nwsapi@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.2.tgz#e5418863e7905df67d51ec95938d67bf801f0bb0"
-  integrity sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw==
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.7.tgz#738e0707d3128cb750dddcfe90e4610482df0f30"
+  integrity sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==
 
 oauth-sign@~0.9.0:
   version "0.9.0"
@@ -19678,13 +20245,20 @@ parse5@6.0.1, parse5@^6.0.0:
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
   integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
 
-parse5@^7.0.0, parse5@^7.1.1:
+parse5@^7.0.0:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.1.1.tgz#4649f940ccfb95d8754f37f73078ea20afe0c746"
   integrity sha512-kwpuwzB+px5WUg9pyK0IcK/shltJN5/OVhQagxhCQNtT9Y9QRZqNY2e1cmbu/paRh5LMnz/oVTVLBpjFmMZhSg==
   dependencies:
     entities "^4.4.0"
 
+parse5@^7.1.1:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.1.2.tgz#0736bebbfd77793823240a23b7fc5e010b7f8e32"
+  integrity sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==
+  dependencies:
+    entities "^4.4.0"
+
 parseurl@~1.3.2, parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
@@ -20854,15 +21428,6 @@ pretty-format@^27.0.0, pretty-format@^27.0.2, pretty-format@^27.4.2:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
-pretty-format@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
-  integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
-  dependencies:
-    ansi-regex "^5.0.1"
-    ansi-styles "^5.0.0"
-    react-is "^17.0.1"
-
 pretty-format@^29.0.0, pretty-format@^29.0.3, pretty-format@^29.5.0:
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.5.0.tgz#283134e74f70e2e3e7229336de0e4fce94ccde5a"
@@ -20872,6 +21437,15 @@ pretty-format@^29.0.0, pretty-format@^29.0.3, pretty-format@^29.5.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
+pretty-format@^29.2.1, pretty-format@^29.6.1:
+  version "29.6.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.6.1.tgz#ec838c288850b7c4f9090b867c2d4f4edbfb0f3e"
+  integrity sha512-7jRj+yXO0W7e4/tSJKoR7HRIHLPPjtNaUGG2xxKQnGvPNRkgWcQ0AZX6P4KBRJN4FcTBWb3sa7DVUJmocYuoog==
+  dependencies:
+    "@jest/schemas" "^29.6.0"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
+
 pretty-hrtime@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
@@ -21410,21 +21984,21 @@ react-inspector@^5.1.0:
     is-dom "^1.0.0"
     prop-types "^15.0.0"
 
-react-is@17.0.2, "react-is@^16.12.0 || ^17.0.0", react-is@^17.0.1, react-is@^17.0.2:
+react-is@17.0.2, react-is@^17.0.1, react-is@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^18.0.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
-  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
-
 react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -21474,14 +22048,14 @@ react-native-modal-selector@^2.0.2:
   dependencies:
     prop-types "^15.5.10"
 
-react-native-reanimated@2.12.0:
-  version "2.12.0"
-  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.12.0.tgz#5821eecfb1769b1617a67a2d4dec12fdeedb2b6e"
-  integrity sha512-nrlPyw+Hx9u4iJhZk9PoTvDo/QmVAd+bo7OK9Tv3hveNEF9++5oig/g3Uv9V93shy9avTYGsUprUvAEt/xdzeQ==
+react-native-reanimated@2.14.4:
+  version "2.14.4"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.14.4.tgz#3fa3da4e7b99f5dfb28f86bcf24d9d1024d38836"
+  integrity sha512-DquSbl7P8j4SAmc+kRdd75Ianm8G+IYQ9T4AQ6lrpLVeDkhZmjWI0wkutKWnp6L7c5XNVUrFDUf69dwETLCItQ==
   dependencies:
     "@babel/plugin-transform-object-assign" "^7.16.7"
     "@babel/preset-typescript" "^7.16.7"
-    "@types/invariant" "^2.2.35"
+    convert-source-map "^1.7.0"
     invariant "^2.2.4"
     lodash.isequal "^4.5.0"
     setimmediate "^1.0.5"
@@ -21652,12 +22226,12 @@ react-scripts@4.0.3:
     fsevents "^2.1.3"
 
 react-shallow-renderer@^16.13.1:
-  version "16.14.1"
-  resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz#bf0d02df8a519a558fd9b8215442efa5c840e124"
-  integrity sha512-rkIMcQi01/+kxiTE9D3fdS959U1g7gs+/rborw++42m1O9FAQiNI/UNRZExVUoAOprn4umcXf+pFRou8i4zuBg==
+  version "16.15.0"
+  resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457"
+  integrity sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==
   dependencies:
     object-assign "^4.1.1"
-    react-is "^16.12.0 || ^17.0.0"
+    react-is "^16.12.0 || ^17.0.0 || ^18.0.0"
 
 react-sizeme@^3.0.1:
   version "3.0.2"
@@ -22771,6 +23345,13 @@ semver@^7.3.7:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^7.5.3:
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
+  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
+  dependencies:
+    lru-cache "^6.0.0"
+
 send@0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
@@ -25584,6 +26165,13 @@ w3c-xmlserializer@^3.0.0:
   dependencies:
     xml-name-validator "^4.0.0"
 
+w3c-xmlserializer@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz#aebdc84920d806222936e3cdce408e32488a3073"
+  integrity sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==
+  dependencies:
+    xml-name-validator "^4.0.0"
+
 walk-up-path@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/walk-up-path/-/walk-up-path-3.0.1.tgz#c8d78d5375b4966c717eb17ada73dbd41490e886"
@@ -26480,10 +27068,10 @@ ws@^7, ws@^7.4.6:
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.6.tgz#e59fc509fb15ddfb65487ee9765c5a51dec5fe7b"
   integrity sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==
 
-ws@^8.9.0:
-  version "8.11.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"
-  integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==
+ws@^8.11.0, ws@^8.9.0:
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0"
+  integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==
 
 xcode@^2.0.0:
   version "2.1.0"