@autoguru/overdrive 4.53.1 → 4.54.1

package/dist/components/MarkdownRenderer/MarkdownRenderer.css.d.ts

@@ -1,2 +1,23 @@
-export declare const root: string;
+import { cssLayerComponent } from '../../styles/layers.css';
+export declare const rootBase: string;
+export declare const rootDensity: import("@vanilla-extract/recipes").RuntimeFn<{
+    density: {
+        comfortable: {
+            '@layer': {
+                [cssLayerComponent]: {
+                    fontSize: `var(--${string})`;
+                    lineHeight: `var(--${string})`;
+                };
+            };
+        };
+        compact: {
+            '@layer': {
+                [cssLayerComponent]: {
+                    fontSize: `var(--${string})`;
+                    lineHeight: `var(--${string})`;
+                };
+            };
+        };
+    };
+}>;
 //# sourceMappingURL=MarkdownRenderer.css.d.ts.map

package/dist/components/MarkdownRenderer/MarkdownRenderer.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownRenderer.css.d.ts","sourceRoot":"","sources":["../../../lib/components/MarkdownRenderer/MarkdownRenderer.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,QASf,CAAC"}
+{"version":3,"file":"MarkdownRenderer.css.d.ts","sourceRoot":"","sources":["../../../lib/components/MarkdownRenderer/MarkdownRenderer.css.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAG5D,eAAO,MAAM,QAAQ,QAOnB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;gBAKnB,CAAC,iBAAiB,CAAC;;;kBAGlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;kBAGlB;;;;EAQJ,CAAC"}

package/dist/components/MarkdownRenderer/MarkdownRenderer.css.js

@@ -1,22 +1,54 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/MarkdownRenderer/MarkdownRenderer.css.ts", "@autoguru/overdrive");
 import { globalStyle, style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
 import { cssLayerComponent } from "../../styles/layers.css.js";
 import { overdriveTokens as tokens } from "../../themes/theme.css.js";
-export const root = style({
+export const rootBase = style({
   '@layer': {
     [cssLayerComponent]: {
       fontFamily: tokens.typography.fontFamily,
-      fontSize: tokens.typography.size[4].fontSize,
-      lineHeight: tokens.typography.size[4].lineHeight,
       wordBreak: 'break-word'
     }
   }
-}, "root");
-globalStyle(`${root} > *:first-child`, {
-  marginTop: '0 !important'
+}, "rootBase");
+export const rootDensity = recipe({
+  variants: {
+    density: {
+      comfortable: {
+        '@layer': {
+          [cssLayerComponent]: {
+            fontSize: tokens.typography.size[4].fontSize,
+            lineHeight: tokens.typography.size[4].lineHeight
+          }
+        }
+      },
+      compact: {
+        '@layer': {
+          [cssLayerComponent]: {
+            fontSize: tokens.typography.size[3].fontSize,
+            lineHeight: tokens.typography.size[3].lineHeight
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    density: 'comfortable'
+  }
+}, "rootDensity");
+globalStyle(`${rootBase} > *:first-child`, {
+  '@layer': {
+    [cssLayerComponent]: {
+      marginTop: 0
+    }
+  }
 });
-globalStyle(`${root} > *:last-child`, {
-  marginBottom: '0 !important'
+globalStyle(`${rootBase} > *:last-child`, {
+  '@layer': {
+    [cssLayerComponent]: {
+      marginBottom: 0
+    }
+  }
 });
 __vanilla_filescope__.endFileScope();

package/dist/components/MarkdownRenderer/MarkdownRenderer.d.ts

@@ -1,14 +1,24 @@
 import type { ClassValue as ClassName } from 'clsx';
 import React from 'react';
 import type { TestIdProp } from '../../types';
+import type { MarkdownRendererDensity } from './MarkdownRendererContext';
 export interface MarkdownRendererProps extends TestIdProp {
     /** The markdown string to render */
     content: string;
     /** Optional additional class name */
     className?: ClassName;
+    /**
+     * Controls the visual density of the rendered markdown.
+     *
+     * - `'comfortable'` (default): Full-size typography and spacing, suitable for
+     *   page-level content.
+     * - `'compact'`: Reduced typography and tighter spacing, optimised for
+     *   widget and sidebar contexts where space is constrained.
+     */
+    density?: MarkdownRendererDensity;
 }
 /**
- * Renders GitHub Flavored Markdown content using Overdrive design tokens and components.
+ * Renders GitHub Flavoured Markdown content using Overdrive design tokens and components.
  */
 export declare const MarkdownRenderer: React.ForwardRefExoticComponent<MarkdownRendererProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=MarkdownRenderer.d.ts.map

package/dist/components/MarkdownRenderer/MarkdownRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownRenderer.d.ts","sourceRoot":"","sources":["../../../lib/components/MarkdownRenderer/MarkdownRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,IAAI,SAAS,EAAE,MAAM,MAAM,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM9C,MAAM,WAAW,qBAAsB,SAAQ,UAAU;IACxD,oCAAoC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,qCAAqC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC;CACtB;AAID;;GAEG;AACH,eAAO,MAAM,gBAAgB,8FAsB3B,CAAC"}
+{"version":3,"file":"MarkdownRenderer.d.ts","sourceRoot":"","sources":["../../../lib/components/MarkdownRenderer/MarkdownRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,IAAI,SAAS,EAAE,MAAM,MAAM,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI9C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAIzE,MAAM,WAAW,qBAAsB,SAAQ,UAAU;IACxD,oCAAoC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,qCAAqC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,uBAAuB,CAAC;CAClC;AAID;;GAEG;AACH,eAAO,MAAM,gBAAgB,8FA4B3B,CAAC"}

package/dist/components/MarkdownRenderer/MarkdownRenderer.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["content", "className", "testId"];
+const _excluded = ["content", "className", "density", "testId"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -8,17 +8,19 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { useBox } from "../Box/useBox/useBox.js";
 import * as styles from "./MarkdownRenderer.css.js";
+import { MarkdownRendererDensityProvider } from "./MarkdownRendererContext.js";
 import { createComponentMap } from "./components/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const componentMap = createComponentMap();
 
 /**
- * Renders GitHub Flavored Markdown content using Overdrive design tokens and components.
+ * Renders GitHub Flavoured Markdown content using Overdrive design tokens and components.
  */
 export const MarkdownRenderer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       content,
       className,
+      density = 'comfortable',
       testId
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -27,17 +29,22 @@ export const MarkdownRenderer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     componentProps
   } = useBox(_objectSpread(_objectSpread({}, props), {}, {
     as: 'div',
-    className: [styles.root, className],
+    className: [styles.rootBase, styles.rootDensity({
+      density
+    }), className],
     odComponent: 'markdown-renderer',
     testId
   }));
-  return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
-    ref: ref,
-    children: /*#__PURE__*/_jsx(ReactMarkdown, {
-      remarkPlugins: [remarkGfm],
-      components: componentMap,
-      children: content
-    })
-  }));
+  return /*#__PURE__*/_jsx(MarkdownRendererDensityProvider, {
+    value: density,
+    children: /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
+      ref: ref,
+      children: /*#__PURE__*/_jsx(ReactMarkdown, {
+        remarkPlugins: [remarkGfm],
+        components: componentMap,
+        children: content
+      })
+    }))
+  });
 });
 MarkdownRenderer.displayName = 'MarkdownRenderer';

package/dist/components/MarkdownRenderer/MarkdownRendererContext.d.ts

@@ -0,0 +1,4 @@
+export type MarkdownRendererDensity = 'comfortable' | 'compact';
+export declare const MarkdownRendererDensityProvider: import("react").Provider<MarkdownRendererDensity>;
+export declare const useMarkdownRendererDensity: () => MarkdownRendererDensity;
+//# sourceMappingURL=MarkdownRendererContext.d.ts.map

package/dist/components/MarkdownRenderer/MarkdownRendererContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownRendererContext.d.ts","sourceRoot":"","sources":["../../../lib/components/MarkdownRenderer/MarkdownRendererContext.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,uBAAuB,GAAG,aAAa,GAAG,SAAS,CAAC;AAKhE,eAAO,MAAM,+BAA+B,mDACJ,CAAC;AAEzC,eAAO,MAAM,0BAA0B,QAAO,uBACH,CAAC"}

package/dist/components/MarkdownRenderer/MarkdownRendererContext.js

@@ -0,0 +1,4 @@
+import { createContext, useContext } from 'react';
+const markdownRendererDensityContext = /*#__PURE__*/createContext('comfortable');
+export const MarkdownRendererDensityProvider = markdownRendererDensityContext.Provider;
+export const useMarkdownRendererDensity = () => useContext(markdownRendererDensityContext);

package/dist/components/MarkdownRenderer/components/MarkdownBlockquote.css.d.ts

@@ -1,2 +1,24 @@
-export declare const blockquote: string;
+import { cssLayerComponent } from '../../../styles/layers.css';
+export declare const blockquote: import("@vanilla-extract/recipes").RuntimeFn<{
+    density: {
+        comfortable: {
+            '@layer': {
+                [cssLayerComponent]: {
+                    marginBottom: `var(--${string})`;
+                    marginTop: `var(--${string})`;
+                    padding: `var(--${string})`;
+                };
+            };
+        };
+        compact: {
+            '@layer': {
+                [cssLayerComponent]: {
+                    marginBottom: `var(--${string})`;
+                    marginTop: `var(--${string})`;
+                    padding: `var(--${string})`;
+                };
+            };
+        };
+    };
+}>;
 //# sourceMappingURL=MarkdownBlockquote.css.d.ts.map

package/dist/components/MarkdownRenderer/components/MarkdownBlockquote.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownBlockquote.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownBlockquote.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU,QAcrB,CAAC"}
+{"version":3,"file":"MarkdownBlockquote.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownBlockquote.css.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG/D,eAAO,MAAM,UAAU;;;;gBAgBlB,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;EAQJ,CAAC"}

package/dist/components/MarkdownRenderer/components/MarkdownBlockquote.css.js

@@ -1,21 +1,44 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/MarkdownRenderer/components/MarkdownBlockquote.css.ts", "@autoguru/overdrive");
-import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
 import { cssLayerComponent } from "../../../styles/layers.css.js";
 import { overdriveTokens as tokens } from "../../../themes/theme.css.js";
-export const blockquote = style({
-  '@layer': {
-    [cssLayerComponent]: {
-      backgroundColor: tokens.color.gamut.gray[100],
-      borderLeft: `${tokens.border.width['3']} solid ${tokens.color.gamut.gray[400]}`,
-      color: tokens.color.gamut.gray[700],
-      marginBottom: tokens.space[3],
-      marginLeft: 0,
-      marginRight: 0,
-      marginTop: tokens.space[3],
-      padding: tokens.space[4],
-      paddingLeft: tokens.space[4]
+export const blockquote = recipe({
+  base: {
+    '@layer': {
+      [cssLayerComponent]: {
+        backgroundColor: tokens.color.gamut.gray[100],
+        borderLeft: `${tokens.border.width['3']} solid ${tokens.color.gamut.gray[400]}`,
+        color: tokens.color.gamut.gray[700],
+        marginLeft: 0,
+        marginRight: 0
+      }
     }
+  },
+  variants: {
+    density: {
+      comfortable: {
+        '@layer': {
+          [cssLayerComponent]: {
+            marginBottom: tokens.space[3],
+            marginTop: tokens.space[3],
+            padding: tokens.space[4]
+          }
+        }
+      },
+      compact: {
+        '@layer': {
+          [cssLayerComponent]: {
+            marginBottom: tokens.space[2],
+            marginTop: tokens.space[2],
+            padding: tokens.space[2]
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    density: 'comfortable'
   }
 }, "blockquote");
 __vanilla_filescope__.endFileScope();

package/dist/components/MarkdownRenderer/components/MarkdownBlockquote.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownBlockquote.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownBlockquote.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9C,MAAM,WAAW,uBAAuB;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED,eAAO,MAAM,kBAAkB;0CAI5B,uBAAuB;;CAIzB,CAAC"}
+{"version":3,"file":"MarkdownBlockquote.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownBlockquote.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAM9C,MAAM,WAAW,uBAAuB;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED,eAAO,MAAM,kBAAkB;0CAI5B,uBAAuB;;CAWzB,CAAC"}

package/dist/components/MarkdownRenderer/components/MarkdownBlockquote.js

@@ -4,6 +4,7 @@ const _excluded = ["children", "node"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
+import { useMarkdownRendererDensity } from "../MarkdownRendererContext.js";
 import * as styles from "./MarkdownBlockquote.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const MarkdownBlockquote = _ref => {
@@ -12,8 +13,11 @@ export const MarkdownBlockquote = _ref => {
       node: _node
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
+  const density = useMarkdownRendererDensity();
   return /*#__PURE__*/_jsx("blockquote", _objectSpread(_objectSpread({
-    className: styles.blockquote
+    className: styles.blockquote({
+      density
+    })
   }, props), {}, {
     children: children
   }));

package/dist/components/MarkdownRenderer/components/MarkdownCodeBlock.css.d.ts

@@ -1,3 +1,29 @@
-export declare const codeBlock: string;
+import { cssLayerComponent } from '../../../styles/layers.css';
+export declare const codeBlock: import("@vanilla-extract/recipes").RuntimeFn<{
+    density: {
+        comfortable: {
+            '@layer': {
+                [cssLayerComponent]: {
+                    fontSize: `var(--${string})`;
+                    lineHeight: `var(--${string})`;
+                    marginBottom: `var(--${string})`;
+                    marginTop: `var(--${string})`;
+                    padding: `var(--${string})`;
+                };
+            };
+        };
+        compact: {
+            '@layer': {
+                [cssLayerComponent]: {
+                    fontSize: `var(--${string})`;
+                    lineHeight: `var(--${string})`;
+                    marginBottom: `var(--${string})`;
+                    marginTop: `var(--${string})`;
+                    padding: `var(--${string})`;
+                };
+            };
+        };
+    };
+}>;
 export declare const codeBlockInner: string;
 //# sourceMappingURL=MarkdownCodeBlock.css.d.ts.map

package/dist/components/MarkdownRenderer/components/MarkdownCodeBlock.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownCodeBlock.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownCodeBlock.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,QAepB,CAAC;AAEH,eAAO,MAAM,cAAc,QASzB,CAAC"}
+{"version":3,"file":"MarkdownCodeBlock.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownCodeBlock.css.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG/D,eAAO,MAAM,SAAS;;;;gBAgBjB,CAAC,iBAAiB,CAAC;;;;;;kBAMlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAMlB;;;;EAQJ,CAAC;AAEH,eAAO,MAAM,cAAc,QASzB,CAAC"}

package/dist/components/MarkdownRenderer/components/MarkdownCodeBlock.css.js

@@ -1,22 +1,49 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/MarkdownRenderer/components/MarkdownCodeBlock.css.ts", "@autoguru/overdrive");
 import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
 import { cssLayerComponent } from "../../../styles/layers.css.js";
 import { overdriveTokens as tokens } from "../../../themes/theme.css.js";
-export const codeBlock = style({
-  '@layer': {
-    [cssLayerComponent]: {
-      backgroundColor: tokens.color.gamut.gray[900],
-      borderRadius: tokens.border.radius.md,
-      color: tokens.color.gamut.white,
-      fontFamily: tokens.typography.fontFamilyMono,
-      fontSize: tokens.typography.size[3].fontSize,
-      lineHeight: tokens.typography.size[3].lineHeight,
-      marginBottom: tokens.space[3],
-      marginTop: tokens.space[3],
-      overflowX: 'auto',
-      padding: tokens.space[4]
+export const codeBlock = recipe({
+  base: {
+    '@layer': {
+      [cssLayerComponent]: {
+        backgroundColor: tokens.color.gamut.gray[900],
+        borderRadius: tokens.border.radius.md,
+        color: tokens.color.gamut.white,
+        fontFamily: tokens.typography.fontFamilyMono,
+        overflowX: 'auto'
+      }
+    }
+  },
+  variants: {
+    density: {
+      comfortable: {
+        '@layer': {
+          [cssLayerComponent]: {
+            fontSize: tokens.typography.size[3].fontSize,
+            lineHeight: tokens.typography.size[3].lineHeight,
+            marginBottom: tokens.space[3],
+            marginTop: tokens.space[3],
+            padding: tokens.space[4]
+          }
+        }
+      },
+      compact: {
+        '@layer': {
+          [cssLayerComponent]: {
+            fontSize: tokens.typography.size[2].fontSize,
+            lineHeight: tokens.typography.size[2].lineHeight,
+            marginBottom: tokens.space[2],
+            marginTop: tokens.space[2],
+            padding: tokens.space[2]
+          }
+        }
+      }
     }
+  },
+  defaultVariants: {
+    density: 'comfortable'
   }
 }, "codeBlock");
 export const codeBlockInner = style({

package/dist/components/MarkdownRenderer/components/MarkdownCodeBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownCodeBlock.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownCodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9C,MAAM,WAAW,sBAAsB;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED,eAAO,MAAM,iBAAiB;0CAI3B,sBAAsB;;CAcxB,CAAC"}
+{"version":3,"file":"MarkdownCodeBlock.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownCodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAM9C,MAAM,WAAW,sBAAsB;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED,eAAO,MAAM,iBAAiB;0CAI3B,sBAAsB;;CAkBxB,CAAC"}

package/dist/components/MarkdownRenderer/components/MarkdownCodeBlock.js

@@ -4,6 +4,7 @@ const _excluded = ["children", "node"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
+import { useMarkdownRendererDensity } from "../MarkdownRendererContext.js";
 import * as styles from "./MarkdownCodeBlock.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const MarkdownCodeBlock = _ref => {
@@ -12,8 +13,11 @@ export const MarkdownCodeBlock = _ref => {
       node: _node
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
+  const density = useMarkdownRendererDensity();
   return /*#__PURE__*/_jsx("pre", _objectSpread(_objectSpread({
-    className: styles.codeBlock
+    className: styles.codeBlock({
+      density
+    })
   }, props), {}, {
     children: React.Children.map(children, child => {
       if (/*#__PURE__*/React.isValidElement(child) && child.type === 'code') {

package/dist/components/MarkdownRenderer/components/MarkdownHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownHeading.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAM9C,MAAM,WAAW,oBAAoB;IACpC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAyBD,eAAO,MAAM,UAAU;0CATnB,oBAAoB;;CAS8B,CAAC;AACvD,eAAO,MAAM,UAAU;0CAVnB,oBAAoB;;CAU8B,CAAC;AACvD,eAAO,MAAM,UAAU;0CAXnB,oBAAoB;;CAW8B,CAAC;AACvD,eAAO,MAAM,UAAU;0CAZnB,oBAAoB;;CAY8B,CAAC;AACvD,eAAO,MAAM,UAAU;0CAbnB,oBAAoB;;CAa8B,CAAC;AACvD,eAAO,MAAM,UAAU;0CAdnB,oBAAoB;;CAc8B,CAAC"}
+{"version":3,"file":"MarkdownHeading.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ9C,MAAM,WAAW,oBAAoB;IACpC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAuDD,eAAO,MAAM,UAAU;0CArBnB,oBAAoB;;CAqB8B,CAAC;AACvD,eAAO,MAAM,UAAU;0CAtBnB,oBAAoB;;CAsB8B,CAAC;AACvD,eAAO,MAAM,UAAU;0CAvBnB,oBAAoB;;CAuB8B,CAAC;AACvD,eAAO,MAAM,UAAU;0CAxBnB,oBAAoB;;CAwB8B,CAAC;AACvD,eAAO,MAAM,UAAU;0CAzBnB,oBAAoB;;CAyB8B,CAAC;AACvD,eAAO,MAAM,UAAU;0CA1BnB,oBAAoB;;CA0B8B,CAAC"}

package/dist/components/MarkdownRenderer/components/MarkdownHeading.js

@@ -5,27 +5,47 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import { Heading } from "../../Heading/Heading.js";
+import { useMarkdownRendererDensity } from "../MarkdownRendererContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const comfortableSizeMap = {
+  h1: '9',
+  h2: '8',
+  h3: '7',
+  h4: '6',
+  h5: '5',
+  h6: '4'
+};
+const compactSizeMap = {
+  h1: '4',
+  h2: '4',
+  h3: '3',
+  h4: '3',
+  h5: '3',
+  h6: '3'
+};
+const compactWeightMap = {
+  h1: 'bold',
+  h2: 'bold',
+  h3: 'bold',
+  h4: 'semiBold',
+  h5: 'semiBold',
+  h6: 'semiBold'
+};
 function createHeadingComponent(level) {
-  const sizeMap = {
-    h1: '9',
-    h2: '8',
-    h3: '7',
-    h4: '6',
-    h5: '5',
-    h6: '4'
-  };
   const Component = _ref => {
     let {
         children,
         node: _node
       } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
+    const density = useMarkdownRendererDensity();
+    const isCompact = density === 'compact';
     return /*#__PURE__*/_jsx(Heading, _objectSpread(_objectSpread({
       as: level,
-      size: sizeMap[level],
-      mb: "3",
-      mt: "5"
+      size: isCompact ? compactSizeMap[level] : comfortableSizeMap[level],
+      weight: isCompact ? compactWeightMap[level] : 'bold',
+      mt: isCompact ? '3' : '5',
+      mb: isCompact ? '1' : '3'
     }, props), {}, {
       children: children
     }));

package/dist/components/MarkdownRenderer/components/MarkdownHorizontalRule.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownHorizontalRule.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownHorizontalRule.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,2BAA2B;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED,eAAO,MAAM,sBAAsB;gCAGhC,2BAA2B;;CAE7B,CAAC"}
+{"version":3,"file":"MarkdownHorizontalRule.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownHorizontalRule.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,2BAA2B;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED,eAAO,MAAM,sBAAsB;gCAGhC,2BAA2B;;CAW7B,CAAC"}

package/dist/components/MarkdownRenderer/components/MarkdownHorizontalRule.js

@@ -5,15 +5,21 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import { DividerLine } from "../../DividerLine/DividerLine.js";
+import { useMarkdownRendererDensity } from "../MarkdownRendererContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const MarkdownHorizontalRule = _ref => {
   let {
       node: _node
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsx(DividerLine, _objectSpread({
-    space: "4",
-    colour: "neutral"
-  }, props));
+  const density = useMarkdownRendererDensity();
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    role: "separator"
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx(DividerLine, {
+      space: density === 'compact' ? '2' : '4',
+      colour: "neutral"
+    })
+  }));
 };
 MarkdownHorizontalRule.displayName = 'MarkdownHorizontalRule';

package/dist/components/MarkdownRenderer/components/MarkdownInlineCode.css.d.ts

@@ -1,2 +1,20 @@
-export declare const inlineCode: string;
+import { cssLayerComponent } from '../../../styles/layers.css';
+export declare const inlineCode: import("@vanilla-extract/recipes").RuntimeFn<{
+    density: {
+        comfortable: {
+            '@layer': {
+                [cssLayerComponent]: {
+                    fontSize: `var(--${string})`;
+                };
+            };
+        };
+        compact: {
+            '@layer': {
+                [cssLayerComponent]: {
+                    fontSize: `var(--${string})`;
+                };
+            };
+        };
+    };
+}>;
 //# sourceMappingURL=MarkdownInlineCode.css.d.ts.map

package/dist/components/MarkdownRenderer/components/MarkdownInlineCode.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownInlineCode.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownInlineCode.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU,QAUrB,CAAC"}
+{"version":3,"file":"MarkdownInlineCode.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownInlineCode.css.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG/D,eAAO,MAAM,UAAU;;;;gBAelB,CAAC,iBAAiB,CAAC;;kBAElB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;kBAElB;;;;EAQJ,CAAC"}

package/dist/components/MarkdownRenderer/components/MarkdownInlineCode.css.js

@@ -1,17 +1,39 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/MarkdownRenderer/components/MarkdownInlineCode.css.ts", "@autoguru/overdrive");
-import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
 import { cssLayerComponent } from "../../../styles/layers.css.js";
 import { overdriveTokens as tokens } from "../../../themes/theme.css.js";
-export const inlineCode = style({
-  '@layer': {
-    [cssLayerComponent]: {
-      backgroundColor: tokens.color.gamut.gray[200],
-      borderRadius: tokens.border.radius.sm,
-      fontFamily: tokens.typography.fontFamilyMono,
-      fontSize: tokens.typography.size[3].fontSize,
-      padding: `${tokens.space[1]} ${tokens.space[1]}`
+export const inlineCode = recipe({
+  base: {
+    '@layer': {
+      [cssLayerComponent]: {
+        backgroundColor: tokens.color.gamut.gray[200],
+        borderRadius: tokens.border.radius.sm,
+        fontFamily: tokens.typography.fontFamilyMono,
+        padding: `${tokens.space[1]} ${tokens.space[1]}`
+      }
     }
+  },
+  variants: {
+    density: {
+      comfortable: {
+        '@layer': {
+          [cssLayerComponent]: {
+            fontSize: tokens.typography.size[3].fontSize
+          }
+        }
+      },
+      compact: {
+        '@layer': {
+          [cssLayerComponent]: {
+            fontSize: tokens.typography.size[2].fontSize
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    density: 'comfortable'
   }
 }, "inlineCode");
 __vanilla_filescope__.endFileScope();

package/dist/components/MarkdownRenderer/components/MarkdownInlineCode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownInlineCode.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownInlineCode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9C,MAAM,WAAW,uBAAuB;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED,eAAO,MAAM,kBAAkB;0CAI5B,uBAAuB;;CAIzB,CAAC"}
+{"version":3,"file":"MarkdownInlineCode.d.ts","sourceRoot":"","sources":["../../../../lib/components/MarkdownRenderer/components/MarkdownInlineCode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAM9C,MAAM,WAAW,uBAAuB;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED,eAAO,MAAM,kBAAkB;0CAI5B,uBAAuB;;CAQzB,CAAC"}