From a8678c16275dc3b068b960c62cc008f308a6ac44 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 28 Jan 2025 08:56:37 +0000
Subject: [PATCH 1/9] chore(deps): update actions/setup-python digest to
 4237552

Signed-off-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 .github/workflows/verify_microsite.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/verify_microsite.yml b/.github/workflows/verify_microsite.yml
index c4a2934c57..aea90613ca 100644
--- a/.github/workflows/verify_microsite.yml
+++ b/.github/workflows/verify_microsite.yml
@@ -34,7 +34,7 @@ jobs:
         uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
         with:
           node-version: 20.x
-      - uses: actions/setup-python@0b93645e9fea7318ecaed2b359559ac225c90a2b # v5
+      - uses: actions/setup-python@42375524e23c412d93fb67b49958b491fce71c38 # v5
         with:
           python-version: '3.9'
 

From 1cc1ae24bda2c7e7ed731ddaf20b7d5f542edaf1 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Fri, 7 Feb 2025 11:12:15 +0000
Subject: [PATCH 2/9] chore(deps): update dependency @types/http-proxy to
 v1.17.16

Signed-off-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 94746fde49..7910879bfa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19845,11 +19845,11 @@ __metadata:
   linkType: hard
 
 "@types/http-proxy@npm:^1.17.15, @types/http-proxy@npm:^1.17.4, @types/http-proxy@npm:^1.17.8":
-  version: 1.17.15
-  resolution: "@types/http-proxy@npm:1.17.15"
+  version: 1.17.16
+  resolution: "@types/http-proxy@npm:1.17.16"
   dependencies:
     "@types/node": "*"
-  checksum: d96eaf4e22232b587b46256b89c20525c453216684481015cf50fb385b0b319b883749ccb77dee9af57d107e8440cdacd56f4234f65176d317e9777077ff5bf3
+  checksum: f5ab4afe7e3feba9d87bdddbf44e03d9a836bd2cdab679a794badbff7c4bfb6bebf46bfe22d9964eb1820e1349f2ff7807cccb20fd27cb17f03db849289e5892
   languageName: node
   linkType: hard
 

From d7c63f5de3f467d8f1dbfeba0aafe806f1eec65a Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 7 Feb 2025 11:19:36 +0000
Subject: [PATCH 3/9] Improve docs website

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../(playground)/playground/styles.module.css |  4 +-
 canon-docs/src/app/layout.tsx                 |  5 +-
 canon-docs/src/app/providers.tsx              |  2 +-
 .../src/components/CodeBlock/client.tsx       |  2 +-
 .../components/CodeBlock/styles.module.css    |  6 +-
 .../components/CustomTheme/customTheme.tsx    |  4 +-
 .../components/CustomTheme/styles.module.css  | 16 ++--
 .../src/components/HeadlessBanners/BaseUI.tsx |  2 +-
 .../HeadlessBanners/styles.module.css         | 10 +--
 .../components/IconLibrary/IconLibrary.tsx    |  4 +-
 .../components/IconLibrary/styles.module.css  |  4 +-
 .../src/components/PropsTable/PropsTable.tsx  |  2 +-
 .../src/components/Sidebar/Sidebar.module.css | 83 +++++++++++++++----
 canon-docs/src/components/Sidebar/docs.tsx    |  8 +-
 canon-docs/src/components/Sidebar/index.tsx   | 46 ++++++----
 .../src/components/Sidebar/playground.tsx     | 10 +--
 .../src/components/Snippet/styles.module.css  |  6 +-
 .../src/components/Table/styles.module.css    | 10 +--
 canon-docs/src/components/Tabs/parts.tsx      |  6 +-
 .../src/components/Tabs/styles.module.css     |  4 +-
 .../src/components/Toolbar/nav.module.css     | 21 ++---
 .../src/components/Toolbar/styles.module.css  |  7 +-
 .../components/Toolbar/theme-name.module.css  | 15 ++--
 .../src/components/Toolbar/theme.module.css   | 26 +++---
 canon-docs/src/{app => css}/globals.css       | 42 +++++++---
 canon-docs/src/css/mdx.module.css             | 32 +++++++
 canon-docs/src/{app => css}/page.module.css   |  5 +-
 canon-docs/src/mdx-components.tsx             | 64 +++-----------
 canon-docs/src/snippets/box.tsx               |  2 +-
 canon-docs/src/snippets/button.tsx            |  2 +-
 canon-docs/src/snippets/checkbox.tsx          |  2 +-
 canon-docs/src/snippets/container.tsx         |  3 +-
 canon-docs/src/snippets/field.tsx             |  2 +-
 canon-docs/src/snippets/flex.tsx              |  2 +-
 canon-docs/src/snippets/grid.tsx              |  3 +-
 canon-docs/src/snippets/heading.tsx           |  2 +-
 canon-docs/src/snippets/icon.tsx              |  2 +-
 canon-docs/src/snippets/inline.tsx            |  7 +-
 canon-docs/src/snippets/input.tsx             |  2 +-
 canon-docs/src/snippets/text.tsx              |  2 +-
 40 files changed, 274 insertions(+), 203 deletions(-)
 rename canon-docs/src/{app => css}/globals.css (60%)
 create mode 100644 canon-docs/src/css/mdx.module.css
 rename canon-docs/src/{app => css}/page.module.css (88%)

diff --git a/canon-docs/src/app/(playground)/playground/styles.module.css b/canon-docs/src/app/(playground)/playground/styles.module.css
index 8fdd79a1dd..026e8a1bd4 100644
--- a/canon-docs/src/app/(playground)/playground/styles.module.css
+++ b/canon-docs/src/app/(playground)/playground/styles.module.css
@@ -30,7 +30,7 @@
 .breakpointContent {
   height: 100%;
   border-radius: 4px;
-  border: 1px solid var(--canon-border);
-  background-color: var(--canon-bg);
+  border: 1px solid var(--border);
+  background-color: var(--bg);
   padding: 16px;
 }
diff --git a/canon-docs/src/app/layout.tsx b/canon-docs/src/app/layout.tsx
index 99b5f22739..b32622e4ae 100644
--- a/canon-docs/src/app/layout.tsx
+++ b/canon-docs/src/app/layout.tsx
@@ -3,12 +3,11 @@ import { Sidebar } from '../components/Sidebar';
 import { Toolbar } from '@/components/Toolbar';
 import { Providers } from './providers';
 import { CustomTheme } from '@/components/CustomTheme';
-import styles from './page.module.css';
+import styles from '../css/page.module.css';
 
-import './globals.css';
+import '../css/globals.css';
 import '/public/core.css';
 import '/public/components.css';
-import '/public/backstage.css';
 
 export const metadata: Metadata = {
   title: 'Canon',
diff --git a/canon-docs/src/app/providers.tsx b/canon-docs/src/app/providers.tsx
index 81a18136e8..508d40b7df 100644
--- a/canon-docs/src/app/providers.tsx
+++ b/canon-docs/src/app/providers.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { ReactNode } from 'react';
-import { CanonProvider } from '../../../packages/canon/src/contexts/canon';
+import { CanonProvider } from '@backstage/canon';
 import { PlaygroundProvider } from '@/utils/playground-context';
 
 export const Providers = ({ children }: { children: ReactNode }) => {
diff --git a/canon-docs/src/components/CodeBlock/client.tsx b/canon-docs/src/components/CodeBlock/client.tsx
index 27f5bc1a02..d170bafabf 100644
--- a/canon-docs/src/components/CodeBlock/client.tsx
+++ b/canon-docs/src/components/CodeBlock/client.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { CodeBlockProps } from '.';
-import { Text } from '../../../../packages/canon';
+import { Text } from '@backstage/canon';
 import styles from './styles.module.css';
 
 export const CodeBlockClient = ({
diff --git a/canon-docs/src/components/CodeBlock/styles.module.css b/canon-docs/src/components/CodeBlock/styles.module.css
index 966b3ff72b..8b17c11b86 100644
--- a/canon-docs/src/components/CodeBlock/styles.module.css
+++ b/canon-docs/src/components/CodeBlock/styles.module.css
@@ -1,6 +1,6 @@
 .codeBlock {
   border-radius: 4px;
-  border: 1px solid var(--canon-border);
+  border: 1px solid var(--border);
   position: relative;
   background: transparent;
   overflow-x: auto;
@@ -15,10 +15,10 @@
 }
 
 .title {
-  border-bottom: 1px solid var(--canon-border);
+  border-bottom: 1px solid var(--border);
   padding: 12px 20px;
   font-size: 0.875rem;
-  color: var(--canon-fg-text-secondary);
+  color: var(--secondary);
 }
 
 .code {
diff --git a/canon-docs/src/components/CustomTheme/customTheme.tsx b/canon-docs/src/components/CustomTheme/customTheme.tsx
index 6f76267725..2c282d9c81 100644
--- a/canon-docs/src/components/CustomTheme/customTheme.tsx
+++ b/canon-docs/src/components/CustomTheme/customTheme.tsx
@@ -5,8 +5,8 @@ import CodeMirror from '@uiw/react-codemirror';
 import { sass } from '@codemirror/lang-sass';
 import styles from './styles.module.css';
 import { usePlayground } from '@/utils/playground-context';
-import { AnimatePresence, motion } from 'framer-motion';
-import { Icon } from '../../../../packages/canon';
+import { AnimatePresence, motion } from 'motion/react';
+import { Icon } from '@backstage/canon';
 import { createTheme } from '@uiw/codemirror-themes';
 import { tags as t } from '@lezer/highlight';
 
diff --git a/canon-docs/src/components/CustomTheme/styles.module.css b/canon-docs/src/components/CustomTheme/styles.module.css
index ac7d7f36f1..34c5d41d5d 100644
--- a/canon-docs/src/components/CustomTheme/styles.module.css
+++ b/canon-docs/src/components/CustomTheme/styles.module.css
@@ -4,9 +4,9 @@
   right: 16px;
   width: 240px;
   height: 47px;
-  background-color: var(--canon-bg-elevated);
+  background-color: var(--panel);
   border-radius: 0.375rem;
-  border: 1px solid var(--canon-border);
+  border: 1px solid var(--border);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -31,13 +31,15 @@
 .header {
   height: 46px;
   flex-shrink: 0;
-  border-bottom: 1px solid var(--canon-border);
-  background-color: var(--canon-bg-elevated);
+  border-bottom: 1px solid var(--border);
+  background-color: var(--panel);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 12px 0 16px;
-  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+  transition:
+    background-color 0.2s ease-in-out,
+    border-color 0.2s ease-in-out;
 }
 
 .headerLeft {
@@ -65,8 +67,8 @@
   height: 28px;
   padding: 0 8px;
   color: #fff;
-  background-color: var(--canon-bg);
-  color: var(--canon-fg-text-primary);
+  background-color: var(--bg);
+  color: var(--primary);
   transition: background-color 0.2s ease-in-out;
   border-radius: 0.25rem;
   cursor: pointer;
diff --git a/canon-docs/src/components/HeadlessBanners/BaseUI.tsx b/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
index 8401cafd78..d931562b8c 100644
--- a/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
+++ b/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Icon, Text } from '../../../../packages/canon';
+import { Icon, Text } from '@backstage/canon';
 import styles from './styles.module.css';
 
 interface BaseUIProps {
diff --git a/canon-docs/src/components/HeadlessBanners/styles.module.css b/canon-docs/src/components/HeadlessBanners/styles.module.css
index 4817ab569f..31d08aedb4 100644
--- a/canon-docs/src/components/HeadlessBanners/styles.module.css
+++ b/canon-docs/src/components/HeadlessBanners/styles.module.css
@@ -1,9 +1,9 @@
 .container {
   display: flex;
-  background-color: var(--canon-bg-elevated);
+  background-color: var(--panel);
   padding: var(--canon-space-6);
   border-radius: var(--canon-radius-2);
-  border: 1px solid var(--canon-border);
+  border: 1px solid var(--border);
   margin-bottom: var(--canon-space-6);
   gap: var(--canon-space-6);
   transition: background-color 0.2s ease-in-out;
@@ -29,14 +29,14 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  background-color: var(--canon-bg);
-  border: 1px solid var(--canon-border);
+  background-color: var(--bg);
+  border: 1px solid var(--border);
   border-radius: var(--canon-radius-2);
   padding: 0 var(--canon-space-3);
   height: 28px;
   border-radius: 100px;
   margin-top: var(--canon-space-3);
   font-size: var(--canon-font-size-3);
-  color: var(--canon-fg-text-primary);
+  color: var(--primary);
   gap: var(--canon-space-2);
 }
diff --git a/canon-docs/src/components/IconLibrary/IconLibrary.tsx b/canon-docs/src/components/IconLibrary/IconLibrary.tsx
index be666fc896..1f6618f38d 100644
--- a/canon-docs/src/components/IconLibrary/IconLibrary.tsx
+++ b/canon-docs/src/components/IconLibrary/IconLibrary.tsx
@@ -15,8 +15,8 @@
  */
 'use client';
 
-import { Text, Icon, icons } from '../../../../packages/canon';
-import type { IconNames } from '../../../../packages/canon';
+import { Text, Icon, icons } from '@backstage/canon';
+import type { IconNames } from '@backstage/canon';
 import styles from './styles.module.css';
 
 export const IconLibrary = () => {
diff --git a/canon-docs/src/components/IconLibrary/styles.module.css b/canon-docs/src/components/IconLibrary/styles.module.css
index 8cef221620..8c9a96e5db 100644
--- a/canon-docs/src/components/IconLibrary/styles.module.css
+++ b/canon-docs/src/components/IconLibrary/styles.module.css
@@ -19,10 +19,10 @@
   height: 80px;
   border: 1px solid #d3d3d3;
   border-radius: 0.5rem;
-  background-color: var(--canon-bg);
+  background-color: var(--bg);
   transition: background-color 0.2s ease-in-out;
 
   &:hover {
-    background-color: var(--canon-bg-elevated);
+    background-color: var(--panel);
   }
 }
diff --git a/canon-docs/src/components/PropsTable/PropsTable.tsx b/canon-docs/src/components/PropsTable/PropsTable.tsx
index 69bff9ffe6..f0a6229d51 100644
--- a/canon-docs/src/components/PropsTable/PropsTable.tsx
+++ b/canon-docs/src/components/PropsTable/PropsTable.tsx
@@ -2,7 +2,7 @@
 
 import * as Table from '../Table';
 import { Chip } from '../Chip';
-import { icons } from '../../../../packages/canon';
+import { icons } from '@backstage/canon';
 
 // Define a more specific type for the data object
 type PropData = {
diff --git a/canon-docs/src/components/Sidebar/Sidebar.module.css b/canon-docs/src/components/Sidebar/Sidebar.module.css
index feb9f8bea3..bf04748b02 100644
--- a/canon-docs/src/components/Sidebar/Sidebar.module.css
+++ b/canon-docs/src/components/Sidebar/Sidebar.module.css
@@ -6,27 +6,41 @@
   .sidebar {
     display: block;
     position: fixed;
-    top: 0;
-    left: 0;
+    top: 16px;
+    left: 16px;
+    border-radius: 8px;
     width: 300px;
-    height: 100vh;
-    color: var(--canon-fg-text-primary);
-    background-color: var(--canon-bg-elevated);
-    border-right: 1px solid var(--canon-border);
-    padding-left: 20px;
-    padding-right: 20px;
-    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+    height: calc(100vh - 32px);
+    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.025);
+    color: var(--primary);
+    background-color: var(--panel);
+    transition:
+      background-color 0.2s ease-in-out,
+      color 0.2s ease-in-out;
     overflow: hidden;
   }
 }
 
+.root {
+  height: 100%;
+}
+
+.viewport {
+  overflow: scroll;
+  height: 100%;
+}
+
+.content {
+  padding: 0 20px 20px;
+}
+
 .logoContainer {
   padding-left: 6px;
   padding-top: 32px;
 }
 
 .logo path {
-  fill: var(--canon-fg-text-primary);
+  fill: var(--primary);
 }
 
 .menu {
@@ -43,10 +57,11 @@
 }
 
 .sectionTitle {
-  font-family: var(--docs-font);
   font-size: var(--canon-font-size-3);
   font-weight: var(--canon-font-weight-bold);
   padding: 12px 0;
+  color: var(--primary);
+  margin-top: 24px;
 }
 
 .line {
@@ -63,23 +78,57 @@
   transition: background-color 0.2s ease-in-out;
 
   &:hover {
-    background-color: var(--canon-bg);
+    background-color: var(--bg);
   }
 }
 
 .line.active {
-  background-color: var(--canon-bg);
+  background-color: var(--bg);
+}
+
+.line.active .lineTitle {
+  color: var(--primary);
 }
 
 .lineTitle {
-  font-family: var(--docs-font);
   font-size: var(--canon-font-size-3);
   font-weight: var(--canon-font-weight-regular);
-  color: var(--canon-fg-text-primary);
+  color: var(--secondary);
 }
 
 .lineStatus {
-  font-family: var(--docs-font);
   font-size: var(--canon-font-size-3);
-  color: var(--canon-fg-text-secondary);
+  color: var(--secondary);
+}
+
+.scrollbar {
+  display: flex;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.1);
+  width: 0.25rem;
+  border-radius: 0.375rem;
+  margin: 0.5rem;
+  opacity: 0;
+  transition: opacity 150ms 300ms;
+  right: -20px;
+
+  &[data-hovering],
+  &[data-scrolling] {
+    opacity: 1;
+    transition-duration: 75ms;
+    transition-delay: 0ms;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 1.25rem;
+    height: 100%;
+  }
+}
+
+.thumb {
+  width: 100%;
+  border-radius: inherit;
+  background-color: rgba(0, 0, 0, 0.2);
 }
diff --git a/canon-docs/src/components/Sidebar/docs.tsx b/canon-docs/src/components/Sidebar/docs.tsx
index f207036cfa..da501b151a 100644
--- a/canon-docs/src/components/Sidebar/docs.tsx
+++ b/canon-docs/src/components/Sidebar/docs.tsx
@@ -2,8 +2,7 @@
 
 import Link from 'next/link';
 import { components, overview, layoutComponents, theme } from '@/utils/data';
-import { Box } from '../../../../packages/canon';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styles from './Sidebar.module.css';
 import { usePathname } from 'next/navigation';
 import { Fragment } from 'react';
@@ -53,9 +52,8 @@ export const Docs = () => {
       {data.map(section => {
         return (
           <Fragment key={section.title}>
-            <Box marginTop="lg" marginBottom="2xs">
-              <div className={styles.sectionTitle}>{section.title}</div>
-            </Box>
+            <div className={styles.sectionTitle}>{section.title}</div>
+
             {section.content.map(item => {
               const isActive = pathname === `${section.url}/${item.slug}`;
 
diff --git a/canon-docs/src/components/Sidebar/index.tsx b/canon-docs/src/components/Sidebar/index.tsx
index 455ab4be9b..ad6df68b97 100644
--- a/canon-docs/src/components/Sidebar/index.tsx
+++ b/canon-docs/src/components/Sidebar/index.tsx
@@ -2,28 +2,38 @@ import styles from './Sidebar.module.css';
 import { Docs } from './docs';
 import { Playground } from './playground';
 import Link from 'next/link';
+import { ScrollArea } from '@base-ui-components/react/scroll-area';
 
 export const Sidebar = () => {
   return (
     <div className={styles.sidebar}>
-      <div className={styles.logoContainer}>
-        <Link href="/">
-          <svg
-            width="89"
-            height="27"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            className={styles.logo}
-          >
-            <path d="M77.414 9.71h3.036v2.992l-.264-.022c.279-.88.748-1.65 1.408-2.31.675-.66 1.533-.99 2.574-.99 1.086 0 1.9.352 2.442 1.056.558.689.836 1.598.836 2.728v7.502H84.41v-6.6c0-.66-.117-1.159-.352-1.496-.234-.338-.623-.506-1.166-.506-.601 0-1.122.271-1.562.814a4.321 4.321 0 0 0-.88 1.848v5.94h-3.036V9.71ZM69.868 21.04c-1.13 0-2.142-.257-3.036-.77a5.547 5.547 0 0 1-2.068-2.09c-.484-.895-.726-1.892-.726-2.992 0-1.115.242-2.112.726-2.992a5.503 5.503 0 0 1 2.068-2.112c.88-.514 1.892-.77 3.036-.77 1.144 0 2.156.256 3.036.77a5.347 5.347 0 0 1 2.046 2.112c.498.88.748 1.87.748 2.97 0 1.114-.25 2.12-.748 3.014a5.343 5.343 0 0 1-2.068 2.09c-.88.513-1.885.77-3.014.77Zm0-2.618c.557 0 1.048-.132 1.474-.396a2.79 2.79 0 0 0 .99-1.144c.234-.499.352-1.064.352-1.694 0-.63-.118-1.188-.352-1.672a2.764 2.764 0 0 0-.99-1.166c-.426-.279-.917-.418-1.474-.418-.558 0-1.05.14-1.474.418a2.764 2.764 0 0 0-.99 1.166c-.22.484-.33 1.041-.33 1.672 0 .63.11 1.195.33 1.694.234.484.564.865.99 1.144.425.264.916.396 1.474.396ZM52.385 9.71h3.036v2.992l-.264-.022c.279-.88.748-1.65 1.408-2.31.675-.66 1.533-.99 2.574-.99 1.085 0 1.9.352 2.442 1.056.557.689.836 1.598.836 2.728v7.502h-3.036v-6.6c0-.66-.117-1.159-.352-1.496-.235-.338-.623-.506-1.166-.506-.601 0-1.122.271-1.562.814a4.321 4.321 0 0 0-.88 1.848v5.94h-3.036V9.71ZM43.904 20.952c-1.026 0-1.87-.308-2.53-.924-.66-.616-.99-1.416-.99-2.398 0-1.115.418-2.01 1.254-2.684.85-.69 2.105-1.034 3.762-1.034h2.75l-.924.352v-.462c0-.572-.176-1.02-.528-1.342-.352-.338-.931-.506-1.738-.506-.69 0-1.386.154-2.09.462-.704.308-1.29.69-1.76 1.144v-2.882c.47-.352 1.1-.66 1.892-.924a7.942 7.942 0 0 1 2.486-.396c1.599 0 2.78.41 3.542 1.232.778.806 1.166 1.914 1.166 3.322v5.742c0 .176.008.352.022.528.03.161.066.322.11.484h-3.014v-3.3l.044 1.386a4.044 4.044 0 0 1-1.32 1.606c-.572.396-1.283.594-2.134.594Zm.858-2.156c.558 0 1.049-.206 1.474-.616.44-.426.77-.954.99-1.584v-.792h-1.562c-.762 0-1.334.146-1.716.44-.381.278-.572.674-.572 1.188 0 .41.125.74.374.99.264.25.602.374 1.012.374ZM34.66 21.04c-1.525 0-2.874-.345-4.047-1.034-1.174-.704-2.09-1.68-2.75-2.926-.646-1.247-.968-2.662-.968-4.246 0-1.584.322-2.992.968-4.224.66-1.232 1.576-2.193 2.75-2.882 1.173-.704 2.522-1.056 4.048-1.056.968 0 1.818.11 2.552.33.748.22 1.356.506 1.826.858v3.498c-.396-.484-.96-.895-1.694-1.232-.719-.338-1.51-.506-2.376-.506-.939 0-1.775.22-2.508.66-.719.44-1.284 1.056-1.694 1.848-.396.792-.594 1.694-.594 2.706 0 1.026.198 1.943.594 2.75.41.792.975 1.408 1.694 1.848.733.44 1.57.66 2.508.66.88 0 1.68-.162 2.398-.484.718-.323 1.276-.726 1.672-1.21v3.41a5.686 5.686 0 0 1-1.87.902c-.704.22-1.54.33-2.508.33ZM11.275 6.271c.276.526.019 1.152-.464 1.498a5.846 5.846 0 0 0 1.004 10.082c.454.205.789.632.789 1.13v6.206a.837.837 0 0 1-.838.837C5.33 26.024.112 20.804.112 14.366V.862C.112.399.487.024.95.024c4.483 0 8.376 2.533 10.325 6.247Z" />
-            <path d="M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z" />
-          </svg>
-        </Link>
-      </div>
-      <div className={styles.menu}>
-        <Docs />
-        <Playground />
-      </div>
+      <ScrollArea.Root className={styles.root}>
+        <ScrollArea.Viewport className={styles.viewport}>
+          <div className={styles.content}>
+            <div className={styles.logoContainer}>
+              <Link href="/">
+                <svg
+                  width="89"
+                  height="27"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  className={styles.logo}
+                >
+                  <path d="M77.414 9.71h3.036v2.992l-.264-.022c.279-.88.748-1.65 1.408-2.31.675-.66 1.533-.99 2.574-.99 1.086 0 1.9.352 2.442 1.056.558.689.836 1.598.836 2.728v7.502H84.41v-6.6c0-.66-.117-1.159-.352-1.496-.234-.338-.623-.506-1.166-.506-.601 0-1.122.271-1.562.814a4.321 4.321 0 0 0-.88 1.848v5.94h-3.036V9.71ZM69.868 21.04c-1.13 0-2.142-.257-3.036-.77a5.547 5.547 0 0 1-2.068-2.09c-.484-.895-.726-1.892-.726-2.992 0-1.115.242-2.112.726-2.992a5.503 5.503 0 0 1 2.068-2.112c.88-.514 1.892-.77 3.036-.77 1.144 0 2.156.256 3.036.77a5.347 5.347 0 0 1 2.046 2.112c.498.88.748 1.87.748 2.97 0 1.114-.25 2.12-.748 3.014a5.343 5.343 0 0 1-2.068 2.09c-.88.513-1.885.77-3.014.77Zm0-2.618c.557 0 1.048-.132 1.474-.396a2.79 2.79 0 0 0 .99-1.144c.234-.499.352-1.064.352-1.694 0-.63-.118-1.188-.352-1.672a2.764 2.764 0 0 0-.99-1.166c-.426-.279-.917-.418-1.474-.418-.558 0-1.05.14-1.474.418a2.764 2.764 0 0 0-.99 1.166c-.22.484-.33 1.041-.33 1.672 0 .63.11 1.195.33 1.694.234.484.564.865.99 1.144.425.264.916.396 1.474.396ZM52.385 9.71h3.036v2.992l-.264-.022c.279-.88.748-1.65 1.408-2.31.675-.66 1.533-.99 2.574-.99 1.085 0 1.9.352 2.442 1.056.557.689.836 1.598.836 2.728v7.502h-3.036v-6.6c0-.66-.117-1.159-.352-1.496-.235-.338-.623-.506-1.166-.506-.601 0-1.122.271-1.562.814a4.321 4.321 0 0 0-.88 1.848v5.94h-3.036V9.71ZM43.904 20.952c-1.026 0-1.87-.308-2.53-.924-.66-.616-.99-1.416-.99-2.398 0-1.115.418-2.01 1.254-2.684.85-.69 2.105-1.034 3.762-1.034h2.75l-.924.352v-.462c0-.572-.176-1.02-.528-1.342-.352-.338-.931-.506-1.738-.506-.69 0-1.386.154-2.09.462-.704.308-1.29.69-1.76 1.144v-2.882c.47-.352 1.1-.66 1.892-.924a7.942 7.942 0 0 1 2.486-.396c1.599 0 2.78.41 3.542 1.232.778.806 1.166 1.914 1.166 3.322v5.742c0 .176.008.352.022.528.03.161.066.322.11.484h-3.014v-3.3l.044 1.386a4.044 4.044 0 0 1-1.32 1.606c-.572.396-1.283.594-2.134.594Zm.858-2.156c.558 0 1.049-.206 1.474-.616.44-.426.77-.954.99-1.584v-.792h-1.562c-.762 0-1.334.146-1.716.44-.381.278-.572.674-.572 1.188 0 .41.125.74.374.99.264.25.602.374 1.012.374ZM34.66 21.04c-1.525 0-2.874-.345-4.047-1.034-1.174-.704-2.09-1.68-2.75-2.926-.646-1.247-.968-2.662-.968-4.246 0-1.584.322-2.992.968-4.224.66-1.232 1.576-2.193 2.75-2.882 1.173-.704 2.522-1.056 4.048-1.056.968 0 1.818.11 2.552.33.748.22 1.356.506 1.826.858v3.498c-.396-.484-.96-.895-1.694-1.232-.719-.338-1.51-.506-2.376-.506-.939 0-1.775.22-2.508.66-.719.44-1.284 1.056-1.694 1.848-.396.792-.594 1.694-.594 2.706 0 1.026.198 1.943.594 2.75.41.792.975 1.408 1.694 1.848.733.44 1.57.66 2.508.66.88 0 1.68-.162 2.398-.484.718-.323 1.276-.726 1.672-1.21v3.41a5.686 5.686 0 0 1-1.87.902c-.704.22-1.54.33-2.508.33ZM11.275 6.271c.276.526.019 1.152-.464 1.498a5.846 5.846 0 0 0 1.004 10.082c.454.205.789.632.789 1.13v6.206a.837.837 0 0 1-.838.837C5.33 26.024.112 20.804.112 14.366V.862C.112.399.487.024.95.024c4.483 0 8.376 2.533 10.325 6.247Z" />
+                  <path d="M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z" />
+                </svg>
+              </Link>
+            </div>
+            <div className={styles.menu}>
+              <Docs />
+              <Playground />
+            </div>
+          </div>
+        </ScrollArea.Viewport>
+        <ScrollArea.Scrollbar className={styles.scrollbar}>
+          <ScrollArea.Thumb className={styles.thumb} />
+        </ScrollArea.Scrollbar>
+      </ScrollArea.Root>
     </div>
   );
 };
diff --git a/canon-docs/src/components/Sidebar/playground.tsx b/canon-docs/src/components/Sidebar/playground.tsx
index 59502f6314..9e36238978 100644
--- a/canon-docs/src/components/Sidebar/playground.tsx
+++ b/canon-docs/src/components/Sidebar/playground.tsx
@@ -1,10 +1,8 @@
 'use client';
 
 import { components } from '@/utils/data';
-import { Box } from '../../../../packages/canon/src/components/Box';
-import { Checkbox } from '../../../../packages/canon/src/components/Checkbox';
-import { Text } from '../../../../packages/canon/src/components/Text';
-import { motion } from 'framer-motion';
+import { Box, Checkbox, Text } from '@backstage/canon';
+import { motion } from 'motion/react';
 import styles from './Sidebar.module.css';
 import { usePathname } from 'next/navigation';
 import { screenSizes } from '@/utils/data';
@@ -54,7 +52,7 @@ export const Playground = () => {
       transition={{ duration: 0.2 }}
       style={{ position: 'absolute' }}
     >
-      <Box marginTop="lg" marginBottom="2xs">
+      <Box mt="lg" mb="2xs">
         <Text variant="body" weight="bold">
           Components
         </Text>
@@ -68,7 +66,7 @@ export const Playground = () => {
           />
         </div>
       ))}
-      <Box marginTop="lg" marginBottom="2xs">
+      <Box mt="lg" mb="2xs">
         <Text variant="body" weight="bold">
           Screen sizes
         </Text>
diff --git a/canon-docs/src/components/Snippet/styles.module.css b/canon-docs/src/components/Snippet/styles.module.css
index dc892e099c..f04b304afa 100644
--- a/canon-docs/src/components/Snippet/styles.module.css
+++ b/canon-docs/src/components/Snippet/styles.module.css
@@ -6,8 +6,8 @@
 
 .preview {
   border-radius: 4px;
-  box-shadow: inset 0 0 0 1px var(--canon-border);
-  background-color: var(--canon-bg);
+  box-shadow: inset 0 0 0 1px var(--border);
+  background-color: var(--bg);
   transition: all 0.2s ease-in-out;
   padding: 1px;
   position: relative;
@@ -38,7 +38,7 @@
 
 [data-theme='dark'] .previewContent {
   background-image: radial-gradient(
-    rgba(255, 255, 255, 0.1) 1px,
+    rgba(255, 255, 255, 0.14) 1px,
     transparent 0
   );
 }
diff --git a/canon-docs/src/components/Table/styles.module.css b/canon-docs/src/components/Table/styles.module.css
index 9b67b25025..b05ee2c039 100644
--- a/canon-docs/src/components/Table/styles.module.css
+++ b/canon-docs/src/components/Table/styles.module.css
@@ -15,7 +15,7 @@
  */
 
 .wrapper {
-  border: 1px solid var(--canon-border);
+  border: 1px solid var(--border);
   border-radius: 4px;
   overflow: hidden;
   margin-bottom: 1rem;
@@ -33,7 +33,7 @@
   padding: 12px 16px !important;
   border: none !important;
   text-align: left;
-  background-color: var(--canon-bg-elevated) !important;
+  background-color: var(--panel) !important;
   font-size: 16px;
   transition: background-color 0.2s ease-in-out;
 
@@ -43,14 +43,14 @@
 }
 
 .tableHeaderCell {
-  border-bottom: 1px solid var(--canon-border) !important;
+  border-bottom: 1px solid var(--border) !important;
   font-weight: 500;
   font-size: 14px;
 }
 
 .tableRow {
   border: none;
-  border-bottom: 1px solid var(--canon-border);
+  border-bottom: 1px solid var(--border);
   &:last-child {
     border-bottom: none;
   }
@@ -59,7 +59,7 @@
 .tableChip {
   display: inline-block;
   font-size: 14px !important;
-  border: 1px solid var(--canon-border);
+  border: 1px solid var(--border);
   border-radius: 6px;
   padding: 0px 6px;
   height: 24px;
diff --git a/canon-docs/src/components/Tabs/parts.tsx b/canon-docs/src/components/Tabs/parts.tsx
index cdf9ddd63c..752c5c8064 100644
--- a/canon-docs/src/components/Tabs/parts.tsx
+++ b/canon-docs/src/components/Tabs/parts.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
-import { Text } from '../../../../packages/canon';
+import { Text } from '@backstage/canon';
 import styles from './styles.module.css';
 
 export const Root = ({
@@ -33,9 +33,7 @@ export const Tab = (props: React.ComponentProps<typeof TabsPrimitive.Tab>) => (
             weight="bold"
             {...rest}
             style={{
-              color: state.selected
-                ? 'var(--canon-fg-text-primary)'
-                : 'var(--canon-fg-text-secondary)',
+              color: state.selected ? 'var(--primary)' : 'var(--secondary)',
             }}
           >
             {children}
diff --git a/canon-docs/src/components/Tabs/styles.module.css b/canon-docs/src/components/Tabs/styles.module.css
index 137bc7470d..82e744b8b2 100644
--- a/canon-docs/src/components/Tabs/styles.module.css
+++ b/canon-docs/src/components/Tabs/styles.module.css
@@ -5,7 +5,7 @@
 .list {
   display: flex;
   gap: var(--canon-space-6);
-  border-bottom: 1px solid var(--canon-border);
+  border-bottom: 1px solid var(--border);
   position: relative;
   margin-bottom: var(--canon-space-6);
 }
@@ -22,6 +22,6 @@
   left: var(--active-tab-left);
   width: var(--active-tab-width);
   height: 1px;
-  background-color: var(--canon-fg-text-primary);
+  background-color: var(--primary);
   transition: all 0.2s ease-in-out;
 }
diff --git a/canon-docs/src/components/Toolbar/nav.module.css b/canon-docs/src/components/Toolbar/nav.module.css
index 526d7bf918..608c64d008 100644
--- a/canon-docs/src/components/Toolbar/nav.module.css
+++ b/canon-docs/src/components/Toolbar/nav.module.css
@@ -12,8 +12,10 @@
 .tabsTheme {
   width: 142px;
   border-radius: 0.375rem;
-  background-color: var(--canon-bg);
-  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+  background-color: var(--bg);
+  transition:
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out;
 }
 
 .list {
@@ -26,22 +28,21 @@
 .tab {
   all: unset;
   height: 60px;
-  font-family: var(--docs-font);
-  color: var(--canon-fg-text-secondary);
+  color: var(--secondary);
   font-size: var(--canon-font-size-3);
   font-weight: var(--canon-font-weight-bold);
   cursor: pointer;
   transition: color 0.2s ease-in-out;
 
   &:hover {
-    color: var(--canon-fg-text-primary);
+    color: var(--primary);
   }
 
   &[data-selected] {
-    color: var(--canon-fg-text-primary);
+    color: var(--primary);
 
     & p {
-      color: var(--canon-fg-text-primary);
+      color: var(--primary);
     }
   }
 
@@ -53,14 +54,14 @@
       position: absolute;
       inset: 0.25rem 0;
       border-radius: 0.25rem;
-      outline: 2px solid var(--canon-bg-elevated);
+      outline: 2px solid var(--panel);
       outline-offset: -1px;
     }
   }
 }
 
 .tab p {
-  color: var(--canon-fg-text-secondary) !important;
+  color: var(--secondary) !important;
 }
 
 .indicator {
@@ -72,7 +73,7 @@
   width: var(--active-tab-width);
   height: 1px;
   border-radius: 0.25rem;
-  background-color: var(--canon-fg-text-primary);
+  background-color: var(--primary);
   transition-property: translate, width, background-color;
   transition-duration: 200ms;
   transition-timing-function: ease-in-out;
diff --git a/canon-docs/src/components/Toolbar/styles.module.css b/canon-docs/src/components/Toolbar/styles.module.css
index 3b0378a03e..ff85129441 100644
--- a/canon-docs/src/components/Toolbar/styles.module.css
+++ b/canon-docs/src/components/Toolbar/styles.module.css
@@ -1,17 +1,18 @@
 .toolbar {
   position: sticky;
-  top: 0;
+  top: 16px;
   left: 0;
   right: 0;
+  border-radius: 8px;
   z-index: 10;
-  background-color: var(--canon-bg-elevated);
-  border-bottom: 1px solid var(--canon-border);
+  background-color: var(--panel);
   height: 60px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 var(--canon-space-6);
   transition: background-color 0.2s ease-in-out;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.025);
 }
 
 .actions {
diff --git a/canon-docs/src/components/Toolbar/theme-name.module.css b/canon-docs/src/components/Toolbar/theme-name.module.css
index 0ae2675e31..4e5ce7a595 100644
--- a/canon-docs/src/components/Toolbar/theme-name.module.css
+++ b/canon-docs/src/components/Toolbar/theme-name.module.css
@@ -17,7 +17,7 @@
   color: var(--color-gray-900);
   cursor: pointer;
   user-select: none;
-  background-color: var(--canon-bg);
+  background-color: var(--bg);
   transition: background-color 0.2s ease-in-out;
 
   &:focus-visible {
@@ -43,12 +43,14 @@
   box-sizing: border-box;
   padding-block: 0.25rem;
   border-radius: 0.375rem;
-  background-color: var(--canon-bg-elevated);
+  background-color: var(--panel);
   color: var(--color-gray-900);
-  border: 1px solid var(--canon-border);
+  border: 1px solid var(--border);
   padding-inline: 0.25rem;
   transform-origin: var(--transform-origin);
-  transition: transform 150ms, opacity 150ms;
+  transition:
+    transform 150ms,
+    opacity 150ms;
 
   &[data-starting-style],
   &[data-ending-style] {
@@ -64,7 +66,8 @@
 
   @media (prefers-color-scheme: light) {
     outline: 1px solid var(--color-gray-200);
-    box-shadow: 0px 10px 15px -3px var(--color-gray-200),
+    box-shadow:
+      0px 10px 15px -3px var(--color-gray-200),
       0px 4px 6px -4px var(--color-gray-200);
   }
 
@@ -104,7 +107,7 @@
     z-index: 0;
     position: relative;
     color: var(--color-gray-50);
-    background-color: var(--canon-bg);
+    background-color: var(--bg);
   }
 
   &[data-highlighted]::before {
diff --git a/canon-docs/src/components/Toolbar/theme.module.css b/canon-docs/src/components/Toolbar/theme.module.css
index ac3701541f..993ea8ba81 100644
--- a/canon-docs/src/components/Toolbar/theme.module.css
+++ b/canon-docs/src/components/Toolbar/theme.module.css
@@ -1,15 +1,19 @@
 .tabs {
   border-radius: 0.375rem;
   width: 100%;
-  background-color: var(--canon-bg);
-  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+  background-color: var(--bg);
+  transition:
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out;
 }
 
 .tabsTheme {
   width: 100px;
   border-radius: 0.375rem;
-  background-color: var(--canon-bg);
-  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+  background-color: var(--bg);
+  transition:
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out;
 }
 
 .list {
@@ -29,23 +33,23 @@
   outline: 0;
   background: none;
   appearance: none;
-  color: var(--canon-fg-text-secondary);
+  color: var(--secondary);
   user-select: none;
   height: 2rem;
   flex: 1;
   cursor: pointer;
 
   &[data-selected] {
-    color: var(--canon-fg-text-primary);
+    color: var(--primary);
 
     & p {
-      color: var(--canon-fg-text-primary);
+      color: var(--primary);
     }
   }
 
   @media (hover: hover) {
     &:hover {
-      color: var(--canon-fg-text-primary);
+      color: var(--primary);
     }
   }
 
@@ -57,14 +61,14 @@
       position: absolute;
       inset: 0.25rem 0;
       border-radius: 0.25rem;
-      outline: 2px solid var(--canon-bg-elevated);
+      outline: 2px solid var(--panel);
       outline-offset: -1px;
     }
   }
 }
 
 .tab p {
-  color: var(--canon-fg-text-secondary) !important;
+  color: var(--secondary) !important;
 }
 
 .indicator {
@@ -76,7 +80,7 @@
   width: var(--active-tab-width);
   height: 1.5rem;
   border-radius: 0.25rem;
-  background-color: var(--canon-bg-elevated);
+  background-color: var(--panel);
   transition-property: translate, width, background-color;
   transition-duration: 200ms;
   transition-timing-function: ease-in-out;
diff --git a/canon-docs/src/app/globals.css b/canon-docs/src/css/globals.css
similarity index 60%
rename from canon-docs/src/app/globals.css
rename to canon-docs/src/css/globals.css
index 343f23a38f..02b1b2c5ba 100644
--- a/canon-docs/src/app/globals.css
+++ b/canon-docs/src/css/globals.css
@@ -1,13 +1,33 @@
+:root {
+  --bg: #f8f8f8;
+  --panel: #fff;
+  --primary: #000;
+  --secondary: #757575;
+  --font-regular: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono: ui-monospace, 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono',
+    'Courier New', monospace;
+  --font-weight-regular: 400;
+  --font-weight-bold: 600;
+  --border: rgba(0, 0, 0, 0.1);
+}
+
+[data-theme='dark'] {
+  --bg: #000;
+  --panel: #222222;
+  --primary: #fff;
+  --secondary: #9e9e9e;
+  --border: rgba(255, 255, 255, 0.1);
+}
+
 body {
   display: flex;
   flex-direction: row;
-  background-color: var(--canon-bg);
-  color: var(--canon-fg-text-primary);
+  background-color: var(--bg);
+  color: var(--primary);
+  font-family: var(--font-regular);
   transition: background-color 0.2s ease-in-out;
-
-  --docs-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
 }
 
 iframe {
@@ -22,7 +42,7 @@ iframe {
 .shiki,
 .shiki span {
   background-color: transparent !important;
-  font-family: var(--canon-font-monospace);
+  font-family: var(--font-mono);
   font-size: 0.875rem;
   line-height: 1.7;
 }
@@ -41,9 +61,11 @@ iframe {
 }
 
 .ͼ2 .cm-gutters {
-  background-color: var(--canon-bg);
-  border-right: 1px solid var(--canon-border);
-  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+  background-color: var(--bg);
+  border-right: 1px solid var(--border);
+  transition:
+    background-color 0.2s ease-in-out,
+    border-color 0.2s ease-in-out;
 }
 
 .ͼ1 .cm-lineNumbers .cm-gutterElement {
diff --git a/canon-docs/src/css/mdx.module.css b/canon-docs/src/css/mdx.module.css
new file mode 100644
index 0000000000..9fb977214d
--- /dev/null
+++ b/canon-docs/src/css/mdx.module.css
@@ -0,0 +1,32 @@
+.h1 {
+  font-size: 2.5rem;
+  margin-top: 4rem;
+  margin-bottom: 1.5rem;
+  color: var(--primary);
+}
+
+.h2 {
+  font-size: 1.5rem;
+  margin-top: 3rem;
+  margin-bottom: 1.5rem;
+  color: var(--primary);
+}
+
+.h3 {
+  font-size: 1.25rem;
+  margin-top: 2rem;
+  margin-bottom: 0.5rem;
+  color: var(--primary);
+}
+
+.p {
+  font-size: 1rem;
+  line-height: 1.5;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  color: var(--secondary);
+}
+
+.p:first-of-type {
+  margin-bottom: 2rem;
+}
diff --git a/canon-docs/src/app/page.module.css b/canon-docs/src/css/page.module.css
similarity index 88%
rename from canon-docs/src/app/page.module.css
rename to canon-docs/src/css/page.module.css
index bc28185d48..3a0bb492d8 100644
--- a/canon-docs/src/app/page.module.css
+++ b/canon-docs/src/css/page.module.css
@@ -4,11 +4,12 @@
 
 .container {
   width: 100%;
+  padding: 0 16px;
 }
 
 @media (min-width: 768px) {
   .container {
-    padding-left: 300px;
+    padding-left: 332px;
   }
 }
 
@@ -17,7 +18,7 @@
 }
 
 .page p {
-  color: var(--canon-fg-text-primary);
+  color: var(--primary);
   font-size: 1rem;
   line-height: 1.5rem;
   margin-top: 0;
diff --git a/canon-docs/src/mdx-components.tsx b/canon-docs/src/mdx-components.tsx
index 5eb16edbfe..8ef40f3924 100644
--- a/canon-docs/src/mdx-components.tsx
+++ b/canon-docs/src/mdx-components.tsx
@@ -2,66 +2,22 @@ import React, { ReactNode } from 'react';
 import type { MDXComponents } from 'mdx/types';
 import Image, { ImageProps } from 'next/image';
 import { CodeBlock } from '@/components/CodeBlock';
-import { Box } from '../../packages/canon/src/components/Box';
+import styles from './css/mdx.module.css';
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
     h1: ({ children }) => (
-      <Box style={{ marginTop: '4rem' }}>
-        <h1
-          style={{
-            fontFamily: 'var(--docs-font)',
-            fontSize: '3rem',
-            fontWeight: 'var(--canon-font-weight-bold)',
-            marginTop: '4rem',
-            marginBottom: '0.5rem',
-          }}
-        >
-          {children as ReactNode}
-        </h1>
-      </Box>
+      <h1 className={styles.h1}>{children as ReactNode}</h1>
     ),
     h2: ({ children }) => (
-      <Box marginTop="2xl" marginBottom="md">
-        <h2
-          style={{
-            fontFamily: 'var(--docs-font)',
-            fontSize: '1.5rem',
-            fontWeight: 'var(--canon-font-weight-bold)',
-          }}
-        >
-          {children as ReactNode}
-        </h2>
-      </Box>
+      <h2 className={styles.h2}>{children as ReactNode}</h2>
     ),
     h3: ({ children }) => (
-      <h3
-        style={{
-          fontFamily: 'var(--docs-font)',
-          fontSize: '1.25rem',
-          fontWeight: 'var(--canon-font-weight-bold)',
-          marginTop: '2rem',
-          marginBottom: '0.5rem',
-        }}
-      >
-        {children as ReactNode}
-      </h3>
-    ),
-    p: ({ children }) => (
-      <p
-        style={{
-          fontFamily: 'var(--docs-font)',
-          fontSize: '1rem',
-          lineHeight: '1.5',
-          marginTop: '0',
-          marginBottom: '1rem',
-        }}
-      >
-        {children as ReactNode}
-      </p>
+      <h3 className={styles.h3}>{children as ReactNode}</h3>
     ),
+    p: ({ children }) => <p className={styles.p}>{children as ReactNode}</p>,
     a: ({ children, href }) => (
-      <a href={href} style={{ color: 'var(--canon-fg-text-primary)' }}>
+      <a href={href} style={{ color: 'var(--primary)' }}>
         {children as ReactNode}
       </a>
     ),
@@ -78,12 +34,12 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     code: ({ children }) => (
       <code
         style={{
-          fontFamily: 'var(--canon-font-monospace)',
-          backgroundColor: 'var(--canon-bg-elevated)',
+          fontFamily: 'var(--font-mono)',
+          backgroundColor: 'var(--panel)',
           padding: '0.2rem 0.375rem',
           borderRadius: '0.25rem',
-          color: 'var(--canon-fg-text-secondary)',
-          border: '1px solid var(--canon-border)',
+          color: 'var(--secondary)',
+          border: '1px solid var(--border)',
           fontSize: '0.875rem',
         }}
       >
diff --git a/canon-docs/src/snippets/box.tsx b/canon-docs/src/snippets/box.tsx
index 2a99ebee7d..9d4e000bd7 100644
--- a/canon-docs/src/snippets/box.tsx
+++ b/canon-docs/src/snippets/box.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Box } from '../../../packages/canon';
+import { Box } from '@backstage/canon';
 
 export const BoxPreview = () => {
   return (
diff --git a/canon-docs/src/snippets/button.tsx b/canon-docs/src/snippets/button.tsx
index 2ae2ab0be9..b19616a4b9 100644
--- a/canon-docs/src/snippets/button.tsx
+++ b/canon-docs/src/snippets/button.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Button, Flex, ButtonProps, Text } from '../../../packages/canon';
+import { Button, Flex, ButtonProps, Text } from '@backstage/canon';
 
 export const ButtonPreview = () => {
   return (
diff --git a/canon-docs/src/snippets/checkbox.tsx b/canon-docs/src/snippets/checkbox.tsx
index fe2a5b0219..2f86929107 100644
--- a/canon-docs/src/snippets/checkbox.tsx
+++ b/canon-docs/src/snippets/checkbox.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Checkbox, Flex, Text } from '../../../packages/canon';
+import { Checkbox, Flex, Text } from '@backstage/canon';
 
 export const CheckboxPreview = () => {
   return <Checkbox label="Accept terms and conditions" />;
diff --git a/canon-docs/src/snippets/container.tsx b/canon-docs/src/snippets/container.tsx
index 40ffc69c8c..bc356c18f2 100644
--- a/canon-docs/src/snippets/container.tsx
+++ b/canon-docs/src/snippets/container.tsx
@@ -1,10 +1,9 @@
 'use client';
 
-import { Box, Container } from '../../../packages/canon';
+import { Box, Container } from '@backstage/canon';
 
 const DecorativeBox = () => (
   <Box
-    borderRadius="xs"
     style={{
       height: '64px',
       background: '#eaf2fd',
diff --git a/canon-docs/src/snippets/field.tsx b/canon-docs/src/snippets/field.tsx
index e801d85641..f672db01c4 100644
--- a/canon-docs/src/snippets/field.tsx
+++ b/canon-docs/src/snippets/field.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Input, Field } from '../../../packages/canon';
+import { Input, Field } from '@backstage/canon';
 
 export const FieldPreview = () => {
   return (
diff --git a/canon-docs/src/snippets/flex.tsx b/canon-docs/src/snippets/flex.tsx
index 8bfab8878e..4d45d67d86 100644
--- a/canon-docs/src/snippets/flex.tsx
+++ b/canon-docs/src/snippets/flex.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Flex } from '../../../packages/canon';
+import { Flex } from '@backstage/canon';
 
 const DecorativeBox = () => {
   return (
diff --git a/canon-docs/src/snippets/grid.tsx b/canon-docs/src/snippets/grid.tsx
index 161747cbf6..4e4668583e 100644
--- a/canon-docs/src/snippets/grid.tsx
+++ b/canon-docs/src/snippets/grid.tsx
@@ -1,10 +1,9 @@
 'use client';
 
-import { Box, Grid } from '../../../packages/canon';
+import { Box, Grid } from '@backstage/canon';
 
 const FakeBox = () => (
   <Box
-    borderRadius="xs"
     style={{
       background: '#eaf2fd',
       borderRadius: '4px',
diff --git a/canon-docs/src/snippets/heading.tsx b/canon-docs/src/snippets/heading.tsx
index 484497e7a7..3edbbd65dc 100644
--- a/canon-docs/src/snippets/heading.tsx
+++ b/canon-docs/src/snippets/heading.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Heading, Flex, Text } from '../../../packages/canon';
+import { Heading, Flex, Text } from '@backstage/canon';
 
 export const HeadingPreview = () => {
   return <Heading>Look mum, no hands!</Heading>;
diff --git a/canon-docs/src/snippets/icon.tsx b/canon-docs/src/snippets/icon.tsx
index 126dbaf686..532bf63b12 100644
--- a/canon-docs/src/snippets/icon.tsx
+++ b/canon-docs/src/snippets/icon.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Icon } from '../../../packages/canon';
+import { Icon } from '@backstage/canon';
 
 export const IconPreview = () => {
   return <Icon name="heart" />;
diff --git a/canon-docs/src/snippets/inline.tsx b/canon-docs/src/snippets/inline.tsx
index 73b619e3af..501ca4c786 100644
--- a/canon-docs/src/snippets/inline.tsx
+++ b/canon-docs/src/snippets/inline.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Box, Inline } from '../../../packages/canon';
+import { Box, Flex } from '@backstage/canon';
 
 const fakeBlockList = [
   { width: 45, height: 60 },
@@ -24,7 +24,6 @@ const FakeBox = ({
   height?: number;
 }) => (
   <Box
-    borderRadius="xs"
     style={{
       background: '#eaf2fd',
       borderRadius: '4px',
@@ -39,10 +38,10 @@ const FakeBox = ({
 
 export const InlinePreview = () => {
   return (
-    <Inline>
+    <Flex>
       {fakeBlockList.map((block, index) => (
         <FakeBox key={index} width={block.width} height={block.height} />
       ))}
-    </Inline>
+    </Flex>
   );
 };
diff --git a/canon-docs/src/snippets/input.tsx b/canon-docs/src/snippets/input.tsx
index 69d0b62b7f..d1bc3ef364 100644
--- a/canon-docs/src/snippets/input.tsx
+++ b/canon-docs/src/snippets/input.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Input, Grid } from '../../../packages/canon';
+import { Input, Grid } from '@backstage/canon';
 
 export const InputPreview = () => {
   return (
diff --git a/canon-docs/src/snippets/text.tsx b/canon-docs/src/snippets/text.tsx
index 4d39cbf6dd..211e6fb877 100644
--- a/canon-docs/src/snippets/text.tsx
+++ b/canon-docs/src/snippets/text.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Flex, Text } from '../../../packages/canon';
+import { Flex, Text } from '@backstage/canon';
 
 export const TextPreview = () => {
   return (

From 4921069bfecf592f0be74aa968c4651e5389cc9a Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Fri, 7 Feb 2025 11:58:41 +0000
Subject: [PATCH 4/9] fix(deps): update dependency @base-ui-components/react to
 v1.0.0-alpha.6

Signed-off-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 yarn.lock | 191 ++++++++++++++++++++++++++++--------------------------
 1 file changed, 98 insertions(+), 93 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 7910879bfa..fb1000d67f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3303,12 +3303,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.26.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
-  version: 7.26.0
-  resolution: "@babel/runtime@npm:7.26.0"
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.26.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+  version: 7.26.7
+  resolution: "@babel/runtime@npm:7.26.7"
   dependencies:
     regenerator-runtime: ^0.14.0
-  checksum: c8e2c0504ab271b3467a261a8f119bf2603eb857a0d71e37791f4e3fae00f681365073cc79f141ddaa90c6077c60ba56448004ad5429d07ac73532be9f7cf28a
+  checksum: a1664a08f3f4854b895b540cca2f5f5c6c1993b5fb788c9615d70fc201e16bb254df8e0550c83eaf2749a14d87775e11a7c9ded6161203e9da7a4a323d546925
   languageName: node
   linkType: hard
 
@@ -8948,13 +8948,13 @@ __metadata:
   linkType: hard
 
 "@base-ui-components/react@npm:^1.0.0-alpha.5":
-  version: 1.0.0-alpha.5
-  resolution: "@base-ui-components/react@npm:1.0.0-alpha.5"
+  version: 1.0.0-alpha.6
+  resolution: "@base-ui-components/react@npm:1.0.0-alpha.6"
   dependencies:
-    "@babel/runtime": ^7.26.0
+    "@babel/runtime": ^7.26.7
     "@floating-ui/react": ^0.27.3
     "@floating-ui/utils": ^0.2.9
-    "@react-aria/overlays": ^3.24.0
+    "@react-aria/overlays": ^3.25.0
     prop-types: ^15.8.1
     use-sync-external-store: ^1.4.0
   peerDependencies:
@@ -8964,7 +8964,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 1b432d18185a825bfe1e6793a7ced928e018a1d4989d457b08b48a2c2b81122ada455c3fb6147d9940ed03fc603999230c741533ff211862484ba6451f41784a
+  checksum: 952ac38cabf580ff820c97d6ec1c9c07629c9b9a5129361ddfbdc47a6724af6329ad1eba2807b92db71a6ab9b87bb79cb659c7929b5e209fb01747ac2a89cbd9
   languageName: node
   linkType: hard
 
@@ -10962,12 +10962,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@internationalized/date@npm:^3.6.0":
-  version: 3.6.0
-  resolution: "@internationalized/date@npm:3.6.0"
+"@internationalized/date@npm:^3.7.0":
+  version: 3.7.0
+  resolution: "@internationalized/date@npm:3.7.0"
   dependencies:
     "@swc/helpers": ^0.5.0
-  checksum: 82a66c7d7eef8bc49c4ee5e99ecfa91a4752a3a96296a34c5549fe3fb98c5d37c3688887a253ffb991749d3425f7045c7c6b24c4f98c4929d0ef7f8312fa68ec
+  checksum: c95b73e91c911f8a8b5668c51a82055a4813e54697ad0645075a5f7972a14f3460ecacbb56dc044b46eed6d47b4a10706a35a237c412bc9cf6bf7886676bfb22
   languageName: node
   linkType: hard
 
@@ -15664,72 +15664,75 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-aria/focus@npm:^3.19.0":
-  version: 3.19.0
-  resolution: "@react-aria/focus@npm:3.19.0"
+"@react-aria/focus@npm:^3.19.1":
+  version: 3.19.1
+  resolution: "@react-aria/focus@npm:3.19.1"
   dependencies:
-    "@react-aria/interactions": ^3.22.5
-    "@react-aria/utils": ^3.26.0
-    "@react-types/shared": ^3.26.0
+    "@react-aria/interactions": ^3.23.0
+    "@react-aria/utils": ^3.27.0
+    "@react-types/shared": ^3.27.0
     "@swc/helpers": ^0.5.0
     clsx: ^2.0.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-  checksum: 5109b24a89ba049cf3b9ffc71ad68fedd8d667a8d9a50a41f334d97db01abf22d144b32ff1ca68f76b7067d9a67e27d5cb13989cd92fcd3734e4e509a04c9ad5
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 1ad0714617aefbcd164f37fcbbd82b3edf7f1148983b67a7c08b7f6c55d05f03b141310d70dda8e5bbb866e0790d345c6fa6038fd4fdb6b4226b65aba664513e
   languageName: node
   linkType: hard
 
-"@react-aria/i18n@npm:^3.12.4":
-  version: 3.12.4
-  resolution: "@react-aria/i18n@npm:3.12.4"
+"@react-aria/i18n@npm:^3.12.5":
+  version: 3.12.5
+  resolution: "@react-aria/i18n@npm:3.12.5"
   dependencies:
-    "@internationalized/date": ^3.6.0
+    "@internationalized/date": ^3.7.0
     "@internationalized/message": ^3.1.6
     "@internationalized/number": ^3.6.0
     "@internationalized/string": ^3.2.5
     "@react-aria/ssr": ^3.9.7
-    "@react-aria/utils": ^3.26.0
-    "@react-types/shared": ^3.26.0
-    "@swc/helpers": ^0.5.0
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-  checksum: a3d9593bdef208d8b2c23b78e89b9d7a62f62755ef66a77e7b33919fabcbf232f8e4f90ab1d373776487aef461d3b7650b89c33480f1915a1f23184182b062ae
-  languageName: node
-  linkType: hard
-
-"@react-aria/interactions@npm:^3.22.5":
-  version: 3.22.5
-  resolution: "@react-aria/interactions@npm:3.22.5"
-  dependencies:
-    "@react-aria/ssr": ^3.9.7
-    "@react-aria/utils": ^3.26.0
-    "@react-types/shared": ^3.26.0
-    "@swc/helpers": ^0.5.0
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-  checksum: f15c8c343ad6f9725a801a2d931a59a9a0302cd4577e542c3d57ebc1296fcdbd2c75f7cd9f36516ff838f3f3afa2ef2414ba0a514d97663043b7ec07ac8a1611
-  languageName: node
-  linkType: hard
-
-"@react-aria/overlays@npm:^3.24.0":
-  version: 3.24.0
-  resolution: "@react-aria/overlays@npm:3.24.0"
-  dependencies:
-    "@react-aria/focus": ^3.19.0
-    "@react-aria/i18n": ^3.12.4
-    "@react-aria/interactions": ^3.22.5
-    "@react-aria/ssr": ^3.9.7
-    "@react-aria/utils": ^3.26.0
-    "@react-aria/visually-hidden": ^3.8.18
-    "@react-stately/overlays": ^3.6.12
-    "@react-types/button": ^3.10.1
-    "@react-types/overlays": ^3.8.11
-    "@react-types/shared": ^3.26.0
+    "@react-aria/utils": ^3.27.0
+    "@react-types/shared": ^3.27.0
     "@swc/helpers": ^0.5.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
     react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-  checksum: dfd176d057ccc9441971706977500ee695786ebaac1719b114402b480335cfb7e058e6281cd911a53b7472300ede259eab345e71deb82fd48defd0f35475ef68
+  checksum: 573ef15b43d60566f3c58fbfa38bae363ea7f8e265e93620587afa42c8e2f9e33310a9da83b1e55773c87d389efbcab6bf574e413895bb52fc6ab6ac70cbca31
+  languageName: node
+  linkType: hard
+
+"@react-aria/interactions@npm:^3.23.0":
+  version: 3.23.0
+  resolution: "@react-aria/interactions@npm:3.23.0"
+  dependencies:
+    "@react-aria/ssr": ^3.9.7
+    "@react-aria/utils": ^3.27.0
+    "@react-types/shared": ^3.27.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 43d47bc2b5f1afa0b47cfba9514b6e0daee6d0d2507ae0f5dbb18f6b3f90e64a9de99fd4787eb663517ca84576de9ef7d731f490102848dcecf886babf3d2f50
+  languageName: node
+  linkType: hard
+
+"@react-aria/overlays@npm:^3.25.0":
+  version: 3.25.0
+  resolution: "@react-aria/overlays@npm:3.25.0"
+  dependencies:
+    "@react-aria/focus": ^3.19.1
+    "@react-aria/i18n": ^3.12.5
+    "@react-aria/interactions": ^3.23.0
+    "@react-aria/ssr": ^3.9.7
+    "@react-aria/utils": ^3.27.0
+    "@react-aria/visually-hidden": ^3.8.19
+    "@react-stately/overlays": ^3.6.13
+    "@react-types/button": ^3.10.2
+    "@react-types/overlays": ^3.8.12
+    "@react-types/shared": ^3.27.0
+    "@swc/helpers": ^0.5.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: d2a4646debad2fe9e607d38029eb0969ae58ed22cc2e02a2e01ee13b860cf30e32e121db2494e10460930961f6185db65f20e23d5301be0d7d605478b7fae658
   languageName: node
   linkType: hard
 
@@ -15744,32 +15747,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-aria/utils@npm:^3.26.0":
-  version: 3.26.0
-  resolution: "@react-aria/utils@npm:3.26.0"
+"@react-aria/utils@npm:^3.27.0":
+  version: 3.27.0
+  resolution: "@react-aria/utils@npm:3.27.0"
   dependencies:
     "@react-aria/ssr": ^3.9.7
     "@react-stately/utils": ^3.10.5
-    "@react-types/shared": ^3.26.0
+    "@react-types/shared": ^3.27.0
     "@swc/helpers": ^0.5.0
     clsx: ^2.0.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-  checksum: 8ad5dbfeaf41e04f6ec2b16e7f0a461614f8d0f94a1b8ce5e19a0f09a79cb49774451db485796e46ef62212ad4978c851fc645351fffbef862a48dcde9b9e1a2
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: c93031bd77378483ad507d424d42341a164e2232007cd44397bcd197d0363a4164b201238fdfb47692bdc95ec92bca6c3c311d617dad5b6c2f3a67c6e0a42981
   languageName: node
   linkType: hard
 
-"@react-aria/visually-hidden@npm:^3.8.18":
-  version: 3.8.18
-  resolution: "@react-aria/visually-hidden@npm:3.8.18"
+"@react-aria/visually-hidden@npm:^3.8.19":
+  version: 3.8.19
+  resolution: "@react-aria/visually-hidden@npm:3.8.19"
   dependencies:
-    "@react-aria/interactions": ^3.22.5
-    "@react-aria/utils": ^3.26.0
-    "@react-types/shared": ^3.26.0
+    "@react-aria/interactions": ^3.23.0
+    "@react-aria/utils": ^3.27.0
+    "@react-types/shared": ^3.27.0
     "@swc/helpers": ^0.5.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-  checksum: 5169c4d2aea0aebd9135a4fc692f01f1ba58e54de2c9db47a6da4e97e3e6750e14be6beb64718ab1520b878a982523f8056fcf15195247e3ca8624b4e7645d9f
+    react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+  checksum: 83085be588ce63114e6506f61fa6987521b4539a1c4e1c5912e18d2a2b8feaa962f90d1c1fa689158f95c9428136b63305f8ccee6426ff0b9a0504b804d64e8e
   languageName: node
   linkType: hard
 
@@ -15812,16 +15817,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-stately/overlays@npm:^3.6.12":
-  version: 3.6.12
-  resolution: "@react-stately/overlays@npm:3.6.12"
+"@react-stately/overlays@npm:^3.6.13":
+  version: 3.6.13
+  resolution: "@react-stately/overlays@npm:3.6.13"
   dependencies:
     "@react-stately/utils": ^3.10.5
-    "@react-types/overlays": ^3.8.11
+    "@react-types/overlays": ^3.8.12
     "@swc/helpers": ^0.5.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-  checksum: 6be299650614f2a9d3103540eb76c8b049757ebc27c358c86a32ad6e35aff01c19f708877cfa3549b1b1173531d067359336dcfbf3d38ea81f7d63f8ca9dd9a1
+  checksum: b1cd9f95b2fadf38fd27b543d91459234767bc3ff13ffa9ba7d6bc8d325e7f84aa572fadf6740dc44a1f36038fcbde8d28667098ff762bdcc9aef6f8f40cfe12
   languageName: node
   linkType: hard
 
@@ -15836,34 +15841,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-types/button@npm:^3.10.1":
-  version: 3.10.1
-  resolution: "@react-types/button@npm:3.10.1"
+"@react-types/button@npm:^3.10.2":
+  version: 3.10.2
+  resolution: "@react-types/button@npm:3.10.2"
   dependencies:
-    "@react-types/shared": ^3.26.0
+    "@react-types/shared": ^3.27.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-  checksum: 35d783d8f5eddebec3947791d7e166c41f80cd052956da3899f36e6ce112b13af549c9521c321995a27add57a759934b0a8ad7c6a3038be221454a0e4019d0db
+  checksum: 7d5157c33a495a6b218b1b8c6cc11e406a5ecf028293c0d6f3303744af60802f9dfa2eff669741b38368406f2791df1d907f18c8d91cf903dd65b1e17f606cee
   languageName: node
   linkType: hard
 
-"@react-types/overlays@npm:^3.8.11":
-  version: 3.8.11
-  resolution: "@react-types/overlays@npm:3.8.11"
+"@react-types/overlays@npm:^3.8.12":
+  version: 3.8.12
+  resolution: "@react-types/overlays@npm:3.8.12"
   dependencies:
-    "@react-types/shared": ^3.26.0
+    "@react-types/shared": ^3.27.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-  checksum: adde53027f40991874519edb14edf763ba61310f837850985d934c3493dc646f2c0d5b0eb507e00d1c89631105b742a9a27a73d9e7a0fb9a3eb6d82a5692dbf5
+  checksum: 8bfed3dbc884d0b0bc88e6085e83632cfc4433488ba153eb2a68bee5fd485b4891be5763734cdc5daeca744ac84813ee5050224f3b82b98a439e0984163f8d0a
   languageName: node
   linkType: hard
 
-"@react-types/shared@npm:^3.26.0":
-  version: 3.26.0
-  resolution: "@react-types/shared@npm:3.26.0"
+"@react-types/shared@npm:^3.27.0":
+  version: 3.27.0
+  resolution: "@react-types/shared@npm:3.27.0"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-  checksum: f51381af98a89e1a9823ee18ed16418c5e8badd640dffb0a3523437aa003b144eea878bb49b4f62672484c361f380864d8dcaba742259da32a67b29692a63b06
+  checksum: 72de4ba6f7e168e6c94cacd3c100c280df9ead41bd9d93f0f8b3e5ad5e8d75d96738b4dde9fc5d1907733b54baca63cd474034691a5a0f22120e1a4657ca3ad0
   languageName: node
   linkType: hard
 

From 4b31d16d3aea7a8dcebae0254aa1d913fa8f4d4e Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 7 Feb 2025 12:01:42 +0000
Subject: [PATCH 5/9] Update imports

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 canon-docs/src/app/providers.tsx               |  2 +-
 canon-docs/src/components/CodeBlock/client.tsx |  2 +-
 .../src/components/CustomTheme/customTheme.tsx |  2 +-
 .../components/CustomTheme/styles.module.css   |  4 +---
 .../src/components/HeadlessBanners/BaseUI.tsx  |  2 +-
 .../src/components/IconLibrary/IconLibrary.tsx |  4 ++--
 .../src/components/PropsTable/PropsTable.tsx   |  2 +-
 .../src/components/Sidebar/Sidebar.module.css  |  4 +---
 .../src/components/Sidebar/playground.tsx      | 18 +++++-------------
 canon-docs/src/components/Tabs/parts.tsx       |  2 +-
 .../src/components/Toolbar/nav.module.css      |  4 +---
 .../components/Toolbar/theme-name.module.css   |  7 ++-----
 .../src/components/Toolbar/theme-name.tsx      |  3 +--
 .../src/components/Toolbar/theme.module.css    |  8 ++------
 canon-docs/src/css/globals.css                 |  4 +---
 canon-docs/src/snippets/box.tsx                |  2 +-
 canon-docs/src/snippets/button.tsx             |  2 +-
 canon-docs/src/snippets/checkbox.tsx           |  2 +-
 canon-docs/src/snippets/container.tsx          |  2 +-
 canon-docs/src/snippets/field.tsx              |  2 +-
 canon-docs/src/snippets/flex.tsx               |  2 +-
 canon-docs/src/snippets/grid.tsx               |  2 +-
 canon-docs/src/snippets/heading.tsx            |  2 +-
 canon-docs/src/snippets/icon.tsx               |  2 +-
 canon-docs/src/snippets/inline.tsx             |  2 +-
 canon-docs/src/snippets/input.tsx              |  2 +-
 canon-docs/src/snippets/text.tsx               |  2 +-
 27 files changed, 34 insertions(+), 58 deletions(-)

diff --git a/canon-docs/src/app/providers.tsx b/canon-docs/src/app/providers.tsx
index 508d40b7df..81a18136e8 100644
--- a/canon-docs/src/app/providers.tsx
+++ b/canon-docs/src/app/providers.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { ReactNode } from 'react';
-import { CanonProvider } from '@backstage/canon';
+import { CanonProvider } from '../../../packages/canon/src/contexts/canon';
 import { PlaygroundProvider } from '@/utils/playground-context';
 
 export const Providers = ({ children }: { children: ReactNode }) => {
diff --git a/canon-docs/src/components/CodeBlock/client.tsx b/canon-docs/src/components/CodeBlock/client.tsx
index d170bafabf..27f5bc1a02 100644
--- a/canon-docs/src/components/CodeBlock/client.tsx
+++ b/canon-docs/src/components/CodeBlock/client.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { CodeBlockProps } from '.';
-import { Text } from '@backstage/canon';
+import { Text } from '../../../../packages/canon';
 import styles from './styles.module.css';
 
 export const CodeBlockClient = ({
diff --git a/canon-docs/src/components/CustomTheme/customTheme.tsx b/canon-docs/src/components/CustomTheme/customTheme.tsx
index 2c282d9c81..174a8d0b24 100644
--- a/canon-docs/src/components/CustomTheme/customTheme.tsx
+++ b/canon-docs/src/components/CustomTheme/customTheme.tsx
@@ -6,7 +6,7 @@ import { sass } from '@codemirror/lang-sass';
 import styles from './styles.module.css';
 import { usePlayground } from '@/utils/playground-context';
 import { AnimatePresence, motion } from 'motion/react';
-import { Icon } from '@backstage/canon';
+import { Icon } from '../../../../packages/canon';
 import { createTheme } from '@uiw/codemirror-themes';
 import { tags as t } from '@lezer/highlight';
 
diff --git a/canon-docs/src/components/CustomTheme/styles.module.css b/canon-docs/src/components/CustomTheme/styles.module.css
index 34c5d41d5d..3f0a5eb14e 100644
--- a/canon-docs/src/components/CustomTheme/styles.module.css
+++ b/canon-docs/src/components/CustomTheme/styles.module.css
@@ -37,9 +37,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 0 12px 0 16px;
-  transition:
-    background-color 0.2s ease-in-out,
-    border-color 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
 }
 
 .headerLeft {
diff --git a/canon-docs/src/components/HeadlessBanners/BaseUI.tsx b/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
index d931562b8c..8401cafd78 100644
--- a/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
+++ b/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Icon, Text } from '@backstage/canon';
+import { Icon, Text } from '../../../../packages/canon';
 import styles from './styles.module.css';
 
 interface BaseUIProps {
diff --git a/canon-docs/src/components/IconLibrary/IconLibrary.tsx b/canon-docs/src/components/IconLibrary/IconLibrary.tsx
index 1f6618f38d..be666fc896 100644
--- a/canon-docs/src/components/IconLibrary/IconLibrary.tsx
+++ b/canon-docs/src/components/IconLibrary/IconLibrary.tsx
@@ -15,8 +15,8 @@
  */
 'use client';
 
-import { Text, Icon, icons } from '@backstage/canon';
-import type { IconNames } from '@backstage/canon';
+import { Text, Icon, icons } from '../../../../packages/canon';
+import type { IconNames } from '../../../../packages/canon';
 import styles from './styles.module.css';
 
 export const IconLibrary = () => {
diff --git a/canon-docs/src/components/PropsTable/PropsTable.tsx b/canon-docs/src/components/PropsTable/PropsTable.tsx
index f0a6229d51..69bff9ffe6 100644
--- a/canon-docs/src/components/PropsTable/PropsTable.tsx
+++ b/canon-docs/src/components/PropsTable/PropsTable.tsx
@@ -2,7 +2,7 @@
 
 import * as Table from '../Table';
 import { Chip } from '../Chip';
-import { icons } from '@backstage/canon';
+import { icons } from '../../../../packages/canon';
 
 // Define a more specific type for the data object
 type PropData = {
diff --git a/canon-docs/src/components/Sidebar/Sidebar.module.css b/canon-docs/src/components/Sidebar/Sidebar.module.css
index bf04748b02..fba98420d0 100644
--- a/canon-docs/src/components/Sidebar/Sidebar.module.css
+++ b/canon-docs/src/components/Sidebar/Sidebar.module.css
@@ -14,9 +14,7 @@
     box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.025);
     color: var(--primary);
     background-color: var(--panel);
-    transition:
-      background-color 0.2s ease-in-out,
-      color 0.2s ease-in-out;
+    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
     overflow: hidden;
   }
 }
diff --git a/canon-docs/src/components/Sidebar/playground.tsx b/canon-docs/src/components/Sidebar/playground.tsx
index 9e36238978..5773807d74 100644
--- a/canon-docs/src/components/Sidebar/playground.tsx
+++ b/canon-docs/src/components/Sidebar/playground.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { components } from '@/utils/data';
-import { Box, Checkbox, Text } from '@backstage/canon';
+import { Checkbox } from '../../../../packages/canon';
 import { motion } from 'motion/react';
 import styles from './Sidebar.module.css';
 import { usePathname } from 'next/navigation';
@@ -52,28 +52,20 @@ export const Playground = () => {
       transition={{ duration: 0.2 }}
       style={{ position: 'absolute' }}
     >
-      <Box mt="lg" mb="2xs">
-        <Text variant="body" weight="bold">
-          Components
-        </Text>
-      </Box>
+      <div className={styles.sectionTitle}>Components</div>
       {components.map(({ slug, title }) => (
         <div className={styles.line} key={slug}>
-          <Text variant="body">{title}</Text>
+          <div className={styles.lineTitle}>{title}</div>
           <Checkbox
             checked={selectedComponents.includes(slug)}
             onChange={() => handleComponentCheckboxChange(slug)}
           />
         </div>
       ))}
-      <Box mt="lg" mb="2xs">
-        <Text variant="body" weight="bold">
-          Screen sizes
-        </Text>
-      </Box>
+      <div className={styles.sectionTitle}> Screen sizes</div>
       {screenSizes.map(({ slug, title }) => (
         <div className={styles.line} key={slug}>
-          <Text variant="body">{title}</Text>
+          <div className={styles.lineTitle}>{title}</div>
           <Checkbox
             checked={selectedScreenSizes.includes(slug)}
             onChange={() => handleCheckboxChange(slug)}
diff --git a/canon-docs/src/components/Tabs/parts.tsx b/canon-docs/src/components/Tabs/parts.tsx
index 752c5c8064..7f074f9188 100644
--- a/canon-docs/src/components/Tabs/parts.tsx
+++ b/canon-docs/src/components/Tabs/parts.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
-import { Text } from '@backstage/canon';
+import { Text } from '../../../../packages/canon';
 import styles from './styles.module.css';
 
 export const Root = ({
diff --git a/canon-docs/src/components/Toolbar/nav.module.css b/canon-docs/src/components/Toolbar/nav.module.css
index 608c64d008..95228fa917 100644
--- a/canon-docs/src/components/Toolbar/nav.module.css
+++ b/canon-docs/src/components/Toolbar/nav.module.css
@@ -13,9 +13,7 @@
   width: 142px;
   border-radius: 0.375rem;
   background-color: var(--bg);
-  transition:
-    background-color 0.2s ease-in-out,
-    color 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
 .list {
diff --git a/canon-docs/src/components/Toolbar/theme-name.module.css b/canon-docs/src/components/Toolbar/theme-name.module.css
index 4e5ce7a595..ca06762e23 100644
--- a/canon-docs/src/components/Toolbar/theme-name.module.css
+++ b/canon-docs/src/components/Toolbar/theme-name.module.css
@@ -48,9 +48,7 @@
   border: 1px solid var(--border);
   padding-inline: 0.25rem;
   transform-origin: var(--transform-origin);
-  transition:
-    transform 150ms,
-    opacity 150ms;
+  transition: transform 150ms, opacity 150ms;
 
   &[data-starting-style],
   &[data-ending-style] {
@@ -66,8 +64,7 @@
 
   @media (prefers-color-scheme: light) {
     outline: 1px solid var(--color-gray-200);
-    box-shadow:
-      0px 10px 15px -3px var(--color-gray-200),
+    box-shadow: 0px 10px 15px -3px var(--color-gray-200),
       0px 4px 6px -4px var(--color-gray-200);
   }
 
diff --git a/canon-docs/src/components/Toolbar/theme-name.tsx b/canon-docs/src/components/Toolbar/theme-name.tsx
index 07b734de34..6b35d0efcc 100644
--- a/canon-docs/src/components/Toolbar/theme-name.tsx
+++ b/canon-docs/src/components/Toolbar/theme-name.tsx
@@ -6,8 +6,7 @@ import { Icon } from '@backstage/canon';
 import { usePlayground } from '@/utils/playground-context';
 
 const themes = [
-  { name: 'Backstage Default', value: 'default' },
-  { name: 'Backstage Legacy', value: 'legacy' },
+  { name: 'Backstage', value: 'default' },
   { name: 'Custom theme', value: 'custom' },
 ];
 
diff --git a/canon-docs/src/components/Toolbar/theme.module.css b/canon-docs/src/components/Toolbar/theme.module.css
index 993ea8ba81..37ccb25249 100644
--- a/canon-docs/src/components/Toolbar/theme.module.css
+++ b/canon-docs/src/components/Toolbar/theme.module.css
@@ -2,18 +2,14 @@
   border-radius: 0.375rem;
   width: 100%;
   background-color: var(--bg);
-  transition:
-    background-color 0.2s ease-in-out,
-    color 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
 .tabsTheme {
   width: 100px;
   border-radius: 0.375rem;
   background-color: var(--bg);
-  transition:
-    background-color 0.2s ease-in-out,
-    color 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
 .list {
diff --git a/canon-docs/src/css/globals.css b/canon-docs/src/css/globals.css
index 02b1b2c5ba..d7e64c3341 100644
--- a/canon-docs/src/css/globals.css
+++ b/canon-docs/src/css/globals.css
@@ -63,9 +63,7 @@ iframe {
 .ͼ2 .cm-gutters {
   background-color: var(--bg);
   border-right: 1px solid var(--border);
-  transition:
-    background-color 0.2s ease-in-out,
-    border-color 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
 }
 
 .ͼ1 .cm-lineNumbers .cm-gutterElement {
diff --git a/canon-docs/src/snippets/box.tsx b/canon-docs/src/snippets/box.tsx
index 9d4e000bd7..2a99ebee7d 100644
--- a/canon-docs/src/snippets/box.tsx
+++ b/canon-docs/src/snippets/box.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Box } from '@backstage/canon';
+import { Box } from '../../../packages/canon';
 
 export const BoxPreview = () => {
   return (
diff --git a/canon-docs/src/snippets/button.tsx b/canon-docs/src/snippets/button.tsx
index b19616a4b9..2ae2ab0be9 100644
--- a/canon-docs/src/snippets/button.tsx
+++ b/canon-docs/src/snippets/button.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Button, Flex, ButtonProps, Text } from '@backstage/canon';
+import { Button, Flex, ButtonProps, Text } from '../../../packages/canon';
 
 export const ButtonPreview = () => {
   return (
diff --git a/canon-docs/src/snippets/checkbox.tsx b/canon-docs/src/snippets/checkbox.tsx
index 2f86929107..fe2a5b0219 100644
--- a/canon-docs/src/snippets/checkbox.tsx
+++ b/canon-docs/src/snippets/checkbox.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Checkbox, Flex, Text } from '@backstage/canon';
+import { Checkbox, Flex, Text } from '../../../packages/canon';
 
 export const CheckboxPreview = () => {
   return <Checkbox label="Accept terms and conditions" />;
diff --git a/canon-docs/src/snippets/container.tsx b/canon-docs/src/snippets/container.tsx
index bc356c18f2..27c0ba9922 100644
--- a/canon-docs/src/snippets/container.tsx
+++ b/canon-docs/src/snippets/container.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Box, Container } from '@backstage/canon';
+import { Box, Container } from '../../../packages/canon';
 
 const DecorativeBox = () => (
   <Box
diff --git a/canon-docs/src/snippets/field.tsx b/canon-docs/src/snippets/field.tsx
index f672db01c4..e801d85641 100644
--- a/canon-docs/src/snippets/field.tsx
+++ b/canon-docs/src/snippets/field.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Input, Field } from '@backstage/canon';
+import { Input, Field } from '../../../packages/canon';
 
 export const FieldPreview = () => {
   return (
diff --git a/canon-docs/src/snippets/flex.tsx b/canon-docs/src/snippets/flex.tsx
index 4d45d67d86..8bfab8878e 100644
--- a/canon-docs/src/snippets/flex.tsx
+++ b/canon-docs/src/snippets/flex.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Flex } from '@backstage/canon';
+import { Flex } from '../../../packages/canon';
 
 const DecorativeBox = () => {
   return (
diff --git a/canon-docs/src/snippets/grid.tsx b/canon-docs/src/snippets/grid.tsx
index 4e4668583e..87012b7630 100644
--- a/canon-docs/src/snippets/grid.tsx
+++ b/canon-docs/src/snippets/grid.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Box, Grid } from '@backstage/canon';
+import { Box, Grid } from '../../../packages/canon';
 
 const FakeBox = () => (
   <Box
diff --git a/canon-docs/src/snippets/heading.tsx b/canon-docs/src/snippets/heading.tsx
index 3edbbd65dc..484497e7a7 100644
--- a/canon-docs/src/snippets/heading.tsx
+++ b/canon-docs/src/snippets/heading.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Heading, Flex, Text } from '@backstage/canon';
+import { Heading, Flex, Text } from '../../../packages/canon';
 
 export const HeadingPreview = () => {
   return <Heading>Look mum, no hands!</Heading>;
diff --git a/canon-docs/src/snippets/icon.tsx b/canon-docs/src/snippets/icon.tsx
index 532bf63b12..126dbaf686 100644
--- a/canon-docs/src/snippets/icon.tsx
+++ b/canon-docs/src/snippets/icon.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Icon } from '@backstage/canon';
+import { Icon } from '../../../packages/canon';
 
 export const IconPreview = () => {
   return <Icon name="heart" />;
diff --git a/canon-docs/src/snippets/inline.tsx b/canon-docs/src/snippets/inline.tsx
index 501ca4c786..43fd56c650 100644
--- a/canon-docs/src/snippets/inline.tsx
+++ b/canon-docs/src/snippets/inline.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Box, Flex } from '@backstage/canon';
+import { Box, Flex } from '../../../packages/canon';
 
 const fakeBlockList = [
   { width: 45, height: 60 },
diff --git a/canon-docs/src/snippets/input.tsx b/canon-docs/src/snippets/input.tsx
index d1bc3ef364..69d0b62b7f 100644
--- a/canon-docs/src/snippets/input.tsx
+++ b/canon-docs/src/snippets/input.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Input, Grid } from '@backstage/canon';
+import { Input, Grid } from '../../../packages/canon';
 
 export const InputPreview = () => {
   return (
diff --git a/canon-docs/src/snippets/text.tsx b/canon-docs/src/snippets/text.tsx
index 211e6fb877..4d39cbf6dd 100644
--- a/canon-docs/src/snippets/text.tsx
+++ b/canon-docs/src/snippets/text.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Flex, Text } from '@backstage/canon';
+import { Flex, Text } from '../../../packages/canon';
 
 export const TextPreview = () => {
   return (

From 1cbf11866ce3d13693e73a5c2216683775121149 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Fri, 7 Feb 2025 13:01:12 +0000
Subject: [PATCH 6/9] fix(deps): update dependency @module-federation/enhanced
 to v0.8.10

Signed-off-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 yarn.lock | 194 +++++++++++++++++++++++++++---------------------------
 1 file changed, 97 insertions(+), 97 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index fb1000d67f..dcee738e87 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11951,39 +11951,39 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@module-federation/bridge-react-webpack-plugin@npm:0.8.9":
-  version: 0.8.9
-  resolution: "@module-federation/bridge-react-webpack-plugin@npm:0.8.9"
+"@module-federation/bridge-react-webpack-plugin@npm:0.8.10":
+  version: 0.8.10
+  resolution: "@module-federation/bridge-react-webpack-plugin@npm:0.8.10"
   dependencies:
-    "@module-federation/sdk": 0.8.9
+    "@module-federation/sdk": 0.8.10
     "@types/semver": 7.5.8
     semver: 7.6.3
-  checksum: f731e42ca14af20634d5a3b41af12f0969a4df5d48270206524fe5a79f1603235a397419c9ba0343735f5c345b1ac67f5c88172d56ed58953b20beb40bea37a0
+  checksum: 4f56daa821d4c21bca79a6301567ed6d13096631d7f300bc45153e948c3f0527a0664ddd8dcca9869cfbe582b2f279717e9416ff51fa47a373adaff20d5b6762
   languageName: node
   linkType: hard
 
-"@module-federation/data-prefetch@npm:0.8.9":
-  version: 0.8.9
-  resolution: "@module-federation/data-prefetch@npm:0.8.9"
+"@module-federation/data-prefetch@npm:0.8.10":
+  version: 0.8.10
+  resolution: "@module-federation/data-prefetch@npm:0.8.10"
   dependencies:
-    "@module-federation/runtime": 0.8.9
-    "@module-federation/sdk": 0.8.9
+    "@module-federation/runtime": 0.8.10
+    "@module-federation/sdk": 0.8.10
     fs-extra: 9.1.0
   peerDependencies:
     react: ">=16.9.0"
     react-dom: ">=16.9.0"
-  checksum: 1b1a078eec13cc0f7e9ca2f3346326c1e4f19cc899e124fd0c351ad717094b2772995660cd622f01a2eb22ad795bb03369699a2dabe0e23ebc7f26109d104458
+  checksum: 4db6a9a02e732f67c2d9e0a7268ff39746a25432653b6acbd02482c88ba372a837a0e742c813ba632eb7f9e3c7de7ee3f13b2c3862bfab4ee0d53eaea34c68cd
   languageName: node
   linkType: hard
 
-"@module-federation/dts-plugin@npm:0.8.9":
-  version: 0.8.9
-  resolution: "@module-federation/dts-plugin@npm:0.8.9"
+"@module-federation/dts-plugin@npm:0.8.10":
+  version: 0.8.10
+  resolution: "@module-federation/dts-plugin@npm:0.8.10"
   dependencies:
-    "@module-federation/error-codes": 0.8.9
-    "@module-federation/managers": 0.8.9
-    "@module-federation/sdk": 0.8.9
-    "@module-federation/third-party-dts-extractor": 0.8.9
+    "@module-federation/error-codes": 0.8.10
+    "@module-federation/managers": 0.8.10
+    "@module-federation/sdk": 0.8.10
+    "@module-federation/third-party-dts-extractor": 0.8.10
     adm-zip: ^0.5.10
     ansi-colors: ^4.1.3
     axios: ^1.7.4
@@ -12002,24 +12002,24 @@ __metadata:
   peerDependenciesMeta:
     vue-tsc:
       optional: true
-  checksum: e5e09c08ca186559a06f539272d2ff9005cc24ee69dd207c992ce9fcf8496640cbbdd022574e8bbdd4d21df886d71975215c3c5b2ae946defaa33f2156cd8bc8
+  checksum: 35c41348113f054d09d3303ac5d6f0c9e65f453ba25c0319e584c5e4f779dc499e476ad84a5579238f0e34127dd6c018dc162334e0adc4c9fdabcc858432efa3
   languageName: node
   linkType: hard
 
 "@module-federation/enhanced@npm:^0.8.0":
-  version: 0.8.9
-  resolution: "@module-federation/enhanced@npm:0.8.9"
+  version: 0.8.10
+  resolution: "@module-federation/enhanced@npm:0.8.10"
   dependencies:
-    "@module-federation/bridge-react-webpack-plugin": 0.8.9
-    "@module-federation/data-prefetch": 0.8.9
-    "@module-federation/dts-plugin": 0.8.9
-    "@module-federation/error-codes": 0.8.9
-    "@module-federation/inject-external-runtime-core-plugin": 0.8.9
-    "@module-federation/managers": 0.8.9
-    "@module-federation/manifest": 0.8.9
-    "@module-federation/rspack": 0.8.9
-    "@module-federation/runtime-tools": 0.8.9
-    "@module-federation/sdk": 0.8.9
+    "@module-federation/bridge-react-webpack-plugin": 0.8.10
+    "@module-federation/data-prefetch": 0.8.10
+    "@module-federation/dts-plugin": 0.8.10
+    "@module-federation/error-codes": 0.8.10
+    "@module-federation/inject-external-runtime-core-plugin": 0.8.10
+    "@module-federation/managers": 0.8.10
+    "@module-federation/manifest": 0.8.10
+    "@module-federation/rspack": 0.8.10
+    "@module-federation/runtime-tools": 0.8.10
+    "@module-federation/sdk": 0.8.10
     btoa: ^1.2.1
     upath: 2.0.1
   peerDependencies:
@@ -12033,61 +12033,61 @@ __metadata:
       optional: true
     webpack:
       optional: true
-  checksum: 12b0cafc428bc65e06cbab407e369fe24739923e1555005b6954cebc379c8c2f8c10758081e479293687fe6c2dba437204f3f8fe7f83545a565a80484c322f82
+  checksum: 24f38c4e879d6dbbb1fe3975a990b1182da54259fe7eb6b11c028b31a779a84c291aca61f39c4d15f805071513fb3000a96504ae1c94103fafb0143793db4809
   languageName: node
   linkType: hard
 
-"@module-federation/error-codes@npm:0.8.9":
-  version: 0.8.9
-  resolution: "@module-federation/error-codes@npm:0.8.9"
-  checksum: afeacc27a133e7867db4df6f8245b5d5c465fdd2faaec8608aea2b34bd922f38f23c02ed6dcd95303dddb2735b8fcc1bc137a08d470e605ca17807b705053578
+"@module-federation/error-codes@npm:0.8.10":
+  version: 0.8.10
+  resolution: "@module-federation/error-codes@npm:0.8.10"
+  checksum: e36bcab1afd1d32fcedb06e7a370a11d64dc9db02b8e84c4e770d1dfaef1c8e7f9fe67cbe12ddd95d823a36964469f213d2cd194c633e2f126d7ce09e8216fd9
   languageName: node
   linkType: hard
 
-"@module-federation/inject-external-runtime-core-plugin@npm:0.8.9":
-  version: 0.8.9
-  resolution: "@module-federation/inject-external-runtime-core-plugin@npm:0.8.9"
+"@module-federation/inject-external-runtime-core-plugin@npm:0.8.10":
+  version: 0.8.10
+  resolution: "@module-federation/inject-external-runtime-core-plugin@npm:0.8.10"
   peerDependencies:
-    "@module-federation/runtime-tools": 0.8.9
-  checksum: 77d8361051d54345d346cf3a3d967ed71d9a0bf83182a101c0dfa5c1f6593219521e80a8fb048a4a47e40a3fc4cd552e388728c853fcdcd52bb8870c7e345069
+    "@module-federation/runtime-tools": 0.8.10
+  checksum: 376d4e520ff9f032a3524d66181c17c4009218b8b04aac1ffa310e779cf555447a026dbaa428771551307f870589b9883a5211acc350fce729d7ca2d0a9a8ae5
   languageName: node
   linkType: hard
 
-"@module-federation/managers@npm:0.8.9":
-  version: 0.8.9
-  resolution: "@module-federation/managers@npm:0.8.9"
+"@module-federation/managers@npm:0.8.10":
+  version: 0.8.10
+  resolution: "@module-federation/managers@npm:0.8.10"
   dependencies:
-    "@module-federation/sdk": 0.8.9
+    "@module-federation/sdk": 0.8.10
     find-pkg: 2.0.0
     fs-extra: 9.1.0
-  checksum: b477542ad7faf02c5fce1c50a5d49ed704aebf11091c942c8cfc8615cced35efd1f3180afd0d281959a6deae792b0f6910d2da9187a83dd7761042a56dfd27b4
+  checksum: d72654f3738b95e64379d8e5e5286f6788ce524ff4a10a37acac99a6196f193882d000a891f8412f550c1bc9e914e10b2b52529766ee303acaef1abbd9667ef1
   languageName: node
   linkType: hard
 
-"@module-federation/manifest@npm:0.8.9":
-  version: 0.8.9
-  resolution: "@module-federation/manifest@npm:0.8.9"
+"@module-federation/manifest@npm:0.8.10":
+  version: 0.8.10
+  resolution: "@module-federation/manifest@npm:0.8.10"
   dependencies:
-    "@module-federation/dts-plugin": 0.8.9
-    "@module-federation/managers": 0.8.9
-    "@module-federation/sdk": 0.8.9
+    "@module-federation/dts-plugin": 0.8.10
+    "@module-federation/managers": 0.8.10
+    "@module-federation/sdk": 0.8.10
     chalk: 3.0.0
     find-pkg: 2.0.0
-  checksum: a5221fccfc626250f5256a656b55d693077076fcb0b88d103b97c6e4d18f4656752734f5966ded0ac1e1a5a501629d179d23017857da640af0fe46ad2fecdb33
+  checksum: f4d2e0dadfc30b08ceb5624cf5fba05a2f282ded78ec36157642c103faac1b90973eb5b8856cfbc65a6c0d9210eeec6fd5b58d015382c9d75f240d6f1d96b8bd
   languageName: node
   linkType: hard
 
-"@module-federation/rspack@npm:0.8.9":
-  version: 0.8.9
-  resolution: "@module-federation/rspack@npm:0.8.9"
+"@module-federation/rspack@npm:0.8.10":
+  version: 0.8.10
+  resolution: "@module-federation/rspack@npm:0.8.10"
   dependencies:
-    "@module-federation/bridge-react-webpack-plugin": 0.8.9
-    "@module-federation/dts-plugin": 0.8.9
-    "@module-federation/inject-external-runtime-core-plugin": 0.8.9
-    "@module-federation/managers": 0.8.9
-    "@module-federation/manifest": 0.8.9
-    "@module-federation/runtime-tools": 0.8.9
-    "@module-federation/sdk": 0.8.9
+    "@module-federation/bridge-react-webpack-plugin": 0.8.10
+    "@module-federation/dts-plugin": 0.8.10
+    "@module-federation/inject-external-runtime-core-plugin": 0.8.10
+    "@module-federation/managers": 0.8.10
+    "@module-federation/manifest": 0.8.10
+    "@module-federation/runtime-tools": 0.8.10
+    "@module-federation/sdk": 0.8.10
   peerDependencies:
     "@rspack/core": ">=0.7"
     typescript: ^4.9.0 || ^5.0.0
@@ -12097,17 +12097,17 @@ __metadata:
       optional: true
     vue-tsc:
       optional: true
-  checksum: 027b759e0c2b05f55b50835e3dad556ad4b889885fe64de3ee55d62850d3cff7fa746f517f8bc127be3a6d5ac4b6d78bc5c639ed378afe29d3917e4dfef67a8a
+  checksum: c56c9abf0264a85889ee3a75987fc9ff79265dc8561cea80509b7128d0a53dfbdc2f908f54dc0d4a9bbfbf020620b8f6e7439a927b80cf3c162654d2f8f077d4
   languageName: node
   linkType: hard
 
-"@module-federation/runtime-core@npm:0.6.17":
-  version: 0.6.17
-  resolution: "@module-federation/runtime-core@npm:0.6.17"
+"@module-federation/runtime-core@npm:0.6.18":
+  version: 0.6.18
+  resolution: "@module-federation/runtime-core@npm:0.6.18"
   dependencies:
-    "@module-federation/error-codes": 0.8.9
-    "@module-federation/sdk": 0.8.9
-  checksum: c7da28d11137b1d0925461d77660b4e431b2a6f0d66e851f34609c9d7acf515f2db9d993b6c2e993e3721753fb2df8fcd4d0bf62ee7b84cde9367b3bfce873e9
+    "@module-federation/error-codes": 0.8.10
+    "@module-federation/sdk": 0.8.10
+  checksum: d5e9cdc4066acd5127b010310bdd2f82e9e95b0e036d8841887b2c48986a76688e06d562f3095f8ed36a89468459695fb8b5124f9cac383f6e1f34972f3c3d7a
   languageName: node
   linkType: hard
 
@@ -12121,13 +12121,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@module-federation/runtime-tools@npm:0.8.9":
-  version: 0.8.9
-  resolution: "@module-federation/runtime-tools@npm:0.8.9"
+"@module-federation/runtime-tools@npm:0.8.10":
+  version: 0.8.10
+  resolution: "@module-federation/runtime-tools@npm:0.8.10"
   dependencies:
-    "@module-federation/runtime": 0.8.9
-    "@module-federation/webpack-bundler-runtime": 0.8.9
-  checksum: d59ba1620d7da5ee8ce2b7cebc4f813efe202b3af1bce9a395409a17f08633f864c0980744069c378896ef5f8bfd68574110873d42d615c36b51bd36e2e48c74
+    "@module-federation/runtime": 0.8.10
+    "@module-federation/webpack-bundler-runtime": 0.8.10
+  checksum: 58006c48130618fe51719f9e3ed82d4ebfbe421fabc69a6aa1b67808474fed860920ef0fc4fee63522e3b58cfa9cba787fc4ef513337745bc4d573749a7939cd
   languageName: node
   linkType: hard
 
@@ -12140,14 +12140,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@module-federation/runtime@npm:0.8.9":
-  version: 0.8.9
-  resolution: "@module-federation/runtime@npm:0.8.9"
+"@module-federation/runtime@npm:0.8.10":
+  version: 0.8.10
+  resolution: "@module-federation/runtime@npm:0.8.10"
   dependencies:
-    "@module-federation/error-codes": 0.8.9
-    "@module-federation/runtime-core": 0.6.17
-    "@module-federation/sdk": 0.8.9
-  checksum: 20495c029401431c43f5c5744d83d18c2f8ecafcc97cb960c3973119ec9d8ae313c5ceacbd1ae181331ccf51afb4185a2c8cde6e81ae372d7fa2d42f5af9de0b
+    "@module-federation/error-codes": 0.8.10
+    "@module-federation/runtime-core": 0.6.18
+    "@module-federation/sdk": 0.8.10
+  checksum: 80ae75e206e047a9889200bec428e647904e73dab0af861bb9800a7f75e7458174fdef8057fd7518b9de76db7b7083abeabc17e9362d51d65a6c7c1be9df2836
   languageName: node
   linkType: hard
 
@@ -12158,23 +12158,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@module-federation/sdk@npm:0.8.9":
-  version: 0.8.9
-  resolution: "@module-federation/sdk@npm:0.8.9"
+"@module-federation/sdk@npm:0.8.10":
+  version: 0.8.10
+  resolution: "@module-federation/sdk@npm:0.8.10"
   dependencies:
     isomorphic-rslog: 0.0.7
-  checksum: 74effd5aa86b3c9d7a08efc435a8b0bb244010de05b8e84a6269931bc72d59a467654b57c7870380502a1999bcd22c5c138b3558ab26663f366b6cec6b0fe225
+  checksum: e4652b4bbb7e77a52520fef9e09574881e60468120fec2f1110584b0280dd671c2efb24dd6a0bd75193599a7c9d6d0558334e5785eb6e5b506e592d115213eb9
   languageName: node
   linkType: hard
 
-"@module-federation/third-party-dts-extractor@npm:0.8.9":
-  version: 0.8.9
-  resolution: "@module-federation/third-party-dts-extractor@npm:0.8.9"
+"@module-federation/third-party-dts-extractor@npm:0.8.10":
+  version: 0.8.10
+  resolution: "@module-federation/third-party-dts-extractor@npm:0.8.10"
   dependencies:
     find-pkg: 2.0.0
     fs-extra: 9.1.0
     resolve: 1.22.8
-  checksum: d5e67563ff80a107ba811477271d12bbc5c89869a13499d278961c1f13947f6fb85d9f5316fc9017be77692d876e8b7304136d4154a313023486b521548abafd
+  checksum: a177d012e253cb711a766fbdca9394bc5575727d3752c8efc2e58187064bb7fef886c478bf2b2e13de454ce32af13891ea314119f23693cf4eb63b93a8987b31
   languageName: node
   linkType: hard
 
@@ -12188,13 +12188,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@module-federation/webpack-bundler-runtime@npm:0.8.9":
-  version: 0.8.9
-  resolution: "@module-federation/webpack-bundler-runtime@npm:0.8.9"
+"@module-federation/webpack-bundler-runtime@npm:0.8.10":
+  version: 0.8.10
+  resolution: "@module-federation/webpack-bundler-runtime@npm:0.8.10"
   dependencies:
-    "@module-federation/runtime": 0.8.9
-    "@module-federation/sdk": 0.8.9
-  checksum: 1ca36a54976207682cbac0e74eae7ceb7be102aff5008ed5b5f77a8aeab7e74198cd4c26a7c521ab6b38d4e7c31c86115901aa69753e76094012d171a1f79e4d
+    "@module-federation/runtime": 0.8.10
+    "@module-federation/sdk": 0.8.10
+  checksum: 062d6211a67541bcd503a6642cfa912fa62774328fdf2bffa449c8f45d33fe7b76fe15ac9fe582e8819223e45064032976dc43416b66390e94cbcc67472ba2bb
   languageName: node
   linkType: hard
 

From 46282890bd3c24aaa610b8432612ac1007ebd845 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Fri, 7 Feb 2025 13:48:09 +0000
Subject: [PATCH 7/9] fix(deps): update dependency @useoptic/optic to v1.0.6

Signed-off-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 yarn.lock | 76 +++++++++++++++++++++++++++----------------------------
 1 file changed, 38 insertions(+), 38 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index dcee738e87..074909bfa3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -21414,24 +21414,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@useoptic/json-pointer-helpers@npm:1.0.5":
-  version: 1.0.5
-  resolution: "@useoptic/json-pointer-helpers@npm:1.0.5"
+"@useoptic/json-pointer-helpers@npm:1.0.6":
+  version: 1.0.6
+  resolution: "@useoptic/json-pointer-helpers@npm:1.0.6"
   dependencies:
     jsonpointer: ^5.0.1
     minimatch: 9.0.3
-  checksum: a91e2a84dc1fe87d5f5675caeccd15b403f85c6c7be8e17f83621d2ba74934eac754aa2f81c4dc9b12e3f39889f1b20b01f3b5cc55c69f72032750af3737bffd
+  checksum: a4a0b2175a7a95c1c658f384d26aed2bc0e9db53aba9d44e03e4be239d3fce8b5e20b089dbb3a3bdfcd9cdf3951d46eeec662f6c47156c14ac8dc0a81463b30e
   languageName: node
   linkType: hard
 
-"@useoptic/openapi-io@npm:1.0.5":
-  version: 1.0.5
-  resolution: "@useoptic/openapi-io@npm:1.0.5"
+"@useoptic/openapi-io@npm:1.0.6":
+  version: 1.0.6
+  resolution: "@useoptic/openapi-io@npm:1.0.6"
   dependencies:
     "@apidevtools/json-schema-ref-parser": 9.0.9
     "@jsdevtools/ono": ^7.1.3
-    "@useoptic/json-pointer-helpers": 1.0.5
-    "@useoptic/openapi-utilities": 1.0.5
+    "@useoptic/json-pointer-helpers": 1.0.6
+    "@useoptic/openapi-utilities": 1.0.6
     ajv: 8.17.1
     ajv-errors: ~3.0.0
     ajv-formats: ~2.1.0
@@ -21449,18 +21449,18 @@ __metadata:
     upath: ^2.0.1
     yaml: ^2.3.2
     yaml-ast-parser: ^0.0.43
-  checksum: 5ad10f19089dae08116cc208c4df5b5f7aee121a1163c5b7b761c3b4d21685573afdda26ea3c62e54b4e7e32d5d37aa6cd8db36125258f3fd7067626a5921f71
+  checksum: c8d4ae7dcd983e848136694285242ef44ac0a71329e41a58cfd93ac95797493e2218a3259d5f7238c2cfa155c7d59b633bf46be226c2648e88f903d7b7182e26
   languageName: node
   linkType: hard
 
-"@useoptic/openapi-utilities@npm:1.0.5":
-  version: 1.0.5
-  resolution: "@useoptic/openapi-utilities@npm:1.0.5"
+"@useoptic/openapi-utilities@npm:1.0.6":
+  version: 1.0.6
+  resolution: "@useoptic/openapi-utilities@npm:1.0.6"
   dependencies:
-    "@useoptic/json-pointer-helpers": 1.0.5
-    ajv: ^8.6.0
-    ajv-errors: ~3.0.0
-    ajv-formats: ~2.1.0
+    "@useoptic/json-pointer-helpers": 1.0.6
+    ajv: 8.17.1
+    ajv-errors: ^3.0.0
+    ajv-formats: ^3.0.1
     chalk: ^4.1.2
     fast-deep-equal: ^3.1.3
     is-url: ^1.2.4
@@ -21474,7 +21474,7 @@ __metadata:
     ts-invariant: ^0.9.3
     url-join: ^4.0.1
     yaml-ast-parser: ^0.0.43
-  checksum: 9adfab3beabe1ca80c119d053e4767998a55640ff6c8472915fdfc367d84fb8b1670afb3111db0f00fa108996bbda581e2c4bc58c1f3232c4ec7997e5bfc3216
+  checksum: 75a9022c856eaf70dc04b5845ce5b17b631ac44c60491b2565ff0a7ec0edb4934a3661b449ab3b0d7fd41c4d2546a4f4cdbb370a0e936dd4f7f588ea5a0de74a
   languageName: node
   linkType: hard
 
@@ -21504,8 +21504,8 @@ __metadata:
   linkType: hard
 
 "@useoptic/optic@npm:^1.0.0":
-  version: 1.0.5
-  resolution: "@useoptic/optic@npm:1.0.5"
+  version: 1.0.6
+  resolution: "@useoptic/optic@npm:1.0.6"
   dependencies:
     "@babel/runtime": ^7.20.6
     "@httptoolkit/httpolyglot": ^2.0.1
@@ -21515,10 +21515,10 @@ __metadata:
     "@sentry/node": ^7.74.0
     "@sinclair/typebox": 0.31.28
     "@stoplight/spectral-core": ^1.8.1
-    "@useoptic/openapi-io": 1.0.5
-    "@useoptic/openapi-utilities": 1.0.5
-    "@useoptic/rulesets-base": 1.0.5
-    "@useoptic/standard-rulesets": 1.0.5
+    "@useoptic/openapi-io": 1.0.6
+    "@useoptic/openapi-utilities": 1.0.6
+    "@useoptic/rulesets-base": 1.0.6
+    "@useoptic/standard-rulesets": 1.0.6
     ajv: 8.17.1
     ajv-formats: ~2.1.0
     async-exit-hook: ^2.0.1
@@ -21575,34 +21575,34 @@ __metadata:
     yaml: ^2.3.4
   bin:
     optic: build/index.js
-  checksum: 67964bce63e4ae27a965d2f83bb03b1efd67191b1a3ed4e993ec24784b40f6316cb7089a7907841f4c07ed2f0b7a773b8f6b26b3142cb0f5fd73e30145cb0a23
+  checksum: 436c7cb150f3dcb4cf86a8ae504792fbc293f767a67cf00f59123c6c671353669ed50743ef9cf6c1faefb5b19b56deb7ff4a0f86829b812b39eaa606de5ef007
   languageName: node
   linkType: hard
 
-"@useoptic/rulesets-base@npm:1.0.5":
-  version: 1.0.5
-  resolution: "@useoptic/rulesets-base@npm:1.0.5"
+"@useoptic/rulesets-base@npm:1.0.6":
+  version: 1.0.6
+  resolution: "@useoptic/rulesets-base@npm:1.0.6"
   dependencies:
     "@stoplight/spectral-core": ^1.8.1
     "@stoplight/spectral-rulesets": ^1.14.1
-    "@useoptic/json-pointer-helpers": 1.0.5
-    "@useoptic/openapi-utilities": 1.0.5
+    "@useoptic/json-pointer-helpers": 1.0.6
+    "@useoptic/openapi-utilities": 1.0.6
     ajv: ^8.6.0
     lodash.pick: ^4.4.0
     node-fetch: ^2.6.7
     semver: ^7.5.4
   bin:
     rulesets-base: build/index.js
-  checksum: 87ae2da07efb7cacc46d09cd554c0fe1a1a126c222e1c3f6adfe1c2874437a62a5fb481f74ad2661cd58af93ca782ea26ad470c69abf35d68383ce516b720f8e
+  checksum: bb49fafded10d7b1ada95647c44d404ea7e2b7c2a5f071b3f746fe24ec05e872982a6dfad59cdb97899c6c3f383550885970377f898e21b787ae95874c5928bc
   languageName: node
   linkType: hard
 
-"@useoptic/standard-rulesets@npm:1.0.5":
-  version: 1.0.5
-  resolution: "@useoptic/standard-rulesets@npm:1.0.5"
+"@useoptic/standard-rulesets@npm:1.0.6":
+  version: 1.0.6
+  resolution: "@useoptic/standard-rulesets@npm:1.0.6"
   dependencies:
-    "@useoptic/openapi-utilities": 1.0.5
-    "@useoptic/rulesets-base": 1.0.5
+    "@useoptic/openapi-utilities": 1.0.6
+    "@useoptic/rulesets-base": 1.0.6
     ajv: ^8.6.0
     ajv-draft-04: ^1.0.0
     ajv-formats: ~2.1.0
@@ -21613,7 +21613,7 @@ __metadata:
     whatwg-mimetype: ^3.0.0
   bin:
     standard-rulesets: build/index.js
-  checksum: cd251ae71a9d488a15b6fca7a21df91c1532972e57d4a5e9edad11bbaeb80621c5c19d17fa906360a2628fab6543a257ab74fcb039198c076741460f9fd4e9e2
+  checksum: 9a6fd18f3f211047a6052a13e84085b8654aebca522a5a7948dd3ddce1950f47cb50624ce4eec24138cc1ea552869f35792a7adcc61b0d09c66f1ebd79200df8
   languageName: node
   linkType: hard
 
@@ -22741,7 +22741,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv-formats@npm:~3.0.1":
+"ajv-formats@npm:^3.0.1, ajv-formats@npm:~3.0.1":
   version: 3.0.1
   resolution: "ajv-formats@npm:3.0.1"
   dependencies:

From 95966751c818d00234ee716ac206ff3039214b22 Mon Sep 17 00:00:00 2001
From: Mihai Tabara <mihait@spotify.com>
Date: Fri, 7 Feb 2025 14:13:39 +0000
Subject: [PATCH 8/9] Fix type in templates input examples

Signed-off-by: Mihai Tabara <mihait@spotify.com>
---
 docs/features/software-templates/input-examples.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/features/software-templates/input-examples.md b/docs/features/software-templates/input-examples.md
index 0162ffb8f3..bb4ecde946 100644
--- a/docs/features/software-templates/input-examples.md
+++ b/docs/features/software-templates/input-examples.md
@@ -189,7 +189,7 @@ parameters:
         title: Select features
         type: array
         items:
-          type: boolean
+          type: string
           enum:
             - 'Enable scraping'
             - 'Enable HPA'

From 52c5a5e45f79a9ff59efb15fd894d1d9abe9ada9 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 7 Feb 2025 16:00:50 +0000
Subject: [PATCH 9/9] Fix dependecies

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 canon-docs/package.json |  1 +
 canon-docs/yarn.lock    | 60 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+)

diff --git a/canon-docs/package.json b/canon-docs/package.json
index 8f42a23db0..69fd1cae30 100644
--- a/canon-docs/package.json
+++ b/canon-docs/package.json
@@ -17,6 +17,7 @@
     "@storybook/react": "^8.4.7",
     "@uiw/codemirror-themes": "^4.23.7",
     "@uiw/react-codemirror": "^4.23.7",
+    "motion": "^12.4.1",
     "next": "14.2.23",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
diff --git a/canon-docs/yarn.lock b/canon-docs/yarn.lock
index 03749ea3e0..b2aaaec561 100644
--- a/canon-docs/yarn.lock
+++ b/canon-docs/yarn.lock
@@ -1510,6 +1510,7 @@ __metadata:
     eslint: ^8
     eslint-config-next: 14.2.23
     lightningcss: ^1.28.2
+    motion: ^12.4.1
     next: 14.2.23
     react: ^18.0.2
     react-dom: ^18.0.2
@@ -2584,6 +2585,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"framer-motion@npm:^12.4.1":
+  version: 12.4.1
+  resolution: "framer-motion@npm:12.4.1"
+  dependencies:
+    motion-dom: ^12.0.0
+    motion-utils: ^12.0.0
+    tslib: ^2.4.0
+  peerDependencies:
+    "@emotion/is-prop-valid": "*"
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@emotion/is-prop-valid":
+      optional: true
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 42679a16d9b99d5651b4cce157e56305b7341d94593d167647a478b3b934a6056693c8b274b5cd775557e6cc6b78e97981395c1a161c0467be922f58146b82ce
+  languageName: node
+  linkType: hard
+
 "fs.realpath@npm:^1.0.0":
   version: 1.0.0
   resolution: "fs.realpath@npm:1.0.0"
@@ -4104,6 +4127,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"motion-dom@npm:^12.0.0":
+  version: 12.0.0
+  resolution: "motion-dom@npm:12.0.0"
+  dependencies:
+    motion-utils: ^12.0.0
+  checksum: 58b6c7e678ac29b0d68b966e3e5879d2b3cc6b85ad4e3d141013e44666919669c42e9344508f91a4d35c3c6ddb71660a92a04414998046d10c2309bb630ebeb0
+  languageName: node
+  linkType: hard
+
+"motion-utils@npm:^12.0.0":
+  version: 12.0.0
+  resolution: "motion-utils@npm:12.0.0"
+  checksum: 0b6ad4e10206e32a27fdd857df61ffdf929390eebda1d4832f6c85776677c7f8decdaf0f1eea10aa19e202f43a828bb32cade6e74a55ce7aec9d0c3fbd20dcf4
+  languageName: node
+  linkType: hard
+
+"motion@npm:^12.4.1":
+  version: 12.4.1
+  resolution: "motion@npm:12.4.1"
+  dependencies:
+    framer-motion: ^12.4.1
+    tslib: ^2.4.0
+  peerDependencies:
+    "@emotion/is-prop-valid": "*"
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@emotion/is-prop-valid":
+      optional: true
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 4c6711da834de4e266dd64f6d81fcf1668193fed9afc011722b575d874412d2ac0206fbcb7675eccb4383fe5480e292d7d71652acfe6dab0b476515b72d9a601
+  languageName: node
+  linkType: hard
+
 "ms@npm:^2.1.1, ms@npm:^2.1.3":
   version: 2.1.3
   resolution: "ms@npm:2.1.3"