From 29406f693108f5a7cf9046e1989b4de65b3453a0 Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Thu, 5 Oct 2023 18:39:40 +1100
Subject: [PATCH] [WIP] Remove usage of useBreakpoints from <Banner>

---
 polaris-react/src/components/Banner/Banner.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/polaris-react/src/components/Banner/Banner.tsx b/polaris-react/src/components/Banner/Banner.tsx
index 7ab55130e25..5262e2d2c98 100644
--- a/polaris-react/src/components/Banner/Banner.tsx
+++ b/polaris-react/src/components/Banner/Banner.tsx
@@ -23,7 +23,6 @@ import type {IconProps} from '../Icon';
 import {BannerContext} from '../../utilities/banner-context';
 import {WithinContentContext} from '../../utilities/within-content-context';
 import {classNames} from '../../utilities/css';
-import {useBreakpoints} from '../../utilities/breakpoints';
 import {useI18n} from '../../utilities/i18n';
 import {useEventListener} from '../../utilities/use-event-listener';
 import {BlockStack} from '../BlockStack';
@@ -190,7 +189,6 @@ export function DefaultBanner({
   dismissButton,
   children,
 }: PropsWithChildren<BannerLayoutProps>) {
-  const {smUp} = useBreakpoints();
   const hasContent = children || actionButtons;
 
   return (
@@ -199,10 +197,10 @@ export function DefaultBanner({
         <Box
           background={backgroundColor}
           color={textColor}
-          borderStartStartRadius={smUp ? '300' : undefined}
-          borderStartEndRadius={smUp ? '300' : undefined}
-          borderEndStartRadius={!hasContent && smUp ? '300' : undefined}
-          borderEndEndRadius={!hasContent && smUp ? '300' : undefined}
+          borderStartStartRadius={{sm: '300'}}
+          borderStartEndRadius={{sm: '300'}}
+          borderEndStartRadius={!hasContent ? {sm: '300'} : undefined}
+          borderEndEndRadius={!hasContent ? {sm: '300'} : undefined}
           padding="300"
         >
           <InlineStack