From 1a1659593121a24bdfe139078d8878e39a6057a2 Mon Sep 17 00:00:00 2001
From: Kristian Antrobus <kantrobus@twilio.com>
Date: Fri, 25 Oct 2024 09:36:06 -0500
Subject: [PATCH 1/5] chore(calliout): change to horizontal alignment

---
 packages/paste-core/components/callout/src/Callout.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/paste-core/components/callout/src/Callout.tsx b/packages/paste-core/components/callout/src/Callout.tsx
index 37959e9fdb..b80758ff07 100644
--- a/packages/paste-core/components/callout/src/Callout.tsx
+++ b/packages/paste-core/components/callout/src/Callout.tsx
@@ -141,11 +141,14 @@ export const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(
         variant={variant}
         {...variantStyles[variant]}
       >
-        <Box display="flex" justifyContent="space-between">
+        <Box display="flex" columnGap="space60" alignItems="start">
           <Box element={`${element}_ICON`}>
             {IconComponent}
             <ScreenReaderOnly>{iconLabel}</ScreenReaderOnly>
           </Box>
+          <Box display="flex" flexDirection="column" rowGap="space30" flex="1">
+            {children}
+          </Box>
           {onDismiss && typeof onDismiss === "function" && (
             <Button onClick={onDismiss} variant="secondary_icon" size="reset" element={`${element}_DISMISS_BUTTON`}>
               <CloseIcon element={`${element}_DISMISS_ICON`} decorative size="sizeIcon20" />
@@ -153,9 +156,6 @@ export const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(
             </Button>
           )}
         </Box>
-        <Box display="flex" flexDirection="column" rowGap="space30" flex="1">
-          {children}
-        </Box>
       </Box>
     );
   },

From 80a2f677d44897962604a20fbb7e1819bfbd4d5c Mon Sep 17 00:00:00 2001
From: Kristian Antrobus <kantrobus@twilio.com>
Date: Fri, 25 Oct 2024 09:41:18 -0500
Subject: [PATCH 2/5] chore(callout): changeset

---
 .changeset/two-eyes-pay.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/two-eyes-pay.md

diff --git a/.changeset/two-eyes-pay.md b/.changeset/two-eyes-pay.md
new file mode 100644
index 0000000000..793e64f436
--- /dev/null
+++ b/.changeset/two-eyes-pay.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/callout": patch
+"@twilio-paste/core": patch
+---
+
+[Callout] changed layout so elements align horizontally reducing vertical space used

From 727b0be9f90884c64db5d2e3a74df61a358d6513 Mon Sep 17 00:00:00 2001
From: Kristian Antrobus <kantrobus@twilio.com>
Date: Fri, 25 Oct 2024 09:53:44 -0500
Subject: [PATCH 3/5] chore(callout): updated stylings to match Figma

---
 .../components/callout/src/Callout.tsx        | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/packages/paste-core/components/callout/src/Callout.tsx b/packages/paste-core/components/callout/src/Callout.tsx
index b80758ff07..267c7154fd 100644
--- a/packages/paste-core/components/callout/src/Callout.tsx
+++ b/packages/paste-core/components/callout/src/Callout.tsx
@@ -129,9 +129,7 @@ export const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(
         ref={ref}
         element={element}
         display="flex"
-        flexDirection="column"
         marginY={marginY}
-        rowGap="space50"
         paddingTop="space70"
         paddingLeft="space70"
         paddingRight="space70"
@@ -139,23 +137,23 @@ export const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(
         borderLeftStyle="solid"
         borderLeftWidth="borderWidth20"
         variant={variant}
+        alignItems="start"
+        columnGap="space50"
         {...variantStyles[variant]}
       >
-        <Box display="flex" columnGap="space60" alignItems="start">
-          <Box element={`${element}_ICON`}>
-            {IconComponent}
-            <ScreenReaderOnly>{iconLabel}</ScreenReaderOnly>
-          </Box>
-          <Box display="flex" flexDirection="column" rowGap="space30" flex="1">
-            {children}
-          </Box>
-          {onDismiss && typeof onDismiss === "function" && (
-            <Button onClick={onDismiss} variant="secondary_icon" size="reset" element={`${element}_DISMISS_BUTTON`}>
-              <CloseIcon element={`${element}_DISMISS_ICON`} decorative size="sizeIcon20" />
-              <ScreenReaderOnly>{i18nDismissLabel}</ScreenReaderOnly>
-            </Button>
-          )}
+        <Box element={`${element}_ICON`}>
+          {IconComponent}
+          <ScreenReaderOnly>{iconLabel}</ScreenReaderOnly>
         </Box>
+        <Box display="flex" flexDirection="column" rowGap="space30" flex="1">
+          {children}
+        </Box>
+        {onDismiss && typeof onDismiss === "function" && (
+          <Button onClick={onDismiss} variant="secondary_icon" size="reset" element={`${element}_DISMISS_BUTTON`}>
+            <CloseIcon element={`${element}_DISMISS_ICON`} decorative size="sizeIcon20" />
+            <ScreenReaderOnly>{i18nDismissLabel}</ScreenReaderOnly>
+          </Button>
+        )}
       </Box>
     );
   },

From 3b019a7d642468758700e89bf41c070e39d7393a Mon Sep 17 00:00:00 2001
From: krisantrobus <55083528+krisantrobus@users.noreply.github.com>
Date: Fri, 25 Oct 2024 13:07:43 -0500
Subject: [PATCH 4/5] fix(callout): update for even padding

Co-authored-by: Sarah <sali@twilio.com>
---
 packages/paste-core/components/callout/src/Callout.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/paste-core/components/callout/src/Callout.tsx b/packages/paste-core/components/callout/src/Callout.tsx
index 267c7154fd..91381dea94 100644
--- a/packages/paste-core/components/callout/src/Callout.tsx
+++ b/packages/paste-core/components/callout/src/Callout.tsx
@@ -130,10 +130,7 @@ export const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(
         element={element}
         display="flex"
         marginY={marginY}
-        paddingTop="space70"
-        paddingLeft="space70"
-        paddingRight="space70"
-        paddingBottom="space90"
+        padding="space70"
         borderLeftStyle="solid"
         borderLeftWidth="borderWidth20"
         variant={variant}

From f24549b8983b07964bc95769df87b5caf5101122 Mon Sep 17 00:00:00 2001
From: Kristian Antrobus <kantrobus@twilio.com>
Date: Fri, 25 Oct 2024 13:09:30 -0500
Subject: [PATCH 5/5] fix(callout): lineHeight on content

---
 .../paste-core/components/callout/src/CalloutHeading.tsx | 1 -
 .../paste-core/components/callout/src/CalloutText.tsx    | 9 +--------
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/paste-core/components/callout/src/CalloutHeading.tsx b/packages/paste-core/components/callout/src/CalloutHeading.tsx
index 2a3b2351df..a1ca60e005 100644
--- a/packages/paste-core/components/callout/src/CalloutHeading.tsx
+++ b/packages/paste-core/components/callout/src/CalloutHeading.tsx
@@ -31,7 +31,6 @@ export const CalloutHeading = React.forwardRef<HTMLHeadingElement, CalloutHeadin
       ref={ref}
       element={element}
       color="currentColor"
-      lineHeight="lineHeight40"
       fontWeight="fontWeightSemibold"
     >
       {children}
diff --git a/packages/paste-core/components/callout/src/CalloutText.tsx b/packages/paste-core/components/callout/src/CalloutText.tsx
index 760f78a0c0..c79f86c957 100644
--- a/packages/paste-core/components/callout/src/CalloutText.tsx
+++ b/packages/paste-core/components/callout/src/CalloutText.tsx
@@ -17,14 +17,7 @@ export interface CalloutTextProps extends HTMLPasteProps<"p"> {
 
 export const CalloutText = React.forwardRef<HTMLParagraphElement, CalloutTextProps>(
   ({ element = "CALLOUT_TEXT", children, ...props }, ref) => (
-    <Text
-      {...safelySpreadTextProps(props)}
-      as="p"
-      ref={ref}
-      element={element}
-      color="currentColor"
-      lineHeight="lineHeight40"
-    >
+    <Text {...safelySpreadTextProps(props)} as="p" ref={ref} element={element} color="currentColor">
       {children}
     </Text>
   ),