- 掃描 ID：
- 166ef0ab-5bcd-48b3-a5b4-b78ff956f367已完成
- 已提交的 URL：
- https://unruffled-hoover-de9320.netlify.app/
- 報告完成時間：
連結 · 找到 2 個
從頁面中識別的傳出連結
| 連結 | Text |
|---|---|
| https://storybook.js.org/docs/react/essentials/controls | Learn how to add controls |
| http://storybook.js.org/docs/ | Read the docs |
JavaScript 變數 · 找到 14 個
在頁面的視窗物件上載入的全域 JavaScript 變數是在函數外部宣告的變數，可從目前範圍內程式碼中的任何位置存取
| 名稱 | 類型 |
|---|---|
| 0 | object |
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| CONFIG_TYPE | string |
| LOGLEVEL | string |
| DOCS_MODE | boolean |
| webpackJsonp | object |
| regeneratorRuntime | object |
| setImmediate | function |
主控台記錄訊息 · 找到 3 條
記錄到 Web 主控台的訊息
| 類型 | 類別 | 記錄 |
|---|---|---|
| warning | other |
|
| warning | other |
|
| warning | other |
|
HTML
頁面的原始 HTML 主體
<!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>