feat(pricing): add pattern (#4084)

* feat(pricing): create pattern page

* feat(pricing): add PricingCard

* feat(pricing): add VisualPickerExample

* feat(pricing): add table example

* feat(pricing): add examples to docs

* feat(pricing): update typedocs

* feat(pricing): update typedocs

* feat(pricing): update sitemap vrt

* feat(pricing): update typedocs

* feat(pricing): update typedocs

* feat(pricing): add max width

* feat(pricing): update typedocs

* feat(pricing): implement changes from review

* feat(pricing): update table alignment

* feat(pricing): remove size small

* feat(pricing): fix badge height

* feat(pricing): implement changes from review

* feat(pricing): update stories and docs

* fix(grid): fix rowGap and columnGap not applying

* fix(grid): add changeset

* feat(pricing): implement changes from review

* feat(pricing): implement changes from review

* feat(pricing): update text

* feat(pricing): implement changes from review

* feat(pricing): replace paragraph with text component

* feat(pricing): align all more info buttons to bottom

* feat(pricing): add image to doc page

* feat(pricing): implement changes from review

* feat(pricing): hide more info button on mobile

Author: PixeledCode

.changeset/four-worms-search.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/core": patch
+"@twilio-paste/grid": patch
+---
+
+[Grid]: Fix rowGap and columnGap prop not applying

cypress/integration/sitemap-vrt/constants.ts

@@ -303,6 +303,7 @@ export const SITEMAP = [
   "/patterns/empty-state/",
   "/patterns/error-state/",
   "/patterns/notifications-and-feedback/",
+  "/patterns/pricing/",
   "/patterns/privacy/",
   "/patterns/status/",
   "/primitives/combobox-primitive/",

packages/paste-core/layout/grid/src/Grid.tsx

@@ -74,6 +74,8 @@ const Grid = React.forwardRef<HTMLDivElement, GridProps>(
         marginTop={marginTop}
         marginBottom={marginBottom}
         minWidth="size0"
+        rowGap={props.rowGap}
+        columnGap={props.columnGap}
       >
         {GridColumns}
       </Box>

packages/paste-core/layout/grid/stories/index.stories.tsx

@@ -732,7 +732,7 @@ Grid2ColumnContentWithCard.storyName = "Grid - 2 Column Content with Card";
 export const GridEqualHeightColumns = (): React.ReactNode => {
   return (
     <>
-      <Grid gutter="space30" vertical={[true, true, false]} equalColumnHeights>
+      <Grid gutter="space30" rowGap="space30" vertical={[true, true, false]} equalColumnHeights>
         <Column span={4}>
           <Card padding="space70">
             <Heading as="h2" variant="heading20">