[CL-688] Callout UI updates (#15152)

* refresh callout ui

* fix callout padding

* Use more descriptive example text

* position icon. Change padding back

libs/components/src/callout/callout.component.html

@@ -1,20 +1,24 @@
 <aside
-  class="tw-mb-4 tw-box-border tw-rounded-lg tw-border tw-border-l-4 tw-border-solid tw-bg-background tw-ps-3 tw-pe-2 tw-py-2 tw-leading-5 tw-text-main"
+  class="tw-mb-4 tw-box-border tw-rounded-lg tw-bg-background tw-ps-3 tw-pe-3 tw-py-2 tw-leading-5 tw-text-main"
   [ngClass]="calloutClass"
   [attr.aria-labelledby]="titleId"
 >
   @if (title) {
     <header
       id="{{ titleId }}"
-      class="tw-mb-1 tw-mt-0 tw-text-base tw-font-semibold tw-flex tw-gap-2 tw-items-center"
+      class="tw-mb-1 tw-mt-0 tw-text-base tw-font-semibold tw-flex tw-gap-2 tw-items-start"
     >
       @if (icon) {
-        <i class="bwi" [ngClass]="[icon, headerClass]" aria-hidden="true"></i>
+        <i
+          class="bwi !tw-text-main tw-relative tw-top-[3px]"
+          [ngClass]="[icon]"
+          aria-hidden="true"
+        ></i>
       }
       {{ title }}
     </header>
   }
-  <div bitTypography="body2">
+  <div class="tw-ps-6" bitTypography="body2">
     <ng-content></ng-content>
   </div>
 </aside>