From 00995ef08f56b8e2e63c2d63aaa790b46abc2d06 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Tue, 31 Dec 2024 16:05:36 +0100
Subject: [PATCH] Working on playground

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 microsite-canon/app/playground/page.tsx       |  49 ++++-
 .../app/playground/styles.module.css          |  32 +++
 microsite-canon/components/Frame/index.tsx    |  29 +++
 microsite-canon/components/Sidebar/index.tsx  |   7 -
 .../components/Sidebar/playground.tsx         |  21 +-
 microsite-canon/components/Story/index.tsx    |  22 +-
 .../components/Story/styles.module.css        |   6 +-
 microsite-canon/content/button.mdx            |   2 +-
 microsite-canon/content/heading.mdx           |   4 +-
 microsite-canon/content/typography.mdx        |   4 +-
 microsite-canon/package.json                  |  15 +-
 microsite-canon/public/components.css         |   1 +
 microsite-canon/public/core.css               |   2 +
 microsite-canon/scripts/watch-css.js          |  43 ++++
 microsite-canon/utils/data.ts                 |   7 +
 packages/canon/.storybook/preview-head.html   |   4 +
 .../src/components/Button/Button.stories.tsx  |  23 ++-
 .../canon/src/components/Checkbox/styles.css  |  56 +++--
 packages/canon/src/css/core.css               |   1 +
 yarn.lock                                     | 193 +++++++++++++++++-
 20 files changed, 442 insertions(+), 79 deletions(-)
 create mode 100644 microsite-canon/components/Frame/index.tsx
 create mode 100644 microsite-canon/public/components.css
 create mode 100644 microsite-canon/public/core.css
 create mode 100644 microsite-canon/scripts/watch-css.js
 create mode 100644 packages/canon/.storybook/preview-head.html

diff --git a/microsite-canon/app/playground/page.tsx b/microsite-canon/app/playground/page.tsx
index 4bb59426ce..99ade9b774 100644
--- a/microsite-canon/app/playground/page.tsx
+++ b/microsite-canon/app/playground/page.tsx
@@ -1,3 +1,50 @@
+'use client';
+
+import styles from './styles.module.css';
+import { Text } from '@backstage/canon';
+import { screenSizes } from '@/utils/data';
+import { Frame } from '@/components/Frame';
+import { Stack, Inline, Button } from '@backstage/canon';
+
 export default function PlaygroundPage() {
-  return <div></div>;
+  return (
+    <div className={styles.container}>
+      {screenSizes.map(screenSize => (
+        <div
+          className={styles.breakpointContainer}
+          style={{ width: screenSize.width }}
+          key={screenSize.slug}
+        >
+          <Text>
+            {screenSize.title} - {screenSize.width}px
+          </Text>
+          <div className={styles.breakpointContent}>
+            <Frame>
+              <Stack>
+                <Stack>
+                  <Text>Button - Primary - Small</Text>
+                  <Inline alignY="center">
+                    <Button iconStart="cloud">Button</Button>
+                    <Button iconEnd="chevronRight">Button</Button>
+                    <Button iconStart="cloud" iconEnd="chevronRight">
+                      Button
+                    </Button>
+                    <Button iconStart="cloud" iconEnd="chevronRight">
+                      Button
+                    </Button>
+                    <Button iconStart="cloud" iconEnd="chevronRight">
+                      Button
+                    </Button>
+                    <Button iconStart="cloud" iconEnd="chevronRight">
+                      Button
+                    </Button>
+                  </Inline>
+                </Stack>
+              </Stack>
+            </Frame>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
 }
diff --git a/microsite-canon/app/playground/styles.module.css b/microsite-canon/app/playground/styles.module.css
index e69de29bb2..13b896a879 100644
--- a/microsite-canon/app/playground/styles.module.css
+++ b/microsite-canon/app/playground/styles.module.css
@@ -0,0 +1,32 @@
+.container {
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+  gap: 24px;
+  overflow-x: scroll;
+}
+
+.breakpointContainer {
+  flex-shrink: 0;
+  margin-top: 40px;
+  height: calc(100vh - 86px);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  &:first-child {
+    margin-left: 48px;
+  }
+
+  &:last-child {
+    margin-right: 48px;
+  }
+}
+
+.breakpointContent {
+  height: 100%;
+  border-radius: 4px;
+  border: 1px solid var(--canon-border-base);
+  background-color: var(--canon-background-base);
+  padding: 16px;
+}
diff --git a/microsite-canon/components/Frame/index.tsx b/microsite-canon/components/Frame/index.tsx
new file mode 100644
index 0000000000..40b6641dfb
--- /dev/null
+++ b/microsite-canon/components/Frame/index.tsx
@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import ReactFrame from 'react-frame-component';
+import '@backstage/canon/src/css/core.css';
+import '@backstage/canon/src/css/components.css';
+
+export const Frame = ({ children }: { children: React.ReactNode }) => {
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    setShow(true);
+  }, []);
+
+  if (!show) return null;
+
+  return (
+    <ReactFrame
+      loading="lazy"
+      style={{ width: '100%', height: '100%' }}
+      head={
+        <>
+          <link rel="stylesheet" href="/core.css" />
+          <link rel="stylesheet" href="/components.css" />
+        </>
+      }
+    >
+      {children}
+    </ReactFrame>
+  );
+};
diff --git a/microsite-canon/components/Sidebar/index.tsx b/microsite-canon/components/Sidebar/index.tsx
index f4136886ae..641f0d73ad 100644
--- a/microsite-canon/components/Sidebar/index.tsx
+++ b/microsite-canon/components/Sidebar/index.tsx
@@ -1,16 +1,9 @@
-'use client';
-
 import styles from './Sidebar.module.css';
 import { TabsVersion, TabsTheme, TabsPages } from '../Tabs';
-import { usePathname } from 'next/navigation';
-import { AnimatePresence } from 'framer-motion';
 import { Docs } from './docs';
 import { Playground } from './playground';
 
 export const Sidebar = () => {
-  const pathname = usePathname();
-  const isPlayground = pathname.includes('/playground');
-
   return (
     <div className={styles.sidebar}>
       <div className={styles.content}>
diff --git a/microsite-canon/components/Sidebar/playground.tsx b/microsite-canon/components/Sidebar/playground.tsx
index ce4ffabcb2..8a6eaef4f8 100644
--- a/microsite-canon/components/Sidebar/playground.tsx
+++ b/microsite-canon/components/Sidebar/playground.tsx
@@ -1,18 +1,11 @@
-import Link from 'next/link';
+'use client';
+
 import { components } from '@/utils/data';
 import { Box, Checkbox, Text } from '@backstage/canon';
 import { motion } from 'framer-motion';
 import styles from './Sidebar.module.css';
 import { usePathname } from 'next/navigation';
-
-const breakpoints = [
-  { title: 'XSmall', slug: 'xs' },
-  { title: 'Small', slug: 'sm' },
-  { title: 'Medium', slug: 'md' },
-  { title: 'Large', slug: 'lg' },
-  { title: 'XLarge', slug: 'xl' },
-  { title: 'XXLarge', slug: '2xl' },
-];
+import { screenSizes } from '@/utils/data';
 
 export const Playground = () => {
   const pathname = usePathname();
@@ -40,18 +33,18 @@ export const Playground = () => {
         </Text>
       </Box>
       {components.map(({ slug, title }) => (
-        <div className={styles.line}>
+        <div className={styles.line} key={slug}>
           <Text variant="body">{title}</Text>
           <Checkbox />
         </div>
       ))}
       <Box marginTop="md" marginBottom="xs">
         <Text variant="subtitle" weight="bold">
-          Breakpoints
+          Screen sizes
         </Text>
       </Box>
-      {breakpoints.map(({ title }) => (
-        <div className={styles.line}>
+      {screenSizes.map(({ slug, title }) => (
+        <div className={styles.line} key={slug}>
           <Text variant="body">{title}</Text>
           <Checkbox />
         </div>
diff --git a/microsite-canon/components/Story/index.tsx b/microsite-canon/components/Story/index.tsx
index f7be11592b..3b7a9430f8 100644
--- a/microsite-canon/components/Story/index.tsx
+++ b/microsite-canon/components/Story/index.tsx
@@ -2,7 +2,14 @@
 
 import { useTheme } from 'next-themes';
 import styles from './styles.module.css';
-export const Story = ({ id, height }: { id: string; height?: number }) => {
+import IframeResizer from '@iframe-resizer/react';
+
+interface StoryProps {
+  id: string;
+  border?: boolean;
+}
+
+export const Story = ({ id, border = true }: StoryProps) => {
   const { theme } = useTheme();
 
   const localTheme = theme === 'dark' ? 'Dark' : 'Light';
@@ -13,11 +20,14 @@ export const Story = ({ id, height }: { id: string; height?: number }) => {
   const iframeUrl = `${url}?globals=theme%3A${localTheme}&args=&id=${id}`;
 
   return (
-    <div
+    <IframeResizer
+      src={iframeUrl}
+      license="GPLv3"
+      checkOrigin={false}
       className={styles.container}
-      style={{ height: height ? `${height}px` : '120px' }}
-    >
-      <iframe src={iframeUrl} width="100%" height="100%" />
-    </div>
+      style={{
+        border: border ? '1px solid var(--canon-border-base)' : 'none',
+      }}
+    />
   );
 };
diff --git a/microsite-canon/components/Story/styles.module.css b/microsite-canon/components/Story/styles.module.css
index 8a0ba94b75..74a8b60d7a 100644
--- a/microsite-canon/components/Story/styles.module.css
+++ b/microsite-canon/components/Story/styles.module.css
@@ -1,7 +1,7 @@
 .container {
-  width: 100%;
-  border: 1px solid var(--canon-border-base);
+  width: 1px;
+  min-width: 100%;
   margin-bottom: 1rem;
-  border-radius: 0.5rem;
+  border-radius: 4px;
   overflow: hidden;
 }
diff --git a/microsite-canon/content/button.mdx b/microsite-canon/content/button.mdx
index 37a79e88f6..1e205cdb3c 100644
--- a/microsite-canon/content/button.mdx
+++ b/microsite-canon/content/button.mdx
@@ -94,7 +94,7 @@ Here's a view when buttons have icons.
 
 Here's a view when buttons are full width.
 
-<Story id="button--full-width" height={240} />
+<Story id="button--full-width" />
 
 <CodeBlock
   code={`<Stack style={{ width: '300px' }}>
diff --git a/microsite-canon/content/heading.mdx b/microsite-canon/content/heading.mdx
index 5171dfd5b9..ebe8aeb655 100644
--- a/microsite-canon/content/heading.mdx
+++ b/microsite-canon/content/heading.mdx
@@ -6,7 +6,7 @@ import { PropsTable } from '../components/PropsTable';
 
 Headings are used to structure the content of your page.
 
-<Story id="heading--title-1" height={108} />
+<Story id="heading--title-1" />
 
 <CodeBlock
   code={`import { Heading } from "@backstage/canon";
@@ -44,7 +44,7 @@ Headings are used to structure the content of your page.
 The `Heading` component has a `variant` prop that can be used to change the
 appearance of the heading.
 
-<Story id="heading--all-variants" height={400} />
+<Story id="heading--all-variants" />
 
 <CodeBlock
   code={`<Stack gap="md">
diff --git a/microsite-canon/content/typography.mdx b/microsite-canon/content/typography.mdx
index 41ce60b7ae..37f36b221a 100644
--- a/microsite-canon/content/typography.mdx
+++ b/microsite-canon/content/typography.mdx
@@ -15,7 +15,7 @@ create a hierarchy of information and to make the content more readable. The
 best way to use add these headings to your page is to import the [Heading
 component](?path=/docs/components-heading--docs).
 
-<Story id="heading--all-variants" height={400} />
+<Story id="heading--all-variants" />
 
 ## Text
 
@@ -25,4 +25,4 @@ versatile and can be paired with regular and bold of font weights. You can use
 the [Text component](?path=/docs/components-text--docs) to add text to your
 page.
 
-<Story id="text--all-variants" height={410} />
+<Story id="text--all-variants" />
diff --git a/microsite-canon/package.json b/microsite-canon/package.json
index d90e4524da..c8f5c71bdd 100644
--- a/microsite-canon/package.json
+++ b/microsite-canon/package.json
@@ -5,16 +5,15 @@
   "license": "Apache-2.0",
   "scripts": {
     "build": "next build",
-    "dev": "next dev",
+    "dev": "concurrently \"next dev\" \"yarn watch-css\"",
     "lint": "next lint",
-    "prettier:check": "prettier --check .",
-    "prettier:fix": "prettier --write .",
-    "start": "next start"
+    "start": "next start",
+    "watch-css": "node scripts/watch-css.js"
   },
-  "prettier": "@backstage/cli/config/prettier",
   "dependencies": {
     "@backstage/canon": "workspace:^",
     "@base-ui-components/react": "^1.0.0-alpha.4",
+    "@iframe-resizer/react": "^5.3.2",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^15.1.3",
@@ -23,15 +22,19 @@
     "next": "15.1.3",
     "next-themes": "^0.4.4",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-frame-component": "^5.2.7"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "chokidar": "^4.0.3",
+    "concurrently": "^9.1.2",
     "eslint": "^9",
     "eslint-config-next": "15.1.3",
+    "lightningcss": "^1.28.2",
     "shiki": "^1.24.4",
     "typescript": "^5"
   }
diff --git a/microsite-canon/public/components.css b/microsite-canon/public/components.css
new file mode 100644
index 0000000000..2af88526e0
--- /dev/null
+++ b/microsite-canon/public/components.css
@@ -0,0 +1 @@
+.cn-button{all:unset;user-select:none;font-family:var(--canon-font-regular);font-weight:var(--canon-font-weight-bold);font-size:var(--canon-font-size-body);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;padding:0;transition:all .15s;display:inline-flex}.cn-button-primary{background-color:var(--canon-accent);color:var(--canon-text-primary-on-accent);&:hover{box-shadow:inset 0 0 0 1px var(--canon-outline-focus);color:var(--canon-text-primary);background-color:#0000}}.cn-button-secondary{box-shadow:inset 0 0 0 1px var(--canon-outline);color:var(--canon-text-primary);background-color:#0000;&:hover{box-shadow:inset 0 0 0 1px var(--canon-outline-hover)}}.cn-button-tertiary{color:var(--canon-text-primary);background-color:#0000;&:hover{color:var(--canon-text-secondary)}}.cn-button-small{height:32px;padding-left:6px;padding-right:6px}.cn-button-medium{height:40px;padding-left:8px;padding-right:8px}.cn-button-content{align-items:center;gap:var(--canon-spacing-xs);font-weight:var(--canon-font-weight-bold);display:flex}.cn-button-content-icon-both{flex:1}.canon-stack{flex-direction:column;display:flex}.canon-inline{flex-wrap:wrap;display:flex}.canon-grid{display:grid}.canon-container{max-width:var(--canon-container-max-width);padding:0 var(--canon-container-padding);margin:0 auto}.icon-12{width:12px;height:12px}.icon-16{width:16px;height:16px}.icon-24{width:24px;height:24px}.checkbox-label{justify-content:center;align-items:center;gap:var(--canon-spacing-xs);font-size:var(--canon-font-size-xs);font-family:var(--canon-font-regular);color:var(--canon-text-primary);user-select:none;flex-direction:row;display:flex;&:hover{& .checkbox{box-shadow:inset 0 0 0 1px var(--canon-border-hover)}}}.checkbox{all:unset;width:1rem;height:1rem;box-shadow:inset 0 0 0 1px var(--canon-border-base);cursor:pointer;border-radius:2px;justify-content:center;align-items:center;transition:all .2s ease-in-out;display:flex;&[data-checked]{background-color:var(--canon-accent)}}.checkbox-indicator{color:var(--canon-text-primary-on-accent);justify-content:center;align-items:center;display:flex}.table{background-color:var(--canon-surface-1);border-radius:var(--canon-border-radius-xs);width:100%;padding-bottom:var(--canon-spacing-5xs);padding-top:var(--canon-spacing-5xs);font-size:var(--canon-font-size-body);position:relative;overflow:auto;& table{caption-side:bottom;width:100%;font-size:var(--canon-font-size-sm);border-collapse:collapse}}.table-head{text-align:left;padding:var(--canon-spacing-xs)}.table-body{& tr:last-child{border-bottom:none}}.table-row{transition:color .2s ease-in-out;&:hover td{background-color:var(--canon-surface-3)}& .table-cell:first-child{border-top-left-radius:var(--canon-border-radius-xs);border-bottom-left-radius:var(--canon-border-radius-xs);box-shadow:inset 4px 2px 0 0 var(--canon-surface-1),inset 4px -2px 0 0 var(--canon-surface-1);padding-left:var(--canon-spacing-xs)}& .table-cell:last-child{border-top-right-radius:var(--canon-border-radius-xs);border-bottom-right-radius:var(--canon-border-radius-xs);box-shadow:inset -4px 2px 0 0 var(--canon-surface-1),inset -4px -2px 0 0 var(--canon-surface-1);padding-right:var(--canon-spacing-xs)}}.table-cell{padding:var(--canon-spacing-xs);background-color:var(--canon-surface-2);box-shadow:inset 0px 2px 0 0 var(--canon-surface-1),inset 0px -2px 0 0 var(--canon-surface-1)}.text{font-family:var(--canon-font-regular);color:var(--canon-text-primary);margin:0;padding:0;&.text-body{font-size:var(--canon-font-size-body);line-height:140%}&.text-subtitle{font-size:var(--canon-font-size-subtitle);line-height:140%}&.text-caption{font-size:var(--canon-font-size-caption);line-height:140%}&.text-label{font-size:var(--canon-font-size-label);line-height:140%}&.text-regular{font-weight:var(--canon-font-weight-regular)}&.text-bold{font-weight:var(--canon-font-weight-bold)}}.text{font-family:var(--canon-font-regular);color:var(--canon-text-primary);margin:0;padding:0;&.text-display{font-size:var(--canon-font-size-display);line-height:100%;font-weight:var(--canon-font-weight-bold)}&.text-title1{font-size:var(--canon-font-size-title1);line-height:100%;font-weight:var(--canon-font-weight-bold)}&.text-title2{font-size:var(--canon-font-size-title2);line-height:100%;font-weight:var(--canon-font-weight-bold)}&.text-title3{font-size:var(--canon-font-size-title3);line-height:100%;font-weight:var(--canon-font-weight-bold)}&.text-title4{font-size:var(--canon-font-size-title4);line-height:100%;font-weight:var(--canon-font-weight-bold)}&.text-title5{font-size:var(--canon-font-size-title5);line-height:100%;font-weight:var(--canon-font-weight-bold)}}
\ No newline at end of file
diff --git a/microsite-canon/public/core.css b/microsite-canon/public/core.css
new file mode 100644
index 0000000000..c2e2a65b7f
--- /dev/null
+++ b/microsite-canon/public/core.css
@@ -0,0 +1,2 @@
+/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
+@layer base{*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;tab-size:4;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;line-height:1.15}body{margin:0}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentColor}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}*,html,body{font-family:var(--canon-font-regular);font-weight:var(--canon-font-weight-regular)}}@layer utilities{.cu-block{display:block}.cu-border-base{border-color:var(--canon-border-base);border-style:solid;border-width:1px}.cu-border-error{border-color:var(--canon-border-error);border-style:solid;border-width:1px}.cu-border-none{border-width:0;border-color:#0000}.cu-border-selected{border-color:var(--canon-border-selected);border-style:solid;border-width:1px}.cu-border-warning{border-color:var(--canon-border-warning);border-style:solid;border-width:1px}.cu-col-end-1{grid-column-end:1}.cu-col-end-10{grid-column-end:10}.cu-col-end-11{grid-column-end:11}.cu-col-end-12{grid-column-end:12}.cu-col-end-13{grid-column-end:13}.cu-col-end-2{grid-column-end:2}.cu-col-end-3{grid-column-end:3}.cu-col-end-4{grid-column-end:4}.cu-col-end-5{grid-column-end:5}.cu-col-end-6{grid-column-end:6}.cu-col-end-7{grid-column-end:7}.cu-col-end-8{grid-column-end:8}.cu-col-end-9{grid-column-end:9}.cu-col-end-auto{grid-column-end:auto}.cu-col-span-1{grid-column:span 1/span 1}.cu-col-span-10{grid-column:span 10/span 10}.cu-col-span-11{grid-column:span 11/span 11}.cu-col-span-12{grid-column:span 12/span 12}.cu-col-span-2{grid-column:span 2/span 2}.cu-col-span-3{grid-column:span 3/span 3}.cu-col-span-4{grid-column:span 4/span 4}.cu-col-span-5{grid-column:span 5/span 5}.cu-col-span-6{grid-column:span 6/span 6}.cu-col-span-7{grid-column:span 7/span 7}.cu-col-span-8{grid-column:span 8/span 8}.cu-col-span-9{grid-column:span 9/span 9}.cu-col-span-auto{grid-column:span auto/span auto}.cu-col-start-1{grid-column-start:1}.cu-col-start-10{grid-column-start:10}.cu-col-start-11{grid-column-start:11}.cu-col-start-12{grid-column-start:12}.cu-col-start-13{grid-column-start:13}.cu-col-start-2{grid-column-start:2}.cu-col-start-3{grid-column-start:3}.cu-col-start-4{grid-column-start:4}.cu-col-start-5{grid-column-start:5}.cu-col-start-6{grid-column-start:6}.cu-col-start-7{grid-column-start:7}.cu-col-start-8{grid-column-start:8}.cu-col-start-9{grid-column-start:9}.cu-col-start-auto{grid-column-start:auto}.cu-flex{display:flex}.cu-flex-col{flex-direction:column}.cu-flex-nowrap{flex-wrap:nowrap}.cu-flex-row{flex-direction:row}.cu-flex-wrap{flex-wrap:wrap}.cu-flex-wrap-reverse{flex-wrap:wrap-reverse}.cu-gap-2xl{gap:var(--canon-spacing-2xl)}.cu-gap-lg{gap:var(--canon-spacing-lg)}.cu-gap-md{gap:var(--canon-spacing-md)}.cu-gap-none{gap:0}.cu-gap-sm{gap:var(--canon-spacing-sm)}.cu-gap-xl{gap:var(--canon-spacing-xl)}.cu-gap-xs{gap:var(--canon-spacing-xs)}.cu-grid{display:grid}.cu-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.cu-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.cu-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.cu-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.cu-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cu-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cu-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.cu-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.cu-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.cu-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.cu-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.cu-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.cu-grid-cols-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.cu-hidden{display:none}.cu-inline{display:inline}.cu-inline-block{display:inline-block}.cu-items-center{align-items:center}.cu-items-end{align-items:flex-end}.cu-items-start{align-items:flex-start}.cu-items-stretch{align-items:stretch}.cu-justify-around{justify-content:space-around}.cu-justify-between{justify-content:space-between}.cu-justify-center{justify-content:center}.cu-justify-end{justify-content:flex-end}.cu-justify-start{justify-content:flex-start}.cu-justify-stretch{justify-content:stretch}.cu-m-2xl{margin:var(--canon-spacing-2xl)}.cu-m-lg{margin:var(--canon-spacing-lg)}.cu-m-md{margin:var(--canon-spacing-md)}.cu-m-none{margin:0}.cu-m-sm{margin:var(--canon-spacing-sm)}.cu-m-xl{margin:var(--canon-spacing-xl)}.cu-m-xs{margin:var(--canon-spacing-xs)}.cu-mb-2xl{margin-bottom:var(--canon-spacing-2xl)}.cu-mb-lg{margin-bottom:var(--canon-spacing-lg)}.cu-mb-md{margin-bottom:var(--canon-spacing-md)}.cu-mb-none{margin-bottom:0}.cu-mb-sm{margin-bottom:var(--canon-spacing-sm)}.cu-mb-xl{margin-bottom:var(--canon-spacing-xl)}.cu-mb-xs{margin-bottom:var(--canon-spacing-xs)}.cu-ml-2xl{margin-left:var(--canon-spacing-2xl)}.cu-ml-lg{margin-left:var(--canon-spacing-lg)}.cu-ml-md{margin-left:var(--canon-spacing-md)}.cu-ml-none{margin-left:0}.cu-ml-sm{margin-left:var(--canon-spacing-sm)}.cu-ml-xl{margin-left:var(--canon-spacing-xl)}.cu-ml-xs{margin-left:var(--canon-spacing-xs)}.cu-mr-2xl{margin-right:var(--canon-spacing-2xl)}.cu-mr-lg{margin-right:var(--canon-spacing-lg)}.cu-mr-md{margin-right:var(--canon-spacing-md)}.cu-mr-none{margin-right:0}.cu-mr-sm{margin-right:var(--canon-spacing-sm)}.cu-mr-xl{margin-right:var(--canon-spacing-xl)}.cu-mr-xs{margin-right:var(--canon-spacing-xs)}.cu-mt-2xl{margin-top:var(--canon-spacing-2xl)}.cu-mt-lg{margin-top:var(--canon-spacing-lg)}.cu-mt-md{margin-top:var(--canon-spacing-md)}.cu-mt-none{margin-top:0}.cu-mt-sm{margin-top:var(--canon-spacing-sm)}.cu-mt-xl{margin-top:var(--canon-spacing-xl)}.cu-mt-xs{margin-top:var(--canon-spacing-xs)}.cu-mx-2xl{margin-left:var(--canon-spacing-2xl);margin-right:var(--canon-spacing-2xl)}.cu-mx-lg{margin-left:var(--canon-spacing-lg);margin-right:var(--canon-spacing-lg)}.cu-mx-md{margin-left:var(--canon-spacing-md);margin-right:var(--canon-spacing-md)}.cu-mx-none{margin-left:0;margin-right:0}.cu-mx-sm{margin-left:var(--canon-spacing-sm);margin-right:var(--canon-spacing-sm)}.cu-mx-xl{margin-left:var(--canon-spacing-xl);margin-right:var(--canon-spacing-xl)}.cu-mx-xs{margin-left:var(--canon-spacing-xs);margin-right:var(--canon-spacing-xs)}.cu-my-2xl{margin-top:var(--canon-spacing-2xl);margin-bottom:var(--canon-spacing-2xl)}.cu-my-lg{margin-top:var(--canon-spacing-lg);margin-bottom:var(--canon-spacing-lg)}.cu-my-md{margin-top:var(--canon-spacing-md);margin-bottom:var(--canon-spacing-md)}.cu-my-none{margin-top:0;margin-bottom:0}.cu-my-sm{margin-top:var(--canon-spacing-sm);margin-bottom:var(--canon-spacing-sm)}.cu-my-xl{margin-top:var(--canon-spacing-xl);margin-bottom:var(--canon-spacing-xl)}.cu-my-xs{margin-top:var(--canon-spacing-xs);margin-bottom:var(--canon-spacing-xs)}.cu-p-2xl{padding:var(--canon-spacing-2xl)}.cu-p-lg{padding:var(--canon-spacing-lg)}.cu-p-md{padding:var(--canon-spacing-md)}.cu-p-none{padding:0}.cu-p-sm{padding:var(--canon-spacing-sm)}.cu-p-xl{padding:var(--canon-spacing-xl)}.cu-p-xs{padding:var(--canon-spacing-xs)}.cu-pb-2xl{padding-bottom:var(--canon-spacing-2xl)}.cu-pb-lg{padding-bottom:var(--canon-spacing-lg)}.cu-pb-md{padding-bottom:var(--canon-spacing-md)}.cu-pb-none{padding-bottom:0}.cu-pb-sm{padding-bottom:var(--canon-spacing-sm)}.cu-pb-xl{padding-bottom:var(--canon-spacing-xl)}.cu-pb-xs{padding-bottom:var(--canon-spacing-xs)}.cu-pl-2xl{padding-left:var(--canon-spacing-2xl)}.cu-pl-lg{padding-left:var(--canon-spacing-lg)}.cu-pl-md{padding-left:var(--canon-spacing-md)}.cu-pl-none{padding-left:0}.cu-pl-sm{padding-left:var(--canon-spacing-sm)}.cu-pl-xl{padding-left:var(--canon-spacing-xl)}.cu-pl-xs{padding-left:var(--canon-spacing-xs)}.cu-pr-2xl{padding-right:var(--canon-spacing-2xl)}.cu-pr-lg{padding-right:var(--canon-spacing-lg)}.cu-pr-md{padding-right:var(--canon-spacing-md)}.cu-pr-none{padding-right:0}.cu-pr-sm{padding-right:var(--canon-spacing-sm)}.cu-pr-xl{padding-right:var(--canon-spacing-xl)}.cu-pr-xs{padding-right:var(--canon-spacing-xs)}.cu-pt-2xl{padding-top:var(--canon-spacing-2xl)}.cu-pt-lg{padding-top:var(--canon-spacing-lg)}.cu-pt-md{padding-top:var(--canon-spacing-md)}.cu-pt-none{padding-top:0}.cu-pt-sm{padding-top:var(--canon-spacing-sm)}.cu-pt-xl{padding-top:var(--canon-spacing-xl)}.cu-pt-xs{padding-top:var(--canon-spacing-xs)}.cu-px-2xl{padding-left:var(--canon-spacing-2xl);padding-right:var(--canon-spacing-2xl)}.cu-px-lg{padding-left:var(--canon-spacing-lg);padding-right:var(--canon-spacing-lg)}.cu-px-md{padding-left:var(--canon-spacing-md);padding-right:var(--canon-spacing-md)}.cu-px-none{padding-left:0;padding-right:0}.cu-px-sm{padding-left:var(--canon-spacing-sm);padding-right:var(--canon-spacing-sm)}.cu-px-xl{padding-left:var(--canon-spacing-xl);padding-right:var(--canon-spacing-xl)}.cu-px-xs{padding-left:var(--canon-spacing-xs);padding-right:var(--canon-spacing-xs)}.cu-py-2xl{padding-top:var(--canon-spacing-2xl);padding-bottom:var(--canon-spacing-2xl)}.cu-py-lg{padding-top:var(--canon-spacing-lg);padding-bottom:var(--canon-spacing-lg)}.cu-py-md{padding-top:var(--canon-spacing-md);padding-bottom:var(--canon-spacing-md)}.cu-py-none{padding-top:0;padding-bottom:0}.cu-py-sm{padding-top:var(--canon-spacing-sm);padding-bottom:var(--canon-spacing-sm)}.cu-py-xl{padding-top:var(--canon-spacing-xl);padding-bottom:var(--canon-spacing-xl)}.cu-py-xs{padding-top:var(--canon-spacing-xs);padding-bottom:var(--canon-spacing-xs)}.cu-rounded-2xl{border-radius:var(--canon-border-radius-2xl)}.cu-rounded-2xs{border-radius:var(--canon-border-radius-2xs)}.cu-rounded-lg{border-radius:var(--canon-border-radius-lg)}.cu-rounded-md{border-radius:var(--canon-border-radius-md)}.cu-rounded-none{border-radius:0}.cu-rounded-sm{border-radius:var(--canon-border-radius-sm)}.cu-rounded-xl{border-radius:var(--canon-border-radius-xl)}.cu-rounded-xs{border-radius:var(--canon-border-radius-xs)}.cu-row-span-1{grid-row:span 1/span 1}.cu-row-span-10{grid-row:span 10/span 10}.cu-row-span-11{grid-row:span 11/span 11}.cu-row-span-12{grid-row:span 12/span 12}.cu-row-span-2{grid-row:span 2/span 2}.cu-row-span-3{grid-row:span 3/span 3}.cu-row-span-4{grid-row:span 4/span 4}.cu-row-span-5{grid-row:span 5/span 5}.cu-row-span-6{grid-row:span 6/span 6}.cu-row-span-7{grid-row:span 7/span 7}.cu-row-span-8{grid-row:span 8/span 8}.cu-row-span-9{grid-row:span 9/span 9}.cu-row-span-auto{grid-row:span auto/span auto}.cu-wrap-reverse{flex-wrap:wrap-reverse}@media (width>=640px){.cu-sm-block{display:block}.cu-sm-border-base{border-color:var(--canon-border-base);border-style:solid;border-width:1px}.cu-sm-border-error{border-color:var(--canon-border-error);border-style:solid;border-width:1px}.cu-sm-border-none{border-width:0;border-color:#0000}.cu-sm-border-selected{border-color:var(--canon-border-selected);border-style:solid;border-width:1px}.cu-sm-border-warning{border-color:var(--canon-border-warning);border-style:solid;border-width:1px}.cu-sm-col-end-1{grid-column-end:1}.cu-sm-col-end-10{grid-column-end:10}.cu-sm-col-end-11{grid-column-end:11}.cu-sm-col-end-12{grid-column-end:12}.cu-sm-col-end-13{grid-column-end:13}.cu-sm-col-end-2{grid-column-end:2}.cu-sm-col-end-3{grid-column-end:3}.cu-sm-col-end-4{grid-column-end:4}.cu-sm-col-end-5{grid-column-end:5}.cu-sm-col-end-6{grid-column-end:6}.cu-sm-col-end-7{grid-column-end:7}.cu-sm-col-end-8{grid-column-end:8}.cu-sm-col-end-9{grid-column-end:9}.cu-sm-col-end-auto{grid-column-end:auto}.cu-sm-col-span-1{grid-column:span 1/span 1}.cu-sm-col-span-10{grid-column:span 10/span 10}.cu-sm-col-span-11{grid-column:span 11/span 11}.cu-sm-col-span-12{grid-column:span 12/span 12}.cu-sm-col-span-2{grid-column:span 2/span 2}.cu-sm-col-span-3{grid-column:span 3/span 3}.cu-sm-col-span-4{grid-column:span 4/span 4}.cu-sm-col-span-5{grid-column:span 5/span 5}.cu-sm-col-span-6{grid-column:span 6/span 6}.cu-sm-col-span-7{grid-column:span 7/span 7}.cu-sm-col-span-8{grid-column:span 8/span 8}.cu-sm-col-span-9{grid-column:span 9/span 9}.cu-sm-col-span-auto{grid-column:span auto/span auto}.cu-sm-col-start-1{grid-column-start:1}.cu-sm-col-start-10{grid-column-start:10}.cu-sm-col-start-11{grid-column-start:11}.cu-sm-col-start-12{grid-column-start:12}.cu-sm-col-start-13{grid-column-start:13}.cu-sm-col-start-2{grid-column-start:2}.cu-sm-col-start-3{grid-column-start:3}.cu-sm-col-start-4{grid-column-start:4}.cu-sm-col-start-5{grid-column-start:5}.cu-sm-col-start-6{grid-column-start:6}.cu-sm-col-start-7{grid-column-start:7}.cu-sm-col-start-8{grid-column-start:8}.cu-sm-col-start-9{grid-column-start:9}.cu-sm-col-start-auto{grid-column-start:auto}.cu-sm-flex{display:flex}.cu-sm-flex-col{flex-direction:column}.cu-sm-flex-nowrap{flex-wrap:nowrap}.cu-sm-flex-row{flex-direction:row}.cu-sm-flex-wrap{flex-wrap:wrap}.cu-sm-flex-wrap-reverse{flex-wrap:wrap-reverse}.cu-sm-gap-2xl{gap:var(--canon-spacing-2xl)}.cu-sm-gap-lg{gap:var(--canon-spacing-lg)}.cu-sm-gap-md{gap:var(--canon-spacing-md)}.cu-sm-gap-none{gap:0}.cu-sm-gap-sm{gap:var(--canon-spacing-sm)}.cu-sm-gap-xl{gap:var(--canon-spacing-xl)}.cu-sm-gap-xs{gap:var(--canon-spacing-xs)}.cu-sm-grid{display:grid}.cu-sm-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.cu-sm-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.cu-sm-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.cu-sm-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.cu-sm-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cu-sm-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cu-sm-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.cu-sm-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.cu-sm-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.cu-sm-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.cu-sm-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.cu-sm-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.cu-sm-grid-cols-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.cu-sm-hidden{display:none}.cu-sm-inline{display:inline}.cu-sm-inline-block{display:inline-block}.cu-sm-items-center{align-items:center}.cu-sm-items-end{align-items:flex-end}.cu-sm-items-start{align-items:flex-start}.cu-sm-items-stretch{align-items:stretch}.cu-sm-justify-around{justify-content:space-around}.cu-sm-justify-between{justify-content:space-between}.cu-sm-justify-center{justify-content:center}.cu-sm-justify-end{justify-content:flex-end}.cu-sm-justify-start{justify-content:flex-start}.cu-sm-justify-stretch{justify-content:stretch}.cu-sm-m-2xl{margin:var(--canon-spacing-2xl)}.cu-sm-m-lg{margin:var(--canon-spacing-lg)}.cu-sm-m-md{margin:var(--canon-spacing-md)}.cu-sm-m-none{margin:0}.cu-sm-m-sm{margin:var(--canon-spacing-sm)}.cu-sm-m-xl{margin:var(--canon-spacing-xl)}.cu-sm-m-xs{margin:var(--canon-spacing-xs)}.cu-sm-mb-2xl{margin-bottom:var(--canon-spacing-2xl)}.cu-sm-mb-lg{margin-bottom:var(--canon-spacing-lg)}.cu-sm-mb-md{margin-bottom:var(--canon-spacing-md)}.cu-sm-mb-none{margin-bottom:0}.cu-sm-mb-sm{margin-bottom:var(--canon-spacing-sm)}.cu-sm-mb-xl{margin-bottom:var(--canon-spacing-xl)}.cu-sm-mb-xs{margin-bottom:var(--canon-spacing-xs)}.cu-sm-ml-2xl{margin-left:var(--canon-spacing-2xl)}.cu-sm-ml-lg{margin-left:var(--canon-spacing-lg)}.cu-sm-ml-md{margin-left:var(--canon-spacing-md)}.cu-sm-ml-none{margin-left:0}.cu-sm-ml-sm{margin-left:var(--canon-spacing-sm)}.cu-sm-ml-xl{margin-left:var(--canon-spacing-xl)}.cu-sm-ml-xs{margin-left:var(--canon-spacing-xs)}.cu-sm-mr-2xl{margin-right:var(--canon-spacing-2xl)}.cu-sm-mr-lg{margin-right:var(--canon-spacing-lg)}.cu-sm-mr-md{margin-right:var(--canon-spacing-md)}.cu-sm-mr-none{margin-right:0}.cu-sm-mr-sm{margin-right:var(--canon-spacing-sm)}.cu-sm-mr-xl{margin-right:var(--canon-spacing-xl)}.cu-sm-mr-xs{margin-right:var(--canon-spacing-xs)}.cu-sm-mt-2xl{margin-top:var(--canon-spacing-2xl)}.cu-sm-mt-lg{margin-top:var(--canon-spacing-lg)}.cu-sm-mt-md{margin-top:var(--canon-spacing-md)}.cu-sm-mt-none{margin-top:0}.cu-sm-mt-sm{margin-top:var(--canon-spacing-sm)}.cu-sm-mt-xl{margin-top:var(--canon-spacing-xl)}.cu-sm-mt-xs{margin-top:var(--canon-spacing-xs)}.cu-sm-mx-2xl{margin-left:var(--canon-spacing-2xl);margin-right:var(--canon-spacing-2xl)}.cu-sm-mx-lg{margin-left:var(--canon-spacing-lg);margin-right:var(--canon-spacing-lg)}.cu-sm-mx-md{margin-left:var(--canon-spacing-md);margin-right:var(--canon-spacing-md)}.cu-sm-mx-none{margin-left:0;margin-right:0}.cu-sm-mx-sm{margin-left:var(--canon-spacing-sm);margin-right:var(--canon-spacing-sm)}.cu-sm-mx-xl{margin-left:var(--canon-spacing-xl);margin-right:var(--canon-spacing-xl)}.cu-sm-mx-xs{margin-left:var(--canon-spacing-xs);margin-right:var(--canon-spacing-xs)}.cu-sm-my-2xl{margin-top:var(--canon-spacing-2xl);margin-bottom:var(--canon-spacing-2xl)}.cu-sm-my-lg{margin-top:var(--canon-spacing-lg);margin-bottom:var(--canon-spacing-lg)}.cu-sm-my-md{margin-top:var(--canon-spacing-md);margin-bottom:var(--canon-spacing-md)}.cu-sm-my-none{margin-top:0;margin-bottom:0}.cu-sm-my-sm{margin-top:var(--canon-spacing-sm);margin-bottom:var(--canon-spacing-sm)}.cu-sm-my-xl{margin-top:var(--canon-spacing-xl);margin-bottom:var(--canon-spacing-xl)}.cu-sm-my-xs{margin-top:var(--canon-spacing-xs);margin-bottom:var(--canon-spacing-xs)}.cu-sm-p-2xl{padding:var(--canon-spacing-2xl)}.cu-sm-p-lg{padding:var(--canon-spacing-lg)}.cu-sm-p-md{padding:var(--canon-spacing-md)}.cu-sm-p-none{padding:0}.cu-sm-p-sm{padding:var(--canon-spacing-sm)}.cu-sm-p-xl{padding:var(--canon-spacing-xl)}.cu-sm-p-xs{padding:var(--canon-spacing-xs)}.cu-sm-pb-2xl{padding-bottom:var(--canon-spacing-2xl)}.cu-sm-pb-lg{padding-bottom:var(--canon-spacing-lg)}.cu-sm-pb-md{padding-bottom:var(--canon-spacing-md)}.cu-sm-pb-none{padding-bottom:0}.cu-sm-pb-sm{padding-bottom:var(--canon-spacing-sm)}.cu-sm-pb-xl{padding-bottom:var(--canon-spacing-xl)}.cu-sm-pb-xs{padding-bottom:var(--canon-spacing-xs)}.cu-sm-pl-2xl{padding-left:var(--canon-spacing-2xl)}.cu-sm-pl-lg{padding-left:var(--canon-spacing-lg)}.cu-sm-pl-md{padding-left:var(--canon-spacing-md)}.cu-sm-pl-none{padding-left:0}.cu-sm-pl-sm{padding-left:var(--canon-spacing-sm)}.cu-sm-pl-xl{padding-left:var(--canon-spacing-xl)}.cu-sm-pl-xs{padding-left:var(--canon-spacing-xs)}.cu-sm-pr-2xl{padding-right:var(--canon-spacing-2xl)}.cu-sm-pr-lg{padding-right:var(--canon-spacing-lg)}.cu-sm-pr-md{padding-right:var(--canon-spacing-md)}.cu-sm-pr-none{padding-right:0}.cu-sm-pr-sm{padding-right:var(--canon-spacing-sm)}.cu-sm-pr-xl{padding-right:var(--canon-spacing-xl)}.cu-sm-pr-xs{padding-right:var(--canon-spacing-xs)}.cu-sm-pt-2xl{padding-top:var(--canon-spacing-2xl)}.cu-sm-pt-lg{padding-top:var(--canon-spacing-lg)}.cu-sm-pt-md{padding-top:var(--canon-spacing-md)}.cu-sm-pt-none{padding-top:0}.cu-sm-pt-sm{padding-top:var(--canon-spacing-sm)}.cu-sm-pt-xl{padding-top:var(--canon-spacing-xl)}.cu-sm-pt-xs{padding-top:var(--canon-spacing-xs)}.cu-sm-px-2xl{padding-left:var(--canon-spacing-2xl);padding-right:var(--canon-spacing-2xl)}.cu-sm-px-lg{padding-left:var(--canon-spacing-lg);padding-right:var(--canon-spacing-lg)}.cu-sm-px-md{padding-left:var(--canon-spacing-md);padding-right:var(--canon-spacing-md)}.cu-sm-px-none{padding-left:0;padding-right:0}.cu-sm-px-sm{padding-left:var(--canon-spacing-sm);padding-right:var(--canon-spacing-sm)}.cu-sm-px-xl{padding-left:var(--canon-spacing-xl);padding-right:var(--canon-spacing-xl)}.cu-sm-px-xs{padding-left:var(--canon-spacing-xs);padding-right:var(--canon-spacing-xs)}.cu-sm-py-2xl{padding-top:var(--canon-spacing-2xl);padding-bottom:var(--canon-spacing-2xl)}.cu-sm-py-lg{padding-top:var(--canon-spacing-lg);padding-bottom:var(--canon-spacing-lg)}.cu-sm-py-md{padding-top:var(--canon-spacing-md);padding-bottom:var(--canon-spacing-md)}.cu-sm-py-none{padding-top:0;padding-bottom:0}.cu-sm-py-sm{padding-top:var(--canon-spacing-sm);padding-bottom:var(--canon-spacing-sm)}.cu-sm-py-xl{padding-top:var(--canon-spacing-xl);padding-bottom:var(--canon-spacing-xl)}.cu-sm-py-xs{padding-top:var(--canon-spacing-xs);padding-bottom:var(--canon-spacing-xs)}.cu-sm-rounded-2xl{border-radius:var(--canon-border-radius-2xl)}.cu-sm-rounded-2xs{border-radius:var(--canon-border-radius-2xs)}.cu-sm-rounded-lg{border-radius:var(--canon-border-radius-lg)}.cu-sm-rounded-md{border-radius:var(--canon-border-radius-md)}.cu-sm-rounded-none{border-radius:0}.cu-sm-rounded-sm{border-radius:var(--canon-border-radius-sm)}.cu-sm-rounded-xl{border-radius:var(--canon-border-radius-xl)}.cu-sm-rounded-xs{border-radius:var(--canon-border-radius-xs)}.cu-sm-row-span-1{grid-row:span 1/span 1}.cu-sm-row-span-10{grid-row:span 10/span 10}.cu-sm-row-span-11{grid-row:span 11/span 11}.cu-sm-row-span-12{grid-row:span 12/span 12}.cu-sm-row-span-2{grid-row:span 2/span 2}.cu-sm-row-span-3{grid-row:span 3/span 3}.cu-sm-row-span-4{grid-row:span 4/span 4}.cu-sm-row-span-5{grid-row:span 5/span 5}.cu-sm-row-span-6{grid-row:span 6/span 6}.cu-sm-row-span-7{grid-row:span 7/span 7}.cu-sm-row-span-8{grid-row:span 8/span 8}.cu-sm-row-span-9{grid-row:span 9/span 9}.cu-sm-row-span-auto{grid-row:span auto/span auto}.cu-sm-wrap-reverse{flex-wrap:wrap-reverse}}@media (width>=768px){.cu-md-block{display:block}.cu-md-border-base{border-color:var(--canon-border-base);border-style:solid;border-width:1px}.cu-md-border-error{border-color:var(--canon-border-error);border-style:solid;border-width:1px}.cu-md-border-none{border-width:0;border-color:#0000}.cu-md-border-selected{border-color:var(--canon-border-selected);border-style:solid;border-width:1px}.cu-md-border-warning{border-color:var(--canon-border-warning);border-style:solid;border-width:1px}.cu-md-col-end-1{grid-column-end:1}.cu-md-col-end-10{grid-column-end:10}.cu-md-col-end-11{grid-column-end:11}.cu-md-col-end-12{grid-column-end:12}.cu-md-col-end-13{grid-column-end:13}.cu-md-col-end-2{grid-column-end:2}.cu-md-col-end-3{grid-column-end:3}.cu-md-col-end-4{grid-column-end:4}.cu-md-col-end-5{grid-column-end:5}.cu-md-col-end-6{grid-column-end:6}.cu-md-col-end-7{grid-column-end:7}.cu-md-col-end-8{grid-column-end:8}.cu-md-col-end-9{grid-column-end:9}.cu-md-col-end-auto{grid-column-end:auto}.cu-md-col-span-1{grid-column:span 1/span 1}.cu-md-col-span-10{grid-column:span 10/span 10}.cu-md-col-span-11{grid-column:span 11/span 11}.cu-md-col-span-12{grid-column:span 12/span 12}.cu-md-col-span-2{grid-column:span 2/span 2}.cu-md-col-span-3{grid-column:span 3/span 3}.cu-md-col-span-4{grid-column:span 4/span 4}.cu-md-col-span-5{grid-column:span 5/span 5}.cu-md-col-span-6{grid-column:span 6/span 6}.cu-md-col-span-7{grid-column:span 7/span 7}.cu-md-col-span-8{grid-column:span 8/span 8}.cu-md-col-span-9{grid-column:span 9/span 9}.cu-md-col-span-auto{grid-column:span auto/span auto}.cu-md-col-start-1{grid-column-start:1}.cu-md-col-start-10{grid-column-start:10}.cu-md-col-start-11{grid-column-start:11}.cu-md-col-start-12{grid-column-start:12}.cu-md-col-start-13{grid-column-start:13}.cu-md-col-start-2{grid-column-start:2}.cu-md-col-start-3{grid-column-start:3}.cu-md-col-start-4{grid-column-start:4}.cu-md-col-start-5{grid-column-start:5}.cu-md-col-start-6{grid-column-start:6}.cu-md-col-start-7{grid-column-start:7}.cu-md-col-start-8{grid-column-start:8}.cu-md-col-start-9{grid-column-start:9}.cu-md-col-start-auto{grid-column-start:auto}.cu-md-flex{display:flex}.cu-md-flex-col{flex-direction:column}.cu-md-flex-nowrap{flex-wrap:nowrap}.cu-md-flex-row{flex-direction:row}.cu-md-flex-wrap{flex-wrap:wrap}.cu-md-flex-wrap-reverse{flex-wrap:wrap-reverse}.cu-md-gap-2xl{gap:var(--canon-spacing-2xl)}.cu-md-gap-lg{gap:var(--canon-spacing-lg)}.cu-md-gap-md{gap:var(--canon-spacing-md)}.cu-md-gap-none{gap:0}.cu-md-gap-sm{gap:var(--canon-spacing-sm)}.cu-md-gap-xl{gap:var(--canon-spacing-xl)}.cu-md-gap-xs{gap:var(--canon-spacing-xs)}.cu-md-grid{display:grid}.cu-md-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.cu-md-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.cu-md-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.cu-md-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.cu-md-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cu-md-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cu-md-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.cu-md-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.cu-md-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.cu-md-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.cu-md-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.cu-md-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.cu-md-grid-cols-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.cu-md-hidden{display:none}.cu-md-inline{display:inline}.cu-md-inline-block{display:inline-block}.cu-md-items-center{align-items:center}.cu-md-items-end{align-items:flex-end}.cu-md-items-start{align-items:flex-start}.cu-md-items-stretch{align-items:stretch}.cu-md-justify-around{justify-content:space-around}.cu-md-justify-between{justify-content:space-between}.cu-md-justify-center{justify-content:center}.cu-md-justify-end{justify-content:flex-end}.cu-md-justify-start{justify-content:flex-start}.cu-md-justify-stretch{justify-content:stretch}.cu-md-m-2xl{margin:var(--canon-spacing-2xl)}.cu-md-m-lg{margin:var(--canon-spacing-lg)}.cu-md-m-md{margin:var(--canon-spacing-md)}.cu-md-m-none{margin:0}.cu-md-m-sm{margin:var(--canon-spacing-sm)}.cu-md-m-xl{margin:var(--canon-spacing-xl)}.cu-md-m-xs{margin:var(--canon-spacing-xs)}.cu-md-mb-2xl{margin-bottom:var(--canon-spacing-2xl)}.cu-md-mb-lg{margin-bottom:var(--canon-spacing-lg)}.cu-md-mb-md{margin-bottom:var(--canon-spacing-md)}.cu-md-mb-none{margin-bottom:0}.cu-md-mb-sm{margin-bottom:var(--canon-spacing-sm)}.cu-md-mb-xl{margin-bottom:var(--canon-spacing-xl)}.cu-md-mb-xs{margin-bottom:var(--canon-spacing-xs)}.cu-md-ml-2xl{margin-left:var(--canon-spacing-2xl)}.cu-md-ml-lg{margin-left:var(--canon-spacing-lg)}.cu-md-ml-md{margin-left:var(--canon-spacing-md)}.cu-md-ml-none{margin-left:0}.cu-md-ml-sm{margin-left:var(--canon-spacing-sm)}.cu-md-ml-xl{margin-left:var(--canon-spacing-xl)}.cu-md-ml-xs{margin-left:var(--canon-spacing-xs)}.cu-md-mr-2xl{margin-right:var(--canon-spacing-2xl)}.cu-md-mr-lg{margin-right:var(--canon-spacing-lg)}.cu-md-mr-md{margin-right:var(--canon-spacing-md)}.cu-md-mr-none{margin-right:0}.cu-md-mr-sm{margin-right:var(--canon-spacing-sm)}.cu-md-mr-xl{margin-right:var(--canon-spacing-xl)}.cu-md-mr-xs{margin-right:var(--canon-spacing-xs)}.cu-md-mt-2xl{margin-top:var(--canon-spacing-2xl)}.cu-md-mt-lg{margin-top:var(--canon-spacing-lg)}.cu-md-mt-md{margin-top:var(--canon-spacing-md)}.cu-md-mt-none{margin-top:0}.cu-md-mt-sm{margin-top:var(--canon-spacing-sm)}.cu-md-mt-xl{margin-top:var(--canon-spacing-xl)}.cu-md-mt-xs{margin-top:var(--canon-spacing-xs)}.cu-md-mx-2xl{margin-left:var(--canon-spacing-2xl);margin-right:var(--canon-spacing-2xl)}.cu-md-mx-lg{margin-left:var(--canon-spacing-lg);margin-right:var(--canon-spacing-lg)}.cu-md-mx-md{margin-left:var(--canon-spacing-md);margin-right:var(--canon-spacing-md)}.cu-md-mx-none{margin-left:0;margin-right:0}.cu-md-mx-sm{margin-left:var(--canon-spacing-sm);margin-right:var(--canon-spacing-sm)}.cu-md-mx-xl{margin-left:var(--canon-spacing-xl);margin-right:var(--canon-spacing-xl)}.cu-md-mx-xs{margin-left:var(--canon-spacing-xs);margin-right:var(--canon-spacing-xs)}.cu-md-my-2xl{margin-top:var(--canon-spacing-2xl);margin-bottom:var(--canon-spacing-2xl)}.cu-md-my-lg{margin-top:var(--canon-spacing-lg);margin-bottom:var(--canon-spacing-lg)}.cu-md-my-md{margin-top:var(--canon-spacing-md);margin-bottom:var(--canon-spacing-md)}.cu-md-my-none{margin-top:0;margin-bottom:0}.cu-md-my-sm{margin-top:var(--canon-spacing-sm);margin-bottom:var(--canon-spacing-sm)}.cu-md-my-xl{margin-top:var(--canon-spacing-xl);margin-bottom:var(--canon-spacing-xl)}.cu-md-my-xs{margin-top:var(--canon-spacing-xs);margin-bottom:var(--canon-spacing-xs)}.cu-md-p-2xl{padding:var(--canon-spacing-2xl)}.cu-md-p-lg{padding:var(--canon-spacing-lg)}.cu-md-p-md{padding:var(--canon-spacing-md)}.cu-md-p-none{padding:0}.cu-md-p-sm{padding:var(--canon-spacing-sm)}.cu-md-p-xl{padding:var(--canon-spacing-xl)}.cu-md-p-xs{padding:var(--canon-spacing-xs)}.cu-md-pb-2xl{padding-bottom:var(--canon-spacing-2xl)}.cu-md-pb-lg{padding-bottom:var(--canon-spacing-lg)}.cu-md-pb-md{padding-bottom:var(--canon-spacing-md)}.cu-md-pb-none{padding-bottom:0}.cu-md-pb-sm{padding-bottom:var(--canon-spacing-sm)}.cu-md-pb-xl{padding-bottom:var(--canon-spacing-xl)}.cu-md-pb-xs{padding-bottom:var(--canon-spacing-xs)}.cu-md-pl-2xl{padding-left:var(--canon-spacing-2xl)}.cu-md-pl-lg{padding-left:var(--canon-spacing-lg)}.cu-md-pl-md{padding-left:var(--canon-spacing-md)}.cu-md-pl-none{padding-left:0}.cu-md-pl-sm{padding-left:var(--canon-spacing-sm)}.cu-md-pl-xl{padding-left:var(--canon-spacing-xl)}.cu-md-pl-xs{padding-left:var(--canon-spacing-xs)}.cu-md-pr-2xl{padding-right:var(--canon-spacing-2xl)}.cu-md-pr-lg{padding-right:var(--canon-spacing-lg)}.cu-md-pr-md{padding-right:var(--canon-spacing-md)}.cu-md-pr-none{padding-right:0}.cu-md-pr-sm{padding-right:var(--canon-spacing-sm)}.cu-md-pr-xl{padding-right:var(--canon-spacing-xl)}.cu-md-pr-xs{padding-right:var(--canon-spacing-xs)}.cu-md-pt-2xl{padding-top:var(--canon-spacing-2xl)}.cu-md-pt-lg{padding-top:var(--canon-spacing-lg)}.cu-md-pt-md{padding-top:var(--canon-spacing-md)}.cu-md-pt-none{padding-top:0}.cu-md-pt-sm{padding-top:var(--canon-spacing-sm)}.cu-md-pt-xl{padding-top:var(--canon-spacing-xl)}.cu-md-pt-xs{padding-top:var(--canon-spacing-xs)}.cu-md-px-2xl{padding-left:var(--canon-spacing-2xl);padding-right:var(--canon-spacing-2xl)}.cu-md-px-lg{padding-left:var(--canon-spacing-lg);padding-right:var(--canon-spacing-lg)}.cu-md-px-md{padding-left:var(--canon-spacing-md);padding-right:var(--canon-spacing-md)}.cu-md-px-none{padding-left:0;padding-right:0}.cu-md-px-sm{padding-left:var(--canon-spacing-sm);padding-right:var(--canon-spacing-sm)}.cu-md-px-xl{padding-left:var(--canon-spacing-xl);padding-right:var(--canon-spacing-xl)}.cu-md-px-xs{padding-left:var(--canon-spacing-xs);padding-right:var(--canon-spacing-xs)}.cu-md-py-2xl{padding-top:var(--canon-spacing-2xl);padding-bottom:var(--canon-spacing-2xl)}.cu-md-py-lg{padding-top:var(--canon-spacing-lg);padding-bottom:var(--canon-spacing-lg)}.cu-md-py-md{padding-top:var(--canon-spacing-md);padding-bottom:var(--canon-spacing-md)}.cu-md-py-none{padding-top:0;padding-bottom:0}.cu-md-py-sm{padding-top:var(--canon-spacing-sm);padding-bottom:var(--canon-spacing-sm)}.cu-md-py-xl{padding-top:var(--canon-spacing-xl);padding-bottom:var(--canon-spacing-xl)}.cu-md-py-xs{padding-top:var(--canon-spacing-xs);padding-bottom:var(--canon-spacing-xs)}.cu-md-rounded-2xl{border-radius:var(--canon-border-radius-2xl)}.cu-md-rounded-2xs{border-radius:var(--canon-border-radius-2xs)}.cu-md-rounded-lg{border-radius:var(--canon-border-radius-lg)}.cu-md-rounded-md{border-radius:var(--canon-border-radius-md)}.cu-md-rounded-none{border-radius:0}.cu-md-rounded-sm{border-radius:var(--canon-border-radius-sm)}.cu-md-rounded-xl{border-radius:var(--canon-border-radius-xl)}.cu-md-rounded-xs{border-radius:var(--canon-border-radius-xs)}.cu-md-row-span-1{grid-row:span 1/span 1}.cu-md-row-span-10{grid-row:span 10/span 10}.cu-md-row-span-11{grid-row:span 11/span 11}.cu-md-row-span-12{grid-row:span 12/span 12}.cu-md-row-span-2{grid-row:span 2/span 2}.cu-md-row-span-3{grid-row:span 3/span 3}.cu-md-row-span-4{grid-row:span 4/span 4}.cu-md-row-span-5{grid-row:span 5/span 5}.cu-md-row-span-6{grid-row:span 6/span 6}.cu-md-row-span-7{grid-row:span 7/span 7}.cu-md-row-span-8{grid-row:span 8/span 8}.cu-md-row-span-9{grid-row:span 9/span 9}.cu-md-row-span-auto{grid-row:span auto/span auto}.cu-md-wrap-reverse{flex-wrap:wrap-reverse}}@media (width>=1024px){.cu-lg-block{display:block}.cu-lg-border-base{border-color:var(--canon-border-base);border-style:solid;border-width:1px}.cu-lg-border-error{border-color:var(--canon-border-error);border-style:solid;border-width:1px}.cu-lg-border-none{border-width:0;border-color:#0000}.cu-lg-border-selected{border-color:var(--canon-border-selected);border-style:solid;border-width:1px}.cu-lg-border-warning{border-color:var(--canon-border-warning);border-style:solid;border-width:1px}.cu-lg-col-end-1{grid-column-end:1}.cu-lg-col-end-10{grid-column-end:10}.cu-lg-col-end-11{grid-column-end:11}.cu-lg-col-end-12{grid-column-end:12}.cu-lg-col-end-13{grid-column-end:13}.cu-lg-col-end-2{grid-column-end:2}.cu-lg-col-end-3{grid-column-end:3}.cu-lg-col-end-4{grid-column-end:4}.cu-lg-col-end-5{grid-column-end:5}.cu-lg-col-end-6{grid-column-end:6}.cu-lg-col-end-7{grid-column-end:7}.cu-lg-col-end-8{grid-column-end:8}.cu-lg-col-end-9{grid-column-end:9}.cu-lg-col-end-auto{grid-column-end:auto}.cu-lg-col-span-1{grid-column:span 1/span 1}.cu-lg-col-span-10{grid-column:span 10/span 10}.cu-lg-col-span-11{grid-column:span 11/span 11}.cu-lg-col-span-12{grid-column:span 12/span 12}.cu-lg-col-span-2{grid-column:span 2/span 2}.cu-lg-col-span-3{grid-column:span 3/span 3}.cu-lg-col-span-4{grid-column:span 4/span 4}.cu-lg-col-span-5{grid-column:span 5/span 5}.cu-lg-col-span-6{grid-column:span 6/span 6}.cu-lg-col-span-7{grid-column:span 7/span 7}.cu-lg-col-span-8{grid-column:span 8/span 8}.cu-lg-col-span-9{grid-column:span 9/span 9}.cu-lg-col-span-auto{grid-column:span auto/span auto}.cu-lg-col-start-1{grid-column-start:1}.cu-lg-col-start-10{grid-column-start:10}.cu-lg-col-start-11{grid-column-start:11}.cu-lg-col-start-12{grid-column-start:12}.cu-lg-col-start-13{grid-column-start:13}.cu-lg-col-start-2{grid-column-start:2}.cu-lg-col-start-3{grid-column-start:3}.cu-lg-col-start-4{grid-column-start:4}.cu-lg-col-start-5{grid-column-start:5}.cu-lg-col-start-6{grid-column-start:6}.cu-lg-col-start-7{grid-column-start:7}.cu-lg-col-start-8{grid-column-start:8}.cu-lg-col-start-9{grid-column-start:9}.cu-lg-col-start-auto{grid-column-start:auto}.cu-lg-flex{display:flex}.cu-lg-flex-col{flex-direction:column}.cu-lg-flex-nowrap{flex-wrap:nowrap}.cu-lg-flex-row{flex-direction:row}.cu-lg-flex-wrap{flex-wrap:wrap}.cu-lg-flex-wrap-reverse{flex-wrap:wrap-reverse}.cu-lg-gap-2xl{gap:var(--canon-spacing-2xl)}.cu-lg-gap-lg{gap:var(--canon-spacing-lg)}.cu-lg-gap-md{gap:var(--canon-spacing-md)}.cu-lg-gap-none{gap:0}.cu-lg-gap-sm{gap:var(--canon-spacing-sm)}.cu-lg-gap-xl{gap:var(--canon-spacing-xl)}.cu-lg-gap-xs{gap:var(--canon-spacing-xs)}.cu-lg-grid{display:grid}.cu-lg-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.cu-lg-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.cu-lg-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.cu-lg-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.cu-lg-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cu-lg-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cu-lg-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.cu-lg-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.cu-lg-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.cu-lg-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.cu-lg-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.cu-lg-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.cu-lg-grid-cols-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.cu-lg-hidden{display:none}.cu-lg-inline{display:inline}.cu-lg-inline-block{display:inline-block}.cu-lg-items-center{align-items:center}.cu-lg-items-end{align-items:flex-end}.cu-lg-items-start{align-items:flex-start}.cu-lg-items-stretch{align-items:stretch}.cu-lg-justify-around{justify-content:space-around}.cu-lg-justify-between{justify-content:space-between}.cu-lg-justify-center{justify-content:center}.cu-lg-justify-end{justify-content:flex-end}.cu-lg-justify-start{justify-content:flex-start}.cu-lg-justify-stretch{justify-content:stretch}.cu-lg-m-2xl{margin:var(--canon-spacing-2xl)}.cu-lg-m-lg{margin:var(--canon-spacing-lg)}.cu-lg-m-md{margin:var(--canon-spacing-md)}.cu-lg-m-none{margin:0}.cu-lg-m-sm{margin:var(--canon-spacing-sm)}.cu-lg-m-xl{margin:var(--canon-spacing-xl)}.cu-lg-m-xs{margin:var(--canon-spacing-xs)}.cu-lg-mb-2xl{margin-bottom:var(--canon-spacing-2xl)}.cu-lg-mb-lg{margin-bottom:var(--canon-spacing-lg)}.cu-lg-mb-md{margin-bottom:var(--canon-spacing-md)}.cu-lg-mb-none{margin-bottom:0}.cu-lg-mb-sm{margin-bottom:var(--canon-spacing-sm)}.cu-lg-mb-xl{margin-bottom:var(--canon-spacing-xl)}.cu-lg-mb-xs{margin-bottom:var(--canon-spacing-xs)}.cu-lg-ml-2xl{margin-left:var(--canon-spacing-2xl)}.cu-lg-ml-lg{margin-left:var(--canon-spacing-lg)}.cu-lg-ml-md{margin-left:var(--canon-spacing-md)}.cu-lg-ml-none{margin-left:0}.cu-lg-ml-sm{margin-left:var(--canon-spacing-sm)}.cu-lg-ml-xl{margin-left:var(--canon-spacing-xl)}.cu-lg-ml-xs{margin-left:var(--canon-spacing-xs)}.cu-lg-mr-2xl{margin-right:var(--canon-spacing-2xl)}.cu-lg-mr-lg{margin-right:var(--canon-spacing-lg)}.cu-lg-mr-md{margin-right:var(--canon-spacing-md)}.cu-lg-mr-none{margin-right:0}.cu-lg-mr-sm{margin-right:var(--canon-spacing-sm)}.cu-lg-mr-xl{margin-right:var(--canon-spacing-xl)}.cu-lg-mr-xs{margin-right:var(--canon-spacing-xs)}.cu-lg-mt-2xl{margin-top:var(--canon-spacing-2xl)}.cu-lg-mt-lg{margin-top:var(--canon-spacing-lg)}.cu-lg-mt-md{margin-top:var(--canon-spacing-md)}.cu-lg-mt-none{margin-top:0}.cu-lg-mt-sm{margin-top:var(--canon-spacing-sm)}.cu-lg-mt-xl{margin-top:var(--canon-spacing-xl)}.cu-lg-mt-xs{margin-top:var(--canon-spacing-xs)}.cu-lg-mx-2xl{margin-left:var(--canon-spacing-2xl);margin-right:var(--canon-spacing-2xl)}.cu-lg-mx-lg{margin-left:var(--canon-spacing-lg);margin-right:var(--canon-spacing-lg)}.cu-lg-mx-md{margin-left:var(--canon-spacing-md);margin-right:var(--canon-spacing-md)}.cu-lg-mx-none{margin-left:0;margin-right:0}.cu-lg-mx-sm{margin-left:var(--canon-spacing-sm);margin-right:var(--canon-spacing-sm)}.cu-lg-mx-xl{margin-left:var(--canon-spacing-xl);margin-right:var(--canon-spacing-xl)}.cu-lg-mx-xs{margin-left:var(--canon-spacing-xs);margin-right:var(--canon-spacing-xs)}.cu-lg-my-2xl{margin-top:var(--canon-spacing-2xl);margin-bottom:var(--canon-spacing-2xl)}.cu-lg-my-lg{margin-top:var(--canon-spacing-lg);margin-bottom:var(--canon-spacing-lg)}.cu-lg-my-md{margin-top:var(--canon-spacing-md);margin-bottom:var(--canon-spacing-md)}.cu-lg-my-none{margin-top:0;margin-bottom:0}.cu-lg-my-sm{margin-top:var(--canon-spacing-sm);margin-bottom:var(--canon-spacing-sm)}.cu-lg-my-xl{margin-top:var(--canon-spacing-xl);margin-bottom:var(--canon-spacing-xl)}.cu-lg-my-xs{margin-top:var(--canon-spacing-xs);margin-bottom:var(--canon-spacing-xs)}.cu-lg-p-2xl{padding:var(--canon-spacing-2xl)}.cu-lg-p-lg{padding:var(--canon-spacing-lg)}.cu-lg-p-md{padding:var(--canon-spacing-md)}.cu-lg-p-none{padding:0}.cu-lg-p-sm{padding:var(--canon-spacing-sm)}.cu-lg-p-xl{padding:var(--canon-spacing-xl)}.cu-lg-p-xs{padding:var(--canon-spacing-xs)}.cu-lg-pb-2xl{padding-bottom:var(--canon-spacing-2xl)}.cu-lg-pb-lg{padding-bottom:var(--canon-spacing-lg)}.cu-lg-pb-md{padding-bottom:var(--canon-spacing-md)}.cu-lg-pb-none{padding-bottom:0}.cu-lg-pb-sm{padding-bottom:var(--canon-spacing-sm)}.cu-lg-pb-xl{padding-bottom:var(--canon-spacing-xl)}.cu-lg-pb-xs{padding-bottom:var(--canon-spacing-xs)}.cu-lg-pl-2xl{padding-left:var(--canon-spacing-2xl)}.cu-lg-pl-lg{padding-left:var(--canon-spacing-lg)}.cu-lg-pl-md{padding-left:var(--canon-spacing-md)}.cu-lg-pl-none{padding-left:0}.cu-lg-pl-sm{padding-left:var(--canon-spacing-sm)}.cu-lg-pl-xl{padding-left:var(--canon-spacing-xl)}.cu-lg-pl-xs{padding-left:var(--canon-spacing-xs)}.cu-lg-pr-2xl{padding-right:var(--canon-spacing-2xl)}.cu-lg-pr-lg{padding-right:var(--canon-spacing-lg)}.cu-lg-pr-md{padding-right:var(--canon-spacing-md)}.cu-lg-pr-none{padding-right:0}.cu-lg-pr-sm{padding-right:var(--canon-spacing-sm)}.cu-lg-pr-xl{padding-right:var(--canon-spacing-xl)}.cu-lg-pr-xs{padding-right:var(--canon-spacing-xs)}.cu-lg-pt-2xl{padding-top:var(--canon-spacing-2xl)}.cu-lg-pt-lg{padding-top:var(--canon-spacing-lg)}.cu-lg-pt-md{padding-top:var(--canon-spacing-md)}.cu-lg-pt-none{padding-top:0}.cu-lg-pt-sm{padding-top:var(--canon-spacing-sm)}.cu-lg-pt-xl{padding-top:var(--canon-spacing-xl)}.cu-lg-pt-xs{padding-top:var(--canon-spacing-xs)}.cu-lg-px-2xl{padding-left:var(--canon-spacing-2xl);padding-right:var(--canon-spacing-2xl)}.cu-lg-px-lg{padding-left:var(--canon-spacing-lg);padding-right:var(--canon-spacing-lg)}.cu-lg-px-md{padding-left:var(--canon-spacing-md);padding-right:var(--canon-spacing-md)}.cu-lg-px-none{padding-left:0;padding-right:0}.cu-lg-px-sm{padding-left:var(--canon-spacing-sm);padding-right:var(--canon-spacing-sm)}.cu-lg-px-xl{padding-left:var(--canon-spacing-xl);padding-right:var(--canon-spacing-xl)}.cu-lg-px-xs{padding-left:var(--canon-spacing-xs);padding-right:var(--canon-spacing-xs)}.cu-lg-py-2xl{padding-top:var(--canon-spacing-2xl);padding-bottom:var(--canon-spacing-2xl)}.cu-lg-py-lg{padding-top:var(--canon-spacing-lg);padding-bottom:var(--canon-spacing-lg)}.cu-lg-py-md{padding-top:var(--canon-spacing-md);padding-bottom:var(--canon-spacing-md)}.cu-lg-py-none{padding-top:0;padding-bottom:0}.cu-lg-py-sm{padding-top:var(--canon-spacing-sm);padding-bottom:var(--canon-spacing-sm)}.cu-lg-py-xl{padding-top:var(--canon-spacing-xl);padding-bottom:var(--canon-spacing-xl)}.cu-lg-py-xs{padding-top:var(--canon-spacing-xs);padding-bottom:var(--canon-spacing-xs)}.cu-lg-rounded-2xl{border-radius:var(--canon-border-radius-2xl)}.cu-lg-rounded-2xs{border-radius:var(--canon-border-radius-2xs)}.cu-lg-rounded-lg{border-radius:var(--canon-border-radius-lg)}.cu-lg-rounded-md{border-radius:var(--canon-border-radius-md)}.cu-lg-rounded-none{border-radius:0}.cu-lg-rounded-sm{border-radius:var(--canon-border-radius-sm)}.cu-lg-rounded-xl{border-radius:var(--canon-border-radius-xl)}.cu-lg-rounded-xs{border-radius:var(--canon-border-radius-xs)}.cu-lg-row-span-1{grid-row:span 1/span 1}.cu-lg-row-span-10{grid-row:span 10/span 10}.cu-lg-row-span-11{grid-row:span 11/span 11}.cu-lg-row-span-12{grid-row:span 12/span 12}.cu-lg-row-span-2{grid-row:span 2/span 2}.cu-lg-row-span-3{grid-row:span 3/span 3}.cu-lg-row-span-4{grid-row:span 4/span 4}.cu-lg-row-span-5{grid-row:span 5/span 5}.cu-lg-row-span-6{grid-row:span 6/span 6}.cu-lg-row-span-7{grid-row:span 7/span 7}.cu-lg-row-span-8{grid-row:span 8/span 8}.cu-lg-row-span-9{grid-row:span 9/span 9}.cu-lg-row-span-auto{grid-row:span auto/span auto}.cu-lg-wrap-reverse{flex-wrap:wrap-reverse}}@media (width>=1280px){.cu-xl-block{display:block}.cu-xl-border-base{border-color:var(--canon-border-base);border-style:solid;border-width:1px}.cu-xl-border-error{border-color:var(--canon-border-error);border-style:solid;border-width:1px}.cu-xl-border-none{border-width:0;border-color:#0000}.cu-xl-border-selected{border-color:var(--canon-border-selected);border-style:solid;border-width:1px}.cu-xl-border-warning{border-color:var(--canon-border-warning);border-style:solid;border-width:1px}.cu-xl-col-end-1{grid-column-end:1}.cu-xl-col-end-10{grid-column-end:10}.cu-xl-col-end-11{grid-column-end:11}.cu-xl-col-end-12{grid-column-end:12}.cu-xl-col-end-13{grid-column-end:13}.cu-xl-col-end-2{grid-column-end:2}.cu-xl-col-end-3{grid-column-end:3}.cu-xl-col-end-4{grid-column-end:4}.cu-xl-col-end-5{grid-column-end:5}.cu-xl-col-end-6{grid-column-end:6}.cu-xl-col-end-7{grid-column-end:7}.cu-xl-col-end-8{grid-column-end:8}.cu-xl-col-end-9{grid-column-end:9}.cu-xl-col-end-auto{grid-column-end:auto}.cu-xl-col-span-1{grid-column:span 1/span 1}.cu-xl-col-span-10{grid-column:span 10/span 10}.cu-xl-col-span-11{grid-column:span 11/span 11}.cu-xl-col-span-12{grid-column:span 12/span 12}.cu-xl-col-span-2{grid-column:span 2/span 2}.cu-xl-col-span-3{grid-column:span 3/span 3}.cu-xl-col-span-4{grid-column:span 4/span 4}.cu-xl-col-span-5{grid-column:span 5/span 5}.cu-xl-col-span-6{grid-column:span 6/span 6}.cu-xl-col-span-7{grid-column:span 7/span 7}.cu-xl-col-span-8{grid-column:span 8/span 8}.cu-xl-col-span-9{grid-column:span 9/span 9}.cu-xl-col-span-auto{grid-column:span auto/span auto}.cu-xl-col-start-1{grid-column-start:1}.cu-xl-col-start-10{grid-column-start:10}.cu-xl-col-start-11{grid-column-start:11}.cu-xl-col-start-12{grid-column-start:12}.cu-xl-col-start-13{grid-column-start:13}.cu-xl-col-start-2{grid-column-start:2}.cu-xl-col-start-3{grid-column-start:3}.cu-xl-col-start-4{grid-column-start:4}.cu-xl-col-start-5{grid-column-start:5}.cu-xl-col-start-6{grid-column-start:6}.cu-xl-col-start-7{grid-column-start:7}.cu-xl-col-start-8{grid-column-start:8}.cu-xl-col-start-9{grid-column-start:9}.cu-xl-col-start-auto{grid-column-start:auto}.cu-xl-flex{display:flex}.cu-xl-flex-col{flex-direction:column}.cu-xl-flex-nowrap{flex-wrap:nowrap}.cu-xl-flex-row{flex-direction:row}.cu-xl-flex-wrap{flex-wrap:wrap}.cu-xl-flex-wrap-reverse{flex-wrap:wrap-reverse}.cu-xl-gap-2xl{gap:var(--canon-spacing-2xl)}.cu-xl-gap-lg{gap:var(--canon-spacing-lg)}.cu-xl-gap-md{gap:var(--canon-spacing-md)}.cu-xl-gap-none{gap:0}.cu-xl-gap-sm{gap:var(--canon-spacing-sm)}.cu-xl-gap-xl{gap:var(--canon-spacing-xl)}.cu-xl-gap-xs{gap:var(--canon-spacing-xs)}.cu-xl-grid{display:grid}.cu-xl-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.cu-xl-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.cu-xl-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.cu-xl-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.cu-xl-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cu-xl-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cu-xl-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.cu-xl-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.cu-xl-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.cu-xl-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.cu-xl-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.cu-xl-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.cu-xl-grid-cols-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.cu-xl-hidden{display:none}.cu-xl-inline{display:inline}.cu-xl-inline-block{display:inline-block}.cu-xl-items-center{align-items:center}.cu-xl-items-end{align-items:flex-end}.cu-xl-items-start{align-items:flex-start}.cu-xl-items-stretch{align-items:stretch}.cu-xl-justify-around{justify-content:space-around}.cu-xl-justify-between{justify-content:space-between}.cu-xl-justify-center{justify-content:center}.cu-xl-justify-end{justify-content:flex-end}.cu-xl-justify-start{justify-content:flex-start}.cu-xl-justify-stretch{justify-content:stretch}.cu-xl-m-2xl{margin:var(--canon-spacing-2xl)}.cu-xl-m-lg{margin:var(--canon-spacing-lg)}.cu-xl-m-md{margin:var(--canon-spacing-md)}.cu-xl-m-none{margin:0}.cu-xl-m-sm{margin:var(--canon-spacing-sm)}.cu-xl-m-xl{margin:var(--canon-spacing-xl)}.cu-xl-m-xs{margin:var(--canon-spacing-xs)}.cu-xl-mb-2xl{margin-bottom:var(--canon-spacing-2xl)}.cu-xl-mb-lg{margin-bottom:var(--canon-spacing-lg)}.cu-xl-mb-md{margin-bottom:var(--canon-spacing-md)}.cu-xl-mb-none{margin-bottom:0}.cu-xl-mb-sm{margin-bottom:var(--canon-spacing-sm)}.cu-xl-mb-xl{margin-bottom:var(--canon-spacing-xl)}.cu-xl-mb-xs{margin-bottom:var(--canon-spacing-xs)}.cu-xl-ml-2xl{margin-left:var(--canon-spacing-2xl)}.cu-xl-ml-lg{margin-left:var(--canon-spacing-lg)}.cu-xl-ml-md{margin-left:var(--canon-spacing-md)}.cu-xl-ml-none{margin-left:0}.cu-xl-ml-sm{margin-left:var(--canon-spacing-sm)}.cu-xl-ml-xl{margin-left:var(--canon-spacing-xl)}.cu-xl-ml-xs{margin-left:var(--canon-spacing-xs)}.cu-xl-mr-2xl{margin-right:var(--canon-spacing-2xl)}.cu-xl-mr-lg{margin-right:var(--canon-spacing-lg)}.cu-xl-mr-md{margin-right:var(--canon-spacing-md)}.cu-xl-mr-none{margin-right:0}.cu-xl-mr-sm{margin-right:var(--canon-spacing-sm)}.cu-xl-mr-xl{margin-right:var(--canon-spacing-xl)}.cu-xl-mr-xs{margin-right:var(--canon-spacing-xs)}.cu-xl-mt-2xl{margin-top:var(--canon-spacing-2xl)}.cu-xl-mt-lg{margin-top:var(--canon-spacing-lg)}.cu-xl-mt-md{margin-top:var(--canon-spacing-md)}.cu-xl-mt-none{margin-top:0}.cu-xl-mt-sm{margin-top:var(--canon-spacing-sm)}.cu-xl-mt-xl{margin-top:var(--canon-spacing-xl)}.cu-xl-mt-xs{margin-top:var(--canon-spacing-xs)}.cu-xl-mx-2xl{margin-left:var(--canon-spacing-2xl);margin-right:var(--canon-spacing-2xl)}.cu-xl-mx-lg{margin-left:var(--canon-spacing-lg);margin-right:var(--canon-spacing-lg)}.cu-xl-mx-md{margin-left:var(--canon-spacing-md);margin-right:var(--canon-spacing-md)}.cu-xl-mx-none{margin-left:0;margin-right:0}.cu-xl-mx-sm{margin-left:var(--canon-spacing-sm);margin-right:var(--canon-spacing-sm)}.cu-xl-mx-xl{margin-left:var(--canon-spacing-xl);margin-right:var(--canon-spacing-xl)}.cu-xl-mx-xs{margin-left:var(--canon-spacing-xs);margin-right:var(--canon-spacing-xs)}.cu-xl-my-2xl{margin-top:var(--canon-spacing-2xl);margin-bottom:var(--canon-spacing-2xl)}.cu-xl-my-lg{margin-top:var(--canon-spacing-lg);margin-bottom:var(--canon-spacing-lg)}.cu-xl-my-md{margin-top:var(--canon-spacing-md);margin-bottom:var(--canon-spacing-md)}.cu-xl-my-none{margin-top:0;margin-bottom:0}.cu-xl-my-sm{margin-top:var(--canon-spacing-sm);margin-bottom:var(--canon-spacing-sm)}.cu-xl-my-xl{margin-top:var(--canon-spacing-xl);margin-bottom:var(--canon-spacing-xl)}.cu-xl-my-xs{margin-top:var(--canon-spacing-xs);margin-bottom:var(--canon-spacing-xs)}.cu-xl-p-2xl{padding:var(--canon-spacing-2xl)}.cu-xl-p-lg{padding:var(--canon-spacing-lg)}.cu-xl-p-md{padding:var(--canon-spacing-md)}.cu-xl-p-none{padding:0}.cu-xl-p-sm{padding:var(--canon-spacing-sm)}.cu-xl-p-xl{padding:var(--canon-spacing-xl)}.cu-xl-p-xs{padding:var(--canon-spacing-xs)}.cu-xl-pb-2xl{padding-bottom:var(--canon-spacing-2xl)}.cu-xl-pb-lg{padding-bottom:var(--canon-spacing-lg)}.cu-xl-pb-md{padding-bottom:var(--canon-spacing-md)}.cu-xl-pb-none{padding-bottom:0}.cu-xl-pb-sm{padding-bottom:var(--canon-spacing-sm)}.cu-xl-pb-xl{padding-bottom:var(--canon-spacing-xl)}.cu-xl-pb-xs{padding-bottom:var(--canon-spacing-xs)}.cu-xl-pl-2xl{padding-left:var(--canon-spacing-2xl)}.cu-xl-pl-lg{padding-left:var(--canon-spacing-lg)}.cu-xl-pl-md{padding-left:var(--canon-spacing-md)}.cu-xl-pl-none{padding-left:0}.cu-xl-pl-sm{padding-left:var(--canon-spacing-sm)}.cu-xl-pl-xl{padding-left:var(--canon-spacing-xl)}.cu-xl-pl-xs{padding-left:var(--canon-spacing-xs)}.cu-xl-pr-2xl{padding-right:var(--canon-spacing-2xl)}.cu-xl-pr-lg{padding-right:var(--canon-spacing-lg)}.cu-xl-pr-md{padding-right:var(--canon-spacing-md)}.cu-xl-pr-none{padding-right:0}.cu-xl-pr-sm{padding-right:var(--canon-spacing-sm)}.cu-xl-pr-xl{padding-right:var(--canon-spacing-xl)}.cu-xl-pr-xs{padding-right:var(--canon-spacing-xs)}.cu-xl-pt-2xl{padding-top:var(--canon-spacing-2xl)}.cu-xl-pt-lg{padding-top:var(--canon-spacing-lg)}.cu-xl-pt-md{padding-top:var(--canon-spacing-md)}.cu-xl-pt-none{padding-top:0}.cu-xl-pt-sm{padding-top:var(--canon-spacing-sm)}.cu-xl-pt-xl{padding-top:var(--canon-spacing-xl)}.cu-xl-pt-xs{padding-top:var(--canon-spacing-xs)}.cu-xl-px-2xl{padding-left:var(--canon-spacing-2xl);padding-right:var(--canon-spacing-2xl)}.cu-xl-px-lg{padding-left:var(--canon-spacing-lg);padding-right:var(--canon-spacing-lg)}.cu-xl-px-md{padding-left:var(--canon-spacing-md);padding-right:var(--canon-spacing-md)}.cu-xl-px-none{padding-left:0;padding-right:0}.cu-xl-px-sm{padding-left:var(--canon-spacing-sm);padding-right:var(--canon-spacing-sm)}.cu-xl-px-xl{padding-left:var(--canon-spacing-xl);padding-right:var(--canon-spacing-xl)}.cu-xl-px-xs{padding-left:var(--canon-spacing-xs);padding-right:var(--canon-spacing-xs)}.cu-xl-py-2xl{padding-top:var(--canon-spacing-2xl);padding-bottom:var(--canon-spacing-2xl)}.cu-xl-py-lg{padding-top:var(--canon-spacing-lg);padding-bottom:var(--canon-spacing-lg)}.cu-xl-py-md{padding-top:var(--canon-spacing-md);padding-bottom:var(--canon-spacing-md)}.cu-xl-py-none{padding-top:0;padding-bottom:0}.cu-xl-py-sm{padding-top:var(--canon-spacing-sm);padding-bottom:var(--canon-spacing-sm)}.cu-xl-py-xl{padding-top:var(--canon-spacing-xl);padding-bottom:var(--canon-spacing-xl)}.cu-xl-py-xs{padding-top:var(--canon-spacing-xs);padding-bottom:var(--canon-spacing-xs)}.cu-xl-rounded-2xl{border-radius:var(--canon-border-radius-2xl)}.cu-xl-rounded-2xs{border-radius:var(--canon-border-radius-2xs)}.cu-xl-rounded-lg{border-radius:var(--canon-border-radius-lg)}.cu-xl-rounded-md{border-radius:var(--canon-border-radius-md)}.cu-xl-rounded-none{border-radius:0}.cu-xl-rounded-sm{border-radius:var(--canon-border-radius-sm)}.cu-xl-rounded-xl{border-radius:var(--canon-border-radius-xl)}.cu-xl-rounded-xs{border-radius:var(--canon-border-radius-xs)}.cu-xl-row-span-1{grid-row:span 1/span 1}.cu-xl-row-span-10{grid-row:span 10/span 10}.cu-xl-row-span-11{grid-row:span 11/span 11}.cu-xl-row-span-12{grid-row:span 12/span 12}.cu-xl-row-span-2{grid-row:span 2/span 2}.cu-xl-row-span-3{grid-row:span 3/span 3}.cu-xl-row-span-4{grid-row:span 4/span 4}.cu-xl-row-span-5{grid-row:span 5/span 5}.cu-xl-row-span-6{grid-row:span 6/span 6}.cu-xl-row-span-7{grid-row:span 7/span 7}.cu-xl-row-span-8{grid-row:span 8/span 8}.cu-xl-row-span-9{grid-row:span 9/span 9}.cu-xl-row-span-auto{grid-row:span auto/span auto}.cu-xl-wrap-reverse{flex-wrap:wrap-reverse}}@media (width>=1536px){.cu-2xl-block{display:block}.cu-2xl-border-base{border-color:var(--canon-border-base);border-style:solid;border-width:1px}.cu-2xl-border-error{border-color:var(--canon-border-error);border-style:solid;border-width:1px}.cu-2xl-border-none{border-width:0;border-color:#0000}.cu-2xl-border-selected{border-color:var(--canon-border-selected);border-style:solid;border-width:1px}.cu-2xl-border-warning{border-color:var(--canon-border-warning);border-style:solid;border-width:1px}.cu-2xl-col-end-1{grid-column-end:1}.cu-2xl-col-end-10{grid-column-end:10}.cu-2xl-col-end-11{grid-column-end:11}.cu-2xl-col-end-12{grid-column-end:12}.cu-2xl-col-end-13{grid-column-end:13}.cu-2xl-col-end-2{grid-column-end:2}.cu-2xl-col-end-3{grid-column-end:3}.cu-2xl-col-end-4{grid-column-end:4}.cu-2xl-col-end-5{grid-column-end:5}.cu-2xl-col-end-6{grid-column-end:6}.cu-2xl-col-end-7{grid-column-end:7}.cu-2xl-col-end-8{grid-column-end:8}.cu-2xl-col-end-9{grid-column-end:9}.cu-2xl-col-end-auto{grid-column-end:auto}.cu-2xl-col-span-1{grid-column:span 1/span 1}.cu-2xl-col-span-10{grid-column:span 10/span 10}.cu-2xl-col-span-11{grid-column:span 11/span 11}.cu-2xl-col-span-12{grid-column:span 12/span 12}.cu-2xl-col-span-2{grid-column:span 2/span 2}.cu-2xl-col-span-3{grid-column:span 3/span 3}.cu-2xl-col-span-4{grid-column:span 4/span 4}.cu-2xl-col-span-5{grid-column:span 5/span 5}.cu-2xl-col-span-6{grid-column:span 6/span 6}.cu-2xl-col-span-7{grid-column:span 7/span 7}.cu-2xl-col-span-8{grid-column:span 8/span 8}.cu-2xl-col-span-9{grid-column:span 9/span 9}.cu-2xl-col-span-auto{grid-column:span auto/span auto}.cu-2xl-col-start-1{grid-column-start:1}.cu-2xl-col-start-10{grid-column-start:10}.cu-2xl-col-start-11{grid-column-start:11}.cu-2xl-col-start-12{grid-column-start:12}.cu-2xl-col-start-13{grid-column-start:13}.cu-2xl-col-start-2{grid-column-start:2}.cu-2xl-col-start-3{grid-column-start:3}.cu-2xl-col-start-4{grid-column-start:4}.cu-2xl-col-start-5{grid-column-start:5}.cu-2xl-col-start-6{grid-column-start:6}.cu-2xl-col-start-7{grid-column-start:7}.cu-2xl-col-start-8{grid-column-start:8}.cu-2xl-col-start-9{grid-column-start:9}.cu-2xl-col-start-auto{grid-column-start:auto}.cu-2xl-flex{display:flex}.cu-2xl-flex-col{flex-direction:column}.cu-2xl-flex-nowrap{flex-wrap:nowrap}.cu-2xl-flex-row{flex-direction:row}.cu-2xl-flex-wrap{flex-wrap:wrap}.cu-2xl-flex-wrap-reverse{flex-wrap:wrap-reverse}.cu-2xl-gap-2xl{gap:var(--canon-spacing-2xl)}.cu-2xl-gap-lg{gap:var(--canon-spacing-lg)}.cu-2xl-gap-md{gap:var(--canon-spacing-md)}.cu-2xl-gap-none{gap:0}.cu-2xl-gap-sm{gap:var(--canon-spacing-sm)}.cu-2xl-gap-xl{gap:var(--canon-spacing-xl)}.cu-2xl-gap-xs{gap:var(--canon-spacing-xs)}.cu-2xl-grid{display:grid}.cu-2xl-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.cu-2xl-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.cu-2xl-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.cu-2xl-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.cu-2xl-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cu-2xl-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cu-2xl-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.cu-2xl-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.cu-2xl-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.cu-2xl-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.cu-2xl-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.cu-2xl-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.cu-2xl-grid-cols-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.cu-2xl-hidden{display:none}.cu-2xl-inline{display:inline}.cu-2xl-inline-block{display:inline-block}.cu-2xl-items-center{align-items:center}.cu-2xl-items-end{align-items:flex-end}.cu-2xl-items-start{align-items:flex-start}.cu-2xl-items-stretch{align-items:stretch}.cu-2xl-justify-around{justify-content:space-around}.cu-2xl-justify-between{justify-content:space-between}.cu-2xl-justify-center{justify-content:center}.cu-2xl-justify-end{justify-content:flex-end}.cu-2xl-justify-start{justify-content:flex-start}.cu-2xl-justify-stretch{justify-content:stretch}.cu-2xl-m-2xl{margin:var(--canon-spacing-2xl)}.cu-2xl-m-lg{margin:var(--canon-spacing-lg)}.cu-2xl-m-md{margin:var(--canon-spacing-md)}.cu-2xl-m-none{margin:0}.cu-2xl-m-sm{margin:var(--canon-spacing-sm)}.cu-2xl-m-xl{margin:var(--canon-spacing-xl)}.cu-2xl-m-xs{margin:var(--canon-spacing-xs)}.cu-2xl-mb-2xl{margin-bottom:var(--canon-spacing-2xl)}.cu-2xl-mb-lg{margin-bottom:var(--canon-spacing-lg)}.cu-2xl-mb-md{margin-bottom:var(--canon-spacing-md)}.cu-2xl-mb-none{margin-bottom:0}.cu-2xl-mb-sm{margin-bottom:var(--canon-spacing-sm)}.cu-2xl-mb-xl{margin-bottom:var(--canon-spacing-xl)}.cu-2xl-mb-xs{margin-bottom:var(--canon-spacing-xs)}.cu-2xl-ml-2xl{margin-left:var(--canon-spacing-2xl)}.cu-2xl-ml-lg{margin-left:var(--canon-spacing-lg)}.cu-2xl-ml-md{margin-left:var(--canon-spacing-md)}.cu-2xl-ml-none{margin-left:0}.cu-2xl-ml-sm{margin-left:var(--canon-spacing-sm)}.cu-2xl-ml-xl{margin-left:var(--canon-spacing-xl)}.cu-2xl-ml-xs{margin-left:var(--canon-spacing-xs)}.cu-2xl-mr-2xl{margin-right:var(--canon-spacing-2xl)}.cu-2xl-mr-lg{margin-right:var(--canon-spacing-lg)}.cu-2xl-mr-md{margin-right:var(--canon-spacing-md)}.cu-2xl-mr-none{margin-right:0}.cu-2xl-mr-sm{margin-right:var(--canon-spacing-sm)}.cu-2xl-mr-xl{margin-right:var(--canon-spacing-xl)}.cu-2xl-mr-xs{margin-right:var(--canon-spacing-xs)}.cu-2xl-mt-2xl{margin-top:var(--canon-spacing-2xl)}.cu-2xl-mt-lg{margin-top:var(--canon-spacing-lg)}.cu-2xl-mt-md{margin-top:var(--canon-spacing-md)}.cu-2xl-mt-none{margin-top:0}.cu-2xl-mt-sm{margin-top:var(--canon-spacing-sm)}.cu-2xl-mt-xl{margin-top:var(--canon-spacing-xl)}.cu-2xl-mt-xs{margin-top:var(--canon-spacing-xs)}.cu-2xl-mx-2xl{margin-left:var(--canon-spacing-2xl);margin-right:var(--canon-spacing-2xl)}.cu-2xl-mx-lg{margin-left:var(--canon-spacing-lg);margin-right:var(--canon-spacing-lg)}.cu-2xl-mx-md{margin-left:var(--canon-spacing-md);margin-right:var(--canon-spacing-md)}.cu-2xl-mx-none{margin-left:0;margin-right:0}.cu-2xl-mx-sm{margin-left:var(--canon-spacing-sm);margin-right:var(--canon-spacing-sm)}.cu-2xl-mx-xl{margin-left:var(--canon-spacing-xl);margin-right:var(--canon-spacing-xl)}.cu-2xl-mx-xs{margin-left:var(--canon-spacing-xs);margin-right:var(--canon-spacing-xs)}.cu-2xl-my-2xl{margin-top:var(--canon-spacing-2xl);margin-bottom:var(--canon-spacing-2xl)}.cu-2xl-my-lg{margin-top:var(--canon-spacing-lg);margin-bottom:var(--canon-spacing-lg)}.cu-2xl-my-md{margin-top:var(--canon-spacing-md);margin-bottom:var(--canon-spacing-md)}.cu-2xl-my-none{margin-top:0;margin-bottom:0}.cu-2xl-my-sm{margin-top:var(--canon-spacing-sm);margin-bottom:var(--canon-spacing-sm)}.cu-2xl-my-xl{margin-top:var(--canon-spacing-xl);margin-bottom:var(--canon-spacing-xl)}.cu-2xl-my-xs{margin-top:var(--canon-spacing-xs);margin-bottom:var(--canon-spacing-xs)}.cu-2xl-p-2xl{padding:var(--canon-spacing-2xl)}.cu-2xl-p-lg{padding:var(--canon-spacing-lg)}.cu-2xl-p-md{padding:var(--canon-spacing-md)}.cu-2xl-p-none{padding:0}.cu-2xl-p-sm{padding:var(--canon-spacing-sm)}.cu-2xl-p-xl{padding:var(--canon-spacing-xl)}.cu-2xl-p-xs{padding:var(--canon-spacing-xs)}.cu-2xl-pb-2xl{padding-bottom:var(--canon-spacing-2xl)}.cu-2xl-pb-lg{padding-bottom:var(--canon-spacing-lg)}.cu-2xl-pb-md{padding-bottom:var(--canon-spacing-md)}.cu-2xl-pb-none{padding-bottom:0}.cu-2xl-pb-sm{padding-bottom:var(--canon-spacing-sm)}.cu-2xl-pb-xl{padding-bottom:var(--canon-spacing-xl)}.cu-2xl-pb-xs{padding-bottom:var(--canon-spacing-xs)}.cu-2xl-pl-2xl{padding-left:var(--canon-spacing-2xl)}.cu-2xl-pl-lg{padding-left:var(--canon-spacing-lg)}.cu-2xl-pl-md{padding-left:var(--canon-spacing-md)}.cu-2xl-pl-none{padding-left:0}.cu-2xl-pl-sm{padding-left:var(--canon-spacing-sm)}.cu-2xl-pl-xl{padding-left:var(--canon-spacing-xl)}.cu-2xl-pl-xs{padding-left:var(--canon-spacing-xs)}.cu-2xl-pr-2xl{padding-right:var(--canon-spacing-2xl)}.cu-2xl-pr-lg{padding-right:var(--canon-spacing-lg)}.cu-2xl-pr-md{padding-right:var(--canon-spacing-md)}.cu-2xl-pr-none{padding-right:0}.cu-2xl-pr-sm{padding-right:var(--canon-spacing-sm)}.cu-2xl-pr-xl{padding-right:var(--canon-spacing-xl)}.cu-2xl-pr-xs{padding-right:var(--canon-spacing-xs)}.cu-2xl-pt-2xl{padding-top:var(--canon-spacing-2xl)}.cu-2xl-pt-lg{padding-top:var(--canon-spacing-lg)}.cu-2xl-pt-md{padding-top:var(--canon-spacing-md)}.cu-2xl-pt-none{padding-top:0}.cu-2xl-pt-sm{padding-top:var(--canon-spacing-sm)}.cu-2xl-pt-xl{padding-top:var(--canon-spacing-xl)}.cu-2xl-pt-xs{padding-top:var(--canon-spacing-xs)}.cu-2xl-px-2xl{padding-left:var(--canon-spacing-2xl);padding-right:var(--canon-spacing-2xl)}.cu-2xl-px-lg{padding-left:var(--canon-spacing-lg);padding-right:var(--canon-spacing-lg)}.cu-2xl-px-md{padding-left:var(--canon-spacing-md);padding-right:var(--canon-spacing-md)}.cu-2xl-px-none{padding-left:0;padding-right:0}.cu-2xl-px-sm{padding-left:var(--canon-spacing-sm);padding-right:var(--canon-spacing-sm)}.cu-2xl-px-xl{padding-left:var(--canon-spacing-xl);padding-right:var(--canon-spacing-xl)}.cu-2xl-px-xs{padding-left:var(--canon-spacing-xs);padding-right:var(--canon-spacing-xs)}.cu-2xl-py-2xl{padding-top:var(--canon-spacing-2xl);padding-bottom:var(--canon-spacing-2xl)}.cu-2xl-py-lg{padding-top:var(--canon-spacing-lg);padding-bottom:var(--canon-spacing-lg)}.cu-2xl-py-md{padding-top:var(--canon-spacing-md);padding-bottom:var(--canon-spacing-md)}.cu-2xl-py-none{padding-top:0;padding-bottom:0}.cu-2xl-py-sm{padding-top:var(--canon-spacing-sm);padding-bottom:var(--canon-spacing-sm)}.cu-2xl-py-xl{padding-top:var(--canon-spacing-xl);padding-bottom:var(--canon-spacing-xl)}.cu-2xl-py-xs{padding-top:var(--canon-spacing-xs);padding-bottom:var(--canon-spacing-xs)}.cu-2xl-rounded-2xl{border-radius:var(--canon-border-radius-2xl)}.cu-2xl-rounded-2xs{border-radius:var(--canon-border-radius-2xs)}.cu-2xl-rounded-lg{border-radius:var(--canon-border-radius-lg)}.cu-2xl-rounded-md{border-radius:var(--canon-border-radius-md)}.cu-2xl-rounded-none{border-radius:0}.cu-2xl-rounded-sm{border-radius:var(--canon-border-radius-sm)}.cu-2xl-rounded-xl{border-radius:var(--canon-border-radius-xl)}.cu-2xl-rounded-xs{border-radius:var(--canon-border-radius-xs)}.cu-2xl-row-span-1{grid-row:span 1/span 1}.cu-2xl-row-span-10{grid-row:span 10/span 10}.cu-2xl-row-span-11{grid-row:span 11/span 11}.cu-2xl-row-span-12{grid-row:span 12/span 12}.cu-2xl-row-span-2{grid-row:span 2/span 2}.cu-2xl-row-span-3{grid-row:span 3/span 3}.cu-2xl-row-span-4{grid-row:span 4/span 4}.cu-2xl-row-span-5{grid-row:span 5/span 5}.cu-2xl-row-span-6{grid-row:span 6/span 6}.cu-2xl-row-span-7{grid-row:span 7/span 7}.cu-2xl-row-span-8{grid-row:span 8/span 8}.cu-2xl-row-span-9{grid-row:span 9/span 9}.cu-2xl-row-span-auto{grid-row:span auto/span auto}.cu-2xl-wrap-reverse{flex-wrap:wrap-reverse}}}:root{--canon-accent:#000;--canon-background:#f8f8f8;--canon-surface-1:#fff;--canon-surface-2:#f4f4f4;--canon-surface-3:#f1f1f1;--canon-border-base:#0000001a;--canon-border-hover:#0003;--canon-border-warning:#e36d05;--canon-border-error:#e22b2b;--canon-border-selected:#1db954;--canon-error:#f50000;--canon-text-primary:#000;--canon-text-primary-on-accent:#fff;--canon-text-secondary:#646464;--canon-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";--canon-font-monospace:ui-monospace,"Menlo","Monaco","Consolas","Liberation Mono","Courier New",monospace;--canon-font-weight-regular:400;--canon-font-weight-bold:600;--canon-font-size-label:.625rem;--canon-font-size-caption:.75rem;--canon-font-size-body:.875rem;--canon-font-size-subtitle:1rem;--canon-font-size-title5:1.25rem;--canon-font-size-title4:1.5rem;--canon-font-size-title3:2rem;--canon-font-size-title2:3rem;--canon-font-size-title1:4rem;--canon-font-size-display:5.75rem;--canon-spacing-5xs:.125rem;--canon-spacing-4xs:.25rem;--canon-spacing-3xs:.375rem;--canon-spacing-2xs:.5rem;--canon-spacing-xs:.75rem;--canon-spacing-sm:1rem;--canon-spacing-md:1.5rem;--canon-spacing-lg:2rem;--canon-spacing-xl:2.5rem;--canon-spacing-2xl:3rem;--canon-spacing-3xl:3.5rem;--canon-border-radius-2xs:.125rem;--canon-border-radius-xs:.25rem;--canon-border-radius-sm:.5rem;--canon-border-radius-md:.75rem;--canon-border-radius-lg:1rem;--canon-border-radius-xl:1.25rem;--canon-border-radius-2xl:1.5rem;--canon-container-max-width:1200px;--canon-container-padding:1rem}[data-theme=dark]{--canon-accent:#fff;--canon-background:#000;--canon-surface-1:#121212;--canon-surface-2:#1a1a1a;--canon-border-base:#fff3;--canon-border-warning:#f50000;--canon-border-error:#f87503;--canon-border-selected:#25d262;--canon-error:#f50000;--canon-text-primary:#fff;--canon-text-primary-on-accent:#000;--canon-text-secondary:#b3b3b3}
\ No newline at end of file
diff --git a/microsite-canon/scripts/watch-css.js b/microsite-canon/scripts/watch-css.js
new file mode 100644
index 0000000000..079e895c87
--- /dev/null
+++ b/microsite-canon/scripts/watch-css.js
@@ -0,0 +1,43 @@
+const fs = require('fs');
+const path = require('path');
+const chokidar = require('chokidar');
+const { bundle } = require('lightningcss');
+
+const source = '../../packages/canon/src/css';
+const destination = '../public';
+
+const source1 = path.join(__dirname, `${source}/core.css`);
+const destination1 = path.join(__dirname, `${destination}/core.css`);
+const source2 = path.join(__dirname, `${source}/components.css`);
+const destination2 = path.join(__dirname, `${destination}/components.css`);
+
+// Function to bundle and copy the CSS file
+const bundleAndCopyFile = async (source, destination) => {
+  try {
+    const result = await bundle({
+      filename: source,
+      minify: true, // Optional: Minify the output
+    });
+
+    fs.writeFileSync(destination, result.code);
+    console.log('File bundled and copied successfully!');
+  } catch (err) {
+    console.error('Error bundling file:', err);
+  }
+};
+
+// Watch the source file for changes
+chokidar.watch(source1).on('change', () => {
+  console.log('Detected change in core.css, bundling and copying...');
+  bundleAndCopyFile(source1, destination1);
+});
+
+// Watch the components.css file for changes
+chokidar.watch(source2).on('change', () => {
+  console.log('Detected change in components.css, bundling and copying...');
+  bundleAndCopyFile(source2, destination2);
+});
+
+// Initial bundle and copy
+bundleAndCopyFile(source1, destination1);
+bundleAndCopyFile(source2, destination2);
diff --git a/microsite-canon/utils/data.ts b/microsite-canon/utils/data.ts
index bb4d52dec1..206fa8c0ce 100644
--- a/microsite-canon/utils/data.ts
+++ b/microsite-canon/utils/data.ts
@@ -70,3 +70,10 @@ export const components = [
     slug: 'text',
   },
 ];
+
+export const screenSizes = [
+  { title: 'Mobile', slug: 'mobile', width: 390 },
+  { title: 'Tablet', slug: 'tablet', width: 768 },
+  { title: 'Desktop', slug: 'desktop', width: 1280 },
+  { title: 'Wide', slug: 'wide', width: 1600 },
+];
diff --git a/packages/canon/.storybook/preview-head.html b/packages/canon/.storybook/preview-head.html
new file mode 100644
index 0000000000..e1c9e51552
--- /dev/null
+++ b/packages/canon/.storybook/preview-head.html
@@ -0,0 +1,4 @@
+<script
+  type="text/javascript"
+  src="https://unpkg.com/iframe-resizer/js/iframeResizer.contentWindow.min.js"
+></script>
diff --git a/packages/canon/src/components/Button/Button.stories.tsx b/packages/canon/src/components/Button/Button.stories.tsx
index 50746067cd..1659545d49 100644
--- a/packages/canon/src/components/Button/Button.stories.tsx
+++ b/packages/canon/src/components/Button/Button.stories.tsx
@@ -19,13 +19,10 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from './Button';
 import { Inline } from '../Inline';
 import { Stack } from '../Stack';
-
+import { Text } from '../Text';
 const meta = {
   title: 'Button',
   component: Button,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
     size: {
       control: 'select',
@@ -125,3 +122,21 @@ export const Responsive: Story = {
     },
   },
 };
+
+export const Playground: Story = {
+  args: {
+    children: 'Button',
+  },
+  render: args => (
+    <Stack>
+      <Stack>
+        <Text>Primary</Text>
+        <Inline alignY="center">
+          <Button {...args} iconStart="cloud" />
+          <Button {...args} iconEnd="chevronRight" />
+          <Button {...args} iconStart="cloud" iconEnd="chevronRight" />
+        </Inline>
+      </Stack>
+    </Stack>
+  ),
+};
diff --git a/packages/canon/src/components/Checkbox/styles.css b/packages/canon/src/components/Checkbox/styles.css
index e4ac30a447..c1f285f7c7 100644
--- a/packages/canon/src/components/Checkbox/styles.css
+++ b/packages/canon/src/components/Checkbox/styles.css
@@ -9,39 +9,33 @@
   color: var(--canon-text-primary);
   user-select: none;
 
-  & .checkbox {
-    all: unset;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    box-shadow: inset 0 0 0 1px var(--canon-outline);
-    cursor: pointer;
-    border-radius: 2px;
-    transition: all 0.2s ease-in-out;
-
-    &[data-state='unchecked'] {
-      & .checkbox-indicator {
-        display: none;
-      }
-    }
-
-    &[data-state='checked'] {
-      background: var(--canon-accent);
-    }
-  }
-
-  & .checkbox-indicator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--canon-text-primary-on-accent);
-  }
-
   &:hover {
     & .checkbox {
-      box-shadow: inset 0 0 0 1px var(--canon-outline-hover);
+      box-shadow: inset 0 0 0 1px var(--canon-border-hover);
     }
   }
 }
+
+.checkbox {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  box-shadow: inset 0 0 0 1px var(--canon-border-base);
+  cursor: pointer;
+  border-radius: 2px;
+  transition: all 0.2s ease-in-out;
+
+  &[data-checked] {
+    background-color: var(--canon-accent);
+  }
+}
+
+.checkbox-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--canon-text-primary-on-accent);
+}
diff --git a/packages/canon/src/css/core.css b/packages/canon/src/css/core.css
index 7f0c2f42f7..1d9da48d92 100644
--- a/packages/canon/src/css/core.css
+++ b/packages/canon/src/css/core.css
@@ -29,6 +29,7 @@
 
   /* Borders */
   --canon-border-base: rgba(0, 0, 0, 0.1);
+  --canon-border-hover: rgba(0, 0, 0, 0.2);
   --canon-border-warning: #e36d05;
   --canon-border-error: #e22b2b;
   --canon-border-selected: #1db954;
diff --git a/yarn.lock b/yarn.lock
index f7b2dbb2fc..ac7596a89f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3325,7 +3325,7 @@ __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":
+"@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.25.7, @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"
   dependencies:
@@ -10431,6 +10431,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@iframe-resizer/core@npm:5.3.2":
+  version: 5.3.2
+  resolution: "@iframe-resizer/core@npm:5.3.2"
+  checksum: dccfa96e9e760827e6133dd0d57e17d5bdece6561fef73c7786a9304884ddffc1c511e29eb5a9a2dfbd642f7bc50dc5a15bd3da903eaf052e66b020a48e7018c
+  languageName: node
+  linkType: hard
+
+"@iframe-resizer/react@npm:^5.3.2":
+  version: 5.3.2
+  resolution: "@iframe-resizer/react@npm:5.3.2"
+  dependencies:
+    "@babel/runtime": ^7.25.7
+    "@iframe-resizer/core": 5.3.2
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0  || ^19.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0  || ^19.0.0
+  checksum: fd05015db207d85d9de0726a112271860d1604eb3a7e0e5ed23d8c561f9126af1ce5f1e0829091fabeaa3d76c5eef405f5241ccf501e7df5746b521c1e5b5f20
+  languageName: node
+  linkType: hard
+
 "@img/sharp-darwin-arm64@npm:0.33.5":
   version: 0.33.5
   resolution: "@img/sharp-darwin-arm64@npm:0.33.5"
@@ -24535,6 +24555,7 @@ __metadata:
     "@backstage/canon": "workspace:^"
     "@base-ui-components/react": ^1.0.0-alpha.4
     "@eslint/eslintrc": ^3
+    "@iframe-resizer/react": ^5.3.2
     "@mdx-js/loader": ^3.1.0
     "@mdx-js/react": ^3.1.0
     "@next/mdx": ^15.1.3
@@ -24542,13 +24563,17 @@ __metadata:
     "@types/node": ^20
     "@types/react": ^19
     "@types/react-dom": ^19
+    chokidar: ^4.0.3
+    concurrently: ^9.1.2
     eslint: ^9
     eslint-config-next: 15.1.3
+    lightningcss: ^1.28.2
     motion: ^11.15.0
     next: 15.1.3
     next-themes: ^0.4.4
     react: ^19.0.0
     react-dom: ^19.0.0
+    react-frame-component: ^5.2.7
     shiki: ^1.24.4
     typescript: ^5
   languageName: unknown
@@ -24736,6 +24761,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chokidar@npm:^4.0.3":
+  version: 4.0.3
+  resolution: "chokidar@npm:4.0.3"
+  dependencies:
+    readdirp: ^4.0.1
+  checksum: a8765e452bbafd04f3f2fad79f04222dd65f43161488bb6014a41099e6ca18d166af613d59a90771908c1c823efa3f46ba36b86ac50b701c20c1b9908c5fe36e
+  languageName: node
+  linkType: hard
+
 "chownr@npm:^1.1.1":
   version: 1.1.4
   resolution: "chownr@npm:1.1.4"
@@ -25538,6 +25572,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"concurrently@npm:^9.1.2":
+  version: 9.1.2
+  resolution: "concurrently@npm:9.1.2"
+  dependencies:
+    chalk: ^4.1.2
+    lodash: ^4.17.21
+    rxjs: ^7.8.1
+    shell-quote: ^1.8.1
+    supports-color: ^8.1.1
+    tree-kill: ^1.2.2
+    yargs: ^17.7.2
+  bin:
+    conc: dist/bin/concurrently.js
+    concurrently: dist/bin/concurrently.js
+  checksum: 9e25e8ee6272ada26739aff1fb43e96ac458fafca82f45b8360bdd9115d60bbc679d282dfc52001b861b6e9f32b3063aed975691d8dec9e62807a9679763a1d8
+  languageName: node
+  linkType: hard
+
 "conf@npm:^10.2.0":
   version: 10.2.0
   resolution: "conf@npm:10.2.0"
@@ -26969,6 +27021,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-libc@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "detect-libc@npm:1.0.3"
+  bin:
+    detect-libc: ./bin/detect-libc.js
+  checksum: daaaed925ffa7889bd91d56e9624e6c8033911bb60f3a50a74a87500680652969dbaab9526d1e200a4c94acf80fc862a22131841145a0a8482d60a99c24f4a3e
+  languageName: node
+  linkType: hard
+
 "detect-libc@npm:^2.0.0, detect-libc@npm:^2.0.3":
   version: 2.0.3
   resolution: "detect-libc@npm:2.0.3"
@@ -35104,6 +35165,116 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-darwin-arm64@npm:1.28.2":
+  version: 1.28.2
+  resolution: "lightningcss-darwin-arm64@npm:1.28.2"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-darwin-x64@npm:1.28.2":
+  version: 1.28.2
+  resolution: "lightningcss-darwin-x64@npm:1.28.2"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-freebsd-x64@npm:1.28.2":
+  version: 1.28.2
+  resolution: "lightningcss-freebsd-x64@npm:1.28.2"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm-gnueabihf@npm:1.28.2":
+  version: 1.28.2
+  resolution: "lightningcss-linux-arm-gnueabihf@npm:1.28.2"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-gnu@npm:1.28.2":
+  version: 1.28.2
+  resolution: "lightningcss-linux-arm64-gnu@npm:1.28.2"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-musl@npm:1.28.2":
+  version: 1.28.2
+  resolution: "lightningcss-linux-arm64-musl@npm:1.28.2"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-gnu@npm:1.28.2":
+  version: 1.28.2
+  resolution: "lightningcss-linux-x64-gnu@npm:1.28.2"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-musl@npm:1.28.2":
+  version: 1.28.2
+  resolution: "lightningcss-linux-x64-musl@npm:1.28.2"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-win32-arm64-msvc@npm:1.28.2":
+  version: 1.28.2
+  resolution: "lightningcss-win32-arm64-msvc@npm:1.28.2"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-win32-x64-msvc@npm:1.28.2":
+  version: 1.28.2
+  resolution: "lightningcss-win32-x64-msvc@npm:1.28.2"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss@npm:^1.28.2":
+  version: 1.28.2
+  resolution: "lightningcss@npm:1.28.2"
+  dependencies:
+    detect-libc: ^1.0.3
+    lightningcss-darwin-arm64: 1.28.2
+    lightningcss-darwin-x64: 1.28.2
+    lightningcss-freebsd-x64: 1.28.2
+    lightningcss-linux-arm-gnueabihf: 1.28.2
+    lightningcss-linux-arm64-gnu: 1.28.2
+    lightningcss-linux-arm64-musl: 1.28.2
+    lightningcss-linux-x64-gnu: 1.28.2
+    lightningcss-linux-x64-musl: 1.28.2
+    lightningcss-win32-arm64-msvc: 1.28.2
+    lightningcss-win32-x64-msvc: 1.28.2
+  dependenciesMeta:
+    lightningcss-darwin-arm64:
+      optional: true
+    lightningcss-darwin-x64:
+      optional: true
+    lightningcss-freebsd-x64:
+      optional: true
+    lightningcss-linux-arm-gnueabihf:
+      optional: true
+    lightningcss-linux-arm64-gnu:
+      optional: true
+    lightningcss-linux-arm64-musl:
+      optional: true
+    lightningcss-linux-x64-gnu:
+      optional: true
+    lightningcss-linux-x64-musl:
+      optional: true
+    lightningcss-win32-arm64-msvc:
+      optional: true
+    lightningcss-win32-x64-msvc:
+      optional: true
+  checksum: 6860b65b4352c2bcc3b81bf4950ad754ec431bac89fe44e608325976a096f98985b998a8dda6dc924abb87d0e946e4a8051514ca562d1e453c737184edda4702
+  languageName: node
+  linkType: hard
+
 "lilconfig@npm:^2.0.3":
   version: 2.1.0
   resolution: "lilconfig@npm:2.1.0"
@@ -41968,6 +42139,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-frame-component@npm:^5.2.7":
+  version: 5.2.7
+  resolution: "react-frame-component@npm:5.2.7"
+  peerDependencies:
+    prop-types: ^15.5.9
+    react: ">= 16.3"
+    react-dom: ">= 16.3"
+  checksum: e28975cf8ca1e730f66f1fc9e4d4248f33970088b95737d6a271ba8650bc35c1bbf97537685c8ab9a32af0fd89c52777e03de848b8cc3c9e8842506ddc3f65d9
+  languageName: node
+  linkType: hard
+
 "react-grid-layout@npm:1.3.4":
   version: 1.3.4
   resolution: "react-grid-layout@npm:1.3.4"
@@ -42633,6 +42815,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"readdirp@npm:^4.0.1":
+  version: 4.0.2
+  resolution: "readdirp@npm:4.0.2"
+  checksum: 309376e717f94fb7eb61bec21e2603243a9e2420cd2e9bf94ddf026aefea0d7377ed1a62f016d33265682e44908049a55c3cfc2307450a1421654ea008489b39
+  languageName: node
+  linkType: hard
+
 "readline-sync@npm:1.4.9":
   version: 1.4.9
   resolution: "readline-sync@npm:1.4.9"
@@ -43733,7 +43922,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rxjs@npm:7.8.1, rxjs@npm:^7.2.0, rxjs@npm:^7.5.5":
+"rxjs@npm:7.8.1, rxjs@npm:^7.2.0, rxjs@npm:^7.5.5, rxjs@npm:^7.8.1":
   version: 7.8.1
   resolution: "rxjs@npm:7.8.1"
   dependencies: