<!doctype html> < html > < head > < meta charset = "utf-8" > < title > Storybook< / title > < base target = "_parent" > < style > : n o t ( . s b - s h o w - m a i n ) > . s b - m a i n ,
:not(.sb-show-nopreview) > .sb-nopreview,
:not(.sb-show-errordisplay) > .sb-errordisplay {
display: none;
}
.sb-wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
font-family: -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
-webkit-font-smoothing: antialiased;
}
.sb-heading {
font-size: 20px;
font-weight: 600;
letter-spacing: 0.2px;
margin: 10px 0;
}
.sb-nopreview {
display: flex;
align-content: center;
justify-content: center;
}
.sb-nopreview_main {
margin: auto;
padding: 30px;
border-radius: 10px;
background: rgba(0,0,0,0.03);
}
.sb-nopreview_heading {
text-align: center;
}
.sb-errordisplay {
background-color: rgb(187, 49, 49);
color: #FFF;
}
.sb-errordisplay_code {
font-size: 14px;
width: 100vw;
overflow: auto;
}< / style > < script > t r y {
if (window.parent !== window) {
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__;
}
} catch (e) {
console.warn('unable to connect to parent frame for connecting dev tools');
}< / script > < style > . d a r k . s t o r y - t i t l e ,
.dark .story-subtitle,
.dark .chapter-header,
.dark .section-header,
.dark .section-title,
.dark .section-subsection,
.dark .section-button-container,
.dark .chapter-h3 {
color: white !important;
display: block;
}
.dark .chapter-header {
border-bottom: 1px solid rgba(255, 255, 255, .5) !important;
}
.light .story-title,
.light .story-subtitle,
.light .chapter-header,
.light .section-header,
.light .section-title,
.light .section-subsection,
.light .section-button-container,
.light .chapter-h3 {
color: black !important;
display: block;
}
.light .chapter-header {
border-bottom: 1px solid rgba(0, 0, 0, .5) !important;
}
.chapter-header {
margin-bottom: 30px !important;
}
.story-header p {
margin-bottom: 1em !important;
}
.section-container {
margin-bottom: 30px !important;
}
.section-component-container {
margin-bottom: 15px !important;
}< / style > < / head > < body > < div class = "sb-nopreview sb-wrapper" > < div class = "sb-nopreview_main" > < h1 class = "sb-nopreview_heading sb-heading" > No Preview< / h1 > < p > Sorry, but you either have no stories or none are selected somehow.< / p > < ul > < li > Please check the storybook config.< / li > < li > Try reloading the page.< / li > < / ul > < / div > < / div > < div class = "sb-errordisplay sb-wrapper" > < div id = "error-message" class = "sb-heading" > < / div > < pre class = "sb-errordisplay_code" >
< code id = "error-stack" > < / code >
< / pre > < / div > < div id = "root" > < / div > < script src = "static/runtime~iframe.36305751f78a2d599ec4.bundle.js" > < / script > < script src = "static/vendors~iframe.cec1cb46fb8f74b7e92a.bundle.js" > < / script > < script src = "static/iframe.354c3ab246e7bffc8fbf.bundle.js" > < / script > < / body > < / html >
