fix(Alert): padding issue when no dismiss button

packages/gamut/src/Alert/Alert.tsx

@@ -14,7 +14,7 @@ import {
   alertContentProps,
   CollapsableContent,
 } from './elements';
-import { alertVariants, getGridTemplateColumns } from './variants';
+import { alertVariants, getAlertRightPadding,getGridTemplateColumns } from './variants';
 
 export type AlertType = keyof typeof alertVariants;
 export type AlertPlacements = 'inline' | 'floating';
@@ -85,10 +85,20 @@ export const Alert: React.FC<AlertProps> = ({
       ? `max-content minmax(0, 1fr) repeat(1, max-content)`
       : getGridTemplateColumns({
           cta: ctaExists,
+          // cta: false,
+          // onClose: false,
           onClose: !!onClose,
           truncated,
         });
   }, [ctaExists, isDesktop, onClose, truncated]);
+  // }, [/* /, isDesktop, onClose, truncated]);
+// }, [ctaExists, isDesktop, /* onClose */, truncated]);
+// }, [/* ctaExists */, isDesktop, /* onClose */, truncated]);
+
+
+  const alertRightPadding = useMemo(() => {
+    return getAlertRightPadding(Boolean(onClose)) ;
+  }, [onClose])
 
   const tabIndex = hidden ? -1 : undefined;
 
@@ -131,6 +141,7 @@ export const Alert: React.FC<AlertProps> = ({
   );
 
   const buttonColorMode = isSubtleVariant ? currentColorMode : 'dark';
+  // onClose = false
 
   const ctaButton = ctaExists && (
     <Box
@@ -151,12 +162,12 @@ export const Alert: React.FC<AlertProps> = ({
   );
 
   const AlertWrapper = isSubtleVariant ? AlertBox : AlertBanner;
-
   return (
     <AlertWrapper
       bg={bg}
       placement={placement}
       gridTemplateColumns={gridTemplateColumns}
+      pr={alertRightPadding}
       {...props}
     >
       <Icon size={32} aria-hidden p={8} />

packages/gamut/src/Alert/elements.tsx

@@ -17,7 +17,7 @@ export const AlertBanner = forwardRef<
 >(
   (
     {
-      'aria-label': ariaLabel = 'alert box',
+      'aria-label': ariaLabel = 'alert banner',
       'aria-live': ariaLive = 'polite',
       role = 'status',
       ...rest

packages/gamut/src/Alert/variants.tsx

@@ -43,10 +43,10 @@ export const placementVariants = variant({
   prop: 'placement',
   base: {
     alignItems: 'start',
-    columnGap: [4, 8, , 12],
+    columnGap: {_: 4, xs: 8, sm: 12},
     display: 'grid',
     maxWidth: `calc(${breakpoints.md} - 4rem)`,
-    px: 4,
+    pl: 4,
     width: 1,
   },
   variants: {
@@ -80,3 +80,7 @@ export const getGridTemplateColumns = (
   const repeatCount = numOfButtons <= 0 ? 1 : numOfButtons;
   return `max-content minmax(0, 1fr) repeat(${repeatCount}, max-content)`;
 };
+
+export const getAlertRightPadding = (onClose: boolean) => {
+  return onClose ? 4 : {_: 4, xs: 12, sm: 16} as const
+}

packages/styleguide/stories/Molecules/Alert/index.stories.mdx

@@ -18,7 +18,7 @@ import { ALERTS } from './constants';
     source: 'gamut',
     design: {
       type: 'figma',
-      url: 'https://www.figma.com/file/TemYhRWOavsERWprDzRJCx',
+      url: 'https://www.figma.com/file/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=30186%3A40359',
     },
     padded: true,
   }}