diff --git a/canon-docs/.gitignore b/canon-docs/.gitignore
index efc7e8ec3f..41244c667c 100644
--- a/canon-docs/.gitignore
+++ b/canon-docs/.gitignore
@@ -2,3 +2,8 @@
 /.next/
 /dist/
 next-env.d.ts
+
+# css
+/public/core.css
+/public/components.css
+/public/backstage.css
diff --git a/canon-docs/package.json b/canon-docs/package.json
index 9fddf08c20..3ab78ff7ec 100644
--- a/canon-docs/package.json
+++ b/canon-docs/package.json
@@ -3,10 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "build": "next build",
+    "build": "npm run build:css && next build",
+    "build:css": "node scripts/build-css.js",
     "lint": "next lint",
-    "start": "concurrently \"next dev\" \"yarn watch-css\"",
-    "watch-css": "node scripts/watch-css.js"
+    "start": "next dev"
   },
   "dependencies": {
     "@codemirror/lang-sass": "^6.0.2",
@@ -15,7 +15,6 @@
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^15.1.4",
     "@storybook/react": "^8.4.7",
-    "@types/mdx": "^2.0.13",
     "@uiw/codemirror-themes": "^4.23.7",
     "@uiw/react-codemirror": "^4.23.7",
     "next": "14.2.23",
@@ -26,10 +25,10 @@
     "storybook": "^8.4.7"
   },
   "devDependencies": {
+    "@types/mdx": "^2.0.13",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "concurrently": "^9.1.2",
     "eslint": "^8",
     "eslint-config-next": "14.2.23",
     "lightningcss": "^1.28.2",
diff --git a/canon-docs/public/backstage.css b/canon-docs/public/backstage.css
deleted file mode 100644
index c885f3c635..0000000000
--- a/canon-docs/public/backstage.css
+++ /dev/null
@@ -1,71 +0,0 @@
-[data-theme-name="legacy"][data-theme="light"], [data-theme-name="legacy"][data-theme="dark"] {
-  --canon-font-regular: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
-
-  & .cn-button {
-    text-transform: uppercase;
-    box-shadow: none;
-    background-color: #1f5493;
-    border-radius: 4px;
-    padding: 6px 16px;
-    font-size: .875rem;
-    font-weight: 400;
-    line-height: 1.75;
-    transition: background-color .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s cubic-bezier(.4, 0, .2, 1), border .25s cubic-bezier(.4, 0, .2, 1);
-
-    &:hover {
-      box-shadow: none;
-    }
-
-    &.cn-button-primary {
-      color: #fff;
-      background-color: #153a66;
-      box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f;
-
-      &:hover {
-        box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
-      }
-    }
-
-    &.cn-button-secondary {
-      color: #1f5493;
-      background-color: #0000;
-      border: 1px solid #1f549380;
-
-      &:hover {
-        background-color: #1f54930a;
-        border: 1px solid #1f5493;
-      }
-    }
-
-    &.cn-button-tertiary {
-      color: #1f5493;
-      background-color: #0000;
-      border: none;
-    }
-  }
-}
-
-[data-theme-name="legacy"][data-theme="light"] {
-  --canon-accent: #2e77d0;
-  --canon-background: #f8f8f8;
-  --canon-surface-1: #fff;
-  --canon-surface-2: #f4f4f4;
-  --canon-text-primary: #000;
-  --canon-text-primary-on-accent: #fff;
-  --canon-text-secondary: #646464;
-}
-
-[data-theme-name="legacy"][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;
-}
diff --git a/canon-docs/public/components.css b/canon-docs/public/components.css
deleted file mode 100644
index 58c1b13203..0000000000
--- a/canon-docs/public/components.css
+++ /dev/null
@@ -1,355 +0,0 @@
-.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-border-focus);
-    color: var(--canon-text-primary);
-    background-color: #0000;
-  }
-}
-
-.cn-button-secondary {
-  box-shadow: inset 0 0 0 1px var(--canon-border-base);
-  color: var(--canon-text-primary);
-  background-color: #0000;
-
-  &:hover {
-    box-shadow: inset 0 0 0 1px var(--canon-border-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-space-3);
-  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-space-3);
-  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-space-0_5);
-  padding-top: var(--canon-space-0_5);
-  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-space-3);
-}
-
-.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-space-3);
-  }
-
-  & .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-space-3);
-  }
-}
-
-.table-cell {
-  padding: var(--canon-space-3);
-  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);
-  }
-}
-
-.canon-Input {
-  border-radius: var(--canon-border-radius-sm);
-  border: 1px solid var(--canon-border-base);
-  padding: 0 var(--canon-space-4);
-  background-color: var(--canon-surface-1);
-  font-size: var(--canon-font-size-body);
-  font-weight: var(--canon-font-weight-regular);
-  color: var(--canon-text-primary);
-  width: 100%;
-  transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
-}
-
-.canon-Input::placeholder {
-  color: var(--canon-text-secondary);
-}
-
-.canon-Input:hover {
-  border-color: var(--canon-border-hover);
-}
-
-.canon-Input:focus-visible {
-  outline-color: var(--canon-border-selected);
-  border-color: var(--canon-border-selected);
-  outline-width: 0;
-}
-
-.canon-Input[data-invalid] {
-  border-color: var(--canon-error);
-}
-
-.canon-Input--size-sm {
-  height: 2rem;
-}
-
-.canon-Input--size-md {
-  height: 2.5rem;
-}
-
-.canon-FieldRoot {
-  font-family: var(--canon-font-regular);
-  flex-direction: column;
-  width: 100%;
-  display: flex;
-}
-
-.canon-FieldLabel {
-  font-size: var(--canon-font-size-caption);
-  font-weight: var(--canon-font-weight-regular);
-  color: var(--canon-text-primary);
-  margin-bottom: var(--canon-spacing-3xs);
-}
-
-.canon-FieldDescription {
-  font-size: var(--canon-font-size-caption);
-  font-weight: var(--canon-font-weight-regular);
-  color: var(--canon-text-secondary);
-  padding-top: var(--canon-spacing-3xs);
-  margin: 0;
-}
-
-.canon-FieldError {
-  font-size: var(--canon-font-size-caption);
-  font-weight: var(--canon-font-weight-regular);
-  color: var(--canon-error);
-  padding-top: var(--canon-spacing-3xs);
-  margin: 0;
-}
-
-.canon-FieldValidity {
-  font-size: var(--canon-font-size-caption);
-  font-weight: var(--canon-font-weight-regular);
-  color: var(--canon-text-secondary);
-  padding-top: var(--canon-spacing-3xs);
-  margin: 0;
-}
diff --git a/canon-docs/public/core.css b/canon-docs/public/core.css
deleted file mode 100644
index fd11563886..0000000000
--- a/canon-docs/public/core.css
+++ /dev/null
@@ -1,5730 +0,0 @@
-/*! 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-space-12);
-  }
-
-  .cu-gap-lg {
-    gap: var(--canon-space-8);
-  }
-
-  .cu-gap-md {
-    gap: var(--canon-space-6);
-  }
-
-  .cu-gap-none {
-    gap: 0;
-  }
-
-  .cu-gap-sm {
-    gap: var(--canon-space-4);
-  }
-
-  .cu-gap-xl {
-    gap: var(--canon-space-10);
-  }
-
-  .cu-gap-xs {
-    gap: var(--canon-space-3);
-  }
-
-  .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-space-12);
-  }
-
-  .cu-m-2xs {
-    margin: var(--canon-space-2);
-  }
-
-  .cu-m-lg {
-    margin: var(--canon-space-8);
-  }
-
-  .cu-m-md {
-    margin: var(--canon-space-6);
-  }
-
-  .cu-m-none {
-    margin: 0;
-  }
-
-  .cu-m-sm {
-    margin: var(--canon-space-4);
-  }
-
-  .cu-m-xl {
-    margin: var(--canon-space-10);
-  }
-
-  .cu-m-xs {
-    margin: var(--canon-space-3);
-  }
-
-  .cu-mb-2xl {
-    margin-bottom: var(--canon-space-12);
-  }
-
-  .cu-mb-2xs {
-    margin-bottom: var(--canon-space-2);
-  }
-
-  .cu-mb-lg {
-    margin-bottom: var(--canon-space-8);
-  }
-
-  .cu-mb-md {
-    margin-bottom: var(--canon-space-6);
-  }
-
-  .cu-mb-none {
-    margin-bottom: 0;
-  }
-
-  .cu-mb-sm {
-    margin-bottom: var(--canon-space-4);
-  }
-
-  .cu-mb-xl {
-    margin-bottom: var(--canon-space-10);
-  }
-
-  .cu-mb-xs {
-    margin-bottom: var(--canon-space-3);
-  }
-
-  .cu-ml-2xl {
-    margin-left: var(--canon-space-12);
-  }
-
-  .cu-ml-2xs {
-    margin-left: var(--canon-space-2);
-  }
-
-  .cu-ml-lg {
-    margin-left: var(--canon-space-8);
-  }
-
-  .cu-ml-md {
-    margin-left: var(--canon-space-6);
-  }
-
-  .cu-ml-none {
-    margin-left: 0;
-  }
-
-  .cu-ml-sm {
-    margin-left: var(--canon-space-4);
-  }
-
-  .cu-ml-xl {
-    margin-left: var(--canon-space-10);
-  }
-
-  .cu-ml-xs {
-    margin-left: var(--canon-space-3);
-  }
-
-  .cu-mr-2xl {
-    margin-right: var(--canon-space-12);
-  }
-
-  .cu-mr-2xs {
-    margin-right: var(--canon-space-2);
-  }
-
-  .cu-mr-lg {
-    margin-right: var(--canon-space-8);
-  }
-
-  .cu-mr-md {
-    margin-right: var(--canon-space-6);
-  }
-
-  .cu-mr-none {
-    margin-right: 0;
-  }
-
-  .cu-mr-sm {
-    margin-right: var(--canon-space-4);
-  }
-
-  .cu-mr-xl {
-    margin-right: var(--canon-space-10);
-  }
-
-  .cu-mr-xs {
-    margin-right: var(--canon-space-3);
-  }
-
-  .cu-mt-2xl {
-    margin-top: var(--canon-space-12);
-  }
-
-  .cu-mt-2xs {
-    margin-top: var(--canon-space-2);
-  }
-
-  .cu-mt-lg {
-    margin-top: var(--canon-space-8);
-  }
-
-  .cu-mt-md {
-    margin-top: var(--canon-space-6);
-  }
-
-  .cu-mt-none {
-    margin-top: 0;
-  }
-
-  .cu-mt-sm {
-    margin-top: var(--canon-space-4);
-  }
-
-  .cu-mt-xl {
-    margin-top: var(--canon-space-10);
-  }
-
-  .cu-mt-xs {
-    margin-top: var(--canon-space-3);
-  }
-
-  .cu-mx-2xl {
-    margin-left: var(--canon-space-12);
-    margin-right: var(--canon-space-12);
-  }
-
-  .cu-mx-2xs {
-    margin-left: var(--canon-space-2);
-    margin-right: var(--canon-space-2);
-  }
-
-  .cu-mx-lg {
-    margin-left: var(--canon-space-8);
-    margin-right: var(--canon-space-8);
-  }
-
-  .cu-mx-md {
-    margin-left: var(--canon-space-6);
-    margin-right: var(--canon-space-6);
-  }
-
-  .cu-mx-none {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  .cu-mx-sm {
-    margin-left: var(--canon-space-4);
-    margin-right: var(--canon-space-4);
-  }
-
-  .cu-mx-xl {
-    margin-left: var(--canon-space-10);
-    margin-right: var(--canon-space-10);
-  }
-
-  .cu-mx-xs {
-    margin-left: var(--canon-space-3);
-    margin-right: var(--canon-space-3);
-  }
-
-  .cu-my-2xl {
-    margin-top: var(--canon-space-12);
-    margin-bottom: var(--canon-space-12);
-  }
-
-  .cu-my-2xs {
-    margin-top: var(--canon-space-2);
-    margin-bottom: var(--canon-space-2);
-  }
-
-  .cu-my-lg {
-    margin-top: var(--canon-space-8);
-    margin-bottom: var(--canon-space-8);
-  }
-
-  .cu-my-md {
-    margin-top: var(--canon-space-6);
-    margin-bottom: var(--canon-space-6);
-  }
-
-  .cu-my-none {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  .cu-my-sm {
-    margin-top: var(--canon-space-4);
-    margin-bottom: var(--canon-space-4);
-  }
-
-  .cu-my-xl {
-    margin-top: var(--canon-space-10);
-    margin-bottom: var(--canon-space-10);
-  }
-
-  .cu-my-xs {
-    margin-top: var(--canon-space-3);
-    margin-bottom: var(--canon-space-3);
-  }
-
-  .cu-p-2xl {
-    padding: var(--canon-space-12);
-  }
-
-  .cu-p-2xs {
-    padding: var(--canon-space-2);
-  }
-
-  .cu-p-lg {
-    padding: var(--canon-space-8);
-  }
-
-  .cu-p-md {
-    padding: var(--canon-space-6);
-  }
-
-  .cu-p-none {
-    padding: 0;
-  }
-
-  .cu-p-sm {
-    padding: var(--canon-space-4);
-  }
-
-  .cu-p-xl {
-    padding: var(--canon-space-10);
-  }
-
-  .cu-p-xs {
-    padding: var(--canon-space-3);
-  }
-
-  .cu-pb-2xl {
-    padding-bottom: var(--canon-space-12);
-  }
-
-  .cu-pb-2xs {
-    padding-bottom: var(--canon-space-2);
-  }
-
-  .cu-pb-lg {
-    padding-bottom: var(--canon-space-8);
-  }
-
-  .cu-pb-md {
-    padding-bottom: var(--canon-space-6);
-  }
-
-  .cu-pb-none {
-    padding-bottom: 0;
-  }
-
-  .cu-pb-sm {
-    padding-bottom: var(--canon-space-4);
-  }
-
-  .cu-pb-xl {
-    padding-bottom: var(--canon-space-10);
-  }
-
-  .cu-pb-xs {
-    padding-bottom: var(--canon-space-3);
-  }
-
-  .cu-pl-2xl {
-    padding-left: var(--canon-space-12);
-  }
-
-  .cu-pl-2xs {
-    padding-left: var(--canon-space-2);
-  }
-
-  .cu-pl-lg {
-    padding-left: var(--canon-space-8);
-  }
-
-  .cu-pl-md {
-    padding-left: var(--canon-space-6);
-  }
-
-  .cu-pl-none {
-    padding-left: 0;
-  }
-
-  .cu-pl-sm {
-    padding-left: var(--canon-space-4);
-  }
-
-  .cu-pl-xl {
-    padding-left: var(--canon-space-10);
-  }
-
-  .cu-pl-xs {
-    padding-left: var(--canon-space-3);
-  }
-
-  .cu-pr-2xl {
-    padding-right: var(--canon-space-12);
-  }
-
-  .cu-pr-2xs {
-    padding-right: var(--canon-space-2);
-  }
-
-  .cu-pr-lg {
-    padding-right: var(--canon-space-8);
-  }
-
-  .cu-pr-md {
-    padding-right: var(--canon-space-6);
-  }
-
-  .cu-pr-none {
-    padding-right: 0;
-  }
-
-  .cu-pr-sm {
-    padding-right: var(--canon-space-4);
-  }
-
-  .cu-pr-xl {
-    padding-right: var(--canon-space-10);
-  }
-
-  .cu-pr-xs {
-    padding-right: var(--canon-space-3);
-  }
-
-  .cu-pt-2xl {
-    padding-top: var(--canon-space-12);
-  }
-
-  .cu-pt-2xs {
-    padding-top: var(--canon-space-2);
-  }
-
-  .cu-pt-lg {
-    padding-top: var(--canon-space-8);
-  }
-
-  .cu-pt-md {
-    padding-top: var(--canon-space-6);
-  }
-
-  .cu-pt-none {
-    padding-top: 0;
-  }
-
-  .cu-pt-sm {
-    padding-top: var(--canon-space-4);
-  }
-
-  .cu-pt-xl {
-    padding-top: var(--canon-space-10);
-  }
-
-  .cu-pt-xs {
-    padding-top: var(--canon-space-3);
-  }
-
-  .cu-px-2xl {
-    padding-left: var(--canon-space-12);
-    padding-right: var(--canon-space-12);
-  }
-
-  .cu-px-2xs {
-    padding-left: var(--canon-space-2);
-    padding-right: var(--canon-space-2);
-  }
-
-  .cu-px-lg {
-    padding-left: var(--canon-space-8);
-    padding-right: var(--canon-space-8);
-  }
-
-  .cu-px-md {
-    padding-left: var(--canon-space-6);
-    padding-right: var(--canon-space-6);
-  }
-
-  .cu-px-none {
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  .cu-px-sm {
-    padding-left: var(--canon-space-4);
-    padding-right: var(--canon-space-4);
-  }
-
-  .cu-px-xl {
-    padding-left: var(--canon-space-10);
-    padding-right: var(--canon-space-10);
-  }
-
-  .cu-px-xs {
-    padding-left: var(--canon-space-3);
-    padding-right: var(--canon-space-3);
-  }
-
-  .cu-py-2xl {
-    padding-top: var(--canon-space-12);
-    padding-bottom: var(--canon-space-12);
-  }
-
-  .cu-py-2xs {
-    padding-top: var(--canon-space-2);
-    padding-bottom: var(--canon-space-2);
-  }
-
-  .cu-py-lg {
-    padding-top: var(--canon-space-8);
-    padding-bottom: var(--canon-space-8);
-  }
-
-  .cu-py-md {
-    padding-top: var(--canon-space-6);
-    padding-bottom: var(--canon-space-6);
-  }
-
-  .cu-py-none {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  .cu-py-sm {
-    padding-top: var(--canon-space-4);
-    padding-bottom: var(--canon-space-4);
-  }
-
-  .cu-py-xl {
-    padding-top: var(--canon-space-10);
-    padding-bottom: var(--canon-space-10);
-  }
-
-  .cu-py-xs {
-    padding-top: var(--canon-space-3);
-    padding-bottom: var(--canon-space-3);
-  }
-
-  .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-space-12);
-    }
-
-    .cu-sm-gap-lg {
-      gap: var(--canon-space-8);
-    }
-
-    .cu-sm-gap-md {
-      gap: var(--canon-space-6);
-    }
-
-    .cu-sm-gap-none {
-      gap: 0;
-    }
-
-    .cu-sm-gap-sm {
-      gap: var(--canon-space-4);
-    }
-
-    .cu-sm-gap-xl {
-      gap: var(--canon-space-10);
-    }
-
-    .cu-sm-gap-xs {
-      gap: var(--canon-space-3);
-    }
-
-    .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-space-12);
-    }
-
-    .cu-sm-m-2xs {
-      margin: var(--canon-space-2);
-    }
-
-    .cu-sm-m-lg {
-      margin: var(--canon-space-8);
-    }
-
-    .cu-sm-m-md {
-      margin: var(--canon-space-6);
-    }
-
-    .cu-sm-m-none {
-      margin: 0;
-    }
-
-    .cu-sm-m-sm {
-      margin: var(--canon-space-4);
-    }
-
-    .cu-sm-m-xl {
-      margin: var(--canon-space-10);
-    }
-
-    .cu-sm-m-xs {
-      margin: var(--canon-space-3);
-    }
-
-    .cu-sm-mb-2xl {
-      margin-bottom: var(--canon-space-12);
-    }
-
-    .cu-sm-mb-2xs {
-      margin-bottom: var(--canon-space-2);
-    }
-
-    .cu-sm-mb-lg {
-      margin-bottom: var(--canon-space-8);
-    }
-
-    .cu-sm-mb-md {
-      margin-bottom: var(--canon-space-6);
-    }
-
-    .cu-sm-mb-none {
-      margin-bottom: 0;
-    }
-
-    .cu-sm-mb-sm {
-      margin-bottom: var(--canon-space-4);
-    }
-
-    .cu-sm-mb-xl {
-      margin-bottom: var(--canon-space-10);
-    }
-
-    .cu-sm-mb-xs {
-      margin-bottom: var(--canon-space-3);
-    }
-
-    .cu-sm-ml-2xl {
-      margin-left: var(--canon-space-12);
-    }
-
-    .cu-sm-ml-2xs {
-      margin-left: var(--canon-space-2);
-    }
-
-    .cu-sm-ml-lg {
-      margin-left: var(--canon-space-8);
-    }
-
-    .cu-sm-ml-md {
-      margin-left: var(--canon-space-6);
-    }
-
-    .cu-sm-ml-none {
-      margin-left: 0;
-    }
-
-    .cu-sm-ml-sm {
-      margin-left: var(--canon-space-4);
-    }
-
-    .cu-sm-ml-xl {
-      margin-left: var(--canon-space-10);
-    }
-
-    .cu-sm-ml-xs {
-      margin-left: var(--canon-space-3);
-    }
-
-    .cu-sm-mr-2xl {
-      margin-right: var(--canon-space-12);
-    }
-
-    .cu-sm-mr-2xs {
-      margin-right: var(--canon-space-2);
-    }
-
-    .cu-sm-mr-lg {
-      margin-right: var(--canon-space-8);
-    }
-
-    .cu-sm-mr-md {
-      margin-right: var(--canon-space-6);
-    }
-
-    .cu-sm-mr-none {
-      margin-right: 0;
-    }
-
-    .cu-sm-mr-sm {
-      margin-right: var(--canon-space-4);
-    }
-
-    .cu-sm-mr-xl {
-      margin-right: var(--canon-space-10);
-    }
-
-    .cu-sm-mr-xs {
-      margin-right: var(--canon-space-3);
-    }
-
-    .cu-sm-mt-2xl {
-      margin-top: var(--canon-space-12);
-    }
-
-    .cu-sm-mt-2xs {
-      margin-top: var(--canon-space-2);
-    }
-
-    .cu-sm-mt-lg {
-      margin-top: var(--canon-space-8);
-    }
-
-    .cu-sm-mt-md {
-      margin-top: var(--canon-space-6);
-    }
-
-    .cu-sm-mt-none {
-      margin-top: 0;
-    }
-
-    .cu-sm-mt-sm {
-      margin-top: var(--canon-space-4);
-    }
-
-    .cu-sm-mt-xl {
-      margin-top: var(--canon-space-10);
-    }
-
-    .cu-sm-mt-xs {
-      margin-top: var(--canon-space-3);
-    }
-
-    .cu-sm-mx-2xl {
-      margin-left: var(--canon-space-12);
-      margin-right: var(--canon-space-12);
-    }
-
-    .cu-sm-mx-2xs {
-      margin-left: var(--canon-space-2);
-      margin-right: var(--canon-space-2);
-    }
-
-    .cu-sm-mx-lg {
-      margin-left: var(--canon-space-8);
-      margin-right: var(--canon-space-8);
-    }
-
-    .cu-sm-mx-md {
-      margin-left: var(--canon-space-6);
-      margin-right: var(--canon-space-6);
-    }
-
-    .cu-sm-mx-none {
-      margin-left: 0;
-      margin-right: 0;
-    }
-
-    .cu-sm-mx-sm {
-      margin-left: var(--canon-space-4);
-      margin-right: var(--canon-space-4);
-    }
-
-    .cu-sm-mx-xl {
-      margin-left: var(--canon-space-10);
-      margin-right: var(--canon-space-10);
-    }
-
-    .cu-sm-mx-xs {
-      margin-left: var(--canon-space-3);
-      margin-right: var(--canon-space-3);
-    }
-
-    .cu-sm-my-2xl {
-      margin-top: var(--canon-space-12);
-      margin-bottom: var(--canon-space-12);
-    }
-
-    .cu-sm-my-2xs {
-      margin-top: var(--canon-space-2);
-      margin-bottom: var(--canon-space-2);
-    }
-
-    .cu-sm-my-lg {
-      margin-top: var(--canon-space-8);
-      margin-bottom: var(--canon-space-8);
-    }
-
-    .cu-sm-my-md {
-      margin-top: var(--canon-space-6);
-      margin-bottom: var(--canon-space-6);
-    }
-
-    .cu-sm-my-none {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    .cu-sm-my-sm {
-      margin-top: var(--canon-space-4);
-      margin-bottom: var(--canon-space-4);
-    }
-
-    .cu-sm-my-xl {
-      margin-top: var(--canon-space-10);
-      margin-bottom: var(--canon-space-10);
-    }
-
-    .cu-sm-my-xs {
-      margin-top: var(--canon-space-3);
-      margin-bottom: var(--canon-space-3);
-    }
-
-    .cu-sm-p-2xl {
-      padding: var(--canon-space-12);
-    }
-
-    .cu-sm-p-2xs {
-      padding: var(--canon-space-2);
-    }
-
-    .cu-sm-p-lg {
-      padding: var(--canon-space-8);
-    }
-
-    .cu-sm-p-md {
-      padding: var(--canon-space-6);
-    }
-
-    .cu-sm-p-none {
-      padding: 0;
-    }
-
-    .cu-sm-p-sm {
-      padding: var(--canon-space-4);
-    }
-
-    .cu-sm-p-xl {
-      padding: var(--canon-space-10);
-    }
-
-    .cu-sm-p-xs {
-      padding: var(--canon-space-3);
-    }
-
-    .cu-sm-pb-2xl {
-      padding-bottom: var(--canon-space-12);
-    }
-
-    .cu-sm-pb-2xs {
-      padding-bottom: var(--canon-space-2);
-    }
-
-    .cu-sm-pb-lg {
-      padding-bottom: var(--canon-space-8);
-    }
-
-    .cu-sm-pb-md {
-      padding-bottom: var(--canon-space-6);
-    }
-
-    .cu-sm-pb-none {
-      padding-bottom: 0;
-    }
-
-    .cu-sm-pb-sm {
-      padding-bottom: var(--canon-space-4);
-    }
-
-    .cu-sm-pb-xl {
-      padding-bottom: var(--canon-space-10);
-    }
-
-    .cu-sm-pb-xs {
-      padding-bottom: var(--canon-space-3);
-    }
-
-    .cu-sm-pl-2xl {
-      padding-left: var(--canon-space-12);
-    }
-
-    .cu-sm-pl-2xs {
-      padding-left: var(--canon-space-2);
-    }
-
-    .cu-sm-pl-lg {
-      padding-left: var(--canon-space-8);
-    }
-
-    .cu-sm-pl-md {
-      padding-left: var(--canon-space-6);
-    }
-
-    .cu-sm-pl-none {
-      padding-left: 0;
-    }
-
-    .cu-sm-pl-sm {
-      padding-left: var(--canon-space-4);
-    }
-
-    .cu-sm-pl-xl {
-      padding-left: var(--canon-space-10);
-    }
-
-    .cu-sm-pl-xs {
-      padding-left: var(--canon-space-3);
-    }
-
-    .cu-sm-pr-2xl {
-      padding-right: var(--canon-space-12);
-    }
-
-    .cu-sm-pr-2xs {
-      padding-right: var(--canon-space-2);
-    }
-
-    .cu-sm-pr-lg {
-      padding-right: var(--canon-space-8);
-    }
-
-    .cu-sm-pr-md {
-      padding-right: var(--canon-space-6);
-    }
-
-    .cu-sm-pr-none {
-      padding-right: 0;
-    }
-
-    .cu-sm-pr-sm {
-      padding-right: var(--canon-space-4);
-    }
-
-    .cu-sm-pr-xl {
-      padding-right: var(--canon-space-10);
-    }
-
-    .cu-sm-pr-xs {
-      padding-right: var(--canon-space-3);
-    }
-
-    .cu-sm-pt-2xl {
-      padding-top: var(--canon-space-12);
-    }
-
-    .cu-sm-pt-2xs {
-      padding-top: var(--canon-space-2);
-    }
-
-    .cu-sm-pt-lg {
-      padding-top: var(--canon-space-8);
-    }
-
-    .cu-sm-pt-md {
-      padding-top: var(--canon-space-6);
-    }
-
-    .cu-sm-pt-none {
-      padding-top: 0;
-    }
-
-    .cu-sm-pt-sm {
-      padding-top: var(--canon-space-4);
-    }
-
-    .cu-sm-pt-xl {
-      padding-top: var(--canon-space-10);
-    }
-
-    .cu-sm-pt-xs {
-      padding-top: var(--canon-space-3);
-    }
-
-    .cu-sm-px-2xl {
-      padding-left: var(--canon-space-12);
-      padding-right: var(--canon-space-12);
-    }
-
-    .cu-sm-px-2xs {
-      padding-left: var(--canon-space-2);
-      padding-right: var(--canon-space-2);
-    }
-
-    .cu-sm-px-lg {
-      padding-left: var(--canon-space-8);
-      padding-right: var(--canon-space-8);
-    }
-
-    .cu-sm-px-md {
-      padding-left: var(--canon-space-6);
-      padding-right: var(--canon-space-6);
-    }
-
-    .cu-sm-px-none {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    .cu-sm-px-sm {
-      padding-left: var(--canon-space-4);
-      padding-right: var(--canon-space-4);
-    }
-
-    .cu-sm-px-xl {
-      padding-left: var(--canon-space-10);
-      padding-right: var(--canon-space-10);
-    }
-
-    .cu-sm-px-xs {
-      padding-left: var(--canon-space-3);
-      padding-right: var(--canon-space-3);
-    }
-
-    .cu-sm-py-2xl {
-      padding-top: var(--canon-space-12);
-      padding-bottom: var(--canon-space-12);
-    }
-
-    .cu-sm-py-2xs {
-      padding-top: var(--canon-space-2);
-      padding-bottom: var(--canon-space-2);
-    }
-
-    .cu-sm-py-lg {
-      padding-top: var(--canon-space-8);
-      padding-bottom: var(--canon-space-8);
-    }
-
-    .cu-sm-py-md {
-      padding-top: var(--canon-space-6);
-      padding-bottom: var(--canon-space-6);
-    }
-
-    .cu-sm-py-none {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    .cu-sm-py-sm {
-      padding-top: var(--canon-space-4);
-      padding-bottom: var(--canon-space-4);
-    }
-
-    .cu-sm-py-xl {
-      padding-top: var(--canon-space-10);
-      padding-bottom: var(--canon-space-10);
-    }
-
-    .cu-sm-py-xs {
-      padding-top: var(--canon-space-3);
-      padding-bottom: var(--canon-space-3);
-    }
-
-    .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-space-12);
-    }
-
-    .cu-md-gap-lg {
-      gap: var(--canon-space-8);
-    }
-
-    .cu-md-gap-md {
-      gap: var(--canon-space-6);
-    }
-
-    .cu-md-gap-none {
-      gap: 0;
-    }
-
-    .cu-md-gap-sm {
-      gap: var(--canon-space-4);
-    }
-
-    .cu-md-gap-xl {
-      gap: var(--canon-space-10);
-    }
-
-    .cu-md-gap-xs {
-      gap: var(--canon-space-3);
-    }
-
-    .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-space-12);
-    }
-
-    .cu-md-m-2xs {
-      margin: var(--canon-space-2);
-    }
-
-    .cu-md-m-lg {
-      margin: var(--canon-space-8);
-    }
-
-    .cu-md-m-md {
-      margin: var(--canon-space-6);
-    }
-
-    .cu-md-m-none {
-      margin: 0;
-    }
-
-    .cu-md-m-sm {
-      margin: var(--canon-space-4);
-    }
-
-    .cu-md-m-xl {
-      margin: var(--canon-space-10);
-    }
-
-    .cu-md-m-xs {
-      margin: var(--canon-space-3);
-    }
-
-    .cu-md-mb-2xl {
-      margin-bottom: var(--canon-space-12);
-    }
-
-    .cu-md-mb-2xs {
-      margin-bottom: var(--canon-space-2);
-    }
-
-    .cu-md-mb-lg {
-      margin-bottom: var(--canon-space-8);
-    }
-
-    .cu-md-mb-md {
-      margin-bottom: var(--canon-space-6);
-    }
-
-    .cu-md-mb-none {
-      margin-bottom: 0;
-    }
-
-    .cu-md-mb-sm {
-      margin-bottom: var(--canon-space-4);
-    }
-
-    .cu-md-mb-xl {
-      margin-bottom: var(--canon-space-10);
-    }
-
-    .cu-md-mb-xs {
-      margin-bottom: var(--canon-space-3);
-    }
-
-    .cu-md-ml-2xl {
-      margin-left: var(--canon-space-12);
-    }
-
-    .cu-md-ml-2xs {
-      margin-left: var(--canon-space-2);
-    }
-
-    .cu-md-ml-lg {
-      margin-left: var(--canon-space-8);
-    }
-
-    .cu-md-ml-md {
-      margin-left: var(--canon-space-6);
-    }
-
-    .cu-md-ml-none {
-      margin-left: 0;
-    }
-
-    .cu-md-ml-sm {
-      margin-left: var(--canon-space-4);
-    }
-
-    .cu-md-ml-xl {
-      margin-left: var(--canon-space-10);
-    }
-
-    .cu-md-ml-xs {
-      margin-left: var(--canon-space-3);
-    }
-
-    .cu-md-mr-2xl {
-      margin-right: var(--canon-space-12);
-    }
-
-    .cu-md-mr-2xs {
-      margin-right: var(--canon-space-2);
-    }
-
-    .cu-md-mr-lg {
-      margin-right: var(--canon-space-8);
-    }
-
-    .cu-md-mr-md {
-      margin-right: var(--canon-space-6);
-    }
-
-    .cu-md-mr-none {
-      margin-right: 0;
-    }
-
-    .cu-md-mr-sm {
-      margin-right: var(--canon-space-4);
-    }
-
-    .cu-md-mr-xl {
-      margin-right: var(--canon-space-10);
-    }
-
-    .cu-md-mr-xs {
-      margin-right: var(--canon-space-3);
-    }
-
-    .cu-md-mt-2xl {
-      margin-top: var(--canon-space-12);
-    }
-
-    .cu-md-mt-2xs {
-      margin-top: var(--canon-space-2);
-    }
-
-    .cu-md-mt-lg {
-      margin-top: var(--canon-space-8);
-    }
-
-    .cu-md-mt-md {
-      margin-top: var(--canon-space-6);
-    }
-
-    .cu-md-mt-none {
-      margin-top: 0;
-    }
-
-    .cu-md-mt-sm {
-      margin-top: var(--canon-space-4);
-    }
-
-    .cu-md-mt-xl {
-      margin-top: var(--canon-space-10);
-    }
-
-    .cu-md-mt-xs {
-      margin-top: var(--canon-space-3);
-    }
-
-    .cu-md-mx-2xl {
-      margin-left: var(--canon-space-12);
-      margin-right: var(--canon-space-12);
-    }
-
-    .cu-md-mx-2xs {
-      margin-left: var(--canon-space-2);
-      margin-right: var(--canon-space-2);
-    }
-
-    .cu-md-mx-lg {
-      margin-left: var(--canon-space-8);
-      margin-right: var(--canon-space-8);
-    }
-
-    .cu-md-mx-md {
-      margin-left: var(--canon-space-6);
-      margin-right: var(--canon-space-6);
-    }
-
-    .cu-md-mx-none {
-      margin-left: 0;
-      margin-right: 0;
-    }
-
-    .cu-md-mx-sm {
-      margin-left: var(--canon-space-4);
-      margin-right: var(--canon-space-4);
-    }
-
-    .cu-md-mx-xl {
-      margin-left: var(--canon-space-10);
-      margin-right: var(--canon-space-10);
-    }
-
-    .cu-md-mx-xs {
-      margin-left: var(--canon-space-3);
-      margin-right: var(--canon-space-3);
-    }
-
-    .cu-md-my-2xl {
-      margin-top: var(--canon-space-12);
-      margin-bottom: var(--canon-space-12);
-    }
-
-    .cu-md-my-2xs {
-      margin-top: var(--canon-space-2);
-      margin-bottom: var(--canon-space-2);
-    }
-
-    .cu-md-my-lg {
-      margin-top: var(--canon-space-8);
-      margin-bottom: var(--canon-space-8);
-    }
-
-    .cu-md-my-md {
-      margin-top: var(--canon-space-6);
-      margin-bottom: var(--canon-space-6);
-    }
-
-    .cu-md-my-none {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    .cu-md-my-sm {
-      margin-top: var(--canon-space-4);
-      margin-bottom: var(--canon-space-4);
-    }
-
-    .cu-md-my-xl {
-      margin-top: var(--canon-space-10);
-      margin-bottom: var(--canon-space-10);
-    }
-
-    .cu-md-my-xs {
-      margin-top: var(--canon-space-3);
-      margin-bottom: var(--canon-space-3);
-    }
-
-    .cu-md-p-2xl {
-      padding: var(--canon-space-12);
-    }
-
-    .cu-md-p-2xs {
-      padding: var(--canon-space-2);
-    }
-
-    .cu-md-p-lg {
-      padding: var(--canon-space-8);
-    }
-
-    .cu-md-p-md {
-      padding: var(--canon-space-6);
-    }
-
-    .cu-md-p-none {
-      padding: 0;
-    }
-
-    .cu-md-p-sm {
-      padding: var(--canon-space-4);
-    }
-
-    .cu-md-p-xl {
-      padding: var(--canon-space-10);
-    }
-
-    .cu-md-p-xs {
-      padding: var(--canon-space-3);
-    }
-
-    .cu-md-pb-2xl {
-      padding-bottom: var(--canon-space-12);
-    }
-
-    .cu-md-pb-2xs {
-      padding-bottom: var(--canon-space-2);
-    }
-
-    .cu-md-pb-lg {
-      padding-bottom: var(--canon-space-8);
-    }
-
-    .cu-md-pb-md {
-      padding-bottom: var(--canon-space-6);
-    }
-
-    .cu-md-pb-none {
-      padding-bottom: 0;
-    }
-
-    .cu-md-pb-sm {
-      padding-bottom: var(--canon-space-4);
-    }
-
-    .cu-md-pb-xl {
-      padding-bottom: var(--canon-space-10);
-    }
-
-    .cu-md-pb-xs {
-      padding-bottom: var(--canon-space-3);
-    }
-
-    .cu-md-pl-2xl {
-      padding-left: var(--canon-space-12);
-    }
-
-    .cu-md-pl-2xs {
-      padding-left: var(--canon-space-2);
-    }
-
-    .cu-md-pl-lg {
-      padding-left: var(--canon-space-8);
-    }
-
-    .cu-md-pl-md {
-      padding-left: var(--canon-space-6);
-    }
-
-    .cu-md-pl-none {
-      padding-left: 0;
-    }
-
-    .cu-md-pl-sm {
-      padding-left: var(--canon-space-4);
-    }
-
-    .cu-md-pl-xl {
-      padding-left: var(--canon-space-10);
-    }
-
-    .cu-md-pl-xs {
-      padding-left: var(--canon-space-3);
-    }
-
-    .cu-md-pr-2xl {
-      padding-right: var(--canon-space-12);
-    }
-
-    .cu-md-pr-2xs {
-      padding-right: var(--canon-space-2);
-    }
-
-    .cu-md-pr-lg {
-      padding-right: var(--canon-space-8);
-    }
-
-    .cu-md-pr-md {
-      padding-right: var(--canon-space-6);
-    }
-
-    .cu-md-pr-none {
-      padding-right: 0;
-    }
-
-    .cu-md-pr-sm {
-      padding-right: var(--canon-space-4);
-    }
-
-    .cu-md-pr-xl {
-      padding-right: var(--canon-space-10);
-    }
-
-    .cu-md-pr-xs {
-      padding-right: var(--canon-space-3);
-    }
-
-    .cu-md-pt-2xl {
-      padding-top: var(--canon-space-12);
-    }
-
-    .cu-md-pt-2xs {
-      padding-top: var(--canon-space-2);
-    }
-
-    .cu-md-pt-lg {
-      padding-top: var(--canon-space-8);
-    }
-
-    .cu-md-pt-md {
-      padding-top: var(--canon-space-6);
-    }
-
-    .cu-md-pt-none {
-      padding-top: 0;
-    }
-
-    .cu-md-pt-sm {
-      padding-top: var(--canon-space-4);
-    }
-
-    .cu-md-pt-xl {
-      padding-top: var(--canon-space-10);
-    }
-
-    .cu-md-pt-xs {
-      padding-top: var(--canon-space-3);
-    }
-
-    .cu-md-px-2xl {
-      padding-left: var(--canon-space-12);
-      padding-right: var(--canon-space-12);
-    }
-
-    .cu-md-px-2xs {
-      padding-left: var(--canon-space-2);
-      padding-right: var(--canon-space-2);
-    }
-
-    .cu-md-px-lg {
-      padding-left: var(--canon-space-8);
-      padding-right: var(--canon-space-8);
-    }
-
-    .cu-md-px-md {
-      padding-left: var(--canon-space-6);
-      padding-right: var(--canon-space-6);
-    }
-
-    .cu-md-px-none {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    .cu-md-px-sm {
-      padding-left: var(--canon-space-4);
-      padding-right: var(--canon-space-4);
-    }
-
-    .cu-md-px-xl {
-      padding-left: var(--canon-space-10);
-      padding-right: var(--canon-space-10);
-    }
-
-    .cu-md-px-xs {
-      padding-left: var(--canon-space-3);
-      padding-right: var(--canon-space-3);
-    }
-
-    .cu-md-py-2xl {
-      padding-top: var(--canon-space-12);
-      padding-bottom: var(--canon-space-12);
-    }
-
-    .cu-md-py-2xs {
-      padding-top: var(--canon-space-2);
-      padding-bottom: var(--canon-space-2);
-    }
-
-    .cu-md-py-lg {
-      padding-top: var(--canon-space-8);
-      padding-bottom: var(--canon-space-8);
-    }
-
-    .cu-md-py-md {
-      padding-top: var(--canon-space-6);
-      padding-bottom: var(--canon-space-6);
-    }
-
-    .cu-md-py-none {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    .cu-md-py-sm {
-      padding-top: var(--canon-space-4);
-      padding-bottom: var(--canon-space-4);
-    }
-
-    .cu-md-py-xl {
-      padding-top: var(--canon-space-10);
-      padding-bottom: var(--canon-space-10);
-    }
-
-    .cu-md-py-xs {
-      padding-top: var(--canon-space-3);
-      padding-bottom: var(--canon-space-3);
-    }
-
-    .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-space-12);
-    }
-
-    .cu-lg-gap-lg {
-      gap: var(--canon-space-8);
-    }
-
-    .cu-lg-gap-md {
-      gap: var(--canon-space-6);
-    }
-
-    .cu-lg-gap-none {
-      gap: 0;
-    }
-
-    .cu-lg-gap-sm {
-      gap: var(--canon-space-4);
-    }
-
-    .cu-lg-gap-xl {
-      gap: var(--canon-space-10);
-    }
-
-    .cu-lg-gap-xs {
-      gap: var(--canon-space-3);
-    }
-
-    .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-space-12);
-    }
-
-    .cu-lg-m-2xs {
-      margin: var(--canon-space-2);
-    }
-
-    .cu-lg-m-lg {
-      margin: var(--canon-space-8);
-    }
-
-    .cu-lg-m-md {
-      margin: var(--canon-space-6);
-    }
-
-    .cu-lg-m-none {
-      margin: 0;
-    }
-
-    .cu-lg-m-sm {
-      margin: var(--canon-space-4);
-    }
-
-    .cu-lg-m-xl {
-      margin: var(--canon-space-10);
-    }
-
-    .cu-lg-m-xs {
-      margin: var(--canon-space-3);
-    }
-
-    .cu-lg-mb-2xl {
-      margin-bottom: var(--canon-space-12);
-    }
-
-    .cu-lg-mb-2xs {
-      margin-bottom: var(--canon-space-2);
-    }
-
-    .cu-lg-mb-lg {
-      margin-bottom: var(--canon-space-8);
-    }
-
-    .cu-lg-mb-md {
-      margin-bottom: var(--canon-space-6);
-    }
-
-    .cu-lg-mb-none {
-      margin-bottom: 0;
-    }
-
-    .cu-lg-mb-sm {
-      margin-bottom: var(--canon-space-4);
-    }
-
-    .cu-lg-mb-xl {
-      margin-bottom: var(--canon-space-10);
-    }
-
-    .cu-lg-mb-xs {
-      margin-bottom: var(--canon-space-3);
-    }
-
-    .cu-lg-ml-2xl {
-      margin-left: var(--canon-space-12);
-    }
-
-    .cu-lg-ml-2xs {
-      margin-left: var(--canon-space-2);
-    }
-
-    .cu-lg-ml-lg {
-      margin-left: var(--canon-space-8);
-    }
-
-    .cu-lg-ml-md {
-      margin-left: var(--canon-space-6);
-    }
-
-    .cu-lg-ml-none {
-      margin-left: 0;
-    }
-
-    .cu-lg-ml-sm {
-      margin-left: var(--canon-space-4);
-    }
-
-    .cu-lg-ml-xl {
-      margin-left: var(--canon-space-10);
-    }
-
-    .cu-lg-ml-xs {
-      margin-left: var(--canon-space-3);
-    }
-
-    .cu-lg-mr-2xl {
-      margin-right: var(--canon-space-12);
-    }
-
-    .cu-lg-mr-2xs {
-      margin-right: var(--canon-space-2);
-    }
-
-    .cu-lg-mr-lg {
-      margin-right: var(--canon-space-8);
-    }
-
-    .cu-lg-mr-md {
-      margin-right: var(--canon-space-6);
-    }
-
-    .cu-lg-mr-none {
-      margin-right: 0;
-    }
-
-    .cu-lg-mr-sm {
-      margin-right: var(--canon-space-4);
-    }
-
-    .cu-lg-mr-xl {
-      margin-right: var(--canon-space-10);
-    }
-
-    .cu-lg-mr-xs {
-      margin-right: var(--canon-space-3);
-    }
-
-    .cu-lg-mt-2xl {
-      margin-top: var(--canon-space-12);
-    }
-
-    .cu-lg-mt-2xs {
-      margin-top: var(--canon-space-2);
-    }
-
-    .cu-lg-mt-lg {
-      margin-top: var(--canon-space-8);
-    }
-
-    .cu-lg-mt-md {
-      margin-top: var(--canon-space-6);
-    }
-
-    .cu-lg-mt-none {
-      margin-top: 0;
-    }
-
-    .cu-lg-mt-sm {
-      margin-top: var(--canon-space-4);
-    }
-
-    .cu-lg-mt-xl {
-      margin-top: var(--canon-space-10);
-    }
-
-    .cu-lg-mt-xs {
-      margin-top: var(--canon-space-3);
-    }
-
-    .cu-lg-mx-2xl {
-      margin-left: var(--canon-space-12);
-      margin-right: var(--canon-space-12);
-    }
-
-    .cu-lg-mx-2xs {
-      margin-left: var(--canon-space-2);
-      margin-right: var(--canon-space-2);
-    }
-
-    .cu-lg-mx-lg {
-      margin-left: var(--canon-space-8);
-      margin-right: var(--canon-space-8);
-    }
-
-    .cu-lg-mx-md {
-      margin-left: var(--canon-space-6);
-      margin-right: var(--canon-space-6);
-    }
-
-    .cu-lg-mx-none {
-      margin-left: 0;
-      margin-right: 0;
-    }
-
-    .cu-lg-mx-sm {
-      margin-left: var(--canon-space-4);
-      margin-right: var(--canon-space-4);
-    }
-
-    .cu-lg-mx-xl {
-      margin-left: var(--canon-space-10);
-      margin-right: var(--canon-space-10);
-    }
-
-    .cu-lg-mx-xs {
-      margin-left: var(--canon-space-3);
-      margin-right: var(--canon-space-3);
-    }
-
-    .cu-lg-my-2xl {
-      margin-top: var(--canon-space-12);
-      margin-bottom: var(--canon-space-12);
-    }
-
-    .cu-lg-my-2xs {
-      margin-top: var(--canon-space-2);
-      margin-bottom: var(--canon-space-2);
-    }
-
-    .cu-lg-my-lg {
-      margin-top: var(--canon-space-8);
-      margin-bottom: var(--canon-space-8);
-    }
-
-    .cu-lg-my-md {
-      margin-top: var(--canon-space-6);
-      margin-bottom: var(--canon-space-6);
-    }
-
-    .cu-lg-my-none {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    .cu-lg-my-sm {
-      margin-top: var(--canon-space-4);
-      margin-bottom: var(--canon-space-4);
-    }
-
-    .cu-lg-my-xl {
-      margin-top: var(--canon-space-10);
-      margin-bottom: var(--canon-space-10);
-    }
-
-    .cu-lg-my-xs {
-      margin-top: var(--canon-space-3);
-      margin-bottom: var(--canon-space-3);
-    }
-
-    .cu-lg-p-2xl {
-      padding: var(--canon-space-12);
-    }
-
-    .cu-lg-p-2xs {
-      padding: var(--canon-space-2);
-    }
-
-    .cu-lg-p-lg {
-      padding: var(--canon-space-8);
-    }
-
-    .cu-lg-p-md {
-      padding: var(--canon-space-6);
-    }
-
-    .cu-lg-p-none {
-      padding: 0;
-    }
-
-    .cu-lg-p-sm {
-      padding: var(--canon-space-4);
-    }
-
-    .cu-lg-p-xl {
-      padding: var(--canon-space-10);
-    }
-
-    .cu-lg-p-xs {
-      padding: var(--canon-space-3);
-    }
-
-    .cu-lg-pb-2xl {
-      padding-bottom: var(--canon-space-12);
-    }
-
-    .cu-lg-pb-2xs {
-      padding-bottom: var(--canon-space-2);
-    }
-
-    .cu-lg-pb-lg {
-      padding-bottom: var(--canon-space-8);
-    }
-
-    .cu-lg-pb-md {
-      padding-bottom: var(--canon-space-6);
-    }
-
-    .cu-lg-pb-none {
-      padding-bottom: 0;
-    }
-
-    .cu-lg-pb-sm {
-      padding-bottom: var(--canon-space-4);
-    }
-
-    .cu-lg-pb-xl {
-      padding-bottom: var(--canon-space-10);
-    }
-
-    .cu-lg-pb-xs {
-      padding-bottom: var(--canon-space-3);
-    }
-
-    .cu-lg-pl-2xl {
-      padding-left: var(--canon-space-12);
-    }
-
-    .cu-lg-pl-2xs {
-      padding-left: var(--canon-space-2);
-    }
-
-    .cu-lg-pl-lg {
-      padding-left: var(--canon-space-8);
-    }
-
-    .cu-lg-pl-md {
-      padding-left: var(--canon-space-6);
-    }
-
-    .cu-lg-pl-none {
-      padding-left: 0;
-    }
-
-    .cu-lg-pl-sm {
-      padding-left: var(--canon-space-4);
-    }
-
-    .cu-lg-pl-xl {
-      padding-left: var(--canon-space-10);
-    }
-
-    .cu-lg-pl-xs {
-      padding-left: var(--canon-space-3);
-    }
-
-    .cu-lg-pr-2xl {
-      padding-right: var(--canon-space-12);
-    }
-
-    .cu-lg-pr-2xs {
-      padding-right: var(--canon-space-2);
-    }
-
-    .cu-lg-pr-lg {
-      padding-right: var(--canon-space-8);
-    }
-
-    .cu-lg-pr-md {
-      padding-right: var(--canon-space-6);
-    }
-
-    .cu-lg-pr-none {
-      padding-right: 0;
-    }
-
-    .cu-lg-pr-sm {
-      padding-right: var(--canon-space-4);
-    }
-
-    .cu-lg-pr-xl {
-      padding-right: var(--canon-space-10);
-    }
-
-    .cu-lg-pr-xs {
-      padding-right: var(--canon-space-3);
-    }
-
-    .cu-lg-pt-2xl {
-      padding-top: var(--canon-space-12);
-    }
-
-    .cu-lg-pt-2xs {
-      padding-top: var(--canon-space-2);
-    }
-
-    .cu-lg-pt-lg {
-      padding-top: var(--canon-space-8);
-    }
-
-    .cu-lg-pt-md {
-      padding-top: var(--canon-space-6);
-    }
-
-    .cu-lg-pt-none {
-      padding-top: 0;
-    }
-
-    .cu-lg-pt-sm {
-      padding-top: var(--canon-space-4);
-    }
-
-    .cu-lg-pt-xl {
-      padding-top: var(--canon-space-10);
-    }
-
-    .cu-lg-pt-xs {
-      padding-top: var(--canon-space-3);
-    }
-
-    .cu-lg-px-2xl {
-      padding-left: var(--canon-space-12);
-      padding-right: var(--canon-space-12);
-    }
-
-    .cu-lg-px-2xs {
-      padding-left: var(--canon-space-2);
-      padding-right: var(--canon-space-2);
-    }
-
-    .cu-lg-px-lg {
-      padding-left: var(--canon-space-8);
-      padding-right: var(--canon-space-8);
-    }
-
-    .cu-lg-px-md {
-      padding-left: var(--canon-space-6);
-      padding-right: var(--canon-space-6);
-    }
-
-    .cu-lg-px-none {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    .cu-lg-px-sm {
-      padding-left: var(--canon-space-4);
-      padding-right: var(--canon-space-4);
-    }
-
-    .cu-lg-px-xl {
-      padding-left: var(--canon-space-10);
-      padding-right: var(--canon-space-10);
-    }
-
-    .cu-lg-px-xs {
-      padding-left: var(--canon-space-3);
-      padding-right: var(--canon-space-3);
-    }
-
-    .cu-lg-py-2xl {
-      padding-top: var(--canon-space-12);
-      padding-bottom: var(--canon-space-12);
-    }
-
-    .cu-lg-py-2xs {
-      padding-top: var(--canon-space-2);
-      padding-bottom: var(--canon-space-2);
-    }
-
-    .cu-lg-py-lg {
-      padding-top: var(--canon-space-8);
-      padding-bottom: var(--canon-space-8);
-    }
-
-    .cu-lg-py-md {
-      padding-top: var(--canon-space-6);
-      padding-bottom: var(--canon-space-6);
-    }
-
-    .cu-lg-py-none {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    .cu-lg-py-sm {
-      padding-top: var(--canon-space-4);
-      padding-bottom: var(--canon-space-4);
-    }
-
-    .cu-lg-py-xl {
-      padding-top: var(--canon-space-10);
-      padding-bottom: var(--canon-space-10);
-    }
-
-    .cu-lg-py-xs {
-      padding-top: var(--canon-space-3);
-      padding-bottom: var(--canon-space-3);
-    }
-
-    .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-space-12);
-    }
-
-    .cu-xl-gap-lg {
-      gap: var(--canon-space-8);
-    }
-
-    .cu-xl-gap-md {
-      gap: var(--canon-space-6);
-    }
-
-    .cu-xl-gap-none {
-      gap: 0;
-    }
-
-    .cu-xl-gap-sm {
-      gap: var(--canon-space-4);
-    }
-
-    .cu-xl-gap-xl {
-      gap: var(--canon-space-10);
-    }
-
-    .cu-xl-gap-xs {
-      gap: var(--canon-space-3);
-    }
-
-    .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-space-12);
-    }
-
-    .cu-xl-m-2xs {
-      margin: var(--canon-space-2);
-    }
-
-    .cu-xl-m-lg {
-      margin: var(--canon-space-8);
-    }
-
-    .cu-xl-m-md {
-      margin: var(--canon-space-6);
-    }
-
-    .cu-xl-m-none {
-      margin: 0;
-    }
-
-    .cu-xl-m-sm {
-      margin: var(--canon-space-4);
-    }
-
-    .cu-xl-m-xl {
-      margin: var(--canon-space-10);
-    }
-
-    .cu-xl-m-xs {
-      margin: var(--canon-space-3);
-    }
-
-    .cu-xl-mb-2xl {
-      margin-bottom: var(--canon-space-12);
-    }
-
-    .cu-xl-mb-2xs {
-      margin-bottom: var(--canon-space-2);
-    }
-
-    .cu-xl-mb-lg {
-      margin-bottom: var(--canon-space-8);
-    }
-
-    .cu-xl-mb-md {
-      margin-bottom: var(--canon-space-6);
-    }
-
-    .cu-xl-mb-none {
-      margin-bottom: 0;
-    }
-
-    .cu-xl-mb-sm {
-      margin-bottom: var(--canon-space-4);
-    }
-
-    .cu-xl-mb-xl {
-      margin-bottom: var(--canon-space-10);
-    }
-
-    .cu-xl-mb-xs {
-      margin-bottom: var(--canon-space-3);
-    }
-
-    .cu-xl-ml-2xl {
-      margin-left: var(--canon-space-12);
-    }
-
-    .cu-xl-ml-2xs {
-      margin-left: var(--canon-space-2);
-    }
-
-    .cu-xl-ml-lg {
-      margin-left: var(--canon-space-8);
-    }
-
-    .cu-xl-ml-md {
-      margin-left: var(--canon-space-6);
-    }
-
-    .cu-xl-ml-none {
-      margin-left: 0;
-    }
-
-    .cu-xl-ml-sm {
-      margin-left: var(--canon-space-4);
-    }
-
-    .cu-xl-ml-xl {
-      margin-left: var(--canon-space-10);
-    }
-
-    .cu-xl-ml-xs {
-      margin-left: var(--canon-space-3);
-    }
-
-    .cu-xl-mr-2xl {
-      margin-right: var(--canon-space-12);
-    }
-
-    .cu-xl-mr-2xs {
-      margin-right: var(--canon-space-2);
-    }
-
-    .cu-xl-mr-lg {
-      margin-right: var(--canon-space-8);
-    }
-
-    .cu-xl-mr-md {
-      margin-right: var(--canon-space-6);
-    }
-
-    .cu-xl-mr-none {
-      margin-right: 0;
-    }
-
-    .cu-xl-mr-sm {
-      margin-right: var(--canon-space-4);
-    }
-
-    .cu-xl-mr-xl {
-      margin-right: var(--canon-space-10);
-    }
-
-    .cu-xl-mr-xs {
-      margin-right: var(--canon-space-3);
-    }
-
-    .cu-xl-mt-2xl {
-      margin-top: var(--canon-space-12);
-    }
-
-    .cu-xl-mt-2xs {
-      margin-top: var(--canon-space-2);
-    }
-
-    .cu-xl-mt-lg {
-      margin-top: var(--canon-space-8);
-    }
-
-    .cu-xl-mt-md {
-      margin-top: var(--canon-space-6);
-    }
-
-    .cu-xl-mt-none {
-      margin-top: 0;
-    }
-
-    .cu-xl-mt-sm {
-      margin-top: var(--canon-space-4);
-    }
-
-    .cu-xl-mt-xl {
-      margin-top: var(--canon-space-10);
-    }
-
-    .cu-xl-mt-xs {
-      margin-top: var(--canon-space-3);
-    }
-
-    .cu-xl-mx-2xl {
-      margin-left: var(--canon-space-12);
-      margin-right: var(--canon-space-12);
-    }
-
-    .cu-xl-mx-2xs {
-      margin-left: var(--canon-space-2);
-      margin-right: var(--canon-space-2);
-    }
-
-    .cu-xl-mx-lg {
-      margin-left: var(--canon-space-8);
-      margin-right: var(--canon-space-8);
-    }
-
-    .cu-xl-mx-md {
-      margin-left: var(--canon-space-6);
-      margin-right: var(--canon-space-6);
-    }
-
-    .cu-xl-mx-none {
-      margin-left: 0;
-      margin-right: 0;
-    }
-
-    .cu-xl-mx-sm {
-      margin-left: var(--canon-space-4);
-      margin-right: var(--canon-space-4);
-    }
-
-    .cu-xl-mx-xl {
-      margin-left: var(--canon-space-10);
-      margin-right: var(--canon-space-10);
-    }
-
-    .cu-xl-mx-xs {
-      margin-left: var(--canon-space-3);
-      margin-right: var(--canon-space-3);
-    }
-
-    .cu-xl-my-2xl {
-      margin-top: var(--canon-space-12);
-      margin-bottom: var(--canon-space-12);
-    }
-
-    .cu-xl-my-2xs {
-      margin-top: var(--canon-space-2);
-      margin-bottom: var(--canon-space-2);
-    }
-
-    .cu-xl-my-lg {
-      margin-top: var(--canon-space-8);
-      margin-bottom: var(--canon-space-8);
-    }
-
-    .cu-xl-my-md {
-      margin-top: var(--canon-space-6);
-      margin-bottom: var(--canon-space-6);
-    }
-
-    .cu-xl-my-none {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    .cu-xl-my-sm {
-      margin-top: var(--canon-space-4);
-      margin-bottom: var(--canon-space-4);
-    }
-
-    .cu-xl-my-xl {
-      margin-top: var(--canon-space-10);
-      margin-bottom: var(--canon-space-10);
-    }
-
-    .cu-xl-my-xs {
-      margin-top: var(--canon-space-3);
-      margin-bottom: var(--canon-space-3);
-    }
-
-    .cu-xl-p-2xl {
-      padding: var(--canon-space-12);
-    }
-
-    .cu-xl-p-2xs {
-      padding: var(--canon-space-2);
-    }
-
-    .cu-xl-p-lg {
-      padding: var(--canon-space-8);
-    }
-
-    .cu-xl-p-md {
-      padding: var(--canon-space-6);
-    }
-
-    .cu-xl-p-none {
-      padding: 0;
-    }
-
-    .cu-xl-p-sm {
-      padding: var(--canon-space-4);
-    }
-
-    .cu-xl-p-xl {
-      padding: var(--canon-space-10);
-    }
-
-    .cu-xl-p-xs {
-      padding: var(--canon-space-3);
-    }
-
-    .cu-xl-pb-2xl {
-      padding-bottom: var(--canon-space-12);
-    }
-
-    .cu-xl-pb-2xs {
-      padding-bottom: var(--canon-space-2);
-    }
-
-    .cu-xl-pb-lg {
-      padding-bottom: var(--canon-space-8);
-    }
-
-    .cu-xl-pb-md {
-      padding-bottom: var(--canon-space-6);
-    }
-
-    .cu-xl-pb-none {
-      padding-bottom: 0;
-    }
-
-    .cu-xl-pb-sm {
-      padding-bottom: var(--canon-space-4);
-    }
-
-    .cu-xl-pb-xl {
-      padding-bottom: var(--canon-space-10);
-    }
-
-    .cu-xl-pb-xs {
-      padding-bottom: var(--canon-space-3);
-    }
-
-    .cu-xl-pl-2xl {
-      padding-left: var(--canon-space-12);
-    }
-
-    .cu-xl-pl-2xs {
-      padding-left: var(--canon-space-2);
-    }
-
-    .cu-xl-pl-lg {
-      padding-left: var(--canon-space-8);
-    }
-
-    .cu-xl-pl-md {
-      padding-left: var(--canon-space-6);
-    }
-
-    .cu-xl-pl-none {
-      padding-left: 0;
-    }
-
-    .cu-xl-pl-sm {
-      padding-left: var(--canon-space-4);
-    }
-
-    .cu-xl-pl-xl {
-      padding-left: var(--canon-space-10);
-    }
-
-    .cu-xl-pl-xs {
-      padding-left: var(--canon-space-3);
-    }
-
-    .cu-xl-pr-2xl {
-      padding-right: var(--canon-space-12);
-    }
-
-    .cu-xl-pr-2xs {
-      padding-right: var(--canon-space-2);
-    }
-
-    .cu-xl-pr-lg {
-      padding-right: var(--canon-space-8);
-    }
-
-    .cu-xl-pr-md {
-      padding-right: var(--canon-space-6);
-    }
-
-    .cu-xl-pr-none {
-      padding-right: 0;
-    }
-
-    .cu-xl-pr-sm {
-      padding-right: var(--canon-space-4);
-    }
-
-    .cu-xl-pr-xl {
-      padding-right: var(--canon-space-10);
-    }
-
-    .cu-xl-pr-xs {
-      padding-right: var(--canon-space-3);
-    }
-
-    .cu-xl-pt-2xl {
-      padding-top: var(--canon-space-12);
-    }
-
-    .cu-xl-pt-2xs {
-      padding-top: var(--canon-space-2);
-    }
-
-    .cu-xl-pt-lg {
-      padding-top: var(--canon-space-8);
-    }
-
-    .cu-xl-pt-md {
-      padding-top: var(--canon-space-6);
-    }
-
-    .cu-xl-pt-none {
-      padding-top: 0;
-    }
-
-    .cu-xl-pt-sm {
-      padding-top: var(--canon-space-4);
-    }
-
-    .cu-xl-pt-xl {
-      padding-top: var(--canon-space-10);
-    }
-
-    .cu-xl-pt-xs {
-      padding-top: var(--canon-space-3);
-    }
-
-    .cu-xl-px-2xl {
-      padding-left: var(--canon-space-12);
-      padding-right: var(--canon-space-12);
-    }
-
-    .cu-xl-px-2xs {
-      padding-left: var(--canon-space-2);
-      padding-right: var(--canon-space-2);
-    }
-
-    .cu-xl-px-lg {
-      padding-left: var(--canon-space-8);
-      padding-right: var(--canon-space-8);
-    }
-
-    .cu-xl-px-md {
-      padding-left: var(--canon-space-6);
-      padding-right: var(--canon-space-6);
-    }
-
-    .cu-xl-px-none {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    .cu-xl-px-sm {
-      padding-left: var(--canon-space-4);
-      padding-right: var(--canon-space-4);
-    }
-
-    .cu-xl-px-xl {
-      padding-left: var(--canon-space-10);
-      padding-right: var(--canon-space-10);
-    }
-
-    .cu-xl-px-xs {
-      padding-left: var(--canon-space-3);
-      padding-right: var(--canon-space-3);
-    }
-
-    .cu-xl-py-2xl {
-      padding-top: var(--canon-space-12);
-      padding-bottom: var(--canon-space-12);
-    }
-
-    .cu-xl-py-2xs {
-      padding-top: var(--canon-space-2);
-      padding-bottom: var(--canon-space-2);
-    }
-
-    .cu-xl-py-lg {
-      padding-top: var(--canon-space-8);
-      padding-bottom: var(--canon-space-8);
-    }
-
-    .cu-xl-py-md {
-      padding-top: var(--canon-space-6);
-      padding-bottom: var(--canon-space-6);
-    }
-
-    .cu-xl-py-none {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    .cu-xl-py-sm {
-      padding-top: var(--canon-space-4);
-      padding-bottom: var(--canon-space-4);
-    }
-
-    .cu-xl-py-xl {
-      padding-top: var(--canon-space-10);
-      padding-bottom: var(--canon-space-10);
-    }
-
-    .cu-xl-py-xs {
-      padding-top: var(--canon-space-3);
-      padding-bottom: var(--canon-space-3);
-    }
-
-    .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-space-12);
-    }
-
-    .cu-2xl-gap-lg {
-      gap: var(--canon-space-8);
-    }
-
-    .cu-2xl-gap-md {
-      gap: var(--canon-space-6);
-    }
-
-    .cu-2xl-gap-none {
-      gap: 0;
-    }
-
-    .cu-2xl-gap-sm {
-      gap: var(--canon-space-4);
-    }
-
-    .cu-2xl-gap-xl {
-      gap: var(--canon-space-10);
-    }
-
-    .cu-2xl-gap-xs {
-      gap: var(--canon-space-3);
-    }
-
-    .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-space-12);
-    }
-
-    .cu-2xl-m-2xs {
-      margin: var(--canon-space-2);
-    }
-
-    .cu-2xl-m-lg {
-      margin: var(--canon-space-8);
-    }
-
-    .cu-2xl-m-md {
-      margin: var(--canon-space-6);
-    }
-
-    .cu-2xl-m-none {
-      margin: 0;
-    }
-
-    .cu-2xl-m-sm {
-      margin: var(--canon-space-4);
-    }
-
-    .cu-2xl-m-xl {
-      margin: var(--canon-space-10);
-    }
-
-    .cu-2xl-m-xs {
-      margin: var(--canon-space-3);
-    }
-
-    .cu-2xl-mb-2xl {
-      margin-bottom: var(--canon-space-12);
-    }
-
-    .cu-2xl-mb-2xs {
-      margin-bottom: var(--canon-space-2);
-    }
-
-    .cu-2xl-mb-lg {
-      margin-bottom: var(--canon-space-8);
-    }
-
-    .cu-2xl-mb-md {
-      margin-bottom: var(--canon-space-6);
-    }
-
-    .cu-2xl-mb-none {
-      margin-bottom: 0;
-    }
-
-    .cu-2xl-mb-sm {
-      margin-bottom: var(--canon-space-4);
-    }
-
-    .cu-2xl-mb-xl {
-      margin-bottom: var(--canon-space-10);
-    }
-
-    .cu-2xl-mb-xs {
-      margin-bottom: var(--canon-space-3);
-    }
-
-    .cu-2xl-ml-2xl {
-      margin-left: var(--canon-space-12);
-    }
-
-    .cu-2xl-ml-2xs {
-      margin-left: var(--canon-space-2);
-    }
-
-    .cu-2xl-ml-lg {
-      margin-left: var(--canon-space-8);
-    }
-
-    .cu-2xl-ml-md {
-      margin-left: var(--canon-space-6);
-    }
-
-    .cu-2xl-ml-none {
-      margin-left: 0;
-    }
-
-    .cu-2xl-ml-sm {
-      margin-left: var(--canon-space-4);
-    }
-
-    .cu-2xl-ml-xl {
-      margin-left: var(--canon-space-10);
-    }
-
-    .cu-2xl-ml-xs {
-      margin-left: var(--canon-space-3);
-    }
-
-    .cu-2xl-mr-2xl {
-      margin-right: var(--canon-space-12);
-    }
-
-    .cu-2xl-mr-2xs {
-      margin-right: var(--canon-space-2);
-    }
-
-    .cu-2xl-mr-lg {
-      margin-right: var(--canon-space-8);
-    }
-
-    .cu-2xl-mr-md {
-      margin-right: var(--canon-space-6);
-    }
-
-    .cu-2xl-mr-none {
-      margin-right: 0;
-    }
-
-    .cu-2xl-mr-sm {
-      margin-right: var(--canon-space-4);
-    }
-
-    .cu-2xl-mr-xl {
-      margin-right: var(--canon-space-10);
-    }
-
-    .cu-2xl-mr-xs {
-      margin-right: var(--canon-space-3);
-    }
-
-    .cu-2xl-mt-2xl {
-      margin-top: var(--canon-space-12);
-    }
-
-    .cu-2xl-mt-2xs {
-      margin-top: var(--canon-space-2);
-    }
-
-    .cu-2xl-mt-lg {
-      margin-top: var(--canon-space-8);
-    }
-
-    .cu-2xl-mt-md {
-      margin-top: var(--canon-space-6);
-    }
-
-    .cu-2xl-mt-none {
-      margin-top: 0;
-    }
-
-    .cu-2xl-mt-sm {
-      margin-top: var(--canon-space-4);
-    }
-
-    .cu-2xl-mt-xl {
-      margin-top: var(--canon-space-10);
-    }
-
-    .cu-2xl-mt-xs {
-      margin-top: var(--canon-space-3);
-    }
-
-    .cu-2xl-mx-2xl {
-      margin-left: var(--canon-space-12);
-      margin-right: var(--canon-space-12);
-    }
-
-    .cu-2xl-mx-2xs {
-      margin-left: var(--canon-space-2);
-      margin-right: var(--canon-space-2);
-    }
-
-    .cu-2xl-mx-lg {
-      margin-left: var(--canon-space-8);
-      margin-right: var(--canon-space-8);
-    }
-
-    .cu-2xl-mx-md {
-      margin-left: var(--canon-space-6);
-      margin-right: var(--canon-space-6);
-    }
-
-    .cu-2xl-mx-none {
-      margin-left: 0;
-      margin-right: 0;
-    }
-
-    .cu-2xl-mx-sm {
-      margin-left: var(--canon-space-4);
-      margin-right: var(--canon-space-4);
-    }
-
-    .cu-2xl-mx-xl {
-      margin-left: var(--canon-space-10);
-      margin-right: var(--canon-space-10);
-    }
-
-    .cu-2xl-mx-xs {
-      margin-left: var(--canon-space-3);
-      margin-right: var(--canon-space-3);
-    }
-
-    .cu-2xl-my-2xl {
-      margin-top: var(--canon-space-12);
-      margin-bottom: var(--canon-space-12);
-    }
-
-    .cu-2xl-my-2xs {
-      margin-top: var(--canon-space-2);
-      margin-bottom: var(--canon-space-2);
-    }
-
-    .cu-2xl-my-lg {
-      margin-top: var(--canon-space-8);
-      margin-bottom: var(--canon-space-8);
-    }
-
-    .cu-2xl-my-md {
-      margin-top: var(--canon-space-6);
-      margin-bottom: var(--canon-space-6);
-    }
-
-    .cu-2xl-my-none {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    .cu-2xl-my-sm {
-      margin-top: var(--canon-space-4);
-      margin-bottom: var(--canon-space-4);
-    }
-
-    .cu-2xl-my-xl {
-      margin-top: var(--canon-space-10);
-      margin-bottom: var(--canon-space-10);
-    }
-
-    .cu-2xl-my-xs {
-      margin-top: var(--canon-space-3);
-      margin-bottom: var(--canon-space-3);
-    }
-
-    .cu-2xl-p-2xl {
-      padding: var(--canon-space-12);
-    }
-
-    .cu-2xl-p-2xs {
-      padding: var(--canon-space-2);
-    }
-
-    .cu-2xl-p-lg {
-      padding: var(--canon-space-8);
-    }
-
-    .cu-2xl-p-md {
-      padding: var(--canon-space-6);
-    }
-
-    .cu-2xl-p-none {
-      padding: 0;
-    }
-
-    .cu-2xl-p-sm {
-      padding: var(--canon-space-4);
-    }
-
-    .cu-2xl-p-xl {
-      padding: var(--canon-space-10);
-    }
-
-    .cu-2xl-p-xs {
-      padding: var(--canon-space-3);
-    }
-
-    .cu-2xl-pb-2xl {
-      padding-bottom: var(--canon-space-12);
-    }
-
-    .cu-2xl-pb-2xs {
-      padding-bottom: var(--canon-space-2);
-    }
-
-    .cu-2xl-pb-lg {
-      padding-bottom: var(--canon-space-8);
-    }
-
-    .cu-2xl-pb-md {
-      padding-bottom: var(--canon-space-6);
-    }
-
-    .cu-2xl-pb-none {
-      padding-bottom: 0;
-    }
-
-    .cu-2xl-pb-sm {
-      padding-bottom: var(--canon-space-4);
-    }
-
-    .cu-2xl-pb-xl {
-      padding-bottom: var(--canon-space-10);
-    }
-
-    .cu-2xl-pb-xs {
-      padding-bottom: var(--canon-space-3);
-    }
-
-    .cu-2xl-pl-2xl {
-      padding-left: var(--canon-space-12);
-    }
-
-    .cu-2xl-pl-2xs {
-      padding-left: var(--canon-space-2);
-    }
-
-    .cu-2xl-pl-lg {
-      padding-left: var(--canon-space-8);
-    }
-
-    .cu-2xl-pl-md {
-      padding-left: var(--canon-space-6);
-    }
-
-    .cu-2xl-pl-none {
-      padding-left: 0;
-    }
-
-    .cu-2xl-pl-sm {
-      padding-left: var(--canon-space-4);
-    }
-
-    .cu-2xl-pl-xl {
-      padding-left: var(--canon-space-10);
-    }
-
-    .cu-2xl-pl-xs {
-      padding-left: var(--canon-space-3);
-    }
-
-    .cu-2xl-pr-2xl {
-      padding-right: var(--canon-space-12);
-    }
-
-    .cu-2xl-pr-2xs {
-      padding-right: var(--canon-space-2);
-    }
-
-    .cu-2xl-pr-lg {
-      padding-right: var(--canon-space-8);
-    }
-
-    .cu-2xl-pr-md {
-      padding-right: var(--canon-space-6);
-    }
-
-    .cu-2xl-pr-none {
-      padding-right: 0;
-    }
-
-    .cu-2xl-pr-sm {
-      padding-right: var(--canon-space-4);
-    }
-
-    .cu-2xl-pr-xl {
-      padding-right: var(--canon-space-10);
-    }
-
-    .cu-2xl-pr-xs {
-      padding-right: var(--canon-space-3);
-    }
-
-    .cu-2xl-pt-2xl {
-      padding-top: var(--canon-space-12);
-    }
-
-    .cu-2xl-pt-2xs {
-      padding-top: var(--canon-space-2);
-    }
-
-    .cu-2xl-pt-lg {
-      padding-top: var(--canon-space-8);
-    }
-
-    .cu-2xl-pt-md {
-      padding-top: var(--canon-space-6);
-    }
-
-    .cu-2xl-pt-none {
-      padding-top: 0;
-    }
-
-    .cu-2xl-pt-sm {
-      padding-top: var(--canon-space-4);
-    }
-
-    .cu-2xl-pt-xl {
-      padding-top: var(--canon-space-10);
-    }
-
-    .cu-2xl-pt-xs {
-      padding-top: var(--canon-space-3);
-    }
-
-    .cu-2xl-px-2xl {
-      padding-left: var(--canon-space-12);
-      padding-right: var(--canon-space-12);
-    }
-
-    .cu-2xl-px-2xs {
-      padding-left: var(--canon-space-2);
-      padding-right: var(--canon-space-2);
-    }
-
-    .cu-2xl-px-lg {
-      padding-left: var(--canon-space-8);
-      padding-right: var(--canon-space-8);
-    }
-
-    .cu-2xl-px-md {
-      padding-left: var(--canon-space-6);
-      padding-right: var(--canon-space-6);
-    }
-
-    .cu-2xl-px-none {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    .cu-2xl-px-sm {
-      padding-left: var(--canon-space-4);
-      padding-right: var(--canon-space-4);
-    }
-
-    .cu-2xl-px-xl {
-      padding-left: var(--canon-space-10);
-      padding-right: var(--canon-space-10);
-    }
-
-    .cu-2xl-px-xs {
-      padding-left: var(--canon-space-3);
-      padding-right: var(--canon-space-3);
-    }
-
-    .cu-2xl-py-2xl {
-      padding-top: var(--canon-space-12);
-      padding-bottom: var(--canon-space-12);
-    }
-
-    .cu-2xl-py-2xs {
-      padding-top: var(--canon-space-2);
-      padding-bottom: var(--canon-space-2);
-    }
-
-    .cu-2xl-py-lg {
-      padding-top: var(--canon-space-8);
-      padding-bottom: var(--canon-space-8);
-    }
-
-    .cu-2xl-py-md {
-      padding-top: var(--canon-space-6);
-      padding-bottom: var(--canon-space-6);
-    }
-
-    .cu-2xl-py-none {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    .cu-2xl-py-sm {
-      padding-top: var(--canon-space-4);
-      padding-bottom: var(--canon-space-4);
-    }
-
-    .cu-2xl-py-xl {
-      padding-top: var(--canon-space-10);
-      padding-bottom: var(--canon-space-10);
-    }
-
-    .cu-2xl-py-xs {
-      padding-top: var(--canon-space-3);
-      padding-bottom: var(--canon-space-3);
-    }
-
-    .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-font-regular: system-ui;
-  --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-space: .25rem;
-  --canon-space-0_5: calc(var(--canon-space) * .5);
-  --canon-space-1: var(--canon-space);
-  --canon-space-1_5: calc(var(--canon-space) * 1.5);
-  --canon-space-2: calc(var(--canon-space) * 2);
-  --canon-space-3: calc(var(--canon-space) * 3);
-  --canon-space-4: calc(var(--canon-space) * 4);
-  --canon-space-5: calc(var(--canon-space) * 5);
-  --canon-space-6: calc(var(--canon-space) * 6);
-  --canon-space-7: calc(var(--canon-space) * 7);
-  --canon-space-8: calc(var(--canon-space) * 8);
-  --canon-space-9: calc(var(--canon-space) * 9);
-  --canon-space-10: calc(var(--canon-space) * 10);
-  --canon-space-11: calc(var(--canon-space) * 11);
-  --canon-space-12: calc(var(--canon-space) * 12);
-  --canon-space-13: calc(var(--canon-space) * 13);
-  --canon-space-14: calc(var(--canon-space) * 14);
-  --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;
-  --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: #0006;
-  --canon-error: #f50000;
-  --canon-text-primary: #000;
-  --canon-text-primary-on-accent: #fff;
-  --canon-text-secondary: #646464;
-}
-
-[data-theme="dark"] {
-  --canon-accent: #fff;
-  --canon-background: #000;
-  --canon-surface-1: #121212;
-  --canon-surface-2: #1a1a1a;
-  --canon-border-base: #fff3;
-  --canon-border-hover: #ffffff4d;
-  --canon-border-warning: #f50000;
-  --canon-border-error: #f87503;
-  --canon-border-selected: #fff6;
-  --canon-error: #f50000;
-  --canon-text-primary: #fff;
-  --canon-text-primary-on-accent: #000;
-  --canon-text-secondary: #b3b3b3;
-}
diff --git a/canon-docs/scripts/watch-css.js b/canon-docs/scripts/build-css.js
similarity index 55%
rename from canon-docs/scripts/watch-css.js
rename to canon-docs/scripts/build-css.js
index b3cfedd570..be85164347 100644
--- a/canon-docs/scripts/watch-css.js
+++ b/canon-docs/scripts/build-css.js
@@ -1,6 +1,5 @@
 const fs = require('fs');
 const path = require('path');
-const chokidar = require('chokidar');
 const { bundle } = require('lightningcss');
 
 const source = '../../packages/canon/src/css';
@@ -21,7 +20,7 @@ const bundleAndCopyFile = async (source, destination) => {
   try {
     const result = await bundle({
       filename: source,
-      minify: false,
+      minify: true,
     });
 
     fs.writeFileSync(destination, result.code);
@@ -31,25 +30,16 @@ const bundleAndCopyFile = async (source, destination) => {
   }
 };
 
-// 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);
-});
-
-// Watch the backstage.css file for changes
-chokidar.watch(source3).on('change', () => {
-  console.log('Detected change in backstage.css, bundling and copying...');
-  bundleAndCopyFile(source3, destination3);
-});
-
 // Initial bundle and copy
-bundleAndCopyFile(source1, destination1);
-bundleAndCopyFile(source2, destination2);
-bundleAndCopyFile(source3, destination3);
+Promise.all([
+  bundleAndCopyFile(source1, destination1),
+  bundleAndCopyFile(source2, destination2),
+  bundleAndCopyFile(source3, destination3),
+])
+  .then(() => {
+    // Add an empty line after all operations are complete - It looks better in the terminal :)
+    console.log('');
+  })
+  .catch(err => {
+    console.error('Error in processing files:', err);
+  });
diff --git a/canon-docs/yarn.lock b/canon-docs/yarn.lock
index e8b236002c..ff2b0c6329 100644
--- a/canon-docs/yarn.lock
+++ b/canon-docs/yarn.lock
@@ -1507,7 +1507,6 @@ __metadata:
     "@types/react-dom": ^18
     "@uiw/codemirror-themes": ^4.23.7
     "@uiw/react-codemirror": ^4.23.7
-    concurrently: ^9.1.2
     eslint: ^8
     eslint-config-next: 14.2.23
     lightningcss: ^1.28.2
@@ -1528,7 +1527,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:^4.0.0, chalk@npm:^4.1.2":
+"chalk@npm:^4.0.0":
   version: 4.1.2
   resolution: "chalk@npm:4.1.2"
   dependencies:
@@ -1573,17 +1572,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cliui@npm:^8.0.1":
-  version: 8.0.1
-  resolution: "cliui@npm:8.0.1"
-  dependencies:
-    string-width: ^4.2.0
-    strip-ansi: ^6.0.1
-    wrap-ansi: ^7.0.0
-  checksum: 79648b3b0045f2e285b76fb2e24e207c6db44323581e421c3acbd0e86454cba1b37aea976ab50195a49e7384b871e6dfb2247ad7dec53c02454ac6497394cb56
-  languageName: node
-  linkType: hard
-
 "codemirror@npm:^6.0.0":
   version: 6.0.1
   resolution: "codemirror@npm:6.0.1"
@@ -1636,24 +1624,6 @@ __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
-
 "crelt@npm:^1.0.5":
   version: 1.0.6
   resolution: "crelt@npm:1.0.6"
@@ -2136,13 +2106,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"escalade@npm:^3.1.1":
-  version: 3.2.0
-  resolution: "escalade@npm:3.2.0"
-  checksum: 47b029c83de01b0d17ad99ed766347b974b0d628e848de404018f3abee728e987da0d2d370ad4574aa3d5b5bfc368754fd085d69a30f8e75903486ec4b5b709e
-  languageName: node
-  linkType: hard
-
 "escape-string-regexp@npm:^4.0.0":
   version: 4.0.0
   resolution: "escape-string-regexp@npm:4.0.0"
@@ -2656,13 +2619,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-caller-file@npm:^2.0.5":
-  version: 2.0.5
-  resolution: "get-caller-file@npm:2.0.5"
-  checksum: b9769a836d2a98c3ee734a88ba712e62703f1df31b94b784762c433c27a386dd6029ff55c2a920c392e33657d80191edbf18c61487e198844844516f843496b9
-  languageName: node
-  linkType: hard
-
 "get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6, get-intrinsic@npm:^1.2.7":
   version: 1.2.7
   resolution: "get-intrinsic@npm:1.2.7"
@@ -3580,13 +3536,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:^4.17.21":
-  version: 4.17.21
-  resolution: "lodash@npm:4.17.21"
-  checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
-  languageName: node
-  linkType: hard
-
 "longest-streak@npm:^3.0.0":
   version: 3.1.0
   resolution: "longest-streak@npm:3.1.0"
@@ -4740,13 +4689,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"require-directory@npm:^2.1.1":
-  version: 2.1.1
-  resolution: "require-directory@npm:2.1.1"
-  checksum: fb47e70bf0001fdeabdc0429d431863e9475e7e43ea5f94ad86503d918423c1543361cc5166d713eaa7029dd7a3d34775af04764bebff99ef413111a5af18c80
-  languageName: node
-  linkType: hard
-
 "resolve-from@npm:^4.0.0":
   version: 4.0.0
   resolution: "resolve-from@npm:4.0.0"
@@ -4840,15 +4782,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rxjs@npm:^7.8.1":
-  version: 7.8.1
-  resolution: "rxjs@npm:7.8.1"
-  dependencies:
-    tslib: ^2.1.0
-  checksum: de4b53db1063e618ec2eca0f7965d9137cabe98cf6be9272efe6c86b47c17b987383df8574861bcced18ebd590764125a901d5506082be84a8b8e364bf05f119
-  languageName: node
-  linkType: hard
-
 "safe-array-concat@npm:^1.1.3":
   version: 1.1.3
   resolution: "safe-array-concat@npm:1.1.3"
@@ -4963,13 +4896,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shell-quote@npm:^1.8.1":
-  version: 1.8.2
-  resolution: "shell-quote@npm:1.8.2"
-  checksum: 1e97b62ced1c4c5135015978ebf273bed1f425a68cf84163e83fbb0f34b3ff9471e656720dab2b7cbb4ae0f58998e686d17d166c28dfb3662acd009e8bd7faed
-  languageName: node
-  linkType: hard
-
 "shiki@npm:^1.26.1":
   version: 1.26.1
   resolution: "shiki@npm:1.26.1"
@@ -5101,7 +5027,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string-width-cjs@npm:string-width@^4.2.0, string-width@npm:^4.1.0, string-width@npm:^4.2.0, string-width@npm:^4.2.3":
+"string-width-cjs@npm:string-width@^4.2.0, string-width@npm:^4.1.0":
   version: 4.2.3
   resolution: "string-width@npm:4.2.3"
   dependencies:
@@ -5286,15 +5212,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"supports-color@npm:^8.1.1":
-  version: 8.1.1
-  resolution: "supports-color@npm:8.1.1"
-  dependencies:
-    has-flag: ^4.0.0
-  checksum: c052193a7e43c6cdc741eb7f378df605636e01ad434badf7324f17fb60c69a880d8d8fcdcb562cf94c2350e57b937d7425ab5b8326c67c2adc48f7c87c1db406
-  languageName: node
-  linkType: hard
-
 "supports-preserve-symlinks-flag@npm:^1.0.0":
   version: 1.0.0
   resolution: "supports-preserve-symlinks-flag@npm:1.0.0"
@@ -5332,15 +5249,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tree-kill@npm:^1.2.2":
-  version: 1.2.2
-  resolution: "tree-kill@npm:1.2.2"
-  bin:
-    tree-kill: cli.js
-  checksum: 49117f5f410d19c84b0464d29afb9642c863bc5ba40fcb9a245d474c6d5cc64d1b177a6e6713129eb346b40aebb9d4631d967517f9fbe8251c35b21b13cd96c7
-  languageName: node
-  linkType: hard
-
 "trim-lines@npm:^3.0.0":
   version: 3.0.1
   resolution: "trim-lines@npm:3.0.1"
@@ -5376,7 +5284,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.4.0":
+"tslib@npm:^2.0.1, tslib@npm:^2.4.0":
   version: 2.8.1
   resolution: "tslib@npm:2.8.1"
   checksum: e4aba30e632b8c8902b47587fd13345e2827fa639e7c3121074d5ee0880723282411a8838f830b55100cbe4517672f84a2472667d355b81e8af165a55dc6203a
@@ -5697,7 +5605,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0, wrap-ansi@npm:^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version: 7.0.0
   resolution: "wrap-ansi@npm:7.0.0"
   dependencies:
@@ -5741,35 +5649,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"y18n@npm:^5.0.5":
-  version: 5.0.8
-  resolution: "y18n@npm:5.0.8"
-  checksum: 54f0fb95621ee60898a38c572c515659e51cc9d9f787fb109cef6fde4befbe1c4602dc999d30110feee37456ad0f1660fa2edcfde6a9a740f86a290999550d30
-  languageName: node
-  linkType: hard
-
-"yargs-parser@npm:^21.1.1":
-  version: 21.1.1
-  resolution: "yargs-parser@npm:21.1.1"
-  checksum: ed2d96a616a9e3e1cc7d204c62ecc61f7aaab633dcbfab2c6df50f7f87b393993fe6640d017759fe112d0cb1e0119f2b4150a87305cc873fd90831c6a58ccf1c
-  languageName: node
-  linkType: hard
-
-"yargs@npm:^17.7.2":
-  version: 17.7.2
-  resolution: "yargs@npm:17.7.2"
-  dependencies:
-    cliui: ^8.0.1
-    escalade: ^3.1.1
-    get-caller-file: ^2.0.5
-    require-directory: ^2.1.1
-    string-width: ^4.2.3
-    y18n: ^5.0.5
-    yargs-parser: ^21.1.1
-  checksum: 73b572e863aa4a8cbef323dd911d79d193b772defd5a51aab0aca2d446655216f5002c42c5306033968193bdbf892a7a4c110b0d77954a7fdf563e653967b56a
-  languageName: node
-  linkType: hard
-
 "yocto-queue@npm:^0.1.0":
   version: 0.1.0
   resolution: "yocto-queue@npm:0.1.0"
diff --git a/packages/canon/.storybook/themes/backstage.css b/packages/canon/.storybook/themes/backstage.css
index 780876501b..3e8cc85a56 100644
--- a/packages/canon/.storybook/themes/backstage.css
+++ b/packages/canon/.storybook/themes/backstage.css
@@ -2,7 +2,7 @@
 [data-theme-name='legacy'][data-theme='dark'] {
   --canon-font-regular: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
 
-  .cn-button {
+  .canon-Button {
     border-radius: 60px;
     font-weight: 400;
     text-transform: uppercase;
@@ -20,7 +20,7 @@
       box-shadow: none;
     }
 
-    &.cn-button-primary {
+    &.canon-Button--variant-primary {
       color: #fff;
       background-color: rgb(21, 58, 102);
       box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
@@ -33,7 +33,7 @@
       }
     }
 
-    &.cn-button-secondary {
+    &.canon-Button--variant-secondary {
       background-color: transparent;
       border: 1px solid rgba(31, 84, 147, 0.5);
       color: #1f5493;
@@ -44,7 +44,7 @@
       }
     }
 
-    &.cn-button-tertiary {
+    &.canon-Button--variant-tertiary {
       background-color: transparent;
       border: none;
       color: #1f5493;