- ID de l'analyse :
- 166ef0ab-5bcd-48b3-a5b4-b78ff956f367Terminée
- URL soumise :
- https://unruffled-hoover-de9320.netlify.app/
- Fin du rapport :
Liens : 2 trouvé(s)
Liens sortants identifiés à partir de la page
| Lien | texte |
|---|---|
| https://storybook.js.org/docs/react/essentials/controls | Learn how to add controls |
| http://storybook.js.org/docs/ | Read the docs |
Variables JavaScript : 14 trouvée(s)
Les variables JavaScript globales chargées dans l'objet fenêtre d'une page sont des variables déclarées en dehors des fonctions et accessibles depuis n'importe quel endroit du code au sein du champ d'application actuel
| Nom | Type |
|---|---|
| 0 | object |
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| CONFIG_TYPE | string |
| LOGLEVEL | string |
| DOCS_MODE | boolean |
| webpackJsonp | object |
| regeneratorRuntime | object |
| setImmediate | function |
Messages de journal de console : 3 trouvé(s)
Messages consignés dans la console web
| Type | Catégorie | Enregistrement |
|---|---|---|
| warning | other |
|
| warning | other |
|
| warning | other |
|
HTML
Le corps HTML de la page en données brutes
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Introduction - Page ⋅ Storybook</title><meta name="viewport" content="width=device-width,initial-scale=1"><style>html, body {
overflow: hidden;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}</style><script>/* globals window */
/* eslint-disable no-underscore-dangle */
try {
if (window.top !== window) {
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
}
} catch (e) {
// eslint-disable-next-line no-console
console.warn('unable to connect to top frame for connecting dev tools');
}
window.onerror = function onerror(message, source, line, column, err) {
if (window.CONFIG_TYPE !== 'DEVELOPMENT') return;
// eslint-disable-next-line no-var, vars-on-top
var xhr = new window.XMLHttpRequest();
xhr.open('POST', '/runtime-error');
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.send(
JSON.stringify({
/* eslint-disable object-shorthand */
message: message,
source: source,
line: line,
column: column,
error: err && { message: err.message, name: err.name, stack: err.stack },
origin: 'manager',
/* eslint-enable object-shorthand */
})
);
};</script><style>#root[hidden],
#docs-root[hidden] {
display: none !important;
}</style><style id="erd_scroll_detection_scrollbar_style">/* Created by the element-resize-detector library. */
.erd_scroll_detection_container > div::-webkit-scrollbar { display: none; }
.erd_scroll_detection_container_animation_active { -webkit-animation-duration: 0.1s; animation-duration: 0.1s; -webkit-animation-name: erd_scroll_detection_container_animation; animation-name: erd_scroll_detection_container_animation; }
@-webkit-keyframes erd_scroll_detection_container_animation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes erd_scroll_detection_container_animation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }</style><style data-emotion="css-global"></style><style data-emotion="css-global"></style><style data-emotion="css-global"></style><style data-emotion="css-global"></style><style data-emotion="css-global"></style><style data-emotion="css-global"></style><style data-emotion="css"></style><script charset="utf-8" src="7.c379605064e18c00bdda.manager.bundle.js"></script><script charset="utf-8" src="6.8f2f505dd2cffe123109.manager.bundle.js"></script><script charset="utf-8" src="0.96325a09fad9f040c061.manager.bundle.js"></script></head><body class="light"><div id="root"><div class="css-rc1jbh"><svg xmlns="http://www.w3.org/2000/svg" data-chromatic="ignore" style="position: absolute; width: 0px; height: 0px;"><symbol id="icon--folder"><path d="M571 274h327c23 0 41 18 41 41v488c0 22-18 40-41 40H126c-23 0-41-18-41-40V242c0-34 27-61 61-61h317c18 0 35 7 47 21l61 72zm-119-8H170v492h684V359H531l-79-93z" class="css-kqzqgg"></path></symbol><symbol id="icon--component"><path d="M171 469h298V171H246c-42 0-75 33-75 75v223zm0 86v223c0 42 33 75 75 75h223V555H171zm682-86V246c0-42-33-75-75-75H555v298h298zm0 86H555v298h223c42 0 75-33 75-75V555zM256 85h512c94 0 171 77 171 171v512c0 94-77 171-171 171H256c-94 0-171-77-171-171V256c0-94 77-171 171-171z" class="css-kqzqgg"></path></symbol><symbol id="icon--document"><path d="M764 1c12 0 24 4 32 13l129 132c9 8 13 20 13 31v802c0 24-20 44-45 44H131c-25 0-45-20-45-44V45c0-24 20-44 45-44h633zm-48 89H175v844h674l-1-707h-87c-22 0-40-15-44-36v-8l-1-93zm-16 584a45 45 0 0 1 8 89H324a45 45 0 0 1-8-88l8-1h376zm0-187a45 45 0 0 1 8 89l-8 1H324a45 45 0 0 1-8-89l8-1h376zm0-186a45 45 0 0 1 8 88l-8 1H324a45 45 0 0 1-8-89h384z" class="css-kqzqgg"></path></symbol><symbol id="icon--bookmarkhollow"><path d="M772 1012L511 761l-260 251a49 49 0 0 1-52 10c-18-7-29-24-29-43V132c0-25 21-46 47-46h588c26 0 47 21 47 46v847c0 19-11 36-29 43a49 49 0 0 1-51-10zM545 664l213 205V181H265v688l213-205c9-9 21-14 33-14s24 5 34 14z" class="css-kqzqgg"></path></symbol></svg><div class="erd_scroll_detection_container erd_scroll_detection_container_animation_active" style="visibility: hidden; display: inline; width: 0px; height: 0px; z-index: -1; overflow: hidden; margin: 0px; padding: 0px;"><div dir="ltr" class="erd_scroll_detection_container" style="position: absolute; flex: 0 0 auto; overflow: hidden; z-index: -1; visibility: hidden; width: 100%; height: 100%; left: 0px; top: 0px;"><div class="erd_scroll_detection_container" style="position: absolute; flex: 0 0 auto; overflow: hidden; z-index: -1; visibility: hidden; inset: -11px -10px -10px -11px;"><div style="position: absolute; flex: 0 0 auto; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;"><div style="position: absolute; left: 0px; top: 0px; width: 831px; height: 631px;"></div></div><div style="position: absolute; flex: 0 0 auto; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;"><div style="position: absolute; width: 200%; height: 200%;"></div></div></div></div></div><div class="css-10atcnk"></div><div class="react-draggable css-1gv4ce5" style="transform: translate(220px, 0px);"></div><div class="css-1q7pov5" style="height: 600px; left: 0px; top: 0px; width: 230px;"><nav class="container sidebar-container css-svjevy"><div class="os-host os-host-foreign os-theme-dark os-host-resize-disabled css-17bgnci os-host-scrollbar-horizontal-hidden os-host-transition os-host-overflow os-host-overflow-y"><div class="os-resize-observer-host observed"><div class="os-resize-observer" style="left: 0px; right: auto;"></div></div><div class="os-size-auto-observer observed" style="height: calc(100% + 1px); float: left;"><div class="os-resize-observer"></div></div><div class="os-content-glue" style="margin: -20px; width: 229px; height: 599px;"></div><div class="os-padding"><div class="os-viewport os-viewport-native-scrollbars-invisible" style="overflow-y: scroll;"><div class="os-content" style="padding: 20px; height: 100%; width: 100%;"><div class="css-1wpdhyu"><div class="sidebar-header css-axrk4p"><div class="css-1lsh4kf"><a title="Storybook" href="./" target="" class="css-1ngr21r"><svg width="200px" height="40px" viewBox="0 0 200 40" class="css-173of3" role="img"><title>Storybook</title><defs><path d="M1.2 36.9L0 3.9c0-1.1.8-2 1.9-2.1l28-1.8a2 2 0 0 1 2.2 1.9 2 2 0 0 1 0 .1v36a2 2 0 0 1-2 2 2 2 0 0 1-.1 0L3.2 38.8a2 2 0 0 1-2-2z" id="a"></path></defs><g fill="none" fill-rule="evenodd"><path d="M53.3 31.7c-1.7 0-3.4-.3-5-.7-1.5-.5-2.8-1.1-3.9-2l1.6-3.5c2.2 1.5 4.6 2.3 7.3 2.3 1.5 0 2.5-.2 3.3-.7.7-.5 1.1-1 1.1-1.9 0-.7-.3-1.3-1-1.7s-2-.8-3.7-1.2c-2-.4-3.6-.9-4.8-1.5-1.1-.5-2-1.2-2.6-2-.5-1-.8-2-.8-3.2 0-1.4.4-2.6 1.2-3.6.7-1.1 1.8-2 3.2-2.6 1.3-.6 2.9-.9 4.7-.9 1.6 0 3.1.3 4.6.7 1.5.5 2.7 1.1 3.5 2l-1.6 3.5c-2-1.5-4.2-2.3-6.5-2.3-1.3 0-2.3.2-3 .8-.8.5-1.2 1.1-1.2 2 0 .5.2 1 .5 1.3.2.3.7.6 1.4.9l2.9.8c2.9.6 5 1.4 6.2 2.4a5 5 0 0 1 2 4.2 6 6 0 0 1-2.5 5c-1.7 1.2-4 1.9-7 1.9zm21-3.6l1.4-.1-.2 3.5-1.9.1c-2.4 0-4.1-.5-5.2-1.5-1.1-1-1.6-2.7-1.6-4.8v-6h-3v-3.6h3V11h4.8v4.6h4v3.6h-4v6c0 1.8.9 2.8 2.6 2.8zm11.1 3.5c-1.6 0-3-.3-4.3-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.3-1 1.7 0 3.2.3 4.4 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.4 1zm0-3.6c2.4 0 3.6-1.6 3.6-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.6-1c-2.3 0-3.5 1.4-3.5 4.4 0 3 1.2 4.6 3.5 4.6zm21.7-8.8l-2.7.3c-1.3.2-2.3.5-2.8 1.2-.6.6-.9 1.4-.9 2.5v8.2H96V15.7h4.6v2.6c.8-1.8 2.5-2.8 5-3h1.3l.3 4zm14-3.5h4.8L116.4 37h-4.9l3-6.6-6.4-14.8h5l4 10 4-10zm16-.4c1.4 0 2.6.3 3.6 1 1 .6 1.9 1.6 2.5 2.8.6 1.2.9 2.7.9 4.3 0 1.6-.3 3-1 4.3a6.9 6.9 0 0 1-2.4 2.9c-1 .7-2.2 1-3.6 1-1 0-2-.2-3-.7-.8-.4-1.5-1-2-1.9v2.4h-4.7V8.8h4.8v9c.5-.8 1.2-1.4 2-1.9.9-.4 1.8-.6 3-.6zM135.7 28c1.1 0 2-.4 2.6-1.2.6-.8 1-2 1-3.4 0-1.5-.4-2.5-1-3.3s-1.5-1.1-2.6-1.1-2 .3-2.6 1.1c-.6.8-1 2-1 3.3 0 1.5.4 2.6 1 3.4.6.8 1.5 1.2 2.6 1.2zm18.9 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.3 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm18 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.4 1a7 7 0 0 1 2.9 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm27.4 3.4h-6l-6-7v7h-4.8V8.8h4.9v13.6l5.8-6.7h5.7l-6.6 7.5 7 8.2z" fill="currentColor"></path><mask id="b" fill="#fff"><use xlink:href="#a"></use></mask><use fill="#FF4785" fill-rule="nonzero" xlink:href="#a"></use><path d="M23.7 5L24 .2l3.9-.3.1 4.8a.3.3 0 0 1-.5.2L26 3.8l-1.7 1.4a.3.3 0 0 1-.5-.3zm-5 10c0 .9 5.3.5 6 0 0-5.4-2.8-8.2-8-8.2-5.3 0-8.2 2.8-8.2 7.1 0 7.4 10 7.6 10 11.6 0 1.2-.5 1.9-1.8 1.9-1.6 0-2.2-.9-2.1-3.6 0-.6-6.1-.8-6.3 0-.5 6.7 3.7 8.6 8.5 8.6 4.6 0 8.3-2.5 8.3-7 0-7.9-10.2-7.7-10.2-11.6 0-1.6 1.2-1.8 2-1.8.6 0 2 0 1.9 3z" fill="#FFF" fill-rule="nonzero" mask="url(#b)"></path></g></svg></a></div><div class="css-c3junj"><button title="Shortcuts" class="css-eha1sj"><svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M184 393c66.274 0 120 53.73 120 120s-53.726 120-120 120c-66.286 0-120-53.73-120-120s53.714-120 120-120zM512 393c66.272 0 120 53.73 120 120s-53.728 120-120 120c-66.286 0-120-53.73-120-120s53.714-120 120-120zM840 393c66.272 0 120 53.73 120 120s-53.728 120-120 120c-66.286 0-120-53.73-120-120s53.714-120 120-120z" class="css-kqzqgg"></path></svg></button></div></div><label for="downshift-1-input" id="downshift-1-label" class="css-it8c6v">Search for components</label><div role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="downshift-1-label" class="search-field css-iajavk"><svg viewBox="0 0 1024 1024" class="css-1bialql"><path d="M218 670a318 318 0 0 1 0-451 316 316 0 0 1 451 0 318 318 0 0 1 0 451 316 316 0 0 1-451 0m750 240L756 698a402 402 0 1 0-59 60l212 212c16 16 42 16 59 0 16-17 16-43 0-60" class="css-kqzqgg"></path></svg><input aria-autocomplete="list" aria-labelledby="downshift-1-label" autocomplete="off" id="storybook-explorer-searchfield" required="" type="search" placeholder="Find components" class="css-hknetk" value=""><code class="css-1w9ttsv">/</code><svg viewBox="0 0 1024 1024" class="css-1rzl7h2"><path d="M1013.286 955.716l-443.72-443.716 443.718-443.718c15.622-15.622 15.62-40.948-0.004-56.566-15.618-15.622-40.942-15.622-56.562 0l-443.716 443.718-443.72-443.718c-15.62-15.624-40.946-15.622-56.566 0-15.622 15.62-15.622 40.944 0 56.566l443.722 443.718-443.722 443.722c-15.622 15.618-15.62 40.942 0 56.56s40.948 15.622 56.566 0l443.72-443.718 443.722 443.718c15.618 15.624 40.942 15.622 56.56 0 15.62-15.618 15.622-40.944 0.002-56.566z" class="css-kqzqgg"></path></svg></div><div tabindex="0" id="storybook-explorer-menu" class="css-1jj07fx"><div style="display: block;"><div id="storybook-explorer-tree" data-highlighted-ref-id="storybook_internal" data-highlighted-item-id="introduction--page"><div class="css-1qwztpk"><div class="css-ohbggj"><a tabindex="-1" id="introduction--page" class="sidebar-item css-1vq0fnq" data-ref-id="storybook_internal" data-item-id="introduction--page" data-parent-id="false" data-nodetype="document" data-selected="true" data-highlightable="true" href="/?path=/story/introduction--page"><svg viewBox="0 0 1024 1024" class="css-1ncgzrp"><use xlink:href="#icon--document"></use></svg>Introduction</a><div id="displays" class="sidebar-subheading css-ulso1l" data-ref-id="storybook_internal" data-item-id="displays" data-nodetype="root" aria-expanded="true"><button type="button" data-action="collapse-root" class="css-3refx2"><span class="css-1j9r8vi"></span>Displays</button><button type="button" class="sidebar-subheading-action css-196vk5t" aria-label="expand" data-action="expand-all" data-expanded="false"><svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M479.7 13.4L205.4 287.6a45.7 45.7 0 1064.7 64.7l242-242 241.8 241.9a45.7 45.7 0 1064.7-64.7L544.4 13.4a45.6 45.6 0 00-64.7 0M512 1024a45.6 45.6 0 01-32.3-13.4L205.4 736.5a45.7 45.7 0 1164.7-64.7l241.8 241.8 242-241.9a45.7 45.7 0 1164.7 64.7l-274.3 274.2c-9 9-20.7 13.4-32.4 13.4" class="css-kqzqgg"></path></svg></button></div><button tabindex="-1" id="displays-accordion" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="displays-accordion" data-parent-id="displays" data-nodetype="component" data-highlightable="true" aria-controls="displays-accordion--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Accordion</button><button tabindex="-1" id="displays-alert" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="displays-alert" data-parent-id="displays" data-nodetype="component" data-highlightable="true" aria-controls="displays-alert--success" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Alert</button><button tabindex="-1" id="displays-badge" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="displays-badge" data-parent-id="displays" data-nodetype="component" data-highlightable="true" aria-controls="displays-badge--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Badge</button><button tabindex="-1" id="displays-card" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="displays-card" data-parent-id="displays" data-nodetype="component" data-highlightable="true" aria-controls="displays-card--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Card</button><button tabindex="-1" id="displays-tabs" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="displays-tabs" data-parent-id="displays" data-nodetype="component" data-highlightable="true" aria-controls="displays-tabs--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Tabs</button><div id="auth" class="sidebar-subheading css-ulso1l" data-ref-id="storybook_internal" data-item-id="auth" data-nodetype="root" aria-expanded="true"><button type="button" data-action="collapse-root" class="css-3refx2"><span class="css-1j9r8vi"></span>Auth</button><button type="button" class="sidebar-subheading-action css-196vk5t" aria-label="expand" data-action="expand-all" data-expanded="false"><svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M479.7 13.4L205.4 287.6a45.7 45.7 0 1064.7 64.7l242-242 241.8 241.9a45.7 45.7 0 1064.7-64.7L544.4 13.4a45.6 45.6 0 00-64.7 0M512 1024a45.6 45.6 0 01-32.3-13.4L205.4 736.5a45.7 45.7 0 1164.7-64.7l241.8 241.8 242-241.9a45.7 45.7 0 1164.7 64.7l-274.3 274.2c-9 9-20.7 13.4-32.4 13.4" class="css-kqzqgg"></path></svg></button></div><button tabindex="-1" id="auth-auth" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="auth-auth" data-parent-id="auth" data-nodetype="component" data-highlightable="true" aria-controls="auth-auth--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Auth</button><div id="general" class="sidebar-subheading css-ulso1l" data-ref-id="storybook_internal" data-item-id="general" data-nodetype="root" aria-expanded="true"><button type="button" data-action="collapse-root" class="css-3refx2"><span class="css-1j9r8vi"></span>General</button><button type="button" class="sidebar-subheading-action css-196vk5t" aria-label="expand" data-action="expand-all" data-expanded="false"><svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M479.7 13.4L205.4 287.6a45.7 45.7 0 1064.7 64.7l242-242 241.8 241.9a45.7 45.7 0 1064.7-64.7L544.4 13.4a45.6 45.6 0 00-64.7 0M512 1024a45.6 45.6 0 01-32.3-13.4L205.4 736.5a45.7 45.7 0 1164.7-64.7l241.8 241.8 242-241.9a45.7 45.7 0 1164.7 64.7l-274.3 274.2c-9 9-20.7 13.4-32.4 13.4" class="css-kqzqgg"></path></svg></button></div><button tabindex="-1" id="general-avatar" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="general-avatar" data-parent-id="general" data-nodetype="component" data-highlightable="true" aria-controls="general-avatar--image" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Avatar</button><button tabindex="-1" id="general-button" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="general-button" data-parent-id="general" data-nodetype="component" data-highlightable="true" aria-controls="general-button--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Button</button><button tabindex="-1" id="general-icon" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="general-icon" data-parent-id="general" data-nodetype="component" data-highlightable="true" aria-controls="general-icon--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Icon</button><button tabindex="-1" id="general-image" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="general-image" data-parent-id="general" data-nodetype="component" data-highlightable="true" aria-controls="general-image--normal" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Image</button><button tabindex="-1" id="general-typography" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="general-typography" data-parent-id="general" data-nodetype="component" data-highlightable="true" aria-controls="general-typography--article" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Typography</button><div id="data-input" class="sidebar-subheading css-ulso1l" data-ref-id="storybook_internal" data-item-id="data-input" data-nodetype="root" aria-expanded="true"><button type="button" data-action="collapse-root" class="css-3refx2"><span class="css-1j9r8vi"></span>Data Input</button><button type="button" class="sidebar-subheading-action css-196vk5t" aria-label="expand" data-action="expand-all" data-expanded="false"><svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M479.7 13.4L205.4 287.6a45.7 45.7 0 1064.7 64.7l242-242 241.8 241.9a45.7 45.7 0 1064.7-64.7L544.4 13.4a45.6 45.6 0 00-64.7 0M512 1024a45.6 45.6 0 01-32.3-13.4L205.4 736.5a45.7 45.7 0 1164.7-64.7l241.8 241.8 242-241.9a45.7 45.7 0 1164.7 64.7l-274.3 274.2c-9 9-20.7 13.4-32.4 13.4" class="css-kqzqgg"></path></svg></button></div><button tabindex="-1" id="data-input-checkbox" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="data-input-checkbox" data-parent-id="data-input" data-nodetype="component" data-highlightable="true" aria-controls="data-input-checkbox--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Checkbox</button><button tabindex="-1" id="data-input-input" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="data-input-input" data-parent-id="data-input" data-nodetype="component" data-highlightable="true" aria-controls="data-input-input--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Input</button><button tabindex="-1" id="data-input-inputnumber" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="data-input-inputnumber" data-parent-id="data-input" data-nodetype="component" data-highlightable="true" aria-controls="data-input-inputnumber--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>InputNumber</button><button tabindex="-1" id="data-input-listbox" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="data-input-listbox" data-parent-id="data-input" data-nodetype="component" data-highlightable="true" aria-controls="data-input-listbox--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Listbox</button><button tabindex="-1" id="data-input-radio" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="data-input-radio" data-parent-id="data-input" data-nodetype="component" data-highlightable="true" aria-controls="data-input-radio--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Radio</button><button tabindex="-1" id="data-input-select" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="data-input-select" data-parent-id="data-input" data-nodetype="component" data-highlightable="true" aria-controls="data-input-select--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Select</button><button tabindex="-1" id="data-input-toggle" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="data-input-toggle" data-parent-id="data-input" data-nodetype="component" data-highlightable="true" aria-controls="data-input-toggle--primary" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Toggle</button><button tabindex="-1" id="data-input-upload" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="data-input-upload" data-parent-id="data-input" data-nodetype="component" data-highlightable="true" aria-controls="data-input-upload--draggable" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Upload</button><div id="navigation" class="sidebar-subheading css-ulso1l" data-ref-id="storybook_internal" data-item-id="navigation" data-nodetype="root" aria-expanded="true"><button type="button" data-action="collapse-root" class="css-3refx2"><span class="css-1j9r8vi"></span>Navigation</button><button type="button" class="sidebar-subheading-action css-196vk5t" aria-label="expand" data-action="expand-all" data-expanded="false"><svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M479.7 13.4L205.4 287.6a45.7 45.7 0 1064.7 64.7l242-242 241.8 241.9a45.7 45.7 0 1064.7-64.7L544.4 13.4a45.6 45.6 0 00-64.7 0M512 1024a45.6 45.6 0 01-32.3-13.4L205.4 736.5a45.7 45.7 0 1164.7-64.7l241.8 241.8 242-241.9a45.7 45.7 0 1164.7 64.7l-274.3 274.2c-9 9-20.7 13.4-32.4 13.4" class="css-kqzqgg"></path></svg></button></div><button tabindex="-1" id="navigation-contextmenu" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="navigation-contextmenu" data-parent-id="navigation" data-nodetype="component" data-highlightable="true" aria-controls="navigation-contextmenu--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>ContextMenu</button><button tabindex="-1" id="navigation-dropdown" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="navigation-dropdown" data-parent-id="navigation" data-nodetype="component" data-highlightable="true" aria-controls="navigation-dropdown--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Dropdown</button><button tabindex="-1" id="navigation-menu" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="navigation-menu" data-parent-id="navigation" data-nodetype="component" data-highlightable="true" aria-controls="navigation-menu--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Menu</button><button tabindex="-1" id="navigation-popover" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="navigation-popover" data-parent-id="navigation" data-nodetype="component" data-highlightable="true" aria-controls="navigation-popover--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Popover</button><div id="utilities" class="sidebar-subheading css-ulso1l" data-ref-id="storybook_internal" data-item-id="utilities" data-nodetype="root" aria-expanded="true"><button type="button" data-action="collapse-root" class="css-3refx2"><span class="css-1j9r8vi"></span>Utilities</button><button type="button" class="sidebar-subheading-action css-196vk5t" aria-label="expand" data-action="expand-all" data-expanded="false"><svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M479.7 13.4L205.4 287.6a45.7 45.7 0 1064.7 64.7l242-242 241.8 241.9a45.7 45.7 0 1064.7-64.7L544.4 13.4a45.6 45.6 0 00-64.7 0M512 1024a45.6 45.6 0 01-32.3-13.4L205.4 736.5a45.7 45.7 0 1164.7-64.7l241.8 241.8 242-241.9a45.7 45.7 0 1164.7 64.7l-274.3 274.2c-9 9-20.7 13.4-32.4 13.4" class="css-kqzqgg"></path></svg></button></div><button tabindex="-1" id="utilities-divider" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="utilities-divider" data-parent-id="utilities" data-nodetype="component" data-highlightable="true" aria-controls="utilities-divider--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Divider</button><button tabindex="-1" id="utilities-loading" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="utilities-loading" data-parent-id="utilities" data-nodetype="component" data-highlightable="true" aria-controls="utilities-loading--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Loading</button><div id="archive" class="sidebar-subheading css-ulso1l" data-ref-id="storybook_internal" data-item-id="archive" data-nodetype="root" aria-expanded="true"><button type="button" data-action="collapse-root" class="css-3refx2"><span class="css-1j9r8vi"></span>Archive</button><button type="button" class="sidebar-subheading-action css-196vk5t" aria-label="expand" data-action="expand-all" data-expanded="false"><svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M479.7 13.4L205.4 287.6a45.7 45.7 0 1064.7 64.7l242-242 241.8 241.9a45.7 45.7 0 1064.7-64.7L544.4 13.4a45.6 45.6 0 00-64.7 0M512 1024a45.6 45.6 0 01-32.3-13.4L205.4 736.5a45.7 45.7 0 1164.7-64.7l241.8 241.8 242-241.9a45.7 45.7 0 1164.7 64.7l-274.3 274.2c-9 9-20.7 13.4-32.4 13.4" class="css-kqzqgg"></path></svg></button></div><button tabindex="-1" id="archive-input-old" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="archive-input-old" data-parent-id="archive" data-nodetype="component" data-highlightable="true" aria-controls="archive-input-old--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Input Old</button><button tabindex="-1" id="archive-radio" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="archive-radio" data-parent-id="archive" data-nodetype="component" data-highlightable="true" aria-controls="archive-radio--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Radio</button><button tabindex="-1" id="archive-textarea" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="archive-textarea" data-parent-id="archive" data-nodetype="component" data-highlightable="true" aria-controls="archive-textarea--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Textarea</button><div id="overlays" class="sidebar-subheading css-ulso1l" data-ref-id="storybook_internal" data-item-id="overlays" data-nodetype="root" aria-expanded="true"><button type="button" data-action="collapse-root" class="css-3refx2"><span class="css-1j9r8vi"></span>Overlays</button><button type="button" class="sidebar-subheading-action css-196vk5t" aria-label="expand" data-action="expand-all" data-expanded="false"><svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M479.7 13.4L205.4 287.6a45.7 45.7 0 1064.7 64.7l242-242 241.8 241.9a45.7 45.7 0 1064.7-64.7L544.4 13.4a45.6 45.6 0 00-64.7 0M512 1024a45.6 45.6 0 01-32.3-13.4L205.4 736.5a45.7 45.7 0 1164.7-64.7l241.8 241.8 242-241.9a45.7 45.7 0 1164.7 64.7l-274.3 274.2c-9 9-20.7 13.4-32.4 13.4" class="css-kqzqgg"></path></svg></button></div><button tabindex="-1" id="overlays-modal" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="overlays-modal" data-parent-id="overlays" data-nodetype="component" data-highlightable="true" aria-controls="overlays-modal--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Modal</button><button tabindex="-1" id="overlays-sidepanel" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="overlays-sidepanel" data-parent-id="overlays" data-nodetype="component" data-highlightable="true" aria-controls="overlays-sidepanel--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>SidePanel</button><button tabindex="-1" id="overlays-toast" class="sidebar-item css-bpbnnk" data-ref-id="storybook_internal" data-item-id="overlays-toast" data-parent-id="overlays" data-nodetype="component" data-highlightable="true" aria-controls="overlays-toast--default" aria-expanded="false"><span class="css-bt79wf"></span><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg>Toast</button></div></div></div></div><div style="display: none;"><ol role="listbox" aria-labelledby="downshift-1-label" id="downshift-1-menu" class="css-1i71e8o"><li><div class="search-result-recentlyOpened css-ulso1l">Recently opened</div></li><li id="downshift-1-item-0" role="option" aria-selected="false" class="search-result-item css-v42uos"><button tabindex="-1" title=" / Introduction" class="css-ny6yiz"><svg viewBox="0 0 1024 1024" color="secondary" class="css-10qeq4u"><use xlink:href="#icon--component"></use></svg><div class="search-result-item--label"><strong>Introduction</strong><span class="css-184vxur"></span></div></button></li><li id="downshift-1-item-1" role="option" aria-selected="false" class="search-result-back css-fgdbht"><svg viewBox="0 0 1024 1024" class="css-13cp26k"><path d="M257.93 511.976c0-10.236 3.902-20.47 11.71-28.282l344.098-344.158c15.622-15.624 40.946-15.624 56.57-0.006 15.622 15.622 15.624 40.948 0.004 56.568l-315.82 315.876 315.868 315.922c15.618 15.624 15.618 40.952-0.004 56.568-15.622 15.62-40.95 15.618-56.57-0.006l-344.146-344.202c-7.808-7.81-11.71-18.044-11.71-28.28z" class="css-kqzqgg"></path></svg><span class="css-gb1sl5">Back to components</span><code class="css-1en6m26">ESC</code></li><li id="downshift-1-item-2" role="option" aria-selected="false" class="search-result-clearHistory css-19nr3tn"><svg viewBox="0 0 1024 1024" class="css-13cp26k"><path d="M919.5 225.208h-215.5v-120.080c0-20.344-15.192-37.096-34.836-39.632-1.696-0.216-3.41-0.372-5.164-0.372h-304.004c-1.754 0-3.468 0.152-5.164 0.372-19.644 2.54-34.836 19.292-34.836 39.628v120.084h-215.996c-22.090 0-40 17.912-40 40.002 0 22.092 17.91 40 40 40h27.216l53.916 615.914h0.214c0 22.092 17.91 40 40 40h573.372c22.094 0 40-17.91 40-40h0.148l53.916-615.914h26.716c22.090 0 40-17.91 40-40s-17.908-40.002-39.998-40.002zM399.996 145.126h224.004v80.082h-224.004v-80.082zM762.062 881.124h-500.124l-50.414-575.912h600.954l-50.416 575.912zM632.004 697.124v-240c-0.004-22.092 17.906-40.002 40-40.002 22.090 0.002 40 17.908 40 40.002l-0.004 240.002c0.004 22.088-17.906 39.996-39.996 39.998-22.094 0.002-40.004-17.906-40-40zM311.996 697.124v-240c-0.004-22.092 17.906-40.002 40-40.002 22.090 0.002 40 17.908 40 40.002l-0.004 240.002c0.004 22.088-17.906 39.996-39.996 39.998-22.094 0.002-40.004-17.906-40-40zM472 697.124v-240c-0.004-22.092 17.906-40.002 40-40.002 22.090 0.002 40 17.908 40 40.002l-0.004 240.002c0.004 22.088-17.906 39.996-39.996 39.998-22.094 0.002-40.004-17.906-40-40z" class="css-kqzqgg"></path></svg><span class="css-gb1sl5">Clear history</span></li></ol></div></div></div></div></div></div><div class="os-scrollbar os-scrollbar-horizontal os-scrollbar-auto-hidden os-scrollbar-unusable"><div class="os-scrollbar-track os-scrollbar-track-off"><div class="os-scrollbar-handle" style="width: 100%; transform: translate(0px, 0px);"></div></div></div><div class="os-scrollbar os-scrollbar-vertical os-scrollbar-auto-hidden"><div class="os-scrollbar-track os-scrollbar-track-off"><div class="os-scrollbar-handle" style="height: 51.5464%; transform: translate(0px, 0px);"></div></div></div><div class="os-scrollbar-corner"></div></div></nav></div><div role="main" class="css-sqdry3" style="height: 580px; left: 230px; top: 10px; width: 560px;"><div class="css-1va4tas"><div class="css-sqdry3" style=""><div class="os-host os-host-foreign os-theme-dark os-host-resize-disabled os-host-scrollbar-horizontal-hidden os-host-scrollbar-vertical-hidden css-6cn5u7 os-host-transition"><div class="os-resize-observer-host observed"><div class="os-resize-observer" style="left: 0px; right: auto;"></div></div><div class="os-size-auto-observer observed" style="height: calc(100% + 1px); float: left;"><div class="os-resize-observer"></div></div><div class="os-content-glue" style="margin: 0px; width: 559px; height: 39px;"></div><div class="os-padding"><div class="os-viewport os-viewport-native-scrollbars-invisible"><div class="os-content" style="padding: 0px; height: 100%; width: 100%;"><div class="css-p1dfi6"><div class="css-11sh1n2"><div class="css-1tgscux"><a class="css-1xonygc" href="/?path=/story/introduction--page"><button type="button" class="css-17imonf">Canvas</button></a><a class="css-1xonygc" href="/?path=/docs/introduction--page"><button type="button" class="css-rfiy1p">Docs</button></a></div><span class="css-11fmq5u"></span><button type="button" title="Zoom in" class="css-xddykm"><svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M220 670a316 316 0 0 1 0-450 316 316 0 0 1 450 0 316 316 0 0 1 0 450 316 316 0 0 1-450 0zm749 240L757 698a402 402 0 1 0-59 59l212 212a42 42 0 0 0 59-59zM487 604a42 42 0 0 1-84 0V487H286a42 42 0 1 1 0-84h117V286a42 42 0 1 1 84 0v117h117a42 42 0 0 1 0 84H487v117z" class="css-kqzqgg"></path></svg></button><button type="button" title="Zoom out" class="css-xddykm"><svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M757 698a402 402 0 1 0-59 59l212 212a42 42 0 0 0 59-59L757 698zM126 445a316 316 0 0 1 319-319 316 316 0 0 1 318 319 316 316 0 0 1-318 318 316 316 0 0 1-319-318zm160 42a42 42 0 1 1 0-84h318a42 42 0 0 1 0 84H286z" class="css-kqzqgg"></path></svg></button><button type="button" title="Reset zoom" class="css-xddykm"><svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M148 560a318 318 0 0 0 522 110 316 316 0 0 0 0-450 316 316 0 0 0-450 0c-11 11-21 22-30 34v4h47c25 0 46 21 46 46s-21 45-46 45H90c-13 0-25-6-33-14-9-9-14-20-14-33V156c0-25 20-45 45-45s45 20 45 45v32l1 1a401 401 0 0 1 623 509l212 212a42 42 0 0 1-59 59L698 757A401 401 0 0 1 65 570a42 42 0 0 1 83-10z" class="css-kqzqgg"></path></svg></button><span class="css-11fmq5u"></span><div class="css-c3junj"><button type="button" title="Change the background of the preview" class="css-xddykm"><svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M920 64h-816c-22.092 0-40 17.91-40 40v816c0 22.094 17.908 40 40 40h816c22.092 0 40-17.906 40-40v-816c0-22.090-17.908-40-40-40zM880 144v449.782l-235.39-235.392c-7.502-7.5-17.676-11.714-28.286-11.714s-20.784 4.214-28.286 11.716l-169.804 169.804-40.958-40.958c-15.622-15.622-40.95-15.622-56.57 0l-176.708 176.708v-519.946h736.002zM144 880v-102.914l204.992-204.994 215.972 215.974c7.81 7.81 18.048 11.714 28.286 11.714s20.474-3.904 28.286-11.714c15.62-15.622 15.62-40.95 0-56.57l-146.732-146.73 141.522-141.524 263.676 263.68v173.078h-736.002zM356.174 400.542c52.466 0 95-42.536 95-95s-42.534-95-95-95-95 42.536-95 95 42.534 95 95 95zM356.174 250.542c30.326 0 55 24.672 55 55s-24.674 55-55 55-55-24.672-55-55 24.674-55 55-55z" class="css-kqzqgg"></path></svg></button></div><button type="button" title="Apply a grid to the preview" class="css-xddykm"><svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M437.162 552.368c-1.694-0.216-3.408-0.37-5.162-0.37h-263.978c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v264.040c0 22.094 17.91 40 40 40h263.978c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-264.044c0-20.34-15.19-37.094-34.838-39.632zM208.022 816.038v-184.040h183.978v184.040h-183.978zM437.162 128.4c-1.694-0.216-3.408-0.37-5.162-0.37h-263.978c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v263.968c0 22.094 17.91 40 40 40h263.978c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-263.972c0-20.342-15.19-37.096-34.838-39.632zM208.022 392v-183.968h183.978v183.968h-183.978zM861.212 552.368c-1.694-0.216-3.408-0.37-5.162-0.37h-264.050c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v264.040c0 22.094 17.91 40 40 40h264.048c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-264.044c0.002-20.34-15.19-37.094-34.836-39.632zM632 816.038v-184.040h184.048v184.040h-184.048zM861.212 128.4c-1.694-0.216-3.408-0.37-5.162-0.37h-264.050c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v263.968c0 22.094 17.91 40 40 40h264.048c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-263.972c0.002-20.342-15.19-37.096-34.836-39.632zM632 392v-183.968h184.048v183.968h-184.048z" class="css-kqzqgg"></path></svg></button><div class="css-c3junj"><button type="button" title="Change the size of the preview" class="css-1aordym"><svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M541.146 448.384c-1.694-0.216-3.408-0.37-5.162-0.37h-367.968c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v368.032c0 22.094 17.91 40 40 40h367.968c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-368.036c0-20.34-15.192-37.094-34.838-39.632zM208.016 816.046v-288.032h287.968v288.032h-287.968zM736.032 856.046c0 22.090-17.908 40-40 40-22.090 0-40-17.908-40-40v-487.902l-488.016 0.002c-22.090 0-40-17.91-40-40s17.908-40.002 40-40.002h528.016c1.754 0 3.468 0.152 5.162 0.37 19.646 2.538 34.838 19.292 34.838 39.63v527.902zM896.032 168.030v688.004c-0.002 22.088-17.91 39.996-40 39.996s-40.002-17.908-40.002-40c0 0 0.002-304.026 0.002-304.040v-343.96h-343.96c-0.014 0-304.040 0.002-304.040 0.002-22.090 0-40-17.91-40-40s17.908-40.002 40-40.002h688c1.754 0 3.468 0.152 5.162 0.37 19.646 2.536 34.838 19.29 34.838 39.63z" class="css-kqzqgg"></path></svg></button></div><button type="button" title="Enable measure" class="css-xddykm"><svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M83 110c-22 0-40 18-40 40v176a40 40 0 0080 0v-49h778v49a40 40 0 0080 0V150a40 40 0 10-80 0v49H123v-49c0-22-18-40-40-40zm40 458v266h778V568h-63v115a40 40 0 11-80 0V568h-63v46a40 40 0 11-80 0v-46h-63v115a40 40 0 11-80 0V568h-63v46a40 40 0 11-80 0v-46h-63v115a40 40 0 11-80 0V568h-63zm103-80h691c36 0 64 28 64 64v298c0 36-28 64-64 64H107c-36 0-64-28-64-64V552c0-36 28-64 64-64h119z" class="css-kqzqgg"></path></svg></button><button type="button" title="Apply outlines to the preview" class="css-xddykm"><svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M180.1 714.3V844h129.6v94.8h-180c-24.2 0-44-19.5-44.4-43.7V714.3h94.8zM619.3 844v94.8H404.7v-94.8h214.6zm319.4-129.6v180c0 24.2-19.5 44-43.7 44.4H714.3v-94.8H844V714.3h94.8zm0-309.6v214.6h-94.8V404.7h94.8zm-758.6 0v214.6H85.3V404.7h94.8zm331.9 34a73.2 73.2 0 110 146.4 73.2 73.2 0 010-146.3zM894.2 85.4c24.3 0 44 19.5 44.5 43.7V309.7h-94.8V180H714.3V85.3h180zm-584.5 0v94.8H180v129.6H85.3v-180c0-24.2 19.5-44 43.7-44.4H309.7zm309.6 0v94.8H404.7V85.3h214.6z" class="css-kqzqgg"></path></svg></button><button type="button" title="Change theme to dark mode" class="css-xddykm"><svg version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 438.277 438.277" style="fill: currentcolor; margin-top: 3px; height: 13px;"><path d="M428.756,300.104c-0.664-3.81-2.334-7.047-4.996-9.713c-5.9-5.903-12.752-7.142-20.554-3.716 c-20.937,9.708-42.641,14.558-65.097,14.558c-28.171,0-54.152-6.94-77.943-20.838c-23.791-13.894-42.631-32.736-56.525-56.53 c-13.899-23.793-20.844-49.773-20.844-77.945c0-21.888,4.333-42.683,12.991-62.384c8.66-19.7,21.176-36.973,37.543-51.82 c6.283-5.898,7.713-12.752,4.287-20.557c-3.236-7.801-9.041-11.511-17.415-11.132c-29.121,1.141-56.72,7.664-82.797,19.556 C111.33,31.478,88.917,47.13,70.168,66.548c-18.747,19.414-33.595,42.399-44.54,68.95c-10.942,26.553-16.416,54.39-16.416,83.511 c0,29.694,5.806,58.054,17.416,85.082c11.613,27.028,27.218,50.344,46.824,69.949c19.604,19.599,42.92,35.207,69.951,46.822 c27.028,11.607,55.384,17.415,85.075,17.415c42.64,0,81.987-11.563,118.054-34.69c36.069-23.124,63.05-54.006,80.944-92.645 C429,307.519,429.427,303.906,428.756,300.104z M306.565,384.168c-24.646,11.711-50.676,17.562-78.087,17.562 c-24.743,0-48.39-4.853-70.947-14.558c-22.554-9.705-41.971-22.695-58.246-38.972c-16.271-16.272-29.259-35.686-38.97-58.241 c-9.707-22.556-14.561-46.203-14.561-70.948c0-40.922,12.135-77.466,36.403-109.636c24.266-32.165,55.531-53.959,93.788-65.379 c-19.795,31.405-29.694,65.379-29.694,101.926c0,34.644,8.564,66.715,25.697,96.223c17.128,29.499,40.446,52.811,69.95,69.948 c29.499,17.129,61.565,25.694,96.211,25.694c10.656,0,21.129-0.855,31.408-2.57C352.199,356.155,331.21,372.472,306.565,384.168z"></path></svg></button></div><div class="css-pvky73"><span class="css-18i2ql3"><button type="button" title="Go full screen [F]" class="css-xddykm"><svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M433.4 578.8l6.2 5.2a44.8 44.8 0 010 63.3L238.4 849.1h100.3a44.8 44.8 0 018 88.8l-8 .8H130l-6.2-.5 2.7.3h-.3a44.7 44.7 0 01-24.8-10.2l-.3-.3-.3-.2-.3-.4-.3-.2-.3-.2v-.2h-.1l-.2-.1a45.7 45.7 0 01-13.5-24.8l-.3-1.7a45 45 0 01-.5-5.3V685.7a44.8 44.8 0 0189-8.1l.6 8 .1 100L376.3 584a44.8 44.8 0 0157.1-5.2zm157.2 0a44.8 44.8 0 0157.1 5.2L849 785.7v-100l.8-8.1a44.8 44.8 0 0188.9 8V895a45 45 0 01-.5 5.3l-.3 1.7a38.6 38.6 0 01-2.8 9.4 43.4 43.4 0 01-9.6 14.2l-4.7 4.2 2-1.7.7-.6-.3.4a44.1 44.1 0 01-4.4 3.3l-.6.4a45.8 45.8 0 01-20.4 7h-.3.9l1.8-.3-6.2.5H685.3l-8-.8a44.8 44.8 0 018-88.8h100.3L584.4 647.3a44.8 44.8 0 010-63.3zM98.5 925.5l1.3 1.3.1.2.6.4a45 45 0 002 1.7l.7.6-4.7-4.2zM893.9 85.3h.9-.8l6.2.5a45 45 0 00-1.8-.2l-.9-.1h-1l-.5-.1h-1.2 2.7l.3.1a44.7 44.7 0 0125.4 10.7l.3.3v.1l.3.2.3.2v.2h.1l.2.1.6.6.5.6A45.6 45.6 0 01938 122l.3 1.7c.3 1.8.4 3.6.5 5.3v209.2a44.8 44.8 0 01-89 8.1l-.6-8-.1-100L647.7 440a44.8 44.8 0 01-57.1 5.2l-6.2-5.2a44.8 44.8 0 010-63.3l201.2-201.8H685.3a44.8 44.8 0 01-8-88.8l8-.8H894h-.1zm-555.2 0l8 .8a44.8 44.8 0 01-8 88.8H238.4l201.2 201.8a44.8 44.8 0 010 63.3l-6.2 5.2a44.8 44.8 0 01-57.1-5.2L175 238.3v100l-.8 8.1a44.8 44.8 0 01-88.9-8V129c0-1.7.2-3.5.5-5.3l.3-1.7a38.6 38.6 0 012.8-9.4 43.4 43.4 0 019.6-14.2l4.7-4.2-2 1.7.2-.3a43.7 43.7 0 0124.8-10.2h1.3l.3-.1h2.3-.1 208.7zm582 9l4.8 4.2-1.3-1.3-.1-.2-.5-.4h-.1l-.6-.6-1.4-1.1-.7-.6zm-790.7-9h-2l-.5.1h-1l-.9.2c-.6 0-1.2 0-1.8.2l6.2-.5z" class="css-kqzqgg"></path></svg></button></span><a href="iframe.html?id=introduction--page&args=" target="_blank" title="Open canvas in new tab" class="css-xddykm"><svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M130 85h332a45 45 0 0 1 8 89l-8 1H175v674h674V557a45 45 0 0 1 89-8l1 8v337c0 22-16 40-37 44l-8 1H130c-22 0-40-16-44-37l-1-8V130c0-22 16-40 37-44l8-1h332-332zm555 0h210l5 1-6-1a45 45 0 0 1 32 13l-5-4 3 3 2 1a46 46 0 0 1 12 24v2l1 5v209a45 45 0 0 1-89 8l-1-8V238L544 544a45 45 0 0 1-57 5l-7-5a45 45 0 0 1 0-64l306-305H685a45 45 0 0 1-8-89l8-1h209-209z" class="css-kqzqgg"></path></svg></a><button type="button" title="Copy canvas link" class="css-xddykm"><svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M743.52 529.234c5.616-5.616 83.048-83.046 88.462-88.46 30.944-32.778 47.97-75.636 47.97-120.792 0-47.048-18.304-91.26-51.542-124.484-33.228-33.22-77.43-51.516-124.458-51.516-45.024 0-87.792 16.94-120.536 47.72l-104.458 104.456c-30.792 32.738-47.734 75.512-47.734 120.548 0 41.916 14.576 81.544 41.248 113.196 3.264 3.876 6.666 7.664 10.292 11.29 4.258 4.258 8.704 8.262 13.304 12.022 0.054 0.080 0.096 0.152 0.148 0.232 9.572 7.308 15.778 18.804 15.778 31.776 0 22.094-17.914 40-40.004 40-8.542 0-16.442-2.696-22.938-7.26-2.746-1.93-20.622-17.43-30.35-28.050-0.008-0.010-0.018-0.018-0.026-0.028-4.992-5.432-13.234-15.23-18.552-22.65s-16.556-25.872-17.036-26.736c-0.7-1.262-2.974-5.526-3.422-6.39-0.69-1.334-6.118-12.67-6.114-12.67-14.342-31.96-22.332-67.4-22.332-104.728 0-60.826 21.198-116.648 56.58-160.544 0.252-0.314 4.61-5.594 6.594-7.866 0.304-0.35 5.038-5.636 7.16-7.874 0.252-0.268 105.86-105.874 106.128-106.126 45.902-43.584 107.958-70.314 176.264-70.314 141.382 0 255.998 114.5 255.998 256 0 68.516-26.882 130.688-70.652 176.61-0.144 0.148-109.854 109.546-112.090 111.528-0.958 0.848-5.072 4.352-5.072 4.352-6.448 5.434-13.132 10.592-20.1 15.378 0.412-6.836 0.644-13.702 0.644-20.6 0-26.46-3.108-52.206-8.918-76.918l-0.236-1.102zM616.144 767.82c35.382-43.896 56.58-99.718 56.58-160.544 0-37.328-7.99-72.768-22.332-104.728 0.004 0 0.006-0.002 0.010-0.004-0.258-0.576-0.538-1.14-0.8-1.714-0.686-1.498-2.894-6.112-3.296-6.93-0.668-1.344-2.952-5.732-3.386-6.604-3.48-6.982-8.708-15.126-9.49-16.366-0.498-0.792-0.996-1.58-1.502-2.364-0.834-1.29-15.364-22.066-26.656-34.466-0.008-0.010-0.018-0.018-0.026-0.028-7.056-8.448-24.932-24.198-30.35-28.050-6.47-4.602-14.396-7.26-22.938-7.26-22.090 0-40.004 17.906-40.004 40 0 12.97 6.206 24.466 15.778 31.776 0.052 0.080 0.094 0.152 0.148 0.232 4.602 3.76 20.334 19.434 23.598 23.31 26.672 31.65 41.248 71.28 41.248 113.196 0 45.038-16.944 87.81-47.734 120.548l-104.458 104.456c-32.742 30.782-75.512 47.72-120.536 47.72-47.028 0-91.228-18.294-124.458-51.516-33.236-33.224-51.542-77.436-51.542-124.484 0-45.154 17.028-88.014 47.97-120.792 5.414-5.414 40.812-40.812 68.958-68.958 7.176-7.176 13.888-13.886 19.504-19.502v-0.002c-0.356-1.562-0.246-1.096-0.246-1.096-5.81-24.712-8.918-50.458-8.918-76.918 0-6.898 0.232-13.764 0.644-20.6-6.966 4.788-20.1 15.33-20.1 15.33-0.734 0.62-9.518 8.388-11.68 10.45-0.16 0.154-105.338 105.33-105.482 105.478-43.77 45.922-70.652 108.094-70.652 176.61 0 141.5 114.616 256 255.998 256 68.306 0 130.362-26.73 176.264-70.314 0.27-0.254 105.876-105.86 106.128-106.126 0.004-0.002 13.506-15.426 13.758-15.74z" class="css-kqzqgg"></path></svg></button></div></div></div></div></div><div class="os-scrollbar os-scrollbar-horizontal os-scrollbar-unusable os-scrollbar-auto-hidden"><div class="os-scrollbar-track os-scrollbar-track-off"><div class="os-scrollbar-handle" style="width: 100%; transform: translate(0px, 0px);"></div></div></div><div class="os-scrollbar os-scrollbar-vertical os-scrollbar-unusable os-scrollbar-auto-hidden"><div class="os-scrollbar-track os-scrollbar-track-off"><div class="os-scrollbar-handle" style="height: 100%; transform: translate(0px, 0px);"></div></div></div><div class="os-scrollbar-corner"></div></div><div offset="40" class="css-10ro1m"><div id="storybook-preview-wrapper" class="css-sqc8g1"><iframe data-is-storybook="true" id="storybook-preview-iframe" title="storybook-preview-iframe" src="iframe.html?id=*&viewMode=story" allowfullscreen="" class="css-crh05v" data-is-loaded="true"></iframe></div></div></div><div class="css-5242ss" hidden="" style="height: 230px; left: 0px; top: 350px; width: 560px;"><div id="storybook-panel-root" class="css-4e8exj"><div class="os-host os-host-foreign os-theme-dark os-host-resize-disabled os-host-scrollbar-horizontal-hidden css-1bpjtbt os-host-scrollbar-vertical-hidden os-host-transition"><div class="os-resize-observer-host observed"><div class="os-resize-observer" style="left: 0px; right: auto;"></div></div><div class="os-size-auto-observer observed" style="height: calc(100% + 1px); float: left;"><div class="os-resize-observer"></div></div><div class="os-content-glue" style="margin: 0px; width: 559px; height: 39px;"></div><div class="os-padding"><div class="os-viewport os-viewport-native-scrollbars-invisible" style=""><div class="os-content" style="padding: 0px; height: 100%; width: 100%;"><div class="css-p1dfi6"><div class="css-11sh1n2"><div role="tablist" class="css-1tgscux"><button type="button" id="tabbutton-controls" class="tabbutton tabbutton-active css-17imonf" role="tab">Controls</button><button type="button" id="tabbutton-actions" class="tabbutton css-rfiy1p" role="tab">Actions</button></div></div><div class="css-pvky73"><button type="button" title="Change addon orientation [D]" class="css-cqv8x5"><svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M64 167.944v688c0 22.092 17.908 40 40 40h816c22.092 0 40-17.908 40-40v-688c0-22.092-17.908-40-40-40h-816c-22.092 0-40 17.908-40 40zM880 815.944h-240v-608h240v608zM144 207.944h416v608h-416v-608zM793.296 320.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32zM793.296 448.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32zM793.296 576.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32z" class="css-kqzqgg"></path></svg></button><button type="button" title="Hide addons [A]" class="css-cqv8x5"><svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M150 150a512 512 0 11724 724 512 512 0 01-724-724zm69.3 64.2A418.5 418.5 0 0095.9 512a418.5 418.5 0 00123.4 297.8A418.5 418.5 0 00517 933.2 418.5 418.5 0 00815 809.8 418.5 418.5 0 00938.4 512 418.5 418.5 0 00815 214.2 418.5 418.5 0 00517 90.8a418.5 418.5 0 00-297.8 123.4zM655 304a46 46 0 0165 65L577 512l143 143a46 46 0 11-65 65L512 577 369 720a46 46 0 11-65-65l143-143-143-143a46 46 0 0165-65l143 143 143-143z" class="css-kqzqgg"></path></svg></button></div></div></div></div></div><div class="os-scrollbar os-scrollbar-horizontal os-scrollbar-unusable os-scrollbar-auto-hidden"><div class="os-scrollbar-track os-scrollbar-track-off"><div class="os-scrollbar-handle" style="width: 100%; transform: translate(0px, 0px);"></div></div></div><div class="os-scrollbar os-scrollbar-vertical os-scrollbar-auto-hidden os-scrollbar-unusable"><div class="os-scrollbar-track os-scrollbar-track-off"><div class="os-scrollbar-handle" style="height: 100%; transform: translate(0px, 0px);"></div></div></div><div class="os-scrollbar-corner"></div></div><div id="panel-tab-content" class="css-1fst6u6"><div style="transform: translateX(0px);"><div class="css-3wdbto">This story is not configured to handle controls. <a href="https://storybook.js.org/docs/react/essentials/controls" target="_blank" class="css-1fdob6g"><span class="css-1mjgzsp">Learn how to add controls<svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M768.072 514.022c0 10.236-3.904 20.47-11.712 28.282l-344.098 344.156c-15.62 15.624-40.946 15.624-56.568 0.006-15.622-15.622-15.624-40.948-0.006-56.568l315.82-315.876-315.868-315.922c-15.618-15.624-15.618-40.952 0.004-56.568 15.624-15.62 40.95-15.618 56.57 0.006l344.144 344.204c7.81 7.81 11.714 18.044 11.714 28.28z" class="css-kqzqgg"></path></svg></span></a></div><div class="docblock-emptyblock css-1kd14oy">No inputs found for this component. <a href="http://storybook.js.org/docs/" target="_blank" class="css-1fdob6g"><span class="css-1mjgzsp">Read the docs<svg viewBox="0 0 1024 1024" class="css-ha8kg"><path d="M768.072 514.022c0 10.236-3.904 20.47-11.712 28.282l-344.098 344.156c-15.62 15.624-40.946 15.624-56.568 0.006-15.622-15.622-15.624-40.948-0.006-56.568l315.82-315.876-315.868-315.922c-15.618-15.624-15.618-40.952 0.004-56.568 15.624-15.62 40.95-15.618 56.57 0.006l344.144 344.204c7.81 7.81 11.714 18.044 11.714 28.28z" class="css-kqzqgg"></path></svg></span></a></div></div></div></div></div></div></div></div></div><div id="docs-root"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";
window['LOGLEVEL'] = "info";
window['DOCS_MODE'] = false;</script><script src="runtime~main.c2b3f26a8faab030e28a.manager.bundle.js"></script><script src="vendors~main.b14a4946ee53e5e6bf6e.manager.bundle.js"></script><script src="main.3e0638a774457fcb003f.manager.bundle.js"></script><div id="a11y-status-message" role="status" aria-live="polite" aria-relevant="additions text" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"></div></body></html>