@automattic/vip-design-system 2.7.0 → 2.8.0

package/build/system/Card/Card.d.ts

@@ -8,13 +8,15 @@ import { BoxProps } from 'theme-ui';
 export declare enum CardVariant {
     'primary' = 0,
     'secondary' = 1,
-    'indent' = 2
+    'notice' = 2,
+    'indent' = 3
 }
 export interface CardProps {
     variant?: keyof typeof CardVariant;
     sx?: BoxProps['sx'];
     className?: Argument;
-    header?: React.ReactNode;
+    title?: string;
     children?: React.ReactNode;
+    renderHeader?: (title?: string) => React.ReactNode;
 }
 export declare const Card: import("react").ForwardRefExoticComponent<CardProps & BoxProps & import("react").RefAttributes<HTMLElement>>;

package/build/system/Card/Card.js

@@ -6,7 +6,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _ = require("..");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["variant", "header", "sx", "className", "children"];
+var _excluded = ["variant", "title", "renderHeader", "sx", "className", "children"];
 /** @jsxImportSource theme-ui */
 /**
  * External dependencies
@@ -20,13 +20,15 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var CardVariant = exports.CardVariant = /*#__PURE__*/function (CardVariant) {
   CardVariant[CardVariant["primary"] = 0] = "primary";
   CardVariant[CardVariant["secondary"] = 1] = "secondary";
-  CardVariant[CardVariant["indent"] = 2] = "indent";
+  CardVariant[CardVariant["notice"] = 2] = "notice";
+  CardVariant[CardVariant["indent"] = 3] = "indent";
   return CardVariant;
 }({});
 var Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
-    header = _ref.header,
+    title = _ref.title,
+    renderHeader = _ref.renderHeader,
     _ref$sx = _ref.sx,
     sx = _ref$sx === void 0 ? {} : _ref$sx,
     className = _ref.className,
@@ -34,21 +36,22 @@ var Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return (0, _jsxRuntime.jsxs)(_.Box, _extends({
     ref: ref,
-    sx: _extends({
-      // pass variant prop to sx
+    sx: {
       variant: "cards." + variant
-    }, sx),
+    },
     className: (0, _classnames["default"])('vip-card-component', className)
   }, props, {
-    children: [header && (0, _jsxRuntime.jsx)("div", {
+    children: [renderHeader ? renderHeader(title) : '', title && !renderHeader && (0, _jsxRuntime.jsx)(_.Box, {
+      className: (0, _classnames["default"])('vip-card-header-component', className),
       sx: {
         variant: "cards." + variant + ".header"
       },
-      children: header
-    }), (0, _jsxRuntime.jsx)("div", {
-      sx: {
+      children: title
+    }), (0, _jsxRuntime.jsx)(_.Box, {
+      className: (0, _classnames["default"])('vip-card-body-component', className),
+      sx: _extends({
         variant: "cards." + variant + ".children"
-      },
+      }, sx),
       children: children
     })]
   }));

package/build/system/Card/Card.stories.d.ts

@@ -1,3 +1,4 @@
+/** @jsxImportSource theme-ui */
 /// <reference types="react" />
 declare const _default: {
     title: string;
@@ -6,7 +7,7 @@ declare const _default: {
 export default _default;
 export declare const Default: () => import("react").JSX.Element;
 export declare const WithHeader: () => import("react").JSX.Element;
+export declare const WithCustomHeader: () => import("react").JSX.Element;
 export declare const DefaultSecondary: () => import("react").JSX.Element;
 export declare const WithHeaderSecondary: () => import("react").JSX.Element;
 export declare const DefaultIndent: () => import("react").JSX.Element;
-export declare const WithHeaderIndent: () => import("react").JSX.Element;

package/build/system/Card/Card.stories.js

@@ -1,12 +1,10 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.WithHeaderSecondary = exports.WithHeaderIndent = exports.WithHeader = exports.DefaultSecondary = exports.DefaultIndent = exports.Default = void 0;
+exports["default"] = exports.WithHeaderSecondary = exports.WithHeader = exports.WithCustomHeader = exports.DefaultSecondary = exports.DefaultIndent = exports.Default = void 0;
 var _ = require("..");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
-/**
- * Internal dependencies
- */
+/** @jsxImportSource theme-ui */
 var _default = exports["default"] = {
   title: 'Card',
   component: _.Card
@@ -18,10 +16,30 @@ var Default = exports.Default = function Default() {
 };
 var WithHeader = exports.WithHeader = function WithHeader() {
   return (0, _jsxRuntime.jsx)(_.Card, {
-    header: "Header",
+    title: "Header",
     children: "This is a card with a header."
   });
 };
+var WithCustomHeader = exports.WithCustomHeader = function WithCustomHeader() {
+  return (0, _jsxRuntime.jsx)(_.Box, {
+    sx: {
+      maxWidth: 500
+    },
+    children: (0, _jsxRuntime.jsx)(_.Card, {
+      title: "Screenshot of a website",
+      renderHeader: function renderHeader(title) {
+        return (0, _jsxRuntime.jsx)("img", {
+          src: "https://s0.wp.com/mshots/v1/https://google.com/",
+          sx: {
+            width: '100%'
+          },
+          alt: title
+        });
+      },
+      children: "This is a card with a customized header content."
+    })
+  });
+};
 var DefaultSecondary = exports.DefaultSecondary = function DefaultSecondary() {
   return (0, _jsxRuntime.jsx)(_.Card, {
     variant: "secondary",
@@ -30,7 +48,7 @@ var DefaultSecondary = exports.DefaultSecondary = function DefaultSecondary() {
 };
 var WithHeaderSecondary = exports.WithHeaderSecondary = function WithHeaderSecondary() {
   return (0, _jsxRuntime.jsx)(_.Card, {
-    header: "Header",
+    title: "Header",
     variant: "secondary",
     children: "This is a card with a header."
   });
@@ -40,11 +58,4 @@ var DefaultIndent = exports.DefaultIndent = function DefaultIndent() {
     variant: "indent",
     children: "Hello"
   });
-};
-var WithHeaderIndent = exports.WithHeaderIndent = function WithHeaderIndent() {
-  return (0, _jsxRuntime.jsx)(_.Card, {
-    header: "Header",
-    variant: "indent",
-    children: "This is a card with a header."
-  });
 };

package/build/system/Card/Card.test.js

@@ -61,13 +61,13 @@ describe('<Card />', function () {
       }
     }, _callee2);
   })));
-  it('renders the Card component with a header', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+  it('renders the Card component with a title', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
     var _render3, container;
     return _regeneratorRuntime().wrap(function _callee3$(_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
           _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(_Card.Card, {
-            header: "Card Header",
+            title: "Card Header",
             children: "Card text"
           })), container = _render3.container;
           expect(_react.screen.getByText('Card Header')).toBeInTheDocument();

package/build/system/Notice/Notice.js

@@ -25,7 +25,7 @@ var NoticeIcon = function NoticeIcon(_ref) {
     color: color,
     flex: '0 0 auto'
   };
-  var size = 20;
+  var size = 24;
   switch (variant) {
     case 'info':
       return (0, _jsxRuntime.jsx)(_md.MdInfo, {
@@ -68,15 +68,17 @@ var Notice = exports.Notice = /*#__PURE__*/_react["default"].forwardRef(function
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? 'warning' : _ref2$variant,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded);
-  return (0, _jsxRuntime.jsx)(_.Card, _extends({
+  return (0, _jsxRuntime.jsxs)(_.Card, _extends({
+    variant: "notice",
     sx: _extends({
       boxShadow: 'none',
       borderRadius: 2,
       bg: inline ? 'transparent' : "notice.background." + variant,
-      padding: inline ? 0 : 3,
       color: "notice.text." + variant,
+      fontSize: 2,
       p: {
-        color: "notice.text." + variant
+        color: "notice.text." + variant,
+        fontSize: 2
       },
       a: {
         color: "notice.link." + variant + ".default",
@@ -89,54 +91,50 @@ var Notice = exports.Notice = /*#__PURE__*/_react["default"].forwardRef(function
         '&:hover, &:focus': {
           color: "notice.link." + variant + ".hover"
         }
+      },
+      ul: {
+        pl: 5
       }
     }, sx),
     className: (0, _classnames["default"])('vip-notice-component', className),
     ref: forwardRef
   }, props, {
-    children: (0, _jsxRuntime.jsxs)(_.Flex, {
+    children: [(0, _jsxRuntime.jsx)(_.Box, {
       sx: {
-        height: '100%' // required for the dynamic height of the icon box to work
+        minWidth: '24px'
       },
-      children: [(0, _jsxRuntime.jsx)(_.Box, {
+      children: (0, _jsxRuntime.jsxs)(_.Flex, {
         sx: {
-          minWidth: '32px',
-          mr: 3,
-          mt: 0
+          flexDirection: 'column',
+          // the trick here is to have a flex column with the icon at the bottom and an empty div that fills the space
+          minHeight: '24px',
+          maxHeight: '32px',
+          // we're forcing the max height so that the icon is, at max, aligned between the first and the second line of text
+          alignItems: 'flex-end',
+          // we want the icon to be aligned to the bottom
+          height: '100%' // specifying the height will allow the box to match the height of the content.
         },
-        children: (0, _jsxRuntime.jsxs)(_.Flex, {
-          sx: {
-            flexDirection: 'column',
-            // the trick here is to have a flex column with the icon at the bottom and an empty div that fills the space
-            minHeight: '20px',
-            maxHeight: '32px',
-            // we're forcing the max height so that the icon is, at max, aligned between the first and the second line of text
-            alignItems: 'flex-end',
-            // we want the icon to be aligned to the bottom
-            height: '100%' // specifying the height will allow the box to match the height of the content.
-          },
-          children: [(0, _jsxRuntime.jsx)(_.Box, {
-            sx: {
-              flex: '1 100%' // we need this empty div to make the icon align to the bottom
-            }
-          }), (0, _jsxRuntime.jsx)(NoticeIcon, {
-            color: "notice.icon." + variant,
-            variant: variant
-          })]
-        })
-      }), (0, _jsxRuntime.jsxs)(_.Box, {
-        children: [title && (0, _jsxRuntime.jsx)(_.Heading, {
-          as: headingVariant,
+        children: [(0, _jsxRuntime.jsx)(_.Box, {
           sx: {
-            color: "notice.text." + variant,
-            mb: 0,
-            fontSize: 2,
-            fontWeight: 'bold'
-          },
-          children: title
-        }), children]
-      })]
-    })
+            flex: '1 100%' // we need this empty div to make the icon align to the bottom
+          }
+        }), (0, _jsxRuntime.jsx)(NoticeIcon, {
+          color: "notice.icon." + variant,
+          variant: variant
+        })]
+      })
+    }), (0, _jsxRuntime.jsxs)(_.Box, {
+      children: [title && (0, _jsxRuntime.jsx)(_.Heading, {
+        as: headingVariant,
+        sx: {
+          color: "notice.text." + variant,
+          mb: 0,
+          fontSize: 2,
+          fontWeight: 'bold'
+        },
+        children: title
+      }), children]
+    })]
   }));
 });
 Notice.displayName = 'Notice';

package/build/system/Wizard/WizardStep.js

@@ -70,7 +70,6 @@ var WizardStep = exports.WizardStep = /*#__PURE__*/_react["default"].forwardRef(
     sx: {
       boxShadow: active ? 'low' : 'none',
       borderLeft: '2px solid',
-      p: 4,
       backgroundColor: active ? 'background' : 'transparent',
       borderRadius: 0,
       borderBottom: active ? 'none' : '1px solid',

package/build/system/theme/index.d.ts

@@ -33,72 +33,86 @@ declare namespace _default {
     }
     export namespace cards {
         namespace primary {
-            let borderRadius: number;
             let backgroundColor: string;
+            let borderRadius: number;
             let boxShadow: string;
             namespace header {
                 let backgroundColor_1: string;
                 export { backgroundColor_1 as backgroundColor };
                 export let borderTopLeftRadius: number;
                 export let borderTopRightRadius: number;
-                export let p: number;
+                export let py: number;
+                export let px: number;
+                export let gap: number;
                 export let fontWeight: string;
                 export let display: string;
+                export let minHeight: number;
             }
             namespace children {
-                let p_1: number;
-                export { p_1 as p };
+                export let padding: number;
+                let gap_1: number;
+                export { gap_1 as gap };
             }
         }
         namespace secondary {
-            let borderRadius_1: number;
-            export { borderRadius_1 as borderRadius };
-            let boxShadow_1: string;
-            export { boxShadow_1 as boxShadow };
+            export let variant: string;
             export let border: string;
             export let borderColor: string;
+            let boxShadow_1: string;
+            export { boxShadow_1 as boxShadow };
             export namespace header_1 {
-                let backgroundColor_2: string;
-                export { backgroundColor_2 as backgroundColor };
-                let borderTopLeftRadius_1: number;
-                export { borderTopLeftRadius_1 as borderTopLeftRadius };
-                let borderTopRightRadius_1: number;
-                export { borderTopRightRadius_1 as borderTopRightRadius };
-                let p_2: number;
-                export { p_2 as p };
-                let fontWeight_1: string;
-                export { fontWeight_1 as fontWeight };
-                let display_1: string;
-                export { display_1 as display };
+                let variant_1: string;
+                export { variant_1 as variant };
             }
             export { header_1 as header };
             export namespace children_1 {
-                let p_3: number;
-                export { p_3 as p };
+                let variant_2: string;
+                export { variant_2 as variant };
             }
             export { children_1 as children };
         }
+        namespace notice {
+            let boxShadow_2: string;
+            export { boxShadow_2 as boxShadow };
+            let borderRadius_1: number;
+            export { borderRadius_1 as borderRadius };
+            export let fontSize: number;
+            let padding_1: number;
+            export { padding_1 as padding };
+            export namespace children_2 {
+                export let height: string;
+                let display_1: string;
+                export { display_1 as display };
+                export let flexDirection: string;
+                let py_1: number;
+                export { py_1 as py };
+                let px_1: number;
+                export { px_1 as px };
+                let gap_2: number;
+                export { gap_2 as gap };
+            }
+            export { children_2 as children };
+        }
         namespace indent {
             let borderRadius_2: number;
             export { borderRadius_2 as borderRadius };
-            let boxShadow_2: string;
-            export { boxShadow_2 as boxShadow };
-            let backgroundColor_3: string;
-            export { backgroundColor_3 as backgroundColor };
+            let boxShadow_3: string;
+            export { boxShadow_3 as boxShadow };
+            let backgroundColor_2: string;
+            export { backgroundColor_2 as backgroundColor };
             export namespace header_2 {
                 let display_2: string;
                 export { display_2 as display };
-                let fontWeight_2: string;
-                export { fontWeight_2 as fontWeight };
-                let p_4: number;
-                export { p_4 as p };
+                let fontWeight_1: string;
+                export { fontWeight_1 as fontWeight };
+                export let p: number;
             }
             export { header_2 as header };
-            export namespace children_2 {
-                let p_5: number;
-                export { p_5 as p };
+            export namespace children_3 {
+                let p_1: number;
+                export { p_1 as p };
             }
-            export { children_2 as children };
+            export { children_3 as children };
         }
     }
     export namespace buttons {
@@ -209,8 +223,9 @@ declare namespace _default {
         };
         export { border_1 as border };
         export namespace text {
-            let variant: string;
-            let color: string;
+            let variant_3: string;
+            export { variant_3 as variant };
+            export let color: string;
         }
         export let icon: {
             variant: string;
@@ -1125,41 +1140,42 @@ declare namespace _default {
             export let top: string;
             export let left: string;
             export let maxWidth: string;
-            let backgroundColor_4: string;
-            export { backgroundColor_4 as backgroundColor };
-            let boxShadow_3: string;
-            export { boxShadow_3 as boxShadow };
+            let backgroundColor_3: string;
+            export { backgroundColor_3 as backgroundColor };
+            let boxShadow_4: string;
+            export { boxShadow_4 as boxShadow };
         }
         export namespace sidebar_1 {
             let position_1: string;
             export { position_1 as position };
             let top_1: string;
             export { top_1 as top };
-            export let height: string;
+            let height_1: string;
+            export { height_1 as height };
             let left_1: string;
             export { left_1 as left };
             export let overflow: string;
             export let margin: number;
             let borderRadius_3: number;
             export { borderRadius_3 as borderRadius };
-            let boxShadow_4: string;
-            export { boxShadow_4 as boxShadow };
-            let backgroundColor_5: string;
-            export { backgroundColor_5 as backgroundColor };
+            let boxShadow_5: string;
+            export { boxShadow_5 as boxShadow };
+            let backgroundColor_4: string;
+            export { backgroundColor_4 as backgroundColor };
         }
         export { sidebar_1 as sidebar };
         export namespace cover {
             let position_2: string;
             export { position_2 as position };
-            let backgroundColor_6: string;
-            export { backgroundColor_6 as backgroundColor };
+            let backgroundColor_5: string;
+            export { backgroundColor_5 as backgroundColor };
             export let width: string;
             let left_2: number;
             export { left_2 as left };
             let top_2: number;
             export { top_2 as top };
-            let height_1: string;
-            export { height_1 as height };
+            let height_2: string;
+            export { height_2 as height };
             export let transform: string;
             let borderRadius_4: number;
             export { borderRadius_4 as borderRadius };
@@ -1215,12 +1231,12 @@ declare namespace _default {
         namespace root {
             export let fontFamily: string;
             export let lineHeight: string;
-            let fontWeight_3: string;
-            export { fontWeight_3 as fontWeight };
+            let fontWeight_2: string;
+            export { fontWeight_2 as fontWeight };
             let color_1: string;
             export { color_1 as color };
-            let backgroundColor_7: string;
-            export { backgroundColor_7 as backgroundColor };
+            let backgroundColor_6: string;
+            export { backgroundColor_6 as backgroundColor };
             export let webkitFontSmoothing: string;
             export let mozOsxFontmoothing: string;
             export let a: {
@@ -1239,11 +1255,11 @@ declare namespace _default {
                 let fontFamily_1: string;
                 export { fontFamily_1 as fontFamily };
             }
-            export namespace p_6 {
+            export namespace p_2 {
                 let color_2: string;
                 export { color_2 as color };
             }
-            export { p_6 as p };
+            export { p_2 as p };
         }
     }
 }
@@ -1252,8 +1268,8 @@ declare namespace outline {
     export let outlineStyle: string;
     export let outlineColor: any;
     export let outlineWidth: string;
-    let boxShadow_5: string;
-    export { boxShadow_5 as boxShadow };
+    let boxShadow_6: string;
+    export { boxShadow_6 as boxShadow };
 }
 declare namespace fonts {
     let body_1: string;

package/build/system/theme/index.js

@@ -250,36 +250,49 @@ export default {
 
 	cards: {
 		primary: {
-			borderRadius: 2,
 			backgroundColor: 'layer.2',
+			borderRadius: 2,
 			boxShadow: 'low',
 			header: {
 				backgroundColor: 'layer.1',
 				borderTopLeftRadius: 2,
 				borderTopRightRadius: 2,
-				p: 3,
+				py: 3,
+				px: 5,
+				gap: 2,
 				fontWeight: 'bold',
 				display: 'flex',
+				minHeight: 46,
 			},
 			children: {
-				p: 3,
+				padding: 5,
+				gap: 6,
 			},
 		},
 		secondary: {
-			borderRadius: 2,
-			boxShadow: 'none',
+			variant: 'cards.primary',
 			border: '1px solid',
 			borderColor: 'borders.2',
+			boxShadow: 'none',
 			header: {
-				backgroundColor: 'layer.1',
-				borderTopLeftRadius: 2,
-				borderTopRightRadius: 2,
-				p: 3,
-				fontWeight: 'bold',
-				display: 'flex',
+				variant: 'cards.primary.header',
 			},
 			children: {
-				p: 3,
+				variant: 'cards.primary.children',
+			},
+		},
+		notice: {
+			boxShadow: 'none',
+			borderRadius: 2,
+			fontSize: 2,
+			padding: 0,
+			children: {
+				height: '100%',
+				display: 'flex',
+				flexDirection: 'row',
+				py: 3,
+				px: 4,
+				gap: 4,
 			},
 		},
 		indent: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "main": "build/system/index.js",
   "scripts": {
     "build-storybook": "storybook build",

package/src/system/Card/Card.stories.tsx

@@ -1,7 +1,6 @@
-/**
- * Internal dependencies
- */
-import { Card } from '..';
+/** @jsxImportSource theme-ui */
+
+import { Box, Card } from '..';
 
 export default {
 	title: 'Card',
@@ -10,20 +9,31 @@ export default {
 
 export const Default = () => <Card>Hello</Card>;
 
-export const WithHeader = () => <Card header="Header">This is a card with a header.</Card>;
+export const WithHeader = () => <Card title="Header">This is a card with a header.</Card>;
+
+export const WithCustomHeader = () => (
+	<Box sx={ { maxWidth: 500 } }>
+		<Card
+			title="Screenshot of a website"
+			renderHeader={ title => (
+				<img
+					src={ `https://s0.wp.com/mshots/v1/https://google.com/` }
+					sx={ { width: '100%' } }
+					alt={ title }
+				/>
+			) }
+		>
+			This is a card with a customized header content.
+		</Card>
+	</Box>
+);
 
 export const DefaultSecondary = () => <Card variant="secondary">Hello</Card>;
 
 export const WithHeaderSecondary = () => (
-	<Card header="Header" variant="secondary">
+	<Card title="Header" variant="secondary">
 		This is a card with a header.
 	</Card>
 );
 
 export const DefaultIndent = () => <Card variant="indent">Hello</Card>;
-
-export const WithHeaderIndent = () => (
-	<Card header="Header" variant="indent">
-		This is a card with a header.
-	</Card>
-);

package/src/system/Card/Card.test.tsx

@@ -30,8 +30,8 @@ describe( '<Card />', () => {
 		expect( await axe( container ) ).toHaveNoViolations();
 	} );
 
-	it( 'renders the Card component with a header', async () => {
-		const { container } = render( <Card header="Card Header">Card text</Card> );
+	it( 'renders the Card component with a title', async () => {
+		const { container } = render( <Card title="Card Header">Card text</Card> );
 
 		expect( screen.getByText( 'Card Header' ) ).toBeInTheDocument();
 

package/src/system/Card/Card.tsx

@@ -15,6 +15,7 @@ import { Box } from '..';
 export enum CardVariant {
 	'primary',
 	'secondary',
+	'notice',
 	'indent',
 }
 
@@ -22,44 +23,48 @@ export interface CardProps {
 	variant?: keyof typeof CardVariant;
 	sx?: BoxProps[ 'sx' ];
 	className?: Argument;
-	header?: React.ReactNode;
+	title?: string;
 	children?: React.ReactNode;
+	renderHeader?: ( title?: string ) => React.ReactNode;
 }
 
 type CardBoxProps = CardProps & BoxProps;
 
 export const Card = forwardRef< HTMLElement, CardBoxProps >(
 	(
-		{ variant = 'primary', header, sx = {}, className, children, ...props }: CardProps,
+		{ variant = 'primary', title, renderHeader, sx = {}, className, children, ...props }: CardProps,
 		ref: Ref< HTMLElement >
 	) => {
 		return (
 			<Box
 				ref={ ref }
 				sx={ {
-					// pass variant prop to sx
 					variant: `cards.${ variant }`,
-					...sx,
 				} }
 				className={ classNames( 'vip-card-component', className ) }
 				{ ...props }
 			>
-				{ header && (
-					<div
+				{ renderHeader ? renderHeader( title ) : '' }
+				{ title && ! renderHeader && (
+					<Box
+						className={ classNames( 'vip-card-header-component', className ) }
 						sx={ {
 							variant: `cards.${ variant }.header`,
 						} }
 					>
-						{ header }
-					</div>
+						{ title }
+					</Box>
 				) }
-				<div
+
+				<Box
+					className={ classNames( 'vip-card-body-component', className ) }
 					sx={ {
 						variant: `cards.${ variant }.children`,
+						...sx,
 					} }
 				>
 					{ children }
-				</div>
+				</Box>
 			</Box>
 		);
 	}

package/src/system/Notice/Notice.tsx

@@ -31,7 +31,7 @@ type ColorVariants = 'warning' | 'error' | 'alert' | 'success' | 'info';
 
 const NoticeIcon = ( { color, variant }: NoticeIconProps ) => {
 	const sx = { color, flex: '0 0 auto' };
-	const size = 20;
+	const size = 24;
 
 	switch ( variant ) {
 		case 'info':
@@ -62,14 +62,16 @@ export const Notice = React.forwardRef< HTMLDivElement, NoticeProps >(
 	) => {
 		return (
 			<Card
+				variant="notice"
 				sx={ {
 					boxShadow: 'none',
 					borderRadius: 2,
 					bg: inline ? 'transparent' : `notice.background.${ variant }`,
-					padding: inline ? 0 : 3,
 					color: `notice.text.${ variant }`,
+					fontSize: 2,
 					p: {
 						color: `notice.text.${ variant }`,
+						fontSize: 2,
 					},
 					a: {
 						color: `notice.link.${ variant }.default`,
@@ -83,52 +85,49 @@ export const Notice = React.forwardRef< HTMLDivElement, NoticeProps >(
 							color: `notice.link.${ variant }.hover`,
 						},
 					},
+					ul: {
+						pl: 5,
+					},
 					...sx,
 				} }
 				className={ classNames( 'vip-notice-component', className ) }
 				ref={ forwardRef }
 				{ ...props }
 			>
-				<Flex
-					sx={ {
-						height: '100%', // required for the dynamic height of the icon box to work
-					} }
-				>
-					<Box sx={ { minWidth: '32px', mr: 3, mt: 0 } }>
-						<Flex
+				<Box sx={ { minWidth: '24px' } }>
+					<Flex
+						sx={ {
+							flexDirection: 'column', // the trick here is to have a flex column with the icon at the bottom and an empty div that fills the space
+							minHeight: '24px',
+							maxHeight: '32px', // we're forcing the max height so that the icon is, at max, aligned between the first and the second line of text
+							alignItems: 'flex-end', // we want the icon to be aligned to the bottom
+							height: '100%', // specifying the height will allow the box to match the height of the content.
+						} }
+					>
+						<Box
+							sx={ {
+								flex: '1 100%', // we need this empty div to make the icon align to the bottom
+							} }
+						></Box>
+						<NoticeIcon color={ `notice.icon.${ variant }` } variant={ variant } />
+					</Flex>
+				</Box>
+				<Box>
+					{ title && (
+						<Heading
+							as={ headingVariant }
 							sx={ {
-								flexDirection: 'column', // the trick here is to have a flex column with the icon at the bottom and an empty div that fills the space
-								minHeight: '20px',
-								maxHeight: '32px', // we're forcing the max height so that the icon is, at max, aligned between the first and the second line of text
-								alignItems: 'flex-end', // we want the icon to be aligned to the bottom
-								height: '100%', // specifying the height will allow the box to match the height of the content.
+								color: `notice.text.${ variant }`,
+								mb: 0,
+								fontSize: 2,
+								fontWeight: 'bold',
 							} }
 						>
-							<Box
-								sx={ {
-									flex: '1 100%', // we need this empty div to make the icon align to the bottom
-								} }
-							></Box>
-							<NoticeIcon color={ `notice.icon.${ variant }` } variant={ variant } />
-						</Flex>
-					</Box>
-					<Box>
-						{ title && (
-							<Heading
-								as={ headingVariant }
-								sx={ {
-									color: `notice.text.${ variant }`,
-									mb: 0,
-									fontSize: 2,
-									fontWeight: 'bold',
-								} }
-							>
-								{ title }
-							</Heading>
-						) }
-						{ children }
-					</Box>
-				</Flex>
+							{ title }
+						</Heading>
+					) }
+					{ children }
+				</Box>
 			</Card>
 		);
 	}

package/src/system/Wizard/WizardStep.tsx

@@ -88,7 +88,6 @@ export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
 				sx={ {
 					boxShadow: active ? 'low' : 'none',
 					borderLeft: '2px solid',
-					p: 4,
 					backgroundColor: active ? 'background' : 'transparent',
 					borderRadius: 0,
 					borderBottom: active ? 'none' : '1px solid',

package/src/system/theme/index.js

@@ -250,36 +250,49 @@ export default {
 
 	cards: {
 		primary: {
-			borderRadius: 2,
 			backgroundColor: 'layer.2',
+			borderRadius: 2,
 			boxShadow: 'low',
 			header: {
 				backgroundColor: 'layer.1',
 				borderTopLeftRadius: 2,
 				borderTopRightRadius: 2,
-				p: 3,
+				py: 3,
+				px: 5,
+				gap: 2,
 				fontWeight: 'bold',
 				display: 'flex',
+				minHeight: 46,
 			},
 			children: {
-				p: 3,
+				padding: 5,
+				gap: 6,
 			},
 		},
 		secondary: {
-			borderRadius: 2,
-			boxShadow: 'none',
+			variant: 'cards.primary',
 			border: '1px solid',
 			borderColor: 'borders.2',
+			boxShadow: 'none',
 			header: {
-				backgroundColor: 'layer.1',
-				borderTopLeftRadius: 2,
-				borderTopRightRadius: 2,
-				p: 3,
-				fontWeight: 'bold',
-				display: 'flex',
+				variant: 'cards.primary.header',
 			},
 			children: {
-				p: 3,
+				variant: 'cards.primary.children',
+			},
+		},
+		notice: {
+			boxShadow: 'none',
+			borderRadius: 2,
+			fontSize: 2,
+			padding: 0,
+			children: {
+				height: '100%',
+				display: 'flex',
+				flexDirection: 'row',
+				py: 3,
+				px: 4,
+				gap: 4,
 			},
 		},
 		indent: {