diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index 723e08859b..e98d57a13d 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -6,12 +6,12 @@
 /// <reference types="react" />
 
 import { CSSProperties } from 'react';
-import { JSXElementConstructor } from 'react';
+import { DOMElement } from 'react';
 import { default as React_2 } from 'react';
-import { ReactElement } from 'react';
+import { ReactNode } from 'react';
 
 // @public (undocumented)
-export type AlignItems =
+export type AlignItemsProps =
   | 'stretch'
   | 'flex-start'
   | 'center'
@@ -20,6 +20,25 @@ export type AlignItems =
       Record<Breakpoint, 'stretch' | 'flex-start' | 'center' | 'flex-end'>
     >;
 
+// @public (undocumented)
+export type AsProps =
+  | 'div'
+  | 'span'
+  | 'p'
+  | 'article'
+  | 'section'
+  | 'main'
+  | 'nav'
+  | 'aside'
+  | 'ul'
+  | 'ol'
+  | 'li'
+  | 'details'
+  | 'summary'
+  | 'dd'
+  | 'dl'
+  | 'dt';
+
 // @public (undocumented)
 export type Background =
   | 'background'
@@ -31,7 +50,7 @@ export type Background =
     >;
 
 // @public (undocumented)
-export type BorderRadius =
+export type BorderRadiusProps =
   | 'none'
   | 'small'
   | 'medium'
@@ -39,68 +58,35 @@ export type BorderRadius =
   | Partial<Record<Breakpoint, 'none' | 'small' | 'medium' | 'full'>>;
 
 // @public (undocumented)
-export const Box: (props: BoxProps) => ReactElement<
+export const Box: (props: BoxProps) => DOMElement<
   {
     className: string;
     style: CSSProperties | undefined;
+    children: ReactNode;
   },
-  string | JSXElementConstructor<any>
+  Element
 >;
 
 // @public (undocumented)
-export interface BoxProps {
+export interface BoxProps extends SpaceProps, ColorProps {
   // (undocumented)
-  alignItems?: AlignItems;
+  alignItems?: AlignItemsProps;
   // (undocumented)
   as?: keyof JSX.IntrinsicElements;
   // (undocumented)
-  background?: Background;
-  // (undocumented)
-  borderRadius?: BorderRadius;
+  borderRadius?: BorderRadiusProps;
   // (undocumented)
   children?: React.ReactNode;
   // (undocumented)
   className?: string;
   // (undocumented)
-  color?: Color;
+  display?: DisplayProps;
   // (undocumented)
-  display?: Display;
+  flexDirection?: FlexDirectionProps;
   // (undocumented)
-  flexDirection?: FlexDirection;
+  flexWrap?: FlexWrapProps;
   // (undocumented)
-  flexWrap?: FlexWrap;
-  // (undocumented)
-  gap?: Gap;
-  // (undocumented)
-  justifyContent?: JustifyContent;
-  // (undocumented)
-  margin?: Margin;
-  // (undocumented)
-  marginBottom?: MarginBottom;
-  // (undocumented)
-  marginLeft?: MarginLeft;
-  // (undocumented)
-  marginRight?: MarginRight;
-  // (undocumented)
-  marginTop?: MarginTop;
-  // (undocumented)
-  marginX?: MarginX;
-  // (undocumented)
-  marginY?: MarginY;
-  // (undocumented)
-  padding?: Padding;
-  // (undocumented)
-  paddingBottom?: PaddingBottom;
-  // (undocumented)
-  paddingLeft?: PaddingLeft;
-  // (undocumented)
-  paddingRight?: PaddingRight;
-  // (undocumented)
-  paddingTop?: PaddingTop;
-  // (undocumented)
-  paddingX?: PaddingX;
-  // (undocumented)
-  paddingY?: PaddingY;
+  justifyContent?: JustifyContentProps;
   // (undocumented)
   style?: React.CSSProperties;
 }
@@ -163,7 +149,15 @@ export type Color =
   | Partial<Record<Theme, 'primary' | 'secondary' | 'error'>>;
 
 // @public (undocumented)
-export type Display =
+export interface ColorProps {
+  // (undocumented)
+  background?: Background;
+  // (undocumented)
+  color?: Color;
+}
+
+// @public (undocumented)
+export type DisplayProps =
   | 'flex'
   | 'none'
   | 'inline'
@@ -171,13 +165,13 @@ export type Display =
   | Partial<Record<Breakpoint, 'flex' | 'none' | 'inline' | 'block'>>;
 
 // @public (undocumented)
-export type FlexDirection =
+export type FlexDirectionProps =
   | 'row'
   | 'column'
   | Partial<Record<Breakpoint, 'row' | 'column'>>;
 
 // @public (undocumented)
-export type FlexWrap =
+export type FlexWrapProps =
   | 'wrap'
   | 'nowrap'
   | Partial<Record<Breakpoint, 'wrap' | 'nowrap'>>;
@@ -203,7 +197,7 @@ export type IconNames =
   | 'trash';
 
 // @public (undocumented)
-export type JustifyContent =
+export type JustifyContentProps =
   | 'stretch'
   | 'flex-start'
   | 'center'
@@ -279,6 +273,40 @@ export const space: {
   xxl: string;
 };
 
+// @public (undocumented)
+export interface SpaceProps {
+  // (undocumented)
+  gap?: Gap;
+  // (undocumented)
+  margin?: Margin;
+  // (undocumented)
+  marginBottom?: MarginBottom;
+  // (undocumented)
+  marginLeft?: MarginLeft;
+  // (undocumented)
+  marginRight?: MarginRight;
+  // (undocumented)
+  marginTop?: MarginTop;
+  // (undocumented)
+  marginX?: MarginX;
+  // (undocumented)
+  marginY?: MarginY;
+  // (undocumented)
+  padding?: Padding;
+  // (undocumented)
+  paddingBottom?: PaddingBottom;
+  // (undocumented)
+  paddingLeft?: PaddingLeft;
+  // (undocumented)
+  paddingRight?: PaddingRight;
+  // (undocumented)
+  paddingTop?: PaddingTop;
+  // (undocumented)
+  paddingX?: PaddingX;
+  // (undocumented)
+  paddingY?: PaddingY;
+}
+
 // @public (undocumented)
 export type Theme = keyof typeof themes;
 
diff --git a/packages/canon/src/components/Box/docs/padding.tsx b/packages/canon/src/components/Box/docs/padding.tsx
index 3f78f56692..486b1bcec5 100644
--- a/packages/canon/src/components/Box/docs/padding.tsx
+++ b/packages/canon/src/components/Box/docs/padding.tsx
@@ -15,7 +15,6 @@
  */
 
 import React from 'react';
-import { Stack } from '../../Stack';
 import { Inline } from '../../Inline';
 import { Box } from '../Box';
 
@@ -32,8 +31,11 @@ const FakeBox = ({ children }: { children: string }) => (
 
 export const Padding = () => {
   return (
-    <Stack
-      align="center"
+    <Box
+      display="flex"
+      justifyContent="center"
+      flexDirection="column"
+      alignItems="center"
       borderRadius="small"
       marginBottom="md"
       gap="xl"
@@ -41,65 +43,65 @@ export const Padding = () => {
       style={{ border: '1px solid #e7e7e7' }}
     >
       <Inline align="center" gap="xl">
-        <Stack
-          align="center"
+        <Box
+          alignItems="center"
           borderRadius="small"
           padding="md"
           style={{ background: '#c4cafb', color: 'white' }}
         >
           <FakeBox>padding</FakeBox>
-        </Stack>
-        <Stack
-          align="center"
+        </Box>
+        <Box
+          alignItems="center"
           borderRadius="small"
           paddingX="md"
           style={{ background: '#c4cafb', color: 'white' }}
         >
           <FakeBox>paddingX</FakeBox>
-        </Stack>
-        <Stack
-          align="center"
+        </Box>
+        <Box
+          alignItems="center"
           borderRadius="small"
           paddingY="md"
           style={{ background: '#c4cafb', color: 'white' }}
         >
           <FakeBox>paddingY</FakeBox>
-        </Stack>
+        </Box>
       </Inline>
       <Inline align="center" gap="xl">
-        <Stack
-          align="center"
+        <Box
+          alignItems="center"
           borderRadius="small"
           paddingTop="md"
           style={{ background: '#c4cafb', color: 'white' }}
         >
           <FakeBox>paddingTop</FakeBox>
-        </Stack>
-        <Stack
-          align="center"
+        </Box>
+        <Box
+          alignItems="center"
           borderRadius="small"
           paddingBottom="md"
           style={{ background: '#c4cafb', color: 'white' }}
         >
           <FakeBox>paddingBottom</FakeBox>
-        </Stack>
-        <Stack
-          align="center"
+        </Box>
+        <Box
+          alignItems="center"
           borderRadius="small"
           paddingLeft="md"
           style={{ background: '#c4cafb', color: 'white' }}
         >
           <FakeBox>paddingLeft</FakeBox>
-        </Stack>
-        <Stack
-          align="center"
+        </Box>
+        <Box
+          alignItems="center"
           borderRadius="small"
           paddingRight="md"
           style={{ background: '#c4cafb', color: 'white' }}
         >
           <FakeBox>paddingRight</FakeBox>
-        </Stack>
+        </Box>
       </Inline>
-    </Stack>
+    </Box>
   );
 };
diff --git a/packages/canon/src/index.ts b/packages/canon/src/index.ts
index 2bd3f11f48..198a626f06 100644
--- a/packages/canon/src/index.ts
+++ b/packages/canon/src/index.ts
@@ -23,3 +23,4 @@
 export * from './components/Button';
 export * from './components/Box';
 export * from './components/Icon';
+export * from './layout/types';