fix: Callout buttons rendered as links had incorrect styles (#522)

Author: dogmar

src/components/Callout.tsx

@@ -309,6 +309,11 @@ const CalloutSC = styled.div<{
   '.children *:last-child': {
     marginBottom: '0',
   },
+  '.children': {
+    '& a, & a:any-link': {
+      ...theme.partials.text.inlineLink,
+    },
+  },
   '.buttonArea': {
     display: 'flex',
     gap: theme.spacing.xsmall,
@@ -350,9 +355,6 @@ const CalloutSC = styled.div<{
     width: 0,
     height: 0,
   },
-  '& a, & a:any-link': {
-    ...theme.partials.text.inlineLink,
-  },
   '.expandIcon': {
     ...theme.partials.dropdown.arrowTransition({ isOpen: $expanded }),
   },

src/stories/Callout.stories.tsx

@@ -117,7 +117,7 @@ function ExpandableTemplate({
           key={style}
           severity={style}
           title={title}
-          buttonProps={{ children: 'Learn more' }}
+          buttonProps={{ children: 'Learn more', as: 'a' }}
           expandable
           defaultExpanded
           expanded={controlled ? expanded[i] : undefined}
@@ -156,7 +156,7 @@ function CloseableTemplate({ title }: CalloutProps) {
           key={style}
           severity={style}
           title={title}
-          buttonProps={{ children: 'Learn more' }}
+          buttonProps={{ children: 'Learn more', as: 'a' }}
           closeable
           closed={closed}
           onClose={setClosed}