-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathplayground.html
1 lines (1 loc) · 56.2 KB
/
playground.html
1
<!DOCTYPE html><html lang="en" data-theme="light" data-theme-name="default"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/_next/static/css/93fcd661c6363c0c.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/a468676a8a327df7.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-87c16ee3d25787b8.js"/><script src="/_next/static/chunks/fd9d1056-623c0ce938e70bca.js" async=""></script><script src="/_next/static/chunks/117-21b0e04ef88c2421.js" async=""></script><script src="/_next/static/chunks/main-app-8ccb91074c88fe62.js" async=""></script><script src="/_next/static/chunks/42437bae-285027d9bfc4a910.js" async=""></script><script src="/_next/static/chunks/686-0e4d8ec92a84798f.js" async=""></script><script src="/_next/static/chunks/861-81a1aebced4e65d6.js" async=""></script><script src="/_next/static/chunks/734-8623125fd9e85037.js" async=""></script><script src="/_next/static/chunks/app/(playground)/playground/page-7411a78559798aaf.js" async=""></script><script src="/_next/static/chunks/1e87141b-ef71435532f04784.js" async=""></script><script src="/_next/static/chunks/363642f4-25d86c84e2b02bb7.js" async=""></script><script src="/_next/static/chunks/975-077eb926170fb42a.js" async=""></script><script src="/_next/static/chunks/333-b93414cb5c90c78e.js" async=""></script><script src="/_next/static/chunks/972-92714dd3e6d5d64f.js" async=""></script><script src="/_next/static/chunks/664-189f7a54abdf23a0.js" async=""></script><script src="/_next/static/chunks/app/layout-541c9fb6970ae8c1.js" async=""></script><title>Canon</title><meta name="description" content="UI library for Backstage"/><meta property="og:title" content="Canon"/><meta property="og:description" content="UI library for Backstage"/><meta property="og:image:type" content="image/jpeg"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image" content="https://canon.backstage.io/opengraph-image.jpg?556e6c1ce23ce382"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Canon"/><meta name="twitter:description" content="UI library for Backstage"/><meta name="twitter:image:type" content="image/jpeg"/><meta name="twitter:image:width" content="1200"/><meta name="twitter:image:height" content="630"/><meta name="twitter:image" content="https://canon.backstage.io/opengraph-image.jpg?556e6c1ce23ce382"/><link rel="icon" href="/icon.svg?27251f321bf90e71" type="image/svg+xml" sizes="any"/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body><div class="page_global__DlbOF"><div class="Sidebar_sidebar__86IlD"><div class="Sidebar_logoContainer__OcEVQ"><a href="/"><svg width="89" height="27" fill="none" xmlns="http://www.w3.org/2000/svg" class="Sidebar_logo__P79Og"><path d="M77.414 9.71h3.036v2.992l-.264-.022c.279-.88.748-1.65 1.408-2.31.675-.66 1.533-.99 2.574-.99 1.086 0 1.9.352 2.442 1.056.558.689.836 1.598.836 2.728v7.502H84.41v-6.6c0-.66-.117-1.159-.352-1.496-.234-.338-.623-.506-1.166-.506-.601 0-1.122.271-1.562.814a4.321 4.321 0 0 0-.88 1.848v5.94h-3.036V9.71ZM69.868 21.04c-1.13 0-2.142-.257-3.036-.77a5.547 5.547 0 0 1-2.068-2.09c-.484-.895-.726-1.892-.726-2.992 0-1.115.242-2.112.726-2.992a5.503 5.503 0 0 1 2.068-2.112c.88-.514 1.892-.77 3.036-.77 1.144 0 2.156.256 3.036.77a5.347 5.347 0 0 1 2.046 2.112c.498.88.748 1.87.748 2.97 0 1.114-.25 2.12-.748 3.014a5.343 5.343 0 0 1-2.068 2.09c-.88.513-1.885.77-3.014.77Zm0-2.618c.557 0 1.048-.132 1.474-.396a2.79 2.79 0 0 0 .99-1.144c.234-.499.352-1.064.352-1.694 0-.63-.118-1.188-.352-1.672a2.764 2.764 0 0 0-.99-1.166c-.426-.279-.917-.418-1.474-.418-.558 0-1.05.14-1.474.418a2.764 2.764 0 0 0-.99 1.166c-.22.484-.33 1.041-.33 1.672 0 .63.11 1.195.33 1.694.234.484.564.865.99 1.144.425.264.916.396 1.474.396ZM52.385 9.71h3.036v2.992l-.264-.022c.279-.88.748-1.65 1.408-2.31.675-.66 1.533-.99 2.574-.99 1.085 0 1.9.352 2.442 1.056.557.689.836 1.598.836 2.728v7.502h-3.036v-6.6c0-.66-.117-1.159-.352-1.496-.235-.338-.623-.506-1.166-.506-.601 0-1.122.271-1.562.814a4.321 4.321 0 0 0-.88 1.848v5.94h-3.036V9.71ZM43.904 20.952c-1.026 0-1.87-.308-2.53-.924-.66-.616-.99-1.416-.99-2.398 0-1.115.418-2.01 1.254-2.684.85-.69 2.105-1.034 3.762-1.034h2.75l-.924.352v-.462c0-.572-.176-1.02-.528-1.342-.352-.338-.931-.506-1.738-.506-.69 0-1.386.154-2.09.462-.704.308-1.29.69-1.76 1.144v-2.882c.47-.352 1.1-.66 1.892-.924a7.942 7.942 0 0 1 2.486-.396c1.599 0 2.78.41 3.542 1.232.778.806 1.166 1.914 1.166 3.322v5.742c0 .176.008.352.022.528.03.161.066.322.11.484h-3.014v-3.3l.044 1.386a4.044 4.044 0 0 1-1.32 1.606c-.572.396-1.283.594-2.134.594Zm.858-2.156c.558 0 1.049-.206 1.474-.616.44-.426.77-.954.99-1.584v-.792h-1.562c-.762 0-1.334.146-1.716.44-.381.278-.572.674-.572 1.188 0 .41.125.74.374.99.264.25.602.374 1.012.374ZM34.66 21.04c-1.525 0-2.874-.345-4.047-1.034-1.174-.704-2.09-1.68-2.75-2.926-.646-1.247-.968-2.662-.968-4.246 0-1.584.322-2.992.968-4.224.66-1.232 1.576-2.193 2.75-2.882 1.173-.704 2.522-1.056 4.048-1.056.968 0 1.818.11 2.552.33.748.22 1.356.506 1.826.858v3.498c-.396-.484-.96-.895-1.694-1.232-.719-.338-1.51-.506-2.376-.506-.939 0-1.775.22-2.508.66-.719.44-1.284 1.056-1.694 1.848-.396.792-.594 1.694-.594 2.706 0 1.026.198 1.943.594 2.75.41.792.975 1.408 1.694 1.848.733.44 1.57.66 2.508.66.88 0 1.68-.162 2.398-.484.718-.323 1.276-.726 1.672-1.21v3.41a5.686 5.686 0 0 1-1.87.902c-.704.22-1.54.33-2.508.33ZM11.275 6.271c.276.526.019 1.152-.464 1.498a5.846 5.846 0 0 0 1.004 10.082c.454.205.789.632.789 1.13v6.206a.837.837 0 0 1-.838.837C5.33 26.024.112 20.804.112 14.366V.862C.112.399.487.024.95.024c4.483 0 8.376 2.533 10.325 6.247Z"></path><path d="M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"></path></svg></a></div><div class="Sidebar_menu__sTTeJ"><div class="Sidebar_section__GtWJr" style="opacity:0;visibility:hidden;transform:translateX(-10px) translateZ(0)"><div class="canon-Box cu-mt-lg cu-mb-2xs"><div class="Sidebar_sectionTitle__s0c_b">Overview</div></div><a class="Sidebar_line__nqYoI " href="/"><div class="Sidebar_lineTitle__LPKUk">Getting Started</div><div class="Sidebar_lineStatus__v7sR3"></div></a><a class="Sidebar_line__nqYoI " href="/about"><div class="Sidebar_lineTitle__LPKUk">About</div><div class="Sidebar_lineStatus__v7sR3"></div></a><div class="canon-Box cu-mt-lg cu-mb-2xs"><div class="Sidebar_sectionTitle__s0c_b">Theme</div></div><a class="Sidebar_line__nqYoI " href="/theme/iconography"><div class="Sidebar_lineTitle__LPKUk">Iconography</div><div class="Sidebar_lineStatus__v7sR3"></div></a><a class="Sidebar_line__nqYoI " href="/theme/layout"><div class="Sidebar_lineTitle__LPKUk">Layout</div><div class="Sidebar_lineStatus__v7sR3"></div></a><a class="Sidebar_line__nqYoI " href="/theme/responsive"><div class="Sidebar_lineTitle__LPKUk">Responsive</div><div class="Sidebar_lineStatus__v7sR3"></div></a><a class="Sidebar_line__nqYoI " href="/theme/theming"><div class="Sidebar_lineTitle__LPKUk">Theming</div><div class="Sidebar_lineStatus__v7sR3"></div></a><a class="Sidebar_line__nqYoI " href="/theme/typography"><div class="Sidebar_lineTitle__LPKUk">Typography</div><div class="Sidebar_lineStatus__v7sR3"></div></a><div class="canon-Box cu-mt-lg cu-mb-2xs"><div class="Sidebar_sectionTitle__s0c_b">Layout Components</div></div><a class="Sidebar_line__nqYoI " href="/components/box"><div class="Sidebar_lineTitle__LPKUk">Box</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a><a class="Sidebar_line__nqYoI " href="/components/container"><div class="Sidebar_lineTitle__LPKUk">Container</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a><a class="Sidebar_line__nqYoI " href="/components/grid"><div class="Sidebar_lineTitle__LPKUk">Grid</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a><a class="Sidebar_line__nqYoI " href="/components/inline"><div class="Sidebar_lineTitle__LPKUk">Inline</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a><a class="Sidebar_line__nqYoI " href="/components/stack"><div class="Sidebar_lineTitle__LPKUk">Stack</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a><div class="canon-Box cu-mt-lg cu-mb-2xs"><div class="Sidebar_sectionTitle__s0c_b">Components</div></div><a class="Sidebar_line__nqYoI " href="/components/button"><div class="Sidebar_lineTitle__LPKUk">Button</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a><a class="Sidebar_line__nqYoI " href="/components/checkbox"><div class="Sidebar_lineTitle__LPKUk">Checkbox</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a><a class="Sidebar_line__nqYoI " href="/components/field"><div class="Sidebar_lineTitle__LPKUk">Field</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a><a class="Sidebar_line__nqYoI " href="/components/heading"><div class="Sidebar_lineTitle__LPKUk">Heading</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a><a class="Sidebar_line__nqYoI " href="/components/icon"><div class="Sidebar_lineTitle__LPKUk">Icon</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a><a class="Sidebar_line__nqYoI " href="/components/input"><div class="Sidebar_lineTitle__LPKUk">Input</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a><a class="Sidebar_line__nqYoI " href="/components/table"><div class="Sidebar_lineTitle__LPKUk">Table</div><div class="Sidebar_lineStatus__v7sR3">In Progress</div></a><a class="Sidebar_line__nqYoI " href="/components/text"><div class="Sidebar_lineTitle__LPKUk">Text</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a></div><div class="Sidebar_section__GtWJr" style="position:absolute;opacity:1;visibility:visible;transform:none"><div class="canon-Box cu-mt-lg cu-mb-2xs"><p class="canon-Text canon-Text--variant-body canon-Text--weight-bold">Components</p></div><div class="Sidebar_line__nqYoI"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Button</p><button type="button" id="base-ui-:Rglacq:" role="checkbox" aria-checked="true" data-checked="" class="canon-CheckboxRoot"><span data-checked="" class="canon-CheckboxIndicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:12px;height:12px" class="remixicon canon-Icon"><path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"></path></svg></span></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true" checked=""/></div><div class="Sidebar_line__nqYoI"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Checkbox</p><button type="button" id="base-ui-:Rh5acq:" role="checkbox" aria-checked="true" data-checked="" class="canon-CheckboxRoot"><span data-checked="" class="canon-CheckboxIndicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:12px;height:12px" class="remixicon canon-Icon"><path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"></path></svg></span></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true" checked=""/></div><div class="Sidebar_line__nqYoI"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Field</p><button type="button" id="base-ui-:Rhlacq:" role="checkbox" aria-checked="true" data-checked="" class="canon-CheckboxRoot"><span data-checked="" class="canon-CheckboxIndicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:12px;height:12px" class="remixicon canon-Icon"><path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"></path></svg></span></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true" checked=""/></div><div class="Sidebar_line__nqYoI"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Heading</p><button type="button" id="base-ui-:Ri5acq:" role="checkbox" aria-checked="true" data-checked="" class="canon-CheckboxRoot"><span data-checked="" class="canon-CheckboxIndicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:12px;height:12px" class="remixicon canon-Icon"><path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"></path></svg></span></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true" checked=""/></div><div class="Sidebar_line__nqYoI"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Icon</p><button type="button" id="base-ui-:Rilacq:" role="checkbox" aria-checked="true" data-checked="" class="canon-CheckboxRoot"><span data-checked="" class="canon-CheckboxIndicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:12px;height:12px" class="remixicon canon-Icon"><path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"></path></svg></span></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true" checked=""/></div><div class="Sidebar_line__nqYoI"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Input</p><button type="button" id="base-ui-:Rj5acq:" role="checkbox" aria-checked="true" data-checked="" class="canon-CheckboxRoot"><span data-checked="" class="canon-CheckboxIndicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:12px;height:12px" class="remixicon canon-Icon"><path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"></path></svg></span></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true" checked=""/></div><div class="Sidebar_line__nqYoI"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Table</p><button type="button" id="base-ui-:Rjlacq:" role="checkbox" aria-checked="true" data-checked="" class="canon-CheckboxRoot"><span data-checked="" class="canon-CheckboxIndicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:12px;height:12px" class="remixicon canon-Icon"><path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"></path></svg></span></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true" checked=""/></div><div class="Sidebar_line__nqYoI"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Text</p><button type="button" id="base-ui-:Rk5acq:" role="checkbox" aria-checked="true" data-checked="" class="canon-CheckboxRoot"><span data-checked="" class="canon-CheckboxIndicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:12px;height:12px" class="remixicon canon-Icon"><path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"></path></svg></span></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true" checked=""/></div><div class="canon-Box cu-mt-lg cu-mb-2xs"><p class="canon-Text canon-Text--variant-body canon-Text--weight-bold">Screen sizes</p></div><div class="Sidebar_line__nqYoI"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Mobile</p><button type="button" id="base-ui-:R8pacq:" role="checkbox" aria-checked="false" data-unchecked="" class="canon-CheckboxRoot"></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true"/></div><div class="Sidebar_line__nqYoI"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Tablet</p><button type="button" id="base-ui-:R99acq:" role="checkbox" aria-checked="false" data-unchecked="" class="canon-CheckboxRoot"></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true"/></div><div class="Sidebar_line__nqYoI"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Desktop</p><button type="button" id="base-ui-:R9pacq:" role="checkbox" aria-checked="false" data-unchecked="" class="canon-CheckboxRoot"></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true"/></div><div class="Sidebar_line__nqYoI"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Wide</p><button type="button" id="base-ui-:Ra9acq:" role="checkbox" aria-checked="false" data-unchecked="" class="canon-CheckboxRoot"></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true"/></div></div></div></div><div class="page_container__aoG4z"><div class="styles_toolbar__Dfx8Q"><div><div data-orientation="horizontal" data-activation-direction="none" class="nav_tabs__Vf_3c"><div role="tablist" data-orientation="horizontal" data-activation-direction="none" class="nav_list__5B4br"><button type="button" tabindex="-1" role="tab" aria-selected="false" id="base-ui-:Rlkq:" data-orientation="horizontal" class="nav_tab__pxJXK">Documentation</button><button type="button" tabindex="-1" role="tab" aria-selected="true" id="base-ui-:R15kq:" data-selected="" data-orientation="horizontal" class="nav_tab__pxJXK">Playground</button><span role="presentation" hidden="" data-orientation="horizontal" data-activation-direction="none" data-instance-id="tefqzblz79e" class="nav_indicator__56_dB"></span></div></div></div><div class="styles_actions__hQrVs"><div tabindex="0" aria-expanded="false" aria-haspopup="listbox" role="combobox" aria-autocomplete="none" class="theme-name_Select__EzhNT"><span class="theme-name_SelectValue__m3_vq">Select a theme</span><span aria-hidden="true" class="theme-name_SelectIcon__WL7np"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"></path></svg></span></div><input id="base-ui-:Rpkq:" style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" aria-hidden="true" value="default"/><div data-orientation="horizontal" data-activation-direction="none" class="theme_tabsTheme__Z9Qzm"><div role="tablist" data-orientation="horizontal" data-activation-direction="none" class="theme_list__5EiW3"><button type="button" tabindex="-1" role="tab" aria-selected="true" id="base-ui-:R39kq:" data-selected="" data-orientation="horizontal" class="theme_tab__wvxne"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z"></path></svg></button><button type="button" tabindex="-1" role="tab" aria-selected="false" id="base-ui-:R59kq:" data-orientation="horizontal" class="theme_tab__wvxne"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M10 7C10 10.866 13.134 14 17 14C18.9584 14 20.729 13.1957 21.9995 11.8995C22 11.933 22 11.9665 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C12.0335 2 12.067 2 12.1005 2.00049C10.8043 3.27098 10 5.04157 10 7ZM4 12C4 16.4183 7.58172 20 12 20C15.0583 20 17.7158 18.2839 19.062 15.7621C18.3945 15.9187 17.7035 16 17 16C12.0294 16 8 11.9706 8 7C8 6.29648 8.08133 5.60547 8.2379 4.938C5.71611 6.28423 4 8.9417 4 12Z"></path></svg></button><span role="presentation" hidden="" data-orientation="horizontal" data-activation-direction="none" data-instance-id="vsq1cpbib5g" class="theme_indicator__oGk64"></span></div></div></div></div><div class="styles_containerEmpty__Bclxm"><div class="canon-Stack cu-gap-xl cu-items-stretch"><div class="canon-Grid cu-gap-xs cu-md-gap-xl cu-grid-cols-auto"><div class="canon-GridItem cu-col-span-2"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Button</p></div><div class="canon-GridItem cu-col-span-10"><div class="canon-Stack cu-gap-xs cu-items-stretch"><div class="canon-Stack cu-gap-xs cu-items-stretch"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">primary</p><div class="canon-Inline cu-gap-xs cu-items-center cu-justify-start"><button class="canon-Button canon-Button--size-small canon-Button--variant-primary"><span class="canon-Button--content"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M17 7C13.5705 7 10.6449 9.15804 9.50734 12.1903L11.3805 12.8927C12.2337 10.6185 14.4278 9 17 9C17.6983 9 18.3687 9.11928 18.992 9.33857C21.3265 10.16 23 12.3846 23 15C23 18.3137 20.3137 21 17 21H7C3.68629 21 1 18.3137 1 15C1 12.3846 2.67346 10.16 5.00804 9.33857C5.0027 9.22639 5 9.11351 5 9C5 5.13401 8.13401 2 12 2C15.242 2 17.9693 4.20399 18.7652 7.19539C18.1973 7.0675 17.6065 7 17 7Z"></path></svg>Button</span></button><button class="canon-Button canon-Button--size-small canon-Button--variant-primary"><span class="canon-Button--content">Button</span><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button><button class="canon-Button canon-Button--size-small canon-Button--variant-primary" style="width:200px"><span class="canon-Button--content canon-Button--icon-start-end"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M17 7C13.5705 7 10.6449 9.15804 9.50734 12.1903L11.3805 12.8927C12.2337 10.6185 14.4278 9 17 9C17.6983 9 18.3687 9.11928 18.992 9.33857C21.3265 10.16 23 12.3846 23 15C23 18.3137 20.3137 21 17 21H7C3.68629 21 1 18.3137 1 15C1 12.3846 2.67346 10.16 5.00804 9.33857C5.0027 9.22639 5 9.11351 5 9C5 5.13401 8.13401 2 12 2C15.242 2 17.9693 4.20399 18.7652 7.19539C18.1973 7.0675 17.6065 7 17 7Z"></path></svg>Button</span><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button></div><div class="canon-Inline cu-gap-xs cu-items-center cu-justify-start"><button class="canon-Button canon-Button--size-medium canon-Button--variant-primary"><span class="canon-Button--content"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M17 7C13.5705 7 10.6449 9.15804 9.50734 12.1903L11.3805 12.8927C12.2337 10.6185 14.4278 9 17 9C17.6983 9 18.3687 9.11928 18.992 9.33857C21.3265 10.16 23 12.3846 23 15C23 18.3137 20.3137 21 17 21H7C3.68629 21 1 18.3137 1 15C1 12.3846 2.67346 10.16 5.00804 9.33857C5.0027 9.22639 5 9.11351 5 9C5 5.13401 8.13401 2 12 2C15.242 2 17.9693 4.20399 18.7652 7.19539C18.1973 7.0675 17.6065 7 17 7Z"></path></svg>Button</span></button><button class="canon-Button canon-Button--size-medium canon-Button--variant-primary"><span class="canon-Button--content">Button</span><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button><button class="canon-Button canon-Button--size-medium canon-Button--variant-primary" style="width:200px"><span class="canon-Button--content canon-Button--icon-start-end"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M17 7C13.5705 7 10.6449 9.15804 9.50734 12.1903L11.3805 12.8927C12.2337 10.6185 14.4278 9 17 9C17.6983 9 18.3687 9.11928 18.992 9.33857C21.3265 10.16 23 12.3846 23 15C23 18.3137 20.3137 21 17 21H7C3.68629 21 1 18.3137 1 15C1 12.3846 2.67346 10.16 5.00804 9.33857C5.0027 9.22639 5 9.11351 5 9C5 5.13401 8.13401 2 12 2C15.242 2 17.9693 4.20399 18.7652 7.19539C18.1973 7.0675 17.6065 7 17 7Z"></path></svg>Button</span><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button></div></div><div class="canon-Stack cu-gap-xs cu-items-stretch"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">secondary</p><div class="canon-Inline cu-gap-xs cu-items-center cu-justify-start"><button class="canon-Button canon-Button--size-small canon-Button--variant-secondary"><span class="canon-Button--content"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M17 7C13.5705 7 10.6449 9.15804 9.50734 12.1903L11.3805 12.8927C12.2337 10.6185 14.4278 9 17 9C17.6983 9 18.3687 9.11928 18.992 9.33857C21.3265 10.16 23 12.3846 23 15C23 18.3137 20.3137 21 17 21H7C3.68629 21 1 18.3137 1 15C1 12.3846 2.67346 10.16 5.00804 9.33857C5.0027 9.22639 5 9.11351 5 9C5 5.13401 8.13401 2 12 2C15.242 2 17.9693 4.20399 18.7652 7.19539C18.1973 7.0675 17.6065 7 17 7Z"></path></svg>Button</span></button><button class="canon-Button canon-Button--size-small canon-Button--variant-secondary"><span class="canon-Button--content">Button</span><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button><button class="canon-Button canon-Button--size-small canon-Button--variant-secondary" style="width:200px"><span class="canon-Button--content canon-Button--icon-start-end"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M17 7C13.5705 7 10.6449 9.15804 9.50734 12.1903L11.3805 12.8927C12.2337 10.6185 14.4278 9 17 9C17.6983 9 18.3687 9.11928 18.992 9.33857C21.3265 10.16 23 12.3846 23 15C23 18.3137 20.3137 21 17 21H7C3.68629 21 1 18.3137 1 15C1 12.3846 2.67346 10.16 5.00804 9.33857C5.0027 9.22639 5 9.11351 5 9C5 5.13401 8.13401 2 12 2C15.242 2 17.9693 4.20399 18.7652 7.19539C18.1973 7.0675 17.6065 7 17 7Z"></path></svg>Button</span><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button></div><div class="canon-Inline cu-gap-xs cu-items-center cu-justify-start"><button class="canon-Button canon-Button--size-medium canon-Button--variant-secondary"><span class="canon-Button--content"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M17 7C13.5705 7 10.6449 9.15804 9.50734 12.1903L11.3805 12.8927C12.2337 10.6185 14.4278 9 17 9C17.6983 9 18.3687 9.11928 18.992 9.33857C21.3265 10.16 23 12.3846 23 15C23 18.3137 20.3137 21 17 21H7C3.68629 21 1 18.3137 1 15C1 12.3846 2.67346 10.16 5.00804 9.33857C5.0027 9.22639 5 9.11351 5 9C5 5.13401 8.13401 2 12 2C15.242 2 17.9693 4.20399 18.7652 7.19539C18.1973 7.0675 17.6065 7 17 7Z"></path></svg>Button</span></button><button class="canon-Button canon-Button--size-medium canon-Button--variant-secondary"><span class="canon-Button--content">Button</span><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button><button class="canon-Button canon-Button--size-medium canon-Button--variant-secondary" style="width:200px"><span class="canon-Button--content canon-Button--icon-start-end"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M17 7C13.5705 7 10.6449 9.15804 9.50734 12.1903L11.3805 12.8927C12.2337 10.6185 14.4278 9 17 9C17.6983 9 18.3687 9.11928 18.992 9.33857C21.3265 10.16 23 12.3846 23 15C23 18.3137 20.3137 21 17 21H7C3.68629 21 1 18.3137 1 15C1 12.3846 2.67346 10.16 5.00804 9.33857C5.0027 9.22639 5 9.11351 5 9C5 5.13401 8.13401 2 12 2C15.242 2 17.9693 4.20399 18.7652 7.19539C18.1973 7.0675 17.6065 7 17 7Z"></path></svg>Button</span><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button></div></div><div class="canon-Stack cu-gap-xs cu-items-stretch"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">tertiary</p><div class="canon-Inline cu-gap-xs cu-items-center cu-justify-start"><button class="canon-Button canon-Button--size-small canon-Button--variant-tertiary"><span class="canon-Button--content"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M17 7C13.5705 7 10.6449 9.15804 9.50734 12.1903L11.3805 12.8927C12.2337 10.6185 14.4278 9 17 9C17.6983 9 18.3687 9.11928 18.992 9.33857C21.3265 10.16 23 12.3846 23 15C23 18.3137 20.3137 21 17 21H7C3.68629 21 1 18.3137 1 15C1 12.3846 2.67346 10.16 5.00804 9.33857C5.0027 9.22639 5 9.11351 5 9C5 5.13401 8.13401 2 12 2C15.242 2 17.9693 4.20399 18.7652 7.19539C18.1973 7.0675 17.6065 7 17 7Z"></path></svg>Button</span></button><button class="canon-Button canon-Button--size-small canon-Button--variant-tertiary"><span class="canon-Button--content">Button</span><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button><button class="canon-Button canon-Button--size-small canon-Button--variant-tertiary" style="width:200px"><span class="canon-Button--content canon-Button--icon-start-end"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M17 7C13.5705 7 10.6449 9.15804 9.50734 12.1903L11.3805 12.8927C12.2337 10.6185 14.4278 9 17 9C17.6983 9 18.3687 9.11928 18.992 9.33857C21.3265 10.16 23 12.3846 23 15C23 18.3137 20.3137 21 17 21H7C3.68629 21 1 18.3137 1 15C1 12.3846 2.67346 10.16 5.00804 9.33857C5.0027 9.22639 5 9.11351 5 9C5 5.13401 8.13401 2 12 2C15.242 2 17.9693 4.20399 18.7652 7.19539C18.1973 7.0675 17.6065 7 17 7Z"></path></svg>Button</span><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button></div><div class="canon-Inline cu-gap-xs cu-items-center cu-justify-start"><button class="canon-Button canon-Button--size-medium canon-Button--variant-tertiary"><span class="canon-Button--content"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M17 7C13.5705 7 10.6449 9.15804 9.50734 12.1903L11.3805 12.8927C12.2337 10.6185 14.4278 9 17 9C17.6983 9 18.3687 9.11928 18.992 9.33857C21.3265 10.16 23 12.3846 23 15C23 18.3137 20.3137 21 17 21H7C3.68629 21 1 18.3137 1 15C1 12.3846 2.67346 10.16 5.00804 9.33857C5.0027 9.22639 5 9.11351 5 9C5 5.13401 8.13401 2 12 2C15.242 2 17.9693 4.20399 18.7652 7.19539C18.1973 7.0675 17.6065 7 17 7Z"></path></svg>Button</span></button><button class="canon-Button canon-Button--size-medium canon-Button--variant-tertiary"><span class="canon-Button--content">Button</span><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button><button class="canon-Button canon-Button--size-medium canon-Button--variant-tertiary" style="width:200px"><span class="canon-Button--content canon-Button--icon-start-end"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M17 7C13.5705 7 10.6449 9.15804 9.50734 12.1903L11.3805 12.8927C12.2337 10.6185 14.4278 9 17 9C17.6983 9 18.3687 9.11928 18.992 9.33857C21.3265 10.16 23 12.3846 23 15C23 18.3137 20.3137 21 17 21H7C3.68629 21 1 18.3137 1 15C1 12.3846 2.67346 10.16 5.00804 9.33857C5.0027 9.22639 5 9.11351 5 9C5 5.13401 8.13401 2 12 2C15.242 2 17.9693 4.20399 18.7652 7.19539C18.1973 7.0675 17.6065 7 17 7Z"></path></svg>Button</span><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:16px;height:16px" class="remixicon canon-Icon"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button></div></div></div></div></div><div class="canon-Grid cu-gap-xs cu-md-gap-xl cu-grid-cols-auto"><div class="canon-GridItem cu-col-span-2"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Checkbox</p></div><div class="canon-GridItem cu-col-span-10"><div class="canon-Stack cu-gap-xs cu-items-stretch"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">All variants</p><div class="canon-Inline cu-gap-xs cu-items-center cu-justify-start"><button type="button" id="base-ui-:R399uuukq:" role="checkbox" aria-checked="false" data-unchecked="" class="canon-CheckboxRoot"></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true"/><button type="button" id="base-ui-:R599uuukq:" role="checkbox" aria-checked="true" data-checked="" class="canon-CheckboxRoot"><span data-checked="" class="canon-CheckboxIndicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:12px;height:12px" class="remixicon canon-Icon"><path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"></path></svg></span></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true" checked=""/><label class="canon-CheckboxLabel"><button type="button" id="base-ui-:Rn99uuukq:" role="checkbox" aria-checked="false" data-unchecked="" class="canon-CheckboxRoot"></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true"/>Checkbox</label><label class="canon-CheckboxLabel"><button type="button" id="base-ui-:Rp99uuukq:" role="checkbox" aria-checked="true" data-checked="" class="canon-CheckboxRoot"><span data-checked="" class="canon-CheckboxIndicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:12px;height:12px" class="remixicon canon-Icon"><path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"></path></svg></span></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true" checked=""/>Checkbox</label></div></div></div></div><div class="canon-Grid cu-gap-xs cu-md-gap-xl cu-grid-cols-auto"><div class="canon-GridItem cu-col-span-2"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Heading</p></div><div class="canon-GridItem cu-col-span-10"><div class="canon-Stack cu-gap-xs cu-items-stretch"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">All variants</p><h1 class="canon-Heading canon-Heading--variant-display">Display</h1><h1 class="canon-Heading canon-Heading--variant-title1">Title 1</h1><h1 class="canon-Heading canon-Heading--variant-title2">Title 2</h1><h1 class="canon-Heading canon-Heading--variant-title3">Title 3</h1><h1 class="canon-Heading canon-Heading--variant-title4">Title 4</h1></div></div></div><div class="canon-Grid cu-gap-xs cu-md-gap-xl cu-grid-cols-auto"><div class="canon-GridItem cu-col-span-2"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Text</p></div><div class="canon-GridItem cu-col-span-10"><div class="canon-Stack cu-gap-xs cu-items-stretch"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Subtitle</p><p class="canon-Text canon-Text--variant-subtitle canon-Text--weight-regular" style="max-width:600px">A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?</p><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Body</p><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular" style="max-width:600px">A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?</p><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Caption</p><p class="canon-Text canon-Text--variant-caption canon-Text--weight-regular" style="max-width:600px">A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?</p><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Label</p><p class="canon-Text canon-Text--variant-label canon-Text--weight-regular" style="max-width:600px">A man looks at a painting in a museum and says, “Brothers and sisters I have none, but that man's father is my father's son.” Who is in the painting?</p></div></div></div></div></div></div></div><script src="/_next/static/chunks/webpack-87c16ee3d25787b8.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/css/93fcd661c6363c0c.css\",\"style\"]\n2:HL[\"/_next/static/css/a468676a8a327df7.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"3:I[2846,[],\"\"]\n5:I[9107,[],\"ClientPageRoot\"]\n6:I[3638,[\"738\",\"static/chunks/42437bae-285027d9bfc4a910.js\",\"686\",\"static/chunks/686-0e4d8ec92a84798f.js\",\"861\",\"static/chunks/861-81a1aebced4e65d6.js\",\"734\",\"static/chunks/734-8623125fd9e85037.js\",\"793\",\"static/chunks/app/(playground)/playground/page-7411a78559798aaf.js\"],\"default\",1]\n7:I[4707,[],\"\"]\n8:I[6423,[],\"\"]\n9:I[8847,[\"738\",\"static/chunks/42437bae-285027d9bfc4a910.js\",\"537\",\"static/chunks/1e87141b-ef71435532f04784.js\",\"401\",\"static/chunks/363642f4-25d86c84e2b02bb7.js\",\"975\",\"static/chunks/975-077eb926170fb42a.js\",\"333\",\"static/chunks/333-b93414cb5c90c78e.js\",\"686\",\"static/chunks/686-0e4d8ec92a84798f.js\",\"972\",\"static/chunks/972-92714dd3e6d5d64f.js\",\"664\",\"static/chunks/664-189f7a54abdf23a0.js\",\"185\",\"static/chunks/app/layout-541c9fb6970ae8c1.js\"],\"Providers\"]\na:I[2972,[\"738\",\"static/chunks/42437bae-285027d9bfc4a910.js\",\"537\",\"static/chunks/1e87141b-ef71435532f04784.js\",\"401\",\"static/chunks/363642f4-25d86c84e2b02bb7.js\",\"975\",\"static/chunks/975-077eb926170fb42a.js\",\"333\",\"static/chunks/333-b93414cb5c90c78e.js\",\"686\",\"static/chunks/686-0e4d8ec92a84798f.js\",\"972\",\"static/chunks/972-92714dd3e6d5d64f.js\",\"664\",\"static/chunks/664-189f7a54abdf23a0.js\",\"185\",\"static/chunks/app/layout-541c9fb6970ae8c1.js\"],\"\"]\nc:I[8864,[\"738\",\"static/chunks/42437bae-285027d9bfc4a910.js\",\"537\",\"static/chunks/1e87141b-ef71435532f04784.js\",\"401\",\"static/chunks/363642f4-25d86c84e2b02bb7.js\",\"975\",\"static/chunks/975-077eb926170fb42a.js\",\"333\",\"static/chunks/333-b93414cb5c90c78e.js\",\"686\",\"static/chunks/686-0e4d8ec92a84798f.js\",\"972\",\"static/chunks/972-92714dd3e6d5d64f.js\",\"664\",\"static/chunks/664-189f7a54abdf23a0.js\",\"185\",\"static/chunks/app/layout-541c9fb6970ae8c1.js\"],\"Docs\"]\nd:I[4622,[\"738\",\"static/chunks/42437bae-285027d9bfc4a910.js\",\"537\",\"static/chunks/1e87141b-ef71435532f04784.js\",\"401\",\"static/chunks/363642f4-25d86c84e2b02bb7.js\",\"975\",\"static/chunks/975-077eb926170fb42a.js\",\"333\",\"static/chunks/333-b93414cb5c90c78e.js\",\"686\",\"static/chunks/686-0e4d8ec92a84798f.js\",\"972\",\"static/c"])</script><script>self.__next_f.push([1,"hunks/972-92714dd3e6d5d64f.js\",\"664\",\"static/chunks/664-189f7a54abdf23a0.js\",\"185\",\"static/chunks/app/layout-541c9fb6970ae8c1.js\"],\"Playground\"]\ne:I[7879,[\"738\",\"static/chunks/42437bae-285027d9bfc4a910.js\",\"537\",\"static/chunks/1e87141b-ef71435532f04784.js\",\"401\",\"static/chunks/363642f4-25d86c84e2b02bb7.js\",\"975\",\"static/chunks/975-077eb926170fb42a.js\",\"333\",\"static/chunks/333-b93414cb5c90c78e.js\",\"686\",\"static/chunks/686-0e4d8ec92a84798f.js\",\"972\",\"static/chunks/972-92714dd3e6d5d64f.js\",\"664\",\"static/chunks/664-189f7a54abdf23a0.js\",\"185\",\"static/chunks/app/layout-541c9fb6970ae8c1.js\"],\"Nav\"]\nf:I[5564,[\"738\",\"static/chunks/42437bae-285027d9bfc4a910.js\",\"537\",\"static/chunks/1e87141b-ef71435532f04784.js\",\"401\",\"static/chunks/363642f4-25d86c84e2b02bb7.js\",\"975\",\"static/chunks/975-077eb926170fb42a.js\",\"333\",\"static/chunks/333-b93414cb5c90c78e.js\",\"686\",\"static/chunks/686-0e4d8ec92a84798f.js\",\"972\",\"static/chunks/972-92714dd3e6d5d64f.js\",\"664\",\"static/chunks/664-189f7a54abdf23a0.js\",\"185\",\"static/chunks/app/layout-541c9fb6970ae8c1.js\"],\"ThemeNameSelector\"]\n10:I[3589,[\"738\",\"static/chunks/42437bae-285027d9bfc4a910.js\",\"537\",\"static/chunks/1e87141b-ef71435532f04784.js\",\"401\",\"static/chunks/363642f4-25d86c84e2b02bb7.js\",\"975\",\"static/chunks/975-077eb926170fb42a.js\",\"333\",\"static/chunks/333-b93414cb5c90c78e.js\",\"686\",\"static/chunks/686-0e4d8ec92a84798f.js\",\"972\",\"static/chunks/972-92714dd3e6d5d64f.js\",\"664\",\"static/chunks/664-189f7a54abdf23a0.js\",\"185\",\"static/chunks/app/layout-541c9fb6970ae8c1.js\"],\"ThemeSelector\"]\n15:I[6450,[\"738\",\"static/chunks/42437bae-285027d9bfc4a910.js\",\"537\",\"static/chunks/1e87141b-ef71435532f04784.js\",\"401\",\"static/chunks/363642f4-25d86c84e2b02bb7.js\",\"975\",\"static/chunks/975-077eb926170fb42a.js\",\"333\",\"static/chunks/333-b93414cb5c90c78e.js\",\"686\",\"static/chunks/686-0e4d8ec92a84798f.js\",\"972\",\"static/chunks/972-92714dd3e6d5d64f.js\",\"664\",\"static/chunks/664-189f7a54abdf23a0.js\",\"185\",\"static/chunks/app/layout-541c9fb6970ae8c1.js\"],\"CustomTheme\"]\n17:I[1060,[],\"\"]\nb:Tb0f,"])</script><script>self.__next_f.push([1,"M77.414 9.71h3.036v2.992l-.264-.022c.279-.88.748-1.65 1.408-2.31.675-.66 1.533-.99 2.574-.99 1.086 0 1.9.352 2.442 1.056.558.689.836 1.598.836 2.728v7.502H84.41v-6.6c0-.66-.117-1.159-.352-1.496-.234-.338-.623-.506-1.166-.506-.601 0-1.122.271-1.562.814a4.321 4.321 0 0 0-.88 1.848v5.94h-3.036V9.71ZM69.868 21.04c-1.13 0-2.142-.257-3.036-.77a5.547 5.547 0 0 1-2.068-2.09c-.484-.895-.726-1.892-.726-2.992 0-1.115.242-2.112.726-2.992a5.503 5.503 0 0 1 2.068-2.112c.88-.514 1.892-.77 3.036-.77 1.144 0 2.156.256 3.036.77a5.347 5.347 0 0 1 2.046 2.112c.498.88.748 1.87.748 2.97 0 1.114-.25 2.12-.748 3.014a5.343 5.343 0 0 1-2.068 2.09c-.88.513-1.885.77-3.014.77Zm0-2.618c.557 0 1.048-.132 1.474-.396a2.79 2.79 0 0 0 .99-1.144c.234-.499.352-1.064.352-1.694 0-.63-.118-1.188-.352-1.672a2.764 2.764 0 0 0-.99-1.166c-.426-.279-.917-.418-1.474-.418-.558 0-1.05.14-1.474.418a2.764 2.764 0 0 0-.99 1.166c-.22.484-.33 1.041-.33 1.672 0 .63.11 1.195.33 1.694.234.484.564.865.99 1.144.425.264.916.396 1.474.396ZM52.385 9.71h3.036v2.992l-.264-.022c.279-.88.748-1.65 1.408-2.31.675-.66 1.533-.99 2.574-.99 1.085 0 1.9.352 2.442 1.056.557.689.836 1.598.836 2.728v7.502h-3.036v-6.6c0-.66-.117-1.159-.352-1.496-.235-.338-.623-.506-1.166-.506-.601 0-1.122.271-1.562.814a4.321 4.321 0 0 0-.88 1.848v5.94h-3.036V9.71ZM43.904 20.952c-1.026 0-1.87-.308-2.53-.924-.66-.616-.99-1.416-.99-2.398 0-1.115.418-2.01 1.254-2.684.85-.69 2.105-1.034 3.762-1.034h2.75l-.924.352v-.462c0-.572-.176-1.02-.528-1.342-.352-.338-.931-.506-1.738-.506-.69 0-1.386.154-2.09.462-.704.308-1.29.69-1.76 1.144v-2.882c.47-.352 1.1-.66 1.892-.924a7.942 7.942 0 0 1 2.486-.396c1.599 0 2.78.41 3.542 1.232.778.806 1.166 1.914 1.166 3.322v5.742c0 .176.008.352.022.528.03.161.066.322.11.484h-3.014v-3.3l.044 1.386a4.044 4.044 0 0 1-1.32 1.606c-.572.396-1.283.594-2.134.594Zm.858-2.156c.558 0 1.049-.206 1.474-.616.44-.426.77-.954.99-1.584v-.792h-1.562c-.762 0-1.334.146-1.716.44-.381.278-.572.674-.572 1.188 0 .41.125.74.374.99.264.25.602.374 1.012.374ZM34.66 21.04c-1.525 0-2.874-.345-4.047-1.034-1.174-.704-2.09-1.68-2.75-2.926-.646-1.247-.968-2.662-.968-4.246 0-1.584.322-2.992.968-4.224.66-1.232 1.576-2.193 2.75-2.882 1.173-.704 2.522-1.056 4.048-1.056.968 0 1.818.11 2.552.33.748.22 1.356.506 1.826.858v3.498c-.396-.484-.96-.895-1.694-1.232-.719-.338-1.51-.506-2.376-.506-.939 0-1.775.22-2.508.66-.719.44-1.284 1.056-1.694 1.848-.396.792-.594 1.694-.594 2.706 0 1.026.198 1.943.594 2.75.41.792.975 1.408 1.694 1.848.733.44 1.57.66 2.508.66.88 0 1.68-.162 2.398-.484.718-.323 1.276-.726 1.672-1.21v3.41a5.686 5.686 0 0 1-1.87.902c-.704.22-1.54.33-2.508.33ZM11.275 6.271c.276.526.019 1.152-.464 1.498a5.846 5.846 0 0 0 1.004 10.082c.454.205.789.632.789 1.13v6.206a.837.837 0 0 1-.838.837C5.33 26.024.112 20.804.112 14.366V.862C.112.399.487.024.95.024c4.483 0 8.376 2.533 10.325 6.247Z"])</script><script>self.__next_f.push([1,"11:{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"}\n12:{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"}\n13:{\"display\":\"inline-block\"}\n14:{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0}\n18:[]\n"])</script><script>self.__next_f.push([1,"0:[\"$\",\"$L3\",null,{\"buildId\":\"qE-jEyZTVoLteBNm9DMXU\",\"assetPrefix\":\"\",\"urlParts\":[\"\",\"playground\"],\"initialTree\":[\"\",{\"children\":[\"(playground)\",{\"children\":[\"playground\",{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"(playground)\",{\"children\":[\"playground\",{\"children\":[\"__PAGE__\",{},[[\"$L4\",[\"$\",\"$L5\",null,{\"props\":{\"params\":{},\"searchParams\":{}},\"Component\":\"$6\"}],[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/a468676a8a327df7.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]],null],null]},[null,[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(playground)\",\"children\",\"playground\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]],null]},[null,[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(playground)\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}]],null]},[[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/93fcd661c6363c0c.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"data-theme\":\"light\",\"data-theme-name\":\"default\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"children\":[\"$\",\"$L9\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"page_global__DlbOF\",\"children\":[[\"$\",\"div\",null,{\"className\":\"Sidebar_sidebar__86IlD\",\"children\":[[\"$\",\"div\",null,{\"className\":\"Sidebar_logoContainer__OcEVQ\",\"children\":[\"$\",\"$La\",null,{\"href\":\"/\",\"children\":[\"$\",\"svg\",null,{\"width\":\"89\",\"height\":\"27\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"Sidebar_logo__P79Og\",\"children\":[[\"$\",\"path\",null,{\"d\":\"$b\"}],[\"$\",\"path\",null,{\"d\":\"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z\"}]]}]}]}],[\"$\",\"div\",null,{\"className\":\"Sidebar_menu__sTTeJ\",\"children\":[[\"$\",\"$Lc\",null,{}],[\"$\",\"$Ld\",null,{}]]}]]}],[\"$\",\"div\",null,{\"className\":\"page_container__aoG4z\",\"children\":[[\"$\",\"div\",null,{\"className\":\"styles_toolbar__Dfx8Q\",\"children\":[[\"$\",\"div\",null,{\"children\":[\"$\",\"$Le\",null,{}]}],[\"$\",\"div\",null,{\"className\":\"styles_actions__hQrVs\",\"children\":[[\"$\",\"$Lf\",null,{}],[\"$\",\"$L10\",null,{}]]}]]}],[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$11\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":\"$12\",\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":\"$13\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$14\",\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}]]}],[\"$\",\"$L15\",null,{}]]}]}]}]}]],null],null],\"couldBeIntercepted\":false,\"initialHead\":[null,\"$L16\"],\"globalErrorComponent\":\"$17\",\"missingSlots\":\"$W18\"}]\n"])</script><script>self.__next_f.push([1,"16:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Canon\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"UI library for Backstage\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:title\",\"content\":\"Canon\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:description\",\"content\":\"UI library for Backstage\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:image:type\",\"content\":\"image/jpeg\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:image\",\"content\":\"https://canon.backstage.io/opengraph-image.jpg?556e6c1ce23ce382\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:title\",\"content\":\"Canon\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:description\",\"content\":\"UI library for Backstage\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:image:type\",\"content\":\"image/jpeg\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:image\",\"content\":\"https://canon.backstage.io/opengraph-image.jpg?556e6c1ce23ce382\"}],[\"$\",\"link\",\"17\",{\"rel\":\"icon\",\"href\":\"/icon.svg?27251f321bf90e71\",\"type\":\"image/svg+xml\",\"sizes\":\"any\"}]]\n4:null\n"])</script></body></html>