diff --git a/404.html b/404.html index 882795ce..c2bfd4c5 100644 --- a/404.html +++ b/404.html @@ -2,18 +2,18 @@ - + Page Not Found | Stylable - + - - + + -
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

+
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

\ No newline at end of file diff --git a/assets/css/styles.f75b2444.css b/assets/css/styles.d1ba7c38.css similarity index 82% rename from assets/css/styles.f75b2444.css rename to assets/css/styles.d1ba7c38.css index 53330057..b4296928 100644 --- a/assets/css/styles.f75b2444.css +++ b/assets/css/styles.d1ba7c38.css @@ -1 +1 @@ -.col,.container{padding:0 var(--ifm-spacing-horizontal);width:100%}.markdown>h2,.markdown>h3,.markdown>h4,.markdown>h5,.markdown>h6{margin-bottom:calc(var(--ifm-heading-vertical-rhythm-bottom)*var(--ifm-leading))}.markdown li,body{word-wrap:break-word}body,ol ol,ol ul,ul ol,ul ul{margin:0}pre,table{overflow:auto}blockquote,pre{margin:0 0 var(--ifm-spacing-vertical)}.breadcrumbs__link,.button{transition-timing-function:var(--ifm-transition-timing-default)}.button,code{vertical-align:middle}.button--outline.button--active,.button--outline:active,.button--outline:hover,:root{--ifm-button-color:var(--ifm-font-color-base-inverse)}.menu__link:hover,a{transition:color var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.navbar--dark,:root{--ifm-navbar-link-hover-color:var(--ifm-color-primary)}.menu,.navbar-sidebar{overflow-x:hidden}:root,html[data-theme=dark]{--ifm-color-emphasis-500:var(--ifm-color-gray-500)}.toggleButton_gllP,html{-webkit-tap-highlight-color:transparent}*,.loadingRing_RJI3 div{box-sizing:border-box}.clean-list,.containsTaskList_mC6p,.details_lb9f>summary,.dropdown__menu,.menu__list{list-style:none}:root{--ifm-color-scheme:light;--ifm-dark-value:10%;--ifm-darker-value:15%;--ifm-darkest-value:30%;--ifm-light-value:15%;--ifm-lighter-value:30%;--ifm-lightest-value:50%;--ifm-contrast-background-value:90%;--ifm-contrast-foreground-value:70%;--ifm-contrast-background-dark-value:70%;--ifm-contrast-foreground-dark-value:90%;--ifm-color-primary:#3578e5;--ifm-color-secondary:#ebedf0;--ifm-color-success:#00a400;--ifm-color-info:#54c7ec;--ifm-color-warning:#ffba00;--ifm-color-danger:#fa383e;--ifm-color-primary-dark:#306cce;--ifm-color-primary-darker:#2d66c3;--ifm-color-primary-darkest:#2554a0;--ifm-color-primary-light:#538ce9;--ifm-color-primary-lighter:#72a1ed;--ifm-color-primary-lightest:#9abcf2;--ifm-color-primary-contrast-background:#ebf2fc;--ifm-color-primary-contrast-foreground:#102445;--ifm-color-secondary-dark:#d4d5d8;--ifm-color-secondary-darker:#c8c9cc;--ifm-color-secondary-darkest:#a4a6a8;--ifm-color-secondary-light:#eef0f2;--ifm-color-secondary-lighter:#f1f2f5;--ifm-color-secondary-lightest:#f5f6f8;--ifm-color-secondary-contrast-background:#fdfdfe;--ifm-color-secondary-contrast-foreground:#474748;--ifm-color-success-dark:#009400;--ifm-color-success-darker:#008b00;--ifm-color-success-darkest:#007300;--ifm-color-success-light:#26b226;--ifm-color-success-lighter:#4dbf4d;--ifm-color-success-lightest:#80d280;--ifm-color-success-contrast-background:#e6f6e6;--ifm-color-success-contrast-foreground:#003100;--ifm-color-info-dark:#4cb3d4;--ifm-color-info-darker:#47a9c9;--ifm-color-info-darkest:#3b8ba5;--ifm-color-info-light:#6ecfef;--ifm-color-info-lighter:#87d8f2;--ifm-color-info-lightest:#aae3f6;--ifm-color-info-contrast-background:#eef9fd;--ifm-color-info-contrast-foreground:#193c47;--ifm-color-warning-dark:#e6a700;--ifm-color-warning-darker:#d99e00;--ifm-color-warning-darkest:#b38200;--ifm-color-warning-light:#ffc426;--ifm-color-warning-lighter:#ffcf4d;--ifm-color-warning-lightest:#ffdd80;--ifm-color-warning-contrast-background:#fff8e6;--ifm-color-warning-contrast-foreground:#4d3800;--ifm-color-danger-dark:#e13238;--ifm-color-danger-darker:#d53035;--ifm-color-danger-darkest:#af272b;--ifm-color-danger-light:#fb565b;--ifm-color-danger-lighter:#fb7478;--ifm-color-danger-lightest:#fd9c9f;--ifm-color-danger-contrast-background:#ffebec;--ifm-color-danger-contrast-foreground:#4b1113;--ifm-color-white:#fff;--ifm-color-black:#000;--ifm-color-gray-0:var(--ifm-color-white);--ifm-color-gray-100:#f5f6f7;--ifm-color-gray-200:#ebedf0;--ifm-color-gray-300:#dadde1;--ifm-color-gray-400:#ccd0d5;--ifm-color-gray-500:#bec3c9;--ifm-color-gray-600:#8d949e;--ifm-color-gray-700:#606770;--ifm-color-gray-800:#444950;--ifm-color-gray-900:#1c1e21;--ifm-color-gray-1000:var(--ifm-color-black);--ifm-color-emphasis-0:var(--ifm-color-gray-0);--ifm-color-emphasis-100:var(--ifm-color-gray-100);--ifm-color-emphasis-200:var(--ifm-color-gray-200);--ifm-color-emphasis-300:var(--ifm-color-gray-300);--ifm-color-emphasis-400:var(--ifm-color-gray-400);--ifm-color-emphasis-600:var(--ifm-color-gray-600);--ifm-color-emphasis-700:var(--ifm-color-gray-700);--ifm-color-emphasis-800:var(--ifm-color-gray-800);--ifm-color-emphasis-900:var(--ifm-color-gray-900);--ifm-color-emphasis-1000:var(--ifm-color-gray-1000);--ifm-color-content:var(--ifm-color-emphasis-900);--ifm-color-content-inverse:var(--ifm-color-emphasis-0);--ifm-color-content-secondary:#525860;--ifm-background-color:#0000;--ifm-background-surface-color:var(--ifm-color-content-inverse);--ifm-global-border-width:1px;--ifm-global-radius:0.4rem;--ifm-hover-overlay:#0000000d;--ifm-font-color-base:var(--ifm-color-content);--ifm-font-color-base-inverse:var(--ifm-color-content-inverse);--ifm-font-color-secondary:var(--ifm-color-content-secondary);--ifm-font-family-base:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--ifm-font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--ifm-font-size-base:100%;--ifm-font-weight-light:300;--ifm-font-weight-normal:400;--ifm-font-weight-semibold:500;--ifm-font-weight-bold:700;--ifm-font-weight-base:var(--ifm-font-weight-normal);--ifm-line-height-base:1.65;--ifm-global-spacing:1rem;--ifm-spacing-vertical:var(--ifm-global-spacing);--ifm-spacing-horizontal:var(--ifm-global-spacing);--ifm-transition-fast:200ms;--ifm-transition-slow:400ms;--ifm-transition-timing-default:cubic-bezier(0.08,0.52,0.52,1);--ifm-global-shadow-lw:0 1px 2px 0 #0000001a;--ifm-global-shadow-md:0 5px 40px #0003;--ifm-global-shadow-tl:0 12px 28px 0 #0003,0 2px 4px 0 #0000001a;--ifm-z-index-dropdown:100;--ifm-z-index-fixed:200;--ifm-z-index-overlay:400;--ifm-container-width:1140px;--ifm-container-width-xl:1320px;--ifm-code-background:#f6f7f8;--ifm-code-border-radius:var(--ifm-global-radius);--ifm-code-font-size:90%;--ifm-code-padding-horizontal:0.1rem;--ifm-code-padding-vertical:0.1rem;--ifm-pre-background:var(--ifm-code-background);--ifm-pre-border-radius:var(--ifm-code-border-radius);--ifm-pre-color:inherit;--ifm-pre-line-height:1.45;--ifm-pre-padding:1rem;--ifm-heading-color:inherit;--ifm-heading-margin-top:0;--ifm-heading-margin-bottom:var(--ifm-spacing-vertical);--ifm-heading-font-family:var(--ifm-font-family-base);--ifm-heading-font-weight:var(--ifm-font-weight-bold);--ifm-heading-line-height:1.25;--ifm-h1-font-size:2rem;--ifm-h2-font-size:1.5rem;--ifm-h3-font-size:1.25rem;--ifm-h4-font-size:1rem;--ifm-h5-font-size:0.875rem;--ifm-h6-font-size:0.85rem;--ifm-image-alignment-padding:1.25rem;--ifm-leading-desktop:1.25;--ifm-leading:calc(var(--ifm-leading-desktop)*1rem);--ifm-list-left-padding:2rem;--ifm-list-margin:1rem;--ifm-list-item-margin:0.25rem;--ifm-list-paragraph-margin:1rem;--ifm-table-cell-padding:0.75rem;--ifm-table-background:#0000;--ifm-table-stripe-background:#00000008;--ifm-table-border-width:1px;--ifm-table-border-color:var(--ifm-color-emphasis-300);--ifm-table-head-background:inherit;--ifm-table-head-color:inherit;--ifm-table-head-font-weight:var(--ifm-font-weight-bold);--ifm-table-cell-color:inherit;--ifm-link-color:var(--ifm-color-primary);--ifm-link-decoration:none;--ifm-link-hover-color:var(--ifm-link-color);--ifm-link-hover-decoration:underline;--ifm-paragraph-margin-bottom:var(--ifm-leading);--ifm-blockquote-font-size:var(--ifm-font-size-base);--ifm-blockquote-border-left-width:2px;--ifm-blockquote-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-blockquote-padding-vertical:0;--ifm-blockquote-shadow:none;--ifm-blockquote-color:var(--ifm-color-emphasis-800);--ifm-blockquote-border-color:var(--ifm-color-emphasis-300);--ifm-hr-background-color:var(--ifm-color-emphasis-500);--ifm-hr-height:1px;--ifm-hr-margin-vertical:1.5rem;--ifm-scrollbar-size:7px;--ifm-scrollbar-track-background-color:#f1f1f1;--ifm-scrollbar-thumb-background-color:silver;--ifm-scrollbar-thumb-hover-background-color:#a7a7a7;--ifm-alert-background-color:inherit;--ifm-alert-border-color:inherit;--ifm-alert-border-radius:var(--ifm-global-radius);--ifm-alert-border-width:0px;--ifm-alert-border-left-width:5px;--ifm-alert-color:var(--ifm-font-color-base);--ifm-alert-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-alert-padding-vertical:var(--ifm-spacing-vertical);--ifm-alert-shadow:var(--ifm-global-shadow-lw);--ifm-avatar-intro-margin:1rem;--ifm-avatar-intro-alignment:inherit;--ifm-avatar-photo-size:3rem;--ifm-badge-background-color:inherit;--ifm-badge-border-color:inherit;--ifm-badge-border-radius:var(--ifm-global-radius);--ifm-badge-border-width:var(--ifm-global-border-width);--ifm-badge-color:var(--ifm-color-white);--ifm-badge-padding-horizontal:calc(var(--ifm-spacing-horizontal)*0.5);--ifm-badge-padding-vertical:calc(var(--ifm-spacing-vertical)*0.25);--ifm-breadcrumb-border-radius:1.5rem;--ifm-breadcrumb-spacing:0.5rem;--ifm-breadcrumb-color-active:var(--ifm-color-primary);--ifm-breadcrumb-item-background-active:var(--ifm-hover-overlay);--ifm-breadcrumb-padding-horizontal:0.8rem;--ifm-breadcrumb-padding-vertical:0.4rem;--ifm-breadcrumb-size-multiplier:1;--ifm-breadcrumb-separator:url('data:image/svg+xml;utf8,');--ifm-breadcrumb-separator-filter:none;--ifm-breadcrumb-separator-size:0.5rem;--ifm-breadcrumb-separator-size-multiplier:1.25;--ifm-button-background-color:inherit;--ifm-button-border-color:var(--ifm-button-background-color);--ifm-button-border-width:var(--ifm-global-border-width);--ifm-button-font-weight:var(--ifm-font-weight-bold);--ifm-button-padding-horizontal:1.5rem;--ifm-button-padding-vertical:0.375rem;--ifm-button-size-multiplier:1;--ifm-button-transition-duration:var(--ifm-transition-fast);--ifm-button-border-radius:calc(var(--ifm-global-radius)*var(--ifm-button-size-multiplier));--ifm-button-group-spacing:2px;--ifm-card-background-color:var(--ifm-background-surface-color);--ifm-card-border-radius:calc(var(--ifm-global-radius)*2);--ifm-card-horizontal-spacing:var(--ifm-global-spacing);--ifm-card-vertical-spacing:var(--ifm-global-spacing);--ifm-toc-border-color:var(--ifm-color-emphasis-300);--ifm-toc-link-color:var(--ifm-color-content-secondary);--ifm-toc-padding-vertical:0.5rem;--ifm-toc-padding-horizontal:0.5rem;--ifm-dropdown-background-color:var(--ifm-background-surface-color);--ifm-dropdown-font-weight:var(--ifm-font-weight-semibold);--ifm-dropdown-link-color:var(--ifm-font-color-base);--ifm-dropdown-hover-background-color:var(--ifm-hover-overlay);--ifm-footer-background-color:var(--ifm-color-emphasis-100);--ifm-footer-color:inherit;--ifm-footer-link-color:var(--ifm-color-emphasis-700);--ifm-footer-link-hover-color:var(--ifm-color-primary);--ifm-footer-link-horizontal-spacing:0.5rem;--ifm-footer-padding-horizontal:calc(var(--ifm-spacing-horizontal)*2);--ifm-footer-padding-vertical:calc(var(--ifm-spacing-vertical)*2);--ifm-footer-title-color:inherit;--ifm-footer-logo-max-width:min(30rem,90vw);--ifm-hero-background-color:var(--ifm-background-surface-color);--ifm-hero-text-color:var(--ifm-color-emphasis-800);--ifm-menu-color:var(--ifm-color-emphasis-700);--ifm-menu-color-active:var(--ifm-color-primary);--ifm-menu-color-background-active:var(--ifm-hover-overlay);--ifm-menu-color-background-hover:var(--ifm-hover-overlay);--ifm-menu-link-padding-horizontal:0.75rem;--ifm-menu-link-padding-vertical:0.375rem;--ifm-menu-link-sublist-icon:url('data:image/svg+xml;utf8,');--ifm-menu-link-sublist-icon-filter:none;--ifm-navbar-background-color:var(--ifm-background-surface-color);--ifm-navbar-height:3.75rem;--ifm-navbar-item-padding-horizontal:0.75rem;--ifm-navbar-item-padding-vertical:0.25rem;--ifm-navbar-link-color:var(--ifm-font-color-base);--ifm-navbar-link-active-color:var(--ifm-link-color);--ifm-navbar-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-navbar-padding-vertical:calc(var(--ifm-spacing-vertical)*0.5);--ifm-navbar-shadow:var(--ifm-global-shadow-lw);--ifm-navbar-search-input-background-color:var(--ifm-color-emphasis-200);--ifm-navbar-search-input-color:var(--ifm-color-emphasis-800);--ifm-navbar-search-input-placeholder-color:var(--ifm-color-emphasis-500);--ifm-navbar-search-input-icon:url('data:image/svg+xml;utf8,');--ifm-navbar-sidebar-width:83vw;--ifm-pagination-border-radius:var(--ifm-global-radius);--ifm-pagination-color-active:var(--ifm-color-primary);--ifm-pagination-font-size:1rem;--ifm-pagination-item-active-background:var(--ifm-hover-overlay);--ifm-pagination-page-spacing:0.2em;--ifm-pagination-padding-horizontal:calc(var(--ifm-spacing-horizontal)*1);--ifm-pagination-padding-vertical:calc(var(--ifm-spacing-vertical)*0.25);--ifm-pagination-nav-border-radius:var(--ifm-global-radius);--ifm-pagination-nav-color-hover:var(--ifm-color-primary);--ifm-pills-color-active:var(--ifm-color-primary);--ifm-pills-color-background-active:var(--ifm-hover-overlay);--ifm-pills-spacing:0.125rem;--ifm-tabs-color:var(--ifm-font-color-secondary);--ifm-tabs-color-active:var(--ifm-color-primary);--ifm-tabs-color-active-border:var(--ifm-tabs-color-active);--ifm-tabs-padding-horizontal:1rem;--ifm-tabs-padding-vertical:1rem;--docusaurus-progress-bar-color:var(--ifm-color-primary);--docusaurus-announcement-bar-height:auto;--docusaurus-collapse-button-bg:#0000;--docusaurus-collapse-button-bg-hover:#0000001a;--doc-sidebar-width:300px;--doc-sidebar-hidden-width:30px;--docusaurus-blog-social-icon-size:1rem;--docusaurus-tag-list-border:var(--ifm-color-emphasis-300)}.badge--danger,.badge--info,.badge--primary,.badge--secondary,.badge--success,.badge--warning{--ifm-badge-border-color:var(--ifm-badge-background-color)}.button--link,.button--outline{--ifm-button-background-color:#0000}html{background-color:var(--ifm-background-color);color:var(--ifm-font-color-base);color-scheme:var(--ifm-color-scheme);font:var(--ifm-font-size-base)/var(--ifm-line-height-base) var(--ifm-font-family-base);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;-webkit-text-size-adjust:100%;text-size-adjust:100%}iframe{border:0;color-scheme:auto}.container{margin:0 auto;max-width:var(--ifm-container-width)}.container--fluid{max-width:inherit}.row{display:flex;flex-wrap:wrap;margin:0 calc(var(--ifm-spacing-horizontal)*-1)}.list_eTzJ article:last-child,.margin-bottom--none,.margin-vert--none,.markdown>:last-child{margin-bottom:0!important}.margin-top--none,.margin-vert--none,.tabItem_LNqP{margin-top:0!important}.row--no-gutters{margin-left:0;margin-right:0}.margin-horiz--none,.margin-right--none{margin-right:0!important}.row--no-gutters>.col{padding-left:0;padding-right:0}.row--align-top{align-items:flex-start}.row--align-bottom{align-items:flex-end}.menuExternalLink_NmtK,.row--align-center{align-items:center}.row--align-stretch{align-items:stretch}.row--align-baseline{align-items:baseline}.col{--ifm-col-width:100%;flex:1 0;margin-left:0;max-width:var(--ifm-col-width)}.padding-bottom--none,.padding-vert--none{padding-bottom:0!important}.padding-top--none,.padding-vert--none{padding-top:0!important}.padding-horiz--none,.padding-left--none{padding-left:0!important}.padding-horiz--none,.padding-right--none{padding-right:0!important}.col[class*=col--]{flex:0 0 var(--ifm-col-width)}.col--1{--ifm-col-width:8.33333%}.col--offset-1{margin-left:8.33333%}.col--2{--ifm-col-width:16.66667%}.col--offset-2{margin-left:16.66667%}.col--3{--ifm-col-width:25%}.col--offset-3{margin-left:25%}.col--4{--ifm-col-width:33.33333%}.col--offset-4{margin-left:33.33333%}.col--5{--ifm-col-width:41.66667%}.col--offset-5{margin-left:41.66667%}.col--6{--ifm-col-width:50%}.col--offset-6{margin-left:50%}.col--7{--ifm-col-width:58.33333%}.col--offset-7{margin-left:58.33333%}.col--8{--ifm-col-width:66.66667%}.col--offset-8{margin-left:66.66667%}.col--9{--ifm-col-width:75%}.col--offset-9{margin-left:75%}.col--10{--ifm-col-width:83.33333%}.col--offset-10{margin-left:83.33333%}.col--11{--ifm-col-width:91.66667%}.col--offset-11{margin-left:91.66667%}.col--12{--ifm-col-width:100%}.col--offset-12{margin-left:100%}.margin-horiz--none,.margin-left--none{margin-left:0!important}.margin--none{margin:0!important}.margin-bottom--xs,.margin-vert--xs{margin-bottom:.25rem!important}.margin-top--xs,.margin-vert--xs{margin-top:.25rem!important}.margin-horiz--xs,.margin-left--xs{margin-left:.25rem!important}.margin-horiz--xs,.margin-right--xs{margin-right:.25rem!important}.margin--xs{margin:.25rem!important}.margin-bottom--sm,.margin-vert--sm{margin-bottom:.5rem!important}.margin-top--sm,.margin-vert--sm{margin-top:.5rem!important}.margin-horiz--sm,.margin-left--sm{margin-left:.5rem!important}.margin-horiz--sm,.margin-right--sm{margin-right:.5rem!important}.margin--sm{margin:.5rem!important}.margin-bottom--md,.margin-vert--md{margin-bottom:1rem!important}.margin-top--md,.margin-vert--md{margin-top:1rem!important}.margin-horiz--md,.margin-left--md{margin-left:1rem!important}.margin-horiz--md,.margin-right--md{margin-right:1rem!important}.margin--md{margin:1rem!important}.margin-bottom--lg,.margin-vert--lg{margin-bottom:2rem!important}.margin-top--lg,.margin-vert--lg{margin-top:2rem!important}.margin-horiz--lg,.margin-left--lg{margin-left:2rem!important}.margin-horiz--lg,.margin-right--lg{margin-right:2rem!important}.margin--lg{margin:2rem!important}.margin-bottom--xl,.margin-vert--xl{margin-bottom:5rem!important}.margin-top--xl,.margin-vert--xl{margin-top:5rem!important}.margin-horiz--xl,.margin-left--xl{margin-left:5rem!important}.margin-horiz--xl,.margin-right--xl{margin-right:5rem!important}.margin--xl{margin:5rem!important}.padding--none{padding:0!important}.padding-bottom--xs,.padding-vert--xs{padding-bottom:.25rem!important}.padding-top--xs,.padding-vert--xs{padding-top:.25rem!important}.padding-horiz--xs,.padding-left--xs{padding-left:.25rem!important}.padding-horiz--xs,.padding-right--xs{padding-right:.25rem!important}.padding--xs{padding:.25rem!important}.padding-bottom--sm,.padding-vert--sm{padding-bottom:.5rem!important}.padding-top--sm,.padding-vert--sm{padding-top:.5rem!important}.padding-horiz--sm,.padding-left--sm{padding-left:.5rem!important}.padding-horiz--sm,.padding-right--sm{padding-right:.5rem!important}.padding--sm{padding:.5rem!important}.padding-bottom--md,.padding-vert--md{padding-bottom:1rem!important}.padding-top--md,.padding-vert--md{padding-top:1rem!important}.padding-horiz--md,.padding-left--md{padding-left:1rem!important}.padding-horiz--md,.padding-right--md{padding-right:1rem!important}.padding--md{padding:1rem!important}.padding-bottom--lg,.padding-vert--lg{padding-bottom:2rem!important}.padding-top--lg,.padding-vert--lg{padding-top:2rem!important}.padding-horiz--lg,.padding-left--lg{padding-left:2rem!important}.padding-horiz--lg,.padding-right--lg{padding-right:2rem!important}.padding--lg{padding:2rem!important}.padding-bottom--xl,.padding-vert--xl{padding-bottom:5rem!important}.padding-top--xl,.padding-vert--xl{padding-top:5rem!important}.padding-horiz--xl,.padding-left--xl{padding-left:5rem!important}.padding-horiz--xl,.padding-right--xl{padding-right:5rem!important}.padding--xl{padding:5rem!important}code{background-color:var(--ifm-code-background);border:.1rem solid #0000001a;border-radius:var(--ifm-code-border-radius);font-family:var(--ifm-font-family-monospace);font-size:var(--ifm-code-font-size);padding:var(--ifm-code-padding-vertical) var(--ifm-code-padding-horizontal)}a code{color:inherit}pre{background-color:var(--ifm-pre-background);border-radius:var(--ifm-pre-border-radius);color:var(--ifm-pre-color);font:var(--ifm-code-font-size)/var(--ifm-pre-line-height) var(--ifm-font-family-monospace);padding:var(--ifm-pre-padding)}pre code{background-color:initial;border:none;font-size:100%;line-height:inherit;padding:0}kbd{background-color:var(--ifm-color-emphasis-0);border:1px solid var(--ifm-color-emphasis-400);border-radius:.2rem;box-shadow:inset 0 -1px 0 var(--ifm-color-emphasis-400);color:var(--ifm-color-emphasis-800);font:80% var(--ifm-font-family-monospace);padding:.15rem .3rem}h1,h2,h3,h4,h5,h6{color:var(--ifm-heading-color);font-family:var(--ifm-heading-font-family);font-weight:var(--ifm-heading-font-weight);line-height:var(--ifm-heading-line-height);margin:var(--ifm-heading-margin-top) 0 var(--ifm-heading-margin-bottom) 0}h1{font-size:var(--ifm-h1-font-size)}h2{font-size:var(--ifm-h2-font-size)}h3{font-size:var(--ifm-h3-font-size)}h4{font-size:var(--ifm-h4-font-size)}h5{font-size:var(--ifm-h5-font-size)}h6{font-size:var(--ifm-h6-font-size)}img{max-width:100%}img[align=right]{padding-left:var(--image-alignment-padding)}img[align=left]{padding-right:var(--image-alignment-padding)}.markdown{--ifm-h1-vertical-rhythm-top:3;--ifm-h2-vertical-rhythm-top:2;--ifm-h3-vertical-rhythm-top:1.5;--ifm-heading-vertical-rhythm-top:1.25;--ifm-h1-vertical-rhythm-bottom:1.25;--ifm-heading-vertical-rhythm-bottom:1}.markdown:after,.markdown:before{content:"";display:table}.markdown:after{clear:both}.markdown h1:first-child{--ifm-h1-font-size:3rem;margin-bottom:calc(var(--ifm-h1-vertical-rhythm-bottom)*var(--ifm-leading))}.markdown>h2{--ifm-h2-font-size:2rem;margin-top:calc(var(--ifm-h2-vertical-rhythm-top)*var(--ifm-leading))}.markdown>h3{--ifm-h3-font-size:1.5rem;margin-top:calc(var(--ifm-h3-vertical-rhythm-top)*var(--ifm-leading))}.markdown>h4,.markdown>h5,.markdown>h6{margin-top:calc(var(--ifm-heading-vertical-rhythm-top)*var(--ifm-leading))}.markdown>p,.markdown>pre,.markdown>ul,.tabList__CuJ{margin-bottom:var(--ifm-leading)}.markdown li>p{margin-top:var(--ifm-list-paragraph-margin)}.markdown li+li{margin-top:var(--ifm-list-item-margin)}ol,ul{margin:0 0 var(--ifm-list-margin);padding-left:var(--ifm-list-left-padding)}ol ol,ul ol{list-style-type:lower-roman}ol ol ol,ol ul ol,ul ol ol,ul ul ol{list-style-type:lower-alpha}table{border-collapse:collapse;display:block;margin-bottom:var(--ifm-spacing-vertical)}table thead tr{border-bottom:2px solid var(--ifm-table-border-color)}table thead,table tr:nth-child(2n){background-color:var(--ifm-table-stripe-background)}table tr{background-color:var(--ifm-table-background);border-top:var(--ifm-table-border-width) solid var(--ifm-table-border-color)}table td,table th{border:var(--ifm-table-border-width) solid var(--ifm-table-border-color);padding:var(--ifm-table-cell-padding)}table th{background-color:var(--ifm-table-head-background);color:var(--ifm-table-head-color);font-weight:var(--ifm-table-head-font-weight)}table td{color:var(--ifm-table-cell-color)}strong{font-weight:var(--ifm-font-weight-bold)}a{color:var(--ifm-link-color);text-decoration:var(--ifm-link-decoration)}a:hover{color:var(--ifm-link-hover-color);text-decoration:var(--ifm-link-hover-decoration)}.button:hover,.text--no-decoration,.text--no-decoration:hover,a:not([href]){-webkit-text-decoration:none;text-decoration:none}p{margin:0 0 var(--ifm-paragraph-margin-bottom)}blockquote{border-left:var(--ifm-blockquote-border-left-width) solid var(--ifm-blockquote-border-color);box-shadow:var(--ifm-blockquote-shadow);color:var(--ifm-blockquote-color);font-size:var(--ifm-blockquote-font-size);padding:var(--ifm-blockquote-padding-vertical) var(--ifm-blockquote-padding-horizontal)}blockquote>:first-child{margin-top:0}blockquote>:last-child{margin-bottom:0}hr{background-color:var(--ifm-hr-background-color);border:0;height:var(--ifm-hr-height);margin:var(--ifm-hr-margin-vertical) 0}.shadow--lw{box-shadow:var(--ifm-global-shadow-lw)!important}.shadow--md{box-shadow:var(--ifm-global-shadow-md)!important}.shadow--tl{box-shadow:var(--ifm-global-shadow-tl)!important}.text--primary,.wordWrapButtonEnabled_EoeP .wordWrapButtonIcon_Bwma{color:var(--ifm-color-primary)}.text--secondary{color:var(--ifm-color-secondary)}.text--success{color:var(--ifm-color-success)}.text--info{color:var(--ifm-color-info)}.text--warning{color:var(--ifm-color-warning)}.text--danger{color:var(--ifm-color-danger)}.text--center{text-align:center}.text--left{text-align:left}.text--justify{text-align:justify}.text--right{text-align:right}.text--capitalize{text-transform:capitalize}.text--lowercase{text-transform:lowercase}.admonitionHeading_Gvgb,.alert__heading,.text--uppercase{text-transform:uppercase}.text--light{font-weight:var(--ifm-font-weight-light)}.text--normal{font-weight:var(--ifm-font-weight-normal)}.text--semibold{font-weight:var(--ifm-font-weight-semibold)}.text--bold{font-weight:var(--ifm-font-weight-bold)}.text--italic{font-style:italic}.text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text--break{word-wrap:break-word!important;word-break:break-word!important}.clean-btn{background:none;border:none;color:inherit;cursor:pointer;font-family:inherit;padding:0}.alert,.alert .close{color:var(--ifm-alert-foreground-color)}.clean-list{padding-left:0}.alert--primary{--ifm-alert-background-color:var(--ifm-color-primary-contrast-background);--ifm-alert-background-color-highlight:#3578e526;--ifm-alert-foreground-color:var(--ifm-color-primary-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-primary-dark)}.alert--secondary{--ifm-alert-background-color:var(--ifm-color-secondary-contrast-background);--ifm-alert-background-color-highlight:#ebedf026;--ifm-alert-foreground-color:var(--ifm-color-secondary-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-secondary-dark)}.alert--success{--ifm-alert-background-color:var(--ifm-color-success-contrast-background);--ifm-alert-background-color-highlight:#00a40026;--ifm-alert-foreground-color:var(--ifm-color-success-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-success-dark)}.alert--info{--ifm-alert-background-color:var(--ifm-color-info-contrast-background);--ifm-alert-background-color-highlight:#54c7ec26;--ifm-alert-foreground-color:var(--ifm-color-info-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-info-dark)}.alert--warning{--ifm-alert-background-color:var(--ifm-color-warning-contrast-background);--ifm-alert-background-color-highlight:#ffba0026;--ifm-alert-foreground-color:var(--ifm-color-warning-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-warning-dark)}.alert--danger{--ifm-alert-background-color:var(--ifm-color-danger-contrast-background);--ifm-alert-background-color-highlight:#fa383e26;--ifm-alert-foreground-color:var(--ifm-color-danger-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-danger-dark)}.alert{--ifm-code-background:var(--ifm-alert-background-color-highlight);--ifm-link-color:var(--ifm-alert-foreground-color);--ifm-link-hover-color:var(--ifm-alert-foreground-color);--ifm-link-decoration:underline;--ifm-tabs-color:var(--ifm-alert-foreground-color);--ifm-tabs-color-active:var(--ifm-alert-foreground-color);--ifm-tabs-color-active-border:var(--ifm-alert-border-color);background-color:var(--ifm-alert-background-color);border:var(--ifm-alert-border-width) solid var(--ifm-alert-border-color);border-left-width:var(--ifm-alert-border-left-width);border-radius:var(--ifm-alert-border-radius);box-shadow:var(--ifm-alert-shadow);padding:var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal)}.alert__heading{align-items:center;display:flex;font:700 var(--ifm-h5-font-size)/var(--ifm-heading-line-height) var(--ifm-heading-font-family);margin-bottom:.5rem}.alert__icon{display:inline-flex;margin-right:.4em}.alert__icon svg{fill:var(--ifm-alert-foreground-color);stroke:var(--ifm-alert-foreground-color);stroke-width:0}.alert .close{margin:calc(var(--ifm-alert-padding-vertical)*-1) calc(var(--ifm-alert-padding-horizontal)*-1) 0 0;opacity:.75}.alert .close:focus,.alert .close:hover{opacity:1}.alert a{text-decoration-color:var(--ifm-alert-border-color)}.alert a:hover{text-decoration-thickness:2px}.avatar{column-gap:var(--ifm-avatar-intro-margin);display:flex}.avatar__photo{border-radius:50%;display:block;height:var(--ifm-avatar-photo-size);overflow:hidden;width:var(--ifm-avatar-photo-size)}.card--full-height,.navbar__logo img,body,html{height:100%}.avatar__photo--sm{--ifm-avatar-photo-size:2rem}.avatar__photo--lg{--ifm-avatar-photo-size:4rem}.avatar__photo--xl{--ifm-avatar-photo-size:6rem}.avatar__intro{display:flex;flex:1 1;flex-direction:column;justify-content:center;text-align:var(--ifm-avatar-intro-alignment)}.badge,.breadcrumbs__item,.breadcrumbs__link,.button,.dropdown>.navbar__link:after,.searchBarContainer_NW3z.searchIndexLoading_EJ1f .searchBarLoadingRing_YnHq{display:inline-block}.avatar__name{font:700 var(--ifm-h4-font-size)/var(--ifm-heading-line-height) var(--ifm-font-family-base)}.avatar__subtitle{margin-top:.25rem}.avatar--vertical{--ifm-avatar-intro-alignment:center;--ifm-avatar-intro-margin:0.5rem;align-items:center;flex-direction:column}.badge{background-color:var(--ifm-badge-background-color);border:var(--ifm-badge-border-width) solid var(--ifm-badge-border-color);border-radius:var(--ifm-badge-border-radius);color:var(--ifm-badge-color);font-size:75%;font-weight:var(--ifm-font-weight-bold);line-height:1;padding:var(--ifm-badge-padding-vertical) var(--ifm-badge-padding-horizontal)}.badge--primary{--ifm-badge-background-color:var(--ifm-color-primary)}.badge--secondary{--ifm-badge-background-color:var(--ifm-color-secondary);color:var(--ifm-color-black)}.breadcrumbs__link,.button.button--secondary.button--outline:not(.button--active):not(:hover){color:var(--ifm-font-color-base)}.badge--success{--ifm-badge-background-color:var(--ifm-color-success)}.badge--info{--ifm-badge-background-color:var(--ifm-color-info)}.badge--warning{--ifm-badge-background-color:var(--ifm-color-warning)}.badge--danger{--ifm-badge-background-color:var(--ifm-color-danger)}.breadcrumbs{margin-bottom:0;padding-left:0}.breadcrumbs__item:not(:last-child):after{background:var(--ifm-breadcrumb-separator) center;content:" ";display:inline-block;filter:var(--ifm-breadcrumb-separator-filter);height:calc(var(--ifm-breadcrumb-separator-size)*var(--ifm-breadcrumb-size-multiplier)*var(--ifm-breadcrumb-separator-size-multiplier));margin:0 var(--ifm-breadcrumb-spacing);opacity:.5;width:calc(var(--ifm-breadcrumb-separator-size)*var(--ifm-breadcrumb-size-multiplier)*var(--ifm-breadcrumb-separator-size-multiplier))}.breadcrumbs__item--active .breadcrumbs__link{background:var(--ifm-breadcrumb-item-background-active);color:var(--ifm-breadcrumb-color-active)}.breadcrumbs__link{border-radius:var(--ifm-breadcrumb-border-radius);font-size:calc(1rem*var(--ifm-breadcrumb-size-multiplier));padding:calc(var(--ifm-breadcrumb-padding-vertical)*var(--ifm-breadcrumb-size-multiplier)) calc(var(--ifm-breadcrumb-padding-horizontal)*var(--ifm-breadcrumb-size-multiplier));transition-duration:var(--ifm-transition-fast);transition-property:background,color}.breadcrumbs__link:any-link:hover,.breadcrumbs__link:link:hover,.breadcrumbs__link:visited:hover,area[href].breadcrumbs__link:hover{background:var(--ifm-breadcrumb-item-background-active);-webkit-text-decoration:none;text-decoration:none}.breadcrumbs--sm{--ifm-breadcrumb-size-multiplier:0.8}.breadcrumbs--lg{--ifm-breadcrumb-size-multiplier:1.2}.button{background-color:var(--ifm-button-background-color);border:var(--ifm-button-border-width) solid var(--ifm-button-border-color);border-radius:var(--ifm-button-border-radius);cursor:pointer;font-size:calc(.875rem*var(--ifm-button-size-multiplier));font-weight:var(--ifm-button-font-weight);line-height:1.5;padding:calc(var(--ifm-button-padding-vertical)*var(--ifm-button-size-multiplier)) calc(var(--ifm-button-padding-horizontal)*var(--ifm-button-size-multiplier));text-align:center;transition-duration:var(--ifm-button-transition-duration);transition-property:color,background,border-color;-webkit-user-select:none;user-select:none;white-space:nowrap}.button,.button:hover{color:var(--ifm-button-color)}.button--outline{--ifm-button-color:var(--ifm-button-border-color)}.button--outline:hover{--ifm-button-background-color:var(--ifm-button-border-color)}.button--link{--ifm-button-border-color:#0000;color:var(--ifm-link-color);text-decoration:var(--ifm-link-decoration)}.button--link.button--active,.button--link:active,.button--link:hover{color:var(--ifm-link-hover-color);text-decoration:var(--ifm-link-hover-decoration)}.dropdown__link--active,.dropdown__link:hover,.menu__link:hover,.navbar__brand:hover,.navbar__link--active,.navbar__link:hover,.pagination-nav__link:hover,.pagination__link:hover,.sidebarItemLink_mo7H:hover,.tag_zVej:hover{-webkit-text-decoration:none;text-decoration:none}.button.disabled,.button:disabled,.button[disabled]{opacity:.65;pointer-events:none}.button--sm{--ifm-button-size-multiplier:0.8}.button--lg{--ifm-button-size-multiplier:1.35}.button--block{display:block;width:100%}.button.button--secondary{color:var(--ifm-color-gray-900)}:where(.button--primary){--ifm-button-background-color:var(--ifm-color-primary);--ifm-button-border-color:var(--ifm-color-primary)}:where(.button--primary):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-primary-dark);--ifm-button-border-color:var(--ifm-color-primary-dark)}.button--primary.button--active,.button--primary:active{--ifm-button-background-color:var(--ifm-color-primary-darker);--ifm-button-border-color:var(--ifm-color-primary-darker)}:where(.button--secondary){--ifm-button-background-color:var(--ifm-color-secondary);--ifm-button-border-color:var(--ifm-color-secondary)}:where(.button--secondary):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-secondary-dark);--ifm-button-border-color:var(--ifm-color-secondary-dark)}.button--secondary.button--active,.button--secondary:active{--ifm-button-background-color:var(--ifm-color-secondary-darker);--ifm-button-border-color:var(--ifm-color-secondary-darker)}:where(.button--success){--ifm-button-background-color:var(--ifm-color-success);--ifm-button-border-color:var(--ifm-color-success)}:where(.button--success):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-success-dark);--ifm-button-border-color:var(--ifm-color-success-dark)}.button--success.button--active,.button--success:active{--ifm-button-background-color:var(--ifm-color-success-darker);--ifm-button-border-color:var(--ifm-color-success-darker)}:where(.button--info){--ifm-button-background-color:var(--ifm-color-info);--ifm-button-border-color:var(--ifm-color-info)}:where(.button--info):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-info-dark);--ifm-button-border-color:var(--ifm-color-info-dark)}.button--info.button--active,.button--info:active{--ifm-button-background-color:var(--ifm-color-info-darker);--ifm-button-border-color:var(--ifm-color-info-darker)}:where(.button--warning){--ifm-button-background-color:var(--ifm-color-warning);--ifm-button-border-color:var(--ifm-color-warning)}:where(.button--warning):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-warning-dark);--ifm-button-border-color:var(--ifm-color-warning-dark)}.button--warning.button--active,.button--warning:active{--ifm-button-background-color:var(--ifm-color-warning-darker);--ifm-button-border-color:var(--ifm-color-warning-darker)}:where(.button--danger){--ifm-button-background-color:var(--ifm-color-danger);--ifm-button-border-color:var(--ifm-color-danger)}:where(.button--danger):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-danger-dark);--ifm-button-border-color:var(--ifm-color-danger-dark)}.button--danger.button--active,.button--danger:active{--ifm-button-background-color:var(--ifm-color-danger-darker);--ifm-button-border-color:var(--ifm-color-danger-darker)}.button-group{display:inline-flex;gap:var(--ifm-button-group-spacing)}.button-group>.button:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.button-group>.button:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.button-group--block{display:flex;justify-content:stretch}.button-group--block>.button{flex-grow:1}.card{background-color:var(--ifm-card-background-color);border-radius:var(--ifm-card-border-radius);box-shadow:var(--ifm-global-shadow-lw);display:flex;flex-direction:column;overflow:hidden}.card__image{padding-top:var(--ifm-card-vertical-spacing)}.card__image:first-child{padding-top:0}.card__body,.card__footer,.card__header{padding:var(--ifm-card-vertical-spacing) var(--ifm-card-horizontal-spacing)}.card__body:not(:last-child),.card__footer:not(:last-child),.card__header:not(:last-child){padding-bottom:0}.card__body>:last-child,.card__footer>:last-child,.card__header>:last-child{margin-bottom:0}.card__footer{margin-top:auto}.table-of-contents{font-size:.8rem;margin-bottom:0;padding:var(--ifm-toc-padding-vertical) 0}.table-of-contents,.table-of-contents ul{list-style:none;padding-left:var(--ifm-toc-padding-horizontal)}.table-of-contents li{margin:var(--ifm-toc-padding-vertical) var(--ifm-toc-padding-horizontal)}.table-of-contents__left-border{border-left:1px solid var(--ifm-toc-border-color)}.table-of-contents__link{color:var(--ifm-toc-link-color);display:block}.table-of-contents__link--active,.table-of-contents__link--active code,.table-of-contents__link:hover,.table-of-contents__link:hover code{color:var(--ifm-color-primary);-webkit-text-decoration:none;text-decoration:none}.content_knG7 a,.hitFooter_E9YW a,.suggestion_fB_2.cursor_eG29 mark{-webkit-text-decoration:underline;text-decoration:underline}.close{color:var(--ifm-color-black);float:right;font-size:1.5rem;font-weight:var(--ifm-font-weight-bold);line-height:1;opacity:.5;padding:1rem;transition:opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.close:hover{opacity:.7}.close:focus,.theme-code-block-highlighted-line .codeLineNumber_Tfdd:before{opacity:.8}.dropdown{display:inline-flex;font-weight:var(--ifm-dropdown-font-weight);position:relative;vertical-align:top}.dropdown--hoverable:hover .dropdown__menu,.dropdown--show .dropdown__menu{opacity:1;pointer-events:all;transform:translateY(-1px);visibility:visible}.dropdown--right .dropdown__menu{left:inherit;right:0}.dropdown--nocaret .navbar__link:after{content:none!important}.dropdown__menu{background-color:var(--ifm-dropdown-background-color);border-radius:var(--ifm-global-radius);box-shadow:var(--ifm-global-shadow-md);left:0;max-height:80vh;min-width:10rem;opacity:0;overflow-y:auto;padding:.5rem;pointer-events:none;position:absolute;top:calc(100% - var(--ifm-navbar-item-padding-vertical) + .3rem);transform:translateY(-.625rem);transition-duration:var(--ifm-transition-fast);transition-property:opacity,transform,visibility;transition-timing-function:var(--ifm-transition-timing-default);visibility:hidden;z-index:var(--ifm-z-index-dropdown)}.sidebar_re4s,.tableOfContents_bqdL{max-height:calc(100vh - var(--ifm-navbar-height) - 2rem)}.menu__caret,.menu__link,.menu__list-item-collapsible{border-radius:.25rem;transition:background var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.dropdown__link{border-radius:.25rem;color:var(--ifm-dropdown-link-color);display:block;font-size:.875rem;margin-top:.2rem;padding:.25rem .5rem;white-space:nowrap}.dropdown__link--active,.dropdown__link:hover{background-color:var(--ifm-dropdown-hover-background-color);color:var(--ifm-dropdown-link-color)}.dropdown__link--active,.dropdown__link--active:hover{--ifm-dropdown-link-color:var(--ifm-link-color)}.dropdown>.navbar__link:after{border-color:currentcolor #0000;border-style:solid;border-width:.4em .4em 0;content:"";margin-left:.3em;position:relative;top:2px;transform:translateY(-50%)}.footer{background-color:var(--ifm-footer-background-color);color:var(--ifm-footer-color);padding:var(--ifm-footer-padding-vertical) var(--ifm-footer-padding-horizontal)}.footer--dark{--ifm-footer-background-color:#303846;--ifm-footer-color:var(--ifm-footer-link-color);--ifm-footer-link-color:var(--ifm-color-secondary);--ifm-footer-title-color:var(--ifm-color-white)}.footer__links{margin-bottom:1rem}.footer__link-item{color:var(--ifm-footer-link-color);line-height:2}.footer__link-item:hover{color:var(--ifm-footer-link-hover-color)}.footer__link-separator{margin:0 var(--ifm-footer-link-horizontal-spacing)}.footer__logo{margin-top:1rem;max-width:var(--ifm-footer-logo-max-width)}.footer__title{color:var(--ifm-footer-title-color);font:700 var(--ifm-h4-font-size)/var(--ifm-heading-line-height) var(--ifm-font-family-base);margin-bottom:var(--ifm-heading-margin-bottom)}.menu,.navbar__link{font-weight:var(--ifm-font-weight-semibold)}.docItemContainer_Djhp article>:first-child,.docItemContainer_Djhp header+*,.footer__item{margin-top:0}.admonitionContent_BuS1>:last-child,.cardContainer_fWXF :last-child,.collapsibleContent_i85q p:last-child,.details_lb9f>summary>p:last-child,.footer__items,.searchResultItem_U687>h2,.tabItem_Ymn6>:last-child{margin-bottom:0}.codeBlockStandalone_MEMb,[type=checkbox]{padding:0}.hero{align-items:center;background-color:var(--ifm-hero-background-color);color:var(--ifm-hero-text-color);display:flex;padding:4rem 2rem}.hero--primary{--ifm-hero-background-color:var(--ifm-color-primary);--ifm-hero-text-color:var(--ifm-font-color-base-inverse)}.hero--dark{--ifm-hero-background-color:#303846;--ifm-hero-text-color:var(--ifm-color-white)}.hero__title,.title_f1Hy{font-size:3rem}.hero__subtitle{font-size:1.5rem}.menu__list{margin:0;padding-left:0}.menu__caret,.menu__link{padding:var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal)}.menu__list .menu__list{flex:0 0 100%;margin-top:.25rem;padding-left:var(--ifm-menu-link-padding-horizontal)}.menu__list-item:not(:first-child){margin-top:.25rem}.menu__list-item--collapsed .menu__list{height:0;overflow:hidden}.details_lb9f[data-collapsed=false].isBrowser_bmU9>summary:before,.details_lb9f[open]:not(.isBrowser_bmU9)>summary:before,.menu__list-item--collapsed .menu__caret:before,.menu__list-item--collapsed .menu__link--sublist:after{transform:rotate(90deg)}.menu__list-item-collapsible{display:flex;flex-wrap:wrap;position:relative}.menu__caret:hover,.menu__link:hover,.menu__list-item-collapsible--active,.menu__list-item-collapsible:hover{background:var(--ifm-menu-color-background-hover)}.menu__list-item-collapsible .menu__link--active,.menu__list-item-collapsible .menu__link:hover{background:none!important}.menu__caret,.menu__link{align-items:center;display:flex}.menu__link{color:var(--ifm-menu-color);flex:1;line-height:1.25}.menu__link:hover{color:var(--ifm-menu-color)}.menu__caret:before,.menu__link--sublist-caret:after{content:"";height:1.25rem;transform:rotate(180deg);transition:transform var(--ifm-transition-fast) linear;width:1.25rem;filter:var(--ifm-menu-link-sublist-icon-filter)}.menu__link--sublist-caret:after{background:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem;margin-left:auto;min-width:1.25rem}.menu__link--active,.menu__link--active:hover{color:var(--ifm-menu-color-active)}.navbar__brand,.navbar__link{color:var(--ifm-navbar-link-color)}.menu__link--active:not(.menu__link--sublist){background-color:var(--ifm-menu-color-background-active)}.menu__caret:before{background:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem}.navbar--dark,html[data-theme=dark]{--ifm-menu-link-sublist-icon-filter:invert(100%) sepia(94%) saturate(17%) hue-rotate(223deg) brightness(104%) contrast(98%)}.navbar{background-color:var(--ifm-navbar-background-color);box-shadow:var(--ifm-navbar-shadow);height:var(--ifm-navbar-height);padding:var(--ifm-navbar-padding-vertical) var(--ifm-navbar-padding-horizontal)}.navbar,.navbar>.container,.navbar>.container-fluid{display:flex}.navbar--fixed-top{position:sticky;top:0;z-index:var(--ifm-z-index-fixed)}.navbar-sidebar,.navbar-sidebar__backdrop{bottom:0;opacity:0;position:fixed;transition-duration:var(--ifm-transition-fast);transition-timing-function:ease-in-out;left:0;top:0;visibility:hidden}.navbar__inner{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%}.navbar__brand{align-items:center;display:flex;margin-right:1rem;min-width:0}.navbar__brand:hover{color:var(--ifm-navbar-link-hover-color)}.announcementBarContent_xLdY,.navbar__title{flex:1 1 auto}.navbar__toggle{display:none;margin-right:.5rem}.navbar__logo{flex:0 0 auto;height:2rem;margin-right:.5rem}.navbar__items{align-items:center;display:flex;flex:1;min-width:0}.navbar__items--center{flex:0 0 auto}.navbar__items--center .navbar__brand{margin:0}.navbar__items--center+.navbar__items--right{flex:1}.navbar__items--right{flex:0 0 auto;justify-content:flex-end}.navbar__items--right>:last-child{padding-right:0}.navbar__item{display:inline-block;padding:var(--ifm-navbar-item-padding-vertical) var(--ifm-navbar-item-padding-horizontal)}#nprogress,.navbar__item.dropdown .navbar__link:not([href]){pointer-events:none}.navbar__link--active,.navbar__link:hover{color:var(--ifm-navbar-link-hover-color)}.navbar--dark,.navbar--primary{--ifm-menu-color:var(--ifm-color-gray-300);--ifm-navbar-link-color:var(--ifm-color-gray-100);--ifm-navbar-search-input-background-color:#ffffff1a;--ifm-navbar-search-input-placeholder-color:#ffffff80;color:var(--ifm-color-white)}.navbar--dark{--ifm-navbar-background-color:#242526;--ifm-menu-color-background-active:#ffffff0d;--ifm-navbar-search-input-color:var(--ifm-color-white)}.navbar--primary{--ifm-navbar-background-color:var(--ifm-color-primary);--ifm-navbar-link-hover-color:var(--ifm-color-white);--ifm-menu-color-active:var(--ifm-color-white);--ifm-navbar-search-input-color:var(--ifm-color-emphasis-500)}.navbar__search-input{appearance:none;background:var(--ifm-navbar-search-input-background-color) var(--ifm-navbar-search-input-icon) no-repeat .75rem center/1rem 1rem;border:none;border-radius:2rem;color:var(--ifm-navbar-search-input-color);cursor:text;display:inline-block;font-size:1rem;height:2rem;padding:0 .5rem 0 2.25rem;width:12.5rem}.navbar__search-input::placeholder{color:var(--ifm-navbar-search-input-placeholder-color)}.navbar-sidebar{background-color:var(--ifm-navbar-background-color);box-shadow:var(--ifm-global-shadow-md);transform:translate3d(-100%,0,0);transition-property:opacity,visibility,transform;width:var(--ifm-navbar-sidebar-width)}.navbar-sidebar--show .navbar-sidebar,.navbar-sidebar__items{transform:translateZ(0)}.navbar-sidebar--show .navbar-sidebar,.navbar-sidebar--show .navbar-sidebar__backdrop{opacity:1;visibility:visible}.navbar-sidebar__backdrop{background-color:#0009;right:0;transition-property:opacity,visibility}.navbar-sidebar__brand{align-items:center;box-shadow:var(--ifm-navbar-shadow);display:flex;flex:1;height:var(--ifm-navbar-height);padding:var(--ifm-navbar-padding-vertical) var(--ifm-navbar-padding-horizontal)}.navbar-sidebar__items{display:flex;height:calc(100% - var(--ifm-navbar-height));transition:transform var(--ifm-transition-fast) ease-in-out}.navbar-sidebar__items--show-secondary{transform:translate3d(calc((var(--ifm-navbar-sidebar-width))*-1),0,0)}.navbar-sidebar__item{flex-shrink:0;padding:.5rem;width:calc(var(--ifm-navbar-sidebar-width))}.navbar-sidebar__back{background:var(--ifm-menu-color-background-active);font-size:15px;font-weight:var(--ifm-button-font-weight);margin:0 0 .2rem -.5rem;padding:.6rem 1.5rem;position:relative;text-align:left;top:-.5rem;width:calc(100% + 1rem)}.navbar-sidebar__close{display:flex;margin-left:auto}.pagination{column-gap:var(--ifm-pagination-page-spacing);display:flex;font-size:var(--ifm-pagination-font-size);padding-left:0}.pagination--sm{--ifm-pagination-font-size:0.8rem;--ifm-pagination-padding-horizontal:0.8rem;--ifm-pagination-padding-vertical:0.2rem}.pagination--lg{--ifm-pagination-font-size:1.2rem;--ifm-pagination-padding-horizontal:1.2rem;--ifm-pagination-padding-vertical:0.3rem}.pagination__item{display:inline-flex}.pagination__item>span{padding:var(--ifm-pagination-padding-vertical)}.pagination__item--active .pagination__link{color:var(--ifm-pagination-color-active)}.pagination__item--active .pagination__link,.pagination__item:not(.pagination__item--active):hover .pagination__link{background:var(--ifm-pagination-item-active-background)}.pagination__item--disabled,.pagination__item[disabled]{opacity:.25;pointer-events:none}.pagination__link{border-radius:var(--ifm-pagination-border-radius);color:var(--ifm-font-color-base);display:inline-block;padding:var(--ifm-pagination-padding-vertical) var(--ifm-pagination-padding-horizontal);transition:background var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.pagination-nav{display:grid;grid-gap:var(--ifm-spacing-horizontal);gap:var(--ifm-spacing-horizontal);grid-template-columns:repeat(2,1fr)}.pagination-nav__link{border:1px solid var(--ifm-color-emphasis-300);border-radius:var(--ifm-pagination-nav-border-radius);display:block;height:100%;line-height:var(--ifm-heading-line-height);padding:var(--ifm-global-spacing);transition:border-color var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.pagination-nav__link:hover{border-color:var(--ifm-pagination-nav-color-hover)}.pagination-nav__link--next{grid-column:2/3;text-align:right}.pagination-nav__label{font-size:var(--ifm-h4-font-size);font-weight:var(--ifm-heading-font-weight);word-break:break-word}.pagination-nav__link--prev .pagination-nav__label:before{content:"« "}.pagination-nav__link--next .pagination-nav__label:after{content:" »"}.pagination-nav__sublabel{color:var(--ifm-color-content-secondary);font-size:var(--ifm-h5-font-size);font-weight:var(--ifm-font-weight-semibold);margin-bottom:.25rem}.pills__item,.tabs{font-weight:var(--ifm-font-weight-bold)}.pills{display:flex;gap:var(--ifm-pills-spacing);padding-left:0}.pills__item{border-radius:.5rem;cursor:pointer;display:inline-block;padding:.25rem 1rem;transition:background var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.pills__item--active{color:var(--ifm-pills-color-active)}.pills__item--active,.pills__item:not(.pills__item--active):hover{background:var(--ifm-pills-color-background-active)}.pills--block{justify-content:stretch}.pills--block .pills__item{flex-grow:1;text-align:center}.tabs{color:var(--ifm-tabs-color);display:flex;margin-bottom:0;overflow-x:auto;padding-left:0}.tabs__item{border-bottom:3px solid #0000;border-radius:var(--ifm-global-radius);cursor:pointer;display:inline-flex;padding:var(--ifm-tabs-padding-vertical) var(--ifm-tabs-padding-horizontal);transition:background-color var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.tabs__item--active{border-bottom-color:var(--ifm-tabs-color-active-border);border-bottom-left-radius:0;border-bottom-right-radius:0;color:var(--ifm-tabs-color-active)}.tabs__item:hover{background-color:var(--ifm-hover-overlay)}.tabs--block{justify-content:stretch}.tabs--block .tabs__item{flex-grow:1;justify-content:center}html[data-theme=dark]{--ifm-color-scheme:dark;--ifm-color-emphasis-0:var(--ifm-color-gray-1000);--ifm-color-emphasis-100:var(--ifm-color-gray-900);--ifm-color-emphasis-200:var(--ifm-color-gray-800);--ifm-color-emphasis-300:var(--ifm-color-gray-700);--ifm-color-emphasis-400:var(--ifm-color-gray-600);--ifm-color-emphasis-600:var(--ifm-color-gray-400);--ifm-color-emphasis-700:var(--ifm-color-gray-300);--ifm-color-emphasis-800:var(--ifm-color-gray-200);--ifm-color-emphasis-900:var(--ifm-color-gray-100);--ifm-color-emphasis-1000:var(--ifm-color-gray-0);--ifm-background-color:#1b1b1d;--ifm-background-surface-color:#242526;--ifm-hover-overlay:#ffffff0d;--ifm-color-content:#e3e3e3;--ifm-color-content-secondary:#fff;--ifm-breadcrumb-separator-filter:invert(64%) sepia(11%) saturate(0%) hue-rotate(149deg) brightness(99%) contrast(95%);--ifm-code-background:#ffffff1a;--ifm-scrollbar-track-background-color:#444;--ifm-scrollbar-thumb-background-color:#686868;--ifm-scrollbar-thumb-hover-background-color:#7a7a7a;--ifm-table-stripe-background:#ffffff12;--ifm-toc-border-color:var(--ifm-color-emphasis-200);--ifm-color-primary-contrast-background:#102445;--ifm-color-primary-contrast-foreground:#ebf2fc;--ifm-color-secondary-contrast-background:#474748;--ifm-color-secondary-contrast-foreground:#fdfdfe;--ifm-color-success-contrast-background:#003100;--ifm-color-success-contrast-foreground:#e6f6e6;--ifm-color-info-contrast-background:#193c47;--ifm-color-info-contrast-foreground:#eef9fd;--ifm-color-warning-contrast-background:#4d3800;--ifm-color-warning-contrast-foreground:#fff8e6;--ifm-color-danger-contrast-background:#4b1113;--ifm-color-danger-contrast-foreground:#ffebec}#nprogress .bar{background:var(--docusaurus-progress-bar-color);height:2px;left:0;position:fixed;top:0;width:100%;z-index:1031}#nprogress .peg{box-shadow:0 0 10px var(--docusaurus-progress-bar-color),0 0 5px var(--docusaurus-progress-bar-color);height:100%;opacity:1;position:absolute;right:0;transform:rotate(3deg) translateY(-4px);width:100px}.backToTopButton_sjWU{background-color:var(--ifm-color-emphasis-200);border-radius:50%;bottom:1.3rem;box-shadow:var(--ifm-global-shadow-lw);height:3rem;opacity:0;position:fixed;right:1.3rem;transform:scale(0);transition:all var(--ifm-transition-fast) var(--ifm-transition-timing-default);visibility:hidden;width:3rem;z-index:calc(var(--ifm-z-index-fixed) - 1)}.backToTopButton_sjWU:after{background-color:var(--ifm-color-emphasis-1000);content:" ";display:inline-block;height:100%;-webkit-mask:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem no-repeat;mask:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem no-repeat;width:100%}.backToTopButtonShow_xfvO{opacity:1;transform:scale(1);visibility:visible}.skipToContent_fXgn{background-color:var(--ifm-background-surface-color);color:var(--ifm-color-emphasis-900);left:100%;padding:calc(var(--ifm-global-spacing)/2) var(--ifm-global-spacing);position:fixed;top:1rem;z-index:calc(var(--ifm-z-index-fixed) + 1)}.skipToContent_fXgn:focus{box-shadow:var(--ifm-global-shadow-md);left:1rem}.closeButton_CVFx{line-height:0;padding:0}.content_knG7{font-size:85%;padding:5px 0;text-align:center}.content_knG7 a{color:inherit}.announcementBar_mb4j{align-items:center;background-color:var(--ifm-color-white);border-bottom:1px solid var(--ifm-color-emphasis-100);color:var(--ifm-color-black);display:flex;height:var(--docusaurus-announcement-bar-height)}#__docusaurus-base-url-issue-banner-container,.docSidebarContainer_YfHR,.hideAction_vcyE>svg,.navbarSearchContainer_Bca1:empty,.sidebarLogo_isFc,.themedComponent_mlkZ,[data-theme=dark] .lightToggleIcon_pyhR,[data-theme=light] .darkToggleIcon_wfgR,html[data-announcement-bar-initially-dismissed=true] .announcementBar_mb4j{display:none}.announcementBarPlaceholder_vyr4{flex:0 0 10px}.announcementBarClose_gvF7{align-self:stretch;flex:0 0 30px}.toggle_vylO{height:2rem;width:2rem}.toggleButton_gllP{align-items:center;border-radius:50%;display:flex;height:100%;justify-content:center;transition:background var(--ifm-transition-fast);width:100%}.toggleButton_gllP:hover{background:var(--ifm-color-emphasis-200)}.toggleButtonDisabled_aARS{cursor:not-allowed}.darkNavbarColorModeToggle_X3D1:hover{background:var(--ifm-color-gray-800)}[data-theme=dark] .themedComponent--dark_xIcU,[data-theme=light] .themedComponent--light_NVdE,html:not([data-theme]) .themedComponent--light_NVdE{display:initial}[data-theme=dark]:root{--docusaurus-collapse-button-bg:#ffffff0d;--docusaurus-collapse-button-bg-hover:#ffffff1a}.collapseSidebarButton_PEFL{display:none;margin:0}.iconExternalLink_nPIU{margin-left:.3rem}.docMainContainer_TBSr,.docRoot_UBD9{display:flex;width:100%}.docsWrapper_hBAB{display:flex;flex:1 0 auto}.dropdownNavbarItemMobile_S0Fm{cursor:pointer}.iconLanguage_nlXk{margin-right:5px;vertical-align:text-bottom}.searchBar_RVTs .dropdownMenu_qbY6{background:var(--search-local-modal-background,#f5f6f7);border-radius:6px;box-shadow:var(--search-local-modal-shadow,inset 1px 1px 0 0 #ffffff80,0 3px 8px 0 #555a64);left:auto!important;margin-top:8px;padding:var(--search-local-spacing,12px);position:relative;right:0!important;width:var(--search-local-modal-width,560px)}html[data-theme=dark] .searchBar_RVTs .dropdownMenu_qbY6{background:var(--search-local-modal-background,var(--ifm-background-color));box-shadow:var(--search-local-modal-shadow,inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309)}.searchBar_RVTs .dropdownMenu_qbY6 .suggestion_fB_2{align-items:center;background:var(--search-local-hit-background,#fff);border-radius:4px;box-shadow:var(--search-local-hit-shadow,0 1px 3px 0 #d4d9e1);color:var(--search-local-hit-color,#444950);cursor:pointer;display:flex;flex-direction:row;height:var(--search-local-hit-height,56px);padding:0 var(--search-local-spacing,12px);width:100%}.hitTree_kk6K,.noResults_l6Q3{align-items:center;display:flex}html[data-theme=dark] .dropdownMenu_qbY6 .suggestion_fB_2{background:var(--search-local-hit-background,var(--ifm-color-emphasis-100));box-shadow:var(--search-local-hit-shadow,none);color:var(--search-local-hit-color,var(--ifm-font-color-base))}.searchBar_RVTs .dropdownMenu_qbY6 .suggestion_fB_2:not(:last-child){margin-bottom:4px}.searchBar_RVTs .dropdownMenu_qbY6 .suggestion_fB_2.cursor_eG29{background-color:var(--search-local-highlight-color,var(--ifm-color-primary))}.hitFooter_E9YW a,.hitIcon_a7Zy,.hitPath_ieM4,.hitTree_kk6K,.noResultsIcon_EBY5{color:var(--search-local-muted-color,#969faf)}html[data-theme=dark] .hitIcon_a7Zy,html[data-theme=dark] .hitPath_ieM4,html[data-theme=dark] .hitTree_kk6K,html[data-theme=dark] .noResultsIcon_EBY5{color:var(--search-local-muted-color,var(--ifm-color-secondary-darkest))}.hitTree_kk6K>svg{height:var(--search-local-hit-height,56px);opacity:.5;width:24px}.hitIcon_a7Zy,.hitTree_kk6K>svg{stroke-width:var(--search-local-icon-stroke-width,1.4)}.hitAction_NqkB,.hitIcon_a7Zy{height:20px;width:20px}.hitWrapper_sAK8{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;margin:0 8px;overflow-x:hidden;width:80%}.hitWrapper_sAK8 mark{background:none;color:var(--search-local-highlight-color,var(--ifm-color-primary))}.hitTitle_vyVt{font-size:.9em}.hitPath_ieM4{font-size:.75em}.hitPath_ieM4,.hitTitle_vyVt{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.noResults_l6Q3{flex-direction:column;justify-content:center;padding:var(--search-local-spacing,12px) 0}.noResultsIcon_EBY5{margin-bottom:var(--search-local-spacing,12px)}.hitFooter_E9YW{font-size:.85em;margin-top:var(--search-local-spacing,12px);text-align:center}.cursor_eG29 .hideAction_vcyE>svg,.tocCollapsibleContent_vkbj a{display:block}.suggestion_fB_2.cursor_eG29,.suggestion_fB_2.cursor_eG29 .hitIcon_a7Zy,.suggestion_fB_2.cursor_eG29 .hitPath_ieM4,.suggestion_fB_2.cursor_eG29 .hitTree_kk6K,.suggestion_fB_2.cursor_eG29 mark{color:var(--search-local-hit-active-color,var(--ifm-color-white))!important}.searchBarContainer_NW3z{margin-left:16px}.searchBarContainer_NW3z .searchBarLoadingRing_YnHq{display:none;left:10px;position:absolute;top:6px}.searchBarContainer_NW3z .searchClearButton_qk4g{background:none;border:none;line-height:1rem;padding:0;position:absolute;right:.8rem;top:50%;transform:translateY(-50%)}.navbar__search{position:relative}.searchIndexLoading_EJ1f .navbar__search-input{background-image:none}.searchHintContainer_Pkmr{align-items:center;display:flex;gap:4px;height:100%;justify-content:center;pointer-events:none;position:absolute;right:10px;top:0}.searchHint_iIMx{background-color:var(--ifm-navbar-search-input-background-color);border:1px solid var(--ifm-color-emphasis-500);box-shadow:inset 0 -1px 0 var(--ifm-color-emphasis-500);color:var(--ifm-navbar-search-input-placeholder-color)}html[dir=rtl] .searchHintContainer_Pkmr{left:10px;right:auto}html[dir=rtl] .searchBarContainer_NW3z .searchClearButton_qk4g{left:.8rem;right:auto}html[dir=rtl] .searchBarContainer_NW3z .searchBarLoadingRing_YnHq{left:auto;right:10px}html[dir=rtl] .navbar__search-input{padding:0 2.25em 0 .5em}.loadingRing_RJI3{display:inline-block;height:20px;opacity:var(--search-local-loading-icon-opacity,.5);position:relative;width:20px}.authorSocialIcon_XYv3,.authorSocialLink_owbf,.authorSocials_rSDt{height:var(--docusaurus-blog-social-icon-size)}.loadingRing_RJI3 div{animation:1.2s cubic-bezier(.5,0,.5,1) infinite a;border:2px solid var(--search-load-loading-icon-color,var(--ifm-navbar-search-input-color));border-color:var(--search-load-loading-icon-color,var(--ifm-navbar-search-input-color)) #0000 #0000 #0000;border-radius:50%;display:block;height:16px;margin:2px;position:absolute;width:16px}.loadingRing_RJI3 div:first-child{animation-delay:-.45s}.loadingRing_RJI3 div:nth-child(2){animation-delay:-.3s}.loadingRing_RJI3 div:nth-child(3){animation-delay:-.15s}@keyframes a{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.navbarHideable_m1mJ{transition:transform var(--ifm-transition-fast) ease}.navbarHidden_jGov{transform:translate3d(0,calc(-100% - 2px),0)}.errorBoundaryError_a6uf{color:red;white-space:pre-wrap}.errorBoundaryFallback_VBag{color:red;padding:.55rem}.footerLogoLink_BH7S{opacity:.5;transition:opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.footerLogoLink_BH7S:hover,.hash-link:focus,:hover>.hash-link{opacity:1}body:not(.navigation-with-keyboard) :not(input):focus{outline:0}.anchorWithStickyNavbar_LWe7{scroll-margin-top:calc(var(--ifm-navbar-height) + .5rem)}.anchorWithHideOnScrollNavbar_WYt5{scroll-margin-top:.5rem}.hash-link{opacity:0;padding-left:.5rem;transition:opacity var(--ifm-transition-fast);-webkit-user-select:none;user-select:none}.hash-link:before{content:"#"}.mainWrapper_z2l0{display:flex;flex:1 0 auto;flex-direction:column}.docusaurus-mt-lg{margin-top:3rem}#__docusaurus{display:flex;flex-direction:column;min-height:100%}.sidebar_re4s{overflow-y:auto;position:sticky;top:calc(var(--ifm-navbar-height) + 2rem)}.authorSocials_rSDt,.authorTitle_nd0D{overflow:hidden;-webkit-box-orient:vertical}.sidebarItemTitle_pO2u{font-size:var(--ifm-h3-font-size);font-weight:var(--ifm-font-weight-bold)}.container_mt6G,.sidebarItemList_Yudw{font-size:.9rem}.sidebarItem__DBe{margin-top:.7rem}.sidebarItemLink_mo7H{color:var(--ifm-font-color-base);display:block}.sidebarItemLinkActive_I1ZP{color:var(--ifm-color-primary)!important}.yearGroupHeading_rMGB{margin-bottom:.4rem;margin-top:1.6rem}.yearGroupHeading_QT03{margin:1rem .75rem .5rem}.cardContainer_fWXF{--ifm-link-color:var(--ifm-color-emphasis-800);--ifm-link-hover-color:var(--ifm-color-emphasis-700);--ifm-link-hover-decoration:none;border:1px solid var(--ifm-color-emphasis-200);box-shadow:0 1.5px 3px 0 #00000026;transition:all var(--ifm-transition-fast) ease;transition-property:border,box-shadow}.cardContainer_fWXF:hover{border-color:var(--ifm-color-primary);box-shadow:0 3px 6px 0 #0003}.cardTitle_rnsV{font-size:1.2rem}.cardDescription_PWke{font-size:.8rem}.searchContextInput_mXoe,.searchQueryInput_CFBF{background:var(--ifm-background-color);border:var(--ifm-global-border-width) solid var(--ifm-color-content-secondary);border-radius:var(--ifm-global-radius);color:var(--ifm-font-color-base);font-size:var(--ifm-font-size-base);margin-bottom:1rem;padding:.5rem;width:100%}.authorSocialIcon_XYv3,.authorSocialLink_owbf{width:var(--docusaurus-blog-social-icon-size)}.searchResultItem_U687{border-bottom:1px solid #dfe3e8;padding:1rem 0}.searchResultItemPath_uIbk{color:var(--ifm-color-content-secondary);font-size:.8rem;margin:.5rem 0 0}.searchResultItemSummary_oZHr{font-style:italic;margin:.5rem 0 0}[data-theme=dark] .githubSvg_Uu4N,[data-theme=dark] .xSvg_y3PF{fill:var(--light)}[data-theme=light] .githubSvg_Uu4N,[data-theme=light] .xSvg_y3PF{fill:var(--dark)}.authorSocials_rSDt{align-items:center;display:flex;flex-wrap:wrap;line-clamp:1;-webkit-line-clamp:1}.authorSocialLink_owbf,.authorSocials_rSDt{line-height:0}.authorSocialLink_owbf{margin-right:.4rem}.authorImage_XqGP{--ifm-avatar-photo-size:3.6rem}.author-as-h1_n9oJ .authorImage_XqGP{--ifm-avatar-photo-size:7rem}.author-as-h2_gXvM .authorImage_XqGP{--ifm-avatar-photo-size:5.4rem}.authorDetails_lV9A{align-items:flex-start;display:flex;flex-direction:column;justify-content:space-around}.authorName_yefp{display:flex;flex-direction:row;font-size:1.1rem;line-height:1.1rem}.author-as-h1_n9oJ .authorName_yefp{display:inline;font-size:2.4rem;line-height:2.4rem}.author-as-h2_gXvM .authorName_yefp{display:inline;font-size:1.4rem;line-height:1.4rem}.authorTitle_nd0D{display:-webkit-box;font-size:.8rem;line-height:1rem;line-clamp:1;-webkit-line-clamp:1}.author-as-h1_n9oJ .authorTitle_nd0D{font-size:1.2rem;line-height:1.6rem}.author-as-h2_gXvM .authorTitle_nd0D{font-size:1rem;line-height:1.3rem}.authorBlogPostCount_iiJ5{background:var(--ifm-color-secondary);border-radius:var(--ifm-global-radius);color:var(--ifm-color-black);font-size:.8rem;line-height:1.2;margin-left:.3rem;padding:.1rem .4rem}.buttonGroup__atx button,.codeBlockContainer_Ckt0{background:var(--prism-background-color);color:var(--prism-color)}.authorCol_Hf19{max-width:inherit!important}.imageOnlyAuthorRow_pa_O{display:flex;flex-flow:row wrap}.imageOnlyAuthorCol_G86a{margin-left:.3rem;margin-right:.3rem}.codeBlockContainer_Ckt0{border-radius:var(--ifm-code-border-radius);box-shadow:var(--ifm-global-shadow-lw);margin-bottom:var(--ifm-leading)}.codeBlockContent_biex{border-radius:inherit;direction:ltr;position:relative}.codeBlockTitle_Ktv7{border-bottom:1px solid var(--ifm-color-emphasis-300);border-top-left-radius:inherit;border-top-right-radius:inherit;font-size:var(--ifm-code-font-size);font-weight:500;padding:.75rem var(--ifm-pre-padding)}.codeBlock_bY9V{--ifm-pre-background:var(--prism-background-color);margin:0;padding:0}.codeBlockTitle_Ktv7+.codeBlockContent_biex .codeBlock_bY9V{border-top-left-radius:0;border-top-right-radius:0}.codeBlockLines_e6Vv{float:left;font:inherit;min-width:100%;padding:var(--ifm-pre-padding)}.codeBlockLinesWithNumbering_o6Pm{display:table;padding:var(--ifm-pre-padding) 0}.buttonGroup__atx{column-gap:.2rem;display:flex;position:absolute;right:calc(var(--ifm-pre-padding)/2);top:calc(var(--ifm-pre-padding)/2)}.buttonGroup__atx button{align-items:center;border:1px solid var(--ifm-color-emphasis-300);border-radius:var(--ifm-global-radius);display:flex;line-height:0;opacity:0;padding:.4rem;transition:opacity var(--ifm-transition-fast) ease-in-out}.buttonGroup__atx button:focus-visible,.buttonGroup__atx button:hover{opacity:1!important}.theme-code-block:hover .buttonGroup__atx button{opacity:.4}:where(:root){--docusaurus-highlighted-code-line-bg:#484d5b}:where([data-theme=dark]){--docusaurus-highlighted-code-line-bg:#646464}.theme-code-block-highlighted-line{background-color:var(--docusaurus-highlighted-code-line-bg);display:block;margin:0 calc(var(--ifm-pre-padding)*-1);padding:0 var(--ifm-pre-padding)}.codeLine_lJS_{counter-increment:a;display:table-row}.codeLineNumber_Tfdd{background:var(--ifm-pre-background);display:table-cell;left:0;overflow-wrap:normal;padding:0 var(--ifm-pre-padding);position:sticky;text-align:right;width:1%}.codeLineNumber_Tfdd:before{content:counter(a);opacity:.4}.codeLineContent_feaV{padding-right:var(--ifm-pre-padding)}.theme-code-block:hover .copyButtonCopied_obH4{opacity:1!important}.copyButtonIcons_eSgA{height:1.125rem;position:relative;width:1.125rem}.copyButtonIcon_y97N,.copyButtonSuccessIcon_LjdS{left:0;position:absolute;top:0;fill:currentColor;height:inherit;opacity:inherit;transition:all var(--ifm-transition-fast) ease;width:inherit}.copyButtonSuccessIcon_LjdS{color:#00d600;left:50%;opacity:0;top:50%;transform:translate(-50%,-50%) scale(.33)}.copyButtonCopied_obH4 .copyButtonIcon_y97N{opacity:0;transform:scale(.33)}.copyButtonCopied_obH4 .copyButtonSuccessIcon_LjdS{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:75ms}.tag_zVej{border:1px solid var(--docusaurus-tag-list-border);transition:border var(--ifm-transition-fast)}.tag_zVej:hover{--docusaurus-tag-list-border:var(--ifm-link-color)}.tagRegular_sFm0{border-radius:var(--ifm-global-radius);font-size:90%;padding:.2rem .5rem .3rem}.tagWithCount_h2kH{align-items:center;border-left:0;display:flex;padding:0 .5rem 0 1rem;position:relative}.tagWithCount_h2kH:after,.tagWithCount_h2kH:before{border:1px solid var(--docusaurus-tag-list-border);content:"";position:absolute;top:50%;transition:inherit}.tagWithCount_h2kH:before{border-bottom:0;border-right:0;height:1.18rem;right:100%;transform:translate(50%,-50%) rotate(-45deg);width:1.18rem}.tagWithCount_h2kH:after{border-radius:50%;height:.5rem;left:0;transform:translateY(-50%);width:.5rem}.tagWithCount_h2kH span{background:var(--ifm-color-secondary);border-radius:var(--ifm-global-radius);color:var(--ifm-color-black);font-size:.7rem;line-height:1.2;margin-left:.3rem;padding:.1rem .4rem}.tag_Nnez{display:inline-block;margin:.5rem .5rem 0 1rem}.wordWrapButtonIcon_Bwma{height:1.2rem;width:1.2rem}.tags_jXut{display:inline}.tag_QGVx{display:inline-block;margin:0 .4rem .5rem 0}.iconEdit_Z9Sw{margin-right:.3em;vertical-align:sub}.lastUpdated_JAkA{font-size:smaller;font-style:italic;margin-top:.2rem}.tocCollapsibleButton_TO0P{align-items:center;display:flex;font-size:inherit;justify-content:space-between;padding:.4rem .8rem;width:100%}.tocCollapsibleButton_TO0P:after{background:var(--ifm-menu-link-sublist-icon) 50% 50%/2rem 2rem no-repeat;content:"";filter:var(--ifm-menu-link-sublist-icon-filter);height:1.25rem;transform:rotate(180deg);transition:transform var(--ifm-transition-fast);width:1.25rem}.tocCollapsibleButtonExpanded_MG3E:after,.tocCollapsibleExpanded_sAul{transform:none}.tocCollapsible_ETCw{background-color:var(--ifm-menu-color-background-active);border-radius:var(--ifm-global-radius);margin:1rem 0}.tocCollapsibleContent_vkbj>ul{border-left:none;border-top:1px solid var(--ifm-color-emphasis-300);font-size:15px;padding:.2rem 0}.tocCollapsibleContent_vkbj ul li{margin:.4rem .8rem}.details_lb9f{--docusaurus-details-summary-arrow-size:0.38rem;--docusaurus-details-transition:transform 200ms ease;--docusaurus-details-decoration-color:grey}.details_lb9f>summary{cursor:pointer;padding-left:1rem;position:relative}.details_lb9f>summary::-webkit-details-marker{display:none}.details_lb9f>summary:before{border-color:#0000 #0000 #0000 var(--docusaurus-details-decoration-color);border-style:solid;border-width:var(--docusaurus-details-summary-arrow-size);content:"";left:0;position:absolute;top:.45rem;transform:rotate(0);transform-origin:calc(var(--docusaurus-details-summary-arrow-size)/2) 50%;transition:var(--docusaurus-details-transition)}.collapsibleContent_i85q{border-top:1px solid var(--docusaurus-details-decoration-color);margin-top:1rem;padding-top:1rem}.details_b_Ee{--docusaurus-details-decoration-color:var(--ifm-alert-border-color);--docusaurus-details-transition:transform var(--ifm-transition-fast) ease;border:1px solid var(--ifm-alert-border-color);margin:0 0 var(--ifm-spacing-vertical)}:not(.containsTaskList_mC6p>li)>.containsTaskList_mC6p{padding-left:0}.img_ev3q{height:auto}.tableOfContents_bqdL{overflow-y:auto;position:sticky;top:calc(var(--ifm-navbar-height) + 1rem)}.admonition_xJq3{margin-bottom:1em}.admonitionHeading_Gvgb{font:var(--ifm-heading-font-weight) var(--ifm-h5-font-size)/var(--ifm-heading-line-height) var(--ifm-heading-font-family)}.admonitionHeading_Gvgb:not(:last-child){margin-bottom:.3rem}.admonitionHeading_Gvgb code{text-transform:none}.admonitionIcon_Rf37{display:inline-block;margin-right:.4em;vertical-align:middle}.admonitionIcon_Rf37 svg{display:inline-block;height:1.6em;width:1.6em;fill:var(--ifm-alert-foreground-color)}.breadcrumbHomeIcon_YNFT{height:1.1rem;position:relative;top:1px;vertical-align:top;width:1.1rem}.breadcrumbsContainer_Z_bl{--ifm-breadcrumb-size-multiplier:0.8;margin-bottom:.8rem}.title_kItE{--ifm-h1-font-size:3rem;margin-bottom:calc(var(--ifm-leading)*1.25)}@media (min-width:997px){.collapseSidebarButton_PEFL,.expandButton_TmdG{background-color:var(--docusaurus-collapse-button-bg)}:root{--docusaurus-announcement-bar-height:30px}.announcementBarClose_gvF7,.announcementBarPlaceholder_vyr4{flex-basis:50px}.collapseSidebarButton_PEFL{border:1px solid var(--ifm-toc-border-color);border-radius:0;bottom:0;display:block!important;height:40px;position:sticky}.collapseSidebarButtonIcon_kv0_{margin-top:4px;transform:rotate(180deg)}.expandButtonIcon_i1dp,[dir=rtl] .collapseSidebarButtonIcon_kv0_{transform:rotate(0)}.collapseSidebarButton_PEFL:focus,.collapseSidebarButton_PEFL:hover,.expandButton_TmdG:focus,.expandButton_TmdG:hover{background-color:var(--docusaurus-collapse-button-bg-hover)}.menuHtmlItem_M9Kj{padding:var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal)}.menu_SIkG{flex-grow:1;padding:.5rem}@supports (scrollbar-gutter:stable){.menu_SIkG{padding:.5rem 0 .5rem .5rem;scrollbar-gutter:stable}}.menuWithAnnouncementBar_GW3s{margin-bottom:var(--docusaurus-announcement-bar-height)}.sidebar_njMd{display:flex;flex-direction:column;height:100%;padding-top:var(--ifm-navbar-height);width:var(--doc-sidebar-width)}.sidebarWithHideableNavbar_wUlq{padding-top:0}.sidebarHidden_VK0M{opacity:0;visibility:hidden}.sidebarLogo_isFc{align-items:center;color:inherit!important;display:flex!important;margin:0 var(--ifm-navbar-padding-horizontal);max-height:var(--ifm-navbar-height);min-height:var(--ifm-navbar-height);-webkit-text-decoration:none!important;text-decoration:none!important}.sidebarLogo_isFc img{height:2rem;margin-right:.5rem}.expandButton_TmdG{align-items:center;display:flex;height:100%;justify-content:center;position:absolute;right:0;top:0;transition:background-color var(--ifm-transition-fast) ease;width:100%}[dir=rtl] .expandButtonIcon_i1dp{transform:rotate(180deg)}.docSidebarContainer_YfHR{border-right:1px solid var(--ifm-toc-border-color);clip-path:inset(0);display:block;margin-top:calc(var(--ifm-navbar-height)*-1);transition:width var(--ifm-transition-fast) ease;width:var(--doc-sidebar-width);will-change:width}.docSidebarContainerHidden_DPk8{cursor:pointer;width:var(--doc-sidebar-hidden-width)}.sidebarViewport_aRkj{height:100%;max-height:100vh;position:sticky;top:0}.docMainContainer_TBSr{flex-grow:1;max-width:calc(100% - var(--doc-sidebar-width))}.docMainContainerEnhanced_lQrH{max-width:calc(100% - var(--doc-sidebar-hidden-width))}.docItemWrapperEnhanced_JWYK{max-width:calc(var(--ifm-container-width) + var(--doc-sidebar-width))!important}.navbarSearchContainer_Bca1{padding:var(--ifm-navbar-item-padding-vertical) var(--ifm-navbar-item-padding-horizontal)}.lastUpdated_JAkA{text-align:right}.tocMobile_ITEo{display:none}.docItemCol_VOVn,.generatedIndexPage_vN6x{max-width:75%!important}.list_eTzJ article:nth-last-child(-n+2){margin-bottom:0!important}}@media (min-width:1440px){.container{max-width:var(--ifm-container-width-xl)}}@media (max-width:996px){.col{--ifm-col-width:100%;flex-basis:var(--ifm-col-width);margin-left:0}.footer{--ifm-footer-padding-horizontal:0}.colorModeToggle_DEke,.footer__link-separator,.navbar__item,.sidebar_re4s,.tableOfContents_bqdL{display:none}.footer__col{margin-bottom:calc(var(--ifm-spacing-vertical)*3)}.footer__link-item{display:block;width:max-content}.hero{padding-left:0;padding-right:0}.navbar>.container,.navbar>.container-fluid{padding:0}.navbar__toggle{display:inherit}.navbar__search-input{width:9rem}.pills--block,.tabs--block{flex-direction:column}.navbarSearchContainer_Bca1{position:absolute;right:var(--ifm-navbar-padding-horizontal)}.docItemContainer_F8PC{padding:0 .3rem}}@media not (max-width:996px){.searchBar_RVTs.searchBarLeft_MXDe .dropdownMenu_qbY6{left:0!important;right:auto!important}}@media only screen and (max-width:996px){.searchQueryColumn_q7nx{max-width:60%!important}.searchContextColumn_oWAF{max-width:40%!important}}@media (max-width:576px){.markdown h1:first-child{--ifm-h1-font-size:2rem}.markdown>h2{--ifm-h2-font-size:1.5rem}.markdown>h3{--ifm-h3-font-size:1.25rem}.navbar__search-input:not(:focus){width:2rem}.searchBar_RVTs .dropdownMenu_qbY6{max-width:calc(100vw - var(--ifm-navbar-padding-horizontal)*2);width:var(--search-local-modal-width-sm,340px)}.searchBarContainer_NW3z:not(.focused_OWtg) .searchClearButton_qk4g,.searchHintContainer_Pkmr{display:none}.title_f1Hy{font-size:2rem}}@media screen and (max-width:576px){.searchQueryColumn_q7nx{max-width:100%!important}.searchContextColumn_oWAF{max-width:100%!important;padding-left:var(--ifm-spacing-horizontal)!important}}@media (hover:hover){.backToTopButton_sjWU:hover{background-color:var(--ifm-color-emphasis-300)}}@media (pointer:fine){.thin-scrollbar{scrollbar-width:thin}.thin-scrollbar::-webkit-scrollbar{height:var(--ifm-scrollbar-size);width:var(--ifm-scrollbar-size)}.thin-scrollbar::-webkit-scrollbar-track{background:var(--ifm-scrollbar-track-background-color);border-radius:10px}.thin-scrollbar::-webkit-scrollbar-thumb{background:var(--ifm-scrollbar-thumb-background-color);border-radius:10px}.thin-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--ifm-scrollbar-thumb-hover-background-color)}}@media (prefers-reduced-motion:reduce){:root{--ifm-transition-fast:0ms;--ifm-transition-slow:0ms}}@media print{.announcementBar_mb4j,.footer,.menu,.navbar,.pagination-nav,.table-of-contents,.tocMobile_ITEo{display:none}.tabs{page-break-inside:avoid}.codeBlockLines_e6Vv{white-space:pre-wrap}} \ No newline at end of file +.col,.container{padding:0 var(--ifm-spacing-horizontal);width:100%}.markdown>h2,.markdown>h3,.markdown>h4,.markdown>h5,.markdown>h6{margin-bottom:calc(var(--ifm-heading-vertical-rhythm-bottom)*var(--ifm-leading))}.markdown li,body{word-wrap:break-word}body,ol ol,ol ul,ul ol,ul ul{margin:0}pre,table{overflow:auto}blockquote,pre{margin:0 0 var(--ifm-spacing-vertical)}.breadcrumbs__link,.button{transition-timing-function:var(--ifm-transition-timing-default)}.button,code{vertical-align:middle}.button--outline.button--active,.button--outline:active,.button--outline:hover,:root{--ifm-button-color:var(--ifm-font-color-base-inverse)}.menu__link:hover,a{transition:color var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.navbar--dark,:root{--ifm-navbar-link-hover-color:var(--ifm-color-primary)}.menu,.navbar-sidebar{overflow-x:hidden}:root,html[data-theme=dark]{--ifm-color-emphasis-500:var(--ifm-color-gray-500)}.toggleButton_gllP,html{-webkit-tap-highlight-color:transparent}*,.loadingRing_RJI3 div{box-sizing:border-box}.clean-list,.containsTaskList_mC6p,.details_lb9f>summary,.dropdown__menu,.menu__list{list-style:none}:root{--ifm-color-scheme:light;--ifm-dark-value:10%;--ifm-darker-value:15%;--ifm-darkest-value:30%;--ifm-light-value:15%;--ifm-lighter-value:30%;--ifm-lightest-value:50%;--ifm-contrast-background-value:90%;--ifm-contrast-foreground-value:70%;--ifm-contrast-background-dark-value:70%;--ifm-contrast-foreground-dark-value:90%;--ifm-color-primary:#3578e5;--ifm-color-secondary:#ebedf0;--ifm-color-success:#00a400;--ifm-color-info:#54c7ec;--ifm-color-warning:#ffba00;--ifm-color-danger:#fa383e;--ifm-color-primary-dark:#306cce;--ifm-color-primary-darker:#2d66c3;--ifm-color-primary-darkest:#2554a0;--ifm-color-primary-light:#538ce9;--ifm-color-primary-lighter:#72a1ed;--ifm-color-primary-lightest:#9abcf2;--ifm-color-primary-contrast-background:#ebf2fc;--ifm-color-primary-contrast-foreground:#102445;--ifm-color-secondary-dark:#d4d5d8;--ifm-color-secondary-darker:#c8c9cc;--ifm-color-secondary-darkest:#a4a6a8;--ifm-color-secondary-light:#eef0f2;--ifm-color-secondary-lighter:#f1f2f5;--ifm-color-secondary-lightest:#f5f6f8;--ifm-color-secondary-contrast-background:#fdfdfe;--ifm-color-secondary-contrast-foreground:#474748;--ifm-color-success-dark:#009400;--ifm-color-success-darker:#008b00;--ifm-color-success-darkest:#007300;--ifm-color-success-light:#26b226;--ifm-color-success-lighter:#4dbf4d;--ifm-color-success-lightest:#80d280;--ifm-color-success-contrast-background:#e6f6e6;--ifm-color-success-contrast-foreground:#003100;--ifm-color-info-dark:#4cb3d4;--ifm-color-info-darker:#47a9c9;--ifm-color-info-darkest:#3b8ba5;--ifm-color-info-light:#6ecfef;--ifm-color-info-lighter:#87d8f2;--ifm-color-info-lightest:#aae3f6;--ifm-color-info-contrast-background:#eef9fd;--ifm-color-info-contrast-foreground:#193c47;--ifm-color-warning-dark:#e6a700;--ifm-color-warning-darker:#d99e00;--ifm-color-warning-darkest:#b38200;--ifm-color-warning-light:#ffc426;--ifm-color-warning-lighter:#ffcf4d;--ifm-color-warning-lightest:#ffdd80;--ifm-color-warning-contrast-background:#fff8e6;--ifm-color-warning-contrast-foreground:#4d3800;--ifm-color-danger-dark:#e13238;--ifm-color-danger-darker:#d53035;--ifm-color-danger-darkest:#af272b;--ifm-color-danger-light:#fb565b;--ifm-color-danger-lighter:#fb7478;--ifm-color-danger-lightest:#fd9c9f;--ifm-color-danger-contrast-background:#ffebec;--ifm-color-danger-contrast-foreground:#4b1113;--ifm-color-white:#fff;--ifm-color-black:#000;--ifm-color-gray-0:var(--ifm-color-white);--ifm-color-gray-100:#f5f6f7;--ifm-color-gray-200:#ebedf0;--ifm-color-gray-300:#dadde1;--ifm-color-gray-400:#ccd0d5;--ifm-color-gray-500:#bec3c9;--ifm-color-gray-600:#8d949e;--ifm-color-gray-700:#606770;--ifm-color-gray-800:#444950;--ifm-color-gray-900:#1c1e21;--ifm-color-gray-1000:var(--ifm-color-black);--ifm-color-emphasis-0:var(--ifm-color-gray-0);--ifm-color-emphasis-100:var(--ifm-color-gray-100);--ifm-color-emphasis-200:var(--ifm-color-gray-200);--ifm-color-emphasis-300:var(--ifm-color-gray-300);--ifm-color-emphasis-400:var(--ifm-color-gray-400);--ifm-color-emphasis-600:var(--ifm-color-gray-600);--ifm-color-emphasis-700:var(--ifm-color-gray-700);--ifm-color-emphasis-800:var(--ifm-color-gray-800);--ifm-color-emphasis-900:var(--ifm-color-gray-900);--ifm-color-emphasis-1000:var(--ifm-color-gray-1000);--ifm-color-content:var(--ifm-color-emphasis-900);--ifm-color-content-inverse:var(--ifm-color-emphasis-0);--ifm-color-content-secondary:#525860;--ifm-background-color:#0000;--ifm-background-surface-color:var(--ifm-color-content-inverse);--ifm-global-border-width:1px;--ifm-global-radius:0.4rem;--ifm-hover-overlay:#0000000d;--ifm-font-color-base:var(--ifm-color-content);--ifm-font-color-base-inverse:var(--ifm-color-content-inverse);--ifm-font-color-secondary:var(--ifm-color-content-secondary);--ifm-font-family-base:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--ifm-font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--ifm-font-size-base:100%;--ifm-font-weight-light:300;--ifm-font-weight-normal:400;--ifm-font-weight-semibold:500;--ifm-font-weight-bold:700;--ifm-font-weight-base:var(--ifm-font-weight-normal);--ifm-line-height-base:1.65;--ifm-global-spacing:1rem;--ifm-spacing-vertical:var(--ifm-global-spacing);--ifm-spacing-horizontal:var(--ifm-global-spacing);--ifm-transition-fast:200ms;--ifm-transition-slow:400ms;--ifm-transition-timing-default:cubic-bezier(0.08,0.52,0.52,1);--ifm-global-shadow-lw:0 1px 2px 0 #0000001a;--ifm-global-shadow-md:0 5px 40px #0003;--ifm-global-shadow-tl:0 12px 28px 0 #0003,0 2px 4px 0 #0000001a;--ifm-z-index-dropdown:100;--ifm-z-index-fixed:200;--ifm-z-index-overlay:400;--ifm-container-width:1140px;--ifm-container-width-xl:1320px;--ifm-code-background:#f6f7f8;--ifm-code-border-radius:var(--ifm-global-radius);--ifm-code-font-size:90%;--ifm-code-padding-horizontal:0.1rem;--ifm-code-padding-vertical:0.1rem;--ifm-pre-background:var(--ifm-code-background);--ifm-pre-border-radius:var(--ifm-code-border-radius);--ifm-pre-color:inherit;--ifm-pre-line-height:1.45;--ifm-pre-padding:1rem;--ifm-heading-color:inherit;--ifm-heading-margin-top:0;--ifm-heading-margin-bottom:var(--ifm-spacing-vertical);--ifm-heading-font-family:var(--ifm-font-family-base);--ifm-heading-font-weight:var(--ifm-font-weight-bold);--ifm-heading-line-height:1.25;--ifm-h1-font-size:2rem;--ifm-h2-font-size:1.5rem;--ifm-h3-font-size:1.25rem;--ifm-h4-font-size:1rem;--ifm-h5-font-size:0.875rem;--ifm-h6-font-size:0.85rem;--ifm-image-alignment-padding:1.25rem;--ifm-leading-desktop:1.25;--ifm-leading:calc(var(--ifm-leading-desktop)*1rem);--ifm-list-left-padding:2rem;--ifm-list-margin:1rem;--ifm-list-item-margin:0.25rem;--ifm-list-paragraph-margin:1rem;--ifm-table-cell-padding:0.75rem;--ifm-table-background:#0000;--ifm-table-stripe-background:#00000008;--ifm-table-border-width:1px;--ifm-table-border-color:var(--ifm-color-emphasis-300);--ifm-table-head-background:inherit;--ifm-table-head-color:inherit;--ifm-table-head-font-weight:var(--ifm-font-weight-bold);--ifm-table-cell-color:inherit;--ifm-link-color:var(--ifm-color-primary);--ifm-link-decoration:none;--ifm-link-hover-color:var(--ifm-link-color);--ifm-link-hover-decoration:underline;--ifm-paragraph-margin-bottom:var(--ifm-leading);--ifm-blockquote-font-size:var(--ifm-font-size-base);--ifm-blockquote-border-left-width:2px;--ifm-blockquote-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-blockquote-padding-vertical:0;--ifm-blockquote-shadow:none;--ifm-blockquote-color:var(--ifm-color-emphasis-800);--ifm-blockquote-border-color:var(--ifm-color-emphasis-300);--ifm-hr-background-color:var(--ifm-color-emphasis-500);--ifm-hr-height:1px;--ifm-hr-margin-vertical:1.5rem;--ifm-scrollbar-size:7px;--ifm-scrollbar-track-background-color:#f1f1f1;--ifm-scrollbar-thumb-background-color:silver;--ifm-scrollbar-thumb-hover-background-color:#a7a7a7;--ifm-alert-background-color:inherit;--ifm-alert-border-color:inherit;--ifm-alert-border-radius:var(--ifm-global-radius);--ifm-alert-border-width:0px;--ifm-alert-border-left-width:5px;--ifm-alert-color:var(--ifm-font-color-base);--ifm-alert-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-alert-padding-vertical:var(--ifm-spacing-vertical);--ifm-alert-shadow:var(--ifm-global-shadow-lw);--ifm-avatar-intro-margin:1rem;--ifm-avatar-intro-alignment:inherit;--ifm-avatar-photo-size:3rem;--ifm-badge-background-color:inherit;--ifm-badge-border-color:inherit;--ifm-badge-border-radius:var(--ifm-global-radius);--ifm-badge-border-width:var(--ifm-global-border-width);--ifm-badge-color:var(--ifm-color-white);--ifm-badge-padding-horizontal:calc(var(--ifm-spacing-horizontal)*0.5);--ifm-badge-padding-vertical:calc(var(--ifm-spacing-vertical)*0.25);--ifm-breadcrumb-border-radius:1.5rem;--ifm-breadcrumb-spacing:0.5rem;--ifm-breadcrumb-color-active:var(--ifm-color-primary);--ifm-breadcrumb-item-background-active:var(--ifm-hover-overlay);--ifm-breadcrumb-padding-horizontal:0.8rem;--ifm-breadcrumb-padding-vertical:0.4rem;--ifm-breadcrumb-size-multiplier:1;--ifm-breadcrumb-separator:url('data:image/svg+xml;utf8,');--ifm-breadcrumb-separator-filter:none;--ifm-breadcrumb-separator-size:0.5rem;--ifm-breadcrumb-separator-size-multiplier:1.25;--ifm-button-background-color:inherit;--ifm-button-border-color:var(--ifm-button-background-color);--ifm-button-border-width:var(--ifm-global-border-width);--ifm-button-font-weight:var(--ifm-font-weight-bold);--ifm-button-padding-horizontal:1.5rem;--ifm-button-padding-vertical:0.375rem;--ifm-button-size-multiplier:1;--ifm-button-transition-duration:var(--ifm-transition-fast);--ifm-button-border-radius:calc(var(--ifm-global-radius)*var(--ifm-button-size-multiplier));--ifm-button-group-spacing:2px;--ifm-card-background-color:var(--ifm-background-surface-color);--ifm-card-border-radius:calc(var(--ifm-global-radius)*2);--ifm-card-horizontal-spacing:var(--ifm-global-spacing);--ifm-card-vertical-spacing:var(--ifm-global-spacing);--ifm-toc-border-color:var(--ifm-color-emphasis-300);--ifm-toc-link-color:var(--ifm-color-content-secondary);--ifm-toc-padding-vertical:0.5rem;--ifm-toc-padding-horizontal:0.5rem;--ifm-dropdown-background-color:var(--ifm-background-surface-color);--ifm-dropdown-font-weight:var(--ifm-font-weight-semibold);--ifm-dropdown-link-color:var(--ifm-font-color-base);--ifm-dropdown-hover-background-color:var(--ifm-hover-overlay);--ifm-footer-background-color:var(--ifm-color-emphasis-100);--ifm-footer-color:inherit;--ifm-footer-link-color:var(--ifm-color-emphasis-700);--ifm-footer-link-hover-color:var(--ifm-color-primary);--ifm-footer-link-horizontal-spacing:0.5rem;--ifm-footer-padding-horizontal:calc(var(--ifm-spacing-horizontal)*2);--ifm-footer-padding-vertical:calc(var(--ifm-spacing-vertical)*2);--ifm-footer-title-color:inherit;--ifm-footer-logo-max-width:min(30rem,90vw);--ifm-hero-background-color:var(--ifm-background-surface-color);--ifm-hero-text-color:var(--ifm-color-emphasis-800);--ifm-menu-color:var(--ifm-color-emphasis-700);--ifm-menu-color-active:var(--ifm-color-primary);--ifm-menu-color-background-active:var(--ifm-hover-overlay);--ifm-menu-color-background-hover:var(--ifm-hover-overlay);--ifm-menu-link-padding-horizontal:0.75rem;--ifm-menu-link-padding-vertical:0.375rem;--ifm-menu-link-sublist-icon:url('data:image/svg+xml;utf8,');--ifm-menu-link-sublist-icon-filter:none;--ifm-navbar-background-color:var(--ifm-background-surface-color);--ifm-navbar-height:3.75rem;--ifm-navbar-item-padding-horizontal:0.75rem;--ifm-navbar-item-padding-vertical:0.25rem;--ifm-navbar-link-color:var(--ifm-font-color-base);--ifm-navbar-link-active-color:var(--ifm-link-color);--ifm-navbar-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-navbar-padding-vertical:calc(var(--ifm-spacing-vertical)*0.5);--ifm-navbar-shadow:var(--ifm-global-shadow-lw);--ifm-navbar-search-input-background-color:var(--ifm-color-emphasis-200);--ifm-navbar-search-input-color:var(--ifm-color-emphasis-800);--ifm-navbar-search-input-placeholder-color:var(--ifm-color-emphasis-500);--ifm-navbar-search-input-icon:url('data:image/svg+xml;utf8,');--ifm-navbar-sidebar-width:83vw;--ifm-pagination-border-radius:var(--ifm-global-radius);--ifm-pagination-color-active:var(--ifm-color-primary);--ifm-pagination-font-size:1rem;--ifm-pagination-item-active-background:var(--ifm-hover-overlay);--ifm-pagination-page-spacing:0.2em;--ifm-pagination-padding-horizontal:calc(var(--ifm-spacing-horizontal)*1);--ifm-pagination-padding-vertical:calc(var(--ifm-spacing-vertical)*0.25);--ifm-pagination-nav-border-radius:var(--ifm-global-radius);--ifm-pagination-nav-color-hover:var(--ifm-color-primary);--ifm-pills-color-active:var(--ifm-color-primary);--ifm-pills-color-background-active:var(--ifm-hover-overlay);--ifm-pills-spacing:0.125rem;--ifm-tabs-color:var(--ifm-font-color-secondary);--ifm-tabs-color-active:var(--ifm-color-primary);--ifm-tabs-color-active-border:var(--ifm-tabs-color-active);--ifm-tabs-padding-horizontal:1rem;--ifm-tabs-padding-vertical:1rem;--docusaurus-progress-bar-color:var(--ifm-color-primary);--docusaurus-announcement-bar-height:auto;--docusaurus-collapse-button-bg:#0000;--docusaurus-collapse-button-bg-hover:#0000001a;--doc-sidebar-width:300px;--doc-sidebar-hidden-width:30px;--docusaurus-blog-social-icon-size:1rem;--docusaurus-tag-list-border:var(--ifm-color-emphasis-300)}.badge--danger,.badge--info,.badge--primary,.badge--secondary,.badge--success,.badge--warning{--ifm-badge-border-color:var(--ifm-badge-background-color)}.button--link,.button--outline{--ifm-button-background-color:#0000}html{background-color:var(--ifm-background-color);color:var(--ifm-font-color-base);color-scheme:var(--ifm-color-scheme);font:var(--ifm-font-size-base)/var(--ifm-line-height-base) var(--ifm-font-family-base);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;-webkit-text-size-adjust:100%;text-size-adjust:100%}iframe{border:0;color-scheme:auto}.container{margin:0 auto;max-width:var(--ifm-container-width)}.container--fluid{max-width:inherit}.row{display:flex;flex-wrap:wrap;margin:0 calc(var(--ifm-spacing-horizontal)*-1)}.list_eTzJ article:last-child,.margin-bottom--none,.margin-vert--none,.markdown>:last-child{margin-bottom:0!important}.margin-top--none,.margin-vert--none,.tabItem_LNqP{margin-top:0!important}.row--no-gutters{margin-left:0;margin-right:0}.margin-horiz--none,.margin-right--none{margin-right:0!important}.row--no-gutters>.col{padding-left:0;padding-right:0}.row--align-top{align-items:flex-start}.row--align-bottom{align-items:flex-end}.menuExternalLink_NmtK,.row--align-center{align-items:center}.row--align-stretch{align-items:stretch}.row--align-baseline{align-items:baseline}.col{--ifm-col-width:100%;flex:1 0;margin-left:0;max-width:var(--ifm-col-width)}.padding-bottom--none,.padding-vert--none{padding-bottom:0!important}.padding-top--none,.padding-vert--none{padding-top:0!important}.padding-horiz--none,.padding-left--none{padding-left:0!important}.padding-horiz--none,.padding-right--none{padding-right:0!important}.col[class*=col--]{flex:0 0 var(--ifm-col-width)}.col--1{--ifm-col-width:8.33333%}.col--offset-1{margin-left:8.33333%}.col--2{--ifm-col-width:16.66667%}.col--offset-2{margin-left:16.66667%}.col--3{--ifm-col-width:25%}.col--offset-3{margin-left:25%}.col--4{--ifm-col-width:33.33333%}.col--offset-4{margin-left:33.33333%}.col--5{--ifm-col-width:41.66667%}.col--offset-5{margin-left:41.66667%}.col--6{--ifm-col-width:50%}.col--offset-6{margin-left:50%}.col--7{--ifm-col-width:58.33333%}.col--offset-7{margin-left:58.33333%}.col--8{--ifm-col-width:66.66667%}.col--offset-8{margin-left:66.66667%}.col--9{--ifm-col-width:75%}.col--offset-9{margin-left:75%}.col--10{--ifm-col-width:83.33333%}.col--offset-10{margin-left:83.33333%}.col--11{--ifm-col-width:91.66667%}.col--offset-11{margin-left:91.66667%}.col--12{--ifm-col-width:100%}.col--offset-12{margin-left:100%}.margin-horiz--none,.margin-left--none{margin-left:0!important}.margin--none{margin:0!important}.margin-bottom--xs,.margin-vert--xs{margin-bottom:.25rem!important}.margin-top--xs,.margin-vert--xs{margin-top:.25rem!important}.margin-horiz--xs,.margin-left--xs{margin-left:.25rem!important}.margin-horiz--xs,.margin-right--xs{margin-right:.25rem!important}.margin--xs{margin:.25rem!important}.margin-bottom--sm,.margin-vert--sm{margin-bottom:.5rem!important}.margin-top--sm,.margin-vert--sm{margin-top:.5rem!important}.margin-horiz--sm,.margin-left--sm{margin-left:.5rem!important}.margin-horiz--sm,.margin-right--sm{margin-right:.5rem!important}.margin--sm{margin:.5rem!important}.margin-bottom--md,.margin-vert--md{margin-bottom:1rem!important}.margin-top--md,.margin-vert--md{margin-top:1rem!important}.margin-horiz--md,.margin-left--md{margin-left:1rem!important}.margin-horiz--md,.margin-right--md{margin-right:1rem!important}.margin--md{margin:1rem!important}.margin-bottom--lg,.margin-vert--lg{margin-bottom:2rem!important}.margin-top--lg,.margin-vert--lg{margin-top:2rem!important}.margin-horiz--lg,.margin-left--lg{margin-left:2rem!important}.margin-horiz--lg,.margin-right--lg{margin-right:2rem!important}.margin--lg{margin:2rem!important}.margin-bottom--xl,.margin-vert--xl{margin-bottom:5rem!important}.margin-top--xl,.margin-vert--xl{margin-top:5rem!important}.margin-horiz--xl,.margin-left--xl{margin-left:5rem!important}.margin-horiz--xl,.margin-right--xl{margin-right:5rem!important}.margin--xl{margin:5rem!important}.padding--none{padding:0!important}.padding-bottom--xs,.padding-vert--xs{padding-bottom:.25rem!important}.padding-top--xs,.padding-vert--xs{padding-top:.25rem!important}.padding-horiz--xs,.padding-left--xs{padding-left:.25rem!important}.padding-horiz--xs,.padding-right--xs{padding-right:.25rem!important}.padding--xs{padding:.25rem!important}.padding-bottom--sm,.padding-vert--sm{padding-bottom:.5rem!important}.padding-top--sm,.padding-vert--sm{padding-top:.5rem!important}.padding-horiz--sm,.padding-left--sm{padding-left:.5rem!important}.padding-horiz--sm,.padding-right--sm{padding-right:.5rem!important}.padding--sm{padding:.5rem!important}.padding-bottom--md,.padding-vert--md{padding-bottom:1rem!important}.padding-top--md,.padding-vert--md{padding-top:1rem!important}.padding-horiz--md,.padding-left--md{padding-left:1rem!important}.padding-horiz--md,.padding-right--md{padding-right:1rem!important}.padding--md{padding:1rem!important}.padding-bottom--lg,.padding-vert--lg{padding-bottom:2rem!important}.padding-top--lg,.padding-vert--lg{padding-top:2rem!important}.padding-horiz--lg,.padding-left--lg{padding-left:2rem!important}.padding-horiz--lg,.padding-right--lg{padding-right:2rem!important}.padding--lg{padding:2rem!important}.padding-bottom--xl,.padding-vert--xl{padding-bottom:5rem!important}.padding-top--xl,.padding-vert--xl{padding-top:5rem!important}.padding-horiz--xl,.padding-left--xl{padding-left:5rem!important}.padding-horiz--xl,.padding-right--xl{padding-right:5rem!important}.padding--xl{padding:5rem!important}code{background-color:var(--ifm-code-background);border:.1rem solid #0000001a;border-radius:var(--ifm-code-border-radius);font-family:var(--ifm-font-family-monospace);font-size:var(--ifm-code-font-size);padding:var(--ifm-code-padding-vertical) var(--ifm-code-padding-horizontal)}a code{color:inherit}pre{background-color:var(--ifm-pre-background);border-radius:var(--ifm-pre-border-radius);color:var(--ifm-pre-color);font:var(--ifm-code-font-size)/var(--ifm-pre-line-height) var(--ifm-font-family-monospace);padding:var(--ifm-pre-padding)}pre code{background-color:initial;border:none;font-size:100%;line-height:inherit;padding:0}kbd{background-color:var(--ifm-color-emphasis-0);border:1px solid var(--ifm-color-emphasis-400);border-radius:.2rem;box-shadow:inset 0 -1px 0 var(--ifm-color-emphasis-400);color:var(--ifm-color-emphasis-800);font:80% var(--ifm-font-family-monospace);padding:.15rem .3rem}h1,h2,h3,h4,h5,h6{color:var(--ifm-heading-color);font-family:var(--ifm-heading-font-family);font-weight:var(--ifm-heading-font-weight);line-height:var(--ifm-heading-line-height);margin:var(--ifm-heading-margin-top) 0 var(--ifm-heading-margin-bottom) 0}h1{font-size:var(--ifm-h1-font-size)}h2{font-size:var(--ifm-h2-font-size)}h3{font-size:var(--ifm-h3-font-size)}h4{font-size:var(--ifm-h4-font-size)}h5{font-size:var(--ifm-h5-font-size)}h6{font-size:var(--ifm-h6-font-size)}img{max-width:100%}img[align=right]{padding-left:var(--image-alignment-padding)}img[align=left]{padding-right:var(--image-alignment-padding)}.markdown{--ifm-h1-vertical-rhythm-top:3;--ifm-h2-vertical-rhythm-top:2;--ifm-h3-vertical-rhythm-top:1.5;--ifm-heading-vertical-rhythm-top:1.25;--ifm-h1-vertical-rhythm-bottom:1.25;--ifm-heading-vertical-rhythm-bottom:1}.markdown:after,.markdown:before{content:"";display:table}.markdown:after{clear:both}.markdown h1:first-child{--ifm-h1-font-size:3rem;margin-bottom:calc(var(--ifm-h1-vertical-rhythm-bottom)*var(--ifm-leading))}.markdown>h2{--ifm-h2-font-size:2rem;margin-top:calc(var(--ifm-h2-vertical-rhythm-top)*var(--ifm-leading))}.markdown>h3{--ifm-h3-font-size:1.5rem;margin-top:calc(var(--ifm-h3-vertical-rhythm-top)*var(--ifm-leading))}.markdown>h4,.markdown>h5,.markdown>h6{margin-top:calc(var(--ifm-heading-vertical-rhythm-top)*var(--ifm-leading))}.markdown>p,.markdown>pre,.markdown>ul,.tabList__CuJ{margin-bottom:var(--ifm-leading)}.markdown li>p{margin-top:var(--ifm-list-paragraph-margin)}.markdown li+li{margin-top:var(--ifm-list-item-margin)}ol,ul{margin:0 0 var(--ifm-list-margin);padding-left:var(--ifm-list-left-padding)}ol ol,ul ol{list-style-type:lower-roman}ol ol ol,ol ul ol,ul ol ol,ul ul ol{list-style-type:lower-alpha}table{border-collapse:collapse;display:block;margin-bottom:var(--ifm-spacing-vertical)}table thead tr{border-bottom:2px solid var(--ifm-table-border-color)}table thead,table tr:nth-child(2n){background-color:var(--ifm-table-stripe-background)}table tr{background-color:var(--ifm-table-background);border-top:var(--ifm-table-border-width) solid var(--ifm-table-border-color)}table td,table th{border:var(--ifm-table-border-width) solid var(--ifm-table-border-color);padding:var(--ifm-table-cell-padding)}table th{background-color:var(--ifm-table-head-background);color:var(--ifm-table-head-color);font-weight:var(--ifm-table-head-font-weight)}table td{color:var(--ifm-table-cell-color)}strong{font-weight:var(--ifm-font-weight-bold)}a{color:var(--ifm-link-color);text-decoration:var(--ifm-link-decoration)}a:hover{color:var(--ifm-link-hover-color);text-decoration:var(--ifm-link-hover-decoration)}.button:hover,.text--no-decoration,.text--no-decoration:hover,a:not([href]){-webkit-text-decoration:none;text-decoration:none}p{margin:0 0 var(--ifm-paragraph-margin-bottom)}blockquote{border-left:var(--ifm-blockquote-border-left-width) solid var(--ifm-blockquote-border-color);box-shadow:var(--ifm-blockquote-shadow);color:var(--ifm-blockquote-color);font-size:var(--ifm-blockquote-font-size);padding:var(--ifm-blockquote-padding-vertical) var(--ifm-blockquote-padding-horizontal)}blockquote>:first-child{margin-top:0}blockquote>:last-child{margin-bottom:0}hr{background-color:var(--ifm-hr-background-color);border:0;height:var(--ifm-hr-height);margin:var(--ifm-hr-margin-vertical) 0}.shadow--lw{box-shadow:var(--ifm-global-shadow-lw)!important}.shadow--md{box-shadow:var(--ifm-global-shadow-md)!important}.shadow--tl{box-shadow:var(--ifm-global-shadow-tl)!important}.text--primary,.wordWrapButtonEnabled_EoeP .wordWrapButtonIcon_Bwma{color:var(--ifm-color-primary)}.text--secondary{color:var(--ifm-color-secondary)}.text--success{color:var(--ifm-color-success)}.text--info{color:var(--ifm-color-info)}.text--warning{color:var(--ifm-color-warning)}.text--danger{color:var(--ifm-color-danger)}.text--center{text-align:center}.text--left{text-align:left}.text--justify{text-align:justify}.text--right{text-align:right}.text--capitalize{text-transform:capitalize}.text--lowercase{text-transform:lowercase}.admonitionHeading_Gvgb,.alert__heading,.text--uppercase{text-transform:uppercase}.text--light{font-weight:var(--ifm-font-weight-light)}.text--normal{font-weight:var(--ifm-font-weight-normal)}.text--semibold{font-weight:var(--ifm-font-weight-semibold)}.text--bold{font-weight:var(--ifm-font-weight-bold)}.text--italic{font-style:italic}.text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text--break{word-wrap:break-word!important;word-break:break-word!important}.clean-btn{background:none;border:none;color:inherit;cursor:pointer;font-family:inherit;padding:0}.alert,.alert .close{color:var(--ifm-alert-foreground-color)}.clean-list{padding-left:0}.alert--primary{--ifm-alert-background-color:var(--ifm-color-primary-contrast-background);--ifm-alert-background-color-highlight:#3578e526;--ifm-alert-foreground-color:var(--ifm-color-primary-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-primary-dark)}.alert--secondary{--ifm-alert-background-color:var(--ifm-color-secondary-contrast-background);--ifm-alert-background-color-highlight:#ebedf026;--ifm-alert-foreground-color:var(--ifm-color-secondary-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-secondary-dark)}.alert--success{--ifm-alert-background-color:var(--ifm-color-success-contrast-background);--ifm-alert-background-color-highlight:#00a40026;--ifm-alert-foreground-color:var(--ifm-color-success-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-success-dark)}.alert--info{--ifm-alert-background-color:var(--ifm-color-info-contrast-background);--ifm-alert-background-color-highlight:#54c7ec26;--ifm-alert-foreground-color:var(--ifm-color-info-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-info-dark)}.alert--warning{--ifm-alert-background-color:var(--ifm-color-warning-contrast-background);--ifm-alert-background-color-highlight:#ffba0026;--ifm-alert-foreground-color:var(--ifm-color-warning-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-warning-dark)}.alert--danger{--ifm-alert-background-color:var(--ifm-color-danger-contrast-background);--ifm-alert-background-color-highlight:#fa383e26;--ifm-alert-foreground-color:var(--ifm-color-danger-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-danger-dark)}.alert{--ifm-code-background:var(--ifm-alert-background-color-highlight);--ifm-link-color:var(--ifm-alert-foreground-color);--ifm-link-hover-color:var(--ifm-alert-foreground-color);--ifm-link-decoration:underline;--ifm-tabs-color:var(--ifm-alert-foreground-color);--ifm-tabs-color-active:var(--ifm-alert-foreground-color);--ifm-tabs-color-active-border:var(--ifm-alert-border-color);background-color:var(--ifm-alert-background-color);border:var(--ifm-alert-border-width) solid var(--ifm-alert-border-color);border-left-width:var(--ifm-alert-border-left-width);border-radius:var(--ifm-alert-border-radius);box-shadow:var(--ifm-alert-shadow);padding:var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal)}.alert__heading{align-items:center;display:flex;font:700 var(--ifm-h5-font-size)/var(--ifm-heading-line-height) var(--ifm-heading-font-family);margin-bottom:.5rem}.alert__icon{display:inline-flex;margin-right:.4em}.alert__icon svg{fill:var(--ifm-alert-foreground-color);stroke:var(--ifm-alert-foreground-color);stroke-width:0}.alert .close{margin:calc(var(--ifm-alert-padding-vertical)*-1) calc(var(--ifm-alert-padding-horizontal)*-1) 0 0;opacity:.75}.alert .close:focus,.alert .close:hover{opacity:1}.alert a{text-decoration-color:var(--ifm-alert-border-color)}.alert a:hover{text-decoration-thickness:2px}.avatar{column-gap:var(--ifm-avatar-intro-margin);display:flex}.avatar__photo{border-radius:50%;display:block;height:var(--ifm-avatar-photo-size);overflow:hidden;width:var(--ifm-avatar-photo-size)}.card--full-height,.navbar__logo img,body,html{height:100%}.avatar__photo--sm{--ifm-avatar-photo-size:2rem}.avatar__photo--lg{--ifm-avatar-photo-size:4rem}.avatar__photo--xl{--ifm-avatar-photo-size:6rem}.avatar__intro{display:flex;flex:1 1;flex-direction:column;justify-content:center;text-align:var(--ifm-avatar-intro-alignment)}.badge,.breadcrumbs__item,.breadcrumbs__link,.button,.dropdown>.navbar__link:after,.searchBarContainer_NW3z.searchIndexLoading_EJ1f .searchBarLoadingRing_YnHq{display:inline-block}.avatar__name{font:700 var(--ifm-h4-font-size)/var(--ifm-heading-line-height) var(--ifm-font-family-base)}.avatar__subtitle{margin-top:.25rem}.avatar--vertical{--ifm-avatar-intro-alignment:center;--ifm-avatar-intro-margin:0.5rem;align-items:center;flex-direction:column}.badge{background-color:var(--ifm-badge-background-color);border:var(--ifm-badge-border-width) solid var(--ifm-badge-border-color);border-radius:var(--ifm-badge-border-radius);color:var(--ifm-badge-color);font-size:75%;font-weight:var(--ifm-font-weight-bold);line-height:1;padding:var(--ifm-badge-padding-vertical) var(--ifm-badge-padding-horizontal)}.badge--primary{--ifm-badge-background-color:var(--ifm-color-primary)}.badge--secondary{--ifm-badge-background-color:var(--ifm-color-secondary);color:var(--ifm-color-black)}.breadcrumbs__link,.button.button--secondary.button--outline:not(.button--active):not(:hover){color:var(--ifm-font-color-base)}.badge--success{--ifm-badge-background-color:var(--ifm-color-success)}.badge--info{--ifm-badge-background-color:var(--ifm-color-info)}.badge--warning{--ifm-badge-background-color:var(--ifm-color-warning)}.badge--danger{--ifm-badge-background-color:var(--ifm-color-danger)}.breadcrumbs{margin-bottom:0;padding-left:0}.breadcrumbs__item:not(:last-child):after{background:var(--ifm-breadcrumb-separator) center;content:" ";display:inline-block;filter:var(--ifm-breadcrumb-separator-filter);height:calc(var(--ifm-breadcrumb-separator-size)*var(--ifm-breadcrumb-size-multiplier)*var(--ifm-breadcrumb-separator-size-multiplier));margin:0 var(--ifm-breadcrumb-spacing);opacity:.5;width:calc(var(--ifm-breadcrumb-separator-size)*var(--ifm-breadcrumb-size-multiplier)*var(--ifm-breadcrumb-separator-size-multiplier))}.breadcrumbs__item--active .breadcrumbs__link{background:var(--ifm-breadcrumb-item-background-active);color:var(--ifm-breadcrumb-color-active)}.breadcrumbs__link{border-radius:var(--ifm-breadcrumb-border-radius);font-size:calc(1rem*var(--ifm-breadcrumb-size-multiplier));padding:calc(var(--ifm-breadcrumb-padding-vertical)*var(--ifm-breadcrumb-size-multiplier)) calc(var(--ifm-breadcrumb-padding-horizontal)*var(--ifm-breadcrumb-size-multiplier));transition-duration:var(--ifm-transition-fast);transition-property:background,color}.breadcrumbs__link:any-link:hover,.breadcrumbs__link:link:hover,.breadcrumbs__link:visited:hover,area[href].breadcrumbs__link:hover{background:var(--ifm-breadcrumb-item-background-active);-webkit-text-decoration:none;text-decoration:none}.breadcrumbs--sm{--ifm-breadcrumb-size-multiplier:0.8}.breadcrumbs--lg{--ifm-breadcrumb-size-multiplier:1.2}.button{background-color:var(--ifm-button-background-color);border:var(--ifm-button-border-width) solid var(--ifm-button-border-color);border-radius:var(--ifm-button-border-radius);cursor:pointer;font-size:calc(.875rem*var(--ifm-button-size-multiplier));font-weight:var(--ifm-button-font-weight);line-height:1.5;padding:calc(var(--ifm-button-padding-vertical)*var(--ifm-button-size-multiplier)) calc(var(--ifm-button-padding-horizontal)*var(--ifm-button-size-multiplier));text-align:center;transition-duration:var(--ifm-button-transition-duration);transition-property:color,background,border-color;-webkit-user-select:none;user-select:none;white-space:nowrap}.button,.button:hover{color:var(--ifm-button-color)}.button--outline{--ifm-button-color:var(--ifm-button-border-color)}.button--outline:hover{--ifm-button-background-color:var(--ifm-button-border-color)}.button--link{--ifm-button-border-color:#0000;color:var(--ifm-link-color);text-decoration:var(--ifm-link-decoration)}.button--link.button--active,.button--link:active,.button--link:hover{color:var(--ifm-link-hover-color);text-decoration:var(--ifm-link-hover-decoration)}.dropdown__link--active,.dropdown__link:hover,.menu__link:hover,.navbar__brand:hover,.navbar__link--active,.navbar__link:hover,.pagination-nav__link:hover,.pagination__link:hover,.sidebarItemLink_mo7H:hover,.tag_zVej:hover{-webkit-text-decoration:none;text-decoration:none}.button.disabled,.button:disabled,.button[disabled]{opacity:.65;pointer-events:none}.button--sm{--ifm-button-size-multiplier:0.8}.button--lg{--ifm-button-size-multiplier:1.35}.button--block{display:block;width:100%}.button.button--secondary{color:var(--ifm-color-gray-900)}:where(.button--primary){--ifm-button-background-color:var(--ifm-color-primary);--ifm-button-border-color:var(--ifm-color-primary)}:where(.button--primary):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-primary-dark);--ifm-button-border-color:var(--ifm-color-primary-dark)}.button--primary.button--active,.button--primary:active{--ifm-button-background-color:var(--ifm-color-primary-darker);--ifm-button-border-color:var(--ifm-color-primary-darker)}:where(.button--secondary){--ifm-button-background-color:var(--ifm-color-secondary);--ifm-button-border-color:var(--ifm-color-secondary)}:where(.button--secondary):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-secondary-dark);--ifm-button-border-color:var(--ifm-color-secondary-dark)}.button--secondary.button--active,.button--secondary:active{--ifm-button-background-color:var(--ifm-color-secondary-darker);--ifm-button-border-color:var(--ifm-color-secondary-darker)}:where(.button--success){--ifm-button-background-color:var(--ifm-color-success);--ifm-button-border-color:var(--ifm-color-success)}:where(.button--success):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-success-dark);--ifm-button-border-color:var(--ifm-color-success-dark)}.button--success.button--active,.button--success:active{--ifm-button-background-color:var(--ifm-color-success-darker);--ifm-button-border-color:var(--ifm-color-success-darker)}:where(.button--info){--ifm-button-background-color:var(--ifm-color-info);--ifm-button-border-color:var(--ifm-color-info)}:where(.button--info):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-info-dark);--ifm-button-border-color:var(--ifm-color-info-dark)}.button--info.button--active,.button--info:active{--ifm-button-background-color:var(--ifm-color-info-darker);--ifm-button-border-color:var(--ifm-color-info-darker)}:where(.button--warning){--ifm-button-background-color:var(--ifm-color-warning);--ifm-button-border-color:var(--ifm-color-warning)}:where(.button--warning):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-warning-dark);--ifm-button-border-color:var(--ifm-color-warning-dark)}.button--warning.button--active,.button--warning:active{--ifm-button-background-color:var(--ifm-color-warning-darker);--ifm-button-border-color:var(--ifm-color-warning-darker)}:where(.button--danger){--ifm-button-background-color:var(--ifm-color-danger);--ifm-button-border-color:var(--ifm-color-danger)}:where(.button--danger):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-danger-dark);--ifm-button-border-color:var(--ifm-color-danger-dark)}.button--danger.button--active,.button--danger:active{--ifm-button-background-color:var(--ifm-color-danger-darker);--ifm-button-border-color:var(--ifm-color-danger-darker)}.button-group{display:inline-flex;gap:var(--ifm-button-group-spacing)}.button-group>.button:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.button-group>.button:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.button-group--block{display:flex;justify-content:stretch}.button-group--block>.button{flex-grow:1}.card{background-color:var(--ifm-card-background-color);border-radius:var(--ifm-card-border-radius);box-shadow:var(--ifm-global-shadow-lw);display:flex;flex-direction:column;overflow:hidden}.card__image{padding-top:var(--ifm-card-vertical-spacing)}.card__image:first-child{padding-top:0}.card__body,.card__footer,.card__header{padding:var(--ifm-card-vertical-spacing) var(--ifm-card-horizontal-spacing)}.card__body:not(:last-child),.card__footer:not(:last-child),.card__header:not(:last-child){padding-bottom:0}.card__body>:last-child,.card__footer>:last-child,.card__header>:last-child{margin-bottom:0}.card__footer{margin-top:auto}.table-of-contents{font-size:.8rem;margin-bottom:0;padding:var(--ifm-toc-padding-vertical) 0}.table-of-contents,.table-of-contents ul{list-style:none;padding-left:var(--ifm-toc-padding-horizontal)}.table-of-contents li{margin:var(--ifm-toc-padding-vertical) var(--ifm-toc-padding-horizontal)}.table-of-contents__left-border{border-left:1px solid var(--ifm-toc-border-color)}.table-of-contents__link{color:var(--ifm-toc-link-color);display:block}.table-of-contents__link--active,.table-of-contents__link--active code,.table-of-contents__link:hover,.table-of-contents__link:hover code{color:var(--ifm-color-primary);-webkit-text-decoration:none;text-decoration:none}.content_knG7 a,.hitFooter_E9YW a,.suggestion_fB_2.cursor_eG29 mark{-webkit-text-decoration:underline;text-decoration:underline}.close{color:var(--ifm-color-black);float:right;font-size:1.5rem;font-weight:var(--ifm-font-weight-bold);line-height:1;opacity:.5;padding:1rem;transition:opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.close:hover{opacity:.7}.close:focus,.theme-code-block-highlighted-line .codeLineNumber_Tfdd:before{opacity:.8}.dropdown{display:inline-flex;font-weight:var(--ifm-dropdown-font-weight);position:relative;vertical-align:top}.dropdown--hoverable:hover .dropdown__menu,.dropdown--show .dropdown__menu{opacity:1;pointer-events:all;transform:translateY(-1px);visibility:visible}.dropdown--right .dropdown__menu{left:inherit;right:0}.dropdown--nocaret .navbar__link:after{content:none!important}.dropdown__menu{background-color:var(--ifm-dropdown-background-color);border-radius:var(--ifm-global-radius);box-shadow:var(--ifm-global-shadow-md);left:0;max-height:80vh;min-width:10rem;opacity:0;overflow-y:auto;padding:.5rem;pointer-events:none;position:absolute;top:calc(100% - var(--ifm-navbar-item-padding-vertical) + .3rem);transform:translateY(-.625rem);transition-duration:var(--ifm-transition-fast);transition-property:opacity,transform,visibility;transition-timing-function:var(--ifm-transition-timing-default);visibility:hidden;z-index:var(--ifm-z-index-dropdown)}.sidebar_re4s,.tableOfContents_bqdL{max-height:calc(100vh - var(--ifm-navbar-height) - 2rem)}.menu__caret,.menu__link,.menu__list-item-collapsible{border-radius:.25rem;transition:background var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.dropdown__link{border-radius:.25rem;color:var(--ifm-dropdown-link-color);display:block;font-size:.875rem;margin-top:.2rem;padding:.25rem .5rem;white-space:nowrap}.dropdown__link--active,.dropdown__link:hover{background-color:var(--ifm-dropdown-hover-background-color);color:var(--ifm-dropdown-link-color)}.dropdown__link--active,.dropdown__link--active:hover{--ifm-dropdown-link-color:var(--ifm-link-color)}.dropdown>.navbar__link:after{border-color:currentcolor #0000;border-style:solid;border-width:.4em .4em 0;content:"";margin-left:.3em;position:relative;top:2px;transform:translateY(-50%)}.footer{background-color:var(--ifm-footer-background-color);color:var(--ifm-footer-color);padding:var(--ifm-footer-padding-vertical) var(--ifm-footer-padding-horizontal)}.footer--dark{--ifm-footer-background-color:#303846;--ifm-footer-color:var(--ifm-footer-link-color);--ifm-footer-link-color:var(--ifm-color-secondary);--ifm-footer-title-color:var(--ifm-color-white)}.footer__links{margin-bottom:1rem}.footer__link-item{color:var(--ifm-footer-link-color);line-height:2}.footer__link-item:hover{color:var(--ifm-footer-link-hover-color)}.footer__link-separator{margin:0 var(--ifm-footer-link-horizontal-spacing)}.footer__logo{margin-top:1rem;max-width:var(--ifm-footer-logo-max-width)}.footer__title{color:var(--ifm-footer-title-color);font:700 var(--ifm-h4-font-size)/var(--ifm-heading-line-height) var(--ifm-font-family-base);margin-bottom:var(--ifm-heading-margin-bottom)}.menu,.navbar__link{font-weight:var(--ifm-font-weight-semibold)}.docItemContainer_Djhp article>:first-child,.docItemContainer_Djhp header+*,.footer__item{margin-top:0}.admonitionContent_BuS1>:last-child,.cardContainer_fWXF :last-child,.collapsibleContent_i85q p:last-child,.details_lb9f>summary>p:last-child,.footer__items,.searchResultItem_U687>h2,.tabItem_Ymn6>:last-child{margin-bottom:0}.codeBlockStandalone_MEMb,[type=checkbox]{padding:0}.hero{align-items:center;background-color:var(--ifm-hero-background-color);color:var(--ifm-hero-text-color);display:flex;padding:4rem 2rem}.hero--primary{--ifm-hero-background-color:var(--ifm-color-primary);--ifm-hero-text-color:var(--ifm-font-color-base-inverse)}.hero--dark{--ifm-hero-background-color:#303846;--ifm-hero-text-color:var(--ifm-color-white)}.hero__title,.title_f1Hy{font-size:3rem}.hero__subtitle{font-size:1.5rem}.menu__list{margin:0;padding-left:0}.menu__caret,.menu__link{padding:var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal)}.menu__list .menu__list{flex:0 0 100%;margin-top:.25rem;padding-left:var(--ifm-menu-link-padding-horizontal)}.menu__list-item:not(:first-child){margin-top:.25rem}.menu__list-item--collapsed .menu__list{height:0;overflow:hidden}.details_lb9f[data-collapsed=false].isBrowser_bmU9>summary:before,.details_lb9f[open]:not(.isBrowser_bmU9)>summary:before,.menu__list-item--collapsed .menu__caret:before,.menu__list-item--collapsed .menu__link--sublist:after{transform:rotate(90deg)}.menu__list-item-collapsible{display:flex;flex-wrap:wrap;position:relative}.menu__caret:hover,.menu__link:hover,.menu__list-item-collapsible--active,.menu__list-item-collapsible:hover{background:var(--ifm-menu-color-background-hover)}.menu__list-item-collapsible .menu__link--active,.menu__list-item-collapsible .menu__link:hover{background:none!important}.menu__caret,.menu__link{align-items:center;display:flex}.menu__link{color:var(--ifm-menu-color);flex:1;line-height:1.25}.menu__link:hover{color:var(--ifm-menu-color)}.menu__caret:before,.menu__link--sublist-caret:after{content:"";height:1.25rem;transform:rotate(180deg);transition:transform var(--ifm-transition-fast) linear;width:1.25rem;filter:var(--ifm-menu-link-sublist-icon-filter)}.menu__link--sublist-caret:after{background:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem;margin-left:auto;min-width:1.25rem}.menu__link--active,.menu__link--active:hover{color:var(--ifm-menu-color-active)}.navbar__brand,.navbar__link{color:var(--ifm-navbar-link-color)}.menu__link--active:not(.menu__link--sublist){background-color:var(--ifm-menu-color-background-active)}.menu__caret:before{background:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem}.navbar--dark,html[data-theme=dark]{--ifm-menu-link-sublist-icon-filter:invert(100%) sepia(94%) saturate(17%) hue-rotate(223deg) brightness(104%) contrast(98%)}.navbar{background-color:var(--ifm-navbar-background-color);box-shadow:var(--ifm-navbar-shadow);height:var(--ifm-navbar-height);padding:var(--ifm-navbar-padding-vertical) var(--ifm-navbar-padding-horizontal)}.navbar,.navbar>.container,.navbar>.container-fluid{display:flex}.navbar--fixed-top{position:sticky;top:0;z-index:var(--ifm-z-index-fixed)}.navbar-sidebar,.navbar-sidebar__backdrop{bottom:0;opacity:0;position:fixed;transition-duration:var(--ifm-transition-fast);transition-timing-function:ease-in-out;left:0;top:0;visibility:hidden}.navbar__inner{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%}.navbar__brand{align-items:center;display:flex;margin-right:1rem;min-width:0}.navbar__brand:hover{color:var(--ifm-navbar-link-hover-color)}.announcementBarContent_xLdY,.navbar__title{flex:1 1 auto}.navbar__toggle{display:none;margin-right:.5rem}.navbar__logo{flex:0 0 auto;height:2rem;margin-right:.5rem}.navbar__items{align-items:center;display:flex;flex:1;min-width:0}.navbar__items--center{flex:0 0 auto}.navbar__items--center .navbar__brand{margin:0}.navbar__items--center+.navbar__items--right{flex:1}.navbar__items--right{flex:0 0 auto;justify-content:flex-end}.navbar__items--right>:last-child{padding-right:0}.navbar__item{display:inline-block;padding:var(--ifm-navbar-item-padding-vertical) var(--ifm-navbar-item-padding-horizontal)}#nprogress,.navbar__item.dropdown .navbar__link:not([href]){pointer-events:none}.navbar__link--active,.navbar__link:hover{color:var(--ifm-navbar-link-hover-color)}.navbar--dark,.navbar--primary{--ifm-menu-color:var(--ifm-color-gray-300);--ifm-navbar-link-color:var(--ifm-color-gray-100);--ifm-navbar-search-input-background-color:#ffffff1a;--ifm-navbar-search-input-placeholder-color:#ffffff80;color:var(--ifm-color-white)}.navbar--dark{--ifm-navbar-background-color:#242526;--ifm-menu-color-background-active:#ffffff0d;--ifm-navbar-search-input-color:var(--ifm-color-white)}.navbar--primary{--ifm-navbar-background-color:var(--ifm-color-primary);--ifm-navbar-link-hover-color:var(--ifm-color-white);--ifm-menu-color-active:var(--ifm-color-white);--ifm-navbar-search-input-color:var(--ifm-color-emphasis-500)}.navbar__search-input{appearance:none;background:var(--ifm-navbar-search-input-background-color) var(--ifm-navbar-search-input-icon) no-repeat .75rem center/1rem 1rem;border:none;border-radius:2rem;color:var(--ifm-navbar-search-input-color);cursor:text;display:inline-block;font-size:1rem;height:2rem;padding:0 .5rem 0 2.25rem;width:12.5rem}.navbar__search-input::placeholder{color:var(--ifm-navbar-search-input-placeholder-color)}.navbar-sidebar{background-color:var(--ifm-navbar-background-color);box-shadow:var(--ifm-global-shadow-md);transform:translate3d(-100%,0,0);transition-property:opacity,visibility,transform;width:var(--ifm-navbar-sidebar-width)}.navbar-sidebar--show .navbar-sidebar,.navbar-sidebar__items{transform:translateZ(0)}.navbar-sidebar--show .navbar-sidebar,.navbar-sidebar--show .navbar-sidebar__backdrop{opacity:1;visibility:visible}.navbar-sidebar__backdrop{background-color:#0009;right:0;transition-property:opacity,visibility}.navbar-sidebar__brand{align-items:center;box-shadow:var(--ifm-navbar-shadow);display:flex;flex:1;height:var(--ifm-navbar-height);padding:var(--ifm-navbar-padding-vertical) var(--ifm-navbar-padding-horizontal)}.navbar-sidebar__items{display:flex;height:calc(100% - var(--ifm-navbar-height));transition:transform var(--ifm-transition-fast) ease-in-out}.navbar-sidebar__items--show-secondary{transform:translate3d(calc((var(--ifm-navbar-sidebar-width))*-1),0,0)}.navbar-sidebar__item{flex-shrink:0;padding:.5rem;width:calc(var(--ifm-navbar-sidebar-width))}.navbar-sidebar__back{background:var(--ifm-menu-color-background-active);font-size:15px;font-weight:var(--ifm-button-font-weight);margin:0 0 .2rem -.5rem;padding:.6rem 1.5rem;position:relative;text-align:left;top:-.5rem;width:calc(100% + 1rem)}.navbar-sidebar__close{display:flex;margin-left:auto}.pagination{column-gap:var(--ifm-pagination-page-spacing);display:flex;font-size:var(--ifm-pagination-font-size);padding-left:0}.pagination--sm{--ifm-pagination-font-size:0.8rem;--ifm-pagination-padding-horizontal:0.8rem;--ifm-pagination-padding-vertical:0.2rem}.pagination--lg{--ifm-pagination-font-size:1.2rem;--ifm-pagination-padding-horizontal:1.2rem;--ifm-pagination-padding-vertical:0.3rem}.pagination__item{display:inline-flex}.pagination__item>span{padding:var(--ifm-pagination-padding-vertical)}.pagination__item--active .pagination__link{color:var(--ifm-pagination-color-active)}.pagination__item--active .pagination__link,.pagination__item:not(.pagination__item--active):hover .pagination__link{background:var(--ifm-pagination-item-active-background)}.pagination__item--disabled,.pagination__item[disabled]{opacity:.25;pointer-events:none}.pagination__link{border-radius:var(--ifm-pagination-border-radius);color:var(--ifm-font-color-base);display:inline-block;padding:var(--ifm-pagination-padding-vertical) var(--ifm-pagination-padding-horizontal);transition:background var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.pagination-nav{display:grid;grid-gap:var(--ifm-spacing-horizontal);gap:var(--ifm-spacing-horizontal);grid-template-columns:repeat(2,1fr)}.pagination-nav__link{border:1px solid var(--ifm-color-emphasis-300);border-radius:var(--ifm-pagination-nav-border-radius);display:block;height:100%;line-height:var(--ifm-heading-line-height);padding:var(--ifm-global-spacing);transition:border-color var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.pagination-nav__link:hover{border-color:var(--ifm-pagination-nav-color-hover)}.pagination-nav__link--next{grid-column:2/3;text-align:right}.pagination-nav__label{font-size:var(--ifm-h4-font-size);font-weight:var(--ifm-heading-font-weight);word-break:break-word}.pagination-nav__link--prev .pagination-nav__label:before{content:"« "}.pagination-nav__link--next .pagination-nav__label:after{content:" »"}.pagination-nav__sublabel{color:var(--ifm-color-content-secondary);font-size:var(--ifm-h5-font-size);font-weight:var(--ifm-font-weight-semibold);margin-bottom:.25rem}.pills__item,.tabs{font-weight:var(--ifm-font-weight-bold)}.pills{display:flex;gap:var(--ifm-pills-spacing);padding-left:0}.pills__item{border-radius:.5rem;cursor:pointer;display:inline-block;padding:.25rem 1rem;transition:background var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.pills__item--active{color:var(--ifm-pills-color-active)}.pills__item--active,.pills__item:not(.pills__item--active):hover{background:var(--ifm-pills-color-background-active)}.pills--block{justify-content:stretch}.pills--block .pills__item{flex-grow:1;text-align:center}.tabs{color:var(--ifm-tabs-color);display:flex;margin-bottom:0;overflow-x:auto;padding-left:0}.tabs__item{border-bottom:3px solid #0000;border-radius:var(--ifm-global-radius);cursor:pointer;display:inline-flex;padding:var(--ifm-tabs-padding-vertical) var(--ifm-tabs-padding-horizontal);transition:background-color var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.tabs__item--active{border-bottom-color:var(--ifm-tabs-color-active-border);border-bottom-left-radius:0;border-bottom-right-radius:0;color:var(--ifm-tabs-color-active)}.tabs__item:hover{background-color:var(--ifm-hover-overlay)}.tabs--block{justify-content:stretch}.tabs--block .tabs__item{flex-grow:1;justify-content:center}html[data-theme=dark]{--ifm-color-scheme:dark;--ifm-color-emphasis-0:var(--ifm-color-gray-1000);--ifm-color-emphasis-100:var(--ifm-color-gray-900);--ifm-color-emphasis-200:var(--ifm-color-gray-800);--ifm-color-emphasis-300:var(--ifm-color-gray-700);--ifm-color-emphasis-400:var(--ifm-color-gray-600);--ifm-color-emphasis-600:var(--ifm-color-gray-400);--ifm-color-emphasis-700:var(--ifm-color-gray-300);--ifm-color-emphasis-800:var(--ifm-color-gray-200);--ifm-color-emphasis-900:var(--ifm-color-gray-100);--ifm-color-emphasis-1000:var(--ifm-color-gray-0);--ifm-background-color:#1b1b1d;--ifm-background-surface-color:#242526;--ifm-hover-overlay:#ffffff0d;--ifm-color-content:#e3e3e3;--ifm-color-content-secondary:#fff;--ifm-breadcrumb-separator-filter:invert(64%) sepia(11%) saturate(0%) hue-rotate(149deg) brightness(99%) contrast(95%);--ifm-code-background:#ffffff1a;--ifm-scrollbar-track-background-color:#444;--ifm-scrollbar-thumb-background-color:#686868;--ifm-scrollbar-thumb-hover-background-color:#7a7a7a;--ifm-table-stripe-background:#ffffff12;--ifm-toc-border-color:var(--ifm-color-emphasis-200);--ifm-color-primary-contrast-background:#102445;--ifm-color-primary-contrast-foreground:#ebf2fc;--ifm-color-secondary-contrast-background:#474748;--ifm-color-secondary-contrast-foreground:#fdfdfe;--ifm-color-success-contrast-background:#003100;--ifm-color-success-contrast-foreground:#e6f6e6;--ifm-color-info-contrast-background:#193c47;--ifm-color-info-contrast-foreground:#eef9fd;--ifm-color-warning-contrast-background:#4d3800;--ifm-color-warning-contrast-foreground:#fff8e6;--ifm-color-danger-contrast-background:#4b1113;--ifm-color-danger-contrast-foreground:#ffebec}#nprogress .bar{background:var(--docusaurus-progress-bar-color);height:2px;left:0;position:fixed;top:0;width:100%;z-index:1031}#nprogress .peg{box-shadow:0 0 10px var(--docusaurus-progress-bar-color),0 0 5px var(--docusaurus-progress-bar-color);height:100%;opacity:1;position:absolute;right:0;transform:rotate(3deg) translateY(-4px);width:100px}.backToTopButton_sjWU{background-color:var(--ifm-color-emphasis-200);border-radius:50%;bottom:1.3rem;box-shadow:var(--ifm-global-shadow-lw);height:3rem;opacity:0;position:fixed;right:1.3rem;transform:scale(0);transition:all var(--ifm-transition-fast) var(--ifm-transition-timing-default);visibility:hidden;width:3rem;z-index:calc(var(--ifm-z-index-fixed) - 1)}.backToTopButton_sjWU:after{background-color:var(--ifm-color-emphasis-1000);content:" ";display:inline-block;height:100%;-webkit-mask:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem no-repeat;mask:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem no-repeat;width:100%}.backToTopButtonShow_xfvO{opacity:1;transform:scale(1);visibility:visible}.skipToContent_fXgn{background-color:var(--ifm-background-surface-color);color:var(--ifm-color-emphasis-900);left:100%;padding:calc(var(--ifm-global-spacing)/2) var(--ifm-global-spacing);position:fixed;top:1rem;z-index:calc(var(--ifm-z-index-fixed) + 1)}.skipToContent_fXgn:focus{box-shadow:var(--ifm-global-shadow-md);left:1rem}.closeButton_CVFx{line-height:0;padding:0}.content_knG7{font-size:85%;padding:5px 0;text-align:center}.content_knG7 a{color:inherit}.announcementBar_mb4j{align-items:center;background-color:var(--ifm-color-white);border-bottom:1px solid var(--ifm-color-emphasis-100);color:var(--ifm-color-black);display:flex;height:var(--docusaurus-announcement-bar-height)}#__docusaurus-base-url-issue-banner-container,.docSidebarContainer_YfHR,.hideAction_vcyE>svg,.navbarSearchContainer_Bca1:empty,.sidebarLogo_isFc,.themedComponent_mlkZ,[data-theme=dark] .lightToggleIcon_pyhR,[data-theme=light] .darkToggleIcon_wfgR,html[data-announcement-bar-initially-dismissed=true] .announcementBar_mb4j{display:none}.announcementBarPlaceholder_vyr4{flex:0 0 10px}.announcementBarClose_gvF7{align-self:stretch;flex:0 0 30px}.toggle_vylO{height:2rem;width:2rem}.toggleButton_gllP{align-items:center;border-radius:50%;display:flex;height:100%;justify-content:center;transition:background var(--ifm-transition-fast);width:100%}.toggleButton_gllP:hover{background:var(--ifm-color-emphasis-200)}.toggleButtonDisabled_aARS{cursor:not-allowed}.darkNavbarColorModeToggle_X3D1:hover{background:var(--ifm-color-gray-800)}[data-theme=dark] .themedComponent--dark_xIcU,[data-theme=light] .themedComponent--light_NVdE,html:not([data-theme]) .themedComponent--light_NVdE{display:initial}[data-theme=dark]:root{--docusaurus-collapse-button-bg:#ffffff0d;--docusaurus-collapse-button-bg-hover:#ffffff1a}.collapseSidebarButton_PEFL{display:none;margin:0}.iconExternalLink_nPIU{margin-left:.3rem}.docMainContainer_TBSr,.docRoot_UBD9{display:flex;width:100%}.docsWrapper_hBAB{display:flex;flex:1 0 auto}.dropdownNavbarItemMobile_S0Fm{cursor:pointer}.iconLanguage_nlXk{margin-right:5px;vertical-align:text-bottom}.searchBar_RVTs .dropdownMenu_qbY6{background:var(--search-local-modal-background,#f5f6f7);border-radius:6px;box-shadow:var(--search-local-modal-shadow,inset 1px 1px 0 0 #ffffff80,0 3px 8px 0 #555a64);left:auto!important;margin-top:8px;padding:var(--search-local-spacing,12px);position:relative;right:0!important;width:var(--search-local-modal-width,560px)}html[data-theme=dark] .searchBar_RVTs .dropdownMenu_qbY6{background:var(--search-local-modal-background,var(--ifm-background-color));box-shadow:var(--search-local-modal-shadow,inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309)}.searchBar_RVTs .dropdownMenu_qbY6 .suggestion_fB_2{align-items:center;background:var(--search-local-hit-background,#fff);border-radius:4px;box-shadow:var(--search-local-hit-shadow,0 1px 3px 0 #d4d9e1);color:var(--search-local-hit-color,#444950);cursor:pointer;display:flex;flex-direction:row;height:var(--search-local-hit-height,56px);padding:0 var(--search-local-spacing,12px);width:100%}.hitTree_kk6K,.noResults_l6Q3{align-items:center;display:flex}html[data-theme=dark] .dropdownMenu_qbY6 .suggestion_fB_2{background:var(--search-local-hit-background,var(--ifm-color-emphasis-100));box-shadow:var(--search-local-hit-shadow,none);color:var(--search-local-hit-color,var(--ifm-font-color-base))}.searchBar_RVTs .dropdownMenu_qbY6 .suggestion_fB_2:not(:last-child){margin-bottom:4px}.searchBar_RVTs .dropdownMenu_qbY6 .suggestion_fB_2.cursor_eG29{background-color:var(--search-local-highlight-color,var(--ifm-color-primary))}.hitFooter_E9YW a,.hitIcon_a7Zy,.hitPath_ieM4,.hitTree_kk6K,.noResultsIcon_EBY5{color:var(--search-local-muted-color,#969faf)}html[data-theme=dark] .hitIcon_a7Zy,html[data-theme=dark] .hitPath_ieM4,html[data-theme=dark] .hitTree_kk6K,html[data-theme=dark] .noResultsIcon_EBY5{color:var(--search-local-muted-color,var(--ifm-color-secondary-darkest))}.hitTree_kk6K>svg{height:var(--search-local-hit-height,56px);opacity:.5;width:24px}.hitIcon_a7Zy,.hitTree_kk6K>svg{stroke-width:var(--search-local-icon-stroke-width,1.4)}.hitAction_NqkB,.hitIcon_a7Zy{height:20px;width:20px}.hitWrapper_sAK8{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;margin:0 8px;overflow-x:hidden;width:80%}.hitWrapper_sAK8 mark{background:none;color:var(--search-local-highlight-color,var(--ifm-color-primary))}.hitTitle_vyVt{font-size:.9em}.hitPath_ieM4{font-size:.75em}.hitPath_ieM4,.hitTitle_vyVt{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.noResults_l6Q3{flex-direction:column;justify-content:center;padding:var(--search-local-spacing,12px) 0}.noResultsIcon_EBY5{margin-bottom:var(--search-local-spacing,12px)}.hitFooter_E9YW{font-size:.85em;margin-top:var(--search-local-spacing,12px);text-align:center}.cursor_eG29 .hideAction_vcyE>svg,.tocCollapsibleContent_vkbj a{display:block}.suggestion_fB_2.cursor_eG29,.suggestion_fB_2.cursor_eG29 .hitIcon_a7Zy,.suggestion_fB_2.cursor_eG29 .hitPath_ieM4,.suggestion_fB_2.cursor_eG29 .hitTree_kk6K,.suggestion_fB_2.cursor_eG29 mark{color:var(--search-local-hit-active-color,var(--ifm-color-white))!important}.searchBarContainer_NW3z{margin-left:16px}.searchBarContainer_NW3z .searchBarLoadingRing_YnHq{display:none;left:10px;position:absolute;top:6px}.searchBarContainer_NW3z .searchClearButton_qk4g{background:none;border:none;line-height:1rem;padding:0;position:absolute;right:.8rem;top:50%;transform:translateY(-50%)}.navbar__search{position:relative}.searchIndexLoading_EJ1f .navbar__search-input{background-image:none}.searchHintContainer_Pkmr{align-items:center;display:flex;gap:4px;height:100%;justify-content:center;pointer-events:none;position:absolute;right:10px;top:0}.searchHint_iIMx{background-color:var(--ifm-navbar-search-input-background-color);border:1px solid var(--ifm-color-emphasis-500);box-shadow:inset 0 -1px 0 var(--ifm-color-emphasis-500);color:var(--ifm-navbar-search-input-placeholder-color)}html[dir=rtl] .searchHintContainer_Pkmr{left:10px;right:auto}html[dir=rtl] .searchBarContainer_NW3z .searchClearButton_qk4g{left:.8rem;right:auto}html[dir=rtl] .searchBarContainer_NW3z .searchBarLoadingRing_YnHq{left:auto;right:10px}html[dir=rtl] .navbar__search-input{padding:0 2.25em 0 .5em}.loadingRing_RJI3{display:inline-block;height:20px;opacity:var(--search-local-loading-icon-opacity,.5);position:relative;width:20px}.authorSocialIcon_XYv3,.authorSocialLink_owbf,.authorSocials_rSDt{height:var(--docusaurus-blog-social-icon-size)}.loadingRing_RJI3 div{animation:1.2s cubic-bezier(.5,0,.5,1) infinite a;border:2px solid var(--search-load-loading-icon-color,var(--ifm-navbar-search-input-color));border-color:var(--search-load-loading-icon-color,var(--ifm-navbar-search-input-color)) #0000 #0000 #0000;border-radius:50%;display:block;height:16px;margin:2px;position:absolute;width:16px}.loadingRing_RJI3 div:first-child{animation-delay:-.45s}.loadingRing_RJI3 div:nth-child(2){animation-delay:-.3s}.loadingRing_RJI3 div:nth-child(3){animation-delay:-.15s}@keyframes a{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.navbarHideable_m1mJ{transition:transform var(--ifm-transition-fast) ease}.navbarHidden_jGov{transform:translate3d(0,calc(-100% - 2px),0)}.errorBoundaryError_a6uf{color:red;white-space:pre-wrap}.errorBoundaryFallback_VBag{color:red;padding:.55rem}.footerLogoLink_BH7S{opacity:.5;transition:opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.footerLogoLink_BH7S:hover,.hash-link:focus,:hover>.hash-link{opacity:1}body:not(.navigation-with-keyboard) :not(input):focus{outline:0}.anchorWithStickyNavbar_LWe7{scroll-margin-top:calc(var(--ifm-navbar-height) + .5rem)}.anchorWithHideOnScrollNavbar_WYt5{scroll-margin-top:.5rem}.hash-link{opacity:0;padding-left:.5rem;transition:opacity var(--ifm-transition-fast);-webkit-user-select:none;user-select:none}.hash-link:before{content:"#"}.mainWrapper_z2l0{display:flex;flex:1 0 auto;flex-direction:column}.docusaurus-mt-lg{margin-top:3rem}#__docusaurus{display:flex;flex-direction:column;min-height:100%}.sidebar_re4s{overflow-y:auto;position:sticky;top:calc(var(--ifm-navbar-height) + 2rem)}.authorSocials_rSDt,.authorTitle_nd0D{overflow:hidden;-webkit-box-orient:vertical}.sidebarItemTitle_pO2u{font-size:var(--ifm-h3-font-size);font-weight:var(--ifm-font-weight-bold)}.container_mt6G,.sidebarItemList_Yudw{font-size:.9rem}.sidebarItem__DBe{margin-top:.7rem}.sidebarItemLink_mo7H{color:var(--ifm-font-color-base);display:block}.sidebarItemLinkActive_I1ZP{color:var(--ifm-color-primary)!important}.yearGroupHeading_rMGB{margin-bottom:.4rem;margin-top:1.6rem}.yearGroupHeading_QT03{margin:1rem .75rem .5rem}.cardContainer_fWXF{--ifm-link-color:var(--ifm-color-emphasis-800);--ifm-link-hover-color:var(--ifm-color-emphasis-700);--ifm-link-hover-decoration:none;border:1px solid var(--ifm-color-emphasis-200);box-shadow:0 1.5px 3px 0 #00000026;transition:all var(--ifm-transition-fast) ease;transition-property:border,box-shadow}.cardContainer_fWXF:hover{border-color:var(--ifm-color-primary);box-shadow:0 3px 6px 0 #0003}.cardTitle_rnsV{font-size:1.2rem}.cardDescription_PWke{font-size:.8rem}.searchContextInput_mXoe,.searchQueryInput_CFBF{background:var(--ifm-background-color);border:var(--ifm-global-border-width) solid var(--ifm-color-content-secondary);border-radius:var(--ifm-global-radius);color:var(--ifm-font-color-base);font-size:var(--ifm-font-size-base);margin-bottom:1rem;padding:.5rem;width:100%}.authorSocialIcon_XYv3,.authorSocialLink_owbf{width:var(--docusaurus-blog-social-icon-size)}.searchResultItem_U687{border-bottom:1px solid #dfe3e8;padding:1rem 0}.searchResultItemPath_uIbk{color:var(--ifm-color-content-secondary);font-size:.8rem;margin:.5rem 0 0}.searchResultItemSummary_oZHr{font-style:italic;margin:.5rem 0 0}[data-theme=dark] .githubSvg_Uu4N,[data-theme=dark] .instagramSvg_YC40,[data-theme=dark] .threadsSvg_PTXY,[data-theme=dark] .xSvg_y3PF{fill:var(--light)}[data-theme=light] .githubSvg_Uu4N,[data-theme=light] .instagramSvg_YC40,[data-theme=light] .threadsSvg_PTXY,[data-theme=light] .xSvg_y3PF{fill:var(--dark)}.authorSocials_rSDt{align-items:center;display:flex;flex-wrap:wrap;line-clamp:1;-webkit-line-clamp:1}.authorSocialLink_owbf,.authorSocials_rSDt{line-height:0}.authorSocialLink_owbf{margin-right:.4rem}.authorImage_XqGP{--ifm-avatar-photo-size:3.6rem}.author-as-h1_n9oJ .authorImage_XqGP{--ifm-avatar-photo-size:7rem}.author-as-h2_gXvM .authorImage_XqGP{--ifm-avatar-photo-size:5.4rem}.authorDetails_lV9A{align-items:flex-start;display:flex;flex-direction:column;justify-content:space-around}.authorName_yefp{display:flex;flex-direction:row;font-size:1.1rem;line-height:1.1rem}.author-as-h1_n9oJ .authorName_yefp{display:inline;font-size:2.4rem;line-height:2.4rem}.author-as-h2_gXvM .authorName_yefp{display:inline;font-size:1.4rem;line-height:1.4rem}.authorTitle_nd0D{display:-webkit-box;font-size:.8rem;line-height:1rem;line-clamp:1;-webkit-line-clamp:1}.author-as-h1_n9oJ .authorTitle_nd0D{font-size:1.2rem;line-height:1.6rem}.author-as-h2_gXvM .authorTitle_nd0D{font-size:1rem;line-height:1.3rem}.authorBlogPostCount_iiJ5{background:var(--ifm-color-secondary);border-radius:var(--ifm-global-radius);color:var(--ifm-color-black);font-size:.8rem;line-height:1.2;margin-left:.3rem;padding:.1rem .4rem}.buttonGroup__atx button,.codeBlockContainer_Ckt0{background:var(--prism-background-color);color:var(--prism-color)}.authorCol_Hf19{max-width:inherit!important}.imageOnlyAuthorRow_pa_O{display:flex;flex-flow:row wrap}.imageOnlyAuthorCol_G86a{margin-left:.3rem;margin-right:.3rem}.codeBlockContainer_Ckt0{border-radius:var(--ifm-code-border-radius);box-shadow:var(--ifm-global-shadow-lw);margin-bottom:var(--ifm-leading)}.codeBlockContent_biex{border-radius:inherit;direction:ltr;position:relative}.codeBlockTitle_Ktv7{border-bottom:1px solid var(--ifm-color-emphasis-300);border-top-left-radius:inherit;border-top-right-radius:inherit;font-size:var(--ifm-code-font-size);font-weight:500;padding:.75rem var(--ifm-pre-padding)}.codeBlock_bY9V{--ifm-pre-background:var(--prism-background-color);margin:0;padding:0}.codeBlockTitle_Ktv7+.codeBlockContent_biex .codeBlock_bY9V{border-top-left-radius:0;border-top-right-radius:0}.codeBlockLines_e6Vv{float:left;font:inherit;min-width:100%;padding:var(--ifm-pre-padding)}.codeBlockLinesWithNumbering_o6Pm{display:table;padding:var(--ifm-pre-padding) 0}.buttonGroup__atx{column-gap:.2rem;display:flex;position:absolute;right:calc(var(--ifm-pre-padding)/2);top:calc(var(--ifm-pre-padding)/2)}.buttonGroup__atx button{align-items:center;border:1px solid var(--ifm-color-emphasis-300);border-radius:var(--ifm-global-radius);display:flex;line-height:0;opacity:0;padding:.4rem;transition:opacity var(--ifm-transition-fast) ease-in-out}.buttonGroup__atx button:focus-visible,.buttonGroup__atx button:hover{opacity:1!important}.theme-code-block:hover .buttonGroup__atx button{opacity:.4}:where(:root){--docusaurus-highlighted-code-line-bg:#484d5b}:where([data-theme=dark]){--docusaurus-highlighted-code-line-bg:#646464}.theme-code-block-highlighted-line{background-color:var(--docusaurus-highlighted-code-line-bg);display:block;margin:0 calc(var(--ifm-pre-padding)*-1);padding:0 var(--ifm-pre-padding)}.codeLine_lJS_{counter-increment:a;display:table-row}.codeLineNumber_Tfdd{background:var(--ifm-pre-background);display:table-cell;left:0;overflow-wrap:normal;padding:0 var(--ifm-pre-padding);position:sticky;text-align:right;width:1%}.codeLineNumber_Tfdd:before{content:counter(a);opacity:.4}.codeLineContent_feaV{padding-right:var(--ifm-pre-padding)}.theme-code-block:hover .copyButtonCopied_obH4{opacity:1!important}.copyButtonIcons_eSgA{height:1.125rem;position:relative;width:1.125rem}.copyButtonIcon_y97N,.copyButtonSuccessIcon_LjdS{left:0;position:absolute;top:0;fill:currentColor;height:inherit;opacity:inherit;transition:all var(--ifm-transition-fast) ease;width:inherit}.copyButtonSuccessIcon_LjdS{color:#00d600;left:50%;opacity:0;top:50%;transform:translate(-50%,-50%) scale(.33)}.copyButtonCopied_obH4 .copyButtonIcon_y97N{opacity:0;transform:scale(.33)}.copyButtonCopied_obH4 .copyButtonSuccessIcon_LjdS{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:75ms}.tag_zVej{border:1px solid var(--docusaurus-tag-list-border);transition:border var(--ifm-transition-fast)}.tag_zVej:hover{--docusaurus-tag-list-border:var(--ifm-link-color)}.tagRegular_sFm0{border-radius:var(--ifm-global-radius);font-size:90%;padding:.2rem .5rem .3rem}.tagWithCount_h2kH{align-items:center;border-left:0;display:flex;padding:0 .5rem 0 1rem;position:relative}.tagWithCount_h2kH:after,.tagWithCount_h2kH:before{border:1px solid var(--docusaurus-tag-list-border);content:"";position:absolute;top:50%;transition:inherit}.tagWithCount_h2kH:before{border-bottom:0;border-right:0;height:1.18rem;right:100%;transform:translate(50%,-50%) rotate(-45deg);width:1.18rem}.tagWithCount_h2kH:after{border-radius:50%;height:.5rem;left:0;transform:translateY(-50%);width:.5rem}.tagWithCount_h2kH span{background:var(--ifm-color-secondary);border-radius:var(--ifm-global-radius);color:var(--ifm-color-black);font-size:.7rem;line-height:1.2;margin-left:.3rem;padding:.1rem .4rem}.tag_Nnez{display:inline-block;margin:.5rem .5rem 0 1rem}.wordWrapButtonIcon_Bwma{height:1.2rem;width:1.2rem}.tags_jXut{display:inline}.tag_QGVx{display:inline-block;margin:0 .4rem .5rem 0}.iconEdit_Z9Sw{margin-right:.3em;vertical-align:sub}.lastUpdated_JAkA{font-size:smaller;font-style:italic;margin-top:.2rem}.tocCollapsibleButton_TO0P{align-items:center;display:flex;font-size:inherit;justify-content:space-between;padding:.4rem .8rem;width:100%}.tocCollapsibleButton_TO0P:after{background:var(--ifm-menu-link-sublist-icon) 50% 50%/2rem 2rem no-repeat;content:"";filter:var(--ifm-menu-link-sublist-icon-filter);height:1.25rem;transform:rotate(180deg);transition:transform var(--ifm-transition-fast);width:1.25rem}.tocCollapsibleButtonExpanded_MG3E:after,.tocCollapsibleExpanded_sAul{transform:none}.tocCollapsible_ETCw{background-color:var(--ifm-menu-color-background-active);border-radius:var(--ifm-global-radius);margin:1rem 0}.tocCollapsibleContent_vkbj>ul{border-left:none;border-top:1px solid var(--ifm-color-emphasis-300);font-size:15px;padding:.2rem 0}.tocCollapsibleContent_vkbj ul li{margin:.4rem .8rem}.details_lb9f{--docusaurus-details-summary-arrow-size:0.38rem;--docusaurus-details-transition:transform 200ms ease;--docusaurus-details-decoration-color:grey}.details_lb9f>summary{cursor:pointer;padding-left:1rem;position:relative}.details_lb9f>summary::-webkit-details-marker{display:none}.details_lb9f>summary:before{border-color:#0000 #0000 #0000 var(--docusaurus-details-decoration-color);border-style:solid;border-width:var(--docusaurus-details-summary-arrow-size);content:"";left:0;position:absolute;top:.45rem;transform:rotate(0);transform-origin:calc(var(--docusaurus-details-summary-arrow-size)/2) 50%;transition:var(--docusaurus-details-transition)}.collapsibleContent_i85q{border-top:1px solid var(--docusaurus-details-decoration-color);margin-top:1rem;padding-top:1rem}.details_b_Ee{--docusaurus-details-decoration-color:var(--ifm-alert-border-color);--docusaurus-details-transition:transform var(--ifm-transition-fast) ease;border:1px solid var(--ifm-alert-border-color);margin:0 0 var(--ifm-spacing-vertical)}:not(.containsTaskList_mC6p>li)>.containsTaskList_mC6p{padding-left:0}.img_ev3q{height:auto}.tableOfContents_bqdL{overflow-y:auto;position:sticky;top:calc(var(--ifm-navbar-height) + 1rem)}.admonition_xJq3{margin-bottom:1em}.admonitionHeading_Gvgb{font:var(--ifm-heading-font-weight) var(--ifm-h5-font-size)/var(--ifm-heading-line-height) var(--ifm-heading-font-family)}.admonitionHeading_Gvgb:not(:last-child){margin-bottom:.3rem}.admonitionHeading_Gvgb code{text-transform:none}.admonitionIcon_Rf37{display:inline-block;margin-right:.4em;vertical-align:middle}.admonitionIcon_Rf37 svg{display:inline-block;height:1.6em;width:1.6em;fill:var(--ifm-alert-foreground-color)}.breadcrumbHomeIcon_YNFT{height:1.1rem;position:relative;top:1px;vertical-align:top;width:1.1rem}.breadcrumbsContainer_Z_bl{--ifm-breadcrumb-size-multiplier:0.8;margin-bottom:.8rem}.title_kItE{--ifm-h1-font-size:3rem;margin-bottom:calc(var(--ifm-leading)*1.25)}@media (min-width:997px){.collapseSidebarButton_PEFL,.expandButton_TmdG{background-color:var(--docusaurus-collapse-button-bg)}:root{--docusaurus-announcement-bar-height:30px}.announcementBarClose_gvF7,.announcementBarPlaceholder_vyr4{flex-basis:50px}.collapseSidebarButton_PEFL{border:1px solid var(--ifm-toc-border-color);border-radius:0;bottom:0;display:block!important;height:40px;position:sticky}.collapseSidebarButtonIcon_kv0_{margin-top:4px;transform:rotate(180deg)}.expandButtonIcon_i1dp,[dir=rtl] .collapseSidebarButtonIcon_kv0_{transform:rotate(0)}.collapseSidebarButton_PEFL:focus,.collapseSidebarButton_PEFL:hover,.expandButton_TmdG:focus,.expandButton_TmdG:hover{background-color:var(--docusaurus-collapse-button-bg-hover)}.menuHtmlItem_M9Kj{padding:var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal)}.menu_SIkG{flex-grow:1;padding:.5rem}@supports (scrollbar-gutter:stable){.menu_SIkG{padding:.5rem 0 .5rem .5rem;scrollbar-gutter:stable}}.menuWithAnnouncementBar_GW3s{margin-bottom:var(--docusaurus-announcement-bar-height)}.sidebar_njMd{display:flex;flex-direction:column;height:100%;padding-top:var(--ifm-navbar-height);width:var(--doc-sidebar-width)}.sidebarWithHideableNavbar_wUlq{padding-top:0}.sidebarHidden_VK0M{opacity:0;visibility:hidden}.sidebarLogo_isFc{align-items:center;color:inherit!important;display:flex!important;margin:0 var(--ifm-navbar-padding-horizontal);max-height:var(--ifm-navbar-height);min-height:var(--ifm-navbar-height);-webkit-text-decoration:none!important;text-decoration:none!important}.sidebarLogo_isFc img{height:2rem;margin-right:.5rem}.expandButton_TmdG{align-items:center;display:flex;height:100%;justify-content:center;position:absolute;right:0;top:0;transition:background-color var(--ifm-transition-fast) ease;width:100%}[dir=rtl] .expandButtonIcon_i1dp{transform:rotate(180deg)}.docSidebarContainer_YfHR{border-right:1px solid var(--ifm-toc-border-color);clip-path:inset(0);display:block;margin-top:calc(var(--ifm-navbar-height)*-1);transition:width var(--ifm-transition-fast) ease;width:var(--doc-sidebar-width);will-change:width}.docSidebarContainerHidden_DPk8{cursor:pointer;width:var(--doc-sidebar-hidden-width)}.sidebarViewport_aRkj{height:100%;max-height:100vh;position:sticky;top:0}.docMainContainer_TBSr{flex-grow:1;max-width:calc(100% - var(--doc-sidebar-width))}.docMainContainerEnhanced_lQrH{max-width:calc(100% - var(--doc-sidebar-hidden-width))}.docItemWrapperEnhanced_JWYK{max-width:calc(var(--ifm-container-width) + var(--doc-sidebar-width))!important}.navbarSearchContainer_Bca1{padding:var(--ifm-navbar-item-padding-vertical) var(--ifm-navbar-item-padding-horizontal)}.lastUpdated_JAkA{text-align:right}.tocMobile_ITEo{display:none}.docItemCol_VOVn,.generatedIndexPage_vN6x{max-width:75%!important}.list_eTzJ article:nth-last-child(-n+2){margin-bottom:0!important}}@media (min-width:1440px){.container{max-width:var(--ifm-container-width-xl)}}@media (max-width:996px){.col{--ifm-col-width:100%;flex-basis:var(--ifm-col-width);margin-left:0}.footer{--ifm-footer-padding-horizontal:0}.colorModeToggle_DEke,.footer__link-separator,.navbar__item,.sidebar_re4s,.tableOfContents_bqdL{display:none}.footer__col{margin-bottom:calc(var(--ifm-spacing-vertical)*3)}.footer__link-item{display:block;width:max-content}.hero{padding-left:0;padding-right:0}.navbar>.container,.navbar>.container-fluid{padding:0}.navbar__toggle{display:inherit}.navbar__search-input{width:9rem}.pills--block,.tabs--block{flex-direction:column}.navbarSearchContainer_Bca1{position:absolute;right:var(--ifm-navbar-padding-horizontal)}.docItemContainer_F8PC{padding:0 .3rem}}@media not (max-width:996px){.searchBar_RVTs.searchBarLeft_MXDe .dropdownMenu_qbY6{left:0!important;right:auto!important}}@media only screen and (max-width:996px){.searchQueryColumn_q7nx{max-width:60%!important}.searchContextColumn_oWAF{max-width:40%!important}}@media (max-width:576px){.markdown h1:first-child{--ifm-h1-font-size:2rem}.markdown>h2{--ifm-h2-font-size:1.5rem}.markdown>h3{--ifm-h3-font-size:1.25rem}.navbar__search-input:not(:focus){width:2rem}.searchBar_RVTs .dropdownMenu_qbY6{max-width:calc(100vw - var(--ifm-navbar-padding-horizontal)*2);width:var(--search-local-modal-width-sm,340px)}.searchBarContainer_NW3z:not(.focused_OWtg) .searchClearButton_qk4g,.searchHintContainer_Pkmr{display:none}.title_f1Hy{font-size:2rem}}@media screen and (max-width:576px){.searchQueryColumn_q7nx{max-width:100%!important}.searchContextColumn_oWAF{max-width:100%!important;padding-left:var(--ifm-spacing-horizontal)!important}}@media (hover:hover){.backToTopButton_sjWU:hover{background-color:var(--ifm-color-emphasis-300)}}@media (pointer:fine){.thin-scrollbar{scrollbar-width:thin}.thin-scrollbar::-webkit-scrollbar{height:var(--ifm-scrollbar-size);width:var(--ifm-scrollbar-size)}.thin-scrollbar::-webkit-scrollbar-track{background:var(--ifm-scrollbar-track-background-color);border-radius:10px}.thin-scrollbar::-webkit-scrollbar-thumb{background:var(--ifm-scrollbar-thumb-background-color);border-radius:10px}.thin-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--ifm-scrollbar-thumb-hover-background-color)}}@media (prefers-reduced-motion:reduce){:root{--ifm-transition-fast:0ms;--ifm-transition-slow:0ms}}@media print{.announcementBar_mb4j,.footer,.menu,.navbar,.pagination-nav,.table-of-contents,.tocMobile_ITEo{display:none}.tabs{page-break-inside:avoid}.codeBlockLines_e6Vv{white-space:pre-wrap}} \ No newline at end of file diff --git a/assets/js/01a85c17.2feb7c25.js b/assets/js/01a85c17.2feb7c25.js deleted file mode 100644 index 5f57eb4c..00000000 --- a/assets/js/01a85c17.2feb7c25.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[8209],{9101:(e,t,a)=>{a.d(t,{in:()=>c,OU:()=>P,Ki:()=>A,kJ:()=>b,x:()=>l,e7:()=>m,J_:()=>f,Gx:()=>y});var s=a(6540),n=a(4799),i=a(3512),r=a(4848);function l(){const e=(0,i.A)(),t=e?.data?.blogMetadata;if(!t)throw new Error("useBlogMetadata() can't be called on the current route because the blog metadata could not be found in route context");return t}const o=s.createContext(null);function c(e){let{children:t,content:a,isBlogPostPage:n=!1}=e;const i=function(e){let{content:t,isBlogPostPage:a}=e;return(0,s.useMemo)((()=>({metadata:t.metadata,frontMatter:t.frontMatter,assets:t.assets,toc:t.toc,isBlogPostPage:a})),[t,a])}({content:a,isBlogPostPage:n});return(0,r.jsx)(o.Provider,{value:i,children:t})}function m(){const e=(0,s.useContext)(o);if(null===e)throw new n.dV("BlogPostProvider");return e}var d=a(8180),u=a(7639);const g=e=>new Date(e).toISOString();function h(e){const t=e.map(x);return{author:1===t.length?t[0]:t}}function p(e,t,a){return e?{image:j({imageUrl:t(e,{absolute:!0}),caption:`title image for the blog post: ${a}`})}:{}}function b(e){const{siteConfig:t}=(0,u.A)(),{withBaseUrl:a}=(0,d.hH)(),{metadata:{blogDescription:s,blogTitle:n,permalink:i}}=e,r=`${t.url}${i}`;return{"@context":"https://schema.org","@type":"Blog","@id":r,mainEntityOfPage:r,headline:n,description:s,blogPost:e.items.map((e=>function(e,t,a){const{assets:s,frontMatter:n,metadata:i}=e,{date:r,title:l,description:o,lastUpdatedAt:c}=i,m=s.image??n.image,d=n.keywords??[],u=`${t.url}${i.permalink}`,b=c?g(c):void 0;return{"@type":"BlogPosting","@id":u,mainEntityOfPage:u,url:u,headline:l,name:l,description:o,datePublished:r,...b?{dateModified:b}:{},...h(i.authors),...p(m,a,l),...d?{keywords:d}:{}}}(e.content,t,a)))}}function f(){const e=l(),{assets:t,metadata:a}=m(),{siteConfig:s}=(0,u.A)(),{withBaseUrl:n}=(0,d.hH)(),{date:i,title:r,description:o,frontMatter:c,lastUpdatedAt:b}=a,f=t.image??c.image,x=c.keywords??[],j=b?g(b):void 0,N=`${s.url}${a.permalink}`;return{"@context":"https://schema.org","@type":"BlogPosting","@id":N,mainEntityOfPage:N,url:N,headline:r,name:r,description:o,datePublished:i,...j?{dateModified:j}:{},...h(a.authors),...p(f,n,r),...x?{keywords:x}:{},isPartOf:{"@type":"Blog","@id":`${s.url}${e.blogBasePath}`,name:e.blogTitle}}}function x(e){return{"@type":"Person",...e.name?{name:e.name}:{},...e.title?{description:e.title}:{},...e.url?{url:e.url}:{},...e.email?{email:e.email}:{},...e.imageURL?{image:e.imageURL}:{}}}function j(e){let{imageUrl:t,caption:a}=e;return{"@type":"ImageObject","@id":t,url:t,contentUrl:t,caption:a}}var N=a(6347),v=a(4783),C=a(5167),k=a(260);function y(e){const{pathname:t}=(0,N.zy)();return(0,s.useMemo)((()=>e.filter((e=>function(e,t){return!(e.unlisted&&!(0,k.ys)(e.permalink,t))}(e,t)))),[e,t])}function A(e){const t=(0,C.$z)(e,(e=>`${new Date(e.date).getFullYear()}`)),a=Object.entries(t);return a.reverse(),a}function P(e){let{items:t,ulClassName:a,liClassName:s,linkClassName:n,linkActiveClassName:i}=e;return(0,r.jsx)("ul",{className:a,children:t.map((e=>(0,r.jsx)("li",{className:s,children:(0,r.jsx)(v.A,{isNavLink:!0,to:e.permalink,className:n,activeClassName:i,children:e.title})},e.permalink)))})}},6953:(e,t,a)=>{a.d(t,{A:()=>U});var s=a(6540),n=a(4164),i=a(7635),r=a(2216),l=a(3230),o=a(9101),c=a(6957),m=a(5225),d=a(4848);function u(e){let{year:t,yearGroupHeadingClassName:a,children:s}=e;return(0,d.jsxs)("div",{role:"group",children:[(0,d.jsx)(m.A,{as:"h3",className:a,children:t}),s]})}function g(e){let{items:t,yearGroupHeadingClassName:a,ListComponent:s}=e;if((0,c.p)().blog.sidebar.groupByYear){const e=(0,o.Ki)(t);return(0,d.jsx)(d.Fragment,{children:e.map((e=>{let[t,n]=e;return(0,d.jsx)(u,{year:t,yearGroupHeadingClassName:a,children:(0,d.jsx)(s,{items:n})},t)}))})}return(0,d.jsx)(s,{items:t})}const h=(0,s.memo)(g),p="sidebar_re4s",b="sidebarItemTitle_pO2u",f="sidebarItemList_Yudw",x="sidebarItem__DBe",j="sidebarItemLink_mo7H",N="sidebarItemLinkActive_I1ZP",v="yearGroupHeading_rMGB",C=e=>{let{items:t}=e;return(0,d.jsx)(o.OU,{items:t,ulClassName:(0,n.A)(f,"clean-list"),liClassName:x,linkClassName:j,linkActiveClassName:N})};function k(e){let{sidebar:t}=e;const a=(0,o.Gx)(t.items);return(0,d.jsx)("aside",{className:"col col--3",children:(0,d.jsxs)("nav",{className:(0,n.A)(p,"thin-scrollbar"),"aria-label":(0,l.T)({id:"theme.blog.sidebar.navAriaLabel",message:"Blog recent posts navigation",description:"The ARIA label for recent posts in the blog sidebar"}),children:[(0,d.jsx)("div",{className:(0,n.A)(b,"margin-bottom--md"),children:t.title}),(0,d.jsx)(h,{items:a,ListComponent:C,yearGroupHeadingClassName:v})]})})}const y=(0,s.memo)(k);var A=a(763);const P="yearGroupHeading_QT03",_=e=>{let{items:t}=e;return(0,d.jsx)(o.OU,{items:t,ulClassName:"menu__list",liClassName:"menu__list-item",linkClassName:"menu__link",linkActiveClassName:"menu__link--active"})};function w(e){let{sidebar:t}=e;const a=(0,o.Gx)(t.items);return(0,d.jsx)(h,{items:a,ListComponent:_,yearGroupHeadingClassName:P})}function B(e){return(0,d.jsx)(A.GX,{component:w,props:e})}const G=(0,s.memo)(B);function O(e){let{sidebar:t}=e;const a=(0,r.l)();return t?.items.length?"mobile"===a?(0,d.jsx)(G,{sidebar:t}):(0,d.jsx)(y,{sidebar:t}):null}function U(e){const{sidebar:t,toc:a,children:s,...r}=e,l=t&&t.items.length>0;return(0,d.jsx)(i.A,{...r,children:(0,d.jsx)("div",{className:"container margin-vert--lg",children:(0,d.jsxs)("div",{className:"row",children:[(0,d.jsx)(O,{sidebar:t}),(0,d.jsx)("main",{className:(0,n.A)("col",{"col--7":l,"col--9 col--offset-1":!l}),children:s}),a&&(0,d.jsx)("div",{className:"col col--2",children:a})]})})})}},2482:(e,t,a)=>{a.r(t),a.d(t,{default:()=>b});a(6540);var s=a(4164),n=a(3230);const i=()=>(0,n.T)({id:"theme.tags.tagsPageTitle",message:"Tags",description:"The title of the tag list page"});var r=a(6644),l=a(8630),o=a(6953),c=a(1883),m=a(5225);const d={tag:"tag_Nnez"};var u=a(4848);function g(e){let{letterEntry:t}=e;return(0,u.jsxs)("article",{children:[(0,u.jsx)(m.A,{as:"h2",id:t.letter,children:t.letter}),(0,u.jsx)("ul",{className:"padding--none",children:t.tags.map((e=>(0,u.jsx)("li",{className:d.tag,children:(0,u.jsx)(c.A,{...e})},e.permalink)))}),(0,u.jsx)("hr",{})]})}function h(e){let{tags:t}=e;const a=function(e){const t={};return Object.values(e).forEach((e=>{const a=function(e){return e[0].toUpperCase()}(e.label);t[a]??=[],t[a].push(e)})),Object.entries(t).sort(((e,t)=>{let[a]=e,[s]=t;return a.localeCompare(s)})).map((e=>{let[t,a]=e;return{letter:t,tags:a.sort(((e,t)=>e.label.localeCompare(t.label)))}}))}(t);return(0,u.jsx)("section",{className:"margin-vert--lg",children:a.map((e=>(0,u.jsx)(g,{letterEntry:e},e.letter)))})}var p=a(1210);function b(e){let{tags:t,sidebar:a}=e;const n=i();return(0,u.jsxs)(r.e3,{className:(0,s.A)(l.G.wrapper.blogPages,l.G.page.blogTagsListPage),children:[(0,u.jsx)(r.be,{title:n}),(0,u.jsx)(p.A,{tag:"blog_tags_list"}),(0,u.jsxs)(o.A,{sidebar:a,children:[(0,u.jsx)(m.A,{as:"h1",children:n}),(0,u.jsx)(h,{tags:t})]})]})}},1883:(e,t,a)=>{a.d(t,{A:()=>l});a(6540);var s=a(4164),n=a(4783);const i={tag:"tag_zVej",tagRegular:"tagRegular_sFm0",tagWithCount:"tagWithCount_h2kH"};var r=a(4848);function l(e){let{permalink:t,label:a,count:l,description:o}=e;return(0,r.jsxs)(n.A,{href:t,title:o,className:(0,s.A)(i.tag,l?i.tagWithCount:i.tagRegular),children:[a,l&&(0,r.jsx)("span",{children:l})]})}}}]); \ No newline at end of file diff --git a/assets/js/01a85c17.b778df26.js b/assets/js/01a85c17.b778df26.js new file mode 100644 index 00000000..06d53039 --- /dev/null +++ b/assets/js/01a85c17.b778df26.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[8209],{4096:(e,t,a)=>{a.d(t,{in:()=>c,OU:()=>P,Ki:()=>A,kJ:()=>b,x:()=>l,e7:()=>m,J_:()=>f,Gx:()=>y});var s=a(6540),n=a(9532),i=a(6803),r=a(4848);function l(){const e=(0,i.A)(),t=e?.data?.blogMetadata;if(!t)throw new Error("useBlogMetadata() can't be called on the current route because the blog metadata could not be found in route context");return t}const o=s.createContext(null);function c(e){let{children:t,content:a,isBlogPostPage:n=!1}=e;const i=function(e){let{content:t,isBlogPostPage:a}=e;return(0,s.useMemo)((()=>({metadata:t.metadata,frontMatter:t.frontMatter,assets:t.assets,toc:t.toc,isBlogPostPage:a})),[t,a])}({content:a,isBlogPostPage:n});return(0,r.jsx)(o.Provider,{value:i,children:t})}function m(){const e=(0,s.useContext)(o);if(null===e)throw new n.dV("BlogPostProvider");return e}var d=a(6025),u=a(4586);const g=e=>new Date(e).toISOString();function h(e){const t=e.map(x);return{author:1===t.length?t[0]:t}}function p(e,t,a){return e?{image:j({imageUrl:t(e,{absolute:!0}),caption:`title image for the blog post: ${a}`})}:{}}function b(e){const{siteConfig:t}=(0,u.A)(),{withBaseUrl:a}=(0,d.hH)(),{metadata:{blogDescription:s,blogTitle:n,permalink:i}}=e,r=`${t.url}${i}`;return{"@context":"https://schema.org","@type":"Blog","@id":r,mainEntityOfPage:r,headline:n,description:s,blogPost:e.items.map((e=>function(e,t,a){const{assets:s,frontMatter:n,metadata:i}=e,{date:r,title:l,description:o,lastUpdatedAt:c}=i,m=s.image??n.image,d=n.keywords??[],u=`${t.url}${i.permalink}`,b=c?g(c):void 0;return{"@type":"BlogPosting","@id":u,mainEntityOfPage:u,url:u,headline:l,name:l,description:o,datePublished:r,...b?{dateModified:b}:{},...h(i.authors),...p(m,a,l),...d?{keywords:d}:{}}}(e.content,t,a)))}}function f(){const e=l(),{assets:t,metadata:a}=m(),{siteConfig:s}=(0,u.A)(),{withBaseUrl:n}=(0,d.hH)(),{date:i,title:r,description:o,frontMatter:c,lastUpdatedAt:b}=a,f=t.image??c.image,x=c.keywords??[],j=b?g(b):void 0,N=`${s.url}${a.permalink}`;return{"@context":"https://schema.org","@type":"BlogPosting","@id":N,mainEntityOfPage:N,url:N,headline:r,name:r,description:o,datePublished:i,...j?{dateModified:j}:{},...h(a.authors),...p(f,n,r),...x?{keywords:x}:{},isPartOf:{"@type":"Blog","@id":`${s.url}${e.blogBasePath}`,name:e.blogTitle}}}function x(e){return{"@type":"Person",...e.name?{name:e.name}:{},...e.title?{description:e.title}:{},...e.url?{url:e.url}:{},...e.email?{email:e.email}:{},...e.imageURL?{image:e.imageURL}:{}}}function j(e){let{imageUrl:t,caption:a}=e;return{"@type":"ImageObject","@id":t,url:t,contentUrl:t,caption:a}}var N=a(6347),v=a(8774),C=a(1682),k=a(9169);function y(e){const{pathname:t}=(0,N.zy)();return(0,s.useMemo)((()=>e.filter((e=>function(e,t){return!(e.unlisted&&!(0,k.ys)(e.permalink,t))}(e,t)))),[e,t])}function A(e){const t=(0,C.$z)(e,(e=>`${new Date(e.date).getFullYear()}`)),a=Object.entries(t);return a.reverse(),a}function P(e){let{items:t,ulClassName:a,liClassName:s,linkClassName:n,linkActiveClassName:i}=e;return(0,r.jsx)("ul",{className:a,children:t.map((e=>(0,r.jsx)("li",{className:s,children:(0,r.jsx)(v.A,{isNavLink:!0,to:e.permalink,className:n,activeClassName:i,children:e.title})},e.permalink)))})}},8027:(e,t,a)=>{a.d(t,{A:()=>U});var s=a(6540),n=a(4164),i=a(7823),r=a(4581),l=a(1312),o=a(4096),c=a(6342),m=a(1107),d=a(4848);function u(e){let{year:t,yearGroupHeadingClassName:a,children:s}=e;return(0,d.jsxs)("div",{role:"group",children:[(0,d.jsx)(m.A,{as:"h3",className:a,children:t}),s]})}function g(e){let{items:t,yearGroupHeadingClassName:a,ListComponent:s}=e;if((0,c.p)().blog.sidebar.groupByYear){const e=(0,o.Ki)(t);return(0,d.jsx)(d.Fragment,{children:e.map((e=>{let[t,n]=e;return(0,d.jsx)(u,{year:t,yearGroupHeadingClassName:a,children:(0,d.jsx)(s,{items:n})},t)}))})}return(0,d.jsx)(s,{items:t})}const h=(0,s.memo)(g),p="sidebar_re4s",b="sidebarItemTitle_pO2u",f="sidebarItemList_Yudw",x="sidebarItem__DBe",j="sidebarItemLink_mo7H",N="sidebarItemLinkActive_I1ZP",v="yearGroupHeading_rMGB",C=e=>{let{items:t}=e;return(0,d.jsx)(o.OU,{items:t,ulClassName:(0,n.A)(f,"clean-list"),liClassName:x,linkClassName:j,linkActiveClassName:N})};function k(e){let{sidebar:t}=e;const a=(0,o.Gx)(t.items);return(0,d.jsx)("aside",{className:"col col--3",children:(0,d.jsxs)("nav",{className:(0,n.A)(p,"thin-scrollbar"),"aria-label":(0,l.T)({id:"theme.blog.sidebar.navAriaLabel",message:"Blog recent posts navigation",description:"The ARIA label for recent posts in the blog sidebar"}),children:[(0,d.jsx)("div",{className:(0,n.A)(b,"margin-bottom--md"),children:t.title}),(0,d.jsx)(h,{items:a,ListComponent:C,yearGroupHeadingClassName:v})]})})}const y=(0,s.memo)(k);var A=a(5600);const P="yearGroupHeading_QT03",_=e=>{let{items:t}=e;return(0,d.jsx)(o.OU,{items:t,ulClassName:"menu__list",liClassName:"menu__list-item",linkClassName:"menu__link",linkActiveClassName:"menu__link--active"})};function w(e){let{sidebar:t}=e;const a=(0,o.Gx)(t.items);return(0,d.jsx)(h,{items:a,ListComponent:_,yearGroupHeadingClassName:P})}function B(e){return(0,d.jsx)(A.GX,{component:w,props:e})}const G=(0,s.memo)(B);function O(e){let{sidebar:t}=e;const a=(0,r.l)();return t?.items.length?"mobile"===a?(0,d.jsx)(G,{sidebar:t}):(0,d.jsx)(y,{sidebar:t}):null}function U(e){const{sidebar:t,toc:a,children:s,...r}=e,l=t&&t.items.length>0;return(0,d.jsx)(i.A,{...r,children:(0,d.jsx)("div",{className:"container margin-vert--lg",children:(0,d.jsxs)("div",{className:"row",children:[(0,d.jsx)(O,{sidebar:t}),(0,d.jsx)("main",{className:(0,n.A)("col",{"col--7":l,"col--9 col--offset-1":!l}),children:s}),a&&(0,d.jsx)("div",{className:"col col--2",children:a})]})})})}},9158:(e,t,a)=>{a.r(t),a.d(t,{default:()=>b});a(6540);var s=a(4164),n=a(1312);const i=()=>(0,n.T)({id:"theme.tags.tagsPageTitle",message:"Tags",description:"The title of the tag list page"});var r=a(1213),l=a(7559),o=a(8027),c=a(6133),m=a(1107);const d={tag:"tag_Nnez"};var u=a(4848);function g(e){let{letterEntry:t}=e;return(0,u.jsxs)("article",{children:[(0,u.jsx)(m.A,{as:"h2",id:t.letter,children:t.letter}),(0,u.jsx)("ul",{className:"padding--none",children:t.tags.map((e=>(0,u.jsx)("li",{className:d.tag,children:(0,u.jsx)(c.A,{...e})},e.permalink)))}),(0,u.jsx)("hr",{})]})}function h(e){let{tags:t}=e;const a=function(e){const t={};return Object.values(e).forEach((e=>{const a=function(e){return e[0].toUpperCase()}(e.label);t[a]??=[],t[a].push(e)})),Object.entries(t).sort(((e,t)=>{let[a]=e,[s]=t;return a.localeCompare(s)})).map((e=>{let[t,a]=e;return{letter:t,tags:a.sort(((e,t)=>e.label.localeCompare(t.label)))}}))}(t);return(0,u.jsx)("section",{className:"margin-vert--lg",children:a.map((e=>(0,u.jsx)(g,{letterEntry:e},e.letter)))})}var p=a(1463);function b(e){let{tags:t,sidebar:a}=e;const n=i();return(0,u.jsxs)(r.e3,{className:(0,s.A)(l.G.wrapper.blogPages,l.G.page.blogTagsListPage),children:[(0,u.jsx)(r.be,{title:n}),(0,u.jsx)(p.A,{tag:"blog_tags_list"}),(0,u.jsxs)(o.A,{sidebar:a,children:[(0,u.jsx)(m.A,{as:"h1",children:n}),(0,u.jsx)(h,{tags:t})]})]})}},6133:(e,t,a)=>{a.d(t,{A:()=>l});a(6540);var s=a(4164),n=a(8774);const i={tag:"tag_zVej",tagRegular:"tagRegular_sFm0",tagWithCount:"tagWithCount_h2kH"};var r=a(4848);function l(e){let{permalink:t,label:a,count:l,description:o}=e;return(0,r.jsxs)(n.A,{href:t,title:o,className:(0,s.A)(i.tag,l?i.tagWithCount:i.tagRegular),children:[a,l&&(0,r.jsx)("span",{children:l})]})}}}]); \ No newline at end of file diff --git a/assets/js/084229dc.b38db38d.js b/assets/js/084229dc.2fdeb2d3.js similarity index 98% rename from assets/js/084229dc.b38db38d.js rename to assets/js/084229dc.2fdeb2d3.js index 1409c976..86560893 100644 --- a/assets/js/084229dc.b38db38d.js +++ b/assets/js/084229dc.2fdeb2d3.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[1701],{4426:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>a,contentTitle:()=>c,default:()=>h,frontMatter:()=>r,metadata:()=>n,toc:()=>i});const n=JSON.parse('{"id":"references/global-selectors","title":"Global Selector","description":"In Stylable, selectors are namespaced to the stylesheet. However there might be cases where you want to target global selectors without Stylable namespacing them, For that you can use the :global() selector.","source":"@site/docs/references/global-selectors.md","sourceDirName":"references","slug":"/references/global-selectors","permalink":"/docs/references/global-selectors","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/global-selectors.md","tags":[],"version":"current","frontMatter":{"id":"global-selectors","title":"Global Selector"},"sidebar":"Specification Reference","previous":{"title":"Extend","permalink":"/docs/references/extend-stylesheet"},"next":{"title":"Import","permalink":"/docs/references/imports"}}');var o=t(4848),l=t(8453);const r={id:"global-selectors",title:"Global Selector"},c=void 0,a={},i=[{value:"Syntax",id:"syntax",level:2},{value:"Force native",id:"force-native",level:2}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,l.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(s.p,{children:["In Stylable, selectors are namespaced to the stylesheet. However there might be cases where you want to target global selectors without Stylable namespacing them, For that you can use the ",(0,o.jsx)(s.code,{children:":global()"})," selector."]}),"\n",(0,o.jsx)(s.h2,{id:"syntax",children:"Syntax"}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.strong,{children:"Mark as global"})}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:":global(.g) {}\n\n/* OUTPUT */\n.g {}\n"})}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.strong,{children:"Valid cases"})}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:"/* multiple classes */\n:global(.g1.g2) {}\n\n/* compound selector (`g` class not namespaced) */\n.a:global(.g):hover.b {}\n"})}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.strong,{children:"Invalid cases"})}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:"/* only a single selector is supported */\n.a:global(.g1, .g2):hover.b {}\n"})}),"\n",(0,o.jsx)(s.admonition,{type:"caution",children:(0,o.jsxs)(s.p,{children:["Any definitions within the ",(0,o.jsx)(s.code,{children:":global(...)"})," pseudo-class are not treated as symbols in the stylesheet and are not exported. That means that they are not available for use in other stylesheets or in the runtime JavaScript module."]})}),"\n",(0,o.jsx)(s.h2,{id:"force-native",children:"Force native"}),"\n",(0,o.jsxs)(s.p,{children:["In case a class definition overrides a native ",(0,o.jsx)(s.code,{children:"pseudo"})," with either ",(0,o.jsx)(s.a,{href:"/docs/references/pseudo-classes#syntax",children:"-st-states"})," or a ",(0,o.jsx)(s.a,{href:"/docs/references/pseudo-elements#syntax",children:"custom pseudo-element"})," then the ",(0,o.jsx)(s.code,{children:":global()"})," selector can be used to force the native:"]}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsxs)(s.strong,{children:["customInput with override ",(0,o.jsx)(s.code,{children:":selected"})]})}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:"CustomInput:selected {}\nCustomInput:global(:selected) {}\n\n/* OUTPUT */\n.customInput__root.customInput--selected {}\n.customInput__root:selected {}\n"})})]})}function h(e={}){const{wrapper:s}={...(0,l.R)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>r,x:()=>c});var n=t(6540);const o={},l=n.createContext(o);function r(e){const s=n.useContext(l);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function c(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),n.createElement(l.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[1701],{1338:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>a,contentTitle:()=>c,default:()=>h,frontMatter:()=>r,metadata:()=>n,toc:()=>i});const n=JSON.parse('{"id":"references/global-selectors","title":"Global Selector","description":"In Stylable, selectors are namespaced to the stylesheet. However there might be cases where you want to target global selectors without Stylable namespacing them, For that you can use the :global() selector.","source":"@site/docs/references/global-selectors.md","sourceDirName":"references","slug":"/references/global-selectors","permalink":"/docs/references/global-selectors","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/global-selectors.md","tags":[],"version":"current","frontMatter":{"id":"global-selectors","title":"Global Selector"},"sidebar":"Specification Reference","previous":{"title":"Extend","permalink":"/docs/references/extend-stylesheet"},"next":{"title":"Import","permalink":"/docs/references/imports"}}');var o=t(4848),l=t(8453);const r={id:"global-selectors",title:"Global Selector"},c=void 0,a={},i=[{value:"Syntax",id:"syntax",level:2},{value:"Force native",id:"force-native",level:2}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,l.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(s.p,{children:["In Stylable, selectors are namespaced to the stylesheet. However there might be cases where you want to target global selectors without Stylable namespacing them, For that you can use the ",(0,o.jsx)(s.code,{children:":global()"})," selector."]}),"\n",(0,o.jsx)(s.h2,{id:"syntax",children:"Syntax"}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.strong,{children:"Mark as global"})}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:":global(.g) {}\n\n/* OUTPUT */\n.g {}\n"})}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.strong,{children:"Valid cases"})}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:"/* multiple classes */\n:global(.g1.g2) {}\n\n/* compound selector (`g` class not namespaced) */\n.a:global(.g):hover.b {}\n"})}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.strong,{children:"Invalid cases"})}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:"/* only a single selector is supported */\n.a:global(.g1, .g2):hover.b {}\n"})}),"\n",(0,o.jsx)(s.admonition,{type:"caution",children:(0,o.jsxs)(s.p,{children:["Any definitions within the ",(0,o.jsx)(s.code,{children:":global(...)"})," pseudo-class are not treated as symbols in the stylesheet and are not exported. That means that they are not available for use in other stylesheets or in the runtime JavaScript module."]})}),"\n",(0,o.jsx)(s.h2,{id:"force-native",children:"Force native"}),"\n",(0,o.jsxs)(s.p,{children:["In case a class definition overrides a native ",(0,o.jsx)(s.code,{children:"pseudo"})," with either ",(0,o.jsx)(s.a,{href:"/docs/references/pseudo-classes#syntax",children:"-st-states"})," or a ",(0,o.jsx)(s.a,{href:"/docs/references/pseudo-elements#syntax",children:"custom pseudo-element"})," then the ",(0,o.jsx)(s.code,{children:":global()"})," selector can be used to force the native:"]}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsxs)(s.strong,{children:["customInput with override ",(0,o.jsx)(s.code,{children:":selected"})]})}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:"CustomInput:selected {}\nCustomInput:global(:selected) {}\n\n/* OUTPUT */\n.customInput__root.customInput--selected {}\n.customInput__root:selected {}\n"})})]})}function h(e={}){const{wrapper:s}={...(0,l.R)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>r,x:()=>c});var n=t(6540);const o={},l=n.createContext(o);function r(e){const s=n.useContext(l);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function c(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),n.createElement(l.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/0a256791.0ca740b9.js b/assets/js/0a256791.0ca740b9.js new file mode 100644 index 00000000..61e067a7 --- /dev/null +++ b/assets/js/0a256791.0ca740b9.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[2110],{598:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>s,toc:()=>a});const s=JSON.parse('{"id":"references/type-selectors","title":"Type Selector","description":"A CSS type selector is used to target DOM elements according to their tag name.","source":"@site/docs/references/tag-selectors.md","sourceDirName":"references","slug":"/references/type-selectors","permalink":"/docs/references/type-selectors","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/tag-selectors.md","tags":[],"version":"current","frontMatter":{"id":"type-selectors","title":"Type Selector"},"sidebar":"Specification Reference","previous":{"title":"Pseudo-Element","permalink":"/docs/references/pseudo-elements"},"next":{"title":"url()","permalink":"/docs/references/using-external-assets"}}');var o=n(4848),r=n(8453);const i={id:"type-selectors",title:"Type Selector"},l=void 0,c={},a=[{value:"Syntax",id:"syntax",level:2},{value:"Native element",id:"native-element",level:3},{value:"Component element",id:"component-element",level:3},{value:"Scoping",id:"scoping",level:2},{value:"Import and Export",id:"import-and-export",level:2},{value:"Runtime",id:"runtime",level:2},{value:"Namespace",id:"namespace",level:2}];function d(e){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["A CSS ",(0,o.jsx)(t.code,{children:"type selector"})," is used to target DOM elements according to their tag name."]}),"\n",(0,o.jsxs)(t.p,{children:["This page goes over how Stylable handles ",(0,o.jsx)(t.code,{children:"type selector"}),", for more details about the language feature itself, checkout ",(0,o.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors",children:"MDN type selector"}),"."]}),"\n",(0,o.jsx)(t.h2,{id:"syntax",children:"Syntax"}),"\n",(0,o.jsx)(t.h3,{id:"native-element",children:"Native element"}),"\n",(0,o.jsx)(t.p,{children:"A native element behaves exactly as it does in CSS, and requires no special treatment in Stylable."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-css",children:"/* scoped under local class */\n.root div {} \n\n/* scoped to local class */\ndiv.root {} \n"})}),"\n",(0,o.jsx)(t.h3,{id:"component-element",children:"Component element"}),"\n",(0,o.jsxs)(t.p,{children:["Use a ",(0,o.jsx)(t.strong,{children:"capital first letter"})," to refer to a ",(0,o.jsx)(t.a,{href:"/docs/references/imports#default-import",children:"default import"})," of a stylesheet ",(0,o.jsx)(t.a,{href:"/docs/references/root",children:"root"}),"."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-css",children:"@st-import Comp from './comp.st.css';\n\n/* style all Comp nested under root */\n.root Comp {}\n"})}),"\n",(0,o.jsx)(t.h2,{id:"scoping",children:"Scoping"}),"\n",(0,o.jsx)(t.p,{children:"Stylable validates that a type selector is scoped to the stylesheet it is in. To target a type selector, compound it or scope it under a local class in order to avoid styling unrelated elements outside the scope of the stylesheet."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-css",children:"/* error - unscoped selector */\ndiv {}\n\n/* valid */\n.root div {}\ndiv.root {}\n"})}),"\n",(0,o.jsxs)(t.admonition,{title:"reuse scope",type:"tip",children:[(0,o.jsxs)(t.p,{children:["Scope rules with the ",(0,o.jsx)(t.a,{href:"/docs/references/st-scope",children:(0,o.jsx)(t.code,{children:"@st-scope"})})," at-rule to minimize selector verbosity."]}),(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-css",children:"@st-scope .root {\n div {}\n}\n"})})]}),"\n",(0,o.jsx)(t.h2,{id:"import-and-export",children:"Import and Export"}),"\n",(0,o.jsxs)(t.p,{children:["Component elements, with ",(0,o.jsx)(t.strong,{children:"capital first letter"}),", can be exported from a stylesheet ",(0,o.jsx)(t.strong,{children:"if used"})," in a selector. You can import them within the ",(0,o.jsx)(t.code,{children:"@st-import"})," ",(0,o.jsx)(t.a,{href:"/docs/references/imports#named-import",children:"named import"})," brackets."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-css",metastring:'title="index.st.css"',children:"@st-import Button from './button.st.css';\n@st-import Menu from './menu.st.css';\n\n.root Button {}\n.root Menu {}\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-css",metastring:'title="theme.st.css"',children:"@st-import [Button, Menu] from './index.st.css';\n\n@st-scope .root {\n /* customize all buttons nested in theme root */\n Button {}\n /* customize all menus nested in theme root */\n Menu {}\n}\n"})}),"\n",(0,o.jsx)(t.h2,{id:"runtime",children:"Runtime"}),"\n",(0,o.jsx)(t.p,{children:"Elements are not available on the Stylable stylesheet runtime."}),"\n",(0,o.jsx)(t.h2,{id:"namespace",children:"Namespace"}),"\n",(0,o.jsx)(t.p,{children:"Native elements are not namespaced. However, if an element originates from a class, like a component element default import, then it is transformed during build."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-css",metastring:'title="entry.st.css"',children:"@st-import Button from './button.st.css';\n\n.root Button {}\n.root div {}\n\n/* OUTPUT */\n.entry__root .button__root {}\n.entry__root div {}\n"})})]})}function p(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>l});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/0a256791.777e14ec.js b/assets/js/0a256791.777e14ec.js deleted file mode 100644 index 4d4caffd..00000000 --- a/assets/js/0a256791.777e14ec.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[2110],{7870:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>s,toc:()=>a});const s=JSON.parse('{"id":"references/type-selectors","title":"Type Selector","description":"A CSS type selector is used to target DOM elements according to their tag name.","source":"@site/docs/references/tag-selectors.md","sourceDirName":"references","slug":"/references/type-selectors","permalink":"/docs/references/type-selectors","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/tag-selectors.md","tags":[],"version":"current","frontMatter":{"id":"type-selectors","title":"Type Selector"},"sidebar":"Specification Reference","previous":{"title":"Pseudo-Element","permalink":"/docs/references/pseudo-elements"},"next":{"title":"url()","permalink":"/docs/references/using-external-assets"}}');var o=n(4848),r=n(8453);const i={id:"type-selectors",title:"Type Selector"},l=void 0,c={},a=[{value:"Syntax",id:"syntax",level:2},{value:"Native element",id:"native-element",level:3},{value:"Component element",id:"component-element",level:3},{value:"Scoping",id:"scoping",level:2},{value:"Import and Export",id:"import-and-export",level:2},{value:"Runtime",id:"runtime",level:2},{value:"Namespace",id:"namespace",level:2}];function d(e){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["A CSS ",(0,o.jsx)(t.code,{children:"type selector"})," is used to target DOM elements according to their tag name."]}),"\n",(0,o.jsxs)(t.p,{children:["This page goes over how Stylable handles ",(0,o.jsx)(t.code,{children:"type selector"}),", for more details about the language feature itself, checkout ",(0,o.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors",children:"MDN type selector"}),"."]}),"\n",(0,o.jsx)(t.h2,{id:"syntax",children:"Syntax"}),"\n",(0,o.jsx)(t.h3,{id:"native-element",children:"Native element"}),"\n",(0,o.jsx)(t.p,{children:"A native element behaves exactly as it does in CSS, and requires no special treatment in Stylable."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-css",children:"/* scoped under local class */\n.root div {} \n\n/* scoped to local class */\ndiv.root {} \n"})}),"\n",(0,o.jsx)(t.h3,{id:"component-element",children:"Component element"}),"\n",(0,o.jsxs)(t.p,{children:["Use a ",(0,o.jsx)(t.strong,{children:"capital first letter"})," to refer to a ",(0,o.jsx)(t.a,{href:"/docs/references/imports#default-import",children:"default import"})," of a stylesheet ",(0,o.jsx)(t.a,{href:"/docs/references/root",children:"root"}),"."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-css",children:"@st-import Comp from './comp.st.css';\n\n/* style all Comp nested under root */\n.root Comp {}\n"})}),"\n",(0,o.jsx)(t.h2,{id:"scoping",children:"Scoping"}),"\n",(0,o.jsx)(t.p,{children:"Stylable validates that a type selector is scoped to the stylesheet it is in. To target a type selector, compound it or scope it under a local class in order to avoid styling unrelated elements outside the scope of the stylesheet."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-css",children:"/* error - unscoped selector */\ndiv {}\n\n/* valid */\n.root div {}\ndiv.root {}\n"})}),"\n",(0,o.jsxs)(t.admonition,{title:"reuse scope",type:"tip",children:[(0,o.jsxs)(t.p,{children:["Scope rules with the ",(0,o.jsx)(t.a,{href:"/docs/references/st-scope",children:(0,o.jsx)(t.code,{children:"@st-scope"})})," at-rule to minimize selector verbosity."]}),(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-css",children:"@st-scope .root {\n div {}\n}\n"})})]}),"\n",(0,o.jsx)(t.h2,{id:"import-and-export",children:"Import and Export"}),"\n",(0,o.jsxs)(t.p,{children:["Component elements, with ",(0,o.jsx)(t.strong,{children:"capital first letter"}),", can be exported from a stylesheet ",(0,o.jsx)(t.strong,{children:"if used"})," in a selector. You can import them within the ",(0,o.jsx)(t.code,{children:"@st-import"})," ",(0,o.jsx)(t.a,{href:"/docs/references/imports#named-import",children:"named import"})," brackets."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-css",metastring:'title="index.st.css"',children:"@st-import Button from './button.st.css';\n@st-import Menu from './menu.st.css';\n\n.root Button {}\n.root Menu {}\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-css",metastring:'title="theme.st.css"',children:"@st-import [Button, Menu] from './index.st.css';\n\n@st-scope .root {\n /* customize all buttons nested in theme root */\n Button {}\n /* customize all menus nested in theme root */\n Menu {}\n}\n"})}),"\n",(0,o.jsx)(t.h2,{id:"runtime",children:"Runtime"}),"\n",(0,o.jsx)(t.p,{children:"Elements are not available on the Stylable stylesheet runtime."}),"\n",(0,o.jsx)(t.h2,{id:"namespace",children:"Namespace"}),"\n",(0,o.jsx)(t.p,{children:"Native elements are not namespaced. However, if an element originates from a class, like a component element default import, then it is transformed during build."}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-css",metastring:'title="entry.st.css"',children:"@st-import Button from './button.st.css';\n\n.root Button {}\n.root div {}\n\n/* OUTPUT */\n.entry__root .button__root {}\n.entry__root div {}\n"})})]})}function p(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>l});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/0ce74438.fc28e4b0.js b/assets/js/0ce74438.737daa66.js similarity index 87% rename from assets/js/0ce74438.fc28e4b0.js rename to assets/js/0ce74438.737daa66.js index 0aa2b655..b0e9c0d0 100644 --- a/assets/js/0ce74438.fc28e4b0.js +++ b/assets/js/0ce74438.737daa66.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[3365],{6114:(e,o,t)=>{},4183:(e,o,t)=>{t(6114)},9228:(e,o,t)=>{t.r(o),t.d(o,{default:()=>c});var n=t(6540),r=t(7635),s=t(7639);t(4183);const a={root:"playground__root"};var i=t(4848);function c(){const e=(0,s.A)(),o=function(){(0,n.useEffect)((()=>{const e=e=>{let{data:o}=e;if(o?.infoResponse?.location){const e=JSON.parse(o.infoResponse.location);history.replaceState({},"",location.pathname+e.search)}};return window.addEventListener("message",e),()=>{window.removeEventListener("message",e)}}));const e=(0,n.useRef)(null);return(0,n.useEffect)((()=>{e.current&&(e.current.src="undefined"!=typeof window?"https://wixplosives.github.io/stylable-playground2/"+window.location.search:"about:blank")}),[]),e}();return(0,i.jsx)(r.A,{title:e.siteConfig.title,description:"A modern CSS pre-processor built for components",noFooter:!0,wrapperClassName:a.root,children:(0,i.jsx)("iframe",{ref:o,frameBorder:0})})}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[3365],{6114:(e,o,t)=>{},4183:(e,o,t)=>{t(6114)},5427:(e,o,t)=>{t.r(o),t.d(o,{default:()=>c});var n=t(6540),r=t(7823),s=t(4586);t(4183);const a={root:"playground__root"};var i=t(4848);function c(){const e=(0,s.A)(),o=function(){(0,n.useEffect)((()=>{const e=e=>{let{data:o}=e;if(o?.infoResponse?.location){const e=JSON.parse(o.infoResponse.location);history.replaceState({},"",location.pathname+e.search)}};return window.addEventListener("message",e),()=>{window.removeEventListener("message",e)}}));const e=(0,n.useRef)(null);return(0,n.useEffect)((()=>{e.current&&(e.current.src="undefined"!=typeof window?"https://wixplosives.github.io/stylable-playground2/"+window.location.search:"about:blank")}),[]),e}();return(0,i.jsx)(r.A,{title:e.siteConfig.title,description:"A modern CSS pre-processor built for components",noFooter:!0,wrapperClassName:a.root,children:(0,i.jsx)("iframe",{ref:o,frameBorder:0})})}}}]); \ No newline at end of file diff --git a/assets/js/14eb3368.51381fe1.js b/assets/js/14eb3368.51381fe1.js deleted file mode 100644 index a9dbe330..00000000 --- a/assets/js/14eb3368.51381fe1.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[6969],{4168:(e,t,n)=>{n.d(t,{A:()=>g});n(6540);var s=n(4164),r=n(8630),i=n(5357),a=n(260),l=n(4783),o=n(3230),c=n(8180),d=n(4848);function u(e){return(0,d.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,d.jsx)("path",{d:"M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z",fill:"currentColor"})})}const m={breadcrumbHomeIcon:"breadcrumbHomeIcon_YNFT"};function h(){const e=(0,c.Ay)("/");return(0,d.jsx)("li",{className:"breadcrumbs__item",children:(0,d.jsx)(l.A,{"aria-label":(0,o.T)({id:"theme.docs.breadcrumbs.home",message:"Home page",description:"The ARIA label for the home page in the breadcrumbs"}),className:"breadcrumbs__link",href:e,children:(0,d.jsx)(u,{className:m.breadcrumbHomeIcon})})})}const b={breadcrumbsContainer:"breadcrumbsContainer_Z_bl"};function x(e){let{children:t,href:n,isLast:s}=e;const r="breadcrumbs__link";return s?(0,d.jsx)("span",{className:r,itemProp:"name",children:t}):n?(0,d.jsx)(l.A,{className:r,href:n,itemProp:"item",children:(0,d.jsx)("span",{itemProp:"name",children:t})}):(0,d.jsx)("span",{className:r,children:t})}function p(e){let{children:t,active:n,index:r,addMicrodata:i}=e;return(0,d.jsxs)("li",{...i&&{itemScope:!0,itemProp:"itemListElement",itemType:"https://schema.org/ListItem"},className:(0,s.A)("breadcrumbs__item",{"breadcrumbs__item--active":n}),children:[t,(0,d.jsx)("meta",{itemProp:"position",content:String(r+1)})]})}function g(){const e=(0,i.OF)(),t=(0,a.Dt)();return e?(0,d.jsx)("nav",{className:(0,s.A)(r.G.docs.docBreadcrumbs,b.breadcrumbsContainer),"aria-label":(0,o.T)({id:"theme.docs.breadcrumbs.navAriaLabel",message:"Breadcrumbs",description:"The ARIA label for the breadcrumbs"}),children:(0,d.jsxs)("ul",{className:"breadcrumbs",itemScope:!0,itemType:"https://schema.org/BreadcrumbList",children:[t&&(0,d.jsx)(h,{}),e.map(((t,n)=>{const s=n===e.length-1,r="category"===t.type&&t.linkUnlisted?void 0:t.href;return(0,d.jsx)(p,{active:s,index:n,addMicrodata:!!r,children:(0,d.jsx)(x,{href:r,isLast:s,children:t.label})},n)}))]})}):null}},3533:(e,t,n)=>{n.r(t),n.d(t,{default:()=>w});n(6540);var s=n(6644),r=n(5357),i=n(8180),a=n(4164),l=n(4783),o=n(7824),c=n(877),d=n(3230),u=n(5225);const m={cardContainer:"cardContainer_fWXF",cardTitle:"cardTitle_rnsV",cardDescription:"cardDescription_PWke"};var h=n(4848);function b(e){let{href:t,children:n}=e;return(0,h.jsx)(l.A,{href:t,className:(0,a.A)("card padding--lg",m.cardContainer),children:n})}function x(e){let{href:t,icon:n,title:s,description:r}=e;return(0,h.jsxs)(b,{href:t,children:[(0,h.jsxs)(u.A,{as:"h2",className:(0,a.A)("text--truncate",m.cardTitle),title:s,children:[n," ",s]}),r&&(0,h.jsx)("p",{className:(0,a.A)("text--truncate",m.cardDescription),title:r,children:r})]})}function p(e){let{item:t}=e;const n=(0,r.Nr)(t),s=function(){const{selectMessage:e}=(0,o.W)();return t=>e(t,(0,d.T)({message:"1 item|{count} items",id:"theme.docs.DocCard.categoryDescription.plurals",description:"The default description for a category card in the generated index about how many items this category includes"},{count:t}))}();return n?(0,h.jsx)(x,{href:n,icon:"\ud83d\uddc3\ufe0f",title:t.label,description:t.description??s(t.items.length)}):null}function g(e){let{item:t}=e;const n=(0,c.A)(t.href)?"\ud83d\udcc4\ufe0f":"\ud83d\udd17",s=(0,r.cC)(t.docId??void 0);return(0,h.jsx)(x,{href:t.href,icon:n,title:t.label,description:t.description??s?.description})}function v(e){let{item:t}=e;switch(t.type){case"link":return(0,h.jsx)(g,{item:t});case"category":return(0,h.jsx)(p,{item:t});default:throw new Error(`unknown item type ${JSON.stringify(t)}`)}}function f(e){let{className:t}=e;const n=(0,r.$S)();return(0,h.jsx)(j,{items:n.items,className:t})}function j(e){const{items:t,className:n}=e;if(!t)return(0,h.jsx)(f,{...e});const s=(0,r.d1)(t);return(0,h.jsx)("section",{className:(0,a.A)("row",n),children:s.map(((e,t)=>(0,h.jsx)("article",{className:"col col--6 margin-bottom--lg",children:(0,h.jsx)(v,{item:e})},t)))})}var A=n(3682),N=n(7180),T=n(9436),_=n(4168);const L={generatedIndexPage:"generatedIndexPage_vN6x",list:"list_eTzJ",title:"title_kItE"};function k(e){let{categoryGeneratedIndex:t}=e;return(0,h.jsx)(s.be,{title:t.title,description:t.description,keywords:t.keywords,image:(0,i.Ay)(t.image)})}function y(e){let{categoryGeneratedIndex:t}=e;const n=(0,r.$S)();return(0,h.jsxs)("div",{className:L.generatedIndexPage,children:[(0,h.jsx)(N.A,{}),(0,h.jsx)(_.A,{}),(0,h.jsx)(T.A,{}),(0,h.jsxs)("header",{children:[(0,h.jsx)(u.A,{as:"h1",className:L.title,children:t.title}),t.description&&(0,h.jsx)("p",{children:t.description})]}),(0,h.jsx)("article",{className:"margin-top--lg",children:(0,h.jsx)(j,{items:n.items,className:L.list})}),(0,h.jsx)("footer",{className:"margin-top--lg",children:(0,h.jsx)(A.A,{previous:t.navigation.previous,next:t.navigation.next})})]})}function w(e){return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(k,{...e}),(0,h.jsx)(y,{...e})]})}},3682:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var s=n(3230),r=n(3555),i=n(4848);function a(e){const{previous:t,next:n}=e;return(0,i.jsxs)("nav",{className:"pagination-nav docusaurus-mt-lg","aria-label":(0,s.T)({id:"theme.docs.paginator.navAriaLabel",message:"Docs pages",description:"The ARIA label for the docs pagination"}),children:[t&&(0,i.jsx)(r.A,{...t,subLabel:(0,i.jsx)(s.A,{id:"theme.docs.paginator.previous",description:"The label used to navigate to the previous doc",children:"Previous"})}),n&&(0,i.jsx)(r.A,{...n,subLabel:(0,i.jsx)(s.A,{id:"theme.docs.paginator.next",description:"The label used to navigate to the next doc",children:"Next"}),isNext:!0})]})}},9436:(e,t,n)=>{n.d(t,{A:()=>o});n(6540);var s=n(4164),r=n(3230),i=n(8630),a=n(1704),l=n(4848);function o(e){let{className:t}=e;const n=(0,a.r)();return n.badge?(0,l.jsx)("span",{className:(0,s.A)(t,i.G.docs.docVersionBadge,"badge badge--secondary"),children:(0,l.jsx)(r.A,{id:"theme.docs.versionBadge.label",values:{versionLabel:n.label},children:"Version: {versionLabel}"})}):null}},7180:(e,t,n)=>{n.d(t,{A:()=>p});n(6540);var s=n(4164),r=n(7639),i=n(4783),a=n(3230),l=n(4721),o=n(8630),c=n(6457),d=n(1704),u=n(4848);const m={unreleased:function(e){let{siteTitle:t,versionMetadata:n}=e;return(0,u.jsx)(a.A,{id:"theme.docs.versions.unreleasedVersionLabel",description:"The label used to tell the user that he's browsing an unreleased doc version",values:{siteTitle:t,versionLabel:(0,u.jsx)("b",{children:n.label})},children:"This is unreleased documentation for {siteTitle} {versionLabel} version."})},unmaintained:function(e){let{siteTitle:t,versionMetadata:n}=e;return(0,u.jsx)(a.A,{id:"theme.docs.versions.unmaintainedVersionLabel",description:"The label used to tell the user that he's browsing an unmaintained doc version",values:{siteTitle:t,versionLabel:(0,u.jsx)("b",{children:n.label})},children:"This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained."})}};function h(e){const t=m[e.versionMetadata.banner];return(0,u.jsx)(t,{...e})}function b(e){let{versionLabel:t,to:n,onClick:s}=e;return(0,u.jsx)(a.A,{id:"theme.docs.versions.latestVersionSuggestionLabel",description:"The label used to tell the user to check the latest version",values:{versionLabel:t,latestVersionLink:(0,u.jsx)("b",{children:(0,u.jsx)(i.A,{to:n,onClick:s,children:(0,u.jsx)(a.A,{id:"theme.docs.versions.latestVersionLinkLabel",description:"The label used for the latest version suggestion link label",children:"latest version"})})})},children:"For up-to-date documentation, see the {latestVersionLink} ({versionLabel})."})}function x(e){let{className:t,versionMetadata:n}=e;const{siteConfig:{title:i}}=(0,r.A)(),{pluginId:a}=(0,l.vT)({failfast:!0}),{savePreferredVersionName:d}=(0,c.g1)(a),{latestDocSuggestion:m,latestVersionSuggestion:x}=(0,l.HW)(a),p=m??(g=x).docs.find((e=>e.id===g.mainDocId));var g;return(0,u.jsxs)("div",{className:(0,s.A)(t,o.G.docs.docVersionBanner,"alert alert--warning margin-bottom--md"),role:"alert",children:[(0,u.jsx)("div",{children:(0,u.jsx)(h,{siteTitle:i,versionMetadata:n})}),(0,u.jsx)("div",{className:"margin-top--md",children:(0,u.jsx)(b,{versionLabel:x.label,to:p.path,onClick:()=>d(x.name)})})]})}function p(e){let{className:t}=e;const n=(0,d.r)();return n.banner?(0,u.jsx)(x,{className:t,versionMetadata:n}):null}},3555:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var s=n(4164),r=n(4783),i=n(4848);function a(e){const{permalink:t,title:n,subLabel:a,isNext:l}=e;return(0,i.jsxs)(r.A,{className:(0,s.A)("pagination-nav__link",l?"pagination-nav__link--next":"pagination-nav__link--prev"),to:t,children:[a&&(0,i.jsx)("div",{className:"pagination-nav__sublabel",children:a}),(0,i.jsx)("div",{className:"pagination-nav__label",children:n})]})}},7824:(e,t,n)=>{n.d(t,{W:()=>c});var s=n(6540),r=n(7639);const i=["zero","one","two","few","many","other"];function a(e){return i.filter((t=>e.includes(t)))}const l={locale:"en",pluralForms:a(["one","other"]),select:e=>1===e?"one":"other"};function o(){const{i18n:{currentLocale:e}}=(0,r.A)();return(0,s.useMemo)((()=>{try{return function(e){const t=new Intl.PluralRules(e);return{locale:e,pluralForms:a(t.resolvedOptions().pluralCategories),select:e=>t.select(e)}}(e)}catch(t){return console.error(`Failed to use Intl.PluralRules for locale "${e}".\nDocusaurus will fallback to the default (English) implementation.\nError: ${t.message}\n`),l}}),[e])}function c(){const e=o();return{selectMessage:(t,n)=>function(e,t,n){const s=e.split("|");if(1===s.length)return s[0];s.length>n.pluralForms.length&&console.error(`For locale=${n.locale}, a maximum of ${n.pluralForms.length} plural forms are expected (${n.pluralForms.join(",")}), but the message contains ${s.length}: ${e}`);const r=n.select(t),i=n.pluralForms.indexOf(r);return s[Math.min(i,s.length-1)]}(n,t,e)}}}}]); \ No newline at end of file diff --git a/assets/js/14eb3368.fa85d82b.js b/assets/js/14eb3368.fa85d82b.js new file mode 100644 index 00000000..887578e9 --- /dev/null +++ b/assets/js/14eb3368.fa85d82b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[6969],{1243:(e,t,n)=>{n.d(t,{A:()=>g});n(6540);var s=n(4164),r=n(7559),i=n(6972),a=n(9169),l=n(8774),o=n(1312),c=n(6025),d=n(4848);function u(e){return(0,d.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,d.jsx)("path",{d:"M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z",fill:"currentColor"})})}const m={breadcrumbHomeIcon:"breadcrumbHomeIcon_YNFT"};function h(){const e=(0,c.Ay)("/");return(0,d.jsx)("li",{className:"breadcrumbs__item",children:(0,d.jsx)(l.A,{"aria-label":(0,o.T)({id:"theme.docs.breadcrumbs.home",message:"Home page",description:"The ARIA label for the home page in the breadcrumbs"}),className:"breadcrumbs__link",href:e,children:(0,d.jsx)(u,{className:m.breadcrumbHomeIcon})})})}const b={breadcrumbsContainer:"breadcrumbsContainer_Z_bl"};function x(e){let{children:t,href:n,isLast:s}=e;const r="breadcrumbs__link";return s?(0,d.jsx)("span",{className:r,itemProp:"name",children:t}):n?(0,d.jsx)(l.A,{className:r,href:n,itemProp:"item",children:(0,d.jsx)("span",{itemProp:"name",children:t})}):(0,d.jsx)("span",{className:r,children:t})}function p(e){let{children:t,active:n,index:r,addMicrodata:i}=e;return(0,d.jsxs)("li",{...i&&{itemScope:!0,itemProp:"itemListElement",itemType:"https://schema.org/ListItem"},className:(0,s.A)("breadcrumbs__item",{"breadcrumbs__item--active":n}),children:[t,(0,d.jsx)("meta",{itemProp:"position",content:String(r+1)})]})}function g(){const e=(0,i.OF)(),t=(0,a.Dt)();return e?(0,d.jsx)("nav",{className:(0,s.A)(r.G.docs.docBreadcrumbs,b.breadcrumbsContainer),"aria-label":(0,o.T)({id:"theme.docs.breadcrumbs.navAriaLabel",message:"Breadcrumbs",description:"The ARIA label for the breadcrumbs"}),children:(0,d.jsxs)("ul",{className:"breadcrumbs",itemScope:!0,itemType:"https://schema.org/BreadcrumbList",children:[t&&(0,d.jsx)(h,{}),e.map(((t,n)=>{const s=n===e.length-1,r="category"===t.type&&t.linkUnlisted?void 0:t.href;return(0,d.jsx)(p,{active:s,index:n,addMicrodata:!!r,children:(0,d.jsx)(x,{href:r,isLast:s,children:t.label})},n)}))]})}):null}},4136:(e,t,n)=>{n.r(t),n.d(t,{default:()=>w});n(6540);var s=n(1213),r=n(6972),i=n(6025),a=n(4164),l=n(8774),o=n(5846),c=n(6654),d=n(1312),u=n(1107);const m={cardContainer:"cardContainer_fWXF",cardTitle:"cardTitle_rnsV",cardDescription:"cardDescription_PWke"};var h=n(4848);function b(e){let{href:t,children:n}=e;return(0,h.jsx)(l.A,{href:t,className:(0,a.A)("card padding--lg",m.cardContainer),children:n})}function x(e){let{href:t,icon:n,title:s,description:r}=e;return(0,h.jsxs)(b,{href:t,children:[(0,h.jsxs)(u.A,{as:"h2",className:(0,a.A)("text--truncate",m.cardTitle),title:s,children:[n," ",s]}),r&&(0,h.jsx)("p",{className:(0,a.A)("text--truncate",m.cardDescription),title:r,children:r})]})}function p(e){let{item:t}=e;const n=(0,r.Nr)(t),s=function(){const{selectMessage:e}=(0,o.W)();return t=>e(t,(0,d.T)({message:"1 item|{count} items",id:"theme.docs.DocCard.categoryDescription.plurals",description:"The default description for a category card in the generated index about how many items this category includes"},{count:t}))}();return n?(0,h.jsx)(x,{href:n,icon:"\ud83d\uddc3\ufe0f",title:t.label,description:t.description??s(t.items.length)}):null}function g(e){let{item:t}=e;const n=(0,c.A)(t.href)?"\ud83d\udcc4\ufe0f":"\ud83d\udd17",s=(0,r.cC)(t.docId??void 0);return(0,h.jsx)(x,{href:t.href,icon:n,title:t.label,description:t.description??s?.description})}function v(e){let{item:t}=e;switch(t.type){case"link":return(0,h.jsx)(g,{item:t});case"category":return(0,h.jsx)(p,{item:t});default:throw new Error(`unknown item type ${JSON.stringify(t)}`)}}function f(e){let{className:t}=e;const n=(0,r.$S)();return(0,h.jsx)(j,{items:n.items,className:t})}function j(e){const{items:t,className:n}=e;if(!t)return(0,h.jsx)(f,{...e});const s=(0,r.d1)(t);return(0,h.jsx)("section",{className:(0,a.A)("row",n),children:s.map(((e,t)=>(0,h.jsx)("article",{className:"col col--6 margin-bottom--lg",children:(0,h.jsx)(v,{item:e})},t)))})}var A=n(7719),N=n(1878),T=n(4267),_=n(1243);const L={generatedIndexPage:"generatedIndexPage_vN6x",list:"list_eTzJ",title:"title_kItE"};function k(e){let{categoryGeneratedIndex:t}=e;return(0,h.jsx)(s.be,{title:t.title,description:t.description,keywords:t.keywords,image:(0,i.Ay)(t.image)})}function y(e){let{categoryGeneratedIndex:t}=e;const n=(0,r.$S)();return(0,h.jsxs)("div",{className:L.generatedIndexPage,children:[(0,h.jsx)(N.A,{}),(0,h.jsx)(_.A,{}),(0,h.jsx)(T.A,{}),(0,h.jsxs)("header",{children:[(0,h.jsx)(u.A,{as:"h1",className:L.title,children:t.title}),t.description&&(0,h.jsx)("p",{children:t.description})]}),(0,h.jsx)("article",{className:"margin-top--lg",children:(0,h.jsx)(j,{items:n.items,className:L.list})}),(0,h.jsx)("footer",{className:"margin-top--lg",children:(0,h.jsx)(A.A,{previous:t.navigation.previous,next:t.navigation.next})})]})}function w(e){return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(k,{...e}),(0,h.jsx)(y,{...e})]})}},7719:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var s=n(1312),r=n(9022),i=n(4848);function a(e){const{previous:t,next:n}=e;return(0,i.jsxs)("nav",{className:"pagination-nav docusaurus-mt-lg","aria-label":(0,s.T)({id:"theme.docs.paginator.navAriaLabel",message:"Docs pages",description:"The ARIA label for the docs pagination"}),children:[t&&(0,i.jsx)(r.A,{...t,subLabel:(0,i.jsx)(s.A,{id:"theme.docs.paginator.previous",description:"The label used to navigate to the previous doc",children:"Previous"})}),n&&(0,i.jsx)(r.A,{...n,subLabel:(0,i.jsx)(s.A,{id:"theme.docs.paginator.next",description:"The label used to navigate to the next doc",children:"Next"}),isNext:!0})]})}},4267:(e,t,n)=>{n.d(t,{A:()=>o});n(6540);var s=n(4164),r=n(1312),i=n(7559),a=n(3025),l=n(4848);function o(e){let{className:t}=e;const n=(0,a.r)();return n.badge?(0,l.jsx)("span",{className:(0,s.A)(t,i.G.docs.docVersionBadge,"badge badge--secondary"),children:(0,l.jsx)(r.A,{id:"theme.docs.versionBadge.label",values:{versionLabel:n.label},children:"Version: {versionLabel}"})}):null}},1878:(e,t,n)=>{n.d(t,{A:()=>p});n(6540);var s=n(4164),r=n(4586),i=n(8774),a=n(1312),l=n(4070),o=n(7559),c=n(3886),d=n(3025),u=n(4848);const m={unreleased:function(e){let{siteTitle:t,versionMetadata:n}=e;return(0,u.jsx)(a.A,{id:"theme.docs.versions.unreleasedVersionLabel",description:"The label used to tell the user that he's browsing an unreleased doc version",values:{siteTitle:t,versionLabel:(0,u.jsx)("b",{children:n.label})},children:"This is unreleased documentation for {siteTitle} {versionLabel} version."})},unmaintained:function(e){let{siteTitle:t,versionMetadata:n}=e;return(0,u.jsx)(a.A,{id:"theme.docs.versions.unmaintainedVersionLabel",description:"The label used to tell the user that he's browsing an unmaintained doc version",values:{siteTitle:t,versionLabel:(0,u.jsx)("b",{children:n.label})},children:"This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained."})}};function h(e){const t=m[e.versionMetadata.banner];return(0,u.jsx)(t,{...e})}function b(e){let{versionLabel:t,to:n,onClick:s}=e;return(0,u.jsx)(a.A,{id:"theme.docs.versions.latestVersionSuggestionLabel",description:"The label used to tell the user to check the latest version",values:{versionLabel:t,latestVersionLink:(0,u.jsx)("b",{children:(0,u.jsx)(i.A,{to:n,onClick:s,children:(0,u.jsx)(a.A,{id:"theme.docs.versions.latestVersionLinkLabel",description:"The label used for the latest version suggestion link label",children:"latest version"})})})},children:"For up-to-date documentation, see the {latestVersionLink} ({versionLabel})."})}function x(e){let{className:t,versionMetadata:n}=e;const{siteConfig:{title:i}}=(0,r.A)(),{pluginId:a}=(0,l.vT)({failfast:!0}),{savePreferredVersionName:d}=(0,c.g1)(a),{latestDocSuggestion:m,latestVersionSuggestion:x}=(0,l.HW)(a),p=m??(g=x).docs.find((e=>e.id===g.mainDocId));var g;return(0,u.jsxs)("div",{className:(0,s.A)(t,o.G.docs.docVersionBanner,"alert alert--warning margin-bottom--md"),role:"alert",children:[(0,u.jsx)("div",{children:(0,u.jsx)(h,{siteTitle:i,versionMetadata:n})}),(0,u.jsx)("div",{className:"margin-top--md",children:(0,u.jsx)(b,{versionLabel:x.label,to:p.path,onClick:()=>d(x.name)})})]})}function p(e){let{className:t}=e;const n=(0,d.r)();return n.banner?(0,u.jsx)(x,{className:t,versionMetadata:n}):null}},9022:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var s=n(4164),r=n(8774),i=n(4848);function a(e){const{permalink:t,title:n,subLabel:a,isNext:l}=e;return(0,i.jsxs)(r.A,{className:(0,s.A)("pagination-nav__link",l?"pagination-nav__link--next":"pagination-nav__link--prev"),to:t,children:[a&&(0,i.jsx)("div",{className:"pagination-nav__sublabel",children:a}),(0,i.jsx)("div",{className:"pagination-nav__label",children:n})]})}},5846:(e,t,n)=>{n.d(t,{W:()=>c});var s=n(6540),r=n(4586);const i=["zero","one","two","few","many","other"];function a(e){return i.filter((t=>e.includes(t)))}const l={locale:"en",pluralForms:a(["one","other"]),select:e=>1===e?"one":"other"};function o(){const{i18n:{currentLocale:e}}=(0,r.A)();return(0,s.useMemo)((()=>{try{return function(e){const t=new Intl.PluralRules(e);return{locale:e,pluralForms:a(t.resolvedOptions().pluralCategories),select:e=>t.select(e)}}(e)}catch(t){return console.error(`Failed to use Intl.PluralRules for locale "${e}".\nDocusaurus will fallback to the default (English) implementation.\nError: ${t.message}\n`),l}}),[e])}function c(){const e=o();return{selectMessage:(t,n)=>function(e,t,n){const s=e.split("|");if(1===s.length)return s[0];s.length>n.pluralForms.length&&console.error(`For locale=${n.locale}, a maximum of ${n.pluralForms.length} plural forms are expected (${n.pluralForms.join(",")}), but the message contains ${s.length}: ${e}`);const r=n.select(t),i=n.pluralForms.indexOf(r);return s[Math.min(i,s.length-1)]}(n,t,e)}}}}]); \ No newline at end of file diff --git a/assets/js/1660.32b31a97.js b/assets/js/1660.32b31a97.js deleted file mode 100644 index 0011f9f7..00000000 --- a/assets/js/1660.32b31a97.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[1660],{2250:(e,t,n)=>{"use strict";n.d(t,{A:()=>V});var o=n(6540),s=n(1062),c=n(4164),r=n(7710),a=n(6957);function l(){const{prism:e}=(0,a.p)(),{colorMode:t}=(0,r.G)(),n=e.theme,o=e.darkTheme||n;return"dark"===t?o:n}var i=n(8630),u=n(8426),d=n.n(u);const m=/title=(?["'])(?.*?)\1/,p=/\{(?<range>[\d,-]+)\}/,b={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},bash:{start:"#",end:""},html:{start:"\x3c!--",end:"--\x3e"}},f={...b,lua:{start:"--",end:""},wasm:{start:"\\;\\;",end:""},tex:{start:"%",end:""},vb:{start:"['\u2018\u2019]",end:""},vbnet:{start:"(?:_\\s*)?['\u2018\u2019]",end:""},rem:{start:"[Rr][Ee][Mm]\\b",end:""},f90:{start:"!",end:""},ml:{start:"\\(\\*",end:"\\*\\)"},cobol:{start:"\\*>",end:""}},h=Object.keys(b);function g(e,t){const n=e.map((e=>{const{start:n,end:o}=f[e];return`(?:${n}\\s*(${t.flatMap((e=>[e.line,e.block?.start,e.block?.end].filter(Boolean))).join("|")})\\s*${o})`})).join("|");return new RegExp(`^\\s*(?:${n})\\s*$`)}function k(e,t){let n=e.replace(/\n$/,"");const{language:o,magicComments:s,metastring:c}=t;if(c&&p.test(c)){const e=c.match(p).groups.range;if(0===s.length)throw new Error(`A highlight range has been given in code block's metastring (\`\`\` ${c}), but no magic comment config is available. Docusaurus applies the first magic comment entry's className for metastring ranges.`);const t=s[0].className,o=d()(e).filter((e=>e>0)).map((e=>[e-1,[t]]));return{lineClassNames:Object.fromEntries(o),code:n}}if(void 0===o)return{lineClassNames:{},code:n};const r=function(e,t){switch(e){case"js":case"javascript":case"ts":case"typescript":return g(["js","jsBlock"],t);case"jsx":case"tsx":return g(["js","jsBlock","jsx"],t);case"html":return g(["js","jsBlock","html"],t);case"python":case"py":case"bash":return g(["bash"],t);case"markdown":case"md":return g(["html","jsx","bash"],t);case"tex":case"latex":case"matlab":return g(["tex"],t);case"lua":case"haskell":case"sql":return g(["lua"],t);case"wasm":return g(["wasm"],t);case"vb":case"vba":case"visual-basic":return g(["vb","rem"],t);case"vbnet":return g(["vbnet","rem"],t);case"batch":return g(["rem"],t);case"basic":return g(["rem","f90"],t);case"fsharp":return g(["js","ml"],t);case"ocaml":case"sml":return g(["ml"],t);case"fortran":return g(["f90"],t);case"cobol":return g(["cobol"],t);default:return g(h,t)}}(o,s),a=n.split("\n"),l=Object.fromEntries(s.map((e=>[e.className,{start:0,range:""}]))),i=Object.fromEntries(s.filter((e=>e.line)).map((e=>{let{className:t,line:n}=e;return[n,t]}))),u=Object.fromEntries(s.filter((e=>e.block)).map((e=>{let{className:t,block:n}=e;return[n.start,t]}))),m=Object.fromEntries(s.filter((e=>e.block)).map((e=>{let{className:t,block:n}=e;return[n.end,t]})));for(let d=0;d<a.length;){const e=a[d].match(r);if(!e){d+=1;continue}const t=e.slice(1).find((e=>void 0!==e));i[t]?l[i[t]].range+=`${d},`:u[t]?l[u[t]].start=d:m[t]&&(l[m[t]].range+=`${l[m[t]].start}-${d-1},`),a.splice(d,1)}n=a.join("\n");const b={};return Object.entries(l).forEach((e=>{let[t,{range:n}]=e;d()(n).forEach((e=>{b[e]??=[],b[e].push(t)}))})),{lineClassNames:b,code:n}}const x={codeBlockContainer:"codeBlockContainer_Ckt0"};var B=n(4848);function j(e){let{as:t,...n}=e;const o=function(e){const t={color:"--prism-color",backgroundColor:"--prism-background-color"},n={};return Object.entries(e.plain).forEach((e=>{let[o,s]=e;const c=t[o];c&&"string"==typeof s&&(n[c]=s)})),n}(l());return(0,B.jsx)(t,{...n,style:o,className:(0,c.A)(n.className,x.codeBlockContainer,i.G.common.codeBlock)})}const y={codeBlockContent:"codeBlockContent_biex",codeBlockTitle:"codeBlockTitle_Ktv7",codeBlock:"codeBlock_bY9V",codeBlockStandalone:"codeBlockStandalone_MEMb",codeBlockLines:"codeBlockLines_e6Vv",codeBlockLinesWithNumbering:"codeBlockLinesWithNumbering_o6Pm",buttonGroup:"buttonGroup__atx"};function v(e){let{children:t,className:n}=e;return(0,B.jsx)(j,{as:"pre",tabIndex:0,className:(0,c.A)(y.codeBlockStandalone,"thin-scrollbar",n),children:(0,B.jsx)("code",{className:y.codeBlockLines,children:t})})}var C=n(4799);const N={attributes:!0,characterData:!0,childList:!0,subtree:!0};function w(e,t){const[n,s]=(0,o.useState)(),c=(0,o.useCallback)((()=>{s(e.current?.closest("[role=tabpanel][hidden]"))}),[e,s]);(0,o.useEffect)((()=>{c()}),[c]),function(e,t,n){void 0===n&&(n=N);const s=(0,C._q)(t),c=(0,C.Be)(n);(0,o.useEffect)((()=>{const t=new MutationObserver(s);return e&&t.observe(e,c),()=>t.disconnect()}),[e,s,c])}(n,(e=>{e.forEach((e=>{"attributes"===e.type&&"hidden"===e.attributeName&&(t(),c())}))}),{attributes:!0,characterData:!1,childList:!1,subtree:!1})}var E=n(1765);const L={codeLine:"codeLine_lJS_",codeLineNumber:"codeLineNumber_Tfdd",codeLineContent:"codeLineContent_feaV"};function A(e){let{line:t,classNames:n,showLineNumbers:o,getLineProps:s,getTokenProps:r}=e;1===t.length&&"\n"===t[0].content&&(t[0].content="");const a=s({line:t,className:(0,c.A)(n,o&&L.codeLine)}),l=t.map(((e,t)=>(0,B.jsx)("span",{...r({token:e})},t)));return(0,B.jsxs)("span",{...a,children:[o?(0,B.jsxs)(B.Fragment,{children:[(0,B.jsx)("span",{className:L.codeLineNumber}),(0,B.jsx)("span",{className:L.codeLineContent,children:l})]}):l,(0,B.jsx)("br",{})]})}var _=n(3230);function S(e){return(0,B.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,B.jsx)("path",{fill:"currentColor",d:"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"})})}function T(e){return(0,B.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,B.jsx)("path",{fill:"currentColor",d:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"})})}const I={copyButtonCopied:"copyButtonCopied_obH4",copyButtonIcons:"copyButtonIcons_eSgA",copyButtonIcon:"copyButtonIcon_y97N",copyButtonSuccessIcon:"copyButtonSuccessIcon_LjdS"};function $(e){let{code:t,className:n}=e;const[s,r]=(0,o.useState)(!1),a=(0,o.useRef)(void 0),l=(0,o.useCallback)((()=>{!function(e,t){let{target:n=document.body}=void 0===t?{}:t;if("string"!=typeof e)throw new TypeError(`Expected parameter \`text\` to be a \`string\`, got \`${typeof e}\`.`);const o=document.createElement("textarea"),s=document.activeElement;o.value=e,o.setAttribute("readonly",""),o.style.contain="strict",o.style.position="absolute",o.style.left="-9999px",o.style.fontSize="12pt";const c=document.getSelection(),r=c.rangeCount>0&&c.getRangeAt(0);n.append(o),o.select(),o.selectionStart=0,o.selectionEnd=e.length;let a=!1;try{a=document.execCommand("copy")}catch{}o.remove(),r&&(c.removeAllRanges(),c.addRange(r)),s&&s.focus()}(t),r(!0),a.current=window.setTimeout((()=>{r(!1)}),1e3)}),[t]);return(0,o.useEffect)((()=>()=>window.clearTimeout(a.current)),[]),(0,B.jsx)("button",{type:"button","aria-label":s?(0,_.T)({id:"theme.CodeBlock.copied",message:"Copied",description:"The copied button label on code blocks"}):(0,_.T)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"}),title:(0,_.T)({id:"theme.CodeBlock.copy",message:"Copy",description:"The copy button label on code blocks"}),className:(0,c.A)("clean-btn",n,I.copyButton,s&&I.copyButtonCopied),onClick:l,children:(0,B.jsxs)("span",{className:I.copyButtonIcons,"aria-hidden":"true",children:[(0,B.jsx)(S,{className:I.copyButtonIcon}),(0,B.jsx)(T,{className:I.copyButtonSuccessIcon})]})})}function W(e){return(0,B.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,B.jsx)("path",{fill:"currentColor",d:"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"})})}const M={wordWrapButtonIcon:"wordWrapButtonIcon_Bwma",wordWrapButtonEnabled:"wordWrapButtonEnabled_EoeP"};function H(e){let{className:t,onClick:n,isEnabled:o}=e;const s=(0,_.T)({id:"theme.CodeBlock.wordWrapToggle",message:"Toggle word wrap",description:"The title attribute for toggle word wrapping button of code block lines"});return(0,B.jsx)("button",{type:"button",onClick:n,className:(0,c.A)("clean-btn",t,o&&M.wordWrapButtonEnabled),"aria-label":s,title:s,children:(0,B.jsx)(W,{className:M.wordWrapButtonIcon,"aria-hidden":"true"})})}function R(e){let{children:t,className:n="",metastring:s,title:r,showLineNumbers:i,language:u}=e;const{prism:{defaultLanguage:d,magicComments:p}}=(0,a.p)(),b=function(e){return e?.toLowerCase()}(u??function(e){const t=e.split(" ").find((e=>e.startsWith("language-")));return t?.replace(/language-/,"")}(n)??d),f=l(),h=function(){const[e,t]=(0,o.useState)(!1),[n,s]=(0,o.useState)(!1),c=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const n=c.current.querySelector("code");e?n.removeAttribute("style"):(n.style.whiteSpace="pre-wrap",n.style.overflowWrap="anywhere"),t((e=>!e))}),[c,e]),a=(0,o.useCallback)((()=>{const{scrollWidth:e,clientWidth:t}=c.current,n=e>t||c.current.querySelector("code").hasAttribute("style");s(n)}),[c]);return w(c,a),(0,o.useEffect)((()=>{a()}),[e,a]),(0,o.useEffect)((()=>(window.addEventListener("resize",a,{passive:!0}),()=>{window.removeEventListener("resize",a)})),[a]),{codeBlockRef:c,isEnabled:e,isCodeScrollable:n,toggle:r}}(),g=function(e){return e?.match(m)?.groups.title??""}(s)||r,{lineClassNames:x,code:v}=k(t,{metastring:s,language:b,magicComments:p}),C=i??function(e){return Boolean(e?.includes("showLineNumbers"))}(s);return(0,B.jsxs)(j,{as:"div",className:(0,c.A)(n,b&&!n.includes(`language-${b}`)&&`language-${b}`),children:[g&&(0,B.jsx)("div",{className:y.codeBlockTitle,children:g}),(0,B.jsxs)("div",{className:y.codeBlockContent,children:[(0,B.jsx)(E.f4,{theme:f,code:v,language:b??"text",children:e=>{let{className:t,style:n,tokens:o,getLineProps:s,getTokenProps:r}=e;return(0,B.jsx)("pre",{tabIndex:0,ref:h.codeBlockRef,className:(0,c.A)(t,y.codeBlock,"thin-scrollbar"),style:n,children:(0,B.jsx)("code",{className:(0,c.A)(y.codeBlockLines,C&&y.codeBlockLinesWithNumbering),children:o.map(((e,t)=>(0,B.jsx)(A,{line:e,getLineProps:s,getTokenProps:r,classNames:x[t],showLineNumbers:C},t)))})})}}),(0,B.jsxs)("div",{className:y.buttonGroup,children:[(h.isEnabled||h.isCodeScrollable)&&(0,B.jsx)(H,{className:y.codeButton,onClick:()=>h.toggle(),isEnabled:h.isEnabled}),(0,B.jsx)($,{className:y.codeButton,code:v})]})]})]})}function V(e){let{children:t,...n}=e;const c=(0,s.A)(),r=function(e){return o.Children.toArray(e).some((e=>(0,o.isValidElement)(e)))?e:Array.isArray(e)?e.join(""):e}(t),a="string"==typeof r?R:v;return(0,B.jsx)(a,{...n,children:r},String(c))}},8426:(e,t)=>{function n(e){let t,n=[];for(let o of e.split(",").map((e=>e.trim())))if(/^-?\d+$/.test(o))n.push(parseInt(o,10));else if(t=o.match(/^(-?\d+)(-|\.\.\.?|\u2025|\u2026|\u22EF)(-?\d+)$/)){let[e,o,s,c]=t;if(o&&c){o=parseInt(o),c=parseInt(c);const e=o<c?1:-1;"-"!==s&&".."!==s&&"\u2025"!==s||(c+=e);for(let t=o;t!==c;t+=e)n.push(t)}}return n}t.default=n,e.exports=n},8453:(e,t,n)=>{"use strict";n.d(t,{R:()=>r,x:()=>a});var o=n(6540);const s={},c=o.createContext(s);function r(e){const t=o.useContext(c);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),o.createElement(c.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/17347b34.21ab0fd2.js b/assets/js/17347b34.21ab0fd2.js new file mode 100644 index 00000000..2e1db616 --- /dev/null +++ b/assets/js/17347b34.21ab0fd2.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[6468],{720:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>o,contentTitle:()=>a,default:()=>p,frontMatter:()=>r,metadata:()=>i,toc:()=>c});const i=JSON.parse('{"id":"getting-started/nextjs-integration","title":"NextJS","description":"There are a few steps you need to follow to integrate Stylable into your NextJS project.","source":"@site/docs/getting-started/nextjs-integration.md","sourceDirName":"getting-started","slug":"/getting-started/nextjs-integration","permalink":"/docs/getting-started/nextjs-integration","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/getting-started/nextjs-integration.md","tags":[],"version":"current","frontMatter":{"id":"nextjs-integration","title":"NextJS"},"sidebar":"Discover","previous":{"title":"Integrations","permalink":"/docs/getting-started/integrations"},"next":{"title":"Rollup","permalink":"/docs/getting-started/rollup-integration"}}');var l=t(4848),s=t(8453);const r={id:"nextjs-integration",title:"NextJS"},a=void 0,o={},c=[{value:"Example Configuration:",id:"example-configuration",level:4},{value:"Using 3rd-party stylesheets",id:"using-3rd-party-stylesheets",level:3},{value:"Example Configuration:",id:"example-configuration-1",level:4},{value:"TypeScript integration",id:"typescript-integration",level:3},{value:"App directory",id:"app-directory",level:3},{value:"Example Configuration:",id:"example-configuration-2",level:4}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",...(0,s.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.p,{children:"There are a few steps you need to follow to integrate Stylable into your NextJS project."}),"\n",(0,l.jsxs)(n.ol,{children:["\n",(0,l.jsxs)(n.li,{children:["Install ",(0,l.jsx)(n.code,{children:"@stylable/webpack-plugin"})," as a ",(0,l.jsx)(n.code,{children:"devDependency"})," in your ",(0,l.jsx)(n.code,{children:"package.json"})," file."]}),"\n",(0,l.jsxs)(n.li,{children:["Create a ",(0,l.jsx)(n.code,{children:"next.config.js"})," file."]}),"\n",(0,l.jsx)(n.li,{children:"Exclude other CSS loaders from loading Stylable (*.st.css) files."}),"\n",(0,l.jsx)(n.li,{children:"Add the Stylable plugin to the webpack configuration."}),"\n"]}),"\n",(0,l.jsx)(n.h4,{id:"example-configuration",children:"Example Configuration:"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-js",metastring:'title="next.config.js"',children:"const { \n StylableWebpackPlugin,\n applyWebpackConfigStylableExcludes \n} = require('@stylable/webpack-plugin');\n\n/* \n * single optimizer for NextJS multiple builds \n * in order to sync client/server namespaces \n*/\nconst StylableOptimizer = require('@stylable/optimizer').StylableOptimizer;\nconst stylableOptimizer = new StylableOptimizer();\n\nmodule.exports = {\n webpack: (config) => {\n /* exclude Stylable files from all other loaders */\n applyWebpackConfigStylableExcludes(config);\n\n /* add the Stylable plugin to the webpack configuration */\n config.plugins.push(\n new StylableWebpackPlugin({\n /* let NextJS handle assets */\n filterAssets: () => false,\n\n /* output CSS to the correct location */\n filename: 'static/css/stylable.[contenthash].css',\n\n /* a shared optimizer instance */\n optimizer: stylableOptimizer,\n })\n );\n return config;\n },\n};\n"})}),"\n",(0,l.jsx)(n.admonition,{type:"important",children:(0,l.jsxs)(n.p,{children:["The ",(0,l.jsx)(n.code,{children:"applyWebpackConfigStylableExcludes"})," export and ",(0,l.jsx)(n.code,{children:"filterAssets"})," flag are available in ",(0,l.jsx)(n.code,{children:"@stylable/webpack-plugin"})," version ",(0,l.jsx)(n.code,{children:"4.2.2"})," and onwards."]})}),"\n",(0,l.jsx)(n.h3,{id:"using-3rd-party-stylesheets",children:"Using 3rd-party stylesheets"}),"\n",(0,l.jsxs)(n.p,{children:["If your project consumes any 3rd-party Stylable stylesheets, additional configuration is required to ensure that they will be handled by ",(0,l.jsx)(n.code,{children:"@stylable/webpack-plugin"}),":"]}),"\n",(0,l.jsxs)(n.ol,{children:["\n",(0,l.jsxs)(n.li,{children:["Add an import to ",(0,l.jsx)(n.code,{children:"bundleServerLibs"})," from ",(0,l.jsx)(n.code,{children:"@stylable/webpack-plugin"})]}),"\n",(0,l.jsxs)(n.li,{children:["Use the ",(0,l.jsx)(n.code,{children:"isServer"})," flag from the webpack configuration context in the second argument"]}),"\n",(0,l.jsxs)(n.li,{children:["Call ",(0,l.jsx)(n.code,{children:"bundleServerLibs"})," with the webpack ",(0,l.jsx)(n.code,{children:"config"}),", packages to bundle, and the ",(0,l.jsx)(n.code,{children:"isServer"})," flag"]}),"\n"]}),"\n",(0,l.jsx)(n.h4,{id:"example-configuration-1",children:"Example Configuration:"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-js",metastring:'title="next.config.js"',children:"const { \n StylableWebpackPlugin,\n applyWebpackConfigStylableExcludes,\n bundleServerLibs\n} = require('@stylable/webpack-plugin');\n\n/* \n * single optimizer for NextJS multiple builds \n * in order to sync client/server namespaces \n*/\nconst StylableOptimizer = require('@stylable/optimizer').StylableOptimizer;\nconst stylableOptimizer = new StylableOptimizer();\n\nmodule.exports = {\n webpack: (config, { isServer }) => {\n /* exclude Stylable files from all other loaders */\n applyWebpackConfigStylableExcludes(config);\n \n /* causes provided packages to be bundled (not external) */\n bundleServerLibs(config, new Set(['PACKAGE1', 'PACKAGE2'], isServer));\n\n /* add the Stylable plugin to the webpack configuration */\n config.plugins.push(\n new StylableWebpackPlugin({\n /* let NextJS handle assets */\n filterAssets: () => false,\n\n /* output CSS to the correct location */\n filename: 'static/css/stylable.[contenthash].css',\n\n /* a shared optimizer instance */\n optimizer: stylableOptimizer,\n })\n );\n return config;\n },\n};\n"})}),"\n",(0,l.jsx)(n.h3,{id:"typescript-integration",children:"TypeScript integration"}),"\n",(0,l.jsxs)(n.p,{children:["If your NextJS project is configured to work with TypeScript, see our page on ",(0,l.jsx)(n.a,{href:"/docs/getting-started/typescript-integration",children:"integrating Stylable with TypeScript"}),"."]}),"\n",(0,l.jsx)(n.h3,{id:"app-directory",children:"App directory"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsxs)(n.strong,{children:["Support for Next.js ",(0,l.jsx)(n.a,{href:"https://beta.nextjs.org/docs/app-directory-roadmap",children:"App directory"})," is experimental."]})}),"\n",(0,l.jsx)(n.p,{children:"There are two settings that are required to integrate Stylable with the App directory mode:"}),"\n",(0,l.jsxs)(n.ol,{children:["\n",(0,l.jsxs)(n.li,{children:["set ",(0,l.jsx)(n.code,{children:"cssInjection:css"})," in order to force CSS to be served as a static CSS file in dev mode. This is required because App directory mode defaults to React server render, and Stylable defaults to injecting CSS via Javascript in development which doesn't reach the browser."]}),"\n",(0,l.jsxs)(n.li,{children:["set ",(0,l.jsx)(n.code,{children:"experimentalAttachCssToContainingChunks:true"})," to change the way the generated CSS asset is attached to Webpack chunks in order for Next.js to pick it up as a CSS module and not a JavaScript module."]}),"\n"]}),"\n",(0,l.jsx)(n.h4,{id:"example-configuration-2",children:"Example Configuration:"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-js",metastring:'title="next.config.js"',children:"const { \n StylableWebpackPlugin,\n applyWebpackConfigStylableExcludes \n} = require('@stylable/webpack-plugin');\n\n/* \n * single optimizer for NextJS multiple builds \n * in order to sync client/server namespaces \n*/\nconst StylableOptimizer = require('@stylable/optimizer').StylableOptimizer;\nconst stylableOptimizer = new StylableOptimizer();\n\nmodule.exports = {\n webpack: (config) => {\n /* exclude Stylable files from all other loaders */\n applyWebpackConfigStylableExcludes(config);\n\n /* add the Stylable plugin to the webpack configuration */\n config.plugins.push(\n new StylableWebpackPlugin({\n /* let NextJS handle assets */\n filterAssets: () => false,\n\n /* output CSS to the correct location */\n filename: 'static/css/stylable.[contenthash].css',\n\n /* a shared optimizer instance */\n optimizer: stylableOptimizer,\n\n /* serve CSS as a bundled asset */\n cssInjection: 'css',\n\n /* attach CSS to every chunk containing a Stylable stylesheet,\n instead of to entry chunks \n */\n experimentalAttachCssToContainingChunks: true,\n })\n );\n return config;\n },\n};\n"})})]})}function p(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>a});var i=t(6540);const l={},s=i.createContext(l);function r(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:r(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/17347b34.a155ec2b.js b/assets/js/17347b34.a155ec2b.js deleted file mode 100644 index 03f33ef1..00000000 --- a/assets/js/17347b34.a155ec2b.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[6468],{9097:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>o,contentTitle:()=>a,default:()=>p,frontMatter:()=>r,metadata:()=>i,toc:()=>c});const i=JSON.parse('{"id":"getting-started/nextjs-integration","title":"NextJS","description":"There are a few steps you need to follow to integrate Stylable into your NextJS project.","source":"@site/docs/getting-started/nextjs-integration.md","sourceDirName":"getting-started","slug":"/getting-started/nextjs-integration","permalink":"/docs/getting-started/nextjs-integration","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/getting-started/nextjs-integration.md","tags":[],"version":"current","frontMatter":{"id":"nextjs-integration","title":"NextJS"},"sidebar":"Discover","previous":{"title":"Integrations","permalink":"/docs/getting-started/integrations"},"next":{"title":"Rollup","permalink":"/docs/getting-started/rollup-integration"}}');var l=t(4848),s=t(8453);const r={id:"nextjs-integration",title:"NextJS"},a=void 0,o={},c=[{value:"Example Configuration:",id:"example-configuration",level:4},{value:"Using 3rd-party stylesheets",id:"using-3rd-party-stylesheets",level:3},{value:"Example Configuration:",id:"example-configuration-1",level:4},{value:"TypeScript integration",id:"typescript-integration",level:3},{value:"App directory",id:"app-directory",level:3},{value:"Example Configuration:",id:"example-configuration-2",level:4}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",...(0,s.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.p,{children:"There are a few steps you need to follow to integrate Stylable into your NextJS project."}),"\n",(0,l.jsxs)(n.ol,{children:["\n",(0,l.jsxs)(n.li,{children:["Install ",(0,l.jsx)(n.code,{children:"@stylable/webpack-plugin"})," as a ",(0,l.jsx)(n.code,{children:"devDependency"})," in your ",(0,l.jsx)(n.code,{children:"package.json"})," file."]}),"\n",(0,l.jsxs)(n.li,{children:["Create a ",(0,l.jsx)(n.code,{children:"next.config.js"})," file."]}),"\n",(0,l.jsx)(n.li,{children:"Exclude other CSS loaders from loading Stylable (*.st.css) files."}),"\n",(0,l.jsx)(n.li,{children:"Add the Stylable plugin to the webpack configuration."}),"\n"]}),"\n",(0,l.jsx)(n.h4,{id:"example-configuration",children:"Example Configuration:"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-js",metastring:'title="next.config.js"',children:"const { \n StylableWebpackPlugin,\n applyWebpackConfigStylableExcludes \n} = require('@stylable/webpack-plugin');\n\n/* \n * single optimizer for NextJS multiple builds \n * in order to sync client/server namespaces \n*/\nconst StylableOptimizer = require('@stylable/optimizer').StylableOptimizer;\nconst stylableOptimizer = new StylableOptimizer();\n\nmodule.exports = {\n webpack: (config) => {\n /* exclude Stylable files from all other loaders */\n applyWebpackConfigStylableExcludes(config);\n\n /* add the Stylable plugin to the webpack configuration */\n config.plugins.push(\n new StylableWebpackPlugin({\n /* let NextJS handle assets */\n filterAssets: () => false,\n\n /* output CSS to the correct location */\n filename: 'static/css/stylable.[contenthash].css',\n\n /* a shared optimizer instance */\n optimizer: stylableOptimizer,\n })\n );\n return config;\n },\n};\n"})}),"\n",(0,l.jsx)(n.admonition,{type:"important",children:(0,l.jsxs)(n.p,{children:["The ",(0,l.jsx)(n.code,{children:"applyWebpackConfigStylableExcludes"})," export and ",(0,l.jsx)(n.code,{children:"filterAssets"})," flag are available in ",(0,l.jsx)(n.code,{children:"@stylable/webpack-plugin"})," version ",(0,l.jsx)(n.code,{children:"4.2.2"})," and onwards."]})}),"\n",(0,l.jsx)(n.h3,{id:"using-3rd-party-stylesheets",children:"Using 3rd-party stylesheets"}),"\n",(0,l.jsxs)(n.p,{children:["If your project consumes any 3rd-party Stylable stylesheets, additional configuration is required to ensure that they will be handled by ",(0,l.jsx)(n.code,{children:"@stylable/webpack-plugin"}),":"]}),"\n",(0,l.jsxs)(n.ol,{children:["\n",(0,l.jsxs)(n.li,{children:["Add an import to ",(0,l.jsx)(n.code,{children:"bundleServerLibs"})," from ",(0,l.jsx)(n.code,{children:"@stylable/webpack-plugin"})]}),"\n",(0,l.jsxs)(n.li,{children:["Use the ",(0,l.jsx)(n.code,{children:"isServer"})," flag from the webpack configuration context in the second argument"]}),"\n",(0,l.jsxs)(n.li,{children:["Call ",(0,l.jsx)(n.code,{children:"bundleServerLibs"})," with the webpack ",(0,l.jsx)(n.code,{children:"config"}),", packages to bundle, and the ",(0,l.jsx)(n.code,{children:"isServer"})," flag"]}),"\n"]}),"\n",(0,l.jsx)(n.h4,{id:"example-configuration-1",children:"Example Configuration:"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-js",metastring:'title="next.config.js"',children:"const { \n StylableWebpackPlugin,\n applyWebpackConfigStylableExcludes,\n bundleServerLibs\n} = require('@stylable/webpack-plugin');\n\n/* \n * single optimizer for NextJS multiple builds \n * in order to sync client/server namespaces \n*/\nconst StylableOptimizer = require('@stylable/optimizer').StylableOptimizer;\nconst stylableOptimizer = new StylableOptimizer();\n\nmodule.exports = {\n webpack: (config, { isServer }) => {\n /* exclude Stylable files from all other loaders */\n applyWebpackConfigStylableExcludes(config);\n \n /* causes provided packages to be bundled (not external) */\n bundleServerLibs(config, new Set(['PACKAGE1', 'PACKAGE2'], isServer));\n\n /* add the Stylable plugin to the webpack configuration */\n config.plugins.push(\n new StylableWebpackPlugin({\n /* let NextJS handle assets */\n filterAssets: () => false,\n\n /* output CSS to the correct location */\n filename: 'static/css/stylable.[contenthash].css',\n\n /* a shared optimizer instance */\n optimizer: stylableOptimizer,\n })\n );\n return config;\n },\n};\n"})}),"\n",(0,l.jsx)(n.h3,{id:"typescript-integration",children:"TypeScript integration"}),"\n",(0,l.jsxs)(n.p,{children:["If your NextJS project is configured to work with TypeScript, see our page on ",(0,l.jsx)(n.a,{href:"/docs/getting-started/typescript-integration",children:"integrating Stylable with TypeScript"}),"."]}),"\n",(0,l.jsx)(n.h3,{id:"app-directory",children:"App directory"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsxs)(n.strong,{children:["Support for Next.js ",(0,l.jsx)(n.a,{href:"https://beta.nextjs.org/docs/app-directory-roadmap",children:"App directory"})," is experimental."]})}),"\n",(0,l.jsx)(n.p,{children:"There are two settings that are required to integrate Stylable with the App directory mode:"}),"\n",(0,l.jsxs)(n.ol,{children:["\n",(0,l.jsxs)(n.li,{children:["set ",(0,l.jsx)(n.code,{children:"cssInjection:css"})," in order to force CSS to be served as a static CSS file in dev mode. This is required because App directory mode defaults to React server render, and Stylable defaults to injecting CSS via Javascript in development which doesn't reach the browser."]}),"\n",(0,l.jsxs)(n.li,{children:["set ",(0,l.jsx)(n.code,{children:"experimentalAttachCssToContainingChunks:true"})," to change the way the generated CSS asset is attached to Webpack chunks in order for Next.js to pick it up as a CSS module and not a JavaScript module."]}),"\n"]}),"\n",(0,l.jsx)(n.h4,{id:"example-configuration-2",children:"Example Configuration:"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-js",metastring:'title="next.config.js"',children:"const { \n StylableWebpackPlugin,\n applyWebpackConfigStylableExcludes \n} = require('@stylable/webpack-plugin');\n\n/* \n * single optimizer for NextJS multiple builds \n * in order to sync client/server namespaces \n*/\nconst StylableOptimizer = require('@stylable/optimizer').StylableOptimizer;\nconst stylableOptimizer = new StylableOptimizer();\n\nmodule.exports = {\n webpack: (config) => {\n /* exclude Stylable files from all other loaders */\n applyWebpackConfigStylableExcludes(config);\n\n /* add the Stylable plugin to the webpack configuration */\n config.plugins.push(\n new StylableWebpackPlugin({\n /* let NextJS handle assets */\n filterAssets: () => false,\n\n /* output CSS to the correct location */\n filename: 'static/css/stylable.[contenthash].css',\n\n /* a shared optimizer instance */\n optimizer: stylableOptimizer,\n\n /* serve CSS as a bundled asset */\n cssInjection: 'css',\n\n /* attach CSS to every chunk containing a Stylable stylesheet,\n instead of to entry chunks \n */\n experimentalAttachCssToContainingChunks: true,\n })\n );\n return config;\n },\n};\n"})})]})}function p(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>a});var i=t(6540);const l={},s=i.createContext(l);function r(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:r(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/17896441.01c5f8f4.js b/assets/js/17896441.01c5f8f4.js new file mode 100644 index 00000000..b4fcc4f9 --- /dev/null +++ b/assets/js/17896441.01c5f8f4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[8401],{2234:(e,t,n)=>{n.d(t,{A:()=>c});n(6540);var s=n(4164),a=n(4084),i=n(7559),o=n(7293),l=n(4848);function r(e){let{className:t}=e;return(0,l.jsx)(o.A,{type:"caution",title:(0,l.jsx)(a.Rc,{}),className:(0,s.A)(t,i.G.common.unlistedBanner),children:(0,l.jsx)(a.Uh,{})})}function c(e){return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(a.AE,{}),(0,l.jsx)(r,{...e})]})}},1689:(e,t,n)=>{n.d(t,{A:()=>d});n(6540);var s=n(4164),a=n(4084),i=n(7559),o=n(7293),l=n(4848);function r(e){let{className:t}=e;return(0,l.jsx)(o.A,{type:"caution",title:(0,l.jsx)(a.Yh,{}),className:(0,s.A)(t,i.G.common.draftBanner),children:(0,l.jsx)(a.TT,{})})}var c=n(2234);function d(e){let{metadata:t}=e;const{unlisted:n,frontMatter:s}=t;return(0,l.jsxs)(l.Fragment,{children:[(n||s.unlisted)&&(0,l.jsx)(c.A,{}),s.draft&&(0,l.jsx)(r,{})]})}},1243:(e,t,n)=>{n.d(t,{A:()=>f});n(6540);var s=n(4164),a=n(7559),i=n(6972),o=n(9169),l=n(8774),r=n(1312),c=n(6025),d=n(4848);function u(e){return(0,d.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,d.jsx)("path",{d:"M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z",fill:"currentColor"})})}const m={breadcrumbHomeIcon:"breadcrumbHomeIcon_YNFT"};function h(){const e=(0,c.Ay)("/");return(0,d.jsx)("li",{className:"breadcrumbs__item",children:(0,d.jsx)(l.A,{"aria-label":(0,r.T)({id:"theme.docs.breadcrumbs.home",message:"Home page",description:"The ARIA label for the home page in the breadcrumbs"}),className:"breadcrumbs__link",href:e,children:(0,d.jsx)(u,{className:m.breadcrumbHomeIcon})})})}const v={breadcrumbsContainer:"breadcrumbsContainer_Z_bl"};function b(e){let{children:t,href:n,isLast:s}=e;const a="breadcrumbs__link";return s?(0,d.jsx)("span",{className:a,itemProp:"name",children:t}):n?(0,d.jsx)(l.A,{className:a,href:n,itemProp:"item",children:(0,d.jsx)("span",{itemProp:"name",children:t})}):(0,d.jsx)("span",{className:a,children:t})}function x(e){let{children:t,active:n,index:a,addMicrodata:i}=e;return(0,d.jsxs)("li",{...i&&{itemScope:!0,itemProp:"itemListElement",itemType:"https://schema.org/ListItem"},className:(0,s.A)("breadcrumbs__item",{"breadcrumbs__item--active":n}),children:[t,(0,d.jsx)("meta",{itemProp:"position",content:String(a+1)})]})}function f(){const e=(0,i.OF)(),t=(0,o.Dt)();return e?(0,d.jsx)("nav",{className:(0,s.A)(a.G.docs.docBreadcrumbs,v.breadcrumbsContainer),"aria-label":(0,r.T)({id:"theme.docs.breadcrumbs.navAriaLabel",message:"Breadcrumbs",description:"The ARIA label for the breadcrumbs"}),children:(0,d.jsxs)("ul",{className:"breadcrumbs",itemScope:!0,itemType:"https://schema.org/BreadcrumbList",children:[t&&(0,d.jsx)(h,{}),e.map(((t,n)=>{const s=n===e.length-1,a="category"===t.type&&t.linkUnlisted?void 0:t.href;return(0,d.jsx)(x,{active:s,index:n,addMicrodata:!!a,children:(0,d.jsx)(b,{href:a,isLast:s,children:t.label})},n)}))]})}):null}},833:(e,t,n)=>{n.r(t),n.d(t,{default:()=>P});var s=n(6540),a=n(1213),i=n(9532),o=n(4848);const l=s.createContext(null);function r(e){let{children:t,content:n}=e;const a=function(e){return(0,s.useMemo)((()=>({metadata:e.metadata,frontMatter:e.frontMatter,assets:e.assets,contentTitle:e.contentTitle,toc:e.toc})),[e])}(n);return(0,o.jsx)(l.Provider,{value:a,children:t})}function c(){const e=(0,s.useContext)(l);if(null===e)throw new i.dV("DocProvider");return e}function d(){const{metadata:e,frontMatter:t,assets:n}=c();return(0,o.jsx)(a.be,{title:e.title,description:e.description,keywords:t.keywords,image:n.image??t.image})}var u=n(4164),m=n(4581),h=n(7719);function v(){const{metadata:e}=c();return(0,o.jsx)(h.A,{previous:e.previous,next:e.next})}var b=n(1878),x=n(4267),f=n(7559),p=n(2053),g=n(4336);function j(){const{metadata:e}=c(),{editUrl:t,lastUpdatedAt:n,lastUpdatedBy:s,tags:a}=e,i=a.length>0,l=!!(t||n||s);return i||l?(0,o.jsxs)("footer",{className:(0,u.A)(f.G.docs.docFooter,"docusaurus-mt-lg"),children:[i&&(0,o.jsx)("div",{className:(0,u.A)("row margin-top--sm",f.G.docs.docFooterTagsRow),children:(0,o.jsx)("div",{className:"col",children:(0,o.jsx)(p.A,{tags:a})})}),l&&(0,o.jsx)(g.A,{className:(0,u.A)("margin-top--sm",f.G.docs.docFooterEditMetaRow),editUrl:t,lastUpdatedAt:n,lastUpdatedBy:s})]}):null}var A=n(1422),L=n(5195),C=n(1312);const N={tocCollapsibleButton:"tocCollapsibleButton_TO0P",tocCollapsibleButtonExpanded:"tocCollapsibleButtonExpanded_MG3E"};function _(e){let{collapsed:t,...n}=e;return(0,o.jsx)("button",{type:"button",...n,className:(0,u.A)("clean-btn",N.tocCollapsibleButton,!t&&N.tocCollapsibleButtonExpanded,n.className),children:(0,o.jsx)(C.A,{id:"theme.TOCCollapsible.toggleButtonLabel",description:"The label used by the button on the collapsible TOC component",children:"On this page"})})}const T={tocCollapsible:"tocCollapsible_ETCw",tocCollapsibleContent:"tocCollapsibleContent_vkbj",tocCollapsibleExpanded:"tocCollapsibleExpanded_sAul"};function k(e){let{toc:t,className:n,minHeadingLevel:s,maxHeadingLevel:a}=e;const{collapsed:i,toggleCollapsed:l}=(0,A.u)({initialState:!0});return(0,o.jsxs)("div",{className:(0,u.A)(T.tocCollapsible,!i&&T.tocCollapsibleExpanded,n),children:[(0,o.jsx)(_,{collapsed:i,onClick:l}),(0,o.jsx)(A.N,{lazy:!0,className:T.tocCollapsibleContent,collapsed:i,children:(0,o.jsx)(L.A,{toc:t,minHeadingLevel:s,maxHeadingLevel:a})})]})}const H={tocMobile:"tocMobile_ITEo"};function y(){const{toc:e,frontMatter:t}=c();return(0,o.jsx)(k,{toc:e,minHeadingLevel:t.toc_min_heading_level,maxHeadingLevel:t.toc_max_heading_level,className:(0,u.A)(f.G.docs.docTocMobile,H.tocMobile)})}var M=n(7763);function B(){const{toc:e,frontMatter:t}=c();return(0,o.jsx)(M.A,{toc:e,minHeadingLevel:t.toc_min_heading_level,maxHeadingLevel:t.toc_max_heading_level,className:f.G.docs.docTocDesktop})}var I=n(1107),w=n(5425);function E(e){let{children:t}=e;const n=function(){const{metadata:e,frontMatter:t,contentTitle:n}=c();return t.hide_title||void 0!==n?null:e.title}();return(0,o.jsxs)("div",{className:(0,u.A)(f.G.docs.docMarkdown,"markdown"),children:[n&&(0,o.jsx)("header",{children:(0,o.jsx)(I.A,{as:"h1",children:n})}),(0,o.jsx)(w.A,{children:t})]})}var V=n(1243),O=n(1689);const G={docItemContainer:"docItemContainer_Djhp",docItemCol:"docItemCol_VOVn"};function S(e){let{children:t}=e;const n=function(){const{frontMatter:e,toc:t}=c(),n=(0,m.l)(),s=e.hide_table_of_contents,a=!s&&t.length>0;return{hidden:s,mobile:a?(0,o.jsx)(y,{}):void 0,desktop:!a||"desktop"!==n&&"ssr"!==n?void 0:(0,o.jsx)(B,{})}}(),{metadata:s}=c();return(0,o.jsxs)("div",{className:"row",children:[(0,o.jsxs)("div",{className:(0,u.A)("col",!n.hidden&&G.docItemCol),children:[(0,o.jsx)(O.A,{metadata:s}),(0,o.jsx)(b.A,{}),(0,o.jsxs)("div",{className:G.docItemContainer,children:[(0,o.jsxs)("article",{children:[(0,o.jsx)(V.A,{}),(0,o.jsx)(x.A,{}),n.mobile,(0,o.jsx)(E,{children:t}),(0,o.jsx)(j,{})]}),(0,o.jsx)(v,{})]})]}),n.desktop&&(0,o.jsx)("div",{className:"col col--3",children:n.desktop})]})}function P(e){const t=`docs-doc-id-${e.content.metadata.id}`,n=e.content;return(0,o.jsx)(r,{content:e.content,children:(0,o.jsxs)(a.e3,{className:t,children:[(0,o.jsx)(d,{}),(0,o.jsx)(S,{children:(0,o.jsx)(n,{})})]})})}},7719:(e,t,n)=>{n.d(t,{A:()=>o});n(6540);var s=n(1312),a=n(9022),i=n(4848);function o(e){const{previous:t,next:n}=e;return(0,i.jsxs)("nav",{className:"pagination-nav docusaurus-mt-lg","aria-label":(0,s.T)({id:"theme.docs.paginator.navAriaLabel",message:"Docs pages",description:"The ARIA label for the docs pagination"}),children:[t&&(0,i.jsx)(a.A,{...t,subLabel:(0,i.jsx)(s.A,{id:"theme.docs.paginator.previous",description:"The label used to navigate to the previous doc",children:"Previous"})}),n&&(0,i.jsx)(a.A,{...n,subLabel:(0,i.jsx)(s.A,{id:"theme.docs.paginator.next",description:"The label used to navigate to the next doc",children:"Next"}),isNext:!0})]})}},4267:(e,t,n)=>{n.d(t,{A:()=>r});n(6540);var s=n(4164),a=n(1312),i=n(7559),o=n(3025),l=n(4848);function r(e){let{className:t}=e;const n=(0,o.r)();return n.badge?(0,l.jsx)("span",{className:(0,s.A)(t,i.G.docs.docVersionBadge,"badge badge--secondary"),children:(0,l.jsx)(a.A,{id:"theme.docs.versionBadge.label",values:{versionLabel:n.label},children:"Version: {versionLabel}"})}):null}},1878:(e,t,n)=>{n.d(t,{A:()=>x});n(6540);var s=n(4164),a=n(4586),i=n(8774),o=n(1312),l=n(4070),r=n(7559),c=n(3886),d=n(3025),u=n(4848);const m={unreleased:function(e){let{siteTitle:t,versionMetadata:n}=e;return(0,u.jsx)(o.A,{id:"theme.docs.versions.unreleasedVersionLabel",description:"The label used to tell the user that he's browsing an unreleased doc version",values:{siteTitle:t,versionLabel:(0,u.jsx)("b",{children:n.label})},children:"This is unreleased documentation for {siteTitle} {versionLabel} version."})},unmaintained:function(e){let{siteTitle:t,versionMetadata:n}=e;return(0,u.jsx)(o.A,{id:"theme.docs.versions.unmaintainedVersionLabel",description:"The label used to tell the user that he's browsing an unmaintained doc version",values:{siteTitle:t,versionLabel:(0,u.jsx)("b",{children:n.label})},children:"This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained."})}};function h(e){const t=m[e.versionMetadata.banner];return(0,u.jsx)(t,{...e})}function v(e){let{versionLabel:t,to:n,onClick:s}=e;return(0,u.jsx)(o.A,{id:"theme.docs.versions.latestVersionSuggestionLabel",description:"The label used to tell the user to check the latest version",values:{versionLabel:t,latestVersionLink:(0,u.jsx)("b",{children:(0,u.jsx)(i.A,{to:n,onClick:s,children:(0,u.jsx)(o.A,{id:"theme.docs.versions.latestVersionLinkLabel",description:"The label used for the latest version suggestion link label",children:"latest version"})})})},children:"For up-to-date documentation, see the {latestVersionLink} ({versionLabel})."})}function b(e){let{className:t,versionMetadata:n}=e;const{siteConfig:{title:i}}=(0,a.A)(),{pluginId:o}=(0,l.vT)({failfast:!0}),{savePreferredVersionName:d}=(0,c.g1)(o),{latestDocSuggestion:m,latestVersionSuggestion:b}=(0,l.HW)(o),x=m??(f=b).docs.find((e=>e.id===f.mainDocId));var f;return(0,u.jsxs)("div",{className:(0,s.A)(t,r.G.docs.docVersionBanner,"alert alert--warning margin-bottom--md"),role:"alert",children:[(0,u.jsx)("div",{children:(0,u.jsx)(h,{siteTitle:i,versionMetadata:n})}),(0,u.jsx)("div",{className:"margin-top--md",children:(0,u.jsx)(v,{versionLabel:b.label,to:x.path,onClick:()=>d(b.name)})})]})}function x(e){let{className:t}=e;const n=(0,d.r)();return n.banner?(0,u.jsx)(b,{className:t,versionMetadata:n}):null}},7763:(e,t,n)=>{n.d(t,{A:()=>c});n(6540);var s=n(4164),a=n(5195);const i={tableOfContents:"tableOfContents_bqdL",docItemContainer:"docItemContainer_F8PC"};var o=n(4848);const l="table-of-contents__link toc-highlight",r="table-of-contents__link--active";function c(e){let{className:t,...n}=e;return(0,o.jsx)("div",{className:(0,s.A)(i.tableOfContents,"thin-scrollbar",t),children:(0,o.jsx)(a.A,{...n,linkClassName:l,linkActiveClassName:r})})}},5195:(e,t,n)=>{n.d(t,{A:()=>b});var s=n(6540),a=n(6342);function i(e){const t=e.map((e=>({...e,parentIndex:-1,children:[]}))),n=Array(7).fill(-1);t.forEach(((e,t)=>{const s=n.slice(2,e.level);e.parentIndex=Math.max(...s),n[e.level]=t}));const s=[];return t.forEach((e=>{const{parentIndex:n,...a}=e;n>=0?t[n].children.push(a):s.push(a)})),s}function o(e){let{toc:t,minHeadingLevel:n,maxHeadingLevel:s}=e;return t.flatMap((e=>{const t=o({toc:e.children,minHeadingLevel:n,maxHeadingLevel:s});return function(e){return e.level>=n&&e.level<=s}(e)?[{...e,children:t}]:t}))}function l(e){const t=e.getBoundingClientRect();return t.top===t.bottom?l(e.parentNode):t}function r(e,t){let{anchorTopOffset:n}=t;const s=e.find((e=>l(e).top>=n));if(s){return function(e){return e.top>0&&e.bottom<window.innerHeight/2}(l(s))?s:e[e.indexOf(s)-1]??null}return e[e.length-1]??null}function c(){const e=(0,s.useRef)(0),{navbar:{hideOnScroll:t}}=(0,a.p)();return(0,s.useEffect)((()=>{e.current=t?0:document.querySelector(".navbar").clientHeight}),[t]),e}function d(e){const t=(0,s.useRef)(void 0),n=c();(0,s.useEffect)((()=>{if(!e)return()=>{};const{linkClassName:s,linkActiveClassName:a,minHeadingLevel:i,maxHeadingLevel:o}=e;function l(){const e=function(e){return Array.from(document.getElementsByClassName(e))}(s),l=function(e){let{minHeadingLevel:t,maxHeadingLevel:n}=e;const s=[];for(let a=t;a<=n;a+=1)s.push(`h${a}.anchor`);return Array.from(document.querySelectorAll(s.join()))}({minHeadingLevel:i,maxHeadingLevel:o}),c=r(l,{anchorTopOffset:n.current}),d=e.find((e=>c&&c.id===function(e){return decodeURIComponent(e.href.substring(e.href.indexOf("#")+1))}(e)));e.forEach((e=>{!function(e,n){n?(t.current&&t.current!==e&&t.current.classList.remove(a),e.classList.add(a),t.current=e):e.classList.remove(a)}(e,e===d)}))}return document.addEventListener("scroll",l),document.addEventListener("resize",l),l(),()=>{document.removeEventListener("scroll",l),document.removeEventListener("resize",l)}}),[e,n])}var u=n(8774),m=n(4848);function h(e){let{toc:t,className:n,linkClassName:s,isChild:a}=e;return t.length?(0,m.jsx)("ul",{className:a?void 0:n,children:t.map((e=>(0,m.jsxs)("li",{children:[(0,m.jsx)(u.A,{to:`#${e.id}`,className:s??void 0,dangerouslySetInnerHTML:{__html:e.value}}),(0,m.jsx)(h,{isChild:!0,toc:e.children,className:n,linkClassName:s})]},e.id)))}):null}const v=s.memo(h);function b(e){let{toc:t,className:n="table-of-contents table-of-contents__left-border",linkClassName:l="table-of-contents__link",linkActiveClassName:r,minHeadingLevel:c,maxHeadingLevel:u,...h}=e;const b=(0,a.p)(),x=c??b.tableOfContents.minHeadingLevel,f=u??b.tableOfContents.maxHeadingLevel,p=function(e){let{toc:t,minHeadingLevel:n,maxHeadingLevel:a}=e;return(0,s.useMemo)((()=>o({toc:i(t),minHeadingLevel:n,maxHeadingLevel:a})),[t,n,a])}({toc:t,minHeadingLevel:x,maxHeadingLevel:f});return d((0,s.useMemo)((()=>{if(l&&r)return{linkClassName:l,linkActiveClassName:r,minHeadingLevel:x,maxHeadingLevel:f}}),[l,r,x,f])),(0,m.jsx)(v,{toc:p,className:n,linkClassName:l,...h})}},4084:(e,t,n)=>{n.d(t,{AE:()=>r,Rc:()=>o,TT:()=>d,Uh:()=>l,Yh:()=>c});n(6540);var s=n(1312),a=n(5260),i=n(4848);function o(){return(0,i.jsx)(s.A,{id:"theme.contentVisibility.unlistedBanner.title",description:"The unlisted content banner title",children:"Unlisted page"})}function l(){return(0,i.jsx)(s.A,{id:"theme.contentVisibility.unlistedBanner.message",description:"The unlisted content banner message",children:"This page is unlisted. Search engines will not index it, and only users having a direct link can access it."})}function r(){return(0,i.jsx)(a.A,{children:(0,i.jsx)("meta",{name:"robots",content:"noindex, nofollow"})})}function c(){return(0,i.jsx)(s.A,{id:"theme.contentVisibility.draftBanner.title",description:"The draft content banner title",children:"Draft page"})}function d(){return(0,i.jsx)(s.A,{id:"theme.contentVisibility.draftBanner.message",description:"The draft content banner message",children:"This page is a draft. It will only be visible in dev and be excluded from the production build."})}}}]); \ No newline at end of file diff --git a/assets/js/17896441.0e3dc5a0.js b/assets/js/17896441.0e3dc5a0.js deleted file mode 100644 index 5326ed0d..00000000 --- a/assets/js/17896441.0e3dc5a0.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[8401],{8811:(e,t,n)=>{n.d(t,{A:()=>c});n(6540);var s=n(4164),a=n(6907),i=n(8630),o=n(4182),l=n(4848);function r(e){let{className:t}=e;return(0,l.jsx)(o.A,{type:"caution",title:(0,l.jsx)(a.Rc,{}),className:(0,s.A)(t,i.G.common.unlistedBanner),children:(0,l.jsx)(a.Uh,{})})}function c(e){return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(a.AE,{}),(0,l.jsx)(r,{...e})]})}},4648:(e,t,n)=>{n.d(t,{A:()=>d});n(6540);var s=n(4164),a=n(6907),i=n(8630),o=n(4182),l=n(4848);function r(e){let{className:t}=e;return(0,l.jsx)(o.A,{type:"caution",title:(0,l.jsx)(a.Yh,{}),className:(0,s.A)(t,i.G.common.draftBanner),children:(0,l.jsx)(a.TT,{})})}var c=n(8811);function d(e){let{metadata:t}=e;const{unlisted:n,frontMatter:s}=t;return(0,l.jsxs)(l.Fragment,{children:[(n||s.unlisted)&&(0,l.jsx)(c.A,{}),s.draft&&(0,l.jsx)(r,{})]})}},4168:(e,t,n)=>{n.d(t,{A:()=>f});n(6540);var s=n(4164),a=n(8630),i=n(5357),o=n(260),l=n(4783),r=n(3230),c=n(8180),d=n(4848);function u(e){return(0,d.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,d.jsx)("path",{d:"M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z",fill:"currentColor"})})}const m={breadcrumbHomeIcon:"breadcrumbHomeIcon_YNFT"};function h(){const e=(0,c.Ay)("/");return(0,d.jsx)("li",{className:"breadcrumbs__item",children:(0,d.jsx)(l.A,{"aria-label":(0,r.T)({id:"theme.docs.breadcrumbs.home",message:"Home page",description:"The ARIA label for the home page in the breadcrumbs"}),className:"breadcrumbs__link",href:e,children:(0,d.jsx)(u,{className:m.breadcrumbHomeIcon})})})}const v={breadcrumbsContainer:"breadcrumbsContainer_Z_bl"};function b(e){let{children:t,href:n,isLast:s}=e;const a="breadcrumbs__link";return s?(0,d.jsx)("span",{className:a,itemProp:"name",children:t}):n?(0,d.jsx)(l.A,{className:a,href:n,itemProp:"item",children:(0,d.jsx)("span",{itemProp:"name",children:t})}):(0,d.jsx)("span",{className:a,children:t})}function x(e){let{children:t,active:n,index:a,addMicrodata:i}=e;return(0,d.jsxs)("li",{...i&&{itemScope:!0,itemProp:"itemListElement",itemType:"https://schema.org/ListItem"},className:(0,s.A)("breadcrumbs__item",{"breadcrumbs__item--active":n}),children:[t,(0,d.jsx)("meta",{itemProp:"position",content:String(a+1)})]})}function f(){const e=(0,i.OF)(),t=(0,o.Dt)();return e?(0,d.jsx)("nav",{className:(0,s.A)(a.G.docs.docBreadcrumbs,v.breadcrumbsContainer),"aria-label":(0,r.T)({id:"theme.docs.breadcrumbs.navAriaLabel",message:"Breadcrumbs",description:"The ARIA label for the breadcrumbs"}),children:(0,d.jsxs)("ul",{className:"breadcrumbs",itemScope:!0,itemType:"https://schema.org/BreadcrumbList",children:[t&&(0,d.jsx)(h,{}),e.map(((t,n)=>{const s=n===e.length-1,a="category"===t.type&&t.linkUnlisted?void 0:t.href;return(0,d.jsx)(x,{active:s,index:n,addMicrodata:!!a,children:(0,d.jsx)(b,{href:a,isLast:s,children:t.label})},n)}))]})}):null}},2239:(e,t,n)=>{n.r(t),n.d(t,{default:()=>P});var s=n(6540),a=n(6644),i=n(4799),o=n(4848);const l=s.createContext(null);function r(e){let{children:t,content:n}=e;const a=function(e){return(0,s.useMemo)((()=>({metadata:e.metadata,frontMatter:e.frontMatter,assets:e.assets,contentTitle:e.contentTitle,toc:e.toc})),[e])}(n);return(0,o.jsx)(l.Provider,{value:a,children:t})}function c(){const e=(0,s.useContext)(l);if(null===e)throw new i.dV("DocProvider");return e}function d(){const{metadata:e,frontMatter:t,assets:n}=c();return(0,o.jsx)(a.be,{title:e.title,description:e.description,keywords:t.keywords,image:n.image??t.image})}var u=n(4164),m=n(2216),h=n(3682);function v(){const{metadata:e}=c();return(0,o.jsx)(h.A,{previous:e.previous,next:e.next})}var b=n(7180),x=n(9436),f=n(8630),p=n(1113),g=n(5659);function j(){const{metadata:e}=c(),{editUrl:t,lastUpdatedAt:n,lastUpdatedBy:s,tags:a}=e,i=a.length>0,l=!!(t||n||s);return i||l?(0,o.jsxs)("footer",{className:(0,u.A)(f.G.docs.docFooter,"docusaurus-mt-lg"),children:[i&&(0,o.jsx)("div",{className:(0,u.A)("row margin-top--sm",f.G.docs.docFooterTagsRow),children:(0,o.jsx)("div",{className:"col",children:(0,o.jsx)(p.A,{tags:a})})}),l&&(0,o.jsx)(g.A,{className:(0,u.A)("margin-top--sm",f.G.docs.docFooterEditMetaRow),editUrl:t,lastUpdatedAt:n,lastUpdatedBy:s})]}):null}var A=n(4549),L=n(1507),C=n(3230);const N={tocCollapsibleButton:"tocCollapsibleButton_TO0P",tocCollapsibleButtonExpanded:"tocCollapsibleButtonExpanded_MG3E"};function _(e){let{collapsed:t,...n}=e;return(0,o.jsx)("button",{type:"button",...n,className:(0,u.A)("clean-btn",N.tocCollapsibleButton,!t&&N.tocCollapsibleButtonExpanded,n.className),children:(0,o.jsx)(C.A,{id:"theme.TOCCollapsible.toggleButtonLabel",description:"The label used by the button on the collapsible TOC component",children:"On this page"})})}const T={tocCollapsible:"tocCollapsible_ETCw",tocCollapsibleContent:"tocCollapsibleContent_vkbj",tocCollapsibleExpanded:"tocCollapsibleExpanded_sAul"};function k(e){let{toc:t,className:n,minHeadingLevel:s,maxHeadingLevel:a}=e;const{collapsed:i,toggleCollapsed:l}=(0,A.u)({initialState:!0});return(0,o.jsxs)("div",{className:(0,u.A)(T.tocCollapsible,!i&&T.tocCollapsibleExpanded,n),children:[(0,o.jsx)(_,{collapsed:i,onClick:l}),(0,o.jsx)(A.N,{lazy:!0,className:T.tocCollapsibleContent,collapsed:i,children:(0,o.jsx)(L.A,{toc:t,minHeadingLevel:s,maxHeadingLevel:a})})]})}const H={tocMobile:"tocMobile_ITEo"};function y(){const{toc:e,frontMatter:t}=c();return(0,o.jsx)(k,{toc:e,minHeadingLevel:t.toc_min_heading_level,maxHeadingLevel:t.toc_max_heading_level,className:(0,u.A)(f.G.docs.docTocMobile,H.tocMobile)})}var M=n(8793);function B(){const{toc:e,frontMatter:t}=c();return(0,o.jsx)(M.A,{toc:e,minHeadingLevel:t.toc_min_heading_level,maxHeadingLevel:t.toc_max_heading_level,className:f.G.docs.docTocDesktop})}var I=n(5225),w=n(600);function E(e){let{children:t}=e;const n=function(){const{metadata:e,frontMatter:t,contentTitle:n}=c();return t.hide_title||void 0!==n?null:e.title}();return(0,o.jsxs)("div",{className:(0,u.A)(f.G.docs.docMarkdown,"markdown"),children:[n&&(0,o.jsx)("header",{children:(0,o.jsx)(I.A,{as:"h1",children:n})}),(0,o.jsx)(w.A,{children:t})]})}var V=n(4168),O=n(4648);const G={docItemContainer:"docItemContainer_Djhp",docItemCol:"docItemCol_VOVn"};function S(e){let{children:t}=e;const n=function(){const{frontMatter:e,toc:t}=c(),n=(0,m.l)(),s=e.hide_table_of_contents,a=!s&&t.length>0;return{hidden:s,mobile:a?(0,o.jsx)(y,{}):void 0,desktop:!a||"desktop"!==n&&"ssr"!==n?void 0:(0,o.jsx)(B,{})}}(),{metadata:s}=c();return(0,o.jsxs)("div",{className:"row",children:[(0,o.jsxs)("div",{className:(0,u.A)("col",!n.hidden&&G.docItemCol),children:[(0,o.jsx)(O.A,{metadata:s}),(0,o.jsx)(b.A,{}),(0,o.jsxs)("div",{className:G.docItemContainer,children:[(0,o.jsxs)("article",{children:[(0,o.jsx)(V.A,{}),(0,o.jsx)(x.A,{}),n.mobile,(0,o.jsx)(E,{children:t}),(0,o.jsx)(j,{})]}),(0,o.jsx)(v,{})]})]}),n.desktop&&(0,o.jsx)("div",{className:"col col--3",children:n.desktop})]})}function P(e){const t=`docs-doc-id-${e.content.metadata.id}`,n=e.content;return(0,o.jsx)(r,{content:e.content,children:(0,o.jsxs)(a.e3,{className:t,children:[(0,o.jsx)(d,{}),(0,o.jsx)(S,{children:(0,o.jsx)(n,{})})]})})}},3682:(e,t,n)=>{n.d(t,{A:()=>o});n(6540);var s=n(3230),a=n(3555),i=n(4848);function o(e){const{previous:t,next:n}=e;return(0,i.jsxs)("nav",{className:"pagination-nav docusaurus-mt-lg","aria-label":(0,s.T)({id:"theme.docs.paginator.navAriaLabel",message:"Docs pages",description:"The ARIA label for the docs pagination"}),children:[t&&(0,i.jsx)(a.A,{...t,subLabel:(0,i.jsx)(s.A,{id:"theme.docs.paginator.previous",description:"The label used to navigate to the previous doc",children:"Previous"})}),n&&(0,i.jsx)(a.A,{...n,subLabel:(0,i.jsx)(s.A,{id:"theme.docs.paginator.next",description:"The label used to navigate to the next doc",children:"Next"}),isNext:!0})]})}},9436:(e,t,n)=>{n.d(t,{A:()=>r});n(6540);var s=n(4164),a=n(3230),i=n(8630),o=n(1704),l=n(4848);function r(e){let{className:t}=e;const n=(0,o.r)();return n.badge?(0,l.jsx)("span",{className:(0,s.A)(t,i.G.docs.docVersionBadge,"badge badge--secondary"),children:(0,l.jsx)(a.A,{id:"theme.docs.versionBadge.label",values:{versionLabel:n.label},children:"Version: {versionLabel}"})}):null}},7180:(e,t,n)=>{n.d(t,{A:()=>x});n(6540);var s=n(4164),a=n(7639),i=n(4783),o=n(3230),l=n(4721),r=n(8630),c=n(6457),d=n(1704),u=n(4848);const m={unreleased:function(e){let{siteTitle:t,versionMetadata:n}=e;return(0,u.jsx)(o.A,{id:"theme.docs.versions.unreleasedVersionLabel",description:"The label used to tell the user that he's browsing an unreleased doc version",values:{siteTitle:t,versionLabel:(0,u.jsx)("b",{children:n.label})},children:"This is unreleased documentation for {siteTitle} {versionLabel} version."})},unmaintained:function(e){let{siteTitle:t,versionMetadata:n}=e;return(0,u.jsx)(o.A,{id:"theme.docs.versions.unmaintainedVersionLabel",description:"The label used to tell the user that he's browsing an unmaintained doc version",values:{siteTitle:t,versionLabel:(0,u.jsx)("b",{children:n.label})},children:"This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained."})}};function h(e){const t=m[e.versionMetadata.banner];return(0,u.jsx)(t,{...e})}function v(e){let{versionLabel:t,to:n,onClick:s}=e;return(0,u.jsx)(o.A,{id:"theme.docs.versions.latestVersionSuggestionLabel",description:"The label used to tell the user to check the latest version",values:{versionLabel:t,latestVersionLink:(0,u.jsx)("b",{children:(0,u.jsx)(i.A,{to:n,onClick:s,children:(0,u.jsx)(o.A,{id:"theme.docs.versions.latestVersionLinkLabel",description:"The label used for the latest version suggestion link label",children:"latest version"})})})},children:"For up-to-date documentation, see the {latestVersionLink} ({versionLabel})."})}function b(e){let{className:t,versionMetadata:n}=e;const{siteConfig:{title:i}}=(0,a.A)(),{pluginId:o}=(0,l.vT)({failfast:!0}),{savePreferredVersionName:d}=(0,c.g1)(o),{latestDocSuggestion:m,latestVersionSuggestion:b}=(0,l.HW)(o),x=m??(f=b).docs.find((e=>e.id===f.mainDocId));var f;return(0,u.jsxs)("div",{className:(0,s.A)(t,r.G.docs.docVersionBanner,"alert alert--warning margin-bottom--md"),role:"alert",children:[(0,u.jsx)("div",{children:(0,u.jsx)(h,{siteTitle:i,versionMetadata:n})}),(0,u.jsx)("div",{className:"margin-top--md",children:(0,u.jsx)(v,{versionLabel:b.label,to:x.path,onClick:()=>d(b.name)})})]})}function x(e){let{className:t}=e;const n=(0,d.r)();return n.banner?(0,u.jsx)(b,{className:t,versionMetadata:n}):null}},8793:(e,t,n)=>{n.d(t,{A:()=>c});n(6540);var s=n(4164),a=n(1507);const i={tableOfContents:"tableOfContents_bqdL",docItemContainer:"docItemContainer_F8PC"};var o=n(4848);const l="table-of-contents__link toc-highlight",r="table-of-contents__link--active";function c(e){let{className:t,...n}=e;return(0,o.jsx)("div",{className:(0,s.A)(i.tableOfContents,"thin-scrollbar",t),children:(0,o.jsx)(a.A,{...n,linkClassName:l,linkActiveClassName:r})})}},1507:(e,t,n)=>{n.d(t,{A:()=>b});var s=n(6540),a=n(6957);function i(e){const t=e.map((e=>({...e,parentIndex:-1,children:[]}))),n=Array(7).fill(-1);t.forEach(((e,t)=>{const s=n.slice(2,e.level);e.parentIndex=Math.max(...s),n[e.level]=t}));const s=[];return t.forEach((e=>{const{parentIndex:n,...a}=e;n>=0?t[n].children.push(a):s.push(a)})),s}function o(e){let{toc:t,minHeadingLevel:n,maxHeadingLevel:s}=e;return t.flatMap((e=>{const t=o({toc:e.children,minHeadingLevel:n,maxHeadingLevel:s});return function(e){return e.level>=n&&e.level<=s}(e)?[{...e,children:t}]:t}))}function l(e){const t=e.getBoundingClientRect();return t.top===t.bottom?l(e.parentNode):t}function r(e,t){let{anchorTopOffset:n}=t;const s=e.find((e=>l(e).top>=n));if(s){return function(e){return e.top>0&&e.bottom<window.innerHeight/2}(l(s))?s:e[e.indexOf(s)-1]??null}return e[e.length-1]??null}function c(){const e=(0,s.useRef)(0),{navbar:{hideOnScroll:t}}=(0,a.p)();return(0,s.useEffect)((()=>{e.current=t?0:document.querySelector(".navbar").clientHeight}),[t]),e}function d(e){const t=(0,s.useRef)(void 0),n=c();(0,s.useEffect)((()=>{if(!e)return()=>{};const{linkClassName:s,linkActiveClassName:a,minHeadingLevel:i,maxHeadingLevel:o}=e;function l(){const e=function(e){return Array.from(document.getElementsByClassName(e))}(s),l=function(e){let{minHeadingLevel:t,maxHeadingLevel:n}=e;const s=[];for(let a=t;a<=n;a+=1)s.push(`h${a}.anchor`);return Array.from(document.querySelectorAll(s.join()))}({minHeadingLevel:i,maxHeadingLevel:o}),c=r(l,{anchorTopOffset:n.current}),d=e.find((e=>c&&c.id===function(e){return decodeURIComponent(e.href.substring(e.href.indexOf("#")+1))}(e)));e.forEach((e=>{!function(e,n){n?(t.current&&t.current!==e&&t.current.classList.remove(a),e.classList.add(a),t.current=e):e.classList.remove(a)}(e,e===d)}))}return document.addEventListener("scroll",l),document.addEventListener("resize",l),l(),()=>{document.removeEventListener("scroll",l),document.removeEventListener("resize",l)}}),[e,n])}var u=n(4783),m=n(4848);function h(e){let{toc:t,className:n,linkClassName:s,isChild:a}=e;return t.length?(0,m.jsx)("ul",{className:a?void 0:n,children:t.map((e=>(0,m.jsxs)("li",{children:[(0,m.jsx)(u.A,{to:`#${e.id}`,className:s??void 0,dangerouslySetInnerHTML:{__html:e.value}}),(0,m.jsx)(h,{isChild:!0,toc:e.children,className:n,linkClassName:s})]},e.id)))}):null}const v=s.memo(h);function b(e){let{toc:t,className:n="table-of-contents table-of-contents__left-border",linkClassName:l="table-of-contents__link",linkActiveClassName:r,minHeadingLevel:c,maxHeadingLevel:u,...h}=e;const b=(0,a.p)(),x=c??b.tableOfContents.minHeadingLevel,f=u??b.tableOfContents.maxHeadingLevel,p=function(e){let{toc:t,minHeadingLevel:n,maxHeadingLevel:a}=e;return(0,s.useMemo)((()=>o({toc:i(t),minHeadingLevel:n,maxHeadingLevel:a})),[t,n,a])}({toc:t,minHeadingLevel:x,maxHeadingLevel:f});return d((0,s.useMemo)((()=>{if(l&&r)return{linkClassName:l,linkActiveClassName:r,minHeadingLevel:x,maxHeadingLevel:f}}),[l,r,x,f])),(0,m.jsx)(v,{toc:p,className:n,linkClassName:l,...h})}},6907:(e,t,n)=>{n.d(t,{AE:()=>r,Rc:()=>o,TT:()=>d,Uh:()=>l,Yh:()=>c});n(6540);var s=n(3230),a=n(1141),i=n(4848);function o(){return(0,i.jsx)(s.A,{id:"theme.contentVisibility.unlistedBanner.title",description:"The unlisted content banner title",children:"Unlisted page"})}function l(){return(0,i.jsx)(s.A,{id:"theme.contentVisibility.unlistedBanner.message",description:"The unlisted content banner message",children:"This page is unlisted. Search engines will not index it, and only users having a direct link can access it."})}function r(){return(0,i.jsx)(a.A,{children:(0,i.jsx)("meta",{name:"robots",content:"noindex, nofollow"})})}function c(){return(0,i.jsx)(s.A,{id:"theme.contentVisibility.draftBanner.title",description:"The draft content banner title",children:"Draft page"})}function d(){return(0,i.jsx)(s.A,{id:"theme.contentVisibility.draftBanner.message",description:"The draft content banner message",children:"This page is a draft. It will only be visible in dev and be excluded from the production build."})}}}]); \ No newline at end of file diff --git a/assets/js/1a4e3797.fa60ffd8.js b/assets/js/1a4e3797.19bd1aaa.js similarity index 91% rename from assets/js/1a4e3797.fa60ffd8.js rename to assets/js/1a4e3797.19bd1aaa.js index 8653cf1b..1e910f26 100644 --- a/assets/js/1a4e3797.fa60ffd8.js +++ b/assets/js/1a4e3797.19bd1aaa.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[2138],{7824:(e,t,r)=>{r.d(t,{W:()=>u});var s=r(6540),a=r(7639);const n=["zero","one","two","few","many","other"];function l(e){return n.filter((t=>e.includes(t)))}const c={locale:"en",pluralForms:l(["one","other"]),select:e=>1===e?"one":"other"};function o(){const{i18n:{currentLocale:e}}=(0,a.A)();return(0,s.useMemo)((()=>{try{return function(e){const t=new Intl.PluralRules(e);return{locale:e,pluralForms:l(t.resolvedOptions().pluralCategories),select:e=>t.select(e)}}(e)}catch(t){return console.error(`Failed to use Intl.PluralRules for locale "${e}".\nDocusaurus will fallback to the default (English) implementation.\nError: ${t.message}\n`),c}}),[e])}function u(){const e=o();return{selectMessage:(t,r)=>function(e,t,r){const s=e.split("|");if(1===s.length)return s[0];s.length>r.pluralForms.length&&console.error(`For locale=${r.locale}, a maximum of ${r.pluralForms.length} plural forms are expected (${r.pluralForms.join(",")}), but the message contains ${s.length}: ${e}`);const a=r.select(t),n=r.pluralForms.indexOf(a);return s[Math.min(n,s.length-1)]}(r,t,e)}}},5849:(e,t,r)=>{r.r(t),r.d(t,{default:()=>k});var s=r(6540),a=r(7639),n=r(7635),l=r(1141),c=r(4783),o=r(3230),u=r(7824),i=r(5391),h=r(6347),d=r(1062),m=r(5196);const g=function(){const e=(0,d.A)(),t=(0,h.W6)(),r=(0,h.zy)(),{siteConfig:{baseUrl:s}}=(0,a.A)(),n=e?new URLSearchParams(r.search):null,l=n?.get("q")||"",c=n?.get("ctx")||"",o=n?.get("version")||"",u=e=>{const t=new URLSearchParams(r.search);return e?t.set("q",e):t.delete("q"),t};return{searchValue:l,searchContext:c&&Array.isArray(m.Hg)&&m.Hg.some((e=>"string"==typeof e?e===c:e.path===c))?c:"",searchVersion:o,updateSearchPath:e=>{const r=u(e);t.replace({search:r.toString()})},updateSearchContext:e=>{const s=new URLSearchParams(r.search);s.set("ctx",e),t.replace({search:s.toString()})},generateSearchPageLink:e=>{const t=u(e);return`${s}search?${t.toString()}`}}};var p=r(1538),f=r(9950),x=r(3032),y=r(5928),j=r(6323),S=r(5990),A=r(5268);const C="searchContextInput_mXoe",w="searchQueryInput_CFBF",v="searchResultItem_U687",b="searchResultItemPath_uIbk",P="searchResultItemSummary_oZHr",_="searchQueryColumn_q7nx",F="searchContextColumn_oWAF";var R=r(4982),T=r(4848);function $(){const{siteConfig:{baseUrl:e},i18n:{currentLocale:t}}=(0,a.A)(),{selectMessage:r}=(0,u.W)(),{searchValue:n,searchContext:c,searchVersion:h,updateSearchPath:d,updateSearchContext:f}=g(),[x,y]=(0,s.useState)(n),[j,A]=(0,s.useState)(),v=`${e}${h}`,b=(0,s.useMemo)((()=>x?(0,o.T)({id:"theme.SearchPage.existingResultsTitle",message:'Search results for "{query}"',description:"The search page title for non-empty query"},{query:x}):(0,o.T)({id:"theme.SearchPage.emptyResultsTitle",message:"Search the documentation",description:"The search page title for empty query"})),[x]);(0,s.useEffect)((()=>{d(x),x?(async()=>{const e=await(0,p.w)(v,c,x);A(e)})():A(void 0)}),[x,v,c]);const P=(0,s.useCallback)((e=>{y(e.target.value)}),[]);(0,s.useEffect)((()=>{n&&n!==x&&y(n)}),[n]);const[$,k]=(0,s.useState)(!1);return(0,s.useEffect)((()=>{!async function(){(!Array.isArray(m.Hg)||c||m.dz)&&await(0,p.k)(v,c),k(!0)}()}),[c,v]),(0,T.jsxs)(s.Fragment,{children:[(0,T.jsxs)(l.A,{children:[(0,T.jsx)("meta",{property:"robots",content:"noindex, follow"}),(0,T.jsx)("title",{children:b})]}),(0,T.jsxs)("div",{className:"container margin-vert--lg",children:[(0,T.jsx)("h1",{children:b}),(0,T.jsxs)("div",{className:"row",children:[(0,T.jsx)("div",{className:(0,i.A)("col",{[_]:Array.isArray(m.Hg),"col--9":Array.isArray(m.Hg),"col--12":!Array.isArray(m.Hg)}),children:(0,T.jsx)("input",{type:"search",name:"q",className:w,"aria-label":"Search",onChange:P,value:x,autoComplete:"off",autoFocus:!0})}),Array.isArray(m.Hg)?(0,T.jsx)("div",{className:(0,i.A)("col","col--3","padding-left--none",F),children:(0,T.jsxs)("select",{name:"search-context",className:C,id:"context-selector",value:c,onChange:e=>f(e.target.value),children:[m.dz&&(0,T.jsx)("option",{value:"",children:(0,o.T)({id:"theme.SearchPage.searchContext.everywhere",message:"Everywhere"})}),m.Hg.map((e=>{const{label:r,path:s}=(0,R.p)(e,t);return(0,T.jsx)("option",{value:s,children:r},s)}))]})}):null]}),!$&&x&&(0,T.jsx)("div",{children:(0,T.jsx)(S.A,{})}),j&&(j.length>0?(0,T.jsx)("p",{children:r(j.length,(0,o.T)({id:"theme.SearchPage.documentsFound.plurals",message:"1 document found|{count} documents found",description:'Pluralized label for "{count} documents found". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)'},{count:j.length}))}):(0,T.jsx)("p",{children:(0,o.T)({id:"theme.SearchPage.noResultsText",message:"No documents were found",description:"The paragraph for empty search result"})})),(0,T.jsx)("section",{children:j&&j.map((e=>(0,T.jsx)(H,{searchResult:e},e.document.i)))})]})]})}function H(e){let{searchResult:{document:t,type:r,page:s,tokens:a,metadata:n}}=e;const l=r===f.i.Title,o=r===f.i.Keywords,u=r===f.i.Description,i=u||o,h=l||i,d=r===f.i.Content,g=(l?t.b:s.b).slice(),p=d||i?t.s:t.t;h||g.push(s.t);let S="";if(m.CU&&a.length>0){const e=new URLSearchParams;for(const t of a)e.append("_highlight",t);S=`?${e.toString()}`}return(0,T.jsxs)("article",{className:v,children:[(0,T.jsx)("h2",{children:(0,T.jsx)(c.A,{to:t.u+S+(t.h||""),dangerouslySetInnerHTML:{__html:d||i?(0,x.Z)(p,a):(0,y.C)(p,(0,j.g)(n,"t"),a,100)}})}),g.length>0&&(0,T.jsx)("p",{className:b,children:(0,A.$)(g)}),(d||u)&&(0,T.jsx)("p",{className:P,dangerouslySetInnerHTML:{__html:(0,y.C)(t.t,(0,j.g)(n,"t"),a,100)}})]})}const k=function(){return(0,T.jsx)(n.A,{children:(0,T.jsx)($,{})})}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[2138],{5846:(e,t,r)=>{r.d(t,{W:()=>u});var s=r(6540),a=r(4586);const n=["zero","one","two","few","many","other"];function l(e){return n.filter((t=>e.includes(t)))}const c={locale:"en",pluralForms:l(["one","other"]),select:e=>1===e?"one":"other"};function o(){const{i18n:{currentLocale:e}}=(0,a.A)();return(0,s.useMemo)((()=>{try{return function(e){const t=new Intl.PluralRules(e);return{locale:e,pluralForms:l(t.resolvedOptions().pluralCategories),select:e=>t.select(e)}}(e)}catch(t){return console.error(`Failed to use Intl.PluralRules for locale "${e}".\nDocusaurus will fallback to the default (English) implementation.\nError: ${t.message}\n`),c}}),[e])}function u(){const e=o();return{selectMessage:(t,r)=>function(e,t,r){const s=e.split("|");if(1===s.length)return s[0];s.length>r.pluralForms.length&&console.error(`For locale=${r.locale}, a maximum of ${r.pluralForms.length} plural forms are expected (${r.pluralForms.join(",")}), but the message contains ${s.length}: ${e}`);const a=r.select(t),n=r.pluralForms.indexOf(a);return s[Math.min(n,s.length-1)]}(r,t,e)}}},1283:(e,t,r)=>{r.r(t),r.d(t,{default:()=>k});var s=r(6540),a=r(4586),n=r(7823),l=r(5260),c=r(8774),o=r(1312),u=r(5846),i=r(4164),h=r(6347),d=r(2303),m=r(4081);const g=function(){const e=(0,d.A)(),t=(0,h.W6)(),r=(0,h.zy)(),{siteConfig:{baseUrl:s}}=(0,a.A)(),n=e?new URLSearchParams(r.search):null,l=n?.get("q")||"",c=n?.get("ctx")||"",o=n?.get("version")||"",u=e=>{const t=new URLSearchParams(r.search);return e?t.set("q",e):t.delete("q"),t};return{searchValue:l,searchContext:c&&Array.isArray(m.Hg)&&m.Hg.some((e=>"string"==typeof e?e===c:e.path===c))?c:"",searchVersion:o,updateSearchPath:e=>{const r=u(e);t.replace({search:r.toString()})},updateSearchContext:e=>{const s=new URLSearchParams(r.search);s.set("ctx",e),t.replace({search:s.toString()})},generateSearchPageLink:e=>{const t=u(e);return`${s}search?${t.toString()}`}}};var p=r(9153),f=r(9913),x=r(6841),y=r(3810),j=r(7674),S=r(2849),A=r(4471);const C="searchContextInput_mXoe",w="searchQueryInput_CFBF",v="searchResultItem_U687",b="searchResultItemPath_uIbk",P="searchResultItemSummary_oZHr",_="searchQueryColumn_q7nx",F="searchContextColumn_oWAF";var R=r(3385),T=r(4848);function $(){const{siteConfig:{baseUrl:e},i18n:{currentLocale:t}}=(0,a.A)(),{selectMessage:r}=(0,u.W)(),{searchValue:n,searchContext:c,searchVersion:h,updateSearchPath:d,updateSearchContext:f}=g(),[x,y]=(0,s.useState)(n),[j,A]=(0,s.useState)(),v=`${e}${h}`,b=(0,s.useMemo)((()=>x?(0,o.T)({id:"theme.SearchPage.existingResultsTitle",message:'Search results for "{query}"',description:"The search page title for non-empty query"},{query:x}):(0,o.T)({id:"theme.SearchPage.emptyResultsTitle",message:"Search the documentation",description:"The search page title for empty query"})),[x]);(0,s.useEffect)((()=>{d(x),x?(async()=>{const e=await(0,p.w)(v,c,x);A(e)})():A(void 0)}),[x,v,c]);const P=(0,s.useCallback)((e=>{y(e.target.value)}),[]);(0,s.useEffect)((()=>{n&&n!==x&&y(n)}),[n]);const[$,k]=(0,s.useState)(!1);return(0,s.useEffect)((()=>{!async function(){(!Array.isArray(m.Hg)||c||m.dz)&&await(0,p.k)(v,c),k(!0)}()}),[c,v]),(0,T.jsxs)(s.Fragment,{children:[(0,T.jsxs)(l.A,{children:[(0,T.jsx)("meta",{property:"robots",content:"noindex, follow"}),(0,T.jsx)("title",{children:b})]}),(0,T.jsxs)("div",{className:"container margin-vert--lg",children:[(0,T.jsx)("h1",{children:b}),(0,T.jsxs)("div",{className:"row",children:[(0,T.jsx)("div",{className:(0,i.A)("col",{[_]:Array.isArray(m.Hg),"col--9":Array.isArray(m.Hg),"col--12":!Array.isArray(m.Hg)}),children:(0,T.jsx)("input",{type:"search",name:"q",className:w,"aria-label":"Search",onChange:P,value:x,autoComplete:"off",autoFocus:!0})}),Array.isArray(m.Hg)?(0,T.jsx)("div",{className:(0,i.A)("col","col--3","padding-left--none",F),children:(0,T.jsxs)("select",{name:"search-context",className:C,id:"context-selector",value:c,onChange:e=>f(e.target.value),children:[m.dz&&(0,T.jsx)("option",{value:"",children:(0,o.T)({id:"theme.SearchPage.searchContext.everywhere",message:"Everywhere"})}),m.Hg.map((e=>{const{label:r,path:s}=(0,R.p)(e,t);return(0,T.jsx)("option",{value:s,children:r},s)}))]})}):null]}),!$&&x&&(0,T.jsx)("div",{children:(0,T.jsx)(S.A,{})}),j&&(j.length>0?(0,T.jsx)("p",{children:r(j.length,(0,o.T)({id:"theme.SearchPage.documentsFound.plurals",message:"1 document found|{count} documents found",description:'Pluralized label for "{count} documents found". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)'},{count:j.length}))}):(0,T.jsx)("p",{children:(0,o.T)({id:"theme.SearchPage.noResultsText",message:"No documents were found",description:"The paragraph for empty search result"})})),(0,T.jsx)("section",{children:j&&j.map((e=>(0,T.jsx)(H,{searchResult:e},e.document.i)))})]})]})}function H(e){let{searchResult:{document:t,type:r,page:s,tokens:a,metadata:n}}=e;const l=r===f.i.Title,o=r===f.i.Keywords,u=r===f.i.Description,i=u||o,h=l||i,d=r===f.i.Content,g=(l?t.b:s.b).slice(),p=d||i?t.s:t.t;h||g.push(s.t);let S="";if(m.CU&&a.length>0){const e=new URLSearchParams;for(const t of a)e.append("_highlight",t);S=`?${e.toString()}`}return(0,T.jsxs)("article",{className:v,children:[(0,T.jsx)("h2",{children:(0,T.jsx)(c.A,{to:t.u+S+(t.h||""),dangerouslySetInnerHTML:{__html:d||i?(0,x.Z)(p,a):(0,y.C)(p,(0,j.g)(n,"t"),a,100)}})}),g.length>0&&(0,T.jsx)("p",{className:b,children:(0,A.$)(g)}),(d||u)&&(0,T.jsx)("p",{className:P,dangerouslySetInnerHTML:{__html:(0,y.C)(t.t,(0,j.g)(n,"t"),a,100)}})]})}const k=function(){return(0,T.jsx)(n.A,{children:(0,T.jsx)($,{})})}}}]); \ No newline at end of file diff --git a/assets/js/1a5eac39.0b4fb100.js b/assets/js/1a5eac39.31cacb96.js similarity index 99% rename from assets/js/1a5eac39.0b4fb100.js rename to assets/js/1a5eac39.31cacb96.js index 948f8694..f7a2c7be 100644 --- a/assets/js/1a5eac39.0b4fb100.js +++ b/assets/js/1a5eac39.31cacb96.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[4215],{9807:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>i,metadata:()=>l,toc:()=>c});const l=JSON.parse('{"id":"guides/handbook/namespacing","title":"Namespacing","description":"In the Classes chapter, we briefly explained the concept of using namespacing to avoid conflicts between stylesheets.","source":"@site/docs/guides/handbook/namespace.md","sourceDirName":"guides/handbook","slug":"/guides/handbook/namespacing","permalink":"/docs/guides/handbook/namespacing","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/handbook/namespace.md","tags":[],"version":"current","frontMatter":{"id":"namespacing","title":"Namespacing"},"sidebar":"Guides","previous":{"title":"Classes","permalink":"/docs/guides/handbook/class"},"next":{"title":"Custom State","permalink":"/docs/guides/handbook/custom-state"}}');var a=n(4848),t=n(8453);const i={id:"namespacing",title:"Namespacing"},o=void 0,r={},c=[{value:"Supported symbols",id:"supported-symbols",level:2},{value:"Global",id:"global",level:2},{value:"Disable in selector",id:"disable-in-selector",level:3},{value:"Defining global symbols",id:"defining-global-symbols",level:3},{value:"Stylesheet level namespacing",id:"stylesheet-level-namespacing",level:2},{value:"Project level namespacing",id:"project-level-namespacing",level:2}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(s.p,{children:["In the ",(0,a.jsx)(s.a,{href:"/docs/guides/handbook/class#resolve-global-conflicts",children:"Classes chapter"}),", we briefly explained the concept of using namespacing to avoid conflicts between stylesheets."]}),"\n",(0,a.jsx)(s.p,{children:"In this chapter, we'll dive deeper to see how other symbols in CSS can be rendered safe to use, and how namespacing can be controlled."}),"\n",(0,a.jsx)(s.h2,{id:"supported-symbols",children:"Supported symbols"}),"\n",(0,a.jsx)(s.p,{children:"We've only mentioned classes up to this point, but in CSS, there are many other symbols that share the same naming context, therefore requiring namespacing to avoid potential conflicts."}),"\n",(0,a.jsx)(s.p,{children:"Symbols that Stylable namespaces:"}),"\n",(0,a.jsxs)(s.table,{children:[(0,a.jsx)(s.thead,{children:(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.th,{children:"Symbol"}),(0,a.jsx)(s.th,{children:"Source"}),(0,a.jsx)(s.th,{children:"Target"})]})}),(0,a.jsxs)(s.tbody,{children:[(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{children:"Class"}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:".okButton"})}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:".NAMESPACE__okButton"})})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{children:"Custom property"}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"--bgColor"})}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"--NAMESPACE-bgColor"})})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{children:"Keyframes"}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"@keyframes slide"})}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"@keyframes NAMESPACE__slide"})})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{children:"Layer"}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"@layer theme"})}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"@layer NAMESPACE__theme"})})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{children:"Container"}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"container: panel"})}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"container: NAMESPACE__panel"})})]})]})]}),"\n",(0,a.jsx)(s.admonition,{type:"note",children:(0,a.jsxs)(s.p,{children:["Stylable does not namespace ",(0,a.jsx)(s.code,{children:"id"}),", ",(0,a.jsx)(s.code,{children:"custom-element"}),", ",(0,a.jsx)(s.code,{children:"attribute"}),", or other symbols at the moment, but may add additional symbol namespacing support in the future."]})}),"\n",(0,a.jsx)(s.h2,{id:"global",children:"Global"}),"\n",(0,a.jsx)(s.p,{children:"In some cases, we might want to avoid namespacing for a specific symbol."}),"\n",(0,a.jsx)(s.p,{children:"For example:"}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsx)(s.li,{children:"To style a third-party component that is using pre-determined global class names."}),"\n",(0,a.jsx)(s.li,{children:"To expose a persistent, globally-namespaced API for non-Stylable consumers that are using our project."}),"\n"]}),"\n",(0,a.jsx)(s.h3,{id:"disable-in-selector",children:"Disable in selector"}),"\n",(0,a.jsxs)(s.p,{children:["To avoid namespacing on classes in a selector, wrap those classes with a ",(0,a.jsx)(s.code,{children:":global(...)"})," pseudo-class."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css"',children:".player:global(.highlight) {\n background: yellow;\n}\n\n/* OUTPUT */\n.game__player.highlight {\n background: yellow;\n}\n"})}),"\n",(0,a.jsx)(s.admonition,{type:"caution",children:(0,a.jsxs)(s.p,{children:["Classes used within the ",(0,a.jsx)(s.code,{children:":global(...)"})," pseudo-class are not treated as symbols in the stylesheet, and are not exported. This means that they are not available for use in other stylesheets or in the runtime JavaScript module."]})}),"\n",(0,a.jsx)(s.h3,{id:"defining-global-symbols",children:"Defining global symbols"}),"\n",(0,a.jsxs)(s.p,{children:["We can avoid namespacing for all symbols (except classes) by using the ",(0,a.jsx)(s.code,{children:"st-global()"})," function:"]}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.code,{children:"@property st-global(--bgColor)"})," - ",(0,a.jsx)(s.a,{href:"../../references/css-vars#disable-namespace",children:"read more"})]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.code,{children:"@keyframes st-global(slide)"})," - ",(0,a.jsx)(s.a,{href:"../../references/keyframes#disable-namespace",children:"read more"})]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.code,{children:"@layer st-global(theme)"})," - ",(0,a.jsx)(s.a,{href:"../../references/layer#disable-namespace",children:"read more"})]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.code,{children:"container: st-global(panel)"})," - ",(0,a.jsx)(s.a,{href:"../../references/contains#disable-namespace",children:"read more"})]}),"\n"]}),"\n",(0,a.jsxs)(s.p,{children:["Unlike the other symbols that are mapped from a local name to their global one, when we map a class using ",(0,a.jsx)(s.code,{children:"-st-global"}),", we can define a global selector that will replace it."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:".player {\n -st-global: '.myGame__player';\n}\n"})}),"\n",(0,a.jsxs)(s.p,{children:["Notice that in this case, we are mapping our ",(0,a.jsx)(s.code,{children:"player"})," class to a ",(0,a.jsx)(s.code,{children:".myGame__player"})," class selector. This is because classes can be mapped to any selector, including multiple classes, elements, attributes, and other CSS selector parts."]}),"\n",(0,a.jsx)(s.h2,{id:"stylesheet-level-namespacing",children:"Stylesheet level namespacing"}),"\n",(0,a.jsx)(s.p,{children:"By default, namespacing is derived in Stylable using the stylesheet filename, but in some edge cases we might want to override this behavior."}),"\n",(0,a.jsxs)(s.p,{children:["To do so, we can use the ",(0,a.jsx)(s.code,{children:"@st-namespace 'OverrideNamespace';"})," definition. ",(0,a.jsx)(s.a,{href:"/docs/references/namespace",children:"Click here"})," to read more about the namespace API."]}),"\n",(0,a.jsx)(s.h2,{id:"project-level-namespacing",children:"Project level namespacing"}),"\n",(0,a.jsxs)(s.p,{children:["On a more general level, we can have granular control of Stylable's namespacing process by passing a ",(0,a.jsx)(s.a,{href:"../../getting-started/stylable-config",children:"custom namespace resolver"})," to Stylable at initialization using configuration."]})]})}function h(e={}){const{wrapper:s}={...(0,t.R)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>i,x:()=>o});var l=n(6540);const a={},t=l.createContext(a);function i(e){const s=l.useContext(t);return l.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function o(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),l.createElement(t.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[4215],{7189:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>i,metadata:()=>l,toc:()=>c});const l=JSON.parse('{"id":"guides/handbook/namespacing","title":"Namespacing","description":"In the Classes chapter, we briefly explained the concept of using namespacing to avoid conflicts between stylesheets.","source":"@site/docs/guides/handbook/namespace.md","sourceDirName":"guides/handbook","slug":"/guides/handbook/namespacing","permalink":"/docs/guides/handbook/namespacing","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/handbook/namespace.md","tags":[],"version":"current","frontMatter":{"id":"namespacing","title":"Namespacing"},"sidebar":"Guides","previous":{"title":"Classes","permalink":"/docs/guides/handbook/class"},"next":{"title":"Custom State","permalink":"/docs/guides/handbook/custom-state"}}');var a=n(4848),t=n(8453);const i={id:"namespacing",title:"Namespacing"},o=void 0,r={},c=[{value:"Supported symbols",id:"supported-symbols",level:2},{value:"Global",id:"global",level:2},{value:"Disable in selector",id:"disable-in-selector",level:3},{value:"Defining global symbols",id:"defining-global-symbols",level:3},{value:"Stylesheet level namespacing",id:"stylesheet-level-namespacing",level:2},{value:"Project level namespacing",id:"project-level-namespacing",level:2}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(s.p,{children:["In the ",(0,a.jsx)(s.a,{href:"/docs/guides/handbook/class#resolve-global-conflicts",children:"Classes chapter"}),", we briefly explained the concept of using namespacing to avoid conflicts between stylesheets."]}),"\n",(0,a.jsx)(s.p,{children:"In this chapter, we'll dive deeper to see how other symbols in CSS can be rendered safe to use, and how namespacing can be controlled."}),"\n",(0,a.jsx)(s.h2,{id:"supported-symbols",children:"Supported symbols"}),"\n",(0,a.jsx)(s.p,{children:"We've only mentioned classes up to this point, but in CSS, there are many other symbols that share the same naming context, therefore requiring namespacing to avoid potential conflicts."}),"\n",(0,a.jsx)(s.p,{children:"Symbols that Stylable namespaces:"}),"\n",(0,a.jsxs)(s.table,{children:[(0,a.jsx)(s.thead,{children:(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.th,{children:"Symbol"}),(0,a.jsx)(s.th,{children:"Source"}),(0,a.jsx)(s.th,{children:"Target"})]})}),(0,a.jsxs)(s.tbody,{children:[(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{children:"Class"}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:".okButton"})}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:".NAMESPACE__okButton"})})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{children:"Custom property"}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"--bgColor"})}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"--NAMESPACE-bgColor"})})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{children:"Keyframes"}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"@keyframes slide"})}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"@keyframes NAMESPACE__slide"})})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{children:"Layer"}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"@layer theme"})}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"@layer NAMESPACE__theme"})})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{children:"Container"}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"container: panel"})}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"container: NAMESPACE__panel"})})]})]})]}),"\n",(0,a.jsx)(s.admonition,{type:"note",children:(0,a.jsxs)(s.p,{children:["Stylable does not namespace ",(0,a.jsx)(s.code,{children:"id"}),", ",(0,a.jsx)(s.code,{children:"custom-element"}),", ",(0,a.jsx)(s.code,{children:"attribute"}),", or other symbols at the moment, but may add additional symbol namespacing support in the future."]})}),"\n",(0,a.jsx)(s.h2,{id:"global",children:"Global"}),"\n",(0,a.jsx)(s.p,{children:"In some cases, we might want to avoid namespacing for a specific symbol."}),"\n",(0,a.jsx)(s.p,{children:"For example:"}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsx)(s.li,{children:"To style a third-party component that is using pre-determined global class names."}),"\n",(0,a.jsx)(s.li,{children:"To expose a persistent, globally-namespaced API for non-Stylable consumers that are using our project."}),"\n"]}),"\n",(0,a.jsx)(s.h3,{id:"disable-in-selector",children:"Disable in selector"}),"\n",(0,a.jsxs)(s.p,{children:["To avoid namespacing on classes in a selector, wrap those classes with a ",(0,a.jsx)(s.code,{children:":global(...)"})," pseudo-class."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css"',children:".player:global(.highlight) {\n background: yellow;\n}\n\n/* OUTPUT */\n.game__player.highlight {\n background: yellow;\n}\n"})}),"\n",(0,a.jsx)(s.admonition,{type:"caution",children:(0,a.jsxs)(s.p,{children:["Classes used within the ",(0,a.jsx)(s.code,{children:":global(...)"})," pseudo-class are not treated as symbols in the stylesheet, and are not exported. This means that they are not available for use in other stylesheets or in the runtime JavaScript module."]})}),"\n",(0,a.jsx)(s.h3,{id:"defining-global-symbols",children:"Defining global symbols"}),"\n",(0,a.jsxs)(s.p,{children:["We can avoid namespacing for all symbols (except classes) by using the ",(0,a.jsx)(s.code,{children:"st-global()"})," function:"]}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.code,{children:"@property st-global(--bgColor)"})," - ",(0,a.jsx)(s.a,{href:"../../references/css-vars#disable-namespace",children:"read more"})]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.code,{children:"@keyframes st-global(slide)"})," - ",(0,a.jsx)(s.a,{href:"../../references/keyframes#disable-namespace",children:"read more"})]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.code,{children:"@layer st-global(theme)"})," - ",(0,a.jsx)(s.a,{href:"../../references/layer#disable-namespace",children:"read more"})]}),"\n",(0,a.jsxs)(s.li,{children:[(0,a.jsx)(s.code,{children:"container: st-global(panel)"})," - ",(0,a.jsx)(s.a,{href:"../../references/contains#disable-namespace",children:"read more"})]}),"\n"]}),"\n",(0,a.jsxs)(s.p,{children:["Unlike the other symbols that are mapped from a local name to their global one, when we map a class using ",(0,a.jsx)(s.code,{children:"-st-global"}),", we can define a global selector that will replace it."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:".player {\n -st-global: '.myGame__player';\n}\n"})}),"\n",(0,a.jsxs)(s.p,{children:["Notice that in this case, we are mapping our ",(0,a.jsx)(s.code,{children:"player"})," class to a ",(0,a.jsx)(s.code,{children:".myGame__player"})," class selector. This is because classes can be mapped to any selector, including multiple classes, elements, attributes, and other CSS selector parts."]}),"\n",(0,a.jsx)(s.h2,{id:"stylesheet-level-namespacing",children:"Stylesheet level namespacing"}),"\n",(0,a.jsx)(s.p,{children:"By default, namespacing is derived in Stylable using the stylesheet filename, but in some edge cases we might want to override this behavior."}),"\n",(0,a.jsxs)(s.p,{children:["To do so, we can use the ",(0,a.jsx)(s.code,{children:"@st-namespace 'OverrideNamespace';"})," definition. ",(0,a.jsx)(s.a,{href:"/docs/references/namespace",children:"Click here"})," to read more about the namespace API."]}),"\n",(0,a.jsx)(s.h2,{id:"project-level-namespacing",children:"Project level namespacing"}),"\n",(0,a.jsxs)(s.p,{children:["On a more general level, we can have granular control of Stylable's namespacing process by passing a ",(0,a.jsx)(s.a,{href:"../../getting-started/stylable-config",children:"custom namespace resolver"})," to Stylable at initialization using configuration."]})]})}function h(e={}){const{wrapper:s}={...(0,t.R)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>i,x:()=>o});var l=n(6540);const a={},t=l.createContext(a);function i(e){const s=l.useContext(t);return l.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function o(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),l.createElement(t.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/1df93b7f.4fe2d858.js b/assets/js/1df93b7f.ad4a7afe.js similarity index 98% rename from assets/js/1df93b7f.4fe2d858.js rename to assets/js/1df93b7f.ad4a7afe.js index 0abd2bc6..3960b730 100644 --- a/assets/js/1df93b7f.4fe2d858.js +++ b/assets/js/1df93b7f.ad4a7afe.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[4583],{6114:(e,t,s)=>{},4183:(e,t,s)=>{s(6114)},5797:(e,t,s)=>{s.d(t,{X:()=>m});var a=s(6540),l=s(8180),i=s(4783),n=s(3013);const r="feature",o=(...e)=>(0,n.rx)(r,...e),c=o,h={root:"feature__root",title:"feature__title",image:"feature__image",imageWrapper:"feature__imageWrapper"};var d=s(4848);function m(e){let{className:t,image:s,title:n,children:r,link:o}=e;const m="string"==typeof s?(0,l.Ay)(s):"",q=a.useMemo((()=>s?"string"==typeof s?(0,d.jsx)("div",{className:h.imageWrapper,children:(0,d.jsx)("img",{className:h.image,src:m,alt:n})}):(0,d.jsx)("div",{className:h.imageWrapper,children:s(h.image)}):null),[s,m]);return(0,d.jsxs)("div",{className:c(h.root,"col col--4",t),children:[o?(0,d.jsxs)(i.A,{href:o,children:[q,(0,d.jsx)("h3",{className:h.title,children:n})]}):(0,d.jsxs)(d.Fragment,{children:[q,(0,d.jsx)("h3",{className:h.title,children:n})]}),(0,d.jsx)("p",{children:r})]})}},3047:(e,t,s)=>{s.r(t),s.d(t,{default:()=>J});var a,l,i,n,r,o,c,h,d,m=s(6540),q=s(7635),p=s(7639),u=s(4783),x=s(8180);function v(){return v=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var a in s)({}).hasOwnProperty.call(s,a)&&(e[a]=s[a])}return e},v.apply(null,arguments)}const g=e=>{let{title:t,titleId:s,...q}=e;return m.createElement("svg",v({xmlns:"http://www.w3.org/2000/svg",width:449,height:96,viewBox:"0 0 449 96","aria-labelledby":s},q),void 0===t?m.createElement("title",{id:s},"96-logo-horizontal"):t?m.createElement("title",{id:s},t):null,a||(a=m.createElement("defs",null,m.createElement("linearGradient",{id:"a",x1:"66.548%",x2:"80.272%",y1:"-4.692%",y2:"111.186%"},m.createElement("stop",{offset:"0%",stopColor:"#7AD852"}),m.createElement("stop",{offset:"53.584%",stopColor:"#3AB38B"}),m.createElement("stop",{offset:"100%",stopColor:"#00BFC9"})),m.createElement("linearGradient",{id:"b",x1:"78.094%",x2:"20.394%",y1:".738%",y2:"118.622%"},m.createElement("stop",{offset:"0%",stopColor:"#FF2953"}),m.createElement("stop",{offset:"100%",stopColor:"#EA3333"})))),m.createElement("g",{fill:"none",fillRule:"evenodd"},l||(l=m.createElement("path",{fill:"url(#a)",d:"M25.946 1.832C18.067 5.184.061 22.442 0 36.04c.106 14.058 18.067 30.856 25.946 34.209 1.806.768 4.61 1.83 7.57 1.83 2.7 0 4.986-1.331 7.312-4.13 3.91-4.703 3.44-11.466-1.771-15.304-6.236-4.59-11.339-8.71-11.445-16.605.106-7.894 5.21-13.404 11.445-17.995 5.21-3.838 6.226-9.66 2.316-14.363C39.047.884 36.216 0 33.516 0c-2.96 0-5.764 1.063-7.57 1.832"})),i||(i=m.createElement("path",{fill:"#005892",d:"M40.697 68.129c3.458-3.933 3.887-11.736-1.54-15.484-7.608-5.253-11.492-10.262-11.447-16.68.052-7.278 4.684-11.835 5.838-13.255-17.276 19.395-19.668 41.31-2.943 49.03 3.826 1.33 7.104-.212 10.092-3.611"})),n||(n=m.createElement("path",{fill:"#00418E",d:"M32.619 61.166c2.22-2.728 2.008-7.9-.99-10.74-4.765-4.514-5.616-9.426-5.587-13.877.033-5.048 3.007-8.21 3.748-9.194-11.09 13.452-14.386 30.96-3.65 36.315 2.457.923 4.56-.147 6.479-2.504"})),r||(r=m.createElement("path",{fill:"#002355",d:"M27.915 55.898c1.416-1.741 1.281-5.042-.631-6.853-3.042-2.881-3.585-6.016-3.566-8.856.021-3.222 1.042-6.002-.636-2.281-1.679 3.721-6.153 16.17.698 19.588 1.568.589 2.91-.094 4.135-1.598"})),o||(o=m.createElement("path",{fill:"url(#b)",d:"M10.22 72.218c-2.686 0-5.504-.884-7.819-3.68-3.891-4.701-2.874-10.519 2.311-14.354 6.206-4.588 11.279-10.096 11.385-17.986-.106-7.89-5.185-13.13-11.385-17.742C.135 15.052-1.49 8.56 2.401 3.858c2.315-2.796 5.132-3.68 7.82-3.68 2.946 0 5.736 1.063 7.534 1.83 7.84 3.35 25.682 20.098 25.82 34.19-.044 13.283-17.98 30.839-25.82 34.19-1.798.767-4.588 1.83-7.535 1.83",transform:"translate(41.212 23.742)"})),m.createElement("path",{fill:"#470000",d:"M22.557 45.69c3.476-3.932 2.887-10.991-2.569-14.74-7.647-5.253-11.292-11.276-11.247-17.695C8.793 5.977 13.45 1.42 14.61 0-3.436 13.255-5.16 41.31 11.65 49.03c3.847 1.33 7.904.06 10.907-3.34",opacity:.6,style:{mixBlendMode:"multiply"},transform:"rotate(-180 32.97 36.645)"}),c||(c=m.createElement("path",{fill:"#670010",d:"M53.003 34.318c-2.22 2.728-2.008 7.9.989 10.74 4.766 4.514 5.617 9.426 5.588 13.877-.034 5.048-1.044 7.352-1.785 8.337 9.027-10.609 11.977-30.335 1.687-35.458-2.457-.923-4.56.147-6.479 2.504"})),m.createElement("path",{fill:"#730000",d:"M23.889 33.973c1.417-1.74 1.282-5.041-.631-6.853-3.041-2.88-4.06-6.538-4.174-8.565-.14-2.501-.124-2.856.315-4.62-1.338 2.41-7.198 19.036.356 21.636 1.567.59 2.91-.094 4.134-1.598",style:{mixBlendMode:"multiply"},transform:"rotate(-180 41.01 36.73)"}),h||(h=m.createElement("path",{fill:"currentColor",d:"M123.196 27.784q-1.68-.495-3.088-.496-1.951 0-3.12.752-1.168.752-1.168 2.064 0 1.185.704 1.936.704.752 1.728 1.184t2.848 1.008q2.272.704 3.68 1.344a6.4 6.4 0 0 1 2.4 1.904q.992 1.264.992 3.344 0 1.92-1.04 3.36t-2.912 2.224-4.304.784q-2.465 0-4.8-.96t-4.032-2.56l1.376-2.656a11.6 11.6 0 0 0 3.6 2.416q2 .848 3.888.848 2.24 0 3.536-.88t1.296-2.384q0-1.184-.704-1.952t-1.776-1.216-2.896-.992q-2.24-.672-3.648-1.312a6.3 6.3 0 0 1-2.384-1.888q-.976-1.247-.976-3.296 0-1.792.992-3.168t2.784-2.112q1.792-.735 4.16-.736 2.016 0 3.952.592 1.935.593 3.44 1.584l-1.28 2.752a12.9 12.9 0 0 0-3.248-1.488m14.992-3.184h17.504v2.816h-7.232V47h-3.072V27.416h-7.2zm45.888 0-8.384 14.72V47h-3.072v-7.552L164.108 24.6h3.136l6.912 11.424L180.94 24.6zm11.296 0h3.072v19.616h9.792V47h-12.864zM237.004 47l-2.368-5.44h-11.808L220.492 47h-3.232l9.952-22.4h3.2l9.92 22.4zm-12.96-8.224h9.408l-4.736-10.88zm42.512-12.688q1.968 1.488 1.968 4.112 0 1.92-1.088 3.248-1.087 1.327-2.976 1.776 2.336.353 3.664 1.872t1.328 3.792q0 2.88-2.16 4.496T261.324 47h-9.728V24.6h9.568q3.424 0 5.392 1.488m-2.336 7.136q1.136-.88 1.136-2.512 0-1.6-1.136-2.464t-3.216-.832h-6.336v6.688h6.336q2.08 0 3.216-.88m.688 10.016q1.408-.976 1.408-2.736 0-1.695-1.408-2.656-1.408-.96-3.904-.96h-6.336v7.296h6.336q2.496.032 3.904-.944M282.38 24.6h3.072v19.616h9.792V47H282.38zm24.768 0H322.7v2.784h-12.48v6.912h11.168v2.784H310.22v7.136h12.864V47h-15.936z"})),d||(d=m.createElement("path",{fill:"#7A92A5",d:"M113.989 76.277q-.225.513-.426.697a.68.68 0 0 1-.477.185.7.7 0 0 1-.502-.21.68.68 0 0 1-.185-.698q.03-.108.082-.23l6.399-13.792q.256-.532.451-.723a.65.65 0 0 1 .472-.19.73.73 0 0 1 .523.205q.215.205.215.493a.798.798 0 0 1-.103.38zm15.504-9.075 2.707-1.159.143-.04a.4.4 0 0 1 .113-.021q.082 0 .138.077.056.076.129.282l.256.78q.03.122.046.2.016.075.016.107 0 .081-.083.143a.6.6 0 0 1-.235.093l-2.871.646 1.927 2.235a.4.4 0 0 1 .108.138.35.35 0 0 1 .036.149q0 .051-.067.128a1.5 1.5 0 0 1-.18.17l-.676.481a1.4 1.4 0 0 1-.195.129.3.3 0 0 1-.123.035q-.06 0-.133-.061a.7.7 0 0 1-.133-.164l-1.518-2.543-1.507 2.543a.6.6 0 0 1-.15.169.25.25 0 0 1-.148.056.3.3 0 0 1-.123-.04 1 1 0 0 1-.184-.124l-.657-.482a1.3 1.3 0 0 1-.205-.169q-.072-.076-.071-.148 0-.052.04-.129a.5.5 0 0 1 .113-.138l1.928-2.235-2.85-.646a.6.6 0 0 1-.252-.098q-.087-.066-.087-.159 0-.02.036-.128.037-.108.046-.159l.256-.78a.9.9 0 0 1 .124-.281q.06-.077.143-.077t.144.01a.5.5 0 0 1 .112.03l2.707 1.18-.276-2.943v-.123q0-.174.092-.236.092-.06.369-.061h.8q.287 0 .374.061.087.062.087.236v.123zm23.666-3.63q0-1.107.2-1.394.2-.288.856-.287.636 0 .84.24.206.241.206 1.144 0 .882-.19 1.092t-.856.21q-.657 0-.856-.195-.2-.195-.2-.81m1.897 10.982h3.291q.4 0 .59.17.19.168.19.538 0 .42-.18.58-.18.158-.661.158h-7.957q-.41 0-.616-.185-.204-.184-.205-.553 0-.36.216-.533.215-.175.646-.175h3.127v-6.573h-2q-.42 0-.64-.19t-.22-.548q0-.36.204-.538.205-.18.616-.18h3.004q.277 0 .436.113a.36.36 0 0 1 .159.308zm7.177.708v-1.825q0-.452.17-.646.168-.195.548-.195.42 0 .667.574.164.349.297.523.43.554 1.272.887.84.333 1.855.333 1.087 0 1.744-.44.656-.442.656-1.16 0-.727-.528-1.035t-1.81-.308h-.564q-2.091 0-3.189-.728t-1.097-2.112q0-1.353 1.071-2.102 1.072-.75 3.01-.749.79 0 1.61.22.82.221.861.221.113 0 .43-.2.319-.2.626-.2.349 0 .518.257.17.255.17.769v1.2q0 .543-.165.784-.164.24-.523.24-.308 0-.758-.522a7 7 0 0 0-.523-.544 3.4 3.4 0 0 0-1.16-.723q-.615-.22-1.445-.22-.964 0-1.553.426-.59.425-.59 1.081 0 .647.605.923.605.277 2.604.318 2.133.051 3.118.743.984.693.984 2.138 0 1.385-1.087 2.215t-2.932.83a9 9 0 0 1-1.303-.107 23 23 0 0 1-1.804-.364 5 5 0 0 1-.616.354q-.255.118-.43.118-.36 0-.549-.251-.19-.252-.19-.723m32.915-11.085q.103-.276.288-.39.184-.112.533-.112.379 0 .533.184.153.184.154.76a79 79 0 0 0 .04 2.624q0 .481-.163.651-.164.17-.585.17-.676 0-.882-.964l-.112-.441q-.195-.77-.933-1.256-.739-.487-1.733-.487-1.815 0-2.913 1.327-1.097 1.328-1.097 3.564t1.113 3.563 2.938 1.328q.595 0 1.21-.17a5.3 5.3 0 0 0 1.21-.507q.276-.144.758-.487.482-.344.687-.344.318 0 .539.21.22.21.22.518t-.24.59-.898.692a6.8 6.8 0 0 1-1.733.83 6.2 6.2 0 0 1-1.835.267q-2.533 0-4.184-1.789-1.65-1.79-1.65-4.578 0-2.76 1.67-4.584 1.672-1.825 4.205-1.825.675 0 1.379.164.702.164 1.481.492m6.368 11.464q-.051.462-.236.641-.185.18-.584.18-.43 0-.641-.252-.21-.25-.241-.815l-.133-2.379v-.184q0-.493.19-.698.189-.204.63-.205.615 0 .882.882.123.44.236.667.359.717 1.133 1.107t1.85.39q1.323 0 2.149-.626.825-.625.825-1.6 0-.81-.507-1.302-.508-.492-1.482-.635l-1.518-.206q-2.123-.297-3.096-1.117-.974-.82-.974-2.307 0-1.57 1.297-2.636 1.296-1.065 3.235-1.066.563 0 1.19.149.624.148 1.414.466.021-.297.164-.41t.493-.113q.45 0 .625.134.174.132.215.635l.144 2.143v.103q0 .359-.205.559t-.574.2q-.544 0-.841-.76a2.8 2.8 0 0 0-.287-.645q-.339-.513-.974-.79a3.6 3.6 0 0 0-1.446-.276q-1.24 0-2.015.615-.774.615-.774 1.61 0 .78.579 1.23.58.45 1.769.615l1.64.205q1.784.237 2.687 1.092t.902 2.313q0 1.723-1.281 2.763-1.283 1.04-3.425 1.04-.738 0-1.467-.173a9 9 0 0 1-1.548-.544m12.602 0q-.051.462-.236.641-.185.18-.584.18-.43 0-.641-.252-.21-.25-.241-.815l-.133-2.379v-.184q0-.493.19-.698.189-.204.63-.205.615 0 .882.882.123.44.236.667.359.717 1.133 1.107t1.85.39q1.323 0 2.149-.626.825-.625.825-1.6 0-.81-.507-1.302-.509-.492-1.482-.635l-1.518-.206q-2.123-.297-3.096-1.117-.975-.82-.974-2.307 0-1.57 1.297-2.636 1.297-1.065 3.235-1.066.563 0 1.19.149.624.148 1.414.466.021-.297.164-.41t.493-.113q.45 0 .625.134.174.132.215.635l.144 2.143v.103q0 .359-.205.559t-.574.2q-.544 0-.841-.76a2.8 2.8 0 0 0-.287-.645q-.339-.513-.974-.79a3.6 3.6 0 0 0-1.446-.276q-1.24 0-2.015.615-.774.615-.774 1.61 0 .78.58 1.23.578.45 1.768.615l1.64.205q1.785.237 2.687 1.092.903.856.902 2.313 0 1.723-1.281 2.763-1.282 1.04-3.425 1.04-.738 0-1.466-.173a9 9 0 0 1-1.549-.544m31.357-1.107q.42 0 .64.184t.22.544q0 .369-.21.553t-.61.185h-6.705q-.42 0-.641-.185-.22-.184-.22-.553 0-.359.21-.544.21-.184.61-.184h1.743v-6.265h-1.682q-.42 0-.651-.195-.23-.195-.23-.554 0-.369.215-.554.215-.184.625-.184h1.62v-.698q0-1.855 1.056-2.691t3.415-.836q1.148 0 1.697.256.549.257.548.8a.66.66 0 0 1-.235.523.9.9 0 0 1-.605.205q-.185 0-.887-.123a7 7 0 0 0-1.205-.123q-1.159 0-1.661.487-.503.487-.503 1.615v.585h3.63q.42 0 .641.184.22.185.22.554 0 .348-.225.549-.226.2-.615.2h-3.548v6.265zm9.443.287q1.58 0 2.59-1t1.01-2.548-1.016-2.558q-1.014-1.01-2.584-1.01-1.568 0-2.578 1.01t-1.01 2.558q0 1.558 1.004 2.553t2.584.995m5.384-3.548q0 2.195-1.497 3.589t-3.887 1.394q-2.378 0-3.876-1.394-1.497-1.395-1.497-3.59 0-2.193 1.497-3.583t3.876-1.39q2.379 0 3.882 1.395 1.502 1.395 1.502 3.579m6.214 3.281h3.404q.4 0 .59.17.19.168.19.538 0 .42-.18.58-.18.158-.662.158h-6.706q-.4 0-.605-.185-.204-.184-.205-.553 0-.36.21-.533.21-.175.652-.175h1.784v-6.573h-.697q-.995 0-1.241-.158-.246-.16-.246-.58 0-.36.2-.538.2-.18.61-.18h2.338q.276 0 .42.108a.37.37 0 0 1 .144.313v1.743q.974-1.22 2.03-1.815a4.56 4.56 0 0 1 2.276-.595q.913 0 1.477.37.564.369.564.953a.94.94 0 0 1-.282.672q-.282.292-.62.292-.237 0-.795-.313-.56-.312-1-.313-.8 0-1.687.57-.887.569-1.963 1.8zm29.295-7.413V67.1q0-.339.195-.498t.605-.159q.42 0 .58.246.158.247.158 1.016v1.907q0 .379-.195.569-.194.19-.584.19a.74.74 0 0 1-.477-.16q-.2-.158-.487-.66-.492-.831-1.195-1.257-.702-.425-1.615-.425-1.599 0-2.599.943t-1 2.44q0 1.528.959 2.497.96.97 2.466.97.687 0 1.307-.19a4.3 4.3 0 0 0 1.175-.57q.195-.123.522-.379.667-.543 1.046-.543a.7.7 0 0 1 .518.2.7.7 0 0 1 .2.517q0 .81-1.533 1.656a6.64 6.64 0 0 1-3.255.846q-2.226 0-3.707-1.425-1.482-1.425-1.482-3.558t1.477-3.563 3.691-1.43q.779 0 1.564.21a9 9 0 0 1 1.666.65m9.516 7.68q1.578 0 2.589-1t1.01-2.548q0-1.548-1.015-2.558t-2.584-1.01-2.58 1.01-1.01 2.558q0 1.558 1.006 2.553 1.004.995 2.584.995m5.383-3.548q0 2.195-1.497 3.589t-3.886 1.394q-2.379 0-3.876-1.394-1.497-1.395-1.497-3.59 0-2.193 1.497-3.583t3.876-1.39q2.38 0 3.88 1.395 1.503 1.395 1.503 3.579m11.023-.984q0-1.446-.262-1.954-.261-.507-.897-.507-.758 0-1.205.656-.446.656-.446 1.805v4.265h.185q.625 0 .836.149.21.148.21.559 0 .369-.175.553-.173.185-.533.185h-1.302q-.441 0-.6-.205t-.159-.882V69.49q0-.77-.348-1.215-.349-.447-.954-.446-.462 0-.846.271-.385.273-.661.805v5.65h.38q.615 0 .83.154t.215.554q0 .42-.174.58-.175.158-.667.158h-2.727q-.4 0-.59-.18t-.19-.558q0-.41.241-.56.24-.148.939-.148h.205v-6.573h-.185q-.717 0-.98-.164-.26-.163-.26-.574 0-.36.204-.538.205-.18.616-.18H314q.339 0 .447.118t.128.498q.42-.451.902-.667a2.6 2.6 0 0 1 1.087-.215q.717 0 1.184.313.467.312.692.948.432-.646.995-.954a2.65 2.65 0 0 1 1.292-.307q1.323 0 1.933.861t.61 2.79v4.644h.164q.636 0 .851.154t.215.554q0 .369-.184.553t-.544.185h-1.24q-.41 0-.605-.246t-.195-.78zm6.152 8.336h2.461q.39 0 .585.185.195.184.194.553 0 .4-.19.564-.19.165-.67.164h-4.523q-.41 0-.62-.184t-.21-.544q0-.41.261-.574.26-.165.97-.164h.194V67.981h-.195q-.708 0-.969-.164-.261-.163-.261-.574 0-.36.21-.538.21-.18.62-.18h1.559q.308 0 .446.103.138.102.138.318v.994q.698-.717 1.543-1.076a4.6 4.6 0 0 1 1.82-.36q2.062 0 3.446 1.395t1.384 3.497q0 2.02-1.312 3.322t-3.353 1.303a5.1 5.1 0 0 1-2-.385 4.05 4.05 0 0 1-1.528-1.102zm3.179-4.112q1.425 0 2.338-.897.912-.897.912-2.323 0-1.395-.917-2.302-.918-.907-2.333-.907t-2.317.902-.903 2.307q0 1.415.897 2.318.898.902 2.323.902m12.069.308q1.58 0 2.589-1 1.01-1 1.01-2.548t-1.015-2.558-2.584-1.01q-1.57 0-2.579 1.01t-1.01 2.558q0 1.558 1.005 2.553t2.584.995m5.383-3.548q0 2.195-1.497 3.589t-3.886 1.394q-2.379 0-3.876-1.394-1.497-1.395-1.497-3.59 0-2.193 1.497-3.583t3.876-1.39q2.38 0 3.88 1.395 1.503 1.395 1.503 3.579m3.404 3.281v-6.573h-.194q-.697 0-.96-.164-.26-.163-.26-.574 0-.38.215-.548.215-.17.697-.17h1.466q.277 0 .43.113a.36.36 0 0 1 .155.308v.697q.749-.697 1.481-1.03a3.6 3.6 0 0 1 1.523-.334q1.548 0 2.435.964.888.964.887 2.666v4.645h.482q.513 0 .739.17.225.168.225.538 0 .4-.24.569-.242.17-.857.169h-2.266q-.657 0-.84-.154-.186-.153-.185-.584 0-.4.215-.554.214-.154.81-.154h.359V70.29q0-1.2-.544-1.83-.543-.631-1.579-.631-1.046 0-1.845.707-.8.707-.8 1.754v4.265h.359q.615 0 .83.154.216.154.216.554 0 .43-.185.584t-.902.154h-2.42q-.42 0-.63-.18t-.211-.558q0-.41.24-.56.241-.148.94-.148zm12.951-2.84q.082 1.476 1 2.281t2.507.805q1.2 0 2.615-.64 1.415-.642 1.712-.641.308 0 .513.194.204.195.205.482 0 .298-.215.544-.216.245-.687.482-1.026.502-2.118.769a9 9 0 0 1-2.169.266q-2.337 0-3.742-1.348t-1.405-3.574q0-2.266 1.487-3.67 1.486-1.405 3.876-1.405 2.163 0 3.589 1.312 1.425 1.313 1.425 3.179 0 .575-.241.769t-1.307.195zm.051-1.343h6.676q-.154-1.22-1.02-1.964-.867-.743-2.128-.743-1.365 0-2.297.717-.933.718-1.23 1.99m12.203 4.183v-6.573h-.195q-.697 0-.96-.164-.26-.163-.26-.574 0-.38.215-.548.215-.17.697-.17h1.466q.278 0 .431.113a.36.36 0 0 1 .154.308v.697q.748-.697 1.482-1.03a3.6 3.6 0 0 1 1.522-.334q1.548 0 2.436.964.886.964.887 2.666v4.645h.481q.513 0 .739.17.225.168.225.538 0 .4-.24.569-.242.17-.857.169h-2.266q-.656 0-.84-.154-.186-.153-.185-.584 0-.4.215-.554.216-.154.81-.154h.359V70.29q0-1.2-.544-1.83-.543-.631-1.579-.631-1.046 0-1.845.707-.8.707-.8 1.754v4.265h.359q.615 0 .83.154.216.154.216.554 0 .43-.185.584t-.902.154h-2.42q-.42 0-.63-.18t-.211-.558q0-.41.24-.56.242-.148.94-.148zM396.34 67.1q.503 0 .733.174.231.173.231.554 0 .358-.215.538-.216.18-.646.18h-4.153v3.424q0 1.682.436 2.215t1.492.533q.933 0 2.235-.543 1.302-.544 1.61-.544.287 0 .487.205.2.206.2.503a.8.8 0 0 1-.251.59q-.252.251-.856.487-1.005.4-1.81.584a6.8 6.8 0 0 1-1.513.185q-1.2 0-2.015-.385a2.57 2.57 0 0 1-1.215-1.143 2.6 2.6 0 0 1-.292-.851q-.087-.492-.087-1.518v-3.743h-1.743q-.43 0-.626-.169-.195-.169-.195-.548 0-.42.267-.575.267-.153 1.138-.153h1.159v-2.646q0-.44.19-.651.19-.21.59-.21.45 0 .625.256.174.256.174 1.17v2.08zm5.332 8.162v-1.825q0-.452.17-.646.168-.195.548-.195.42 0 .667.574.163.349.297.523.43.554 1.271.887.842.333 1.856.333 1.087 0 1.744-.44.656-.442.656-1.16 0-.727-.528-1.035t-1.81-.308h-.564q-2.093 0-3.189-.728t-1.097-2.112q0-1.353 1.071-2.102 1.072-.75 3.01-.749.79 0 1.61.22.82.221.861.221.113 0 .43-.2.319-.2.626-.2.349 0 .518.257.17.255.17.769v1.2q0 .543-.165.784-.164.24-.523.24-.307 0-.759-.522a7 7 0 0 0-.522-.544 3.4 3.4 0 0 0-1.16-.723q-.615-.22-1.445-.22-.964 0-1.553.426-.59.425-.59 1.081 0 .647.605.923.605.277 2.604.318 2.133.051 3.118.743.984.693.984 2.138 0 1.385-1.087 2.215t-2.933.83a9 9 0 0 1-1.302-.107 23 23 0 0 1-1.804-.364 5 5 0 0 1-.616.354q-.256.118-.43.118-.36 0-.549-.251-.19-.252-.19-.723m30.27-8.06 2.707-1.159.143-.04a.4.4 0 0 1 .113-.021q.082 0 .139.077.056.076.128.282l.256.78q.03.122.046.2.015.075.016.107 0 .081-.082.143a.6.6 0 0 1-.236.093l-2.871.646 1.928 2.235a.4.4 0 0 1 .107.138.35.35 0 0 1 .036.149q0 .051-.067.128a1.5 1.5 0 0 1-.179.17l-.677.481a1.4 1.4 0 0 1-.195.129.3.3 0 0 1-.123.035q-.06 0-.133-.061a.7.7 0 0 1-.133-.164l-1.518-2.543-1.507 2.543a.6.6 0 0 1-.149.169.25.25 0 0 1-.149.056.3.3 0 0 1-.123-.04 1 1 0 0 1-.184-.124l-.656-.482a1.3 1.3 0 0 1-.205-.169q-.072-.076-.072-.148 0-.052.04-.129a.5.5 0 0 1 .114-.138l1.927-2.235-2.85-.646a.6.6 0 0 1-.252-.098q-.087-.066-.087-.159 0-.02.036-.128t.046-.159l.257-.78a.9.9 0 0 1 .123-.281q.061-.077.143-.077.083 0 .144.01a.5.5 0 0 1 .113.03l2.707 1.18-.277-2.943v-.123q0-.174.092-.236.093-.06.37-.061h.8q.286 0 .373.061.087.062.087.236v.123zm9.7 9.075q-.225.513-.425.697a.68.68 0 0 1-.477.185.7.7 0 0 1-.503-.21.68.68 0 0 1-.184-.698q.03-.108.082-.23l6.398-13.792q.256-.532.451-.723a.65.65 0 0 1 .472-.19.73.73 0 0 1 .523.205q.215.205.215.493a.798.798 0 0 1-.103.38z"}))))};var y=s(3013);const j="hero",f=(...e)=>(0,y.rx)(j,...e),b=f,S="hero__root",w="hero__logo",N="hero__buttons",_="hero__getStarted";var C=s(4848);function E(e){let{className:t}=e;return(0,C.jsx)("header",{className:b(S,"hero hero--primary",t),children:(0,C.jsxs)("div",{className:"container",children:[(0,C.jsx)(g,{className:w}),(0,C.jsx)("div",{className:N,children:(0,C.jsx)(u.A,{className:b(_,"button button--outline button--secondary button--lg"),to:(0,x.Ay)("docs/getting-started/intro"),children:"Get Started"})})]})})}var k=s(5797);const A="responsive-embed__root";function z(e){let{src:t}=e;return(0,C.jsx)("div",{className:A,children:(0,C.jsx)("iframe",{src:t,frameBorder:"0",allowFullScreen:!0})})}s(6114),s(4183);const M="index",I=(...e)=>(0,y.rx)(M,...e),T=I,V="index__root",W="index__hero",B="index__features",D="index__feature",P="index__section",X="index__sectionAlt",F="index__heart",G="index__quote",H="index__lspDemo",L="index__playWithIt";const J=function(){const e=(0,p.A)(),{siteConfig:t}=e;return(0,C.jsxs)(q.A,{wrapperClassName:V,title:t.title,description:"A modern CSS pre-processor built for components",children:[(0,C.jsx)(E,{className:W}),(0,C.jsxs)("main",{children:[(0,C.jsx)("section",{className:B,children:(0,C.jsx)("div",{className:"container",children:(0,C.jsxs)("div",{className:"row",children:[(0,C.jsx)(k.X,{className:D,title:"CSS Superset",image:"img/component.svg",children:"Extending CSS so that it is easier to use in a component ecosystem, but without losing any of the declarative, familiar, static and fast aspects of CSS."}),(0,C.jsx)(k.X,{className:D,title:"Style API",image:"img/api.svg",children:"Each component exposes a Style API that maps its internal parts and states so you can reuse components across teams without sacrificing stylability or scalability."}),(0,C.jsx)(k.X,{className:D,title:"Type Safety",image:"img/stethoscope.svg",children:"Provide the ability to see errors at build time or even while working in your IDE. Wave goodbye to silent run-time breakage misery!"}),(0,C.jsx)(k.X,{className:D,title:"Performant",image:"img/checklist.svg",children:"Perform build-time transpilation and require only a minimal runtime. Use custom states and properties for dynamic interactions."}),(0,C.jsx)(k.X,{className:D,title:"Mixins & Formatters",image:"img/prototype.svg",children:"Easily create complex designs using CSS or JavaScript and reuse them across projects."}),(0,C.jsx)(k.X,{className:D,title:"Developer Tooling",image:"img/tool.svg",children:"Use our language-intelligence IDE extension for a better development experience including completions, defintions, hinting, diagnostics and more."})]})})}),(0,C.jsx)("section",{className:T(P,X),children:(0,C.jsxs)("div",{className:"container",children:[(0,C.jsx)("h2",{children:"What is Stylable?"}),(0,C.jsxs)("p",{children:["At ",(0,C.jsx)(u.A,{to:"https://www.wix.engineering/",children:"Wix"}),", we"," ",(0,C.jsx)("span",{className:F,children:"\u2665 "}),"CSS. Its simple, declarative syntax that is native in browsers is easily the fastest way to add styles to web pages and web apps. But when writing CSS that is scoped to individual components, developers have to maintain highly-specific selectors, using elaborate conventions to fake namespacing. Writing and maintaining CSS across large teams and large projects can be tricky."]}),(0,C.jsxs)("p",{children:["We also ",(0,C.jsx)("span",{className:F,children:"\u2665"})," TypeScript. TypeScript helps us manage these large projects, exposing at build-time what we could once only see at run-time."]}),(0,C.jsxs)("div",{children:["We want to give CSS a ",(0,C.jsx)("em",{children:"type system"})," \u2014 to do for CSS what TypeScript does for JavaScript.",(0,C.jsx)("ul",{})]}),"So we created ",(0,C.jsx)("strong",{children:"Stylable"})," \u2014 a CSS preprocessor that enables you to write style rules in CSS syntax, with some extensions that we believe adhere to the spirit of CSS."]})}),(0,C.jsx)("section",{className:P,children:(0,C.jsxs)("div",{className:"container",children:[(0,C.jsx)("h2",{children:"What Does Stylable Do?"}),(0,C.jsxs)("ul",{children:[(0,C.jsx)("li",{children:'Stylable scopes styles to components so they don\u2019t "leak" and clash with other styles.'}),(0,C.jsx)("li",{children:"Stylable enables custom pseudo-classes and pseudo-elements that abstract the internal state and structure of a component. These can then be styled externally. For example, you can style the label inside a button, or style the play button of a video player from outside these components."}),(0,C.jsx)("li",{children:"At build time, the preprocessor converts the Stylable CSS into flat, static, valid, vanilla CSS that works cross-browser."})]})]})}),(0,C.jsx)("section",{className:T(P,X),children:(0,C.jsxs)("div",{className:"container",children:[(0,C.jsx)("h2",{children:"Tooling"}),(0,C.jsx)("img",{className:H,src:"img/stylable-lsp-opt.gif",alt:"Stylable Intelligence Demo"}),(0,C.jsx)("p",{children:"Treating CSS as a type system opens up a whole new world of tooling. You can:"}),(0,C.jsxs)("ul",{children:[(0,C.jsx)("li",{children:"Get code completion that hints at the internal structure of components."}),(0,C.jsx)("li",{children:"Get types for your parameters. And so much more."})]}),(0,C.jsx)("strong",{children:"Stylable"})," enhances the styling development process. To get the full"," ",(0,C.jsx)("strong",{children:"Stylable"})," experience, install our"," ",(0,C.jsx)(u.A,{to:"https://marketplace.visualstudio.com/items?itemName=wix.stylable-intelligence",children:"VSCode Intellisense Extension"}),". It supports code completions, diagnostics, go to definitions, syntax highlighting and more."]})}),(0,C.jsx)("section",{className:P,children:(0,C.jsxs)("div",{className:"container",children:[(0,C.jsx)("h2",{children:"Videos"}),(0,C.jsx)("h3",{children:"Introduction to Stylable"}),(0,C.jsx)(z,{src:"https://www.youtube-nocookie.com/embed/Cx-JyJ9eXks?rel=0"}),(0,C.jsx)("h3",{children:"The Official Stylable Musical!"}),(0,C.jsx)(z,{src:"https://www.youtube.com/embed/jK88TqyXSWs?rel=0"})]})}),(0,C.jsx)("section",{className:T(P,X),children:(0,C.jsxs)("div",{className:"container",children:[(0,C.jsx)("h2",{children:"Documentation"}),(0,C.jsx)(u.A,{to:"./docs/getting-started/intro",children:"Learn more about Stylable"})," and get started with step by step instructions and code examples."]})}),(0,C.jsx)("section",{className:P,children:(0,C.jsxs)("div",{className:"container",children:[(0,C.jsx)("h2",{children:"Demo Project"}),(0,C.jsxs)("p",{children:["You can download our"," ",(0,C.jsxs)(u.A,{to:"https://github.com/wix/potato-bruce",children:["Learn more about ",(0,C.jsx)("strong",{children:"Mr. Potato Bruce project"})]})," ","from GitHub. It's a"," ",(0,C.jsx)(u.A,{to:"https://wix.github.io/potato-bruce/",children:(0,C.jsx)("strong",{children:"demo application"})})," ","showcasing the features and typed style API. Bruce explains it in his React Europe 2018 talk:"]}),(0,C.jsx)("div",{children:(0,C.jsx)(z,{src:"https://www.youtube.com/embed/YRhJZZsTEvQ"})}),(0,C.jsx)("p",{className:L,children:"Play with it and let us know what you think!"})]})}),(0,C.jsx)("section",{className:T(P,X),children:(0,C.jsx)("div",{className:"container",children:(0,C.jsxs)("div",{children:[(0,C.jsx)("h2",{children:"Shut up and take my money!"}),(0,C.jsxs)("p",{children:["No need! ",(0,C.jsx)("strong",{children:"Stylable"})," is open-source. Take it, use it, make your development easier and your apps faster. Viva CSS, and welcome ",(0,C.jsx)("strong",{children:"Stylable"}),". We hope you like it."]}),(0,C.jsxs)("p",{children:["Click here to access the MIT-licensed"," ",(0,C.jsx)(u.A,{to:"https://github.com/wix/stylable",children:"Stylable GitHub project"}),"."]}),(0,C.jsxs)("blockquote",{className:G,children:[(0,C.jsx)("p",{children:"New ideas will come along, but they will extend CSS rather than replace it. I believe that the CSS code we write today will be readable by computers 500 years from now."}),(0,C.jsxs)("small",{children:["\u2014"," ",(0,C.jsx)(u.A,{to:"https://dev.opera.com/articles/css-twenty-years-hakon/",children:"H\xe5kon Wium Lie"}),", co-creator of CSS."]})]})]})})})]})]})}},2224:(e,t,s)=>{e.exports=s.p+"f4bc9dffc19ff19f.svg"},3013:(e,t,s)=>{function a(e,t,s){if(!1===s||null==s||s!=s)return"";if(!0===s)return e+"--"+t;var a=s.toString();return e+"---"+t+"-"+a.length+"-"+a.replace(/\s/gm,"_")}function l(e){for(var t=[],s=1;s<arguments.length;s++){var l=arguments[s];if(l)if("string"==typeof l)t[t.length]=l;else if(2===s)for(var i in l){var n=a(e,i,l[i]);n&&(t[t.length]=n)}}return t.join(" ")}s.d(t,{rx:()=>l})}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[4583],{6114:(e,t,s)=>{},4183:(e,t,s)=>{s(6114)},5453:(e,t,s)=>{s.d(t,{X:()=>m});var a=s(6540),l=s(6025),i=s(8774),n=s(3013);const r="feature",o=(...e)=>(0,n.rx)(r,...e),c=o,h={root:"feature__root",title:"feature__title",image:"feature__image",imageWrapper:"feature__imageWrapper"};var d=s(4848);function m(e){let{className:t,image:s,title:n,children:r,link:o}=e;const m="string"==typeof s?(0,l.Ay)(s):"",q=a.useMemo((()=>s?"string"==typeof s?(0,d.jsx)("div",{className:h.imageWrapper,children:(0,d.jsx)("img",{className:h.image,src:m,alt:n})}):(0,d.jsx)("div",{className:h.imageWrapper,children:s(h.image)}):null),[s,m]);return(0,d.jsxs)("div",{className:c(h.root,"col col--4",t),children:[o?(0,d.jsxs)(i.A,{href:o,children:[q,(0,d.jsx)("h3",{className:h.title,children:n})]}):(0,d.jsxs)(d.Fragment,{children:[q,(0,d.jsx)("h3",{className:h.title,children:n})]}),(0,d.jsx)("p",{children:r})]})}},8421:(e,t,s)=>{s.r(t),s.d(t,{default:()=>J});var a,l,i,n,r,o,c,h,d,m=s(6540),q=s(7823),p=s(4586),u=s(8774),x=s(6025);function v(){return v=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var a in s)({}).hasOwnProperty.call(s,a)&&(e[a]=s[a])}return e},v.apply(null,arguments)}const g=e=>{let{title:t,titleId:s,...q}=e;return m.createElement("svg",v({xmlns:"http://www.w3.org/2000/svg",width:449,height:96,viewBox:"0 0 449 96","aria-labelledby":s},q),void 0===t?m.createElement("title",{id:s},"96-logo-horizontal"):t?m.createElement("title",{id:s},t):null,a||(a=m.createElement("defs",null,m.createElement("linearGradient",{id:"a",x1:"66.548%",x2:"80.272%",y1:"-4.692%",y2:"111.186%"},m.createElement("stop",{offset:"0%",stopColor:"#7AD852"}),m.createElement("stop",{offset:"53.584%",stopColor:"#3AB38B"}),m.createElement("stop",{offset:"100%",stopColor:"#00BFC9"})),m.createElement("linearGradient",{id:"b",x1:"78.094%",x2:"20.394%",y1:".738%",y2:"118.622%"},m.createElement("stop",{offset:"0%",stopColor:"#FF2953"}),m.createElement("stop",{offset:"100%",stopColor:"#EA3333"})))),m.createElement("g",{fill:"none",fillRule:"evenodd"},l||(l=m.createElement("path",{fill:"url(#a)",d:"M25.946 1.832C18.067 5.184.061 22.442 0 36.04c.106 14.058 18.067 30.856 25.946 34.209 1.806.768 4.61 1.83 7.57 1.83 2.7 0 4.986-1.331 7.312-4.13 3.91-4.703 3.44-11.466-1.771-15.304-6.236-4.59-11.339-8.71-11.445-16.605.106-7.894 5.21-13.404 11.445-17.995 5.21-3.838 6.226-9.66 2.316-14.363C39.047.884 36.216 0 33.516 0c-2.96 0-5.764 1.063-7.57 1.832"})),i||(i=m.createElement("path",{fill:"#005892",d:"M40.697 68.129c3.458-3.933 3.887-11.736-1.54-15.484-7.608-5.253-11.492-10.262-11.447-16.68.052-7.278 4.684-11.835 5.838-13.255-17.276 19.395-19.668 41.31-2.943 49.03 3.826 1.33 7.104-.212 10.092-3.611"})),n||(n=m.createElement("path",{fill:"#00418E",d:"M32.619 61.166c2.22-2.728 2.008-7.9-.99-10.74-4.765-4.514-5.616-9.426-5.587-13.877.033-5.048 3.007-8.21 3.748-9.194-11.09 13.452-14.386 30.96-3.65 36.315 2.457.923 4.56-.147 6.479-2.504"})),r||(r=m.createElement("path",{fill:"#002355",d:"M27.915 55.898c1.416-1.741 1.281-5.042-.631-6.853-3.042-2.881-3.585-6.016-3.566-8.856.021-3.222 1.042-6.002-.636-2.281-1.679 3.721-6.153 16.17.698 19.588 1.568.589 2.91-.094 4.135-1.598"})),o||(o=m.createElement("path",{fill:"url(#b)",d:"M10.22 72.218c-2.686 0-5.504-.884-7.819-3.68-3.891-4.701-2.874-10.519 2.311-14.354 6.206-4.588 11.279-10.096 11.385-17.986-.106-7.89-5.185-13.13-11.385-17.742C.135 15.052-1.49 8.56 2.401 3.858c2.315-2.796 5.132-3.68 7.82-3.68 2.946 0 5.736 1.063 7.534 1.83 7.84 3.35 25.682 20.098 25.82 34.19-.044 13.283-17.98 30.839-25.82 34.19-1.798.767-4.588 1.83-7.535 1.83",transform:"translate(41.212 23.742)"})),m.createElement("path",{fill:"#470000",d:"M22.557 45.69c3.476-3.932 2.887-10.991-2.569-14.74-7.647-5.253-11.292-11.276-11.247-17.695C8.793 5.977 13.45 1.42 14.61 0-3.436 13.255-5.16 41.31 11.65 49.03c3.847 1.33 7.904.06 10.907-3.34",opacity:.6,style:{mixBlendMode:"multiply"},transform:"rotate(-180 32.97 36.645)"}),c||(c=m.createElement("path",{fill:"#670010",d:"M53.003 34.318c-2.22 2.728-2.008 7.9.989 10.74 4.766 4.514 5.617 9.426 5.588 13.877-.034 5.048-1.044 7.352-1.785 8.337 9.027-10.609 11.977-30.335 1.687-35.458-2.457-.923-4.56.147-6.479 2.504"})),m.createElement("path",{fill:"#730000",d:"M23.889 33.973c1.417-1.74 1.282-5.041-.631-6.853-3.041-2.88-4.06-6.538-4.174-8.565-.14-2.501-.124-2.856.315-4.62-1.338 2.41-7.198 19.036.356 21.636 1.567.59 2.91-.094 4.134-1.598",style:{mixBlendMode:"multiply"},transform:"rotate(-180 41.01 36.73)"}),h||(h=m.createElement("path",{fill:"currentColor",d:"M123.196 27.784q-1.68-.495-3.088-.496-1.951 0-3.12.752-1.168.752-1.168 2.064 0 1.185.704 1.936.704.752 1.728 1.184t2.848 1.008q2.272.704 3.68 1.344a6.4 6.4 0 0 1 2.4 1.904q.992 1.264.992 3.344 0 1.92-1.04 3.36t-2.912 2.224-4.304.784q-2.465 0-4.8-.96t-4.032-2.56l1.376-2.656a11.6 11.6 0 0 0 3.6 2.416q2 .848 3.888.848 2.24 0 3.536-.88t1.296-2.384q0-1.184-.704-1.952t-1.776-1.216-2.896-.992q-2.24-.672-3.648-1.312a6.3 6.3 0 0 1-2.384-1.888q-.976-1.247-.976-3.296 0-1.792.992-3.168t2.784-2.112q1.792-.735 4.16-.736 2.016 0 3.952.592 1.935.593 3.44 1.584l-1.28 2.752a12.9 12.9 0 0 0-3.248-1.488m14.992-3.184h17.504v2.816h-7.232V47h-3.072V27.416h-7.2zm45.888 0-8.384 14.72V47h-3.072v-7.552L164.108 24.6h3.136l6.912 11.424L180.94 24.6zm11.296 0h3.072v19.616h9.792V47h-12.864zM237.004 47l-2.368-5.44h-11.808L220.492 47h-3.232l9.952-22.4h3.2l9.92 22.4zm-12.96-8.224h9.408l-4.736-10.88zm42.512-12.688q1.968 1.488 1.968 4.112 0 1.92-1.088 3.248-1.087 1.327-2.976 1.776 2.336.353 3.664 1.872t1.328 3.792q0 2.88-2.16 4.496T261.324 47h-9.728V24.6h9.568q3.424 0 5.392 1.488m-2.336 7.136q1.136-.88 1.136-2.512 0-1.6-1.136-2.464t-3.216-.832h-6.336v6.688h6.336q2.08 0 3.216-.88m.688 10.016q1.408-.976 1.408-2.736 0-1.695-1.408-2.656-1.408-.96-3.904-.96h-6.336v7.296h6.336q2.496.032 3.904-.944M282.38 24.6h3.072v19.616h9.792V47H282.38zm24.768 0H322.7v2.784h-12.48v6.912h11.168v2.784H310.22v7.136h12.864V47h-15.936z"})),d||(d=m.createElement("path",{fill:"#7A92A5",d:"M113.989 76.277q-.225.513-.426.697a.68.68 0 0 1-.477.185.7.7 0 0 1-.502-.21.68.68 0 0 1-.185-.698q.03-.108.082-.23l6.399-13.792q.256-.532.451-.723a.65.65 0 0 1 .472-.19.73.73 0 0 1 .523.205q.215.205.215.493a.798.798 0 0 1-.103.38zm15.504-9.075 2.707-1.159.143-.04a.4.4 0 0 1 .113-.021q.082 0 .138.077.056.076.129.282l.256.78q.03.122.046.2.016.075.016.107 0 .081-.083.143a.6.6 0 0 1-.235.093l-2.871.646 1.927 2.235a.4.4 0 0 1 .108.138.35.35 0 0 1 .036.149q0 .051-.067.128a1.5 1.5 0 0 1-.18.17l-.676.481a1.4 1.4 0 0 1-.195.129.3.3 0 0 1-.123.035q-.06 0-.133-.061a.7.7 0 0 1-.133-.164l-1.518-2.543-1.507 2.543a.6.6 0 0 1-.15.169.25.25 0 0 1-.148.056.3.3 0 0 1-.123-.04 1 1 0 0 1-.184-.124l-.657-.482a1.3 1.3 0 0 1-.205-.169q-.072-.076-.071-.148 0-.052.04-.129a.5.5 0 0 1 .113-.138l1.928-2.235-2.85-.646a.6.6 0 0 1-.252-.098q-.087-.066-.087-.159 0-.02.036-.128.037-.108.046-.159l.256-.78a.9.9 0 0 1 .124-.281q.06-.077.143-.077t.144.01a.5.5 0 0 1 .112.03l2.707 1.18-.276-2.943v-.123q0-.174.092-.236.092-.06.369-.061h.8q.287 0 .374.061.087.062.087.236v.123zm23.666-3.63q0-1.107.2-1.394.2-.288.856-.287.636 0 .84.24.206.241.206 1.144 0 .882-.19 1.092t-.856.21q-.657 0-.856-.195-.2-.195-.2-.81m1.897 10.982h3.291q.4 0 .59.17.19.168.19.538 0 .42-.18.58-.18.158-.661.158h-7.957q-.41 0-.616-.185-.204-.184-.205-.553 0-.36.216-.533.215-.175.646-.175h3.127v-6.573h-2q-.42 0-.64-.19t-.22-.548q0-.36.204-.538.205-.18.616-.18h3.004q.277 0 .436.113a.36.36 0 0 1 .159.308zm7.177.708v-1.825q0-.452.17-.646.168-.195.548-.195.42 0 .667.574.164.349.297.523.43.554 1.272.887.84.333 1.855.333 1.087 0 1.744-.44.656-.442.656-1.16 0-.727-.528-1.035t-1.81-.308h-.564q-2.091 0-3.189-.728t-1.097-2.112q0-1.353 1.071-2.102 1.072-.75 3.01-.749.79 0 1.61.22.82.221.861.221.113 0 .43-.2.319-.2.626-.2.349 0 .518.257.17.255.17.769v1.2q0 .543-.165.784-.164.24-.523.24-.308 0-.758-.522a7 7 0 0 0-.523-.544 3.4 3.4 0 0 0-1.16-.723q-.615-.22-1.445-.22-.964 0-1.553.426-.59.425-.59 1.081 0 .647.605.923.605.277 2.604.318 2.133.051 3.118.743.984.693.984 2.138 0 1.385-1.087 2.215t-2.932.83a9 9 0 0 1-1.303-.107 23 23 0 0 1-1.804-.364 5 5 0 0 1-.616.354q-.255.118-.43.118-.36 0-.549-.251-.19-.252-.19-.723m32.915-11.085q.103-.276.288-.39.184-.112.533-.112.379 0 .533.184.153.184.154.76a79 79 0 0 0 .04 2.624q0 .481-.163.651-.164.17-.585.17-.676 0-.882-.964l-.112-.441q-.195-.77-.933-1.256-.739-.487-1.733-.487-1.815 0-2.913 1.327-1.097 1.328-1.097 3.564t1.113 3.563 2.938 1.328q.595 0 1.21-.17a5.3 5.3 0 0 0 1.21-.507q.276-.144.758-.487.482-.344.687-.344.318 0 .539.21.22.21.22.518t-.24.59-.898.692a6.8 6.8 0 0 1-1.733.83 6.2 6.2 0 0 1-1.835.267q-2.533 0-4.184-1.789-1.65-1.79-1.65-4.578 0-2.76 1.67-4.584 1.672-1.825 4.205-1.825.675 0 1.379.164.702.164 1.481.492m6.368 11.464q-.051.462-.236.641-.185.18-.584.18-.43 0-.641-.252-.21-.25-.241-.815l-.133-2.379v-.184q0-.493.19-.698.189-.204.63-.205.615 0 .882.882.123.44.236.667.359.717 1.133 1.107t1.85.39q1.323 0 2.149-.626.825-.625.825-1.6 0-.81-.507-1.302-.508-.492-1.482-.635l-1.518-.206q-2.123-.297-3.096-1.117-.974-.82-.974-2.307 0-1.57 1.297-2.636 1.296-1.065 3.235-1.066.563 0 1.19.149.624.148 1.414.466.021-.297.164-.41t.493-.113q.45 0 .625.134.174.132.215.635l.144 2.143v.103q0 .359-.205.559t-.574.2q-.544 0-.841-.76a2.8 2.8 0 0 0-.287-.645q-.339-.513-.974-.79a3.6 3.6 0 0 0-1.446-.276q-1.24 0-2.015.615-.774.615-.774 1.61 0 .78.579 1.23.58.45 1.769.615l1.64.205q1.784.237 2.687 1.092t.902 2.313q0 1.723-1.281 2.763-1.283 1.04-3.425 1.04-.738 0-1.467-.173a9 9 0 0 1-1.548-.544m12.602 0q-.051.462-.236.641-.185.18-.584.18-.43 0-.641-.252-.21-.25-.241-.815l-.133-2.379v-.184q0-.493.19-.698.189-.204.63-.205.615 0 .882.882.123.44.236.667.359.717 1.133 1.107t1.85.39q1.323 0 2.149-.626.825-.625.825-1.6 0-.81-.507-1.302-.509-.492-1.482-.635l-1.518-.206q-2.123-.297-3.096-1.117-.975-.82-.974-2.307 0-1.57 1.297-2.636 1.297-1.065 3.235-1.066.563 0 1.19.149.624.148 1.414.466.021-.297.164-.41t.493-.113q.45 0 .625.134.174.132.215.635l.144 2.143v.103q0 .359-.205.559t-.574.2q-.544 0-.841-.76a2.8 2.8 0 0 0-.287-.645q-.339-.513-.974-.79a3.6 3.6 0 0 0-1.446-.276q-1.24 0-2.015.615-.774.615-.774 1.61 0 .78.58 1.23.578.45 1.768.615l1.64.205q1.785.237 2.687 1.092.903.856.902 2.313 0 1.723-1.281 2.763-1.282 1.04-3.425 1.04-.738 0-1.466-.173a9 9 0 0 1-1.549-.544m31.357-1.107q.42 0 .64.184t.22.544q0 .369-.21.553t-.61.185h-6.705q-.42 0-.641-.185-.22-.184-.22-.553 0-.359.21-.544.21-.184.61-.184h1.743v-6.265h-1.682q-.42 0-.651-.195-.23-.195-.23-.554 0-.369.215-.554.215-.184.625-.184h1.62v-.698q0-1.855 1.056-2.691t3.415-.836q1.148 0 1.697.256.549.257.548.8a.66.66 0 0 1-.235.523.9.9 0 0 1-.605.205q-.185 0-.887-.123a7 7 0 0 0-1.205-.123q-1.159 0-1.661.487-.503.487-.503 1.615v.585h3.63q.42 0 .641.184.22.185.22.554 0 .348-.225.549-.226.2-.615.2h-3.548v6.265zm9.443.287q1.58 0 2.59-1t1.01-2.548-1.016-2.558q-1.014-1.01-2.584-1.01-1.568 0-2.578 1.01t-1.01 2.558q0 1.558 1.004 2.553t2.584.995m5.384-3.548q0 2.195-1.497 3.589t-3.887 1.394q-2.378 0-3.876-1.394-1.497-1.395-1.497-3.59 0-2.193 1.497-3.583t3.876-1.39q2.379 0 3.882 1.395 1.502 1.395 1.502 3.579m6.214 3.281h3.404q.4 0 .59.17.19.168.19.538 0 .42-.18.58-.18.158-.662.158h-6.706q-.4 0-.605-.185-.204-.184-.205-.553 0-.36.21-.533.21-.175.652-.175h1.784v-6.573h-.697q-.995 0-1.241-.158-.246-.16-.246-.58 0-.36.2-.538.2-.18.61-.18h2.338q.276 0 .42.108a.37.37 0 0 1 .144.313v1.743q.974-1.22 2.03-1.815a4.56 4.56 0 0 1 2.276-.595q.913 0 1.477.37.564.369.564.953a.94.94 0 0 1-.282.672q-.282.292-.62.292-.237 0-.795-.313-.56-.312-1-.313-.8 0-1.687.57-.887.569-1.963 1.8zm29.295-7.413V67.1q0-.339.195-.498t.605-.159q.42 0 .58.246.158.247.158 1.016v1.907q0 .379-.195.569-.194.19-.584.19a.74.74 0 0 1-.477-.16q-.2-.158-.487-.66-.492-.831-1.195-1.257-.702-.425-1.615-.425-1.599 0-2.599.943t-1 2.44q0 1.528.959 2.497.96.97 2.466.97.687 0 1.307-.19a4.3 4.3 0 0 0 1.175-.57q.195-.123.522-.379.667-.543 1.046-.543a.7.7 0 0 1 .518.2.7.7 0 0 1 .2.517q0 .81-1.533 1.656a6.64 6.64 0 0 1-3.255.846q-2.226 0-3.707-1.425-1.482-1.425-1.482-3.558t1.477-3.563 3.691-1.43q.779 0 1.564.21a9 9 0 0 1 1.666.65m9.516 7.68q1.578 0 2.589-1t1.01-2.548q0-1.548-1.015-2.558t-2.584-1.01-2.58 1.01-1.01 2.558q0 1.558 1.006 2.553 1.004.995 2.584.995m5.383-3.548q0 2.195-1.497 3.589t-3.886 1.394q-2.379 0-3.876-1.394-1.497-1.395-1.497-3.59 0-2.193 1.497-3.583t3.876-1.39q2.38 0 3.88 1.395 1.503 1.395 1.503 3.579m11.023-.984q0-1.446-.262-1.954-.261-.507-.897-.507-.758 0-1.205.656-.446.656-.446 1.805v4.265h.185q.625 0 .836.149.21.148.21.559 0 .369-.175.553-.173.185-.533.185h-1.302q-.441 0-.6-.205t-.159-.882V69.49q0-.77-.348-1.215-.349-.447-.954-.446-.462 0-.846.271-.385.273-.661.805v5.65h.38q.615 0 .83.154t.215.554q0 .42-.174.58-.175.158-.667.158h-2.727q-.4 0-.59-.18t-.19-.558q0-.41.241-.56.24-.148.939-.148h.205v-6.573h-.185q-.717 0-.98-.164-.26-.163-.26-.574 0-.36.204-.538.205-.18.616-.18H314q.339 0 .447.118t.128.498q.42-.451.902-.667a2.6 2.6 0 0 1 1.087-.215q.717 0 1.184.313.467.312.692.948.432-.646.995-.954a2.65 2.65 0 0 1 1.292-.307q1.323 0 1.933.861t.61 2.79v4.644h.164q.636 0 .851.154t.215.554q0 .369-.184.553t-.544.185h-1.24q-.41 0-.605-.246t-.195-.78zm6.152 8.336h2.461q.39 0 .585.185.195.184.194.553 0 .4-.19.564-.19.165-.67.164h-4.523q-.41 0-.62-.184t-.21-.544q0-.41.261-.574.26-.165.97-.164h.194V67.981h-.195q-.708 0-.969-.164-.261-.163-.261-.574 0-.36.21-.538.21-.18.62-.18h1.559q.308 0 .446.103.138.102.138.318v.994q.698-.717 1.543-1.076a4.6 4.6 0 0 1 1.82-.36q2.062 0 3.446 1.395t1.384 3.497q0 2.02-1.312 3.322t-3.353 1.303a5.1 5.1 0 0 1-2-.385 4.05 4.05 0 0 1-1.528-1.102zm3.179-4.112q1.425 0 2.338-.897.912-.897.912-2.323 0-1.395-.917-2.302-.918-.907-2.333-.907t-2.317.902-.903 2.307q0 1.415.897 2.318.898.902 2.323.902m12.069.308q1.58 0 2.589-1 1.01-1 1.01-2.548t-1.015-2.558-2.584-1.01q-1.57 0-2.579 1.01t-1.01 2.558q0 1.558 1.005 2.553t2.584.995m5.383-3.548q0 2.195-1.497 3.589t-3.886 1.394q-2.379 0-3.876-1.394-1.497-1.395-1.497-3.59 0-2.193 1.497-3.583t3.876-1.39q2.38 0 3.88 1.395 1.503 1.395 1.503 3.579m3.404 3.281v-6.573h-.194q-.697 0-.96-.164-.26-.163-.26-.574 0-.38.215-.548.215-.17.697-.17h1.466q.277 0 .43.113a.36.36 0 0 1 .155.308v.697q.749-.697 1.481-1.03a3.6 3.6 0 0 1 1.523-.334q1.548 0 2.435.964.888.964.887 2.666v4.645h.482q.513 0 .739.17.225.168.225.538 0 .4-.24.569-.242.17-.857.169h-2.266q-.657 0-.84-.154-.186-.153-.185-.584 0-.4.215-.554.214-.154.81-.154h.359V70.29q0-1.2-.544-1.83-.543-.631-1.579-.631-1.046 0-1.845.707-.8.707-.8 1.754v4.265h.359q.615 0 .83.154.216.154.216.554 0 .43-.185.584t-.902.154h-2.42q-.42 0-.63-.18t-.211-.558q0-.41.24-.56.241-.148.94-.148zm12.951-2.84q.082 1.476 1 2.281t2.507.805q1.2 0 2.615-.64 1.415-.642 1.712-.641.308 0 .513.194.204.195.205.482 0 .298-.215.544-.216.245-.687.482-1.026.502-2.118.769a9 9 0 0 1-2.169.266q-2.337 0-3.742-1.348t-1.405-3.574q0-2.266 1.487-3.67 1.486-1.405 3.876-1.405 2.163 0 3.589 1.312 1.425 1.313 1.425 3.179 0 .575-.241.769t-1.307.195zm.051-1.343h6.676q-.154-1.22-1.02-1.964-.867-.743-2.128-.743-1.365 0-2.297.717-.933.718-1.23 1.99m12.203 4.183v-6.573h-.195q-.697 0-.96-.164-.26-.163-.26-.574 0-.38.215-.548.215-.17.697-.17h1.466q.278 0 .431.113a.36.36 0 0 1 .154.308v.697q.748-.697 1.482-1.03a3.6 3.6 0 0 1 1.522-.334q1.548 0 2.436.964.886.964.887 2.666v4.645h.481q.513 0 .739.17.225.168.225.538 0 .4-.24.569-.242.17-.857.169h-2.266q-.656 0-.84-.154-.186-.153-.185-.584 0-.4.215-.554.216-.154.81-.154h.359V70.29q0-1.2-.544-1.83-.543-.631-1.579-.631-1.046 0-1.845.707-.8.707-.8 1.754v4.265h.359q.615 0 .83.154.216.154.216.554 0 .43-.185.584t-.902.154h-2.42q-.42 0-.63-.18t-.211-.558q0-.41.24-.56.242-.148.94-.148zM396.34 67.1q.503 0 .733.174.231.173.231.554 0 .358-.215.538-.216.18-.646.18h-4.153v3.424q0 1.682.436 2.215t1.492.533q.933 0 2.235-.543 1.302-.544 1.61-.544.287 0 .487.205.2.206.2.503a.8.8 0 0 1-.251.59q-.252.251-.856.487-1.005.4-1.81.584a6.8 6.8 0 0 1-1.513.185q-1.2 0-2.015-.385a2.57 2.57 0 0 1-1.215-1.143 2.6 2.6 0 0 1-.292-.851q-.087-.492-.087-1.518v-3.743h-1.743q-.43 0-.626-.169-.195-.169-.195-.548 0-.42.267-.575.267-.153 1.138-.153h1.159v-2.646q0-.44.19-.651.19-.21.59-.21.45 0 .625.256.174.256.174 1.17v2.08zm5.332 8.162v-1.825q0-.452.17-.646.168-.195.548-.195.42 0 .667.574.163.349.297.523.43.554 1.271.887.842.333 1.856.333 1.087 0 1.744-.44.656-.442.656-1.16 0-.727-.528-1.035t-1.81-.308h-.564q-2.093 0-3.189-.728t-1.097-2.112q0-1.353 1.071-2.102 1.072-.75 3.01-.749.79 0 1.61.22.82.221.861.221.113 0 .43-.2.319-.2.626-.2.349 0 .518.257.17.255.17.769v1.2q0 .543-.165.784-.164.24-.523.24-.307 0-.759-.522a7 7 0 0 0-.522-.544 3.4 3.4 0 0 0-1.16-.723q-.615-.22-1.445-.22-.964 0-1.553.426-.59.425-.59 1.081 0 .647.605.923.605.277 2.604.318 2.133.051 3.118.743.984.693.984 2.138 0 1.385-1.087 2.215t-2.933.83a9 9 0 0 1-1.302-.107 23 23 0 0 1-1.804-.364 5 5 0 0 1-.616.354q-.256.118-.43.118-.36 0-.549-.251-.19-.252-.19-.723m30.27-8.06 2.707-1.159.143-.04a.4.4 0 0 1 .113-.021q.082 0 .139.077.056.076.128.282l.256.78q.03.122.046.2.015.075.016.107 0 .081-.082.143a.6.6 0 0 1-.236.093l-2.871.646 1.928 2.235a.4.4 0 0 1 .107.138.35.35 0 0 1 .036.149q0 .051-.067.128a1.5 1.5 0 0 1-.179.17l-.677.481a1.4 1.4 0 0 1-.195.129.3.3 0 0 1-.123.035q-.06 0-.133-.061a.7.7 0 0 1-.133-.164l-1.518-2.543-1.507 2.543a.6.6 0 0 1-.149.169.25.25 0 0 1-.149.056.3.3 0 0 1-.123-.04 1 1 0 0 1-.184-.124l-.656-.482a1.3 1.3 0 0 1-.205-.169q-.072-.076-.072-.148 0-.052.04-.129a.5.5 0 0 1 .114-.138l1.927-2.235-2.85-.646a.6.6 0 0 1-.252-.098q-.087-.066-.087-.159 0-.02.036-.128t.046-.159l.257-.78a.9.9 0 0 1 .123-.281q.061-.077.143-.077.083 0 .144.01a.5.5 0 0 1 .113.03l2.707 1.18-.277-2.943v-.123q0-.174.092-.236.093-.06.37-.061h.8q.286 0 .373.061.087.062.087.236v.123zm9.7 9.075q-.225.513-.425.697a.68.68 0 0 1-.477.185.7.7 0 0 1-.503-.21.68.68 0 0 1-.184-.698q.03-.108.082-.23l6.398-13.792q.256-.532.451-.723a.65.65 0 0 1 .472-.19.73.73 0 0 1 .523.205q.215.205.215.493a.798.798 0 0 1-.103.38z"}))))};var y=s(3013);const j="hero",f=(...e)=>(0,y.rx)(j,...e),b=f,S="hero__root",w="hero__logo",N="hero__buttons",_="hero__getStarted";var C=s(4848);function E(e){let{className:t}=e;return(0,C.jsx)("header",{className:b(S,"hero hero--primary",t),children:(0,C.jsxs)("div",{className:"container",children:[(0,C.jsx)(g,{className:w}),(0,C.jsx)("div",{className:N,children:(0,C.jsx)(u.A,{className:b(_,"button button--outline button--secondary button--lg"),to:(0,x.Ay)("docs/getting-started/intro"),children:"Get Started"})})]})})}var k=s(5453);const A="responsive-embed__root";function z(e){let{src:t}=e;return(0,C.jsx)("div",{className:A,children:(0,C.jsx)("iframe",{src:t,frameBorder:"0",allowFullScreen:!0})})}s(6114),s(4183);const M="index",I=(...e)=>(0,y.rx)(M,...e),T=I,V="index__root",W="index__hero",B="index__features",D="index__feature",P="index__section",X="index__sectionAlt",F="index__heart",G="index__quote",H="index__lspDemo",L="index__playWithIt";const J=function(){const e=(0,p.A)(),{siteConfig:t}=e;return(0,C.jsxs)(q.A,{wrapperClassName:V,title:t.title,description:"A modern CSS pre-processor built for components",children:[(0,C.jsx)(E,{className:W}),(0,C.jsxs)("main",{children:[(0,C.jsx)("section",{className:B,children:(0,C.jsx)("div",{className:"container",children:(0,C.jsxs)("div",{className:"row",children:[(0,C.jsx)(k.X,{className:D,title:"CSS Superset",image:"img/component.svg",children:"Extending CSS so that it is easier to use in a component ecosystem, but without losing any of the declarative, familiar, static and fast aspects of CSS."}),(0,C.jsx)(k.X,{className:D,title:"Style API",image:"img/api.svg",children:"Each component exposes a Style API that maps its internal parts and states so you can reuse components across teams without sacrificing stylability or scalability."}),(0,C.jsx)(k.X,{className:D,title:"Type Safety",image:"img/stethoscope.svg",children:"Provide the ability to see errors at build time or even while working in your IDE. Wave goodbye to silent run-time breakage misery!"}),(0,C.jsx)(k.X,{className:D,title:"Performant",image:"img/checklist.svg",children:"Perform build-time transpilation and require only a minimal runtime. Use custom states and properties for dynamic interactions."}),(0,C.jsx)(k.X,{className:D,title:"Mixins & Formatters",image:"img/prototype.svg",children:"Easily create complex designs using CSS or JavaScript and reuse them across projects."}),(0,C.jsx)(k.X,{className:D,title:"Developer Tooling",image:"img/tool.svg",children:"Use our language-intelligence IDE extension for a better development experience including completions, defintions, hinting, diagnostics and more."})]})})}),(0,C.jsx)("section",{className:T(P,X),children:(0,C.jsxs)("div",{className:"container",children:[(0,C.jsx)("h2",{children:"What is Stylable?"}),(0,C.jsxs)("p",{children:["At ",(0,C.jsx)(u.A,{to:"https://www.wix.engineering/",children:"Wix"}),", we"," ",(0,C.jsx)("span",{className:F,children:"\u2665 "}),"CSS. Its simple, declarative syntax that is native in browsers is easily the fastest way to add styles to web pages and web apps. But when writing CSS that is scoped to individual components, developers have to maintain highly-specific selectors, using elaborate conventions to fake namespacing. Writing and maintaining CSS across large teams and large projects can be tricky."]}),(0,C.jsxs)("p",{children:["We also ",(0,C.jsx)("span",{className:F,children:"\u2665"})," TypeScript. TypeScript helps us manage these large projects, exposing at build-time what we could once only see at run-time."]}),(0,C.jsxs)("div",{children:["We want to give CSS a ",(0,C.jsx)("em",{children:"type system"})," \u2014 to do for CSS what TypeScript does for JavaScript.",(0,C.jsx)("ul",{})]}),"So we created ",(0,C.jsx)("strong",{children:"Stylable"})," \u2014 a CSS preprocessor that enables you to write style rules in CSS syntax, with some extensions that we believe adhere to the spirit of CSS."]})}),(0,C.jsx)("section",{className:P,children:(0,C.jsxs)("div",{className:"container",children:[(0,C.jsx)("h2",{children:"What Does Stylable Do?"}),(0,C.jsxs)("ul",{children:[(0,C.jsx)("li",{children:'Stylable scopes styles to components so they don\u2019t "leak" and clash with other styles.'}),(0,C.jsx)("li",{children:"Stylable enables custom pseudo-classes and pseudo-elements that abstract the internal state and structure of a component. These can then be styled externally. For example, you can style the label inside a button, or style the play button of a video player from outside these components."}),(0,C.jsx)("li",{children:"At build time, the preprocessor converts the Stylable CSS into flat, static, valid, vanilla CSS that works cross-browser."})]})]})}),(0,C.jsx)("section",{className:T(P,X),children:(0,C.jsxs)("div",{className:"container",children:[(0,C.jsx)("h2",{children:"Tooling"}),(0,C.jsx)("img",{className:H,src:"img/stylable-lsp-opt.gif",alt:"Stylable Intelligence Demo"}),(0,C.jsx)("p",{children:"Treating CSS as a type system opens up a whole new world of tooling. You can:"}),(0,C.jsxs)("ul",{children:[(0,C.jsx)("li",{children:"Get code completion that hints at the internal structure of components."}),(0,C.jsx)("li",{children:"Get types for your parameters. And so much more."})]}),(0,C.jsx)("strong",{children:"Stylable"})," enhances the styling development process. To get the full"," ",(0,C.jsx)("strong",{children:"Stylable"})," experience, install our"," ",(0,C.jsx)(u.A,{to:"https://marketplace.visualstudio.com/items?itemName=wix.stylable-intelligence",children:"VSCode Intellisense Extension"}),". It supports code completions, diagnostics, go to definitions, syntax highlighting and more."]})}),(0,C.jsx)("section",{className:P,children:(0,C.jsxs)("div",{className:"container",children:[(0,C.jsx)("h2",{children:"Videos"}),(0,C.jsx)("h3",{children:"Introduction to Stylable"}),(0,C.jsx)(z,{src:"https://www.youtube-nocookie.com/embed/Cx-JyJ9eXks?rel=0"}),(0,C.jsx)("h3",{children:"The Official Stylable Musical!"}),(0,C.jsx)(z,{src:"https://www.youtube.com/embed/jK88TqyXSWs?rel=0"})]})}),(0,C.jsx)("section",{className:T(P,X),children:(0,C.jsxs)("div",{className:"container",children:[(0,C.jsx)("h2",{children:"Documentation"}),(0,C.jsx)(u.A,{to:"./docs/getting-started/intro",children:"Learn more about Stylable"})," and get started with step by step instructions and code examples."]})}),(0,C.jsx)("section",{className:P,children:(0,C.jsxs)("div",{className:"container",children:[(0,C.jsx)("h2",{children:"Demo Project"}),(0,C.jsxs)("p",{children:["You can download our"," ",(0,C.jsxs)(u.A,{to:"https://github.com/wix/potato-bruce",children:["Learn more about ",(0,C.jsx)("strong",{children:"Mr. Potato Bruce project"})]})," ","from GitHub. It's a"," ",(0,C.jsx)(u.A,{to:"https://wix.github.io/potato-bruce/",children:(0,C.jsx)("strong",{children:"demo application"})})," ","showcasing the features and typed style API. Bruce explains it in his React Europe 2018 talk:"]}),(0,C.jsx)("div",{children:(0,C.jsx)(z,{src:"https://www.youtube.com/embed/YRhJZZsTEvQ"})}),(0,C.jsx)("p",{className:L,children:"Play with it and let us know what you think!"})]})}),(0,C.jsx)("section",{className:T(P,X),children:(0,C.jsx)("div",{className:"container",children:(0,C.jsxs)("div",{children:[(0,C.jsx)("h2",{children:"Shut up and take my money!"}),(0,C.jsxs)("p",{children:["No need! ",(0,C.jsx)("strong",{children:"Stylable"})," is open-source. Take it, use it, make your development easier and your apps faster. Viva CSS, and welcome ",(0,C.jsx)("strong",{children:"Stylable"}),". We hope you like it."]}),(0,C.jsxs)("p",{children:["Click here to access the MIT-licensed"," ",(0,C.jsx)(u.A,{to:"https://github.com/wix/stylable",children:"Stylable GitHub project"}),"."]}),(0,C.jsxs)("blockquote",{className:G,children:[(0,C.jsx)("p",{children:"New ideas will come along, but they will extend CSS rather than replace it. I believe that the CSS code we write today will be readable by computers 500 years from now."}),(0,C.jsxs)("small",{children:["\u2014"," ",(0,C.jsx)(u.A,{to:"https://dev.opera.com/articles/css-twenty-years-hakon/",children:"H\xe5kon Wium Lie"}),", co-creator of CSS."]})]})]})})})]})]})}},4160:(e,t,s)=>{e.exports=s.p+"f4bc9dffc19ff19f.svg"},3013:(e,t,s)=>{function a(e,t,s){if(!1===s||null==s||s!=s)return"";if(!0===s)return e+"--"+t;var a=s.toString();return e+"---"+t+"-"+a.length+"-"+a.replace(/\s/gm,"_")}function l(e){for(var t=[],s=1;s<arguments.length;s++){var l=arguments[s];if(l)if("string"==typeof l)t[t.length]=l;else if(2===s)for(var i in l){var n=a(e,i,l[i]);n&&(t[t.length]=n)}}return t.join(" ")}s.d(t,{rx:()=>l})}}]); \ No newline at end of file diff --git a/assets/js/1f7dc951.289a336c.js b/assets/js/1f7dc951.67324d4b.js similarity index 98% rename from assets/js/1f7dc951.289a336c.js rename to assets/js/1f7dc951.67324d4b.js index 0c9d6516..9d987f65 100644 --- a/assets/js/1f7dc951.289a336c.js +++ b/assets/js/1f7dc951.67324d4b.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[9597],{6919:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>r,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"guides/shared-classes","title":"Shared Classes","description":"When building a component library or an application, it is useful to reuse classes that can be shared across components to achieve common CSS with lower specificity.","source":"@site/docs/guides/shared-classes.md","sourceDirName":"guides","slug":"/guides/shared-classes","permalink":"/docs/guides/shared-classes","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/shared-classes.md","tags":[],"version":"current","frontMatter":{"id":"shared-classes","title":"Shared Classes"},"sidebar":"Guides","previous":{"title":"Project Commons","permalink":"/docs/guides/project-commons"},"next":{"title":"Component Variants","permalink":"/docs/guides/component-variants"}}');var t=n(4848),a=n(8453);const i={id:"shared-classes",title:"Shared Classes"},c=void 0,r={},l=[{value:"Defining a shared class",id:"defining-a-shared-class",level:2},{value:"Use shared classes in components",id:"use-shared-classes-in-components",level:2}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,a.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.p,{children:"When building a component library or an application, it is useful to reuse classes that can be shared across components to achieve common CSS with lower specificity."}),"\n",(0,t.jsx)(s.h2,{id:"defining-a-shared-class",children:"Defining a shared class"}),"\n",(0,t.jsxs)(s.p,{children:["In the ",(0,t.jsx)(s.a,{href:"/docs/guides/project-commons",children:"commons stylable stylesheet"})," of your project (usually named ",(0,t.jsx)(s.code,{children:"project.st.css"}),"), you define a CSS class with a descriptive name like ",(0,t.jsx)(s.code,{children:"emphasisBox"}),"."]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",metastring:'title="project.st.css"',children:".emphasisBox {\n background: pink;\n color: white;\n}\n"})}),"\n",(0,t.jsx)(s.h2,{id:"use-shared-classes-in-components",children:"Use shared classes in components"}),"\n",(0,t.jsxs)(s.p,{children:["A component's ",(0,t.jsx)(s.strong,{children:"Stylable"})," stylesheet can use and extend shared classes:"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",metastring:'title="comp.st.css"',children:'@st-import [emphasisBox] from "./project.st.css";\n/*\nselector: .comp__root .project__emphasisBox\njs value: "project__emphasisBox"\n*/\n.root .emphasisBox {}\n/*\nselector: .comp__messageBox.project__emphasisBox\njs value: "comp__messageBox project__emphasisBox"\n*/\n.messageBox {\n -st-extends: emphasisBox;\n}\n'})}),"\n",(0,t.jsx)(s.admonition,{type:"note",children:(0,t.jsxs)(s.p,{children:["For the ",(0,t.jsx)(s.code,{children:".emphasisBox"})," selector, we manually added the ",(0,t.jsx)(s.code,{children:".root"})," class to avoid overriding ",(0,t.jsx)(s.code,{children:"emphasisBox"})," outside this scope."]})})]})}function h(e={}){const{wrapper:s}={...(0,a.R)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>i,x:()=>c});var o=n(6540);const t={},a=o.createContext(t);function i(e){const s=o.useContext(a);return o.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function c(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),o.createElement(a.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[9597],{1459:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>r,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"guides/shared-classes","title":"Shared Classes","description":"When building a component library or an application, it is useful to reuse classes that can be shared across components to achieve common CSS with lower specificity.","source":"@site/docs/guides/shared-classes.md","sourceDirName":"guides","slug":"/guides/shared-classes","permalink":"/docs/guides/shared-classes","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/shared-classes.md","tags":[],"version":"current","frontMatter":{"id":"shared-classes","title":"Shared Classes"},"sidebar":"Guides","previous":{"title":"Project Commons","permalink":"/docs/guides/project-commons"},"next":{"title":"Component Variants","permalink":"/docs/guides/component-variants"}}');var t=n(4848),a=n(8453);const i={id:"shared-classes",title:"Shared Classes"},c=void 0,r={},l=[{value:"Defining a shared class",id:"defining-a-shared-class",level:2},{value:"Use shared classes in components",id:"use-shared-classes-in-components",level:2}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,a.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.p,{children:"When building a component library or an application, it is useful to reuse classes that can be shared across components to achieve common CSS with lower specificity."}),"\n",(0,t.jsx)(s.h2,{id:"defining-a-shared-class",children:"Defining a shared class"}),"\n",(0,t.jsxs)(s.p,{children:["In the ",(0,t.jsx)(s.a,{href:"/docs/guides/project-commons",children:"commons stylable stylesheet"})," of your project (usually named ",(0,t.jsx)(s.code,{children:"project.st.css"}),"), you define a CSS class with a descriptive name like ",(0,t.jsx)(s.code,{children:"emphasisBox"}),"."]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",metastring:'title="project.st.css"',children:".emphasisBox {\n background: pink;\n color: white;\n}\n"})}),"\n",(0,t.jsx)(s.h2,{id:"use-shared-classes-in-components",children:"Use shared classes in components"}),"\n",(0,t.jsxs)(s.p,{children:["A component's ",(0,t.jsx)(s.strong,{children:"Stylable"})," stylesheet can use and extend shared classes:"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",metastring:'title="comp.st.css"',children:'@st-import [emphasisBox] from "./project.st.css";\n/*\nselector: .comp__root .project__emphasisBox\njs value: "project__emphasisBox"\n*/\n.root .emphasisBox {}\n/*\nselector: .comp__messageBox.project__emphasisBox\njs value: "comp__messageBox project__emphasisBox"\n*/\n.messageBox {\n -st-extends: emphasisBox;\n}\n'})}),"\n",(0,t.jsx)(s.admonition,{type:"note",children:(0,t.jsxs)(s.p,{children:["For the ",(0,t.jsx)(s.code,{children:".emphasisBox"})," selector, we manually added the ",(0,t.jsx)(s.code,{children:".root"})," class to avoid overriding ",(0,t.jsx)(s.code,{children:"emphasisBox"})," outside this scope."]})})]})}function h(e={}){const{wrapper:s}={...(0,a.R)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>i,x:()=>c});var o=n(6540);const t={},a=o.createContext(t);function i(e){const s=o.useContext(a);return o.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function c(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),o.createElement(a.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/2560.9c924c04.js b/assets/js/2237.b76b95a8.js similarity index 80% rename from assets/js/2560.9c924c04.js rename to assets/js/2237.b76b95a8.js index 6033aac6..aa5e1b6f 100644 --- a/assets/js/2560.9c924c04.js +++ b/assets/js/2237.b76b95a8.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[2560],{3510:(e,t,i)=>{i.d(t,{A:()=>l});i(6540);var n=i(4164),o=i(3230),s=i(5225),a=i(4848);function l(e){let{className:t}=e;return(0,a.jsx)("main",{className:(0,n.A)("container margin-vert--xl",t),children:(0,a.jsx)("div",{className:"row",children:(0,a.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,a.jsx)(s.A,{as:"h1",className:"hero__title",children:(0,a.jsx)(o.A,{id:"theme.NotFound.title",description:"The title of the 404 page",children:"Page Not Found"})}),(0,a.jsx)("p",{children:(0,a.jsx)(o.A,{id:"theme.NotFound.p1",description:"The first paragraph of the 404 page",children:"We could not find what you were looking for."})}),(0,a.jsx)("p",{children:(0,a.jsx)(o.A,{id:"theme.NotFound.p2",description:"The 2nd paragraph of the 404 page",children:"Please contact the owner of the site that linked you to the original URL and let them know their link is broken."})})]})})})}},2560:(e,t,i)=>{i.r(t),i.d(t,{default:()=>r});i(6540);var n=i(3230),o=i(6644),s=i(7635),a=i(3510),l=i(4848);function r(){const e=(0,n.T)({id:"theme.NotFound.title",message:"Page Not Found"});return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(o.be,{title:e}),(0,l.jsx)(s.A,{children:(0,l.jsx)(a.A,{})})]})}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[2237],{3363:(e,t,i)=>{i.d(t,{A:()=>l});i(6540);var n=i(4164),o=i(1312),s=i(1107),a=i(4848);function l(e){let{className:t}=e;return(0,a.jsx)("main",{className:(0,n.A)("container margin-vert--xl",t),children:(0,a.jsx)("div",{className:"row",children:(0,a.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,a.jsx)(s.A,{as:"h1",className:"hero__title",children:(0,a.jsx)(o.A,{id:"theme.NotFound.title",description:"The title of the 404 page",children:"Page Not Found"})}),(0,a.jsx)("p",{children:(0,a.jsx)(o.A,{id:"theme.NotFound.p1",description:"The first paragraph of the 404 page",children:"We could not find what you were looking for."})}),(0,a.jsx)("p",{children:(0,a.jsx)(o.A,{id:"theme.NotFound.p2",description:"The 2nd paragraph of the 404 page",children:"Please contact the owner of the site that linked you to the original URL and let them know their link is broken."})})]})})})}},2237:(e,t,i)=>{i.r(t),i.d(t,{default:()=>r});i(6540);var n=i(1312),o=i(1213),s=i(7823),a=i(3363),l=i(4848);function r(){const e=(0,n.T)({id:"theme.NotFound.title",message:"Page Not Found"});return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(o.be,{title:e}),(0,l.jsx)(s.A,{children:(0,l.jsx)(a.A,{})})]})}}}]); \ No newline at end of file diff --git a/assets/js/24352365.d82f4c13.js b/assets/js/24352365.0cdd2c1d.js similarity index 97% rename from assets/js/24352365.d82f4c13.js rename to assets/js/24352365.0cdd2c1d.js index 5bb41c47..d899a326 100644 --- a/assets/js/24352365.d82f4c13.js +++ b/assets/js/24352365.0cdd2c1d.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[5395],{8365:(t,e,o)=>{o.r(e),o.d(e,{assets:()=>a,contentTitle:()=>l,default:()=>u,frontMatter:()=>r,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"getting-started/storybook-integration","title":"Storybook","description":"To integrate Stylable with Storybook, you need to do two things:","source":"@site/docs/getting-started/storybook-integration.md","sourceDirName":"getting-started","slug":"/getting-started/storybook-integration","permalink":"/docs/getting-started/storybook-integration","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/getting-started/storybook-integration.md","tags":[],"version":"current","frontMatter":{"id":"storybook-integration","title":"Storybook"},"sidebar":"Discover","previous":{"title":"Rollup","permalink":"/docs/getting-started/rollup-integration"},"next":{"title":"TypeScript","permalink":"/docs/getting-started/typescript-integration"}}');var i=o(4848),s=o(8453);const r={id:"storybook-integration",title:"Storybook"},l=void 0,a={},c=[];function d(t){const e={admonition:"admonition",code:"code",li:"li",ol:"ol",p:"p",pre:"pre",...(0,s.R)(),...t.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.p,{children:"To integrate Stylable with Storybook, you need to do two things:"}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsxs)(e.li,{children:["Exclude Stylable files (",(0,i.jsx)(e.code,{children:"*.st.css"}),") from all other existing CSS loaders."]}),"\n",(0,i.jsxs)(e.li,{children:["Add ",(0,i.jsx)(e.code,{children:"StylableWebpackPlugin"})," to the webpack configuration."]}),"\n"]}),"\n",(0,i.jsx)(e.p,{children:"Add the following snippit to your Storybook webpack configuration to get these two actions done:"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:"const {\n StylableWebpackPlugin,\n applyWebpackConfigStylableExcludes\n} = require('@stylable/webpack-plugin');\n\nmodule.exports = {\n stories: ...,\n addons: ...,\n webpackFinal: (config) => {\n /* find all css loaders and add exclude .st.css files from them */\n applyWebpackConfigStylableExcludes(config);\n\n /* inject StylableWebpackPlugin */\n config.plugins.push(new StylableWebpackPlugin());\n return config;\n }\n}\n"})}),"\n",(0,i.jsx)(e.admonition,{type:"caution",children:(0,i.jsx)(e.p,{children:"This snippet should work with default Storybook configuration. It assumes some things about the structure of the file which might not be true in future releases of Storybook."})})]})}function u(t={}){const{wrapper:e}={...(0,s.R)(),...t.components};return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(d,{...t})}):d(t)}},8453:(t,e,o)=>{o.d(e,{R:()=>r,x:()=>l});var n=o(6540);const i={},s=n.createContext(i);function r(t){const e=n.useContext(s);return n.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function l(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(i):t.components||i:r(t.components),n.createElement(s.Provider,{value:e},t.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[5395],{8033:(t,e,o)=>{o.r(e),o.d(e,{assets:()=>a,contentTitle:()=>l,default:()=>u,frontMatter:()=>r,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"getting-started/storybook-integration","title":"Storybook","description":"To integrate Stylable with Storybook, you need to do two things:","source":"@site/docs/getting-started/storybook-integration.md","sourceDirName":"getting-started","slug":"/getting-started/storybook-integration","permalink":"/docs/getting-started/storybook-integration","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/getting-started/storybook-integration.md","tags":[],"version":"current","frontMatter":{"id":"storybook-integration","title":"Storybook"},"sidebar":"Discover","previous":{"title":"Rollup","permalink":"/docs/getting-started/rollup-integration"},"next":{"title":"TypeScript","permalink":"/docs/getting-started/typescript-integration"}}');var i=o(4848),s=o(8453);const r={id:"storybook-integration",title:"Storybook"},l=void 0,a={},c=[];function d(t){const e={admonition:"admonition",code:"code",li:"li",ol:"ol",p:"p",pre:"pre",...(0,s.R)(),...t.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.p,{children:"To integrate Stylable with Storybook, you need to do two things:"}),"\n",(0,i.jsxs)(e.ol,{children:["\n",(0,i.jsxs)(e.li,{children:["Exclude Stylable files (",(0,i.jsx)(e.code,{children:"*.st.css"}),") from all other existing CSS loaders."]}),"\n",(0,i.jsxs)(e.li,{children:["Add ",(0,i.jsx)(e.code,{children:"StylableWebpackPlugin"})," to the webpack configuration."]}),"\n"]}),"\n",(0,i.jsx)(e.p,{children:"Add the following snippit to your Storybook webpack configuration to get these two actions done:"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:"const {\n StylableWebpackPlugin,\n applyWebpackConfigStylableExcludes\n} = require('@stylable/webpack-plugin');\n\nmodule.exports = {\n stories: ...,\n addons: ...,\n webpackFinal: (config) => {\n /* find all css loaders and add exclude .st.css files from them */\n applyWebpackConfigStylableExcludes(config);\n\n /* inject StylableWebpackPlugin */\n config.plugins.push(new StylableWebpackPlugin());\n return config;\n }\n}\n"})}),"\n",(0,i.jsx)(e.admonition,{type:"caution",children:(0,i.jsx)(e.p,{children:"This snippet should work with default Storybook configuration. It assumes some things about the structure of the file which might not be true in future releases of Storybook."})})]})}function u(t={}){const{wrapper:e}={...(0,s.R)(),...t.components};return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(d,{...t})}):d(t)}},8453:(t,e,o)=>{o.d(e,{R:()=>r,x:()=>l});var n=o(6540);const i={},s=n.createContext(i);function r(t){const e=n.useContext(s);return n.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function l(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(i):t.components||i:r(t.components),n.createElement(s.Provider,{value:e},t.children)}}}]); \ No newline at end of file diff --git a/assets/js/24ff752b.bfda4846.js b/assets/js/24ff752b.68406a9b.js similarity index 99% rename from assets/js/24ff752b.bfda4846.js rename to assets/js/24ff752b.68406a9b.js index c9227c43..76585735 100644 --- a/assets/js/24ff752b.bfda4846.js +++ b/assets/js/24ff752b.68406a9b.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[825],{6520:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>a,contentTitle:()=>d,default:()=>h,frontMatter:()=>o,metadata:()=>i,toc:()=>c});const i=JSON.parse('{"id":"guides/migration-v5","title":"Stylable v5","description":"The purpose of this document is to help migrate projects using Stylable to v5.","source":"@site/docs/guides/migration-v5.md","sourceDirName":"guides","slug":"/guides/migration-v5","permalink":"/docs/guides/migration-v5","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/migration-v5.md","tags":[],"version":"current","frontMatter":{"id":"migration-v5","title":"Stylable v5"},"sidebar":"Guides","previous":{"title":"Stylable v3","permalink":"/docs/guides/migration-v3"}}');var t=n(4848),l=n(8453);const o={id:"migration-v5",title:"Stylable v5"},d=void 0,a={},c=[{value:"<code>@stylable/core</code>",id:"stylablecore",level:2},{value:"Diagnostics overhaul",id:"diagnostics-overhaul",level:3},{value:"Reducing public facing APIs",id:"reducing-public-facing-apis",level:3},{value:"API changes",id:"api-changes",level:4},{value:"Missing APIs?",id:"missing-apis",level:4},{value:"<code>@stylable/cli</code>",id:"stylablecli",level:2},{value:"Default arguments changed",id:"default-arguments-changed",level:3},{value:"Build index file and other outputs simultaneously",id:"build-index-file-and-other-outputs-simultaneously",level:3}];function r(e){const s={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",ul:"ul",...(0,l.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(s.p,{children:["The purpose of this document is to help migrate projects using Stylable to ",(0,t.jsx)(s.code,{children:"v5"}),"."]}),"\n",(0,t.jsxs)(s.p,{children:["We have taken the opportunity of node dropping LTS support for ",(0,t.jsx)(s.code,{children:"v12"})," and we have decided to include a number of additional breaking changes to the ",(0,t.jsx)(s.code,{children:"v5"})," release. These changes are primarily to the programmatic API of Stylable and not to user facing features, syntax or integrations."]}),"\n",(0,t.jsxs)(s.p,{children:["You can find the plan for this major version ",(0,t.jsx)(s.a,{href:"https://github.com/wix/stylable/issues/2410",children:"here"}),"."]}),"\n",(0,t.jsx)(s.h2,{id:"stylablecore",children:(0,t.jsx)(s.code,{children:"@stylable/core"})}),"\n",(0,t.jsx)(s.h3,{id:"diagnostics-overhaul",children:"Diagnostics overhaul"}),"\n",(0,t.jsxs)(s.p,{children:["All diagnostics in ",(0,t.jsx)(s.code,{children:"@stylable/core"})," had diagnostics code added, and were reviewed for consistency. Many diagnostics have had their severity increased to ",(0,t.jsx)(s.code,{children:"error"}),"."]}),"\n",(0,t.jsx)(s.p,{children:"We plan on starting to map out the diagnostics in this site to help users understand what they are seeing, and why it happened."}),"\n",(0,t.jsx)(s.h3,{id:"reducing-public-facing-apis",children:"Reducing public facing APIs"}),"\n",(0,t.jsx)(s.p,{children:"In the past, Stylable exposed all of its functionalities as public facing APIs. Over time, this has proven difficult to maintain and develop further, and so we have decided to limit what Stylable exposes, and to segment its APIs under a few different namespaces."}),"\n",(0,t.jsxs)(s.p,{children:["In addition, most APIs have been refactored to match our new ",(0,t.jsx)(s.a,{href:"https://github.com/wix/stylable/wiki/Programmatic-API",children:"programmatic API model"}),"."]}),"\n",(0,t.jsx)(s.h4,{id:"api-changes",children:"API changes"}),"\n",(0,t.jsx)(s.p,{children:"The following APIs have been changed:"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"StylableMeta"})," renamed ",(0,t.jsx)(s.code,{children:"rawAst"})," to ",(0,t.jsx)(s.code,{children:"sourceAst"})," and ",(0,t.jsx)(s.code,{children:"outputAst"})," to ",(0,t.jsx)(s.code,{children:"targetAst"})]}),"\n",(0,t.jsxs)(s.li,{children:["The Stylable constructor now accepts options as an object (similar to ",(0,t.jsx)(s.code,{children:"Stylable.create()"})," options)"]}),"\n"]}),"\n",(0,t.jsx)(s.p,{children:"The following APIs have been removed:"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["The ",(0,t.jsx)(s.code,{children:"Stylable.create()"})," method has been removed"]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"StylableMeta"})," removed ",(0,t.jsx)(s.code,{children:"ast"})," field"]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"StylableTransformer"})," is no longer considered public API, there relevant functionality has been moved to ",(0,t.jsx)(s.code,{children:"stylable.transform"}),", ",(0,t.jsx)(s.code,{children:"stylable.transformSelector"}),", etc."]}),"\n",(0,t.jsxs)(s.li,{children:["custom pseudo state parameter type ",(0,t.jsx)(s.code,{children:"tag"})," has been removed - can be replaced by ",(0,t.jsx)(s.code,{children:"-st-states: stateName(string)"})," (see ",(0,t.jsx)(s.a,{href:"https://github.com/wix/stylable/issues/1552#issuecomment-874559161",children:"issue"}),")"]}),"\n"]}),"\n",(0,t.jsx)(s.h4,{id:"missing-apis",children:"Missing APIs?"}),"\n",(0,t.jsxs)(s.p,{children:["If we have removed an API that you have found useful, and provided no alternative, please let us know by opening an issue over at ",(0,t.jsx)(s.a,{href:"https://github.com/wix/stylable/issues/new/choose",children:"GitHub"}),"."]}),"\n",(0,t.jsx)(s.h2,{id:"stylablecli",children:(0,t.jsx)(s.code,{children:"@stylable/cli"})}),"\n",(0,t.jsx)(s.h3,{id:"default-arguments-changed",children:"Default arguments changed"}),"\n",(0,t.jsxs)(s.p,{children:["The ",(0,t.jsx)(s.code,{children:"@stylable/cli"})," ",(0,t.jsx)(s.code,{children:"stc"})," command now has no default output defined, previously this was set to emit ",(0,t.jsx)(s.code,{children:".cjs"})," files."]}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["If you were using the ",(0,t.jsx)(s.code,{children:"stc"})," command without the ",(0,t.jsx)(s.code,{children:"--cjs"})," flag, you will need to update your code to use the new default output"]}),"\n",(0,t.jsxs)(s.li,{children:["If were explictly setting the output to not emit ",(0,t.jsx)(s.code,{children:".cjs"})," files (e.g. ",(0,t.jsx)(s.code,{children:"--no-cjs"})," or ",(0,t.jsx)(s.code,{children:"--cjs=false"}),"), you can now remove this parameter from your command"]}),"\n"]}),"\n",(0,t.jsx)(s.h3,{id:"build-index-file-and-other-outputs-simultaneously",children:"Build index file and other outputs simultaneously"}),"\n",(0,t.jsxs)(s.p,{children:["The ",(0,t.jsx)(s.code,{children:"@stylable/cli"})," ",(0,t.jsx)(s.code,{children:"stc"})," command now supports building an indexFile and other outputs (",(0,t.jsx)(s.code,{children:".js"}),", ",(0,t.jsx)(s.code,{children:".css"}),", ",(0,t.jsx)(s.code,{children:".st.css"}),", etc.) at once."]}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsx)(s.li,{children:"If you were previously running separate commands to build the index file and other outputs, you can now run a single command to build them all at once"}),"\n"]})]})}function h(e={}){const{wrapper:s}={...(0,l.R)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(r,{...e})}):r(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>o,x:()=>d});var i=n(6540);const t={},l=i.createContext(t);function o(e){const s=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function d(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),i.createElement(l.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[825],{3701:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>a,contentTitle:()=>d,default:()=>h,frontMatter:()=>o,metadata:()=>i,toc:()=>c});const i=JSON.parse('{"id":"guides/migration-v5","title":"Stylable v5","description":"The purpose of this document is to help migrate projects using Stylable to v5.","source":"@site/docs/guides/migration-v5.md","sourceDirName":"guides","slug":"/guides/migration-v5","permalink":"/docs/guides/migration-v5","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/migration-v5.md","tags":[],"version":"current","frontMatter":{"id":"migration-v5","title":"Stylable v5"},"sidebar":"Guides","previous":{"title":"Stylable v3","permalink":"/docs/guides/migration-v3"}}');var t=n(4848),l=n(8453);const o={id:"migration-v5",title:"Stylable v5"},d=void 0,a={},c=[{value:"<code>@stylable/core</code>",id:"stylablecore",level:2},{value:"Diagnostics overhaul",id:"diagnostics-overhaul",level:3},{value:"Reducing public facing APIs",id:"reducing-public-facing-apis",level:3},{value:"API changes",id:"api-changes",level:4},{value:"Missing APIs?",id:"missing-apis",level:4},{value:"<code>@stylable/cli</code>",id:"stylablecli",level:2},{value:"Default arguments changed",id:"default-arguments-changed",level:3},{value:"Build index file and other outputs simultaneously",id:"build-index-file-and-other-outputs-simultaneously",level:3}];function r(e){const s={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",ul:"ul",...(0,l.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(s.p,{children:["The purpose of this document is to help migrate projects using Stylable to ",(0,t.jsx)(s.code,{children:"v5"}),"."]}),"\n",(0,t.jsxs)(s.p,{children:["We have taken the opportunity of node dropping LTS support for ",(0,t.jsx)(s.code,{children:"v12"})," and we have decided to include a number of additional breaking changes to the ",(0,t.jsx)(s.code,{children:"v5"})," release. These changes are primarily to the programmatic API of Stylable and not to user facing features, syntax or integrations."]}),"\n",(0,t.jsxs)(s.p,{children:["You can find the plan for this major version ",(0,t.jsx)(s.a,{href:"https://github.com/wix/stylable/issues/2410",children:"here"}),"."]}),"\n",(0,t.jsx)(s.h2,{id:"stylablecore",children:(0,t.jsx)(s.code,{children:"@stylable/core"})}),"\n",(0,t.jsx)(s.h3,{id:"diagnostics-overhaul",children:"Diagnostics overhaul"}),"\n",(0,t.jsxs)(s.p,{children:["All diagnostics in ",(0,t.jsx)(s.code,{children:"@stylable/core"})," had diagnostics code added, and were reviewed for consistency. Many diagnostics have had their severity increased to ",(0,t.jsx)(s.code,{children:"error"}),"."]}),"\n",(0,t.jsx)(s.p,{children:"We plan on starting to map out the diagnostics in this site to help users understand what they are seeing, and why it happened."}),"\n",(0,t.jsx)(s.h3,{id:"reducing-public-facing-apis",children:"Reducing public facing APIs"}),"\n",(0,t.jsx)(s.p,{children:"In the past, Stylable exposed all of its functionalities as public facing APIs. Over time, this has proven difficult to maintain and develop further, and so we have decided to limit what Stylable exposes, and to segment its APIs under a few different namespaces."}),"\n",(0,t.jsxs)(s.p,{children:["In addition, most APIs have been refactored to match our new ",(0,t.jsx)(s.a,{href:"https://github.com/wix/stylable/wiki/Programmatic-API",children:"programmatic API model"}),"."]}),"\n",(0,t.jsx)(s.h4,{id:"api-changes",children:"API changes"}),"\n",(0,t.jsx)(s.p,{children:"The following APIs have been changed:"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"StylableMeta"})," renamed ",(0,t.jsx)(s.code,{children:"rawAst"})," to ",(0,t.jsx)(s.code,{children:"sourceAst"})," and ",(0,t.jsx)(s.code,{children:"outputAst"})," to ",(0,t.jsx)(s.code,{children:"targetAst"})]}),"\n",(0,t.jsxs)(s.li,{children:["The Stylable constructor now accepts options as an object (similar to ",(0,t.jsx)(s.code,{children:"Stylable.create()"})," options)"]}),"\n"]}),"\n",(0,t.jsx)(s.p,{children:"The following APIs have been removed:"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["The ",(0,t.jsx)(s.code,{children:"Stylable.create()"})," method has been removed"]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"StylableMeta"})," removed ",(0,t.jsx)(s.code,{children:"ast"})," field"]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:"StylableTransformer"})," is no longer considered public API, there relevant functionality has been moved to ",(0,t.jsx)(s.code,{children:"stylable.transform"}),", ",(0,t.jsx)(s.code,{children:"stylable.transformSelector"}),", etc."]}),"\n",(0,t.jsxs)(s.li,{children:["custom pseudo state parameter type ",(0,t.jsx)(s.code,{children:"tag"})," has been removed - can be replaced by ",(0,t.jsx)(s.code,{children:"-st-states: stateName(string)"})," (see ",(0,t.jsx)(s.a,{href:"https://github.com/wix/stylable/issues/1552#issuecomment-874559161",children:"issue"}),")"]}),"\n"]}),"\n",(0,t.jsx)(s.h4,{id:"missing-apis",children:"Missing APIs?"}),"\n",(0,t.jsxs)(s.p,{children:["If we have removed an API that you have found useful, and provided no alternative, please let us know by opening an issue over at ",(0,t.jsx)(s.a,{href:"https://github.com/wix/stylable/issues/new/choose",children:"GitHub"}),"."]}),"\n",(0,t.jsx)(s.h2,{id:"stylablecli",children:(0,t.jsx)(s.code,{children:"@stylable/cli"})}),"\n",(0,t.jsx)(s.h3,{id:"default-arguments-changed",children:"Default arguments changed"}),"\n",(0,t.jsxs)(s.p,{children:["The ",(0,t.jsx)(s.code,{children:"@stylable/cli"})," ",(0,t.jsx)(s.code,{children:"stc"})," command now has no default output defined, previously this was set to emit ",(0,t.jsx)(s.code,{children:".cjs"})," files."]}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["If you were using the ",(0,t.jsx)(s.code,{children:"stc"})," command without the ",(0,t.jsx)(s.code,{children:"--cjs"})," flag, you will need to update your code to use the new default output"]}),"\n",(0,t.jsxs)(s.li,{children:["If were explictly setting the output to not emit ",(0,t.jsx)(s.code,{children:".cjs"})," files (e.g. ",(0,t.jsx)(s.code,{children:"--no-cjs"})," or ",(0,t.jsx)(s.code,{children:"--cjs=false"}),"), you can now remove this parameter from your command"]}),"\n"]}),"\n",(0,t.jsx)(s.h3,{id:"build-index-file-and-other-outputs-simultaneously",children:"Build index file and other outputs simultaneously"}),"\n",(0,t.jsxs)(s.p,{children:["The ",(0,t.jsx)(s.code,{children:"@stylable/cli"})," ",(0,t.jsx)(s.code,{children:"stc"})," command now supports building an indexFile and other outputs (",(0,t.jsx)(s.code,{children:".js"}),", ",(0,t.jsx)(s.code,{children:".css"}),", ",(0,t.jsx)(s.code,{children:".st.css"}),", etc.) at once."]}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsx)(s.li,{children:"If you were previously running separate commands to build the index file and other outputs, you can now run a single command to build them all at once"}),"\n"]})]})}function h(e={}){const{wrapper:s}={...(0,l.R)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(r,{...e})}):r(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>o,x:()=>d});var i=n(6540);const t={},l=i.createContext(t);function o(e){const s=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function d(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),i.createElement(l.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/26a8bbe9.ac4aa30b.js b/assets/js/26a8bbe9.1a9976db.js similarity index 99% rename from assets/js/26a8bbe9.ac4aa30b.js rename to assets/js/26a8bbe9.1a9976db.js index 27fc46fd..60b0b396 100644 --- a/assets/js/26a8bbe9.ac4aa30b.js +++ b/assets/js/26a8bbe9.1a9976db.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[5666],{6042:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>r,contentTitle:()=>s,default:()=>d,frontMatter:()=>l,metadata:()=>n,toc:()=>h});var n=o(5958),a=o(4848),i=o(8453);const l={title:"Welcome to Stylable v5",description:"Launching Stylable Version 5",slug:"welcome-to-stylable-v5",authors:[{name:"Barak Igal",title:"Co-creator of Stylable",url:"https://github.com/barak007",image_url:"https://github.com/barak007.png"},{name:"Ido Rosenthal",title:"Co-creator of Stylable",url:"https://twitter.com/idoros",image_url:"https://github.com/idoros.png"},{name:"Tom Raviv",title:"Co-creator of Stylable",url:"https://twitter.com/RavivTom",image_url:"https://github.com/tomrav.png"}],tags:["intro","release"],image:"/img/synthwave-space-logo.png",hide_table_of_contents:!1},s=void 0,r={authorsImageUrls:[void 0,void 0,void 0]},h=[{value:"First time hearing about Stylable?",id:"first-time-hearing-about-stylable",level:2},{value:"What went on behind the scenes?",id:"what-went-on-behind-the-scenes",level:2},{value:"What have we been up to recently?",id:"what-have-we-been-up-to-recently",level:2},{value:"Additional highlights",id:"additional-highlights",level:3},{value:"What's next for Stylable?",id:"whats-next-for-stylable",level:2}];function c(e){const t={a:"a",admonition:"admonition",em:"em",h2:"h2",h3:"h3",li:"li",p:"p",ul:"ul",...(0,i.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.h2,{id:"first-time-hearing-about-stylable",children:"First time hearing about Stylable?"}),"\n",(0,a.jsx)(t.p,{children:"No worries! Stylable is a tool that empowers you to create safe, reusable style APIs for your components. It's a superset of CSS that adds a type system to it, providing type safety, and powerful language capabilities."}),"\n",(0,a.jsxs)(t.p,{children:["Want to learn more? We recently started writing a ",(0,a.jsx)(t.a,{href:"/docs/guides/handbook/intro",children:"new handbook"})," to help get you up to speed, and more content is on its way over the coming weeks."]}),"\n",(0,a.jsx)(t.h2,{id:"what-went-on-behind-the-scenes",children:"What went on behind the scenes?"}),"\n",(0,a.jsx)(t.p,{children:"Over the last couple of years, we focused on developing Stylable internally in Wix, building it into an entire tooling ecosystem."}),"\n",(0,a.jsx)(t.p,{children:"We integrated Stylable across Wix.com, both for internal tools and user-facing components. We stress-tested the project, making sure it meets our requirements. Today, Stylable helps power over 50 million user websites, and is the de facto styling solution for new projects and new user-facing components."}),"\n",(0,a.jsx)(t.h2,{id:"what-have-we-been-up-to-recently",children:"What have we been up to recently?"}),"\n",(0,a.jsxs)(t.p,{children:["We recently released ",(0,a.jsx)(t.a,{href:"https://github.com/wix/stylable/releases/tag/v5.0.0",children:"Stylable v5"}),", and we're excited to share it with the community."]}),"\n",(0,a.jsx)(t.p,{children:"Version 5 includes considerable refactoring and clean up of the Stylable core package to make it more robust, and its programmatic API more accessible."}),"\n",(0,a.jsxs)(t.p,{children:["If you encounter any bugs or issues, please open an issue on our ",(0,a.jsx)(t.a,{href:"https://github.com/wix/stylable/issues",children:"GitHub repository"}),"."]}),"\n",(0,a.jsx)(t.h3,{id:"additional-highlights",children:"Additional highlights"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["We added a ",(0,a.jsx)(t.a,{href:"https://stylable.io/playground",children:"new playground"})," to help developers learn and experiment with Stylable."]}),"\n",(0,a.jsx)(t.li,{children:"With monorepo projects becoming more and more common, we've made (and continue to make) improvements to how Stylable and our CLI handle them."}),"\n",(0,a.jsx)(t.li,{children:"Lastly, we've been focused on refining and expanding our documentation, adding new guides, refactoring our API reference to a standard format, and improving the overall reading experience."}),"\n"]}),"\n",(0,a.jsx)(t.h2,{id:"whats-next-for-stylable",children:"What's next for Stylable?"}),"\n",(0,a.jsx)(t.p,{children:"Many new features are planned for Stylable, including the expansion of the type system to cover even more of CSS, and to create new integrations for emerging tools and technologies."}),"\n",(0,a.jsx)(t.p,{children:"CSS as a language has been rapidly progressing recently, with functionality increasing as the language expands. We're following the language closely as its specs progress, and we'll focus our efforts so that Stylable continues to offer the best possible experience over CSS at any time."}),"\n",(0,a.jsx)(t.p,{children:"Although it's always been open-source, we feel like this is the time for us to introduce Stylable back to the web development community, and to hopefully show people how Stylable can make their development experience better. In the coming weeks, we'll be expanding our guides, examples, and documentation to make it even easier to onboard new users."}),"\n",(0,a.jsx)(t.admonition,{title:"join the community",type:"tip",children:(0,a.jsxs)(t.p,{children:["Want to be a part of the discussion? See our ongoing development on ",(0,a.jsx)(t.a,{href:"https://github.com/wix/stylable",children:"GitHub"}),", follow us on ",(0,a.jsx)(t.a,{href:"https://twitter.com/stylableio",children:"Twitter"}),", and join the ",(0,a.jsx)(t.a,{href:"https://discord.gg/C5ZhENSbV7",children:"Discord"})," where we're always up for a chat about styling."]})}),"\n",(0,a.jsx)(t.p,{children:"We hope you'll join us on this journey, and we're looking forward to hearing your feedback."}),"\n",(0,a.jsxs)(t.p,{children:["- ",(0,a.jsx)(t.em,{children:"The Stylable team"})]})]})}function d(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(c,{...e})}):c(e)}},8453:(e,t,o)=>{o.d(t,{R:()=>l,x:()=>s});var n=o(6540);const a={},i=n.createContext(a);function l(e){const t=n.useContext(i);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:l(e.components),n.createElement(i.Provider,{value:t},e.children)}},5958:e=>{e.exports=JSON.parse('{"permalink":"/blog/welcome-to-stylable-v5","editUrl":"https://github.com/wixplosives/stylable.io/edit/master/blog/2022-08-04-welcome-to-stylable-v5.md","source":"@site/blog/2022-08-04-welcome-to-stylable-v5.md","title":"Welcome to Stylable v5","description":"Launching Stylable Version 5","date":"2022-08-04T00:00:00.000Z","tags":[{"inline":true,"label":"intro","permalink":"/blog/tags/intro"},{"inline":true,"label":"release","permalink":"/blog/tags/release"}],"readingTime":2.355,"hasTruncateMarker":true,"authors":[{"name":"Barak Igal","title":"Co-creator of Stylable","url":"https://github.com/barak007","image_url":"https://github.com/barak007.png","imageURL":"https://github.com/barak007.png","socials":{},"key":null,"page":null},{"name":"Ido Rosenthal","title":"Co-creator of Stylable","url":"https://twitter.com/idoros","image_url":"https://github.com/idoros.png","imageURL":"https://github.com/idoros.png","socials":{},"key":null,"page":null},{"name":"Tom Raviv","title":"Co-creator of Stylable","url":"https://twitter.com/RavivTom","image_url":"https://github.com/tomrav.png","imageURL":"https://github.com/tomrav.png","socials":{},"key":null,"page":null}],"frontMatter":{"title":"Welcome to Stylable v5","description":"Launching Stylable Version 5","slug":"welcome-to-stylable-v5","authors":[{"name":"Barak Igal","title":"Co-creator of Stylable","url":"https://github.com/barak007","image_url":"https://github.com/barak007.png","imageURL":"https://github.com/barak007.png"},{"name":"Ido Rosenthal","title":"Co-creator of Stylable","url":"https://twitter.com/idoros","image_url":"https://github.com/idoros.png","imageURL":"https://github.com/idoros.png"},{"name":"Tom Raviv","title":"Co-creator of Stylable","url":"https://twitter.com/RavivTom","image_url":"https://github.com/tomrav.png","imageURL":"https://github.com/tomrav.png"}],"tags":["intro","release"],"image":"/img/synthwave-space-logo.png","hide_table_of_contents":false},"unlisted":false}')}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[5666],{8090:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>r,contentTitle:()=>s,default:()=>d,frontMatter:()=>l,metadata:()=>n,toc:()=>h});var n=o(5958),a=o(4848),i=o(8453);const l={title:"Welcome to Stylable v5",description:"Launching Stylable Version 5",slug:"welcome-to-stylable-v5",authors:[{name:"Barak Igal",title:"Co-creator of Stylable",url:"https://github.com/barak007",image_url:"https://github.com/barak007.png"},{name:"Ido Rosenthal",title:"Co-creator of Stylable",url:"https://twitter.com/idoros",image_url:"https://github.com/idoros.png"},{name:"Tom Raviv",title:"Co-creator of Stylable",url:"https://twitter.com/RavivTom",image_url:"https://github.com/tomrav.png"}],tags:["intro","release"],image:"/img/synthwave-space-logo.png",hide_table_of_contents:!1},s=void 0,r={authorsImageUrls:[void 0,void 0,void 0]},h=[{value:"First time hearing about Stylable?",id:"first-time-hearing-about-stylable",level:2},{value:"What went on behind the scenes?",id:"what-went-on-behind-the-scenes",level:2},{value:"What have we been up to recently?",id:"what-have-we-been-up-to-recently",level:2},{value:"Additional highlights",id:"additional-highlights",level:3},{value:"What's next for Stylable?",id:"whats-next-for-stylable",level:2}];function c(e){const t={a:"a",admonition:"admonition",em:"em",h2:"h2",h3:"h3",li:"li",p:"p",ul:"ul",...(0,i.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.h2,{id:"first-time-hearing-about-stylable",children:"First time hearing about Stylable?"}),"\n",(0,a.jsx)(t.p,{children:"No worries! Stylable is a tool that empowers you to create safe, reusable style APIs for your components. It's a superset of CSS that adds a type system to it, providing type safety, and powerful language capabilities."}),"\n",(0,a.jsxs)(t.p,{children:["Want to learn more? We recently started writing a ",(0,a.jsx)(t.a,{href:"/docs/guides/handbook/intro",children:"new handbook"})," to help get you up to speed, and more content is on its way over the coming weeks."]}),"\n",(0,a.jsx)(t.h2,{id:"what-went-on-behind-the-scenes",children:"What went on behind the scenes?"}),"\n",(0,a.jsx)(t.p,{children:"Over the last couple of years, we focused on developing Stylable internally in Wix, building it into an entire tooling ecosystem."}),"\n",(0,a.jsx)(t.p,{children:"We integrated Stylable across Wix.com, both for internal tools and user-facing components. We stress-tested the project, making sure it meets our requirements. Today, Stylable helps power over 50 million user websites, and is the de facto styling solution for new projects and new user-facing components."}),"\n",(0,a.jsx)(t.h2,{id:"what-have-we-been-up-to-recently",children:"What have we been up to recently?"}),"\n",(0,a.jsxs)(t.p,{children:["We recently released ",(0,a.jsx)(t.a,{href:"https://github.com/wix/stylable/releases/tag/v5.0.0",children:"Stylable v5"}),", and we're excited to share it with the community."]}),"\n",(0,a.jsx)(t.p,{children:"Version 5 includes considerable refactoring and clean up of the Stylable core package to make it more robust, and its programmatic API more accessible."}),"\n",(0,a.jsxs)(t.p,{children:["If you encounter any bugs or issues, please open an issue on our ",(0,a.jsx)(t.a,{href:"https://github.com/wix/stylable/issues",children:"GitHub repository"}),"."]}),"\n",(0,a.jsx)(t.h3,{id:"additional-highlights",children:"Additional highlights"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["We added a ",(0,a.jsx)(t.a,{href:"https://stylable.io/playground",children:"new playground"})," to help developers learn and experiment with Stylable."]}),"\n",(0,a.jsx)(t.li,{children:"With monorepo projects becoming more and more common, we've made (and continue to make) improvements to how Stylable and our CLI handle them."}),"\n",(0,a.jsx)(t.li,{children:"Lastly, we've been focused on refining and expanding our documentation, adding new guides, refactoring our API reference to a standard format, and improving the overall reading experience."}),"\n"]}),"\n",(0,a.jsx)(t.h2,{id:"whats-next-for-stylable",children:"What's next for Stylable?"}),"\n",(0,a.jsx)(t.p,{children:"Many new features are planned for Stylable, including the expansion of the type system to cover even more of CSS, and to create new integrations for emerging tools and technologies."}),"\n",(0,a.jsx)(t.p,{children:"CSS as a language has been rapidly progressing recently, with functionality increasing as the language expands. We're following the language closely as its specs progress, and we'll focus our efforts so that Stylable continues to offer the best possible experience over CSS at any time."}),"\n",(0,a.jsx)(t.p,{children:"Although it's always been open-source, we feel like this is the time for us to introduce Stylable back to the web development community, and to hopefully show people how Stylable can make their development experience better. In the coming weeks, we'll be expanding our guides, examples, and documentation to make it even easier to onboard new users."}),"\n",(0,a.jsx)(t.admonition,{title:"join the community",type:"tip",children:(0,a.jsxs)(t.p,{children:["Want to be a part of the discussion? See our ongoing development on ",(0,a.jsx)(t.a,{href:"https://github.com/wix/stylable",children:"GitHub"}),", follow us on ",(0,a.jsx)(t.a,{href:"https://twitter.com/stylableio",children:"Twitter"}),", and join the ",(0,a.jsx)(t.a,{href:"https://discord.gg/C5ZhENSbV7",children:"Discord"})," where we're always up for a chat about styling."]})}),"\n",(0,a.jsx)(t.p,{children:"We hope you'll join us on this journey, and we're looking forward to hearing your feedback."}),"\n",(0,a.jsxs)(t.p,{children:["- ",(0,a.jsx)(t.em,{children:"The Stylable team"})]})]})}function d(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(c,{...e})}):c(e)}},8453:(e,t,o)=>{o.d(t,{R:()=>l,x:()=>s});var n=o(6540);const a={},i=n.createContext(a);function l(e){const t=n.useContext(i);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:l(e.components),n.createElement(i.Provider,{value:t},e.children)}},5958:e=>{e.exports=JSON.parse('{"permalink":"/blog/welcome-to-stylable-v5","editUrl":"https://github.com/wixplosives/stylable.io/edit/master/blog/2022-08-04-welcome-to-stylable-v5.md","source":"@site/blog/2022-08-04-welcome-to-stylable-v5.md","title":"Welcome to Stylable v5","description":"Launching Stylable Version 5","date":"2022-08-04T00:00:00.000Z","tags":[{"inline":true,"label":"intro","permalink":"/blog/tags/intro"},{"inline":true,"label":"release","permalink":"/blog/tags/release"}],"readingTime":2.355,"hasTruncateMarker":true,"authors":[{"name":"Barak Igal","title":"Co-creator of Stylable","url":"https://github.com/barak007","image_url":"https://github.com/barak007.png","imageURL":"https://github.com/barak007.png","socials":{},"key":null,"page":null},{"name":"Ido Rosenthal","title":"Co-creator of Stylable","url":"https://twitter.com/idoros","image_url":"https://github.com/idoros.png","imageURL":"https://github.com/idoros.png","socials":{},"key":null,"page":null},{"name":"Tom Raviv","title":"Co-creator of Stylable","url":"https://twitter.com/RavivTom","image_url":"https://github.com/tomrav.png","imageURL":"https://github.com/tomrav.png","socials":{},"key":null,"page":null}],"frontMatter":{"title":"Welcome to Stylable v5","description":"Launching Stylable Version 5","slug":"welcome-to-stylable-v5","authors":[{"name":"Barak Igal","title":"Co-creator of Stylable","url":"https://github.com/barak007","image_url":"https://github.com/barak007.png","imageURL":"https://github.com/barak007.png"},{"name":"Ido Rosenthal","title":"Co-creator of Stylable","url":"https://twitter.com/idoros","image_url":"https://github.com/idoros.png","imageURL":"https://github.com/idoros.png"},{"name":"Tom Raviv","title":"Co-creator of Stylable","url":"https://twitter.com/RavivTom","image_url":"https://github.com/tomrav.png","imageURL":"https://github.com/tomrav.png"}],"tags":["intro","release"],"image":"/img/synthwave-space-logo.png","hide_table_of_contents":false},"unlisted":false}')}}]); \ No newline at end of file diff --git a/assets/js/2ce01146.6918bacc.js b/assets/js/2ce01146.3ea843c5.js similarity index 98% rename from assets/js/2ce01146.6918bacc.js rename to assets/js/2ce01146.3ea843c5.js index f2171f07..20b85df7 100644 --- a/assets/js/2ce01146.6918bacc.js +++ b/assets/js/2ce01146.3ea843c5.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[9169],{3980:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>i,default:()=>u,frontMatter:()=>o,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"references/formatters","title":"Formatters","description":"Formatters are functions that return a single CSS declaration value. They can receive arguments, process them and return the value.","source":"@site/docs/references/formatters.md","sourceDirName":"references","slug":"/references/formatters","permalink":"/docs/references/formatters","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/formatters.md","tags":[],"version":"current","frontMatter":{"id":"formatters","title":"Formatters"},"sidebar":"Specification Reference","previous":{"title":"Scope","permalink":"/docs/references/st-scope"},"next":{"title":"Mixins","permalink":"/docs/references/mixins"}}');var s=t(4848),a=t(8453);const o={id:"formatters",title:"Formatters"},i=void 0,c={},d=[{value:"Formatters with variables",id:"formatters-with-variables",level:2},{value:"Nested formatters",id:"nested-formatters",level:2}];function l(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.p,{children:"Formatters are functions that return a single CSS declaration value. They can receive arguments, process them and return the value."}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsxs)(n.p,{children:["Currently, any argument passed through to a formatter is of type ",(0,s.jsx)(n.code,{children:"string"}),". We are in the process of adding support for more complex types."]})}),"\n",(0,s.jsxs)(n.p,{children:["For example a ",(0,s.jsx)(n.code,{children:"calc-font-size"})," formatter can return a different value for the font size depending on the provided argument."]}),"\n",(0,s.jsx)(n.admonition,{type:"tip",children:(0,s.jsxs)(n.p,{children:["If you need to return multiple declaration values, we recommend using ",(0,s.jsx)(n.strong,{children:"Stylable"})," ",(0,s.jsx)(n.a,{href:"/docs/references/mixins",children:"mixins"}),"."]})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"/* ./calc-font-size.js */\nmodule.exports = function (baseSize, modifier) {\n switch (modifier) {\n case 'header':\n return `${Number(baseSize) * 2}px`;\n case 'aside':\n return `${Number(baseSize) * 0.75}px`;\n default:\n return baseSize + 'px';\n }\n};\n"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:'@st-import calcFontSize from "./calc-font-size";\n\n.header {\n font-size: calcFontSize(16, header);\n}\n\n.form {\n font-size: calcFontSize(16, body);\n}\n'})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* CSS output */\n.header {\n font-size: 32px;\n}\n\n.form {\n font-size: 16px;\n}\n"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* CSS output */\n.header {\n font-size: 32px;\n}\n\n.form {\n font-size: 16px;\n}\n"})}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsx)(n.p,{children:"Currently you cannot use formatters inside a native URL function. As a suggested workaround, you can return a URL function from a formattter."})}),"\n",(0,s.jsx)(n.h2,{id:"formatters-with-variables",children:"Formatters with variables"}),"\n",(0,s.jsxs)(n.p,{children:["When the formatter is imported into the CSS, it can also be used with a ",(0,s.jsx)(n.a,{href:"/docs/references/st-variables",children:"variable"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["In this example the CSS imports the same formatter as the previous example, ",(0,s.jsx)(n.code,{children:"calc-font-size"}),", but the variable ",(0,s.jsx)(n.code,{children:"baseFontSize"})," is added to the calculation."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:'@st-import calcFontSize from "./calc-font-size";\n\n:vars {\n baseFontSize: 12;\n}\n\n.header {\n font-size: calcFontSize(value(baseFontSize), header);\n}\n\n.form {\n font-size: calcFontSize(value(baseFontSize), body);\n}\n'})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* CSS output */\n.header {\n font-size: 24px;\n}\n.form {\n font-size: 12px;\n}\n"})}),"\n",(0,s.jsx)(n.h2,{id:"nested-formatters",children:"Nested formatters"}),"\n",(0,s.jsx)(n.p,{children:"You can also nest formatters to provide functions that are modular, composable and reusable."}),"\n",(0,s.jsxs)(n.p,{children:["In this example the formatter ",(0,s.jsx)(n.code,{children:"divBy2"})," is nested in the ",(0,s.jsx)(n.code,{children:"round"})," formatter. Both are imported into the CSS file and the output value is calculated from both. The formatters expose to the CSS mathematical calculations that are used in the JavaScript functions."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"/* ./math.js */\nmodule.export = {\n divBy2: function (num) {\n return Number(Number(num) / 2);\n },\n round: function (num) {\n return Math.round(Number(num));\n },\n};\n"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:'@st-import [divBy2, round] from "./math";\n\n:vars {\n baseSize: 17px;\n}\n\n.header {\n font-size: round(divBy2(value(baseSize))) px;\n}\n'})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* CSS output */\n.header {\n font-size: 9px;\n}\n"})})]})}function u(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>i});var r=t(6540);const s={},a=r.createContext(s);function o(e){const n=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[9169],{7214:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>i,default:()=>u,frontMatter:()=>o,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"references/formatters","title":"Formatters","description":"Formatters are functions that return a single CSS declaration value. They can receive arguments, process them and return the value.","source":"@site/docs/references/formatters.md","sourceDirName":"references","slug":"/references/formatters","permalink":"/docs/references/formatters","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/formatters.md","tags":[],"version":"current","frontMatter":{"id":"formatters","title":"Formatters"},"sidebar":"Specification Reference","previous":{"title":"Scope","permalink":"/docs/references/st-scope"},"next":{"title":"Mixins","permalink":"/docs/references/mixins"}}');var s=t(4848),a=t(8453);const o={id:"formatters",title:"Formatters"},i=void 0,c={},d=[{value:"Formatters with variables",id:"formatters-with-variables",level:2},{value:"Nested formatters",id:"nested-formatters",level:2}];function l(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.p,{children:"Formatters are functions that return a single CSS declaration value. They can receive arguments, process them and return the value."}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsxs)(n.p,{children:["Currently, any argument passed through to a formatter is of type ",(0,s.jsx)(n.code,{children:"string"}),". We are in the process of adding support for more complex types."]})}),"\n",(0,s.jsxs)(n.p,{children:["For example a ",(0,s.jsx)(n.code,{children:"calc-font-size"})," formatter can return a different value for the font size depending on the provided argument."]}),"\n",(0,s.jsx)(n.admonition,{type:"tip",children:(0,s.jsxs)(n.p,{children:["If you need to return multiple declaration values, we recommend using ",(0,s.jsx)(n.strong,{children:"Stylable"})," ",(0,s.jsx)(n.a,{href:"/docs/references/mixins",children:"mixins"}),"."]})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"/* ./calc-font-size.js */\nmodule.exports = function (baseSize, modifier) {\n switch (modifier) {\n case 'header':\n return `${Number(baseSize) * 2}px`;\n case 'aside':\n return `${Number(baseSize) * 0.75}px`;\n default:\n return baseSize + 'px';\n }\n};\n"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:'@st-import calcFontSize from "./calc-font-size";\n\n.header {\n font-size: calcFontSize(16, header);\n}\n\n.form {\n font-size: calcFontSize(16, body);\n}\n'})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* CSS output */\n.header {\n font-size: 32px;\n}\n\n.form {\n font-size: 16px;\n}\n"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* CSS output */\n.header {\n font-size: 32px;\n}\n\n.form {\n font-size: 16px;\n}\n"})}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsx)(n.p,{children:"Currently you cannot use formatters inside a native URL function. As a suggested workaround, you can return a URL function from a formattter."})}),"\n",(0,s.jsx)(n.h2,{id:"formatters-with-variables",children:"Formatters with variables"}),"\n",(0,s.jsxs)(n.p,{children:["When the formatter is imported into the CSS, it can also be used with a ",(0,s.jsx)(n.a,{href:"/docs/references/st-variables",children:"variable"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["In this example the CSS imports the same formatter as the previous example, ",(0,s.jsx)(n.code,{children:"calc-font-size"}),", but the variable ",(0,s.jsx)(n.code,{children:"baseFontSize"})," is added to the calculation."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:'@st-import calcFontSize from "./calc-font-size";\n\n:vars {\n baseFontSize: 12;\n}\n\n.header {\n font-size: calcFontSize(value(baseFontSize), header);\n}\n\n.form {\n font-size: calcFontSize(value(baseFontSize), body);\n}\n'})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* CSS output */\n.header {\n font-size: 24px;\n}\n.form {\n font-size: 12px;\n}\n"})}),"\n",(0,s.jsx)(n.h2,{id:"nested-formatters",children:"Nested formatters"}),"\n",(0,s.jsx)(n.p,{children:"You can also nest formatters to provide functions that are modular, composable and reusable."}),"\n",(0,s.jsxs)(n.p,{children:["In this example the formatter ",(0,s.jsx)(n.code,{children:"divBy2"})," is nested in the ",(0,s.jsx)(n.code,{children:"round"})," formatter. Both are imported into the CSS file and the output value is calculated from both. The formatters expose to the CSS mathematical calculations that are used in the JavaScript functions."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"/* ./math.js */\nmodule.export = {\n divBy2: function (num) {\n return Number(Number(num) / 2);\n },\n round: function (num) {\n return Math.round(Number(num));\n },\n};\n"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:'@st-import [divBy2, round] from "./math";\n\n:vars {\n baseSize: 17px;\n}\n\n.header {\n font-size: round(divBy2(value(baseSize))) px;\n}\n'})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* CSS output */\n.header {\n font-size: 9px;\n}\n"})})]})}function u(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>i});var r=t(6540);const s={},a=r.createContext(s);function o(e){const n=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/2de44985.33640f61.js b/assets/js/2de44985.be3847f0.js similarity index 99% rename from assets/js/2de44985.33640f61.js rename to assets/js/2de44985.be3847f0.js index e627f69a..a521b0b5 100644 --- a/assets/js/2de44985.33640f61.js +++ b/assets/js/2de44985.be3847f0.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[7678],{8761:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>r,contentTitle:()=>a,default:()=>p,frontMatter:()=>o,metadata:()=>t,toc:()=>d});const t=JSON.parse('{"id":"guides/migration-v3","title":"Stylable v3","description":"This guide is intended to help migrate Stylable version 1 to Stylable version 2 or 3.","source":"@site/docs/guides/migration-v3.md","sourceDirName":"guides","slug":"/guides/migration-v3","permalink":"/docs/guides/migration-v3","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/migration-v3.md","tags":[],"version":"current","frontMatter":{"id":"migration-v3","title":"Stylable v3"},"sidebar":"Guides","previous":{"title":"Server Side Rendering","permalink":"/docs/guides/ssr"},"next":{"title":"Stylable v5","permalink":"/docs/guides/migration-v5"}}');var i=n(4848),l=n(8453);const o={id:"migration-v3",title:"Stylable v3"},a="Suggested steps of migration",r={},d=[{value:"Update dependencies",id:"update-dependencies",level:2},{value:"Update <code>.st.css</code> file imports",id:"update-stcss-file-imports",level:2},{value:"CSS custom properties",id:"css-custom-properties",level:3},{value:"Update usage in React components",id:"update-usage-in-react-components",level:2},{value:"Update tests",id:"update-tests",level:2}];function c(e){const s={a:"a",admonition:"admonition",br:"br",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,l.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.p,{children:"This guide is intended to help migrate Stylable version 1 to Stylable version 2 or 3.\nIt is mainly geared towards Stylable integration in React projects."}),"\n",(0,i.jsx)(s.header,{children:(0,i.jsx)(s.h1,{id:"suggested-steps-of-migration",children:"Suggested steps of migration"})}),"\n",(0,i.jsx)(s.p,{children:"Follow these steps for a smooth transition. Each step is explained in\nmore detail below."}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsx)(s.li,{children:"Update dependencies"}),"\n",(0,i.jsx)(s.li,{children:"Update global typings"}),"\n",(0,i.jsxs)(s.li,{children:["Update ",(0,i.jsx)(s.code,{children:".st.css"})," file imports"]}),"\n",(0,i.jsx)(s.li,{children:"Update usage in React components"}),"\n",(0,i.jsx)(s.li,{children:"Update tests"}),"\n"]}),"\n",(0,i.jsx)(s.h2,{id:"update-dependencies",children:"Update dependencies"}),"\n",(0,i.jsxs)(s.p,{children:["Ensure you have v3 Stylable dependencies available. You may need to\nupdate your ",(0,i.jsx)(s.code,{children:"package.json"})," or ensure that other dependencies bring you\nv3 Stylable:"]}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.code,{children:"@stylable/cli"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.code,{children:"@stylable/core"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.code,{children:"@stylable/runtime"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.code,{children:"@stylable/node"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.code,{children:"@stylable/webpack-plugin"})}),"\n"]}),"\n",(0,i.jsx)(s.admonition,{type:"tip",children:(0,i.jsxs)(s.p,{children:["all Stylable packages in v3 are scoped under the ",(0,i.jsx)(s.code,{children:"@stylable"})," namespace.\nif you have dependencies like ",(0,i.jsx)(s.code,{children:"stylable"})," (without scope), it is the old one and should be changed to scoped version."]})}),"\n",(0,i.jsx)(s.h1,{id:"update-global-typings",children:"Update global typings"}),"\n",(0,i.jsxs)(s.p,{children:["If TypeScript is used in the project, we recommend updating the global typings\n(usually ",(0,i.jsx)(s.code,{children:"globals.d.ts"}),") with an ",(0,i.jsx)(s.code,{children:".st.css"})," module declaration:"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",children:"declare module '*.st.css' {\n const stylesheet: import('@stylable/runtime').RuntimeStylesheet;\n export = stylesheet;\n}\n"})}),"\n",(0,i.jsx)(s.p,{children:"This way the TypeScript compiler will help refactor most of the\nrequired changes and provide typings for other Stylable use cases."}),"\n",(0,i.jsxs)(s.h2,{id:"update-stcss-file-imports",children:["Update ",(0,i.jsx)(s.code,{children:".st.css"})," file imports"]}),"\n",(0,i.jsxs)(s.p,{children:["Prior to v2 all ",(0,i.jsx)(s.code,{children:".st.css"})," files would export a default ",(0,i.jsx)(s.code,{children:"style"})," function. In v2\nthis has changed: ",(0,i.jsx)(s.code,{children:".st.css"})," files now export a named object."]}),"\n",(0,i.jsx)(s.p,{children:"List of all exported keys:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"import {\n st, // alias to `style`\n classes,\n cssStates,\n keyframes,\n namespace,\n stVars,\n style,\n vars,\n} from './style.st.css';\n"})}),"\n",(0,i.jsxs)(s.p,{children:["This means that all imports of ",(0,i.jsx)(s.code,{children:".st.css"})," files have to be changed, for example:"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-diff",children:"-import style from './Component.st.css';\n+import { st, classes, /* ... */ } from './Component.st.css';\n"})}),"\n",(0,i.jsxs)(s.p,{children:["However, most often ",(0,i.jsx)(s.code,{children:"{ st, classes }"})," is enough:"]}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.code,{children:"import { st, classes } from './Component.st.css';"})}),"\n",(0,i.jsx)(s.admonition,{type:"tip",children:(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.code,{children:".st.css"})," files export a ",(0,i.jsx)(s.code,{children:"style"})," function and an alias to it -\n",(0,i.jsx)(s.code,{children:"st"}),". It is recommended to use ",(0,i.jsx)(s.code,{children:"st"})," in order to avoid name clashing\nwith other variables (for example, some other inline style)."]})}),"\n",(0,i.jsx)(s.h3,{id:"css-custom-properties",children:"CSS custom properties"}),"\n",(0,i.jsxs)(s.p,{children:["Stylable now localizes CSS Custom Properties. This means that any usage of Custom Proprties (e.g. ",(0,i.jsx)(s.code,{children:"--prop"}),") should now be incorparated in the component code."]}),"\n",(0,i.jsxs)(s.p,{children:["See the docs about ",(0,i.jsx)(s.a,{href:"https://stylable.io/docs/references/css-vars",children:"CSS custom properties"})," for usage examples."]}),"\n",(0,i.jsx)(s.h2,{id:"update-usage-in-react-components",children:"Update usage in React components"}),"\n",(0,i.jsxs)(s.p,{children:["Once ",(0,i.jsx)(s.code,{children:".st.css"})," imports are updated, React components should be updated too:"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-diff",children:"-<div {...style('root', states, props)} />\n+<div className={st(classes.root, states, props.className)} />\n"})}),"\n",(0,i.jsx)(s.p,{children:"There are subtle but very important nuances in this change."}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Stylable v1 used spread pattern. It would take the output of ",(0,i.jsx)(s.code,{children:"style('root', states, this.props)"})," function and spread it on component."]}),"\n",(0,i.jsx)(s.p,{children:"This way one or more props would be applied to the component. Thus, code that looks like this:"}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-jsx",children:'<div\n {...style(\n "root",\n {},\n { className: "additional-class", "data-hook": "test" }\n )}\n/>\n'})}),"\n",(0,i.jsx)(s.p,{children:"once evaluated, would behave like this:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-jsx",children:'<div className="root additional-class" data-hook="test" />\n'})}),"\n",(0,i.jsx)(s.p,{children:"Stylable v2 and v3 usage is like so:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"className={st(classes.root, states, this.props.className)}\n"})}),"\n",(0,i.jsxs)(s.p,{children:["There is no props spreading anymore and Stylable requires only\n",(0,i.jsx)(s.code,{children:"className"})," to be used."]}),"\n",(0,i.jsx)(s.p,{children:"However, if you were relying on the props spread pattern, in v2 and v3 you\nmight find some props missing."}),"\n",(0,i.jsx)(s.p,{children:"Therefore, with Stylable v3 it is up to you to apply any additional props:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-jsx",children:'<div\n className={st(classes.root, states, "additional-class")}\n data-hook="test"\n hello="world"\n/>\n'})}),"\n",(0,i.jsxs)(s.ol,{start:"2",children:["\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Stylable v1 ",(0,i.jsx)(s.code,{children:"style()"})," would accept unscoped css class name as a string",(0,i.jsx)(s.br,{}),"\n","This is no longer acceptable in Stylable v2 or v3, for example:"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-diff",children:"-<div {...style('root', state, { className: 'additional-class-name' })} />\n+<div className={style(classes.root, 'additional-class-name')} />\n"})}),"\n",(0,i.jsxs)(s.p,{children:["note that ",(0,i.jsx)(s.code,{children:"classes.root"})," comes from ",(0,i.jsx)(s.code,{children:".st.css"}),", which is the correct\nway to import class names."]}),"\n",(0,i.jsxs)(s.p,{children:["Similar scoping is applied to css variables too, imported from ",(0,i.jsx)(s.code,{children:"vars"})]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(s.p,{children:["Note: find more details and examples in our ",(0,i.jsx)(s.a,{href:"../references/runtime",children:"Runtime reference"}),"."]}),"\n",(0,i.jsx)(s.h2,{id:"update-tests",children:"Update tests"}),"\n",(0,i.jsxs)(s.p,{children:["If you were using ",(0,i.jsx)(s.code,{children:"@stylable/dom-test-kit"})," in Stylable v1, it's usage is\nslightly different in v2 and v3:"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-diff",children:"import { StylableDOMUtil } from '@Stylable/dom-test-kit';\n-import style from './Component.st.css';\n+import * as styleSheet from './Component.st.css';\n\n-const StylableDOMUtil = new StylableDOMUtil(style);\n+const StylableDOMUtil = new StylableDOMUtil(styleSheet);\n"})}),"\n",(0,i.jsxs)(s.p,{children:["Stylable v2 and v3 ",(0,i.jsx)(s.code,{children:"StylableDOMUtil"})," expects to receive an argument which is the whole stylesheet exported from a ",(0,i.jsx)(s.code,{children:".st.css"})," file"]}),"\n",(0,i.jsxs)(s.p,{children:["Prior to v2 it was only one thing - the ",(0,i.jsx)(s.code,{children:"style"})," function."]})]})}function p(e={}){const{wrapper:s}={...(0,l.R)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>o,x:()=>a});var t=n(6540);const i={},l=t.createContext(i);function o(e){const s=t.useContext(l);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),t.createElement(l.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[7678],{5397:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>r,contentTitle:()=>a,default:()=>p,frontMatter:()=>o,metadata:()=>t,toc:()=>d});const t=JSON.parse('{"id":"guides/migration-v3","title":"Stylable v3","description":"This guide is intended to help migrate Stylable version 1 to Stylable version 2 or 3.","source":"@site/docs/guides/migration-v3.md","sourceDirName":"guides","slug":"/guides/migration-v3","permalink":"/docs/guides/migration-v3","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/migration-v3.md","tags":[],"version":"current","frontMatter":{"id":"migration-v3","title":"Stylable v3"},"sidebar":"Guides","previous":{"title":"Server Side Rendering","permalink":"/docs/guides/ssr"},"next":{"title":"Stylable v5","permalink":"/docs/guides/migration-v5"}}');var i=n(4848),l=n(8453);const o={id:"migration-v3",title:"Stylable v3"},a="Suggested steps of migration",r={},d=[{value:"Update dependencies",id:"update-dependencies",level:2},{value:"Update <code>.st.css</code> file imports",id:"update-stcss-file-imports",level:2},{value:"CSS custom properties",id:"css-custom-properties",level:3},{value:"Update usage in React components",id:"update-usage-in-react-components",level:2},{value:"Update tests",id:"update-tests",level:2}];function c(e){const s={a:"a",admonition:"admonition",br:"br",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,l.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.p,{children:"This guide is intended to help migrate Stylable version 1 to Stylable version 2 or 3.\nIt is mainly geared towards Stylable integration in React projects."}),"\n",(0,i.jsx)(s.header,{children:(0,i.jsx)(s.h1,{id:"suggested-steps-of-migration",children:"Suggested steps of migration"})}),"\n",(0,i.jsx)(s.p,{children:"Follow these steps for a smooth transition. Each step is explained in\nmore detail below."}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsx)(s.li,{children:"Update dependencies"}),"\n",(0,i.jsx)(s.li,{children:"Update global typings"}),"\n",(0,i.jsxs)(s.li,{children:["Update ",(0,i.jsx)(s.code,{children:".st.css"})," file imports"]}),"\n",(0,i.jsx)(s.li,{children:"Update usage in React components"}),"\n",(0,i.jsx)(s.li,{children:"Update tests"}),"\n"]}),"\n",(0,i.jsx)(s.h2,{id:"update-dependencies",children:"Update dependencies"}),"\n",(0,i.jsxs)(s.p,{children:["Ensure you have v3 Stylable dependencies available. You may need to\nupdate your ",(0,i.jsx)(s.code,{children:"package.json"})," or ensure that other dependencies bring you\nv3 Stylable:"]}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.code,{children:"@stylable/cli"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.code,{children:"@stylable/core"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.code,{children:"@stylable/runtime"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.code,{children:"@stylable/node"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.code,{children:"@stylable/webpack-plugin"})}),"\n"]}),"\n",(0,i.jsx)(s.admonition,{type:"tip",children:(0,i.jsxs)(s.p,{children:["all Stylable packages in v3 are scoped under the ",(0,i.jsx)(s.code,{children:"@stylable"})," namespace.\nif you have dependencies like ",(0,i.jsx)(s.code,{children:"stylable"})," (without scope), it is the old one and should be changed to scoped version."]})}),"\n",(0,i.jsx)(s.h1,{id:"update-global-typings",children:"Update global typings"}),"\n",(0,i.jsxs)(s.p,{children:["If TypeScript is used in the project, we recommend updating the global typings\n(usually ",(0,i.jsx)(s.code,{children:"globals.d.ts"}),") with an ",(0,i.jsx)(s.code,{children:".st.css"})," module declaration:"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",children:"declare module '*.st.css' {\n const stylesheet: import('@stylable/runtime').RuntimeStylesheet;\n export = stylesheet;\n}\n"})}),"\n",(0,i.jsx)(s.p,{children:"This way the TypeScript compiler will help refactor most of the\nrequired changes and provide typings for other Stylable use cases."}),"\n",(0,i.jsxs)(s.h2,{id:"update-stcss-file-imports",children:["Update ",(0,i.jsx)(s.code,{children:".st.css"})," file imports"]}),"\n",(0,i.jsxs)(s.p,{children:["Prior to v2 all ",(0,i.jsx)(s.code,{children:".st.css"})," files would export a default ",(0,i.jsx)(s.code,{children:"style"})," function. In v2\nthis has changed: ",(0,i.jsx)(s.code,{children:".st.css"})," files now export a named object."]}),"\n",(0,i.jsx)(s.p,{children:"List of all exported keys:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"import {\n st, // alias to `style`\n classes,\n cssStates,\n keyframes,\n namespace,\n stVars,\n style,\n vars,\n} from './style.st.css';\n"})}),"\n",(0,i.jsxs)(s.p,{children:["This means that all imports of ",(0,i.jsx)(s.code,{children:".st.css"})," files have to be changed, for example:"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-diff",children:"-import style from './Component.st.css';\n+import { st, classes, /* ... */ } from './Component.st.css';\n"})}),"\n",(0,i.jsxs)(s.p,{children:["However, most often ",(0,i.jsx)(s.code,{children:"{ st, classes }"})," is enough:"]}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.code,{children:"import { st, classes } from './Component.st.css';"})}),"\n",(0,i.jsx)(s.admonition,{type:"tip",children:(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.code,{children:".st.css"})," files export a ",(0,i.jsx)(s.code,{children:"style"})," function and an alias to it -\n",(0,i.jsx)(s.code,{children:"st"}),". It is recommended to use ",(0,i.jsx)(s.code,{children:"st"})," in order to avoid name clashing\nwith other variables (for example, some other inline style)."]})}),"\n",(0,i.jsx)(s.h3,{id:"css-custom-properties",children:"CSS custom properties"}),"\n",(0,i.jsxs)(s.p,{children:["Stylable now localizes CSS Custom Properties. This means that any usage of Custom Proprties (e.g. ",(0,i.jsx)(s.code,{children:"--prop"}),") should now be incorparated in the component code."]}),"\n",(0,i.jsxs)(s.p,{children:["See the docs about ",(0,i.jsx)(s.a,{href:"https://stylable.io/docs/references/css-vars",children:"CSS custom properties"})," for usage examples."]}),"\n",(0,i.jsx)(s.h2,{id:"update-usage-in-react-components",children:"Update usage in React components"}),"\n",(0,i.jsxs)(s.p,{children:["Once ",(0,i.jsx)(s.code,{children:".st.css"})," imports are updated, React components should be updated too:"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-diff",children:"-<div {...style('root', states, props)} />\n+<div className={st(classes.root, states, props.className)} />\n"})}),"\n",(0,i.jsx)(s.p,{children:"There are subtle but very important nuances in this change."}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Stylable v1 used spread pattern. It would take the output of ",(0,i.jsx)(s.code,{children:"style('root', states, this.props)"})," function and spread it on component."]}),"\n",(0,i.jsx)(s.p,{children:"This way one or more props would be applied to the component. Thus, code that looks like this:"}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-jsx",children:'<div\n {...style(\n "root",\n {},\n { className: "additional-class", "data-hook": "test" }\n )}\n/>\n'})}),"\n",(0,i.jsx)(s.p,{children:"once evaluated, would behave like this:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-jsx",children:'<div className="root additional-class" data-hook="test" />\n'})}),"\n",(0,i.jsx)(s.p,{children:"Stylable v2 and v3 usage is like so:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"className={st(classes.root, states, this.props.className)}\n"})}),"\n",(0,i.jsxs)(s.p,{children:["There is no props spreading anymore and Stylable requires only\n",(0,i.jsx)(s.code,{children:"className"})," to be used."]}),"\n",(0,i.jsx)(s.p,{children:"However, if you were relying on the props spread pattern, in v2 and v3 you\nmight find some props missing."}),"\n",(0,i.jsx)(s.p,{children:"Therefore, with Stylable v3 it is up to you to apply any additional props:"}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-jsx",children:'<div\n className={st(classes.root, states, "additional-class")}\n data-hook="test"\n hello="world"\n/>\n'})}),"\n",(0,i.jsxs)(s.ol,{start:"2",children:["\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Stylable v1 ",(0,i.jsx)(s.code,{children:"style()"})," would accept unscoped css class name as a string",(0,i.jsx)(s.br,{}),"\n","This is no longer acceptable in Stylable v2 or v3, for example:"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-diff",children:"-<div {...style('root', state, { className: 'additional-class-name' })} />\n+<div className={style(classes.root, 'additional-class-name')} />\n"})}),"\n",(0,i.jsxs)(s.p,{children:["note that ",(0,i.jsx)(s.code,{children:"classes.root"})," comes from ",(0,i.jsx)(s.code,{children:".st.css"}),", which is the correct\nway to import class names."]}),"\n",(0,i.jsxs)(s.p,{children:["Similar scoping is applied to css variables too, imported from ",(0,i.jsx)(s.code,{children:"vars"})]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(s.p,{children:["Note: find more details and examples in our ",(0,i.jsx)(s.a,{href:"../references/runtime",children:"Runtime reference"}),"."]}),"\n",(0,i.jsx)(s.h2,{id:"update-tests",children:"Update tests"}),"\n",(0,i.jsxs)(s.p,{children:["If you were using ",(0,i.jsx)(s.code,{children:"@stylable/dom-test-kit"})," in Stylable v1, it's usage is\nslightly different in v2 and v3:"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-diff",children:"import { StylableDOMUtil } from '@Stylable/dom-test-kit';\n-import style from './Component.st.css';\n+import * as styleSheet from './Component.st.css';\n\n-const StylableDOMUtil = new StylableDOMUtil(style);\n+const StylableDOMUtil = new StylableDOMUtil(styleSheet);\n"})}),"\n",(0,i.jsxs)(s.p,{children:["Stylable v2 and v3 ",(0,i.jsx)(s.code,{children:"StylableDOMUtil"})," expects to receive an argument which is the whole stylesheet exported from a ",(0,i.jsx)(s.code,{children:".st.css"})," file"]}),"\n",(0,i.jsxs)(s.p,{children:["Prior to v2 it was only one thing - the ",(0,i.jsx)(s.code,{children:"style"})," function."]})]})}function p(e={}){const{wrapper:s}={...(0,l.R)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>o,x:()=>a});var t=n(6540);const i={},l=t.createContext(i);function o(e){const s=t.useContext(l);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),t.createElement(l.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/32382f69.1f52c00d.js b/assets/js/32382f69.1f361507.js similarity index 97% rename from assets/js/32382f69.1f52c00d.js rename to assets/js/32382f69.1f361507.js index 01cbe47e..8b3f6b4f 100644 --- a/assets/js/32382f69.1f52c00d.js +++ b/assets/js/32382f69.1f361507.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[1858],{1874:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>i,contentTitle:()=>r,default:()=>p,frontMatter:()=>c,metadata:()=>t,toc:()=>l});const t=JSON.parse('{"id":"references/namespace","title":"Namespace","description":"Manual Namespace","source":"@site/docs/references/namespace.md","sourceDirName":"references","slug":"/references/namespace","permalink":"/docs/references/namespace","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/namespace.md","tags":[],"version":"current","frontMatter":{"id":"namespace","title":"Namespace"},"sidebar":"Specification Reference","previous":{"title":"Import","permalink":"/docs/references/imports"},"next":{"title":"Root","permalink":"/docs/references/root"}}');var a=s(4848),o=s(8453);const c={id:"namespace",title:"Namespace"},r=void 0,i={},l=[{value:"Manual Namespace",id:"manual-namespace",level:2}];function d(e){const n={admonition:"admonition",code:"code",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.h2,{id:"manual-namespace",children:"Manual Namespace"}),"\n",(0,a.jsxs)(n.p,{children:["When you develop your application in ",(0,a.jsx)(n.strong,{children:"Stylable"}),", you can manually namespace classes so you can more easily identify them when they are displayed in the CSS output. You do this in your ",(0,a.jsx)(n.strong,{children:"Stylable"})," stylesheet by adding the syntax ",(0,a.jsx)(n.code,{children:"@st-namespace"})," to provide better display names to your classes."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",metastring:'title="x.st.css"',children:'@st-namespace "y";\n.root {\n color: red;\n}\n\n/* OUTPUT */\n.y__root {/* use @st-namespace value instead of file name */\n color: red;\n}\n'})}),"\n",(0,a.jsx)(n.admonition,{type:"note",children:(0,a.jsxs)(n.p,{children:["Because ",(0,a.jsx)(n.code,{children:"@st-namespace"})," is not unique, the scoped name may still have a suffix added to it to make it unique during build."]})})]})}function p(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>c,x:()=>r});var t=s(6540);const a={},o=t.createContext(a);function c(e){const n=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:c(e.components),t.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[1858],{7370:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>i,contentTitle:()=>r,default:()=>p,frontMatter:()=>c,metadata:()=>t,toc:()=>l});const t=JSON.parse('{"id":"references/namespace","title":"Namespace","description":"Manual Namespace","source":"@site/docs/references/namespace.md","sourceDirName":"references","slug":"/references/namespace","permalink":"/docs/references/namespace","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/namespace.md","tags":[],"version":"current","frontMatter":{"id":"namespace","title":"Namespace"},"sidebar":"Specification Reference","previous":{"title":"Import","permalink":"/docs/references/imports"},"next":{"title":"Root","permalink":"/docs/references/root"}}');var a=s(4848),o=s(8453);const c={id:"namespace",title:"Namespace"},r=void 0,i={},l=[{value:"Manual Namespace",id:"manual-namespace",level:2}];function d(e){const n={admonition:"admonition",code:"code",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.h2,{id:"manual-namespace",children:"Manual Namespace"}),"\n",(0,a.jsxs)(n.p,{children:["When you develop your application in ",(0,a.jsx)(n.strong,{children:"Stylable"}),", you can manually namespace classes so you can more easily identify them when they are displayed in the CSS output. You do this in your ",(0,a.jsx)(n.strong,{children:"Stylable"})," stylesheet by adding the syntax ",(0,a.jsx)(n.code,{children:"@st-namespace"})," to provide better display names to your classes."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",metastring:'title="x.st.css"',children:'@st-namespace "y";\n.root {\n color: red;\n}\n\n/* OUTPUT */\n.y__root {/* use @st-namespace value instead of file name */\n color: red;\n}\n'})}),"\n",(0,a.jsx)(n.admonition,{type:"note",children:(0,a.jsxs)(n.p,{children:["Because ",(0,a.jsx)(n.code,{children:"@st-namespace"})," is not unique, the scoped name may still have a suffix added to it to make it unique during build."]})})]})}function p(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>c,x:()=>r});var t=s(6540);const a={},o=t.createContext(a);function c(e){const n=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:c(e.components),t.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/35811679.acc0117d.js b/assets/js/35811679.88cce2c2.js similarity index 99% rename from assets/js/35811679.acc0117d.js rename to assets/js/35811679.88cce2c2.js index e85847be..6eee81fa 100644 --- a/assets/js/35811679.acc0117d.js +++ b/assets/js/35811679.88cce2c2.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[7135],{6119:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>r,default:()=>h,frontMatter:()=>a,metadata:()=>i,toc:()=>d});const i=JSON.parse('{"id":"guides/handbook/intro","title":"Introduction","description":"What am I reading?","source":"@site/docs/guides/handbook/intro.md","sourceDirName":"guides/handbook","slug":"/guides/handbook/intro","permalink":"/docs/guides/handbook/intro","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/handbook/intro.md","tags":[],"version":"current","frontMatter":{"id":"intro","title":"Introduction"},"sidebar":"Guides","next":{"title":"Classes","permalink":"/docs/guides/handbook/class"}}');var s=n(4848),o=n(8453);const a={id:"intro",title:"Introduction"},r=void 0,l={},d=[{value:"What am I reading?",id:"what-am-i-reading",level:2},{value:"What is Stylable?",id:"what-is-stylable",level:2},{value:"Pre-processor",id:"pre-processor",level:3},{value:"Type system",id:"type-system",level:3},{value:"Language server",id:"language-server",level:3},{value:"Tooling",id:"tooling",level:3},{value:"Who is Stylable for?",id:"who-is-stylable-for",level:2},{value:"Component libraries",id:"component-libraries",level:3},{value:"Applications",id:"applications",level:3}];function c(e){const t={a:"a",br:"br",em:"em",h2:"h2",h3:"h3",hr:"hr",li:"li",p:"p",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h2,{id:"what-am-i-reading",children:"What am I reading?"}),"\n",(0,s.jsx)(t.p,{children:"This document provides an overview of Stylable and its features, and serves as a quick guide for getting started. Each chapter focuses on one core feature of Stylable, introducing a problem or need, showing how CSS might address it, and then how Stylable can be used to simplify the solution. This handbook is not a complete reference for Stylable, but merely a starting point for learning to use it."}),"\n",(0,s.jsx)(t.h2,{id:"what-is-stylable",children:"What is Stylable?"}),"\n",(0,s.jsxs)(t.p,{children:["Stylable is a ",(0,s.jsx)(t.strong,{children:"superset of the CSS language"})," - it introduces additional syntax to CSS to allow us to add features to styling during pre-processing time. It is designed for working with components, variants, themes, and various modern design patterns."]}),"\n",(0,s.jsx)(t.p,{children:"There are different aspects to Stylable, and the tooling and capabilities that it provides:"}),"\n",(0,s.jsx)(t.h3,{id:"pre-processor",children:"Pre-processor"}),"\n",(0,s.jsxs)(t.p,{children:["The Stylable pre-processor works at build-time, meaning that we can use all of its features while writing the code. Its input is a Stylable stylesheet, and its output is ",(0,s.jsx)(t.strong,{children:"valid vanilla CSS"}),". The pre-processing it performs adds the following to CSS:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Namespace all parts of CSS that can conflict so that multiple stylesheets can be loaded together safely."}),"\n",(0,s.jsx)(t.li,{children:"A module system to CSS so that individual symbols can be re-used across stylesheets."}),"\n",(0,s.jsx)(t.li,{children:"Template capabilities for creating complex design patterns using variables, mixins, and formatters."}),"\n",(0,s.jsxs)(t.li,{children:["The ability to perform external customization of any component or theme by using its ",(0,s.jsx)(t.em,{children:"Style API"})," through extensions, compositions and overrides."]}),"\n"]}),"\n",(0,s.jsx)(t.h3,{id:"type-system",children:"Type system"}),"\n",(0,s.jsx)(t.p,{children:"We love working with TypeScript and the developer experience that it provides in terms of validations and rich language features."}),"\n",(0,s.jsxs)(t.p,{children:["We aspire for ",(0,s.jsx)(t.strong,{children:"Stylable to be for CSS, what TypeScript is for JavaScript"}),", and so Stylable is in itself a type system, providing interface support for selectors, and reporting syntactic and semantic diagnostics."]}),"\n",(0,s.jsx)(t.h3,{id:"language-server",children:"Language server"}),"\n",(0,s.jsxs)(t.p,{children:["When working in a modern IDE, a language server makes a huge difference in the development experience. For Stylable, we created the ",(0,s.jsx)(t.a,{href:"../../getting-started/tooling/stylable-intelligence",children:"Stylable Intelligence"})," VS Code extension to provide a better development experience through completions, definitions, hinting and more."]}),"\n",(0,s.jsx)(t.h3,{id:"tooling",children:"Tooling"}),"\n",(0,s.jsx)(t.p,{children:"Pre-processing and language features are not all that Stylable offers. It also includes a set of tools and integrations that help develop, build, and ship better CSS:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Stylable CLI - a command line interface to help build, manage, and validate stylesheets for production and CI/CD workflows."}),"\n",(0,s.jsx)(t.li,{children:"Optimization tools - Stylable has a deep awareness of how your stylesheets are used, and can optimize them to shorten names or remove dead code."}),"\n",(0,s.jsx)(t.li,{children:"Bundling - choose one of our supported bundler integrations to bundle your stylesheets for production."}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"who-is-stylable-for",children:"Who is Stylable for?"}),"\n",(0,s.jsx)(t.p,{children:"We modeled Stylable after TypeScript, and like TypeScript, the more complex the project and the more people it involves, the greater the value it provides."}),"\n",(0,s.jsx)(t.p,{children:"Having said that, even a single developer working on a simple, standalone project could gain a lot of value from Stylable."}),"\n",(0,s.jsx)(t.h3,{id:"component-libraries",children:"Component libraries"}),"\n",(0,s.jsx)(t.p,{children:"Library authors can use Stylable to create reusable components, variants, and themes. It helps organize component and theme styling while controlling the elements and styles that are exposed as public interfaces."}),"\n",(0,s.jsx)(t.h3,{id:"applications",children:"Applications"}),"\n",(0,s.jsx)(t.p,{children:"Application creators can use Stylable to compose their own components alongside 3rd party libraries and to theme the final application to their UX and product requirements."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsxs)(t.p,{children:["Sounds interesting? Ready to start?",(0,s.jsx)(t.br,{}),"\n","Head on over to the ",(0,s.jsx)(t.a,{href:"/docs/guides/handbook/class",children:"first chapter"}),", where we discuss classes, and what they mean in Stylable."]})]})}function h(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>r});var i=n(6540);const s={},o=i.createContext(s);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),i.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[7135],{2998:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>r,default:()=>h,frontMatter:()=>a,metadata:()=>i,toc:()=>d});const i=JSON.parse('{"id":"guides/handbook/intro","title":"Introduction","description":"What am I reading?","source":"@site/docs/guides/handbook/intro.md","sourceDirName":"guides/handbook","slug":"/guides/handbook/intro","permalink":"/docs/guides/handbook/intro","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/handbook/intro.md","tags":[],"version":"current","frontMatter":{"id":"intro","title":"Introduction"},"sidebar":"Guides","next":{"title":"Classes","permalink":"/docs/guides/handbook/class"}}');var s=n(4848),o=n(8453);const a={id:"intro",title:"Introduction"},r=void 0,l={},d=[{value:"What am I reading?",id:"what-am-i-reading",level:2},{value:"What is Stylable?",id:"what-is-stylable",level:2},{value:"Pre-processor",id:"pre-processor",level:3},{value:"Type system",id:"type-system",level:3},{value:"Language server",id:"language-server",level:3},{value:"Tooling",id:"tooling",level:3},{value:"Who is Stylable for?",id:"who-is-stylable-for",level:2},{value:"Component libraries",id:"component-libraries",level:3},{value:"Applications",id:"applications",level:3}];function c(e){const t={a:"a",br:"br",em:"em",h2:"h2",h3:"h3",hr:"hr",li:"li",p:"p",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h2,{id:"what-am-i-reading",children:"What am I reading?"}),"\n",(0,s.jsx)(t.p,{children:"This document provides an overview of Stylable and its features, and serves as a quick guide for getting started. Each chapter focuses on one core feature of Stylable, introducing a problem or need, showing how CSS might address it, and then how Stylable can be used to simplify the solution. This handbook is not a complete reference for Stylable, but merely a starting point for learning to use it."}),"\n",(0,s.jsx)(t.h2,{id:"what-is-stylable",children:"What is Stylable?"}),"\n",(0,s.jsxs)(t.p,{children:["Stylable is a ",(0,s.jsx)(t.strong,{children:"superset of the CSS language"})," - it introduces additional syntax to CSS to allow us to add features to styling during pre-processing time. It is designed for working with components, variants, themes, and various modern design patterns."]}),"\n",(0,s.jsx)(t.p,{children:"There are different aspects to Stylable, and the tooling and capabilities that it provides:"}),"\n",(0,s.jsx)(t.h3,{id:"pre-processor",children:"Pre-processor"}),"\n",(0,s.jsxs)(t.p,{children:["The Stylable pre-processor works at build-time, meaning that we can use all of its features while writing the code. Its input is a Stylable stylesheet, and its output is ",(0,s.jsx)(t.strong,{children:"valid vanilla CSS"}),". The pre-processing it performs adds the following to CSS:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Namespace all parts of CSS that can conflict so that multiple stylesheets can be loaded together safely."}),"\n",(0,s.jsx)(t.li,{children:"A module system to CSS so that individual symbols can be re-used across stylesheets."}),"\n",(0,s.jsx)(t.li,{children:"Template capabilities for creating complex design patterns using variables, mixins, and formatters."}),"\n",(0,s.jsxs)(t.li,{children:["The ability to perform external customization of any component or theme by using its ",(0,s.jsx)(t.em,{children:"Style API"})," through extensions, compositions and overrides."]}),"\n"]}),"\n",(0,s.jsx)(t.h3,{id:"type-system",children:"Type system"}),"\n",(0,s.jsx)(t.p,{children:"We love working with TypeScript and the developer experience that it provides in terms of validations and rich language features."}),"\n",(0,s.jsxs)(t.p,{children:["We aspire for ",(0,s.jsx)(t.strong,{children:"Stylable to be for CSS, what TypeScript is for JavaScript"}),", and so Stylable is in itself a type system, providing interface support for selectors, and reporting syntactic and semantic diagnostics."]}),"\n",(0,s.jsx)(t.h3,{id:"language-server",children:"Language server"}),"\n",(0,s.jsxs)(t.p,{children:["When working in a modern IDE, a language server makes a huge difference in the development experience. For Stylable, we created the ",(0,s.jsx)(t.a,{href:"../../getting-started/tooling/stylable-intelligence",children:"Stylable Intelligence"})," VS Code extension to provide a better development experience through completions, definitions, hinting and more."]}),"\n",(0,s.jsx)(t.h3,{id:"tooling",children:"Tooling"}),"\n",(0,s.jsx)(t.p,{children:"Pre-processing and language features are not all that Stylable offers. It also includes a set of tools and integrations that help develop, build, and ship better CSS:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Stylable CLI - a command line interface to help build, manage, and validate stylesheets for production and CI/CD workflows."}),"\n",(0,s.jsx)(t.li,{children:"Optimization tools - Stylable has a deep awareness of how your stylesheets are used, and can optimize them to shorten names or remove dead code."}),"\n",(0,s.jsx)(t.li,{children:"Bundling - choose one of our supported bundler integrations to bundle your stylesheets for production."}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"who-is-stylable-for",children:"Who is Stylable for?"}),"\n",(0,s.jsx)(t.p,{children:"We modeled Stylable after TypeScript, and like TypeScript, the more complex the project and the more people it involves, the greater the value it provides."}),"\n",(0,s.jsx)(t.p,{children:"Having said that, even a single developer working on a simple, standalone project could gain a lot of value from Stylable."}),"\n",(0,s.jsx)(t.h3,{id:"component-libraries",children:"Component libraries"}),"\n",(0,s.jsx)(t.p,{children:"Library authors can use Stylable to create reusable components, variants, and themes. It helps organize component and theme styling while controlling the elements and styles that are exposed as public interfaces."}),"\n",(0,s.jsx)(t.h3,{id:"applications",children:"Applications"}),"\n",(0,s.jsx)(t.p,{children:"Application creators can use Stylable to compose their own components alongside 3rd party libraries and to theme the final application to their UX and product requirements."}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsxs)(t.p,{children:["Sounds interesting? Ready to start?",(0,s.jsx)(t.br,{}),"\n","Head on over to the ",(0,s.jsx)(t.a,{href:"/docs/guides/handbook/class",children:"first chapter"}),", where we discuss classes, and what they mean in Stylable."]})]})}function h(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>r});var i=n(6540);const s={},o=i.createContext(s);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),i.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/371f5dc2.e2912076.js b/assets/js/371f5dc2.dd91d3d5.js similarity index 57% rename from assets/js/371f5dc2.e2912076.js rename to assets/js/371f5dc2.dd91d3d5.js index f17b2be0..813e5baa 100644 --- a/assets/js/371f5dc2.e2912076.js +++ b/assets/js/371f5dc2.dd91d3d5.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[5184],{3940:(e,t,a)=>{a.r(t),a.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>b,frontMatter:()=>u,metadata:()=>r,toc:()=>p});const r=JSON.parse('{"id":"getting-started/boilerplate","title":"Boilerplate","description":"To get started quickly, Stylable offers a boilerplate utility that can be used to bootstrap new projects from a list of templates.","source":"@site/docs/getting-started/boilerplate.mdx","sourceDirName":"getting-started","slug":"/getting-started/boilerplate","permalink":"/docs/getting-started/boilerplate","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/getting-started/boilerplate.mdx","tags":[],"version":"current","frontMatter":{"id":"boilerplate","title":"Boilerplate"},"sidebar":"Discover","previous":{"title":"Intro","permalink":"/docs/getting-started/intro"},"next":{"title":"Manual Integration","permalink":"/docs/getting-started/manual-integration"}}');var n=a(4848),l=a(8453),s=a(9489),i=a(7227),o=a(2250);const u={id:"boilerplate",title:"Boilerplate"},c=void 0,d={},p=[{value:"<code>ts-react-webpack</code> (app)",id:"ts-react-webpack-app",level:2},{value:"<code>ts-react-rollup</code> (app)",id:"ts-react-rollup-app",level:2},{value:"Integrated and ready to learn?",id:"integrated-and-ready-to-learn",level:2}];function h(e){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",hr:"hr",li:"li",p:"p",strong:"strong",ul:"ul",...(0,l.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["To get started quickly, ",(0,n.jsx)(t.strong,{children:"Stylable"})," offers a boilerplate utility that can be used to bootstrap new projects from a list of templates."]}),"\n",(0,n.jsxs)(t.h2,{id:"ts-react-webpack-app",children:[(0,n.jsx)(t.code,{children:"ts-react-webpack"})," (app)"]}),"\n",(0,n.jsx)(t.p,{children:"This is the default template, it creates a new project and includes:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["A ",(0,n.jsx)(t.strong,{children:"React"})," application"]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Webpack"})," bundling including production optimizations"]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"TypeScript"})," support with automatically generated stylesheet type definitions"]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"To use this template, run the following command:"}),"\n",(0,n.jsxs)(s.A,{groupId:"packageManager",children:[(0,n.jsx)(i.A,{value:"npm",label:"NPM",default:!0,children:(0,n.jsx)(o.A,{language:"bash",children:"npm init stylable-app [PROJECT_NAME]"})}),(0,n.jsx)(i.A,{value:"yarn",label:"Yarn",children:(0,n.jsx)(o.A,{language:"bash",children:"yarn create stylable-app [PROJECT_NAME]"})})]}),"\n",(0,n.jsxs)(t.h2,{id:"ts-react-rollup-app",children:[(0,n.jsx)(t.code,{children:"ts-react-rollup"})," (app)"]}),"\n",(0,n.jsx)(t.p,{children:"This is an alternative template, it creates a new project and includes:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["A ",(0,n.jsx)(t.strong,{children:"React"})," application"]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Rollup"})," bundling"]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"TypeScript"})," support with automatically generated stylesheet type definitions"]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"To use this template, run the following command:"}),"\n",(0,n.jsxs)(s.A,{groupId:"packageManager",children:[(0,n.jsx)(i.A,{value:"npm",label:"NPM",default:!0,children:(0,n.jsx)(o.A,{language:"bash",children:"npm init stylable-app -- [PROJECT_NAME] --template ts-react-rollup"})}),(0,n.jsx)(i.A,{value:"yarn",label:"Yarn",children:(0,n.jsx)(o.A,{language:"bash",children:"yarn create stylable-app [PROJECT_NAME] --template ts-react-rollup"})})]}),"\n",(0,n.jsx)(t.admonition,{title:"Missing a template?",type:"note",children:(0,n.jsxs)(t.p,{children:["Got a use-case we don't support? A template you would like us to add? Let us know by ",(0,n.jsx)(t.a,{href:"https://github.com/wix/stylable/issues/new?assignees=&labels=triage&template=proposal.yaml",children:"creating a new template proposal"}),"."]})}),"\n",(0,n.jsx)(t.hr,{}),"\n",(0,n.jsx)(t.h2,{id:"integrated-and-ready-to-learn",children:"Integrated and ready to learn?"}),"\n",(0,n.jsxs)(t.p,{children:["Once your project is up and running, you can begin styling with ",(0,n.jsx)(t.strong,{children:"Stylable"}),". Read through the ",(0,n.jsx)(t.a,{href:"/docs/guides/handbook/intro",children:"Handbook"})," or explore the ",(0,n.jsx)(t.a,{href:"/docs/references/cheatsheet",children:"API References"})," to help guide you in your work."]})]})}function b(e={}){const{wrapper:t}={...(0,l.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(h,{...e})}):h(e)}},7227:(e,t,a)=>{a.d(t,{A:()=>s});a(6540);var r=a(4164);const n={tabItem:"tabItem_Ymn6"};var l=a(4848);function s(e){let{children:t,hidden:a,className:s}=e;return(0,l.jsx)("div",{role:"tabpanel",className:(0,r.A)(n.tabItem,s),hidden:a,children:t})}},9489:(e,t,a)=>{a.d(t,{A:()=>w});var r=a(6540),n=a(4164),l=a(4245),s=a(6347),i=a(6494),o=a(2814),u=a(5167),c=a(9900);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:a}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:a,attributes:r,default:n}}=e;return{value:t,label:a,attributes:r,default:n}}))}(a);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e}),[t,a])}function h(e){let{value:t,tabValues:a}=e;return a.some((e=>e.value===t))}function b(e){let{queryString:t=!1,groupId:a}=e;const n=(0,s.W6)(),l=function(e){let{queryString:t=!1,groupId:a}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!a)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return a??null}({queryString:t,groupId:a});return[(0,o.aZ)(l),(0,r.useCallback)((e=>{if(!l)return;const t=new URLSearchParams(n.location.search);t.set(l,e),n.replace({...n.location,search:t.toString()})}),[l,n])]}function g(e){const{defaultValue:t,queryString:a=!1,groupId:n}=e,l=p(e),[s,o]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:a}=e;if(0===a.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(t){if(!h({value:t,tabValues:a}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${a.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=a.find((e=>e.default))??a[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:l}))),[u,d]=b({queryString:a,groupId:n}),[g,m]=function(e){let{groupId:t}=e;const a=function(e){return e?`docusaurus.tab.${e}`:null}(t),[n,l]=(0,c.Dv)(a);return[n,(0,r.useCallback)((e=>{a&&l.set(e)}),[a,l])]}({groupId:n}),f=(()=>{const e=u??g;return h({value:e,tabValues:l})?e:null})();(0,i.A)((()=>{f&&o(f)}),[f]);return{selectedValue:s,selectValue:(0,r.useCallback)((e=>{if(!h({value:e,tabValues:l}))throw new Error(`Can't select invalid tab value=${e}`);o(e),d(e),m(e)}),[d,m,l]),tabValues:l}}var m=a(1062);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=a(4848);function y(e){let{className:t,block:a,selectedValue:r,selectValue:s,tabValues:i}=e;const o=[],{blockElementScrollPositionUntilNextRender:u}=(0,l.a_)(),c=e=>{const t=e.currentTarget,a=o.indexOf(t),n=i[a].value;n!==r&&(u(t),s(n))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const a=o.indexOf(e.currentTarget)+1;t=o[a]??o[0];break}case"ArrowLeft":{const a=o.indexOf(e.currentTarget)-1;t=o[a]??o[o.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,n.A)("tabs",{"tabs--block":a},t),children:i.map((e=>{let{value:t,label:a,attributes:l}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>o.push(e),onKeyDown:d,onClick:c,...l,className:(0,n.A)("tabs__item",f.tabItem,l?.className,{"tabs__item--active":r===t}),children:a??t},t)}))})}function j(e){let{lazy:t,children:a,selectedValue:l}=e;const s=(Array.isArray(a)?a:[a]).filter(Boolean);if(t){const e=s.find((e=>e.props.value===l));return e?(0,r.cloneElement)(e,{className:(0,n.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:s.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==l})))})}function v(e){const t=g(e);return(0,x.jsxs)("div",{className:(0,n.A)("tabs-container",f.tabList),children:[(0,x.jsx)(y,{...t,...e}),(0,x.jsx)(j,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,x.jsx)(v,{...e,children:d(e.children)},String(t))}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[5184],{6590:(e,t,a)=>{a.r(t),a.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>b,frontMatter:()=>u,metadata:()=>r,toc:()=>p});const r=JSON.parse('{"id":"getting-started/boilerplate","title":"Boilerplate","description":"To get started quickly, Stylable offers a boilerplate utility that can be used to bootstrap new projects from a list of templates.","source":"@site/docs/getting-started/boilerplate.mdx","sourceDirName":"getting-started","slug":"/getting-started/boilerplate","permalink":"/docs/getting-started/boilerplate","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/getting-started/boilerplate.mdx","tags":[],"version":"current","frontMatter":{"id":"boilerplate","title":"Boilerplate"},"sidebar":"Discover","previous":{"title":"Intro","permalink":"/docs/getting-started/intro"},"next":{"title":"Manual Integration","permalink":"/docs/getting-started/manual-integration"}}');var n=a(4848),l=a(8453),s=a(1470),i=a(9365),o=a(1432);const u={id:"boilerplate",title:"Boilerplate"},c=void 0,d={},p=[{value:"<code>ts-react-webpack</code> (app)",id:"ts-react-webpack-app",level:2},{value:"<code>ts-react-rollup</code> (app)",id:"ts-react-rollup-app",level:2},{value:"Integrated and ready to learn?",id:"integrated-and-ready-to-learn",level:2}];function h(e){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",hr:"hr",li:"li",p:"p",strong:"strong",ul:"ul",...(0,l.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["To get started quickly, ",(0,n.jsx)(t.strong,{children:"Stylable"})," offers a boilerplate utility that can be used to bootstrap new projects from a list of templates."]}),"\n",(0,n.jsxs)(t.h2,{id:"ts-react-webpack-app",children:[(0,n.jsx)(t.code,{children:"ts-react-webpack"})," (app)"]}),"\n",(0,n.jsx)(t.p,{children:"This is the default template, it creates a new project and includes:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["A ",(0,n.jsx)(t.strong,{children:"React"})," application"]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Webpack"})," bundling including production optimizations"]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"TypeScript"})," support with automatically generated stylesheet type definitions"]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"To use this template, run the following command:"}),"\n",(0,n.jsxs)(s.A,{groupId:"packageManager",children:[(0,n.jsx)(i.A,{value:"npm",label:"NPM",default:!0,children:(0,n.jsx)(o.A,{language:"bash",children:"npm init stylable-app [PROJECT_NAME]"})}),(0,n.jsx)(i.A,{value:"yarn",label:"Yarn",children:(0,n.jsx)(o.A,{language:"bash",children:"yarn create stylable-app [PROJECT_NAME]"})})]}),"\n",(0,n.jsxs)(t.h2,{id:"ts-react-rollup-app",children:[(0,n.jsx)(t.code,{children:"ts-react-rollup"})," (app)"]}),"\n",(0,n.jsx)(t.p,{children:"This is an alternative template, it creates a new project and includes:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["A ",(0,n.jsx)(t.strong,{children:"React"})," application"]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Rollup"})," bundling"]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"TypeScript"})," support with automatically generated stylesheet type definitions"]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"To use this template, run the following command:"}),"\n",(0,n.jsxs)(s.A,{groupId:"packageManager",children:[(0,n.jsx)(i.A,{value:"npm",label:"NPM",default:!0,children:(0,n.jsx)(o.A,{language:"bash",children:"npm init stylable-app -- [PROJECT_NAME] --template ts-react-rollup"})}),(0,n.jsx)(i.A,{value:"yarn",label:"Yarn",children:(0,n.jsx)(o.A,{language:"bash",children:"yarn create stylable-app [PROJECT_NAME] --template ts-react-rollup"})})]}),"\n",(0,n.jsx)(t.admonition,{title:"Missing a template?",type:"note",children:(0,n.jsxs)(t.p,{children:["Got a use-case we don't support? A template you would like us to add? Let us know by ",(0,n.jsx)(t.a,{href:"https://github.com/wix/stylable/issues/new?assignees=&labels=triage&template=proposal.yaml",children:"creating a new template proposal"}),"."]})}),"\n",(0,n.jsx)(t.hr,{}),"\n",(0,n.jsx)(t.h2,{id:"integrated-and-ready-to-learn",children:"Integrated and ready to learn?"}),"\n",(0,n.jsxs)(t.p,{children:["Once your project is up and running, you can begin styling with ",(0,n.jsx)(t.strong,{children:"Stylable"}),". Read through the ",(0,n.jsx)(t.a,{href:"/docs/guides/handbook/intro",children:"Handbook"})," or explore the ",(0,n.jsx)(t.a,{href:"/docs/references/cheatsheet",children:"API References"})," to help guide you in your work."]})]})}function b(e={}){const{wrapper:t}={...(0,l.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(h,{...e})}):h(e)}},9365:(e,t,a)=>{a.d(t,{A:()=>s});a(6540);var r=a(4164);const n={tabItem:"tabItem_Ymn6"};var l=a(4848);function s(e){let{children:t,hidden:a,className:s}=e;return(0,l.jsx)("div",{role:"tabpanel",className:(0,r.A)(n.tabItem,s),hidden:a,children:t})}},1470:(e,t,a)=>{a.d(t,{A:()=>w});var r=a(6540),n=a(4164),l=a(3104),s=a(6347),i=a(205),o=a(7485),u=a(1682),c=a(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:a}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:a,attributes:r,default:n}}=e;return{value:t,label:a,attributes:r,default:n}}))}(a);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e}),[t,a])}function h(e){let{value:t,tabValues:a}=e;return a.some((e=>e.value===t))}function b(e){let{queryString:t=!1,groupId:a}=e;const n=(0,s.W6)(),l=function(e){let{queryString:t=!1,groupId:a}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!a)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return a??null}({queryString:t,groupId:a});return[(0,o.aZ)(l),(0,r.useCallback)((e=>{if(!l)return;const t=new URLSearchParams(n.location.search);t.set(l,e),n.replace({...n.location,search:t.toString()})}),[l,n])]}function g(e){const{defaultValue:t,queryString:a=!1,groupId:n}=e,l=p(e),[s,o]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:a}=e;if(0===a.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(t){if(!h({value:t,tabValues:a}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${a.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=a.find((e=>e.default))??a[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:l}))),[u,d]=b({queryString:a,groupId:n}),[g,m]=function(e){let{groupId:t}=e;const a=function(e){return e?`docusaurus.tab.${e}`:null}(t),[n,l]=(0,c.Dv)(a);return[n,(0,r.useCallback)((e=>{a&&l.set(e)}),[a,l])]}({groupId:n}),f=(()=>{const e=u??g;return h({value:e,tabValues:l})?e:null})();(0,i.A)((()=>{f&&o(f)}),[f]);return{selectedValue:s,selectValue:(0,r.useCallback)((e=>{if(!h({value:e,tabValues:l}))throw new Error(`Can't select invalid tab value=${e}`);o(e),d(e),m(e)}),[d,m,l]),tabValues:l}}var m=a(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=a(4848);function y(e){let{className:t,block:a,selectedValue:r,selectValue:s,tabValues:i}=e;const o=[],{blockElementScrollPositionUntilNextRender:u}=(0,l.a_)(),c=e=>{const t=e.currentTarget,a=o.indexOf(t),n=i[a].value;n!==r&&(u(t),s(n))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const a=o.indexOf(e.currentTarget)+1;t=o[a]??o[0];break}case"ArrowLeft":{const a=o.indexOf(e.currentTarget)-1;t=o[a]??o[o.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,n.A)("tabs",{"tabs--block":a},t),children:i.map((e=>{let{value:t,label:a,attributes:l}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{o.push(e)},onKeyDown:d,onClick:c,...l,className:(0,n.A)("tabs__item",f.tabItem,l?.className,{"tabs__item--active":r===t}),children:a??t},t)}))})}function j(e){let{lazy:t,children:a,selectedValue:l}=e;const s=(Array.isArray(a)?a:[a]).filter(Boolean);if(t){const e=s.find((e=>e.props.value===l));return e?(0,r.cloneElement)(e,{className:(0,n.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:s.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==l})))})}function v(e){const t=g(e);return(0,x.jsxs)("div",{className:(0,n.A)("tabs-container",f.tabList),children:[(0,x.jsx)(y,{...t,...e}),(0,x.jsx)(j,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,x.jsx)(v,{...e,children:d(e.children)},String(t))}}}]); \ No newline at end of file diff --git a/assets/js/4491.82a2b9c4.js b/assets/js/4491.82a2b9c4.js deleted file mode 100644 index 37e85071..00000000 --- a/assets/js/4491.82a2b9c4.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 4491.82a2b9c4.js.LICENSE.txt */ -(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[4491],{4491:(e,t,r)=>{"use strict";const n=Symbol("Comlink.proxy"),i=Symbol("Comlink.endpoint"),s=Symbol("Comlink.releaseProxy"),o=Symbol("Comlink.finalizer"),a=Symbol("Comlink.thrown"),u=e=>"object"==typeof e&&null!==e||"function"==typeof e,l={canHandle:e=>u(e)&&e[n],serialize(e){const{port1:t,port2:r}=new MessageChannel;return h(e,t),[r,[r]]},deserialize:e=>(e.start(),function(e,t){const r=new Map;return e.addEventListener("message",(function(e){const{data:t}=e;if(!t||!t.id)return;const n=r.get(t.id);if(n)try{n(t)}finally{r.delete(t.id)}})),g(e,r,[],t)}(e))},c=new Map([["proxy",l],["throw",{canHandle:e=>u(e)&&a in e,serialize({value:e}){let t;return t=e instanceof Error?{isError:!0,value:{message:e.message,name:e.name,stack:e.stack}}:{isError:!1,value:e},[t,[]]},deserialize(e){if(e.isError)throw Object.assign(new Error(e.value.message),e.value);throw e.value}}]]);function h(e,t=globalThis,r=["*"]){t.addEventListener("message",(function i(s){if(!s||!s.data)return;if(!function(e,t){for(const r of e){if(t===r||"*"===r)return!0;if(r instanceof RegExp&&r.test(t))return!0}return!1}(r,s.origin))return void console.warn(`Invalid origin '${s.origin}' for comlink proxy`);const{id:u,type:l,path:c}=Object.assign({path:[]},s.data),f=(s.data.argumentList||[]).map(E);let p;try{const t=c.slice(0,-1).reduce(((e,t)=>e[t]),e),r=c.reduce(((e,t)=>e[t]),e);switch(l){case"GET":p=r;break;case"SET":t[c.slice(-1)[0]]=E(s.data.value),p=!0;break;case"APPLY":p=r.apply(t,f);break;case"CONSTRUCT":p=function(e){return Object.assign(e,{[n]:!0})}(new r(...f));break;case"ENDPOINT":{const{port1:t,port2:r}=new MessageChannel;h(e,r),p=function(e,t){return v.set(e,t),e}(t,[t])}break;case"RELEASE":p=void 0;break;default:return}}catch(y){p={value:y,[a]:0}}Promise.resolve(p).catch((e=>({value:e,[a]:0}))).then((r=>{const[n,s]=w(r);t.postMessage(Object.assign(Object.assign({},n),{id:u}),s),"RELEASE"===l&&(t.removeEventListener("message",i),d(t),o in e&&"function"==typeof e[o]&&e[o]())})).catch((e=>{const[r,n]=w({value:new TypeError("Unserializable return value"),[a]:0});t.postMessage(Object.assign(Object.assign({},r),{id:u}),n)}))})),t.start&&t.start()}function d(e){(function(e){return"MessagePort"===e.constructor.name})(e)&&e.close()}function f(e){if(e)throw new Error("Proxy has been released and is not useable")}function p(e){return Q(e,new Map,{type:"RELEASE"}).then((()=>{d(e)}))}const y=new WeakMap,m="FinalizationRegistry"in globalThis&&new FinalizationRegistry((e=>{const t=(y.get(e)||0)-1;y.set(e,t),0===t&&p(e)}));function g(e,t,r=[],n=function(){}){let o=!1;const a=new Proxy(n,{get(n,i){if(f(o),i===s)return()=>{!function(e){m&&m.unregister(e)}(a),p(e),t.clear(),o=!0};if("then"===i){if(0===r.length)return{then:()=>a};const n=Q(e,t,{type:"GET",path:r.map((e=>e.toString()))}).then(E);return n.then.bind(n)}return g(e,t,[...r,i])},set(n,i,s){f(o);const[a,u]=w(s);return Q(e,t,{type:"SET",path:[...r,i].map((e=>e.toString())),value:a},u).then(E)},apply(n,s,a){f(o);const u=r[r.length-1];if(u===i)return Q(e,t,{type:"ENDPOINT"}).then(E);if("bind"===u)return g(e,t,r.slice(0,-1));const[l,c]=x(a);return Q(e,t,{type:"APPLY",path:r.map((e=>e.toString())),argumentList:l},c).then(E)},construct(n,i){f(o);const[s,a]=x(i);return Q(e,t,{type:"CONSTRUCT",path:r.map((e=>e.toString())),argumentList:s},a).then(E)}});return function(e,t){const r=(y.get(t)||0)+1;y.set(t,r),m&&m.register(e,t,e)}(a,e),a}function x(e){const t=e.map(w);return[t.map((e=>e[0])),(r=t.map((e=>e[1])),Array.prototype.concat.apply([],r))];var r}const v=new WeakMap;function w(e){for(const[t,r]of c)if(r.canHandle(e)){const[n,i]=r.serialize(e);return[{type:"HANDLER",name:t,value:n},i]}return[{type:"RAW",value:e},v.get(e)||[]]}function E(e){switch(e.type){case"HANDLER":return c.get(e.name).deserialize(e.value);case"RAW":return e.value}}function Q(e,t,r,n){return new Promise((i=>{const s=new Array(4).fill(0).map((()=>Math.floor(Math.random()*Number.MAX_SAFE_INTEGER).toString(16))).join("-");t.set(s,i),e.start&&e.start(),e.postMessage(Object.assign({id:s},r),n)}))}var k=r(8291),b=r.n(k),S=r(7812);const L=12;function T(e,t){const r=function(e,t){const r=e.map((e=>/\p{Unified_Ideograph}/u.test(e)?function(e,t){const r=[];return function e(n,i){let s=0,o=!1;for(const a of t)if(n.substr(0,a.length)===a){const t={missed:i.missed,term:i.term.concat({value:a})};n.length>a.length?e(n.substr(a.length),t):r.push(t),o=!0}else for(let t=a.length-1;t>s;t-=1){const u=a.substr(0,t);if(n.substr(0,t)===u){s=t;const a={missed:i.missed,term:i.term.concat({value:u,trailing:!0})};n.length>t?e(n.substr(t),a):r.push(a),o=!0;break}}o||(n.length>0?e(n.substr(1),{missed:i.missed+1,term:i.term}):i.term.length>0&&r.push(i))}(e,{missed:0,term:[]}),r.sort(((e,t)=>{const r=e.missed>0?1:0,n=t.missed>0?1:0;return r!==n?r-n:e.term.length-t.term.length})).map((e=>e.term))}(e,t):[{value:e}])).slice(0,L),n=r.filter((e=>e.length>1));let i=1,s=!1;for(const a of n)if(s)a.splice(1,a.length-1);else{a.length>6&&a.splice(6,a.length-6);const e=i*a.length;if(e>=L){if(e>L){const e=Math.floor(L/i);a.splice(e,a.length-e),i*=e}else i=e;i>6&&(s=!0)}else i=e}const o=[];return function e(t,n){if(t===r.length||n.length>=L)o.push(n.slice(0,L));else for(const i of r[t])e(t+1,n.concat(i))}(0,[]),o}(e,t);if(0===r.length)return[{tokens:e,term:e.map((e=>({value:e,presence:b().Query.presence.REQUIRED,wildcard:b().Query.wildcard.LEADING|b().Query.wildcard.TRAILING})))}];for(const o of r)o[o.length-1].maybeTyping=!0;const n=[];for(const o of S.BH)if("en"===o)S.sx||n.unshift(b().stopWordFilter);else{const e=b()[o];e.stopWordFilter&&n.unshift(e.stopWordFilter)}let i;if(n.length>0){const e=e=>n.reduce(((e,t)=>e.filter((e=>t(e.value)))),e);i=[];const t=[];for(const n of r){const r=e(n);i.push(r),r.length<n.length&&r.length>0&&t.push(r)}r.push(...t)}else i=r.slice();const s=[];for(const o of i)if(o.length>2)for(let e=o.length-1;e>=0;e-=1)s.push(o.slice(0,e).concat(o.slice(e+1)));return P(r).concat(P(s))}function P(e){return I(e).concat(I(e.filter((e=>{const t=e[e.length-1];return!t.trailing&&t.maybeTyping})),!0))}function I(e,t){return e.map((e=>({tokens:e.map((e=>e.value)),term:e.map((e=>({value:e.value,presence:b().Query.presence.REQUIRED,wildcard:(t?e.trailing||e.maybeTyping:e.trailing)?b().Query.wildcard.TRAILING:b().Query.wildcard.NONE})))})))}var O;!function(e){e[e.Title=0]="Title",e[e.Heading=1]="Heading",e[e.Description=2]="Description",e[e.Keywords=3]="Keywords",e[e.Content=4]="Content"}(O||(O={}));const R=new Map;h(class{async fetchIndexes(e,t){await this.lowLevelFetchIndexes(e,t)}async lowLevelFetchIndexes(e,t){const r=`${e}${t}`;let n=R.get(r);return n||(n=async function(e,t){const r=`${e}${S.IH.replace("{dir}",t?`-${t.replace(/\//g,"-")}`:"")}`;if(new URL(r,location.origin).origin!==location.origin)throw new Error("Unexpected version url");const n=await(await fetch(r)).json(),i=n.map(((e,t)=>{let{documents:r,index:n}=e;return{type:t,documents:r,index:b().Index.load(n)}})),s=n.reduce(((e,t)=>{for(const r of t.index.invertedIndex)/\p{Unified_Ideograph}/u.test(r[0][0])&&e.add(r[0]);return e}),new Set);return{wrappedIndexes:i,zhDictionary:Array.from(s)}}(e,t),R.set(r,n)),n}async search(e,t,r){const n=function(e,t){if(1===t.length&&["ja","jp","th"].includes(t[0]))return b()[t[0]].tokenizer(e).map((e=>e.toString()));let r=/[^-\s]+/g;return t.includes("zh")&&(r=/\w+|\p{Unified_Ideograph}+/gu),e.toLowerCase().match(r)||[]}(r,S.BH);if(0===n.length)return[];const{wrappedIndexes:i,zhDictionary:s}=await this.lowLevelFetchIndexes(e,t),o=T(n,s),a=[];e:for(const{term:u,tokens:l}of o)for(const{documents:e,index:t,type:r}of i)if(a.push(...t.query((e=>{for(const t of u)e.term(t.value,{wildcard:t.wildcard,presence:t.presence})})).slice(0,S.AT).filter((e=>!a.some((t=>t.document.i.toString()===e.ref)))).slice(0,S.AT-a.length).map((t=>{const n=e.find((e=>e.i.toString()===t.ref));return{document:n,type:r,page:r!==O.Title&&i[0].documents.find((e=>e.i===n.p)),metadata:t.matchData.metadata,tokens:l,score:t.score}}))),a.length>=S.AT)break e;return function(e){e.forEach(((e,t)=>{e.index=t})),e.sort(((t,r)=>{let n=t.type!==O.Heading&&t.type!==O.Content&&t.type!==O.Description||!t.page?t.index:e.findIndex((e=>e.document===t.page)),i=r.type!==O.Heading&&r.type!==O.Content&&r.type!==O.Description||!r.page?r.index:e.findIndex((e=>e.document===r.page));if(-1===n&&(n=t.index),-1===i&&(i=r.index),n===i){const e=(0===r.type?1:0)-(0===t.type?1:0);return 0===e?t.index-r.index:e}return n-i}))}(a),function(e){e.forEach(((t,r)=>{r>0&&t.page&&e.slice(0,r).some((e=>(e.type===O.Keywords?e.page:e.document)===t.page))&&(r<e.length-1&&e[r+1].page===t.page?t.isInterOfTree=!0:t.isLastOfTree=!0)}))}(a),a}})},8291:(e,t,r)=>{var n,i;!function(){var s,o,a,u,l,c,h,d,f,p,y,m,g,x,v,w,E,Q,k,b,S,L,T,P,I,O,R,C,F,N,j=function(e){var t=new j.Builder;return t.pipeline.add(j.trimmer,j.stopWordFilter,j.stemmer),t.searchPipeline.add(j.stemmer),e.call(t,t),t.build()};j.version="2.3.9",j.utils={},j.utils.warn=(s=this,function(e){s.console&&console.warn&&console.warn(e)}),j.utils.asString=function(e){return null==e?"":e.toString()},j.utils.clone=function(e){if(null==e)return e;for(var t=Object.create(null),r=Object.keys(e),n=0;n<r.length;n++){var i=r[n],s=e[i];if(Array.isArray(s))t[i]=s.slice();else{if("string"!=typeof s&&"number"!=typeof s&&"boolean"!=typeof s)throw new TypeError("clone is not deep and does not support nested objects");t[i]=s}}return t},j.FieldRef=function(e,t,r){this.docRef=e,this.fieldName=t,this._stringValue=r},j.FieldRef.joiner="/",j.FieldRef.fromString=function(e){var t=e.indexOf(j.FieldRef.joiner);if(-1===t)throw"malformed field ref string";var r=e.slice(0,t),n=e.slice(t+1);return new j.FieldRef(n,r,e)},j.FieldRef.prototype.toString=function(){return null==this._stringValue&&(this._stringValue=this.fieldName+j.FieldRef.joiner+this.docRef),this._stringValue},j.Set=function(e){if(this.elements=Object.create(null),e){this.length=e.length;for(var t=0;t<this.length;t++)this.elements[e[t]]=!0}else this.length=0},j.Set.complete={intersect:function(e){return e},union:function(){return this},contains:function(){return!0}},j.Set.empty={intersect:function(){return this},union:function(e){return e},contains:function(){return!1}},j.Set.prototype.contains=function(e){return!!this.elements[e]},j.Set.prototype.intersect=function(e){var t,r,n,i=[];if(e===j.Set.complete)return this;if(e===j.Set.empty)return e;this.length<e.length?(t=this,r=e):(t=e,r=this),n=Object.keys(t.elements);for(var s=0;s<n.length;s++){var o=n[s];o in r.elements&&i.push(o)}return new j.Set(i)},j.Set.prototype.union=function(e){return e===j.Set.complete?j.Set.complete:e===j.Set.empty?this:new j.Set(Object.keys(this.elements).concat(Object.keys(e.elements)))},j.idf=function(e,t){var r=0;for(var n in e)"_index"!=n&&(r+=Object.keys(e[n]).length);var i=(t-r+.5)/(r+.5);return Math.log(1+Math.abs(i))},j.Token=function(e,t){this.str=e||"",this.metadata=t||{}},j.Token.prototype.toString=function(){return this.str},j.Token.prototype.update=function(e){return this.str=e(this.str,this.metadata),this},j.Token.prototype.clone=function(e){return e=e||function(e){return e},new j.Token(e(this.str,this.metadata),this.metadata)},j.tokenizer=function(e,t){if(null==e||null==e)return[];if(Array.isArray(e))return e.map((function(e){return new j.Token(j.utils.asString(e).toLowerCase(),j.utils.clone(t))}));for(var r=e.toString().toLowerCase(),n=r.length,i=[],s=0,o=0;s<=n;s++){var a=s-o;if(r.charAt(s).match(j.tokenizer.separator)||s==n){if(a>0){var u=j.utils.clone(t)||{};u.position=[o,a],u.index=i.length,i.push(new j.Token(r.slice(o,s),u))}o=s+1}}return i},j.tokenizer.separator=/[\s\-]+/,j.Pipeline=function(){this._stack=[]},j.Pipeline.registeredFunctions=Object.create(null),j.Pipeline.registerFunction=function(e,t){t in this.registeredFunctions&&j.utils.warn("Overwriting existing registered function: "+t),e.label=t,j.Pipeline.registeredFunctions[e.label]=e},j.Pipeline.warnIfFunctionNotRegistered=function(e){e.label&&e.label in this.registeredFunctions||j.utils.warn("Function is not registered with pipeline. This may cause problems when serialising the index.\n",e)},j.Pipeline.load=function(e){var t=new j.Pipeline;return e.forEach((function(e){var r=j.Pipeline.registeredFunctions[e];if(!r)throw new Error("Cannot load unregistered function: "+e);t.add(r)})),t},j.Pipeline.prototype.add=function(){Array.prototype.slice.call(arguments).forEach((function(e){j.Pipeline.warnIfFunctionNotRegistered(e),this._stack.push(e)}),this)},j.Pipeline.prototype.after=function(e,t){j.Pipeline.warnIfFunctionNotRegistered(t);var r=this._stack.indexOf(e);if(-1==r)throw new Error("Cannot find existingFn");r+=1,this._stack.splice(r,0,t)},j.Pipeline.prototype.before=function(e,t){j.Pipeline.warnIfFunctionNotRegistered(t);var r=this._stack.indexOf(e);if(-1==r)throw new Error("Cannot find existingFn");this._stack.splice(r,0,t)},j.Pipeline.prototype.remove=function(e){var t=this._stack.indexOf(e);-1!=t&&this._stack.splice(t,1)},j.Pipeline.prototype.run=function(e){for(var t=this._stack.length,r=0;r<t;r++){for(var n=this._stack[r],i=[],s=0;s<e.length;s++){var o=n(e[s],s,e);if(null!=o&&""!==o)if(Array.isArray(o))for(var a=0;a<o.length;a++)i.push(o[a]);else i.push(o)}e=i}return e},j.Pipeline.prototype.runString=function(e,t){var r=new j.Token(e,t);return this.run([r]).map((function(e){return e.toString()}))},j.Pipeline.prototype.reset=function(){this._stack=[]},j.Pipeline.prototype.toJSON=function(){return this._stack.map((function(e){return j.Pipeline.warnIfFunctionNotRegistered(e),e.label}))},j.Vector=function(e){this._magnitude=0,this.elements=e||[]},j.Vector.prototype.positionForIndex=function(e){if(0==this.elements.length)return 0;for(var t=0,r=this.elements.length/2,n=r-t,i=Math.floor(n/2),s=this.elements[2*i];n>1&&(s<e&&(t=i),s>e&&(r=i),s!=e);)n=r-t,i=t+Math.floor(n/2),s=this.elements[2*i];return s==e||s>e?2*i:s<e?2*(i+1):void 0},j.Vector.prototype.insert=function(e,t){this.upsert(e,t,(function(){throw"duplicate index"}))},j.Vector.prototype.upsert=function(e,t,r){this._magnitude=0;var n=this.positionForIndex(e);this.elements[n]==e?this.elements[n+1]=r(this.elements[n+1],t):this.elements.splice(n,0,e,t)},j.Vector.prototype.magnitude=function(){if(this._magnitude)return this._magnitude;for(var e=0,t=this.elements.length,r=1;r<t;r+=2){var n=this.elements[r];e+=n*n}return this._magnitude=Math.sqrt(e)},j.Vector.prototype.dot=function(e){for(var t=0,r=this.elements,n=e.elements,i=r.length,s=n.length,o=0,a=0,u=0,l=0;u<i&&l<s;)(o=r[u])<(a=n[l])?u+=2:o>a?l+=2:o==a&&(t+=r[u+1]*n[l+1],u+=2,l+=2);return t},j.Vector.prototype.similarity=function(e){return this.dot(e)/this.magnitude()||0},j.Vector.prototype.toArray=function(){for(var e=new Array(this.elements.length/2),t=1,r=0;t<this.elements.length;t+=2,r++)e[r]=this.elements[t];return e},j.Vector.prototype.toJSON=function(){return this.elements},j.stemmer=(o={ational:"ate",tional:"tion",enci:"ence",anci:"ance",izer:"ize",bli:"ble",alli:"al",entli:"ent",eli:"e",ousli:"ous",ization:"ize",ation:"ate",ator:"ate",alism:"al",iveness:"ive",fulness:"ful",ousness:"ous",aliti:"al",iviti:"ive",biliti:"ble",logi:"log"},a={icate:"ic",ative:"",alize:"al",iciti:"ic",ical:"ic",ful:"",ness:""},h="^("+(l="[^aeiou][^aeiouy]*")+")?"+(c=(u="[aeiouy]")+"[aeiou]*")+l+"("+c+")?$",d="^("+l+")?"+c+l+c+l,f="^("+l+")?"+u,p=new RegExp("^("+l+")?"+c+l),y=new RegExp(d),m=new RegExp(h),g=new RegExp(f),x=/^(.+?)(ss|i)es$/,v=/^(.+?)([^s])s$/,w=/^(.+?)eed$/,E=/^(.+?)(ed|ing)$/,Q=/.$/,k=/(at|bl|iz)$/,b=new RegExp("([^aeiouylsz])\\1$"),S=new RegExp("^"+l+u+"[^aeiouwxy]$"),L=/^(.+?[^aeiou])y$/,T=/^(.+?)(ational|tional|enci|anci|izer|bli|alli|entli|eli|ousli|ization|ation|ator|alism|iveness|fulness|ousness|aliti|iviti|biliti|logi)$/,P=/^(.+?)(icate|ative|alize|iciti|ical|ful|ness)$/,I=/^(.+?)(al|ance|ence|er|ic|able|ible|ant|ement|ment|ent|ou|ism|ate|iti|ous|ive|ize)$/,O=/^(.+?)(s|t)(ion)$/,R=/^(.+?)e$/,C=/ll$/,F=new RegExp("^"+l+u+"[^aeiouwxy]$"),N=function(e){var t,r,n,i,s,u,l;if(e.length<3)return e;if("y"==(n=e.substr(0,1))&&(e=n.toUpperCase()+e.substr(1)),s=v,(i=x).test(e)?e=e.replace(i,"$1$2"):s.test(e)&&(e=e.replace(s,"$1$2")),s=E,(i=w).test(e)){var c=i.exec(e);(i=p).test(c[1])&&(i=Q,e=e.replace(i,""))}else s.test(e)&&(t=(c=s.exec(e))[1],(s=g).test(t)&&(u=b,l=S,(s=k).test(e=t)?e+="e":u.test(e)?(i=Q,e=e.replace(i,"")):l.test(e)&&(e+="e")));return(i=L).test(e)&&(e=(t=(c=i.exec(e))[1])+"i"),(i=T).test(e)&&(t=(c=i.exec(e))[1],r=c[2],(i=p).test(t)&&(e=t+o[r])),(i=P).test(e)&&(t=(c=i.exec(e))[1],r=c[2],(i=p).test(t)&&(e=t+a[r])),s=O,(i=I).test(e)?(t=(c=i.exec(e))[1],(i=y).test(t)&&(e=t)):s.test(e)&&(t=(c=s.exec(e))[1]+c[2],(s=y).test(t)&&(e=t)),(i=R).test(e)&&(t=(c=i.exec(e))[1],s=m,u=F,((i=y).test(t)||s.test(t)&&!u.test(t))&&(e=t)),s=y,(i=C).test(e)&&s.test(e)&&(i=Q,e=e.replace(i,"")),"y"==n&&(e=n.toLowerCase()+e.substr(1)),e},function(e){return e.update(N)}),j.Pipeline.registerFunction(j.stemmer,"stemmer"),j.generateStopWordFilter=function(e){var t=e.reduce((function(e,t){return e[t]=t,e}),{});return function(e){if(e&&t[e.toString()]!==e.toString())return e}},j.stopWordFilter=j.generateStopWordFilter(["a","able","about","across","after","all","almost","also","am","among","an","and","any","are","as","at","be","because","been","but","by","can","cannot","could","dear","did","do","does","either","else","ever","every","for","from","get","got","had","has","have","he","her","hers","him","his","how","however","i","if","in","into","is","it","its","just","least","let","like","likely","may","me","might","most","must","my","neither","no","nor","not","of","off","often","on","only","or","other","our","own","rather","said","say","says","she","should","since","so","some","than","that","the","their","them","then","there","these","they","this","tis","to","too","twas","us","wants","was","we","were","what","when","where","which","while","who","whom","why","will","with","would","yet","you","your"]),j.Pipeline.registerFunction(j.stopWordFilter,"stopWordFilter"),j.trimmer=function(e){return e.update((function(e){return e.replace(/^\W+/,"").replace(/\W+$/,"")}))},j.Pipeline.registerFunction(j.trimmer,"trimmer"),j.TokenSet=function(){this.final=!1,this.edges={},this.id=j.TokenSet._nextId,j.TokenSet._nextId+=1},j.TokenSet._nextId=1,j.TokenSet.fromArray=function(e){for(var t=new j.TokenSet.Builder,r=0,n=e.length;r<n;r++)t.insert(e[r]);return t.finish(),t.root},j.TokenSet.fromClause=function(e){return"editDistance"in e?j.TokenSet.fromFuzzyString(e.term,e.editDistance):j.TokenSet.fromString(e.term)},j.TokenSet.fromFuzzyString=function(e,t){for(var r=new j.TokenSet,n=[{node:r,editsRemaining:t,str:e}];n.length;){var i=n.pop();if(i.str.length>0){var s,o=i.str.charAt(0);o in i.node.edges?s=i.node.edges[o]:(s=new j.TokenSet,i.node.edges[o]=s),1==i.str.length&&(s.final=!0),n.push({node:s,editsRemaining:i.editsRemaining,str:i.str.slice(1)})}if(0!=i.editsRemaining){if("*"in i.node.edges)var a=i.node.edges["*"];else{a=new j.TokenSet;i.node.edges["*"]=a}if(0==i.str.length&&(a.final=!0),n.push({node:a,editsRemaining:i.editsRemaining-1,str:i.str}),i.str.length>1&&n.push({node:i.node,editsRemaining:i.editsRemaining-1,str:i.str.slice(1)}),1==i.str.length&&(i.node.final=!0),i.str.length>=1){if("*"in i.node.edges)var u=i.node.edges["*"];else{u=new j.TokenSet;i.node.edges["*"]=u}1==i.str.length&&(u.final=!0),n.push({node:u,editsRemaining:i.editsRemaining-1,str:i.str.slice(1)})}if(i.str.length>1){var l,c=i.str.charAt(0),h=i.str.charAt(1);h in i.node.edges?l=i.node.edges[h]:(l=new j.TokenSet,i.node.edges[h]=l),1==i.str.length&&(l.final=!0),n.push({node:l,editsRemaining:i.editsRemaining-1,str:c+i.str.slice(2)})}}}return r},j.TokenSet.fromString=function(e){for(var t=new j.TokenSet,r=t,n=0,i=e.length;n<i;n++){var s=e[n],o=n==i-1;if("*"==s)t.edges[s]=t,t.final=o;else{var a=new j.TokenSet;a.final=o,t.edges[s]=a,t=a}}return r},j.TokenSet.prototype.toArray=function(){for(var e=[],t=[{prefix:"",node:this}];t.length;){var r=t.pop(),n=Object.keys(r.node.edges),i=n.length;r.node.final&&(r.prefix.charAt(0),e.push(r.prefix));for(var s=0;s<i;s++){var o=n[s];t.push({prefix:r.prefix.concat(o),node:r.node.edges[o]})}}return e},j.TokenSet.prototype.toString=function(){if(this._str)return this._str;for(var e=this.final?"1":"0",t=Object.keys(this.edges).sort(),r=t.length,n=0;n<r;n++){var i=t[n];e=e+i+this.edges[i].id}return e},j.TokenSet.prototype.intersect=function(e){for(var t=new j.TokenSet,r=void 0,n=[{qNode:e,output:t,node:this}];n.length;){r=n.pop();for(var i=Object.keys(r.qNode.edges),s=i.length,o=Object.keys(r.node.edges),a=o.length,u=0;u<s;u++)for(var l=i[u],c=0;c<a;c++){var h=o[c];if(h==l||"*"==l){var d=r.node.edges[h],f=r.qNode.edges[l],p=d.final&&f.final,y=void 0;h in r.output.edges?(y=r.output.edges[h]).final=y.final||p:((y=new j.TokenSet).final=p,r.output.edges[h]=y),n.push({qNode:f,output:y,node:d})}}}return t},j.TokenSet.Builder=function(){this.previousWord="",this.root=new j.TokenSet,this.uncheckedNodes=[],this.minimizedNodes={}},j.TokenSet.Builder.prototype.insert=function(e){var t,r=0;if(e<this.previousWord)throw new Error("Out of order word insertion");for(var n=0;n<e.length&&n<this.previousWord.length&&e[n]==this.previousWord[n];n++)r++;this.minimize(r),t=0==this.uncheckedNodes.length?this.root:this.uncheckedNodes[this.uncheckedNodes.length-1].child;for(n=r;n<e.length;n++){var i=new j.TokenSet,s=e[n];t.edges[s]=i,this.uncheckedNodes.push({parent:t,char:s,child:i}),t=i}t.final=!0,this.previousWord=e},j.TokenSet.Builder.prototype.finish=function(){this.minimize(0)},j.TokenSet.Builder.prototype.minimize=function(e){for(var t=this.uncheckedNodes.length-1;t>=e;t--){var r=this.uncheckedNodes[t],n=r.child.toString();n in this.minimizedNodes?r.parent.edges[r.char]=this.minimizedNodes[n]:(r.child._str=n,this.minimizedNodes[n]=r.child),this.uncheckedNodes.pop()}},j.Index=function(e){this.invertedIndex=e.invertedIndex,this.fieldVectors=e.fieldVectors,this.tokenSet=e.tokenSet,this.fields=e.fields,this.pipeline=e.pipeline},j.Index.prototype.search=function(e){return this.query((function(t){new j.QueryParser(e,t).parse()}))},j.Index.prototype.query=function(e){for(var t=new j.Query(this.fields),r=Object.create(null),n=Object.create(null),i=Object.create(null),s=Object.create(null),o=Object.create(null),a=0;a<this.fields.length;a++)n[this.fields[a]]=new j.Vector;e.call(t,t);for(a=0;a<t.clauses.length;a++){var u=t.clauses[a],l=null,c=j.Set.empty;l=u.usePipeline?this.pipeline.runString(u.term,{fields:u.fields}):[u.term];for(var h=0;h<l.length;h++){var d=l[h];u.term=d;var f=j.TokenSet.fromClause(u),p=this.tokenSet.intersect(f).toArray();if(0===p.length&&u.presence===j.Query.presence.REQUIRED){for(var y=0;y<u.fields.length;y++){s[R=u.fields[y]]=j.Set.empty}break}for(var m=0;m<p.length;m++){var g=p[m],x=this.invertedIndex[g],v=x._index;for(y=0;y<u.fields.length;y++){var w=x[R=u.fields[y]],E=Object.keys(w),Q=g+"/"+R,k=new j.Set(E);if(u.presence==j.Query.presence.REQUIRED&&(c=c.union(k),void 0===s[R]&&(s[R]=j.Set.complete)),u.presence!=j.Query.presence.PROHIBITED){if(n[R].upsert(v,u.boost,(function(e,t){return e+t})),!i[Q]){for(var b=0;b<E.length;b++){var S,L=E[b],T=new j.FieldRef(L,R),P=w[L];void 0===(S=r[T])?r[T]=new j.MatchData(g,R,P):S.add(g,R,P)}i[Q]=!0}}else void 0===o[R]&&(o[R]=j.Set.empty),o[R]=o[R].union(k)}}}if(u.presence===j.Query.presence.REQUIRED)for(y=0;y<u.fields.length;y++){s[R=u.fields[y]]=s[R].intersect(c)}}var I=j.Set.complete,O=j.Set.empty;for(a=0;a<this.fields.length;a++){var R;s[R=this.fields[a]]&&(I=I.intersect(s[R])),o[R]&&(O=O.union(o[R]))}var C=Object.keys(r),F=[],N=Object.create(null);if(t.isNegated()){C=Object.keys(this.fieldVectors);for(a=0;a<C.length;a++){T=C[a];var _=j.FieldRef.fromString(T);r[T]=new j.MatchData}}for(a=0;a<C.length;a++){var D=(_=j.FieldRef.fromString(C[a])).docRef;if(I.contains(D)&&!O.contains(D)){var A,z=this.fieldVectors[_],M=n[_.fieldName].similarity(z);if(void 0!==(A=N[D]))A.score+=M,A.matchData.combine(r[_]);else{var B={ref:D,score:M,matchData:r[_]};N[D]=B,F.push(B)}}}return F.sort((function(e,t){return t.score-e.score}))},j.Index.prototype.toJSON=function(){var e=Object.keys(this.invertedIndex).sort().map((function(e){return[e,this.invertedIndex[e]]}),this),t=Object.keys(this.fieldVectors).map((function(e){return[e,this.fieldVectors[e].toJSON()]}),this);return{version:j.version,fields:this.fields,fieldVectors:t,invertedIndex:e,pipeline:this.pipeline.toJSON()}},j.Index.load=function(e){var t={},r={},n=e.fieldVectors,i=Object.create(null),s=e.invertedIndex,o=new j.TokenSet.Builder,a=j.Pipeline.load(e.pipeline);e.version!=j.version&&j.utils.warn("Version mismatch when loading serialised index. Current version of lunr '"+j.version+"' does not match serialized index '"+e.version+"'");for(var u=0;u<n.length;u++){var l=(h=n[u])[0],c=h[1];r[l]=new j.Vector(c)}for(u=0;u<s.length;u++){var h,d=(h=s[u])[0],f=h[1];o.insert(d),i[d]=f}return o.finish(),t.fields=e.fields,t.fieldVectors=r,t.invertedIndex=i,t.tokenSet=o.root,t.pipeline=a,new j.Index(t)},j.Builder=function(){this._ref="id",this._fields=Object.create(null),this._documents=Object.create(null),this.invertedIndex=Object.create(null),this.fieldTermFrequencies={},this.fieldLengths={},this.tokenizer=j.tokenizer,this.pipeline=new j.Pipeline,this.searchPipeline=new j.Pipeline,this.documentCount=0,this._b=.75,this._k1=1.2,this.termIndex=0,this.metadataWhitelist=[]},j.Builder.prototype.ref=function(e){this._ref=e},j.Builder.prototype.field=function(e,t){if(/\//.test(e))throw new RangeError("Field '"+e+"' contains illegal character '/'");this._fields[e]=t||{}},j.Builder.prototype.b=function(e){this._b=e<0?0:e>1?1:e},j.Builder.prototype.k1=function(e){this._k1=e},j.Builder.prototype.add=function(e,t){var r=e[this._ref],n=Object.keys(this._fields);this._documents[r]=t||{},this.documentCount+=1;for(var i=0;i<n.length;i++){var s=n[i],o=this._fields[s].extractor,a=o?o(e):e[s],u=this.tokenizer(a,{fields:[s]}),l=this.pipeline.run(u),c=new j.FieldRef(r,s),h=Object.create(null);this.fieldTermFrequencies[c]=h,this.fieldLengths[c]=0,this.fieldLengths[c]+=l.length;for(var d=0;d<l.length;d++){var f=l[d];if(null==h[f]&&(h[f]=0),h[f]+=1,null==this.invertedIndex[f]){var p=Object.create(null);p._index=this.termIndex,this.termIndex+=1;for(var y=0;y<n.length;y++)p[n[y]]=Object.create(null);this.invertedIndex[f]=p}null==this.invertedIndex[f][s][r]&&(this.invertedIndex[f][s][r]=Object.create(null));for(var m=0;m<this.metadataWhitelist.length;m++){var g=this.metadataWhitelist[m],x=f.metadata[g];null==this.invertedIndex[f][s][r][g]&&(this.invertedIndex[f][s][r][g]=[]),this.invertedIndex[f][s][r][g].push(x)}}}},j.Builder.prototype.calculateAverageFieldLengths=function(){for(var e=Object.keys(this.fieldLengths),t=e.length,r={},n={},i=0;i<t;i++){var s=j.FieldRef.fromString(e[i]),o=s.fieldName;n[o]||(n[o]=0),n[o]+=1,r[o]||(r[o]=0),r[o]+=this.fieldLengths[s]}var a=Object.keys(this._fields);for(i=0;i<a.length;i++){var u=a[i];r[u]=r[u]/n[u]}this.averageFieldLength=r},j.Builder.prototype.createFieldVectors=function(){for(var e={},t=Object.keys(this.fieldTermFrequencies),r=t.length,n=Object.create(null),i=0;i<r;i++){for(var s=j.FieldRef.fromString(t[i]),o=s.fieldName,a=this.fieldLengths[s],u=new j.Vector,l=this.fieldTermFrequencies[s],c=Object.keys(l),h=c.length,d=this._fields[o].boost||1,f=this._documents[s.docRef].boost||1,p=0;p<h;p++){var y,m,g,x=c[p],v=l[x],w=this.invertedIndex[x]._index;void 0===n[x]?(y=j.idf(this.invertedIndex[x],this.documentCount),n[x]=y):y=n[x],m=y*((this._k1+1)*v)/(this._k1*(1-this._b+this._b*(a/this.averageFieldLength[o]))+v),m*=d,m*=f,g=Math.round(1e3*m)/1e3,u.insert(w,g)}e[s]=u}this.fieldVectors=e},j.Builder.prototype.createTokenSet=function(){this.tokenSet=j.TokenSet.fromArray(Object.keys(this.invertedIndex).sort())},j.Builder.prototype.build=function(){return this.calculateAverageFieldLengths(),this.createFieldVectors(),this.createTokenSet(),new j.Index({invertedIndex:this.invertedIndex,fieldVectors:this.fieldVectors,tokenSet:this.tokenSet,fields:Object.keys(this._fields),pipeline:this.searchPipeline})},j.Builder.prototype.use=function(e){var t=Array.prototype.slice.call(arguments,1);t.unshift(this),e.apply(this,t)},j.MatchData=function(e,t,r){for(var n=Object.create(null),i=Object.keys(r||{}),s=0;s<i.length;s++){var o=i[s];n[o]=r[o].slice()}this.metadata=Object.create(null),void 0!==e&&(this.metadata[e]=Object.create(null),this.metadata[e][t]=n)},j.MatchData.prototype.combine=function(e){for(var t=Object.keys(e.metadata),r=0;r<t.length;r++){var n=t[r],i=Object.keys(e.metadata[n]);null==this.metadata[n]&&(this.metadata[n]=Object.create(null));for(var s=0;s<i.length;s++){var o=i[s],a=Object.keys(e.metadata[n][o]);null==this.metadata[n][o]&&(this.metadata[n][o]=Object.create(null));for(var u=0;u<a.length;u++){var l=a[u];null==this.metadata[n][o][l]?this.metadata[n][o][l]=e.metadata[n][o][l]:this.metadata[n][o][l]=this.metadata[n][o][l].concat(e.metadata[n][o][l])}}}},j.MatchData.prototype.add=function(e,t,r){if(!(e in this.metadata))return this.metadata[e]=Object.create(null),void(this.metadata[e][t]=r);if(t in this.metadata[e])for(var n=Object.keys(r),i=0;i<n.length;i++){var s=n[i];s in this.metadata[e][t]?this.metadata[e][t][s]=this.metadata[e][t][s].concat(r[s]):this.metadata[e][t][s]=r[s]}else this.metadata[e][t]=r},j.Query=function(e){this.clauses=[],this.allFields=e},j.Query.wildcard=new String("*"),j.Query.wildcard.NONE=0,j.Query.wildcard.LEADING=1,j.Query.wildcard.TRAILING=2,j.Query.presence={OPTIONAL:1,REQUIRED:2,PROHIBITED:3},j.Query.prototype.clause=function(e){return"fields"in e||(e.fields=this.allFields),"boost"in e||(e.boost=1),"usePipeline"in e||(e.usePipeline=!0),"wildcard"in e||(e.wildcard=j.Query.wildcard.NONE),e.wildcard&j.Query.wildcard.LEADING&&e.term.charAt(0)!=j.Query.wildcard&&(e.term="*"+e.term),e.wildcard&j.Query.wildcard.TRAILING&&e.term.slice(-1)!=j.Query.wildcard&&(e.term=e.term+"*"),"presence"in e||(e.presence=j.Query.presence.OPTIONAL),this.clauses.push(e),this},j.Query.prototype.isNegated=function(){for(var e=0;e<this.clauses.length;e++)if(this.clauses[e].presence!=j.Query.presence.PROHIBITED)return!1;return!0},j.Query.prototype.term=function(e,t){if(Array.isArray(e))return e.forEach((function(e){this.term(e,j.utils.clone(t))}),this),this;var r=t||{};return r.term=e.toString(),this.clause(r),this},j.QueryParseError=function(e,t,r){this.name="QueryParseError",this.message=e,this.start=t,this.end=r},j.QueryParseError.prototype=new Error,j.QueryLexer=function(e){this.lexemes=[],this.str=e,this.length=e.length,this.pos=0,this.start=0,this.escapeCharPositions=[]},j.QueryLexer.prototype.run=function(){for(var e=j.QueryLexer.lexText;e;)e=e(this)},j.QueryLexer.prototype.sliceString=function(){for(var e=[],t=this.start,r=this.pos,n=0;n<this.escapeCharPositions.length;n++)r=this.escapeCharPositions[n],e.push(this.str.slice(t,r)),t=r+1;return e.push(this.str.slice(t,this.pos)),this.escapeCharPositions.length=0,e.join("")},j.QueryLexer.prototype.emit=function(e){this.lexemes.push({type:e,str:this.sliceString(),start:this.start,end:this.pos}),this.start=this.pos},j.QueryLexer.prototype.escapeCharacter=function(){this.escapeCharPositions.push(this.pos-1),this.pos+=1},j.QueryLexer.prototype.next=function(){if(this.pos>=this.length)return j.QueryLexer.EOS;var e=this.str.charAt(this.pos);return this.pos+=1,e},j.QueryLexer.prototype.width=function(){return this.pos-this.start},j.QueryLexer.prototype.ignore=function(){this.start==this.pos&&(this.pos+=1),this.start=this.pos},j.QueryLexer.prototype.backup=function(){this.pos-=1},j.QueryLexer.prototype.acceptDigitRun=function(){var e,t;do{t=(e=this.next()).charCodeAt(0)}while(t>47&&t<58);e!=j.QueryLexer.EOS&&this.backup()},j.QueryLexer.prototype.more=function(){return this.pos<this.length},j.QueryLexer.EOS="EOS",j.QueryLexer.FIELD="FIELD",j.QueryLexer.TERM="TERM",j.QueryLexer.EDIT_DISTANCE="EDIT_DISTANCE",j.QueryLexer.BOOST="BOOST",j.QueryLexer.PRESENCE="PRESENCE",j.QueryLexer.lexField=function(e){return e.backup(),e.emit(j.QueryLexer.FIELD),e.ignore(),j.QueryLexer.lexText},j.QueryLexer.lexTerm=function(e){if(e.width()>1&&(e.backup(),e.emit(j.QueryLexer.TERM)),e.ignore(),e.more())return j.QueryLexer.lexText},j.QueryLexer.lexEditDistance=function(e){return e.ignore(),e.acceptDigitRun(),e.emit(j.QueryLexer.EDIT_DISTANCE),j.QueryLexer.lexText},j.QueryLexer.lexBoost=function(e){return e.ignore(),e.acceptDigitRun(),e.emit(j.QueryLexer.BOOST),j.QueryLexer.lexText},j.QueryLexer.lexEOS=function(e){e.width()>0&&e.emit(j.QueryLexer.TERM)},j.QueryLexer.termSeparator=j.tokenizer.separator,j.QueryLexer.lexText=function(e){for(;;){var t=e.next();if(t==j.QueryLexer.EOS)return j.QueryLexer.lexEOS;if(92!=t.charCodeAt(0)){if(":"==t)return j.QueryLexer.lexField;if("~"==t)return e.backup(),e.width()>0&&e.emit(j.QueryLexer.TERM),j.QueryLexer.lexEditDistance;if("^"==t)return e.backup(),e.width()>0&&e.emit(j.QueryLexer.TERM),j.QueryLexer.lexBoost;if("+"==t&&1===e.width())return e.emit(j.QueryLexer.PRESENCE),j.QueryLexer.lexText;if("-"==t&&1===e.width())return e.emit(j.QueryLexer.PRESENCE),j.QueryLexer.lexText;if(t.match(j.QueryLexer.termSeparator))return j.QueryLexer.lexTerm}else e.escapeCharacter()}},j.QueryParser=function(e,t){this.lexer=new j.QueryLexer(e),this.query=t,this.currentClause={},this.lexemeIdx=0},j.QueryParser.prototype.parse=function(){this.lexer.run(),this.lexemes=this.lexer.lexemes;for(var e=j.QueryParser.parseClause;e;)e=e(this);return this.query},j.QueryParser.prototype.peekLexeme=function(){return this.lexemes[this.lexemeIdx]},j.QueryParser.prototype.consumeLexeme=function(){var e=this.peekLexeme();return this.lexemeIdx+=1,e},j.QueryParser.prototype.nextClause=function(){var e=this.currentClause;this.query.clause(e),this.currentClause={}},j.QueryParser.parseClause=function(e){var t=e.peekLexeme();if(null!=t)switch(t.type){case j.QueryLexer.PRESENCE:return j.QueryParser.parsePresence;case j.QueryLexer.FIELD:return j.QueryParser.parseField;case j.QueryLexer.TERM:return j.QueryParser.parseTerm;default:var r="expected either a field or a term, found "+t.type;throw t.str.length>=1&&(r+=" with value '"+t.str+"'"),new j.QueryParseError(r,t.start,t.end)}},j.QueryParser.parsePresence=function(e){var t=e.consumeLexeme();if(null!=t){switch(t.str){case"-":e.currentClause.presence=j.Query.presence.PROHIBITED;break;case"+":e.currentClause.presence=j.Query.presence.REQUIRED;break;default:var r="unrecognised presence operator'"+t.str+"'";throw new j.QueryParseError(r,t.start,t.end)}var n=e.peekLexeme();if(null==n){r="expecting term or field, found nothing";throw new j.QueryParseError(r,t.start,t.end)}switch(n.type){case j.QueryLexer.FIELD:return j.QueryParser.parseField;case j.QueryLexer.TERM:return j.QueryParser.parseTerm;default:r="expecting term or field, found '"+n.type+"'";throw new j.QueryParseError(r,n.start,n.end)}}},j.QueryParser.parseField=function(e){var t=e.consumeLexeme();if(null!=t){if(-1==e.query.allFields.indexOf(t.str)){var r=e.query.allFields.map((function(e){return"'"+e+"'"})).join(", "),n="unrecognised field '"+t.str+"', possible fields: "+r;throw new j.QueryParseError(n,t.start,t.end)}e.currentClause.fields=[t.str];var i=e.peekLexeme();if(null==i){n="expecting term, found nothing";throw new j.QueryParseError(n,t.start,t.end)}if(i.type===j.QueryLexer.TERM)return j.QueryParser.parseTerm;n="expecting term, found '"+i.type+"'";throw new j.QueryParseError(n,i.start,i.end)}},j.QueryParser.parseTerm=function(e){var t=e.consumeLexeme();if(null!=t){e.currentClause.term=t.str.toLowerCase(),-1!=t.str.indexOf("*")&&(e.currentClause.usePipeline=!1);var r=e.peekLexeme();if(null!=r)switch(r.type){case j.QueryLexer.TERM:return e.nextClause(),j.QueryParser.parseTerm;case j.QueryLexer.FIELD:return e.nextClause(),j.QueryParser.parseField;case j.QueryLexer.EDIT_DISTANCE:return j.QueryParser.parseEditDistance;case j.QueryLexer.BOOST:return j.QueryParser.parseBoost;case j.QueryLexer.PRESENCE:return e.nextClause(),j.QueryParser.parsePresence;default:var n="Unexpected lexeme type '"+r.type+"'";throw new j.QueryParseError(n,r.start,r.end)}else e.nextClause()}},j.QueryParser.parseEditDistance=function(e){var t=e.consumeLexeme();if(null!=t){var r=parseInt(t.str,10);if(isNaN(r)){var n="edit distance must be numeric";throw new j.QueryParseError(n,t.start,t.end)}e.currentClause.editDistance=r;var i=e.peekLexeme();if(null!=i)switch(i.type){case j.QueryLexer.TERM:return e.nextClause(),j.QueryParser.parseTerm;case j.QueryLexer.FIELD:return e.nextClause(),j.QueryParser.parseField;case j.QueryLexer.EDIT_DISTANCE:return j.QueryParser.parseEditDistance;case j.QueryLexer.BOOST:return j.QueryParser.parseBoost;case j.QueryLexer.PRESENCE:return e.nextClause(),j.QueryParser.parsePresence;default:n="Unexpected lexeme type '"+i.type+"'";throw new j.QueryParseError(n,i.start,i.end)}else e.nextClause()}},j.QueryParser.parseBoost=function(e){var t=e.consumeLexeme();if(null!=t){var r=parseInt(t.str,10);if(isNaN(r)){var n="boost must be numeric";throw new j.QueryParseError(n,t.start,t.end)}e.currentClause.boost=r;var i=e.peekLexeme();if(null!=i)switch(i.type){case j.QueryLexer.TERM:return e.nextClause(),j.QueryParser.parseTerm;case j.QueryLexer.FIELD:return e.nextClause(),j.QueryParser.parseField;case j.QueryLexer.EDIT_DISTANCE:return j.QueryParser.parseEditDistance;case j.QueryLexer.BOOST:return j.QueryParser.parseBoost;case j.QueryLexer.PRESENCE:return e.nextClause(),j.QueryParser.parsePresence;default:n="Unexpected lexeme type '"+i.type+"'";throw new j.QueryParseError(n,i.start,i.end)}else e.nextClause()}},void 0===(i="function"==typeof(n=function(){return j})?n.call(t,r,t,e):n)||(e.exports=i)}()}}]); \ No newline at end of file diff --git a/assets/js/46d93a8f.60d9bfdb.js b/assets/js/46d93a8f.d200022c.js similarity index 99% rename from assets/js/46d93a8f.60d9bfdb.js rename to assets/js/46d93a8f.d200022c.js index 95947b7f..f8e969ad 100644 --- a/assets/js/46d93a8f.60d9bfdb.js +++ b/assets/js/46d93a8f.d200022c.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[734],{9445:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>o,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"guides/ssr","title":"Supporting Server Side Rendering","description":"Server side rendering (SSR) is an approach to serving JavaScript rendered web applications (such as React, Vue, Angular, etc...) that tries to improve time-to-paint, SEO support and more.","source":"@site/docs/guides/server-side-rendering.md","sourceDirName":"guides","slug":"/guides/ssr","permalink":"/docs/guides/ssr","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/server-side-rendering.md","tags":[],"version":"current","frontMatter":{"id":"ssr","title":"Supporting Server Side Rendering","sidebar_label":"Server Side Rendering"},"sidebar":"Guides","previous":{"title":"Component Variants","permalink":"/docs/guides/component-variants"},"next":{"title":"Stylable v3","permalink":"/docs/guides/migration-v3"}}');var r=n(4848),i=n(8453);const o={id:"ssr",title:"Supporting Server Side Rendering",sidebar_label:"Server Side Rendering"},a=void 0,l={},c=[{value:"Transforming Stylable in the Server",id:"transforming-stylable-in-the-server",level:2},{value:"Matching namespaces",id:"matching-namespaces",level:2},{value:"Supporting multiple transpilation targets",id:"supporting-multiple-transpilation-targets",level:3},{value:"Publishing SSR-ready source files (<code>*.st.css</code>)",id:"publishing-ssr-ready-source-files-stcss",level:3}];function d(e){const s={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.p,{children:"Server side rendering (SSR) is an approach to serving JavaScript rendered web applications (such as React, Vue, Angular, etc...) that tries to improve time-to-paint, SEO support and more."}),"\n",(0,r.jsxs)(s.p,{children:["To learn more about SSR - see this ",(0,r.jsx)(s.a,{href:"https://dev.to/sunnysingh/the-benefits-and-origins-of-server-side-rendering-4doh",children:"introduction post"}),"."]}),"\n",(0,r.jsx)(s.p,{children:"When creating your library / application you will see that you might need to make some changes to your project publish / consumption process in order to integrate Stylable to your SSR flow."}),"\n",(0,r.jsx)(s.h2,{id:"transforming-stylable-in-the-server",children:"Transforming Stylable in the Server"}),"\n",(0,r.jsxs)(s.p,{children:["In order to use Stylable imports from your source files in ",(0,r.jsx)(s.code,{children:"nodeJS"}),", you will need to add ",(0,r.jsx)(s.code,{children:"@stylable/node"})," as a dependency."]}),"\n",(0,r.jsxs)(s.p,{children:["Import and use its ",(0,r.jsx)(s.code,{children:"requireHook"})," method before rendering to enable requiring Stylable stylesheets in their ",(0,r.jsx)(s.code,{children:"CommonJS"})," module format."]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-js",children:"// server.js\nconst { attachHook } = require('@stylable/node');\n\nattachHook(); // enables requiring .st.css files as CommonJS\n\n// < render application ... >\n"})}),"\n",(0,r.jsx)(s.h2,{id:"matching-namespaces",children:"Matching namespaces"}),"\n",(0,r.jsxs)(s.p,{children:["In order to ensure full SSR compatibility, ",(0,r.jsx)(s.strong,{children:"generated namespaces for all stylesheets must match exactly"})," across all different build targets."]}),"\n",(0,r.jsxs)(s.p,{children:["The default Stylable ",(0,r.jsx)(s.code,{children:"namespaceResolver"})," uses a combination of file-system path, name and version from the ",(0,r.jsx)(s.code,{children:"package.json"})," file to create its namespace. This means that namespaces can be influenced by the published file path structure."]}),"\n",(0,r.jsx)(s.p,{children:"If you choose to provide an alternative namespace resolver that does not depend on file paths as part of its namespace creation, then you can avoid the problem described below."}),"\n",(0,r.jsx)(s.h3,{id:"supporting-multiple-transpilation-targets",children:"Supporting multiple transpilation targets"}),"\n",(0,r.jsx)(s.p,{children:"When building a library or application for consumption in both client and server environments it is common to output multiple transpilation targets for various module systems."}),"\n",(0,r.jsxs)(s.p,{children:["This means that a published project will usually have both ",(0,r.jsx)(s.code,{children:"CommonJS"})," and ",(0,r.jsx)(s.code,{children:"ES modules"}),", each with their own transpiled copy of the project, including the Stylable assets."]}),"\n",(0,r.jsx)(s.p,{children:"This can pose a problem when trying to synchronize namespace creation for SSR."}),"\n",(0,r.jsxs)(s.h3,{id:"publishing-ssr-ready-source-files-stcss",children:["Publishing SSR-ready source files (",(0,r.jsx)(s.code,{children:"*.st.css"}),")"]}),"\n",(0,r.jsxs)(s.p,{children:["The Stylable CLI offers a feature that allows you to sync your namespace across dist targets by inserting a custom header comment to the start of your ",(0,r.jsx)(s.code,{children:".st.css"})," file. This header comment is used to normalize namespacing paths across different build targets."]}),"\n",(0,r.jsxs)(s.p,{children:["When using ",(0,r.jsx)(s.code,{children:"@stylable/cli"})," to publish your source stylesheets, use the ",(0,r.jsx)(s.code,{children:"useNamespaceReference"})," flag to mark all targets as originating from the same original source."]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-sh",children:"stc --srcDir ./src --outDir ./dist/cjs --cjs --stcss --useNamespaceReference\n"})}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-sh",children:"stc --srcDir ./src --outDir ./dist/esm --esm --stcss --useNamespaceReference\n"})}),"\n",(0,r.jsx)(s.p,{children:"For this to work properly, your source folder must be published along with your distribution build targets."})]})}function p(e={}){const{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>o,x:()=>a});var t=n(6540);const r={},i=t.createContext(r);function o(e){const s=t.useContext(i);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),t.createElement(i.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[734],{3691:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>o,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"guides/ssr","title":"Supporting Server Side Rendering","description":"Server side rendering (SSR) is an approach to serving JavaScript rendered web applications (such as React, Vue, Angular, etc...) that tries to improve time-to-paint, SEO support and more.","source":"@site/docs/guides/server-side-rendering.md","sourceDirName":"guides","slug":"/guides/ssr","permalink":"/docs/guides/ssr","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/server-side-rendering.md","tags":[],"version":"current","frontMatter":{"id":"ssr","title":"Supporting Server Side Rendering","sidebar_label":"Server Side Rendering"},"sidebar":"Guides","previous":{"title":"Component Variants","permalink":"/docs/guides/component-variants"},"next":{"title":"Stylable v3","permalink":"/docs/guides/migration-v3"}}');var r=n(4848),i=n(8453);const o={id:"ssr",title:"Supporting Server Side Rendering",sidebar_label:"Server Side Rendering"},a=void 0,l={},c=[{value:"Transforming Stylable in the Server",id:"transforming-stylable-in-the-server",level:2},{value:"Matching namespaces",id:"matching-namespaces",level:2},{value:"Supporting multiple transpilation targets",id:"supporting-multiple-transpilation-targets",level:3},{value:"Publishing SSR-ready source files (<code>*.st.css</code>)",id:"publishing-ssr-ready-source-files-stcss",level:3}];function d(e){const s={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.p,{children:"Server side rendering (SSR) is an approach to serving JavaScript rendered web applications (such as React, Vue, Angular, etc...) that tries to improve time-to-paint, SEO support and more."}),"\n",(0,r.jsxs)(s.p,{children:["To learn more about SSR - see this ",(0,r.jsx)(s.a,{href:"https://dev.to/sunnysingh/the-benefits-and-origins-of-server-side-rendering-4doh",children:"introduction post"}),"."]}),"\n",(0,r.jsx)(s.p,{children:"When creating your library / application you will see that you might need to make some changes to your project publish / consumption process in order to integrate Stylable to your SSR flow."}),"\n",(0,r.jsx)(s.h2,{id:"transforming-stylable-in-the-server",children:"Transforming Stylable in the Server"}),"\n",(0,r.jsxs)(s.p,{children:["In order to use Stylable imports from your source files in ",(0,r.jsx)(s.code,{children:"nodeJS"}),", you will need to add ",(0,r.jsx)(s.code,{children:"@stylable/node"})," as a dependency."]}),"\n",(0,r.jsxs)(s.p,{children:["Import and use its ",(0,r.jsx)(s.code,{children:"requireHook"})," method before rendering to enable requiring Stylable stylesheets in their ",(0,r.jsx)(s.code,{children:"CommonJS"})," module format."]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-js",children:"// server.js\nconst { attachHook } = require('@stylable/node');\n\nattachHook(); // enables requiring .st.css files as CommonJS\n\n// < render application ... >\n"})}),"\n",(0,r.jsx)(s.h2,{id:"matching-namespaces",children:"Matching namespaces"}),"\n",(0,r.jsxs)(s.p,{children:["In order to ensure full SSR compatibility, ",(0,r.jsx)(s.strong,{children:"generated namespaces for all stylesheets must match exactly"})," across all different build targets."]}),"\n",(0,r.jsxs)(s.p,{children:["The default Stylable ",(0,r.jsx)(s.code,{children:"namespaceResolver"})," uses a combination of file-system path, name and version from the ",(0,r.jsx)(s.code,{children:"package.json"})," file to create its namespace. This means that namespaces can be influenced by the published file path structure."]}),"\n",(0,r.jsx)(s.p,{children:"If you choose to provide an alternative namespace resolver that does not depend on file paths as part of its namespace creation, then you can avoid the problem described below."}),"\n",(0,r.jsx)(s.h3,{id:"supporting-multiple-transpilation-targets",children:"Supporting multiple transpilation targets"}),"\n",(0,r.jsx)(s.p,{children:"When building a library or application for consumption in both client and server environments it is common to output multiple transpilation targets for various module systems."}),"\n",(0,r.jsxs)(s.p,{children:["This means that a published project will usually have both ",(0,r.jsx)(s.code,{children:"CommonJS"})," and ",(0,r.jsx)(s.code,{children:"ES modules"}),", each with their own transpiled copy of the project, including the Stylable assets."]}),"\n",(0,r.jsx)(s.p,{children:"This can pose a problem when trying to synchronize namespace creation for SSR."}),"\n",(0,r.jsxs)(s.h3,{id:"publishing-ssr-ready-source-files-stcss",children:["Publishing SSR-ready source files (",(0,r.jsx)(s.code,{children:"*.st.css"}),")"]}),"\n",(0,r.jsxs)(s.p,{children:["The Stylable CLI offers a feature that allows you to sync your namespace across dist targets by inserting a custom header comment to the start of your ",(0,r.jsx)(s.code,{children:".st.css"})," file. This header comment is used to normalize namespacing paths across different build targets."]}),"\n",(0,r.jsxs)(s.p,{children:["When using ",(0,r.jsx)(s.code,{children:"@stylable/cli"})," to publish your source stylesheets, use the ",(0,r.jsx)(s.code,{children:"useNamespaceReference"})," flag to mark all targets as originating from the same original source."]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-sh",children:"stc --srcDir ./src --outDir ./dist/cjs --cjs --stcss --useNamespaceReference\n"})}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-sh",children:"stc --srcDir ./src --outDir ./dist/esm --esm --stcss --useNamespaceReference\n"})}),"\n",(0,r.jsx)(s.p,{children:"For this to work properly, your source folder must be published along with your distribution build targets."})]})}function p(e={}){const{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>o,x:()=>a});var t=n(6540);const r={},i=t.createContext(r);function o(e){const s=t.useContext(i);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),t.createElement(i.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/4809.a6140d43.js b/assets/js/4809.a6140d43.js new file mode 100644 index 00000000..0dd8e699 --- /dev/null +++ b/assets/js/4809.a6140d43.js @@ -0,0 +1 @@ +(()=>{"use strict";var e,r,t={4809:(e,r,t)=>{t.d(r,{AT:()=>n,BH:()=>s,IH:()=>a,sx:()=>o});t(8291);const o=!1,s=["en"],a="search-index{dir}.json?_=370ab76e",n=8}},o={};function s(e){var r=o[e];if(void 0!==r)return r.exports;var a=o[e]={exports:{}};return t[e](a,a.exports,s),a.exports}s.m=t,s.x=()=>{var e=s.O(void 0,[540],(()=>s(540)));return e=s.O(e)},e=[],s.O=(r,t,o,a)=>{if(!t){var n=1/0;for(u=0;u<e.length;u++){t=e[u][0],o=e[u][1],a=e[u][2];for(var i=!0,p=0;p<t.length;p++)(!1&a||n>=a)&&Object.keys(s.O).every((e=>s.O[e](t[p])))?t.splice(p--,1):(i=!1,a<n&&(n=a));if(i){e.splice(u--,1);var f=o();void 0!==f&&(r=f)}}return r}a=a||0;for(var u=e.length;u>0&&e[u-1][2]>a;u--)e[u]=e[u-1];e[u]=[t,o,a]},s.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return s.d(r,{a:r}),r},s.d=(e,r)=>{for(var t in r)s.o(r,t)&&!s.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},s.f={},s.e=e=>Promise.all(Object.keys(s.f).reduce(((r,t)=>(s.f[t](e,r),r)),[])),s.u=e=>"assets/js/"+e+".b78022b2.js",s.miniCssF=e=>{},s.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),s.p="/",s.gca=function(e){return e={}[e]||e,s.p+s.u(e)},(()=>{var e={4809:1};s.f.i=(r,t)=>{e[r]||importScripts(s.p+s.u(r))};var r=self.webpackChunkstylable_io=self.webpackChunkstylable_io||[],t=r.push.bind(r);r.push=r=>{var o=r[0],a=r[1],n=r[2];for(var i in a)s.o(a,i)&&(s.m[i]=a[i]);for(n&&n(s);o.length;)e[o.pop()]=1;t(r)}})(),r=s.x,s.x=()=>s.e(540).then(r);s.x()})(); \ No newline at end of file diff --git a/assets/js/5394.6807d4db.js b/assets/js/5394.6807d4db.js new file mode 100644 index 00000000..14868675 --- /dev/null +++ b/assets/js/5394.6807d4db.js @@ -0,0 +1 @@ +(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[5394],{1432:(e,t,n)=>{"use strict";n.d(t,{A:()=>V});var o=n(6540),s=n(2303),c=n(4164),r=n(5293),a=n(6342);function l(){const{prism:e}=(0,a.p)(),{colorMode:t}=(0,r.G)(),n=e.theme,o=e.darkTheme||n;return"dark"===t?o:n}var i=n(7559),u=n(8426),d=n.n(u);const m=/title=(?<quote>["'])(?<title>.*?)\1/,p=/\{(?<range>[\d,-]+)\}/,b={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},bash:{start:"#",end:""},html:{start:"\x3c!--",end:"--\x3e"}},f={...b,lua:{start:"--",end:""},wasm:{start:"\\;\\;",end:""},tex:{start:"%",end:""},vb:{start:"['\u2018\u2019]",end:""},vbnet:{start:"(?:_\\s*)?['\u2018\u2019]",end:""},rem:{start:"[Rr][Ee][Mm]\\b",end:""},f90:{start:"!",end:""},ml:{start:"\\(\\*",end:"\\*\\)"},cobol:{start:"\\*>",end:""}},h=Object.keys(b);function g(e,t){const n=e.map((e=>{const{start:n,end:o}=f[e];return`(?:${n}\\s*(${t.flatMap((e=>[e.line,e.block?.start,e.block?.end].filter(Boolean))).join("|")})\\s*${o})`})).join("|");return new RegExp(`^\\s*(?:${n})\\s*$`)}function k(e,t){let n=e.replace(/\n$/,"");const{language:o,magicComments:s,metastring:c}=t;if(c&&p.test(c)){const e=c.match(p).groups.range;if(0===s.length)throw new Error(`A highlight range has been given in code block's metastring (\`\`\` ${c}), but no magic comment config is available. Docusaurus applies the first magic comment entry's className for metastring ranges.`);const t=s[0].className,o=d()(e).filter((e=>e>0)).map((e=>[e-1,[t]]));return{lineClassNames:Object.fromEntries(o),code:n}}if(void 0===o)return{lineClassNames:{},code:n};const r=function(e,t){switch(e){case"js":case"javascript":case"ts":case"typescript":return g(["js","jsBlock"],t);case"jsx":case"tsx":return g(["js","jsBlock","jsx"],t);case"html":return g(["js","jsBlock","html"],t);case"python":case"py":case"bash":return g(["bash"],t);case"markdown":case"md":return g(["html","jsx","bash"],t);case"tex":case"latex":case"matlab":return g(["tex"],t);case"lua":case"haskell":return g(["lua"],t);case"sql":return g(["lua","jsBlock"],t);case"wasm":return g(["wasm"],t);case"vb":case"vba":case"visual-basic":return g(["vb","rem"],t);case"vbnet":return g(["vbnet","rem"],t);case"batch":return g(["rem"],t);case"basic":return g(["rem","f90"],t);case"fsharp":return g(["js","ml"],t);case"ocaml":case"sml":return g(["ml"],t);case"fortran":return g(["f90"],t);case"cobol":return g(["cobol"],t);default:return g(h,t)}}(o,s),a=n.split("\n"),l=Object.fromEntries(s.map((e=>[e.className,{start:0,range:""}]))),i=Object.fromEntries(s.filter((e=>e.line)).map((e=>{let{className:t,line:n}=e;return[n,t]}))),u=Object.fromEntries(s.filter((e=>e.block)).map((e=>{let{className:t,block:n}=e;return[n.start,t]}))),m=Object.fromEntries(s.filter((e=>e.block)).map((e=>{let{className:t,block:n}=e;return[n.end,t]})));for(let d=0;d<a.length;){const e=a[d].match(r);if(!e){d+=1;continue}const t=e.slice(1).find((e=>void 0!==e));i[t]?l[i[t]].range+=`${d},`:u[t]?l[u[t]].start=d:m[t]&&(l[m[t]].range+=`${l[m[t]].start}-${d-1},`),a.splice(d,1)}n=a.join("\n");const b={};return Object.entries(l).forEach((e=>{let[t,{range:n}]=e;d()(n).forEach((e=>{b[e]??=[],b[e].push(t)}))})),{lineClassNames:b,code:n}}const B={codeBlockContainer:"codeBlockContainer_Ckt0"};var x=n(4848);function j(e){let{as:t,...n}=e;const o=function(e){const t={color:"--prism-color",backgroundColor:"--prism-background-color"},n={};return Object.entries(e.plain).forEach((e=>{let[o,s]=e;const c=t[o];c&&"string"==typeof s&&(n[c]=s)})),n}(l());return(0,x.jsx)(t,{...n,style:o,className:(0,c.A)(n.className,B.codeBlockContainer,i.G.common.codeBlock)})}const y={codeBlockContent:"codeBlockContent_biex",codeBlockTitle:"codeBlockTitle_Ktv7",codeBlock:"codeBlock_bY9V",codeBlockStandalone:"codeBlockStandalone_MEMb",codeBlockLines:"codeBlockLines_e6Vv",codeBlockLinesWithNumbering:"codeBlockLinesWithNumbering_o6Pm",buttonGroup:"buttonGroup__atx"};function v(e){let{children:t,className:n}=e;return(0,x.jsx)(j,{as:"pre",tabIndex:0,className:(0,c.A)(y.codeBlockStandalone,"thin-scrollbar",n),children:(0,x.jsx)("code",{className:y.codeBlockLines,children:t})})}var C=n(9532);const N={attributes:!0,characterData:!0,childList:!0,subtree:!0};function w(e,t){const[n,s]=(0,o.useState)(),c=(0,o.useCallback)((()=>{s(e.current?.closest("[role=tabpanel][hidden]"))}),[e,s]);(0,o.useEffect)((()=>{c()}),[c]),function(e,t,n){void 0===n&&(n=N);const s=(0,C._q)(t),c=(0,C.Be)(n);(0,o.useEffect)((()=>{const t=new MutationObserver(s);return e&&t.observe(e,c),()=>t.disconnect()}),[e,s,c])}(n,(e=>{e.forEach((e=>{"attributes"===e.type&&"hidden"===e.attributeName&&(t(),c())}))}),{attributes:!0,characterData:!1,childList:!1,subtree:!1})}var E=n(1765);const L={codeLine:"codeLine_lJS_",codeLineNumber:"codeLineNumber_Tfdd",codeLineContent:"codeLineContent_feaV"};function A(e){let{line:t,classNames:n,showLineNumbers:o,getLineProps:s,getTokenProps:r}=e;1===t.length&&"\n"===t[0].content&&(t[0].content="");const a=s({line:t,className:(0,c.A)(n,o&&L.codeLine)}),l=t.map(((e,t)=>(0,x.jsx)("span",{...r({token:e})},t)));return(0,x.jsxs)("span",{...a,children:[o?(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)("span",{className:L.codeLineNumber}),(0,x.jsx)("span",{className:L.codeLineContent,children:l})]}):l,(0,x.jsx)("br",{})]})}var _=n(1312);function S(e){return(0,x.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,x.jsx)("path",{fill:"currentColor",d:"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"})})}function T(e){return(0,x.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,x.jsx)("path",{fill:"currentColor",d:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"})})}const I={copyButtonCopied:"copyButtonCopied_obH4",copyButtonIcons:"copyButtonIcons_eSgA",copyButtonIcon:"copyButtonIcon_y97N",copyButtonSuccessIcon:"copyButtonSuccessIcon_LjdS"};function $(e){let{code:t,className:n}=e;const[s,r]=(0,o.useState)(!1),a=(0,o.useRef)(void 0),l=(0,o.useCallback)((()=>{!function(e,t){let{target:n=document.body}=void 0===t?{}:t;if("string"!=typeof e)throw new TypeError(`Expected parameter \`text\` to be a \`string\`, got \`${typeof e}\`.`);const o=document.createElement("textarea"),s=document.activeElement;o.value=e,o.setAttribute("readonly",""),o.style.contain="strict",o.style.position="absolute",o.style.left="-9999px",o.style.fontSize="12pt";const c=document.getSelection(),r=c.rangeCount>0&&c.getRangeAt(0);n.append(o),o.select(),o.selectionStart=0,o.selectionEnd=e.length;let a=!1;try{a=document.execCommand("copy")}catch{}o.remove(),r&&(c.removeAllRanges(),c.addRange(r)),s&&s.focus()}(t),r(!0),a.current=window.setTimeout((()=>{r(!1)}),1e3)}),[t]);return(0,o.useEffect)((()=>()=>window.clearTimeout(a.current)),[]),(0,x.jsx)("button",{type:"button","aria-label":s?(0,_.T)({id:"theme.CodeBlock.copied",message:"Copied",description:"The copied button label on code blocks"}):(0,_.T)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"}),title:(0,_.T)({id:"theme.CodeBlock.copy",message:"Copy",description:"The copy button label on code blocks"}),className:(0,c.A)("clean-btn",n,I.copyButton,s&&I.copyButtonCopied),onClick:l,children:(0,x.jsxs)("span",{className:I.copyButtonIcons,"aria-hidden":"true",children:[(0,x.jsx)(S,{className:I.copyButtonIcon}),(0,x.jsx)(T,{className:I.copyButtonSuccessIcon})]})})}function W(e){return(0,x.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,x.jsx)("path",{fill:"currentColor",d:"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"})})}const M={wordWrapButtonIcon:"wordWrapButtonIcon_Bwma",wordWrapButtonEnabled:"wordWrapButtonEnabled_EoeP"};function H(e){let{className:t,onClick:n,isEnabled:o}=e;const s=(0,_.T)({id:"theme.CodeBlock.wordWrapToggle",message:"Toggle word wrap",description:"The title attribute for toggle word wrapping button of code block lines"});return(0,x.jsx)("button",{type:"button",onClick:n,className:(0,c.A)("clean-btn",t,o&&M.wordWrapButtonEnabled),"aria-label":s,title:s,children:(0,x.jsx)(W,{className:M.wordWrapButtonIcon,"aria-hidden":"true"})})}function R(e){let{children:t,className:n="",metastring:s,title:r,showLineNumbers:i,language:u}=e;const{prism:{defaultLanguage:d,magicComments:p}}=(0,a.p)(),b=function(e){return e?.toLowerCase()}(u??function(e){const t=e.split(" ").find((e=>e.startsWith("language-")));return t?.replace(/language-/,"")}(n)??d),f=l(),h=function(){const[e,t]=(0,o.useState)(!1),[n,s]=(0,o.useState)(!1),c=(0,o.useRef)(null),r=(0,o.useCallback)((()=>{const n=c.current.querySelector("code");e?n.removeAttribute("style"):(n.style.whiteSpace="pre-wrap",n.style.overflowWrap="anywhere"),t((e=>!e))}),[c,e]),a=(0,o.useCallback)((()=>{const{scrollWidth:e,clientWidth:t}=c.current,n=e>t||c.current.querySelector("code").hasAttribute("style");s(n)}),[c]);return w(c,a),(0,o.useEffect)((()=>{a()}),[e,a]),(0,o.useEffect)((()=>(window.addEventListener("resize",a,{passive:!0}),()=>{window.removeEventListener("resize",a)})),[a]),{codeBlockRef:c,isEnabled:e,isCodeScrollable:n,toggle:r}}(),g=function(e){return e?.match(m)?.groups.title??""}(s)||r,{lineClassNames:B,code:v}=k(t,{metastring:s,language:b,magicComments:p}),C=i??function(e){return Boolean(e?.includes("showLineNumbers"))}(s);return(0,x.jsxs)(j,{as:"div",className:(0,c.A)(n,b&&!n.includes(`language-${b}`)&&`language-${b}`),children:[g&&(0,x.jsx)("div",{className:y.codeBlockTitle,children:g}),(0,x.jsxs)("div",{className:y.codeBlockContent,children:[(0,x.jsx)(E.f4,{theme:f,code:v,language:b??"text",children:e=>{let{className:t,style:n,tokens:o,getLineProps:s,getTokenProps:r}=e;return(0,x.jsx)("pre",{tabIndex:0,ref:h.codeBlockRef,className:(0,c.A)(t,y.codeBlock,"thin-scrollbar"),style:n,children:(0,x.jsx)("code",{className:(0,c.A)(y.codeBlockLines,C&&y.codeBlockLinesWithNumbering),children:o.map(((e,t)=>(0,x.jsx)(A,{line:e,getLineProps:s,getTokenProps:r,classNames:B[t],showLineNumbers:C},t)))})})}}),(0,x.jsxs)("div",{className:y.buttonGroup,children:[(h.isEnabled||h.isCodeScrollable)&&(0,x.jsx)(H,{className:y.codeButton,onClick:()=>h.toggle(),isEnabled:h.isEnabled}),(0,x.jsx)($,{className:y.codeButton,code:v})]})]})]})}function V(e){let{children:t,...n}=e;const c=(0,s.A)(),r=function(e){return o.Children.toArray(e).some((e=>(0,o.isValidElement)(e)))?e:Array.isArray(e)?e.join(""):e}(t),a="string"==typeof r?R:v;return(0,x.jsx)(a,{...n,children:r},String(c))}},8426:(e,t)=>{function n(e){let t,n=[];for(let o of e.split(",").map((e=>e.trim())))if(/^-?\d+$/.test(o))n.push(parseInt(o,10));else if(t=o.match(/^(-?\d+)(-|\.\.\.?|\u2025|\u2026|\u22EF)(-?\d+)$/)){let[e,o,s,c]=t;if(o&&c){o=parseInt(o),c=parseInt(c);const e=o<c?1:-1;"-"!==s&&".."!==s&&"\u2025"!==s||(c+=e);for(let t=o;t!==c;t+=e)n.push(t)}}return n}t.default=n,e.exports=n},8453:(e,t,n)=>{"use strict";n.d(t,{R:()=>r,x:()=>a});var o=n(6540);const s={},c=o.createContext(s);function r(e){const t=o.useContext(c);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),o.createElement(c.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/540.b78022b2.js b/assets/js/540.b78022b2.js new file mode 100644 index 00000000..13a6e34b --- /dev/null +++ b/assets/js/540.b78022b2.js @@ -0,0 +1,2 @@ +/*! For license information please see 540.b78022b2.js.LICENSE.txt */ +(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[540],{540:(e,t,r)=>{"use strict";const n=Symbol("Comlink.proxy"),i=Symbol("Comlink.endpoint"),s=Symbol("Comlink.releaseProxy"),o=Symbol("Comlink.finalizer"),a=Symbol("Comlink.thrown"),u=e=>"object"==typeof e&&null!==e||"function"==typeof e,l={canHandle:e=>u(e)&&e[n],serialize(e){const{port1:t,port2:r}=new MessageChannel;return h(e,t),[r,[r]]},deserialize:e=>(e.start(),function(e,t){const r=new Map;return e.addEventListener("message",(function(e){const{data:t}=e;if(!t||!t.id)return;const n=r.get(t.id);if(n)try{n(t)}finally{r.delete(t.id)}})),g(e,r,[],t)}(e))},c=new Map([["proxy",l],["throw",{canHandle:e=>u(e)&&a in e,serialize({value:e}){let t;return t=e instanceof Error?{isError:!0,value:{message:e.message,name:e.name,stack:e.stack}}:{isError:!1,value:e},[t,[]]},deserialize(e){if(e.isError)throw Object.assign(new Error(e.value.message),e.value);throw e.value}}]]);function h(e,t=globalThis,r=["*"]){t.addEventListener("message",(function i(s){if(!s||!s.data)return;if(!function(e,t){for(const r of e){if(t===r||"*"===r)return!0;if(r instanceof RegExp&&r.test(t))return!0}return!1}(r,s.origin))return void console.warn(`Invalid origin '${s.origin}' for comlink proxy`);const{id:u,type:l,path:c}=Object.assign({path:[]},s.data),f=(s.data.argumentList||[]).map(E);let p;try{const t=c.slice(0,-1).reduce(((e,t)=>e[t]),e),r=c.reduce(((e,t)=>e[t]),e);switch(l){case"GET":p=r;break;case"SET":t[c.slice(-1)[0]]=E(s.data.value),p=!0;break;case"APPLY":p=r.apply(t,f);break;case"CONSTRUCT":p=function(e){return Object.assign(e,{[n]:!0})}(new r(...f));break;case"ENDPOINT":{const{port1:t,port2:r}=new MessageChannel;h(e,r),p=function(e,t){return v.set(e,t),e}(t,[t])}break;case"RELEASE":p=void 0;break;default:return}}catch(y){p={value:y,[a]:0}}Promise.resolve(p).catch((e=>({value:e,[a]:0}))).then((r=>{const[n,s]=w(r);t.postMessage(Object.assign(Object.assign({},n),{id:u}),s),"RELEASE"===l&&(t.removeEventListener("message",i),d(t),o in e&&"function"==typeof e[o]&&e[o]())})).catch((e=>{const[r,n]=w({value:new TypeError("Unserializable return value"),[a]:0});t.postMessage(Object.assign(Object.assign({},r),{id:u}),n)}))})),t.start&&t.start()}function d(e){(function(e){return"MessagePort"===e.constructor.name})(e)&&e.close()}function f(e){if(e)throw new Error("Proxy has been released and is not useable")}function p(e){return Q(e,new Map,{type:"RELEASE"}).then((()=>{d(e)}))}const y=new WeakMap,m="FinalizationRegistry"in globalThis&&new FinalizationRegistry((e=>{const t=(y.get(e)||0)-1;y.set(e,t),0===t&&p(e)}));function g(e,t,r=[],n=function(){}){let o=!1;const a=new Proxy(n,{get(n,i){if(f(o),i===s)return()=>{!function(e){m&&m.unregister(e)}(a),p(e),t.clear(),o=!0};if("then"===i){if(0===r.length)return{then:()=>a};const n=Q(e,t,{type:"GET",path:r.map((e=>e.toString()))}).then(E);return n.then.bind(n)}return g(e,t,[...r,i])},set(n,i,s){f(o);const[a,u]=w(s);return Q(e,t,{type:"SET",path:[...r,i].map((e=>e.toString())),value:a},u).then(E)},apply(n,s,a){f(o);const u=r[r.length-1];if(u===i)return Q(e,t,{type:"ENDPOINT"}).then(E);if("bind"===u)return g(e,t,r.slice(0,-1));const[l,c]=x(a);return Q(e,t,{type:"APPLY",path:r.map((e=>e.toString())),argumentList:l},c).then(E)},construct(n,i){f(o);const[s,a]=x(i);return Q(e,t,{type:"CONSTRUCT",path:r.map((e=>e.toString())),argumentList:s},a).then(E)}});return function(e,t){const r=(y.get(t)||0)+1;y.set(t,r),m&&m.register(e,t,e)}(a,e),a}function x(e){const t=e.map(w);return[t.map((e=>e[0])),(r=t.map((e=>e[1])),Array.prototype.concat.apply([],r))];var r}const v=new WeakMap;function w(e){for(const[t,r]of c)if(r.canHandle(e)){const[n,i]=r.serialize(e);return[{type:"HANDLER",name:t,value:n},i]}return[{type:"RAW",value:e},v.get(e)||[]]}function E(e){switch(e.type){case"HANDLER":return c.get(e.name).deserialize(e.value);case"RAW":return e.value}}function Q(e,t,r,n){return new Promise((i=>{const s=new Array(4).fill(0).map((()=>Math.floor(Math.random()*Number.MAX_SAFE_INTEGER).toString(16))).join("-");t.set(s,i),e.start&&e.start(),e.postMessage(Object.assign({id:s},r),n)}))}var k=r(8291),b=r.n(k),S=r(4809);const L=12;function T(e,t){const r=function(e,t){const r=e.map((e=>/\p{Unified_Ideograph}/u.test(e)?function(e,t){const r=[];return function e(n,i){let s=0,o=!1;for(const a of t)if(n.substr(0,a.length)===a){const t={missed:i.missed,term:i.term.concat({value:a})};n.length>a.length?e(n.substr(a.length),t):r.push(t),o=!0}else for(let t=a.length-1;t>s;t-=1){const u=a.substr(0,t);if(n.substr(0,t)===u){s=t;const a={missed:i.missed,term:i.term.concat({value:u,trailing:!0})};n.length>t?e(n.substr(t),a):r.push(a),o=!0;break}}o||(n.length>0?e(n.substr(1),{missed:i.missed+1,term:i.term}):i.term.length>0&&r.push(i))}(e,{missed:0,term:[]}),r.sort(((e,t)=>{const r=e.missed>0?1:0,n=t.missed>0?1:0;return r!==n?r-n:e.term.length-t.term.length})).map((e=>e.term))}(e,t):[{value:e}])).slice(0,L),n=r.filter((e=>e.length>1));let i=1,s=!1;for(const a of n)if(s)a.splice(1,a.length-1);else{a.length>6&&a.splice(6,a.length-6);const e=i*a.length;if(e>=L){if(e>L){const e=Math.floor(L/i);a.splice(e,a.length-e),i*=e}else i=e;i>6&&(s=!0)}else i=e}const o=[];return function e(t,n){if(t===r.length||n.length>=L)o.push(n.slice(0,L));else for(const i of r[t])e(t+1,n.concat(i))}(0,[]),o}(e,t);if(0===r.length)return[{tokens:e,term:e.map((e=>({value:e,presence:b().Query.presence.REQUIRED,wildcard:b().Query.wildcard.LEADING|b().Query.wildcard.TRAILING})))}];for(const o of r)o[o.length-1].maybeTyping=!0;const n=[];for(const o of S.BH)if("en"===o)S.sx||n.unshift(b().stopWordFilter);else{const e=b()[o];e.stopWordFilter&&n.unshift(e.stopWordFilter)}let i;if(n.length>0){const e=e=>n.reduce(((e,t)=>e.filter((e=>t(e.value)))),e);i=[];const t=[];for(const n of r){const r=e(n);i.push(r),r.length<n.length&&r.length>0&&t.push(r)}r.push(...t)}else i=r.slice();const s=[];for(const o of i)if(o.length>2)for(let e=o.length-1;e>=0;e-=1)s.push(o.slice(0,e).concat(o.slice(e+1)));return P(r).concat(P(s))}function P(e){return I(e).concat(I(e.filter((e=>{const t=e[e.length-1];return!t.trailing&&t.maybeTyping})),!0))}function I(e,t){return e.map((e=>({tokens:e.map((e=>e.value)),term:e.map((e=>({value:e.value,presence:b().Query.presence.REQUIRED,wildcard:(t?e.trailing||e.maybeTyping:e.trailing)?b().Query.wildcard.TRAILING:b().Query.wildcard.NONE})))})))}var O;!function(e){e[e.Title=0]="Title",e[e.Heading=1]="Heading",e[e.Description=2]="Description",e[e.Keywords=3]="Keywords",e[e.Content=4]="Content"}(O||(O={}));const R=new Map;h(class{async fetchIndexes(e,t){await this.lowLevelFetchIndexes(e,t)}async lowLevelFetchIndexes(e,t){const r=`${e}${t}`;let n=R.get(r);return n||(n=async function(e,t){const r=`${e}${S.IH.replace("{dir}",t?`-${t.replace(/\//g,"-")}`:"")}`;if(new URL(r,location.origin).origin!==location.origin)throw new Error("Unexpected version url");const n=await(await fetch(r)).json(),i=n.map(((e,t)=>{let{documents:r,index:n}=e;return{type:t,documents:r,index:b().Index.load(n)}})),s=n.reduce(((e,t)=>{for(const r of t.index.invertedIndex)/\p{Unified_Ideograph}/u.test(r[0][0])&&e.add(r[0]);return e}),new Set);return{wrappedIndexes:i,zhDictionary:Array.from(s)}}(e,t),R.set(r,n)),n}async search(e,t,r){const n=function(e,t){if(1===t.length&&["ja","jp","th"].includes(t[0]))return b()[t[0]].tokenizer(e).map((e=>e.toString()));let r=/[^-\s]+/g;return t.includes("zh")&&(r=/\w+|\p{Unified_Ideograph}+/gu),e.toLowerCase().match(r)||[]}(r,S.BH);if(0===n.length)return[];const{wrappedIndexes:i,zhDictionary:s}=await this.lowLevelFetchIndexes(e,t),o=T(n,s),a=[];e:for(const{term:u,tokens:l}of o)for(const{documents:e,index:t,type:r}of i)if(a.push(...t.query((e=>{for(const t of u)e.term(t.value,{wildcard:t.wildcard,presence:t.presence})})).slice(0,S.AT).filter((e=>!a.some((t=>t.document.i.toString()===e.ref)))).slice(0,S.AT-a.length).map((t=>{const n=e.find((e=>e.i.toString()===t.ref));return{document:n,type:r,page:r!==O.Title&&i[0].documents.find((e=>e.i===n.p)),metadata:t.matchData.metadata,tokens:l,score:t.score}}))),a.length>=S.AT)break e;return function(e){e.forEach(((e,t)=>{e.index=t})),e.sort(((t,r)=>{let n=t.type!==O.Heading&&t.type!==O.Content&&t.type!==O.Description||!t.page?t.index:e.findIndex((e=>e.document===t.page)),i=r.type!==O.Heading&&r.type!==O.Content&&r.type!==O.Description||!r.page?r.index:e.findIndex((e=>e.document===r.page));if(-1===n&&(n=t.index),-1===i&&(i=r.index),n===i){const e=(0===r.type?1:0)-(0===t.type?1:0);return 0===e?t.index-r.index:e}return n-i}))}(a),function(e){e.forEach(((t,r)=>{r>0&&t.page&&e.slice(0,r).some((e=>(e.type===O.Keywords?e.page:e.document)===t.page))&&(r<e.length-1&&e[r+1].page===t.page?t.isInterOfTree=!0:t.isLastOfTree=!0)}))}(a),a}})},8291:(e,t,r)=>{var n,i;!function(){var s,o,a,u,l,c,h,d,f,p,y,m,g,x,v,w,E,Q,k,b,S,L,T,P,I,O,R,C,F,N,j=function(e){var t=new j.Builder;return t.pipeline.add(j.trimmer,j.stopWordFilter,j.stemmer),t.searchPipeline.add(j.stemmer),e.call(t,t),t.build()};j.version="2.3.9",j.utils={},j.utils.warn=(s=this,function(e){s.console&&console.warn&&console.warn(e)}),j.utils.asString=function(e){return null==e?"":e.toString()},j.utils.clone=function(e){if(null==e)return e;for(var t=Object.create(null),r=Object.keys(e),n=0;n<r.length;n++){var i=r[n],s=e[i];if(Array.isArray(s))t[i]=s.slice();else{if("string"!=typeof s&&"number"!=typeof s&&"boolean"!=typeof s)throw new TypeError("clone is not deep and does not support nested objects");t[i]=s}}return t},j.FieldRef=function(e,t,r){this.docRef=e,this.fieldName=t,this._stringValue=r},j.FieldRef.joiner="/",j.FieldRef.fromString=function(e){var t=e.indexOf(j.FieldRef.joiner);if(-1===t)throw"malformed field ref string";var r=e.slice(0,t),n=e.slice(t+1);return new j.FieldRef(n,r,e)},j.FieldRef.prototype.toString=function(){return null==this._stringValue&&(this._stringValue=this.fieldName+j.FieldRef.joiner+this.docRef),this._stringValue},j.Set=function(e){if(this.elements=Object.create(null),e){this.length=e.length;for(var t=0;t<this.length;t++)this.elements[e[t]]=!0}else this.length=0},j.Set.complete={intersect:function(e){return e},union:function(){return this},contains:function(){return!0}},j.Set.empty={intersect:function(){return this},union:function(e){return e},contains:function(){return!1}},j.Set.prototype.contains=function(e){return!!this.elements[e]},j.Set.prototype.intersect=function(e){var t,r,n,i=[];if(e===j.Set.complete)return this;if(e===j.Set.empty)return e;this.length<e.length?(t=this,r=e):(t=e,r=this),n=Object.keys(t.elements);for(var s=0;s<n.length;s++){var o=n[s];o in r.elements&&i.push(o)}return new j.Set(i)},j.Set.prototype.union=function(e){return e===j.Set.complete?j.Set.complete:e===j.Set.empty?this:new j.Set(Object.keys(this.elements).concat(Object.keys(e.elements)))},j.idf=function(e,t){var r=0;for(var n in e)"_index"!=n&&(r+=Object.keys(e[n]).length);var i=(t-r+.5)/(r+.5);return Math.log(1+Math.abs(i))},j.Token=function(e,t){this.str=e||"",this.metadata=t||{}},j.Token.prototype.toString=function(){return this.str},j.Token.prototype.update=function(e){return this.str=e(this.str,this.metadata),this},j.Token.prototype.clone=function(e){return e=e||function(e){return e},new j.Token(e(this.str,this.metadata),this.metadata)},j.tokenizer=function(e,t){if(null==e||null==e)return[];if(Array.isArray(e))return e.map((function(e){return new j.Token(j.utils.asString(e).toLowerCase(),j.utils.clone(t))}));for(var r=e.toString().toLowerCase(),n=r.length,i=[],s=0,o=0;s<=n;s++){var a=s-o;if(r.charAt(s).match(j.tokenizer.separator)||s==n){if(a>0){var u=j.utils.clone(t)||{};u.position=[o,a],u.index=i.length,i.push(new j.Token(r.slice(o,s),u))}o=s+1}}return i},j.tokenizer.separator=/[\s\-]+/,j.Pipeline=function(){this._stack=[]},j.Pipeline.registeredFunctions=Object.create(null),j.Pipeline.registerFunction=function(e,t){t in this.registeredFunctions&&j.utils.warn("Overwriting existing registered function: "+t),e.label=t,j.Pipeline.registeredFunctions[e.label]=e},j.Pipeline.warnIfFunctionNotRegistered=function(e){e.label&&e.label in this.registeredFunctions||j.utils.warn("Function is not registered with pipeline. This may cause problems when serialising the index.\n",e)},j.Pipeline.load=function(e){var t=new j.Pipeline;return e.forEach((function(e){var r=j.Pipeline.registeredFunctions[e];if(!r)throw new Error("Cannot load unregistered function: "+e);t.add(r)})),t},j.Pipeline.prototype.add=function(){Array.prototype.slice.call(arguments).forEach((function(e){j.Pipeline.warnIfFunctionNotRegistered(e),this._stack.push(e)}),this)},j.Pipeline.prototype.after=function(e,t){j.Pipeline.warnIfFunctionNotRegistered(t);var r=this._stack.indexOf(e);if(-1==r)throw new Error("Cannot find existingFn");r+=1,this._stack.splice(r,0,t)},j.Pipeline.prototype.before=function(e,t){j.Pipeline.warnIfFunctionNotRegistered(t);var r=this._stack.indexOf(e);if(-1==r)throw new Error("Cannot find existingFn");this._stack.splice(r,0,t)},j.Pipeline.prototype.remove=function(e){var t=this._stack.indexOf(e);-1!=t&&this._stack.splice(t,1)},j.Pipeline.prototype.run=function(e){for(var t=this._stack.length,r=0;r<t;r++){for(var n=this._stack[r],i=[],s=0;s<e.length;s++){var o=n(e[s],s,e);if(null!=o&&""!==o)if(Array.isArray(o))for(var a=0;a<o.length;a++)i.push(o[a]);else i.push(o)}e=i}return e},j.Pipeline.prototype.runString=function(e,t){var r=new j.Token(e,t);return this.run([r]).map((function(e){return e.toString()}))},j.Pipeline.prototype.reset=function(){this._stack=[]},j.Pipeline.prototype.toJSON=function(){return this._stack.map((function(e){return j.Pipeline.warnIfFunctionNotRegistered(e),e.label}))},j.Vector=function(e){this._magnitude=0,this.elements=e||[]},j.Vector.prototype.positionForIndex=function(e){if(0==this.elements.length)return 0;for(var t=0,r=this.elements.length/2,n=r-t,i=Math.floor(n/2),s=this.elements[2*i];n>1&&(s<e&&(t=i),s>e&&(r=i),s!=e);)n=r-t,i=t+Math.floor(n/2),s=this.elements[2*i];return s==e||s>e?2*i:s<e?2*(i+1):void 0},j.Vector.prototype.insert=function(e,t){this.upsert(e,t,(function(){throw"duplicate index"}))},j.Vector.prototype.upsert=function(e,t,r){this._magnitude=0;var n=this.positionForIndex(e);this.elements[n]==e?this.elements[n+1]=r(this.elements[n+1],t):this.elements.splice(n,0,e,t)},j.Vector.prototype.magnitude=function(){if(this._magnitude)return this._magnitude;for(var e=0,t=this.elements.length,r=1;r<t;r+=2){var n=this.elements[r];e+=n*n}return this._magnitude=Math.sqrt(e)},j.Vector.prototype.dot=function(e){for(var t=0,r=this.elements,n=e.elements,i=r.length,s=n.length,o=0,a=0,u=0,l=0;u<i&&l<s;)(o=r[u])<(a=n[l])?u+=2:o>a?l+=2:o==a&&(t+=r[u+1]*n[l+1],u+=2,l+=2);return t},j.Vector.prototype.similarity=function(e){return this.dot(e)/this.magnitude()||0},j.Vector.prototype.toArray=function(){for(var e=new Array(this.elements.length/2),t=1,r=0;t<this.elements.length;t+=2,r++)e[r]=this.elements[t];return e},j.Vector.prototype.toJSON=function(){return this.elements},j.stemmer=(o={ational:"ate",tional:"tion",enci:"ence",anci:"ance",izer:"ize",bli:"ble",alli:"al",entli:"ent",eli:"e",ousli:"ous",ization:"ize",ation:"ate",ator:"ate",alism:"al",iveness:"ive",fulness:"ful",ousness:"ous",aliti:"al",iviti:"ive",biliti:"ble",logi:"log"},a={icate:"ic",ative:"",alize:"al",iciti:"ic",ical:"ic",ful:"",ness:""},h="^("+(l="[^aeiou][^aeiouy]*")+")?"+(c=(u="[aeiouy]")+"[aeiou]*")+l+"("+c+")?$",d="^("+l+")?"+c+l+c+l,f="^("+l+")?"+u,p=new RegExp("^("+l+")?"+c+l),y=new RegExp(d),m=new RegExp(h),g=new RegExp(f),x=/^(.+?)(ss|i)es$/,v=/^(.+?)([^s])s$/,w=/^(.+?)eed$/,E=/^(.+?)(ed|ing)$/,Q=/.$/,k=/(at|bl|iz)$/,b=new RegExp("([^aeiouylsz])\\1$"),S=new RegExp("^"+l+u+"[^aeiouwxy]$"),L=/^(.+?[^aeiou])y$/,T=/^(.+?)(ational|tional|enci|anci|izer|bli|alli|entli|eli|ousli|ization|ation|ator|alism|iveness|fulness|ousness|aliti|iviti|biliti|logi)$/,P=/^(.+?)(icate|ative|alize|iciti|ical|ful|ness)$/,I=/^(.+?)(al|ance|ence|er|ic|able|ible|ant|ement|ment|ent|ou|ism|ate|iti|ous|ive|ize)$/,O=/^(.+?)(s|t)(ion)$/,R=/^(.+?)e$/,C=/ll$/,F=new RegExp("^"+l+u+"[^aeiouwxy]$"),N=function(e){var t,r,n,i,s,u,l;if(e.length<3)return e;if("y"==(n=e.substr(0,1))&&(e=n.toUpperCase()+e.substr(1)),s=v,(i=x).test(e)?e=e.replace(i,"$1$2"):s.test(e)&&(e=e.replace(s,"$1$2")),s=E,(i=w).test(e)){var c=i.exec(e);(i=p).test(c[1])&&(i=Q,e=e.replace(i,""))}else s.test(e)&&(t=(c=s.exec(e))[1],(s=g).test(t)&&(u=b,l=S,(s=k).test(e=t)?e+="e":u.test(e)?(i=Q,e=e.replace(i,"")):l.test(e)&&(e+="e")));return(i=L).test(e)&&(e=(t=(c=i.exec(e))[1])+"i"),(i=T).test(e)&&(t=(c=i.exec(e))[1],r=c[2],(i=p).test(t)&&(e=t+o[r])),(i=P).test(e)&&(t=(c=i.exec(e))[1],r=c[2],(i=p).test(t)&&(e=t+a[r])),s=O,(i=I).test(e)?(t=(c=i.exec(e))[1],(i=y).test(t)&&(e=t)):s.test(e)&&(t=(c=s.exec(e))[1]+c[2],(s=y).test(t)&&(e=t)),(i=R).test(e)&&(t=(c=i.exec(e))[1],s=m,u=F,((i=y).test(t)||s.test(t)&&!u.test(t))&&(e=t)),s=y,(i=C).test(e)&&s.test(e)&&(i=Q,e=e.replace(i,"")),"y"==n&&(e=n.toLowerCase()+e.substr(1)),e},function(e){return e.update(N)}),j.Pipeline.registerFunction(j.stemmer,"stemmer"),j.generateStopWordFilter=function(e){var t=e.reduce((function(e,t){return e[t]=t,e}),{});return function(e){if(e&&t[e.toString()]!==e.toString())return e}},j.stopWordFilter=j.generateStopWordFilter(["a","able","about","across","after","all","almost","also","am","among","an","and","any","are","as","at","be","because","been","but","by","can","cannot","could","dear","did","do","does","either","else","ever","every","for","from","get","got","had","has","have","he","her","hers","him","his","how","however","i","if","in","into","is","it","its","just","least","let","like","likely","may","me","might","most","must","my","neither","no","nor","not","of","off","often","on","only","or","other","our","own","rather","said","say","says","she","should","since","so","some","than","that","the","their","them","then","there","these","they","this","tis","to","too","twas","us","wants","was","we","were","what","when","where","which","while","who","whom","why","will","with","would","yet","you","your"]),j.Pipeline.registerFunction(j.stopWordFilter,"stopWordFilter"),j.trimmer=function(e){return e.update((function(e){return e.replace(/^\W+/,"").replace(/\W+$/,"")}))},j.Pipeline.registerFunction(j.trimmer,"trimmer"),j.TokenSet=function(){this.final=!1,this.edges={},this.id=j.TokenSet._nextId,j.TokenSet._nextId+=1},j.TokenSet._nextId=1,j.TokenSet.fromArray=function(e){for(var t=new j.TokenSet.Builder,r=0,n=e.length;r<n;r++)t.insert(e[r]);return t.finish(),t.root},j.TokenSet.fromClause=function(e){return"editDistance"in e?j.TokenSet.fromFuzzyString(e.term,e.editDistance):j.TokenSet.fromString(e.term)},j.TokenSet.fromFuzzyString=function(e,t){for(var r=new j.TokenSet,n=[{node:r,editsRemaining:t,str:e}];n.length;){var i=n.pop();if(i.str.length>0){var s,o=i.str.charAt(0);o in i.node.edges?s=i.node.edges[o]:(s=new j.TokenSet,i.node.edges[o]=s),1==i.str.length&&(s.final=!0),n.push({node:s,editsRemaining:i.editsRemaining,str:i.str.slice(1)})}if(0!=i.editsRemaining){if("*"in i.node.edges)var a=i.node.edges["*"];else{a=new j.TokenSet;i.node.edges["*"]=a}if(0==i.str.length&&(a.final=!0),n.push({node:a,editsRemaining:i.editsRemaining-1,str:i.str}),i.str.length>1&&n.push({node:i.node,editsRemaining:i.editsRemaining-1,str:i.str.slice(1)}),1==i.str.length&&(i.node.final=!0),i.str.length>=1){if("*"in i.node.edges)var u=i.node.edges["*"];else{u=new j.TokenSet;i.node.edges["*"]=u}1==i.str.length&&(u.final=!0),n.push({node:u,editsRemaining:i.editsRemaining-1,str:i.str.slice(1)})}if(i.str.length>1){var l,c=i.str.charAt(0),h=i.str.charAt(1);h in i.node.edges?l=i.node.edges[h]:(l=new j.TokenSet,i.node.edges[h]=l),1==i.str.length&&(l.final=!0),n.push({node:l,editsRemaining:i.editsRemaining-1,str:c+i.str.slice(2)})}}}return r},j.TokenSet.fromString=function(e){for(var t=new j.TokenSet,r=t,n=0,i=e.length;n<i;n++){var s=e[n],o=n==i-1;if("*"==s)t.edges[s]=t,t.final=o;else{var a=new j.TokenSet;a.final=o,t.edges[s]=a,t=a}}return r},j.TokenSet.prototype.toArray=function(){for(var e=[],t=[{prefix:"",node:this}];t.length;){var r=t.pop(),n=Object.keys(r.node.edges),i=n.length;r.node.final&&(r.prefix.charAt(0),e.push(r.prefix));for(var s=0;s<i;s++){var o=n[s];t.push({prefix:r.prefix.concat(o),node:r.node.edges[o]})}}return e},j.TokenSet.prototype.toString=function(){if(this._str)return this._str;for(var e=this.final?"1":"0",t=Object.keys(this.edges).sort(),r=t.length,n=0;n<r;n++){var i=t[n];e=e+i+this.edges[i].id}return e},j.TokenSet.prototype.intersect=function(e){for(var t=new j.TokenSet,r=void 0,n=[{qNode:e,output:t,node:this}];n.length;){r=n.pop();for(var i=Object.keys(r.qNode.edges),s=i.length,o=Object.keys(r.node.edges),a=o.length,u=0;u<s;u++)for(var l=i[u],c=0;c<a;c++){var h=o[c];if(h==l||"*"==l){var d=r.node.edges[h],f=r.qNode.edges[l],p=d.final&&f.final,y=void 0;h in r.output.edges?(y=r.output.edges[h]).final=y.final||p:((y=new j.TokenSet).final=p,r.output.edges[h]=y),n.push({qNode:f,output:y,node:d})}}}return t},j.TokenSet.Builder=function(){this.previousWord="",this.root=new j.TokenSet,this.uncheckedNodes=[],this.minimizedNodes={}},j.TokenSet.Builder.prototype.insert=function(e){var t,r=0;if(e<this.previousWord)throw new Error("Out of order word insertion");for(var n=0;n<e.length&&n<this.previousWord.length&&e[n]==this.previousWord[n];n++)r++;this.minimize(r),t=0==this.uncheckedNodes.length?this.root:this.uncheckedNodes[this.uncheckedNodes.length-1].child;for(n=r;n<e.length;n++){var i=new j.TokenSet,s=e[n];t.edges[s]=i,this.uncheckedNodes.push({parent:t,char:s,child:i}),t=i}t.final=!0,this.previousWord=e},j.TokenSet.Builder.prototype.finish=function(){this.minimize(0)},j.TokenSet.Builder.prototype.minimize=function(e){for(var t=this.uncheckedNodes.length-1;t>=e;t--){var r=this.uncheckedNodes[t],n=r.child.toString();n in this.minimizedNodes?r.parent.edges[r.char]=this.minimizedNodes[n]:(r.child._str=n,this.minimizedNodes[n]=r.child),this.uncheckedNodes.pop()}},j.Index=function(e){this.invertedIndex=e.invertedIndex,this.fieldVectors=e.fieldVectors,this.tokenSet=e.tokenSet,this.fields=e.fields,this.pipeline=e.pipeline},j.Index.prototype.search=function(e){return this.query((function(t){new j.QueryParser(e,t).parse()}))},j.Index.prototype.query=function(e){for(var t=new j.Query(this.fields),r=Object.create(null),n=Object.create(null),i=Object.create(null),s=Object.create(null),o=Object.create(null),a=0;a<this.fields.length;a++)n[this.fields[a]]=new j.Vector;e.call(t,t);for(a=0;a<t.clauses.length;a++){var u=t.clauses[a],l=null,c=j.Set.empty;l=u.usePipeline?this.pipeline.runString(u.term,{fields:u.fields}):[u.term];for(var h=0;h<l.length;h++){var d=l[h];u.term=d;var f=j.TokenSet.fromClause(u),p=this.tokenSet.intersect(f).toArray();if(0===p.length&&u.presence===j.Query.presence.REQUIRED){for(var y=0;y<u.fields.length;y++){s[R=u.fields[y]]=j.Set.empty}break}for(var m=0;m<p.length;m++){var g=p[m],x=this.invertedIndex[g],v=x._index;for(y=0;y<u.fields.length;y++){var w=x[R=u.fields[y]],E=Object.keys(w),Q=g+"/"+R,k=new j.Set(E);if(u.presence==j.Query.presence.REQUIRED&&(c=c.union(k),void 0===s[R]&&(s[R]=j.Set.complete)),u.presence!=j.Query.presence.PROHIBITED){if(n[R].upsert(v,u.boost,(function(e,t){return e+t})),!i[Q]){for(var b=0;b<E.length;b++){var S,L=E[b],T=new j.FieldRef(L,R),P=w[L];void 0===(S=r[T])?r[T]=new j.MatchData(g,R,P):S.add(g,R,P)}i[Q]=!0}}else void 0===o[R]&&(o[R]=j.Set.empty),o[R]=o[R].union(k)}}}if(u.presence===j.Query.presence.REQUIRED)for(y=0;y<u.fields.length;y++){s[R=u.fields[y]]=s[R].intersect(c)}}var I=j.Set.complete,O=j.Set.empty;for(a=0;a<this.fields.length;a++){var R;s[R=this.fields[a]]&&(I=I.intersect(s[R])),o[R]&&(O=O.union(o[R]))}var C=Object.keys(r),F=[],N=Object.create(null);if(t.isNegated()){C=Object.keys(this.fieldVectors);for(a=0;a<C.length;a++){T=C[a];var _=j.FieldRef.fromString(T);r[T]=new j.MatchData}}for(a=0;a<C.length;a++){var D=(_=j.FieldRef.fromString(C[a])).docRef;if(I.contains(D)&&!O.contains(D)){var A,z=this.fieldVectors[_],M=n[_.fieldName].similarity(z);if(void 0!==(A=N[D]))A.score+=M,A.matchData.combine(r[_]);else{var B={ref:D,score:M,matchData:r[_]};N[D]=B,F.push(B)}}}return F.sort((function(e,t){return t.score-e.score}))},j.Index.prototype.toJSON=function(){var e=Object.keys(this.invertedIndex).sort().map((function(e){return[e,this.invertedIndex[e]]}),this),t=Object.keys(this.fieldVectors).map((function(e){return[e,this.fieldVectors[e].toJSON()]}),this);return{version:j.version,fields:this.fields,fieldVectors:t,invertedIndex:e,pipeline:this.pipeline.toJSON()}},j.Index.load=function(e){var t={},r={},n=e.fieldVectors,i=Object.create(null),s=e.invertedIndex,o=new j.TokenSet.Builder,a=j.Pipeline.load(e.pipeline);e.version!=j.version&&j.utils.warn("Version mismatch when loading serialised index. Current version of lunr '"+j.version+"' does not match serialized index '"+e.version+"'");for(var u=0;u<n.length;u++){var l=(h=n[u])[0],c=h[1];r[l]=new j.Vector(c)}for(u=0;u<s.length;u++){var h,d=(h=s[u])[0],f=h[1];o.insert(d),i[d]=f}return o.finish(),t.fields=e.fields,t.fieldVectors=r,t.invertedIndex=i,t.tokenSet=o.root,t.pipeline=a,new j.Index(t)},j.Builder=function(){this._ref="id",this._fields=Object.create(null),this._documents=Object.create(null),this.invertedIndex=Object.create(null),this.fieldTermFrequencies={},this.fieldLengths={},this.tokenizer=j.tokenizer,this.pipeline=new j.Pipeline,this.searchPipeline=new j.Pipeline,this.documentCount=0,this._b=.75,this._k1=1.2,this.termIndex=0,this.metadataWhitelist=[]},j.Builder.prototype.ref=function(e){this._ref=e},j.Builder.prototype.field=function(e,t){if(/\//.test(e))throw new RangeError("Field '"+e+"' contains illegal character '/'");this._fields[e]=t||{}},j.Builder.prototype.b=function(e){this._b=e<0?0:e>1?1:e},j.Builder.prototype.k1=function(e){this._k1=e},j.Builder.prototype.add=function(e,t){var r=e[this._ref],n=Object.keys(this._fields);this._documents[r]=t||{},this.documentCount+=1;for(var i=0;i<n.length;i++){var s=n[i],o=this._fields[s].extractor,a=o?o(e):e[s],u=this.tokenizer(a,{fields:[s]}),l=this.pipeline.run(u),c=new j.FieldRef(r,s),h=Object.create(null);this.fieldTermFrequencies[c]=h,this.fieldLengths[c]=0,this.fieldLengths[c]+=l.length;for(var d=0;d<l.length;d++){var f=l[d];if(null==h[f]&&(h[f]=0),h[f]+=1,null==this.invertedIndex[f]){var p=Object.create(null);p._index=this.termIndex,this.termIndex+=1;for(var y=0;y<n.length;y++)p[n[y]]=Object.create(null);this.invertedIndex[f]=p}null==this.invertedIndex[f][s][r]&&(this.invertedIndex[f][s][r]=Object.create(null));for(var m=0;m<this.metadataWhitelist.length;m++){var g=this.metadataWhitelist[m],x=f.metadata[g];null==this.invertedIndex[f][s][r][g]&&(this.invertedIndex[f][s][r][g]=[]),this.invertedIndex[f][s][r][g].push(x)}}}},j.Builder.prototype.calculateAverageFieldLengths=function(){for(var e=Object.keys(this.fieldLengths),t=e.length,r={},n={},i=0;i<t;i++){var s=j.FieldRef.fromString(e[i]),o=s.fieldName;n[o]||(n[o]=0),n[o]+=1,r[o]||(r[o]=0),r[o]+=this.fieldLengths[s]}var a=Object.keys(this._fields);for(i=0;i<a.length;i++){var u=a[i];r[u]=r[u]/n[u]}this.averageFieldLength=r},j.Builder.prototype.createFieldVectors=function(){for(var e={},t=Object.keys(this.fieldTermFrequencies),r=t.length,n=Object.create(null),i=0;i<r;i++){for(var s=j.FieldRef.fromString(t[i]),o=s.fieldName,a=this.fieldLengths[s],u=new j.Vector,l=this.fieldTermFrequencies[s],c=Object.keys(l),h=c.length,d=this._fields[o].boost||1,f=this._documents[s.docRef].boost||1,p=0;p<h;p++){var y,m,g,x=c[p],v=l[x],w=this.invertedIndex[x]._index;void 0===n[x]?(y=j.idf(this.invertedIndex[x],this.documentCount),n[x]=y):y=n[x],m=y*((this._k1+1)*v)/(this._k1*(1-this._b+this._b*(a/this.averageFieldLength[o]))+v),m*=d,m*=f,g=Math.round(1e3*m)/1e3,u.insert(w,g)}e[s]=u}this.fieldVectors=e},j.Builder.prototype.createTokenSet=function(){this.tokenSet=j.TokenSet.fromArray(Object.keys(this.invertedIndex).sort())},j.Builder.prototype.build=function(){return this.calculateAverageFieldLengths(),this.createFieldVectors(),this.createTokenSet(),new j.Index({invertedIndex:this.invertedIndex,fieldVectors:this.fieldVectors,tokenSet:this.tokenSet,fields:Object.keys(this._fields),pipeline:this.searchPipeline})},j.Builder.prototype.use=function(e){var t=Array.prototype.slice.call(arguments,1);t.unshift(this),e.apply(this,t)},j.MatchData=function(e,t,r){for(var n=Object.create(null),i=Object.keys(r||{}),s=0;s<i.length;s++){var o=i[s];n[o]=r[o].slice()}this.metadata=Object.create(null),void 0!==e&&(this.metadata[e]=Object.create(null),this.metadata[e][t]=n)},j.MatchData.prototype.combine=function(e){for(var t=Object.keys(e.metadata),r=0;r<t.length;r++){var n=t[r],i=Object.keys(e.metadata[n]);null==this.metadata[n]&&(this.metadata[n]=Object.create(null));for(var s=0;s<i.length;s++){var o=i[s],a=Object.keys(e.metadata[n][o]);null==this.metadata[n][o]&&(this.metadata[n][o]=Object.create(null));for(var u=0;u<a.length;u++){var l=a[u];null==this.metadata[n][o][l]?this.metadata[n][o][l]=e.metadata[n][o][l]:this.metadata[n][o][l]=this.metadata[n][o][l].concat(e.metadata[n][o][l])}}}},j.MatchData.prototype.add=function(e,t,r){if(!(e in this.metadata))return this.metadata[e]=Object.create(null),void(this.metadata[e][t]=r);if(t in this.metadata[e])for(var n=Object.keys(r),i=0;i<n.length;i++){var s=n[i];s in this.metadata[e][t]?this.metadata[e][t][s]=this.metadata[e][t][s].concat(r[s]):this.metadata[e][t][s]=r[s]}else this.metadata[e][t]=r},j.Query=function(e){this.clauses=[],this.allFields=e},j.Query.wildcard=new String("*"),j.Query.wildcard.NONE=0,j.Query.wildcard.LEADING=1,j.Query.wildcard.TRAILING=2,j.Query.presence={OPTIONAL:1,REQUIRED:2,PROHIBITED:3},j.Query.prototype.clause=function(e){return"fields"in e||(e.fields=this.allFields),"boost"in e||(e.boost=1),"usePipeline"in e||(e.usePipeline=!0),"wildcard"in e||(e.wildcard=j.Query.wildcard.NONE),e.wildcard&j.Query.wildcard.LEADING&&e.term.charAt(0)!=j.Query.wildcard&&(e.term="*"+e.term),e.wildcard&j.Query.wildcard.TRAILING&&e.term.slice(-1)!=j.Query.wildcard&&(e.term=e.term+"*"),"presence"in e||(e.presence=j.Query.presence.OPTIONAL),this.clauses.push(e),this},j.Query.prototype.isNegated=function(){for(var e=0;e<this.clauses.length;e++)if(this.clauses[e].presence!=j.Query.presence.PROHIBITED)return!1;return!0},j.Query.prototype.term=function(e,t){if(Array.isArray(e))return e.forEach((function(e){this.term(e,j.utils.clone(t))}),this),this;var r=t||{};return r.term=e.toString(),this.clause(r),this},j.QueryParseError=function(e,t,r){this.name="QueryParseError",this.message=e,this.start=t,this.end=r},j.QueryParseError.prototype=new Error,j.QueryLexer=function(e){this.lexemes=[],this.str=e,this.length=e.length,this.pos=0,this.start=0,this.escapeCharPositions=[]},j.QueryLexer.prototype.run=function(){for(var e=j.QueryLexer.lexText;e;)e=e(this)},j.QueryLexer.prototype.sliceString=function(){for(var e=[],t=this.start,r=this.pos,n=0;n<this.escapeCharPositions.length;n++)r=this.escapeCharPositions[n],e.push(this.str.slice(t,r)),t=r+1;return e.push(this.str.slice(t,this.pos)),this.escapeCharPositions.length=0,e.join("")},j.QueryLexer.prototype.emit=function(e){this.lexemes.push({type:e,str:this.sliceString(),start:this.start,end:this.pos}),this.start=this.pos},j.QueryLexer.prototype.escapeCharacter=function(){this.escapeCharPositions.push(this.pos-1),this.pos+=1},j.QueryLexer.prototype.next=function(){if(this.pos>=this.length)return j.QueryLexer.EOS;var e=this.str.charAt(this.pos);return this.pos+=1,e},j.QueryLexer.prototype.width=function(){return this.pos-this.start},j.QueryLexer.prototype.ignore=function(){this.start==this.pos&&(this.pos+=1),this.start=this.pos},j.QueryLexer.prototype.backup=function(){this.pos-=1},j.QueryLexer.prototype.acceptDigitRun=function(){var e,t;do{t=(e=this.next()).charCodeAt(0)}while(t>47&&t<58);e!=j.QueryLexer.EOS&&this.backup()},j.QueryLexer.prototype.more=function(){return this.pos<this.length},j.QueryLexer.EOS="EOS",j.QueryLexer.FIELD="FIELD",j.QueryLexer.TERM="TERM",j.QueryLexer.EDIT_DISTANCE="EDIT_DISTANCE",j.QueryLexer.BOOST="BOOST",j.QueryLexer.PRESENCE="PRESENCE",j.QueryLexer.lexField=function(e){return e.backup(),e.emit(j.QueryLexer.FIELD),e.ignore(),j.QueryLexer.lexText},j.QueryLexer.lexTerm=function(e){if(e.width()>1&&(e.backup(),e.emit(j.QueryLexer.TERM)),e.ignore(),e.more())return j.QueryLexer.lexText},j.QueryLexer.lexEditDistance=function(e){return e.ignore(),e.acceptDigitRun(),e.emit(j.QueryLexer.EDIT_DISTANCE),j.QueryLexer.lexText},j.QueryLexer.lexBoost=function(e){return e.ignore(),e.acceptDigitRun(),e.emit(j.QueryLexer.BOOST),j.QueryLexer.lexText},j.QueryLexer.lexEOS=function(e){e.width()>0&&e.emit(j.QueryLexer.TERM)},j.QueryLexer.termSeparator=j.tokenizer.separator,j.QueryLexer.lexText=function(e){for(;;){var t=e.next();if(t==j.QueryLexer.EOS)return j.QueryLexer.lexEOS;if(92!=t.charCodeAt(0)){if(":"==t)return j.QueryLexer.lexField;if("~"==t)return e.backup(),e.width()>0&&e.emit(j.QueryLexer.TERM),j.QueryLexer.lexEditDistance;if("^"==t)return e.backup(),e.width()>0&&e.emit(j.QueryLexer.TERM),j.QueryLexer.lexBoost;if("+"==t&&1===e.width())return e.emit(j.QueryLexer.PRESENCE),j.QueryLexer.lexText;if("-"==t&&1===e.width())return e.emit(j.QueryLexer.PRESENCE),j.QueryLexer.lexText;if(t.match(j.QueryLexer.termSeparator))return j.QueryLexer.lexTerm}else e.escapeCharacter()}},j.QueryParser=function(e,t){this.lexer=new j.QueryLexer(e),this.query=t,this.currentClause={},this.lexemeIdx=0},j.QueryParser.prototype.parse=function(){this.lexer.run(),this.lexemes=this.lexer.lexemes;for(var e=j.QueryParser.parseClause;e;)e=e(this);return this.query},j.QueryParser.prototype.peekLexeme=function(){return this.lexemes[this.lexemeIdx]},j.QueryParser.prototype.consumeLexeme=function(){var e=this.peekLexeme();return this.lexemeIdx+=1,e},j.QueryParser.prototype.nextClause=function(){var e=this.currentClause;this.query.clause(e),this.currentClause={}},j.QueryParser.parseClause=function(e){var t=e.peekLexeme();if(null!=t)switch(t.type){case j.QueryLexer.PRESENCE:return j.QueryParser.parsePresence;case j.QueryLexer.FIELD:return j.QueryParser.parseField;case j.QueryLexer.TERM:return j.QueryParser.parseTerm;default:var r="expected either a field or a term, found "+t.type;throw t.str.length>=1&&(r+=" with value '"+t.str+"'"),new j.QueryParseError(r,t.start,t.end)}},j.QueryParser.parsePresence=function(e){var t=e.consumeLexeme();if(null!=t){switch(t.str){case"-":e.currentClause.presence=j.Query.presence.PROHIBITED;break;case"+":e.currentClause.presence=j.Query.presence.REQUIRED;break;default:var r="unrecognised presence operator'"+t.str+"'";throw new j.QueryParseError(r,t.start,t.end)}var n=e.peekLexeme();if(null==n){r="expecting term or field, found nothing";throw new j.QueryParseError(r,t.start,t.end)}switch(n.type){case j.QueryLexer.FIELD:return j.QueryParser.parseField;case j.QueryLexer.TERM:return j.QueryParser.parseTerm;default:r="expecting term or field, found '"+n.type+"'";throw new j.QueryParseError(r,n.start,n.end)}}},j.QueryParser.parseField=function(e){var t=e.consumeLexeme();if(null!=t){if(-1==e.query.allFields.indexOf(t.str)){var r=e.query.allFields.map((function(e){return"'"+e+"'"})).join(", "),n="unrecognised field '"+t.str+"', possible fields: "+r;throw new j.QueryParseError(n,t.start,t.end)}e.currentClause.fields=[t.str];var i=e.peekLexeme();if(null==i){n="expecting term, found nothing";throw new j.QueryParseError(n,t.start,t.end)}if(i.type===j.QueryLexer.TERM)return j.QueryParser.parseTerm;n="expecting term, found '"+i.type+"'";throw new j.QueryParseError(n,i.start,i.end)}},j.QueryParser.parseTerm=function(e){var t=e.consumeLexeme();if(null!=t){e.currentClause.term=t.str.toLowerCase(),-1!=t.str.indexOf("*")&&(e.currentClause.usePipeline=!1);var r=e.peekLexeme();if(null!=r)switch(r.type){case j.QueryLexer.TERM:return e.nextClause(),j.QueryParser.parseTerm;case j.QueryLexer.FIELD:return e.nextClause(),j.QueryParser.parseField;case j.QueryLexer.EDIT_DISTANCE:return j.QueryParser.parseEditDistance;case j.QueryLexer.BOOST:return j.QueryParser.parseBoost;case j.QueryLexer.PRESENCE:return e.nextClause(),j.QueryParser.parsePresence;default:var n="Unexpected lexeme type '"+r.type+"'";throw new j.QueryParseError(n,r.start,r.end)}else e.nextClause()}},j.QueryParser.parseEditDistance=function(e){var t=e.consumeLexeme();if(null!=t){var r=parseInt(t.str,10);if(isNaN(r)){var n="edit distance must be numeric";throw new j.QueryParseError(n,t.start,t.end)}e.currentClause.editDistance=r;var i=e.peekLexeme();if(null!=i)switch(i.type){case j.QueryLexer.TERM:return e.nextClause(),j.QueryParser.parseTerm;case j.QueryLexer.FIELD:return e.nextClause(),j.QueryParser.parseField;case j.QueryLexer.EDIT_DISTANCE:return j.QueryParser.parseEditDistance;case j.QueryLexer.BOOST:return j.QueryParser.parseBoost;case j.QueryLexer.PRESENCE:return e.nextClause(),j.QueryParser.parsePresence;default:n="Unexpected lexeme type '"+i.type+"'";throw new j.QueryParseError(n,i.start,i.end)}else e.nextClause()}},j.QueryParser.parseBoost=function(e){var t=e.consumeLexeme();if(null!=t){var r=parseInt(t.str,10);if(isNaN(r)){var n="boost must be numeric";throw new j.QueryParseError(n,t.start,t.end)}e.currentClause.boost=r;var i=e.peekLexeme();if(null!=i)switch(i.type){case j.QueryLexer.TERM:return e.nextClause(),j.QueryParser.parseTerm;case j.QueryLexer.FIELD:return e.nextClause(),j.QueryParser.parseField;case j.QueryLexer.EDIT_DISTANCE:return j.QueryParser.parseEditDistance;case j.QueryLexer.BOOST:return j.QueryParser.parseBoost;case j.QueryLexer.PRESENCE:return e.nextClause(),j.QueryParser.parsePresence;default:n="Unexpected lexeme type '"+i.type+"'";throw new j.QueryParseError(n,i.start,i.end)}else e.nextClause()}},void 0===(i="function"==typeof(n=function(){return j})?n.call(t,r,t,e):n)||(e.exports=i)}()}}]); \ No newline at end of file diff --git a/assets/js/4491.82a2b9c4.js.LICENSE.txt b/assets/js/540.b78022b2.js.LICENSE.txt similarity index 100% rename from assets/js/4491.82a2b9c4.js.LICENSE.txt rename to assets/js/540.b78022b2.js.LICENSE.txt diff --git a/assets/js/5582.fb876156.js b/assets/js/5582.fb876156.js deleted file mode 100644 index 3e278077..00000000 --- a/assets/js/5582.fb876156.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[5582],{9101:(e,t,a)=>{a.d(t,{in:()=>c,OU:()=>y,Ki:()=>_,kJ:()=>p,x:()=>i,e7:()=>m,J_:()=>f,Gx:()=>k});var s=a(6540),n=a(4799),r=a(3512),l=a(4848);function i(){const e=(0,r.A)(),t=e?.data?.blogMetadata;if(!t)throw new Error("useBlogMetadata() can't be called on the current route because the blog metadata could not be found in route context");return t}const o=s.createContext(null);function c(e){let{children:t,content:a,isBlogPostPage:n=!1}=e;const r=function(e){let{content:t,isBlogPostPage:a}=e;return(0,s.useMemo)((()=>({metadata:t.metadata,frontMatter:t.frontMatter,assets:t.assets,toc:t.toc,isBlogPostPage:a})),[t,a])}({content:a,isBlogPostPage:n});return(0,l.jsx)(o.Provider,{value:r,children:t})}function m(){const e=(0,s.useContext)(o);if(null===e)throw new n.dV("BlogPostProvider");return e}var u=a(8180),d=a(7639);const h=e=>new Date(e).toISOString();function g(e){const t=e.map(j);return{author:1===t.length?t[0]:t}}function x(e,t,a){return e?{image:v({imageUrl:t(e,{absolute:!0}),caption:`title image for the blog post: ${a}`})}:{}}function p(e){const{siteConfig:t}=(0,d.A)(),{withBaseUrl:a}=(0,u.hH)(),{metadata:{blogDescription:s,blogTitle:n,permalink:r}}=e,l=`${t.url}${r}`;return{"@context":"https://schema.org","@type":"Blog","@id":l,mainEntityOfPage:l,headline:n,description:s,blogPost:e.items.map((e=>function(e,t,a){const{assets:s,frontMatter:n,metadata:r}=e,{date:l,title:i,description:o,lastUpdatedAt:c}=r,m=s.image??n.image,u=n.keywords??[],d=`${t.url}${r.permalink}`,p=c?h(c):void 0;return{"@type":"BlogPosting","@id":d,mainEntityOfPage:d,url:d,headline:i,name:i,description:o,datePublished:l,...p?{dateModified:p}:{},...g(r.authors),...x(m,a,i),...u?{keywords:u}:{}}}(e.content,t,a)))}}function f(){const e=i(),{assets:t,metadata:a}=m(),{siteConfig:s}=(0,d.A)(),{withBaseUrl:n}=(0,u.hH)(),{date:r,title:l,description:o,frontMatter:c,lastUpdatedAt:p}=a,f=t.image??c.image,j=c.keywords??[],v=p?h(p):void 0,b=`${s.url}${a.permalink}`;return{"@context":"https://schema.org","@type":"BlogPosting","@id":b,mainEntityOfPage:b,url:b,headline:l,name:l,description:o,datePublished:r,...v?{dateModified:v}:{},...g(a.authors),...x(f,n,l),...j?{keywords:j}:{},isPartOf:{"@type":"Blog","@id":`${s.url}${e.blogBasePath}`,name:e.blogTitle}}}function j(e){return{"@type":"Person",...e.name?{name:e.name}:{},...e.title?{description:e.title}:{},...e.url?{url:e.url}:{},...e.email?{email:e.email}:{},...e.imageURL?{image:e.imageURL}:{}}}function v(e){let{imageUrl:t,caption:a}=e;return{"@type":"ImageObject","@id":t,url:t,contentUrl:t,caption:a}}var b=a(6347),w=a(4783),N=a(5167),A=a(260);function k(e){const{pathname:t}=(0,b.zy)();return(0,s.useMemo)((()=>e.filter((e=>function(e,t){return!(e.unlisted&&!(0,A.ys)(e.permalink,t))}(e,t)))),[e,t])}function _(e){const t=(0,N.$z)(e,(e=>`${new Date(e.date).getFullYear()}`)),a=Object.entries(t);return a.reverse(),a}function y(e){let{items:t,ulClassName:a,liClassName:s,linkClassName:n,linkActiveClassName:r}=e;return(0,l.jsx)("ul",{className:a,children:t.map((e=>(0,l.jsx)("li",{className:s,children:(0,l.jsx)(w.A,{isNavLink:!0,to:e.permalink,className:n,activeClassName:r,children:e.title})},e.permalink)))})}},6953:(e,t,a)=>{a.d(t,{A:()=>I});var s=a(6540),n=a(4164),r=a(7635),l=a(2216),i=a(3230),o=a(9101),c=a(6957),m=a(5225),u=a(4848);function d(e){let{year:t,yearGroupHeadingClassName:a,children:s}=e;return(0,u.jsxs)("div",{role:"group",children:[(0,u.jsx)(m.A,{as:"h3",className:a,children:t}),s]})}function h(e){let{items:t,yearGroupHeadingClassName:a,ListComponent:s}=e;if((0,c.p)().blog.sidebar.groupByYear){const e=(0,o.Ki)(t);return(0,u.jsx)(u.Fragment,{children:e.map((e=>{let[t,n]=e;return(0,u.jsx)(d,{year:t,yearGroupHeadingClassName:a,children:(0,u.jsx)(s,{items:n})},t)}))})}return(0,u.jsx)(s,{items:t})}const g=(0,s.memo)(h),x="sidebar_re4s",p="sidebarItemTitle_pO2u",f="sidebarItemList_Yudw",j="sidebarItem__DBe",v="sidebarItemLink_mo7H",b="sidebarItemLinkActive_I1ZP",w="yearGroupHeading_rMGB",N=e=>{let{items:t}=e;return(0,u.jsx)(o.OU,{items:t,ulClassName:(0,n.A)(f,"clean-list"),liClassName:j,linkClassName:v,linkActiveClassName:b})};function A(e){let{sidebar:t}=e;const a=(0,o.Gx)(t.items);return(0,u.jsx)("aside",{className:"col col--3",children:(0,u.jsxs)("nav",{className:(0,n.A)(x,"thin-scrollbar"),"aria-label":(0,i.T)({id:"theme.blog.sidebar.navAriaLabel",message:"Blog recent posts navigation",description:"The ARIA label for recent posts in the blog sidebar"}),children:[(0,u.jsx)("div",{className:(0,n.A)(p,"margin-bottom--md"),children:t.title}),(0,u.jsx)(g,{items:a,ListComponent:N,yearGroupHeadingClassName:w})]})})}const k=(0,s.memo)(A);var _=a(763);const y="yearGroupHeading_QT03",M=e=>{let{items:t}=e;return(0,u.jsx)(o.OU,{items:t,ulClassName:"menu__list",liClassName:"menu__list-item",linkClassName:"menu__link",linkActiveClassName:"menu__link--active"})};function C(e){let{sidebar:t}=e;const a=(0,o.Gx)(t.items);return(0,u.jsx)(g,{items:a,ListComponent:M,yearGroupHeadingClassName:y})}function P(e){return(0,u.jsx)(_.GX,{component:C,props:e})}const B=(0,s.memo)(P);function L(e){let{sidebar:t}=e;const a=(0,l.l)();return t?.items.length?"mobile"===a?(0,u.jsx)(B,{sidebar:t}):(0,u.jsx)(k,{sidebar:t}):null}function I(e){const{sidebar:t,toc:a,children:s,...l}=e,i=t&&t.items.length>0;return(0,u.jsx)(r.A,{...l,children:(0,u.jsx)("div",{className:"container margin-vert--lg",children:(0,u.jsxs)("div",{className:"row",children:[(0,u.jsx)(L,{sidebar:t}),(0,u.jsx)("main",{className:(0,n.A)("col",{"col--7":i,"col--9 col--offset-1":!i}),children:s}),a&&(0,u.jsx)("div",{className:"col col--2",children:a})]})})})}},8406:(e,t,a)=>{a.d(t,{A:()=>z});a(6540);var s=a(4164),n=a(9101),r=a(4848);function l(e){let{children:t,className:a}=e;return(0,r.jsx)("article",{className:a,children:t})}var i=a(4783);const o={title:"title_f1Hy"};function c(e){let{className:t}=e;const{metadata:a,isBlogPostPage:l}=(0,n.e7)(),{permalink:c,title:m}=a,u=l?"h1":"h2";return(0,r.jsx)(u,{className:(0,s.A)(o.title,t),children:l?m:(0,r.jsx)(i.A,{to:c,children:m})})}var m=a(3230),u=a(7824),d=a(9191);const h={container:"container_mt6G"};function g(e){let{readingTime:t}=e;const a=function(){const{selectMessage:e}=(0,u.W)();return t=>{const a=Math.ceil(t);return e(a,(0,m.T)({id:"theme.blog.post.readingTime.plurals",description:'Pluralized label for "{readingTime} min read". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',message:"One min read|{readingTime} min read"},{readingTime:a}))}}();return(0,r.jsx)(r.Fragment,{children:a(t)})}function x(e){let{date:t,formattedDate:a}=e;return(0,r.jsx)("time",{dateTime:t,children:a})}function p(){return(0,r.jsx)(r.Fragment,{children:" \xb7 "})}function f(e){let{className:t}=e;const{metadata:a}=(0,n.e7)(),{date:l,readingTime:i}=a,o=(0,d.i)({day:"numeric",month:"long",year:"numeric",timeZone:"UTC"});return(0,r.jsxs)("div",{className:(0,s.A)(h.container,"margin-vert--md",t),children:[(0,r.jsx)(x,{date:l,formattedDate:(c=l,o.format(new Date(c)))}),void 0!==i&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(p,{}),(0,r.jsx)(g,{readingTime:i})]})]});var c}const j="githubSvg_Uu4N";const v="xSvg_y3PF";const b=function(e){return(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",...e,children:[(0,r.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,r.jsx)("path",{d:"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"}),(0,r.jsx)("path",{d:"M3.6 9h16.8"}),(0,r.jsx)("path",{d:"M3.6 15h16.8"}),(0,r.jsx)("path",{d:"M11.5 3a17 17 0 0 0 0 18"}),(0,r.jsx)("path",{d:"M12.5 3a17 17 0 0 1 0 18"})]})},w={authorSocials:"authorSocials_rSDt",authorSocialLink:"authorSocialLink_owbf",authorSocialIcon:"authorSocialIcon_XYv3"},N={twitter:{Icon:function(e){return(0,r.jsx)("svg",{viewBox:"0 0 256 209",width:"1em",height:"1em",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid",...e,children:(0,r.jsx)("path",{d:"M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 0 1-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 0 1-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 0 1-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 0 0 256 25.45",fill:"#55acee"})})},label:"Twitter"},github:{Icon:function(e){return(0,r.jsx)("svg",{viewBox:"0 0 256 250",width:"1em",height:"1em",...e,className:(0,s.A)(e.className,j),xmlns:"http://www.w3.org/2000/svg",style:{"--dark":"#000","--light":"#fff"},preserveAspectRatio:"xMidYMid",children:(0,r.jsx)("path",{d:"M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z"})})},label:"GitHub"},stackoverflow:{Icon:function(e){return(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 169.61 200",width:"1em",height:"1em",...e,children:[(0,r.jsx)("path",{d:"M140.44 178.38v-48.65h21.61V200H0v-70.27h21.61v48.65z",fill:"#bcbbbb"}),(0,r.jsx)("path",{d:"M124.24 140.54l4.32-16.22-86.97-17.83-3.78 17.83zM49.7 82.16L130.72 120l7.56-16.22-81.02-37.83zm22.68-40l68.06 57.3 11.35-13.51-68.6-57.3-11.35 13.51zM116.14 0l-14.59 10.81 53.48 71.89 14.58-10.81zM37.81 162.16h86.43v-16.21H37.81z",fill:"#f48024"})]})},label:"Stack Overflow"},linkedin:{Icon:function(e){return(0,r.jsx)("svg",{width:"1em",height:"1em",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid",viewBox:"0 0 256 256",...e,children:(0,r.jsx)("path",{d:"M218.123 218.127h-37.931v-59.403c0-14.165-.253-32.4-19.728-32.4-19.756 0-22.779 15.434-22.779 31.369v60.43h-37.93V95.967h36.413v16.694h.51a39.907 39.907 0 0 1 35.928-19.733c38.445 0 45.533 25.288 45.533 58.186l-.016 67.013ZM56.955 79.27c-12.157.002-22.014-9.852-22.016-22.009-.002-12.157 9.851-22.014 22.008-22.016 12.157-.003 22.014 9.851 22.016 22.008A22.013 22.013 0 0 1 56.955 79.27m18.966 138.858H37.95V95.967h37.97v122.16ZM237.033.018H18.89C8.58-.098.125 8.161-.001 18.471v219.053c.122 10.315 8.576 18.582 18.89 18.474h218.144c10.336.128 18.823-8.139 18.966-18.474V18.454c-.147-10.33-8.635-18.588-18.966-18.453",fill:"#0A66C2"})})},label:"LinkedIn"},x:{Icon:function(e){return(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",fill:"none",viewBox:"0 0 1200 1227",...e,className:(0,s.A)(e.className,v),style:{"--dark":"#000","--light":"#fff"},children:(0,r.jsx)("path",{d:"M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"})})},label:"X"}};function A(e){let{platform:t,link:a}=e;const{Icon:n,label:l}=N[o=t]??{Icon:b,label:o};var o;return(0,r.jsx)(i.A,{className:w.authorSocialLink,href:a,title:l,children:(0,r.jsx)(n,{className:(0,s.A)(w.authorSocialLink)})})}function k(e){let{author:t}=e;const a=Object.entries(t.socials??{});return(0,r.jsx)("div",{className:w.authorSocials,children:a.map((e=>{let[t,a]=e;return(0,r.jsx)(A,{platform:t,link:a},t)}))})}var _=a(5225);const y={authorImage:"authorImage_XqGP","author-as-h1":"author-as-h1_n9oJ","author-as-h2":"author-as-h2_gXvM",authorDetails:"authorDetails_lV9A",authorName:"authorName_yefp",authorTitle:"authorTitle_nd0D",authorBlogPostCount:"authorBlogPostCount_iiJ5"};function M(e){return e.href?(0,r.jsx)(i.A,{...e}):(0,r.jsx)(r.Fragment,{children:e.children})}function C(e){let{title:t}=e;return(0,r.jsx)("small",{className:y.authorTitle,title:t,children:t})}function P(e){let{name:t,as:a}=e;return a?(0,r.jsx)(_.A,{as:a,className:y.authorName,children:t}):(0,r.jsx)("span",{className:y.authorName,children:t})}function B(e){let{count:t}=e;return(0,r.jsx)("span",{className:(0,s.A)(y.authorBlogPostCount),children:t})}function L(e){let{as:t,author:a,className:n,count:l}=e;const{name:i,title:o,url:c,imageURL:m,email:u,page:d}=a,h=d?.permalink||c||u&&`mailto:${u}`||void 0;return(0,r.jsxs)("div",{className:(0,s.A)("avatar margin-bottom--sm",n,y[`author-as-${t}`]),children:[m&&(0,r.jsx)(M,{href:h,className:"avatar__photo-link",children:(0,r.jsx)("img",{className:(0,s.A)("avatar__photo",y.authorImage),src:m,alt:i})}),(i||o)&&(0,r.jsxs)("div",{className:(0,s.A)("avatar__intro",y.authorDetails),children:[(0,r.jsxs)("div",{className:"avatar__name",children:[i&&(0,r.jsx)(M,{href:h,children:(0,r.jsx)(P,{name:i,as:t})}),void 0!==l&&(0,r.jsx)(B,{count:l})]}),!!o&&(0,r.jsx)(C,{title:o}),(0,r.jsx)(k,{author:a})]})]})}const I={authorCol:"authorCol_Hf19",imageOnlyAuthorRow:"imageOnlyAuthorRow_pa_O",imageOnlyAuthorCol:"imageOnlyAuthorCol_G86a"};function T(e){let{className:t}=e;const{metadata:{authors:a},assets:l}=(0,n.e7)();if(0===a.length)return null;const i=a.every((e=>{let{name:t}=e;return!t})),o=1===a.length;return(0,r.jsx)("div",{className:(0,s.A)("margin-top--md margin-bottom--sm",i?I.imageOnlyAuthorRow:"row",t),children:a.map(((e,t)=>(0,r.jsx)("div",{className:(0,s.A)(!i&&(o?"col col--12":"col col--6"),i?I.imageOnlyAuthorCol:I.authorCol),children:(0,r.jsx)(L,{author:{...e,imageURL:l.authorsImageUrls[t]??e.imageURL}})},t)))})}function U(){return(0,r.jsxs)("header",{children:[(0,r.jsx)(c,{}),(0,r.jsx)(f,{}),(0,r.jsx)(T,{})]})}var O=a(4609),H=a(600);function $(e){let{children:t,className:a}=e;const{isBlogPostPage:l}=(0,n.e7)();return(0,r.jsx)("div",{id:l?O.LU:void 0,className:(0,s.A)("markdown",a),children:(0,r.jsx)(H.A,{children:t})})}var R=a(8630),G=a(5659),F=a(1113);function S(){return(0,r.jsx)("b",{children:(0,r.jsx)(m.A,{id:"theme.blog.post.readMore",description:"The label used in blog post item excerpts to link to full blog posts",children:"Read more"})})}function Z(e){const{blogPostTitle:t,...a}=e;return(0,r.jsx)(i.A,{"aria-label":(0,m.T)({message:"Read more about {title}",id:"theme.blog.post.readMoreLabel",description:"The ARIA label for the link to full blog posts from excerpts"},{title:t}),...a,children:(0,r.jsx)(S,{})})}function D(){const{metadata:e,isBlogPostPage:t}=(0,n.e7)(),{tags:a,title:l,editUrl:i,hasTruncateMarker:o,lastUpdatedBy:c,lastUpdatedAt:m}=e,u=!t&&o,d=a.length>0;if(!(d||u||i))return null;if(t){const e=!!(i||m||c);return(0,r.jsxs)("footer",{className:"docusaurus-mt-lg",children:[d&&(0,r.jsx)("div",{className:(0,s.A)("row","margin-top--sm",R.G.blog.blogFooterEditMetaRow),children:(0,r.jsx)("div",{className:"col",children:(0,r.jsx)(F.A,{tags:a})})}),e&&(0,r.jsx)(G.A,{className:(0,s.A)("margin-top--sm",R.G.blog.blogFooterEditMetaRow),editUrl:i,lastUpdatedAt:m,lastUpdatedBy:c})]})}return(0,r.jsxs)("footer",{className:"row docusaurus-mt-lg",children:[d&&(0,r.jsx)("div",{className:(0,s.A)("col",{"col--9":u}),children:(0,r.jsx)(F.A,{tags:a})}),u&&(0,r.jsx)("div",{className:(0,s.A)("col text--right",{"col--3":d}),children:(0,r.jsx)(Z,{blogPostTitle:l,to:e.permalink})})]})}function z(e){let{children:t,className:a}=e;const i=function(){const{isBlogPostPage:e}=(0,n.e7)();return e?void 0:"margin-bottom--xl"}();return(0,r.jsxs)(l,{className:(0,s.A)(i,a),children:[(0,r.jsx)(U,{}),(0,r.jsx)($,{children:t}),(0,r.jsx)(D,{})]})}},7824:(e,t,a)=>{a.d(t,{W:()=>c});var s=a(6540),n=a(7639);const r=["zero","one","two","few","many","other"];function l(e){return r.filter((t=>e.includes(t)))}const i={locale:"en",pluralForms:l(["one","other"]),select:e=>1===e?"one":"other"};function o(){const{i18n:{currentLocale:e}}=(0,n.A)();return(0,s.useMemo)((()=>{try{return function(e){const t=new Intl.PluralRules(e);return{locale:e,pluralForms:l(t.resolvedOptions().pluralCategories),select:e=>t.select(e)}}(e)}catch(t){return console.error(`Failed to use Intl.PluralRules for locale "${e}".\nDocusaurus will fallback to the default (English) implementation.\nError: ${t.message}\n`),i}}),[e])}function c(){const e=o();return{selectMessage:(t,a)=>function(e,t,a){const s=e.split("|");if(1===s.length)return s[0];s.length>a.pluralForms.length&&console.error(`For locale=${a.locale}, a maximum of ${a.pluralForms.length} plural forms are expected (${a.pluralForms.join(",")}), but the message contains ${s.length}: ${e}`);const n=a.select(t),r=a.pluralForms.indexOf(n);return s[Math.min(r,s.length-1)]}(a,t,e)}}}}]); \ No newline at end of file diff --git a/assets/js/57b59cd4.0d1d3a6c.js b/assets/js/57b59cd4.b2b4e011.js similarity index 93% rename from assets/js/57b59cd4.0d1d3a6c.js rename to assets/js/57b59cd4.b2b4e011.js index c44e57f6..3a51a18e 100644 --- a/assets/js/57b59cd4.0d1d3a6c.js +++ b/assets/js/57b59cd4.b2b4e011.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[8880],{6114:(e,t,i)=>{},4183:(e,t,i)=>{i(6114)},5797:(e,t,i)=>{i.d(t,{X:()=>d});var s=i(6540),r=i(8180),a=i(4783),n=i(3013);const l="feature",o=(...e)=>(0,n.rx)(l,...e),c=o,m={root:"feature__root",title:"feature__title",image:"feature__image",imageWrapper:"feature__imageWrapper"};var h=i(4848);function d(e){let{className:t,image:i,title:n,children:l,link:o}=e;const d="string"==typeof i?(0,r.Ay)(i):"",u=s.useMemo((()=>i?"string"==typeof i?(0,h.jsx)("div",{className:m.imageWrapper,children:(0,h.jsx)("img",{className:m.image,src:d,alt:n})}):(0,h.jsx)("div",{className:m.imageWrapper,children:i(m.image)}):null),[i,d]);return(0,h.jsxs)("div",{className:c(m.root,"col col--4",t),children:[o?(0,h.jsxs)(a.A,{href:o,children:[u,(0,h.jsx)("h3",{className:m.title,children:n})]}):(0,h.jsxs)(h.Fragment,{children:[u,(0,h.jsx)("h3",{className:m.title,children:n})]}),(0,h.jsx)("p",{children:l})]})}},3134:(e,t,i)=>{i.r(t),i.d(t,{default:()=>p});i(6540);var s=i(7635),r=i(7639),a=i(5797),n=i(3013);i(4183);const l="community",o=(...e)=>(0,n.rx)(l,...e),c=o,m="community__root",h="community__pageTitle",d="community__card",u="community__cards";var g=i(4848);const p=function(){const e=(0,r.A)(),{siteConfig:t}=e;return(0,g.jsx)(s.A,{wrapperClassName:m,title:t.title,description:"A modern CSS pre-processor built for components",children:(0,g.jsxs)("main",{children:[(0,g.jsx)("div",{className:c("container",h),children:(0,g.jsx)("h2",{children:"Join the Community"})}),(0,g.jsx)("section",{className:u,children:(0,g.jsx)("div",{className:"container",children:(0,g.jsxs)("div",{className:"row",children:[(0,g.jsx)(a.X,{className:d,link:"https://github.com/wix/stylable",title:"GitHub",image:e=>(0,g.jsx)("svg",{className:e,width:"100%",height:"100%",viewBox:"0 0 1024 1024",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,g.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z",transform:"scale(64)"})}),children:"Track our development, search open issues, report new ones, and contribute back to the project"}),(0,g.jsx)(a.X,{className:d,link:"https://twitter.com/stylableio",title:"Twitter",image:"img/twitter-logo.svg",children:"Follow our Twitter to stay up to date with the latest happenings in Stylable"}),(0,g.jsx)(a.X,{className:d,link:"https://discord.gg/C5ZhENSbV7",title:"Discord",image:"img/discord-Logo-color.svg",children:"Join our Discord community, where you can chat with us, ask questions, and showcase your work"})]})})})]})})}},3013:(e,t,i)=>{function s(e,t,i){if(!1===i||null==i||i!=i)return"";if(!0===i)return e+"--"+t;var s=i.toString();return e+"---"+t+"-"+s.length+"-"+s.replace(/\s/gm,"_")}function r(e){for(var t=[],i=1;i<arguments.length;i++){var r=arguments[i];if(r)if("string"==typeof r)t[t.length]=r;else if(2===i)for(var a in r){var n=s(e,a,r[a]);n&&(t[t.length]=n)}}return t.join(" ")}i.d(t,{rx:()=>r})}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[8880],{6114:(e,t,i)=>{},4183:(e,t,i)=>{i(6114)},5453:(e,t,i)=>{i.d(t,{X:()=>d});var s=i(6540),r=i(6025),a=i(8774),n=i(3013);const l="feature",o=(...e)=>(0,n.rx)(l,...e),c=o,m={root:"feature__root",title:"feature__title",image:"feature__image",imageWrapper:"feature__imageWrapper"};var h=i(4848);function d(e){let{className:t,image:i,title:n,children:l,link:o}=e;const d="string"==typeof i?(0,r.Ay)(i):"",u=s.useMemo((()=>i?"string"==typeof i?(0,h.jsx)("div",{className:m.imageWrapper,children:(0,h.jsx)("img",{className:m.image,src:d,alt:n})}):(0,h.jsx)("div",{className:m.imageWrapper,children:i(m.image)}):null),[i,d]);return(0,h.jsxs)("div",{className:c(m.root,"col col--4",t),children:[o?(0,h.jsxs)(a.A,{href:o,children:[u,(0,h.jsx)("h3",{className:m.title,children:n})]}):(0,h.jsxs)(h.Fragment,{children:[u,(0,h.jsx)("h3",{className:m.title,children:n})]}),(0,h.jsx)("p",{children:l})]})}},2403:(e,t,i)=>{i.r(t),i.d(t,{default:()=>p});i(6540);var s=i(7823),r=i(4586),a=i(5453),n=i(3013);i(4183);const l="community",o=(...e)=>(0,n.rx)(l,...e),c=o,m="community__root",h="community__pageTitle",d="community__card",u="community__cards";var g=i(4848);const p=function(){const e=(0,r.A)(),{siteConfig:t}=e;return(0,g.jsx)(s.A,{wrapperClassName:m,title:t.title,description:"A modern CSS pre-processor built for components",children:(0,g.jsxs)("main",{children:[(0,g.jsx)("div",{className:c("container",h),children:(0,g.jsx)("h2",{children:"Join the Community"})}),(0,g.jsx)("section",{className:u,children:(0,g.jsx)("div",{className:"container",children:(0,g.jsxs)("div",{className:"row",children:[(0,g.jsx)(a.X,{className:d,link:"https://github.com/wix/stylable",title:"GitHub",image:e=>(0,g.jsx)("svg",{className:e,width:"100%",height:"100%",viewBox:"0 0 1024 1024",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,g.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z",transform:"scale(64)"})}),children:"Track our development, search open issues, report new ones, and contribute back to the project"}),(0,g.jsx)(a.X,{className:d,link:"https://twitter.com/stylableio",title:"Twitter",image:"img/twitter-logo.svg",children:"Follow our Twitter to stay up to date with the latest happenings in Stylable"}),(0,g.jsx)(a.X,{className:d,link:"https://discord.gg/C5ZhENSbV7",title:"Discord",image:"img/discord-Logo-color.svg",children:"Join our Discord community, where you can chat with us, ask questions, and showcase your work"})]})})})]})})}},3013:(e,t,i)=>{function s(e,t,i){if(!1===i||null==i||i!=i)return"";if(!0===i)return e+"--"+t;var s=i.toString();return e+"---"+t+"-"+s.length+"-"+s.replace(/\s/gm,"_")}function r(e){for(var t=[],i=1;i<arguments.length;i++){var r=arguments[i];if(r)if("string"==typeof r)t[t.length]=r;else if(2===i)for(var a in r){var n=s(e,a,r[a]);n&&(t[t.length]=n)}}return t.join(" ")}i.d(t,{rx:()=>r})}}]); \ No newline at end of file diff --git a/assets/js/587a03c1.4ced226b.js b/assets/js/587a03c1.ef46d825.js similarity index 99% rename from assets/js/587a03c1.4ced226b.js rename to assets/js/587a03c1.ef46d825.js index b40143d3..a1304074 100644 --- a/assets/js/587a03c1.4ced226b.js +++ b/assets/js/587a03c1.ef46d825.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[7395],{2176:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>d,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"guides/handbook/runtime","title":"Runtime","description":"In the previous chapter, we saw brief examples of mapping our classes local names to their global namespaced names at runtime, as well as the cssStates utility function to activate their states.","source":"@site/docs/guides/handbook/runtime.md","sourceDirName":"guides/handbook","slug":"/guides/handbook/runtime","permalink":"/docs/guides/handbook/runtime","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/handbook/runtime.md","tags":[],"version":"current","frontMatter":{"id":"runtime","title":"Runtime"},"sidebar":"Guides","previous":{"title":"Custom State","permalink":"/docs/guides/handbook/custom-state"},"next":{"title":"Import Class","permalink":"/docs/guides/handbook/import-class"}}');var a=n(4848),r=n(8453);const i={id:"runtime",title:"Runtime"},l=void 0,d={},c=[{value:"Mapped symbols",id:"mapped-symbols",level:2},{value:"Import example",id:"import-example",level:3},{value:"Runtime namespaced names",id:"runtime-namespaced-names",level:3},{value:"Apply class and state",id:"apply-class-and-state",level:2},{value:"<code>st()</code> function",id:"st-function",level:3},{value:"Stylable build variables",id:"stylable-build-variables",level:2}];function o(e){const s={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,r.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(s.p,{children:["In the ",(0,a.jsx)(s.a,{href:"/docs/guides/handbook/custom-state",children:"previous chapter"}),", we saw brief examples of mapping our ",(0,a.jsx)(s.code,{children:"classes"})," local names to their global namespaced names at runtime, as well as the ",(0,a.jsx)(s.code,{children:"cssStates"})," utility function to activate their states."]}),"\n",(0,a.jsx)(s.p,{children:"In this chapter, we'll explore the runtime features of Stylable and their usage."}),"\n",(0,a.jsx)(s.p,{children:"One of the core ideas behind Stylable is to try and shift as much of the work as possible from runtime to build time to increase performance and end-user experience. However, in some instances, we need to do additional work in JavaScript."}),"\n",(0,a.jsx)(s.p,{children:"For example, we need to:"}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsx)(s.li,{children:"Bind classes to views"}),"\n",(0,a.jsx)(s.li,{children:"Activate states"}),"\n",(0,a.jsx)(s.li,{children:"Set custom property values"}),"\n",(0,a.jsx)(s.li,{children:"Dynamically generate CSS"}),"\n"]}),"\n",(0,a.jsx)(s.h2,{id:"mapped-symbols",children:"Mapped symbols"}),"\n",(0,a.jsxs)(s.p,{children:["The namespacing chapter covered the basics of namespacing in Stylable, and in it, we saw that in Stylable, ",(0,a.jsx)(s.strong,{children:"classes, custom-properties, keyframes, layers, and containers"})," all receive namespacing to avoid conflicts."]}),"\n",(0,a.jsx)(s.h3,{id:"import-example",children:"Import example"}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:'import {\n classes, // class mapping\n vars, // custom properties mapping\n keyframes, // keyframes mapping\n layers, // layer mapping\n containers, // container mapping\n} from "./game.st.css";\n\n'})}),"\n",(0,a.jsx)(s.h3,{id:"runtime-namespaced-names",children:"Runtime namespaced names"}),"\n",(0,a.jsxs)(s.table,{children:[(0,a.jsx)(s.thead,{children:(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.th,{children:"Import"}),(0,a.jsx)(s.th,{children:"Type"}),(0,a.jsx)(s.th,{children:"Source"}),(0,a.jsx)(s.th,{children:"Target"})]})}),(0,a.jsxs)(s.tbody,{children:[(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"classes"})}),(0,a.jsx)(s.td,{children:"Class"}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:".player"})}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:".NS__player"})})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"vars"})}),(0,a.jsx)(s.td,{children:"Custom property"}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"--player1Color"})}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"--NS-player1Color"})})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"keyframes"})}),(0,a.jsx)(s.td,{children:"Keyframes"}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"@keyframes slide"})}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"@keyframes NS__slide"})})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"layers"})}),(0,a.jsx)(s.td,{children:"Layer"}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"@layer theme"})}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"@layer NS__theme"})})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"containers"})}),(0,a.jsx)(s.td,{children:"Container"}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"container: panel"})}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"container: NS__panel"})})]})]})]}),"\n",(0,a.jsx)(s.h2,{id:"apply-class-and-state",children:"Apply class and state"}),"\n",(0,a.jsx)(s.p,{children:"Up to this point, all use cases we saw for wiring elements were simplified or overly verbose."}),"\n",(0,a.jsxs)(s.p,{children:["In the following example we can see that we are binding the ",(0,a.jsx)(s.code,{children:"player"})," class to the ",(0,a.jsx)(s.code,{children:"player"})," view, as well as activating the ",(0,a.jsx)(s.code,{children:"registered"})," state."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-jsx",children:"import { classes, stStates } from \"./game.st.css\";\n\n<div> \n className={classes.player + ' ' + stStates({registered: true})}\n</div>\n"})}),"\n",(0,a.jsxs)(s.h3,{id:"st-function",children:[(0,a.jsx)(s.code,{children:"st()"})," function"]}),"\n",(0,a.jsxs)(s.p,{children:["We can use the ",(0,a.jsx)(s.code,{children:"st()"})," function to simplify this process, by passing it the class name as its ",(0,a.jsx)(s.strong,{children:"first argument"}),", and the activated states as its ",(0,a.jsx)(s.strong,{children:"second argument"}),"."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-jsx",children:"import { st, classes } from './game.st.css';\n\n<div className={st(classes.player, { registered: true })}></div>;\n"})}),"\n",(0,a.jsx)(s.p,{children:"There are cases in which we would like to add additional classes to an element. For example, a component might want to accept an external class name to allow for custom styling."}),"\n",(0,a.jsxs)(s.p,{children:["Below, we can see such a case, where we bind a class (",(0,a.jsx)(s.code,{children:"player"}),"), activate a state (",(0,a.jsx)(s.code,{children:"registered"}),"), and add an external class from props for customization purposes."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-jsx",metastring:'title="game.jsx"',children:"import { st, classes } from './game.st.css';\nconst Game = ({ className }) => {\n return (\n <div className={st(classes.player, { registered: true }, className)}>\n </div>\n );\n}\n"})}),"\n",(0,a.jsxs)(s.p,{children:["For further details on the runtime API, ",(0,a.jsx)(s.a,{href:"/docs/references/runtime",children:"see the runtime reference"}),"."]}),"\n",(0,a.jsx)(s.h2,{id:"stylable-build-variables",children:"Stylable build variables"}),"\n",(0,a.jsx)(s.p,{children:"We have yet to cover Stylable build variables, but seeing as they expose their value in runtime, we'll cover them here briefly."}),"\n",(0,a.jsx)(s.p,{children:"As opposed to the native runtime symbols we saw namespaced above, Stylable build variables do not require namespacing, as they are transpiled away at build time. In this case, the runtime export maps variables to their defined values."}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:'import {\n stVars // Stylable build variables\n} from "./game.st.css";\n\n// runtime namespaced names\nstVars.boardBackgroundColor; // "green"\n'})})]})}function h(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(o,{...e})}):o(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>i,x:()=>l});var t=n(6540);const a={},r=t.createContext(a);function i(e){const s=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),t.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[7395],{7813:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>d,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"guides/handbook/runtime","title":"Runtime","description":"In the previous chapter, we saw brief examples of mapping our classes local names to their global namespaced names at runtime, as well as the cssStates utility function to activate their states.","source":"@site/docs/guides/handbook/runtime.md","sourceDirName":"guides/handbook","slug":"/guides/handbook/runtime","permalink":"/docs/guides/handbook/runtime","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/handbook/runtime.md","tags":[],"version":"current","frontMatter":{"id":"runtime","title":"Runtime"},"sidebar":"Guides","previous":{"title":"Custom State","permalink":"/docs/guides/handbook/custom-state"},"next":{"title":"Import Class","permalink":"/docs/guides/handbook/import-class"}}');var a=n(4848),r=n(8453);const i={id:"runtime",title:"Runtime"},l=void 0,d={},c=[{value:"Mapped symbols",id:"mapped-symbols",level:2},{value:"Import example",id:"import-example",level:3},{value:"Runtime namespaced names",id:"runtime-namespaced-names",level:3},{value:"Apply class and state",id:"apply-class-and-state",level:2},{value:"<code>st()</code> function",id:"st-function",level:3},{value:"Stylable build variables",id:"stylable-build-variables",level:2}];function o(e){const s={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,r.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(s.p,{children:["In the ",(0,a.jsx)(s.a,{href:"/docs/guides/handbook/custom-state",children:"previous chapter"}),", we saw brief examples of mapping our ",(0,a.jsx)(s.code,{children:"classes"})," local names to their global namespaced names at runtime, as well as the ",(0,a.jsx)(s.code,{children:"cssStates"})," utility function to activate their states."]}),"\n",(0,a.jsx)(s.p,{children:"In this chapter, we'll explore the runtime features of Stylable and their usage."}),"\n",(0,a.jsx)(s.p,{children:"One of the core ideas behind Stylable is to try and shift as much of the work as possible from runtime to build time to increase performance and end-user experience. However, in some instances, we need to do additional work in JavaScript."}),"\n",(0,a.jsx)(s.p,{children:"For example, we need to:"}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsx)(s.li,{children:"Bind classes to views"}),"\n",(0,a.jsx)(s.li,{children:"Activate states"}),"\n",(0,a.jsx)(s.li,{children:"Set custom property values"}),"\n",(0,a.jsx)(s.li,{children:"Dynamically generate CSS"}),"\n"]}),"\n",(0,a.jsx)(s.h2,{id:"mapped-symbols",children:"Mapped symbols"}),"\n",(0,a.jsxs)(s.p,{children:["The namespacing chapter covered the basics of namespacing in Stylable, and in it, we saw that in Stylable, ",(0,a.jsx)(s.strong,{children:"classes, custom-properties, keyframes, layers, and containers"})," all receive namespacing to avoid conflicts."]}),"\n",(0,a.jsx)(s.h3,{id:"import-example",children:"Import example"}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:'import {\n classes, // class mapping\n vars, // custom properties mapping\n keyframes, // keyframes mapping\n layers, // layer mapping\n containers, // container mapping\n} from "./game.st.css";\n\n'})}),"\n",(0,a.jsx)(s.h3,{id:"runtime-namespaced-names",children:"Runtime namespaced names"}),"\n",(0,a.jsxs)(s.table,{children:[(0,a.jsx)(s.thead,{children:(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.th,{children:"Import"}),(0,a.jsx)(s.th,{children:"Type"}),(0,a.jsx)(s.th,{children:"Source"}),(0,a.jsx)(s.th,{children:"Target"})]})}),(0,a.jsxs)(s.tbody,{children:[(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"classes"})}),(0,a.jsx)(s.td,{children:"Class"}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:".player"})}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:".NS__player"})})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"vars"})}),(0,a.jsx)(s.td,{children:"Custom property"}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"--player1Color"})}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"--NS-player1Color"})})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"keyframes"})}),(0,a.jsx)(s.td,{children:"Keyframes"}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"@keyframes slide"})}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"@keyframes NS__slide"})})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"layers"})}),(0,a.jsx)(s.td,{children:"Layer"}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"@layer theme"})}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"@layer NS__theme"})})]}),(0,a.jsxs)(s.tr,{children:[(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"containers"})}),(0,a.jsx)(s.td,{children:"Container"}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"container: panel"})}),(0,a.jsx)(s.td,{children:(0,a.jsx)(s.code,{children:"container: NS__panel"})})]})]})]}),"\n",(0,a.jsx)(s.h2,{id:"apply-class-and-state",children:"Apply class and state"}),"\n",(0,a.jsx)(s.p,{children:"Up to this point, all use cases we saw for wiring elements were simplified or overly verbose."}),"\n",(0,a.jsxs)(s.p,{children:["In the following example we can see that we are binding the ",(0,a.jsx)(s.code,{children:"player"})," class to the ",(0,a.jsx)(s.code,{children:"player"})," view, as well as activating the ",(0,a.jsx)(s.code,{children:"registered"})," state."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-jsx",children:"import { classes, stStates } from \"./game.st.css\";\n\n<div> \n className={classes.player + ' ' + stStates({registered: true})}\n</div>\n"})}),"\n",(0,a.jsxs)(s.h3,{id:"st-function",children:[(0,a.jsx)(s.code,{children:"st()"})," function"]}),"\n",(0,a.jsxs)(s.p,{children:["We can use the ",(0,a.jsx)(s.code,{children:"st()"})," function to simplify this process, by passing it the class name as its ",(0,a.jsx)(s.strong,{children:"first argument"}),", and the activated states as its ",(0,a.jsx)(s.strong,{children:"second argument"}),"."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-jsx",children:"import { st, classes } from './game.st.css';\n\n<div className={st(classes.player, { registered: true })}></div>;\n"})}),"\n",(0,a.jsx)(s.p,{children:"There are cases in which we would like to add additional classes to an element. For example, a component might want to accept an external class name to allow for custom styling."}),"\n",(0,a.jsxs)(s.p,{children:["Below, we can see such a case, where we bind a class (",(0,a.jsx)(s.code,{children:"player"}),"), activate a state (",(0,a.jsx)(s.code,{children:"registered"}),"), and add an external class from props for customization purposes."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-jsx",metastring:'title="game.jsx"',children:"import { st, classes } from './game.st.css';\nconst Game = ({ className }) => {\n return (\n <div className={st(classes.player, { registered: true }, className)}>\n </div>\n );\n}\n"})}),"\n",(0,a.jsxs)(s.p,{children:["For further details on the runtime API, ",(0,a.jsx)(s.a,{href:"/docs/references/runtime",children:"see the runtime reference"}),"."]}),"\n",(0,a.jsx)(s.h2,{id:"stylable-build-variables",children:"Stylable build variables"}),"\n",(0,a.jsx)(s.p,{children:"We have yet to cover Stylable build variables, but seeing as they expose their value in runtime, we'll cover them here briefly."}),"\n",(0,a.jsx)(s.p,{children:"As opposed to the native runtime symbols we saw namespaced above, Stylable build variables do not require namespacing, as they are transpiled away at build time. In this case, the runtime export maps variables to their defined values."}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:'import {\n stVars // Stylable build variables\n} from "./game.st.css";\n\n// runtime namespaced names\nstVars.boardBackgroundColor; // "green"\n'})})]})}function h(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(o,{...e})}):o(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>i,x:()=>l});var t=n(6540);const a={},r=t.createContext(a);function i(e){const s=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),t.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5e66eab8.938138e1.js b/assets/js/5e66eab8.1b5146ce.js similarity index 99% rename from assets/js/5e66eab8.938138e1.js rename to assets/js/5e66eab8.1b5146ce.js index ba77ddcc..b3e01122 100644 --- a/assets/js/5e66eab8.938138e1.js +++ b/assets/js/5e66eab8.1b5146ce.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[4293],{3587:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>r,metadata:()=>n,toc:()=>o});const n=JSON.parse('{"id":"references/extend-stylesheet","title":"Extend","description":"The Stylable -st-extends declaration is used to indicate that a CSS class inherits from a stylesheet or another class.","source":"@site/docs/references/extend-stylesheet.md","sourceDirName":"references","slug":"/references/extend-stylesheet","permalink":"/docs/references/extend-stylesheet","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/extend-stylesheet.md","tags":[],"version":"current","frontMatter":{"id":"extend-stylesheet","title":"Extend"},"sidebar":"Specification Reference","previous":{"title":"Custom Selector","permalink":"/docs/references/custom-selectors"},"next":{"title":"Global Selector","permalink":"/docs/references/global-selectors"}}');var a=t(4848),l=t(8453);const r={id:"extend-stylesheet",title:"Extend"},i=void 0,c={},o=[{value:"Syntax",id:"syntax",level:2},{value:"Example",id:"example",level:2},{value:"Runtime - root vs class",id:"runtime---root-vs-class",level:2},{value:"Namespace",id:"namespace",level:2}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,l.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(s.p,{children:["The Stylable ",(0,a.jsx)(s.code,{children:"-st-extends"})," declaration is used to indicate that a ",(0,a.jsx)(s.a,{href:"/docs/references/class-selectors",children:"CSS class"})," inherits from a stylesheet or another class."]}),"\n",(0,a.jsx)(s.p,{children:"It assumes both the class and the extended reference will share the same element in the DOM, and enables the targeting of inner parts and states as an API with validations and completions."}),"\n",(0,a.jsx)(s.h2,{id:"syntax",children:"Syntax"}),"\n",(0,a.jsxs)(s.p,{children:["Use ",(0,a.jsx)(s.code,{children:"-st-extends"})," with the value of a component ",(0,a.jsx)(s.a,{href:"/docs/references/root",children:"stylesheet root"})," to indicate that a class is used to customize the component, or with a value of another class to compose them (usually a utility class)."]}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"Extend a stylesheet root"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:"@st-import Comp from './comp.st.css';\n\n.x {\n -st-extends: Comp;\n}\n"})}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"Extend a class"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:"@st-import [class] from './comp.st.css';\n\n.x {\n -st-extends: class;\n}\n"})}),"\n",(0,a.jsx)(s.admonition,{title:"Local extends",type:"tip",children:(0,a.jsx)(s.p,{children:"Extend is not limited to imported definitions, a class can extend other local classes, as well as the local stylesheet root."})}),"\n",(0,a.jsx)(s.h2,{id:"example",children:"Example"}),"\n",(0,a.jsx)(s.p,{children:"The following example illustrates a page with a customized main gallery instance."}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="slider-gallery.st.css"',children:"/* gallery style API */\n.root {\n -st-states: pos(enum(start, middle, end));\n}\n.prevBtn {}\n.nextBtn {}\n"})}),"\n",(0,a.jsxs)(s.p,{children:["Customizes the main gallery by importing the gallery component stylesheet into the page stylesheet, create a ",(0,a.jsx)(s.code,{children:"mainGallery"})," class, extend it with the value of the gallery stylesheet, and then target it's inner ",(0,a.jsx)(s.a,{href:"/docs/references/pseudo-elements",children:"custom pseudo-elements"})," and ",(0,a.jsx)(s.a,{href:"/docs/references/pseudo-classes",children:"custom pseudo-states"}),"."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="page.st.css"',children:"@st-import SliderGallery from './slider-gallery.st.css';\n\n.mainGallery {\n -st-extends: mainGallery; /* mainGallery is a SliderGallery */\n}\n.mainGallery::nextbtn {\n /* customize mainGallery inner nextBtn part */\n}\n.mainGallery:pos(end)::nextbtn {\n /* customize mainGallery in end position inner nextBtn part */\n}\n"})}),"\n",(0,a.jsxs)(s.p,{children:["In the view, set the ",(0,a.jsx)(s.code,{children:"mainGallery"})," class on the gallery instance."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-jsx",metastring:'title="page.jsx"',children:"import SliderGallery from './slider-gallery';\nimport { classes } from './page.st.css';\n\nconst Page = () => {\n <div>\n /* customize SliderGallery as mainGallery */\n <SliderGallery className={classes.mainGallery} />\n </div>;\n};\n"})}),"\n",(0,a.jsx)(s.h2,{id:"runtime---root-vs-class",children:"Runtime - root vs class"}),"\n",(0,a.jsx)(s.p,{children:"There is a slight difference between the runtime output when extending a stylesheet root and extending a normal CSS class."}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"A CSS class is composed to the runtime class name while a stylesheet root is not."})}),"\n",(0,a.jsx)(s.p,{children:"This is because Stylable assumes that a stylesheet root will be set within the component that is being extended and composing it from the outside is redundant."}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="page.st.css"',children:"@st-import Gallery from './gallery.st.css';\n@st-import [center] from './utils.st.css';\n\n.variant {\n -st-extends: Gallery;\n}\n.title {\n -st-extends: center;\n}\n"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",metastring:'title="page.jsx"',children:'import { classes } from \'./page.st.css\';\n\nclasses.variant // "page__variant"\nclasses.title // "page__title utils__center"\n'})}),"\n",(0,a.jsx)(s.admonition,{title:"unsupported multiple extends",type:"info",children:(0,a.jsx)(s.p,{children:"Stylable currently does not support extending multiple classes. We hope to introduce this capability in the future."})}),"\n",(0,a.jsx)(s.h2,{id:"namespace",children:"Namespace"}),"\n",(0,a.jsxs)(s.p,{children:[(0,a.jsx)(s.code,{children:"-st-extends"})," provides access to inner parts and states, but does not modify the namespace of the extending class."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="page.st.css"',children:"@st-import Gallery from './gallery.st.css';\n.variant {\n -st-extends: Gallery;\n}\n.variant {}\n.variant::navBtn {}\n.variant:loading {}\n\n/* OUTPUT */\n.page__variant {}\n.page__variant .gallery__navBtn {}\n.page__variant.gallery--loading {}\n"})})]})}function h(e={}){const{wrapper:s}={...(0,l.R)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>r,x:()=>i});var n=t(6540);const a={},l=n.createContext(a);function r(e){const s=n.useContext(l);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function i(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:r(e.components),n.createElement(l.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[4293],{8343:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>r,metadata:()=>n,toc:()=>o});const n=JSON.parse('{"id":"references/extend-stylesheet","title":"Extend","description":"The Stylable -st-extends declaration is used to indicate that a CSS class inherits from a stylesheet or another class.","source":"@site/docs/references/extend-stylesheet.md","sourceDirName":"references","slug":"/references/extend-stylesheet","permalink":"/docs/references/extend-stylesheet","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/extend-stylesheet.md","tags":[],"version":"current","frontMatter":{"id":"extend-stylesheet","title":"Extend"},"sidebar":"Specification Reference","previous":{"title":"Custom Selector","permalink":"/docs/references/custom-selectors"},"next":{"title":"Global Selector","permalink":"/docs/references/global-selectors"}}');var a=t(4848),l=t(8453);const r={id:"extend-stylesheet",title:"Extend"},i=void 0,c={},o=[{value:"Syntax",id:"syntax",level:2},{value:"Example",id:"example",level:2},{value:"Runtime - root vs class",id:"runtime---root-vs-class",level:2},{value:"Namespace",id:"namespace",level:2}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,l.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(s.p,{children:["The Stylable ",(0,a.jsx)(s.code,{children:"-st-extends"})," declaration is used to indicate that a ",(0,a.jsx)(s.a,{href:"/docs/references/class-selectors",children:"CSS class"})," inherits from a stylesheet or another class."]}),"\n",(0,a.jsx)(s.p,{children:"It assumes both the class and the extended reference will share the same element in the DOM, and enables the targeting of inner parts and states as an API with validations and completions."}),"\n",(0,a.jsx)(s.h2,{id:"syntax",children:"Syntax"}),"\n",(0,a.jsxs)(s.p,{children:["Use ",(0,a.jsx)(s.code,{children:"-st-extends"})," with the value of a component ",(0,a.jsx)(s.a,{href:"/docs/references/root",children:"stylesheet root"})," to indicate that a class is used to customize the component, or with a value of another class to compose them (usually a utility class)."]}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"Extend a stylesheet root"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:"@st-import Comp from './comp.st.css';\n\n.x {\n -st-extends: Comp;\n}\n"})}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"Extend a class"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:"@st-import [class] from './comp.st.css';\n\n.x {\n -st-extends: class;\n}\n"})}),"\n",(0,a.jsx)(s.admonition,{title:"Local extends",type:"tip",children:(0,a.jsx)(s.p,{children:"Extend is not limited to imported definitions, a class can extend other local classes, as well as the local stylesheet root."})}),"\n",(0,a.jsx)(s.h2,{id:"example",children:"Example"}),"\n",(0,a.jsx)(s.p,{children:"The following example illustrates a page with a customized main gallery instance."}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="slider-gallery.st.css"',children:"/* gallery style API */\n.root {\n -st-states: pos(enum(start, middle, end));\n}\n.prevBtn {}\n.nextBtn {}\n"})}),"\n",(0,a.jsxs)(s.p,{children:["Customizes the main gallery by importing the gallery component stylesheet into the page stylesheet, create a ",(0,a.jsx)(s.code,{children:"mainGallery"})," class, extend it with the value of the gallery stylesheet, and then target it's inner ",(0,a.jsx)(s.a,{href:"/docs/references/pseudo-elements",children:"custom pseudo-elements"})," and ",(0,a.jsx)(s.a,{href:"/docs/references/pseudo-classes",children:"custom pseudo-states"}),"."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="page.st.css"',children:"@st-import SliderGallery from './slider-gallery.st.css';\n\n.mainGallery {\n -st-extends: mainGallery; /* mainGallery is a SliderGallery */\n}\n.mainGallery::nextbtn {\n /* customize mainGallery inner nextBtn part */\n}\n.mainGallery:pos(end)::nextbtn {\n /* customize mainGallery in end position inner nextBtn part */\n}\n"})}),"\n",(0,a.jsxs)(s.p,{children:["In the view, set the ",(0,a.jsx)(s.code,{children:"mainGallery"})," class on the gallery instance."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-jsx",metastring:'title="page.jsx"',children:"import SliderGallery from './slider-gallery';\nimport { classes } from './page.st.css';\n\nconst Page = () => {\n <div>\n /* customize SliderGallery as mainGallery */\n <SliderGallery className={classes.mainGallery} />\n </div>;\n};\n"})}),"\n",(0,a.jsx)(s.h2,{id:"runtime---root-vs-class",children:"Runtime - root vs class"}),"\n",(0,a.jsx)(s.p,{children:"There is a slight difference between the runtime output when extending a stylesheet root and extending a normal CSS class."}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"A CSS class is composed to the runtime class name while a stylesheet root is not."})}),"\n",(0,a.jsx)(s.p,{children:"This is because Stylable assumes that a stylesheet root will be set within the component that is being extended and composing it from the outside is redundant."}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="page.st.css"',children:"@st-import Gallery from './gallery.st.css';\n@st-import [center] from './utils.st.css';\n\n.variant {\n -st-extends: Gallery;\n}\n.title {\n -st-extends: center;\n}\n"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",metastring:'title="page.jsx"',children:'import { classes } from \'./page.st.css\';\n\nclasses.variant // "page__variant"\nclasses.title // "page__title utils__center"\n'})}),"\n",(0,a.jsx)(s.admonition,{title:"unsupported multiple extends",type:"info",children:(0,a.jsx)(s.p,{children:"Stylable currently does not support extending multiple classes. We hope to introduce this capability in the future."})}),"\n",(0,a.jsx)(s.h2,{id:"namespace",children:"Namespace"}),"\n",(0,a.jsxs)(s.p,{children:[(0,a.jsx)(s.code,{children:"-st-extends"})," provides access to inner parts and states, but does not modify the namespace of the extending class."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="page.st.css"',children:"@st-import Gallery from './gallery.st.css';\n.variant {\n -st-extends: Gallery;\n}\n.variant {}\n.variant::navBtn {}\n.variant:loading {}\n\n/* OUTPUT */\n.page__variant {}\n.page__variant .gallery__navBtn {}\n.page__variant.gallery--loading {}\n"})})]})}function h(e={}){const{wrapper:s}={...(0,l.R)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>r,x:()=>i});var n=t(6540);const a={},l=n.createContext(a);function r(e){const s=n.useContext(l);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function i(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:r(e.components),n.createElement(l.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5e95c892.2cc33f12.js b/assets/js/5e95c892.2cc33f12.js new file mode 100644 index 00000000..03cbd1f3 --- /dev/null +++ b/assets/js/5e95c892.2cc33f12.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[9647],{7121:(e,s,r)=>{r.r(s),r.d(s,{default:()=>i});r(6540);var a=r(4164),l=r(1213),t=r(7559),u=r(2831),c=r(7823),n=r(4848);function i(e){return(0,n.jsx)(l.e3,{className:(0,a.A)(t.G.wrapper.docsPages),children:(0,n.jsx)(c.A,{children:(0,u.v)(e.route.routes)})})}}}]); \ No newline at end of file diff --git a/assets/js/5e95c892.4964a51d.js b/assets/js/5e95c892.4964a51d.js deleted file mode 100644 index 3eead17e..00000000 --- a/assets/js/5e95c892.4964a51d.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[9647],{3124:(e,s,r)=>{r.r(s),r.d(s,{default:()=>i});r(6540);var a=r(4164),l=r(6644),t=r(8630),u=r(2831),c=r(7635),n=r(4848);function i(e){return(0,n.jsx)(l.e3,{className:(0,a.A)(t.G.wrapper.docsPages),children:(0,n.jsx)(c.A,{children:(0,u.v)(e.route.routes)})})}}}]); \ No newline at end of file diff --git a/assets/js/5ec46957.9bace835.js b/assets/js/5ec46957.54ab8441.js similarity index 99% rename from assets/js/5ec46957.9bace835.js rename to assets/js/5ec46957.54ab8441.js index 44cccf78..67f92283 100644 --- a/assets/js/5ec46957.9bace835.js +++ b/assets/js/5ec46957.54ab8441.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[4947],{7577:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>o,default:()=>m,frontMatter:()=>i,metadata:()=>r,toc:()=>c});const r=JSON.parse('{"id":"references/imports","title":"Import","description":"The Stylable @st-import at-rule is used to reference definitions from other .st.css or .js modules in a similar way to JavaScript Imports.","source":"@site/docs/references/imports.md","sourceDirName":"references","slug":"/references/imports","permalink":"/docs/references/imports","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/imports.md","tags":[],"version":"current","frontMatter":{"id":"imports","title":"Import"},"sidebar":"Specification Reference","previous":{"title":"Global Selector","permalink":"/docs/references/global-selectors"},"next":{"title":"Namespace","permalink":"/docs/references/namespace"}}');var n=t(4848),a=t(8453);const i={id:"imports",title:"Import"},o=void 0,l={},c=[{value:"Syntax",id:"syntax",level:2},{value:"Default import",id:"default-import",level:3},{value:"Named import",id:"named-import",level:3},{value:"Local alias",id:"local-alias",level:4},{value:"Stylable stylesheet",id:"stylable-stylesheet",level:2},{value:"Named type assertion",id:"named-type-assertion",level:3},{value:"Javascript",id:"javascript",level:2},{value:"Legacy syntax",id:"legacy-syntax",level:2}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s.p,{children:["The Stylable ",(0,n.jsx)(s.code,{children:"@st-import"})," at-rule is used to reference definitions from other ",(0,n.jsx)(s.code,{children:".st.css"})," or ",(0,n.jsx)(s.code,{children:".js"})," modules in a similar way to ",(0,n.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import",children:"JavaScript Imports"}),"."]}),"\n",(0,n.jsx)(s.h2,{id:"syntax",children:"Syntax"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",children:"@st-import Default, [namedA, namedB as localB] from 'request';\n"})}),"\n",(0,n.jsx)(s.admonition,{title:"re-declare symbol",type:"info",children:(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsx)(s.li,{children:"import local names must be unique."}),"\n",(0,n.jsx)(s.li,{children:"Imports are hoisted above local definitions."}),"\n"]})}),"\n",(0,n.jsx)(s.h3,{id:"default-import",children:"Default import"}),"\n",(0,n.jsxs)(s.p,{children:["In order to reference the the default export of a module, provide a local name after the ",(0,n.jsx)(s.code,{children:"@st-import"}),"."]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",children:"@st-import DefaultLocalName from 'request';\n"})}),"\n",(0,n.jsx)(s.h3,{id:"named-import",children:"Named import"}),"\n",(0,n.jsx)(s.p,{children:"To reference named exports of a module, in square brackets (after the optional default import), provide a comma separated list of requested names."}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",children:"/* named imports */\n@st-import [partA, partB] from 'request';\n\n/* default + named imports */\n@st-import Default, [partA, partB] from 'request';\n"})}),"\n",(0,n.jsx)(s.h4,{id:"local-alias",children:"Local alias"}),"\n",(0,n.jsxs)(s.p,{children:["Use the ",(0,n.jsx)(s.code,{children:"as"})," keyword to map an export name to a local name."]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",children:"@st-import [part as localPartName] from 'request';\n"})}),"\n",(0,n.jsx)(s.h2,{id:"stylable-stylesheet",children:"Stylable stylesheet"}),"\n",(0,n.jsxs)(s.p,{children:["When importing from a stylesheet, the ",(0,n.jsx)(s.a,{href:"/docs/references/root#default-export",children:"root"})," class is mapped to the default export, and several named symbols can be referenced by name:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",metastring:'title="origin.st.css"',children:"/* define symbols */\n.part {\n --customProp: yellow;\n container-name: part;\n}\n@keyframes anim {}\n@layer comps, theme;\n:vars {\n stVar: green;\n}\n"})}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",metastring:'title="entry.st.css"',children:"@st-import OriginRoot, [\n part, /* part class name */\n --customProp, /* custom property */\n stVar /* build var */\n] from './origin.st.css';\n"})}),"\n",(0,n.jsx)(s.admonition,{title:"Stylesheet default capitalization",type:"caution",children:(0,n.jsxs)(s.p,{children:["When importing a ",(0,n.jsx)(s.strong,{children:"default"})," value from a stylable stylesheet, you should use a capital letter to signify that the value represents a component root."]})}),"\n",(0,n.jsx)(s.h3,{id:"named-type-assertion",children:"Named type assertion"}),"\n",(0,n.jsxs)(s.p,{children:["To import keyframes, layers or containers from another stylesheet, a special ",(0,n.jsx)(s.a,{href:"/docs/references/keyframes#import-and-export",children:"keyframes()"}),", ",(0,n.jsx)(s.a,{href:"./layer#import-and-export",children:"layer()"}),", or ",(0,n.jsx)(s.a,{href:"./contains#import-and-export",children:"container()"})," assertion is required."]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",metastring:'title="entry.st.css"',children:"/* import keyframe and layer */\n@st-import [\n keyframes(anim),\n layer(theme),\n container(panel)\n] from './origin.st.css';\n\n/* multiple */\n@st-import [\n keyframes(anim1, anim2), \n layer(comps, theme),\n container(panel, header)\n] from './origin.st.css';\n"})}),"\n",(0,n.jsx)(s.h2,{id:"javascript",children:"Javascript"}),"\n",(0,n.jsxs)(s.p,{children:["To import Javascript definitions for ",(0,n.jsx)(s.a,{href:"/docs/references/st-variables",children:"values"}),", ",(0,n.jsx)(s.a,{href:"/docs/references/mixins",children:"mixins"}),", and ",(0,n.jsx)(s.a,{href:"/docs/references/formatters",children:"formatters"}),", use the ",(0,n.jsx)(s.code,{children:"@st-import"})," statement in the same way as you would for a stylesheet."]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",children:"@st-import DefaultExport, [namedA, namedB as localB] from './code.js';\n"})}),"\n",(0,n.jsx)(s.h2,{id:"legacy-syntax",children:"Legacy syntax"}),"\n",(0,n.jsxs)(s.p,{children:["An older variation for ",(0,n.jsx)(s.code,{children:"@st-import"})," is the ",(0,n.jsx)(s.code,{children:":import"})," (pseudo-import). While it still works, it is ",(0,n.jsx)(s.strong,{children:"highly discouraged"})," for usage, verbose and will be deprecated in the future."]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",children:":import {\n -st-from: 'request';\n -st-default: DefaultLocalName;\n -st-named: namedA, namedB as localB;\n}\n"})}),"\n",(0,n.jsxs)(s.p,{children:["A code-mod to migrate to the new syntax is available (",(0,n.jsx)(s.a,{href:"https://github.com/wix/stylable/tree/master/packages/cli#builtin-codemods",children:"see doc"}),")"]})]})}function m(e={}){const{wrapper:s}={...(0,a.R)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>i,x:()=>o});var r=t(6540);const n={},a=r.createContext(n);function i(e){const s=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function o(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),r.createElement(a.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[4947],{6051:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>o,default:()=>m,frontMatter:()=>i,metadata:()=>r,toc:()=>c});const r=JSON.parse('{"id":"references/imports","title":"Import","description":"The Stylable @st-import at-rule is used to reference definitions from other .st.css or .js modules in a similar way to JavaScript Imports.","source":"@site/docs/references/imports.md","sourceDirName":"references","slug":"/references/imports","permalink":"/docs/references/imports","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/imports.md","tags":[],"version":"current","frontMatter":{"id":"imports","title":"Import"},"sidebar":"Specification Reference","previous":{"title":"Global Selector","permalink":"/docs/references/global-selectors"},"next":{"title":"Namespace","permalink":"/docs/references/namespace"}}');var n=t(4848),a=t(8453);const i={id:"imports",title:"Import"},o=void 0,l={},c=[{value:"Syntax",id:"syntax",level:2},{value:"Default import",id:"default-import",level:3},{value:"Named import",id:"named-import",level:3},{value:"Local alias",id:"local-alias",level:4},{value:"Stylable stylesheet",id:"stylable-stylesheet",level:2},{value:"Named type assertion",id:"named-type-assertion",level:3},{value:"Javascript",id:"javascript",level:2},{value:"Legacy syntax",id:"legacy-syntax",level:2}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s.p,{children:["The Stylable ",(0,n.jsx)(s.code,{children:"@st-import"})," at-rule is used to reference definitions from other ",(0,n.jsx)(s.code,{children:".st.css"})," or ",(0,n.jsx)(s.code,{children:".js"})," modules in a similar way to ",(0,n.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import",children:"JavaScript Imports"}),"."]}),"\n",(0,n.jsx)(s.h2,{id:"syntax",children:"Syntax"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",children:"@st-import Default, [namedA, namedB as localB] from 'request';\n"})}),"\n",(0,n.jsx)(s.admonition,{title:"re-declare symbol",type:"info",children:(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsx)(s.li,{children:"import local names must be unique."}),"\n",(0,n.jsx)(s.li,{children:"Imports are hoisted above local definitions."}),"\n"]})}),"\n",(0,n.jsx)(s.h3,{id:"default-import",children:"Default import"}),"\n",(0,n.jsxs)(s.p,{children:["In order to reference the the default export of a module, provide a local name after the ",(0,n.jsx)(s.code,{children:"@st-import"}),"."]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",children:"@st-import DefaultLocalName from 'request';\n"})}),"\n",(0,n.jsx)(s.h3,{id:"named-import",children:"Named import"}),"\n",(0,n.jsx)(s.p,{children:"To reference named exports of a module, in square brackets (after the optional default import), provide a comma separated list of requested names."}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",children:"/* named imports */\n@st-import [partA, partB] from 'request';\n\n/* default + named imports */\n@st-import Default, [partA, partB] from 'request';\n"})}),"\n",(0,n.jsx)(s.h4,{id:"local-alias",children:"Local alias"}),"\n",(0,n.jsxs)(s.p,{children:["Use the ",(0,n.jsx)(s.code,{children:"as"})," keyword to map an export name to a local name."]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",children:"@st-import [part as localPartName] from 'request';\n"})}),"\n",(0,n.jsx)(s.h2,{id:"stylable-stylesheet",children:"Stylable stylesheet"}),"\n",(0,n.jsxs)(s.p,{children:["When importing from a stylesheet, the ",(0,n.jsx)(s.a,{href:"/docs/references/root#default-export",children:"root"})," class is mapped to the default export, and several named symbols can be referenced by name:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",metastring:'title="origin.st.css"',children:"/* define symbols */\n.part {\n --customProp: yellow;\n container-name: part;\n}\n@keyframes anim {}\n@layer comps, theme;\n:vars {\n stVar: green;\n}\n"})}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",metastring:'title="entry.st.css"',children:"@st-import OriginRoot, [\n part, /* part class name */\n --customProp, /* custom property */\n stVar /* build var */\n] from './origin.st.css';\n"})}),"\n",(0,n.jsx)(s.admonition,{title:"Stylesheet default capitalization",type:"caution",children:(0,n.jsxs)(s.p,{children:["When importing a ",(0,n.jsx)(s.strong,{children:"default"})," value from a stylable stylesheet, you should use a capital letter to signify that the value represents a component root."]})}),"\n",(0,n.jsx)(s.h3,{id:"named-type-assertion",children:"Named type assertion"}),"\n",(0,n.jsxs)(s.p,{children:["To import keyframes, layers or containers from another stylesheet, a special ",(0,n.jsx)(s.a,{href:"/docs/references/keyframes#import-and-export",children:"keyframes()"}),", ",(0,n.jsx)(s.a,{href:"./layer#import-and-export",children:"layer()"}),", or ",(0,n.jsx)(s.a,{href:"./contains#import-and-export",children:"container()"})," assertion is required."]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",metastring:'title="entry.st.css"',children:"/* import keyframe and layer */\n@st-import [\n keyframes(anim),\n layer(theme),\n container(panel)\n] from './origin.st.css';\n\n/* multiple */\n@st-import [\n keyframes(anim1, anim2), \n layer(comps, theme),\n container(panel, header)\n] from './origin.st.css';\n"})}),"\n",(0,n.jsx)(s.h2,{id:"javascript",children:"Javascript"}),"\n",(0,n.jsxs)(s.p,{children:["To import Javascript definitions for ",(0,n.jsx)(s.a,{href:"/docs/references/st-variables",children:"values"}),", ",(0,n.jsx)(s.a,{href:"/docs/references/mixins",children:"mixins"}),", and ",(0,n.jsx)(s.a,{href:"/docs/references/formatters",children:"formatters"}),", use the ",(0,n.jsx)(s.code,{children:"@st-import"})," statement in the same way as you would for a stylesheet."]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",children:"@st-import DefaultExport, [namedA, namedB as localB] from './code.js';\n"})}),"\n",(0,n.jsx)(s.h2,{id:"legacy-syntax",children:"Legacy syntax"}),"\n",(0,n.jsxs)(s.p,{children:["An older variation for ",(0,n.jsx)(s.code,{children:"@st-import"})," is the ",(0,n.jsx)(s.code,{children:":import"})," (pseudo-import). While it still works, it is ",(0,n.jsx)(s.strong,{children:"highly discouraged"})," for usage, verbose and will be deprecated in the future."]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",children:":import {\n -st-from: 'request';\n -st-default: DefaultLocalName;\n -st-named: namedA, namedB as localB;\n}\n"})}),"\n",(0,n.jsxs)(s.p,{children:["A code-mod to migrate to the new syntax is available (",(0,n.jsx)(s.a,{href:"https://github.com/wix/stylable/tree/master/packages/cli#builtin-codemods",children:"see doc"}),")"]})]})}function m(e={}){const{wrapper:s}={...(0,a.R)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>i,x:()=>o});var r=t(6540);const n={},a=r.createContext(n);function i(e){const s=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function o(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),r.createElement(a.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/6321.989cbb43.js b/assets/js/6321.989cbb43.js new file mode 100644 index 00000000..f261b4ac --- /dev/null +++ b/assets/js/6321.989cbb43.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[6321],{4096:(e,t,s)=>{s.d(t,{in:()=>c,OU:()=>k,Ki:()=>M,kJ:()=>f,x:()=>i,e7:()=>m,J_:()=>p,Gx:()=>C});var a=s(6540),n=s(9532),l=s(6803),r=s(4848);function i(){const e=(0,l.A)(),t=e?.data?.blogMetadata;if(!t)throw new Error("useBlogMetadata() can't be called on the current route because the blog metadata could not be found in route context");return t}const o=a.createContext(null);function c(e){let{children:t,content:s,isBlogPostPage:n=!1}=e;const l=function(e){let{content:t,isBlogPostPage:s}=e;return(0,a.useMemo)((()=>({metadata:t.metadata,frontMatter:t.frontMatter,assets:t.assets,toc:t.toc,isBlogPostPage:s})),[t,s])}({content:s,isBlogPostPage:n});return(0,r.jsx)(o.Provider,{value:l,children:t})}function m(){const e=(0,a.useContext)(o);if(null===e)throw new n.dV("BlogPostProvider");return e}var h=s(6025),d=s(4586);const u=e=>new Date(e).toISOString();function g(e){const t=e.map(v);return{author:1===t.length?t[0]:t}}function x(e,t,s){return e?{image:j({imageUrl:t(e,{absolute:!0}),caption:`title image for the blog post: ${s}`})}:{}}function f(e){const{siteConfig:t}=(0,d.A)(),{withBaseUrl:s}=(0,h.hH)(),{metadata:{blogDescription:a,blogTitle:n,permalink:l}}=e,r=`${t.url}${l}`;return{"@context":"https://schema.org","@type":"Blog","@id":r,mainEntityOfPage:r,headline:n,description:a,blogPost:e.items.map((e=>function(e,t,s){const{assets:a,frontMatter:n,metadata:l}=e,{date:r,title:i,description:o,lastUpdatedAt:c}=l,m=a.image??n.image,h=n.keywords??[],d=`${t.url}${l.permalink}`,f=c?u(c):void 0;return{"@type":"BlogPosting","@id":d,mainEntityOfPage:d,url:d,headline:i,name:i,description:o,datePublished:r,...f?{dateModified:f}:{},...g(l.authors),...x(m,s,i),...h?{keywords:h}:{}}}(e.content,t,s)))}}function p(){const e=i(),{assets:t,metadata:s}=m(),{siteConfig:a}=(0,d.A)(),{withBaseUrl:n}=(0,h.hH)(),{date:l,title:r,description:o,frontMatter:c,lastUpdatedAt:f}=s,p=t.image??c.image,v=c.keywords??[],j=f?u(f):void 0,w=`${a.url}${s.permalink}`;return{"@context":"https://schema.org","@type":"BlogPosting","@id":w,mainEntityOfPage:w,url:w,headline:r,name:r,description:o,datePublished:l,...j?{dateModified:j}:{},...g(s.authors),...x(p,n,r),...v?{keywords:v}:{},isPartOf:{"@type":"Blog","@id":`${a.url}${e.blogBasePath}`,name:e.blogTitle}}}function v(e){return{"@type":"Person",...e.name?{name:e.name}:{},...e.title?{description:e.title}:{},...e.url?{url:e.url}:{},...e.email?{email:e.email}:{},...e.imageURL?{image:e.imageURL}:{}}}function j(e){let{imageUrl:t,caption:s}=e;return{"@type":"ImageObject","@id":t,url:t,contentUrl:t,caption:s}}var w=s(6347),b=s(8774),N=s(1682),A=s(9169);function C(e){const{pathname:t}=(0,w.zy)();return(0,a.useMemo)((()=>e.filter((e=>function(e,t){return!(e.unlisted&&!(0,A.ys)(e.permalink,t))}(e,t)))),[e,t])}function M(e){const t=(0,N.$z)(e,(e=>`${new Date(e.date).getFullYear()}`)),s=Object.entries(t);return s.reverse(),s}function k(e){let{items:t,ulClassName:s,liClassName:a,linkClassName:n,linkActiveClassName:l}=e;return(0,r.jsx)("ul",{className:s,children:t.map((e=>(0,r.jsx)("li",{className:a,children:(0,r.jsx)(b.A,{isNavLink:!0,to:e.permalink,className:n,activeClassName:l,children:e.title})},e.permalink)))})}},8027:(e,t,s)=>{s.d(t,{A:()=>T});var a=s(6540),n=s(4164),l=s(7823),r=s(4581),i=s(1312),o=s(4096),c=s(6342),m=s(1107),h=s(4848);function d(e){let{year:t,yearGroupHeadingClassName:s,children:a}=e;return(0,h.jsxs)("div",{role:"group",children:[(0,h.jsx)(m.A,{as:"h3",className:s,children:t}),a]})}function u(e){let{items:t,yearGroupHeadingClassName:s,ListComponent:a}=e;if((0,c.p)().blog.sidebar.groupByYear){const e=(0,o.Ki)(t);return(0,h.jsx)(h.Fragment,{children:e.map((e=>{let[t,n]=e;return(0,h.jsx)(d,{year:t,yearGroupHeadingClassName:s,children:(0,h.jsx)(a,{items:n})},t)}))})}return(0,h.jsx)(a,{items:t})}const g=(0,a.memo)(u),x="sidebar_re4s",f="sidebarItemTitle_pO2u",p="sidebarItemList_Yudw",v="sidebarItem__DBe",j="sidebarItemLink_mo7H",w="sidebarItemLinkActive_I1ZP",b="yearGroupHeading_rMGB",N=e=>{let{items:t}=e;return(0,h.jsx)(o.OU,{items:t,ulClassName:(0,n.A)(p,"clean-list"),liClassName:v,linkClassName:j,linkActiveClassName:w})};function A(e){let{sidebar:t}=e;const s=(0,o.Gx)(t.items);return(0,h.jsx)("aside",{className:"col col--3",children:(0,h.jsxs)("nav",{className:(0,n.A)(x,"thin-scrollbar"),"aria-label":(0,i.T)({id:"theme.blog.sidebar.navAriaLabel",message:"Blog recent posts navigation",description:"The ARIA label for recent posts in the blog sidebar"}),children:[(0,h.jsx)("div",{className:(0,n.A)(f,"margin-bottom--md"),children:t.title}),(0,h.jsx)(g,{items:s,ListComponent:N,yearGroupHeadingClassName:b})]})})}const C=(0,a.memo)(A);var M=s(5600);const k="yearGroupHeading_QT03",y=e=>{let{items:t}=e;return(0,h.jsx)(o.OU,{items:t,ulClassName:"menu__list",liClassName:"menu__list-item",linkClassName:"menu__link",linkActiveClassName:"menu__link--active"})};function _(e){let{sidebar:t}=e;const s=(0,o.Gx)(t.items);return(0,h.jsx)(g,{items:s,ListComponent:y,yearGroupHeadingClassName:k})}function P(e){return(0,h.jsx)(M.GX,{component:_,props:e})}const B=(0,a.memo)(P);function I(e){let{sidebar:t}=e;const s=(0,r.l)();return t?.items.length?"mobile"===s?(0,h.jsx)(B,{sidebar:t}):(0,h.jsx)(C,{sidebar:t}):null}function T(e){const{sidebar:t,toc:s,children:a,...r}=e,i=t&&t.items.length>0;return(0,h.jsx)(l.A,{...r,children:(0,h.jsx)("div",{className:"container margin-vert--lg",children:(0,h.jsxs)("div",{className:"row",children:[(0,h.jsx)(I,{sidebar:t}),(0,h.jsx)("main",{className:(0,n.A)("col",{"col--7":i,"col--9 col--offset-1":!i}),children:a}),s&&(0,h.jsx)("div",{className:"col col--2",children:s})]})})})}},4387:(e,t,s)=>{s.d(t,{A:()=>E});var a=s(6540),n=s(4164),l=s(4096),r=s(4848);function i(e){let{children:t,className:s}=e;return(0,r.jsx)("article",{className:s,children:t})}var o=s(8774);const c={title:"title_f1Hy"};function m(e){let{className:t}=e;const{metadata:s,isBlogPostPage:a}=(0,l.e7)(),{permalink:i,title:m}=s,h=a?"h1":"h2";return(0,r.jsx)(h,{className:(0,n.A)(c.title,t),children:a?m:(0,r.jsx)(o.A,{to:i,children:m})})}var h=s(1312),d=s(5846),u=s(6266);const g={container:"container_mt6G"};function x(e){let{readingTime:t}=e;const s=function(){const{selectMessage:e}=(0,d.W)();return t=>{const s=Math.ceil(t);return e(s,(0,h.T)({id:"theme.blog.post.readingTime.plurals",description:'Pluralized label for "{readingTime} min read". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',message:"One min read|{readingTime} min read"},{readingTime:s}))}}();return(0,r.jsx)(r.Fragment,{children:s(t)})}function f(e){let{date:t,formattedDate:s}=e;return(0,r.jsx)("time",{dateTime:t,children:s})}function p(){return(0,r.jsx)(r.Fragment,{children:" \xb7 "})}function v(e){let{className:t}=e;const{metadata:s}=(0,l.e7)(),{date:a,readingTime:i}=s,o=(0,u.i)({day:"numeric",month:"long",year:"numeric",timeZone:"UTC"});return(0,r.jsxs)("div",{className:(0,n.A)(g.container,"margin-vert--md",t),children:[(0,r.jsx)(f,{date:a,formattedDate:(c=a,o.format(new Date(c)))}),void 0!==i&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(p,{}),(0,r.jsx)(x,{readingTime:i})]})]});var c}const j="githubSvg_Uu4N";const w="xSvg_y3PF";const b=function(e){return(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",...e,children:[(0,r.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,r.jsx)("path",{d:"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"}),(0,r.jsx)("path",{d:"M3.6 9h16.8"}),(0,r.jsx)("path",{d:"M3.6 15h16.8"}),(0,r.jsx)("path",{d:"M11.5 3a17 17 0 0 0 0 18"}),(0,r.jsx)("path",{d:"M12.5 3a17 17 0 0 1 0 18"})]})};const N="instagramSvg_YC40";const A="threadsSvg_PTXY";const C={authorSocials:"authorSocials_rSDt",authorSocialLink:"authorSocialLink_owbf",authorSocialIcon:"authorSocialIcon_XYv3"},M={twitter:{Icon:function(e){return(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 209",width:"1em",height:"1em",preserveAspectRatio:"xMidYMid",...e,children:(0,r.jsx)("path",{d:"M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 0 1-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 0 1-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 0 1-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 0 0 256 25.45",fill:"#55acee"})})},label:"Twitter"},github:{Icon:function(e){return(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 256 250",preserveAspectRatio:"xMidYMid",style:{"--dark":"#000","--light":"#fff"},...e,className:(0,n.A)(e.className,j),children:(0,r.jsx)("path",{d:"M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z"})})},label:"GitHub"},stackoverflow:{Icon:function(e){return(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 169.61 200",width:"1em",height:"1em",...e,children:[(0,r.jsx)("path",{d:"M140.44 178.38v-48.65h21.61V200H0v-70.27h21.61v48.65z",fill:"#bcbbbb"}),(0,r.jsx)("path",{d:"M124.24 140.54l4.32-16.22-86.97-17.83-3.78 17.83zM49.7 82.16L130.72 120l7.56-16.22-81.02-37.83zm22.68-40l68.06 57.3 11.35-13.51-68.6-57.3-11.35 13.51zM116.14 0l-14.59 10.81 53.48 71.89 14.58-10.81zM37.81 162.16h86.43v-16.21H37.81z",fill:"#f48024"})]})},label:"Stack Overflow"},linkedin:{Icon:function(e){return(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",preserveAspectRatio:"xMidYMid",viewBox:"0 0 256 256",...e,children:(0,r.jsx)("path",{d:"M218.123 218.127h-37.931v-59.403c0-14.165-.253-32.4-19.728-32.4-19.756 0-22.779 15.434-22.779 31.369v60.43h-37.93V95.967h36.413v16.694h.51a39.907 39.907 0 0 1 35.928-19.733c38.445 0 45.533 25.288 45.533 58.186l-.016 67.013ZM56.955 79.27c-12.157.002-22.014-9.852-22.016-22.009-.002-12.157 9.851-22.014 22.008-22.016 12.157-.003 22.014 9.851 22.016 22.008A22.013 22.013 0 0 1 56.955 79.27m18.966 138.858H37.95V95.967h37.97v122.16ZM237.033.018H18.89C8.58-.098.125 8.161-.001 18.471v219.053c.122 10.315 8.576 18.582 18.89 18.474h218.144c10.336.128 18.823-8.139 18.966-18.474V18.454c-.147-10.33-8.635-18.588-18.966-18.453",fill:"#0A66C2"})})},label:"LinkedIn"},x:{Icon:function(e){return(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",fill:"none",viewBox:"0 0 1200 1227",style:{"--dark":"#000","--light":"#fff"},...e,className:(0,n.A)(e.className,w),children:(0,r.jsx)("path",{d:"M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"})})},label:"X"},bluesky:{Icon:function(e){return(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",preserveAspectRatio:"xMidYMid",viewBox:"0 0 256 226",...e,children:(0,r.jsx)("path",{fill:"#1185FE",d:"M55.491 15.172c29.35 22.035 60.917 66.712 72.509 90.686 11.592-23.974 43.159-68.651 72.509-90.686C221.686-.727 256-13.028 256 26.116c0 7.818-4.482 65.674-7.111 75.068-9.138 32.654-42.436 40.983-72.057 35.942 51.775 8.812 64.946 38 36.501 67.187-54.021 55.433-77.644-13.908-83.696-31.676-1.11-3.257-1.63-4.78-1.637-3.485-.008-1.296-.527.228-1.637 3.485-6.052 17.768-29.675 87.11-83.696 31.676-28.445-29.187-15.274-58.375 36.5-67.187-29.62 5.041-62.918-3.288-72.056-35.942C4.482 91.79 0 33.934 0 26.116 0-13.028 34.314-.727 55.491 15.172Z"})})},label:"Bluesky"},instagram:{Icon:function(e){return(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",preserveAspectRatio:"xMidYMid",viewBox:"0 0 256 256",style:{"--dark":"#000","--light":"#fff"},...e,className:(0,n.A)(e.className,N),children:(0,r.jsx)("path",{d:"M128 23.064c34.177 0 38.225.13 51.722.745 12.48.57 19.258 2.655 23.769 4.408 5.974 2.322 10.238 5.096 14.717 9.575 4.48 4.479 7.253 8.743 9.575 14.717 1.753 4.511 3.838 11.289 4.408 23.768.615 13.498.745 17.546.745 51.723 0 34.178-.13 38.226-.745 51.723-.57 12.48-2.655 19.257-4.408 23.768-2.322 5.974-5.096 10.239-9.575 14.718-4.479 4.479-8.743 7.253-14.717 9.574-4.511 1.753-11.289 3.839-23.769 4.408-13.495.616-17.543.746-51.722.746-34.18 0-38.228-.13-51.723-.746-12.48-.57-19.257-2.655-23.768-4.408-5.974-2.321-10.239-5.095-14.718-9.574-4.479-4.48-7.253-8.744-9.574-14.718-1.753-4.51-3.839-11.288-4.408-23.768-.616-13.497-.746-17.545-.746-51.723 0-34.177.13-38.225.746-51.722.57-12.48 2.655-19.258 4.408-23.769 2.321-5.974 5.095-10.238 9.574-14.717 4.48-4.48 8.744-7.253 14.718-9.575 4.51-1.753 11.288-3.838 23.768-4.408 13.497-.615 17.545-.745 51.723-.745M128 0C93.237 0 88.878.147 75.226.77c-13.625.622-22.93 2.786-31.071 5.95-8.418 3.271-15.556 7.648-22.672 14.764C14.367 28.6 9.991 35.738 6.72 44.155 3.555 52.297 1.392 61.602.77 75.226.147 88.878 0 93.237 0 128c0 34.763.147 39.122.77 52.774.622 13.625 2.785 22.93 5.95 31.071 3.27 8.417 7.647 15.556 14.763 22.672 7.116 7.116 14.254 11.492 22.672 14.763 8.142 3.165 17.446 5.328 31.07 5.95 13.653.623 18.012.77 52.775.77s39.122-.147 52.774-.77c13.624-.622 22.929-2.785 31.07-5.95 8.418-3.27 15.556-7.647 22.672-14.763 7.116-7.116 11.493-14.254 14.764-22.672 3.164-8.142 5.328-17.446 5.95-31.07.623-13.653.77-18.012.77-52.775s-.147-39.122-.77-52.774c-.622-13.624-2.786-22.929-5.95-31.07-3.271-8.418-7.648-15.556-14.764-22.672C227.4 14.368 220.262 9.99 211.845 6.72c-8.142-3.164-17.447-5.328-31.071-5.95C167.122.147 162.763 0 128 0Zm0 62.27C91.698 62.27 62.27 91.7 62.27 128c0 36.302 29.428 65.73 65.73 65.73 36.301 0 65.73-29.428 65.73-65.73 0-36.301-29.429-65.73-65.73-65.73Zm0 108.397c-23.564 0-42.667-19.103-42.667-42.667S104.436 85.333 128 85.333s42.667 19.103 42.667 42.667-19.103 42.667-42.667 42.667Zm83.686-110.994c0 8.484-6.876 15.36-15.36 15.36-8.483 0-15.36-6.876-15.36-15.36 0-8.483 6.877-15.36 15.36-15.36 8.484 0 15.36 6.877 15.36 15.36Z"})})},label:"Instagram"},threads:{Icon:function(e){return(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg","aria-label":"Threads",viewBox:"0 0 192 192",width:"1em",fill:"none",height:"1em",style:{"--dark":"#000","--light":"#fff"},...e,className:(0,n.A)(e.className,A),children:(0,r.jsx)("path",{d:"M141.537 88.988a66.667 66.667 0 0 0-2.518-1.143c-1.482-27.307-16.403-42.94-41.457-43.1h-.34c-14.986 0-27.449 6.396-35.12 18.036l13.779 9.452c5.73-8.695 14.724-10.548 21.348-10.548h.229c8.249.053 14.474 2.452 18.503 7.129 2.932 3.405 4.893 8.111 5.864 14.05-7.314-1.243-15.224-1.626-23.68-1.14-23.82 1.371-39.134 15.264-38.105 34.568.522 9.792 5.4 18.216 13.735 23.719 7.047 4.652 16.124 6.927 25.557 6.412 12.458-.683 22.231-5.436 29.049-14.127 5.178-6.6 8.453-15.153 9.899-25.93 5.937 3.583 10.337 8.298 12.767 13.966 4.132 9.635 4.373 25.468-8.546 38.376-11.319 11.308-24.925 16.2-45.488 16.351-22.809-.169-40.06-7.484-51.275-21.742C35.236 139.966 29.808 120.682 29.605 96c.203-24.682 5.63-43.966 16.133-57.317C56.954 24.425 74.204 17.11 97.013 16.94c22.975.17 40.526 7.52 52.171 21.847 5.71 7.026 10.015 15.86 12.853 26.162l16.147-4.308c-3.44-12.68-8.853-23.606-16.219-32.668C147.036 9.607 125.202.195 97.07 0h-.113C68.882.194 47.292 9.642 32.788 28.08 19.882 44.485 13.224 67.315 13.001 95.932L13 96v.067c.224 28.617 6.882 51.447 19.788 67.854C47.292 182.358 68.882 191.806 96.957 192h.113c24.96-.173 42.554-6.708 57.048-21.189 18.963-18.945 18.392-42.692 12.142-57.27-4.484-10.454-13.033-18.945-24.723-24.553ZM98.44 129.507c-10.44.588-21.286-4.098-21.82-14.135-.397-7.442 5.296-15.746 22.461-16.735 1.966-.114 3.895-.169 5.79-.169 6.235 0 12.068.606 17.371 1.765-1.978 24.702-13.58 28.713-23.802 29.274Z"})})},label:"Threads"},mastodon:{Icon:function(e){const t=(0,a.useId)();return(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 61 65",width:"1em",height:"1em",...e,children:[(0,r.jsx)("path",{fill:`url(#${t})`,d:"M60.754 14.39C59.814 7.406 53.727 1.903 46.512.836 45.294.656 40.682 0 29.997 0h-.08C19.23 0 16.938.656 15.72.836 8.705 1.873 2.299 6.82.745 13.886c-.748 3.48-.828 7.338-.689 10.877.198 5.075.237 10.142.697 15.197a71.482 71.482 0 0 0 1.664 9.968c1.477 6.056 7.458 11.096 13.317 13.152a35.718 35.718 0 0 0 19.484 1.028 28.365 28.365 0 0 0 2.107-.576c1.572-.5 3.413-1.057 4.766-2.038a.154.154 0 0 0 .062-.118v-4.899a.146.146 0 0 0-.055-.111.145.145 0 0 0-.122-.028 54 54 0 0 1-12.644 1.478c-7.328 0-9.298-3.478-9.863-4.925a15.258 15.258 0 0 1-.857-3.882.142.142 0 0 1 .178-.145 52.976 52.976 0 0 0 12.437 1.477c1.007 0 2.012 0 3.02-.026 4.213-.119 8.654-.334 12.8-1.144.103-.02.206-.038.295-.065 6.539-1.255 12.762-5.196 13.394-15.176.024-.393.083-4.115.083-4.523.003-1.386.446-9.829-.065-15.017Z"}),(0,r.jsx)("path",{fill:"#fff",d:"M50.394 22.237v17.35H43.52V22.749c0-3.545-1.478-5.353-4.483-5.353-3.303 0-4.958 2.139-4.958 6.364v9.217h-6.835V23.76c0-4.225-1.657-6.364-4.96-6.364-2.988 0-4.48 1.808-4.48 5.353v16.84H10.93V22.237c0-3.545.905-6.362 2.715-8.45 1.868-2.082 4.317-3.152 7.358-3.152 3.519 0 6.178 1.354 7.951 4.057l1.711 2.871 1.714-2.871c1.773-2.704 4.432-4.056 7.945-4.056 3.038 0 5.487 1.069 7.36 3.152 1.81 2.085 2.712 4.902 2.71 8.449Z"}),(0,r.jsx)("defs",{children:(0,r.jsxs)("linearGradient",{id:t,x1:30.5,x2:30.5,y1:0,y2:65,gradientUnits:"userSpaceOnUse",children:[(0,r.jsx)("stop",{stopColor:"#6364FF"}),(0,r.jsx)("stop",{offset:1,stopColor:"#563ACC"})]})})]})},label:"Mastodon"},youtube:{Icon:function(e){return(0,r.jsxs)("svg",{viewBox:"0 0 256 180",width:"1em",height:"1em",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid",...e,children:[(0,r.jsx)("path",{d:"M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134Z",fill:"red"}),(0,r.jsx)("path",{fill:"#FFF",d:"m102.421 128.06 66.328-38.418-66.328-38.418z"})]})},label:"YouTube"},twitch:{Icon:function(e){return(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",x:0,y:0,viewBox:"0 0 2400 2800",width:"1em",height:"1em",...e,children:[(0,r.jsx)("path",{d:"m2200 1300-400 400h-400l-350 350v-350H600V200h1600z",fill:"#fff"}),(0,r.jsxs)("g",{children:[(0,r.jsx)("path",{d:"M500 0 0 500v1800h600v500l500-500h400l900-900V0H500zm1700 1300-400 400h-400l-350 350v-350H600V200h1600v1100z",fill:"#9146ff"}),(0,r.jsx)("path",{d:"M1700 550h200v600h-200zM1150 550h200v600h-200z",fill:"#9146ff"})]})]})},label:"Twitch"}};function k(e){let{platform:t,link:s}=e;const{Icon:a,label:l}=M[i=t]??{Icon:b,label:i};var i;return(0,r.jsx)(o.A,{className:C.authorSocialLink,href:s,title:l,children:(0,r.jsx)(a,{className:(0,n.A)(C.authorSocialLink)})})}function y(e){let{author:t}=e;const s=Object.entries(t.socials??{});return(0,r.jsx)("div",{className:C.authorSocials,children:s.map((e=>{let[t,s]=e;return(0,r.jsx)(k,{platform:t,link:s},t)}))})}var _=s(1107);const P={authorImage:"authorImage_XqGP","author-as-h1":"author-as-h1_n9oJ","author-as-h2":"author-as-h2_gXvM",authorDetails:"authorDetails_lV9A",authorName:"authorName_yefp",authorTitle:"authorTitle_nd0D",authorBlogPostCount:"authorBlogPostCount_iiJ5"};function B(e){return e.href?(0,r.jsx)(o.A,{...e}):(0,r.jsx)(r.Fragment,{children:e.children})}function I(e){let{title:t}=e;return(0,r.jsx)("small",{className:P.authorTitle,title:t,children:t})}function T(e){let{name:t,as:s}=e;return s?(0,r.jsx)(_.A,{as:s,className:P.authorName,children:t}):(0,r.jsx)("span",{className:P.authorName,children:t})}function L(e){let{count:t}=e;return(0,r.jsx)("span",{className:(0,n.A)(P.authorBlogPostCount),children:t})}function U(e){let{as:t,author:s,className:a,count:l}=e;const{name:i,title:o,url:c,imageURL:m,email:h,page:d}=s,u=d?.permalink||c||h&&`mailto:${h}`||void 0;return(0,r.jsxs)("div",{className:(0,n.A)("avatar margin-bottom--sm",a,P[`author-as-${t}`]),children:[m&&(0,r.jsx)(B,{href:u,className:"avatar__photo-link",children:(0,r.jsx)("img",{className:(0,n.A)("avatar__photo",P.authorImage),src:m,alt:i})}),(i||o)&&(0,r.jsxs)("div",{className:(0,n.A)("avatar__intro",P.authorDetails),children:[(0,r.jsxs)("div",{className:"avatar__name",children:[i&&(0,r.jsx)(B,{href:u,children:(0,r.jsx)(T,{name:i,as:t})}),void 0!==l&&(0,r.jsx)(L,{count:l})]}),!!o&&(0,r.jsx)(I,{title:o}),(0,r.jsx)(y,{author:s})]})]})}const H={authorCol:"authorCol_Hf19",imageOnlyAuthorRow:"imageOnlyAuthorRow_pa_O",imageOnlyAuthorCol:"imageOnlyAuthorCol_G86a"};function O(e){let{className:t}=e;const{metadata:{authors:s},assets:a}=(0,l.e7)();if(0===s.length)return null;const i=s.every((e=>{let{name:t}=e;return!t})),o=1===s.length;return(0,r.jsx)("div",{className:(0,n.A)("margin-top--md margin-bottom--sm",i?H.imageOnlyAuthorRow:"row",t),children:s.map(((e,t)=>(0,r.jsx)("div",{className:(0,n.A)(!i&&(o?"col col--12":"col col--6"),i?H.imageOnlyAuthorCol:H.authorCol),children:(0,r.jsx)(U,{author:{...e,imageURL:a.authorsImageUrls[t]??e.imageURL}})},t)))})}function Z(){return(0,r.jsxs)("header",{children:[(0,r.jsx)(m,{}),(0,r.jsx)(v,{}),(0,r.jsx)(O,{})]})}var F=s(440),R=s(5425);function $(e){let{children:t,className:s}=e;const{isBlogPostPage:a}=(0,l.e7)();return(0,r.jsx)("div",{id:a?F.LU:void 0,className:(0,n.A)("markdown",s),children:(0,r.jsx)(R.A,{children:t})})}var S=s(7559),G=s(4336),z=s(2053);function D(){return(0,r.jsx)("b",{children:(0,r.jsx)(h.A,{id:"theme.blog.post.readMore",description:"The label used in blog post item excerpts to link to full blog posts",children:"Read more"})})}function Y(e){const{blogPostTitle:t,...s}=e;return(0,r.jsx)(o.A,{"aria-label":(0,h.T)({message:"Read more about {title}",id:"theme.blog.post.readMoreLabel",description:"The ARIA label for the link to full blog posts from excerpts"},{title:t}),...s,children:(0,r.jsx)(D,{})})}function V(){const{metadata:e,isBlogPostPage:t}=(0,l.e7)(),{tags:s,title:a,editUrl:i,hasTruncateMarker:o,lastUpdatedBy:c,lastUpdatedAt:m}=e,h=!t&&o,d=s.length>0;if(!(d||h||i))return null;if(t){const e=!!(i||m||c);return(0,r.jsxs)("footer",{className:"docusaurus-mt-lg",children:[d&&(0,r.jsx)("div",{className:(0,n.A)("row","margin-top--sm",S.G.blog.blogFooterEditMetaRow),children:(0,r.jsx)("div",{className:"col",children:(0,r.jsx)(z.A,{tags:s})})}),e&&(0,r.jsx)(G.A,{className:(0,n.A)("margin-top--sm",S.G.blog.blogFooterEditMetaRow),editUrl:i,lastUpdatedAt:m,lastUpdatedBy:c})]})}return(0,r.jsxs)("footer",{className:"row docusaurus-mt-lg",children:[d&&(0,r.jsx)("div",{className:(0,n.A)("col",{"col--9":h}),children:(0,r.jsx)(z.A,{tags:s})}),h&&(0,r.jsx)("div",{className:(0,n.A)("col text--right",{"col--3":d}),children:(0,r.jsx)(Y,{blogPostTitle:a,to:e.permalink})})]})}function E(e){let{children:t,className:s}=e;const a=function(){const{isBlogPostPage:e}=(0,l.e7)();return e?void 0:"margin-bottom--xl"}();return(0,r.jsxs)(i,{className:(0,n.A)(a,s),children:[(0,r.jsx)(Z,{}),(0,r.jsx)($,{children:t}),(0,r.jsx)(V,{})]})}},5846:(e,t,s)=>{s.d(t,{W:()=>c});var a=s(6540),n=s(4586);const l=["zero","one","two","few","many","other"];function r(e){return l.filter((t=>e.includes(t)))}const i={locale:"en",pluralForms:r(["one","other"]),select:e=>1===e?"one":"other"};function o(){const{i18n:{currentLocale:e}}=(0,n.A)();return(0,a.useMemo)((()=>{try{return function(e){const t=new Intl.PluralRules(e);return{locale:e,pluralForms:r(t.resolvedOptions().pluralCategories),select:e=>t.select(e)}}(e)}catch(t){return console.error(`Failed to use Intl.PluralRules for locale "${e}".\nDocusaurus will fallback to the default (English) implementation.\nError: ${t.message}\n`),i}}),[e])}function c(){const e=o();return{selectMessage:(t,s)=>function(e,t,s){const a=e.split("|");if(1===a.length)return a[0];a.length>s.pluralForms.length&&console.error(`For locale=${s.locale}, a maximum of ${s.pluralForms.length} plural forms are expected (${s.pluralForms.join(",")}), but the message contains ${a.length}: ${e}`);const n=s.select(t),l=s.pluralForms.indexOf(n);return a[Math.min(l,a.length-1)]}(s,t,e)}}}}]); \ No newline at end of file diff --git a/assets/js/4562.a79c15e0.js b/assets/js/6369.e7b75b19.js similarity index 62% rename from assets/js/4562.a79c15e0.js rename to assets/js/6369.e7b75b19.js index 7eb165d4..233661f0 100644 --- a/assets/js/4562.a79c15e0.js +++ b/assets/js/6369.e7b75b19.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[4562],{4182:(e,n,t)=>{t.d(n,{A:()=>M});var i=t(6540),a=t(4848);function s(e){const{mdxAdmonitionTitle:n,rest:t}=function(e){const n=i.Children.toArray(e),t=n.find((e=>i.isValidElement(e)&&"mdxAdmonitionTitle"===e.type)),s=n.filter((e=>e!==t)),l=t?.props.children;return{mdxAdmonitionTitle:l,rest:s.length>0?(0,a.jsx)(a.Fragment,{children:s}):null}}(e.children),s=e.title??n;return{...e,...s&&{title:s},children:t}}var l=t(4164),r=t(3230),c=t(8630);const d="admonition_xJq3",o="admonitionHeading_Gvgb",u="admonitionIcon_Rf37",h="admonitionContent_BuS1";function m(e){let{type:n,className:t,children:i}=e;return(0,a.jsx)("div",{className:(0,l.A)(c.G.common.admonition,c.G.common.admonitionType(n),d,t),children:i})}function x(e){let{icon:n,title:t}=e;return(0,a.jsxs)("div",{className:o,children:[(0,a.jsx)("span",{className:u,children:n}),t]})}function p(e){let{children:n}=e;return n?(0,a.jsx)("div",{className:h,children:n}):null}function j(e){const{type:n,icon:t,title:i,children:s,className:l}=e;return(0,a.jsxs)(m,{type:n,className:l,children:[i||t?(0,a.jsx)(x,{title:i,icon:t}):null,(0,a.jsx)(p,{children:s})]})}function f(e){return(0,a.jsx)("svg",{viewBox:"0 0 14 16",...e,children:(0,a.jsx)("path",{fillRule:"evenodd",d:"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"})})}const g={icon:(0,a.jsx)(f,{}),title:(0,a.jsx)(r.A,{id:"theme.admonition.note",description:"The default label used for the Note admonition (:::note)",children:"note"})};function v(e){return(0,a.jsx)(j,{...g,...e,className:(0,l.A)("alert alert--secondary",e.className),children:e.children})}function A(e){return(0,a.jsx)("svg",{viewBox:"0 0 12 16",...e,children:(0,a.jsx)("path",{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})})}const N={icon:(0,a.jsx)(A,{}),title:(0,a.jsx)(r.A,{id:"theme.admonition.tip",description:"The default label used for the Tip admonition (:::tip)",children:"tip"})};function y(e){return(0,a.jsx)(j,{...N,...e,className:(0,l.A)("alert alert--success",e.className),children:e.children})}function b(e){return(0,a.jsx)("svg",{viewBox:"0 0 14 16",...e,children:(0,a.jsx)("path",{fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"})})}const _={icon:(0,a.jsx)(b,{}),title:(0,a.jsx)(r.A,{id:"theme.admonition.info",description:"The default label used for the Info admonition (:::info)",children:"info"})};function w(e){return(0,a.jsx)(j,{..._,...e,className:(0,l.A)("alert alert--info",e.className),children:e.children})}function U(e){return(0,a.jsx)("svg",{viewBox:"0 0 16 16",...e,children:(0,a.jsx)("path",{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})})}const C={icon:(0,a.jsx)(U,{}),title:(0,a.jsx)(r.A,{id:"theme.admonition.warning",description:"The default label used for the Warning admonition (:::warning)",children:"warning"})};function T(e){return(0,a.jsx)("svg",{viewBox:"0 0 12 16",...e,children:(0,a.jsx)("path",{fillRule:"evenodd",d:"M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"})})}const z={icon:(0,a.jsx)(T,{}),title:(0,a.jsx)(r.A,{id:"theme.admonition.danger",description:"The default label used for the Danger admonition (:::danger)",children:"danger"})};const k={icon:(0,a.jsx)(U,{}),title:(0,a.jsx)(r.A,{id:"theme.admonition.caution",description:"The default label used for the Caution admonition (:::caution)",children:"caution"})};const B={...{note:v,tip:y,info:w,warning:function(e){return(0,a.jsx)(j,{...C,...e,className:(0,l.A)("alert alert--warning",e.className),children:e.children})},danger:function(e){return(0,a.jsx)(j,{...z,...e,className:(0,l.A)("alert alert--danger",e.className),children:e.children})}},...{secondary:e=>(0,a.jsx)(v,{title:"secondary",...e}),important:e=>(0,a.jsx)(w,{title:"important",...e}),success:e=>(0,a.jsx)(y,{title:"success",...e}),caution:function(e){return(0,a.jsx)(j,{...k,...e,className:(0,l.A)("alert alert--warning",e.className),children:e.children})}}};function M(e){const n=s(e),t=(i=n.type,B[i]||(console.warn(`No admonition component found for admonition type "${i}". Using Info as fallback.`),B.info));var i;return(0,a.jsx)(t,{...n})}},5659:(e,n,t)=>{t.d(n,{A:()=>j});t(6540);var i=t(4164),a=t(3230),s=t(8630),l=t(4783);const r={iconEdit:"iconEdit_Z9Sw"};var c=t(4848);function d(e){let{className:n,...t}=e;return(0,c.jsx)("svg",{fill:"currentColor",height:"20",width:"20",viewBox:"0 0 40 40",className:(0,i.A)(r.iconEdit,n),"aria-hidden":"true",...t,children:(0,c.jsx)("g",{children:(0,c.jsx)("path",{d:"m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"})})})}function o(e){let{editUrl:n}=e;return(0,c.jsxs)(l.A,{to:n,className:s.G.common.editThisPage,children:[(0,c.jsx)(d,{}),(0,c.jsx)(a.A,{id:"theme.common.editThisPage",description:"The link label to edit the current page",children:"Edit this page"})]})}var u=t(9191);function h(e){let{lastUpdatedAt:n}=e;const t=new Date(n),i=(0,u.i)({day:"numeric",month:"short",year:"numeric",timeZone:"UTC"}).format(t);return(0,c.jsx)(a.A,{id:"theme.lastUpdated.atDate",description:"The words used to describe on which date a page has been last updated",values:{date:(0,c.jsx)("b",{children:(0,c.jsx)("time",{dateTime:t.toISOString(),itemProp:"dateModified",children:i})})},children:" on {date}"})}function m(e){let{lastUpdatedBy:n}=e;return(0,c.jsx)(a.A,{id:"theme.lastUpdated.byUser",description:"The words used to describe by who the page has been last updated",values:{user:(0,c.jsx)("b",{children:n})},children:" by {user}"})}function x(e){let{lastUpdatedAt:n,lastUpdatedBy:t}=e;return(0,c.jsxs)("span",{className:s.G.common.lastUpdated,children:[(0,c.jsx)(a.A,{id:"theme.lastUpdated.lastUpdatedAtBy",description:"The sentence used to display when a page has been last updated, and by who",values:{atDate:n?(0,c.jsx)(h,{lastUpdatedAt:n}):"",byUser:t?(0,c.jsx)(m,{lastUpdatedBy:t}):""},children:"Last updated{atDate}{byUser}"}),!1]})}const p={lastUpdated:"lastUpdated_JAkA"};function j(e){let{className:n,editUrl:t,lastUpdatedAt:a,lastUpdatedBy:s}=e;return(0,c.jsxs)("div",{className:(0,i.A)("row",n),children:[(0,c.jsx)("div",{className:"col",children:t&&(0,c.jsx)(o,{editUrl:t})}),(0,c.jsx)("div",{className:(0,i.A)("col",p.lastUpdated),children:(a||s)&&(0,c.jsx)(x,{lastUpdatedAt:a,lastUpdatedBy:s})})]})}},600:(e,n,t)=>{t.d(n,{A:()=>k});var i=t(6540),a=t(8453),s=t(1141),l=t(2250),r=t(4848);function c(e){return(0,r.jsx)("code",{...e})}var d=t(4783);var o=t(4164),u=t(7344),h=t(1062),m=t(4549);const x="details_lb9f",p="isBrowser_bmU9",j="collapsibleContent_i85q";function f(e){return!!e&&("SUMMARY"===e.tagName||f(e.parentElement))}function g(e,n){return!!e&&(e===n||g(e.parentElement,n))}function v(e){let{summary:n,children:t,...a}=e;(0,u.A)().collectAnchor(a.id);const s=(0,h.A)(),l=(0,i.useRef)(null),{collapsed:c,setCollapsed:d}=(0,m.u)({initialState:!a.open}),[v,A]=(0,i.useState)(a.open),N=i.isValidElement(n)?n:(0,r.jsx)("summary",{children:n??"Details"});return(0,r.jsxs)("details",{...a,ref:l,open:v,"data-collapsed":c,className:(0,o.A)(x,s&&p,a.className),onMouseDown:e=>{f(e.target)&&e.detail>1&&e.preventDefault()},onClick:e=>{e.stopPropagation();const n=e.target;f(n)&&g(n,l.current)&&(e.preventDefault(),c?(d(!1),A(!0)):d(!0))},children:[N,(0,r.jsx)(m.N,{lazy:!1,collapsed:c,disableSSRStyle:!0,onCollapseTransitionEnd:e=>{d(e),A(!e)},children:(0,r.jsx)("div",{className:j,children:t})})]})}const A="details_b_Ee";function N(e){let{...n}=e;return(0,r.jsx)(v,{...n,className:(0,o.A)("alert alert--info",A,n.className)})}function y(e){const n=i.Children.toArray(e.children),t=n.find((e=>i.isValidElement(e)&&"summary"===e.type)),a=(0,r.jsx)(r.Fragment,{children:n.filter((e=>e!==t))});return(0,r.jsx)(N,{...e,summary:t,children:a})}var b=t(5225);function _(e){return(0,r.jsx)(b.A,{...e})}const w="containsTaskList_mC6p";function U(e){if(void 0!==e)return(0,o.A)(e,e?.includes("contains-task-list")&&w)}const C="img_ev3q";var T=t(4182);const z={Head:s.A,details:y,Details:y,code:function(e){return function(e){return void 0!==e.children&&i.Children.toArray(e.children).every((e=>"string"==typeof e&&!e.includes("\n")))}(e)?(0,r.jsx)(c,{...e}):(0,r.jsx)(l.A,{...e})},a:function(e){return(0,r.jsx)(d.A,{...e})},pre:function(e){return(0,r.jsx)(r.Fragment,{children:e.children})},ul:function(e){return(0,r.jsx)("ul",{...e,className:U(e.className)})},li:function(e){return(0,u.A)().collectAnchor(e.id),(0,r.jsx)("li",{...e})},img:function(e){return(0,r.jsx)("img",{decoding:"async",loading:"lazy",...e,className:(n=e.className,(0,o.A)(n,C))});var n},h1:e=>(0,r.jsx)(_,{as:"h1",...e}),h2:e=>(0,r.jsx)(_,{as:"h2",...e}),h3:e=>(0,r.jsx)(_,{as:"h3",...e}),h4:e=>(0,r.jsx)(_,{as:"h4",...e}),h5:e=>(0,r.jsx)(_,{as:"h5",...e}),h6:e=>(0,r.jsx)(_,{as:"h6",...e}),admonition:T.A,mermaid:()=>null};function k(e){let{children:n}=e;return(0,r.jsx)(a.x,{components:z,children:n})}},3555:(e,n,t)=>{t.d(n,{A:()=>l});t(6540);var i=t(4164),a=t(4783),s=t(4848);function l(e){const{permalink:n,title:t,subLabel:l,isNext:r}=e;return(0,s.jsxs)(a.A,{className:(0,i.A)("pagination-nav__link",r?"pagination-nav__link--next":"pagination-nav__link--prev"),to:n,children:[l&&(0,s.jsx)("div",{className:"pagination-nav__sublabel",children:l}),(0,s.jsx)("div",{className:"pagination-nav__label",children:t})]})}},1883:(e,n,t)=>{t.d(n,{A:()=>r});t(6540);var i=t(4164),a=t(4783);const s={tag:"tag_zVej",tagRegular:"tagRegular_sFm0",tagWithCount:"tagWithCount_h2kH"};var l=t(4848);function r(e){let{permalink:n,label:t,count:r,description:c}=e;return(0,l.jsxs)(a.A,{href:n,title:c,className:(0,i.A)(s.tag,r?s.tagWithCount:s.tagRegular),children:[t,r&&(0,l.jsx)("span",{children:r})]})}},1113:(e,n,t)=>{t.d(n,{A:()=>c});t(6540);var i=t(4164),a=t(3230),s=t(1883);const l={tags:"tags_jXut",tag:"tag_QGVx"};var r=t(4848);function c(e){let{tags:n}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("b",{children:(0,r.jsx)(a.A,{id:"theme.tags.tagsListLabel",description:"The label alongside a tag list",children:"Tags:"})}),(0,r.jsx)("ul",{className:(0,i.A)(l.tags,"padding--none","margin-left--sm"),children:n.map((e=>(0,r.jsx)("li",{className:l.tag,children:(0,r.jsx)(s.A,{...e})},e.permalink)))})]})}},9191:(e,n,t)=>{t.d(n,{i:()=>a});var i=t(7639);function a(e){void 0===e&&(e={});const{i18n:{currentLocale:n}}=(0,i.A)(),t=function(){const{i18n:{currentLocale:e,localeConfigs:n}}=(0,i.A)();return n[e].calendar}();return new Intl.DateTimeFormat(n,{calendar:t,...e})}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[6369],{7293:(e,n,t)=>{t.d(n,{A:()=>M});var i=t(6540),a=t(4848);function s(e){const{mdxAdmonitionTitle:n,rest:t}=function(e){const n=i.Children.toArray(e),t=n.find((e=>i.isValidElement(e)&&"mdxAdmonitionTitle"===e.type)),s=n.filter((e=>e!==t)),l=t?.props.children;return{mdxAdmonitionTitle:l,rest:s.length>0?(0,a.jsx)(a.Fragment,{children:s}):null}}(e.children),s=e.title??n;return{...e,...s&&{title:s},children:t}}var l=t(4164),r=t(1312),c=t(7559);const d="admonition_xJq3",o="admonitionHeading_Gvgb",u="admonitionIcon_Rf37",h="admonitionContent_BuS1";function m(e){let{type:n,className:t,children:i}=e;return(0,a.jsx)("div",{className:(0,l.A)(c.G.common.admonition,c.G.common.admonitionType(n),d,t),children:i})}function x(e){let{icon:n,title:t}=e;return(0,a.jsxs)("div",{className:o,children:[(0,a.jsx)("span",{className:u,children:n}),t]})}function p(e){let{children:n}=e;return n?(0,a.jsx)("div",{className:h,children:n}):null}function j(e){const{type:n,icon:t,title:i,children:s,className:l}=e;return(0,a.jsxs)(m,{type:n,className:l,children:[i||t?(0,a.jsx)(x,{title:i,icon:t}):null,(0,a.jsx)(p,{children:s})]})}function f(e){return(0,a.jsx)("svg",{viewBox:"0 0 14 16",...e,children:(0,a.jsx)("path",{fillRule:"evenodd",d:"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"})})}const g={icon:(0,a.jsx)(f,{}),title:(0,a.jsx)(r.A,{id:"theme.admonition.note",description:"The default label used for the Note admonition (:::note)",children:"note"})};function v(e){return(0,a.jsx)(j,{...g,...e,className:(0,l.A)("alert alert--secondary",e.className),children:e.children})}function A(e){return(0,a.jsx)("svg",{viewBox:"0 0 12 16",...e,children:(0,a.jsx)("path",{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})})}const N={icon:(0,a.jsx)(A,{}),title:(0,a.jsx)(r.A,{id:"theme.admonition.tip",description:"The default label used for the Tip admonition (:::tip)",children:"tip"})};function y(e){return(0,a.jsx)(j,{...N,...e,className:(0,l.A)("alert alert--success",e.className),children:e.children})}function b(e){return(0,a.jsx)("svg",{viewBox:"0 0 14 16",...e,children:(0,a.jsx)("path",{fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"})})}const _={icon:(0,a.jsx)(b,{}),title:(0,a.jsx)(r.A,{id:"theme.admonition.info",description:"The default label used for the Info admonition (:::info)",children:"info"})};function w(e){return(0,a.jsx)(j,{..._,...e,className:(0,l.A)("alert alert--info",e.className),children:e.children})}function U(e){return(0,a.jsx)("svg",{viewBox:"0 0 16 16",...e,children:(0,a.jsx)("path",{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})})}const C={icon:(0,a.jsx)(U,{}),title:(0,a.jsx)(r.A,{id:"theme.admonition.warning",description:"The default label used for the Warning admonition (:::warning)",children:"warning"})};function T(e){return(0,a.jsx)("svg",{viewBox:"0 0 12 16",...e,children:(0,a.jsx)("path",{fillRule:"evenodd",d:"M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"})})}const z={icon:(0,a.jsx)(T,{}),title:(0,a.jsx)(r.A,{id:"theme.admonition.danger",description:"The default label used for the Danger admonition (:::danger)",children:"danger"})};const k={icon:(0,a.jsx)(U,{}),title:(0,a.jsx)(r.A,{id:"theme.admonition.caution",description:"The default label used for the Caution admonition (:::caution)",children:"caution"})};const B={...{note:v,tip:y,info:w,warning:function(e){return(0,a.jsx)(j,{...C,...e,className:(0,l.A)("alert alert--warning",e.className),children:e.children})},danger:function(e){return(0,a.jsx)(j,{...z,...e,className:(0,l.A)("alert alert--danger",e.className),children:e.children})}},...{secondary:e=>(0,a.jsx)(v,{title:"secondary",...e}),important:e=>(0,a.jsx)(w,{title:"important",...e}),success:e=>(0,a.jsx)(y,{title:"success",...e}),caution:function(e){return(0,a.jsx)(j,{...k,...e,className:(0,l.A)("alert alert--warning",e.className),children:e.children})}}};function M(e){const n=s(e),t=(i=n.type,B[i]||(console.warn(`No admonition component found for admonition type "${i}". Using Info as fallback.`),B.info));var i;return(0,a.jsx)(t,{...n})}},4336:(e,n,t)=>{t.d(n,{A:()=>j});t(6540);var i=t(4164),a=t(1312),s=t(7559),l=t(8774);const r={iconEdit:"iconEdit_Z9Sw"};var c=t(4848);function d(e){let{className:n,...t}=e;return(0,c.jsx)("svg",{fill:"currentColor",height:"20",width:"20",viewBox:"0 0 40 40",className:(0,i.A)(r.iconEdit,n),"aria-hidden":"true",...t,children:(0,c.jsx)("g",{children:(0,c.jsx)("path",{d:"m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"})})})}function o(e){let{editUrl:n}=e;return(0,c.jsxs)(l.A,{to:n,className:s.G.common.editThisPage,children:[(0,c.jsx)(d,{}),(0,c.jsx)(a.A,{id:"theme.common.editThisPage",description:"The link label to edit the current page",children:"Edit this page"})]})}var u=t(6266);function h(e){let{lastUpdatedAt:n}=e;const t=new Date(n),i=(0,u.i)({day:"numeric",month:"short",year:"numeric",timeZone:"UTC"}).format(t);return(0,c.jsx)(a.A,{id:"theme.lastUpdated.atDate",description:"The words used to describe on which date a page has been last updated",values:{date:(0,c.jsx)("b",{children:(0,c.jsx)("time",{dateTime:t.toISOString(),itemProp:"dateModified",children:i})})},children:" on {date}"})}function m(e){let{lastUpdatedBy:n}=e;return(0,c.jsx)(a.A,{id:"theme.lastUpdated.byUser",description:"The words used to describe by who the page has been last updated",values:{user:(0,c.jsx)("b",{children:n})},children:" by {user}"})}function x(e){let{lastUpdatedAt:n,lastUpdatedBy:t}=e;return(0,c.jsxs)("span",{className:s.G.common.lastUpdated,children:[(0,c.jsx)(a.A,{id:"theme.lastUpdated.lastUpdatedAtBy",description:"The sentence used to display when a page has been last updated, and by who",values:{atDate:n?(0,c.jsx)(h,{lastUpdatedAt:n}):"",byUser:t?(0,c.jsx)(m,{lastUpdatedBy:t}):""},children:"Last updated{atDate}{byUser}"}),!1]})}const p={lastUpdated:"lastUpdated_JAkA"};function j(e){let{className:n,editUrl:t,lastUpdatedAt:a,lastUpdatedBy:s}=e;return(0,c.jsxs)("div",{className:(0,i.A)("row",n),children:[(0,c.jsx)("div",{className:"col",children:t&&(0,c.jsx)(o,{editUrl:t})}),(0,c.jsx)("div",{className:(0,i.A)("col",p.lastUpdated),children:(a||s)&&(0,c.jsx)(x,{lastUpdatedAt:a,lastUpdatedBy:s})})]})}},5425:(e,n,t)=>{t.d(n,{A:()=>k});var i=t(6540),a=t(8453),s=t(5260),l=t(1432),r=t(4848);function c(e){return(0,r.jsx)("code",{...e})}var d=t(8774);var o=t(4164),u=t(3427),h=t(2303),m=t(1422);const x="details_lb9f",p="isBrowser_bmU9",j="collapsibleContent_i85q";function f(e){return!!e&&("SUMMARY"===e.tagName||f(e.parentElement))}function g(e,n){return!!e&&(e===n||g(e.parentElement,n))}function v(e){let{summary:n,children:t,...a}=e;(0,u.A)().collectAnchor(a.id);const s=(0,h.A)(),l=(0,i.useRef)(null),{collapsed:c,setCollapsed:d}=(0,m.u)({initialState:!a.open}),[v,A]=(0,i.useState)(a.open),N=i.isValidElement(n)?n:(0,r.jsx)("summary",{children:n??"Details"});return(0,r.jsxs)("details",{...a,ref:l,open:v,"data-collapsed":c,className:(0,o.A)(x,s&&p,a.className),onMouseDown:e=>{f(e.target)&&e.detail>1&&e.preventDefault()},onClick:e=>{e.stopPropagation();const n=e.target;f(n)&&g(n,l.current)&&(e.preventDefault(),c?(d(!1),A(!0)):d(!0))},children:[N,(0,r.jsx)(m.N,{lazy:!1,collapsed:c,disableSSRStyle:!0,onCollapseTransitionEnd:e=>{d(e),A(!e)},children:(0,r.jsx)("div",{className:j,children:t})})]})}const A="details_b_Ee";function N(e){let{...n}=e;return(0,r.jsx)(v,{...n,className:(0,o.A)("alert alert--info",A,n.className)})}function y(e){const n=i.Children.toArray(e.children),t=n.find((e=>i.isValidElement(e)&&"summary"===e.type)),a=(0,r.jsx)(r.Fragment,{children:n.filter((e=>e!==t))});return(0,r.jsx)(N,{...e,summary:t,children:a})}var b=t(1107);function _(e){return(0,r.jsx)(b.A,{...e})}const w="containsTaskList_mC6p";function U(e){if(void 0!==e)return(0,o.A)(e,e?.includes("contains-task-list")&&w)}const C="img_ev3q";var T=t(7293);const z={Head:s.A,details:y,Details:y,code:function(e){return function(e){return void 0!==e.children&&i.Children.toArray(e.children).every((e=>"string"==typeof e&&!e.includes("\n")))}(e)?(0,r.jsx)(c,{...e}):(0,r.jsx)(l.A,{...e})},a:function(e){return(0,r.jsx)(d.A,{...e})},pre:function(e){return(0,r.jsx)(r.Fragment,{children:e.children})},ul:function(e){return(0,r.jsx)("ul",{...e,className:U(e.className)})},li:function(e){return(0,u.A)().collectAnchor(e.id),(0,r.jsx)("li",{...e})},img:function(e){return(0,r.jsx)("img",{decoding:"async",loading:"lazy",...e,className:(n=e.className,(0,o.A)(n,C))});var n},h1:e=>(0,r.jsx)(_,{as:"h1",...e}),h2:e=>(0,r.jsx)(_,{as:"h2",...e}),h3:e=>(0,r.jsx)(_,{as:"h3",...e}),h4:e=>(0,r.jsx)(_,{as:"h4",...e}),h5:e=>(0,r.jsx)(_,{as:"h5",...e}),h6:e=>(0,r.jsx)(_,{as:"h6",...e}),admonition:T.A,mermaid:()=>null};function k(e){let{children:n}=e;return(0,r.jsx)(a.x,{components:z,children:n})}},9022:(e,n,t)=>{t.d(n,{A:()=>l});t(6540);var i=t(4164),a=t(8774),s=t(4848);function l(e){const{permalink:n,title:t,subLabel:l,isNext:r}=e;return(0,s.jsxs)(a.A,{className:(0,i.A)("pagination-nav__link",r?"pagination-nav__link--next":"pagination-nav__link--prev"),to:n,children:[l&&(0,s.jsx)("div",{className:"pagination-nav__sublabel",children:l}),(0,s.jsx)("div",{className:"pagination-nav__label",children:t})]})}},6133:(e,n,t)=>{t.d(n,{A:()=>r});t(6540);var i=t(4164),a=t(8774);const s={tag:"tag_zVej",tagRegular:"tagRegular_sFm0",tagWithCount:"tagWithCount_h2kH"};var l=t(4848);function r(e){let{permalink:n,label:t,count:r,description:c}=e;return(0,l.jsxs)(a.A,{href:n,title:c,className:(0,i.A)(s.tag,r?s.tagWithCount:s.tagRegular),children:[t,r&&(0,l.jsx)("span",{children:r})]})}},2053:(e,n,t)=>{t.d(n,{A:()=>c});t(6540);var i=t(4164),a=t(1312),s=t(6133);const l={tags:"tags_jXut",tag:"tag_QGVx"};var r=t(4848);function c(e){let{tags:n}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("b",{children:(0,r.jsx)(a.A,{id:"theme.tags.tagsListLabel",description:"The label alongside a tag list",children:"Tags:"})}),(0,r.jsx)("ul",{className:(0,i.A)(l.tags,"padding--none","margin-left--sm"),children:n.map((e=>(0,r.jsx)("li",{className:l.tag,children:(0,r.jsx)(s.A,{...e})},e.permalink)))})]})}},6266:(e,n,t)=>{t.d(n,{i:()=>a});var i=t(4586);function a(e){void 0===e&&(e={});const{i18n:{currentLocale:n}}=(0,i.A)(),t=function(){const{i18n:{currentLocale:e,localeConfigs:n}}=(0,i.A)();return n[e].calendar}();return new Intl.DateTimeFormat(n,{calendar:t,...e})}}}]); \ No newline at end of file diff --git a/assets/js/6875c492.60a17926.js b/assets/js/6875c492.1a2369d8.js similarity index 81% rename from assets/js/6875c492.60a17926.js rename to assets/js/6875c492.1a2369d8.js index c245ca5b..d158b6a3 100644 --- a/assets/js/6875c492.60a17926.js +++ b/assets/js/6875c492.1a2369d8.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[4813],{4934:(e,t,n)=>{n.d(t,{A:()=>r});n(6540);var s=n(3230),i=n(3555),a=n(4848);function r(e){const{metadata:t}=e,{previousPage:n,nextPage:r}=t;return(0,a.jsxs)("nav",{className:"pagination-nav","aria-label":(0,s.T)({id:"theme.blog.paginator.navAriaLabel",message:"Blog list page navigation",description:"The ARIA label for the blog pagination"}),children:[n&&(0,a.jsx)(i.A,{permalink:n,title:(0,a.jsx)(s.A,{id:"theme.blog.paginator.newerEntries",description:"The label used to navigate to the newer blog posts page (previous page)",children:"Newer entries"})}),r&&(0,a.jsx)(i.A,{permalink:r,title:(0,a.jsx)(s.A,{id:"theme.blog.paginator.olderEntries",description:"The label used to navigate to the older blog posts page (next page)",children:"Older entries"}),isNext:!0})]})}},4331:(e,t,n)=>{n.d(t,{A:()=>r});n(6540);var s=n(9101),i=n(8406),a=n(4848);function r(e){let{items:t,component:n=i.A}=e;return(0,a.jsx)(a.Fragment,{children:t.map((e=>{let{content:t}=e;return(0,a.jsx)(s.in,{content:t,children:(0,a.jsx)(n,{children:(0,a.jsx)(t,{})})},t.metadata.permalink)}))})}},6942:(e,t,n)=>{n.r(t),n.d(t,{default:()=>A});n(6540);var s=n(4164),i=n(3230),a=n(6644),r=n(8630),l=n(7824),o=n(4848);function c(){const{selectMessage:e}=(0,l.W)();return t=>e(t,(0,i.T)({id:"theme.blog.post.plurals",description:'Pluralized label for "{count} posts". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',message:"One post|{count} posts"},{count:t}))}function d(e){const t=c();return(0,i.T)({id:"theme.blog.tagTitle",description:"The title of the page for a blog tag",message:'{nPosts} tagged with "{tagName}"'},{nPosts:t(e.count),tagName:e.label})}var g=n(4783),u=n(6953),h=n(4934),p=n(1210),m=n(4331),x=n(8811),b=n(5225);function j(e){let{tag:t}=e;const n=d(t);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a.be,{title:n,description:t.description}),(0,o.jsx)(p.A,{tag:"blog_tags_posts"})]})}function f(e){let{tag:t,items:n,sidebar:s,listMetadata:a}=e;const r=d(t);return(0,o.jsxs)(u.A,{sidebar:s,children:[t.unlisted&&(0,o.jsx)(x.A,{}),(0,o.jsxs)("header",{className:"margin-bottom--xl",children:[(0,o.jsx)(b.A,{as:"h1",children:r}),t.description&&(0,o.jsx)("p",{children:t.description}),(0,o.jsx)(g.A,{href:t.allTagsPath,children:(0,o.jsx)(i.A,{id:"theme.tags.tagsPageLink",description:"The label of the link targeting the tag list page",children:"View All Tags"})})]}),(0,o.jsx)(m.A,{items:n}),(0,o.jsx)(h.A,{metadata:a})]})}function A(e){return(0,o.jsxs)(a.e3,{className:(0,s.A)(r.G.wrapper.blogPages,r.G.page.blogTagPostListPage),children:[(0,o.jsx)(j,{...e}),(0,o.jsx)(f,{...e})]})}},8811:(e,t,n)=>{n.d(t,{A:()=>c});n(6540);var s=n(4164),i=n(6907),a=n(8630),r=n(4182),l=n(4848);function o(e){let{className:t}=e;return(0,l.jsx)(r.A,{type:"caution",title:(0,l.jsx)(i.Rc,{}),className:(0,s.A)(t,a.G.common.unlistedBanner),children:(0,l.jsx)(i.Uh,{})})}function c(e){return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(i.AE,{}),(0,l.jsx)(o,{...e})]})}},6907:(e,t,n)=>{n.d(t,{AE:()=>o,Rc:()=>r,TT:()=>d,Uh:()=>l,Yh:()=>c});n(6540);var s=n(3230),i=n(1141),a=n(4848);function r(){return(0,a.jsx)(s.A,{id:"theme.contentVisibility.unlistedBanner.title",description:"The unlisted content banner title",children:"Unlisted page"})}function l(){return(0,a.jsx)(s.A,{id:"theme.contentVisibility.unlistedBanner.message",description:"The unlisted content banner message",children:"This page is unlisted. Search engines will not index it, and only users having a direct link can access it."})}function o(){return(0,a.jsx)(i.A,{children:(0,a.jsx)("meta",{name:"robots",content:"noindex, nofollow"})})}function c(){return(0,a.jsx)(s.A,{id:"theme.contentVisibility.draftBanner.title",description:"The draft content banner title",children:"Draft page"})}function d(){return(0,a.jsx)(s.A,{id:"theme.contentVisibility.draftBanner.message",description:"The draft content banner message",children:"This page is a draft. It will only be visible in dev and be excluded from the production build."})}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[4813],{7713:(e,t,n)=>{n.d(t,{A:()=>r});n(6540);var s=n(1312),i=n(9022),a=n(4848);function r(e){const{metadata:t}=e,{previousPage:n,nextPage:r}=t;return(0,a.jsxs)("nav",{className:"pagination-nav","aria-label":(0,s.T)({id:"theme.blog.paginator.navAriaLabel",message:"Blog list page navigation",description:"The ARIA label for the blog pagination"}),children:[n&&(0,a.jsx)(i.A,{permalink:n,title:(0,a.jsx)(s.A,{id:"theme.blog.paginator.newerEntries",description:"The label used to navigate to the newer blog posts page (previous page)",children:"Newer entries"})}),r&&(0,a.jsx)(i.A,{permalink:r,title:(0,a.jsx)(s.A,{id:"theme.blog.paginator.olderEntries",description:"The label used to navigate to the older blog posts page (next page)",children:"Older entries"}),isNext:!0})]})}},3892:(e,t,n)=>{n.d(t,{A:()=>r});n(6540);var s=n(4096),i=n(4387),a=n(4848);function r(e){let{items:t,component:n=i.A}=e;return(0,a.jsx)(a.Fragment,{children:t.map((e=>{let{content:t}=e;return(0,a.jsx)(s.in,{content:t,children:(0,a.jsx)(n,{children:(0,a.jsx)(t,{})})},t.metadata.permalink)}))})}},1086:(e,t,n)=>{n.r(t),n.d(t,{default:()=>A});n(6540);var s=n(4164),i=n(1312),a=n(1213),r=n(7559),l=n(5846),o=n(4848);function c(){const{selectMessage:e}=(0,l.W)();return t=>e(t,(0,i.T)({id:"theme.blog.post.plurals",description:'Pluralized label for "{count} posts". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',message:"One post|{count} posts"},{count:t}))}function d(e){const t=c();return(0,i.T)({id:"theme.blog.tagTitle",description:"The title of the page for a blog tag",message:'{nPosts} tagged with "{tagName}"'},{nPosts:t(e.count),tagName:e.label})}var g=n(8774),u=n(8027),h=n(7713),p=n(1463),m=n(3892),x=n(2234),b=n(1107);function j(e){let{tag:t}=e;const n=d(t);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a.be,{title:n,description:t.description}),(0,o.jsx)(p.A,{tag:"blog_tags_posts"})]})}function f(e){let{tag:t,items:n,sidebar:s,listMetadata:a}=e;const r=d(t);return(0,o.jsxs)(u.A,{sidebar:s,children:[t.unlisted&&(0,o.jsx)(x.A,{}),(0,o.jsxs)("header",{className:"margin-bottom--xl",children:[(0,o.jsx)(b.A,{as:"h1",children:r}),t.description&&(0,o.jsx)("p",{children:t.description}),(0,o.jsx)(g.A,{href:t.allTagsPath,children:(0,o.jsx)(i.A,{id:"theme.tags.tagsPageLink",description:"The label of the link targeting the tag list page",children:"View All Tags"})})]}),(0,o.jsx)(m.A,{items:n}),(0,o.jsx)(h.A,{metadata:a})]})}function A(e){return(0,o.jsxs)(a.e3,{className:(0,s.A)(r.G.wrapper.blogPages,r.G.page.blogTagPostListPage),children:[(0,o.jsx)(j,{...e}),(0,o.jsx)(f,{...e})]})}},2234:(e,t,n)=>{n.d(t,{A:()=>c});n(6540);var s=n(4164),i=n(4084),a=n(7559),r=n(7293),l=n(4848);function o(e){let{className:t}=e;return(0,l.jsx)(r.A,{type:"caution",title:(0,l.jsx)(i.Rc,{}),className:(0,s.A)(t,a.G.common.unlistedBanner),children:(0,l.jsx)(i.Uh,{})})}function c(e){return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(i.AE,{}),(0,l.jsx)(o,{...e})]})}},4084:(e,t,n)=>{n.d(t,{AE:()=>o,Rc:()=>r,TT:()=>d,Uh:()=>l,Yh:()=>c});n(6540);var s=n(1312),i=n(5260),a=n(4848);function r(){return(0,a.jsx)(s.A,{id:"theme.contentVisibility.unlistedBanner.title",description:"The unlisted content banner title",children:"Unlisted page"})}function l(){return(0,a.jsx)(s.A,{id:"theme.contentVisibility.unlistedBanner.message",description:"The unlisted content banner message",children:"This page is unlisted. Search engines will not index it, and only users having a direct link can access it."})}function o(){return(0,a.jsx)(i.A,{children:(0,a.jsx)("meta",{name:"robots",content:"noindex, nofollow"})})}function c(){return(0,a.jsx)(s.A,{id:"theme.contentVisibility.draftBanner.title",description:"The draft content banner title",children:"Draft page"})}function d(){return(0,a.jsx)(s.A,{id:"theme.contentVisibility.draftBanner.message",description:"The draft content banner message",children:"This page is a draft. It will only be visible in dev and be excluded from the production build."})}}}]); \ No newline at end of file diff --git a/assets/js/6e96288b.48e5e2fb.js b/assets/js/6e96288b.f3c8303e.js similarity index 98% rename from assets/js/6e96288b.48e5e2fb.js rename to assets/js/6e96288b.f3c8303e.js index a00c7b17..221fbca4 100644 --- a/assets/js/6e96288b.48e5e2fb.js +++ b/assets/js/6e96288b.f3c8303e.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[5457],{2738:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>a,contentTitle:()=>r,default:()=>p,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"guides/component-variants","title":"Component Variants","description":"When building a component library or an application, it is useful to define several semantic \\"flavors\\" of some components, for example a Button component that represents cancel.","source":"@site/docs/guides/component-variants.md","sourceDirName":"guides","slug":"/guides/component-variants","permalink":"/docs/guides/component-variants","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/component-variants.md","tags":[],"version":"current","frontMatter":{"id":"component-variants","title":"Component Variants"},"sidebar":"Guides","previous":{"title":"Shared Classes","permalink":"/docs/guides/shared-classes"},"next":{"title":"Server Side Rendering","permalink":"/docs/guides/ssr"}}');var s=t(4848),c=t(8453);const i={id:"component-variants",title:"Component Variants"},r=void 0,a={},l=[{value:"Defining a component variant",id:"defining-a-component-variant",level:2},{value:"Use component variants in components",id:"use-component-variants-in-components",level:2}];function d(n){const e={a:"a",admonition:"admonition",code:"code",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",...(0,c.R)(),...n.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(e.p,{children:['When building a component library or an application, it is useful to define several semantic "flavors" of some components, for example a ',(0,s.jsx)(e.code,{children:"Button"})," component that represents ",(0,s.jsx)(e.code,{children:"cancel"}),"."]}),"\n",(0,s.jsx)(e.h2,{id:"defining-a-component-variant",children:"Defining a component variant"}),"\n",(0,s.jsxs)(e.p,{children:["In your project's ",(0,s.jsx)(e.a,{href:"/docs/guides/project-commons",children:"Stylable stylesheet"})," used for the commonly used components in your project (usually named ",(0,s.jsx)(e.code,{children:"project.st.css"}),") you:"]}),"\n",(0,s.jsxs)(e.ol,{children:["\n",(0,s.jsx)(e.li,{children:"Import a component stylesheet."}),"\n",(0,s.jsxs)(e.li,{children:["Define a CSS class with a descriptive name like ",(0,s.jsx)(e.code,{children:"cancelButton"}),"."]}),"\n",(0,s.jsx)(e.li,{children:"Extend the component on the class you just defined."}),"\n"]}),"\n",(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:"language-css",metastring:'title="project.st.css"',children:'@st-import Button from "./button.st.css";\n\n.cancelButton {\n -st-extend: Button;\n color: red;\n border: 1px solid red;\n}\n'})}),"\n",(0,s.jsx)(e.h2,{id:"use-component-variants-in-components",children:"Use component variants in components"}),"\n",(0,s.jsxs)(e.p,{children:["A component ",(0,s.jsx)(e.strong,{children:"Stylable"})," stylesheet can use and extend component variants:"]}),"\n",(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:"language-css",metastring:'title="comp.st.css"',children:'@st-import [cancelButton] from "./project.st.css";\n\n/*\nselector: .comp__root .project__cancelButton.button__root\njs value: "project__cancelButton"\n*/\n.root .cancelButton {\n}\n/*\nselector: .comp__cancel.project__cancelButton.button__root\njs value: "comp__cancel project__cancelButton"\n*/\n.cancel {\n -st-extends: cancelButton;\n}\n'})}),"\n",(0,s.jsx)(e.admonition,{type:"note",children:(0,s.jsxs)(e.p,{children:["For the ",(0,s.jsx)(e.code,{children:".cancelButton"})," selector, we manually added the ",(0,s.jsx)(e.code,{children:".root"})," class to avoid overriding ",(0,s.jsx)(e.code,{children:"cancelButton"})," outside this scope."]})})]})}function p(n={}){const{wrapper:e}={...(0,c.R)(),...n.components};return e?(0,s.jsx)(e,{...n,children:(0,s.jsx)(d,{...n})}):d(n)}},8453:(n,e,t)=>{t.d(e,{R:()=>i,x:()=>r});var o=t(6540);const s={},c=o.createContext(s);function i(n){const e=o.useContext(c);return o.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function r(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(s):n.components||s:i(n.components),o.createElement(c.Provider,{value:e},n.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[5457],{9866:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>a,contentTitle:()=>r,default:()=>p,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"guides/component-variants","title":"Component Variants","description":"When building a component library or an application, it is useful to define several semantic \\"flavors\\" of some components, for example a Button component that represents cancel.","source":"@site/docs/guides/component-variants.md","sourceDirName":"guides","slug":"/guides/component-variants","permalink":"/docs/guides/component-variants","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/component-variants.md","tags":[],"version":"current","frontMatter":{"id":"component-variants","title":"Component Variants"},"sidebar":"Guides","previous":{"title":"Shared Classes","permalink":"/docs/guides/shared-classes"},"next":{"title":"Server Side Rendering","permalink":"/docs/guides/ssr"}}');var s=t(4848),c=t(8453);const i={id:"component-variants",title:"Component Variants"},r=void 0,a={},l=[{value:"Defining a component variant",id:"defining-a-component-variant",level:2},{value:"Use component variants in components",id:"use-component-variants-in-components",level:2}];function d(n){const e={a:"a",admonition:"admonition",code:"code",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",...(0,c.R)(),...n.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(e.p,{children:['When building a component library or an application, it is useful to define several semantic "flavors" of some components, for example a ',(0,s.jsx)(e.code,{children:"Button"})," component that represents ",(0,s.jsx)(e.code,{children:"cancel"}),"."]}),"\n",(0,s.jsx)(e.h2,{id:"defining-a-component-variant",children:"Defining a component variant"}),"\n",(0,s.jsxs)(e.p,{children:["In your project's ",(0,s.jsx)(e.a,{href:"/docs/guides/project-commons",children:"Stylable stylesheet"})," used for the commonly used components in your project (usually named ",(0,s.jsx)(e.code,{children:"project.st.css"}),") you:"]}),"\n",(0,s.jsxs)(e.ol,{children:["\n",(0,s.jsx)(e.li,{children:"Import a component stylesheet."}),"\n",(0,s.jsxs)(e.li,{children:["Define a CSS class with a descriptive name like ",(0,s.jsx)(e.code,{children:"cancelButton"}),"."]}),"\n",(0,s.jsx)(e.li,{children:"Extend the component on the class you just defined."}),"\n"]}),"\n",(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:"language-css",metastring:'title="project.st.css"',children:'@st-import Button from "./button.st.css";\n\n.cancelButton {\n -st-extend: Button;\n color: red;\n border: 1px solid red;\n}\n'})}),"\n",(0,s.jsx)(e.h2,{id:"use-component-variants-in-components",children:"Use component variants in components"}),"\n",(0,s.jsxs)(e.p,{children:["A component ",(0,s.jsx)(e.strong,{children:"Stylable"})," stylesheet can use and extend component variants:"]}),"\n",(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:"language-css",metastring:'title="comp.st.css"',children:'@st-import [cancelButton] from "./project.st.css";\n\n/*\nselector: .comp__root .project__cancelButton.button__root\njs value: "project__cancelButton"\n*/\n.root .cancelButton {\n}\n/*\nselector: .comp__cancel.project__cancelButton.button__root\njs value: "comp__cancel project__cancelButton"\n*/\n.cancel {\n -st-extends: cancelButton;\n}\n'})}),"\n",(0,s.jsx)(e.admonition,{type:"note",children:(0,s.jsxs)(e.p,{children:["For the ",(0,s.jsx)(e.code,{children:".cancelButton"})," selector, we manually added the ",(0,s.jsx)(e.code,{children:".root"})," class to avoid overriding ",(0,s.jsx)(e.code,{children:"cancelButton"})," outside this scope."]})})]})}function p(n={}){const{wrapper:e}={...(0,c.R)(),...n.components};return e?(0,s.jsx)(e,{...n,children:(0,s.jsx)(d,{...n})}):d(n)}},8453:(n,e,t)=>{t.d(e,{R:()=>i,x:()=>r});var o=t(6540);const s={},c=o.createContext(s);function i(n){const e=o.useContext(c);return o.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function r(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(s):n.components||s:i(n.components),o.createElement(c.Provider,{value:e},n.children)}}}]); \ No newline at end of file diff --git a/assets/js/705f3d56.5ca66cf3.js b/assets/js/705f3d56.d3a20e59.js similarity index 97% rename from assets/js/705f3d56.5ca66cf3.js rename to assets/js/705f3d56.d3a20e59.js index 377df283..56b4a717 100644 --- a/assets/js/705f3d56.5ca66cf3.js +++ b/assets/js/705f3d56.d3a20e59.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[9183],{3953:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>c,contentTitle:()=>a,default:()=>u,frontMatter:()=>l,metadata:()=>n,toc:()=>i});const n=JSON.parse('{"id":"references/using-external-assets","title":"url()","description":"Stylable supports usage of url functions to use assets as you normally would in CSS.","source":"@site/docs/references/using-external-assets.md","sourceDirName":"references","slug":"/references/using-external-assets","permalink":"/docs/references/using-external-assets","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/using-external-assets.md","tags":[],"version":"current","frontMatter":{"id":"using-external-assets","title":"url()"},"sidebar":"Specification Reference","previous":{"title":"Type Selector","permalink":"/docs/references/type-selectors"},"next":{"title":"Custom Selector","permalink":"/docs/references/custom-selectors"}}');var r=t(4848),o=t(8453);const l={id:"using-external-assets",title:"url()"},a=void 0,c={},i=[{value:"Resolving 3rd-party assets",id:"resolving-3rd-party-assets",level:3}];function d(e){const s={a:"a",code:"code",h3:"h3",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:["Stylable supports usage of ",(0,r.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/url()",children:"url functions"})," to use assets as you normally would in CSS."]}),"\n",(0,r.jsxs)(s.p,{children:["The value passed to the ",(0,r.jsx)(s.code,{children:"url()"})," function is resolved differently in CSS as comapred to the Node request resolution algorithm, used for Stylable stylesheet and symbol resolutions."]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"url()"})," function has no notion of external packages or dependencies."]}),"\n",(0,r.jsx)(s.h3,{id:"resolving-3rd-party-assets",children:"Resolving 3rd-party assets"}),"\n",(0,r.jsxs)(s.p,{children:["In order to import ",(0,r.jsx)(s.code,{children:"url()"})," assets from dependencies inside your ",(0,r.jsx)(s.code,{children:"node_modules"})," directory, Stylable supports the ",(0,r.jsx)(s.code,{children:"~"})," URL prefix."]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-css",children:'.root {\n /* resolves as the node request: "my-package/asset.png" */\n background: url(~my-package/asset.png);\n}\n\n.root {\n /* resolves as the node request: "./my-package/asset.png" */\n background: url(my-package/asset.png);\n}\n'})})]})}function u(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>l,x:()=>a});var n=t(6540);const r={},o=n.createContext(r);function l(e){const s=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),n.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[9183],{3239:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>c,contentTitle:()=>a,default:()=>u,frontMatter:()=>l,metadata:()=>n,toc:()=>i});const n=JSON.parse('{"id":"references/using-external-assets","title":"url()","description":"Stylable supports usage of url functions to use assets as you normally would in CSS.","source":"@site/docs/references/using-external-assets.md","sourceDirName":"references","slug":"/references/using-external-assets","permalink":"/docs/references/using-external-assets","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/using-external-assets.md","tags":[],"version":"current","frontMatter":{"id":"using-external-assets","title":"url()"},"sidebar":"Specification Reference","previous":{"title":"Type Selector","permalink":"/docs/references/type-selectors"},"next":{"title":"Custom Selector","permalink":"/docs/references/custom-selectors"}}');var r=t(4848),o=t(8453);const l={id:"using-external-assets",title:"url()"},a=void 0,c={},i=[{value:"Resolving 3rd-party assets",id:"resolving-3rd-party-assets",level:3}];function d(e){const s={a:"a",code:"code",h3:"h3",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:["Stylable supports usage of ",(0,r.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/url()",children:"url functions"})," to use assets as you normally would in CSS."]}),"\n",(0,r.jsxs)(s.p,{children:["The value passed to the ",(0,r.jsx)(s.code,{children:"url()"})," function is resolved differently in CSS as comapred to the Node request resolution algorithm, used for Stylable stylesheet and symbol resolutions."]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"url()"})," function has no notion of external packages or dependencies."]}),"\n",(0,r.jsx)(s.h3,{id:"resolving-3rd-party-assets",children:"Resolving 3rd-party assets"}),"\n",(0,r.jsxs)(s.p,{children:["In order to import ",(0,r.jsx)(s.code,{children:"url()"})," assets from dependencies inside your ",(0,r.jsx)(s.code,{children:"node_modules"})," directory, Stylable supports the ",(0,r.jsx)(s.code,{children:"~"})," URL prefix."]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-css",children:'.root {\n /* resolves as the node request: "my-package/asset.png" */\n background: url(~my-package/asset.png);\n}\n\n.root {\n /* resolves as the node request: "./my-package/asset.png" */\n background: url(my-package/asset.png);\n}\n'})})]})}function u(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>l,x:()=>a});var n=t(6540);const r={},o=n.createContext(r);function l(e){const s=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),n.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/7812.365924a4.js b/assets/js/7812.365924a4.js deleted file mode 100644 index 3139024b..00000000 --- a/assets/js/7812.365924a4.js +++ /dev/null @@ -1 +0,0 @@ -(()=>{"use strict";var e,r,t={7812:(e,r,t)=>{t.d(r,{AT:()=>a,BH:()=>s,IH:()=>n,sx:()=>o});t(8291);const o=!1,s=["en"],n="search-index{dir}.json?_=7622e871",a=8}},o={};function s(e){var r=o[e];if(void 0!==r)return r.exports;var n=o[e]={exports:{}};return t[e](n,n.exports,s),n.exports}s.m=t,s.x=()=>{var e=s.O(void 0,[4491],(()=>s(4491)));return e=s.O(e)},e=[],s.O=(r,t,o,n)=>{if(!t){var a=1/0;for(f=0;f<e.length;f++){t=e[f][0],o=e[f][1],n=e[f][2];for(var i=!0,p=0;p<t.length;p++)(!1&n||a>=n)&&Object.keys(s.O).every((e=>s.O[e](t[p])))?t.splice(p--,1):(i=!1,n<a&&(a=n));if(i){e.splice(f--,1);var u=o();void 0!==u&&(r=u)}}return r}n=n||0;for(var f=e.length;f>0&&e[f-1][2]>n;f--)e[f]=e[f-1];e[f]=[t,o,n]},s.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return s.d(r,{a:r}),r},s.d=(e,r)=>{for(var t in r)s.o(r,t)&&!s.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},s.f={},s.e=e=>Promise.all(Object.keys(s.f).reduce(((r,t)=>(s.f[t](e,r),r)),[])),s.u=e=>"assets/js/"+e+".82a2b9c4.js",s.miniCssF=e=>{},s.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),s.p="/",s.gca=function(e){return e={}[e]||e,s.p+s.u(e)},(()=>{var e={7812:1};s.f.i=(r,t)=>{e[r]||importScripts(s.p+s.u(r))};var r=self.webpackChunkstylable_io=self.webpackChunkstylable_io||[],t=r.push.bind(r);r.push=r=>{var o=r[0],n=r[1],a=r[2];for(var i in n)s.o(n,i)&&(s.m[i]=n[i]);for(a&&a(s);o.length;)e[o.pop()]=1;t(r)}})(),r=s.x,s.x=()=>s.e(4491).then(r);s.x()})(); \ No newline at end of file diff --git a/assets/js/79455fbf.ae5d9ea9.js b/assets/js/79455fbf.043005c4.js similarity index 99% rename from assets/js/79455fbf.ae5d9ea9.js rename to assets/js/79455fbf.043005c4.js index d444569f..c4c573fc 100644 --- a/assets/js/79455fbf.ae5d9ea9.js +++ b/assets/js/79455fbf.043005c4.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[3879],{2349:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>o,contentTitle:()=>c,default:()=>h,frontMatter:()=>r,metadata:()=>l,toc:()=>i});const l=JSON.parse('{"id":"references/class-selectors","title":"Class Selector","description":"A CSS class selector is used as a generic way to target a DOM element with a matching class name. In Stylable a CSS class is used primarily as a component part, for example a .navBtn of gallery component, but can also be used as utility class or a mixin.","source":"@site/docs/references/class-selectors.md","sourceDirName":"references","slug":"/references/class-selectors","permalink":"/docs/references/class-selectors","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/class-selectors.md","tags":[],"version":"current","frontMatter":{"id":"class-selectors","title":"Class Selector"},"sidebar":"Specification Reference","previous":{"title":"Cheatsheet","permalink":"/docs/references/cheatsheet"},"next":{"title":"Containers","permalink":"/docs/references/contains"}}');var t=n(4848),a=n(8453);const r={id:"class-selectors",title:"Class Selector"},c=void 0,o={},i=[{value:"Syntax",id:"syntax",level:2},{value:"Root",id:"root",level:2},{value:"Import and Export",id:"import-and-export",level:2},{value:"Runtime",id:"runtime",level:2},{value:"Namespace",id:"namespace",level:2},{value:"Disable in selector",id:"disable-in-selector",level:3},{value:"Map to global selector",id:"map-to-global-selector",level:3},{value:"Related",id:"related",level:2}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(s.p,{children:["A CSS ",(0,t.jsx)(s.code,{children:"class selector"})," is used as a generic way to target a DOM element with a matching ",(0,t.jsx)(s.code,{children:"class name"}),". In Stylable a CSS class is used primarily as a component part, for example a ",(0,t.jsx)(s.code,{children:".navBtn"})," of gallery component, but can also be used as utility class or a mixin."]}),"\n",(0,t.jsxs)(s.p,{children:["This page goes over how Stylable handles ",(0,t.jsx)(s.code,{children:"class selector"}),", for more details about the language feature itself, checkout the following resources:"]}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors",children:"MDN class selector"})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"https://drafts.csswg.org/selectors/#class-html",children:"class selector in spec"})}),"\n"]}),"\n",(0,t.jsx)(s.h2,{id:"syntax",children:"Syntax"}),"\n",(0,t.jsxs)(s.p,{children:["To define a ",(0,t.jsx)(s.code,{children:"class symbol"}),": set a ",(0,t.jsx)(s.code,{children:"class selector"})," anywhere in a stylesheet."]}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.strong,{children:"Standalone definition"})}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",children:".navBtn {}\n"})}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.strong,{children:"In-selector definition"})}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",children:"/* compound */\nbutton.navBtn.baseBtn {}\n\n/* multiple selectors */\n.navBtn, .thumb {}\n"})}),"\n",(0,t.jsx)(s.h2,{id:"root",children:"Root"}),"\n",(0,t.jsxs)(s.p,{children:["The ",(0,t.jsx)(s.code,{children:".root"})," class has a special meaning in Stylable stylesheets. Every stylesheet has a root to represent the root element of the component or page of the stylesheet - ",(0,t.jsx)(s.a,{href:"/docs/references/root",children:"see root reference"}),"."]}),"\n",(0,t.jsx)(s.h2,{id:"import-and-export",children:"Import and Export"}),"\n",(0,t.jsxs)(s.p,{children:["A class selector can be imported into another stylesheet with the ",(0,t.jsx)(s.a,{href:"/docs/references/imports",children:(0,t.jsx)(s.code,{children:"@st-import"})})," atrule."]}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.strong,{children:"Import class by name"})}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",children:"/* reference the navBtn class */\n@st-import [navBtn] from './gallery.st.css';\n\n/* reference multiple classes */\n@st-import [navBtn, thumb] from './gallery.st.css';\n\n/* map imported class to local name \"galleryNavBtn\" */\n@st-import [navBtn as galleryNavBtn] from './gallery.st.css';\n"})}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsxs)(s.strong,{children:["Import stylesheet ",(0,t.jsx)(s.code,{children:"root"})," class"]})}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",children:"/* get the gallery root class (default export) */\n@st-import Gallery from './gallery.st.css';\n\n/* reference the gallery named root class */\n@st-import [root as GalleryRoot] from './gallery.st.css';\n"})}),"\n",(0,t.jsx)(s.admonition,{title:"capitalize default stylesheet import",type:"caution",children:(0,t.jsxs)(s.p,{children:["While any valid ident can be used for the default root import, It is ",(0,t.jsx)(s.strong,{children:"strongly recommend"})," to capitalize the name to signify it represents a component element."]})}),"\n",(0,t.jsx)(s.h2,{id:"runtime",children:"Runtime"}),"\n",(0,t.jsxs)(s.p,{children:["A class can be accessed using the ",(0,t.jsx)(s.code,{children:"classes"})," mapping on the Stylable stylesheet runtime."]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"import { classes } from './gallery.st.css';\n\n// map from local name to target class name\nclasses.part;\nclasses.root;\nclasses['dashed-class'];\n"})}),"\n",(0,t.jsx)(s.p,{children:"Use the class mapping to bind the stylesheet to the rendered view:"}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.strong,{children:"React example"})}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"/* gallery.jsx */\nimport { st, classes } from './gallery.st.css';\n\nfunction Gallery(props) {\n return (\n <div className={st(classes.root, props.className)}>\n <button className={classes.navBtn}>next</button>\n <button className={classes.navBtn}>prev</button>\n </div>\n );\n}\n"})}),"\n",(0,t.jsx)(s.admonition,{title:"component instance customization",type:"note",children:(0,t.jsxs)(s.p,{children:["In the component example above, we call the ",(0,t.jsx)(s.a,{href:"/docs/references/runtime#st-function",children:"st() function"})," in order to pass both the gallery root class and any class name provided externally in order to style the component from the outside."]})}),"\n",(0,t.jsx)(s.h2,{id:"namespace",children:"Namespace"}),"\n",(0,t.jsxs)(s.p,{children:["Stylable automatically ",(0,t.jsx)(s.a,{href:"/docs/guides/handbook/namespacing",children:"namespaces"})," any class selector according to the stylesheet it is defined in:"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",children:".a {}\n\n/* OUTPUT */\n.NAMESPACE__a {}\n"})}),"\n",(0,t.jsx)(s.h3,{id:"disable-in-selector",children:"Disable in selector"}),"\n",(0,t.jsxs)(s.p,{children:["Wrapping a class selector with ",(0,t.jsx)(s.code,{children:":global()"})," pseudo-class prevents namespacing:"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",children:":global(.icon-heart) {}\n\n/* OUTPUT */\n.icon-heart {}\n"})}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsxs)(s.a,{href:"/docs/references/global-selectors",children:["see ",(0,t.jsx)(s.code,{children:"global selector"})," reference"]})}),"\n",(0,t.jsx)(s.h3,{id:"map-to-global-selector",children:"Map to global selector"}),"\n",(0,t.jsxs)(s.p,{children:["Class selector can be mapped to a custom global selector with the ",(0,t.jsx)(s.code,{children:"-st-global"})," declaration:"]}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.strong,{children:"Map to global class"})}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",children:".button {\n -st-global: '.myLib__button';\n}\n.button:hover {}\n\n/* OUTPUT */\n.myLib__button {}\n.myLib__button:hover {}\n"})}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.strong,{children:"Valid values"})}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",children:"/* global selector */\n.x { -st-global: '.a' }\n\n/* compound selector of multiple classes */\n.x { -st-global: '.a.b' }\n\n/* complex selector (runtime `classes.x` not exported) */\n.x { -st-global: '.a .b' }\n\n/* non class selectors (runtime `classes.x` not exported) */\n.x { -st-global: '[c]' }\n.x { -st-global: '.a[c]' }\n"})}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.strong,{children:"Invalid values"})}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",children:"/* empty selector */\n.x { -st-global: '' }\n/* only a single selector is supported */\n.x { -st-global: '.a, .b' }\n"})}),"\n",(0,t.jsx)(s.h2,{id:"related",children:"Related"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"/docs/references/pseudo-elements",children:"Style pseudo-elements"})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"/docs/references/mixins",children:"Use CSS mixins"})}),"\n"]})]})}function h(e={}){const{wrapper:s}={...(0,a.R)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>r,x:()=>c});var l=n(6540);const t={},a=l.createContext(t);function r(e){const s=l.useContext(a);return l.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function c(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),l.createElement(a.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[3879],{1819:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>o,contentTitle:()=>c,default:()=>h,frontMatter:()=>r,metadata:()=>l,toc:()=>i});const l=JSON.parse('{"id":"references/class-selectors","title":"Class Selector","description":"A CSS class selector is used as a generic way to target a DOM element with a matching class name. In Stylable a CSS class is used primarily as a component part, for example a .navBtn of gallery component, but can also be used as utility class or a mixin.","source":"@site/docs/references/class-selectors.md","sourceDirName":"references","slug":"/references/class-selectors","permalink":"/docs/references/class-selectors","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/class-selectors.md","tags":[],"version":"current","frontMatter":{"id":"class-selectors","title":"Class Selector"},"sidebar":"Specification Reference","previous":{"title":"Cheatsheet","permalink":"/docs/references/cheatsheet"},"next":{"title":"Containers","permalink":"/docs/references/contains"}}');var t=n(4848),a=n(8453);const r={id:"class-selectors",title:"Class Selector"},c=void 0,o={},i=[{value:"Syntax",id:"syntax",level:2},{value:"Root",id:"root",level:2},{value:"Import and Export",id:"import-and-export",level:2},{value:"Runtime",id:"runtime",level:2},{value:"Namespace",id:"namespace",level:2},{value:"Disable in selector",id:"disable-in-selector",level:3},{value:"Map to global selector",id:"map-to-global-selector",level:3},{value:"Related",id:"related",level:2}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(s.p,{children:["A CSS ",(0,t.jsx)(s.code,{children:"class selector"})," is used as a generic way to target a DOM element with a matching ",(0,t.jsx)(s.code,{children:"class name"}),". In Stylable a CSS class is used primarily as a component part, for example a ",(0,t.jsx)(s.code,{children:".navBtn"})," of gallery component, but can also be used as utility class or a mixin."]}),"\n",(0,t.jsxs)(s.p,{children:["This page goes over how Stylable handles ",(0,t.jsx)(s.code,{children:"class selector"}),", for more details about the language feature itself, checkout the following resources:"]}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors",children:"MDN class selector"})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"https://drafts.csswg.org/selectors/#class-html",children:"class selector in spec"})}),"\n"]}),"\n",(0,t.jsx)(s.h2,{id:"syntax",children:"Syntax"}),"\n",(0,t.jsxs)(s.p,{children:["To define a ",(0,t.jsx)(s.code,{children:"class symbol"}),": set a ",(0,t.jsx)(s.code,{children:"class selector"})," anywhere in a stylesheet."]}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.strong,{children:"Standalone definition"})}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",children:".navBtn {}\n"})}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.strong,{children:"In-selector definition"})}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",children:"/* compound */\nbutton.navBtn.baseBtn {}\n\n/* multiple selectors */\n.navBtn, .thumb {}\n"})}),"\n",(0,t.jsx)(s.h2,{id:"root",children:"Root"}),"\n",(0,t.jsxs)(s.p,{children:["The ",(0,t.jsx)(s.code,{children:".root"})," class has a special meaning in Stylable stylesheets. Every stylesheet has a root to represent the root element of the component or page of the stylesheet - ",(0,t.jsx)(s.a,{href:"/docs/references/root",children:"see root reference"}),"."]}),"\n",(0,t.jsx)(s.h2,{id:"import-and-export",children:"Import and Export"}),"\n",(0,t.jsxs)(s.p,{children:["A class selector can be imported into another stylesheet with the ",(0,t.jsx)(s.a,{href:"/docs/references/imports",children:(0,t.jsx)(s.code,{children:"@st-import"})})," atrule."]}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.strong,{children:"Import class by name"})}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",children:"/* reference the navBtn class */\n@st-import [navBtn] from './gallery.st.css';\n\n/* reference multiple classes */\n@st-import [navBtn, thumb] from './gallery.st.css';\n\n/* map imported class to local name \"galleryNavBtn\" */\n@st-import [navBtn as galleryNavBtn] from './gallery.st.css';\n"})}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsxs)(s.strong,{children:["Import stylesheet ",(0,t.jsx)(s.code,{children:"root"})," class"]})}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",children:"/* get the gallery root class (default export) */\n@st-import Gallery from './gallery.st.css';\n\n/* reference the gallery named root class */\n@st-import [root as GalleryRoot] from './gallery.st.css';\n"})}),"\n",(0,t.jsx)(s.admonition,{title:"capitalize default stylesheet import",type:"caution",children:(0,t.jsxs)(s.p,{children:["While any valid ident can be used for the default root import, It is ",(0,t.jsx)(s.strong,{children:"strongly recommend"})," to capitalize the name to signify it represents a component element."]})}),"\n",(0,t.jsx)(s.h2,{id:"runtime",children:"Runtime"}),"\n",(0,t.jsxs)(s.p,{children:["A class can be accessed using the ",(0,t.jsx)(s.code,{children:"classes"})," mapping on the Stylable stylesheet runtime."]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"import { classes } from './gallery.st.css';\n\n// map from local name to target class name\nclasses.part;\nclasses.root;\nclasses['dashed-class'];\n"})}),"\n",(0,t.jsx)(s.p,{children:"Use the class mapping to bind the stylesheet to the rendered view:"}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.strong,{children:"React example"})}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"/* gallery.jsx */\nimport { st, classes } from './gallery.st.css';\n\nfunction Gallery(props) {\n return (\n <div className={st(classes.root, props.className)}>\n <button className={classes.navBtn}>next</button>\n <button className={classes.navBtn}>prev</button>\n </div>\n );\n}\n"})}),"\n",(0,t.jsx)(s.admonition,{title:"component instance customization",type:"note",children:(0,t.jsxs)(s.p,{children:["In the component example above, we call the ",(0,t.jsx)(s.a,{href:"/docs/references/runtime#st-function",children:"st() function"})," in order to pass both the gallery root class and any class name provided externally in order to style the component from the outside."]})}),"\n",(0,t.jsx)(s.h2,{id:"namespace",children:"Namespace"}),"\n",(0,t.jsxs)(s.p,{children:["Stylable automatically ",(0,t.jsx)(s.a,{href:"/docs/guides/handbook/namespacing",children:"namespaces"})," any class selector according to the stylesheet it is defined in:"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",children:".a {}\n\n/* OUTPUT */\n.NAMESPACE__a {}\n"})}),"\n",(0,t.jsx)(s.h3,{id:"disable-in-selector",children:"Disable in selector"}),"\n",(0,t.jsxs)(s.p,{children:["Wrapping a class selector with ",(0,t.jsx)(s.code,{children:":global()"})," pseudo-class prevents namespacing:"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",children:":global(.icon-heart) {}\n\n/* OUTPUT */\n.icon-heart {}\n"})}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsxs)(s.a,{href:"/docs/references/global-selectors",children:["see ",(0,t.jsx)(s.code,{children:"global selector"})," reference"]})}),"\n",(0,t.jsx)(s.h3,{id:"map-to-global-selector",children:"Map to global selector"}),"\n",(0,t.jsxs)(s.p,{children:["Class selector can be mapped to a custom global selector with the ",(0,t.jsx)(s.code,{children:"-st-global"})," declaration:"]}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.strong,{children:"Map to global class"})}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",children:".button {\n -st-global: '.myLib__button';\n}\n.button:hover {}\n\n/* OUTPUT */\n.myLib__button {}\n.myLib__button:hover {}\n"})}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.strong,{children:"Valid values"})}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",children:"/* global selector */\n.x { -st-global: '.a' }\n\n/* compound selector of multiple classes */\n.x { -st-global: '.a.b' }\n\n/* complex selector (runtime `classes.x` not exported) */\n.x { -st-global: '.a .b' }\n\n/* non class selectors (runtime `classes.x` not exported) */\n.x { -st-global: '[c]' }\n.x { -st-global: '.a[c]' }\n"})}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.strong,{children:"Invalid values"})}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",children:"/* empty selector */\n.x { -st-global: '' }\n/* only a single selector is supported */\n.x { -st-global: '.a, .b' }\n"})}),"\n",(0,t.jsx)(s.h2,{id:"related",children:"Related"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"/docs/references/pseudo-elements",children:"Style pseudo-elements"})}),"\n",(0,t.jsx)(s.li,{children:(0,t.jsx)(s.a,{href:"/docs/references/mixins",children:"Use CSS mixins"})}),"\n"]})]})}function h(e={}){const{wrapper:s}={...(0,a.R)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>r,x:()=>c});var l=n(6540);const t={},a=l.createContext(t);function r(e){const s=l.useContext(a);return l.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function c(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),l.createElement(a.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/7df4dfbf.5b189963.js b/assets/js/7df4dfbf.b9fac3b2.js similarity index 97% rename from assets/js/7df4dfbf.5b189963.js rename to assets/js/7df4dfbf.b9fac3b2.js index f46a7936..cc8963c6 100644 --- a/assets/js/7df4dfbf.5b189963.js +++ b/assets/js/7df4dfbf.b9fac3b2.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[2670],{9662:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>r,default:()=>h,frontMatter:()=>c,metadata:()=>i,toc:()=>a});const i=JSON.parse('{"id":"attributions","title":"Attributions","description":"Landing Page Images","source":"@site/docs/attributions.md","sourceDirName":".","slug":"/attributions","permalink":"/docs/attributions","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/attributions.md","tags":[],"version":"current","frontMatter":{"id":"attributions","title":"Attributions","hide_table_of_contents":true}}');var o=n(4848),s=n(8453);const c={id:"attributions",title:"Attributions",hide_table_of_contents:!0},r=void 0,l={},a=[{value:"Landing Page Images",id:"landing-page-images",level:2}];function d(e){const t={a:"a",h2:"h2",li:"li",p:"p",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h2,{id:"landing-page-images",children:"Landing Page Images"}),"\n",(0,o.jsx)(t.p,{children:"The following images have been used in the landing page."}),"\n",(0,o.jsx)(t.p,{children:"Icons made by Freepik"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://www.flaticon.com/free-icon/api_921573",children:"https://www.flaticon.com/free-icon/api_921573"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://www.flaticon.com/free-icon/stethoscope_1012652",children:"https://www.flaticon.com/free-icon/stethoscope_1012652"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://www.flaticon.com/free-icon/tool_3964296",children:"https://www.flaticon.com/free-icon/tool_3964296"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://www.flaticon.com/free-icon/web-design_781642",children:"https://www.flaticon.com/free-icon/web-design_781642"})}),"\n"]}),"\n",(0,o.jsx)(t.p,{children:"Icons made by Eucalyp"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://www.flaticon.com/free-icon/checklist_2753153",children:"https://www.flaticon.com/free-icon/checklist_2753153"})}),"\n"]}),"\n",(0,o.jsx)(t.p,{children:"Icons made by wanicon"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://www.flaticon.com/free-icon/prototype_2421271",children:"https://www.flaticon.com/free-icon/prototype_2421271"})}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>c,x:()=>r});var i=n(6540);const o={},s=i.createContext(o);function c(e){const t=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),i.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[2670],{1564:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>r,default:()=>h,frontMatter:()=>c,metadata:()=>i,toc:()=>a});const i=JSON.parse('{"id":"attributions","title":"Attributions","description":"Landing Page Images","source":"@site/docs/attributions.md","sourceDirName":".","slug":"/attributions","permalink":"/docs/attributions","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/attributions.md","tags":[],"version":"current","frontMatter":{"id":"attributions","title":"Attributions","hide_table_of_contents":true}}');var o=n(4848),s=n(8453);const c={id:"attributions",title:"Attributions",hide_table_of_contents:!0},r=void 0,l={},a=[{value:"Landing Page Images",id:"landing-page-images",level:2}];function d(e){const t={a:"a",h2:"h2",li:"li",p:"p",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h2,{id:"landing-page-images",children:"Landing Page Images"}),"\n",(0,o.jsx)(t.p,{children:"The following images have been used in the landing page."}),"\n",(0,o.jsx)(t.p,{children:"Icons made by Freepik"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://www.flaticon.com/free-icon/api_921573",children:"https://www.flaticon.com/free-icon/api_921573"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://www.flaticon.com/free-icon/stethoscope_1012652",children:"https://www.flaticon.com/free-icon/stethoscope_1012652"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://www.flaticon.com/free-icon/tool_3964296",children:"https://www.flaticon.com/free-icon/tool_3964296"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://www.flaticon.com/free-icon/web-design_781642",children:"https://www.flaticon.com/free-icon/web-design_781642"})}),"\n"]}),"\n",(0,o.jsx)(t.p,{children:"Icons made by Eucalyp"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://www.flaticon.com/free-icon/checklist_2753153",children:"https://www.flaticon.com/free-icon/checklist_2753153"})}),"\n"]}),"\n",(0,o.jsx)(t.p,{children:"Icons made by wanicon"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://www.flaticon.com/free-icon/prototype_2421271",children:"https://www.flaticon.com/free-icon/prototype_2421271"})}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>c,x:()=>r});var i=n(6540);const o={},s=i.createContext(o);function c(e){const t=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),i.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/825e4603.d8f06ee4.js b/assets/js/825e4603.55187120.js similarity index 99% rename from assets/js/825e4603.d8f06ee4.js rename to assets/js/825e4603.55187120.js index e71c6c1d..801d1939 100644 --- a/assets/js/825e4603.d8f06ee4.js +++ b/assets/js/825e4603.55187120.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[1026],{5926:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>i,contentTitle:()=>c,default:()=>p,frontMatter:()=>l,metadata:()=>t,toc:()=>o});const t=JSON.parse('{"id":"references/runtime","title":"Runtime","description":"Imported Stylable stylesheets in JavaScript contain minimal runtime code to help define the structure and state of the component.","source":"@site/docs/references/runtime.md","sourceDirName":"references","slug":"/references/runtime","permalink":"/docs/references/runtime","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/runtime.md","tags":[],"version":"current","frontMatter":{"id":"runtime","title":"Runtime"},"sidebar":"Specification Reference","previous":{"title":"Variables","permalink":"/docs/references/st-variables"},"next":{"title":"Programmatic API","permalink":"/docs/references/programmatic-api"}}');var a=n(4848),r=n(8453);const l={id:"runtime",title:"Runtime"},c=void 0,i={},o=[{value:"Manual mapping",id:"manual-mapping",level:2},{value:"Build vars",id:"build-vars",level:2},{value:"<code>st()</code> function",id:"st-function",level:2},{value:"Custom state mapping",id:"custom-state-mapping",level:2}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(s.p,{children:"Imported Stylable stylesheets in JavaScript contain minimal runtime code to help define the structure and state of the component."}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:'/* index.jsx - stylesheet runtime api */\nimport {\n st, // runtime utility function\n classes, // class mapping\n vars, // custom properties mapping\n stVars, // stylable build-time variable values\n cssStates, // utility function for setting stylable states\n keyframes, // keyframes mapping\n layers // layer mapping\n containers,// container mapping\n} from "style.st.css";\n'})}),"\n",(0,a.jsx)(s.h2,{id:"manual-mapping",children:"Manual mapping"}),"\n",(0,a.jsx)(s.p,{children:"Any namespaced symbols, defined in the stylesheet, are exposed on maps from their local name to their target namespaced name:"}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:'import { classes, vars, keyframes, layers, containers } from \'style.st.css\';\n\n// class\nclasses.root; // "style__root"\nclasses.label; // "style__label"\nclasses.icon; // "style__icon"\nclasses[\'dashed-part\']; // "style__dashed-part"\n\n// custom property\nvars.color1 // "--style-color1"\n\n// keyframes\nkeyframes.slide // "style__slide"\n\n// layers\nlayers.theme // "style__theme"\n\n// containers\ncontainers.panel // "style__panel"\n'})}),"\n",(0,a.jsx)(s.admonition,{type:"note",children:(0,a.jsxs)(s.p,{children:["The ",(0,a.jsx)(s.a,{href:"/docs/references/root",children:"root class"})," is available even when it is not explicitly defined in the stylesheet."]})}),"\n",(0,a.jsx)(s.h2,{id:"build-vars",children:"Build vars"}),"\n",(0,a.jsxs)(s.p,{children:["Local stylesheet ",(0,a.jsx)(s.a,{href:"/docs/references/st-variables",children:"build vars"})," are exported with their set value."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:":vars {\n bg: black;\n color: gold;\n}\n"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:'import { stVars } from \'style.st.css\';\n\nstVars.bg; // "black"\nstVars.color; // "gold"\n'})}),"\n",(0,a.jsxs)(s.h2,{id:"st-function",children:[(0,a.jsx)(s.code,{children:"st()"})," function"]}),"\n",(0,a.jsxs)(s.p,{children:["A utility function for concatenating ",(0,a.jsx)(s.a,{href:"/docs/references/class-selectors",children:"classes"})," and activating ",(0,a.jsx)(s.a,{href:"/docs/references/pseudo-classes",children:"custom states"}),"."]}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsxs)(s.li,{children:["the optional ",(0,a.jsx)(s.strong,{children:"second argument"})," can receive either a state activation or another class to concatenate"]}),"\n",(0,a.jsx)(s.li,{children:"multiple classes can be added with additional arguments"}),"\n"]}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"Multiple classes"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:"import { st, classes } from 'style.st.css';\n\n// namespaced part class + additional class\nst(classes.part, 'additional'); // \"style__part additional\"\n\n// namespaced part class + multiple classes\nst(classes.part, 'a', 'b', 'c'); // \"style__part a b c\"\n\n// undefined is ignored\nst(classes.part, 'a', undefined, 'c'); // \"style__part a c\"\n"})}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"State activation"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:'import { st, classes } from \'style.st.css\';\n\n// namespaced a + isOn boolean state\nst(classes.a, { isOn: true }); // "style__a style--isOn"\n\n// namespaced a + multiple states\nst(classes.a, { x: true, y: false }); // "style__a style--x"\n\n// namespaced a + parameter\nst(classes.a, { rank: \'first\' }); // "style__a style--rank-5-first"\n'})}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"State activation + additional classes"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:"import { st, classes } from 'style.st.css';\n\n// namespaced a + isOn state + x class\nst(classes.a, { isOn: true }, 'x'); // \"style__a style--isOn x\"\n"})}),"\n",(0,a.jsx)(s.h2,{id:"custom-state-mapping",children:"Custom state mapping"}),"\n",(0,a.jsxs)(s.p,{children:["The ",(0,a.jsx)(s.code,{children:"cssStates"})," function can be used to produce just the active ",(0,a.jsx)(s.a,{href:"/docs/references/pseudo-classes",children:"custom state"})," classes."]}),"\n",(0,a.jsx)(s.p,{children:"The function accepts a map of local state names and generates a string with concatenated class names used to mark the element's state."}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:'import { cssStates } from \'style.st.css\';\n\n// single state\ncssStates({ selected: true }); // "style--selected"\n\n// un-active state\ncssStates({ selected: false }); // ""\n\n// string/enum state\ncssStates({ rank: \'first\' }); // "style--rank-5-first"\n\n// multiple states\ncssStates({ a: true, b: false, c: true }); // "a c"\n'})})]})}function p(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>l,x:()=>c});var t=n(6540);const a={},r=t.createContext(a);function l(e){const s=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function c(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:l(e.components),t.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[1026],{1179:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>i,contentTitle:()=>c,default:()=>p,frontMatter:()=>l,metadata:()=>t,toc:()=>o});const t=JSON.parse('{"id":"references/runtime","title":"Runtime","description":"Imported Stylable stylesheets in JavaScript contain minimal runtime code to help define the structure and state of the component.","source":"@site/docs/references/runtime.md","sourceDirName":"references","slug":"/references/runtime","permalink":"/docs/references/runtime","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/runtime.md","tags":[],"version":"current","frontMatter":{"id":"runtime","title":"Runtime"},"sidebar":"Specification Reference","previous":{"title":"Variables","permalink":"/docs/references/st-variables"},"next":{"title":"Programmatic API","permalink":"/docs/references/programmatic-api"}}');var a=n(4848),r=n(8453);const l={id:"runtime",title:"Runtime"},c=void 0,i={},o=[{value:"Manual mapping",id:"manual-mapping",level:2},{value:"Build vars",id:"build-vars",level:2},{value:"<code>st()</code> function",id:"st-function",level:2},{value:"Custom state mapping",id:"custom-state-mapping",level:2}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(s.p,{children:"Imported Stylable stylesheets in JavaScript contain minimal runtime code to help define the structure and state of the component."}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:'/* index.jsx - stylesheet runtime api */\nimport {\n st, // runtime utility function\n classes, // class mapping\n vars, // custom properties mapping\n stVars, // stylable build-time variable values\n cssStates, // utility function for setting stylable states\n keyframes, // keyframes mapping\n layers // layer mapping\n containers,// container mapping\n} from "style.st.css";\n'})}),"\n",(0,a.jsx)(s.h2,{id:"manual-mapping",children:"Manual mapping"}),"\n",(0,a.jsx)(s.p,{children:"Any namespaced symbols, defined in the stylesheet, are exposed on maps from their local name to their target namespaced name:"}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:'import { classes, vars, keyframes, layers, containers } from \'style.st.css\';\n\n// class\nclasses.root; // "style__root"\nclasses.label; // "style__label"\nclasses.icon; // "style__icon"\nclasses[\'dashed-part\']; // "style__dashed-part"\n\n// custom property\nvars.color1 // "--style-color1"\n\n// keyframes\nkeyframes.slide // "style__slide"\n\n// layers\nlayers.theme // "style__theme"\n\n// containers\ncontainers.panel // "style__panel"\n'})}),"\n",(0,a.jsx)(s.admonition,{type:"note",children:(0,a.jsxs)(s.p,{children:["The ",(0,a.jsx)(s.a,{href:"/docs/references/root",children:"root class"})," is available even when it is not explicitly defined in the stylesheet."]})}),"\n",(0,a.jsx)(s.h2,{id:"build-vars",children:"Build vars"}),"\n",(0,a.jsxs)(s.p,{children:["Local stylesheet ",(0,a.jsx)(s.a,{href:"/docs/references/st-variables",children:"build vars"})," are exported with their set value."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:":vars {\n bg: black;\n color: gold;\n}\n"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:'import { stVars } from \'style.st.css\';\n\nstVars.bg; // "black"\nstVars.color; // "gold"\n'})}),"\n",(0,a.jsxs)(s.h2,{id:"st-function",children:[(0,a.jsx)(s.code,{children:"st()"})," function"]}),"\n",(0,a.jsxs)(s.p,{children:["A utility function for concatenating ",(0,a.jsx)(s.a,{href:"/docs/references/class-selectors",children:"classes"})," and activating ",(0,a.jsx)(s.a,{href:"/docs/references/pseudo-classes",children:"custom states"}),"."]}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsxs)(s.li,{children:["the optional ",(0,a.jsx)(s.strong,{children:"second argument"})," can receive either a state activation or another class to concatenate"]}),"\n",(0,a.jsx)(s.li,{children:"multiple classes can be added with additional arguments"}),"\n"]}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"Multiple classes"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:"import { st, classes } from 'style.st.css';\n\n// namespaced part class + additional class\nst(classes.part, 'additional'); // \"style__part additional\"\n\n// namespaced part class + multiple classes\nst(classes.part, 'a', 'b', 'c'); // \"style__part a b c\"\n\n// undefined is ignored\nst(classes.part, 'a', undefined, 'c'); // \"style__part a c\"\n"})}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"State activation"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:'import { st, classes } from \'style.st.css\';\n\n// namespaced a + isOn boolean state\nst(classes.a, { isOn: true }); // "style__a style--isOn"\n\n// namespaced a + multiple states\nst(classes.a, { x: true, y: false }); // "style__a style--x"\n\n// namespaced a + parameter\nst(classes.a, { rank: \'first\' }); // "style__a style--rank-5-first"\n'})}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"State activation + additional classes"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:"import { st, classes } from 'style.st.css';\n\n// namespaced a + isOn state + x class\nst(classes.a, { isOn: true }, 'x'); // \"style__a style--isOn x\"\n"})}),"\n",(0,a.jsx)(s.h2,{id:"custom-state-mapping",children:"Custom state mapping"}),"\n",(0,a.jsxs)(s.p,{children:["The ",(0,a.jsx)(s.code,{children:"cssStates"})," function can be used to produce just the active ",(0,a.jsx)(s.a,{href:"/docs/references/pseudo-classes",children:"custom state"})," classes."]}),"\n",(0,a.jsx)(s.p,{children:"The function accepts a map of local state names and generates a string with concatenated class names used to mark the element's state."}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:'import { cssStates } from \'style.st.css\';\n\n// single state\ncssStates({ selected: true }); // "style--selected"\n\n// un-active state\ncssStates({ selected: false }); // ""\n\n// string/enum state\ncssStates({ rank: \'first\' }); // "style--rank-5-first"\n\n// multiple states\ncssStates({ a: true, b: false, c: true }); // "a c"\n'})})]})}function p(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>l,x:()=>c});var t=n(6540);const a={},r=t.createContext(a);function l(e){const s=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function c(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:l(e.components),t.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/866f0f84.584ec891.js b/assets/js/866f0f84.31688e7e.js similarity index 97% rename from assets/js/866f0f84.584ec891.js rename to assets/js/866f0f84.31688e7e.js index ae418f6b..23c61ecf 100644 --- a/assets/js/866f0f84.584ec891.js +++ b/assets/js/866f0f84.31688e7e.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[2619],{8403:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>a,contentTitle:()=>i,default:()=>m,frontMatter:()=>r,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"guides/project-commons","title":"Project Commons","description":"The goal of the project file is to contain the CSS commons for the project, including variables, component variants and shared classes.","source":"@site/docs/guides/project-commons.md","sourceDirName":"guides","slug":"/guides/project-commons","permalink":"/docs/guides/project-commons","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/project-commons.md","tags":[],"version":"current","frontMatter":{"id":"project-commons","title":"Project Commons"},"sidebar":"Guides","previous":{"title":"Component Best Practices","permalink":"/docs/guides/component-best-practices"},"next":{"title":"Shared Classes","permalink":"/docs/guides/shared-classes"}}');var t=s(4848),c=s(8453);const r={id:"project-commons",title:"Project Commons"},i=void 0,a={},l=[];function d(e){const n={a:"a",admonition:"admonition",code:"code",li:"li",p:"p",pre:"pre",ul:"ul",...(0,c.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["The goal of the project file is to contain the CSS commons for the project, including ",(0,t.jsx)(n.a,{href:"/docs/references/st-variables",children:"variables"}),", ",(0,t.jsx)(n.a,{href:"/docs/guides/component-variants",children:"component variants"})," and ",(0,t.jsx)(n.a,{href:"/docs/guides/shared-classes",children:"shared classes"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"In the following code, you can see a project with:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"2 color, 2 font and 1 spacing size variables"}),"\n",(0,t.jsxs)(n.li,{children:["1 ",(0,t.jsx)(n.code,{children:"Button"})," component variant named ",(0,t.jsx)(n.code,{children:"cancelButton"})]}),"\n",(0,t.jsxs)(n.li,{children:["1 shared class for ",(0,t.jsx)(n.code,{children:"emphasisBox"})]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-css",metastring:'title="project.st.css"',children:':vars {\n color1: #f012be;\n color2: #ff4136;\n fontbig: 2rem;\n fontsmall: 1rem;\n spacing: 6px;\n}\n@st-import Button from "./button/button.st.css";\n\n.cancelButton {\n -st-extends: Button;\n}\n.emphasisBox {}\n'})}),"\n",(0,t.jsx)(n.admonition,{type:"tip",children:(0,t.jsxs)(n.p,{children:["We recommend calling the project commons file ",(0,t.jsx)(n.code,{children:"project.st.css"}),"."]})})]})}function m(e={}){const{wrapper:n}={...(0,c.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>r,x:()=>i});var o=s(6540);const t={},c=o.createContext(t);function r(e){const n=o.useContext(c);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),o.createElement(c.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[2619],{1872:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>a,contentTitle:()=>i,default:()=>m,frontMatter:()=>r,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"guides/project-commons","title":"Project Commons","description":"The goal of the project file is to contain the CSS commons for the project, including variables, component variants and shared classes.","source":"@site/docs/guides/project-commons.md","sourceDirName":"guides","slug":"/guides/project-commons","permalink":"/docs/guides/project-commons","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/project-commons.md","tags":[],"version":"current","frontMatter":{"id":"project-commons","title":"Project Commons"},"sidebar":"Guides","previous":{"title":"Component Best Practices","permalink":"/docs/guides/component-best-practices"},"next":{"title":"Shared Classes","permalink":"/docs/guides/shared-classes"}}');var t=s(4848),c=s(8453);const r={id:"project-commons",title:"Project Commons"},i=void 0,a={},l=[];function d(e){const n={a:"a",admonition:"admonition",code:"code",li:"li",p:"p",pre:"pre",ul:"ul",...(0,c.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["The goal of the project file is to contain the CSS commons for the project, including ",(0,t.jsx)(n.a,{href:"/docs/references/st-variables",children:"variables"}),", ",(0,t.jsx)(n.a,{href:"/docs/guides/component-variants",children:"component variants"})," and ",(0,t.jsx)(n.a,{href:"/docs/guides/shared-classes",children:"shared classes"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"In the following code, you can see a project with:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"2 color, 2 font and 1 spacing size variables"}),"\n",(0,t.jsxs)(n.li,{children:["1 ",(0,t.jsx)(n.code,{children:"Button"})," component variant named ",(0,t.jsx)(n.code,{children:"cancelButton"})]}),"\n",(0,t.jsxs)(n.li,{children:["1 shared class for ",(0,t.jsx)(n.code,{children:"emphasisBox"})]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-css",metastring:'title="project.st.css"',children:':vars {\n color1: #f012be;\n color2: #ff4136;\n fontbig: 2rem;\n fontsmall: 1rem;\n spacing: 6px;\n}\n@st-import Button from "./button/button.st.css";\n\n.cancelButton {\n -st-extends: Button;\n}\n.emphasisBox {}\n'})}),"\n",(0,t.jsx)(n.admonition,{type:"tip",children:(0,t.jsxs)(n.p,{children:["We recommend calling the project commons file ",(0,t.jsx)(n.code,{children:"project.st.css"}),"."]})})]})}function m(e={}){const{wrapper:n}={...(0,c.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>r,x:()=>i});var o=s(6540);const t={},c=o.createContext(t);function r(e){const n=o.useContext(c);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),o.createElement(c.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/89bbbeae.a5f1201d.js b/assets/js/89bbbeae.38c1abf6.js similarity index 99% rename from assets/js/89bbbeae.a5f1201d.js rename to assets/js/89bbbeae.38c1abf6.js index 0997419f..60d79383 100644 --- a/assets/js/89bbbeae.a5f1201d.js +++ b/assets/js/89bbbeae.38c1abf6.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[4715],{7190:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>t,contentTitle:()=>o,default:()=>x,frontMatter:()=>l,metadata:()=>s,toc:()=>c});const s=JSON.parse('{"id":"references/mixins","title":"Mixins","description":"Stylable mixins enable you to reuse complex styles and CSS behaviors, defined in CSS or Javascript, and apply them to any style-rule during build time.","source":"@site/docs/references/mixins.md","sourceDirName":"references","slug":"/references/mixins","permalink":"/docs/references/mixins","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/mixins.md","tags":[],"version":"current","frontMatter":{"id":"mixins","title":"Mixins"},"sidebar":"Specification Reference","previous":{"title":"Formatters","permalink":"/docs/references/formatters"},"next":{"title":"Variables","permalink":"/docs/references/st-variables"}}');var r=i(4848),a=i(8453);const l={id:"mixins",title:"Mixins"},o=void 0,t={},c=[{value:"CSS mixins",id:"css-mixins",level:2},{value:"Variable overrides",id:"variable-overrides",level:3},{value:"Partial CSS mixins",id:"partial-css-mixins",level:2},{value:"Example",id:"example",level:4},{value:"Example",id:"example-1",level:4},{value:"JavaScript mixins",id:"javascript-mixins",level:2},{value:"Create multiple style-rules",id:"create-multiple-style-rules",level:3},{value:"How mixins are applied",id:"how-mixins-are-applied",level:2},{value:"Considerations when using mixins",id:"considerations-when-using-mixins",level:2},{value:"Escape special characters",id:"escape-special-characters",level:3},{value:"Circular references",id:"circular-references",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Stylable"})," mixins enable you to reuse complex styles and CSS behaviors, defined in CSS or Javascript, and apply them to any style-rule during build time."]}),"\n",(0,r.jsx)(n.p,{children:"Here are some examples of when you can use mixins:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Presets/Variants - create reusable pieces of styling CSS"}),"\n",(0,r.jsx)(n.li,{children:"Layouts - easily describe complex layouts"}),"\n",(0,r.jsx)(n.li,{children:"Effects - easily describe complex effects"}),"\n",(0,r.jsx)(n.li,{children:"Macros - use code to define the CSS macros you need"}),"\n"]}),"\n",(0,r.jsx)(n.admonition,{type:"tip",children:(0,r.jsxs)(n.p,{children:["If you need to return only a single declaration value using code, we recommend instead using ",(0,r.jsx)(n.a,{href:"/docs/references/formatters",children:"formatters"}),"."]})}),"\n",(0,r.jsx)(n.h2,{id:"css-mixins",children:"CSS mixins"}),"\n",(0,r.jsxs)(n.p,{children:["Any CSS stylesheet, class or element that is defined in a ",(0,r.jsx)(n.strong,{children:"Stylable"})," CSS file can be used as a mixin source. You can use either a local class or element, or import the mixin from a different stylesheet."]}),"\n",(0,r.jsx)(n.p,{children:"In the following example, a locally defined class is used as a mixin in the same stylesheet."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:".style-mixin {\n color: green;\n background: yellow;\n}\n.someClass {\n -st-mixin: style-mixin;\n}\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* CSS output */\n.someClass {\n color: green; /* from local mixin */\n background: yellow; /* from local mixin */\n}\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Here is an example of a ",(0,r.jsx)(n.strong,{children:"Stylable"})," CSS file that is imported and mixed into the classes of a different stylesheet. The ",(0,r.jsx)(n.code,{children:".rootMixedIn"})," class as a stylesheet and ",(0,r.jsx)(n.code,{children:"classMixedIn"})," as a class."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* mixins.st.css */\n.root {\n color: purple;\n}\n\n.someClass {\n color: green;\n}\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:'/* example.st.css - imports the above mixin */\n@st-import MixRoot, [someClass] from "./mixins.st.css";\n\n.rootMixedIn {\n -st-mixin: MixRoot; /* stylesheet mixin */\n}\n\n.classMixedIn {\n -st-mixin: someClass; /* class mixin */\n}\n'})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* CSS output */\n.rootMixedIn {\n color: purple; /* from stylesheet mixin */\n}\n\n.rootMixedIn .someClass {\n /* ruleset added as a result of the stylesheet mixin */\n color: green;\n}\n\n.classMixedIn {\n color: green; /* from class mixin */\n}\n"})}),"\n",(0,r.jsx)(n.h3,{id:"variable-overrides",children:"Variable overrides"}),"\n",(0,r.jsx)(n.p,{children:"CSS mixins can accept named parameters in the following format:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"mixin(variableName valueOverride, variableName2 valueOverride2)\n"})}),"\n",(0,r.jsx)(n.p,{children:"Multiple variables can be comma separated or written on multiple lines:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"mixin (\n variableName valueOverride,\n variableName2 valueOverride2\n)\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Using parameters in a mixin enables you to override specific ",(0,r.jsx)(n.a,{href:"/docs/references/st-variables",children:"variables"})," inside of a mixin before they are applied."]}),"\n",(0,r.jsx)(n.p,{children:"Here is an example of using a variable in a CSS mixin and how it can be overridden by the mixin's parameter value."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:":vars {\n color1: green;\n}\n\n.classToMixin {\n background: value(color1);\n}\n\n.targetClass {\n -st-mixin: classToMixin(color1 orange);\n}\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* CSS output */\n.classToMixin {\n background: green; /* from local class */\n}\n\n.targetClass {\n background: orange; /* from mixin with override */\n}\n"})}),"\n",(0,r.jsx)(n.h2,{id:"partial-css-mixins",children:"Partial CSS mixins"}),"\n",(0,r.jsxs)(n.p,{children:["Partial CSS Mixins (",(0,r.jsx)(n.code,{children:"-st-partial-mixin"}),") is a continuation of the idea of mixins with parameter overrides. (as described above)"]}),"\n",(0,r.jsxs)(n.p,{children:["Where a regular ",(0,r.jsx)(n.code,{children:"-st-mixin"})," includes all declarations inside the targeted mixed-in class, partial mixins enable you to pass through overriding variable values and mix in only declarations that would be affected by such an override."]}),"\n",(0,r.jsx)(n.p,{children:"For a partial mixin to work, at least one overriding variable must be provided, additional ones being optional."}),"\n",(0,r.jsx)(n.h4,{id:"example",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:":vars {\n color1: red;\n color2: green;\n}\n\n.my-mixin {\n background: value(color1);\n color: value(color2);\n}\n\n.container {\n -st-partial-mixin: my-mixin(color1 gold);\n}\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* output */\n.container {\n background: gold;\n}\n"})}),"\n",(0,r.jsx)(n.p,{children:"A partial mixin will include any declaration in the mixed-in class (or rules containing the mixed-in class) that contains a variable usage that will be overridden. Any other variables not overridden inside the mixed in declaration will retain their original values."}),"\n",(0,r.jsx)(n.h4,{id:"example-1",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:":vars {\n color1: red;\n color2: green;\n size1: 2px;\n}\n\n.my-mixin {\n background: value(color1);\n color: value(color2);\n}\n\n.my-mixin .part {\n border: value(size1) solid value(color2);\n}\n\n.container {\n -st-partial-mixin: my-mixin(color1 gold, size1 5px);\n}\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* output */\n.container {\n background: gold;\n}\n\n.container .part {\n border: 5px solid green;\n}\n"})}),"\n",(0,r.jsx)(n.h2,{id:"javascript-mixins",children:"JavaScript mixins"}),"\n",(0,r.jsx)(n.p,{children:"JavaScript mixins allow you to create complex structures in CSS based on the arguments passed to the mixin."}),"\n",(0,r.jsx)(n.p,{children:"A JavaScript mixin returns a CSS fragment which can contain multiple declarations with optional sub style-rules."}),"\n",(0,r.jsx)(n.p,{children:"Arguments are passed to the mixin as a string argument and it's the mixin's responsibility to parse them."}),"\n",(0,r.jsx)(n.p,{children:"Here is an example of a mixin receiving multiple arguments and returning multiple declarations into the target ruleset."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"/* file my-mixin.js */\nmodule.exports = function colorAndBg([color, bgColor]) {\n /* arguments: array of string types */\n\n return {\n color: color,\n background: bgColor,\n };\n};\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:'/* file example.st.css */\n@st-import colorAndBg from "./my-mixin";\n\n.codeMixedIn {\n -st-mixin: colorAndBg(green, orange);\n font-family: monospace;\n}\n'})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* CSS output */\n.codeMixedIn {\n color: green; /* from JS mixin */\n background: orange; /* from JS mixin */\n font-family: monospace; /* from local class */\n}\n"})}),"\n",(0,r.jsx)(n.h3,{id:"create-multiple-style-rules",children:"Create multiple style-rules"}),"\n",(0,r.jsx)(n.p,{children:"Mixins can return multiple style-rules that are mixed into the target stylesheet. These style-rules can be written with the following syntax options:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"selector"})," - resulting ruleset is appended as a descendent selector to its mixed in target (in below example ",(0,r.jsx)(n.code,{children:".otherClass"}),")"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"&selector"})," - resulting ruleset references the parent selector into which it was mixed in (in below example ",(0,r.jsx)(n.code,{children:"&:hover"}),", the parent selector is ",(0,r.jsx)(n.code,{children:".codeMixedIn"}),")"]}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"/* file my-mixin.js */\nmodule.exports = function complexMixin([color, bgColor]) {\n /* arguments: array of string types */\n\n return {\n color: color,\n background: bgColor,\n '&:hover': {\n color: 'gold',\n },\n '.otherClass': {\n color: 'purple',\n },\n };\n};\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:'/* file example.st.css */\n@st-import complexMixin from "./my-mixin";\n\n.codeMixedIn {\n -st-mixin: complexMixin(green, orange);\n font-family: monospace;\n}\n'})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* CSS output */\n.codeMixedIn {\n color: green; /* from JS mixin */\n background: orange; /* from JS mixin */\n font-family: monospace; /* from local class */\n}\n\n.codeMixedIn:hover {\n /* from JS mixin with & */\n color: gold;\n}\n\n.codeMixedIn .otherClass {\n /* from JS mixin with appended selector */\n color: purple;\n}\n"})}),"\n",(0,r.jsx)(n.h2,{id:"how-mixins-are-applied",children:"How mixins are applied"}),"\n",(0,r.jsx)(n.p,{children:"Mixins can add CSS declarations to the CSS ruleset to which they are applied."}),"\n",(0,r.jsxs)(n.p,{children:["Rules are added at the position in the CSS where the ",(0,r.jsx)(n.code,{children:"-st-mixin"})," is declared.\nAny selectors that are appended as a result of the mixin are added directly after the ruleset that the mixin was applied to."]}),"\n",(0,r.jsxs)(n.p,{children:["You can apply multiple mixins from either CSS or JavaScript, or both separated by comma ",(0,r.jsx)(n.code,{children:"-st-mixin: mixinA, mixinB"}),".\nMultiple mixins are applied according to the order that they are declared left to right."]}),"\n",(0,r.jsx)(n.h2,{id:"considerations-when-using-mixins",children:"Considerations when using mixins"}),"\n",(0,r.jsxs)(n.p,{children:["Take a look at these considerations before working with ",(0,r.jsx)(n.strong,{children:"Stylable"})," mixins."]}),"\n",(0,r.jsx)(n.h3,{id:"escape-special-characters",children:"Escape special characters"}),"\n",(0,r.jsxs)(n.p,{children:["You can escape special characters by wrapping them with quotes or using a backslash (",(0,r.jsx)(n.code,{children:"\\"}),")."]}),"\n",(0,r.jsx)(n.p,{children:"Example:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:'.x {\n /* use quotations to include comma */\n -st-mixin: mix(300, \'xx,x\'); /* ["300", "xx,x"] */\n}\n'})}),"\n",(0,r.jsx)(n.p,{children:"They can also be used to include quotes or backslashes as part of the parameter."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:'.y {\n /* escape slashes */\n -st-mixin: mix(300, \'"xxx"\'); /* ["300", "\\"xxx\\""] */\n}\n'})}),"\n",(0,r.jsx)(n.h3,{id:"circular-references",children:"Circular references"}),"\n",(0,r.jsxs)(n.p,{children:["It is possible to reach a state where you have circular references between mixins. These cannot be resolved, and a diagnostics warning is issued in your ",(0,r.jsx)(n.strong,{children:"Stylable"})," code intelligence and build process."]})]})}function x(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},8453:(e,n,i)=>{i.d(n,{R:()=>l,x:()=>o});var s=i(6540);const r={},a=s.createContext(r);function l(e){const n=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[4715],{7983:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>t,contentTitle:()=>o,default:()=>x,frontMatter:()=>l,metadata:()=>s,toc:()=>c});const s=JSON.parse('{"id":"references/mixins","title":"Mixins","description":"Stylable mixins enable you to reuse complex styles and CSS behaviors, defined in CSS or Javascript, and apply them to any style-rule during build time.","source":"@site/docs/references/mixins.md","sourceDirName":"references","slug":"/references/mixins","permalink":"/docs/references/mixins","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/mixins.md","tags":[],"version":"current","frontMatter":{"id":"mixins","title":"Mixins"},"sidebar":"Specification Reference","previous":{"title":"Formatters","permalink":"/docs/references/formatters"},"next":{"title":"Variables","permalink":"/docs/references/st-variables"}}');var r=i(4848),a=i(8453);const l={id:"mixins",title:"Mixins"},o=void 0,t={},c=[{value:"CSS mixins",id:"css-mixins",level:2},{value:"Variable overrides",id:"variable-overrides",level:3},{value:"Partial CSS mixins",id:"partial-css-mixins",level:2},{value:"Example",id:"example",level:4},{value:"Example",id:"example-1",level:4},{value:"JavaScript mixins",id:"javascript-mixins",level:2},{value:"Create multiple style-rules",id:"create-multiple-style-rules",level:3},{value:"How mixins are applied",id:"how-mixins-are-applied",level:2},{value:"Considerations when using mixins",id:"considerations-when-using-mixins",level:2},{value:"Escape special characters",id:"escape-special-characters",level:3},{value:"Circular references",id:"circular-references",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Stylable"})," mixins enable you to reuse complex styles and CSS behaviors, defined in CSS or Javascript, and apply them to any style-rule during build time."]}),"\n",(0,r.jsx)(n.p,{children:"Here are some examples of when you can use mixins:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Presets/Variants - create reusable pieces of styling CSS"}),"\n",(0,r.jsx)(n.li,{children:"Layouts - easily describe complex layouts"}),"\n",(0,r.jsx)(n.li,{children:"Effects - easily describe complex effects"}),"\n",(0,r.jsx)(n.li,{children:"Macros - use code to define the CSS macros you need"}),"\n"]}),"\n",(0,r.jsx)(n.admonition,{type:"tip",children:(0,r.jsxs)(n.p,{children:["If you need to return only a single declaration value using code, we recommend instead using ",(0,r.jsx)(n.a,{href:"/docs/references/formatters",children:"formatters"}),"."]})}),"\n",(0,r.jsx)(n.h2,{id:"css-mixins",children:"CSS mixins"}),"\n",(0,r.jsxs)(n.p,{children:["Any CSS stylesheet, class or element that is defined in a ",(0,r.jsx)(n.strong,{children:"Stylable"})," CSS file can be used as a mixin source. You can use either a local class or element, or import the mixin from a different stylesheet."]}),"\n",(0,r.jsx)(n.p,{children:"In the following example, a locally defined class is used as a mixin in the same stylesheet."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:".style-mixin {\n color: green;\n background: yellow;\n}\n.someClass {\n -st-mixin: style-mixin;\n}\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* CSS output */\n.someClass {\n color: green; /* from local mixin */\n background: yellow; /* from local mixin */\n}\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Here is an example of a ",(0,r.jsx)(n.strong,{children:"Stylable"})," CSS file that is imported and mixed into the classes of a different stylesheet. The ",(0,r.jsx)(n.code,{children:".rootMixedIn"})," class as a stylesheet and ",(0,r.jsx)(n.code,{children:"classMixedIn"})," as a class."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* mixins.st.css */\n.root {\n color: purple;\n}\n\n.someClass {\n color: green;\n}\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:'/* example.st.css - imports the above mixin */\n@st-import MixRoot, [someClass] from "./mixins.st.css";\n\n.rootMixedIn {\n -st-mixin: MixRoot; /* stylesheet mixin */\n}\n\n.classMixedIn {\n -st-mixin: someClass; /* class mixin */\n}\n'})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* CSS output */\n.rootMixedIn {\n color: purple; /* from stylesheet mixin */\n}\n\n.rootMixedIn .someClass {\n /* ruleset added as a result of the stylesheet mixin */\n color: green;\n}\n\n.classMixedIn {\n color: green; /* from class mixin */\n}\n"})}),"\n",(0,r.jsx)(n.h3,{id:"variable-overrides",children:"Variable overrides"}),"\n",(0,r.jsx)(n.p,{children:"CSS mixins can accept named parameters in the following format:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"mixin(variableName valueOverride, variableName2 valueOverride2)\n"})}),"\n",(0,r.jsx)(n.p,{children:"Multiple variables can be comma separated or written on multiple lines:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"mixin (\n variableName valueOverride,\n variableName2 valueOverride2\n)\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Using parameters in a mixin enables you to override specific ",(0,r.jsx)(n.a,{href:"/docs/references/st-variables",children:"variables"})," inside of a mixin before they are applied."]}),"\n",(0,r.jsx)(n.p,{children:"Here is an example of using a variable in a CSS mixin and how it can be overridden by the mixin's parameter value."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:":vars {\n color1: green;\n}\n\n.classToMixin {\n background: value(color1);\n}\n\n.targetClass {\n -st-mixin: classToMixin(color1 orange);\n}\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* CSS output */\n.classToMixin {\n background: green; /* from local class */\n}\n\n.targetClass {\n background: orange; /* from mixin with override */\n}\n"})}),"\n",(0,r.jsx)(n.h2,{id:"partial-css-mixins",children:"Partial CSS mixins"}),"\n",(0,r.jsxs)(n.p,{children:["Partial CSS Mixins (",(0,r.jsx)(n.code,{children:"-st-partial-mixin"}),") is a continuation of the idea of mixins with parameter overrides. (as described above)"]}),"\n",(0,r.jsxs)(n.p,{children:["Where a regular ",(0,r.jsx)(n.code,{children:"-st-mixin"})," includes all declarations inside the targeted mixed-in class, partial mixins enable you to pass through overriding variable values and mix in only declarations that would be affected by such an override."]}),"\n",(0,r.jsx)(n.p,{children:"For a partial mixin to work, at least one overriding variable must be provided, additional ones being optional."}),"\n",(0,r.jsx)(n.h4,{id:"example",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:":vars {\n color1: red;\n color2: green;\n}\n\n.my-mixin {\n background: value(color1);\n color: value(color2);\n}\n\n.container {\n -st-partial-mixin: my-mixin(color1 gold);\n}\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* output */\n.container {\n background: gold;\n}\n"})}),"\n",(0,r.jsx)(n.p,{children:"A partial mixin will include any declaration in the mixed-in class (or rules containing the mixed-in class) that contains a variable usage that will be overridden. Any other variables not overridden inside the mixed in declaration will retain their original values."}),"\n",(0,r.jsx)(n.h4,{id:"example-1",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:":vars {\n color1: red;\n color2: green;\n size1: 2px;\n}\n\n.my-mixin {\n background: value(color1);\n color: value(color2);\n}\n\n.my-mixin .part {\n border: value(size1) solid value(color2);\n}\n\n.container {\n -st-partial-mixin: my-mixin(color1 gold, size1 5px);\n}\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* output */\n.container {\n background: gold;\n}\n\n.container .part {\n border: 5px solid green;\n}\n"})}),"\n",(0,r.jsx)(n.h2,{id:"javascript-mixins",children:"JavaScript mixins"}),"\n",(0,r.jsx)(n.p,{children:"JavaScript mixins allow you to create complex structures in CSS based on the arguments passed to the mixin."}),"\n",(0,r.jsx)(n.p,{children:"A JavaScript mixin returns a CSS fragment which can contain multiple declarations with optional sub style-rules."}),"\n",(0,r.jsx)(n.p,{children:"Arguments are passed to the mixin as a string argument and it's the mixin's responsibility to parse them."}),"\n",(0,r.jsx)(n.p,{children:"Here is an example of a mixin receiving multiple arguments and returning multiple declarations into the target ruleset."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"/* file my-mixin.js */\nmodule.exports = function colorAndBg([color, bgColor]) {\n /* arguments: array of string types */\n\n return {\n color: color,\n background: bgColor,\n };\n};\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:'/* file example.st.css */\n@st-import colorAndBg from "./my-mixin";\n\n.codeMixedIn {\n -st-mixin: colorAndBg(green, orange);\n font-family: monospace;\n}\n'})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* CSS output */\n.codeMixedIn {\n color: green; /* from JS mixin */\n background: orange; /* from JS mixin */\n font-family: monospace; /* from local class */\n}\n"})}),"\n",(0,r.jsx)(n.h3,{id:"create-multiple-style-rules",children:"Create multiple style-rules"}),"\n",(0,r.jsx)(n.p,{children:"Mixins can return multiple style-rules that are mixed into the target stylesheet. These style-rules can be written with the following syntax options:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"selector"})," - resulting ruleset is appended as a descendent selector to its mixed in target (in below example ",(0,r.jsx)(n.code,{children:".otherClass"}),")"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"&selector"})," - resulting ruleset references the parent selector into which it was mixed in (in below example ",(0,r.jsx)(n.code,{children:"&:hover"}),", the parent selector is ",(0,r.jsx)(n.code,{children:".codeMixedIn"}),")"]}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"/* file my-mixin.js */\nmodule.exports = function complexMixin([color, bgColor]) {\n /* arguments: array of string types */\n\n return {\n color: color,\n background: bgColor,\n '&:hover': {\n color: 'gold',\n },\n '.otherClass': {\n color: 'purple',\n },\n };\n};\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:'/* file example.st.css */\n@st-import complexMixin from "./my-mixin";\n\n.codeMixedIn {\n -st-mixin: complexMixin(green, orange);\n font-family: monospace;\n}\n'})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* CSS output */\n.codeMixedIn {\n color: green; /* from JS mixin */\n background: orange; /* from JS mixin */\n font-family: monospace; /* from local class */\n}\n\n.codeMixedIn:hover {\n /* from JS mixin with & */\n color: gold;\n}\n\n.codeMixedIn .otherClass {\n /* from JS mixin with appended selector */\n color: purple;\n}\n"})}),"\n",(0,r.jsx)(n.h2,{id:"how-mixins-are-applied",children:"How mixins are applied"}),"\n",(0,r.jsx)(n.p,{children:"Mixins can add CSS declarations to the CSS ruleset to which they are applied."}),"\n",(0,r.jsxs)(n.p,{children:["Rules are added at the position in the CSS where the ",(0,r.jsx)(n.code,{children:"-st-mixin"})," is declared.\nAny selectors that are appended as a result of the mixin are added directly after the ruleset that the mixin was applied to."]}),"\n",(0,r.jsxs)(n.p,{children:["You can apply multiple mixins from either CSS or JavaScript, or both separated by comma ",(0,r.jsx)(n.code,{children:"-st-mixin: mixinA, mixinB"}),".\nMultiple mixins are applied according to the order that they are declared left to right."]}),"\n",(0,r.jsx)(n.h2,{id:"considerations-when-using-mixins",children:"Considerations when using mixins"}),"\n",(0,r.jsxs)(n.p,{children:["Take a look at these considerations before working with ",(0,r.jsx)(n.strong,{children:"Stylable"})," mixins."]}),"\n",(0,r.jsx)(n.h3,{id:"escape-special-characters",children:"Escape special characters"}),"\n",(0,r.jsxs)(n.p,{children:["You can escape special characters by wrapping them with quotes or using a backslash (",(0,r.jsx)(n.code,{children:"\\"}),")."]}),"\n",(0,r.jsx)(n.p,{children:"Example:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:'.x {\n /* use quotations to include comma */\n -st-mixin: mix(300, \'xx,x\'); /* ["300", "xx,x"] */\n}\n'})}),"\n",(0,r.jsx)(n.p,{children:"They can also be used to include quotes or backslashes as part of the parameter."}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:'.y {\n /* escape slashes */\n -st-mixin: mix(300, \'"xxx"\'); /* ["300", "\\"xxx\\""] */\n}\n'})}),"\n",(0,r.jsx)(n.h3,{id:"circular-references",children:"Circular references"}),"\n",(0,r.jsxs)(n.p,{children:["It is possible to reach a state where you have circular references between mixins. These cannot be resolved, and a diagnostics warning is issued in your ",(0,r.jsx)(n.strong,{children:"Stylable"})," code intelligence and build process."]})]})}function x(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},8453:(e,n,i)=>{i.d(n,{R:()=>l,x:()=>o});var s=i(6540);const r={},a=s.createContext(r);function l(e){const n=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/8abe6768.ac2745d5.js b/assets/js/8abe6768.6c61f143.js similarity index 67% rename from assets/js/8abe6768.ac2745d5.js rename to assets/js/8abe6768.6c61f143.js index 1428bcd6..361814ed 100644 --- a/assets/js/8abe6768.ac2745d5.js +++ b/assets/js/8abe6768.6c61f143.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[7774],{8778:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"getting-started/stylable-config","title":"stylable.config.js","description":"The stylable.config.js file acts as a central place where you can write your top level configuration for the entire project, so that they are re-used across builds and integrations, and reduce code duplications.","source":"@site/docs/getting-started/stylable-config.mdx","sourceDirName":"getting-started","slug":"/getting-started/stylable-config","permalink":"/docs/getting-started/stylable-config","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/getting-started/stylable-config.mdx","tags":[],"version":"current","frontMatter":{"id":"stylable-config","title":"stylable.config.js"},"sidebar":"Discover","previous":{"title":"Manual Integration","permalink":"/docs/getting-started/manual-integration"},"next":{"title":"VSCode Extension","permalink":"/docs/getting-started/tooling/stylable-intelligence"}}');var s=n(4848),a=n(8453),l=n(9489),o=n(7227);n(2250);const i={id:"stylable-config",title:"stylable.config.js"},c=void 0,u={},d=[{value:"<code>defaultConfig</code>",id:"defaultconfig",level:2},{value:"<code>stcConfig</code>",id:"stcconfig",level:2},{value:"<code>webpackPlugin</code>",id:"webpackplugin",level:2}];function p(e){const t={a:"a",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components},{Details:n}=t;return n||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"stylable.config.js"})," file acts as a central place where you can write your top level configuration for the entire project, so that they are re-used across builds and integrations, and reduce code duplications."]}),"\n",(0,s.jsx)(t.p,{children:"The configuration file should be located in the project root directory in order to be picked up automatically."}),"\n",(0,s.jsx)(t.h2,{id:"defaultconfig",children:(0,s.jsx)(t.code,{children:"defaultConfig"})}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"defaultConfig"})," export field is used to set default configuration for Stylable instances across all integrations and tooling."]}),"\n",(0,s.jsx)(t.p,{children:"Currently, the following options are supported:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.a,{href:"../references/programmatic-api#resolvenamespace",children:(0,s.jsx)(t.code,{children:"resolveNamespace"})})," - control the namespace of the generated CSS"]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.a,{href:"../references/programmatic-api#moduleresolver",children:(0,s.jsx)(t.code,{children:"resolveModule"})})," - control the module resolution"]}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:'title="stylable.config.js - example"',children:"const { createDefaultResolver } = require('@stylable/core');\nconst { createNamespaceStrategyNode } = require('@stylable/node');\nconst { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');\n\nmodule.exports = {\n defaultConfig(fs) {\n return {\n // set a custom namespace resolver\n resolveNamespace: createNamespaceStrategyNode({\n prefix: 'mylib',\n strict: true,\n }),\n\n // set a custom module resolver with TS paths resolution\n resolveModule: createDefaultResolver(fs, {\n plugins: [\n new TsconfigPathsPlugin({\n configFile: require.resolve('./tsconfig.json'),\n extensions: ['.st.css'],\n }),\n ],\n }),\n };\n },\n};\n"})}),"\n",(0,s.jsx)(t.h2,{id:"stcconfig",children:(0,s.jsx)(t.code,{children:"stcConfig"})}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"stcConfig"})," export field is used as a single point to define multiple build tasks for the Stylable CLI."]}),"\n",(0,s.jsxs)(t.p,{children:["To run this configuration, either run the CLI using the ",(0,s.jsx)(t.code,{children:"stc"})," command, or pass the ",(0,s.jsx)(t.code,{children:"stcConfig"})," option to the Webpack or rollup integrations."]}),"\n","\n",(0,s.jsxs)(l.A,{groupId:"stcConfigExamples",children:[(0,s.jsx)(o.A,{value:"singleProject",label:"Single build task",default:!0,children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"const { stcConfig } = require('@stylable/cli');\n\n// use the `stcConfig` function to get type completion and validation\nexports.stcConfig = stcConfig({\n\n // build type definitions for all stylesheets into the st-types directory\n options: {\n srcDir: './src',\n outDir: './st-types',\n dts: true\n }\n});\n"})})}),(0,s.jsx)(o.A,{value:"multiProject",label:"Multiple build tasks",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"const { stcConfig } = require('@stylable/cli');\n\nexports.stcConfig = stcConfig({\n\n // default options for each build task set to output sources\n options: {\n srcDir: './src',\n outDir: './dist',\n outputSources: true,\n },\n\n // define a glob path for each build task\n projects: ['packages/*']\n});\n"})})})]}),"\n",(0,s.jsxs)(n,{children:[(0,s.jsx)("summary",{children:"Multiple build tasks interface"}),(0,s.jsx)("p",{children:(0,s.jsxs)(t.p,{children:["Projects allow sharing ",(0,s.jsx)(t.code,{children:"stc"})," configurations and management of Stylable projects in one location. They provides a controllable and predictable build order with caching optimizations."]})}),(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",children:"interface MultipleProjectsConfig<PRESET extends string> {\n options?: PartialBuildOptions;\n presets?: Presets<PRESET>;\n projects: Projects<PRESET>;\n projectsOptions?: {\n resolveRequests?: ResolveRequests;\n };\n}\n\ntype Projects =\n | Array<string | [string, ProjectEntryValues]>\n | Record<string, ProjectEntryValues>;\n\ntype ProjectEntryValues<PRESET extends string> =\n | ProjectEntryValue<PRESET>\n | Array<ProjectEntryValue<PRESET>>;\n\ntype ProjectEntryValue<PRESET extends string> =\n | PRESET\n | PartialBuildOptions\n | {\n preset?: PRESET;\n presets?: Array<PRESET>;\n options: PartialBuildOptions;\n };\n"})})]}),"\n","\n",(0,s.jsxs)(t.p,{children:["To learn more about the various CLI flags, see the ",(0,s.jsx)(t.a,{href:"./tooling/cli#cli-arguments",children:"CLI page"}),"."]}),"\n","\n",(0,s.jsx)(t.h2,{id:"webpackplugin",children:(0,s.jsx)(t.code,{children:"webpackPlugin"})}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"webpackPlugin"})," export field is used to configure any Stylable Webpack plugins in the project. The ",(0,s.jsx)(t.code,{children:"StylableWebpackPlugin"})," will attempt to load the nearest ",(0,s.jsx)(t.code,{children:"stylable.config.js"})," file and use its ",(0,s.jsx)(t.code,{children:"webpackPlugin"})," export as for its options."]}),"\n",(0,s.jsxs)(t.p,{children:["To learn more about the building Stylable using Webpack, see the ",(0,s.jsx)(t.a,{href:"./webpack-integration#stylableconfigjs",children:"Webpack integration"})," page."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},7227:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,l),hidden:n,children:t})}},9489:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),a=n(4245),l=n(6347),o=n(6494),i=n(2814),c=n(5167),u=n(9900);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const s=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(s.location.search);t.set(a,e),s.replace({...s.location,search:t.toString()})}),[a,s])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,a=p(e),[l,i]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[c,d]=f({queryString:n,groupId:s}),[g,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,u.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),m=(()=>{const e=c??g;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{m&&i(m)}),[m]);return{selectedValue:l,selectValue:(0,r.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),b(e)}),[d,b,a]),tabValues:a}}var b=n(1062);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(4848);function y(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),s=o[n].value;s!==r&&(c(t),l(s))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>i.push(e),onKeyDown:d,onClick:u,...a,className:(0,s.A)("tabs__item",m.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function v(e){const t=g(e);return(0,j.jsxs)("div",{className:(0,s.A)("tabs-container",m.tabList),children:[(0,j.jsx)(y,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.A)();return(0,j.jsx)(v,{...e,children:d(e.children)},String(t))}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[7774],{7062:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"getting-started/stylable-config","title":"stylable.config.js","description":"The stylable.config.js file acts as a central place where you can write your top level configuration for the entire project, so that they are re-used across builds and integrations, and reduce code duplications.","source":"@site/docs/getting-started/stylable-config.mdx","sourceDirName":"getting-started","slug":"/getting-started/stylable-config","permalink":"/docs/getting-started/stylable-config","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/getting-started/stylable-config.mdx","tags":[],"version":"current","frontMatter":{"id":"stylable-config","title":"stylable.config.js"},"sidebar":"Discover","previous":{"title":"Manual Integration","permalink":"/docs/getting-started/manual-integration"},"next":{"title":"VSCode Extension","permalink":"/docs/getting-started/tooling/stylable-intelligence"}}');var s=n(4848),a=n(8453),l=n(1470),o=n(9365);n(1432);const i={id:"stylable-config",title:"stylable.config.js"},c=void 0,u={},d=[{value:"<code>defaultConfig</code>",id:"defaultconfig",level:2},{value:"<code>stcConfig</code>",id:"stcconfig",level:2},{value:"<code>webpackPlugin</code>",id:"webpackplugin",level:2}];function p(e){const t={a:"a",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components},{Details:n}=t;return n||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"stylable.config.js"})," file acts as a central place where you can write your top level configuration for the entire project, so that they are re-used across builds and integrations, and reduce code duplications."]}),"\n",(0,s.jsx)(t.p,{children:"The configuration file should be located in the project root directory in order to be picked up automatically."}),"\n",(0,s.jsx)(t.h2,{id:"defaultconfig",children:(0,s.jsx)(t.code,{children:"defaultConfig"})}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"defaultConfig"})," export field is used to set default configuration for Stylable instances across all integrations and tooling."]}),"\n",(0,s.jsx)(t.p,{children:"Currently, the following options are supported:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.a,{href:"../references/programmatic-api#resolvenamespace",children:(0,s.jsx)(t.code,{children:"resolveNamespace"})})," - control the namespace of the generated CSS"]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.a,{href:"../references/programmatic-api#moduleresolver",children:(0,s.jsx)(t.code,{children:"resolveModule"})})," - control the module resolution"]}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:'title="stylable.config.js - example"',children:"const { createDefaultResolver } = require('@stylable/core');\nconst { createNamespaceStrategyNode } = require('@stylable/node');\nconst { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');\n\nmodule.exports = {\n defaultConfig(fs) {\n return {\n // set a custom namespace resolver\n resolveNamespace: createNamespaceStrategyNode({\n prefix: 'mylib',\n strict: true,\n }),\n\n // set a custom module resolver with TS paths resolution\n resolveModule: createDefaultResolver(fs, {\n plugins: [\n new TsconfigPathsPlugin({\n configFile: require.resolve('./tsconfig.json'),\n extensions: ['.st.css'],\n }),\n ],\n }),\n };\n },\n};\n"})}),"\n",(0,s.jsx)(t.h2,{id:"stcconfig",children:(0,s.jsx)(t.code,{children:"stcConfig"})}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"stcConfig"})," export field is used as a single point to define multiple build tasks for the Stylable CLI."]}),"\n",(0,s.jsxs)(t.p,{children:["To run this configuration, either run the CLI using the ",(0,s.jsx)(t.code,{children:"stc"})," command, or pass the ",(0,s.jsx)(t.code,{children:"stcConfig"})," option to the Webpack or rollup integrations."]}),"\n","\n",(0,s.jsxs)(l.A,{groupId:"stcConfigExamples",children:[(0,s.jsx)(o.A,{value:"singleProject",label:"Single build task",default:!0,children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"const { stcConfig } = require('@stylable/cli');\n\n// use the `stcConfig` function to get type completion and validation\nexports.stcConfig = stcConfig({\n\n // build type definitions for all stylesheets into the st-types directory\n options: {\n srcDir: './src',\n outDir: './st-types',\n dts: true\n }\n});\n"})})}),(0,s.jsx)(o.A,{value:"multiProject",label:"Multiple build tasks",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"const { stcConfig } = require('@stylable/cli');\n\nexports.stcConfig = stcConfig({\n\n // default options for each build task set to output sources\n options: {\n srcDir: './src',\n outDir: './dist',\n outputSources: true,\n },\n\n // define a glob path for each build task\n projects: ['packages/*']\n});\n"})})})]}),"\n",(0,s.jsxs)(n,{children:[(0,s.jsx)("summary",{children:"Multiple build tasks interface"}),(0,s.jsx)("p",{children:(0,s.jsxs)(t.p,{children:["Projects allow sharing ",(0,s.jsx)(t.code,{children:"stc"})," configurations and management of Stylable projects in one location. They provides a controllable and predictable build order with caching optimizations."]})}),(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",children:"interface MultipleProjectsConfig<PRESET extends string> {\n options?: PartialBuildOptions;\n presets?: Presets<PRESET>;\n projects: Projects<PRESET>;\n projectsOptions?: {\n resolveRequests?: ResolveRequests;\n };\n}\n\ntype Projects =\n | Array<string | [string, ProjectEntryValues]>\n | Record<string, ProjectEntryValues>;\n\ntype ProjectEntryValues<PRESET extends string> =\n | ProjectEntryValue<PRESET>\n | Array<ProjectEntryValue<PRESET>>;\n\ntype ProjectEntryValue<PRESET extends string> =\n | PRESET\n | PartialBuildOptions\n | {\n preset?: PRESET;\n presets?: Array<PRESET>;\n options: PartialBuildOptions;\n };\n"})})]}),"\n","\n",(0,s.jsxs)(t.p,{children:["To learn more about the various CLI flags, see the ",(0,s.jsx)(t.a,{href:"./tooling/cli#cli-arguments",children:"CLI page"}),"."]}),"\n","\n",(0,s.jsx)(t.h2,{id:"webpackplugin",children:(0,s.jsx)(t.code,{children:"webpackPlugin"})}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"webpackPlugin"})," export field is used to configure any Stylable Webpack plugins in the project. The ",(0,s.jsx)(t.code,{children:"StylableWebpackPlugin"})," will attempt to load the nearest ",(0,s.jsx)(t.code,{children:"stylable.config.js"})," file and use its ",(0,s.jsx)(t.code,{children:"webpackPlugin"})," export as for its options."]}),"\n",(0,s.jsxs)(t.p,{children:["To learn more about the building Stylable using Webpack, see the ",(0,s.jsx)(t.a,{href:"./webpack-integration#stylableconfigjs",children:"Webpack integration"})," page."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const s=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(s.location.search);t.set(a,e),s.replace({...s.location,search:t.toString()})}),[a,s])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,a=p(e),[l,i]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[c,d]=f({queryString:n,groupId:s}),[g,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,u.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),m=(()=>{const e=c??g;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{m&&i(m)}),[m]);return{selectedValue:l,selectValue:(0,r.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),b(e)}),[d,b,a]),tabValues:a}}var b=n(2303);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(4848);function y(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),s=o[n].value;s!==r&&(c(t),l(s))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,s.A)("tabs__item",m.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function v(e){const t=g(e);return(0,j.jsxs)("div",{className:(0,s.A)("tabs-container",m.tabList),children:[(0,j.jsx)(y,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.A)();return(0,j.jsx)(v,{...e,children:d(e.children)},String(t))}}}]); \ No newline at end of file diff --git a/assets/js/922647ed.41f45d35.js b/assets/js/922647ed.156ba5b9.js similarity index 98% rename from assets/js/922647ed.41f45d35.js rename to assets/js/922647ed.156ba5b9.js index d9d09e96..5bccb1f2 100644 --- a/assets/js/922647ed.41f45d35.js +++ b/assets/js/922647ed.156ba5b9.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[1274],{9109:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>c,default:()=>p,frontMatter:()=>a,metadata:()=>i,toc:()=>o});const i=JSON.parse('{"id":"getting-started/webpack-integration","title":"Webpack","description":"The Stylable Webpack integration provides development, build, and bundle capabilities.","source":"@site/docs/getting-started/webpack-integration.md","sourceDirName":"getting-started","slug":"/getting-started/webpack-integration","permalink":"/docs/getting-started/webpack-integration","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/getting-started/webpack-integration.md","tags":[],"version":"current","frontMatter":{"id":"webpack-integration","title":"Webpack"},"sidebar":"Discover","previous":{"title":"TypeScript","permalink":"/docs/getting-started/typescript-integration"}}');var s=t(4848),l=t(8453);const a={id:"webpack-integration",title:"Webpack"},c=void 0,r={},o=[{value:"Install",id:"install",level:2},{value:"Configuration",id:"configuration",level:2},{value:"With another CSS solution",id:"with-another-css-solution",level:3},{value:"<code>stylable.config.js</code>",id:"stylableconfigjs",level:3}];function d(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,l.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.p,{children:"The Stylable Webpack integration provides development, build, and bundle capabilities."}),"\n",(0,s.jsx)(n.h2,{id:"install",children:"Install"}),"\n",(0,s.jsxs)(n.p,{children:["Install the ",(0,s.jsx)(n.strong,{children:"@stylable/webpack-plugin"})," as a dev dependency in your local project."]}),"\n",(0,s.jsx)(n.p,{children:"Using npm:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"npm install @stylable/webpack-plugin --save-dev\n"})}),"\n",(0,s.jsx)(n.p,{children:"Using Yarn:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"yarn add @stylable/webpack-plugin --dev\n"})}),"\n",(0,s.jsx)(n.h2,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsxs)(n.p,{children:["In ",(0,s.jsx)(n.code,{children:"webpack.config"}),", add the ",(0,s.jsx)(n.code,{children:"StylableWebpackPlugin"})," to set up Stylable:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"const { StylableWebpackPlugin } = require('@stylable/webpack-plugin');\n\n// webpack config\n{\n plugins: [new StylableWebpackPlugin()],\n}\n"})}),"\n",(0,s.jsxs)(n.p,{children:["For more information on configuring the ",(0,s.jsx)(n.code,{children:"@stylable/webpack-plugin"}),", see the ",(0,s.jsx)(n.a,{href:"https://github.com/wix/stylable/tree/master/packages/webpack-plugin",children:"readme file"}),"."]}),"\n",(0,s.jsx)(n.h3,{id:"with-another-css-solution",children:"With another CSS solution"}),"\n",(0,s.jsxs)(n.p,{children:["When coming into a project with an existing Webpack CSS integration, you will need to exclude ",(0,s.jsx)(n.code,{children:".st.css"})," files from any other integration."]}),"\n",(0,s.jsxs)(n.p,{children:["For example, to exclude Stylable from ",(0,s.jsx)(n.code,{children:"css-loader"}),":"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:"{11}",children:"const { StylableWebpackPlugin } = require('@stylable/webpack-plugin');\n\n{\n plugins: [\n new StylableWebpackPlugin()\n ],\n module: {\n rules: [\n {\n test: /\\.css$/i,\n exclude: /\\.st\\.css?/,\n use: [\"css-loader\"],\n },\n ],\n },\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"stylableconfigjs",children:(0,s.jsx)(n.code,{children:"stylable.config.js"})}),"\n",(0,s.jsxs)(n.p,{children:["Adding the ",(0,s.jsx)(n.code,{children:"webpackPlugin"})," export field to the ",(0,s.jsx)(n.a,{href:"./stylable-config",children:(0,s.jsx)(n.code,{children:"stylable.config.js"})})," will set as the default configuration for any Stylable Webpack plugins in the project."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"module.exports.webpackPlugin = function (config) {\n return {\n ...config,\n optimize: {\n shortNamespaces: true,\n minify: true,\n },\n };\n};\n"})})]})}function p(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>a,x:()=>c});var i=t(6540);const s={},l=i.createContext(s);function a(e){const n=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),i.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[1274],{6059:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>c,default:()=>p,frontMatter:()=>a,metadata:()=>i,toc:()=>o});const i=JSON.parse('{"id":"getting-started/webpack-integration","title":"Webpack","description":"The Stylable Webpack integration provides development, build, and bundle capabilities.","source":"@site/docs/getting-started/webpack-integration.md","sourceDirName":"getting-started","slug":"/getting-started/webpack-integration","permalink":"/docs/getting-started/webpack-integration","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/getting-started/webpack-integration.md","tags":[],"version":"current","frontMatter":{"id":"webpack-integration","title":"Webpack"},"sidebar":"Discover","previous":{"title":"TypeScript","permalink":"/docs/getting-started/typescript-integration"}}');var s=t(4848),l=t(8453);const a={id:"webpack-integration",title:"Webpack"},c=void 0,r={},o=[{value:"Install",id:"install",level:2},{value:"Configuration",id:"configuration",level:2},{value:"With another CSS solution",id:"with-another-css-solution",level:3},{value:"<code>stylable.config.js</code>",id:"stylableconfigjs",level:3}];function d(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,l.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.p,{children:"The Stylable Webpack integration provides development, build, and bundle capabilities."}),"\n",(0,s.jsx)(n.h2,{id:"install",children:"Install"}),"\n",(0,s.jsxs)(n.p,{children:["Install the ",(0,s.jsx)(n.strong,{children:"@stylable/webpack-plugin"})," as a dev dependency in your local project."]}),"\n",(0,s.jsx)(n.p,{children:"Using npm:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"npm install @stylable/webpack-plugin --save-dev\n"})}),"\n",(0,s.jsx)(n.p,{children:"Using Yarn:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"yarn add @stylable/webpack-plugin --dev\n"})}),"\n",(0,s.jsx)(n.h2,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsxs)(n.p,{children:["In ",(0,s.jsx)(n.code,{children:"webpack.config"}),", add the ",(0,s.jsx)(n.code,{children:"StylableWebpackPlugin"})," to set up Stylable:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"const { StylableWebpackPlugin } = require('@stylable/webpack-plugin');\n\n// webpack config\n{\n plugins: [new StylableWebpackPlugin()],\n}\n"})}),"\n",(0,s.jsxs)(n.p,{children:["For more information on configuring the ",(0,s.jsx)(n.code,{children:"@stylable/webpack-plugin"}),", see the ",(0,s.jsx)(n.a,{href:"https://github.com/wix/stylable/tree/master/packages/webpack-plugin",children:"readme file"}),"."]}),"\n",(0,s.jsx)(n.h3,{id:"with-another-css-solution",children:"With another CSS solution"}),"\n",(0,s.jsxs)(n.p,{children:["When coming into a project with an existing Webpack CSS integration, you will need to exclude ",(0,s.jsx)(n.code,{children:".st.css"})," files from any other integration."]}),"\n",(0,s.jsxs)(n.p,{children:["For example, to exclude Stylable from ",(0,s.jsx)(n.code,{children:"css-loader"}),":"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:"{11}",children:"const { StylableWebpackPlugin } = require('@stylable/webpack-plugin');\n\n{\n plugins: [\n new StylableWebpackPlugin()\n ],\n module: {\n rules: [\n {\n test: /\\.css$/i,\n exclude: /\\.st\\.css?/,\n use: [\"css-loader\"],\n },\n ],\n },\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"stylableconfigjs",children:(0,s.jsx)(n.code,{children:"stylable.config.js"})}),"\n",(0,s.jsxs)(n.p,{children:["Adding the ",(0,s.jsx)(n.code,{children:"webpackPlugin"})," export field to the ",(0,s.jsx)(n.a,{href:"./stylable-config",children:(0,s.jsx)(n.code,{children:"stylable.config.js"})})," will set as the default configuration for any Stylable Webpack plugins in the project."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"module.exports.webpackPlugin = function (config) {\n return {\n ...config,\n optimize: {\n shortNamespaces: true,\n minify: true,\n },\n };\n};\n"})})]})}function p(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>a,x:()=>c});var i=t(6540);const s={},l=i.createContext(s);function a(e){const n=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),i.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/945a8992.9bfc53d1.js b/assets/js/945a8992.07b1c858.js similarity index 99% rename from assets/js/945a8992.9bfc53d1.js rename to assets/js/945a8992.07b1c858.js index 4b8506e6..63caabc5 100644 --- a/assets/js/945a8992.9bfc53d1.js +++ b/assets/js/945a8992.07b1c858.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[9729],{8080:(e,a,n)=>{n.r(a),n.d(a,{assets:()=>o,contentTitle:()=>i,default:()=>u,frontMatter:()=>l,metadata:()=>s,toc:()=>c});const s=JSON.parse('{"id":"references/st-variables","title":"Variables","description":"Stylable variables provide a way to define common values to be used across the stylesheet and exposed for sharing and theming.","source":"@site/docs/references/variables.md","sourceDirName":"references","slug":"/references/st-variables","permalink":"/docs/references/st-variables","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/variables.md","tags":[],"version":"current","frontMatter":{"id":"st-variables","title":"Variables"},"sidebar":"Specification Reference","previous":{"title":"Mixins","permalink":"/docs/references/mixins"},"next":{"title":"Runtime","permalink":"/docs/references/runtime"}}');var r=n(4848),t=n(8453);const l={id:"st-variables",title:"Variables"},i=void 0,o={},c=[{value:"Syntax",id:"syntax",level:2},{value:"Define",id:"define",level:3},{value:"Evaluate",id:"evaluate",level:3},{value:"Compose",id:"compose",level:3},{value:"Array",id:"array",level:3},{value:"Map",id:"map",level:3},{value:"Import and Export",id:"import-and-export",level:2},{value:"Runtime",id:"runtime",level:2},{value:"Custom variable",id:"custom-variable",level:2}];function d(e){const a={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,t.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(a.p,{children:"Stylable variables provide a way to define common values to be used across the stylesheet and exposed for sharing and theming.\nThese variables are used only during build-time and have no runtime impact."}),"\n",(0,r.jsxs)(a.p,{children:["If you wish to use native dynamic variables, that can change value during runtime, see ",(0,r.jsx)(a.a,{href:"/docs/references/css-vars",children:"css custom properties"})," for further details."]}),"\n",(0,r.jsx)(a.h2,{id:"syntax",children:"Syntax"}),"\n",(0,r.jsxs)(a.p,{children:["Use the ",(0,r.jsx)(a.code,{children:":vars"})," top level rule to define build variables."]}),"\n",(0,r.jsx)(a.h3,{id:"define",children:"Define"}),"\n",(0,r.jsxs)(a.p,{children:["To define a variable, add a variable declaration within a ",(0,r.jsx)(a.code,{children:":vars"})," ruleset."]}),"\n",(0,r.jsx)(a.pre,{children:(0,r.jsx)(a.code,{className:"language-css",children:":vars {\n /* define x with value green */\n x: green;\n\n /* define y with value blue */\n y: blue;\n}\n"})}),"\n",(0,r.jsx)(a.h3,{id:"evaluate",children:"Evaluate"}),"\n",(0,r.jsxs)(a.p,{children:["To get a variable value, use the ",(0,r.jsx)(a.code,{children:"value()"})," function with the variable name as the first argument."]}),"\n",(0,r.jsx)(a.pre,{children:(0,r.jsx)(a.code,{className:"language-css",children:".a {\n /* evaluate in declaration value */\n color: value(x);\n\n /* compose in declaration value */\n background: url(a.jpg) no-repeat, url(b.jpg) repeat-x value(x);\n}\n\n/* set media params from a variable */\n@media value(y) {}\n"})}),"\n",(0,r.jsx)(a.h3,{id:"compose",children:"Compose"}),"\n",(0,r.jsx)(a.p,{children:"Variables can be composed into a declaration value."}),"\n",(0,r.jsx)(a.pre,{children:(0,r.jsx)(a.code,{className:"language-css",children:":vars {\n x: green;\n\n /* define y with the value green from x */\n y: value(x);\n\n /* define z with composed x value */\n z: red, value(x), blue;\n}\n"})}),"\n",(0,r.jsx)(a.h3,{id:"array",children:"Array"}),"\n",(0,r.jsxs)(a.p,{children:["Use ",(0,r.jsx)(a.code,{children:"st-array"})," to define a variable that holds a list of comma separated values that can be accessed by a zero-based index as the second argument to the ",(0,r.jsx)(a.code,{children:"value()"})," function."]}),"\n",(0,r.jsx)(a.pre,{children:(0,r.jsx)(a.code,{className:"language-css",children:":vars {\n /* comma separated list */\n colors: st-array(red, green, blue);\n}\n\n.a {\n /* access 2nd cell value */\n color: value(colors, 1); /* green */\n}\n"})}),"\n",(0,r.jsx)(a.h3,{id:"map",children:"Map"}),"\n",(0,r.jsxs)(a.p,{children:["Use ",(0,r.jsx)(a.code,{children:"st-map"})," to define a variable that holds key/value pairs with a space as a delimiter between them, and a comma separating each pair."]}),"\n",(0,r.jsxs)(a.p,{children:["These values can then be accessed by providing the key as the second argument to the ",(0,r.jsx)(a.code,{children:"value()"})," function."]}),"\n",(0,r.jsx)(a.pre,{children:(0,r.jsx)(a.code,{className:"language-css",children:":vars {\n /* comma separated key/value pairs */\n colors: st-map(\n bg black, \n text gold,\n );\n}\n\n.a {\n /* access 'text' key value */\n color: value(colors, text); /* gold */\n}\n"})}),"\n",(0,r.jsx)(a.h2,{id:"import-and-export",children:"Import and Export"}),"\n",(0,r.jsxs)(a.p,{children:["An exported build variable can be imported into another stylesheet with the ",(0,r.jsx)(a.a,{href:"./imports",children:"@st-import"})," at-rule."]}),"\n",(0,r.jsx)(a.pre,{children:(0,r.jsx)(a.code,{className:"language-css",metastring:'title="example2.st.css"',children:'@st-import [color1] from "./common.st.css";\n\n.a {\n /* compose color1 to border value*/\n border: 10px solid value(color1);\n}\n'})}),"\n",(0,r.jsx)(a.h2,{id:"runtime",children:"Runtime"}),"\n",(0,r.jsxs)(a.p,{children:["A build variable value can be accessed using the ",(0,r.jsx)(a.code,{children:"stVars"})," mapping on the Stylable stylesheet runtime."]}),"\n",(0,r.jsx)(a.pre,{children:(0,r.jsx)(a.code,{className:"language-jsx",children:"import { stVars } from './common.st.css';\n\n// map from local name to value\nstVars.color1; // \"green\"\nstVars['dashed-name']; // \"blue\"\n"})}),"\n",(0,r.jsx)(a.admonition,{title:"local export only",type:"important",children:(0,r.jsxs)(a.p,{children:["Only build variables that are defined by the stylesheet are exported to Javascript - ",(0,r.jsx)(a.strong,{children:"imported ones are not!"})]})}),"\n",(0,r.jsx)(a.h2,{id:"custom-variable",children:"Custom variable"}),"\n",(0,r.jsx)(a.admonition,{title:"experimental",type:"danger",children:(0,r.jsx)(a.p,{children:"This API is not stable"})}),"\n",(0,r.jsxs)(a.p,{children:["Composed data structures like ",(0,r.jsx)(a.code,{children:"st-array"})," and ",(0,r.jsx)(a.code,{children:"st-map"})," can be defined from Javascript. Take a look at ",(0,r.jsx)(a.code,{children:"stBorder"})," from the ",(0,r.jsx)(a.a,{href:"https://github.com/wix/stylable/tree/master/packages/custom-value",children:"@stylable/custom-value"})," to see how it works."]}),"\n",(0,r.jsx)(a.pre,{children:(0,r.jsx)(a.code,{className:"language-css",metastring:'title="stBorder usage example"',children:'@st-import [stBorder] from "@stylable/custom-value";\n\n:vars {\n /* order of arguments: size style color */\n myborder: stBorder(1px, solid, green);\n}\n\n.root {\n border: value(myBorder); /* 1px solid green */\n background-color: value(myBorder, color); /* green */\n}\n'})})]})}function u(e={}){const{wrapper:a}={...(0,t.R)(),...e.components};return a?(0,r.jsx)(a,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},8453:(e,a,n)=>{n.d(a,{R:()=>l,x:()=>i});var s=n(6540);const r={},t=s.createContext(r);function l(e){const a=s.useContext(t);return s.useMemo((function(){return"function"==typeof e?e(a):{...a,...e}}),[a,e])}function i(e){let a;return a=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(t.Provider,{value:a},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[9729],{3735:(e,a,n)=>{n.r(a),n.d(a,{assets:()=>o,contentTitle:()=>i,default:()=>u,frontMatter:()=>l,metadata:()=>s,toc:()=>c});const s=JSON.parse('{"id":"references/st-variables","title":"Variables","description":"Stylable variables provide a way to define common values to be used across the stylesheet and exposed for sharing and theming.","source":"@site/docs/references/variables.md","sourceDirName":"references","slug":"/references/st-variables","permalink":"/docs/references/st-variables","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/variables.md","tags":[],"version":"current","frontMatter":{"id":"st-variables","title":"Variables"},"sidebar":"Specification Reference","previous":{"title":"Mixins","permalink":"/docs/references/mixins"},"next":{"title":"Runtime","permalink":"/docs/references/runtime"}}');var r=n(4848),t=n(8453);const l={id:"st-variables",title:"Variables"},i=void 0,o={},c=[{value:"Syntax",id:"syntax",level:2},{value:"Define",id:"define",level:3},{value:"Evaluate",id:"evaluate",level:3},{value:"Compose",id:"compose",level:3},{value:"Array",id:"array",level:3},{value:"Map",id:"map",level:3},{value:"Import and Export",id:"import-and-export",level:2},{value:"Runtime",id:"runtime",level:2},{value:"Custom variable",id:"custom-variable",level:2}];function d(e){const a={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,t.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(a.p,{children:"Stylable variables provide a way to define common values to be used across the stylesheet and exposed for sharing and theming.\nThese variables are used only during build-time and have no runtime impact."}),"\n",(0,r.jsxs)(a.p,{children:["If you wish to use native dynamic variables, that can change value during runtime, see ",(0,r.jsx)(a.a,{href:"/docs/references/css-vars",children:"css custom properties"})," for further details."]}),"\n",(0,r.jsx)(a.h2,{id:"syntax",children:"Syntax"}),"\n",(0,r.jsxs)(a.p,{children:["Use the ",(0,r.jsx)(a.code,{children:":vars"})," top level rule to define build variables."]}),"\n",(0,r.jsx)(a.h3,{id:"define",children:"Define"}),"\n",(0,r.jsxs)(a.p,{children:["To define a variable, add a variable declaration within a ",(0,r.jsx)(a.code,{children:":vars"})," ruleset."]}),"\n",(0,r.jsx)(a.pre,{children:(0,r.jsx)(a.code,{className:"language-css",children:":vars {\n /* define x with value green */\n x: green;\n\n /* define y with value blue */\n y: blue;\n}\n"})}),"\n",(0,r.jsx)(a.h3,{id:"evaluate",children:"Evaluate"}),"\n",(0,r.jsxs)(a.p,{children:["To get a variable value, use the ",(0,r.jsx)(a.code,{children:"value()"})," function with the variable name as the first argument."]}),"\n",(0,r.jsx)(a.pre,{children:(0,r.jsx)(a.code,{className:"language-css",children:".a {\n /* evaluate in declaration value */\n color: value(x);\n\n /* compose in declaration value */\n background: url(a.jpg) no-repeat, url(b.jpg) repeat-x value(x);\n}\n\n/* set media params from a variable */\n@media value(y) {}\n"})}),"\n",(0,r.jsx)(a.h3,{id:"compose",children:"Compose"}),"\n",(0,r.jsx)(a.p,{children:"Variables can be composed into a declaration value."}),"\n",(0,r.jsx)(a.pre,{children:(0,r.jsx)(a.code,{className:"language-css",children:":vars {\n x: green;\n\n /* define y with the value green from x */\n y: value(x);\n\n /* define z with composed x value */\n z: red, value(x), blue;\n}\n"})}),"\n",(0,r.jsx)(a.h3,{id:"array",children:"Array"}),"\n",(0,r.jsxs)(a.p,{children:["Use ",(0,r.jsx)(a.code,{children:"st-array"})," to define a variable that holds a list of comma separated values that can be accessed by a zero-based index as the second argument to the ",(0,r.jsx)(a.code,{children:"value()"})," function."]}),"\n",(0,r.jsx)(a.pre,{children:(0,r.jsx)(a.code,{className:"language-css",children:":vars {\n /* comma separated list */\n colors: st-array(red, green, blue);\n}\n\n.a {\n /* access 2nd cell value */\n color: value(colors, 1); /* green */\n}\n"})}),"\n",(0,r.jsx)(a.h3,{id:"map",children:"Map"}),"\n",(0,r.jsxs)(a.p,{children:["Use ",(0,r.jsx)(a.code,{children:"st-map"})," to define a variable that holds key/value pairs with a space as a delimiter between them, and a comma separating each pair."]}),"\n",(0,r.jsxs)(a.p,{children:["These values can then be accessed by providing the key as the second argument to the ",(0,r.jsx)(a.code,{children:"value()"})," function."]}),"\n",(0,r.jsx)(a.pre,{children:(0,r.jsx)(a.code,{className:"language-css",children:":vars {\n /* comma separated key/value pairs */\n colors: st-map(\n bg black, \n text gold,\n );\n}\n\n.a {\n /* access 'text' key value */\n color: value(colors, text); /* gold */\n}\n"})}),"\n",(0,r.jsx)(a.h2,{id:"import-and-export",children:"Import and Export"}),"\n",(0,r.jsxs)(a.p,{children:["An exported build variable can be imported into another stylesheet with the ",(0,r.jsx)(a.a,{href:"./imports",children:"@st-import"})," at-rule."]}),"\n",(0,r.jsx)(a.pre,{children:(0,r.jsx)(a.code,{className:"language-css",metastring:'title="example2.st.css"',children:'@st-import [color1] from "./common.st.css";\n\n.a {\n /* compose color1 to border value*/\n border: 10px solid value(color1);\n}\n'})}),"\n",(0,r.jsx)(a.h2,{id:"runtime",children:"Runtime"}),"\n",(0,r.jsxs)(a.p,{children:["A build variable value can be accessed using the ",(0,r.jsx)(a.code,{children:"stVars"})," mapping on the Stylable stylesheet runtime."]}),"\n",(0,r.jsx)(a.pre,{children:(0,r.jsx)(a.code,{className:"language-jsx",children:"import { stVars } from './common.st.css';\n\n// map from local name to value\nstVars.color1; // \"green\"\nstVars['dashed-name']; // \"blue\"\n"})}),"\n",(0,r.jsx)(a.admonition,{title:"local export only",type:"important",children:(0,r.jsxs)(a.p,{children:["Only build variables that are defined by the stylesheet are exported to Javascript - ",(0,r.jsx)(a.strong,{children:"imported ones are not!"})]})}),"\n",(0,r.jsx)(a.h2,{id:"custom-variable",children:"Custom variable"}),"\n",(0,r.jsx)(a.admonition,{title:"experimental",type:"danger",children:(0,r.jsx)(a.p,{children:"This API is not stable"})}),"\n",(0,r.jsxs)(a.p,{children:["Composed data structures like ",(0,r.jsx)(a.code,{children:"st-array"})," and ",(0,r.jsx)(a.code,{children:"st-map"})," can be defined from Javascript. Take a look at ",(0,r.jsx)(a.code,{children:"stBorder"})," from the ",(0,r.jsx)(a.a,{href:"https://github.com/wix/stylable/tree/master/packages/custom-value",children:"@stylable/custom-value"})," to see how it works."]}),"\n",(0,r.jsx)(a.pre,{children:(0,r.jsx)(a.code,{className:"language-css",metastring:'title="stBorder usage example"',children:'@st-import [stBorder] from "@stylable/custom-value";\n\n:vars {\n /* order of arguments: size style color */\n myborder: stBorder(1px, solid, green);\n}\n\n.root {\n border: value(myBorder); /* 1px solid green */\n background-color: value(myBorder, color); /* green */\n}\n'})})]})}function u(e={}){const{wrapper:a}={...(0,t.R)(),...e.components};return a?(0,r.jsx)(a,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},8453:(e,a,n)=>{n.d(a,{R:()=>l,x:()=>i});var s=n(6540);const r={},t=s.createContext(r);function l(e){const a=s.useContext(t);return s.useMemo((function(){return"function"==typeof e?e(a):{...a,...e}}),[a,e])}function i(e){let a;return a=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(t.Provider,{value:a},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/9e4087bc.5f0ca831.js b/assets/js/9e4087bc.488edf24.js similarity index 87% rename from assets/js/9e4087bc.5f0ca831.js rename to assets/js/9e4087bc.488edf24.js index 27880e76..bb692488 100644 --- a/assets/js/9e4087bc.5f0ca831.js +++ b/assets/js/9e4087bc.488edf24.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[2711],{5496:(e,t,r)=>{r.r(t),r.d(t,{default:()=>m});r(6540);var a=r(4783),n=r(3230),s=r(6644),i=r(9191),c=r(7635),l=r(5225),o=r(4848);function d(e){let{year:t,posts:r}=e;const n=(0,i.i)({day:"numeric",month:"long",timeZone:"UTC"});return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(l.A,{as:"h3",id:t,children:t}),(0,o.jsx)("ul",{children:r.map((e=>{return(0,o.jsx)("li",{children:(0,o.jsxs)(a.A,{to:e.metadata.permalink,children:[(t=e.metadata.date,n.format(new Date(t)))," - ",e.metadata.title]})},e.metadata.date);var t}))})]})}function h(e){let{years:t}=e;return(0,o.jsx)("section",{className:"margin-vert--lg",children:(0,o.jsx)("div",{className:"container",children:(0,o.jsx)("div",{className:"row",children:t.map(((e,t)=>(0,o.jsx)("div",{className:"col col--4 margin-vert--lg",children:(0,o.jsx)(d,{...e})},t)))})})})}function m(e){let{archive:t}=e;const r=(0,n.T)({id:"theme.blog.archive.title",message:"Archive",description:"The page & hero title of the blog archive page"}),a=(0,n.T)({id:"theme.blog.archive.description",message:"Archive",description:"The page & hero description of the blog archive page"}),i=function(e){const t=e.reduce(((e,t)=>{const r=t.metadata.date.split("-")[0],a=e.get(r)??[];return e.set(r,[t,...a])}),new Map);return Array.from(t,(e=>{let[t,r]=e;return{year:t,posts:r}}))}(t.blogPosts);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(s.be,{title:r,description:a}),(0,o.jsxs)(c.A,{children:[(0,o.jsx)("header",{className:"hero hero--primary",children:(0,o.jsxs)("div",{className:"container",children:[(0,o.jsx)(l.A,{as:"h1",className:"hero__title",children:r}),(0,o.jsx)("p",{className:"hero__subtitle",children:a})]})}),(0,o.jsx)("main",{children:i.length>0&&(0,o.jsx)(h,{years:i})})]})]})}},9191:(e,t,r)=>{r.d(t,{i:()=>n});var a=r(7639);function n(e){void 0===e&&(e={});const{i18n:{currentLocale:t}}=(0,a.A)(),r=function(){const{i18n:{currentLocale:e,localeConfigs:t}}=(0,a.A)();return t[e].calendar}();return new Intl.DateTimeFormat(t,{calendar:r,...e})}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[2711],{9331:(e,t,r)=>{r.r(t),r.d(t,{default:()=>m});r(6540);var a=r(8774),n=r(1312),s=r(1213),i=r(6266),c=r(7823),l=r(1107),o=r(4848);function d(e){let{year:t,posts:r}=e;const n=(0,i.i)({day:"numeric",month:"long",timeZone:"UTC"});return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(l.A,{as:"h3",id:t,children:t}),(0,o.jsx)("ul",{children:r.map((e=>{return(0,o.jsx)("li",{children:(0,o.jsxs)(a.A,{to:e.metadata.permalink,children:[(t=e.metadata.date,n.format(new Date(t)))," - ",e.metadata.title]})},e.metadata.date);var t}))})]})}function h(e){let{years:t}=e;return(0,o.jsx)("section",{className:"margin-vert--lg",children:(0,o.jsx)("div",{className:"container",children:(0,o.jsx)("div",{className:"row",children:t.map(((e,t)=>(0,o.jsx)("div",{className:"col col--4 margin-vert--lg",children:(0,o.jsx)(d,{...e})},t)))})})})}function m(e){let{archive:t}=e;const r=(0,n.T)({id:"theme.blog.archive.title",message:"Archive",description:"The page & hero title of the blog archive page"}),a=(0,n.T)({id:"theme.blog.archive.description",message:"Archive",description:"The page & hero description of the blog archive page"}),i=function(e){const t=e.reduce(((e,t)=>{const r=t.metadata.date.split("-")[0],a=e.get(r)??[];return e.set(r,[t,...a])}),new Map);return Array.from(t,(e=>{let[t,r]=e;return{year:t,posts:r}}))}(t.blogPosts);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(s.be,{title:r,description:a}),(0,o.jsxs)(c.A,{children:[(0,o.jsx)("header",{className:"hero hero--primary",children:(0,o.jsxs)("div",{className:"container",children:[(0,o.jsx)(l.A,{as:"h1",className:"hero__title",children:r}),(0,o.jsx)("p",{className:"hero__subtitle",children:a})]})}),(0,o.jsx)("main",{children:i.length>0&&(0,o.jsx)(h,{years:i})})]})]})}},6266:(e,t,r)=>{r.d(t,{i:()=>n});var a=r(4586);function n(e){void 0===e&&(e={});const{i18n:{currentLocale:t}}=(0,a.A)(),r=function(){const{i18n:{currentLocale:e,localeConfigs:t}}=(0,a.A)();return t[e].calendar}();return new Intl.DateTimeFormat(t,{calendar:r,...e})}}}]); \ No newline at end of file diff --git a/assets/js/a2b316bf.170c1449.js b/assets/js/a2b316bf.7180e85f.js similarity index 98% rename from assets/js/a2b316bf.170c1449.js rename to assets/js/a2b316bf.7180e85f.js index f165d383..5a0cdaa8 100644 --- a/assets/js/a2b316bf.170c1449.js +++ b/assets/js/a2b316bf.7180e85f.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[150],{8218:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>r,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"guides/handbook/class","title":"Classes","description":"Classes are the most basic building block of stylable, used to mark elements on the DOM, so those could in turn be targeted and styled via our CSS.","source":"@site/docs/guides/handbook/class.mdx","sourceDirName":"guides/handbook","slug":"/guides/handbook/class","permalink":"/docs/guides/handbook/class","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/handbook/class.mdx","tags":[],"version":"current","frontMatter":{"id":"class","title":"Classes"},"sidebar":"Guides","previous":{"title":"Introduction","permalink":"/docs/guides/handbook/intro"},"next":{"title":"Namespacing","permalink":"/docs/guides/handbook/namespacing"}}');var a=n(4848),o=n(8453);const i={id:"class",title:"Classes"},l=void 0,r={},c=[{value:"CSS classes",id:"css-classes",level:2},{value:"Resolve global conflicts",id:"resolve-global-conflicts",level:2},{value:"Runtime mapping",id:"runtime-mapping",level:2},{value:"Naming tip",id:"naming-tip",level:2}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(s.p,{children:"Classes are the most basic building block of stylable, used to mark elements on the DOM, so those could in turn be targeted and styled via our CSS."}),"\n",(0,a.jsx)(s.h2,{id:"css-classes",children:"CSS classes"}),"\n",(0,a.jsxs)(s.p,{children:["A CSS class starts with a ",(0,a.jsx)(s.code,{children:"."})," (period) following a CSS identifier. Read more about ",(0,a.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors",children:"CSS classes"})," in the MDN documentation."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css"',children:".player {\n background: green;\n}\n"})}),"\n",(0,a.jsxs)(s.p,{children:["Here we create a ",(0,a.jsx)(s.code,{children:"game.st.css"})," stylesheet and define a class named ",(0,a.jsx)(s.code,{children:"player"})," that will color the background of the element it targets with the color ",(0,a.jsx)(s.code,{children:"green"}),"."]}),"\n",(0,a.jsx)(s.h2,{id:"resolve-global-conflicts",children:"Resolve global conflicts"}),"\n",(0,a.jsxs)(s.p,{children:["All CSS loaded to the browser for a given page is global, and so other stylesheets can create their own ",(0,a.jsx)(s.code,{children:"player"}),", and conflict with our definition"]}),"\n",(0,a.jsxs)(s.p,{children:["To resolve this, we can use a ",(0,a.jsx)(s.a,{href:"http://getbem.com/introduction/",children:"BEM methodology"})," to namespace our ",(0,a.jsx)(s.code,{children:"player"})," class with a unique prefix."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css"',children:".game__player {\n background: green;\n}\n"})}),"\n",(0,a.jsx)(s.p,{children:"This conventions-based solution works, but is difficult to scale, requires communication and agreement, demands manual upkeep, and makes our code more verbose than it needs to be."}),"\n",(0,a.jsxs)(s.p,{children:["Stylable automates the namespacing process, using a similar convention to BEM for CSS classes and other symbols (more on that in the ",(0,a.jsx)(s.a,{href:"/docs/guides/handbook/namespacing",children:"Namespacing chapter"}),")."]}),"\n",(0,a.jsx)(s.h2,{id:"runtime-mapping",children:"Runtime mapping"}),"\n",(0,a.jsx)(s.p,{children:"By turning the namespacing process to an automatic one, we find ourselves needing to map the runtime classes on the DOM to the original classes we defined in our stylesheet."}),"\n",(0,a.jsxs)(s.p,{children:["To access this class name mappings, we will import the stylesheet to our JavaScript, and utilize the ",(0,a.jsx)(s.code,{children:"classes"})," object to get our desired global name."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-jsx",metastring:'title="game.jsx"',children:"import { classes } from './game.st.css';\n\nconsole.log(classes.player); // \"game__player\"\n\n<div className={classes.player}></div>;\n"})}),"\n",(0,a.jsx)(s.admonition,{title:"Prerequisite",type:"info",children:(0,a.jsx)(s.p,{children:"The example above assumes that Stylable was run as part of a build process, using one of our integrations or hooks to generate the runtime JavaScript module with the required mappings and utility functions."})}),"\n",(0,a.jsx)(s.h2,{id:"naming-tip",children:"Naming tip"}),"\n",(0,a.jsxs)(s.p,{children:["Due to the fact that these class symbols are generated from the stylesheet, but are also consumed in JavaScript, we recommend using camelCase for class names to avoid cases that require ",(0,a.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors",children:"property accessors"}),"."]}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:'import { classes } from "./dialog.st.css";\n\nclasses.okButton; // recommended\nclasses["ok-button"]; // not recommended\n'})}),"\n","\n",(0,a.jsx)(s.p,{children:"We would further recommend to avoid using special characters that are not valid JavaScript identifiers."})]})}function h(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>i,x:()=>l});var t=n(6540);const a={},o=t.createContext(a);function i(e){const s=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[150],{7518:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>r,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"guides/handbook/class","title":"Classes","description":"Classes are the most basic building block of stylable, used to mark elements on the DOM, so those could in turn be targeted and styled via our CSS.","source":"@site/docs/guides/handbook/class.mdx","sourceDirName":"guides/handbook","slug":"/guides/handbook/class","permalink":"/docs/guides/handbook/class","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/handbook/class.mdx","tags":[],"version":"current","frontMatter":{"id":"class","title":"Classes"},"sidebar":"Guides","previous":{"title":"Introduction","permalink":"/docs/guides/handbook/intro"},"next":{"title":"Namespacing","permalink":"/docs/guides/handbook/namespacing"}}');var a=n(4848),o=n(8453);const i={id:"class",title:"Classes"},l=void 0,r={},c=[{value:"CSS classes",id:"css-classes",level:2},{value:"Resolve global conflicts",id:"resolve-global-conflicts",level:2},{value:"Runtime mapping",id:"runtime-mapping",level:2},{value:"Naming tip",id:"naming-tip",level:2}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(s.p,{children:"Classes are the most basic building block of stylable, used to mark elements on the DOM, so those could in turn be targeted and styled via our CSS."}),"\n",(0,a.jsx)(s.h2,{id:"css-classes",children:"CSS classes"}),"\n",(0,a.jsxs)(s.p,{children:["A CSS class starts with a ",(0,a.jsx)(s.code,{children:"."})," (period) following a CSS identifier. Read more about ",(0,a.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors",children:"CSS classes"})," in the MDN documentation."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css"',children:".player {\n background: green;\n}\n"})}),"\n",(0,a.jsxs)(s.p,{children:["Here we create a ",(0,a.jsx)(s.code,{children:"game.st.css"})," stylesheet and define a class named ",(0,a.jsx)(s.code,{children:"player"})," that will color the background of the element it targets with the color ",(0,a.jsx)(s.code,{children:"green"}),"."]}),"\n",(0,a.jsx)(s.h2,{id:"resolve-global-conflicts",children:"Resolve global conflicts"}),"\n",(0,a.jsxs)(s.p,{children:["All CSS loaded to the browser for a given page is global, and so other stylesheets can create their own ",(0,a.jsx)(s.code,{children:"player"}),", and conflict with our definition"]}),"\n",(0,a.jsxs)(s.p,{children:["To resolve this, we can use a ",(0,a.jsx)(s.a,{href:"http://getbem.com/introduction/",children:"BEM methodology"})," to namespace our ",(0,a.jsx)(s.code,{children:"player"})," class with a unique prefix."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css"',children:".game__player {\n background: green;\n}\n"})}),"\n",(0,a.jsx)(s.p,{children:"This conventions-based solution works, but is difficult to scale, requires communication and agreement, demands manual upkeep, and makes our code more verbose than it needs to be."}),"\n",(0,a.jsxs)(s.p,{children:["Stylable automates the namespacing process, using a similar convention to BEM for CSS classes and other symbols (more on that in the ",(0,a.jsx)(s.a,{href:"/docs/guides/handbook/namespacing",children:"Namespacing chapter"}),")."]}),"\n",(0,a.jsx)(s.h2,{id:"runtime-mapping",children:"Runtime mapping"}),"\n",(0,a.jsx)(s.p,{children:"By turning the namespacing process to an automatic one, we find ourselves needing to map the runtime classes on the DOM to the original classes we defined in our stylesheet."}),"\n",(0,a.jsxs)(s.p,{children:["To access this class name mappings, we will import the stylesheet to our JavaScript, and utilize the ",(0,a.jsx)(s.code,{children:"classes"})," object to get our desired global name."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-jsx",metastring:'title="game.jsx"',children:"import { classes } from './game.st.css';\n\nconsole.log(classes.player); // \"game__player\"\n\n<div className={classes.player}></div>;\n"})}),"\n",(0,a.jsx)(s.admonition,{title:"Prerequisite",type:"info",children:(0,a.jsx)(s.p,{children:"The example above assumes that Stylable was run as part of a build process, using one of our integrations or hooks to generate the runtime JavaScript module with the required mappings and utility functions."})}),"\n",(0,a.jsx)(s.h2,{id:"naming-tip",children:"Naming tip"}),"\n",(0,a.jsxs)(s.p,{children:["Due to the fact that these class symbols are generated from the stylesheet, but are also consumed in JavaScript, we recommend using camelCase for class names to avoid cases that require ",(0,a.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors",children:"property accessors"}),"."]}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:'import { classes } from "./dialog.st.css";\n\nclasses.okButton; // recommended\nclasses["ok-button"]; // not recommended\n'})}),"\n","\n",(0,a.jsx)(s.p,{children:"We would further recommend to avoid using special characters that are not valid JavaScript identifiers."})]})}function h(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>i,x:()=>l});var t=n(6540);const a={},o=t.createContext(a);function i(e){const s=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/a2cbecc3.6e24772c.js b/assets/js/a2cbecc3.6e24772c.js new file mode 100644 index 00000000..9ac10af6 --- /dev/null +++ b/assets/js/a2cbecc3.6e24772c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[5299],{665:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>s,metadata:()=>i,toc:()=>d});const i=JSON.parse('{"id":"getting-started/manual-integration","title":"Manual Integration","description":"When integrating Stylable into a project, there are key differences to consider whether the project is an application or a component library.","source":"@site/docs/getting-started/manual-integration.mdx","sourceDirName":"getting-started","slug":"/getting-started/manual-integration","permalink":"/docs/getting-started/manual-integration","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/getting-started/manual-integration.mdx","tags":[],"version":"current","frontMatter":{"id":"manual-integration","title":"Manual Integration"},"sidebar":"Discover","previous":{"title":"Boilerplate","permalink":"/docs/getting-started/boilerplate"},"next":{"title":"stylable.config.js","permalink":"/docs/getting-started/stylable-config"}}');var r=n(4848),o=n(8453);const s={id:"manual-integration",title:"Manual Integration"},a=void 0,l={},d=[{value:"TypeScript development",id:"typescript-development",level:2},{value:"Application",id:"application",level:2},{value:"Bundler",id:"bundler",level:3},{value:"Server-side rendering (SSR)",id:"server-side-rendering-ssr",level:3},{value:"Component library",id:"component-library",level:2},{value:"Additional tooling support",id:"additional-tooling-support",level:2},{value:"Integrated and ready to learn?",id:"integrated-and-ready-to-learn",level:2}];function c(e){const t={a:"a",admonition:"admonition",code:"code",em:"em",h2:"h2",h3:"h3",hr:"hr",li:"li",p:"p",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["When integrating ",(0,r.jsx)(t.strong,{children:"Stylable"})," into a project, there are key differences to consider whether the project is an ",(0,r.jsx)(t.em,{children:"application"})," or a ",(0,r.jsx)(t.em,{children:"component library"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"An application is a project that is deployed to production for end-users to access. While a component library is a project that is published to a package manager for other developers to consume in their projects."}),"\n",(0,r.jsx)(t.p,{children:"This difference mostly manifests in how these projects are built. For example, an application might build a final bundle for deployment, while a component library would build standalone modules to be consumed in various ways."}),"\n",(0,r.jsx)(t.h2,{id:"typescript-development",children:"TypeScript development"}),"\n",(0,r.jsxs)(t.p,{children:["For any project using TypeScript (applications or component libraries), it is strongly recommended to configure the project integrations to ",(0,r.jsxs)(t.a,{href:"/docs/getting-started/typescript-integration#generating-types-per-stylesheet",children:["generate ",(0,r.jsx)(t.code,{children:".d.ts"})," definitions"]})," for all ",(0,r.jsx)(t.strong,{children:"Stylable"})," stylesheets. This will provide contextual completions and type-checking for imported stylesheets during development."]}),"\n",(0,r.jsx)(t.h2,{id:"application",children:"Application"}),"\n",(0,r.jsx)(t.h3,{id:"bundler",children:"Bundler"}),"\n",(0,r.jsxs)(t.p,{children:["Stylable officially supports two different bundlers, ",(0,r.jsx)(t.a,{href:"/docs/getting-started/webpack-integration",children:"webpack"})," and ",(0,r.jsx)(t.a,{href:"/docs/getting-started/rollup-integration",children:"Rollup"}),". These bundlers are used to process and bundle your CSS, JavaScript and asset files for use in a web application."]}),"\n",(0,r.jsx)(t.h3,{id:"server-side-rendering-ssr",children:"Server-side rendering (SSR)"}),"\n",(0,r.jsx)(t.p,{children:"To integrate Stylable with server-side rendering, you have two options."}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"The first option is to pre-build your stylesheets and assets using the Stylable, and then consume them on the server without any further Stylable-specific integration. "}),"\n",(0,r.jsxs)(t.li,{children:["The second option is to use the ",(0,r.jsxs)(t.a,{href:"/docs/guides/ssr#transforming-stylable-in-the-server",children:[(0,r.jsx)(t.strong,{children:"Stylable"})," node integration"]}),", which allows you to load and render Stylable stylesheets directly on the server. To use this option, you will need to integrate ",(0,r.jsx)(t.code,{children:"@stylable/node"})," into your server-side rendering pipeline."]}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"component-library",children:"Component library"}),"\n",(0,r.jsx)(t.admonition,{type:"note",children:(0,r.jsx)(t.p,{children:"This section is a work in progress and will be updated further soon."})}),"\n",(0,r.jsx)(t.h2,{id:"additional-tooling-support",children:"Additional tooling support"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Stylable"})," offers several additional ready-made integrations to pick from:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/docs/getting-started/nextjs-integration",children:"Next.js integration"})," - for applications using the NextJS framework"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/docs/getting-started/storybook-integration",children:"Storybook integration"})," - for projects using Storybook to demo their components"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"https://codux.com",children:"Codux"})," - a visual IDE for react projects, supports Stylable out of the box, no special integration needed"]}),"\n"]}),"\n",(0,r.jsx)(t.hr,{}),"\n",(0,r.jsx)(t.h2,{id:"integrated-and-ready-to-learn",children:"Integrated and ready to learn?"}),"\n",(0,r.jsxs)(t.p,{children:["Once you've finished configuring your project, you can begin styling with ",(0,r.jsx)(t.strong,{children:"Stylable"}),". Read through the ",(0,r.jsx)(t.a,{href:"/docs/guides/handbook/intro",children:"Handbook"})," or explore the ",(0,r.jsx)(t.a,{href:"/docs/references/cheatsheet",children:"API References"})," to help guide you in your work."]})]})}function p(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>s,x:()=>a});var i=n(6540);const r={},o=i.createContext(r);function s(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),i.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/a2cbecc3.6eda11bb.js b/assets/js/a2cbecc3.6eda11bb.js deleted file mode 100644 index 4a264cdb..00000000 --- a/assets/js/a2cbecc3.6eda11bb.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[5299],{6771:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>s,metadata:()=>i,toc:()=>d});const i=JSON.parse('{"id":"getting-started/manual-integration","title":"Manual Integration","description":"When integrating Stylable into a project, there are key differences to consider whether the project is an application or a component library.","source":"@site/docs/getting-started/manual-integration.mdx","sourceDirName":"getting-started","slug":"/getting-started/manual-integration","permalink":"/docs/getting-started/manual-integration","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/getting-started/manual-integration.mdx","tags":[],"version":"current","frontMatter":{"id":"manual-integration","title":"Manual Integration"},"sidebar":"Discover","previous":{"title":"Boilerplate","permalink":"/docs/getting-started/boilerplate"},"next":{"title":"stylable.config.js","permalink":"/docs/getting-started/stylable-config"}}');var r=n(4848),o=n(8453);const s={id:"manual-integration",title:"Manual Integration"},a=void 0,l={},d=[{value:"TypeScript development",id:"typescript-development",level:2},{value:"Application",id:"application",level:2},{value:"Bundler",id:"bundler",level:3},{value:"Server-side rendering (SSR)",id:"server-side-rendering-ssr",level:3},{value:"Component library",id:"component-library",level:2},{value:"Additional tooling support",id:"additional-tooling-support",level:2},{value:"Integrated and ready to learn?",id:"integrated-and-ready-to-learn",level:2}];function c(e){const t={a:"a",admonition:"admonition",code:"code",em:"em",h2:"h2",h3:"h3",hr:"hr",li:"li",p:"p",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["When integrating ",(0,r.jsx)(t.strong,{children:"Stylable"})," into a project, there are key differences to consider whether the project is an ",(0,r.jsx)(t.em,{children:"application"})," or a ",(0,r.jsx)(t.em,{children:"component library"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"An application is a project that is deployed to production for end-users to access. While a component library is a project that is published to a package manager for other developers to consume in their projects."}),"\n",(0,r.jsx)(t.p,{children:"This difference mostly manifests in how these projects are built. For example, an application might build a final bundle for deployment, while a component library would build standalone modules to be consumed in various ways."}),"\n",(0,r.jsx)(t.h2,{id:"typescript-development",children:"TypeScript development"}),"\n",(0,r.jsxs)(t.p,{children:["For any project using TypeScript (applications or component libraries), it is strongly recommended to configure the project integrations to ",(0,r.jsxs)(t.a,{href:"/docs/getting-started/typescript-integration#generating-types-per-stylesheet",children:["generate ",(0,r.jsx)(t.code,{children:".d.ts"})," definitions"]})," for all ",(0,r.jsx)(t.strong,{children:"Stylable"})," stylesheets. This will provide contextual completions and type-checking for imported stylesheets during development."]}),"\n",(0,r.jsx)(t.h2,{id:"application",children:"Application"}),"\n",(0,r.jsx)(t.h3,{id:"bundler",children:"Bundler"}),"\n",(0,r.jsxs)(t.p,{children:["Stylable officially supports two different bundlers, ",(0,r.jsx)(t.a,{href:"/docs/getting-started/webpack-integration",children:"webpack"})," and ",(0,r.jsx)(t.a,{href:"/docs/getting-started/rollup-integration",children:"Rollup"}),". These bundlers are used to process and bundle your CSS, JavaScript and asset files for use in a web application."]}),"\n",(0,r.jsx)(t.h3,{id:"server-side-rendering-ssr",children:"Server-side rendering (SSR)"}),"\n",(0,r.jsx)(t.p,{children:"To integrate Stylable with server-side rendering, you have two options."}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"The first option is to pre-build your stylesheets and assets using the Stylable, and then consume them on the server without any further Stylable-specific integration. "}),"\n",(0,r.jsxs)(t.li,{children:["The second option is to use the ",(0,r.jsxs)(t.a,{href:"/docs/guides/ssr#transforming-stylable-in-the-server",children:[(0,r.jsx)(t.strong,{children:"Stylable"})," node integration"]}),", which allows you to load and render Stylable stylesheets directly on the server. To use this option, you will need to integrate ",(0,r.jsx)(t.code,{children:"@stylable/node"})," into your server-side rendering pipeline."]}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"component-library",children:"Component library"}),"\n",(0,r.jsx)(t.admonition,{type:"note",children:(0,r.jsx)(t.p,{children:"This section is a work in progress and will be updated further soon."})}),"\n",(0,r.jsx)(t.h2,{id:"additional-tooling-support",children:"Additional tooling support"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Stylable"})," offers several additional ready-made integrations to pick from:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/docs/getting-started/nextjs-integration",children:"Next.js integration"})," - for applications using the NextJS framework"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/docs/getting-started/storybook-integration",children:"Storybook integration"})," - for projects using Storybook to demo their components"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"https://codux.com",children:"Codux"})," - a visual IDE for react projects, supports Stylable out of the box, no special integration needed"]}),"\n"]}),"\n",(0,r.jsx)(t.hr,{}),"\n",(0,r.jsx)(t.h2,{id:"integrated-and-ready-to-learn",children:"Integrated and ready to learn?"}),"\n",(0,r.jsxs)(t.p,{children:["Once you've finished configuring your project, you can begin styling with ",(0,r.jsx)(t.strong,{children:"Stylable"}),". Read through the ",(0,r.jsx)(t.a,{href:"/docs/guides/handbook/intro",children:"Handbook"})," or explore the ",(0,r.jsx)(t.a,{href:"/docs/references/cheatsheet",children:"API References"})," to help guide you in your work."]})]})}function p(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>s,x:()=>a});var i=n(6540);const r={},o=i.createContext(r);function s(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),i.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/a399b375.29e0324c.js b/assets/js/a399b375.8bfc7039.js similarity index 99% rename from assets/js/a399b375.29e0324c.js rename to assets/js/a399b375.8bfc7039.js index c693d496..d9dcd7e6 100644 --- a/assets/js/a399b375.29e0324c.js +++ b/assets/js/a399b375.8bfc7039.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[5076],{7484:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"getting-started/typescript-integration","title":"TypeScript","description":"Whenever a TypeScript file imports a Stylable stylesheet, you must provide a type for it. This is because TypeScript has no way of knowing what\'s inside Stylable *.st.css files.","source":"@site/docs/getting-started/typescript-integration.md","sourceDirName":"getting-started","slug":"/getting-started/typescript-integration","permalink":"/docs/getting-started/typescript-integration","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/getting-started/typescript-integration.md","tags":[],"version":"current","frontMatter":{"id":"typescript-integration","title":"TypeScript"},"sidebar":"Discover","previous":{"title":"Storybook","permalink":"/docs/getting-started/storybook-integration"},"next":{"title":"Webpack","permalink":"/docs/getting-started/webpack-integration"}}');var i=s(4848),r=s(8453);const l={id:"typescript-integration",title:"TypeScript"},o=void 0,a={},c=[{value:"Generating types per stylesheet",id:"generating-types-per-stylesheet",level:2},{value:"Generated files",id:"generated-files",level:3},{value:"Using the CLI",id:"using-the-cli",level:3},{value:"Using a bundler",id:"using-a-bundler",level:3},{value:"Global definition",id:"global-definition",level:2},{value:"Typing 3rd-party stylesheets",id:"typing-3rd-party-stylesheets",level:3},{value:"Publishing",id:"publishing",level:2}];function d(e){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["Whenever a TypeScript file imports a Stylable stylesheet, you must provide a type for it. This is because TypeScript has no way of knowing what's inside Stylable ",(0,i.jsx)(t.code,{children:"*.st.css"})," files."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="Import example"',children:"import { classes } from './button.st.css'; // requires typings\n"})}),"\n",(0,i.jsx)(t.h2,{id:"generating-types-per-stylesheet",children:"Generating types per stylesheet"}),"\n",(0,i.jsxs)(t.p,{children:["Stylable can generate a declaration file for each stylesheet. This approach has the advantage of providing exact typing information for each individual ",(0,i.jsx)(t.a,{href:"/docs/references/runtime",children:"stylesheet runtime API"}),"."]}),"\n",(0,i.jsx)(t.h3,{id:"generated-files",children:"Generated files"}),"\n",(0,i.jsx)(t.p,{children:"Stylable generates two kinds of type-related files:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"*.d.ts"})," provides typing for the stylesheet runtime API."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"*.d.ts.map"})," provides mapping from the generated ",(0,i.jsx)(t.code,{children:".d.ts"})," file to the original ",(0,i.jsx)(t.code,{children:".st.css"})," stylesheet. This allows jumping to definitions in the original source straight from the TypeScript file."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Type definitions that are generated adjacent to the stylesheet are automatically detected and used by TypeScript. This can cause bloat in the project source files, however. To prevent clutter in your project, we recommend that you generate all stylesheet typings to a single directory."}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{children:"/* type files grouped in st-types folder */\n \u251c\u2500\u2500 src\n | \u251c\u2500\u2500 button.st.css - source stylesheet\n | \u2514\u2500\u2500 button.tsx - component file\n |\n \u2514\u2500\u2500 st-types\n \u251c\u2500\u2500 button.st.css.d.ts - type definition\n \u2514\u2500\u2500 button.st.css.d.ts.map - type definition source-map\n"})}),"\n",(0,i.jsxs)(t.p,{children:["You'll then need to configure TypeScript to use that directory. To do this, modify your ",(0,i.jsx)(t.code,{children:"tsconfig.json"})," to specify two ",(0,i.jsx)(t.code,{children:"rootDirs"})," - your source files, and the generated typings (learn more about this by reading the ",(0,i.jsxs)(t.a,{href:"https://www.typescriptlang.org/tsconfig#rootDirs",children:[(0,i.jsx)(t.code,{children:"tsconfig.json"})," documentation"]}),") like this:"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-jsonc",metastring:'title="tsconfig.json"',children:'{\n "compilerOptions": {\n "rootDirs": ["./src", "./st-types"],\n },\n}\n'})}),"\n",(0,i.jsx)(t.admonition,{type:"tip",children:(0,i.jsxs)(t.p,{children:["We recommend adding the generated ",(0,i.jsx)(t.code,{children:"*.st.css.d.ts"})," and ",(0,i.jsx)(t.code,{children:"*.st.css.d.ts.map"})," files to your ",(0,i.jsx)(t.code,{children:".gitignore"})," file, and to only include them in your published packages."]})}),"\n",(0,i.jsx)(t.h3,{id:"using-the-cli",children:"Using the CLI"}),"\n",(0,i.jsxs)(t.p,{children:["To generate type definition files to the ",(0,i.jsx)(t.code,{children:"st-types"})," directory using the ",(0,i.jsxs)(t.a,{href:"https://github.com/wix/stylable/tree/master/packages/cli#cli-arguments",children:[(0,i.jsx)(t.code,{children:"stc"})," CLI"]}),", provide it with the ",(0,i.jsx)(t.code,{children:"--srcDir"}),", ",(0,i.jsx)(t.code,{children:"--outDir"})," and ",(0,i.jsx)(t.code,{children:"--dts"})," flags:"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-sh",children:'stc --srcDir="src" --outDir="st-types" --dts\n'})}),"\n",(0,i.jsxs)(t.p,{children:["Source maps are generated by default when generating ",(0,i.jsx)(t.code,{children:".d.ts"})," files. If these are not wanted, the ",(0,i.jsx)(t.code,{children:"--dtsSourceMap"})," flag should be set to ",(0,i.jsx)(t.code,{children:"false"}),"."]}),"\n",(0,i.jsx)(t.admonition,{type:"tip",children:(0,i.jsxs)(t.p,{children:["Use ",(0,i.jsx)(t.a,{href:"https://github.com/wix/stylable/tree/master/packages/cli#configuration-file",children:(0,i.jsx)(t.code,{children:"stylable.config.js"})})," as a central location to share common Stylable configurations across tools and integrations."]})}),"\n",(0,i.jsx)(t.h3,{id:"using-a-bundler",children:"Using a bundler"}),"\n",(0,i.jsxs)(t.p,{children:["For projects that are already using one of our bundler integrations (",(0,i.jsx)(t.a,{href:"./webpack-integration",children:"webpack"})," or ",(0,i.jsx)(t.a,{href:"./rollup-integration",children:"rollup"}),"), you can configure the Stylable plugin to auto-generate types per stylesheet. This means that as you are working in your normal development flows, types will be updated in the background, and be available in your IDE."]}),"\n",(0,i.jsxs)(t.p,{children:["This functionality is dependant on a ",(0,i.jsx)(t.a,{href:"https://github.com/wix/stylable/tree/master/packages/cli#configuration-file",children:(0,i.jsx)(t.code,{children:"stylable.config.js"})})," file that includes configuration for generating ",(0,i.jsx)(t.code,{children:".d.ts"})," files."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",metastring:'title="stylable.config.js"',children:"//@ts-check\nconst { typedConfiguration } = require('@stylable/cli');\n\nexports.stcConfig = typedConfiguration({\n options: {\n srcDir: './src',\n outDir: './st-types',\n dts: true,\n },\n});\n"})}),"\n",(0,i.jsxs)(t.p,{children:["To activate this functionality in the bundler, configure the Stylable plugin with ",(0,i.jsx)(t.code,{children:"{ stcConfig: true }"}),"."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",children:"// create a webpack plugin instance\nnew StylableWebpackPlugin({ stcConfig: true });\n\n// create a rollup plugin instance\nstylableRollupPlugin({ stcConfig: true });\n"})}),"\n",(0,i.jsx)(t.h2,{id:"global-definition",children:"Global definition"}),"\n",(0,i.jsxs)(t.p,{children:["If you choose not to generate ",(0,i.jsx)(t.code,{children:".d.ts"})," typings for each stylesheet, you'll have to include in your project a general purpose ",(0,i.jsx)(t.code,{children:"*.st.css"})," global declaration. This provides a broad signature of a Stylable stylesheet."]}),"\n",(0,i.jsxs)(t.p,{children:["To do this, create a ",(0,i.jsx)(t.code,{children:"globals.d.ts"})," file in your ",(0,i.jsx)(t.code,{children:"./src"})," directory and add the following declaration:"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="globals.d.ts"',children:"declare module '*.st.css' {\n export * from '@stylable/runtime/stylesheet';\n\n const defaultExport: unknown;\n export default defaultExport;\n}\n"})}),"\n",(0,i.jsx)(t.h3,{id:"typing-3rd-party-stylesheets",children:"Typing 3rd-party stylesheets"}),"\n",(0,i.jsxs)(t.p,{children:["If your project generates ",(0,i.jsx)(t.code,{children:".d.ts"})," typings for each stylesheet but you're consuming a package that published ",(0,i.jsx)(t.code,{children:".st.css"})," files without typings, you will have to declare global typings for that specific package."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="globals.d.ts"',children:"declare module 'third-party-package/*.st.css' {\n export * from '@stylable/runtime/stylesheet';\n\n const defaultExport: unknown;\n export default defaultExport;\n}\n"})}),"\n",(0,i.jsx)(t.h2,{id:"publishing",children:"Publishing"}),"\n",(0,i.jsxs)(t.p,{children:["If you publish any ",(0,i.jsx)(t.code,{children:"*.st.css"})," files in your package, you should also publish the ",(0,i.jsx)(t.code,{children:".d.ts"})," and ",(0,i.jsx)(t.code,{children:".d.ts.map"})," files adjacent to them. This practice leads to a better experience for users consuming your project."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-sh",children:'stc --srcDir="src" --outDir="dist" --stcss --dts\n'})})]})}function h(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>l,x:()=>o});var n=s(6540);const i={},r=n.createContext(i);function l(e){const t=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[5076],{5961:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"getting-started/typescript-integration","title":"TypeScript","description":"Whenever a TypeScript file imports a Stylable stylesheet, you must provide a type for it. This is because TypeScript has no way of knowing what\'s inside Stylable *.st.css files.","source":"@site/docs/getting-started/typescript-integration.md","sourceDirName":"getting-started","slug":"/getting-started/typescript-integration","permalink":"/docs/getting-started/typescript-integration","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/getting-started/typescript-integration.md","tags":[],"version":"current","frontMatter":{"id":"typescript-integration","title":"TypeScript"},"sidebar":"Discover","previous":{"title":"Storybook","permalink":"/docs/getting-started/storybook-integration"},"next":{"title":"Webpack","permalink":"/docs/getting-started/webpack-integration"}}');var i=s(4848),r=s(8453);const l={id:"typescript-integration",title:"TypeScript"},o=void 0,a={},c=[{value:"Generating types per stylesheet",id:"generating-types-per-stylesheet",level:2},{value:"Generated files",id:"generated-files",level:3},{value:"Using the CLI",id:"using-the-cli",level:3},{value:"Using a bundler",id:"using-a-bundler",level:3},{value:"Global definition",id:"global-definition",level:2},{value:"Typing 3rd-party stylesheets",id:"typing-3rd-party-stylesheets",level:3},{value:"Publishing",id:"publishing",level:2}];function d(e){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["Whenever a TypeScript file imports a Stylable stylesheet, you must provide a type for it. This is because TypeScript has no way of knowing what's inside Stylable ",(0,i.jsx)(t.code,{children:"*.st.css"})," files."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="Import example"',children:"import { classes } from './button.st.css'; // requires typings\n"})}),"\n",(0,i.jsx)(t.h2,{id:"generating-types-per-stylesheet",children:"Generating types per stylesheet"}),"\n",(0,i.jsxs)(t.p,{children:["Stylable can generate a declaration file for each stylesheet. This approach has the advantage of providing exact typing information for each individual ",(0,i.jsx)(t.a,{href:"/docs/references/runtime",children:"stylesheet runtime API"}),"."]}),"\n",(0,i.jsx)(t.h3,{id:"generated-files",children:"Generated files"}),"\n",(0,i.jsx)(t.p,{children:"Stylable generates two kinds of type-related files:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"*.d.ts"})," provides typing for the stylesheet runtime API."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"*.d.ts.map"})," provides mapping from the generated ",(0,i.jsx)(t.code,{children:".d.ts"})," file to the original ",(0,i.jsx)(t.code,{children:".st.css"})," stylesheet. This allows jumping to definitions in the original source straight from the TypeScript file."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Type definitions that are generated adjacent to the stylesheet are automatically detected and used by TypeScript. This can cause bloat in the project source files, however. To prevent clutter in your project, we recommend that you generate all stylesheet typings to a single directory."}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{children:"/* type files grouped in st-types folder */\n \u251c\u2500\u2500 src\n | \u251c\u2500\u2500 button.st.css - source stylesheet\n | \u2514\u2500\u2500 button.tsx - component file\n |\n \u2514\u2500\u2500 st-types\n \u251c\u2500\u2500 button.st.css.d.ts - type definition\n \u2514\u2500\u2500 button.st.css.d.ts.map - type definition source-map\n"})}),"\n",(0,i.jsxs)(t.p,{children:["You'll then need to configure TypeScript to use that directory. To do this, modify your ",(0,i.jsx)(t.code,{children:"tsconfig.json"})," to specify two ",(0,i.jsx)(t.code,{children:"rootDirs"})," - your source files, and the generated typings (learn more about this by reading the ",(0,i.jsxs)(t.a,{href:"https://www.typescriptlang.org/tsconfig#rootDirs",children:[(0,i.jsx)(t.code,{children:"tsconfig.json"})," documentation"]}),") like this:"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-jsonc",metastring:'title="tsconfig.json"',children:'{\n "compilerOptions": {\n "rootDirs": ["./src", "./st-types"],\n },\n}\n'})}),"\n",(0,i.jsx)(t.admonition,{type:"tip",children:(0,i.jsxs)(t.p,{children:["We recommend adding the generated ",(0,i.jsx)(t.code,{children:"*.st.css.d.ts"})," and ",(0,i.jsx)(t.code,{children:"*.st.css.d.ts.map"})," files to your ",(0,i.jsx)(t.code,{children:".gitignore"})," file, and to only include them in your published packages."]})}),"\n",(0,i.jsx)(t.h3,{id:"using-the-cli",children:"Using the CLI"}),"\n",(0,i.jsxs)(t.p,{children:["To generate type definition files to the ",(0,i.jsx)(t.code,{children:"st-types"})," directory using the ",(0,i.jsxs)(t.a,{href:"https://github.com/wix/stylable/tree/master/packages/cli#cli-arguments",children:[(0,i.jsx)(t.code,{children:"stc"})," CLI"]}),", provide it with the ",(0,i.jsx)(t.code,{children:"--srcDir"}),", ",(0,i.jsx)(t.code,{children:"--outDir"})," and ",(0,i.jsx)(t.code,{children:"--dts"})," flags:"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-sh",children:'stc --srcDir="src" --outDir="st-types" --dts\n'})}),"\n",(0,i.jsxs)(t.p,{children:["Source maps are generated by default when generating ",(0,i.jsx)(t.code,{children:".d.ts"})," files. If these are not wanted, the ",(0,i.jsx)(t.code,{children:"--dtsSourceMap"})," flag should be set to ",(0,i.jsx)(t.code,{children:"false"}),"."]}),"\n",(0,i.jsx)(t.admonition,{type:"tip",children:(0,i.jsxs)(t.p,{children:["Use ",(0,i.jsx)(t.a,{href:"https://github.com/wix/stylable/tree/master/packages/cli#configuration-file",children:(0,i.jsx)(t.code,{children:"stylable.config.js"})})," as a central location to share common Stylable configurations across tools and integrations."]})}),"\n",(0,i.jsx)(t.h3,{id:"using-a-bundler",children:"Using a bundler"}),"\n",(0,i.jsxs)(t.p,{children:["For projects that are already using one of our bundler integrations (",(0,i.jsx)(t.a,{href:"./webpack-integration",children:"webpack"})," or ",(0,i.jsx)(t.a,{href:"./rollup-integration",children:"rollup"}),"), you can configure the Stylable plugin to auto-generate types per stylesheet. This means that as you are working in your normal development flows, types will be updated in the background, and be available in your IDE."]}),"\n",(0,i.jsxs)(t.p,{children:["This functionality is dependant on a ",(0,i.jsx)(t.a,{href:"https://github.com/wix/stylable/tree/master/packages/cli#configuration-file",children:(0,i.jsx)(t.code,{children:"stylable.config.js"})})," file that includes configuration for generating ",(0,i.jsx)(t.code,{children:".d.ts"})," files."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",metastring:'title="stylable.config.js"',children:"//@ts-check\nconst { typedConfiguration } = require('@stylable/cli');\n\nexports.stcConfig = typedConfiguration({\n options: {\n srcDir: './src',\n outDir: './st-types',\n dts: true,\n },\n});\n"})}),"\n",(0,i.jsxs)(t.p,{children:["To activate this functionality in the bundler, configure the Stylable plugin with ",(0,i.jsx)(t.code,{children:"{ stcConfig: true }"}),"."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",children:"// create a webpack plugin instance\nnew StylableWebpackPlugin({ stcConfig: true });\n\n// create a rollup plugin instance\nstylableRollupPlugin({ stcConfig: true });\n"})}),"\n",(0,i.jsx)(t.h2,{id:"global-definition",children:"Global definition"}),"\n",(0,i.jsxs)(t.p,{children:["If you choose not to generate ",(0,i.jsx)(t.code,{children:".d.ts"})," typings for each stylesheet, you'll have to include in your project a general purpose ",(0,i.jsx)(t.code,{children:"*.st.css"})," global declaration. This provides a broad signature of a Stylable stylesheet."]}),"\n",(0,i.jsxs)(t.p,{children:["To do this, create a ",(0,i.jsx)(t.code,{children:"globals.d.ts"})," file in your ",(0,i.jsx)(t.code,{children:"./src"})," directory and add the following declaration:"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="globals.d.ts"',children:"declare module '*.st.css' {\n export * from '@stylable/runtime/stylesheet';\n\n const defaultExport: unknown;\n export default defaultExport;\n}\n"})}),"\n",(0,i.jsx)(t.h3,{id:"typing-3rd-party-stylesheets",children:"Typing 3rd-party stylesheets"}),"\n",(0,i.jsxs)(t.p,{children:["If your project generates ",(0,i.jsx)(t.code,{children:".d.ts"})," typings for each stylesheet but you're consuming a package that published ",(0,i.jsx)(t.code,{children:".st.css"})," files without typings, you will have to declare global typings for that specific package."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="globals.d.ts"',children:"declare module 'third-party-package/*.st.css' {\n export * from '@stylable/runtime/stylesheet';\n\n const defaultExport: unknown;\n export default defaultExport;\n}\n"})}),"\n",(0,i.jsx)(t.h2,{id:"publishing",children:"Publishing"}),"\n",(0,i.jsxs)(t.p,{children:["If you publish any ",(0,i.jsx)(t.code,{children:"*.st.css"})," files in your package, you should also publish the ",(0,i.jsx)(t.code,{children:".d.ts"})," and ",(0,i.jsx)(t.code,{children:".d.ts.map"})," files adjacent to them. This practice leads to a better experience for users consuming your project."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-sh",children:'stc --srcDir="src" --outDir="dist" --stcss --dts\n'})})]})}function h(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>l,x:()=>o});var n=s(6540);const i={},r=n.createContext(i);function l(e){const t=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/a6aa9e1f.6922b99d.js b/assets/js/a6aa9e1f.4afca62e.js similarity index 78% rename from assets/js/a6aa9e1f.6922b99d.js rename to assets/js/a6aa9e1f.4afca62e.js index eedb3de8..44c9bae3 100644 --- a/assets/js/a6aa9e1f.6922b99d.js +++ b/assets/js/a6aa9e1f.4afca62e.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[7643],{2783:(e,t,n)=>{n.r(t),n.d(t,{default:()=>m});n(6540);var a=n(4164),i=n(7639),s=n(6644),r=n(8630),l=n(6953),o=n(4934),c=n(1210),g=n(4331),p=n(1141),d=n(9101),x=n(4848);function b(e){const t=(0,d.kJ)(e);return(0,x.jsx)(p.A,{children:(0,x.jsx)("script",{type:"application/ld+json",children:JSON.stringify(t)})})}function h(e){const{metadata:t}=e,{siteConfig:{title:n}}=(0,i.A)(),{blogDescription:a,blogTitle:r,permalink:l}=t,o="/"===l?n:r;return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(s.be,{title:o,description:a}),(0,x.jsx)(c.A,{tag:"blog_posts_list"})]})}function j(e){const{metadata:t,items:n,sidebar:a}=e;return(0,x.jsxs)(l.A,{sidebar:a,children:[(0,x.jsx)(g.A,{items:n}),(0,x.jsx)(o.A,{metadata:t})]})}function m(e){return(0,x.jsxs)(s.e3,{className:(0,a.A)(r.G.wrapper.blogPages,r.G.page.blogListPage),children:[(0,x.jsx)(h,{...e}),(0,x.jsx)(b,{...e}),(0,x.jsx)(j,{...e})]})}},4934:(e,t,n)=>{n.d(t,{A:()=>r});n(6540);var a=n(3230),i=n(3555),s=n(4848);function r(e){const{metadata:t}=e,{previousPage:n,nextPage:r}=t;return(0,s.jsxs)("nav",{className:"pagination-nav","aria-label":(0,a.T)({id:"theme.blog.paginator.navAriaLabel",message:"Blog list page navigation",description:"The ARIA label for the blog pagination"}),children:[n&&(0,s.jsx)(i.A,{permalink:n,title:(0,s.jsx)(a.A,{id:"theme.blog.paginator.newerEntries",description:"The label used to navigate to the newer blog posts page (previous page)",children:"Newer entries"})}),r&&(0,s.jsx)(i.A,{permalink:r,title:(0,s.jsx)(a.A,{id:"theme.blog.paginator.olderEntries",description:"The label used to navigate to the older blog posts page (next page)",children:"Older entries"}),isNext:!0})]})}},4331:(e,t,n)=>{n.d(t,{A:()=>r});n(6540);var a=n(9101),i=n(8406),s=n(4848);function r(e){let{items:t,component:n=i.A}=e;return(0,s.jsx)(s.Fragment,{children:t.map((e=>{let{content:t}=e;return(0,s.jsx)(a.in,{content:t,children:(0,s.jsx)(n,{children:(0,s.jsx)(t,{})})},t.metadata.permalink)}))})}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[7643],{5124:(e,t,n)=>{n.r(t),n.d(t,{default:()=>m});n(6540);var a=n(4164),i=n(4586),s=n(1213),r=n(7559),l=n(8027),o=n(7713),c=n(1463),g=n(3892),p=n(5260),d=n(4096),x=n(4848);function b(e){const t=(0,d.kJ)(e);return(0,x.jsx)(p.A,{children:(0,x.jsx)("script",{type:"application/ld+json",children:JSON.stringify(t)})})}function h(e){const{metadata:t}=e,{siteConfig:{title:n}}=(0,i.A)(),{blogDescription:a,blogTitle:r,permalink:l}=t,o="/"===l?n:r;return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(s.be,{title:o,description:a}),(0,x.jsx)(c.A,{tag:"blog_posts_list"})]})}function j(e){const{metadata:t,items:n,sidebar:a}=e;return(0,x.jsxs)(l.A,{sidebar:a,children:[(0,x.jsx)(g.A,{items:n}),(0,x.jsx)(o.A,{metadata:t})]})}function m(e){return(0,x.jsxs)(s.e3,{className:(0,a.A)(r.G.wrapper.blogPages,r.G.page.blogListPage),children:[(0,x.jsx)(h,{...e}),(0,x.jsx)(b,{...e}),(0,x.jsx)(j,{...e})]})}},7713:(e,t,n)=>{n.d(t,{A:()=>r});n(6540);var a=n(1312),i=n(9022),s=n(4848);function r(e){const{metadata:t}=e,{previousPage:n,nextPage:r}=t;return(0,s.jsxs)("nav",{className:"pagination-nav","aria-label":(0,a.T)({id:"theme.blog.paginator.navAriaLabel",message:"Blog list page navigation",description:"The ARIA label for the blog pagination"}),children:[n&&(0,s.jsx)(i.A,{permalink:n,title:(0,s.jsx)(a.A,{id:"theme.blog.paginator.newerEntries",description:"The label used to navigate to the newer blog posts page (previous page)",children:"Newer entries"})}),r&&(0,s.jsx)(i.A,{permalink:r,title:(0,s.jsx)(a.A,{id:"theme.blog.paginator.olderEntries",description:"The label used to navigate to the older blog posts page (next page)",children:"Older entries"}),isNext:!0})]})}},3892:(e,t,n)=>{n.d(t,{A:()=>r});n(6540);var a=n(4096),i=n(4387),s=n(4848);function r(e){let{items:t,component:n=i.A}=e;return(0,s.jsx)(s.Fragment,{children:t.map((e=>{let{content:t}=e;return(0,s.jsx)(a.in,{content:t,children:(0,s.jsx)(n,{children:(0,s.jsx)(t,{})})},t.metadata.permalink)}))})}}}]); \ No newline at end of file diff --git a/assets/js/a7bd4aaa.6fbe4646.js b/assets/js/a7bd4aaa.579ec113.js similarity index 72% rename from assets/js/a7bd4aaa.6fbe4646.js rename to assets/js/a7bd4aaa.579ec113.js index 4c3624f9..52c7ecfb 100644 --- a/assets/js/a7bd4aaa.6fbe4646.js +++ b/assets/js/a7bd4aaa.579ec113.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[7098],{2881:(n,e,s)=>{s.r(e),s.d(e,{default:()=>x});s(6540);var r=s(6644),o=s(3718),t=s(1704),i=s(2831),l=s(1210),c=s(4848);function a(n){const{version:e}=n;return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(l.A,{version:e.version,tag:(0,o.k)(e.pluginId,e.version)}),(0,c.jsx)(r.be,{children:e.noIndex&&(0,c.jsx)("meta",{name:"robots",content:"noindex, nofollow"})})]})}function u(n){const{version:e,route:s}=n;return(0,c.jsx)(r.e3,{className:e.className,children:(0,c.jsx)(t.n,{version:e,children:(0,i.v)(s.routes)})})}function x(n){return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(a,{...n}),(0,c.jsx)(u,{...n})]})}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[7098],{4532:(n,e,s)=>{s.r(e),s.d(e,{default:()=>x});s(6540);var r=s(1213),o=s(2565),t=s(3025),i=s(2831),l=s(1463),c=s(4848);function a(n){const{version:e}=n;return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(l.A,{version:e.version,tag:(0,o.k)(e.pluginId,e.version)}),(0,c.jsx)(r.be,{children:e.noIndex&&(0,c.jsx)("meta",{name:"robots",content:"noindex, nofollow"})})]})}function u(n){const{version:e,route:s}=n;return(0,c.jsx)(r.e3,{className:e.className,children:(0,c.jsx)(t.n,{version:e,children:(0,i.v)(s.routes)})})}function x(n){return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(a,{...n}),(0,c.jsx)(u,{...n})]})}}}]); \ No newline at end of file diff --git a/assets/js/a94703ab.852b20e9.js b/assets/js/a94703ab.852b20e9.js new file mode 100644 index 00000000..d1417f0f --- /dev/null +++ b/assets/js/a94703ab.852b20e9.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[9048],{1377:(e,t,n)=>{n.r(t),n.d(t,{default:()=>pe});var a=n(6540),o=n(4164),i=n(1213),s=n(7559),l=n(6972),r=n(609),c=n(1312),d=n(3104),u=n(5062);const m={backToTopButton:"backToTopButton_sjWU",backToTopButtonShow:"backToTopButtonShow_xfvO"};var b=n(4848);function h(){const{shown:e,scrollToTop:t}=function(e){let{threshold:t}=e;const[n,o]=(0,a.useState)(!1),i=(0,a.useRef)(!1),{startScroll:s,cancelScroll:l}=(0,d.gk)();return(0,d.Mq)(((e,n)=>{let{scrollY:a}=e;const s=n?.scrollY;s&&(i.current?i.current=!1:a>=s?(l(),o(!1)):a<t?o(!1):a+window.innerHeight<document.documentElement.scrollHeight&&o(!0))})),(0,u.$)((e=>{e.location.hash&&(i.current=!0,o(!1))})),{shown:n,scrollToTop:()=>s(0)}}({threshold:300});return(0,b.jsx)("button",{"aria-label":(0,c.T)({id:"theme.BackToTopButton.buttonAriaLabel",message:"Scroll back to top",description:"The ARIA label for the back to top button"}),className:(0,o.A)("clean-btn",s.G.common.backToTopButton,m.backToTopButton,e&&m.backToTopButtonShow),type:"button",onClick:t})}var p=n(3109),x=n(6347),f=n(4581),j=n(6342),v=n(3465);function _(e){return(0,b.jsx)("svg",{width:"20",height:"20","aria-hidden":"true",...e,children:(0,b.jsxs)("g",{fill:"#7a7a7a",children:[(0,b.jsx)("path",{d:"M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"}),(0,b.jsx)("path",{d:"M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"})]})})}const g="collapseSidebarButton_PEFL",A="collapseSidebarButtonIcon_kv0_";function C(e){let{onClick:t}=e;return(0,b.jsx)("button",{type:"button",title:(0,c.T)({id:"theme.docs.sidebar.collapseButtonTitle",message:"Collapse sidebar",description:"The title attribute for collapse button of doc sidebar"}),"aria-label":(0,c.T)({id:"theme.docs.sidebar.collapseButtonAriaLabel",message:"Collapse sidebar",description:"The title attribute for collapse button of doc sidebar"}),className:(0,o.A)("button button--secondary button--outline",g),onClick:t,children:(0,b.jsx)(_,{className:A})})}var k=n(5041),S=n(9532);const T=Symbol("EmptyContext"),N=a.createContext(T);function I(e){let{children:t}=e;const[n,o]=(0,a.useState)(null),i=(0,a.useMemo)((()=>({expandedItem:n,setExpandedItem:o})),[n]);return(0,b.jsx)(N.Provider,{value:i,children:t})}var y=n(1422),B=n(9169),w=n(8774),L=n(2303);function E(e){let{collapsed:t,categoryLabel:n,onClick:a}=e;return(0,b.jsx)("button",{"aria-label":t?(0,c.T)({id:"theme.DocSidebarItem.expandCategoryAriaLabel",message:"Expand sidebar category '{label}'",description:"The ARIA label to expand the sidebar category"},{label:n}):(0,c.T)({id:"theme.DocSidebarItem.collapseCategoryAriaLabel",message:"Collapse sidebar category '{label}'",description:"The ARIA label to collapse the sidebar category"},{label:n}),"aria-expanded":!t,type:"button",className:"clean-btn menu__caret",onClick:a})}function M(e){let{item:t,onItemClick:n,activePath:i,level:r,index:c,...d}=e;const{items:u,label:m,collapsible:h,className:p,href:x}=t,{docs:{sidebar:{autoCollapseCategories:f}}}=(0,j.p)(),v=function(e){const t=(0,L.A)();return(0,a.useMemo)((()=>e.href&&!e.linkUnlisted?e.href:!t&&e.collapsible?(0,l.Nr)(e):void 0),[e,t])}(t),_=(0,l.w8)(t,i),g=(0,B.ys)(x,i),{collapsed:A,setCollapsed:C}=(0,y.u)({initialState:()=>!!h&&(!_&&t.collapsed)}),{expandedItem:k,setExpandedItem:I}=function(){const e=(0,a.useContext)(N);if(e===T)throw new S.dV("DocSidebarItemsExpandedStateProvider");return e}(),M=function(e){void 0===e&&(e=!A),I(e?null:c),C(e)};return function(e){let{isActive:t,collapsed:n,updateCollapsed:o}=e;const i=(0,S.ZC)(t);(0,a.useEffect)((()=>{t&&!i&&n&&o(!1)}),[t,i,n,o])}({isActive:_,collapsed:A,updateCollapsed:M}),(0,a.useEffect)((()=>{h&&null!=k&&k!==c&&f&&C(!0)}),[h,k,c,C,f]),(0,b.jsxs)("li",{className:(0,o.A)(s.G.docs.docSidebarItemCategory,s.G.docs.docSidebarItemCategoryLevel(r),"menu__list-item",{"menu__list-item--collapsed":A},p),children:[(0,b.jsxs)("div",{className:(0,o.A)("menu__list-item-collapsible",{"menu__list-item-collapsible--active":g}),children:[(0,b.jsx)(w.A,{className:(0,o.A)("menu__link",{"menu__link--sublist":h,"menu__link--sublist-caret":!x&&h,"menu__link--active":_}),onClick:h?e=>{n?.(t),x?M(!1):(e.preventDefault(),M())}:()=>{n?.(t)},"aria-current":g?"page":void 0,role:h&&!x?"button":void 0,"aria-expanded":h&&!x?!A:void 0,href:h?v??"#":v,...d,children:m}),x&&h&&(0,b.jsx)(E,{collapsed:A,categoryLabel:m,onClick:e=>{e.preventDefault(),M()}})]}),(0,b.jsx)(y.N,{lazy:!0,as:"ul",className:"menu__list",collapsed:A,children:(0,b.jsx)(V,{items:u,tabIndex:A?-1:0,onItemClick:n,activePath:i,level:r+1})})]})}var H=n(6654),G=n(3186);const P="menuExternalLink_NmtK";function R(e){let{item:t,onItemClick:n,activePath:a,level:i,index:r,...c}=e;const{href:d,label:u,className:m,autoAddBaseUrl:h}=t,p=(0,l.w8)(t,a),x=(0,H.A)(d);return(0,b.jsx)("li",{className:(0,o.A)(s.G.docs.docSidebarItemLink,s.G.docs.docSidebarItemLinkLevel(i),"menu__list-item",m),children:(0,b.jsxs)(w.A,{className:(0,o.A)("menu__link",!x&&P,{"menu__link--active":p}),autoAddBaseUrl:h,"aria-current":p?"page":void 0,to:d,...x&&{onClick:n?()=>n(t):void 0},...c,children:[u,!x&&(0,b.jsx)(G.A,{})]})},u)}const W="menuHtmlItem_M9Kj";function D(e){let{item:t,level:n,index:a}=e;const{value:i,defaultStyle:l,className:r}=t;return(0,b.jsx)("li",{className:(0,o.A)(s.G.docs.docSidebarItemLink,s.G.docs.docSidebarItemLinkLevel(n),l&&[W,"menu__list-item"],r),dangerouslySetInnerHTML:{__html:i}},a)}function F(e){let{item:t,...n}=e;switch(t.type){case"category":return(0,b.jsx)(M,{item:t,...n});case"html":return(0,b.jsx)(D,{item:t,...n});default:return(0,b.jsx)(R,{item:t,...n})}}function U(e){let{items:t,...n}=e;const a=(0,l.Y)(t,n.activePath);return(0,b.jsx)(I,{children:a.map(((e,t)=>(0,b.jsx)(F,{item:e,index:t,...n},t)))})}const V=(0,a.memo)(U),Y="menu_SIkG",K="menuWithAnnouncementBar_GW3s";function z(e){let{path:t,sidebar:n,className:i}=e;const l=function(){const{isActive:e}=(0,k.M)(),[t,n]=(0,a.useState)(e);return(0,d.Mq)((t=>{let{scrollY:a}=t;e&&n(0===a)}),[e]),e&&t}();return(0,b.jsx)("nav",{"aria-label":(0,c.T)({id:"theme.docs.sidebar.navAriaLabel",message:"Docs sidebar",description:"The ARIA label for the sidebar navigation"}),className:(0,o.A)("menu thin-scrollbar",Y,l&&K,i),children:(0,b.jsx)("ul",{className:(0,o.A)(s.G.docs.docSidebarMenu,"menu__list"),children:(0,b.jsx)(V,{items:n,activePath:t,level:1})})})}const q="sidebar_njMd",O="sidebarWithHideableNavbar_wUlq",J="sidebarHidden_VK0M",Q="sidebarLogo_isFc";function X(e){let{path:t,sidebar:n,onCollapse:a,isHidden:i}=e;const{navbar:{hideOnScroll:s},docs:{sidebar:{hideable:l}}}=(0,j.p)();return(0,b.jsxs)("div",{className:(0,o.A)(q,s&&O,i&&J),children:[s&&(0,b.jsx)(v.A,{tabIndex:-1,className:Q}),(0,b.jsx)(z,{path:t,sidebar:n}),l&&(0,b.jsx)(C,{onClick:a})]})}const Z=a.memo(X);var $=n(5600),ee=n(2069);const te=e=>{let{sidebar:t,path:n}=e;const a=(0,ee.M)();return(0,b.jsx)("ul",{className:(0,o.A)(s.G.docs.docSidebarMenu,"menu__list"),children:(0,b.jsx)(V,{items:t,activePath:n,onItemClick:e=>{"category"===e.type&&e.href&&a.toggle(),"link"===e.type&&a.toggle()},level:1})})};function ne(e){return(0,b.jsx)($.GX,{component:te,props:e})}const ae=a.memo(ne);function oe(e){const t=(0,f.l)(),n="desktop"===t||"ssr"===t,a="mobile"===t;return(0,b.jsxs)(b.Fragment,{children:[n&&(0,b.jsx)(Z,{...e}),a&&(0,b.jsx)(ae,{...e})]})}const ie={expandButton:"expandButton_TmdG",expandButtonIcon:"expandButtonIcon_i1dp"};function se(e){let{toggleSidebar:t}=e;return(0,b.jsx)("div",{className:ie.expandButton,title:(0,c.T)({id:"theme.docs.sidebar.expandButtonTitle",message:"Expand sidebar",description:"The ARIA label and title attribute for expand button of doc sidebar"}),"aria-label":(0,c.T)({id:"theme.docs.sidebar.expandButtonAriaLabel",message:"Expand sidebar",description:"The ARIA label and title attribute for expand button of doc sidebar"}),tabIndex:0,role:"button",onKeyDown:t,onClick:t,children:(0,b.jsx)(_,{className:ie.expandButtonIcon})})}const le={docSidebarContainer:"docSidebarContainer_YfHR",docSidebarContainerHidden:"docSidebarContainerHidden_DPk8",sidebarViewport:"sidebarViewport_aRkj"};function re(e){let{children:t}=e;const n=(0,r.t)();return(0,b.jsx)(a.Fragment,{children:t},n?.name??"noSidebar")}function ce(e){let{sidebar:t,hiddenSidebarContainer:n,setHiddenSidebarContainer:i}=e;const{pathname:l}=(0,x.zy)(),[r,c]=(0,a.useState)(!1),d=(0,a.useCallback)((()=>{r&&c(!1),!r&&(0,p.O)()&&c(!0),i((e=>!e))}),[i,r]);return(0,b.jsx)("aside",{className:(0,o.A)(s.G.docs.docSidebarContainer,le.docSidebarContainer,n&&le.docSidebarContainerHidden),onTransitionEnd:e=>{e.currentTarget.classList.contains(le.docSidebarContainer)&&n&&c(!0)},children:(0,b.jsx)(re,{children:(0,b.jsxs)("div",{className:(0,o.A)(le.sidebarViewport,r&&le.sidebarViewportHidden),children:[(0,b.jsx)(oe,{sidebar:t,path:l,onCollapse:d,isHidden:r}),r&&(0,b.jsx)(se,{toggleSidebar:d})]})})})}const de={docMainContainer:"docMainContainer_TBSr",docMainContainerEnhanced:"docMainContainerEnhanced_lQrH",docItemWrapperEnhanced:"docItemWrapperEnhanced_JWYK"};function ue(e){let{hiddenSidebarContainer:t,children:n}=e;const a=(0,r.t)();return(0,b.jsx)("main",{className:(0,o.A)(de.docMainContainer,(t||!a)&&de.docMainContainerEnhanced),children:(0,b.jsx)("div",{className:(0,o.A)("container padding-top--md padding-bottom--lg",de.docItemWrapper,t&&de.docItemWrapperEnhanced),children:n})})}const me={docRoot:"docRoot_UBD9",docsWrapper:"docsWrapper_hBAB"};function be(e){let{children:t}=e;const n=(0,r.t)(),[o,i]=(0,a.useState)(!1);return(0,b.jsxs)("div",{className:me.docsWrapper,children:[(0,b.jsx)(h,{}),(0,b.jsxs)("div",{className:me.docRoot,children:[n&&(0,b.jsx)(ce,{sidebar:n.items,hiddenSidebarContainer:o,setHiddenSidebarContainer:i}),(0,b.jsx)(ue,{hiddenSidebarContainer:o,children:t})]})]})}var he=n(3363);function pe(e){const t=(0,l.B5)(e);if(!t)return(0,b.jsx)(he.A,{});const{docElement:n,sidebarName:a,sidebarItems:c}=t;return(0,b.jsx)(i.e3,{className:(0,o.A)(s.G.page.docsDocPage),children:(0,b.jsx)(r.V,{name:a,items:c,children:(0,b.jsx)(be,{children:n})})})}},3363:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var a=n(4164),o=n(1312),i=n(1107),s=n(4848);function l(e){let{className:t}=e;return(0,s.jsx)("main",{className:(0,a.A)("container margin-vert--xl",t),children:(0,s.jsx)("div",{className:"row",children:(0,s.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,s.jsx)(i.A,{as:"h1",className:"hero__title",children:(0,s.jsx)(o.A,{id:"theme.NotFound.title",description:"The title of the 404 page",children:"Page Not Found"})}),(0,s.jsx)("p",{children:(0,s.jsx)(o.A,{id:"theme.NotFound.p1",description:"The first paragraph of the 404 page",children:"We could not find what you were looking for."})}),(0,s.jsx)("p",{children:(0,s.jsx)(o.A,{id:"theme.NotFound.p2",description:"The 2nd paragraph of the 404 page",children:"Please contact the owner of the site that linked you to the original URL and let them know their link is broken."})})]})})})}}}]); \ No newline at end of file diff --git a/assets/js/a94703ab.94ecb513.js b/assets/js/a94703ab.94ecb513.js deleted file mode 100644 index 8a591ccb..00000000 --- a/assets/js/a94703ab.94ecb513.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[9048],{8001:(e,t,n)=>{n.r(t),n.d(t,{default:()=>pe});var a=n(6540),o=n(4164),i=n(6644),s=n(8630),l=n(5357),r=n(40),c=n(3230),d=n(4245),u=n(4067);const m={backToTopButton:"backToTopButton_sjWU",backToTopButtonShow:"backToTopButtonShow_xfvO"};var b=n(4848);function h(){const{shown:e,scrollToTop:t}=function(e){let{threshold:t}=e;const[n,o]=(0,a.useState)(!1),i=(0,a.useRef)(!1),{startScroll:s,cancelScroll:l}=(0,d.gk)();return(0,d.Mq)(((e,n)=>{let{scrollY:a}=e;const s=n?.scrollY;s&&(i.current?i.current=!1:a>=s?(l(),o(!1)):a<t?o(!1):a+window.innerHeight<document.documentElement.scrollHeight&&o(!0))})),(0,u.$)((e=>{e.location.hash&&(i.current=!0,o(!1))})),{shown:n,scrollToTop:()=>s(0)}}({threshold:300});return(0,b.jsx)("button",{"aria-label":(0,c.T)({id:"theme.BackToTopButton.buttonAriaLabel",message:"Scroll back to top",description:"The ARIA label for the back to top button"}),className:(0,o.A)("clean-btn",s.G.common.backToTopButton,m.backToTopButton,e&&m.backToTopButtonShow),type:"button",onClick:t})}var p=n(6350),x=n(6347),f=n(2216),j=n(6957),v=n(20);function _(e){return(0,b.jsx)("svg",{width:"20",height:"20","aria-hidden":"true",...e,children:(0,b.jsxs)("g",{fill:"#7a7a7a",children:[(0,b.jsx)("path",{d:"M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"}),(0,b.jsx)("path",{d:"M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"})]})})}const g="collapseSidebarButton_PEFL",A="collapseSidebarButtonIcon_kv0_";function C(e){let{onClick:t}=e;return(0,b.jsx)("button",{type:"button",title:(0,c.T)({id:"theme.docs.sidebar.collapseButtonTitle",message:"Collapse sidebar",description:"The title attribute for collapse button of doc sidebar"}),"aria-label":(0,c.T)({id:"theme.docs.sidebar.collapseButtonAriaLabel",message:"Collapse sidebar",description:"The title attribute for collapse button of doc sidebar"}),className:(0,o.A)("button button--secondary button--outline",g),onClick:t,children:(0,b.jsx)(_,{className:A})})}var k=n(2),S=n(4799);const T=Symbol("EmptyContext"),N=a.createContext(T);function I(e){let{children:t}=e;const[n,o]=(0,a.useState)(null),i=(0,a.useMemo)((()=>({expandedItem:n,setExpandedItem:o})),[n]);return(0,b.jsx)(N.Provider,{value:i,children:t})}var y=n(4549),B=n(260),w=n(4783),L=n(1062);function E(e){let{collapsed:t,categoryLabel:n,onClick:a}=e;return(0,b.jsx)("button",{"aria-label":t?(0,c.T)({id:"theme.DocSidebarItem.expandCategoryAriaLabel",message:"Expand sidebar category '{label}'",description:"The ARIA label to expand the sidebar category"},{label:n}):(0,c.T)({id:"theme.DocSidebarItem.collapseCategoryAriaLabel",message:"Collapse sidebar category '{label}'",description:"The ARIA label to collapse the sidebar category"},{label:n}),"aria-expanded":!t,type:"button",className:"clean-btn menu__caret",onClick:a})}function M(e){let{item:t,onItemClick:n,activePath:i,level:r,index:c,...d}=e;const{items:u,label:m,collapsible:h,className:p,href:x}=t,{docs:{sidebar:{autoCollapseCategories:f}}}=(0,j.p)(),v=function(e){const t=(0,L.A)();return(0,a.useMemo)((()=>e.href&&!e.linkUnlisted?e.href:!t&&e.collapsible?(0,l.Nr)(e):void 0),[e,t])}(t),_=(0,l.w8)(t,i),g=(0,B.ys)(x,i),{collapsed:A,setCollapsed:C}=(0,y.u)({initialState:()=>!!h&&(!_&&t.collapsed)}),{expandedItem:k,setExpandedItem:I}=function(){const e=(0,a.useContext)(N);if(e===T)throw new S.dV("DocSidebarItemsExpandedStateProvider");return e}(),M=function(e){void 0===e&&(e=!A),I(e?null:c),C(e)};return function(e){let{isActive:t,collapsed:n,updateCollapsed:o}=e;const i=(0,S.ZC)(t);(0,a.useEffect)((()=>{t&&!i&&n&&o(!1)}),[t,i,n,o])}({isActive:_,collapsed:A,updateCollapsed:M}),(0,a.useEffect)((()=>{h&&null!=k&&k!==c&&f&&C(!0)}),[h,k,c,C,f]),(0,b.jsxs)("li",{className:(0,o.A)(s.G.docs.docSidebarItemCategory,s.G.docs.docSidebarItemCategoryLevel(r),"menu__list-item",{"menu__list-item--collapsed":A},p),children:[(0,b.jsxs)("div",{className:(0,o.A)("menu__list-item-collapsible",{"menu__list-item-collapsible--active":g}),children:[(0,b.jsx)(w.A,{className:(0,o.A)("menu__link",{"menu__link--sublist":h,"menu__link--sublist-caret":!x&&h,"menu__link--active":_}),onClick:h?e=>{n?.(t),x?M(!1):(e.preventDefault(),M())}:()=>{n?.(t)},"aria-current":g?"page":void 0,role:h&&!x?"button":void 0,"aria-expanded":h&&!x?!A:void 0,href:h?v??"#":v,...d,children:m}),x&&h&&(0,b.jsx)(E,{collapsed:A,categoryLabel:m,onClick:e=>{e.preventDefault(),M()}})]}),(0,b.jsx)(y.N,{lazy:!0,as:"ul",className:"menu__list",collapsed:A,children:(0,b.jsx)(V,{items:u,tabIndex:A?-1:0,onItemClick:n,activePath:i,level:r+1})})]})}var H=n(877),G=n(716);const P="menuExternalLink_NmtK";function R(e){let{item:t,onItemClick:n,activePath:a,level:i,index:r,...c}=e;const{href:d,label:u,className:m,autoAddBaseUrl:h}=t,p=(0,l.w8)(t,a),x=(0,H.A)(d);return(0,b.jsx)("li",{className:(0,o.A)(s.G.docs.docSidebarItemLink,s.G.docs.docSidebarItemLinkLevel(i),"menu__list-item",m),children:(0,b.jsxs)(w.A,{className:(0,o.A)("menu__link",!x&&P,{"menu__link--active":p}),autoAddBaseUrl:h,"aria-current":p?"page":void 0,to:d,...x&&{onClick:n?()=>n(t):void 0},...c,children:[u,!x&&(0,b.jsx)(G.A,{})]})},u)}const W="menuHtmlItem_M9Kj";function D(e){let{item:t,level:n,index:a}=e;const{value:i,defaultStyle:l,className:r}=t;return(0,b.jsx)("li",{className:(0,o.A)(s.G.docs.docSidebarItemLink,s.G.docs.docSidebarItemLinkLevel(n),l&&[W,"menu__list-item"],r),dangerouslySetInnerHTML:{__html:i}},a)}function F(e){let{item:t,...n}=e;switch(t.type){case"category":return(0,b.jsx)(M,{item:t,...n});case"html":return(0,b.jsx)(D,{item:t,...n});default:return(0,b.jsx)(R,{item:t,...n})}}function U(e){let{items:t,...n}=e;const a=(0,l.Y)(t,n.activePath);return(0,b.jsx)(I,{children:a.map(((e,t)=>(0,b.jsx)(F,{item:e,index:t,...n},t)))})}const V=(0,a.memo)(U),Y="menu_SIkG",K="menuWithAnnouncementBar_GW3s";function z(e){let{path:t,sidebar:n,className:i}=e;const l=function(){const{isActive:e}=(0,k.M)(),[t,n]=(0,a.useState)(e);return(0,d.Mq)((t=>{let{scrollY:a}=t;e&&n(0===a)}),[e]),e&&t}();return(0,b.jsx)("nav",{"aria-label":(0,c.T)({id:"theme.docs.sidebar.navAriaLabel",message:"Docs sidebar",description:"The ARIA label for the sidebar navigation"}),className:(0,o.A)("menu thin-scrollbar",Y,l&&K,i),children:(0,b.jsx)("ul",{className:(0,o.A)(s.G.docs.docSidebarMenu,"menu__list"),children:(0,b.jsx)(V,{items:n,activePath:t,level:1})})})}const q="sidebar_njMd",O="sidebarWithHideableNavbar_wUlq",J="sidebarHidden_VK0M",Q="sidebarLogo_isFc";function X(e){let{path:t,sidebar:n,onCollapse:a,isHidden:i}=e;const{navbar:{hideOnScroll:s},docs:{sidebar:{hideable:l}}}=(0,j.p)();return(0,b.jsxs)("div",{className:(0,o.A)(q,s&&O,i&&J),children:[s&&(0,b.jsx)(v.A,{tabIndex:-1,className:Q}),(0,b.jsx)(z,{path:t,sidebar:n}),l&&(0,b.jsx)(C,{onClick:a})]})}const Z=a.memo(X);var $=n(763),ee=n(1938);const te=e=>{let{sidebar:t,path:n}=e;const a=(0,ee.M)();return(0,b.jsx)("ul",{className:(0,o.A)(s.G.docs.docSidebarMenu,"menu__list"),children:(0,b.jsx)(V,{items:t,activePath:n,onItemClick:e=>{"category"===e.type&&e.href&&a.toggle(),"link"===e.type&&a.toggle()},level:1})})};function ne(e){return(0,b.jsx)($.GX,{component:te,props:e})}const ae=a.memo(ne);function oe(e){const t=(0,f.l)(),n="desktop"===t||"ssr"===t,a="mobile"===t;return(0,b.jsxs)(b.Fragment,{children:[n&&(0,b.jsx)(Z,{...e}),a&&(0,b.jsx)(ae,{...e})]})}const ie={expandButton:"expandButton_TmdG",expandButtonIcon:"expandButtonIcon_i1dp"};function se(e){let{toggleSidebar:t}=e;return(0,b.jsx)("div",{className:ie.expandButton,title:(0,c.T)({id:"theme.docs.sidebar.expandButtonTitle",message:"Expand sidebar",description:"The ARIA label and title attribute for expand button of doc sidebar"}),"aria-label":(0,c.T)({id:"theme.docs.sidebar.expandButtonAriaLabel",message:"Expand sidebar",description:"The ARIA label and title attribute for expand button of doc sidebar"}),tabIndex:0,role:"button",onKeyDown:t,onClick:t,children:(0,b.jsx)(_,{className:ie.expandButtonIcon})})}const le={docSidebarContainer:"docSidebarContainer_YfHR",docSidebarContainerHidden:"docSidebarContainerHidden_DPk8",sidebarViewport:"sidebarViewport_aRkj"};function re(e){let{children:t}=e;const n=(0,r.t)();return(0,b.jsx)(a.Fragment,{children:t},n?.name??"noSidebar")}function ce(e){let{sidebar:t,hiddenSidebarContainer:n,setHiddenSidebarContainer:i}=e;const{pathname:l}=(0,x.zy)(),[r,c]=(0,a.useState)(!1),d=(0,a.useCallback)((()=>{r&&c(!1),!r&&(0,p.O)()&&c(!0),i((e=>!e))}),[i,r]);return(0,b.jsx)("aside",{className:(0,o.A)(s.G.docs.docSidebarContainer,le.docSidebarContainer,n&&le.docSidebarContainerHidden),onTransitionEnd:e=>{e.currentTarget.classList.contains(le.docSidebarContainer)&&n&&c(!0)},children:(0,b.jsx)(re,{children:(0,b.jsxs)("div",{className:(0,o.A)(le.sidebarViewport,r&&le.sidebarViewportHidden),children:[(0,b.jsx)(oe,{sidebar:t,path:l,onCollapse:d,isHidden:r}),r&&(0,b.jsx)(se,{toggleSidebar:d})]})})})}const de={docMainContainer:"docMainContainer_TBSr",docMainContainerEnhanced:"docMainContainerEnhanced_lQrH",docItemWrapperEnhanced:"docItemWrapperEnhanced_JWYK"};function ue(e){let{hiddenSidebarContainer:t,children:n}=e;const a=(0,r.t)();return(0,b.jsx)("main",{className:(0,o.A)(de.docMainContainer,(t||!a)&&de.docMainContainerEnhanced),children:(0,b.jsx)("div",{className:(0,o.A)("container padding-top--md padding-bottom--lg",de.docItemWrapper,t&&de.docItemWrapperEnhanced),children:n})})}const me={docRoot:"docRoot_UBD9",docsWrapper:"docsWrapper_hBAB"};function be(e){let{children:t}=e;const n=(0,r.t)(),[o,i]=(0,a.useState)(!1);return(0,b.jsxs)("div",{className:me.docsWrapper,children:[(0,b.jsx)(h,{}),(0,b.jsxs)("div",{className:me.docRoot,children:[n&&(0,b.jsx)(ce,{sidebar:n.items,hiddenSidebarContainer:o,setHiddenSidebarContainer:i}),(0,b.jsx)(ue,{hiddenSidebarContainer:o,children:t})]})]})}var he=n(3510);function pe(e){const t=(0,l.B5)(e);if(!t)return(0,b.jsx)(he.A,{});const{docElement:n,sidebarName:a,sidebarItems:c}=t;return(0,b.jsx)(i.e3,{className:(0,o.A)(s.G.page.docsDocPage),children:(0,b.jsx)(r.V,{name:a,items:c,children:(0,b.jsx)(be,{children:n})})})}},3510:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var a=n(4164),o=n(3230),i=n(5225),s=n(4848);function l(e){let{className:t}=e;return(0,s.jsx)("main",{className:(0,a.A)("container margin-vert--xl",t),children:(0,s.jsx)("div",{className:"row",children:(0,s.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,s.jsx)(i.A,{as:"h1",className:"hero__title",children:(0,s.jsx)(o.A,{id:"theme.NotFound.title",description:"The title of the 404 page",children:"Page Not Found"})}),(0,s.jsx)("p",{children:(0,s.jsx)(o.A,{id:"theme.NotFound.p1",description:"The first paragraph of the 404 page",children:"We could not find what you were looking for."})}),(0,s.jsx)("p",{children:(0,s.jsx)(o.A,{id:"theme.NotFound.p2",description:"The 2nd paragraph of the 404 page",children:"Please contact the owner of the site that linked you to the original URL and let them know their link is broken."})})]})})})}}}]); \ No newline at end of file diff --git a/assets/js/ab324915.7830ce66.js b/assets/js/ab324915.01adaa12.js similarity index 99% rename from assets/js/ab324915.7830ce66.js rename to assets/js/ab324915.01adaa12.js index ab5ff615..5177b0e9 100644 --- a/assets/js/ab324915.7830ce66.js +++ b/assets/js/ab324915.01adaa12.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[6722],{9158:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>r,contentTitle:()=>s,default:()=>d,frontMatter:()=>l,metadata:()=>n,toc:()=>h});var n=o(5958),a=o(4848),i=o(8453);const l={title:"Welcome to Stylable v5",description:"Launching Stylable Version 5",slug:"welcome-to-stylable-v5",authors:[{name:"Barak Igal",title:"Co-creator of Stylable",url:"https://github.com/barak007",image_url:"https://github.com/barak007.png"},{name:"Ido Rosenthal",title:"Co-creator of Stylable",url:"https://twitter.com/idoros",image_url:"https://github.com/idoros.png"},{name:"Tom Raviv",title:"Co-creator of Stylable",url:"https://twitter.com/RavivTom",image_url:"https://github.com/tomrav.png"}],tags:["intro","release"],image:"/img/synthwave-space-logo.png",hide_table_of_contents:!1},s=void 0,r={authorsImageUrls:[void 0,void 0,void 0]},h=[{value:"First time hearing about Stylable?",id:"first-time-hearing-about-stylable",level:2},{value:"What went on behind the scenes?",id:"what-went-on-behind-the-scenes",level:2},{value:"What have we been up to recently?",id:"what-have-we-been-up-to-recently",level:2},{value:"Additional highlights",id:"additional-highlights",level:3},{value:"What's next for Stylable?",id:"whats-next-for-stylable",level:2}];function c(e){const t={a:"a",admonition:"admonition",em:"em",h2:"h2",h3:"h3",li:"li",p:"p",ul:"ul",...(0,i.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.h2,{id:"first-time-hearing-about-stylable",children:"First time hearing about Stylable?"}),"\n",(0,a.jsx)(t.p,{children:"No worries! Stylable is a tool that empowers you to create safe, reusable style APIs for your components. It's a superset of CSS that adds a type system to it, providing type safety, and powerful language capabilities."}),"\n",(0,a.jsxs)(t.p,{children:["Want to learn more? We recently started writing a ",(0,a.jsx)(t.a,{href:"/docs/guides/handbook/intro",children:"new handbook"})," to help get you up to speed, and more content is on its way over the coming weeks."]}),"\n",(0,a.jsx)(t.h2,{id:"what-went-on-behind-the-scenes",children:"What went on behind the scenes?"}),"\n",(0,a.jsx)(t.p,{children:"Over the last couple of years, we focused on developing Stylable internally in Wix, building it into an entire tooling ecosystem."}),"\n",(0,a.jsx)(t.p,{children:"We integrated Stylable across Wix.com, both for internal tools and user-facing components. We stress-tested the project, making sure it meets our requirements. Today, Stylable helps power over 50 million user websites, and is the de facto styling solution for new projects and new user-facing components."}),"\n",(0,a.jsx)(t.h2,{id:"what-have-we-been-up-to-recently",children:"What have we been up to recently?"}),"\n",(0,a.jsxs)(t.p,{children:["We recently released ",(0,a.jsx)(t.a,{href:"https://github.com/wix/stylable/releases/tag/v5.0.0",children:"Stylable v5"}),", and we're excited to share it with the community."]}),"\n",(0,a.jsx)(t.p,{children:"Version 5 includes considerable refactoring and clean up of the Stylable core package to make it more robust, and its programmatic API more accessible."}),"\n",(0,a.jsxs)(t.p,{children:["If you encounter any bugs or issues, please open an issue on our ",(0,a.jsx)(t.a,{href:"https://github.com/wix/stylable/issues",children:"GitHub repository"}),"."]}),"\n",(0,a.jsx)(t.h3,{id:"additional-highlights",children:"Additional highlights"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["We added a ",(0,a.jsx)(t.a,{href:"https://stylable.io/playground",children:"new playground"})," to help developers learn and experiment with Stylable."]}),"\n",(0,a.jsx)(t.li,{children:"With monorepo projects becoming more and more common, we've made (and continue to make) improvements to how Stylable and our CLI handle them."}),"\n",(0,a.jsx)(t.li,{children:"Lastly, we've been focused on refining and expanding our documentation, adding new guides, refactoring our API reference to a standard format, and improving the overall reading experience."}),"\n"]}),"\n",(0,a.jsx)(t.h2,{id:"whats-next-for-stylable",children:"What's next for Stylable?"}),"\n",(0,a.jsx)(t.p,{children:"Many new features are planned for Stylable, including the expansion of the type system to cover even more of CSS, and to create new integrations for emerging tools and technologies."}),"\n",(0,a.jsx)(t.p,{children:"CSS as a language has been rapidly progressing recently, with functionality increasing as the language expands. We're following the language closely as its specs progress, and we'll focus our efforts so that Stylable continues to offer the best possible experience over CSS at any time."}),"\n",(0,a.jsx)(t.p,{children:"Although it's always been open-source, we feel like this is the time for us to introduce Stylable back to the web development community, and to hopefully show people how Stylable can make their development experience better. In the coming weeks, we'll be expanding our guides, examples, and documentation to make it even easier to onboard new users."}),"\n",(0,a.jsx)(t.admonition,{title:"join the community",type:"tip",children:(0,a.jsxs)(t.p,{children:["Want to be a part of the discussion? See our ongoing development on ",(0,a.jsx)(t.a,{href:"https://github.com/wix/stylable",children:"GitHub"}),", follow us on ",(0,a.jsx)(t.a,{href:"https://twitter.com/stylableio",children:"Twitter"}),", and join the ",(0,a.jsx)(t.a,{href:"https://discord.gg/C5ZhENSbV7",children:"Discord"})," where we're always up for a chat about styling."]})}),"\n",(0,a.jsx)(t.p,{children:"We hope you'll join us on this journey, and we're looking forward to hearing your feedback."}),"\n",(0,a.jsxs)(t.p,{children:["- ",(0,a.jsx)(t.em,{children:"The Stylable team"})]})]})}function d(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(c,{...e})}):c(e)}},8453:(e,t,o)=>{o.d(t,{R:()=>l,x:()=>s});var n=o(6540);const a={},i=n.createContext(a);function l(e){const t=n.useContext(i);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:l(e.components),n.createElement(i.Provider,{value:t},e.children)}},5958:e=>{e.exports=JSON.parse('{"permalink":"/blog/welcome-to-stylable-v5","editUrl":"https://github.com/wixplosives/stylable.io/edit/master/blog/2022-08-04-welcome-to-stylable-v5.md","source":"@site/blog/2022-08-04-welcome-to-stylable-v5.md","title":"Welcome to Stylable v5","description":"Launching Stylable Version 5","date":"2022-08-04T00:00:00.000Z","tags":[{"inline":true,"label":"intro","permalink":"/blog/tags/intro"},{"inline":true,"label":"release","permalink":"/blog/tags/release"}],"readingTime":2.355,"hasTruncateMarker":true,"authors":[{"name":"Barak Igal","title":"Co-creator of Stylable","url":"https://github.com/barak007","image_url":"https://github.com/barak007.png","imageURL":"https://github.com/barak007.png","socials":{},"key":null,"page":null},{"name":"Ido Rosenthal","title":"Co-creator of Stylable","url":"https://twitter.com/idoros","image_url":"https://github.com/idoros.png","imageURL":"https://github.com/idoros.png","socials":{},"key":null,"page":null},{"name":"Tom Raviv","title":"Co-creator of Stylable","url":"https://twitter.com/RavivTom","image_url":"https://github.com/tomrav.png","imageURL":"https://github.com/tomrav.png","socials":{},"key":null,"page":null}],"frontMatter":{"title":"Welcome to Stylable v5","description":"Launching Stylable Version 5","slug":"welcome-to-stylable-v5","authors":[{"name":"Barak Igal","title":"Co-creator of Stylable","url":"https://github.com/barak007","image_url":"https://github.com/barak007.png","imageURL":"https://github.com/barak007.png"},{"name":"Ido Rosenthal","title":"Co-creator of Stylable","url":"https://twitter.com/idoros","image_url":"https://github.com/idoros.png","imageURL":"https://github.com/idoros.png"},{"name":"Tom Raviv","title":"Co-creator of Stylable","url":"https://twitter.com/RavivTom","image_url":"https://github.com/tomrav.png","imageURL":"https://github.com/tomrav.png"}],"tags":["intro","release"],"image":"/img/synthwave-space-logo.png","hide_table_of_contents":false},"unlisted":false}')}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[6722],{4454:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>r,contentTitle:()=>s,default:()=>d,frontMatter:()=>l,metadata:()=>n,toc:()=>h});var n=o(5958),a=o(4848),i=o(8453);const l={title:"Welcome to Stylable v5",description:"Launching Stylable Version 5",slug:"welcome-to-stylable-v5",authors:[{name:"Barak Igal",title:"Co-creator of Stylable",url:"https://github.com/barak007",image_url:"https://github.com/barak007.png"},{name:"Ido Rosenthal",title:"Co-creator of Stylable",url:"https://twitter.com/idoros",image_url:"https://github.com/idoros.png"},{name:"Tom Raviv",title:"Co-creator of Stylable",url:"https://twitter.com/RavivTom",image_url:"https://github.com/tomrav.png"}],tags:["intro","release"],image:"/img/synthwave-space-logo.png",hide_table_of_contents:!1},s=void 0,r={authorsImageUrls:[void 0,void 0,void 0]},h=[{value:"First time hearing about Stylable?",id:"first-time-hearing-about-stylable",level:2},{value:"What went on behind the scenes?",id:"what-went-on-behind-the-scenes",level:2},{value:"What have we been up to recently?",id:"what-have-we-been-up-to-recently",level:2},{value:"Additional highlights",id:"additional-highlights",level:3},{value:"What's next for Stylable?",id:"whats-next-for-stylable",level:2}];function c(e){const t={a:"a",admonition:"admonition",em:"em",h2:"h2",h3:"h3",li:"li",p:"p",ul:"ul",...(0,i.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.h2,{id:"first-time-hearing-about-stylable",children:"First time hearing about Stylable?"}),"\n",(0,a.jsx)(t.p,{children:"No worries! Stylable is a tool that empowers you to create safe, reusable style APIs for your components. It's a superset of CSS that adds a type system to it, providing type safety, and powerful language capabilities."}),"\n",(0,a.jsxs)(t.p,{children:["Want to learn more? We recently started writing a ",(0,a.jsx)(t.a,{href:"/docs/guides/handbook/intro",children:"new handbook"})," to help get you up to speed, and more content is on its way over the coming weeks."]}),"\n",(0,a.jsx)(t.h2,{id:"what-went-on-behind-the-scenes",children:"What went on behind the scenes?"}),"\n",(0,a.jsx)(t.p,{children:"Over the last couple of years, we focused on developing Stylable internally in Wix, building it into an entire tooling ecosystem."}),"\n",(0,a.jsx)(t.p,{children:"We integrated Stylable across Wix.com, both for internal tools and user-facing components. We stress-tested the project, making sure it meets our requirements. Today, Stylable helps power over 50 million user websites, and is the de facto styling solution for new projects and new user-facing components."}),"\n",(0,a.jsx)(t.h2,{id:"what-have-we-been-up-to-recently",children:"What have we been up to recently?"}),"\n",(0,a.jsxs)(t.p,{children:["We recently released ",(0,a.jsx)(t.a,{href:"https://github.com/wix/stylable/releases/tag/v5.0.0",children:"Stylable v5"}),", and we're excited to share it with the community."]}),"\n",(0,a.jsx)(t.p,{children:"Version 5 includes considerable refactoring and clean up of the Stylable core package to make it more robust, and its programmatic API more accessible."}),"\n",(0,a.jsxs)(t.p,{children:["If you encounter any bugs or issues, please open an issue on our ",(0,a.jsx)(t.a,{href:"https://github.com/wix/stylable/issues",children:"GitHub repository"}),"."]}),"\n",(0,a.jsx)(t.h3,{id:"additional-highlights",children:"Additional highlights"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["We added a ",(0,a.jsx)(t.a,{href:"https://stylable.io/playground",children:"new playground"})," to help developers learn and experiment with Stylable."]}),"\n",(0,a.jsx)(t.li,{children:"With monorepo projects becoming more and more common, we've made (and continue to make) improvements to how Stylable and our CLI handle them."}),"\n",(0,a.jsx)(t.li,{children:"Lastly, we've been focused on refining and expanding our documentation, adding new guides, refactoring our API reference to a standard format, and improving the overall reading experience."}),"\n"]}),"\n",(0,a.jsx)(t.h2,{id:"whats-next-for-stylable",children:"What's next for Stylable?"}),"\n",(0,a.jsx)(t.p,{children:"Many new features are planned for Stylable, including the expansion of the type system to cover even more of CSS, and to create new integrations for emerging tools and technologies."}),"\n",(0,a.jsx)(t.p,{children:"CSS as a language has been rapidly progressing recently, with functionality increasing as the language expands. We're following the language closely as its specs progress, and we'll focus our efforts so that Stylable continues to offer the best possible experience over CSS at any time."}),"\n",(0,a.jsx)(t.p,{children:"Although it's always been open-source, we feel like this is the time for us to introduce Stylable back to the web development community, and to hopefully show people how Stylable can make their development experience better. In the coming weeks, we'll be expanding our guides, examples, and documentation to make it even easier to onboard new users."}),"\n",(0,a.jsx)(t.admonition,{title:"join the community",type:"tip",children:(0,a.jsxs)(t.p,{children:["Want to be a part of the discussion? See our ongoing development on ",(0,a.jsx)(t.a,{href:"https://github.com/wix/stylable",children:"GitHub"}),", follow us on ",(0,a.jsx)(t.a,{href:"https://twitter.com/stylableio",children:"Twitter"}),", and join the ",(0,a.jsx)(t.a,{href:"https://discord.gg/C5ZhENSbV7",children:"Discord"})," where we're always up for a chat about styling."]})}),"\n",(0,a.jsx)(t.p,{children:"We hope you'll join us on this journey, and we're looking forward to hearing your feedback."}),"\n",(0,a.jsxs)(t.p,{children:["- ",(0,a.jsx)(t.em,{children:"The Stylable team"})]})]})}function d(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(c,{...e})}):c(e)}},8453:(e,t,o)=>{o.d(t,{R:()=>l,x:()=>s});var n=o(6540);const a={},i=n.createContext(a);function l(e){const t=n.useContext(i);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:l(e.components),n.createElement(i.Provider,{value:t},e.children)}},5958:e=>{e.exports=JSON.parse('{"permalink":"/blog/welcome-to-stylable-v5","editUrl":"https://github.com/wixplosives/stylable.io/edit/master/blog/2022-08-04-welcome-to-stylable-v5.md","source":"@site/blog/2022-08-04-welcome-to-stylable-v5.md","title":"Welcome to Stylable v5","description":"Launching Stylable Version 5","date":"2022-08-04T00:00:00.000Z","tags":[{"inline":true,"label":"intro","permalink":"/blog/tags/intro"},{"inline":true,"label":"release","permalink":"/blog/tags/release"}],"readingTime":2.355,"hasTruncateMarker":true,"authors":[{"name":"Barak Igal","title":"Co-creator of Stylable","url":"https://github.com/barak007","image_url":"https://github.com/barak007.png","imageURL":"https://github.com/barak007.png","socials":{},"key":null,"page":null},{"name":"Ido Rosenthal","title":"Co-creator of Stylable","url":"https://twitter.com/idoros","image_url":"https://github.com/idoros.png","imageURL":"https://github.com/idoros.png","socials":{},"key":null,"page":null},{"name":"Tom Raviv","title":"Co-creator of Stylable","url":"https://twitter.com/RavivTom","image_url":"https://github.com/tomrav.png","imageURL":"https://github.com/tomrav.png","socials":{},"key":null,"page":null}],"frontMatter":{"title":"Welcome to Stylable v5","description":"Launching Stylable Version 5","slug":"welcome-to-stylable-v5","authors":[{"name":"Barak Igal","title":"Co-creator of Stylable","url":"https://github.com/barak007","image_url":"https://github.com/barak007.png","imageURL":"https://github.com/barak007.png"},{"name":"Ido Rosenthal","title":"Co-creator of Stylable","url":"https://twitter.com/idoros","image_url":"https://github.com/idoros.png","imageURL":"https://github.com/idoros.png"},{"name":"Tom Raviv","title":"Co-creator of Stylable","url":"https://twitter.com/RavivTom","image_url":"https://github.com/tomrav.png","imageURL":"https://github.com/tomrav.png"}],"tags":["intro","release"],"image":"/img/synthwave-space-logo.png","hide_table_of_contents":false},"unlisted":false}')}}]); \ No newline at end of file diff --git a/assets/js/acfb8e34.3ef422bc.js b/assets/js/acfb8e34.2406a350.js similarity index 77% rename from assets/js/acfb8e34.3ef422bc.js rename to assets/js/acfb8e34.2406a350.js index ca92e80d..8b0de1e6 100644 --- a/assets/js/acfb8e34.3ef422bc.js +++ b/assets/js/acfb8e34.2406a350.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[6223],{6543:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>o,default:()=>u,frontMatter:()=>c,metadata:()=>r,toc:()=>h});const r=JSON.parse('{"id":"getting-started/tooling/cli","title":"CLI","description":"@stylable/cli is a low-level utility used for working with Stylable projects directly.","source":"@site/docs/getting-started/tooling/cli.mdx","sourceDirName":"getting-started/tooling","slug":"/getting-started/tooling/cli","permalink":"/docs/getting-started/tooling/cli","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/getting-started/tooling/cli.mdx","tags":[],"version":"current","frontMatter":{"id":"cli","title":"CLI"},"sidebar":"Discover","previous":{"title":"VSCode Extension","permalink":"/docs/getting-started/tooling/stylable-intelligence"},"next":{"title":"Integrations","permalink":"/docs/getting-started/integrations"}}');var n=s(4848),l=s(8453),d=s(9489),i=s(7227);const c={id:"cli",title:"CLI"},o=void 0,a={},h=[{value:"Installation",id:"installation",level:2},{value:"Using the CLI",id:"using-the-cli",level:2},{value:"CLI Arguments",id:"cli-arguments",level:3},{value:"Generating an index file",id:"generating-an-index-file",level:2},{value:"Control exposed API",id:"control-exposed-api",level:3}];function x(e){const t={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,l.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"@stylable/cli"})," is a low-level utility used for working with Stylable projects directly."]}),"\n",(0,n.jsx)(t.p,{children:"It lets you:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:"Build and transform stylesheets into JavaScript modules"}),"\n",(0,n.jsx)(t.li,{children:"Generate an entry index file to help consume a published project"}),"\n"]}),"\n",(0,n.jsx)(t.h2,{id:"installation",children:"Installation"}),"\n","\n",(0,n.jsxs)(d.A,{groupId:"packageManager",children:[(0,n.jsx)(i.A,{value:"npm",label:"NPM",default:!0,children:(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-bash",children:"npm install @stylable/cli --save-dev\n"})})}),(0,n.jsx)(i.A,{value:"yarn",label:"Yarn",children:(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-bash",children:"yarn add @stylable/cli -D\n"})})})]}),"\n","\n",(0,n.jsx)(t.h2,{id:"using-the-cli",children:"Using the CLI"}),"\n",(0,n.jsxs)(t.p,{children:["After installing ",(0,n.jsx)(t.code,{children:"@stylable/cli"}),", the ",(0,n.jsx)(t.code,{children:"stc"})," command will be available, running ",(0,n.jsx)(t.code,{children:"stc --help"})," will provide a brief description for the options available."]}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"stc"})," accepts CLI arguments or a ",(0,n.jsx)(t.a,{href:"../stylable-config",children:"Stylable configuration file"}),"."]}),"\n",(0,n.jsx)(t.h3,{id:"cli-arguments",children:"CLI Arguments"}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Option"}),(0,n.jsx)(t.th,{children:"Alias"}),(0,n.jsx)(t.th,{children:"Description"}),(0,n.jsx)(t.th,{children:"Default Value"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--version"})}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"v"})}),(0,n.jsx)(t.td,{children:"show CLI version number"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"boolean"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--rootDir"})}),(0,n.jsx)(t.td,{}),(0,n.jsx)(t.td,{children:"root directory of project"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"cwd"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--srcDir"})}),(0,n.jsx)(t.td,{}),(0,n.jsx)(t.td,{children:"source directory relative to root"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"./"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--outDir"})}),(0,n.jsx)(t.td,{}),(0,n.jsx)(t.td,{children:"target directory relative to root"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"./"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--indexFile"})}),(0,n.jsx)(t.td,{}),(0,n.jsx)(t.td,{children:"filename of the generated index"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--cjs"})}),(0,n.jsx)(t.td,{}),(0,n.jsxs)(t.td,{children:["output commonjs modules (",(0,n.jsx)(t.code,{children:".js"}),")"]}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--esm"})}),(0,n.jsx)(t.td,{}),(0,n.jsxs)(t.td,{children:["output esm modules (",(0,n.jsx)(t.code,{children:".mjs"}),")"]}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--css"})}),(0,n.jsx)(t.td,{}),(0,n.jsxs)(t.td,{children:["output transpiled css files (",(0,n.jsx)(t.code,{children:".css"}),")"]}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--stcss"})}),(0,n.jsx)(t.td,{}),(0,n.jsxs)(t.td,{children:["output stylable source files (",(0,n.jsx)(t.code,{children:".st.css"}),")"]}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--dts"})}),(0,n.jsx)(t.td,{}),(0,n.jsxs)(t.td,{children:["output definition files for the stylable source files (",(0,n.jsx)(t.code,{children:".st.css.d.ts"}),")"]}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--dtsSourceMap"})}),(0,n.jsx)(t.td,{}),(0,n.jsxs)(t.td,{children:["output source-maps for the definitions of stylable source files (",(0,n.jsx)(t.code,{children:".st.css.d.ts.map"}),")"]}),(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"true"})," if ",(0,n.jsx)(t.code,{children:"--dts"})," is true, otherwise ",(0,n.jsx)(t.code,{children:"false"})]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--watch"})}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"w"})}),(0,n.jsx)(t.td,{children:"enable watch mode"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--config"})}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"c"})}),(0,n.jsx)(t.td,{children:"The path to a config file specifying how to build and output Stylable stylesheets"}),(0,n.jsx)(t.td,{children:'The directory containing the config file is assumed to be the "rootDir" for the project named "stylable.config.js"'})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--useNamespaceReference"})}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"unsr"})}),(0,n.jsx)(t.td,{children:"mark output stylable source files with relative path for namespacing purposes (*)"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--customGenerator"})}),(0,n.jsx)(t.td,{}),(0,n.jsx)(t.td,{children:"path of a custom index file generator"}),(0,n.jsx)(t.td,{children:"-"})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--ext"})}),(0,n.jsx)(t.td,{}),(0,n.jsx)(t.td,{children:"extension of stylable css files"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:".st.css"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--cssInJs"})}),(0,n.jsx)(t.td,{}),(0,n.jsx)(t.td,{children:"output transpiled css into the js module"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--cssFilename"})}),(0,n.jsx)(t.td,{}),(0,n.jsx)(t.td,{children:"pattern of the generated css file"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"[filename].css"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--injectCSSRequest"})}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"icr"})}),(0,n.jsx)(t.td,{children:"add a static import for the generated css in the js module output"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--namespaceResolver"})}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"nsr"})}),(0,n.jsx)(t.td,{children:"node request to a module that exports a stylable resolveNamespace function"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"@stylable/node"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--require"})}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"r"})}),(0,n.jsx)(t.td,{children:"require hook to execute before running"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"-"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--optimize"})}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"o"})}),(0,n.jsx)(t.td,{children:"removes: empty nodes, stylable directives, comments"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--minify"})}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"m"})}),(0,n.jsx)(t.td,{children:"minify generated css"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--log"})}),(0,n.jsx)(t.td,{}),(0,n.jsx)(t.td,{children:"verbose log"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--diagnostics"})}),(0,n.jsx)(t.td,{}),(0,n.jsx)(t.td,{children:"print verbose diagnostics"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"true"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--diagnosticsMode"})}),(0,n.jsx)(t.td,{}),(0,n.jsx)(t.td,{children:"determine the diagnostics mode. if strict process will exit on any exception, loose will attempt to finish the process regardless of exceptions"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--help"})}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"h"})}),(0,n.jsx)(t.td,{children:"Show help"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"boolean"})})]})]})]}),"\n",(0,n.jsx)(t.h2,{id:"generating-an-index-file",children:"Generating an index file"}),"\n",(0,n.jsxs)(t.p,{children:["To automatically generate an index file that acts as an export entry for stylable API from your project, use the ",(0,n.jsx)(t.code,{children:"--inedexFile"})," flag:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-bash",children:'stc --srcDir="./src" --outDir="./dist" --indexFile="index.st.css"\n'})}),"\n",(0,n.jsx)(t.h3,{id:"control-exposed-api",children:"Control exposed API"}),"\n",(0,n.jsxs)(t.p,{children:["Exporting a ",(0,n.jsx)(t.code,{children:"Generator"})," named export class from a JavaScript file will allow it to be used as a customGenerator."]}),"\n",(0,n.jsx)(t.p,{children:"Usually this generator will inherit from our base generator class and override the generateReExports and generateIndexSource methods."}),"\n",(0,n.jsx)(t.p,{children:"This example demonstrates the default generator behavior (only exports stylesheet roots):"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { Generator as Base, ReExports } from '@stylable/cli';\n\nexport class Generator extends Base {\n public generateReExports(filePath): ReExports {\n return {\n root: this.filename2varname(filePath),\n parts: {},\n keyframes: {},\n stVars: {},\n vars: {},\n };\n }\n protected generateIndexSource(indexFileTargetPath: string) {\n const source = super.generateIndexSource(indexFileTargetPath);\n return '@st-namespace \"INDEX\";\\n' + source;\n }\n}\n"})})]})}function u(e={}){const{wrapper:t}={...(0,l.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(x,{...e})}):x(e)}},7227:(e,t,s)=>{s.d(t,{A:()=>d});s(6540);var r=s(4164);const n={tabItem:"tabItem_Ymn6"};var l=s(4848);function d(e){let{children:t,hidden:s,className:d}=e;return(0,l.jsx)("div",{role:"tabpanel",className:(0,r.A)(n.tabItem,d),hidden:s,children:t})}},9489:(e,t,s)=>{s.d(t,{A:()=>w});var r=s(6540),n=s(4164),l=s(4245),d=s(6347),i=s(6494),c=s(2814),o=s(5167),a=s(9900);function h(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function x(e){const{values:t,children:s}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return h(e).map((e=>{let{props:{value:t,label:s,attributes:r,default:n}}=e;return{value:t,label:s,attributes:r,default:n}}))}(s);return function(e){const t=(0,o.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e}),[t,s])}function u(e){let{value:t,tabValues:s}=e;return s.some((e=>e.value===t))}function j(e){let{queryString:t=!1,groupId:s}=e;const n=(0,d.W6)(),l=function(e){let{queryString:t=!1,groupId:s}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!s)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:t,groupId:s});return[(0,c.aZ)(l),(0,r.useCallback)((e=>{if(!l)return;const t=new URLSearchParams(n.location.search);t.set(l,e),n.replace({...n.location,search:t.toString()})}),[l,n])]}function p(e){const{defaultValue:t,queryString:s=!1,groupId:n}=e,l=x(e),[d,c]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(t){if(!u({value:t,tabValues:s}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=s.find((e=>e.default))??s[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:l}))),[o,h]=j({queryString:s,groupId:n}),[p,f]=function(e){let{groupId:t}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(t),[n,l]=(0,a.Dv)(s);return[n,(0,r.useCallback)((e=>{s&&l.set(e)}),[s,l])]}({groupId:n}),m=(()=>{const e=o??p;return u({value:e,tabValues:l})?e:null})();(0,i.A)((()=>{m&&c(m)}),[m]);return{selectedValue:d,selectValue:(0,r.useCallback)((e=>{if(!u({value:e,tabValues:l}))throw new Error(`Can't select invalid tab value=${e}`);c(e),h(e),f(e)}),[h,f,l]),tabValues:l}}var f=s(1062);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var g=s(4848);function b(e){let{className:t,block:s,selectedValue:r,selectValue:d,tabValues:i}=e;const c=[],{blockElementScrollPositionUntilNextRender:o}=(0,l.a_)(),a=e=>{const t=e.currentTarget,s=c.indexOf(t),n=i[s].value;n!==r&&(o(t),d(n))},h=e=>{let t=null;switch(e.key){case"Enter":a(e);break;case"ArrowRight":{const s=c.indexOf(e.currentTarget)+1;t=c[s]??c[0];break}case"ArrowLeft":{const s=c.indexOf(e.currentTarget)-1;t=c[s]??c[c.length-1];break}}t?.focus()};return(0,g.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,n.A)("tabs",{"tabs--block":s},t),children:i.map((e=>{let{value:t,label:s,attributes:l}=e;return(0,g.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>c.push(e),onKeyDown:h,onClick:a,...l,className:(0,n.A)("tabs__item",m.tabItem,l?.className,{"tabs__item--active":r===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:l}=e;const d=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=d.find((e=>e.props.value===l));return e?(0,r.cloneElement)(e,{className:(0,n.A)("margin-top--md",e.props.className)}):null}return(0,g.jsx)("div",{className:"margin-top--md",children:d.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==l})))})}function y(e){const t=p(e);return(0,g.jsxs)("div",{className:(0,n.A)("tabs-container",m.tabList),children:[(0,g.jsx)(b,{...t,...e}),(0,g.jsx)(v,{...t,...e})]})}function w(e){const t=(0,f.A)();return(0,g.jsx)(y,{...e,children:h(e.children)},String(t))}},8453:(e,t,s)=>{s.d(t,{R:()=>d,x:()=>i});var r=s(6540);const n={},l=r.createContext(n);function d(e){const t=r.useContext(l);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:d(e.components),r.createElement(l.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[6223],{5140:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>o,default:()=>u,frontMatter:()=>c,metadata:()=>r,toc:()=>h});const r=JSON.parse('{"id":"getting-started/tooling/cli","title":"CLI","description":"@stylable/cli is a low-level utility used for working with Stylable projects directly.","source":"@site/docs/getting-started/tooling/cli.mdx","sourceDirName":"getting-started/tooling","slug":"/getting-started/tooling/cli","permalink":"/docs/getting-started/tooling/cli","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/getting-started/tooling/cli.mdx","tags":[],"version":"current","frontMatter":{"id":"cli","title":"CLI"},"sidebar":"Discover","previous":{"title":"VSCode Extension","permalink":"/docs/getting-started/tooling/stylable-intelligence"},"next":{"title":"Integrations","permalink":"/docs/getting-started/integrations"}}');var n=s(4848),l=s(8453),d=s(1470),i=s(9365);const c={id:"cli",title:"CLI"},o=void 0,a={},h=[{value:"Installation",id:"installation",level:2},{value:"Using the CLI",id:"using-the-cli",level:2},{value:"CLI Arguments",id:"cli-arguments",level:3},{value:"Generating an index file",id:"generating-an-index-file",level:2},{value:"Control exposed API",id:"control-exposed-api",level:3}];function x(e){const t={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,l.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"@stylable/cli"})," is a low-level utility used for working with Stylable projects directly."]}),"\n",(0,n.jsx)(t.p,{children:"It lets you:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:"Build and transform stylesheets into JavaScript modules"}),"\n",(0,n.jsx)(t.li,{children:"Generate an entry index file to help consume a published project"}),"\n"]}),"\n",(0,n.jsx)(t.h2,{id:"installation",children:"Installation"}),"\n","\n",(0,n.jsxs)(d.A,{groupId:"packageManager",children:[(0,n.jsx)(i.A,{value:"npm",label:"NPM",default:!0,children:(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-bash",children:"npm install @stylable/cli --save-dev\n"})})}),(0,n.jsx)(i.A,{value:"yarn",label:"Yarn",children:(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-bash",children:"yarn add @stylable/cli -D\n"})})})]}),"\n","\n",(0,n.jsx)(t.h2,{id:"using-the-cli",children:"Using the CLI"}),"\n",(0,n.jsxs)(t.p,{children:["After installing ",(0,n.jsx)(t.code,{children:"@stylable/cli"}),", the ",(0,n.jsx)(t.code,{children:"stc"})," command will be available, running ",(0,n.jsx)(t.code,{children:"stc --help"})," will provide a brief description for the options available."]}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"stc"})," accepts CLI arguments or a ",(0,n.jsx)(t.a,{href:"../stylable-config",children:"Stylable configuration file"}),"."]}),"\n",(0,n.jsx)(t.h3,{id:"cli-arguments",children:"CLI Arguments"}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Option"}),(0,n.jsx)(t.th,{children:"Alias"}),(0,n.jsx)(t.th,{children:"Description"}),(0,n.jsx)(t.th,{children:"Default Value"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--version"})}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"v"})}),(0,n.jsx)(t.td,{children:"show CLI version number"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"boolean"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--rootDir"})}),(0,n.jsx)(t.td,{}),(0,n.jsx)(t.td,{children:"root directory of project"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"cwd"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--srcDir"})}),(0,n.jsx)(t.td,{}),(0,n.jsx)(t.td,{children:"source directory relative to root"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"./"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--outDir"})}),(0,n.jsx)(t.td,{}),(0,n.jsx)(t.td,{children:"target directory relative to root"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"./"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--indexFile"})}),(0,n.jsx)(t.td,{}),(0,n.jsx)(t.td,{children:"filename of the generated index"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--cjs"})}),(0,n.jsx)(t.td,{}),(0,n.jsxs)(t.td,{children:["output commonjs modules (",(0,n.jsx)(t.code,{children:".js"}),")"]}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--esm"})}),(0,n.jsx)(t.td,{}),(0,n.jsxs)(t.td,{children:["output esm modules (",(0,n.jsx)(t.code,{children:".mjs"}),")"]}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--css"})}),(0,n.jsx)(t.td,{}),(0,n.jsxs)(t.td,{children:["output transpiled css files (",(0,n.jsx)(t.code,{children:".css"}),")"]}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--stcss"})}),(0,n.jsx)(t.td,{}),(0,n.jsxs)(t.td,{children:["output stylable source files (",(0,n.jsx)(t.code,{children:".st.css"}),")"]}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--dts"})}),(0,n.jsx)(t.td,{}),(0,n.jsxs)(t.td,{children:["output definition files for the stylable source files (",(0,n.jsx)(t.code,{children:".st.css.d.ts"}),")"]}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--dtsSourceMap"})}),(0,n.jsx)(t.td,{}),(0,n.jsxs)(t.td,{children:["output source-maps for the definitions of stylable source files (",(0,n.jsx)(t.code,{children:".st.css.d.ts.map"}),")"]}),(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"true"})," if ",(0,n.jsx)(t.code,{children:"--dts"})," is true, otherwise ",(0,n.jsx)(t.code,{children:"false"})]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--watch"})}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"w"})}),(0,n.jsx)(t.td,{children:"enable watch mode"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--config"})}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"c"})}),(0,n.jsx)(t.td,{children:"The path to a config file specifying how to build and output Stylable stylesheets"}),(0,n.jsx)(t.td,{children:'The directory containing the config file is assumed to be the "rootDir" for the project named "stylable.config.js"'})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--useNamespaceReference"})}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"unsr"})}),(0,n.jsx)(t.td,{children:"mark output stylable source files with relative path for namespacing purposes (*)"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--customGenerator"})}),(0,n.jsx)(t.td,{}),(0,n.jsx)(t.td,{children:"path of a custom index file generator"}),(0,n.jsx)(t.td,{children:"-"})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--ext"})}),(0,n.jsx)(t.td,{}),(0,n.jsx)(t.td,{children:"extension of stylable css files"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:".st.css"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--cssInJs"})}),(0,n.jsx)(t.td,{}),(0,n.jsx)(t.td,{children:"output transpiled css into the js module"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--cssFilename"})}),(0,n.jsx)(t.td,{}),(0,n.jsx)(t.td,{children:"pattern of the generated css file"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"[filename].css"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--injectCSSRequest"})}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"icr"})}),(0,n.jsx)(t.td,{children:"add a static import for the generated css in the js module output"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--namespaceResolver"})}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"nsr"})}),(0,n.jsx)(t.td,{children:"node request to a module that exports a stylable resolveNamespace function"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"@stylable/node"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--require"})}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"r"})}),(0,n.jsx)(t.td,{children:"require hook to execute before running"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"-"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--optimize"})}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"o"})}),(0,n.jsx)(t.td,{children:"removes: empty nodes, stylable directives, comments"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--minify"})}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"m"})}),(0,n.jsx)(t.td,{children:"minify generated css"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--log"})}),(0,n.jsx)(t.td,{}),(0,n.jsx)(t.td,{children:"verbose log"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--diagnostics"})}),(0,n.jsx)(t.td,{}),(0,n.jsx)(t.td,{children:"print verbose diagnostics"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"true"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--diagnosticsMode"})}),(0,n.jsx)(t.td,{}),(0,n.jsx)(t.td,{children:"determine the diagnostics mode. if strict process will exit on any exception, loose will attempt to finish the process regardless of exceptions"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"false"})})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"--help"})}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"h"})}),(0,n.jsx)(t.td,{children:"Show help"}),(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"boolean"})})]})]})]}),"\n",(0,n.jsx)(t.h2,{id:"generating-an-index-file",children:"Generating an index file"}),"\n",(0,n.jsxs)(t.p,{children:["To automatically generate an index file that acts as an export entry for stylable API from your project, use the ",(0,n.jsx)(t.code,{children:"--inedexFile"})," flag:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-bash",children:'stc --srcDir="./src" --outDir="./dist" --indexFile="index.st.css"\n'})}),"\n",(0,n.jsx)(t.h3,{id:"control-exposed-api",children:"Control exposed API"}),"\n",(0,n.jsxs)(t.p,{children:["Exporting a ",(0,n.jsx)(t.code,{children:"Generator"})," named export class from a JavaScript file will allow it to be used as a customGenerator."]}),"\n",(0,n.jsx)(t.p,{children:"Usually this generator will inherit from our base generator class and override the generateReExports and generateIndexSource methods."}),"\n",(0,n.jsx)(t.p,{children:"This example demonstrates the default generator behavior (only exports stylesheet roots):"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { Generator as Base, ReExports } from '@stylable/cli';\n\nexport class Generator extends Base {\n public generateReExports(filePath): ReExports {\n return {\n root: this.filename2varname(filePath),\n parts: {},\n keyframes: {},\n stVars: {},\n vars: {},\n };\n }\n protected generateIndexSource(indexFileTargetPath: string) {\n const source = super.generateIndexSource(indexFileTargetPath);\n return '@st-namespace \"INDEX\";\\n' + source;\n }\n}\n"})})]})}function u(e={}){const{wrapper:t}={...(0,l.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(x,{...e})}):x(e)}},9365:(e,t,s)=>{s.d(t,{A:()=>d});s(6540);var r=s(4164);const n={tabItem:"tabItem_Ymn6"};var l=s(4848);function d(e){let{children:t,hidden:s,className:d}=e;return(0,l.jsx)("div",{role:"tabpanel",className:(0,r.A)(n.tabItem,d),hidden:s,children:t})}},1470:(e,t,s)=>{s.d(t,{A:()=>w});var r=s(6540),n=s(4164),l=s(3104),d=s(6347),i=s(205),c=s(7485),o=s(1682),a=s(679);function h(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function x(e){const{values:t,children:s}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return h(e).map((e=>{let{props:{value:t,label:s,attributes:r,default:n}}=e;return{value:t,label:s,attributes:r,default:n}}))}(s);return function(e){const t=(0,o.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e}),[t,s])}function u(e){let{value:t,tabValues:s}=e;return s.some((e=>e.value===t))}function j(e){let{queryString:t=!1,groupId:s}=e;const n=(0,d.W6)(),l=function(e){let{queryString:t=!1,groupId:s}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!s)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:t,groupId:s});return[(0,c.aZ)(l),(0,r.useCallback)((e=>{if(!l)return;const t=new URLSearchParams(n.location.search);t.set(l,e),n.replace({...n.location,search:t.toString()})}),[l,n])]}function p(e){const{defaultValue:t,queryString:s=!1,groupId:n}=e,l=x(e),[d,c]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(t){if(!u({value:t,tabValues:s}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=s.find((e=>e.default))??s[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:l}))),[o,h]=j({queryString:s,groupId:n}),[p,f]=function(e){let{groupId:t}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(t),[n,l]=(0,a.Dv)(s);return[n,(0,r.useCallback)((e=>{s&&l.set(e)}),[s,l])]}({groupId:n}),m=(()=>{const e=o??p;return u({value:e,tabValues:l})?e:null})();(0,i.A)((()=>{m&&c(m)}),[m]);return{selectedValue:d,selectValue:(0,r.useCallback)((e=>{if(!u({value:e,tabValues:l}))throw new Error(`Can't select invalid tab value=${e}`);c(e),h(e),f(e)}),[h,f,l]),tabValues:l}}var f=s(2303);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var g=s(4848);function b(e){let{className:t,block:s,selectedValue:r,selectValue:d,tabValues:i}=e;const c=[],{blockElementScrollPositionUntilNextRender:o}=(0,l.a_)(),a=e=>{const t=e.currentTarget,s=c.indexOf(t),n=i[s].value;n!==r&&(o(t),d(n))},h=e=>{let t=null;switch(e.key){case"Enter":a(e);break;case"ArrowRight":{const s=c.indexOf(e.currentTarget)+1;t=c[s]??c[0];break}case"ArrowLeft":{const s=c.indexOf(e.currentTarget)-1;t=c[s]??c[c.length-1];break}}t?.focus()};return(0,g.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,n.A)("tabs",{"tabs--block":s},t),children:i.map((e=>{let{value:t,label:s,attributes:l}=e;return(0,g.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{c.push(e)},onKeyDown:h,onClick:a,...l,className:(0,n.A)("tabs__item",m.tabItem,l?.className,{"tabs__item--active":r===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:l}=e;const d=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=d.find((e=>e.props.value===l));return e?(0,r.cloneElement)(e,{className:(0,n.A)("margin-top--md",e.props.className)}):null}return(0,g.jsx)("div",{className:"margin-top--md",children:d.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==l})))})}function y(e){const t=p(e);return(0,g.jsxs)("div",{className:(0,n.A)("tabs-container",m.tabList),children:[(0,g.jsx)(b,{...t,...e}),(0,g.jsx)(v,{...t,...e})]})}function w(e){const t=(0,f.A)();return(0,g.jsx)(y,{...e,children:h(e.children)},String(t))}},8453:(e,t,s)=>{s.d(t,{R:()=>d,x:()=>i});var r=s(6540);const n={},l=r.createContext(n);function d(e){const t=r.useContext(l);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:d(e.components),r.createElement(l.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/b10d9af9.80dcd13f.js b/assets/js/b10d9af9.c04616ab.js similarity index 99% rename from assets/js/b10d9af9.80dcd13f.js rename to assets/js/b10d9af9.c04616ab.js index 1e659fde..874951c0 100644 --- a/assets/js/b10d9af9.80dcd13f.js +++ b/assets/js/b10d9af9.c04616ab.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[9849],{9928:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>r,default:()=>h,frontMatter:()=>o,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"guides/handbook/custom-state","title":"Custom State","description":"In CSS, we have the ability to target native states of various elements using the pseudo-class syntax (for instance,active).","source":"@site/docs/guides/handbook/state.md","sourceDirName":"guides/handbook","slug":"/guides/handbook/custom-state","permalink":"/docs/guides/handbook/custom-state","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/handbook/state.md","tags":[],"version":"current","frontMatter":{"id":"custom-state","title":"Custom State"},"sidebar":"Guides","previous":{"title":"Namespacing","permalink":"/docs/guides/handbook/namespacing"},"next":{"title":"Runtime","permalink":"/docs/guides/handbook/runtime"}}');var a=s(4848),i=s(8453);const o={id:"custom-state",title:"Custom State"},r=void 0,d={},c=[{value:"Define and target",id:"define-and-target",level:2},{value:"Runtime toggle",id:"runtime-toggle",level:2}];function l(e){const t={a:"a",admonition:"admonition",code:"code",em:"em",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(t.p,{children:["In CSS, we have the ability to target native states of various elements using the ",(0,a.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes",children:(0,a.jsx)(t.code,{children:"pseudo-class"})})," syntax (for instance, ",(0,a.jsx)(t.code,{children:":hover"})," or ",(0,a.jsx)(t.code,{children:":active"}),")."]}),"\n",(0,a.jsxs)(t.p,{children:["While this is very handy, as of today, CSS does not provide a way for us to define a custom state on every element. For example, we might want a ",(0,a.jsx)(t.code,{children:"registered"})," custom state to represent a player element that has signed up for our game."]}),"\n",(0,a.jsxs)(t.p,{children:["We could choose to implement such a state manually by using a class selector (e.g. using a ",(0,a.jsx)(t.a,{href:"http://getbem.com/naming/#modifier:~:text=block__elem%20%7B%20color%3A%20%23042%3B%20%7D-,Modifier,-Flags%20on%20blocks",children:"BEM modifier"}),": ",(0,a.jsx)(t.code,{children:".NAMESPACE--registered"}),") or attribute selector (e.g. ",(0,a.jsx)(t.code,{children:"[data-NAMESPACE-registered]"}),")."]}),"\n",(0,a.jsx)(t.p,{children:"This is a bit of a pain for several reasons. Unlike native pseudo-classes, a class or an attribute selector is not semantic, and so we lose the original intent. If a convention like BEM is used, then the semantics are conserved, but it increases the verbosity of our code."}),"\n",(0,a.jsx)(t.p,{children:"By defining our states through Stylable, we gain the benefit of validations, completions, and a consistent syntax for states."}),"\n",(0,a.jsx)(t.h2,{id:"define-and-target",children:"Define and target"}),"\n",(0,a.jsxs)(t.p,{children:["To define a registered state for our ",(0,a.jsx)(t.code,{children:"player"})," class, we will use the ",(0,a.jsx)(t.code,{children:"-st-states"})," declaration, and pass it a single state name of ",(0,a.jsx)(t.code,{children:"registered"}),"."]}),"\n",(0,a.jsxs)(t.p,{children:["We can then target this state using our newly-defined ",(0,a.jsx)(t.code,{children:":registered"})," pseudo-class, knowing it will be transformed to a valid, safe selector at build time."]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-css",metastring:'title="game.st.css"',children:".player {\n -st-states: registered; /* definition */\n}\n.player:registered {} /* usage */\n\n/* OUTPUT - namespace class and state */\n.game__player {}\n.game__player.game--registered {}\n"})}),"\n",(0,a.jsxs)(t.p,{children:["In the example above, we defined a ",(0,a.jsx)(t.code,{children:"registered"})," boolean state that can either be targeted, or not. Let's imagine, though, that in addition to the ",(0,a.jsx)(t.code,{children:"registered"})," state, we now want to highlight ",(0,a.jsx)(t.code,{children:"first"}),", ",(0,a.jsx)(t.code,{children:"second"}),", and ",(0,a.jsx)(t.code,{children:"third"})," ranking players."]}),"\n",(0,a.jsxs)(t.p,{children:["We can define such a state by passing the ",(0,a.jsx)(t.code,{children:"enum"})," parameter type to the ",(0,a.jsx)(t.code,{children:"ranking"})," state definition, and in it, list our possible options."]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-css",metastring:'title="game.st.css"',children:".player {\n -st-states: registered, \n ranking(enum(first, second, third)); \n}\n\n.player:ranking(first) {} \n.player:ranking(second) {} \n.player:ranking(third) {} \n"})}),"\n",(0,a.jsxs)(t.p,{children:["There are additional parameter types, as well as validators, default values, and mapping capabilities to Stylable custom states. ",(0,a.jsx)(t.a,{href:"/docs/references/pseudo-classes",children:"Read more in the API reference"}),"."]}),"\n",(0,a.jsxs)(t.admonition,{title:"Conflicts with native",type:"caution",children:[(0,a.jsxs)(t.p,{children:['At this point, you may have noticed that we can define states that would conflict with native CSS ones. For example, we can define a "custom" state called ',(0,a.jsx)(t.code,{children:":hover"})," that would conflict with the native ",(0,a.jsx)(t.code,{children:":hover"})," pseudo-class."]}),(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-css",children:".player {\n -st-states: hover;\n}\n.player:hover {} /* custom state, not the native one */\n"})}),(0,a.jsxs)(t.p,{children:["Due to this potentially confusing behavior, we ",(0,a.jsx)(t.strong,{children:"strongly recommend"})," against naming states that would conflict with native ones."]})]}),"\n",(0,a.jsx)(t.h2,{id:"runtime-toggle",children:"Runtime toggle"}),"\n",(0,a.jsx)(t.p,{children:"Now that we have defined our states, we want to be able to toggle them at runtime in our component."}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-js",metastring:'title="game.jsx"',children:'import { cssStates, classes } from "./game.st.css";\n\n// create a registered first ranking player\n<div className={\n classes.player + " " + cssStates({ \n registered: true,\n ranking: "first" \n })}>\n</div>;\n'})}),"\n",(0,a.jsxs)(t.p,{children:["Looking at the example above, we import the ",(0,a.jsx)(t.code,{children:"cssStates"})," function and the ",(0,a.jsx)(t.code,{children:"classes"})," mapping from our ",(0,a.jsx)(t.code,{children:"game.st.css"})," stylesheet. We then create a ",(0,a.jsx)(t.code,{children:"div"})," element to represent a ",(0,a.jsx)(t.em,{children:"registered"})," and ",(0,a.jsx)(t.em,{children:"first rank"})," player."]}),"\n",(0,a.jsx)(t.p,{children:"This example, where we manually concatenate the class and states, is quite verbose and potentially confusing. In the next chapter, we will explore Stylable's runtime feature set and see a cleaner way of working with states at runtime."})]})}function h(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(l,{...e})}):l(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>o,x:()=>r});var n=s(6540);const a={},i=n.createContext(a);function o(e){const t=n.useContext(i);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:o(e.components),n.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[9849],{8101:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>r,default:()=>h,frontMatter:()=>o,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"guides/handbook/custom-state","title":"Custom State","description":"In CSS, we have the ability to target native states of various elements using the pseudo-class syntax (for instance,active).","source":"@site/docs/guides/handbook/state.md","sourceDirName":"guides/handbook","slug":"/guides/handbook/custom-state","permalink":"/docs/guides/handbook/custom-state","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/handbook/state.md","tags":[],"version":"current","frontMatter":{"id":"custom-state","title":"Custom State"},"sidebar":"Guides","previous":{"title":"Namespacing","permalink":"/docs/guides/handbook/namespacing"},"next":{"title":"Runtime","permalink":"/docs/guides/handbook/runtime"}}');var a=s(4848),i=s(8453);const o={id:"custom-state",title:"Custom State"},r=void 0,d={},c=[{value:"Define and target",id:"define-and-target",level:2},{value:"Runtime toggle",id:"runtime-toggle",level:2}];function l(e){const t={a:"a",admonition:"admonition",code:"code",em:"em",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(t.p,{children:["In CSS, we have the ability to target native states of various elements using the ",(0,a.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes",children:(0,a.jsx)(t.code,{children:"pseudo-class"})})," syntax (for instance, ",(0,a.jsx)(t.code,{children:":hover"})," or ",(0,a.jsx)(t.code,{children:":active"}),")."]}),"\n",(0,a.jsxs)(t.p,{children:["While this is very handy, as of today, CSS does not provide a way for us to define a custom state on every element. For example, we might want a ",(0,a.jsx)(t.code,{children:"registered"})," custom state to represent a player element that has signed up for our game."]}),"\n",(0,a.jsxs)(t.p,{children:["We could choose to implement such a state manually by using a class selector (e.g. using a ",(0,a.jsx)(t.a,{href:"http://getbem.com/naming/#modifier:~:text=block__elem%20%7B%20color%3A%20%23042%3B%20%7D-,Modifier,-Flags%20on%20blocks",children:"BEM modifier"}),": ",(0,a.jsx)(t.code,{children:".NAMESPACE--registered"}),") or attribute selector (e.g. ",(0,a.jsx)(t.code,{children:"[data-NAMESPACE-registered]"}),")."]}),"\n",(0,a.jsx)(t.p,{children:"This is a bit of a pain for several reasons. Unlike native pseudo-classes, a class or an attribute selector is not semantic, and so we lose the original intent. If a convention like BEM is used, then the semantics are conserved, but it increases the verbosity of our code."}),"\n",(0,a.jsx)(t.p,{children:"By defining our states through Stylable, we gain the benefit of validations, completions, and a consistent syntax for states."}),"\n",(0,a.jsx)(t.h2,{id:"define-and-target",children:"Define and target"}),"\n",(0,a.jsxs)(t.p,{children:["To define a registered state for our ",(0,a.jsx)(t.code,{children:"player"})," class, we will use the ",(0,a.jsx)(t.code,{children:"-st-states"})," declaration, and pass it a single state name of ",(0,a.jsx)(t.code,{children:"registered"}),"."]}),"\n",(0,a.jsxs)(t.p,{children:["We can then target this state using our newly-defined ",(0,a.jsx)(t.code,{children:":registered"})," pseudo-class, knowing it will be transformed to a valid, safe selector at build time."]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-css",metastring:'title="game.st.css"',children:".player {\n -st-states: registered; /* definition */\n}\n.player:registered {} /* usage */\n\n/* OUTPUT - namespace class and state */\n.game__player {}\n.game__player.game--registered {}\n"})}),"\n",(0,a.jsxs)(t.p,{children:["In the example above, we defined a ",(0,a.jsx)(t.code,{children:"registered"})," boolean state that can either be targeted, or not. Let's imagine, though, that in addition to the ",(0,a.jsx)(t.code,{children:"registered"})," state, we now want to highlight ",(0,a.jsx)(t.code,{children:"first"}),", ",(0,a.jsx)(t.code,{children:"second"}),", and ",(0,a.jsx)(t.code,{children:"third"})," ranking players."]}),"\n",(0,a.jsxs)(t.p,{children:["We can define such a state by passing the ",(0,a.jsx)(t.code,{children:"enum"})," parameter type to the ",(0,a.jsx)(t.code,{children:"ranking"})," state definition, and in it, list our possible options."]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-css",metastring:'title="game.st.css"',children:".player {\n -st-states: registered, \n ranking(enum(first, second, third)); \n}\n\n.player:ranking(first) {} \n.player:ranking(second) {} \n.player:ranking(third) {} \n"})}),"\n",(0,a.jsxs)(t.p,{children:["There are additional parameter types, as well as validators, default values, and mapping capabilities to Stylable custom states. ",(0,a.jsx)(t.a,{href:"/docs/references/pseudo-classes",children:"Read more in the API reference"}),"."]}),"\n",(0,a.jsxs)(t.admonition,{title:"Conflicts with native",type:"caution",children:[(0,a.jsxs)(t.p,{children:['At this point, you may have noticed that we can define states that would conflict with native CSS ones. For example, we can define a "custom" state called ',(0,a.jsx)(t.code,{children:":hover"})," that would conflict with the native ",(0,a.jsx)(t.code,{children:":hover"})," pseudo-class."]}),(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-css",children:".player {\n -st-states: hover;\n}\n.player:hover {} /* custom state, not the native one */\n"})}),(0,a.jsxs)(t.p,{children:["Due to this potentially confusing behavior, we ",(0,a.jsx)(t.strong,{children:"strongly recommend"})," against naming states that would conflict with native ones."]})]}),"\n",(0,a.jsx)(t.h2,{id:"runtime-toggle",children:"Runtime toggle"}),"\n",(0,a.jsx)(t.p,{children:"Now that we have defined our states, we want to be able to toggle them at runtime in our component."}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-js",metastring:'title="game.jsx"',children:'import { cssStates, classes } from "./game.st.css";\n\n// create a registered first ranking player\n<div className={\n classes.player + " " + cssStates({ \n registered: true,\n ranking: "first" \n })}>\n</div>;\n'})}),"\n",(0,a.jsxs)(t.p,{children:["Looking at the example above, we import the ",(0,a.jsx)(t.code,{children:"cssStates"})," function and the ",(0,a.jsx)(t.code,{children:"classes"})," mapping from our ",(0,a.jsx)(t.code,{children:"game.st.css"})," stylesheet. We then create a ",(0,a.jsx)(t.code,{children:"div"})," element to represent a ",(0,a.jsx)(t.em,{children:"registered"})," and ",(0,a.jsx)(t.em,{children:"first rank"})," player."]}),"\n",(0,a.jsx)(t.p,{children:"This example, where we manually concatenate the class and states, is quite verbose and potentially confusing. In the next chapter, we will explore Stylable's runtime feature set and see a cleaner way of working with states at runtime."})]})}function h(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(l,{...e})}):l(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>o,x:()=>r});var n=s(6540);const a={},i=n.createContext(a);function o(e){const t=n.useContext(i);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:o(e.components),n.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/b1a4f681.b1ff7e29.js b/assets/js/b1a4f681.c21d0944.js similarity index 98% rename from assets/js/b1a4f681.b1ff7e29.js rename to assets/js/b1a4f681.c21d0944.js index 78c802da..3c4a56e6 100644 --- a/assets/js/b1a4f681.b1ff7e29.js +++ b/assets/js/b1a4f681.c21d0944.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[7514],{2705:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>c,contentTitle:()=>o,default:()=>p,frontMatter:()=>i,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"guides/handbook/extend","title":"Extend","description":"In the Import Class chapter, we saw how we can import CSS classes and target them by composing a selector to target our desired parts.","source":"@site/docs/guides/handbook/extend.mdx","sourceDirName":"guides/handbook","slug":"/guides/handbook/extend","permalink":"/docs/guides/handbook/extend","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/handbook/extend.mdx","tags":[],"version":"current","frontMatter":{"id":"extend","title":"Extend","pagination_next":null},"sidebar":"Guides","previous":{"title":"Import Class","permalink":"/docs/guides/handbook/import-class"}}');var a=t(4848),r=t(8453),l=t(2250);const i={id:"extend",title:"Extend",pagination_next:null},o=void 0,c={},d=[{value:"Extend a stylesheet",id:"extend-a-stylesheet",level:2},{value:"Apply the extending class",id:"apply-the-extending-class",level:3},{value:"Access inner parts",id:"access-inner-parts",level:3},{value:"Access a state",id:"access-a-state",level:3},{value:"Extend multiple levels",id:"extend-multiple-levels",level:2}];function h(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",hr:"hr",p:"p",pre:"pre",strong:"strong",...(0,r.R)(),...e.components},{Details:t}=s;return t||function(e,s){throw new Error("Expected "+(s?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(s.p,{children:["In the ",(0,a.jsx)(s.a,{href:"/docs/guides/handbook/import-class",children:"Import Class chapter"}),", we saw how we can import CSS classes and target them by composing a selector to target our desired parts."]}),"\n",(0,a.jsx)(s.p,{children:"In this chapter, we'll see how to extend a stylesheet to target inner parts and states."}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"Current status:"})}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="player.st.css"',children:".root {\n -st-states: registered,\n ranking(enum(first, second, third));\n}\n.avatar {}\n.username {}\n"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css"',children:'@st-import Player, [avatar, username] from "./player.st.css";\n\nPlayer {\n background: blue;\n}\nPlayer .avatar {\n border-radius: 50%;\n}\nPlayer .username {\n text-transform: uppercase;\n}\n'})}),"\n","\n",(0,a.jsxs)(s.p,{children:["Previously, we manually customized the ",(0,a.jsx)(s.code,{children:"Player"})," component by creating a selector that includes a ",(0,a.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator",children:"descendant combinator"})," between the ",(0,a.jsx)(s.code,{children:"Player"})," and our targeted parts. This selector is based on knowledge we have about the ",(0,a.jsx)(s.code,{children:"Player"})," component structure, but this structure might change in the future, and break our assumptions."]}),"\n",(0,a.jsx)(s.h2,{id:"extend-a-stylesheet",children:"Extend a stylesheet"}),"\n",(0,a.jsxs)(s.p,{children:["To help us abstract our selector, we'll extend the ",(0,a.jsx)(s.code,{children:"Player"})," stylesheet to gain access to the stylesheet API, letting us target inner parts using ",(0,a.jsx)(s.a,{href:"/docs/references/pseudo-elements",children:"custom pseudo-elements"}),"."]}),"\n",(0,a.jsxs)(s.p,{children:["We'll first set the ",(0,a.jsx)(s.code,{children:"-st-extends"})," property with the value of the imported ",(0,a.jsx)(s.code,{children:"Player"})," stylesheet on the local ",(0,a.jsx)(s.code,{children:"player"})," class."]}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css"',children:'@st-import Player from "./player.st.css";\n\n.player {\n -st-extends: Player;\n}\n'})}),"\n",(0,a.jsxs)(t,{children:[(0,a.jsx)("summary",{children:"Namespacing output"}),(0,a.jsx)(l.A,{title:"game.st.css",language:"css",children:'@st-import Player from "./player.st.css";\n\n/* customizing class, local namespace */\n.game__player {\n -st-extends: Player;\n}'})]}),"\n","\n",(0,a.jsxs)(s.p,{children:["We ",(0,a.jsx)(s.a,{href:"/docs/guides/handbook/import-class#stylesheet-root-selector",children:"previously saw"})," that we can't simply target an imported stylesheet, as that would affect all instances of it."]}),"\n",(0,a.jsxs)(s.p,{children:["Here, by using the ",(0,a.jsx)(s.code,{children:"-st-extends"})," property on a local class, we are scoping these customizations to the subtree of our component stylesheet."]}),"\n",(0,a.jsx)(s.h3,{id:"apply-the-extending-class",children:"Apply the extending class"}),"\n",(0,a.jsxs)(s.p,{children:["To customize a ",(0,a.jsx)(s.code,{children:"Player"})," component instance using our local stylesheet, we will need to apply the extending local class to the instance of the component."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-jsx",children:"import Player from './player.jsx';\nimport { st, classes } from './game.st.css';\n\nconst Game = ({ className }) => (\n <div className={st(classes.root, className)}>\n <Player className={classes.player} />\n </div>\n);\n"})}),"\n",(0,a.jsx)(s.h3,{id:"access-inner-parts",children:"Access inner parts"}),"\n",(0,a.jsxs)(s.p,{children:["We can now use the custom pseudo-element syntax to safely target the ",(0,a.jsx)(s.code,{children:"avatar"})," and ",(0,a.jsx)(s.code,{children:"username"})," parts of the ",(0,a.jsx)(s.code,{children:"Player"})," component."]}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css"',children:'@st-import Player from "./player.st.css";\n\n.player {\n -st-extends: Player;\n}\n.player::avatar {\n border-radius: 50%;\n}\n.player::username {\n text-transform: uppercase;\n}\n'})}),"\n",(0,a.jsxs)(t,{children:[(0,a.jsx)("summary",{children:"Namespacing output"}),(0,a.jsx)(l.A,{title:"game.st.css",language:"css",children:'@st-import Player from "./player.st.css";\n\n.game__player {\n-st-extends: Player;\n}\n.game__player .player__avatar {\nborder-radius: 50%;\n}\n.game__player .player__username {\ntext-transform: uppercase;\n}'})]}),"\n","\n",(0,a.jsx)(s.h3,{id:"access-a-state",children:"Access a state"}),"\n",(0,a.jsx)(s.p,{children:"Similar to how we used custom pseudo-elements to access inner parts of a component externally, we can now target custom pseudo-classes (states) of our extended parts as well."}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css"',children:'@st-import Player from "./player.st.css";\n\n.player {\n -st-extends: Player;\n}\n.player:ranking(first) {\n background: gold;\n}\n/* ... */\n'})}),"\n","\n",(0,a.jsx)(s.h2,{id:"extend-multiple-levels",children:"Extend multiple levels"}),"\n",(0,a.jsxs)(s.p,{children:["Let's say that we want to turn our current ",(0,a.jsx)(s.code,{children:"avatar"})," part, into a component to support a more complex design with separate elements for the ",(0,a.jsx)(s.code,{children:"frame"})," and the ",(0,a.jsx)(s.code,{children:"image"}),"."]}),"\n",(0,a.jsxs)(s.p,{children:["To do this, we'll create a new ",(0,a.jsx)(s.code,{children:"avatar.st.css"})," stylesheet, import it to ",(0,a.jsx)(s.code,{children:"player.st.css"}),", and extend our ",(0,a.jsx)(s.code,{children:"avatar"})," class with it."]}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="avatar.st.css"',children:".root {}\n.frame {}\n.image {}\n"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="player.st.css"',children:'@st-import Avatar from "./avatar.st.css";\n\n.root {\n -st-states: registered, \n ranking(enum(first, second, third));\n}\n.avatar {\n -st-extends: Avatar;\n}\n.username {}\n'})}),"\n",(0,a.jsx)(s.p,{children:"By extending a stylesheet, which in turn has a part that extends a stylesheet, we can target inner parts through multiple levels with code completion and validations."}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css"',children:'@st-import Player from "./player.st.css";\n\n.player {\n -st-extends: Player;\n}\n\n/* all player instances have an avatar with a green frame*/\n.player::avatar::frame {\n background: green;\n}\n\n/* the player in the first ranking, has an avatar with a golden frame */\n.player:ranking(first)::avatar::frame {\n background: gold;\n}\n'})}),"\n","\n",(0,a.jsxs)(s.admonition,{title:"Catch breaking changes",type:"tip",children:[(0,a.jsxs)(s.p,{children:["Let's imagine a case, where the ",(0,a.jsx)(s.code,{children:"Avatar"})," component has undergone refactoring which changed the part name ",(0,a.jsx)(s.code,{children:"frame"})," to ",(0,a.jsx)(s.code,{children:"box"}),". If we were using native CSS, and were aware of this change, we could try and manually locate all instances of ",(0,a.jsx)(s.code,{children:"frame"})," and replace them with ",(0,a.jsx)(s.code,{children:"box"}),". But if we were to miss an instance, CSS would provide no indication of the problem."]}),(0,a.jsx)(s.p,{children:"Because we used Stylable to declare that a class extends a stylesheet, and then accessed its inner parts, we are assured that the interface exists and is valid, and if this interface were to change, an error would be reported at build-time and in the IDE."})]}),"\n",(0,a.jsx)(s.hr,{}),"\n",(0,a.jsx)(s.p,{children:"In this chapter we saw how once we extend a stylesheet, we can target inner parts and states using native-like syntax, while benefiting from language service features and diagnostics."}),"\n",(0,a.jsx)(s.p,{children:"Next we'll start talking about features that have to do with style templating, beginning with variables, both native custom properties, and Stylable's build-time variables."}),"\n",(0,a.jsx)(s.admonition,{title:"You've reached the end of the handbook, so far",type:"info",children:(0,a.jsxs)(s.p,{children:["This handbook is a work in progress and is not yet complete. You can track the plan and progress for it in ",(0,a.jsx)(s.a,{href:"https://github.com/wixplosives/stylable.io/issues/39",children:"this issue"})]})})]})}function p(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(h,{...e})}):h(e)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[7514],{4670:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>c,contentTitle:()=>o,default:()=>p,frontMatter:()=>i,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"guides/handbook/extend","title":"Extend","description":"In the Import Class chapter, we saw how we can import CSS classes and target them by composing a selector to target our desired parts.","source":"@site/docs/guides/handbook/extend.mdx","sourceDirName":"guides/handbook","slug":"/guides/handbook/extend","permalink":"/docs/guides/handbook/extend","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/handbook/extend.mdx","tags":[],"version":"current","frontMatter":{"id":"extend","title":"Extend","pagination_next":null},"sidebar":"Guides","previous":{"title":"Import Class","permalink":"/docs/guides/handbook/import-class"}}');var a=t(4848),r=t(8453),l=t(1432);const i={id:"extend",title:"Extend",pagination_next:null},o=void 0,c={},d=[{value:"Extend a stylesheet",id:"extend-a-stylesheet",level:2},{value:"Apply the extending class",id:"apply-the-extending-class",level:3},{value:"Access inner parts",id:"access-inner-parts",level:3},{value:"Access a state",id:"access-a-state",level:3},{value:"Extend multiple levels",id:"extend-multiple-levels",level:2}];function h(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",hr:"hr",p:"p",pre:"pre",strong:"strong",...(0,r.R)(),...e.components},{Details:t}=s;return t||function(e,s){throw new Error("Expected "+(s?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(s.p,{children:["In the ",(0,a.jsx)(s.a,{href:"/docs/guides/handbook/import-class",children:"Import Class chapter"}),", we saw how we can import CSS classes and target them by composing a selector to target our desired parts."]}),"\n",(0,a.jsx)(s.p,{children:"In this chapter, we'll see how to extend a stylesheet to target inner parts and states."}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"Current status:"})}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="player.st.css"',children:".root {\n -st-states: registered,\n ranking(enum(first, second, third));\n}\n.avatar {}\n.username {}\n"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css"',children:'@st-import Player, [avatar, username] from "./player.st.css";\n\nPlayer {\n background: blue;\n}\nPlayer .avatar {\n border-radius: 50%;\n}\nPlayer .username {\n text-transform: uppercase;\n}\n'})}),"\n","\n",(0,a.jsxs)(s.p,{children:["Previously, we manually customized the ",(0,a.jsx)(s.code,{children:"Player"})," component by creating a selector that includes a ",(0,a.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator",children:"descendant combinator"})," between the ",(0,a.jsx)(s.code,{children:"Player"})," and our targeted parts. This selector is based on knowledge we have about the ",(0,a.jsx)(s.code,{children:"Player"})," component structure, but this structure might change in the future, and break our assumptions."]}),"\n",(0,a.jsx)(s.h2,{id:"extend-a-stylesheet",children:"Extend a stylesheet"}),"\n",(0,a.jsxs)(s.p,{children:["To help us abstract our selector, we'll extend the ",(0,a.jsx)(s.code,{children:"Player"})," stylesheet to gain access to the stylesheet API, letting us target inner parts using ",(0,a.jsx)(s.a,{href:"/docs/references/pseudo-elements",children:"custom pseudo-elements"}),"."]}),"\n",(0,a.jsxs)(s.p,{children:["We'll first set the ",(0,a.jsx)(s.code,{children:"-st-extends"})," property with the value of the imported ",(0,a.jsx)(s.code,{children:"Player"})," stylesheet on the local ",(0,a.jsx)(s.code,{children:"player"})," class."]}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css"',children:'@st-import Player from "./player.st.css";\n\n.player {\n -st-extends: Player;\n}\n'})}),"\n",(0,a.jsxs)(t,{children:[(0,a.jsx)("summary",{children:"Namespacing output"}),(0,a.jsx)(l.A,{title:"game.st.css",language:"css",children:'@st-import Player from "./player.st.css";\n\n/* customizing class, local namespace */\n.game__player {\n -st-extends: Player;\n}'})]}),"\n","\n",(0,a.jsxs)(s.p,{children:["We ",(0,a.jsx)(s.a,{href:"/docs/guides/handbook/import-class#stylesheet-root-selector",children:"previously saw"})," that we can't simply target an imported stylesheet, as that would affect all instances of it."]}),"\n",(0,a.jsxs)(s.p,{children:["Here, by using the ",(0,a.jsx)(s.code,{children:"-st-extends"})," property on a local class, we are scoping these customizations to the subtree of our component stylesheet."]}),"\n",(0,a.jsx)(s.h3,{id:"apply-the-extending-class",children:"Apply the extending class"}),"\n",(0,a.jsxs)(s.p,{children:["To customize a ",(0,a.jsx)(s.code,{children:"Player"})," component instance using our local stylesheet, we will need to apply the extending local class to the instance of the component."]}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-jsx",children:"import Player from './player.jsx';\nimport { st, classes } from './game.st.css';\n\nconst Game = ({ className }) => (\n <div className={st(classes.root, className)}>\n <Player className={classes.player} />\n </div>\n);\n"})}),"\n",(0,a.jsx)(s.h3,{id:"access-inner-parts",children:"Access inner parts"}),"\n",(0,a.jsxs)(s.p,{children:["We can now use the custom pseudo-element syntax to safely target the ",(0,a.jsx)(s.code,{children:"avatar"})," and ",(0,a.jsx)(s.code,{children:"username"})," parts of the ",(0,a.jsx)(s.code,{children:"Player"})," component."]}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css"',children:'@st-import Player from "./player.st.css";\n\n.player {\n -st-extends: Player;\n}\n.player::avatar {\n border-radius: 50%;\n}\n.player::username {\n text-transform: uppercase;\n}\n'})}),"\n",(0,a.jsxs)(t,{children:[(0,a.jsx)("summary",{children:"Namespacing output"}),(0,a.jsx)(l.A,{title:"game.st.css",language:"css",children:'@st-import Player from "./player.st.css";\n\n.game__player {\n-st-extends: Player;\n}\n.game__player .player__avatar {\nborder-radius: 50%;\n}\n.game__player .player__username {\ntext-transform: uppercase;\n}'})]}),"\n","\n",(0,a.jsx)(s.h3,{id:"access-a-state",children:"Access a state"}),"\n",(0,a.jsx)(s.p,{children:"Similar to how we used custom pseudo-elements to access inner parts of a component externally, we can now target custom pseudo-classes (states) of our extended parts as well."}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css"',children:'@st-import Player from "./player.st.css";\n\n.player {\n -st-extends: Player;\n}\n.player:ranking(first) {\n background: gold;\n}\n/* ... */\n'})}),"\n","\n",(0,a.jsx)(s.h2,{id:"extend-multiple-levels",children:"Extend multiple levels"}),"\n",(0,a.jsxs)(s.p,{children:["Let's say that we want to turn our current ",(0,a.jsx)(s.code,{children:"avatar"})," part, into a component to support a more complex design with separate elements for the ",(0,a.jsx)(s.code,{children:"frame"})," and the ",(0,a.jsx)(s.code,{children:"image"}),"."]}),"\n",(0,a.jsxs)(s.p,{children:["To do this, we'll create a new ",(0,a.jsx)(s.code,{children:"avatar.st.css"})," stylesheet, import it to ",(0,a.jsx)(s.code,{children:"player.st.css"}),", and extend our ",(0,a.jsx)(s.code,{children:"avatar"})," class with it."]}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="avatar.st.css"',children:".root {}\n.frame {}\n.image {}\n"})}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="player.st.css"',children:'@st-import Avatar from "./avatar.st.css";\n\n.root {\n -st-states: registered, \n ranking(enum(first, second, third));\n}\n.avatar {\n -st-extends: Avatar;\n}\n.username {}\n'})}),"\n",(0,a.jsx)(s.p,{children:"By extending a stylesheet, which in turn has a part that extends a stylesheet, we can target inner parts through multiple levels with code completion and validations."}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css"',children:'@st-import Player from "./player.st.css";\n\n.player {\n -st-extends: Player;\n}\n\n/* all player instances have an avatar with a green frame*/\n.player::avatar::frame {\n background: green;\n}\n\n/* the player in the first ranking, has an avatar with a golden frame */\n.player:ranking(first)::avatar::frame {\n background: gold;\n}\n'})}),"\n","\n",(0,a.jsxs)(s.admonition,{title:"Catch breaking changes",type:"tip",children:[(0,a.jsxs)(s.p,{children:["Let's imagine a case, where the ",(0,a.jsx)(s.code,{children:"Avatar"})," component has undergone refactoring which changed the part name ",(0,a.jsx)(s.code,{children:"frame"})," to ",(0,a.jsx)(s.code,{children:"box"}),". If we were using native CSS, and were aware of this change, we could try and manually locate all instances of ",(0,a.jsx)(s.code,{children:"frame"})," and replace them with ",(0,a.jsx)(s.code,{children:"box"}),". But if we were to miss an instance, CSS would provide no indication of the problem."]}),(0,a.jsx)(s.p,{children:"Because we used Stylable to declare that a class extends a stylesheet, and then accessed its inner parts, we are assured that the interface exists and is valid, and if this interface were to change, an error would be reported at build-time and in the IDE."})]}),"\n",(0,a.jsx)(s.hr,{}),"\n",(0,a.jsx)(s.p,{children:"In this chapter we saw how once we extend a stylesheet, we can target inner parts and states using native-like syntax, while benefiting from language service features and diagnostics."}),"\n",(0,a.jsx)(s.p,{children:"Next we'll start talking about features that have to do with style templating, beginning with variables, both native custom properties, and Stylable's build-time variables."}),"\n",(0,a.jsx)(s.admonition,{title:"You've reached the end of the handbook, so far",type:"info",children:(0,a.jsxs)(s.p,{children:["This handbook is a work in progress and is not yet complete. You can track the plan and progress for it in ",(0,a.jsx)(s.a,{href:"https://github.com/wixplosives/stylable.io/issues/39",children:"this issue"})]})})]})}function p(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(h,{...e})}):h(e)}}}]); \ No newline at end of file diff --git a/assets/js/baf0d4a2.840f3cfb.js b/assets/js/baf0d4a2.7ab90aee.js similarity index 99% rename from assets/js/baf0d4a2.840f3cfb.js rename to assets/js/baf0d4a2.7ab90aee.js index 51d6a7c4..c8e26afb 100644 --- a/assets/js/baf0d4a2.840f3cfb.js +++ b/assets/js/baf0d4a2.7ab90aee.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[6827],{8814:(e,i,s)=>{s.r(i),s.d(i,{assets:()=>l,contentTitle:()=>g,default:()=>j,frontMatter:()=>I,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"style-guide","title":"Style Guide","description":"You can write content using GitHub-flavored Markdown syntax.","source":"@site/docs/style-guide.md","sourceDirName":".","slug":"/style-guide","permalink":"/docs/style-guide","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/style-guide.md","tags":[],"version":"current","frontMatter":{"id":"style-guide","title":"Style Guide","sidebar_label":"Style Guide"}}');var t=s(4848),M=s(8453);const I={id:"style-guide",title:"Style Guide",sidebar_label:"Style Guide"},g=void 0,l={},c=[{value:"Markdown Syntax",id:"markdown-syntax",level:2},{value:"Headers",id:"headers",level:2},{value:"H2 - Create the best documentation",id:"h2---create-the-best-documentation",level:2},{value:"H3 - Create the best documentation",id:"h3---create-the-best-documentation",level:3},{value:"H4 - Create the best documentation",id:"h4---create-the-best-documentation",level:4},{value:"H5 - Create the best documentation",id:"h5---create-the-best-documentation",level:5},{value:"H6 - Create the best documentation",id:"h6---create-the-best-documentation",level:6},{value:"Emphasis",id:"emphasis",level:2},{value:"Lists",id:"lists",level:2},{value:"Links",id:"links",level:2},{value:"Images",id:"images",level:2},{value:"Code",id:"code",level:2},{value:"Tables",id:"tables",level:2},{value:"Blockquotes",id:"blockquotes",level:2},{value:"Inline HTML",id:"inline-html",level:2},{value:"Line Breaks",id:"line-breaks",level:2},{value:"Admonitions",id:"admonitions",level:2}];function A(e){const i={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",del:"del",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",hr:"hr",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,M.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(i.p,{children:["You can write content using ",(0,t.jsx)(i.a,{href:"https://github.github.com/gfm/",children:"GitHub-flavored Markdown syntax"}),"."]}),"\n",(0,t.jsx)(i.h2,{id:"markdown-syntax",children:"Markdown Syntax"}),"\n",(0,t.jsx)(i.p,{children:"To serve as an example page when styling markdown based Docusaurus sites."}),"\n",(0,t.jsx)(i.h2,{id:"headers",children:"Headers"}),"\n",(0,t.jsx)(i.h1,{id:"h1---create-the-best-documentation",children:"H1 - Create the best documentation"}),"\n",(0,t.jsx)(i.h2,{id:"h2---create-the-best-documentation",children:"H2 - Create the best documentation"}),"\n",(0,t.jsx)(i.h3,{id:"h3---create-the-best-documentation",children:"H3 - Create the best documentation"}),"\n",(0,t.jsx)(i.h4,{id:"h4---create-the-best-documentation",children:"H4 - Create the best documentation"}),"\n",(0,t.jsx)(i.h5,{id:"h5---create-the-best-documentation",children:"H5 - Create the best documentation"}),"\n",(0,t.jsx)(i.h6,{id:"h6---create-the-best-documentation",children:"H6 - Create the best documentation"}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"emphasis",children:"Emphasis"}),"\n",(0,t.jsxs)(i.p,{children:["Emphasis, aka italics, with ",(0,t.jsx)(i.em,{children:"asterisks"})," or ",(0,t.jsx)(i.em,{children:"underscores"}),"."]}),"\n",(0,t.jsxs)(i.p,{children:["Strong emphasis, aka bold, with ",(0,t.jsx)(i.strong,{children:"asterisks"})," or ",(0,t.jsx)(i.strong,{children:"underscores"}),"."]}),"\n",(0,t.jsxs)(i.p,{children:["Combined emphasis with ",(0,t.jsxs)(i.strong,{children:["asterisks and ",(0,t.jsx)(i.em,{children:"underscores"})]}),"."]}),"\n",(0,t.jsxs)(i.p,{children:["Strikethrough uses two tildes. ",(0,t.jsx)(i.del,{children:"Scratch this."})]}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"lists",children:"Lists"}),"\n",(0,t.jsxs)(i.ol,{children:["\n",(0,t.jsx)(i.li,{children:"First ordered list item"}),"\n",(0,t.jsxs)(i.li,{children:["Another item","\n",(0,t.jsxs)(i.ul,{children:["\n",(0,t.jsx)(i.li,{children:"Unordered sub-list."}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(i.li,{children:["Actual numbers don't matter, just that it's a number","\n",(0,t.jsxs)(i.ol,{children:["\n",(0,t.jsx)(i.li,{children:"Ordered sub-list"}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(i.li,{children:"And another item."}),"\n"]}),"\n",(0,t.jsxs)(i.ul,{children:["\n",(0,t.jsx)(i.li,{children:"Unordered list can use asterisks"}),"\n"]}),"\n",(0,t.jsxs)(i.ul,{children:["\n",(0,t.jsx)(i.li,{children:"Or minuses"}),"\n"]}),"\n",(0,t.jsxs)(i.ul,{children:["\n",(0,t.jsx)(i.li,{children:"Or pluses"}),"\n"]}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"links",children:"Links"}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.a,{href:"https://www.google.com/",children:"I'm an inline-style link"})}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.a,{href:"https://www.google.com/",title:"Google's Homepage",children:"I'm an inline-style link with title"})}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.a,{href:"https://www.mozilla.org/",children:"I'm a reference-style link"})}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.a,{href:"http://slashdot.org/",children:"You can use numbers for reference-style link definitions"})}),"\n",(0,t.jsxs)(i.p,{children:["Or leave it empty and use the ",(0,t.jsx)(i.a,{href:"http://www.reddit.com/",children:"link text itself"}),"."]}),"\n",(0,t.jsxs)(i.p,{children:["URLs will automatically get turned into links. ",(0,t.jsx)(i.a,{href:"http://www.example.com/",children:"http://www.example.com/"})," and sometimes example.com (but not on GitHub, for example)."]}),"\n",(0,t.jsx)(i.p,{children:"Some text to show that the reference links can follow later."}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"images",children:"Images"}),"\n",(0,t.jsx)(i.p,{children:"Here's our logo (hover to see the title text):"}),"\n",(0,t.jsxs)(i.p,{children:["Inline-style: ",(0,t.jsx)(i.img,{alt:"alt text",src:s(9795).A+"",title:"Logo Title Text 1",width:"85",height:"96"})]}),"\n",(0,t.jsxs)(i.p,{children:["Reference-style: ",(0,t.jsx)(i.img,{src:"/img/branding/logo/PNG/96-logo-OnlySymbol.png",alt:"alt text",title:"Logo Title Text 2"})]}),"\n",(0,t.jsx)(i.p,{children:"Images from any folder can be used by providing path to file. Path should be relative to markdown file."}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.img,{alt:"img",src:s(1197).A+"",width:"85",height:"96"})}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"code",children:"Code"}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-javascript",children:"var s = 'JavaScript syntax highlighting';\nalert(s);\n"})}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-python",children:'s = "Python syntax highlighting"\nprint(s)\n'})}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{children:"No language indicated, so no syntax highlighting.\nBut let's throw in a <b>tag</b>.\n"})}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-js",metastring:"{2}",children:"function highlightMe() {\n console.log('This line can be highlighted!');\n}\n"})}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"tables",children:"Tables"}),"\n",(0,t.jsx)(i.p,{children:"Colons can be used to align columns."}),"\n",(0,t.jsxs)(i.table,{children:[(0,t.jsx)(i.thead,{children:(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.th,{children:"Tables"}),(0,t.jsx)(i.th,{style:{textAlign:"center"},children:"Are"}),(0,t.jsx)(i.th,{style:{textAlign:"right"},children:"Cool"})]})}),(0,t.jsxs)(i.tbody,{children:[(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:"col 3 is"}),(0,t.jsx)(i.td,{style:{textAlign:"center"},children:"right-aligned"}),(0,t.jsx)(i.td,{style:{textAlign:"right"},children:"$1600"})]}),(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:"col 2 is"}),(0,t.jsx)(i.td,{style:{textAlign:"center"},children:"centered"}),(0,t.jsx)(i.td,{style:{textAlign:"right"},children:"$12"})]}),(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:"zebra stripes"}),(0,t.jsx)(i.td,{style:{textAlign:"center"},children:"are neat"}),(0,t.jsx)(i.td,{style:{textAlign:"right"},children:"$1"})]})]})]}),"\n",(0,t.jsx)(i.p,{children:"There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown."}),"\n",(0,t.jsxs)(i.table,{children:[(0,t.jsx)(i.thead,{children:(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.th,{children:"Markdown"}),(0,t.jsx)(i.th,{children:"Less"}),(0,t.jsx)(i.th,{children:"Pretty"})]})}),(0,t.jsxs)(i.tbody,{children:[(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:(0,t.jsx)(i.em,{children:"Still"})}),(0,t.jsx)(i.td,{children:(0,t.jsx)(i.code,{children:"renders"})}),(0,t.jsx)(i.td,{children:(0,t.jsx)(i.strong,{children:"nicely"})})]}),(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:"1"}),(0,t.jsx)(i.td,{children:"2"}),(0,t.jsx)(i.td,{children:"3"})]})]})]}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"blockquotes",children:"Blockquotes"}),"\n",(0,t.jsxs)(i.blockquote,{children:["\n",(0,t.jsx)(i.p,{children:"Blockquotes are very handy in email to emulate reply text. This line is part of the same quote."}),"\n"]}),"\n",(0,t.jsx)(i.p,{children:"Quote break."}),"\n",(0,t.jsxs)(i.blockquote,{children:["\n",(0,t.jsxs)(i.p,{children:["This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can ",(0,t.jsx)(i.em,{children:"put"})," ",(0,t.jsx)(i.strong,{children:"Markdown"})," into a blockquote."]}),"\n"]}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"inline-html",children:"Inline HTML"}),"\n",(0,t.jsxs)("dl",{children:[(0,t.jsx)("dt",{children:"Definition list"}),(0,t.jsx)("dd",{children:"Is something people use sometimes."}),(0,t.jsx)("dt",{children:"Markdown in HTML"}),(0,t.jsxs)("dd",{children:["Does ",(0,t.jsx)(i.em,{children:"not"})," work ",(0,t.jsx)(i.strong,{children:"very"})," well. Use HTML ",(0,t.jsx)("em",{children:"tags"}),"."]})]}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"line-breaks",children:"Line Breaks"}),"\n",(0,t.jsx)(i.p,{children:"Here's a line for us to start with."}),"\n",(0,t.jsxs)(i.p,{children:["This line is separated from the one above by two newlines, so it will be a ",(0,t.jsx)(i.em,{children:"separate paragraph"}),"."]}),"\n",(0,t.jsxs)(i.p,{children:["This line is also a separate paragraph, but... This line is only separated by a single newline, so it's a separate line in the ",(0,t.jsx)(i.em,{children:"same paragraph"}),"."]}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"admonitions",children:"Admonitions"}),"\n",(0,t.jsx)(i.admonition,{type:"note",children:(0,t.jsx)(i.p,{children:"This is a note"})}),"\n",(0,t.jsx)(i.admonition,{type:"tip",children:(0,t.jsx)(i.p,{children:"This is a tip"})}),"\n",(0,t.jsx)(i.admonition,{type:"important",children:(0,t.jsx)(i.p,{children:"This is important"})}),"\n",(0,t.jsx)(i.admonition,{type:"caution",children:(0,t.jsx)(i.p,{children:"This is a caution"})}),"\n",(0,t.jsx)(i.admonition,{type:"warning",children:(0,t.jsx)(i.p,{children:"This is a warning"})})]})}function j(e={}){const{wrapper:i}={...(0,M.R)(),...e.components};return i?(0,t.jsx)(i,{...e,children:(0,t.jsx)(A,{...e})}):A(e)}},9795:(e,i,s)=>{s.d(i,{A:()=>n});const n="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFUAAABgCAYAAABsQj5EAAAAAXNSR0IArs4c6QAAHzBJREFUeAHVnQt0XFW5x/c5M5m8Ju+GtrxKaYECBWl5sxCLXCgoUgoWQQTrgvaKgogo4INlrniXaC9cBBWQK3aJCK6CoiIIKBREoNK3tIC00NLS0meezSSTmTn3//++vc+cSZM0CSkr2c3Mfn379Tv/vc8+j6Se+ZDdt9dcfEA6HZxrjHcKmj7GM2Z0LvCqTRA0er7ZGBjzTDwWe/TWwx589UPu2pA1hzHtfXf7hutK32/d8tlskLvSBOakwhY98ARKzzOuMxr1flcUS1x/6+Hz1xXaD/+YG8de6em9wdyif69quxrQbkQDowmOAD34gIsffMERp4QkTfi69EaYTr9t8shS7V6Dev3qz56Wy3n3BLngcEIUNQpBAiVC+GxduWpcIgTsEqV7LbF4fPrtR8x/hcVHgpNeD2VHG1Y1JJpza74PYtfngpyvdXdrxipy93Yd5by9xb++pLjoqB9Nur919zLDL8UOemg6dv3qK8Y1Zt9+KZsz38DHDwIq1MfHM1CtwQlJw/CNQTo/TIPv8qJhphmUhz8u1ZH9wdD0cu/XkpfEB2zrKys+fwam7W9BqC46rfMT2U1rNqn6C9dX27asCgw7EwS4FHDNRVIqGSvd79aj72605sPWGxKlXrPy85dCTU/mcqYuRxBQGFXGj1NillNeVGeQHlGoVXBoL+qNKJe2qDMbeKXNuc5Zw5ZkpGPxSHhQwS8vn/01TPX/8QLP49SlCHP4yBkeNcoJCnAZZ7rKULUaShL5zomN7KkIk+VhxQDKezlvirMbzv6goQKW9+UVV8zL5YLrOUABINNUASFdQBgCw0+QUxu3E1ArTm86jUlQvqhk6lOhEih2ETALxuVthm9oUFAbggb/S8uunI9xXkYgCkoHqZAYJkk7cPgMcmVUJTLCpYGpULfQU1tXxOPJy5YSM61vl1oN7+9BQd28dOPd0JEA5fBURYRUwEdGTpACjxBpSwXiejQExXyQdgombGaqTklboprseeskYZh/DRjq3CVzfggGc62IZHg8GUmcMadAgcNk/vN1XUS2wAJdAhbgLAPH5UFUS4+qtE7hIx9txIz3lEsfzv6AoF65eO5NOMPfoEA4UAxNIoSgqVQdweHEBZ8hTm9Oe+bTabrzmSzKlRzUInDFUL+Er9S3Zr/j91kYyRm2wX5DnbP4qi9mc7kfuGmq09OCEoAcI7Vnp7kMmWdw2BAUprwcBVEyrXgYrCJhwppsbVKSdYljHj5ezLu5wWvI2Mxh7dme993HOUuunp7NZp8AIN3nuCkuxbpXwbjiceJ0B0IXRgCCCfNolS/tlJ1XcmjhmQd+deJPL++7l8Mnd49Knbv42gPT2cyDmJY+pymdnpg07IYiamIePjLlbQbjApfrrnVYQgQsLZlP53YCGne2WIu94AV/n1Fz1WpkfMf66iZvjmzvbP0LThITdVoDAuFQagQioPK+THGbLjAFmtrqtT6hM07BaznnuzpdvWLneQ9XjzIX/nzCjzr76udwy+tTqW+37bgDl5bHU06hoojTqo7qEhXKfFZFyslJ4g4+r7BY2sF1YbVnxW45CBvx0UJgbnngpDsasHS4pocbu177w5H26C5/5drP4dbdA+QRDlosWSQPJlo4HL0LuILisxT1B4XaQhourAum7VDy7N+ccvuCaN0jKdwj1Nkvf/UgnGZfA9Ry5WfN3PjhOzCFg4WdOwo2w4lUDoWUVxtXFRVM2PR9z2yM+cGMX598x9LCekdWrMfp35kLfo5BlnPN1DM3BmXpFMDhWC1EuVICGMrahbWIQpTLU5iLOsFQ6g2Ls1bv1eIi/7z5J8x7H5ER7TiaAnfJy9d9Psia+U5J9Asdi2iuwOPUtk4guoj4qkKCpNutTpdgzBJTGj9jwXE/bBbDEf6VJ4KBfGlVQ3JHY8saBEcXAsrDIUgRJL7IRL/goyabRRmKWiUxRElj2mBdlQPBpjHxc/4qP1F22oJTGnaKwSC+zjKmvMyY+iPK66tf27Vt81RjtjXoJccgavvgRQqm//amXTcGOW+0CEhw5+EQhE5h0pOfwtbtjkBshK7d08oxQBkWk6PAgB6kwMQb0zFz3p8HAfQaY4o/UnfIN9qy6QsyQe6QuBcDV+N/vLo8h7U5taCo/K0TK8b++YDiqoe81Y+uKuzs3o1hhOoueeVbo9PprreRwM6p0qgoAURffihCC4ecFE6oSEITFUaKEWqkjIvgTn+wq6l41l9nfu9R7UH/v39Rf9hFrZmO27Hm79e9FJoK5wauVszU8npzQsWYVUWxovtMeckvvUUPtnQvM9Tx8LIo3Zm5Bp0so9LkMQg36KIofbTBNG7ao49C3CMSbpQkXfIZJmz7SCQsww2/1knbTe+UPT4YoD+uPui7zV2pB3GsAZRHkc75DGmY31kYLW7ban67/d9HNqVTd5i29nXB5Au+FUybXSLF9tKXQL1sxbxyPA25ikD1OZKCETi83MdzJIUE4LjEFDhII2QBasPOXn2tiweGZfjsiul8qrppXXnzju3V8sRgIOP6cfW4m3Hj+mbMEF222AULUXyJR2tUxNu7OszD2980mzvbanCJ/d/B1ubXgskzz4xaDmVYoLY27bw4m/Vq5XGyVZOEAZRqdA/zXL7AISDkK0AFp8rGAeCBEIUqSKdQprc0Fpn31hb//e0brn1rIAO5uXLM8RmTuwnHBrdVu5V0cV20kUmd8hNmmI5c1vxuxxqzJc2HB8EEwH0qOPLCnwQnzypFwpA6gQolXkLFcfB4iKeKEmhoHiB02ltAkh5Vrg2LagGZquaBgO+AO8BdGc8se746G6ss+epAR5H04j/zPb9MuDleUZ8VOobO7wa3C4X/sHOtac2mmePlguyXg5auRcExFx4y0P70Ze/Peq5hDMCdLhDc1BZACkunL0FFVadroypS00OI9uAQpBwM+G7JeP2lJM9T72644Str++pU97wvJpKT455/NBmKAi00jVtrpvUGOYQbmFQuY55sXIfx0BjLQ2COCtLZxVgO8Cbi0Di/3WSnYYr7hCCQCI9qo9Kc2ggG6cxXQBakS4NPmeRtGKZa0W3WhfIbViXM+lWlpjSZ/dNAuz6xvPYyHIyEsESAK6Xud7UmXTmlC3mwNEb7uzIZs6Oj0zSn06aLHUL6ZiwBy3dt1cKIY52uRH2PBUfOnKOJH+wbJL1T8ipUME5heiJSoALMqtDBdvkCOwI4PEA8GCiTTvvmjWfLjYnhpQjfv3+gXcY9iENZRuGpPvUyV/CG1RG0A9zRlTXr2trMhrZdZltHh9ncnjJvt7Sare0dhGgWtW0R1apiUXcQxPCq58+zk89vCCscZMDHwTsuuvYpIBw9Kg2geHDpC2iJq/J0WbA2sBWVC3Q9MFKWoKHUFX8qM11Z38QTQXbrLdevGGhfcWaq7V7GwZN0dE/i8Ak71ZUx6wGzI5stKMbDsbOz07zbyryMWRJRqx4qGATBd7NHzrwvmDWrz3vNBRV3i/i4TByryoKKBKAFxDM4ociyoKBCcDZdoRcCl6XDlmHZtqaY2f4mdkBFnokXBx3d2u9XFNcJe37bz1JJ4yy/oa09VGxPDRA2FbyqbbvJYI1VpxVwqQ2C7JXZ1ekFwbSGgivOnurqKc3HU5L6EB5h4ENYbknQsFsCFLhToU5/C1zK6kFw6qbdysdxgcb+YurH48GgXobwTWx9T50vSOOxhWvsSMv01ljv3ymA3ZhqN2s6mzFWe0RYh60HoZm57cvmIy+f0nt1BTmA6mEJcEqELycWp1BVK+EIQJ6odgOuZcILB6hd1A3I777cado22vZQhbxuVdB8/yLvpVv/yOJ7ss6gE02d6T2Zhfk8gS1v3S5XzgoTiwgBc7hcnwNzaW7yjJ+GBfoZINCtAR7oKSy7DbKQBRQVCJBZBx4tOsjh5l/eOLF1hEr3zdrHt6Mb7KG6bMbD2Wrgbseunc+ngyx/yaJPl8pk90h+l8mYZtNlnOWq1kbsChiLqJWtSLcl9arskTMG9G4s7jl4W0SdVoUC14KUpYAwpQW7xspa6w6CVaVVN8u6g7N5ZafJtaXyEKDgrpQ3qKuX+QbnlcDcIwKyNfYEWLZM+RYLQl0YxWrTZlbis9rsMktNi9lsOkXZm+Qqi+JkrVatDIlaCTa4CWD5ewv9cjz7L5c1NQTC9VShKWAXV4DuiktsqEqnaqdkQsdBWPtn3B71IydQdDDbZWK1X7uz22+n9KufZnPze7d1Bbl/0ZpDz+s/X76nNLUPzOsA2QyVOpdBLetMymzAZ0XrDk12FcB3ywB3E+qCH2Qmf6pfFwiAGn/FXaLSV7WxUsKJwLWgdb2EHddOC9CtoW7ble4ITNf76Kh9T0A6xZsIcF4sGNQG+y5jOrenWmdiE7eNwxT9yLcLY4Phy1W3tBP92obpvgsTvie30XSY19oINap9hC1L1w72tkz5VXD0rPE91RNN82Oe94KA5HZKprGDaeME14OK5UAwPapUKe+Ztx7HA1HI0mCtCh2idG2N5gINDfx7XmfzWly/n4mBbnKlOVJ9XBOY4njPUJsAtTeHYZvXuQMQA4Up4QhUBxyTrSaT7Xx0T7cO/Wc/ccNavM2zFFsrVBxRJuOAFsKTsE0LVczmInZW6Tv/ZV/Lx42L0HWx+5Bbm1ddc+OPLw7TBxi4qem9FZXpzqllsbhcRDglsZo4bvmXxSNLjq2bm6y+3JYs3tUARMLktCdPt77mp7+rIZiS3b7zJy7Wky+HNoc3Qdy66lQp6nWg0UwIXML2hIS7cLJzYBp3ELBPtSKtpUnbIlQqlo4etxNwqUbvLtOAIzNIN2fX1i1btr8zdb+Sst+gEq3U1jWqtHi3WovRr75cu4UeLp8RlSpcNqL/WA8um6/IHDXjC73VKa35sfivcYZPi1q5PWIn6KMVPVkxrB9nk/ctUCoZ9hv+gaOeibylg6kVOqy1dB0tZlRV2119Hu2wTC+BBozt4s1vXjqpvOarRZ4fzu8SKLWupBBslen7woh3AyBNjFW0ao8SwqSMH6aGwBGjeoNc7s7g2FkH9tQ9gfr3s6/bbHz/Qbdf5RYqC7Ci1hCmBYwKmU/bLHwHPUc7lGl+s9sVZcvmfLvt+WnYstn7Yvm1d03PZw4udM7GlXeOL684N+H54bOnurKEqS4uCiusNwlTjlnVm2OvcDOlAJzaAidBW7DqQ7EKP5npTN3dU53hvMjGErcBDGa/VaWAw1QmXIbph4BdmsJlOm2o3kwjTlJRl27DfHfLATJ2KdgAv8PT2RL8seqWeydEzQcT/tSG156eVFI9rdiPKVhw2Ke0xFQkFCxPZIfgeWZvWKnjGHYOAosAAY3qFGfjAjeSjolJu09kJp/7GWfq/BDqq2dfzce4DzlADqZTpYJ1alVVhnlsAWA7dsHv6AaVLTXinrRbWwk1o13OpEyifV16RdXX7xvvOjRY/8xNK5btX1p2VtzzcBThMLIxZcWmOKYoS4H0MOgVPdzNcc0lRpnWxMnh4KOKhDkL2Y8uA1atnLWed2twzjUF600IlS0VlcS+BaNObCZDVcqSQJWyYadUQIQdGlIly1KAtKb1qCQXOeOzUroM0ra9gV5ii0WezQBrpdC1KyhPNXWsqm245wix/QBf529cvWh8SfJz2ARgb6+QxiTzD06rTJEZZ3a/qCvHuOgi+tQwhijdtAoVBSNcAD3IHZTZ8PbV0W4XQH3pjKvXY0P/vzqVOeU5pfVDJRKsU2dUyS4txZ3Ubi/t2+a4DOAxhjgqtYmAlWy6LShtWd+1vO6/7sbm/oO58zat/kN9PHG71AIoCRCuKU6ElY7B+lqGcUTd6BjziVT7E82TPlI/TOQXxOQsqSst4X0zOPZT8r4EzQprR0JJTf33oLw1hOaU6QAyXqBYC1zsYJ9uQRO81OrN4Rm86bC7gTRsW/K2mVRQtPOtzKO1DT+b11vx/qZfunXtTVXxxEoOmQOvLS1SKKiA6+uB3dR6cHFS4JCZAiMq+2GixBhnIO/rQZASdV3p4Atq0APUl0+5KIXH6nN40hJlYlorTCgW9UmY0x+dCzj9uSTYA4DH69iB51XhGinw2+11NhO5xWrLgw0ygbfzjczXk9/42TIz76lB3dFiteAQlBt/NsYvW60Y1OpOWsyvwTJQEtHTUWU1SAUcFORBcE7whXHG8HFx5zMVDQVB7rqgoUFEuptSWeHyc+YsxHopy4ADGgXoTma6NOiSwLAc3PjuaxbrDB2XgajjicveF3DJbRsyxyTWvvV+5c2/PN6lDdS/ZNuaZVVFxfjlDw7amGSi8NxfC7B0ZHNa7RilKXBYgkNRlQswGZgkh3nMpxNfAU/IPLb4NKb1CJUZdSUTbgTQFxUqwWFmw5wnKK61DrJbTwUqb2gk9iAwe1JgG6Fr1w6GcQTSTblk27ttL1V8+54Z0fSBhCs88x3YS9dKu12+uguCfbwiU50oFbV1V2G+VwhZzQjsSCf0vgMTkJMN5PK7V6gLTz89U+IVX4QT1/syxeVMT6AEa9UZWRoI2ePGIlmPQ5XfeEfa12BP0DvzS0DUPtcZxNvWd/2u8pv3nhhN72/44i1rXyvxY3K70McSkIjcxSq1evpISaUAlZMOJU141qfERYloMExDioOvuc6Gy2NwIex6kk2+y0vOvmxzEPM/gzN/hofbwRSlolOqYq6vCjmWxDHiPdSq/fKVREPsecXYaIqGIzezumdinfU7mrJPDvZeQaWfeMrVWRxRa5GFOqPugFCFtKM6o4AZloQI7DxgzdJyLBmMMlPPP7xXpdKQ7vXps1+AOm8StRJkBGaYxpMVPkWVAJpAlQSX3EcrcN/sXe1EnMjy+0aXJX7PYpWsdGOmpsLc9/0C+35GWkz7YzJc2McJyDr8hpapwliOqxmtKhQF0gDKE6VyVtqw+HmAolSrYrFFPstxiF3ZzMl7hMo+vHH25behyP2hWiPTXrZYVDHSYmWAWmx7XjsB7zYfhnecsRxU4EQw5iiER7G6nl1kwD0ZdDVl5/SUvqe0fba+908MOEW76G08AjuupEqKh1dSAoeGkhx+EZyoF/kMK3QLmbbWnnVih3RMv6Cy9kunXzYHU3sBpz6XAVlbEeadKafeRB3W0hK0gPVLXGktznhQZ814XK71cQLD42vXMS24+3fH1kxd1eMPcu8zIHcR9ha4ES9bDq6rznWh13P3PRRRouCorDIRVmenDovg42yknzJmpFDRcA6yRrOj+w21wfNyVXWHXQqIT4ZAZSmIyd0qmf712GRTqcl856XVPX2V9cMeU8HfGHxyT1X1lI9fdcOtMwdLLY5IVpqDklVhqkCjHCOOaa4cwxpnktYVKhzFmGKL1/cbKttactxxXaMrii6EYl/gUkCQoc+dM86uJWOw+S9FtW4ZYMG+HNVD+364IJWltAbs0C2h5ZTFyIVjD7LIgENyyUrV6fC55YLxECBbd/asQfgyAVYK2/0xLlr2z/GKK1FWcq7x44tkjeX6ak9e9Msm2kvgKoDCqz57dJWw64cZ68n5+ZvRe6w3YgBUFVLeKmxCssKMKcVFCuJUl05fwlU4rj9MJzNns/sSwUzizC8VeEVpW/8kEukgg2+eOqO1Kqg8I+fFnqBanWIJuWQcbrIlcYeSPanBiauUHe3BMbkazfdX0TCPFcfe6aGmPpMacNJPZ7ICtQtnEQ74ov0OlDJOka4ChWshE6ftulUgUoiYHzjkFcSRxDiWmvcGBZV1rpw+fdfEoroZ2MP+Qu7+y1KA6gAzOTlJE+0Ut1mEx7dL2UlEBXQdwBf3v3mvOB5UHTb2cVY7EHfg6HGn4QQl9zs7sds+oW6UGVWcv4JSbopHFInK6Qs0KlsN1Jd0W8LdjbP5AhTGKPsqRjZ4x6sulL5y32d+vxHv0H+XNfI4lh6eNO1rU6Zrm31WRXgFt3EH3ma8NrFz3emn20cI/S+Pjd55vK9CPkls/j+97zgtHIGhCcDCztNxHAKURhY4fZuvay3ykMAHpbQhdVrmihIv9V8qKNab23TmzAbPj12BmzCdbjmoPBXbqcgWprey/U0vGl18b39to3atma4zGQ+ynrnyoInSJcUUsbKARZUiDEBCmuASuI6m8FbgBAlbASo+7b03Spf86d0hgcrubTpzxv0miJ2KdXU9wcZqi03FR/vY7EfGtKdgrDrR3n7i/t/dk133/IfGHnxcZ5CdxBPMWfVjzdjSMqsposj/Y7k8aISsJCVNgKtyHWQypI2zC8v75iGGhwwqK9t81icXl5T4U1DtQzxpFU+sMOUn1jFr8A6/qx7fv+xio0vNgOppzWQboCf/pMp6c2i53jiRCgSUFRoS8kBt9TY/n05VWjubR5WKQJlu11fcU/oNa3Amtrah8+r/9uQsrLN34B2kfTtW4wp8EV6rtC9T9LsV3w+KD62c19lw+Y39LmMNH9534tQNHalXJieri06tlj8ybHOEAkDKdMW3DWmy2BCKy3dgqfYCpwbOEOr0nyxd+fQnaDOkSo02uu2McxaY0spJge/fWjK5pi35yf2NVzaA8yIUWnx07aCAsh87Mun5k8ori07FDRMdOb7dlAUfQcQvyg0/MpUlkWn4wDmgGtN4mNbNFvXMc3Yuy8X3ir/for/WtbcFc7KprjkdS3ccnH4DJ/E+VOtXF6cTB1Re1fHtS+4fTId+NXrCLZWJou98vGYM+GCI4SgRAFi5OqLSIk7TkOfSZOFkxElSq5EY8qLrKVT6StnKZ04Oi7rAh+VXP//MlM4NqdnpZTtmZbe2j5ZfW7GNe5WJVHxs+aNd06ZeZU4/Um6CDLRfj4ydOL2+tOyxKcnaEt36RGrI80Gi4uO3S+b5SdZJ5BGaWGiCVkKD7uWQj+n+0dIVf31RjZyFi33Y/tx7i0yHN95Ux0eZxs415oGr8Lh18O7VA486uKq0dOGYkrIDqFA3VTXcw2AdI+s7O1IWlvAly5Fn1xxkZiAXB+735Sv+dgFjzunhcrER7LeectY+QVvn89iITuoOhcOKQtb8nofu7OjT6TRHDFERqqSSrVi0+8WxyaX/fPodmyzeXjtRRRvZ2+HUMdMOwm+kPQcOk9xaRz9UGTrAmFsO6DOuFprn+hiWt/lSxvIXkSKsgKXG73QHynpGPNSWY6ediovQf2KveARHK+O3EARbKC/EbNjBdHAdUPFtWYZprrZalmFmsx40taj80Jo7pUy3r0gV3XJGQLRl6se+gHcG7sEIEzJ4WefyU1WUhXEQjgAkDGJRMlZyTnn5AdNGAXbDI9Jnca8x5iWmli7/y7p8qXxoRCqVb4K0TPnYbbi4uB/3MxJOgZRP+NdvESQDBcoBi7oEVpgombShZcSFLIk2kqfpeBrvXd4bUNYSFo9UOayDfBGsJdf8EMaKu0+qPA47OhAHUhWHTAeN0BGWddImh+VsntakNTp1R4FAhbcmVyz8ZjSte3hEKTU466zylmzTs1CWAJXBCJWImpAYTnunMtogUUzh09qui8JQSrsjIbmwxI9c00shaQm3jr3nyw+t51svfboRBbV5a/svoc4TOeAQnFMhYLh/HDHD6hBSappm7Z0K1QrfAtGWwh/CjC4JTEV7m714cLG3YEEfr35oiyMGavOUj12GLs8SuQGMDNqpiEAsQoEVxizc6F8LlTLERJCMqK/ldd21VYWgYdeE+8VnJ19d+H6Y10dgREANjp1bhN/B/y+nJvGJQ1TncFi/hzRdW7vZCXhNE/QsJwcnf8CYi1vDKS/unZtc+reVfXAsyBrAbaOCch9qpNm8cTqeUo4XDm7eA4CIDj0Jp2qYgESGAcpNc3ZY1MmA5DGgLq9amyD1oCze4okFsU+XL37uH862P/6IgIrfWZoug5HB5iHmHw/pSUjgUHCwI2gHVBQniajF5rG+ELImM0nS7CmNvz03u3z5c09IxgC+RsT0x95znAzYTW3CtYCFIKKhWgsGT8L5BIVOxBFn8xWw5iEJbzZ5/5lc/oLcyY9Y9ys4MpQa8I86WuXRxz9CEF8UibGqPK0SGYWNHATNU+USvjNleRsnKmuPOtP4K/GXVixd+AiTB+NGBFQ8t1/H/zVI1US8CpQDJkt1SEVYovjir0Rqnk5m5glkB08MaS8ZrpJWtHU+gD7rEgbjjwiowIG/Uc2pCQAWRqjCyKgVn4Ue0raHIlpcOOpUd/UhaRveAD+nYulzSyJVDio4ItbUoKLoEdwnxa8SAhAUWADUQuboLb4CEEwTfJGDIb/YS+j6w3cBVnle7JTqIQDKxkcE1JqFC5sw/v/jfCYbFSFR4SPE5IvjcQjFJ047+SVPvgiSlWhBBh6prIqfVLV04RpGhsJJ9UNR0d6uI5g2LdnY3LkSlMa7k41IjRFxpIUAo87XjIJvQhbYntfuBf711cv+fk+BwRBERoRSOU5v4cK2WNz7DEJNVJouAXZyM85/XBrwj058wrVO1anpvu8vjPlm6t4AyuYizbrmh7ffdOxJU/E26NN4MQyvvlhZWulyMBrU7ZTCxyAlAN/3/o2/GdVQtfhFeT1nb410xCjVAahe8srSwE9MAbaHNQ1grTREvQi713CYD558vf8J/FbozOqD9z1ibwOVNrVjI/O78YRTP5LLZi/Ai8z/AXj7Aa78l/bYk76Pp/Hchv3DL409Wf3ii/Yv5Xw44/x/RtzikIene+sAAAAASUVORK5CYII="},1197:(e,i,s)=>{s.d(i,{A:()=>n});const n="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODVweCIgaGVpZ2h0PSI5NnB4IiB2aWV3Qm94PSIwIDAgODUgOTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ2LjIgKDQ0NDk2KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT45Ni1sb2dvLU9ubHlTeW1ib2w8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjY2LjU0ODI1MzUlIiB5MT0iLTQuNjkyMTExNTglIiB4Mj0iODAuMjcxODE2NCUiIHkyPSIxMTEuMTg2NDIxJSIgaWQ9ImxpbmVhckdyYWRpZW50LTEiPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjN0FEODUyIiBvZmZzZXQ9IjAlIj48L3N0b3A+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMzQUIzOEIiIG9mZnNldD0iNTMuNTg0Mjg1NyUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwQkZDOSIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9Ijc4LjA5MzczNTklIiB5MT0iMC43Mzc2MDQwNjUlIiB4Mj0iMjAuMzkzNjI1JSIgeTI9IjExOC42MjE4NjQlIiBpZD0ibGluZWFyR3JhZGllbnQtMiI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjI5NTMiIG9mZnNldD0iMCUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0VBMzMzMyIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJMb2dvLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MDUuMDAwMDAwLCAtMTM3ODAuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSJHcm91cC00IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4MC4wMDAwMDAsIDEzMTkxLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9Ijk2LWxvZ28tT25seVN5bWJvbCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTI1LjAwMDAwMCwgNTg5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJsb2dvLXN0LWNvcHktMiI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMy1Db3B5Ij4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjUuOTQ1OTUxNCwxLjgzMTgwNTk5IEMxOC4wNjc0NTY2LDUuMTgzODU2MjYgMC4wNjA4MjcwNzk1LDIyLjQ0MTA2MDQgMCwzNi4wMzk5NTQyIEMwLjEwNjA4MjIyMSw1MC4wOTgzNzkxIDE4LjA2NzQ1NjYsNjYuODk2NDk0IDI1Ljk0NTk1MTQsNzAuMjQ4NTQ0MiBDMjcuNzUyNDY1Niw3MS4wMTY2MjEyIDMwLjU1NTY2MjIsNzIuMDc5OTA4MyAzMy41MTYyNTI4LDcyLjA3OTkwODMgQzM2LjIxNjEzMjEsNzIuMDc5OTA4MyAzOC41MDIyMjI5LDcwLjc0NzYwNzIgNDAuODI4NDAxMyw2Ny45NDk3MzkgQzQ0LjczODE5MjIsNjMuMjQ2MjYyMiA0NC4yNjc3Mjc5LDU2LjQ4MzMzNjIgMzkuMDU3MDE4MSw1Mi42NDUxNjEzIEMzMi44MjE0ODg0LDQ4LjA1NDgxOSAyNy43MTgxNzMxLDQzLjkzNDYxODEgMjcuNjExNzc4MiwzNi4wMzk5NTQyIEMyNy43MTgxNzMxLDI4LjE0NTczMjEgMzIuODIxNDg4NCwyMi42MzU2NzgxIDM5LjA1NzAxODEsMTguMDQ0ODkzOSBDNDQuMjY3NzI3OSwxNC4yMDcxNjA5IDQ1LjI4MjU1NjEsOC4zODU2NDk4NCA0MS4zNzI3NjUyLDMuNjgyMTczMDkgQzM5LjA0NzAyNjUsMC44ODQzMDQ4OTIgMzYuMjE1NjkyNCwwIDMzLjUxNjI1MjgsMCBDMzAuNTU1MjIyNiwwIDI3Ljc1MjQ2NTYsMS4wNjMyODcxNCAyNS45NDU5NTE0LDEuODMxODA1OTkgWiIgaWQ9IkZpbGwtMSIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC0xKSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik00MC42OTY5Njk3LDY4LjEyOTAzMjMgQzQ0LjE1NDk3MjQsNjQuMTk1Nzg5NyA0NC41ODQyODE3LDU2LjM5MzE0MzQgMzkuMTU2NTUzMiw1Mi42NDUxNjEzIEMzMS41NDg1Mjg0LDQ3LjM5MTYzMDIgMjcuNjY0ODc2Myw0Mi4zODMzNDM2IDI3LjcxMDQyODYsMzUuOTY1MTYyMSBDMjcuNzYyMDg0LDI4LjY4NzA2MjIgMzIuMzkzNzk4MSwyNC4xMjk3NDk3IDMzLjU0ODEzMzUsMjIuNzA5Njc3NCBDMTYuMjcyNDI2Miw0Mi4xMDUxNTkyIDEzLjg3OTU1MzUsNjQuMDE5NDI2OSAzMC42MDQ2NDg4LDcxLjczOTUwMjUgQzM0LjQzMTQwNDQsNzMuMDcwMDI5NSAzNy43MDkxMTYsNzEuNTI3NTEyMiA0MC42OTY5Njk3LDY4LjEyOTAzMjMgWiIgaWQ9IkZpbGwtOSIgZmlsbD0iIzAwNTg5MiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zMi42MTg3OTg2LDYxLjE2NTkzMDUgQzM0LjgzODY0MjcsNTguNDM3ODY1NCAzNC42MjcyMjY2LDUzLjI2NTY3MjYgMzEuNjI5OTM3NCw1MC40MjY0NDM1IEMyNi44NjM5NjM1LDQ1LjkxMTggMjYuMDEzMDIzMiw0MS4wMDAzMzM2IDI2LjA0MjI2NTIsMzYuNTQ4NzM1MiBDMjYuMDc1NDI1MSwzMS41MDA3MDQyIDI5LjA0ODcyNjIsMjguMzM5Nzg5MyAyOS43ODk3NDQ5LDI3LjM1NDgzODcgQzE4LjY5OTcwOCw0MC44MDczODcyIDE1LjQwMzUxODksNTguMzE1NTQxNiAyNi4xNDAwOTM2LDYzLjY3MDEyMzMgQzI4LjU5NjY1NjUsNjQuNTkyOTY2IDMwLjcwMDc2MzgsNjMuNTIzMDg4NiAzMi42MTg3OTg2LDYxLjE2NTkzMDUgWiIgaWQ9IkZpbGwtOSIgZmlsbD0iIzAwNDE4RSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNy45MTQ3NTI4LDU1Ljg5Nzc0NDcgQzI5LjMzMTMxMiw1NC4xNTY4NzIyIDI5LjE5NjQwMDEsNTAuODU2MzE3NCAyNy4yODM3MjY0LDQ5LjA0NDUwNzMgQzI0LjI0MjM5MzksNDYuMTYzNTU3NSAyMy42OTkzNzk1LDQzLjAyOTM4MTMgMjMuNzE4MDM5OSw0MC4xODg2NjI2IEMyMy43MzkyMDAzLDM2Ljk2NzMzOTggMjQuNzYwNDYxNCwzNC4xODY5NDkyIDIzLjA4MTczNzEsMzcuOTA4MDIyNyBDMjEuNDAzMDEyOCw0MS42MjkwOTYxIDE2LjkyOTA4ODcsNTQuMDc4ODEzMiAyMy43ODA0Njc2LDU3LjQ5NTc1NjYgQzI1LjM0ODA4NTEsNTguMDg0NjU0MyAyNi42OTA3ODg2LDU3LjQwMTkyODYgMjcuOTE0NzUyOCw1NS44OTc3NDQ3IFoiIGlkPSJGaWxsLTkiIGZpbGw9IiMwMDIzNTUiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC00LUNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQxLjIxMjEyMSwgMjMuNzQxOTM1KSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTUiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTAuMjIwMTg1OCw3Mi4yMTc5NTYgQzcuNTMzNTY4MjcsNzIuMjE3OTU2IDQuNzE1NjgyODEsNzEuMzM0MTQzMiAyLjQwMDk5MTE4LDY4LjUzNzgzMTkgQy0xLjQ5MDIyODYxLDYzLjgzNjk3MjMgLTAuNDczNDkxNjQ2LDU4LjAxOTQ5MjMgNC43MTI0Njc3NSw1NC4xODM4OTQ4IEMxMC45MTgzNzkyLDQ5LjU5NTY2NTEgMTUuOTkwNzI1MSw0NC4wODc4ODU1IDE2LjA5NjYxNDYsMzYuMTk4MDU2MSBDMTUuOTkwNzI1MSwyOC4zMDc3ODUxIDEwLjkxMTk1MTMsMjMuMDY3NzEzNSA0LjcxMjQ2Nzc1LDE4LjQ1NjE5MTYgQzAuMTM1NDgwMTk1LDE1LjA1MTU3MjcgLTEuNDkwMjI4NjEsOC41NTg2OTgyMiAyLjQwMDk5MTE4LDMuODU3ODM4NyBDNC43MTYxMjAzNywxLjA2MTUyNzM1IDcuNTMzMTMwNzEsMC4xNzgxNTYyMTQgMTAuMjIwMTg1OCwwLjE3ODE1NjIxNCBDMTMuMTY2NzEzOCwwLjE3ODE1NjIxNCAxNS45NTY1OTU1LDEuMjQwODUxNyAxNy43NTQ1Mjg5LDIuMDA4NTAxMjIgQzI1LjU5NTYwMTUsNS4zNTg2ODYyNiA0My40MzY2Mjk4LDIyLjEwNTY4IDQzLjU3NDc5MjQsMzYuMTk4MDU2MSBDNDMuNTMwNjA3LDQ5LjQ4MDg2MjYgMjUuNTk1NjAxNSw2Ny4wMzY5ODQzIDE3Ljc1NDUyODksNzAuMzg3MTY5MyBDMTUuOTU2NTk1NSw3MS4xNTUyNjA1IDEzLjE2NzE1MTQsNzIuMjE3OTU2IDEwLjIyMDE4NTgsNzIuMjE3OTU2IFoiIGlkPSJGaWxsLTEtQ29weS02IiBmaWxsPSJ1cmwoI2xpbmVhckdyYWRpZW50LTIpIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMi41NTc0NTc2LDQ1LjY5MDc1MzYgQzI2LjAzMzA5NjYsNDEuNzU3NTExMSAyNS40NDM2MjA2LDM0LjY5ODUyMTMgMTkuOTg4MjEsMzAuOTUwNTM5MyBDMTIuMzQxMzgzNCwyNS42OTcwMDgxIDguNjk1Njc1NDYsMTkuNjczNjY2MiA4Ljc0MTQ2MDAzLDEzLjI1NTQ4NDcgQzguNzkzMzc4ODksNS45NzczODQ3NyAxMy40NDg3MTUzLDEuNDIwMDcyMzMgMTQuNjA4OTM4LC03LjEwNTQyNzM2ZS0xNSBDLTMuNDM2MTQ1NzgsMTMuMjU1NDg0NyAtNS4xNTk5NTQyMSw0MS4zMDk3NDk1IDExLjY1MDQ0MTEsNDkuMDI5ODI1MSBDMTUuNDk2NzEzNyw1MC4zNjAzNTIgMTkuNTU0MzY1NSw0OS4wODkyMzM2IDIyLjU1NzQ1NzYsNDUuNjkwNzUzNiBaIiBpZD0iRmlsbC05IiBmaWxsPSIjNDcwMDAwIiBvcGFjaXR5PSIwLjYwMDAwMDAyNCIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOiBtdWx0aXBseTsiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjM2MzYzNiwgMjQuNzc0MTk0KSByb3RhdGUoLTE4MC4wMDAwMDApIHRyYW5zbGF0ZSgtMTIuMzYzNjM2LCAtMjQuNzc0MTk0KSAiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIzLjI4NTEwNzMsNDAuNjk1Nzg2NyBDMjUuNTA0OTUxNCwzNy45Njc3MjE3IDI1LjI5MzUzNTMsMzIuNzk1NTI4OCAyMi4yOTYyNDYxLDI5Ljk1NjI5OTcgQzE3LjUzMDI3MjIsMjUuNDQxNjU2MiAxNi42NzkzMzE4LDIwLjUzMDE4OTkgMTYuNzA4NTczOCwxNi4wNzg1OTE0IEMxNi43NDE3MzM3LDExLjAzMDU2MDQgMTcuNzUxNzE5Niw4LjcyNjg4NjExIDE4LjQ5MjczODMsNy43NDE5MzU0OCBDOS40NjY1MDI0NywxOC4zNTAyNjI4IDYuNTE2MTE2NiwzOC4wNzY5NTg2IDE2LjgwNjQwMjMsNDMuMTk5OTc5NSBDMTkuMjYyOTY1Miw0NC4xMjI4MjIyIDIxLjM2NzA3MjUsNDMuMDUyOTQ0OCAyMy4yODUxMDczLDQwLjY5NTc4NjcgWiIgaWQ9IkZpbGwtOS1Db3B5IiBmaWxsPSIjNjcwMDEwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNy41MzgwNDQsIDI1LjYzNTg5Nikgcm90YXRlKC0xODAuMDAwMDAwKSB0cmFuc2xhdGUoLTE3LjUzODA0NCwgLTI1LjYzNTg5NikgIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMy44ODkwNDU5LDMzLjk3MzI2MDggQzI1LjMwNTYwNSwzMi4yMzIzODgzIDI1LjE3MDY5MzEsMjguOTMxODMzNSAyMy4yNTgwMTk0LDI3LjEyMDAyMzQgQzIwLjIxNjY4NjksMjQuMjM5MDczNiAxOS4xOTg1MTcyLDIwLjU4MjE5NSAxOS4wODQ0MjE4LDE4LjU1NDczMzMgQzE4Ljk0MzY5NTYsMTYuMDU0MDQ2OCAxOC45NjAyNjU4LDE1LjY5OTAyMjcgMTkuMzk4NjY0MiwxMy45MzU0ODM5IEMxOC4wNjA1NzgzLDE2LjM0NDg4OTIgMTIuMjAwOTQzMSwzMi45NzE0MzY2IDE5Ljc1NDc2MDYsMzUuNTcxMjcyNyBDMjEuMzIyMzc4MiwzNi4xNjAxNzA1IDIyLjY2NTA4MTcsMzUuNDc3NDQ0OCAyMy44ODkwNDU5LDMzLjk3MzI2MDggWiIgaWQ9IkZpbGwtOS1Db3B5LTIiIGZpbGw9IiM3MzAwMDAiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTogbXVsdGlwbHk7IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMC40MDQxMjgsIDI0Ljg1ODYzMSkgcm90YXRlKC0xODAuMDAwMDAwKSB0cmFuc2xhdGUoLTIwLjQwNDEyOCwgLTI0Ljg1ODYzMSkgIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4="},8453:(e,i,s)=>{s.d(i,{R:()=>I,x:()=>g});var n=s(6540);const t={},M=n.createContext(t);function I(e){const i=n.useContext(M);return n.useMemo((function(){return"function"==typeof e?e(i):{...i,...e}}),[i,e])}function g(e){let i;return i=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:I(e.components),n.createElement(M.Provider,{value:i},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[6827],{5895:(e,i,s)=>{s.r(i),s.d(i,{assets:()=>l,contentTitle:()=>g,default:()=>j,frontMatter:()=>I,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"style-guide","title":"Style Guide","description":"You can write content using GitHub-flavored Markdown syntax.","source":"@site/docs/style-guide.md","sourceDirName":".","slug":"/style-guide","permalink":"/docs/style-guide","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/style-guide.md","tags":[],"version":"current","frontMatter":{"id":"style-guide","title":"Style Guide","sidebar_label":"Style Guide"}}');var t=s(4848),M=s(8453);const I={id:"style-guide",title:"Style Guide",sidebar_label:"Style Guide"},g=void 0,l={},c=[{value:"Markdown Syntax",id:"markdown-syntax",level:2},{value:"Headers",id:"headers",level:2},{value:"H2 - Create the best documentation",id:"h2---create-the-best-documentation",level:2},{value:"H3 - Create the best documentation",id:"h3---create-the-best-documentation",level:3},{value:"H4 - Create the best documentation",id:"h4---create-the-best-documentation",level:4},{value:"H5 - Create the best documentation",id:"h5---create-the-best-documentation",level:5},{value:"H6 - Create the best documentation",id:"h6---create-the-best-documentation",level:6},{value:"Emphasis",id:"emphasis",level:2},{value:"Lists",id:"lists",level:2},{value:"Links",id:"links",level:2},{value:"Images",id:"images",level:2},{value:"Code",id:"code",level:2},{value:"Tables",id:"tables",level:2},{value:"Blockquotes",id:"blockquotes",level:2},{value:"Inline HTML",id:"inline-html",level:2},{value:"Line Breaks",id:"line-breaks",level:2},{value:"Admonitions",id:"admonitions",level:2}];function A(e){const i={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",del:"del",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",hr:"hr",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,M.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(i.p,{children:["You can write content using ",(0,t.jsx)(i.a,{href:"https://github.github.com/gfm/",children:"GitHub-flavored Markdown syntax"}),"."]}),"\n",(0,t.jsx)(i.h2,{id:"markdown-syntax",children:"Markdown Syntax"}),"\n",(0,t.jsx)(i.p,{children:"To serve as an example page when styling markdown based Docusaurus sites."}),"\n",(0,t.jsx)(i.h2,{id:"headers",children:"Headers"}),"\n",(0,t.jsx)(i.h1,{id:"h1---create-the-best-documentation",children:"H1 - Create the best documentation"}),"\n",(0,t.jsx)(i.h2,{id:"h2---create-the-best-documentation",children:"H2 - Create the best documentation"}),"\n",(0,t.jsx)(i.h3,{id:"h3---create-the-best-documentation",children:"H3 - Create the best documentation"}),"\n",(0,t.jsx)(i.h4,{id:"h4---create-the-best-documentation",children:"H4 - Create the best documentation"}),"\n",(0,t.jsx)(i.h5,{id:"h5---create-the-best-documentation",children:"H5 - Create the best documentation"}),"\n",(0,t.jsx)(i.h6,{id:"h6---create-the-best-documentation",children:"H6 - Create the best documentation"}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"emphasis",children:"Emphasis"}),"\n",(0,t.jsxs)(i.p,{children:["Emphasis, aka italics, with ",(0,t.jsx)(i.em,{children:"asterisks"})," or ",(0,t.jsx)(i.em,{children:"underscores"}),"."]}),"\n",(0,t.jsxs)(i.p,{children:["Strong emphasis, aka bold, with ",(0,t.jsx)(i.strong,{children:"asterisks"})," or ",(0,t.jsx)(i.strong,{children:"underscores"}),"."]}),"\n",(0,t.jsxs)(i.p,{children:["Combined emphasis with ",(0,t.jsxs)(i.strong,{children:["asterisks and ",(0,t.jsx)(i.em,{children:"underscores"})]}),"."]}),"\n",(0,t.jsxs)(i.p,{children:["Strikethrough uses two tildes. ",(0,t.jsx)(i.del,{children:"Scratch this."})]}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"lists",children:"Lists"}),"\n",(0,t.jsxs)(i.ol,{children:["\n",(0,t.jsx)(i.li,{children:"First ordered list item"}),"\n",(0,t.jsxs)(i.li,{children:["Another item","\n",(0,t.jsxs)(i.ul,{children:["\n",(0,t.jsx)(i.li,{children:"Unordered sub-list."}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(i.li,{children:["Actual numbers don't matter, just that it's a number","\n",(0,t.jsxs)(i.ol,{children:["\n",(0,t.jsx)(i.li,{children:"Ordered sub-list"}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(i.li,{children:"And another item."}),"\n"]}),"\n",(0,t.jsxs)(i.ul,{children:["\n",(0,t.jsx)(i.li,{children:"Unordered list can use asterisks"}),"\n"]}),"\n",(0,t.jsxs)(i.ul,{children:["\n",(0,t.jsx)(i.li,{children:"Or minuses"}),"\n"]}),"\n",(0,t.jsxs)(i.ul,{children:["\n",(0,t.jsx)(i.li,{children:"Or pluses"}),"\n"]}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"links",children:"Links"}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.a,{href:"https://www.google.com/",children:"I'm an inline-style link"})}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.a,{href:"https://www.google.com/",title:"Google's Homepage",children:"I'm an inline-style link with title"})}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.a,{href:"https://www.mozilla.org/",children:"I'm a reference-style link"})}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.a,{href:"http://slashdot.org/",children:"You can use numbers for reference-style link definitions"})}),"\n",(0,t.jsxs)(i.p,{children:["Or leave it empty and use the ",(0,t.jsx)(i.a,{href:"http://www.reddit.com/",children:"link text itself"}),"."]}),"\n",(0,t.jsxs)(i.p,{children:["URLs will automatically get turned into links. ",(0,t.jsx)(i.a,{href:"http://www.example.com/",children:"http://www.example.com/"})," and sometimes example.com (but not on GitHub, for example)."]}),"\n",(0,t.jsx)(i.p,{children:"Some text to show that the reference links can follow later."}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"images",children:"Images"}),"\n",(0,t.jsx)(i.p,{children:"Here's our logo (hover to see the title text):"}),"\n",(0,t.jsxs)(i.p,{children:["Inline-style: ",(0,t.jsx)(i.img,{alt:"alt text",src:s(9795).A+"",title:"Logo Title Text 1",width:"85",height:"96"})]}),"\n",(0,t.jsxs)(i.p,{children:["Reference-style: ",(0,t.jsx)(i.img,{src:"/img/branding/logo/PNG/96-logo-OnlySymbol.png",alt:"alt text",title:"Logo Title Text 2"})]}),"\n",(0,t.jsx)(i.p,{children:"Images from any folder can be used by providing path to file. Path should be relative to markdown file."}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.img,{alt:"img",src:s(1197).A+"",width:"85",height:"96"})}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"code",children:"Code"}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-javascript",children:"var s = 'JavaScript syntax highlighting';\nalert(s);\n"})}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-python",children:'s = "Python syntax highlighting"\nprint(s)\n'})}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{children:"No language indicated, so no syntax highlighting.\nBut let's throw in a <b>tag</b>.\n"})}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-js",metastring:"{2}",children:"function highlightMe() {\n console.log('This line can be highlighted!');\n}\n"})}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"tables",children:"Tables"}),"\n",(0,t.jsx)(i.p,{children:"Colons can be used to align columns."}),"\n",(0,t.jsxs)(i.table,{children:[(0,t.jsx)(i.thead,{children:(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.th,{children:"Tables"}),(0,t.jsx)(i.th,{style:{textAlign:"center"},children:"Are"}),(0,t.jsx)(i.th,{style:{textAlign:"right"},children:"Cool"})]})}),(0,t.jsxs)(i.tbody,{children:[(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:"col 3 is"}),(0,t.jsx)(i.td,{style:{textAlign:"center"},children:"right-aligned"}),(0,t.jsx)(i.td,{style:{textAlign:"right"},children:"$1600"})]}),(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:"col 2 is"}),(0,t.jsx)(i.td,{style:{textAlign:"center"},children:"centered"}),(0,t.jsx)(i.td,{style:{textAlign:"right"},children:"$12"})]}),(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:"zebra stripes"}),(0,t.jsx)(i.td,{style:{textAlign:"center"},children:"are neat"}),(0,t.jsx)(i.td,{style:{textAlign:"right"},children:"$1"})]})]})]}),"\n",(0,t.jsx)(i.p,{children:"There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown."}),"\n",(0,t.jsxs)(i.table,{children:[(0,t.jsx)(i.thead,{children:(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.th,{children:"Markdown"}),(0,t.jsx)(i.th,{children:"Less"}),(0,t.jsx)(i.th,{children:"Pretty"})]})}),(0,t.jsxs)(i.tbody,{children:[(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:(0,t.jsx)(i.em,{children:"Still"})}),(0,t.jsx)(i.td,{children:(0,t.jsx)(i.code,{children:"renders"})}),(0,t.jsx)(i.td,{children:(0,t.jsx)(i.strong,{children:"nicely"})})]}),(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:"1"}),(0,t.jsx)(i.td,{children:"2"}),(0,t.jsx)(i.td,{children:"3"})]})]})]}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"blockquotes",children:"Blockquotes"}),"\n",(0,t.jsxs)(i.blockquote,{children:["\n",(0,t.jsx)(i.p,{children:"Blockquotes are very handy in email to emulate reply text. This line is part of the same quote."}),"\n"]}),"\n",(0,t.jsx)(i.p,{children:"Quote break."}),"\n",(0,t.jsxs)(i.blockquote,{children:["\n",(0,t.jsxs)(i.p,{children:["This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can ",(0,t.jsx)(i.em,{children:"put"})," ",(0,t.jsx)(i.strong,{children:"Markdown"})," into a blockquote."]}),"\n"]}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"inline-html",children:"Inline HTML"}),"\n",(0,t.jsxs)("dl",{children:[(0,t.jsx)("dt",{children:"Definition list"}),(0,t.jsx)("dd",{children:"Is something people use sometimes."}),(0,t.jsx)("dt",{children:"Markdown in HTML"}),(0,t.jsxs)("dd",{children:["Does ",(0,t.jsx)(i.em,{children:"not"})," work ",(0,t.jsx)(i.strong,{children:"very"})," well. Use HTML ",(0,t.jsx)("em",{children:"tags"}),"."]})]}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"line-breaks",children:"Line Breaks"}),"\n",(0,t.jsx)(i.p,{children:"Here's a line for us to start with."}),"\n",(0,t.jsxs)(i.p,{children:["This line is separated from the one above by two newlines, so it will be a ",(0,t.jsx)(i.em,{children:"separate paragraph"}),"."]}),"\n",(0,t.jsxs)(i.p,{children:["This line is also a separate paragraph, but... This line is only separated by a single newline, so it's a separate line in the ",(0,t.jsx)(i.em,{children:"same paragraph"}),"."]}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"admonitions",children:"Admonitions"}),"\n",(0,t.jsx)(i.admonition,{type:"note",children:(0,t.jsx)(i.p,{children:"This is a note"})}),"\n",(0,t.jsx)(i.admonition,{type:"tip",children:(0,t.jsx)(i.p,{children:"This is a tip"})}),"\n",(0,t.jsx)(i.admonition,{type:"important",children:(0,t.jsx)(i.p,{children:"This is important"})}),"\n",(0,t.jsx)(i.admonition,{type:"caution",children:(0,t.jsx)(i.p,{children:"This is a caution"})}),"\n",(0,t.jsx)(i.admonition,{type:"warning",children:(0,t.jsx)(i.p,{children:"This is a warning"})})]})}function j(e={}){const{wrapper:i}={...(0,M.R)(),...e.components};return i?(0,t.jsx)(i,{...e,children:(0,t.jsx)(A,{...e})}):A(e)}},9795:(e,i,s)=>{s.d(i,{A:()=>n});const n="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFUAAABgCAYAAABsQj5EAAAAAXNSR0IArs4c6QAAHzBJREFUeAHVnQt0XFW5x/c5M5m8Ju+GtrxKaYECBWl5sxCLXCgoUgoWQQTrgvaKgogo4INlrniXaC9cBBWQK3aJCK6CoiIIKBREoNK3tIC00NLS0meezSSTmTn3//++vc+cSZM0CSkr2c3Mfn379Tv/vc8+j6Se+ZDdt9dcfEA6HZxrjHcKmj7GM2Z0LvCqTRA0er7ZGBjzTDwWe/TWwx589UPu2pA1hzHtfXf7hutK32/d8tlskLvSBOakwhY98ARKzzOuMxr1flcUS1x/6+Hz1xXaD/+YG8de6em9wdyif69quxrQbkQDowmOAD34gIsffMERp4QkTfi69EaYTr9t8shS7V6Dev3qz56Wy3n3BLngcEIUNQpBAiVC+GxduWpcIgTsEqV7LbF4fPrtR8x/hcVHgpNeD2VHG1Y1JJpza74PYtfngpyvdXdrxipy93Yd5by9xb++pLjoqB9Nur919zLDL8UOemg6dv3qK8Y1Zt9+KZsz38DHDwIq1MfHM1CtwQlJw/CNQTo/TIPv8qJhphmUhz8u1ZH9wdD0cu/XkpfEB2zrKys+fwam7W9BqC46rfMT2U1rNqn6C9dX27asCgw7EwS4FHDNRVIqGSvd79aj72605sPWGxKlXrPy85dCTU/mcqYuRxBQGFXGj1NillNeVGeQHlGoVXBoL+qNKJe2qDMbeKXNuc5Zw5ZkpGPxSHhQwS8vn/01TPX/8QLP49SlCHP4yBkeNcoJCnAZZ7rKULUaShL5zomN7KkIk+VhxQDKezlvirMbzv6goQKW9+UVV8zL5YLrOUABINNUASFdQBgCw0+QUxu3E1ArTm86jUlQvqhk6lOhEih2ETALxuVthm9oUFAbggb/S8uunI9xXkYgCkoHqZAYJkk7cPgMcmVUJTLCpYGpULfQU1tXxOPJy5YSM61vl1oN7+9BQd28dOPd0JEA5fBURYRUwEdGTpACjxBpSwXiejQExXyQdgombGaqTklboprseeskYZh/DRjq3CVzfggGc62IZHg8GUmcMadAgcNk/vN1XUS2wAJdAhbgLAPH5UFUS4+qtE7hIx9txIz3lEsfzv6AoF65eO5NOMPfoEA4UAxNIoSgqVQdweHEBZ8hTm9Oe+bTabrzmSzKlRzUInDFUL+Er9S3Zr/j91kYyRm2wX5DnbP4qi9mc7kfuGmq09OCEoAcI7Vnp7kMmWdw2BAUprwcBVEyrXgYrCJhwppsbVKSdYljHj5ezLu5wWvI2Mxh7dme993HOUuunp7NZp8AIN3nuCkuxbpXwbjiceJ0B0IXRgCCCfNolS/tlJ1XcmjhmQd+deJPL++7l8Mnd49Knbv42gPT2cyDmJY+pymdnpg07IYiamIePjLlbQbjApfrrnVYQgQsLZlP53YCGne2WIu94AV/n1Fz1WpkfMf66iZvjmzvbP0LThITdVoDAuFQagQioPK+THGbLjAFmtrqtT6hM07BaznnuzpdvWLneQ9XjzIX/nzCjzr76udwy+tTqW+37bgDl5bHU06hoojTqo7qEhXKfFZFyslJ4g4+r7BY2sF1YbVnxW45CBvx0UJgbnngpDsasHS4pocbu177w5H26C5/5drP4dbdA+QRDlosWSQPJlo4HL0LuILisxT1B4XaQhourAum7VDy7N+ccvuCaN0jKdwj1Nkvf/UgnGZfA9Ry5WfN3PjhOzCFg4WdOwo2w4lUDoWUVxtXFRVM2PR9z2yM+cGMX598x9LCekdWrMfp35kLfo5BlnPN1DM3BmXpFMDhWC1EuVICGMrahbWIQpTLU5iLOsFQ6g2Ls1bv1eIi/7z5J8x7H5ER7TiaAnfJy9d9Psia+U5J9Asdi2iuwOPUtk4guoj4qkKCpNutTpdgzBJTGj9jwXE/bBbDEf6VJ4KBfGlVQ3JHY8saBEcXAsrDIUgRJL7IRL/goyabRRmKWiUxRElj2mBdlQPBpjHxc/4qP1F22oJTGnaKwSC+zjKmvMyY+iPK66tf27Vt81RjtjXoJccgavvgRQqm//amXTcGOW+0CEhw5+EQhE5h0pOfwtbtjkBshK7d08oxQBkWk6PAgB6kwMQb0zFz3p8HAfQaY4o/UnfIN9qy6QsyQe6QuBcDV+N/vLo8h7U5taCo/K0TK8b++YDiqoe81Y+uKuzs3o1hhOoueeVbo9PprreRwM6p0qgoAURffihCC4ecFE6oSEITFUaKEWqkjIvgTn+wq6l41l9nfu9R7UH/v39Rf9hFrZmO27Hm79e9FJoK5wauVszU8npzQsWYVUWxovtMeckvvUUPtnQvM9Tx8LIo3Zm5Bp0so9LkMQg36KIofbTBNG7ao49C3CMSbpQkXfIZJmz7SCQsww2/1knbTe+UPT4YoD+uPui7zV2pB3GsAZRHkc75DGmY31kYLW7ban67/d9HNqVTd5i29nXB5Au+FUybXSLF9tKXQL1sxbxyPA25ikD1OZKCETi83MdzJIUE4LjEFDhII2QBasPOXn2tiweGZfjsiul8qrppXXnzju3V8sRgIOP6cfW4m3Hj+mbMEF222AULUXyJR2tUxNu7OszD2980mzvbanCJ/d/B1ubXgskzz4xaDmVYoLY27bw4m/Vq5XGyVZOEAZRqdA/zXL7AISDkK0AFp8rGAeCBEIUqSKdQprc0Fpn31hb//e0brn1rIAO5uXLM8RmTuwnHBrdVu5V0cV20kUmd8hNmmI5c1vxuxxqzJc2HB8EEwH0qOPLCnwQnzypFwpA6gQolXkLFcfB4iKeKEmhoHiB02ltAkh5Vrg2LagGZquaBgO+AO8BdGc8se746G6ss+epAR5H04j/zPb9MuDleUZ8VOobO7wa3C4X/sHOtac2mmePlguyXg5auRcExFx4y0P70Ze/Peq5hDMCdLhDc1BZACkunL0FFVadroypS00OI9uAQpBwM+G7JeP2lJM9T72644Str++pU97wvJpKT455/NBmKAi00jVtrpvUGOYQbmFQuY55sXIfx0BjLQ2COCtLZxVgO8Cbi0Di/3WSnYYr7hCCQCI9qo9Kc2ggG6cxXQBakS4NPmeRtGKZa0W3WhfIbViXM+lWlpjSZ/dNAuz6xvPYyHIyEsESAK6Xud7UmXTmlC3mwNEb7uzIZs6Oj0zSn06aLHUL6ZiwBy3dt1cKIY52uRH2PBUfOnKOJH+wbJL1T8ipUME5heiJSoALMqtDBdvkCOwI4PEA8GCiTTvvmjWfLjYnhpQjfv3+gXcY9iENZRuGpPvUyV/CG1RG0A9zRlTXr2trMhrZdZltHh9ncnjJvt7Sare0dhGgWtW0R1apiUXcQxPCq58+zk89vCCscZMDHwTsuuvYpIBw9Kg2geHDpC2iJq/J0WbA2sBWVC3Q9MFKWoKHUFX8qM11Z38QTQXbrLdevGGhfcWaq7V7GwZN0dE/i8Ak71ZUx6wGzI5stKMbDsbOz07zbyryMWRJRqx4qGATBd7NHzrwvmDWrz3vNBRV3i/i4TByryoKKBKAFxDM4ociyoKBCcDZdoRcCl6XDlmHZtqaY2f4mdkBFnokXBx3d2u9XFNcJe37bz1JJ4yy/oa09VGxPDRA2FbyqbbvJYI1VpxVwqQ2C7JXZ1ekFwbSGgivOnurqKc3HU5L6EB5h4ENYbknQsFsCFLhToU5/C1zK6kFw6qbdysdxgcb+YurH48GgXobwTWx9T50vSOOxhWvsSMv01ljv3ymA3ZhqN2s6mzFWe0RYh60HoZm57cvmIy+f0nt1BTmA6mEJcEqELycWp1BVK+EIQJ6odgOuZcILB6hd1A3I777cado22vZQhbxuVdB8/yLvpVv/yOJ7ss6gE02d6T2Zhfk8gS1v3S5XzgoTiwgBc7hcnwNzaW7yjJ+GBfoZINCtAR7oKSy7DbKQBRQVCJBZBx4tOsjh5l/eOLF1hEr3zdrHt6Mb7KG6bMbD2Wrgbseunc+ngyx/yaJPl8pk90h+l8mYZtNlnOWq1kbsChiLqJWtSLcl9arskTMG9G4s7jl4W0SdVoUC14KUpYAwpQW7xspa6w6CVaVVN8u6g7N5ZafJtaXyEKDgrpQ3qKuX+QbnlcDcIwKyNfYEWLZM+RYLQl0YxWrTZlbis9rsMktNi9lsOkXZm+Qqi+JkrVatDIlaCTa4CWD5ewv9cjz7L5c1NQTC9VShKWAXV4DuiktsqEqnaqdkQsdBWPtn3B71IydQdDDbZWK1X7uz22+n9KufZnPze7d1Bbl/0ZpDz+s/X76nNLUPzOsA2QyVOpdBLetMymzAZ0XrDk12FcB3ywB3E+qCH2Qmf6pfFwiAGn/FXaLSV7WxUsKJwLWgdb2EHddOC9CtoW7ble4ITNf76Kh9T0A6xZsIcF4sGNQG+y5jOrenWmdiE7eNwxT9yLcLY4Phy1W3tBP92obpvgsTvie30XSY19oINap9hC1L1w72tkz5VXD0rPE91RNN82Oe94KA5HZKprGDaeME14OK5UAwPapUKe+Ztx7HA1HI0mCtCh2idG2N5gINDfx7XmfzWly/n4mBbnKlOVJ9XBOY4njPUJsAtTeHYZvXuQMQA4Up4QhUBxyTrSaT7Xx0T7cO/Wc/ccNavM2zFFsrVBxRJuOAFsKTsE0LVczmInZW6Tv/ZV/Lx42L0HWx+5Bbm1ddc+OPLw7TBxi4qem9FZXpzqllsbhcRDglsZo4bvmXxSNLjq2bm6y+3JYs3tUARMLktCdPt77mp7+rIZiS3b7zJy7Wky+HNoc3Qdy66lQp6nWg0UwIXML2hIS7cLJzYBp3ELBPtSKtpUnbIlQqlo4etxNwqUbvLtOAIzNIN2fX1i1btr8zdb+Sst+gEq3U1jWqtHi3WovRr75cu4UeLp8RlSpcNqL/WA8um6/IHDXjC73VKa35sfivcYZPi1q5PWIn6KMVPVkxrB9nk/ctUCoZ9hv+gaOeibylg6kVOqy1dB0tZlRV2119Hu2wTC+BBozt4s1vXjqpvOarRZ4fzu8SKLWupBBslen7woh3AyBNjFW0ao8SwqSMH6aGwBGjeoNc7s7g2FkH9tQ9gfr3s6/bbHz/Qbdf5RYqC7Ci1hCmBYwKmU/bLHwHPUc7lGl+s9sVZcvmfLvt+WnYstn7Yvm1d03PZw4udM7GlXeOL684N+H54bOnurKEqS4uCiusNwlTjlnVm2OvcDOlAJzaAidBW7DqQ7EKP5npTN3dU53hvMjGErcBDGa/VaWAw1QmXIbph4BdmsJlOm2o3kwjTlJRl27DfHfLATJ2KdgAv8PT2RL8seqWeydEzQcT/tSG156eVFI9rdiPKVhw2Ke0xFQkFCxPZIfgeWZvWKnjGHYOAosAAY3qFGfjAjeSjolJu09kJp/7GWfq/BDqq2dfzce4DzlADqZTpYJ1alVVhnlsAWA7dsHv6AaVLTXinrRbWwk1o13OpEyifV16RdXX7xvvOjRY/8xNK5btX1p2VtzzcBThMLIxZcWmOKYoS4H0MOgVPdzNcc0lRpnWxMnh4KOKhDkL2Y8uA1atnLWed2twzjUF600IlS0VlcS+BaNObCZDVcqSQJWyYadUQIQdGlIly1KAtKb1qCQXOeOzUroM0ra9gV5ii0WezQBrpdC1KyhPNXWsqm245wix/QBf529cvWh8SfJz2ARgb6+QxiTzD06rTJEZZ3a/qCvHuOgi+tQwhijdtAoVBSNcAD3IHZTZ8PbV0W4XQH3pjKvXY0P/vzqVOeU5pfVDJRKsU2dUyS4txZ3Ubi/t2+a4DOAxhjgqtYmAlWy6LShtWd+1vO6/7sbm/oO58zat/kN9PHG71AIoCRCuKU6ElY7B+lqGcUTd6BjziVT7E82TPlI/TOQXxOQsqSst4X0zOPZT8r4EzQprR0JJTf33oLw1hOaU6QAyXqBYC1zsYJ9uQRO81OrN4Rm86bC7gTRsW/K2mVRQtPOtzKO1DT+b11vx/qZfunXtTVXxxEoOmQOvLS1SKKiA6+uB3dR6cHFS4JCZAiMq+2GixBhnIO/rQZASdV3p4Atq0APUl0+5KIXH6nN40hJlYlorTCgW9UmY0x+dCzj9uSTYA4DH69iB51XhGinw2+11NhO5xWrLgw0ygbfzjczXk9/42TIz76lB3dFiteAQlBt/NsYvW60Y1OpOWsyvwTJQEtHTUWU1SAUcFORBcE7whXHG8HFx5zMVDQVB7rqgoUFEuptSWeHyc+YsxHopy4ADGgXoTma6NOiSwLAc3PjuaxbrDB2XgajjicveF3DJbRsyxyTWvvV+5c2/PN6lDdS/ZNuaZVVFxfjlDw7amGSi8NxfC7B0ZHNa7RilKXBYgkNRlQswGZgkh3nMpxNfAU/IPLb4NKb1CJUZdSUTbgTQFxUqwWFmw5wnKK61DrJbTwUqb2gk9iAwe1JgG6Fr1w6GcQTSTblk27ttL1V8+54Z0fSBhCs88x3YS9dKu12+uguCfbwiU50oFbV1V2G+VwhZzQjsSCf0vgMTkJMN5PK7V6gLTz89U+IVX4QT1/syxeVMT6AEa9UZWRoI2ePGIlmPQ5XfeEfa12BP0DvzS0DUPtcZxNvWd/2u8pv3nhhN72/44i1rXyvxY3K70McSkIjcxSq1evpISaUAlZMOJU141qfERYloMExDioOvuc6Gy2NwIex6kk2+y0vOvmxzEPM/gzN/hofbwRSlolOqYq6vCjmWxDHiPdSq/fKVREPsecXYaIqGIzezumdinfU7mrJPDvZeQaWfeMrVWRxRa5GFOqPugFCFtKM6o4AZloQI7DxgzdJyLBmMMlPPP7xXpdKQ7vXps1+AOm8StRJkBGaYxpMVPkWVAJpAlQSX3EcrcN/sXe1EnMjy+0aXJX7PYpWsdGOmpsLc9/0C+35GWkz7YzJc2McJyDr8hpapwliOqxmtKhQF0gDKE6VyVtqw+HmAolSrYrFFPstxiF3ZzMl7hMo+vHH25behyP2hWiPTXrZYVDHSYmWAWmx7XjsB7zYfhnecsRxU4EQw5iiER7G6nl1kwD0ZdDVl5/SUvqe0fba+908MOEW76G08AjuupEqKh1dSAoeGkhx+EZyoF/kMK3QLmbbWnnVih3RMv6Cy9kunXzYHU3sBpz6XAVlbEeadKafeRB3W0hK0gPVLXGktznhQZ814XK71cQLD42vXMS24+3fH1kxd1eMPcu8zIHcR9ha4ES9bDq6rznWh13P3PRRRouCorDIRVmenDovg42yknzJmpFDRcA6yRrOj+w21wfNyVXWHXQqIT4ZAZSmIyd0qmf712GRTqcl856XVPX2V9cMeU8HfGHxyT1X1lI9fdcOtMwdLLY5IVpqDklVhqkCjHCOOaa4cwxpnktYVKhzFmGKL1/cbKttactxxXaMrii6EYl/gUkCQoc+dM86uJWOw+S9FtW4ZYMG+HNVD+364IJWltAbs0C2h5ZTFyIVjD7LIgENyyUrV6fC55YLxECBbd/asQfgyAVYK2/0xLlr2z/GKK1FWcq7x44tkjeX6ak9e9Msm2kvgKoDCqz57dJWw64cZ68n5+ZvRe6w3YgBUFVLeKmxCssKMKcVFCuJUl05fwlU4rj9MJzNns/sSwUzizC8VeEVpW/8kEukgg2+eOqO1Kqg8I+fFnqBanWIJuWQcbrIlcYeSPanBiauUHe3BMbkazfdX0TCPFcfe6aGmPpMacNJPZ7ICtQtnEQ74ov0OlDJOka4ChWshE6ftulUgUoiYHzjkFcSRxDiWmvcGBZV1rpw+fdfEoroZ2MP+Qu7+y1KA6gAzOTlJE+0Ut1mEx7dL2UlEBXQdwBf3v3mvOB5UHTb2cVY7EHfg6HGn4QQl9zs7sds+oW6UGVWcv4JSbopHFInK6Qs0KlsN1Jd0W8LdjbP5AhTGKPsqRjZ4x6sulL5y32d+vxHv0H+XNfI4lh6eNO1rU6Zrm31WRXgFt3EH3ma8NrFz3emn20cI/S+Pjd55vK9CPkls/j+97zgtHIGhCcDCztNxHAKURhY4fZuvay3ykMAHpbQhdVrmihIv9V8qKNab23TmzAbPj12BmzCdbjmoPBXbqcgWprey/U0vGl18b39to3atma4zGQ+ynrnyoInSJcUUsbKARZUiDEBCmuASuI6m8FbgBAlbASo+7b03Spf86d0hgcrubTpzxv0miJ2KdXU9wcZqi03FR/vY7EfGtKdgrDrR3n7i/t/dk133/IfGHnxcZ5CdxBPMWfVjzdjSMqsposj/Y7k8aISsJCVNgKtyHWQypI2zC8v75iGGhwwqK9t81icXl5T4U1DtQzxpFU+sMOUn1jFr8A6/qx7fv+xio0vNgOppzWQboCf/pMp6c2i53jiRCgSUFRoS8kBt9TY/n05VWjubR5WKQJlu11fcU/oNa3Amtrah8+r/9uQsrLN34B2kfTtW4wp8EV6rtC9T9LsV3w+KD62c19lw+Y39LmMNH9534tQNHalXJieri06tlj8ybHOEAkDKdMW3DWmy2BCKy3dgqfYCpwbOEOr0nyxd+fQnaDOkSo02uu2McxaY0spJge/fWjK5pi35yf2NVzaA8yIUWnx07aCAsh87Mun5k8ori07FDRMdOb7dlAUfQcQvyg0/MpUlkWn4wDmgGtN4mNbNFvXMc3Yuy8X3ir/for/WtbcFc7KprjkdS3ccnH4DJ/E+VOtXF6cTB1Re1fHtS+4fTId+NXrCLZWJou98vGYM+GCI4SgRAFi5OqLSIk7TkOfSZOFkxElSq5EY8qLrKVT6StnKZ04Oi7rAh+VXP//MlM4NqdnpZTtmZbe2j5ZfW7GNe5WJVHxs+aNd06ZeZU4/Um6CDLRfj4ydOL2+tOyxKcnaEt36RGrI80Gi4uO3S+b5SdZJ5BGaWGiCVkKD7uWQj+n+0dIVf31RjZyFi33Y/tx7i0yHN95Ux0eZxs415oGr8Lh18O7VA486uKq0dOGYkrIDqFA3VTXcw2AdI+s7O1IWlvAly5Fn1xxkZiAXB+735Sv+dgFjzunhcrER7LeectY+QVvn89iITuoOhcOKQtb8nofu7OjT6TRHDFERqqSSrVi0+8WxyaX/fPodmyzeXjtRRRvZ2+HUMdMOwm+kPQcOk9xaRz9UGTrAmFsO6DOuFprn+hiWt/lSxvIXkSKsgKXG73QHynpGPNSWY6ediovQf2KveARHK+O3EARbKC/EbNjBdHAdUPFtWYZprrZalmFmsx40taj80Jo7pUy3r0gV3XJGQLRl6se+gHcG7sEIEzJ4WefyU1WUhXEQjgAkDGJRMlZyTnn5AdNGAXbDI9Jnca8x5iWmli7/y7p8qXxoRCqVb4K0TPnYbbi4uB/3MxJOgZRP+NdvESQDBcoBi7oEVpgombShZcSFLIk2kqfpeBrvXd4bUNYSFo9UOayDfBGsJdf8EMaKu0+qPA47OhAHUhWHTAeN0BGWddImh+VsntakNTp1R4FAhbcmVyz8ZjSte3hEKTU466zylmzTs1CWAJXBCJWImpAYTnunMtogUUzh09qui8JQSrsjIbmwxI9c00shaQm3jr3nyw+t51svfboRBbV5a/svoc4TOeAQnFMhYLh/HDHD6hBSappm7Z0K1QrfAtGWwh/CjC4JTEV7m714cLG3YEEfr35oiyMGavOUj12GLs8SuQGMDNqpiEAsQoEVxizc6F8LlTLERJCMqK/ldd21VYWgYdeE+8VnJ19d+H6Y10dgREANjp1bhN/B/y+nJvGJQ1TncFi/hzRdW7vZCXhNE/QsJwcnf8CYi1vDKS/unZtc+reVfXAsyBrAbaOCch9qpNm8cTqeUo4XDm7eA4CIDj0Jp2qYgESGAcpNc3ZY1MmA5DGgLq9amyD1oCze4okFsU+XL37uH862P/6IgIrfWZoug5HB5iHmHw/pSUjgUHCwI2gHVBQniajF5rG+ELImM0nS7CmNvz03u3z5c09IxgC+RsT0x95znAzYTW3CtYCFIKKhWgsGT8L5BIVOxBFn8xWw5iEJbzZ5/5lc/oLcyY9Y9ys4MpQa8I86WuXRxz9CEF8UibGqPK0SGYWNHATNU+USvjNleRsnKmuPOtP4K/GXVixd+AiTB+NGBFQ8t1/H/zVI1US8CpQDJkt1SEVYovjir0Rqnk5m5glkB08MaS8ZrpJWtHU+gD7rEgbjjwiowIG/Uc2pCQAWRqjCyKgVn4Ue0raHIlpcOOpUd/UhaRveAD+nYulzSyJVDio4ItbUoKLoEdwnxa8SAhAUWADUQuboLb4CEEwTfJGDIb/YS+j6w3cBVnle7JTqIQDKxkcE1JqFC5sw/v/jfCYbFSFR4SPE5IvjcQjFJ047+SVPvgiSlWhBBh6prIqfVLV04RpGhsJJ9UNR0d6uI5g2LdnY3LkSlMa7k41IjRFxpIUAo87XjIJvQhbYntfuBf711cv+fk+BwRBERoRSOU5v4cK2WNz7DEJNVJouAXZyM85/XBrwj058wrVO1anpvu8vjPlm6t4AyuYizbrmh7ffdOxJU/E26NN4MQyvvlhZWulyMBrU7ZTCxyAlAN/3/o2/GdVQtfhFeT1nb410xCjVAahe8srSwE9MAbaHNQ1grTREvQi713CYD558vf8J/FbozOqD9z1ibwOVNrVjI/O78YRTP5LLZi/Ai8z/AXj7Aa78l/bYk76Pp/Hchv3DL409Wf3ii/Yv5Xw44/x/RtzikIene+sAAAAASUVORK5CYII="},1197:(e,i,s)=>{s.d(i,{A:()=>n});const n="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODVweCIgaGVpZ2h0PSI5NnB4IiB2aWV3Qm94PSIwIDAgODUgOTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ2LjIgKDQ0NDk2KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT45Ni1sb2dvLU9ubHlTeW1ib2w8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjY2LjU0ODI1MzUlIiB5MT0iLTQuNjkyMTExNTglIiB4Mj0iODAuMjcxODE2NCUiIHkyPSIxMTEuMTg2NDIxJSIgaWQ9ImxpbmVhckdyYWRpZW50LTEiPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjN0FEODUyIiBvZmZzZXQ9IjAlIj48L3N0b3A+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMzQUIzOEIiIG9mZnNldD0iNTMuNTg0Mjg1NyUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwQkZDOSIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9Ijc4LjA5MzczNTklIiB5MT0iMC43Mzc2MDQwNjUlIiB4Mj0iMjAuMzkzNjI1JSIgeTI9IjExOC42MjE4NjQlIiBpZD0ibGluZWFyR3JhZGllbnQtMiI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjI5NTMiIG9mZnNldD0iMCUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0VBMzMzMyIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJMb2dvLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MDUuMDAwMDAwLCAtMTM3ODAuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSJHcm91cC00IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4MC4wMDAwMDAsIDEzMTkxLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9Ijk2LWxvZ28tT25seVN5bWJvbCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTI1LjAwMDAwMCwgNTg5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJsb2dvLXN0LWNvcHktMiI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMy1Db3B5Ij4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjUuOTQ1OTUxNCwxLjgzMTgwNTk5IEMxOC4wNjc0NTY2LDUuMTgzODU2MjYgMC4wNjA4MjcwNzk1LDIyLjQ0MTA2MDQgMCwzNi4wMzk5NTQyIEMwLjEwNjA4MjIyMSw1MC4wOTgzNzkxIDE4LjA2NzQ1NjYsNjYuODk2NDk0IDI1Ljk0NTk1MTQsNzAuMjQ4NTQ0MiBDMjcuNzUyNDY1Niw3MS4wMTY2MjEyIDMwLjU1NTY2MjIsNzIuMDc5OTA4MyAzMy41MTYyNTI4LDcyLjA3OTkwODMgQzM2LjIxNjEzMjEsNzIuMDc5OTA4MyAzOC41MDIyMjI5LDcwLjc0NzYwNzIgNDAuODI4NDAxMyw2Ny45NDk3MzkgQzQ0LjczODE5MjIsNjMuMjQ2MjYyMiA0NC4yNjc3Mjc5LDU2LjQ4MzMzNjIgMzkuMDU3MDE4MSw1Mi42NDUxNjEzIEMzMi44MjE0ODg0LDQ4LjA1NDgxOSAyNy43MTgxNzMxLDQzLjkzNDYxODEgMjcuNjExNzc4MiwzNi4wMzk5NTQyIEMyNy43MTgxNzMxLDI4LjE0NTczMjEgMzIuODIxNDg4NCwyMi42MzU2NzgxIDM5LjA1NzAxODEsMTguMDQ0ODkzOSBDNDQuMjY3NzI3OSwxNC4yMDcxNjA5IDQ1LjI4MjU1NjEsOC4zODU2NDk4NCA0MS4zNzI3NjUyLDMuNjgyMTczMDkgQzM5LjA0NzAyNjUsMC44ODQzMDQ4OTIgMzYuMjE1NjkyNCwwIDMzLjUxNjI1MjgsMCBDMzAuNTU1MjIyNiwwIDI3Ljc1MjQ2NTYsMS4wNjMyODcxNCAyNS45NDU5NTE0LDEuODMxODA1OTkgWiIgaWQ9IkZpbGwtMSIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC0xKSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik00MC42OTY5Njk3LDY4LjEyOTAzMjMgQzQ0LjE1NDk3MjQsNjQuMTk1Nzg5NyA0NC41ODQyODE3LDU2LjM5MzE0MzQgMzkuMTU2NTUzMiw1Mi42NDUxNjEzIEMzMS41NDg1Mjg0LDQ3LjM5MTYzMDIgMjcuNjY0ODc2Myw0Mi4zODMzNDM2IDI3LjcxMDQyODYsMzUuOTY1MTYyMSBDMjcuNzYyMDg0LDI4LjY4NzA2MjIgMzIuMzkzNzk4MSwyNC4xMjk3NDk3IDMzLjU0ODEzMzUsMjIuNzA5Njc3NCBDMTYuMjcyNDI2Miw0Mi4xMDUxNTkyIDEzLjg3OTU1MzUsNjQuMDE5NDI2OSAzMC42MDQ2NDg4LDcxLjczOTUwMjUgQzM0LjQzMTQwNDQsNzMuMDcwMDI5NSAzNy43MDkxMTYsNzEuNTI3NTEyMiA0MC42OTY5Njk3LDY4LjEyOTAzMjMgWiIgaWQ9IkZpbGwtOSIgZmlsbD0iIzAwNTg5MiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zMi42MTg3OTg2LDYxLjE2NTkzMDUgQzM0LjgzODY0MjcsNTguNDM3ODY1NCAzNC42MjcyMjY2LDUzLjI2NTY3MjYgMzEuNjI5OTM3NCw1MC40MjY0NDM1IEMyNi44NjM5NjM1LDQ1LjkxMTggMjYuMDEzMDIzMiw0MS4wMDAzMzM2IDI2LjA0MjI2NTIsMzYuNTQ4NzM1MiBDMjYuMDc1NDI1MSwzMS41MDA3MDQyIDI5LjA0ODcyNjIsMjguMzM5Nzg5MyAyOS43ODk3NDQ5LDI3LjM1NDgzODcgQzE4LjY5OTcwOCw0MC44MDczODcyIDE1LjQwMzUxODksNTguMzE1NTQxNiAyNi4xNDAwOTM2LDYzLjY3MDEyMzMgQzI4LjU5NjY1NjUsNjQuNTkyOTY2IDMwLjcwMDc2MzgsNjMuNTIzMDg4NiAzMi42MTg3OTg2LDYxLjE2NTkzMDUgWiIgaWQ9IkZpbGwtOSIgZmlsbD0iIzAwNDE4RSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNy45MTQ3NTI4LDU1Ljg5Nzc0NDcgQzI5LjMzMTMxMiw1NC4xNTY4NzIyIDI5LjE5NjQwMDEsNTAuODU2MzE3NCAyNy4yODM3MjY0LDQ5LjA0NDUwNzMgQzI0LjI0MjM5MzksNDYuMTYzNTU3NSAyMy42OTkzNzk1LDQzLjAyOTM4MTMgMjMuNzE4MDM5OSw0MC4xODg2NjI2IEMyMy43MzkyMDAzLDM2Ljk2NzMzOTggMjQuNzYwNDYxNCwzNC4xODY5NDkyIDIzLjA4MTczNzEsMzcuOTA4MDIyNyBDMjEuNDAzMDEyOCw0MS42MjkwOTYxIDE2LjkyOTA4ODcsNTQuMDc4ODEzMiAyMy43ODA0Njc2LDU3LjQ5NTc1NjYgQzI1LjM0ODA4NTEsNTguMDg0NjU0MyAyNi42OTA3ODg2LDU3LjQwMTkyODYgMjcuOTE0NzUyOCw1NS44OTc3NDQ3IFoiIGlkPSJGaWxsLTkiIGZpbGw9IiMwMDIzNTUiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC00LUNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQxLjIxMjEyMSwgMjMuNzQxOTM1KSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTUiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTAuMjIwMTg1OCw3Mi4yMTc5NTYgQzcuNTMzNTY4MjcsNzIuMjE3OTU2IDQuNzE1NjgyODEsNzEuMzM0MTQzMiAyLjQwMDk5MTE4LDY4LjUzNzgzMTkgQy0xLjQ5MDIyODYxLDYzLjgzNjk3MjMgLTAuNDczNDkxNjQ2LDU4LjAxOTQ5MjMgNC43MTI0Njc3NSw1NC4xODM4OTQ4IEMxMC45MTgzNzkyLDQ5LjU5NTY2NTEgMTUuOTkwNzI1MSw0NC4wODc4ODU1IDE2LjA5NjYxNDYsMzYuMTk4MDU2MSBDMTUuOTkwNzI1MSwyOC4zMDc3ODUxIDEwLjkxMTk1MTMsMjMuMDY3NzEzNSA0LjcxMjQ2Nzc1LDE4LjQ1NjE5MTYgQzAuMTM1NDgwMTk1LDE1LjA1MTU3MjcgLTEuNDkwMjI4NjEsOC41NTg2OTgyMiAyLjQwMDk5MTE4LDMuODU3ODM4NyBDNC43MTYxMjAzNywxLjA2MTUyNzM1IDcuNTMzMTMwNzEsMC4xNzgxNTYyMTQgMTAuMjIwMTg1OCwwLjE3ODE1NjIxNCBDMTMuMTY2NzEzOCwwLjE3ODE1NjIxNCAxNS45NTY1OTU1LDEuMjQwODUxNyAxNy43NTQ1Mjg5LDIuMDA4NTAxMjIgQzI1LjU5NTYwMTUsNS4zNTg2ODYyNiA0My40MzY2Mjk4LDIyLjEwNTY4IDQzLjU3NDc5MjQsMzYuMTk4MDU2MSBDNDMuNTMwNjA3LDQ5LjQ4MDg2MjYgMjUuNTk1NjAxNSw2Ny4wMzY5ODQzIDE3Ljc1NDUyODksNzAuMzg3MTY5MyBDMTUuOTU2NTk1NSw3MS4xNTUyNjA1IDEzLjE2NzE1MTQsNzIuMjE3OTU2IDEwLjIyMDE4NTgsNzIuMjE3OTU2IFoiIGlkPSJGaWxsLTEtQ29weS02IiBmaWxsPSJ1cmwoI2xpbmVhckdyYWRpZW50LTIpIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMi41NTc0NTc2LDQ1LjY5MDc1MzYgQzI2LjAzMzA5NjYsNDEuNzU3NTExMSAyNS40NDM2MjA2LDM0LjY5ODUyMTMgMTkuOTg4MjEsMzAuOTUwNTM5MyBDMTIuMzQxMzgzNCwyNS42OTcwMDgxIDguNjk1Njc1NDYsMTkuNjczNjY2MiA4Ljc0MTQ2MDAzLDEzLjI1NTQ4NDcgQzguNzkzMzc4ODksNS45NzczODQ3NyAxMy40NDg3MTUzLDEuNDIwMDcyMzMgMTQuNjA4OTM4LC03LjEwNTQyNzM2ZS0xNSBDLTMuNDM2MTQ1NzgsMTMuMjU1NDg0NyAtNS4xNTk5NTQyMSw0MS4zMDk3NDk1IDExLjY1MDQ0MTEsNDkuMDI5ODI1MSBDMTUuNDk2NzEzNyw1MC4zNjAzNTIgMTkuNTU0MzY1NSw0OS4wODkyMzM2IDIyLjU1NzQ1NzYsNDUuNjkwNzUzNiBaIiBpZD0iRmlsbC05IiBmaWxsPSIjNDcwMDAwIiBvcGFjaXR5PSIwLjYwMDAwMDAyNCIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOiBtdWx0aXBseTsiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjM2MzYzNiwgMjQuNzc0MTk0KSByb3RhdGUoLTE4MC4wMDAwMDApIHRyYW5zbGF0ZSgtMTIuMzYzNjM2LCAtMjQuNzc0MTk0KSAiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIzLjI4NTEwNzMsNDAuNjk1Nzg2NyBDMjUuNTA0OTUxNCwzNy45Njc3MjE3IDI1LjI5MzUzNTMsMzIuNzk1NTI4OCAyMi4yOTYyNDYxLDI5Ljk1NjI5OTcgQzE3LjUzMDI3MjIsMjUuNDQxNjU2MiAxNi42NzkzMzE4LDIwLjUzMDE4OTkgMTYuNzA4NTczOCwxNi4wNzg1OTE0IEMxNi43NDE3MzM3LDExLjAzMDU2MDQgMTcuNzUxNzE5Niw4LjcyNjg4NjExIDE4LjQ5MjczODMsNy43NDE5MzU0OCBDOS40NjY1MDI0NywxOC4zNTAyNjI4IDYuNTE2MTE2NiwzOC4wNzY5NTg2IDE2LjgwNjQwMjMsNDMuMTk5OTc5NSBDMTkuMjYyOTY1Miw0NC4xMjI4MjIyIDIxLjM2NzA3MjUsNDMuMDUyOTQ0OCAyMy4yODUxMDczLDQwLjY5NTc4NjcgWiIgaWQ9IkZpbGwtOS1Db3B5IiBmaWxsPSIjNjcwMDEwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNy41MzgwNDQsIDI1LjYzNTg5Nikgcm90YXRlKC0xODAuMDAwMDAwKSB0cmFuc2xhdGUoLTE3LjUzODA0NCwgLTI1LjYzNTg5NikgIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMy44ODkwNDU5LDMzLjk3MzI2MDggQzI1LjMwNTYwNSwzMi4yMzIzODgzIDI1LjE3MDY5MzEsMjguOTMxODMzNSAyMy4yNTgwMTk0LDI3LjEyMDAyMzQgQzIwLjIxNjY4NjksMjQuMjM5MDczNiAxOS4xOTg1MTcyLDIwLjU4MjE5NSAxOS4wODQ0MjE4LDE4LjU1NDczMzMgQzE4Ljk0MzY5NTYsMTYuMDU0MDQ2OCAxOC45NjAyNjU4LDE1LjY5OTAyMjcgMTkuMzk4NjY0MiwxMy45MzU0ODM5IEMxOC4wNjA1NzgzLDE2LjM0NDg4OTIgMTIuMjAwOTQzMSwzMi45NzE0MzY2IDE5Ljc1NDc2MDYsMzUuNTcxMjcyNyBDMjEuMzIyMzc4MiwzNi4xNjAxNzA1IDIyLjY2NTA4MTcsMzUuNDc3NDQ0OCAyMy44ODkwNDU5LDMzLjk3MzI2MDggWiIgaWQ9IkZpbGwtOS1Db3B5LTIiIGZpbGw9IiM3MzAwMDAiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTogbXVsdGlwbHk7IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMC40MDQxMjgsIDI0Ljg1ODYzMSkgcm90YXRlKC0xODAuMDAwMDAwKSB0cmFuc2xhdGUoLTIwLjQwNDEyOCwgLTI0Ljg1ODYzMSkgIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4="},8453:(e,i,s)=>{s.d(i,{R:()=>I,x:()=>g});var n=s(6540);const t={},M=n.createContext(t);function I(e){const i=n.useContext(M);return n.useMemo((function(){return"function"==typeof e?e(i):{...i,...e}}),[i,e])}function g(e){let i;return i=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:I(e.components),n.createElement(M.Provider,{value:i},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/bc80c935.03708a6d.js b/assets/js/bc80c935.677b496d.js similarity index 98% rename from assets/js/bc80c935.03708a6d.js rename to assets/js/bc80c935.677b496d.js index c676c1cf..a0c7dde7 100644 --- a/assets/js/bc80c935.03708a6d.js +++ b/assets/js/bc80c935.677b496d.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[2346],{4055:(e,s,r)=>{r.r(s),r.d(s,{assets:()=>a,contentTitle:()=>d,default:()=>x,frontMatter:()=>i,metadata:()=>n,toc:()=>h});const n=JSON.parse('{"id":"references/cheatsheet","title":"Cheatsheet","description":"CSS Terminology","source":"@site/docs/references/cheatsheet.mdx","sourceDirName":"references","slug":"/references/cheatsheet","permalink":"/docs/references/cheatsheet","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/cheatsheet.mdx","tags":[],"version":"current","frontMatter":{"id":"cheatsheet","title":"Cheatsheet"},"sidebar":"Specification Reference","next":{"title":"Class Selector","permalink":"/docs/references/class-selectors"}}');var l=r(4848),t=r(8453),c=r(2250);const i={id:"cheatsheet",title:"Cheatsheet"},d=void 0,a={},h=[{value:"CSS Terminology",id:"css-terminology",level:2},{value:"Syntax",id:"syntax",level:2},{value:"Selectors",id:"selectors",level:3},{value:"Module system",id:"module-system",level:3},{value:"Class extensions",id:"class-extensions",level:3},{value:"Templating",id:"templating",level:3},{value:"Other",id:"other",level:3}];function o(e){const s={a:"a",h2:"h2",h3:"h3",li:"li",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(s.h2,{id:"css-terminology",children:"CSS Terminology"}),"\n",(0,l.jsxs)(s.ul,{children:["\n",(0,l.jsxs)(s.li,{children:[(0,l.jsx)(s.strong,{children:"selector"}),": query to target elements in the DOM"]}),"\n",(0,l.jsxs)(s.li,{children:[(0,l.jsx)(s.strong,{children:"property"}),": Name of the declaration (e.g. color)"]}),"\n",(0,l.jsxs)(s.li,{children:[(0,l.jsx)(s.strong,{children:"declaration"}),": CSS property paired with a value"]}),"\n",(0,l.jsxs)(s.li,{children:[(0,l.jsx)(s.strong,{children:"declaration Block"}),": List of CSS declarations"]}),"\n",(0,l.jsxs)(s.li,{children:[(0,l.jsx)(s.strong,{children:"ruleset"}),": CSS declaration block paired with a selector"]}),"\n"]}),"\n",(0,l.jsxs)(s.p,{children:["See MDN ",(0,l.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Syntax#CSS_Declarations",children:"How CSS is structured"})," and css-tricks ",(0,l.jsx)(s.a,{href:"https://css-tricks.com/css-ruleset-terminology/",children:"Ruleset Terminology"})," for detailed explanation of CSS naming and structure."]}),"\n",(0,l.jsx)(s.h2,{id:"syntax",children:"Syntax"}),"\n",(0,l.jsx)(s.p,{children:"Syntax that is unique to Stylable or extended from CSS."}),"\n",(0,l.jsx)(s.h3,{id:"selectors",children:"Selectors"}),"\n",(0,l.jsxs)(s.table,{children:[(0,l.jsx)(s.thead,{children:(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.th,{children:"Syntax"}),(0,l.jsx)(s.th,{children:"Explanations"})]})}),(0,l.jsxs)(s.tbody,{children:[(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:".x {}"})}),(0,l.jsxs)(s.td,{children:["Class selector (",(0,l.jsx)(s.a,{href:"/docs/references/class-selectors",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"x {}"})}),(0,l.jsxs)(s.td,{children:["Element type selector (",(0,l.jsx)(s.a,{href:"/docs/references/type-selectors",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:":x {}"})}),(0,l.jsxs)(s.td,{children:["Pseudo-class or custom state selector (",(0,l.jsx)(s.a,{href:"/docs/references/pseudo-classes",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"::x {}"})}),(0,l.jsxs)(s.td,{children:["Pseudo-element or custom-element selector (",(0,l.jsx)(s.a,{href:"/docs/references/pseudo-elements",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:":--x {}"})}),(0,l.jsxs)(s.td,{children:["custom selector (",(0,l.jsx)(s.a,{href:"/docs/references/custom-selectors",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:":global() {}"})}),(0,l.jsxs)(s.td,{children:["disables selector namespacing (",(0,l.jsx)(s.a,{href:"/docs/references/global-selectors",children:"api"}),")"]})]})]})]}),"\n",(0,l.jsx)(s.h3,{id:"module-system",children:"Module system"}),"\n",(0,l.jsxs)(s.table,{children:[(0,l.jsx)(s.thead,{children:(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.th,{children:"Syntax"}),(0,l.jsx)(s.th,{children:"Explanations"})]})}),(0,l.jsxs)(s.tbody,{children:[(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"@st-import X from './y.st.css';"})}),(0,l.jsxs)(s.td,{children:["Import stylesheet's root (",(0,l.jsx)(s.a,{href:"/docs/references/imports#default-import",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"@st-import [x, y] from './y.st.css';"})}),(0,l.jsxs)(s.td,{children:["Import named exports (",(0,l.jsx)(s.a,{href:"/docs/references/imports#named-import",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"@st-import X, [y, z] from './y.st.css';"})}),(0,l.jsxs)(s.td,{children:["Import default & named (",(0,l.jsx)(s.a,{href:"/docs/references/imports#named-import",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"@st-import [x as local-x] from './y.st.css';"})}),(0,l.jsxs)(s.td,{children:["Local alias for named import (",(0,l.jsx)(s.a,{href:"/docs/references/imports#local-alias",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"@st-import [keyframes(x1, x2)] from './y.st.css';"})}),(0,l.jsxs)(s.td,{children:["Import keyframes (",(0,l.jsx)(s.a,{href:"../references/keyframes#import-and-export",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"@st-import [layer(x1, x2)] from './y.st.css';"})}),(0,l.jsxs)(s.td,{children:["Import layers (",(0,l.jsx)(s.a,{href:"../references/layer#import-and-export",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"@st-import [container(x1, x2)] from './y.st.css';"})}),(0,l.jsxs)(s.td,{children:["Import containers (",(0,l.jsx)(s.a,{href:"../references/contains#import-and-export",children:"api"}),")"]})]})]})]}),"\n",(0,l.jsx)(s.h3,{id:"class-extensions",children:"Class extensions"}),"\n",(0,l.jsxs)(s.table,{children:[(0,l.jsx)(s.thead,{children:(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.th,{children:"Syntax"}),(0,l.jsx)(s.th,{children:"Explanations"})]})}),(0,l.jsxs)(s.tbody,{children:[(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"-st-extends: Gallery;"})}),(0,l.jsxs)(s.td,{children:["Extend an existing class (",(0,l.jsx)(s.a,{href:"/docs/references/extend-stylesheet",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"-st-states: stateA, stateB;"})}),(0,l.jsxs)(s.td,{children:["Define custom pseudo-classes (",(0,l.jsx)(s.a,{href:"/docs/references/pseudo-classes",children:"api"}),")"]})]})]})]}),"\n",(0,l.jsx)(s.h3,{id:"templating",children:"Templating"}),"\n",(0,l.jsxs)(s.table,{children:[(0,l.jsx)(s.thead,{children:(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.th,{children:"Syntax"}),(0,l.jsx)(s.th,{children:"Explanations"})]})}),(0,l.jsxs)(s.tbody,{children:[(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:":vars { x: red; y: blue; }"})}),(0,l.jsxs)(s.td,{children:["Build time variables definition (",(0,l.jsx)(s.a,{href:"/docs/references/st-variables#define",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"prop: value(x);"})}),(0,l.jsxs)(s.td,{children:["Insert var value into declaration (",(0,l.jsx)(s.a,{href:"/docs/references/st-variables#evaluate",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"prop: x(arg1, arg2);"})}),(0,l.jsxs)(s.td,{children:["Computed value from custom formatter (",(0,l.jsx)(s.a,{href:"/docs/references/formatters",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"-st-mixin: x, y;"})}),(0,l.jsxs)(s.td,{children:["Apply multiple mixins to CSS ruleset (",(0,l.jsx)(s.a,{href:"/docs/references/mixins",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"-st-mixin: x(param v1, param v2);"})}),(0,l.jsxs)(s.td,{children:["Apply mixins with override params (",(0,l.jsx)(s.a,{href:"/docs/references/mixins",children:"api"}),")"]})]})]})]}),"\n",(0,l.jsx)(s.h3,{id:"other",children:"Other"}),"\n",(0,l.jsxs)(s.table,{children:[(0,l.jsx)(s.thead,{children:(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.th,{children:"Syntax"}),(0,l.jsx)(s.th,{children:"Explanations"})]})}),(0,l.jsxs)(s.tbody,{children:[(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"@st-scope .x {}"})}),(0,l.jsxs)(s.td,{children:["Scope nested rules with a given selector (",(0,l.jsx)(s.a,{href:"/docs/references/st-scope",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:'@st-namespace "x";'})}),(0,l.jsxs)(s.td,{children:["Development display name for debugging (",(0,l.jsx)(s.a,{href:"/docs/references/namespace",children:"api"}),")"]})]})]})]})]})}function x(e={}){const{wrapper:s}={...(0,t.R)(),...e.components};return s?(0,l.jsx)(s,{...e,children:(0,l.jsx)(o,{...e})}):o(e)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[2346],{4719:(e,s,r)=>{r.r(s),r.d(s,{assets:()=>a,contentTitle:()=>d,default:()=>x,frontMatter:()=>i,metadata:()=>n,toc:()=>h});const n=JSON.parse('{"id":"references/cheatsheet","title":"Cheatsheet","description":"CSS Terminology","source":"@site/docs/references/cheatsheet.mdx","sourceDirName":"references","slug":"/references/cheatsheet","permalink":"/docs/references/cheatsheet","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/cheatsheet.mdx","tags":[],"version":"current","frontMatter":{"id":"cheatsheet","title":"Cheatsheet"},"sidebar":"Specification Reference","next":{"title":"Class Selector","permalink":"/docs/references/class-selectors"}}');var l=r(4848),t=r(8453),c=r(1432);const i={id:"cheatsheet",title:"Cheatsheet"},d=void 0,a={},h=[{value:"CSS Terminology",id:"css-terminology",level:2},{value:"Syntax",id:"syntax",level:2},{value:"Selectors",id:"selectors",level:3},{value:"Module system",id:"module-system",level:3},{value:"Class extensions",id:"class-extensions",level:3},{value:"Templating",id:"templating",level:3},{value:"Other",id:"other",level:3}];function o(e){const s={a:"a",h2:"h2",h3:"h3",li:"li",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(s.h2,{id:"css-terminology",children:"CSS Terminology"}),"\n",(0,l.jsxs)(s.ul,{children:["\n",(0,l.jsxs)(s.li,{children:[(0,l.jsx)(s.strong,{children:"selector"}),": query to target elements in the DOM"]}),"\n",(0,l.jsxs)(s.li,{children:[(0,l.jsx)(s.strong,{children:"property"}),": Name of the declaration (e.g. color)"]}),"\n",(0,l.jsxs)(s.li,{children:[(0,l.jsx)(s.strong,{children:"declaration"}),": CSS property paired with a value"]}),"\n",(0,l.jsxs)(s.li,{children:[(0,l.jsx)(s.strong,{children:"declaration Block"}),": List of CSS declarations"]}),"\n",(0,l.jsxs)(s.li,{children:[(0,l.jsx)(s.strong,{children:"ruleset"}),": CSS declaration block paired with a selector"]}),"\n"]}),"\n",(0,l.jsxs)(s.p,{children:["See MDN ",(0,l.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Syntax#CSS_Declarations",children:"How CSS is structured"})," and css-tricks ",(0,l.jsx)(s.a,{href:"https://css-tricks.com/css-ruleset-terminology/",children:"Ruleset Terminology"})," for detailed explanation of CSS naming and structure."]}),"\n",(0,l.jsx)(s.h2,{id:"syntax",children:"Syntax"}),"\n",(0,l.jsx)(s.p,{children:"Syntax that is unique to Stylable or extended from CSS."}),"\n",(0,l.jsx)(s.h3,{id:"selectors",children:"Selectors"}),"\n",(0,l.jsxs)(s.table,{children:[(0,l.jsx)(s.thead,{children:(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.th,{children:"Syntax"}),(0,l.jsx)(s.th,{children:"Explanations"})]})}),(0,l.jsxs)(s.tbody,{children:[(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:".x {}"})}),(0,l.jsxs)(s.td,{children:["Class selector (",(0,l.jsx)(s.a,{href:"/docs/references/class-selectors",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"x {}"})}),(0,l.jsxs)(s.td,{children:["Element type selector (",(0,l.jsx)(s.a,{href:"/docs/references/type-selectors",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:":x {}"})}),(0,l.jsxs)(s.td,{children:["Pseudo-class or custom state selector (",(0,l.jsx)(s.a,{href:"/docs/references/pseudo-classes",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"::x {}"})}),(0,l.jsxs)(s.td,{children:["Pseudo-element or custom-element selector (",(0,l.jsx)(s.a,{href:"/docs/references/pseudo-elements",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:":--x {}"})}),(0,l.jsxs)(s.td,{children:["custom selector (",(0,l.jsx)(s.a,{href:"/docs/references/custom-selectors",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:":global() {}"})}),(0,l.jsxs)(s.td,{children:["disables selector namespacing (",(0,l.jsx)(s.a,{href:"/docs/references/global-selectors",children:"api"}),")"]})]})]})]}),"\n",(0,l.jsx)(s.h3,{id:"module-system",children:"Module system"}),"\n",(0,l.jsxs)(s.table,{children:[(0,l.jsx)(s.thead,{children:(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.th,{children:"Syntax"}),(0,l.jsx)(s.th,{children:"Explanations"})]})}),(0,l.jsxs)(s.tbody,{children:[(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"@st-import X from './y.st.css';"})}),(0,l.jsxs)(s.td,{children:["Import stylesheet's root (",(0,l.jsx)(s.a,{href:"/docs/references/imports#default-import",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"@st-import [x, y] from './y.st.css';"})}),(0,l.jsxs)(s.td,{children:["Import named exports (",(0,l.jsx)(s.a,{href:"/docs/references/imports#named-import",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"@st-import X, [y, z] from './y.st.css';"})}),(0,l.jsxs)(s.td,{children:["Import default & named (",(0,l.jsx)(s.a,{href:"/docs/references/imports#named-import",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"@st-import [x as local-x] from './y.st.css';"})}),(0,l.jsxs)(s.td,{children:["Local alias for named import (",(0,l.jsx)(s.a,{href:"/docs/references/imports#local-alias",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"@st-import [keyframes(x1, x2)] from './y.st.css';"})}),(0,l.jsxs)(s.td,{children:["Import keyframes (",(0,l.jsx)(s.a,{href:"../references/keyframes#import-and-export",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"@st-import [layer(x1, x2)] from './y.st.css';"})}),(0,l.jsxs)(s.td,{children:["Import layers (",(0,l.jsx)(s.a,{href:"../references/layer#import-and-export",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"@st-import [container(x1, x2)] from './y.st.css';"})}),(0,l.jsxs)(s.td,{children:["Import containers (",(0,l.jsx)(s.a,{href:"../references/contains#import-and-export",children:"api"}),")"]})]})]})]}),"\n",(0,l.jsx)(s.h3,{id:"class-extensions",children:"Class extensions"}),"\n",(0,l.jsxs)(s.table,{children:[(0,l.jsx)(s.thead,{children:(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.th,{children:"Syntax"}),(0,l.jsx)(s.th,{children:"Explanations"})]})}),(0,l.jsxs)(s.tbody,{children:[(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"-st-extends: Gallery;"})}),(0,l.jsxs)(s.td,{children:["Extend an existing class (",(0,l.jsx)(s.a,{href:"/docs/references/extend-stylesheet",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"-st-states: stateA, stateB;"})}),(0,l.jsxs)(s.td,{children:["Define custom pseudo-classes (",(0,l.jsx)(s.a,{href:"/docs/references/pseudo-classes",children:"api"}),")"]})]})]})]}),"\n",(0,l.jsx)(s.h3,{id:"templating",children:"Templating"}),"\n",(0,l.jsxs)(s.table,{children:[(0,l.jsx)(s.thead,{children:(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.th,{children:"Syntax"}),(0,l.jsx)(s.th,{children:"Explanations"})]})}),(0,l.jsxs)(s.tbody,{children:[(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:":vars { x: red; y: blue; }"})}),(0,l.jsxs)(s.td,{children:["Build time variables definition (",(0,l.jsx)(s.a,{href:"/docs/references/st-variables#define",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"prop: value(x);"})}),(0,l.jsxs)(s.td,{children:["Insert var value into declaration (",(0,l.jsx)(s.a,{href:"/docs/references/st-variables#evaluate",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"prop: x(arg1, arg2);"})}),(0,l.jsxs)(s.td,{children:["Computed value from custom formatter (",(0,l.jsx)(s.a,{href:"/docs/references/formatters",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"-st-mixin: x, y;"})}),(0,l.jsxs)(s.td,{children:["Apply multiple mixins to CSS ruleset (",(0,l.jsx)(s.a,{href:"/docs/references/mixins",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"-st-mixin: x(param v1, param v2);"})}),(0,l.jsxs)(s.td,{children:["Apply mixins with override params (",(0,l.jsx)(s.a,{href:"/docs/references/mixins",children:"api"}),")"]})]})]})]}),"\n",(0,l.jsx)(s.h3,{id:"other",children:"Other"}),"\n",(0,l.jsxs)(s.table,{children:[(0,l.jsx)(s.thead,{children:(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.th,{children:"Syntax"}),(0,l.jsx)(s.th,{children:"Explanations"})]})}),(0,l.jsxs)(s.tbody,{children:[(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:"@st-scope .x {}"})}),(0,l.jsxs)(s.td,{children:["Scope nested rules with a given selector (",(0,l.jsx)(s.a,{href:"/docs/references/st-scope",children:"api"}),")"]})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(c.A,{language:"css",className:"inline-code",children:'@st-namespace "x";'})}),(0,l.jsxs)(s.td,{children:["Development display name for debugging (",(0,l.jsx)(s.a,{href:"/docs/references/namespace",children:"api"}),")"]})]})]})]})]})}function x(e={}){const{wrapper:s}={...(0,t.R)(),...e.components};return s?(0,l.jsx)(s,{...e,children:(0,l.jsx)(o,{...e})}):o(e)}}}]); \ No newline at end of file diff --git a/assets/js/bfefe422.e4cc47c1.js b/assets/js/bfefe422.839d2a79.js similarity index 99% rename from assets/js/bfefe422.e4cc47c1.js rename to assets/js/bfefe422.839d2a79.js index bf587219..edb3aaab 100644 --- a/assets/js/bfefe422.e4cc47c1.js +++ b/assets/js/bfefe422.839d2a79.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[693],{7724:(e,n,r)=>{r.r(n),r.d(n,{assets:()=>l,contentTitle:()=>o,default:()=>p,frontMatter:()=>a,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"references/css-vars","title":"Custom Property","description":"CSS custom property is used to define and re-use variables that participate in the cascade, and to dynamically change their values at runtime.","source":"@site/docs/references/css-vars.md","sourceDirName":"references","slug":"/references/css-vars","permalink":"/docs/references/css-vars","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/css-vars.md","tags":[],"version":"current","frontMatter":{"id":"css-vars","title":"Custom Property"},"sidebar":"Specification Reference","previous":{"title":"Containers","permalink":"/docs/references/contains"},"next":{"title":"Keyframes","permalink":"/docs/references/keyframes"}}');var i=r(4848),s=r(8453);const a={id:"css-vars",title:"Custom Property"},o=void 0,l={},c=[{value:"syntax",id:"syntax",level:2},{value:"Get / Set",id:"get--set",level:3},{value:"Runtime definition",id:"runtime-definition",level:3},{value:"Build only definition",id:"build-only-definition",level:3},{value:"Comparison to build vars",id:"comparison-to-build-vars",level:2},{value:"Import and Export",id:"import-and-export",level:2},{value:"Runtime",id:"runtime",level:2},{value:"Namespace",id:"namespace",level:2},{value:"Disable namespace",id:"disable-namespace",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.p,{children:["CSS ",(0,i.jsx)(n.code,{children:"custom property"})," is used to define and re-use variables that participate in the cascade, and to dynamically change their values at runtime."]}),"\n",(0,i.jsxs)(n.p,{children:["This page goes over how Stylable handles ",(0,i.jsx)(n.code,{children:"custom properties"}),", for more details about the language feature itself, checkout the following resources:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/--*",children:"MDN custom properties"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@property",children:"MDN @property"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/var",children:"MDN var()"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables",children:"MDN - Using CSS custom properties"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://drafts.csswg.org/css-variables/",children:"Custom properties in spec"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/",children:"Smashing Magazine - It's Time To Start Using CSS Custom Properties"})}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"syntax",children:"syntax"}),"\n",(0,i.jsxs)(n.p,{children:["A CSS custom property name must start with the ",(0,i.jsx)(n.code,{children:"--"})," prefix."]}),"\n",(0,i.jsx)(n.h3,{id:"get--set",children:"Get / Set"}),"\n",(0,i.jsxs)(n.p,{children:["A custom property can be referenced from a ",(0,i.jsx)(n.code,{children:"declaration property"})," or within a value ",(0,i.jsx)(n.code,{children:"var()"})," call:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-css",children:".a {\n /* set */\n --x: green;\n}\n.a .b {\n /* get */\n color: var(--x);\n}\n.b {\n /* fallback to yellow if property is unset */\n color: var(--notSet, yellow);\n\n /* fallback to --x if property is unset */\n color: var(--notSet, var(--x));\n}\n"})}),"\n",(0,i.jsx)(n.admonition,{title:"no explicit definition",type:"note",children:(0,i.jsxs)(n.p,{children:["A custom property can be set and used without an explicit ",(0,i.jsx)(n.code,{children:"@property"})," definition"]})}),"\n",(0,i.jsx)(n.h3,{id:"runtime-definition",children:"Runtime definition"}),"\n",(0,i.jsxs)(n.p,{children:["Use ",(0,i.jsx)(n.code,{children:"@property"})," at-rule to register a configuration for a runtime property:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-css",children:"/* runtime type definition */\n@property --x {\n syntax: '<color>'; /* type */\n inherits: true; /* is taken from cascade */\n initial-value: green; /* default when unset */\n}\n\n.b {\n /* get green from initial value\n if --x is unset */\n color: var(--x);\n}\n"})}),"\n",(0,i.jsx)(n.h3,{id:"build-only-definition",children:"Build only definition"}),"\n",(0,i.jsxs)(n.p,{children:["To define a custom property to be used outside of a stylesheet, without explicitly registering its runtime type or using it as a declaration property or value, you can define the ",(0,i.jsx)(n.code,{children:"@property"})," at-rule without a body:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-css",children:"@property --x;\n"})}),"\n",(0,i.jsx)(n.admonition,{title:"removed at build",type:"info",children:(0,i.jsxs)(n.p,{children:["A property with no configuration body is removed at ",(0,i.jsx)(n.code,{children:"build-time"})," as it serves no purpose during ",(0,i.jsx)(n.code,{children:"runtime"})]})}),"\n",(0,i.jsx)(n.h2,{id:"comparison-to-build-vars",children:"Comparison to build vars"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/references/st-variables",children:"Stylable variables"})," (build vars) and CSS custom properties offer different capabilities, and as such serve different use-cases."]}),"\n",(0,i.jsx)(n.p,{children:"Stylable variables exist only in your source code, and get replaced during build. They serve well for calculations that are not supported by native CSS, reducing code repetition, increasing readability and can benefit any static theme or styling without incurring any runtime performance cost."}),"\n",(0,i.jsx)(n.p,{children:"CSS custom properties on the other hand do incur a very small runtime cost, but offer the ability to override their values during runtime, allowing for native CSS dynamic styling."}),"\n",(0,i.jsx)(n.h2,{id:"import-and-export",children:"Import and Export"}),"\n",(0,i.jsxs)(n.p,{children:["An exported custom-property can be imported into another stylesheet with the ",(0,i.jsx)(n.a,{href:"/docs/references/imports#named-import",children:"@st-import"})," at-rule."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-css",children:"@st-import [--x] from \"./common.st.css\";\n\n.a {\n /* get --x value */\n color: var(--x);\n}\n\n.b {\n /* set/override --x value */\n --x: gold;\n\n /* get override 'gold' value */\n background-color: var(--x); /* gold */\n}\n"})}),"\n",(0,i.jsx)(n.h2,{id:"runtime",children:"Runtime"}),"\n",(0,i.jsx)(n.p,{children:"A custom property can be used dynamically in JavaScript."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-css",metastring:'title="comp.st.css"',children:"@property --x;\n"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",metastring:'title="comp.jsx"',children:"import { vars } from './comp.st.css';\n\n/* inline style set property value */\n<div style={{ [vars.x]: 'pink' }} />;\n"})}),"\n",(0,i.jsx)(n.h2,{id:"namespace",children:"Namespace"}),"\n",(0,i.jsx)(n.p,{children:"Stylable automatically namespace any CSS custom property name according to the stylesheet it is defined in."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-css",children:"@property --x {\n syntax: '<color>';\n inherits: true;\n initial-value: green;\n}\n.a {\n --x: var(--x);\n}\n\n/* OUTPUT */\n@property --NAMESPACE-x {\n syntax: '<color>';\n inherits: true;\n initial-value: green;\n}\n.NAMESPACE__a {\n --NAMESPACE-x: var(--NAMESPACE-x);\n}\n"})}),"\n",(0,i.jsx)(n.h3,{id:"disable-namespace",children:"Disable namespace"}),"\n",(0,i.jsxs)(n.p,{children:["In cases where the default namespace behavior is not wanted, ",(0,i.jsx)(n.code,{children:"st-global"})," can be used to mark a custom property definition as global."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-css",children:"@property st-global(--x) {\n syntax: '<color>';\n inherits: true;\n initial-value: green;\n}\n\n.a {\n --x: var(--x);\n}\n\n/* OUTPUT */\n@property --x {\n syntax: '<color>';\n inherits: true;\n initial-value: green;\n}\n\n.NAMESPACE__a {\n --x: var(--x);\n}\n"})})]})}function p(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},8453:(e,n,r)=>{r.d(n,{R:()=>a,x:()=>o});var t=r(6540);const i={},s=t.createContext(i);function a(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[693],{5967:(e,n,r)=>{r.r(n),r.d(n,{assets:()=>l,contentTitle:()=>o,default:()=>p,frontMatter:()=>a,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"references/css-vars","title":"Custom Property","description":"CSS custom property is used to define and re-use variables that participate in the cascade, and to dynamically change their values at runtime.","source":"@site/docs/references/css-vars.md","sourceDirName":"references","slug":"/references/css-vars","permalink":"/docs/references/css-vars","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/css-vars.md","tags":[],"version":"current","frontMatter":{"id":"css-vars","title":"Custom Property"},"sidebar":"Specification Reference","previous":{"title":"Containers","permalink":"/docs/references/contains"},"next":{"title":"Keyframes","permalink":"/docs/references/keyframes"}}');var i=r(4848),s=r(8453);const a={id:"css-vars",title:"Custom Property"},o=void 0,l={},c=[{value:"syntax",id:"syntax",level:2},{value:"Get / Set",id:"get--set",level:3},{value:"Runtime definition",id:"runtime-definition",level:3},{value:"Build only definition",id:"build-only-definition",level:3},{value:"Comparison to build vars",id:"comparison-to-build-vars",level:2},{value:"Import and Export",id:"import-and-export",level:2},{value:"Runtime",id:"runtime",level:2},{value:"Namespace",id:"namespace",level:2},{value:"Disable namespace",id:"disable-namespace",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.p,{children:["CSS ",(0,i.jsx)(n.code,{children:"custom property"})," is used to define and re-use variables that participate in the cascade, and to dynamically change their values at runtime."]}),"\n",(0,i.jsxs)(n.p,{children:["This page goes over how Stylable handles ",(0,i.jsx)(n.code,{children:"custom properties"}),", for more details about the language feature itself, checkout the following resources:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/--*",children:"MDN custom properties"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@property",children:"MDN @property"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/var",children:"MDN var()"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables",children:"MDN - Using CSS custom properties"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://drafts.csswg.org/css-variables/",children:"Custom properties in spec"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/",children:"Smashing Magazine - It's Time To Start Using CSS Custom Properties"})}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"syntax",children:"syntax"}),"\n",(0,i.jsxs)(n.p,{children:["A CSS custom property name must start with the ",(0,i.jsx)(n.code,{children:"--"})," prefix."]}),"\n",(0,i.jsx)(n.h3,{id:"get--set",children:"Get / Set"}),"\n",(0,i.jsxs)(n.p,{children:["A custom property can be referenced from a ",(0,i.jsx)(n.code,{children:"declaration property"})," or within a value ",(0,i.jsx)(n.code,{children:"var()"})," call:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-css",children:".a {\n /* set */\n --x: green;\n}\n.a .b {\n /* get */\n color: var(--x);\n}\n.b {\n /* fallback to yellow if property is unset */\n color: var(--notSet, yellow);\n\n /* fallback to --x if property is unset */\n color: var(--notSet, var(--x));\n}\n"})}),"\n",(0,i.jsx)(n.admonition,{title:"no explicit definition",type:"note",children:(0,i.jsxs)(n.p,{children:["A custom property can be set and used without an explicit ",(0,i.jsx)(n.code,{children:"@property"})," definition"]})}),"\n",(0,i.jsx)(n.h3,{id:"runtime-definition",children:"Runtime definition"}),"\n",(0,i.jsxs)(n.p,{children:["Use ",(0,i.jsx)(n.code,{children:"@property"})," at-rule to register a configuration for a runtime property:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-css",children:"/* runtime type definition */\n@property --x {\n syntax: '<color>'; /* type */\n inherits: true; /* is taken from cascade */\n initial-value: green; /* default when unset */\n}\n\n.b {\n /* get green from initial value\n if --x is unset */\n color: var(--x);\n}\n"})}),"\n",(0,i.jsx)(n.h3,{id:"build-only-definition",children:"Build only definition"}),"\n",(0,i.jsxs)(n.p,{children:["To define a custom property to be used outside of a stylesheet, without explicitly registering its runtime type or using it as a declaration property or value, you can define the ",(0,i.jsx)(n.code,{children:"@property"})," at-rule without a body:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-css",children:"@property --x;\n"})}),"\n",(0,i.jsx)(n.admonition,{title:"removed at build",type:"info",children:(0,i.jsxs)(n.p,{children:["A property with no configuration body is removed at ",(0,i.jsx)(n.code,{children:"build-time"})," as it serves no purpose during ",(0,i.jsx)(n.code,{children:"runtime"})]})}),"\n",(0,i.jsx)(n.h2,{id:"comparison-to-build-vars",children:"Comparison to build vars"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/references/st-variables",children:"Stylable variables"})," (build vars) and CSS custom properties offer different capabilities, and as such serve different use-cases."]}),"\n",(0,i.jsx)(n.p,{children:"Stylable variables exist only in your source code, and get replaced during build. They serve well for calculations that are not supported by native CSS, reducing code repetition, increasing readability and can benefit any static theme or styling without incurring any runtime performance cost."}),"\n",(0,i.jsx)(n.p,{children:"CSS custom properties on the other hand do incur a very small runtime cost, but offer the ability to override their values during runtime, allowing for native CSS dynamic styling."}),"\n",(0,i.jsx)(n.h2,{id:"import-and-export",children:"Import and Export"}),"\n",(0,i.jsxs)(n.p,{children:["An exported custom-property can be imported into another stylesheet with the ",(0,i.jsx)(n.a,{href:"/docs/references/imports#named-import",children:"@st-import"})," at-rule."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-css",children:"@st-import [--x] from \"./common.st.css\";\n\n.a {\n /* get --x value */\n color: var(--x);\n}\n\n.b {\n /* set/override --x value */\n --x: gold;\n\n /* get override 'gold' value */\n background-color: var(--x); /* gold */\n}\n"})}),"\n",(0,i.jsx)(n.h2,{id:"runtime",children:"Runtime"}),"\n",(0,i.jsx)(n.p,{children:"A custom property can be used dynamically in JavaScript."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-css",metastring:'title="comp.st.css"',children:"@property --x;\n"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",metastring:'title="comp.jsx"',children:"import { vars } from './comp.st.css';\n\n/* inline style set property value */\n<div style={{ [vars.x]: 'pink' }} />;\n"})}),"\n",(0,i.jsx)(n.h2,{id:"namespace",children:"Namespace"}),"\n",(0,i.jsx)(n.p,{children:"Stylable automatically namespace any CSS custom property name according to the stylesheet it is defined in."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-css",children:"@property --x {\n syntax: '<color>';\n inherits: true;\n initial-value: green;\n}\n.a {\n --x: var(--x);\n}\n\n/* OUTPUT */\n@property --NAMESPACE-x {\n syntax: '<color>';\n inherits: true;\n initial-value: green;\n}\n.NAMESPACE__a {\n --NAMESPACE-x: var(--NAMESPACE-x);\n}\n"})}),"\n",(0,i.jsx)(n.h3,{id:"disable-namespace",children:"Disable namespace"}),"\n",(0,i.jsxs)(n.p,{children:["In cases where the default namespace behavior is not wanted, ",(0,i.jsx)(n.code,{children:"st-global"})," can be used to mark a custom property definition as global."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-css",children:"@property st-global(--x) {\n syntax: '<color>';\n inherits: true;\n initial-value: green;\n}\n\n.a {\n --x: var(--x);\n}\n\n/* OUTPUT */\n@property --x {\n syntax: '<color>';\n inherits: true;\n initial-value: green;\n}\n\n.NAMESPACE__a {\n --x: var(--x);\n}\n"})})]})}function p(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},8453:(e,n,r)=>{r.d(n,{R:()=>a,x:()=>o});var t=r(6540);const i={},s=t.createContext(i);function a(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/c0d90f50.d20d39ea.js b/assets/js/c0d90f50.19dd0b17.js similarity index 98% rename from assets/js/c0d90f50.d20d39ea.js rename to assets/js/c0d90f50.19dd0b17.js index 367ce8a4..1350806f 100644 --- a/assets/js/c0d90f50.d20d39ea.js +++ b/assets/js/c0d90f50.19dd0b17.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[7394],{3978:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>a,contentTitle:()=>l,default:()=>p,frontMatter:()=>c,metadata:()=>n,toc:()=>i});const n=JSON.parse('{"id":"references/root","title":"Root","description":"Every Stylable stylesheet has a reserved class called root that matches the root node of the component. The root class is used to signify the component top-level node where a new namespace scope is created.","source":"@site/docs/references/root.md","sourceDirName":"references","slug":"/references/root","permalink":"/docs/references/root","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/root.md","tags":[],"version":"current","frontMatter":{"id":"root","title":"Root","layout":"docs"},"sidebar":"Specification Reference","previous":{"title":"Namespace","permalink":"/docs/references/namespace"},"next":{"title":"Scope","permalink":"/docs/references/st-scope"}}');var o=t(4848),r=t(8453);const c={id:"root",title:"Root",layout:"docs"},l=void 0,a={},i=[{value:"Default export",id:"default-export",level:2},{value:"Runtime",id:"runtime",level:2},{value:"simple example",id:"simple-example",level:3},{value:"root + state + customize",id:"root--state--customize",level:3}];function d(e){const s={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(s.p,{children:["Every Stylable stylesheet has a reserved class called ",(0,o.jsx)(s.code,{children:"root"})," that matches the root node of the component. The ",(0,o.jsx)(s.code,{children:"root"})," class is used to signify the component top-level node where a new namespace scope is created."]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:".root { \n /* set component background */\n background: white; \n} \n\n/* OUTPUT */\n.NAMESPACE__root { \n background: white; \n}\n"})}),"\n",(0,o.jsx)(s.h2,{id:"default-export",children:"Default export"}),"\n",(0,o.jsxs)(s.p,{children:["The root of a stylesheet can be referenced in other stylesheets by using the ",(0,o.jsx)(s.a,{href:"/docs/references/imports#default-import",children:"default import"}),"."]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",metastring:'title="page.st.css"',children:"@st-import DropDown from './dropdown.st.css';\n\n/* style any dropdown component background \n nested under the page root */\n.root DropDown {\n background: salmon;\n}\n\n/* OUTPUT */\n.page__root .dropdown__root { \n background: salmon; \n}\n"})}),"\n",(0,o.jsx)(s.h2,{id:"runtime",children:"Runtime"}),"\n",(0,o.jsxs)(s.p,{children:["Each component is responsible for placing the ",(0,o.jsx)(s.code,{children:"root"})," class on its top-level node using the ",(0,o.jsx)(s.a,{href:"/docs/references/runtime",children:"runtime API"}),"."]}),"\n",(0,o.jsx)(s.h3,{id:"simple-example",children:"simple example"}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-jsx",metastring:'title="comp.jsx"',children:"import { classes } from './comp.st.css';\n\nfunction Comp() {\n return <div className={classes.root}></div>;\n}\n"})}),"\n",(0,o.jsx)(s.h3,{id:"root--state--customize",children:"root + state + customize"}),"\n",(0,o.jsxs)(s.p,{children:["The following example uses the ",(0,o.jsx)(s.a,{href:"/docs/references/runtime#st-function",children:"st() function"})," to add multiple classes:"]}),"\n",(0,o.jsxs)(s.ol,{children:["\n",(0,o.jsx)(s.li,{children:"the component root class"}),"\n",(0,o.jsx)(s.li,{children:"state classes"}),"\n",(0,o.jsx)(s.li,{children:"classes passed from props for customizations"}),"\n"]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-jsx",metastring:'title="comp.jsx"',children:"import { st, classes } from './comp.st.css';\n\nfunction Comp({ className }) {\n return (\n <div className={st(classes.root, {/*states*/}, className)}></div>\n );\n}\n"})})]})}function p(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>c,x:()=>l});var n=t(6540);const o={},r=n.createContext(o);function c(e){const s=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),n.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[7394],{4707:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>a,contentTitle:()=>l,default:()=>p,frontMatter:()=>c,metadata:()=>n,toc:()=>i});const n=JSON.parse('{"id":"references/root","title":"Root","description":"Every Stylable stylesheet has a reserved class called root that matches the root node of the component. The root class is used to signify the component top-level node where a new namespace scope is created.","source":"@site/docs/references/root.md","sourceDirName":"references","slug":"/references/root","permalink":"/docs/references/root","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/root.md","tags":[],"version":"current","frontMatter":{"id":"root","title":"Root","layout":"docs"},"sidebar":"Specification Reference","previous":{"title":"Namespace","permalink":"/docs/references/namespace"},"next":{"title":"Scope","permalink":"/docs/references/st-scope"}}');var o=t(4848),r=t(8453);const c={id:"root",title:"Root",layout:"docs"},l=void 0,a={},i=[{value:"Default export",id:"default-export",level:2},{value:"Runtime",id:"runtime",level:2},{value:"simple example",id:"simple-example",level:3},{value:"root + state + customize",id:"root--state--customize",level:3}];function d(e){const s={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(s.p,{children:["Every Stylable stylesheet has a reserved class called ",(0,o.jsx)(s.code,{children:"root"})," that matches the root node of the component. The ",(0,o.jsx)(s.code,{children:"root"})," class is used to signify the component top-level node where a new namespace scope is created."]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:".root { \n /* set component background */\n background: white; \n} \n\n/* OUTPUT */\n.NAMESPACE__root { \n background: white; \n}\n"})}),"\n",(0,o.jsx)(s.h2,{id:"default-export",children:"Default export"}),"\n",(0,o.jsxs)(s.p,{children:["The root of a stylesheet can be referenced in other stylesheets by using the ",(0,o.jsx)(s.a,{href:"/docs/references/imports#default-import",children:"default import"}),"."]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",metastring:'title="page.st.css"',children:"@st-import DropDown from './dropdown.st.css';\n\n/* style any dropdown component background \n nested under the page root */\n.root DropDown {\n background: salmon;\n}\n\n/* OUTPUT */\n.page__root .dropdown__root { \n background: salmon; \n}\n"})}),"\n",(0,o.jsx)(s.h2,{id:"runtime",children:"Runtime"}),"\n",(0,o.jsxs)(s.p,{children:["Each component is responsible for placing the ",(0,o.jsx)(s.code,{children:"root"})," class on its top-level node using the ",(0,o.jsx)(s.a,{href:"/docs/references/runtime",children:"runtime API"}),"."]}),"\n",(0,o.jsx)(s.h3,{id:"simple-example",children:"simple example"}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-jsx",metastring:'title="comp.jsx"',children:"import { classes } from './comp.st.css';\n\nfunction Comp() {\n return <div className={classes.root}></div>;\n}\n"})}),"\n",(0,o.jsx)(s.h3,{id:"root--state--customize",children:"root + state + customize"}),"\n",(0,o.jsxs)(s.p,{children:["The following example uses the ",(0,o.jsx)(s.a,{href:"/docs/references/runtime#st-function",children:"st() function"})," to add multiple classes:"]}),"\n",(0,o.jsxs)(s.ol,{children:["\n",(0,o.jsx)(s.li,{children:"the component root class"}),"\n",(0,o.jsx)(s.li,{children:"state classes"}),"\n",(0,o.jsx)(s.li,{children:"classes passed from props for customizations"}),"\n"]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-jsx",metastring:'title="comp.jsx"',children:"import { st, classes } from './comp.st.css';\n\nfunction Comp({ className }) {\n return (\n <div className={st(classes.root, {/*states*/}, className)}></div>\n );\n}\n"})})]})}function p(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>c,x:()=>l});var n=t(6540);const o={},r=n.createContext(o);function c(e){const s=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),n.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/cb737cc7.25dc0627.js b/assets/js/cb737cc7.25dc0627.js new file mode 100644 index 00000000..4cb703cb --- /dev/null +++ b/assets/js/cb737cc7.25dc0627.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[242],{3:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"guides/handbook/import-class","title":"Import Class","description":"In the Runtime chapter, we saw how a Stylable stylesheet\'s API can be imported into a JavaScript module, and how that API can be used. In this chapter, we\'ll see how our game example can be divided into linked stylesheet modules to provide a better development experience.","source":"@site/docs/guides/handbook/import.mdx","sourceDirName":"guides/handbook","slug":"/guides/handbook/import-class","permalink":"/docs/guides/handbook/import-class","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/handbook/import.mdx","tags":[],"version":"current","frontMatter":{"id":"import-class","title":"Import Class"},"sidebar":"Guides","previous":{"title":"Runtime","permalink":"/docs/guides/handbook/runtime"},"next":{"title":"Extend","permalink":"/docs/guides/handbook/extend"}}');var a=t(4848),r=t(8453),o=t(1432);const i={id:"import-class",title:"Import Class"},l=void 0,c={},d=[{value:"Stylesheet root",id:"stylesheet-root",level:2},{value:"Default import",id:"default-import",level:2},{value:"Stylesheet root selector",id:"stylesheet-root-selector",level:3},{value:"Class named import",id:"class-named-import",level:2},{value:"Validations",id:"validations",level:3},{value:"Exported by default",id:"exported-by-default",level:3},{value:"Further import use-cases",id:"further-import-use-cases",level:2}];function h(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",hr:"hr",p:"p",pre:"pre",strong:"strong",...(0,r.R)(),...e.components},{Details:t}=s;return t||function(e,s){throw new Error("Expected "+(s?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(s.p,{children:["In the ",(0,a.jsx)(s.a,{href:"/docs/guides/handbook/runtime",children:"Runtime chapter"}),", we saw how a Stylable stylesheet's API can be imported into a JavaScript module, and how that API can be used. In this chapter, we'll see how our game example can be divided into linked stylesheet modules to provide a better development experience."]}),"\n","\n",(0,a.jsxs)(s.p,{children:["Up to this point, we've talked mostly about a single stylesheet for our project (",(0,a.jsx)(s.code,{children:"game.st.css"}),"). Now we'll explore how to organize our code across multiple stylesheets."]}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"Current status:"})}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css"',children:".board { /* ... */ }\n\n.player {\n -st-states: registered, \n ranking(enum(first, second, third));\n background: blue;\n}\n"})}),"\n","\n",(0,a.jsx)(s.h2,{id:"stylesheet-root",children:"Stylesheet root"}),"\n",(0,a.jsxs)(s.p,{children:["Let's refactor the ",(0,a.jsx)(s.code,{children:"player"})," class from out of our ",(0,a.jsx)(s.code,{children:"game.st.css"})," to be in its own stylesheet."]}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="player.st.css"',children:".root {\n -st-states: registered,\n ranking(enum(first, second, third));\n background: blue;\n}\n"})}),"\n","\n",(0,a.jsxs)(s.p,{children:["We created a new ",(0,a.jsx)(s.code,{children:"player.st.css"})," file above, and in it, created a new ",(0,a.jsx)(s.code,{children:".root"})," class. Then we moved the contents of the ",(0,a.jsx)(s.code,{children:".player"})," class rules to our new ",(0,a.jsx)(s.code,{children:"root"})," class."]}),"\n",(0,a.jsx)(s.admonition,{title:"default root class",type:"info",children:(0,a.jsxs)(s.p,{children:["In Stylable, each component stylesheet is represented by a ",(0,a.jsx)(s.code,{children:"root"})," class that is automatically created, even if not explicitly defined by the user. This root class is expected to be applied to the ",(0,a.jsx)(s.a,{href:"/docs/references/root",children:"root element of the component"}),"."]})}),"\n","\n",(0,a.jsxs)(s.p,{children:["We can see that when we moved the ",(0,a.jsx)(s.code,{children:"player"})," class, we also included its styling declarations. This might cause additional work in the future when trying to customize this class from the outside."]}),"\n",(0,a.jsx)(s.admonition,{title:"base style recommendation",type:"tip",children:(0,a.jsxs)(s.p,{children:["Stylable recommends that a component's stylesheet include minimal styling - only what is crucial for the functionality of the component or defines its structure. To follow this best practice, we need a way to import the ",(0,a.jsx)(s.code,{children:"player.st.css"})," stylesheet over to ",(0,a.jsx)(s.code,{children:"game.st.css"}),", and perform our styling customizations there."]})}),"\n",(0,a.jsx)(s.h2,{id:"default-import",children:"Default import"}),"\n",(0,a.jsxs)(s.p,{children:["Keep in mind that, as we saw earlier in the ",(0,a.jsx)(s.a,{href:"/docs/guides/handbook/namespacing#supported-symbols",children:"Namespacing chapter"}),", classes in Stylable are automatically namespaced. This means that if we wish to target a class from another stylesheet in a selector, we need to import it to link to it."]}),"\n",(0,a.jsxs)(s.p,{children:["Below, we import the ",(0,a.jsx)(s.code,{children:"player.st.css"})," stylesheet and customize it by using the ",(0,a.jsx)(s.code,{children:"@st-import"})," at-rule, and providing it with a ",(0,a.jsx)(s.strong,{children:"local name"})," for the default export (beginning with a capital letter) and a ",(0,a.jsx)(s.strong,{children:"request"})," to the target stylesheet. Then we move any customizations out of ",(0,a.jsx)(s.code,{children:"player.st.css"})," into ",(0,a.jsx)(s.code,{children:"game.st.css"}),"."]}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css - moved player customization"',children:'@st-import Player from "./player.st.css";\n\n.board { /* ... */ }\n\nPlayer {\n background: blue; /* moved from player.st.css */\n}\n'})}),"\n",(0,a.jsxs)(t,{children:[(0,a.jsx)("summary",{children:(0,a.jsx)(s.p,{children:"Namespacing output"})}),(0,a.jsx)(o.A,{title:"game.st.css",language:"css",children:'@st-import Player from "./player.st.css"; \n\n/* namespaced locally */\n.game__board { /* ... */ } \n\n/* namespaced by player.st.css */\n.player__root { \nbackground: blue;\n}'})]}),"\n","\n",(0,a.jsx)(s.h3,{id:"stylesheet-root-selector",children:"Stylesheet root selector"}),"\n",(0,a.jsxs)(s.p,{children:["It's important to note that a default import of a Stylable stylesheet represents a component root, and is in fact pointing to the ",(0,a.jsx)(s.code,{children:"root"})," class of that stylesheet."]}),"\n",(0,a.jsxs)(s.admonition,{title:"Unscoped warning",type:"caution",children:[(0,a.jsxs)(s.p,{children:["By importing the default export of a stylesheet and then styling it, we are potentially customizing every instance of the component across our project. It is therefore ",(0,a.jsx)(s.strong,{children:"strongly recommended"})," to scope any selector that originates from a different namespace (stylesheet) or includes native elements with a local class."]}),(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:'@st-import Player from "./player.st.css";\n\n/* report unscoped warnings */\nPlayer {}\ndiv {}\n\n/* no warnings */\n.root Player {}\n.root div {}\n'})})]}),"\n",(0,a.jsx)(s.h2,{id:"class-named-import",children:"Class named import"}),"\n",(0,a.jsxs)(s.p,{children:["For the next step, we would like to add ",(0,a.jsx)(s.code,{children:"avatar"})," and ",(0,a.jsx)(s.code,{children:"username"})," parts to ",(0,a.jsx)(s.code,{children:"player.st.css"}),". These will be applied to the inner elements of the component, and are assumed to be nested under the ",(0,a.jsx)(s.code,{children:"root"})," class."]}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="player.st.css - added avatar and username"',children:".root {\n -st-states: registered,\n ranking(enum(first, second, third));\n}\n.avatar {}\n.username {}\n"})}),"\n","\n",(0,a.jsx)(s.p,{children:"We then proceed to bind these new classes to their matching elements in the component."}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-jsx",metastring:'title="player.jsx - bind avatar and username"',children:'import { st, classes } from "./player.st.css";\n\nconst Player = ({ className }) => {\n return (\n <div className={st(classes.root, { /* states */ }, className)}>\n <image className={classes.avatar} />\n <span className={classes.username}></span>\n </div>\n )\n}\n'})}),"\n","\n",(0,a.jsxs)(s.p,{children:["Now that we have these new classes, we can customize them externally through ",(0,a.jsx)(s.code,{children:"game.st.css"}),". We do this by adding two ",(0,a.jsx)(s.code,{children:"named imports"}),", inside square brackets, that link to our classes."]}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css - player customization"',children:'@st-import Player, [avatar, username] from "./player.st.css";\n\nPlayer {\n /* paint the Player component background blue */\n background: blue;\n}\nPlayer .avatar {\n /* circle avatar */\n border-radius: 50%;\n}\nPlayer .username {\n /* all caps username */\n text-transform: uppercase;\n}\n'})}),"\n",(0,a.jsxs)(t,{children:[(0,a.jsx)("summary",{children:(0,a.jsx)(s.p,{children:"Namespacing output - selectors only"})}),(0,a.jsx)(o.A,{title:"game.st.css",language:"css",children:'@st-import Player, [avatar, username] from "./player.st.css"; \n\n.player__root {}\n.player__root .player__avatar {}\n.player__root .player__username {}'})]}),"\n","\n",(0,a.jsx)(s.h3,{id:"validations",children:"Validations"}),"\n",(0,a.jsx)(s.p,{children:"One of the nice things that we gain by using these Stylable imports is that requested symbols are validated, and we'll be notified if any of the imported parts are not found."}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css - missing import"',children:'/* report an error about an unknown "missingImport" symbol */\n@st-import [missingImport] from "./player.st.css";\n'})}),"\n",(0,a.jsx)(s.h3,{id:"exported-by-default",children:"Exported by default"}),"\n",(0,a.jsx)(s.p,{children:"Any classes and other symbols defined in a stylesheet are automatically exported and available for import."}),"\n",(0,a.jsx)(s.admonition,{title:"Explicit exports",type:"note",children:(0,a.jsxs)(s.p,{children:["We are in the process of developing ",(0,a.jsx)(s.a,{href:"https://github.com/wix/stylable/issues/2604",children:"explicit export support"}),", and will expand this section once available."]})}),"\n",(0,a.jsx)(s.h2,{id:"further-import-use-cases",children:"Further import use-cases"}),"\n",(0,a.jsx)(s.p,{children:"Up to this point, we've only needed to import classes between stylesheets. In later chapters of this guide, we will learn how to import and use additional symbols, as well as additional import use cases from JavaScript to our stylesheet."}),"\n",(0,a.jsxs)(s.p,{children:["Check out the API cheatsheet to see various ",(0,a.jsx)(s.a,{href:"../../references/cheatsheet#module-system",children:"@st-import"})," examples."]}),"\n",(0,a.jsx)(s.hr,{}),"\n",(0,a.jsx)(s.p,{children:"In this chapter, we've seen how to divide a stylesheet to separate modules, and how to customize those externally. We approached doing this by manually importing each class (default or named), and customizing them together using a selector."}),"\n",(0,a.jsxs)(s.p,{children:["In the ",(0,a.jsx)(s.a,{href:"./extend",children:"Next chapter"}),", we'll learn how Stylable can extend stylesheets, exposing their inner parts as an API to make our lives easier."]})]})}function p(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(h,{...e})}):h(e)}}}]); \ No newline at end of file diff --git a/assets/js/cb737cc7.4efc99f1.js b/assets/js/cb737cc7.4efc99f1.js deleted file mode 100644 index 2c98afd3..00000000 --- a/assets/js/cb737cc7.4efc99f1.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[242],{4734:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"guides/handbook/import-class","title":"Import Class","description":"In the Runtime chapter, we saw how a Stylable stylesheet\'s API can be imported into a JavaScript module, and how that API can be used. In this chapter, we\'ll see how our game example can be divided into linked stylesheet modules to provide a better development experience.","source":"@site/docs/guides/handbook/import.mdx","sourceDirName":"guides/handbook","slug":"/guides/handbook/import-class","permalink":"/docs/guides/handbook/import-class","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/handbook/import.mdx","tags":[],"version":"current","frontMatter":{"id":"import-class","title":"Import Class"},"sidebar":"Guides","previous":{"title":"Runtime","permalink":"/docs/guides/handbook/runtime"},"next":{"title":"Extend","permalink":"/docs/guides/handbook/extend"}}');var a=t(4848),r=t(8453),o=t(2250);const i={id:"import-class",title:"Import Class"},l=void 0,c={},d=[{value:"Stylesheet root",id:"stylesheet-root",level:2},{value:"Default import",id:"default-import",level:2},{value:"Stylesheet root selector",id:"stylesheet-root-selector",level:3},{value:"Class named import",id:"class-named-import",level:2},{value:"Validations",id:"validations",level:3},{value:"Exported by default",id:"exported-by-default",level:3},{value:"Further import use-cases",id:"further-import-use-cases",level:2}];function h(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",hr:"hr",p:"p",pre:"pre",strong:"strong",...(0,r.R)(),...e.components},{Details:t}=s;return t||function(e,s){throw new Error("Expected "+(s?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(s.p,{children:["In the ",(0,a.jsx)(s.a,{href:"/docs/guides/handbook/runtime",children:"Runtime chapter"}),", we saw how a Stylable stylesheet's API can be imported into a JavaScript module, and how that API can be used. In this chapter, we'll see how our game example can be divided into linked stylesheet modules to provide a better development experience."]}),"\n","\n",(0,a.jsxs)(s.p,{children:["Up to this point, we've talked mostly about a single stylesheet for our project (",(0,a.jsx)(s.code,{children:"game.st.css"}),"). Now we'll explore how to organize our code across multiple stylesheets."]}),"\n",(0,a.jsx)(s.p,{children:(0,a.jsx)(s.strong,{children:"Current status:"})}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css"',children:".board { /* ... */ }\n\n.player {\n -st-states: registered, \n ranking(enum(first, second, third));\n background: blue;\n}\n"})}),"\n","\n",(0,a.jsx)(s.h2,{id:"stylesheet-root",children:"Stylesheet root"}),"\n",(0,a.jsxs)(s.p,{children:["Let's refactor the ",(0,a.jsx)(s.code,{children:"player"})," class from out of our ",(0,a.jsx)(s.code,{children:"game.st.css"})," to be in its own stylesheet."]}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="player.st.css"',children:".root {\n -st-states: registered,\n ranking(enum(first, second, third));\n background: blue;\n}\n"})}),"\n","\n",(0,a.jsxs)(s.p,{children:["We created a new ",(0,a.jsx)(s.code,{children:"player.st.css"})," file above, and in it, created a new ",(0,a.jsx)(s.code,{children:".root"})," class. Then we moved the contents of the ",(0,a.jsx)(s.code,{children:".player"})," class rules to our new ",(0,a.jsx)(s.code,{children:"root"})," class."]}),"\n",(0,a.jsx)(s.admonition,{title:"default root class",type:"info",children:(0,a.jsxs)(s.p,{children:["In Stylable, each component stylesheet is represented by a ",(0,a.jsx)(s.code,{children:"root"})," class that is automatically created, even if not explicitly defined by the user. This root class is expected to be applied to the ",(0,a.jsx)(s.a,{href:"/docs/references/root",children:"root element of the component"}),"."]})}),"\n","\n",(0,a.jsxs)(s.p,{children:["We can see that when we moved the ",(0,a.jsx)(s.code,{children:"player"})," class, we also included its styling declarations. This might cause additional work in the future when trying to customize this class from the outside."]}),"\n",(0,a.jsx)(s.admonition,{title:"base style recommendation",type:"tip",children:(0,a.jsxs)(s.p,{children:["Stylable recommends that a component's stylesheet include minimal styling - only what is crucial for the functionality of the component or defines its structure. To follow this best practice, we need a way to import the ",(0,a.jsx)(s.code,{children:"player.st.css"})," stylesheet over to ",(0,a.jsx)(s.code,{children:"game.st.css"}),", and perform our styling customizations there."]})}),"\n",(0,a.jsx)(s.h2,{id:"default-import",children:"Default import"}),"\n",(0,a.jsxs)(s.p,{children:["Keep in mind that, as we saw earlier in the ",(0,a.jsx)(s.a,{href:"/docs/guides/handbook/namespacing#supported-symbols",children:"Namespacing chapter"}),", classes in Stylable are automatically namespaced. This means that if we wish to target a class from another stylesheet in a selector, we need to import it to link to it."]}),"\n",(0,a.jsxs)(s.p,{children:["Below, we import the ",(0,a.jsx)(s.code,{children:"player.st.css"})," stylesheet and customize it by using the ",(0,a.jsx)(s.code,{children:"@st-import"})," at-rule, and providing it with a ",(0,a.jsx)(s.strong,{children:"local name"})," for the default export (beginning with a capital letter) and a ",(0,a.jsx)(s.strong,{children:"request"})," to the target stylesheet. Then we move any customizations out of ",(0,a.jsx)(s.code,{children:"player.st.css"})," into ",(0,a.jsx)(s.code,{children:"game.st.css"}),"."]}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css - moved player customization"',children:'@st-import Player from "./player.st.css";\n\n.board { /* ... */ }\n\nPlayer {\n background: blue; /* moved from player.st.css */\n}\n'})}),"\n",(0,a.jsxs)(t,{children:[(0,a.jsx)("summary",{children:(0,a.jsx)(s.p,{children:"Namespacing output"})}),(0,a.jsx)(o.A,{title:"game.st.css",language:"css",children:'@st-import Player from "./player.st.css"; \n\n/* namespaced locally */\n.game__board { /* ... */ } \n\n/* namespaced by player.st.css */\n.player__root { \nbackground: blue;\n}'})]}),"\n","\n",(0,a.jsx)(s.h3,{id:"stylesheet-root-selector",children:"Stylesheet root selector"}),"\n",(0,a.jsxs)(s.p,{children:["It's important to note that a default import of a Stylable stylesheet represents a component root, and is in fact pointing to the ",(0,a.jsx)(s.code,{children:"root"})," class of that stylesheet."]}),"\n",(0,a.jsxs)(s.admonition,{title:"Unscoped warning",type:"caution",children:[(0,a.jsxs)(s.p,{children:["By importing the default export of a stylesheet and then styling it, we are potentially customizing every instance of the component across our project. It is therefore ",(0,a.jsx)(s.strong,{children:"strongly recommended"})," to scope any selector that originates from a different namespace (stylesheet) or includes native elements with a local class."]}),(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",children:'@st-import Player from "./player.st.css";\n\n/* report unscoped warnings */\nPlayer {}\ndiv {}\n\n/* no warnings */\n.root Player {}\n.root div {}\n'})})]}),"\n",(0,a.jsx)(s.h2,{id:"class-named-import",children:"Class named import"}),"\n",(0,a.jsxs)(s.p,{children:["For the next step, we would like to add ",(0,a.jsx)(s.code,{children:"avatar"})," and ",(0,a.jsx)(s.code,{children:"username"})," parts to ",(0,a.jsx)(s.code,{children:"player.st.css"}),". These will be applied to the inner elements of the component, and are assumed to be nested under the ",(0,a.jsx)(s.code,{children:"root"})," class."]}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="player.st.css - added avatar and username"',children:".root {\n -st-states: registered,\n ranking(enum(first, second, third));\n}\n.avatar {}\n.username {}\n"})}),"\n","\n",(0,a.jsx)(s.p,{children:"We then proceed to bind these new classes to their matching elements in the component."}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-jsx",metastring:'title="player.jsx - bind avatar and username"',children:'import { st, classes } from "./player.st.css";\n\nconst Player = ({ className }) => {\n return (\n <div className={st(classes.root, { /* states */ }, className)}>\n <image className={classes.avatar} />\n <span className={classes.username}></span>\n </div>\n )\n}\n'})}),"\n","\n",(0,a.jsxs)(s.p,{children:["Now that we have these new classes, we can customize them externally through ",(0,a.jsx)(s.code,{children:"game.st.css"}),". We do this by adding two ",(0,a.jsx)(s.code,{children:"named imports"}),", inside square brackets, that link to our classes."]}),"\n","\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css - player customization"',children:'@st-import Player, [avatar, username] from "./player.st.css";\n\nPlayer {\n /* paint the Player component background blue */\n background: blue;\n}\nPlayer .avatar {\n /* circle avatar */\n border-radius: 50%;\n}\nPlayer .username {\n /* all caps username */\n text-transform: uppercase;\n}\n'})}),"\n",(0,a.jsxs)(t,{children:[(0,a.jsx)("summary",{children:(0,a.jsx)(s.p,{children:"Namespacing output - selectors only"})}),(0,a.jsx)(o.A,{title:"game.st.css",language:"css",children:'@st-import Player, [avatar, username] from "./player.st.css"; \n\n.player__root {}\n.player__root .player__avatar {}\n.player__root .player__username {}'})]}),"\n","\n",(0,a.jsx)(s.h3,{id:"validations",children:"Validations"}),"\n",(0,a.jsx)(s.p,{children:"One of the nice things that we gain by using these Stylable imports is that requested symbols are validated, and we'll be notified if any of the imported parts are not found."}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-css",metastring:'title="game.st.css - missing import"',children:'/* report an error about an unknown "missingImport" symbol */\n@st-import [missingImport] from "./player.st.css";\n'})}),"\n",(0,a.jsx)(s.h3,{id:"exported-by-default",children:"Exported by default"}),"\n",(0,a.jsx)(s.p,{children:"Any classes and other symbols defined in a stylesheet are automatically exported and available for import."}),"\n",(0,a.jsx)(s.admonition,{title:"Explicit exports",type:"note",children:(0,a.jsxs)(s.p,{children:["We are in the process of developing ",(0,a.jsx)(s.a,{href:"https://github.com/wix/stylable/issues/2604",children:"explicit export support"}),", and will expand this section once available."]})}),"\n",(0,a.jsx)(s.h2,{id:"further-import-use-cases",children:"Further import use-cases"}),"\n",(0,a.jsx)(s.p,{children:"Up to this point, we've only needed to import classes between stylesheets. In later chapters of this guide, we will learn how to import and use additional symbols, as well as additional import use cases from JavaScript to our stylesheet."}),"\n",(0,a.jsxs)(s.p,{children:["Check out the API cheatsheet to see various ",(0,a.jsx)(s.a,{href:"../../references/cheatsheet#module-system",children:"@st-import"})," examples."]}),"\n",(0,a.jsx)(s.hr,{}),"\n",(0,a.jsx)(s.p,{children:"In this chapter, we've seen how to divide a stylesheet to separate modules, and how to customize those externally. We approached doing this by manually importing each class (default or named), and customizing them together using a selector."}),"\n",(0,a.jsxs)(s.p,{children:["In the ",(0,a.jsx)(s.a,{href:"./extend",children:"Next chapter"}),", we'll learn how Stylable can extend stylesheets, exposing their inner parts as an API to make our lives easier."]})]})}function p(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(h,{...e})}):h(e)}}}]); \ No newline at end of file diff --git a/assets/js/ccc49370.a152809e.js b/assets/js/ccc49370.78db7b43.js similarity index 84% rename from assets/js/ccc49370.a152809e.js rename to assets/js/ccc49370.78db7b43.js index 09cc3477..22867deb 100644 --- a/assets/js/ccc49370.a152809e.js +++ b/assets/js/ccc49370.78db7b43.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[3249],{1917:(e,t,n)=>{n.r(t),n.d(t,{default:()=>b});n(6540);var i=n(4164),a=n(6644),s=n(8630),r=n(9101),l=n(6953),o=n(8406),c=n(3230),d=n(3555),u=n(4848);function m(e){const{nextItem:t,prevItem:n}=e;return(0,u.jsxs)("nav",{className:"pagination-nav docusaurus-mt-lg","aria-label":(0,c.T)({id:"theme.blog.post.paginator.navAriaLabel",message:"Blog post page navigation",description:"The ARIA label for the blog posts pagination"}),children:[n&&(0,u.jsx)(d.A,{...n,subLabel:(0,u.jsx)(c.A,{id:"theme.blog.post.paginator.newerPost",description:"The blog post button label to navigate to the newer/previous post",children:"Newer post"})}),t&&(0,u.jsx)(d.A,{...t,subLabel:(0,u.jsx)(c.A,{id:"theme.blog.post.paginator.olderPost",description:"The blog post button label to navigate to the older/next post",children:"Older post"}),isNext:!0})]})}function h(){const{assets:e,metadata:t}=(0,r.e7)(),{title:n,description:i,date:s,tags:l,authors:o,frontMatter:c}=t,{keywords:d}=c,m=e.image??c.image;return(0,u.jsxs)(a.be,{title:c.title_meta??n,description:i,keywords:d,image:m,children:[(0,u.jsx)("meta",{property:"og:type",content:"article"}),(0,u.jsx)("meta",{property:"article:published_time",content:s}),o.some((e=>e.url))&&(0,u.jsx)("meta",{property:"article:author",content:o.map((e=>e.url)).filter(Boolean).join(",")}),l.length>0&&(0,u.jsx)("meta",{property:"article:tag",content:l.map((e=>e.label)).join(",")})]})}var f=n(1141);function g(){const e=(0,r.J_)();return(0,u.jsx)(f.A,{children:(0,u.jsx)("script",{type:"application/ld+json",children:JSON.stringify(e)})})}var p=n(8793),v=n(4648);function x(e){let{sidebar:t,children:n}=e;const{metadata:i,toc:a}=(0,r.e7)(),{nextItem:s,prevItem:c,frontMatter:d}=i,{hide_table_of_contents:h,toc_min_heading_level:f,toc_max_heading_level:g}=d;return(0,u.jsxs)(l.A,{sidebar:t,toc:!h&&a.length>0?(0,u.jsx)(p.A,{toc:a,minHeadingLevel:f,maxHeadingLevel:g}):void 0,children:[(0,u.jsx)(v.A,{metadata:i}),(0,u.jsx)(o.A,{children:n}),(s||c)&&(0,u.jsx)(m,{nextItem:s,prevItem:c})]})}function b(e){const t=e.content;return(0,u.jsx)(r.in,{content:e.content,isBlogPostPage:!0,children:(0,u.jsxs)(a.e3,{className:(0,i.A)(s.G.wrapper.blogPages,s.G.page.blogPostPage),children:[(0,u.jsx)(h,{}),(0,u.jsx)(g,{}),(0,u.jsx)(x,{sidebar:e.sidebar,children:(0,u.jsx)(t,{})})]})})}},8811:(e,t,n)=>{n.d(t,{A:()=>c});n(6540);var i=n(4164),a=n(6907),s=n(8630),r=n(4182),l=n(4848);function o(e){let{className:t}=e;return(0,l.jsx)(r.A,{type:"caution",title:(0,l.jsx)(a.Rc,{}),className:(0,i.A)(t,s.G.common.unlistedBanner),children:(0,l.jsx)(a.Uh,{})})}function c(e){return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(a.AE,{}),(0,l.jsx)(o,{...e})]})}},4648:(e,t,n)=>{n.d(t,{A:()=>d});n(6540);var i=n(4164),a=n(6907),s=n(8630),r=n(4182),l=n(4848);function o(e){let{className:t}=e;return(0,l.jsx)(r.A,{type:"caution",title:(0,l.jsx)(a.Yh,{}),className:(0,i.A)(t,s.G.common.draftBanner),children:(0,l.jsx)(a.TT,{})})}var c=n(8811);function d(e){let{metadata:t}=e;const{unlisted:n,frontMatter:i}=t;return(0,l.jsxs)(l.Fragment,{children:[(n||i.unlisted)&&(0,l.jsx)(c.A,{}),i.draft&&(0,l.jsx)(o,{})]})}},8793:(e,t,n)=>{n.d(t,{A:()=>c});n(6540);var i=n(4164),a=n(1507);const s={tableOfContents:"tableOfContents_bqdL",docItemContainer:"docItemContainer_F8PC"};var r=n(4848);const l="table-of-contents__link toc-highlight",o="table-of-contents__link--active";function c(e){let{className:t,...n}=e;return(0,r.jsx)("div",{className:(0,i.A)(s.tableOfContents,"thin-scrollbar",t),children:(0,r.jsx)(a.A,{...n,linkClassName:l,linkActiveClassName:o})})}},1507:(e,t,n)=>{n.d(t,{A:()=>g});var i=n(6540),a=n(6957);function s(e){const t=e.map((e=>({...e,parentIndex:-1,children:[]}))),n=Array(7).fill(-1);t.forEach(((e,t)=>{const i=n.slice(2,e.level);e.parentIndex=Math.max(...i),n[e.level]=t}));const i=[];return t.forEach((e=>{const{parentIndex:n,...a}=e;n>=0?t[n].children.push(a):i.push(a)})),i}function r(e){let{toc:t,minHeadingLevel:n,maxHeadingLevel:i}=e;return t.flatMap((e=>{const t=r({toc:e.children,minHeadingLevel:n,maxHeadingLevel:i});return function(e){return e.level>=n&&e.level<=i}(e)?[{...e,children:t}]:t}))}function l(e){const t=e.getBoundingClientRect();return t.top===t.bottom?l(e.parentNode):t}function o(e,t){let{anchorTopOffset:n}=t;const i=e.find((e=>l(e).top>=n));if(i){return function(e){return e.top>0&&e.bottom<window.innerHeight/2}(l(i))?i:e[e.indexOf(i)-1]??null}return e[e.length-1]??null}function c(){const e=(0,i.useRef)(0),{navbar:{hideOnScroll:t}}=(0,a.p)();return(0,i.useEffect)((()=>{e.current=t?0:document.querySelector(".navbar").clientHeight}),[t]),e}function d(e){const t=(0,i.useRef)(void 0),n=c();(0,i.useEffect)((()=>{if(!e)return()=>{};const{linkClassName:i,linkActiveClassName:a,minHeadingLevel:s,maxHeadingLevel:r}=e;function l(){const e=function(e){return Array.from(document.getElementsByClassName(e))}(i),l=function(e){let{minHeadingLevel:t,maxHeadingLevel:n}=e;const i=[];for(let a=t;a<=n;a+=1)i.push(`h${a}.anchor`);return Array.from(document.querySelectorAll(i.join()))}({minHeadingLevel:s,maxHeadingLevel:r}),c=o(l,{anchorTopOffset:n.current}),d=e.find((e=>c&&c.id===function(e){return decodeURIComponent(e.href.substring(e.href.indexOf("#")+1))}(e)));e.forEach((e=>{!function(e,n){n?(t.current&&t.current!==e&&t.current.classList.remove(a),e.classList.add(a),t.current=e):e.classList.remove(a)}(e,e===d)}))}return document.addEventListener("scroll",l),document.addEventListener("resize",l),l(),()=>{document.removeEventListener("scroll",l),document.removeEventListener("resize",l)}}),[e,n])}var u=n(4783),m=n(4848);function h(e){let{toc:t,className:n,linkClassName:i,isChild:a}=e;return t.length?(0,m.jsx)("ul",{className:a?void 0:n,children:t.map((e=>(0,m.jsxs)("li",{children:[(0,m.jsx)(u.A,{to:`#${e.id}`,className:i??void 0,dangerouslySetInnerHTML:{__html:e.value}}),(0,m.jsx)(h,{isChild:!0,toc:e.children,className:n,linkClassName:i})]},e.id)))}):null}const f=i.memo(h);function g(e){let{toc:t,className:n="table-of-contents table-of-contents__left-border",linkClassName:l="table-of-contents__link",linkActiveClassName:o,minHeadingLevel:c,maxHeadingLevel:u,...h}=e;const g=(0,a.p)(),p=c??g.tableOfContents.minHeadingLevel,v=u??g.tableOfContents.maxHeadingLevel,x=function(e){let{toc:t,minHeadingLevel:n,maxHeadingLevel:a}=e;return(0,i.useMemo)((()=>r({toc:s(t),minHeadingLevel:n,maxHeadingLevel:a})),[t,n,a])}({toc:t,minHeadingLevel:p,maxHeadingLevel:v});return d((0,i.useMemo)((()=>{if(l&&o)return{linkClassName:l,linkActiveClassName:o,minHeadingLevel:p,maxHeadingLevel:v}}),[l,o,p,v])),(0,m.jsx)(f,{toc:x,className:n,linkClassName:l,...h})}},6907:(e,t,n)=>{n.d(t,{AE:()=>o,Rc:()=>r,TT:()=>d,Uh:()=>l,Yh:()=>c});n(6540);var i=n(3230),a=n(1141),s=n(4848);function r(){return(0,s.jsx)(i.A,{id:"theme.contentVisibility.unlistedBanner.title",description:"The unlisted content banner title",children:"Unlisted page"})}function l(){return(0,s.jsx)(i.A,{id:"theme.contentVisibility.unlistedBanner.message",description:"The unlisted content banner message",children:"This page is unlisted. Search engines will not index it, and only users having a direct link can access it."})}function o(){return(0,s.jsx)(a.A,{children:(0,s.jsx)("meta",{name:"robots",content:"noindex, nofollow"})})}function c(){return(0,s.jsx)(i.A,{id:"theme.contentVisibility.draftBanner.title",description:"The draft content banner title",children:"Draft page"})}function d(){return(0,s.jsx)(i.A,{id:"theme.contentVisibility.draftBanner.message",description:"The draft content banner message",children:"This page is a draft. It will only be visible in dev and be excluded from the production build."})}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[3249],{3858:(e,t,n)=>{n.r(t),n.d(t,{default:()=>b});n(6540);var i=n(4164),a=n(1213),s=n(7559),r=n(4096),l=n(8027),o=n(4387),c=n(1312),d=n(9022),u=n(4848);function m(e){const{nextItem:t,prevItem:n}=e;return(0,u.jsxs)("nav",{className:"pagination-nav docusaurus-mt-lg","aria-label":(0,c.T)({id:"theme.blog.post.paginator.navAriaLabel",message:"Blog post page navigation",description:"The ARIA label for the blog posts pagination"}),children:[n&&(0,u.jsx)(d.A,{...n,subLabel:(0,u.jsx)(c.A,{id:"theme.blog.post.paginator.newerPost",description:"The blog post button label to navigate to the newer/previous post",children:"Newer post"})}),t&&(0,u.jsx)(d.A,{...t,subLabel:(0,u.jsx)(c.A,{id:"theme.blog.post.paginator.olderPost",description:"The blog post button label to navigate to the older/next post",children:"Older post"}),isNext:!0})]})}function h(){const{assets:e,metadata:t}=(0,r.e7)(),{title:n,description:i,date:s,tags:l,authors:o,frontMatter:c}=t,{keywords:d}=c,m=e.image??c.image;return(0,u.jsxs)(a.be,{title:c.title_meta??n,description:i,keywords:d,image:m,children:[(0,u.jsx)("meta",{property:"og:type",content:"article"}),(0,u.jsx)("meta",{property:"article:published_time",content:s}),o.some((e=>e.url))&&(0,u.jsx)("meta",{property:"article:author",content:o.map((e=>e.url)).filter(Boolean).join(",")}),l.length>0&&(0,u.jsx)("meta",{property:"article:tag",content:l.map((e=>e.label)).join(",")})]})}var f=n(5260);function g(){const e=(0,r.J_)();return(0,u.jsx)(f.A,{children:(0,u.jsx)("script",{type:"application/ld+json",children:JSON.stringify(e)})})}var p=n(7763),v=n(1689);function x(e){let{sidebar:t,children:n}=e;const{metadata:i,toc:a}=(0,r.e7)(),{nextItem:s,prevItem:c,frontMatter:d}=i,{hide_table_of_contents:h,toc_min_heading_level:f,toc_max_heading_level:g}=d;return(0,u.jsxs)(l.A,{sidebar:t,toc:!h&&a.length>0?(0,u.jsx)(p.A,{toc:a,minHeadingLevel:f,maxHeadingLevel:g}):void 0,children:[(0,u.jsx)(v.A,{metadata:i}),(0,u.jsx)(o.A,{children:n}),(s||c)&&(0,u.jsx)(m,{nextItem:s,prevItem:c})]})}function b(e){const t=e.content;return(0,u.jsx)(r.in,{content:e.content,isBlogPostPage:!0,children:(0,u.jsxs)(a.e3,{className:(0,i.A)(s.G.wrapper.blogPages,s.G.page.blogPostPage),children:[(0,u.jsx)(h,{}),(0,u.jsx)(g,{}),(0,u.jsx)(x,{sidebar:e.sidebar,children:(0,u.jsx)(t,{})})]})})}},2234:(e,t,n)=>{n.d(t,{A:()=>c});n(6540);var i=n(4164),a=n(4084),s=n(7559),r=n(7293),l=n(4848);function o(e){let{className:t}=e;return(0,l.jsx)(r.A,{type:"caution",title:(0,l.jsx)(a.Rc,{}),className:(0,i.A)(t,s.G.common.unlistedBanner),children:(0,l.jsx)(a.Uh,{})})}function c(e){return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(a.AE,{}),(0,l.jsx)(o,{...e})]})}},1689:(e,t,n)=>{n.d(t,{A:()=>d});n(6540);var i=n(4164),a=n(4084),s=n(7559),r=n(7293),l=n(4848);function o(e){let{className:t}=e;return(0,l.jsx)(r.A,{type:"caution",title:(0,l.jsx)(a.Yh,{}),className:(0,i.A)(t,s.G.common.draftBanner),children:(0,l.jsx)(a.TT,{})})}var c=n(2234);function d(e){let{metadata:t}=e;const{unlisted:n,frontMatter:i}=t;return(0,l.jsxs)(l.Fragment,{children:[(n||i.unlisted)&&(0,l.jsx)(c.A,{}),i.draft&&(0,l.jsx)(o,{})]})}},7763:(e,t,n)=>{n.d(t,{A:()=>c});n(6540);var i=n(4164),a=n(5195);const s={tableOfContents:"tableOfContents_bqdL",docItemContainer:"docItemContainer_F8PC"};var r=n(4848);const l="table-of-contents__link toc-highlight",o="table-of-contents__link--active";function c(e){let{className:t,...n}=e;return(0,r.jsx)("div",{className:(0,i.A)(s.tableOfContents,"thin-scrollbar",t),children:(0,r.jsx)(a.A,{...n,linkClassName:l,linkActiveClassName:o})})}},5195:(e,t,n)=>{n.d(t,{A:()=>g});var i=n(6540),a=n(6342);function s(e){const t=e.map((e=>({...e,parentIndex:-1,children:[]}))),n=Array(7).fill(-1);t.forEach(((e,t)=>{const i=n.slice(2,e.level);e.parentIndex=Math.max(...i),n[e.level]=t}));const i=[];return t.forEach((e=>{const{parentIndex:n,...a}=e;n>=0?t[n].children.push(a):i.push(a)})),i}function r(e){let{toc:t,minHeadingLevel:n,maxHeadingLevel:i}=e;return t.flatMap((e=>{const t=r({toc:e.children,minHeadingLevel:n,maxHeadingLevel:i});return function(e){return e.level>=n&&e.level<=i}(e)?[{...e,children:t}]:t}))}function l(e){const t=e.getBoundingClientRect();return t.top===t.bottom?l(e.parentNode):t}function o(e,t){let{anchorTopOffset:n}=t;const i=e.find((e=>l(e).top>=n));if(i){return function(e){return e.top>0&&e.bottom<window.innerHeight/2}(l(i))?i:e[e.indexOf(i)-1]??null}return e[e.length-1]??null}function c(){const e=(0,i.useRef)(0),{navbar:{hideOnScroll:t}}=(0,a.p)();return(0,i.useEffect)((()=>{e.current=t?0:document.querySelector(".navbar").clientHeight}),[t]),e}function d(e){const t=(0,i.useRef)(void 0),n=c();(0,i.useEffect)((()=>{if(!e)return()=>{};const{linkClassName:i,linkActiveClassName:a,minHeadingLevel:s,maxHeadingLevel:r}=e;function l(){const e=function(e){return Array.from(document.getElementsByClassName(e))}(i),l=function(e){let{minHeadingLevel:t,maxHeadingLevel:n}=e;const i=[];for(let a=t;a<=n;a+=1)i.push(`h${a}.anchor`);return Array.from(document.querySelectorAll(i.join()))}({minHeadingLevel:s,maxHeadingLevel:r}),c=o(l,{anchorTopOffset:n.current}),d=e.find((e=>c&&c.id===function(e){return decodeURIComponent(e.href.substring(e.href.indexOf("#")+1))}(e)));e.forEach((e=>{!function(e,n){n?(t.current&&t.current!==e&&t.current.classList.remove(a),e.classList.add(a),t.current=e):e.classList.remove(a)}(e,e===d)}))}return document.addEventListener("scroll",l),document.addEventListener("resize",l),l(),()=>{document.removeEventListener("scroll",l),document.removeEventListener("resize",l)}}),[e,n])}var u=n(8774),m=n(4848);function h(e){let{toc:t,className:n,linkClassName:i,isChild:a}=e;return t.length?(0,m.jsx)("ul",{className:a?void 0:n,children:t.map((e=>(0,m.jsxs)("li",{children:[(0,m.jsx)(u.A,{to:`#${e.id}`,className:i??void 0,dangerouslySetInnerHTML:{__html:e.value}}),(0,m.jsx)(h,{isChild:!0,toc:e.children,className:n,linkClassName:i})]},e.id)))}):null}const f=i.memo(h);function g(e){let{toc:t,className:n="table-of-contents table-of-contents__left-border",linkClassName:l="table-of-contents__link",linkActiveClassName:o,minHeadingLevel:c,maxHeadingLevel:u,...h}=e;const g=(0,a.p)(),p=c??g.tableOfContents.minHeadingLevel,v=u??g.tableOfContents.maxHeadingLevel,x=function(e){let{toc:t,minHeadingLevel:n,maxHeadingLevel:a}=e;return(0,i.useMemo)((()=>r({toc:s(t),minHeadingLevel:n,maxHeadingLevel:a})),[t,n,a])}({toc:t,minHeadingLevel:p,maxHeadingLevel:v});return d((0,i.useMemo)((()=>{if(l&&o)return{linkClassName:l,linkActiveClassName:o,minHeadingLevel:p,maxHeadingLevel:v}}),[l,o,p,v])),(0,m.jsx)(f,{toc:x,className:n,linkClassName:l,...h})}},4084:(e,t,n)=>{n.d(t,{AE:()=>o,Rc:()=>r,TT:()=>d,Uh:()=>l,Yh:()=>c});n(6540);var i=n(1312),a=n(5260),s=n(4848);function r(){return(0,s.jsx)(i.A,{id:"theme.contentVisibility.unlistedBanner.title",description:"The unlisted content banner title",children:"Unlisted page"})}function l(){return(0,s.jsx)(i.A,{id:"theme.contentVisibility.unlistedBanner.message",description:"The unlisted content banner message",children:"This page is unlisted. Search engines will not index it, and only users having a direct link can access it."})}function o(){return(0,s.jsx)(a.A,{children:(0,s.jsx)("meta",{name:"robots",content:"noindex, nofollow"})})}function c(){return(0,s.jsx)(i.A,{id:"theme.contentVisibility.draftBanner.title",description:"The draft content banner title",children:"Draft page"})}function d(){return(0,s.jsx)(i.A,{id:"theme.contentVisibility.draftBanner.message",description:"The draft content banner message",children:"This page is a draft. It will only be visible in dev and be excluded from the production build."})}}}]); \ No newline at end of file diff --git a/assets/js/d879f3fa.e5bcb76a.js b/assets/js/d879f3fa.491194ca.js similarity index 99% rename from assets/js/d879f3fa.e5bcb76a.js rename to assets/js/d879f3fa.491194ca.js index 9299595a..d7f7a42f 100644 --- a/assets/js/d879f3fa.e5bcb76a.js +++ b/assets/js/d879f3fa.491194ca.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[7381],{6054:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>o,contentTitle:()=>i,default:()=>h,frontMatter:()=>l,metadata:()=>r,toc:()=>c});const r=JSON.parse('{"id":"references/layer","title":"Layer","description":"In CSS, @layer provides a way to group rules together in order to override other rules for better control of the styling order.","source":"@site/docs/references/layer.md","sourceDirName":"references","slug":"/references/layer","permalink":"/docs/references/layer","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/layer.md","tags":[],"version":"current","frontMatter":{"id":"layer","title":"Layer"},"sidebar":"Specification Reference","previous":{"title":"Keyframes","permalink":"/docs/references/keyframes"},"next":{"title":"Pseudo-Class","permalink":"/docs/references/pseudo-classes"}}');var a=s(4848),t=s(8453);const l={id:"layer",title:"Layer"},i=void 0,o={},c=[{value:"Syntax",id:"syntax",level:2},{value:"Import and Export",id:"import-and-export",level:2},{value:"Native CSS import",id:"native-css-import",level:3},{value:"Runtime",id:"runtime",level:2},{value:"Namespace",id:"namespace",level:2},{value:"Disable namespace",id:"disable-namespace",level:3}];function d(e){const n={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,t.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(n.p,{children:["In CSS, ",(0,a.jsx)(n.code,{children:"@layer"})," provides a way to group rules together in order to override other rules for better control of the styling order."]}),"\n",(0,a.jsxs)(n.p,{children:["This page goes over how Stylable handles ",(0,a.jsx)(n.code,{children:"@layer"}),", for more details about the language feature itself, check out the following resources:"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@layer",children:"MDN @layer"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/",children:"The Future of CSS: Cascade Layers by Bramus"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://drafts.csswg.org/css-cascade-5/#layering",children:"CSS cascade spec"})}),"\n"]}),"\n",(0,a.jsx)(n.h2,{id:"syntax",children:"Syntax"}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"Layer order definition"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"@layer base, layout, theme;\n"})}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"Layer style definition"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"@layer theme {\n /* layer style rules */\n}\n"})}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"Nested style definition"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"@layer theme {\n @layer app {\n /* layer style rules */\n }\n}\n\n/* equivalent to */\n\n@layer theme.app {\n /* layer style rules */\n}\n"})}),"\n",(0,a.jsx)(n.h2,{id:"import-and-export",children:"Import and Export"}),"\n",(0,a.jsxs)(n.p,{children:["An exported layer definition can be imported into another stylesheet with the ",(0,a.jsx)(n.a,{href:"/docs/references/imports",children:(0,a.jsx)(n.code,{children:"@st-import"})})," atrule."]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"Insert rules into imported layer"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"/* get base layer definition from another stylesheet */\n@st-import [layer(base)] from './x.st.css';\n\n/* insert rules into layer */\n@layer base {\n /* layer style rules */\n}\n"})}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"More import examples"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"/* map 'base' layer to local name 'x-base' */\n@st-import [layer(base as x-base)] from './x.st.css';\n\n/* import multiple layers */\n@st-import [layer(layerA, layerB)] from './x.st.css';\n"})}),"\n",(0,a.jsx)(n.h3,{id:"native-css-import",children:"Native CSS import"}),"\n",(0,a.jsxs)(n.p,{children:["CSS native ",(0,a.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@import",children:(0,a.jsx)(n.code,{children:"@import"})})," can be used to import a stylesheet into a layer:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"/* import the content of 'other.css' in the base layer */\n@import url(./x.css) layer(base);\n"})}),"\n",(0,a.jsx)(n.admonition,{type:"caution",children:(0,a.jsx)(n.p,{children:"While Stylable collects and namespaces layer definitions from native CSS imports, it does not handle bundling of them at current time, and they are not recommended for use."})}),"\n",(0,a.jsx)(n.h2,{id:"runtime",children:"Runtime"}),"\n",(0,a.jsxs)(n.p,{children:["A layer can be accessed for dynamic styles using the ",(0,a.jsx)(n.code,{children:"layers"})," mapping on the ",(0,a.jsx)(n.strong,{children:"Stylable"})," runtime stylesheet:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { layers } from './sheet.st.css';\n\n// map to target namespaced layer\nlayers['layer-name'];\n"})}),"\n",(0,a.jsx)(n.h2,{id:"namespace",children:"Namespace"}),"\n",(0,a.jsx)(n.p,{children:"Stylable automatically namespaces any layer name according to the stylesheet it is defined in:"}),"\n",(0,a.jsx)(n.p,{children:"Source:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"@layer base, layout, theme;\n"})}),"\n",(0,a.jsx)(n.p,{children:"Output:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"@layer ns__base, ns__layout, ns__theme;\n"})}),"\n",(0,a.jsx)(n.h3,{id:"disable-namespace",children:"Disable namespace"}),"\n",(0,a.jsxs)(n.p,{children:["In some cases the default namespace behavior is unwanted, for example when a layer is external and not defined or imported by Stylable. In such cases, ",(0,a.jsx)(n.code,{children:"st-global"})," can be used to mark a layer definition as global:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"/* keep the layer name as-is with no namespace */\n@layer st-global(external);\n"})}),"\n",(0,a.jsx)(n.p,{children:"Once a layer is marked as global, all references to that layer transpile to the un-namespaced name (nested or imported)."}),"\n",(0,a.jsxs)(n.blockquote,{children:["\n",(0,a.jsxs)(n.p,{children:["Notice that ",(0,a.jsx)(n.code,{children:"st-global"})," is not supported in nested definitions (e.g. ",(0,a.jsx)(n.code,{children:"a.st-global(external).c"}),") or native import (e.g. ",(0,a.jsx)(n.code,{children:"@import url() layer(st-global(external))"}),"), but marking the layer as global in a later definition will keep it global everywhere."]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>l,x:()=>i});var r=s(6540);const a={},t=r.createContext(a);function l(e){const n=r.useContext(t);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:l(e.components),r.createElement(t.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[7381],{8514:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>o,contentTitle:()=>i,default:()=>h,frontMatter:()=>l,metadata:()=>r,toc:()=>c});const r=JSON.parse('{"id":"references/layer","title":"Layer","description":"In CSS, @layer provides a way to group rules together in order to override other rules for better control of the styling order.","source":"@site/docs/references/layer.md","sourceDirName":"references","slug":"/references/layer","permalink":"/docs/references/layer","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/layer.md","tags":[],"version":"current","frontMatter":{"id":"layer","title":"Layer"},"sidebar":"Specification Reference","previous":{"title":"Keyframes","permalink":"/docs/references/keyframes"},"next":{"title":"Pseudo-Class","permalink":"/docs/references/pseudo-classes"}}');var a=s(4848),t=s(8453);const l={id:"layer",title:"Layer"},i=void 0,o={},c=[{value:"Syntax",id:"syntax",level:2},{value:"Import and Export",id:"import-and-export",level:2},{value:"Native CSS import",id:"native-css-import",level:3},{value:"Runtime",id:"runtime",level:2},{value:"Namespace",id:"namespace",level:2},{value:"Disable namespace",id:"disable-namespace",level:3}];function d(e){const n={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,t.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(n.p,{children:["In CSS, ",(0,a.jsx)(n.code,{children:"@layer"})," provides a way to group rules together in order to override other rules for better control of the styling order."]}),"\n",(0,a.jsxs)(n.p,{children:["This page goes over how Stylable handles ",(0,a.jsx)(n.code,{children:"@layer"}),", for more details about the language feature itself, check out the following resources:"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@layer",children:"MDN @layer"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/",children:"The Future of CSS: Cascade Layers by Bramus"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://drafts.csswg.org/css-cascade-5/#layering",children:"CSS cascade spec"})}),"\n"]}),"\n",(0,a.jsx)(n.h2,{id:"syntax",children:"Syntax"}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"Layer order definition"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"@layer base, layout, theme;\n"})}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"Layer style definition"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"@layer theme {\n /* layer style rules */\n}\n"})}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"Nested style definition"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"@layer theme {\n @layer app {\n /* layer style rules */\n }\n}\n\n/* equivalent to */\n\n@layer theme.app {\n /* layer style rules */\n}\n"})}),"\n",(0,a.jsx)(n.h2,{id:"import-and-export",children:"Import and Export"}),"\n",(0,a.jsxs)(n.p,{children:["An exported layer definition can be imported into another stylesheet with the ",(0,a.jsx)(n.a,{href:"/docs/references/imports",children:(0,a.jsx)(n.code,{children:"@st-import"})})," atrule."]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"Insert rules into imported layer"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"/* get base layer definition from another stylesheet */\n@st-import [layer(base)] from './x.st.css';\n\n/* insert rules into layer */\n@layer base {\n /* layer style rules */\n}\n"})}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"More import examples"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"/* map 'base' layer to local name 'x-base' */\n@st-import [layer(base as x-base)] from './x.st.css';\n\n/* import multiple layers */\n@st-import [layer(layerA, layerB)] from './x.st.css';\n"})}),"\n",(0,a.jsx)(n.h3,{id:"native-css-import",children:"Native CSS import"}),"\n",(0,a.jsxs)(n.p,{children:["CSS native ",(0,a.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@import",children:(0,a.jsx)(n.code,{children:"@import"})})," can be used to import a stylesheet into a layer:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"/* import the content of 'other.css' in the base layer */\n@import url(./x.css) layer(base);\n"})}),"\n",(0,a.jsx)(n.admonition,{type:"caution",children:(0,a.jsx)(n.p,{children:"While Stylable collects and namespaces layer definitions from native CSS imports, it does not handle bundling of them at current time, and they are not recommended for use."})}),"\n",(0,a.jsx)(n.h2,{id:"runtime",children:"Runtime"}),"\n",(0,a.jsxs)(n.p,{children:["A layer can be accessed for dynamic styles using the ",(0,a.jsx)(n.code,{children:"layers"})," mapping on the ",(0,a.jsx)(n.strong,{children:"Stylable"})," runtime stylesheet:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { layers } from './sheet.st.css';\n\n// map to target namespaced layer\nlayers['layer-name'];\n"})}),"\n",(0,a.jsx)(n.h2,{id:"namespace",children:"Namespace"}),"\n",(0,a.jsx)(n.p,{children:"Stylable automatically namespaces any layer name according to the stylesheet it is defined in:"}),"\n",(0,a.jsx)(n.p,{children:"Source:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"@layer base, layout, theme;\n"})}),"\n",(0,a.jsx)(n.p,{children:"Output:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"@layer ns__base, ns__layout, ns__theme;\n"})}),"\n",(0,a.jsx)(n.h3,{id:"disable-namespace",children:"Disable namespace"}),"\n",(0,a.jsxs)(n.p,{children:["In some cases the default namespace behavior is unwanted, for example when a layer is external and not defined or imported by Stylable. In such cases, ",(0,a.jsx)(n.code,{children:"st-global"})," can be used to mark a layer definition as global:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"/* keep the layer name as-is with no namespace */\n@layer st-global(external);\n"})}),"\n",(0,a.jsx)(n.p,{children:"Once a layer is marked as global, all references to that layer transpile to the un-namespaced name (nested or imported)."}),"\n",(0,a.jsxs)(n.blockquote,{children:["\n",(0,a.jsxs)(n.p,{children:["Notice that ",(0,a.jsx)(n.code,{children:"st-global"})," is not supported in nested definitions (e.g. ",(0,a.jsx)(n.code,{children:"a.st-global(external).c"}),") or native import (e.g. ",(0,a.jsx)(n.code,{children:"@import url() layer(st-global(external))"}),"), but marking the layer as global in a later definition will keep it global everywhere."]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>l,x:()=>i});var r=s(6540);const a={},t=r.createContext(a);function l(e){const n=r.useContext(t);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:l(e.components),r.createElement(t.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/de106496.b8301a67.js b/assets/js/de106496.31074b54.js similarity index 98% rename from assets/js/de106496.b8301a67.js rename to assets/js/de106496.31074b54.js index adf4b6af..74ea2ad7 100644 --- a/assets/js/de106496.b8301a67.js +++ b/assets/js/de106496.31074b54.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[614],{6756:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>i,metadata:()=>r,toc:()=>c});const r=JSON.parse('{"id":"references/st-scope","title":"Scope","description":"Stylable scope enables you to wrap several style-rules using a single directive.","source":"@site/docs/references/st-scope.md","sourceDirName":"references","slug":"/references/st-scope","permalink":"/docs/references/st-scope","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/st-scope.md","tags":[],"version":"current","frontMatter":{"id":"st-scope","title":"Scope"},"sidebar":"Specification Reference","previous":{"title":"Root","permalink":"/docs/references/root"},"next":{"title":"Formatters","permalink":"/docs/references/formatters"}}');var s=t(4848),o=t(8453);const i={id:"st-scope",title:"Scope"},a=void 0,l={},c=[{value:"Syntax",id:"syntax",level:3},{value:"Theming with scope",id:"theming-with-scope",level:3},{value:"Creating a theme",id:"creating-a-theme",level:4},{value:"Extending a theme",id:"extending-a-theme",level:4},{value:"Theming with mixins",id:"theming-with-mixins",level:4}];function d(e){const n={code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"Stylable"})," scope enables you to wrap several style-rules using a single directive.\nThe scoping directive receives any valid Stylable selector to use for its scoping."]}),"\n",(0,s.jsx)(n.p,{children:"Stylable scoping directive is similar in its behavior to CSS nesting, but can only be applied to a single level."}),"\n",(0,s.jsx)(n.h3,{id:"syntax",children:"Syntax"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* entry.st.css */\n@st-scope .root {\n input {\n color: purple;\n }\n}\n"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* output */\n.entry__root input {\n color: purple;\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"theming-with-scope",children:"Theming with scope"}),"\n",(0,s.jsx)(n.p,{children:"There are many possible patterns that can be used to theme a site or application in CSS. Stylable scoping capability serves as syntax sugar to allow an easier theme implementation."}),"\n",(0,s.jsx)(n.p,{children:"Below are several examples for how theming can be done."}),"\n",(0,s.jsx)(n.h4,{id:"creating-a-theme",children:"Creating a theme"}),"\n",(0,s.jsx)(n.p,{children:"In this example, we're representing a dark theme as a stylesheet. Creating your overriding rules under that Stylesheet's symbol and apply it to the relevant part of your DOM."}),"\n",(0,s.jsx)(n.p,{children:"In this theme implementation we are targeting three components and overriding their default look."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:'/* dark-theme.st.css */\n@st-import App, [Button, DropDown] from "./index.st.css";\n\n@st-scope .root {\n App {\n border-color: darkgrey;\n }\n Button {\n background: darkgreen;\n }\n DropDown {\n background: darkgrey;\n color: beige;\n }\n}\n'})}),"\n",(0,s.jsx)(n.h4,{id:"extending-a-theme",children:"Extending a theme"}),"\n",(0,s.jsx)(n.p,{children:"In this example, we are extending our previously created dark theme, with a specific override for the Gallery component."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:'@st-import Gallery from "./gallery.st.css";\n@st-import DarkTheme from "./dark.st.css";\n\n@st-scope DarkTheme {\n DropDown {\n color: yellow; /* overriding DarkTheme color, perserving background */\n }\n Gallery {\n background: darkgrey;\n }\n}\n'})}),"\n",(0,s.jsx)(n.h4,{id:"theming-with-mixins",children:"Theming with mixins"}),"\n",(0,s.jsx)(n.p,{children:"In this file, we are creating pre-designed flavors that uses Stylable variables to determine their styling."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:'/* flavors.st.css */\n@st-import [Button, UserForm] from "./index.st.css";\n\n:vars {\n background: white;\n text: black;\n bordercolor: green;\n}\n\n.button-flavor {\n -st-extends: Button;\n background: value(background);\n color: value(text);\n}\n\n.userForm-flavor {\n -st-extends: UserForm;\n background: value(background);\n color: value(text);\n border: 1px solid value(borderColor);\n}\n'})}),"\n",(0,s.jsx)(n.p,{children:"In this example, we use our existing flavors from above to customize our components look under the dark theme."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:'@st-import [UserForm, Button] from "./index.st.css";\n@st-import [button-flavor, userForm-flavor] from "./flavors.st.css";\n\n@st-scope .root {\n Button {\n -st-mixin: button-flavor(background black, text white);\n }\n\n UserForm {\n -st-mixin: userForm-flavor(background black, text white, borderColor #f4f4f4);\n }\n}\n'})})]})}function p(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>a});var r=t(6540);const s={},o=r.createContext(s);function i(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[614],{4059:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>i,metadata:()=>r,toc:()=>c});const r=JSON.parse('{"id":"references/st-scope","title":"Scope","description":"Stylable scope enables you to wrap several style-rules using a single directive.","source":"@site/docs/references/st-scope.md","sourceDirName":"references","slug":"/references/st-scope","permalink":"/docs/references/st-scope","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/st-scope.md","tags":[],"version":"current","frontMatter":{"id":"st-scope","title":"Scope"},"sidebar":"Specification Reference","previous":{"title":"Root","permalink":"/docs/references/root"},"next":{"title":"Formatters","permalink":"/docs/references/formatters"}}');var s=t(4848),o=t(8453);const i={id:"st-scope",title:"Scope"},a=void 0,l={},c=[{value:"Syntax",id:"syntax",level:3},{value:"Theming with scope",id:"theming-with-scope",level:3},{value:"Creating a theme",id:"creating-a-theme",level:4},{value:"Extending a theme",id:"extending-a-theme",level:4},{value:"Theming with mixins",id:"theming-with-mixins",level:4}];function d(e){const n={code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"Stylable"})," scope enables you to wrap several style-rules using a single directive.\nThe scoping directive receives any valid Stylable selector to use for its scoping."]}),"\n",(0,s.jsx)(n.p,{children:"Stylable scoping directive is similar in its behavior to CSS nesting, but can only be applied to a single level."}),"\n",(0,s.jsx)(n.h3,{id:"syntax",children:"Syntax"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* entry.st.css */\n@st-scope .root {\n input {\n color: purple;\n }\n}\n"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* output */\n.entry__root input {\n color: purple;\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"theming-with-scope",children:"Theming with scope"}),"\n",(0,s.jsx)(n.p,{children:"There are many possible patterns that can be used to theme a site or application in CSS. Stylable scoping capability serves as syntax sugar to allow an easier theme implementation."}),"\n",(0,s.jsx)(n.p,{children:"Below are several examples for how theming can be done."}),"\n",(0,s.jsx)(n.h4,{id:"creating-a-theme",children:"Creating a theme"}),"\n",(0,s.jsx)(n.p,{children:"In this example, we're representing a dark theme as a stylesheet. Creating your overriding rules under that Stylesheet's symbol and apply it to the relevant part of your DOM."}),"\n",(0,s.jsx)(n.p,{children:"In this theme implementation we are targeting three components and overriding their default look."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:'/* dark-theme.st.css */\n@st-import App, [Button, DropDown] from "./index.st.css";\n\n@st-scope .root {\n App {\n border-color: darkgrey;\n }\n Button {\n background: darkgreen;\n }\n DropDown {\n background: darkgrey;\n color: beige;\n }\n}\n'})}),"\n",(0,s.jsx)(n.h4,{id:"extending-a-theme",children:"Extending a theme"}),"\n",(0,s.jsx)(n.p,{children:"In this example, we are extending our previously created dark theme, with a specific override for the Gallery component."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:'@st-import Gallery from "./gallery.st.css";\n@st-import DarkTheme from "./dark.st.css";\n\n@st-scope DarkTheme {\n DropDown {\n color: yellow; /* overriding DarkTheme color, perserving background */\n }\n Gallery {\n background: darkgrey;\n }\n}\n'})}),"\n",(0,s.jsx)(n.h4,{id:"theming-with-mixins",children:"Theming with mixins"}),"\n",(0,s.jsx)(n.p,{children:"In this file, we are creating pre-designed flavors that uses Stylable variables to determine their styling."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:'/* flavors.st.css */\n@st-import [Button, UserForm] from "./index.st.css";\n\n:vars {\n background: white;\n text: black;\n bordercolor: green;\n}\n\n.button-flavor {\n -st-extends: Button;\n background: value(background);\n color: value(text);\n}\n\n.userForm-flavor {\n -st-extends: UserForm;\n background: value(background);\n color: value(text);\n border: 1px solid value(borderColor);\n}\n'})}),"\n",(0,s.jsx)(n.p,{children:"In this example, we use our existing flavors from above to customize our components look under the dark theme."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:'@st-import [UserForm, Button] from "./index.st.css";\n@st-import [button-flavor, userForm-flavor] from "./flavors.st.css";\n\n@st-scope .root {\n Button {\n -st-mixin: button-flavor(background black, text white);\n }\n\n UserForm {\n -st-mixin: userForm-flavor(background black, text white, borderColor #f4f4f4);\n }\n}\n'})})]})}function p(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>a});var r=t(6540);const s={},o=r.createContext(s);function i(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/de714d10.9df8e645.js b/assets/js/de714d10.be755631.js similarity index 99% rename from assets/js/de714d10.9df8e645.js rename to assets/js/de714d10.be755631.js index 27056125..5e2b9f84 100644 --- a/assets/js/de714d10.9df8e645.js +++ b/assets/js/de714d10.be755631.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[4729],{7895:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>r,contentTitle:()=>a,default:()=>h,frontMatter:()=>l,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"guides/component-best-practices","title":"Stylable Component - Best Practices","description":"Stylable components should be easily stylable and themable from the outside. This means that the stylesheet describing the component CSS should be as simple and generic as possible, and should expose a clear and concise API for its internal parts.","source":"@site/docs/guides/component-best-practices.md","sourceDirName":"guides","slug":"/guides/component-best-practices","permalink":"/docs/guides/component-best-practices","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/component-best-practices.md","tags":[],"version":"current","frontMatter":{"id":"component-best-practices","title":"Stylable Component - Best Practices","sidebar_label":"Component Best Practices"},"sidebar":"Guides","previous":{"title":"Extend","permalink":"/docs/guides/handbook/extend"},"next":{"title":"Project Commons","permalink":"/docs/guides/project-commons"}}');var o=n(4848),i=n(8453);const l={id:"component-best-practices",title:"Stylable Component - Best Practices",sidebar_label:"Component Best Practices"},a=void 0,r={},c=[{value:"Avoid size declarations",id:"avoid-size-declarations",level:2},{value:"Give meaningful names",id:"give-meaningful-names",level:2},{value:"Avoid global settings in your stylesheet",id:"avoid-global-settings-in-your-stylesheet",level:2},{value:"Keep your layout minimal",id:"keep-your-layout-minimal",level:2},{value:"Keep coloring to a minimum",id:"keep-coloring-to-a-minimum",level:2},{value:"Keep browser defaults intact",id:"keep-browser-defaults-intact",level:2},{value:"Keep specificity low",id:"keep-specificity-low",level:2},{value:"Keep your selectors as simple as possible",id:"keep-your-selectors-as-simple-as-possible",level:2},{value:"Justify your CSS declarations in comments",id:"justify-your-css-declarations-in-comments",level:2},{value:"Use consistent variables from a central location",id:"use-consistent-variables-from-a-central-location",level:2},{value:"Keep SVG and images overridable",id:"keep-svg-and-images-overridable",level:2}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Stylable"})," components should be easily stylable and themable from the outside. This means that the stylesheet describing the component CSS should be as ",(0,o.jsx)(s.strong,{children:"simple"})," and ",(0,o.jsx)(s.strong,{children:"generic"})," as possible, and should expose a clear and concise API for its internal parts."]}),"\n",(0,o.jsxs)(s.p,{children:["When building your components, we recommend following the guidelines below that we've collected through our work with ",(0,o.jsx)(s.strong,{children:"Stylable"}),":"]}),"\n",(0,o.jsx)(s.h2,{id:"avoid-size-declarations",children:"Avoid size declarations"}),"\n",(0,o.jsx)(s.p,{children:"Try avoiding size declaration just because it offers an easier API. To override a component specifying size limitations, you would need to override multiple CSS declarations."}),"\n",(0,o.jsxs)(s.p,{children:["If you do set a default size or size limitations, use ",(0,o.jsx)(s.code,{children:"em/rem"})," units to resize to the HTML context."]}),"\n",(0,o.jsx)(s.h2,{id:"give-meaningful-names",children:"Give meaningful names"}),"\n",(0,o.jsxs)(s.p,{children:["Give meaningful class names that will make sense as part of a selector. Any CSS class selector can be targeted from the outside as a ",(0,o.jsx)(s.a,{href:"/docs/references/pseudo-elements",children:(0,o.jsx)(s.code,{children:"pseudo-element"})})," and should be considered part of the component API."]}),"\n",(0,o.jsx)(s.p,{children:"Use camelCase and avoid hyphens (-) and capital letters at the beginning."}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:"/* good */\nGallery::navbtn::label {\n} /* camelCase with clear pseudo-element names */\n"})}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:"/* bad */\nGallery::gallerynavbtn {\n} /* it is better to reuse the generic component id */\nGallery::nav-btn {\n} /* don't use kebab-case - stylable exports JS */\n"})}),"\n",(0,o.jsx)(s.h2,{id:"avoid-global-settings-in-your-stylesheet",children:"Avoid global settings in your stylesheet"}),"\n",(0,o.jsxs)(s.p,{children:["Try avoiding global-related selectors like ",(0,o.jsx)(s.code,{children:"@media"})," or matching DOM outside the component scope like ",(0,o.jsx)(s.code,{children:"body"}),". These would potentially cause side effects if others use them."]}),"\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.a,{href:"/docs/references/type-selectors",children:"Element type selectors"})," should be avoided inside a component because they affect any nested component or element. The exception to this is when specifically targeting the element with ",(0,o.jsx)(s.strong,{children:"child selector"})," (for example ",(0,o.jsx)(s.code,{children:".root > p"}),") and not a ",(0,o.jsx)(s.strong,{children:"descendant selector"})," (for example ",(0,o.jsx)(s.code,{children:".root p"}),")."]}),"\n",(0,o.jsx)(s.h2,{id:"keep-your-layout-minimal",children:"Keep your layout minimal"}),"\n",(0,o.jsx)(s.p,{children:"While internal structure does demand some CSS to work correctly, you should strive to find the minimal combination of CSS to make the component layout work as it should."}),"\n",(0,o.jsx)(s.h2,{id:"keep-coloring-to-a-minimum",children:"Keep coloring to a minimum"}),"\n",(0,o.jsx)(s.p,{children:"The component stylesheet should describe the bare minimum coloring to make its parts visible. Colors should be used sparingly, and just to achieve visibility."}),"\n",(0,o.jsx)(s.p,{children:"The best practice is to make sure every color used for a text across the project has a sufficiently contrasting background."}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:".options {\n background: value(color1);\n color: value(color2);\n}\n"})}),"\n",(0,o.jsx)(s.h2,{id:"keep-browser-defaults-intact",children:"Keep browser defaults intact"}),"\n",(0,o.jsx)(s.p,{children:'Browsers add a default user agent stylesheet to provide the HTML with a default "style".'}),"\n",(0,o.jsxs)(s.p,{children:['It is tempting to "clean up" a ',(0,o.jsx)(s.code,{children:"button"}),"'s default style in the component. But, we want our component to \"blend in\" in every context it's used. A button element in our component should look like other button tags in the context of the application where it is used."]}),"\n",(0,o.jsxs)(s.p,{children:["As such, when building a component, it is best to set CSS only for behaviors that ",(0,o.jsx)(s.strong,{children:"must"})," be overridden for the component to function."]}),"\n",(0,o.jsx)(s.h2,{id:"keep-specificity-low",children:"Keep specificity low"}),"\n",(0,o.jsx)(s.p,{children:"Write low specificity selectors that will be easy to override from a parent component."}),"\n",(0,o.jsx)(s.h2,{id:"keep-your-selectors-as-simple-as-possible",children:"Keep your selectors as simple as possible"}),"\n",(0,o.jsx)(s.p,{children:"It takes a more complex selector to override a high specificity selector that was defined in a component stylesheet."}),"\n",(0,o.jsxs)(s.p,{children:["Override CSS only for behaviors that ",(0,o.jsx)(s.strong,{children:"must"})," be overridden for the component to function, and minimize the use of ",(0,o.jsx)(s.code,{children:"element type selectors"})," and ",(0,o.jsx)(s.code,{children:"pseudo-elements"})," of nested components."]}),"\n",(0,o.jsx)(s.p,{children:"Styling pseudo-elements in a component creates a selector that takes more specificity to override"}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",metastring:'title="gallery.st.css"',children:"/* \n> directly style navBtn - a type of button\nselector: .comp__gallery .gallery__navBtn\nspecificity: 0,0,2,0 \n*/\n.gallery::navbtn {}\n"})}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",metastring:'title="page.st.css"',children:"/* \n> less specific than component override \nselector: .page__root button\nspecificity: 0,0,1,1\n*/\n.root button {}\n"})}),"\n",(0,o.jsx)(s.admonition,{type:"note",children:(0,o.jsxs)(s.p,{children:["For the ",(0,o.jsx)(s.code,{children:"button"})," selector, we manually added the ",(0,o.jsx)(s.code,{children:".root"})," class to avoid overriding ",(0,o.jsx)(s.code,{children:"button"})," outside this scope."]})}),"\n",(0,o.jsx)(s.h2,{id:"justify-your-css-declarations-in-comments",children:"Justify your CSS declarations in comments"}),"\n",(0,o.jsx)(s.p,{children:"A good way to validate minimal CSS is to add comments. There should be a few words clarifying why a certain declaration or rule set combination is found in the stylesheet. We recommend you justify any special overrides or interactions with a comment per this example."}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:".link {\n display: block;\n /* override default anchor color */\n color: currentColor;\n}\n"})}),"\n",(0,o.jsx)(s.p,{children:"This helps with maintenance and development, since we don't test CSS as thoroughly as other code."}),"\n",(0,o.jsx)(s.h2,{id:"use-consistent-variables-from-a-central-location",children:"Use consistent variables from a central location"}),"\n",(0,o.jsxs)(s.p,{children:["Import CSS or Stylable variables from the ",(0,o.jsx)(s.a,{href:"/docs/guides/project-commons",children:"project commons stylesheet"}),"."]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:'@st-import [color1, --font-small] from "./project.st.css";\n\n.item {\n background: value(color1);\n font-size: var(--font-small);\n}\n'})}),"\n",(0,o.jsx)(s.h2,{id:"keep-svg-and-images-overridable",children:"Keep SVG and images overridable"}),"\n",(0,o.jsx)(s.p,{children:"When using an image element source or SVG directly in the DOM, it is not easy, and in some cases not possible, to modify the asset from outside the component using CSS."}),"\n",(0,o.jsx)(s.p,{children:"When an asset is part of the style API, it should be placed in the background of an element, allowing it to be overridden from a parent component."})]})}function h(e={}){const{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>l,x:()=>a});var t=n(6540);const o={},i=t.createContext(o);function l(e){const s=t.useContext(i);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:l(e.components),t.createElement(i.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[4729],{7415:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>r,contentTitle:()=>a,default:()=>h,frontMatter:()=>l,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"guides/component-best-practices","title":"Stylable Component - Best Practices","description":"Stylable components should be easily stylable and themable from the outside. This means that the stylesheet describing the component CSS should be as simple and generic as possible, and should expose a clear and concise API for its internal parts.","source":"@site/docs/guides/component-best-practices.md","sourceDirName":"guides","slug":"/guides/component-best-practices","permalink":"/docs/guides/component-best-practices","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/component-best-practices.md","tags":[],"version":"current","frontMatter":{"id":"component-best-practices","title":"Stylable Component - Best Practices","sidebar_label":"Component Best Practices"},"sidebar":"Guides","previous":{"title":"Extend","permalink":"/docs/guides/handbook/extend"},"next":{"title":"Project Commons","permalink":"/docs/guides/project-commons"}}');var o=n(4848),i=n(8453);const l={id:"component-best-practices",title:"Stylable Component - Best Practices",sidebar_label:"Component Best Practices"},a=void 0,r={},c=[{value:"Avoid size declarations",id:"avoid-size-declarations",level:2},{value:"Give meaningful names",id:"give-meaningful-names",level:2},{value:"Avoid global settings in your stylesheet",id:"avoid-global-settings-in-your-stylesheet",level:2},{value:"Keep your layout minimal",id:"keep-your-layout-minimal",level:2},{value:"Keep coloring to a minimum",id:"keep-coloring-to-a-minimum",level:2},{value:"Keep browser defaults intact",id:"keep-browser-defaults-intact",level:2},{value:"Keep specificity low",id:"keep-specificity-low",level:2},{value:"Keep your selectors as simple as possible",id:"keep-your-selectors-as-simple-as-possible",level:2},{value:"Justify your CSS declarations in comments",id:"justify-your-css-declarations-in-comments",level:2},{value:"Use consistent variables from a central location",id:"use-consistent-variables-from-a-central-location",level:2},{value:"Keep SVG and images overridable",id:"keep-svg-and-images-overridable",level:2}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Stylable"})," components should be easily stylable and themable from the outside. This means that the stylesheet describing the component CSS should be as ",(0,o.jsx)(s.strong,{children:"simple"})," and ",(0,o.jsx)(s.strong,{children:"generic"})," as possible, and should expose a clear and concise API for its internal parts."]}),"\n",(0,o.jsxs)(s.p,{children:["When building your components, we recommend following the guidelines below that we've collected through our work with ",(0,o.jsx)(s.strong,{children:"Stylable"}),":"]}),"\n",(0,o.jsx)(s.h2,{id:"avoid-size-declarations",children:"Avoid size declarations"}),"\n",(0,o.jsx)(s.p,{children:"Try avoiding size declaration just because it offers an easier API. To override a component specifying size limitations, you would need to override multiple CSS declarations."}),"\n",(0,o.jsxs)(s.p,{children:["If you do set a default size or size limitations, use ",(0,o.jsx)(s.code,{children:"em/rem"})," units to resize to the HTML context."]}),"\n",(0,o.jsx)(s.h2,{id:"give-meaningful-names",children:"Give meaningful names"}),"\n",(0,o.jsxs)(s.p,{children:["Give meaningful class names that will make sense as part of a selector. Any CSS class selector can be targeted from the outside as a ",(0,o.jsx)(s.a,{href:"/docs/references/pseudo-elements",children:(0,o.jsx)(s.code,{children:"pseudo-element"})})," and should be considered part of the component API."]}),"\n",(0,o.jsx)(s.p,{children:"Use camelCase and avoid hyphens (-) and capital letters at the beginning."}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:"/* good */\nGallery::navbtn::label {\n} /* camelCase with clear pseudo-element names */\n"})}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:"/* bad */\nGallery::gallerynavbtn {\n} /* it is better to reuse the generic component id */\nGallery::nav-btn {\n} /* don't use kebab-case - stylable exports JS */\n"})}),"\n",(0,o.jsx)(s.h2,{id:"avoid-global-settings-in-your-stylesheet",children:"Avoid global settings in your stylesheet"}),"\n",(0,o.jsxs)(s.p,{children:["Try avoiding global-related selectors like ",(0,o.jsx)(s.code,{children:"@media"})," or matching DOM outside the component scope like ",(0,o.jsx)(s.code,{children:"body"}),". These would potentially cause side effects if others use them."]}),"\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.a,{href:"/docs/references/type-selectors",children:"Element type selectors"})," should be avoided inside a component because they affect any nested component or element. The exception to this is when specifically targeting the element with ",(0,o.jsx)(s.strong,{children:"child selector"})," (for example ",(0,o.jsx)(s.code,{children:".root > p"}),") and not a ",(0,o.jsx)(s.strong,{children:"descendant selector"})," (for example ",(0,o.jsx)(s.code,{children:".root p"}),")."]}),"\n",(0,o.jsx)(s.h2,{id:"keep-your-layout-minimal",children:"Keep your layout minimal"}),"\n",(0,o.jsx)(s.p,{children:"While internal structure does demand some CSS to work correctly, you should strive to find the minimal combination of CSS to make the component layout work as it should."}),"\n",(0,o.jsx)(s.h2,{id:"keep-coloring-to-a-minimum",children:"Keep coloring to a minimum"}),"\n",(0,o.jsx)(s.p,{children:"The component stylesheet should describe the bare minimum coloring to make its parts visible. Colors should be used sparingly, and just to achieve visibility."}),"\n",(0,o.jsx)(s.p,{children:"The best practice is to make sure every color used for a text across the project has a sufficiently contrasting background."}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:".options {\n background: value(color1);\n color: value(color2);\n}\n"})}),"\n",(0,o.jsx)(s.h2,{id:"keep-browser-defaults-intact",children:"Keep browser defaults intact"}),"\n",(0,o.jsx)(s.p,{children:'Browsers add a default user agent stylesheet to provide the HTML with a default "style".'}),"\n",(0,o.jsxs)(s.p,{children:['It is tempting to "clean up" a ',(0,o.jsx)(s.code,{children:"button"}),"'s default style in the component. But, we want our component to \"blend in\" in every context it's used. A button element in our component should look like other button tags in the context of the application where it is used."]}),"\n",(0,o.jsxs)(s.p,{children:["As such, when building a component, it is best to set CSS only for behaviors that ",(0,o.jsx)(s.strong,{children:"must"})," be overridden for the component to function."]}),"\n",(0,o.jsx)(s.h2,{id:"keep-specificity-low",children:"Keep specificity low"}),"\n",(0,o.jsx)(s.p,{children:"Write low specificity selectors that will be easy to override from a parent component."}),"\n",(0,o.jsx)(s.h2,{id:"keep-your-selectors-as-simple-as-possible",children:"Keep your selectors as simple as possible"}),"\n",(0,o.jsx)(s.p,{children:"It takes a more complex selector to override a high specificity selector that was defined in a component stylesheet."}),"\n",(0,o.jsxs)(s.p,{children:["Override CSS only for behaviors that ",(0,o.jsx)(s.strong,{children:"must"})," be overridden for the component to function, and minimize the use of ",(0,o.jsx)(s.code,{children:"element type selectors"})," and ",(0,o.jsx)(s.code,{children:"pseudo-elements"})," of nested components."]}),"\n",(0,o.jsx)(s.p,{children:"Styling pseudo-elements in a component creates a selector that takes more specificity to override"}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",metastring:'title="gallery.st.css"',children:"/* \n> directly style navBtn - a type of button\nselector: .comp__gallery .gallery__navBtn\nspecificity: 0,0,2,0 \n*/\n.gallery::navbtn {}\n"})}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",metastring:'title="page.st.css"',children:"/* \n> less specific than component override \nselector: .page__root button\nspecificity: 0,0,1,1\n*/\n.root button {}\n"})}),"\n",(0,o.jsx)(s.admonition,{type:"note",children:(0,o.jsxs)(s.p,{children:["For the ",(0,o.jsx)(s.code,{children:"button"})," selector, we manually added the ",(0,o.jsx)(s.code,{children:".root"})," class to avoid overriding ",(0,o.jsx)(s.code,{children:"button"})," outside this scope."]})}),"\n",(0,o.jsx)(s.h2,{id:"justify-your-css-declarations-in-comments",children:"Justify your CSS declarations in comments"}),"\n",(0,o.jsx)(s.p,{children:"A good way to validate minimal CSS is to add comments. There should be a few words clarifying why a certain declaration or rule set combination is found in the stylesheet. We recommend you justify any special overrides or interactions with a comment per this example."}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:".link {\n display: block;\n /* override default anchor color */\n color: currentColor;\n}\n"})}),"\n",(0,o.jsx)(s.p,{children:"This helps with maintenance and development, since we don't test CSS as thoroughly as other code."}),"\n",(0,o.jsx)(s.h2,{id:"use-consistent-variables-from-a-central-location",children:"Use consistent variables from a central location"}),"\n",(0,o.jsxs)(s.p,{children:["Import CSS or Stylable variables from the ",(0,o.jsx)(s.a,{href:"/docs/guides/project-commons",children:"project commons stylesheet"}),"."]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:'@st-import [color1, --font-small] from "./project.st.css";\n\n.item {\n background: value(color1);\n font-size: var(--font-small);\n}\n'})}),"\n",(0,o.jsx)(s.h2,{id:"keep-svg-and-images-overridable",children:"Keep SVG and images overridable"}),"\n",(0,o.jsx)(s.p,{children:"When using an image element source or SVG directly in the DOM, it is not easy, and in some cases not possible, to modify the asset from outside the component using CSS."}),"\n",(0,o.jsx)(s.p,{children:"When an asset is part of the style API, it should be placed in the background of an element, allowing it to be overridden from a parent component."})]})}function h(e={}){const{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>l,x:()=>a});var t=n(6540);const o={},i=t.createContext(o);function l(e){const s=t.useContext(i);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:l(e.components),t.createElement(i.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/e19b9990.9b71d185.js b/assets/js/e19b9990.9b71d185.js new file mode 100644 index 00000000..0a483b31 --- /dev/null +++ b/assets/js/e19b9990.9b71d185.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[7377],{6817:(e,n,r)=>{r.r(n),r.d(n,{assets:()=>u,contentTitle:()=>d,default:()=>p,frontMatter:()=>c,metadata:()=>t,toc:()=>h});const t=JSON.parse('{"id":"references/programmatic-api","title":"Programmatic API","description":"Stylable instance","source":"@site/docs/references/programmatic-api.mdx","sourceDirName":"references","slug":"/references/programmatic-api","permalink":"/docs/references/programmatic-api","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/programmatic-api.mdx","tags":[],"version":"current","frontMatter":{"id":"programmatic-api","title":"Programmatic API"},"sidebar":"Specification Reference","previous":{"title":"Runtime","permalink":"/docs/references/runtime"}}');var s=r(4848),l=r(8453),a=r(1470),i=r(9365),o=r(1432);const c={id:"programmatic-api",title:"Programmatic API"},d=void 0,u={},h=[{value:"Stylable instance",id:"stylable-instance",level:2},{value:"Configuration",id:"configuration",level:3},{value:"<code>MinimalFS</code>",id:"minimalfs",level:3},{value:"<code>ResolveNamespace</code>",id:"resolvenamespace",level:3},{value:"Basic example",id:"basic-example",level:4},{value:"<code>ModuleResolver</code>",id:"moduleresolver",level:3},{value:"<code>RequireModule</code>",id:"requiremodule",level:3}];function m(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,l.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h2,{id:"stylable-instance",children:"Stylable instance"}),"\n",(0,s.jsx)(n.p,{children:"Stylable is usually consumed through one of its available integration, for more specific or advanced use-cases, the programmatic API can be used for greater control on how Stylable operates."}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsx)(n.p,{children:"The APIs described here are treated as stable, and available for use. Any other API exposed by Stylable not described here may changed, and should not be dependant on."})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"Stylable"})," class provided from ",(0,s.jsx)(n.code,{children:"@stylable/core"})," requires configuration to initialize."]}),"\n",(0,s.jsx)(n.p,{children:"Example:"}),"\n","\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="Initialize Stylable instance"',children:"import fs from 'node:fs';\nimport { Stylable } from '@stylable/core';\n\n// minimal required configuration\nStylable({ fs, projectRoot: __dirname });\n"})}),"\n","\n",(0,s.jsx)(n.h3,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Option"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default Value"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"fs"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.a,{href:"#minimalfs",children:(0,s.jsx)(n.code,{children:"MinimalFS"})})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"required"})}),(0,s.jsx)(n.td,{children:"Filesystem instance to use"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"projectRoot"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"required"})}),(0,s.jsx)(n.td,{children:"The project root directory path"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"mode"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:'"production"'})}),(0,s.jsx)(n.td,{children:"Development or production mode"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"resolveNamespace"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.a,{href:"#resolvenamespace",children:(0,s.jsx)(n.code,{children:"ResolveNamespace"})})}),(0,s.jsx)(n.td,{children:"default resolver depends on running context"}),(0,s.jsx)(n.td,{children:"Function to determine namespacing"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"resolveModule"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.a,{href:"#moduleresolver",children:(0,s.jsx)(n.code,{children:"ModuleResolver"})})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.a,{href:"https://github.com/webpack/enhanced-resolve",children:(0,s.jsx)(n.code,{children:"enhanced-resolve"})})}),(0,s.jsxs)(n.td,{children:["Module resolver to be used for all import paths and ",(0,s.jsx)(n.code,{children:"url()"})," requests"]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"resolveOptions"})}),(0,s.jsx)(n.td,{children:(0,s.jsxs)(o.A,{className:"inline-code",children:[(0,s.jsx)("br",{})," alias?: any;",(0,s.jsx)("br",{})," symlinks?: boolean;",(0,s.jsx)("br",{})]})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(o.A,{className:"inline-code",children:"{}"})}),(0,s.jsxs)(n.td,{children:["Options that are passed to the ",(0,s.jsx)(n.strong,{children:"default"})," module resolver"]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"requrieModule"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.a,{href:"#requiremodule",children:(0,s.jsx)(n.code,{children:"RequireModule"})})}),(0,s.jsx)(n.td,{children:"none"}),(0,s.jsx)(n.td,{children:"Require module that receives a path, and attempts to return a module"})]})]})]}),"\n",(0,s.jsx)(n.h3,{id:"minimalfs",children:(0,s.jsx)(n.code,{children:"MinimalFS"})}),"\n",(0,s.jsx)(n.p,{children:"Stylable minimal required file system interface:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="MinimalFS interface"',children:"interface MinimalFS {\n statSync: (filePath: string) => { mtime: Date };\n readFileSync: (filePath: string, encoding: 'utf8') => string;\n readlinkSync: (filePath: string) => string;\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"resolvenamespace",children:(0,s.jsx)(n.code,{children:"ResolveNamespace"})}),"\n",(0,s.jsx)(n.p,{children:"Provide exact control of the namespacing mechanism by providing a function that accepts:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"namespace"})," - a stylesheet source namespace - determined by the ",(0,s.jsx)(n.code,{children:"@st-namespace"})," if exists, and falls back to the filename"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"origin"})," - an origin path - path to the source stylesheet"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:'This function will then return a string to be used as the "namespace" for stylesheet definitions.'}),"\n",(0,s.jsx)(n.h4,{id:"basic-example",children:"Basic example"}),"\n",(0,s.jsx)(n.p,{children:"An example for a basic namespace resolver, that generates unique verbose namespaces based on the component namespace and origin path of the stylesheet."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="Resolve namespace example"',children:"const resolveNamespace: ResolveNamespace = (namespace: string, origin: string): string {\n return namespace + hash(origin);\n}\n"})}),"\n","\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",metastring:'title="comp.st.css"',children:".root {}\n\n/* OUTPUT */\n.comp1169059893__root {}\n"})}),"\n","\n",(0,s.jsx)(n.h3,{id:"moduleresolver",children:(0,s.jsx)(n.code,{children:"ModuleResolver"})}),"\n",(0,s.jsx)(n.p,{children:"Override Stylable's default module resolver, to control path resolution according to your projects' needs."}),"\n",(0,s.jsx)(n.p,{children:"The default module resolver is a function that accepts two arguments:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"directoryPath"})," - the directory path to resolve from"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"request"})," - the module request to resolve"]}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"const fs = require('node:fs');\nconst { createDefaultResolver, Stylable } = require('@stylable/core');\n\nconst defaultResolver = createDefaultResolver(fs);\nconst stylable = new Stylable({\n projectRoot: 'path/to/project/root',\n filesystem: fs,\n resolveModule: (directoryPath, request) => {\n if (request.startsWith('my-custom-module')) {\n return '/path/to/my-custom-module';\n }\n\n return defaultResolver(directoryPath, request);\n },\n});\n"})}),"\n",(0,s.jsx)(n.h3,{id:"requiremodule",children:(0,s.jsx)(n.code,{children:"RequireModule"})}),"\n",(0,s.jsxs)(n.p,{children:["Defines a function to require imported JavaScript modules from a path, used when a JavaScript ",(0,s.jsx)(n.a,{href:"./mixins#javascript-mixins",children:"Mixins"})," or ",(0,s.jsx)(n.a,{href:"./formatters",children:"Formatters"})," is used within a Stylable stylesheet."]}),"\n","\n",(0,s.jsxs)(a.A,{groupId:"runtimeEnv",children:[(0,s.jsx)(i.A,{value:"nodejs",label:"NodeJS",default:!0,children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"const fs = require('node:fs');\nconst { Stylable } = require('@stylable/core');\n\nconst stylable = new Stylable({\n projectRoot: 'path/to/project/root',\n filesystem: fs,\n requireModule: require\n})\n"})})}),(0,s.jsx)(i.A,{value:"memoryfs",label:"Memory FS",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"const { Stylable } = require('@stylable/core');\n\nconst stylable = new Stylable({\n projectRoot: 'path/to/project/root',\n filesystem: memoryFS,\n requireModule(path: string) {\n const _module = {\n id,\n exports: {},\n };\n try {\n // create a module evaluation function\n const fn = new Function(\n 'module',\n 'exports',\n 'require',\n fs.readFileSync(id, { encoding: 'utf8', flag: 'r' })\n );\n // evaluate the module\n fn(_module, _module.exports, requireModule);\n } catch (e) { \n throw new Error('Cannot require file: ' + id + 'reason: ' + e.message);\n }\n return _module.exports;\n }\n})\n"})})})]}),"\n"]})}function p(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(m,{...e})}):m(e)}},9365:(e,n,r)=>{r.d(n,{A:()=>a});r(6540);var t=r(4164);const s={tabItem:"tabItem_Ymn6"};var l=r(4848);function a(e){let{children:n,hidden:r,className:a}=e;return(0,l.jsx)("div",{role:"tabpanel",className:(0,t.A)(s.tabItem,a),hidden:r,children:n})}},1470:(e,n,r)=>{r.d(n,{A:()=>S});var t=r(6540),s=r(4164),l=r(3104),a=r(6347),i=r(205),o=r(7485),c=r(1682),d=r(679);function u(e){return t.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,t.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:n,children:r}=e;return(0,t.useMemo)((()=>{const e=n??function(e){return u(e).map((e=>{let{props:{value:n,label:r,attributes:t,default:s}}=e;return{value:n,label:r,attributes:t,default:s}}))}(r);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e}),[n,r])}function m(e){let{value:n,tabValues:r}=e;return r.some((e=>e.value===n))}function p(e){let{queryString:n=!1,groupId:r}=e;const s=(0,a.W6)(),l=function(e){let{queryString:n=!1,groupId:r}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!r)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return r??null}({queryString:n,groupId:r});return[(0,o.aZ)(l),(0,t.useCallback)((e=>{if(!l)return;const n=new URLSearchParams(s.location.search);n.set(l,e),s.replace({...s.location,search:n.toString()})}),[l,s])]}function x(e){const{defaultValue:n,queryString:r=!1,groupId:s}=e,l=h(e),[a,o]=(0,t.useState)((()=>function(e){let{defaultValue:n,tabValues:r}=e;if(0===r.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(n){if(!m({value:n,tabValues:r}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${r.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const t=r.find((e=>e.default))??r[0];if(!t)throw new Error("Unexpected error: 0 tabValues");return t.value}({defaultValue:n,tabValues:l}))),[c,u]=p({queryString:r,groupId:s}),[x,f]=function(e){let{groupId:n}=e;const r=function(e){return e?`docusaurus.tab.${e}`:null}(n),[s,l]=(0,d.Dv)(r);return[s,(0,t.useCallback)((e=>{r&&l.set(e)}),[r,l])]}({groupId:s}),j=(()=>{const e=c??x;return m({value:e,tabValues:l})?e:null})();(0,i.A)((()=>{j&&o(j)}),[j]);return{selectedValue:a,selectValue:(0,t.useCallback)((e=>{if(!m({value:e,tabValues:l}))throw new Error(`Can't select invalid tab value=${e}`);o(e),u(e),f(e)}),[u,f,l]),tabValues:l}}var f=r(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=r(4848);function v(e){let{className:n,block:r,selectedValue:t,selectValue:a,tabValues:i}=e;const o=[],{blockElementScrollPositionUntilNextRender:c}=(0,l.a_)(),d=e=>{const n=e.currentTarget,r=o.indexOf(n),s=i[r].value;s!==t&&(c(n),a(s))},u=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const r=o.indexOf(e.currentTarget)+1;n=o[r]??o[0];break}case"ArrowLeft":{const r=o.indexOf(e.currentTarget)-1;n=o[r]??o[o.length-1];break}}n?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":r},n),children:i.map((e=>{let{value:n,label:r,attributes:l}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:t===n?0:-1,"aria-selected":t===n,ref:e=>{o.push(e)},onKeyDown:u,onClick:d,...l,className:(0,s.A)("tabs__item",j.tabItem,l?.className,{"tabs__item--active":t===n}),children:r??n},n)}))})}function g(e){let{lazy:n,children:r,selectedValue:l}=e;const a=(Array.isArray(r)?r:[r]).filter(Boolean);if(n){const e=a.find((e=>e.props.value===l));return e?(0,t.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==l})))})}function y(e){const n=x(e);return(0,b.jsxs)("div",{className:(0,s.A)("tabs-container",j.tabList),children:[(0,b.jsx)(v,{...n,...e}),(0,b.jsx)(g,{...n,...e})]})}function S(e){const n=(0,f.A)();return(0,b.jsx)(y,{...e,children:u(e.children)},String(n))}}}]); \ No newline at end of file diff --git a/assets/js/e19b9990.c0392c7d.js b/assets/js/e19b9990.c0392c7d.js deleted file mode 100644 index 844488cc..00000000 --- a/assets/js/e19b9990.c0392c7d.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[7377],{701:(e,n,r)=>{r.r(n),r.d(n,{assets:()=>u,contentTitle:()=>d,default:()=>p,frontMatter:()=>c,metadata:()=>t,toc:()=>h});const t=JSON.parse('{"id":"references/programmatic-api","title":"Programmatic API","description":"Stylable instance","source":"@site/docs/references/programmatic-api.mdx","sourceDirName":"references","slug":"/references/programmatic-api","permalink":"/docs/references/programmatic-api","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/programmatic-api.mdx","tags":[],"version":"current","frontMatter":{"id":"programmatic-api","title":"Programmatic API"},"sidebar":"Specification Reference","previous":{"title":"Runtime","permalink":"/docs/references/runtime"}}');var s=r(4848),l=r(8453),a=r(9489),i=r(7227),o=r(2250);const c={id:"programmatic-api",title:"Programmatic API"},d=void 0,u={},h=[{value:"Stylable instance",id:"stylable-instance",level:2},{value:"Configuration",id:"configuration",level:3},{value:"<code>MinimalFS</code>",id:"minimalfs",level:3},{value:"<code>ResolveNamespace</code>",id:"resolvenamespace",level:3},{value:"Basic example",id:"basic-example",level:4},{value:"<code>ModuleResolver</code>",id:"moduleresolver",level:3},{value:"<code>RequireModule</code>",id:"requiremodule",level:3}];function m(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,l.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h2,{id:"stylable-instance",children:"Stylable instance"}),"\n",(0,s.jsx)(n.p,{children:"Stylable is usually consumed through one of its available integration, for more specific or advanced use-cases, the programmatic API can be used for greater control on how Stylable operates."}),"\n",(0,s.jsx)(n.admonition,{type:"note",children:(0,s.jsx)(n.p,{children:"The APIs described here are treated as stable, and available for use. Any other API exposed by Stylable not described here may changed, and should not be dependant on."})}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"Stylable"})," class provided from ",(0,s.jsx)(n.code,{children:"@stylable/core"})," requires configuration to initialize."]}),"\n",(0,s.jsx)(n.p,{children:"Example:"}),"\n","\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="Initialize Stylable instance"',children:"import fs from 'node:fs';\nimport { Stylable } from '@stylable/core';\n\n// minimal required configuration\nStylable({ fs, projectRoot: __dirname });\n"})}),"\n","\n",(0,s.jsx)(n.h3,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Option"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Default Value"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"fs"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.a,{href:"#minimalfs",children:(0,s.jsx)(n.code,{children:"MinimalFS"})})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"required"})}),(0,s.jsx)(n.td,{children:"Filesystem instance to use"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"projectRoot"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"required"})}),(0,s.jsx)(n.td,{children:"The project root directory path"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"mode"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"string"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:'"production"'})}),(0,s.jsx)(n.td,{children:"Development or production mode"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"resolveNamespace"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.a,{href:"#resolvenamespace",children:(0,s.jsx)(n.code,{children:"ResolveNamespace"})})}),(0,s.jsx)(n.td,{children:"default resolver depends on running context"}),(0,s.jsx)(n.td,{children:"Function to determine namespacing"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"resolveModule"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.a,{href:"#moduleresolver",children:(0,s.jsx)(n.code,{children:"ModuleResolver"})})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.a,{href:"https://github.com/webpack/enhanced-resolve",children:(0,s.jsx)(n.code,{children:"enhanced-resolve"})})}),(0,s.jsxs)(n.td,{children:["Module resolver to be used for all import paths and ",(0,s.jsx)(n.code,{children:"url()"})," requests"]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"resolveOptions"})}),(0,s.jsx)(n.td,{children:(0,s.jsxs)(o.A,{className:"inline-code",children:[(0,s.jsx)("br",{})," alias?: any;",(0,s.jsx)("br",{})," symlinks?: boolean;",(0,s.jsx)("br",{})]})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(o.A,{className:"inline-code",children:"{}"})}),(0,s.jsxs)(n.td,{children:["Options that are passed to the ",(0,s.jsx)(n.strong,{children:"default"})," module resolver"]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"requrieModule"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.a,{href:"#requiremodule",children:(0,s.jsx)(n.code,{children:"RequireModule"})})}),(0,s.jsx)(n.td,{children:"none"}),(0,s.jsx)(n.td,{children:"Require module that receives a path, and attempts to return a module"})]})]})]}),"\n",(0,s.jsx)(n.h3,{id:"minimalfs",children:(0,s.jsx)(n.code,{children:"MinimalFS"})}),"\n",(0,s.jsx)(n.p,{children:"Stylable minimal required file system interface:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="MinimalFS interface"',children:"interface MinimalFS {\n statSync: (filePath: string) => { mtime: Date };\n readFileSync: (filePath: string, encoding: 'utf8') => string;\n readlinkSync: (filePath: string) => string;\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"resolvenamespace",children:(0,s.jsx)(n.code,{children:"ResolveNamespace"})}),"\n",(0,s.jsx)(n.p,{children:"Provide exact control of the namespacing mechanism by providing a function that accepts:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"namespace"})," - a stylesheet source namespace - determined by the ",(0,s.jsx)(n.code,{children:"@st-namespace"})," if exists, and falls back to the filename"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"origin"})," - an origin path - path to the source stylesheet"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:'This function will then return a string to be used as the "namespace" for stylesheet definitions.'}),"\n",(0,s.jsx)(n.h4,{id:"basic-example",children:"Basic example"}),"\n",(0,s.jsx)(n.p,{children:"An example for a basic namespace resolver, that generates unique verbose namespaces based on the component namespace and origin path of the stylesheet."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="Resolve namespace example"',children:"const resolveNamespace: ResolveNamespace = (namespace: string, origin: string): string {\n return namespace + hash(origin);\n}\n"})}),"\n","\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",metastring:'title="comp.st.css"',children:".root {}\n\n/* OUTPUT */\n.comp1169059893__root {}\n"})}),"\n","\n",(0,s.jsx)(n.h3,{id:"moduleresolver",children:(0,s.jsx)(n.code,{children:"ModuleResolver"})}),"\n",(0,s.jsx)(n.p,{children:"Override Stylable's default module resolver, to control path resolution according to your projects' needs."}),"\n",(0,s.jsx)(n.p,{children:"The default module resolver is a function that accepts two arguments:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"directoryPath"})," - the directory path to resolve from"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"request"})," - the module request to resolve"]}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"const fs = require('node:fs');\nconst { createDefaultResolver, Stylable } = require('@stylable/core');\n\nconst defaultResolver = createDefaultResolver(fs);\nconst stylable = new Stylable({\n projectRoot: 'path/to/project/root',\n filesystem: fs,\n resolveModule: (directoryPath, request) => {\n if (request.startsWith('my-custom-module')) {\n return '/path/to/my-custom-module';\n }\n\n return defaultResolver(directoryPath, request);\n },\n});\n"})}),"\n",(0,s.jsx)(n.h3,{id:"requiremodule",children:(0,s.jsx)(n.code,{children:"RequireModule"})}),"\n",(0,s.jsxs)(n.p,{children:["Defines a function to require imported JavaScript modules from a path, used when a JavaScript ",(0,s.jsx)(n.a,{href:"./mixins#javascript-mixins",children:"Mixins"})," or ",(0,s.jsx)(n.a,{href:"./formatters",children:"Formatters"})," is used within a Stylable stylesheet."]}),"\n","\n",(0,s.jsxs)(a.A,{groupId:"runtimeEnv",children:[(0,s.jsx)(i.A,{value:"nodejs",label:"NodeJS",default:!0,children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"const fs = require('node:fs');\nconst { Stylable } = require('@stylable/core');\n\nconst stylable = new Stylable({\n projectRoot: 'path/to/project/root',\n filesystem: fs,\n requireModule: require\n})\n"})})}),(0,s.jsx)(i.A,{value:"memoryfs",label:"Memory FS",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"const { Stylable } = require('@stylable/core');\n\nconst stylable = new Stylable({\n projectRoot: 'path/to/project/root',\n filesystem: memoryFS,\n requireModule(path: string) {\n const _module = {\n id,\n exports: {},\n };\n try {\n // create a module evaluation function\n const fn = new Function(\n 'module',\n 'exports',\n 'require',\n fs.readFileSync(id, { encoding: 'utf8', flag: 'r' })\n );\n // evaluate the module\n fn(_module, _module.exports, requireModule);\n } catch (e) { \n throw new Error('Cannot require file: ' + id + 'reason: ' + e.message);\n }\n return _module.exports;\n }\n})\n"})})})]}),"\n"]})}function p(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(m,{...e})}):m(e)}},7227:(e,n,r)=>{r.d(n,{A:()=>a});r(6540);var t=r(4164);const s={tabItem:"tabItem_Ymn6"};var l=r(4848);function a(e){let{children:n,hidden:r,className:a}=e;return(0,l.jsx)("div",{role:"tabpanel",className:(0,t.A)(s.tabItem,a),hidden:r,children:n})}},9489:(e,n,r)=>{r.d(n,{A:()=>S});var t=r(6540),s=r(4164),l=r(4245),a=r(6347),i=r(6494),o=r(2814),c=r(5167),d=r(9900);function u(e){return t.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,t.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:n,children:r}=e;return(0,t.useMemo)((()=>{const e=n??function(e){return u(e).map((e=>{let{props:{value:n,label:r,attributes:t,default:s}}=e;return{value:n,label:r,attributes:t,default:s}}))}(r);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e}),[n,r])}function m(e){let{value:n,tabValues:r}=e;return r.some((e=>e.value===n))}function p(e){let{queryString:n=!1,groupId:r}=e;const s=(0,a.W6)(),l=function(e){let{queryString:n=!1,groupId:r}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!r)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return r??null}({queryString:n,groupId:r});return[(0,o.aZ)(l),(0,t.useCallback)((e=>{if(!l)return;const n=new URLSearchParams(s.location.search);n.set(l,e),s.replace({...s.location,search:n.toString()})}),[l,s])]}function x(e){const{defaultValue:n,queryString:r=!1,groupId:s}=e,l=h(e),[a,o]=(0,t.useState)((()=>function(e){let{defaultValue:n,tabValues:r}=e;if(0===r.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(n){if(!m({value:n,tabValues:r}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${r.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const t=r.find((e=>e.default))??r[0];if(!t)throw new Error("Unexpected error: 0 tabValues");return t.value}({defaultValue:n,tabValues:l}))),[c,u]=p({queryString:r,groupId:s}),[x,f]=function(e){let{groupId:n}=e;const r=function(e){return e?`docusaurus.tab.${e}`:null}(n),[s,l]=(0,d.Dv)(r);return[s,(0,t.useCallback)((e=>{r&&l.set(e)}),[r,l])]}({groupId:s}),j=(()=>{const e=c??x;return m({value:e,tabValues:l})?e:null})();(0,i.A)((()=>{j&&o(j)}),[j]);return{selectedValue:a,selectValue:(0,t.useCallback)((e=>{if(!m({value:e,tabValues:l}))throw new Error(`Can't select invalid tab value=${e}`);o(e),u(e),f(e)}),[u,f,l]),tabValues:l}}var f=r(1062);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=r(4848);function v(e){let{className:n,block:r,selectedValue:t,selectValue:a,tabValues:i}=e;const o=[],{blockElementScrollPositionUntilNextRender:c}=(0,l.a_)(),d=e=>{const n=e.currentTarget,r=o.indexOf(n),s=i[r].value;s!==t&&(c(n),a(s))},u=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const r=o.indexOf(e.currentTarget)+1;n=o[r]??o[0];break}case"ArrowLeft":{const r=o.indexOf(e.currentTarget)-1;n=o[r]??o[o.length-1];break}}n?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":r},n),children:i.map((e=>{let{value:n,label:r,attributes:l}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:t===n?0:-1,"aria-selected":t===n,ref:e=>o.push(e),onKeyDown:u,onClick:d,...l,className:(0,s.A)("tabs__item",j.tabItem,l?.className,{"tabs__item--active":t===n}),children:r??n},n)}))})}function g(e){let{lazy:n,children:r,selectedValue:l}=e;const a=(Array.isArray(r)?r:[r]).filter(Boolean);if(n){const e=a.find((e=>e.props.value===l));return e?(0,t.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==l})))})}function y(e){const n=x(e);return(0,b.jsxs)("div",{className:(0,s.A)("tabs-container",j.tabList),children:[(0,b.jsx)(v,{...n,...e}),(0,b.jsx)(g,{...n,...e})]})}function S(e){const n=(0,f.A)();return(0,b.jsx)(y,{...e,children:u(e.children)},String(n))}}}]); \ No newline at end of file diff --git a/assets/js/e74825b7.d2761f43.js b/assets/js/e74825b7.7addcb27.js similarity index 99% rename from assets/js/e74825b7.d2761f43.js rename to assets/js/e74825b7.7addcb27.js index 837d031e..d770bfe4 100644 --- a/assets/js/e74825b7.d2761f43.js +++ b/assets/js/e74825b7.7addcb27.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[2765],{3830:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>r,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"references/pseudo-classes","title":"Pseudo-Class","description":"In addition to CSS\'s native pseudo-classes, likenth-child(), Stylable allow you to define custom pseudo-classes so that you can apply styles to your components based on state. Let\'s say you want a component to have different styling applied to it when its content is loading. You can define loading as a custom pseudo-class and toggle it in your component.","source":"@site/docs/references/pseudo-classes.md","sourceDirName":"references","slug":"/references/pseudo-classes","permalink":"/docs/references/pseudo-classes","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/pseudo-classes.md","tags":[],"version":"current","frontMatter":{"id":"pseudo-classes","title":"Pseudo-Class"},"sidebar":"Specification Reference","previous":{"title":"Layer","permalink":"/docs/references/layer"},"next":{"title":"Pseudo-Element","permalink":"/docs/references/pseudo-elements"}}');var a=s(4848),i=s(8453);const o={id:"pseudo-classes",title:"Pseudo-Class"},l=void 0,r={},c=[{value:"Syntax",id:"syntax",level:2},{value:"Boolean",id:"boolean",level:3},{value:"Enum",id:"enum",level:3},{value:"String",id:"string",level:3},{value:"Optional string validation",id:"optional-string-validation",level:4},{value:"Number",id:"number",level:3},{value:"Optional number validation",id:"optional-number-validation",level:4},{value:"State inheritance",id:"state-inheritance",level:2},{value:"Runtime",id:"runtime",level:2},{value:"Namespace",id:"namespace",level:2},{value:"Map to selector",id:"map-to-selector",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(n.p,{children:["In addition to CSS's native ",(0,a.jsx)(n.code,{children:"pseudo-classes"}),", like ",(0,a.jsx)(n.code,{children:":hover"})," and ",(0,a.jsx)(n.code,{children:":nth-child()"}),", Stylable allow you to define custom pseudo-classes so that you can apply styles to your components based on state. Let's say you want a component to have different styling applied to it when its content is loading. You can define ",(0,a.jsx)(n.code,{children:"loading"})," as a custom pseudo-class and toggle it in your component."]}),"\n",(0,a.jsxs)(n.p,{children:["This page goes over how Stylable handles custom ",(0,a.jsx)(n.code,{children:"pseudo-classes"}),", for more details about the language feature itself, checkout the following resources:"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-classes",children:"MDN pseudo-class"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://drafts.csswg.org/selectors/#pseudo-classes",children:"pseudo-class in spec"})}),"\n"]}),"\n",(0,a.jsx)(n.h2,{id:"syntax",children:"Syntax"}),"\n",(0,a.jsxs)(n.p,{children:["The Stylable ",(0,a.jsx)(n.code,{children:"-st-states"})," declaration is used ",(0,a.jsx)(n.strong,{children:"on a class selector"})," to provide a list of the possible custom ",(0,a.jsx)(n.code,{children:"pseudo-classes"})," that can later be targeted from CSS and controlled from JavaScript."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",metastring:'title="list of custom states"',children:".x {\n -st-states: stateA, stateB;\n}\n"})}),"\n",(0,a.jsx)(n.admonition,{title:"allowed context",type:"note",children:(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"-st-states"})," is only allowed in a rule with a ",(0,a.jsx)(n.strong,{children:"single class selector"})," to indicate custom pseudo classes for that class."]})}),"\n",(0,a.jsx)(n.h3,{id:"boolean",children:"Boolean"}),"\n",(0,a.jsxs)(n.p,{children:["To define a custom state that can be either ",(0,a.jsx)(n.strong,{children:"on or off"}),", provide state definitions with a single ident as the name for the state, then target the state using a pseudo-class."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:".x {\n /* define 2 boolean states on 'x' */\n -st-states: toggled, loading;\n}\n\n/* target single custom state */\n.x:toggled {}\n\n/* target multiple custom states */\n.x:toggled:loading {}\n"})}),"\n",(0,a.jsx)(n.h3,{id:"enum",children:"Enum"}),"\n",(0,a.jsxs)(n.p,{children:["A custom state with a ",(0,a.jsx)(n.strong,{children:"restricted option list"})," that can target one of the options using a pseudo-class selector with a matching parameter and an ",(0,a.jsx)(n.strong,{children:"optional default value"}),"."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:".x {\n /* define a 'size' custom state with 3 options \n and a 'color' state with options and a default 'green' value */\n -st-states: size(enum(small, medium, large)),\n color(enum(reg, green, blue)) green;\n}\n\n/* target an element with a size of `medium` */\n.x:size(medium) {}\n\n/* INVALID! - 'huge' is not a possible value for size */\n.x:size(huge) {}\n\n/* INVALID! - parameter is required for size */\n.x:size {}\n\n/* VALID! - same as ':color(green)' */\n.x:color {}\n"})}),"\n",(0,a.jsx)(n.h3,{id:"string",children:"String"}),"\n",(0,a.jsxs)(n.p,{children:["A custom state that can accept a ",(0,a.jsx)(n.code,{children:"string parameter"})," value."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:".x {\n /* define 'category' custom state that accepts a string parameter */\n -st-states: category(string);\n}\n\n/* target an element with state category='kitchen' */\n.x:category(kitchen) {}\n\n/* target an element with state category='office' */\n.x:category(office) {}\n"})}),"\n",(0,a.jsx)(n.h4,{id:"optional-string-validation",children:"Optional string validation"}),"\n",(0,a.jsx)(n.p,{children:"There are several options that can be used to validate the potential string parameter input:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"minLength"})," - validates min length of input"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"maxLength"})," - validates max length of input"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"contains"})," - validates substring value exist in input"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"regex"})," - validates input against a regular expression"]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"To set validations on a string state type, call the string as a function and pass a list of validations."}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",metastring:'title="string validation definition examples"',children:".a { \n /* validates input has min/max length and has the string 'user' in it */\n -st-states: x(string(minLength(5), maxLength(10), contains('user')));\n}\n\n.b {\n /* validates input begins with 'user' */\n -st-states: x(string(regex('^user')));\n}\n"})}),"\n",(0,a.jsx)(n.h3,{id:"number",children:"Number"}),"\n",(0,a.jsxs)(n.p,{children:["A custom state that can accept a ",(0,a.jsx)(n.code,{children:"number parameter"})," value."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:".a {\n /* define 'ranking' custom state that accepts a number parameter */\n -st-states: ranking(number);\n}\n\n/* target an element with a state rankin='5' */\n.a:ranking(5) {}\n"})}),"\n",(0,a.jsx)(n.h4,{id:"optional-number-validation",children:"Optional number validation"}),"\n",(0,a.jsx)(n.p,{children:"There are several options that can be used to validate the potential number parameter input:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"min"})," - validates min size of input"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"max"})," - validates max size of input"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"multiplyOf"})," - validates input is multiply of a given value"]}),"\n"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",metastring:'title="number validation definition example"',children:'.a {\n /* validates the targeting number argument */\n -st-states: x(number(min(2), max(6), multipleOf(2)));\n}\n\n/* valid arguments */\n.a:x(2) {}\n.a:x(4) {}\n.a:x(6) {}\n\n/* INVALID! - "multipleOf(2)" */\n.a:x(3) {}\n.a:x(5) {}\n\n/* INVALID! - "min(2)" and "max(6)" */\n.a:x(1) {}\n.a:x(7) {}\n'})}),"\n",(0,a.jsx)(n.h2,{id:"state-inheritance",children:"State inheritance"}),"\n",(0,a.jsxs)(n.p,{children:["When using ",(0,a.jsx)(n.a,{href:"./extend-stylesheet",children:"-st-extends"})," to extend another stylesheet or class, states definitions are inherited, but can also be overridden at any level."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",metastring:'title="base.st.css"',children:".root {\n /* define states 'a' and 'b' for the root of base stylesheet */\n -st-states: a, b;\n}\n"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",metastring:'title="extend.st.css"',children:"@st-import Base from './base.st.css';\n\n.root {\n /* inherits states 'a' and 'b' */\n -st-extends: Base;\n\n /* define states 'c' and 'b' (override 'b' from 'Base') */\n -st-states: c, b;\n}\n\n.root:a {}\n.root:b {}\n.root:c {}\n\n/* OUTPUT */\n.extend__root.base--a {} /* 'a' defined in base */\n.extend__root.extend--b {} /* 'b' defined in base, but overridden in extend */\n.extend__root.extend--c {} /* 'c' defined in extend */\n"})}),"\n",(0,a.jsx)(n.admonition,{title:"Native pseudo-class override",type:"note",children:(0,a.jsxs)(n.p,{children:["You can override the behavior of native pseudo-classes. This can enable you to write ",(0,a.jsx)(n.a,{href:"https://remysharp.com/2010/10/08/what-is-a-polyfill",children:"polyfills"})," for forthcoming CSS pseudo-classes to ensure that when you define a name for a custom pseudo-class, if there are clashes with a new CSS pseudo-class in the future, your app's behavior does not change. We don't recommend you to override an existing CSS pseudo-class unless you want to drive your teammates insane."]})}),"\n",(0,a.jsx)(n.h2,{id:"runtime",children:"Runtime"}),"\n",(0,a.jsxs)(n.p,{children:["To activate a custom state, use the ",(0,a.jsx)(n.a,{href:"./runtime#custom-state-mapping",children:"cssStates"})," or ",(0,a.jsx)(n.a,{href:"./runtime#st-function",children:"st() function"})," to generate the active ",(0,a.jsx)(n.code,{children:"CSS classes"})," states."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { st, classes } from './sheet.st.css'; \n\n// active states\nst(classes.part, {\n isOn: true, // boolean\n size: 'small' // string or enum\n place: 1 // number state\n});\n\n// un-active states - only 'part' class\nst(classes.part, {\n isFirst: false, // boolean\n size: undefined // string or enum\n place: undefined // number\n});\n"})}),"\n",(0,a.jsx)(n.h2,{id:"namespace",children:"Namespace"}),"\n",(0,a.jsx)(n.p,{children:"Stylable generates namespaced CSS classes for custom states:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:".x:bool {}\n.x:enum(option1) {}\n.x:string(word) {}\n.x:number(55) {}\n\n/* OUTPUT */\n.NAMESPACE__x.NAMESPACE--bool {}\n.NAMESPACE__x.NAMESPACE---enum-7-option1 {}\n.NAMESPACE__x.NAMESPACE---string-4-word {}\n.NAMESPACE__x.NAMESPACE---number-2-55 {}\n"})}),"\n",(0,a.jsx)(n.h3,{id:"map-to-selector",children:"Map to selector"}),"\n",(0,a.jsxs)(n.p,{children:["In some cases the default way Stylable transforms a state into a class is not the desired behavior, for example when writing style interface to an external view that might mark state as an attribute, For this ",(0,a.jsx)(n.code,{children:"mapped state"})," can be used to transform the state into a another selector."]}),"\n",(0,a.jsx)(n.p,{children:"To define a global mapped state, pass a selector as a string instead of a type:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:".x {\n -st-states: toggled('.on'), \n loading('[dataSpinner]');\n}\n\n.x:toggled {}\n.x:loading {}\n\n/* OUTPUT */\n.NAMESPACE__x.on {}\n.NAMESPACE__x[dataSpinner] {}\n"})}),"\n",(0,a.jsxs)(n.p,{children:["Additionally a single parameter can be defined after the selector string and referenced in the selector string using ",(0,a.jsx)(n.code,{children:"$0"}),":"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:".x {\n -st-states: size('[size=\"$0\"]', enum(small, medium, large));\n}\n\n.x:size(small) {}\n\n/* OUTPUT */\n.NAMESPACE__x[size='small'] {}\n"})})]})}function h(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>o,x:()=>l});var t=s(6540);const a={},i=t.createContext(a);function o(e){const n=t.useContext(i);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:o(e.components),t.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[2765],{4284:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>r,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"references/pseudo-classes","title":"Pseudo-Class","description":"In addition to CSS\'s native pseudo-classes, likenth-child(), Stylable allow you to define custom pseudo-classes so that you can apply styles to your components based on state. Let\'s say you want a component to have different styling applied to it when its content is loading. You can define loading as a custom pseudo-class and toggle it in your component.","source":"@site/docs/references/pseudo-classes.md","sourceDirName":"references","slug":"/references/pseudo-classes","permalink":"/docs/references/pseudo-classes","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/pseudo-classes.md","tags":[],"version":"current","frontMatter":{"id":"pseudo-classes","title":"Pseudo-Class"},"sidebar":"Specification Reference","previous":{"title":"Layer","permalink":"/docs/references/layer"},"next":{"title":"Pseudo-Element","permalink":"/docs/references/pseudo-elements"}}');var a=s(4848),i=s(8453);const o={id:"pseudo-classes",title:"Pseudo-Class"},l=void 0,r={},c=[{value:"Syntax",id:"syntax",level:2},{value:"Boolean",id:"boolean",level:3},{value:"Enum",id:"enum",level:3},{value:"String",id:"string",level:3},{value:"Optional string validation",id:"optional-string-validation",level:4},{value:"Number",id:"number",level:3},{value:"Optional number validation",id:"optional-number-validation",level:4},{value:"State inheritance",id:"state-inheritance",level:2},{value:"Runtime",id:"runtime",level:2},{value:"Namespace",id:"namespace",level:2},{value:"Map to selector",id:"map-to-selector",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(n.p,{children:["In addition to CSS's native ",(0,a.jsx)(n.code,{children:"pseudo-classes"}),", like ",(0,a.jsx)(n.code,{children:":hover"})," and ",(0,a.jsx)(n.code,{children:":nth-child()"}),", Stylable allow you to define custom pseudo-classes so that you can apply styles to your components based on state. Let's say you want a component to have different styling applied to it when its content is loading. You can define ",(0,a.jsx)(n.code,{children:"loading"})," as a custom pseudo-class and toggle it in your component."]}),"\n",(0,a.jsxs)(n.p,{children:["This page goes over how Stylable handles custom ",(0,a.jsx)(n.code,{children:"pseudo-classes"}),", for more details about the language feature itself, checkout the following resources:"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-classes",children:"MDN pseudo-class"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://drafts.csswg.org/selectors/#pseudo-classes",children:"pseudo-class in spec"})}),"\n"]}),"\n",(0,a.jsx)(n.h2,{id:"syntax",children:"Syntax"}),"\n",(0,a.jsxs)(n.p,{children:["The Stylable ",(0,a.jsx)(n.code,{children:"-st-states"})," declaration is used ",(0,a.jsx)(n.strong,{children:"on a class selector"})," to provide a list of the possible custom ",(0,a.jsx)(n.code,{children:"pseudo-classes"})," that can later be targeted from CSS and controlled from JavaScript."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",metastring:'title="list of custom states"',children:".x {\n -st-states: stateA, stateB;\n}\n"})}),"\n",(0,a.jsx)(n.admonition,{title:"allowed context",type:"note",children:(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"-st-states"})," is only allowed in a rule with a ",(0,a.jsx)(n.strong,{children:"single class selector"})," to indicate custom pseudo classes for that class."]})}),"\n",(0,a.jsx)(n.h3,{id:"boolean",children:"Boolean"}),"\n",(0,a.jsxs)(n.p,{children:["To define a custom state that can be either ",(0,a.jsx)(n.strong,{children:"on or off"}),", provide state definitions with a single ident as the name for the state, then target the state using a pseudo-class."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:".x {\n /* define 2 boolean states on 'x' */\n -st-states: toggled, loading;\n}\n\n/* target single custom state */\n.x:toggled {}\n\n/* target multiple custom states */\n.x:toggled:loading {}\n"})}),"\n",(0,a.jsx)(n.h3,{id:"enum",children:"Enum"}),"\n",(0,a.jsxs)(n.p,{children:["A custom state with a ",(0,a.jsx)(n.strong,{children:"restricted option list"})," that can target one of the options using a pseudo-class selector with a matching parameter and an ",(0,a.jsx)(n.strong,{children:"optional default value"}),"."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:".x {\n /* define a 'size' custom state with 3 options \n and a 'color' state with options and a default 'green' value */\n -st-states: size(enum(small, medium, large)),\n color(enum(reg, green, blue)) green;\n}\n\n/* target an element with a size of `medium` */\n.x:size(medium) {}\n\n/* INVALID! - 'huge' is not a possible value for size */\n.x:size(huge) {}\n\n/* INVALID! - parameter is required for size */\n.x:size {}\n\n/* VALID! - same as ':color(green)' */\n.x:color {}\n"})}),"\n",(0,a.jsx)(n.h3,{id:"string",children:"String"}),"\n",(0,a.jsxs)(n.p,{children:["A custom state that can accept a ",(0,a.jsx)(n.code,{children:"string parameter"})," value."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:".x {\n /* define 'category' custom state that accepts a string parameter */\n -st-states: category(string);\n}\n\n/* target an element with state category='kitchen' */\n.x:category(kitchen) {}\n\n/* target an element with state category='office' */\n.x:category(office) {}\n"})}),"\n",(0,a.jsx)(n.h4,{id:"optional-string-validation",children:"Optional string validation"}),"\n",(0,a.jsx)(n.p,{children:"There are several options that can be used to validate the potential string parameter input:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"minLength"})," - validates min length of input"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"maxLength"})," - validates max length of input"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"contains"})," - validates substring value exist in input"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"regex"})," - validates input against a regular expression"]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"To set validations on a string state type, call the string as a function and pass a list of validations."}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",metastring:'title="string validation definition examples"',children:".a { \n /* validates input has min/max length and has the string 'user' in it */\n -st-states: x(string(minLength(5), maxLength(10), contains('user')));\n}\n\n.b {\n /* validates input begins with 'user' */\n -st-states: x(string(regex('^user')));\n}\n"})}),"\n",(0,a.jsx)(n.h3,{id:"number",children:"Number"}),"\n",(0,a.jsxs)(n.p,{children:["A custom state that can accept a ",(0,a.jsx)(n.code,{children:"number parameter"})," value."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:".a {\n /* define 'ranking' custom state that accepts a number parameter */\n -st-states: ranking(number);\n}\n\n/* target an element with a state rankin='5' */\n.a:ranking(5) {}\n"})}),"\n",(0,a.jsx)(n.h4,{id:"optional-number-validation",children:"Optional number validation"}),"\n",(0,a.jsx)(n.p,{children:"There are several options that can be used to validate the potential number parameter input:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"min"})," - validates min size of input"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"max"})," - validates max size of input"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"multiplyOf"})," - validates input is multiply of a given value"]}),"\n"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",metastring:'title="number validation definition example"',children:'.a {\n /* validates the targeting number argument */\n -st-states: x(number(min(2), max(6), multipleOf(2)));\n}\n\n/* valid arguments */\n.a:x(2) {}\n.a:x(4) {}\n.a:x(6) {}\n\n/* INVALID! - "multipleOf(2)" */\n.a:x(3) {}\n.a:x(5) {}\n\n/* INVALID! - "min(2)" and "max(6)" */\n.a:x(1) {}\n.a:x(7) {}\n'})}),"\n",(0,a.jsx)(n.h2,{id:"state-inheritance",children:"State inheritance"}),"\n",(0,a.jsxs)(n.p,{children:["When using ",(0,a.jsx)(n.a,{href:"./extend-stylesheet",children:"-st-extends"})," to extend another stylesheet or class, states definitions are inherited, but can also be overridden at any level."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",metastring:'title="base.st.css"',children:".root {\n /* define states 'a' and 'b' for the root of base stylesheet */\n -st-states: a, b;\n}\n"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",metastring:'title="extend.st.css"',children:"@st-import Base from './base.st.css';\n\n.root {\n /* inherits states 'a' and 'b' */\n -st-extends: Base;\n\n /* define states 'c' and 'b' (override 'b' from 'Base') */\n -st-states: c, b;\n}\n\n.root:a {}\n.root:b {}\n.root:c {}\n\n/* OUTPUT */\n.extend__root.base--a {} /* 'a' defined in base */\n.extend__root.extend--b {} /* 'b' defined in base, but overridden in extend */\n.extend__root.extend--c {} /* 'c' defined in extend */\n"})}),"\n",(0,a.jsx)(n.admonition,{title:"Native pseudo-class override",type:"note",children:(0,a.jsxs)(n.p,{children:["You can override the behavior of native pseudo-classes. This can enable you to write ",(0,a.jsx)(n.a,{href:"https://remysharp.com/2010/10/08/what-is-a-polyfill",children:"polyfills"})," for forthcoming CSS pseudo-classes to ensure that when you define a name for a custom pseudo-class, if there are clashes with a new CSS pseudo-class in the future, your app's behavior does not change. We don't recommend you to override an existing CSS pseudo-class unless you want to drive your teammates insane."]})}),"\n",(0,a.jsx)(n.h2,{id:"runtime",children:"Runtime"}),"\n",(0,a.jsxs)(n.p,{children:["To activate a custom state, use the ",(0,a.jsx)(n.a,{href:"./runtime#custom-state-mapping",children:"cssStates"})," or ",(0,a.jsx)(n.a,{href:"./runtime#st-function",children:"st() function"})," to generate the active ",(0,a.jsx)(n.code,{children:"CSS classes"})," states."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { st, classes } from './sheet.st.css'; \n\n// active states\nst(classes.part, {\n isOn: true, // boolean\n size: 'small' // string or enum\n place: 1 // number state\n});\n\n// un-active states - only 'part' class\nst(classes.part, {\n isFirst: false, // boolean\n size: undefined // string or enum\n place: undefined // number\n});\n"})}),"\n",(0,a.jsx)(n.h2,{id:"namespace",children:"Namespace"}),"\n",(0,a.jsx)(n.p,{children:"Stylable generates namespaced CSS classes for custom states:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:".x:bool {}\n.x:enum(option1) {}\n.x:string(word) {}\n.x:number(55) {}\n\n/* OUTPUT */\n.NAMESPACE__x.NAMESPACE--bool {}\n.NAMESPACE__x.NAMESPACE---enum-7-option1 {}\n.NAMESPACE__x.NAMESPACE---string-4-word {}\n.NAMESPACE__x.NAMESPACE---number-2-55 {}\n"})}),"\n",(0,a.jsx)(n.h3,{id:"map-to-selector",children:"Map to selector"}),"\n",(0,a.jsxs)(n.p,{children:["In some cases the default way Stylable transforms a state into a class is not the desired behavior, for example when writing style interface to an external view that might mark state as an attribute, For this ",(0,a.jsx)(n.code,{children:"mapped state"})," can be used to transform the state into a another selector."]}),"\n",(0,a.jsx)(n.p,{children:"To define a global mapped state, pass a selector as a string instead of a type:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:".x {\n -st-states: toggled('.on'), \n loading('[dataSpinner]');\n}\n\n.x:toggled {}\n.x:loading {}\n\n/* OUTPUT */\n.NAMESPACE__x.on {}\n.NAMESPACE__x[dataSpinner] {}\n"})}),"\n",(0,a.jsxs)(n.p,{children:["Additionally a single parameter can be defined after the selector string and referenced in the selector string using ",(0,a.jsx)(n.code,{children:"$0"}),":"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:".x {\n -st-states: size('[size=\"$0\"]', enum(small, medium, large));\n}\n\n.x:size(small) {}\n\n/* OUTPUT */\n.NAMESPACE__x[size='small'] {}\n"})})]})}function h(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>o,x:()=>l});var t=s(6540);const a={},i=t.createContext(a);function o(e){const n=t.useContext(i);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:o(e.components),t.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/e8f63a9c.bc8580ba.js b/assets/js/e8f63a9c.d84a4db7.js similarity index 97% rename from assets/js/e8f63a9c.bc8580ba.js rename to assets/js/e8f63a9c.d84a4db7.js index 2ed33501..ca2f5c81 100644 --- a/assets/js/e8f63a9c.bc8580ba.js +++ b/assets/js/e8f63a9c.d84a4db7.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[4412],{5483:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>s,default:()=>u,frontMatter:()=>o,metadata:()=>l,toc:()=>d});const l=JSON.parse('{"id":"getting-started/rollup-integration","title":"Rollup","description":"The Stylable Rollup integration provides development, build, and bundle capabilities.","source":"@site/docs/getting-started/rollup-integration.md","sourceDirName":"getting-started","slug":"/getting-started/rollup-integration","permalink":"/docs/getting-started/rollup-integration","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/getting-started/rollup-integration.md","tags":[],"version":"current","frontMatter":{"id":"rollup-integration","title":"Rollup"},"sidebar":"Discover","previous":{"title":"NextJS","permalink":"/docs/getting-started/nextjs-integration"},"next":{"title":"Storybook","permalink":"/docs/getting-started/storybook-integration"}}');var i=n(4848),r=n(8453);const o={id:"rollup-integration",title:"Rollup"},s=void 0,a={},d=[{value:"Install",id:"install",level:2},{value:"Configuration",id:"configuration",level:2}];function c(e){const t={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:"The Stylable Rollup integration provides development, build, and bundle capabilities."}),"\n",(0,i.jsx)(t.h2,{id:"install",children:"Install"}),"\n",(0,i.jsxs)(t.p,{children:["Install the ",(0,i.jsx)(t.strong,{children:"@stylable/rollup-plugin"})," as a dev dependency in your local project."]}),"\n",(0,i.jsx)(t.p,{children:"Using npm:"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-bash",children:"npm install @stylable/rollup-plugin --save-dev\n"})}),"\n",(0,i.jsx)(t.p,{children:"Using Yarn:"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-bash",children:"yarn add @stylable/rollup-plugin --dev\n"})}),"\n",(0,i.jsx)(t.h2,{id:"configuration",children:"Configuration"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",metastring:'title="rollup.config.js"',children:"const { stylableRollupPlugin } = require('@stylable/rollup-plugin');\n\nmodule.exports = {\n plugins: [stylableRollupPlugin()],\n};\n"})}),"\n",(0,i.jsxs)(t.p,{children:["For more information on configuring the ",(0,i.jsx)(t.code,{children:"@stylable/rollup-plugin"}),", see the ",(0,i.jsx)(t.a,{href:"https://github.com/wix/stylable/tree/master/packages/rollup-plugin",children:"readme file"}),"."]})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>s});var l=n(6540);const i={},r=l.createContext(i);function o(e){const t=l.useContext(r);return l.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),l.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[4412],{7043:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>s,default:()=>u,frontMatter:()=>o,metadata:()=>l,toc:()=>d});const l=JSON.parse('{"id":"getting-started/rollup-integration","title":"Rollup","description":"The Stylable Rollup integration provides development, build, and bundle capabilities.","source":"@site/docs/getting-started/rollup-integration.md","sourceDirName":"getting-started","slug":"/getting-started/rollup-integration","permalink":"/docs/getting-started/rollup-integration","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/getting-started/rollup-integration.md","tags":[],"version":"current","frontMatter":{"id":"rollup-integration","title":"Rollup"},"sidebar":"Discover","previous":{"title":"NextJS","permalink":"/docs/getting-started/nextjs-integration"},"next":{"title":"Storybook","permalink":"/docs/getting-started/storybook-integration"}}');var i=n(4848),r=n(8453);const o={id:"rollup-integration",title:"Rollup"},s=void 0,a={},d=[{value:"Install",id:"install",level:2},{value:"Configuration",id:"configuration",level:2}];function c(e){const t={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:"The Stylable Rollup integration provides development, build, and bundle capabilities."}),"\n",(0,i.jsx)(t.h2,{id:"install",children:"Install"}),"\n",(0,i.jsxs)(t.p,{children:["Install the ",(0,i.jsx)(t.strong,{children:"@stylable/rollup-plugin"})," as a dev dependency in your local project."]}),"\n",(0,i.jsx)(t.p,{children:"Using npm:"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-bash",children:"npm install @stylable/rollup-plugin --save-dev\n"})}),"\n",(0,i.jsx)(t.p,{children:"Using Yarn:"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-bash",children:"yarn add @stylable/rollup-plugin --dev\n"})}),"\n",(0,i.jsx)(t.h2,{id:"configuration",children:"Configuration"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",metastring:'title="rollup.config.js"',children:"const { stylableRollupPlugin } = require('@stylable/rollup-plugin');\n\nmodule.exports = {\n plugins: [stylableRollupPlugin()],\n};\n"})}),"\n",(0,i.jsxs)(t.p,{children:["For more information on configuring the ",(0,i.jsx)(t.code,{children:"@stylable/rollup-plugin"}),", see the ",(0,i.jsx)(t.a,{href:"https://github.com/wix/stylable/tree/master/packages/rollup-plugin",children:"readme file"}),"."]})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>s});var l=n(6540);const i={},r=l.createContext(i);function o(e){const t=l.useContext(r);return l.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),l.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/ebfcd236.88740659.js b/assets/js/ebfcd236.f0675543.js similarity index 98% rename from assets/js/ebfcd236.88740659.js rename to assets/js/ebfcd236.f0675543.js index 5a469835..d8da9e2a 100644 --- a/assets/js/ebfcd236.88740659.js +++ b/assets/js/ebfcd236.f0675543.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[3746],{6994:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>i,contentTitle:()=>l,default:()=>h,frontMatter:()=>a,metadata:()=>s,toc:()=>c});const s=JSON.parse('{"id":"getting-started/intro","title":"Intro","description":"What is Stylable?","source":"@site/docs/getting-started/get-started.md","sourceDirName":"getting-started","slug":"/getting-started/intro","permalink":"/docs/getting-started/intro","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/getting-started/get-started.md","tags":[],"version":"current","frontMatter":{"id":"intro","title":"Intro"},"sidebar":"Discover","next":{"title":"Boilerplate","permalink":"/docs/getting-started/boilerplate"}}');var r=n(4848),o=n(8453);const a={id:"intro",title:"Intro"},l=void 0,i={},c=[{value:"What is Stylable?",id:"what-is-stylable",level:2},{value:"Where do I start?",id:"where-do-i-start",level:2},{value:"Want to learn more?",id:"want-to-learn-more",level:2}];function d(e){const t={a:"a",h2:"h2",li:"li",p:"p",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h2,{id:"what-is-stylable",children:"What is Stylable?"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Stylable"})," is a CSS preprocessor that enables you to write reusable, highly-performant, styled components. Each component exposes a style API that maps its internal parts so you can reuse components across teams without sacrificing stylability."]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:'Namespace styles to components so they don\'t "leak" and clash with other styles.'}),"\n",(0,r.jsx)(t.li,{children:"Enable custom pseudo-classes and pseudo-elements that abstract the internal structure of a component. These can then be styled externally."}),"\n"]}),"\n",(0,r.jsxs)(t.p,{children:["At build time, the preprocessor converts the ",(0,r.jsx)(t.strong,{children:"Stylable"})," CSS into flat, static, valid, vanilla CSS that works cross-browser."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Stylable"})," is agnostic to the component framework being used, it provides a way to write CSS that can be applied to any framework. All examples on the site use React-like syntax for demo purposes. However, the CSS written with ",(0,r.jsx)(t.strong,{children:"Stylable"})," can easily be used with any other frameworks such as Vue, Angular, or SolidJS."]}),"\n",(0,r.jsx)(t.h2,{id:"where-do-i-start",children:"Where do I start?"}),"\n",(0,r.jsxs)(t.p,{children:["There are currently two ways of starting working with ",(0,r.jsx)(t.strong,{children:"Stylable"}),":"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Quickly start a new project from a ",(0,r.jsx)(t.a,{href:"/docs/getting-started/boilerplate",children:"boilerplate"})]}),"\n",(0,r.jsxs)(t.li,{children:["Integrate into a new or existing project by ",(0,r.jsx)(t.a,{href:"/docs/getting-started/manual-integration",children:"manually configuring"})," ",(0,r.jsx)(t.strong,{children:"Stylable"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(t.p,{children:["Optionally, you can install ",(0,r.jsx)(t.a,{href:"/docs/getting-started/tooling/stylable-intelligence",children:(0,r.jsx)(t.strong,{children:"Stylable Intelligence"})}),", an extension providing IDE support for code completion and diagnostics (currently supported only for Visual Studio Code)."]}),"\n",(0,r.jsx)(t.h2,{id:"want-to-learn-more",children:"Want to learn more?"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Read the handbook"})," - Take a tour through the features of Stylable, and see how to use them in the ",(0,r.jsx)(t.a,{href:"/docs/guides/handbook/intro",children:"handbook guides"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Explore the API docs"})," - Take a look at our ",(0,r.jsx)(t.a,{href:"/docs/references/cheatsheet",children:"specification reference documents"})," to get more acquainted with our code and to see specific code examples. Use the overview as a cheat sheet to help you keep track of ",(0,r.jsx)(t.strong,{children:"Stylable"})," syntax."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Play with Stylable Online"})," - Take Stylable for a spin and see how it works in the ",(0,r.jsx)(t.a,{href:"/playground",children:"Stylable Playground"}),"."]}),"\n"]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>l});var s=n(6540);const r={},o=s.createContext(r);function a(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[3746],{5450:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>i,contentTitle:()=>l,default:()=>h,frontMatter:()=>a,metadata:()=>s,toc:()=>c});const s=JSON.parse('{"id":"getting-started/intro","title":"Intro","description":"What is Stylable?","source":"@site/docs/getting-started/get-started.md","sourceDirName":"getting-started","slug":"/getting-started/intro","permalink":"/docs/getting-started/intro","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/getting-started/get-started.md","tags":[],"version":"current","frontMatter":{"id":"intro","title":"Intro"},"sidebar":"Discover","next":{"title":"Boilerplate","permalink":"/docs/getting-started/boilerplate"}}');var r=n(4848),o=n(8453);const a={id:"intro",title:"Intro"},l=void 0,i={},c=[{value:"What is Stylable?",id:"what-is-stylable",level:2},{value:"Where do I start?",id:"where-do-i-start",level:2},{value:"Want to learn more?",id:"want-to-learn-more",level:2}];function d(e){const t={a:"a",h2:"h2",li:"li",p:"p",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h2,{id:"what-is-stylable",children:"What is Stylable?"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Stylable"})," is a CSS preprocessor that enables you to write reusable, highly-performant, styled components. Each component exposes a style API that maps its internal parts so you can reuse components across teams without sacrificing stylability."]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:'Namespace styles to components so they don\'t "leak" and clash with other styles.'}),"\n",(0,r.jsx)(t.li,{children:"Enable custom pseudo-classes and pseudo-elements that abstract the internal structure of a component. These can then be styled externally."}),"\n"]}),"\n",(0,r.jsxs)(t.p,{children:["At build time, the preprocessor converts the ",(0,r.jsx)(t.strong,{children:"Stylable"})," CSS into flat, static, valid, vanilla CSS that works cross-browser."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Stylable"})," is agnostic to the component framework being used, it provides a way to write CSS that can be applied to any framework. All examples on the site use React-like syntax for demo purposes. However, the CSS written with ",(0,r.jsx)(t.strong,{children:"Stylable"})," can easily be used with any other frameworks such as Vue, Angular, or SolidJS."]}),"\n",(0,r.jsx)(t.h2,{id:"where-do-i-start",children:"Where do I start?"}),"\n",(0,r.jsxs)(t.p,{children:["There are currently two ways of starting working with ",(0,r.jsx)(t.strong,{children:"Stylable"}),":"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Quickly start a new project from a ",(0,r.jsx)(t.a,{href:"/docs/getting-started/boilerplate",children:"boilerplate"})]}),"\n",(0,r.jsxs)(t.li,{children:["Integrate into a new or existing project by ",(0,r.jsx)(t.a,{href:"/docs/getting-started/manual-integration",children:"manually configuring"})," ",(0,r.jsx)(t.strong,{children:"Stylable"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(t.p,{children:["Optionally, you can install ",(0,r.jsx)(t.a,{href:"/docs/getting-started/tooling/stylable-intelligence",children:(0,r.jsx)(t.strong,{children:"Stylable Intelligence"})}),", an extension providing IDE support for code completion and diagnostics (currently supported only for Visual Studio Code)."]}),"\n",(0,r.jsx)(t.h2,{id:"want-to-learn-more",children:"Want to learn more?"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Read the handbook"})," - Take a tour through the features of Stylable, and see how to use them in the ",(0,r.jsx)(t.a,{href:"/docs/guides/handbook/intro",children:"handbook guides"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Explore the API docs"})," - Take a look at our ",(0,r.jsx)(t.a,{href:"/docs/references/cheatsheet",children:"specification reference documents"})," to get more acquainted with our code and to see specific code examples. Use the overview as a cheat sheet to help you keep track of ",(0,r.jsx)(t.strong,{children:"Stylable"})," syntax."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Play with Stylable Online"})," - Take Stylable for a spin and see how it works in the ",(0,r.jsx)(t.a,{href:"/playground",children:"Stylable Playground"}),"."]}),"\n"]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>l});var s=n(6540);const r={},o=s.createContext(r);function a(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/ef20d218.27f76f51.js b/assets/js/ef20d218.c82ab2db.js similarity index 96% rename from assets/js/ef20d218.27f76f51.js rename to assets/js/ef20d218.c82ab2db.js index a4b89e21..88e28394 100644 --- a/assets/js/ef20d218.27f76f51.js +++ b/assets/js/ef20d218.c82ab2db.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[8065],{1801:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>i,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"guides/handbook/classes","title":"Classes","description":"- opening intro paragraph","source":"@site/docs/guides/handbook/structure.md","sourceDirName":"guides/handbook","slug":"/guides/handbook/classes","permalink":"/docs/guides/handbook/classes","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/handbook/structure.md","tags":[],"version":"current","frontMatter":{"id":"classes","title":"Classes"}}');var o=n(4848),r=n(8453);const i={id:"classes",title:"Classes"},a=void 0,l={},c=[{value:"CSS feature",id:"css-feature",level:2}];function d(e){const s={code:"code",h2:"h2",li:"li",pre:"pre",ul:"ul",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsx)(s.li,{children:"opening intro paragraph"}),"\n"]}),"\n",(0,o.jsx)(s.h2,{id:"css-feature",children:"CSS feature"}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsx)(s.li,{children:"syntax definition + mdn link"}),"\n"]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:"SOME EXAMPLE\n"})}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsx)(s.li,{children:"explainer of example above"}),"\n"]})]})}function u(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>i,x:()=>a});var t=n(6540);const o={},r=t.createContext(o);function i(e){const s=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),t.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[8065],{5417:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>i,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"guides/handbook/classes","title":"Classes","description":"- opening intro paragraph","source":"@site/docs/guides/handbook/structure.md","sourceDirName":"guides/handbook","slug":"/guides/handbook/classes","permalink":"/docs/guides/handbook/classes","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/guides/handbook/structure.md","tags":[],"version":"current","frontMatter":{"id":"classes","title":"Classes"}}');var o=n(4848),r=n(8453);const i={id:"classes",title:"Classes"},a=void 0,l={},c=[{value:"CSS feature",id:"css-feature",level:2}];function d(e){const s={code:"code",h2:"h2",li:"li",pre:"pre",ul:"ul",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsx)(s.li,{children:"opening intro paragraph"}),"\n"]}),"\n",(0,o.jsx)(s.h2,{id:"css-feature",children:"CSS feature"}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsx)(s.li,{children:"syntax definition + mdn link"}),"\n"]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:"SOME EXAMPLE\n"})}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsx)(s.li,{children:"explainer of example above"}),"\n"]})]})}function u(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>i,x:()=>a});var t=n(6540);const o={},r=t.createContext(o);function i(e){const s=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),t.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f0dcc6ac.184791cf.js b/assets/js/f0dcc6ac.7d2c19e2.js similarity index 99% rename from assets/js/f0dcc6ac.184791cf.js rename to assets/js/f0dcc6ac.7d2c19e2.js index d7396358..9c492ec1 100644 --- a/assets/js/f0dcc6ac.184791cf.js +++ b/assets/js/f0dcc6ac.7d2c19e2.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[7001],{7004:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>o,default:()=>p,frontMatter:()=>r,metadata:()=>a,toc:()=>l});const a=JSON.parse('{"id":"references/contains","title":"Containers","description":"CSS container queries are used to target and style an element depending on the conditions of a container it is nested within.","source":"@site/docs/references/contains.md","sourceDirName":"references","slug":"/references/contains","permalink":"/docs/references/contains","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/contains.md","tags":[],"version":"current","frontMatter":{"id":"contains","title":"Containers"},"sidebar":"Specification Reference","previous":{"title":"Class Selector","permalink":"/docs/references/class-selectors"},"next":{"title":"Custom Property","permalink":"/docs/references/css-vars"}}');var s=t(4848),i=t(8453);const r={id:"contains",title:"Containers"},o=void 0,c={},l=[{value:"Syntax",id:"syntax",level:2},{value:"Import and Export",id:"import-and-export",level:2},{value:"Runtime",id:"runtime",level:2},{value:"Namespace",id:"namespace",level:2},{value:"Disable namespace",id:"disable-namespace",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.p,{children:"CSS container queries are used to target and style an element depending on the conditions of a container it is nested within."}),"\n",(0,s.jsxs)(n.p,{children:["This page goes over how Stylable handles the ",(0,s.jsx)(n.code,{children:"container-name"})," declaration and the ",(0,s.jsx)(n.code,{children:"@container"})," at-rule, for more details about the language feature itself, check out the following resources:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries",children:"MDN CSS container queries"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"https://drafts.csswg.org/css-contain-3",children:"CSS contains spec"})}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"syntax",children:"Syntax"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Container definition"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:".panel {\n /* longhand */\n container-name: panel;\n\n /* shorthand */\n container-name: panel / inline-size;\n\n /* longhand with multiple names */\n container-name: panel side;\n}\n"})}),"\n",(0,s.jsx)(n.admonition,{title:"soft definition",type:"note",children:(0,s.jsxs)(n.p,{children:["A container name symbol is defined using the ",(0,s.jsx)(n.code,{children:"container/container-name"})," declaration only when not explicitly defined by an import or a ",(0,s.jsxs)(n.a,{href:"#disable-namespace",children:["global ",(0,s.jsx)(n.code,{children:"@container"})," definition"]}),"."]})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Usage"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"@container panel (width <= 250px) {\n /* style nested rules */\n}\n"})}),"\n",(0,s.jsx)(n.h2,{id:"import-and-export",children:"Import and Export"}),"\n",(0,s.jsxs)(n.p,{children:["An exported container can be imported into another stylesheet with the ",(0,s.jsx)(n.a,{href:"/docs/references/imports",children:"@st-import"})," at-rule."]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Style nested container rules"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* get 'panel' container definition from another stylesheet */\n@st-import [container(panel)] from './x.st.css';\n\n@container panel (width <= 150px) {\n /* nested container rules */\n}\n"})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"More import examples"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* map 'panel' container to local name 'x-panel' */\n@st-import [container(panel as x-panel)] from './x.st.css';\n\n/* import multiple containers */\n@st-import [container(panel, header)] from './x.st.css';\n"})}),"\n",(0,s.jsx)(n.h2,{id:"runtime",children:"Runtime"}),"\n",(0,s.jsx)(n.p,{children:"A Container definition can be accessed to generate dynamic styles using the containers mapping on the Stylable runtime stylesheet:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"import { containers } from './sheet.st.css';\n\n// map to target namespaced container\ncontainers.panel;\n"})}),"\n",(0,s.jsx)(n.h2,{id:"namespace",children:"Namespace"}),"\n",(0,s.jsx)(n.p,{children:"Stylable automatically namespaces any container name according to the stylesheet it is defined in:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:".x {\n container: panel;\n}\n\n@container panel (width > 100px) {}\n\n/* OUTPUT */\n.x {\n container: NAMESPACE__panel;\n}\n\n@container NAMESPACE__panel (width > 100px) {}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"disable-namespace",children:"Disable namespace"}),"\n",(0,s.jsxs)(n.p,{children:["In some cases the default namespace behavior is unwanted. In such cases, ",(0,s.jsx)(n.code,{children:"st-global"})," can be used to set a container name as global:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:".x {\n container: st-global(panel);\n}\n\n@container st-global(panel) (width > 100px) {}\n\n/* OUTPUT */\n.x {\n container: panel;\n}\n\n@container panel (width > 100px) {}\n"})}),"\n",(0,s.jsxs)(n.p,{children:["::note global without symbol deinition\nSetting ",(0,s.jsx)(n.code,{children:"st-global"})," around the container name in either the declaration or container query only references a global container name, without creating a symbol that can later be imported or referenced.\n::"]}),"\n",(0,s.jsxs)(n.p,{children:["To register a global container name symbol, that can be imported and referenced by other stylesheets, use the ",(0,s.jsx)(n.code,{children:"@container"})," at-rule with no body or query:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* global panel container name definition */\n@container st-global(panel);\n\n.x {\n container: panel;\n}\n@container panel (width > 100px) {}\n\n\n/* OUTPUT */\n\n.x {\n container: panel;\n}\n@container panel (width > 100px) {}\n"})})]})}function p(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>o});var a=t(6540);const s={},i=a.createContext(s);function r(e){const n=a.useContext(i);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),a.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[7001],{6048:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>o,default:()=>p,frontMatter:()=>r,metadata:()=>a,toc:()=>l});const a=JSON.parse('{"id":"references/contains","title":"Containers","description":"CSS container queries are used to target and style an element depending on the conditions of a container it is nested within.","source":"@site/docs/references/contains.md","sourceDirName":"references","slug":"/references/contains","permalink":"/docs/references/contains","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/contains.md","tags":[],"version":"current","frontMatter":{"id":"contains","title":"Containers"},"sidebar":"Specification Reference","previous":{"title":"Class Selector","permalink":"/docs/references/class-selectors"},"next":{"title":"Custom Property","permalink":"/docs/references/css-vars"}}');var s=t(4848),i=t(8453);const r={id:"contains",title:"Containers"},o=void 0,c={},l=[{value:"Syntax",id:"syntax",level:2},{value:"Import and Export",id:"import-and-export",level:2},{value:"Runtime",id:"runtime",level:2},{value:"Namespace",id:"namespace",level:2},{value:"Disable namespace",id:"disable-namespace",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.p,{children:"CSS container queries are used to target and style an element depending on the conditions of a container it is nested within."}),"\n",(0,s.jsxs)(n.p,{children:["This page goes over how Stylable handles the ",(0,s.jsx)(n.code,{children:"container-name"})," declaration and the ",(0,s.jsx)(n.code,{children:"@container"})," at-rule, for more details about the language feature itself, check out the following resources:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries",children:"MDN CSS container queries"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"https://drafts.csswg.org/css-contain-3",children:"CSS contains spec"})}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"syntax",children:"Syntax"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Container definition"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:".panel {\n /* longhand */\n container-name: panel;\n\n /* shorthand */\n container-name: panel / inline-size;\n\n /* longhand with multiple names */\n container-name: panel side;\n}\n"})}),"\n",(0,s.jsx)(n.admonition,{title:"soft definition",type:"note",children:(0,s.jsxs)(n.p,{children:["A container name symbol is defined using the ",(0,s.jsx)(n.code,{children:"container/container-name"})," declaration only when not explicitly defined by an import or a ",(0,s.jsxs)(n.a,{href:"#disable-namespace",children:["global ",(0,s.jsx)(n.code,{children:"@container"})," definition"]}),"."]})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Usage"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"@container panel (width <= 250px) {\n /* style nested rules */\n}\n"})}),"\n",(0,s.jsx)(n.h2,{id:"import-and-export",children:"Import and Export"}),"\n",(0,s.jsxs)(n.p,{children:["An exported container can be imported into another stylesheet with the ",(0,s.jsx)(n.a,{href:"/docs/references/imports",children:"@st-import"})," at-rule."]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Style nested container rules"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* get 'panel' container definition from another stylesheet */\n@st-import [container(panel)] from './x.st.css';\n\n@container panel (width <= 150px) {\n /* nested container rules */\n}\n"})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"More import examples"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* map 'panel' container to local name 'x-panel' */\n@st-import [container(panel as x-panel)] from './x.st.css';\n\n/* import multiple containers */\n@st-import [container(panel, header)] from './x.st.css';\n"})}),"\n",(0,s.jsx)(n.h2,{id:"runtime",children:"Runtime"}),"\n",(0,s.jsx)(n.p,{children:"A Container definition can be accessed to generate dynamic styles using the containers mapping on the Stylable runtime stylesheet:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:"import { containers } from './sheet.st.css';\n\n// map to target namespaced container\ncontainers.panel;\n"})}),"\n",(0,s.jsx)(n.h2,{id:"namespace",children:"Namespace"}),"\n",(0,s.jsx)(n.p,{children:"Stylable automatically namespaces any container name according to the stylesheet it is defined in:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:".x {\n container: panel;\n}\n\n@container panel (width > 100px) {}\n\n/* OUTPUT */\n.x {\n container: NAMESPACE__panel;\n}\n\n@container NAMESPACE__panel (width > 100px) {}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"disable-namespace",children:"Disable namespace"}),"\n",(0,s.jsxs)(n.p,{children:["In some cases the default namespace behavior is unwanted. In such cases, ",(0,s.jsx)(n.code,{children:"st-global"})," can be used to set a container name as global:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:".x {\n container: st-global(panel);\n}\n\n@container st-global(panel) (width > 100px) {}\n\n/* OUTPUT */\n.x {\n container: panel;\n}\n\n@container panel (width > 100px) {}\n"})}),"\n",(0,s.jsxs)(n.p,{children:["::note global without symbol deinition\nSetting ",(0,s.jsx)(n.code,{children:"st-global"})," around the container name in either the declaration or container query only references a global container name, without creating a symbol that can later be imported or referenced.\n::"]}),"\n",(0,s.jsxs)(n.p,{children:["To register a global container name symbol, that can be imported and referenced by other stylesheets, use the ",(0,s.jsx)(n.code,{children:"@container"})," at-rule with no body or query:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-css",children:"/* global panel container name definition */\n@container st-global(panel);\n\n.x {\n container: panel;\n}\n@container panel (width > 100px) {}\n\n\n/* OUTPUT */\n\n.x {\n container: panel;\n}\n@container panel (width > 100px) {}\n"})})]})}function p(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>o});var a=t(6540);const s={},i=a.createContext(s);function r(e){const n=a.useContext(i);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),a.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f242c874.2420e882.js b/assets/js/f242c874.5c4c0ad4.js similarity index 99% rename from assets/js/f242c874.2420e882.js rename to assets/js/f242c874.5c4c0ad4.js index 46bf4791..506cc5c0 100644 --- a/assets/js/f242c874.2420e882.js +++ b/assets/js/f242c874.5c4c0ad4.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[8829],{2135:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>i,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>s,toc:()=>c});const s=JSON.parse('{"id":"references/pseudo-elements","title":"Pseudo-Element","description":"In addition to CSS\'s native pseudo-elements, like ::backdrop, Stylable allow you to define custom pseudo-elements so that you can target and apply styles to inner parts of your components.","source":"@site/docs/references/pseudo-elements.md","sourceDirName":"references","slug":"/references/pseudo-elements","permalink":"/docs/references/pseudo-elements","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/pseudo-elements.md","tags":[],"version":"current","frontMatter":{"id":"pseudo-elements","title":"Pseudo-Element"},"sidebar":"Specification Reference","previous":{"title":"Pseudo-Class","permalink":"/docs/references/pseudo-classes"},"next":{"title":"Type Selector","permalink":"/docs/references/type-selectors"}}');var o=t(4848),r=t(8453);const a={id:"pseudo-elements",title:"Pseudo-Element"},l=void 0,i={},c=[{value:"Syntax",id:"syntax",level:2},{value:"Style a component",id:"style-a-component",level:2},{value:"Style a variant",id:"style-a-variant",level:2},{value:"Define",id:"define",level:2},{value:"Element inheritance",id:"element-inheritance",level:3},{value:"Build transformation",id:"build-transformation",level:2}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(n.p,{children:["In addition to CSS's native pseudo-elements, like ",(0,o.jsx)(n.code,{children:"::before"})," and ",(0,o.jsx)(n.code,{children:"::backdrop"}),", Stylable allow you to define custom pseudo-elements so that you can target and apply styles to inner parts of your components."]}),"\n",(0,o.jsx)(n.p,{children:"This page goes over how Stylable handles custom pseudo-elements, for more details about the language feature itself, checkout the following resources:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements",children:"MDN pseudo-element"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://www.w3.org/TR/CSS22/selector.html#pseudo-element-selectors",children:"pseudo-element in spec"})}),"\n"]}),"\n",(0,o.jsx)(n.h2,{id:"syntax",children:"Syntax"}),"\n",(0,o.jsxs)(n.p,{children:["To target an internal element, Use the pseudo-element prefix ",(0,o.jsx)(n.code,{children:"::"})," with the part name."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-css",children:"Component::firstlevel::secondlevel {}\n"})}),"\n",(0,o.jsx)(n.admonition,{title:"deep pseudo-elements",type:"info",children:(0,o.jsxs)(n.p,{children:["Custom pseudo-elements are not limited to the end of a selector like native pseudo-elements, and can be chained. For example, you can access the label of a navigation button from a gallery: ",(0,o.jsx)(n.code,{children:"Gallery::navBtn::label"})]})}),"\n",(0,o.jsx)(n.h2,{id:"style-a-component",children:"Style a component"}),"\n",(0,o.jsxs)(n.p,{children:["Customizing ",(0,o.jsx)(n.strong,{children:"all component instances"})," nested under a stylesheet using the imported ",(0,o.jsx)(n.a,{href:"/docs/references/type-selectors#component-element",children:"component type selector"}),"."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-css",children:"@st-import Comp from './comp.st.css';\n\n/* target Comp internal part */\n.root Comp::part {/* customize */}\n"})}),"\n",(0,o.jsx)(n.h2,{id:"style-a-variant",children:"Style a variant"}),"\n",(0,o.jsxs)(n.p,{children:["Customizing a variant class of a component by ",(0,o.jsx)(n.a,{href:"/docs/references/extend-stylesheet",children:"extending"})," a class with the component stylesheet."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-css",metastring:'title="page.st.css"',children:"@st-import Comp from './comp.st.css';\n\n.compVariant {\n /* set compVariant to inherit from Comp */\n -st-extends: Comp;\n}\n/* target compVariant internal part (inherited from Comp) */\n.compVariant::part {/* customize */}\n"})}),"\n",(0,o.jsx)(n.p,{children:"Then set the variant class to the component instance."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx",metastring:'title="page.jsx"',children:"import Comp from './comp';\nimport { classes } from './page.st.css';\n\nconst Page = () => {\n return (\n <div>\n /* customize Comp with compVariant class */\n <Comp class={classes.compVariant}>\n </div>\n );\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"define",children:"Define"}),"\n",(0,o.jsxs)(n.p,{children:["Any ",(0,o.jsx)(n.a,{href:"/docs/references/class-selectors",children:"CSS class"})," that is exported from a stylesheet is accessible as a pseudo-element."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-css",metastring:'title="comp.st.css"',children:"/* available as ::part for this stylesheet */\n.part {} \n"})}),"\n",(0,o.jsxs)(n.p,{children:["Additionally a ",(0,o.jsx)(n.a,{href:"/docs/references/custom-selectors",children:"custom-selector"})," defined within a stylesheet is exposed as a custom pseudo-element and will take precedence over a class with the same name."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-css",metastring:'title="comp.st.css"',children:"/* available as ::part for this stylesheet\n and preserves the direct child combinator\n when used */\n@custom-selector :--part .root > .part; \n"})}),"\n",(0,o.jsx)(n.admonition,{title:"Native pseudo-element override",type:"caution",children:(0,o.jsxs)(n.p,{children:["Override of native pseudo-elements is possible, however it is ",(0,o.jsx)(n.strong,{children:"strongly discouraged"}),"."]})}),"\n",(0,o.jsx)(n.h3,{id:"element-inheritance",children:"Element inheritance"}),"\n",(0,o.jsxs)(n.p,{children:["An extending ",(0,o.jsx)(n.a,{href:"/docs/references/root",children:"stylesheet root"})," automatically inherits any pseudo-elements from the extended definition, and can then override them by defining its own public parts."]}),"\n",(0,o.jsx)(n.h2,{id:"build-transformation",children:"Build transformation"}),"\n",(0,o.jsx)(n.p,{children:"Custom pseudo-elements are transformed in build-time to target the internal selector they represent."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-css",metastring:'title="comp.st.css"',children:".part {}\n@custom-selector :--directPart .root > .part; \n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-css",metastring:'title="page.st.css"',children:"@st-import Comp from './comp.st.css';\n\n.root {\n -st-extends: Comp;\n}\n\n.root::part {}\n.root::directPart {}\n\n/* OUTPUT */\n.page__root .comp__part {}\n.page__root > .comp__part {}\n"})})]})}function p(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>a,x:()=>l});var s=t(6540);const o={},r=s.createContext(o);function a(e){const n=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),s.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[8829],{6023:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>i,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>s,toc:()=>c});const s=JSON.parse('{"id":"references/pseudo-elements","title":"Pseudo-Element","description":"In addition to CSS\'s native pseudo-elements, like ::backdrop, Stylable allow you to define custom pseudo-elements so that you can target and apply styles to inner parts of your components.","source":"@site/docs/references/pseudo-elements.md","sourceDirName":"references","slug":"/references/pseudo-elements","permalink":"/docs/references/pseudo-elements","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/pseudo-elements.md","tags":[],"version":"current","frontMatter":{"id":"pseudo-elements","title":"Pseudo-Element"},"sidebar":"Specification Reference","previous":{"title":"Pseudo-Class","permalink":"/docs/references/pseudo-classes"},"next":{"title":"Type Selector","permalink":"/docs/references/type-selectors"}}');var o=t(4848),r=t(8453);const a={id:"pseudo-elements",title:"Pseudo-Element"},l=void 0,i={},c=[{value:"Syntax",id:"syntax",level:2},{value:"Style a component",id:"style-a-component",level:2},{value:"Style a variant",id:"style-a-variant",level:2},{value:"Define",id:"define",level:2},{value:"Element inheritance",id:"element-inheritance",level:3},{value:"Build transformation",id:"build-transformation",level:2}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(n.p,{children:["In addition to CSS's native pseudo-elements, like ",(0,o.jsx)(n.code,{children:"::before"})," and ",(0,o.jsx)(n.code,{children:"::backdrop"}),", Stylable allow you to define custom pseudo-elements so that you can target and apply styles to inner parts of your components."]}),"\n",(0,o.jsx)(n.p,{children:"This page goes over how Stylable handles custom pseudo-elements, for more details about the language feature itself, checkout the following resources:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements",children:"MDN pseudo-element"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"https://www.w3.org/TR/CSS22/selector.html#pseudo-element-selectors",children:"pseudo-element in spec"})}),"\n"]}),"\n",(0,o.jsx)(n.h2,{id:"syntax",children:"Syntax"}),"\n",(0,o.jsxs)(n.p,{children:["To target an internal element, Use the pseudo-element prefix ",(0,o.jsx)(n.code,{children:"::"})," with the part name."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-css",children:"Component::firstlevel::secondlevel {}\n"})}),"\n",(0,o.jsx)(n.admonition,{title:"deep pseudo-elements",type:"info",children:(0,o.jsxs)(n.p,{children:["Custom pseudo-elements are not limited to the end of a selector like native pseudo-elements, and can be chained. For example, you can access the label of a navigation button from a gallery: ",(0,o.jsx)(n.code,{children:"Gallery::navBtn::label"})]})}),"\n",(0,o.jsx)(n.h2,{id:"style-a-component",children:"Style a component"}),"\n",(0,o.jsxs)(n.p,{children:["Customizing ",(0,o.jsx)(n.strong,{children:"all component instances"})," nested under a stylesheet using the imported ",(0,o.jsx)(n.a,{href:"/docs/references/type-selectors#component-element",children:"component type selector"}),"."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-css",children:"@st-import Comp from './comp.st.css';\n\n/* target Comp internal part */\n.root Comp::part {/* customize */}\n"})}),"\n",(0,o.jsx)(n.h2,{id:"style-a-variant",children:"Style a variant"}),"\n",(0,o.jsxs)(n.p,{children:["Customizing a variant class of a component by ",(0,o.jsx)(n.a,{href:"/docs/references/extend-stylesheet",children:"extending"})," a class with the component stylesheet."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-css",metastring:'title="page.st.css"',children:"@st-import Comp from './comp.st.css';\n\n.compVariant {\n /* set compVariant to inherit from Comp */\n -st-extends: Comp;\n}\n/* target compVariant internal part (inherited from Comp) */\n.compVariant::part {/* customize */}\n"})}),"\n",(0,o.jsx)(n.p,{children:"Then set the variant class to the component instance."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx",metastring:'title="page.jsx"',children:"import Comp from './comp';\nimport { classes } from './page.st.css';\n\nconst Page = () => {\n return (\n <div>\n /* customize Comp with compVariant class */\n <Comp class={classes.compVariant}>\n </div>\n );\n};\n"})}),"\n",(0,o.jsx)(n.h2,{id:"define",children:"Define"}),"\n",(0,o.jsxs)(n.p,{children:["Any ",(0,o.jsx)(n.a,{href:"/docs/references/class-selectors",children:"CSS class"})," that is exported from a stylesheet is accessible as a pseudo-element."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-css",metastring:'title="comp.st.css"',children:"/* available as ::part for this stylesheet */\n.part {} \n"})}),"\n",(0,o.jsxs)(n.p,{children:["Additionally a ",(0,o.jsx)(n.a,{href:"/docs/references/custom-selectors",children:"custom-selector"})," defined within a stylesheet is exposed as a custom pseudo-element and will take precedence over a class with the same name."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-css",metastring:'title="comp.st.css"',children:"/* available as ::part for this stylesheet\n and preserves the direct child combinator\n when used */\n@custom-selector :--part .root > .part; \n"})}),"\n",(0,o.jsx)(n.admonition,{title:"Native pseudo-element override",type:"caution",children:(0,o.jsxs)(n.p,{children:["Override of native pseudo-elements is possible, however it is ",(0,o.jsx)(n.strong,{children:"strongly discouraged"}),"."]})}),"\n",(0,o.jsx)(n.h3,{id:"element-inheritance",children:"Element inheritance"}),"\n",(0,o.jsxs)(n.p,{children:["An extending ",(0,o.jsx)(n.a,{href:"/docs/references/root",children:"stylesheet root"})," automatically inherits any pseudo-elements from the extended definition, and can then override them by defining its own public parts."]}),"\n",(0,o.jsx)(n.h2,{id:"build-transformation",children:"Build transformation"}),"\n",(0,o.jsx)(n.p,{children:"Custom pseudo-elements are transformed in build-time to target the internal selector they represent."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-css",metastring:'title="comp.st.css"',children:".part {}\n@custom-selector :--directPart .root > .part; \n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-css",metastring:'title="page.st.css"',children:"@st-import Comp from './comp.st.css';\n\n.root {\n -st-extends: Comp;\n}\n\n.root::part {}\n.root::directPart {}\n\n/* OUTPUT */\n.page__root .comp__part {}\n.page__root > .comp__part {}\n"})})]})}function p(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>a,x:()=>l});var s=t(6540);const o={},r=s.createContext(o);function a(e){const n=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),s.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f5df1cd5.5e183045.js b/assets/js/f5df1cd5.2cd498a2.js similarity index 98% rename from assets/js/f5df1cd5.5e183045.js rename to assets/js/f5df1cd5.2cd498a2.js index 19b24845..8c3a0af1 100644 --- a/assets/js/f5df1cd5.5e183045.js +++ b/assets/js/f5df1cd5.2cd498a2.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[5619],{8760:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>o,contentTitle:()=>l,default:()=>d,frontMatter:()=>t,metadata:()=>a,toc:()=>c});const a=JSON.parse('{"id":"references/keyframes","title":"Keyframes","description":"The @keyframes CSS at-rule is used to define an animation that can be referenced to animate a DOM element.","source":"@site/docs/references/keyframes.md","sourceDirName":"references","slug":"/references/keyframes","permalink":"/docs/references/keyframes","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/keyframes.md","tags":[],"version":"current","frontMatter":{"id":"keyframes","title":"Keyframes"},"sidebar":"Specification Reference","previous":{"title":"Custom Property","permalink":"/docs/references/css-vars"},"next":{"title":"Layer","permalink":"/docs/references/layer"}}');var r=s(4848),i=s(8453);const t={id:"keyframes",title:"Keyframes"},l=void 0,o={},c=[{value:"Syntax",id:"syntax",level:2},{value:"Import and Export",id:"import-and-export",level:2},{value:"Runtime",id:"runtime",level:2},{value:"Namespace",id:"namespace",level:2},{value:"Disable namespace",id:"disable-namespace",level:3}];function m(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"@keyframes"})," CSS at-rule is used to define an animation that can be referenced to animate a DOM element."]}),"\n",(0,r.jsxs)(n.p,{children:["This page goes over how Stylable handles ",(0,r.jsx)(n.code,{children:"@keyframes"}),", for more details about the language feature itself, checkout the following resources:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes",children:"MDN @keyframes"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"https://drafts.csswg.org/css-animations/#keyframes",children:"CSS animation spec"})}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"syntax",children:"Syntax"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Keyframes definition"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* empty definition */\n@keyframes slide {}\n\n/* animation definition */\n@keyframes jump {\n from { color: red }\n to { color: green }\n}\n\n/* percentage keyframes */\n@keyframes jump {\n 0% { color: red }\n 50% { color: green }\n 100% { color: blue }\n}\n"})}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Keyframes usage"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:".x {\n /* within animation shorthand */\n animation: slide 3s ease-out infinite;\n}\n.y {\n /* same as above */\n animation-name: slide;\n animation-duration: 3s;\n animation-timing-function: ease-out;\n animation-iteration-count: infinite;\n}\n"})}),"\n",(0,r.jsx)(n.h2,{id:"import-and-export",children:"Import and Export"}),"\n",(0,r.jsxs)(n.p,{children:["An exported keyframes can be imported into another stylesheet with the ",(0,r.jsx)(n.a,{href:"/docs/references/imports",children:"@st-import"})," atrule."]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Insert rules into imported layer"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* get 'slide' keyframes definition from another stylesheet */\n@st-import [keyframes(slide)] from './x.st.css';\n\n.x {\n /* use in animation */\n animation-name: slide;\n}\n"})}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"More import examples"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* map 'slide' keyframes to local name 'x-slide' */\n@st-import [keyframes(slide as x-slide)] from './x.st.css';\n\n/* import multiple keyframes */\n@st-import [keyframes(slide, jump)] from './x.st.css';\n"})}),"\n",(0,r.jsx)(n.h2,{id:"runtime",children:"Runtime"}),"\n",(0,r.jsx)(n.p,{children:"A Keyframes definition can be accessed for dynamic styles using the keyframes mapping on the Stylable runtime stylesheet:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"import { keyframes } from './sheet.st.css';\n\n// map to target namespaced keyframes\nkeyframes.jump;\n"})}),"\n",(0,r.jsx)(n.h2,{id:"namespace",children:"Namespace"}),"\n",(0,r.jsx)(n.p,{children:"Stylable automatically namespaces any keyframes name according to the stylesheet it is defined in:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"@keyframes slide {}\n\n.x {\n animation-name: slide;\n}\n\n/* OUTPUT */\n@keyframes NAMESPACE__slide {}\n\n.x {\n animation-name: NAMESPACE__slide;\n}\n"})}),"\n",(0,r.jsx)(n.h3,{id:"disable-namespace",children:"Disable namespace"}),"\n",(0,r.jsxs)(n.p,{children:["In some cases the default namespace behavior is unwanted. In such cases, ",(0,r.jsx)(n.code,{children:"st-global"})," can be used to mark a keyframes definition as global:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"@keyframes st-global(slide) {}\n.x {\n animation-name: slide;\n}\n\n/* OUTPUT */\n@keyframes slide {}\n.x {\n animation-name: slide; /* no namespace */\n}\n"})})]})}function d(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>t,x:()=>l});var a=s(6540);const r={},i=a.createContext(r);function t(e){const n=a.useContext(i);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:t(e.components),a.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[5619],{7178:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>o,contentTitle:()=>l,default:()=>d,frontMatter:()=>t,metadata:()=>a,toc:()=>c});const a=JSON.parse('{"id":"references/keyframes","title":"Keyframes","description":"The @keyframes CSS at-rule is used to define an animation that can be referenced to animate a DOM element.","source":"@site/docs/references/keyframes.md","sourceDirName":"references","slug":"/references/keyframes","permalink":"/docs/references/keyframes","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/keyframes.md","tags":[],"version":"current","frontMatter":{"id":"keyframes","title":"Keyframes"},"sidebar":"Specification Reference","previous":{"title":"Custom Property","permalink":"/docs/references/css-vars"},"next":{"title":"Layer","permalink":"/docs/references/layer"}}');var r=s(4848),i=s(8453);const t={id:"keyframes",title:"Keyframes"},l=void 0,o={},c=[{value:"Syntax",id:"syntax",level:2},{value:"Import and Export",id:"import-and-export",level:2},{value:"Runtime",id:"runtime",level:2},{value:"Namespace",id:"namespace",level:2},{value:"Disable namespace",id:"disable-namespace",level:3}];function m(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"@keyframes"})," CSS at-rule is used to define an animation that can be referenced to animate a DOM element."]}),"\n",(0,r.jsxs)(n.p,{children:["This page goes over how Stylable handles ",(0,r.jsx)(n.code,{children:"@keyframes"}),", for more details about the language feature itself, checkout the following resources:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes",children:"MDN @keyframes"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"https://drafts.csswg.org/css-animations/#keyframes",children:"CSS animation spec"})}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"syntax",children:"Syntax"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Keyframes definition"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* empty definition */\n@keyframes slide {}\n\n/* animation definition */\n@keyframes jump {\n from { color: red }\n to { color: green }\n}\n\n/* percentage keyframes */\n@keyframes jump {\n 0% { color: red }\n 50% { color: green }\n 100% { color: blue }\n}\n"})}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Keyframes usage"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:".x {\n /* within animation shorthand */\n animation: slide 3s ease-out infinite;\n}\n.y {\n /* same as above */\n animation-name: slide;\n animation-duration: 3s;\n animation-timing-function: ease-out;\n animation-iteration-count: infinite;\n}\n"})}),"\n",(0,r.jsx)(n.h2,{id:"import-and-export",children:"Import and Export"}),"\n",(0,r.jsxs)(n.p,{children:["An exported keyframes can be imported into another stylesheet with the ",(0,r.jsx)(n.a,{href:"/docs/references/imports",children:"@st-import"})," atrule."]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Insert rules into imported layer"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* get 'slide' keyframes definition from another stylesheet */\n@st-import [keyframes(slide)] from './x.st.css';\n\n.x {\n /* use in animation */\n animation-name: slide;\n}\n"})}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"More import examples"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"/* map 'slide' keyframes to local name 'x-slide' */\n@st-import [keyframes(slide as x-slide)] from './x.st.css';\n\n/* import multiple keyframes */\n@st-import [keyframes(slide, jump)] from './x.st.css';\n"})}),"\n",(0,r.jsx)(n.h2,{id:"runtime",children:"Runtime"}),"\n",(0,r.jsx)(n.p,{children:"A Keyframes definition can be accessed for dynamic styles using the keyframes mapping on the Stylable runtime stylesheet:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"import { keyframes } from './sheet.st.css';\n\n// map to target namespaced keyframes\nkeyframes.jump;\n"})}),"\n",(0,r.jsx)(n.h2,{id:"namespace",children:"Namespace"}),"\n",(0,r.jsx)(n.p,{children:"Stylable automatically namespaces any keyframes name according to the stylesheet it is defined in:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"@keyframes slide {}\n\n.x {\n animation-name: slide;\n}\n\n/* OUTPUT */\n@keyframes NAMESPACE__slide {}\n\n.x {\n animation-name: NAMESPACE__slide;\n}\n"})}),"\n",(0,r.jsx)(n.h3,{id:"disable-namespace",children:"Disable namespace"}),"\n",(0,r.jsxs)(n.p,{children:["In some cases the default namespace behavior is unwanted. In such cases, ",(0,r.jsx)(n.code,{children:"st-global"})," can be used to mark a keyframes definition as global:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:"@keyframes st-global(slide) {}\n.x {\n animation-name: slide;\n}\n\n/* OUTPUT */\n@keyframes slide {}\n.x {\n animation-name: slide; /* no namespace */\n}\n"})})]})}function d(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>t,x:()=>l});var a=s(6540);const r={},i=a.createContext(r);function t(e){const n=a.useContext(i);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:t(e.components),a.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/fde4315e.9ee4e1b1.js b/assets/js/fde4315e.e2e2b344.js similarity index 99% rename from assets/js/fde4315e.9ee4e1b1.js rename to assets/js/fde4315e.e2e2b344.js index 8f68ba3a..670e4a6a 100644 --- a/assets/js/fde4315e.9ee4e1b1.js +++ b/assets/js/fde4315e.e2e2b344.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[1480],{2459:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>i,contentTitle:()=>l,default:()=>m,frontMatter:()=>r,metadata:()=>o,toc:()=>a});const o=JSON.parse('{"id":"references/custom-selectors","title":"Custom Selector","description":"You use custom selectors to define an alias that can match complex selectors.","source":"@site/docs/references/custom-selectors.md","sourceDirName":"references","slug":"/references/custom-selectors","permalink":"/docs/references/custom-selectors","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/custom-selectors.md","tags":[],"version":"current","frontMatter":{"id":"custom-selectors","title":"Custom Selector"},"sidebar":"Specification Reference","previous":{"title":"url()","permalink":"/docs/references/using-external-assets"},"next":{"title":"Extend","permalink":"/docs/references/extend-stylesheet"}}');var t=n(4848),c=n(8453);const r={id:"custom-selectors",title:"Custom Selector"},l=void 0,i={},a=[{value:"Usage",id:"usage",level:2},{value:"Expose pseudo-element",id:"expose-pseudo-element",level:3},{value:"Use cases",id:"use-cases",level:2},{value:"Container and recursive components",id:"container-and-recursive-components",level:3},{value:"Expose inner parts that are deeply defined",id:"expose-inner-parts-that-are-deeply-defined",level:3},{value:"Combination selector",id:"combination-selector",level:3},{value:"Group of selectors",id:"group-of-selectors",level:3},{value:"Issues to consider",id:"issues-to-consider",level:4}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,c.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(s.p,{children:["You use ",(0,t.jsx)(s.a,{href:"https://drafts.csswg.org/css-extensions/#custom-selectors",children:"custom selectors"})," to define an alias that can match complex selectors."]}),"\n",(0,t.jsx)(s.p,{children:"For example, a specific type of button within a form that appears only when hovered can be defined as a custom selector. By defining the button as a custom selector with its own name, the button is exposed in the API and available for use by using just the custom selector name."}),"\n",(0,t.jsx)(s.p,{children:"You could also use custom selectors to define a group of selectors with one name. For example, you can access all the headings on a page as one custom selector. This could be useful if you want to style just their color the same."}),"\n",(0,t.jsx)(s.h2,{id:"usage",children:"Usage"}),"\n",(0,t.jsxs)(s.p,{children:["The following code maps the alias name ",(0,t.jsx)(s.code,{children:"controlBtn"})," that matches any ",(0,t.jsx)(s.code,{children:".btn"})," CSS class nested under the ",(0,t.jsx)(s.code,{children:".controls"})," CSS class."]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",metastring:'title="comp.st.css"',children:"@custom-selector :--controlBtn .controls .btn;\n/* \nselector: .comp__controls .comp__btn \n*/\n:--controlBtn {\n border: 1px solid grey;\n}\n/* \nselector: .comp__controls .comp__btn:hover \n*/\n:--controlBtn:hover {\n border-color: red;\n}\n"})}),"\n",(0,t.jsx)(s.h3,{id:"expose-pseudo-element",children:"Expose pseudo-element"}),"\n",(0,t.jsxs)(s.p,{children:["Custom selectors generate a ",(0,t.jsx)(s.a,{href:"/docs/references/pseudo-elements",children:"pseudo-element"}),". So, for example, ",(0,t.jsx)(s.a,{href:"/docs/references/imports",children:"importing"})," a stylesheet into another stylesheet enables access to the ",(0,t.jsx)(s.code,{children:"controlBtn"})," pseudo-element. In this example, the stylesheet ",(0,t.jsx)(s.code,{children:"comp.st.css"})," from the previous example is imported into this stylesheet."]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",metastring:'title="page.st.css"',children:'@st-import Comp from "./comp.st.css";\n\n/*\nselector: .comp__root .comp__controls .comp__btn\n*/\nComp::controlbtn {\n background: gold;\n}\n'})}),"\n",(0,t.jsx)(s.admonition,{type:"caution",children:(0,t.jsxs)(s.p,{children:["If a ",(0,t.jsx)(s.code,{children:"custom-selector"})," alias conflicts with a local CSS class name, the exposed ",(0,t.jsx)(s.code,{children:"pseudo-element"})," targets the ",(0,t.jsx)(s.code,{children:"custom-selector"}),". However, the exported CSS class is still exported to JavaScript."]})}),"\n",(0,t.jsx)(s.h2,{id:"use-cases",children:"Use cases"}),"\n",(0,t.jsxs)(s.p,{children:["The following examples demonstrate how to effectively use custom selectors in ",(0,t.jsx)(s.strong,{children:"Stylable"}),"."]}),"\n",(0,t.jsx)(s.h3,{id:"container-and-recursive-components",children:"Container and recursive components"}),"\n",(0,t.jsx)(s.p,{children:'Some components might contain nested instances of themselves because they\'re a container or a "recursive" component. For example, a tree component might render itself.'}),"\n",(0,t.jsxs)(s.p,{children:["If the component exposes any ",(0,t.jsx)(s.code,{children:"pseudo-elements"}),", it is a good practice to define them as ",(0,t.jsx)(s.code,{children:"custom selectors"})," with ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors",children:"child selectors"})," to avoid affecting the inner parts of internal instances."]}),"\n",(0,t.jsx)(s.p,{children:"The following example shows how a tree component exposes an icon."}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",metastring:'title="tree.st.css"',children:"@custom-selector :--icon .root > .icon;\n"})}),"\n",(0,t.jsxs)(s.p,{children:["Here you can use the icon ",(0,t.jsx)(s.code,{children:"custom selector"})," from the outside just like you would use any other ",(0,t.jsx)(s.code,{children:"pseudo-element"}),"."]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",metastring:'title="panel.st.css"',children:'@st-import Tree from "./tree.st.css";\n\n/*\nselector: .tree__root > .tree__icon\n*/\nTree::icon {\n background: yellow; /* paints the icons all the way down the tree */\n}\n'})}),"\n",(0,t.jsx)(s.h3,{id:"expose-inner-parts-that-are-deeply-defined",children:"Expose inner parts that are deeply defined"}),"\n",(0,t.jsxs)(s.p,{children:["When you want to make internal parts of your component API more accessible, you can describe ",(0,t.jsx)(s.code,{children:"pseudo-elements"})," using ",(0,t.jsx)(s.code,{children:"custom selectors"}),"."]}),"\n",(0,t.jsxs)(s.p,{children:["For example, you can expose a ",(0,t.jsx)(s.code,{children:"pseudo-element"})," named ",(0,t.jsx)(s.code,{children:"navigationBtn"})," that enables you to style an internal gallery component's ",(0,t.jsx)(s.code,{children:"navBtn"})," element."]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",children:'@st-import Gallery from "./gallery.st.css";\n\n@custom-selector :--navigationBtn Gallery::navbtn;\n'})}),"\n",(0,t.jsx)(s.h3,{id:"combination-selector",children:"Combination selector"}),"\n",(0,t.jsxs)(s.p,{children:["You may have a component with several basic CSS classes and with corresponding ",(0,t.jsx)(s.code,{children:"pseudo-elements"}),". You could expose a combination ",(0,t.jsx)(s.code,{children:"pseudo-element"}),"."]}),"\n",(0,t.jsxs)(s.p,{children:["For example, a ",(0,t.jsx)(s.code,{children:"pseudo-element"})," named ",(0,t.jsx)(s.code,{children:"navBtn"})," matches any ",(0,t.jsx)(s.code,{children:"btn"})," CSS class nested in a ",(0,t.jsx)(s.code,{children:"nav"})," CSS class."]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",metastring:'title="comp.st.css"',children:"@custom-selector :--navBtn .nav .btn;\n"})}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",metastring:'title="page.st.css"',children:'@st-import Comp from "./comp.st.css";\n\n/*\nselector: .comp__root .comp__nav .comp__btn\n*/\nComp::navbtn {\n border: 1px solid grey;\n}\n'})}),"\n",(0,t.jsx)(s.h3,{id:"group-of-selectors",children:"Group of selectors"}),"\n",(0,t.jsx)(s.p,{children:"You could also use custom selectors to gather a collection of selectors into a single selector. For example, you may want to access media that includes both images and videos."}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",metastring:'title="comp.st.css"',children:"@custom-selector :--media .image, .video;\n/*\nselector: \n.comp__image, .comp__video \n*/\n:--media {\n border: 1px solid grey;\n}\n"})}),"\n",(0,t.jsx)(s.h4,{id:"issues-to-consider",children:"Issues to consider"}),"\n",(0,t.jsxs)(s.p,{children:["Aliasing multiple selectors in a ",(0,t.jsx)(s.code,{children:"custom selector"})," may generate lots of CSS that could affect performance."]}),"\n",(0,t.jsxs)(s.p,{children:["For example, when you import the ",(0,t.jsx)(s.code,{children:"Comp"})," stylesheet (the selector described in the previous example) into another stylesheet, in the output the selector is split for each override."]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",metastring:'title="page.st.css"',children:'@st-import Comp from "./comp.st.css";\n\nComp::media {\n border-color: red;\n}\n\n/* OUTPUT */\n.comp__root .comp__image,\n.comp__root .comp__video {\n border-color: red;\n}\n'})})]})}function m(e={}){const{wrapper:s}={...(0,c.R)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>r,x:()=>l});var o=n(6540);const t={},c=o.createContext(t);function r(e){const s=o.useContext(c);return o.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),o.createElement(c.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[1480],{4147:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>i,contentTitle:()=>l,default:()=>m,frontMatter:()=>r,metadata:()=>o,toc:()=>a});const o=JSON.parse('{"id":"references/custom-selectors","title":"Custom Selector","description":"You use custom selectors to define an alias that can match complex selectors.","source":"@site/docs/references/custom-selectors.md","sourceDirName":"references","slug":"/references/custom-selectors","permalink":"/docs/references/custom-selectors","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/references/custom-selectors.md","tags":[],"version":"current","frontMatter":{"id":"custom-selectors","title":"Custom Selector"},"sidebar":"Specification Reference","previous":{"title":"url()","permalink":"/docs/references/using-external-assets"},"next":{"title":"Extend","permalink":"/docs/references/extend-stylesheet"}}');var t=n(4848),c=n(8453);const r={id:"custom-selectors",title:"Custom Selector"},l=void 0,i={},a=[{value:"Usage",id:"usage",level:2},{value:"Expose pseudo-element",id:"expose-pseudo-element",level:3},{value:"Use cases",id:"use-cases",level:2},{value:"Container and recursive components",id:"container-and-recursive-components",level:3},{value:"Expose inner parts that are deeply defined",id:"expose-inner-parts-that-are-deeply-defined",level:3},{value:"Combination selector",id:"combination-selector",level:3},{value:"Group of selectors",id:"group-of-selectors",level:3},{value:"Issues to consider",id:"issues-to-consider",level:4}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,c.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(s.p,{children:["You use ",(0,t.jsx)(s.a,{href:"https://drafts.csswg.org/css-extensions/#custom-selectors",children:"custom selectors"})," to define an alias that can match complex selectors."]}),"\n",(0,t.jsx)(s.p,{children:"For example, a specific type of button within a form that appears only when hovered can be defined as a custom selector. By defining the button as a custom selector with its own name, the button is exposed in the API and available for use by using just the custom selector name."}),"\n",(0,t.jsx)(s.p,{children:"You could also use custom selectors to define a group of selectors with one name. For example, you can access all the headings on a page as one custom selector. This could be useful if you want to style just their color the same."}),"\n",(0,t.jsx)(s.h2,{id:"usage",children:"Usage"}),"\n",(0,t.jsxs)(s.p,{children:["The following code maps the alias name ",(0,t.jsx)(s.code,{children:"controlBtn"})," that matches any ",(0,t.jsx)(s.code,{children:".btn"})," CSS class nested under the ",(0,t.jsx)(s.code,{children:".controls"})," CSS class."]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",metastring:'title="comp.st.css"',children:"@custom-selector :--controlBtn .controls .btn;\n/* \nselector: .comp__controls .comp__btn \n*/\n:--controlBtn {\n border: 1px solid grey;\n}\n/* \nselector: .comp__controls .comp__btn:hover \n*/\n:--controlBtn:hover {\n border-color: red;\n}\n"})}),"\n",(0,t.jsx)(s.h3,{id:"expose-pseudo-element",children:"Expose pseudo-element"}),"\n",(0,t.jsxs)(s.p,{children:["Custom selectors generate a ",(0,t.jsx)(s.a,{href:"/docs/references/pseudo-elements",children:"pseudo-element"}),". So, for example, ",(0,t.jsx)(s.a,{href:"/docs/references/imports",children:"importing"})," a stylesheet into another stylesheet enables access to the ",(0,t.jsx)(s.code,{children:"controlBtn"})," pseudo-element. In this example, the stylesheet ",(0,t.jsx)(s.code,{children:"comp.st.css"})," from the previous example is imported into this stylesheet."]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",metastring:'title="page.st.css"',children:'@st-import Comp from "./comp.st.css";\n\n/*\nselector: .comp__root .comp__controls .comp__btn\n*/\nComp::controlbtn {\n background: gold;\n}\n'})}),"\n",(0,t.jsx)(s.admonition,{type:"caution",children:(0,t.jsxs)(s.p,{children:["If a ",(0,t.jsx)(s.code,{children:"custom-selector"})," alias conflicts with a local CSS class name, the exposed ",(0,t.jsx)(s.code,{children:"pseudo-element"})," targets the ",(0,t.jsx)(s.code,{children:"custom-selector"}),". However, the exported CSS class is still exported to JavaScript."]})}),"\n",(0,t.jsx)(s.h2,{id:"use-cases",children:"Use cases"}),"\n",(0,t.jsxs)(s.p,{children:["The following examples demonstrate how to effectively use custom selectors in ",(0,t.jsx)(s.strong,{children:"Stylable"}),"."]}),"\n",(0,t.jsx)(s.h3,{id:"container-and-recursive-components",children:"Container and recursive components"}),"\n",(0,t.jsx)(s.p,{children:'Some components might contain nested instances of themselves because they\'re a container or a "recursive" component. For example, a tree component might render itself.'}),"\n",(0,t.jsxs)(s.p,{children:["If the component exposes any ",(0,t.jsx)(s.code,{children:"pseudo-elements"}),", it is a good practice to define them as ",(0,t.jsx)(s.code,{children:"custom selectors"})," with ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors",children:"child selectors"})," to avoid affecting the inner parts of internal instances."]}),"\n",(0,t.jsx)(s.p,{children:"The following example shows how a tree component exposes an icon."}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",metastring:'title="tree.st.css"',children:"@custom-selector :--icon .root > .icon;\n"})}),"\n",(0,t.jsxs)(s.p,{children:["Here you can use the icon ",(0,t.jsx)(s.code,{children:"custom selector"})," from the outside just like you would use any other ",(0,t.jsx)(s.code,{children:"pseudo-element"}),"."]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",metastring:'title="panel.st.css"',children:'@st-import Tree from "./tree.st.css";\n\n/*\nselector: .tree__root > .tree__icon\n*/\nTree::icon {\n background: yellow; /* paints the icons all the way down the tree */\n}\n'})}),"\n",(0,t.jsx)(s.h3,{id:"expose-inner-parts-that-are-deeply-defined",children:"Expose inner parts that are deeply defined"}),"\n",(0,t.jsxs)(s.p,{children:["When you want to make internal parts of your component API more accessible, you can describe ",(0,t.jsx)(s.code,{children:"pseudo-elements"})," using ",(0,t.jsx)(s.code,{children:"custom selectors"}),"."]}),"\n",(0,t.jsxs)(s.p,{children:["For example, you can expose a ",(0,t.jsx)(s.code,{children:"pseudo-element"})," named ",(0,t.jsx)(s.code,{children:"navigationBtn"})," that enables you to style an internal gallery component's ",(0,t.jsx)(s.code,{children:"navBtn"})," element."]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",children:'@st-import Gallery from "./gallery.st.css";\n\n@custom-selector :--navigationBtn Gallery::navbtn;\n'})}),"\n",(0,t.jsx)(s.h3,{id:"combination-selector",children:"Combination selector"}),"\n",(0,t.jsxs)(s.p,{children:["You may have a component with several basic CSS classes and with corresponding ",(0,t.jsx)(s.code,{children:"pseudo-elements"}),". You could expose a combination ",(0,t.jsx)(s.code,{children:"pseudo-element"}),"."]}),"\n",(0,t.jsxs)(s.p,{children:["For example, a ",(0,t.jsx)(s.code,{children:"pseudo-element"})," named ",(0,t.jsx)(s.code,{children:"navBtn"})," matches any ",(0,t.jsx)(s.code,{children:"btn"})," CSS class nested in a ",(0,t.jsx)(s.code,{children:"nav"})," CSS class."]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",metastring:'title="comp.st.css"',children:"@custom-selector :--navBtn .nav .btn;\n"})}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",metastring:'title="page.st.css"',children:'@st-import Comp from "./comp.st.css";\n\n/*\nselector: .comp__root .comp__nav .comp__btn\n*/\nComp::navbtn {\n border: 1px solid grey;\n}\n'})}),"\n",(0,t.jsx)(s.h3,{id:"group-of-selectors",children:"Group of selectors"}),"\n",(0,t.jsx)(s.p,{children:"You could also use custom selectors to gather a collection of selectors into a single selector. For example, you may want to access media that includes both images and videos."}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",metastring:'title="comp.st.css"',children:"@custom-selector :--media .image, .video;\n/*\nselector: \n.comp__image, .comp__video \n*/\n:--media {\n border: 1px solid grey;\n}\n"})}),"\n",(0,t.jsx)(s.h4,{id:"issues-to-consider",children:"Issues to consider"}),"\n",(0,t.jsxs)(s.p,{children:["Aliasing multiple selectors in a ",(0,t.jsx)(s.code,{children:"custom selector"})," may generate lots of CSS that could affect performance."]}),"\n",(0,t.jsxs)(s.p,{children:["For example, when you import the ",(0,t.jsx)(s.code,{children:"Comp"})," stylesheet (the selector described in the previous example) into another stylesheet, in the output the selector is split for each override."]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-css",metastring:'title="page.st.css"',children:'@st-import Comp from "./comp.st.css";\n\nComp::media {\n border-color: red;\n}\n\n/* OUTPUT */\n.comp__root .comp__image,\n.comp__root .comp__video {\n border-color: red;\n}\n'})})]})}function m(e={}){const{wrapper:s}={...(0,c.R)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>r,x:()=>l});var o=n(6540);const t={},c=o.createContext(t);function r(e){const s=o.useContext(c);return o.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),o.createElement(c.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/fe460ebe.1e1a4478.js b/assets/js/fe460ebe.3c13ec03.js similarity index 98% rename from assets/js/fe460ebe.1e1a4478.js rename to assets/js/fe460ebe.3c13ec03.js index 2e3a42b8..5999d552 100644 --- a/assets/js/fe460ebe.1e1a4478.js +++ b/assets/js/fe460ebe.3c13ec03.js @@ -1 +1 @@ -"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[420],{5836:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>r,default:()=>g,frontMatter:()=>o,metadata:()=>i,toc:()=>c});const i=JSON.parse('{"id":"getting-started/tooling/stylable-intelligence","title":"Stylable Intelligence","description":"Stylable Intelligence is an extension implementing the Language Server Protocol that provides IDE support for Stylable. It currently includes:","source":"@site/docs/getting-started/tooling/stylable-intelligence.md","sourceDirName":"getting-started/tooling","slug":"/getting-started/tooling/stylable-intelligence","permalink":"/docs/getting-started/tooling/stylable-intelligence","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/getting-started/tooling/stylable-intelligence.md","tags":[],"version":"current","frontMatter":{"id":"stylable-intelligence","title":"Stylable Intelligence","sidebar_label":"VSCode Extension"},"sidebar":"Discover","previous":{"title":"stylable.config.js","permalink":"/docs/getting-started/stylable-config"},"next":{"title":"CLI","permalink":"/docs/getting-started/tooling/cli"}}');var l=n(4848),s=n(8453);const o={id:"stylable-intelligence",title:"Stylable Intelligence",sidebar_label:"VSCode Extension"},r=void 0,a={},c=[{value:"Installation",id:"installation",level:2},{value:"IDE extensions",id:"ide-extensions",level:2},{value:"CSS functionality",id:"css-functionality",level:2}];function d(e){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(t.p,{children:[(0,l.jsx)(t.strong,{children:"Stylable Intelligence"})," is an extension implementing the ",(0,l.jsx)(t.a,{href:"https://microsoft.github.io/language-server-protocol/",children:"Language Server Protocol"})," that provides IDE support for ",(0,l.jsx)(t.strong,{children:"Stylable"}),". It currently includes:"]}),"\n",(0,l.jsxs)(t.ul,{children:["\n",(0,l.jsx)(t.li,{children:"Syntax highlighting"}),"\n",(0,l.jsx)(t.li,{children:"Code completion"}),"\n",(0,l.jsx)(t.li,{children:"Go to definition"}),"\n",(0,l.jsx)(t.li,{children:"Diagnostics"}),"\n"]}),"\n",(0,l.jsx)(t.h2,{id:"installation",children:"Installation"}),"\n",(0,l.jsxs)(t.p,{children:["You can install ",(0,l.jsx)(t.strong,{children:"Stylable Intelligence"})," from the ",(0,l.jsx)(t.a,{href:"https://marketplace.visualstudio.com/items?itemName=wix.stylable-intelligence",children:"Visual Studio Code market"}),":"]}),"\n",(0,l.jsxs)(t.ul,{children:["\n",(0,l.jsxs)(t.li,{children:["In Visual Studio Code, click the ",(0,l.jsx)(t.strong,{children:"Extensions"})," icon to open the market."]}),"\n",(0,l.jsxs)(t.li,{children:["In the search field, enter ",(0,l.jsx)(t.strong,{children:"Stylable Intelligence"}),"."]}),"\n",(0,l.jsx)(t.li,{children:"Install the extension and reload the window when prompted."}),"\n"]}),"\n",(0,l.jsx)(t.h2,{id:"ide-extensions",children:"IDE extensions"}),"\n",(0,l.jsxs)(t.p,{children:["Because stylable-intelligence registers ",(0,l.jsx)(t.code,{children:".st.css"})," files as Stylable and not CSS, certain CSS extensions may not work until they explicitly add Stylable support. The stylable-intelligence extension for VSCode is compatible with the following CSS extensions:"]}),"\n",(0,l.jsxs)(t.ol,{children:["\n",(0,l.jsxs)(t.li,{children:[(0,l.jsx)(t.a,{href:"https://github.com/kisstkondoros/csstriggers",children:"CssTriggers"}),"(^0.4.0) - A VSCode extension that adds inline decoration to CSS properties to indicate their costs."]}),"\n"]}),"\n",(0,l.jsx)(t.p,{children:"If you are using an extension that you would like to add to this list, let us know and we'd be happy to help."}),"\n",(0,l.jsx)(t.h2,{id:"css-functionality",children:"CSS functionality"}),"\n",(0,l.jsx)(t.p,{children:"Because Stylable files are not recognized as CSS, we proxy the CSS Language Server through stylable-intelligence. Most basic features are already supported, but if you notice anything strange, let us know."}),"\n",(0,l.jsxs)(t.admonition,{type:"note",children:[(0,l.jsx)(t.p,{children:"Future plans include:"}),(0,l.jsxs)(t.ul,{children:["\n",(0,l.jsx)(t.li,{children:"More Language Server features."}),"\n",(0,l.jsx)(t.li,{children:"Support for JetBrains IDEs (WebStorm, IntelliJ). Currently supported only in VSCode."}),"\n"]})]})]})}function g(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,l.jsx)(t,{...e,children:(0,l.jsx)(d,{...e})}):d(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>r});var i=n(6540);const l={},s=i.createContext(l);function o(e){const t=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:o(e.components),i.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[420],{3988:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>r,default:()=>g,frontMatter:()=>o,metadata:()=>i,toc:()=>c});const i=JSON.parse('{"id":"getting-started/tooling/stylable-intelligence","title":"Stylable Intelligence","description":"Stylable Intelligence is an extension implementing the Language Server Protocol that provides IDE support for Stylable. It currently includes:","source":"@site/docs/getting-started/tooling/stylable-intelligence.md","sourceDirName":"getting-started/tooling","slug":"/getting-started/tooling/stylable-intelligence","permalink":"/docs/getting-started/tooling/stylable-intelligence","draft":false,"unlisted":false,"editUrl":"https://github.com/wixplosives/stylable.io/edit/master/docs/getting-started/tooling/stylable-intelligence.md","tags":[],"version":"current","frontMatter":{"id":"stylable-intelligence","title":"Stylable Intelligence","sidebar_label":"VSCode Extension"},"sidebar":"Discover","previous":{"title":"stylable.config.js","permalink":"/docs/getting-started/stylable-config"},"next":{"title":"CLI","permalink":"/docs/getting-started/tooling/cli"}}');var l=n(4848),s=n(8453);const o={id:"stylable-intelligence",title:"Stylable Intelligence",sidebar_label:"VSCode Extension"},r=void 0,a={},c=[{value:"Installation",id:"installation",level:2},{value:"IDE extensions",id:"ide-extensions",level:2},{value:"CSS functionality",id:"css-functionality",level:2}];function d(e){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(t.p,{children:[(0,l.jsx)(t.strong,{children:"Stylable Intelligence"})," is an extension implementing the ",(0,l.jsx)(t.a,{href:"https://microsoft.github.io/language-server-protocol/",children:"Language Server Protocol"})," that provides IDE support for ",(0,l.jsx)(t.strong,{children:"Stylable"}),". It currently includes:"]}),"\n",(0,l.jsxs)(t.ul,{children:["\n",(0,l.jsx)(t.li,{children:"Syntax highlighting"}),"\n",(0,l.jsx)(t.li,{children:"Code completion"}),"\n",(0,l.jsx)(t.li,{children:"Go to definition"}),"\n",(0,l.jsx)(t.li,{children:"Diagnostics"}),"\n"]}),"\n",(0,l.jsx)(t.h2,{id:"installation",children:"Installation"}),"\n",(0,l.jsxs)(t.p,{children:["You can install ",(0,l.jsx)(t.strong,{children:"Stylable Intelligence"})," from the ",(0,l.jsx)(t.a,{href:"https://marketplace.visualstudio.com/items?itemName=wix.stylable-intelligence",children:"Visual Studio Code market"}),":"]}),"\n",(0,l.jsxs)(t.ul,{children:["\n",(0,l.jsxs)(t.li,{children:["In Visual Studio Code, click the ",(0,l.jsx)(t.strong,{children:"Extensions"})," icon to open the market."]}),"\n",(0,l.jsxs)(t.li,{children:["In the search field, enter ",(0,l.jsx)(t.strong,{children:"Stylable Intelligence"}),"."]}),"\n",(0,l.jsx)(t.li,{children:"Install the extension and reload the window when prompted."}),"\n"]}),"\n",(0,l.jsx)(t.h2,{id:"ide-extensions",children:"IDE extensions"}),"\n",(0,l.jsxs)(t.p,{children:["Because stylable-intelligence registers ",(0,l.jsx)(t.code,{children:".st.css"})," files as Stylable and not CSS, certain CSS extensions may not work until they explicitly add Stylable support. The stylable-intelligence extension for VSCode is compatible with the following CSS extensions:"]}),"\n",(0,l.jsxs)(t.ol,{children:["\n",(0,l.jsxs)(t.li,{children:[(0,l.jsx)(t.a,{href:"https://github.com/kisstkondoros/csstriggers",children:"CssTriggers"}),"(^0.4.0) - A VSCode extension that adds inline decoration to CSS properties to indicate their costs."]}),"\n"]}),"\n",(0,l.jsx)(t.p,{children:"If you are using an extension that you would like to add to this list, let us know and we'd be happy to help."}),"\n",(0,l.jsx)(t.h2,{id:"css-functionality",children:"CSS functionality"}),"\n",(0,l.jsx)(t.p,{children:"Because Stylable files are not recognized as CSS, we proxy the CSS Language Server through stylable-intelligence. Most basic features are already supported, but if you notice anything strange, let us know."}),"\n",(0,l.jsxs)(t.admonition,{type:"note",children:[(0,l.jsx)(t.p,{children:"Future plans include:"}),(0,l.jsxs)(t.ul,{children:["\n",(0,l.jsx)(t.li,{children:"More Language Server features."}),"\n",(0,l.jsx)(t.li,{children:"Support for JetBrains IDEs (WebStorm, IntelliJ). Currently supported only in VSCode."}),"\n"]})]})]})}function g(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,l.jsx)(t,{...e,children:(0,l.jsx)(d,{...e})}):d(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>r});var i=n(6540);const l={},s=i.createContext(l);function o(e){const t=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:o(e.components),i.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/main.43fac053.js b/assets/js/main.43fac053.js new file mode 100644 index 00000000..08f54f42 --- /dev/null +++ b/assets/js/main.43fac053.js @@ -0,0 +1,2 @@ +/*! For license information please see main.43fac053.js.LICENSE.txt */ +(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[8792],{4081:(e,t,n)=>{"use strict";n.d(t,{CU:()=>r,Hg:()=>d,I$:()=>u,O6:()=>p,UB:()=>c,WW:()=>i,ZG:()=>l,dz:()=>f,pk:()=>s,rG:()=>o,tb:()=>a});const r=null,o=50,a=!1,i=!0,s=!0,l="right",c=void 0,u=!0,d=null,p=!1,f=!1},8328:(e,t,n)=>{"use strict";n.d(t,{A:()=>p});n(6540);var r=n(3259),o=n.n(r),a=n(4054);const i={"0058b4c6":[()=>n.e(849).then(n.t.bind(n,6164,19)),"@generated/docusaurus-plugin-content-docs/default/p/docs-175.json",6164],"01a85c17":[()=>Promise.all([n.e(1869),n.e(8209)]).then(n.bind(n,9158)),"@theme/BlogTagsListPage",9158],"084229dc":[()=>n.e(1701).then(n.bind(n,1338)),"@site/docs/references/global-selectors.md",1338],"0a256791":[()=>n.e(2110).then(n.bind(n,598)),"@site/docs/references/tag-selectors.md",598],"0ce74438":[()=>n.e(3365).then(n.bind(n,5427)),"@site/src/pages/playground.tsx",5427],"138e0e15":[()=>n.e(4921).then(n.t.bind(n,1597,19)),"@generated/@easyops-cn/docusaurus-search-local/default/__plugin.json",1597],"14eb3368":[()=>Promise.all([n.e(1869),n.e(6969)]).then(n.bind(n,4136)),"@theme/DocCategoryGeneratedIndexPage",4136],"17347b34":[()=>n.e(6468).then(n.bind(n,720)),"@site/docs/getting-started/nextjs-integration.md",720],17896441:[()=>Promise.all([n.e(1869),n.e(5394),n.e(6369),n.e(8401)]).then(n.bind(n,833)),"@theme/DocItem",833],"1a4e3797":[()=>Promise.all([n.e(1869),n.e(2138)]).then(n.bind(n,1283)),"@theme/SearchPage",1283],"1a5eac39":[()=>n.e(4215).then(n.bind(n,7189)),"@site/docs/guides/handbook/namespace.md",7189],"1df93b7f":[()=>n.e(4583).then(n.bind(n,8421)),"@site/src/pages/index.tsx",8421],"1f7dc951":[()=>n.e(9597).then(n.bind(n,1459)),"@site/docs/guides/shared-classes.md",1459],24352365:[()=>n.e(5395).then(n.bind(n,8033)),"@site/docs/getting-started/storybook-integration.md",8033],"24ff752b":[()=>n.e(825).then(n.bind(n,3701)),"@site/docs/guides/migration-v5.md",3701],"26a8bbe9":[()=>n.e(5666).then(n.bind(n,8090)),"@site/blog/2022-08-04-welcome-to-stylable-v5.md?truncated=true",8090],"2ce01146":[()=>n.e(9169).then(n.bind(n,7214)),"@site/docs/references/formatters.md",7214],"2de44985":[()=>n.e(7678).then(n.bind(n,5397)),"@site/docs/guides/migration-v3.md",5397],"32382f69":[()=>n.e(1858).then(n.bind(n,7370)),"@site/docs/references/namespace.md",7370],35811679:[()=>n.e(7135).then(n.bind(n,2998)),"@site/docs/guides/handbook/intro.md",2998],"36994c47":[()=>n.e(9858).then(n.t.bind(n,5516,19)),"@generated/docusaurus-plugin-content-blog/default/__plugin.json",5516],"371f5dc2":[()=>Promise.all([n.e(1869),n.e(5394),n.e(5184)]).then(n.bind(n,6590)),"@site/docs/getting-started/boilerplate.mdx",6590],"3a2db09e":[()=>n.e(8121).then(n.t.bind(n,8070,19)),"@generated/docusaurus-plugin-content-blog/default/p/blog-tags-df9.json",8070],"46d93a8f":[()=>n.e(734).then(n.bind(n,3691)),"@site/docs/guides/server-side-rendering.md",3691],"49b68603":[()=>n.e(2679).then(n.t.bind(n,6825,19)),"@generated/docusaurus-plugin-content-docs/default/p/docs-getting-started-integrations-379.json",6825],"57b59cd4":[()=>n.e(8880).then(n.bind(n,2403)),"@site/src/pages/community.tsx",2403],"587a03c1":[()=>n.e(7395).then(n.bind(n,7813)),"@site/docs/guides/handbook/runtime.md",7813],"5e66eab8":[()=>n.e(4293).then(n.bind(n,8343)),"@site/docs/references/extend-stylesheet.md",8343],"5e95c892":[()=>n.e(9647).then(n.bind(n,7121)),"@theme/DocsRoot",7121],"5e9f5e1a":[()=>Promise.resolve().then(n.bind(n,4784)),"@generated/docusaurus.config",4784],"5ec46957":[()=>n.e(4947).then(n.bind(n,6051)),"@site/docs/references/imports.md",6051],"6875c492":[()=>Promise.all([n.e(1869),n.e(5394),n.e(6369),n.e(6321),n.e(4813)]).then(n.bind(n,1086)),"@theme/BlogTagsPostsPage",1086],"6e96288b":[()=>n.e(5457).then(n.bind(n,9866)),"@site/docs/guides/component-variants.md",9866],"705f3d56":[()=>n.e(9183).then(n.bind(n,3239)),"@site/docs/references/using-external-assets.md",3239],"79455fbf":[()=>n.e(3879).then(n.bind(n,1819)),"@site/docs/references/class-selectors.md",1819],"7df4dfbf":[()=>n.e(2670).then(n.bind(n,1564)),"@site/docs/attributions.md",1564],"814f3328":[()=>n.e(7472).then(n.t.bind(n,5513,19)),"~blog/default/blog-post-list-prop-default.json",5513],"825e4603":[()=>n.e(1026).then(n.bind(n,1179)),"@site/docs/references/runtime.md",1179],"866f0f84":[()=>n.e(2619).then(n.bind(n,1872)),"@site/docs/guides/project-commons.md",1872],"89bbbeae":[()=>n.e(4715).then(n.bind(n,7983)),"@site/docs/references/mixins.md",7983],"8abe6768":[()=>Promise.all([n.e(1869),n.e(5394),n.e(7774)]).then(n.bind(n,7062)),"@site/docs/getting-started/stylable-config.mdx",7062],"922647ed":[()=>n.e(1274).then(n.bind(n,6059)),"@site/docs/getting-started/webpack-integration.md",6059],"945a8992":[()=>n.e(9729).then(n.bind(n,3735)),"@site/docs/references/variables.md",3735],"9e4087bc":[()=>n.e(2711).then(n.bind(n,9331)),"@theme/BlogArchivePage",9331],a2b316bf:[()=>n.e(150).then(n.bind(n,7518)),"@site/docs/guides/handbook/class.mdx",7518],a2cbecc3:[()=>n.e(5299).then(n.bind(n,665)),"@site/docs/getting-started/manual-integration.mdx",665],a399b375:[()=>n.e(5076).then(n.bind(n,5961)),"@site/docs/getting-started/typescript-integration.md",5961],a6aa9e1f:[()=>Promise.all([n.e(1869),n.e(5394),n.e(6369),n.e(6321),n.e(7643)]).then(n.bind(n,5124)),"@theme/BlogListPage",5124],a7456010:[()=>n.e(1235).then(n.t.bind(n,8552,19)),"@generated/docusaurus-plugin-content-pages/default/__plugin.json",8552],a7bd4aaa:[()=>n.e(7098).then(n.bind(n,4532)),"@theme/DocVersionRoot",4532],a94703ab:[()=>Promise.all([n.e(1869),n.e(9048)]).then(n.bind(n,1377)),"@theme/DocRoot",1377],ab324915:[()=>n.e(6722).then(n.bind(n,4454)),"@site/blog/2022-08-04-welcome-to-stylable-v5.md",4454],aba21aa0:[()=>n.e(5742).then(n.t.bind(n,7093,19)),"@generated/docusaurus-plugin-content-docs/default/__plugin.json",7093],acecf23e:[()=>n.e(1903).then(n.t.bind(n,1912,19)),"~blog/default/blogMetadata-default.json",1912],acfb8e34:[()=>Promise.all([n.e(1869),n.e(6223)]).then(n.bind(n,5140)),"@site/docs/getting-started/tooling/cli.mdx",5140],b10d9af9:[()=>n.e(9849).then(n.bind(n,8101)),"@site/docs/guides/handbook/state.md",8101],b1a4f681:[()=>Promise.all([n.e(1869),n.e(5394),n.e(7514)]).then(n.bind(n,4670)),"@site/docs/guides/handbook/extend.mdx",4670],baf0d4a2:[()=>n.e(6827).then(n.bind(n,5895)),"@site/docs/style-guide.md",5895],bc80c935:[()=>Promise.all([n.e(1869),n.e(5394),n.e(2346)]).then(n.bind(n,4719)),"@site/docs/references/cheatsheet.mdx",4719],bfefe422:[()=>n.e(693).then(n.bind(n,5967)),"@site/docs/references/css-vars.md",5967],c0d90f50:[()=>n.e(7394).then(n.bind(n,4707)),"@site/docs/references/root.md",4707],c15d9823:[()=>n.e(8146).then(n.t.bind(n,9328,19)),"@generated/docusaurus-plugin-content-blog/default/p/blog-bd9.json",9328],c8df2e0f:[()=>n.e(9101).then(n.t.bind(n,8896,19)),"@generated/docusaurus-plugin-content-blog/default/p/blog-tags-intro-d57.json",8896],c9cac9d9:[()=>n.e(4918).then(n.t.bind(n,371,19)),"@generated/docusaurus-plugin-content-blog/default/p/blog-tags-release-6bd.json",371],cb737cc7:[()=>Promise.all([n.e(1869),n.e(5394),n.e(242)]).then(n.bind(n,3)),"@site/docs/guides/handbook/import.mdx",3],ccc49370:[()=>Promise.all([n.e(1869),n.e(5394),n.e(6369),n.e(6321),n.e(3249)]).then(n.bind(n,3858)),"@theme/BlogPostPage",3858],d879f3fa:[()=>n.e(7381).then(n.bind(n,8514)),"@site/docs/references/layer.md",8514],de106496:[()=>n.e(614).then(n.bind(n,4059)),"@site/docs/references/st-scope.md",4059],de714d10:[()=>n.e(4729).then(n.bind(n,7415)),"@site/docs/guides/component-best-practices.md",7415],e19b9990:[()=>Promise.all([n.e(1869),n.e(5394),n.e(7377)]).then(n.bind(n,6817)),"@site/docs/references/programmatic-api.mdx",6817],e74825b7:[()=>n.e(2765).then(n.bind(n,4284)),"@site/docs/references/pseudo-classes.md",4284],e8f63a9c:[()=>n.e(4412).then(n.bind(n,7043)),"@site/docs/getting-started/rollup-integration.md",7043],ebfcd236:[()=>n.e(3746).then(n.bind(n,5450)),"@site/docs/getting-started/get-started.md",5450],ef20d218:[()=>n.e(8065).then(n.bind(n,5417)),"@site/docs/guides/handbook/structure.md",5417],f0dcc6ac:[()=>n.e(7001).then(n.bind(n,6048)),"@site/docs/references/contains.md",6048],f242c874:[()=>n.e(8829).then(n.bind(n,6023)),"@site/docs/references/pseudo-elements.md",6023],f5df1cd5:[()=>n.e(5619).then(n.bind(n,7178)),"@site/docs/references/keyframes.md",7178],f81c1134:[()=>n.e(8130).then(n.t.bind(n,7735,19)),"@generated/docusaurus-plugin-content-blog/default/p/blog-archive-f05.json",7735],fde4315e:[()=>n.e(1480).then(n.bind(n,4147)),"@site/docs/references/custom-selectors.md",4147],fe460ebe:[()=>n.e(420).then(n.bind(n,3988)),"@site/docs/getting-started/tooling/stylable-intelligence.md",3988]};var s=n(4848);function l(e){let{error:t,retry:n,pastDelay:r}=e;return t?(0,s.jsxs)("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"},children:[(0,s.jsx)("p",{children:String(t)}),(0,s.jsx)("div",{children:(0,s.jsx)("button",{type:"button",onClick:n,children:"Retry"})})]}):r?(0,s.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"},children:(0,s.jsx)("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb",children:(0,s.jsxs)("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[(0,s.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,s.jsx)("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,s.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,s.jsx)("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,s.jsx)("circle",{cx:"22",cy:"22",r:"8",children:(0,s.jsx)("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})}):null}var c=n(6921),u=n(3102);function d(e,t){if("*"===e)return o()({loading:l,loader:()=>n.e(2237).then(n.bind(n,2237)),modules:["@theme/NotFound"],webpack:()=>[2237],render(e,t){const n=e.default;return(0,s.jsx)(u.W,{value:{plugin:{name:"native",id:"default"}},children:(0,s.jsx)(n,{...t})})}});const r=a[`${e}-${t}`],d={},p=[],f=[],g=(0,c.A)(r);return Object.entries(g).forEach((e=>{let[t,n]=e;const r=i[n];r&&(d[t]=r[0],p.push(r[1]),f.push(r[2]))})),o().Map({loading:l,loader:d,modules:p,webpack:()=>f,render(t,n){const o=JSON.parse(JSON.stringify(r));Object.entries(t).forEach((t=>{let[n,r]=t;const a=r.default;if(!a)throw new Error(`The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);"object"!=typeof a&&"function"!=typeof a||Object.keys(r).filter((e=>"default"!==e)).forEach((e=>{a[e]=r[e]}));let i=o;const s=n.split(".");s.slice(0,-1).forEach((e=>{i=i[e]})),i[s[s.length-1]]=a}));const a=o.__comp;delete o.__comp;const i=o.__context;delete o.__context;const l=o.__props;return delete o.__props,(0,s.jsx)(u.W,{value:i,children:(0,s.jsx)(a,{...o,...l,...n})})}})}const p=[{path:"/blog",component:d("/blog","5c5"),exact:!0},{path:"/blog/archive",component:d("/blog/archive","182"),exact:!0},{path:"/blog/tags",component:d("/blog/tags","287"),exact:!0},{path:"/blog/tags/intro",component:d("/blog/tags/intro","7de"),exact:!0},{path:"/blog/tags/release",component:d("/blog/tags/release","74e"),exact:!0},{path:"/blog/welcome-to-stylable-v5",component:d("/blog/welcome-to-stylable-v5","715"),exact:!0},{path:"/community",component:d("/community","adf"),exact:!0},{path:"/playground",component:d("/playground","859"),exact:!0},{path:"/search",component:d("/search","822"),exact:!0},{path:"/docs",component:d("/docs","72c"),routes:[{path:"/docs",component:d("/docs","9e7"),routes:[{path:"/docs",component:d("/docs","b3f"),routes:[{path:"/docs/attributions",component:d("/docs/attributions","554"),exact:!0},{path:"/docs/getting-started/boilerplate",component:d("/docs/getting-started/boilerplate","1d3"),exact:!0,sidebar:"Discover"},{path:"/docs/getting-started/integrations",component:d("/docs/getting-started/integrations","0e5"),exact:!0,sidebar:"Discover"},{path:"/docs/getting-started/intro",component:d("/docs/getting-started/intro","b87"),exact:!0,sidebar:"Discover"},{path:"/docs/getting-started/manual-integration",component:d("/docs/getting-started/manual-integration","5ef"),exact:!0,sidebar:"Discover"},{path:"/docs/getting-started/nextjs-integration",component:d("/docs/getting-started/nextjs-integration","8c2"),exact:!0,sidebar:"Discover"},{path:"/docs/getting-started/rollup-integration",component:d("/docs/getting-started/rollup-integration","c52"),exact:!0,sidebar:"Discover"},{path:"/docs/getting-started/storybook-integration",component:d("/docs/getting-started/storybook-integration","002"),exact:!0,sidebar:"Discover"},{path:"/docs/getting-started/stylable-config",component:d("/docs/getting-started/stylable-config","4d9"),exact:!0,sidebar:"Discover"},{path:"/docs/getting-started/tooling/cli",component:d("/docs/getting-started/tooling/cli","aa5"),exact:!0,sidebar:"Discover"},{path:"/docs/getting-started/tooling/stylable-intelligence",component:d("/docs/getting-started/tooling/stylable-intelligence","bf3"),exact:!0,sidebar:"Discover"},{path:"/docs/getting-started/typescript-integration",component:d("/docs/getting-started/typescript-integration","c5e"),exact:!0,sidebar:"Discover"},{path:"/docs/getting-started/webpack-integration",component:d("/docs/getting-started/webpack-integration","f5d"),exact:!0,sidebar:"Discover"},{path:"/docs/guides/component-best-practices",component:d("/docs/guides/component-best-practices","ea7"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/component-variants",component:d("/docs/guides/component-variants","90b"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/handbook/class",component:d("/docs/guides/handbook/class","35f"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/handbook/classes",component:d("/docs/guides/handbook/classes","a99"),exact:!0},{path:"/docs/guides/handbook/custom-state",component:d("/docs/guides/handbook/custom-state","1fe"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/handbook/extend",component:d("/docs/guides/handbook/extend","510"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/handbook/import-class",component:d("/docs/guides/handbook/import-class","e56"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/handbook/intro",component:d("/docs/guides/handbook/intro","3a8"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/handbook/namespacing",component:d("/docs/guides/handbook/namespacing","93a"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/handbook/runtime",component:d("/docs/guides/handbook/runtime","4db"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/migration-v3",component:d("/docs/guides/migration-v3","620"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/migration-v5",component:d("/docs/guides/migration-v5","217"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/project-commons",component:d("/docs/guides/project-commons","9bf"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/shared-classes",component:d("/docs/guides/shared-classes","5ec"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/ssr",component:d("/docs/guides/ssr","728"),exact:!0,sidebar:"Guides"},{path:"/docs/references/cheatsheet",component:d("/docs/references/cheatsheet","3be"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/class-selectors",component:d("/docs/references/class-selectors","856"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/contains",component:d("/docs/references/contains","39b"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/css-vars",component:d("/docs/references/css-vars","571"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/custom-selectors",component:d("/docs/references/custom-selectors","4f8"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/extend-stylesheet",component:d("/docs/references/extend-stylesheet","472"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/formatters",component:d("/docs/references/formatters","c0d"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/global-selectors",component:d("/docs/references/global-selectors","04c"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/imports",component:d("/docs/references/imports","a46"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/keyframes",component:d("/docs/references/keyframes","4d3"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/layer",component:d("/docs/references/layer","5cb"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/mixins",component:d("/docs/references/mixins","9cd"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/namespace",component:d("/docs/references/namespace","686"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/programmatic-api",component:d("/docs/references/programmatic-api","143"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/pseudo-classes",component:d("/docs/references/pseudo-classes","380"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/pseudo-elements",component:d("/docs/references/pseudo-elements","cd5"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/root",component:d("/docs/references/root","f2e"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/runtime",component:d("/docs/references/runtime","a1c"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/st-scope",component:d("/docs/references/st-scope","b75"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/st-variables",component:d("/docs/references/st-variables","7ce"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/type-selectors",component:d("/docs/references/type-selectors","11d"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/using-external-assets",component:d("/docs/references/using-external-assets","78d"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/style-guide",component:d("/docs/style-guide","51c"),exact:!0}]}]}]},{path:"/",component:d("/","e5f"),exact:!0},{path:"*",component:d("*")}]},6125:(e,t,n)=>{"use strict";n.d(t,{o:()=>a,x:()=>i});var r=n(6540),o=n(4848);const a=r.createContext(!1);function i(e){let{children:t}=e;const[n,i]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{i(!0)}),[]),(0,o.jsx)(a.Provider,{value:n,children:t})}},7815:(e,t,n)=>{"use strict";var r=n(6540),o=n(5338),a=n(545),i=n(4625),s=n(4784),l=n(8193);const c=[n(7651),n(119),n(6134),n(6294)];var u=n(8328),d=n(6347),p=n(2831),f=n(4848);function g(e){let{children:t}=e;return(0,f.jsx)(f.Fragment,{children:t})}var m=n(5260),h=n(4586),y=n(6025),b=n(6342),v=n(1213),w=n(2131),k=n(4090);var x=n(440),S=n(1463);function _(){const{i18n:{currentLocale:e,defaultLocale:t,localeConfigs:n}}=(0,h.A)(),r=(0,w.o)(),o=n[e].htmlLang,a=e=>e.replace("-","_");return(0,f.jsxs)(m.A,{children:[Object.entries(n).map((e=>{let[t,{htmlLang:n}]=e;return(0,f.jsx)("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:n},t)})),(0,f.jsx)("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:"x-default"}),(0,f.jsx)("meta",{property:"og:locale",content:a(o)}),Object.values(n).filter((e=>o!==e.htmlLang)).map((e=>(0,f.jsx)("meta",{property:"og:locale:alternate",content:a(e.htmlLang)},`meta-og-${e.htmlLang}`)))]})}function E(e){let{permalink:t}=e;const{siteConfig:{url:n}}=(0,h.A)(),r=function(){const{siteConfig:{url:e,baseUrl:t,trailingSlash:n}}=(0,h.A)(),{pathname:r}=(0,d.zy)();return e+(0,x.Ks)((0,y.Ay)(r),{trailingSlash:n,baseUrl:t})}(),o=t?`${n}${t}`:r;return(0,f.jsxs)(m.A,{children:[(0,f.jsx)("meta",{property:"og:url",content:o}),(0,f.jsx)("link",{rel:"canonical",href:o})]})}function C(){const{i18n:{currentLocale:e}}=(0,h.A)(),{metadata:t,image:n}=(0,b.p)();return(0,f.jsxs)(f.Fragment,{children:[(0,f.jsxs)(m.A,{children:[(0,f.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,f.jsx)("body",{className:k.w})]}),n&&(0,f.jsx)(v.be,{image:n}),(0,f.jsx)(E,{}),(0,f.jsx)(_,{}),(0,f.jsx)(S.A,{tag:"default",locale:e}),(0,f.jsx)(m.A,{children:t.map(((e,t)=>(0,f.jsx)("meta",{...e},t)))})]})}const A=new Map;var T=n(6125),j=n(6988),R=n(205);function P(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];const o=c.map((t=>{const r=t.default?.[e]??t[e];return r?.(...n)}));return()=>o.forEach((e=>e?.()))}const L=function(e){let{children:t,location:n,previousLocation:r}=e;return(0,R.A)((()=>{r!==n&&(!function(e){let{location:t,previousLocation:n}=e;if(!n)return;const r=t.pathname===n.pathname,o=t.hash===n.hash,a=t.search===n.search;if(r&&o&&!a)return;const{hash:i}=t;if(i){const e=decodeURIComponent(i.substring(1)),t=document.getElementById(e);t?.scrollIntoView()}else window.scrollTo(0,0)}({location:n,previousLocation:r}),P("onRouteDidUpdate",{previousLocation:r,location:n}))}),[r,n]),t};function N(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,p.u)(u.A,e))).flat();return Promise.all(t.map((e=>e.route.component.preload?.())))}class O extends r.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=l.A.canUseDOM?P("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;const n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=P("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),N(n.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:t}=this.props;return(0,f.jsx)(L,{previousLocation:this.previousLocation,location:t,children:(0,f.jsx)(d.qh,{location:t,render:()=>e})})}}const D=O,I="__docusaurus-base-url-issue-banner-suggestion-container";function M(e){return`\ndocument.addEventListener('DOMContentLoaded', function maybeInsertBanner() {\n var shouldInsert = typeof window['docusaurus'] === 'undefined';\n shouldInsert && insertBanner();\n});\n\nfunction insertBanner() {\n var bannerContainer = document.createElement('div');\n bannerContainer.id = '__docusaurus-base-url-issue-banner-container';\n var bannerHtml = ${JSON.stringify(function(e){return`\n<div id="__docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseUrl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">${e}</span> ${"/"===e?" (default value)":""}</p>\n <p>We suggest trying baseUrl = <span id="${I}" style="font-weight: bold; color: green;"></span></p>\n</div>\n`}(e)).replace(/</g,"\\<")};\n bannerContainer.innerHTML = bannerHtml;\n document.body.prepend(bannerContainer);\n var suggestionContainer = document.getElementById('${I}');\n var actualHomePagePath = window.location.pathname;\n var suggestedBaseUrl = actualHomePagePath.substr(-1) === '/'\n ? actualHomePagePath\n : actualHomePagePath + '/';\n suggestionContainer.innerHTML = suggestedBaseUrl;\n}\n`}function F(){const{siteConfig:{baseUrl:e}}=(0,h.A)();return(0,f.jsx)(f.Fragment,{children:!l.A.canUseDOM&&(0,f.jsx)(m.A,{children:(0,f.jsx)("script",{children:M(e)})})})}function z(){const{siteConfig:{baseUrl:e,baseUrlIssueBanner:t}}=(0,h.A)(),{pathname:n}=(0,d.zy)();return t&&n===e?(0,f.jsx)(F,{}):null}function B(){const{siteConfig:{favicon:e,title:t,noIndex:n},i18n:{currentLocale:r,localeConfigs:o}}=(0,h.A)(),a=(0,y.Ay)(e),{htmlLang:i,direction:s}=o[r];return(0,f.jsxs)(m.A,{children:[(0,f.jsx)("html",{lang:i,dir:s}),(0,f.jsx)("title",{children:t}),(0,f.jsx)("meta",{property:"og:title",content:t}),(0,f.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),n&&(0,f.jsx)("meta",{name:"robots",content:"noindex, nofollow"}),e&&(0,f.jsx)("link",{rel:"icon",href:a})]})}var $=n(7489),U=n(2303);function q(){const e=(0,U.A)();return(0,f.jsx)(m.A,{children:(0,f.jsx)("html",{"data-has-hydrated":e})})}const G=(0,p.v)(u.A);function H(){const e=function(e){if(A.has(e.pathname))return{...e,pathname:A.get(e.pathname)};if((0,p.u)(u.A,e.pathname).some((e=>{let{route:t}=e;return!0===t.exact})))return A.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return A.set(e.pathname,t),{...e,pathname:t}}((0,d.zy)());return(0,f.jsx)(D,{location:e,children:G})}function V(){return(0,f.jsx)($.A,{children:(0,f.jsx)(j.l,{children:(0,f.jsxs)(T.x,{children:[(0,f.jsxs)(g,{children:[(0,f.jsx)(B,{}),(0,f.jsx)(C,{}),(0,f.jsx)(z,{}),(0,f.jsx)(H,{})]}),(0,f.jsx)(q,{})]})})})}var W=n(4054);const K=function(e){try{return document.createElement("link").relList.supports(e)}catch{return!1}}("prefetch")?function(e){return new Promise(((t,n)=>{if("undefined"==typeof document)return void n();const r=document.createElement("link");r.setAttribute("rel","prefetch"),r.setAttribute("href",e),r.onload=()=>t(),r.onerror=()=>n();const o=document.getElementsByTagName("head")[0]??document.getElementsByName("script")[0]?.parentNode;o?.appendChild(r)}))}:function(e){return new Promise(((t,n)=>{const r=new XMLHttpRequest;r.open("GET",e,!0),r.withCredentials=!0,r.onload=()=>{200===r.status?t():n()},r.send(null)}))};var Q=n(6921);const Y=new Set,Z=new Set,X=()=>navigator.connection?.effectiveType.includes("2g")||navigator.connection?.saveData,J={prefetch:e=>{if(!(e=>!X()&&!Z.has(e)&&!Y.has(e))(e))return!1;Y.add(e);const t=(0,p.u)(u.A,e).flatMap((e=>{return t=e.route.path,Object.entries(W).filter((e=>{let[n]=e;return n.replace(/-[^-]+$/,"")===t})).flatMap((e=>{let[,t]=e;return Object.values((0,Q.A)(t))}));var t}));return Promise.all(t.map((e=>{const t=n.gca(e);return t&&!t.includes("undefined")?K(t).catch((()=>{})):Promise.resolve()})))},preload:e=>!!(e=>!X()&&!Z.has(e))(e)&&(Z.add(e),N(e))},ee=Object.freeze(J);function te(e){let{children:t}=e;return"hash"===s.default.future.experimental_router?(0,f.jsx)(i.I9,{children:t}):(0,f.jsx)(i.Kd,{children:t})}const ne=Boolean(!0);if(l.A.canUseDOM){window.docusaurus=ee;const e=document.getElementById("__docusaurus"),t=(0,f.jsx)(a.vd,{children:(0,f.jsx)(te,{children:(0,f.jsx)(V,{})})}),n=(e,t)=>{console.error("Docusaurus React Root onRecoverableError:",e,t)},i=()=>{if(window.docusaurusRoot)window.docusaurusRoot.render(t);else if(ne)window.docusaurusRoot=o.hydrateRoot(e,t,{onRecoverableError:n});else{const r=o.createRoot(e,{onRecoverableError:n});r.render(t),window.docusaurusRoot=r}};N(window.location.pathname).then((()=>{(0,r.startTransition)(i)}))}},6988:(e,t,n)=>{"use strict";n.d(t,{o:()=>d,l:()=>p});var r=n(6540),o=n(4784);const a=JSON.parse('{"docusaurus-plugin-content-docs":{"default":{"path":"/docs","versions":[{"name":"current","label":"Next","isLast":true,"path":"/docs","mainDocId":"getting-started/intro","docs":[{"id":"attributions","path":"/docs/attributions"},{"id":"getting-started/boilerplate","path":"/docs/getting-started/boilerplate","sidebar":"Discover"},{"id":"getting-started/intro","path":"/docs/getting-started/intro","sidebar":"Discover"},{"id":"getting-started/manual-integration","path":"/docs/getting-started/manual-integration","sidebar":"Discover"},{"id":"getting-started/nextjs-integration","path":"/docs/getting-started/nextjs-integration","sidebar":"Discover"},{"id":"getting-started/rollup-integration","path":"/docs/getting-started/rollup-integration","sidebar":"Discover"},{"id":"getting-started/storybook-integration","path":"/docs/getting-started/storybook-integration","sidebar":"Discover"},{"id":"getting-started/stylable-config","path":"/docs/getting-started/stylable-config","sidebar":"Discover"},{"id":"getting-started/tooling/cli","path":"/docs/getting-started/tooling/cli","sidebar":"Discover"},{"id":"getting-started/tooling/stylable-intelligence","path":"/docs/getting-started/tooling/stylable-intelligence","sidebar":"Discover"},{"id":"getting-started/typescript-integration","path":"/docs/getting-started/typescript-integration","sidebar":"Discover"},{"id":"getting-started/webpack-integration","path":"/docs/getting-started/webpack-integration","sidebar":"Discover"},{"id":"guides/component-best-practices","path":"/docs/guides/component-best-practices","sidebar":"Guides"},{"id":"guides/component-variants","path":"/docs/guides/component-variants","sidebar":"Guides"},{"id":"guides/handbook/class","path":"/docs/guides/handbook/class","sidebar":"Guides"},{"id":"guides/handbook/classes","path":"/docs/guides/handbook/classes"},{"id":"guides/handbook/custom-state","path":"/docs/guides/handbook/custom-state","sidebar":"Guides"},{"id":"guides/handbook/extend","path":"/docs/guides/handbook/extend","sidebar":"Guides"},{"id":"guides/handbook/import-class","path":"/docs/guides/handbook/import-class","sidebar":"Guides"},{"id":"guides/handbook/intro","path":"/docs/guides/handbook/intro","sidebar":"Guides"},{"id":"guides/handbook/namespacing","path":"/docs/guides/handbook/namespacing","sidebar":"Guides"},{"id":"guides/handbook/runtime","path":"/docs/guides/handbook/runtime","sidebar":"Guides"},{"id":"guides/migration-v3","path":"/docs/guides/migration-v3","sidebar":"Guides"},{"id":"guides/migration-v5","path":"/docs/guides/migration-v5","sidebar":"Guides"},{"id":"guides/project-commons","path":"/docs/guides/project-commons","sidebar":"Guides"},{"id":"guides/shared-classes","path":"/docs/guides/shared-classes","sidebar":"Guides"},{"id":"guides/ssr","path":"/docs/guides/ssr","sidebar":"Guides"},{"id":"references/cheatsheet","path":"/docs/references/cheatsheet","sidebar":"Specification Reference"},{"id":"references/class-selectors","path":"/docs/references/class-selectors","sidebar":"Specification Reference"},{"id":"references/contains","path":"/docs/references/contains","sidebar":"Specification Reference"},{"id":"references/css-vars","path":"/docs/references/css-vars","sidebar":"Specification Reference"},{"id":"references/custom-selectors","path":"/docs/references/custom-selectors","sidebar":"Specification Reference"},{"id":"references/extend-stylesheet","path":"/docs/references/extend-stylesheet","sidebar":"Specification Reference"},{"id":"references/formatters","path":"/docs/references/formatters","sidebar":"Specification Reference"},{"id":"references/global-selectors","path":"/docs/references/global-selectors","sidebar":"Specification Reference"},{"id":"references/imports","path":"/docs/references/imports","sidebar":"Specification Reference"},{"id":"references/keyframes","path":"/docs/references/keyframes","sidebar":"Specification Reference"},{"id":"references/layer","path":"/docs/references/layer","sidebar":"Specification Reference"},{"id":"references/mixins","path":"/docs/references/mixins","sidebar":"Specification Reference"},{"id":"references/namespace","path":"/docs/references/namespace","sidebar":"Specification Reference"},{"id":"references/programmatic-api","path":"/docs/references/programmatic-api","sidebar":"Specification Reference"},{"id":"references/pseudo-classes","path":"/docs/references/pseudo-classes","sidebar":"Specification Reference"},{"id":"references/pseudo-elements","path":"/docs/references/pseudo-elements","sidebar":"Specification Reference"},{"id":"references/root","path":"/docs/references/root","sidebar":"Specification Reference"},{"id":"references/runtime","path":"/docs/references/runtime","sidebar":"Specification Reference"},{"id":"references/st-scope","path":"/docs/references/st-scope","sidebar":"Specification Reference"},{"id":"references/st-variables","path":"/docs/references/st-variables","sidebar":"Specification Reference"},{"id":"references/type-selectors","path":"/docs/references/type-selectors","sidebar":"Specification Reference"},{"id":"references/using-external-assets","path":"/docs/references/using-external-assets","sidebar":"Specification Reference"},{"id":"style-guide","path":"/docs/style-guide"},{"id":"/getting-started/integrations","path":"/docs/getting-started/integrations","sidebar":"Discover"}],"draftIds":[],"sidebars":{"Discover":{"link":{"path":"/docs/getting-started/intro","label":"getting-started/intro"}},"Guides":{"link":{"path":"/docs/guides/handbook/intro","label":"guides/handbook/intro"}},"Specification Reference":{"link":{"path":"/docs/references/cheatsheet","label":"references/cheatsheet"}}}}],"breadcrumbs":true}}}'),i=JSON.parse('{"defaultLocale":"en","locales":["en"],"path":"i18n","currentLocale":"en","localeConfigs":{"en":{"label":"English","direction":"ltr","htmlLang":"en","calendar":"gregory","path":"en"}}}');var s=n(2654);const l=JSON.parse('{"docusaurusVersion":"3.7.0","siteVersion":"0.0.1","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"3.7.0"},"docusaurus-plugin-content-blog":{"type":"package","name":"@docusaurus/plugin-content-blog","version":"3.7.0"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"3.7.0"},"docusaurus-plugin-google-analytics":{"type":"package","name":"@docusaurus/plugin-google-analytics","version":"3.7.0"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"3.7.0"},"docusaurus-plugin-svgr":{"type":"package","name":"@docusaurus/plugin-svgr","version":"3.7.0"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"3.7.0"},"@easyops-cn/docusaurus-search-local":{"type":"package","name":"@easyops-cn/docusaurus-search-local","version":"0.47.0"},"stylable-docusaurus-plugin":{"type":"project"}}}');var c=n(4848);const u={siteConfig:o.default,siteMetadata:l,globalData:a,i18n:i,codeTranslations:s},d=r.createContext(u);function p(e){let{children:t}=e;return(0,c.jsx)(d.Provider,{value:u,children:t})}},7489:(e,t,n)=>{"use strict";n.d(t,{A:()=>m});var r=n(6540),o=n(8193),a=n(5260),i=n(440),s=n(7823),l=n(3102),c=n(4848);function u(e){let{error:t,tryAgain:n}=e;return(0,c.jsxs)("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"flex-start",minHeight:"100vh",width:"100%",maxWidth:"80ch",fontSize:"20px",margin:"0 auto",padding:"1rem"},children:[(0,c.jsx)("h1",{style:{fontSize:"3rem"},children:"This page crashed"}),(0,c.jsx)("button",{type:"button",onClick:n,style:{margin:"1rem 0",fontSize:"2rem",cursor:"pointer",borderRadius:20,padding:"1rem"},children:"Try again"}),(0,c.jsx)(d,{error:t})]})}function d(e){let{error:t}=e;const n=(0,i.rA)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,c.jsx)("p",{style:{whiteSpace:"pre-wrap"},children:n})}function p(e){let{children:t}=e;return(0,c.jsx)(l.W,{value:{plugin:{name:"docusaurus-core-error-boundary",id:"default"}},children:t})}function f(e){let{error:t,tryAgain:n}=e;return(0,c.jsx)(p,{children:(0,c.jsxs)(m,{fallback:()=>(0,c.jsx)(u,{error:t,tryAgain:n}),children:[(0,c.jsx)(a.A,{children:(0,c.jsx)("title",{children:"Page Error"})}),(0,c.jsx)(s.A,{children:(0,c.jsx)(u,{error:t,tryAgain:n})})]})})}const g=e=>(0,c.jsx)(f,{...e});class m extends r.Component{constructor(e){super(e),this.state={error:null}}componentDidCatch(e){o.A.canUseDOM&&this.setState({error:e})}render(){const{children:e}=this.props,{error:t}=this.state;if(t){const e={error:t,tryAgain:()=>this.setState({error:null})};return(this.props.fallback??g)(e)}return e??null}}},8193:(e,t,n)=>{"use strict";n.d(t,{A:()=>o});const r="undefined"!=typeof window&&"document"in window&&"createElement"in window.document,o={canUseDOM:r,canUseEventListeners:r&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:r&&"IntersectionObserver"in window,canUseViewport:r&&"screen"in window}},5260:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});n(6540);var r=n(545),o=n(4848);function a(e){return(0,o.jsx)(r.mg,{...e})}},8774:(e,t,n)=>{"use strict";n.d(t,{A:()=>f});var r=n(6540),o=n(4625),a=n(440),i=n(4586),s=n(6654),l=n(8193),c=n(3427),u=n(6025),d=n(4848);function p(e,t){let{isNavLink:n,to:p,href:f,activeClassName:g,isActive:m,"data-noBrokenLinkCheck":h,autoAddBaseUrl:y=!0,...b}=e;const{siteConfig:v}=(0,i.A)(),{trailingSlash:w,baseUrl:k}=v,x=v.future.experimental_router,{withBaseUrl:S}=(0,u.hH)(),_=(0,c.A)(),E=(0,r.useRef)(null);(0,r.useImperativeHandle)(t,(()=>E.current));const C=p||f;const A=(0,s.A)(C),T=C?.replace("pathname://","");let j=void 0!==T?(R=T,y&&(e=>e.startsWith("/"))(R)?S(R):R):void 0;var R;"hash"===x&&j?.startsWith("./")&&(j=j?.slice(1)),j&&A&&(j=(0,a.Ks)(j,{trailingSlash:w,baseUrl:k}));const P=(0,r.useRef)(!1),L=n?o.k2:o.N_,N=l.A.canUseIntersectionObserver,O=(0,r.useRef)(),D=()=>{P.current||null==j||(window.docusaurus.preload(j),P.current=!0)};(0,r.useEffect)((()=>(!N&&A&&l.A.canUseDOM&&null!=j&&window.docusaurus.prefetch(j),()=>{N&&O.current&&O.current.disconnect()})),[O,j,N,A]);const I=j?.startsWith("#")??!1,M=!b.target||"_self"===b.target,F=!j||!A||!M||I&&"hash"!==x;h||!I&&F||_.collectLink(j),b.id&&_.collectAnchor(b.id);const z={};return F?(0,d.jsx)("a",{ref:E,href:j,...C&&!A&&{target:"_blank",rel:"noopener noreferrer"},...b,...z}):(0,d.jsx)(L,{...b,onMouseEnter:D,onTouchStart:D,innerRef:e=>{E.current=e,N&&e&&A&&(O.current=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(O.current.unobserve(e),O.current.disconnect(),null!=j&&window.docusaurus.prefetch(j))}))})),O.current.observe(e))},to:j,...n&&{isActive:m,activeClassName:g},...z})}const f=r.forwardRef(p)},1312:(e,t,n)=>{"use strict";n.d(t,{A:()=>c,T:()=>l});var r=n(6540),o=n(4848);function a(e,t){const n=e.split(/(\{\w+\})/).map(((e,n)=>{if(n%2==1){const n=t?.[e.slice(1,-1)];if(void 0!==n)return n}return e}));return n.some((e=>(0,r.isValidElement)(e)))?n.map(((e,t)=>(0,r.isValidElement)(e)?r.cloneElement(e,{key:t}):e)).filter((e=>""!==e)):n.join("")}var i=n(2654);function s(e){let{id:t,message:n}=e;if(void 0===t&&void 0===n)throw new Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return i[t??n]??n??t}function l(e,t){let{message:n,id:r}=e;return a(s({message:n,id:r}),t)}function c(e){let{children:t,id:n,values:r}=e;if(t&&"string"!=typeof t)throw console.warn("Illegal <Translate> children",t),new Error("The Docusaurus <Translate> component only accept simple string values");const i=s({message:t,id:n});return(0,o.jsx)(o.Fragment,{children:a(i,r)})}},7065:(e,t,n)=>{"use strict";n.d(t,{W:()=>r});const r="default"},6654:(e,t,n)=>{"use strict";function r(e){return/^(?:\w*:|\/\/)/.test(e)}function o(e){return void 0!==e&&!r(e)}n.d(t,{A:()=>o,z:()=>r})},6025:(e,t,n)=>{"use strict";n.d(t,{Ay:()=>s,hH:()=>i});var r=n(6540),o=n(4586),a=n(6654);function i(){const{siteConfig:e}=(0,o.A)(),{baseUrl:t,url:n}=e,i=e.future.experimental_router,s=(0,r.useCallback)(((e,r)=>function(e){let{siteUrl:t,baseUrl:n,url:r,options:{forcePrependBaseUrl:o=!1,absolute:i=!1}={},router:s}=e;if(!r||r.startsWith("#")||(0,a.z)(r))return r;if("hash"===s)return r.startsWith("/")?`.${r}`:`./${r}`;if(o)return n+r.replace(/^\//,"");if(r===n.replace(/\/$/,""))return n;const l=r.startsWith(n)?r:n+r.replace(/^\//,"");return i?t+l:l}({siteUrl:n,baseUrl:t,url:e,options:r,router:i})),[n,t,i]);return{withBaseUrl:s}}function s(e,t){void 0===t&&(t={});const{withBaseUrl:n}=i();return n(e,t)}},3427:(e,t,n)=>{"use strict";n.d(t,{A:()=>i});var r=n(6540);n(4848);const o=r.createContext({collectAnchor:()=>{},collectLink:()=>{}}),a=()=>(0,r.useContext)(o);function i(){return a()}},4586:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});var r=n(6540),o=n(6988);function a(){return(0,r.useContext)(o.o)}},2303:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});var r=n(6540),o=n(6125);function a(){return(0,r.useContext)(o.o)}},205:(e,t,n)=>{"use strict";n.d(t,{A:()=>o});var r=n(6540);const o=n(8193).A.canUseDOM?r.useLayoutEffect:r.useEffect},6803:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});var r=n(6540),o=n(3102);function a(){const e=r.useContext(o.o);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}},6921:(e,t,n)=>{"use strict";n.d(t,{A:()=>o});const r=e=>"object"==typeof e&&!!e&&Object.keys(e).length>0;function o(e){const t={};return function e(n,o){Object.entries(n).forEach((n=>{let[a,i]=n;const s=o?`${o}.${a}`:a;r(i)?e(i,s):t[s]=i}))}(e),t}},3102:(e,t,n)=>{"use strict";n.d(t,{W:()=>i,o:()=>a});var r=n(6540),o=n(4848);const a=r.createContext(null);function i(e){let{children:t,value:n}=e;const i=r.useContext(a),s=(0,r.useMemo)((()=>function(e){let{parent:t,value:n}=e;if(!t){if(!n)throw new Error("Unexpected: no Docusaurus route context found");if(!("plugin"in n))throw new Error("Unexpected: Docusaurus topmost route context has no `plugin` attribute");return n}const r={...t.data,...n?.data};return{plugin:t.plugin,data:r}}({parent:i,value:n})),[i,n]);return(0,o.jsx)(a.Provider,{value:s,children:t})}},3886:(e,t,n)=>{"use strict";n.d(t,{VQ:()=>h,XK:()=>v,g1:()=>b});var r=n(6540),o=n(4070),a=n(7065),i=n(6342),s=n(679),l=n(9532),c=n(4848);const u=e=>`docs-preferred-version-${e}`,d={save:(e,t,n)=>{(0,s.Wf)(u(e),{persistence:t}).set(n)},read:(e,t)=>(0,s.Wf)(u(e),{persistence:t}).get(),clear:(e,t)=>{(0,s.Wf)(u(e),{persistence:t}).del()}},p=e=>Object.fromEntries(e.map((e=>[e,{preferredVersionName:null}])));const f=r.createContext(null);function g(){const e=(0,o.Gy)(),t=(0,i.p)().docs.versionPersistence,n=(0,r.useMemo)((()=>Object.keys(e)),[e]),[a,s]=(0,r.useState)((()=>p(n)));(0,r.useEffect)((()=>{s(function(e){let{pluginIds:t,versionPersistence:n,allDocsData:r}=e;function o(e){const t=d.read(e,n);return r[e].versions.some((e=>e.name===t))?{preferredVersionName:t}:(d.clear(e,n),{preferredVersionName:null})}return Object.fromEntries(t.map((e=>[e,o(e)])))}({allDocsData:e,versionPersistence:t,pluginIds:n}))}),[e,t,n]);return[a,(0,r.useMemo)((()=>({savePreferredVersion:function(e,n){d.save(e,t,n),s((t=>({...t,[e]:{preferredVersionName:n}})))}})),[t])]}function m(e){let{children:t}=e;const n=g();return(0,c.jsx)(f.Provider,{value:n,children:t})}function h(e){let{children:t}=e;return(0,c.jsx)(m,{children:t})}function y(){const e=(0,r.useContext)(f);if(!e)throw new l.dV("DocsPreferredVersionContextProvider");return e}function b(e){void 0===e&&(e=a.W);const t=(0,o.ht)(e),[n,i]=y(),{preferredVersionName:s}=n[e];return{preferredVersion:t.versions.find((e=>e.name===s))??null,savePreferredVersionName:(0,r.useCallback)((t=>{i.savePreferredVersion(e,t)}),[i,e])}}function v(){const e=(0,o.Gy)(),[t]=y();function n(n){const r=e[n],{preferredVersionName:o}=t[n];return r.versions.find((e=>e.name===o))??null}const r=Object.keys(e);return Object.fromEntries(r.map((e=>[e,n(e)])))}},2565:(e,t,n)=>{"use strict";n.d(t,{k:()=>a,v:()=>i});var r=n(4070),o=n(3886);function a(e,t){return`docs-${e}-${t}`}function i(){const e=(0,r.Gy)(),t=(0,r.gk)(),n=(0,o.XK)();return[...Object.keys(e).map((function(r){const o=t?.activePlugin.pluginId===r?t.activeVersion:void 0,i=n[r],s=e[r].versions.find((e=>e.isLast));return a(r,(o??i??s).name)}))]}},609:(e,t,n)=>{"use strict";n.d(t,{V:()=>l,t:()=>c});var r=n(6540),o=n(9532),a=n(4848);const i=Symbol("EmptyContext"),s=r.createContext(i);function l(e){let{children:t,name:n,items:o}=e;const i=(0,r.useMemo)((()=>n&&o?{name:n,items:o}:null),[n,o]);return(0,a.jsx)(s.Provider,{value:i,children:t})}function c(){const e=(0,r.useContext)(s);if(e===i)throw new o.dV("DocsSidebarProvider");return e}},6972:(e,t,n)=>{"use strict";n.d(t,{$S:()=>g,B5:()=>E,Nr:()=>f,OF:()=>k,QB:()=>_,Vd:()=>x,Y:()=>v,cC:()=>p,d1:()=>C,fW:()=>S,w8:()=>y});var r=n(6540),o=n(6347),a=n(2831),i=n(4070),s=n(9169),l=n(1682),c=n(3886),u=n(3025),d=n(609);function p(e){const t=(0,u.r)();if(!e)return;const n=t.docs[e];if(!n)throw new Error(`no version doc found by id=${e}`);return n}function f(e){return"link"!==e.type||e.unlisted?"category"===e.type?function(e){if(e.href&&!e.linkUnlisted)return e.href;for(const t of e.items){const e=f(t);if(e)return e}}(e):void 0:e.href}function g(){const{pathname:e}=(0,o.zy)(),t=(0,d.t)();if(!t)throw new Error("Unexpected: cant find current sidebar in context");const n=w({sidebarItems:t.items,pathname:e,onlyCategories:!0}).slice(-1)[0];if(!n)throw new Error(`${e} is not associated with a category. useCurrentSidebarCategory() should only be used on category index pages.`);return n}const m=(e,t)=>void 0!==e&&(0,s.ys)(e,t),h=(e,t)=>e.some((e=>y(e,t)));function y(e,t){return"link"===e.type?m(e.href,t):"category"===e.type&&(m(e.href,t)||h(e.items,t))}function b(e,t){switch(e.type){case"category":return y(e,t)||void 0!==e.href&&!e.linkUnlisted||e.items.some((e=>b(e,t)));case"link":return!e.unlisted||y(e,t);default:return!0}}function v(e,t){return(0,r.useMemo)((()=>e.filter((e=>b(e,t)))),[e,t])}function w(e){let{sidebarItems:t,pathname:n,onlyCategories:r=!1}=e;const o=[];return function e(t){for(const a of t)if("category"===a.type&&((0,s.ys)(a.href,n)||e(a.items))||"link"===a.type&&(0,s.ys)(a.href,n)){return r&&"category"!==a.type||o.unshift(a),!0}return!1}(t),o}function k(){const e=(0,d.t)(),{pathname:t}=(0,o.zy)(),n=(0,i.vT)()?.pluginData.breadcrumbs;return!1!==n&&e?w({sidebarItems:e.items,pathname:t}):null}function x(e){const{activeVersion:t}=(0,i.zK)(e),{preferredVersion:n}=(0,c.g1)(e),o=(0,i.r7)(e);return(0,r.useMemo)((()=>(0,l.sb)([t,n,o].filter(Boolean))),[t,n,o])}function S(e,t){const n=x(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.sidebars?Object.entries(e.sidebars):[])),r=t.find((t=>t[0]===e));if(!r)throw new Error(`Can't find any sidebar with id "${e}" in version${n.length>1?"s":""} ${n.map((e=>e.name)).join(", ")}".\nAvailable sidebar ids are:\n- ${t.map((e=>e[0])).join("\n- ")}`);return r[1]}),[e,n])}function _(e,t){const n=x(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.docs)),r=t.find((t=>t.id===e));if(!r){if(n.flatMap((e=>e.draftIds)).includes(e))return null;throw new Error(`Couldn't find any doc with id "${e}" in version${n.length>1?"s":""} "${n.map((e=>e.name)).join(", ")}".\nAvailable doc ids are:\n- ${(0,l.sb)(t.map((e=>e.id))).join("\n- ")}`)}return r}),[e,n])}function E(e){let{route:t}=e;const n=(0,o.zy)(),r=(0,u.r)(),i=t.routes,s=i.find((e=>(0,o.B6)(n.pathname,e)));if(!s)return null;const l=s.sidebar,c=l?r.docsSidebars[l]:void 0;return{docElement:(0,a.v)(i),sidebarName:l,sidebarItems:c}}function C(e){return e.filter((e=>!("category"===e.type||"link"===e.type)||!!f(e)))}},3025:(e,t,n)=>{"use strict";n.d(t,{n:()=>s,r:()=>l});var r=n(6540),o=n(9532),a=n(4848);const i=r.createContext(null);function s(e){let{children:t,version:n}=e;return(0,a.jsx)(i.Provider,{value:n,children:t})}function l(){const e=(0,r.useContext)(i);if(null===e)throw new o.dV("DocsVersionProvider");return e}},4070:(e,t,n)=>{"use strict";n.d(t,{d1:()=>u.d1,zK:()=>w,vT:()=>h,gk:()=>y,Gy:()=>g,$S:()=>u.$S,HW:()=>k,vF:()=>p.v,ht:()=>m,g1:()=>d.g1,r7:()=>v,jh:()=>b});var r=n(6347),o=n(4586),a=n(7065);function i(e,t){void 0===t&&(t={});const n=function(){const{globalData:e}=(0,o.A)();return e}()[e];if(!n&&t.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin.`);return n}const s=e=>e.versions.find((e=>e.isLast));function l(e,t){return[...e.versions].sort(((e,t)=>e.path===t.path?0:e.path.includes(t.path)?-1:t.path.includes(e.path)?1:0)).find((e=>!!(0,r.B6)(t,{path:e.path,exact:!1,strict:!1})))}function c(e,t){const n=l(e,t),o=n?.docs.find((e=>!!(0,r.B6)(t,{path:e.path,exact:!0,strict:!1})));return{activeVersion:n,activeDoc:o,alternateDocVersions:o?function(t){const n={};return e.versions.forEach((e=>{e.docs.forEach((r=>{r.id===t&&(n[e.name]=r)}))})),n}(o.id):{}}}var u=n(6972),d=n(3886),p=n(2565);const f={},g=()=>i("docusaurus-plugin-content-docs")??f,m=e=>{try{return function(e,t,n){void 0===t&&(t=a.W),void 0===n&&(n={});const r=i(e),o=r?.[t];if(!o&&n.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin with id "${t}".`);return o}("docusaurus-plugin-content-docs",e,{failfast:!0})}catch(t){throw new Error("You are using a feature of the Docusaurus docs plugin, but this plugin does not seem to be enabled"+("Default"===e?"":` (pluginId=${e}`),{cause:t})}};function h(e){void 0===e&&(e={});const t=g(),{pathname:n}=(0,r.zy)();return function(e,t,n){void 0===n&&(n={});const o=Object.entries(e).sort(((e,t)=>t[1].path.localeCompare(e[1].path))).find((e=>{let[,n]=e;return!!(0,r.B6)(t,{path:n.path,exact:!1,strict:!1})})),a=o?{pluginId:o[0],pluginData:o[1]}:void 0;if(!a&&n.failfast)throw new Error(`Can't find active docs plugin for "${t}" pathname, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: ${Object.values(e).map((e=>e.path)).join(", ")}`);return a}(t,n,e)}function y(e){void 0===e&&(e={});const t=h(e),{pathname:n}=(0,r.zy)();if(!t)return;return{activePlugin:t,activeVersion:l(t.pluginData,n)}}function b(e){return m(e).versions}function v(e){const t=m(e);return s(t)}function w(e){const t=m(e),{pathname:n}=(0,r.zy)();return c(t,n)}function k(e){const t=m(e),{pathname:n}=(0,r.zy)();return function(e,t){const n=s(e);return{latestDocSuggestion:c(e,t).alternateDocVersions[n.name],latestVersionSuggestion:n}}(t,n)}},7651:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>r});const r={onRouteDidUpdate(e){let{location:t,previousLocation:n}=e;!n||t.pathname===n.pathname&&t.search===n.search&&t.hash===n.hash||(window.ga("set","page",t.pathname+t.search+t.hash),window.ga("send","pageview"))}}},6294:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>a});var r=n(5947),o=n.n(r);o().configure({showSpinner:!1});const a={onRouteUpdate(e){let{location:t,previousLocation:n}=e;if(n&&t.pathname!==n.pathname){const e=window.setTimeout((()=>{o().start()}),200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){o().done()}}},6134:(e,t,n)=>{"use strict";var r=n(1765),o=n(4784);!function(e){const{themeConfig:{prism:t}}=o.default,{additionalLanguages:r}=t,a=globalThis.Prism;globalThis.Prism=e,r.forEach((e=>{"php"===e&&n(9700),n(8692)(`./prism-${e}`)})),delete globalThis.Prism,void 0!==a&&(globalThis.Prism=e)}(r.My)},1107:(e,t,n)=>{"use strict";n.d(t,{A:()=>u});n(6540);var r=n(4164),o=n(1312),a=n(6342),i=n(8774),s=n(3427);const l={anchorWithStickyNavbar:"anchorWithStickyNavbar_LWe7",anchorWithHideOnScrollNavbar:"anchorWithHideOnScrollNavbar_WYt5"};var c=n(4848);function u(e){let{as:t,id:n,...u}=e;const d=(0,s.A)(),{navbar:{hideOnScroll:p}}=(0,a.p)();if("h1"===t||!n)return(0,c.jsx)(t,{...u,id:void 0});d.collectAnchor(n);const f=(0,o.T)({id:"theme.common.headingLinkTitle",message:"Direct link to {heading}",description:"Title for link to heading"},{heading:"string"==typeof u.children?u.children:n});return(0,c.jsxs)(t,{...u,className:(0,r.A)("anchor",p?l.anchorWithHideOnScrollNavbar:l.anchorWithStickyNavbar,u.className),id:n,children:[u.children,(0,c.jsx)(i.A,{className:"hash-link",to:`#${n}`,"aria-label":f,title:f,children:"\u200b"})]})}},3186:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});n(6540);const r={iconExternalLink:"iconExternalLink_nPIU"};var o=n(4848);function a(e){let{width:t=13.5,height:n=13.5}=e;return(0,o.jsx)("svg",{width:t,height:n,"aria-hidden":"true",viewBox:"0 0 24 24",className:r.iconExternalLink,children:(0,o.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})}},7823:(e,t,n)=>{"use strict";n.d(t,{A:()=>Xt});var r=n(6540),o=n(4164),a=n(7489),i=n(1213),s=n(6347),l=n(1312),c=n(5062),u=n(4848);const d="__docusaurus_skipToContent_fallback";function p(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}function f(){const e=(0,r.useRef)(null),{action:t}=(0,s.W6)(),n=(0,r.useCallback)((e=>{e.preventDefault();const t=document.querySelector("main:first-of-type")??document.getElementById(d);t&&p(t)}),[]);return(0,c.$)((n=>{let{location:r}=n;e.current&&!r.hash&&"PUSH"===t&&p(e.current)})),{containerRef:e,onClick:n}}const g=(0,l.T)({id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",message:"Skip to main content"});function m(e){const t=e.children??g,{containerRef:n,onClick:r}=f();return(0,u.jsx)("div",{ref:n,role:"region","aria-label":g,children:(0,u.jsx)("a",{...e,href:`#${d}`,onClick:r,children:t})})}var h=n(7559),y=n(4090);const b={skipToContent:"skipToContent_fXgn"};function v(){return(0,u.jsx)(m,{className:b.skipToContent})}var w=n(6342),k=n(5041);function x(e){let{width:t=21,height:n=21,color:r="currentColor",strokeWidth:o=1.2,className:a,...i}=e;return(0,u.jsx)("svg",{viewBox:"0 0 15 15",width:t,height:n,...i,children:(0,u.jsx)("g",{stroke:r,strokeWidth:o,children:(0,u.jsx)("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})})})}const S={closeButton:"closeButton_CVFx"};function _(e){return(0,u.jsx)("button",{type:"button","aria-label":(0,l.T)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"}),...e,className:(0,o.A)("clean-btn close",S.closeButton,e.className),children:(0,u.jsx)(x,{width:14,height:14,strokeWidth:3.1})})}const E={content:"content_knG7"};function C(e){const{announcementBar:t}=(0,w.p)(),{content:n}=t;return(0,u.jsx)("div",{...e,className:(0,o.A)(E.content,e.className),dangerouslySetInnerHTML:{__html:n}})}const A={announcementBar:"announcementBar_mb4j",announcementBarPlaceholder:"announcementBarPlaceholder_vyr4",announcementBarClose:"announcementBarClose_gvF7",announcementBarContent:"announcementBarContent_xLdY"};function T(){const{announcementBar:e}=(0,w.p)(),{isActive:t,close:n}=(0,k.M)();if(!t)return null;const{backgroundColor:r,textColor:o,isCloseable:a}=e;return(0,u.jsxs)("div",{className:A.announcementBar,style:{backgroundColor:r,color:o},role:"banner",children:[a&&(0,u.jsx)("div",{className:A.announcementBarPlaceholder}),(0,u.jsx)(C,{className:A.announcementBarContent}),a&&(0,u.jsx)(_,{onClick:n,className:A.announcementBarClose})]})}var j=n(2069),R=n(3104);var P=n(9532),L=n(5600);const N=r.createContext(null);function O(e){let{children:t}=e;const n=function(){const e=(0,j.M)(),t=(0,L.YL)(),[n,o]=(0,r.useState)(!1),a=null!==t.component,i=(0,P.ZC)(a);return(0,r.useEffect)((()=>{a&&!i&&o(!0)}),[a,i]),(0,r.useEffect)((()=>{a?e.shown||o(!0):o(!1)}),[e.shown,a]),(0,r.useMemo)((()=>[n,o]),[n])}();return(0,u.jsx)(N.Provider,{value:n,children:t})}function D(e){if(e.component){const t=e.component;return(0,u.jsx)(t,{...e.props})}}function I(){const e=(0,r.useContext)(N);if(!e)throw new P.dV("NavbarSecondaryMenuDisplayProvider");const[t,n]=e,o=(0,r.useCallback)((()=>n(!1)),[n]),a=(0,L.YL)();return(0,r.useMemo)((()=>({shown:t,hide:o,content:D(a)})),[o,a,t])}function M(e){let{header:t,primaryMenu:n,secondaryMenu:r}=e;const{shown:a}=I();return(0,u.jsxs)("div",{className:"navbar-sidebar",children:[t,(0,u.jsxs)("div",{className:(0,o.A)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":a}),children:[(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:n}),(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:r})]})]})}var F=n(5293),z=n(2303);function B(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"})})}function $(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"})})}const U={toggle:"toggle_vylO",toggleButton:"toggleButton_gllP",darkToggleIcon:"darkToggleIcon_wfgR",lightToggleIcon:"lightToggleIcon_pyhR",toggleButtonDisabled:"toggleButtonDisabled_aARS"};function q(e){let{className:t,buttonClassName:n,value:r,onChange:a}=e;const i=(0,z.A)(),s=(0,l.T)({message:"Switch between dark and light mode (currently {mode})",id:"theme.colorToggle.ariaLabel",description:"The ARIA label for the navbar color mode toggle"},{mode:"dark"===r?(0,l.T)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,l.T)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return(0,u.jsx)("div",{className:(0,o.A)(U.toggle,t),children:(0,u.jsxs)("button",{className:(0,o.A)("clean-btn",U.toggleButton,!i&&U.toggleButtonDisabled,n),type:"button",onClick:()=>a("dark"===r?"light":"dark"),disabled:!i,title:s,"aria-label":s,"aria-live":"polite","aria-pressed":"dark"===r?"true":"false",children:[(0,u.jsx)(B,{className:(0,o.A)(U.toggleIcon,U.lightToggleIcon)}),(0,u.jsx)($,{className:(0,o.A)(U.toggleIcon,U.darkToggleIcon)})]})})}const G=r.memo(q),H={darkNavbarColorModeToggle:"darkNavbarColorModeToggle_X3D1"};function V(e){let{className:t}=e;const n=(0,w.p)().navbar.style,r=(0,w.p)().colorMode.disableSwitch,{colorMode:o,setColorMode:a}=(0,F.G)();return r?null:(0,u.jsx)(G,{className:t,buttonClassName:"dark"===n?H.darkNavbarColorModeToggle:void 0,value:o,onChange:a})}var W=n(3465);function K(){return(0,u.jsx)(W.A,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function Q(){const e=(0,j.M)();return(0,u.jsx)("button",{type:"button","aria-label":(0,l.T)({id:"theme.docs.sidebar.closeSidebarButtonAriaLabel",message:"Close navigation bar",description:"The ARIA label for close button of mobile sidebar"}),className:"clean-btn navbar-sidebar__close",onClick:()=>e.toggle(),children:(0,u.jsx)(x,{color:"var(--ifm-color-emphasis-600)"})})}function Y(){return(0,u.jsxs)("div",{className:"navbar-sidebar__brand",children:[(0,u.jsx)(K,{}),(0,u.jsx)(V,{className:"margin-right--md"}),(0,u.jsx)(Q,{})]})}var Z=n(8774),X=n(6025),J=n(6654);function ee(e,t){return void 0!==e&&void 0!==t&&new RegExp(e,"gi").test(t)}var te=n(3186);function ne(e){let{activeBasePath:t,activeBaseRegex:n,to:r,href:o,label:a,html:i,isDropdownLink:s,prependBaseUrlToHref:l,...c}=e;const d=(0,X.Ay)(r),p=(0,X.Ay)(t),f=(0,X.Ay)(o,{forcePrependBaseUrl:!0}),g=a&&o&&!(0,J.A)(o),m=i?{dangerouslySetInnerHTML:{__html:i}}:{children:(0,u.jsxs)(u.Fragment,{children:[a,g&&(0,u.jsx)(te.A,{...s&&{width:12,height:12}})]})};return o?(0,u.jsx)(Z.A,{href:l?f:o,...c,...m}):(0,u.jsx)(Z.A,{to:d,isNavLink:!0,...(t||n)&&{isActive:(e,t)=>n?ee(n,t.pathname):t.pathname.startsWith(p)},...c,...m})}function re(e){let{className:t,isDropdownItem:n=!1,...r}=e;const a=(0,u.jsx)(ne,{className:(0,o.A)(n?"dropdown__link":"navbar__item navbar__link",t),isDropdownLink:n,...r});return n?(0,u.jsx)("li",{children:a}):a}function oe(e){let{className:t,isDropdownItem:n,...r}=e;return(0,u.jsx)("li",{className:"menu__list-item",children:(0,u.jsx)(ne,{className:(0,o.A)("menu__link",t),...r})})}function ae(e){let{mobile:t=!1,position:n,...r}=e;const o=t?oe:re;return(0,u.jsx)(o,{...r,activeClassName:r.activeClassName??(t?"menu__link--active":"navbar__link--active")})}var ie=n(1422),se=n(9169),le=n(4586);const ce="dropdownNavbarItemMobile_S0Fm";function ue(e,t){return e.some((e=>function(e,t){return!!(0,se.ys)(e.to,t)||!!ee(e.activeBaseRegex,t)||!(!e.activeBasePath||!t.startsWith(e.activeBasePath))}(e,t)))}function de(e){let{items:t,position:n,className:a,onClick:i,...s}=e;const l=(0,r.useRef)(null),[c,d]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{const e=e=>{l.current&&!l.current.contains(e.target)&&d(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),document.addEventListener("focusin",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e),document.removeEventListener("focusin",e)}}),[l]),(0,u.jsxs)("div",{ref:l,className:(0,o.A)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===n,"dropdown--show":c}),children:[(0,u.jsx)(ne,{"aria-haspopup":"true","aria-expanded":c,role:"button",href:s.to?void 0:"#",className:(0,o.A)("navbar__link",a),...s,onClick:s.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),d(!c))},children:s.children??s.label}),(0,u.jsx)("ul",{className:"dropdown__menu",children:t.map(((e,t)=>(0,r.createElement)(ut,{isDropdownItem:!0,activeClassName:"dropdown__link--active",...e,key:t})))})]})}function pe(e){let{items:t,className:n,position:a,onClick:i,...l}=e;const c=function(){const{siteConfig:{baseUrl:e}}=(0,le.A)(),{pathname:t}=(0,s.zy)();return t.replace(e,"/")}(),d=ue(t,c),{collapsed:p,toggleCollapsed:f,setCollapsed:g}=(0,ie.u)({initialState:()=>!d});return(0,r.useEffect)((()=>{d&&g(!d)}),[c,d,g]),(0,u.jsxs)("li",{className:(0,o.A)("menu__list-item",{"menu__list-item--collapsed":p}),children:[(0,u.jsx)(ne,{role:"button",className:(0,o.A)(ce,"menu__link menu__link--sublist menu__link--sublist-caret",n),...l,onClick:e=>{e.preventDefault(),f()},children:l.children??l.label}),(0,u.jsx)(ie.N,{lazy:!0,as:"ul",className:"menu__list",collapsed:p,children:t.map(((e,t)=>(0,r.createElement)(ut,{mobile:!0,isDropdownItem:!0,onClick:i,activeClassName:"menu__link--active",...e,key:t})))})]})}function fe(e){let{mobile:t=!1,...n}=e;const r=t?pe:de;return(0,u.jsx)(r,{...n})}var ge=n(2131);function me(e){let{width:t=20,height:n=20,...r}=e;return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:t,height:n,"aria-hidden":!0,...r,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"})})}const he="iconLanguage_nlXk";var ye=n(4070),be=n(9153),ve=n(9913),we=n(4471),ke=n(7674),xe=n(6841),Se=n(3810),_e=n(4081);const Ee="searchBar_RVTs",Ce="dropdownMenu_qbY6",Ae="searchBarLeft_MXDe",Te="suggestion_fB_2",je="cursor_eG29",Re="hitTree_kk6K",Pe="hitIcon_a7Zy",Le="hitPath_ieM4",Ne="noResultsIcon_EBY5",Oe="hitFooter_E9YW",De="hitWrapper_sAK8",Ie="hitTitle_vyVt",Me="hitAction_NqkB",Fe="noResults_l6Q3",ze="searchBarContainer_NW3z",Be="searchBarLoadingRing_YnHq",$e="searchClearButton_qk4g",Ue="searchIndexLoading_EJ1f",qe="searchHintContainer_Pkmr",Ge="searchHint_iIMx",He="focused_OWtg",Ve="input_FOTf",We="hint_URu1",Ke="suggestions_X8XU",Qe="dataset_QiCy",Ye="empty_eITn";function Ze(e){let{document:t,type:n,page:r,metadata:o,tokens:a,isInterOfTree:i,isLastOfTree:s}=e;const l=n===ve.i.Title,c=n===ve.i.Keywords,u=l||c,d=n===ve.i.Heading,p=[];i?p.push('<svg viewBox="0 0 24 54"><g stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6v42M20 27H8.3"></path></g></svg>'):s&&p.push('<svg viewBox="0 0 24 54"><g stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6v21M20 27H8.3"></path></g></svg>');const f=p.map((e=>`<span class="${Re}">${e}</span>`)),g=`<span class="${Pe}">${u?'<svg width="20" height="20" viewBox="0 0 20 20"><path d="M17 6v12c0 .52-.2 1-1 1H4c-.7 0-1-.33-1-1V2c0-.55.42-1 1-1h8l5 5zM14 8h-3.13c-.51 0-.87-.34-.87-.87V4" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linejoin="round"></path></svg>':d?'<svg width="20" height="20" viewBox="0 0 20 20"><path d="M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg>':'<svg width="20" height="20" viewBox="0 0 20 20"><path d="M17 5H3h14zm0 5H3h14zm0 5H3h14z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linejoin="round"></path></svg>'}</span>`,m=[`<span class="${Ie}">${c?(0,xe.Z)(t.s,a):(0,Se.C)(t.t,(0,ke.g)(o,"t"),a)}</span>`];if(!i&&!s&&_e.tb){const e=r?r.b?.concat(r.t).concat(t.s&&t.s!==r.t?t.s:[]):t.b;m.push(`<span class="${Le}">${(0,we.$)(e??[])}</span>`)}else u||m.push(`<span class="${Le}">${(0,xe.Z)(r.t||(t.u.startsWith("/docs/api-reference/")?"API Reference":""),a)}</span>`);const h=`<span class="${Me}"><svg width="20" height="20" viewBox="0 0 20 20"><g stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M18 3v4c0 2-2 4-4 4H2"></path><path d="M8 17l-6-6 6-6"></path></g></svg></span>`;return[...f,g,`<span class="${De}">`,...m,"</span>",h].join("")}function Xe(){return`<span class="${Fe}"><span class="${Ne}"><svg width="40" height="40" viewBox="0 0 20 20" fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 4.8c2 3 1.7 7-1 9.7h0l4.3 4.3-4.3-4.3a7.8 7.8 0 01-9.8 1m-2.2-2.2A7.8 7.8 0 0113.2 2.4M2 18L18 2"></path></svg></span><span>${(0,l.T)({id:"theme.SearchBar.noResultsText",message:"No results"})}</span></span>`}var Je=n(2849),et=n(3385);async function tt(){const e=await Promise.all([n.e(489),n.e(5741)]).then(n.t.bind(n,489,23)),t=e.default;return t.noConflict?t.noConflict():e.noConflict&&e.noConflict(),t}const nt="_highlight";const rt=function(e){let{handleSearchBarToggle:t}=e;const a=(0,z.A)(),{siteConfig:{baseUrl:i},i18n:{currentLocale:c}}=(0,le.A)(),d=(0,ye.vT)();let p=i;try{const{preferredVersion:e}=function(){return n(4070).g1(...arguments)}(d?.pluginId??_e.UB);e&&!e.isLast&&(p=e.path+"/")}catch(B){if(_e.I$&&!(B instanceof P.dV))throw B}const f=(0,s.W6)(),g=(0,s.zy)(),m=(0,r.useRef)(null),h=(0,r.useRef)(new Map),y=(0,r.useRef)(!1),[b,v]=(0,r.useState)(!1),[w,k]=(0,r.useState)(!1),[x,S]=(0,r.useState)(""),_=(0,r.useRef)(null),E=(0,r.useRef)(""),[C,A]=(0,r.useState)("");(0,r.useEffect)((()=>{if(!Array.isArray(_e.Hg))return;let e="";if(g.pathname.startsWith(p)){const t=g.pathname.substring(p.length);let n;for(const e of _e.Hg){const r="string"==typeof e?e:e.path;if(t===r||t.startsWith(`${r}/`)){n=r;break}}n&&(e=n)}E.current!==e&&(h.current.delete(e),E.current=e),A(e)}),[g.pathname,p]);const T=!!_e.O6&&Array.isArray(_e.Hg)&&""===C,j=(0,r.useCallback)((async()=>{if(T||h.current.get(C))return;h.current.set(C,"loading"),_.current?.autocomplete.destroy(),v(!0);const[e]=await Promise.all([tt(),(0,be.k)(p,C)]);if(_.current=e(m.current,{hint:!1,autoselect:!0,openOnFocus:!0,cssClasses:{root:(0,o.A)(Ee,{[Ae]:"left"===_e.ZG}),noPrefix:!0,dropdownMenu:Ce,input:Ve,hint:We,suggestions:Ke,suggestion:Te,cursor:je,dataset:Qe,empty:Ye}},[{source:async(e,t)=>{t(await(0,be.w)(p,C,e))},templates:{suggestion:Ze,empty:Xe,footer:e=>{let{query:t,isEmpty:n}=e;if(n&&(!C||!_e.dz))return;const r=(e=>{let{query:t,isEmpty:n}=e;const r=document.createElement("a"),o=new URLSearchParams;let a;if(o.set("q",t),C){const e=C&&Array.isArray(_e.Hg)?_e.Hg.find((e=>"string"==typeof e?e===C:e.path===C)):C,t=e?(0,et.p)(e,c).label:C;a=_e.dz&&n?(0,l.T)({id:"theme.SearchBar.seeAllOutsideContext",message:'See all results outside "{context}"'},{context:t}):(0,l.T)({id:"theme.SearchBar.searchInContext",message:'See all results within "{context}"'},{context:t})}else a=(0,l.T)({id:"theme.SearchBar.seeAll",message:"See all results"});if(!C||!Array.isArray(_e.Hg)||_e.dz&&n||o.set("ctx",C),p!==i){if(!p.startsWith(i))throw new Error(`Version url '${p}' does not start with base url '${i}', this is a bug of \`@easyops-cn/docusaurus-search-local\`, please report it.`);o.set("version",p.substring(i.length))}const s=`${i}search/?${o.toString()}`;return r.href=s,r.textContent=a,r.addEventListener("click",(e=>{e.ctrlKey||e.metaKey||(e.preventDefault(),_.current?.autocomplete.close(),f.push(s))})),r})({query:t,isEmpty:n}),o=document.createElement("div");return o.className=Oe,o.appendChild(r),o}}}]).on("autocomplete:selected",(function(e,t){let{document:{u:n,h:r},tokens:o}=t;m.current?.blur();let a=n;if(_e.CU&&o.length>0){const e=new URLSearchParams;for(const t of o)e.append(nt,t);a+=`?${e.toString()}`}r&&(a+=r),f.push(a)})).on("autocomplete:closed",(()=>{m.current?.blur()})),h.current.set(C,"done"),v(!1),y.current){const e=m.current;e.value&&_.current?.autocomplete.open(),e.focus()}}),[T,C,p,i,f]);(0,r.useEffect)((()=>{if(!_e.CU)return;const e=a?new URLSearchParams(g.search).getAll(nt):[];setTimeout((()=>{const t=document.querySelector("article");if(!t)return;const n=new _e.CU(t);n.unmark(),0!==e.length&&n.mark(e),S(e.join(" ")),_.current?.autocomplete.setVal(e.join(" "))}))}),[a,g.search,g.pathname]);const[R,L]=(0,r.useState)(!1),N=(0,r.useCallback)((()=>{y.current=!0,j(),L(!0),t?.(!0)}),[t,j]),O=(0,r.useCallback)((()=>{L(!1),t?.(!1)}),[t]),D=(0,r.useCallback)((()=>{j()}),[j]),I=(0,r.useCallback)((e=>{S(e.target.value),e.target.value&&k(!0)}),[]),M=!!a&&/mac/i.test(navigator.userAgentData?.platform??navigator.platform);(0,r.useEffect)((()=>{if(!_e.WW)return;const e=e=>{!(M?e.metaKey:e.ctrlKey)||"k"!==e.key&&"K"!==e.key||(e.preventDefault(),m.current?.focus(),N())};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}}),[M,N]);const F=(0,r.useCallback)((()=>{const e=new URLSearchParams(g.search);e.delete(nt);const t=e.toString(),n=g.pathname+(""!=t?`?${t}`:"")+g.hash;n!=g.pathname+g.search+g.hash&&f.push(n),S(""),_.current?.autocomplete.setVal("")}),[g.pathname,g.search,g.hash,f]);return(0,u.jsxs)("div",{className:(0,o.A)("navbar__search",ze,{[Ue]:b&&w,[He]:R}),hidden:T,dir:"ltr",children:[(0,u.jsx)("input",{placeholder:(0,l.T)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"}),"aria-label":"Search",className:"navbar__search-input",onMouseEnter:D,onFocus:N,onBlur:O,onChange:I,ref:m,value:x}),(0,u.jsx)(Je.A,{className:Be}),_e.WW&&_e.pk&&(""!==x?(0,u.jsx)("button",{className:$e,onClick:F,children:"\u2715"}):a&&(0,u.jsxs)("div",{className:qe,children:[(0,u.jsx)("kbd",{className:Ge,children:M?"\u2318":"ctrl"}),(0,u.jsx)("kbd",{className:Ge,children:"K"})]}))]})},ot={navbarSearchContainer:"navbarSearchContainer_Bca1"};function at(e){let{children:t,className:n}=e;return(0,u.jsx)("div",{className:(0,o.A)(n,ot.navbarSearchContainer),children:t})}var it=n(6972);var st=n(3886);function lt(e,t){return t.alternateDocVersions[e.name]??function(e){return e.docs.find((t=>t.id===e.mainDocId))}(e)}const ct={default:ae,localeDropdown:function(e){let{mobile:t,dropdownItemsBefore:n,dropdownItemsAfter:r,queryString:o="",...a}=e;const{i18n:{currentLocale:i,locales:c,localeConfigs:d}}=(0,le.A)(),p=(0,ge.o)(),{search:f,hash:g}=(0,s.zy)(),m=[...n,...c.map((e=>{const n=`${`pathname://${p.createUrl({locale:e,fullyQualified:!1})}`}${f}${g}${o}`;return{label:d[e].label,lang:d[e].htmlLang,to:n,target:"_self",autoAddBaseUrl:!1,className:e===i?t?"menu__link--active":"dropdown__link--active":""}})),...r],h=t?(0,l.T)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):d[i].label;return(0,u.jsx)(fe,{...a,mobile:t,label:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(me,{className:he}),h]}),items:m})},search:function(e){let{mobile:t,className:n}=e;return t?null:(0,u.jsx)(at,{className:n,children:(0,u.jsx)(rt,{})})},dropdown:fe,html:function(e){let{value:t,className:n,mobile:r=!1,isDropdownItem:a=!1}=e;const i=a?"li":"div";return(0,u.jsx)(i,{className:(0,o.A)({navbar__item:!r&&!a,"menu__list-item":r},n),dangerouslySetInnerHTML:{__html:t}})},doc:function(e){let{docId:t,label:n,docsPluginId:r,...o}=e;const{activeDoc:a}=(0,ye.zK)(r),i=(0,it.QB)(t,r),s=a?.path===i?.path;return null===i||i.unlisted&&!s?null:(0,u.jsx)(ae,{exact:!0,...o,isActive:()=>s||!!a?.sidebar&&a.sidebar===i.sidebar,label:n??i.id,to:i.path})},docSidebar:function(e){let{sidebarId:t,label:n,docsPluginId:r,...o}=e;const{activeDoc:a}=(0,ye.zK)(r),i=(0,it.fW)(t,r).link;if(!i)throw new Error(`DocSidebarNavbarItem: Sidebar with ID "${t}" doesn't have anything to be linked to.`);return(0,u.jsx)(ae,{exact:!0,...o,isActive:()=>a?.sidebar===t,label:n??i.label,to:i.path})},docsVersion:function(e){let{label:t,to:n,docsPluginId:r,...o}=e;const a=(0,it.Vd)(r)[0],i=t??a.label,s=n??(e=>e.docs.find((t=>t.id===e.mainDocId)))(a).path;return(0,u.jsx)(ae,{...o,label:i,to:s})},docsVersionDropdown:function(e){let{mobile:t,docsPluginId:n,dropdownActiveClassDisabled:r,dropdownItemsBefore:o,dropdownItemsAfter:a,...i}=e;const{search:c,hash:d}=(0,s.zy)(),p=(0,ye.zK)(n),f=(0,ye.jh)(n),{savePreferredVersionName:g}=(0,st.g1)(n),m=[...o,...f.map((function(e){const t=lt(e,p);return{label:e.label,to:`${t.path}${c}${d}`,isActive:()=>e===p.activeVersion,onClick:()=>g(e.name)}})),...a],h=(0,it.Vd)(n)[0],y=t&&m.length>1?(0,l.T)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):h.label,b=t&&m.length>1?void 0:lt(h,p).path;return m.length<=1?(0,u.jsx)(ae,{...i,mobile:t,label:y,to:b,isActive:r?()=>!1:void 0}):(0,u.jsx)(fe,{...i,mobile:t,label:y,to:b,items:m,isActive:r?()=>!1:void 0})}};function ut(e){let{type:t,...n}=e;const r=function(e,t){return e&&"default"!==e?e:"items"in t?"dropdown":"default"}(t,n),o=ct[r];if(!o)throw new Error(`No NavbarItem component found for type "${t}".`);return(0,u.jsx)(o,{...n})}function dt(){const e=(0,j.M)(),t=(0,w.p)().navbar.items;return(0,u.jsx)("ul",{className:"menu__list",children:t.map(((t,n)=>(0,r.createElement)(ut,{mobile:!0,...t,onClick:()=>e.toggle(),key:n})))})}function pt(e){return(0,u.jsx)("button",{...e,type:"button",className:"clean-btn navbar-sidebar__back",children:(0,u.jsx)(l.A,{id:"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel",description:"The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)",children:"\u2190 Back to main menu"})})}function ft(){const e=0===(0,w.p)().navbar.items.length,t=I();return(0,u.jsxs)(u.Fragment,{children:[!e&&(0,u.jsx)(pt,{onClick:()=>t.hide()}),t.content]})}function gt(){const e=(0,j.M)();var t;return void 0===(t=e.shown)&&(t=!0),(0,r.useEffect)((()=>(document.body.style.overflow=t?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[t]),e.shouldRender?(0,u.jsx)(M,{header:(0,u.jsx)(Y,{}),primaryMenu:(0,u.jsx)(dt,{}),secondaryMenu:(0,u.jsx)(ft,{})}):null}const mt={navbarHideable:"navbarHideable_m1mJ",navbarHidden:"navbarHidden_jGov"};function ht(e){return(0,u.jsx)("div",{role:"presentation",...e,className:(0,o.A)("navbar-sidebar__backdrop",e.className)})}function yt(e){let{children:t}=e;const{navbar:{hideOnScroll:n,style:a}}=(0,w.p)(),i=(0,j.M)(),{navbarRef:s,isNavbarVisible:d}=function(e){const[t,n]=(0,r.useState)(e),o=(0,r.useRef)(!1),a=(0,r.useRef)(0),i=(0,r.useCallback)((e=>{null!==e&&(a.current=e.getBoundingClientRect().height)}),[]);return(0,R.Mq)(((t,r)=>{let{scrollY:i}=t;if(!e)return;if(i<a.current)return void n(!0);if(o.current)return void(o.current=!1);const s=r?.scrollY,l=document.documentElement.scrollHeight-a.current,c=window.innerHeight;s&&i>=s?n(!1):i+c<l&&n(!0)})),(0,c.$)((t=>{if(!e)return;const r=t.location.hash;if(r?document.getElementById(r.substring(1)):void 0)return o.current=!0,void n(!1);n(!0)})),{navbarRef:i,isNavbarVisible:t}}(n);return(0,u.jsxs)("nav",{ref:s,"aria-label":(0,l.T)({id:"theme.NavBar.navAriaLabel",message:"Main",description:"The ARIA label for the main navigation"}),className:(0,o.A)("navbar","navbar--fixed-top",n&&[mt.navbarHideable,!d&&mt.navbarHidden],{"navbar--dark":"dark"===a,"navbar--primary":"primary"===a,"navbar-sidebar--show":i.shown}),children:[t,(0,u.jsx)(ht,{onClick:i.toggle}),(0,u.jsx)(gt,{})]})}var bt=n(440);const vt={errorBoundaryError:"errorBoundaryError_a6uf",errorBoundaryFallback:"errorBoundaryFallback_VBag"};function wt(e){return(0,u.jsx)("button",{type:"button",...e,children:(0,u.jsx)(l.A,{id:"theme.ErrorPageContent.tryAgain",description:"The label of the button to try again rendering when the React error boundary captures an error",children:"Try again"})})}function kt(e){let{error:t}=e;const n=(0,bt.rA)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,u.jsx)("p",{className:vt.errorBoundaryError,children:n})}class xt extends r.Component{componentDidCatch(e,t){throw this.props.onError(e,t)}render(){return this.props.children}}const St="right";function _t(e){let{width:t=30,height:n=30,className:r,...o}=e;return(0,u.jsx)("svg",{className:r,width:t,height:n,viewBox:"0 0 30 30","aria-hidden":"true",...o,children:(0,u.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"})})}function Et(){const{toggle:e,shown:t}=(0,j.M)();return(0,u.jsx)("button",{onClick:e,"aria-label":(0,l.T)({id:"theme.docs.sidebar.toggleSidebarButtonAriaLabel",message:"Toggle navigation bar",description:"The ARIA label for hamburger menu button of mobile navigation"}),"aria-expanded":t,className:"navbar__toggle clean-btn",type:"button",children:(0,u.jsx)(_t,{})})}const Ct={colorModeToggle:"colorModeToggle_DEke"};function At(e){let{items:t}=e;return(0,u.jsx)(u.Fragment,{children:t.map(((e,t)=>(0,u.jsx)(xt,{onError:t=>new Error(`A theme navbar item failed to render.\nPlease double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:\n${JSON.stringify(e,null,2)}`,{cause:t}),children:(0,u.jsx)(ut,{...e})},t)))})}function Tt(e){let{left:t,right:n}=e;return(0,u.jsxs)("div",{className:"navbar__inner",children:[(0,u.jsx)("div",{className:"navbar__items",children:t}),(0,u.jsx)("div",{className:"navbar__items navbar__items--right",children:n})]})}function jt(){const e=(0,j.M)(),t=(0,w.p)().navbar.items,[n,r]=function(e){function t(e){return"left"===(e.position??St)}return[e.filter(t),e.filter((e=>!t(e)))]}(t),o=t.find((e=>"search"===e.type));return(0,u.jsx)(Tt,{left:(0,u.jsxs)(u.Fragment,{children:[!e.disabled&&(0,u.jsx)(Et,{}),(0,u.jsx)(K,{}),(0,u.jsx)(At,{items:n})]}),right:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(At,{items:r}),(0,u.jsx)(V,{className:Ct.colorModeToggle}),!o&&(0,u.jsx)(at,{children:(0,u.jsx)(rt,{})})]})})}function Rt(){return(0,u.jsx)(yt,{children:(0,u.jsx)(jt,{})})}function Pt(e){let{item:t}=e;const{to:n,href:r,label:a,prependBaseUrlToHref:i,className:s,...l}=t,c=(0,X.Ay)(n),d=(0,X.Ay)(r,{forcePrependBaseUrl:!0});return(0,u.jsxs)(Z.A,{className:(0,o.A)("footer__link-item",s),...r?{href:i?d:r}:{to:c},...l,children:[a,r&&!(0,J.A)(r)&&(0,u.jsx)(te.A,{})]})}function Lt(e){let{item:t}=e;return t.html?(0,u.jsx)("li",{className:(0,o.A)("footer__item",t.className),dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)("li",{className:"footer__item",children:(0,u.jsx)(Pt,{item:t})},t.href??t.to)}function Nt(e){let{column:t}=e;return(0,u.jsxs)("div",{className:(0,o.A)("col footer__col",t.className),children:[(0,u.jsx)("div",{className:"footer__title",children:t.title}),(0,u.jsx)("ul",{className:"footer__items clean-list",children:t.items.map(((e,t)=>(0,u.jsx)(Lt,{item:e},t)))})]})}function Ot(e){let{columns:t}=e;return(0,u.jsx)("div",{className:"row footer__links",children:t.map(((e,t)=>(0,u.jsx)(Nt,{column:e},t)))})}function Dt(){return(0,u.jsx)("span",{className:"footer__link-separator",children:"\xb7"})}function It(e){let{item:t}=e;return t.html?(0,u.jsx)("span",{className:(0,o.A)("footer__link-item",t.className),dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)(Pt,{item:t})}function Mt(e){let{links:t}=e;return(0,u.jsx)("div",{className:"footer__links text--center",children:(0,u.jsx)("div",{className:"footer__links",children:t.map(((e,n)=>(0,u.jsxs)(r.Fragment,{children:[(0,u.jsx)(It,{item:e}),t.length!==n+1&&(0,u.jsx)(Dt,{})]},n)))})})}function Ft(e){let{links:t}=e;return function(e){return"title"in e[0]}(t)?(0,u.jsx)(Ot,{columns:t}):(0,u.jsx)(Mt,{links:t})}var zt=n(1122);const Bt="footerLogoLink_BH7S";function $t(e){let{logo:t}=e;const{withBaseUrl:n}=(0,X.hH)(),r={light:n(t.src),dark:n(t.srcDark??t.src)};return(0,u.jsx)(zt.A,{className:(0,o.A)("footer__logo",t.className),alt:t.alt,sources:r,width:t.width,height:t.height,style:t.style})}function Ut(e){let{logo:t}=e;return t.href?(0,u.jsx)(Z.A,{href:t.href,className:Bt,target:t.target,children:(0,u.jsx)($t,{logo:t})}):(0,u.jsx)($t,{logo:t})}function qt(e){let{copyright:t}=e;return(0,u.jsx)("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}})}function Gt(e){let{style:t,links:n,logo:r,copyright:a}=e;return(0,u.jsx)("footer",{className:(0,o.A)("footer",{"footer--dark":"dark"===t}),children:(0,u.jsxs)("div",{className:"container container-fluid",children:[n,(r||a)&&(0,u.jsxs)("div",{className:"footer__bottom text--center",children:[r&&(0,u.jsx)("div",{className:"margin-bottom--sm",children:r}),a]})]})})}function Ht(){const{footer:e}=(0,w.p)();if(!e)return null;const{copyright:t,links:n,logo:r,style:o}=e;return(0,u.jsx)(Gt,{style:o,links:n&&n.length>0&&(0,u.jsx)(Ft,{links:n}),logo:r&&(0,u.jsx)(Ut,{logo:r}),copyright:t&&(0,u.jsx)(qt,{copyright:t})})}const Vt=r.memo(Ht),Wt=(0,P.fM)([F.a,k.o,R.Tv,st.VQ,i.Jx,function(e){let{children:t}=e;return(0,u.jsx)(L.y_,{children:(0,u.jsx)(j.e,{children:(0,u.jsx)(O,{children:t})})})}]);function Kt(e){let{children:t}=e;return(0,u.jsx)(Wt,{children:t})}var Qt=n(1107);function Yt(e){let{error:t,tryAgain:n}=e;return(0,u.jsx)("main",{className:"container margin-vert--xl",children:(0,u.jsx)("div",{className:"row",children:(0,u.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,u.jsx)(Qt.A,{as:"h1",className:"hero__title",children:(0,u.jsx)(l.A,{id:"theme.ErrorPageContent.title",description:"The title of the fallback page when the page crashed",children:"This page crashed."})}),(0,u.jsx)("div",{className:"margin-vert--lg",children:(0,u.jsx)(wt,{onClick:n,className:"button button--primary shadow--lw"})}),(0,u.jsx)("hr",{}),(0,u.jsx)("div",{className:"margin-vert--md",children:(0,u.jsx)(kt,{error:t})})]})})})}const Zt={mainWrapper:"mainWrapper_z2l0"};function Xt(e){const{children:t,noFooter:n,wrapperClassName:r,title:s,description:l}=e;return(0,y.J)(),(0,u.jsxs)(Kt,{children:[(0,u.jsx)(i.be,{title:s,description:l}),(0,u.jsx)(v,{}),(0,u.jsx)(T,{}),(0,u.jsx)(Rt,{}),(0,u.jsx)("div",{id:d,className:(0,o.A)(h.G.wrapper.main,Zt.mainWrapper,r),children:(0,u.jsx)(a.A,{fallback:e=>(0,u.jsx)(Yt,{...e}),children:t})}),!n&&(0,u.jsx)(Vt,{})]})}},3465:(e,t,n)=>{"use strict";n.d(t,{A:()=>u});n(6540);var r=n(8774),o=n(6025),a=n(4586),i=n(6342),s=n(1122),l=n(4848);function c(e){let{logo:t,alt:n,imageClassName:r}=e;const a={light:(0,o.Ay)(t.src),dark:(0,o.Ay)(t.srcDark||t.src)},i=(0,l.jsx)(s.A,{className:t.className,sources:a,height:t.height,width:t.width,alt:n,style:t.style});return r?(0,l.jsx)("div",{className:r,children:i}):i}function u(e){const{siteConfig:{title:t}}=(0,a.A)(),{navbar:{title:n,logo:s}}=(0,i.p)(),{imageClassName:u,titleClassName:d,...p}=e,f=(0,o.Ay)(s?.href||"/"),g=n?"":t,m=s?.alt??g;return(0,l.jsxs)(r.A,{to:f,...p,...s?.target&&{target:s.target},children:[s&&(0,l.jsx)(c,{logo:s,alt:m,imageClassName:u}),null!=n&&(0,l.jsx)("b",{className:d,children:n})]})}},1463:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});n(6540);var r=n(5260),o=n(4848);function a(e){let{locale:t,version:n,tag:a}=e;const i=t;return(0,o.jsxs)(r.A,{children:[t&&(0,o.jsx)("meta",{name:"docusaurus_locale",content:t}),n&&(0,o.jsx)("meta",{name:"docusaurus_version",content:n}),a&&(0,o.jsx)("meta",{name:"docusaurus_tag",content:a}),i&&(0,o.jsx)("meta",{name:"docsearch:language",content:i}),n&&(0,o.jsx)("meta",{name:"docsearch:version",content:n}),a&&(0,o.jsx)("meta",{name:"docsearch:docusaurus_tag",content:a})]})}},1122:(e,t,n)=>{"use strict";n.d(t,{A:()=>u});var r=n(6540),o=n(4164),a=n(2303),i=n(5293);const s={themedComponent:"themedComponent_mlkZ","themedComponent--light":"themedComponent--light_NVdE","themedComponent--dark":"themedComponent--dark_xIcU"};var l=n(4848);function c(e){let{className:t,children:n}=e;const c=(0,a.A)(),{colorMode:u}=(0,i.G)();return(0,l.jsx)(l.Fragment,{children:(c?"dark"===u?["dark"]:["light"]:["light","dark"]).map((e=>{const a=n({theme:e,className:(0,o.A)(t,s.themedComponent,s[`themedComponent--${e}`])});return(0,l.jsx)(r.Fragment,{children:a},e)}))})}function u(e){const{sources:t,className:n,alt:r,...o}=e;return(0,l.jsx)(c,{className:n,children:e=>{let{theme:n,className:a}=e;return(0,l.jsx)("img",{src:t[n],alt:r,className:a,...o})}})}},1422:(e,t,n)=>{"use strict";n.d(t,{N:()=>y,u:()=>c});var r=n(6540),o=n(2303),a=n(205),i=n(3109),s=n(4848);const l="ease-in-out";function c(e){let{initialState:t}=e;const[n,o]=(0,r.useState)(t??!1),a=(0,r.useCallback)((()=>{o((e=>!e))}),[]);return{collapsed:n,setCollapsed:o,toggleCollapsed:a}}const u={display:"none",overflow:"hidden",height:"0px"},d={display:"block",overflow:"visible",height:"auto"};function p(e,t){const n=t?u:d;e.style.display=n.display,e.style.overflow=n.overflow,e.style.height=n.height}function f(e){let{collapsibleRef:t,collapsed:n,animation:o}=e;const a=(0,r.useRef)(!1);(0,r.useEffect)((()=>{const e=t.current;function r(){const t=e.scrollHeight,n=o?.duration??function(e){if((0,i.O)())return 1;const t=e/36;return Math.round(10*(4+15*t**.25+t/5))}(t);return{transition:`height ${n}ms ${o?.easing??l}`,height:`${t}px`}}function s(){const t=r();e.style.transition=t.transition,e.style.height=t.height}if(!a.current)return p(e,n),void(a.current=!0);return e.style.willChange="height",function(){const t=requestAnimationFrame((()=>{n?(s(),requestAnimationFrame((()=>{e.style.height=u.height,e.style.overflow=u.overflow}))):(e.style.display="block",requestAnimationFrame((()=>{s()})))}));return()=>cancelAnimationFrame(t)}()}),[t,n,o])}function g(e){let{collapsed:t,isBrowser:n}=e;if(!n)return t?u:d}function m(e){let{as:t="div",collapsed:n,children:a,animation:i,onCollapseTransitionEnd:l,className:c,disableSSRStyle:u}=e;const d=(0,o.A)(),m=(0,r.useRef)(null);return f({collapsibleRef:m,collapsed:n,animation:i}),(0,s.jsx)(t,{ref:m,style:u?void 0:g({collapsed:n,isBrowser:d}),onTransitionEnd:e=>{"height"===e.propertyName&&(p(m.current,n),l?.(n))},className:c,children:a})}function h(e){let{collapsed:t,...n}=e;const[o,i]=(0,r.useState)(!t),[l,c]=(0,r.useState)(t);return(0,a.A)((()=>{t||i(!0)}),[t]),(0,a.A)((()=>{o&&c(t)}),[o,t]),o?(0,s.jsx)(m,{...n,collapsed:l}):null}function y(e){let{lazy:t,...n}=e;const r=t?h:m;return(0,s.jsx)(r,{...n})}},5041:(e,t,n)=>{"use strict";n.d(t,{M:()=>m,o:()=>g});var r=n(6540),o=n(2303),a=n(679),i=n(9532),s=n(6342),l=n(4848);const c=(0,a.Wf)("docusaurus.announcement.dismiss"),u=(0,a.Wf)("docusaurus.announcement.id"),d=()=>"true"===c.get(),p=e=>c.set(String(e)),f=r.createContext(null);function g(e){let{children:t}=e;const n=function(){const{announcementBar:e}=(0,s.p)(),t=(0,o.A)(),[n,a]=(0,r.useState)((()=>!!t&&d()));(0,r.useEffect)((()=>{a(d())}),[]);const i=(0,r.useCallback)((()=>{p(!0),a(!0)}),[]);return(0,r.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=u.get();"annoucement-bar"===n&&(n="announcement-bar");const r=t!==n;u.set(t),r&&p(!1),!r&&d()||a(!1)}),[e]),(0,r.useMemo)((()=>({isActive:!!e&&!n,close:i})),[e,n,i])}();return(0,l.jsx)(f.Provider,{value:n,children:t})}function m(){const e=(0,r.useContext)(f);if(!e)throw new i.dV("AnnouncementBarProvider");return e}},5293:(e,t,n)=>{"use strict";n.d(t,{G:()=>y,a:()=>h});var r=n(6540),o=n(8193),a=n(9532),i=n(679),s=n(6342),l=n(4848);const c=r.createContext(void 0),u="theme",d=(0,i.Wf)(u),p={light:"light",dark:"dark"},f=e=>e===p.dark?p.dark:p.light,g=e=>o.A.canUseDOM?f(document.documentElement.getAttribute("data-theme")):f(e),m=e=>{d.set(f(e))};function h(e){let{children:t}=e;const n=function(){const{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:n}}=(0,s.p)(),[o,a]=(0,r.useState)(g(e));(0,r.useEffect)((()=>{t&&d.del()}),[t]);const i=(0,r.useCallback)((function(t,r){void 0===r&&(r={});const{persist:o=!0}=r;t?(a(t),o&&m(t)):(a(n?window.matchMedia("(prefers-color-scheme: dark)").matches?p.dark:p.light:e),d.del())}),[n,e]);(0,r.useEffect)((()=>{document.documentElement.setAttribute("data-theme",f(o))}),[o]),(0,r.useEffect)((()=>{if(t)return;const e=e=>{if(e.key!==u)return;const t=d.get();null!==t&&i(f(t))};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)}),[t,i]);const l=(0,r.useRef)(!1);return(0,r.useEffect)((()=>{if(t&&!n)return;const e=window.matchMedia("(prefers-color-scheme: dark)"),r=()=>{window.matchMedia("print").matches||l.current?l.current=window.matchMedia("print").matches:i(null)};return e.addListener(r),()=>e.removeListener(r)}),[i,t,n]),(0,r.useMemo)((()=>({colorMode:o,setColorMode:i,get isDarkTheme(){return o===p.dark},setLightTheme(){i(p.light)},setDarkTheme(){i(p.dark)}})),[o,i])}();return(0,l.jsx)(c.Provider,{value:n,children:t})}function y(){const e=(0,r.useContext)(c);if(null==e)throw new a.dV("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},2069:(e,t,n)=>{"use strict";n.d(t,{M:()=>f,e:()=>p});var r=n(6540),o=n(5600),a=n(4581),i=n(7485),s=n(6342),l=n(9532),c=n(4848);const u=r.createContext(void 0);function d(){const e=function(){const e=(0,o.YL)(),{items:t}=(0,s.p)().navbar;return 0===t.length&&!e.component}(),t=(0,a.l)(),n=!e&&"mobile"===t,[l,c]=(0,r.useState)(!1);(0,i.$Z)((()=>{if(l)return c(!1),!1}));const u=(0,r.useCallback)((()=>{c((e=>!e))}),[]);return(0,r.useEffect)((()=>{"desktop"===t&&c(!1)}),[t]),(0,r.useMemo)((()=>({disabled:e,shouldRender:n,toggle:u,shown:l})),[e,n,u,l])}function p(e){let{children:t}=e;const n=d();return(0,c.jsx)(u.Provider,{value:n,children:t})}function f(){const e=r.useContext(u);if(void 0===e)throw new l.dV("NavbarMobileSidebarProvider");return e}},5600:(e,t,n)=>{"use strict";n.d(t,{GX:()=>c,YL:()=>l,y_:()=>s});var r=n(6540),o=n(9532),a=n(4848);const i=r.createContext(null);function s(e){let{children:t}=e;const n=(0,r.useState)({component:null,props:null});return(0,a.jsx)(i.Provider,{value:n,children:t})}function l(){const e=(0,r.useContext)(i);if(!e)throw new o.dV("NavbarSecondaryMenuContentProvider");return e[0]}function c(e){let{component:t,props:n}=e;const a=(0,r.useContext)(i);if(!a)throw new o.dV("NavbarSecondaryMenuContentProvider");const[,s]=a,l=(0,o.Be)(n);return(0,r.useEffect)((()=>{s({component:t,props:l})}),[s,t,l]),(0,r.useEffect)((()=>()=>s({component:null,props:null})),[s]),null}},4090:(e,t,n)=>{"use strict";n.d(t,{w:()=>o,J:()=>a});var r=n(6540);const o="navigation-with-keyboard";function a(){(0,r.useEffect)((()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(o),"mousedown"===e.type&&document.body.classList.remove(o)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(o),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},4581:(e,t,n)=>{"use strict";n.d(t,{l:()=>s});var r=n(6540),o=n(8193);const a={desktop:"desktop",mobile:"mobile",ssr:"ssr"},i=996;function s(e){let{desktopBreakpoint:t=i}=void 0===e?{}:e;const[n,s]=(0,r.useState)((()=>"ssr"));return(0,r.useEffect)((()=>{function e(){s(function(e){if(!o.A.canUseDOM)throw new Error("getWindowSize() should only be called after React hydration");return window.innerWidth>e?a.desktop:a.mobile}(t))}return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[t]),n}},7559:(e,t,n)=>{"use strict";n.d(t,{G:()=>r});const r={page:{blogListPage:"blog-list-page",blogPostPage:"blog-post-page",blogTagsListPage:"blog-tags-list-page",blogTagPostListPage:"blog-tags-post-list-page",blogAuthorsListPage:"blog-authors-list-page",blogAuthorsPostsPage:"blog-authors-posts-page",docsDocPage:"docs-doc-page",docsTagsListPage:"docs-tags-list-page",docsTagDocListPage:"docs-tags-doc-list-page",mdxPage:"mdx-page"},wrapper:{main:"main-wrapper",blogPages:"blog-wrapper",docsPages:"docs-wrapper",mdxPages:"mdx-wrapper"},common:{editThisPage:"theme-edit-this-page",lastUpdated:"theme-last-updated",backToTopButton:"theme-back-to-top-button",codeBlock:"theme-code-block",admonition:"theme-admonition",unlistedBanner:"theme-unlisted-banner",draftBanner:"theme-draft-banner",admonitionType:e=>`theme-admonition-${e}`},layout:{},docs:{docVersionBanner:"theme-doc-version-banner",docVersionBadge:"theme-doc-version-badge",docBreadcrumbs:"theme-doc-breadcrumbs",docMarkdown:"theme-doc-markdown",docTocMobile:"theme-doc-toc-mobile",docTocDesktop:"theme-doc-toc-desktop",docFooter:"theme-doc-footer",docFooterTagsRow:"theme-doc-footer-tags-row",docFooterEditMetaRow:"theme-doc-footer-edit-meta-row",docSidebarContainer:"theme-doc-sidebar-container",docSidebarMenu:"theme-doc-sidebar-menu",docSidebarItemCategory:"theme-doc-sidebar-item-category",docSidebarItemLink:"theme-doc-sidebar-item-link",docSidebarItemCategoryLevel:e=>`theme-doc-sidebar-item-category-level-${e}`,docSidebarItemLinkLevel:e=>`theme-doc-sidebar-item-link-level-${e}`},blog:{blogFooterTagsRow:"theme-blog-footer-tags-row",blogFooterEditMetaRow:"theme-blog-footer-edit-meta-row"},pages:{pageFooterEditMetaRow:"theme-pages-footer-edit-meta-row"}}},3109:(e,t,n)=>{"use strict";function r(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}n.d(t,{O:()=>r})},7485:(e,t,n)=>{"use strict";n.d(t,{$Z:()=>i,aZ:()=>l});var r=n(6540),o=n(6347),a=n(9532);function i(e){!function(e){const t=(0,o.W6)(),n=(0,a._q)(e);(0,r.useEffect)((()=>t.block(((e,t)=>n(e,t)))),[t,n])}(((t,n)=>{if("POP"===n)return e(t,n)}))}function s(e){const t=(0,o.W6)();return(0,r.useSyncExternalStore)(t.listen,(()=>e(t)),(()=>e(t)))}function l(e){return s((t=>null===e?null:new URLSearchParams(t.location.search).get(e)))}},1682:(e,t,n)=>{"use strict";function r(e,t){return void 0===t&&(t=(e,t)=>e===t),e.filter(((n,r)=>e.findIndex((e=>t(e,n)))!==r))}function o(e){return Array.from(new Set(e))}function a(e,t){const n={};let r=0;for(const o of e){const e=t(o,r);n[e]??=[],n[e].push(o),r+=1}return n}n.d(t,{$z:()=>a,XI:()=>r,sb:()=>o})},1213:(e,t,n)=>{"use strict";n.d(t,{e3:()=>p,be:()=>u,Jx:()=>f});var r=n(6540),o=n(4164),a=n(5260),i=n(6803),s=n(6025),l=n(4586);var c=n(4848);function u(e){let{title:t,description:n,keywords:r,image:o,children:i}=e;const u=function(e){const{siteConfig:t}=(0,l.A)(),{title:n,titleDelimiter:r}=t;return e?.trim().length?`${e.trim()} ${r} ${n}`:n}(t),{withBaseUrl:d}=(0,s.hH)(),p=o?d(o,{absolute:!0}):void 0;return(0,c.jsxs)(a.A,{children:[t&&(0,c.jsx)("title",{children:u}),t&&(0,c.jsx)("meta",{property:"og:title",content:u}),n&&(0,c.jsx)("meta",{name:"description",content:n}),n&&(0,c.jsx)("meta",{property:"og:description",content:n}),r&&(0,c.jsx)("meta",{name:"keywords",content:Array.isArray(r)?r.join(","):r}),p&&(0,c.jsx)("meta",{property:"og:image",content:p}),p&&(0,c.jsx)("meta",{name:"twitter:image",content:p}),i]})}const d=r.createContext(void 0);function p(e){let{className:t,children:n}=e;const i=r.useContext(d),s=(0,o.A)(i,t);return(0,c.jsxs)(d.Provider,{value:s,children:[(0,c.jsx)(a.A,{children:(0,c.jsx)("html",{className:s})}),n]})}function f(e){let{children:t}=e;const n=(0,i.A)(),r=`plugin-${n.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,"")}`;const a=`plugin-id-${n.plugin.id}`;return(0,c.jsx)(p,{className:(0,o.A)(r,a),children:t})}},9532:(e,t,n)=>{"use strict";n.d(t,{Be:()=>c,ZC:()=>s,_q:()=>i,dV:()=>l,fM:()=>u});var r=n(6540),o=n(205),a=n(4848);function i(e){const t=(0,r.useRef)(e);return(0,o.A)((()=>{t.current=e}),[e]),(0,r.useCallback)((function(){return t.current(...arguments)}),[])}function s(e){const t=(0,r.useRef)();return(0,o.A)((()=>{t.current=e})),t.current}class l extends Error{constructor(e,t){super(),this.name="ReactContextError",this.message=`Hook ${this.stack?.split("\n")[1]?.match(/at (?:\w+\.)?(?<name>\w+)/)?.groups.name??""} is called outside the <${e}>. ${t??""}`}}function c(e){const t=Object.entries(e);return t.sort(((e,t)=>e[0].localeCompare(t[0]))),(0,r.useMemo)((()=>e),t.flat())}function u(e){return t=>{let{children:n}=t;return(0,a.jsx)(a.Fragment,{children:e.reduceRight(((e,t)=>(0,a.jsx)(t,{children:e})),n)})}}},9169:(e,t,n)=>{"use strict";n.d(t,{Dt:()=>s,ys:()=>i});var r=n(6540),o=n(8328),a=n(4586);function i(e,t){const n=e=>(!e||e.endsWith("/")?e:`${e}/`)?.toLowerCase();return n(e)===n(t)}function s(){const{baseUrl:e}=(0,a.A)().siteConfig;return(0,r.useMemo)((()=>function(e){let{baseUrl:t,routes:n}=e;function r(e){return e.path===t&&!0===e.exact}function o(e){return e.path===t&&!e.exact}return function e(t){if(0===t.length)return;return t.find(r)||e(t.filter(o).flatMap((e=>e.routes??[])))}(n)}({routes:o.A,baseUrl:e})),[e])}},3104:(e,t,n)=>{"use strict";n.d(t,{Mq:()=>f,Tv:()=>u,a_:()=>g,gk:()=>m});var r=n(6540),o=n(8193),a=n(2303),i=n(205),s=n(9532),l=n(4848);const c=r.createContext(void 0);function u(e){let{children:t}=e;const n=function(){const e=(0,r.useRef)(!0);return(0,r.useMemo)((()=>({scrollEventsEnabledRef:e,enableScrollEvents:()=>{e.current=!0},disableScrollEvents:()=>{e.current=!1}})),[])}();return(0,l.jsx)(c.Provider,{value:n,children:t})}function d(){const e=(0,r.useContext)(c);if(null==e)throw new s.dV("ScrollControllerProvider");return e}const p=()=>o.A.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function f(e,t){void 0===t&&(t=[]);const{scrollEventsEnabledRef:n}=d(),o=(0,r.useRef)(p()),a=(0,s._q)(e);(0,r.useEffect)((()=>{const e=()=>{if(!n.current)return;const e=p();a(e,o.current),o.current=e},t={passive:!0};return e(),window.addEventListener("scroll",e,t),()=>window.removeEventListener("scroll",e,t)}),[a,n,...t])}function g(){const e=d(),t=function(){const e=(0,r.useRef)({elem:null,top:0}),t=(0,r.useCallback)((t=>{e.current={elem:t,top:t.getBoundingClientRect().top}}),[]),n=(0,r.useCallback)((()=>{const{current:{elem:t,top:n}}=e;if(!t)return{restored:!1};const r=t.getBoundingClientRect().top-n;return r&&window.scrollBy({left:0,top:r}),e.current={elem:null,top:0},{restored:0!==r}}),[]);return(0,r.useMemo)((()=>({save:t,restore:n})),[n,t])}(),n=(0,r.useRef)(void 0),o=(0,r.useCallback)((r=>{t.save(r),e.disableScrollEvents(),n.current=()=>{const{restored:r}=t.restore();if(n.current=void 0,r){const t=()=>{e.enableScrollEvents(),window.removeEventListener("scroll",t)};window.addEventListener("scroll",t)}else e.enableScrollEvents()}}),[e,t]);return(0,i.A)((()=>{queueMicrotask((()=>n.current?.()))})),{blockElementScrollPositionUntilNextRender:o}}function m(){const e=(0,r.useRef)(null),t=(0,a.A)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:n=>{e.current=t?function(e){return window.scrollTo({top:e,behavior:"smooth"}),()=>{}}(n):function(e){let t=null;const n=document.documentElement.scrollTop>e;return function r(){const o=document.documentElement.scrollTop;(n&&o>e||!n&&o<e)&&(t=requestAnimationFrame(r),window.scrollTo(0,Math.floor(.85*(o-e))+e))}(),()=>t&&cancelAnimationFrame(t)}(n)},cancelScroll:()=>e.current?.()}}},679:(e,t,n)=>{"use strict";n.d(t,{Wf:()=>u,Dv:()=>d});var r=n(6540);const o=JSON.parse('{"N":"localStorage","M":""}'),a=o.N;function i(e){let{key:t,oldValue:n,newValue:r,storage:o}=e;if(n===r)return;const a=document.createEvent("StorageEvent");a.initStorageEvent("storage",!1,!1,t,n,r,window.location.href,o),window.dispatchEvent(a)}function s(e){if(void 0===e&&(e=a),"undefined"==typeof window)throw new Error("Browser storage is not available on Node.js/Docusaurus SSR process.");if("none"===e)return null;try{return window[e]}catch(n){return t=n,l||(console.warn("Docusaurus browser storage is not available.\nPossible reasons: running Docusaurus in an iframe, in an incognito browser session, or using too strict browser privacy settings.",t),l=!0),null}var t}let l=!1;const c={get:()=>null,set:()=>{},del:()=>{},listen:()=>()=>{}};function u(e,t){const n=`${e}${o.M}`;if("undefined"==typeof window)return function(e){function t(){throw new Error(`Illegal storage API usage for storage key "${e}".\nDocusaurus storage APIs are not supposed to be called on the server-rendering process.\nPlease only call storage APIs in effects and event handlers.`)}return{get:t,set:t,del:t,listen:t}}(n);const r=s(t?.persistence);return null===r?c:{get:()=>{try{return r.getItem(n)}catch(e){return console.error(`Docusaurus storage error, can't get key=${n}`,e),null}},set:e=>{try{const t=r.getItem(n);r.setItem(n,e),i({key:n,oldValue:t,newValue:e,storage:r})}catch(t){console.error(`Docusaurus storage error, can't set ${n}=${e}`,t)}},del:()=>{try{const e=r.getItem(n);r.removeItem(n),i({key:n,oldValue:e,newValue:null,storage:r})}catch(e){console.error(`Docusaurus storage error, can't delete key=${n}`,e)}},listen:e=>{try{const t=t=>{t.storageArea===r&&t.key===n&&e(t)};return window.addEventListener("storage",t),()=>window.removeEventListener("storage",t)}catch(t){return console.error(`Docusaurus storage error, can't listen for changes of key=${n}`,t),()=>{}}}}}function d(e,t){const n=(0,r.useRef)((()=>null===e?c:u(e,t))).current(),o=(0,r.useCallback)((e=>"undefined"==typeof window?()=>{}:n.listen(e)),[n]);return[(0,r.useSyncExternalStore)(o,(()=>n.get()),(()=>null)),n]}},2131:(e,t,n)=>{"use strict";n.d(t,{o:()=>i});var r=n(4586),o=n(6347),a=n(440);function i(){const{siteConfig:{baseUrl:e,url:t,trailingSlash:n},i18n:{defaultLocale:i,currentLocale:s}}=(0,r.A)(),{pathname:l}=(0,o.zy)(),c=(0,a.Ks)(l,{trailingSlash:n,baseUrl:e}),u=s===i?e:e.replace(`/${s}/`,"/"),d=c.replace(e,"");return{createUrl:function(e){let{locale:n,fullyQualified:r}=e;return`${r?t:""}${function(e){return e===i?`${u}`:`${u}${e}/`}(n)}${d}`}}}},5062:(e,t,n)=>{"use strict";n.d(t,{$:()=>i});var r=n(6540),o=n(6347),a=n(9532);function i(e){const t=(0,o.zy)(),n=(0,a.ZC)(t),i=(0,a._q)(e);(0,r.useEffect)((()=>{n&&t!==n&&i({location:t,previousLocation:n})}),[i,t,n])}},6342:(e,t,n)=>{"use strict";n.d(t,{p:()=>o});var r=n(4586);function o(){return(0,r.A)().siteConfig.themeConfig}},2983:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addTrailingSlash=o,t.default=function(e,t){const{trailingSlash:n,baseUrl:r}=t;if(e.startsWith("#"))return e;if(void 0===n)return e;const[i]=e.split(/[#?]/),s="/"===i||i===r?i:(l=i,c=n,c?o(l):a(l));var l,c;return e.replace(i,s)},t.addLeadingSlash=function(e){return(0,r.addPrefix)(e,"/")},t.removeTrailingSlash=a;const r=n(2566);function o(e){return e.endsWith("/")?e:`${e}/`}function a(e){return(0,r.removeSuffix)(e,"/")}},253:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=function e(t){if(t.cause)return[t,...e(t.cause)];return[t]}},440:(e,t,n)=>{"use strict";t.rA=t.Ks=t.LU=void 0;const r=n(1635);t.LU="__blog-post-container";var o=n(2983);Object.defineProperty(t,"Ks",{enumerable:!0,get:function(){return r.__importDefault(o).default}});var a=n(2566);var i=n(253);Object.defineProperty(t,"rA",{enumerable:!0,get:function(){return i.getErrorCausalChain}})},2566:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addPrefix=function(e,t){return e.startsWith(t)?e:`${t}${e}`},t.removeSuffix=function(e,t){if(""===t)return e;return e.endsWith(t)?e.slice(0,-t.length):e},t.addSuffix=function(e,t){return e.endsWith(t)?e:`${e}${t}`},t.removePrefix=function(e,t){return e.startsWith(t)?e.slice(t.length):e}},2849:(e,t,n)=>{"use strict";n.d(t,{A:()=>i});n(6540);var r=n(4164);const o={loadingRing:"loadingRing_RJI3","loading-ring":"loading-ring_FB5o"};var a=n(4848);function i(e){let{className:t}=e;return(0,a.jsxs)("div",{className:(0,r.A)(o.loadingRing,t),children:[(0,a.jsx)("div",{}),(0,a.jsx)("div",{}),(0,a.jsx)("div",{}),(0,a.jsx)("div",{})]})}},9153:(e,t,n)=>{"use strict";n.d(t,{k:()=>E,w:()=>C});const r=Symbol("Comlink.proxy"),o=Symbol("Comlink.endpoint"),a=Symbol("Comlink.releaseProxy"),i=Symbol("Comlink.finalizer"),s=Symbol("Comlink.thrown"),l=e=>"object"==typeof e&&null!==e||"function"==typeof e,c=new Map([["proxy",{canHandle:e=>l(e)&&e[r],serialize(e){const{port1:t,port2:n}=new MessageChannel;return u(e,t),[n,[n]]},deserialize:e=>(e.start(),p(e))}],["throw",{canHandle:e=>l(e)&&s in e,serialize({value:e}){let t;return t=e instanceof Error?{isError:!0,value:{message:e.message,name:e.name,stack:e.stack}}:{isError:!1,value:e},[t,[]]},deserialize(e){if(e.isError)throw Object.assign(new Error(e.value.message),e.value);throw e.value}}]]);function u(e,t=globalThis,n=["*"]){t.addEventListener("message",(function o(a){if(!a||!a.data)return;if(!function(e,t){for(const n of e){if(t===n||"*"===n)return!0;if(n instanceof RegExp&&n.test(t))return!0}return!1}(n,a.origin))return void console.warn(`Invalid origin '${a.origin}' for comlink proxy`);const{id:l,type:c,path:p}=Object.assign({path:[]},a.data),f=(a.data.argumentList||[]).map(k);let g;try{const t=p.slice(0,-1).reduce(((e,t)=>e[t]),e),n=p.reduce(((e,t)=>e[t]),e);switch(c){case"GET":g=n;break;case"SET":t[p.slice(-1)[0]]=k(a.data.value),g=!0;break;case"APPLY":g=n.apply(t,f);break;case"CONSTRUCT":g=function(e){return Object.assign(e,{[r]:!0})}(new n(...f));break;case"ENDPOINT":{const{port1:t,port2:n}=new MessageChannel;u(e,n),g=function(e,t){return v.set(e,t),e}(t,[t])}break;case"RELEASE":g=void 0;break;default:return}}catch(m){g={value:m,[s]:0}}Promise.resolve(g).catch((e=>({value:e,[s]:0}))).then((n=>{const[r,a]=w(n);t.postMessage(Object.assign(Object.assign({},r),{id:l}),a),"RELEASE"===c&&(t.removeEventListener("message",o),d(t),i in e&&"function"==typeof e[i]&&e[i]())})).catch((e=>{const[n,r]=w({value:new TypeError("Unserializable return value"),[s]:0});t.postMessage(Object.assign(Object.assign({},n),{id:l}),r)}))})),t.start&&t.start()}function d(e){(function(e){return"MessagePort"===e.constructor.name})(e)&&e.close()}function p(e,t){const n=new Map;return e.addEventListener("message",(function(e){const{data:t}=e;if(!t||!t.id)return;const r=n.get(t.id);if(r)try{r(t)}finally{n.delete(t.id)}})),y(e,n,[],t)}function f(e){if(e)throw new Error("Proxy has been released and is not useable")}function g(e){return x(e,new Map,{type:"RELEASE"}).then((()=>{d(e)}))}const m=new WeakMap,h="FinalizationRegistry"in globalThis&&new FinalizationRegistry((e=>{const t=(m.get(e)||0)-1;m.set(e,t),0===t&&g(e)}));function y(e,t,n=[],r=function(){}){let i=!1;const s=new Proxy(r,{get(r,o){if(f(i),o===a)return()=>{!function(e){h&&h.unregister(e)}(s),g(e),t.clear(),i=!0};if("then"===o){if(0===n.length)return{then:()=>s};const r=x(e,t,{type:"GET",path:n.map((e=>e.toString()))}).then(k);return r.then.bind(r)}return y(e,t,[...n,o])},set(r,o,a){f(i);const[s,l]=w(a);return x(e,t,{type:"SET",path:[...n,o].map((e=>e.toString())),value:s},l).then(k)},apply(r,a,s){f(i);const l=n[n.length-1];if(l===o)return x(e,t,{type:"ENDPOINT"}).then(k);if("bind"===l)return y(e,t,n.slice(0,-1));const[c,u]=b(s);return x(e,t,{type:"APPLY",path:n.map((e=>e.toString())),argumentList:c},u).then(k)},construct(r,o){f(i);const[a,s]=b(o);return x(e,t,{type:"CONSTRUCT",path:n.map((e=>e.toString())),argumentList:a},s).then(k)}});return function(e,t){const n=(m.get(t)||0)+1;m.set(t,n),h&&h.register(e,t,e)}(s,e),s}function b(e){const t=e.map(w);return[t.map((e=>e[0])),(n=t.map((e=>e[1])),Array.prototype.concat.apply([],n))];var n}const v=new WeakMap;function w(e){for(const[t,n]of c)if(n.canHandle(e)){const[r,o]=n.serialize(e);return[{type:"HANDLER",name:t,value:r},o]}return[{type:"RAW",value:e},v.get(e)||[]]}function k(e){switch(e.type){case"HANDLER":return c.get(e.name).deserialize(e.value);case"RAW":return e.value}}function x(e,t,n,r){return new Promise((o=>{const a=new Array(4).fill(0).map((()=>Math.floor(Math.random()*Number.MAX_SAFE_INTEGER).toString(16))).join("-");t.set(a,o),e.start&&e.start(),e.postMessage(Object.assign({id:a},n),r)}))}let S;function _(){return S||(S=(async()=>{const e=p(new Worker(new URL(n.p+n.u(4809),n.b)));return await new e})()),S}async function E(e,t){{const n=await _();await n.fetchIndexes(e,t)}}async function C(e,t,n){return(await _()).search(e,t,n)}},4471:(e,t,n)=>{"use strict";function r(e){return e.join(" \u203a ")}n.d(t,{$:()=>r})},3103:(e,t,n)=>{"use strict";function r(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}n.d(t,{Z:()=>r})},7674:(e,t,n)=>{"use strict";function r(e,t){const n=[];for(const r of Object.values(e))r[t]&&n.push(...r[t].position);return n.sort(((e,t)=>e[0]-t[0]||t[1]-e[1]))}n.d(t,{g:()=>r})},6841:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(3103);function o(e,t,n){const a=[];for(const i of t){const n=e.toLowerCase().indexOf(i);if(n>=0){n>0&&a.push(o(e.substr(0,n),t)),a.push(`<mark>${(0,r.Z)(e.substr(n,i.length))}</mark>`);const s=n+i.length;s<e.length&&a.push(o(e.substr(s),t));break}}return 0===a.length?n?`<mark>${(0,r.Z)(e)}</mark>`:(0,r.Z)(e):a.join("")}},3810:(e,t,n)=>{"use strict";n.d(t,{C:()=>l});var r=n(3103),o=n(6841);const a=/\w+|\p{Unified_Ideograph}/u;function i(e){const t=[];let n=0,r=e;for(;r.length>0;){const o=r.match(a);if(!o){t.push(r);break}o.index>0&&t.push(r.substring(0,o.index)),t.push(o[0]),n+=o.index+o[0].length,r=e.substring(n)}return t}var s=n(4081);function l(e,t,n,a){void 0===a&&(a=s.rG);const{chunkIndex:l,chunks:c}=function(e,t,n){const a=[];let s=0,l=0,c=-1;for(;s<t.length;){const[u,d]=t[s];if(s+=1,!(u<l)){if(u>l){const t=i(e.substring(l,u)).map((e=>({html:(0,r.Z)(e),textLength:e.length})));for(const e of t)a.push(e)}-1===c&&(c=a.length),l=u+d,a.push({html:(0,o.Z)(e.substring(u,l),n,!0),textLength:d})}}if(l<e.length){const t=i(e.substring(l)).map((e=>({html:(0,r.Z)(e),textLength:e.length})));for(const e of t)a.push(e)}return{chunkIndex:c,chunks:a}}(e,t,n),u=c.slice(0,l),d=c[l],p=[d.html],f=c.slice(l+1);let g=d.textLength,m=0,h=0,y=!1,b=!1;for(;g<a;)if((m<=h||0===f.length)&&u.length>0){const e=u.pop();g+e.textLength<=a?(p.unshift(e.html),m+=e.textLength,g+=e.textLength):(y=!0,u.length=0)}else{if(!(f.length>0))break;{const e=f.shift();g+e.textLength<=a?(p.push(e.html),h+=e.textLength,g+=e.textLength):(b=!0,f.length=0)}}return(y||u.length>0)&&p.unshift("\u2026"),(b||f.length>0)&&p.push("\u2026"),p.join("")}},3385:(e,t,n)=>{"use strict";function r(e,t){if("string"==typeof e)return{label:e,path:e};{const{label:n,path:r}=e;return"string"==typeof n?{label:n,path:r}:Object.prototype.hasOwnProperty.call(n,t)?{label:n[t],path:r}:{label:r,path:r}}}n.d(t,{p:()=>r})},9913:(e,t,n)=>{"use strict";var r;n.d(t,{i:()=>r}),function(e){e[e.Title=0]="Title",e[e.Heading=1]="Heading",e[e.Description=2]="Description",e[e.Keywords=3]="Keywords",e[e.Content=4]="Content"}(r||(r={}))},1513:(e,t,n)=>{"use strict";n.d(t,{zR:()=>w,TM:()=>C,yJ:()=>f,sC:()=>T,AO:()=>p});var r=n(8168);function o(e){return"/"===e.charAt(0)}function a(e,t){for(var n=t,r=n+1,o=e.length;r<o;n+=1,r+=1)e[n]=e[r];e.pop()}const i=function(e,t){void 0===t&&(t="");var n,r=e&&e.split("/")||[],i=t&&t.split("/")||[],s=e&&o(e),l=t&&o(t),c=s||l;if(e&&o(e)?i=r:r.length&&(i.pop(),i=i.concat(r)),!i.length)return"/";if(i.length){var u=i[i.length-1];n="."===u||".."===u||""===u}else n=!1;for(var d=0,p=i.length;p>=0;p--){var f=i[p];"."===f?a(i,p):".."===f?(a(i,p),d++):d&&(a(i,p),d--)}if(!c)for(;d--;d)i.unshift("..");!c||""===i[0]||i[0]&&o(i[0])||i.unshift("");var g=i.join("/");return n&&"/"!==g.substr(-1)&&(g+="/"),g};var s=n(1561);function l(e){return"/"===e.charAt(0)?e:"/"+e}function c(e){return"/"===e.charAt(0)?e.substr(1):e}function u(e,t){return function(e,t){return 0===e.toLowerCase().indexOf(t.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(t.length))}(e,t)?e.substr(t.length):e}function d(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function p(e){var t=e.pathname,n=e.search,r=e.hash,o=t||"/";return n&&"?"!==n&&(o+="?"===n.charAt(0)?n:"?"+n),r&&"#"!==r&&(o+="#"===r.charAt(0)?r:"#"+r),o}function f(e,t,n,o){var a;"string"==typeof e?(a=function(e){var t=e||"/",n="",r="",o=t.indexOf("#");-1!==o&&(r=t.substr(o),t=t.substr(0,o));var a=t.indexOf("?");return-1!==a&&(n=t.substr(a),t=t.substr(0,a)),{pathname:t,search:"?"===n?"":n,hash:"#"===r?"":r}}(e),a.state=t):(void 0===(a=(0,r.A)({},e)).pathname&&(a.pathname=""),a.search?"?"!==a.search.charAt(0)&&(a.search="?"+a.search):a.search="",a.hash?"#"!==a.hash.charAt(0)&&(a.hash="#"+a.hash):a.hash="",void 0!==t&&void 0===a.state&&(a.state=t));try{a.pathname=decodeURI(a.pathname)}catch(s){throw s instanceof URIError?new URIError('Pathname "'+a.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):s}return n&&(a.key=n),o?a.pathname?"/"!==a.pathname.charAt(0)&&(a.pathname=i(a.pathname,o.pathname)):a.pathname=o.pathname:a.pathname||(a.pathname="/"),a}function g(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,r,o){if(null!=e){var a="function"==typeof e?e(t,n):e;"string"==typeof a?"function"==typeof r?r(a,o):o(!0):o(!1!==a)}else o(!0)},appendListener:function(e){var n=!0;function r(){n&&e.apply(void 0,arguments)}return t.push(r),function(){n=!1,t=t.filter((function(e){return e!==r}))}},notifyListeners:function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];t.forEach((function(e){return e.apply(void 0,n)}))}}}var m=!("undefined"==typeof window||!window.document||!window.document.createElement);function h(e,t){t(window.confirm(e))}var y="popstate",b="hashchange";function v(){try{return window.history.state||{}}catch(e){return{}}}function w(e){void 0===e&&(e={}),m||(0,s.A)(!1);var t,n=window.history,o=(-1===(t=window.navigator.userAgent).indexOf("Android 2.")&&-1===t.indexOf("Android 4.0")||-1===t.indexOf("Mobile Safari")||-1!==t.indexOf("Chrome")||-1!==t.indexOf("Windows Phone"))&&window.history&&"pushState"in window.history,a=!(-1===window.navigator.userAgent.indexOf("Trident")),i=e,c=i.forceRefresh,w=void 0!==c&&c,k=i.getUserConfirmation,x=void 0===k?h:k,S=i.keyLength,_=void 0===S?6:S,E=e.basename?d(l(e.basename)):"";function C(e){var t=e||{},n=t.key,r=t.state,o=window.location,a=o.pathname+o.search+o.hash;return E&&(a=u(a,E)),f(a,r,n)}function A(){return Math.random().toString(36).substr(2,_)}var T=g();function j(e){(0,r.A)($,e),$.length=n.length,T.notifyListeners($.location,$.action)}function R(e){(function(e){return void 0===e.state&&-1===navigator.userAgent.indexOf("CriOS")})(e)||N(C(e.state))}function P(){N(C(v()))}var L=!1;function N(e){if(L)L=!1,j();else{T.confirmTransitionTo(e,"POP",x,(function(t){t?j({action:"POP",location:e}):function(e){var t=$.location,n=D.indexOf(t.key);-1===n&&(n=0);var r=D.indexOf(e.key);-1===r&&(r=0);var o=n-r;o&&(L=!0,M(o))}(e)}))}}var O=C(v()),D=[O.key];function I(e){return E+p(e)}function M(e){n.go(e)}var F=0;function z(e){1===(F+=e)&&1===e?(window.addEventListener(y,R),a&&window.addEventListener(b,P)):0===F&&(window.removeEventListener(y,R),a&&window.removeEventListener(b,P))}var B=!1;var $={length:n.length,action:"POP",location:O,createHref:I,push:function(e,t){var r="PUSH",a=f(e,t,A(),$.location);T.confirmTransitionTo(a,r,x,(function(e){if(e){var t=I(a),i=a.key,s=a.state;if(o)if(n.pushState({key:i,state:s},null,t),w)window.location.href=t;else{var l=D.indexOf($.location.key),c=D.slice(0,l+1);c.push(a.key),D=c,j({action:r,location:a})}else window.location.href=t}}))},replace:function(e,t){var r="REPLACE",a=f(e,t,A(),$.location);T.confirmTransitionTo(a,r,x,(function(e){if(e){var t=I(a),i=a.key,s=a.state;if(o)if(n.replaceState({key:i,state:s},null,t),w)window.location.replace(t);else{var l=D.indexOf($.location.key);-1!==l&&(D[l]=a.key),j({action:r,location:a})}else window.location.replace(t)}}))},go:M,goBack:function(){M(-1)},goForward:function(){M(1)},block:function(e){void 0===e&&(e=!1);var t=T.setPrompt(e);return B||(z(1),B=!0),function(){return B&&(B=!1,z(-1)),t()}},listen:function(e){var t=T.appendListener(e);return z(1),function(){z(-1),t()}}};return $}var k="hashchange",x={hashbang:{encodePath:function(e){return"!"===e.charAt(0)?e:"!/"+c(e)},decodePath:function(e){return"!"===e.charAt(0)?e.substr(1):e}},noslash:{encodePath:c,decodePath:l},slash:{encodePath:l,decodePath:l}};function S(e){var t=e.indexOf("#");return-1===t?e:e.slice(0,t)}function _(){var e=window.location.href,t=e.indexOf("#");return-1===t?"":e.substring(t+1)}function E(e){window.location.replace(S(window.location.href)+"#"+e)}function C(e){void 0===e&&(e={}),m||(0,s.A)(!1);var t=window.history,n=(window.navigator.userAgent.indexOf("Firefox"),e),o=n.getUserConfirmation,a=void 0===o?h:o,i=n.hashType,c=void 0===i?"slash":i,y=e.basename?d(l(e.basename)):"",b=x[c],v=b.encodePath,w=b.decodePath;function C(){var e=w(_());return y&&(e=u(e,y)),f(e)}var A=g();function T(e){(0,r.A)(B,e),B.length=t.length,A.notifyListeners(B.location,B.action)}var j=!1,R=null;function P(){var e,t,n=_(),r=v(n);if(n!==r)E(r);else{var o=C(),i=B.location;if(!j&&(t=o,(e=i).pathname===t.pathname&&e.search===t.search&&e.hash===t.hash))return;if(R===p(o))return;R=null,function(e){if(j)j=!1,T();else{var t="POP";A.confirmTransitionTo(e,t,a,(function(n){n?T({action:t,location:e}):function(e){var t=B.location,n=D.lastIndexOf(p(t));-1===n&&(n=0);var r=D.lastIndexOf(p(e));-1===r&&(r=0);var o=n-r;o&&(j=!0,I(o))}(e)}))}}(o)}}var L=_(),N=v(L);L!==N&&E(N);var O=C(),D=[p(O)];function I(e){t.go(e)}var M=0;function F(e){1===(M+=e)&&1===e?window.addEventListener(k,P):0===M&&window.removeEventListener(k,P)}var z=!1;var B={length:t.length,action:"POP",location:O,createHref:function(e){var t=document.querySelector("base"),n="";return t&&t.getAttribute("href")&&(n=S(window.location.href)),n+"#"+v(y+p(e))},push:function(e,t){var n="PUSH",r=f(e,void 0,void 0,B.location);A.confirmTransitionTo(r,n,a,(function(e){if(e){var t=p(r),o=v(y+t);if(_()!==o){R=t,function(e){window.location.hash=e}(o);var a=D.lastIndexOf(p(B.location)),i=D.slice(0,a+1);i.push(t),D=i,T({action:n,location:r})}else T()}}))},replace:function(e,t){var n="REPLACE",r=f(e,void 0,void 0,B.location);A.confirmTransitionTo(r,n,a,(function(e){if(e){var t=p(r),o=v(y+t);_()!==o&&(R=t,E(o));var a=D.indexOf(p(B.location));-1!==a&&(D[a]=t),T({action:n,location:r})}}))},go:I,goBack:function(){I(-1)},goForward:function(){I(1)},block:function(e){void 0===e&&(e=!1);var t=A.setPrompt(e);return z||(F(1),z=!0),function(){return z&&(z=!1,F(-1)),t()}},listen:function(e){var t=A.appendListener(e);return F(1),function(){F(-1),t()}}};return B}function A(e,t,n){return Math.min(Math.max(e,t),n)}function T(e){void 0===e&&(e={});var t=e,n=t.getUserConfirmation,o=t.initialEntries,a=void 0===o?["/"]:o,i=t.initialIndex,s=void 0===i?0:i,l=t.keyLength,c=void 0===l?6:l,u=g();function d(e){(0,r.A)(w,e),w.length=w.entries.length,u.notifyListeners(w.location,w.action)}function m(){return Math.random().toString(36).substr(2,c)}var h=A(s,0,a.length-1),y=a.map((function(e){return f(e,void 0,"string"==typeof e?m():e.key||m())})),b=p;function v(e){var t=A(w.index+e,0,w.entries.length-1),r=w.entries[t];u.confirmTransitionTo(r,"POP",n,(function(e){e?d({action:"POP",location:r,index:t}):d()}))}var w={length:y.length,action:"POP",location:y[h],index:h,entries:y,createHref:b,push:function(e,t){var r="PUSH",o=f(e,t,m(),w.location);u.confirmTransitionTo(o,r,n,(function(e){if(e){var t=w.index+1,n=w.entries.slice(0);n.length>t?n.splice(t,n.length-t,o):n.push(o),d({action:r,location:o,index:t,entries:n})}}))},replace:function(e,t){var r="REPLACE",o=f(e,t,m(),w.location);u.confirmTransitionTo(o,r,n,(function(e){e&&(w.entries[w.index]=o,d({action:r,location:o}))}))},go:v,goBack:function(){v(-1)},goForward:function(){v(1)},canGo:function(e){var t=w.index+e;return t>=0&&t<w.entries.length},block:function(e){return void 0===e&&(e=!1),u.setPrompt(e)},listen:function(e){return u.appendListener(e)}};return w}},4146:(e,t,n)=>{"use strict";var r=n(4363),o={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},a={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},i={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},s={};function l(e){return r.isMemo(e)?i:s[e.$$typeof]||o}s[r.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},s[r.Memo]=i;var c=Object.defineProperty,u=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,p=Object.getOwnPropertyDescriptor,f=Object.getPrototypeOf,g=Object.prototype;e.exports=function e(t,n,r){if("string"!=typeof n){if(g){var o=f(n);o&&o!==g&&e(t,o,r)}var i=u(n);d&&(i=i.concat(d(n)));for(var s=l(t),m=l(n),h=0;h<i.length;++h){var y=i[h];if(!(a[y]||r&&r[y]||m&&m[y]||s&&s[y])){var b=p(n,y);try{c(t,y,b)}catch(v){}}}}return t}},311:e=>{"use strict";e.exports=function(e,t,n,r,o,a,i,s){if(!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,o,a,i,s],u=0;(l=new Error(t.replace(/%s/g,(function(){return c[u++]})))).name="Invariant Violation"}throw l.framesToPop=1,l}}},4634:e=>{e.exports=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)}},119:(e,t,n)=>{"use strict";n.r(t)},5947:function(e,t,n){var r,o;r=function(){var e,t,n={version:"0.2.0"},r=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'};function o(e,t,n){return e<t?t:e>n?n:e}function a(e){return 100*(-1+e)}function i(e,t,n){var o;return(o="translate3d"===r.positionUsing?{transform:"translate3d("+a(e)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+a(e)+"%,0)"}:{"margin-left":a(e)+"%"}).transition="all "+t+"ms "+n,o}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(r[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=o(e,r.minimum,1),n.status=1===e?null:e;var a=n.render(!t),c=a.querySelector(r.barSelector),u=r.speed,d=r.easing;return a.offsetWidth,s((function(t){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),l(c,i(e,u,d)),1===e?(l(a,{transition:"none",opacity:1}),a.offsetWidth,setTimeout((function(){l(a,{transition:"all "+u+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),u)}),u)):setTimeout(t,u)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),r.trickleSpeed)};return r.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*o(Math.random()*t,.1,.95)),t=o(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},e=0,t=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===t&&n.start(),e++,t++,r.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");u(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=r.template;var o,i=t.querySelector(r.barSelector),s=e?"-100":a(n.status||0),c=document.querySelector(r.parent);return l(i,{transition:"all 0 linear",transform:"translate3d("+s+"%,0,0)"}),r.showSpinner||(o=t.querySelector(r.spinnerSelector))&&f(o),c!=document.body&&u(c,"nprogress-custom-parent"),c.appendChild(t),t},n.remove=function(){d(document.documentElement,"nprogress-busy"),d(document.querySelector(r.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&f(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var s=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),l=function(){var e=["Webkit","O","Moz","ms"],t={};function n(e){return e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()}))}function r(t){var n=document.body.style;if(t in n)return t;for(var r,o=e.length,a=t.charAt(0).toUpperCase()+t.slice(1);o--;)if((r=e[o]+a)in n)return r;return t}function o(e){return e=n(e),t[e]||(t[e]=r(e))}function a(e,t,n){t=o(t),e.style[t]=n}return function(e,t){var n,r,o=arguments;if(2==o.length)for(n in t)void 0!==(r=t[n])&&t.hasOwnProperty(n)&&a(e,n,r);else a(e,o[1],o[2])}}();function c(e,t){return("string"==typeof e?e:p(e)).indexOf(" "+t+" ")>=0}function u(e,t){var n=p(e),r=n+t;c(n,t)||(e.className=r.substring(1))}function d(e,t){var n,r=p(e);c(e,t)&&(n=r.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function p(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function f(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n},void 0===(o="function"==typeof r?r.call(t,n,t,e):r)||(e.exports=o)},5302:(e,t,n)=>{var r=n(4634);e.exports=g,e.exports.parse=a,e.exports.compile=function(e,t){return l(a(e,t),t)},e.exports.tokensToFunction=l,e.exports.tokensToRegExp=f;var o=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function a(e,t){for(var n,r=[],a=0,s=0,l="",c=t&&t.delimiter||"/";null!=(n=o.exec(e));){var d=n[0],p=n[1],f=n.index;if(l+=e.slice(s,f),s=f+d.length,p)l+=p[1];else{var g=e[s],m=n[2],h=n[3],y=n[4],b=n[5],v=n[6],w=n[7];l&&(r.push(l),l="");var k=null!=m&&null!=g&&g!==m,x="+"===v||"*"===v,S="?"===v||"*"===v,_=m||c,E=y||b,C=m||("string"==typeof r[r.length-1]?r[r.length-1]:"");r.push({name:h||a++,prefix:m||"",delimiter:_,optional:S,repeat:x,partial:k,asterisk:!!w,pattern:E?u(E):w?".*":i(_,C)})}}return s<e.length&&(l+=e.substr(s)),l&&r.push(l),r}function i(e,t){return!t||t.indexOf(e)>-1?"[^"+c(e)+"]+?":c(t)+"|(?:(?!"+c(t)+")[^"+c(e)+"])+?"}function s(e){return encodeURI(e).replace(/[\/?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()}))}function l(e,t){for(var n=new Array(e.length),o=0;o<e.length;o++)"object"==typeof e[o]&&(n[o]=new RegExp("^(?:"+e[o].pattern+")$",p(t)));return function(t,o){for(var a="",i=t||{},l=(o||{}).pretty?s:encodeURIComponent,c=0;c<e.length;c++){var u=e[c];if("string"!=typeof u){var d,p=i[u.name];if(null==p){if(u.optional){u.partial&&(a+=u.prefix);continue}throw new TypeError('Expected "'+u.name+'" to be defined')}if(r(p)){if(!u.repeat)throw new TypeError('Expected "'+u.name+'" to not repeat, but received `'+JSON.stringify(p)+"`");if(0===p.length){if(u.optional)continue;throw new TypeError('Expected "'+u.name+'" to not be empty')}for(var f=0;f<p.length;f++){if(d=l(p[f]),!n[c].test(d))throw new TypeError('Expected all "'+u.name+'" to match "'+u.pattern+'", but received `'+JSON.stringify(d)+"`");a+=(0===f?u.prefix:u.delimiter)+d}}else{if(d=u.asterisk?encodeURI(p).replace(/[?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()})):l(p),!n[c].test(d))throw new TypeError('Expected "'+u.name+'" to match "'+u.pattern+'", but received "'+d+'"');a+=u.prefix+d}}else a+=u}return a}}function c(e){return e.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function u(e){return e.replace(/([=!:$\/()])/g,"\\$1")}function d(e,t){return e.keys=t,e}function p(e){return e&&e.sensitive?"":"i"}function f(e,t,n){r(t)||(n=t||n,t=[]);for(var o=(n=n||{}).strict,a=!1!==n.end,i="",s=0;s<e.length;s++){var l=e[s];if("string"==typeof l)i+=c(l);else{var u=c(l.prefix),f="(?:"+l.pattern+")";t.push(l),l.repeat&&(f+="(?:"+u+f+")*"),i+=f=l.optional?l.partial?u+"("+f+")?":"(?:"+u+"("+f+"))?":u+"("+f+")"}}var g=c(n.delimiter||"/"),m=i.slice(-g.length)===g;return o||(i=(m?i.slice(0,-g.length):i)+"(?:"+g+"(?=$))?"),i+=a?"$":o&&m?"":"(?="+g+"|$)",d(new RegExp("^"+i,p(n)),t)}function g(e,t,n){return r(t)||(n=t||n,t=[]),n=n||{},e instanceof RegExp?function(e,t){var n=e.source.match(/\((?!\?)/g);if(n)for(var r=0;r<n.length;r++)t.push({name:r,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return d(e,t)}(e,t):r(e)?function(e,t,n){for(var r=[],o=0;o<e.length;o++)r.push(g(e[o],t,n).source);return d(new RegExp("(?:"+r.join("|")+")",p(n)),t)}(e,t,n):function(e,t,n){return f(a(e,n),t,n)}(e,t,n)}},6969:e=>{e.exports&&(e.exports={core:{meta:{path:"components/prism-core.js",option:"mandatory"},core:"Core"},themes:{meta:{path:"themes/{id}.css",link:"index.html?theme={id}",exclusive:!0},prism:{title:"Default",option:"default"},"prism-dark":"Dark","prism-funky":"Funky","prism-okaidia":{title:"Okaidia",owner:"ocodia"},"prism-twilight":{title:"Twilight",owner:"remybach"},"prism-coy":{title:"Coy",owner:"tshedor"},"prism-solarizedlight":{title:"Solarized Light",owner:"hectormatos2011 "},"prism-tomorrow":{title:"Tomorrow Night",owner:"Rosey"}},languages:{meta:{path:"components/prism-{id}",noCSS:!0,examplesPath:"examples/prism-{id}",addCheckAll:!0},markup:{title:"Markup",alias:["html","xml","svg","mathml","ssml","atom","rss"],aliasTitles:{html:"HTML",xml:"XML",svg:"SVG",mathml:"MathML",ssml:"SSML",atom:"Atom",rss:"RSS"},option:"default"},css:{title:"CSS",option:"default",modify:"markup"},clike:{title:"C-like",option:"default"},javascript:{title:"JavaScript",require:"clike",modify:"markup",optional:"regex",alias:"js",option:"default"},abap:{title:"ABAP",owner:"dellagustin"},abnf:{title:"ABNF",owner:"RunDevelopment"},actionscript:{title:"ActionScript",require:"javascript",modify:"markup",owner:"Golmote"},ada:{title:"Ada",owner:"Lucretia"},agda:{title:"Agda",owner:"xy-ren"},al:{title:"AL",owner:"RunDevelopment"},antlr4:{title:"ANTLR4",alias:"g4",owner:"RunDevelopment"},apacheconf:{title:"Apache Configuration",owner:"GuiTeK"},apex:{title:"Apex",require:["clike","sql"],owner:"RunDevelopment"},apl:{title:"APL",owner:"ngn"},applescript:{title:"AppleScript",owner:"Golmote"},aql:{title:"AQL",owner:"RunDevelopment"},arduino:{title:"Arduino",require:"cpp",alias:"ino",owner:"dkern"},arff:{title:"ARFF",owner:"Golmote"},armasm:{title:"ARM Assembly",alias:"arm-asm",owner:"RunDevelopment"},arturo:{title:"Arturo",alias:"art",optional:["bash","css","javascript","markup","markdown","sql"],owner:"drkameleon"},asciidoc:{alias:"adoc",title:"AsciiDoc",owner:"Golmote"},aspnet:{title:"ASP.NET (C#)",require:["markup","csharp"],owner:"nauzilus"},asm6502:{title:"6502 Assembly",owner:"kzurawel"},asmatmel:{title:"Atmel AVR Assembly",owner:"cerkit"},autohotkey:{title:"AutoHotkey",owner:"aviaryan"},autoit:{title:"AutoIt",owner:"Golmote"},avisynth:{title:"AviSynth",alias:"avs",owner:"Zinfidel"},"avro-idl":{title:"Avro IDL",alias:"avdl",owner:"RunDevelopment"},awk:{title:"AWK",alias:"gawk",aliasTitles:{gawk:"GAWK"},owner:"RunDevelopment"},bash:{title:"Bash",alias:["sh","shell"],aliasTitles:{sh:"Shell",shell:"Shell"},owner:"zeitgeist87"},basic:{title:"BASIC",owner:"Golmote"},batch:{title:"Batch",owner:"Golmote"},bbcode:{title:"BBcode",alias:"shortcode",aliasTitles:{shortcode:"Shortcode"},owner:"RunDevelopment"},bbj:{title:"BBj",owner:"hyyan"},bicep:{title:"Bicep",owner:"johnnyreilly"},birb:{title:"Birb",require:"clike",owner:"Calamity210"},bison:{title:"Bison",require:"c",owner:"Golmote"},bnf:{title:"BNF",alias:"rbnf",aliasTitles:{rbnf:"RBNF"},owner:"RunDevelopment"},bqn:{title:"BQN",owner:"yewscion"},brainfuck:{title:"Brainfuck",owner:"Golmote"},brightscript:{title:"BrightScript",owner:"RunDevelopment"},bro:{title:"Bro",owner:"wayward710"},bsl:{title:"BSL (1C:Enterprise)",alias:"oscript",aliasTitles:{oscript:"OneScript"},owner:"Diversus23"},c:{title:"C",require:"clike",owner:"zeitgeist87"},csharp:{title:"C#",require:"clike",alias:["cs","dotnet"],owner:"mvalipour"},cpp:{title:"C++",require:"c",owner:"zeitgeist87"},cfscript:{title:"CFScript",require:"clike",alias:"cfc",owner:"mjclemente"},chaiscript:{title:"ChaiScript",require:["clike","cpp"],owner:"RunDevelopment"},cil:{title:"CIL",owner:"sbrl"},cilkc:{title:"Cilk/C",require:"c",alias:"cilk-c",owner:"OpenCilk"},cilkcpp:{title:"Cilk/C++",require:"cpp",alias:["cilk-cpp","cilk"],owner:"OpenCilk"},clojure:{title:"Clojure",owner:"troglotit"},cmake:{title:"CMake",owner:"mjrogozinski"},cobol:{title:"COBOL",owner:"RunDevelopment"},coffeescript:{title:"CoffeeScript",require:"javascript",alias:"coffee",owner:"R-osey"},concurnas:{title:"Concurnas",alias:"conc",owner:"jasontatton"},csp:{title:"Content-Security-Policy",owner:"ScottHelme"},cooklang:{title:"Cooklang",owner:"ahue"},coq:{title:"Coq",owner:"RunDevelopment"},crystal:{title:"Crystal",require:"ruby",owner:"MakeNowJust"},"css-extras":{title:"CSS Extras",require:"css",modify:"css",owner:"milesj"},csv:{title:"CSV",owner:"RunDevelopment"},cue:{title:"CUE",owner:"RunDevelopment"},cypher:{title:"Cypher",owner:"RunDevelopment"},d:{title:"D",require:"clike",owner:"Golmote"},dart:{title:"Dart",require:"clike",owner:"Golmote"},dataweave:{title:"DataWeave",owner:"machaval"},dax:{title:"DAX",owner:"peterbud"},dhall:{title:"Dhall",owner:"RunDevelopment"},diff:{title:"Diff",owner:"uranusjr"},django:{title:"Django/Jinja2",require:"markup-templating",alias:"jinja2",owner:"romanvm"},"dns-zone-file":{title:"DNS zone file",owner:"RunDevelopment",alias:"dns-zone"},docker:{title:"Docker",alias:"dockerfile",owner:"JustinBeckwith"},dot:{title:"DOT (Graphviz)",alias:"gv",optional:"markup",owner:"RunDevelopment"},ebnf:{title:"EBNF",owner:"RunDevelopment"},editorconfig:{title:"EditorConfig",owner:"osipxd"},eiffel:{title:"Eiffel",owner:"Conaclos"},ejs:{title:"EJS",require:["javascript","markup-templating"],owner:"RunDevelopment",alias:"eta",aliasTitles:{eta:"Eta"}},elixir:{title:"Elixir",owner:"Golmote"},elm:{title:"Elm",owner:"zwilias"},etlua:{title:"Embedded Lua templating",require:["lua","markup-templating"],owner:"RunDevelopment"},erb:{title:"ERB",require:["ruby","markup-templating"],owner:"Golmote"},erlang:{title:"Erlang",owner:"Golmote"},"excel-formula":{title:"Excel Formula",alias:["xlsx","xls"],owner:"RunDevelopment"},fsharp:{title:"F#",require:"clike",owner:"simonreynolds7"},factor:{title:"Factor",owner:"catb0t"},false:{title:"False",owner:"edukisto"},"firestore-security-rules":{title:"Firestore security rules",require:"clike",owner:"RunDevelopment"},flow:{title:"Flow",require:"javascript",owner:"Golmote"},fortran:{title:"Fortran",owner:"Golmote"},ftl:{title:"FreeMarker Template Language",require:"markup-templating",owner:"RunDevelopment"},gml:{title:"GameMaker Language",alias:"gamemakerlanguage",require:"clike",owner:"LiarOnce"},gap:{title:"GAP (CAS)",owner:"RunDevelopment"},gcode:{title:"G-code",owner:"RunDevelopment"},gdscript:{title:"GDScript",owner:"RunDevelopment"},gedcom:{title:"GEDCOM",owner:"Golmote"},gettext:{title:"gettext",alias:"po",owner:"RunDevelopment"},gherkin:{title:"Gherkin",owner:"hason"},git:{title:"Git",owner:"lgiraudel"},glsl:{title:"GLSL",require:"c",owner:"Golmote"},gn:{title:"GN",alias:"gni",owner:"RunDevelopment"},"linker-script":{title:"GNU Linker Script",alias:"ld",owner:"RunDevelopment"},go:{title:"Go",require:"clike",owner:"arnehormann"},"go-module":{title:"Go module",alias:"go-mod",owner:"RunDevelopment"},gradle:{title:"Gradle",require:"clike",owner:"zeabdelkhalek-badido18"},graphql:{title:"GraphQL",optional:"markdown",owner:"Golmote"},groovy:{title:"Groovy",require:"clike",owner:"robfletcher"},haml:{title:"Haml",require:"ruby",optional:["css","css-extras","coffeescript","erb","javascript","less","markdown","scss","textile"],owner:"Golmote"},handlebars:{title:"Handlebars",require:"markup-templating",alias:["hbs","mustache"],aliasTitles:{mustache:"Mustache"},owner:"Golmote"},haskell:{title:"Haskell",alias:"hs",owner:"bholst"},haxe:{title:"Haxe",require:"clike",optional:"regex",owner:"Golmote"},hcl:{title:"HCL",owner:"outsideris"},hlsl:{title:"HLSL",require:"c",owner:"RunDevelopment"},hoon:{title:"Hoon",owner:"matildepark"},http:{title:"HTTP",optional:["csp","css","hpkp","hsts","javascript","json","markup","uri"],owner:"danielgtaylor"},hpkp:{title:"HTTP Public-Key-Pins",owner:"ScottHelme"},hsts:{title:"HTTP Strict-Transport-Security",owner:"ScottHelme"},ichigojam:{title:"IchigoJam",owner:"BlueCocoa"},icon:{title:"Icon",owner:"Golmote"},"icu-message-format":{title:"ICU Message Format",owner:"RunDevelopment"},idris:{title:"Idris",alias:"idr",owner:"KeenS",require:"haskell"},ignore:{title:".ignore",owner:"osipxd",alias:["gitignore","hgignore","npmignore"],aliasTitles:{gitignore:".gitignore",hgignore:".hgignore",npmignore:".npmignore"}},inform7:{title:"Inform 7",owner:"Golmote"},ini:{title:"Ini",owner:"aviaryan"},io:{title:"Io",owner:"AlesTsurko"},j:{title:"J",owner:"Golmote"},java:{title:"Java",require:"clike",owner:"sherblot"},javadoc:{title:"JavaDoc",require:["markup","java","javadoclike"],modify:"java",optional:"scala",owner:"RunDevelopment"},javadoclike:{title:"JavaDoc-like",modify:["java","javascript","php"],owner:"RunDevelopment"},javastacktrace:{title:"Java stack trace",owner:"RunDevelopment"},jexl:{title:"Jexl",owner:"czosel"},jolie:{title:"Jolie",require:"clike",owner:"thesave"},jq:{title:"JQ",owner:"RunDevelopment"},jsdoc:{title:"JSDoc",require:["javascript","javadoclike","typescript"],modify:"javascript",optional:["actionscript","coffeescript"],owner:"RunDevelopment"},"js-extras":{title:"JS Extras",require:"javascript",modify:"javascript",optional:["actionscript","coffeescript","flow","n4js","typescript"],owner:"RunDevelopment"},json:{title:"JSON",alias:"webmanifest",aliasTitles:{webmanifest:"Web App Manifest"},owner:"CupOfTea696"},json5:{title:"JSON5",require:"json",owner:"RunDevelopment"},jsonp:{title:"JSONP",require:"json",owner:"RunDevelopment"},jsstacktrace:{title:"JS stack trace",owner:"sbrl"},"js-templates":{title:"JS Templates",require:"javascript",modify:"javascript",optional:["css","css-extras","graphql","markdown","markup","sql"],owner:"RunDevelopment"},julia:{title:"Julia",owner:"cdagnino"},keepalived:{title:"Keepalived Configure",owner:"dev-itsheng"},keyman:{title:"Keyman",owner:"mcdurdin"},kotlin:{title:"Kotlin",alias:["kt","kts"],aliasTitles:{kts:"Kotlin Script"},require:"clike",owner:"Golmote"},kumir:{title:"KuMir (\u041a\u0443\u041c\u0438\u0440)",alias:"kum",owner:"edukisto"},kusto:{title:"Kusto",owner:"RunDevelopment"},latex:{title:"LaTeX",alias:["tex","context"],aliasTitles:{tex:"TeX",context:"ConTeXt"},owner:"japborst"},latte:{title:"Latte",require:["clike","markup-templating","php"],owner:"nette"},less:{title:"Less",require:"css",optional:"css-extras",owner:"Golmote"},lilypond:{title:"LilyPond",require:"scheme",alias:"ly",owner:"RunDevelopment"},liquid:{title:"Liquid",require:"markup-templating",owner:"cinhtau"},lisp:{title:"Lisp",alias:["emacs","elisp","emacs-lisp"],owner:"JuanCaicedo"},livescript:{title:"LiveScript",owner:"Golmote"},llvm:{title:"LLVM IR",owner:"porglezomp"},log:{title:"Log file",optional:"javastacktrace",owner:"RunDevelopment"},lolcode:{title:"LOLCODE",owner:"Golmote"},lua:{title:"Lua",owner:"Golmote"},magma:{title:"Magma (CAS)",owner:"RunDevelopment"},makefile:{title:"Makefile",owner:"Golmote"},markdown:{title:"Markdown",require:"markup",optional:"yaml",alias:"md",owner:"Golmote"},"markup-templating":{title:"Markup templating",require:"markup",owner:"Golmote"},mata:{title:"Mata",owner:"RunDevelopment"},matlab:{title:"MATLAB",owner:"Golmote"},maxscript:{title:"MAXScript",owner:"RunDevelopment"},mel:{title:"MEL",owner:"Golmote"},mermaid:{title:"Mermaid",owner:"RunDevelopment"},metafont:{title:"METAFONT",owner:"LaeriExNihilo"},mizar:{title:"Mizar",owner:"Golmote"},mongodb:{title:"MongoDB",owner:"airs0urce",require:"javascript"},monkey:{title:"Monkey",owner:"Golmote"},moonscript:{title:"MoonScript",alias:"moon",owner:"RunDevelopment"},n1ql:{title:"N1QL",owner:"TMWilds"},n4js:{title:"N4JS",require:"javascript",optional:"jsdoc",alias:"n4jsd",owner:"bsmith-n4"},"nand2tetris-hdl":{title:"Nand To Tetris HDL",owner:"stephanmax"},naniscript:{title:"Naninovel Script",owner:"Elringus",alias:"nani"},nasm:{title:"NASM",owner:"rbmj"},neon:{title:"NEON",owner:"nette"},nevod:{title:"Nevod",owner:"nezaboodka"},nginx:{title:"nginx",owner:"volado"},nim:{title:"Nim",owner:"Golmote"},nix:{title:"Nix",owner:"Golmote"},nsis:{title:"NSIS",owner:"idleberg"},objectivec:{title:"Objective-C",require:"c",alias:"objc",owner:"uranusjr"},ocaml:{title:"OCaml",owner:"Golmote"},odin:{title:"Odin",owner:"edukisto"},opencl:{title:"OpenCL",require:"c",modify:["c","cpp"],owner:"Milania1"},openqasm:{title:"OpenQasm",alias:"qasm",owner:"RunDevelopment"},oz:{title:"Oz",owner:"Golmote"},parigp:{title:"PARI/GP",owner:"Golmote"},parser:{title:"Parser",require:"markup",owner:"Golmote"},pascal:{title:"Pascal",alias:"objectpascal",aliasTitles:{objectpascal:"Object Pascal"},owner:"Golmote"},pascaligo:{title:"Pascaligo",owner:"DefinitelyNotAGoat"},psl:{title:"PATROL Scripting Language",owner:"bertysentry"},pcaxis:{title:"PC-Axis",alias:"px",owner:"RunDevelopment"},peoplecode:{title:"PeopleCode",alias:"pcode",owner:"RunDevelopment"},perl:{title:"Perl",owner:"Golmote"},php:{title:"PHP",require:"markup-templating",owner:"milesj"},phpdoc:{title:"PHPDoc",require:["php","javadoclike"],modify:"php",owner:"RunDevelopment"},"php-extras":{title:"PHP Extras",require:"php",modify:"php",owner:"milesj"},"plant-uml":{title:"PlantUML",alias:"plantuml",owner:"RunDevelopment"},plsql:{title:"PL/SQL",require:"sql",owner:"Golmote"},powerquery:{title:"PowerQuery",alias:["pq","mscript"],owner:"peterbud"},powershell:{title:"PowerShell",owner:"nauzilus"},processing:{title:"Processing",require:"clike",owner:"Golmote"},prolog:{title:"Prolog",owner:"Golmote"},promql:{title:"PromQL",owner:"arendjr"},properties:{title:".properties",owner:"Golmote"},protobuf:{title:"Protocol Buffers",require:"clike",owner:"just-boris"},pug:{title:"Pug",require:["markup","javascript"],optional:["coffeescript","ejs","handlebars","less","livescript","markdown","scss","stylus","twig"],owner:"Golmote"},puppet:{title:"Puppet",owner:"Golmote"},pure:{title:"Pure",optional:["c","cpp","fortran"],owner:"Golmote"},purebasic:{title:"PureBasic",require:"clike",alias:"pbfasm",owner:"HeX0R101"},purescript:{title:"PureScript",require:"haskell",alias:"purs",owner:"sriharshachilakapati"},python:{title:"Python",alias:"py",owner:"multipetros"},qsharp:{title:"Q#",require:"clike",alias:"qs",owner:"fedonman"},q:{title:"Q (kdb+ database)",owner:"Golmote"},qml:{title:"QML",require:"javascript",owner:"RunDevelopment"},qore:{title:"Qore",require:"clike",owner:"temnroegg"},r:{title:"R",owner:"Golmote"},racket:{title:"Racket",require:"scheme",alias:"rkt",owner:"RunDevelopment"},cshtml:{title:"Razor C#",alias:"razor",require:["markup","csharp"],optional:["css","css-extras","javascript","js-extras"],owner:"RunDevelopment"},jsx:{title:"React JSX",require:["markup","javascript"],optional:["jsdoc","js-extras","js-templates"],owner:"vkbansal"},tsx:{title:"React TSX",require:["jsx","typescript"]},reason:{title:"Reason",require:"clike",owner:"Golmote"},regex:{title:"Regex",owner:"RunDevelopment"},rego:{title:"Rego",owner:"JordanSh"},renpy:{title:"Ren'py",alias:"rpy",owner:"HyuchiaDiego"},rescript:{title:"ReScript",alias:"res",owner:"vmarcosp"},rest:{title:"reST (reStructuredText)",owner:"Golmote"},rip:{title:"Rip",owner:"ravinggenius"},roboconf:{title:"Roboconf",owner:"Golmote"},robotframework:{title:"Robot Framework",alias:"robot",owner:"RunDevelopment"},ruby:{title:"Ruby",require:"clike",alias:"rb",owner:"samflores"},rust:{title:"Rust",owner:"Golmote"},sas:{title:"SAS",optional:["groovy","lua","sql"],owner:"Golmote"},sass:{title:"Sass (Sass)",require:"css",optional:"css-extras",owner:"Golmote"},scss:{title:"Sass (SCSS)",require:"css",optional:"css-extras",owner:"MoOx"},scala:{title:"Scala",require:"java",owner:"jozic"},scheme:{title:"Scheme",owner:"bacchus123"},"shell-session":{title:"Shell session",require:"bash",alias:["sh-session","shellsession"],owner:"RunDevelopment"},smali:{title:"Smali",owner:"RunDevelopment"},smalltalk:{title:"Smalltalk",owner:"Golmote"},smarty:{title:"Smarty",require:"markup-templating",optional:"php",owner:"Golmote"},sml:{title:"SML",alias:"smlnj",aliasTitles:{smlnj:"SML/NJ"},owner:"RunDevelopment"},solidity:{title:"Solidity (Ethereum)",alias:"sol",require:"clike",owner:"glachaud"},"solution-file":{title:"Solution file",alias:"sln",owner:"RunDevelopment"},soy:{title:"Soy (Closure Template)",require:"markup-templating",owner:"Golmote"},sparql:{title:"SPARQL",require:"turtle",owner:"Triply-Dev",alias:"rq"},"splunk-spl":{title:"Splunk SPL",owner:"RunDevelopment"},sqf:{title:"SQF: Status Quo Function (Arma 3)",require:"clike",owner:"RunDevelopment"},sql:{title:"SQL",owner:"multipetros"},squirrel:{title:"Squirrel",require:"clike",owner:"RunDevelopment"},stan:{title:"Stan",owner:"RunDevelopment"},stata:{title:"Stata Ado",require:["mata","java","python"],owner:"RunDevelopment"},iecst:{title:"Structured Text (IEC 61131-3)",owner:"serhioromano"},stylus:{title:"Stylus",owner:"vkbansal"},supercollider:{title:"SuperCollider",alias:"sclang",owner:"RunDevelopment"},swift:{title:"Swift",owner:"chrischares"},systemd:{title:"Systemd configuration file",owner:"RunDevelopment"},"t4-templating":{title:"T4 templating",owner:"RunDevelopment"},"t4-cs":{title:"T4 Text Templates (C#)",require:["t4-templating","csharp"],alias:"t4",owner:"RunDevelopment"},"t4-vb":{title:"T4 Text Templates (VB)",require:["t4-templating","vbnet"],owner:"RunDevelopment"},tap:{title:"TAP",owner:"isaacs",require:"yaml"},tcl:{title:"Tcl",owner:"PeterChaplin"},tt2:{title:"Template Toolkit 2",require:["clike","markup-templating"],owner:"gflohr"},textile:{title:"Textile",require:"markup",optional:"css",owner:"Golmote"},toml:{title:"TOML",owner:"RunDevelopment"},tremor:{title:"Tremor",alias:["trickle","troy"],owner:"darach",aliasTitles:{trickle:"trickle",troy:"troy"}},turtle:{title:"Turtle",alias:"trig",aliasTitles:{trig:"TriG"},owner:"jakubklimek"},twig:{title:"Twig",require:"markup-templating",owner:"brandonkelly"},typescript:{title:"TypeScript",require:"javascript",optional:"js-templates",alias:"ts",owner:"vkbansal"},typoscript:{title:"TypoScript",alias:"tsconfig",aliasTitles:{tsconfig:"TSConfig"},owner:"dkern"},unrealscript:{title:"UnrealScript",alias:["uscript","uc"],owner:"RunDevelopment"},uorazor:{title:"UO Razor Script",owner:"jaseowns"},uri:{title:"URI",alias:"url",aliasTitles:{url:"URL"},owner:"RunDevelopment"},v:{title:"V",require:"clike",owner:"taggon"},vala:{title:"Vala",require:"clike",optional:"regex",owner:"TemplarVolk"},vbnet:{title:"VB.Net",require:"basic",owner:"Bigsby"},velocity:{title:"Velocity",require:"markup",owner:"Golmote"},verilog:{title:"Verilog",owner:"a-rey"},vhdl:{title:"VHDL",owner:"a-rey"},vim:{title:"vim",owner:"westonganger"},"visual-basic":{title:"Visual Basic",alias:["vb","vba"],aliasTitles:{vba:"VBA"},owner:"Golmote"},warpscript:{title:"WarpScript",owner:"RunDevelopment"},wasm:{title:"WebAssembly",owner:"Golmote"},"web-idl":{title:"Web IDL",alias:"webidl",owner:"RunDevelopment"},wgsl:{title:"WGSL",owner:"Dr4gonthree"},wiki:{title:"Wiki markup",require:"markup",owner:"Golmote"},wolfram:{title:"Wolfram language",alias:["mathematica","nb","wl"],aliasTitles:{mathematica:"Mathematica",nb:"Mathematica Notebook"},owner:"msollami"},wren:{title:"Wren",owner:"clsource"},xeora:{title:"Xeora",require:"markup",alias:"xeoracube",aliasTitles:{xeoracube:"XeoraCube"},owner:"freakmaxi"},"xml-doc":{title:"XML doc (.net)",require:"markup",modify:["csharp","fsharp","vbnet"],owner:"RunDevelopment"},xojo:{title:"Xojo (REALbasic)",owner:"Golmote"},xquery:{title:"XQuery",require:"markup",owner:"Golmote"},yaml:{title:"YAML",alias:"yml",owner:"hason"},yang:{title:"YANG",owner:"RunDevelopment"},zig:{title:"Zig",owner:"RunDevelopment"}},plugins:{meta:{path:"plugins/{id}/prism-{id}",link:"plugins/{id}/"},"line-highlight":{title:"Line Highlight",description:"Highlights specific lines and/or line ranges."},"line-numbers":{title:"Line Numbers",description:"Line number at the beginning of code lines.",owner:"kuba-kubula"},"show-invisibles":{title:"Show Invisibles",description:"Show hidden characters such as tabs and line breaks.",optional:["autolinker","data-uri-highlight"]},autolinker:{title:"Autolinker",description:"Converts URLs and emails in code to clickable links. Parses Markdown links in comments."},wpd:{title:"WebPlatform Docs",description:'Makes tokens link to <a href="https://webplatform.github.io/docs/">WebPlatform.org documentation</a>. The links open in a new tab.'},"custom-class":{title:"Custom Class",description:"This plugin allows you to prefix Prism's default classes (<code>.comment</code> can become <code>.namespace--comment</code>) or replace them with your defined ones (like <code>.editor__comment</code>). You can even add new classes.",owner:"dvkndn",noCSS:!0},"file-highlight":{title:"File Highlight",description:"Fetch external files and highlight them with Prism. Used on the Prism website itself.",noCSS:!0},"show-language":{title:"Show Language",description:"Display the highlighted language in code blocks (inline code does not show the label).",owner:"nauzilus",noCSS:!0,require:"toolbar"},"jsonp-highlight":{title:"JSONP Highlight",description:"Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).",noCSS:!0,owner:"nauzilus"},"highlight-keywords":{title:"Highlight Keywords",description:"Adds special CSS classes for each keyword for fine-grained highlighting.",owner:"vkbansal",noCSS:!0},"remove-initial-line-feed":{title:"Remove initial line feed",description:"Removes the initial line feed in code blocks.",owner:"Golmote",noCSS:!0},"inline-color":{title:"Inline color",description:"Adds a small inline preview for colors in style sheets.",require:"css-extras",owner:"RunDevelopment"},previewers:{title:"Previewers",description:"Previewers for angles, colors, gradients, easing and time.",require:"css-extras",owner:"Golmote"},autoloader:{title:"Autoloader",description:"Automatically loads the needed languages to highlight the code blocks.",owner:"Golmote",noCSS:!0},"keep-markup":{title:"Keep Markup",description:"Prevents custom markup from being dropped out during highlighting.",owner:"Golmote",optional:"normalize-whitespace",noCSS:!0},"command-line":{title:"Command Line",description:"Display a command line with a prompt and, optionally, the output/response from the commands.",owner:"chriswells0"},"unescaped-markup":{title:"Unescaped Markup",description:"Write markup without having to escape anything."},"normalize-whitespace":{title:"Normalize Whitespace",description:"Supports multiple operations to normalize whitespace in code blocks.",owner:"zeitgeist87",optional:"unescaped-markup",noCSS:!0},"data-uri-highlight":{title:"Data-URI Highlight",description:"Highlights data-URI contents.",owner:"Golmote",noCSS:!0},toolbar:{title:"Toolbar",description:"Attach a toolbar for plugins to easily register buttons on the top of a code block.",owner:"mAAdhaTTah"},"copy-to-clipboard":{title:"Copy to Clipboard Button",description:"Add a button that copies the code block to the clipboard when clicked.",owner:"mAAdhaTTah",require:"toolbar",noCSS:!0},"download-button":{title:"Download Button",description:"A button in the toolbar of a code block adding a convenient way to download a code file.",owner:"Golmote",require:"toolbar",noCSS:!0},"match-braces":{title:"Match braces",description:"Highlights matching braces.",owner:"RunDevelopment"},"diff-highlight":{title:"Diff Highlight",description:"Highlights the code inside diff blocks.",owner:"RunDevelopment",require:"diff"},"filter-highlight-all":{title:"Filter highlightAll",description:"Filters the elements the <code>highlightAll</code> and <code>highlightAllUnder</code> methods actually highlight.",owner:"RunDevelopment",noCSS:!0},treeview:{title:"Treeview",description:"A language with special styles to highlight file system tree structures.",owner:"Golmote"}}})},8722:(e,t,n)=>{const r=n(6969),o=n(8380),a=new Set;function i(e){void 0===e?e=Object.keys(r.languages).filter((e=>"meta"!=e)):Array.isArray(e)||(e=[e]);const t=[...a,...Object.keys(Prism.languages)];o(r,e,t).load((e=>{if(!(e in r.languages))return void(i.silent||console.warn("Language does not exist: "+e));const t="./prism-"+e;delete n.c[n(3157).resolve(t)],delete Prism.languages[e],n(3157)(t),a.add(e)}))}i.silent=!1,e.exports=i},9700:()=>{!function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,r,o,a){if(n.language===r){var i=n.tokenStack=[];n.code=n.code.replace(o,(function(e){if("function"==typeof a&&!a(e))return e;for(var o,s=i.length;-1!==n.code.indexOf(o=t(r,s));)++s;return i[s]=e,o})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,r){if(n.language===r&&n.tokenStack){n.grammar=e.languages[r];var o=0,a=Object.keys(n.tokenStack);!function i(s){for(var l=0;l<s.length&&!(o>=a.length);l++){var c=s[l];if("string"==typeof c||c.content&&"string"==typeof c.content){var u=a[o],d=n.tokenStack[u],p="string"==typeof c?c:c.content,f=t(r,u),g=p.indexOf(f);if(g>-1){++o;var m=p.substring(0,g),h=new e.Token(r,e.tokenize(d,n.grammar),"language-"+r,d),y=p.substring(g+f.length),b=[];m&&b.push.apply(b,i([m])),b.push(h),y&&b.push.apply(b,i([y])),"string"==typeof c?s.splice.apply(s,[l,1].concat(b)):c.content=b}}else c.content&&i(c.content)}return s}(n.tokens)}}}})}(Prism)},8692:(e,t,n)=>{var r={"./":8722};function o(e){var t=a(e);return n(t)}function a(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}o.keys=function(){return Object.keys(r)},o.resolve=a,e.exports=o,o.id=8692},3157:(e,t,n)=>{var r={"./":8722};function o(e){var t=a(e);return n(t)}function a(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}o.keys=function(){return Object.keys(r)},o.resolve=a,e.exports=o,o.id=3157},8380:e=>{"use strict";var t=function(){var e=function(){};function t(e,t){Array.isArray(e)?e.forEach(t):null!=e&&t(e,0)}function n(e){for(var t={},n=0,r=e.length;n<r;n++)t[e[n]]=!0;return t}function r(e){var n={},r=[];function o(r,a){if(!(r in n)){a.push(r);var i=a.indexOf(r);if(i<a.length-1)throw new Error("Circular dependency: "+a.slice(i).join(" -> "));var s={},l=e[r];if(l){function c(t){if(!(t in e))throw new Error(r+" depends on an unknown component "+t);if(!(t in s))for(var i in o(t,a),s[t]=!0,n[t])s[i]=!0}t(l.require,c),t(l.optional,c),t(l.modify,c)}n[r]=s,a.pop()}}return function(e){var t=n[e];return t||(o(e,r),t=n[e]),t}}function o(e){for(var t in e)return!0;return!1}return function(a,i,s){var l=function(e){var t={};for(var n in e){var r=e[n];for(var o in r)if("meta"!=o){var a=r[o];t[o]="string"==typeof a?{title:a}:a}}return t}(a),c=function(e){var n;return function(r){if(r in e)return r;if(!n)for(var o in n={},e){var a=e[o];t(a&&a.alias,(function(t){if(t in n)throw new Error(t+" cannot be alias for both "+o+" and "+n[t]);if(t in e)throw new Error(t+" cannot be alias of "+o+" because it is a component.");n[t]=o}))}return n[r]||r}}(l);i=i.map(c),s=(s||[]).map(c);var u=n(i),d=n(s);i.forEach((function e(n){var r=l[n];t(r&&r.require,(function(t){t in d||(u[t]=!0,e(t))}))}));for(var p,f=r(l),g=u;o(g);){for(var m in p={},g){var h=l[m];t(h&&h.modify,(function(e){e in d&&(p[e]=!0)}))}for(var y in d)if(!(y in u))for(var b in f(y))if(b in u){p[y]=!0;break}for(var v in g=p)u[v]=!0}var w={getIds:function(){var e=[];return w.load((function(t){e.push(t)})),e},load:function(t,n){return function(t,n,r,o){var a=o?o.series:void 0,i=o?o.parallel:e,s={},l={};function c(e){if(e in s)return s[e];l[e]=!0;var o,u=[];for(var d in t(e))d in n&&u.push(d);if(0===u.length)o=r(e);else{var p=i(u.map((function(e){var t=c(e);return delete l[e],t})));a?o=a(p,(function(){return r(e)})):r(e)}return s[e]=o}for(var u in n)c(u);var d=[];for(var p in l)d.push(s[p]);return i(d)}(f,u,t,n)}};return w}}();e.exports=t},2694:(e,t,n)=>{"use strict";var r=n(6925);function o(){}function a(){}a.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,a,i){if(i!==r){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:a,resetWarningCache:o};return n.PropTypes=n,n}},5556:(e,t,n)=>{e.exports=n(2694)()},6925:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},2551:(e,t,n)=>{"use strict";var r=n(6540),o=n(9982);function a(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n<arguments.length;n++)t+="&args[]="+encodeURIComponent(arguments[n]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var i=new Set,s={};function l(e,t){c(e,t),c(e+"Capture",t)}function c(e,t){for(s[e]=t,e=0;e<t.length;e++)i.add(t[e])}var u=!("undefined"==typeof window||void 0===window.document||void 0===window.document.createElement),d=Object.prototype.hasOwnProperty,p=/^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,f={},g={};function m(e,t,n,r,o,a,i){this.acceptsBooleans=2===t||3===t||4===t,this.attributeName=r,this.attributeNamespace=o,this.mustUseProperty=n,this.propertyName=e,this.type=t,this.sanitizeURL=a,this.removeEmptyString=i}var h={};"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach((function(e){h[e]=new m(e,0,!1,e,null,!1,!1)})),[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach((function(e){var t=e[0];h[t]=new m(t,1,!1,e[1],null,!1,!1)})),["contentEditable","draggable","spellCheck","value"].forEach((function(e){h[e]=new m(e,2,!1,e.toLowerCase(),null,!1,!1)})),["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach((function(e){h[e]=new m(e,2,!1,e,null,!1,!1)})),"allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach((function(e){h[e]=new m(e,3,!1,e.toLowerCase(),null,!1,!1)})),["checked","multiple","muted","selected"].forEach((function(e){h[e]=new m(e,3,!0,e,null,!1,!1)})),["capture","download"].forEach((function(e){h[e]=new m(e,4,!1,e,null,!1,!1)})),["cols","rows","size","span"].forEach((function(e){h[e]=new m(e,6,!1,e,null,!1,!1)})),["rowSpan","start"].forEach((function(e){h[e]=new m(e,5,!1,e.toLowerCase(),null,!1,!1)}));var y=/[\-:]([a-z])/g;function b(e){return e[1].toUpperCase()}function v(e,t,n,r){var o=h.hasOwnProperty(t)?h[t]:null;(null!==o?0!==o.type:r||!(2<t.length)||"o"!==t[0]&&"O"!==t[0]||"n"!==t[1]&&"N"!==t[1])&&(function(e,t,n,r){if(null==t||function(e,t,n,r){if(null!==n&&0===n.type)return!1;switch(typeof t){case"function":case"symbol":return!0;case"boolean":return!r&&(null!==n?!n.acceptsBooleans:"data-"!==(e=e.toLowerCase().slice(0,5))&&"aria-"!==e);default:return!1}}(e,t,n,r))return!0;if(r)return!1;if(null!==n)switch(n.type){case 3:return!t;case 4:return!1===t;case 5:return isNaN(t);case 6:return isNaN(t)||1>t}return!1}(t,n,o,r)&&(n=null),r||null===o?function(e){return!!d.call(g,e)||!d.call(f,e)&&(p.test(e)?g[e]=!0:(f[e]=!0,!1))}(t)&&(null===n?e.removeAttribute(t):e.setAttribute(t,""+n)):o.mustUseProperty?e[o.propertyName]=null===n?3!==o.type&&"":n:(t=o.attributeName,r=o.attributeNamespace,null===n?e.removeAttribute(t):(n=3===(o=o.type)||4===o&&!0===n?"":""+n,r?e.setAttributeNS(r,t,n):e.setAttribute(t,n))))}"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach((function(e){var t=e.replace(y,b);h[t]=new m(t,1,!1,e,null,!1,!1)})),"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach((function(e){var t=e.replace(y,b);h[t]=new m(t,1,!1,e,"http://www.w3.org/1999/xlink",!1,!1)})),["xml:base","xml:lang","xml:space"].forEach((function(e){var t=e.replace(y,b);h[t]=new m(t,1,!1,e,"http://www.w3.org/XML/1998/namespace",!1,!1)})),["tabIndex","crossOrigin"].forEach((function(e){h[e]=new m(e,1,!1,e.toLowerCase(),null,!1,!1)})),h.xlinkHref=new m("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0,!1),["src","href","action","formAction"].forEach((function(e){h[e]=new m(e,1,!1,e.toLowerCase(),null,!0,!0)}));var w=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,k=Symbol.for("react.element"),x=Symbol.for("react.portal"),S=Symbol.for("react.fragment"),_=Symbol.for("react.strict_mode"),E=Symbol.for("react.profiler"),C=Symbol.for("react.provider"),A=Symbol.for("react.context"),T=Symbol.for("react.forward_ref"),j=Symbol.for("react.suspense"),R=Symbol.for("react.suspense_list"),P=Symbol.for("react.memo"),L=Symbol.for("react.lazy");Symbol.for("react.scope"),Symbol.for("react.debug_trace_mode");var N=Symbol.for("react.offscreen");Symbol.for("react.legacy_hidden"),Symbol.for("react.cache"),Symbol.for("react.tracing_marker");var O=Symbol.iterator;function D(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=O&&e[O]||e["@@iterator"])?e:null}var I,M=Object.assign;function F(e){if(void 0===I)try{throw Error()}catch(n){var t=n.stack.trim().match(/\n( *(at )?)/);I=t&&t[1]||""}return"\n"+I+e}var z=!1;function B(e,t){if(!e||z)return"";z=!0;var n=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{if(t)if(t=function(){throw Error()},Object.defineProperty(t.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(t,[])}catch(c){var r=c}Reflect.construct(e,[],t)}else{try{t.call()}catch(c){r=c}e.call(t.prototype)}else{try{throw Error()}catch(c){r=c}e()}}catch(c){if(c&&r&&"string"==typeof c.stack){for(var o=c.stack.split("\n"),a=r.stack.split("\n"),i=o.length-1,s=a.length-1;1<=i&&0<=s&&o[i]!==a[s];)s--;for(;1<=i&&0<=s;i--,s--)if(o[i]!==a[s]){if(1!==i||1!==s)do{if(i--,0>--s||o[i]!==a[s]){var l="\n"+o[i].replace(" at new "," at ");return e.displayName&&l.includes("<anonymous>")&&(l=l.replace("<anonymous>",e.displayName)),l}}while(1<=i&&0<=s);break}}}finally{z=!1,Error.prepareStackTrace=n}return(e=e?e.displayName||e.name:"")?F(e):""}function $(e){switch(e.tag){case 5:return F(e.type);case 16:return F("Lazy");case 13:return F("Suspense");case 19:return F("SuspenseList");case 0:case 2:case 15:return e=B(e.type,!1);case 11:return e=B(e.type.render,!1);case 1:return e=B(e.type,!0);default:return""}}function U(e){if(null==e)return null;if("function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case S:return"Fragment";case x:return"Portal";case E:return"Profiler";case _:return"StrictMode";case j:return"Suspense";case R:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case A:return(e.displayName||"Context")+".Consumer";case C:return(e._context.displayName||"Context")+".Provider";case T:var t=e.render;return(e=e.displayName)||(e=""!==(e=t.displayName||t.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case P:return null!==(t=e.displayName||null)?t:U(e.type)||"Memo";case L:t=e._payload,e=e._init;try{return U(e(t))}catch(n){}}return null}function q(e){var t=e.type;switch(e.tag){case 24:return"Cache";case 9:return(t.displayName||"Context")+".Consumer";case 10:return(t._context.displayName||"Context")+".Provider";case 18:return"DehydratedFragment";case 11:return e=(e=t.render).displayName||e.name||"",t.displayName||(""!==e?"ForwardRef("+e+")":"ForwardRef");case 7:return"Fragment";case 5:return t;case 4:return"Portal";case 3:return"Root";case 6:return"Text";case 16:return U(t);case 8:return t===_?"StrictMode":"Mode";case 22:return"Offscreen";case 12:return"Profiler";case 21:return"Scope";case 13:return"Suspense";case 19:return"SuspenseList";case 25:return"TracingMarker";case 1:case 0:case 17:case 2:case 14:case 15:if("function"==typeof t)return t.displayName||t.name||null;if("string"==typeof t)return t}return null}function G(e){switch(typeof e){case"boolean":case"number":case"string":case"undefined":case"object":return e;default:return""}}function H(e){var t=e.type;return(e=e.nodeName)&&"input"===e.toLowerCase()&&("checkbox"===t||"radio"===t)}function V(e){e._valueTracker||(e._valueTracker=function(e){var t=H(e)?"checked":"value",n=Object.getOwnPropertyDescriptor(e.constructor.prototype,t),r=""+e[t];if(!e.hasOwnProperty(t)&&void 0!==n&&"function"==typeof n.get&&"function"==typeof n.set){var o=n.get,a=n.set;return Object.defineProperty(e,t,{configurable:!0,get:function(){return o.call(this)},set:function(e){r=""+e,a.call(this,e)}}),Object.defineProperty(e,t,{enumerable:n.enumerable}),{getValue:function(){return r},setValue:function(e){r=""+e},stopTracking:function(){e._valueTracker=null,delete e[t]}}}}(e))}function W(e){if(!e)return!1;var t=e._valueTracker;if(!t)return!0;var n=t.getValue(),r="";return e&&(r=H(e)?e.checked?"true":"false":e.value),(e=r)!==n&&(t.setValue(e),!0)}function K(e){if(void 0===(e=e||("undefined"!=typeof document?document:void 0)))return null;try{return e.activeElement||e.body}catch(t){return e.body}}function Q(e,t){var n=t.checked;return M({},t,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:null!=n?n:e._wrapperState.initialChecked})}function Y(e,t){var n=null==t.defaultValue?"":t.defaultValue,r=null!=t.checked?t.checked:t.defaultChecked;n=G(null!=t.value?t.value:n),e._wrapperState={initialChecked:r,initialValue:n,controlled:"checkbox"===t.type||"radio"===t.type?null!=t.checked:null!=t.value}}function Z(e,t){null!=(t=t.checked)&&v(e,"checked",t,!1)}function X(e,t){Z(e,t);var n=G(t.value),r=t.type;if(null!=n)"number"===r?(0===n&&""===e.value||e.value!=n)&&(e.value=""+n):e.value!==""+n&&(e.value=""+n);else if("submit"===r||"reset"===r)return void e.removeAttribute("value");t.hasOwnProperty("value")?ee(e,t.type,n):t.hasOwnProperty("defaultValue")&&ee(e,t.type,G(t.defaultValue)),null==t.checked&&null!=t.defaultChecked&&(e.defaultChecked=!!t.defaultChecked)}function J(e,t,n){if(t.hasOwnProperty("value")||t.hasOwnProperty("defaultValue")){var r=t.type;if(!("submit"!==r&&"reset"!==r||void 0!==t.value&&null!==t.value))return;t=""+e._wrapperState.initialValue,n||t===e.value||(e.value=t),e.defaultValue=t}""!==(n=e.name)&&(e.name=""),e.defaultChecked=!!e._wrapperState.initialChecked,""!==n&&(e.name=n)}function ee(e,t,n){"number"===t&&K(e.ownerDocument)===e||(null==n?e.defaultValue=""+e._wrapperState.initialValue:e.defaultValue!==""+n&&(e.defaultValue=""+n))}var te=Array.isArray;function ne(e,t,n,r){if(e=e.options,t){t={};for(var o=0;o<n.length;o++)t["$"+n[o]]=!0;for(n=0;n<e.length;n++)o=t.hasOwnProperty("$"+e[n].value),e[n].selected!==o&&(e[n].selected=o),o&&r&&(e[n].defaultSelected=!0)}else{for(n=""+G(n),t=null,o=0;o<e.length;o++){if(e[o].value===n)return e[o].selected=!0,void(r&&(e[o].defaultSelected=!0));null!==t||e[o].disabled||(t=e[o])}null!==t&&(t.selected=!0)}}function re(e,t){if(null!=t.dangerouslySetInnerHTML)throw Error(a(91));return M({},t,{value:void 0,defaultValue:void 0,children:""+e._wrapperState.initialValue})}function oe(e,t){var n=t.value;if(null==n){if(n=t.children,t=t.defaultValue,null!=n){if(null!=t)throw Error(a(92));if(te(n)){if(1<n.length)throw Error(a(93));n=n[0]}t=n}null==t&&(t=""),n=t}e._wrapperState={initialValue:G(n)}}function ae(e,t){var n=G(t.value),r=G(t.defaultValue);null!=n&&((n=""+n)!==e.value&&(e.value=n),null==t.defaultValue&&e.defaultValue!==n&&(e.defaultValue=n)),null!=r&&(e.defaultValue=""+r)}function ie(e){var t=e.textContent;t===e._wrapperState.initialValue&&""!==t&&null!==t&&(e.value=t)}function se(e){switch(e){case"svg":return"http://www.w3.org/2000/svg";case"math":return"http://www.w3.org/1998/Math/MathML";default:return"http://www.w3.org/1999/xhtml"}}function le(e,t){return null==e||"http://www.w3.org/1999/xhtml"===e?se(t):"http://www.w3.org/2000/svg"===e&&"foreignObject"===t?"http://www.w3.org/1999/xhtml":e}var ce,ue,de=(ue=function(e,t){if("http://www.w3.org/2000/svg"!==e.namespaceURI||"innerHTML"in e)e.innerHTML=t;else{for((ce=ce||document.createElement("div")).innerHTML="<svg>"+t.valueOf().toString()+"</svg>",t=ce.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;t.firstChild;)e.appendChild(t.firstChild)}},"undefined"!=typeof MSApp&&MSApp.execUnsafeLocalFunction?function(e,t,n,r){MSApp.execUnsafeLocalFunction((function(){return ue(e,t)}))}:ue);function pe(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t}var fe={animationIterationCount:!0,aspectRatio:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},ge=["Webkit","ms","Moz","O"];function me(e,t,n){return null==t||"boolean"==typeof t||""===t?"":n||"number"!=typeof t||0===t||fe.hasOwnProperty(e)&&fe[e]?(""+t).trim():t+"px"}function he(e,t){for(var n in e=e.style,t)if(t.hasOwnProperty(n)){var r=0===n.indexOf("--"),o=me(n,t[n],r);"float"===n&&(n="cssFloat"),r?e.setProperty(n,o):e[n]=o}}Object.keys(fe).forEach((function(e){ge.forEach((function(t){t=t+e.charAt(0).toUpperCase()+e.substring(1),fe[t]=fe[e]}))}));var ye=M({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0});function be(e,t){if(t){if(ye[e]&&(null!=t.children||null!=t.dangerouslySetInnerHTML))throw Error(a(137,e));if(null!=t.dangerouslySetInnerHTML){if(null!=t.children)throw Error(a(60));if("object"!=typeof t.dangerouslySetInnerHTML||!("__html"in t.dangerouslySetInnerHTML))throw Error(a(61))}if(null!=t.style&&"object"!=typeof t.style)throw Error(a(62))}}function ve(e,t){if(-1===e.indexOf("-"))return"string"==typeof t.is;switch(e){case"annotation-xml":case"color-profile":case"font-face":case"font-face-src":case"font-face-uri":case"font-face-format":case"font-face-name":case"missing-glyph":return!1;default:return!0}}var we=null;function ke(e){return(e=e.target||e.srcElement||window).correspondingUseElement&&(e=e.correspondingUseElement),3===e.nodeType?e.parentNode:e}var xe=null,Se=null,_e=null;function Ee(e){if(e=wo(e)){if("function"!=typeof xe)throw Error(a(280));var t=e.stateNode;t&&(t=xo(t),xe(e.stateNode,e.type,t))}}function Ce(e){Se?_e?_e.push(e):_e=[e]:Se=e}function Ae(){if(Se){var e=Se,t=_e;if(_e=Se=null,Ee(e),t)for(e=0;e<t.length;e++)Ee(t[e])}}function Te(e,t){return e(t)}function je(){}var Re=!1;function Pe(e,t,n){if(Re)return e(t,n);Re=!0;try{return Te(e,t,n)}finally{Re=!1,(null!==Se||null!==_e)&&(je(),Ae())}}function Le(e,t){var n=e.stateNode;if(null===n)return null;var r=xo(n);if(null===r)return null;n=r[t];e:switch(t){case"onClick":case"onClickCapture":case"onDoubleClick":case"onDoubleClickCapture":case"onMouseDown":case"onMouseDownCapture":case"onMouseMove":case"onMouseMoveCapture":case"onMouseUp":case"onMouseUpCapture":case"onMouseEnter":(r=!r.disabled)||(r=!("button"===(e=e.type)||"input"===e||"select"===e||"textarea"===e)),e=!r;break e;default:e=!1}if(e)return null;if(n&&"function"!=typeof n)throw Error(a(231,t,typeof n));return n}var Ne=!1;if(u)try{var Oe={};Object.defineProperty(Oe,"passive",{get:function(){Ne=!0}}),window.addEventListener("test",Oe,Oe),window.removeEventListener("test",Oe,Oe)}catch(ue){Ne=!1}function De(e,t,n,r,o,a,i,s,l){var c=Array.prototype.slice.call(arguments,3);try{t.apply(n,c)}catch(u){this.onError(u)}}var Ie=!1,Me=null,Fe=!1,ze=null,Be={onError:function(e){Ie=!0,Me=e}};function $e(e,t,n,r,o,a,i,s,l){Ie=!1,Me=null,De.apply(Be,arguments)}function Ue(e){var t=e,n=e;if(e.alternate)for(;t.return;)t=t.return;else{e=t;do{!!(4098&(t=e).flags)&&(n=t.return),e=t.return}while(e)}return 3===t.tag?n:null}function qe(e){if(13===e.tag){var t=e.memoizedState;if(null===t&&(null!==(e=e.alternate)&&(t=e.memoizedState)),null!==t)return t.dehydrated}return null}function Ge(e){if(Ue(e)!==e)throw Error(a(188))}function He(e){return null!==(e=function(e){var t=e.alternate;if(!t){if(null===(t=Ue(e)))throw Error(a(188));return t!==e?null:e}for(var n=e,r=t;;){var o=n.return;if(null===o)break;var i=o.alternate;if(null===i){if(null!==(r=o.return)){n=r;continue}break}if(o.child===i.child){for(i=o.child;i;){if(i===n)return Ge(o),e;if(i===r)return Ge(o),t;i=i.sibling}throw Error(a(188))}if(n.return!==r.return)n=o,r=i;else{for(var s=!1,l=o.child;l;){if(l===n){s=!0,n=o,r=i;break}if(l===r){s=!0,r=o,n=i;break}l=l.sibling}if(!s){for(l=i.child;l;){if(l===n){s=!0,n=i,r=o;break}if(l===r){s=!0,r=i,n=o;break}l=l.sibling}if(!s)throw Error(a(189))}}if(n.alternate!==r)throw Error(a(190))}if(3!==n.tag)throw Error(a(188));return n.stateNode.current===n?e:t}(e))?Ve(e):null}function Ve(e){if(5===e.tag||6===e.tag)return e;for(e=e.child;null!==e;){var t=Ve(e);if(null!==t)return t;e=e.sibling}return null}var We=o.unstable_scheduleCallback,Ke=o.unstable_cancelCallback,Qe=o.unstable_shouldYield,Ye=o.unstable_requestPaint,Ze=o.unstable_now,Xe=o.unstable_getCurrentPriorityLevel,Je=o.unstable_ImmediatePriority,et=o.unstable_UserBlockingPriority,tt=o.unstable_NormalPriority,nt=o.unstable_LowPriority,rt=o.unstable_IdlePriority,ot=null,at=null;var it=Math.clz32?Math.clz32:function(e){return e>>>=0,0===e?32:31-(st(e)/lt|0)|0},st=Math.log,lt=Math.LN2;var ct=64,ut=4194304;function dt(e){switch(e&-e){case 1:return 1;case 2:return 2;case 4:return 4;case 8:return 8;case 16:return 16;case 32:return 32;case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return 4194240&e;case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:return 130023424&e;case 134217728:return 134217728;case 268435456:return 268435456;case 536870912:return 536870912;case 1073741824:return 1073741824;default:return e}}function pt(e,t){var n=e.pendingLanes;if(0===n)return 0;var r=0,o=e.suspendedLanes,a=e.pingedLanes,i=268435455&n;if(0!==i){var s=i&~o;0!==s?r=dt(s):0!==(a&=i)&&(r=dt(a))}else 0!==(i=n&~o)?r=dt(i):0!==a&&(r=dt(a));if(0===r)return 0;if(0!==t&&t!==r&&!(t&o)&&((o=r&-r)>=(a=t&-t)||16===o&&4194240&a))return t;if(4&r&&(r|=16&n),0!==(t=e.entangledLanes))for(e=e.entanglements,t&=r;0<t;)o=1<<(n=31-it(t)),r|=e[n],t&=~o;return r}function ft(e,t){switch(e){case 1:case 2:case 4:return t+250;case 8:case 16:case 32:case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return t+5e3;default:return-1}}function gt(e){return 0!==(e=-1073741825&e.pendingLanes)?e:1073741824&e?1073741824:0}function mt(){var e=ct;return!(4194240&(ct<<=1))&&(ct=64),e}function ht(e){for(var t=[],n=0;31>n;n++)t.push(e);return t}function yt(e,t,n){e.pendingLanes|=t,536870912!==t&&(e.suspendedLanes=0,e.pingedLanes=0),(e=e.eventTimes)[t=31-it(t)]=n}function bt(e,t){var n=e.entangledLanes|=t;for(e=e.entanglements;n;){var r=31-it(n),o=1<<r;o&t|e[r]&t&&(e[r]|=t),n&=~o}}var vt=0;function wt(e){return 1<(e&=-e)?4<e?268435455&e?16:536870912:4:1}var kt,xt,St,_t,Et,Ct=!1,At=[],Tt=null,jt=null,Rt=null,Pt=new Map,Lt=new Map,Nt=[],Ot="mousedown mouseup touchcancel touchend touchstart auxclick dblclick pointercancel pointerdown pointerup dragend dragstart drop compositionend compositionstart keydown keypress keyup input textInput copy cut paste click change contextmenu reset submit".split(" ");function Dt(e,t){switch(e){case"focusin":case"focusout":Tt=null;break;case"dragenter":case"dragleave":jt=null;break;case"mouseover":case"mouseout":Rt=null;break;case"pointerover":case"pointerout":Pt.delete(t.pointerId);break;case"gotpointercapture":case"lostpointercapture":Lt.delete(t.pointerId)}}function It(e,t,n,r,o,a){return null===e||e.nativeEvent!==a?(e={blockedOn:t,domEventName:n,eventSystemFlags:r,nativeEvent:a,targetContainers:[o]},null!==t&&(null!==(t=wo(t))&&xt(t)),e):(e.eventSystemFlags|=r,t=e.targetContainers,null!==o&&-1===t.indexOf(o)&&t.push(o),e)}function Mt(e){var t=vo(e.target);if(null!==t){var n=Ue(t);if(null!==n)if(13===(t=n.tag)){if(null!==(t=qe(n)))return e.blockedOn=t,void Et(e.priority,(function(){St(n)}))}else if(3===t&&n.stateNode.current.memoizedState.isDehydrated)return void(e.blockedOn=3===n.tag?n.stateNode.containerInfo:null)}e.blockedOn=null}function Ft(e){if(null!==e.blockedOn)return!1;for(var t=e.targetContainers;0<t.length;){var n=Qt(e.domEventName,e.eventSystemFlags,t[0],e.nativeEvent);if(null!==n)return null!==(t=wo(n))&&xt(t),e.blockedOn=n,!1;var r=new(n=e.nativeEvent).constructor(n.type,n);we=r,n.target.dispatchEvent(r),we=null,t.shift()}return!0}function zt(e,t,n){Ft(e)&&n.delete(t)}function Bt(){Ct=!1,null!==Tt&&Ft(Tt)&&(Tt=null),null!==jt&&Ft(jt)&&(jt=null),null!==Rt&&Ft(Rt)&&(Rt=null),Pt.forEach(zt),Lt.forEach(zt)}function $t(e,t){e.blockedOn===t&&(e.blockedOn=null,Ct||(Ct=!0,o.unstable_scheduleCallback(o.unstable_NormalPriority,Bt)))}function Ut(e){function t(t){return $t(t,e)}if(0<At.length){$t(At[0],e);for(var n=1;n<At.length;n++){var r=At[n];r.blockedOn===e&&(r.blockedOn=null)}}for(null!==Tt&&$t(Tt,e),null!==jt&&$t(jt,e),null!==Rt&&$t(Rt,e),Pt.forEach(t),Lt.forEach(t),n=0;n<Nt.length;n++)(r=Nt[n]).blockedOn===e&&(r.blockedOn=null);for(;0<Nt.length&&null===(n=Nt[0]).blockedOn;)Mt(n),null===n.blockedOn&&Nt.shift()}var qt=w.ReactCurrentBatchConfig,Gt=!0;function Ht(e,t,n,r){var o=vt,a=qt.transition;qt.transition=null;try{vt=1,Wt(e,t,n,r)}finally{vt=o,qt.transition=a}}function Vt(e,t,n,r){var o=vt,a=qt.transition;qt.transition=null;try{vt=4,Wt(e,t,n,r)}finally{vt=o,qt.transition=a}}function Wt(e,t,n,r){if(Gt){var o=Qt(e,t,n,r);if(null===o)Gr(e,t,r,Kt,n),Dt(e,r);else if(function(e,t,n,r,o){switch(t){case"focusin":return Tt=It(Tt,e,t,n,r,o),!0;case"dragenter":return jt=It(jt,e,t,n,r,o),!0;case"mouseover":return Rt=It(Rt,e,t,n,r,o),!0;case"pointerover":var a=o.pointerId;return Pt.set(a,It(Pt.get(a)||null,e,t,n,r,o)),!0;case"gotpointercapture":return a=o.pointerId,Lt.set(a,It(Lt.get(a)||null,e,t,n,r,o)),!0}return!1}(o,e,t,n,r))r.stopPropagation();else if(Dt(e,r),4&t&&-1<Ot.indexOf(e)){for(;null!==o;){var a=wo(o);if(null!==a&&kt(a),null===(a=Qt(e,t,n,r))&&Gr(e,t,r,Kt,n),a===o)break;o=a}null!==o&&r.stopPropagation()}else Gr(e,t,r,null,n)}}var Kt=null;function Qt(e,t,n,r){if(Kt=null,null!==(e=vo(e=ke(r))))if(null===(t=Ue(e)))e=null;else if(13===(n=t.tag)){if(null!==(e=qe(t)))return e;e=null}else if(3===n){if(t.stateNode.current.memoizedState.isDehydrated)return 3===t.tag?t.stateNode.containerInfo:null;e=null}else t!==e&&(e=null);return Kt=e,null}function Yt(e){switch(e){case"cancel":case"click":case"close":case"contextmenu":case"copy":case"cut":case"auxclick":case"dblclick":case"dragend":case"dragstart":case"drop":case"focusin":case"focusout":case"input":case"invalid":case"keydown":case"keypress":case"keyup":case"mousedown":case"mouseup":case"paste":case"pause":case"play":case"pointercancel":case"pointerdown":case"pointerup":case"ratechange":case"reset":case"resize":case"seeked":case"submit":case"touchcancel":case"touchend":case"touchstart":case"volumechange":case"change":case"selectionchange":case"textInput":case"compositionstart":case"compositionend":case"compositionupdate":case"beforeblur":case"afterblur":case"beforeinput":case"blur":case"fullscreenchange":case"focus":case"hashchange":case"popstate":case"select":case"selectstart":return 1;case"drag":case"dragenter":case"dragexit":case"dragleave":case"dragover":case"mousemove":case"mouseout":case"mouseover":case"pointermove":case"pointerout":case"pointerover":case"scroll":case"toggle":case"touchmove":case"wheel":case"mouseenter":case"mouseleave":case"pointerenter":case"pointerleave":return 4;case"message":switch(Xe()){case Je:return 1;case et:return 4;case tt:case nt:return 16;case rt:return 536870912;default:return 16}default:return 16}}var Zt=null,Xt=null,Jt=null;function en(){if(Jt)return Jt;var e,t,n=Xt,r=n.length,o="value"in Zt?Zt.value:Zt.textContent,a=o.length;for(e=0;e<r&&n[e]===o[e];e++);var i=r-e;for(t=1;t<=i&&n[r-t]===o[a-t];t++);return Jt=o.slice(e,1<t?1-t:void 0)}function tn(e){var t=e.keyCode;return"charCode"in e?0===(e=e.charCode)&&13===t&&(e=13):e=t,10===e&&(e=13),32<=e||13===e?e:0}function nn(){return!0}function rn(){return!1}function on(e){function t(t,n,r,o,a){for(var i in this._reactName=t,this._targetInst=r,this.type=n,this.nativeEvent=o,this.target=a,this.currentTarget=null,e)e.hasOwnProperty(i)&&(t=e[i],this[i]=t?t(o):o[i]);return this.isDefaultPrevented=(null!=o.defaultPrevented?o.defaultPrevented:!1===o.returnValue)?nn:rn,this.isPropagationStopped=rn,this}return M(t.prototype,{preventDefault:function(){this.defaultPrevented=!0;var e=this.nativeEvent;e&&(e.preventDefault?e.preventDefault():"unknown"!=typeof e.returnValue&&(e.returnValue=!1),this.isDefaultPrevented=nn)},stopPropagation:function(){var e=this.nativeEvent;e&&(e.stopPropagation?e.stopPropagation():"unknown"!=typeof e.cancelBubble&&(e.cancelBubble=!0),this.isPropagationStopped=nn)},persist:function(){},isPersistent:nn}),t}var an,sn,ln,cn={eventPhase:0,bubbles:0,cancelable:0,timeStamp:function(e){return e.timeStamp||Date.now()},defaultPrevented:0,isTrusted:0},un=on(cn),dn=M({},cn,{view:0,detail:0}),pn=on(dn),fn=M({},dn,{screenX:0,screenY:0,clientX:0,clientY:0,pageX:0,pageY:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,getModifierState:En,button:0,buttons:0,relatedTarget:function(e){return void 0===e.relatedTarget?e.fromElement===e.srcElement?e.toElement:e.fromElement:e.relatedTarget},movementX:function(e){return"movementX"in e?e.movementX:(e!==ln&&(ln&&"mousemove"===e.type?(an=e.screenX-ln.screenX,sn=e.screenY-ln.screenY):sn=an=0,ln=e),an)},movementY:function(e){return"movementY"in e?e.movementY:sn}}),gn=on(fn),mn=on(M({},fn,{dataTransfer:0})),hn=on(M({},dn,{relatedTarget:0})),yn=on(M({},cn,{animationName:0,elapsedTime:0,pseudoElement:0})),bn=M({},cn,{clipboardData:function(e){return"clipboardData"in e?e.clipboardData:window.clipboardData}}),vn=on(bn),wn=on(M({},cn,{data:0})),kn={Esc:"Escape",Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",MozPrintableKey:"Unidentified"},xn={8:"Backspace",9:"Tab",12:"Clear",13:"Enter",16:"Shift",17:"Control",18:"Alt",19:"Pause",20:"CapsLock",27:"Escape",32:" ",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown",45:"Insert",46:"Delete",112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"NumLock",145:"ScrollLock",224:"Meta"},Sn={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"};function _n(e){var t=this.nativeEvent;return t.getModifierState?t.getModifierState(e):!!(e=Sn[e])&&!!t[e]}function En(){return _n}var Cn=M({},dn,{key:function(e){if(e.key){var t=kn[e.key]||e.key;if("Unidentified"!==t)return t}return"keypress"===e.type?13===(e=tn(e))?"Enter":String.fromCharCode(e):"keydown"===e.type||"keyup"===e.type?xn[e.keyCode]||"Unidentified":""},code:0,location:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,repeat:0,locale:0,getModifierState:En,charCode:function(e){return"keypress"===e.type?tn(e):0},keyCode:function(e){return"keydown"===e.type||"keyup"===e.type?e.keyCode:0},which:function(e){return"keypress"===e.type?tn(e):"keydown"===e.type||"keyup"===e.type?e.keyCode:0}}),An=on(Cn),Tn=on(M({},fn,{pointerId:0,width:0,height:0,pressure:0,tangentialPressure:0,tiltX:0,tiltY:0,twist:0,pointerType:0,isPrimary:0})),jn=on(M({},dn,{touches:0,targetTouches:0,changedTouches:0,altKey:0,metaKey:0,ctrlKey:0,shiftKey:0,getModifierState:En})),Rn=on(M({},cn,{propertyName:0,elapsedTime:0,pseudoElement:0})),Pn=M({},fn,{deltaX:function(e){return"deltaX"in e?e.deltaX:"wheelDeltaX"in e?-e.wheelDeltaX:0},deltaY:function(e){return"deltaY"in e?e.deltaY:"wheelDeltaY"in e?-e.wheelDeltaY:"wheelDelta"in e?-e.wheelDelta:0},deltaZ:0,deltaMode:0}),Ln=on(Pn),Nn=[9,13,27,32],On=u&&"CompositionEvent"in window,Dn=null;u&&"documentMode"in document&&(Dn=document.documentMode);var In=u&&"TextEvent"in window&&!Dn,Mn=u&&(!On||Dn&&8<Dn&&11>=Dn),Fn=String.fromCharCode(32),zn=!1;function Bn(e,t){switch(e){case"keyup":return-1!==Nn.indexOf(t.keyCode);case"keydown":return 229!==t.keyCode;case"keypress":case"mousedown":case"focusout":return!0;default:return!1}}function $n(e){return"object"==typeof(e=e.detail)&&"data"in e?e.data:null}var Un=!1;var qn={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};function Gn(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===t?!!qn[e.type]:"textarea"===t}function Hn(e,t,n,r){Ce(r),0<(t=Vr(t,"onChange")).length&&(n=new un("onChange","change",null,n,r),e.push({event:n,listeners:t}))}var Vn=null,Wn=null;function Kn(e){Fr(e,0)}function Qn(e){if(W(ko(e)))return e}function Yn(e,t){if("change"===e)return t}var Zn=!1;if(u){var Xn;if(u){var Jn="oninput"in document;if(!Jn){var er=document.createElement("div");er.setAttribute("oninput","return;"),Jn="function"==typeof er.oninput}Xn=Jn}else Xn=!1;Zn=Xn&&(!document.documentMode||9<document.documentMode)}function tr(){Vn&&(Vn.detachEvent("onpropertychange",nr),Wn=Vn=null)}function nr(e){if("value"===e.propertyName&&Qn(Wn)){var t=[];Hn(t,Wn,e,ke(e)),Pe(Kn,t)}}function rr(e,t,n){"focusin"===e?(tr(),Wn=n,(Vn=t).attachEvent("onpropertychange",nr)):"focusout"===e&&tr()}function or(e){if("selectionchange"===e||"keyup"===e||"keydown"===e)return Qn(Wn)}function ar(e,t){if("click"===e)return Qn(t)}function ir(e,t){if("input"===e||"change"===e)return Qn(t)}var sr="function"==typeof Object.is?Object.is:function(e,t){return e===t&&(0!==e||1/e==1/t)||e!=e&&t!=t};function lr(e,t){if(sr(e,t))return!0;if("object"!=typeof e||null===e||"object"!=typeof t||null===t)return!1;var n=Object.keys(e),r=Object.keys(t);if(n.length!==r.length)return!1;for(r=0;r<n.length;r++){var o=n[r];if(!d.call(t,o)||!sr(e[o],t[o]))return!1}return!0}function cr(e){for(;e&&e.firstChild;)e=e.firstChild;return e}function ur(e,t){var n,r=cr(e);for(e=0;r;){if(3===r.nodeType){if(n=e+r.textContent.length,e<=t&&n>=t)return{node:r,offset:t-e};e=n}e:{for(;r;){if(r.nextSibling){r=r.nextSibling;break e}r=r.parentNode}r=void 0}r=cr(r)}}function dr(e,t){return!(!e||!t)&&(e===t||(!e||3!==e.nodeType)&&(t&&3===t.nodeType?dr(e,t.parentNode):"contains"in e?e.contains(t):!!e.compareDocumentPosition&&!!(16&e.compareDocumentPosition(t))))}function pr(){for(var e=window,t=K();t instanceof e.HTMLIFrameElement;){try{var n="string"==typeof t.contentWindow.location.href}catch(r){n=!1}if(!n)break;t=K((e=t.contentWindow).document)}return t}function fr(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&("text"===e.type||"search"===e.type||"tel"===e.type||"url"===e.type||"password"===e.type)||"textarea"===t||"true"===e.contentEditable)}function gr(e){var t=pr(),n=e.focusedElem,r=e.selectionRange;if(t!==n&&n&&n.ownerDocument&&dr(n.ownerDocument.documentElement,n)){if(null!==r&&fr(n))if(t=r.start,void 0===(e=r.end)&&(e=t),"selectionStart"in n)n.selectionStart=t,n.selectionEnd=Math.min(e,n.value.length);else if((e=(t=n.ownerDocument||document)&&t.defaultView||window).getSelection){e=e.getSelection();var o=n.textContent.length,a=Math.min(r.start,o);r=void 0===r.end?a:Math.min(r.end,o),!e.extend&&a>r&&(o=r,r=a,a=o),o=ur(n,a);var i=ur(n,r);o&&i&&(1!==e.rangeCount||e.anchorNode!==o.node||e.anchorOffset!==o.offset||e.focusNode!==i.node||e.focusOffset!==i.offset)&&((t=t.createRange()).setStart(o.node,o.offset),e.removeAllRanges(),a>r?(e.addRange(t),e.extend(i.node,i.offset)):(t.setEnd(i.node,i.offset),e.addRange(t)))}for(t=[],e=n;e=e.parentNode;)1===e.nodeType&&t.push({element:e,left:e.scrollLeft,top:e.scrollTop});for("function"==typeof n.focus&&n.focus(),n=0;n<t.length;n++)(e=t[n]).element.scrollLeft=e.left,e.element.scrollTop=e.top}}var mr=u&&"documentMode"in document&&11>=document.documentMode,hr=null,yr=null,br=null,vr=!1;function wr(e,t,n){var r=n.window===n?n.document:9===n.nodeType?n:n.ownerDocument;vr||null==hr||hr!==K(r)||("selectionStart"in(r=hr)&&fr(r)?r={start:r.selectionStart,end:r.selectionEnd}:r={anchorNode:(r=(r.ownerDocument&&r.ownerDocument.defaultView||window).getSelection()).anchorNode,anchorOffset:r.anchorOffset,focusNode:r.focusNode,focusOffset:r.focusOffset},br&&lr(br,r)||(br=r,0<(r=Vr(yr,"onSelect")).length&&(t=new un("onSelect","select",null,t,n),e.push({event:t,listeners:r}),t.target=hr)))}function kr(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["Webkit"+e]="webkit"+t,n["Moz"+e]="moz"+t,n}var xr={animationend:kr("Animation","AnimationEnd"),animationiteration:kr("Animation","AnimationIteration"),animationstart:kr("Animation","AnimationStart"),transitionend:kr("Transition","TransitionEnd")},Sr={},_r={};function Er(e){if(Sr[e])return Sr[e];if(!xr[e])return e;var t,n=xr[e];for(t in n)if(n.hasOwnProperty(t)&&t in _r)return Sr[e]=n[t];return e}u&&(_r=document.createElement("div").style,"AnimationEvent"in window||(delete xr.animationend.animation,delete xr.animationiteration.animation,delete xr.animationstart.animation),"TransitionEvent"in window||delete xr.transitionend.transition);var Cr=Er("animationend"),Ar=Er("animationiteration"),Tr=Er("animationstart"),jr=Er("transitionend"),Rr=new Map,Pr="abort auxClick cancel canPlay canPlayThrough click close contextMenu copy cut drag dragEnd dragEnter dragExit dragLeave dragOver dragStart drop durationChange emptied encrypted ended error gotPointerCapture input invalid keyDown keyPress keyUp load loadedData loadedMetadata loadStart lostPointerCapture mouseDown mouseMove mouseOut mouseOver mouseUp paste pause play playing pointerCancel pointerDown pointerMove pointerOut pointerOver pointerUp progress rateChange reset resize seeked seeking stalled submit suspend timeUpdate touchCancel touchEnd touchStart volumeChange scroll toggle touchMove waiting wheel".split(" ");function Lr(e,t){Rr.set(e,t),l(t,[e])}for(var Nr=0;Nr<Pr.length;Nr++){var Or=Pr[Nr];Lr(Or.toLowerCase(),"on"+(Or[0].toUpperCase()+Or.slice(1)))}Lr(Cr,"onAnimationEnd"),Lr(Ar,"onAnimationIteration"),Lr(Tr,"onAnimationStart"),Lr("dblclick","onDoubleClick"),Lr("focusin","onFocus"),Lr("focusout","onBlur"),Lr(jr,"onTransitionEnd"),c("onMouseEnter",["mouseout","mouseover"]),c("onMouseLeave",["mouseout","mouseover"]),c("onPointerEnter",["pointerout","pointerover"]),c("onPointerLeave",["pointerout","pointerover"]),l("onChange","change click focusin focusout input keydown keyup selectionchange".split(" ")),l("onSelect","focusout contextmenu dragend focusin keydown keyup mousedown mouseup selectionchange".split(" ")),l("onBeforeInput",["compositionend","keypress","textInput","paste"]),l("onCompositionEnd","compositionend focusout keydown keypress keyup mousedown".split(" ")),l("onCompositionStart","compositionstart focusout keydown keypress keyup mousedown".split(" ")),l("onCompositionUpdate","compositionupdate focusout keydown keypress keyup mousedown".split(" "));var Dr="abort canplay canplaythrough durationchange emptied encrypted ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange resize seeked seeking stalled suspend timeupdate volumechange waiting".split(" "),Ir=new Set("cancel close invalid load scroll toggle".split(" ").concat(Dr));function Mr(e,t,n){var r=e.type||"unknown-event";e.currentTarget=n,function(e,t,n,r,o,i,s,l,c){if($e.apply(this,arguments),Ie){if(!Ie)throw Error(a(198));var u=Me;Ie=!1,Me=null,Fe||(Fe=!0,ze=u)}}(r,t,void 0,e),e.currentTarget=null}function Fr(e,t){t=!!(4&t);for(var n=0;n<e.length;n++){var r=e[n],o=r.event;r=r.listeners;e:{var a=void 0;if(t)for(var i=r.length-1;0<=i;i--){var s=r[i],l=s.instance,c=s.currentTarget;if(s=s.listener,l!==a&&o.isPropagationStopped())break e;Mr(o,s,c),a=l}else for(i=0;i<r.length;i++){if(l=(s=r[i]).instance,c=s.currentTarget,s=s.listener,l!==a&&o.isPropagationStopped())break e;Mr(o,s,c),a=l}}}if(Fe)throw e=ze,Fe=!1,ze=null,e}function zr(e,t){var n=t[ho];void 0===n&&(n=t[ho]=new Set);var r=e+"__bubble";n.has(r)||(qr(t,e,2,!1),n.add(r))}function Br(e,t,n){var r=0;t&&(r|=4),qr(n,e,r,t)}var $r="_reactListening"+Math.random().toString(36).slice(2);function Ur(e){if(!e[$r]){e[$r]=!0,i.forEach((function(t){"selectionchange"!==t&&(Ir.has(t)||Br(t,!1,e),Br(t,!0,e))}));var t=9===e.nodeType?e:e.ownerDocument;null===t||t[$r]||(t[$r]=!0,Br("selectionchange",!1,t))}}function qr(e,t,n,r){switch(Yt(t)){case 1:var o=Ht;break;case 4:o=Vt;break;default:o=Wt}n=o.bind(null,t,n,e),o=void 0,!Ne||"touchstart"!==t&&"touchmove"!==t&&"wheel"!==t||(o=!0),r?void 0!==o?e.addEventListener(t,n,{capture:!0,passive:o}):e.addEventListener(t,n,!0):void 0!==o?e.addEventListener(t,n,{passive:o}):e.addEventListener(t,n,!1)}function Gr(e,t,n,r,o){var a=r;if(!(1&t||2&t||null===r))e:for(;;){if(null===r)return;var i=r.tag;if(3===i||4===i){var s=r.stateNode.containerInfo;if(s===o||8===s.nodeType&&s.parentNode===o)break;if(4===i)for(i=r.return;null!==i;){var l=i.tag;if((3===l||4===l)&&((l=i.stateNode.containerInfo)===o||8===l.nodeType&&l.parentNode===o))return;i=i.return}for(;null!==s;){if(null===(i=vo(s)))return;if(5===(l=i.tag)||6===l){r=a=i;continue e}s=s.parentNode}}r=r.return}Pe((function(){var r=a,o=ke(n),i=[];e:{var s=Rr.get(e);if(void 0!==s){var l=un,c=e;switch(e){case"keypress":if(0===tn(n))break e;case"keydown":case"keyup":l=An;break;case"focusin":c="focus",l=hn;break;case"focusout":c="blur",l=hn;break;case"beforeblur":case"afterblur":l=hn;break;case"click":if(2===n.button)break e;case"auxclick":case"dblclick":case"mousedown":case"mousemove":case"mouseup":case"mouseout":case"mouseover":case"contextmenu":l=gn;break;case"drag":case"dragend":case"dragenter":case"dragexit":case"dragleave":case"dragover":case"dragstart":case"drop":l=mn;break;case"touchcancel":case"touchend":case"touchmove":case"touchstart":l=jn;break;case Cr:case Ar:case Tr:l=yn;break;case jr:l=Rn;break;case"scroll":l=pn;break;case"wheel":l=Ln;break;case"copy":case"cut":case"paste":l=vn;break;case"gotpointercapture":case"lostpointercapture":case"pointercancel":case"pointerdown":case"pointermove":case"pointerout":case"pointerover":case"pointerup":l=Tn}var u=!!(4&t),d=!u&&"scroll"===e,p=u?null!==s?s+"Capture":null:s;u=[];for(var f,g=r;null!==g;){var m=(f=g).stateNode;if(5===f.tag&&null!==m&&(f=m,null!==p&&(null!=(m=Le(g,p))&&u.push(Hr(g,m,f)))),d)break;g=g.return}0<u.length&&(s=new l(s,c,null,n,o),i.push({event:s,listeners:u}))}}if(!(7&t)){if(l="mouseout"===e||"pointerout"===e,(!(s="mouseover"===e||"pointerover"===e)||n===we||!(c=n.relatedTarget||n.fromElement)||!vo(c)&&!c[mo])&&(l||s)&&(s=o.window===o?o:(s=o.ownerDocument)?s.defaultView||s.parentWindow:window,l?(l=r,null!==(c=(c=n.relatedTarget||n.toElement)?vo(c):null)&&(c!==(d=Ue(c))||5!==c.tag&&6!==c.tag)&&(c=null)):(l=null,c=r),l!==c)){if(u=gn,m="onMouseLeave",p="onMouseEnter",g="mouse","pointerout"!==e&&"pointerover"!==e||(u=Tn,m="onPointerLeave",p="onPointerEnter",g="pointer"),d=null==l?s:ko(l),f=null==c?s:ko(c),(s=new u(m,g+"leave",l,n,o)).target=d,s.relatedTarget=f,m=null,vo(o)===r&&((u=new u(p,g+"enter",c,n,o)).target=f,u.relatedTarget=d,m=u),d=m,l&&c)e:{for(p=c,g=0,f=u=l;f;f=Wr(f))g++;for(f=0,m=p;m;m=Wr(m))f++;for(;0<g-f;)u=Wr(u),g--;for(;0<f-g;)p=Wr(p),f--;for(;g--;){if(u===p||null!==p&&u===p.alternate)break e;u=Wr(u),p=Wr(p)}u=null}else u=null;null!==l&&Kr(i,s,l,u,!1),null!==c&&null!==d&&Kr(i,d,c,u,!0)}if("select"===(l=(s=r?ko(r):window).nodeName&&s.nodeName.toLowerCase())||"input"===l&&"file"===s.type)var h=Yn;else if(Gn(s))if(Zn)h=ir;else{h=or;var y=rr}else(l=s.nodeName)&&"input"===l.toLowerCase()&&("checkbox"===s.type||"radio"===s.type)&&(h=ar);switch(h&&(h=h(e,r))?Hn(i,h,n,o):(y&&y(e,s,r),"focusout"===e&&(y=s._wrapperState)&&y.controlled&&"number"===s.type&&ee(s,"number",s.value)),y=r?ko(r):window,e){case"focusin":(Gn(y)||"true"===y.contentEditable)&&(hr=y,yr=r,br=null);break;case"focusout":br=yr=hr=null;break;case"mousedown":vr=!0;break;case"contextmenu":case"mouseup":case"dragend":vr=!1,wr(i,n,o);break;case"selectionchange":if(mr)break;case"keydown":case"keyup":wr(i,n,o)}var b;if(On)e:{switch(e){case"compositionstart":var v="onCompositionStart";break e;case"compositionend":v="onCompositionEnd";break e;case"compositionupdate":v="onCompositionUpdate";break e}v=void 0}else Un?Bn(e,n)&&(v="onCompositionEnd"):"keydown"===e&&229===n.keyCode&&(v="onCompositionStart");v&&(Mn&&"ko"!==n.locale&&(Un||"onCompositionStart"!==v?"onCompositionEnd"===v&&Un&&(b=en()):(Xt="value"in(Zt=o)?Zt.value:Zt.textContent,Un=!0)),0<(y=Vr(r,v)).length&&(v=new wn(v,e,null,n,o),i.push({event:v,listeners:y}),b?v.data=b:null!==(b=$n(n))&&(v.data=b))),(b=In?function(e,t){switch(e){case"compositionend":return $n(t);case"keypress":return 32!==t.which?null:(zn=!0,Fn);case"textInput":return(e=t.data)===Fn&&zn?null:e;default:return null}}(e,n):function(e,t){if(Un)return"compositionend"===e||!On&&Bn(e,t)?(e=en(),Jt=Xt=Zt=null,Un=!1,e):null;switch(e){case"paste":default:return null;case"keypress":if(!(t.ctrlKey||t.altKey||t.metaKey)||t.ctrlKey&&t.altKey){if(t.char&&1<t.char.length)return t.char;if(t.which)return String.fromCharCode(t.which)}return null;case"compositionend":return Mn&&"ko"!==t.locale?null:t.data}}(e,n))&&(0<(r=Vr(r,"onBeforeInput")).length&&(o=new wn("onBeforeInput","beforeinput",null,n,o),i.push({event:o,listeners:r}),o.data=b))}Fr(i,t)}))}function Hr(e,t,n){return{instance:e,listener:t,currentTarget:n}}function Vr(e,t){for(var n=t+"Capture",r=[];null!==e;){var o=e,a=o.stateNode;5===o.tag&&null!==a&&(o=a,null!=(a=Le(e,n))&&r.unshift(Hr(e,a,o)),null!=(a=Le(e,t))&&r.push(Hr(e,a,o))),e=e.return}return r}function Wr(e){if(null===e)return null;do{e=e.return}while(e&&5!==e.tag);return e||null}function Kr(e,t,n,r,o){for(var a=t._reactName,i=[];null!==n&&n!==r;){var s=n,l=s.alternate,c=s.stateNode;if(null!==l&&l===r)break;5===s.tag&&null!==c&&(s=c,o?null!=(l=Le(n,a))&&i.unshift(Hr(n,l,s)):o||null!=(l=Le(n,a))&&i.push(Hr(n,l,s))),n=n.return}0!==i.length&&e.push({event:t,listeners:i})}var Qr=/\r\n?/g,Yr=/\u0000|\uFFFD/g;function Zr(e){return("string"==typeof e?e:""+e).replace(Qr,"\n").replace(Yr,"")}function Xr(e,t,n){if(t=Zr(t),Zr(e)!==t&&n)throw Error(a(425))}function Jr(){}var eo=null,to=null;function no(e,t){return"textarea"===e||"noscript"===e||"string"==typeof t.children||"number"==typeof t.children||"object"==typeof t.dangerouslySetInnerHTML&&null!==t.dangerouslySetInnerHTML&&null!=t.dangerouslySetInnerHTML.__html}var ro="function"==typeof setTimeout?setTimeout:void 0,oo="function"==typeof clearTimeout?clearTimeout:void 0,ao="function"==typeof Promise?Promise:void 0,io="function"==typeof queueMicrotask?queueMicrotask:void 0!==ao?function(e){return ao.resolve(null).then(e).catch(so)}:ro;function so(e){setTimeout((function(){throw e}))}function lo(e,t){var n=t,r=0;do{var o=n.nextSibling;if(e.removeChild(n),o&&8===o.nodeType)if("/$"===(n=o.data)){if(0===r)return e.removeChild(o),void Ut(t);r--}else"$"!==n&&"$?"!==n&&"$!"!==n||r++;n=o}while(n);Ut(t)}function co(e){for(;null!=e;e=e.nextSibling){var t=e.nodeType;if(1===t||3===t)break;if(8===t){if("$"===(t=e.data)||"$!"===t||"$?"===t)break;if("/$"===t)return null}}return e}function uo(e){e=e.previousSibling;for(var t=0;e;){if(8===e.nodeType){var n=e.data;if("$"===n||"$!"===n||"$?"===n){if(0===t)return e;t--}else"/$"===n&&t++}e=e.previousSibling}return null}var po=Math.random().toString(36).slice(2),fo="__reactFiber$"+po,go="__reactProps$"+po,mo="__reactContainer$"+po,ho="__reactEvents$"+po,yo="__reactListeners$"+po,bo="__reactHandles$"+po;function vo(e){var t=e[fo];if(t)return t;for(var n=e.parentNode;n;){if(t=n[mo]||n[fo]){if(n=t.alternate,null!==t.child||null!==n&&null!==n.child)for(e=uo(e);null!==e;){if(n=e[fo])return n;e=uo(e)}return t}n=(e=n).parentNode}return null}function wo(e){return!(e=e[fo]||e[mo])||5!==e.tag&&6!==e.tag&&13!==e.tag&&3!==e.tag?null:e}function ko(e){if(5===e.tag||6===e.tag)return e.stateNode;throw Error(a(33))}function xo(e){return e[go]||null}var So=[],_o=-1;function Eo(e){return{current:e}}function Co(e){0>_o||(e.current=So[_o],So[_o]=null,_o--)}function Ao(e,t){_o++,So[_o]=e.current,e.current=t}var To={},jo=Eo(To),Ro=Eo(!1),Po=To;function Lo(e,t){var n=e.type.contextTypes;if(!n)return To;var r=e.stateNode;if(r&&r.__reactInternalMemoizedUnmaskedChildContext===t)return r.__reactInternalMemoizedMaskedChildContext;var o,a={};for(o in n)a[o]=t[o];return r&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=t,e.__reactInternalMemoizedMaskedChildContext=a),a}function No(e){return null!=(e=e.childContextTypes)}function Oo(){Co(Ro),Co(jo)}function Do(e,t,n){if(jo.current!==To)throw Error(a(168));Ao(jo,t),Ao(Ro,n)}function Io(e,t,n){var r=e.stateNode;if(t=t.childContextTypes,"function"!=typeof r.getChildContext)return n;for(var o in r=r.getChildContext())if(!(o in t))throw Error(a(108,q(e)||"Unknown",o));return M({},n,r)}function Mo(e){return e=(e=e.stateNode)&&e.__reactInternalMemoizedMergedChildContext||To,Po=jo.current,Ao(jo,e),Ao(Ro,Ro.current),!0}function Fo(e,t,n){var r=e.stateNode;if(!r)throw Error(a(169));n?(e=Io(e,t,Po),r.__reactInternalMemoizedMergedChildContext=e,Co(Ro),Co(jo),Ao(jo,e)):Co(Ro),Ao(Ro,n)}var zo=null,Bo=!1,$o=!1;function Uo(e){null===zo?zo=[e]:zo.push(e)}function qo(){if(!$o&&null!==zo){$o=!0;var e=0,t=vt;try{var n=zo;for(vt=1;e<n.length;e++){var r=n[e];do{r=r(!0)}while(null!==r)}zo=null,Bo=!1}catch(o){throw null!==zo&&(zo=zo.slice(e+1)),We(Je,qo),o}finally{vt=t,$o=!1}}return null}var Go=[],Ho=0,Vo=null,Wo=0,Ko=[],Qo=0,Yo=null,Zo=1,Xo="";function Jo(e,t){Go[Ho++]=Wo,Go[Ho++]=Vo,Vo=e,Wo=t}function ea(e,t,n){Ko[Qo++]=Zo,Ko[Qo++]=Xo,Ko[Qo++]=Yo,Yo=e;var r=Zo;e=Xo;var o=32-it(r)-1;r&=~(1<<o),n+=1;var a=32-it(t)+o;if(30<a){var i=o-o%5;a=(r&(1<<i)-1).toString(32),r>>=i,o-=i,Zo=1<<32-it(t)+o|n<<o|r,Xo=a+e}else Zo=1<<a|n<<o|r,Xo=e}function ta(e){null!==e.return&&(Jo(e,1),ea(e,1,0))}function na(e){for(;e===Vo;)Vo=Go[--Ho],Go[Ho]=null,Wo=Go[--Ho],Go[Ho]=null;for(;e===Yo;)Yo=Ko[--Qo],Ko[Qo]=null,Xo=Ko[--Qo],Ko[Qo]=null,Zo=Ko[--Qo],Ko[Qo]=null}var ra=null,oa=null,aa=!1,ia=null;function sa(e,t){var n=Pc(5,null,null,0);n.elementType="DELETED",n.stateNode=t,n.return=e,null===(t=e.deletions)?(e.deletions=[n],e.flags|=16):t.push(n)}function la(e,t){switch(e.tag){case 5:var n=e.type;return null!==(t=1!==t.nodeType||n.toLowerCase()!==t.nodeName.toLowerCase()?null:t)&&(e.stateNode=t,ra=e,oa=co(t.firstChild),!0);case 6:return null!==(t=""===e.pendingProps||3!==t.nodeType?null:t)&&(e.stateNode=t,ra=e,oa=null,!0);case 13:return null!==(t=8!==t.nodeType?null:t)&&(n=null!==Yo?{id:Zo,overflow:Xo}:null,e.memoizedState={dehydrated:t,treeContext:n,retryLane:1073741824},(n=Pc(18,null,null,0)).stateNode=t,n.return=e,e.child=n,ra=e,oa=null,!0);default:return!1}}function ca(e){return!(!(1&e.mode)||128&e.flags)}function ua(e){if(aa){var t=oa;if(t){var n=t;if(!la(e,t)){if(ca(e))throw Error(a(418));t=co(n.nextSibling);var r=ra;t&&la(e,t)?sa(r,n):(e.flags=-4097&e.flags|2,aa=!1,ra=e)}}else{if(ca(e))throw Error(a(418));e.flags=-4097&e.flags|2,aa=!1,ra=e}}}function da(e){for(e=e.return;null!==e&&5!==e.tag&&3!==e.tag&&13!==e.tag;)e=e.return;ra=e}function pa(e){if(e!==ra)return!1;if(!aa)return da(e),aa=!0,!1;var t;if((t=3!==e.tag)&&!(t=5!==e.tag)&&(t="head"!==(t=e.type)&&"body"!==t&&!no(e.type,e.memoizedProps)),t&&(t=oa)){if(ca(e))throw fa(),Error(a(418));for(;t;)sa(e,t),t=co(t.nextSibling)}if(da(e),13===e.tag){if(!(e=null!==(e=e.memoizedState)?e.dehydrated:null))throw Error(a(317));e:{for(e=e.nextSibling,t=0;e;){if(8===e.nodeType){var n=e.data;if("/$"===n){if(0===t){oa=co(e.nextSibling);break e}t--}else"$"!==n&&"$!"!==n&&"$?"!==n||t++}e=e.nextSibling}oa=null}}else oa=ra?co(e.stateNode.nextSibling):null;return!0}function fa(){for(var e=oa;e;)e=co(e.nextSibling)}function ga(){oa=ra=null,aa=!1}function ma(e){null===ia?ia=[e]:ia.push(e)}var ha=w.ReactCurrentBatchConfig;function ya(e,t,n){if(null!==(e=n.ref)&&"function"!=typeof e&&"object"!=typeof e){if(n._owner){if(n=n._owner){if(1!==n.tag)throw Error(a(309));var r=n.stateNode}if(!r)throw Error(a(147,e));var o=r,i=""+e;return null!==t&&null!==t.ref&&"function"==typeof t.ref&&t.ref._stringRef===i?t.ref:(t=function(e){var t=o.refs;null===e?delete t[i]:t[i]=e},t._stringRef=i,t)}if("string"!=typeof e)throw Error(a(284));if(!n._owner)throw Error(a(290,e))}return e}function ba(e,t){throw e=Object.prototype.toString.call(t),Error(a(31,"[object Object]"===e?"object with keys {"+Object.keys(t).join(", ")+"}":e))}function va(e){return(0,e._init)(e._payload)}function wa(e){function t(t,n){if(e){var r=t.deletions;null===r?(t.deletions=[n],t.flags|=16):r.push(n)}}function n(n,r){if(!e)return null;for(;null!==r;)t(n,r),r=r.sibling;return null}function r(e,t){for(e=new Map;null!==t;)null!==t.key?e.set(t.key,t):e.set(t.index,t),t=t.sibling;return e}function o(e,t){return(e=Nc(e,t)).index=0,e.sibling=null,e}function i(t,n,r){return t.index=r,e?null!==(r=t.alternate)?(r=r.index)<n?(t.flags|=2,n):r:(t.flags|=2,n):(t.flags|=1048576,n)}function s(t){return e&&null===t.alternate&&(t.flags|=2),t}function l(e,t,n,r){return null===t||6!==t.tag?((t=Mc(n,e.mode,r)).return=e,t):((t=o(t,n)).return=e,t)}function c(e,t,n,r){var a=n.type;return a===S?d(e,t,n.props.children,r,n.key):null!==t&&(t.elementType===a||"object"==typeof a&&null!==a&&a.$$typeof===L&&va(a)===t.type)?((r=o(t,n.props)).ref=ya(e,t,n),r.return=e,r):((r=Oc(n.type,n.key,n.props,null,e.mode,r)).ref=ya(e,t,n),r.return=e,r)}function u(e,t,n,r){return null===t||4!==t.tag||t.stateNode.containerInfo!==n.containerInfo||t.stateNode.implementation!==n.implementation?((t=Fc(n,e.mode,r)).return=e,t):((t=o(t,n.children||[])).return=e,t)}function d(e,t,n,r,a){return null===t||7!==t.tag?((t=Dc(n,e.mode,r,a)).return=e,t):((t=o(t,n)).return=e,t)}function p(e,t,n){if("string"==typeof t&&""!==t||"number"==typeof t)return(t=Mc(""+t,e.mode,n)).return=e,t;if("object"==typeof t&&null!==t){switch(t.$$typeof){case k:return(n=Oc(t.type,t.key,t.props,null,e.mode,n)).ref=ya(e,null,t),n.return=e,n;case x:return(t=Fc(t,e.mode,n)).return=e,t;case L:return p(e,(0,t._init)(t._payload),n)}if(te(t)||D(t))return(t=Dc(t,e.mode,n,null)).return=e,t;ba(e,t)}return null}function f(e,t,n,r){var o=null!==t?t.key:null;if("string"==typeof n&&""!==n||"number"==typeof n)return null!==o?null:l(e,t,""+n,r);if("object"==typeof n&&null!==n){switch(n.$$typeof){case k:return n.key===o?c(e,t,n,r):null;case x:return n.key===o?u(e,t,n,r):null;case L:return f(e,t,(o=n._init)(n._payload),r)}if(te(n)||D(n))return null!==o?null:d(e,t,n,r,null);ba(e,n)}return null}function g(e,t,n,r,o){if("string"==typeof r&&""!==r||"number"==typeof r)return l(t,e=e.get(n)||null,""+r,o);if("object"==typeof r&&null!==r){switch(r.$$typeof){case k:return c(t,e=e.get(null===r.key?n:r.key)||null,r,o);case x:return u(t,e=e.get(null===r.key?n:r.key)||null,r,o);case L:return g(e,t,n,(0,r._init)(r._payload),o)}if(te(r)||D(r))return d(t,e=e.get(n)||null,r,o,null);ba(t,r)}return null}function m(o,a,s,l){for(var c=null,u=null,d=a,m=a=0,h=null;null!==d&&m<s.length;m++){d.index>m?(h=d,d=null):h=d.sibling;var y=f(o,d,s[m],l);if(null===y){null===d&&(d=h);break}e&&d&&null===y.alternate&&t(o,d),a=i(y,a,m),null===u?c=y:u.sibling=y,u=y,d=h}if(m===s.length)return n(o,d),aa&&Jo(o,m),c;if(null===d){for(;m<s.length;m++)null!==(d=p(o,s[m],l))&&(a=i(d,a,m),null===u?c=d:u.sibling=d,u=d);return aa&&Jo(o,m),c}for(d=r(o,d);m<s.length;m++)null!==(h=g(d,o,m,s[m],l))&&(e&&null!==h.alternate&&d.delete(null===h.key?m:h.key),a=i(h,a,m),null===u?c=h:u.sibling=h,u=h);return e&&d.forEach((function(e){return t(o,e)})),aa&&Jo(o,m),c}function h(o,s,l,c){var u=D(l);if("function"!=typeof u)throw Error(a(150));if(null==(l=u.call(l)))throw Error(a(151));for(var d=u=null,m=s,h=s=0,y=null,b=l.next();null!==m&&!b.done;h++,b=l.next()){m.index>h?(y=m,m=null):y=m.sibling;var v=f(o,m,b.value,c);if(null===v){null===m&&(m=y);break}e&&m&&null===v.alternate&&t(o,m),s=i(v,s,h),null===d?u=v:d.sibling=v,d=v,m=y}if(b.done)return n(o,m),aa&&Jo(o,h),u;if(null===m){for(;!b.done;h++,b=l.next())null!==(b=p(o,b.value,c))&&(s=i(b,s,h),null===d?u=b:d.sibling=b,d=b);return aa&&Jo(o,h),u}for(m=r(o,m);!b.done;h++,b=l.next())null!==(b=g(m,o,h,b.value,c))&&(e&&null!==b.alternate&&m.delete(null===b.key?h:b.key),s=i(b,s,h),null===d?u=b:d.sibling=b,d=b);return e&&m.forEach((function(e){return t(o,e)})),aa&&Jo(o,h),u}return function e(r,a,i,l){if("object"==typeof i&&null!==i&&i.type===S&&null===i.key&&(i=i.props.children),"object"==typeof i&&null!==i){switch(i.$$typeof){case k:e:{for(var c=i.key,u=a;null!==u;){if(u.key===c){if((c=i.type)===S){if(7===u.tag){n(r,u.sibling),(a=o(u,i.props.children)).return=r,r=a;break e}}else if(u.elementType===c||"object"==typeof c&&null!==c&&c.$$typeof===L&&va(c)===u.type){n(r,u.sibling),(a=o(u,i.props)).ref=ya(r,u,i),a.return=r,r=a;break e}n(r,u);break}t(r,u),u=u.sibling}i.type===S?((a=Dc(i.props.children,r.mode,l,i.key)).return=r,r=a):((l=Oc(i.type,i.key,i.props,null,r.mode,l)).ref=ya(r,a,i),l.return=r,r=l)}return s(r);case x:e:{for(u=i.key;null!==a;){if(a.key===u){if(4===a.tag&&a.stateNode.containerInfo===i.containerInfo&&a.stateNode.implementation===i.implementation){n(r,a.sibling),(a=o(a,i.children||[])).return=r,r=a;break e}n(r,a);break}t(r,a),a=a.sibling}(a=Fc(i,r.mode,l)).return=r,r=a}return s(r);case L:return e(r,a,(u=i._init)(i._payload),l)}if(te(i))return m(r,a,i,l);if(D(i))return h(r,a,i,l);ba(r,i)}return"string"==typeof i&&""!==i||"number"==typeof i?(i=""+i,null!==a&&6===a.tag?(n(r,a.sibling),(a=o(a,i)).return=r,r=a):(n(r,a),(a=Mc(i,r.mode,l)).return=r,r=a),s(r)):n(r,a)}}var ka=wa(!0),xa=wa(!1),Sa=Eo(null),_a=null,Ea=null,Ca=null;function Aa(){Ca=Ea=_a=null}function Ta(e){var t=Sa.current;Co(Sa),e._currentValue=t}function ja(e,t,n){for(;null!==e;){var r=e.alternate;if((e.childLanes&t)!==t?(e.childLanes|=t,null!==r&&(r.childLanes|=t)):null!==r&&(r.childLanes&t)!==t&&(r.childLanes|=t),e===n)break;e=e.return}}function Ra(e,t){_a=e,Ca=Ea=null,null!==(e=e.dependencies)&&null!==e.firstContext&&(!!(e.lanes&t)&&(vs=!0),e.firstContext=null)}function Pa(e){var t=e._currentValue;if(Ca!==e)if(e={context:e,memoizedValue:t,next:null},null===Ea){if(null===_a)throw Error(a(308));Ea=e,_a.dependencies={lanes:0,firstContext:e}}else Ea=Ea.next=e;return t}var La=null;function Na(e){null===La?La=[e]:La.push(e)}function Oa(e,t,n,r){var o=t.interleaved;return null===o?(n.next=n,Na(t)):(n.next=o.next,o.next=n),t.interleaved=n,Da(e,r)}function Da(e,t){e.lanes|=t;var n=e.alternate;for(null!==n&&(n.lanes|=t),n=e,e=e.return;null!==e;)e.childLanes|=t,null!==(n=e.alternate)&&(n.childLanes|=t),n=e,e=e.return;return 3===n.tag?n.stateNode:null}var Ia=!1;function Ma(e){e.updateQueue={baseState:e.memoizedState,firstBaseUpdate:null,lastBaseUpdate:null,shared:{pending:null,interleaved:null,lanes:0},effects:null}}function Fa(e,t){e=e.updateQueue,t.updateQueue===e&&(t.updateQueue={baseState:e.baseState,firstBaseUpdate:e.firstBaseUpdate,lastBaseUpdate:e.lastBaseUpdate,shared:e.shared,effects:e.effects})}function za(e,t){return{eventTime:e,lane:t,tag:0,payload:null,callback:null,next:null}}function Ba(e,t,n){var r=e.updateQueue;if(null===r)return null;if(r=r.shared,2&Tl){var o=r.pending;return null===o?t.next=t:(t.next=o.next,o.next=t),r.pending=t,Da(e,n)}return null===(o=r.interleaved)?(t.next=t,Na(r)):(t.next=o.next,o.next=t),r.interleaved=t,Da(e,n)}function $a(e,t,n){if(null!==(t=t.updateQueue)&&(t=t.shared,4194240&n)){var r=t.lanes;n|=r&=e.pendingLanes,t.lanes=n,bt(e,n)}}function Ua(e,t){var n=e.updateQueue,r=e.alternate;if(null!==r&&n===(r=r.updateQueue)){var o=null,a=null;if(null!==(n=n.firstBaseUpdate)){do{var i={eventTime:n.eventTime,lane:n.lane,tag:n.tag,payload:n.payload,callback:n.callback,next:null};null===a?o=a=i:a=a.next=i,n=n.next}while(null!==n);null===a?o=a=t:a=a.next=t}else o=a=t;return n={baseState:r.baseState,firstBaseUpdate:o,lastBaseUpdate:a,shared:r.shared,effects:r.effects},void(e.updateQueue=n)}null===(e=n.lastBaseUpdate)?n.firstBaseUpdate=t:e.next=t,n.lastBaseUpdate=t}function qa(e,t,n,r){var o=e.updateQueue;Ia=!1;var a=o.firstBaseUpdate,i=o.lastBaseUpdate,s=o.shared.pending;if(null!==s){o.shared.pending=null;var l=s,c=l.next;l.next=null,null===i?a=c:i.next=c,i=l;var u=e.alternate;null!==u&&((s=(u=u.updateQueue).lastBaseUpdate)!==i&&(null===s?u.firstBaseUpdate=c:s.next=c,u.lastBaseUpdate=l))}if(null!==a){var d=o.baseState;for(i=0,u=c=l=null,s=a;;){var p=s.lane,f=s.eventTime;if((r&p)===p){null!==u&&(u=u.next={eventTime:f,lane:0,tag:s.tag,payload:s.payload,callback:s.callback,next:null});e:{var g=e,m=s;switch(p=t,f=n,m.tag){case 1:if("function"==typeof(g=m.payload)){d=g.call(f,d,p);break e}d=g;break e;case 3:g.flags=-65537&g.flags|128;case 0:if(null==(p="function"==typeof(g=m.payload)?g.call(f,d,p):g))break e;d=M({},d,p);break e;case 2:Ia=!0}}null!==s.callback&&0!==s.lane&&(e.flags|=64,null===(p=o.effects)?o.effects=[s]:p.push(s))}else f={eventTime:f,lane:p,tag:s.tag,payload:s.payload,callback:s.callback,next:null},null===u?(c=u=f,l=d):u=u.next=f,i|=p;if(null===(s=s.next)){if(null===(s=o.shared.pending))break;s=(p=s).next,p.next=null,o.lastBaseUpdate=p,o.shared.pending=null}}if(null===u&&(l=d),o.baseState=l,o.firstBaseUpdate=c,o.lastBaseUpdate=u,null!==(t=o.shared.interleaved)){o=t;do{i|=o.lane,o=o.next}while(o!==t)}else null===a&&(o.shared.lanes=0);Il|=i,e.lanes=i,e.memoizedState=d}}function Ga(e,t,n){if(e=t.effects,t.effects=null,null!==e)for(t=0;t<e.length;t++){var r=e[t],o=r.callback;if(null!==o){if(r.callback=null,r=n,"function"!=typeof o)throw Error(a(191,o));o.call(r)}}}var Ha={},Va=Eo(Ha),Wa=Eo(Ha),Ka=Eo(Ha);function Qa(e){if(e===Ha)throw Error(a(174));return e}function Ya(e,t){switch(Ao(Ka,t),Ao(Wa,e),Ao(Va,Ha),e=t.nodeType){case 9:case 11:t=(t=t.documentElement)?t.namespaceURI:le(null,"");break;default:t=le(t=(e=8===e?t.parentNode:t).namespaceURI||null,e=e.tagName)}Co(Va),Ao(Va,t)}function Za(){Co(Va),Co(Wa),Co(Ka)}function Xa(e){Qa(Ka.current);var t=Qa(Va.current),n=le(t,e.type);t!==n&&(Ao(Wa,e),Ao(Va,n))}function Ja(e){Wa.current===e&&(Co(Va),Co(Wa))}var ei=Eo(0);function ti(e){for(var t=e;null!==t;){if(13===t.tag){var n=t.memoizedState;if(null!==n&&(null===(n=n.dehydrated)||"$?"===n.data||"$!"===n.data))return t}else if(19===t.tag&&void 0!==t.memoizedProps.revealOrder){if(128&t.flags)return t}else if(null!==t.child){t.child.return=t,t=t.child;continue}if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}return null}var ni=[];function ri(){for(var e=0;e<ni.length;e++)ni[e]._workInProgressVersionPrimary=null;ni.length=0}var oi=w.ReactCurrentDispatcher,ai=w.ReactCurrentBatchConfig,ii=0,si=null,li=null,ci=null,ui=!1,di=!1,pi=0,fi=0;function gi(){throw Error(a(321))}function mi(e,t){if(null===t)return!1;for(var n=0;n<t.length&&n<e.length;n++)if(!sr(e[n],t[n]))return!1;return!0}function hi(e,t,n,r,o,i){if(ii=i,si=t,t.memoizedState=null,t.updateQueue=null,t.lanes=0,oi.current=null===e||null===e.memoizedState?Ji:es,e=n(r,o),di){i=0;do{if(di=!1,pi=0,25<=i)throw Error(a(301));i+=1,ci=li=null,t.updateQueue=null,oi.current=ts,e=n(r,o)}while(di)}if(oi.current=Xi,t=null!==li&&null!==li.next,ii=0,ci=li=si=null,ui=!1,t)throw Error(a(300));return e}function yi(){var e=0!==pi;return pi=0,e}function bi(){var e={memoizedState:null,baseState:null,baseQueue:null,queue:null,next:null};return null===ci?si.memoizedState=ci=e:ci=ci.next=e,ci}function vi(){if(null===li){var e=si.alternate;e=null!==e?e.memoizedState:null}else e=li.next;var t=null===ci?si.memoizedState:ci.next;if(null!==t)ci=t,li=e;else{if(null===e)throw Error(a(310));e={memoizedState:(li=e).memoizedState,baseState:li.baseState,baseQueue:li.baseQueue,queue:li.queue,next:null},null===ci?si.memoizedState=ci=e:ci=ci.next=e}return ci}function wi(e,t){return"function"==typeof t?t(e):t}function ki(e){var t=vi(),n=t.queue;if(null===n)throw Error(a(311));n.lastRenderedReducer=e;var r=li,o=r.baseQueue,i=n.pending;if(null!==i){if(null!==o){var s=o.next;o.next=i.next,i.next=s}r.baseQueue=o=i,n.pending=null}if(null!==o){i=o.next,r=r.baseState;var l=s=null,c=null,u=i;do{var d=u.lane;if((ii&d)===d)null!==c&&(c=c.next={lane:0,action:u.action,hasEagerState:u.hasEagerState,eagerState:u.eagerState,next:null}),r=u.hasEagerState?u.eagerState:e(r,u.action);else{var p={lane:d,action:u.action,hasEagerState:u.hasEagerState,eagerState:u.eagerState,next:null};null===c?(l=c=p,s=r):c=c.next=p,si.lanes|=d,Il|=d}u=u.next}while(null!==u&&u!==i);null===c?s=r:c.next=l,sr(r,t.memoizedState)||(vs=!0),t.memoizedState=r,t.baseState=s,t.baseQueue=c,n.lastRenderedState=r}if(null!==(e=n.interleaved)){o=e;do{i=o.lane,si.lanes|=i,Il|=i,o=o.next}while(o!==e)}else null===o&&(n.lanes=0);return[t.memoizedState,n.dispatch]}function xi(e){var t=vi(),n=t.queue;if(null===n)throw Error(a(311));n.lastRenderedReducer=e;var r=n.dispatch,o=n.pending,i=t.memoizedState;if(null!==o){n.pending=null;var s=o=o.next;do{i=e(i,s.action),s=s.next}while(s!==o);sr(i,t.memoizedState)||(vs=!0),t.memoizedState=i,null===t.baseQueue&&(t.baseState=i),n.lastRenderedState=i}return[i,r]}function Si(){}function _i(e,t){var n=si,r=vi(),o=t(),i=!sr(r.memoizedState,o);if(i&&(r.memoizedState=o,vs=!0),r=r.queue,Ii(Ai.bind(null,n,r,e),[e]),r.getSnapshot!==t||i||null!==ci&&1&ci.memoizedState.tag){if(n.flags|=2048,Pi(9,Ci.bind(null,n,r,o,t),void 0,null),null===jl)throw Error(a(349));30&ii||Ei(n,t,o)}return o}function Ei(e,t,n){e.flags|=16384,e={getSnapshot:t,value:n},null===(t=si.updateQueue)?(t={lastEffect:null,stores:null},si.updateQueue=t,t.stores=[e]):null===(n=t.stores)?t.stores=[e]:n.push(e)}function Ci(e,t,n,r){t.value=n,t.getSnapshot=r,Ti(t)&&ji(e)}function Ai(e,t,n){return n((function(){Ti(t)&&ji(e)}))}function Ti(e){var t=e.getSnapshot;e=e.value;try{var n=t();return!sr(e,n)}catch(r){return!0}}function ji(e){var t=Da(e,1);null!==t&&nc(t,e,1,-1)}function Ri(e){var t=bi();return"function"==typeof e&&(e=e()),t.memoizedState=t.baseState=e,e={pending:null,interleaved:null,lanes:0,dispatch:null,lastRenderedReducer:wi,lastRenderedState:e},t.queue=e,e=e.dispatch=Ki.bind(null,si,e),[t.memoizedState,e]}function Pi(e,t,n,r){return e={tag:e,create:t,destroy:n,deps:r,next:null},null===(t=si.updateQueue)?(t={lastEffect:null,stores:null},si.updateQueue=t,t.lastEffect=e.next=e):null===(n=t.lastEffect)?t.lastEffect=e.next=e:(r=n.next,n.next=e,e.next=r,t.lastEffect=e),e}function Li(){return vi().memoizedState}function Ni(e,t,n,r){var o=bi();si.flags|=e,o.memoizedState=Pi(1|t,n,void 0,void 0===r?null:r)}function Oi(e,t,n,r){var o=vi();r=void 0===r?null:r;var a=void 0;if(null!==li){var i=li.memoizedState;if(a=i.destroy,null!==r&&mi(r,i.deps))return void(o.memoizedState=Pi(t,n,a,r))}si.flags|=e,o.memoizedState=Pi(1|t,n,a,r)}function Di(e,t){return Ni(8390656,8,e,t)}function Ii(e,t){return Oi(2048,8,e,t)}function Mi(e,t){return Oi(4,2,e,t)}function Fi(e,t){return Oi(4,4,e,t)}function zi(e,t){return"function"==typeof t?(e=e(),t(e),function(){t(null)}):null!=t?(e=e(),t.current=e,function(){t.current=null}):void 0}function Bi(e,t,n){return n=null!=n?n.concat([e]):null,Oi(4,4,zi.bind(null,t,e),n)}function $i(){}function Ui(e,t){var n=vi();t=void 0===t?null:t;var r=n.memoizedState;return null!==r&&null!==t&&mi(t,r[1])?r[0]:(n.memoizedState=[e,t],e)}function qi(e,t){var n=vi();t=void 0===t?null:t;var r=n.memoizedState;return null!==r&&null!==t&&mi(t,r[1])?r[0]:(e=e(),n.memoizedState=[e,t],e)}function Gi(e,t,n){return 21&ii?(sr(n,t)||(n=mt(),si.lanes|=n,Il|=n,e.baseState=!0),t):(e.baseState&&(e.baseState=!1,vs=!0),e.memoizedState=n)}function Hi(e,t){var n=vt;vt=0!==n&&4>n?n:4,e(!0);var r=ai.transition;ai.transition={};try{e(!1),t()}finally{vt=n,ai.transition=r}}function Vi(){return vi().memoizedState}function Wi(e,t,n){var r=tc(e);if(n={lane:r,action:n,hasEagerState:!1,eagerState:null,next:null},Qi(e))Yi(t,n);else if(null!==(n=Oa(e,t,n,r))){nc(n,e,r,ec()),Zi(n,t,r)}}function Ki(e,t,n){var r=tc(e),o={lane:r,action:n,hasEagerState:!1,eagerState:null,next:null};if(Qi(e))Yi(t,o);else{var a=e.alternate;if(0===e.lanes&&(null===a||0===a.lanes)&&null!==(a=t.lastRenderedReducer))try{var i=t.lastRenderedState,s=a(i,n);if(o.hasEagerState=!0,o.eagerState=s,sr(s,i)){var l=t.interleaved;return null===l?(o.next=o,Na(t)):(o.next=l.next,l.next=o),void(t.interleaved=o)}}catch(c){}null!==(n=Oa(e,t,o,r))&&(nc(n,e,r,o=ec()),Zi(n,t,r))}}function Qi(e){var t=e.alternate;return e===si||null!==t&&t===si}function Yi(e,t){di=ui=!0;var n=e.pending;null===n?t.next=t:(t.next=n.next,n.next=t),e.pending=t}function Zi(e,t,n){if(4194240&n){var r=t.lanes;n|=r&=e.pendingLanes,t.lanes=n,bt(e,n)}}var Xi={readContext:Pa,useCallback:gi,useContext:gi,useEffect:gi,useImperativeHandle:gi,useInsertionEffect:gi,useLayoutEffect:gi,useMemo:gi,useReducer:gi,useRef:gi,useState:gi,useDebugValue:gi,useDeferredValue:gi,useTransition:gi,useMutableSource:gi,useSyncExternalStore:gi,useId:gi,unstable_isNewReconciler:!1},Ji={readContext:Pa,useCallback:function(e,t){return bi().memoizedState=[e,void 0===t?null:t],e},useContext:Pa,useEffect:Di,useImperativeHandle:function(e,t,n){return n=null!=n?n.concat([e]):null,Ni(4194308,4,zi.bind(null,t,e),n)},useLayoutEffect:function(e,t){return Ni(4194308,4,e,t)},useInsertionEffect:function(e,t){return Ni(4,2,e,t)},useMemo:function(e,t){var n=bi();return t=void 0===t?null:t,e=e(),n.memoizedState=[e,t],e},useReducer:function(e,t,n){var r=bi();return t=void 0!==n?n(t):t,r.memoizedState=r.baseState=t,e={pending:null,interleaved:null,lanes:0,dispatch:null,lastRenderedReducer:e,lastRenderedState:t},r.queue=e,e=e.dispatch=Wi.bind(null,si,e),[r.memoizedState,e]},useRef:function(e){return e={current:e},bi().memoizedState=e},useState:Ri,useDebugValue:$i,useDeferredValue:function(e){return bi().memoizedState=e},useTransition:function(){var e=Ri(!1),t=e[0];return e=Hi.bind(null,e[1]),bi().memoizedState=e,[t,e]},useMutableSource:function(){},useSyncExternalStore:function(e,t,n){var r=si,o=bi();if(aa){if(void 0===n)throw Error(a(407));n=n()}else{if(n=t(),null===jl)throw Error(a(349));30&ii||Ei(r,t,n)}o.memoizedState=n;var i={value:n,getSnapshot:t};return o.queue=i,Di(Ai.bind(null,r,i,e),[e]),r.flags|=2048,Pi(9,Ci.bind(null,r,i,n,t),void 0,null),n},useId:function(){var e=bi(),t=jl.identifierPrefix;if(aa){var n=Xo;t=":"+t+"R"+(n=(Zo&~(1<<32-it(Zo)-1)).toString(32)+n),0<(n=pi++)&&(t+="H"+n.toString(32)),t+=":"}else t=":"+t+"r"+(n=fi++).toString(32)+":";return e.memoizedState=t},unstable_isNewReconciler:!1},es={readContext:Pa,useCallback:Ui,useContext:Pa,useEffect:Ii,useImperativeHandle:Bi,useInsertionEffect:Mi,useLayoutEffect:Fi,useMemo:qi,useReducer:ki,useRef:Li,useState:function(){return ki(wi)},useDebugValue:$i,useDeferredValue:function(e){return Gi(vi(),li.memoizedState,e)},useTransition:function(){return[ki(wi)[0],vi().memoizedState]},useMutableSource:Si,useSyncExternalStore:_i,useId:Vi,unstable_isNewReconciler:!1},ts={readContext:Pa,useCallback:Ui,useContext:Pa,useEffect:Ii,useImperativeHandle:Bi,useInsertionEffect:Mi,useLayoutEffect:Fi,useMemo:qi,useReducer:xi,useRef:Li,useState:function(){return xi(wi)},useDebugValue:$i,useDeferredValue:function(e){var t=vi();return null===li?t.memoizedState=e:Gi(t,li.memoizedState,e)},useTransition:function(){return[xi(wi)[0],vi().memoizedState]},useMutableSource:Si,useSyncExternalStore:_i,useId:Vi,unstable_isNewReconciler:!1};function ns(e,t){if(e&&e.defaultProps){for(var n in t=M({},t),e=e.defaultProps)void 0===t[n]&&(t[n]=e[n]);return t}return t}function rs(e,t,n,r){n=null==(n=n(r,t=e.memoizedState))?t:M({},t,n),e.memoizedState=n,0===e.lanes&&(e.updateQueue.baseState=n)}var os={isMounted:function(e){return!!(e=e._reactInternals)&&Ue(e)===e},enqueueSetState:function(e,t,n){e=e._reactInternals;var r=ec(),o=tc(e),a=za(r,o);a.payload=t,null!=n&&(a.callback=n),null!==(t=Ba(e,a,o))&&(nc(t,e,o,r),$a(t,e,o))},enqueueReplaceState:function(e,t,n){e=e._reactInternals;var r=ec(),o=tc(e),a=za(r,o);a.tag=1,a.payload=t,null!=n&&(a.callback=n),null!==(t=Ba(e,a,o))&&(nc(t,e,o,r),$a(t,e,o))},enqueueForceUpdate:function(e,t){e=e._reactInternals;var n=ec(),r=tc(e),o=za(n,r);o.tag=2,null!=t&&(o.callback=t),null!==(t=Ba(e,o,r))&&(nc(t,e,r,n),$a(t,e,r))}};function as(e,t,n,r,o,a,i){return"function"==typeof(e=e.stateNode).shouldComponentUpdate?e.shouldComponentUpdate(r,a,i):!t.prototype||!t.prototype.isPureReactComponent||(!lr(n,r)||!lr(o,a))}function is(e,t,n){var r=!1,o=To,a=t.contextType;return"object"==typeof a&&null!==a?a=Pa(a):(o=No(t)?Po:jo.current,a=(r=null!=(r=t.contextTypes))?Lo(e,o):To),t=new t(n,a),e.memoizedState=null!==t.state&&void 0!==t.state?t.state:null,t.updater=os,e.stateNode=t,t._reactInternals=e,r&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=o,e.__reactInternalMemoizedMaskedChildContext=a),t}function ss(e,t,n,r){e=t.state,"function"==typeof t.componentWillReceiveProps&&t.componentWillReceiveProps(n,r),"function"==typeof t.UNSAFE_componentWillReceiveProps&&t.UNSAFE_componentWillReceiveProps(n,r),t.state!==e&&os.enqueueReplaceState(t,t.state,null)}function ls(e,t,n,r){var o=e.stateNode;o.props=n,o.state=e.memoizedState,o.refs={},Ma(e);var a=t.contextType;"object"==typeof a&&null!==a?o.context=Pa(a):(a=No(t)?Po:jo.current,o.context=Lo(e,a)),o.state=e.memoizedState,"function"==typeof(a=t.getDerivedStateFromProps)&&(rs(e,t,a,n),o.state=e.memoizedState),"function"==typeof t.getDerivedStateFromProps||"function"==typeof o.getSnapshotBeforeUpdate||"function"!=typeof o.UNSAFE_componentWillMount&&"function"!=typeof o.componentWillMount||(t=o.state,"function"==typeof o.componentWillMount&&o.componentWillMount(),"function"==typeof o.UNSAFE_componentWillMount&&o.UNSAFE_componentWillMount(),t!==o.state&&os.enqueueReplaceState(o,o.state,null),qa(e,n,o,r),o.state=e.memoizedState),"function"==typeof o.componentDidMount&&(e.flags|=4194308)}function cs(e,t){try{var n="",r=t;do{n+=$(r),r=r.return}while(r);var o=n}catch(a){o="\nError generating stack: "+a.message+"\n"+a.stack}return{value:e,source:t,stack:o,digest:null}}function us(e,t,n){return{value:e,source:null,stack:null!=n?n:null,digest:null!=t?t:null}}function ds(e,t){try{console.error(t.value)}catch(n){setTimeout((function(){throw n}))}}var ps="function"==typeof WeakMap?WeakMap:Map;function fs(e,t,n){(n=za(-1,n)).tag=3,n.payload={element:null};var r=t.value;return n.callback=function(){Gl||(Gl=!0,Hl=r),ds(0,t)},n}function gs(e,t,n){(n=za(-1,n)).tag=3;var r=e.type.getDerivedStateFromError;if("function"==typeof r){var o=t.value;n.payload=function(){return r(o)},n.callback=function(){ds(0,t)}}var a=e.stateNode;return null!==a&&"function"==typeof a.componentDidCatch&&(n.callback=function(){ds(0,t),"function"!=typeof r&&(null===Vl?Vl=new Set([this]):Vl.add(this));var e=t.stack;this.componentDidCatch(t.value,{componentStack:null!==e?e:""})}),n}function ms(e,t,n){var r=e.pingCache;if(null===r){r=e.pingCache=new ps;var o=new Set;r.set(t,o)}else void 0===(o=r.get(t))&&(o=new Set,r.set(t,o));o.has(n)||(o.add(n),e=Ec.bind(null,e,t,n),t.then(e,e))}function hs(e){do{var t;if((t=13===e.tag)&&(t=null===(t=e.memoizedState)||null!==t.dehydrated),t)return e;e=e.return}while(null!==e);return null}function ys(e,t,n,r,o){return 1&e.mode?(e.flags|=65536,e.lanes=o,e):(e===t?e.flags|=65536:(e.flags|=128,n.flags|=131072,n.flags&=-52805,1===n.tag&&(null===n.alternate?n.tag=17:((t=za(-1,1)).tag=2,Ba(n,t,1))),n.lanes|=1),e)}var bs=w.ReactCurrentOwner,vs=!1;function ws(e,t,n,r){t.child=null===e?xa(t,null,n,r):ka(t,e.child,n,r)}function ks(e,t,n,r,o){n=n.render;var a=t.ref;return Ra(t,o),r=hi(e,t,n,r,a,o),n=yi(),null===e||vs?(aa&&n&&ta(t),t.flags|=1,ws(e,t,r,o),t.child):(t.updateQueue=e.updateQueue,t.flags&=-2053,e.lanes&=~o,Gs(e,t,o))}function xs(e,t,n,r,o){if(null===e){var a=n.type;return"function"!=typeof a||Lc(a)||void 0!==a.defaultProps||null!==n.compare||void 0!==n.defaultProps?((e=Oc(n.type,null,r,t,t.mode,o)).ref=t.ref,e.return=t,t.child=e):(t.tag=15,t.type=a,Ss(e,t,a,r,o))}if(a=e.child,!(e.lanes&o)){var i=a.memoizedProps;if((n=null!==(n=n.compare)?n:lr)(i,r)&&e.ref===t.ref)return Gs(e,t,o)}return t.flags|=1,(e=Nc(a,r)).ref=t.ref,e.return=t,t.child=e}function Ss(e,t,n,r,o){if(null!==e){var a=e.memoizedProps;if(lr(a,r)&&e.ref===t.ref){if(vs=!1,t.pendingProps=r=a,!(e.lanes&o))return t.lanes=e.lanes,Gs(e,t,o);131072&e.flags&&(vs=!0)}}return Cs(e,t,n,r,o)}function _s(e,t,n){var r=t.pendingProps,o=r.children,a=null!==e?e.memoizedState:null;if("hidden"===r.mode)if(1&t.mode){if(!(1073741824&n))return e=null!==a?a.baseLanes|n:n,t.lanes=t.childLanes=1073741824,t.memoizedState={baseLanes:e,cachePool:null,transitions:null},t.updateQueue=null,Ao(Nl,Ll),Ll|=e,null;t.memoizedState={baseLanes:0,cachePool:null,transitions:null},r=null!==a?a.baseLanes:n,Ao(Nl,Ll),Ll|=r}else t.memoizedState={baseLanes:0,cachePool:null,transitions:null},Ao(Nl,Ll),Ll|=n;else null!==a?(r=a.baseLanes|n,t.memoizedState=null):r=n,Ao(Nl,Ll),Ll|=r;return ws(e,t,o,n),t.child}function Es(e,t){var n=t.ref;(null===e&&null!==n||null!==e&&e.ref!==n)&&(t.flags|=512,t.flags|=2097152)}function Cs(e,t,n,r,o){var a=No(n)?Po:jo.current;return a=Lo(t,a),Ra(t,o),n=hi(e,t,n,r,a,o),r=yi(),null===e||vs?(aa&&r&&ta(t),t.flags|=1,ws(e,t,n,o),t.child):(t.updateQueue=e.updateQueue,t.flags&=-2053,e.lanes&=~o,Gs(e,t,o))}function As(e,t,n,r,o){if(No(n)){var a=!0;Mo(t)}else a=!1;if(Ra(t,o),null===t.stateNode)qs(e,t),is(t,n,r),ls(t,n,r,o),r=!0;else if(null===e){var i=t.stateNode,s=t.memoizedProps;i.props=s;var l=i.context,c=n.contextType;"object"==typeof c&&null!==c?c=Pa(c):c=Lo(t,c=No(n)?Po:jo.current);var u=n.getDerivedStateFromProps,d="function"==typeof u||"function"==typeof i.getSnapshotBeforeUpdate;d||"function"!=typeof i.UNSAFE_componentWillReceiveProps&&"function"!=typeof i.componentWillReceiveProps||(s!==r||l!==c)&&ss(t,i,r,c),Ia=!1;var p=t.memoizedState;i.state=p,qa(t,r,i,o),l=t.memoizedState,s!==r||p!==l||Ro.current||Ia?("function"==typeof u&&(rs(t,n,u,r),l=t.memoizedState),(s=Ia||as(t,n,s,r,p,l,c))?(d||"function"!=typeof i.UNSAFE_componentWillMount&&"function"!=typeof i.componentWillMount||("function"==typeof i.componentWillMount&&i.componentWillMount(),"function"==typeof i.UNSAFE_componentWillMount&&i.UNSAFE_componentWillMount()),"function"==typeof i.componentDidMount&&(t.flags|=4194308)):("function"==typeof i.componentDidMount&&(t.flags|=4194308),t.memoizedProps=r,t.memoizedState=l),i.props=r,i.state=l,i.context=c,r=s):("function"==typeof i.componentDidMount&&(t.flags|=4194308),r=!1)}else{i=t.stateNode,Fa(e,t),s=t.memoizedProps,c=t.type===t.elementType?s:ns(t.type,s),i.props=c,d=t.pendingProps,p=i.context,"object"==typeof(l=n.contextType)&&null!==l?l=Pa(l):l=Lo(t,l=No(n)?Po:jo.current);var f=n.getDerivedStateFromProps;(u="function"==typeof f||"function"==typeof i.getSnapshotBeforeUpdate)||"function"!=typeof i.UNSAFE_componentWillReceiveProps&&"function"!=typeof i.componentWillReceiveProps||(s!==d||p!==l)&&ss(t,i,r,l),Ia=!1,p=t.memoizedState,i.state=p,qa(t,r,i,o);var g=t.memoizedState;s!==d||p!==g||Ro.current||Ia?("function"==typeof f&&(rs(t,n,f,r),g=t.memoizedState),(c=Ia||as(t,n,c,r,p,g,l)||!1)?(u||"function"!=typeof i.UNSAFE_componentWillUpdate&&"function"!=typeof i.componentWillUpdate||("function"==typeof i.componentWillUpdate&&i.componentWillUpdate(r,g,l),"function"==typeof i.UNSAFE_componentWillUpdate&&i.UNSAFE_componentWillUpdate(r,g,l)),"function"==typeof i.componentDidUpdate&&(t.flags|=4),"function"==typeof i.getSnapshotBeforeUpdate&&(t.flags|=1024)):("function"!=typeof i.componentDidUpdate||s===e.memoizedProps&&p===e.memoizedState||(t.flags|=4),"function"!=typeof i.getSnapshotBeforeUpdate||s===e.memoizedProps&&p===e.memoizedState||(t.flags|=1024),t.memoizedProps=r,t.memoizedState=g),i.props=r,i.state=g,i.context=l,r=c):("function"!=typeof i.componentDidUpdate||s===e.memoizedProps&&p===e.memoizedState||(t.flags|=4),"function"!=typeof i.getSnapshotBeforeUpdate||s===e.memoizedProps&&p===e.memoizedState||(t.flags|=1024),r=!1)}return Ts(e,t,n,r,a,o)}function Ts(e,t,n,r,o,a){Es(e,t);var i=!!(128&t.flags);if(!r&&!i)return o&&Fo(t,n,!1),Gs(e,t,a);r=t.stateNode,bs.current=t;var s=i&&"function"!=typeof n.getDerivedStateFromError?null:r.render();return t.flags|=1,null!==e&&i?(t.child=ka(t,e.child,null,a),t.child=ka(t,null,s,a)):ws(e,t,s,a),t.memoizedState=r.state,o&&Fo(t,n,!0),t.child}function js(e){var t=e.stateNode;t.pendingContext?Do(0,t.pendingContext,t.pendingContext!==t.context):t.context&&Do(0,t.context,!1),Ya(e,t.containerInfo)}function Rs(e,t,n,r,o){return ga(),ma(o),t.flags|=256,ws(e,t,n,r),t.child}var Ps,Ls,Ns,Os,Ds={dehydrated:null,treeContext:null,retryLane:0};function Is(e){return{baseLanes:e,cachePool:null,transitions:null}}function Ms(e,t,n){var r,o=t.pendingProps,i=ei.current,s=!1,l=!!(128&t.flags);if((r=l)||(r=(null===e||null!==e.memoizedState)&&!!(2&i)),r?(s=!0,t.flags&=-129):null!==e&&null===e.memoizedState||(i|=1),Ao(ei,1&i),null===e)return ua(t),null!==(e=t.memoizedState)&&null!==(e=e.dehydrated)?(1&t.mode?"$!"===e.data?t.lanes=8:t.lanes=1073741824:t.lanes=1,null):(l=o.children,e=o.fallback,s?(o=t.mode,s=t.child,l={mode:"hidden",children:l},1&o||null===s?s=Ic(l,o,0,null):(s.childLanes=0,s.pendingProps=l),e=Dc(e,o,n,null),s.return=t,e.return=t,s.sibling=e,t.child=s,t.child.memoizedState=Is(n),t.memoizedState=Ds,e):Fs(t,l));if(null!==(i=e.memoizedState)&&null!==(r=i.dehydrated))return function(e,t,n,r,o,i,s){if(n)return 256&t.flags?(t.flags&=-257,zs(e,t,s,r=us(Error(a(422))))):null!==t.memoizedState?(t.child=e.child,t.flags|=128,null):(i=r.fallback,o=t.mode,r=Ic({mode:"visible",children:r.children},o,0,null),(i=Dc(i,o,s,null)).flags|=2,r.return=t,i.return=t,r.sibling=i,t.child=r,1&t.mode&&ka(t,e.child,null,s),t.child.memoizedState=Is(s),t.memoizedState=Ds,i);if(!(1&t.mode))return zs(e,t,s,null);if("$!"===o.data){if(r=o.nextSibling&&o.nextSibling.dataset)var l=r.dgst;return r=l,zs(e,t,s,r=us(i=Error(a(419)),r,void 0))}if(l=!!(s&e.childLanes),vs||l){if(null!==(r=jl)){switch(s&-s){case 4:o=2;break;case 16:o=8;break;case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:o=32;break;case 536870912:o=268435456;break;default:o=0}0!==(o=o&(r.suspendedLanes|s)?0:o)&&o!==i.retryLane&&(i.retryLane=o,Da(e,o),nc(r,e,o,-1))}return mc(),zs(e,t,s,r=us(Error(a(421))))}return"$?"===o.data?(t.flags|=128,t.child=e.child,t=Ac.bind(null,e),o._reactRetry=t,null):(e=i.treeContext,oa=co(o.nextSibling),ra=t,aa=!0,ia=null,null!==e&&(Ko[Qo++]=Zo,Ko[Qo++]=Xo,Ko[Qo++]=Yo,Zo=e.id,Xo=e.overflow,Yo=t),t=Fs(t,r.children),t.flags|=4096,t)}(e,t,l,o,r,i,n);if(s){s=o.fallback,l=t.mode,r=(i=e.child).sibling;var c={mode:"hidden",children:o.children};return 1&l||t.child===i?(o=Nc(i,c)).subtreeFlags=14680064&i.subtreeFlags:((o=t.child).childLanes=0,o.pendingProps=c,t.deletions=null),null!==r?s=Nc(r,s):(s=Dc(s,l,n,null)).flags|=2,s.return=t,o.return=t,o.sibling=s,t.child=o,o=s,s=t.child,l=null===(l=e.child.memoizedState)?Is(n):{baseLanes:l.baseLanes|n,cachePool:null,transitions:l.transitions},s.memoizedState=l,s.childLanes=e.childLanes&~n,t.memoizedState=Ds,o}return e=(s=e.child).sibling,o=Nc(s,{mode:"visible",children:o.children}),!(1&t.mode)&&(o.lanes=n),o.return=t,o.sibling=null,null!==e&&(null===(n=t.deletions)?(t.deletions=[e],t.flags|=16):n.push(e)),t.child=o,t.memoizedState=null,o}function Fs(e,t){return(t=Ic({mode:"visible",children:t},e.mode,0,null)).return=e,e.child=t}function zs(e,t,n,r){return null!==r&&ma(r),ka(t,e.child,null,n),(e=Fs(t,t.pendingProps.children)).flags|=2,t.memoizedState=null,e}function Bs(e,t,n){e.lanes|=t;var r=e.alternate;null!==r&&(r.lanes|=t),ja(e.return,t,n)}function $s(e,t,n,r,o){var a=e.memoizedState;null===a?e.memoizedState={isBackwards:t,rendering:null,renderingStartTime:0,last:r,tail:n,tailMode:o}:(a.isBackwards=t,a.rendering=null,a.renderingStartTime=0,a.last=r,a.tail=n,a.tailMode=o)}function Us(e,t,n){var r=t.pendingProps,o=r.revealOrder,a=r.tail;if(ws(e,t,r.children,n),2&(r=ei.current))r=1&r|2,t.flags|=128;else{if(null!==e&&128&e.flags)e:for(e=t.child;null!==e;){if(13===e.tag)null!==e.memoizedState&&Bs(e,n,t);else if(19===e.tag)Bs(e,n,t);else if(null!==e.child){e.child.return=e,e=e.child;continue}if(e===t)break e;for(;null===e.sibling;){if(null===e.return||e.return===t)break e;e=e.return}e.sibling.return=e.return,e=e.sibling}r&=1}if(Ao(ei,r),1&t.mode)switch(o){case"forwards":for(n=t.child,o=null;null!==n;)null!==(e=n.alternate)&&null===ti(e)&&(o=n),n=n.sibling;null===(n=o)?(o=t.child,t.child=null):(o=n.sibling,n.sibling=null),$s(t,!1,o,n,a);break;case"backwards":for(n=null,o=t.child,t.child=null;null!==o;){if(null!==(e=o.alternate)&&null===ti(e)){t.child=o;break}e=o.sibling,o.sibling=n,n=o,o=e}$s(t,!0,n,null,a);break;case"together":$s(t,!1,null,null,void 0);break;default:t.memoizedState=null}else t.memoizedState=null;return t.child}function qs(e,t){!(1&t.mode)&&null!==e&&(e.alternate=null,t.alternate=null,t.flags|=2)}function Gs(e,t,n){if(null!==e&&(t.dependencies=e.dependencies),Il|=t.lanes,!(n&t.childLanes))return null;if(null!==e&&t.child!==e.child)throw Error(a(153));if(null!==t.child){for(n=Nc(e=t.child,e.pendingProps),t.child=n,n.return=t;null!==e.sibling;)e=e.sibling,(n=n.sibling=Nc(e,e.pendingProps)).return=t;n.sibling=null}return t.child}function Hs(e,t){if(!aa)switch(e.tailMode){case"hidden":t=e.tail;for(var n=null;null!==t;)null!==t.alternate&&(n=t),t=t.sibling;null===n?e.tail=null:n.sibling=null;break;case"collapsed":n=e.tail;for(var r=null;null!==n;)null!==n.alternate&&(r=n),n=n.sibling;null===r?t||null===e.tail?e.tail=null:e.tail.sibling=null:r.sibling=null}}function Vs(e){var t=null!==e.alternate&&e.alternate.child===e.child,n=0,r=0;if(t)for(var o=e.child;null!==o;)n|=o.lanes|o.childLanes,r|=14680064&o.subtreeFlags,r|=14680064&o.flags,o.return=e,o=o.sibling;else for(o=e.child;null!==o;)n|=o.lanes|o.childLanes,r|=o.subtreeFlags,r|=o.flags,o.return=e,o=o.sibling;return e.subtreeFlags|=r,e.childLanes=n,t}function Ws(e,t,n){var r=t.pendingProps;switch(na(t),t.tag){case 2:case 16:case 15:case 0:case 11:case 7:case 8:case 12:case 9:case 14:return Vs(t),null;case 1:case 17:return No(t.type)&&Oo(),Vs(t),null;case 3:return r=t.stateNode,Za(),Co(Ro),Co(jo),ri(),r.pendingContext&&(r.context=r.pendingContext,r.pendingContext=null),null!==e&&null!==e.child||(pa(t)?t.flags|=4:null===e||e.memoizedState.isDehydrated&&!(256&t.flags)||(t.flags|=1024,null!==ia&&(ic(ia),ia=null))),Ls(e,t),Vs(t),null;case 5:Ja(t);var o=Qa(Ka.current);if(n=t.type,null!==e&&null!=t.stateNode)Ns(e,t,n,r,o),e.ref!==t.ref&&(t.flags|=512,t.flags|=2097152);else{if(!r){if(null===t.stateNode)throw Error(a(166));return Vs(t),null}if(e=Qa(Va.current),pa(t)){r=t.stateNode,n=t.type;var i=t.memoizedProps;switch(r[fo]=t,r[go]=i,e=!!(1&t.mode),n){case"dialog":zr("cancel",r),zr("close",r);break;case"iframe":case"object":case"embed":zr("load",r);break;case"video":case"audio":for(o=0;o<Dr.length;o++)zr(Dr[o],r);break;case"source":zr("error",r);break;case"img":case"image":case"link":zr("error",r),zr("load",r);break;case"details":zr("toggle",r);break;case"input":Y(r,i),zr("invalid",r);break;case"select":r._wrapperState={wasMultiple:!!i.multiple},zr("invalid",r);break;case"textarea":oe(r,i),zr("invalid",r)}for(var l in be(n,i),o=null,i)if(i.hasOwnProperty(l)){var c=i[l];"children"===l?"string"==typeof c?r.textContent!==c&&(!0!==i.suppressHydrationWarning&&Xr(r.textContent,c,e),o=["children",c]):"number"==typeof c&&r.textContent!==""+c&&(!0!==i.suppressHydrationWarning&&Xr(r.textContent,c,e),o=["children",""+c]):s.hasOwnProperty(l)&&null!=c&&"onScroll"===l&&zr("scroll",r)}switch(n){case"input":V(r),J(r,i,!0);break;case"textarea":V(r),ie(r);break;case"select":case"option":break;default:"function"==typeof i.onClick&&(r.onclick=Jr)}r=o,t.updateQueue=r,null!==r&&(t.flags|=4)}else{l=9===o.nodeType?o:o.ownerDocument,"http://www.w3.org/1999/xhtml"===e&&(e=se(n)),"http://www.w3.org/1999/xhtml"===e?"script"===n?((e=l.createElement("div")).innerHTML="<script><\/script>",e=e.removeChild(e.firstChild)):"string"==typeof r.is?e=l.createElement(n,{is:r.is}):(e=l.createElement(n),"select"===n&&(l=e,r.multiple?l.multiple=!0:r.size&&(l.size=r.size))):e=l.createElementNS(e,n),e[fo]=t,e[go]=r,Ps(e,t,!1,!1),t.stateNode=e;e:{switch(l=ve(n,r),n){case"dialog":zr("cancel",e),zr("close",e),o=r;break;case"iframe":case"object":case"embed":zr("load",e),o=r;break;case"video":case"audio":for(o=0;o<Dr.length;o++)zr(Dr[o],e);o=r;break;case"source":zr("error",e),o=r;break;case"img":case"image":case"link":zr("error",e),zr("load",e),o=r;break;case"details":zr("toggle",e),o=r;break;case"input":Y(e,r),o=Q(e,r),zr("invalid",e);break;case"option":default:o=r;break;case"select":e._wrapperState={wasMultiple:!!r.multiple},o=M({},r,{value:void 0}),zr("invalid",e);break;case"textarea":oe(e,r),o=re(e,r),zr("invalid",e)}for(i in be(n,o),c=o)if(c.hasOwnProperty(i)){var u=c[i];"style"===i?he(e,u):"dangerouslySetInnerHTML"===i?null!=(u=u?u.__html:void 0)&&de(e,u):"children"===i?"string"==typeof u?("textarea"!==n||""!==u)&&pe(e,u):"number"==typeof u&&pe(e,""+u):"suppressContentEditableWarning"!==i&&"suppressHydrationWarning"!==i&&"autoFocus"!==i&&(s.hasOwnProperty(i)?null!=u&&"onScroll"===i&&zr("scroll",e):null!=u&&v(e,i,u,l))}switch(n){case"input":V(e),J(e,r,!1);break;case"textarea":V(e),ie(e);break;case"option":null!=r.value&&e.setAttribute("value",""+G(r.value));break;case"select":e.multiple=!!r.multiple,null!=(i=r.value)?ne(e,!!r.multiple,i,!1):null!=r.defaultValue&&ne(e,!!r.multiple,r.defaultValue,!0);break;default:"function"==typeof o.onClick&&(e.onclick=Jr)}switch(n){case"button":case"input":case"select":case"textarea":r=!!r.autoFocus;break e;case"img":r=!0;break e;default:r=!1}}r&&(t.flags|=4)}null!==t.ref&&(t.flags|=512,t.flags|=2097152)}return Vs(t),null;case 6:if(e&&null!=t.stateNode)Os(e,t,e.memoizedProps,r);else{if("string"!=typeof r&&null===t.stateNode)throw Error(a(166));if(n=Qa(Ka.current),Qa(Va.current),pa(t)){if(r=t.stateNode,n=t.memoizedProps,r[fo]=t,(i=r.nodeValue!==n)&&null!==(e=ra))switch(e.tag){case 3:Xr(r.nodeValue,n,!!(1&e.mode));break;case 5:!0!==e.memoizedProps.suppressHydrationWarning&&Xr(r.nodeValue,n,!!(1&e.mode))}i&&(t.flags|=4)}else(r=(9===n.nodeType?n:n.ownerDocument).createTextNode(r))[fo]=t,t.stateNode=r}return Vs(t),null;case 13:if(Co(ei),r=t.memoizedState,null===e||null!==e.memoizedState&&null!==e.memoizedState.dehydrated){if(aa&&null!==oa&&1&t.mode&&!(128&t.flags))fa(),ga(),t.flags|=98560,i=!1;else if(i=pa(t),null!==r&&null!==r.dehydrated){if(null===e){if(!i)throw Error(a(318));if(!(i=null!==(i=t.memoizedState)?i.dehydrated:null))throw Error(a(317));i[fo]=t}else ga(),!(128&t.flags)&&(t.memoizedState=null),t.flags|=4;Vs(t),i=!1}else null!==ia&&(ic(ia),ia=null),i=!0;if(!i)return 65536&t.flags?t:null}return 128&t.flags?(t.lanes=n,t):((r=null!==r)!==(null!==e&&null!==e.memoizedState)&&r&&(t.child.flags|=8192,1&t.mode&&(null===e||1&ei.current?0===Ol&&(Ol=3):mc())),null!==t.updateQueue&&(t.flags|=4),Vs(t),null);case 4:return Za(),Ls(e,t),null===e&&Ur(t.stateNode.containerInfo),Vs(t),null;case 10:return Ta(t.type._context),Vs(t),null;case 19:if(Co(ei),null===(i=t.memoizedState))return Vs(t),null;if(r=!!(128&t.flags),null===(l=i.rendering))if(r)Hs(i,!1);else{if(0!==Ol||null!==e&&128&e.flags)for(e=t.child;null!==e;){if(null!==(l=ti(e))){for(t.flags|=128,Hs(i,!1),null!==(r=l.updateQueue)&&(t.updateQueue=r,t.flags|=4),t.subtreeFlags=0,r=n,n=t.child;null!==n;)e=r,(i=n).flags&=14680066,null===(l=i.alternate)?(i.childLanes=0,i.lanes=e,i.child=null,i.subtreeFlags=0,i.memoizedProps=null,i.memoizedState=null,i.updateQueue=null,i.dependencies=null,i.stateNode=null):(i.childLanes=l.childLanes,i.lanes=l.lanes,i.child=l.child,i.subtreeFlags=0,i.deletions=null,i.memoizedProps=l.memoizedProps,i.memoizedState=l.memoizedState,i.updateQueue=l.updateQueue,i.type=l.type,e=l.dependencies,i.dependencies=null===e?null:{lanes:e.lanes,firstContext:e.firstContext}),n=n.sibling;return Ao(ei,1&ei.current|2),t.child}e=e.sibling}null!==i.tail&&Ze()>Ul&&(t.flags|=128,r=!0,Hs(i,!1),t.lanes=4194304)}else{if(!r)if(null!==(e=ti(l))){if(t.flags|=128,r=!0,null!==(n=e.updateQueue)&&(t.updateQueue=n,t.flags|=4),Hs(i,!0),null===i.tail&&"hidden"===i.tailMode&&!l.alternate&&!aa)return Vs(t),null}else 2*Ze()-i.renderingStartTime>Ul&&1073741824!==n&&(t.flags|=128,r=!0,Hs(i,!1),t.lanes=4194304);i.isBackwards?(l.sibling=t.child,t.child=l):(null!==(n=i.last)?n.sibling=l:t.child=l,i.last=l)}return null!==i.tail?(t=i.tail,i.rendering=t,i.tail=t.sibling,i.renderingStartTime=Ze(),t.sibling=null,n=ei.current,Ao(ei,r?1&n|2:1&n),t):(Vs(t),null);case 22:case 23:return dc(),r=null!==t.memoizedState,null!==e&&null!==e.memoizedState!==r&&(t.flags|=8192),r&&1&t.mode?!!(1073741824&Ll)&&(Vs(t),6&t.subtreeFlags&&(t.flags|=8192)):Vs(t),null;case 24:case 25:return null}throw Error(a(156,t.tag))}function Ks(e,t){switch(na(t),t.tag){case 1:return No(t.type)&&Oo(),65536&(e=t.flags)?(t.flags=-65537&e|128,t):null;case 3:return Za(),Co(Ro),Co(jo),ri(),65536&(e=t.flags)&&!(128&e)?(t.flags=-65537&e|128,t):null;case 5:return Ja(t),null;case 13:if(Co(ei),null!==(e=t.memoizedState)&&null!==e.dehydrated){if(null===t.alternate)throw Error(a(340));ga()}return 65536&(e=t.flags)?(t.flags=-65537&e|128,t):null;case 19:return Co(ei),null;case 4:return Za(),null;case 10:return Ta(t.type._context),null;case 22:case 23:return dc(),null;default:return null}}Ps=function(e,t){for(var n=t.child;null!==n;){if(5===n.tag||6===n.tag)e.appendChild(n.stateNode);else if(4!==n.tag&&null!==n.child){n.child.return=n,n=n.child;continue}if(n===t)break;for(;null===n.sibling;){if(null===n.return||n.return===t)return;n=n.return}n.sibling.return=n.return,n=n.sibling}},Ls=function(){},Ns=function(e,t,n,r){var o=e.memoizedProps;if(o!==r){e=t.stateNode,Qa(Va.current);var a,i=null;switch(n){case"input":o=Q(e,o),r=Q(e,r),i=[];break;case"select":o=M({},o,{value:void 0}),r=M({},r,{value:void 0}),i=[];break;case"textarea":o=re(e,o),r=re(e,r),i=[];break;default:"function"!=typeof o.onClick&&"function"==typeof r.onClick&&(e.onclick=Jr)}for(u in be(n,r),n=null,o)if(!r.hasOwnProperty(u)&&o.hasOwnProperty(u)&&null!=o[u])if("style"===u){var l=o[u];for(a in l)l.hasOwnProperty(a)&&(n||(n={}),n[a]="")}else"dangerouslySetInnerHTML"!==u&&"children"!==u&&"suppressContentEditableWarning"!==u&&"suppressHydrationWarning"!==u&&"autoFocus"!==u&&(s.hasOwnProperty(u)?i||(i=[]):(i=i||[]).push(u,null));for(u in r){var c=r[u];if(l=null!=o?o[u]:void 0,r.hasOwnProperty(u)&&c!==l&&(null!=c||null!=l))if("style"===u)if(l){for(a in l)!l.hasOwnProperty(a)||c&&c.hasOwnProperty(a)||(n||(n={}),n[a]="");for(a in c)c.hasOwnProperty(a)&&l[a]!==c[a]&&(n||(n={}),n[a]=c[a])}else n||(i||(i=[]),i.push(u,n)),n=c;else"dangerouslySetInnerHTML"===u?(c=c?c.__html:void 0,l=l?l.__html:void 0,null!=c&&l!==c&&(i=i||[]).push(u,c)):"children"===u?"string"!=typeof c&&"number"!=typeof c||(i=i||[]).push(u,""+c):"suppressContentEditableWarning"!==u&&"suppressHydrationWarning"!==u&&(s.hasOwnProperty(u)?(null!=c&&"onScroll"===u&&zr("scroll",e),i||l===c||(i=[])):(i=i||[]).push(u,c))}n&&(i=i||[]).push("style",n);var u=i;(t.updateQueue=u)&&(t.flags|=4)}},Os=function(e,t,n,r){n!==r&&(t.flags|=4)};var Qs=!1,Ys=!1,Zs="function"==typeof WeakSet?WeakSet:Set,Xs=null;function Js(e,t){var n=e.ref;if(null!==n)if("function"==typeof n)try{n(null)}catch(r){_c(e,t,r)}else n.current=null}function el(e,t,n){try{n()}catch(r){_c(e,t,r)}}var tl=!1;function nl(e,t,n){var r=t.updateQueue;if(null!==(r=null!==r?r.lastEffect:null)){var o=r=r.next;do{if((o.tag&e)===e){var a=o.destroy;o.destroy=void 0,void 0!==a&&el(t,n,a)}o=o.next}while(o!==r)}}function rl(e,t){if(null!==(t=null!==(t=t.updateQueue)?t.lastEffect:null)){var n=t=t.next;do{if((n.tag&e)===e){var r=n.create;n.destroy=r()}n=n.next}while(n!==t)}}function ol(e){var t=e.ref;if(null!==t){var n=e.stateNode;e.tag,e=n,"function"==typeof t?t(e):t.current=e}}function al(e){var t=e.alternate;null!==t&&(e.alternate=null,al(t)),e.child=null,e.deletions=null,e.sibling=null,5===e.tag&&(null!==(t=e.stateNode)&&(delete t[fo],delete t[go],delete t[ho],delete t[yo],delete t[bo])),e.stateNode=null,e.return=null,e.dependencies=null,e.memoizedProps=null,e.memoizedState=null,e.pendingProps=null,e.stateNode=null,e.updateQueue=null}function il(e){return 5===e.tag||3===e.tag||4===e.tag}function sl(e){e:for(;;){for(;null===e.sibling;){if(null===e.return||il(e.return))return null;e=e.return}for(e.sibling.return=e.return,e=e.sibling;5!==e.tag&&6!==e.tag&&18!==e.tag;){if(2&e.flags)continue e;if(null===e.child||4===e.tag)continue e;e.child.return=e,e=e.child}if(!(2&e.flags))return e.stateNode}}function ll(e,t,n){var r=e.tag;if(5===r||6===r)e=e.stateNode,t?8===n.nodeType?n.parentNode.insertBefore(e,t):n.insertBefore(e,t):(8===n.nodeType?(t=n.parentNode).insertBefore(e,n):(t=n).appendChild(e),null!=(n=n._reactRootContainer)||null!==t.onclick||(t.onclick=Jr));else if(4!==r&&null!==(e=e.child))for(ll(e,t,n),e=e.sibling;null!==e;)ll(e,t,n),e=e.sibling}function cl(e,t,n){var r=e.tag;if(5===r||6===r)e=e.stateNode,t?n.insertBefore(e,t):n.appendChild(e);else if(4!==r&&null!==(e=e.child))for(cl(e,t,n),e=e.sibling;null!==e;)cl(e,t,n),e=e.sibling}var ul=null,dl=!1;function pl(e,t,n){for(n=n.child;null!==n;)fl(e,t,n),n=n.sibling}function fl(e,t,n){if(at&&"function"==typeof at.onCommitFiberUnmount)try{at.onCommitFiberUnmount(ot,n)}catch(s){}switch(n.tag){case 5:Ys||Js(n,t);case 6:var r=ul,o=dl;ul=null,pl(e,t,n),dl=o,null!==(ul=r)&&(dl?(e=ul,n=n.stateNode,8===e.nodeType?e.parentNode.removeChild(n):e.removeChild(n)):ul.removeChild(n.stateNode));break;case 18:null!==ul&&(dl?(e=ul,n=n.stateNode,8===e.nodeType?lo(e.parentNode,n):1===e.nodeType&&lo(e,n),Ut(e)):lo(ul,n.stateNode));break;case 4:r=ul,o=dl,ul=n.stateNode.containerInfo,dl=!0,pl(e,t,n),ul=r,dl=o;break;case 0:case 11:case 14:case 15:if(!Ys&&(null!==(r=n.updateQueue)&&null!==(r=r.lastEffect))){o=r=r.next;do{var a=o,i=a.destroy;a=a.tag,void 0!==i&&(2&a||4&a)&&el(n,t,i),o=o.next}while(o!==r)}pl(e,t,n);break;case 1:if(!Ys&&(Js(n,t),"function"==typeof(r=n.stateNode).componentWillUnmount))try{r.props=n.memoizedProps,r.state=n.memoizedState,r.componentWillUnmount()}catch(s){_c(n,t,s)}pl(e,t,n);break;case 21:pl(e,t,n);break;case 22:1&n.mode?(Ys=(r=Ys)||null!==n.memoizedState,pl(e,t,n),Ys=r):pl(e,t,n);break;default:pl(e,t,n)}}function gl(e){var t=e.updateQueue;if(null!==t){e.updateQueue=null;var n=e.stateNode;null===n&&(n=e.stateNode=new Zs),t.forEach((function(t){var r=Tc.bind(null,e,t);n.has(t)||(n.add(t),t.then(r,r))}))}}function ml(e,t){var n=t.deletions;if(null!==n)for(var r=0;r<n.length;r++){var o=n[r];try{var i=e,s=t,l=s;e:for(;null!==l;){switch(l.tag){case 5:ul=l.stateNode,dl=!1;break e;case 3:case 4:ul=l.stateNode.containerInfo,dl=!0;break e}l=l.return}if(null===ul)throw Error(a(160));fl(i,s,o),ul=null,dl=!1;var c=o.alternate;null!==c&&(c.return=null),o.return=null}catch(u){_c(o,t,u)}}if(12854&t.subtreeFlags)for(t=t.child;null!==t;)hl(t,e),t=t.sibling}function hl(e,t){var n=e.alternate,r=e.flags;switch(e.tag){case 0:case 11:case 14:case 15:if(ml(t,e),yl(e),4&r){try{nl(3,e,e.return),rl(3,e)}catch(h){_c(e,e.return,h)}try{nl(5,e,e.return)}catch(h){_c(e,e.return,h)}}break;case 1:ml(t,e),yl(e),512&r&&null!==n&&Js(n,n.return);break;case 5:if(ml(t,e),yl(e),512&r&&null!==n&&Js(n,n.return),32&e.flags){var o=e.stateNode;try{pe(o,"")}catch(h){_c(e,e.return,h)}}if(4&r&&null!=(o=e.stateNode)){var i=e.memoizedProps,s=null!==n?n.memoizedProps:i,l=e.type,c=e.updateQueue;if(e.updateQueue=null,null!==c)try{"input"===l&&"radio"===i.type&&null!=i.name&&Z(o,i),ve(l,s);var u=ve(l,i);for(s=0;s<c.length;s+=2){var d=c[s],p=c[s+1];"style"===d?he(o,p):"dangerouslySetInnerHTML"===d?de(o,p):"children"===d?pe(o,p):v(o,d,p,u)}switch(l){case"input":X(o,i);break;case"textarea":ae(o,i);break;case"select":var f=o._wrapperState.wasMultiple;o._wrapperState.wasMultiple=!!i.multiple;var g=i.value;null!=g?ne(o,!!i.multiple,g,!1):f!==!!i.multiple&&(null!=i.defaultValue?ne(o,!!i.multiple,i.defaultValue,!0):ne(o,!!i.multiple,i.multiple?[]:"",!1))}o[go]=i}catch(h){_c(e,e.return,h)}}break;case 6:if(ml(t,e),yl(e),4&r){if(null===e.stateNode)throw Error(a(162));o=e.stateNode,i=e.memoizedProps;try{o.nodeValue=i}catch(h){_c(e,e.return,h)}}break;case 3:if(ml(t,e),yl(e),4&r&&null!==n&&n.memoizedState.isDehydrated)try{Ut(t.containerInfo)}catch(h){_c(e,e.return,h)}break;case 4:default:ml(t,e),yl(e);break;case 13:ml(t,e),yl(e),8192&(o=e.child).flags&&(i=null!==o.memoizedState,o.stateNode.isHidden=i,!i||null!==o.alternate&&null!==o.alternate.memoizedState||($l=Ze())),4&r&&gl(e);break;case 22:if(d=null!==n&&null!==n.memoizedState,1&e.mode?(Ys=(u=Ys)||d,ml(t,e),Ys=u):ml(t,e),yl(e),8192&r){if(u=null!==e.memoizedState,(e.stateNode.isHidden=u)&&!d&&1&e.mode)for(Xs=e,d=e.child;null!==d;){for(p=Xs=d;null!==Xs;){switch(g=(f=Xs).child,f.tag){case 0:case 11:case 14:case 15:nl(4,f,f.return);break;case 1:Js(f,f.return);var m=f.stateNode;if("function"==typeof m.componentWillUnmount){r=f,n=f.return;try{t=r,m.props=t.memoizedProps,m.state=t.memoizedState,m.componentWillUnmount()}catch(h){_c(r,n,h)}}break;case 5:Js(f,f.return);break;case 22:if(null!==f.memoizedState){kl(p);continue}}null!==g?(g.return=f,Xs=g):kl(p)}d=d.sibling}e:for(d=null,p=e;;){if(5===p.tag){if(null===d){d=p;try{o=p.stateNode,u?"function"==typeof(i=o.style).setProperty?i.setProperty("display","none","important"):i.display="none":(l=p.stateNode,s=null!=(c=p.memoizedProps.style)&&c.hasOwnProperty("display")?c.display:null,l.style.display=me("display",s))}catch(h){_c(e,e.return,h)}}}else if(6===p.tag){if(null===d)try{p.stateNode.nodeValue=u?"":p.memoizedProps}catch(h){_c(e,e.return,h)}}else if((22!==p.tag&&23!==p.tag||null===p.memoizedState||p===e)&&null!==p.child){p.child.return=p,p=p.child;continue}if(p===e)break e;for(;null===p.sibling;){if(null===p.return||p.return===e)break e;d===p&&(d=null),p=p.return}d===p&&(d=null),p.sibling.return=p.return,p=p.sibling}}break;case 19:ml(t,e),yl(e),4&r&&gl(e);case 21:}}function yl(e){var t=e.flags;if(2&t){try{e:{for(var n=e.return;null!==n;){if(il(n)){var r=n;break e}n=n.return}throw Error(a(160))}switch(r.tag){case 5:var o=r.stateNode;32&r.flags&&(pe(o,""),r.flags&=-33),cl(e,sl(e),o);break;case 3:case 4:var i=r.stateNode.containerInfo;ll(e,sl(e),i);break;default:throw Error(a(161))}}catch(s){_c(e,e.return,s)}e.flags&=-3}4096&t&&(e.flags&=-4097)}function bl(e,t,n){Xs=e,vl(e,t,n)}function vl(e,t,n){for(var r=!!(1&e.mode);null!==Xs;){var o=Xs,a=o.child;if(22===o.tag&&r){var i=null!==o.memoizedState||Qs;if(!i){var s=o.alternate,l=null!==s&&null!==s.memoizedState||Ys;s=Qs;var c=Ys;if(Qs=i,(Ys=l)&&!c)for(Xs=o;null!==Xs;)l=(i=Xs).child,22===i.tag&&null!==i.memoizedState?xl(o):null!==l?(l.return=i,Xs=l):xl(o);for(;null!==a;)Xs=a,vl(a,t,n),a=a.sibling;Xs=o,Qs=s,Ys=c}wl(e)}else 8772&o.subtreeFlags&&null!==a?(a.return=o,Xs=a):wl(e)}}function wl(e){for(;null!==Xs;){var t=Xs;if(8772&t.flags){var n=t.alternate;try{if(8772&t.flags)switch(t.tag){case 0:case 11:case 15:Ys||rl(5,t);break;case 1:var r=t.stateNode;if(4&t.flags&&!Ys)if(null===n)r.componentDidMount();else{var o=t.elementType===t.type?n.memoizedProps:ns(t.type,n.memoizedProps);r.componentDidUpdate(o,n.memoizedState,r.__reactInternalSnapshotBeforeUpdate)}var i=t.updateQueue;null!==i&&Ga(t,i,r);break;case 3:var s=t.updateQueue;if(null!==s){if(n=null,null!==t.child)switch(t.child.tag){case 5:case 1:n=t.child.stateNode}Ga(t,s,n)}break;case 5:var l=t.stateNode;if(null===n&&4&t.flags){n=l;var c=t.memoizedProps;switch(t.type){case"button":case"input":case"select":case"textarea":c.autoFocus&&n.focus();break;case"img":c.src&&(n.src=c.src)}}break;case 6:case 4:case 12:case 19:case 17:case 21:case 22:case 23:case 25:break;case 13:if(null===t.memoizedState){var u=t.alternate;if(null!==u){var d=u.memoizedState;if(null!==d){var p=d.dehydrated;null!==p&&Ut(p)}}}break;default:throw Error(a(163))}Ys||512&t.flags&&ol(t)}catch(f){_c(t,t.return,f)}}if(t===e){Xs=null;break}if(null!==(n=t.sibling)){n.return=t.return,Xs=n;break}Xs=t.return}}function kl(e){for(;null!==Xs;){var t=Xs;if(t===e){Xs=null;break}var n=t.sibling;if(null!==n){n.return=t.return,Xs=n;break}Xs=t.return}}function xl(e){for(;null!==Xs;){var t=Xs;try{switch(t.tag){case 0:case 11:case 15:var n=t.return;try{rl(4,t)}catch(l){_c(t,n,l)}break;case 1:var r=t.stateNode;if("function"==typeof r.componentDidMount){var o=t.return;try{r.componentDidMount()}catch(l){_c(t,o,l)}}var a=t.return;try{ol(t)}catch(l){_c(t,a,l)}break;case 5:var i=t.return;try{ol(t)}catch(l){_c(t,i,l)}}}catch(l){_c(t,t.return,l)}if(t===e){Xs=null;break}var s=t.sibling;if(null!==s){s.return=t.return,Xs=s;break}Xs=t.return}}var Sl,_l=Math.ceil,El=w.ReactCurrentDispatcher,Cl=w.ReactCurrentOwner,Al=w.ReactCurrentBatchConfig,Tl=0,jl=null,Rl=null,Pl=0,Ll=0,Nl=Eo(0),Ol=0,Dl=null,Il=0,Ml=0,Fl=0,zl=null,Bl=null,$l=0,Ul=1/0,ql=null,Gl=!1,Hl=null,Vl=null,Wl=!1,Kl=null,Ql=0,Yl=0,Zl=null,Xl=-1,Jl=0;function ec(){return 6&Tl?Ze():-1!==Xl?Xl:Xl=Ze()}function tc(e){return 1&e.mode?2&Tl&&0!==Pl?Pl&-Pl:null!==ha.transition?(0===Jl&&(Jl=mt()),Jl):0!==(e=vt)?e:e=void 0===(e=window.event)?16:Yt(e.type):1}function nc(e,t,n,r){if(50<Yl)throw Yl=0,Zl=null,Error(a(185));yt(e,n,r),2&Tl&&e===jl||(e===jl&&(!(2&Tl)&&(Ml|=n),4===Ol&&sc(e,Pl)),rc(e,r),1===n&&0===Tl&&!(1&t.mode)&&(Ul=Ze()+500,Bo&&qo()))}function rc(e,t){var n=e.callbackNode;!function(e,t){for(var n=e.suspendedLanes,r=e.pingedLanes,o=e.expirationTimes,a=e.pendingLanes;0<a;){var i=31-it(a),s=1<<i,l=o[i];-1===l?s&n&&!(s&r)||(o[i]=ft(s,t)):l<=t&&(e.expiredLanes|=s),a&=~s}}(e,t);var r=pt(e,e===jl?Pl:0);if(0===r)null!==n&&Ke(n),e.callbackNode=null,e.callbackPriority=0;else if(t=r&-r,e.callbackPriority!==t){if(null!=n&&Ke(n),1===t)0===e.tag?function(e){Bo=!0,Uo(e)}(lc.bind(null,e)):Uo(lc.bind(null,e)),io((function(){!(6&Tl)&&qo()})),n=null;else{switch(wt(r)){case 1:n=Je;break;case 4:n=et;break;case 16:default:n=tt;break;case 536870912:n=rt}n=jc(n,oc.bind(null,e))}e.callbackPriority=t,e.callbackNode=n}}function oc(e,t){if(Xl=-1,Jl=0,6&Tl)throw Error(a(327));var n=e.callbackNode;if(xc()&&e.callbackNode!==n)return null;var r=pt(e,e===jl?Pl:0);if(0===r)return null;if(30&r||r&e.expiredLanes||t)t=hc(e,r);else{t=r;var o=Tl;Tl|=2;var i=gc();for(jl===e&&Pl===t||(ql=null,Ul=Ze()+500,pc(e,t));;)try{bc();break}catch(l){fc(e,l)}Aa(),El.current=i,Tl=o,null!==Rl?t=0:(jl=null,Pl=0,t=Ol)}if(0!==t){if(2===t&&(0!==(o=gt(e))&&(r=o,t=ac(e,o))),1===t)throw n=Dl,pc(e,0),sc(e,r),rc(e,Ze()),n;if(6===t)sc(e,r);else{if(o=e.current.alternate,!(30&r||function(e){for(var t=e;;){if(16384&t.flags){var n=t.updateQueue;if(null!==n&&null!==(n=n.stores))for(var r=0;r<n.length;r++){var o=n[r],a=o.getSnapshot;o=o.value;try{if(!sr(a(),o))return!1}catch(s){return!1}}}if(n=t.child,16384&t.subtreeFlags&&null!==n)n.return=t,t=n;else{if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return!0;t=t.return}t.sibling.return=t.return,t=t.sibling}}return!0}(o)||(t=hc(e,r),2===t&&(i=gt(e),0!==i&&(r=i,t=ac(e,i))),1!==t)))throw n=Dl,pc(e,0),sc(e,r),rc(e,Ze()),n;switch(e.finishedWork=o,e.finishedLanes=r,t){case 0:case 1:throw Error(a(345));case 2:case 5:kc(e,Bl,ql);break;case 3:if(sc(e,r),(130023424&r)===r&&10<(t=$l+500-Ze())){if(0!==pt(e,0))break;if(((o=e.suspendedLanes)&r)!==r){ec(),e.pingedLanes|=e.suspendedLanes&o;break}e.timeoutHandle=ro(kc.bind(null,e,Bl,ql),t);break}kc(e,Bl,ql);break;case 4:if(sc(e,r),(4194240&r)===r)break;for(t=e.eventTimes,o=-1;0<r;){var s=31-it(r);i=1<<s,(s=t[s])>o&&(o=s),r&=~i}if(r=o,10<(r=(120>(r=Ze()-r)?120:480>r?480:1080>r?1080:1920>r?1920:3e3>r?3e3:4320>r?4320:1960*_l(r/1960))-r)){e.timeoutHandle=ro(kc.bind(null,e,Bl,ql),r);break}kc(e,Bl,ql);break;default:throw Error(a(329))}}}return rc(e,Ze()),e.callbackNode===n?oc.bind(null,e):null}function ac(e,t){var n=zl;return e.current.memoizedState.isDehydrated&&(pc(e,t).flags|=256),2!==(e=hc(e,t))&&(t=Bl,Bl=n,null!==t&&ic(t)),e}function ic(e){null===Bl?Bl=e:Bl.push.apply(Bl,e)}function sc(e,t){for(t&=~Fl,t&=~Ml,e.suspendedLanes|=t,e.pingedLanes&=~t,e=e.expirationTimes;0<t;){var n=31-it(t),r=1<<n;e[n]=-1,t&=~r}}function lc(e){if(6&Tl)throw Error(a(327));xc();var t=pt(e,0);if(!(1&t))return rc(e,Ze()),null;var n=hc(e,t);if(0!==e.tag&&2===n){var r=gt(e);0!==r&&(t=r,n=ac(e,r))}if(1===n)throw n=Dl,pc(e,0),sc(e,t),rc(e,Ze()),n;if(6===n)throw Error(a(345));return e.finishedWork=e.current.alternate,e.finishedLanes=t,kc(e,Bl,ql),rc(e,Ze()),null}function cc(e,t){var n=Tl;Tl|=1;try{return e(t)}finally{0===(Tl=n)&&(Ul=Ze()+500,Bo&&qo())}}function uc(e){null!==Kl&&0===Kl.tag&&!(6&Tl)&&xc();var t=Tl;Tl|=1;var n=Al.transition,r=vt;try{if(Al.transition=null,vt=1,e)return e()}finally{vt=r,Al.transition=n,!(6&(Tl=t))&&qo()}}function dc(){Ll=Nl.current,Co(Nl)}function pc(e,t){e.finishedWork=null,e.finishedLanes=0;var n=e.timeoutHandle;if(-1!==n&&(e.timeoutHandle=-1,oo(n)),null!==Rl)for(n=Rl.return;null!==n;){var r=n;switch(na(r),r.tag){case 1:null!=(r=r.type.childContextTypes)&&Oo();break;case 3:Za(),Co(Ro),Co(jo),ri();break;case 5:Ja(r);break;case 4:Za();break;case 13:case 19:Co(ei);break;case 10:Ta(r.type._context);break;case 22:case 23:dc()}n=n.return}if(jl=e,Rl=e=Nc(e.current,null),Pl=Ll=t,Ol=0,Dl=null,Fl=Ml=Il=0,Bl=zl=null,null!==La){for(t=0;t<La.length;t++)if(null!==(r=(n=La[t]).interleaved)){n.interleaved=null;var o=r.next,a=n.pending;if(null!==a){var i=a.next;a.next=o,r.next=i}n.pending=r}La=null}return e}function fc(e,t){for(;;){var n=Rl;try{if(Aa(),oi.current=Xi,ui){for(var r=si.memoizedState;null!==r;){var o=r.queue;null!==o&&(o.pending=null),r=r.next}ui=!1}if(ii=0,ci=li=si=null,di=!1,pi=0,Cl.current=null,null===n||null===n.return){Ol=1,Dl=t,Rl=null;break}e:{var i=e,s=n.return,l=n,c=t;if(t=Pl,l.flags|=32768,null!==c&&"object"==typeof c&&"function"==typeof c.then){var u=c,d=l,p=d.tag;if(!(1&d.mode||0!==p&&11!==p&&15!==p)){var f=d.alternate;f?(d.updateQueue=f.updateQueue,d.memoizedState=f.memoizedState,d.lanes=f.lanes):(d.updateQueue=null,d.memoizedState=null)}var g=hs(s);if(null!==g){g.flags&=-257,ys(g,s,l,0,t),1&g.mode&&ms(i,u,t),c=u;var m=(t=g).updateQueue;if(null===m){var h=new Set;h.add(c),t.updateQueue=h}else m.add(c);break e}if(!(1&t)){ms(i,u,t),mc();break e}c=Error(a(426))}else if(aa&&1&l.mode){var y=hs(s);if(null!==y){!(65536&y.flags)&&(y.flags|=256),ys(y,s,l,0,t),ma(cs(c,l));break e}}i=c=cs(c,l),4!==Ol&&(Ol=2),null===zl?zl=[i]:zl.push(i),i=s;do{switch(i.tag){case 3:i.flags|=65536,t&=-t,i.lanes|=t,Ua(i,fs(0,c,t));break e;case 1:l=c;var b=i.type,v=i.stateNode;if(!(128&i.flags||"function"!=typeof b.getDerivedStateFromError&&(null===v||"function"!=typeof v.componentDidCatch||null!==Vl&&Vl.has(v)))){i.flags|=65536,t&=-t,i.lanes|=t,Ua(i,gs(i,l,t));break e}}i=i.return}while(null!==i)}wc(n)}catch(w){t=w,Rl===n&&null!==n&&(Rl=n=n.return);continue}break}}function gc(){var e=El.current;return El.current=Xi,null===e?Xi:e}function mc(){0!==Ol&&3!==Ol&&2!==Ol||(Ol=4),null===jl||!(268435455&Il)&&!(268435455&Ml)||sc(jl,Pl)}function hc(e,t){var n=Tl;Tl|=2;var r=gc();for(jl===e&&Pl===t||(ql=null,pc(e,t));;)try{yc();break}catch(o){fc(e,o)}if(Aa(),Tl=n,El.current=r,null!==Rl)throw Error(a(261));return jl=null,Pl=0,Ol}function yc(){for(;null!==Rl;)vc(Rl)}function bc(){for(;null!==Rl&&!Qe();)vc(Rl)}function vc(e){var t=Sl(e.alternate,e,Ll);e.memoizedProps=e.pendingProps,null===t?wc(e):Rl=t,Cl.current=null}function wc(e){var t=e;do{var n=t.alternate;if(e=t.return,32768&t.flags){if(null!==(n=Ks(n,t)))return n.flags&=32767,void(Rl=n);if(null===e)return Ol=6,void(Rl=null);e.flags|=32768,e.subtreeFlags=0,e.deletions=null}else if(null!==(n=Ws(n,t,Ll)))return void(Rl=n);if(null!==(t=t.sibling))return void(Rl=t);Rl=t=e}while(null!==t);0===Ol&&(Ol=5)}function kc(e,t,n){var r=vt,o=Al.transition;try{Al.transition=null,vt=1,function(e,t,n,r){do{xc()}while(null!==Kl);if(6&Tl)throw Error(a(327));n=e.finishedWork;var o=e.finishedLanes;if(null===n)return null;if(e.finishedWork=null,e.finishedLanes=0,n===e.current)throw Error(a(177));e.callbackNode=null,e.callbackPriority=0;var i=n.lanes|n.childLanes;if(function(e,t){var n=e.pendingLanes&~t;e.pendingLanes=t,e.suspendedLanes=0,e.pingedLanes=0,e.expiredLanes&=t,e.mutableReadLanes&=t,e.entangledLanes&=t,t=e.entanglements;var r=e.eventTimes;for(e=e.expirationTimes;0<n;){var o=31-it(n),a=1<<o;t[o]=0,r[o]=-1,e[o]=-1,n&=~a}}(e,i),e===jl&&(Rl=jl=null,Pl=0),!(2064&n.subtreeFlags)&&!(2064&n.flags)||Wl||(Wl=!0,jc(tt,(function(){return xc(),null}))),i=!!(15990&n.flags),!!(15990&n.subtreeFlags)||i){i=Al.transition,Al.transition=null;var s=vt;vt=1;var l=Tl;Tl|=4,Cl.current=null,function(e,t){if(eo=Gt,fr(e=pr())){if("selectionStart"in e)var n={start:e.selectionStart,end:e.selectionEnd};else e:{var r=(n=(n=e.ownerDocument)&&n.defaultView||window).getSelection&&n.getSelection();if(r&&0!==r.rangeCount){n=r.anchorNode;var o=r.anchorOffset,i=r.focusNode;r=r.focusOffset;try{n.nodeType,i.nodeType}catch(k){n=null;break e}var s=0,l=-1,c=-1,u=0,d=0,p=e,f=null;t:for(;;){for(var g;p!==n||0!==o&&3!==p.nodeType||(l=s+o),p!==i||0!==r&&3!==p.nodeType||(c=s+r),3===p.nodeType&&(s+=p.nodeValue.length),null!==(g=p.firstChild);)f=p,p=g;for(;;){if(p===e)break t;if(f===n&&++u===o&&(l=s),f===i&&++d===r&&(c=s),null!==(g=p.nextSibling))break;f=(p=f).parentNode}p=g}n=-1===l||-1===c?null:{start:l,end:c}}else n=null}n=n||{start:0,end:0}}else n=null;for(to={focusedElem:e,selectionRange:n},Gt=!1,Xs=t;null!==Xs;)if(e=(t=Xs).child,1028&t.subtreeFlags&&null!==e)e.return=t,Xs=e;else for(;null!==Xs;){t=Xs;try{var m=t.alternate;if(1024&t.flags)switch(t.tag){case 0:case 11:case 15:case 5:case 6:case 4:case 17:break;case 1:if(null!==m){var h=m.memoizedProps,y=m.memoizedState,b=t.stateNode,v=b.getSnapshotBeforeUpdate(t.elementType===t.type?h:ns(t.type,h),y);b.__reactInternalSnapshotBeforeUpdate=v}break;case 3:var w=t.stateNode.containerInfo;1===w.nodeType?w.textContent="":9===w.nodeType&&w.documentElement&&w.removeChild(w.documentElement);break;default:throw Error(a(163))}}catch(k){_c(t,t.return,k)}if(null!==(e=t.sibling)){e.return=t.return,Xs=e;break}Xs=t.return}m=tl,tl=!1}(e,n),hl(n,e),gr(to),Gt=!!eo,to=eo=null,e.current=n,bl(n,e,o),Ye(),Tl=l,vt=s,Al.transition=i}else e.current=n;if(Wl&&(Wl=!1,Kl=e,Ql=o),i=e.pendingLanes,0===i&&(Vl=null),function(e){if(at&&"function"==typeof at.onCommitFiberRoot)try{at.onCommitFiberRoot(ot,e,void 0,!(128&~e.current.flags))}catch(t){}}(n.stateNode),rc(e,Ze()),null!==t)for(r=e.onRecoverableError,n=0;n<t.length;n++)o=t[n],r(o.value,{componentStack:o.stack,digest:o.digest});if(Gl)throw Gl=!1,e=Hl,Hl=null,e;!!(1&Ql)&&0!==e.tag&&xc(),i=e.pendingLanes,1&i?e===Zl?Yl++:(Yl=0,Zl=e):Yl=0,qo()}(e,t,n,r)}finally{Al.transition=o,vt=r}return null}function xc(){if(null!==Kl){var e=wt(Ql),t=Al.transition,n=vt;try{if(Al.transition=null,vt=16>e?16:e,null===Kl)var r=!1;else{if(e=Kl,Kl=null,Ql=0,6&Tl)throw Error(a(331));var o=Tl;for(Tl|=4,Xs=e.current;null!==Xs;){var i=Xs,s=i.child;if(16&Xs.flags){var l=i.deletions;if(null!==l){for(var c=0;c<l.length;c++){var u=l[c];for(Xs=u;null!==Xs;){var d=Xs;switch(d.tag){case 0:case 11:case 15:nl(8,d,i)}var p=d.child;if(null!==p)p.return=d,Xs=p;else for(;null!==Xs;){var f=(d=Xs).sibling,g=d.return;if(al(d),d===u){Xs=null;break}if(null!==f){f.return=g,Xs=f;break}Xs=g}}}var m=i.alternate;if(null!==m){var h=m.child;if(null!==h){m.child=null;do{var y=h.sibling;h.sibling=null,h=y}while(null!==h)}}Xs=i}}if(2064&i.subtreeFlags&&null!==s)s.return=i,Xs=s;else e:for(;null!==Xs;){if(2048&(i=Xs).flags)switch(i.tag){case 0:case 11:case 15:nl(9,i,i.return)}var b=i.sibling;if(null!==b){b.return=i.return,Xs=b;break e}Xs=i.return}}var v=e.current;for(Xs=v;null!==Xs;){var w=(s=Xs).child;if(2064&s.subtreeFlags&&null!==w)w.return=s,Xs=w;else e:for(s=v;null!==Xs;){if(2048&(l=Xs).flags)try{switch(l.tag){case 0:case 11:case 15:rl(9,l)}}catch(x){_c(l,l.return,x)}if(l===s){Xs=null;break e}var k=l.sibling;if(null!==k){k.return=l.return,Xs=k;break e}Xs=l.return}}if(Tl=o,qo(),at&&"function"==typeof at.onPostCommitFiberRoot)try{at.onPostCommitFiberRoot(ot,e)}catch(x){}r=!0}return r}finally{vt=n,Al.transition=t}}return!1}function Sc(e,t,n){e=Ba(e,t=fs(0,t=cs(n,t),1),1),t=ec(),null!==e&&(yt(e,1,t),rc(e,t))}function _c(e,t,n){if(3===e.tag)Sc(e,e,n);else for(;null!==t;){if(3===t.tag){Sc(t,e,n);break}if(1===t.tag){var r=t.stateNode;if("function"==typeof t.type.getDerivedStateFromError||"function"==typeof r.componentDidCatch&&(null===Vl||!Vl.has(r))){t=Ba(t,e=gs(t,e=cs(n,e),1),1),e=ec(),null!==t&&(yt(t,1,e),rc(t,e));break}}t=t.return}}function Ec(e,t,n){var r=e.pingCache;null!==r&&r.delete(t),t=ec(),e.pingedLanes|=e.suspendedLanes&n,jl===e&&(Pl&n)===n&&(4===Ol||3===Ol&&(130023424&Pl)===Pl&&500>Ze()-$l?pc(e,0):Fl|=n),rc(e,t)}function Cc(e,t){0===t&&(1&e.mode?(t=ut,!(130023424&(ut<<=1))&&(ut=4194304)):t=1);var n=ec();null!==(e=Da(e,t))&&(yt(e,t,n),rc(e,n))}function Ac(e){var t=e.memoizedState,n=0;null!==t&&(n=t.retryLane),Cc(e,n)}function Tc(e,t){var n=0;switch(e.tag){case 13:var r=e.stateNode,o=e.memoizedState;null!==o&&(n=o.retryLane);break;case 19:r=e.stateNode;break;default:throw Error(a(314))}null!==r&&r.delete(t),Cc(e,n)}function jc(e,t){return We(e,t)}function Rc(e,t,n,r){this.tag=e,this.key=n,this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null,this.index=0,this.ref=null,this.pendingProps=t,this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null,this.mode=r,this.subtreeFlags=this.flags=0,this.deletions=null,this.childLanes=this.lanes=0,this.alternate=null}function Pc(e,t,n,r){return new Rc(e,t,n,r)}function Lc(e){return!(!(e=e.prototype)||!e.isReactComponent)}function Nc(e,t){var n=e.alternate;return null===n?((n=Pc(e.tag,t,e.key,e.mode)).elementType=e.elementType,n.type=e.type,n.stateNode=e.stateNode,n.alternate=e,e.alternate=n):(n.pendingProps=t,n.type=e.type,n.flags=0,n.subtreeFlags=0,n.deletions=null),n.flags=14680064&e.flags,n.childLanes=e.childLanes,n.lanes=e.lanes,n.child=e.child,n.memoizedProps=e.memoizedProps,n.memoizedState=e.memoizedState,n.updateQueue=e.updateQueue,t=e.dependencies,n.dependencies=null===t?null:{lanes:t.lanes,firstContext:t.firstContext},n.sibling=e.sibling,n.index=e.index,n.ref=e.ref,n}function Oc(e,t,n,r,o,i){var s=2;if(r=e,"function"==typeof e)Lc(e)&&(s=1);else if("string"==typeof e)s=5;else e:switch(e){case S:return Dc(n.children,o,i,t);case _:s=8,o|=8;break;case E:return(e=Pc(12,n,t,2|o)).elementType=E,e.lanes=i,e;case j:return(e=Pc(13,n,t,o)).elementType=j,e.lanes=i,e;case R:return(e=Pc(19,n,t,o)).elementType=R,e.lanes=i,e;case N:return Ic(n,o,i,t);default:if("object"==typeof e&&null!==e)switch(e.$$typeof){case C:s=10;break e;case A:s=9;break e;case T:s=11;break e;case P:s=14;break e;case L:s=16,r=null;break e}throw Error(a(130,null==e?e:typeof e,""))}return(t=Pc(s,n,t,o)).elementType=e,t.type=r,t.lanes=i,t}function Dc(e,t,n,r){return(e=Pc(7,e,r,t)).lanes=n,e}function Ic(e,t,n,r){return(e=Pc(22,e,r,t)).elementType=N,e.lanes=n,e.stateNode={isHidden:!1},e}function Mc(e,t,n){return(e=Pc(6,e,null,t)).lanes=n,e}function Fc(e,t,n){return(t=Pc(4,null!==e.children?e.children:[],e.key,t)).lanes=n,t.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},t}function zc(e,t,n,r,o){this.tag=t,this.containerInfo=e,this.finishedWork=this.pingCache=this.current=this.pendingChildren=null,this.timeoutHandle=-1,this.callbackNode=this.pendingContext=this.context=null,this.callbackPriority=0,this.eventTimes=ht(0),this.expirationTimes=ht(-1),this.entangledLanes=this.finishedLanes=this.mutableReadLanes=this.expiredLanes=this.pingedLanes=this.suspendedLanes=this.pendingLanes=0,this.entanglements=ht(0),this.identifierPrefix=r,this.onRecoverableError=o,this.mutableSourceEagerHydrationData=null}function Bc(e,t,n,r,o,a,i,s,l){return e=new zc(e,t,n,s,l),1===t?(t=1,!0===a&&(t|=8)):t=0,a=Pc(3,null,null,t),e.current=a,a.stateNode=e,a.memoizedState={element:r,isDehydrated:n,cache:null,transitions:null,pendingSuspenseBoundaries:null},Ma(a),e}function $c(e){if(!e)return To;e:{if(Ue(e=e._reactInternals)!==e||1!==e.tag)throw Error(a(170));var t=e;do{switch(t.tag){case 3:t=t.stateNode.context;break e;case 1:if(No(t.type)){t=t.stateNode.__reactInternalMemoizedMergedChildContext;break e}}t=t.return}while(null!==t);throw Error(a(171))}if(1===e.tag){var n=e.type;if(No(n))return Io(e,n,t)}return t}function Uc(e,t,n,r,o,a,i,s,l){return(e=Bc(n,r,!0,e,0,a,0,s,l)).context=$c(null),n=e.current,(a=za(r=ec(),o=tc(n))).callback=null!=t?t:null,Ba(n,a,o),e.current.lanes=o,yt(e,o,r),rc(e,r),e}function qc(e,t,n,r){var o=t.current,a=ec(),i=tc(o);return n=$c(n),null===t.context?t.context=n:t.pendingContext=n,(t=za(a,i)).payload={element:e},null!==(r=void 0===r?null:r)&&(t.callback=r),null!==(e=Ba(o,t,i))&&(nc(e,o,i,a),$a(e,o,i)),i}function Gc(e){return(e=e.current).child?(e.child.tag,e.child.stateNode):null}function Hc(e,t){if(null!==(e=e.memoizedState)&&null!==e.dehydrated){var n=e.retryLane;e.retryLane=0!==n&&n<t?n:t}}function Vc(e,t){Hc(e,t),(e=e.alternate)&&Hc(e,t)}Sl=function(e,t,n){if(null!==e)if(e.memoizedProps!==t.pendingProps||Ro.current)vs=!0;else{if(!(e.lanes&n||128&t.flags))return vs=!1,function(e,t,n){switch(t.tag){case 3:js(t),ga();break;case 5:Xa(t);break;case 1:No(t.type)&&Mo(t);break;case 4:Ya(t,t.stateNode.containerInfo);break;case 10:var r=t.type._context,o=t.memoizedProps.value;Ao(Sa,r._currentValue),r._currentValue=o;break;case 13:if(null!==(r=t.memoizedState))return null!==r.dehydrated?(Ao(ei,1&ei.current),t.flags|=128,null):n&t.child.childLanes?Ms(e,t,n):(Ao(ei,1&ei.current),null!==(e=Gs(e,t,n))?e.sibling:null);Ao(ei,1&ei.current);break;case 19:if(r=!!(n&t.childLanes),128&e.flags){if(r)return Us(e,t,n);t.flags|=128}if(null!==(o=t.memoizedState)&&(o.rendering=null,o.tail=null,o.lastEffect=null),Ao(ei,ei.current),r)break;return null;case 22:case 23:return t.lanes=0,_s(e,t,n)}return Gs(e,t,n)}(e,t,n);vs=!!(131072&e.flags)}else vs=!1,aa&&1048576&t.flags&&ea(t,Wo,t.index);switch(t.lanes=0,t.tag){case 2:var r=t.type;qs(e,t),e=t.pendingProps;var o=Lo(t,jo.current);Ra(t,n),o=hi(null,t,r,e,o,n);var i=yi();return t.flags|=1,"object"==typeof o&&null!==o&&"function"==typeof o.render&&void 0===o.$$typeof?(t.tag=1,t.memoizedState=null,t.updateQueue=null,No(r)?(i=!0,Mo(t)):i=!1,t.memoizedState=null!==o.state&&void 0!==o.state?o.state:null,Ma(t),o.updater=os,t.stateNode=o,o._reactInternals=t,ls(t,r,e,n),t=Ts(null,t,r,!0,i,n)):(t.tag=0,aa&&i&&ta(t),ws(null,t,o,n),t=t.child),t;case 16:r=t.elementType;e:{switch(qs(e,t),e=t.pendingProps,r=(o=r._init)(r._payload),t.type=r,o=t.tag=function(e){if("function"==typeof e)return Lc(e)?1:0;if(null!=e){if((e=e.$$typeof)===T)return 11;if(e===P)return 14}return 2}(r),e=ns(r,e),o){case 0:t=Cs(null,t,r,e,n);break e;case 1:t=As(null,t,r,e,n);break e;case 11:t=ks(null,t,r,e,n);break e;case 14:t=xs(null,t,r,ns(r.type,e),n);break e}throw Error(a(306,r,""))}return t;case 0:return r=t.type,o=t.pendingProps,Cs(e,t,r,o=t.elementType===r?o:ns(r,o),n);case 1:return r=t.type,o=t.pendingProps,As(e,t,r,o=t.elementType===r?o:ns(r,o),n);case 3:e:{if(js(t),null===e)throw Error(a(387));r=t.pendingProps,o=(i=t.memoizedState).element,Fa(e,t),qa(t,r,null,n);var s=t.memoizedState;if(r=s.element,i.isDehydrated){if(i={element:r,isDehydrated:!1,cache:s.cache,pendingSuspenseBoundaries:s.pendingSuspenseBoundaries,transitions:s.transitions},t.updateQueue.baseState=i,t.memoizedState=i,256&t.flags){t=Rs(e,t,r,n,o=cs(Error(a(423)),t));break e}if(r!==o){t=Rs(e,t,r,n,o=cs(Error(a(424)),t));break e}for(oa=co(t.stateNode.containerInfo.firstChild),ra=t,aa=!0,ia=null,n=xa(t,null,r,n),t.child=n;n;)n.flags=-3&n.flags|4096,n=n.sibling}else{if(ga(),r===o){t=Gs(e,t,n);break e}ws(e,t,r,n)}t=t.child}return t;case 5:return Xa(t),null===e&&ua(t),r=t.type,o=t.pendingProps,i=null!==e?e.memoizedProps:null,s=o.children,no(r,o)?s=null:null!==i&&no(r,i)&&(t.flags|=32),Es(e,t),ws(e,t,s,n),t.child;case 6:return null===e&&ua(t),null;case 13:return Ms(e,t,n);case 4:return Ya(t,t.stateNode.containerInfo),r=t.pendingProps,null===e?t.child=ka(t,null,r,n):ws(e,t,r,n),t.child;case 11:return r=t.type,o=t.pendingProps,ks(e,t,r,o=t.elementType===r?o:ns(r,o),n);case 7:return ws(e,t,t.pendingProps,n),t.child;case 8:case 12:return ws(e,t,t.pendingProps.children,n),t.child;case 10:e:{if(r=t.type._context,o=t.pendingProps,i=t.memoizedProps,s=o.value,Ao(Sa,r._currentValue),r._currentValue=s,null!==i)if(sr(i.value,s)){if(i.children===o.children&&!Ro.current){t=Gs(e,t,n);break e}}else for(null!==(i=t.child)&&(i.return=t);null!==i;){var l=i.dependencies;if(null!==l){s=i.child;for(var c=l.firstContext;null!==c;){if(c.context===r){if(1===i.tag){(c=za(-1,n&-n)).tag=2;var u=i.updateQueue;if(null!==u){var d=(u=u.shared).pending;null===d?c.next=c:(c.next=d.next,d.next=c),u.pending=c}}i.lanes|=n,null!==(c=i.alternate)&&(c.lanes|=n),ja(i.return,n,t),l.lanes|=n;break}c=c.next}}else if(10===i.tag)s=i.type===t.type?null:i.child;else if(18===i.tag){if(null===(s=i.return))throw Error(a(341));s.lanes|=n,null!==(l=s.alternate)&&(l.lanes|=n),ja(s,n,t),s=i.sibling}else s=i.child;if(null!==s)s.return=i;else for(s=i;null!==s;){if(s===t){s=null;break}if(null!==(i=s.sibling)){i.return=s.return,s=i;break}s=s.return}i=s}ws(e,t,o.children,n),t=t.child}return t;case 9:return o=t.type,r=t.pendingProps.children,Ra(t,n),r=r(o=Pa(o)),t.flags|=1,ws(e,t,r,n),t.child;case 14:return o=ns(r=t.type,t.pendingProps),xs(e,t,r,o=ns(r.type,o),n);case 15:return Ss(e,t,t.type,t.pendingProps,n);case 17:return r=t.type,o=t.pendingProps,o=t.elementType===r?o:ns(r,o),qs(e,t),t.tag=1,No(r)?(e=!0,Mo(t)):e=!1,Ra(t,n),is(t,r,o),ls(t,r,o,n),Ts(null,t,r,!0,e,n);case 19:return Us(e,t,n);case 22:return _s(e,t,n)}throw Error(a(156,t.tag))};var Wc="function"==typeof reportError?reportError:function(e){console.error(e)};function Kc(e){this._internalRoot=e}function Qc(e){this._internalRoot=e}function Yc(e){return!(!e||1!==e.nodeType&&9!==e.nodeType&&11!==e.nodeType)}function Zc(e){return!(!e||1!==e.nodeType&&9!==e.nodeType&&11!==e.nodeType&&(8!==e.nodeType||" react-mount-point-unstable "!==e.nodeValue))}function Xc(){}function Jc(e,t,n,r,o){var a=n._reactRootContainer;if(a){var i=a;if("function"==typeof o){var s=o;o=function(){var e=Gc(i);s.call(e)}}qc(t,i,e,o)}else i=function(e,t,n,r,o){if(o){if("function"==typeof r){var a=r;r=function(){var e=Gc(i);a.call(e)}}var i=Uc(t,r,e,0,null,!1,0,"",Xc);return e._reactRootContainer=i,e[mo]=i.current,Ur(8===e.nodeType?e.parentNode:e),uc(),i}for(;o=e.lastChild;)e.removeChild(o);if("function"==typeof r){var s=r;r=function(){var e=Gc(l);s.call(e)}}var l=Bc(e,0,!1,null,0,!1,0,"",Xc);return e._reactRootContainer=l,e[mo]=l.current,Ur(8===e.nodeType?e.parentNode:e),uc((function(){qc(t,l,n,r)})),l}(n,t,e,o,r);return Gc(i)}Qc.prototype.render=Kc.prototype.render=function(e){var t=this._internalRoot;if(null===t)throw Error(a(409));qc(e,t,null,null)},Qc.prototype.unmount=Kc.prototype.unmount=function(){var e=this._internalRoot;if(null!==e){this._internalRoot=null;var t=e.containerInfo;uc((function(){qc(null,e,null,null)})),t[mo]=null}},Qc.prototype.unstable_scheduleHydration=function(e){if(e){var t=_t();e={blockedOn:null,target:e,priority:t};for(var n=0;n<Nt.length&&0!==t&&t<Nt[n].priority;n++);Nt.splice(n,0,e),0===n&&Mt(e)}},kt=function(e){switch(e.tag){case 3:var t=e.stateNode;if(t.current.memoizedState.isDehydrated){var n=dt(t.pendingLanes);0!==n&&(bt(t,1|n),rc(t,Ze()),!(6&Tl)&&(Ul=Ze()+500,qo()))}break;case 13:uc((function(){var t=Da(e,1);if(null!==t){var n=ec();nc(t,e,1,n)}})),Vc(e,1)}},xt=function(e){if(13===e.tag){var t=Da(e,134217728);if(null!==t)nc(t,e,134217728,ec());Vc(e,134217728)}},St=function(e){if(13===e.tag){var t=tc(e),n=Da(e,t);if(null!==n)nc(n,e,t,ec());Vc(e,t)}},_t=function(){return vt},Et=function(e,t){var n=vt;try{return vt=e,t()}finally{vt=n}},xe=function(e,t,n){switch(t){case"input":if(X(e,n),t=n.name,"radio"===n.type&&null!=t){for(n=e;n.parentNode;)n=n.parentNode;for(n=n.querySelectorAll("input[name="+JSON.stringify(""+t)+'][type="radio"]'),t=0;t<n.length;t++){var r=n[t];if(r!==e&&r.form===e.form){var o=xo(r);if(!o)throw Error(a(90));W(r),X(r,o)}}}break;case"textarea":ae(e,n);break;case"select":null!=(t=n.value)&&ne(e,!!n.multiple,t,!1)}},Te=cc,je=uc;var eu={usingClientEntryPoint:!1,Events:[wo,ko,xo,Ce,Ae,cc]},tu={findFiberByHostInstance:vo,bundleType:0,version:"18.3.1",rendererPackageName:"react-dom"},nu={bundleType:tu.bundleType,version:tu.version,rendererPackageName:tu.rendererPackageName,rendererConfig:tu.rendererConfig,overrideHookState:null,overrideHookStateDeletePath:null,overrideHookStateRenamePath:null,overrideProps:null,overridePropsDeletePath:null,overridePropsRenamePath:null,setErrorHandler:null,setSuspenseHandler:null,scheduleUpdate:null,currentDispatcherRef:w.ReactCurrentDispatcher,findHostInstanceByFiber:function(e){return null===(e=He(e))?null:e.stateNode},findFiberByHostInstance:tu.findFiberByHostInstance||function(){return null},findHostInstancesForRefresh:null,scheduleRefresh:null,scheduleRoot:null,setRefreshHandler:null,getCurrentFiber:null,reconcilerVersion:"18.3.1-next-f1338f8080-20240426"};if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__){var ru=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!ru.isDisabled&&ru.supportsFiber)try{ot=ru.inject(nu),at=ru}catch(ue){}}t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=eu,t.createPortal=function(e,t){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;if(!Yc(t))throw Error(a(200));return function(e,t,n){var r=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null;return{$$typeof:x,key:null==r?null:""+r,children:e,containerInfo:t,implementation:n}}(e,t,null,n)},t.createRoot=function(e,t){if(!Yc(e))throw Error(a(299));var n=!1,r="",o=Wc;return null!=t&&(!0===t.unstable_strictMode&&(n=!0),void 0!==t.identifierPrefix&&(r=t.identifierPrefix),void 0!==t.onRecoverableError&&(o=t.onRecoverableError)),t=Bc(e,1,!1,null,0,n,0,r,o),e[mo]=t.current,Ur(8===e.nodeType?e.parentNode:e),new Kc(t)},t.findDOMNode=function(e){if(null==e)return null;if(1===e.nodeType)return e;var t=e._reactInternals;if(void 0===t){if("function"==typeof e.render)throw Error(a(188));throw e=Object.keys(e).join(","),Error(a(268,e))}return e=null===(e=He(t))?null:e.stateNode},t.flushSync=function(e){return uc(e)},t.hydrate=function(e,t,n){if(!Zc(t))throw Error(a(200));return Jc(null,e,t,!0,n)},t.hydrateRoot=function(e,t,n){if(!Yc(e))throw Error(a(405));var r=null!=n&&n.hydratedSources||null,o=!1,i="",s=Wc;if(null!=n&&(!0===n.unstable_strictMode&&(o=!0),void 0!==n.identifierPrefix&&(i=n.identifierPrefix),void 0!==n.onRecoverableError&&(s=n.onRecoverableError)),t=Uc(t,null,e,1,null!=n?n:null,o,0,i,s),e[mo]=t.current,Ur(e),r)for(e=0;e<r.length;e++)o=(o=(n=r[e])._getVersion)(n._source),null==t.mutableSourceEagerHydrationData?t.mutableSourceEagerHydrationData=[n,o]:t.mutableSourceEagerHydrationData.push(n,o);return new Qc(t)},t.render=function(e,t,n){if(!Zc(t))throw Error(a(200));return Jc(null,e,t,!1,n)},t.unmountComponentAtNode=function(e){if(!Zc(e))throw Error(a(40));return!!e._reactRootContainer&&(uc((function(){Jc(null,null,e,!1,(function(){e._reactRootContainer=null,e[mo]=null}))})),!0)},t.unstable_batchedUpdates=cc,t.unstable_renderSubtreeIntoContainer=function(e,t,n,r){if(!Zc(n))throw Error(a(200));if(null==e||void 0===e._reactInternals)throw Error(a(38));return Jc(e,t,n,!1,r)},t.version="18.3.1-next-f1338f8080-20240426"},5338:(e,t,n)=>{"use strict";var r=n(961);t.createRoot=r.createRoot,t.hydrateRoot=r.hydrateRoot},961:(e,t,n)=>{"use strict";!function e(){if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE)try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(e)}catch(t){console.error(t)}}(),e.exports=n(2551)},115:e=>{var t="undefined"!=typeof Element,n="function"==typeof Map,r="function"==typeof Set,o="function"==typeof ArrayBuffer&&!!ArrayBuffer.isView;function a(e,i){if(e===i)return!0;if(e&&i&&"object"==typeof e&&"object"==typeof i){if(e.constructor!==i.constructor)return!1;var s,l,c,u;if(Array.isArray(e)){if((s=e.length)!=i.length)return!1;for(l=s;0!=l--;)if(!a(e[l],i[l]))return!1;return!0}if(n&&e instanceof Map&&i instanceof Map){if(e.size!==i.size)return!1;for(u=e.entries();!(l=u.next()).done;)if(!i.has(l.value[0]))return!1;for(u=e.entries();!(l=u.next()).done;)if(!a(l.value[1],i.get(l.value[0])))return!1;return!0}if(r&&e instanceof Set&&i instanceof Set){if(e.size!==i.size)return!1;for(u=e.entries();!(l=u.next()).done;)if(!i.has(l.value[0]))return!1;return!0}if(o&&ArrayBuffer.isView(e)&&ArrayBuffer.isView(i)){if((s=e.length)!=i.length)return!1;for(l=s;0!=l--;)if(e[l]!==i[l])return!1;return!0}if(e.constructor===RegExp)return e.source===i.source&&e.flags===i.flags;if(e.valueOf!==Object.prototype.valueOf&&"function"==typeof e.valueOf&&"function"==typeof i.valueOf)return e.valueOf()===i.valueOf();if(e.toString!==Object.prototype.toString&&"function"==typeof e.toString&&"function"==typeof i.toString)return e.toString()===i.toString();if((s=(c=Object.keys(e)).length)!==Object.keys(i).length)return!1;for(l=s;0!=l--;)if(!Object.prototype.hasOwnProperty.call(i,c[l]))return!1;if(t&&e instanceof Element)return!1;for(l=s;0!=l--;)if(("_owner"!==c[l]&&"__v"!==c[l]&&"__o"!==c[l]||!e.$$typeof)&&!a(e[c[l]],i[c[l]]))return!1;return!0}return e!=e&&i!=i}e.exports=function(e,t){try{return a(e,t)}catch(n){if((n.message||"").match(/stack|recursion/i))return console.warn("react-fast-compare cannot handle circular refs"),!1;throw n}}},545:(e,t,n)=>{"use strict";n.d(t,{mg:()=>J,vd:()=>H});var r=n(6540),o=n(5556),a=n.n(o),i=n(115),s=n.n(i),l=n(311),c=n.n(l),u=n(2833),d=n.n(u);function p(){return p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},p.apply(this,arguments)}function f(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,g(e,t)}function g(e,t){return g=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},g(e,t)}function m(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t.indexOf(n=a[r])>=0||(o[n]=e[n]);return o}var h={BASE:"base",BODY:"body",HEAD:"head",HTML:"html",LINK:"link",META:"meta",NOSCRIPT:"noscript",SCRIPT:"script",STYLE:"style",TITLE:"title",FRAGMENT:"Symbol(react.fragment)"},y={rel:["amphtml","canonical","alternate"]},b={type:["application/ld+json"]},v={charset:"",name:["robots","description"],property:["og:type","og:title","og:url","og:image","og:image:alt","og:description","twitter:url","twitter:title","twitter:description","twitter:image","twitter:image:alt","twitter:card","twitter:site"]},w=Object.keys(h).map((function(e){return h[e]})),k={accesskey:"accessKey",charset:"charSet",class:"className",contenteditable:"contentEditable",contextmenu:"contextMenu","http-equiv":"httpEquiv",itemprop:"itemProp",tabindex:"tabIndex"},x=Object.keys(k).reduce((function(e,t){return e[k[t]]=t,e}),{}),S=function(e,t){for(var n=e.length-1;n>=0;n-=1){var r=e[n];if(Object.prototype.hasOwnProperty.call(r,t))return r[t]}return null},_=function(e){var t=S(e,h.TITLE),n=S(e,"titleTemplate");if(Array.isArray(t)&&(t=t.join("")),n&&t)return n.replace(/%s/g,(function(){return t}));var r=S(e,"defaultTitle");return t||r||void 0},E=function(e){return S(e,"onChangeClientState")||function(){}},C=function(e,t){return t.filter((function(t){return void 0!==t[e]})).map((function(t){return t[e]})).reduce((function(e,t){return p({},e,t)}),{})},A=function(e,t){return t.filter((function(e){return void 0!==e[h.BASE]})).map((function(e){return e[h.BASE]})).reverse().reduce((function(t,n){if(!t.length)for(var r=Object.keys(n),o=0;o<r.length;o+=1){var a=r[o].toLowerCase();if(-1!==e.indexOf(a)&&n[a])return t.concat(n)}return t}),[])},T=function(e,t,n){var r={};return n.filter((function(t){return!!Array.isArray(t[e])||(void 0!==t[e]&&console&&"function"==typeof console.warn&&console.warn("Helmet: "+e+' should be of type "Array". Instead found type "'+typeof t[e]+'"'),!1)})).map((function(t){return t[e]})).reverse().reduce((function(e,n){var o={};n.filter((function(e){for(var n,a=Object.keys(e),i=0;i<a.length;i+=1){var s=a[i],l=s.toLowerCase();-1===t.indexOf(l)||"rel"===n&&"canonical"===e[n].toLowerCase()||"rel"===l&&"stylesheet"===e[l].toLowerCase()||(n=l),-1===t.indexOf(s)||"innerHTML"!==s&&"cssText"!==s&&"itemprop"!==s||(n=s)}if(!n||!e[n])return!1;var c=e[n].toLowerCase();return r[n]||(r[n]={}),o[n]||(o[n]={}),!r[n][c]&&(o[n][c]=!0,!0)})).reverse().forEach((function(t){return e.push(t)}));for(var a=Object.keys(o),i=0;i<a.length;i+=1){var s=a[i],l=p({},r[s],o[s]);r[s]=l}return e}),[]).reverse()},j=function(e,t){if(Array.isArray(e)&&e.length)for(var n=0;n<e.length;n+=1)if(e[n][t])return!0;return!1},R=function(e){return Array.isArray(e)?e.join(""):e},P=function(e,t){return Array.isArray(e)?e.reduce((function(e,n){return function(e,t){for(var n=Object.keys(e),r=0;r<n.length;r+=1)if(t[n[r]]&&t[n[r]].includes(e[n[r]]))return!0;return!1}(n,t)?e.priority.push(n):e.default.push(n),e}),{priority:[],default:[]}):{default:e}},L=function(e,t){var n;return p({},e,((n={})[t]=void 0,n))},N=[h.NOSCRIPT,h.SCRIPT,h.STYLE],O=function(e,t){return void 0===t&&(t=!0),!1===t?String(e):String(e).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")},D=function(e){return Object.keys(e).reduce((function(t,n){var r=void 0!==e[n]?n+'="'+e[n]+'"':""+n;return t?t+" "+r:r}),"")},I=function(e,t){return void 0===t&&(t={}),Object.keys(e).reduce((function(t,n){return t[k[n]||n]=e[n],t}),t)},M=function(e,t){return t.map((function(t,n){var o,a=((o={key:n})["data-rh"]=!0,o);return Object.keys(t).forEach((function(e){var n=k[e]||e;"innerHTML"===n||"cssText"===n?a.dangerouslySetInnerHTML={__html:t.innerHTML||t.cssText}:a[n]=t[e]})),r.createElement(e,a)}))},F=function(e,t,n){switch(e){case h.TITLE:return{toComponent:function(){return n=t.titleAttributes,(o={key:e=t.title})["data-rh"]=!0,a=I(n,o),[r.createElement(h.TITLE,a,e)];var e,n,o,a},toString:function(){return function(e,t,n,r){var o=D(n),a=R(t);return o?"<"+e+' data-rh="true" '+o+">"+O(a,r)+"</"+e+">":"<"+e+' data-rh="true">'+O(a,r)+"</"+e+">"}(e,t.title,t.titleAttributes,n)}};case"bodyAttributes":case"htmlAttributes":return{toComponent:function(){return I(t)},toString:function(){return D(t)}};default:return{toComponent:function(){return M(e,t)},toString:function(){return function(e,t,n){return t.reduce((function(t,r){var o=Object.keys(r).filter((function(e){return!("innerHTML"===e||"cssText"===e)})).reduce((function(e,t){var o=void 0===r[t]?t:t+'="'+O(r[t],n)+'"';return e?e+" "+o:o}),""),a=r.innerHTML||r.cssText||"",i=-1===N.indexOf(e);return t+"<"+e+' data-rh="true" '+o+(i?"/>":">"+a+"</"+e+">")}),"")}(e,t,n)}}}},z=function(e){var t=e.baseTag,n=e.bodyAttributes,r=e.encode,o=e.htmlAttributes,a=e.noscriptTags,i=e.styleTags,s=e.title,l=void 0===s?"":s,c=e.titleAttributes,u=e.linkTags,d=e.metaTags,p=e.scriptTags,f={toComponent:function(){},toString:function(){return""}};if(e.prioritizeSeoTags){var g=function(e){var t=e.linkTags,n=e.scriptTags,r=e.encode,o=P(e.metaTags,v),a=P(t,y),i=P(n,b);return{priorityMethods:{toComponent:function(){return[].concat(M(h.META,o.priority),M(h.LINK,a.priority),M(h.SCRIPT,i.priority))},toString:function(){return F(h.META,o.priority,r)+" "+F(h.LINK,a.priority,r)+" "+F(h.SCRIPT,i.priority,r)}},metaTags:o.default,linkTags:a.default,scriptTags:i.default}}(e);f=g.priorityMethods,u=g.linkTags,d=g.metaTags,p=g.scriptTags}return{priority:f,base:F(h.BASE,t,r),bodyAttributes:F("bodyAttributes",n,r),htmlAttributes:F("htmlAttributes",o,r),link:F(h.LINK,u,r),meta:F(h.META,d,r),noscript:F(h.NOSCRIPT,a,r),script:F(h.SCRIPT,p,r),style:F(h.STYLE,i,r),title:F(h.TITLE,{title:l,titleAttributes:c},r)}},B=[],$=function(e,t){var n=this;void 0===t&&(t="undefined"!=typeof document),this.instances=[],this.value={setHelmet:function(e){n.context.helmet=e},helmetInstances:{get:function(){return n.canUseDOM?B:n.instances},add:function(e){(n.canUseDOM?B:n.instances).push(e)},remove:function(e){var t=(n.canUseDOM?B:n.instances).indexOf(e);(n.canUseDOM?B:n.instances).splice(t,1)}}},this.context=e,this.canUseDOM=t,t||(e.helmet=z({baseTag:[],bodyAttributes:{},encodeSpecialCharacters:!0,htmlAttributes:{},linkTags:[],metaTags:[],noscriptTags:[],scriptTags:[],styleTags:[],title:"",titleAttributes:{}}))},U=r.createContext({}),q=a().shape({setHelmet:a().func,helmetInstances:a().shape({get:a().func,add:a().func,remove:a().func})}),G="undefined"!=typeof document,H=function(e){function t(n){var r;return(r=e.call(this,n)||this).helmetData=new $(r.props.context,t.canUseDOM),r}return f(t,e),t.prototype.render=function(){return r.createElement(U.Provider,{value:this.helmetData.value},this.props.children)},t}(r.Component);H.canUseDOM=G,H.propTypes={context:a().shape({helmet:a().shape()}),children:a().node.isRequired},H.defaultProps={context:{}},H.displayName="HelmetProvider";var V=function(e,t){var n,r=document.head||document.querySelector(h.HEAD),o=r.querySelectorAll(e+"[data-rh]"),a=[].slice.call(o),i=[];return t&&t.length&&t.forEach((function(t){var r=document.createElement(e);for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&("innerHTML"===o?r.innerHTML=t.innerHTML:"cssText"===o?r.styleSheet?r.styleSheet.cssText=t.cssText:r.appendChild(document.createTextNode(t.cssText)):r.setAttribute(o,void 0===t[o]?"":t[o]));r.setAttribute("data-rh","true"),a.some((function(e,t){return n=t,r.isEqualNode(e)}))?a.splice(n,1):i.push(r)})),a.forEach((function(e){return e.parentNode.removeChild(e)})),i.forEach((function(e){return r.appendChild(e)})),{oldTags:a,newTags:i}},W=function(e,t){var n=document.getElementsByTagName(e)[0];if(n){for(var r=n.getAttribute("data-rh"),o=r?r.split(","):[],a=[].concat(o),i=Object.keys(t),s=0;s<i.length;s+=1){var l=i[s],c=t[l]||"";n.getAttribute(l)!==c&&n.setAttribute(l,c),-1===o.indexOf(l)&&o.push(l);var u=a.indexOf(l);-1!==u&&a.splice(u,1)}for(var d=a.length-1;d>=0;d-=1)n.removeAttribute(a[d]);o.length===a.length?n.removeAttribute("data-rh"):n.getAttribute("data-rh")!==i.join(",")&&n.setAttribute("data-rh",i.join(","))}},K=function(e,t){var n=e.baseTag,r=e.htmlAttributes,o=e.linkTags,a=e.metaTags,i=e.noscriptTags,s=e.onChangeClientState,l=e.scriptTags,c=e.styleTags,u=e.title,d=e.titleAttributes;W(h.BODY,e.bodyAttributes),W(h.HTML,r),function(e,t){void 0!==e&&document.title!==e&&(document.title=R(e)),W(h.TITLE,t)}(u,d);var p={baseTag:V(h.BASE,n),linkTags:V(h.LINK,o),metaTags:V(h.META,a),noscriptTags:V(h.NOSCRIPT,i),scriptTags:V(h.SCRIPT,l),styleTags:V(h.STYLE,c)},f={},g={};Object.keys(p).forEach((function(e){var t=p[e],n=t.newTags,r=t.oldTags;n.length&&(f[e]=n),r.length&&(g[e]=p[e].oldTags)})),t&&t(),s(e,f,g)},Q=null,Y=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).rendered=!1,t}f(t,e);var n=t.prototype;return n.shouldComponentUpdate=function(e){return!d()(e,this.props)},n.componentDidUpdate=function(){this.emitChange()},n.componentWillUnmount=function(){this.props.context.helmetInstances.remove(this),this.emitChange()},n.emitChange=function(){var e,t,n=this.props.context,r=n.setHelmet,o=null,a=(e=n.helmetInstances.get().map((function(e){var t=p({},e.props);return delete t.context,t})),{baseTag:A(["href"],e),bodyAttributes:C("bodyAttributes",e),defer:S(e,"defer"),encode:S(e,"encodeSpecialCharacters"),htmlAttributes:C("htmlAttributes",e),linkTags:T(h.LINK,["rel","href"],e),metaTags:T(h.META,["name","charset","http-equiv","property","itemprop"],e),noscriptTags:T(h.NOSCRIPT,["innerHTML"],e),onChangeClientState:E(e),scriptTags:T(h.SCRIPT,["src","innerHTML"],e),styleTags:T(h.STYLE,["cssText"],e),title:_(e),titleAttributes:C("titleAttributes",e),prioritizeSeoTags:j(e,"prioritizeSeoTags")});H.canUseDOM?(t=a,Q&&cancelAnimationFrame(Q),t.defer?Q=requestAnimationFrame((function(){K(t,(function(){Q=null}))})):(K(t),Q=null)):z&&(o=z(a)),r(o)},n.init=function(){this.rendered||(this.rendered=!0,this.props.context.helmetInstances.add(this),this.emitChange())},n.render=function(){return this.init(),null},t}(r.Component);Y.propTypes={context:q.isRequired},Y.displayName="HelmetDispatcher";var Z=["children"],X=["children"],J=function(e){function t(){return e.apply(this,arguments)||this}f(t,e);var n=t.prototype;return n.shouldComponentUpdate=function(e){return!s()(L(this.props,"helmetData"),L(e,"helmetData"))},n.mapNestedChildrenToProps=function(e,t){if(!t)return null;switch(e.type){case h.SCRIPT:case h.NOSCRIPT:return{innerHTML:t};case h.STYLE:return{cssText:t};default:throw new Error("<"+e.type+" /> elements are self-closing and can not contain children. Refer to our API for more information.")}},n.flattenArrayTypeChildren=function(e){var t,n=e.child,r=e.arrayTypeChildren;return p({},r,((t={})[n.type]=[].concat(r[n.type]||[],[p({},e.newChildProps,this.mapNestedChildrenToProps(n,e.nestedChildren))]),t))},n.mapObjectTypeChildren=function(e){var t,n,r=e.child,o=e.newProps,a=e.newChildProps,i=e.nestedChildren;switch(r.type){case h.TITLE:return p({},o,((t={})[r.type]=i,t.titleAttributes=p({},a),t));case h.BODY:return p({},o,{bodyAttributes:p({},a)});case h.HTML:return p({},o,{htmlAttributes:p({},a)});default:return p({},o,((n={})[r.type]=p({},a),n))}},n.mapArrayTypeChildrenToProps=function(e,t){var n=p({},t);return Object.keys(e).forEach((function(t){var r;n=p({},n,((r={})[t]=e[t],r))})),n},n.warnOnInvalidChildren=function(e,t){return c()(w.some((function(t){return e.type===t})),"function"==typeof e.type?"You may be attempting to nest <Helmet> components within each other, which is not allowed. Refer to our API for more information.":"Only elements types "+w.join(", ")+" are allowed. Helmet does not support rendering <"+e.type+"> elements. Refer to our API for more information."),c()(!t||"string"==typeof t||Array.isArray(t)&&!t.some((function(e){return"string"!=typeof e})),"Helmet expects a string as a child of <"+e.type+">. Did you forget to wrap your children in braces? ( <"+e.type+">{``}</"+e.type+"> ) Refer to our API for more information."),!0},n.mapChildrenToProps=function(e,t){var n=this,o={};return r.Children.forEach(e,(function(e){if(e&&e.props){var r=e.props,a=r.children,i=m(r,Z),s=Object.keys(i).reduce((function(e,t){return e[x[t]||t]=i[t],e}),{}),l=e.type;switch("symbol"==typeof l?l=l.toString():n.warnOnInvalidChildren(e,a),l){case h.FRAGMENT:t=n.mapChildrenToProps(a,t);break;case h.LINK:case h.META:case h.NOSCRIPT:case h.SCRIPT:case h.STYLE:o=n.flattenArrayTypeChildren({child:e,arrayTypeChildren:o,newChildProps:s,nestedChildren:a});break;default:t=n.mapObjectTypeChildren({child:e,newProps:t,newChildProps:s,nestedChildren:a})}}})),this.mapArrayTypeChildrenToProps(o,t)},n.render=function(){var e=this.props,t=e.children,n=m(e,X),o=p({},n),a=n.helmetData;return t&&(o=this.mapChildrenToProps(t,o)),!a||a instanceof $||(a=new $(a.context,a.instances)),a?r.createElement(Y,p({},o,{context:a.value,helmetData:void 0})):r.createElement(U.Consumer,null,(function(e){return r.createElement(Y,p({},o,{context:e}))}))},t}(r.Component);J.propTypes={base:a().object,bodyAttributes:a().object,children:a().oneOfType([a().arrayOf(a().node),a().node]),defaultTitle:a().string,defer:a().bool,encodeSpecialCharacters:a().bool,htmlAttributes:a().object,link:a().arrayOf(a().object),meta:a().arrayOf(a().object),noscript:a().arrayOf(a().object),onChangeClientState:a().func,script:a().arrayOf(a().object),style:a().arrayOf(a().object),title:a().string,titleAttributes:a().object,titleTemplate:a().string,prioritizeSeoTags:a().bool,helmetData:a().object},J.defaultProps={defer:!0,encodeSpecialCharacters:!0,prioritizeSeoTags:!1},J.displayName="Helmet"},2799:(e,t)=>{"use strict";var n="function"==typeof Symbol&&Symbol.for,r=n?Symbol.for("react.element"):60103,o=n?Symbol.for("react.portal"):60106,a=n?Symbol.for("react.fragment"):60107,i=n?Symbol.for("react.strict_mode"):60108,s=n?Symbol.for("react.profiler"):60114,l=n?Symbol.for("react.provider"):60109,c=n?Symbol.for("react.context"):60110,u=n?Symbol.for("react.async_mode"):60111,d=n?Symbol.for("react.concurrent_mode"):60111,p=n?Symbol.for("react.forward_ref"):60112,f=n?Symbol.for("react.suspense"):60113,g=n?Symbol.for("react.suspense_list"):60120,m=n?Symbol.for("react.memo"):60115,h=n?Symbol.for("react.lazy"):60116,y=n?Symbol.for("react.block"):60121,b=n?Symbol.for("react.fundamental"):60117,v=n?Symbol.for("react.responder"):60118,w=n?Symbol.for("react.scope"):60119;function k(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case r:switch(e=e.type){case u:case d:case a:case s:case i:case f:return e;default:switch(e=e&&e.$$typeof){case c:case p:case h:case m:case l:return e;default:return t}}case o:return t}}}function x(e){return k(e)===d}t.AsyncMode=u,t.ConcurrentMode=d,t.ContextConsumer=c,t.ContextProvider=l,t.Element=r,t.ForwardRef=p,t.Fragment=a,t.Lazy=h,t.Memo=m,t.Portal=o,t.Profiler=s,t.StrictMode=i,t.Suspense=f,t.isAsyncMode=function(e){return x(e)||k(e)===u},t.isConcurrentMode=x,t.isContextConsumer=function(e){return k(e)===c},t.isContextProvider=function(e){return k(e)===l},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r},t.isForwardRef=function(e){return k(e)===p},t.isFragment=function(e){return k(e)===a},t.isLazy=function(e){return k(e)===h},t.isMemo=function(e){return k(e)===m},t.isPortal=function(e){return k(e)===o},t.isProfiler=function(e){return k(e)===s},t.isStrictMode=function(e){return k(e)===i},t.isSuspense=function(e){return k(e)===f},t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===a||e===d||e===s||e===i||e===f||e===g||"object"==typeof e&&null!==e&&(e.$$typeof===h||e.$$typeof===m||e.$$typeof===l||e.$$typeof===c||e.$$typeof===p||e.$$typeof===b||e.$$typeof===v||e.$$typeof===w||e.$$typeof===y)},t.typeOf=k},4363:(e,t,n)=>{"use strict";e.exports=n(2799)},3259:(e,t,n)=>{"use strict";function r(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function o(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(){return i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i.apply(this,arguments)}var s=n(6540),l=[],c=[];var u=s.createContext(null);function d(e){var t=e(),n={loading:!0,loaded:null,error:null};return n.promise=t.then((function(e){return n.loading=!1,n.loaded=e,e})).catch((function(e){throw n.loading=!1,n.error=e,e})),n}function p(e){var t={loading:!1,loaded:{},error:null},n=[];try{Object.keys(e).forEach((function(r){var o=d(e[r]);o.loading?t.loading=!0:(t.loaded[r]=o.loaded,t.error=o.error),n.push(o.promise),o.promise.then((function(e){t.loaded[r]=e})).catch((function(e){t.error=e}))}))}catch(r){t.error=r}return t.promise=Promise.all(n).then((function(e){return t.loading=!1,e})).catch((function(e){throw t.loading=!1,e})),t}function f(e,t){return s.createElement((n=e)&&n.__esModule?n.default:n,t);var n}function g(e,t){var d,p;if(!t.loading)throw new Error("react-loadable requires a `loading` component");var g=i({loader:null,loading:null,delay:200,timeout:null,render:f,webpack:null,modules:null},t),m=null;function h(){return m||(m=e(g.loader)),m.promise}return l.push(h),"function"==typeof g.webpack&&c.push((function(){if((0,g.webpack)().every((function(e){return void 0!==e&&void 0!==n.m[e]})))return h()})),p=d=function(t){function n(n){var r;return a(o(o(r=t.call(this,n)||this)),"retry",(function(){r.setState({error:null,loading:!0,timedOut:!1}),m=e(g.loader),r._loadModule()})),h(),r.state={error:m.error,pastDelay:!1,timedOut:!1,loading:m.loading,loaded:m.loaded},r}r(n,t),n.preload=function(){return h()};var i=n.prototype;return i.UNSAFE_componentWillMount=function(){this._loadModule()},i.componentDidMount=function(){this._mounted=!0},i._loadModule=function(){var e=this;if(this.context&&Array.isArray(g.modules)&&g.modules.forEach((function(t){e.context.report(t)})),m.loading){var t=function(t){e._mounted&&e.setState(t)};"number"==typeof g.delay&&(0===g.delay?this.setState({pastDelay:!0}):this._delay=setTimeout((function(){t({pastDelay:!0})}),g.delay)),"number"==typeof g.timeout&&(this._timeout=setTimeout((function(){t({timedOut:!0})}),g.timeout));var n=function(){t({error:m.error,loaded:m.loaded,loading:m.loading}),e._clearTimeouts()};m.promise.then((function(){return n(),null})).catch((function(e){return n(),null}))}},i.componentWillUnmount=function(){this._mounted=!1,this._clearTimeouts()},i._clearTimeouts=function(){clearTimeout(this._delay),clearTimeout(this._timeout)},i.render=function(){return this.state.loading||this.state.error?s.createElement(g.loading,{isLoading:this.state.loading,pastDelay:this.state.pastDelay,timedOut:this.state.timedOut,error:this.state.error,retry:this.retry}):this.state.loaded?g.render(this.state.loaded,this.props):null},n}(s.Component),a(d,"contextType",u),p}function m(e){return g(d,e)}m.Map=function(e){if("function"!=typeof e.render)throw new Error("LoadableMap requires a `render(loaded, props)` function");return g(p,e)};var h=function(e){function t(){return e.apply(this,arguments)||this}return r(t,e),t.prototype.render=function(){return s.createElement(u.Provider,{value:{report:this.props.report}},s.Children.only(this.props.children))},t}(s.Component);function y(e){for(var t=[];e.length;){var n=e.pop();t.push(n())}return Promise.all(t).then((function(){if(e.length)return y(e)}))}m.Capture=h,m.preloadAll=function(){return new Promise((function(e,t){y(l).then(e,t)}))},m.preloadReady=function(){return new Promise((function(e,t){y(c).then(e,e)}))},e.exports=m},2831:(e,t,n)=>{"use strict";n.d(t,{u:()=>i,v:()=>s});var r=n(6347),o=n(8168),a=n(6540);function i(e,t,n){return void 0===n&&(n=[]),e.some((function(e){var o=e.path?(0,r.B6)(t,e):n.length?n[n.length-1].match:r.Ix.computeRootMatch(t);return o&&(n.push({route:e,match:o}),e.routes&&i(e.routes,t,n)),o})),n}function s(e,t,n){return void 0===t&&(t={}),void 0===n&&(n={}),e?a.createElement(r.dO,n,e.map((function(e,n){return a.createElement(r.qh,{key:e.key||n,path:e.path,exact:e.exact,strict:e.strict,render:function(n){return e.render?e.render((0,o.A)({},n,{},t,{route:e})):a.createElement(e.component,(0,o.A)({},n,t,{route:e}))}})}))):null}},4625:(e,t,n)=>{"use strict";n.d(t,{I9:()=>d,Kd:()=>u,N_:()=>y,k2:()=>w});var r=n(6347),o=n(2892),a=n(6540),i=n(1513),s=n(8168),l=n(8587),c=n(1561),u=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).history=(0,i.zR)(t.props),t}return(0,o.A)(t,e),t.prototype.render=function(){return a.createElement(r.Ix,{history:this.history,children:this.props.children})},t}(a.Component);var d=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).history=(0,i.TM)(t.props),t}return(0,o.A)(t,e),t.prototype.render=function(){return a.createElement(r.Ix,{history:this.history,children:this.props.children})},t}(a.Component);var p=function(e,t){return"function"==typeof e?e(t):e},f=function(e,t){return"string"==typeof e?(0,i.yJ)(e,null,null,t):e},g=function(e){return e},m=a.forwardRef;void 0===m&&(m=g);var h=m((function(e,t){var n=e.innerRef,r=e.navigate,o=e.onClick,i=(0,l.A)(e,["innerRef","navigate","onClick"]),c=i.target,u=(0,s.A)({},i,{onClick:function(e){try{o&&o(e)}catch(t){throw e.preventDefault(),t}e.defaultPrevented||0!==e.button||c&&"_self"!==c||function(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}(e)||(e.preventDefault(),r())}});return u.ref=g!==m&&t||n,a.createElement("a",u)}));var y=m((function(e,t){var n=e.component,o=void 0===n?h:n,u=e.replace,d=e.to,y=e.innerRef,b=(0,l.A)(e,["component","replace","to","innerRef"]);return a.createElement(r.XZ.Consumer,null,(function(e){e||(0,c.A)(!1);var n=e.history,r=f(p(d,e.location),e.location),l=r?n.createHref(r):"",h=(0,s.A)({},b,{href:l,navigate:function(){var t=p(d,e.location),r=(0,i.AO)(e.location)===(0,i.AO)(f(t));(u||r?n.replace:n.push)(t)}});return g!==m?h.ref=t||y:h.innerRef=y,a.createElement(o,h)}))})),b=function(e){return e},v=a.forwardRef;void 0===v&&(v=b);var w=v((function(e,t){var n=e["aria-current"],o=void 0===n?"page":n,i=e.activeClassName,u=void 0===i?"active":i,d=e.activeStyle,g=e.className,m=e.exact,h=e.isActive,w=e.location,k=e.sensitive,x=e.strict,S=e.style,_=e.to,E=e.innerRef,C=(0,l.A)(e,["aria-current","activeClassName","activeStyle","className","exact","isActive","location","sensitive","strict","style","to","innerRef"]);return a.createElement(r.XZ.Consumer,null,(function(e){e||(0,c.A)(!1);var n=w||e.location,i=f(p(_,n),n),l=i.pathname,A=l&&l.replace(/([.+*?=^!:${}()[\]|/\\])/g,"\\$1"),T=A?(0,r.B6)(n.pathname,{path:A,exact:m,sensitive:k,strict:x}):null,j=!!(h?h(T,n):T),R="function"==typeof g?g(j):g,P="function"==typeof S?S(j):S;j&&(R=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return t.filter((function(e){return e})).join(" ")}(R,u),P=(0,s.A)({},P,d));var L=(0,s.A)({"aria-current":j&&o||null,className:R,style:P,to:i},C);return b!==v?L.ref=t||E:L.innerRef=E,a.createElement(y,L)}))}))},6347:(e,t,n)=>{"use strict";n.d(t,{B6:()=>S,Ix:()=>v,W6:()=>L,XZ:()=>b,dO:()=>R,qh:()=>_,zy:()=>N});var r=n(2892),o=n(6540),a=n(5556),i=n.n(a),s=n(1513),l=n(1561),c=n(8168),u=n(5302),d=n.n(u),p=(n(4363),n(8587)),f=(n(4146),1073741823),g="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:void 0!==n.g?n.g:{};var m=o.createContext||function(e,t){var n,a,s="__create-react-context-"+function(){var e="__global_unique_id__";return g[e]=(g[e]||0)+1}()+"__",l=function(e){function n(){for(var t,n,r,o=arguments.length,a=new Array(o),i=0;i<o;i++)a[i]=arguments[i];return(t=e.call.apply(e,[this].concat(a))||this).emitter=(n=t.props.value,r=[],{on:function(e){r.push(e)},off:function(e){r=r.filter((function(t){return t!==e}))},get:function(){return n},set:function(e,t){n=e,r.forEach((function(e){return e(n,t)}))}}),t}(0,r.A)(n,e);var o=n.prototype;return o.getChildContext=function(){var e;return(e={})[s]=this.emitter,e},o.componentWillReceiveProps=function(e){if(this.props.value!==e.value){var n,r=this.props.value,o=e.value;((a=r)===(i=o)?0!==a||1/a==1/i:a!=a&&i!=i)?n=0:(n="function"==typeof t?t(r,o):f,0!==(n|=0)&&this.emitter.set(e.value,n))}var a,i},o.render=function(){return this.props.children},n}(o.Component);l.childContextTypes=((n={})[s]=i().object.isRequired,n);var c=function(t){function n(){for(var e,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(e=t.call.apply(t,[this].concat(r))||this).observedBits=void 0,e.state={value:e.getValue()},e.onUpdate=function(t,n){(0|e.observedBits)&n&&e.setState({value:e.getValue()})},e}(0,r.A)(n,t);var o=n.prototype;return o.componentWillReceiveProps=function(e){var t=e.observedBits;this.observedBits=null==t?f:t},o.componentDidMount=function(){this.context[s]&&this.context[s].on(this.onUpdate);var e=this.props.observedBits;this.observedBits=null==e?f:e},o.componentWillUnmount=function(){this.context[s]&&this.context[s].off(this.onUpdate)},o.getValue=function(){return this.context[s]?this.context[s].get():e},o.render=function(){return(e=this.props.children,Array.isArray(e)?e[0]:e)(this.state.value);var e},n}(o.Component);return c.contextTypes=((a={})[s]=i().object,a),{Provider:l,Consumer:c}},h=function(e){var t=m();return t.displayName=e,t},y=h("Router-History"),b=h("Router"),v=function(e){function t(t){var n;return(n=e.call(this,t)||this).state={location:t.history.location},n._isMounted=!1,n._pendingLocation=null,t.staticContext||(n.unlisten=t.history.listen((function(e){n._pendingLocation=e}))),n}(0,r.A)(t,e),t.computeRootMatch=function(e){return{path:"/",url:"/",params:{},isExact:"/"===e}};var n=t.prototype;return n.componentDidMount=function(){var e=this;this._isMounted=!0,this.unlisten&&this.unlisten(),this.props.staticContext||(this.unlisten=this.props.history.listen((function(t){e._isMounted&&e.setState({location:t})}))),this._pendingLocation&&this.setState({location:this._pendingLocation})},n.componentWillUnmount=function(){this.unlisten&&(this.unlisten(),this._isMounted=!1,this._pendingLocation=null)},n.render=function(){return o.createElement(b.Provider,{value:{history:this.props.history,location:this.state.location,match:t.computeRootMatch(this.state.location.pathname),staticContext:this.props.staticContext}},o.createElement(y.Provider,{children:this.props.children||null,value:this.props.history}))},t}(o.Component);o.Component;o.Component;var w={},k=1e4,x=0;function S(e,t){void 0===t&&(t={}),("string"==typeof t||Array.isArray(t))&&(t={path:t});var n=t,r=n.path,o=n.exact,a=void 0!==o&&o,i=n.strict,s=void 0!==i&&i,l=n.sensitive,c=void 0!==l&&l;return[].concat(r).reduce((function(t,n){if(!n&&""!==n)return null;if(t)return t;var r=function(e,t){var n=""+t.end+t.strict+t.sensitive,r=w[n]||(w[n]={});if(r[e])return r[e];var o=[],a={regexp:d()(e,o,t),keys:o};return x<k&&(r[e]=a,x++),a}(n,{end:a,strict:s,sensitive:c}),o=r.regexp,i=r.keys,l=o.exec(e);if(!l)return null;var u=l[0],p=l.slice(1),f=e===u;return a&&!f?null:{path:n,url:"/"===n&&""===u?"/":u,isExact:f,params:i.reduce((function(e,t,n){return e[t.name]=p[n],e}),{})}}),null)}var _=function(e){function t(){return e.apply(this,arguments)||this}return(0,r.A)(t,e),t.prototype.render=function(){var e=this;return o.createElement(b.Consumer,null,(function(t){t||(0,l.A)(!1);var n=e.props.location||t.location,r=e.props.computedMatch?e.props.computedMatch:e.props.path?S(n.pathname,e.props):t.match,a=(0,c.A)({},t,{location:n,match:r}),i=e.props,s=i.children,u=i.component,d=i.render;return Array.isArray(s)&&function(e){return 0===o.Children.count(e)}(s)&&(s=null),o.createElement(b.Provider,{value:a},a.match?s?"function"==typeof s?s(a):s:u?o.createElement(u,a):d?d(a):null:"function"==typeof s?s(a):null)}))},t}(o.Component);function E(e){return"/"===e.charAt(0)?e:"/"+e}function C(e,t){if(!e)return t;var n=E(e);return 0!==t.pathname.indexOf(n)?t:(0,c.A)({},t,{pathname:t.pathname.substr(n.length)})}function A(e){return"string"==typeof e?e:(0,s.AO)(e)}function T(e){return function(){(0,l.A)(!1)}}function j(){}o.Component;var R=function(e){function t(){return e.apply(this,arguments)||this}return(0,r.A)(t,e),t.prototype.render=function(){var e=this;return o.createElement(b.Consumer,null,(function(t){t||(0,l.A)(!1);var n,r,a=e.props.location||t.location;return o.Children.forEach(e.props.children,(function(e){if(null==r&&o.isValidElement(e)){n=e;var i=e.props.path||e.props.from;r=i?S(a.pathname,(0,c.A)({},e.props,{path:i})):t.match}})),r?o.cloneElement(n,{location:a,computedMatch:r}):null}))},t}(o.Component);var P=o.useContext;function L(){return P(y)}function N(){return P(b).location}},1020:(e,t,n)=>{"use strict";var r=n(6540),o=Symbol.for("react.element"),a=Symbol.for("react.fragment"),i=Object.prototype.hasOwnProperty,s=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,l={key:!0,ref:!0,__self:!0,__source:!0};function c(e,t,n){var r,a={},c=null,u=null;for(r in void 0!==n&&(c=""+n),void 0!==t.key&&(c=""+t.key),void 0!==t.ref&&(u=t.ref),t)i.call(t,r)&&!l.hasOwnProperty(r)&&(a[r]=t[r]);if(e&&e.defaultProps)for(r in t=e.defaultProps)void 0===a[r]&&(a[r]=t[r]);return{$$typeof:o,type:e,key:c,ref:u,props:a,_owner:s.current}}t.Fragment=a,t.jsx=c,t.jsxs=c},5287:(e,t)=>{"use strict";var n=Symbol.for("react.element"),r=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),a=Symbol.for("react.strict_mode"),i=Symbol.for("react.profiler"),s=Symbol.for("react.provider"),l=Symbol.for("react.context"),c=Symbol.for("react.forward_ref"),u=Symbol.for("react.suspense"),d=Symbol.for("react.memo"),p=Symbol.for("react.lazy"),f=Symbol.iterator;var g={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},m=Object.assign,h={};function y(e,t,n){this.props=e,this.context=t,this.refs=h,this.updater=n||g}function b(){}function v(e,t,n){this.props=e,this.context=t,this.refs=h,this.updater=n||g}y.prototype.isReactComponent={},y.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")},y.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},b.prototype=y.prototype;var w=v.prototype=new b;w.constructor=v,m(w,y.prototype),w.isPureReactComponent=!0;var k=Array.isArray,x=Object.prototype.hasOwnProperty,S={current:null},_={key:!0,ref:!0,__self:!0,__source:!0};function E(e,t,r){var o,a={},i=null,s=null;if(null!=t)for(o in void 0!==t.ref&&(s=t.ref),void 0!==t.key&&(i=""+t.key),t)x.call(t,o)&&!_.hasOwnProperty(o)&&(a[o]=t[o]);var l=arguments.length-2;if(1===l)a.children=r;else if(1<l){for(var c=Array(l),u=0;u<l;u++)c[u]=arguments[u+2];a.children=c}if(e&&e.defaultProps)for(o in l=e.defaultProps)void 0===a[o]&&(a[o]=l[o]);return{$$typeof:n,type:e,key:i,ref:s,props:a,_owner:S.current}}function C(e){return"object"==typeof e&&null!==e&&e.$$typeof===n}var A=/\/+/g;function T(e,t){return"object"==typeof e&&null!==e&&null!=e.key?function(e){var t={"=":"=0",":":"=2"};return"$"+e.replace(/[=:]/g,(function(e){return t[e]}))}(""+e.key):t.toString(36)}function j(e,t,o,a,i){var s=typeof e;"undefined"!==s&&"boolean"!==s||(e=null);var l=!1;if(null===e)l=!0;else switch(s){case"string":case"number":l=!0;break;case"object":switch(e.$$typeof){case n:case r:l=!0}}if(l)return i=i(l=e),e=""===a?"."+T(l,0):a,k(i)?(o="",null!=e&&(o=e.replace(A,"$&/")+"/"),j(i,t,o,"",(function(e){return e}))):null!=i&&(C(i)&&(i=function(e,t){return{$$typeof:n,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(i,o+(!i.key||l&&l.key===i.key?"":(""+i.key).replace(A,"$&/")+"/")+e)),t.push(i)),1;if(l=0,a=""===a?".":a+":",k(e))for(var c=0;c<e.length;c++){var u=a+T(s=e[c],c);l+=j(s,t,o,u,i)}else if(u=function(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=f&&e[f]||e["@@iterator"])?e:null}(e),"function"==typeof u)for(e=u.call(e),c=0;!(s=e.next()).done;)l+=j(s=s.value,t,o,u=a+T(s,c++),i);else if("object"===s)throw t=String(e),Error("Objects are not valid as a React child (found: "+("[object Object]"===t?"object with keys {"+Object.keys(e).join(", ")+"}":t)+"). If you meant to render a collection of children, use an array instead.");return l}function R(e,t,n){if(null==e)return e;var r=[],o=0;return j(e,r,"","",(function(e){return t.call(n,e,o++)})),r}function P(e){if(-1===e._status){var t=e._result;(t=t()).then((function(t){0!==e._status&&-1!==e._status||(e._status=1,e._result=t)}),(function(t){0!==e._status&&-1!==e._status||(e._status=2,e._result=t)})),-1===e._status&&(e._status=0,e._result=t)}if(1===e._status)return e._result.default;throw e._result}var L={current:null},N={transition:null},O={ReactCurrentDispatcher:L,ReactCurrentBatchConfig:N,ReactCurrentOwner:S};function D(){throw Error("act(...) is not supported in production builds of React.")}t.Children={map:R,forEach:function(e,t,n){R(e,(function(){t.apply(this,arguments)}),n)},count:function(e){var t=0;return R(e,(function(){t++})),t},toArray:function(e){return R(e,(function(e){return e}))||[]},only:function(e){if(!C(e))throw Error("React.Children.only expected to receive a single React element child.");return e}},t.Component=y,t.Fragment=o,t.Profiler=i,t.PureComponent=v,t.StrictMode=a,t.Suspense=u,t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=O,t.act=D,t.cloneElement=function(e,t,r){if(null==e)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+e+".");var o=m({},e.props),a=e.key,i=e.ref,s=e._owner;if(null!=t){if(void 0!==t.ref&&(i=t.ref,s=S.current),void 0!==t.key&&(a=""+t.key),e.type&&e.type.defaultProps)var l=e.type.defaultProps;for(c in t)x.call(t,c)&&!_.hasOwnProperty(c)&&(o[c]=void 0===t[c]&&void 0!==l?l[c]:t[c])}var c=arguments.length-2;if(1===c)o.children=r;else if(1<c){l=Array(c);for(var u=0;u<c;u++)l[u]=arguments[u+2];o.children=l}return{$$typeof:n,type:e.type,key:a,ref:i,props:o,_owner:s}},t.createContext=function(e){return(e={$$typeof:l,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null}).Provider={$$typeof:s,_context:e},e.Consumer=e},t.createElement=E,t.createFactory=function(e){var t=E.bind(null,e);return t.type=e,t},t.createRef=function(){return{current:null}},t.forwardRef=function(e){return{$$typeof:c,render:e}},t.isValidElement=C,t.lazy=function(e){return{$$typeof:p,_payload:{_status:-1,_result:e},_init:P}},t.memo=function(e,t){return{$$typeof:d,type:e,compare:void 0===t?null:t}},t.startTransition=function(e){var t=N.transition;N.transition={};try{e()}finally{N.transition=t}},t.unstable_act=D,t.useCallback=function(e,t){return L.current.useCallback(e,t)},t.useContext=function(e){return L.current.useContext(e)},t.useDebugValue=function(){},t.useDeferredValue=function(e){return L.current.useDeferredValue(e)},t.useEffect=function(e,t){return L.current.useEffect(e,t)},t.useId=function(){return L.current.useId()},t.useImperativeHandle=function(e,t,n){return L.current.useImperativeHandle(e,t,n)},t.useInsertionEffect=function(e,t){return L.current.useInsertionEffect(e,t)},t.useLayoutEffect=function(e,t){return L.current.useLayoutEffect(e,t)},t.useMemo=function(e,t){return L.current.useMemo(e,t)},t.useReducer=function(e,t,n){return L.current.useReducer(e,t,n)},t.useRef=function(e){return L.current.useRef(e)},t.useState=function(e){return L.current.useState(e)},t.useSyncExternalStore=function(e,t,n){return L.current.useSyncExternalStore(e,t,n)},t.useTransition=function(){return L.current.useTransition()},t.version="18.3.1"},6540:(e,t,n)=>{"use strict";e.exports=n(5287)},4848:(e,t,n)=>{"use strict";e.exports=n(1020)},7463:(e,t)=>{"use strict";function n(e,t){var n=e.length;e.push(t);e:for(;0<n;){var r=n-1>>>1,o=e[r];if(!(0<a(o,t)))break e;e[r]=t,e[n]=o,n=r}}function r(e){return 0===e.length?null:e[0]}function o(e){if(0===e.length)return null;var t=e[0],n=e.pop();if(n!==t){e[0]=n;e:for(var r=0,o=e.length,i=o>>>1;r<i;){var s=2*(r+1)-1,l=e[s],c=s+1,u=e[c];if(0>a(l,n))c<o&&0>a(u,l)?(e[r]=u,e[c]=n,r=c):(e[r]=l,e[s]=n,r=s);else{if(!(c<o&&0>a(u,n)))break e;e[r]=u,e[c]=n,r=c}}}return t}function a(e,t){var n=e.sortIndex-t.sortIndex;return 0!==n?n:e.id-t.id}if("object"==typeof performance&&"function"==typeof performance.now){var i=performance;t.unstable_now=function(){return i.now()}}else{var s=Date,l=s.now();t.unstable_now=function(){return s.now()-l}}var c=[],u=[],d=1,p=null,f=3,g=!1,m=!1,h=!1,y="function"==typeof setTimeout?setTimeout:null,b="function"==typeof clearTimeout?clearTimeout:null,v="undefined"!=typeof setImmediate?setImmediate:null;function w(e){for(var t=r(u);null!==t;){if(null===t.callback)o(u);else{if(!(t.startTime<=e))break;o(u),t.sortIndex=t.expirationTime,n(c,t)}t=r(u)}}function k(e){if(h=!1,w(e),!m)if(null!==r(c))m=!0,N(x);else{var t=r(u);null!==t&&O(k,t.startTime-e)}}function x(e,n){m=!1,h&&(h=!1,b(C),C=-1),g=!0;var a=f;try{for(w(n),p=r(c);null!==p&&(!(p.expirationTime>n)||e&&!j());){var i=p.callback;if("function"==typeof i){p.callback=null,f=p.priorityLevel;var s=i(p.expirationTime<=n);n=t.unstable_now(),"function"==typeof s?p.callback=s:p===r(c)&&o(c),w(n)}else o(c);p=r(c)}if(null!==p)var l=!0;else{var d=r(u);null!==d&&O(k,d.startTime-n),l=!1}return l}finally{p=null,f=a,g=!1}}"undefined"!=typeof navigator&&void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);var S,_=!1,E=null,C=-1,A=5,T=-1;function j(){return!(t.unstable_now()-T<A)}function R(){if(null!==E){var e=t.unstable_now();T=e;var n=!0;try{n=E(!0,e)}finally{n?S():(_=!1,E=null)}}else _=!1}if("function"==typeof v)S=function(){v(R)};else if("undefined"!=typeof MessageChannel){var P=new MessageChannel,L=P.port2;P.port1.onmessage=R,S=function(){L.postMessage(null)}}else S=function(){y(R,0)};function N(e){E=e,_||(_=!0,S())}function O(e,n){C=y((function(){e(t.unstable_now())}),n)}t.unstable_IdlePriority=5,t.unstable_ImmediatePriority=1,t.unstable_LowPriority=4,t.unstable_NormalPriority=3,t.unstable_Profiling=null,t.unstable_UserBlockingPriority=2,t.unstable_cancelCallback=function(e){e.callback=null},t.unstable_continueExecution=function(){m||g||(m=!0,N(x))},t.unstable_forceFrameRate=function(e){0>e||125<e?console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"):A=0<e?Math.floor(1e3/e):5},t.unstable_getCurrentPriorityLevel=function(){return f},t.unstable_getFirstCallbackNode=function(){return r(c)},t.unstable_next=function(e){switch(f){case 1:case 2:case 3:var t=3;break;default:t=f}var n=f;f=t;try{return e()}finally{f=n}},t.unstable_pauseExecution=function(){},t.unstable_requestPaint=function(){},t.unstable_runWithPriority=function(e,t){switch(e){case 1:case 2:case 3:case 4:case 5:break;default:e=3}var n=f;f=e;try{return t()}finally{f=n}},t.unstable_scheduleCallback=function(e,o,a){var i=t.unstable_now();switch("object"==typeof a&&null!==a?a="number"==typeof(a=a.delay)&&0<a?i+a:i:a=i,e){case 1:var s=-1;break;case 2:s=250;break;case 5:s=1073741823;break;case 4:s=1e4;break;default:s=5e3}return e={id:d++,callback:o,priorityLevel:e,startTime:a,expirationTime:s=a+s,sortIndex:-1},a>i?(e.sortIndex=a,n(u,e),null===r(c)&&e===r(u)&&(h?(b(C),C=-1):h=!0,O(k,a-i))):(e.sortIndex=s,n(c,e),m||g||(m=!0,N(x))),e},t.unstable_shouldYield=j,t.unstable_wrapCallback=function(e){var t=f;return function(){var n=f;f=t;try{return e.apply(this,arguments)}finally{f=n}}}},9982:(e,t,n)=>{"use strict";e.exports=n(7463)},2833:e=>{e.exports=function(e,t,n,r){var o=n?n.call(r,e,t):void 0;if(void 0!==o)return!!o;if(e===t)return!0;if("object"!=typeof e||!e||"object"!=typeof t||!t)return!1;var a=Object.keys(e),i=Object.keys(t);if(a.length!==i.length)return!1;for(var s=Object.prototype.hasOwnProperty.bind(t),l=0;l<a.length;l++){var c=a[l];if(!s(c))return!1;var u=e[c],d=t[c];if(!1===(o=n?n.call(r,u,d,c):void 0)||void 0===o&&u!==d)return!1}return!0}},4784:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>r});const r={title:"Stylable",tagline:"is CSS for components",url:"https://stylable.io",baseUrl:"/",onBrokenLinks:"throw",onBrokenMarkdownLinks:"warn",favicon:"img/favicon.ico",organizationName:"wixplosives",projectName:"stylable.io",trailingSlash:!1,themeConfig:{colorMode:{defaultMode:"dark",respectPrefersColorScheme:!0,disableSwitch:!1},navbar:{hideOnScroll:!0,title:"Stylable",logo:{alt:"Stylable Logo",src:"img/branding/logo/SVG/96-logo-OnlySymbol.svg"},items:[{to:"docs/getting-started/intro",activeBasePath:"docs/getting-started",label:"Getting Started",position:"left"},{to:"docs/guides/handbook/intro",activeBasePath:"docs/guides",label:"Guides",position:"left"},{to:"docs/references/cheatsheet",activeBasePath:"docs/references",label:"API",position:"left"},{to:"playground",label:"Playground",position:"left"},{to:"community",label:"Community",position:"left"},{to:"blog",label:"Blog",position:"left"},{href:"https://github.com/wix/stylable",position:"right",className:"githubIcon__root","aria-label":"GitHub repository"}]},footer:{style:"dark",links:[{title:"Docs",items:[{label:"Getting Started",to:"docs/getting-started/intro"},{label:"Guides",to:"docs/guides/handbook/intro"},{label:"API",to:"docs/references/cheatsheet"}]},{title:"Community",items:[{label:"Issues",href:"https://github.com/wix/stylable/issues"},{label:"Twitter",href:"https://twitter.com/stylableio"},{label:"Discord",href:"https://discord.gg/C5ZhENSbV7"}]},{title:"More",items:[{label:"Site GitHub",href:"https://github.com/wixplosives/stylable.io"},{label:"Style Guide",to:"docs/style-guide"},{label:"Attributions",to:"docs/attributions"}]}],copyright:"Copyright \xa9 2025 Wix.com. Built with Docusaurus."},docs:{versionPersistence:"localStorage",sidebar:{hideable:!1,autoCollapseCategories:!1}},blog:{sidebar:{groupByYear:!0}},metadata:[],prism:{additionalLanguages:[],theme:{plain:{color:"#bfc7d5",backgroundColor:"#292d3e"},styles:[{types:["comment"],style:{color:"rgb(105, 112, 152)",fontStyle:"italic"}},{types:["string","inserted"],style:{color:"rgb(195, 232, 141)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation","selector"],style:{color:"rgb(199, 146, 234)"}},{types:["variable"],style:{color:"rgb(191, 199, 213)"}},{types:["class-name","attr-name"],style:{color:"rgb(255, 203, 107)"}},{types:["tag","deleted"],style:{color:"rgb(255, 85, 114)"}},{types:["operator"],style:{color:"rgb(137, 221, 255)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["keyword"],style:{fontStyle:"italic"}},{types:["doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}},{types:["url"],style:{color:"rgb(221, 221, 221)"}}]},magicComments:[{className:"theme-code-block-highlighted-line",line:"highlight-next-line",block:{start:"highlight-start",end:"highlight-end"}}]},tableOfContents:{minHeadingLevel:2,maxHeadingLevel:3}},presets:[["@docusaurus/preset-classic",{docs:{sidebarPath:"/home/runner/work/stylable.io/stylable.io/src/sidebars.js",editUrl:"https://github.com/wixplosives/stylable.io/edit/master",exclude:["unpublished/**"]},blog:{showReadingTime:!0,editUrl:"https://github.com/wixplosives/stylable.io/edit/master",onInlineAuthors:"ignore"},googleAnalytics:{trackingID:"UA-109043375-1",anonymizeIP:!0}}]],plugins:[["/home/runner/work/stylable.io/stylable.io/node_modules/@easyops-cn/docusaurus-search-local/dist/server/server/index.js",{hashed:!0}],["/home/runner/work/stylable.io/stylable.io/plugins/stylable-plugin.js",{}]],baseUrlIssueBanner:!0,i18n:{defaultLocale:"en",path:"i18n",locales:["en"],localeConfigs:{}},future:{experimental_faster:{swcJsLoader:!1,swcJsMinimizer:!1,swcHtmlMinimizer:!1,lightningCssMinimizer:!1,mdxCrossCompilerCache:!1,rspackBundler:!1},experimental_storage:{type:"localStorage",namespace:!1},experimental_router:"browser"},onBrokenAnchors:"warn",onDuplicateRoutes:"warn",staticDirectories:["static"],customFields:{},themes:[],scripts:[],headTags:[],stylesheets:[],clientModules:[],titleDelimiter:"|",noIndex:!1,markdown:{format:"mdx",mermaid:!1,mdx1Compat:{comments:!0,admonitions:!0,headingIds:!0},anchors:{maintainCase:!1}}}},8168:(e,t,n)=>{"use strict";function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},r.apply(null,arguments)}n.d(t,{A:()=>r})},2892:(e,t,n)=>{"use strict";function r(e,t){return r=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},r(e,t)}function o(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,r(e,t)}n.d(t,{A:()=>o})},8587:(e,t,n)=>{"use strict";function r(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}n.d(t,{A:()=>r})},4164:(e,t,n)=>{"use strict";function r(e){var t,n,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e)){var a=e.length;for(t=0;t<a;t++)e[t]&&(n=r(e[t]))&&(o&&(o+=" "),o+=n)}else for(n in e)e[n]&&(o&&(o+=" "),o+=n);return o}n.d(t,{A:()=>o});const o=function(){for(var e,t,n=0,o="",a=arguments.length;n<a;n++)(e=arguments[n])&&(t=r(e))&&(o&&(o+=" "),o+=t);return o}},1765:(e,t,n)=>{"use strict";n.d(t,{My:()=>A,f4:()=>ne});var r,o,a,i,s,l,c,u=n(6540),d=n(4164),p=Object.create,f=Object.defineProperty,g=Object.defineProperties,m=Object.getOwnPropertyDescriptor,h=Object.getOwnPropertyDescriptors,y=Object.getOwnPropertyNames,b=Object.getOwnPropertySymbols,v=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable,x=(e,t,n)=>t in e?f(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,S=(e,t)=>{for(var n in t||(t={}))w.call(t,n)&&x(e,n,t[n]);if(b)for(var n of b(t))k.call(t,n)&&x(e,n,t[n]);return e},_=(e,t)=>g(e,h(t)),E=(e,t)=>{var n={};for(var r in e)w.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&b)for(var r of b(e))t.indexOf(r)<0&&k.call(e,r)&&(n[r]=e[r]);return n},C=(r={"../../node_modules/.pnpm/prismjs@1.29.0_patch_hash=vrxx3pzkik6jpmgpayxfjunetu/node_modules/prismjs/prism.js"(e,t){var n=function(){var e=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,n={},r={util:{encode:function e(t){return t instanceof o?new o(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function e(t,n){var o,a;switch(n=n||{},r.util.type(t)){case"Object":if(a=r.util.objId(t),n[a])return n[a];for(var i in o={},n[a]=o,t)t.hasOwnProperty(i)&&(o[i]=e(t[i],n));return o;case"Array":return a=r.util.objId(t),n[a]?n[a]:(o=[],n[a]=o,t.forEach((function(t,r){o[r]=e(t,n)})),o);default:return t}},getLanguage:function(t){for(;t;){var n=e.exec(t.className);if(n)return n[1].toLowerCase();t=t.parentElement}return"none"},setLanguage:function(t,n){t.className=t.className.replace(RegExp(e,"gi"),""),t.classList.add("language-"+n)},isActive:function(e,t,n){for(var r="no-"+t;e;){var o=e.classList;if(o.contains(t))return!0;if(o.contains(r))return!1;e=e.parentElement}return!!n}},languages:{plain:n,plaintext:n,text:n,txt:n,extend:function(e,t){var n=r.util.clone(r.languages[e]);for(var o in t)n[o]=t[o];return n},insertBefore:function(e,t,n,o){var a=(o=o||r.languages)[e],i={};for(var s in a)if(a.hasOwnProperty(s)){if(s==t)for(var l in n)n.hasOwnProperty(l)&&(i[l]=n[l]);n.hasOwnProperty(s)||(i[s]=a[s])}var c=o[e];return o[e]=i,r.languages.DFS(r.languages,(function(t,n){n===c&&t!=e&&(this[t]=i)})),i},DFS:function e(t,n,o,a){a=a||{};var i=r.util.objId;for(var s in t)if(t.hasOwnProperty(s)){n.call(t,s,t[s],o||s);var l=t[s],c=r.util.type(l);"Object"!==c||a[i(l)]?"Array"!==c||a[i(l)]||(a[i(l)]=!0,e(l,n,s,a)):(a[i(l)]=!0,e(l,n,null,a))}}},plugins:{},highlight:function(e,t,n){var a={code:e,grammar:t,language:n};if(r.hooks.run("before-tokenize",a),!a.grammar)throw new Error('The language "'+a.language+'" has no grammar.');return a.tokens=r.tokenize(a.code,a.grammar),r.hooks.run("after-tokenize",a),o.stringify(r.util.encode(a.tokens),a.language)},tokenize:function(e,t){var n=t.rest;if(n){for(var r in n)t[r]=n[r];delete t.rest}var o=new s;return l(o,o.head,e),i(e,o,t,o.head,0),function(e){for(var t=[],n=e.head.next;n!==e.tail;)t.push(n.value),n=n.next;return t}(o)},hooks:{all:{},add:function(e,t){var n=r.hooks.all;n[e]=n[e]||[],n[e].push(t)},run:function(e,t){var n=r.hooks.all[e];if(n&&n.length)for(var o,a=0;o=n[a++];)o(t)}},Token:o};function o(e,t,n,r){this.type=e,this.content=t,this.alias=n,this.length=0|(r||"").length}function a(e,t,n,r){e.lastIndex=t;var o=e.exec(n);if(o&&r&&o[1]){var a=o[1].length;o.index+=a,o[0]=o[0].slice(a)}return o}function i(e,t,n,s,u,d){for(var p in n)if(n.hasOwnProperty(p)&&n[p]){var f=n[p];f=Array.isArray(f)?f:[f];for(var g=0;g<f.length;++g){if(d&&d.cause==p+","+g)return;var m=f[g],h=m.inside,y=!!m.lookbehind,b=!!m.greedy,v=m.alias;if(b&&!m.pattern.global){var w=m.pattern.toString().match(/[imsuy]*$/)[0];m.pattern=RegExp(m.pattern.source,w+"g")}for(var k=m.pattern||m,x=s.next,S=u;x!==t.tail&&!(d&&S>=d.reach);S+=x.value.length,x=x.next){var _=x.value;if(t.length>e.length)return;if(!(_ instanceof o)){var E,C=1;if(b){if(!(E=a(k,S,e,y))||E.index>=e.length)break;var A=E.index,T=E.index+E[0].length,j=S;for(j+=x.value.length;A>=j;)j+=(x=x.next).value.length;if(S=j-=x.value.length,x.value instanceof o)continue;for(var R=x;R!==t.tail&&(j<T||"string"==typeof R.value);R=R.next)C++,j+=R.value.length;C--,_=e.slice(S,j),E.index-=S}else if(!(E=a(k,0,_,y)))continue;A=E.index;var P=E[0],L=_.slice(0,A),N=_.slice(A+P.length),O=S+_.length;d&&O>d.reach&&(d.reach=O);var D=x.prev;if(L&&(D=l(t,D,L),S+=L.length),c(t,D,C),x=l(t,D,new o(p,h?r.tokenize(P,h):P,v,P)),N&&l(t,x,N),C>1){var I={cause:p+","+g,reach:O};i(e,t,n,x.prev,S,I),d&&I.reach>d.reach&&(d.reach=I.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function l(e,t,n){var r=t.next,o={value:n,prev:t,next:r};return t.next=o,r.prev=o,e.length++,o}function c(e,t,n){for(var r=t.next,o=0;o<n&&r!==e.tail;o++)r=r.next;t.next=r,r.prev=t,e.length-=o}return o.stringify=function e(t,n){if("string"==typeof t)return t;if(Array.isArray(t)){var o="";return t.forEach((function(t){o+=e(t,n)})),o}var a={type:t.type,content:e(t.content,n),tag:"span",classes:["token",t.type],attributes:{},language:n},i=t.alias;i&&(Array.isArray(i)?Array.prototype.push.apply(a.classes,i):a.classes.push(i)),r.hooks.run("wrap",a);var s="";for(var l in a.attributes)s+=" "+l+'="'+(a.attributes[l]||"").replace(/"/g,""")+'"';return"<"+a.tag+' class="'+a.classes.join(" ")+'"'+s+">"+a.content+"</"+a.tag+">"},r}();t.exports=n,n.default=n}},function(){return o||(0,r[y(r)[0]])((o={exports:{}}).exports,o),o.exports}),A=((e,t,n)=>(n=null!=e?p(v(e)):{},((e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let o of y(t))w.call(e,o)||o===n||f(e,o,{get:()=>t[o],enumerable:!(r=m(t,o))||r.enumerable});return e})(!t&&e&&e.__esModule?n:f(n,"default",{value:e,enumerable:!0}),e)))(C());A.languages.markup={comment:{pattern:/<!--(?:(?!<!--)[\s\S])*?-->/,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},A.languages.markup.tag.inside["attr-value"].inside.entity=A.languages.markup.entity,A.languages.markup.doctype.inside["internal-subset"].inside=A.languages.markup,A.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))})),Object.defineProperty(A.languages.markup.tag,"addInlined",{value:function(e,t){var n;(t=((n=((n={})["language-"+t]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:A.languages[t]},n.cdata=/^<!\[CDATA\[|\]\]>$/i,{"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:n}}))["language-"+t]={pattern:/[\s\S]+/,inside:A.languages[t]},{}))[e]={pattern:RegExp(/(<__[^>]*>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:n},A.languages.insertBefore("markup","cdata",t)}}),Object.defineProperty(A.languages.markup.tag,"addAttribute",{value:function(e,t){A.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+e+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[t,"language-"+t],inside:A.languages[t]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),A.languages.html=A.languages.markup,A.languages.mathml=A.languages.markup,A.languages.svg=A.languages.markup,A.languages.xml=A.languages.extend("markup",{}),A.languages.ssml=A.languages.xml,A.languages.atom=A.languages.xml,A.languages.rss=A.languages.xml,a=A,i={pattern:/\\[\\(){}[\]^$+*?|.]/,alias:"escape"},l="(?:[^\\\\-]|"+(s=/\\(?:x[\da-fA-F]{2}|u[\da-fA-F]{4}|u\{[\da-fA-F]+\}|0[0-7]{0,2}|[123][0-7]{2}|c[a-zA-Z]|.)/).source+")",l=RegExp(l+"-"+l),c={pattern:/(<|')[^<>']+(?=[>']$)/,lookbehind:!0,alias:"variable"},a.languages.regex={"char-class":{pattern:/((?:^|[^\\])(?:\\\\)*)\[(?:[^\\\]]|\\[\s\S])*\]/,lookbehind:!0,inside:{"char-class-negation":{pattern:/(^\[)\^/,lookbehind:!0,alias:"operator"},"char-class-punctuation":{pattern:/^\[|\]$/,alias:"punctuation"},range:{pattern:l,inside:{escape:s,"range-punctuation":{pattern:/-/,alias:"operator"}}},"special-escape":i,"char-set":{pattern:/\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},escape:s}},"special-escape":i,"char-set":{pattern:/\.|\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},backreference:[{pattern:/\\(?![123][0-7]{2})[1-9]/,alias:"keyword"},{pattern:/\\k<[^<>']+>/,alias:"keyword",inside:{"group-name":c}}],anchor:{pattern:/[$^]|\\[ABbGZz]/,alias:"function"},escape:s,group:[{pattern:/\((?:\?(?:<[^<>']+>|'[^<>']+'|[>:]|<?[=!]|[idmnsuxU]+(?:-[idmnsuxU]+)?:?))?/,alias:"punctuation",inside:{"group-name":c}},{pattern:/\)/,alias:"punctuation"}],quantifier:{pattern:/(?:[+*?]|\{\d+(?:,\d*)?\})[?+]?/,alias:"number"},alternation:{pattern:/\|/,alias:"keyword"}},A.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},A.languages.javascript=A.languages.extend("clike",{"class-name":[A.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|"+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),A.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,A.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp(/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)/.source+/\//.source+"(?:"+/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}/.source+"|"+/(?:\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.)*\])*\])*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}v[dgimyus]{0,7}/.source+")"+/(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/.source),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:A.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:A.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:A.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:A.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:A.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),A.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:A.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),A.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),A.languages.markup&&(A.languages.markup.tag.addInlined("script","javascript"),A.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),A.languages.js=A.languages.javascript,A.languages.actionscript=A.languages.extend("javascript",{keyword:/\b(?:as|break|case|catch|class|const|default|delete|do|dynamic|each|else|extends|final|finally|for|function|get|if|implements|import|in|include|instanceof|interface|internal|is|namespace|native|new|null|override|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|use|var|void|while|with)\b/,operator:/\+\+|--|(?:[+\-*\/%^]|&&?|\|\|?|<<?|>>?>?|[!=]=?)=?|[~?@]/}),A.languages.actionscript["class-name"].alias="function",delete A.languages.actionscript.parameter,delete A.languages.actionscript["literal-property"],A.languages.markup&&A.languages.insertBefore("actionscript","string",{xml:{pattern:/(^|[^.])<\/?\w+(?:\s+[^\s>\/=]+=("|')(?:\\[\s\S]|(?!\2)[^\\])*\2)*\s*\/?>/,lookbehind:!0,inside:A.languages.markup}}),function(e){var t=/#(?!\{).+/,n={pattern:/#\{[^}]+\}/,alias:"variable"};e.languages.coffeescript=e.languages.extend("javascript",{comment:t,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:n}}],keyword:/\b(?:and|break|by|catch|class|continue|debugger|delete|do|each|else|extend|extends|false|finally|for|if|in|instanceof|is|isnt|let|loop|namespace|new|no|not|null|of|off|on|or|own|return|super|switch|then|this|throw|true|try|typeof|undefined|unless|until|when|while|window|with|yes|yield)\b/,"class-member":{pattern:/@(?!\d)\w+/,alias:"variable"}}),e.languages.insertBefore("coffeescript","comment",{"multiline-comment":{pattern:/###[\s\S]+?###/,alias:"comment"},"block-regex":{pattern:/\/{3}[\s\S]*?\/{3}/,alias:"regex",inside:{comment:t,interpolation:n}}}),e.languages.insertBefore("coffeescript","string",{"inline-javascript":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,inside:{delimiter:{pattern:/^`|`$/,alias:"punctuation"},script:{pattern:/[\s\S]+/,alias:"language-javascript",inside:e.languages.javascript}}},"multiline-string":[{pattern:/'''[\s\S]*?'''/,greedy:!0,alias:"string"},{pattern:/"""[\s\S]*?"""/,greedy:!0,alias:"string",inside:{interpolation:n}}]}),e.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete e.languages.coffeescript["template-string"],e.languages.coffee=e.languages.coffeescript}(A),function(e){var t=e.languages.javadoclike={parameter:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*@(?:arg|arguments|param)\s+)\w+/m,lookbehind:!0},keyword:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*|\{)@[a-z][a-zA-Z-]+\b/m,lookbehind:!0},punctuation:/[{}]/};Object.defineProperty(t,"addSupport",{value:function(t,n){(t="string"==typeof t?[t]:t).forEach((function(t){var r=function(e){e.inside||(e.inside={}),e.inside.rest=n},o="doc-comment";if(a=e.languages[t]){var a,i=a[o];if((i=i||(a=e.languages.insertBefore(t,"comment",{"doc-comment":{pattern:/(^|[^\\])\/\*\*[^/][\s\S]*?(?:\*\/|$)/,lookbehind:!0,alias:"comment"}}))[o])instanceof RegExp&&(i=a[o]={pattern:i}),Array.isArray(i))for(var s=0,l=i.length;s<l;s++)i[s]instanceof RegExp&&(i[s]={pattern:i[s]}),r(i[s]);else r(i)}}))}}),t.addSupport(["java","javascript","php"],t)}(A),function(e){var t=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;(t=(e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:RegExp("@[\\w-](?:"+/[^;{\s"']|\s+(?!\s)/.source+"|"+t.source+")*?"+/(?:;|(?=\s*\{))/.source),inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+t.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+t.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+t.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:t,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css,e.languages.markup))&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(A),function(e){var t=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,n=(t=(e.languages.css.selector={pattern:e.languages.css.selector.pattern,lookbehind:!0,inside:t={"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,"pseudo-class":/:[-\w]+/,class:/\.[-\w]+/,id:/#[-\w]+/,attribute:{pattern:RegExp("\\[(?:[^[\\]\"']|"+t.source+")*\\]"),greedy:!0,inside:{punctuation:/^\[|\]$/,"case-sensitivity":{pattern:/(\s)[si]$/i,lookbehind:!0,alias:"keyword"},namespace:{pattern:/^(\s*)(?:(?!\s)[-*\w\xA0-\uFFFF])*\|(?!=)/,lookbehind:!0,inside:{punctuation:/\|$/}},"attr-name":{pattern:/^(\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+/,lookbehind:!0},"attr-value":[t,{pattern:/(=\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+(?=\s*$)/,lookbehind:!0}],operator:/[|~*^$]?=/}},"n-th":[{pattern:/(\(\s*)[+-]?\d*[\dn](?:\s*[+-]\s*\d+)?(?=\s*\))/,lookbehind:!0,inside:{number:/[\dn]+/,operator:/[+-]/}},{pattern:/(\(\s*)(?:even|odd)(?=\s*\))/i,lookbehind:!0}],combinator:/>|\+|~|\|\|/,punctuation:/[(),]/}},e.languages.css.atrule.inside["selector-function-argument"].inside=t,e.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*/i,lookbehind:!0}}),{pattern:/(\b\d+)(?:%|[a-z]+(?![\w-]))/,lookbehind:!0}),{pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0});e.languages.insertBefore("css","function",{operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:{pattern:/\B#[\da-f]{3,8}\b/i,alias:"color"},color:[{pattern:/(^|[^\w-])(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|RebeccaPurple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)(?![\w-])/i,lookbehind:!0},{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:t,number:n,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:t,number:n})}(A),function(e){var t=/[*&][^\s[\]{},]+/,n=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,r="(?:"+n.source+"(?:[ \t]+"+t.source+")?|"+t.source+"(?:[ \t]+"+n.source+")?)",o=/(?:[^\s\x00-\x08\x0e-\x1f!"#%&'*,\-:>?@[\]`{|}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]|[?:-]<PLAIN>)(?:[ \t]*(?:(?![#:])<PLAIN>|:<PLAIN>))*/.source.replace(/<PLAIN>/g,(function(){return/[^\s\x00-\x08\x0e-\x1f,[\]{}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]/.source})),a=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;function i(e,t){t=(t||"").replace(/m/g,"")+"m";var n=/([:\-,[{]\s*(?:\s<<prop>>[ \t]+)?)(?:<<value>>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<<prop>>/g,(function(){return r})).replace(/<<value>>/g,(function(){return e}));return RegExp(n,t)}e.languages.yaml={scalar:{pattern:RegExp(/([\-:]\s*(?:\s<<prop>>[ \t]+)?[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)\S[^\r\n]*(?:\2[^\r\n]+)*)/.source.replace(/<<prop>>/g,(function(){return r}))),lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:RegExp(/((?:^|[:\-,[{\r\n?])[ \t]*(?:<<prop>>[ \t]+)?)<<key>>(?=\s*:\s)/.source.replace(/<<prop>>/g,(function(){return r})).replace(/<<key>>/g,(function(){return"(?:"+o+"|"+a+")"}))),lookbehind:!0,greedy:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:i(/\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?))?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?/.source),lookbehind:!0,alias:"number"},boolean:{pattern:i(/false|true/.source,"i"),lookbehind:!0,alias:"important"},null:{pattern:i(/null|~/.source,"i"),lookbehind:!0,alias:"important"},string:{pattern:i(a),lookbehind:!0,greedy:!0},number:{pattern:i(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source,"i"),lookbehind:!0},tag:n,important:t,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(A),function(e){var t=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function n(e){return e=e.replace(/<inner>/g,(function(){return t})),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var r=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,o=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,(function(){return r})),a=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source,i=(e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{"front-matter-block":{pattern:/(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,lookbehind:!0,greedy:!0,inside:{punctuation:/^---|---$/,"front-matter":{pattern:/\S+(?:\s+\S+)*/,alias:["yaml","language-yaml"],inside:e.languages.yaml}}},blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+o+a+"(?:"+o+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+o+a+")(?:"+o+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(r),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+o+")"+a+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+o+"$"),inside:{"table-header":{pattern:RegExp(r),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,lookbehind:!0,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:n(/\b__(?:(?!_)<inner>|_(?:(?!_)<inner>)+_)+__\b|\*\*(?:(?!\*)<inner>|\*(?:(?!\*)<inner>)+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/\b_(?:(?!_)<inner>|__(?:(?!_)<inner>)+__)+_\b|\*(?:(?!\*)<inner>|\*\*(?:(?!\*)<inner>)+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~)<inner>)+\2/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},"code-snippet":{pattern:/(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,lookbehind:!0,greedy:!0,alias:["code","keyword"]},url:{pattern:n(/!?\[(?:(?!\])<inner>)+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\])<inner>)+\])/.source),lookbehind:!0,greedy:!0,inside:{operator:/^!/,content:{pattern:/(^\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},variable:{pattern:/(^\][ \t]?\[)[^\]]+(?=\]$)/,lookbehind:!0},url:{pattern:/(^\]\()[^\s)]+/,lookbehind:!0},string:{pattern:/(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,lookbehind:!0}}}}),["url","bold","italic","strike"].forEach((function(t){["url","bold","italic","strike","code-snippet"].forEach((function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var n=0,r=t.length;n<r;n++){var o,a=t[n];"code"!==a.type?e(a.content):(o=a.content[1],a=a.content[3],o&&a&&"code-language"===o.type&&"code-block"===a.type&&"string"==typeof o.content&&(o=o.content.replace(/\b#/g,"sharp").replace(/\b\+\+/g,"pp"),o="language-"+(o=(/[a-z][\w-]*/i.exec(o)||[""])[0].toLowerCase()),a.alias?"string"==typeof a.alias?a.alias=[a.alias,o]:a.alias.push(o):a.alias=[o]))}}(e.tokens)})),e.hooks.add("wrap",(function(t){if("code-block"===t.type){for(var n="",r=0,o=t.classes.length;r<o;r++){var a=t.classes[r];if(a=/language-(.+)/.exec(a)){n=a[1];break}}var c,u=e.languages[n];u?t.content=e.highlight(t.content.replace(i,"").replace(/&(\w{1,8}|#x?[\da-f]{1,8});/gi,(function(e,t){var n;return"#"===(t=t.toLowerCase())[0]?(n="x"===t[1]?parseInt(t.slice(2),16):Number(t.slice(1)),l(n)):s[t]||e})),u,n):n&&"none"!==n&&e.plugins.autoloader&&(c="md-"+(new Date).valueOf()+"-"+Math.floor(1e16*Math.random()),t.attributes.id=c,e.plugins.autoloader.loadLanguages(n,(function(){var t=document.getElementById(c);t&&(t.innerHTML=e.highlight(t.textContent,e.languages[n],n))})))}})),RegExp(e.languages.markup.tag.pattern.source,"gi")),s={amp:"&",lt:"<",gt:">",quot:'"'},l=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(A),A.languages.graphql={comment:/#.*/,description:{pattern:/(?:"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*")(?=\s*[a-z_])/i,greedy:!0,alias:"string",inside:{"language-markdown":{pattern:/(^"(?:"")?)(?!\1)[\s\S]+(?=\1$)/,lookbehind:!0,inside:A.languages.markdown}}},string:{pattern:/"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*"/,greedy:!0},number:/(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,boolean:/\b(?:false|true)\b/,variable:/\$[a-z_]\w*/i,directive:{pattern:/@[a-z_]\w*/i,alias:"function"},"attr-name":{pattern:/\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,greedy:!0},"atom-input":{pattern:/\b[A-Z]\w*Input\b/,alias:"class-name"},scalar:/\b(?:Boolean|Float|ID|Int|String)\b/,constant:/\b[A-Z][A-Z_\d]*\b/,"class-name":{pattern:/(\b(?:enum|implements|interface|on|scalar|type|union)\s+|&\s*|:\s*|\[)[A-Z_]\w*/,lookbehind:!0},fragment:{pattern:/(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-mutation":{pattern:/(\bmutation\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-query":{pattern:/(\bquery\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},keyword:/\b(?:directive|enum|extend|fragment|implements|input|interface|mutation|on|query|repeatable|scalar|schema|subscription|type|union)\b/,operator:/[!=|&]|\.{3}/,"property-query":/\w+(?=\s*\()/,object:/\w+(?=\s*\{)/,punctuation:/[!(){}\[\]:=,]/,property:/\w+/},A.hooks.add("after-tokenize",(function(e){if("graphql"===e.language)for(var t=e.tokens.filter((function(e){return"string"!=typeof e&&"comment"!==e.type&&"scalar"!==e.type})),n=0;n<t.length;){var r=t[n++];if("keyword"===r.type&&"mutation"===r.content){var o=[];if(d(["definition-mutation","punctuation"])&&"("===u(1).content){n+=2;var a=p(/^\($/,/^\)$/);if(-1===a)continue;for(;n<a;n++){var i=u(0);"variable"===i.type&&(f(i,"variable-input"),o.push(i.content))}n=a+1}if(d(["punctuation","property-query"])&&"{"===u(0).content&&(n++,f(u(0),"property-mutation"),0<o.length)){var s=p(/^\{$/,/^\}$/);if(-1!==s)for(var l=n;l<s;l++){var c=t[l];"variable"===c.type&&0<=o.indexOf(c.content)&&f(c,"variable-input")}}}}function u(e){return t[n+e]}function d(e,t){t=t||0;for(var n=0;n<e.length;n++){var r=u(n+t);if(!r||r.type!==e[n])return}return 1}function p(e,r){for(var o=1,a=n;a<t.length;a++){var i=t[a],s=i.content;if("punctuation"===i.type&&"string"==typeof s)if(e.test(s))o++;else if(r.test(s)&&0==--o)return a}return-1}function f(e,t){var n=e.alias;n?Array.isArray(n)||(e.alias=n=[n]):e.alias=n=[],n.push(t)}})),A.languages.sql={comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|(?:--|\/\/|#).*)/,lookbehind:!0},variable:[{pattern:/@(["'`])(?:\\[\s\S]|(?!\1)[^\\])+\1/,greedy:!0},/@[\w.$]+/],string:{pattern:/(^|[^@\\])("|')(?:\\[\s\S]|(?!\2)[^\\]|\2\2)*\2/,greedy:!0,lookbehind:!0},identifier:{pattern:/(^|[^@\\])`(?:\\[\s\S]|[^`\\]|``)*`/,greedy:!0,lookbehind:!0,inside:{punctuation:/^`|`$/}},function:/\b(?:AVG|COUNT|FIRST|FORMAT|LAST|LCASE|LEN|MAX|MID|MIN|MOD|NOW|ROUND|SUM|UCASE)(?=\s*\()/i,keyword:/\b(?:ACTION|ADD|AFTER|ALGORITHM|ALL|ALTER|ANALYZE|ANY|APPLY|AS|ASC|AUTHORIZATION|AUTO_INCREMENT|BACKUP|BDB|BEGIN|BERKELEYDB|BIGINT|BINARY|BIT|BLOB|BOOL|BOOLEAN|BREAK|BROWSE|BTREE|BULK|BY|CALL|CASCADED?|CASE|CHAIN|CHAR(?:ACTER|SET)?|CHECK(?:POINT)?|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMNS?|COMMENT|COMMIT(?:TED)?|COMPUTE|CONNECT|CONSISTENT|CONSTRAINT|CONTAINS(?:TABLE)?|CONTINUE|CONVERT|CREATE|CROSS|CURRENT(?:_DATE|_TIME|_TIMESTAMP|_USER)?|CURSOR|CYCLE|DATA(?:BASES?)?|DATE(?:TIME)?|DAY|DBCC|DEALLOCATE|DEC|DECIMAL|DECLARE|DEFAULT|DEFINER|DELAYED|DELETE|DELIMITERS?|DENY|DESC|DESCRIBE|DETERMINISTIC|DISABLE|DISCARD|DISK|DISTINCT|DISTINCTROW|DISTRIBUTED|DO|DOUBLE|DROP|DUMMY|DUMP(?:FILE)?|DUPLICATE|ELSE(?:IF)?|ENABLE|ENCLOSED|END|ENGINE|ENUM|ERRLVL|ERRORS|ESCAPED?|EXCEPT|EXEC(?:UTE)?|EXISTS|EXIT|EXPLAIN|EXTENDED|FETCH|FIELDS|FILE|FILLFACTOR|FIRST|FIXED|FLOAT|FOLLOWING|FOR(?: EACH ROW)?|FORCE|FOREIGN|FREETEXT(?:TABLE)?|FROM|FULL|FUNCTION|GEOMETRY(?:COLLECTION)?|GLOBAL|GOTO|GRANT|GROUP|HANDLER|HASH|HAVING|HOLDLOCK|HOUR|IDENTITY(?:COL|_INSERT)?|IF|IGNORE|IMPORT|INDEX|INFILE|INNER|INNODB|INOUT|INSERT|INT|INTEGER|INTERSECT|INTERVAL|INTO|INVOKER|ISOLATION|ITERATE|JOIN|KEYS?|KILL|LANGUAGE|LAST|LEAVE|LEFT|LEVEL|LIMIT|LINENO|LINES|LINESTRING|LOAD|LOCAL|LOCK|LONG(?:BLOB|TEXT)|LOOP|MATCH(?:ED)?|MEDIUM(?:BLOB|INT|TEXT)|MERGE|MIDDLEINT|MINUTE|MODE|MODIFIES|MODIFY|MONTH|MULTI(?:LINESTRING|POINT|POLYGON)|NATIONAL|NATURAL|NCHAR|NEXT|NO|NONCLUSTERED|NULLIF|NUMERIC|OFF?|OFFSETS?|ON|OPEN(?:DATASOURCE|QUERY|ROWSET)?|OPTIMIZE|OPTION(?:ALLY)?|ORDER|OUT(?:ER|FILE)?|OVER|PARTIAL|PARTITION|PERCENT|PIVOT|PLAN|POINT|POLYGON|PRECEDING|PRECISION|PREPARE|PREV|PRIMARY|PRINT|PRIVILEGES|PROC(?:EDURE)?|PUBLIC|PURGE|QUICK|RAISERROR|READS?|REAL|RECONFIGURE|REFERENCES|RELEASE|RENAME|REPEAT(?:ABLE)?|REPLACE|REPLICATION|REQUIRE|RESIGNAL|RESTORE|RESTRICT|RETURN(?:ING|S)?|REVOKE|RIGHT|ROLLBACK|ROUTINE|ROW(?:COUNT|GUIDCOL|S)?|RTREE|RULE|SAVE(?:POINT)?|SCHEMA|SECOND|SELECT|SERIAL(?:IZABLE)?|SESSION(?:_USER)?|SET(?:USER)?|SHARE|SHOW|SHUTDOWN|SIMPLE|SMALLINT|SNAPSHOT|SOME|SONAME|SQL|START(?:ING)?|STATISTICS|STATUS|STRIPED|SYSTEM_USER|TABLES?|TABLESPACE|TEMP(?:ORARY|TABLE)?|TERMINATED|TEXT(?:SIZE)?|THEN|TIME(?:STAMP)?|TINY(?:BLOB|INT|TEXT)|TOP?|TRAN(?:SACTIONS?)?|TRIGGER|TRUNCATE|TSEQUAL|TYPES?|UNBOUNDED|UNCOMMITTED|UNDEFINED|UNION|UNIQUE|UNLOCK|UNPIVOT|UNSIGNED|UPDATE(?:TEXT)?|USAGE|USE|USER|USING|VALUES?|VAR(?:BINARY|CHAR|CHARACTER|YING)|VIEW|WAITFOR|WARNINGS|WHEN|WHERE|WHILE|WITH(?: ROLLUP|IN)?|WORK|WRITE(?:TEXT)?|YEAR)\b/i,boolean:/\b(?:FALSE|NULL|TRUE)\b/i,number:/\b0x[\da-f]+\b|\b\d+(?:\.\d*)?|\B\.\d+\b/i,operator:/[-+*\/=%^~]|&&?|\|\|?|!=?|<(?:=>?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/},function(e){var t=e.languages.javascript["template-string"],n=t.pattern.source,r=t.inside.interpolation,o=r.inside["interpolation-punctuation"],a=r.pattern.source;function i(t,r){if(e.languages[t])return{pattern:RegExp("((?:"+r+")\\s*)"+n),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:t}}}}function s(t,n,r){return t={code:t,grammar:n,language:r},e.hooks.run("before-tokenize",t),t.tokens=e.tokenize(t.code,t.grammar),e.hooks.run("after-tokenize",t),t.tokens}function l(t,n,i){var l=e.tokenize(t,{interpolation:{pattern:RegExp(a),lookbehind:!0}}),c=0,u={},d=(l=s(l.map((function(e){if("string"==typeof e)return e;var n,r;for(e=e.content;-1!==t.indexOf((r=c++,n="___"+i.toUpperCase()+"_"+r+"___")););return u[n]=e,n})).join(""),n,i),Object.keys(u));return c=0,function t(n){for(var a=0;a<n.length;a++){if(c>=d.length)return;var i,l,p,f,g,m,h,y=n[a];"string"==typeof y||"string"==typeof y.content?(i=d[c],-1!==(h=(m="string"==typeof y?y:y.content).indexOf(i))&&(++c,l=m.substring(0,h),g=u[i],p=void 0,(f={})["interpolation-punctuation"]=o,3===(f=e.tokenize(g,f)).length&&((p=[1,1]).push.apply(p,s(f[1],e.languages.javascript,"javascript")),f.splice.apply(f,p)),p=new e.Token("interpolation",f,r.alias,g),f=m.substring(h+i.length),g=[],l&&g.push(l),g.push(p),f&&(t(m=[f]),g.push.apply(g,m)),"string"==typeof y?(n.splice.apply(n,[a,1].concat(g)),a+=g.length-1):y.content=g)):(h=y.content,Array.isArray(h)?t(h):t([h]))}}(l),new e.Token(i,l,"language-"+i,t)}e.languages.javascript["template-string"]=[i("css",/\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/.source),i("html",/\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),i("svg",/\bsvg/.source),i("markdown",/\b(?:markdown|md)/.source),i("graphql",/\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),i("sql",/\bsql/.source),t].filter(Boolean);var c={javascript:!0,js:!0,typescript:!0,ts:!0,jsx:!0,tsx:!0};function u(e){return"string"==typeof e?e:Array.isArray(e)?e.map(u).join(""):u(e.content)}e.hooks.add("after-tokenize",(function(t){t.language in c&&function t(n){for(var r=0,o=n.length;r<o;r++){var a,i,s,c=n[r];"string"!=typeof c&&(a=c.content,Array.isArray(a)?"template-string"===c.type?(c=a[1],3===a.length&&"string"!=typeof c&&"embedded-code"===c.type&&(i=u(c),c=c.alias,c=Array.isArray(c)?c[0]:c,s=e.languages[c])&&(a[1]=l(i,s,c))):t(a):"string"!=typeof a&&t([a]))}}(t.tokens)}))}(A),function(e){e.languages.typescript=e.languages.extend("javascript",{"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|type)\s+)(?!keyof\b)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?:\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete e.languages.typescript.parameter,delete e.languages.typescript["literal-property"];var t=e.languages.extend("typescript",{});delete t["class-name"],e.languages.typescript["class-name"].inside=t,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:t}}}}),e.languages.ts=e.languages.typescript}(A),function(e){var t=e.languages.javascript,n=/\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})+\}/.source,r="(@(?:arg|argument|param|property)\\s+(?:"+n+"\\s+)?)";e.languages.jsdoc=e.languages.extend("javadoclike",{parameter:{pattern:RegExp(r+/(?:(?!\s)[$\w\xA0-\uFFFF.])+(?=\s|$)/.source),lookbehind:!0,inside:{punctuation:/\./}}}),e.languages.insertBefore("jsdoc","keyword",{"optional-parameter":{pattern:RegExp(r+/\[(?:(?!\s)[$\w\xA0-\uFFFF.])+(?:=[^[\]]+)?\](?=\s|$)/.source),lookbehind:!0,inside:{parameter:{pattern:/(^\[)[$\w\xA0-\uFFFF\.]+/,lookbehind:!0,inside:{punctuation:/\./}},code:{pattern:/(=)[\s\S]*(?=\]$)/,lookbehind:!0,inside:t,alias:"language-javascript"},punctuation:/[=[\]]/}},"class-name":[{pattern:RegExp(/(@(?:augments|class|extends|interface|memberof!?|template|this|typedef)\s+(?:<TYPE>\s+)?)[A-Z]\w*(?:\.[A-Z]\w*)*/.source.replace(/<TYPE>/g,(function(){return n}))),lookbehind:!0,inside:{punctuation:/\./}},{pattern:RegExp("(@[a-z]+\\s+)"+n),lookbehind:!0,inside:{string:t.string,number:t.number,boolean:t.boolean,keyword:e.languages.typescript.keyword,operator:/=>|\.\.\.|[&|?:*]/,punctuation:/[.,;=<>{}()[\]]/}}],example:{pattern:/(@example\s+(?!\s))(?:[^@\s]|\s+(?!\s))+?(?=\s*(?:\*\s*)?(?:@\w|\*\/))/,lookbehind:!0,inside:{code:{pattern:/^([\t ]*(?:\*\s*)?)\S.*$/m,lookbehind:!0,inside:t,alias:"language-javascript"}}}}),e.languages.javadoclike.addSupport("javascript",e.languages.jsdoc)}(A),function(e){e.languages.flow=e.languages.extend("javascript",{}),e.languages.insertBefore("flow","keyword",{type:[{pattern:/\b(?:[Bb]oolean|Function|[Nn]umber|[Ss]tring|[Ss]ymbol|any|mixed|null|void)\b/,alias:"class-name"}]}),e.languages.flow["function-variable"].pattern=/(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=\s*(?:function\b|(?:\([^()]*\)(?:\s*:\s*\w+)?|(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/i,delete e.languages.flow.parameter,e.languages.insertBefore("flow","operator",{"flow-punctuation":{pattern:/\{\||\|\}/,alias:"punctuation"}}),Array.isArray(e.languages.flow.keyword)||(e.languages.flow.keyword=[e.languages.flow.keyword]),e.languages.flow.keyword.unshift({pattern:/(^|[^$]\b)(?:Class|declare|opaque|type)\b(?!\$)/,lookbehind:!0},{pattern:/(^|[^$]\B)\$(?:Diff|Enum|Exact|Keys|ObjMap|PropertyType|Record|Shape|Subtype|Supertype|await)\b(?!\$)/,lookbehind:!0})}(A),A.languages.n4js=A.languages.extend("javascript",{keyword:/\b(?:Array|any|boolean|break|case|catch|class|const|constructor|continue|debugger|declare|default|delete|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|module|new|null|number|package|private|protected|public|return|set|static|string|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/}),A.languages.insertBefore("n4js","constant",{annotation:{pattern:/@+\w+/,alias:"operator"}}),A.languages.n4jsd=A.languages.n4js,function(e){function t(e,t){return RegExp(e.replace(/<ID>/g,(function(){return/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/.source})),t)}e.languages.insertBefore("javascript","function-variable",{"method-variable":{pattern:RegExp("(\\.\\s*)"+e.languages.javascript["function-variable"].pattern.source),lookbehind:!0,alias:["function-variable","method","function","property-access"]}}),e.languages.insertBefore("javascript","function",{method:{pattern:RegExp("(\\.\\s*)"+e.languages.javascript.function.source),lookbehind:!0,alias:["function","property-access"]}}),e.languages.insertBefore("javascript","constant",{"known-class-name":[{pattern:/\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,alias:"class-name"},{pattern:/\b(?:[A-Z]\w*)Error\b/,alias:"class-name"}]}),e.languages.insertBefore("javascript","keyword",{imports:{pattern:t(/(\bimport\b\s*)(?:<ID>(?:\s*,\s*(?:\*\s*as\s+<ID>|\{[^{}]*\}))?|\*\s*as\s+<ID>|\{[^{}]*\})(?=\s*\bfrom\b)/.source),lookbehind:!0,inside:e.languages.javascript},exports:{pattern:t(/(\bexport\b\s*)(?:\*(?:\s*as\s+<ID>)?(?=\s*\bfrom\b)|\{[^{}]*\})/.source),lookbehind:!0,inside:e.languages.javascript}}),e.languages.javascript.keyword.unshift({pattern:/\b(?:as|default|export|from|import)\b/,alias:"module"},{pattern:/\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,alias:"control-flow"},{pattern:/\bnull\b/,alias:["null","nil"]},{pattern:/\bundefined\b/,alias:"nil"}),e.languages.insertBefore("javascript","operator",{spread:{pattern:/\.{3}/,alias:"operator"},arrow:{pattern:/=>/,alias:"operator"}}),e.languages.insertBefore("javascript","punctuation",{"property-access":{pattern:t(/(\.\s*)#?<ID>/.source),lookbehind:!0},"maybe-class-name":{pattern:/(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/,lookbehind:!0},dom:{pattern:/\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,alias:"variable"},console:{pattern:/\bconsole(?=\s*\.)/,alias:"class-name"}});for(var n=["function","function-variable","method","method-variable","property-access"],r=0;r<n.length;r++){var o=n[r],a=e.languages.javascript[o];o=(a="RegExp"===e.util.type(a)?e.languages.javascript[o]={pattern:a}:a).inside||{};(a.inside=o)["maybe-class-name"]=/^[A-Z][\s\S]*/}}(A),function(e){var t=e.util.clone(e.languages.javascript),n=/(?:\s|\/\/.*(?!.)|\/\*(?:[^*]|\*(?!\/))\*\/)/.source,r=/(?:\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])*\})/.source,o=/(?:\{<S>*\.{3}(?:[^{}]|<BRACES>)*\})/.source;function a(e,t){return e=e.replace(/<S>/g,(function(){return n})).replace(/<BRACES>/g,(function(){return r})).replace(/<SPREAD>/g,(function(){return o})),RegExp(e,t)}function i(t){for(var n=[],r=0;r<t.length;r++){var o=t[r],a=!1;"string"!=typeof o&&("tag"===o.type&&o.content[0]&&"tag"===o.content[0].type?"</"===o.content[0].content[0].content?0<n.length&&n[n.length-1].tagName===s(o.content[0].content[1])&&n.pop():"/>"!==o.content[o.content.length-1].content&&n.push({tagName:s(o.content[0].content[1]),openedBraces:0}):0<n.length&&"punctuation"===o.type&&"{"===o.content?n[n.length-1].openedBraces++:0<n.length&&0<n[n.length-1].openedBraces&&"punctuation"===o.type&&"}"===o.content?n[n.length-1].openedBraces--:a=!0),(a||"string"==typeof o)&&0<n.length&&0===n[n.length-1].openedBraces&&(a=s(o),r<t.length-1&&("string"==typeof t[r+1]||"plain-text"===t[r+1].type)&&(a+=s(t[r+1]),t.splice(r+1,1)),0<r&&("string"==typeof t[r-1]||"plain-text"===t[r-1].type)&&(a=s(t[r-1])+a,t.splice(r-1,1),r--),t[r]=new e.Token("plain-text",a,null,a)),o.content&&"string"!=typeof o.content&&i(o.content)}}o=a(o).source,e.languages.jsx=e.languages.extend("markup",t),e.languages.jsx.tag.pattern=a(/<\/?(?:[\w.:-]+(?:<S>+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|<BRACES>))?|<SPREAD>))*<S>*\/?)?>/.source),e.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,e.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,e.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,e.languages.jsx.tag.inside.comment=t.comment,e.languages.insertBefore("inside","attr-name",{spread:{pattern:a(/<SPREAD>/.source),inside:e.languages.jsx}},e.languages.jsx.tag),e.languages.insertBefore("inside","special-attr",{script:{pattern:a(/=<BRACES>/.source),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:e.languages.jsx}}},e.languages.jsx.tag);var s=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(s).join(""):""};e.hooks.add("after-tokenize",(function(e){"jsx"!==e.language&&"tsx"!==e.language||i(e.tokens)}))}(A),function(e){var t=e.util.clone(e.languages.typescript);(t=(e.languages.tsx=e.languages.extend("jsx",t),delete e.languages.tsx.parameter,delete e.languages.tsx["literal-property"],e.languages.tsx.tag)).pattern=RegExp(/(^|[^\w$]|(?=<\/))/.source+"(?:"+t.pattern.source+")",t.pattern.flags),t.lookbehind=!0}(A),A.languages.swift={comment:{pattern:/(^|[^\\:])(?:\/\/.*|\/\*(?:[^/*]|\/(?!\*)|\*(?!\/)|\/\*(?:[^*]|\*(?!\/))*\*\/)*\*\/)/,lookbehind:!0,greedy:!0},"string-literal":[{pattern:RegExp(/(^|[^"#])/.source+"(?:"+/"(?:\\(?:\((?:[^()]|\([^()]*\))*\)|\r\n|[^(])|[^\\\r\n"])*"/.source+"|"+/"""(?:\\(?:\((?:[^()]|\([^()]*\))*\)|[^(])|[^\\"]|"(?!""))*"""/.source+")"+/(?!["#])/.source),lookbehind:!0,greedy:!0,inside:{interpolation:{pattern:/(\\\()(?:[^()]|\([^()]*\))*(?=\))/,lookbehind:!0,inside:null},"interpolation-punctuation":{pattern:/^\)|\\\($/,alias:"punctuation"},punctuation:/\\(?=[\r\n])/,string:/[\s\S]+/}},{pattern:RegExp(/(^|[^"#])(#+)/.source+"(?:"+/"(?:\\(?:#+\((?:[^()]|\([^()]*\))*\)|\r\n|[^#])|[^\\\r\n])*?"/.source+"|"+/"""(?:\\(?:#+\((?:[^()]|\([^()]*\))*\)|[^#])|[^\\])*?"""/.source+")\\2"),lookbehind:!0,greedy:!0,inside:{interpolation:{pattern:/(\\#+\()(?:[^()]|\([^()]*\))*(?=\))/,lookbehind:!0,inside:null},"interpolation-punctuation":{pattern:/^\)|\\#+\($/,alias:"punctuation"},string:/[\s\S]+/}}],directive:{pattern:RegExp(/#/.source+"(?:"+/(?:elseif|if)\b/.source+"(?:[ \t]*"+/(?:![ \t]*)?(?:\b\w+\b(?:[ \t]*\((?:[^()]|\([^()]*\))*\))?|\((?:[^()]|\([^()]*\))*\))(?:[ \t]*(?:&&|\|\|))?/.source+")+|"+/(?:else|endif)\b/.source+")"),alias:"property",inside:{"directive-name":/^#\w+/,boolean:/\b(?:false|true)\b/,number:/\b\d+(?:\.\d+)*\b/,operator:/!|&&|\|\||[<>]=?/,punctuation:/[(),]/}},literal:{pattern:/#(?:colorLiteral|column|dsohandle|file(?:ID|Literal|Path)?|function|imageLiteral|line)\b/,alias:"constant"},"other-directive":{pattern:/#\w+\b/,alias:"property"},attribute:{pattern:/@\w+/,alias:"atrule"},"function-definition":{pattern:/(\bfunc\s+)\w+/,lookbehind:!0,alias:"function"},label:{pattern:/\b(break|continue)\s+\w+|\b[a-zA-Z_]\w*(?=\s*:\s*(?:for|repeat|while)\b)/,lookbehind:!0,alias:"important"},keyword:/\b(?:Any|Protocol|Self|Type|actor|as|assignment|associatedtype|associativity|async|await|break|case|catch|class|continue|convenience|default|defer|deinit|didSet|do|dynamic|else|enum|extension|fallthrough|fileprivate|final|for|func|get|guard|higherThan|if|import|in|indirect|infix|init|inout|internal|is|isolated|lazy|left|let|lowerThan|mutating|none|nonisolated|nonmutating|open|operator|optional|override|postfix|precedencegroup|prefix|private|protocol|public|repeat|required|rethrows|return|right|safe|self|set|some|static|struct|subscript|super|switch|throw|throws|try|typealias|unowned|unsafe|var|weak|where|while|willSet)\b/,boolean:/\b(?:false|true)\b/,nil:{pattern:/\bnil\b/,alias:"constant"},"short-argument":/\$\d+\b/,omit:{pattern:/\b_\b/,alias:"keyword"},number:/\b(?:[\d_]+(?:\.[\de_]+)?|0x[a-f0-9_]+(?:\.[a-f0-9p_]+)?|0b[01_]+|0o[0-7_]+)\b/i,"class-name":/\b[A-Z](?:[A-Z_\d]*[a-z]\w*)?\b/,function:/\b[a-z_]\w*(?=\s*\()/i,constant:/\b(?:[A-Z_]{2,}|k[A-Z][A-Za-z_]+)\b/,operator:/[-+*/%=!<>&|^~?]+|\.[.\-+*/%=!<>&|^~?]+/,punctuation:/[{}[\]();,.:\\]/},A.languages.swift["string-literal"].forEach((function(e){e.inside.interpolation.inside=A.languages.swift})),function(e){e.languages.kotlin=e.languages.extend("clike",{keyword:{pattern:/(^|[^.])\b(?:abstract|actual|annotation|as|break|by|catch|class|companion|const|constructor|continue|crossinline|data|do|dynamic|else|enum|expect|external|final|finally|for|fun|get|if|import|in|infix|init|inline|inner|interface|internal|is|lateinit|noinline|null|object|open|operator|out|override|package|private|protected|public|reified|return|sealed|set|super|suspend|tailrec|this|throw|to|try|typealias|val|var|vararg|when|where|while)\b/,lookbehind:!0},function:[{pattern:/(?:`[^\r\n`]+`|\b\w+)(?=\s*\()/,greedy:!0},{pattern:/(\.)(?:`[^\r\n`]+`|\w+)(?=\s*\{)/,lookbehind:!0,greedy:!0}],number:/\b(?:0[xX][\da-fA-F]+(?:_[\da-fA-F]+)*|0[bB][01]+(?:_[01]+)*|\d+(?:_\d+)*(?:\.\d+(?:_\d+)*)?(?:[eE][+-]?\d+(?:_\d+)*)?[fFL]?)\b/,operator:/\+[+=]?|-[-=>]?|==?=?|!(?:!|==?)?|[\/*%<>]=?|[?:]:?|\.\.|&&|\|\||\b(?:and|inv|or|shl|shr|ushr|xor)\b/}),delete e.languages.kotlin["class-name"];var t={"interpolation-punctuation":{pattern:/^\$\{?|\}$/,alias:"punctuation"},expression:{pattern:/[\s\S]+/,inside:e.languages.kotlin}};e.languages.insertBefore("kotlin","string",{"string-literal":[{pattern:/"""(?:[^$]|\$(?:(?!\{)|\{[^{}]*\}))*?"""/,alias:"multiline",inside:{interpolation:{pattern:/\$(?:[a-z_]\w*|\{[^{}]*\})/i,inside:t},string:/[\s\S]+/}},{pattern:/"(?:[^"\\\r\n$]|\\.|\$(?:(?!\{)|\{[^{}]*\}))*"/,alias:"singleline",inside:{interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$(?:[a-z_]\w*|\{[^{}]*\})/i,lookbehind:!0,inside:t},string:/[\s\S]+/}}],char:{pattern:/'(?:[^'\\\r\n]|\\(?:.|u[a-fA-F0-9]{0,4}))'/,greedy:!0}}),delete e.languages.kotlin.string,e.languages.insertBefore("kotlin","keyword",{annotation:{pattern:/\B@(?:\w+:)?(?:[A-Z]\w*|\[[^\]]+\])/,alias:"builtin"}}),e.languages.insertBefore("kotlin","function",{label:{pattern:/\b\w+@|@\w+\b/,alias:"symbol"}}),e.languages.kt=e.languages.kotlin,e.languages.kts=e.languages.kotlin}(A),A.languages.c=A.languages.extend("clike",{comment:{pattern:/\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},"class-name":{pattern:/(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,lookbehind:!0},keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/,function:/\b[a-z_]\w*(?=\s*\()/i,number:/(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/}),A.languages.insertBefore("c","string",{char:{pattern:/'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,greedy:!0}}),A.languages.insertBefore("c","string",{macro:{pattern:/(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,greedy:!0,alias:"property",inside:{string:[{pattern:/^(#\s*include\s*)<[^>]+>/,lookbehind:!0},A.languages.c.string],char:A.languages.c.char,comment:A.languages.c.comment,"macro-name":[{pattern:/(^#\s*define\s+)\w+\b(?!\()/i,lookbehind:!0},{pattern:/(^#\s*define\s+)\w+\b(?=\()/i,lookbehind:!0,alias:"function"}],directive:{pattern:/^(#\s*)[a-z]+/,lookbehind:!0,alias:"keyword"},"directive-hash":/^#/,punctuation:/##|\\(?=[\r\n])/,expression:{pattern:/\S[\s\S]*/,inside:A.languages.c}}}}),A.languages.insertBefore("c","function",{constant:/\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/}),delete A.languages.c.boolean,A.languages.objectivec=A.languages.extend("c",{string:{pattern:/@?"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},keyword:/\b(?:asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|in|inline|int|long|register|return|self|short|signed|sizeof|static|struct|super|switch|typedef|typeof|union|unsigned|void|volatile|while)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,operator:/-[->]?|\+\+?|!=?|<<?=?|>>?=?|==?|&&?|\|\|?|[~^%?*\/@]/}),delete A.languages.objectivec["class-name"],A.languages.objc=A.languages.objectivec,A.languages.reason=A.languages.extend("clike",{string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/,greedy:!0},"class-name":/\b[A-Z]\w*/,keyword:/\b(?:and|as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|method|module|mutable|new|nonrec|object|of|open|or|private|rec|sig|struct|switch|then|to|try|type|val|virtual|when|while|with)\b/,operator:/\.{3}|:[:=]|\|>|->|=(?:==?|>)?|<=?|>=?|[|^?'#!~`]|[+\-*\/]\.?|\b(?:asr|land|lor|lsl|lsr|lxor|mod)\b/}),A.languages.insertBefore("reason","class-name",{char:{pattern:/'(?:\\x[\da-f]{2}|\\o[0-3][0-7][0-7]|\\\d{3}|\\.|[^'\\\r\n])'/,greedy:!0},constructor:/\b[A-Z]\w*\b(?!\s*\.)/,label:{pattern:/\b[a-z]\w*(?=::)/,alias:"symbol"}}),delete A.languages.reason.function,function(e){for(var t=/\/\*(?:[^*/]|\*(?!\/)|\/(?!\*)|<self>)*\*\//.source,n=0;n<2;n++)t=t.replace(/<self>/g,(function(){return t}));t=t.replace(/<self>/g,(function(){return/[^\s\S]/.source})),e.languages.rust={comment:[{pattern:RegExp(/(^|[^\\])/.source+t),lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/b?"(?:\\[\s\S]|[^\\"])*"|b?r(#*)"(?:[^"]|"(?!\1))*"\1/,greedy:!0},char:{pattern:/b?'(?:\\(?:x[0-7][\da-fA-F]|u\{(?:[\da-fA-F]_*){1,6}\}|.)|[^\\\r\n\t'])'/,greedy:!0},attribute:{pattern:/#!?\[(?:[^\[\]"]|"(?:\\[\s\S]|[^\\"])*")*\]/,greedy:!0,alias:"attr-name",inside:{string:null}},"closure-params":{pattern:/([=(,:]\s*|\bmove\s*)\|[^|]*\||\|[^|]*\|(?=\s*(?:\{|->))/,lookbehind:!0,greedy:!0,inside:{"closure-punctuation":{pattern:/^\||\|$/,alias:"punctuation"},rest:null}},"lifetime-annotation":{pattern:/'\w+/,alias:"symbol"},"fragment-specifier":{pattern:/(\$\w+:)[a-z]+/,lookbehind:!0,alias:"punctuation"},variable:/\$\w+/,"function-definition":{pattern:/(\bfn\s+)\w+/,lookbehind:!0,alias:"function"},"type-definition":{pattern:/(\b(?:enum|struct|trait|type|union)\s+)\w+/,lookbehind:!0,alias:"class-name"},"module-declaration":[{pattern:/(\b(?:crate|mod)\s+)[a-z][a-z_\d]*/,lookbehind:!0,alias:"namespace"},{pattern:/(\b(?:crate|self|super)\s*)::\s*[a-z][a-z_\d]*\b(?:\s*::(?:\s*[a-z][a-z_\d]*\s*::)*)?/,lookbehind:!0,alias:"namespace",inside:{punctuation:/::/}}],keyword:[/\b(?:Self|abstract|as|async|await|become|box|break|const|continue|crate|do|dyn|else|enum|extern|final|fn|for|if|impl|in|let|loop|macro|match|mod|move|mut|override|priv|pub|ref|return|self|static|struct|super|trait|try|type|typeof|union|unsafe|unsized|use|virtual|where|while|yield)\b/,/\b(?:bool|char|f(?:32|64)|[ui](?:8|16|32|64|128|size)|str)\b/],function:/\b[a-z_]\w*(?=\s*(?:::\s*<|\())/,macro:{pattern:/\b\w+!/,alias:"property"},constant:/\b[A-Z_][A-Z_\d]+\b/,"class-name":/\b[A-Z]\w*\b/,namespace:{pattern:/(?:\b[a-z][a-z_\d]*\s*::\s*)*\b[a-z][a-z_\d]*\s*::(?!\s*<)/,inside:{punctuation:/::/}},number:/\b(?:0x[\dA-Fa-f](?:_?[\dA-Fa-f])*|0o[0-7](?:_?[0-7])*|0b[01](?:_?[01])*|(?:(?:\d(?:_?\d)*)?\.)?\d(?:_?\d)*(?:[Ee][+-]?\d+)?)(?:_?(?:f32|f64|[iu](?:8|16|32|64|size)?))?\b/,boolean:/\b(?:false|true)\b/,punctuation:/->|\.\.=|\.{1,3}|::|[{}[\];(),:]/,operator:/[-+*\/%!^]=?|=[=>]?|&[&=]?|\|[|=]?|<<?=?|>>?=?|[@?]/},e.languages.rust["closure-params"].inside.rest=e.languages.rust,e.languages.rust.attribute.inside.string=e.languages.rust.string}(A),A.languages.go=A.languages.extend("clike",{string:{pattern:/(^|[^\\])"(?:\\.|[^"\\\r\n])*"|`[^`]*`/,lookbehind:!0,greedy:!0},keyword:/\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,boolean:/\b(?:_|false|iota|nil|true)\b/,number:[/\b0(?:b[01_]+|o[0-7_]+)i?\b/i,/\b0x(?:[a-f\d_]+(?:\.[a-f\d_]*)?|\.[a-f\d_]+)(?:p[+-]?\d+(?:_\d+)*)?i?(?!\w)/i,/(?:\b\d[\d_]*(?:\.[\d_]*)?|\B\.\d[\d_]*)(?:e[+-]?[\d_]+)?i?(?!\w)/i],operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,builtin:/\b(?:append|bool|byte|cap|close|complex|complex(?:64|128)|copy|delete|error|float(?:32|64)|u?int(?:8|16|32|64)?|imag|len|make|new|panic|print(?:ln)?|real|recover|rune|string|uintptr)\b/}),A.languages.insertBefore("go","string",{char:{pattern:/'(?:\\.|[^'\\\r\n]){0,10}'/,greedy:!0}}),delete A.languages.go["class-name"],function(e){var t=/\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char16_t|char32_t|char8_t|class|co_await|co_return|co_yield|compl|concept|const|const_cast|consteval|constexpr|constinit|continue|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|final|float|for|friend|goto|if|import|inline|int|int16_t|int32_t|int64_t|int8_t|long|module|mutable|namespace|new|noexcept|nullptr|operator|override|private|protected|public|register|reinterpret_cast|requires|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|uint16_t|uint32_t|uint64_t|uint8_t|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,n=/\b(?!<keyword>)\w+(?:\s*\.\s*\w+)*\b/.source.replace(/<keyword>/g,(function(){return t.source}));e.languages.cpp=e.languages.extend("c",{"class-name":[{pattern:RegExp(/(\b(?:class|concept|enum|struct|typename)\s+)(?!<keyword>)\w+/.source.replace(/<keyword>/g,(function(){return t.source}))),lookbehind:!0},/\b[A-Z]\w*(?=\s*::\s*\w+\s*\()/,/\b[A-Z_]\w*(?=\s*::\s*~\w+\s*\()/i,/\b\w+(?=\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>\s*::\s*\w+\s*\()/],keyword:t,number:{pattern:/(?:\b0b[01']+|\b0x(?:[\da-f']+(?:\.[\da-f']*)?|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+(?:\.[\d']*)?|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]{0,4}/i,greedy:!0},operator:/>>=?|<<=?|->|--|\+\+|&&|\|\||[?:~]|<=>|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,boolean:/\b(?:false|true)\b/}),e.languages.insertBefore("cpp","string",{module:{pattern:RegExp(/(\b(?:import|module)\s+)/.source+"(?:"+/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|<[^<>\r\n]*>/.source+"|"+/<mod-name>(?:\s*:\s*<mod-name>)?|:\s*<mod-name>/.source.replace(/<mod-name>/g,(function(){return n}))+")"),lookbehind:!0,greedy:!0,inside:{string:/^[<"][\s\S]+/,operator:/:/,punctuation:/\./}},"raw-string":{pattern:/R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/,alias:"string",greedy:!0}}),e.languages.insertBefore("cpp","keyword",{"generic-function":{pattern:/\b(?!operator\b)[a-z_]\w*\s*<(?:[^<>]|<[^<>]*>)*>(?=\s*\()/i,inside:{function:/^\w+/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:e.languages.cpp}}}}),e.languages.insertBefore("cpp","operator",{"double-colon":{pattern:/::/,alias:"punctuation"}}),e.languages.insertBefore("cpp","class-name",{"base-clause":{pattern:/(\b(?:class|struct)\s+\w+\s*:\s*)[^;{}"'\s]+(?:\s+[^;{}"'\s]+)*(?=\s*[;{])/,lookbehind:!0,greedy:!0,inside:e.languages.extend("cpp",{})}}),e.languages.insertBefore("inside","double-colon",{"class-name":/\b[a-z_]\w*\b(?!\s*::)/i},e.languages.cpp["base-clause"])}(A),A.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0,greedy:!0},"string-interpolation":{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:!0},"conversion-option":{pattern:/![sra](?=[:}]$)/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:False|None|True)\b/,number:/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,operator:/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},A.languages.python["string-interpolation"].inside.interpolation.inside.rest=A.languages.python,A.languages.py=A.languages.python,A.languages.json={property:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,lookbehind:!0,greedy:!0},string:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,lookbehind:!0,greedy:!0},comment:{pattern:/\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},number:/-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,punctuation:/[{}[\],]/,operator:/:/,boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"}},A.languages.webmanifest=A.languages.json;((e,t)=>{for(var n in t)f(e,n,{get:t[n],enumerable:!0})})({},{dracula:()=>T,duotoneDark:()=>j,duotoneLight:()=>R,github:()=>P,gruvboxMaterialDark:()=>K,gruvboxMaterialLight:()=>Q,jettwaveDark:()=>G,jettwaveLight:()=>H,nightOwl:()=>L,nightOwlLight:()=>N,oceanicNext:()=>I,okaidia:()=>M,oneDark:()=>V,oneLight:()=>W,palenight:()=>F,shadesOfPurple:()=>z,synthwave84:()=>B,ultramin:()=>$,vsDark:()=>U,vsLight:()=>q});var T={plain:{color:"#F8F8F2",backgroundColor:"#282A36"},styles:[{types:["prolog","constant","builtin"],style:{color:"rgb(189, 147, 249)"}},{types:["inserted","function"],style:{color:"rgb(80, 250, 123)"}},{types:["deleted"],style:{color:"rgb(255, 85, 85)"}},{types:["changed"],style:{color:"rgb(255, 184, 108)"}},{types:["punctuation","symbol"],style:{color:"rgb(248, 248, 242)"}},{types:["string","char","tag","selector"],style:{color:"rgb(255, 121, 198)"}},{types:["keyword","variable"],style:{color:"rgb(189, 147, 249)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(98, 114, 164)"}},{types:["attr-name"],style:{color:"rgb(241, 250, 140)"}}]},j={plain:{backgroundColor:"#2a2734",color:"#9a86fd"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#6c6783"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#e09142"}},{types:["property","function"],style:{color:"#9a86fd"}},{types:["tag-id","selector","atrule-id"],style:{color:"#eeebff"}},{types:["attr-name"],style:{color:"#c4b9fe"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","atrule","placeholder","variable"],style:{color:"#ffcc99"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#c4b9fe"}}]},R={plain:{backgroundColor:"#faf8f5",color:"#728fcb"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#b6ad9a"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#063289"}},{types:["property","function"],style:{color:"#b29762"}},{types:["tag-id","selector","atrule-id"],style:{color:"#2d2006"}},{types:["attr-name"],style:{color:"#896724"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","atrule"],style:{color:"#728fcb"}},{types:["placeholder","variable"],style:{color:"#93abdc"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#896724"}}]},P={plain:{color:"#393A34",backgroundColor:"#f6f8fa"},styles:[{types:["comment","prolog","doctype","cdata"],style:{color:"#999988",fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}},{types:["string","attr-value"],style:{color:"#e3116c"}},{types:["punctuation","operator"],style:{color:"#393A34"}},{types:["entity","url","symbol","number","boolean","variable","constant","property","regex","inserted"],style:{color:"#36acaa"}},{types:["atrule","keyword","attr-name","selector"],style:{color:"#00a4db"}},{types:["function","deleted","tag"],style:{color:"#d73a49"}},{types:["function-variable"],style:{color:"#6f42c1"}},{types:["tag","selector","keyword"],style:{color:"#00009f"}}]},L={plain:{color:"#d6deeb",backgroundColor:"#011627"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)",fontStyle:"italic"}},{types:["inserted","attr-name"],style:{color:"rgb(173, 219, 103)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(99, 119, 119)",fontStyle:"italic"}},{types:["string","url"],style:{color:"rgb(173, 219, 103)"}},{types:["variable"],style:{color:"rgb(214, 222, 235)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation"],style:{color:"rgb(199, 146, 234)"}},{types:["selector","doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["class-name"],style:{color:"rgb(255, 203, 139)"}},{types:["tag","operator","keyword"],style:{color:"rgb(127, 219, 202)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["property"],style:{color:"rgb(128, 203, 196)"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}}]},N={plain:{color:"#403f53",backgroundColor:"#FBFBFB"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)",fontStyle:"italic"}},{types:["inserted","attr-name"],style:{color:"rgb(72, 118, 214)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(152, 159, 177)",fontStyle:"italic"}},{types:["string","builtin","char","constant","url"],style:{color:"rgb(72, 118, 214)"}},{types:["variable"],style:{color:"rgb(201, 103, 101)"}},{types:["number"],style:{color:"rgb(170, 9, 130)"}},{types:["punctuation"],style:{color:"rgb(153, 76, 195)"}},{types:["function","selector","doctype"],style:{color:"rgb(153, 76, 195)",fontStyle:"italic"}},{types:["class-name"],style:{color:"rgb(17, 17, 17)"}},{types:["tag"],style:{color:"rgb(153, 76, 195)"}},{types:["operator","property","keyword","namespace"],style:{color:"rgb(12, 150, 155)"}},{types:["boolean"],style:{color:"rgb(188, 84, 84)"}}]},O="#c5a5c5",D="#8dc891",I={plain:{backgroundColor:"#282c34",color:"#ffffff"},styles:[{types:["attr-name"],style:{color:O}},{types:["attr-value"],style:{color:D}},{types:["comment","block-comment","prolog","doctype","cdata","shebang"],style:{color:"#999999"}},{types:["property","number","function-name","constant","symbol","deleted"],style:{color:"#5a9bcf"}},{types:["boolean"],style:{color:"#ff8b50"}},{types:["tag"],style:{color:"#fc929e"}},{types:["string"],style:{color:D}},{types:["punctuation"],style:{color:D}},{types:["selector","char","builtin","inserted"],style:{color:"#D8DEE9"}},{types:["function"],style:{color:"#79b6f2"}},{types:["operator","entity","url","variable"],style:{color:"#d7deea"}},{types:["keyword"],style:{color:O}},{types:["atrule","class-name"],style:{color:"#FAC863"}},{types:["important"],style:{fontWeight:"400"}},{types:["bold"],style:{fontWeight:"bold"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}}]},M={plain:{color:"#f8f8f2",backgroundColor:"#272822"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"#f92672",fontStyle:"italic"}},{types:["inserted"],style:{color:"rgb(173, 219, 103)",fontStyle:"italic"}},{types:["comment"],style:{color:"#8292a2",fontStyle:"italic"}},{types:["string","url"],style:{color:"#a6e22e"}},{types:["variable"],style:{color:"#f8f8f2"}},{types:["number"],style:{color:"#ae81ff"}},{types:["builtin","char","constant","function","class-name"],style:{color:"#e6db74"}},{types:["punctuation"],style:{color:"#f8f8f2"}},{types:["selector","doctype"],style:{color:"#a6e22e",fontStyle:"italic"}},{types:["tag","operator","keyword"],style:{color:"#66d9ef"}},{types:["boolean"],style:{color:"#ae81ff"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)",opacity:.7}},{types:["tag","property"],style:{color:"#f92672"}},{types:["attr-name"],style:{color:"#a6e22e !important"}},{types:["doctype"],style:{color:"#8292a2"}},{types:["rule"],style:{color:"#e6db74"}}]},F={plain:{color:"#bfc7d5",backgroundColor:"#292d3e"},styles:[{types:["comment"],style:{color:"rgb(105, 112, 152)",fontStyle:"italic"}},{types:["string","inserted"],style:{color:"rgb(195, 232, 141)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation","selector"],style:{color:"rgb(199, 146, 234)"}},{types:["variable"],style:{color:"rgb(191, 199, 213)"}},{types:["class-name","attr-name"],style:{color:"rgb(255, 203, 107)"}},{types:["tag","deleted"],style:{color:"rgb(255, 85, 114)"}},{types:["operator"],style:{color:"rgb(137, 221, 255)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["keyword"],style:{fontStyle:"italic"}},{types:["doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}},{types:["url"],style:{color:"rgb(221, 221, 221)"}}]},z={plain:{color:"#9EFEFF",backgroundColor:"#2D2A55"},styles:[{types:["changed"],style:{color:"rgb(255, 238, 128)"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)"}},{types:["inserted"],style:{color:"rgb(173, 219, 103)"}},{types:["comment"],style:{color:"rgb(179, 98, 255)",fontStyle:"italic"}},{types:["punctuation"],style:{color:"rgb(255, 255, 255)"}},{types:["constant"],style:{color:"rgb(255, 98, 140)"}},{types:["string","url"],style:{color:"rgb(165, 255, 144)"}},{types:["variable"],style:{color:"rgb(255, 238, 128)"}},{types:["number","boolean"],style:{color:"rgb(255, 98, 140)"}},{types:["attr-name"],style:{color:"rgb(255, 180, 84)"}},{types:["keyword","operator","property","namespace","tag","selector","doctype"],style:{color:"rgb(255, 157, 0)"}},{types:["builtin","char","constant","function","class-name"],style:{color:"rgb(250, 208, 0)"}}]},B={plain:{backgroundColor:"linear-gradient(to bottom, #2a2139 75%, #34294f)",backgroundImage:"#34294f",color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3"},styles:[{types:["comment","block-comment","prolog","doctype","cdata"],style:{color:"#495495",fontStyle:"italic"}},{types:["punctuation"],style:{color:"#ccc"}},{types:["tag","attr-name","namespace","number","unit","hexcode","deleted"],style:{color:"#e2777a"}},{types:["property","selector"],style:{color:"#72f1b8",textShadow:"0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475"}},{types:["function-name"],style:{color:"#6196cc"}},{types:["boolean","selector-id","function"],style:{color:"#fdfdfd",textShadow:"0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975"}},{types:["class-name","maybe-class-name","builtin"],style:{color:"#fff5f6",textShadow:"0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75"}},{types:["constant","symbol"],style:{color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3"}},{types:["important","atrule","keyword","selector-class"],style:{color:"#f4eee4",textShadow:"0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575"}},{types:["string","char","attr-value","regex","variable"],style:{color:"#f87c32"}},{types:["parameter"],style:{fontStyle:"italic"}},{types:["entity","url"],style:{color:"#67cdcc"}},{types:["operator"],style:{color:"ffffffee"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["entity"],style:{cursor:"help"}},{types:["inserted"],style:{color:"green"}}]},$={plain:{color:"#282a2e",backgroundColor:"#ffffff"},styles:[{types:["comment"],style:{color:"rgb(197, 200, 198)"}},{types:["string","number","builtin","variable"],style:{color:"rgb(150, 152, 150)"}},{types:["class-name","function","tag","attr-name"],style:{color:"rgb(40, 42, 46)"}}]},U={plain:{color:"#9CDCFE",backgroundColor:"#1E1E1E"},styles:[{types:["prolog"],style:{color:"rgb(0, 0, 128)"}},{types:["comment"],style:{color:"rgb(106, 153, 85)"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"rgb(86, 156, 214)"}},{types:["number","inserted"],style:{color:"rgb(181, 206, 168)"}},{types:["constant"],style:{color:"rgb(100, 102, 149)"}},{types:["attr-name","variable"],style:{color:"rgb(156, 220, 254)"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"rgb(206, 145, 120)"}},{types:["selector"],style:{color:"rgb(215, 186, 125)"}},{types:["tag"],style:{color:"rgb(78, 201, 176)"}},{types:["tag"],languages:["markup"],style:{color:"rgb(86, 156, 214)"}},{types:["punctuation","operator"],style:{color:"rgb(212, 212, 212)"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"rgb(220, 220, 170)"}},{types:["class-name"],style:{color:"rgb(78, 201, 176)"}},{types:["char"],style:{color:"rgb(209, 105, 105)"}}]},q={plain:{color:"#000000",backgroundColor:"#ffffff"},styles:[{types:["comment"],style:{color:"rgb(0, 128, 0)"}},{types:["builtin"],style:{color:"rgb(0, 112, 193)"}},{types:["number","variable","inserted"],style:{color:"rgb(9, 134, 88)"}},{types:["operator"],style:{color:"rgb(0, 0, 0)"}},{types:["constant","char"],style:{color:"rgb(129, 31, 63)"}},{types:["tag"],style:{color:"rgb(128, 0, 0)"}},{types:["attr-name"],style:{color:"rgb(255, 0, 0)"}},{types:["deleted","string"],style:{color:"rgb(163, 21, 21)"}},{types:["changed","punctuation"],style:{color:"rgb(4, 81, 165)"}},{types:["function","keyword"],style:{color:"rgb(0, 0, 255)"}},{types:["class-name"],style:{color:"rgb(38, 127, 153)"}}]},G={plain:{color:"#f8fafc",backgroundColor:"#011627"},styles:[{types:["prolog"],style:{color:"#000080"}},{types:["comment"],style:{color:"#6A9955"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"#569CD6"}},{types:["number","inserted"],style:{color:"#B5CEA8"}},{types:["constant"],style:{color:"#f8fafc"}},{types:["attr-name","variable"],style:{color:"#9CDCFE"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"#cbd5e1"}},{types:["selector"],style:{color:"#D7BA7D"}},{types:["tag"],style:{color:"#0ea5e9"}},{types:["tag"],languages:["markup"],style:{color:"#0ea5e9"}},{types:["punctuation","operator"],style:{color:"#D4D4D4"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"#7dd3fc"}},{types:["class-name"],style:{color:"#0ea5e9"}},{types:["char"],style:{color:"#D16969"}}]},H={plain:{color:"#0f172a",backgroundColor:"#f1f5f9"},styles:[{types:["prolog"],style:{color:"#000080"}},{types:["comment"],style:{color:"#6A9955"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"#0c4a6e"}},{types:["number","inserted"],style:{color:"#B5CEA8"}},{types:["constant"],style:{color:"#0f172a"}},{types:["attr-name","variable"],style:{color:"#0c4a6e"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"#64748b"}},{types:["selector"],style:{color:"#D7BA7D"}},{types:["tag"],style:{color:"#0ea5e9"}},{types:["tag"],languages:["markup"],style:{color:"#0ea5e9"}},{types:["punctuation","operator"],style:{color:"#475569"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"#0e7490"}},{types:["class-name"],style:{color:"#0ea5e9"}},{types:["char"],style:{color:"#D16969"}}]},V={plain:{backgroundColor:"hsl(220, 13%, 18%)",color:"hsl(220, 14%, 71%)",textShadow:"0 1px rgba(0, 0, 0, 0.3)"},styles:[{types:["comment","prolog","cdata"],style:{color:"hsl(220, 10%, 40%)"}},{types:["doctype","punctuation","entity"],style:{color:"hsl(220, 14%, 71%)"}},{types:["attr-name","class-name","maybe-class-name","boolean","constant","number","atrule"],style:{color:"hsl(29, 54%, 61%)"}},{types:["keyword"],style:{color:"hsl(286, 60%, 67%)"}},{types:["property","tag","symbol","deleted","important"],style:{color:"hsl(355, 65%, 65%)"}},{types:["selector","string","char","builtin","inserted","regex","attr-value"],style:{color:"hsl(95, 38%, 62%)"}},{types:["variable","operator","function"],style:{color:"hsl(207, 82%, 66%)"}},{types:["url"],style:{color:"hsl(187, 47%, 55%)"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"hsl(220, 14%, 71%)"}}]},W={plain:{backgroundColor:"hsl(230, 1%, 98%)",color:"hsl(230, 8%, 24%)"},styles:[{types:["comment","prolog","cdata"],style:{color:"hsl(230, 4%, 64%)"}},{types:["doctype","punctuation","entity"],style:{color:"hsl(230, 8%, 24%)"}},{types:["attr-name","class-name","boolean","constant","number","atrule"],style:{color:"hsl(35, 99%, 36%)"}},{types:["keyword"],style:{color:"hsl(301, 63%, 40%)"}},{types:["property","tag","symbol","deleted","important"],style:{color:"hsl(5, 74%, 59%)"}},{types:["selector","string","char","builtin","inserted","regex","attr-value","punctuation"],style:{color:"hsl(119, 34%, 47%)"}},{types:["variable","operator","function"],style:{color:"hsl(221, 87%, 60%)"}},{types:["url"],style:{color:"hsl(198, 99%, 37%)"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"hsl(230, 8%, 24%)"}}]},K={plain:{color:"#ebdbb2",backgroundColor:"#292828"},styles:[{types:["imports","class-name","maybe-class-name","constant","doctype","builtin","function"],style:{color:"#d8a657"}},{types:["property-access"],style:{color:"#7daea3"}},{types:["tag"],style:{color:"#e78a4e"}},{types:["attr-name","char","url","regex"],style:{color:"#a9b665"}},{types:["attr-value","string"],style:{color:"#89b482"}},{types:["comment","prolog","cdata","operator","inserted"],style:{color:"#a89984"}},{types:["delimiter","boolean","keyword","selector","important","atrule","property","variable","deleted"],style:{color:"#ea6962"}},{types:["entity","number","symbol"],style:{color:"#d3869b"}}]},Q={plain:{color:"#654735",backgroundColor:"#f9f5d7"},styles:[{types:["delimiter","boolean","keyword","selector","important","atrule","property","variable","deleted"],style:{color:"#af2528"}},{types:["imports","class-name","maybe-class-name","constant","doctype","builtin"],style:{color:"#b4730e"}},{types:["string","attr-value"],style:{color:"#477a5b"}},{types:["property-access"],style:{color:"#266b79"}},{types:["function","attr-name","char","url"],style:{color:"#72761e"}},{types:["tag"],style:{color:"#b94c07"}},{types:["comment","prolog","cdata","operator","inserted"],style:{color:"#a89984"}},{types:["entity","number","symbol"],style:{color:"#924f79"}}]},Y=/\r\n|\r|\n/,Z=e=>{0===e.length?e.push({types:["plain"],content:"\n",empty:!0}):1===e.length&&""===e[0].content&&(e[0].content="\n",e[0].empty=!0)},X=(e,t)=>{const n=e.length;return n>0&&e[n-1]===t?e:e.concat(t)},J=e=>{const t=[[]],n=[e],r=[0],o=[e.length];let a=0,i=0,s=[];const l=[s];for(;i>-1;){for(;(a=r[i]++)<o[i];){let e,c=t[i];const u=n[i][a];if("string"==typeof u?(c=i>0?c:["plain"],e=u):(c=X(c,u.type),u.alias&&(c=X(c,u.alias)),e=u.content),"string"!=typeof e){i++,t.push(c),n.push(e),r.push(0),o.push(e.length);continue}const d=e.split(Y),p=d.length;s.push({types:c,content:d[0]});for(let t=1;t<p;t++)Z(s),l.push(s=[]),s.push({types:c,content:d[t]})}i--,t.pop(),n.pop(),r.pop(),o.pop()}return Z(s),l},ee=(e,t)=>{const{plain:n}=e,r=e.styles.reduce(((e,n)=>{const{languages:r,style:o}=n;return r&&!r.includes(t)||n.types.forEach((t=>{const n=S(S({},e[t]),o);e[t]=n})),e}),{});return r.root=n,r.plain=_(S({},n),{backgroundColor:void 0}),r},te=({children:e,language:t,code:n,theme:r,prism:o})=>{const a=t.toLowerCase(),i=ee(r,a),s=(e=>(0,u.useCallback)((t=>{var n=t,{className:r,style:o,line:a}=n,i=E(n,["className","style","line"]);const s=_(S({},i),{className:(0,d.A)("token-line",r)});return"object"==typeof e&&"plain"in e&&(s.style=e.plain),"object"==typeof o&&(s.style=S(S({},s.style||{}),o)),s}),[e]))(i),l=(e=>{const t=(0,u.useCallback)((({types:t,empty:n})=>{if(null!=e)return 1===t.length&&"plain"===t[0]?null!=n?{display:"inline-block"}:void 0:1===t.length&&null!=n?e[t[0]]:Object.assign(null!=n?{display:"inline-block"}:{},...t.map((t=>e[t])))}),[e]);return(0,u.useCallback)((e=>{var n=e,{token:r,className:o,style:a}=n,i=E(n,["token","className","style"]);const s=_(S({},i),{className:(0,d.A)("token",...r.types,o),children:r.content,style:t(r)});return null!=a&&(s.style=S(S({},s.style||{}),a)),s}),[t])})(i),c=(({prism:e,code:t,grammar:n,language:r})=>(0,u.useMemo)((()=>{if(null==n)return J([t]);const o={code:t,grammar:n,language:r,tokens:[]};return e.hooks.run("before-tokenize",o),o.tokens=e.tokenize(t,n),e.hooks.run("after-tokenize",o),J(o.tokens)}),[t,n,r,e]))({prism:o,language:a,code:n,grammar:o.languages[a]});return e({tokens:c,className:`prism-code language-${a}`,style:null!=i?i.root:{},getLineProps:s,getTokenProps:l})},ne=e=>(0,u.createElement)(te,_(S({},e),{prism:e.prism||A,theme:e.theme||U,code:e.code,language:e.language}))},1561:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});var r=!0,o="Invariant failed";function a(e,t){if(!e){if(r)throw new Error(o);var n="function"==typeof t?t():t,a=n?"".concat(o,": ").concat(n):o;throw new Error(a)}}},1635:(e,t,n)=>{"use strict";n.r(t),n.d(t,{__addDisposableResource:()=>D,__assign:()=>a,__asyncDelegator:()=>E,__asyncGenerator:()=>_,__asyncValues:()=>C,__await:()=>S,__awaiter:()=>g,__classPrivateFieldGet:()=>L,__classPrivateFieldIn:()=>O,__classPrivateFieldSet:()=>N,__createBinding:()=>h,__decorate:()=>s,__disposeResources:()=>M,__esDecorate:()=>c,__exportStar:()=>y,__extends:()=>o,__generator:()=>m,__importDefault:()=>P,__importStar:()=>R,__makeTemplateObject:()=>A,__metadata:()=>f,__param:()=>l,__propKey:()=>d,__read:()=>v,__rest:()=>i,__rewriteRelativeImportExtension:()=>F,__runInitializers:()=>u,__setFunctionName:()=>p,__spread:()=>w,__spreadArray:()=>x,__spreadArrays:()=>k,__values:()=>b,default:()=>z});var r=function(e,t){return r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},r(e,t)};function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var a=function(){return a=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},a.apply(this,arguments)};function i(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n}function s(e,t,n,r){var o,a=arguments.length,i=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(a<3?o(i):a>3?o(t,n,i):o(t,n))||i);return a>3&&i&&Object.defineProperty(t,n,i),i}function l(e,t){return function(n,r){t(n,r,e)}}function c(e,t,n,r,o,a){function i(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,l=r.kind,c="getter"===l?"get":"setter"===l?"set":"value",u=!t&&e?r.static?e:e.prototype:null,d=t||(u?Object.getOwnPropertyDescriptor(u,r.name):{}),p=!1,f=n.length-1;f>=0;f--){var g={};for(var m in r)g[m]="access"===m?{}:r[m];for(var m in r.access)g.access[m]=r.access[m];g.addInitializer=function(e){if(p)throw new TypeError("Cannot add initializers after decoration has completed");a.push(i(e||null))};var h=(0,n[f])("accessor"===l?{get:d.get,set:d.set}:d[c],g);if("accessor"===l){if(void 0===h)continue;if(null===h||"object"!=typeof h)throw new TypeError("Object expected");(s=i(h.get))&&(d.get=s),(s=i(h.set))&&(d.set=s),(s=i(h.init))&&o.unshift(s)}else(s=i(h))&&("field"===l?o.unshift(s):d[c]=s)}u&&Object.defineProperty(u,r.name,d),p=!0}function u(e,t,n){for(var r=arguments.length>2,o=0;o<t.length;o++)n=r?t[o].call(e,n):t[o].call(e);return r?n:void 0}function d(e){return"symbol"==typeof e?e:"".concat(e)}function p(e,t,n){return"symbol"==typeof t&&(t=t.description?"[".concat(t.description,"]"):""),Object.defineProperty(e,"name",{configurable:!0,value:n?"".concat(n," ",t):t})}function f(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function g(e,t,n,r){return new(n||(n=Promise))((function(o,a){function i(e){try{l(r.next(e))}catch(t){a(t)}}function s(e){try{l(r.throw(e))}catch(t){a(t)}}function l(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(i,s)}l((r=r.apply(e,t||[])).next())}))}function m(e,t){var n,r,o,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]},i=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return i.next=s(0),i.throw=s(1),i.return=s(2),"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function s(s){return function(l){return function(s){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,s[0]&&(a=0)),a;)try{if(n=1,r&&(o=2&s[0]?r.return:s[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,s[1])).done)return o;switch(r=0,o&&(s=[2&s[0],o.value]),s[0]){case 0:case 1:o=s;break;case 4:return a.label++,{value:s[1],done:!1};case 5:a.label++,r=s[1],s=[0];continue;case 7:s=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==s[0]&&2!==s[0])){a=0;continue}if(3===s[0]&&(!o||s[1]>o[0]&&s[1]<o[3])){a.label=s[1];break}if(6===s[0]&&a.label<o[1]){a.label=o[1],o=s;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(s);break}o[2]&&a.ops.pop(),a.trys.pop();continue}s=t.call(e,a)}catch(l){s=[6,l],r=0}finally{n=o=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,l])}}}var h=Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]};function y(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||h(t,e,n)}function b(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function v(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,o,a=n.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(r=a.next()).done;)i.push(r.value)}catch(s){o={error:s}}finally{try{r&&!r.done&&(n=a.return)&&n.call(a)}finally{if(o)throw o.error}}return i}function w(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(v(arguments[t]));return e}function k(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var r=Array(e),o=0;for(t=0;t<n;t++)for(var a=arguments[t],i=0,s=a.length;i<s;i++,o++)r[o]=a[i];return r}function x(e,t,n){if(n||2===arguments.length)for(var r,o=0,a=t.length;o<a;o++)!r&&o in t||(r||(r=Array.prototype.slice.call(t,0,o)),r[o]=t[o]);return e.concat(r||Array.prototype.slice.call(t))}function S(e){return this instanceof S?(this.v=e,this):new S(e)}function _(e,t,n){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var r,o=n.apply(e,t||[]),a=[];return r=Object.create(("function"==typeof AsyncIterator?AsyncIterator:Object).prototype),i("next"),i("throw"),i("return",(function(e){return function(t){return Promise.resolve(t).then(e,c)}})),r[Symbol.asyncIterator]=function(){return this},r;function i(e,t){o[e]&&(r[e]=function(t){return new Promise((function(n,r){a.push([e,t,n,r])>1||s(e,t)}))},t&&(r[e]=t(r[e])))}function s(e,t){try{(n=o[e](t)).value instanceof S?Promise.resolve(n.value.v).then(l,c):u(a[0][2],n)}catch(r){u(a[0][3],r)}var n}function l(e){s("next",e)}function c(e){s("throw",e)}function u(e,t){e(t),a.shift(),a.length&&s(a[0][0],a[0][1])}}function E(e){var t,n;return t={},r("next"),r("throw",(function(e){throw e})),r("return"),t[Symbol.iterator]=function(){return this},t;function r(r,o){t[r]=e[r]?function(t){return(n=!n)?{value:S(e[r](t)),done:!1}:o?o(t):t}:o}}function C(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,n=e[Symbol.asyncIterator];return n?n.call(e):(e=b(e),t={},r("next"),r("throw"),r("return"),t[Symbol.asyncIterator]=function(){return this},t);function r(n){t[n]=e[n]&&function(t){return new Promise((function(r,o){(function(e,t,n,r){Promise.resolve(r).then((function(t){e({value:t,done:n})}),t)})(r,o,(t=e[n](t)).done,t.value)}))}}}function A(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var T=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t},j=function(e){return j=Object.getOwnPropertyNames||function(e){var t=[];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[t.length]=n);return t},j(e)};function R(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n=j(e),r=0;r<n.length;r++)"default"!==n[r]&&h(t,e,n[r]);return T(t,e),t}function P(e){return e&&e.__esModule?e:{default:e}}function L(e,t,n,r){if("a"===n&&!r)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?r:"a"===n?r.call(e):r?r.value:t.get(e)}function N(e,t,n,r,o){if("m"===r)throw new TypeError("Private method is not writable");if("a"===r&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===r?o.call(e,n):o?o.value=n:t.set(e,n),n}function O(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}function D(e,t,n){if(null!=t){if("object"!=typeof t&&"function"!=typeof t)throw new TypeError("Object expected.");var r,o;if(n){if(!Symbol.asyncDispose)throw new TypeError("Symbol.asyncDispose is not defined.");r=t[Symbol.asyncDispose]}if(void 0===r){if(!Symbol.dispose)throw new TypeError("Symbol.dispose is not defined.");r=t[Symbol.dispose],n&&(o=r)}if("function"!=typeof r)throw new TypeError("Object not disposable.");o&&(r=function(){try{o.call(this)}catch(e){return Promise.reject(e)}}),e.stack.push({value:t,dispose:r,async:n})}else n&&e.stack.push({async:!0});return t}var I="function"==typeof SuppressedError?SuppressedError:function(e,t,n){var r=new Error(n);return r.name="SuppressedError",r.error=e,r.suppressed=t,r};function M(e){function t(t){e.error=e.hasError?new I(t,e.error,"An error was suppressed during disposal."):t,e.hasError=!0}var n,r=0;return function o(){for(;n=e.stack.pop();)try{if(!n.async&&1===r)return r=0,e.stack.push(n),Promise.resolve().then(o);if(n.dispose){var a=n.dispose.call(n.value);if(n.async)return r|=2,Promise.resolve(a).then(o,(function(e){return t(e),o()}))}else r|=1}catch(i){t(i)}if(1===r)return e.hasError?Promise.reject(e.error):Promise.resolve();if(e.hasError)throw e.error}()}function F(e,t){return"string"==typeof e&&/^\.\.?\//.test(e)?e.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i,(function(e,n,r,o,a){return n?t?".jsx":".js":!r||o&&a?r+o+"."+a.toLowerCase()+"js":e})):e}const z={__extends:o,__assign:a,__rest:i,__decorate:s,__param:l,__esDecorate:c,__runInitializers:u,__propKey:d,__setFunctionName:p,__metadata:f,__awaiter:g,__generator:m,__createBinding:h,__exportStar:y,__values:b,__read:v,__spread:w,__spreadArrays:k,__spreadArray:x,__await:S,__asyncGenerator:_,__asyncDelegator:E,__asyncValues:C,__makeTemplateObject:A,__importStar:R,__importDefault:P,__classPrivateFieldGet:L,__classPrivateFieldSet:N,__classPrivateFieldIn:O,__addDisposableResource:D,__disposeResources:M,__rewriteRelativeImportExtension:F}},2654:e=>{"use strict";e.exports={}},4054:e=>{"use strict";e.exports=JSON.parse('{"/blog-5c5":{"__comp":"a6aa9e1f","__context":{"plugin":"36994c47"},"sidebar":"814f3328","items":[{"content":"26a8bbe9"}],"__props":"c15d9823"},"/blog/archive-182":{"__comp":"9e4087bc","__context":{"plugin":"36994c47"},"__props":"f81c1134"},"/blog/tags-287":{"__comp":"01a85c17","__context":{"plugin":"36994c47"},"sidebar":"814f3328","__props":"3a2db09e"},"/blog/tags/intro-7de":{"__comp":"6875c492","__context":{"plugin":"36994c47"},"sidebar":"814f3328","items":[{"content":"26a8bbe9"}],"__props":"c8df2e0f"},"/blog/tags/release-74e":{"__comp":"6875c492","__context":{"plugin":"36994c47"},"sidebar":"814f3328","items":[{"content":"26a8bbe9"}],"__props":"c9cac9d9"},"/blog/welcome-to-stylable-v5-715":{"__comp":"ccc49370","__context":{"data":{"blogMetadata":"acecf23e"},"plugin":"36994c47"},"sidebar":"814f3328","content":"ab324915"},"/community-adf":{"__comp":"57b59cd4","__context":{"plugin":"a7456010"},"config":"5e9f5e1a"},"/playground-859":{"__comp":"0ce74438","__context":{"plugin":"a7456010"},"config":"5e9f5e1a"},"/search-822":{"__comp":"1a4e3797","__context":{"plugin":"138e0e15"}},"/docs-72c":{"__comp":"5e95c892","__context":{"plugin":"aba21aa0"}},"/docs-9e7":{"__comp":"a7bd4aaa","__props":"0058b4c6"},"/docs-b3f":{"__comp":"a94703ab"},"/docs/attributions-554":{"__comp":"17896441","content":"7df4dfbf"},"/docs/getting-started/boilerplate-1d3":{"__comp":"17896441","content":"371f5dc2"},"/docs/getting-started/integrations-0e5":{"__comp":"14eb3368","__props":"49b68603"},"/docs/getting-started/intro-b87":{"__comp":"17896441","content":"ebfcd236"},"/docs/getting-started/manual-integration-5ef":{"__comp":"17896441","content":"a2cbecc3"},"/docs/getting-started/nextjs-integration-8c2":{"__comp":"17896441","content":"17347b34"},"/docs/getting-started/rollup-integration-c52":{"__comp":"17896441","content":"e8f63a9c"},"/docs/getting-started/storybook-integration-002":{"__comp":"17896441","content":"24352365"},"/docs/getting-started/stylable-config-4d9":{"__comp":"17896441","content":"8abe6768"},"/docs/getting-started/tooling/cli-aa5":{"__comp":"17896441","content":"acfb8e34"},"/docs/getting-started/tooling/stylable-intelligence-bf3":{"__comp":"17896441","content":"fe460ebe"},"/docs/getting-started/typescript-integration-c5e":{"__comp":"17896441","content":"a399b375"},"/docs/getting-started/webpack-integration-f5d":{"__comp":"17896441","content":"922647ed"},"/docs/guides/component-best-practices-ea7":{"__comp":"17896441","content":"de714d10"},"/docs/guides/component-variants-90b":{"__comp":"17896441","content":"6e96288b"},"/docs/guides/handbook/class-35f":{"__comp":"17896441","content":"a2b316bf"},"/docs/guides/handbook/classes-a99":{"__comp":"17896441","content":"ef20d218"},"/docs/guides/handbook/custom-state-1fe":{"__comp":"17896441","content":"b10d9af9"},"/docs/guides/handbook/extend-510":{"__comp":"17896441","content":"b1a4f681"},"/docs/guides/handbook/import-class-e56":{"__comp":"17896441","content":"cb737cc7"},"/docs/guides/handbook/intro-3a8":{"__comp":"17896441","content":"35811679"},"/docs/guides/handbook/namespacing-93a":{"__comp":"17896441","content":"1a5eac39"},"/docs/guides/handbook/runtime-4db":{"__comp":"17896441","content":"587a03c1"},"/docs/guides/migration-v3-620":{"__comp":"17896441","content":"2de44985"},"/docs/guides/migration-v5-217":{"__comp":"17896441","content":"24ff752b"},"/docs/guides/project-commons-9bf":{"__comp":"17896441","content":"866f0f84"},"/docs/guides/shared-classes-5ec":{"__comp":"17896441","content":"1f7dc951"},"/docs/guides/ssr-728":{"__comp":"17896441","content":"46d93a8f"},"/docs/references/cheatsheet-3be":{"__comp":"17896441","content":"bc80c935"},"/docs/references/class-selectors-856":{"__comp":"17896441","content":"79455fbf"},"/docs/references/contains-39b":{"__comp":"17896441","content":"f0dcc6ac"},"/docs/references/css-vars-571":{"__comp":"17896441","content":"bfefe422"},"/docs/references/custom-selectors-4f8":{"__comp":"17896441","content":"fde4315e"},"/docs/references/extend-stylesheet-472":{"__comp":"17896441","content":"5e66eab8"},"/docs/references/formatters-c0d":{"__comp":"17896441","content":"2ce01146"},"/docs/references/global-selectors-04c":{"__comp":"17896441","content":"084229dc"},"/docs/references/imports-a46":{"__comp":"17896441","content":"5ec46957"},"/docs/references/keyframes-4d3":{"__comp":"17896441","content":"f5df1cd5"},"/docs/references/layer-5cb":{"__comp":"17896441","content":"d879f3fa"},"/docs/references/mixins-9cd":{"__comp":"17896441","content":"89bbbeae"},"/docs/references/namespace-686":{"__comp":"17896441","content":"32382f69"},"/docs/references/programmatic-api-143":{"__comp":"17896441","content":"e19b9990"},"/docs/references/pseudo-classes-380":{"__comp":"17896441","content":"e74825b7"},"/docs/references/pseudo-elements-cd5":{"__comp":"17896441","content":"f242c874"},"/docs/references/root-f2e":{"__comp":"17896441","content":"c0d90f50"},"/docs/references/runtime-a1c":{"__comp":"17896441","content":"825e4603"},"/docs/references/st-scope-b75":{"__comp":"17896441","content":"de106496"},"/docs/references/st-variables-7ce":{"__comp":"17896441","content":"945a8992"},"/docs/references/type-selectors-11d":{"__comp":"17896441","content":"0a256791"},"/docs/references/using-external-assets-78d":{"__comp":"17896441","content":"705f3d56"},"/docs/style-guide-51c":{"__comp":"17896441","content":"baf0d4a2"},"/-e5f":{"__comp":"1df93b7f","__context":{"plugin":"a7456010"},"config":"5e9f5e1a"}}')}},e=>{e.O(0,[1869],(()=>{return t=7815,e(e.s=t);var t}));e.O()}]); \ No newline at end of file diff --git a/assets/js/main.e6bfb96f.js.LICENSE.txt b/assets/js/main.43fac053.js.LICENSE.txt similarity index 100% rename from assets/js/main.e6bfb96f.js.LICENSE.txt rename to assets/js/main.43fac053.js.LICENSE.txt diff --git a/assets/js/main.e6bfb96f.js b/assets/js/main.e6bfb96f.js deleted file mode 100644 index b1c93d31..00000000 --- a/assets/js/main.e6bfb96f.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see main.e6bfb96f.js.LICENSE.txt */ -(self.webpackChunkstylable_io=self.webpackChunkstylable_io||[]).push([[8792],{5391:(e,t,n)=>{"use strict";function r(e){var t,n,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(n=r(e[t]))&&(o&&(o+=" "),o+=n);else for(t in e)e[t]&&(o&&(o+=" "),o+=t);return o}n.d(t,{A:()=>o});const o=function(){for(var e,t,n=0,o="";n<arguments.length;)(e=arguments[n++])&&(t=r(e))&&(o&&(o+=" "),o+=t);return o}},5196:(e,t,n)=>{"use strict";n.d(t,{CU:()=>r,Hg:()=>d,I$:()=>u,O6:()=>p,UB:()=>c,WW:()=>i,ZG:()=>l,dz:()=>f,pk:()=>s,rG:()=>o,tb:()=>a});const r=null,o=50,a=!1,i=!0,s=!0,l="right",c=void 0,u=!0,d=null,p=!1,f=!1},2413:(e,t,n)=>{"use strict";n.d(t,{A:()=>p});n(6540);var r=n(3259),o=n.n(r),a=n(4054);const i={"0058b4c6":[()=>n.e(849).then(n.t.bind(n,6164,19)),"@generated/docusaurus-plugin-content-docs/default/p/docs-175.json",6164],"01a85c17":[()=>Promise.all([n.e(1869),n.e(8209)]).then(n.bind(n,2482)),"@theme/BlogTagsListPage",2482],"084229dc":[()=>n.e(1701).then(n.bind(n,4426)),"@site/docs/references/global-selectors.md",4426],"0a256791":[()=>n.e(2110).then(n.bind(n,7870)),"@site/docs/references/tag-selectors.md",7870],"0ce74438":[()=>n.e(3365).then(n.bind(n,9228)),"@site/src/pages/playground.tsx",9228],"138e0e15":[()=>n.e(4921).then(n.t.bind(n,1597,19)),"@generated/@easyops-cn/docusaurus-search-local/default/__plugin.json",1597],"14eb3368":[()=>Promise.all([n.e(1869),n.e(6969)]).then(n.bind(n,3533)),"@theme/DocCategoryGeneratedIndexPage",3533],"17347b34":[()=>n.e(6468).then(n.bind(n,9097)),"@site/docs/getting-started/nextjs-integration.md",9097],17896441:[()=>Promise.all([n.e(1869),n.e(1660),n.e(4562),n.e(8401)]).then(n.bind(n,2239)),"@theme/DocItem",2239],"1a4e3797":[()=>Promise.all([n.e(1869),n.e(2138)]).then(n.bind(n,5849)),"@theme/SearchPage",5849],"1a5eac39":[()=>n.e(4215).then(n.bind(n,9807)),"@site/docs/guides/handbook/namespace.md",9807],"1df93b7f":[()=>n.e(4583).then(n.bind(n,3047)),"@site/src/pages/index.tsx",3047],"1f7dc951":[()=>n.e(9597).then(n.bind(n,6919)),"@site/docs/guides/shared-classes.md",6919],24352365:[()=>n.e(5395).then(n.bind(n,8365)),"@site/docs/getting-started/storybook-integration.md",8365],"24ff752b":[()=>n.e(825).then(n.bind(n,6520)),"@site/docs/guides/migration-v5.md",6520],"26a8bbe9":[()=>n.e(5666).then(n.bind(n,6042)),"@site/blog/2022-08-04-welcome-to-stylable-v5.md?truncated=true",6042],"2ce01146":[()=>n.e(9169).then(n.bind(n,3980)),"@site/docs/references/formatters.md",3980],"2de44985":[()=>n.e(7678).then(n.bind(n,8761)),"@site/docs/guides/migration-v3.md",8761],"32382f69":[()=>n.e(1858).then(n.bind(n,1874)),"@site/docs/references/namespace.md",1874],35811679:[()=>n.e(7135).then(n.bind(n,6119)),"@site/docs/guides/handbook/intro.md",6119],"36994c47":[()=>n.e(9858).then(n.t.bind(n,5516,19)),"@generated/docusaurus-plugin-content-blog/default/__plugin.json",5516],"371f5dc2":[()=>Promise.all([n.e(1869),n.e(1660),n.e(5184)]).then(n.bind(n,3940)),"@site/docs/getting-started/boilerplate.mdx",3940],"3a2db09e":[()=>n.e(8121).then(n.t.bind(n,8070,19)),"@generated/docusaurus-plugin-content-blog/default/p/blog-tags-df9.json",8070],"46d93a8f":[()=>n.e(734).then(n.bind(n,9445)),"@site/docs/guides/server-side-rendering.md",9445],"49b68603":[()=>n.e(2679).then(n.t.bind(n,6825,19)),"@generated/docusaurus-plugin-content-docs/default/p/docs-getting-started-integrations-379.json",6825],"57b59cd4":[()=>n.e(8880).then(n.bind(n,3134)),"@site/src/pages/community.tsx",3134],"587a03c1":[()=>n.e(7395).then(n.bind(n,2176)),"@site/docs/guides/handbook/runtime.md",2176],"5e66eab8":[()=>n.e(4293).then(n.bind(n,3587)),"@site/docs/references/extend-stylesheet.md",3587],"5e95c892":[()=>n.e(9647).then(n.bind(n,3124)),"@theme/DocsRoot",3124],"5e9f5e1a":[()=>Promise.resolve().then(n.bind(n,4784)),"@generated/docusaurus.config",4784],"5ec46957":[()=>n.e(4947).then(n.bind(n,7577)),"@site/docs/references/imports.md",7577],"6875c492":[()=>Promise.all([n.e(1869),n.e(1660),n.e(4562),n.e(5582),n.e(4813)]).then(n.bind(n,6942)),"@theme/BlogTagsPostsPage",6942],"6e96288b":[()=>n.e(5457).then(n.bind(n,2738)),"@site/docs/guides/component-variants.md",2738],"705f3d56":[()=>n.e(9183).then(n.bind(n,3953)),"@site/docs/references/using-external-assets.md",3953],"79455fbf":[()=>n.e(3879).then(n.bind(n,2349)),"@site/docs/references/class-selectors.md",2349],"7df4dfbf":[()=>n.e(2670).then(n.bind(n,9662)),"@site/docs/attributions.md",9662],"814f3328":[()=>n.e(7472).then(n.t.bind(n,5513,19)),"~blog/default/blog-post-list-prop-default.json",5513],"825e4603":[()=>n.e(1026).then(n.bind(n,5926)),"@site/docs/references/runtime.md",5926],"866f0f84":[()=>n.e(2619).then(n.bind(n,8403)),"@site/docs/guides/project-commons.md",8403],"89bbbeae":[()=>n.e(4715).then(n.bind(n,7190)),"@site/docs/references/mixins.md",7190],"8abe6768":[()=>Promise.all([n.e(1869),n.e(1660),n.e(7774)]).then(n.bind(n,8778)),"@site/docs/getting-started/stylable-config.mdx",8778],"922647ed":[()=>n.e(1274).then(n.bind(n,9109)),"@site/docs/getting-started/webpack-integration.md",9109],"945a8992":[()=>n.e(9729).then(n.bind(n,8080)),"@site/docs/references/variables.md",8080],"9e4087bc":[()=>n.e(2711).then(n.bind(n,5496)),"@theme/BlogArchivePage",5496],a2b316bf:[()=>n.e(150).then(n.bind(n,8218)),"@site/docs/guides/handbook/class.mdx",8218],a2cbecc3:[()=>n.e(5299).then(n.bind(n,6771)),"@site/docs/getting-started/manual-integration.mdx",6771],a399b375:[()=>n.e(5076).then(n.bind(n,7484)),"@site/docs/getting-started/typescript-integration.md",7484],a6aa9e1f:[()=>Promise.all([n.e(1869),n.e(1660),n.e(4562),n.e(5582),n.e(7643)]).then(n.bind(n,2783)),"@theme/BlogListPage",2783],a7456010:[()=>n.e(1235).then(n.t.bind(n,8552,19)),"@generated/docusaurus-plugin-content-pages/default/__plugin.json",8552],a7bd4aaa:[()=>n.e(7098).then(n.bind(n,2881)),"@theme/DocVersionRoot",2881],a94703ab:[()=>Promise.all([n.e(1869),n.e(9048)]).then(n.bind(n,8001)),"@theme/DocRoot",8001],ab324915:[()=>n.e(6722).then(n.bind(n,9158)),"@site/blog/2022-08-04-welcome-to-stylable-v5.md",9158],aba21aa0:[()=>n.e(5742).then(n.t.bind(n,7093,19)),"@generated/docusaurus-plugin-content-docs/default/__plugin.json",7093],acecf23e:[()=>n.e(1903).then(n.t.bind(n,1912,19)),"~blog/default/blogMetadata-default.json",1912],acfb8e34:[()=>Promise.all([n.e(1869),n.e(6223)]).then(n.bind(n,6543)),"@site/docs/getting-started/tooling/cli.mdx",6543],b10d9af9:[()=>n.e(9849).then(n.bind(n,9928)),"@site/docs/guides/handbook/state.md",9928],b1a4f681:[()=>Promise.all([n.e(1869),n.e(1660),n.e(7514)]).then(n.bind(n,2705)),"@site/docs/guides/handbook/extend.mdx",2705],baf0d4a2:[()=>n.e(6827).then(n.bind(n,8814)),"@site/docs/style-guide.md",8814],bc80c935:[()=>Promise.all([n.e(1869),n.e(1660),n.e(2346)]).then(n.bind(n,4055)),"@site/docs/references/cheatsheet.mdx",4055],bfefe422:[()=>n.e(693).then(n.bind(n,7724)),"@site/docs/references/css-vars.md",7724],c0d90f50:[()=>n.e(7394).then(n.bind(n,3978)),"@site/docs/references/root.md",3978],c15d9823:[()=>n.e(8146).then(n.t.bind(n,9328,19)),"@generated/docusaurus-plugin-content-blog/default/p/blog-bd9.json",9328],c8df2e0f:[()=>n.e(9101).then(n.t.bind(n,8896,19)),"@generated/docusaurus-plugin-content-blog/default/p/blog-tags-intro-d57.json",8896],c9cac9d9:[()=>n.e(4918).then(n.t.bind(n,371,19)),"@generated/docusaurus-plugin-content-blog/default/p/blog-tags-release-6bd.json",371],cb737cc7:[()=>Promise.all([n.e(1869),n.e(1660),n.e(242)]).then(n.bind(n,4734)),"@site/docs/guides/handbook/import.mdx",4734],ccc49370:[()=>Promise.all([n.e(1869),n.e(1660),n.e(4562),n.e(5582),n.e(3249)]).then(n.bind(n,1917)),"@theme/BlogPostPage",1917],d879f3fa:[()=>n.e(7381).then(n.bind(n,6054)),"@site/docs/references/layer.md",6054],de106496:[()=>n.e(614).then(n.bind(n,6756)),"@site/docs/references/st-scope.md",6756],de714d10:[()=>n.e(4729).then(n.bind(n,7895)),"@site/docs/guides/component-best-practices.md",7895],e19b9990:[()=>Promise.all([n.e(1869),n.e(1660),n.e(7377)]).then(n.bind(n,701)),"@site/docs/references/programmatic-api.mdx",701],e74825b7:[()=>n.e(2765).then(n.bind(n,3830)),"@site/docs/references/pseudo-classes.md",3830],e8f63a9c:[()=>n.e(4412).then(n.bind(n,5483)),"@site/docs/getting-started/rollup-integration.md",5483],ebfcd236:[()=>n.e(3746).then(n.bind(n,6994)),"@site/docs/getting-started/get-started.md",6994],ef20d218:[()=>n.e(8065).then(n.bind(n,1801)),"@site/docs/guides/handbook/structure.md",1801],f0dcc6ac:[()=>n.e(7001).then(n.bind(n,7004)),"@site/docs/references/contains.md",7004],f242c874:[()=>n.e(8829).then(n.bind(n,2135)),"@site/docs/references/pseudo-elements.md",2135],f5df1cd5:[()=>n.e(5619).then(n.bind(n,8760)),"@site/docs/references/keyframes.md",8760],f81c1134:[()=>n.e(8130).then(n.t.bind(n,7735,19)),"@generated/docusaurus-plugin-content-blog/default/p/blog-archive-f05.json",7735],fde4315e:[()=>n.e(1480).then(n.bind(n,2459)),"@site/docs/references/custom-selectors.md",2459],fe460ebe:[()=>n.e(420).then(n.bind(n,5836)),"@site/docs/getting-started/tooling/stylable-intelligence.md",5836]};var s=n(4848);function l(e){let{error:t,retry:n,pastDelay:r}=e;return t?(0,s.jsxs)("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"},children:[(0,s.jsx)("p",{children:String(t)}),(0,s.jsx)("div",{children:(0,s.jsx)("button",{type:"button",onClick:n,children:"Retry"})})]}):r?(0,s.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"},children:(0,s.jsx)("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb",children:(0,s.jsxs)("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[(0,s.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,s.jsx)("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,s.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,s.jsx)("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,s.jsx)("circle",{cx:"22",cy:"22",r:"8",children:(0,s.jsx)("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})}):null}var c=n(1604),u=n(3363);function d(e,t){if("*"===e)return o()({loading:l,loader:()=>n.e(2560).then(n.bind(n,2560)),modules:["@theme/NotFound"],webpack:()=>[2560],render(e,t){const n=e.default;return(0,s.jsx)(u.W,{value:{plugin:{name:"native",id:"default"}},children:(0,s.jsx)(n,{...t})})}});const r=a[`${e}-${t}`],d={},p=[],f=[],g=(0,c.A)(r);return Object.entries(g).forEach((e=>{let[t,n]=e;const r=i[n];r&&(d[t]=r[0],p.push(r[1]),f.push(r[2]))})),o().Map({loading:l,loader:d,modules:p,webpack:()=>f,render(t,n){const o=JSON.parse(JSON.stringify(r));Object.entries(t).forEach((t=>{let[n,r]=t;const a=r.default;if(!a)throw new Error(`The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);"object"!=typeof a&&"function"!=typeof a||Object.keys(r).filter((e=>"default"!==e)).forEach((e=>{a[e]=r[e]}));let i=o;const s=n.split(".");s.slice(0,-1).forEach((e=>{i=i[e]})),i[s[s.length-1]]=a}));const a=o.__comp;delete o.__comp;const i=o.__context;delete o.__context;const l=o.__props;return delete o.__props,(0,s.jsx)(u.W,{value:i,children:(0,s.jsx)(a,{...o,...l,...n})})}})}const p=[{path:"/blog",component:d("/blog","5c5"),exact:!0},{path:"/blog/archive",component:d("/blog/archive","182"),exact:!0},{path:"/blog/tags",component:d("/blog/tags","287"),exact:!0},{path:"/blog/tags/intro",component:d("/blog/tags/intro","7de"),exact:!0},{path:"/blog/tags/release",component:d("/blog/tags/release","74e"),exact:!0},{path:"/blog/welcome-to-stylable-v5",component:d("/blog/welcome-to-stylable-v5","715"),exact:!0},{path:"/community",component:d("/community","adf"),exact:!0},{path:"/playground",component:d("/playground","859"),exact:!0},{path:"/search",component:d("/search","822"),exact:!0},{path:"/docs",component:d("/docs","72c"),routes:[{path:"/docs",component:d("/docs","9e7"),routes:[{path:"/docs",component:d("/docs","b3f"),routes:[{path:"/docs/attributions",component:d("/docs/attributions","554"),exact:!0},{path:"/docs/getting-started/boilerplate",component:d("/docs/getting-started/boilerplate","1d3"),exact:!0,sidebar:"Discover"},{path:"/docs/getting-started/integrations",component:d("/docs/getting-started/integrations","0e5"),exact:!0,sidebar:"Discover"},{path:"/docs/getting-started/intro",component:d("/docs/getting-started/intro","b87"),exact:!0,sidebar:"Discover"},{path:"/docs/getting-started/manual-integration",component:d("/docs/getting-started/manual-integration","5ef"),exact:!0,sidebar:"Discover"},{path:"/docs/getting-started/nextjs-integration",component:d("/docs/getting-started/nextjs-integration","8c2"),exact:!0,sidebar:"Discover"},{path:"/docs/getting-started/rollup-integration",component:d("/docs/getting-started/rollup-integration","c52"),exact:!0,sidebar:"Discover"},{path:"/docs/getting-started/storybook-integration",component:d("/docs/getting-started/storybook-integration","002"),exact:!0,sidebar:"Discover"},{path:"/docs/getting-started/stylable-config",component:d("/docs/getting-started/stylable-config","4d9"),exact:!0,sidebar:"Discover"},{path:"/docs/getting-started/tooling/cli",component:d("/docs/getting-started/tooling/cli","aa5"),exact:!0,sidebar:"Discover"},{path:"/docs/getting-started/tooling/stylable-intelligence",component:d("/docs/getting-started/tooling/stylable-intelligence","bf3"),exact:!0,sidebar:"Discover"},{path:"/docs/getting-started/typescript-integration",component:d("/docs/getting-started/typescript-integration","c5e"),exact:!0,sidebar:"Discover"},{path:"/docs/getting-started/webpack-integration",component:d("/docs/getting-started/webpack-integration","f5d"),exact:!0,sidebar:"Discover"},{path:"/docs/guides/component-best-practices",component:d("/docs/guides/component-best-practices","ea7"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/component-variants",component:d("/docs/guides/component-variants","90b"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/handbook/class",component:d("/docs/guides/handbook/class","35f"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/handbook/classes",component:d("/docs/guides/handbook/classes","a99"),exact:!0},{path:"/docs/guides/handbook/custom-state",component:d("/docs/guides/handbook/custom-state","1fe"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/handbook/extend",component:d("/docs/guides/handbook/extend","510"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/handbook/import-class",component:d("/docs/guides/handbook/import-class","e56"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/handbook/intro",component:d("/docs/guides/handbook/intro","3a8"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/handbook/namespacing",component:d("/docs/guides/handbook/namespacing","93a"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/handbook/runtime",component:d("/docs/guides/handbook/runtime","4db"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/migration-v3",component:d("/docs/guides/migration-v3","620"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/migration-v5",component:d("/docs/guides/migration-v5","217"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/project-commons",component:d("/docs/guides/project-commons","9bf"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/shared-classes",component:d("/docs/guides/shared-classes","5ec"),exact:!0,sidebar:"Guides"},{path:"/docs/guides/ssr",component:d("/docs/guides/ssr","728"),exact:!0,sidebar:"Guides"},{path:"/docs/references/cheatsheet",component:d("/docs/references/cheatsheet","3be"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/class-selectors",component:d("/docs/references/class-selectors","856"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/contains",component:d("/docs/references/contains","39b"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/css-vars",component:d("/docs/references/css-vars","571"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/custom-selectors",component:d("/docs/references/custom-selectors","4f8"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/extend-stylesheet",component:d("/docs/references/extend-stylesheet","472"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/formatters",component:d("/docs/references/formatters","c0d"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/global-selectors",component:d("/docs/references/global-selectors","04c"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/imports",component:d("/docs/references/imports","a46"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/keyframes",component:d("/docs/references/keyframes","4d3"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/layer",component:d("/docs/references/layer","5cb"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/mixins",component:d("/docs/references/mixins","9cd"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/namespace",component:d("/docs/references/namespace","686"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/programmatic-api",component:d("/docs/references/programmatic-api","143"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/pseudo-classes",component:d("/docs/references/pseudo-classes","380"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/pseudo-elements",component:d("/docs/references/pseudo-elements","cd5"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/root",component:d("/docs/references/root","f2e"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/runtime",component:d("/docs/references/runtime","a1c"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/st-scope",component:d("/docs/references/st-scope","b75"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/st-variables",component:d("/docs/references/st-variables","7ce"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/type-selectors",component:d("/docs/references/type-selectors","11d"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/references/using-external-assets",component:d("/docs/references/using-external-assets","78d"),exact:!0,sidebar:"Specification Reference"},{path:"/docs/style-guide",component:d("/docs/style-guide","51c"),exact:!0}]}]}]},{path:"/",component:d("/","e5f"),exact:!0},{path:"*",component:d("*")}]},8848:(e,t,n)=>{"use strict";n.d(t,{o:()=>a,x:()=>i});var r=n(6540),o=n(4848);const a=r.createContext(!1);function i(e){let{children:t}=e;const[n,i]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{i(!0)}),[]),(0,o.jsx)(a.Provider,{value:n,children:t})}},7522:(e,t,n)=>{"use strict";var r=n(6540),o=n(5338),a=n(545),i=n(4625),s=n(4784),l=n(1712);const c=[n(9432),n(5300),n(4753),n(5729)];var u=n(2413),d=n(6347),p=n(2831),f=n(4848);function g(e){let{children:t}=e;return(0,f.jsx)(f.Fragment,{children:t})}var m=n(1141),h=n(7639),y=n(8180),b=n(6957),v=n(6644),w=n(2098),k=n(9503);var x=n(4609),S=n(1210);function _(){const{i18n:{currentLocale:e,defaultLocale:t,localeConfigs:n}}=(0,h.A)(),r=(0,w.o)(),o=n[e].htmlLang,a=e=>e.replace("-","_");return(0,f.jsxs)(m.A,{children:[Object.entries(n).map((e=>{let[t,{htmlLang:n}]=e;return(0,f.jsx)("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:n},t)})),(0,f.jsx)("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:"x-default"}),(0,f.jsx)("meta",{property:"og:locale",content:a(o)}),Object.values(n).filter((e=>o!==e.htmlLang)).map((e=>(0,f.jsx)("meta",{property:"og:locale:alternate",content:a(e.htmlLang)},`meta-og-${e.htmlLang}`)))]})}function E(e){let{permalink:t}=e;const{siteConfig:{url:n}}=(0,h.A)(),r=function(){const{siteConfig:{url:e,baseUrl:t,trailingSlash:n}}=(0,h.A)(),{pathname:r}=(0,d.zy)();return e+(0,x.Ks)((0,y.Ay)(r),{trailingSlash:n,baseUrl:t})}(),o=t?`${n}${t}`:r;return(0,f.jsxs)(m.A,{children:[(0,f.jsx)("meta",{property:"og:url",content:o}),(0,f.jsx)("link",{rel:"canonical",href:o})]})}function C(){const{i18n:{currentLocale:e}}=(0,h.A)(),{metadata:t,image:n}=(0,b.p)();return(0,f.jsxs)(f.Fragment,{children:[(0,f.jsxs)(m.A,{children:[(0,f.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,f.jsx)("body",{className:k.w})]}),n&&(0,f.jsx)(v.be,{image:n}),(0,f.jsx)(E,{}),(0,f.jsx)(_,{}),(0,f.jsx)(S.A,{tag:"default",locale:e}),(0,f.jsx)(m.A,{children:t.map(((e,t)=>(0,f.jsx)("meta",{...e},t)))})]})}const A=new Map;var T=n(8848),j=n(3366),R=n(6494);function P(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];const o=c.map((t=>{const r=t.default?.[e]??t[e];return r?.(...n)}));return()=>o.forEach((e=>e?.()))}const L=function(e){let{children:t,location:n,previousLocation:r}=e;return(0,R.A)((()=>{r!==n&&(!function(e){let{location:t,previousLocation:n}=e;if(!n)return;const r=t.pathname===n.pathname,o=t.hash===n.hash,a=t.search===n.search;if(r&&o&&!a)return;const{hash:i}=t;if(i){const e=decodeURIComponent(i.substring(1)),t=document.getElementById(e);t?.scrollIntoView()}else window.scrollTo(0,0)}({location:n,previousLocation:r}),P("onRouteDidUpdate",{previousLocation:r,location:n}))}),[r,n]),t};function N(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,p.u)(u.A,e))).flat();return Promise.all(t.map((e=>e.route.component.preload?.())))}class O extends r.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=l.A.canUseDOM?P("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;const n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=P("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),N(n.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:t}=this.props;return(0,f.jsx)(L,{previousLocation:this.previousLocation,location:t,children:(0,f.jsx)(d.qh,{location:t,render:()=>e})})}}const D=O,I="__docusaurus-base-url-issue-banner-suggestion-container";function M(e){return`\ndocument.addEventListener('DOMContentLoaded', function maybeInsertBanner() {\n var shouldInsert = typeof window['docusaurus'] === 'undefined';\n shouldInsert && insertBanner();\n});\n\nfunction insertBanner() {\n var bannerContainer = document.createElement('div');\n bannerContainer.id = '__docusaurus-base-url-issue-banner-container';\n var bannerHtml = ${JSON.stringify(function(e){return`\n<div id="__docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseUrl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">${e}</span> ${"/"===e?" (default value)":""}</p>\n <p>We suggest trying baseUrl = <span id="${I}" style="font-weight: bold; color: green;"></span></p>\n</div>\n`}(e)).replace(/</g,"\\<")};\n bannerContainer.innerHTML = bannerHtml;\n document.body.prepend(bannerContainer);\n var suggestionContainer = document.getElementById('${I}');\n var actualHomePagePath = window.location.pathname;\n var suggestedBaseUrl = actualHomePagePath.substr(-1) === '/'\n ? actualHomePagePath\n : actualHomePagePath + '/';\n suggestionContainer.innerHTML = suggestedBaseUrl;\n}\n`}function F(){const{siteConfig:{baseUrl:e}}=(0,h.A)();return(0,f.jsx)(f.Fragment,{children:!l.A.canUseDOM&&(0,f.jsx)(m.A,{children:(0,f.jsx)("script",{children:M(e)})})})}function z(){const{siteConfig:{baseUrl:e,baseUrlIssueBanner:t}}=(0,h.A)(),{pathname:n}=(0,d.zy)();return t&&n===e?(0,f.jsx)(F,{}):null}function B(){const{siteConfig:{favicon:e,title:t,noIndex:n},i18n:{currentLocale:r,localeConfigs:o}}=(0,h.A)(),a=(0,y.Ay)(e),{htmlLang:i,direction:s}=o[r];return(0,f.jsxs)(m.A,{children:[(0,f.jsx)("html",{lang:i,dir:s}),(0,f.jsx)("title",{children:t}),(0,f.jsx)("meta",{property:"og:title",content:t}),(0,f.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),n&&(0,f.jsx)("meta",{name:"robots",content:"noindex, nofollow"}),e&&(0,f.jsx)("link",{rel:"icon",href:a})]})}var $=n(3832),U=n(1062);function q(){const e=(0,U.A)();return(0,f.jsx)(m.A,{children:(0,f.jsx)("html",{"data-has-hydrated":e})})}const G=(0,p.v)(u.A);function H(){const e=function(e){if(A.has(e.pathname))return{...e,pathname:A.get(e.pathname)};if((0,p.u)(u.A,e.pathname).some((e=>{let{route:t}=e;return!0===t.exact})))return A.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return A.set(e.pathname,t),{...e,pathname:t}}((0,d.zy)());return(0,f.jsx)(D,{location:e,children:G})}function V(){return(0,f.jsx)($.A,{children:(0,f.jsx)(j.l,{children:(0,f.jsxs)(T.x,{children:[(0,f.jsxs)(g,{children:[(0,f.jsx)(B,{}),(0,f.jsx)(C,{}),(0,f.jsx)(z,{}),(0,f.jsx)(H,{})]}),(0,f.jsx)(q,{})]})})})}var W=n(4054);const K=function(e){try{return document.createElement("link").relList.supports(e)}catch{return!1}}("prefetch")?function(e){return new Promise(((t,n)=>{if("undefined"==typeof document)return void n();const r=document.createElement("link");r.setAttribute("rel","prefetch"),r.setAttribute("href",e),r.onload=()=>t(),r.onerror=()=>n();const o=document.getElementsByTagName("head")[0]??document.getElementsByName("script")[0]?.parentNode;o?.appendChild(r)}))}:function(e){return new Promise(((t,n)=>{const r=new XMLHttpRequest;r.open("GET",e,!0),r.withCredentials=!0,r.onload=()=>{200===r.status?t():n()},r.send(null)}))};var Q=n(1604);const Y=new Set,Z=new Set,X=()=>navigator.connection?.effectiveType.includes("2g")||navigator.connection?.saveData,J={prefetch:e=>{if(!(e=>!X()&&!Z.has(e)&&!Y.has(e))(e))return!1;Y.add(e);const t=(0,p.u)(u.A,e).flatMap((e=>{return t=e.route.path,Object.entries(W).filter((e=>{let[n]=e;return n.replace(/-[^-]+$/,"")===t})).flatMap((e=>{let[,t]=e;return Object.values((0,Q.A)(t))}));var t}));return Promise.all(t.map((e=>{const t=n.gca(e);return t&&!t.includes("undefined")?K(t).catch((()=>{})):Promise.resolve()})))},preload:e=>!!(e=>!X()&&!Z.has(e))(e)&&(Z.add(e),N(e))},ee=Object.freeze(J);function te(e){let{children:t}=e;return"hash"===s.default.future.experimental_router?(0,f.jsx)(i.I9,{children:t}):(0,f.jsx)(i.Kd,{children:t})}const ne=Boolean(!0);if(l.A.canUseDOM){window.docusaurus=ee;const e=document.getElementById("__docusaurus"),t=(0,f.jsx)(a.vd,{children:(0,f.jsx)(te,{children:(0,f.jsx)(V,{})})}),n=(e,t)=>{console.error("Docusaurus React Root onRecoverableError:",e,t)},i=()=>{if(window.docusaurusRoot)window.docusaurusRoot.render(t);else if(ne)window.docusaurusRoot=o.hydrateRoot(e,t,{onRecoverableError:n});else{const r=o.createRoot(e,{onRecoverableError:n});r.render(t),window.docusaurusRoot=r}};N(window.location.pathname).then((()=>{(0,r.startTransition)(i)}))}},3366:(e,t,n)=>{"use strict";n.d(t,{o:()=>d,l:()=>p});var r=n(6540),o=n(4784);const a=JSON.parse('{"docusaurus-plugin-content-docs":{"default":{"path":"/docs","versions":[{"name":"current","label":"Next","isLast":true,"path":"/docs","mainDocId":"getting-started/intro","docs":[{"id":"attributions","path":"/docs/attributions"},{"id":"getting-started/boilerplate","path":"/docs/getting-started/boilerplate","sidebar":"Discover"},{"id":"getting-started/intro","path":"/docs/getting-started/intro","sidebar":"Discover"},{"id":"getting-started/manual-integration","path":"/docs/getting-started/manual-integration","sidebar":"Discover"},{"id":"getting-started/nextjs-integration","path":"/docs/getting-started/nextjs-integration","sidebar":"Discover"},{"id":"getting-started/rollup-integration","path":"/docs/getting-started/rollup-integration","sidebar":"Discover"},{"id":"getting-started/storybook-integration","path":"/docs/getting-started/storybook-integration","sidebar":"Discover"},{"id":"getting-started/stylable-config","path":"/docs/getting-started/stylable-config","sidebar":"Discover"},{"id":"getting-started/tooling/cli","path":"/docs/getting-started/tooling/cli","sidebar":"Discover"},{"id":"getting-started/tooling/stylable-intelligence","path":"/docs/getting-started/tooling/stylable-intelligence","sidebar":"Discover"},{"id":"getting-started/typescript-integration","path":"/docs/getting-started/typescript-integration","sidebar":"Discover"},{"id":"getting-started/webpack-integration","path":"/docs/getting-started/webpack-integration","sidebar":"Discover"},{"id":"guides/component-best-practices","path":"/docs/guides/component-best-practices","sidebar":"Guides"},{"id":"guides/component-variants","path":"/docs/guides/component-variants","sidebar":"Guides"},{"id":"guides/handbook/class","path":"/docs/guides/handbook/class","sidebar":"Guides"},{"id":"guides/handbook/classes","path":"/docs/guides/handbook/classes"},{"id":"guides/handbook/custom-state","path":"/docs/guides/handbook/custom-state","sidebar":"Guides"},{"id":"guides/handbook/extend","path":"/docs/guides/handbook/extend","sidebar":"Guides"},{"id":"guides/handbook/import-class","path":"/docs/guides/handbook/import-class","sidebar":"Guides"},{"id":"guides/handbook/intro","path":"/docs/guides/handbook/intro","sidebar":"Guides"},{"id":"guides/handbook/namespacing","path":"/docs/guides/handbook/namespacing","sidebar":"Guides"},{"id":"guides/handbook/runtime","path":"/docs/guides/handbook/runtime","sidebar":"Guides"},{"id":"guides/migration-v3","path":"/docs/guides/migration-v3","sidebar":"Guides"},{"id":"guides/migration-v5","path":"/docs/guides/migration-v5","sidebar":"Guides"},{"id":"guides/project-commons","path":"/docs/guides/project-commons","sidebar":"Guides"},{"id":"guides/shared-classes","path":"/docs/guides/shared-classes","sidebar":"Guides"},{"id":"guides/ssr","path":"/docs/guides/ssr","sidebar":"Guides"},{"id":"references/cheatsheet","path":"/docs/references/cheatsheet","sidebar":"Specification Reference"},{"id":"references/class-selectors","path":"/docs/references/class-selectors","sidebar":"Specification Reference"},{"id":"references/contains","path":"/docs/references/contains","sidebar":"Specification Reference"},{"id":"references/css-vars","path":"/docs/references/css-vars","sidebar":"Specification Reference"},{"id":"references/custom-selectors","path":"/docs/references/custom-selectors","sidebar":"Specification Reference"},{"id":"references/extend-stylesheet","path":"/docs/references/extend-stylesheet","sidebar":"Specification Reference"},{"id":"references/formatters","path":"/docs/references/formatters","sidebar":"Specification Reference"},{"id":"references/global-selectors","path":"/docs/references/global-selectors","sidebar":"Specification Reference"},{"id":"references/imports","path":"/docs/references/imports","sidebar":"Specification Reference"},{"id":"references/keyframes","path":"/docs/references/keyframes","sidebar":"Specification Reference"},{"id":"references/layer","path":"/docs/references/layer","sidebar":"Specification Reference"},{"id":"references/mixins","path":"/docs/references/mixins","sidebar":"Specification Reference"},{"id":"references/namespace","path":"/docs/references/namespace","sidebar":"Specification Reference"},{"id":"references/programmatic-api","path":"/docs/references/programmatic-api","sidebar":"Specification Reference"},{"id":"references/pseudo-classes","path":"/docs/references/pseudo-classes","sidebar":"Specification Reference"},{"id":"references/pseudo-elements","path":"/docs/references/pseudo-elements","sidebar":"Specification Reference"},{"id":"references/root","path":"/docs/references/root","sidebar":"Specification Reference"},{"id":"references/runtime","path":"/docs/references/runtime","sidebar":"Specification Reference"},{"id":"references/st-scope","path":"/docs/references/st-scope","sidebar":"Specification Reference"},{"id":"references/st-variables","path":"/docs/references/st-variables","sidebar":"Specification Reference"},{"id":"references/type-selectors","path":"/docs/references/type-selectors","sidebar":"Specification Reference"},{"id":"references/using-external-assets","path":"/docs/references/using-external-assets","sidebar":"Specification Reference"},{"id":"style-guide","path":"/docs/style-guide"},{"id":"/getting-started/integrations","path":"/docs/getting-started/integrations","sidebar":"Discover"}],"draftIds":[],"sidebars":{"Discover":{"link":{"path":"/docs/getting-started/intro","label":"getting-started/intro"}},"Guides":{"link":{"path":"/docs/guides/handbook/intro","label":"guides/handbook/intro"}},"Specification Reference":{"link":{"path":"/docs/references/cheatsheet","label":"references/cheatsheet"}}}}],"breadcrumbs":true}}}'),i=JSON.parse('{"defaultLocale":"en","locales":["en"],"path":"i18n","currentLocale":"en","localeConfigs":{"en":{"label":"English","direction":"ltr","htmlLang":"en","calendar":"gregory","path":"en"}}}');var s=n(2654);const l=JSON.parse('{"docusaurusVersion":"3.6.3","siteVersion":"0.0.1","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"3.6.3"},"docusaurus-plugin-content-blog":{"type":"package","name":"@docusaurus/plugin-content-blog","version":"3.6.3"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"3.6.3"},"docusaurus-plugin-google-analytics":{"type":"package","name":"@docusaurus/plugin-google-analytics","version":"3.6.3"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"3.6.3"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"3.6.3"},"@easyops-cn/docusaurus-search-local":{"type":"package","name":"@easyops-cn/docusaurus-search-local","version":"0.46.1"},"stylable-docusaurus-plugin":{"type":"project"}}}');var c=n(4848);const u={siteConfig:o.default,siteMetadata:l,globalData:a,i18n:i,codeTranslations:s},d=r.createContext(u);function p(e){let{children:t}=e;return(0,c.jsx)(d.Provider,{value:u,children:t})}},3832:(e,t,n)=>{"use strict";n.d(t,{A:()=>m});var r=n(6540),o=n(1712),a=n(1141),i=n(4609),s=n(7635),l=n(3363),c=n(4848);function u(e){let{error:t,tryAgain:n}=e;return(0,c.jsxs)("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"flex-start",minHeight:"100vh",width:"100%",maxWidth:"80ch",fontSize:"20px",margin:"0 auto",padding:"1rem"},children:[(0,c.jsx)("h1",{style:{fontSize:"3rem"},children:"This page crashed"}),(0,c.jsx)("button",{type:"button",onClick:n,style:{margin:"1rem 0",fontSize:"2rem",cursor:"pointer",borderRadius:20,padding:"1rem"},children:"Try again"}),(0,c.jsx)(d,{error:t})]})}function d(e){let{error:t}=e;const n=(0,i.rA)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,c.jsx)("p",{style:{whiteSpace:"pre-wrap"},children:n})}function p(e){let{children:t}=e;return(0,c.jsx)(l.W,{value:{plugin:{name:"docusaurus-core-error-boundary",id:"default"}},children:t})}function f(e){let{error:t,tryAgain:n}=e;return(0,c.jsx)(p,{children:(0,c.jsxs)(m,{fallback:()=>(0,c.jsx)(u,{error:t,tryAgain:n}),children:[(0,c.jsx)(a.A,{children:(0,c.jsx)("title",{children:"Page Error"})}),(0,c.jsx)(s.A,{children:(0,c.jsx)(u,{error:t,tryAgain:n})})]})})}const g=e=>(0,c.jsx)(f,{...e});class m extends r.Component{constructor(e){super(e),this.state={error:null}}componentDidCatch(e){o.A.canUseDOM&&this.setState({error:e})}render(){const{children:e}=this.props,{error:t}=this.state;if(t){const e={error:t,tryAgain:()=>this.setState({error:null})};return(this.props.fallback??g)(e)}return e??null}}},1712:(e,t,n)=>{"use strict";n.d(t,{A:()=>o});const r="undefined"!=typeof window&&"document"in window&&"createElement"in window.document,o={canUseDOM:r,canUseEventListeners:r&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:r&&"IntersectionObserver"in window,canUseViewport:r&&"screen"in window}},1141:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});n(6540);var r=n(545),o=n(4848);function a(e){return(0,o.jsx)(r.mg,{...e})}},4783:(e,t,n)=>{"use strict";n.d(t,{A:()=>f});var r=n(6540),o=n(4625),a=n(4609),i=n(7639),s=n(877),l=n(1712),c=n(7344),u=n(8180),d=n(4848);function p(e,t){let{isNavLink:n,to:p,href:f,activeClassName:g,isActive:m,"data-noBrokenLinkCheck":h,autoAddBaseUrl:y=!0,...b}=e;const{siteConfig:v}=(0,i.A)(),{trailingSlash:w,baseUrl:k}=v,x=v.future.experimental_router,{withBaseUrl:S}=(0,u.hH)(),_=(0,c.A)(),E=(0,r.useRef)(null);(0,r.useImperativeHandle)(t,(()=>E.current));const C=p||f;const A=(0,s.A)(C),T=C?.replace("pathname://","");let j=void 0!==T?(R=T,y&&(e=>e.startsWith("/"))(R)?S(R):R):void 0;var R;"hash"===x&&j?.startsWith("./")&&(j=j?.slice(1)),j&&A&&(j=(0,a.Ks)(j,{trailingSlash:w,baseUrl:k}));const P=(0,r.useRef)(!1),L=n?o.k2:o.N_,N=l.A.canUseIntersectionObserver,O=(0,r.useRef)(),D=()=>{P.current||null==j||(window.docusaurus.preload(j),P.current=!0)};(0,r.useEffect)((()=>(!N&&A&&l.A.canUseDOM&&null!=j&&window.docusaurus.prefetch(j),()=>{N&&O.current&&O.current.disconnect()})),[O,j,N,A]);const I=j?.startsWith("#")??!1,M=!b.target||"_self"===b.target,F=!j||!A||!M||I&&"hash"!==x;h||!I&&F||_.collectLink(j),b.id&&_.collectAnchor(b.id);const z={};return F?(0,d.jsx)("a",{ref:E,href:j,...C&&!A&&{target:"_blank",rel:"noopener noreferrer"},...b,...z}):(0,d.jsx)(L,{...b,onMouseEnter:D,onTouchStart:D,innerRef:e=>{E.current=e,N&&e&&A&&(O.current=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(O.current.unobserve(e),O.current.disconnect(),null!=j&&window.docusaurus.prefetch(j))}))})),O.current.observe(e))},to:j,...n&&{isActive:m,activeClassName:g},...z})}const f=r.forwardRef(p)},3230:(e,t,n)=>{"use strict";n.d(t,{A:()=>c,T:()=>l});var r=n(6540),o=n(4848);function a(e,t){const n=e.split(/(\{\w+\})/).map(((e,n)=>{if(n%2==1){const n=t?.[e.slice(1,-1)];if(void 0!==n)return n}return e}));return n.some((e=>(0,r.isValidElement)(e)))?n.map(((e,t)=>(0,r.isValidElement)(e)?r.cloneElement(e,{key:t}):e)).filter((e=>""!==e)):n.join("")}var i=n(2654);function s(e){let{id:t,message:n}=e;if(void 0===t&&void 0===n)throw new Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return i[t??n]??n??t}function l(e,t){let{message:n,id:r}=e;return a(s({message:n,id:r}),t)}function c(e){let{children:t,id:n,values:r}=e;if(t&&"string"!=typeof t)throw console.warn("Illegal <Translate> children",t),new Error("The Docusaurus <Translate> component only accept simple string values");const i=s({message:t,id:n});return(0,o.jsx)(o.Fragment,{children:a(i,r)})}},4598:(e,t,n)=>{"use strict";n.d(t,{W:()=>r});const r="default"},877:(e,t,n)=>{"use strict";function r(e){return/^(?:\w*:|\/\/)/.test(e)}function o(e){return void 0!==e&&!r(e)}n.d(t,{A:()=>o,z:()=>r})},8180:(e,t,n)=>{"use strict";n.d(t,{Ay:()=>s,hH:()=>i});var r=n(6540),o=n(7639),a=n(877);function i(){const{siteConfig:e}=(0,o.A)(),{baseUrl:t,url:n}=e,i=e.future.experimental_router,s=(0,r.useCallback)(((e,r)=>function(e){let{siteUrl:t,baseUrl:n,url:r,options:{forcePrependBaseUrl:o=!1,absolute:i=!1}={},router:s}=e;if(!r||r.startsWith("#")||(0,a.z)(r))return r;if("hash"===s)return r.startsWith("/")?`.${r}`:`./${r}`;if(o)return n+r.replace(/^\//,"");if(r===n.replace(/\/$/,""))return n;const l=r.startsWith(n)?r:n+r.replace(/^\//,"");return i?t+l:l}({siteUrl:n,baseUrl:t,url:e,options:r,router:i})),[n,t,i]);return{withBaseUrl:s}}function s(e,t){void 0===t&&(t={});const{withBaseUrl:n}=i();return n(e,t)}},7344:(e,t,n)=>{"use strict";n.d(t,{A:()=>i});var r=n(6540);n(4848);const o=r.createContext({collectAnchor:()=>{},collectLink:()=>{}}),a=()=>(0,r.useContext)(o);function i(){return a()}},7639:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});var r=n(6540),o=n(3366);function a(){return(0,r.useContext)(o.o)}},1062:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});var r=n(6540),o=n(8848);function a(){return(0,r.useContext)(o.o)}},6494:(e,t,n)=>{"use strict";n.d(t,{A:()=>o});var r=n(6540);const o=n(1712).A.canUseDOM?r.useLayoutEffect:r.useEffect},3512:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});var r=n(6540),o=n(3363);function a(){const e=r.useContext(o.o);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}},1604:(e,t,n)=>{"use strict";n.d(t,{A:()=>o});const r=e=>"object"==typeof e&&!!e&&Object.keys(e).length>0;function o(e){const t={};return function e(n,o){Object.entries(n).forEach((n=>{let[a,i]=n;const s=o?`${o}.${a}`:a;r(i)?e(i,s):t[s]=i}))}(e),t}},3363:(e,t,n)=>{"use strict";n.d(t,{W:()=>i,o:()=>a});var r=n(6540),o=n(4848);const a=r.createContext(null);function i(e){let{children:t,value:n}=e;const i=r.useContext(a),s=(0,r.useMemo)((()=>function(e){let{parent:t,value:n}=e;if(!t){if(!n)throw new Error("Unexpected: no Docusaurus route context found");if(!("plugin"in n))throw new Error("Unexpected: Docusaurus topmost route context has no `plugin` attribute");return n}const r={...t.data,...n?.data};return{plugin:t.plugin,data:r}}({parent:i,value:n})),[i,n]);return(0,o.jsx)(a.Provider,{value:s,children:t})}},6457:(e,t,n)=>{"use strict";n.d(t,{VQ:()=>h,XK:()=>v,g1:()=>b});var r=n(6540),o=n(4721),a=n(4598),i=n(6957),s=n(9900),l=n(4799),c=n(4848);const u=e=>`docs-preferred-version-${e}`,d={save:(e,t,n)=>{(0,s.Wf)(u(e),{persistence:t}).set(n)},read:(e,t)=>(0,s.Wf)(u(e),{persistence:t}).get(),clear:(e,t)=>{(0,s.Wf)(u(e),{persistence:t}).del()}},p=e=>Object.fromEntries(e.map((e=>[e,{preferredVersionName:null}])));const f=r.createContext(null);function g(){const e=(0,o.Gy)(),t=(0,i.p)().docs.versionPersistence,n=(0,r.useMemo)((()=>Object.keys(e)),[e]),[a,s]=(0,r.useState)((()=>p(n)));(0,r.useEffect)((()=>{s(function(e){let{pluginIds:t,versionPersistence:n,allDocsData:r}=e;function o(e){const t=d.read(e,n);return r[e].versions.some((e=>e.name===t))?{preferredVersionName:t}:(d.clear(e,n),{preferredVersionName:null})}return Object.fromEntries(t.map((e=>[e,o(e)])))}({allDocsData:e,versionPersistence:t,pluginIds:n}))}),[e,t,n]);return[a,(0,r.useMemo)((()=>({savePreferredVersion:function(e,n){d.save(e,t,n),s((t=>({...t,[e]:{preferredVersionName:n}})))}})),[t])]}function m(e){let{children:t}=e;const n=g();return(0,c.jsx)(f.Provider,{value:n,children:t})}function h(e){let{children:t}=e;return(0,c.jsx)(m,{children:t})}function y(){const e=(0,r.useContext)(f);if(!e)throw new l.dV("DocsPreferredVersionContextProvider");return e}function b(e){void 0===e&&(e=a.W);const t=(0,o.ht)(e),[n,i]=y(),{preferredVersionName:s}=n[e];return{preferredVersion:t.versions.find((e=>e.name===s))??null,savePreferredVersionName:(0,r.useCallback)((t=>{i.savePreferredVersion(e,t)}),[i,e])}}function v(){const e=(0,o.Gy)(),[t]=y();function n(n){const r=e[n],{preferredVersionName:o}=t[n];return r.versions.find((e=>e.name===o))??null}const r=Object.keys(e);return Object.fromEntries(r.map((e=>[e,n(e)])))}},3718:(e,t,n)=>{"use strict";n.d(t,{k:()=>a,v:()=>i});var r=n(4721),o=n(6457);function a(e,t){return`docs-${e}-${t}`}function i(){const e=(0,r.Gy)(),t=(0,r.gk)(),n=(0,o.XK)();return[...Object.keys(e).map((function(r){const o=t?.activePlugin.pluginId===r?t.activeVersion:void 0,i=n[r],s=e[r].versions.find((e=>e.isLast));return a(r,(o??i??s).name)}))]}},40:(e,t,n)=>{"use strict";n.d(t,{V:()=>l,t:()=>c});var r=n(6540),o=n(4799),a=n(4848);const i=Symbol("EmptyContext"),s=r.createContext(i);function l(e){let{children:t,name:n,items:o}=e;const i=(0,r.useMemo)((()=>n&&o?{name:n,items:o}:null),[n,o]);return(0,a.jsx)(s.Provider,{value:i,children:t})}function c(){const e=(0,r.useContext)(s);if(e===i)throw new o.dV("DocsSidebarProvider");return e}},5357:(e,t,n)=>{"use strict";n.d(t,{$S:()=>g,B5:()=>E,Nr:()=>f,OF:()=>k,QB:()=>_,Vd:()=>x,Y:()=>v,cC:()=>p,d1:()=>C,fW:()=>S,w8:()=>y});var r=n(6540),o=n(6347),a=n(2831),i=n(4721),s=n(260),l=n(5167),c=n(6457),u=n(1704),d=n(40);function p(e){const t=(0,u.r)();if(!e)return;const n=t.docs[e];if(!n)throw new Error(`no version doc found by id=${e}`);return n}function f(e){return"link"!==e.type||e.unlisted?"category"===e.type?function(e){if(e.href&&!e.linkUnlisted)return e.href;for(const t of e.items){const e=f(t);if(e)return e}}(e):void 0:e.href}function g(){const{pathname:e}=(0,o.zy)(),t=(0,d.t)();if(!t)throw new Error("Unexpected: cant find current sidebar in context");const n=w({sidebarItems:t.items,pathname:e,onlyCategories:!0}).slice(-1)[0];if(!n)throw new Error(`${e} is not associated with a category. useCurrentSidebarCategory() should only be used on category index pages.`);return n}const m=(e,t)=>void 0!==e&&(0,s.ys)(e,t),h=(e,t)=>e.some((e=>y(e,t)));function y(e,t){return"link"===e.type?m(e.href,t):"category"===e.type&&(m(e.href,t)||h(e.items,t))}function b(e,t){switch(e.type){case"category":return y(e,t)||e.items.some((e=>b(e,t)));case"link":return!e.unlisted||y(e,t);default:return!0}}function v(e,t){return(0,r.useMemo)((()=>e.filter((e=>b(e,t)))),[e,t])}function w(e){let{sidebarItems:t,pathname:n,onlyCategories:r=!1}=e;const o=[];return function e(t){for(const a of t)if("category"===a.type&&((0,s.ys)(a.href,n)||e(a.items))||"link"===a.type&&(0,s.ys)(a.href,n)){return r&&"category"!==a.type||o.unshift(a),!0}return!1}(t),o}function k(){const e=(0,d.t)(),{pathname:t}=(0,o.zy)(),n=(0,i.vT)()?.pluginData.breadcrumbs;return!1!==n&&e?w({sidebarItems:e.items,pathname:t}):null}function x(e){const{activeVersion:t}=(0,i.zK)(e),{preferredVersion:n}=(0,c.g1)(e),o=(0,i.r7)(e);return(0,r.useMemo)((()=>(0,l.sb)([t,n,o].filter(Boolean))),[t,n,o])}function S(e,t){const n=x(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.sidebars?Object.entries(e.sidebars):[])),r=t.find((t=>t[0]===e));if(!r)throw new Error(`Can't find any sidebar with id "${e}" in version${n.length>1?"s":""} ${n.map((e=>e.name)).join(", ")}".\nAvailable sidebar ids are:\n- ${t.map((e=>e[0])).join("\n- ")}`);return r[1]}),[e,n])}function _(e,t){const n=x(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.docs)),r=t.find((t=>t.id===e));if(!r){if(n.flatMap((e=>e.draftIds)).includes(e))return null;throw new Error(`Couldn't find any doc with id "${e}" in version${n.length>1?"s":""} "${n.map((e=>e.name)).join(", ")}".\nAvailable doc ids are:\n- ${(0,l.sb)(t.map((e=>e.id))).join("\n- ")}`)}return r}),[e,n])}function E(e){let{route:t}=e;const n=(0,o.zy)(),r=(0,u.r)(),i=t.routes,s=i.find((e=>(0,o.B6)(n.pathname,e)));if(!s)return null;const l=s.sidebar,c=l?r.docsSidebars[l]:void 0;return{docElement:(0,a.v)(i),sidebarName:l,sidebarItems:c}}function C(e){return e.filter((e=>!("category"===e.type||"link"===e.type)||!!f(e)))}},1704:(e,t,n)=>{"use strict";n.d(t,{n:()=>s,r:()=>l});var r=n(6540),o=n(4799),a=n(4848);const i=r.createContext(null);function s(e){let{children:t,version:n}=e;return(0,a.jsx)(i.Provider,{value:n,children:t})}function l(){const e=(0,r.useContext)(i);if(null===e)throw new o.dV("DocsVersionProvider");return e}},4721:(e,t,n)=>{"use strict";n.d(t,{d1:()=>u.d1,zK:()=>w,vT:()=>h,gk:()=>y,Gy:()=>g,$S:()=>u.$S,HW:()=>k,vF:()=>p.v,ht:()=>m,g1:()=>d.g1,r7:()=>v,jh:()=>b});var r=n(6347),o=n(7639),a=n(4598);function i(e,t){void 0===t&&(t={});const n=function(){const{globalData:e}=(0,o.A)();return e}()[e];if(!n&&t.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin.`);return n}const s=e=>e.versions.find((e=>e.isLast));function l(e,t){return[...e.versions].sort(((e,t)=>e.path===t.path?0:e.path.includes(t.path)?-1:t.path.includes(e.path)?1:0)).find((e=>!!(0,r.B6)(t,{path:e.path,exact:!1,strict:!1})))}function c(e,t){const n=l(e,t),o=n?.docs.find((e=>!!(0,r.B6)(t,{path:e.path,exact:!0,strict:!1})));return{activeVersion:n,activeDoc:o,alternateDocVersions:o?function(t){const n={};return e.versions.forEach((e=>{e.docs.forEach((r=>{r.id===t&&(n[e.name]=r)}))})),n}(o.id):{}}}var u=n(5357),d=n(6457),p=n(3718);const f={},g=()=>i("docusaurus-plugin-content-docs")??f,m=e=>{try{return function(e,t,n){void 0===t&&(t=a.W),void 0===n&&(n={});const r=i(e),o=r?.[t];if(!o&&n.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin with id "${t}".`);return o}("docusaurus-plugin-content-docs",e,{failfast:!0})}catch(t){throw new Error("You are using a feature of the Docusaurus docs plugin, but this plugin does not seem to be enabled"+("Default"===e?"":` (pluginId=${e}`),{cause:t})}};function h(e){void 0===e&&(e={});const t=g(),{pathname:n}=(0,r.zy)();return function(e,t,n){void 0===n&&(n={});const o=Object.entries(e).sort(((e,t)=>t[1].path.localeCompare(e[1].path))).find((e=>{let[,n]=e;return!!(0,r.B6)(t,{path:n.path,exact:!1,strict:!1})})),a=o?{pluginId:o[0],pluginData:o[1]}:void 0;if(!a&&n.failfast)throw new Error(`Can't find active docs plugin for "${t}" pathname, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: ${Object.values(e).map((e=>e.path)).join(", ")}`);return a}(t,n,e)}function y(e){void 0===e&&(e={});const t=h(e),{pathname:n}=(0,r.zy)();if(!t)return;return{activePlugin:t,activeVersion:l(t.pluginData,n)}}function b(e){return m(e).versions}function v(e){const t=m(e);return s(t)}function w(e){const t=m(e),{pathname:n}=(0,r.zy)();return c(t,n)}function k(e){const t=m(e),{pathname:n}=(0,r.zy)();return function(e,t){const n=s(e);return{latestDocSuggestion:c(e,t).alternateDocVersions[n.name],latestVersionSuggestion:n}}(t,n)}},9432:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>r});const r={onRouteDidUpdate(e){let{location:t,previousLocation:n}=e;!n||t.pathname===n.pathname&&t.search===n.search&&t.hash===n.hash||(window.ga("set","page",t.pathname+t.search+t.hash),window.ga("send","pageview"))}}},5729:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>a});var r=n(5947),o=n.n(r);o().configure({showSpinner:!1});const a={onRouteUpdate(e){let{location:t,previousLocation:n}=e;if(n&&t.pathname!==n.pathname){const e=window.setTimeout((()=>{o().start()}),200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){o().done()}}},4753:(e,t,n)=>{"use strict";var r=n(1765),o=n(4784);!function(e){const{themeConfig:{prism:t}}=o.default,{additionalLanguages:r}=t,a=globalThis.Prism;globalThis.Prism=e,r.forEach((e=>{"php"===e&&n(9700),n(8692)(`./prism-${e}`)})),delete globalThis.Prism,void 0!==a&&(globalThis.Prism=e)}(r.My)},5225:(e,t,n)=>{"use strict";n.d(t,{A:()=>u});n(6540);var r=n(4164),o=n(3230),a=n(6957),i=n(4783),s=n(7344);const l={anchorWithStickyNavbar:"anchorWithStickyNavbar_LWe7",anchorWithHideOnScrollNavbar:"anchorWithHideOnScrollNavbar_WYt5"};var c=n(4848);function u(e){let{as:t,id:n,...u}=e;const d=(0,s.A)(),{navbar:{hideOnScroll:p}}=(0,a.p)();if("h1"===t||!n)return(0,c.jsx)(t,{...u,id:void 0});d.collectAnchor(n);const f=(0,o.T)({id:"theme.common.headingLinkTitle",message:"Direct link to {heading}",description:"Title for link to heading"},{heading:"string"==typeof u.children?u.children:n});return(0,c.jsxs)(t,{...u,className:(0,r.A)("anchor",p?l.anchorWithHideOnScrollNavbar:l.anchorWithStickyNavbar,u.className),id:n,children:[u.children,(0,c.jsx)(i.A,{className:"hash-link",to:`#${n}`,"aria-label":f,title:f,children:"\u200b"})]})}},716:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});n(6540);const r={iconExternalLink:"iconExternalLink_nPIU"};var o=n(4848);function a(e){let{width:t=13.5,height:n=13.5}=e;return(0,o.jsx)("svg",{width:t,height:n,"aria-hidden":"true",viewBox:"0 0 24 24",className:r.iconExternalLink,children:(0,o.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})}},7635:(e,t,n)=>{"use strict";n.d(t,{A:()=>Jt});var r=n(6540),o=n(4164),a=n(3832),i=n(6644),s=n(6347),l=n(3230),c=n(4067),u=n(4848);const d="__docusaurus_skipToContent_fallback";function p(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}function f(){const e=(0,r.useRef)(null),{action:t}=(0,s.W6)(),n=(0,r.useCallback)((e=>{e.preventDefault();const t=document.querySelector("main:first-of-type")??document.getElementById(d);t&&p(t)}),[]);return(0,c.$)((n=>{let{location:r}=n;e.current&&!r.hash&&"PUSH"===t&&p(e.current)})),{containerRef:e,onClick:n}}const g=(0,l.T)({id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",message:"Skip to main content"});function m(e){const t=e.children??g,{containerRef:n,onClick:r}=f();return(0,u.jsx)("div",{ref:n,role:"region","aria-label":g,children:(0,u.jsx)("a",{...e,href:`#${d}`,onClick:r,children:t})})}var h=n(8630),y=n(9503);const b={skipToContent:"skipToContent_fXgn"};function v(){return(0,u.jsx)(m,{className:b.skipToContent})}var w=n(6957),k=n(2);function x(e){let{width:t=21,height:n=21,color:r="currentColor",strokeWidth:o=1.2,className:a,...i}=e;return(0,u.jsx)("svg",{viewBox:"0 0 15 15",width:t,height:n,...i,children:(0,u.jsx)("g",{stroke:r,strokeWidth:o,children:(0,u.jsx)("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})})})}const S={closeButton:"closeButton_CVFx"};function _(e){return(0,u.jsx)("button",{type:"button","aria-label":(0,l.T)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"}),...e,className:(0,o.A)("clean-btn close",S.closeButton,e.className),children:(0,u.jsx)(x,{width:14,height:14,strokeWidth:3.1})})}const E={content:"content_knG7"};function C(e){const{announcementBar:t}=(0,w.p)(),{content:n}=t;return(0,u.jsx)("div",{...e,className:(0,o.A)(E.content,e.className),dangerouslySetInnerHTML:{__html:n}})}const A={announcementBar:"announcementBar_mb4j",announcementBarPlaceholder:"announcementBarPlaceholder_vyr4",announcementBarClose:"announcementBarClose_gvF7",announcementBarContent:"announcementBarContent_xLdY"};function T(){const{announcementBar:e}=(0,w.p)(),{isActive:t,close:n}=(0,k.M)();if(!t)return null;const{backgroundColor:r,textColor:o,isCloseable:a}=e;return(0,u.jsxs)("div",{className:A.announcementBar,style:{backgroundColor:r,color:o},role:"banner",children:[a&&(0,u.jsx)("div",{className:A.announcementBarPlaceholder}),(0,u.jsx)(C,{className:A.announcementBarContent}),a&&(0,u.jsx)(_,{onClick:n,className:A.announcementBarClose})]})}var j=n(1938),R=n(4245);var P=n(4799),L=n(763);const N=r.createContext(null);function O(e){let{children:t}=e;const n=function(){const e=(0,j.M)(),t=(0,L.YL)(),[n,o]=(0,r.useState)(!1),a=null!==t.component,i=(0,P.ZC)(a);return(0,r.useEffect)((()=>{a&&!i&&o(!0)}),[a,i]),(0,r.useEffect)((()=>{a?e.shown||o(!0):o(!1)}),[e.shown,a]),(0,r.useMemo)((()=>[n,o]),[n])}();return(0,u.jsx)(N.Provider,{value:n,children:t})}function D(e){if(e.component){const t=e.component;return(0,u.jsx)(t,{...e.props})}}function I(){const e=(0,r.useContext)(N);if(!e)throw new P.dV("NavbarSecondaryMenuDisplayProvider");const[t,n]=e,o=(0,r.useCallback)((()=>n(!1)),[n]),a=(0,L.YL)();return(0,r.useMemo)((()=>({shown:t,hide:o,content:D(a)})),[o,a,t])}function M(e){let{header:t,primaryMenu:n,secondaryMenu:r}=e;const{shown:a}=I();return(0,u.jsxs)("div",{className:"navbar-sidebar",children:[t,(0,u.jsxs)("div",{className:(0,o.A)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":a}),children:[(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:n}),(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:r})]})]})}var F=n(7710),z=n(1062);function B(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"})})}function $(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"})})}const U={toggle:"toggle_vylO",toggleButton:"toggleButton_gllP",darkToggleIcon:"darkToggleIcon_wfgR",lightToggleIcon:"lightToggleIcon_pyhR",toggleButtonDisabled:"toggleButtonDisabled_aARS"};function q(e){let{className:t,buttonClassName:n,value:r,onChange:a}=e;const i=(0,z.A)(),s=(0,l.T)({message:"Switch between dark and light mode (currently {mode})",id:"theme.colorToggle.ariaLabel",description:"The ARIA label for the navbar color mode toggle"},{mode:"dark"===r?(0,l.T)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,l.T)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return(0,u.jsx)("div",{className:(0,o.A)(U.toggle,t),children:(0,u.jsxs)("button",{className:(0,o.A)("clean-btn",U.toggleButton,!i&&U.toggleButtonDisabled,n),type:"button",onClick:()=>a("dark"===r?"light":"dark"),disabled:!i,title:s,"aria-label":s,"aria-live":"polite","aria-pressed":"dark"===r?"true":"false",children:[(0,u.jsx)(B,{className:(0,o.A)(U.toggleIcon,U.lightToggleIcon)}),(0,u.jsx)($,{className:(0,o.A)(U.toggleIcon,U.darkToggleIcon)})]})})}const G=r.memo(q),H={darkNavbarColorModeToggle:"darkNavbarColorModeToggle_X3D1"};function V(e){let{className:t}=e;const n=(0,w.p)().navbar.style,r=(0,w.p)().colorMode.disableSwitch,{colorMode:o,setColorMode:a}=(0,F.G)();return r?null:(0,u.jsx)(G,{className:t,buttonClassName:"dark"===n?H.darkNavbarColorModeToggle:void 0,value:o,onChange:a})}var W=n(20);function K(){return(0,u.jsx)(W.A,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function Q(){const e=(0,j.M)();return(0,u.jsx)("button",{type:"button","aria-label":(0,l.T)({id:"theme.docs.sidebar.closeSidebarButtonAriaLabel",message:"Close navigation bar",description:"The ARIA label for close button of mobile sidebar"}),className:"clean-btn navbar-sidebar__close",onClick:()=>e.toggle(),children:(0,u.jsx)(x,{color:"var(--ifm-color-emphasis-600)"})})}function Y(){return(0,u.jsxs)("div",{className:"navbar-sidebar__brand",children:[(0,u.jsx)(K,{}),(0,u.jsx)(V,{className:"margin-right--md"}),(0,u.jsx)(Q,{})]})}var Z=n(4783),X=n(8180),J=n(877);function ee(e,t){return void 0!==e&&void 0!==t&&new RegExp(e,"gi").test(t)}var te=n(716);function ne(e){let{activeBasePath:t,activeBaseRegex:n,to:r,href:o,label:a,html:i,isDropdownLink:s,prependBaseUrlToHref:l,...c}=e;const d=(0,X.Ay)(r),p=(0,X.Ay)(t),f=(0,X.Ay)(o,{forcePrependBaseUrl:!0}),g=a&&o&&!(0,J.A)(o),m=i?{dangerouslySetInnerHTML:{__html:i}}:{children:(0,u.jsxs)(u.Fragment,{children:[a,g&&(0,u.jsx)(te.A,{...s&&{width:12,height:12}})]})};return o?(0,u.jsx)(Z.A,{href:l?f:o,...c,...m}):(0,u.jsx)(Z.A,{to:d,isNavLink:!0,...(t||n)&&{isActive:(e,t)=>n?ee(n,t.pathname):t.pathname.startsWith(p)},...c,...m})}function re(e){let{className:t,isDropdownItem:n=!1,...r}=e;const a=(0,u.jsx)(ne,{className:(0,o.A)(n?"dropdown__link":"navbar__item navbar__link",t),isDropdownLink:n,...r});return n?(0,u.jsx)("li",{children:a}):a}function oe(e){let{className:t,isDropdownItem:n,...r}=e;return(0,u.jsx)("li",{className:"menu__list-item",children:(0,u.jsx)(ne,{className:(0,o.A)("menu__link",t),...r})})}function ae(e){let{mobile:t=!1,position:n,...r}=e;const o=t?oe:re;return(0,u.jsx)(o,{...r,activeClassName:r.activeClassName??(t?"menu__link--active":"navbar__link--active")})}var ie=n(4549),se=n(260),le=n(7639);const ce="dropdownNavbarItemMobile_S0Fm";function ue(e,t){return e.some((e=>function(e,t){return!!(0,se.ys)(e.to,t)||!!ee(e.activeBaseRegex,t)||!(!e.activeBasePath||!t.startsWith(e.activeBasePath))}(e,t)))}function de(e){let{items:t,position:n,className:a,onClick:i,...s}=e;const l=(0,r.useRef)(null),[c,d]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{const e=e=>{l.current&&!l.current.contains(e.target)&&d(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),document.addEventListener("focusin",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e),document.removeEventListener("focusin",e)}}),[l]),(0,u.jsxs)("div",{ref:l,className:(0,o.A)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===n,"dropdown--show":c}),children:[(0,u.jsx)(ne,{"aria-haspopup":"true","aria-expanded":c,role:"button",href:s.to?void 0:"#",className:(0,o.A)("navbar__link",a),...s,onClick:s.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),d(!c))},children:s.children??s.label}),(0,u.jsx)("ul",{className:"dropdown__menu",children:t.map(((e,t)=>(0,r.createElement)(dt,{isDropdownItem:!0,activeClassName:"dropdown__link--active",...e,key:t})))})]})}function pe(e){let{items:t,className:n,position:a,onClick:i,...l}=e;const c=function(){const{siteConfig:{baseUrl:e}}=(0,le.A)(),{pathname:t}=(0,s.zy)();return t.replace(e,"/")}(),d=ue(t,c),{collapsed:p,toggleCollapsed:f,setCollapsed:g}=(0,ie.u)({initialState:()=>!d});return(0,r.useEffect)((()=>{d&&g(!d)}),[c,d,g]),(0,u.jsxs)("li",{className:(0,o.A)("menu__list-item",{"menu__list-item--collapsed":p}),children:[(0,u.jsx)(ne,{role:"button",className:(0,o.A)(ce,"menu__link menu__link--sublist menu__link--sublist-caret",n),...l,onClick:e=>{e.preventDefault(),f()},children:l.children??l.label}),(0,u.jsx)(ie.N,{lazy:!0,as:"ul",className:"menu__list",collapsed:p,children:t.map(((e,t)=>(0,r.createElement)(dt,{mobile:!0,isDropdownItem:!0,onClick:i,activeClassName:"menu__link--active",...e,key:t})))})]})}function fe(e){let{mobile:t=!1,...n}=e;const r=t?pe:de;return(0,u.jsx)(r,{...n})}var ge=n(2098);function me(e){let{width:t=20,height:n=20,...r}=e;return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:t,height:n,"aria-hidden":!0,...r,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"})})}const he="iconLanguage_nlXk";var ye=n(5391);var be=n(4721),ve=n(1538),we=n(9950),ke=n(5268),xe=n(6323),Se=n(3032),_e=n(5928),Ee=n(5196);const Ce="searchBar_RVTs",Ae="dropdownMenu_qbY6",Te="searchBarLeft_MXDe",je="suggestion_fB_2",Re="cursor_eG29",Pe="hitTree_kk6K",Le="hitIcon_a7Zy",Ne="hitPath_ieM4",Oe="noResultsIcon_EBY5",De="hitFooter_E9YW",Ie="hitWrapper_sAK8",Me="hitTitle_vyVt",Fe="hitAction_NqkB",ze="noResults_l6Q3",Be="searchBarContainer_NW3z",$e="searchBarLoadingRing_YnHq",Ue="searchClearButton_qk4g",qe="searchIndexLoading_EJ1f",Ge="searchHintContainer_Pkmr",He="searchHint_iIMx",Ve="focused_OWtg",We="input_FOTf",Ke="hint_URu1",Qe="suggestions_X8XU",Ye="dataset_QiCy",Ze="empty_eITn";function Xe(e){let{document:t,type:n,page:r,metadata:o,tokens:a,isInterOfTree:i,isLastOfTree:s}=e;const l=n===we.i.Title,c=n===we.i.Keywords,u=l||c,d=n===we.i.Heading,p=[];i?p.push('<svg viewBox="0 0 24 54"><g stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6v42M20 27H8.3"></path></g></svg>'):s&&p.push('<svg viewBox="0 0 24 54"><g stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6v21M20 27H8.3"></path></g></svg>');const f=p.map((e=>`<span class="${Pe}">${e}</span>`)),g=`<span class="${Le}">${u?'<svg width="20" height="20" viewBox="0 0 20 20"><path d="M17 6v12c0 .52-.2 1-1 1H4c-.7 0-1-.33-1-1V2c0-.55.42-1 1-1h8l5 5zM14 8h-3.13c-.51 0-.87-.34-.87-.87V4" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linejoin="round"></path></svg>':d?'<svg width="20" height="20" viewBox="0 0 20 20"><path d="M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg>':'<svg width="20" height="20" viewBox="0 0 20 20"><path d="M17 5H3h14zm0 5H3h14zm0 5H3h14z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linejoin="round"></path></svg>'}</span>`,m=[`<span class="${Me}">${c?(0,Se.Z)(t.s,a):(0,_e.C)(t.t,(0,xe.g)(o,"t"),a)}</span>`];if(!i&&!s&&Ee.tb){const e=r?r.b?.concat(r.t).concat(t.s&&t.s!==r.t?t.s:[]):t.b;m.push(`<span class="${Ne}">${(0,ke.$)(e??[])}</span>`)}else u||m.push(`<span class="${Ne}">${(0,Se.Z)(r.t||(t.u.startsWith("/docs/api-reference/")?"API Reference":""),a)}</span>`);const h=`<span class="${Fe}"><svg width="20" height="20" viewBox="0 0 20 20"><g stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M18 3v4c0 2-2 4-4 4H2"></path><path d="M8 17l-6-6 6-6"></path></g></svg></span>`;return[...f,g,`<span class="${Ie}">`,...m,"</span>",h].join("")}function Je(){return`<span class="${ze}"><span class="${Oe}"><svg width="40" height="40" viewBox="0 0 20 20" fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 4.8c2 3 1.7 7-1 9.7h0l4.3 4.3-4.3-4.3a7.8 7.8 0 01-9.8 1m-2.2-2.2A7.8 7.8 0 0113.2 2.4M2 18L18 2"></path></svg></span><span>${(0,l.T)({id:"theme.SearchBar.noResultsText",message:"No results"})}</span></span>`}var et=n(5990),tt=n(4982);async function nt(){const e=await Promise.all([n.e(489),n.e(5741)]).then(n.t.bind(n,489,23)),t=e.default;return t.noConflict?t.noConflict():e.noConflict&&e.noConflict(),t}const rt="_highlight";const ot=function(e){let{handleSearchBarToggle:t}=e;const o=(0,z.A)(),{siteConfig:{baseUrl:a},i18n:{currentLocale:i}}=(0,le.A)(),c=(0,be.vT)();let d=a;try{const{preferredVersion:e}=function(){return n(4721).g1(...arguments)}(c?.pluginId??Ee.UB);e&&!e.isLast&&(d=e.path+"/")}catch(F){if(Ee.I$&&!(F instanceof P.dV))throw F}const p=(0,s.W6)(),f=(0,s.zy)(),g=(0,r.useRef)(null),m=(0,r.useRef)(new Map),h=(0,r.useRef)(!1),[y,b]=(0,r.useState)(!1),[v,w]=(0,r.useState)(!1),[k,x]=(0,r.useState)(""),S=(0,r.useRef)(null),_=(0,r.useRef)(""),[E,C]=(0,r.useState)("");(0,r.useEffect)((()=>{if(!Array.isArray(Ee.Hg))return;let e="";if(f.pathname.startsWith(d)){const t=f.pathname.substring(d.length);let n;for(const e of Ee.Hg){const r="string"==typeof e?e:e.path;if(t===r||t.startsWith(`${r}/`)){n=r;break}}n&&(e=n)}_.current!==e&&(m.current.delete(e),_.current=e),C(e)}),[f.pathname,d]);const A=!!Ee.O6&&Array.isArray(Ee.Hg)&&""===E,T=(0,r.useCallback)((async()=>{if(A||m.current.get(E))return;m.current.set(E,"loading"),S.current?.autocomplete.destroy(),b(!0);const[e]=await Promise.all([nt(),(0,ve.k)(d,E)]);if(S.current=e(g.current,{hint:!1,autoselect:!0,openOnFocus:!0,cssClasses:{root:(0,ye.A)(Ce,{[Te]:"left"===Ee.ZG}),noPrefix:!0,dropdownMenu:Ae,input:We,hint:Ke,suggestions:Qe,suggestion:je,cursor:Re,dataset:Ye,empty:Ze}},[{source:async(e,t)=>{t(await(0,ve.w)(d,E,e))},templates:{suggestion:Xe,empty:Je,footer:e=>{let{query:t,isEmpty:n}=e;if(n&&(!E||!Ee.dz))return;const r=(e=>{let{query:t,isEmpty:n}=e;const r=document.createElement("a"),o=new URLSearchParams;let s;if(o.set("q",t),E){const e=E&&Array.isArray(Ee.Hg)?Ee.Hg.find((e=>"string"==typeof e?e===E:e.path===E)):E,t=e?(0,tt.p)(e,i).label:E;s=Ee.dz&&n?(0,l.T)({id:"theme.SearchBar.seeAllOutsideContext",message:'See all results outside "{context}"'},{context:t}):(0,l.T)({id:"theme.SearchBar.searchInContext",message:'See all results within "{context}"'},{context:t})}else s=(0,l.T)({id:"theme.SearchBar.seeAll",message:"See all results"});if(!E||!Array.isArray(Ee.Hg)||Ee.dz&&n||o.set("ctx",E),d!==a){if(!d.startsWith(a))throw new Error(`Version url '${d}' does not start with base url '${a}', this is a bug of \`@easyops-cn/docusaurus-search-local\`, please report it.`);o.set("version",d.substring(a.length))}const c=`${a}search/?${o.toString()}`;return r.href=c,r.textContent=s,r.addEventListener("click",(e=>{e.ctrlKey||e.metaKey||(e.preventDefault(),S.current?.autocomplete.close(),p.push(c))})),r})({query:t,isEmpty:n}),o=document.createElement("div");return o.className=De,o.appendChild(r),o}}}]).on("autocomplete:selected",(function(e,t){let{document:{u:n,h:r},tokens:o}=t;g.current?.blur();let a=n;if(Ee.CU&&o.length>0){const e=new URLSearchParams;for(const t of o)e.append(rt,t);a+=`?${e.toString()}`}r&&(a+=r),p.push(a)})).on("autocomplete:closed",(()=>{g.current?.blur()})),m.current.set(E,"done"),b(!1),h.current){const e=g.current;e.value&&S.current?.autocomplete.open(),e.focus()}}),[A,E,d,a,p]);(0,r.useEffect)((()=>{if(!Ee.CU)return;const e=o?new URLSearchParams(f.search).getAll(rt):[];setTimeout((()=>{const t=document.querySelector("article");if(!t)return;const n=new Ee.CU(t);n.unmark(),0!==e.length&&n.mark(e),x(e.join(" ")),S.current?.autocomplete.setVal(e.join(" "))}))}),[o,f.search,f.pathname]);const[j,R]=(0,r.useState)(!1),L=(0,r.useCallback)((()=>{h.current=!0,T(),R(!0),t?.(!0)}),[t,T]),N=(0,r.useCallback)((()=>{R(!1),t?.(!1)}),[t]),O=(0,r.useCallback)((()=>{T()}),[T]),D=(0,r.useCallback)((e=>{x(e.target.value),e.target.value&&w(!0)}),[]),I=!!o&&/mac/i.test(navigator.userAgentData?.platform??navigator.platform);(0,r.useEffect)((()=>{if(!Ee.WW)return;const e=e=>{!(I?e.metaKey:e.ctrlKey)||"k"!==e.key&&"K"!==e.key||(e.preventDefault(),g.current?.focus(),L())};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}}),[I,L]);const M=(0,r.useCallback)((()=>{const e=new URLSearchParams(f.search);e.delete(rt);const t=e.toString(),n=f.pathname+(""!=t?`?${t}`:"")+f.hash;n!=f.pathname+f.search+f.hash&&p.push(n),x(""),S.current?.autocomplete.setVal("")}),[f.pathname,f.search,f.hash,p]);return(0,u.jsxs)("div",{className:(0,ye.A)("navbar__search",Be,{[qe]:y&&v,[Ve]:j}),hidden:A,dir:"ltr",children:[(0,u.jsx)("input",{placeholder:(0,l.T)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"}),"aria-label":"Search",className:"navbar__search-input",onMouseEnter:O,onFocus:L,onBlur:N,onChange:D,ref:g,value:k}),(0,u.jsx)(et.A,{className:$e}),Ee.WW&&Ee.pk&&(""!==k?(0,u.jsx)("button",{className:Ue,onClick:M,children:"\u2715"}):o&&(0,u.jsxs)("div",{className:Ge,children:[(0,u.jsx)("kbd",{className:He,children:I?"\u2318":"ctrl"}),(0,u.jsx)("kbd",{className:He,children:"K"})]}))]})},at={navbarSearchContainer:"navbarSearchContainer_Bca1"};function it(e){let{children:t,className:n}=e;return(0,u.jsx)("div",{className:(0,o.A)(n,at.navbarSearchContainer),children:t})}var st=n(5357);var lt=n(6457);function ct(e,t){return t.alternateDocVersions[e.name]??function(e){return e.docs.find((t=>t.id===e.mainDocId))}(e)}const ut={default:ae,localeDropdown:function(e){let{mobile:t,dropdownItemsBefore:n,dropdownItemsAfter:r,queryString:o="",...a}=e;const{i18n:{currentLocale:i,locales:c,localeConfigs:d}}=(0,le.A)(),p=(0,ge.o)(),{search:f,hash:g}=(0,s.zy)(),m=[...n,...c.map((e=>{const n=`${`pathname://${p.createUrl({locale:e,fullyQualified:!1})}`}${f}${g}${o}`;return{label:d[e].label,lang:d[e].htmlLang,to:n,target:"_self",autoAddBaseUrl:!1,className:e===i?t?"menu__link--active":"dropdown__link--active":""}})),...r],h=t?(0,l.T)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):d[i].label;return(0,u.jsx)(fe,{...a,mobile:t,label:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(me,{className:he}),h]}),items:m})},search:function(e){let{mobile:t,className:n}=e;return t?null:(0,u.jsx)(it,{className:n,children:(0,u.jsx)(ot,{})})},dropdown:fe,html:function(e){let{value:t,className:n,mobile:r=!1,isDropdownItem:a=!1}=e;const i=a?"li":"div";return(0,u.jsx)(i,{className:(0,o.A)({navbar__item:!r&&!a,"menu__list-item":r},n),dangerouslySetInnerHTML:{__html:t}})},doc:function(e){let{docId:t,label:n,docsPluginId:r,...o}=e;const{activeDoc:a}=(0,be.zK)(r),i=(0,st.QB)(t,r),s=a?.path===i?.path;return null===i||i.unlisted&&!s?null:(0,u.jsx)(ae,{exact:!0,...o,isActive:()=>s||!!a?.sidebar&&a.sidebar===i.sidebar,label:n??i.id,to:i.path})},docSidebar:function(e){let{sidebarId:t,label:n,docsPluginId:r,...o}=e;const{activeDoc:a}=(0,be.zK)(r),i=(0,st.fW)(t,r).link;if(!i)throw new Error(`DocSidebarNavbarItem: Sidebar with ID "${t}" doesn't have anything to be linked to.`);return(0,u.jsx)(ae,{exact:!0,...o,isActive:()=>a?.sidebar===t,label:n??i.label,to:i.path})},docsVersion:function(e){let{label:t,to:n,docsPluginId:r,...o}=e;const a=(0,st.Vd)(r)[0],i=t??a.label,s=n??(e=>e.docs.find((t=>t.id===e.mainDocId)))(a).path;return(0,u.jsx)(ae,{...o,label:i,to:s})},docsVersionDropdown:function(e){let{mobile:t,docsPluginId:n,dropdownActiveClassDisabled:r,dropdownItemsBefore:o,dropdownItemsAfter:a,...i}=e;const{search:c,hash:d}=(0,s.zy)(),p=(0,be.zK)(n),f=(0,be.jh)(n),{savePreferredVersionName:g}=(0,lt.g1)(n),m=[...o,...f.map((function(e){const t=ct(e,p);return{label:e.label,to:`${t.path}${c}${d}`,isActive:()=>e===p.activeVersion,onClick:()=>g(e.name)}})),...a],h=(0,st.Vd)(n)[0],y=t&&m.length>1?(0,l.T)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):h.label,b=t&&m.length>1?void 0:ct(h,p).path;return m.length<=1?(0,u.jsx)(ae,{...i,mobile:t,label:y,to:b,isActive:r?()=>!1:void 0}):(0,u.jsx)(fe,{...i,mobile:t,label:y,to:b,items:m,isActive:r?()=>!1:void 0})}};function dt(e){let{type:t,...n}=e;const r=function(e,t){return e&&"default"!==e?e:"items"in t?"dropdown":"default"}(t,n),o=ut[r];if(!o)throw new Error(`No NavbarItem component found for type "${t}".`);return(0,u.jsx)(o,{...n})}function pt(){const e=(0,j.M)(),t=(0,w.p)().navbar.items;return(0,u.jsx)("ul",{className:"menu__list",children:t.map(((t,n)=>(0,r.createElement)(dt,{mobile:!0,...t,onClick:()=>e.toggle(),key:n})))})}function ft(e){return(0,u.jsx)("button",{...e,type:"button",className:"clean-btn navbar-sidebar__back",children:(0,u.jsx)(l.A,{id:"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel",description:"The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)",children:"\u2190 Back to main menu"})})}function gt(){const e=0===(0,w.p)().navbar.items.length,t=I();return(0,u.jsxs)(u.Fragment,{children:[!e&&(0,u.jsx)(ft,{onClick:()=>t.hide()}),t.content]})}function mt(){const e=(0,j.M)();var t;return void 0===(t=e.shown)&&(t=!0),(0,r.useEffect)((()=>(document.body.style.overflow=t?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[t]),e.shouldRender?(0,u.jsx)(M,{header:(0,u.jsx)(Y,{}),primaryMenu:(0,u.jsx)(pt,{}),secondaryMenu:(0,u.jsx)(gt,{})}):null}const ht={navbarHideable:"navbarHideable_m1mJ",navbarHidden:"navbarHidden_jGov"};function yt(e){return(0,u.jsx)("div",{role:"presentation",...e,className:(0,o.A)("navbar-sidebar__backdrop",e.className)})}function bt(e){let{children:t}=e;const{navbar:{hideOnScroll:n,style:a}}=(0,w.p)(),i=(0,j.M)(),{navbarRef:s,isNavbarVisible:d}=function(e){const[t,n]=(0,r.useState)(e),o=(0,r.useRef)(!1),a=(0,r.useRef)(0),i=(0,r.useCallback)((e=>{null!==e&&(a.current=e.getBoundingClientRect().height)}),[]);return(0,R.Mq)(((t,r)=>{let{scrollY:i}=t;if(!e)return;if(i<a.current)return void n(!0);if(o.current)return void(o.current=!1);const s=r?.scrollY,l=document.documentElement.scrollHeight-a.current,c=window.innerHeight;s&&i>=s?n(!1):i+c<l&&n(!0)})),(0,c.$)((t=>{if(!e)return;const r=t.location.hash;if(r?document.getElementById(r.substring(1)):void 0)return o.current=!0,void n(!1);n(!0)})),{navbarRef:i,isNavbarVisible:t}}(n);return(0,u.jsxs)("nav",{ref:s,"aria-label":(0,l.T)({id:"theme.NavBar.navAriaLabel",message:"Main",description:"The ARIA label for the main navigation"}),className:(0,o.A)("navbar","navbar--fixed-top",n&&[ht.navbarHideable,!d&&ht.navbarHidden],{"navbar--dark":"dark"===a,"navbar--primary":"primary"===a,"navbar-sidebar--show":i.shown}),children:[t,(0,u.jsx)(yt,{onClick:i.toggle}),(0,u.jsx)(mt,{})]})}var vt=n(4609);const wt={errorBoundaryError:"errorBoundaryError_a6uf",errorBoundaryFallback:"errorBoundaryFallback_VBag"};function kt(e){return(0,u.jsx)("button",{type:"button",...e,children:(0,u.jsx)(l.A,{id:"theme.ErrorPageContent.tryAgain",description:"The label of the button to try again rendering when the React error boundary captures an error",children:"Try again"})})}function xt(e){let{error:t}=e;const n=(0,vt.rA)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,u.jsx)("p",{className:wt.errorBoundaryError,children:n})}class St extends r.Component{componentDidCatch(e,t){throw this.props.onError(e,t)}render(){return this.props.children}}const _t="right";function Et(e){let{width:t=30,height:n=30,className:r,...o}=e;return(0,u.jsx)("svg",{className:r,width:t,height:n,viewBox:"0 0 30 30","aria-hidden":"true",...o,children:(0,u.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"})})}function Ct(){const{toggle:e,shown:t}=(0,j.M)();return(0,u.jsx)("button",{onClick:e,"aria-label":(0,l.T)({id:"theme.docs.sidebar.toggleSidebarButtonAriaLabel",message:"Toggle navigation bar",description:"The ARIA label for hamburger menu button of mobile navigation"}),"aria-expanded":t,className:"navbar__toggle clean-btn",type:"button",children:(0,u.jsx)(Et,{})})}const At={colorModeToggle:"colorModeToggle_DEke"};function Tt(e){let{items:t}=e;return(0,u.jsx)(u.Fragment,{children:t.map(((e,t)=>(0,u.jsx)(St,{onError:t=>new Error(`A theme navbar item failed to render.\nPlease double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:\n${JSON.stringify(e,null,2)}`,{cause:t}),children:(0,u.jsx)(dt,{...e})},t)))})}function jt(e){let{left:t,right:n}=e;return(0,u.jsxs)("div",{className:"navbar__inner",children:[(0,u.jsx)("div",{className:"navbar__items",children:t}),(0,u.jsx)("div",{className:"navbar__items navbar__items--right",children:n})]})}function Rt(){const e=(0,j.M)(),t=(0,w.p)().navbar.items,[n,r]=function(e){function t(e){return"left"===(e.position??_t)}return[e.filter(t),e.filter((e=>!t(e)))]}(t),o=t.find((e=>"search"===e.type));return(0,u.jsx)(jt,{left:(0,u.jsxs)(u.Fragment,{children:[!e.disabled&&(0,u.jsx)(Ct,{}),(0,u.jsx)(K,{}),(0,u.jsx)(Tt,{items:n})]}),right:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(Tt,{items:r}),(0,u.jsx)(V,{className:At.colorModeToggle}),!o&&(0,u.jsx)(it,{children:(0,u.jsx)(ot,{})})]})})}function Pt(){return(0,u.jsx)(bt,{children:(0,u.jsx)(Rt,{})})}function Lt(e){let{item:t}=e;const{to:n,href:r,label:o,prependBaseUrlToHref:a,...i}=t,s=(0,X.Ay)(n),l=(0,X.Ay)(r,{forcePrependBaseUrl:!0});return(0,u.jsxs)(Z.A,{className:"footer__link-item",...r?{href:a?l:r}:{to:s},...i,children:[o,r&&!(0,J.A)(r)&&(0,u.jsx)(te.A,{})]})}function Nt(e){let{item:t}=e;return t.html?(0,u.jsx)("li",{className:"footer__item",dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)("li",{className:"footer__item",children:(0,u.jsx)(Lt,{item:t})},t.href??t.to)}function Ot(e){let{column:t}=e;return(0,u.jsxs)("div",{className:"col footer__col",children:[(0,u.jsx)("div",{className:"footer__title",children:t.title}),(0,u.jsx)("ul",{className:"footer__items clean-list",children:t.items.map(((e,t)=>(0,u.jsx)(Nt,{item:e},t)))})]})}function Dt(e){let{columns:t}=e;return(0,u.jsx)("div",{className:"row footer__links",children:t.map(((e,t)=>(0,u.jsx)(Ot,{column:e},t)))})}function It(){return(0,u.jsx)("span",{className:"footer__link-separator",children:"\xb7"})}function Mt(e){let{item:t}=e;return t.html?(0,u.jsx)("span",{className:"footer__link-item",dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)(Lt,{item:t})}function Ft(e){let{links:t}=e;return(0,u.jsx)("div",{className:"footer__links text--center",children:(0,u.jsx)("div",{className:"footer__links",children:t.map(((e,n)=>(0,u.jsxs)(r.Fragment,{children:[(0,u.jsx)(Mt,{item:e}),t.length!==n+1&&(0,u.jsx)(It,{})]},n)))})})}function zt(e){let{links:t}=e;return function(e){return"title"in e[0]}(t)?(0,u.jsx)(Dt,{columns:t}):(0,u.jsx)(Ft,{links:t})}var Bt=n(975);const $t="footerLogoLink_BH7S";function Ut(e){let{logo:t}=e;const{withBaseUrl:n}=(0,X.hH)(),r={light:n(t.src),dark:n(t.srcDark??t.src)};return(0,u.jsx)(Bt.A,{className:(0,o.A)("footer__logo",t.className),alt:t.alt,sources:r,width:t.width,height:t.height,style:t.style})}function qt(e){let{logo:t}=e;return t.href?(0,u.jsx)(Z.A,{href:t.href,className:$t,target:t.target,children:(0,u.jsx)(Ut,{logo:t})}):(0,u.jsx)(Ut,{logo:t})}function Gt(e){let{copyright:t}=e;return(0,u.jsx)("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}})}function Ht(e){let{style:t,links:n,logo:r,copyright:a}=e;return(0,u.jsx)("footer",{className:(0,o.A)("footer",{"footer--dark":"dark"===t}),children:(0,u.jsxs)("div",{className:"container container-fluid",children:[n,(r||a)&&(0,u.jsxs)("div",{className:"footer__bottom text--center",children:[r&&(0,u.jsx)("div",{className:"margin-bottom--sm",children:r}),a]})]})})}function Vt(){const{footer:e}=(0,w.p)();if(!e)return null;const{copyright:t,links:n,logo:r,style:o}=e;return(0,u.jsx)(Ht,{style:o,links:n&&n.length>0&&(0,u.jsx)(zt,{links:n}),logo:r&&(0,u.jsx)(qt,{logo:r}),copyright:t&&(0,u.jsx)(Gt,{copyright:t})})}const Wt=r.memo(Vt),Kt=(0,P.fM)([F.a,k.o,R.Tv,lt.VQ,i.Jx,function(e){let{children:t}=e;return(0,u.jsx)(L.y_,{children:(0,u.jsx)(j.e,{children:(0,u.jsx)(O,{children:t})})})}]);function Qt(e){let{children:t}=e;return(0,u.jsx)(Kt,{children:t})}var Yt=n(5225);function Zt(e){let{error:t,tryAgain:n}=e;return(0,u.jsx)("main",{className:"container margin-vert--xl",children:(0,u.jsx)("div",{className:"row",children:(0,u.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,u.jsx)(Yt.A,{as:"h1",className:"hero__title",children:(0,u.jsx)(l.A,{id:"theme.ErrorPageContent.title",description:"The title of the fallback page when the page crashed",children:"This page crashed."})}),(0,u.jsx)("div",{className:"margin-vert--lg",children:(0,u.jsx)(kt,{onClick:n,className:"button button--primary shadow--lw"})}),(0,u.jsx)("hr",{}),(0,u.jsx)("div",{className:"margin-vert--md",children:(0,u.jsx)(xt,{error:t})})]})})})}const Xt={mainWrapper:"mainWrapper_z2l0"};function Jt(e){const{children:t,noFooter:n,wrapperClassName:r,title:s,description:l}=e;return(0,y.J)(),(0,u.jsxs)(Qt,{children:[(0,u.jsx)(i.be,{title:s,description:l}),(0,u.jsx)(v,{}),(0,u.jsx)(T,{}),(0,u.jsx)(Pt,{}),(0,u.jsx)("div",{id:d,className:(0,o.A)(h.G.wrapper.main,Xt.mainWrapper,r),children:(0,u.jsx)(a.A,{fallback:e=>(0,u.jsx)(Zt,{...e}),children:t})}),!n&&(0,u.jsx)(Wt,{})]})}},20:(e,t,n)=>{"use strict";n.d(t,{A:()=>u});n(6540);var r=n(4783),o=n(8180),a=n(7639),i=n(6957),s=n(975),l=n(4848);function c(e){let{logo:t,alt:n,imageClassName:r}=e;const a={light:(0,o.Ay)(t.src),dark:(0,o.Ay)(t.srcDark||t.src)},i=(0,l.jsx)(s.A,{className:t.className,sources:a,height:t.height,width:t.width,alt:n,style:t.style});return r?(0,l.jsx)("div",{className:r,children:i}):i}function u(e){const{siteConfig:{title:t}}=(0,a.A)(),{navbar:{title:n,logo:s}}=(0,i.p)(),{imageClassName:u,titleClassName:d,...p}=e,f=(0,o.Ay)(s?.href||"/"),g=n?"":t,m=s?.alt??g;return(0,l.jsxs)(r.A,{to:f,...p,...s?.target&&{target:s.target},children:[s&&(0,l.jsx)(c,{logo:s,alt:m,imageClassName:u}),null!=n&&(0,l.jsx)("b",{className:d,children:n})]})}},1210:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});n(6540);var r=n(1141),o=n(4848);function a(e){let{locale:t,version:n,tag:a}=e;const i=t;return(0,o.jsxs)(r.A,{children:[t&&(0,o.jsx)("meta",{name:"docusaurus_locale",content:t}),n&&(0,o.jsx)("meta",{name:"docusaurus_version",content:n}),a&&(0,o.jsx)("meta",{name:"docusaurus_tag",content:a}),i&&(0,o.jsx)("meta",{name:"docsearch:language",content:i}),n&&(0,o.jsx)("meta",{name:"docsearch:version",content:n}),a&&(0,o.jsx)("meta",{name:"docsearch:docusaurus_tag",content:a})]})}},975:(e,t,n)=>{"use strict";n.d(t,{A:()=>u});var r=n(6540),o=n(4164),a=n(1062),i=n(7710);const s={themedComponent:"themedComponent_mlkZ","themedComponent--light":"themedComponent--light_NVdE","themedComponent--dark":"themedComponent--dark_xIcU"};var l=n(4848);function c(e){let{className:t,children:n}=e;const c=(0,a.A)(),{colorMode:u}=(0,i.G)();return(0,l.jsx)(l.Fragment,{children:(c?"dark"===u?["dark"]:["light"]:["light","dark"]).map((e=>{const a=n({theme:e,className:(0,o.A)(t,s.themedComponent,s[`themedComponent--${e}`])});return(0,l.jsx)(r.Fragment,{children:a},e)}))})}function u(e){const{sources:t,className:n,alt:r,...o}=e;return(0,l.jsx)(c,{className:n,children:e=>{let{theme:n,className:a}=e;return(0,l.jsx)("img",{src:t[n],alt:r,className:a,...o})}})}},4549:(e,t,n)=>{"use strict";n.d(t,{N:()=>y,u:()=>c});var r=n(6540),o=n(1712),a=n(6494),i=n(6350),s=n(4848);const l="ease-in-out";function c(e){let{initialState:t}=e;const[n,o]=(0,r.useState)(t??!1),a=(0,r.useCallback)((()=>{o((e=>!e))}),[]);return{collapsed:n,setCollapsed:o,toggleCollapsed:a}}const u={display:"none",overflow:"hidden",height:"0px"},d={display:"block",overflow:"visible",height:"auto"};function p(e,t){const n=t?u:d;e.style.display=n.display,e.style.overflow=n.overflow,e.style.height=n.height}function f(e){let{collapsibleRef:t,collapsed:n,animation:o}=e;const a=(0,r.useRef)(!1);(0,r.useEffect)((()=>{const e=t.current;function r(){const t=e.scrollHeight,n=o?.duration??function(e){if((0,i.O)())return 1;const t=e/36;return Math.round(10*(4+15*t**.25+t/5))}(t);return{transition:`height ${n}ms ${o?.easing??l}`,height:`${t}px`}}function s(){const t=r();e.style.transition=t.transition,e.style.height=t.height}if(!a.current)return p(e,n),void(a.current=!0);return e.style.willChange="height",function(){const t=requestAnimationFrame((()=>{n?(s(),requestAnimationFrame((()=>{e.style.height=u.height,e.style.overflow=u.overflow}))):(e.style.display="block",requestAnimationFrame((()=>{s()})))}));return()=>cancelAnimationFrame(t)}()}),[t,n,o])}function g(e){if(!o.A.canUseDOM)return e?u:d}function m(e){let{as:t="div",collapsed:n,children:o,animation:a,onCollapseTransitionEnd:i,className:l,disableSSRStyle:c}=e;const u=(0,r.useRef)(null);return f({collapsibleRef:u,collapsed:n,animation:a}),(0,s.jsx)(t,{ref:u,style:c?void 0:g(n),onTransitionEnd:e=>{"height"===e.propertyName&&(p(u.current,n),i?.(n))},className:l,children:o})}function h(e){let{collapsed:t,...n}=e;const[o,i]=(0,r.useState)(!t),[l,c]=(0,r.useState)(t);return(0,a.A)((()=>{t||i(!0)}),[t]),(0,a.A)((()=>{o&&c(t)}),[o,t]),o?(0,s.jsx)(m,{...n,collapsed:l}):null}function y(e){let{lazy:t,...n}=e;const r=t?h:m;return(0,s.jsx)(r,{...n})}},2:(e,t,n)=>{"use strict";n.d(t,{M:()=>m,o:()=>g});var r=n(6540),o=n(1062),a=n(9900),i=n(4799),s=n(6957),l=n(4848);const c=(0,a.Wf)("docusaurus.announcement.dismiss"),u=(0,a.Wf)("docusaurus.announcement.id"),d=()=>"true"===c.get(),p=e=>c.set(String(e)),f=r.createContext(null);function g(e){let{children:t}=e;const n=function(){const{announcementBar:e}=(0,s.p)(),t=(0,o.A)(),[n,a]=(0,r.useState)((()=>!!t&&d()));(0,r.useEffect)((()=>{a(d())}),[]);const i=(0,r.useCallback)((()=>{p(!0),a(!0)}),[]);return(0,r.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=u.get();"annoucement-bar"===n&&(n="announcement-bar");const r=t!==n;u.set(t),r&&p(!1),!r&&d()||a(!1)}),[e]),(0,r.useMemo)((()=>({isActive:!!e&&!n,close:i})),[e,n,i])}();return(0,l.jsx)(f.Provider,{value:n,children:t})}function m(){const e=(0,r.useContext)(f);if(!e)throw new i.dV("AnnouncementBarProvider");return e}},7710:(e,t,n)=>{"use strict";n.d(t,{G:()=>y,a:()=>h});var r=n(6540),o=n(1712),a=n(4799),i=n(9900),s=n(6957),l=n(4848);const c=r.createContext(void 0),u="theme",d=(0,i.Wf)(u),p={light:"light",dark:"dark"},f=e=>e===p.dark?p.dark:p.light,g=e=>o.A.canUseDOM?f(document.documentElement.getAttribute("data-theme")):f(e),m=e=>{d.set(f(e))};function h(e){let{children:t}=e;const n=function(){const{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:n}}=(0,s.p)(),[o,a]=(0,r.useState)(g(e));(0,r.useEffect)((()=>{t&&d.del()}),[t]);const i=(0,r.useCallback)((function(t,r){void 0===r&&(r={});const{persist:o=!0}=r;t?(a(t),o&&m(t)):(a(n?window.matchMedia("(prefers-color-scheme: dark)").matches?p.dark:p.light:e),d.del())}),[n,e]);(0,r.useEffect)((()=>{document.documentElement.setAttribute("data-theme",f(o))}),[o]),(0,r.useEffect)((()=>{if(t)return;const e=e=>{if(e.key!==u)return;const t=d.get();null!==t&&i(f(t))};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)}),[t,i]);const l=(0,r.useRef)(!1);return(0,r.useEffect)((()=>{if(t&&!n)return;const e=window.matchMedia("(prefers-color-scheme: dark)"),r=()=>{window.matchMedia("print").matches||l.current?l.current=window.matchMedia("print").matches:i(null)};return e.addListener(r),()=>e.removeListener(r)}),[i,t,n]),(0,r.useMemo)((()=>({colorMode:o,setColorMode:i,get isDarkTheme(){return o===p.dark},setLightTheme(){i(p.light)},setDarkTheme(){i(p.dark)}})),[o,i])}();return(0,l.jsx)(c.Provider,{value:n,children:t})}function y(){const e=(0,r.useContext)(c);if(null==e)throw new a.dV("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},1938:(e,t,n)=>{"use strict";n.d(t,{M:()=>f,e:()=>p});var r=n(6540),o=n(763),a=n(2216),i=n(2814),s=n(6957),l=n(4799),c=n(4848);const u=r.createContext(void 0);function d(){const e=function(){const e=(0,o.YL)(),{items:t}=(0,s.p)().navbar;return 0===t.length&&!e.component}(),t=(0,a.l)(),n=!e&&"mobile"===t,[l,c]=(0,r.useState)(!1);(0,i.$Z)((()=>{if(l)return c(!1),!1}));const u=(0,r.useCallback)((()=>{c((e=>!e))}),[]);return(0,r.useEffect)((()=>{"desktop"===t&&c(!1)}),[t]),(0,r.useMemo)((()=>({disabled:e,shouldRender:n,toggle:u,shown:l})),[e,n,u,l])}function p(e){let{children:t}=e;const n=d();return(0,c.jsx)(u.Provider,{value:n,children:t})}function f(){const e=r.useContext(u);if(void 0===e)throw new l.dV("NavbarMobileSidebarProvider");return e}},763:(e,t,n)=>{"use strict";n.d(t,{GX:()=>c,YL:()=>l,y_:()=>s});var r=n(6540),o=n(4799),a=n(4848);const i=r.createContext(null);function s(e){let{children:t}=e;const n=(0,r.useState)({component:null,props:null});return(0,a.jsx)(i.Provider,{value:n,children:t})}function l(){const e=(0,r.useContext)(i);if(!e)throw new o.dV("NavbarSecondaryMenuContentProvider");return e[0]}function c(e){let{component:t,props:n}=e;const a=(0,r.useContext)(i);if(!a)throw new o.dV("NavbarSecondaryMenuContentProvider");const[,s]=a,l=(0,o.Be)(n);return(0,r.useEffect)((()=>{s({component:t,props:l})}),[s,t,l]),(0,r.useEffect)((()=>()=>s({component:null,props:null})),[s]),null}},9503:(e,t,n)=>{"use strict";n.d(t,{w:()=>o,J:()=>a});var r=n(6540);const o="navigation-with-keyboard";function a(){(0,r.useEffect)((()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(o),"mousedown"===e.type&&document.body.classList.remove(o)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(o),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},2216:(e,t,n)=>{"use strict";n.d(t,{l:()=>s});var r=n(6540),o=n(1712);const a={desktop:"desktop",mobile:"mobile",ssr:"ssr"},i=996;function s(e){let{desktopBreakpoint:t=i}=void 0===e?{}:e;const[n,s]=(0,r.useState)((()=>"ssr"));return(0,r.useEffect)((()=>{function e(){s(function(e){if(!o.A.canUseDOM)throw new Error("getWindowSize() should only be called after React hydration");return window.innerWidth>e?a.desktop:a.mobile}(t))}return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[t]),n}},8630:(e,t,n)=>{"use strict";n.d(t,{G:()=>r});const r={page:{blogListPage:"blog-list-page",blogPostPage:"blog-post-page",blogTagsListPage:"blog-tags-list-page",blogTagPostListPage:"blog-tags-post-list-page",blogAuthorsListPage:"blog-authors-list-page",blogAuthorsPostsPage:"blog-authors-posts-page",docsDocPage:"docs-doc-page",docsTagsListPage:"docs-tags-list-page",docsTagDocListPage:"docs-tags-doc-list-page",mdxPage:"mdx-page"},wrapper:{main:"main-wrapper",blogPages:"blog-wrapper",docsPages:"docs-wrapper",mdxPages:"mdx-wrapper"},common:{editThisPage:"theme-edit-this-page",lastUpdated:"theme-last-updated",backToTopButton:"theme-back-to-top-button",codeBlock:"theme-code-block",admonition:"theme-admonition",unlistedBanner:"theme-unlisted-banner",draftBanner:"theme-draft-banner",admonitionType:e=>`theme-admonition-${e}`},layout:{},docs:{docVersionBanner:"theme-doc-version-banner",docVersionBadge:"theme-doc-version-badge",docBreadcrumbs:"theme-doc-breadcrumbs",docMarkdown:"theme-doc-markdown",docTocMobile:"theme-doc-toc-mobile",docTocDesktop:"theme-doc-toc-desktop",docFooter:"theme-doc-footer",docFooterTagsRow:"theme-doc-footer-tags-row",docFooterEditMetaRow:"theme-doc-footer-edit-meta-row",docSidebarContainer:"theme-doc-sidebar-container",docSidebarMenu:"theme-doc-sidebar-menu",docSidebarItemCategory:"theme-doc-sidebar-item-category",docSidebarItemLink:"theme-doc-sidebar-item-link",docSidebarItemCategoryLevel:e=>`theme-doc-sidebar-item-category-level-${e}`,docSidebarItemLinkLevel:e=>`theme-doc-sidebar-item-link-level-${e}`},blog:{blogFooterTagsRow:"theme-blog-footer-tags-row",blogFooterEditMetaRow:"theme-blog-footer-edit-meta-row"},pages:{pageFooterEditMetaRow:"theme-pages-footer-edit-meta-row"}}},6350:(e,t,n)=>{"use strict";function r(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}n.d(t,{O:()=>r})},2814:(e,t,n)=>{"use strict";n.d(t,{$Z:()=>i,aZ:()=>l});var r=n(6540),o=n(6347),a=n(4799);function i(e){!function(e){const t=(0,o.W6)(),n=(0,a._q)(e);(0,r.useEffect)((()=>t.block(((e,t)=>n(e,t)))),[t,n])}(((t,n)=>{if("POP"===n)return e(t,n)}))}function s(e){const t=(0,o.W6)();return(0,r.useSyncExternalStore)(t.listen,(()=>e(t)),(()=>e(t)))}function l(e){return s((t=>null===e?null:new URLSearchParams(t.location.search).get(e)))}},5167:(e,t,n)=>{"use strict";function r(e,t){return void 0===t&&(t=(e,t)=>e===t),e.filter(((n,r)=>e.findIndex((e=>t(e,n)))!==r))}function o(e){return Array.from(new Set(e))}function a(e,t){const n={};let r=0;for(const o of e){const e=t(o,r);n[e]??=[],n[e].push(o),r+=1}return n}n.d(t,{$z:()=>a,XI:()=>r,sb:()=>o})},6644:(e,t,n)=>{"use strict";n.d(t,{e3:()=>p,be:()=>u,Jx:()=>f});var r=n(6540),o=n(4164),a=n(1141),i=n(3512),s=n(8180),l=n(7639);var c=n(4848);function u(e){let{title:t,description:n,keywords:r,image:o,children:i}=e;const u=function(e){const{siteConfig:t}=(0,l.A)(),{title:n,titleDelimiter:r}=t;return e?.trim().length?`${e.trim()} ${r} ${n}`:n}(t),{withBaseUrl:d}=(0,s.hH)(),p=o?d(o,{absolute:!0}):void 0;return(0,c.jsxs)(a.A,{children:[t&&(0,c.jsx)("title",{children:u}),t&&(0,c.jsx)("meta",{property:"og:title",content:u}),n&&(0,c.jsx)("meta",{name:"description",content:n}),n&&(0,c.jsx)("meta",{property:"og:description",content:n}),r&&(0,c.jsx)("meta",{name:"keywords",content:Array.isArray(r)?r.join(","):r}),p&&(0,c.jsx)("meta",{property:"og:image",content:p}),p&&(0,c.jsx)("meta",{name:"twitter:image",content:p}),i]})}const d=r.createContext(void 0);function p(e){let{className:t,children:n}=e;const i=r.useContext(d),s=(0,o.A)(i,t);return(0,c.jsxs)(d.Provider,{value:s,children:[(0,c.jsx)(a.A,{children:(0,c.jsx)("html",{className:s})}),n]})}function f(e){let{children:t}=e;const n=(0,i.A)(),r=`plugin-${n.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,"")}`;const a=`plugin-id-${n.plugin.id}`;return(0,c.jsx)(p,{className:(0,o.A)(r,a),children:t})}},4799:(e,t,n)=>{"use strict";n.d(t,{Be:()=>c,ZC:()=>s,_q:()=>i,dV:()=>l,fM:()=>u});var r=n(6540),o=n(6494),a=n(4848);function i(e){const t=(0,r.useRef)(e);return(0,o.A)((()=>{t.current=e}),[e]),(0,r.useCallback)((function(){return t.current(...arguments)}),[])}function s(e){const t=(0,r.useRef)();return(0,o.A)((()=>{t.current=e})),t.current}class l extends Error{constructor(e,t){super(),this.name="ReactContextError",this.message=`Hook ${this.stack?.split("\n")[1]?.match(/at (?:\w+\.)?(?<name>\w+)/)?.groups.name??""} is called outside the <${e}>. ${t??""}`}}function c(e){const t=Object.entries(e);return t.sort(((e,t)=>e[0].localeCompare(t[0]))),(0,r.useMemo)((()=>e),t.flat())}function u(e){return t=>{let{children:n}=t;return(0,a.jsx)(a.Fragment,{children:e.reduceRight(((e,t)=>(0,a.jsx)(t,{children:e})),n)})}}},260:(e,t,n)=>{"use strict";n.d(t,{Dt:()=>s,ys:()=>i});var r=n(6540),o=n(2413),a=n(7639);function i(e,t){const n=e=>(!e||e.endsWith("/")?e:`${e}/`)?.toLowerCase();return n(e)===n(t)}function s(){const{baseUrl:e}=(0,a.A)().siteConfig;return(0,r.useMemo)((()=>function(e){let{baseUrl:t,routes:n}=e;function r(e){return e.path===t&&!0===e.exact}function o(e){return e.path===t&&!e.exact}return function e(t){if(0===t.length)return;return t.find(r)||e(t.filter(o).flatMap((e=>e.routes??[])))}(n)}({routes:o.A,baseUrl:e})),[e])}},4245:(e,t,n)=>{"use strict";n.d(t,{Mq:()=>f,Tv:()=>u,a_:()=>g,gk:()=>m});var r=n(6540),o=n(1712),a=n(1062),i=n(6494),s=n(4799),l=n(4848);const c=r.createContext(void 0);function u(e){let{children:t}=e;const n=function(){const e=(0,r.useRef)(!0);return(0,r.useMemo)((()=>({scrollEventsEnabledRef:e,enableScrollEvents:()=>{e.current=!0},disableScrollEvents:()=>{e.current=!1}})),[])}();return(0,l.jsx)(c.Provider,{value:n,children:t})}function d(){const e=(0,r.useContext)(c);if(null==e)throw new s.dV("ScrollControllerProvider");return e}const p=()=>o.A.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function f(e,t){void 0===t&&(t=[]);const{scrollEventsEnabledRef:n}=d(),o=(0,r.useRef)(p()),a=(0,s._q)(e);(0,r.useEffect)((()=>{const e=()=>{if(!n.current)return;const e=p();a(e,o.current),o.current=e},t={passive:!0};return e(),window.addEventListener("scroll",e,t),()=>window.removeEventListener("scroll",e,t)}),[a,n,...t])}function g(){const e=d(),t=function(){const e=(0,r.useRef)({elem:null,top:0}),t=(0,r.useCallback)((t=>{e.current={elem:t,top:t.getBoundingClientRect().top}}),[]),n=(0,r.useCallback)((()=>{const{current:{elem:t,top:n}}=e;if(!t)return{restored:!1};const r=t.getBoundingClientRect().top-n;return r&&window.scrollBy({left:0,top:r}),e.current={elem:null,top:0},{restored:0!==r}}),[]);return(0,r.useMemo)((()=>({save:t,restore:n})),[n,t])}(),n=(0,r.useRef)(void 0),o=(0,r.useCallback)((r=>{t.save(r),e.disableScrollEvents(),n.current=()=>{const{restored:r}=t.restore();if(n.current=void 0,r){const t=()=>{e.enableScrollEvents(),window.removeEventListener("scroll",t)};window.addEventListener("scroll",t)}else e.enableScrollEvents()}}),[e,t]);return(0,i.A)((()=>{queueMicrotask((()=>n.current?.()))})),{blockElementScrollPositionUntilNextRender:o}}function m(){const e=(0,r.useRef)(null),t=(0,a.A)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:n=>{e.current=t?function(e){return window.scrollTo({top:e,behavior:"smooth"}),()=>{}}(n):function(e){let t=null;const n=document.documentElement.scrollTop>e;return function r(){const o=document.documentElement.scrollTop;(n&&o>e||!n&&o<e)&&(t=requestAnimationFrame(r),window.scrollTo(0,Math.floor(.85*(o-e))+e))}(),()=>t&&cancelAnimationFrame(t)}(n)},cancelScroll:()=>e.current?.()}}},9900:(e,t,n)=>{"use strict";n.d(t,{Wf:()=>u,Dv:()=>d});var r=n(6540);const o=JSON.parse('{"N":"localStorage","M":""}'),a=o.N;function i(e){let{key:t,oldValue:n,newValue:r,storage:o}=e;if(n===r)return;const a=document.createEvent("StorageEvent");a.initStorageEvent("storage",!1,!1,t,n,r,window.location.href,o),window.dispatchEvent(a)}function s(e){if(void 0===e&&(e=a),"undefined"==typeof window)throw new Error("Browser storage is not available on Node.js/Docusaurus SSR process.");if("none"===e)return null;try{return window[e]}catch(n){return t=n,l||(console.warn("Docusaurus browser storage is not available.\nPossible reasons: running Docusaurus in an iframe, in an incognito browser session, or using too strict browser privacy settings.",t),l=!0),null}var t}let l=!1;const c={get:()=>null,set:()=>{},del:()=>{},listen:()=>()=>{}};function u(e,t){const n=`${e}${o.M}`;if("undefined"==typeof window)return function(e){function t(){throw new Error(`Illegal storage API usage for storage key "${e}".\nDocusaurus storage APIs are not supposed to be called on the server-rendering process.\nPlease only call storage APIs in effects and event handlers.`)}return{get:t,set:t,del:t,listen:t}}(n);const r=s(t?.persistence);return null===r?c:{get:()=>{try{return r.getItem(n)}catch(e){return console.error(`Docusaurus storage error, can't get key=${n}`,e),null}},set:e=>{try{const t=r.getItem(n);r.setItem(n,e),i({key:n,oldValue:t,newValue:e,storage:r})}catch(t){console.error(`Docusaurus storage error, can't set ${n}=${e}`,t)}},del:()=>{try{const e=r.getItem(n);r.removeItem(n),i({key:n,oldValue:e,newValue:null,storage:r})}catch(e){console.error(`Docusaurus storage error, can't delete key=${n}`,e)}},listen:e=>{try{const t=t=>{t.storageArea===r&&t.key===n&&e(t)};return window.addEventListener("storage",t),()=>window.removeEventListener("storage",t)}catch(t){return console.error(`Docusaurus storage error, can't listen for changes of key=${n}`,t),()=>{}}}}}function d(e,t){const n=(0,r.useRef)((()=>null===e?c:u(e,t))).current(),o=(0,r.useCallback)((e=>"undefined"==typeof window?()=>{}:n.listen(e)),[n]);return[(0,r.useSyncExternalStore)(o,(()=>"undefined"==typeof window?null:n.get()),(()=>null)),n]}},2098:(e,t,n)=>{"use strict";n.d(t,{o:()=>i});var r=n(7639),o=n(6347),a=n(4609);function i(){const{siteConfig:{baseUrl:e,url:t,trailingSlash:n},i18n:{defaultLocale:i,currentLocale:s}}=(0,r.A)(),{pathname:l}=(0,o.zy)(),c=(0,a.Ks)(l,{trailingSlash:n,baseUrl:e}),u=s===i?e:e.replace(`/${s}/`,"/"),d=c.replace(e,"");return{createUrl:function(e){let{locale:n,fullyQualified:r}=e;return`${r?t:""}${function(e){return e===i?`${u}`:`${u}${e}/`}(n)}${d}`}}}},4067:(e,t,n)=>{"use strict";n.d(t,{$:()=>i});var r=n(6540),o=n(6347),a=n(4799);function i(e){const t=(0,o.zy)(),n=(0,a.ZC)(t),i=(0,a._q)(e);(0,r.useEffect)((()=>{n&&t!==n&&i({location:t,previousLocation:n})}),[i,t,n])}},6957:(e,t,n)=>{"use strict";n.d(t,{p:()=>o});var r=n(7639);function o(){return(0,r.A)().siteConfig.themeConfig}},4356:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addTrailingSlash=o,t.default=function(e,t){const{trailingSlash:n,baseUrl:r}=t;if(e.startsWith("#"))return e;if(void 0===n)return e;const[i]=e.split(/[#?]/),s="/"===i||i===r?i:(l=i,c=n,c?o(l):a(l));var l,c;return e.replace(i,s)},t.addLeadingSlash=function(e){return(0,r.addPrefix)(e,"/")},t.removeTrailingSlash=a;const r=n(835);function o(e){return e.endsWith("/")?e:`${e}/`}function a(e){return(0,r.removeSuffix)(e,"/")}},8274:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=function e(t){if(t.cause)return[t,...e(t.cause)];return[t]}},4609:(e,t,n)=>{"use strict";t.rA=t.Ks=t.LU=void 0;const r=n(1635);t.LU="__blog-post-container";var o=n(4356);Object.defineProperty(t,"Ks",{enumerable:!0,get:function(){return r.__importDefault(o).default}});var a=n(835);var i=n(8274);Object.defineProperty(t,"rA",{enumerable:!0,get:function(){return i.getErrorCausalChain}})},835:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addPrefix=function(e,t){return e.startsWith(t)?e:`${t}${e}`},t.removeSuffix=function(e,t){if(""===t)return e;return e.endsWith(t)?e.slice(0,-t.length):e},t.addSuffix=function(e,t){return e.endsWith(t)?e:`${e}${t}`},t.removePrefix=function(e,t){return e.startsWith(t)?e.slice(t.length):e}},5990:(e,t,n)=>{"use strict";n.d(t,{A:()=>i});n(6540);var r=n(5391);const o={loadingRing:"loadingRing_RJI3","loading-ring":"loading-ring_FB5o"};var a=n(4848);function i(e){let{className:t}=e;return(0,a.jsxs)("div",{className:(0,r.A)(o.loadingRing,t),children:[(0,a.jsx)("div",{}),(0,a.jsx)("div",{}),(0,a.jsx)("div",{}),(0,a.jsx)("div",{})]})}},1538:(e,t,n)=>{"use strict";n.d(t,{k:()=>E,w:()=>C});const r=Symbol("Comlink.proxy"),o=Symbol("Comlink.endpoint"),a=Symbol("Comlink.releaseProxy"),i=Symbol("Comlink.finalizer"),s=Symbol("Comlink.thrown"),l=e=>"object"==typeof e&&null!==e||"function"==typeof e,c=new Map([["proxy",{canHandle:e=>l(e)&&e[r],serialize(e){const{port1:t,port2:n}=new MessageChannel;return u(e,t),[n,[n]]},deserialize:e=>(e.start(),p(e))}],["throw",{canHandle:e=>l(e)&&s in e,serialize({value:e}){let t;return t=e instanceof Error?{isError:!0,value:{message:e.message,name:e.name,stack:e.stack}}:{isError:!1,value:e},[t,[]]},deserialize(e){if(e.isError)throw Object.assign(new Error(e.value.message),e.value);throw e.value}}]]);function u(e,t=globalThis,n=["*"]){t.addEventListener("message",(function o(a){if(!a||!a.data)return;if(!function(e,t){for(const n of e){if(t===n||"*"===n)return!0;if(n instanceof RegExp&&n.test(t))return!0}return!1}(n,a.origin))return void console.warn(`Invalid origin '${a.origin}' for comlink proxy`);const{id:l,type:c,path:p}=Object.assign({path:[]},a.data),f=(a.data.argumentList||[]).map(k);let g;try{const t=p.slice(0,-1).reduce(((e,t)=>e[t]),e),n=p.reduce(((e,t)=>e[t]),e);switch(c){case"GET":g=n;break;case"SET":t[p.slice(-1)[0]]=k(a.data.value),g=!0;break;case"APPLY":g=n.apply(t,f);break;case"CONSTRUCT":g=function(e){return Object.assign(e,{[r]:!0})}(new n(...f));break;case"ENDPOINT":{const{port1:t,port2:n}=new MessageChannel;u(e,n),g=function(e,t){return v.set(e,t),e}(t,[t])}break;case"RELEASE":g=void 0;break;default:return}}catch(m){g={value:m,[s]:0}}Promise.resolve(g).catch((e=>({value:e,[s]:0}))).then((n=>{const[r,a]=w(n);t.postMessage(Object.assign(Object.assign({},r),{id:l}),a),"RELEASE"===c&&(t.removeEventListener("message",o),d(t),i in e&&"function"==typeof e[i]&&e[i]())})).catch((e=>{const[n,r]=w({value:new TypeError("Unserializable return value"),[s]:0});t.postMessage(Object.assign(Object.assign({},n),{id:l}),r)}))})),t.start&&t.start()}function d(e){(function(e){return"MessagePort"===e.constructor.name})(e)&&e.close()}function p(e,t){const n=new Map;return e.addEventListener("message",(function(e){const{data:t}=e;if(!t||!t.id)return;const r=n.get(t.id);if(r)try{r(t)}finally{n.delete(t.id)}})),y(e,n,[],t)}function f(e){if(e)throw new Error("Proxy has been released and is not useable")}function g(e){return x(e,new Map,{type:"RELEASE"}).then((()=>{d(e)}))}const m=new WeakMap,h="FinalizationRegistry"in globalThis&&new FinalizationRegistry((e=>{const t=(m.get(e)||0)-1;m.set(e,t),0===t&&g(e)}));function y(e,t,n=[],r=function(){}){let i=!1;const s=new Proxy(r,{get(r,o){if(f(i),o===a)return()=>{!function(e){h&&h.unregister(e)}(s),g(e),t.clear(),i=!0};if("then"===o){if(0===n.length)return{then:()=>s};const r=x(e,t,{type:"GET",path:n.map((e=>e.toString()))}).then(k);return r.then.bind(r)}return y(e,t,[...n,o])},set(r,o,a){f(i);const[s,l]=w(a);return x(e,t,{type:"SET",path:[...n,o].map((e=>e.toString())),value:s},l).then(k)},apply(r,a,s){f(i);const l=n[n.length-1];if(l===o)return x(e,t,{type:"ENDPOINT"}).then(k);if("bind"===l)return y(e,t,n.slice(0,-1));const[c,u]=b(s);return x(e,t,{type:"APPLY",path:n.map((e=>e.toString())),argumentList:c},u).then(k)},construct(r,o){f(i);const[a,s]=b(o);return x(e,t,{type:"CONSTRUCT",path:n.map((e=>e.toString())),argumentList:a},s).then(k)}});return function(e,t){const n=(m.get(t)||0)+1;m.set(t,n),h&&h.register(e,t,e)}(s,e),s}function b(e){const t=e.map(w);return[t.map((e=>e[0])),(n=t.map((e=>e[1])),Array.prototype.concat.apply([],n))];var n}const v=new WeakMap;function w(e){for(const[t,n]of c)if(n.canHandle(e)){const[r,o]=n.serialize(e);return[{type:"HANDLER",name:t,value:r},o]}return[{type:"RAW",value:e},v.get(e)||[]]}function k(e){switch(e.type){case"HANDLER":return c.get(e.name).deserialize(e.value);case"RAW":return e.value}}function x(e,t,n,r){return new Promise((o=>{const a=new Array(4).fill(0).map((()=>Math.floor(Math.random()*Number.MAX_SAFE_INTEGER).toString(16))).join("-");t.set(a,o),e.start&&e.start(),e.postMessage(Object.assign({id:a},n),r)}))}let S;function _(){return S||(S=(async()=>{const e=p(new Worker(new URL(n.p+n.u(7812),n.b)));return await new e})()),S}async function E(e,t){{const n=await _();await n.fetchIndexes(e,t)}}async function C(e,t,n){return(await _()).search(e,t,n)}},5268:(e,t,n)=>{"use strict";function r(e){return e.join(" \u203a ")}n.d(t,{$:()=>r})},1892:(e,t,n)=>{"use strict";function r(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}n.d(t,{Z:()=>r})},6323:(e,t,n)=>{"use strict";function r(e,t){const n=[];for(const r of Object.values(e))r[t]&&n.push(...r[t].position);return n.sort(((e,t)=>e[0]-t[0]||t[1]-e[1]))}n.d(t,{g:()=>r})},3032:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(1892);function o(e,t,n){const a=[];for(const i of t){const n=e.toLowerCase().indexOf(i);if(n>=0){n>0&&a.push(o(e.substr(0,n),t)),a.push(`<mark>${(0,r.Z)(e.substr(n,i.length))}</mark>`);const s=n+i.length;s<e.length&&a.push(o(e.substr(s),t));break}}return 0===a.length?n?`<mark>${(0,r.Z)(e)}</mark>`:(0,r.Z)(e):a.join("")}},5928:(e,t,n)=>{"use strict";n.d(t,{C:()=>l});var r=n(1892),o=n(3032);const a=/\w+|\p{Unified_Ideograph}/u;function i(e){const t=[];let n=0,r=e;for(;r.length>0;){const o=r.match(a);if(!o){t.push(r);break}o.index>0&&t.push(r.substring(0,o.index)),t.push(o[0]),n+=o.index+o[0].length,r=e.substring(n)}return t}var s=n(5196);function l(e,t,n,a){void 0===a&&(a=s.rG);const{chunkIndex:l,chunks:c}=function(e,t,n){const a=[];let s=0,l=0,c=-1;for(;s<t.length;){const[u,d]=t[s];if(s+=1,!(u<l)){if(u>l){const t=i(e.substring(l,u)).map((e=>({html:(0,r.Z)(e),textLength:e.length})));for(const e of t)a.push(e)}-1===c&&(c=a.length),l=u+d,a.push({html:(0,o.Z)(e.substring(u,l),n,!0),textLength:d})}}if(l<e.length){const t=i(e.substring(l)).map((e=>({html:(0,r.Z)(e),textLength:e.length})));for(const e of t)a.push(e)}return{chunkIndex:c,chunks:a}}(e,t,n),u=c.slice(0,l),d=c[l],p=[d.html],f=c.slice(l+1);let g=d.textLength,m=0,h=0,y=!1,b=!1;for(;g<a;)if((m<=h||0===f.length)&&u.length>0){const e=u.pop();g+e.textLength<=a?(p.unshift(e.html),m+=e.textLength,g+=e.textLength):(y=!0,u.length=0)}else{if(!(f.length>0))break;{const e=f.shift();g+e.textLength<=a?(p.push(e.html),h+=e.textLength,g+=e.textLength):(b=!0,f.length=0)}}return(y||u.length>0)&&p.unshift("\u2026"),(b||f.length>0)&&p.push("\u2026"),p.join("")}},4982:(e,t,n)=>{"use strict";function r(e,t){if("string"==typeof e)return{label:e,path:e};{const{label:n,path:r}=e;return"string"==typeof n?{label:n,path:r}:Object.prototype.hasOwnProperty.call(n,t)?{label:n[t],path:r}:{label:r,path:r}}}n.d(t,{p:()=>r})},9950:(e,t,n)=>{"use strict";var r;n.d(t,{i:()=>r}),function(e){e[e.Title=0]="Title",e[e.Heading=1]="Heading",e[e.Description=2]="Description",e[e.Keywords=3]="Keywords",e[e.Content=4]="Content"}(r||(r={}))},1513:(e,t,n)=>{"use strict";n.d(t,{zR:()=>w,TM:()=>C,yJ:()=>f,sC:()=>T,AO:()=>p});var r=n(8168);function o(e){return"/"===e.charAt(0)}function a(e,t){for(var n=t,r=n+1,o=e.length;r<o;n+=1,r+=1)e[n]=e[r];e.pop()}const i=function(e,t){void 0===t&&(t="");var n,r=e&&e.split("/")||[],i=t&&t.split("/")||[],s=e&&o(e),l=t&&o(t),c=s||l;if(e&&o(e)?i=r:r.length&&(i.pop(),i=i.concat(r)),!i.length)return"/";if(i.length){var u=i[i.length-1];n="."===u||".."===u||""===u}else n=!1;for(var d=0,p=i.length;p>=0;p--){var f=i[p];"."===f?a(i,p):".."===f?(a(i,p),d++):d&&(a(i,p),d--)}if(!c)for(;d--;d)i.unshift("..");!c||""===i[0]||i[0]&&o(i[0])||i.unshift("");var g=i.join("/");return n&&"/"!==g.substr(-1)&&(g+="/"),g};var s=n(1561);function l(e){return"/"===e.charAt(0)?e:"/"+e}function c(e){return"/"===e.charAt(0)?e.substr(1):e}function u(e,t){return function(e,t){return 0===e.toLowerCase().indexOf(t.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(t.length))}(e,t)?e.substr(t.length):e}function d(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function p(e){var t=e.pathname,n=e.search,r=e.hash,o=t||"/";return n&&"?"!==n&&(o+="?"===n.charAt(0)?n:"?"+n),r&&"#"!==r&&(o+="#"===r.charAt(0)?r:"#"+r),o}function f(e,t,n,o){var a;"string"==typeof e?(a=function(e){var t=e||"/",n="",r="",o=t.indexOf("#");-1!==o&&(r=t.substr(o),t=t.substr(0,o));var a=t.indexOf("?");return-1!==a&&(n=t.substr(a),t=t.substr(0,a)),{pathname:t,search:"?"===n?"":n,hash:"#"===r?"":r}}(e),a.state=t):(void 0===(a=(0,r.A)({},e)).pathname&&(a.pathname=""),a.search?"?"!==a.search.charAt(0)&&(a.search="?"+a.search):a.search="",a.hash?"#"!==a.hash.charAt(0)&&(a.hash="#"+a.hash):a.hash="",void 0!==t&&void 0===a.state&&(a.state=t));try{a.pathname=decodeURI(a.pathname)}catch(s){throw s instanceof URIError?new URIError('Pathname "'+a.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):s}return n&&(a.key=n),o?a.pathname?"/"!==a.pathname.charAt(0)&&(a.pathname=i(a.pathname,o.pathname)):a.pathname=o.pathname:a.pathname||(a.pathname="/"),a}function g(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,r,o){if(null!=e){var a="function"==typeof e?e(t,n):e;"string"==typeof a?"function"==typeof r?r(a,o):o(!0):o(!1!==a)}else o(!0)},appendListener:function(e){var n=!0;function r(){n&&e.apply(void 0,arguments)}return t.push(r),function(){n=!1,t=t.filter((function(e){return e!==r}))}},notifyListeners:function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];t.forEach((function(e){return e.apply(void 0,n)}))}}}var m=!("undefined"==typeof window||!window.document||!window.document.createElement);function h(e,t){t(window.confirm(e))}var y="popstate",b="hashchange";function v(){try{return window.history.state||{}}catch(e){return{}}}function w(e){void 0===e&&(e={}),m||(0,s.A)(!1);var t,n=window.history,o=(-1===(t=window.navigator.userAgent).indexOf("Android 2.")&&-1===t.indexOf("Android 4.0")||-1===t.indexOf("Mobile Safari")||-1!==t.indexOf("Chrome")||-1!==t.indexOf("Windows Phone"))&&window.history&&"pushState"in window.history,a=!(-1===window.navigator.userAgent.indexOf("Trident")),i=e,c=i.forceRefresh,w=void 0!==c&&c,k=i.getUserConfirmation,x=void 0===k?h:k,S=i.keyLength,_=void 0===S?6:S,E=e.basename?d(l(e.basename)):"";function C(e){var t=e||{},n=t.key,r=t.state,o=window.location,a=o.pathname+o.search+o.hash;return E&&(a=u(a,E)),f(a,r,n)}function A(){return Math.random().toString(36).substr(2,_)}var T=g();function j(e){(0,r.A)($,e),$.length=n.length,T.notifyListeners($.location,$.action)}function R(e){(function(e){return void 0===e.state&&-1===navigator.userAgent.indexOf("CriOS")})(e)||N(C(e.state))}function P(){N(C(v()))}var L=!1;function N(e){if(L)L=!1,j();else{T.confirmTransitionTo(e,"POP",x,(function(t){t?j({action:"POP",location:e}):function(e){var t=$.location,n=D.indexOf(t.key);-1===n&&(n=0);var r=D.indexOf(e.key);-1===r&&(r=0);var o=n-r;o&&(L=!0,M(o))}(e)}))}}var O=C(v()),D=[O.key];function I(e){return E+p(e)}function M(e){n.go(e)}var F=0;function z(e){1===(F+=e)&&1===e?(window.addEventListener(y,R),a&&window.addEventListener(b,P)):0===F&&(window.removeEventListener(y,R),a&&window.removeEventListener(b,P))}var B=!1;var $={length:n.length,action:"POP",location:O,createHref:I,push:function(e,t){var r="PUSH",a=f(e,t,A(),$.location);T.confirmTransitionTo(a,r,x,(function(e){if(e){var t=I(a),i=a.key,s=a.state;if(o)if(n.pushState({key:i,state:s},null,t),w)window.location.href=t;else{var l=D.indexOf($.location.key),c=D.slice(0,l+1);c.push(a.key),D=c,j({action:r,location:a})}else window.location.href=t}}))},replace:function(e,t){var r="REPLACE",a=f(e,t,A(),$.location);T.confirmTransitionTo(a,r,x,(function(e){if(e){var t=I(a),i=a.key,s=a.state;if(o)if(n.replaceState({key:i,state:s},null,t),w)window.location.replace(t);else{var l=D.indexOf($.location.key);-1!==l&&(D[l]=a.key),j({action:r,location:a})}else window.location.replace(t)}}))},go:M,goBack:function(){M(-1)},goForward:function(){M(1)},block:function(e){void 0===e&&(e=!1);var t=T.setPrompt(e);return B||(z(1),B=!0),function(){return B&&(B=!1,z(-1)),t()}},listen:function(e){var t=T.appendListener(e);return z(1),function(){z(-1),t()}}};return $}var k="hashchange",x={hashbang:{encodePath:function(e){return"!"===e.charAt(0)?e:"!/"+c(e)},decodePath:function(e){return"!"===e.charAt(0)?e.substr(1):e}},noslash:{encodePath:c,decodePath:l},slash:{encodePath:l,decodePath:l}};function S(e){var t=e.indexOf("#");return-1===t?e:e.slice(0,t)}function _(){var e=window.location.href,t=e.indexOf("#");return-1===t?"":e.substring(t+1)}function E(e){window.location.replace(S(window.location.href)+"#"+e)}function C(e){void 0===e&&(e={}),m||(0,s.A)(!1);var t=window.history,n=(window.navigator.userAgent.indexOf("Firefox"),e),o=n.getUserConfirmation,a=void 0===o?h:o,i=n.hashType,c=void 0===i?"slash":i,y=e.basename?d(l(e.basename)):"",b=x[c],v=b.encodePath,w=b.decodePath;function C(){var e=w(_());return y&&(e=u(e,y)),f(e)}var A=g();function T(e){(0,r.A)(B,e),B.length=t.length,A.notifyListeners(B.location,B.action)}var j=!1,R=null;function P(){var e,t,n=_(),r=v(n);if(n!==r)E(r);else{var o=C(),i=B.location;if(!j&&(t=o,(e=i).pathname===t.pathname&&e.search===t.search&&e.hash===t.hash))return;if(R===p(o))return;R=null,function(e){if(j)j=!1,T();else{var t="POP";A.confirmTransitionTo(e,t,a,(function(n){n?T({action:t,location:e}):function(e){var t=B.location,n=D.lastIndexOf(p(t));-1===n&&(n=0);var r=D.lastIndexOf(p(e));-1===r&&(r=0);var o=n-r;o&&(j=!0,I(o))}(e)}))}}(o)}}var L=_(),N=v(L);L!==N&&E(N);var O=C(),D=[p(O)];function I(e){t.go(e)}var M=0;function F(e){1===(M+=e)&&1===e?window.addEventListener(k,P):0===M&&window.removeEventListener(k,P)}var z=!1;var B={length:t.length,action:"POP",location:O,createHref:function(e){var t=document.querySelector("base"),n="";return t&&t.getAttribute("href")&&(n=S(window.location.href)),n+"#"+v(y+p(e))},push:function(e,t){var n="PUSH",r=f(e,void 0,void 0,B.location);A.confirmTransitionTo(r,n,a,(function(e){if(e){var t=p(r),o=v(y+t);if(_()!==o){R=t,function(e){window.location.hash=e}(o);var a=D.lastIndexOf(p(B.location)),i=D.slice(0,a+1);i.push(t),D=i,T({action:n,location:r})}else T()}}))},replace:function(e,t){var n="REPLACE",r=f(e,void 0,void 0,B.location);A.confirmTransitionTo(r,n,a,(function(e){if(e){var t=p(r),o=v(y+t);_()!==o&&(R=t,E(o));var a=D.indexOf(p(B.location));-1!==a&&(D[a]=t),T({action:n,location:r})}}))},go:I,goBack:function(){I(-1)},goForward:function(){I(1)},block:function(e){void 0===e&&(e=!1);var t=A.setPrompt(e);return z||(F(1),z=!0),function(){return z&&(z=!1,F(-1)),t()}},listen:function(e){var t=A.appendListener(e);return F(1),function(){F(-1),t()}}};return B}function A(e,t,n){return Math.min(Math.max(e,t),n)}function T(e){void 0===e&&(e={});var t=e,n=t.getUserConfirmation,o=t.initialEntries,a=void 0===o?["/"]:o,i=t.initialIndex,s=void 0===i?0:i,l=t.keyLength,c=void 0===l?6:l,u=g();function d(e){(0,r.A)(w,e),w.length=w.entries.length,u.notifyListeners(w.location,w.action)}function m(){return Math.random().toString(36).substr(2,c)}var h=A(s,0,a.length-1),y=a.map((function(e){return f(e,void 0,"string"==typeof e?m():e.key||m())})),b=p;function v(e){var t=A(w.index+e,0,w.entries.length-1),r=w.entries[t];u.confirmTransitionTo(r,"POP",n,(function(e){e?d({action:"POP",location:r,index:t}):d()}))}var w={length:y.length,action:"POP",location:y[h],index:h,entries:y,createHref:b,push:function(e,t){var r="PUSH",o=f(e,t,m(),w.location);u.confirmTransitionTo(o,r,n,(function(e){if(e){var t=w.index+1,n=w.entries.slice(0);n.length>t?n.splice(t,n.length-t,o):n.push(o),d({action:r,location:o,index:t,entries:n})}}))},replace:function(e,t){var r="REPLACE",o=f(e,t,m(),w.location);u.confirmTransitionTo(o,r,n,(function(e){e&&(w.entries[w.index]=o,d({action:r,location:o}))}))},go:v,goBack:function(){v(-1)},goForward:function(){v(1)},canGo:function(e){var t=w.index+e;return t>=0&&t<w.entries.length},block:function(e){return void 0===e&&(e=!1),u.setPrompt(e)},listen:function(e){return u.appendListener(e)}};return w}},4146:(e,t,n)=>{"use strict";var r=n(4363),o={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},a={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},i={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},s={};function l(e){return r.isMemo(e)?i:s[e.$$typeof]||o}s[r.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},s[r.Memo]=i;var c=Object.defineProperty,u=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,p=Object.getOwnPropertyDescriptor,f=Object.getPrototypeOf,g=Object.prototype;e.exports=function e(t,n,r){if("string"!=typeof n){if(g){var o=f(n);o&&o!==g&&e(t,o,r)}var i=u(n);d&&(i=i.concat(d(n)));for(var s=l(t),m=l(n),h=0;h<i.length;++h){var y=i[h];if(!(a[y]||r&&r[y]||m&&m[y]||s&&s[y])){var b=p(n,y);try{c(t,y,b)}catch(v){}}}}return t}},311:e=>{"use strict";e.exports=function(e,t,n,r,o,a,i,s){if(!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,o,a,i,s],u=0;(l=new Error(t.replace(/%s/g,(function(){return c[u++]})))).name="Invariant Violation"}throw l.framesToPop=1,l}}},4634:e=>{e.exports=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)}},5300:(e,t,n)=>{"use strict";n.r(t)},5947:function(e,t,n){var r,o;r=function(){var e,t,n={version:"0.2.0"},r=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'};function o(e,t,n){return e<t?t:e>n?n:e}function a(e){return 100*(-1+e)}function i(e,t,n){var o;return(o="translate3d"===r.positionUsing?{transform:"translate3d("+a(e)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+a(e)+"%,0)"}:{"margin-left":a(e)+"%"}).transition="all "+t+"ms "+n,o}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(r[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=o(e,r.minimum,1),n.status=1===e?null:e;var a=n.render(!t),c=a.querySelector(r.barSelector),u=r.speed,d=r.easing;return a.offsetWidth,s((function(t){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),l(c,i(e,u,d)),1===e?(l(a,{transition:"none",opacity:1}),a.offsetWidth,setTimeout((function(){l(a,{transition:"all "+u+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),u)}),u)):setTimeout(t,u)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),r.trickleSpeed)};return r.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*o(Math.random()*t,.1,.95)),t=o(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},e=0,t=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===t&&n.start(),e++,t++,r.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");u(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=r.template;var o,i=t.querySelector(r.barSelector),s=e?"-100":a(n.status||0),c=document.querySelector(r.parent);return l(i,{transition:"all 0 linear",transform:"translate3d("+s+"%,0,0)"}),r.showSpinner||(o=t.querySelector(r.spinnerSelector))&&f(o),c!=document.body&&u(c,"nprogress-custom-parent"),c.appendChild(t),t},n.remove=function(){d(document.documentElement,"nprogress-busy"),d(document.querySelector(r.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&f(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var s=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),l=function(){var e=["Webkit","O","Moz","ms"],t={};function n(e){return e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()}))}function r(t){var n=document.body.style;if(t in n)return t;for(var r,o=e.length,a=t.charAt(0).toUpperCase()+t.slice(1);o--;)if((r=e[o]+a)in n)return r;return t}function o(e){return e=n(e),t[e]||(t[e]=r(e))}function a(e,t,n){t=o(t),e.style[t]=n}return function(e,t){var n,r,o=arguments;if(2==o.length)for(n in t)void 0!==(r=t[n])&&t.hasOwnProperty(n)&&a(e,n,r);else a(e,o[1],o[2])}}();function c(e,t){return("string"==typeof e?e:p(e)).indexOf(" "+t+" ")>=0}function u(e,t){var n=p(e),r=n+t;c(n,t)||(e.className=r.substring(1))}function d(e,t){var n,r=p(e);c(e,t)&&(n=r.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function p(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function f(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n},void 0===(o="function"==typeof r?r.call(t,n,t,e):r)||(e.exports=o)},5302:(e,t,n)=>{var r=n(4634);e.exports=g,e.exports.parse=a,e.exports.compile=function(e,t){return l(a(e,t),t)},e.exports.tokensToFunction=l,e.exports.tokensToRegExp=f;var o=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function a(e,t){for(var n,r=[],a=0,s=0,l="",c=t&&t.delimiter||"/";null!=(n=o.exec(e));){var d=n[0],p=n[1],f=n.index;if(l+=e.slice(s,f),s=f+d.length,p)l+=p[1];else{var g=e[s],m=n[2],h=n[3],y=n[4],b=n[5],v=n[6],w=n[7];l&&(r.push(l),l="");var k=null!=m&&null!=g&&g!==m,x="+"===v||"*"===v,S="?"===v||"*"===v,_=m||c,E=y||b,C=m||("string"==typeof r[r.length-1]?r[r.length-1]:"");r.push({name:h||a++,prefix:m||"",delimiter:_,optional:S,repeat:x,partial:k,asterisk:!!w,pattern:E?u(E):w?".*":i(_,C)})}}return s<e.length&&(l+=e.substr(s)),l&&r.push(l),r}function i(e,t){return!t||t.indexOf(e)>-1?"[^"+c(e)+"]+?":c(t)+"|(?:(?!"+c(t)+")[^"+c(e)+"])+?"}function s(e){return encodeURI(e).replace(/[\/?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()}))}function l(e,t){for(var n=new Array(e.length),o=0;o<e.length;o++)"object"==typeof e[o]&&(n[o]=new RegExp("^(?:"+e[o].pattern+")$",p(t)));return function(t,o){for(var a="",i=t||{},l=(o||{}).pretty?s:encodeURIComponent,c=0;c<e.length;c++){var u=e[c];if("string"!=typeof u){var d,p=i[u.name];if(null==p){if(u.optional){u.partial&&(a+=u.prefix);continue}throw new TypeError('Expected "'+u.name+'" to be defined')}if(r(p)){if(!u.repeat)throw new TypeError('Expected "'+u.name+'" to not repeat, but received `'+JSON.stringify(p)+"`");if(0===p.length){if(u.optional)continue;throw new TypeError('Expected "'+u.name+'" to not be empty')}for(var f=0;f<p.length;f++){if(d=l(p[f]),!n[c].test(d))throw new TypeError('Expected all "'+u.name+'" to match "'+u.pattern+'", but received `'+JSON.stringify(d)+"`");a+=(0===f?u.prefix:u.delimiter)+d}}else{if(d=u.asterisk?encodeURI(p).replace(/[?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()})):l(p),!n[c].test(d))throw new TypeError('Expected "'+u.name+'" to match "'+u.pattern+'", but received "'+d+'"');a+=u.prefix+d}}else a+=u}return a}}function c(e){return e.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function u(e){return e.replace(/([=!:$\/()])/g,"\\$1")}function d(e,t){return e.keys=t,e}function p(e){return e&&e.sensitive?"":"i"}function f(e,t,n){r(t)||(n=t||n,t=[]);for(var o=(n=n||{}).strict,a=!1!==n.end,i="",s=0;s<e.length;s++){var l=e[s];if("string"==typeof l)i+=c(l);else{var u=c(l.prefix),f="(?:"+l.pattern+")";t.push(l),l.repeat&&(f+="(?:"+u+f+")*"),i+=f=l.optional?l.partial?u+"("+f+")?":"(?:"+u+"("+f+"))?":u+"("+f+")"}}var g=c(n.delimiter||"/"),m=i.slice(-g.length)===g;return o||(i=(m?i.slice(0,-g.length):i)+"(?:"+g+"(?=$))?"),i+=a?"$":o&&m?"":"(?="+g+"|$)",d(new RegExp("^"+i,p(n)),t)}function g(e,t,n){return r(t)||(n=t||n,t=[]),n=n||{},e instanceof RegExp?function(e,t){var n=e.source.match(/\((?!\?)/g);if(n)for(var r=0;r<n.length;r++)t.push({name:r,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return d(e,t)}(e,t):r(e)?function(e,t,n){for(var r=[],o=0;o<e.length;o++)r.push(g(e[o],t,n).source);return d(new RegExp("(?:"+r.join("|")+")",p(n)),t)}(e,t,n):function(e,t,n){return f(a(e,n),t,n)}(e,t,n)}},6969:e=>{e.exports&&(e.exports={core:{meta:{path:"components/prism-core.js",option:"mandatory"},core:"Core"},themes:{meta:{path:"themes/{id}.css",link:"index.html?theme={id}",exclusive:!0},prism:{title:"Default",option:"default"},"prism-dark":"Dark","prism-funky":"Funky","prism-okaidia":{title:"Okaidia",owner:"ocodia"},"prism-twilight":{title:"Twilight",owner:"remybach"},"prism-coy":{title:"Coy",owner:"tshedor"},"prism-solarizedlight":{title:"Solarized Light",owner:"hectormatos2011 "},"prism-tomorrow":{title:"Tomorrow Night",owner:"Rosey"}},languages:{meta:{path:"components/prism-{id}",noCSS:!0,examplesPath:"examples/prism-{id}",addCheckAll:!0},markup:{title:"Markup",alias:["html","xml","svg","mathml","ssml","atom","rss"],aliasTitles:{html:"HTML",xml:"XML",svg:"SVG",mathml:"MathML",ssml:"SSML",atom:"Atom",rss:"RSS"},option:"default"},css:{title:"CSS",option:"default",modify:"markup"},clike:{title:"C-like",option:"default"},javascript:{title:"JavaScript",require:"clike",modify:"markup",optional:"regex",alias:"js",option:"default"},abap:{title:"ABAP",owner:"dellagustin"},abnf:{title:"ABNF",owner:"RunDevelopment"},actionscript:{title:"ActionScript",require:"javascript",modify:"markup",owner:"Golmote"},ada:{title:"Ada",owner:"Lucretia"},agda:{title:"Agda",owner:"xy-ren"},al:{title:"AL",owner:"RunDevelopment"},antlr4:{title:"ANTLR4",alias:"g4",owner:"RunDevelopment"},apacheconf:{title:"Apache Configuration",owner:"GuiTeK"},apex:{title:"Apex",require:["clike","sql"],owner:"RunDevelopment"},apl:{title:"APL",owner:"ngn"},applescript:{title:"AppleScript",owner:"Golmote"},aql:{title:"AQL",owner:"RunDevelopment"},arduino:{title:"Arduino",require:"cpp",alias:"ino",owner:"dkern"},arff:{title:"ARFF",owner:"Golmote"},armasm:{title:"ARM Assembly",alias:"arm-asm",owner:"RunDevelopment"},arturo:{title:"Arturo",alias:"art",optional:["bash","css","javascript","markup","markdown","sql"],owner:"drkameleon"},asciidoc:{alias:"adoc",title:"AsciiDoc",owner:"Golmote"},aspnet:{title:"ASP.NET (C#)",require:["markup","csharp"],owner:"nauzilus"},asm6502:{title:"6502 Assembly",owner:"kzurawel"},asmatmel:{title:"Atmel AVR Assembly",owner:"cerkit"},autohotkey:{title:"AutoHotkey",owner:"aviaryan"},autoit:{title:"AutoIt",owner:"Golmote"},avisynth:{title:"AviSynth",alias:"avs",owner:"Zinfidel"},"avro-idl":{title:"Avro IDL",alias:"avdl",owner:"RunDevelopment"},awk:{title:"AWK",alias:"gawk",aliasTitles:{gawk:"GAWK"},owner:"RunDevelopment"},bash:{title:"Bash",alias:["sh","shell"],aliasTitles:{sh:"Shell",shell:"Shell"},owner:"zeitgeist87"},basic:{title:"BASIC",owner:"Golmote"},batch:{title:"Batch",owner:"Golmote"},bbcode:{title:"BBcode",alias:"shortcode",aliasTitles:{shortcode:"Shortcode"},owner:"RunDevelopment"},bbj:{title:"BBj",owner:"hyyan"},bicep:{title:"Bicep",owner:"johnnyreilly"},birb:{title:"Birb",require:"clike",owner:"Calamity210"},bison:{title:"Bison",require:"c",owner:"Golmote"},bnf:{title:"BNF",alias:"rbnf",aliasTitles:{rbnf:"RBNF"},owner:"RunDevelopment"},bqn:{title:"BQN",owner:"yewscion"},brainfuck:{title:"Brainfuck",owner:"Golmote"},brightscript:{title:"BrightScript",owner:"RunDevelopment"},bro:{title:"Bro",owner:"wayward710"},bsl:{title:"BSL (1C:Enterprise)",alias:"oscript",aliasTitles:{oscript:"OneScript"},owner:"Diversus23"},c:{title:"C",require:"clike",owner:"zeitgeist87"},csharp:{title:"C#",require:"clike",alias:["cs","dotnet"],owner:"mvalipour"},cpp:{title:"C++",require:"c",owner:"zeitgeist87"},cfscript:{title:"CFScript",require:"clike",alias:"cfc",owner:"mjclemente"},chaiscript:{title:"ChaiScript",require:["clike","cpp"],owner:"RunDevelopment"},cil:{title:"CIL",owner:"sbrl"},cilkc:{title:"Cilk/C",require:"c",alias:"cilk-c",owner:"OpenCilk"},cilkcpp:{title:"Cilk/C++",require:"cpp",alias:["cilk-cpp","cilk"],owner:"OpenCilk"},clojure:{title:"Clojure",owner:"troglotit"},cmake:{title:"CMake",owner:"mjrogozinski"},cobol:{title:"COBOL",owner:"RunDevelopment"},coffeescript:{title:"CoffeeScript",require:"javascript",alias:"coffee",owner:"R-osey"},concurnas:{title:"Concurnas",alias:"conc",owner:"jasontatton"},csp:{title:"Content-Security-Policy",owner:"ScottHelme"},cooklang:{title:"Cooklang",owner:"ahue"},coq:{title:"Coq",owner:"RunDevelopment"},crystal:{title:"Crystal",require:"ruby",owner:"MakeNowJust"},"css-extras":{title:"CSS Extras",require:"css",modify:"css",owner:"milesj"},csv:{title:"CSV",owner:"RunDevelopment"},cue:{title:"CUE",owner:"RunDevelopment"},cypher:{title:"Cypher",owner:"RunDevelopment"},d:{title:"D",require:"clike",owner:"Golmote"},dart:{title:"Dart",require:"clike",owner:"Golmote"},dataweave:{title:"DataWeave",owner:"machaval"},dax:{title:"DAX",owner:"peterbud"},dhall:{title:"Dhall",owner:"RunDevelopment"},diff:{title:"Diff",owner:"uranusjr"},django:{title:"Django/Jinja2",require:"markup-templating",alias:"jinja2",owner:"romanvm"},"dns-zone-file":{title:"DNS zone file",owner:"RunDevelopment",alias:"dns-zone"},docker:{title:"Docker",alias:"dockerfile",owner:"JustinBeckwith"},dot:{title:"DOT (Graphviz)",alias:"gv",optional:"markup",owner:"RunDevelopment"},ebnf:{title:"EBNF",owner:"RunDevelopment"},editorconfig:{title:"EditorConfig",owner:"osipxd"},eiffel:{title:"Eiffel",owner:"Conaclos"},ejs:{title:"EJS",require:["javascript","markup-templating"],owner:"RunDevelopment",alias:"eta",aliasTitles:{eta:"Eta"}},elixir:{title:"Elixir",owner:"Golmote"},elm:{title:"Elm",owner:"zwilias"},etlua:{title:"Embedded Lua templating",require:["lua","markup-templating"],owner:"RunDevelopment"},erb:{title:"ERB",require:["ruby","markup-templating"],owner:"Golmote"},erlang:{title:"Erlang",owner:"Golmote"},"excel-formula":{title:"Excel Formula",alias:["xlsx","xls"],owner:"RunDevelopment"},fsharp:{title:"F#",require:"clike",owner:"simonreynolds7"},factor:{title:"Factor",owner:"catb0t"},false:{title:"False",owner:"edukisto"},"firestore-security-rules":{title:"Firestore security rules",require:"clike",owner:"RunDevelopment"},flow:{title:"Flow",require:"javascript",owner:"Golmote"},fortran:{title:"Fortran",owner:"Golmote"},ftl:{title:"FreeMarker Template Language",require:"markup-templating",owner:"RunDevelopment"},gml:{title:"GameMaker Language",alias:"gamemakerlanguage",require:"clike",owner:"LiarOnce"},gap:{title:"GAP (CAS)",owner:"RunDevelopment"},gcode:{title:"G-code",owner:"RunDevelopment"},gdscript:{title:"GDScript",owner:"RunDevelopment"},gedcom:{title:"GEDCOM",owner:"Golmote"},gettext:{title:"gettext",alias:"po",owner:"RunDevelopment"},gherkin:{title:"Gherkin",owner:"hason"},git:{title:"Git",owner:"lgiraudel"},glsl:{title:"GLSL",require:"c",owner:"Golmote"},gn:{title:"GN",alias:"gni",owner:"RunDevelopment"},"linker-script":{title:"GNU Linker Script",alias:"ld",owner:"RunDevelopment"},go:{title:"Go",require:"clike",owner:"arnehormann"},"go-module":{title:"Go module",alias:"go-mod",owner:"RunDevelopment"},gradle:{title:"Gradle",require:"clike",owner:"zeabdelkhalek-badido18"},graphql:{title:"GraphQL",optional:"markdown",owner:"Golmote"},groovy:{title:"Groovy",require:"clike",owner:"robfletcher"},haml:{title:"Haml",require:"ruby",optional:["css","css-extras","coffeescript","erb","javascript","less","markdown","scss","textile"],owner:"Golmote"},handlebars:{title:"Handlebars",require:"markup-templating",alias:["hbs","mustache"],aliasTitles:{mustache:"Mustache"},owner:"Golmote"},haskell:{title:"Haskell",alias:"hs",owner:"bholst"},haxe:{title:"Haxe",require:"clike",optional:"regex",owner:"Golmote"},hcl:{title:"HCL",owner:"outsideris"},hlsl:{title:"HLSL",require:"c",owner:"RunDevelopment"},hoon:{title:"Hoon",owner:"matildepark"},http:{title:"HTTP",optional:["csp","css","hpkp","hsts","javascript","json","markup","uri"],owner:"danielgtaylor"},hpkp:{title:"HTTP Public-Key-Pins",owner:"ScottHelme"},hsts:{title:"HTTP Strict-Transport-Security",owner:"ScottHelme"},ichigojam:{title:"IchigoJam",owner:"BlueCocoa"},icon:{title:"Icon",owner:"Golmote"},"icu-message-format":{title:"ICU Message Format",owner:"RunDevelopment"},idris:{title:"Idris",alias:"idr",owner:"KeenS",require:"haskell"},ignore:{title:".ignore",owner:"osipxd",alias:["gitignore","hgignore","npmignore"],aliasTitles:{gitignore:".gitignore",hgignore:".hgignore",npmignore:".npmignore"}},inform7:{title:"Inform 7",owner:"Golmote"},ini:{title:"Ini",owner:"aviaryan"},io:{title:"Io",owner:"AlesTsurko"},j:{title:"J",owner:"Golmote"},java:{title:"Java",require:"clike",owner:"sherblot"},javadoc:{title:"JavaDoc",require:["markup","java","javadoclike"],modify:"java",optional:"scala",owner:"RunDevelopment"},javadoclike:{title:"JavaDoc-like",modify:["java","javascript","php"],owner:"RunDevelopment"},javastacktrace:{title:"Java stack trace",owner:"RunDevelopment"},jexl:{title:"Jexl",owner:"czosel"},jolie:{title:"Jolie",require:"clike",owner:"thesave"},jq:{title:"JQ",owner:"RunDevelopment"},jsdoc:{title:"JSDoc",require:["javascript","javadoclike","typescript"],modify:"javascript",optional:["actionscript","coffeescript"],owner:"RunDevelopment"},"js-extras":{title:"JS Extras",require:"javascript",modify:"javascript",optional:["actionscript","coffeescript","flow","n4js","typescript"],owner:"RunDevelopment"},json:{title:"JSON",alias:"webmanifest",aliasTitles:{webmanifest:"Web App Manifest"},owner:"CupOfTea696"},json5:{title:"JSON5",require:"json",owner:"RunDevelopment"},jsonp:{title:"JSONP",require:"json",owner:"RunDevelopment"},jsstacktrace:{title:"JS stack trace",owner:"sbrl"},"js-templates":{title:"JS Templates",require:"javascript",modify:"javascript",optional:["css","css-extras","graphql","markdown","markup","sql"],owner:"RunDevelopment"},julia:{title:"Julia",owner:"cdagnino"},keepalived:{title:"Keepalived Configure",owner:"dev-itsheng"},keyman:{title:"Keyman",owner:"mcdurdin"},kotlin:{title:"Kotlin",alias:["kt","kts"],aliasTitles:{kts:"Kotlin Script"},require:"clike",owner:"Golmote"},kumir:{title:"KuMir (\u041a\u0443\u041c\u0438\u0440)",alias:"kum",owner:"edukisto"},kusto:{title:"Kusto",owner:"RunDevelopment"},latex:{title:"LaTeX",alias:["tex","context"],aliasTitles:{tex:"TeX",context:"ConTeXt"},owner:"japborst"},latte:{title:"Latte",require:["clike","markup-templating","php"],owner:"nette"},less:{title:"Less",require:"css",optional:"css-extras",owner:"Golmote"},lilypond:{title:"LilyPond",require:"scheme",alias:"ly",owner:"RunDevelopment"},liquid:{title:"Liquid",require:"markup-templating",owner:"cinhtau"},lisp:{title:"Lisp",alias:["emacs","elisp","emacs-lisp"],owner:"JuanCaicedo"},livescript:{title:"LiveScript",owner:"Golmote"},llvm:{title:"LLVM IR",owner:"porglezomp"},log:{title:"Log file",optional:"javastacktrace",owner:"RunDevelopment"},lolcode:{title:"LOLCODE",owner:"Golmote"},lua:{title:"Lua",owner:"Golmote"},magma:{title:"Magma (CAS)",owner:"RunDevelopment"},makefile:{title:"Makefile",owner:"Golmote"},markdown:{title:"Markdown",require:"markup",optional:"yaml",alias:"md",owner:"Golmote"},"markup-templating":{title:"Markup templating",require:"markup",owner:"Golmote"},mata:{title:"Mata",owner:"RunDevelopment"},matlab:{title:"MATLAB",owner:"Golmote"},maxscript:{title:"MAXScript",owner:"RunDevelopment"},mel:{title:"MEL",owner:"Golmote"},mermaid:{title:"Mermaid",owner:"RunDevelopment"},metafont:{title:"METAFONT",owner:"LaeriExNihilo"},mizar:{title:"Mizar",owner:"Golmote"},mongodb:{title:"MongoDB",owner:"airs0urce",require:"javascript"},monkey:{title:"Monkey",owner:"Golmote"},moonscript:{title:"MoonScript",alias:"moon",owner:"RunDevelopment"},n1ql:{title:"N1QL",owner:"TMWilds"},n4js:{title:"N4JS",require:"javascript",optional:"jsdoc",alias:"n4jsd",owner:"bsmith-n4"},"nand2tetris-hdl":{title:"Nand To Tetris HDL",owner:"stephanmax"},naniscript:{title:"Naninovel Script",owner:"Elringus",alias:"nani"},nasm:{title:"NASM",owner:"rbmj"},neon:{title:"NEON",owner:"nette"},nevod:{title:"Nevod",owner:"nezaboodka"},nginx:{title:"nginx",owner:"volado"},nim:{title:"Nim",owner:"Golmote"},nix:{title:"Nix",owner:"Golmote"},nsis:{title:"NSIS",owner:"idleberg"},objectivec:{title:"Objective-C",require:"c",alias:"objc",owner:"uranusjr"},ocaml:{title:"OCaml",owner:"Golmote"},odin:{title:"Odin",owner:"edukisto"},opencl:{title:"OpenCL",require:"c",modify:["c","cpp"],owner:"Milania1"},openqasm:{title:"OpenQasm",alias:"qasm",owner:"RunDevelopment"},oz:{title:"Oz",owner:"Golmote"},parigp:{title:"PARI/GP",owner:"Golmote"},parser:{title:"Parser",require:"markup",owner:"Golmote"},pascal:{title:"Pascal",alias:"objectpascal",aliasTitles:{objectpascal:"Object Pascal"},owner:"Golmote"},pascaligo:{title:"Pascaligo",owner:"DefinitelyNotAGoat"},psl:{title:"PATROL Scripting Language",owner:"bertysentry"},pcaxis:{title:"PC-Axis",alias:"px",owner:"RunDevelopment"},peoplecode:{title:"PeopleCode",alias:"pcode",owner:"RunDevelopment"},perl:{title:"Perl",owner:"Golmote"},php:{title:"PHP",require:"markup-templating",owner:"milesj"},phpdoc:{title:"PHPDoc",require:["php","javadoclike"],modify:"php",owner:"RunDevelopment"},"php-extras":{title:"PHP Extras",require:"php",modify:"php",owner:"milesj"},"plant-uml":{title:"PlantUML",alias:"plantuml",owner:"RunDevelopment"},plsql:{title:"PL/SQL",require:"sql",owner:"Golmote"},powerquery:{title:"PowerQuery",alias:["pq","mscript"],owner:"peterbud"},powershell:{title:"PowerShell",owner:"nauzilus"},processing:{title:"Processing",require:"clike",owner:"Golmote"},prolog:{title:"Prolog",owner:"Golmote"},promql:{title:"PromQL",owner:"arendjr"},properties:{title:".properties",owner:"Golmote"},protobuf:{title:"Protocol Buffers",require:"clike",owner:"just-boris"},pug:{title:"Pug",require:["markup","javascript"],optional:["coffeescript","ejs","handlebars","less","livescript","markdown","scss","stylus","twig"],owner:"Golmote"},puppet:{title:"Puppet",owner:"Golmote"},pure:{title:"Pure",optional:["c","cpp","fortran"],owner:"Golmote"},purebasic:{title:"PureBasic",require:"clike",alias:"pbfasm",owner:"HeX0R101"},purescript:{title:"PureScript",require:"haskell",alias:"purs",owner:"sriharshachilakapati"},python:{title:"Python",alias:"py",owner:"multipetros"},qsharp:{title:"Q#",require:"clike",alias:"qs",owner:"fedonman"},q:{title:"Q (kdb+ database)",owner:"Golmote"},qml:{title:"QML",require:"javascript",owner:"RunDevelopment"},qore:{title:"Qore",require:"clike",owner:"temnroegg"},r:{title:"R",owner:"Golmote"},racket:{title:"Racket",require:"scheme",alias:"rkt",owner:"RunDevelopment"},cshtml:{title:"Razor C#",alias:"razor",require:["markup","csharp"],optional:["css","css-extras","javascript","js-extras"],owner:"RunDevelopment"},jsx:{title:"React JSX",require:["markup","javascript"],optional:["jsdoc","js-extras","js-templates"],owner:"vkbansal"},tsx:{title:"React TSX",require:["jsx","typescript"]},reason:{title:"Reason",require:"clike",owner:"Golmote"},regex:{title:"Regex",owner:"RunDevelopment"},rego:{title:"Rego",owner:"JordanSh"},renpy:{title:"Ren'py",alias:"rpy",owner:"HyuchiaDiego"},rescript:{title:"ReScript",alias:"res",owner:"vmarcosp"},rest:{title:"reST (reStructuredText)",owner:"Golmote"},rip:{title:"Rip",owner:"ravinggenius"},roboconf:{title:"Roboconf",owner:"Golmote"},robotframework:{title:"Robot Framework",alias:"robot",owner:"RunDevelopment"},ruby:{title:"Ruby",require:"clike",alias:"rb",owner:"samflores"},rust:{title:"Rust",owner:"Golmote"},sas:{title:"SAS",optional:["groovy","lua","sql"],owner:"Golmote"},sass:{title:"Sass (Sass)",require:"css",optional:"css-extras",owner:"Golmote"},scss:{title:"Sass (SCSS)",require:"css",optional:"css-extras",owner:"MoOx"},scala:{title:"Scala",require:"java",owner:"jozic"},scheme:{title:"Scheme",owner:"bacchus123"},"shell-session":{title:"Shell session",require:"bash",alias:["sh-session","shellsession"],owner:"RunDevelopment"},smali:{title:"Smali",owner:"RunDevelopment"},smalltalk:{title:"Smalltalk",owner:"Golmote"},smarty:{title:"Smarty",require:"markup-templating",optional:"php",owner:"Golmote"},sml:{title:"SML",alias:"smlnj",aliasTitles:{smlnj:"SML/NJ"},owner:"RunDevelopment"},solidity:{title:"Solidity (Ethereum)",alias:"sol",require:"clike",owner:"glachaud"},"solution-file":{title:"Solution file",alias:"sln",owner:"RunDevelopment"},soy:{title:"Soy (Closure Template)",require:"markup-templating",owner:"Golmote"},sparql:{title:"SPARQL",require:"turtle",owner:"Triply-Dev",alias:"rq"},"splunk-spl":{title:"Splunk SPL",owner:"RunDevelopment"},sqf:{title:"SQF: Status Quo Function (Arma 3)",require:"clike",owner:"RunDevelopment"},sql:{title:"SQL",owner:"multipetros"},squirrel:{title:"Squirrel",require:"clike",owner:"RunDevelopment"},stan:{title:"Stan",owner:"RunDevelopment"},stata:{title:"Stata Ado",require:["mata","java","python"],owner:"RunDevelopment"},iecst:{title:"Structured Text (IEC 61131-3)",owner:"serhioromano"},stylus:{title:"Stylus",owner:"vkbansal"},supercollider:{title:"SuperCollider",alias:"sclang",owner:"RunDevelopment"},swift:{title:"Swift",owner:"chrischares"},systemd:{title:"Systemd configuration file",owner:"RunDevelopment"},"t4-templating":{title:"T4 templating",owner:"RunDevelopment"},"t4-cs":{title:"T4 Text Templates (C#)",require:["t4-templating","csharp"],alias:"t4",owner:"RunDevelopment"},"t4-vb":{title:"T4 Text Templates (VB)",require:["t4-templating","vbnet"],owner:"RunDevelopment"},tap:{title:"TAP",owner:"isaacs",require:"yaml"},tcl:{title:"Tcl",owner:"PeterChaplin"},tt2:{title:"Template Toolkit 2",require:["clike","markup-templating"],owner:"gflohr"},textile:{title:"Textile",require:"markup",optional:"css",owner:"Golmote"},toml:{title:"TOML",owner:"RunDevelopment"},tremor:{title:"Tremor",alias:["trickle","troy"],owner:"darach",aliasTitles:{trickle:"trickle",troy:"troy"}},turtle:{title:"Turtle",alias:"trig",aliasTitles:{trig:"TriG"},owner:"jakubklimek"},twig:{title:"Twig",require:"markup-templating",owner:"brandonkelly"},typescript:{title:"TypeScript",require:"javascript",optional:"js-templates",alias:"ts",owner:"vkbansal"},typoscript:{title:"TypoScript",alias:"tsconfig",aliasTitles:{tsconfig:"TSConfig"},owner:"dkern"},unrealscript:{title:"UnrealScript",alias:["uscript","uc"],owner:"RunDevelopment"},uorazor:{title:"UO Razor Script",owner:"jaseowns"},uri:{title:"URI",alias:"url",aliasTitles:{url:"URL"},owner:"RunDevelopment"},v:{title:"V",require:"clike",owner:"taggon"},vala:{title:"Vala",require:"clike",optional:"regex",owner:"TemplarVolk"},vbnet:{title:"VB.Net",require:"basic",owner:"Bigsby"},velocity:{title:"Velocity",require:"markup",owner:"Golmote"},verilog:{title:"Verilog",owner:"a-rey"},vhdl:{title:"VHDL",owner:"a-rey"},vim:{title:"vim",owner:"westonganger"},"visual-basic":{title:"Visual Basic",alias:["vb","vba"],aliasTitles:{vba:"VBA"},owner:"Golmote"},warpscript:{title:"WarpScript",owner:"RunDevelopment"},wasm:{title:"WebAssembly",owner:"Golmote"},"web-idl":{title:"Web IDL",alias:"webidl",owner:"RunDevelopment"},wgsl:{title:"WGSL",owner:"Dr4gonthree"},wiki:{title:"Wiki markup",require:"markup",owner:"Golmote"},wolfram:{title:"Wolfram language",alias:["mathematica","nb","wl"],aliasTitles:{mathematica:"Mathematica",nb:"Mathematica Notebook"},owner:"msollami"},wren:{title:"Wren",owner:"clsource"},xeora:{title:"Xeora",require:"markup",alias:"xeoracube",aliasTitles:{xeoracube:"XeoraCube"},owner:"freakmaxi"},"xml-doc":{title:"XML doc (.net)",require:"markup",modify:["csharp","fsharp","vbnet"],owner:"RunDevelopment"},xojo:{title:"Xojo (REALbasic)",owner:"Golmote"},xquery:{title:"XQuery",require:"markup",owner:"Golmote"},yaml:{title:"YAML",alias:"yml",owner:"hason"},yang:{title:"YANG",owner:"RunDevelopment"},zig:{title:"Zig",owner:"RunDevelopment"}},plugins:{meta:{path:"plugins/{id}/prism-{id}",link:"plugins/{id}/"},"line-highlight":{title:"Line Highlight",description:"Highlights specific lines and/or line ranges."},"line-numbers":{title:"Line Numbers",description:"Line number at the beginning of code lines.",owner:"kuba-kubula"},"show-invisibles":{title:"Show Invisibles",description:"Show hidden characters such as tabs and line breaks.",optional:["autolinker","data-uri-highlight"]},autolinker:{title:"Autolinker",description:"Converts URLs and emails in code to clickable links. Parses Markdown links in comments."},wpd:{title:"WebPlatform Docs",description:'Makes tokens link to <a href="https://webplatform.github.io/docs/">WebPlatform.org documentation</a>. The links open in a new tab.'},"custom-class":{title:"Custom Class",description:"This plugin allows you to prefix Prism's default classes (<code>.comment</code> can become <code>.namespace--comment</code>) or replace them with your defined ones (like <code>.editor__comment</code>). You can even add new classes.",owner:"dvkndn",noCSS:!0},"file-highlight":{title:"File Highlight",description:"Fetch external files and highlight them with Prism. Used on the Prism website itself.",noCSS:!0},"show-language":{title:"Show Language",description:"Display the highlighted language in code blocks (inline code does not show the label).",owner:"nauzilus",noCSS:!0,require:"toolbar"},"jsonp-highlight":{title:"JSONP Highlight",description:"Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).",noCSS:!0,owner:"nauzilus"},"highlight-keywords":{title:"Highlight Keywords",description:"Adds special CSS classes for each keyword for fine-grained highlighting.",owner:"vkbansal",noCSS:!0},"remove-initial-line-feed":{title:"Remove initial line feed",description:"Removes the initial line feed in code blocks.",owner:"Golmote",noCSS:!0},"inline-color":{title:"Inline color",description:"Adds a small inline preview for colors in style sheets.",require:"css-extras",owner:"RunDevelopment"},previewers:{title:"Previewers",description:"Previewers for angles, colors, gradients, easing and time.",require:"css-extras",owner:"Golmote"},autoloader:{title:"Autoloader",description:"Automatically loads the needed languages to highlight the code blocks.",owner:"Golmote",noCSS:!0},"keep-markup":{title:"Keep Markup",description:"Prevents custom markup from being dropped out during highlighting.",owner:"Golmote",optional:"normalize-whitespace",noCSS:!0},"command-line":{title:"Command Line",description:"Display a command line with a prompt and, optionally, the output/response from the commands.",owner:"chriswells0"},"unescaped-markup":{title:"Unescaped Markup",description:"Write markup without having to escape anything."},"normalize-whitespace":{title:"Normalize Whitespace",description:"Supports multiple operations to normalize whitespace in code blocks.",owner:"zeitgeist87",optional:"unescaped-markup",noCSS:!0},"data-uri-highlight":{title:"Data-URI Highlight",description:"Highlights data-URI contents.",owner:"Golmote",noCSS:!0},toolbar:{title:"Toolbar",description:"Attach a toolbar for plugins to easily register buttons on the top of a code block.",owner:"mAAdhaTTah"},"copy-to-clipboard":{title:"Copy to Clipboard Button",description:"Add a button that copies the code block to the clipboard when clicked.",owner:"mAAdhaTTah",require:"toolbar",noCSS:!0},"download-button":{title:"Download Button",description:"A button in the toolbar of a code block adding a convenient way to download a code file.",owner:"Golmote",require:"toolbar",noCSS:!0},"match-braces":{title:"Match braces",description:"Highlights matching braces.",owner:"RunDevelopment"},"diff-highlight":{title:"Diff Highlight",description:"Highlights the code inside diff blocks.",owner:"RunDevelopment",require:"diff"},"filter-highlight-all":{title:"Filter highlightAll",description:"Filters the elements the <code>highlightAll</code> and <code>highlightAllUnder</code> methods actually highlight.",owner:"RunDevelopment",noCSS:!0},treeview:{title:"Treeview",description:"A language with special styles to highlight file system tree structures.",owner:"Golmote"}}})},8722:(e,t,n)=>{const r=n(6969),o=n(8380),a=new Set;function i(e){void 0===e?e=Object.keys(r.languages).filter((e=>"meta"!=e)):Array.isArray(e)||(e=[e]);const t=[...a,...Object.keys(Prism.languages)];o(r,e,t).load((e=>{if(!(e in r.languages))return void(i.silent||console.warn("Language does not exist: "+e));const t="./prism-"+e;delete n.c[n(3157).resolve(t)],delete Prism.languages[e],n(3157)(t),a.add(e)}))}i.silent=!1,e.exports=i},9700:()=>{!function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,r,o,a){if(n.language===r){var i=n.tokenStack=[];n.code=n.code.replace(o,(function(e){if("function"==typeof a&&!a(e))return e;for(var o,s=i.length;-1!==n.code.indexOf(o=t(r,s));)++s;return i[s]=e,o})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,r){if(n.language===r&&n.tokenStack){n.grammar=e.languages[r];var o=0,a=Object.keys(n.tokenStack);!function i(s){for(var l=0;l<s.length&&!(o>=a.length);l++){var c=s[l];if("string"==typeof c||c.content&&"string"==typeof c.content){var u=a[o],d=n.tokenStack[u],p="string"==typeof c?c:c.content,f=t(r,u),g=p.indexOf(f);if(g>-1){++o;var m=p.substring(0,g),h=new e.Token(r,e.tokenize(d,n.grammar),"language-"+r,d),y=p.substring(g+f.length),b=[];m&&b.push.apply(b,i([m])),b.push(h),y&&b.push.apply(b,i([y])),"string"==typeof c?s.splice.apply(s,[l,1].concat(b)):c.content=b}}else c.content&&i(c.content)}return s}(n.tokens)}}}})}(Prism)},8692:(e,t,n)=>{var r={"./":8722};function o(e){var t=a(e);return n(t)}function a(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}o.keys=function(){return Object.keys(r)},o.resolve=a,e.exports=o,o.id=8692},3157:(e,t,n)=>{var r={"./":8722};function o(e){var t=a(e);return n(t)}function a(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}o.keys=function(){return Object.keys(r)},o.resolve=a,e.exports=o,o.id=3157},8380:e=>{"use strict";var t=function(){var e=function(){};function t(e,t){Array.isArray(e)?e.forEach(t):null!=e&&t(e,0)}function n(e){for(var t={},n=0,r=e.length;n<r;n++)t[e[n]]=!0;return t}function r(e){var n={},r=[];function o(r,a){if(!(r in n)){a.push(r);var i=a.indexOf(r);if(i<a.length-1)throw new Error("Circular dependency: "+a.slice(i).join(" -> "));var s={},l=e[r];if(l){function c(t){if(!(t in e))throw new Error(r+" depends on an unknown component "+t);if(!(t in s))for(var i in o(t,a),s[t]=!0,n[t])s[i]=!0}t(l.require,c),t(l.optional,c),t(l.modify,c)}n[r]=s,a.pop()}}return function(e){var t=n[e];return t||(o(e,r),t=n[e]),t}}function o(e){for(var t in e)return!0;return!1}return function(a,i,s){var l=function(e){var t={};for(var n in e){var r=e[n];for(var o in r)if("meta"!=o){var a=r[o];t[o]="string"==typeof a?{title:a}:a}}return t}(a),c=function(e){var n;return function(r){if(r in e)return r;if(!n)for(var o in n={},e){var a=e[o];t(a&&a.alias,(function(t){if(t in n)throw new Error(t+" cannot be alias for both "+o+" and "+n[t]);if(t in e)throw new Error(t+" cannot be alias of "+o+" because it is a component.");n[t]=o}))}return n[r]||r}}(l);i=i.map(c),s=(s||[]).map(c);var u=n(i),d=n(s);i.forEach((function e(n){var r=l[n];t(r&&r.require,(function(t){t in d||(u[t]=!0,e(t))}))}));for(var p,f=r(l),g=u;o(g);){for(var m in p={},g){var h=l[m];t(h&&h.modify,(function(e){e in d&&(p[e]=!0)}))}for(var y in d)if(!(y in u))for(var b in f(y))if(b in u){p[y]=!0;break}for(var v in g=p)u[v]=!0}var w={getIds:function(){var e=[];return w.load((function(t){e.push(t)})),e},load:function(t,n){return function(t,n,r,o){var a=o?o.series:void 0,i=o?o.parallel:e,s={},l={};function c(e){if(e in s)return s[e];l[e]=!0;var o,u=[];for(var d in t(e))d in n&&u.push(d);if(0===u.length)o=r(e);else{var p=i(u.map((function(e){var t=c(e);return delete l[e],t})));a?o=a(p,(function(){return r(e)})):r(e)}return s[e]=o}for(var u in n)c(u);var d=[];for(var p in l)d.push(s[p]);return i(d)}(f,u,t,n)}};return w}}();e.exports=t},2694:(e,t,n)=>{"use strict";var r=n(6925);function o(){}function a(){}a.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,a,i){if(i!==r){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:a,resetWarningCache:o};return n.PropTypes=n,n}},5556:(e,t,n)=>{e.exports=n(2694)()},6925:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},2551:(e,t,n)=>{"use strict";var r=n(6540),o=n(9982);function a(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n<arguments.length;n++)t+="&args[]="+encodeURIComponent(arguments[n]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var i=new Set,s={};function l(e,t){c(e,t),c(e+"Capture",t)}function c(e,t){for(s[e]=t,e=0;e<t.length;e++)i.add(t[e])}var u=!("undefined"==typeof window||void 0===window.document||void 0===window.document.createElement),d=Object.prototype.hasOwnProperty,p=/^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,f={},g={};function m(e,t,n,r,o,a,i){this.acceptsBooleans=2===t||3===t||4===t,this.attributeName=r,this.attributeNamespace=o,this.mustUseProperty=n,this.propertyName=e,this.type=t,this.sanitizeURL=a,this.removeEmptyString=i}var h={};"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach((function(e){h[e]=new m(e,0,!1,e,null,!1,!1)})),[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach((function(e){var t=e[0];h[t]=new m(t,1,!1,e[1],null,!1,!1)})),["contentEditable","draggable","spellCheck","value"].forEach((function(e){h[e]=new m(e,2,!1,e.toLowerCase(),null,!1,!1)})),["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach((function(e){h[e]=new m(e,2,!1,e,null,!1,!1)})),"allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach((function(e){h[e]=new m(e,3,!1,e.toLowerCase(),null,!1,!1)})),["checked","multiple","muted","selected"].forEach((function(e){h[e]=new m(e,3,!0,e,null,!1,!1)})),["capture","download"].forEach((function(e){h[e]=new m(e,4,!1,e,null,!1,!1)})),["cols","rows","size","span"].forEach((function(e){h[e]=new m(e,6,!1,e,null,!1,!1)})),["rowSpan","start"].forEach((function(e){h[e]=new m(e,5,!1,e.toLowerCase(),null,!1,!1)}));var y=/[\-:]([a-z])/g;function b(e){return e[1].toUpperCase()}function v(e,t,n,r){var o=h.hasOwnProperty(t)?h[t]:null;(null!==o?0!==o.type:r||!(2<t.length)||"o"!==t[0]&&"O"!==t[0]||"n"!==t[1]&&"N"!==t[1])&&(function(e,t,n,r){if(null==t||function(e,t,n,r){if(null!==n&&0===n.type)return!1;switch(typeof t){case"function":case"symbol":return!0;case"boolean":return!r&&(null!==n?!n.acceptsBooleans:"data-"!==(e=e.toLowerCase().slice(0,5))&&"aria-"!==e);default:return!1}}(e,t,n,r))return!0;if(r)return!1;if(null!==n)switch(n.type){case 3:return!t;case 4:return!1===t;case 5:return isNaN(t);case 6:return isNaN(t)||1>t}return!1}(t,n,o,r)&&(n=null),r||null===o?function(e){return!!d.call(g,e)||!d.call(f,e)&&(p.test(e)?g[e]=!0:(f[e]=!0,!1))}(t)&&(null===n?e.removeAttribute(t):e.setAttribute(t,""+n)):o.mustUseProperty?e[o.propertyName]=null===n?3!==o.type&&"":n:(t=o.attributeName,r=o.attributeNamespace,null===n?e.removeAttribute(t):(n=3===(o=o.type)||4===o&&!0===n?"":""+n,r?e.setAttributeNS(r,t,n):e.setAttribute(t,n))))}"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach((function(e){var t=e.replace(y,b);h[t]=new m(t,1,!1,e,null,!1,!1)})),"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach((function(e){var t=e.replace(y,b);h[t]=new m(t,1,!1,e,"http://www.w3.org/1999/xlink",!1,!1)})),["xml:base","xml:lang","xml:space"].forEach((function(e){var t=e.replace(y,b);h[t]=new m(t,1,!1,e,"http://www.w3.org/XML/1998/namespace",!1,!1)})),["tabIndex","crossOrigin"].forEach((function(e){h[e]=new m(e,1,!1,e.toLowerCase(),null,!1,!1)})),h.xlinkHref=new m("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0,!1),["src","href","action","formAction"].forEach((function(e){h[e]=new m(e,1,!1,e.toLowerCase(),null,!0,!0)}));var w=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,k=Symbol.for("react.element"),x=Symbol.for("react.portal"),S=Symbol.for("react.fragment"),_=Symbol.for("react.strict_mode"),E=Symbol.for("react.profiler"),C=Symbol.for("react.provider"),A=Symbol.for("react.context"),T=Symbol.for("react.forward_ref"),j=Symbol.for("react.suspense"),R=Symbol.for("react.suspense_list"),P=Symbol.for("react.memo"),L=Symbol.for("react.lazy");Symbol.for("react.scope"),Symbol.for("react.debug_trace_mode");var N=Symbol.for("react.offscreen");Symbol.for("react.legacy_hidden"),Symbol.for("react.cache"),Symbol.for("react.tracing_marker");var O=Symbol.iterator;function D(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=O&&e[O]||e["@@iterator"])?e:null}var I,M=Object.assign;function F(e){if(void 0===I)try{throw Error()}catch(n){var t=n.stack.trim().match(/\n( *(at )?)/);I=t&&t[1]||""}return"\n"+I+e}var z=!1;function B(e,t){if(!e||z)return"";z=!0;var n=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{if(t)if(t=function(){throw Error()},Object.defineProperty(t.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(t,[])}catch(c){var r=c}Reflect.construct(e,[],t)}else{try{t.call()}catch(c){r=c}e.call(t.prototype)}else{try{throw Error()}catch(c){r=c}e()}}catch(c){if(c&&r&&"string"==typeof c.stack){for(var o=c.stack.split("\n"),a=r.stack.split("\n"),i=o.length-1,s=a.length-1;1<=i&&0<=s&&o[i]!==a[s];)s--;for(;1<=i&&0<=s;i--,s--)if(o[i]!==a[s]){if(1!==i||1!==s)do{if(i--,0>--s||o[i]!==a[s]){var l="\n"+o[i].replace(" at new "," at ");return e.displayName&&l.includes("<anonymous>")&&(l=l.replace("<anonymous>",e.displayName)),l}}while(1<=i&&0<=s);break}}}finally{z=!1,Error.prepareStackTrace=n}return(e=e?e.displayName||e.name:"")?F(e):""}function $(e){switch(e.tag){case 5:return F(e.type);case 16:return F("Lazy");case 13:return F("Suspense");case 19:return F("SuspenseList");case 0:case 2:case 15:return e=B(e.type,!1);case 11:return e=B(e.type.render,!1);case 1:return e=B(e.type,!0);default:return""}}function U(e){if(null==e)return null;if("function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case S:return"Fragment";case x:return"Portal";case E:return"Profiler";case _:return"StrictMode";case j:return"Suspense";case R:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case A:return(e.displayName||"Context")+".Consumer";case C:return(e._context.displayName||"Context")+".Provider";case T:var t=e.render;return(e=e.displayName)||(e=""!==(e=t.displayName||t.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case P:return null!==(t=e.displayName||null)?t:U(e.type)||"Memo";case L:t=e._payload,e=e._init;try{return U(e(t))}catch(n){}}return null}function q(e){var t=e.type;switch(e.tag){case 24:return"Cache";case 9:return(t.displayName||"Context")+".Consumer";case 10:return(t._context.displayName||"Context")+".Provider";case 18:return"DehydratedFragment";case 11:return e=(e=t.render).displayName||e.name||"",t.displayName||(""!==e?"ForwardRef("+e+")":"ForwardRef");case 7:return"Fragment";case 5:return t;case 4:return"Portal";case 3:return"Root";case 6:return"Text";case 16:return U(t);case 8:return t===_?"StrictMode":"Mode";case 22:return"Offscreen";case 12:return"Profiler";case 21:return"Scope";case 13:return"Suspense";case 19:return"SuspenseList";case 25:return"TracingMarker";case 1:case 0:case 17:case 2:case 14:case 15:if("function"==typeof t)return t.displayName||t.name||null;if("string"==typeof t)return t}return null}function G(e){switch(typeof e){case"boolean":case"number":case"string":case"undefined":case"object":return e;default:return""}}function H(e){var t=e.type;return(e=e.nodeName)&&"input"===e.toLowerCase()&&("checkbox"===t||"radio"===t)}function V(e){e._valueTracker||(e._valueTracker=function(e){var t=H(e)?"checked":"value",n=Object.getOwnPropertyDescriptor(e.constructor.prototype,t),r=""+e[t];if(!e.hasOwnProperty(t)&&void 0!==n&&"function"==typeof n.get&&"function"==typeof n.set){var o=n.get,a=n.set;return Object.defineProperty(e,t,{configurable:!0,get:function(){return o.call(this)},set:function(e){r=""+e,a.call(this,e)}}),Object.defineProperty(e,t,{enumerable:n.enumerable}),{getValue:function(){return r},setValue:function(e){r=""+e},stopTracking:function(){e._valueTracker=null,delete e[t]}}}}(e))}function W(e){if(!e)return!1;var t=e._valueTracker;if(!t)return!0;var n=t.getValue(),r="";return e&&(r=H(e)?e.checked?"true":"false":e.value),(e=r)!==n&&(t.setValue(e),!0)}function K(e){if(void 0===(e=e||("undefined"!=typeof document?document:void 0)))return null;try{return e.activeElement||e.body}catch(t){return e.body}}function Q(e,t){var n=t.checked;return M({},t,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:null!=n?n:e._wrapperState.initialChecked})}function Y(e,t){var n=null==t.defaultValue?"":t.defaultValue,r=null!=t.checked?t.checked:t.defaultChecked;n=G(null!=t.value?t.value:n),e._wrapperState={initialChecked:r,initialValue:n,controlled:"checkbox"===t.type||"radio"===t.type?null!=t.checked:null!=t.value}}function Z(e,t){null!=(t=t.checked)&&v(e,"checked",t,!1)}function X(e,t){Z(e,t);var n=G(t.value),r=t.type;if(null!=n)"number"===r?(0===n&&""===e.value||e.value!=n)&&(e.value=""+n):e.value!==""+n&&(e.value=""+n);else if("submit"===r||"reset"===r)return void e.removeAttribute("value");t.hasOwnProperty("value")?ee(e,t.type,n):t.hasOwnProperty("defaultValue")&&ee(e,t.type,G(t.defaultValue)),null==t.checked&&null!=t.defaultChecked&&(e.defaultChecked=!!t.defaultChecked)}function J(e,t,n){if(t.hasOwnProperty("value")||t.hasOwnProperty("defaultValue")){var r=t.type;if(!("submit"!==r&&"reset"!==r||void 0!==t.value&&null!==t.value))return;t=""+e._wrapperState.initialValue,n||t===e.value||(e.value=t),e.defaultValue=t}""!==(n=e.name)&&(e.name=""),e.defaultChecked=!!e._wrapperState.initialChecked,""!==n&&(e.name=n)}function ee(e,t,n){"number"===t&&K(e.ownerDocument)===e||(null==n?e.defaultValue=""+e._wrapperState.initialValue:e.defaultValue!==""+n&&(e.defaultValue=""+n))}var te=Array.isArray;function ne(e,t,n,r){if(e=e.options,t){t={};for(var o=0;o<n.length;o++)t["$"+n[o]]=!0;for(n=0;n<e.length;n++)o=t.hasOwnProperty("$"+e[n].value),e[n].selected!==o&&(e[n].selected=o),o&&r&&(e[n].defaultSelected=!0)}else{for(n=""+G(n),t=null,o=0;o<e.length;o++){if(e[o].value===n)return e[o].selected=!0,void(r&&(e[o].defaultSelected=!0));null!==t||e[o].disabled||(t=e[o])}null!==t&&(t.selected=!0)}}function re(e,t){if(null!=t.dangerouslySetInnerHTML)throw Error(a(91));return M({},t,{value:void 0,defaultValue:void 0,children:""+e._wrapperState.initialValue})}function oe(e,t){var n=t.value;if(null==n){if(n=t.children,t=t.defaultValue,null!=n){if(null!=t)throw Error(a(92));if(te(n)){if(1<n.length)throw Error(a(93));n=n[0]}t=n}null==t&&(t=""),n=t}e._wrapperState={initialValue:G(n)}}function ae(e,t){var n=G(t.value),r=G(t.defaultValue);null!=n&&((n=""+n)!==e.value&&(e.value=n),null==t.defaultValue&&e.defaultValue!==n&&(e.defaultValue=n)),null!=r&&(e.defaultValue=""+r)}function ie(e){var t=e.textContent;t===e._wrapperState.initialValue&&""!==t&&null!==t&&(e.value=t)}function se(e){switch(e){case"svg":return"http://www.w3.org/2000/svg";case"math":return"http://www.w3.org/1998/Math/MathML";default:return"http://www.w3.org/1999/xhtml"}}function le(e,t){return null==e||"http://www.w3.org/1999/xhtml"===e?se(t):"http://www.w3.org/2000/svg"===e&&"foreignObject"===t?"http://www.w3.org/1999/xhtml":e}var ce,ue,de=(ue=function(e,t){if("http://www.w3.org/2000/svg"!==e.namespaceURI||"innerHTML"in e)e.innerHTML=t;else{for((ce=ce||document.createElement("div")).innerHTML="<svg>"+t.valueOf().toString()+"</svg>",t=ce.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;t.firstChild;)e.appendChild(t.firstChild)}},"undefined"!=typeof MSApp&&MSApp.execUnsafeLocalFunction?function(e,t,n,r){MSApp.execUnsafeLocalFunction((function(){return ue(e,t)}))}:ue);function pe(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t}var fe={animationIterationCount:!0,aspectRatio:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},ge=["Webkit","ms","Moz","O"];function me(e,t,n){return null==t||"boolean"==typeof t||""===t?"":n||"number"!=typeof t||0===t||fe.hasOwnProperty(e)&&fe[e]?(""+t).trim():t+"px"}function he(e,t){for(var n in e=e.style,t)if(t.hasOwnProperty(n)){var r=0===n.indexOf("--"),o=me(n,t[n],r);"float"===n&&(n="cssFloat"),r?e.setProperty(n,o):e[n]=o}}Object.keys(fe).forEach((function(e){ge.forEach((function(t){t=t+e.charAt(0).toUpperCase()+e.substring(1),fe[t]=fe[e]}))}));var ye=M({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0});function be(e,t){if(t){if(ye[e]&&(null!=t.children||null!=t.dangerouslySetInnerHTML))throw Error(a(137,e));if(null!=t.dangerouslySetInnerHTML){if(null!=t.children)throw Error(a(60));if("object"!=typeof t.dangerouslySetInnerHTML||!("__html"in t.dangerouslySetInnerHTML))throw Error(a(61))}if(null!=t.style&&"object"!=typeof t.style)throw Error(a(62))}}function ve(e,t){if(-1===e.indexOf("-"))return"string"==typeof t.is;switch(e){case"annotation-xml":case"color-profile":case"font-face":case"font-face-src":case"font-face-uri":case"font-face-format":case"font-face-name":case"missing-glyph":return!1;default:return!0}}var we=null;function ke(e){return(e=e.target||e.srcElement||window).correspondingUseElement&&(e=e.correspondingUseElement),3===e.nodeType?e.parentNode:e}var xe=null,Se=null,_e=null;function Ee(e){if(e=wo(e)){if("function"!=typeof xe)throw Error(a(280));var t=e.stateNode;t&&(t=xo(t),xe(e.stateNode,e.type,t))}}function Ce(e){Se?_e?_e.push(e):_e=[e]:Se=e}function Ae(){if(Se){var e=Se,t=_e;if(_e=Se=null,Ee(e),t)for(e=0;e<t.length;e++)Ee(t[e])}}function Te(e,t){return e(t)}function je(){}var Re=!1;function Pe(e,t,n){if(Re)return e(t,n);Re=!0;try{return Te(e,t,n)}finally{Re=!1,(null!==Se||null!==_e)&&(je(),Ae())}}function Le(e,t){var n=e.stateNode;if(null===n)return null;var r=xo(n);if(null===r)return null;n=r[t];e:switch(t){case"onClick":case"onClickCapture":case"onDoubleClick":case"onDoubleClickCapture":case"onMouseDown":case"onMouseDownCapture":case"onMouseMove":case"onMouseMoveCapture":case"onMouseUp":case"onMouseUpCapture":case"onMouseEnter":(r=!r.disabled)||(r=!("button"===(e=e.type)||"input"===e||"select"===e||"textarea"===e)),e=!r;break e;default:e=!1}if(e)return null;if(n&&"function"!=typeof n)throw Error(a(231,t,typeof n));return n}var Ne=!1;if(u)try{var Oe={};Object.defineProperty(Oe,"passive",{get:function(){Ne=!0}}),window.addEventListener("test",Oe,Oe),window.removeEventListener("test",Oe,Oe)}catch(ue){Ne=!1}function De(e,t,n,r,o,a,i,s,l){var c=Array.prototype.slice.call(arguments,3);try{t.apply(n,c)}catch(u){this.onError(u)}}var Ie=!1,Me=null,Fe=!1,ze=null,Be={onError:function(e){Ie=!0,Me=e}};function $e(e,t,n,r,o,a,i,s,l){Ie=!1,Me=null,De.apply(Be,arguments)}function Ue(e){var t=e,n=e;if(e.alternate)for(;t.return;)t=t.return;else{e=t;do{!!(4098&(t=e).flags)&&(n=t.return),e=t.return}while(e)}return 3===t.tag?n:null}function qe(e){if(13===e.tag){var t=e.memoizedState;if(null===t&&(null!==(e=e.alternate)&&(t=e.memoizedState)),null!==t)return t.dehydrated}return null}function Ge(e){if(Ue(e)!==e)throw Error(a(188))}function He(e){return null!==(e=function(e){var t=e.alternate;if(!t){if(null===(t=Ue(e)))throw Error(a(188));return t!==e?null:e}for(var n=e,r=t;;){var o=n.return;if(null===o)break;var i=o.alternate;if(null===i){if(null!==(r=o.return)){n=r;continue}break}if(o.child===i.child){for(i=o.child;i;){if(i===n)return Ge(o),e;if(i===r)return Ge(o),t;i=i.sibling}throw Error(a(188))}if(n.return!==r.return)n=o,r=i;else{for(var s=!1,l=o.child;l;){if(l===n){s=!0,n=o,r=i;break}if(l===r){s=!0,r=o,n=i;break}l=l.sibling}if(!s){for(l=i.child;l;){if(l===n){s=!0,n=i,r=o;break}if(l===r){s=!0,r=i,n=o;break}l=l.sibling}if(!s)throw Error(a(189))}}if(n.alternate!==r)throw Error(a(190))}if(3!==n.tag)throw Error(a(188));return n.stateNode.current===n?e:t}(e))?Ve(e):null}function Ve(e){if(5===e.tag||6===e.tag)return e;for(e=e.child;null!==e;){var t=Ve(e);if(null!==t)return t;e=e.sibling}return null}var We=o.unstable_scheduleCallback,Ke=o.unstable_cancelCallback,Qe=o.unstable_shouldYield,Ye=o.unstable_requestPaint,Ze=o.unstable_now,Xe=o.unstable_getCurrentPriorityLevel,Je=o.unstable_ImmediatePriority,et=o.unstable_UserBlockingPriority,tt=o.unstable_NormalPriority,nt=o.unstable_LowPriority,rt=o.unstable_IdlePriority,ot=null,at=null;var it=Math.clz32?Math.clz32:function(e){return e>>>=0,0===e?32:31-(st(e)/lt|0)|0},st=Math.log,lt=Math.LN2;var ct=64,ut=4194304;function dt(e){switch(e&-e){case 1:return 1;case 2:return 2;case 4:return 4;case 8:return 8;case 16:return 16;case 32:return 32;case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return 4194240&e;case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:return 130023424&e;case 134217728:return 134217728;case 268435456:return 268435456;case 536870912:return 536870912;case 1073741824:return 1073741824;default:return e}}function pt(e,t){var n=e.pendingLanes;if(0===n)return 0;var r=0,o=e.suspendedLanes,a=e.pingedLanes,i=268435455&n;if(0!==i){var s=i&~o;0!==s?r=dt(s):0!==(a&=i)&&(r=dt(a))}else 0!==(i=n&~o)?r=dt(i):0!==a&&(r=dt(a));if(0===r)return 0;if(0!==t&&t!==r&&!(t&o)&&((o=r&-r)>=(a=t&-t)||16===o&&4194240&a))return t;if(4&r&&(r|=16&n),0!==(t=e.entangledLanes))for(e=e.entanglements,t&=r;0<t;)o=1<<(n=31-it(t)),r|=e[n],t&=~o;return r}function ft(e,t){switch(e){case 1:case 2:case 4:return t+250;case 8:case 16:case 32:case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return t+5e3;default:return-1}}function gt(e){return 0!==(e=-1073741825&e.pendingLanes)?e:1073741824&e?1073741824:0}function mt(){var e=ct;return!(4194240&(ct<<=1))&&(ct=64),e}function ht(e){for(var t=[],n=0;31>n;n++)t.push(e);return t}function yt(e,t,n){e.pendingLanes|=t,536870912!==t&&(e.suspendedLanes=0,e.pingedLanes=0),(e=e.eventTimes)[t=31-it(t)]=n}function bt(e,t){var n=e.entangledLanes|=t;for(e=e.entanglements;n;){var r=31-it(n),o=1<<r;o&t|e[r]&t&&(e[r]|=t),n&=~o}}var vt=0;function wt(e){return 1<(e&=-e)?4<e?268435455&e?16:536870912:4:1}var kt,xt,St,_t,Et,Ct=!1,At=[],Tt=null,jt=null,Rt=null,Pt=new Map,Lt=new Map,Nt=[],Ot="mousedown mouseup touchcancel touchend touchstart auxclick dblclick pointercancel pointerdown pointerup dragend dragstart drop compositionend compositionstart keydown keypress keyup input textInput copy cut paste click change contextmenu reset submit".split(" ");function Dt(e,t){switch(e){case"focusin":case"focusout":Tt=null;break;case"dragenter":case"dragleave":jt=null;break;case"mouseover":case"mouseout":Rt=null;break;case"pointerover":case"pointerout":Pt.delete(t.pointerId);break;case"gotpointercapture":case"lostpointercapture":Lt.delete(t.pointerId)}}function It(e,t,n,r,o,a){return null===e||e.nativeEvent!==a?(e={blockedOn:t,domEventName:n,eventSystemFlags:r,nativeEvent:a,targetContainers:[o]},null!==t&&(null!==(t=wo(t))&&xt(t)),e):(e.eventSystemFlags|=r,t=e.targetContainers,null!==o&&-1===t.indexOf(o)&&t.push(o),e)}function Mt(e){var t=vo(e.target);if(null!==t){var n=Ue(t);if(null!==n)if(13===(t=n.tag)){if(null!==(t=qe(n)))return e.blockedOn=t,void Et(e.priority,(function(){St(n)}))}else if(3===t&&n.stateNode.current.memoizedState.isDehydrated)return void(e.blockedOn=3===n.tag?n.stateNode.containerInfo:null)}e.blockedOn=null}function Ft(e){if(null!==e.blockedOn)return!1;for(var t=e.targetContainers;0<t.length;){var n=Qt(e.domEventName,e.eventSystemFlags,t[0],e.nativeEvent);if(null!==n)return null!==(t=wo(n))&&xt(t),e.blockedOn=n,!1;var r=new(n=e.nativeEvent).constructor(n.type,n);we=r,n.target.dispatchEvent(r),we=null,t.shift()}return!0}function zt(e,t,n){Ft(e)&&n.delete(t)}function Bt(){Ct=!1,null!==Tt&&Ft(Tt)&&(Tt=null),null!==jt&&Ft(jt)&&(jt=null),null!==Rt&&Ft(Rt)&&(Rt=null),Pt.forEach(zt),Lt.forEach(zt)}function $t(e,t){e.blockedOn===t&&(e.blockedOn=null,Ct||(Ct=!0,o.unstable_scheduleCallback(o.unstable_NormalPriority,Bt)))}function Ut(e){function t(t){return $t(t,e)}if(0<At.length){$t(At[0],e);for(var n=1;n<At.length;n++){var r=At[n];r.blockedOn===e&&(r.blockedOn=null)}}for(null!==Tt&&$t(Tt,e),null!==jt&&$t(jt,e),null!==Rt&&$t(Rt,e),Pt.forEach(t),Lt.forEach(t),n=0;n<Nt.length;n++)(r=Nt[n]).blockedOn===e&&(r.blockedOn=null);for(;0<Nt.length&&null===(n=Nt[0]).blockedOn;)Mt(n),null===n.blockedOn&&Nt.shift()}var qt=w.ReactCurrentBatchConfig,Gt=!0;function Ht(e,t,n,r){var o=vt,a=qt.transition;qt.transition=null;try{vt=1,Wt(e,t,n,r)}finally{vt=o,qt.transition=a}}function Vt(e,t,n,r){var o=vt,a=qt.transition;qt.transition=null;try{vt=4,Wt(e,t,n,r)}finally{vt=o,qt.transition=a}}function Wt(e,t,n,r){if(Gt){var o=Qt(e,t,n,r);if(null===o)Gr(e,t,r,Kt,n),Dt(e,r);else if(function(e,t,n,r,o){switch(t){case"focusin":return Tt=It(Tt,e,t,n,r,o),!0;case"dragenter":return jt=It(jt,e,t,n,r,o),!0;case"mouseover":return Rt=It(Rt,e,t,n,r,o),!0;case"pointerover":var a=o.pointerId;return Pt.set(a,It(Pt.get(a)||null,e,t,n,r,o)),!0;case"gotpointercapture":return a=o.pointerId,Lt.set(a,It(Lt.get(a)||null,e,t,n,r,o)),!0}return!1}(o,e,t,n,r))r.stopPropagation();else if(Dt(e,r),4&t&&-1<Ot.indexOf(e)){for(;null!==o;){var a=wo(o);if(null!==a&&kt(a),null===(a=Qt(e,t,n,r))&&Gr(e,t,r,Kt,n),a===o)break;o=a}null!==o&&r.stopPropagation()}else Gr(e,t,r,null,n)}}var Kt=null;function Qt(e,t,n,r){if(Kt=null,null!==(e=vo(e=ke(r))))if(null===(t=Ue(e)))e=null;else if(13===(n=t.tag)){if(null!==(e=qe(t)))return e;e=null}else if(3===n){if(t.stateNode.current.memoizedState.isDehydrated)return 3===t.tag?t.stateNode.containerInfo:null;e=null}else t!==e&&(e=null);return Kt=e,null}function Yt(e){switch(e){case"cancel":case"click":case"close":case"contextmenu":case"copy":case"cut":case"auxclick":case"dblclick":case"dragend":case"dragstart":case"drop":case"focusin":case"focusout":case"input":case"invalid":case"keydown":case"keypress":case"keyup":case"mousedown":case"mouseup":case"paste":case"pause":case"play":case"pointercancel":case"pointerdown":case"pointerup":case"ratechange":case"reset":case"resize":case"seeked":case"submit":case"touchcancel":case"touchend":case"touchstart":case"volumechange":case"change":case"selectionchange":case"textInput":case"compositionstart":case"compositionend":case"compositionupdate":case"beforeblur":case"afterblur":case"beforeinput":case"blur":case"fullscreenchange":case"focus":case"hashchange":case"popstate":case"select":case"selectstart":return 1;case"drag":case"dragenter":case"dragexit":case"dragleave":case"dragover":case"mousemove":case"mouseout":case"mouseover":case"pointermove":case"pointerout":case"pointerover":case"scroll":case"toggle":case"touchmove":case"wheel":case"mouseenter":case"mouseleave":case"pointerenter":case"pointerleave":return 4;case"message":switch(Xe()){case Je:return 1;case et:return 4;case tt:case nt:return 16;case rt:return 536870912;default:return 16}default:return 16}}var Zt=null,Xt=null,Jt=null;function en(){if(Jt)return Jt;var e,t,n=Xt,r=n.length,o="value"in Zt?Zt.value:Zt.textContent,a=o.length;for(e=0;e<r&&n[e]===o[e];e++);var i=r-e;for(t=1;t<=i&&n[r-t]===o[a-t];t++);return Jt=o.slice(e,1<t?1-t:void 0)}function tn(e){var t=e.keyCode;return"charCode"in e?0===(e=e.charCode)&&13===t&&(e=13):e=t,10===e&&(e=13),32<=e||13===e?e:0}function nn(){return!0}function rn(){return!1}function on(e){function t(t,n,r,o,a){for(var i in this._reactName=t,this._targetInst=r,this.type=n,this.nativeEvent=o,this.target=a,this.currentTarget=null,e)e.hasOwnProperty(i)&&(t=e[i],this[i]=t?t(o):o[i]);return this.isDefaultPrevented=(null!=o.defaultPrevented?o.defaultPrevented:!1===o.returnValue)?nn:rn,this.isPropagationStopped=rn,this}return M(t.prototype,{preventDefault:function(){this.defaultPrevented=!0;var e=this.nativeEvent;e&&(e.preventDefault?e.preventDefault():"unknown"!=typeof e.returnValue&&(e.returnValue=!1),this.isDefaultPrevented=nn)},stopPropagation:function(){var e=this.nativeEvent;e&&(e.stopPropagation?e.stopPropagation():"unknown"!=typeof e.cancelBubble&&(e.cancelBubble=!0),this.isPropagationStopped=nn)},persist:function(){},isPersistent:nn}),t}var an,sn,ln,cn={eventPhase:0,bubbles:0,cancelable:0,timeStamp:function(e){return e.timeStamp||Date.now()},defaultPrevented:0,isTrusted:0},un=on(cn),dn=M({},cn,{view:0,detail:0}),pn=on(dn),fn=M({},dn,{screenX:0,screenY:0,clientX:0,clientY:0,pageX:0,pageY:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,getModifierState:En,button:0,buttons:0,relatedTarget:function(e){return void 0===e.relatedTarget?e.fromElement===e.srcElement?e.toElement:e.fromElement:e.relatedTarget},movementX:function(e){return"movementX"in e?e.movementX:(e!==ln&&(ln&&"mousemove"===e.type?(an=e.screenX-ln.screenX,sn=e.screenY-ln.screenY):sn=an=0,ln=e),an)},movementY:function(e){return"movementY"in e?e.movementY:sn}}),gn=on(fn),mn=on(M({},fn,{dataTransfer:0})),hn=on(M({},dn,{relatedTarget:0})),yn=on(M({},cn,{animationName:0,elapsedTime:0,pseudoElement:0})),bn=M({},cn,{clipboardData:function(e){return"clipboardData"in e?e.clipboardData:window.clipboardData}}),vn=on(bn),wn=on(M({},cn,{data:0})),kn={Esc:"Escape",Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",MozPrintableKey:"Unidentified"},xn={8:"Backspace",9:"Tab",12:"Clear",13:"Enter",16:"Shift",17:"Control",18:"Alt",19:"Pause",20:"CapsLock",27:"Escape",32:" ",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown",45:"Insert",46:"Delete",112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"NumLock",145:"ScrollLock",224:"Meta"},Sn={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"};function _n(e){var t=this.nativeEvent;return t.getModifierState?t.getModifierState(e):!!(e=Sn[e])&&!!t[e]}function En(){return _n}var Cn=M({},dn,{key:function(e){if(e.key){var t=kn[e.key]||e.key;if("Unidentified"!==t)return t}return"keypress"===e.type?13===(e=tn(e))?"Enter":String.fromCharCode(e):"keydown"===e.type||"keyup"===e.type?xn[e.keyCode]||"Unidentified":""},code:0,location:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,repeat:0,locale:0,getModifierState:En,charCode:function(e){return"keypress"===e.type?tn(e):0},keyCode:function(e){return"keydown"===e.type||"keyup"===e.type?e.keyCode:0},which:function(e){return"keypress"===e.type?tn(e):"keydown"===e.type||"keyup"===e.type?e.keyCode:0}}),An=on(Cn),Tn=on(M({},fn,{pointerId:0,width:0,height:0,pressure:0,tangentialPressure:0,tiltX:0,tiltY:0,twist:0,pointerType:0,isPrimary:0})),jn=on(M({},dn,{touches:0,targetTouches:0,changedTouches:0,altKey:0,metaKey:0,ctrlKey:0,shiftKey:0,getModifierState:En})),Rn=on(M({},cn,{propertyName:0,elapsedTime:0,pseudoElement:0})),Pn=M({},fn,{deltaX:function(e){return"deltaX"in e?e.deltaX:"wheelDeltaX"in e?-e.wheelDeltaX:0},deltaY:function(e){return"deltaY"in e?e.deltaY:"wheelDeltaY"in e?-e.wheelDeltaY:"wheelDelta"in e?-e.wheelDelta:0},deltaZ:0,deltaMode:0}),Ln=on(Pn),Nn=[9,13,27,32],On=u&&"CompositionEvent"in window,Dn=null;u&&"documentMode"in document&&(Dn=document.documentMode);var In=u&&"TextEvent"in window&&!Dn,Mn=u&&(!On||Dn&&8<Dn&&11>=Dn),Fn=String.fromCharCode(32),zn=!1;function Bn(e,t){switch(e){case"keyup":return-1!==Nn.indexOf(t.keyCode);case"keydown":return 229!==t.keyCode;case"keypress":case"mousedown":case"focusout":return!0;default:return!1}}function $n(e){return"object"==typeof(e=e.detail)&&"data"in e?e.data:null}var Un=!1;var qn={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};function Gn(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===t?!!qn[e.type]:"textarea"===t}function Hn(e,t,n,r){Ce(r),0<(t=Vr(t,"onChange")).length&&(n=new un("onChange","change",null,n,r),e.push({event:n,listeners:t}))}var Vn=null,Wn=null;function Kn(e){Fr(e,0)}function Qn(e){if(W(ko(e)))return e}function Yn(e,t){if("change"===e)return t}var Zn=!1;if(u){var Xn;if(u){var Jn="oninput"in document;if(!Jn){var er=document.createElement("div");er.setAttribute("oninput","return;"),Jn="function"==typeof er.oninput}Xn=Jn}else Xn=!1;Zn=Xn&&(!document.documentMode||9<document.documentMode)}function tr(){Vn&&(Vn.detachEvent("onpropertychange",nr),Wn=Vn=null)}function nr(e){if("value"===e.propertyName&&Qn(Wn)){var t=[];Hn(t,Wn,e,ke(e)),Pe(Kn,t)}}function rr(e,t,n){"focusin"===e?(tr(),Wn=n,(Vn=t).attachEvent("onpropertychange",nr)):"focusout"===e&&tr()}function or(e){if("selectionchange"===e||"keyup"===e||"keydown"===e)return Qn(Wn)}function ar(e,t){if("click"===e)return Qn(t)}function ir(e,t){if("input"===e||"change"===e)return Qn(t)}var sr="function"==typeof Object.is?Object.is:function(e,t){return e===t&&(0!==e||1/e==1/t)||e!=e&&t!=t};function lr(e,t){if(sr(e,t))return!0;if("object"!=typeof e||null===e||"object"!=typeof t||null===t)return!1;var n=Object.keys(e),r=Object.keys(t);if(n.length!==r.length)return!1;for(r=0;r<n.length;r++){var o=n[r];if(!d.call(t,o)||!sr(e[o],t[o]))return!1}return!0}function cr(e){for(;e&&e.firstChild;)e=e.firstChild;return e}function ur(e,t){var n,r=cr(e);for(e=0;r;){if(3===r.nodeType){if(n=e+r.textContent.length,e<=t&&n>=t)return{node:r,offset:t-e};e=n}e:{for(;r;){if(r.nextSibling){r=r.nextSibling;break e}r=r.parentNode}r=void 0}r=cr(r)}}function dr(e,t){return!(!e||!t)&&(e===t||(!e||3!==e.nodeType)&&(t&&3===t.nodeType?dr(e,t.parentNode):"contains"in e?e.contains(t):!!e.compareDocumentPosition&&!!(16&e.compareDocumentPosition(t))))}function pr(){for(var e=window,t=K();t instanceof e.HTMLIFrameElement;){try{var n="string"==typeof t.contentWindow.location.href}catch(r){n=!1}if(!n)break;t=K((e=t.contentWindow).document)}return t}function fr(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&("text"===e.type||"search"===e.type||"tel"===e.type||"url"===e.type||"password"===e.type)||"textarea"===t||"true"===e.contentEditable)}function gr(e){var t=pr(),n=e.focusedElem,r=e.selectionRange;if(t!==n&&n&&n.ownerDocument&&dr(n.ownerDocument.documentElement,n)){if(null!==r&&fr(n))if(t=r.start,void 0===(e=r.end)&&(e=t),"selectionStart"in n)n.selectionStart=t,n.selectionEnd=Math.min(e,n.value.length);else if((e=(t=n.ownerDocument||document)&&t.defaultView||window).getSelection){e=e.getSelection();var o=n.textContent.length,a=Math.min(r.start,o);r=void 0===r.end?a:Math.min(r.end,o),!e.extend&&a>r&&(o=r,r=a,a=o),o=ur(n,a);var i=ur(n,r);o&&i&&(1!==e.rangeCount||e.anchorNode!==o.node||e.anchorOffset!==o.offset||e.focusNode!==i.node||e.focusOffset!==i.offset)&&((t=t.createRange()).setStart(o.node,o.offset),e.removeAllRanges(),a>r?(e.addRange(t),e.extend(i.node,i.offset)):(t.setEnd(i.node,i.offset),e.addRange(t)))}for(t=[],e=n;e=e.parentNode;)1===e.nodeType&&t.push({element:e,left:e.scrollLeft,top:e.scrollTop});for("function"==typeof n.focus&&n.focus(),n=0;n<t.length;n++)(e=t[n]).element.scrollLeft=e.left,e.element.scrollTop=e.top}}var mr=u&&"documentMode"in document&&11>=document.documentMode,hr=null,yr=null,br=null,vr=!1;function wr(e,t,n){var r=n.window===n?n.document:9===n.nodeType?n:n.ownerDocument;vr||null==hr||hr!==K(r)||("selectionStart"in(r=hr)&&fr(r)?r={start:r.selectionStart,end:r.selectionEnd}:r={anchorNode:(r=(r.ownerDocument&&r.ownerDocument.defaultView||window).getSelection()).anchorNode,anchorOffset:r.anchorOffset,focusNode:r.focusNode,focusOffset:r.focusOffset},br&&lr(br,r)||(br=r,0<(r=Vr(yr,"onSelect")).length&&(t=new un("onSelect","select",null,t,n),e.push({event:t,listeners:r}),t.target=hr)))}function kr(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["Webkit"+e]="webkit"+t,n["Moz"+e]="moz"+t,n}var xr={animationend:kr("Animation","AnimationEnd"),animationiteration:kr("Animation","AnimationIteration"),animationstart:kr("Animation","AnimationStart"),transitionend:kr("Transition","TransitionEnd")},Sr={},_r={};function Er(e){if(Sr[e])return Sr[e];if(!xr[e])return e;var t,n=xr[e];for(t in n)if(n.hasOwnProperty(t)&&t in _r)return Sr[e]=n[t];return e}u&&(_r=document.createElement("div").style,"AnimationEvent"in window||(delete xr.animationend.animation,delete xr.animationiteration.animation,delete xr.animationstart.animation),"TransitionEvent"in window||delete xr.transitionend.transition);var Cr=Er("animationend"),Ar=Er("animationiteration"),Tr=Er("animationstart"),jr=Er("transitionend"),Rr=new Map,Pr="abort auxClick cancel canPlay canPlayThrough click close contextMenu copy cut drag dragEnd dragEnter dragExit dragLeave dragOver dragStart drop durationChange emptied encrypted ended error gotPointerCapture input invalid keyDown keyPress keyUp load loadedData loadedMetadata loadStart lostPointerCapture mouseDown mouseMove mouseOut mouseOver mouseUp paste pause play playing pointerCancel pointerDown pointerMove pointerOut pointerOver pointerUp progress rateChange reset resize seeked seeking stalled submit suspend timeUpdate touchCancel touchEnd touchStart volumeChange scroll toggle touchMove waiting wheel".split(" ");function Lr(e,t){Rr.set(e,t),l(t,[e])}for(var Nr=0;Nr<Pr.length;Nr++){var Or=Pr[Nr];Lr(Or.toLowerCase(),"on"+(Or[0].toUpperCase()+Or.slice(1)))}Lr(Cr,"onAnimationEnd"),Lr(Ar,"onAnimationIteration"),Lr(Tr,"onAnimationStart"),Lr("dblclick","onDoubleClick"),Lr("focusin","onFocus"),Lr("focusout","onBlur"),Lr(jr,"onTransitionEnd"),c("onMouseEnter",["mouseout","mouseover"]),c("onMouseLeave",["mouseout","mouseover"]),c("onPointerEnter",["pointerout","pointerover"]),c("onPointerLeave",["pointerout","pointerover"]),l("onChange","change click focusin focusout input keydown keyup selectionchange".split(" ")),l("onSelect","focusout contextmenu dragend focusin keydown keyup mousedown mouseup selectionchange".split(" ")),l("onBeforeInput",["compositionend","keypress","textInput","paste"]),l("onCompositionEnd","compositionend focusout keydown keypress keyup mousedown".split(" ")),l("onCompositionStart","compositionstart focusout keydown keypress keyup mousedown".split(" ")),l("onCompositionUpdate","compositionupdate focusout keydown keypress keyup mousedown".split(" "));var Dr="abort canplay canplaythrough durationchange emptied encrypted ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange resize seeked seeking stalled suspend timeupdate volumechange waiting".split(" "),Ir=new Set("cancel close invalid load scroll toggle".split(" ").concat(Dr));function Mr(e,t,n){var r=e.type||"unknown-event";e.currentTarget=n,function(e,t,n,r,o,i,s,l,c){if($e.apply(this,arguments),Ie){if(!Ie)throw Error(a(198));var u=Me;Ie=!1,Me=null,Fe||(Fe=!0,ze=u)}}(r,t,void 0,e),e.currentTarget=null}function Fr(e,t){t=!!(4&t);for(var n=0;n<e.length;n++){var r=e[n],o=r.event;r=r.listeners;e:{var a=void 0;if(t)for(var i=r.length-1;0<=i;i--){var s=r[i],l=s.instance,c=s.currentTarget;if(s=s.listener,l!==a&&o.isPropagationStopped())break e;Mr(o,s,c),a=l}else for(i=0;i<r.length;i++){if(l=(s=r[i]).instance,c=s.currentTarget,s=s.listener,l!==a&&o.isPropagationStopped())break e;Mr(o,s,c),a=l}}}if(Fe)throw e=ze,Fe=!1,ze=null,e}function zr(e,t){var n=t[ho];void 0===n&&(n=t[ho]=new Set);var r=e+"__bubble";n.has(r)||(qr(t,e,2,!1),n.add(r))}function Br(e,t,n){var r=0;t&&(r|=4),qr(n,e,r,t)}var $r="_reactListening"+Math.random().toString(36).slice(2);function Ur(e){if(!e[$r]){e[$r]=!0,i.forEach((function(t){"selectionchange"!==t&&(Ir.has(t)||Br(t,!1,e),Br(t,!0,e))}));var t=9===e.nodeType?e:e.ownerDocument;null===t||t[$r]||(t[$r]=!0,Br("selectionchange",!1,t))}}function qr(e,t,n,r){switch(Yt(t)){case 1:var o=Ht;break;case 4:o=Vt;break;default:o=Wt}n=o.bind(null,t,n,e),o=void 0,!Ne||"touchstart"!==t&&"touchmove"!==t&&"wheel"!==t||(o=!0),r?void 0!==o?e.addEventListener(t,n,{capture:!0,passive:o}):e.addEventListener(t,n,!0):void 0!==o?e.addEventListener(t,n,{passive:o}):e.addEventListener(t,n,!1)}function Gr(e,t,n,r,o){var a=r;if(!(1&t||2&t||null===r))e:for(;;){if(null===r)return;var i=r.tag;if(3===i||4===i){var s=r.stateNode.containerInfo;if(s===o||8===s.nodeType&&s.parentNode===o)break;if(4===i)for(i=r.return;null!==i;){var l=i.tag;if((3===l||4===l)&&((l=i.stateNode.containerInfo)===o||8===l.nodeType&&l.parentNode===o))return;i=i.return}for(;null!==s;){if(null===(i=vo(s)))return;if(5===(l=i.tag)||6===l){r=a=i;continue e}s=s.parentNode}}r=r.return}Pe((function(){var r=a,o=ke(n),i=[];e:{var s=Rr.get(e);if(void 0!==s){var l=un,c=e;switch(e){case"keypress":if(0===tn(n))break e;case"keydown":case"keyup":l=An;break;case"focusin":c="focus",l=hn;break;case"focusout":c="blur",l=hn;break;case"beforeblur":case"afterblur":l=hn;break;case"click":if(2===n.button)break e;case"auxclick":case"dblclick":case"mousedown":case"mousemove":case"mouseup":case"mouseout":case"mouseover":case"contextmenu":l=gn;break;case"drag":case"dragend":case"dragenter":case"dragexit":case"dragleave":case"dragover":case"dragstart":case"drop":l=mn;break;case"touchcancel":case"touchend":case"touchmove":case"touchstart":l=jn;break;case Cr:case Ar:case Tr:l=yn;break;case jr:l=Rn;break;case"scroll":l=pn;break;case"wheel":l=Ln;break;case"copy":case"cut":case"paste":l=vn;break;case"gotpointercapture":case"lostpointercapture":case"pointercancel":case"pointerdown":case"pointermove":case"pointerout":case"pointerover":case"pointerup":l=Tn}var u=!!(4&t),d=!u&&"scroll"===e,p=u?null!==s?s+"Capture":null:s;u=[];for(var f,g=r;null!==g;){var m=(f=g).stateNode;if(5===f.tag&&null!==m&&(f=m,null!==p&&(null!=(m=Le(g,p))&&u.push(Hr(g,m,f)))),d)break;g=g.return}0<u.length&&(s=new l(s,c,null,n,o),i.push({event:s,listeners:u}))}}if(!(7&t)){if(l="mouseout"===e||"pointerout"===e,(!(s="mouseover"===e||"pointerover"===e)||n===we||!(c=n.relatedTarget||n.fromElement)||!vo(c)&&!c[mo])&&(l||s)&&(s=o.window===o?o:(s=o.ownerDocument)?s.defaultView||s.parentWindow:window,l?(l=r,null!==(c=(c=n.relatedTarget||n.toElement)?vo(c):null)&&(c!==(d=Ue(c))||5!==c.tag&&6!==c.tag)&&(c=null)):(l=null,c=r),l!==c)){if(u=gn,m="onMouseLeave",p="onMouseEnter",g="mouse","pointerout"!==e&&"pointerover"!==e||(u=Tn,m="onPointerLeave",p="onPointerEnter",g="pointer"),d=null==l?s:ko(l),f=null==c?s:ko(c),(s=new u(m,g+"leave",l,n,o)).target=d,s.relatedTarget=f,m=null,vo(o)===r&&((u=new u(p,g+"enter",c,n,o)).target=f,u.relatedTarget=d,m=u),d=m,l&&c)e:{for(p=c,g=0,f=u=l;f;f=Wr(f))g++;for(f=0,m=p;m;m=Wr(m))f++;for(;0<g-f;)u=Wr(u),g--;for(;0<f-g;)p=Wr(p),f--;for(;g--;){if(u===p||null!==p&&u===p.alternate)break e;u=Wr(u),p=Wr(p)}u=null}else u=null;null!==l&&Kr(i,s,l,u,!1),null!==c&&null!==d&&Kr(i,d,c,u,!0)}if("select"===(l=(s=r?ko(r):window).nodeName&&s.nodeName.toLowerCase())||"input"===l&&"file"===s.type)var h=Yn;else if(Gn(s))if(Zn)h=ir;else{h=or;var y=rr}else(l=s.nodeName)&&"input"===l.toLowerCase()&&("checkbox"===s.type||"radio"===s.type)&&(h=ar);switch(h&&(h=h(e,r))?Hn(i,h,n,o):(y&&y(e,s,r),"focusout"===e&&(y=s._wrapperState)&&y.controlled&&"number"===s.type&&ee(s,"number",s.value)),y=r?ko(r):window,e){case"focusin":(Gn(y)||"true"===y.contentEditable)&&(hr=y,yr=r,br=null);break;case"focusout":br=yr=hr=null;break;case"mousedown":vr=!0;break;case"contextmenu":case"mouseup":case"dragend":vr=!1,wr(i,n,o);break;case"selectionchange":if(mr)break;case"keydown":case"keyup":wr(i,n,o)}var b;if(On)e:{switch(e){case"compositionstart":var v="onCompositionStart";break e;case"compositionend":v="onCompositionEnd";break e;case"compositionupdate":v="onCompositionUpdate";break e}v=void 0}else Un?Bn(e,n)&&(v="onCompositionEnd"):"keydown"===e&&229===n.keyCode&&(v="onCompositionStart");v&&(Mn&&"ko"!==n.locale&&(Un||"onCompositionStart"!==v?"onCompositionEnd"===v&&Un&&(b=en()):(Xt="value"in(Zt=o)?Zt.value:Zt.textContent,Un=!0)),0<(y=Vr(r,v)).length&&(v=new wn(v,e,null,n,o),i.push({event:v,listeners:y}),b?v.data=b:null!==(b=$n(n))&&(v.data=b))),(b=In?function(e,t){switch(e){case"compositionend":return $n(t);case"keypress":return 32!==t.which?null:(zn=!0,Fn);case"textInput":return(e=t.data)===Fn&&zn?null:e;default:return null}}(e,n):function(e,t){if(Un)return"compositionend"===e||!On&&Bn(e,t)?(e=en(),Jt=Xt=Zt=null,Un=!1,e):null;switch(e){case"paste":default:return null;case"keypress":if(!(t.ctrlKey||t.altKey||t.metaKey)||t.ctrlKey&&t.altKey){if(t.char&&1<t.char.length)return t.char;if(t.which)return String.fromCharCode(t.which)}return null;case"compositionend":return Mn&&"ko"!==t.locale?null:t.data}}(e,n))&&(0<(r=Vr(r,"onBeforeInput")).length&&(o=new wn("onBeforeInput","beforeinput",null,n,o),i.push({event:o,listeners:r}),o.data=b))}Fr(i,t)}))}function Hr(e,t,n){return{instance:e,listener:t,currentTarget:n}}function Vr(e,t){for(var n=t+"Capture",r=[];null!==e;){var o=e,a=o.stateNode;5===o.tag&&null!==a&&(o=a,null!=(a=Le(e,n))&&r.unshift(Hr(e,a,o)),null!=(a=Le(e,t))&&r.push(Hr(e,a,o))),e=e.return}return r}function Wr(e){if(null===e)return null;do{e=e.return}while(e&&5!==e.tag);return e||null}function Kr(e,t,n,r,o){for(var a=t._reactName,i=[];null!==n&&n!==r;){var s=n,l=s.alternate,c=s.stateNode;if(null!==l&&l===r)break;5===s.tag&&null!==c&&(s=c,o?null!=(l=Le(n,a))&&i.unshift(Hr(n,l,s)):o||null!=(l=Le(n,a))&&i.push(Hr(n,l,s))),n=n.return}0!==i.length&&e.push({event:t,listeners:i})}var Qr=/\r\n?/g,Yr=/\u0000|\uFFFD/g;function Zr(e){return("string"==typeof e?e:""+e).replace(Qr,"\n").replace(Yr,"")}function Xr(e,t,n){if(t=Zr(t),Zr(e)!==t&&n)throw Error(a(425))}function Jr(){}var eo=null,to=null;function no(e,t){return"textarea"===e||"noscript"===e||"string"==typeof t.children||"number"==typeof t.children||"object"==typeof t.dangerouslySetInnerHTML&&null!==t.dangerouslySetInnerHTML&&null!=t.dangerouslySetInnerHTML.__html}var ro="function"==typeof setTimeout?setTimeout:void 0,oo="function"==typeof clearTimeout?clearTimeout:void 0,ao="function"==typeof Promise?Promise:void 0,io="function"==typeof queueMicrotask?queueMicrotask:void 0!==ao?function(e){return ao.resolve(null).then(e).catch(so)}:ro;function so(e){setTimeout((function(){throw e}))}function lo(e,t){var n=t,r=0;do{var o=n.nextSibling;if(e.removeChild(n),o&&8===o.nodeType)if("/$"===(n=o.data)){if(0===r)return e.removeChild(o),void Ut(t);r--}else"$"!==n&&"$?"!==n&&"$!"!==n||r++;n=o}while(n);Ut(t)}function co(e){for(;null!=e;e=e.nextSibling){var t=e.nodeType;if(1===t||3===t)break;if(8===t){if("$"===(t=e.data)||"$!"===t||"$?"===t)break;if("/$"===t)return null}}return e}function uo(e){e=e.previousSibling;for(var t=0;e;){if(8===e.nodeType){var n=e.data;if("$"===n||"$!"===n||"$?"===n){if(0===t)return e;t--}else"/$"===n&&t++}e=e.previousSibling}return null}var po=Math.random().toString(36).slice(2),fo="__reactFiber$"+po,go="__reactProps$"+po,mo="__reactContainer$"+po,ho="__reactEvents$"+po,yo="__reactListeners$"+po,bo="__reactHandles$"+po;function vo(e){var t=e[fo];if(t)return t;for(var n=e.parentNode;n;){if(t=n[mo]||n[fo]){if(n=t.alternate,null!==t.child||null!==n&&null!==n.child)for(e=uo(e);null!==e;){if(n=e[fo])return n;e=uo(e)}return t}n=(e=n).parentNode}return null}function wo(e){return!(e=e[fo]||e[mo])||5!==e.tag&&6!==e.tag&&13!==e.tag&&3!==e.tag?null:e}function ko(e){if(5===e.tag||6===e.tag)return e.stateNode;throw Error(a(33))}function xo(e){return e[go]||null}var So=[],_o=-1;function Eo(e){return{current:e}}function Co(e){0>_o||(e.current=So[_o],So[_o]=null,_o--)}function Ao(e,t){_o++,So[_o]=e.current,e.current=t}var To={},jo=Eo(To),Ro=Eo(!1),Po=To;function Lo(e,t){var n=e.type.contextTypes;if(!n)return To;var r=e.stateNode;if(r&&r.__reactInternalMemoizedUnmaskedChildContext===t)return r.__reactInternalMemoizedMaskedChildContext;var o,a={};for(o in n)a[o]=t[o];return r&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=t,e.__reactInternalMemoizedMaskedChildContext=a),a}function No(e){return null!=(e=e.childContextTypes)}function Oo(){Co(Ro),Co(jo)}function Do(e,t,n){if(jo.current!==To)throw Error(a(168));Ao(jo,t),Ao(Ro,n)}function Io(e,t,n){var r=e.stateNode;if(t=t.childContextTypes,"function"!=typeof r.getChildContext)return n;for(var o in r=r.getChildContext())if(!(o in t))throw Error(a(108,q(e)||"Unknown",o));return M({},n,r)}function Mo(e){return e=(e=e.stateNode)&&e.__reactInternalMemoizedMergedChildContext||To,Po=jo.current,Ao(jo,e),Ao(Ro,Ro.current),!0}function Fo(e,t,n){var r=e.stateNode;if(!r)throw Error(a(169));n?(e=Io(e,t,Po),r.__reactInternalMemoizedMergedChildContext=e,Co(Ro),Co(jo),Ao(jo,e)):Co(Ro),Ao(Ro,n)}var zo=null,Bo=!1,$o=!1;function Uo(e){null===zo?zo=[e]:zo.push(e)}function qo(){if(!$o&&null!==zo){$o=!0;var e=0,t=vt;try{var n=zo;for(vt=1;e<n.length;e++){var r=n[e];do{r=r(!0)}while(null!==r)}zo=null,Bo=!1}catch(o){throw null!==zo&&(zo=zo.slice(e+1)),We(Je,qo),o}finally{vt=t,$o=!1}}return null}var Go=[],Ho=0,Vo=null,Wo=0,Ko=[],Qo=0,Yo=null,Zo=1,Xo="";function Jo(e,t){Go[Ho++]=Wo,Go[Ho++]=Vo,Vo=e,Wo=t}function ea(e,t,n){Ko[Qo++]=Zo,Ko[Qo++]=Xo,Ko[Qo++]=Yo,Yo=e;var r=Zo;e=Xo;var o=32-it(r)-1;r&=~(1<<o),n+=1;var a=32-it(t)+o;if(30<a){var i=o-o%5;a=(r&(1<<i)-1).toString(32),r>>=i,o-=i,Zo=1<<32-it(t)+o|n<<o|r,Xo=a+e}else Zo=1<<a|n<<o|r,Xo=e}function ta(e){null!==e.return&&(Jo(e,1),ea(e,1,0))}function na(e){for(;e===Vo;)Vo=Go[--Ho],Go[Ho]=null,Wo=Go[--Ho],Go[Ho]=null;for(;e===Yo;)Yo=Ko[--Qo],Ko[Qo]=null,Xo=Ko[--Qo],Ko[Qo]=null,Zo=Ko[--Qo],Ko[Qo]=null}var ra=null,oa=null,aa=!1,ia=null;function sa(e,t){var n=Pc(5,null,null,0);n.elementType="DELETED",n.stateNode=t,n.return=e,null===(t=e.deletions)?(e.deletions=[n],e.flags|=16):t.push(n)}function la(e,t){switch(e.tag){case 5:var n=e.type;return null!==(t=1!==t.nodeType||n.toLowerCase()!==t.nodeName.toLowerCase()?null:t)&&(e.stateNode=t,ra=e,oa=co(t.firstChild),!0);case 6:return null!==(t=""===e.pendingProps||3!==t.nodeType?null:t)&&(e.stateNode=t,ra=e,oa=null,!0);case 13:return null!==(t=8!==t.nodeType?null:t)&&(n=null!==Yo?{id:Zo,overflow:Xo}:null,e.memoizedState={dehydrated:t,treeContext:n,retryLane:1073741824},(n=Pc(18,null,null,0)).stateNode=t,n.return=e,e.child=n,ra=e,oa=null,!0);default:return!1}}function ca(e){return!(!(1&e.mode)||128&e.flags)}function ua(e){if(aa){var t=oa;if(t){var n=t;if(!la(e,t)){if(ca(e))throw Error(a(418));t=co(n.nextSibling);var r=ra;t&&la(e,t)?sa(r,n):(e.flags=-4097&e.flags|2,aa=!1,ra=e)}}else{if(ca(e))throw Error(a(418));e.flags=-4097&e.flags|2,aa=!1,ra=e}}}function da(e){for(e=e.return;null!==e&&5!==e.tag&&3!==e.tag&&13!==e.tag;)e=e.return;ra=e}function pa(e){if(e!==ra)return!1;if(!aa)return da(e),aa=!0,!1;var t;if((t=3!==e.tag)&&!(t=5!==e.tag)&&(t="head"!==(t=e.type)&&"body"!==t&&!no(e.type,e.memoizedProps)),t&&(t=oa)){if(ca(e))throw fa(),Error(a(418));for(;t;)sa(e,t),t=co(t.nextSibling)}if(da(e),13===e.tag){if(!(e=null!==(e=e.memoizedState)?e.dehydrated:null))throw Error(a(317));e:{for(e=e.nextSibling,t=0;e;){if(8===e.nodeType){var n=e.data;if("/$"===n){if(0===t){oa=co(e.nextSibling);break e}t--}else"$"!==n&&"$!"!==n&&"$?"!==n||t++}e=e.nextSibling}oa=null}}else oa=ra?co(e.stateNode.nextSibling):null;return!0}function fa(){for(var e=oa;e;)e=co(e.nextSibling)}function ga(){oa=ra=null,aa=!1}function ma(e){null===ia?ia=[e]:ia.push(e)}var ha=w.ReactCurrentBatchConfig;function ya(e,t,n){if(null!==(e=n.ref)&&"function"!=typeof e&&"object"!=typeof e){if(n._owner){if(n=n._owner){if(1!==n.tag)throw Error(a(309));var r=n.stateNode}if(!r)throw Error(a(147,e));var o=r,i=""+e;return null!==t&&null!==t.ref&&"function"==typeof t.ref&&t.ref._stringRef===i?t.ref:(t=function(e){var t=o.refs;null===e?delete t[i]:t[i]=e},t._stringRef=i,t)}if("string"!=typeof e)throw Error(a(284));if(!n._owner)throw Error(a(290,e))}return e}function ba(e,t){throw e=Object.prototype.toString.call(t),Error(a(31,"[object Object]"===e?"object with keys {"+Object.keys(t).join(", ")+"}":e))}function va(e){return(0,e._init)(e._payload)}function wa(e){function t(t,n){if(e){var r=t.deletions;null===r?(t.deletions=[n],t.flags|=16):r.push(n)}}function n(n,r){if(!e)return null;for(;null!==r;)t(n,r),r=r.sibling;return null}function r(e,t){for(e=new Map;null!==t;)null!==t.key?e.set(t.key,t):e.set(t.index,t),t=t.sibling;return e}function o(e,t){return(e=Nc(e,t)).index=0,e.sibling=null,e}function i(t,n,r){return t.index=r,e?null!==(r=t.alternate)?(r=r.index)<n?(t.flags|=2,n):r:(t.flags|=2,n):(t.flags|=1048576,n)}function s(t){return e&&null===t.alternate&&(t.flags|=2),t}function l(e,t,n,r){return null===t||6!==t.tag?((t=Mc(n,e.mode,r)).return=e,t):((t=o(t,n)).return=e,t)}function c(e,t,n,r){var a=n.type;return a===S?d(e,t,n.props.children,r,n.key):null!==t&&(t.elementType===a||"object"==typeof a&&null!==a&&a.$$typeof===L&&va(a)===t.type)?((r=o(t,n.props)).ref=ya(e,t,n),r.return=e,r):((r=Oc(n.type,n.key,n.props,null,e.mode,r)).ref=ya(e,t,n),r.return=e,r)}function u(e,t,n,r){return null===t||4!==t.tag||t.stateNode.containerInfo!==n.containerInfo||t.stateNode.implementation!==n.implementation?((t=Fc(n,e.mode,r)).return=e,t):((t=o(t,n.children||[])).return=e,t)}function d(e,t,n,r,a){return null===t||7!==t.tag?((t=Dc(n,e.mode,r,a)).return=e,t):((t=o(t,n)).return=e,t)}function p(e,t,n){if("string"==typeof t&&""!==t||"number"==typeof t)return(t=Mc(""+t,e.mode,n)).return=e,t;if("object"==typeof t&&null!==t){switch(t.$$typeof){case k:return(n=Oc(t.type,t.key,t.props,null,e.mode,n)).ref=ya(e,null,t),n.return=e,n;case x:return(t=Fc(t,e.mode,n)).return=e,t;case L:return p(e,(0,t._init)(t._payload),n)}if(te(t)||D(t))return(t=Dc(t,e.mode,n,null)).return=e,t;ba(e,t)}return null}function f(e,t,n,r){var o=null!==t?t.key:null;if("string"==typeof n&&""!==n||"number"==typeof n)return null!==o?null:l(e,t,""+n,r);if("object"==typeof n&&null!==n){switch(n.$$typeof){case k:return n.key===o?c(e,t,n,r):null;case x:return n.key===o?u(e,t,n,r):null;case L:return f(e,t,(o=n._init)(n._payload),r)}if(te(n)||D(n))return null!==o?null:d(e,t,n,r,null);ba(e,n)}return null}function g(e,t,n,r,o){if("string"==typeof r&&""!==r||"number"==typeof r)return l(t,e=e.get(n)||null,""+r,o);if("object"==typeof r&&null!==r){switch(r.$$typeof){case k:return c(t,e=e.get(null===r.key?n:r.key)||null,r,o);case x:return u(t,e=e.get(null===r.key?n:r.key)||null,r,o);case L:return g(e,t,n,(0,r._init)(r._payload),o)}if(te(r)||D(r))return d(t,e=e.get(n)||null,r,o,null);ba(t,r)}return null}function m(o,a,s,l){for(var c=null,u=null,d=a,m=a=0,h=null;null!==d&&m<s.length;m++){d.index>m?(h=d,d=null):h=d.sibling;var y=f(o,d,s[m],l);if(null===y){null===d&&(d=h);break}e&&d&&null===y.alternate&&t(o,d),a=i(y,a,m),null===u?c=y:u.sibling=y,u=y,d=h}if(m===s.length)return n(o,d),aa&&Jo(o,m),c;if(null===d){for(;m<s.length;m++)null!==(d=p(o,s[m],l))&&(a=i(d,a,m),null===u?c=d:u.sibling=d,u=d);return aa&&Jo(o,m),c}for(d=r(o,d);m<s.length;m++)null!==(h=g(d,o,m,s[m],l))&&(e&&null!==h.alternate&&d.delete(null===h.key?m:h.key),a=i(h,a,m),null===u?c=h:u.sibling=h,u=h);return e&&d.forEach((function(e){return t(o,e)})),aa&&Jo(o,m),c}function h(o,s,l,c){var u=D(l);if("function"!=typeof u)throw Error(a(150));if(null==(l=u.call(l)))throw Error(a(151));for(var d=u=null,m=s,h=s=0,y=null,b=l.next();null!==m&&!b.done;h++,b=l.next()){m.index>h?(y=m,m=null):y=m.sibling;var v=f(o,m,b.value,c);if(null===v){null===m&&(m=y);break}e&&m&&null===v.alternate&&t(o,m),s=i(v,s,h),null===d?u=v:d.sibling=v,d=v,m=y}if(b.done)return n(o,m),aa&&Jo(o,h),u;if(null===m){for(;!b.done;h++,b=l.next())null!==(b=p(o,b.value,c))&&(s=i(b,s,h),null===d?u=b:d.sibling=b,d=b);return aa&&Jo(o,h),u}for(m=r(o,m);!b.done;h++,b=l.next())null!==(b=g(m,o,h,b.value,c))&&(e&&null!==b.alternate&&m.delete(null===b.key?h:b.key),s=i(b,s,h),null===d?u=b:d.sibling=b,d=b);return e&&m.forEach((function(e){return t(o,e)})),aa&&Jo(o,h),u}return function e(r,a,i,l){if("object"==typeof i&&null!==i&&i.type===S&&null===i.key&&(i=i.props.children),"object"==typeof i&&null!==i){switch(i.$$typeof){case k:e:{for(var c=i.key,u=a;null!==u;){if(u.key===c){if((c=i.type)===S){if(7===u.tag){n(r,u.sibling),(a=o(u,i.props.children)).return=r,r=a;break e}}else if(u.elementType===c||"object"==typeof c&&null!==c&&c.$$typeof===L&&va(c)===u.type){n(r,u.sibling),(a=o(u,i.props)).ref=ya(r,u,i),a.return=r,r=a;break e}n(r,u);break}t(r,u),u=u.sibling}i.type===S?((a=Dc(i.props.children,r.mode,l,i.key)).return=r,r=a):((l=Oc(i.type,i.key,i.props,null,r.mode,l)).ref=ya(r,a,i),l.return=r,r=l)}return s(r);case x:e:{for(u=i.key;null!==a;){if(a.key===u){if(4===a.tag&&a.stateNode.containerInfo===i.containerInfo&&a.stateNode.implementation===i.implementation){n(r,a.sibling),(a=o(a,i.children||[])).return=r,r=a;break e}n(r,a);break}t(r,a),a=a.sibling}(a=Fc(i,r.mode,l)).return=r,r=a}return s(r);case L:return e(r,a,(u=i._init)(i._payload),l)}if(te(i))return m(r,a,i,l);if(D(i))return h(r,a,i,l);ba(r,i)}return"string"==typeof i&&""!==i||"number"==typeof i?(i=""+i,null!==a&&6===a.tag?(n(r,a.sibling),(a=o(a,i)).return=r,r=a):(n(r,a),(a=Mc(i,r.mode,l)).return=r,r=a),s(r)):n(r,a)}}var ka=wa(!0),xa=wa(!1),Sa=Eo(null),_a=null,Ea=null,Ca=null;function Aa(){Ca=Ea=_a=null}function Ta(e){var t=Sa.current;Co(Sa),e._currentValue=t}function ja(e,t,n){for(;null!==e;){var r=e.alternate;if((e.childLanes&t)!==t?(e.childLanes|=t,null!==r&&(r.childLanes|=t)):null!==r&&(r.childLanes&t)!==t&&(r.childLanes|=t),e===n)break;e=e.return}}function Ra(e,t){_a=e,Ca=Ea=null,null!==(e=e.dependencies)&&null!==e.firstContext&&(!!(e.lanes&t)&&(vs=!0),e.firstContext=null)}function Pa(e){var t=e._currentValue;if(Ca!==e)if(e={context:e,memoizedValue:t,next:null},null===Ea){if(null===_a)throw Error(a(308));Ea=e,_a.dependencies={lanes:0,firstContext:e}}else Ea=Ea.next=e;return t}var La=null;function Na(e){null===La?La=[e]:La.push(e)}function Oa(e,t,n,r){var o=t.interleaved;return null===o?(n.next=n,Na(t)):(n.next=o.next,o.next=n),t.interleaved=n,Da(e,r)}function Da(e,t){e.lanes|=t;var n=e.alternate;for(null!==n&&(n.lanes|=t),n=e,e=e.return;null!==e;)e.childLanes|=t,null!==(n=e.alternate)&&(n.childLanes|=t),n=e,e=e.return;return 3===n.tag?n.stateNode:null}var Ia=!1;function Ma(e){e.updateQueue={baseState:e.memoizedState,firstBaseUpdate:null,lastBaseUpdate:null,shared:{pending:null,interleaved:null,lanes:0},effects:null}}function Fa(e,t){e=e.updateQueue,t.updateQueue===e&&(t.updateQueue={baseState:e.baseState,firstBaseUpdate:e.firstBaseUpdate,lastBaseUpdate:e.lastBaseUpdate,shared:e.shared,effects:e.effects})}function za(e,t){return{eventTime:e,lane:t,tag:0,payload:null,callback:null,next:null}}function Ba(e,t,n){var r=e.updateQueue;if(null===r)return null;if(r=r.shared,2&Tl){var o=r.pending;return null===o?t.next=t:(t.next=o.next,o.next=t),r.pending=t,Da(e,n)}return null===(o=r.interleaved)?(t.next=t,Na(r)):(t.next=o.next,o.next=t),r.interleaved=t,Da(e,n)}function $a(e,t,n){if(null!==(t=t.updateQueue)&&(t=t.shared,4194240&n)){var r=t.lanes;n|=r&=e.pendingLanes,t.lanes=n,bt(e,n)}}function Ua(e,t){var n=e.updateQueue,r=e.alternate;if(null!==r&&n===(r=r.updateQueue)){var o=null,a=null;if(null!==(n=n.firstBaseUpdate)){do{var i={eventTime:n.eventTime,lane:n.lane,tag:n.tag,payload:n.payload,callback:n.callback,next:null};null===a?o=a=i:a=a.next=i,n=n.next}while(null!==n);null===a?o=a=t:a=a.next=t}else o=a=t;return n={baseState:r.baseState,firstBaseUpdate:o,lastBaseUpdate:a,shared:r.shared,effects:r.effects},void(e.updateQueue=n)}null===(e=n.lastBaseUpdate)?n.firstBaseUpdate=t:e.next=t,n.lastBaseUpdate=t}function qa(e,t,n,r){var o=e.updateQueue;Ia=!1;var a=o.firstBaseUpdate,i=o.lastBaseUpdate,s=o.shared.pending;if(null!==s){o.shared.pending=null;var l=s,c=l.next;l.next=null,null===i?a=c:i.next=c,i=l;var u=e.alternate;null!==u&&((s=(u=u.updateQueue).lastBaseUpdate)!==i&&(null===s?u.firstBaseUpdate=c:s.next=c,u.lastBaseUpdate=l))}if(null!==a){var d=o.baseState;for(i=0,u=c=l=null,s=a;;){var p=s.lane,f=s.eventTime;if((r&p)===p){null!==u&&(u=u.next={eventTime:f,lane:0,tag:s.tag,payload:s.payload,callback:s.callback,next:null});e:{var g=e,m=s;switch(p=t,f=n,m.tag){case 1:if("function"==typeof(g=m.payload)){d=g.call(f,d,p);break e}d=g;break e;case 3:g.flags=-65537&g.flags|128;case 0:if(null==(p="function"==typeof(g=m.payload)?g.call(f,d,p):g))break e;d=M({},d,p);break e;case 2:Ia=!0}}null!==s.callback&&0!==s.lane&&(e.flags|=64,null===(p=o.effects)?o.effects=[s]:p.push(s))}else f={eventTime:f,lane:p,tag:s.tag,payload:s.payload,callback:s.callback,next:null},null===u?(c=u=f,l=d):u=u.next=f,i|=p;if(null===(s=s.next)){if(null===(s=o.shared.pending))break;s=(p=s).next,p.next=null,o.lastBaseUpdate=p,o.shared.pending=null}}if(null===u&&(l=d),o.baseState=l,o.firstBaseUpdate=c,o.lastBaseUpdate=u,null!==(t=o.shared.interleaved)){o=t;do{i|=o.lane,o=o.next}while(o!==t)}else null===a&&(o.shared.lanes=0);Il|=i,e.lanes=i,e.memoizedState=d}}function Ga(e,t,n){if(e=t.effects,t.effects=null,null!==e)for(t=0;t<e.length;t++){var r=e[t],o=r.callback;if(null!==o){if(r.callback=null,r=n,"function"!=typeof o)throw Error(a(191,o));o.call(r)}}}var Ha={},Va=Eo(Ha),Wa=Eo(Ha),Ka=Eo(Ha);function Qa(e){if(e===Ha)throw Error(a(174));return e}function Ya(e,t){switch(Ao(Ka,t),Ao(Wa,e),Ao(Va,Ha),e=t.nodeType){case 9:case 11:t=(t=t.documentElement)?t.namespaceURI:le(null,"");break;default:t=le(t=(e=8===e?t.parentNode:t).namespaceURI||null,e=e.tagName)}Co(Va),Ao(Va,t)}function Za(){Co(Va),Co(Wa),Co(Ka)}function Xa(e){Qa(Ka.current);var t=Qa(Va.current),n=le(t,e.type);t!==n&&(Ao(Wa,e),Ao(Va,n))}function Ja(e){Wa.current===e&&(Co(Va),Co(Wa))}var ei=Eo(0);function ti(e){for(var t=e;null!==t;){if(13===t.tag){var n=t.memoizedState;if(null!==n&&(null===(n=n.dehydrated)||"$?"===n.data||"$!"===n.data))return t}else if(19===t.tag&&void 0!==t.memoizedProps.revealOrder){if(128&t.flags)return t}else if(null!==t.child){t.child.return=t,t=t.child;continue}if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}return null}var ni=[];function ri(){for(var e=0;e<ni.length;e++)ni[e]._workInProgressVersionPrimary=null;ni.length=0}var oi=w.ReactCurrentDispatcher,ai=w.ReactCurrentBatchConfig,ii=0,si=null,li=null,ci=null,ui=!1,di=!1,pi=0,fi=0;function gi(){throw Error(a(321))}function mi(e,t){if(null===t)return!1;for(var n=0;n<t.length&&n<e.length;n++)if(!sr(e[n],t[n]))return!1;return!0}function hi(e,t,n,r,o,i){if(ii=i,si=t,t.memoizedState=null,t.updateQueue=null,t.lanes=0,oi.current=null===e||null===e.memoizedState?Ji:es,e=n(r,o),di){i=0;do{if(di=!1,pi=0,25<=i)throw Error(a(301));i+=1,ci=li=null,t.updateQueue=null,oi.current=ts,e=n(r,o)}while(di)}if(oi.current=Xi,t=null!==li&&null!==li.next,ii=0,ci=li=si=null,ui=!1,t)throw Error(a(300));return e}function yi(){var e=0!==pi;return pi=0,e}function bi(){var e={memoizedState:null,baseState:null,baseQueue:null,queue:null,next:null};return null===ci?si.memoizedState=ci=e:ci=ci.next=e,ci}function vi(){if(null===li){var e=si.alternate;e=null!==e?e.memoizedState:null}else e=li.next;var t=null===ci?si.memoizedState:ci.next;if(null!==t)ci=t,li=e;else{if(null===e)throw Error(a(310));e={memoizedState:(li=e).memoizedState,baseState:li.baseState,baseQueue:li.baseQueue,queue:li.queue,next:null},null===ci?si.memoizedState=ci=e:ci=ci.next=e}return ci}function wi(e,t){return"function"==typeof t?t(e):t}function ki(e){var t=vi(),n=t.queue;if(null===n)throw Error(a(311));n.lastRenderedReducer=e;var r=li,o=r.baseQueue,i=n.pending;if(null!==i){if(null!==o){var s=o.next;o.next=i.next,i.next=s}r.baseQueue=o=i,n.pending=null}if(null!==o){i=o.next,r=r.baseState;var l=s=null,c=null,u=i;do{var d=u.lane;if((ii&d)===d)null!==c&&(c=c.next={lane:0,action:u.action,hasEagerState:u.hasEagerState,eagerState:u.eagerState,next:null}),r=u.hasEagerState?u.eagerState:e(r,u.action);else{var p={lane:d,action:u.action,hasEagerState:u.hasEagerState,eagerState:u.eagerState,next:null};null===c?(l=c=p,s=r):c=c.next=p,si.lanes|=d,Il|=d}u=u.next}while(null!==u&&u!==i);null===c?s=r:c.next=l,sr(r,t.memoizedState)||(vs=!0),t.memoizedState=r,t.baseState=s,t.baseQueue=c,n.lastRenderedState=r}if(null!==(e=n.interleaved)){o=e;do{i=o.lane,si.lanes|=i,Il|=i,o=o.next}while(o!==e)}else null===o&&(n.lanes=0);return[t.memoizedState,n.dispatch]}function xi(e){var t=vi(),n=t.queue;if(null===n)throw Error(a(311));n.lastRenderedReducer=e;var r=n.dispatch,o=n.pending,i=t.memoizedState;if(null!==o){n.pending=null;var s=o=o.next;do{i=e(i,s.action),s=s.next}while(s!==o);sr(i,t.memoizedState)||(vs=!0),t.memoizedState=i,null===t.baseQueue&&(t.baseState=i),n.lastRenderedState=i}return[i,r]}function Si(){}function _i(e,t){var n=si,r=vi(),o=t(),i=!sr(r.memoizedState,o);if(i&&(r.memoizedState=o,vs=!0),r=r.queue,Ii(Ai.bind(null,n,r,e),[e]),r.getSnapshot!==t||i||null!==ci&&1&ci.memoizedState.tag){if(n.flags|=2048,Pi(9,Ci.bind(null,n,r,o,t),void 0,null),null===jl)throw Error(a(349));30&ii||Ei(n,t,o)}return o}function Ei(e,t,n){e.flags|=16384,e={getSnapshot:t,value:n},null===(t=si.updateQueue)?(t={lastEffect:null,stores:null},si.updateQueue=t,t.stores=[e]):null===(n=t.stores)?t.stores=[e]:n.push(e)}function Ci(e,t,n,r){t.value=n,t.getSnapshot=r,Ti(t)&&ji(e)}function Ai(e,t,n){return n((function(){Ti(t)&&ji(e)}))}function Ti(e){var t=e.getSnapshot;e=e.value;try{var n=t();return!sr(e,n)}catch(r){return!0}}function ji(e){var t=Da(e,1);null!==t&&nc(t,e,1,-1)}function Ri(e){var t=bi();return"function"==typeof e&&(e=e()),t.memoizedState=t.baseState=e,e={pending:null,interleaved:null,lanes:0,dispatch:null,lastRenderedReducer:wi,lastRenderedState:e},t.queue=e,e=e.dispatch=Ki.bind(null,si,e),[t.memoizedState,e]}function Pi(e,t,n,r){return e={tag:e,create:t,destroy:n,deps:r,next:null},null===(t=si.updateQueue)?(t={lastEffect:null,stores:null},si.updateQueue=t,t.lastEffect=e.next=e):null===(n=t.lastEffect)?t.lastEffect=e.next=e:(r=n.next,n.next=e,e.next=r,t.lastEffect=e),e}function Li(){return vi().memoizedState}function Ni(e,t,n,r){var o=bi();si.flags|=e,o.memoizedState=Pi(1|t,n,void 0,void 0===r?null:r)}function Oi(e,t,n,r){var o=vi();r=void 0===r?null:r;var a=void 0;if(null!==li){var i=li.memoizedState;if(a=i.destroy,null!==r&&mi(r,i.deps))return void(o.memoizedState=Pi(t,n,a,r))}si.flags|=e,o.memoizedState=Pi(1|t,n,a,r)}function Di(e,t){return Ni(8390656,8,e,t)}function Ii(e,t){return Oi(2048,8,e,t)}function Mi(e,t){return Oi(4,2,e,t)}function Fi(e,t){return Oi(4,4,e,t)}function zi(e,t){return"function"==typeof t?(e=e(),t(e),function(){t(null)}):null!=t?(e=e(),t.current=e,function(){t.current=null}):void 0}function Bi(e,t,n){return n=null!=n?n.concat([e]):null,Oi(4,4,zi.bind(null,t,e),n)}function $i(){}function Ui(e,t){var n=vi();t=void 0===t?null:t;var r=n.memoizedState;return null!==r&&null!==t&&mi(t,r[1])?r[0]:(n.memoizedState=[e,t],e)}function qi(e,t){var n=vi();t=void 0===t?null:t;var r=n.memoizedState;return null!==r&&null!==t&&mi(t,r[1])?r[0]:(e=e(),n.memoizedState=[e,t],e)}function Gi(e,t,n){return 21&ii?(sr(n,t)||(n=mt(),si.lanes|=n,Il|=n,e.baseState=!0),t):(e.baseState&&(e.baseState=!1,vs=!0),e.memoizedState=n)}function Hi(e,t){var n=vt;vt=0!==n&&4>n?n:4,e(!0);var r=ai.transition;ai.transition={};try{e(!1),t()}finally{vt=n,ai.transition=r}}function Vi(){return vi().memoizedState}function Wi(e,t,n){var r=tc(e);if(n={lane:r,action:n,hasEagerState:!1,eagerState:null,next:null},Qi(e))Yi(t,n);else if(null!==(n=Oa(e,t,n,r))){nc(n,e,r,ec()),Zi(n,t,r)}}function Ki(e,t,n){var r=tc(e),o={lane:r,action:n,hasEagerState:!1,eagerState:null,next:null};if(Qi(e))Yi(t,o);else{var a=e.alternate;if(0===e.lanes&&(null===a||0===a.lanes)&&null!==(a=t.lastRenderedReducer))try{var i=t.lastRenderedState,s=a(i,n);if(o.hasEagerState=!0,o.eagerState=s,sr(s,i)){var l=t.interleaved;return null===l?(o.next=o,Na(t)):(o.next=l.next,l.next=o),void(t.interleaved=o)}}catch(c){}null!==(n=Oa(e,t,o,r))&&(nc(n,e,r,o=ec()),Zi(n,t,r))}}function Qi(e){var t=e.alternate;return e===si||null!==t&&t===si}function Yi(e,t){di=ui=!0;var n=e.pending;null===n?t.next=t:(t.next=n.next,n.next=t),e.pending=t}function Zi(e,t,n){if(4194240&n){var r=t.lanes;n|=r&=e.pendingLanes,t.lanes=n,bt(e,n)}}var Xi={readContext:Pa,useCallback:gi,useContext:gi,useEffect:gi,useImperativeHandle:gi,useInsertionEffect:gi,useLayoutEffect:gi,useMemo:gi,useReducer:gi,useRef:gi,useState:gi,useDebugValue:gi,useDeferredValue:gi,useTransition:gi,useMutableSource:gi,useSyncExternalStore:gi,useId:gi,unstable_isNewReconciler:!1},Ji={readContext:Pa,useCallback:function(e,t){return bi().memoizedState=[e,void 0===t?null:t],e},useContext:Pa,useEffect:Di,useImperativeHandle:function(e,t,n){return n=null!=n?n.concat([e]):null,Ni(4194308,4,zi.bind(null,t,e),n)},useLayoutEffect:function(e,t){return Ni(4194308,4,e,t)},useInsertionEffect:function(e,t){return Ni(4,2,e,t)},useMemo:function(e,t){var n=bi();return t=void 0===t?null:t,e=e(),n.memoizedState=[e,t],e},useReducer:function(e,t,n){var r=bi();return t=void 0!==n?n(t):t,r.memoizedState=r.baseState=t,e={pending:null,interleaved:null,lanes:0,dispatch:null,lastRenderedReducer:e,lastRenderedState:t},r.queue=e,e=e.dispatch=Wi.bind(null,si,e),[r.memoizedState,e]},useRef:function(e){return e={current:e},bi().memoizedState=e},useState:Ri,useDebugValue:$i,useDeferredValue:function(e){return bi().memoizedState=e},useTransition:function(){var e=Ri(!1),t=e[0];return e=Hi.bind(null,e[1]),bi().memoizedState=e,[t,e]},useMutableSource:function(){},useSyncExternalStore:function(e,t,n){var r=si,o=bi();if(aa){if(void 0===n)throw Error(a(407));n=n()}else{if(n=t(),null===jl)throw Error(a(349));30&ii||Ei(r,t,n)}o.memoizedState=n;var i={value:n,getSnapshot:t};return o.queue=i,Di(Ai.bind(null,r,i,e),[e]),r.flags|=2048,Pi(9,Ci.bind(null,r,i,n,t),void 0,null),n},useId:function(){var e=bi(),t=jl.identifierPrefix;if(aa){var n=Xo;t=":"+t+"R"+(n=(Zo&~(1<<32-it(Zo)-1)).toString(32)+n),0<(n=pi++)&&(t+="H"+n.toString(32)),t+=":"}else t=":"+t+"r"+(n=fi++).toString(32)+":";return e.memoizedState=t},unstable_isNewReconciler:!1},es={readContext:Pa,useCallback:Ui,useContext:Pa,useEffect:Ii,useImperativeHandle:Bi,useInsertionEffect:Mi,useLayoutEffect:Fi,useMemo:qi,useReducer:ki,useRef:Li,useState:function(){return ki(wi)},useDebugValue:$i,useDeferredValue:function(e){return Gi(vi(),li.memoizedState,e)},useTransition:function(){return[ki(wi)[0],vi().memoizedState]},useMutableSource:Si,useSyncExternalStore:_i,useId:Vi,unstable_isNewReconciler:!1},ts={readContext:Pa,useCallback:Ui,useContext:Pa,useEffect:Ii,useImperativeHandle:Bi,useInsertionEffect:Mi,useLayoutEffect:Fi,useMemo:qi,useReducer:xi,useRef:Li,useState:function(){return xi(wi)},useDebugValue:$i,useDeferredValue:function(e){var t=vi();return null===li?t.memoizedState=e:Gi(t,li.memoizedState,e)},useTransition:function(){return[xi(wi)[0],vi().memoizedState]},useMutableSource:Si,useSyncExternalStore:_i,useId:Vi,unstable_isNewReconciler:!1};function ns(e,t){if(e&&e.defaultProps){for(var n in t=M({},t),e=e.defaultProps)void 0===t[n]&&(t[n]=e[n]);return t}return t}function rs(e,t,n,r){n=null==(n=n(r,t=e.memoizedState))?t:M({},t,n),e.memoizedState=n,0===e.lanes&&(e.updateQueue.baseState=n)}var os={isMounted:function(e){return!!(e=e._reactInternals)&&Ue(e)===e},enqueueSetState:function(e,t,n){e=e._reactInternals;var r=ec(),o=tc(e),a=za(r,o);a.payload=t,null!=n&&(a.callback=n),null!==(t=Ba(e,a,o))&&(nc(t,e,o,r),$a(t,e,o))},enqueueReplaceState:function(e,t,n){e=e._reactInternals;var r=ec(),o=tc(e),a=za(r,o);a.tag=1,a.payload=t,null!=n&&(a.callback=n),null!==(t=Ba(e,a,o))&&(nc(t,e,o,r),$a(t,e,o))},enqueueForceUpdate:function(e,t){e=e._reactInternals;var n=ec(),r=tc(e),o=za(n,r);o.tag=2,null!=t&&(o.callback=t),null!==(t=Ba(e,o,r))&&(nc(t,e,r,n),$a(t,e,r))}};function as(e,t,n,r,o,a,i){return"function"==typeof(e=e.stateNode).shouldComponentUpdate?e.shouldComponentUpdate(r,a,i):!t.prototype||!t.prototype.isPureReactComponent||(!lr(n,r)||!lr(o,a))}function is(e,t,n){var r=!1,o=To,a=t.contextType;return"object"==typeof a&&null!==a?a=Pa(a):(o=No(t)?Po:jo.current,a=(r=null!=(r=t.contextTypes))?Lo(e,o):To),t=new t(n,a),e.memoizedState=null!==t.state&&void 0!==t.state?t.state:null,t.updater=os,e.stateNode=t,t._reactInternals=e,r&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=o,e.__reactInternalMemoizedMaskedChildContext=a),t}function ss(e,t,n,r){e=t.state,"function"==typeof t.componentWillReceiveProps&&t.componentWillReceiveProps(n,r),"function"==typeof t.UNSAFE_componentWillReceiveProps&&t.UNSAFE_componentWillReceiveProps(n,r),t.state!==e&&os.enqueueReplaceState(t,t.state,null)}function ls(e,t,n,r){var o=e.stateNode;o.props=n,o.state=e.memoizedState,o.refs={},Ma(e);var a=t.contextType;"object"==typeof a&&null!==a?o.context=Pa(a):(a=No(t)?Po:jo.current,o.context=Lo(e,a)),o.state=e.memoizedState,"function"==typeof(a=t.getDerivedStateFromProps)&&(rs(e,t,a,n),o.state=e.memoizedState),"function"==typeof t.getDerivedStateFromProps||"function"==typeof o.getSnapshotBeforeUpdate||"function"!=typeof o.UNSAFE_componentWillMount&&"function"!=typeof o.componentWillMount||(t=o.state,"function"==typeof o.componentWillMount&&o.componentWillMount(),"function"==typeof o.UNSAFE_componentWillMount&&o.UNSAFE_componentWillMount(),t!==o.state&&os.enqueueReplaceState(o,o.state,null),qa(e,n,o,r),o.state=e.memoizedState),"function"==typeof o.componentDidMount&&(e.flags|=4194308)}function cs(e,t){try{var n="",r=t;do{n+=$(r),r=r.return}while(r);var o=n}catch(a){o="\nError generating stack: "+a.message+"\n"+a.stack}return{value:e,source:t,stack:o,digest:null}}function us(e,t,n){return{value:e,source:null,stack:null!=n?n:null,digest:null!=t?t:null}}function ds(e,t){try{console.error(t.value)}catch(n){setTimeout((function(){throw n}))}}var ps="function"==typeof WeakMap?WeakMap:Map;function fs(e,t,n){(n=za(-1,n)).tag=3,n.payload={element:null};var r=t.value;return n.callback=function(){Gl||(Gl=!0,Hl=r),ds(0,t)},n}function gs(e,t,n){(n=za(-1,n)).tag=3;var r=e.type.getDerivedStateFromError;if("function"==typeof r){var o=t.value;n.payload=function(){return r(o)},n.callback=function(){ds(0,t)}}var a=e.stateNode;return null!==a&&"function"==typeof a.componentDidCatch&&(n.callback=function(){ds(0,t),"function"!=typeof r&&(null===Vl?Vl=new Set([this]):Vl.add(this));var e=t.stack;this.componentDidCatch(t.value,{componentStack:null!==e?e:""})}),n}function ms(e,t,n){var r=e.pingCache;if(null===r){r=e.pingCache=new ps;var o=new Set;r.set(t,o)}else void 0===(o=r.get(t))&&(o=new Set,r.set(t,o));o.has(n)||(o.add(n),e=Ec.bind(null,e,t,n),t.then(e,e))}function hs(e){do{var t;if((t=13===e.tag)&&(t=null===(t=e.memoizedState)||null!==t.dehydrated),t)return e;e=e.return}while(null!==e);return null}function ys(e,t,n,r,o){return 1&e.mode?(e.flags|=65536,e.lanes=o,e):(e===t?e.flags|=65536:(e.flags|=128,n.flags|=131072,n.flags&=-52805,1===n.tag&&(null===n.alternate?n.tag=17:((t=za(-1,1)).tag=2,Ba(n,t,1))),n.lanes|=1),e)}var bs=w.ReactCurrentOwner,vs=!1;function ws(e,t,n,r){t.child=null===e?xa(t,null,n,r):ka(t,e.child,n,r)}function ks(e,t,n,r,o){n=n.render;var a=t.ref;return Ra(t,o),r=hi(e,t,n,r,a,o),n=yi(),null===e||vs?(aa&&n&&ta(t),t.flags|=1,ws(e,t,r,o),t.child):(t.updateQueue=e.updateQueue,t.flags&=-2053,e.lanes&=~o,Gs(e,t,o))}function xs(e,t,n,r,o){if(null===e){var a=n.type;return"function"!=typeof a||Lc(a)||void 0!==a.defaultProps||null!==n.compare||void 0!==n.defaultProps?((e=Oc(n.type,null,r,t,t.mode,o)).ref=t.ref,e.return=t,t.child=e):(t.tag=15,t.type=a,Ss(e,t,a,r,o))}if(a=e.child,!(e.lanes&o)){var i=a.memoizedProps;if((n=null!==(n=n.compare)?n:lr)(i,r)&&e.ref===t.ref)return Gs(e,t,o)}return t.flags|=1,(e=Nc(a,r)).ref=t.ref,e.return=t,t.child=e}function Ss(e,t,n,r,o){if(null!==e){var a=e.memoizedProps;if(lr(a,r)&&e.ref===t.ref){if(vs=!1,t.pendingProps=r=a,!(e.lanes&o))return t.lanes=e.lanes,Gs(e,t,o);131072&e.flags&&(vs=!0)}}return Cs(e,t,n,r,o)}function _s(e,t,n){var r=t.pendingProps,o=r.children,a=null!==e?e.memoizedState:null;if("hidden"===r.mode)if(1&t.mode){if(!(1073741824&n))return e=null!==a?a.baseLanes|n:n,t.lanes=t.childLanes=1073741824,t.memoizedState={baseLanes:e,cachePool:null,transitions:null},t.updateQueue=null,Ao(Nl,Ll),Ll|=e,null;t.memoizedState={baseLanes:0,cachePool:null,transitions:null},r=null!==a?a.baseLanes:n,Ao(Nl,Ll),Ll|=r}else t.memoizedState={baseLanes:0,cachePool:null,transitions:null},Ao(Nl,Ll),Ll|=n;else null!==a?(r=a.baseLanes|n,t.memoizedState=null):r=n,Ao(Nl,Ll),Ll|=r;return ws(e,t,o,n),t.child}function Es(e,t){var n=t.ref;(null===e&&null!==n||null!==e&&e.ref!==n)&&(t.flags|=512,t.flags|=2097152)}function Cs(e,t,n,r,o){var a=No(n)?Po:jo.current;return a=Lo(t,a),Ra(t,o),n=hi(e,t,n,r,a,o),r=yi(),null===e||vs?(aa&&r&&ta(t),t.flags|=1,ws(e,t,n,o),t.child):(t.updateQueue=e.updateQueue,t.flags&=-2053,e.lanes&=~o,Gs(e,t,o))}function As(e,t,n,r,o){if(No(n)){var a=!0;Mo(t)}else a=!1;if(Ra(t,o),null===t.stateNode)qs(e,t),is(t,n,r),ls(t,n,r,o),r=!0;else if(null===e){var i=t.stateNode,s=t.memoizedProps;i.props=s;var l=i.context,c=n.contextType;"object"==typeof c&&null!==c?c=Pa(c):c=Lo(t,c=No(n)?Po:jo.current);var u=n.getDerivedStateFromProps,d="function"==typeof u||"function"==typeof i.getSnapshotBeforeUpdate;d||"function"!=typeof i.UNSAFE_componentWillReceiveProps&&"function"!=typeof i.componentWillReceiveProps||(s!==r||l!==c)&&ss(t,i,r,c),Ia=!1;var p=t.memoizedState;i.state=p,qa(t,r,i,o),l=t.memoizedState,s!==r||p!==l||Ro.current||Ia?("function"==typeof u&&(rs(t,n,u,r),l=t.memoizedState),(s=Ia||as(t,n,s,r,p,l,c))?(d||"function"!=typeof i.UNSAFE_componentWillMount&&"function"!=typeof i.componentWillMount||("function"==typeof i.componentWillMount&&i.componentWillMount(),"function"==typeof i.UNSAFE_componentWillMount&&i.UNSAFE_componentWillMount()),"function"==typeof i.componentDidMount&&(t.flags|=4194308)):("function"==typeof i.componentDidMount&&(t.flags|=4194308),t.memoizedProps=r,t.memoizedState=l),i.props=r,i.state=l,i.context=c,r=s):("function"==typeof i.componentDidMount&&(t.flags|=4194308),r=!1)}else{i=t.stateNode,Fa(e,t),s=t.memoizedProps,c=t.type===t.elementType?s:ns(t.type,s),i.props=c,d=t.pendingProps,p=i.context,"object"==typeof(l=n.contextType)&&null!==l?l=Pa(l):l=Lo(t,l=No(n)?Po:jo.current);var f=n.getDerivedStateFromProps;(u="function"==typeof f||"function"==typeof i.getSnapshotBeforeUpdate)||"function"!=typeof i.UNSAFE_componentWillReceiveProps&&"function"!=typeof i.componentWillReceiveProps||(s!==d||p!==l)&&ss(t,i,r,l),Ia=!1,p=t.memoizedState,i.state=p,qa(t,r,i,o);var g=t.memoizedState;s!==d||p!==g||Ro.current||Ia?("function"==typeof f&&(rs(t,n,f,r),g=t.memoizedState),(c=Ia||as(t,n,c,r,p,g,l)||!1)?(u||"function"!=typeof i.UNSAFE_componentWillUpdate&&"function"!=typeof i.componentWillUpdate||("function"==typeof i.componentWillUpdate&&i.componentWillUpdate(r,g,l),"function"==typeof i.UNSAFE_componentWillUpdate&&i.UNSAFE_componentWillUpdate(r,g,l)),"function"==typeof i.componentDidUpdate&&(t.flags|=4),"function"==typeof i.getSnapshotBeforeUpdate&&(t.flags|=1024)):("function"!=typeof i.componentDidUpdate||s===e.memoizedProps&&p===e.memoizedState||(t.flags|=4),"function"!=typeof i.getSnapshotBeforeUpdate||s===e.memoizedProps&&p===e.memoizedState||(t.flags|=1024),t.memoizedProps=r,t.memoizedState=g),i.props=r,i.state=g,i.context=l,r=c):("function"!=typeof i.componentDidUpdate||s===e.memoizedProps&&p===e.memoizedState||(t.flags|=4),"function"!=typeof i.getSnapshotBeforeUpdate||s===e.memoizedProps&&p===e.memoizedState||(t.flags|=1024),r=!1)}return Ts(e,t,n,r,a,o)}function Ts(e,t,n,r,o,a){Es(e,t);var i=!!(128&t.flags);if(!r&&!i)return o&&Fo(t,n,!1),Gs(e,t,a);r=t.stateNode,bs.current=t;var s=i&&"function"!=typeof n.getDerivedStateFromError?null:r.render();return t.flags|=1,null!==e&&i?(t.child=ka(t,e.child,null,a),t.child=ka(t,null,s,a)):ws(e,t,s,a),t.memoizedState=r.state,o&&Fo(t,n,!0),t.child}function js(e){var t=e.stateNode;t.pendingContext?Do(0,t.pendingContext,t.pendingContext!==t.context):t.context&&Do(0,t.context,!1),Ya(e,t.containerInfo)}function Rs(e,t,n,r,o){return ga(),ma(o),t.flags|=256,ws(e,t,n,r),t.child}var Ps,Ls,Ns,Os,Ds={dehydrated:null,treeContext:null,retryLane:0};function Is(e){return{baseLanes:e,cachePool:null,transitions:null}}function Ms(e,t,n){var r,o=t.pendingProps,i=ei.current,s=!1,l=!!(128&t.flags);if((r=l)||(r=(null===e||null!==e.memoizedState)&&!!(2&i)),r?(s=!0,t.flags&=-129):null!==e&&null===e.memoizedState||(i|=1),Ao(ei,1&i),null===e)return ua(t),null!==(e=t.memoizedState)&&null!==(e=e.dehydrated)?(1&t.mode?"$!"===e.data?t.lanes=8:t.lanes=1073741824:t.lanes=1,null):(l=o.children,e=o.fallback,s?(o=t.mode,s=t.child,l={mode:"hidden",children:l},1&o||null===s?s=Ic(l,o,0,null):(s.childLanes=0,s.pendingProps=l),e=Dc(e,o,n,null),s.return=t,e.return=t,s.sibling=e,t.child=s,t.child.memoizedState=Is(n),t.memoizedState=Ds,e):Fs(t,l));if(null!==(i=e.memoizedState)&&null!==(r=i.dehydrated))return function(e,t,n,r,o,i,s){if(n)return 256&t.flags?(t.flags&=-257,zs(e,t,s,r=us(Error(a(422))))):null!==t.memoizedState?(t.child=e.child,t.flags|=128,null):(i=r.fallback,o=t.mode,r=Ic({mode:"visible",children:r.children},o,0,null),(i=Dc(i,o,s,null)).flags|=2,r.return=t,i.return=t,r.sibling=i,t.child=r,1&t.mode&&ka(t,e.child,null,s),t.child.memoizedState=Is(s),t.memoizedState=Ds,i);if(!(1&t.mode))return zs(e,t,s,null);if("$!"===o.data){if(r=o.nextSibling&&o.nextSibling.dataset)var l=r.dgst;return r=l,zs(e,t,s,r=us(i=Error(a(419)),r,void 0))}if(l=!!(s&e.childLanes),vs||l){if(null!==(r=jl)){switch(s&-s){case 4:o=2;break;case 16:o=8;break;case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:o=32;break;case 536870912:o=268435456;break;default:o=0}0!==(o=o&(r.suspendedLanes|s)?0:o)&&o!==i.retryLane&&(i.retryLane=o,Da(e,o),nc(r,e,o,-1))}return mc(),zs(e,t,s,r=us(Error(a(421))))}return"$?"===o.data?(t.flags|=128,t.child=e.child,t=Ac.bind(null,e),o._reactRetry=t,null):(e=i.treeContext,oa=co(o.nextSibling),ra=t,aa=!0,ia=null,null!==e&&(Ko[Qo++]=Zo,Ko[Qo++]=Xo,Ko[Qo++]=Yo,Zo=e.id,Xo=e.overflow,Yo=t),t=Fs(t,r.children),t.flags|=4096,t)}(e,t,l,o,r,i,n);if(s){s=o.fallback,l=t.mode,r=(i=e.child).sibling;var c={mode:"hidden",children:o.children};return 1&l||t.child===i?(o=Nc(i,c)).subtreeFlags=14680064&i.subtreeFlags:((o=t.child).childLanes=0,o.pendingProps=c,t.deletions=null),null!==r?s=Nc(r,s):(s=Dc(s,l,n,null)).flags|=2,s.return=t,o.return=t,o.sibling=s,t.child=o,o=s,s=t.child,l=null===(l=e.child.memoizedState)?Is(n):{baseLanes:l.baseLanes|n,cachePool:null,transitions:l.transitions},s.memoizedState=l,s.childLanes=e.childLanes&~n,t.memoizedState=Ds,o}return e=(s=e.child).sibling,o=Nc(s,{mode:"visible",children:o.children}),!(1&t.mode)&&(o.lanes=n),o.return=t,o.sibling=null,null!==e&&(null===(n=t.deletions)?(t.deletions=[e],t.flags|=16):n.push(e)),t.child=o,t.memoizedState=null,o}function Fs(e,t){return(t=Ic({mode:"visible",children:t},e.mode,0,null)).return=e,e.child=t}function zs(e,t,n,r){return null!==r&&ma(r),ka(t,e.child,null,n),(e=Fs(t,t.pendingProps.children)).flags|=2,t.memoizedState=null,e}function Bs(e,t,n){e.lanes|=t;var r=e.alternate;null!==r&&(r.lanes|=t),ja(e.return,t,n)}function $s(e,t,n,r,o){var a=e.memoizedState;null===a?e.memoizedState={isBackwards:t,rendering:null,renderingStartTime:0,last:r,tail:n,tailMode:o}:(a.isBackwards=t,a.rendering=null,a.renderingStartTime=0,a.last=r,a.tail=n,a.tailMode=o)}function Us(e,t,n){var r=t.pendingProps,o=r.revealOrder,a=r.tail;if(ws(e,t,r.children,n),2&(r=ei.current))r=1&r|2,t.flags|=128;else{if(null!==e&&128&e.flags)e:for(e=t.child;null!==e;){if(13===e.tag)null!==e.memoizedState&&Bs(e,n,t);else if(19===e.tag)Bs(e,n,t);else if(null!==e.child){e.child.return=e,e=e.child;continue}if(e===t)break e;for(;null===e.sibling;){if(null===e.return||e.return===t)break e;e=e.return}e.sibling.return=e.return,e=e.sibling}r&=1}if(Ao(ei,r),1&t.mode)switch(o){case"forwards":for(n=t.child,o=null;null!==n;)null!==(e=n.alternate)&&null===ti(e)&&(o=n),n=n.sibling;null===(n=o)?(o=t.child,t.child=null):(o=n.sibling,n.sibling=null),$s(t,!1,o,n,a);break;case"backwards":for(n=null,o=t.child,t.child=null;null!==o;){if(null!==(e=o.alternate)&&null===ti(e)){t.child=o;break}e=o.sibling,o.sibling=n,n=o,o=e}$s(t,!0,n,null,a);break;case"together":$s(t,!1,null,null,void 0);break;default:t.memoizedState=null}else t.memoizedState=null;return t.child}function qs(e,t){!(1&t.mode)&&null!==e&&(e.alternate=null,t.alternate=null,t.flags|=2)}function Gs(e,t,n){if(null!==e&&(t.dependencies=e.dependencies),Il|=t.lanes,!(n&t.childLanes))return null;if(null!==e&&t.child!==e.child)throw Error(a(153));if(null!==t.child){for(n=Nc(e=t.child,e.pendingProps),t.child=n,n.return=t;null!==e.sibling;)e=e.sibling,(n=n.sibling=Nc(e,e.pendingProps)).return=t;n.sibling=null}return t.child}function Hs(e,t){if(!aa)switch(e.tailMode){case"hidden":t=e.tail;for(var n=null;null!==t;)null!==t.alternate&&(n=t),t=t.sibling;null===n?e.tail=null:n.sibling=null;break;case"collapsed":n=e.tail;for(var r=null;null!==n;)null!==n.alternate&&(r=n),n=n.sibling;null===r?t||null===e.tail?e.tail=null:e.tail.sibling=null:r.sibling=null}}function Vs(e){var t=null!==e.alternate&&e.alternate.child===e.child,n=0,r=0;if(t)for(var o=e.child;null!==o;)n|=o.lanes|o.childLanes,r|=14680064&o.subtreeFlags,r|=14680064&o.flags,o.return=e,o=o.sibling;else for(o=e.child;null!==o;)n|=o.lanes|o.childLanes,r|=o.subtreeFlags,r|=o.flags,o.return=e,o=o.sibling;return e.subtreeFlags|=r,e.childLanes=n,t}function Ws(e,t,n){var r=t.pendingProps;switch(na(t),t.tag){case 2:case 16:case 15:case 0:case 11:case 7:case 8:case 12:case 9:case 14:return Vs(t),null;case 1:case 17:return No(t.type)&&Oo(),Vs(t),null;case 3:return r=t.stateNode,Za(),Co(Ro),Co(jo),ri(),r.pendingContext&&(r.context=r.pendingContext,r.pendingContext=null),null!==e&&null!==e.child||(pa(t)?t.flags|=4:null===e||e.memoizedState.isDehydrated&&!(256&t.flags)||(t.flags|=1024,null!==ia&&(ic(ia),ia=null))),Ls(e,t),Vs(t),null;case 5:Ja(t);var o=Qa(Ka.current);if(n=t.type,null!==e&&null!=t.stateNode)Ns(e,t,n,r,o),e.ref!==t.ref&&(t.flags|=512,t.flags|=2097152);else{if(!r){if(null===t.stateNode)throw Error(a(166));return Vs(t),null}if(e=Qa(Va.current),pa(t)){r=t.stateNode,n=t.type;var i=t.memoizedProps;switch(r[fo]=t,r[go]=i,e=!!(1&t.mode),n){case"dialog":zr("cancel",r),zr("close",r);break;case"iframe":case"object":case"embed":zr("load",r);break;case"video":case"audio":for(o=0;o<Dr.length;o++)zr(Dr[o],r);break;case"source":zr("error",r);break;case"img":case"image":case"link":zr("error",r),zr("load",r);break;case"details":zr("toggle",r);break;case"input":Y(r,i),zr("invalid",r);break;case"select":r._wrapperState={wasMultiple:!!i.multiple},zr("invalid",r);break;case"textarea":oe(r,i),zr("invalid",r)}for(var l in be(n,i),o=null,i)if(i.hasOwnProperty(l)){var c=i[l];"children"===l?"string"==typeof c?r.textContent!==c&&(!0!==i.suppressHydrationWarning&&Xr(r.textContent,c,e),o=["children",c]):"number"==typeof c&&r.textContent!==""+c&&(!0!==i.suppressHydrationWarning&&Xr(r.textContent,c,e),o=["children",""+c]):s.hasOwnProperty(l)&&null!=c&&"onScroll"===l&&zr("scroll",r)}switch(n){case"input":V(r),J(r,i,!0);break;case"textarea":V(r),ie(r);break;case"select":case"option":break;default:"function"==typeof i.onClick&&(r.onclick=Jr)}r=o,t.updateQueue=r,null!==r&&(t.flags|=4)}else{l=9===o.nodeType?o:o.ownerDocument,"http://www.w3.org/1999/xhtml"===e&&(e=se(n)),"http://www.w3.org/1999/xhtml"===e?"script"===n?((e=l.createElement("div")).innerHTML="<script><\/script>",e=e.removeChild(e.firstChild)):"string"==typeof r.is?e=l.createElement(n,{is:r.is}):(e=l.createElement(n),"select"===n&&(l=e,r.multiple?l.multiple=!0:r.size&&(l.size=r.size))):e=l.createElementNS(e,n),e[fo]=t,e[go]=r,Ps(e,t,!1,!1),t.stateNode=e;e:{switch(l=ve(n,r),n){case"dialog":zr("cancel",e),zr("close",e),o=r;break;case"iframe":case"object":case"embed":zr("load",e),o=r;break;case"video":case"audio":for(o=0;o<Dr.length;o++)zr(Dr[o],e);o=r;break;case"source":zr("error",e),o=r;break;case"img":case"image":case"link":zr("error",e),zr("load",e),o=r;break;case"details":zr("toggle",e),o=r;break;case"input":Y(e,r),o=Q(e,r),zr("invalid",e);break;case"option":default:o=r;break;case"select":e._wrapperState={wasMultiple:!!r.multiple},o=M({},r,{value:void 0}),zr("invalid",e);break;case"textarea":oe(e,r),o=re(e,r),zr("invalid",e)}for(i in be(n,o),c=o)if(c.hasOwnProperty(i)){var u=c[i];"style"===i?he(e,u):"dangerouslySetInnerHTML"===i?null!=(u=u?u.__html:void 0)&&de(e,u):"children"===i?"string"==typeof u?("textarea"!==n||""!==u)&&pe(e,u):"number"==typeof u&&pe(e,""+u):"suppressContentEditableWarning"!==i&&"suppressHydrationWarning"!==i&&"autoFocus"!==i&&(s.hasOwnProperty(i)?null!=u&&"onScroll"===i&&zr("scroll",e):null!=u&&v(e,i,u,l))}switch(n){case"input":V(e),J(e,r,!1);break;case"textarea":V(e),ie(e);break;case"option":null!=r.value&&e.setAttribute("value",""+G(r.value));break;case"select":e.multiple=!!r.multiple,null!=(i=r.value)?ne(e,!!r.multiple,i,!1):null!=r.defaultValue&&ne(e,!!r.multiple,r.defaultValue,!0);break;default:"function"==typeof o.onClick&&(e.onclick=Jr)}switch(n){case"button":case"input":case"select":case"textarea":r=!!r.autoFocus;break e;case"img":r=!0;break e;default:r=!1}}r&&(t.flags|=4)}null!==t.ref&&(t.flags|=512,t.flags|=2097152)}return Vs(t),null;case 6:if(e&&null!=t.stateNode)Os(e,t,e.memoizedProps,r);else{if("string"!=typeof r&&null===t.stateNode)throw Error(a(166));if(n=Qa(Ka.current),Qa(Va.current),pa(t)){if(r=t.stateNode,n=t.memoizedProps,r[fo]=t,(i=r.nodeValue!==n)&&null!==(e=ra))switch(e.tag){case 3:Xr(r.nodeValue,n,!!(1&e.mode));break;case 5:!0!==e.memoizedProps.suppressHydrationWarning&&Xr(r.nodeValue,n,!!(1&e.mode))}i&&(t.flags|=4)}else(r=(9===n.nodeType?n:n.ownerDocument).createTextNode(r))[fo]=t,t.stateNode=r}return Vs(t),null;case 13:if(Co(ei),r=t.memoizedState,null===e||null!==e.memoizedState&&null!==e.memoizedState.dehydrated){if(aa&&null!==oa&&1&t.mode&&!(128&t.flags))fa(),ga(),t.flags|=98560,i=!1;else if(i=pa(t),null!==r&&null!==r.dehydrated){if(null===e){if(!i)throw Error(a(318));if(!(i=null!==(i=t.memoizedState)?i.dehydrated:null))throw Error(a(317));i[fo]=t}else ga(),!(128&t.flags)&&(t.memoizedState=null),t.flags|=4;Vs(t),i=!1}else null!==ia&&(ic(ia),ia=null),i=!0;if(!i)return 65536&t.flags?t:null}return 128&t.flags?(t.lanes=n,t):((r=null!==r)!==(null!==e&&null!==e.memoizedState)&&r&&(t.child.flags|=8192,1&t.mode&&(null===e||1&ei.current?0===Ol&&(Ol=3):mc())),null!==t.updateQueue&&(t.flags|=4),Vs(t),null);case 4:return Za(),Ls(e,t),null===e&&Ur(t.stateNode.containerInfo),Vs(t),null;case 10:return Ta(t.type._context),Vs(t),null;case 19:if(Co(ei),null===(i=t.memoizedState))return Vs(t),null;if(r=!!(128&t.flags),null===(l=i.rendering))if(r)Hs(i,!1);else{if(0!==Ol||null!==e&&128&e.flags)for(e=t.child;null!==e;){if(null!==(l=ti(e))){for(t.flags|=128,Hs(i,!1),null!==(r=l.updateQueue)&&(t.updateQueue=r,t.flags|=4),t.subtreeFlags=0,r=n,n=t.child;null!==n;)e=r,(i=n).flags&=14680066,null===(l=i.alternate)?(i.childLanes=0,i.lanes=e,i.child=null,i.subtreeFlags=0,i.memoizedProps=null,i.memoizedState=null,i.updateQueue=null,i.dependencies=null,i.stateNode=null):(i.childLanes=l.childLanes,i.lanes=l.lanes,i.child=l.child,i.subtreeFlags=0,i.deletions=null,i.memoizedProps=l.memoizedProps,i.memoizedState=l.memoizedState,i.updateQueue=l.updateQueue,i.type=l.type,e=l.dependencies,i.dependencies=null===e?null:{lanes:e.lanes,firstContext:e.firstContext}),n=n.sibling;return Ao(ei,1&ei.current|2),t.child}e=e.sibling}null!==i.tail&&Ze()>Ul&&(t.flags|=128,r=!0,Hs(i,!1),t.lanes=4194304)}else{if(!r)if(null!==(e=ti(l))){if(t.flags|=128,r=!0,null!==(n=e.updateQueue)&&(t.updateQueue=n,t.flags|=4),Hs(i,!0),null===i.tail&&"hidden"===i.tailMode&&!l.alternate&&!aa)return Vs(t),null}else 2*Ze()-i.renderingStartTime>Ul&&1073741824!==n&&(t.flags|=128,r=!0,Hs(i,!1),t.lanes=4194304);i.isBackwards?(l.sibling=t.child,t.child=l):(null!==(n=i.last)?n.sibling=l:t.child=l,i.last=l)}return null!==i.tail?(t=i.tail,i.rendering=t,i.tail=t.sibling,i.renderingStartTime=Ze(),t.sibling=null,n=ei.current,Ao(ei,r?1&n|2:1&n),t):(Vs(t),null);case 22:case 23:return dc(),r=null!==t.memoizedState,null!==e&&null!==e.memoizedState!==r&&(t.flags|=8192),r&&1&t.mode?!!(1073741824&Ll)&&(Vs(t),6&t.subtreeFlags&&(t.flags|=8192)):Vs(t),null;case 24:case 25:return null}throw Error(a(156,t.tag))}function Ks(e,t){switch(na(t),t.tag){case 1:return No(t.type)&&Oo(),65536&(e=t.flags)?(t.flags=-65537&e|128,t):null;case 3:return Za(),Co(Ro),Co(jo),ri(),65536&(e=t.flags)&&!(128&e)?(t.flags=-65537&e|128,t):null;case 5:return Ja(t),null;case 13:if(Co(ei),null!==(e=t.memoizedState)&&null!==e.dehydrated){if(null===t.alternate)throw Error(a(340));ga()}return 65536&(e=t.flags)?(t.flags=-65537&e|128,t):null;case 19:return Co(ei),null;case 4:return Za(),null;case 10:return Ta(t.type._context),null;case 22:case 23:return dc(),null;default:return null}}Ps=function(e,t){for(var n=t.child;null!==n;){if(5===n.tag||6===n.tag)e.appendChild(n.stateNode);else if(4!==n.tag&&null!==n.child){n.child.return=n,n=n.child;continue}if(n===t)break;for(;null===n.sibling;){if(null===n.return||n.return===t)return;n=n.return}n.sibling.return=n.return,n=n.sibling}},Ls=function(){},Ns=function(e,t,n,r){var o=e.memoizedProps;if(o!==r){e=t.stateNode,Qa(Va.current);var a,i=null;switch(n){case"input":o=Q(e,o),r=Q(e,r),i=[];break;case"select":o=M({},o,{value:void 0}),r=M({},r,{value:void 0}),i=[];break;case"textarea":o=re(e,o),r=re(e,r),i=[];break;default:"function"!=typeof o.onClick&&"function"==typeof r.onClick&&(e.onclick=Jr)}for(u in be(n,r),n=null,o)if(!r.hasOwnProperty(u)&&o.hasOwnProperty(u)&&null!=o[u])if("style"===u){var l=o[u];for(a in l)l.hasOwnProperty(a)&&(n||(n={}),n[a]="")}else"dangerouslySetInnerHTML"!==u&&"children"!==u&&"suppressContentEditableWarning"!==u&&"suppressHydrationWarning"!==u&&"autoFocus"!==u&&(s.hasOwnProperty(u)?i||(i=[]):(i=i||[]).push(u,null));for(u in r){var c=r[u];if(l=null!=o?o[u]:void 0,r.hasOwnProperty(u)&&c!==l&&(null!=c||null!=l))if("style"===u)if(l){for(a in l)!l.hasOwnProperty(a)||c&&c.hasOwnProperty(a)||(n||(n={}),n[a]="");for(a in c)c.hasOwnProperty(a)&&l[a]!==c[a]&&(n||(n={}),n[a]=c[a])}else n||(i||(i=[]),i.push(u,n)),n=c;else"dangerouslySetInnerHTML"===u?(c=c?c.__html:void 0,l=l?l.__html:void 0,null!=c&&l!==c&&(i=i||[]).push(u,c)):"children"===u?"string"!=typeof c&&"number"!=typeof c||(i=i||[]).push(u,""+c):"suppressContentEditableWarning"!==u&&"suppressHydrationWarning"!==u&&(s.hasOwnProperty(u)?(null!=c&&"onScroll"===u&&zr("scroll",e),i||l===c||(i=[])):(i=i||[]).push(u,c))}n&&(i=i||[]).push("style",n);var u=i;(t.updateQueue=u)&&(t.flags|=4)}},Os=function(e,t,n,r){n!==r&&(t.flags|=4)};var Qs=!1,Ys=!1,Zs="function"==typeof WeakSet?WeakSet:Set,Xs=null;function Js(e,t){var n=e.ref;if(null!==n)if("function"==typeof n)try{n(null)}catch(r){_c(e,t,r)}else n.current=null}function el(e,t,n){try{n()}catch(r){_c(e,t,r)}}var tl=!1;function nl(e,t,n){var r=t.updateQueue;if(null!==(r=null!==r?r.lastEffect:null)){var o=r=r.next;do{if((o.tag&e)===e){var a=o.destroy;o.destroy=void 0,void 0!==a&&el(t,n,a)}o=o.next}while(o!==r)}}function rl(e,t){if(null!==(t=null!==(t=t.updateQueue)?t.lastEffect:null)){var n=t=t.next;do{if((n.tag&e)===e){var r=n.create;n.destroy=r()}n=n.next}while(n!==t)}}function ol(e){var t=e.ref;if(null!==t){var n=e.stateNode;e.tag,e=n,"function"==typeof t?t(e):t.current=e}}function al(e){var t=e.alternate;null!==t&&(e.alternate=null,al(t)),e.child=null,e.deletions=null,e.sibling=null,5===e.tag&&(null!==(t=e.stateNode)&&(delete t[fo],delete t[go],delete t[ho],delete t[yo],delete t[bo])),e.stateNode=null,e.return=null,e.dependencies=null,e.memoizedProps=null,e.memoizedState=null,e.pendingProps=null,e.stateNode=null,e.updateQueue=null}function il(e){return 5===e.tag||3===e.tag||4===e.tag}function sl(e){e:for(;;){for(;null===e.sibling;){if(null===e.return||il(e.return))return null;e=e.return}for(e.sibling.return=e.return,e=e.sibling;5!==e.tag&&6!==e.tag&&18!==e.tag;){if(2&e.flags)continue e;if(null===e.child||4===e.tag)continue e;e.child.return=e,e=e.child}if(!(2&e.flags))return e.stateNode}}function ll(e,t,n){var r=e.tag;if(5===r||6===r)e=e.stateNode,t?8===n.nodeType?n.parentNode.insertBefore(e,t):n.insertBefore(e,t):(8===n.nodeType?(t=n.parentNode).insertBefore(e,n):(t=n).appendChild(e),null!=(n=n._reactRootContainer)||null!==t.onclick||(t.onclick=Jr));else if(4!==r&&null!==(e=e.child))for(ll(e,t,n),e=e.sibling;null!==e;)ll(e,t,n),e=e.sibling}function cl(e,t,n){var r=e.tag;if(5===r||6===r)e=e.stateNode,t?n.insertBefore(e,t):n.appendChild(e);else if(4!==r&&null!==(e=e.child))for(cl(e,t,n),e=e.sibling;null!==e;)cl(e,t,n),e=e.sibling}var ul=null,dl=!1;function pl(e,t,n){for(n=n.child;null!==n;)fl(e,t,n),n=n.sibling}function fl(e,t,n){if(at&&"function"==typeof at.onCommitFiberUnmount)try{at.onCommitFiberUnmount(ot,n)}catch(s){}switch(n.tag){case 5:Ys||Js(n,t);case 6:var r=ul,o=dl;ul=null,pl(e,t,n),dl=o,null!==(ul=r)&&(dl?(e=ul,n=n.stateNode,8===e.nodeType?e.parentNode.removeChild(n):e.removeChild(n)):ul.removeChild(n.stateNode));break;case 18:null!==ul&&(dl?(e=ul,n=n.stateNode,8===e.nodeType?lo(e.parentNode,n):1===e.nodeType&&lo(e,n),Ut(e)):lo(ul,n.stateNode));break;case 4:r=ul,o=dl,ul=n.stateNode.containerInfo,dl=!0,pl(e,t,n),ul=r,dl=o;break;case 0:case 11:case 14:case 15:if(!Ys&&(null!==(r=n.updateQueue)&&null!==(r=r.lastEffect))){o=r=r.next;do{var a=o,i=a.destroy;a=a.tag,void 0!==i&&(2&a||4&a)&&el(n,t,i),o=o.next}while(o!==r)}pl(e,t,n);break;case 1:if(!Ys&&(Js(n,t),"function"==typeof(r=n.stateNode).componentWillUnmount))try{r.props=n.memoizedProps,r.state=n.memoizedState,r.componentWillUnmount()}catch(s){_c(n,t,s)}pl(e,t,n);break;case 21:pl(e,t,n);break;case 22:1&n.mode?(Ys=(r=Ys)||null!==n.memoizedState,pl(e,t,n),Ys=r):pl(e,t,n);break;default:pl(e,t,n)}}function gl(e){var t=e.updateQueue;if(null!==t){e.updateQueue=null;var n=e.stateNode;null===n&&(n=e.stateNode=new Zs),t.forEach((function(t){var r=Tc.bind(null,e,t);n.has(t)||(n.add(t),t.then(r,r))}))}}function ml(e,t){var n=t.deletions;if(null!==n)for(var r=0;r<n.length;r++){var o=n[r];try{var i=e,s=t,l=s;e:for(;null!==l;){switch(l.tag){case 5:ul=l.stateNode,dl=!1;break e;case 3:case 4:ul=l.stateNode.containerInfo,dl=!0;break e}l=l.return}if(null===ul)throw Error(a(160));fl(i,s,o),ul=null,dl=!1;var c=o.alternate;null!==c&&(c.return=null),o.return=null}catch(u){_c(o,t,u)}}if(12854&t.subtreeFlags)for(t=t.child;null!==t;)hl(t,e),t=t.sibling}function hl(e,t){var n=e.alternate,r=e.flags;switch(e.tag){case 0:case 11:case 14:case 15:if(ml(t,e),yl(e),4&r){try{nl(3,e,e.return),rl(3,e)}catch(h){_c(e,e.return,h)}try{nl(5,e,e.return)}catch(h){_c(e,e.return,h)}}break;case 1:ml(t,e),yl(e),512&r&&null!==n&&Js(n,n.return);break;case 5:if(ml(t,e),yl(e),512&r&&null!==n&&Js(n,n.return),32&e.flags){var o=e.stateNode;try{pe(o,"")}catch(h){_c(e,e.return,h)}}if(4&r&&null!=(o=e.stateNode)){var i=e.memoizedProps,s=null!==n?n.memoizedProps:i,l=e.type,c=e.updateQueue;if(e.updateQueue=null,null!==c)try{"input"===l&&"radio"===i.type&&null!=i.name&&Z(o,i),ve(l,s);var u=ve(l,i);for(s=0;s<c.length;s+=2){var d=c[s],p=c[s+1];"style"===d?he(o,p):"dangerouslySetInnerHTML"===d?de(o,p):"children"===d?pe(o,p):v(o,d,p,u)}switch(l){case"input":X(o,i);break;case"textarea":ae(o,i);break;case"select":var f=o._wrapperState.wasMultiple;o._wrapperState.wasMultiple=!!i.multiple;var g=i.value;null!=g?ne(o,!!i.multiple,g,!1):f!==!!i.multiple&&(null!=i.defaultValue?ne(o,!!i.multiple,i.defaultValue,!0):ne(o,!!i.multiple,i.multiple?[]:"",!1))}o[go]=i}catch(h){_c(e,e.return,h)}}break;case 6:if(ml(t,e),yl(e),4&r){if(null===e.stateNode)throw Error(a(162));o=e.stateNode,i=e.memoizedProps;try{o.nodeValue=i}catch(h){_c(e,e.return,h)}}break;case 3:if(ml(t,e),yl(e),4&r&&null!==n&&n.memoizedState.isDehydrated)try{Ut(t.containerInfo)}catch(h){_c(e,e.return,h)}break;case 4:default:ml(t,e),yl(e);break;case 13:ml(t,e),yl(e),8192&(o=e.child).flags&&(i=null!==o.memoizedState,o.stateNode.isHidden=i,!i||null!==o.alternate&&null!==o.alternate.memoizedState||($l=Ze())),4&r&&gl(e);break;case 22:if(d=null!==n&&null!==n.memoizedState,1&e.mode?(Ys=(u=Ys)||d,ml(t,e),Ys=u):ml(t,e),yl(e),8192&r){if(u=null!==e.memoizedState,(e.stateNode.isHidden=u)&&!d&&1&e.mode)for(Xs=e,d=e.child;null!==d;){for(p=Xs=d;null!==Xs;){switch(g=(f=Xs).child,f.tag){case 0:case 11:case 14:case 15:nl(4,f,f.return);break;case 1:Js(f,f.return);var m=f.stateNode;if("function"==typeof m.componentWillUnmount){r=f,n=f.return;try{t=r,m.props=t.memoizedProps,m.state=t.memoizedState,m.componentWillUnmount()}catch(h){_c(r,n,h)}}break;case 5:Js(f,f.return);break;case 22:if(null!==f.memoizedState){kl(p);continue}}null!==g?(g.return=f,Xs=g):kl(p)}d=d.sibling}e:for(d=null,p=e;;){if(5===p.tag){if(null===d){d=p;try{o=p.stateNode,u?"function"==typeof(i=o.style).setProperty?i.setProperty("display","none","important"):i.display="none":(l=p.stateNode,s=null!=(c=p.memoizedProps.style)&&c.hasOwnProperty("display")?c.display:null,l.style.display=me("display",s))}catch(h){_c(e,e.return,h)}}}else if(6===p.tag){if(null===d)try{p.stateNode.nodeValue=u?"":p.memoizedProps}catch(h){_c(e,e.return,h)}}else if((22!==p.tag&&23!==p.tag||null===p.memoizedState||p===e)&&null!==p.child){p.child.return=p,p=p.child;continue}if(p===e)break e;for(;null===p.sibling;){if(null===p.return||p.return===e)break e;d===p&&(d=null),p=p.return}d===p&&(d=null),p.sibling.return=p.return,p=p.sibling}}break;case 19:ml(t,e),yl(e),4&r&&gl(e);case 21:}}function yl(e){var t=e.flags;if(2&t){try{e:{for(var n=e.return;null!==n;){if(il(n)){var r=n;break e}n=n.return}throw Error(a(160))}switch(r.tag){case 5:var o=r.stateNode;32&r.flags&&(pe(o,""),r.flags&=-33),cl(e,sl(e),o);break;case 3:case 4:var i=r.stateNode.containerInfo;ll(e,sl(e),i);break;default:throw Error(a(161))}}catch(s){_c(e,e.return,s)}e.flags&=-3}4096&t&&(e.flags&=-4097)}function bl(e,t,n){Xs=e,vl(e,t,n)}function vl(e,t,n){for(var r=!!(1&e.mode);null!==Xs;){var o=Xs,a=o.child;if(22===o.tag&&r){var i=null!==o.memoizedState||Qs;if(!i){var s=o.alternate,l=null!==s&&null!==s.memoizedState||Ys;s=Qs;var c=Ys;if(Qs=i,(Ys=l)&&!c)for(Xs=o;null!==Xs;)l=(i=Xs).child,22===i.tag&&null!==i.memoizedState?xl(o):null!==l?(l.return=i,Xs=l):xl(o);for(;null!==a;)Xs=a,vl(a,t,n),a=a.sibling;Xs=o,Qs=s,Ys=c}wl(e)}else 8772&o.subtreeFlags&&null!==a?(a.return=o,Xs=a):wl(e)}}function wl(e){for(;null!==Xs;){var t=Xs;if(8772&t.flags){var n=t.alternate;try{if(8772&t.flags)switch(t.tag){case 0:case 11:case 15:Ys||rl(5,t);break;case 1:var r=t.stateNode;if(4&t.flags&&!Ys)if(null===n)r.componentDidMount();else{var o=t.elementType===t.type?n.memoizedProps:ns(t.type,n.memoizedProps);r.componentDidUpdate(o,n.memoizedState,r.__reactInternalSnapshotBeforeUpdate)}var i=t.updateQueue;null!==i&&Ga(t,i,r);break;case 3:var s=t.updateQueue;if(null!==s){if(n=null,null!==t.child)switch(t.child.tag){case 5:case 1:n=t.child.stateNode}Ga(t,s,n)}break;case 5:var l=t.stateNode;if(null===n&&4&t.flags){n=l;var c=t.memoizedProps;switch(t.type){case"button":case"input":case"select":case"textarea":c.autoFocus&&n.focus();break;case"img":c.src&&(n.src=c.src)}}break;case 6:case 4:case 12:case 19:case 17:case 21:case 22:case 23:case 25:break;case 13:if(null===t.memoizedState){var u=t.alternate;if(null!==u){var d=u.memoizedState;if(null!==d){var p=d.dehydrated;null!==p&&Ut(p)}}}break;default:throw Error(a(163))}Ys||512&t.flags&&ol(t)}catch(f){_c(t,t.return,f)}}if(t===e){Xs=null;break}if(null!==(n=t.sibling)){n.return=t.return,Xs=n;break}Xs=t.return}}function kl(e){for(;null!==Xs;){var t=Xs;if(t===e){Xs=null;break}var n=t.sibling;if(null!==n){n.return=t.return,Xs=n;break}Xs=t.return}}function xl(e){for(;null!==Xs;){var t=Xs;try{switch(t.tag){case 0:case 11:case 15:var n=t.return;try{rl(4,t)}catch(l){_c(t,n,l)}break;case 1:var r=t.stateNode;if("function"==typeof r.componentDidMount){var o=t.return;try{r.componentDidMount()}catch(l){_c(t,o,l)}}var a=t.return;try{ol(t)}catch(l){_c(t,a,l)}break;case 5:var i=t.return;try{ol(t)}catch(l){_c(t,i,l)}}}catch(l){_c(t,t.return,l)}if(t===e){Xs=null;break}var s=t.sibling;if(null!==s){s.return=t.return,Xs=s;break}Xs=t.return}}var Sl,_l=Math.ceil,El=w.ReactCurrentDispatcher,Cl=w.ReactCurrentOwner,Al=w.ReactCurrentBatchConfig,Tl=0,jl=null,Rl=null,Pl=0,Ll=0,Nl=Eo(0),Ol=0,Dl=null,Il=0,Ml=0,Fl=0,zl=null,Bl=null,$l=0,Ul=1/0,ql=null,Gl=!1,Hl=null,Vl=null,Wl=!1,Kl=null,Ql=0,Yl=0,Zl=null,Xl=-1,Jl=0;function ec(){return 6&Tl?Ze():-1!==Xl?Xl:Xl=Ze()}function tc(e){return 1&e.mode?2&Tl&&0!==Pl?Pl&-Pl:null!==ha.transition?(0===Jl&&(Jl=mt()),Jl):0!==(e=vt)?e:e=void 0===(e=window.event)?16:Yt(e.type):1}function nc(e,t,n,r){if(50<Yl)throw Yl=0,Zl=null,Error(a(185));yt(e,n,r),2&Tl&&e===jl||(e===jl&&(!(2&Tl)&&(Ml|=n),4===Ol&&sc(e,Pl)),rc(e,r),1===n&&0===Tl&&!(1&t.mode)&&(Ul=Ze()+500,Bo&&qo()))}function rc(e,t){var n=e.callbackNode;!function(e,t){for(var n=e.suspendedLanes,r=e.pingedLanes,o=e.expirationTimes,a=e.pendingLanes;0<a;){var i=31-it(a),s=1<<i,l=o[i];-1===l?s&n&&!(s&r)||(o[i]=ft(s,t)):l<=t&&(e.expiredLanes|=s),a&=~s}}(e,t);var r=pt(e,e===jl?Pl:0);if(0===r)null!==n&&Ke(n),e.callbackNode=null,e.callbackPriority=0;else if(t=r&-r,e.callbackPriority!==t){if(null!=n&&Ke(n),1===t)0===e.tag?function(e){Bo=!0,Uo(e)}(lc.bind(null,e)):Uo(lc.bind(null,e)),io((function(){!(6&Tl)&&qo()})),n=null;else{switch(wt(r)){case 1:n=Je;break;case 4:n=et;break;case 16:default:n=tt;break;case 536870912:n=rt}n=jc(n,oc.bind(null,e))}e.callbackPriority=t,e.callbackNode=n}}function oc(e,t){if(Xl=-1,Jl=0,6&Tl)throw Error(a(327));var n=e.callbackNode;if(xc()&&e.callbackNode!==n)return null;var r=pt(e,e===jl?Pl:0);if(0===r)return null;if(30&r||r&e.expiredLanes||t)t=hc(e,r);else{t=r;var o=Tl;Tl|=2;var i=gc();for(jl===e&&Pl===t||(ql=null,Ul=Ze()+500,pc(e,t));;)try{bc();break}catch(l){fc(e,l)}Aa(),El.current=i,Tl=o,null!==Rl?t=0:(jl=null,Pl=0,t=Ol)}if(0!==t){if(2===t&&(0!==(o=gt(e))&&(r=o,t=ac(e,o))),1===t)throw n=Dl,pc(e,0),sc(e,r),rc(e,Ze()),n;if(6===t)sc(e,r);else{if(o=e.current.alternate,!(30&r||function(e){for(var t=e;;){if(16384&t.flags){var n=t.updateQueue;if(null!==n&&null!==(n=n.stores))for(var r=0;r<n.length;r++){var o=n[r],a=o.getSnapshot;o=o.value;try{if(!sr(a(),o))return!1}catch(s){return!1}}}if(n=t.child,16384&t.subtreeFlags&&null!==n)n.return=t,t=n;else{if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return!0;t=t.return}t.sibling.return=t.return,t=t.sibling}}return!0}(o)||(t=hc(e,r),2===t&&(i=gt(e),0!==i&&(r=i,t=ac(e,i))),1!==t)))throw n=Dl,pc(e,0),sc(e,r),rc(e,Ze()),n;switch(e.finishedWork=o,e.finishedLanes=r,t){case 0:case 1:throw Error(a(345));case 2:case 5:kc(e,Bl,ql);break;case 3:if(sc(e,r),(130023424&r)===r&&10<(t=$l+500-Ze())){if(0!==pt(e,0))break;if(((o=e.suspendedLanes)&r)!==r){ec(),e.pingedLanes|=e.suspendedLanes&o;break}e.timeoutHandle=ro(kc.bind(null,e,Bl,ql),t);break}kc(e,Bl,ql);break;case 4:if(sc(e,r),(4194240&r)===r)break;for(t=e.eventTimes,o=-1;0<r;){var s=31-it(r);i=1<<s,(s=t[s])>o&&(o=s),r&=~i}if(r=o,10<(r=(120>(r=Ze()-r)?120:480>r?480:1080>r?1080:1920>r?1920:3e3>r?3e3:4320>r?4320:1960*_l(r/1960))-r)){e.timeoutHandle=ro(kc.bind(null,e,Bl,ql),r);break}kc(e,Bl,ql);break;default:throw Error(a(329))}}}return rc(e,Ze()),e.callbackNode===n?oc.bind(null,e):null}function ac(e,t){var n=zl;return e.current.memoizedState.isDehydrated&&(pc(e,t).flags|=256),2!==(e=hc(e,t))&&(t=Bl,Bl=n,null!==t&&ic(t)),e}function ic(e){null===Bl?Bl=e:Bl.push.apply(Bl,e)}function sc(e,t){for(t&=~Fl,t&=~Ml,e.suspendedLanes|=t,e.pingedLanes&=~t,e=e.expirationTimes;0<t;){var n=31-it(t),r=1<<n;e[n]=-1,t&=~r}}function lc(e){if(6&Tl)throw Error(a(327));xc();var t=pt(e,0);if(!(1&t))return rc(e,Ze()),null;var n=hc(e,t);if(0!==e.tag&&2===n){var r=gt(e);0!==r&&(t=r,n=ac(e,r))}if(1===n)throw n=Dl,pc(e,0),sc(e,t),rc(e,Ze()),n;if(6===n)throw Error(a(345));return e.finishedWork=e.current.alternate,e.finishedLanes=t,kc(e,Bl,ql),rc(e,Ze()),null}function cc(e,t){var n=Tl;Tl|=1;try{return e(t)}finally{0===(Tl=n)&&(Ul=Ze()+500,Bo&&qo())}}function uc(e){null!==Kl&&0===Kl.tag&&!(6&Tl)&&xc();var t=Tl;Tl|=1;var n=Al.transition,r=vt;try{if(Al.transition=null,vt=1,e)return e()}finally{vt=r,Al.transition=n,!(6&(Tl=t))&&qo()}}function dc(){Ll=Nl.current,Co(Nl)}function pc(e,t){e.finishedWork=null,e.finishedLanes=0;var n=e.timeoutHandle;if(-1!==n&&(e.timeoutHandle=-1,oo(n)),null!==Rl)for(n=Rl.return;null!==n;){var r=n;switch(na(r),r.tag){case 1:null!=(r=r.type.childContextTypes)&&Oo();break;case 3:Za(),Co(Ro),Co(jo),ri();break;case 5:Ja(r);break;case 4:Za();break;case 13:case 19:Co(ei);break;case 10:Ta(r.type._context);break;case 22:case 23:dc()}n=n.return}if(jl=e,Rl=e=Nc(e.current,null),Pl=Ll=t,Ol=0,Dl=null,Fl=Ml=Il=0,Bl=zl=null,null!==La){for(t=0;t<La.length;t++)if(null!==(r=(n=La[t]).interleaved)){n.interleaved=null;var o=r.next,a=n.pending;if(null!==a){var i=a.next;a.next=o,r.next=i}n.pending=r}La=null}return e}function fc(e,t){for(;;){var n=Rl;try{if(Aa(),oi.current=Xi,ui){for(var r=si.memoizedState;null!==r;){var o=r.queue;null!==o&&(o.pending=null),r=r.next}ui=!1}if(ii=0,ci=li=si=null,di=!1,pi=0,Cl.current=null,null===n||null===n.return){Ol=1,Dl=t,Rl=null;break}e:{var i=e,s=n.return,l=n,c=t;if(t=Pl,l.flags|=32768,null!==c&&"object"==typeof c&&"function"==typeof c.then){var u=c,d=l,p=d.tag;if(!(1&d.mode||0!==p&&11!==p&&15!==p)){var f=d.alternate;f?(d.updateQueue=f.updateQueue,d.memoizedState=f.memoizedState,d.lanes=f.lanes):(d.updateQueue=null,d.memoizedState=null)}var g=hs(s);if(null!==g){g.flags&=-257,ys(g,s,l,0,t),1&g.mode&&ms(i,u,t),c=u;var m=(t=g).updateQueue;if(null===m){var h=new Set;h.add(c),t.updateQueue=h}else m.add(c);break e}if(!(1&t)){ms(i,u,t),mc();break e}c=Error(a(426))}else if(aa&&1&l.mode){var y=hs(s);if(null!==y){!(65536&y.flags)&&(y.flags|=256),ys(y,s,l,0,t),ma(cs(c,l));break e}}i=c=cs(c,l),4!==Ol&&(Ol=2),null===zl?zl=[i]:zl.push(i),i=s;do{switch(i.tag){case 3:i.flags|=65536,t&=-t,i.lanes|=t,Ua(i,fs(0,c,t));break e;case 1:l=c;var b=i.type,v=i.stateNode;if(!(128&i.flags||"function"!=typeof b.getDerivedStateFromError&&(null===v||"function"!=typeof v.componentDidCatch||null!==Vl&&Vl.has(v)))){i.flags|=65536,t&=-t,i.lanes|=t,Ua(i,gs(i,l,t));break e}}i=i.return}while(null!==i)}wc(n)}catch(w){t=w,Rl===n&&null!==n&&(Rl=n=n.return);continue}break}}function gc(){var e=El.current;return El.current=Xi,null===e?Xi:e}function mc(){0!==Ol&&3!==Ol&&2!==Ol||(Ol=4),null===jl||!(268435455&Il)&&!(268435455&Ml)||sc(jl,Pl)}function hc(e,t){var n=Tl;Tl|=2;var r=gc();for(jl===e&&Pl===t||(ql=null,pc(e,t));;)try{yc();break}catch(o){fc(e,o)}if(Aa(),Tl=n,El.current=r,null!==Rl)throw Error(a(261));return jl=null,Pl=0,Ol}function yc(){for(;null!==Rl;)vc(Rl)}function bc(){for(;null!==Rl&&!Qe();)vc(Rl)}function vc(e){var t=Sl(e.alternate,e,Ll);e.memoizedProps=e.pendingProps,null===t?wc(e):Rl=t,Cl.current=null}function wc(e){var t=e;do{var n=t.alternate;if(e=t.return,32768&t.flags){if(null!==(n=Ks(n,t)))return n.flags&=32767,void(Rl=n);if(null===e)return Ol=6,void(Rl=null);e.flags|=32768,e.subtreeFlags=0,e.deletions=null}else if(null!==(n=Ws(n,t,Ll)))return void(Rl=n);if(null!==(t=t.sibling))return void(Rl=t);Rl=t=e}while(null!==t);0===Ol&&(Ol=5)}function kc(e,t,n){var r=vt,o=Al.transition;try{Al.transition=null,vt=1,function(e,t,n,r){do{xc()}while(null!==Kl);if(6&Tl)throw Error(a(327));n=e.finishedWork;var o=e.finishedLanes;if(null===n)return null;if(e.finishedWork=null,e.finishedLanes=0,n===e.current)throw Error(a(177));e.callbackNode=null,e.callbackPriority=0;var i=n.lanes|n.childLanes;if(function(e,t){var n=e.pendingLanes&~t;e.pendingLanes=t,e.suspendedLanes=0,e.pingedLanes=0,e.expiredLanes&=t,e.mutableReadLanes&=t,e.entangledLanes&=t,t=e.entanglements;var r=e.eventTimes;for(e=e.expirationTimes;0<n;){var o=31-it(n),a=1<<o;t[o]=0,r[o]=-1,e[o]=-1,n&=~a}}(e,i),e===jl&&(Rl=jl=null,Pl=0),!(2064&n.subtreeFlags)&&!(2064&n.flags)||Wl||(Wl=!0,jc(tt,(function(){return xc(),null}))),i=!!(15990&n.flags),!!(15990&n.subtreeFlags)||i){i=Al.transition,Al.transition=null;var s=vt;vt=1;var l=Tl;Tl|=4,Cl.current=null,function(e,t){if(eo=Gt,fr(e=pr())){if("selectionStart"in e)var n={start:e.selectionStart,end:e.selectionEnd};else e:{var r=(n=(n=e.ownerDocument)&&n.defaultView||window).getSelection&&n.getSelection();if(r&&0!==r.rangeCount){n=r.anchorNode;var o=r.anchorOffset,i=r.focusNode;r=r.focusOffset;try{n.nodeType,i.nodeType}catch(k){n=null;break e}var s=0,l=-1,c=-1,u=0,d=0,p=e,f=null;t:for(;;){for(var g;p!==n||0!==o&&3!==p.nodeType||(l=s+o),p!==i||0!==r&&3!==p.nodeType||(c=s+r),3===p.nodeType&&(s+=p.nodeValue.length),null!==(g=p.firstChild);)f=p,p=g;for(;;){if(p===e)break t;if(f===n&&++u===o&&(l=s),f===i&&++d===r&&(c=s),null!==(g=p.nextSibling))break;f=(p=f).parentNode}p=g}n=-1===l||-1===c?null:{start:l,end:c}}else n=null}n=n||{start:0,end:0}}else n=null;for(to={focusedElem:e,selectionRange:n},Gt=!1,Xs=t;null!==Xs;)if(e=(t=Xs).child,1028&t.subtreeFlags&&null!==e)e.return=t,Xs=e;else for(;null!==Xs;){t=Xs;try{var m=t.alternate;if(1024&t.flags)switch(t.tag){case 0:case 11:case 15:case 5:case 6:case 4:case 17:break;case 1:if(null!==m){var h=m.memoizedProps,y=m.memoizedState,b=t.stateNode,v=b.getSnapshotBeforeUpdate(t.elementType===t.type?h:ns(t.type,h),y);b.__reactInternalSnapshotBeforeUpdate=v}break;case 3:var w=t.stateNode.containerInfo;1===w.nodeType?w.textContent="":9===w.nodeType&&w.documentElement&&w.removeChild(w.documentElement);break;default:throw Error(a(163))}}catch(k){_c(t,t.return,k)}if(null!==(e=t.sibling)){e.return=t.return,Xs=e;break}Xs=t.return}m=tl,tl=!1}(e,n),hl(n,e),gr(to),Gt=!!eo,to=eo=null,e.current=n,bl(n,e,o),Ye(),Tl=l,vt=s,Al.transition=i}else e.current=n;if(Wl&&(Wl=!1,Kl=e,Ql=o),i=e.pendingLanes,0===i&&(Vl=null),function(e){if(at&&"function"==typeof at.onCommitFiberRoot)try{at.onCommitFiberRoot(ot,e,void 0,!(128&~e.current.flags))}catch(t){}}(n.stateNode),rc(e,Ze()),null!==t)for(r=e.onRecoverableError,n=0;n<t.length;n++)o=t[n],r(o.value,{componentStack:o.stack,digest:o.digest});if(Gl)throw Gl=!1,e=Hl,Hl=null,e;!!(1&Ql)&&0!==e.tag&&xc(),i=e.pendingLanes,1&i?e===Zl?Yl++:(Yl=0,Zl=e):Yl=0,qo()}(e,t,n,r)}finally{Al.transition=o,vt=r}return null}function xc(){if(null!==Kl){var e=wt(Ql),t=Al.transition,n=vt;try{if(Al.transition=null,vt=16>e?16:e,null===Kl)var r=!1;else{if(e=Kl,Kl=null,Ql=0,6&Tl)throw Error(a(331));var o=Tl;for(Tl|=4,Xs=e.current;null!==Xs;){var i=Xs,s=i.child;if(16&Xs.flags){var l=i.deletions;if(null!==l){for(var c=0;c<l.length;c++){var u=l[c];for(Xs=u;null!==Xs;){var d=Xs;switch(d.tag){case 0:case 11:case 15:nl(8,d,i)}var p=d.child;if(null!==p)p.return=d,Xs=p;else for(;null!==Xs;){var f=(d=Xs).sibling,g=d.return;if(al(d),d===u){Xs=null;break}if(null!==f){f.return=g,Xs=f;break}Xs=g}}}var m=i.alternate;if(null!==m){var h=m.child;if(null!==h){m.child=null;do{var y=h.sibling;h.sibling=null,h=y}while(null!==h)}}Xs=i}}if(2064&i.subtreeFlags&&null!==s)s.return=i,Xs=s;else e:for(;null!==Xs;){if(2048&(i=Xs).flags)switch(i.tag){case 0:case 11:case 15:nl(9,i,i.return)}var b=i.sibling;if(null!==b){b.return=i.return,Xs=b;break e}Xs=i.return}}var v=e.current;for(Xs=v;null!==Xs;){var w=(s=Xs).child;if(2064&s.subtreeFlags&&null!==w)w.return=s,Xs=w;else e:for(s=v;null!==Xs;){if(2048&(l=Xs).flags)try{switch(l.tag){case 0:case 11:case 15:rl(9,l)}}catch(x){_c(l,l.return,x)}if(l===s){Xs=null;break e}var k=l.sibling;if(null!==k){k.return=l.return,Xs=k;break e}Xs=l.return}}if(Tl=o,qo(),at&&"function"==typeof at.onPostCommitFiberRoot)try{at.onPostCommitFiberRoot(ot,e)}catch(x){}r=!0}return r}finally{vt=n,Al.transition=t}}return!1}function Sc(e,t,n){e=Ba(e,t=fs(0,t=cs(n,t),1),1),t=ec(),null!==e&&(yt(e,1,t),rc(e,t))}function _c(e,t,n){if(3===e.tag)Sc(e,e,n);else for(;null!==t;){if(3===t.tag){Sc(t,e,n);break}if(1===t.tag){var r=t.stateNode;if("function"==typeof t.type.getDerivedStateFromError||"function"==typeof r.componentDidCatch&&(null===Vl||!Vl.has(r))){t=Ba(t,e=gs(t,e=cs(n,e),1),1),e=ec(),null!==t&&(yt(t,1,e),rc(t,e));break}}t=t.return}}function Ec(e,t,n){var r=e.pingCache;null!==r&&r.delete(t),t=ec(),e.pingedLanes|=e.suspendedLanes&n,jl===e&&(Pl&n)===n&&(4===Ol||3===Ol&&(130023424&Pl)===Pl&&500>Ze()-$l?pc(e,0):Fl|=n),rc(e,t)}function Cc(e,t){0===t&&(1&e.mode?(t=ut,!(130023424&(ut<<=1))&&(ut=4194304)):t=1);var n=ec();null!==(e=Da(e,t))&&(yt(e,t,n),rc(e,n))}function Ac(e){var t=e.memoizedState,n=0;null!==t&&(n=t.retryLane),Cc(e,n)}function Tc(e,t){var n=0;switch(e.tag){case 13:var r=e.stateNode,o=e.memoizedState;null!==o&&(n=o.retryLane);break;case 19:r=e.stateNode;break;default:throw Error(a(314))}null!==r&&r.delete(t),Cc(e,n)}function jc(e,t){return We(e,t)}function Rc(e,t,n,r){this.tag=e,this.key=n,this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null,this.index=0,this.ref=null,this.pendingProps=t,this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null,this.mode=r,this.subtreeFlags=this.flags=0,this.deletions=null,this.childLanes=this.lanes=0,this.alternate=null}function Pc(e,t,n,r){return new Rc(e,t,n,r)}function Lc(e){return!(!(e=e.prototype)||!e.isReactComponent)}function Nc(e,t){var n=e.alternate;return null===n?((n=Pc(e.tag,t,e.key,e.mode)).elementType=e.elementType,n.type=e.type,n.stateNode=e.stateNode,n.alternate=e,e.alternate=n):(n.pendingProps=t,n.type=e.type,n.flags=0,n.subtreeFlags=0,n.deletions=null),n.flags=14680064&e.flags,n.childLanes=e.childLanes,n.lanes=e.lanes,n.child=e.child,n.memoizedProps=e.memoizedProps,n.memoizedState=e.memoizedState,n.updateQueue=e.updateQueue,t=e.dependencies,n.dependencies=null===t?null:{lanes:t.lanes,firstContext:t.firstContext},n.sibling=e.sibling,n.index=e.index,n.ref=e.ref,n}function Oc(e,t,n,r,o,i){var s=2;if(r=e,"function"==typeof e)Lc(e)&&(s=1);else if("string"==typeof e)s=5;else e:switch(e){case S:return Dc(n.children,o,i,t);case _:s=8,o|=8;break;case E:return(e=Pc(12,n,t,2|o)).elementType=E,e.lanes=i,e;case j:return(e=Pc(13,n,t,o)).elementType=j,e.lanes=i,e;case R:return(e=Pc(19,n,t,o)).elementType=R,e.lanes=i,e;case N:return Ic(n,o,i,t);default:if("object"==typeof e&&null!==e)switch(e.$$typeof){case C:s=10;break e;case A:s=9;break e;case T:s=11;break e;case P:s=14;break e;case L:s=16,r=null;break e}throw Error(a(130,null==e?e:typeof e,""))}return(t=Pc(s,n,t,o)).elementType=e,t.type=r,t.lanes=i,t}function Dc(e,t,n,r){return(e=Pc(7,e,r,t)).lanes=n,e}function Ic(e,t,n,r){return(e=Pc(22,e,r,t)).elementType=N,e.lanes=n,e.stateNode={isHidden:!1},e}function Mc(e,t,n){return(e=Pc(6,e,null,t)).lanes=n,e}function Fc(e,t,n){return(t=Pc(4,null!==e.children?e.children:[],e.key,t)).lanes=n,t.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},t}function zc(e,t,n,r,o){this.tag=t,this.containerInfo=e,this.finishedWork=this.pingCache=this.current=this.pendingChildren=null,this.timeoutHandle=-1,this.callbackNode=this.pendingContext=this.context=null,this.callbackPriority=0,this.eventTimes=ht(0),this.expirationTimes=ht(-1),this.entangledLanes=this.finishedLanes=this.mutableReadLanes=this.expiredLanes=this.pingedLanes=this.suspendedLanes=this.pendingLanes=0,this.entanglements=ht(0),this.identifierPrefix=r,this.onRecoverableError=o,this.mutableSourceEagerHydrationData=null}function Bc(e,t,n,r,o,a,i,s,l){return e=new zc(e,t,n,s,l),1===t?(t=1,!0===a&&(t|=8)):t=0,a=Pc(3,null,null,t),e.current=a,a.stateNode=e,a.memoizedState={element:r,isDehydrated:n,cache:null,transitions:null,pendingSuspenseBoundaries:null},Ma(a),e}function $c(e){if(!e)return To;e:{if(Ue(e=e._reactInternals)!==e||1!==e.tag)throw Error(a(170));var t=e;do{switch(t.tag){case 3:t=t.stateNode.context;break e;case 1:if(No(t.type)){t=t.stateNode.__reactInternalMemoizedMergedChildContext;break e}}t=t.return}while(null!==t);throw Error(a(171))}if(1===e.tag){var n=e.type;if(No(n))return Io(e,n,t)}return t}function Uc(e,t,n,r,o,a,i,s,l){return(e=Bc(n,r,!0,e,0,a,0,s,l)).context=$c(null),n=e.current,(a=za(r=ec(),o=tc(n))).callback=null!=t?t:null,Ba(n,a,o),e.current.lanes=o,yt(e,o,r),rc(e,r),e}function qc(e,t,n,r){var o=t.current,a=ec(),i=tc(o);return n=$c(n),null===t.context?t.context=n:t.pendingContext=n,(t=za(a,i)).payload={element:e},null!==(r=void 0===r?null:r)&&(t.callback=r),null!==(e=Ba(o,t,i))&&(nc(e,o,i,a),$a(e,o,i)),i}function Gc(e){return(e=e.current).child?(e.child.tag,e.child.stateNode):null}function Hc(e,t){if(null!==(e=e.memoizedState)&&null!==e.dehydrated){var n=e.retryLane;e.retryLane=0!==n&&n<t?n:t}}function Vc(e,t){Hc(e,t),(e=e.alternate)&&Hc(e,t)}Sl=function(e,t,n){if(null!==e)if(e.memoizedProps!==t.pendingProps||Ro.current)vs=!0;else{if(!(e.lanes&n||128&t.flags))return vs=!1,function(e,t,n){switch(t.tag){case 3:js(t),ga();break;case 5:Xa(t);break;case 1:No(t.type)&&Mo(t);break;case 4:Ya(t,t.stateNode.containerInfo);break;case 10:var r=t.type._context,o=t.memoizedProps.value;Ao(Sa,r._currentValue),r._currentValue=o;break;case 13:if(null!==(r=t.memoizedState))return null!==r.dehydrated?(Ao(ei,1&ei.current),t.flags|=128,null):n&t.child.childLanes?Ms(e,t,n):(Ao(ei,1&ei.current),null!==(e=Gs(e,t,n))?e.sibling:null);Ao(ei,1&ei.current);break;case 19:if(r=!!(n&t.childLanes),128&e.flags){if(r)return Us(e,t,n);t.flags|=128}if(null!==(o=t.memoizedState)&&(o.rendering=null,o.tail=null,o.lastEffect=null),Ao(ei,ei.current),r)break;return null;case 22:case 23:return t.lanes=0,_s(e,t,n)}return Gs(e,t,n)}(e,t,n);vs=!!(131072&e.flags)}else vs=!1,aa&&1048576&t.flags&&ea(t,Wo,t.index);switch(t.lanes=0,t.tag){case 2:var r=t.type;qs(e,t),e=t.pendingProps;var o=Lo(t,jo.current);Ra(t,n),o=hi(null,t,r,e,o,n);var i=yi();return t.flags|=1,"object"==typeof o&&null!==o&&"function"==typeof o.render&&void 0===o.$$typeof?(t.tag=1,t.memoizedState=null,t.updateQueue=null,No(r)?(i=!0,Mo(t)):i=!1,t.memoizedState=null!==o.state&&void 0!==o.state?o.state:null,Ma(t),o.updater=os,t.stateNode=o,o._reactInternals=t,ls(t,r,e,n),t=Ts(null,t,r,!0,i,n)):(t.tag=0,aa&&i&&ta(t),ws(null,t,o,n),t=t.child),t;case 16:r=t.elementType;e:{switch(qs(e,t),e=t.pendingProps,r=(o=r._init)(r._payload),t.type=r,o=t.tag=function(e){if("function"==typeof e)return Lc(e)?1:0;if(null!=e){if((e=e.$$typeof)===T)return 11;if(e===P)return 14}return 2}(r),e=ns(r,e),o){case 0:t=Cs(null,t,r,e,n);break e;case 1:t=As(null,t,r,e,n);break e;case 11:t=ks(null,t,r,e,n);break e;case 14:t=xs(null,t,r,ns(r.type,e),n);break e}throw Error(a(306,r,""))}return t;case 0:return r=t.type,o=t.pendingProps,Cs(e,t,r,o=t.elementType===r?o:ns(r,o),n);case 1:return r=t.type,o=t.pendingProps,As(e,t,r,o=t.elementType===r?o:ns(r,o),n);case 3:e:{if(js(t),null===e)throw Error(a(387));r=t.pendingProps,o=(i=t.memoizedState).element,Fa(e,t),qa(t,r,null,n);var s=t.memoizedState;if(r=s.element,i.isDehydrated){if(i={element:r,isDehydrated:!1,cache:s.cache,pendingSuspenseBoundaries:s.pendingSuspenseBoundaries,transitions:s.transitions},t.updateQueue.baseState=i,t.memoizedState=i,256&t.flags){t=Rs(e,t,r,n,o=cs(Error(a(423)),t));break e}if(r!==o){t=Rs(e,t,r,n,o=cs(Error(a(424)),t));break e}for(oa=co(t.stateNode.containerInfo.firstChild),ra=t,aa=!0,ia=null,n=xa(t,null,r,n),t.child=n;n;)n.flags=-3&n.flags|4096,n=n.sibling}else{if(ga(),r===o){t=Gs(e,t,n);break e}ws(e,t,r,n)}t=t.child}return t;case 5:return Xa(t),null===e&&ua(t),r=t.type,o=t.pendingProps,i=null!==e?e.memoizedProps:null,s=o.children,no(r,o)?s=null:null!==i&&no(r,i)&&(t.flags|=32),Es(e,t),ws(e,t,s,n),t.child;case 6:return null===e&&ua(t),null;case 13:return Ms(e,t,n);case 4:return Ya(t,t.stateNode.containerInfo),r=t.pendingProps,null===e?t.child=ka(t,null,r,n):ws(e,t,r,n),t.child;case 11:return r=t.type,o=t.pendingProps,ks(e,t,r,o=t.elementType===r?o:ns(r,o),n);case 7:return ws(e,t,t.pendingProps,n),t.child;case 8:case 12:return ws(e,t,t.pendingProps.children,n),t.child;case 10:e:{if(r=t.type._context,o=t.pendingProps,i=t.memoizedProps,s=o.value,Ao(Sa,r._currentValue),r._currentValue=s,null!==i)if(sr(i.value,s)){if(i.children===o.children&&!Ro.current){t=Gs(e,t,n);break e}}else for(null!==(i=t.child)&&(i.return=t);null!==i;){var l=i.dependencies;if(null!==l){s=i.child;for(var c=l.firstContext;null!==c;){if(c.context===r){if(1===i.tag){(c=za(-1,n&-n)).tag=2;var u=i.updateQueue;if(null!==u){var d=(u=u.shared).pending;null===d?c.next=c:(c.next=d.next,d.next=c),u.pending=c}}i.lanes|=n,null!==(c=i.alternate)&&(c.lanes|=n),ja(i.return,n,t),l.lanes|=n;break}c=c.next}}else if(10===i.tag)s=i.type===t.type?null:i.child;else if(18===i.tag){if(null===(s=i.return))throw Error(a(341));s.lanes|=n,null!==(l=s.alternate)&&(l.lanes|=n),ja(s,n,t),s=i.sibling}else s=i.child;if(null!==s)s.return=i;else for(s=i;null!==s;){if(s===t){s=null;break}if(null!==(i=s.sibling)){i.return=s.return,s=i;break}s=s.return}i=s}ws(e,t,o.children,n),t=t.child}return t;case 9:return o=t.type,r=t.pendingProps.children,Ra(t,n),r=r(o=Pa(o)),t.flags|=1,ws(e,t,r,n),t.child;case 14:return o=ns(r=t.type,t.pendingProps),xs(e,t,r,o=ns(r.type,o),n);case 15:return Ss(e,t,t.type,t.pendingProps,n);case 17:return r=t.type,o=t.pendingProps,o=t.elementType===r?o:ns(r,o),qs(e,t),t.tag=1,No(r)?(e=!0,Mo(t)):e=!1,Ra(t,n),is(t,r,o),ls(t,r,o,n),Ts(null,t,r,!0,e,n);case 19:return Us(e,t,n);case 22:return _s(e,t,n)}throw Error(a(156,t.tag))};var Wc="function"==typeof reportError?reportError:function(e){console.error(e)};function Kc(e){this._internalRoot=e}function Qc(e){this._internalRoot=e}function Yc(e){return!(!e||1!==e.nodeType&&9!==e.nodeType&&11!==e.nodeType)}function Zc(e){return!(!e||1!==e.nodeType&&9!==e.nodeType&&11!==e.nodeType&&(8!==e.nodeType||" react-mount-point-unstable "!==e.nodeValue))}function Xc(){}function Jc(e,t,n,r,o){var a=n._reactRootContainer;if(a){var i=a;if("function"==typeof o){var s=o;o=function(){var e=Gc(i);s.call(e)}}qc(t,i,e,o)}else i=function(e,t,n,r,o){if(o){if("function"==typeof r){var a=r;r=function(){var e=Gc(i);a.call(e)}}var i=Uc(t,r,e,0,null,!1,0,"",Xc);return e._reactRootContainer=i,e[mo]=i.current,Ur(8===e.nodeType?e.parentNode:e),uc(),i}for(;o=e.lastChild;)e.removeChild(o);if("function"==typeof r){var s=r;r=function(){var e=Gc(l);s.call(e)}}var l=Bc(e,0,!1,null,0,!1,0,"",Xc);return e._reactRootContainer=l,e[mo]=l.current,Ur(8===e.nodeType?e.parentNode:e),uc((function(){qc(t,l,n,r)})),l}(n,t,e,o,r);return Gc(i)}Qc.prototype.render=Kc.prototype.render=function(e){var t=this._internalRoot;if(null===t)throw Error(a(409));qc(e,t,null,null)},Qc.prototype.unmount=Kc.prototype.unmount=function(){var e=this._internalRoot;if(null!==e){this._internalRoot=null;var t=e.containerInfo;uc((function(){qc(null,e,null,null)})),t[mo]=null}},Qc.prototype.unstable_scheduleHydration=function(e){if(e){var t=_t();e={blockedOn:null,target:e,priority:t};for(var n=0;n<Nt.length&&0!==t&&t<Nt[n].priority;n++);Nt.splice(n,0,e),0===n&&Mt(e)}},kt=function(e){switch(e.tag){case 3:var t=e.stateNode;if(t.current.memoizedState.isDehydrated){var n=dt(t.pendingLanes);0!==n&&(bt(t,1|n),rc(t,Ze()),!(6&Tl)&&(Ul=Ze()+500,qo()))}break;case 13:uc((function(){var t=Da(e,1);if(null!==t){var n=ec();nc(t,e,1,n)}})),Vc(e,1)}},xt=function(e){if(13===e.tag){var t=Da(e,134217728);if(null!==t)nc(t,e,134217728,ec());Vc(e,134217728)}},St=function(e){if(13===e.tag){var t=tc(e),n=Da(e,t);if(null!==n)nc(n,e,t,ec());Vc(e,t)}},_t=function(){return vt},Et=function(e,t){var n=vt;try{return vt=e,t()}finally{vt=n}},xe=function(e,t,n){switch(t){case"input":if(X(e,n),t=n.name,"radio"===n.type&&null!=t){for(n=e;n.parentNode;)n=n.parentNode;for(n=n.querySelectorAll("input[name="+JSON.stringify(""+t)+'][type="radio"]'),t=0;t<n.length;t++){var r=n[t];if(r!==e&&r.form===e.form){var o=xo(r);if(!o)throw Error(a(90));W(r),X(r,o)}}}break;case"textarea":ae(e,n);break;case"select":null!=(t=n.value)&&ne(e,!!n.multiple,t,!1)}},Te=cc,je=uc;var eu={usingClientEntryPoint:!1,Events:[wo,ko,xo,Ce,Ae,cc]},tu={findFiberByHostInstance:vo,bundleType:0,version:"18.3.1",rendererPackageName:"react-dom"},nu={bundleType:tu.bundleType,version:tu.version,rendererPackageName:tu.rendererPackageName,rendererConfig:tu.rendererConfig,overrideHookState:null,overrideHookStateDeletePath:null,overrideHookStateRenamePath:null,overrideProps:null,overridePropsDeletePath:null,overridePropsRenamePath:null,setErrorHandler:null,setSuspenseHandler:null,scheduleUpdate:null,currentDispatcherRef:w.ReactCurrentDispatcher,findHostInstanceByFiber:function(e){return null===(e=He(e))?null:e.stateNode},findFiberByHostInstance:tu.findFiberByHostInstance||function(){return null},findHostInstancesForRefresh:null,scheduleRefresh:null,scheduleRoot:null,setRefreshHandler:null,getCurrentFiber:null,reconcilerVersion:"18.3.1-next-f1338f8080-20240426"};if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__){var ru=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!ru.isDisabled&&ru.supportsFiber)try{ot=ru.inject(nu),at=ru}catch(ue){}}t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=eu,t.createPortal=function(e,t){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;if(!Yc(t))throw Error(a(200));return function(e,t,n){var r=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null;return{$$typeof:x,key:null==r?null:""+r,children:e,containerInfo:t,implementation:n}}(e,t,null,n)},t.createRoot=function(e,t){if(!Yc(e))throw Error(a(299));var n=!1,r="",o=Wc;return null!=t&&(!0===t.unstable_strictMode&&(n=!0),void 0!==t.identifierPrefix&&(r=t.identifierPrefix),void 0!==t.onRecoverableError&&(o=t.onRecoverableError)),t=Bc(e,1,!1,null,0,n,0,r,o),e[mo]=t.current,Ur(8===e.nodeType?e.parentNode:e),new Kc(t)},t.findDOMNode=function(e){if(null==e)return null;if(1===e.nodeType)return e;var t=e._reactInternals;if(void 0===t){if("function"==typeof e.render)throw Error(a(188));throw e=Object.keys(e).join(","),Error(a(268,e))}return e=null===(e=He(t))?null:e.stateNode},t.flushSync=function(e){return uc(e)},t.hydrate=function(e,t,n){if(!Zc(t))throw Error(a(200));return Jc(null,e,t,!0,n)},t.hydrateRoot=function(e,t,n){if(!Yc(e))throw Error(a(405));var r=null!=n&&n.hydratedSources||null,o=!1,i="",s=Wc;if(null!=n&&(!0===n.unstable_strictMode&&(o=!0),void 0!==n.identifierPrefix&&(i=n.identifierPrefix),void 0!==n.onRecoverableError&&(s=n.onRecoverableError)),t=Uc(t,null,e,1,null!=n?n:null,o,0,i,s),e[mo]=t.current,Ur(e),r)for(e=0;e<r.length;e++)o=(o=(n=r[e])._getVersion)(n._source),null==t.mutableSourceEagerHydrationData?t.mutableSourceEagerHydrationData=[n,o]:t.mutableSourceEagerHydrationData.push(n,o);return new Qc(t)},t.render=function(e,t,n){if(!Zc(t))throw Error(a(200));return Jc(null,e,t,!1,n)},t.unmountComponentAtNode=function(e){if(!Zc(e))throw Error(a(40));return!!e._reactRootContainer&&(uc((function(){Jc(null,null,e,!1,(function(){e._reactRootContainer=null,e[mo]=null}))})),!0)},t.unstable_batchedUpdates=cc,t.unstable_renderSubtreeIntoContainer=function(e,t,n,r){if(!Zc(n))throw Error(a(200));if(null==e||void 0===e._reactInternals)throw Error(a(38));return Jc(e,t,n,!1,r)},t.version="18.3.1-next-f1338f8080-20240426"},5338:(e,t,n)=>{"use strict";var r=n(961);t.createRoot=r.createRoot,t.hydrateRoot=r.hydrateRoot},961:(e,t,n)=>{"use strict";!function e(){if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE)try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(e)}catch(t){console.error(t)}}(),e.exports=n(2551)},115:e=>{var t="undefined"!=typeof Element,n="function"==typeof Map,r="function"==typeof Set,o="function"==typeof ArrayBuffer&&!!ArrayBuffer.isView;function a(e,i){if(e===i)return!0;if(e&&i&&"object"==typeof e&&"object"==typeof i){if(e.constructor!==i.constructor)return!1;var s,l,c,u;if(Array.isArray(e)){if((s=e.length)!=i.length)return!1;for(l=s;0!=l--;)if(!a(e[l],i[l]))return!1;return!0}if(n&&e instanceof Map&&i instanceof Map){if(e.size!==i.size)return!1;for(u=e.entries();!(l=u.next()).done;)if(!i.has(l.value[0]))return!1;for(u=e.entries();!(l=u.next()).done;)if(!a(l.value[1],i.get(l.value[0])))return!1;return!0}if(r&&e instanceof Set&&i instanceof Set){if(e.size!==i.size)return!1;for(u=e.entries();!(l=u.next()).done;)if(!i.has(l.value[0]))return!1;return!0}if(o&&ArrayBuffer.isView(e)&&ArrayBuffer.isView(i)){if((s=e.length)!=i.length)return!1;for(l=s;0!=l--;)if(e[l]!==i[l])return!1;return!0}if(e.constructor===RegExp)return e.source===i.source&&e.flags===i.flags;if(e.valueOf!==Object.prototype.valueOf&&"function"==typeof e.valueOf&&"function"==typeof i.valueOf)return e.valueOf()===i.valueOf();if(e.toString!==Object.prototype.toString&&"function"==typeof e.toString&&"function"==typeof i.toString)return e.toString()===i.toString();if((s=(c=Object.keys(e)).length)!==Object.keys(i).length)return!1;for(l=s;0!=l--;)if(!Object.prototype.hasOwnProperty.call(i,c[l]))return!1;if(t&&e instanceof Element)return!1;for(l=s;0!=l--;)if(("_owner"!==c[l]&&"__v"!==c[l]&&"__o"!==c[l]||!e.$$typeof)&&!a(e[c[l]],i[c[l]]))return!1;return!0}return e!=e&&i!=i}e.exports=function(e,t){try{return a(e,t)}catch(n){if((n.message||"").match(/stack|recursion/i))return console.warn("react-fast-compare cannot handle circular refs"),!1;throw n}}},545:(e,t,n)=>{"use strict";n.d(t,{mg:()=>J,vd:()=>H});var r=n(6540),o=n(5556),a=n.n(o),i=n(115),s=n.n(i),l=n(311),c=n.n(l),u=n(2833),d=n.n(u);function p(){return p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},p.apply(this,arguments)}function f(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,g(e,t)}function g(e,t){return g=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},g(e,t)}function m(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t.indexOf(n=a[r])>=0||(o[n]=e[n]);return o}var h={BASE:"base",BODY:"body",HEAD:"head",HTML:"html",LINK:"link",META:"meta",NOSCRIPT:"noscript",SCRIPT:"script",STYLE:"style",TITLE:"title",FRAGMENT:"Symbol(react.fragment)"},y={rel:["amphtml","canonical","alternate"]},b={type:["application/ld+json"]},v={charset:"",name:["robots","description"],property:["og:type","og:title","og:url","og:image","og:image:alt","og:description","twitter:url","twitter:title","twitter:description","twitter:image","twitter:image:alt","twitter:card","twitter:site"]},w=Object.keys(h).map((function(e){return h[e]})),k={accesskey:"accessKey",charset:"charSet",class:"className",contenteditable:"contentEditable",contextmenu:"contextMenu","http-equiv":"httpEquiv",itemprop:"itemProp",tabindex:"tabIndex"},x=Object.keys(k).reduce((function(e,t){return e[k[t]]=t,e}),{}),S=function(e,t){for(var n=e.length-1;n>=0;n-=1){var r=e[n];if(Object.prototype.hasOwnProperty.call(r,t))return r[t]}return null},_=function(e){var t=S(e,h.TITLE),n=S(e,"titleTemplate");if(Array.isArray(t)&&(t=t.join("")),n&&t)return n.replace(/%s/g,(function(){return t}));var r=S(e,"defaultTitle");return t||r||void 0},E=function(e){return S(e,"onChangeClientState")||function(){}},C=function(e,t){return t.filter((function(t){return void 0!==t[e]})).map((function(t){return t[e]})).reduce((function(e,t){return p({},e,t)}),{})},A=function(e,t){return t.filter((function(e){return void 0!==e[h.BASE]})).map((function(e){return e[h.BASE]})).reverse().reduce((function(t,n){if(!t.length)for(var r=Object.keys(n),o=0;o<r.length;o+=1){var a=r[o].toLowerCase();if(-1!==e.indexOf(a)&&n[a])return t.concat(n)}return t}),[])},T=function(e,t,n){var r={};return n.filter((function(t){return!!Array.isArray(t[e])||(void 0!==t[e]&&console&&"function"==typeof console.warn&&console.warn("Helmet: "+e+' should be of type "Array". Instead found type "'+typeof t[e]+'"'),!1)})).map((function(t){return t[e]})).reverse().reduce((function(e,n){var o={};n.filter((function(e){for(var n,a=Object.keys(e),i=0;i<a.length;i+=1){var s=a[i],l=s.toLowerCase();-1===t.indexOf(l)||"rel"===n&&"canonical"===e[n].toLowerCase()||"rel"===l&&"stylesheet"===e[l].toLowerCase()||(n=l),-1===t.indexOf(s)||"innerHTML"!==s&&"cssText"!==s&&"itemprop"!==s||(n=s)}if(!n||!e[n])return!1;var c=e[n].toLowerCase();return r[n]||(r[n]={}),o[n]||(o[n]={}),!r[n][c]&&(o[n][c]=!0,!0)})).reverse().forEach((function(t){return e.push(t)}));for(var a=Object.keys(o),i=0;i<a.length;i+=1){var s=a[i],l=p({},r[s],o[s]);r[s]=l}return e}),[]).reverse()},j=function(e,t){if(Array.isArray(e)&&e.length)for(var n=0;n<e.length;n+=1)if(e[n][t])return!0;return!1},R=function(e){return Array.isArray(e)?e.join(""):e},P=function(e,t){return Array.isArray(e)?e.reduce((function(e,n){return function(e,t){for(var n=Object.keys(e),r=0;r<n.length;r+=1)if(t[n[r]]&&t[n[r]].includes(e[n[r]]))return!0;return!1}(n,t)?e.priority.push(n):e.default.push(n),e}),{priority:[],default:[]}):{default:e}},L=function(e,t){var n;return p({},e,((n={})[t]=void 0,n))},N=[h.NOSCRIPT,h.SCRIPT,h.STYLE],O=function(e,t){return void 0===t&&(t=!0),!1===t?String(e):String(e).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")},D=function(e){return Object.keys(e).reduce((function(t,n){var r=void 0!==e[n]?n+'="'+e[n]+'"':""+n;return t?t+" "+r:r}),"")},I=function(e,t){return void 0===t&&(t={}),Object.keys(e).reduce((function(t,n){return t[k[n]||n]=e[n],t}),t)},M=function(e,t){return t.map((function(t,n){var o,a=((o={key:n})["data-rh"]=!0,o);return Object.keys(t).forEach((function(e){var n=k[e]||e;"innerHTML"===n||"cssText"===n?a.dangerouslySetInnerHTML={__html:t.innerHTML||t.cssText}:a[n]=t[e]})),r.createElement(e,a)}))},F=function(e,t,n){switch(e){case h.TITLE:return{toComponent:function(){return n=t.titleAttributes,(o={key:e=t.title})["data-rh"]=!0,a=I(n,o),[r.createElement(h.TITLE,a,e)];var e,n,o,a},toString:function(){return function(e,t,n,r){var o=D(n),a=R(t);return o?"<"+e+' data-rh="true" '+o+">"+O(a,r)+"</"+e+">":"<"+e+' data-rh="true">'+O(a,r)+"</"+e+">"}(e,t.title,t.titleAttributes,n)}};case"bodyAttributes":case"htmlAttributes":return{toComponent:function(){return I(t)},toString:function(){return D(t)}};default:return{toComponent:function(){return M(e,t)},toString:function(){return function(e,t,n){return t.reduce((function(t,r){var o=Object.keys(r).filter((function(e){return!("innerHTML"===e||"cssText"===e)})).reduce((function(e,t){var o=void 0===r[t]?t:t+'="'+O(r[t],n)+'"';return e?e+" "+o:o}),""),a=r.innerHTML||r.cssText||"",i=-1===N.indexOf(e);return t+"<"+e+' data-rh="true" '+o+(i?"/>":">"+a+"</"+e+">")}),"")}(e,t,n)}}}},z=function(e){var t=e.baseTag,n=e.bodyAttributes,r=e.encode,o=e.htmlAttributes,a=e.noscriptTags,i=e.styleTags,s=e.title,l=void 0===s?"":s,c=e.titleAttributes,u=e.linkTags,d=e.metaTags,p=e.scriptTags,f={toComponent:function(){},toString:function(){return""}};if(e.prioritizeSeoTags){var g=function(e){var t=e.linkTags,n=e.scriptTags,r=e.encode,o=P(e.metaTags,v),a=P(t,y),i=P(n,b);return{priorityMethods:{toComponent:function(){return[].concat(M(h.META,o.priority),M(h.LINK,a.priority),M(h.SCRIPT,i.priority))},toString:function(){return F(h.META,o.priority,r)+" "+F(h.LINK,a.priority,r)+" "+F(h.SCRIPT,i.priority,r)}},metaTags:o.default,linkTags:a.default,scriptTags:i.default}}(e);f=g.priorityMethods,u=g.linkTags,d=g.metaTags,p=g.scriptTags}return{priority:f,base:F(h.BASE,t,r),bodyAttributes:F("bodyAttributes",n,r),htmlAttributes:F("htmlAttributes",o,r),link:F(h.LINK,u,r),meta:F(h.META,d,r),noscript:F(h.NOSCRIPT,a,r),script:F(h.SCRIPT,p,r),style:F(h.STYLE,i,r),title:F(h.TITLE,{title:l,titleAttributes:c},r)}},B=[],$=function(e,t){var n=this;void 0===t&&(t="undefined"!=typeof document),this.instances=[],this.value={setHelmet:function(e){n.context.helmet=e},helmetInstances:{get:function(){return n.canUseDOM?B:n.instances},add:function(e){(n.canUseDOM?B:n.instances).push(e)},remove:function(e){var t=(n.canUseDOM?B:n.instances).indexOf(e);(n.canUseDOM?B:n.instances).splice(t,1)}}},this.context=e,this.canUseDOM=t,t||(e.helmet=z({baseTag:[],bodyAttributes:{},encodeSpecialCharacters:!0,htmlAttributes:{},linkTags:[],metaTags:[],noscriptTags:[],scriptTags:[],styleTags:[],title:"",titleAttributes:{}}))},U=r.createContext({}),q=a().shape({setHelmet:a().func,helmetInstances:a().shape({get:a().func,add:a().func,remove:a().func})}),G="undefined"!=typeof document,H=function(e){function t(n){var r;return(r=e.call(this,n)||this).helmetData=new $(r.props.context,t.canUseDOM),r}return f(t,e),t.prototype.render=function(){return r.createElement(U.Provider,{value:this.helmetData.value},this.props.children)},t}(r.Component);H.canUseDOM=G,H.propTypes={context:a().shape({helmet:a().shape()}),children:a().node.isRequired},H.defaultProps={context:{}},H.displayName="HelmetProvider";var V=function(e,t){var n,r=document.head||document.querySelector(h.HEAD),o=r.querySelectorAll(e+"[data-rh]"),a=[].slice.call(o),i=[];return t&&t.length&&t.forEach((function(t){var r=document.createElement(e);for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&("innerHTML"===o?r.innerHTML=t.innerHTML:"cssText"===o?r.styleSheet?r.styleSheet.cssText=t.cssText:r.appendChild(document.createTextNode(t.cssText)):r.setAttribute(o,void 0===t[o]?"":t[o]));r.setAttribute("data-rh","true"),a.some((function(e,t){return n=t,r.isEqualNode(e)}))?a.splice(n,1):i.push(r)})),a.forEach((function(e){return e.parentNode.removeChild(e)})),i.forEach((function(e){return r.appendChild(e)})),{oldTags:a,newTags:i}},W=function(e,t){var n=document.getElementsByTagName(e)[0];if(n){for(var r=n.getAttribute("data-rh"),o=r?r.split(","):[],a=[].concat(o),i=Object.keys(t),s=0;s<i.length;s+=1){var l=i[s],c=t[l]||"";n.getAttribute(l)!==c&&n.setAttribute(l,c),-1===o.indexOf(l)&&o.push(l);var u=a.indexOf(l);-1!==u&&a.splice(u,1)}for(var d=a.length-1;d>=0;d-=1)n.removeAttribute(a[d]);o.length===a.length?n.removeAttribute("data-rh"):n.getAttribute("data-rh")!==i.join(",")&&n.setAttribute("data-rh",i.join(","))}},K=function(e,t){var n=e.baseTag,r=e.htmlAttributes,o=e.linkTags,a=e.metaTags,i=e.noscriptTags,s=e.onChangeClientState,l=e.scriptTags,c=e.styleTags,u=e.title,d=e.titleAttributes;W(h.BODY,e.bodyAttributes),W(h.HTML,r),function(e,t){void 0!==e&&document.title!==e&&(document.title=R(e)),W(h.TITLE,t)}(u,d);var p={baseTag:V(h.BASE,n),linkTags:V(h.LINK,o),metaTags:V(h.META,a),noscriptTags:V(h.NOSCRIPT,i),scriptTags:V(h.SCRIPT,l),styleTags:V(h.STYLE,c)},f={},g={};Object.keys(p).forEach((function(e){var t=p[e],n=t.newTags,r=t.oldTags;n.length&&(f[e]=n),r.length&&(g[e]=p[e].oldTags)})),t&&t(),s(e,f,g)},Q=null,Y=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).rendered=!1,t}f(t,e);var n=t.prototype;return n.shouldComponentUpdate=function(e){return!d()(e,this.props)},n.componentDidUpdate=function(){this.emitChange()},n.componentWillUnmount=function(){this.props.context.helmetInstances.remove(this),this.emitChange()},n.emitChange=function(){var e,t,n=this.props.context,r=n.setHelmet,o=null,a=(e=n.helmetInstances.get().map((function(e){var t=p({},e.props);return delete t.context,t})),{baseTag:A(["href"],e),bodyAttributes:C("bodyAttributes",e),defer:S(e,"defer"),encode:S(e,"encodeSpecialCharacters"),htmlAttributes:C("htmlAttributes",e),linkTags:T(h.LINK,["rel","href"],e),metaTags:T(h.META,["name","charset","http-equiv","property","itemprop"],e),noscriptTags:T(h.NOSCRIPT,["innerHTML"],e),onChangeClientState:E(e),scriptTags:T(h.SCRIPT,["src","innerHTML"],e),styleTags:T(h.STYLE,["cssText"],e),title:_(e),titleAttributes:C("titleAttributes",e),prioritizeSeoTags:j(e,"prioritizeSeoTags")});H.canUseDOM?(t=a,Q&&cancelAnimationFrame(Q),t.defer?Q=requestAnimationFrame((function(){K(t,(function(){Q=null}))})):(K(t),Q=null)):z&&(o=z(a)),r(o)},n.init=function(){this.rendered||(this.rendered=!0,this.props.context.helmetInstances.add(this),this.emitChange())},n.render=function(){return this.init(),null},t}(r.Component);Y.propTypes={context:q.isRequired},Y.displayName="HelmetDispatcher";var Z=["children"],X=["children"],J=function(e){function t(){return e.apply(this,arguments)||this}f(t,e);var n=t.prototype;return n.shouldComponentUpdate=function(e){return!s()(L(this.props,"helmetData"),L(e,"helmetData"))},n.mapNestedChildrenToProps=function(e,t){if(!t)return null;switch(e.type){case h.SCRIPT:case h.NOSCRIPT:return{innerHTML:t};case h.STYLE:return{cssText:t};default:throw new Error("<"+e.type+" /> elements are self-closing and can not contain children. Refer to our API for more information.")}},n.flattenArrayTypeChildren=function(e){var t,n=e.child,r=e.arrayTypeChildren;return p({},r,((t={})[n.type]=[].concat(r[n.type]||[],[p({},e.newChildProps,this.mapNestedChildrenToProps(n,e.nestedChildren))]),t))},n.mapObjectTypeChildren=function(e){var t,n,r=e.child,o=e.newProps,a=e.newChildProps,i=e.nestedChildren;switch(r.type){case h.TITLE:return p({},o,((t={})[r.type]=i,t.titleAttributes=p({},a),t));case h.BODY:return p({},o,{bodyAttributes:p({},a)});case h.HTML:return p({},o,{htmlAttributes:p({},a)});default:return p({},o,((n={})[r.type]=p({},a),n))}},n.mapArrayTypeChildrenToProps=function(e,t){var n=p({},t);return Object.keys(e).forEach((function(t){var r;n=p({},n,((r={})[t]=e[t],r))})),n},n.warnOnInvalidChildren=function(e,t){return c()(w.some((function(t){return e.type===t})),"function"==typeof e.type?"You may be attempting to nest <Helmet> components within each other, which is not allowed. Refer to our API for more information.":"Only elements types "+w.join(", ")+" are allowed. Helmet does not support rendering <"+e.type+"> elements. Refer to our API for more information."),c()(!t||"string"==typeof t||Array.isArray(t)&&!t.some((function(e){return"string"!=typeof e})),"Helmet expects a string as a child of <"+e.type+">. Did you forget to wrap your children in braces? ( <"+e.type+">{``}</"+e.type+"> ) Refer to our API for more information."),!0},n.mapChildrenToProps=function(e,t){var n=this,o={};return r.Children.forEach(e,(function(e){if(e&&e.props){var r=e.props,a=r.children,i=m(r,Z),s=Object.keys(i).reduce((function(e,t){return e[x[t]||t]=i[t],e}),{}),l=e.type;switch("symbol"==typeof l?l=l.toString():n.warnOnInvalidChildren(e,a),l){case h.FRAGMENT:t=n.mapChildrenToProps(a,t);break;case h.LINK:case h.META:case h.NOSCRIPT:case h.SCRIPT:case h.STYLE:o=n.flattenArrayTypeChildren({child:e,arrayTypeChildren:o,newChildProps:s,nestedChildren:a});break;default:t=n.mapObjectTypeChildren({child:e,newProps:t,newChildProps:s,nestedChildren:a})}}})),this.mapArrayTypeChildrenToProps(o,t)},n.render=function(){var e=this.props,t=e.children,n=m(e,X),o=p({},n),a=n.helmetData;return t&&(o=this.mapChildrenToProps(t,o)),!a||a instanceof $||(a=new $(a.context,a.instances)),a?r.createElement(Y,p({},o,{context:a.value,helmetData:void 0})):r.createElement(U.Consumer,null,(function(e){return r.createElement(Y,p({},o,{context:e}))}))},t}(r.Component);J.propTypes={base:a().object,bodyAttributes:a().object,children:a().oneOfType([a().arrayOf(a().node),a().node]),defaultTitle:a().string,defer:a().bool,encodeSpecialCharacters:a().bool,htmlAttributes:a().object,link:a().arrayOf(a().object),meta:a().arrayOf(a().object),noscript:a().arrayOf(a().object),onChangeClientState:a().func,script:a().arrayOf(a().object),style:a().arrayOf(a().object),title:a().string,titleAttributes:a().object,titleTemplate:a().string,prioritizeSeoTags:a().bool,helmetData:a().object},J.defaultProps={defer:!0,encodeSpecialCharacters:!0,prioritizeSeoTags:!1},J.displayName="Helmet"},2799:(e,t)=>{"use strict";var n="function"==typeof Symbol&&Symbol.for,r=n?Symbol.for("react.element"):60103,o=n?Symbol.for("react.portal"):60106,a=n?Symbol.for("react.fragment"):60107,i=n?Symbol.for("react.strict_mode"):60108,s=n?Symbol.for("react.profiler"):60114,l=n?Symbol.for("react.provider"):60109,c=n?Symbol.for("react.context"):60110,u=n?Symbol.for("react.async_mode"):60111,d=n?Symbol.for("react.concurrent_mode"):60111,p=n?Symbol.for("react.forward_ref"):60112,f=n?Symbol.for("react.suspense"):60113,g=n?Symbol.for("react.suspense_list"):60120,m=n?Symbol.for("react.memo"):60115,h=n?Symbol.for("react.lazy"):60116,y=n?Symbol.for("react.block"):60121,b=n?Symbol.for("react.fundamental"):60117,v=n?Symbol.for("react.responder"):60118,w=n?Symbol.for("react.scope"):60119;function k(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case r:switch(e=e.type){case u:case d:case a:case s:case i:case f:return e;default:switch(e=e&&e.$$typeof){case c:case p:case h:case m:case l:return e;default:return t}}case o:return t}}}function x(e){return k(e)===d}t.AsyncMode=u,t.ConcurrentMode=d,t.ContextConsumer=c,t.ContextProvider=l,t.Element=r,t.ForwardRef=p,t.Fragment=a,t.Lazy=h,t.Memo=m,t.Portal=o,t.Profiler=s,t.StrictMode=i,t.Suspense=f,t.isAsyncMode=function(e){return x(e)||k(e)===u},t.isConcurrentMode=x,t.isContextConsumer=function(e){return k(e)===c},t.isContextProvider=function(e){return k(e)===l},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r},t.isForwardRef=function(e){return k(e)===p},t.isFragment=function(e){return k(e)===a},t.isLazy=function(e){return k(e)===h},t.isMemo=function(e){return k(e)===m},t.isPortal=function(e){return k(e)===o},t.isProfiler=function(e){return k(e)===s},t.isStrictMode=function(e){return k(e)===i},t.isSuspense=function(e){return k(e)===f},t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===a||e===d||e===s||e===i||e===f||e===g||"object"==typeof e&&null!==e&&(e.$$typeof===h||e.$$typeof===m||e.$$typeof===l||e.$$typeof===c||e.$$typeof===p||e.$$typeof===b||e.$$typeof===v||e.$$typeof===w||e.$$typeof===y)},t.typeOf=k},4363:(e,t,n)=>{"use strict";e.exports=n(2799)},3259:(e,t,n)=>{"use strict";function r(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function o(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(){return i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i.apply(this,arguments)}var s=n(6540),l=[],c=[];var u=s.createContext(null);function d(e){var t=e(),n={loading:!0,loaded:null,error:null};return n.promise=t.then((function(e){return n.loading=!1,n.loaded=e,e})).catch((function(e){throw n.loading=!1,n.error=e,e})),n}function p(e){var t={loading:!1,loaded:{},error:null},n=[];try{Object.keys(e).forEach((function(r){var o=d(e[r]);o.loading?t.loading=!0:(t.loaded[r]=o.loaded,t.error=o.error),n.push(o.promise),o.promise.then((function(e){t.loaded[r]=e})).catch((function(e){t.error=e}))}))}catch(r){t.error=r}return t.promise=Promise.all(n).then((function(e){return t.loading=!1,e})).catch((function(e){throw t.loading=!1,e})),t}function f(e,t){return s.createElement((n=e)&&n.__esModule?n.default:n,t);var n}function g(e,t){var d,p;if(!t.loading)throw new Error("react-loadable requires a `loading` component");var g=i({loader:null,loading:null,delay:200,timeout:null,render:f,webpack:null,modules:null},t),m=null;function h(){return m||(m=e(g.loader)),m.promise}return l.push(h),"function"==typeof g.webpack&&c.push((function(){if((0,g.webpack)().every((function(e){return void 0!==e&&void 0!==n.m[e]})))return h()})),p=d=function(t){function n(n){var r;return a(o(o(r=t.call(this,n)||this)),"retry",(function(){r.setState({error:null,loading:!0,timedOut:!1}),m=e(g.loader),r._loadModule()})),h(),r.state={error:m.error,pastDelay:!1,timedOut:!1,loading:m.loading,loaded:m.loaded},r}r(n,t),n.preload=function(){return h()};var i=n.prototype;return i.UNSAFE_componentWillMount=function(){this._loadModule()},i.componentDidMount=function(){this._mounted=!0},i._loadModule=function(){var e=this;if(this.context&&Array.isArray(g.modules)&&g.modules.forEach((function(t){e.context.report(t)})),m.loading){var t=function(t){e._mounted&&e.setState(t)};"number"==typeof g.delay&&(0===g.delay?this.setState({pastDelay:!0}):this._delay=setTimeout((function(){t({pastDelay:!0})}),g.delay)),"number"==typeof g.timeout&&(this._timeout=setTimeout((function(){t({timedOut:!0})}),g.timeout));var n=function(){t({error:m.error,loaded:m.loaded,loading:m.loading}),e._clearTimeouts()};m.promise.then((function(){return n(),null})).catch((function(e){return n(),null}))}},i.componentWillUnmount=function(){this._mounted=!1,this._clearTimeouts()},i._clearTimeouts=function(){clearTimeout(this._delay),clearTimeout(this._timeout)},i.render=function(){return this.state.loading||this.state.error?s.createElement(g.loading,{isLoading:this.state.loading,pastDelay:this.state.pastDelay,timedOut:this.state.timedOut,error:this.state.error,retry:this.retry}):this.state.loaded?g.render(this.state.loaded,this.props):null},n}(s.Component),a(d,"contextType",u),p}function m(e){return g(d,e)}m.Map=function(e){if("function"!=typeof e.render)throw new Error("LoadableMap requires a `render(loaded, props)` function");return g(p,e)};var h=function(e){function t(){return e.apply(this,arguments)||this}return r(t,e),t.prototype.render=function(){return s.createElement(u.Provider,{value:{report:this.props.report}},s.Children.only(this.props.children))},t}(s.Component);function y(e){for(var t=[];e.length;){var n=e.pop();t.push(n())}return Promise.all(t).then((function(){if(e.length)return y(e)}))}m.Capture=h,m.preloadAll=function(){return new Promise((function(e,t){y(l).then(e,t)}))},m.preloadReady=function(){return new Promise((function(e,t){y(c).then(e,e)}))},e.exports=m},2831:(e,t,n)=>{"use strict";n.d(t,{u:()=>i,v:()=>s});var r=n(6347),o=n(8168),a=n(6540);function i(e,t,n){return void 0===n&&(n=[]),e.some((function(e){var o=e.path?(0,r.B6)(t,e):n.length?n[n.length-1].match:r.Ix.computeRootMatch(t);return o&&(n.push({route:e,match:o}),e.routes&&i(e.routes,t,n)),o})),n}function s(e,t,n){return void 0===t&&(t={}),void 0===n&&(n={}),e?a.createElement(r.dO,n,e.map((function(e,n){return a.createElement(r.qh,{key:e.key||n,path:e.path,exact:e.exact,strict:e.strict,render:function(n){return e.render?e.render((0,o.A)({},n,{},t,{route:e})):a.createElement(e.component,(0,o.A)({},n,t,{route:e}))}})}))):null}},4625:(e,t,n)=>{"use strict";n.d(t,{I9:()=>d,Kd:()=>u,N_:()=>y,k2:()=>w});var r=n(6347),o=n(2892),a=n(6540),i=n(1513),s=n(8168),l=n(8587),c=n(1561),u=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).history=(0,i.zR)(t.props),t}return(0,o.A)(t,e),t.prototype.render=function(){return a.createElement(r.Ix,{history:this.history,children:this.props.children})},t}(a.Component);var d=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).history=(0,i.TM)(t.props),t}return(0,o.A)(t,e),t.prototype.render=function(){return a.createElement(r.Ix,{history:this.history,children:this.props.children})},t}(a.Component);var p=function(e,t){return"function"==typeof e?e(t):e},f=function(e,t){return"string"==typeof e?(0,i.yJ)(e,null,null,t):e},g=function(e){return e},m=a.forwardRef;void 0===m&&(m=g);var h=m((function(e,t){var n=e.innerRef,r=e.navigate,o=e.onClick,i=(0,l.A)(e,["innerRef","navigate","onClick"]),c=i.target,u=(0,s.A)({},i,{onClick:function(e){try{o&&o(e)}catch(t){throw e.preventDefault(),t}e.defaultPrevented||0!==e.button||c&&"_self"!==c||function(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}(e)||(e.preventDefault(),r())}});return u.ref=g!==m&&t||n,a.createElement("a",u)}));var y=m((function(e,t){var n=e.component,o=void 0===n?h:n,u=e.replace,d=e.to,y=e.innerRef,b=(0,l.A)(e,["component","replace","to","innerRef"]);return a.createElement(r.XZ.Consumer,null,(function(e){e||(0,c.A)(!1);var n=e.history,r=f(p(d,e.location),e.location),l=r?n.createHref(r):"",h=(0,s.A)({},b,{href:l,navigate:function(){var t=p(d,e.location),r=(0,i.AO)(e.location)===(0,i.AO)(f(t));(u||r?n.replace:n.push)(t)}});return g!==m?h.ref=t||y:h.innerRef=y,a.createElement(o,h)}))})),b=function(e){return e},v=a.forwardRef;void 0===v&&(v=b);var w=v((function(e,t){var n=e["aria-current"],o=void 0===n?"page":n,i=e.activeClassName,u=void 0===i?"active":i,d=e.activeStyle,g=e.className,m=e.exact,h=e.isActive,w=e.location,k=e.sensitive,x=e.strict,S=e.style,_=e.to,E=e.innerRef,C=(0,l.A)(e,["aria-current","activeClassName","activeStyle","className","exact","isActive","location","sensitive","strict","style","to","innerRef"]);return a.createElement(r.XZ.Consumer,null,(function(e){e||(0,c.A)(!1);var n=w||e.location,i=f(p(_,n),n),l=i.pathname,A=l&&l.replace(/([.+*?=^!:${}()[\]|/\\])/g,"\\$1"),T=A?(0,r.B6)(n.pathname,{path:A,exact:m,sensitive:k,strict:x}):null,j=!!(h?h(T,n):T),R="function"==typeof g?g(j):g,P="function"==typeof S?S(j):S;j&&(R=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return t.filter((function(e){return e})).join(" ")}(R,u),P=(0,s.A)({},P,d));var L=(0,s.A)({"aria-current":j&&o||null,className:R,style:P,to:i},C);return b!==v?L.ref=t||E:L.innerRef=E,a.createElement(y,L)}))}))},6347:(e,t,n)=>{"use strict";n.d(t,{B6:()=>S,Ix:()=>v,W6:()=>L,XZ:()=>b,dO:()=>R,qh:()=>_,zy:()=>N});var r=n(2892),o=n(6540),a=n(5556),i=n.n(a),s=n(1513),l=n(1561),c=n(8168),u=n(5302),d=n.n(u),p=(n(4363),n(8587)),f=(n(4146),1073741823),g="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:void 0!==n.g?n.g:{};var m=o.createContext||function(e,t){var n,a,s="__create-react-context-"+function(){var e="__global_unique_id__";return g[e]=(g[e]||0)+1}()+"__",l=function(e){function n(){for(var t,n,r,o=arguments.length,a=new Array(o),i=0;i<o;i++)a[i]=arguments[i];return(t=e.call.apply(e,[this].concat(a))||this).emitter=(n=t.props.value,r=[],{on:function(e){r.push(e)},off:function(e){r=r.filter((function(t){return t!==e}))},get:function(){return n},set:function(e,t){n=e,r.forEach((function(e){return e(n,t)}))}}),t}(0,r.A)(n,e);var o=n.prototype;return o.getChildContext=function(){var e;return(e={})[s]=this.emitter,e},o.componentWillReceiveProps=function(e){if(this.props.value!==e.value){var n,r=this.props.value,o=e.value;((a=r)===(i=o)?0!==a||1/a==1/i:a!=a&&i!=i)?n=0:(n="function"==typeof t?t(r,o):f,0!==(n|=0)&&this.emitter.set(e.value,n))}var a,i},o.render=function(){return this.props.children},n}(o.Component);l.childContextTypes=((n={})[s]=i().object.isRequired,n);var c=function(t){function n(){for(var e,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(e=t.call.apply(t,[this].concat(r))||this).observedBits=void 0,e.state={value:e.getValue()},e.onUpdate=function(t,n){(0|e.observedBits)&n&&e.setState({value:e.getValue()})},e}(0,r.A)(n,t);var o=n.prototype;return o.componentWillReceiveProps=function(e){var t=e.observedBits;this.observedBits=null==t?f:t},o.componentDidMount=function(){this.context[s]&&this.context[s].on(this.onUpdate);var e=this.props.observedBits;this.observedBits=null==e?f:e},o.componentWillUnmount=function(){this.context[s]&&this.context[s].off(this.onUpdate)},o.getValue=function(){return this.context[s]?this.context[s].get():e},o.render=function(){return(e=this.props.children,Array.isArray(e)?e[0]:e)(this.state.value);var e},n}(o.Component);return c.contextTypes=((a={})[s]=i().object,a),{Provider:l,Consumer:c}},h=function(e){var t=m();return t.displayName=e,t},y=h("Router-History"),b=h("Router"),v=function(e){function t(t){var n;return(n=e.call(this,t)||this).state={location:t.history.location},n._isMounted=!1,n._pendingLocation=null,t.staticContext||(n.unlisten=t.history.listen((function(e){n._pendingLocation=e}))),n}(0,r.A)(t,e),t.computeRootMatch=function(e){return{path:"/",url:"/",params:{},isExact:"/"===e}};var n=t.prototype;return n.componentDidMount=function(){var e=this;this._isMounted=!0,this.unlisten&&this.unlisten(),this.props.staticContext||(this.unlisten=this.props.history.listen((function(t){e._isMounted&&e.setState({location:t})}))),this._pendingLocation&&this.setState({location:this._pendingLocation})},n.componentWillUnmount=function(){this.unlisten&&(this.unlisten(),this._isMounted=!1,this._pendingLocation=null)},n.render=function(){return o.createElement(b.Provider,{value:{history:this.props.history,location:this.state.location,match:t.computeRootMatch(this.state.location.pathname),staticContext:this.props.staticContext}},o.createElement(y.Provider,{children:this.props.children||null,value:this.props.history}))},t}(o.Component);o.Component;o.Component;var w={},k=1e4,x=0;function S(e,t){void 0===t&&(t={}),("string"==typeof t||Array.isArray(t))&&(t={path:t});var n=t,r=n.path,o=n.exact,a=void 0!==o&&o,i=n.strict,s=void 0!==i&&i,l=n.sensitive,c=void 0!==l&&l;return[].concat(r).reduce((function(t,n){if(!n&&""!==n)return null;if(t)return t;var r=function(e,t){var n=""+t.end+t.strict+t.sensitive,r=w[n]||(w[n]={});if(r[e])return r[e];var o=[],a={regexp:d()(e,o,t),keys:o};return x<k&&(r[e]=a,x++),a}(n,{end:a,strict:s,sensitive:c}),o=r.regexp,i=r.keys,l=o.exec(e);if(!l)return null;var u=l[0],p=l.slice(1),f=e===u;return a&&!f?null:{path:n,url:"/"===n&&""===u?"/":u,isExact:f,params:i.reduce((function(e,t,n){return e[t.name]=p[n],e}),{})}}),null)}var _=function(e){function t(){return e.apply(this,arguments)||this}return(0,r.A)(t,e),t.prototype.render=function(){var e=this;return o.createElement(b.Consumer,null,(function(t){t||(0,l.A)(!1);var n=e.props.location||t.location,r=e.props.computedMatch?e.props.computedMatch:e.props.path?S(n.pathname,e.props):t.match,a=(0,c.A)({},t,{location:n,match:r}),i=e.props,s=i.children,u=i.component,d=i.render;return Array.isArray(s)&&function(e){return 0===o.Children.count(e)}(s)&&(s=null),o.createElement(b.Provider,{value:a},a.match?s?"function"==typeof s?s(a):s:u?o.createElement(u,a):d?d(a):null:"function"==typeof s?s(a):null)}))},t}(o.Component);function E(e){return"/"===e.charAt(0)?e:"/"+e}function C(e,t){if(!e)return t;var n=E(e);return 0!==t.pathname.indexOf(n)?t:(0,c.A)({},t,{pathname:t.pathname.substr(n.length)})}function A(e){return"string"==typeof e?e:(0,s.AO)(e)}function T(e){return function(){(0,l.A)(!1)}}function j(){}o.Component;var R=function(e){function t(){return e.apply(this,arguments)||this}return(0,r.A)(t,e),t.prototype.render=function(){var e=this;return o.createElement(b.Consumer,null,(function(t){t||(0,l.A)(!1);var n,r,a=e.props.location||t.location;return o.Children.forEach(e.props.children,(function(e){if(null==r&&o.isValidElement(e)){n=e;var i=e.props.path||e.props.from;r=i?S(a.pathname,(0,c.A)({},e.props,{path:i})):t.match}})),r?o.cloneElement(n,{location:a,computedMatch:r}):null}))},t}(o.Component);var P=o.useContext;function L(){return P(y)}function N(){return P(b).location}},1020:(e,t,n)=>{"use strict";var r=n(6540),o=Symbol.for("react.element"),a=Symbol.for("react.fragment"),i=Object.prototype.hasOwnProperty,s=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,l={key:!0,ref:!0,__self:!0,__source:!0};function c(e,t,n){var r,a={},c=null,u=null;for(r in void 0!==n&&(c=""+n),void 0!==t.key&&(c=""+t.key),void 0!==t.ref&&(u=t.ref),t)i.call(t,r)&&!l.hasOwnProperty(r)&&(a[r]=t[r]);if(e&&e.defaultProps)for(r in t=e.defaultProps)void 0===a[r]&&(a[r]=t[r]);return{$$typeof:o,type:e,key:c,ref:u,props:a,_owner:s.current}}t.Fragment=a,t.jsx=c,t.jsxs=c},5287:(e,t)=>{"use strict";var n=Symbol.for("react.element"),r=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),a=Symbol.for("react.strict_mode"),i=Symbol.for("react.profiler"),s=Symbol.for("react.provider"),l=Symbol.for("react.context"),c=Symbol.for("react.forward_ref"),u=Symbol.for("react.suspense"),d=Symbol.for("react.memo"),p=Symbol.for("react.lazy"),f=Symbol.iterator;var g={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},m=Object.assign,h={};function y(e,t,n){this.props=e,this.context=t,this.refs=h,this.updater=n||g}function b(){}function v(e,t,n){this.props=e,this.context=t,this.refs=h,this.updater=n||g}y.prototype.isReactComponent={},y.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")},y.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},b.prototype=y.prototype;var w=v.prototype=new b;w.constructor=v,m(w,y.prototype),w.isPureReactComponent=!0;var k=Array.isArray,x=Object.prototype.hasOwnProperty,S={current:null},_={key:!0,ref:!0,__self:!0,__source:!0};function E(e,t,r){var o,a={},i=null,s=null;if(null!=t)for(o in void 0!==t.ref&&(s=t.ref),void 0!==t.key&&(i=""+t.key),t)x.call(t,o)&&!_.hasOwnProperty(o)&&(a[o]=t[o]);var l=arguments.length-2;if(1===l)a.children=r;else if(1<l){for(var c=Array(l),u=0;u<l;u++)c[u]=arguments[u+2];a.children=c}if(e&&e.defaultProps)for(o in l=e.defaultProps)void 0===a[o]&&(a[o]=l[o]);return{$$typeof:n,type:e,key:i,ref:s,props:a,_owner:S.current}}function C(e){return"object"==typeof e&&null!==e&&e.$$typeof===n}var A=/\/+/g;function T(e,t){return"object"==typeof e&&null!==e&&null!=e.key?function(e){var t={"=":"=0",":":"=2"};return"$"+e.replace(/[=:]/g,(function(e){return t[e]}))}(""+e.key):t.toString(36)}function j(e,t,o,a,i){var s=typeof e;"undefined"!==s&&"boolean"!==s||(e=null);var l=!1;if(null===e)l=!0;else switch(s){case"string":case"number":l=!0;break;case"object":switch(e.$$typeof){case n:case r:l=!0}}if(l)return i=i(l=e),e=""===a?"."+T(l,0):a,k(i)?(o="",null!=e&&(o=e.replace(A,"$&/")+"/"),j(i,t,o,"",(function(e){return e}))):null!=i&&(C(i)&&(i=function(e,t){return{$$typeof:n,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(i,o+(!i.key||l&&l.key===i.key?"":(""+i.key).replace(A,"$&/")+"/")+e)),t.push(i)),1;if(l=0,a=""===a?".":a+":",k(e))for(var c=0;c<e.length;c++){var u=a+T(s=e[c],c);l+=j(s,t,o,u,i)}else if(u=function(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=f&&e[f]||e["@@iterator"])?e:null}(e),"function"==typeof u)for(e=u.call(e),c=0;!(s=e.next()).done;)l+=j(s=s.value,t,o,u=a+T(s,c++),i);else if("object"===s)throw t=String(e),Error("Objects are not valid as a React child (found: "+("[object Object]"===t?"object with keys {"+Object.keys(e).join(", ")+"}":t)+"). If you meant to render a collection of children, use an array instead.");return l}function R(e,t,n){if(null==e)return e;var r=[],o=0;return j(e,r,"","",(function(e){return t.call(n,e,o++)})),r}function P(e){if(-1===e._status){var t=e._result;(t=t()).then((function(t){0!==e._status&&-1!==e._status||(e._status=1,e._result=t)}),(function(t){0!==e._status&&-1!==e._status||(e._status=2,e._result=t)})),-1===e._status&&(e._status=0,e._result=t)}if(1===e._status)return e._result.default;throw e._result}var L={current:null},N={transition:null},O={ReactCurrentDispatcher:L,ReactCurrentBatchConfig:N,ReactCurrentOwner:S};function D(){throw Error("act(...) is not supported in production builds of React.")}t.Children={map:R,forEach:function(e,t,n){R(e,(function(){t.apply(this,arguments)}),n)},count:function(e){var t=0;return R(e,(function(){t++})),t},toArray:function(e){return R(e,(function(e){return e}))||[]},only:function(e){if(!C(e))throw Error("React.Children.only expected to receive a single React element child.");return e}},t.Component=y,t.Fragment=o,t.Profiler=i,t.PureComponent=v,t.StrictMode=a,t.Suspense=u,t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=O,t.act=D,t.cloneElement=function(e,t,r){if(null==e)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+e+".");var o=m({},e.props),a=e.key,i=e.ref,s=e._owner;if(null!=t){if(void 0!==t.ref&&(i=t.ref,s=S.current),void 0!==t.key&&(a=""+t.key),e.type&&e.type.defaultProps)var l=e.type.defaultProps;for(c in t)x.call(t,c)&&!_.hasOwnProperty(c)&&(o[c]=void 0===t[c]&&void 0!==l?l[c]:t[c])}var c=arguments.length-2;if(1===c)o.children=r;else if(1<c){l=Array(c);for(var u=0;u<c;u++)l[u]=arguments[u+2];o.children=l}return{$$typeof:n,type:e.type,key:a,ref:i,props:o,_owner:s}},t.createContext=function(e){return(e={$$typeof:l,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null}).Provider={$$typeof:s,_context:e},e.Consumer=e},t.createElement=E,t.createFactory=function(e){var t=E.bind(null,e);return t.type=e,t},t.createRef=function(){return{current:null}},t.forwardRef=function(e){return{$$typeof:c,render:e}},t.isValidElement=C,t.lazy=function(e){return{$$typeof:p,_payload:{_status:-1,_result:e},_init:P}},t.memo=function(e,t){return{$$typeof:d,type:e,compare:void 0===t?null:t}},t.startTransition=function(e){var t=N.transition;N.transition={};try{e()}finally{N.transition=t}},t.unstable_act=D,t.useCallback=function(e,t){return L.current.useCallback(e,t)},t.useContext=function(e){return L.current.useContext(e)},t.useDebugValue=function(){},t.useDeferredValue=function(e){return L.current.useDeferredValue(e)},t.useEffect=function(e,t){return L.current.useEffect(e,t)},t.useId=function(){return L.current.useId()},t.useImperativeHandle=function(e,t,n){return L.current.useImperativeHandle(e,t,n)},t.useInsertionEffect=function(e,t){return L.current.useInsertionEffect(e,t)},t.useLayoutEffect=function(e,t){return L.current.useLayoutEffect(e,t)},t.useMemo=function(e,t){return L.current.useMemo(e,t)},t.useReducer=function(e,t,n){return L.current.useReducer(e,t,n)},t.useRef=function(e){return L.current.useRef(e)},t.useState=function(e){return L.current.useState(e)},t.useSyncExternalStore=function(e,t,n){return L.current.useSyncExternalStore(e,t,n)},t.useTransition=function(){return L.current.useTransition()},t.version="18.3.1"},6540:(e,t,n)=>{"use strict";e.exports=n(5287)},4848:(e,t,n)=>{"use strict";e.exports=n(1020)},7463:(e,t)=>{"use strict";function n(e,t){var n=e.length;e.push(t);e:for(;0<n;){var r=n-1>>>1,o=e[r];if(!(0<a(o,t)))break e;e[r]=t,e[n]=o,n=r}}function r(e){return 0===e.length?null:e[0]}function o(e){if(0===e.length)return null;var t=e[0],n=e.pop();if(n!==t){e[0]=n;e:for(var r=0,o=e.length,i=o>>>1;r<i;){var s=2*(r+1)-1,l=e[s],c=s+1,u=e[c];if(0>a(l,n))c<o&&0>a(u,l)?(e[r]=u,e[c]=n,r=c):(e[r]=l,e[s]=n,r=s);else{if(!(c<o&&0>a(u,n)))break e;e[r]=u,e[c]=n,r=c}}}return t}function a(e,t){var n=e.sortIndex-t.sortIndex;return 0!==n?n:e.id-t.id}if("object"==typeof performance&&"function"==typeof performance.now){var i=performance;t.unstable_now=function(){return i.now()}}else{var s=Date,l=s.now();t.unstable_now=function(){return s.now()-l}}var c=[],u=[],d=1,p=null,f=3,g=!1,m=!1,h=!1,y="function"==typeof setTimeout?setTimeout:null,b="function"==typeof clearTimeout?clearTimeout:null,v="undefined"!=typeof setImmediate?setImmediate:null;function w(e){for(var t=r(u);null!==t;){if(null===t.callback)o(u);else{if(!(t.startTime<=e))break;o(u),t.sortIndex=t.expirationTime,n(c,t)}t=r(u)}}function k(e){if(h=!1,w(e),!m)if(null!==r(c))m=!0,N(x);else{var t=r(u);null!==t&&O(k,t.startTime-e)}}function x(e,n){m=!1,h&&(h=!1,b(C),C=-1),g=!0;var a=f;try{for(w(n),p=r(c);null!==p&&(!(p.expirationTime>n)||e&&!j());){var i=p.callback;if("function"==typeof i){p.callback=null,f=p.priorityLevel;var s=i(p.expirationTime<=n);n=t.unstable_now(),"function"==typeof s?p.callback=s:p===r(c)&&o(c),w(n)}else o(c);p=r(c)}if(null!==p)var l=!0;else{var d=r(u);null!==d&&O(k,d.startTime-n),l=!1}return l}finally{p=null,f=a,g=!1}}"undefined"!=typeof navigator&&void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);var S,_=!1,E=null,C=-1,A=5,T=-1;function j(){return!(t.unstable_now()-T<A)}function R(){if(null!==E){var e=t.unstable_now();T=e;var n=!0;try{n=E(!0,e)}finally{n?S():(_=!1,E=null)}}else _=!1}if("function"==typeof v)S=function(){v(R)};else if("undefined"!=typeof MessageChannel){var P=new MessageChannel,L=P.port2;P.port1.onmessage=R,S=function(){L.postMessage(null)}}else S=function(){y(R,0)};function N(e){E=e,_||(_=!0,S())}function O(e,n){C=y((function(){e(t.unstable_now())}),n)}t.unstable_IdlePriority=5,t.unstable_ImmediatePriority=1,t.unstable_LowPriority=4,t.unstable_NormalPriority=3,t.unstable_Profiling=null,t.unstable_UserBlockingPriority=2,t.unstable_cancelCallback=function(e){e.callback=null},t.unstable_continueExecution=function(){m||g||(m=!0,N(x))},t.unstable_forceFrameRate=function(e){0>e||125<e?console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"):A=0<e?Math.floor(1e3/e):5},t.unstable_getCurrentPriorityLevel=function(){return f},t.unstable_getFirstCallbackNode=function(){return r(c)},t.unstable_next=function(e){switch(f){case 1:case 2:case 3:var t=3;break;default:t=f}var n=f;f=t;try{return e()}finally{f=n}},t.unstable_pauseExecution=function(){},t.unstable_requestPaint=function(){},t.unstable_runWithPriority=function(e,t){switch(e){case 1:case 2:case 3:case 4:case 5:break;default:e=3}var n=f;f=e;try{return t()}finally{f=n}},t.unstable_scheduleCallback=function(e,o,a){var i=t.unstable_now();switch("object"==typeof a&&null!==a?a="number"==typeof(a=a.delay)&&0<a?i+a:i:a=i,e){case 1:var s=-1;break;case 2:s=250;break;case 5:s=1073741823;break;case 4:s=1e4;break;default:s=5e3}return e={id:d++,callback:o,priorityLevel:e,startTime:a,expirationTime:s=a+s,sortIndex:-1},a>i?(e.sortIndex=a,n(u,e),null===r(c)&&e===r(u)&&(h?(b(C),C=-1):h=!0,O(k,a-i))):(e.sortIndex=s,n(c,e),m||g||(m=!0,N(x))),e},t.unstable_shouldYield=j,t.unstable_wrapCallback=function(e){var t=f;return function(){var n=f;f=t;try{return e.apply(this,arguments)}finally{f=n}}}},9982:(e,t,n)=>{"use strict";e.exports=n(7463)},2833:e=>{e.exports=function(e,t,n,r){var o=n?n.call(r,e,t):void 0;if(void 0!==o)return!!o;if(e===t)return!0;if("object"!=typeof e||!e||"object"!=typeof t||!t)return!1;var a=Object.keys(e),i=Object.keys(t);if(a.length!==i.length)return!1;for(var s=Object.prototype.hasOwnProperty.bind(t),l=0;l<a.length;l++){var c=a[l];if(!s(c))return!1;var u=e[c],d=t[c];if(!1===(o=n?n.call(r,u,d,c):void 0)||void 0===o&&u!==d)return!1}return!0}},4784:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>r});const r={title:"Stylable",tagline:"is CSS for components",url:"https://stylable.io",baseUrl:"/",onBrokenLinks:"throw",onBrokenMarkdownLinks:"warn",favicon:"img/favicon.ico",organizationName:"wixplosives",projectName:"stylable.io",trailingSlash:!1,themeConfig:{colorMode:{defaultMode:"dark",respectPrefersColorScheme:!0,disableSwitch:!1},navbar:{hideOnScroll:!0,title:"Stylable",logo:{alt:"Stylable Logo",src:"img/branding/logo/SVG/96-logo-OnlySymbol.svg"},items:[{to:"docs/getting-started/intro",activeBasePath:"docs/getting-started",label:"Getting Started",position:"left"},{to:"docs/guides/handbook/intro",activeBasePath:"docs/guides",label:"Guides",position:"left"},{to:"docs/references/cheatsheet",activeBasePath:"docs/references",label:"API",position:"left"},{to:"playground",label:"Playground",position:"left"},{to:"community",label:"Community",position:"left"},{to:"blog",label:"Blog",position:"left"},{href:"https://github.com/wix/stylable",position:"right",className:"githubIcon__root","aria-label":"GitHub repository"}]},footer:{style:"dark",links:[{title:"Docs",items:[{label:"Getting Started",to:"docs/getting-started/intro"},{label:"Guides",to:"docs/guides/handbook/intro"},{label:"API",to:"docs/references/cheatsheet"}]},{title:"Community",items:[{label:"Issues",href:"https://github.com/wix/stylable/issues"},{label:"Twitter",href:"https://twitter.com/stylableio"},{label:"Discord",href:"https://discord.gg/C5ZhENSbV7"}]},{title:"More",items:[{label:"Site GitHub",href:"https://github.com/wixplosives/stylable.io"},{label:"Style Guide",to:"docs/style-guide"},{label:"Attributions",to:"docs/attributions"}]}],copyright:"Copyright \xa9 2024 Wix.com. Built with Docusaurus."},docs:{versionPersistence:"localStorage",sidebar:{hideable:!1,autoCollapseCategories:!1}},blog:{sidebar:{groupByYear:!0}},metadata:[],prism:{additionalLanguages:[],theme:{plain:{color:"#bfc7d5",backgroundColor:"#292d3e"},styles:[{types:["comment"],style:{color:"rgb(105, 112, 152)",fontStyle:"italic"}},{types:["string","inserted"],style:{color:"rgb(195, 232, 141)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation","selector"],style:{color:"rgb(199, 146, 234)"}},{types:["variable"],style:{color:"rgb(191, 199, 213)"}},{types:["class-name","attr-name"],style:{color:"rgb(255, 203, 107)"}},{types:["tag","deleted"],style:{color:"rgb(255, 85, 114)"}},{types:["operator"],style:{color:"rgb(137, 221, 255)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["keyword"],style:{fontStyle:"italic"}},{types:["doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}},{types:["url"],style:{color:"rgb(221, 221, 221)"}}]},magicComments:[{className:"theme-code-block-highlighted-line",line:"highlight-next-line",block:{start:"highlight-start",end:"highlight-end"}}]},tableOfContents:{minHeadingLevel:2,maxHeadingLevel:3}},presets:[["@docusaurus/preset-classic",{docs:{sidebarPath:"/home/runner/work/stylable.io/stylable.io/src/sidebars.js",editUrl:"https://github.com/wixplosives/stylable.io/edit/master",exclude:["unpublished/**"]},blog:{showReadingTime:!0,editUrl:"https://github.com/wixplosives/stylable.io/edit/master",onInlineAuthors:"ignore"},googleAnalytics:{trackingID:"UA-109043375-1",anonymizeIP:!0}}]],plugins:[["/home/runner/work/stylable.io/stylable.io/node_modules/@easyops-cn/docusaurus-search-local/dist/server/server/index.js",{hashed:!0}],["/home/runner/work/stylable.io/stylable.io/plugins/stylable-plugin.js",{}]],baseUrlIssueBanner:!0,i18n:{defaultLocale:"en",path:"i18n",locales:["en"],localeConfigs:{}},future:{experimental_faster:{swcJsLoader:!1,swcJsMinimizer:!1,swcHtmlMinimizer:!1,lightningCssMinimizer:!1,mdxCrossCompilerCache:!1,rspackBundler:!1},experimental_storage:{type:"localStorage",namespace:!1},experimental_router:"browser"},onBrokenAnchors:"warn",onDuplicateRoutes:"warn",staticDirectories:["static"],customFields:{},themes:[],scripts:[],headTags:[],stylesheets:[],clientModules:[],titleDelimiter:"|",noIndex:!1,markdown:{format:"mdx",mermaid:!1,mdx1Compat:{comments:!0,admonitions:!0,headingIds:!0},anchors:{maintainCase:!1}}}},8168:(e,t,n)=>{"use strict";function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},r.apply(null,arguments)}n.d(t,{A:()=>r})},2892:(e,t,n)=>{"use strict";function r(e,t){return r=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},r(e,t)}function o(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,r(e,t)}n.d(t,{A:()=>o})},8587:(e,t,n)=>{"use strict";function r(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}n.d(t,{A:()=>r})},4164:(e,t,n)=>{"use strict";function r(e){var t,n,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e)){var a=e.length;for(t=0;t<a;t++)e[t]&&(n=r(e[t]))&&(o&&(o+=" "),o+=n)}else for(n in e)e[n]&&(o&&(o+=" "),o+=n);return o}n.d(t,{A:()=>o});const o=function(){for(var e,t,n=0,o="",a=arguments.length;n<a;n++)(e=arguments[n])&&(t=r(e))&&(o&&(o+=" "),o+=t);return o}},1765:(e,t,n)=>{"use strict";n.d(t,{My:()=>A,f4:()=>ne});var r,o,a,i,s,l,c,u=n(6540),d=n(4164),p=Object.create,f=Object.defineProperty,g=Object.defineProperties,m=Object.getOwnPropertyDescriptor,h=Object.getOwnPropertyDescriptors,y=Object.getOwnPropertyNames,b=Object.getOwnPropertySymbols,v=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable,x=(e,t,n)=>t in e?f(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,S=(e,t)=>{for(var n in t||(t={}))w.call(t,n)&&x(e,n,t[n]);if(b)for(var n of b(t))k.call(t,n)&&x(e,n,t[n]);return e},_=(e,t)=>g(e,h(t)),E=(e,t)=>{var n={};for(var r in e)w.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&b)for(var r of b(e))t.indexOf(r)<0&&k.call(e,r)&&(n[r]=e[r]);return n},C=(r={"../../node_modules/.pnpm/prismjs@1.29.0_patch_hash=vrxx3pzkik6jpmgpayxfjunetu/node_modules/prismjs/prism.js"(e,t){var n=function(){var e=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,n={},r={util:{encode:function e(t){return t instanceof o?new o(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function e(t,n){var o,a;switch(n=n||{},r.util.type(t)){case"Object":if(a=r.util.objId(t),n[a])return n[a];for(var i in o={},n[a]=o,t)t.hasOwnProperty(i)&&(o[i]=e(t[i],n));return o;case"Array":return a=r.util.objId(t),n[a]?n[a]:(o=[],n[a]=o,t.forEach((function(t,r){o[r]=e(t,n)})),o);default:return t}},getLanguage:function(t){for(;t;){var n=e.exec(t.className);if(n)return n[1].toLowerCase();t=t.parentElement}return"none"},setLanguage:function(t,n){t.className=t.className.replace(RegExp(e,"gi"),""),t.classList.add("language-"+n)},isActive:function(e,t,n){for(var r="no-"+t;e;){var o=e.classList;if(o.contains(t))return!0;if(o.contains(r))return!1;e=e.parentElement}return!!n}},languages:{plain:n,plaintext:n,text:n,txt:n,extend:function(e,t){var n=r.util.clone(r.languages[e]);for(var o in t)n[o]=t[o];return n},insertBefore:function(e,t,n,o){var a=(o=o||r.languages)[e],i={};for(var s in a)if(a.hasOwnProperty(s)){if(s==t)for(var l in n)n.hasOwnProperty(l)&&(i[l]=n[l]);n.hasOwnProperty(s)||(i[s]=a[s])}var c=o[e];return o[e]=i,r.languages.DFS(r.languages,(function(t,n){n===c&&t!=e&&(this[t]=i)})),i},DFS:function e(t,n,o,a){a=a||{};var i=r.util.objId;for(var s in t)if(t.hasOwnProperty(s)){n.call(t,s,t[s],o||s);var l=t[s],c=r.util.type(l);"Object"!==c||a[i(l)]?"Array"!==c||a[i(l)]||(a[i(l)]=!0,e(l,n,s,a)):(a[i(l)]=!0,e(l,n,null,a))}}},plugins:{},highlight:function(e,t,n){var a={code:e,grammar:t,language:n};if(r.hooks.run("before-tokenize",a),!a.grammar)throw new Error('The language "'+a.language+'" has no grammar.');return a.tokens=r.tokenize(a.code,a.grammar),r.hooks.run("after-tokenize",a),o.stringify(r.util.encode(a.tokens),a.language)},tokenize:function(e,t){var n=t.rest;if(n){for(var r in n)t[r]=n[r];delete t.rest}var o=new s;return l(o,o.head,e),i(e,o,t,o.head,0),function(e){for(var t=[],n=e.head.next;n!==e.tail;)t.push(n.value),n=n.next;return t}(o)},hooks:{all:{},add:function(e,t){var n=r.hooks.all;n[e]=n[e]||[],n[e].push(t)},run:function(e,t){var n=r.hooks.all[e];if(n&&n.length)for(var o,a=0;o=n[a++];)o(t)}},Token:o};function o(e,t,n,r){this.type=e,this.content=t,this.alias=n,this.length=0|(r||"").length}function a(e,t,n,r){e.lastIndex=t;var o=e.exec(n);if(o&&r&&o[1]){var a=o[1].length;o.index+=a,o[0]=o[0].slice(a)}return o}function i(e,t,n,s,u,d){for(var p in n)if(n.hasOwnProperty(p)&&n[p]){var f=n[p];f=Array.isArray(f)?f:[f];for(var g=0;g<f.length;++g){if(d&&d.cause==p+","+g)return;var m=f[g],h=m.inside,y=!!m.lookbehind,b=!!m.greedy,v=m.alias;if(b&&!m.pattern.global){var w=m.pattern.toString().match(/[imsuy]*$/)[0];m.pattern=RegExp(m.pattern.source,w+"g")}for(var k=m.pattern||m,x=s.next,S=u;x!==t.tail&&!(d&&S>=d.reach);S+=x.value.length,x=x.next){var _=x.value;if(t.length>e.length)return;if(!(_ instanceof o)){var E,C=1;if(b){if(!(E=a(k,S,e,y))||E.index>=e.length)break;var A=E.index,T=E.index+E[0].length,j=S;for(j+=x.value.length;A>=j;)j+=(x=x.next).value.length;if(S=j-=x.value.length,x.value instanceof o)continue;for(var R=x;R!==t.tail&&(j<T||"string"==typeof R.value);R=R.next)C++,j+=R.value.length;C--,_=e.slice(S,j),E.index-=S}else if(!(E=a(k,0,_,y)))continue;A=E.index;var P=E[0],L=_.slice(0,A),N=_.slice(A+P.length),O=S+_.length;d&&O>d.reach&&(d.reach=O);var D=x.prev;if(L&&(D=l(t,D,L),S+=L.length),c(t,D,C),x=l(t,D,new o(p,h?r.tokenize(P,h):P,v,P)),N&&l(t,x,N),C>1){var I={cause:p+","+g,reach:O};i(e,t,n,x.prev,S,I),d&&I.reach>d.reach&&(d.reach=I.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function l(e,t,n){var r=t.next,o={value:n,prev:t,next:r};return t.next=o,r.prev=o,e.length++,o}function c(e,t,n){for(var r=t.next,o=0;o<n&&r!==e.tail;o++)r=r.next;t.next=r,r.prev=t,e.length-=o}return o.stringify=function e(t,n){if("string"==typeof t)return t;if(Array.isArray(t)){var o="";return t.forEach((function(t){o+=e(t,n)})),o}var a={type:t.type,content:e(t.content,n),tag:"span",classes:["token",t.type],attributes:{},language:n},i=t.alias;i&&(Array.isArray(i)?Array.prototype.push.apply(a.classes,i):a.classes.push(i)),r.hooks.run("wrap",a);var s="";for(var l in a.attributes)s+=" "+l+'="'+(a.attributes[l]||"").replace(/"/g,""")+'"';return"<"+a.tag+' class="'+a.classes.join(" ")+'"'+s+">"+a.content+"</"+a.tag+">"},r}();t.exports=n,n.default=n}},function(){return o||(0,r[y(r)[0]])((o={exports:{}}).exports,o),o.exports}),A=((e,t,n)=>(n=null!=e?p(v(e)):{},((e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let o of y(t))w.call(e,o)||o===n||f(e,o,{get:()=>t[o],enumerable:!(r=m(t,o))||r.enumerable});return e})(!t&&e&&e.__esModule?n:f(n,"default",{value:e,enumerable:!0}),e)))(C());A.languages.markup={comment:{pattern:/<!--(?:(?!<!--)[\s\S])*?-->/,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},A.languages.markup.tag.inside["attr-value"].inside.entity=A.languages.markup.entity,A.languages.markup.doctype.inside["internal-subset"].inside=A.languages.markup,A.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))})),Object.defineProperty(A.languages.markup.tag,"addInlined",{value:function(e,t){var n;(t=((n=((n={})["language-"+t]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:A.languages[t]},n.cdata=/^<!\[CDATA\[|\]\]>$/i,{"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:n}}))["language-"+t]={pattern:/[\s\S]+/,inside:A.languages[t]},{}))[e]={pattern:RegExp(/(<__[^>]*>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:n},A.languages.insertBefore("markup","cdata",t)}}),Object.defineProperty(A.languages.markup.tag,"addAttribute",{value:function(e,t){A.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+e+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[t,"language-"+t],inside:A.languages[t]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),A.languages.html=A.languages.markup,A.languages.mathml=A.languages.markup,A.languages.svg=A.languages.markup,A.languages.xml=A.languages.extend("markup",{}),A.languages.ssml=A.languages.xml,A.languages.atom=A.languages.xml,A.languages.rss=A.languages.xml,a=A,i={pattern:/\\[\\(){}[\]^$+*?|.]/,alias:"escape"},l="(?:[^\\\\-]|"+(s=/\\(?:x[\da-fA-F]{2}|u[\da-fA-F]{4}|u\{[\da-fA-F]+\}|0[0-7]{0,2}|[123][0-7]{2}|c[a-zA-Z]|.)/).source+")",l=RegExp(l+"-"+l),c={pattern:/(<|')[^<>']+(?=[>']$)/,lookbehind:!0,alias:"variable"},a.languages.regex={"char-class":{pattern:/((?:^|[^\\])(?:\\\\)*)\[(?:[^\\\]]|\\[\s\S])*\]/,lookbehind:!0,inside:{"char-class-negation":{pattern:/(^\[)\^/,lookbehind:!0,alias:"operator"},"char-class-punctuation":{pattern:/^\[|\]$/,alias:"punctuation"},range:{pattern:l,inside:{escape:s,"range-punctuation":{pattern:/-/,alias:"operator"}}},"special-escape":i,"char-set":{pattern:/\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},escape:s}},"special-escape":i,"char-set":{pattern:/\.|\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},backreference:[{pattern:/\\(?![123][0-7]{2})[1-9]/,alias:"keyword"},{pattern:/\\k<[^<>']+>/,alias:"keyword",inside:{"group-name":c}}],anchor:{pattern:/[$^]|\\[ABbGZz]/,alias:"function"},escape:s,group:[{pattern:/\((?:\?(?:<[^<>']+>|'[^<>']+'|[>:]|<?[=!]|[idmnsuxU]+(?:-[idmnsuxU]+)?:?))?/,alias:"punctuation",inside:{"group-name":c}},{pattern:/\)/,alias:"punctuation"}],quantifier:{pattern:/(?:[+*?]|\{\d+(?:,\d*)?\})[?+]?/,alias:"number"},alternation:{pattern:/\|/,alias:"keyword"}},A.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},A.languages.javascript=A.languages.extend("clike",{"class-name":[A.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|"+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),A.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,A.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp(/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)/.source+/\//.source+"(?:"+/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}/.source+"|"+/(?:\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.)*\])*\])*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}v[dgimyus]{0,7}/.source+")"+/(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/.source),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:A.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:A.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:A.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:A.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:A.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),A.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:A.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),A.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),A.languages.markup&&(A.languages.markup.tag.addInlined("script","javascript"),A.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),A.languages.js=A.languages.javascript,A.languages.actionscript=A.languages.extend("javascript",{keyword:/\b(?:as|break|case|catch|class|const|default|delete|do|dynamic|each|else|extends|final|finally|for|function|get|if|implements|import|in|include|instanceof|interface|internal|is|namespace|native|new|null|override|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|use|var|void|while|with)\b/,operator:/\+\+|--|(?:[+\-*\/%^]|&&?|\|\|?|<<?|>>?>?|[!=]=?)=?|[~?@]/}),A.languages.actionscript["class-name"].alias="function",delete A.languages.actionscript.parameter,delete A.languages.actionscript["literal-property"],A.languages.markup&&A.languages.insertBefore("actionscript","string",{xml:{pattern:/(^|[^.])<\/?\w+(?:\s+[^\s>\/=]+=("|')(?:\\[\s\S]|(?!\2)[^\\])*\2)*\s*\/?>/,lookbehind:!0,inside:A.languages.markup}}),function(e){var t=/#(?!\{).+/,n={pattern:/#\{[^}]+\}/,alias:"variable"};e.languages.coffeescript=e.languages.extend("javascript",{comment:t,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:n}}],keyword:/\b(?:and|break|by|catch|class|continue|debugger|delete|do|each|else|extend|extends|false|finally|for|if|in|instanceof|is|isnt|let|loop|namespace|new|no|not|null|of|off|on|or|own|return|super|switch|then|this|throw|true|try|typeof|undefined|unless|until|when|while|window|with|yes|yield)\b/,"class-member":{pattern:/@(?!\d)\w+/,alias:"variable"}}),e.languages.insertBefore("coffeescript","comment",{"multiline-comment":{pattern:/###[\s\S]+?###/,alias:"comment"},"block-regex":{pattern:/\/{3}[\s\S]*?\/{3}/,alias:"regex",inside:{comment:t,interpolation:n}}}),e.languages.insertBefore("coffeescript","string",{"inline-javascript":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,inside:{delimiter:{pattern:/^`|`$/,alias:"punctuation"},script:{pattern:/[\s\S]+/,alias:"language-javascript",inside:e.languages.javascript}}},"multiline-string":[{pattern:/'''[\s\S]*?'''/,greedy:!0,alias:"string"},{pattern:/"""[\s\S]*?"""/,greedy:!0,alias:"string",inside:{interpolation:n}}]}),e.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete e.languages.coffeescript["template-string"],e.languages.coffee=e.languages.coffeescript}(A),function(e){var t=e.languages.javadoclike={parameter:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*@(?:arg|arguments|param)\s+)\w+/m,lookbehind:!0},keyword:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*|\{)@[a-z][a-zA-Z-]+\b/m,lookbehind:!0},punctuation:/[{}]/};Object.defineProperty(t,"addSupport",{value:function(t,n){(t="string"==typeof t?[t]:t).forEach((function(t){var r=function(e){e.inside||(e.inside={}),e.inside.rest=n},o="doc-comment";if(a=e.languages[t]){var a,i=a[o];if((i=i||(a=e.languages.insertBefore(t,"comment",{"doc-comment":{pattern:/(^|[^\\])\/\*\*[^/][\s\S]*?(?:\*\/|$)/,lookbehind:!0,alias:"comment"}}))[o])instanceof RegExp&&(i=a[o]={pattern:i}),Array.isArray(i))for(var s=0,l=i.length;s<l;s++)i[s]instanceof RegExp&&(i[s]={pattern:i[s]}),r(i[s]);else r(i)}}))}}),t.addSupport(["java","javascript","php"],t)}(A),function(e){var t=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;(t=(e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:RegExp("@[\\w-](?:"+/[^;{\s"']|\s+(?!\s)/.source+"|"+t.source+")*?"+/(?:;|(?=\s*\{))/.source),inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+t.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+t.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+t.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:t,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css,e.languages.markup))&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(A),function(e){var t=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,n=(t=(e.languages.css.selector={pattern:e.languages.css.selector.pattern,lookbehind:!0,inside:t={"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,"pseudo-class":/:[-\w]+/,class:/\.[-\w]+/,id:/#[-\w]+/,attribute:{pattern:RegExp("\\[(?:[^[\\]\"']|"+t.source+")*\\]"),greedy:!0,inside:{punctuation:/^\[|\]$/,"case-sensitivity":{pattern:/(\s)[si]$/i,lookbehind:!0,alias:"keyword"},namespace:{pattern:/^(\s*)(?:(?!\s)[-*\w\xA0-\uFFFF])*\|(?!=)/,lookbehind:!0,inside:{punctuation:/\|$/}},"attr-name":{pattern:/^(\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+/,lookbehind:!0},"attr-value":[t,{pattern:/(=\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+(?=\s*$)/,lookbehind:!0}],operator:/[|~*^$]?=/}},"n-th":[{pattern:/(\(\s*)[+-]?\d*[\dn](?:\s*[+-]\s*\d+)?(?=\s*\))/,lookbehind:!0,inside:{number:/[\dn]+/,operator:/[+-]/}},{pattern:/(\(\s*)(?:even|odd)(?=\s*\))/i,lookbehind:!0}],combinator:/>|\+|~|\|\|/,punctuation:/[(),]/}},e.languages.css.atrule.inside["selector-function-argument"].inside=t,e.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*/i,lookbehind:!0}}),{pattern:/(\b\d+)(?:%|[a-z]+(?![\w-]))/,lookbehind:!0}),{pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0});e.languages.insertBefore("css","function",{operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:{pattern:/\B#[\da-f]{3,8}\b/i,alias:"color"},color:[{pattern:/(^|[^\w-])(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|RebeccaPurple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)(?![\w-])/i,lookbehind:!0},{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:t,number:n,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:t,number:n})}(A),function(e){var t=/[*&][^\s[\]{},]+/,n=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,r="(?:"+n.source+"(?:[ \t]+"+t.source+")?|"+t.source+"(?:[ \t]+"+n.source+")?)",o=/(?:[^\s\x00-\x08\x0e-\x1f!"#%&'*,\-:>?@[\]`{|}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]|[?:-]<PLAIN>)(?:[ \t]*(?:(?![#:])<PLAIN>|:<PLAIN>))*/.source.replace(/<PLAIN>/g,(function(){return/[^\s\x00-\x08\x0e-\x1f,[\]{}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]/.source})),a=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;function i(e,t){t=(t||"").replace(/m/g,"")+"m";var n=/([:\-,[{]\s*(?:\s<<prop>>[ \t]+)?)(?:<<value>>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<<prop>>/g,(function(){return r})).replace(/<<value>>/g,(function(){return e}));return RegExp(n,t)}e.languages.yaml={scalar:{pattern:RegExp(/([\-:]\s*(?:\s<<prop>>[ \t]+)?[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)\S[^\r\n]*(?:\2[^\r\n]+)*)/.source.replace(/<<prop>>/g,(function(){return r}))),lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:RegExp(/((?:^|[:\-,[{\r\n?])[ \t]*(?:<<prop>>[ \t]+)?)<<key>>(?=\s*:\s)/.source.replace(/<<prop>>/g,(function(){return r})).replace(/<<key>>/g,(function(){return"(?:"+o+"|"+a+")"}))),lookbehind:!0,greedy:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:i(/\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?))?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?/.source),lookbehind:!0,alias:"number"},boolean:{pattern:i(/false|true/.source,"i"),lookbehind:!0,alias:"important"},null:{pattern:i(/null|~/.source,"i"),lookbehind:!0,alias:"important"},string:{pattern:i(a),lookbehind:!0,greedy:!0},number:{pattern:i(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source,"i"),lookbehind:!0},tag:n,important:t,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(A),function(e){var t=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function n(e){return e=e.replace(/<inner>/g,(function(){return t})),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var r=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,o=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,(function(){return r})),a=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source,i=(e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{"front-matter-block":{pattern:/(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,lookbehind:!0,greedy:!0,inside:{punctuation:/^---|---$/,"front-matter":{pattern:/\S+(?:\s+\S+)*/,alias:["yaml","language-yaml"],inside:e.languages.yaml}}},blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+o+a+"(?:"+o+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+o+a+")(?:"+o+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(r),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+o+")"+a+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+o+"$"),inside:{"table-header":{pattern:RegExp(r),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,lookbehind:!0,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:n(/\b__(?:(?!_)<inner>|_(?:(?!_)<inner>)+_)+__\b|\*\*(?:(?!\*)<inner>|\*(?:(?!\*)<inner>)+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/\b_(?:(?!_)<inner>|__(?:(?!_)<inner>)+__)+_\b|\*(?:(?!\*)<inner>|\*\*(?:(?!\*)<inner>)+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~)<inner>)+\2/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},"code-snippet":{pattern:/(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,lookbehind:!0,greedy:!0,alias:["code","keyword"]},url:{pattern:n(/!?\[(?:(?!\])<inner>)+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\])<inner>)+\])/.source),lookbehind:!0,greedy:!0,inside:{operator:/^!/,content:{pattern:/(^\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},variable:{pattern:/(^\][ \t]?\[)[^\]]+(?=\]$)/,lookbehind:!0},url:{pattern:/(^\]\()[^\s)]+/,lookbehind:!0},string:{pattern:/(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,lookbehind:!0}}}}),["url","bold","italic","strike"].forEach((function(t){["url","bold","italic","strike","code-snippet"].forEach((function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var n=0,r=t.length;n<r;n++){var o,a=t[n];"code"!==a.type?e(a.content):(o=a.content[1],a=a.content[3],o&&a&&"code-language"===o.type&&"code-block"===a.type&&"string"==typeof o.content&&(o=o.content.replace(/\b#/g,"sharp").replace(/\b\+\+/g,"pp"),o="language-"+(o=(/[a-z][\w-]*/i.exec(o)||[""])[0].toLowerCase()),a.alias?"string"==typeof a.alias?a.alias=[a.alias,o]:a.alias.push(o):a.alias=[o]))}}(e.tokens)})),e.hooks.add("wrap",(function(t){if("code-block"===t.type){for(var n="",r=0,o=t.classes.length;r<o;r++){var a=t.classes[r];if(a=/language-(.+)/.exec(a)){n=a[1];break}}var c,u=e.languages[n];u?t.content=e.highlight(t.content.replace(i,"").replace(/&(\w{1,8}|#x?[\da-f]{1,8});/gi,(function(e,t){var n;return"#"===(t=t.toLowerCase())[0]?(n="x"===t[1]?parseInt(t.slice(2),16):Number(t.slice(1)),l(n)):s[t]||e})),u,n):n&&"none"!==n&&e.plugins.autoloader&&(c="md-"+(new Date).valueOf()+"-"+Math.floor(1e16*Math.random()),t.attributes.id=c,e.plugins.autoloader.loadLanguages(n,(function(){var t=document.getElementById(c);t&&(t.innerHTML=e.highlight(t.textContent,e.languages[n],n))})))}})),RegExp(e.languages.markup.tag.pattern.source,"gi")),s={amp:"&",lt:"<",gt:">",quot:'"'},l=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(A),A.languages.graphql={comment:/#.*/,description:{pattern:/(?:"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*")(?=\s*[a-z_])/i,greedy:!0,alias:"string",inside:{"language-markdown":{pattern:/(^"(?:"")?)(?!\1)[\s\S]+(?=\1$)/,lookbehind:!0,inside:A.languages.markdown}}},string:{pattern:/"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*"/,greedy:!0},number:/(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,boolean:/\b(?:false|true)\b/,variable:/\$[a-z_]\w*/i,directive:{pattern:/@[a-z_]\w*/i,alias:"function"},"attr-name":{pattern:/\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,greedy:!0},"atom-input":{pattern:/\b[A-Z]\w*Input\b/,alias:"class-name"},scalar:/\b(?:Boolean|Float|ID|Int|String)\b/,constant:/\b[A-Z][A-Z_\d]*\b/,"class-name":{pattern:/(\b(?:enum|implements|interface|on|scalar|type|union)\s+|&\s*|:\s*|\[)[A-Z_]\w*/,lookbehind:!0},fragment:{pattern:/(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-mutation":{pattern:/(\bmutation\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-query":{pattern:/(\bquery\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},keyword:/\b(?:directive|enum|extend|fragment|implements|input|interface|mutation|on|query|repeatable|scalar|schema|subscription|type|union)\b/,operator:/[!=|&]|\.{3}/,"property-query":/\w+(?=\s*\()/,object:/\w+(?=\s*\{)/,punctuation:/[!(){}\[\]:=,]/,property:/\w+/},A.hooks.add("after-tokenize",(function(e){if("graphql"===e.language)for(var t=e.tokens.filter((function(e){return"string"!=typeof e&&"comment"!==e.type&&"scalar"!==e.type})),n=0;n<t.length;){var r=t[n++];if("keyword"===r.type&&"mutation"===r.content){var o=[];if(d(["definition-mutation","punctuation"])&&"("===u(1).content){n+=2;var a=p(/^\($/,/^\)$/);if(-1===a)continue;for(;n<a;n++){var i=u(0);"variable"===i.type&&(f(i,"variable-input"),o.push(i.content))}n=a+1}if(d(["punctuation","property-query"])&&"{"===u(0).content&&(n++,f(u(0),"property-mutation"),0<o.length)){var s=p(/^\{$/,/^\}$/);if(-1!==s)for(var l=n;l<s;l++){var c=t[l];"variable"===c.type&&0<=o.indexOf(c.content)&&f(c,"variable-input")}}}}function u(e){return t[n+e]}function d(e,t){t=t||0;for(var n=0;n<e.length;n++){var r=u(n+t);if(!r||r.type!==e[n])return}return 1}function p(e,r){for(var o=1,a=n;a<t.length;a++){var i=t[a],s=i.content;if("punctuation"===i.type&&"string"==typeof s)if(e.test(s))o++;else if(r.test(s)&&0==--o)return a}return-1}function f(e,t){var n=e.alias;n?Array.isArray(n)||(e.alias=n=[n]):e.alias=n=[],n.push(t)}})),A.languages.sql={comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|(?:--|\/\/|#).*)/,lookbehind:!0},variable:[{pattern:/@(["'`])(?:\\[\s\S]|(?!\1)[^\\])+\1/,greedy:!0},/@[\w.$]+/],string:{pattern:/(^|[^@\\])("|')(?:\\[\s\S]|(?!\2)[^\\]|\2\2)*\2/,greedy:!0,lookbehind:!0},identifier:{pattern:/(^|[^@\\])`(?:\\[\s\S]|[^`\\]|``)*`/,greedy:!0,lookbehind:!0,inside:{punctuation:/^`|`$/}},function:/\b(?:AVG|COUNT|FIRST|FORMAT|LAST|LCASE|LEN|MAX|MID|MIN|MOD|NOW|ROUND|SUM|UCASE)(?=\s*\()/i,keyword:/\b(?:ACTION|ADD|AFTER|ALGORITHM|ALL|ALTER|ANALYZE|ANY|APPLY|AS|ASC|AUTHORIZATION|AUTO_INCREMENT|BACKUP|BDB|BEGIN|BERKELEYDB|BIGINT|BINARY|BIT|BLOB|BOOL|BOOLEAN|BREAK|BROWSE|BTREE|BULK|BY|CALL|CASCADED?|CASE|CHAIN|CHAR(?:ACTER|SET)?|CHECK(?:POINT)?|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMNS?|COMMENT|COMMIT(?:TED)?|COMPUTE|CONNECT|CONSISTENT|CONSTRAINT|CONTAINS(?:TABLE)?|CONTINUE|CONVERT|CREATE|CROSS|CURRENT(?:_DATE|_TIME|_TIMESTAMP|_USER)?|CURSOR|CYCLE|DATA(?:BASES?)?|DATE(?:TIME)?|DAY|DBCC|DEALLOCATE|DEC|DECIMAL|DECLARE|DEFAULT|DEFINER|DELAYED|DELETE|DELIMITERS?|DENY|DESC|DESCRIBE|DETERMINISTIC|DISABLE|DISCARD|DISK|DISTINCT|DISTINCTROW|DISTRIBUTED|DO|DOUBLE|DROP|DUMMY|DUMP(?:FILE)?|DUPLICATE|ELSE(?:IF)?|ENABLE|ENCLOSED|END|ENGINE|ENUM|ERRLVL|ERRORS|ESCAPED?|EXCEPT|EXEC(?:UTE)?|EXISTS|EXIT|EXPLAIN|EXTENDED|FETCH|FIELDS|FILE|FILLFACTOR|FIRST|FIXED|FLOAT|FOLLOWING|FOR(?: EACH ROW)?|FORCE|FOREIGN|FREETEXT(?:TABLE)?|FROM|FULL|FUNCTION|GEOMETRY(?:COLLECTION)?|GLOBAL|GOTO|GRANT|GROUP|HANDLER|HASH|HAVING|HOLDLOCK|HOUR|IDENTITY(?:COL|_INSERT)?|IF|IGNORE|IMPORT|INDEX|INFILE|INNER|INNODB|INOUT|INSERT|INT|INTEGER|INTERSECT|INTERVAL|INTO|INVOKER|ISOLATION|ITERATE|JOIN|KEYS?|KILL|LANGUAGE|LAST|LEAVE|LEFT|LEVEL|LIMIT|LINENO|LINES|LINESTRING|LOAD|LOCAL|LOCK|LONG(?:BLOB|TEXT)|LOOP|MATCH(?:ED)?|MEDIUM(?:BLOB|INT|TEXT)|MERGE|MIDDLEINT|MINUTE|MODE|MODIFIES|MODIFY|MONTH|MULTI(?:LINESTRING|POINT|POLYGON)|NATIONAL|NATURAL|NCHAR|NEXT|NO|NONCLUSTERED|NULLIF|NUMERIC|OFF?|OFFSETS?|ON|OPEN(?:DATASOURCE|QUERY|ROWSET)?|OPTIMIZE|OPTION(?:ALLY)?|ORDER|OUT(?:ER|FILE)?|OVER|PARTIAL|PARTITION|PERCENT|PIVOT|PLAN|POINT|POLYGON|PRECEDING|PRECISION|PREPARE|PREV|PRIMARY|PRINT|PRIVILEGES|PROC(?:EDURE)?|PUBLIC|PURGE|QUICK|RAISERROR|READS?|REAL|RECONFIGURE|REFERENCES|RELEASE|RENAME|REPEAT(?:ABLE)?|REPLACE|REPLICATION|REQUIRE|RESIGNAL|RESTORE|RESTRICT|RETURN(?:ING|S)?|REVOKE|RIGHT|ROLLBACK|ROUTINE|ROW(?:COUNT|GUIDCOL|S)?|RTREE|RULE|SAVE(?:POINT)?|SCHEMA|SECOND|SELECT|SERIAL(?:IZABLE)?|SESSION(?:_USER)?|SET(?:USER)?|SHARE|SHOW|SHUTDOWN|SIMPLE|SMALLINT|SNAPSHOT|SOME|SONAME|SQL|START(?:ING)?|STATISTICS|STATUS|STRIPED|SYSTEM_USER|TABLES?|TABLESPACE|TEMP(?:ORARY|TABLE)?|TERMINATED|TEXT(?:SIZE)?|THEN|TIME(?:STAMP)?|TINY(?:BLOB|INT|TEXT)|TOP?|TRAN(?:SACTIONS?)?|TRIGGER|TRUNCATE|TSEQUAL|TYPES?|UNBOUNDED|UNCOMMITTED|UNDEFINED|UNION|UNIQUE|UNLOCK|UNPIVOT|UNSIGNED|UPDATE(?:TEXT)?|USAGE|USE|USER|USING|VALUES?|VAR(?:BINARY|CHAR|CHARACTER|YING)|VIEW|WAITFOR|WARNINGS|WHEN|WHERE|WHILE|WITH(?: ROLLUP|IN)?|WORK|WRITE(?:TEXT)?|YEAR)\b/i,boolean:/\b(?:FALSE|NULL|TRUE)\b/i,number:/\b0x[\da-f]+\b|\b\d+(?:\.\d*)?|\B\.\d+\b/i,operator:/[-+*\/=%^~]|&&?|\|\|?|!=?|<(?:=>?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/},function(e){var t=e.languages.javascript["template-string"],n=t.pattern.source,r=t.inside.interpolation,o=r.inside["interpolation-punctuation"],a=r.pattern.source;function i(t,r){if(e.languages[t])return{pattern:RegExp("((?:"+r+")\\s*)"+n),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:t}}}}function s(t,n,r){return t={code:t,grammar:n,language:r},e.hooks.run("before-tokenize",t),t.tokens=e.tokenize(t.code,t.grammar),e.hooks.run("after-tokenize",t),t.tokens}function l(t,n,i){var l=e.tokenize(t,{interpolation:{pattern:RegExp(a),lookbehind:!0}}),c=0,u={},d=(l=s(l.map((function(e){if("string"==typeof e)return e;var n,r;for(e=e.content;-1!==t.indexOf((r=c++,n="___"+i.toUpperCase()+"_"+r+"___")););return u[n]=e,n})).join(""),n,i),Object.keys(u));return c=0,function t(n){for(var a=0;a<n.length;a++){if(c>=d.length)return;var i,l,p,f,g,m,h,y=n[a];"string"==typeof y||"string"==typeof y.content?(i=d[c],-1!==(h=(m="string"==typeof y?y:y.content).indexOf(i))&&(++c,l=m.substring(0,h),g=u[i],p=void 0,(f={})["interpolation-punctuation"]=o,3===(f=e.tokenize(g,f)).length&&((p=[1,1]).push.apply(p,s(f[1],e.languages.javascript,"javascript")),f.splice.apply(f,p)),p=new e.Token("interpolation",f,r.alias,g),f=m.substring(h+i.length),g=[],l&&g.push(l),g.push(p),f&&(t(m=[f]),g.push.apply(g,m)),"string"==typeof y?(n.splice.apply(n,[a,1].concat(g)),a+=g.length-1):y.content=g)):(h=y.content,Array.isArray(h)?t(h):t([h]))}}(l),new e.Token(i,l,"language-"+i,t)}e.languages.javascript["template-string"]=[i("css",/\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/.source),i("html",/\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),i("svg",/\bsvg/.source),i("markdown",/\b(?:markdown|md)/.source),i("graphql",/\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),i("sql",/\bsql/.source),t].filter(Boolean);var c={javascript:!0,js:!0,typescript:!0,ts:!0,jsx:!0,tsx:!0};function u(e){return"string"==typeof e?e:Array.isArray(e)?e.map(u).join(""):u(e.content)}e.hooks.add("after-tokenize",(function(t){t.language in c&&function t(n){for(var r=0,o=n.length;r<o;r++){var a,i,s,c=n[r];"string"!=typeof c&&(a=c.content,Array.isArray(a)?"template-string"===c.type?(c=a[1],3===a.length&&"string"!=typeof c&&"embedded-code"===c.type&&(i=u(c),c=c.alias,c=Array.isArray(c)?c[0]:c,s=e.languages[c])&&(a[1]=l(i,s,c))):t(a):"string"!=typeof a&&t([a]))}}(t.tokens)}))}(A),function(e){e.languages.typescript=e.languages.extend("javascript",{"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|type)\s+)(?!keyof\b)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?:\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete e.languages.typescript.parameter,delete e.languages.typescript["literal-property"];var t=e.languages.extend("typescript",{});delete t["class-name"],e.languages.typescript["class-name"].inside=t,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:t}}}}),e.languages.ts=e.languages.typescript}(A),function(e){var t=e.languages.javascript,n=/\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})+\}/.source,r="(@(?:arg|argument|param|property)\\s+(?:"+n+"\\s+)?)";e.languages.jsdoc=e.languages.extend("javadoclike",{parameter:{pattern:RegExp(r+/(?:(?!\s)[$\w\xA0-\uFFFF.])+(?=\s|$)/.source),lookbehind:!0,inside:{punctuation:/\./}}}),e.languages.insertBefore("jsdoc","keyword",{"optional-parameter":{pattern:RegExp(r+/\[(?:(?!\s)[$\w\xA0-\uFFFF.])+(?:=[^[\]]+)?\](?=\s|$)/.source),lookbehind:!0,inside:{parameter:{pattern:/(^\[)[$\w\xA0-\uFFFF\.]+/,lookbehind:!0,inside:{punctuation:/\./}},code:{pattern:/(=)[\s\S]*(?=\]$)/,lookbehind:!0,inside:t,alias:"language-javascript"},punctuation:/[=[\]]/}},"class-name":[{pattern:RegExp(/(@(?:augments|class|extends|interface|memberof!?|template|this|typedef)\s+(?:<TYPE>\s+)?)[A-Z]\w*(?:\.[A-Z]\w*)*/.source.replace(/<TYPE>/g,(function(){return n}))),lookbehind:!0,inside:{punctuation:/\./}},{pattern:RegExp("(@[a-z]+\\s+)"+n),lookbehind:!0,inside:{string:t.string,number:t.number,boolean:t.boolean,keyword:e.languages.typescript.keyword,operator:/=>|\.\.\.|[&|?:*]/,punctuation:/[.,;=<>{}()[\]]/}}],example:{pattern:/(@example\s+(?!\s))(?:[^@\s]|\s+(?!\s))+?(?=\s*(?:\*\s*)?(?:@\w|\*\/))/,lookbehind:!0,inside:{code:{pattern:/^([\t ]*(?:\*\s*)?)\S.*$/m,lookbehind:!0,inside:t,alias:"language-javascript"}}}}),e.languages.javadoclike.addSupport("javascript",e.languages.jsdoc)}(A),function(e){e.languages.flow=e.languages.extend("javascript",{}),e.languages.insertBefore("flow","keyword",{type:[{pattern:/\b(?:[Bb]oolean|Function|[Nn]umber|[Ss]tring|[Ss]ymbol|any|mixed|null|void)\b/,alias:"class-name"}]}),e.languages.flow["function-variable"].pattern=/(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=\s*(?:function\b|(?:\([^()]*\)(?:\s*:\s*\w+)?|(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/i,delete e.languages.flow.parameter,e.languages.insertBefore("flow","operator",{"flow-punctuation":{pattern:/\{\||\|\}/,alias:"punctuation"}}),Array.isArray(e.languages.flow.keyword)||(e.languages.flow.keyword=[e.languages.flow.keyword]),e.languages.flow.keyword.unshift({pattern:/(^|[^$]\b)(?:Class|declare|opaque|type)\b(?!\$)/,lookbehind:!0},{pattern:/(^|[^$]\B)\$(?:Diff|Enum|Exact|Keys|ObjMap|PropertyType|Record|Shape|Subtype|Supertype|await)\b(?!\$)/,lookbehind:!0})}(A),A.languages.n4js=A.languages.extend("javascript",{keyword:/\b(?:Array|any|boolean|break|case|catch|class|const|constructor|continue|debugger|declare|default|delete|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|module|new|null|number|package|private|protected|public|return|set|static|string|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/}),A.languages.insertBefore("n4js","constant",{annotation:{pattern:/@+\w+/,alias:"operator"}}),A.languages.n4jsd=A.languages.n4js,function(e){function t(e,t){return RegExp(e.replace(/<ID>/g,(function(){return/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/.source})),t)}e.languages.insertBefore("javascript","function-variable",{"method-variable":{pattern:RegExp("(\\.\\s*)"+e.languages.javascript["function-variable"].pattern.source),lookbehind:!0,alias:["function-variable","method","function","property-access"]}}),e.languages.insertBefore("javascript","function",{method:{pattern:RegExp("(\\.\\s*)"+e.languages.javascript.function.source),lookbehind:!0,alias:["function","property-access"]}}),e.languages.insertBefore("javascript","constant",{"known-class-name":[{pattern:/\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,alias:"class-name"},{pattern:/\b(?:[A-Z]\w*)Error\b/,alias:"class-name"}]}),e.languages.insertBefore("javascript","keyword",{imports:{pattern:t(/(\bimport\b\s*)(?:<ID>(?:\s*,\s*(?:\*\s*as\s+<ID>|\{[^{}]*\}))?|\*\s*as\s+<ID>|\{[^{}]*\})(?=\s*\bfrom\b)/.source),lookbehind:!0,inside:e.languages.javascript},exports:{pattern:t(/(\bexport\b\s*)(?:\*(?:\s*as\s+<ID>)?(?=\s*\bfrom\b)|\{[^{}]*\})/.source),lookbehind:!0,inside:e.languages.javascript}}),e.languages.javascript.keyword.unshift({pattern:/\b(?:as|default|export|from|import)\b/,alias:"module"},{pattern:/\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,alias:"control-flow"},{pattern:/\bnull\b/,alias:["null","nil"]},{pattern:/\bundefined\b/,alias:"nil"}),e.languages.insertBefore("javascript","operator",{spread:{pattern:/\.{3}/,alias:"operator"},arrow:{pattern:/=>/,alias:"operator"}}),e.languages.insertBefore("javascript","punctuation",{"property-access":{pattern:t(/(\.\s*)#?<ID>/.source),lookbehind:!0},"maybe-class-name":{pattern:/(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/,lookbehind:!0},dom:{pattern:/\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,alias:"variable"},console:{pattern:/\bconsole(?=\s*\.)/,alias:"class-name"}});for(var n=["function","function-variable","method","method-variable","property-access"],r=0;r<n.length;r++){var o=n[r],a=e.languages.javascript[o];o=(a="RegExp"===e.util.type(a)?e.languages.javascript[o]={pattern:a}:a).inside||{};(a.inside=o)["maybe-class-name"]=/^[A-Z][\s\S]*/}}(A),function(e){var t=e.util.clone(e.languages.javascript),n=/(?:\s|\/\/.*(?!.)|\/\*(?:[^*]|\*(?!\/))\*\/)/.source,r=/(?:\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])*\})/.source,o=/(?:\{<S>*\.{3}(?:[^{}]|<BRACES>)*\})/.source;function a(e,t){return e=e.replace(/<S>/g,(function(){return n})).replace(/<BRACES>/g,(function(){return r})).replace(/<SPREAD>/g,(function(){return o})),RegExp(e,t)}function i(t){for(var n=[],r=0;r<t.length;r++){var o=t[r],a=!1;"string"!=typeof o&&("tag"===o.type&&o.content[0]&&"tag"===o.content[0].type?"</"===o.content[0].content[0].content?0<n.length&&n[n.length-1].tagName===s(o.content[0].content[1])&&n.pop():"/>"!==o.content[o.content.length-1].content&&n.push({tagName:s(o.content[0].content[1]),openedBraces:0}):0<n.length&&"punctuation"===o.type&&"{"===o.content?n[n.length-1].openedBraces++:0<n.length&&0<n[n.length-1].openedBraces&&"punctuation"===o.type&&"}"===o.content?n[n.length-1].openedBraces--:a=!0),(a||"string"==typeof o)&&0<n.length&&0===n[n.length-1].openedBraces&&(a=s(o),r<t.length-1&&("string"==typeof t[r+1]||"plain-text"===t[r+1].type)&&(a+=s(t[r+1]),t.splice(r+1,1)),0<r&&("string"==typeof t[r-1]||"plain-text"===t[r-1].type)&&(a=s(t[r-1])+a,t.splice(r-1,1),r--),t[r]=new e.Token("plain-text",a,null,a)),o.content&&"string"!=typeof o.content&&i(o.content)}}o=a(o).source,e.languages.jsx=e.languages.extend("markup",t),e.languages.jsx.tag.pattern=a(/<\/?(?:[\w.:-]+(?:<S>+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|<BRACES>))?|<SPREAD>))*<S>*\/?)?>/.source),e.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,e.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,e.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,e.languages.jsx.tag.inside.comment=t.comment,e.languages.insertBefore("inside","attr-name",{spread:{pattern:a(/<SPREAD>/.source),inside:e.languages.jsx}},e.languages.jsx.tag),e.languages.insertBefore("inside","special-attr",{script:{pattern:a(/=<BRACES>/.source),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:e.languages.jsx}}},e.languages.jsx.tag);var s=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(s).join(""):""};e.hooks.add("after-tokenize",(function(e){"jsx"!==e.language&&"tsx"!==e.language||i(e.tokens)}))}(A),function(e){var t=e.util.clone(e.languages.typescript);(t=(e.languages.tsx=e.languages.extend("jsx",t),delete e.languages.tsx.parameter,delete e.languages.tsx["literal-property"],e.languages.tsx.tag)).pattern=RegExp(/(^|[^\w$]|(?=<\/))/.source+"(?:"+t.pattern.source+")",t.pattern.flags),t.lookbehind=!0}(A),A.languages.swift={comment:{pattern:/(^|[^\\:])(?:\/\/.*|\/\*(?:[^/*]|\/(?!\*)|\*(?!\/)|\/\*(?:[^*]|\*(?!\/))*\*\/)*\*\/)/,lookbehind:!0,greedy:!0},"string-literal":[{pattern:RegExp(/(^|[^"#])/.source+"(?:"+/"(?:\\(?:\((?:[^()]|\([^()]*\))*\)|\r\n|[^(])|[^\\\r\n"])*"/.source+"|"+/"""(?:\\(?:\((?:[^()]|\([^()]*\))*\)|[^(])|[^\\"]|"(?!""))*"""/.source+")"+/(?!["#])/.source),lookbehind:!0,greedy:!0,inside:{interpolation:{pattern:/(\\\()(?:[^()]|\([^()]*\))*(?=\))/,lookbehind:!0,inside:null},"interpolation-punctuation":{pattern:/^\)|\\\($/,alias:"punctuation"},punctuation:/\\(?=[\r\n])/,string:/[\s\S]+/}},{pattern:RegExp(/(^|[^"#])(#+)/.source+"(?:"+/"(?:\\(?:#+\((?:[^()]|\([^()]*\))*\)|\r\n|[^#])|[^\\\r\n])*?"/.source+"|"+/"""(?:\\(?:#+\((?:[^()]|\([^()]*\))*\)|[^#])|[^\\])*?"""/.source+")\\2"),lookbehind:!0,greedy:!0,inside:{interpolation:{pattern:/(\\#+\()(?:[^()]|\([^()]*\))*(?=\))/,lookbehind:!0,inside:null},"interpolation-punctuation":{pattern:/^\)|\\#+\($/,alias:"punctuation"},string:/[\s\S]+/}}],directive:{pattern:RegExp(/#/.source+"(?:"+/(?:elseif|if)\b/.source+"(?:[ \t]*"+/(?:![ \t]*)?(?:\b\w+\b(?:[ \t]*\((?:[^()]|\([^()]*\))*\))?|\((?:[^()]|\([^()]*\))*\))(?:[ \t]*(?:&&|\|\|))?/.source+")+|"+/(?:else|endif)\b/.source+")"),alias:"property",inside:{"directive-name":/^#\w+/,boolean:/\b(?:false|true)\b/,number:/\b\d+(?:\.\d+)*\b/,operator:/!|&&|\|\||[<>]=?/,punctuation:/[(),]/}},literal:{pattern:/#(?:colorLiteral|column|dsohandle|file(?:ID|Literal|Path)?|function|imageLiteral|line)\b/,alias:"constant"},"other-directive":{pattern:/#\w+\b/,alias:"property"},attribute:{pattern:/@\w+/,alias:"atrule"},"function-definition":{pattern:/(\bfunc\s+)\w+/,lookbehind:!0,alias:"function"},label:{pattern:/\b(break|continue)\s+\w+|\b[a-zA-Z_]\w*(?=\s*:\s*(?:for|repeat|while)\b)/,lookbehind:!0,alias:"important"},keyword:/\b(?:Any|Protocol|Self|Type|actor|as|assignment|associatedtype|associativity|async|await|break|case|catch|class|continue|convenience|default|defer|deinit|didSet|do|dynamic|else|enum|extension|fallthrough|fileprivate|final|for|func|get|guard|higherThan|if|import|in|indirect|infix|init|inout|internal|is|isolated|lazy|left|let|lowerThan|mutating|none|nonisolated|nonmutating|open|operator|optional|override|postfix|precedencegroup|prefix|private|protocol|public|repeat|required|rethrows|return|right|safe|self|set|some|static|struct|subscript|super|switch|throw|throws|try|typealias|unowned|unsafe|var|weak|where|while|willSet)\b/,boolean:/\b(?:false|true)\b/,nil:{pattern:/\bnil\b/,alias:"constant"},"short-argument":/\$\d+\b/,omit:{pattern:/\b_\b/,alias:"keyword"},number:/\b(?:[\d_]+(?:\.[\de_]+)?|0x[a-f0-9_]+(?:\.[a-f0-9p_]+)?|0b[01_]+|0o[0-7_]+)\b/i,"class-name":/\b[A-Z](?:[A-Z_\d]*[a-z]\w*)?\b/,function:/\b[a-z_]\w*(?=\s*\()/i,constant:/\b(?:[A-Z_]{2,}|k[A-Z][A-Za-z_]+)\b/,operator:/[-+*/%=!<>&|^~?]+|\.[.\-+*/%=!<>&|^~?]+/,punctuation:/[{}[\]();,.:\\]/},A.languages.swift["string-literal"].forEach((function(e){e.inside.interpolation.inside=A.languages.swift})),function(e){e.languages.kotlin=e.languages.extend("clike",{keyword:{pattern:/(^|[^.])\b(?:abstract|actual|annotation|as|break|by|catch|class|companion|const|constructor|continue|crossinline|data|do|dynamic|else|enum|expect|external|final|finally|for|fun|get|if|import|in|infix|init|inline|inner|interface|internal|is|lateinit|noinline|null|object|open|operator|out|override|package|private|protected|public|reified|return|sealed|set|super|suspend|tailrec|this|throw|to|try|typealias|val|var|vararg|when|where|while)\b/,lookbehind:!0},function:[{pattern:/(?:`[^\r\n`]+`|\b\w+)(?=\s*\()/,greedy:!0},{pattern:/(\.)(?:`[^\r\n`]+`|\w+)(?=\s*\{)/,lookbehind:!0,greedy:!0}],number:/\b(?:0[xX][\da-fA-F]+(?:_[\da-fA-F]+)*|0[bB][01]+(?:_[01]+)*|\d+(?:_\d+)*(?:\.\d+(?:_\d+)*)?(?:[eE][+-]?\d+(?:_\d+)*)?[fFL]?)\b/,operator:/\+[+=]?|-[-=>]?|==?=?|!(?:!|==?)?|[\/*%<>]=?|[?:]:?|\.\.|&&|\|\||\b(?:and|inv|or|shl|shr|ushr|xor)\b/}),delete e.languages.kotlin["class-name"];var t={"interpolation-punctuation":{pattern:/^\$\{?|\}$/,alias:"punctuation"},expression:{pattern:/[\s\S]+/,inside:e.languages.kotlin}};e.languages.insertBefore("kotlin","string",{"string-literal":[{pattern:/"""(?:[^$]|\$(?:(?!\{)|\{[^{}]*\}))*?"""/,alias:"multiline",inside:{interpolation:{pattern:/\$(?:[a-z_]\w*|\{[^{}]*\})/i,inside:t},string:/[\s\S]+/}},{pattern:/"(?:[^"\\\r\n$]|\\.|\$(?:(?!\{)|\{[^{}]*\}))*"/,alias:"singleline",inside:{interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$(?:[a-z_]\w*|\{[^{}]*\})/i,lookbehind:!0,inside:t},string:/[\s\S]+/}}],char:{pattern:/'(?:[^'\\\r\n]|\\(?:.|u[a-fA-F0-9]{0,4}))'/,greedy:!0}}),delete e.languages.kotlin.string,e.languages.insertBefore("kotlin","keyword",{annotation:{pattern:/\B@(?:\w+:)?(?:[A-Z]\w*|\[[^\]]+\])/,alias:"builtin"}}),e.languages.insertBefore("kotlin","function",{label:{pattern:/\b\w+@|@\w+\b/,alias:"symbol"}}),e.languages.kt=e.languages.kotlin,e.languages.kts=e.languages.kotlin}(A),A.languages.c=A.languages.extend("clike",{comment:{pattern:/\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},"class-name":{pattern:/(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,lookbehind:!0},keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/,function:/\b[a-z_]\w*(?=\s*\()/i,number:/(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/}),A.languages.insertBefore("c","string",{char:{pattern:/'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,greedy:!0}}),A.languages.insertBefore("c","string",{macro:{pattern:/(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,greedy:!0,alias:"property",inside:{string:[{pattern:/^(#\s*include\s*)<[^>]+>/,lookbehind:!0},A.languages.c.string],char:A.languages.c.char,comment:A.languages.c.comment,"macro-name":[{pattern:/(^#\s*define\s+)\w+\b(?!\()/i,lookbehind:!0},{pattern:/(^#\s*define\s+)\w+\b(?=\()/i,lookbehind:!0,alias:"function"}],directive:{pattern:/^(#\s*)[a-z]+/,lookbehind:!0,alias:"keyword"},"directive-hash":/^#/,punctuation:/##|\\(?=[\r\n])/,expression:{pattern:/\S[\s\S]*/,inside:A.languages.c}}}}),A.languages.insertBefore("c","function",{constant:/\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/}),delete A.languages.c.boolean,A.languages.objectivec=A.languages.extend("c",{string:{pattern:/@?"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},keyword:/\b(?:asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|in|inline|int|long|register|return|self|short|signed|sizeof|static|struct|super|switch|typedef|typeof|union|unsigned|void|volatile|while)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,operator:/-[->]?|\+\+?|!=?|<<?=?|>>?=?|==?|&&?|\|\|?|[~^%?*\/@]/}),delete A.languages.objectivec["class-name"],A.languages.objc=A.languages.objectivec,A.languages.reason=A.languages.extend("clike",{string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/,greedy:!0},"class-name":/\b[A-Z]\w*/,keyword:/\b(?:and|as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|method|module|mutable|new|nonrec|object|of|open|or|private|rec|sig|struct|switch|then|to|try|type|val|virtual|when|while|with)\b/,operator:/\.{3}|:[:=]|\|>|->|=(?:==?|>)?|<=?|>=?|[|^?'#!~`]|[+\-*\/]\.?|\b(?:asr|land|lor|lsl|lsr|lxor|mod)\b/}),A.languages.insertBefore("reason","class-name",{char:{pattern:/'(?:\\x[\da-f]{2}|\\o[0-3][0-7][0-7]|\\\d{3}|\\.|[^'\\\r\n])'/,greedy:!0},constructor:/\b[A-Z]\w*\b(?!\s*\.)/,label:{pattern:/\b[a-z]\w*(?=::)/,alias:"symbol"}}),delete A.languages.reason.function,function(e){for(var t=/\/\*(?:[^*/]|\*(?!\/)|\/(?!\*)|<self>)*\*\//.source,n=0;n<2;n++)t=t.replace(/<self>/g,(function(){return t}));t=t.replace(/<self>/g,(function(){return/[^\s\S]/.source})),e.languages.rust={comment:[{pattern:RegExp(/(^|[^\\])/.source+t),lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/b?"(?:\\[\s\S]|[^\\"])*"|b?r(#*)"(?:[^"]|"(?!\1))*"\1/,greedy:!0},char:{pattern:/b?'(?:\\(?:x[0-7][\da-fA-F]|u\{(?:[\da-fA-F]_*){1,6}\}|.)|[^\\\r\n\t'])'/,greedy:!0},attribute:{pattern:/#!?\[(?:[^\[\]"]|"(?:\\[\s\S]|[^\\"])*")*\]/,greedy:!0,alias:"attr-name",inside:{string:null}},"closure-params":{pattern:/([=(,:]\s*|\bmove\s*)\|[^|]*\||\|[^|]*\|(?=\s*(?:\{|->))/,lookbehind:!0,greedy:!0,inside:{"closure-punctuation":{pattern:/^\||\|$/,alias:"punctuation"},rest:null}},"lifetime-annotation":{pattern:/'\w+/,alias:"symbol"},"fragment-specifier":{pattern:/(\$\w+:)[a-z]+/,lookbehind:!0,alias:"punctuation"},variable:/\$\w+/,"function-definition":{pattern:/(\bfn\s+)\w+/,lookbehind:!0,alias:"function"},"type-definition":{pattern:/(\b(?:enum|struct|trait|type|union)\s+)\w+/,lookbehind:!0,alias:"class-name"},"module-declaration":[{pattern:/(\b(?:crate|mod)\s+)[a-z][a-z_\d]*/,lookbehind:!0,alias:"namespace"},{pattern:/(\b(?:crate|self|super)\s*)::\s*[a-z][a-z_\d]*\b(?:\s*::(?:\s*[a-z][a-z_\d]*\s*::)*)?/,lookbehind:!0,alias:"namespace",inside:{punctuation:/::/}}],keyword:[/\b(?:Self|abstract|as|async|await|become|box|break|const|continue|crate|do|dyn|else|enum|extern|final|fn|for|if|impl|in|let|loop|macro|match|mod|move|mut|override|priv|pub|ref|return|self|static|struct|super|trait|try|type|typeof|union|unsafe|unsized|use|virtual|where|while|yield)\b/,/\b(?:bool|char|f(?:32|64)|[ui](?:8|16|32|64|128|size)|str)\b/],function:/\b[a-z_]\w*(?=\s*(?:::\s*<|\())/,macro:{pattern:/\b\w+!/,alias:"property"},constant:/\b[A-Z_][A-Z_\d]+\b/,"class-name":/\b[A-Z]\w*\b/,namespace:{pattern:/(?:\b[a-z][a-z_\d]*\s*::\s*)*\b[a-z][a-z_\d]*\s*::(?!\s*<)/,inside:{punctuation:/::/}},number:/\b(?:0x[\dA-Fa-f](?:_?[\dA-Fa-f])*|0o[0-7](?:_?[0-7])*|0b[01](?:_?[01])*|(?:(?:\d(?:_?\d)*)?\.)?\d(?:_?\d)*(?:[Ee][+-]?\d+)?)(?:_?(?:f32|f64|[iu](?:8|16|32|64|size)?))?\b/,boolean:/\b(?:false|true)\b/,punctuation:/->|\.\.=|\.{1,3}|::|[{}[\];(),:]/,operator:/[-+*\/%!^]=?|=[=>]?|&[&=]?|\|[|=]?|<<?=?|>>?=?|[@?]/},e.languages.rust["closure-params"].inside.rest=e.languages.rust,e.languages.rust.attribute.inside.string=e.languages.rust.string}(A),A.languages.go=A.languages.extend("clike",{string:{pattern:/(^|[^\\])"(?:\\.|[^"\\\r\n])*"|`[^`]*`/,lookbehind:!0,greedy:!0},keyword:/\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,boolean:/\b(?:_|false|iota|nil|true)\b/,number:[/\b0(?:b[01_]+|o[0-7_]+)i?\b/i,/\b0x(?:[a-f\d_]+(?:\.[a-f\d_]*)?|\.[a-f\d_]+)(?:p[+-]?\d+(?:_\d+)*)?i?(?!\w)/i,/(?:\b\d[\d_]*(?:\.[\d_]*)?|\B\.\d[\d_]*)(?:e[+-]?[\d_]+)?i?(?!\w)/i],operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,builtin:/\b(?:append|bool|byte|cap|close|complex|complex(?:64|128)|copy|delete|error|float(?:32|64)|u?int(?:8|16|32|64)?|imag|len|make|new|panic|print(?:ln)?|real|recover|rune|string|uintptr)\b/}),A.languages.insertBefore("go","string",{char:{pattern:/'(?:\\.|[^'\\\r\n]){0,10}'/,greedy:!0}}),delete A.languages.go["class-name"],function(e){var t=/\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char16_t|char32_t|char8_t|class|co_await|co_return|co_yield|compl|concept|const|const_cast|consteval|constexpr|constinit|continue|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|final|float|for|friend|goto|if|import|inline|int|int16_t|int32_t|int64_t|int8_t|long|module|mutable|namespace|new|noexcept|nullptr|operator|override|private|protected|public|register|reinterpret_cast|requires|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|uint16_t|uint32_t|uint64_t|uint8_t|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,n=/\b(?!<keyword>)\w+(?:\s*\.\s*\w+)*\b/.source.replace(/<keyword>/g,(function(){return t.source}));e.languages.cpp=e.languages.extend("c",{"class-name":[{pattern:RegExp(/(\b(?:class|concept|enum|struct|typename)\s+)(?!<keyword>)\w+/.source.replace(/<keyword>/g,(function(){return t.source}))),lookbehind:!0},/\b[A-Z]\w*(?=\s*::\s*\w+\s*\()/,/\b[A-Z_]\w*(?=\s*::\s*~\w+\s*\()/i,/\b\w+(?=\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>\s*::\s*\w+\s*\()/],keyword:t,number:{pattern:/(?:\b0b[01']+|\b0x(?:[\da-f']+(?:\.[\da-f']*)?|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+(?:\.[\d']*)?|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]{0,4}/i,greedy:!0},operator:/>>=?|<<=?|->|--|\+\+|&&|\|\||[?:~]|<=>|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,boolean:/\b(?:false|true)\b/}),e.languages.insertBefore("cpp","string",{module:{pattern:RegExp(/(\b(?:import|module)\s+)/.source+"(?:"+/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|<[^<>\r\n]*>/.source+"|"+/<mod-name>(?:\s*:\s*<mod-name>)?|:\s*<mod-name>/.source.replace(/<mod-name>/g,(function(){return n}))+")"),lookbehind:!0,greedy:!0,inside:{string:/^[<"][\s\S]+/,operator:/:/,punctuation:/\./}},"raw-string":{pattern:/R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/,alias:"string",greedy:!0}}),e.languages.insertBefore("cpp","keyword",{"generic-function":{pattern:/\b(?!operator\b)[a-z_]\w*\s*<(?:[^<>]|<[^<>]*>)*>(?=\s*\()/i,inside:{function:/^\w+/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:e.languages.cpp}}}}),e.languages.insertBefore("cpp","operator",{"double-colon":{pattern:/::/,alias:"punctuation"}}),e.languages.insertBefore("cpp","class-name",{"base-clause":{pattern:/(\b(?:class|struct)\s+\w+\s*:\s*)[^;{}"'\s]+(?:\s+[^;{}"'\s]+)*(?=\s*[;{])/,lookbehind:!0,greedy:!0,inside:e.languages.extend("cpp",{})}}),e.languages.insertBefore("inside","double-colon",{"class-name":/\b[a-z_]\w*\b(?!\s*::)/i},e.languages.cpp["base-clause"])}(A),A.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0,greedy:!0},"string-interpolation":{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:!0},"conversion-option":{pattern:/![sra](?=[:}]$)/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:False|None|True)\b/,number:/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,operator:/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},A.languages.python["string-interpolation"].inside.interpolation.inside.rest=A.languages.python,A.languages.py=A.languages.python,A.languages.json={property:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,lookbehind:!0,greedy:!0},string:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,lookbehind:!0,greedy:!0},comment:{pattern:/\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},number:/-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,punctuation:/[{}[\],]/,operator:/:/,boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"}},A.languages.webmanifest=A.languages.json;((e,t)=>{for(var n in t)f(e,n,{get:t[n],enumerable:!0})})({},{dracula:()=>T,duotoneDark:()=>j,duotoneLight:()=>R,github:()=>P,gruvboxMaterialDark:()=>K,gruvboxMaterialLight:()=>Q,jettwaveDark:()=>G,jettwaveLight:()=>H,nightOwl:()=>L,nightOwlLight:()=>N,oceanicNext:()=>I,okaidia:()=>M,oneDark:()=>V,oneLight:()=>W,palenight:()=>F,shadesOfPurple:()=>z,synthwave84:()=>B,ultramin:()=>$,vsDark:()=>U,vsLight:()=>q});var T={plain:{color:"#F8F8F2",backgroundColor:"#282A36"},styles:[{types:["prolog","constant","builtin"],style:{color:"rgb(189, 147, 249)"}},{types:["inserted","function"],style:{color:"rgb(80, 250, 123)"}},{types:["deleted"],style:{color:"rgb(255, 85, 85)"}},{types:["changed"],style:{color:"rgb(255, 184, 108)"}},{types:["punctuation","symbol"],style:{color:"rgb(248, 248, 242)"}},{types:["string","char","tag","selector"],style:{color:"rgb(255, 121, 198)"}},{types:["keyword","variable"],style:{color:"rgb(189, 147, 249)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(98, 114, 164)"}},{types:["attr-name"],style:{color:"rgb(241, 250, 140)"}}]},j={plain:{backgroundColor:"#2a2734",color:"#9a86fd"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#6c6783"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#e09142"}},{types:["property","function"],style:{color:"#9a86fd"}},{types:["tag-id","selector","atrule-id"],style:{color:"#eeebff"}},{types:["attr-name"],style:{color:"#c4b9fe"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","atrule","placeholder","variable"],style:{color:"#ffcc99"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#c4b9fe"}}]},R={plain:{backgroundColor:"#faf8f5",color:"#728fcb"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#b6ad9a"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#063289"}},{types:["property","function"],style:{color:"#b29762"}},{types:["tag-id","selector","atrule-id"],style:{color:"#2d2006"}},{types:["attr-name"],style:{color:"#896724"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","atrule"],style:{color:"#728fcb"}},{types:["placeholder","variable"],style:{color:"#93abdc"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#896724"}}]},P={plain:{color:"#393A34",backgroundColor:"#f6f8fa"},styles:[{types:["comment","prolog","doctype","cdata"],style:{color:"#999988",fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}},{types:["string","attr-value"],style:{color:"#e3116c"}},{types:["punctuation","operator"],style:{color:"#393A34"}},{types:["entity","url","symbol","number","boolean","variable","constant","property","regex","inserted"],style:{color:"#36acaa"}},{types:["atrule","keyword","attr-name","selector"],style:{color:"#00a4db"}},{types:["function","deleted","tag"],style:{color:"#d73a49"}},{types:["function-variable"],style:{color:"#6f42c1"}},{types:["tag","selector","keyword"],style:{color:"#00009f"}}]},L={plain:{color:"#d6deeb",backgroundColor:"#011627"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)",fontStyle:"italic"}},{types:["inserted","attr-name"],style:{color:"rgb(173, 219, 103)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(99, 119, 119)",fontStyle:"italic"}},{types:["string","url"],style:{color:"rgb(173, 219, 103)"}},{types:["variable"],style:{color:"rgb(214, 222, 235)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation"],style:{color:"rgb(199, 146, 234)"}},{types:["selector","doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["class-name"],style:{color:"rgb(255, 203, 139)"}},{types:["tag","operator","keyword"],style:{color:"rgb(127, 219, 202)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["property"],style:{color:"rgb(128, 203, 196)"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}}]},N={plain:{color:"#403f53",backgroundColor:"#FBFBFB"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)",fontStyle:"italic"}},{types:["inserted","attr-name"],style:{color:"rgb(72, 118, 214)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(152, 159, 177)",fontStyle:"italic"}},{types:["string","builtin","char","constant","url"],style:{color:"rgb(72, 118, 214)"}},{types:["variable"],style:{color:"rgb(201, 103, 101)"}},{types:["number"],style:{color:"rgb(170, 9, 130)"}},{types:["punctuation"],style:{color:"rgb(153, 76, 195)"}},{types:["function","selector","doctype"],style:{color:"rgb(153, 76, 195)",fontStyle:"italic"}},{types:["class-name"],style:{color:"rgb(17, 17, 17)"}},{types:["tag"],style:{color:"rgb(153, 76, 195)"}},{types:["operator","property","keyword","namespace"],style:{color:"rgb(12, 150, 155)"}},{types:["boolean"],style:{color:"rgb(188, 84, 84)"}}]},O="#c5a5c5",D="#8dc891",I={plain:{backgroundColor:"#282c34",color:"#ffffff"},styles:[{types:["attr-name"],style:{color:O}},{types:["attr-value"],style:{color:D}},{types:["comment","block-comment","prolog","doctype","cdata","shebang"],style:{color:"#999999"}},{types:["property","number","function-name","constant","symbol","deleted"],style:{color:"#5a9bcf"}},{types:["boolean"],style:{color:"#ff8b50"}},{types:["tag"],style:{color:"#fc929e"}},{types:["string"],style:{color:D}},{types:["punctuation"],style:{color:D}},{types:["selector","char","builtin","inserted"],style:{color:"#D8DEE9"}},{types:["function"],style:{color:"#79b6f2"}},{types:["operator","entity","url","variable"],style:{color:"#d7deea"}},{types:["keyword"],style:{color:O}},{types:["atrule","class-name"],style:{color:"#FAC863"}},{types:["important"],style:{fontWeight:"400"}},{types:["bold"],style:{fontWeight:"bold"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}}]},M={plain:{color:"#f8f8f2",backgroundColor:"#272822"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"#f92672",fontStyle:"italic"}},{types:["inserted"],style:{color:"rgb(173, 219, 103)",fontStyle:"italic"}},{types:["comment"],style:{color:"#8292a2",fontStyle:"italic"}},{types:["string","url"],style:{color:"#a6e22e"}},{types:["variable"],style:{color:"#f8f8f2"}},{types:["number"],style:{color:"#ae81ff"}},{types:["builtin","char","constant","function","class-name"],style:{color:"#e6db74"}},{types:["punctuation"],style:{color:"#f8f8f2"}},{types:["selector","doctype"],style:{color:"#a6e22e",fontStyle:"italic"}},{types:["tag","operator","keyword"],style:{color:"#66d9ef"}},{types:["boolean"],style:{color:"#ae81ff"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)",opacity:.7}},{types:["tag","property"],style:{color:"#f92672"}},{types:["attr-name"],style:{color:"#a6e22e !important"}},{types:["doctype"],style:{color:"#8292a2"}},{types:["rule"],style:{color:"#e6db74"}}]},F={plain:{color:"#bfc7d5",backgroundColor:"#292d3e"},styles:[{types:["comment"],style:{color:"rgb(105, 112, 152)",fontStyle:"italic"}},{types:["string","inserted"],style:{color:"rgb(195, 232, 141)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation","selector"],style:{color:"rgb(199, 146, 234)"}},{types:["variable"],style:{color:"rgb(191, 199, 213)"}},{types:["class-name","attr-name"],style:{color:"rgb(255, 203, 107)"}},{types:["tag","deleted"],style:{color:"rgb(255, 85, 114)"}},{types:["operator"],style:{color:"rgb(137, 221, 255)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["keyword"],style:{fontStyle:"italic"}},{types:["doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}},{types:["url"],style:{color:"rgb(221, 221, 221)"}}]},z={plain:{color:"#9EFEFF",backgroundColor:"#2D2A55"},styles:[{types:["changed"],style:{color:"rgb(255, 238, 128)"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)"}},{types:["inserted"],style:{color:"rgb(173, 219, 103)"}},{types:["comment"],style:{color:"rgb(179, 98, 255)",fontStyle:"italic"}},{types:["punctuation"],style:{color:"rgb(255, 255, 255)"}},{types:["constant"],style:{color:"rgb(255, 98, 140)"}},{types:["string","url"],style:{color:"rgb(165, 255, 144)"}},{types:["variable"],style:{color:"rgb(255, 238, 128)"}},{types:["number","boolean"],style:{color:"rgb(255, 98, 140)"}},{types:["attr-name"],style:{color:"rgb(255, 180, 84)"}},{types:["keyword","operator","property","namespace","tag","selector","doctype"],style:{color:"rgb(255, 157, 0)"}},{types:["builtin","char","constant","function","class-name"],style:{color:"rgb(250, 208, 0)"}}]},B={plain:{backgroundColor:"linear-gradient(to bottom, #2a2139 75%, #34294f)",backgroundImage:"#34294f",color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3"},styles:[{types:["comment","block-comment","prolog","doctype","cdata"],style:{color:"#495495",fontStyle:"italic"}},{types:["punctuation"],style:{color:"#ccc"}},{types:["tag","attr-name","namespace","number","unit","hexcode","deleted"],style:{color:"#e2777a"}},{types:["property","selector"],style:{color:"#72f1b8",textShadow:"0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475"}},{types:["function-name"],style:{color:"#6196cc"}},{types:["boolean","selector-id","function"],style:{color:"#fdfdfd",textShadow:"0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975"}},{types:["class-name","maybe-class-name","builtin"],style:{color:"#fff5f6",textShadow:"0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75"}},{types:["constant","symbol"],style:{color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3"}},{types:["important","atrule","keyword","selector-class"],style:{color:"#f4eee4",textShadow:"0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575"}},{types:["string","char","attr-value","regex","variable"],style:{color:"#f87c32"}},{types:["parameter"],style:{fontStyle:"italic"}},{types:["entity","url"],style:{color:"#67cdcc"}},{types:["operator"],style:{color:"ffffffee"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["entity"],style:{cursor:"help"}},{types:["inserted"],style:{color:"green"}}]},$={plain:{color:"#282a2e",backgroundColor:"#ffffff"},styles:[{types:["comment"],style:{color:"rgb(197, 200, 198)"}},{types:["string","number","builtin","variable"],style:{color:"rgb(150, 152, 150)"}},{types:["class-name","function","tag","attr-name"],style:{color:"rgb(40, 42, 46)"}}]},U={plain:{color:"#9CDCFE",backgroundColor:"#1E1E1E"},styles:[{types:["prolog"],style:{color:"rgb(0, 0, 128)"}},{types:["comment"],style:{color:"rgb(106, 153, 85)"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"rgb(86, 156, 214)"}},{types:["number","inserted"],style:{color:"rgb(181, 206, 168)"}},{types:["constant"],style:{color:"rgb(100, 102, 149)"}},{types:["attr-name","variable"],style:{color:"rgb(156, 220, 254)"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"rgb(206, 145, 120)"}},{types:["selector"],style:{color:"rgb(215, 186, 125)"}},{types:["tag"],style:{color:"rgb(78, 201, 176)"}},{types:["tag"],languages:["markup"],style:{color:"rgb(86, 156, 214)"}},{types:["punctuation","operator"],style:{color:"rgb(212, 212, 212)"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"rgb(220, 220, 170)"}},{types:["class-name"],style:{color:"rgb(78, 201, 176)"}},{types:["char"],style:{color:"rgb(209, 105, 105)"}}]},q={plain:{color:"#000000",backgroundColor:"#ffffff"},styles:[{types:["comment"],style:{color:"rgb(0, 128, 0)"}},{types:["builtin"],style:{color:"rgb(0, 112, 193)"}},{types:["number","variable","inserted"],style:{color:"rgb(9, 134, 88)"}},{types:["operator"],style:{color:"rgb(0, 0, 0)"}},{types:["constant","char"],style:{color:"rgb(129, 31, 63)"}},{types:["tag"],style:{color:"rgb(128, 0, 0)"}},{types:["attr-name"],style:{color:"rgb(255, 0, 0)"}},{types:["deleted","string"],style:{color:"rgb(163, 21, 21)"}},{types:["changed","punctuation"],style:{color:"rgb(4, 81, 165)"}},{types:["function","keyword"],style:{color:"rgb(0, 0, 255)"}},{types:["class-name"],style:{color:"rgb(38, 127, 153)"}}]},G={plain:{color:"#f8fafc",backgroundColor:"#011627"},styles:[{types:["prolog"],style:{color:"#000080"}},{types:["comment"],style:{color:"#6A9955"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"#569CD6"}},{types:["number","inserted"],style:{color:"#B5CEA8"}},{types:["constant"],style:{color:"#f8fafc"}},{types:["attr-name","variable"],style:{color:"#9CDCFE"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"#cbd5e1"}},{types:["selector"],style:{color:"#D7BA7D"}},{types:["tag"],style:{color:"#0ea5e9"}},{types:["tag"],languages:["markup"],style:{color:"#0ea5e9"}},{types:["punctuation","operator"],style:{color:"#D4D4D4"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"#7dd3fc"}},{types:["class-name"],style:{color:"#0ea5e9"}},{types:["char"],style:{color:"#D16969"}}]},H={plain:{color:"#0f172a",backgroundColor:"#f1f5f9"},styles:[{types:["prolog"],style:{color:"#000080"}},{types:["comment"],style:{color:"#6A9955"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"#0c4a6e"}},{types:["number","inserted"],style:{color:"#B5CEA8"}},{types:["constant"],style:{color:"#0f172a"}},{types:["attr-name","variable"],style:{color:"#0c4a6e"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"#64748b"}},{types:["selector"],style:{color:"#D7BA7D"}},{types:["tag"],style:{color:"#0ea5e9"}},{types:["tag"],languages:["markup"],style:{color:"#0ea5e9"}},{types:["punctuation","operator"],style:{color:"#475569"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"#0e7490"}},{types:["class-name"],style:{color:"#0ea5e9"}},{types:["char"],style:{color:"#D16969"}}]},V={plain:{backgroundColor:"hsl(220, 13%, 18%)",color:"hsl(220, 14%, 71%)",textShadow:"0 1px rgba(0, 0, 0, 0.3)"},styles:[{types:["comment","prolog","cdata"],style:{color:"hsl(220, 10%, 40%)"}},{types:["doctype","punctuation","entity"],style:{color:"hsl(220, 14%, 71%)"}},{types:["attr-name","class-name","maybe-class-name","boolean","constant","number","atrule"],style:{color:"hsl(29, 54%, 61%)"}},{types:["keyword"],style:{color:"hsl(286, 60%, 67%)"}},{types:["property","tag","symbol","deleted","important"],style:{color:"hsl(355, 65%, 65%)"}},{types:["selector","string","char","builtin","inserted","regex","attr-value"],style:{color:"hsl(95, 38%, 62%)"}},{types:["variable","operator","function"],style:{color:"hsl(207, 82%, 66%)"}},{types:["url"],style:{color:"hsl(187, 47%, 55%)"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"hsl(220, 14%, 71%)"}}]},W={plain:{backgroundColor:"hsl(230, 1%, 98%)",color:"hsl(230, 8%, 24%)"},styles:[{types:["comment","prolog","cdata"],style:{color:"hsl(230, 4%, 64%)"}},{types:["doctype","punctuation","entity"],style:{color:"hsl(230, 8%, 24%)"}},{types:["attr-name","class-name","boolean","constant","number","atrule"],style:{color:"hsl(35, 99%, 36%)"}},{types:["keyword"],style:{color:"hsl(301, 63%, 40%)"}},{types:["property","tag","symbol","deleted","important"],style:{color:"hsl(5, 74%, 59%)"}},{types:["selector","string","char","builtin","inserted","regex","attr-value","punctuation"],style:{color:"hsl(119, 34%, 47%)"}},{types:["variable","operator","function"],style:{color:"hsl(221, 87%, 60%)"}},{types:["url"],style:{color:"hsl(198, 99%, 37%)"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"hsl(230, 8%, 24%)"}}]},K={plain:{color:"#ebdbb2",backgroundColor:"#292828"},styles:[{types:["imports","class-name","maybe-class-name","constant","doctype","builtin","function"],style:{color:"#d8a657"}},{types:["property-access"],style:{color:"#7daea3"}},{types:["tag"],style:{color:"#e78a4e"}},{types:["attr-name","char","url","regex"],style:{color:"#a9b665"}},{types:["attr-value","string"],style:{color:"#89b482"}},{types:["comment","prolog","cdata","operator","inserted"],style:{color:"#a89984"}},{types:["delimiter","boolean","keyword","selector","important","atrule","property","variable","deleted"],style:{color:"#ea6962"}},{types:["entity","number","symbol"],style:{color:"#d3869b"}}]},Q={plain:{color:"#654735",backgroundColor:"#f9f5d7"},styles:[{types:["delimiter","boolean","keyword","selector","important","atrule","property","variable","deleted"],style:{color:"#af2528"}},{types:["imports","class-name","maybe-class-name","constant","doctype","builtin"],style:{color:"#b4730e"}},{types:["string","attr-value"],style:{color:"#477a5b"}},{types:["property-access"],style:{color:"#266b79"}},{types:["function","attr-name","char","url"],style:{color:"#72761e"}},{types:["tag"],style:{color:"#b94c07"}},{types:["comment","prolog","cdata","operator","inserted"],style:{color:"#a89984"}},{types:["entity","number","symbol"],style:{color:"#924f79"}}]},Y=(e,t)=>{const{plain:n}=e,r=e.styles.reduce(((e,n)=>{const{languages:r,style:o}=n;return r&&!r.includes(t)||n.types.forEach((t=>{const n=S(S({},e[t]),o);e[t]=n})),e}),{});return r.root=n,r.plain=_(S({},n),{backgroundColor:void 0}),r},Z=/\r\n|\r|\n/,X=e=>{0===e.length?e.push({types:["plain"],content:"\n",empty:!0}):1===e.length&&""===e[0].content&&(e[0].content="\n",e[0].empty=!0)},J=(e,t)=>{const n=e.length;return n>0&&e[n-1]===t?e:e.concat(t)},ee=e=>{const t=[[]],n=[e],r=[0],o=[e.length];let a=0,i=0,s=[];const l=[s];for(;i>-1;){for(;(a=r[i]++)<o[i];){let e,c=t[i];const u=n[i][a];if("string"==typeof u?(c=i>0?c:["plain"],e=u):(c=J(c,u.type),u.alias&&(c=J(c,u.alias)),e=u.content),"string"!=typeof e){i++,t.push(c),n.push(e),r.push(0),o.push(e.length);continue}const d=e.split(Z),p=d.length;s.push({types:c,content:d[0]});for(let t=1;t<p;t++)X(s),l.push(s=[]),s.push({types:c,content:d[t]})}i--,t.pop(),n.pop(),r.pop(),o.pop()}return X(s),l},te=({children:e,language:t,code:n,theme:r,prism:o})=>{const a=t.toLowerCase(),i=((e,t)=>{const[n,r]=(0,u.useState)(Y(t,e)),o=(0,u.useRef)(),a=(0,u.useRef)();return(0,u.useEffect)((()=>{t===o.current&&e===a.current||(o.current=t,a.current=e,r(Y(t,e)))}),[e,t]),n})(a,r),s=(e=>(0,u.useCallback)((t=>{var n=t,{className:r,style:o,line:a}=n,i=E(n,["className","style","line"]);const s=_(S({},i),{className:(0,d.A)("token-line",r)});return"object"==typeof e&&"plain"in e&&(s.style=e.plain),"object"==typeof o&&(s.style=S(S({},s.style||{}),o)),s}),[e]))(i),l=(e=>{const t=(0,u.useCallback)((({types:t,empty:n})=>{if(null!=e)return 1===t.length&&"plain"===t[0]?null!=n?{display:"inline-block"}:void 0:1===t.length&&null!=n?e[t[0]]:Object.assign(null!=n?{display:"inline-block"}:{},...t.map((t=>e[t])))}),[e]);return(0,u.useCallback)((e=>{var n=e,{token:r,className:o,style:a}=n,i=E(n,["token","className","style"]);const s=_(S({},i),{className:(0,d.A)("token",...r.types,o),children:r.content,style:t(r)});return null!=a&&(s.style=S(S({},s.style||{}),a)),s}),[t])})(i),c=(({prism:e,code:t,grammar:n,language:r})=>{const o=(0,u.useRef)(e);return(0,u.useMemo)((()=>{if(null==n)return ee([t]);const e={code:t,grammar:n,language:r,tokens:[]};return o.current.hooks.run("before-tokenize",e),e.tokens=o.current.tokenize(t,n),o.current.hooks.run("after-tokenize",e),ee(e.tokens)}),[t,n,r])})({prism:o,language:a,code:n,grammar:o.languages[a]});return e({tokens:c,className:`prism-code language-${a}`,style:null!=i?i.root:{},getLineProps:s,getTokenProps:l})},ne=e=>(0,u.createElement)(te,_(S({},e),{prism:e.prism||A,theme:e.theme||U,code:e.code,language:e.language}))},1561:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});var r=!0,o="Invariant failed";function a(e,t){if(!e){if(r)throw new Error(o);var n="function"==typeof t?t():t,a=n?"".concat(o,": ").concat(n):o;throw new Error(a)}}},1635:(e,t,n)=>{"use strict";n.r(t),n.d(t,{__addDisposableResource:()=>D,__assign:()=>a,__asyncDelegator:()=>E,__asyncGenerator:()=>_,__asyncValues:()=>C,__await:()=>S,__awaiter:()=>g,__classPrivateFieldGet:()=>L,__classPrivateFieldIn:()=>O,__classPrivateFieldSet:()=>N,__createBinding:()=>h,__decorate:()=>s,__disposeResources:()=>M,__esDecorate:()=>c,__exportStar:()=>y,__extends:()=>o,__generator:()=>m,__importDefault:()=>P,__importStar:()=>R,__makeTemplateObject:()=>A,__metadata:()=>f,__param:()=>l,__propKey:()=>d,__read:()=>v,__rest:()=>i,__rewriteRelativeImportExtension:()=>F,__runInitializers:()=>u,__setFunctionName:()=>p,__spread:()=>w,__spreadArray:()=>x,__spreadArrays:()=>k,__values:()=>b,default:()=>z});var r=function(e,t){return r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},r(e,t)};function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var a=function(){return a=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},a.apply(this,arguments)};function i(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n}function s(e,t,n,r){var o,a=arguments.length,i=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(a<3?o(i):a>3?o(t,n,i):o(t,n))||i);return a>3&&i&&Object.defineProperty(t,n,i),i}function l(e,t){return function(n,r){t(n,r,e)}}function c(e,t,n,r,o,a){function i(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,l=r.kind,c="getter"===l?"get":"setter"===l?"set":"value",u=!t&&e?r.static?e:e.prototype:null,d=t||(u?Object.getOwnPropertyDescriptor(u,r.name):{}),p=!1,f=n.length-1;f>=0;f--){var g={};for(var m in r)g[m]="access"===m?{}:r[m];for(var m in r.access)g.access[m]=r.access[m];g.addInitializer=function(e){if(p)throw new TypeError("Cannot add initializers after decoration has completed");a.push(i(e||null))};var h=(0,n[f])("accessor"===l?{get:d.get,set:d.set}:d[c],g);if("accessor"===l){if(void 0===h)continue;if(null===h||"object"!=typeof h)throw new TypeError("Object expected");(s=i(h.get))&&(d.get=s),(s=i(h.set))&&(d.set=s),(s=i(h.init))&&o.unshift(s)}else(s=i(h))&&("field"===l?o.unshift(s):d[c]=s)}u&&Object.defineProperty(u,r.name,d),p=!0}function u(e,t,n){for(var r=arguments.length>2,o=0;o<t.length;o++)n=r?t[o].call(e,n):t[o].call(e);return r?n:void 0}function d(e){return"symbol"==typeof e?e:"".concat(e)}function p(e,t,n){return"symbol"==typeof t&&(t=t.description?"[".concat(t.description,"]"):""),Object.defineProperty(e,"name",{configurable:!0,value:n?"".concat(n," ",t):t})}function f(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function g(e,t,n,r){return new(n||(n=Promise))((function(o,a){function i(e){try{l(r.next(e))}catch(t){a(t)}}function s(e){try{l(r.throw(e))}catch(t){a(t)}}function l(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(i,s)}l((r=r.apply(e,t||[])).next())}))}function m(e,t){var n,r,o,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]},i=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return i.next=s(0),i.throw=s(1),i.return=s(2),"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function s(s){return function(l){return function(s){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,s[0]&&(a=0)),a;)try{if(n=1,r&&(o=2&s[0]?r.return:s[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,s[1])).done)return o;switch(r=0,o&&(s=[2&s[0],o.value]),s[0]){case 0:case 1:o=s;break;case 4:return a.label++,{value:s[1],done:!1};case 5:a.label++,r=s[1],s=[0];continue;case 7:s=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==s[0]&&2!==s[0])){a=0;continue}if(3===s[0]&&(!o||s[1]>o[0]&&s[1]<o[3])){a.label=s[1];break}if(6===s[0]&&a.label<o[1]){a.label=o[1],o=s;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(s);break}o[2]&&a.ops.pop(),a.trys.pop();continue}s=t.call(e,a)}catch(l){s=[6,l],r=0}finally{n=o=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,l])}}}var h=Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]};function y(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||h(t,e,n)}function b(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function v(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,o,a=n.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(r=a.next()).done;)i.push(r.value)}catch(s){o={error:s}}finally{try{r&&!r.done&&(n=a.return)&&n.call(a)}finally{if(o)throw o.error}}return i}function w(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(v(arguments[t]));return e}function k(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var r=Array(e),o=0;for(t=0;t<n;t++)for(var a=arguments[t],i=0,s=a.length;i<s;i++,o++)r[o]=a[i];return r}function x(e,t,n){if(n||2===arguments.length)for(var r,o=0,a=t.length;o<a;o++)!r&&o in t||(r||(r=Array.prototype.slice.call(t,0,o)),r[o]=t[o]);return e.concat(r||Array.prototype.slice.call(t))}function S(e){return this instanceof S?(this.v=e,this):new S(e)}function _(e,t,n){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var r,o=n.apply(e,t||[]),a=[];return r=Object.create(("function"==typeof AsyncIterator?AsyncIterator:Object).prototype),i("next"),i("throw"),i("return",(function(e){return function(t){return Promise.resolve(t).then(e,c)}})),r[Symbol.asyncIterator]=function(){return this},r;function i(e,t){o[e]&&(r[e]=function(t){return new Promise((function(n,r){a.push([e,t,n,r])>1||s(e,t)}))},t&&(r[e]=t(r[e])))}function s(e,t){try{(n=o[e](t)).value instanceof S?Promise.resolve(n.value.v).then(l,c):u(a[0][2],n)}catch(r){u(a[0][3],r)}var n}function l(e){s("next",e)}function c(e){s("throw",e)}function u(e,t){e(t),a.shift(),a.length&&s(a[0][0],a[0][1])}}function E(e){var t,n;return t={},r("next"),r("throw",(function(e){throw e})),r("return"),t[Symbol.iterator]=function(){return this},t;function r(r,o){t[r]=e[r]?function(t){return(n=!n)?{value:S(e[r](t)),done:!1}:o?o(t):t}:o}}function C(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,n=e[Symbol.asyncIterator];return n?n.call(e):(e=b(e),t={},r("next"),r("throw"),r("return"),t[Symbol.asyncIterator]=function(){return this},t);function r(n){t[n]=e[n]&&function(t){return new Promise((function(r,o){(function(e,t,n,r){Promise.resolve(r).then((function(t){e({value:t,done:n})}),t)})(r,o,(t=e[n](t)).done,t.value)}))}}}function A(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var T=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t},j=function(e){return j=Object.getOwnPropertyNames||function(e){var t=[];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[t.length]=n);return t},j(e)};function R(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n=j(e),r=0;r<n.length;r++)"default"!==n[r]&&h(t,e,n[r]);return T(t,e),t}function P(e){return e&&e.__esModule?e:{default:e}}function L(e,t,n,r){if("a"===n&&!r)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?r:"a"===n?r.call(e):r?r.value:t.get(e)}function N(e,t,n,r,o){if("m"===r)throw new TypeError("Private method is not writable");if("a"===r&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===r?o.call(e,n):o?o.value=n:t.set(e,n),n}function O(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}function D(e,t,n){if(null!=t){if("object"!=typeof t&&"function"!=typeof t)throw new TypeError("Object expected.");var r,o;if(n){if(!Symbol.asyncDispose)throw new TypeError("Symbol.asyncDispose is not defined.");r=t[Symbol.asyncDispose]}if(void 0===r){if(!Symbol.dispose)throw new TypeError("Symbol.dispose is not defined.");r=t[Symbol.dispose],n&&(o=r)}if("function"!=typeof r)throw new TypeError("Object not disposable.");o&&(r=function(){try{o.call(this)}catch(e){return Promise.reject(e)}}),e.stack.push({value:t,dispose:r,async:n})}else n&&e.stack.push({async:!0});return t}var I="function"==typeof SuppressedError?SuppressedError:function(e,t,n){var r=new Error(n);return r.name="SuppressedError",r.error=e,r.suppressed=t,r};function M(e){function t(t){e.error=e.hasError?new I(t,e.error,"An error was suppressed during disposal."):t,e.hasError=!0}var n,r=0;return function o(){for(;n=e.stack.pop();)try{if(!n.async&&1===r)return r=0,e.stack.push(n),Promise.resolve().then(o);if(n.dispose){var a=n.dispose.call(n.value);if(n.async)return r|=2,Promise.resolve(a).then(o,(function(e){return t(e),o()}))}else r|=1}catch(i){t(i)}if(1===r)return e.hasError?Promise.reject(e.error):Promise.resolve();if(e.hasError)throw e.error}()}function F(e,t){return"string"==typeof e&&/^\.\.?\//.test(e)?e.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i,(function(e,n,r,o,a){return n?t?".jsx":".js":!r||o&&a?r+o+"."+a.toLowerCase()+"js":e})):e}const z={__extends:o,__assign:a,__rest:i,__decorate:s,__param:l,__esDecorate:c,__runInitializers:u,__propKey:d,__setFunctionName:p,__metadata:f,__awaiter:g,__generator:m,__createBinding:h,__exportStar:y,__values:b,__read:v,__spread:w,__spreadArrays:k,__spreadArray:x,__await:S,__asyncGenerator:_,__asyncDelegator:E,__asyncValues:C,__makeTemplateObject:A,__importStar:R,__importDefault:P,__classPrivateFieldGet:L,__classPrivateFieldSet:N,__classPrivateFieldIn:O,__addDisposableResource:D,__disposeResources:M,__rewriteRelativeImportExtension:F}},2654:e=>{"use strict";e.exports={}},4054:e=>{"use strict";e.exports=JSON.parse('{"/blog-5c5":{"__comp":"a6aa9e1f","__context":{"plugin":"36994c47"},"sidebar":"814f3328","items":[{"content":"26a8bbe9"}],"__props":"c15d9823"},"/blog/archive-182":{"__comp":"9e4087bc","__context":{"plugin":"36994c47"},"__props":"f81c1134"},"/blog/tags-287":{"__comp":"01a85c17","__context":{"plugin":"36994c47"},"sidebar":"814f3328","__props":"3a2db09e"},"/blog/tags/intro-7de":{"__comp":"6875c492","__context":{"plugin":"36994c47"},"sidebar":"814f3328","items":[{"content":"26a8bbe9"}],"__props":"c8df2e0f"},"/blog/tags/release-74e":{"__comp":"6875c492","__context":{"plugin":"36994c47"},"sidebar":"814f3328","items":[{"content":"26a8bbe9"}],"__props":"c9cac9d9"},"/blog/welcome-to-stylable-v5-715":{"__comp":"ccc49370","__context":{"data":{"blogMetadata":"acecf23e"},"plugin":"36994c47"},"sidebar":"814f3328","content":"ab324915"},"/community-adf":{"__comp":"57b59cd4","__context":{"plugin":"a7456010"},"config":"5e9f5e1a"},"/playground-859":{"__comp":"0ce74438","__context":{"plugin":"a7456010"},"config":"5e9f5e1a"},"/search-822":{"__comp":"1a4e3797","__context":{"plugin":"138e0e15"}},"/docs-72c":{"__comp":"5e95c892","__context":{"plugin":"aba21aa0"}},"/docs-9e7":{"__comp":"a7bd4aaa","__props":"0058b4c6"},"/docs-b3f":{"__comp":"a94703ab"},"/docs/attributions-554":{"__comp":"17896441","content":"7df4dfbf"},"/docs/getting-started/boilerplate-1d3":{"__comp":"17896441","content":"371f5dc2"},"/docs/getting-started/integrations-0e5":{"__comp":"14eb3368","__props":"49b68603"},"/docs/getting-started/intro-b87":{"__comp":"17896441","content":"ebfcd236"},"/docs/getting-started/manual-integration-5ef":{"__comp":"17896441","content":"a2cbecc3"},"/docs/getting-started/nextjs-integration-8c2":{"__comp":"17896441","content":"17347b34"},"/docs/getting-started/rollup-integration-c52":{"__comp":"17896441","content":"e8f63a9c"},"/docs/getting-started/storybook-integration-002":{"__comp":"17896441","content":"24352365"},"/docs/getting-started/stylable-config-4d9":{"__comp":"17896441","content":"8abe6768"},"/docs/getting-started/tooling/cli-aa5":{"__comp":"17896441","content":"acfb8e34"},"/docs/getting-started/tooling/stylable-intelligence-bf3":{"__comp":"17896441","content":"fe460ebe"},"/docs/getting-started/typescript-integration-c5e":{"__comp":"17896441","content":"a399b375"},"/docs/getting-started/webpack-integration-f5d":{"__comp":"17896441","content":"922647ed"},"/docs/guides/component-best-practices-ea7":{"__comp":"17896441","content":"de714d10"},"/docs/guides/component-variants-90b":{"__comp":"17896441","content":"6e96288b"},"/docs/guides/handbook/class-35f":{"__comp":"17896441","content":"a2b316bf"},"/docs/guides/handbook/classes-a99":{"__comp":"17896441","content":"ef20d218"},"/docs/guides/handbook/custom-state-1fe":{"__comp":"17896441","content":"b10d9af9"},"/docs/guides/handbook/extend-510":{"__comp":"17896441","content":"b1a4f681"},"/docs/guides/handbook/import-class-e56":{"__comp":"17896441","content":"cb737cc7"},"/docs/guides/handbook/intro-3a8":{"__comp":"17896441","content":"35811679"},"/docs/guides/handbook/namespacing-93a":{"__comp":"17896441","content":"1a5eac39"},"/docs/guides/handbook/runtime-4db":{"__comp":"17896441","content":"587a03c1"},"/docs/guides/migration-v3-620":{"__comp":"17896441","content":"2de44985"},"/docs/guides/migration-v5-217":{"__comp":"17896441","content":"24ff752b"},"/docs/guides/project-commons-9bf":{"__comp":"17896441","content":"866f0f84"},"/docs/guides/shared-classes-5ec":{"__comp":"17896441","content":"1f7dc951"},"/docs/guides/ssr-728":{"__comp":"17896441","content":"46d93a8f"},"/docs/references/cheatsheet-3be":{"__comp":"17896441","content":"bc80c935"},"/docs/references/class-selectors-856":{"__comp":"17896441","content":"79455fbf"},"/docs/references/contains-39b":{"__comp":"17896441","content":"f0dcc6ac"},"/docs/references/css-vars-571":{"__comp":"17896441","content":"bfefe422"},"/docs/references/custom-selectors-4f8":{"__comp":"17896441","content":"fde4315e"},"/docs/references/extend-stylesheet-472":{"__comp":"17896441","content":"5e66eab8"},"/docs/references/formatters-c0d":{"__comp":"17896441","content":"2ce01146"},"/docs/references/global-selectors-04c":{"__comp":"17896441","content":"084229dc"},"/docs/references/imports-a46":{"__comp":"17896441","content":"5ec46957"},"/docs/references/keyframes-4d3":{"__comp":"17896441","content":"f5df1cd5"},"/docs/references/layer-5cb":{"__comp":"17896441","content":"d879f3fa"},"/docs/references/mixins-9cd":{"__comp":"17896441","content":"89bbbeae"},"/docs/references/namespace-686":{"__comp":"17896441","content":"32382f69"},"/docs/references/programmatic-api-143":{"__comp":"17896441","content":"e19b9990"},"/docs/references/pseudo-classes-380":{"__comp":"17896441","content":"e74825b7"},"/docs/references/pseudo-elements-cd5":{"__comp":"17896441","content":"f242c874"},"/docs/references/root-f2e":{"__comp":"17896441","content":"c0d90f50"},"/docs/references/runtime-a1c":{"__comp":"17896441","content":"825e4603"},"/docs/references/st-scope-b75":{"__comp":"17896441","content":"de106496"},"/docs/references/st-variables-7ce":{"__comp":"17896441","content":"945a8992"},"/docs/references/type-selectors-11d":{"__comp":"17896441","content":"0a256791"},"/docs/references/using-external-assets-78d":{"__comp":"17896441","content":"705f3d56"},"/docs/style-guide-51c":{"__comp":"17896441","content":"baf0d4a2"},"/-e5f":{"__comp":"1df93b7f","__context":{"plugin":"a7456010"},"config":"5e9f5e1a"}}')}},e=>{e.O(0,[1869],(()=>{return t=7522,e(e.s=t);var t}));e.O()}]); \ No newline at end of file diff --git a/assets/js/runtime~main.52da3537.js b/assets/js/runtime~main.2e7685d2.js similarity index 80% rename from assets/js/runtime~main.52da3537.js rename to assets/js/runtime~main.2e7685d2.js index 8c03127a..8d1faed8 100644 --- a/assets/js/runtime~main.52da3537.js +++ b/assets/js/runtime~main.2e7685d2.js @@ -1 +1 @@ -(()=>{"use strict";var e,a,f,c,d,b={},t={};function r(e){var a=t[e];if(void 0!==a)return a.exports;var f=t[e]={id:e,loaded:!1,exports:{}};return b[e].call(f.exports,f,f.exports,r),f.loaded=!0,f.exports}r.m=b,r.c=t,e=[],r.O=(a,f,c,d)=>{if(!f){var b=1/0;for(i=0;i<e.length;i++){f=e[i][0],c=e[i][1],d=e[i][2];for(var t=!0,o=0;o<f.length;o++)(!1&d||b>=d)&&Object.keys(r.O).every((e=>r.O[e](f[o])))?f.splice(o--,1):(t=!1,d<b&&(b=d));if(t){e.splice(i--,1);var n=c();void 0!==n&&(a=n)}}return a}d=d||0;for(var i=e.length;i>0&&e[i-1][2]>d;i--)e[i]=e[i-1];e[i]=[f,c,d]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},f=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,c){if(1&c&&(e=this(e)),8&c)return e;if("object"==typeof e&&e){if(4&c&&e.__esModule)return e;if(16&c&&"function"==typeof e.then)return e}var d=Object.create(null);r.r(d);var b={};a=a||[null,f({}),f([]),f(f)];for(var t=2&c&&e;"object"==typeof t&&!~a.indexOf(t);t=f(t))Object.getOwnPropertyNames(t).forEach((a=>b[a]=()=>e[a]));return b.default=()=>e,r.d(d,b),d},r.d=(e,a)=>{for(var f in a)r.o(a,f)&&!r.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:a[f]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((a,f)=>(r.f[f](e,a),a)),[])),r.u=e=>"assets/js/"+({150:"a2b316bf",242:"cb737cc7",420:"fe460ebe",614:"de106496",693:"bfefe422",734:"46d93a8f",825:"24ff752b",849:"0058b4c6",1026:"825e4603",1235:"a7456010",1274:"922647ed",1480:"fde4315e",1701:"084229dc",1858:"32382f69",1903:"acecf23e",2110:"0a256791",2138:"1a4e3797",2346:"bc80c935",2619:"866f0f84",2670:"7df4dfbf",2679:"49b68603",2711:"9e4087bc",2765:"e74825b7",3249:"ccc49370",3365:"0ce74438",3746:"ebfcd236",3879:"79455fbf",4215:"1a5eac39",4293:"5e66eab8",4412:"e8f63a9c",4583:"1df93b7f",4715:"89bbbeae",4729:"de714d10",4813:"6875c492",4918:"c9cac9d9",4921:"138e0e15",4947:"5ec46957",5076:"a399b375",5184:"371f5dc2",5299:"a2cbecc3",5395:"24352365",5457:"6e96288b",5619:"f5df1cd5",5666:"26a8bbe9",5742:"aba21aa0",6223:"acfb8e34",6468:"17347b34",6722:"ab324915",6827:"baf0d4a2",6969:"14eb3368",7001:"f0dcc6ac",7098:"a7bd4aaa",7135:"35811679",7377:"e19b9990",7381:"d879f3fa",7394:"c0d90f50",7395:"587a03c1",7472:"814f3328",7514:"b1a4f681",7643:"a6aa9e1f",7678:"2de44985",7774:"8abe6768",8065:"ef20d218",8121:"3a2db09e",8130:"f81c1134",8146:"c15d9823",8209:"01a85c17",8401:"17896441",8829:"f242c874",8880:"57b59cd4",9048:"a94703ab",9101:"c8df2e0f",9169:"2ce01146",9183:"705f3d56",9597:"1f7dc951",9647:"5e95c892",9729:"945a8992",9849:"b10d9af9",9858:"36994c47"}[e]||e)+"."+{150:"170c1449",242:"4efc99f1",420:"1e1a4478",489:"8a73ff29",614:"b8301a67",693:"e4cc47c1",734:"60d9bfdb",825:"bfda4846",849:"ed35196b",1026:"d8f06ee4",1235:"748318e0",1274:"41f45d35",1480:"9ee4e1b1",1660:"32b31a97",1701:"b38db38d",1858:"1f52c00d",1903:"ca93a1c9",2110:"777e14ec",2138:"fa60ffd8",2346:"03708a6d",2560:"9c924c04",2619:"584ec891",2670:"5b189963",2679:"98d8150b",2711:"5f0ca831",2765:"d2761f43",3249:"a152809e",3365:"fc28e4b0",3746:"88740659",3879:"ae5d9ea9",4215:"0b4fb100",4293:"938138e1",4412:"bc8580ba",4562:"a79c15e0",4583:"4fe2d858",4715:"a5f1201d",4729:"9df8e645",4813:"60a17926",4918:"e1212cfe",4921:"c5707e85",4947:"9bace835",5076:"29e0324c",5184:"e2912076",5299:"6eda11bb",5395:"d82f4c13",5457:"48e5e2fb",5582:"fb876156",5619:"5e183045",5666:"ac4aa30b",5741:"43ac237d",5742:"20b2aef7",6223:"3ef422bc",6468:"a155ec2b",6722:"7830ce66",6827:"840f3cfb",6969:"51381fe1",7001:"184791cf",7098:"6fbe4646",7135:"acc0117d",7377:"c0392c7d",7381:"e5bcb76a",7394:"d20d39ea",7395:"4ced226b",7472:"f0ecf77d",7514:"b1ff7e29",7643:"6922b99d",7678:"33640f61",7774:"ac2745d5",7812:"365924a4",8065:"27f76f51",8121:"3735ac6f",8130:"44cf7915",8146:"765b12a9",8209:"2feb7c25",8401:"0e3dc5a0",8829:"2420e882",8880:"0d1d3a6c",9048:"94ecb513",9101:"8871d552",9169:"6918bacc",9183:"5ca66cf3",9597:"289a336c",9647:"4964a51d",9729:"9bfc53d1",9849:"80dcd13f",9858:"c01fd0e1"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),c={},d="stylable-io:",r.l=(e,a,f,b)=>{if(c[e])c[e].push(a);else{var t,o;if(void 0!==f)for(var n=document.getElementsByTagName("script"),i=0;i<n.length;i++){var l=n[i];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==d+f){t=l;break}}t||(o=!0,(t=document.createElement("script")).charset="utf-8",t.timeout=120,r.nc&&t.setAttribute("nonce",r.nc),t.setAttribute("data-webpack",d+f),t.src=e),c[e]=[a];var u=(a,f)=>{t.onerror=t.onload=null,clearTimeout(s);var d=c[e];if(delete c[e],t.parentNode&&t.parentNode.removeChild(t),d&&d.forEach((e=>e(f))),a)return a(f)},s=setTimeout(u.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=u.bind(null,t.onerror),t.onload=u.bind(null,t.onload),o&&document.head.appendChild(t)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.p="/",r.gca=function(e){return e={17896441:"8401",24352365:"5395",35811679:"7135",a2b316bf:"150",cb737cc7:"242",fe460ebe:"420",de106496:"614",bfefe422:"693","46d93a8f":"734","24ff752b":"825","0058b4c6":"849","825e4603":"1026",a7456010:"1235","922647ed":"1274",fde4315e:"1480","084229dc":"1701","32382f69":"1858",acecf23e:"1903","0a256791":"2110","1a4e3797":"2138",bc80c935:"2346","866f0f84":"2619","7df4dfbf":"2670","49b68603":"2679","9e4087bc":"2711",e74825b7:"2765",ccc49370:"3249","0ce74438":"3365",ebfcd236:"3746","79455fbf":"3879","1a5eac39":"4215","5e66eab8":"4293",e8f63a9c:"4412","1df93b7f":"4583","89bbbeae":"4715",de714d10:"4729","6875c492":"4813",c9cac9d9:"4918","138e0e15":"4921","5ec46957":"4947",a399b375:"5076","371f5dc2":"5184",a2cbecc3:"5299","6e96288b":"5457",f5df1cd5:"5619","26a8bbe9":"5666",aba21aa0:"5742",acfb8e34:"6223","17347b34":"6468",ab324915:"6722",baf0d4a2:"6827","14eb3368":"6969",f0dcc6ac:"7001",a7bd4aaa:"7098",e19b9990:"7377",d879f3fa:"7381",c0d90f50:"7394","587a03c1":"7395","814f3328":"7472",b1a4f681:"7514",a6aa9e1f:"7643","2de44985":"7678","8abe6768":"7774",ef20d218:"8065","3a2db09e":"8121",f81c1134:"8130",c15d9823:"8146","01a85c17":"8209",f242c874:"8829","57b59cd4":"8880",a94703ab:"9048",c8df2e0f:"9101","2ce01146":"9169","705f3d56":"9183","1f7dc951":"9597","5e95c892":"9647","945a8992":"9729",b10d9af9:"9849","36994c47":"9858"}[e]||e,r.p+r.u(e)},(()=>{r.b=document.baseURI||self.location.href;var e={5354:0,1869:0};r.f.j=(a,f)=>{var c=r.o(e,a)?e[a]:void 0;if(0!==c)if(c)f.push(c[2]);else if(/^(1869|5354)$/.test(a))e[a]=0;else{var d=new Promise(((f,d)=>c=e[a]=[f,d]));f.push(c[2]=d);var b=r.p+r.u(a),t=new Error;r.l(b,(f=>{if(r.o(e,a)&&(0!==(c=e[a])&&(e[a]=void 0),c)){var d=f&&("load"===f.type?"missing":f.type),b=f&&f.target&&f.target.src;t.message="Loading chunk "+a+" failed.\n("+d+": "+b+")",t.name="ChunkLoadError",t.type=d,t.request=b,c[1](t)}}),"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,f)=>{var c,d,b=f[0],t=f[1],o=f[2],n=0;if(b.some((a=>0!==e[a]))){for(c in t)r.o(t,c)&&(r.m[c]=t[c]);if(o)var i=o(r)}for(a&&a(f);n<b.length;n++)d=b[n],r.o(e,d)&&e[d]&&e[d][0](),e[d]=0;return r.O(i)},f=self.webpackChunkstylable_io=self.webpackChunkstylable_io||[];f.forEach(a.bind(null,0)),f.push=a.bind(null,f.push.bind(f))})()})(); \ No newline at end of file +(()=>{"use strict";var e,a,f,c,d,b={},t={};function r(e){var a=t[e];if(void 0!==a)return a.exports;var f=t[e]={id:e,loaded:!1,exports:{}};return b[e].call(f.exports,f,f.exports,r),f.loaded=!0,f.exports}r.m=b,r.c=t,e=[],r.O=(a,f,c,d)=>{if(!f){var b=1/0;for(i=0;i<e.length;i++){f=e[i][0],c=e[i][1],d=e[i][2];for(var t=!0,o=0;o<f.length;o++)(!1&d||b>=d)&&Object.keys(r.O).every((e=>r.O[e](f[o])))?f.splice(o--,1):(t=!1,d<b&&(b=d));if(t){e.splice(i--,1);var n=c();void 0!==n&&(a=n)}}return a}d=d||0;for(var i=e.length;i>0&&e[i-1][2]>d;i--)e[i]=e[i-1];e[i]=[f,c,d]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},f=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,c){if(1&c&&(e=this(e)),8&c)return e;if("object"==typeof e&&e){if(4&c&&e.__esModule)return e;if(16&c&&"function"==typeof e.then)return e}var d=Object.create(null);r.r(d);var b={};a=a||[null,f({}),f([]),f(f)];for(var t=2&c&&e;"object"==typeof t&&!~a.indexOf(t);t=f(t))Object.getOwnPropertyNames(t).forEach((a=>b[a]=()=>e[a]));return b.default=()=>e,r.d(d,b),d},r.d=(e,a)=>{for(var f in a)r.o(a,f)&&!r.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:a[f]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((a,f)=>(r.f[f](e,a),a)),[])),r.u=e=>"assets/js/"+({150:"a2b316bf",242:"cb737cc7",420:"fe460ebe",614:"de106496",693:"bfefe422",734:"46d93a8f",825:"24ff752b",849:"0058b4c6",1026:"825e4603",1235:"a7456010",1274:"922647ed",1480:"fde4315e",1701:"084229dc",1858:"32382f69",1903:"acecf23e",2110:"0a256791",2138:"1a4e3797",2346:"bc80c935",2619:"866f0f84",2670:"7df4dfbf",2679:"49b68603",2711:"9e4087bc",2765:"e74825b7",3249:"ccc49370",3365:"0ce74438",3746:"ebfcd236",3879:"79455fbf",4215:"1a5eac39",4293:"5e66eab8",4412:"e8f63a9c",4583:"1df93b7f",4715:"89bbbeae",4729:"de714d10",4813:"6875c492",4918:"c9cac9d9",4921:"138e0e15",4947:"5ec46957",5076:"a399b375",5184:"371f5dc2",5299:"a2cbecc3",5395:"24352365",5457:"6e96288b",5619:"f5df1cd5",5666:"26a8bbe9",5742:"aba21aa0",6223:"acfb8e34",6468:"17347b34",6722:"ab324915",6827:"baf0d4a2",6969:"14eb3368",7001:"f0dcc6ac",7098:"a7bd4aaa",7135:"35811679",7377:"e19b9990",7381:"d879f3fa",7394:"c0d90f50",7395:"587a03c1",7472:"814f3328",7514:"b1a4f681",7643:"a6aa9e1f",7678:"2de44985",7774:"8abe6768",8065:"ef20d218",8121:"3a2db09e",8130:"f81c1134",8146:"c15d9823",8209:"01a85c17",8401:"17896441",8829:"f242c874",8880:"57b59cd4",9048:"a94703ab",9101:"c8df2e0f",9169:"2ce01146",9183:"705f3d56",9597:"1f7dc951",9647:"5e95c892",9729:"945a8992",9849:"b10d9af9",9858:"36994c47"}[e]||e)+"."+{150:"7180e85f",242:"25dc0627",420:"3c13ec03",489:"8a73ff29",614:"31074b54",693:"839d2a79",734:"d200022c",825:"68406a9b",849:"ed35196b",1026:"55187120",1235:"748318e0",1274:"156ba5b9",1480:"e2e2b344",1701:"2fdeb2d3",1858:"1f361507",1903:"ca93a1c9",2110:"0ca740b9",2138:"19bd1aaa",2237:"b76b95a8",2346:"677b496d",2619:"31688e7e",2670:"b9fac3b2",2679:"98d8150b",2711:"488edf24",2765:"7addcb27",3249:"78db7b43",3365:"737daa66",3746:"f0675543",3879:"043005c4",4215:"31cacb96",4293:"1b5146ce",4412:"d84a4db7",4583:"ad4a7afe",4715:"38c1abf6",4729:"be755631",4809:"a6140d43",4813:"1a2369d8",4918:"e1212cfe",4921:"c5707e85",4947:"54ab8441",5076:"8bfc7039",5184:"dd91d3d5",5299:"6e24772c",5394:"6807d4db",5395:"0cdd2c1d",5457:"f3c8303e",5619:"2cd498a2",5666:"1a9976db",5741:"43ac237d",5742:"20b2aef7",6223:"2406a350",6321:"989cbb43",6369:"e7b75b19",6468:"21ab0fd2",6722:"01adaa12",6827:"7ab90aee",6969:"fa85d82b",7001:"7d2c19e2",7098:"579ec113",7135:"88cce2c2",7377:"9b71d185",7381:"491194ca",7394:"19dd0b17",7395:"ef46d825",7472:"f0ecf77d",7514:"c21d0944",7643:"4afca62e",7678:"be3847f0",7774:"6c61f143",8065:"c82ab2db",8121:"3735ac6f",8130:"44cf7915",8146:"765b12a9",8209:"b778df26",8401:"01c5f8f4",8829:"5c4c0ad4",8880:"b2b4e011",9048:"852b20e9",9101:"8871d552",9169:"3ea843c5",9183:"d3a20e59",9597:"67324d4b",9647:"2cc33f12",9729:"07b1c858",9849:"c04616ab",9858:"c01fd0e1"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),c={},d="stylable-io:",r.l=(e,a,f,b)=>{if(c[e])c[e].push(a);else{var t,o;if(void 0!==f)for(var n=document.getElementsByTagName("script"),i=0;i<n.length;i++){var l=n[i];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==d+f){t=l;break}}t||(o=!0,(t=document.createElement("script")).charset="utf-8",t.timeout=120,r.nc&&t.setAttribute("nonce",r.nc),t.setAttribute("data-webpack",d+f),t.src=e),c[e]=[a];var u=(a,f)=>{t.onerror=t.onload=null,clearTimeout(s);var d=c[e];if(delete c[e],t.parentNode&&t.parentNode.removeChild(t),d&&d.forEach((e=>e(f))),a)return a(f)},s=setTimeout(u.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=u.bind(null,t.onerror),t.onload=u.bind(null,t.onload),o&&document.head.appendChild(t)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.p="/",r.gca=function(e){return e={17896441:"8401",24352365:"5395",35811679:"7135",a2b316bf:"150",cb737cc7:"242",fe460ebe:"420",de106496:"614",bfefe422:"693","46d93a8f":"734","24ff752b":"825","0058b4c6":"849","825e4603":"1026",a7456010:"1235","922647ed":"1274",fde4315e:"1480","084229dc":"1701","32382f69":"1858",acecf23e:"1903","0a256791":"2110","1a4e3797":"2138",bc80c935:"2346","866f0f84":"2619","7df4dfbf":"2670","49b68603":"2679","9e4087bc":"2711",e74825b7:"2765",ccc49370:"3249","0ce74438":"3365",ebfcd236:"3746","79455fbf":"3879","1a5eac39":"4215","5e66eab8":"4293",e8f63a9c:"4412","1df93b7f":"4583","89bbbeae":"4715",de714d10:"4729","6875c492":"4813",c9cac9d9:"4918","138e0e15":"4921","5ec46957":"4947",a399b375:"5076","371f5dc2":"5184",a2cbecc3:"5299","6e96288b":"5457",f5df1cd5:"5619","26a8bbe9":"5666",aba21aa0:"5742",acfb8e34:"6223","17347b34":"6468",ab324915:"6722",baf0d4a2:"6827","14eb3368":"6969",f0dcc6ac:"7001",a7bd4aaa:"7098",e19b9990:"7377",d879f3fa:"7381",c0d90f50:"7394","587a03c1":"7395","814f3328":"7472",b1a4f681:"7514",a6aa9e1f:"7643","2de44985":"7678","8abe6768":"7774",ef20d218:"8065","3a2db09e":"8121",f81c1134:"8130",c15d9823:"8146","01a85c17":"8209",f242c874:"8829","57b59cd4":"8880",a94703ab:"9048",c8df2e0f:"9101","2ce01146":"9169","705f3d56":"9183","1f7dc951":"9597","5e95c892":"9647","945a8992":"9729",b10d9af9:"9849","36994c47":"9858"}[e]||e,r.p+r.u(e)},(()=>{r.b=document.baseURI||self.location.href;var e={5354:0,1869:0};r.f.j=(a,f)=>{var c=r.o(e,a)?e[a]:void 0;if(0!==c)if(c)f.push(c[2]);else if(/^(1869|5354)$/.test(a))e[a]=0;else{var d=new Promise(((f,d)=>c=e[a]=[f,d]));f.push(c[2]=d);var b=r.p+r.u(a),t=new Error;r.l(b,(f=>{if(r.o(e,a)&&(0!==(c=e[a])&&(e[a]=void 0),c)){var d=f&&("load"===f.type?"missing":f.type),b=f&&f.target&&f.target.src;t.message="Loading chunk "+a+" failed.\n("+d+": "+b+")",t.name="ChunkLoadError",t.type=d,t.request=b,c[1](t)}}),"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,f)=>{var c,d,b=f[0],t=f[1],o=f[2],n=0;if(b.some((a=>0!==e[a]))){for(c in t)r.o(t,c)&&(r.m[c]=t[c]);if(o)var i=o(r)}for(a&&a(f);n<b.length;n++)d=b[n],r.o(e,d)&&e[d]&&e[d][0](),e[d]=0;return r.O(i)},f=self.webpackChunkstylable_io=self.webpackChunkstylable_io||[];f.forEach(a.bind(null,0)),f.push=a.bind(null,f.push.bind(f))})()})(); \ No newline at end of file diff --git a/blog.html b/blog.html index 31b8bb0d..1f71b5e3 100644 --- a/blog.html +++ b/blog.html @@ -2,19 +2,19 @@ <html lang="en" dir="ltr" class="blog-wrapper blog-list-page plugin-blog plugin-id-default" data-has-hydrated="false"> <head> <meta charset="UTF-8"> -<meta name="generator" content="Docusaurus v3.6.3"> +<meta name="generator" content="Docusaurus v3.7.0"> <title data-rh="true">Blog | Stylable - + - - + + -
Skip to main content

Welcome to Stylable v5

· 3 min read
Barak Igal
Barak Igal
Co-creator of Stylable
Ido Rosenthal
Ido Rosenthal
Co-creator of Stylable
Tom Raviv
Tom Raviv
Co-creator of Stylable

First time hearing about Stylable?​

+

Welcome to Stylable v5

· 3 min read
Barak Igal
Barak Igal
Co-creator of Stylable
Ido Rosenthal
Ido Rosenthal
Co-creator of Stylable
Tom Raviv
Tom Raviv
Co-creator of Stylable

First time hearing about Stylable?​

No worries! Stylable is a tool that empowers you to create safe, reusable style APIs for your components. It's a superset of CSS that adds a type system to it, providing type safety, and powerful language capabilities.

Want to learn more? We recently started writing a new handbook to help get you up to speed, and more content is on its way over the coming weeks.

What went on behind the scenes?​

@@ -36,6 +36,6 @@

join the community

Want to be a part of the discussion? See our ongoing development on GitHub, follow us on Twitter, and join the Discord where we're always up for a chat about styling.

We hope you'll join us on this journey, and we're looking forward to hearing your feedback.

-

- The Stylable team

+

- The Stylable team

\ No newline at end of file diff --git a/blog/archive.html b/blog/archive.html index 98f2be86..3d0dfb76 100644 --- a/blog/archive.html +++ b/blog/archive.html @@ -2,18 +2,18 @@ - + Archive | Stylable - + - - + + -
Skip to main content

Archive

Archive

2022​

+
Skip to main content

Archive

Archive

2022​

\ No newline at end of file diff --git a/blog/tags.html b/blog/tags.html index 33439f1a..df3e6832 100644 --- a/blog/tags.html +++ b/blog/tags.html @@ -2,18 +2,18 @@ - + Tags | Stylable - + - - + + -
Skip to main content

Tags

+
Skip to main content

Tags

\ No newline at end of file diff --git a/blog/tags/intro.html b/blog/tags/intro.html index 956bf5cd..aeb9ae36 100644 --- a/blog/tags/intro.html +++ b/blog/tags/intro.html @@ -2,19 +2,19 @@ - + One post tagged with "intro" | Stylable - + - - + + -
Skip to main content

One post tagged with "intro"

View All Tags

Welcome to Stylable v5

· 3 min read
Barak Igal
Barak Igal
Co-creator of Stylable
Ido Rosenthal
Ido Rosenthal
Co-creator of Stylable
Tom Raviv
Tom Raviv
Co-creator of Stylable

First time hearing about Stylable?​

+

One post tagged with "intro"

View All Tags

Welcome to Stylable v5

· 3 min read
Barak Igal
Barak Igal
Co-creator of Stylable
Ido Rosenthal
Ido Rosenthal
Co-creator of Stylable
Tom Raviv
Tom Raviv
Co-creator of Stylable

First time hearing about Stylable?​

No worries! Stylable is a tool that empowers you to create safe, reusable style APIs for your components. It's a superset of CSS that adds a type system to it, providing type safety, and powerful language capabilities.

Want to learn more? We recently started writing a new handbook to help get you up to speed, and more content is on its way over the coming weeks.

What went on behind the scenes?​

@@ -36,6 +36,6 @@

join the community

Want to be a part of the discussion? See our ongoing development on GitHub, follow us on Twitter, and join the Discord where we're always up for a chat about styling.

We hope you'll join us on this journey, and we're looking forward to hearing your feedback.

-

- The Stylable team

+

- The Stylable team

\ No newline at end of file diff --git a/blog/tags/release.html b/blog/tags/release.html index c99b0034..2f833908 100644 --- a/blog/tags/release.html +++ b/blog/tags/release.html @@ -2,19 +2,19 @@ - + One post tagged with "release" | Stylable - + - - + + -
Skip to main content

One post tagged with "release"

View All Tags

Welcome to Stylable v5

· 3 min read
Barak Igal
Barak Igal
Co-creator of Stylable
Ido Rosenthal
Ido Rosenthal
Co-creator of Stylable
Tom Raviv
Tom Raviv
Co-creator of Stylable

First time hearing about Stylable?​

+

One post tagged with "release"

View All Tags

Welcome to Stylable v5

· 3 min read
Barak Igal
Barak Igal
Co-creator of Stylable
Ido Rosenthal
Ido Rosenthal
Co-creator of Stylable
Tom Raviv
Tom Raviv
Co-creator of Stylable

First time hearing about Stylable?​

No worries! Stylable is a tool that empowers you to create safe, reusable style APIs for your components. It's a superset of CSS that adds a type system to it, providing type safety, and powerful language capabilities.

Want to learn more? We recently started writing a new handbook to help get you up to speed, and more content is on its way over the coming weeks.

What went on behind the scenes?​

@@ -36,6 +36,6 @@

join the community

Want to be a part of the discussion? See our ongoing development on GitHub, follow us on Twitter, and join the Discord where we're always up for a chat about styling.

We hope you'll join us on this journey, and we're looking forward to hearing your feedback.

-

- The Stylable team

+

- The Stylable team

\ No newline at end of file diff --git a/blog/welcome-to-stylable-v5.html b/blog/welcome-to-stylable-v5.html index 3d34178e..a7cf372a 100644 --- a/blog/welcome-to-stylable-v5.html +++ b/blog/welcome-to-stylable-v5.html @@ -2,19 +2,19 @@ - + Welcome to Stylable v5 | Stylable - + - - + + -
Skip to main content

Welcome to Stylable v5

· 3 min read
Barak Igal
Barak Igal
Co-creator of Stylable
Ido Rosenthal
Ido Rosenthal
Co-creator of Stylable
Tom Raviv
Tom Raviv
Co-creator of Stylable

First time hearing about Stylable?​

+

Welcome to Stylable v5

· 3 min read
Barak Igal
Barak Igal
Co-creator of Stylable
Ido Rosenthal
Ido Rosenthal
Co-creator of Stylable
Tom Raviv
Tom Raviv
Co-creator of Stylable

First time hearing about Stylable?​

No worries! Stylable is a tool that empowers you to create safe, reusable style APIs for your components. It's a superset of CSS that adds a type system to it, providing type safety, and powerful language capabilities.

Want to learn more? We recently started writing a new handbook to help get you up to speed, and more content is on its way over the coming weeks.

What went on behind the scenes?​

@@ -36,6 +36,6 @@

join the community

Want to be a part of the discussion? See our ongoing development on GitHub, follow us on Twitter, and join the Discord where we're always up for a chat about styling.

We hope you'll join us on this journey, and we're looking forward to hearing your feedback.

-

- The Stylable team

+

- The Stylable team

\ No newline at end of file diff --git a/community.html b/community.html index 2534845c..dd816702 100644 --- a/community.html +++ b/community.html @@ -2,18 +2,18 @@ - + Stylable | Stylable - + - - + + -
Skip to main content

Join the Community

GitHub

Track our development, search open issues, report new ones, and contribute back to the project

Twitter

Twitter

Follow our Twitter to stay up to date with the latest happenings in Stylable

Discord

Discord

Join our Discord community, where you can chat with us, ask questions, and showcase your work

+
Skip to main content

Join the Community

GitHub

Track our development, search open issues, report new ones, and contribute back to the project

Twitter

Twitter

Follow our Twitter to stay up to date with the latest happenings in Stylable

Discord

Discord

Join our Discord community, where you can chat with us, ask questions, and showcase your work

\ No newline at end of file diff --git a/docs/attributions.html b/docs/attributions.html index b7e224b5..51825f81 100644 --- a/docs/attributions.html +++ b/docs/attributions.html @@ -2,19 +2,19 @@ - + Attributions | Stylable - + - - + + -
Skip to main content

Attributions

Landing Page Images​

+
+
\ No newline at end of file diff --git a/docs/getting-started/boilerplate.html b/docs/getting-started/boilerplate.html index b6470b1e..e1b2e08e 100644 --- a/docs/getting-started/boilerplate.html +++ b/docs/getting-started/boilerplate.html @@ -2,19 +2,19 @@ - + Boilerplate | Stylable - + - - + + -
Skip to main content

Boilerplate

To get started quickly, Stylable offers a boilerplate utility that can be used to bootstrap new projects from a list of templates.

+

Boilerplate

To get started quickly, Stylable offers a boilerplate utility that can be used to bootstrap new projects from a list of templates.

ts-react-webpack (app)​

This is the default template, it creates a new project and includes:

Integrated and ready to learn?​

-

Once your project is up and running, you can begin styling with Stylable. Read through the Handbook or explore the API References to help guide you in your work.

+

Once your project is up and running, you can begin styling with Stylable. Read through the Handbook or explore the API References to help guide you in your work.

\ No newline at end of file diff --git a/docs/getting-started/integrations.html b/docs/getting-started/integrations.html index 43428b44..e0268992 100644 --- a/docs/getting-started/integrations.html +++ b/docs/getting-started/integrations.html @@ -2,18 +2,18 @@ - + Integrations | Stylable - + - - + + -
Skip to main content

Integrations

Click on one of our available integrations below to learn more about how to use it.

+
Skip to main content

Integrations

Click on one of our available integrations below to learn more about how to use it.

\ No newline at end of file diff --git a/docs/getting-started/intro.html b/docs/getting-started/intro.html index 97a8e1f5..25f7e86d 100644 --- a/docs/getting-started/intro.html +++ b/docs/getting-started/intro.html @@ -2,19 +2,19 @@ - + Intro | Stylable - + - - + + -
Skip to main content

Intro

What is Stylable?​

+

Intro

What is Stylable?​

Stylable is a CSS preprocessor that enables you to write reusable, highly-performant, styled components. Each component exposes a style API that maps its internal parts so you can reuse components across teams without sacrificing stylability.

  • Namespace styles to components so they don't "leak" and clash with other styles.
    • @@ -40,6 +40,6 @@

    Wan

  • Play with Stylable Online - Take Stylable for a spin and see how it works in the Stylable Playground.

    • -

+
\ No newline at end of file diff --git a/docs/getting-started/manual-integration.html b/docs/getting-started/manual-integration.html index e43f0602..68efd9e3 100644 --- a/docs/getting-started/manual-integration.html +++ b/docs/getting-started/manual-integration.html @@ -2,19 +2,19 @@ - + Manual Integration | Stylable - + - - + + -
Skip to main content

Manual Integration

When integrating Stylable into a project, there are key differences to consider whether the project is an application or a component library.

+

Manual Integration

When integrating Stylable into a project, there are key differences to consider whether the project is an application or a component library.

An application is a project that is deployed to production for end-users to access. While a component library is a project that is published to a package manager for other developers to consume in their projects.

This difference mostly manifests in how these projects are built. For example, an application might build a final bundle for deployment, while a component library would build standalone modules to be consumed in various ways.

TypeScript development​

@@ -39,6 +39,6 @@

Integrated and ready to learn?​

-

Once you've finished configuring your project, you can begin styling with Stylable. Read through the Handbook or explore the API References to help guide you in your work.

+

Once you've finished configuring your project, you can begin styling with Stylable. Read through the Handbook or explore the API References to help guide you in your work.

\ No newline at end of file diff --git a/docs/getting-started/nextjs-integration.html b/docs/getting-started/nextjs-integration.html index 94d6a1e7..f3ee563d 100644 --- a/docs/getting-started/nextjs-integration.html +++ b/docs/getting-started/nextjs-integration.html @@ -2,19 +2,19 @@ - + NextJS | Stylable - + - - + + -
Skip to main content

NextJS

There are a few steps you need to follow to integrate Stylable into your NextJS project.

+

NextJS

There are a few steps you need to follow to integrate Stylable into your NextJS project.

  1. Install @stylable/webpack-plugin as a devDependency in your package.json file.
  2. Create a next.config.js file.
    3. @@ -43,6 +43,6 @@

    App dire
  3. set experimentalAttachCssToContainingChunks:true to change the way the generated CSS asset is attached to Webpack chunks in order for Next.js to pick it up as a CSS module and not a JavaScript module.

Example Configuration:​

-
next.config.js
const { 
  StylableWebpackPlugin,
  applyWebpackConfigStylableExcludes 
} = require('@stylable/webpack-plugin');

/* 
 * single optimizer for NextJS multiple builds 
 * in order to sync client/server namespaces 
*/
const StylableOptimizer = require('@stylable/optimizer').StylableOptimizer;
const stylableOptimizer = new StylableOptimizer();

module.exports = {
  webpack: (config) => {
    /* exclude Stylable files from all other loaders */
    applyWebpackConfigStylableExcludes(config);

    /* add the Stylable plugin to the webpack configuration */
    config.plugins.push(
      new StylableWebpackPlugin({
        /* let NextJS handle assets */
        filterAssets: () => false,

        /* output CSS to the correct location */
        filename: 'static/css/stylable.[contenthash].css',

        /* a shared optimizer instance */
        optimizer: stylableOptimizer,

        /* serve CSS as a bundled asset */
        cssInjection: 'css',

        /* attach CSS to every chunk containing a Stylable stylesheet,
           instead of to entry chunks 
        */
        experimentalAttachCssToContainingChunks: true,
      })
    );
    return config;
  },
};
+
next.config.js
const { 
  StylableWebpackPlugin,
  applyWebpackConfigStylableExcludes 
} = require('@stylable/webpack-plugin');

/* 
 * single optimizer for NextJS multiple builds 
 * in order to sync client/server namespaces 
*/
const StylableOptimizer = require('@stylable/optimizer').StylableOptimizer;
const stylableOptimizer = new StylableOptimizer();

module.exports = {
  webpack: (config) => {
    /* exclude Stylable files from all other loaders */
    applyWebpackConfigStylableExcludes(config);

    /* add the Stylable plugin to the webpack configuration */
    config.plugins.push(
      new StylableWebpackPlugin({
        /* let NextJS handle assets */
        filterAssets: () => false,

        /* output CSS to the correct location */
        filename: 'static/css/stylable.[contenthash].css',

        /* a shared optimizer instance */
        optimizer: stylableOptimizer,

        /* serve CSS as a bundled asset */
        cssInjection: 'css',

        /* attach CSS to every chunk containing a Stylable stylesheet,
           instead of to entry chunks 
        */
        experimentalAttachCssToContainingChunks: true,
      })
    );
    return config;
  },
};
\ No newline at end of file diff --git a/docs/getting-started/rollup-integration.html b/docs/getting-started/rollup-integration.html index 73c4124f..c94c16d8 100644 --- a/docs/getting-started/rollup-integration.html +++ b/docs/getting-started/rollup-integration.html @@ -2,19 +2,19 @@ - + Rollup | Stylable - + - - + + -
Skip to main content

Rollup

The Stylable Rollup integration provides development, build, and bundle capabilities.

+

Rollup

The Stylable Rollup integration provides development, build, and bundle capabilities.

Install​

Install the @stylable/rollup-plugin as a dev dependency in your local project.

Using npm:

@@ -23,6 +23,6 @@

Install
yarn add @stylable/rollup-plugin --dev

Configuration​

rollup.config.js
const { stylableRollupPlugin } = require('@stylable/rollup-plugin');

module.exports = {
  plugins: [stylableRollupPlugin()],
};
-

For more information on configuring the @stylable/rollup-plugin, see the readme file.

+

For more information on configuring the @stylable/rollup-plugin, see the readme file.

\ No newline at end of file diff --git a/docs/getting-started/storybook-integration.html b/docs/getting-started/storybook-integration.html index 2c1f803c..9a7414d1 100644 --- a/docs/getting-started/storybook-integration.html +++ b/docs/getting-started/storybook-integration.html @@ -2,25 +2,25 @@ - + Storybook | Stylable - + - - + + -
Skip to main content

Storybook

To integrate Stylable with Storybook, you need to do two things:

+

Storybook

To integrate Stylable with Storybook, you need to do two things:

  1. Exclude Stylable files (*.st.css) from all other existing CSS loaders.
  2. Add StylableWebpackPlugin to the webpack configuration.

Add the following snippit to your Storybook webpack configuration to get these two actions done:

const {
    StylableWebpackPlugin,
    applyWebpackConfigStylableExcludes
} = require('@stylable/webpack-plugin');

module.exports = {
    stories: ...,
    addons: ...,
    webpackFinal: (config) => {
        /* find all css loaders and add exclude .st.css files from them */
        applyWebpackConfigStylableExcludes(config);

        /* inject StylableWebpackPlugin */
        config.plugins.push(new StylableWebpackPlugin());
        return config;
    }
}
-
caution

This snippet should work with default Storybook configuration. It assumes some things about the structure of the file which might not be true in future releases of Storybook.

+
caution

This snippet should work with default Storybook configuration. It assumes some things about the structure of the file which might not be true in future releases of Storybook.

\ No newline at end of file diff --git a/docs/getting-started/stylable-config.html b/docs/getting-started/stylable-config.html index ed78e5bd..835de1eb 100644 --- a/docs/getting-started/stylable-config.html +++ b/docs/getting-started/stylable-config.html @@ -2,19 +2,19 @@ - + stylable.config.js | Stylable - + - - + + -
Skip to main content

stylable.config.js

The stylable.config.js file acts as a central place where you can write your top level configuration for the entire project, so that they are re-used across builds and integrations, and reduce code duplications.

+

stylable.config.js

The stylable.config.js file acts as a central place where you can write your top level configuration for the entire project, so that they are re-used across builds and integrations, and reduce code duplications.

The configuration file should be located in the project root directory in order to be picked up automatically.

defaultConfig​

The defaultConfig export field is used to set default configuration for Stylable instances across all integrations and tooling.

@@ -35,6 +35,6 @@

stcCon

webpackPlugin​

The webpackPlugin export field is used to configure any Stylable Webpack plugins in the project. The StylableWebpackPlugin will attempt to load the nearest stylable.config.js file and use its webpackPlugin export as for its options.

-

To learn more about the building Stylable using Webpack, see the Webpack integration page.

+

To learn more about the building Stylable using Webpack, see the Webpack integration page.

\ No newline at end of file diff --git a/docs/getting-started/tooling/cli.html b/docs/getting-started/tooling/cli.html index 4e362577..71f04534 100644 --- a/docs/getting-started/tooling/cli.html +++ b/docs/getting-started/tooling/cli.html @@ -2,19 +2,19 @@ - + CLI | Stylable - + - - + + -
Skip to main content

CLI

@stylable/cli is a low-level utility used for working with Stylable projects directly.

+

CLI

@stylable/cli is a low-level utility used for working with Stylable projects directly.

It lets you:

  • Build and transform stylesheets into JavaScript modules
    • @@ -36,6 +36,6 @@

    Co

    Exporting a Generator named export class from a JavaScript file will allow it to be used as a customGenerator.

    Usually this generator will inherit from our base generator class and override the generateReExports and generateIndexSource methods.

    This example demonstrates the default generator behavior (only exports stylesheet roots):

    -
    import { Generator as Base, ReExports } from '@stylable/cli';

    export class Generator extends Base {
      public generateReExports(filePath): ReExports {
        return {
          root: this.filename2varname(filePath),
          parts: {},
          keyframes: {},
          stVars: {},
          vars: {},
        };
      }
      protected generateIndexSource(indexFileTargetPath: string) {
        const source = super.generateIndexSource(indexFileTargetPath);
        return '@st-namespace "INDEX";\n' + source;
      }
    }

+
import { Generator as Base, ReExports } from '@stylable/cli';

export class Generator extends Base {
  public generateReExports(filePath): ReExports {
    return {
      root: this.filename2varname(filePath),
      parts: {},
      keyframes: {},
      stVars: {},
      vars: {},
    };
  }
  protected generateIndexSource(indexFileTargetPath: string) {
    const source = super.generateIndexSource(indexFileTargetPath);
    return '@st-namespace "INDEX";\n' + source;
  }
}
\ No newline at end of file diff --git a/docs/getting-started/tooling/stylable-intelligence.html b/docs/getting-started/tooling/stylable-intelligence.html index 5fb5cc3a..4dbb6060 100644 --- a/docs/getting-started/tooling/stylable-intelligence.html +++ b/docs/getting-started/tooling/stylable-intelligence.html @@ -2,19 +2,19 @@ - + Stylable Intelligence | Stylable - + - - + + -
Skip to main content

Stylable Intelligence

Stylable Intelligence is an extension implementing the Language Server Protocol that provides IDE support for Stylable. It currently includes:

+

Stylable Intelligence

Stylable Intelligence is an extension implementing the Language Server Protocol that provides IDE support for Stylable. It currently includes:

  • Syntax highlighting
  • Code completion
    • @@ -39,6 +39,6 @@

    CSS
    note

    Future plans include:

    • More Language Server features.
    • Support for JetBrains IDEs (WebStorm, IntelliJ). Currently supported only in VSCode.
      • -

+
\ No newline at end of file diff --git a/docs/getting-started/typescript-integration.html b/docs/getting-started/typescript-integration.html index 312f6f0c..4598d167 100644 --- a/docs/getting-started/typescript-integration.html +++ b/docs/getting-started/typescript-integration.html @@ -2,19 +2,19 @@ - + TypeScript | Stylable - + - - + + -
Skip to main content

TypeScript

Whenever a TypeScript file imports a Stylable stylesheet, you must provide a type for it. This is because TypeScript has no way of knowing what's inside Stylable *.st.css files.

+

TypeScript

Whenever a TypeScript file imports a Stylable stylesheet, you must provide a type for it. This is because TypeScript has no way of knowing what's inside Stylable *.st.css files.

Import example
import { classes } from './button.st.css'; // requires typings

Generating types per stylesheet​

Stylable can generate a declaration file for each stylesheet. This approach has the advantage of providing exact typing information for each individual stylesheet runtime API.

@@ -49,6 +49,6 @@

globals.d.ts
declare module 'third-party-package/*.st.css' {
  export * from '@stylable/runtime/stylesheet';

  const defaultExport: unknown;
  export default defaultExport;
}

Publishing​

If you publish any *.st.css files in your package, you should also publish the .d.ts and .d.ts.map files adjacent to them. This practice leads to a better experience for users consuming your project.

-
stc --srcDir="src" --outDir="dist" --stcss --dts
+
stc --srcDir="src" --outDir="dist" --stcss --dts
\ No newline at end of file diff --git a/docs/getting-started/webpack-integration.html b/docs/getting-started/webpack-integration.html index 600443c2..cfe3e4ab 100644 --- a/docs/getting-started/webpack-integration.html +++ b/docs/getting-started/webpack-integration.html @@ -2,19 +2,19 @@ - + Webpack | Stylable - + - - + + -
Skip to main content

Webpack

The Stylable Webpack integration provides development, build, and bundle capabilities.

+

Webpack

The Stylable Webpack integration provides development, build, and bundle capabilities.

Install​

Install the @stylable/webpack-plugin as a dev dependency in your local project.

Using npm:

@@ -31,6 +31,6 @@ 

const { StylableWebpackPlugin } = require('@stylable/webpack-plugin');

{
  plugins: [
    new StylableWebpackPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        exclude: /\.st\.css?/,
        use: ["css-loader"],
      },
    ],
  },
}

stylable.config.js​

Adding the webpackPlugin export field to the stylable.config.js will set as the default configuration for any Stylable Webpack plugins in the project.

-
module.exports.webpackPlugin = function (config) {
  return {
    ...config,
    optimize: {
      shortNamespaces: true,
      minify: true,
    },
  };
};
+
module.exports.webpackPlugin = function (config) {
  return {
    ...config,
    optimize: {
      shortNamespaces: true,
      minify: true,
    },
  };
};
\ No newline at end of file diff --git a/docs/guides/component-best-practices.html b/docs/guides/component-best-practices.html index 6c291dfd..8a7e3947 100644 --- a/docs/guides/component-best-practices.html +++ b/docs/guides/component-best-practices.html @@ -2,19 +2,19 @@ - + Stylable Component - Best Practices | Stylable - + - - + + -
Skip to main content

Stylable Component - Best Practices

Stylable components should be easily stylable and themable from the outside. This means that the stylesheet describing the component CSS should be as simple and generic as possible, and should expose a clear and concise API for its internal parts.

+

Stylable Component - Best Practices

Stylable components should be easily stylable and themable from the outside. This means that the stylesheet describing the component CSS should be as simple and generic as possible, and should expose a clear and concise API for its internal parts.

When building your components, we recommend following the guidelines below that we've collected through our work with Stylable:

Avoid size declarations​

Try avoiding size declaration just because it offers an easier API. To override a component specifying size limitations, you would need to override multiple CSS declarations.

@@ -55,6 +55,6 @@ 

@st-import [color1, --font-small] from "./project.st.css";

.item {
  background: value(color1);
  font-size: var(--font-small);
}

Keep SVG and images overridable​

When using an image element source or SVG directly in the DOM, it is not easy, and in some cases not possible, to modify the asset from outside the component using CSS.

-

When an asset is part of the style API, it should be placed in the background of an element, allowing it to be overridden from a parent component.

+

When an asset is part of the style API, it should be placed in the background of an element, allowing it to be overridden from a parent component.

\ No newline at end of file diff --git a/docs/guides/component-variants.html b/docs/guides/component-variants.html index 0ce3baed..45c79073 100644 --- a/docs/guides/component-variants.html +++ b/docs/guides/component-variants.html @@ -2,19 +2,19 @@ - + Component Variants | Stylable - + - - + + -
Skip to main content

Component Variants

When building a component library or an application, it is useful to define several semantic "flavors" of some components, for example a Button component that represents cancel.

+

Component Variants

When building a component library or an application, it is useful to define several semantic "flavors" of some components, for example a Button component that represents cancel.

Defining a component variant​

In your project's Stylable stylesheet used for the commonly used components in your project (usually named project.st.css) you:

    @@ -26,6 +26,6 @@

    Use component variants in components​

    A component Stylable stylesheet can use and extend component variants:

    comp.st.css
    @st-import [cancelButton] from "./project.st.css";

    /*
    selector: .comp__root .project__cancelButton.button__root
    js value: "project__cancelButton"
    */
    .root .cancelButton {
    }
    /*
    selector: .comp__cancel.project__cancelButton.button__root
    js value: "comp__cancel project__cancelButton"
    */
    .cancel {
      -st-extends: cancelButton;
    }
    -
    note

    For the .cancelButton selector, we manually added the .root class to avoid overriding cancelButton outside this scope.

+
note

For the .cancelButton selector, we manually added the .root class to avoid overriding cancelButton outside this scope.

\ No newline at end of file diff --git a/docs/guides/handbook/class.html b/docs/guides/handbook/class.html index 12c1f777..1993673c 100644 --- a/docs/guides/handbook/class.html +++ b/docs/guides/handbook/class.html @@ -2,19 +2,19 @@ - + Classes | Stylable - + - - + + -
Skip to main content

Classes

Classes are the most basic building block of stylable, used to mark elements on the DOM, so those could in turn be targeted and styled via our CSS.

+

Classes

Classes are the most basic building block of stylable, used to mark elements on the DOM, so those could in turn be targeted and styled via our CSS.

CSS classes​

A CSS class starts with a . (period) following a CSS identifier. Read more about CSS classes in the MDN documentation.

game.st.css
.player {
  background: green;
}
@@ -35,6 +35,6 @@

Naming tip< 
import { classes } from "./dialog.st.css";

classes.okButton;     // recommended
classes["ok-button"]; // not recommended
-

We would further recommend to avoid using special characters that are not valid JavaScript identifiers.

+

We would further recommend to avoid using special characters that are not valid JavaScript identifiers.

\ No newline at end of file diff --git a/docs/guides/handbook/classes.html b/docs/guides/handbook/classes.html index 47e4d3ba..9491f2e5 100644 --- a/docs/guides/handbook/classes.html +++ b/docs/guides/handbook/classes.html @@ -2,19 +2,19 @@ - + Classes | Stylable - + - - + + -
Skip to main content

Classes

    +

    Classes

    • opening intro paragraph

    CSS feature​

    @@ -24,6 +24,6 @@

    CSS featur 
    SOME EXAMPLE
    • explainer of example above
      • -

    +
\ No newline at end of file diff --git a/docs/guides/handbook/custom-state.html b/docs/guides/handbook/custom-state.html index 3f209e25..c5da6752 100644 --- a/docs/guides/handbook/custom-state.html +++ b/docs/guides/handbook/custom-state.html @@ -2,19 +2,19 @@ - + Custom State | Stylable - + - - + + -
Skip to main content

Custom State

In CSS, we have the ability to target native states of various elements using the pseudo-class syntax (for instance, :hover or :active).

+

Custom State

In CSS, we have the ability to target native states of various elements using the pseudo-class syntax (for instance, :hover or :active).

While this is very handy, as of today, CSS does not provide a way for us to define a custom state on every element. For example, we might want a registered custom state to represent a player element that has signed up for our game.

We could choose to implement such a state manually by using a class selector (e.g. using a BEM modifier: .NAMESPACE--registered) or attribute selector (e.g. [data-NAMESPACE-registered]).

This is a bit of a pain for several reasons. Unlike native pseudo-classes, a class or an attribute selector is not semantic, and so we lose the original intent. If a convention like BEM is used, then the semantics are conserved, but it increases the verbosity of our code.

@@ -32,6 +32,6 @@

Runtime

Now that we have defined our states, we want to be able to toggle them at runtime in our component.

game.jsx
import { cssStates, classes } from "./game.st.css";

// create a registered first ranking player
<div className={
    classes.player + " " + cssStates({ 
      registered: true,
      ranking: "first" 
    })}>
</div>;

Looking at the example above, we import the cssStates function and the classes mapping from our game.st.css stylesheet. We then create a div element to represent a registered and first rank player.

-

This example, where we manually concatenate the class and states, is quite verbose and potentially confusing. In the next chapter, we will explore Stylable's runtime feature set and see a cleaner way of working with states at runtime.

+

This example, where we manually concatenate the class and states, is quite verbose and potentially confusing. In the next chapter, we will explore Stylable's runtime feature set and see a cleaner way of working with states at runtime.

\ No newline at end of file diff --git a/docs/guides/handbook/extend.html b/docs/guides/handbook/extend.html index 183c0afd..f1394909 100644 --- a/docs/guides/handbook/extend.html +++ b/docs/guides/handbook/extend.html @@ -2,19 +2,19 @@ - + Extend | Stylable - + - - + + -
Skip to main content

Extend

In the Import Class chapter, we saw how we can import CSS classes and target them by composing a selector to target our desired parts.

+

Extend

In the Import Class chapter, we saw how we can import CSS classes and target them by composing a selector to target our desired parts.

In this chapter, we'll see how to extend a stylesheet to target inner parts and states.

Current status:

@@ -58,6 +58,6 @@

In this chapter we saw how once we extend a stylesheet, we can target inner parts and states using native-like syntax, while benefiting from language service features and diagnostics.

Next we'll start talking about features that have to do with style templating, beginning with variables, both native custom properties, and Stylable's build-time variables.

-
You've reached the end of the handbook, so far

This handbook is a work in progress and is not yet complete. You can track the plan and progress for it in this issue

+
You've reached the end of the handbook, so far

This handbook is a work in progress and is not yet complete. You can track the plan and progress for it in this issue

\ No newline at end of file diff --git a/docs/guides/handbook/import-class.html b/docs/guides/handbook/import-class.html index 14080002..2b47ce49 100644 --- a/docs/guides/handbook/import-class.html +++ b/docs/guides/handbook/import-class.html @@ -2,19 +2,19 @@ - + Import Class | Stylable - + - - + + -
Skip to main content

Import Class

In the Runtime chapter, we saw how a Stylable stylesheet's API can be imported into a JavaScript module, and how that API can be used. In this chapter, we'll see how our game example can be divided into linked stylesheet modules to provide a better development experience.

+

Import Class

In the Runtime chapter, we saw how a Stylable stylesheet's API can be imported into a JavaScript module, and how that API can be used. In this chapter, we'll see how our game example can be divided into linked stylesheet modules to provide a better development experience.

Up to this point, we've talked mostly about a single stylesheet for our project (game.st.css). Now we'll explore how to organize our code across multiple stylesheets.

Current status:

@@ -66,6 +66,6 @@

@st-import examples.

In this chapter, we've seen how to divide a stylesheet to separate modules, and how to customize those externally. We approached doing this by manually importing each class (default or named), and customizing them together using a selector.

-

In the Next chapter, we'll learn how Stylable can extend stylesheets, exposing their inner parts as an API to make our lives easier.

+

In the Next chapter, we'll learn how Stylable can extend stylesheets, exposing their inner parts as an API to make our lives easier.

\ No newline at end of file diff --git a/docs/guides/handbook/intro.html b/docs/guides/handbook/intro.html index a7d849e1..48d9ae82 100644 --- a/docs/guides/handbook/intro.html +++ b/docs/guides/handbook/intro.html @@ -2,19 +2,19 @@ - + Introduction | Stylable - + - - + + -
Skip to main content

Introduction

What am I reading?​

+

Introduction

What am I reading?​

This document provides an overview of Stylable and its features, and serves as a quick guide for getting started. Each chapter focuses on one core feature of Stylable, introducing a problem or need, showing how CSS might address it, and then how Stylable can be used to simplify the solution. This handbook is not a complete reference for Stylable, but merely a starting point for learning to use it.

What is Stylable?​

Stylable is a superset of the CSS language - it introduces additional syntax to CSS to allow us to add features to styling during pre-processing time. It is designed for working with components, variants, themes, and various modern design patterns.

@@ -48,6 +48,6 @@

Applicati

Application creators can use Stylable to compose their own components alongside 3rd party libraries and to theme the final application to their UX and product requirements.

Sounds interesting? Ready to start?
-Head on over to the first chapter, where we discuss classes, and what they mean in Stylable.

+Head on over to the first chapter, where we discuss classes, and what they mean in Stylable.

\ No newline at end of file diff --git a/docs/guides/handbook/namespacing.html b/docs/guides/handbook/namespacing.html index 8b5b1e61..d7fa85e9 100644 --- a/docs/guides/handbook/namespacing.html +++ b/docs/guides/handbook/namespacing.html @@ -2,19 +2,19 @@ - + Namespacing | Stylable - + - - + + -
Skip to main content

Namespacing

In the Classes chapter, we briefly explained the concept of using namespacing to avoid conflicts between stylesheets.

+

Namespacing

In the Classes chapter, we briefly explained the concept of using namespacing to avoid conflicts between stylesheets.

In this chapter, we'll dive deeper to see how other symbols in CSS can be rendered safe to use, and how namespacing can be controlled.

Supported symbols​

We've only mentioned classes up to this point, but in CSS, there are many other symbols that share the same naming context, therefore requiring namespacing to avoid potential conflicts.

@@ -47,6 +47,6 @@

Click here to read more about the namespace API.

Project level namespacing​

-

On a more general level, we can have granular control of Stylable's namespacing process by passing a custom namespace resolver to Stylable at initialization using configuration.

+

On a more general level, we can have granular control of Stylable's namespacing process by passing a custom namespace resolver to Stylable at initialization using configuration.

\ No newline at end of file diff --git a/docs/guides/handbook/runtime.html b/docs/guides/handbook/runtime.html index d29ad0b4..275bd39f 100644 --- a/docs/guides/handbook/runtime.html +++ b/docs/guides/handbook/runtime.html @@ -2,19 +2,19 @@ - + Runtime | Stylable - + - - + + -
Skip to main content

Runtime

In the previous chapter, we saw brief examples of mapping our classes local names to their global namespaced names at runtime, as well as the cssStates utility function to activate their states.

+

Runtime

In the previous chapter, we saw brief examples of mapping our classes local names to their global namespaced names at runtime, as well as the cssStates utility function to activate their states.

In this chapter, we'll explore the runtime features of Stylable and their usage.

One of the core ideas behind Stylable is to try and shift as much of the work as possible from runtime to build time to increase performance and end-user experience. However, in some instances, we need to do additional work in JavaScript.

For example, we need to:

@@ -44,6 +44,6 @@

st()

Stylable build variables​

We have yet to cover Stylable build variables, but seeing as they expose their value in runtime, we'll cover them here briefly.

As opposed to the native runtime symbols we saw namespaced above, Stylable build variables do not require namespacing, as they are transpiled away at build time. In this case, the runtime export maps variables to their defined values.

-
import {
  stVars // Stylable build variables
} from "./game.st.css";

// runtime namespaced names
stVars.boardBackgroundColor; // "green"

+
import {
  stVars // Stylable build variables
} from "./game.st.css";

// runtime namespaced names
stVars.boardBackgroundColor; // "green"
\ No newline at end of file diff --git a/docs/guides/migration-v3.html b/docs/guides/migration-v3.html index a20f74b5..e13fcca6 100644 --- a/docs/guides/migration-v3.html +++ b/docs/guides/migration-v3.html @@ -2,19 +2,19 @@ - + Stylable v3 | Stylable - + - - + + -
Skip to main content

This guide is intended to help migrate Stylable version 1 to Stylable version 2 or 3. +

This guide is intended to help migrate Stylable version 1 to Stylable version 2 or 3. It is mainly geared towards Stylable integration in React projects.

Suggested steps of migration

Follow these steps for a smooth transition. Each step is explained in @@ -97,6 +97,6 @@

Update te slightly different in v2 and v3:

import { StylableDOMUtil } from '@Stylable/dom-test-kit';
-import style from './Component.st.css';
+import * as styleSheet from './Component.st.css';

-const StylableDOMUtil = new StylableDOMUtil(style);
+const StylableDOMUtil = new StylableDOMUtil(styleSheet);

Stylable v2 and v3 StylableDOMUtil expects to receive an argument which is the whole stylesheet exported from a .st.css file

-

Prior to v2 it was only one thing - the style function.

+

Prior to v2 it was only one thing - the style function.

\ No newline at end of file diff --git a/docs/guides/migration-v5.html b/docs/guides/migration-v5.html index 341904f3..52e1a891 100644 --- a/docs/guides/migration-v5.html +++ b/docs/guides/migration-v5.html @@ -2,19 +2,19 @@ - + Stylable v5 | Stylable - + - - + + -
Skip to main content

Stylable v5

The purpose of this document is to help migrate projects using Stylable to v5.

+

Stylable v5

The purpose of this document is to help migrate projects using Stylable to v5.

We have taken the opportunity of node dropping LTS support for v12 and we have decided to include a number of additional breaking changes to the v5 release. These changes are primarily to the programmatic API of Stylable and not to user facing features, syntax or integrations.

You can find the plan for this major version here.

@stylable/core​

@@ -50,6 +50,6 @@

Edit this page

+
\ No newline at end of file diff --git a/docs/guides/project-commons.html b/docs/guides/project-commons.html index e54f6e01..8c390de5 100644 --- a/docs/guides/project-commons.html +++ b/docs/guides/project-commons.html @@ -2,19 +2,19 @@ - + Project Commons | Stylable - + - - + + -
Skip to main content

Project Commons

The goal of the project file is to contain the CSS commons for the project, including variables, component variants and shared classes.

+

Project Commons

The goal of the project file is to contain the CSS commons for the project, including variables, component variants and shared classes.

In the following code, you can see a project with:

  • 2 color, 2 font and 1 spacing size variables
    • @@ -22,6 +22,6 @@
  • 1 shared class for emphasisBox
project.st.css
:vars {
  color1: #f012be;
  color2: #ff4136;
  fontbig: 2rem;
  fontsmall: 1rem;
  spacing: 6px;
}
@st-import Button from "./button/button.st.css";

.cancelButton {
  -st-extends: Button;
}
.emphasisBox {}
-
tip

We recommend calling the project commons file project.st.css.

+
tip

We recommend calling the project commons file project.st.css.

\ No newline at end of file diff --git a/docs/guides/shared-classes.html b/docs/guides/shared-classes.html index 0cdbdfc5..40e94de2 100644 --- a/docs/guides/shared-classes.html +++ b/docs/guides/shared-classes.html @@ -2,25 +2,25 @@ - + Shared Classes | Stylable - + - - + + -
Skip to main content

Shared Classes

When building a component library or an application, it is useful to reuse classes that can be shared across components to achieve common CSS with lower specificity.

+

Shared Classes

When building a component library or an application, it is useful to reuse classes that can be shared across components to achieve common CSS with lower specificity.

Defining a shared class​

In the commons stylable stylesheet of your project (usually named project.st.css), you define a CSS class with a descriptive name like emphasisBox.

project.st.css
.emphasisBox {
  background: pink;
  color: white;
}

Use shared classes in components​

A component's Stylable stylesheet can use and extend shared classes:

comp.st.css
@st-import [emphasisBox] from "./project.st.css";
/*
selector: .comp__root .project__emphasisBox
js value: "project__emphasisBox"
*/
.root .emphasisBox {}
/*
selector: .comp__messageBox.project__emphasisBox
js value: "comp__messageBox project__emphasisBox"
*/
.messageBox {
  -st-extends: emphasisBox;
}
-
note

For the .emphasisBox selector, we manually added the .root class to avoid overriding emphasisBox outside this scope.

+
note

For the .emphasisBox selector, we manually added the .root class to avoid overriding emphasisBox outside this scope.

\ No newline at end of file diff --git a/docs/guides/ssr.html b/docs/guides/ssr.html index 3e1ec310..fe49af3a 100644 --- a/docs/guides/ssr.html +++ b/docs/guides/ssr.html @@ -2,19 +2,19 @@ - + Supporting Server Side Rendering | Stylable - + - - + + -
Skip to main content

Supporting Server Side Rendering

Server side rendering (SSR) is an approach to serving JavaScript rendered web applications (such as React, Vue, Angular, etc...) that tries to improve time-to-paint, SEO support and more.

+

Supporting Server Side Rendering

Server side rendering (SSR) is an approach to serving JavaScript rendered web applications (such as React, Vue, Angular, etc...) that tries to improve time-to-paint, SEO support and more.

To learn more about SSR - see this introduction post.

When creating your library / application you will see that you might need to make some changes to your project publish / consumption process in order to integrate Stylable to your SSR flow.

Transforming Stylable in the Server​

@@ -34,6 +34,6 @@ 

stc --srcDir ./src --outDir ./dist/cjs --cjs --stcss --useNamespaceReference

stc --srcDir ./src --outDir ./dist/esm --esm --stcss --useNamespaceReference
-

For this to work properly, your source folder must be published along with your distribution build targets.

+

For this to work properly, your source folder must be published along with your distribution build targets.

\ No newline at end of file diff --git a/docs/references/cheatsheet.html b/docs/references/cheatsheet.html index 12287326..f66add53 100644 --- a/docs/references/cheatsheet.html +++ b/docs/references/cheatsheet.html @@ -2,19 +2,19 @@ - + Cheatsheet | Stylable - + - - + + -
Skip to main content

Cheatsheet

CSS Terminology​

+

Cheatsheet

CSS Terminology​

  • selector: query to target elements in the DOM
  • property: Name of the declaration (e.g. color)
    • @@ -34,6 +34,6 @@

    Class

    Templating​

    SyntaxExplanations
    :vars { x: red; y: blue; }
    		Build time variables definition (api)
    prop: value(x);
    		Insert var value into declaration (api)
    prop: x(arg1, arg2);
    		Computed value from custom formatter (api)
    -st-mixin: x, y;
    		Apply multiple mixins to CSS ruleset (api)
    -st-mixin: x(param v1, param v2);
    		Apply mixins with override params (api)

    Other​

    -
    SyntaxExplanations
    @st-scope .x {}
    		Scope nested rules with a given selector (api)
    @st-namespace "x";
    		Development display name for debugging (api)
+
SyntaxExplanations
@st-scope .x {}
Scope nested rules with a given selector (api)
@st-namespace "x";
Development display name for debugging (api)
\ No newline at end of file diff --git a/docs/references/class-selectors.html b/docs/references/class-selectors.html index d271ce7e..3d49d11c 100644 --- a/docs/references/class-selectors.html +++ b/docs/references/class-selectors.html @@ -2,19 +2,19 @@ - + Class Selector | Stylable - + - - + + -
Skip to main content

Class Selector

A CSS class selector is used as a generic way to target a DOM element with a matching class name. In Stylable a CSS class is used primarily as a component part, for example a .navBtn of gallery component, but can also be used as utility class or a mixin.

+

Class Selector

A CSS class selector is used as a generic way to target a DOM element with a matching class name. In Stylable a CSS class is used primarily as a component part, for example a .navBtn of gallery component, but can also be used as utility class or a mixin.

This page goes over how Stylable handles class selector, for more details about the language feature itself, checkout the following resources:

+
\ No newline at end of file diff --git a/docs/references/contains.html b/docs/references/contains.html index 2e12ef19..84b4987f 100644 --- a/docs/references/contains.html +++ b/docs/references/contains.html @@ -2,19 +2,19 @@ - + Containers | Stylable - + - - + + -
Skip to main content

Containers

CSS container queries are used to target and style an element depending on the conditions of a container it is nested within.

+

Containers

CSS container queries are used to target and style an element depending on the conditions of a container it is nested within.

This page goes over how Stylable handles the container-name declaration and the @container at-rule, for more details about the language feature itself, check out the following resources:

  • MDN CSS container queries
    • @@ -45,6 +45,6 @@

    Disa Setting st-global around the container name in either the declaration or container query only references a global container name, without creating a symbol that can later be imported or referenced. ::

    To register a global container name symbol, that can be imported and referenced by other stylesheets, use the @container at-rule with no body or query:

    -
    /* global panel container name definition */
    @container st-global(panel);

    .x {
      container: panel;
    }
    @container panel (width > 100px) {}


    /* OUTPUT */

    .x {
      container: panel;
    }
    @container panel (width > 100px) {}

+
/* global panel container name definition */
@container st-global(panel);

.x {
  container: panel;
}
@container panel (width > 100px) {}


/* OUTPUT */

.x {
  container: panel;
}
@container panel (width > 100px) {}
\ No newline at end of file diff --git a/docs/references/css-vars.html b/docs/references/css-vars.html index d0e323fa..c530b7e6 100644 --- a/docs/references/css-vars.html +++ b/docs/references/css-vars.html @@ -2,19 +2,19 @@ - + Custom Property | Stylable - + - - + + -
Skip to main content

Custom Property

CSS custom property is used to define and re-use variables that participate in the cascade, and to dynamically change their values at runtime.

+

Custom Property

CSS custom property is used to define and re-use variables that participate in the cascade, and to dynamically change their values at runtime.

This page goes over how Stylable handles custom properties, for more details about the language feature itself, checkout the following resources:

Disable namespace​

In cases where the default namespace behavior is not wanted, st-global can be used to mark a custom property definition as global.

-
@property st-global(--x) {
  syntax: '<color>';
  inherits: true;
  initial-value: green;
}

.a {
  --x: var(--x);
}

/* OUTPUT */
@property --x {
  syntax: '<color>';
  inherits: true;
  initial-value: green;
}

.NAMESPACE__a {
  --x: var(--x);
}
+
@property st-global(--x) {
  syntax: '<color>';
  inherits: true;
  initial-value: green;
}

.a {
  --x: var(--x);
}

/* OUTPUT */
@property --x {
  syntax: '<color>';
  inherits: true;
  initial-value: green;
}

.NAMESPACE__a {
  --x: var(--x);
}
\ No newline at end of file diff --git a/docs/references/custom-selectors.html b/docs/references/custom-selectors.html index 474f7988..5adfdbf5 100644 --- a/docs/references/custom-selectors.html +++ b/docs/references/custom-selectors.html @@ -2,19 +2,19 @@ - + Custom Selector | Stylable - + - - + + -
Skip to main content

Custom Selector

You use custom selectors to define an alias that can match complex selectors.

+

Custom Selector

You use custom selectors to define an alias that can match complex selectors.

For example, a specific type of button within a form that appears only when hovered can be defined as a custom selector. By defining the button as a custom selector with its own name, the button is exposed in the API and available for use by using just the custom selector name.

You could also use custom selectors to define a group of selectors with one name. For example, you can access all the headings on a page as one custom selector. This could be useful if you want to style just their color the same.

Usage​

@@ -48,6 +48,6 @@

Gro

Issues to consider​

Aliasing multiple selectors in a custom selector may generate lots of CSS that could affect performance.

For example, when you import the Comp stylesheet (the selector described in the previous example) into another stylesheet, in the output the selector is split for each override.

-
page.st.css
@st-import Comp from "./comp.st.css";

Comp::media {
  border-color: red;
}

/* OUTPUT */
.comp__root .comp__image,
.comp__root .comp__video {
  border-color: red;
}
+
page.st.css
@st-import Comp from "./comp.st.css";

Comp::media {
  border-color: red;
}

/* OUTPUT */
.comp__root .comp__image,
.comp__root .comp__video {
  border-color: red;
}
\ No newline at end of file diff --git a/docs/references/extend-stylesheet.html b/docs/references/extend-stylesheet.html index fe981fd3..6c4512ce 100644 --- a/docs/references/extend-stylesheet.html +++ b/docs/references/extend-stylesheet.html @@ -2,19 +2,19 @@ - + Extend | Stylable - + - - + + -
Skip to main content

Extend

The Stylable -st-extends declaration is used to indicate that a CSS class inherits from a stylesheet or another class.

+

Extend

The Stylable -st-extends declaration is used to indicate that a CSS class inherits from a stylesheet or another class.

It assumes both the class and the extended reference will share the same element in the DOM, and enables the targeting of inner parts and states as an API with validations and completions.

Syntax​

Use -st-extends with the value of a component stylesheet root to indicate that a class is used to customize the component, or with a value of another class to compose them (usually a utility class).

@@ -39,6 +39,6 @@

unsupported multiple extends

Stylable currently does not support extending multiple classes. We hope to introduce this capability in the future.

Namespace​

-st-extends provides access to inner parts and states, but does not modify the namespace of the extending class.

-
page.st.css
@st-import Gallery from './gallery.st.css';
.variant {
  -st-extends: Gallery;
}
.variant {}
.variant::navBtn {}
.variant:loading {}

/* OUTPUT */
.page__variant {}
.page__variant .gallery__navBtn {}
.page__variant.gallery--loading {}
+
page.st.css
@st-import Gallery from './gallery.st.css';
.variant {
  -st-extends: Gallery;
}
.variant {}
.variant::navBtn {}
.variant:loading {}

/* OUTPUT */
.page__variant {}
.page__variant .gallery__navBtn {}
.page__variant.gallery--loading {}
\ No newline at end of file diff --git a/docs/references/formatters.html b/docs/references/formatters.html index 58d026c9..74b41e5b 100644 --- a/docs/references/formatters.html +++ b/docs/references/formatters.html @@ -2,19 +2,19 @@ - + Formatters | Stylable - + - - + + -
Skip to main content

Formatters

Formatters are functions that return a single CSS declaration value. They can receive arguments, process them and return the value.

+

Formatters

Formatters are functions that return a single CSS declaration value. They can receive arguments, process them and return the value.

note

Currently, any argument passed through to a formatter is of type string. We are in the process of adding support for more complex types.

For example a calc-font-size formatter can return a different value for the font size depending on the provided argument.

tip

If you need to return multiple declaration values, we recommend using Stylable mixins.

@@ -33,6 +33,6 @@ 

/* ./math.js */
module.export = {
  divBy2: function (num) {
    return Number(Number(num) / 2);
  },
  round: function (num) {
    return Math.round(Number(num));
  },
};

@st-import [divBy2, round] from "./math";

:vars {
  baseSize: 17px;
}

.header {
  font-size: round(divBy2(value(baseSize))) px;
}
-
/* CSS output */
.header {
  font-size: 9px;
}
+
/* CSS output */
.header {
  font-size: 9px;
}
\ No newline at end of file diff --git a/docs/references/global-selectors.html b/docs/references/global-selectors.html index 3723c79e..02320128 100644 --- a/docs/references/global-selectors.html +++ b/docs/references/global-selectors.html @@ -2,19 +2,19 @@ - + Global Selector | Stylable - + - - + + -
Skip to main content

Global Selector

In Stylable, selectors are namespaced to the stylesheet. However there might be cases where you want to target global selectors without Stylable namespacing them, For that you can use the :global() selector.

+

Global Selector

In Stylable, selectors are namespaced to the stylesheet. However there might be cases where you want to target global selectors without Stylable namespacing them, For that you can use the :global() selector.

Syntax​

Mark as global

:global(.g) {}

/* OUTPUT */
.g {}
@@ -26,6 +26,6 @@

SyntaxForce native​

In case a class definition overrides a native pseudo with either -st-states or a custom pseudo-element then the :global() selector can be used to force the native:

customInput with override :selected

-
CustomInput:selected {}
CustomInput:global(:selected) {}

/* OUTPUT */
.customInput__root.customInput--selected {}
.customInput__root:selected {}
+
CustomInput:selected {}
CustomInput:global(:selected) {}

/* OUTPUT */
.customInput__root.customInput--selected {}
.customInput__root:selected {}
\ No newline at end of file diff --git a/docs/references/imports.html b/docs/references/imports.html index 904ba218..d6fd6d6f 100644 --- a/docs/references/imports.html +++ b/docs/references/imports.html @@ -2,19 +2,19 @@ - + Import | Stylable - + - - + + -
Skip to main content

Import

The Stylable @st-import at-rule is used to reference definitions from other .st.css or .js modules in a similar way to JavaScript Imports.

+

Import

The Stylable @st-import at-rule is used to reference definitions from other .st.css or .js modules in a similar way to JavaScript Imports.

Syntax​

@st-import Default, [namedA, namedB as localB] from 'request';
re-declare symbol
    @@ -44,6 +44,6 @@

    Javascript<

    Legacy syntax​

    An older variation for @st-import is the :import (pseudo-import). While it still works, it is highly discouraged for usage, verbose and will be deprecated in the future.

    :import {
      -st-from: 'request';
      -st-default: DefaultLocalName;
      -st-named: namedA, namedB as localB;
    }
    -

    A code-mod to migrate to the new syntax is available (see doc)

+

A code-mod to migrate to the new syntax is available (see doc)

\ No newline at end of file diff --git a/docs/references/keyframes.html b/docs/references/keyframes.html index 6ba8e581..a130ff24 100644 --- a/docs/references/keyframes.html +++ b/docs/references/keyframes.html @@ -2,19 +2,19 @@ - + Keyframes | Stylable - + - - + + -
Skip to main content

Keyframes

The @keyframes CSS at-rule is used to define an animation that can be referenced to animate a DOM element.

+

Keyframes

The @keyframes CSS at-rule is used to define an animation that can be referenced to animate a DOM element.

This page goes over how Stylable handles @keyframes, for more details about the language feature itself, checkout the following resources:

Disable namespace​

In some cases the default namespace behavior is unwanted. In such cases, st-global can be used to mark a keyframes definition as global:

-
@keyframes st-global(slide) {}
.x {
  animation-name: slide;
}

/* OUTPUT */
@keyframes slide {}
.x {
  animation-name: slide; /* no namespace */
}
+
@keyframes st-global(slide) {}
.x {
  animation-name: slide;
}

/* OUTPUT */
@keyframes slide {}
.x {
  animation-name: slide; /* no namespace */
}
\ No newline at end of file diff --git a/docs/references/layer.html b/docs/references/layer.html index b31f26ce..2bd87262 100644 --- a/docs/references/layer.html +++ b/docs/references/layer.html @@ -2,19 +2,19 @@ - + Layer | Stylable - + - - + + -
Skip to main content

Layer

In CSS, @layer provides a way to group rules together in order to override other rules for better control of the styling order.

+

Layer

In CSS, @layer provides a way to group rules together in order to override other rules for better control of the styling order.

This page goes over how Stylable handles @layer, for more details about the language feature itself, check out the following resources:

  • MDN @layer
    • @@ -53,6 +53,6 @@

    Disa

    Once a layer is marked as global, all references to that layer transpile to the un-namespaced name (nested or imported).

    Notice that st-global is not supported in nested definitions (e.g. a.st-global(external).c) or native import (e.g. @import url() layer(st-global(external))), but marking the layer as global in a later definition will keep it global everywhere.

    -

+
\ No newline at end of file diff --git a/docs/references/mixins.html b/docs/references/mixins.html index 5cf96237..164aff3d 100644 --- a/docs/references/mixins.html +++ b/docs/references/mixins.html @@ -2,19 +2,19 @@ - + Mixins | Stylable - + - - + + -
Skip to main content

Mixins

Stylable mixins enable you to reuse complex styles and CSS behaviors, defined in CSS or Javascript, and apply them to any style-rule during build time.

+

Mixins

Stylable mixins enable you to reuse complex styles and CSS behaviors, defined in CSS or Javascript, and apply them to any style-rule during build time.

Here are some examples of when you can use mixins:

  • Presets/Variants - create reusable pieces of styling CSS
    • @@ -84,6 +84,6 @@ 

    .y {
      /* escape slashes */
      -st-mixin: mix(300, '"xxx"'); /* ["300", "\"xxx\""] */
    }

Circular references​

-

It is possible to reach a state where you have circular references between mixins. These cannot be resolved, and a diagnostics warning is issued in your Stylable code intelligence and build process.

+

It is possible to reach a state where you have circular references between mixins. These cannot be resolved, and a diagnostics warning is issued in your Stylable code intelligence and build process.

\ No newline at end of file diff --git a/docs/references/namespace.html b/docs/references/namespace.html index b54fb069..80d326f8 100644 --- a/docs/references/namespace.html +++ b/docs/references/namespace.html @@ -2,21 +2,21 @@ - + Namespace | Stylable - + - - + + -
Skip to main content

Namespace

Manual Namespace​

+

Namespace

Manual Namespace​

When you develop your application in Stylable, you can manually namespace classes so you can more easily identify them when they are displayed in the CSS output. You do this in your Stylable stylesheet by adding the syntax @st-namespace to provide better display names to your classes.

x.st.css
@st-namespace "y";
.root {
  color: red;
}

/* OUTPUT */
.y__root {/* use @st-namespace value instead of file name */
  color: red;
}
-
note

Because @st-namespace is not unique, the scoped name may still have a suffix added to it to make it unique during build.

+
note

Because @st-namespace is not unique, the scoped name may still have a suffix added to it to make it unique during build.

\ No newline at end of file diff --git a/docs/references/programmatic-api.html b/docs/references/programmatic-api.html index 984a95d9..7eb7f4ad 100644 --- a/docs/references/programmatic-api.html +++ b/docs/references/programmatic-api.html @@ -2,19 +2,19 @@ - + Programmatic API | Stylable - + - - + + -
Skip to main content

Programmatic API

Stylable instance​

+

Programmatic API

Stylable instance​

Stylable is usually consumed through one of its available integration, for more specific or advanced use-cases, the programmatic API can be used for greater control on how Stylable operates.

note

The APIs described here are treated as stable, and available for use. Any other API exposed by Stylable not described here may changed, and should not be dependant on.

The Stylable class provided from @stylable/core requires configuration to initialize.

@@ -52,6 +52,6 @@

Re

Defines a function to require imported JavaScript modules from a path, used when a JavaScript Mixins or Formatters is used within a Stylable stylesheet.

const fs = require('node:fs');
const { Stylable } = require('@stylable/core');

const stylable = new Stylable({
    projectRoot: 'path/to/project/root',
    filesystem: fs,
    requireModule: require
})
-

+
\ No newline at end of file diff --git a/docs/references/pseudo-classes.html b/docs/references/pseudo-classes.html index 61e65ac4..fe382a34 100644 --- a/docs/references/pseudo-classes.html +++ b/docs/references/pseudo-classes.html @@ -2,19 +2,19 @@ - + Pseudo-Class | Stylable - + - - + + -

Pseudo-Class

In addition to CSS's native pseudo-classes, like :hover and :nth-child(), Stylable allow you to define custom pseudo-classes so that you can apply styles to your components based on state. Let's say you want a component to have different styling applied to it when its content is loading. You can define loading as a custom pseudo-class and toggle it in your component.

+

Pseudo-Class

In addition to CSS's native pseudo-classes, like :hover and :nth-child(), Stylable allow you to define custom pseudo-classes so that you can apply styles to your components based on state. Let's say you want a component to have different styling applied to it when its content is loading. You can define loading as a custom pseudo-class and toggle it in your component.

This page goes over how Stylable handles custom pseudo-classes, for more details about the language feature itself, checkout the following resources:

  • MDN pseudo-class
    • @@ -70,6 +70,6 @@

    Map to

    To define a global mapped state, pass a selector as a string instead of a type:

    .x {
      -st-states: toggled('.on'), 
                  loading('[dataSpinner]');
    }

    .x:toggled {}
    .x:loading {}

    /* OUTPUT */
    .NAMESPACE__x.on {}
    .NAMESPACE__x[dataSpinner] {}

    Additionally a single parameter can be defined after the selector string and referenced in the selector string using $0:

    -
    .x {
      -st-states: size('[size="$0"]', enum(small, medium, large));
    }

    .x:size(small) {}

    /* OUTPUT */
    .NAMESPACE__x[size='small'] {}

+
.x {
  -st-states: size('[size="$0"]', enum(small, medium, large));
}

.x:size(small) {}

/* OUTPUT */
.NAMESPACE__x[size='small'] {}
\ No newline at end of file diff --git a/docs/references/pseudo-elements.html b/docs/references/pseudo-elements.html index 4a84efdc..f92d4dd1 100644 --- a/docs/references/pseudo-elements.html +++ b/docs/references/pseudo-elements.html @@ -2,19 +2,19 @@ - + Pseudo-Element | Stylable - + - - + + -

Pseudo-Element

In addition to CSS's native pseudo-elements, like ::before and ::backdrop, Stylable allow you to define custom pseudo-elements so that you can target and apply styles to inner parts of your components.

+

Pseudo-Element

In addition to CSS's native pseudo-elements, like ::before and ::backdrop, Stylable allow you to define custom pseudo-elements so that you can target and apply styles to inner parts of your components.

This page goes over how Stylable handles custom pseudo-elements, for more details about the language feature itself, checkout the following resources:

  • MDN pseudo-element
    • @@ -43,6 +43,6 @@

    El

    Build transformation​

    Custom pseudo-elements are transformed in build-time to target the internal selector they represent.

    comp.st.css
    .part {}
    @custom-selector :--directPart .root > .part;
    -
    page.st.css
    @st-import Comp from './comp.st.css';

    .root {
      -st-extends: Comp;
    }

    .root::part {}
    .root::directPart {}

    /* OUTPUT */
    .page__root .comp__part {}
    .page__root > .comp__part {}
+
page.st.css
@st-import Comp from './comp.st.css';

.root {
  -st-extends: Comp;
}

.root::part {}
.root::directPart {}

/* OUTPUT */
.page__root .comp__part {}
.page__root > .comp__part {}
\ No newline at end of file diff --git a/docs/references/root.html b/docs/references/root.html index 55bcacee..4bd4db6e 100644 --- a/docs/references/root.html +++ b/docs/references/root.html @@ -2,19 +2,19 @@ - + Root | Stylable - + - - + + -

Root

Every Stylable stylesheet has a reserved class called root that matches the root node of the component. The root class is used to signify the component top-level node where a new namespace scope is created.

+

Root

Every Stylable stylesheet has a reserved class called root that matches the root node of the component. The root class is used to signify the component top-level node where a new namespace scope is created.

.root { 
  /* set component background */
  background: white; 
} 

/* OUTPUT */
.NAMESPACE__root { 
  background: white; 
}

Default export​

The root of a stylesheet can be referenced in other stylesheets by using the default import.

@@ -30,6 +30,6 @@

state classes
  • classes passed from props for customizations
    • -
    comp.jsx
    import { st, classes } from './comp.st.css';

    function Comp({ className }) {
      return (
        <div className={st(classes.root, {/*states*/}, className)}></div>
      );
    }

    +
    comp.jsx
    import { st, classes } from './comp.st.css';

    function Comp({ className }) {
      return (
        <div className={st(classes.root, {/*states*/}, className)}></div>
      );
    }
    \ No newline at end of file diff --git a/docs/references/runtime.html b/docs/references/runtime.html index b88007cc..1c572796 100644 --- a/docs/references/runtime.html +++ b/docs/references/runtime.html @@ -2,19 +2,19 @@ - + Runtime | Stylable - + - - + + -

    Runtime

    Imported Stylable stylesheets in JavaScript contain minimal runtime code to help define the structure and state of the component.

    +

    Runtime

    Imported Stylable stylesheets in JavaScript contain minimal runtime code to help define the structure and state of the component.

    /* index.jsx - stylesheet runtime api */
    import {
        st,        // runtime utility function
        classes,   // class mapping
        vars,      // custom properties mapping
        stVars,    // stylable build-time variable values
        cssStates, // utility function for setting stylable states
        keyframes, // keyframes mapping
        layers     // layer mapping
        containers,// container mapping
    } from "style.st.css";

    Manual mapping​

    Any namespaced symbols, defined in the stylesheet, are exposed on maps from their local name to their target namespaced name:

    @@ -39,6 +39,6 @@

    st()

    Custom state mapping​

    The cssStates function can be used to produce just the active custom state classes.

    The function accepts a map of local state names and generates a string with concatenated class names used to mark the element's state.

    -
    import { cssStates } from 'style.st.css';

    // single state
    cssStates({ selected: true }); // "style--selected"

    // un-active state
    cssStates({ selected: false }); // ""

    // string/enum state
    cssStates({ rank: 'first' }); // "style--rank-5-first"

    // multiple states
    cssStates({ a: true, b: false, c: true }); // "a c"

    +
    import { cssStates } from 'style.st.css';

    // single state
    cssStates({ selected: true }); // "style--selected"

    // un-active state
    cssStates({ selected: false }); // ""

    // string/enum state
    cssStates({ rank: 'first' }); // "style--rank-5-first"

    // multiple states
    cssStates({ a: true, b: false, c: true }); // "a c"
    \ No newline at end of file diff --git a/docs/references/st-scope.html b/docs/references/st-scope.html index 87e2e3fe..69785eb7 100644 --- a/docs/references/st-scope.html +++ b/docs/references/st-scope.html @@ -2,19 +2,19 @@ - + Scope | Stylable - + - - + + -

    Scope

    Stylable scope enables you to wrap several style-rules using a single directive. +

    Scope

    Stylable scope enables you to wrap several style-rules using a single directive. The scoping directive receives any valid Stylable selector to use for its scoping.

    Stylable scoping directive is similar in its behavior to CSS nesting, but can only be applied to a single level.

    Syntax​

    @@ -34,6 +34,6 @@

    Th

    In this file, we are creating pre-designed flavors that uses Stylable variables to determine their styling.

    /* flavors.st.css */
    @st-import [Button, UserForm] from "./index.st.css";

    :vars {
      background: white;
      text: black;
      bordercolor: green;
    }

    .button-flavor {
      -st-extends: Button;
      background: value(background);
      color: value(text);
    }

    .userForm-flavor {
      -st-extends: UserForm;
      background: value(background);
      color: value(text);
      border: 1px solid value(borderColor);
    }

    In this example, we use our existing flavors from above to customize our components look under the dark theme.

    -
    @st-import [UserForm, Button] from "./index.st.css";
    @st-import [button-flavor, userForm-flavor] from "./flavors.st.css";

    @st-scope .root {
      Button {
        -st-mixin: button-flavor(background black, text white);
      }

      UserForm {
        -st-mixin: userForm-flavor(background black, text white, borderColor #f4f4f4);
      }
    }

    +
    @st-import [UserForm, Button] from "./index.st.css";
    @st-import [button-flavor, userForm-flavor] from "./flavors.st.css";

    @st-scope .root {
      Button {
        -st-mixin: button-flavor(background black, text white);
      }

      UserForm {
        -st-mixin: userForm-flavor(background black, text white, borderColor #f4f4f4);
      }
    }
    \ No newline at end of file diff --git a/docs/references/st-variables.html b/docs/references/st-variables.html index 01139ad9..220c2235 100644 --- a/docs/references/st-variables.html +++ b/docs/references/st-variables.html @@ -2,19 +2,19 @@ - + Variables | Stylable - + - - + + -

    Variables

    Stylable variables provide a way to define common values to be used across the stylesheet and exposed for sharing and theming. +

    Variables

    Stylable variables provide a way to define common values to be used across the stylesheet and exposed for sharing and theming. These variables are used only during build-time and have no runtime impact.

    If you wish to use native dynamic variables, that can change value during runtime, see css custom properties for further details.

    Syntax​

    @@ -45,6 +45,6 @@

    RuntimeCustom variable​

    experimental

    This API is not stable

    Composed data structures like st-array and st-map can be defined from Javascript. Take a look at stBorder from the @stylable/custom-value to see how it works.

    -
    stBorder usage example
    @st-import [stBorder] from "@stylable/custom-value";

    :vars {
      /* order of arguments: size style color */
      myborder: stBorder(1px, solid, green);
    }

    .root {
      border: value(myBorder); /* 1px solid green */
      background-color: value(myBorder, color); /* green */
    }
    +
    stBorder usage example
    @st-import [stBorder] from "@stylable/custom-value";

    :vars {
      /* order of arguments: size style color */
      myborder: stBorder(1px, solid, green);
    }

    .root {
      border: value(myBorder); /* 1px solid green */
      background-color: value(myBorder, color); /* green */
    }
    \ No newline at end of file diff --git a/docs/references/type-selectors.html b/docs/references/type-selectors.html index 6c506d69..f9b0d36f 100644 --- a/docs/references/type-selectors.html +++ b/docs/references/type-selectors.html @@ -2,19 +2,19 @@ - + Type Selector | Stylable - + - - + + -

    Type Selector

    A CSS type selector is used to target DOM elements according to their tag name.

    +

    Type Selector

    A CSS type selector is used to target DOM elements according to their tag name.

    This page goes over how Stylable handles type selector, for more details about the language feature itself, checkout MDN type selector.

    Syntax​

    Native element​

    @@ -35,6 +35,6 @@

    RuntimeElements are not available on the Stylable stylesheet runtime.

    Namespace​

    Native elements are not namespaced. However, if an element originates from a class, like a component element default import, then it is transformed during build.

    -
    entry.st.css
    @st-import Button from './button.st.css';

    .root Button {}
    .root div {}

    /* OUTPUT */
    .entry__root .button__root {}
    .entry__root div {}

    +
    entry.st.css
    @st-import Button from './button.st.css';

    .root Button {}
    .root div {}

    /* OUTPUT */
    .entry__root .button__root {}
    .entry__root div {}
    \ No newline at end of file diff --git a/docs/references/using-external-assets.html b/docs/references/using-external-assets.html index b0e3575a..2bfd2fba 100644 --- a/docs/references/using-external-assets.html +++ b/docs/references/using-external-assets.html @@ -2,23 +2,23 @@ - + url() | Stylable - + - - + + -

    url()

    Stylable supports usage of url functions to use assets as you normally would in CSS.

    +

    url()

    Stylable supports usage of url functions to use assets as you normally would in CSS.

    The value passed to the url() function is resolved differently in CSS as comapred to the Node request resolution algorithm, used for Stylable stylesheet and symbol resolutions.

    The url() function has no notion of external packages or dependencies.

    Resolving 3rd-party assets​

    In order to import url() assets from dependencies inside your node_modules directory, Stylable supports the ~ URL prefix.

    -
    .root {
      /* resolves as the node request: "my-package/asset.png" */
      background: url(~my-package/asset.png);
    }

    .root {
      /* resolves as the node request: "./my-package/asset.png" */
      background: url(my-package/asset.png);
    }
    +
    .root {
      /* resolves as the node request: "my-package/asset.png" */
      background: url(~my-package/asset.png);
    }

    .root {
      /* resolves as the node request: "./my-package/asset.png" */
      background: url(my-package/asset.png);
    }
    \ No newline at end of file diff --git a/docs/style-guide.html b/docs/style-guide.html index 27299dbb..9c5369a6 100644 --- a/docs/style-guide.html +++ b/docs/style-guide.html @@ -2,19 +2,19 @@ - + Style Guide | Stylable - + - - + + -

    Style Guide

    You can write content using GitHub-flavored Markdown syntax.

    +

    Style Guide

    You can write content using GitHub-flavored Markdown syntax.

    Markdown Syntax​

    To serve as an example page when styling markdown based Docusaurus sites.

    Headers​

    @@ -106,6 +106,6 @@

    Admonition
    tip

    This is a tip

    important

    This is important

    caution

    This is a caution

    -
    warning

    This is a warning

    +
    warning

    This is a warning

    \ No newline at end of file diff --git a/index.html b/index.html index be0b0516..5c69128f 100644 --- a/index.html +++ b/index.html @@ -2,18 +2,18 @@ - + Stylable | Stylable - + - - + + -
    Get Started
    CSS Superset

    CSS Superset

    Extending CSS so that it is easier to use in a component ecosystem, but without losing any of the declarative, familiar, static and fast aspects of CSS.

    Style API

    Style API

    Each component exposes a Style API that maps its internal parts and states so you can reuse components across teams without sacrificing stylability or scalability.

    Type Safety

    Type Safety

    Provide the ability to see errors at build time or even while working in your IDE. Wave goodbye to silent run-time breakage misery!

    Performant

    Performant

    Perform build-time transpilation and require only a minimal runtime. Use custom states and properties for dynamic interactions.

    Mixins & Formatters

    Mixins & Formatters

    Easily create complex designs using CSS or JavaScript and reuse them across projects.

    Developer Tooling

    Developer Tooling

    Use our language-intelligence IDE extension for a better development experience including completions, defintions, hinting, diagnostics and more.

    What is Stylable?

    At Wix, we ♥ CSS. Its simple, declarative syntax that is native in browsers is easily the fastest way to add styles to web pages and web apps. But when writing CSS that is scoped to individual components, developers have to maintain highly-specific selectors, using elaborate conventions to fake namespacing. Writing and maintaining CSS across large teams and large projects can be tricky.

    We also ♥ TypeScript. TypeScript helps us manage these large projects, exposing at build-time what we could once only see at run-time.

    We want to give CSS a type system — to do for CSS what TypeScript does for JavaScript.
      So we created Stylable — a CSS preprocessor that enables you to write style rules in CSS syntax, with some extensions that we believe adhere to the spirit of CSS.

      What Does Stylable Do?

      • Stylable scopes styles to components so they don’t "leak" and clash with other styles.
      • Stylable enables custom pseudo-classes and pseudo-elements that abstract the internal state and structure of a component. These can then be styled externally. For example, you can style the label inside a button, or style the play button of a video player from outside these components.
      • At build time, the preprocessor converts the Stylable CSS into flat, static, valid, vanilla CSS that works cross-browser.

      Tooling

      Stylable Intelligence Demo

      Treating CSS as a type system opens up a whole new world of tooling. You can:

      • Get code completion that hints at the internal structure of components.
      • Get types for your parameters. And so much more.
      Stylable enhances the styling development process. To get the full Stylable experience, install our VSCode Intellisense Extension. It supports code completions, diagnostics, go to definitions, syntax highlighting and more.

      Videos

      Introduction to Stylable

      The Official Stylable Musical!

      Documentation

      Learn more about Stylable and get started with step by step instructions and code examples.

      Demo Project

      You can download our Learn more about Mr. Potato Bruce project from GitHub. It's a demo application showcasing the features and typed style API. Bruce explains it in his React Europe 2018 talk:

      Play with it and let us know what you think!

      Shut up and take my money!

      No need! Stylable is open-source. Take it, use it, make your development easier and your apps faster. Viva CSS, and welcome Stylable. We hope you like it.

      Click here to access the MIT-licensed Stylable GitHub project.

      New ideas will come along, but they will extend CSS rather than replace it. I believe that the CSS code we write today will be readable by computers 500 years from now.

      — Håkon Wium Lie, co-creator of CSS.
      +
      Get Started
      CSS Superset

      CSS Superset

      Extending CSS so that it is easier to use in a component ecosystem, but without losing any of the declarative, familiar, static and fast aspects of CSS.

      Style API

      Style API

      Each component exposes a Style API that maps its internal parts and states so you can reuse components across teams without sacrificing stylability or scalability.

      Type Safety

      Type Safety

      Provide the ability to see errors at build time or even while working in your IDE. Wave goodbye to silent run-time breakage misery!

      Performant

      Performant

      Perform build-time transpilation and require only a minimal runtime. Use custom states and properties for dynamic interactions.

      Mixins & Formatters

      Mixins & Formatters

      Easily create complex designs using CSS or JavaScript and reuse them across projects.

      Developer Tooling

      Developer Tooling

      Use our language-intelligence IDE extension for a better development experience including completions, defintions, hinting, diagnostics and more.

      What is Stylable?

      At Wix, we ♥ CSS. Its simple, declarative syntax that is native in browsers is easily the fastest way to add styles to web pages and web apps. But when writing CSS that is scoped to individual components, developers have to maintain highly-specific selectors, using elaborate conventions to fake namespacing. Writing and maintaining CSS across large teams and large projects can be tricky.

      We also ♥ TypeScript. TypeScript helps us manage these large projects, exposing at build-time what we could once only see at run-time.

      We want to give CSS a type system — to do for CSS what TypeScript does for JavaScript.
        So we created Stylable — a CSS preprocessor that enables you to write style rules in CSS syntax, with some extensions that we believe adhere to the spirit of CSS.

        What Does Stylable Do?

        • Stylable scopes styles to components so they don’t "leak" and clash with other styles.
        • Stylable enables custom pseudo-classes and pseudo-elements that abstract the internal state and structure of a component. These can then be styled externally. For example, you can style the label inside a button, or style the play button of a video player from outside these components.
        • At build time, the preprocessor converts the Stylable CSS into flat, static, valid, vanilla CSS that works cross-browser.

        Tooling

        Stylable Intelligence Demo

        Treating CSS as a type system opens up a whole new world of tooling. You can:

        • Get code completion that hints at the internal structure of components.
        • Get types for your parameters. And so much more.
        Stylable enhances the styling development process. To get the full Stylable experience, install our VSCode Intellisense Extension. It supports code completions, diagnostics, go to definitions, syntax highlighting and more.

        Videos

        Introduction to Stylable

        The Official Stylable Musical!

        Documentation

        Learn more about Stylable and get started with step by step instructions and code examples.

        Demo Project

        You can download our Learn more about Mr. Potato Bruce project from GitHub. It's a demo application showcasing the features and typed style API. Bruce explains it in his React Europe 2018 talk:

        Play with it and let us know what you think!

        Shut up and take my money!

        No need! Stylable is open-source. Take it, use it, make your development easier and your apps faster. Viva CSS, and welcome Stylable. We hope you like it.

        Click here to access the MIT-licensed Stylable GitHub project.

        New ideas will come along, but they will extend CSS rather than replace it. I believe that the CSS code we write today will be readable by computers 500 years from now.

        — Håkon Wium Lie, co-creator of CSS.
        \ No newline at end of file diff --git a/playground.html b/playground.html index d072c5f2..8249a808 100644 --- a/playground.html +++ b/playground.html @@ -2,18 +2,18 @@ - + Stylable | Stylable - + - - + + -
        +
        \ No newline at end of file diff --git a/search-index.json b/search-index.json index 485d5659..6635b5ef 100644 --- a/search-index.json +++ b/search-index.json @@ -1 +1 @@ -[{"documents":[{"i":1,"t":"","u":"/blog/archive","b":["Blog"]},{"i":2,"t":"Welcome to Stylable v5","u":"/blog/welcome-to-stylable-v5","b":["Blog"]},{"i":14,"t":"Attributions","u":"/docs/attributions","b":[]},{"i":17,"t":"Boilerplate","u":"/docs/getting-started/boilerplate","b":["Getting Started"]},{"i":25,"t":"Intro","u":"/docs/getting-started/intro","b":["Getting Started"]},{"i":32,"t":"Manual Integration","u":"/docs/getting-started/manual-integration","b":["Getting Started"]},{"i":47,"t":"Rollup","u":"/docs/getting-started/rollup-integration","b":["Getting Started","Integrations"]},{"i":53,"t":"Storybook","u":"/docs/getting-started/storybook-integration","b":["Getting Started","Integrations"]},{"i":55,"t":"stylable.config.js","u":"/docs/getting-started/stylable-config","b":["Getting Started"]},{"i":63,"t":"NextJS","u":"/docs/getting-started/nextjs-integration","b":["Getting Started","Integrations"]},{"i":71,"t":"Stylable Intelligence","u":"/docs/getting-started/tooling/stylable-intelligence","b":["Getting Started","Tooling"]},{"i":79,"t":"CLI","u":"/docs/getting-started/tooling/cli","b":["Getting Started","Tooling"]},{"i":91,"t":"TypeScript","u":"/docs/getting-started/typescript-integration","b":["Getting Started","Integrations"]},{"i":107,"t":"Webpack","u":"/docs/getting-started/webpack-integration","b":["Getting Started","Integrations"]},{"i":117,"t":"Component Variants","u":"/docs/guides/component-variants","b":["Guides","Patterns"]},{"i":123,"t":"Stylable Component - Best Practices","u":"/docs/guides/component-best-practices","b":["Guides","Patterns"]},{"i":147,"t":"Classes","u":"/docs/guides/handbook/class","b":["Guides","Handbook"]},{"i":157,"t":"Classes","u":"/docs/guides/handbook/classes","b":["Guides"]},{"i":161,"t":"Custom State","u":"/docs/guides/handbook/custom-state","b":["Guides","Handbook"]},{"i":167,"t":"Extend","u":"/docs/guides/handbook/extend","b":["Guides","Handbook"]},{"i":179,"t":"Introduction","u":"/docs/guides/handbook/intro","b":["Guides","Handbook"]},{"i":198,"t":"Import Class","u":"/docs/guides/handbook/import-class","b":["Guides","Handbook"]},{"i":214,"t":"Namespacing","u":"/docs/guides/handbook/namespacing","b":["Guides","Handbook"]},{"i":228,"t":"Runtime","u":"/docs/guides/handbook/runtime","b":["Guides","Handbook"]},{"i":242,"t":"Suggested steps of migration","u":"/docs/guides/migration-v3","b":["Guides","Migrations"]},{"i":256,"t":"Stylable v5","u":"/docs/guides/migration-v5","b":["Guides","Migrations"]},{"i":268,"t":"Project Commons","u":"/docs/guides/project-commons","b":["Guides","Patterns"]},{"i":270,"t":"Shared Classes","u":"/docs/guides/shared-classes","b":["Guides","Patterns"]},{"i":276,"t":"Cheatsheet","u":"/docs/references/cheatsheet","b":["API"]},{"i":291,"t":"Supporting Server Side Rendering","u":"/docs/guides/ssr","b":["Guides"]},{"i":301,"t":"Class Selector","u":"/docs/references/class-selectors","b":["API","CSS"]},{"i":319,"t":"Containers","u":"/docs/references/contains","b":["API","CSS"]},{"i":331,"t":"Custom Property","u":"/docs/references/css-vars","b":["API","CSS"]},{"i":351,"t":"Custom Selector","u":"/docs/references/custom-selectors","b":["API","Stylable"]},{"i":367,"t":"Extend","u":"/docs/references/extend-stylesheet","b":["API","Stylable"]},{"i":377,"t":"Import","u":"/docs/references/imports","b":["API","Stylable"]},{"i":393,"t":"Global Selector","u":"/docs/references/global-selectors","b":["API","Stylable"]},{"i":399,"t":"Keyframes","u":"/docs/references/keyframes","b":["API","CSS"]},{"i":411,"t":"Formatters","u":"/docs/references/formatters","b":["API","Templating"]},{"i":417,"t":"Layer","u":"/docs/references/layer","b":["API","CSS"]},{"i":431,"t":"Namespace","u":"/docs/references/namespace","b":["API","Stylable"]},{"i":434,"t":"Mixins","u":"/docs/references/mixins","b":["API","Templating"]},{"i":454,"t":"Programmatic API","u":"/docs/references/programmatic-api","b":["API"]},{"i":467,"t":"Pseudo-Class","u":"/docs/references/pseudo-classes","b":["API","CSS"]},{"i":487,"t":"Pseudo-Element","u":"/docs/references/pseudo-elements","b":["API","CSS"]},{"i":501,"t":"Scope","u":"/docs/references/st-scope","b":["API","Stylable"]},{"i":507,"t":"Root","u":"/docs/references/root","b":["API","Stylable"]},{"i":517,"t":"Runtime","u":"/docs/references/runtime","b":["API"]},{"i":527,"t":"Variables","u":"/docs/references/st-variables","b":["API","Templating"]},{"i":547,"t":"Type Selector","u":"/docs/references/type-selectors","b":["API","CSS"]},{"i":562,"t":"Style Guide","u":"/docs/style-guide","b":[]},{"i":591,"t":"url()","u":"/docs/references/using-external-assets","b":["API","CSS"]}],"index":{"version":"2.3.9","fields":["t"],"fieldVectors":[["t/1",[]],["t/2",[0,2.53,1,1.75,2,2.167]],["t/14",[3,4.128]],["t/17",[4,4.128]],["t/25",[5,4.128]],["t/32",[6,3.137,7,3.137]],["t/47",[8,4.128]],["t/53",[9,4.128]],["t/55",[10,4.128]],["t/63",[11,4.128]],["t/71",[1,2.17,12,3.137]],["t/79",[13,4.128]],["t/91",[14,4.128]],["t/107",[15,4.128]],["t/117",[16,2.688,17,3.137]],["t/123",[1,1.466,16,1.816,18,2.12,19,2.12]],["t/147",[20,2.43]],["t/157",[20,2.43]],["t/161",[21,2.391,22,3.137]],["t/167",[23,3.536]],["t/179",[24,4.128]],["t/198",[20,1.847,25,2.688]],["t/214",[26,3.536]],["t/228",[27,3.536]],["t/242",[28,2.53,29,2.53,30,2.53]],["t/256",[1,2.17,2,2.688]],["t/268",[31,3.137,32,3.137]],["t/270",[20,1.847,33,3.137]],["t/276",[34,4.128]],["t/291",[35,2.12,36,2.12,37,2.12,38,2.12]],["t/301",[20,1.847,39,2.17]],["t/319",[40,4.128]],["t/331",[21,2.391,41,3.137]],["t/351",[21,2.391,39,2.17]],["t/367",[23,3.536]],["t/377",[25,3.536]],["t/393",[39,2.17,42,3.137]],["t/399",[43,4.128]],["t/411",[44,4.128]],["t/417",[45,4.128]],["t/431",[26,3.536]],["t/434",[46,4.128]],["t/454",[47,3.137,48,3.137]],["t/467",[20,1.847,49,2.688]],["t/487",[49,2.688,50,3.137]],["t/501",[51,4.128]],["t/507",[52,4.128]],["t/517",[27,3.536]],["t/527",[53,4.128]],["t/547",[39,2.17,54,3.137]],["t/562",[55,3.137,56,3.137]],["t/591",[57,4.128]]],"invertedIndex":[["api",{"_index":48,"t":{"454":{"position":[[13,3]]}}}],["attribut",{"_index":3,"t":{"14":{"position":[[0,12]]}}}],["best",{"_index":18,"t":{"123":{"position":[[21,4]]}}}],["boilerpl",{"_index":4,"t":{"17":{"position":[[0,11]]}}}],["cheatsheet",{"_index":34,"t":{"276":{"position":[[0,10]]}}}],["class",{"_index":20,"t":{"147":{"position":[[0,7]]},"157":{"position":[[0,7]]},"198":{"position":[[7,5]]},"270":{"position":[[7,7]]},"301":{"position":[[0,5]]},"467":{"position":[[7,5]]}}}],["cli",{"_index":13,"t":{"79":{"position":[[0,3]]}}}],["common",{"_index":32,"t":{"268":{"position":[[8,7]]}}}],["compon",{"_index":16,"t":{"117":{"position":[[0,9]]},"123":{"position":[[9,9]]}}}],["contain",{"_index":40,"t":{"319":{"position":[[0,10]]}}}],["custom",{"_index":21,"t":{"161":{"position":[[0,6]]},"331":{"position":[[0,6]]},"351":{"position":[[0,6]]}}}],["element",{"_index":50,"t":{"487":{"position":[[7,7]]}}}],["extend",{"_index":23,"t":{"167":{"position":[[0,6]]},"367":{"position":[[0,6]]}}}],["formatt",{"_index":44,"t":{"411":{"position":[[0,10]]}}}],["global",{"_index":42,"t":{"393":{"position":[[0,6]]}}}],["guid",{"_index":56,"t":{"562":{"position":[[6,5]]}}}],["import",{"_index":25,"t":{"198":{"position":[[0,6]]},"377":{"position":[[0,6]]}}}],["integr",{"_index":7,"t":{"32":{"position":[[7,11]]}}}],["intellig",{"_index":12,"t":{"71":{"position":[[9,12]]}}}],["intro",{"_index":5,"t":{"25":{"position":[[0,5]]}}}],["introduct",{"_index":24,"t":{"179":{"position":[[0,12]]}}}],["keyfram",{"_index":43,"t":{"399":{"position":[[0,9]]}}}],["layer",{"_index":45,"t":{"417":{"position":[[0,5]]}}}],["manual",{"_index":6,"t":{"32":{"position":[[0,6]]}}}],["migrat",{"_index":30,"t":{"242":{"position":[[19,9]]}}}],["mixin",{"_index":46,"t":{"434":{"position":[[0,6]]}}}],["namespac",{"_index":26,"t":{"214":{"position":[[0,11]]},"431":{"position":[[0,9]]}}}],["nextj",{"_index":11,"t":{"63":{"position":[[0,6]]}}}],["practic",{"_index":19,"t":{"123":{"position":[[26,9]]}}}],["programmat",{"_index":47,"t":{"454":{"position":[[0,12]]}}}],["project",{"_index":31,"t":{"268":{"position":[[0,7]]}}}],["properti",{"_index":41,"t":{"331":{"position":[[7,8]]}}}],["pseudo",{"_index":49,"t":{"467":{"position":[[0,6]]},"487":{"position":[[0,6]]}}}],["render",{"_index":38,"t":{"291":{"position":[[23,9]]}}}],["rollup",{"_index":8,"t":{"47":{"position":[[0,6]]}}}],["root",{"_index":52,"t":{"507":{"position":[[0,4]]}}}],["runtim",{"_index":27,"t":{"228":{"position":[[0,7]]},"517":{"position":[[0,7]]}}}],["scope",{"_index":51,"t":{"501":{"position":[[0,5]]}}}],["selector",{"_index":39,"t":{"301":{"position":[[6,8]]},"351":{"position":[[7,8]]},"393":{"position":[[7,8]]},"547":{"position":[[5,8]]}}}],["server",{"_index":36,"t":{"291":{"position":[[11,6]]}}}],["share",{"_index":33,"t":{"270":{"position":[[0,6]]}}}],["side",{"_index":37,"t":{"291":{"position":[[18,4]]}}}],["state",{"_index":22,"t":{"161":{"position":[[7,5]]}}}],["step",{"_index":29,"t":{"242":{"position":[[10,5]]}}}],["storybook",{"_index":9,"t":{"53":{"position":[[0,9]]}}}],["stylabl",{"_index":1,"t":{"2":{"position":[[11,8]]},"71":{"position":[[0,8]]},"123":{"position":[[0,8]]},"256":{"position":[[0,8]]}}}],["stylable.config.j",{"_index":10,"t":{"55":{"position":[[0,18]]}}}],["style",{"_index":55,"t":{"562":{"position":[[0,5]]}}}],["suggest",{"_index":28,"t":{"242":{"position":[[0,9]]}}}],["support",{"_index":35,"t":{"291":{"position":[[0,10]]}}}],["type",{"_index":54,"t":{"547":{"position":[[0,4]]}}}],["typescript",{"_index":14,"t":{"91":{"position":[[0,10]]}}}],["url",{"_index":57,"t":{"591":{"position":[[0,5]]}}}],["v5",{"_index":2,"t":{"2":{"position":[[20,2]]},"256":{"position":[[9,2]]}}}],["variabl",{"_index":53,"t":{"527":{"position":[[0,9]]}}}],["variant",{"_index":17,"t":{"117":{"position":[[10,8]]}}}],["webpack",{"_index":15,"t":{"107":{"position":[[0,7]]}}}],["welcom",{"_index":0,"t":{"2":{"position":[[0,7]]}}}]],"pipeline":["stemmer"]}},{"documents":[{"i":4,"t":"First time hearing about Stylable?","u":"/blog/welcome-to-stylable-v5","h":"#first-time-hearing-about-stylable","p":2},{"i":6,"t":"What went on behind the scenes?","u":"/blog/welcome-to-stylable-v5","h":"#what-went-on-behind-the-scenes","p":2},{"i":8,"t":"What have we been up to recently?","u":"/blog/welcome-to-stylable-v5","h":"#what-have-we-been-up-to-recently","p":2},{"i":10,"t":"Additional highlights","u":"/blog/welcome-to-stylable-v5","h":"#additional-highlights","p":2},{"i":12,"t":"What's next for Stylable?","u":"/blog/welcome-to-stylable-v5","h":"#whats-next-for-stylable","p":2},{"i":15,"t":"Landing Page Images","u":"/docs/attributions","h":"#landing-page-images","p":14},{"i":19,"t":"ts-react-webpack (app)","u":"/docs/getting-started/boilerplate","h":"#ts-react-webpack-app","p":17},{"i":21,"t":"ts-react-rollup (app)","u":"/docs/getting-started/boilerplate","h":"#ts-react-rollup-app","p":17},{"i":23,"t":"Integrated and ready to learn?","u":"/docs/getting-started/boilerplate","h":"#integrated-and-ready-to-learn","p":17},{"i":26,"t":"What is Stylable?","u":"/docs/getting-started/intro","h":"#what-is-stylable","p":25},{"i":28,"t":"Where do I start?","u":"/docs/getting-started/intro","h":"#where-do-i-start","p":25},{"i":30,"t":"Want to learn more?","u":"/docs/getting-started/intro","h":"#want-to-learn-more","p":25},{"i":34,"t":"TypeScript development","u":"/docs/getting-started/manual-integration","h":"#typescript-development","p":32},{"i":36,"t":"Application","u":"/docs/getting-started/manual-integration","h":"#application","p":32},{"i":37,"t":"Bundler","u":"/docs/getting-started/manual-integration","h":"#bundler","p":32},{"i":39,"t":"Server-side rendering (SSR)","u":"/docs/getting-started/manual-integration","h":"#server-side-rendering-ssr","p":32},{"i":41,"t":"Component library","u":"/docs/getting-started/manual-integration","h":"#component-library","p":32},{"i":43,"t":"Additional tooling support","u":"/docs/getting-started/manual-integration","h":"#additional-tooling-support","p":32},{"i":45,"t":"Integrated and ready to learn?","u":"/docs/getting-started/manual-integration","h":"#integrated-and-ready-to-learn","p":32},{"i":49,"t":"Install","u":"/docs/getting-started/rollup-integration","h":"#install","p":47},{"i":51,"t":"Configuration","u":"/docs/getting-started/rollup-integration","h":"#configuration","p":47},{"i":57,"t":"defaultConfig","u":"/docs/getting-started/stylable-config","h":"#defaultconfig","p":55},{"i":59,"t":"stcConfig","u":"/docs/getting-started/stylable-config","h":"#stcconfig","p":55},{"i":61,"t":"webpackPlugin","u":"/docs/getting-started/stylable-config","h":"#webpackplugin","p":55},{"i":65,"t":"Using 3rd-party stylesheets","u":"/docs/getting-started/nextjs-integration","h":"#using-3rd-party-stylesheets","p":63},{"i":67,"t":"TypeScript integration","u":"/docs/getting-started/nextjs-integration","h":"#typescript-integration","p":63},{"i":69,"t":"App directory","u":"/docs/getting-started/nextjs-integration","h":"#app-directory","p":63},{"i":73,"t":"Installation","u":"/docs/getting-started/tooling/stylable-intelligence","h":"#installation","p":71},{"i":75,"t":"IDE extensions","u":"/docs/getting-started/tooling/stylable-intelligence","h":"#ide-extensions","p":71},{"i":77,"t":"CSS functionality","u":"/docs/getting-started/tooling/stylable-intelligence","h":"#css-functionality","p":71},{"i":81,"t":"Installation","u":"/docs/getting-started/tooling/cli","h":"#installation","p":79},{"i":83,"t":"Using the CLI","u":"/docs/getting-started/tooling/cli","h":"#using-the-cli","p":79},{"i":85,"t":"CLI Arguments","u":"/docs/getting-started/tooling/cli","h":"#cli-arguments","p":79},{"i":87,"t":"Generating an index file","u":"/docs/getting-started/tooling/cli","h":"#generating-an-index-file","p":79},{"i":89,"t":"Control exposed API","u":"/docs/getting-started/tooling/cli","h":"#control-exposed-api","p":79},{"i":93,"t":"Generating types per stylesheet","u":"/docs/getting-started/typescript-integration","h":"#generating-types-per-stylesheet","p":91},{"i":95,"t":"Generated files","u":"/docs/getting-started/typescript-integration","h":"#generated-files","p":91},{"i":97,"t":"Using the CLI","u":"/docs/getting-started/typescript-integration","h":"#using-the-cli","p":91},{"i":99,"t":"Using a bundler","u":"/docs/getting-started/typescript-integration","h":"#using-a-bundler","p":91},{"i":101,"t":"Global definition","u":"/docs/getting-started/typescript-integration","h":"#global-definition","p":91},{"i":103,"t":"Typing 3rd-party stylesheets","u":"/docs/getting-started/typescript-integration","h":"#typing-3rd-party-stylesheets","p":91},{"i":105,"t":"Publishing","u":"/docs/getting-started/typescript-integration","h":"#publishing","p":91},{"i":109,"t":"Install","u":"/docs/getting-started/webpack-integration","h":"#install","p":107},{"i":111,"t":"Configuration","u":"/docs/getting-started/webpack-integration","h":"#configuration","p":107},{"i":113,"t":"With another CSS solution","u":"/docs/getting-started/webpack-integration","h":"#with-another-css-solution","p":107},{"i":115,"t":"stylable.config.js","u":"/docs/getting-started/webpack-integration","h":"#stylableconfigjs","p":107},{"i":119,"t":"Defining a component variant","u":"/docs/guides/component-variants","h":"#defining-a-component-variant","p":117},{"i":121,"t":"Use component variants in components","u":"/docs/guides/component-variants","h":"#use-component-variants-in-components","p":117},{"i":125,"t":"Avoid size declarations","u":"/docs/guides/component-best-practices","h":"#avoid-size-declarations","p":123},{"i":127,"t":"Give meaningful names","u":"/docs/guides/component-best-practices","h":"#give-meaningful-names","p":123},{"i":129,"t":"Avoid global settings in your stylesheet","u":"/docs/guides/component-best-practices","h":"#avoid-global-settings-in-your-stylesheet","p":123},{"i":131,"t":"Keep your layout minimal","u":"/docs/guides/component-best-practices","h":"#keep-your-layout-minimal","p":123},{"i":133,"t":"Keep coloring to a minimum","u":"/docs/guides/component-best-practices","h":"#keep-coloring-to-a-minimum","p":123},{"i":135,"t":"Keep browser defaults intact","u":"/docs/guides/component-best-practices","h":"#keep-browser-defaults-intact","p":123},{"i":137,"t":"Keep specificity low","u":"/docs/guides/component-best-practices","h":"#keep-specificity-low","p":123},{"i":139,"t":"Keep your selectors as simple as possible","u":"/docs/guides/component-best-practices","h":"#keep-your-selectors-as-simple-as-possible","p":123},{"i":141,"t":"Justify your CSS declarations in comments","u":"/docs/guides/component-best-practices","h":"#justify-your-css-declarations-in-comments","p":123},{"i":143,"t":"Use consistent variables from a central location","u":"/docs/guides/component-best-practices","h":"#use-consistent-variables-from-a-central-location","p":123},{"i":145,"t":"Keep SVG and images overridable","u":"/docs/guides/component-best-practices","h":"#keep-svg-and-images-overridable","p":123},{"i":149,"t":"CSS classes","u":"/docs/guides/handbook/class","h":"#css-classes","p":147},{"i":151,"t":"Resolve global conflicts","u":"/docs/guides/handbook/class","h":"#resolve-global-conflicts","p":147},{"i":153,"t":"Runtime mapping","u":"/docs/guides/handbook/class","h":"#runtime-mapping","p":147},{"i":155,"t":"Naming tip","u":"/docs/guides/handbook/class","h":"#naming-tip","p":147},{"i":159,"t":"CSS feature","u":"/docs/guides/handbook/classes","h":"#css-feature","p":157},{"i":163,"t":"Define and target","u":"/docs/guides/handbook/custom-state","h":"#define-and-target","p":161},{"i":165,"t":"Runtime toggle","u":"/docs/guides/handbook/custom-state","h":"#runtime-toggle","p":161},{"i":169,"t":"Extend a stylesheet","u":"/docs/guides/handbook/extend","h":"#extend-a-stylesheet","p":167},{"i":171,"t":"Apply the extending class","u":"/docs/guides/handbook/extend","h":"#apply-the-extending-class","p":167},{"i":173,"t":"Access inner parts","u":"/docs/guides/handbook/extend","h":"#access-inner-parts","p":167},{"i":175,"t":"Access a state","u":"/docs/guides/handbook/extend","h":"#access-a-state","p":167},{"i":177,"t":"Extend multiple levels","u":"/docs/guides/handbook/extend","h":"#extend-multiple-levels","p":167},{"i":180,"t":"What am I reading?","u":"/docs/guides/handbook/intro","h":"#what-am-i-reading","p":179},{"i":182,"t":"What is Stylable?","u":"/docs/guides/handbook/intro","h":"#what-is-stylable","p":179},{"i":184,"t":"Pre-processor","u":"/docs/guides/handbook/intro","h":"#pre-processor","p":179},{"i":186,"t":"Type system","u":"/docs/guides/handbook/intro","h":"#type-system","p":179},{"i":188,"t":"Language server","u":"/docs/guides/handbook/intro","h":"#language-server","p":179},{"i":190,"t":"Tooling","u":"/docs/guides/handbook/intro","h":"#tooling","p":179},{"i":192,"t":"Who is Stylable for?","u":"/docs/guides/handbook/intro","h":"#who-is-stylable-for","p":179},{"i":194,"t":"Component libraries","u":"/docs/guides/handbook/intro","h":"#component-libraries","p":179},{"i":196,"t":"Applications","u":"/docs/guides/handbook/intro","h":"#applications","p":179},{"i":200,"t":"Stylesheet root","u":"/docs/guides/handbook/import-class","h":"#stylesheet-root","p":198},{"i":202,"t":"Default import","u":"/docs/guides/handbook/import-class","h":"#default-import","p":198},{"i":204,"t":"Stylesheet root selector","u":"/docs/guides/handbook/import-class","h":"#stylesheet-root-selector","p":198},{"i":206,"t":"Class named import","u":"/docs/guides/handbook/import-class","h":"#class-named-import","p":198},{"i":208,"t":"Validations","u":"/docs/guides/handbook/import-class","h":"#validations","p":198},{"i":210,"t":"Exported by default","u":"/docs/guides/handbook/import-class","h":"#exported-by-default","p":198},{"i":212,"t":"Further import use-cases","u":"/docs/guides/handbook/import-class","h":"#further-import-use-cases","p":198},{"i":216,"t":"Supported symbols","u":"/docs/guides/handbook/namespacing","h":"#supported-symbols","p":214},{"i":218,"t":"Global","u":"/docs/guides/handbook/namespacing","h":"#global","p":214},{"i":220,"t":"Disable in selector","u":"/docs/guides/handbook/namespacing","h":"#disable-in-selector","p":214},{"i":222,"t":"Defining global symbols","u":"/docs/guides/handbook/namespacing","h":"#defining-global-symbols","p":214},{"i":224,"t":"Stylesheet level namespacing","u":"/docs/guides/handbook/namespacing","h":"#stylesheet-level-namespacing","p":214},{"i":226,"t":"Project level namespacing","u":"/docs/guides/handbook/namespacing","h":"#project-level-namespacing","p":214},{"i":230,"t":"Mapped symbols","u":"/docs/guides/handbook/runtime","h":"#mapped-symbols","p":228},{"i":232,"t":"Import example","u":"/docs/guides/handbook/runtime","h":"#import-example","p":228},{"i":234,"t":"Runtime namespaced names","u":"/docs/guides/handbook/runtime","h":"#runtime-namespaced-names","p":228},{"i":236,"t":"Apply class and state","u":"/docs/guides/handbook/runtime","h":"#apply-class-and-state","p":228},{"i":238,"t":"st() function","u":"/docs/guides/handbook/runtime","h":"#st-function","p":228},{"i":240,"t":"Stylable build variables","u":"/docs/guides/handbook/runtime","h":"#stylable-build-variables","p":228},{"i":244,"t":"Update dependencies","u":"/docs/guides/migration-v3","h":"#update-dependencies","p":242},{"i":246,"t":"Update global typings","u":"/docs/guides/migration-v3","h":"","p":242},{"i":248,"t":"Update .st.css file imports","u":"/docs/guides/migration-v3","h":"#update-stcss-file-imports","p":242},{"i":250,"t":"CSS custom properties","u":"/docs/guides/migration-v3","h":"#css-custom-properties","p":242},{"i":252,"t":"Update usage in React components","u":"/docs/guides/migration-v3","h":"#update-usage-in-react-components","p":242},{"i":254,"t":"Update tests","u":"/docs/guides/migration-v3","h":"#update-tests","p":242},{"i":258,"t":"@stylable/core","u":"/docs/guides/migration-v5","h":"#stylablecore","p":256},{"i":259,"t":"Diagnostics overhaul","u":"/docs/guides/migration-v5","h":"#diagnostics-overhaul","p":256},{"i":261,"t":"Reducing public facing APIs","u":"/docs/guides/migration-v5","h":"#reducing-public-facing-apis","p":256},{"i":263,"t":"@stylable/cli","u":"/docs/guides/migration-v5","h":"#stylablecli","p":256},{"i":264,"t":"Default arguments changed","u":"/docs/guides/migration-v5","h":"#default-arguments-changed","p":256},{"i":266,"t":"Build index file and other outputs simultaneously","u":"/docs/guides/migration-v5","h":"#build-index-file-and-other-outputs-simultaneously","p":256},{"i":272,"t":"Defining a shared class","u":"/docs/guides/shared-classes","h":"#defining-a-shared-class","p":270},{"i":274,"t":"Use shared classes in components","u":"/docs/guides/shared-classes","h":"#use-shared-classes-in-components","p":270},{"i":277,"t":"CSS Terminology","u":"/docs/references/cheatsheet","h":"#css-terminology","p":276},{"i":279,"t":"Syntax","u":"/docs/references/cheatsheet","h":"#syntax","p":276},{"i":281,"t":"Selectors","u":"/docs/references/cheatsheet","h":"#selectors","p":276},{"i":283,"t":"Module system","u":"/docs/references/cheatsheet","h":"#module-system","p":276},{"i":285,"t":"Class extensions","u":"/docs/references/cheatsheet","h":"#class-extensions","p":276},{"i":287,"t":"Templating","u":"/docs/references/cheatsheet","h":"#templating","p":276},{"i":289,"t":"Other","u":"/docs/references/cheatsheet","h":"#other","p":276},{"i":293,"t":"Transforming Stylable in the Server","u":"/docs/guides/ssr","h":"#transforming-stylable-in-the-server","p":291},{"i":295,"t":"Matching namespaces","u":"/docs/guides/ssr","h":"#matching-namespaces","p":291},{"i":297,"t":"Supporting multiple transpilation targets","u":"/docs/guides/ssr","h":"#supporting-multiple-transpilation-targets","p":291},{"i":299,"t":"Publishing SSR-ready source files (*.st.css)","u":"/docs/guides/ssr","h":"#publishing-ssr-ready-source-files-stcss","p":291},{"i":303,"t":"Syntax","u":"/docs/references/class-selectors","h":"#syntax","p":301},{"i":305,"t":"Root","u":"/docs/references/class-selectors","h":"#root","p":301},{"i":307,"t":"Import and Export","u":"/docs/references/class-selectors","h":"#import-and-export","p":301},{"i":309,"t":"Runtime","u":"/docs/references/class-selectors","h":"#runtime","p":301},{"i":311,"t":"Namespace","u":"/docs/references/class-selectors","h":"#namespace","p":301},{"i":313,"t":"Disable in selector","u":"/docs/references/class-selectors","h":"#disable-in-selector","p":301},{"i":315,"t":"Map to global selector","u":"/docs/references/class-selectors","h":"#map-to-global-selector","p":301},{"i":317,"t":"Related","u":"/docs/references/class-selectors","h":"#related","p":301},{"i":321,"t":"Syntax","u":"/docs/references/contains","h":"#syntax","p":319},{"i":323,"t":"Import and Export","u":"/docs/references/contains","h":"#import-and-export","p":319},{"i":325,"t":"Runtime","u":"/docs/references/contains","h":"#runtime","p":319},{"i":327,"t":"Namespace","u":"/docs/references/contains","h":"#namespace","p":319},{"i":329,"t":"Disable namespace","u":"/docs/references/contains","h":"#disable-namespace","p":319},{"i":333,"t":"syntax","u":"/docs/references/css-vars","h":"#syntax","p":331},{"i":335,"t":"Get / Set","u":"/docs/references/css-vars","h":"#get--set","p":331},{"i":337,"t":"Runtime definition","u":"/docs/references/css-vars","h":"#runtime-definition","p":331},{"i":339,"t":"Build only definition","u":"/docs/references/css-vars","h":"#build-only-definition","p":331},{"i":341,"t":"Comparison to build vars","u":"/docs/references/css-vars","h":"#comparison-to-build-vars","p":331},{"i":343,"t":"Import and Export","u":"/docs/references/css-vars","h":"#import-and-export","p":331},{"i":345,"t":"Runtime","u":"/docs/references/css-vars","h":"#runtime","p":331},{"i":347,"t":"Namespace","u":"/docs/references/css-vars","h":"#namespace","p":331},{"i":349,"t":"Disable namespace","u":"/docs/references/css-vars","h":"#disable-namespace","p":331},{"i":353,"t":"Usage","u":"/docs/references/custom-selectors","h":"#usage","p":351},{"i":355,"t":"Expose pseudo-element","u":"/docs/references/custom-selectors","h":"#expose-pseudo-element","p":351},{"i":357,"t":"Use cases","u":"/docs/references/custom-selectors","h":"#use-cases","p":351},{"i":359,"t":"Container and recursive components","u":"/docs/references/custom-selectors","h":"#container-and-recursive-components","p":351},{"i":361,"t":"Expose inner parts that are deeply defined","u":"/docs/references/custom-selectors","h":"#expose-inner-parts-that-are-deeply-defined","p":351},{"i":363,"t":"Combination selector","u":"/docs/references/custom-selectors","h":"#combination-selector","p":351},{"i":365,"t":"Group of selectors","u":"/docs/references/custom-selectors","h":"#group-of-selectors","p":351},{"i":369,"t":"Syntax","u":"/docs/references/extend-stylesheet","h":"#syntax","p":367},{"i":371,"t":"Example","u":"/docs/references/extend-stylesheet","h":"#example","p":367},{"i":373,"t":"Runtime - root vs class","u":"/docs/references/extend-stylesheet","h":"#runtime---root-vs-class","p":367},{"i":375,"t":"Namespace","u":"/docs/references/extend-stylesheet","h":"#namespace","p":367},{"i":379,"t":"Syntax","u":"/docs/references/imports","h":"#syntax","p":377},{"i":381,"t":"Default import","u":"/docs/references/imports","h":"#default-import","p":377},{"i":383,"t":"Named import","u":"/docs/references/imports","h":"#named-import","p":377},{"i":385,"t":"Stylable stylesheet","u":"/docs/references/imports","h":"#stylable-stylesheet","p":377},{"i":387,"t":"Named type assertion","u":"/docs/references/imports","h":"#named-type-assertion","p":377},{"i":389,"t":"Javascript","u":"/docs/references/imports","h":"#javascript","p":377},{"i":391,"t":"Legacy syntax","u":"/docs/references/imports","h":"#legacy-syntax","p":377},{"i":395,"t":"Syntax","u":"/docs/references/global-selectors","h":"#syntax","p":393},{"i":397,"t":"Force native","u":"/docs/references/global-selectors","h":"#force-native","p":393},{"i":401,"t":"Syntax","u":"/docs/references/keyframes","h":"#syntax","p":399},{"i":403,"t":"Import and Export","u":"/docs/references/keyframes","h":"#import-and-export","p":399},{"i":405,"t":"Runtime","u":"/docs/references/keyframes","h":"#runtime","p":399},{"i":407,"t":"Namespace","u":"/docs/references/keyframes","h":"#namespace","p":399},{"i":409,"t":"Disable namespace","u":"/docs/references/keyframes","h":"#disable-namespace","p":399},{"i":413,"t":"Formatters with variables","u":"/docs/references/formatters","h":"#formatters-with-variables","p":411},{"i":415,"t":"Nested formatters","u":"/docs/references/formatters","h":"#nested-formatters","p":411},{"i":419,"t":"Syntax","u":"/docs/references/layer","h":"#syntax","p":417},{"i":421,"t":"Import and Export","u":"/docs/references/layer","h":"#import-and-export","p":417},{"i":423,"t":"Native CSS import","u":"/docs/references/layer","h":"#native-css-import","p":417},{"i":425,"t":"Runtime","u":"/docs/references/layer","h":"#runtime","p":417},{"i":427,"t":"Namespace","u":"/docs/references/layer","h":"#namespace","p":417},{"i":429,"t":"Disable namespace","u":"/docs/references/layer","h":"#disable-namespace","p":417},{"i":432,"t":"Manual Namespace","u":"/docs/references/namespace","h":"#manual-namespace","p":431},{"i":436,"t":"CSS mixins","u":"/docs/references/mixins","h":"#css-mixins","p":434},{"i":438,"t":"Variable overrides","u":"/docs/references/mixins","h":"#variable-overrides","p":434},{"i":440,"t":"Partial CSS mixins","u":"/docs/references/mixins","h":"#partial-css-mixins","p":434},{"i":442,"t":"JavaScript mixins","u":"/docs/references/mixins","h":"#javascript-mixins","p":434},{"i":444,"t":"Create multiple style-rules","u":"/docs/references/mixins","h":"#create-multiple-style-rules","p":434},{"i":446,"t":"How mixins are applied","u":"/docs/references/mixins","h":"#how-mixins-are-applied","p":434},{"i":448,"t":"Considerations when using mixins","u":"/docs/references/mixins","h":"#considerations-when-using-mixins","p":434},{"i":450,"t":"Escape special characters","u":"/docs/references/mixins","h":"#escape-special-characters","p":434},{"i":452,"t":"Circular references","u":"/docs/references/mixins","h":"#circular-references","p":434},{"i":455,"t":"Stylable instance","u":"/docs/references/programmatic-api","h":"#stylable-instance","p":454},{"i":457,"t":"Configuration","u":"/docs/references/programmatic-api","h":"#configuration","p":454},{"i":459,"t":"MinimalFS","u":"/docs/references/programmatic-api","h":"#minimalfs","p":454},{"i":461,"t":"ResolveNamespace","u":"/docs/references/programmatic-api","h":"#resolvenamespace","p":454},{"i":463,"t":"ModuleResolver","u":"/docs/references/programmatic-api","h":"#moduleresolver","p":454},{"i":465,"t":"RequireModule","u":"/docs/references/programmatic-api","h":"#requiremodule","p":454},{"i":469,"t":"Syntax","u":"/docs/references/pseudo-classes","h":"#syntax","p":467},{"i":471,"t":"Boolean","u":"/docs/references/pseudo-classes","h":"#boolean","p":467},{"i":473,"t":"Enum","u":"/docs/references/pseudo-classes","h":"#enum","p":467},{"i":475,"t":"String","u":"/docs/references/pseudo-classes","h":"#string","p":467},{"i":477,"t":"Number","u":"/docs/references/pseudo-classes","h":"#number","p":467},{"i":479,"t":"State inheritance","u":"/docs/references/pseudo-classes","h":"#state-inheritance","p":467},{"i":481,"t":"Runtime","u":"/docs/references/pseudo-classes","h":"#runtime","p":467},{"i":483,"t":"Namespace","u":"/docs/references/pseudo-classes","h":"#namespace","p":467},{"i":485,"t":"Map to selector","u":"/docs/references/pseudo-classes","h":"#map-to-selector","p":467},{"i":489,"t":"Syntax","u":"/docs/references/pseudo-elements","h":"#syntax","p":487},{"i":491,"t":"Style a component","u":"/docs/references/pseudo-elements","h":"#style-a-component","p":487},{"i":493,"t":"Style a variant","u":"/docs/references/pseudo-elements","h":"#style-a-variant","p":487},{"i":495,"t":"Define","u":"/docs/references/pseudo-elements","h":"#define","p":487},{"i":497,"t":"Element inheritance","u":"/docs/references/pseudo-elements","h":"#element-inheritance","p":487},{"i":499,"t":"Build transformation","u":"/docs/references/pseudo-elements","h":"#build-transformation","p":487},{"i":503,"t":"Syntax","u":"/docs/references/st-scope","h":"#syntax","p":501},{"i":505,"t":"Theming with scope","u":"/docs/references/st-scope","h":"#theming-with-scope","p":501},{"i":509,"t":"Default export","u":"/docs/references/root","h":"#default-export","p":507},{"i":511,"t":"Runtime","u":"/docs/references/root","h":"#runtime","p":507},{"i":513,"t":"simple example","u":"/docs/references/root","h":"#simple-example","p":507},{"i":515,"t":"root + state + customize","u":"/docs/references/root","h":"#root--state--customize","p":507},{"i":519,"t":"Manual mapping","u":"/docs/references/runtime","h":"#manual-mapping","p":517},{"i":521,"t":"Build vars","u":"/docs/references/runtime","h":"#build-vars","p":517},{"i":523,"t":"st() function","u":"/docs/references/runtime","h":"#st-function","p":517},{"i":525,"t":"Custom state mapping","u":"/docs/references/runtime","h":"#custom-state-mapping","p":517},{"i":529,"t":"Syntax","u":"/docs/references/st-variables","h":"#syntax","p":527},{"i":531,"t":"Define","u":"/docs/references/st-variables","h":"#define","p":527},{"i":533,"t":"Evaluate","u":"/docs/references/st-variables","h":"#evaluate","p":527},{"i":535,"t":"Compose","u":"/docs/references/st-variables","h":"#compose","p":527},{"i":537,"t":"Array","u":"/docs/references/st-variables","h":"#array","p":527},{"i":539,"t":"Map","u":"/docs/references/st-variables","h":"#map","p":527},{"i":541,"t":"Import and Export","u":"/docs/references/st-variables","h":"#import-and-export","p":527},{"i":543,"t":"Runtime","u":"/docs/references/st-variables","h":"#runtime","p":527},{"i":545,"t":"Custom variable","u":"/docs/references/st-variables","h":"#custom-variable","p":527},{"i":549,"t":"Syntax","u":"/docs/references/type-selectors","h":"#syntax","p":547},{"i":550,"t":"Native element","u":"/docs/references/type-selectors","h":"#native-element","p":547},{"i":552,"t":"Component element","u":"/docs/references/type-selectors","h":"#component-element","p":547},{"i":554,"t":"Scoping","u":"/docs/references/type-selectors","h":"#scoping","p":547},{"i":556,"t":"Import and Export","u":"/docs/references/type-selectors","h":"#import-and-export","p":547},{"i":558,"t":"Runtime","u":"/docs/references/type-selectors","h":"#runtime","p":547},{"i":560,"t":"Namespace","u":"/docs/references/type-selectors","h":"#namespace","p":547},{"i":564,"t":"Markdown Syntax","u":"/docs/style-guide","h":"#markdown-syntax","p":562},{"i":566,"t":"Headers","u":"/docs/style-guide","h":"#headers","p":562},{"i":567,"t":"H1 - Create the best documentation","u":"/docs/style-guide","h":"","p":562},{"i":568,"t":"H2 - Create the best documentation","u":"/docs/style-guide","h":"#h2---create-the-best-documentation","p":562},{"i":569,"t":"H3 - Create the best documentation","u":"/docs/style-guide","h":"#h3---create-the-best-documentation","p":562},{"i":571,"t":"Emphasis","u":"/docs/style-guide","h":"#emphasis","p":562},{"i":573,"t":"Lists","u":"/docs/style-guide","h":"#lists","p":562},{"i":575,"t":"Links","u":"/docs/style-guide","h":"#links","p":562},{"i":577,"t":"Images","u":"/docs/style-guide","h":"#images","p":562},{"i":579,"t":"Code","u":"/docs/style-guide","h":"#code","p":562},{"i":581,"t":"Tables","u":"/docs/style-guide","h":"#tables","p":562},{"i":583,"t":"Blockquotes","u":"/docs/style-guide","h":"#blockquotes","p":562},{"i":585,"t":"Inline HTML","u":"/docs/style-guide","h":"#inline-html","p":562},{"i":587,"t":"Line Breaks","u":"/docs/style-guide","h":"#line-breaks","p":562},{"i":589,"t":"Admonitions","u":"/docs/style-guide","h":"#admonitions","p":562},{"i":593,"t":"Resolving 3rd-party assets","u":"/docs/references/using-external-assets","h":"#resolving-3rd-party-assets","p":591}],"index":{"version":"2.3.9","fields":["t"],"fieldVectors":[["t/4",[0,3.722,1,3.722,2,3.722,3,2.382]],["t/6",[4,4.342,5,4.342,6,4.342]],["t/8",[7,5.209,8,5.209]],["t/10",[9,4.69,10,5.209]],["t/12",[3,2.779,11,4.342,12,4.342]],["t/15",[13,4.342,14,4.342,15,3.624]],["t/19",[16,3.351,17,3.107,18,3.722,19,3.107]],["t/21",[16,3.351,17,3.107,19,3.107,20,3.722]],["t/23",[21,3.624,22,3.624,23,3.624]],["t/26",[3,4.167]],["t/28",[24,6.51]],["t/30",[23,3.624,25,4.342,26,4.342]],["t/34",[27,4.69,28,5.209]],["t/36",[29,5.862]],["t/37",[30,5.862]],["t/39",[31,3.107,32,3.722,33,3.722,34,3.351]],["t/41",[35,3.334,36,4.69]],["t/43",[9,3.909,37,3.909,38,3.624]],["t/45",[21,3.624,22,3.624,23,3.624]],["t/49",[39,5.116]],["t/51",[40,5.435]],["t/57",[41,6.51]],["t/59",[42,6.51]],["t/61",[43,6.51]],["t/65",[44,2.309,45,3.107,46,3.107,47,2.382]],["t/67",[21,4.349,27,4.69]],["t/69",[19,4.349,48,5.209]],["t/73",[39,5.116]],["t/75",[49,5.209,50,4.69]],["t/77",[51,3.232,52,4.349]],["t/81",[39,5.116]],["t/83",[44,3.232,53,4.349]],["t/85",[53,4.349,54,4.69]],["t/87",[55,3.624,56,3.909,57,3.242]],["t/89",[58,4.342,59,3.624,60,3.909]],["t/93",[47,2.382,55,3.107,61,2.779,62,3.722]],["t/95",[55,4.349,57,3.889]],["t/97",[44,3.232,53,4.349]],["t/99",[30,4.69,44,3.232]],["t/101",[63,3.574,64,4.349]],["t/103",[45,3.107,46,3.107,47,2.382,61,2.779]],["t/105",[65,5.862]],["t/109",[39,5.116]],["t/111",[40,5.435]],["t/113",[51,2.694,66,4.342,67,4.342]],["t/115",[68,6.51]],["t/119",[35,2.779,69,2.979,70,3.624]],["t/121",[35,3.582,44,2.309,70,3.107]],["t/125",[71,3.909,72,4.342,73,3.909]],["t/127",[74,4.342,75,4.342,76,3.1]],["t/129",[47,2.382,63,2.554,71,3.351,77,3.351]],["t/131",[78,3.1,79,4.342,80,4.342]],["t/133",[78,3.1,81,4.342,82,4.342]],["t/135",[78,2.657,83,3.722,84,2.657,85,3.722]],["t/137",[78,3.1,86,4.342,87,4.342]],["t/139",[78,2.657,88,2.382,89,3.351,90,3.722]],["t/141",[51,2.309,73,3.351,91,3.722,92,3.722]],["t/143",[44,2.021,93,3.257,94,2.431,95,3.257,96,3.257]],["t/145",[15,3.107,78,2.657,97,3.722,98,3.351]],["t/149",[51,3.232,99,3.447]],["t/151",[63,2.979,100,3.909,101,4.342]],["t/153",[102,2.905,103,3.574]],["t/155",[76,3.72,104,5.209]],["t/159",[51,3.232,105,5.209]],["t/163",[69,3.574,106,4.69]],["t/165",[102,2.905,107,5.209]],["t/169",[47,3.334,108,4.349]],["t/171",[99,2.873,108,3.624,109,3.624]],["t/173",[110,3.909,111,3.909,112,3.909]],["t/175",[110,4.69,113,3.889]],["t/177",[108,3.624,114,3.624,115,3.624]],["t/180",[116,6.51]],["t/182",[3,4.167]],["t/184",[117,5.209,118,5.209]],["t/186",[61,3.889,119,4.69]],["t/188",[31,4.349,120,5.209]],["t/190",[37,5.862]],["t/192",[3,4.167]],["t/194",[35,3.334,36,4.69]],["t/196",[29,5.862]],["t/200",[47,3.334,121,3.889]],["t/202",[84,3.72,122,2.837]],["t/204",[47,2.779,88,2.779,121,3.242]],["t/206",[76,3.1,99,2.873,122,2.364]],["t/208",[123,6.51]],["t/210",[84,3.72,124,3.334]],["t/212",[44,2.309,122,2.027,125,3.722,126,3.351]],["t/216",[38,4.349,127,4.349]],["t/218",[63,4.467]],["t/220",[88,3.334,128,3.72]],["t/222",[63,2.979,69,2.979,127,3.624]],["t/224",[47,2.779,115,3.624,129,2.262]],["t/226",[115,3.624,129,2.262,130,4.342]],["t/230",[103,3.574,127,4.349]],["t/232",[122,2.837,131,4.349]],["t/234",[76,3.1,102,2.421,129,2.262]],["t/236",[99,2.873,109,3.624,113,3.242]],["t/238",[52,4.349,132,4.69]],["t/240",[3,2.779,94,3.242,133,3.1]],["t/244",[134,3.889,135,5.209]],["t/246",[61,3.242,63,2.979,134,3.242]],["t/248",[57,2.779,122,2.027,134,2.779,136,3.351]],["t/250",[51,2.694,137,3.411,138,4.342]],["t/252",[17,3.107,35,2.382,134,2.779,139,3.351]],["t/254",[134,3.889,140,5.209]],["t/258",[141,6.51]],["t/259",[142,5.209,143,5.209]],["t/261",[60,3.351,144,3.722,145,3.722,146,3.722]],["t/263",[147,6.51]],["t/264",[54,3.909,84,3.1,148,4.342]],["t/266",[56,2.932,57,2.431,133,2.325,149,3.257,150,3.257]],["t/272",[69,2.979,99,2.873,151,3.909]],["t/274",[35,2.382,44,2.309,99,2.463,151,3.351]],["t/277",[51,3.232,152,5.209]],["t/279",[153,3.466]],["t/281",[88,4.167]],["t/283",[119,4.69,154,5.209]],["t/285",[50,4.69,99,3.447]],["t/287",[155,6.51]],["t/289",[]],["t/293",[3,2.779,31,3.624,156,3.909]],["t/295",[129,2.714,157,5.209]],["t/297",[38,3.107,106,3.351,114,3.107,158,3.722]],["t/299",[22,2.417,34,2.607,57,2.161,65,2.607,136,2.607,159,2.895]],["t/303",[153,3.466]],["t/305",[121,4.861]],["t/307",[122,2.837,124,3.334]],["t/309",[102,3.63]],["t/311",[129,3.391]],["t/313",[88,3.334,128,3.72]],["t/315",[63,2.979,88,2.779,103,2.979]],["t/317",[160,6.51]],["t/321",[153,3.466]],["t/323",[122,2.837,124,3.334]],["t/325",[102,3.63]],["t/327",[129,3.391]],["t/329",[128,3.72,129,2.714]],["t/333",[153,3.466]],["t/335",[77,4.69,161,4.69]],["t/337",[64,4.349,102,2.905]],["t/339",[64,4.349,133,3.72]],["t/341",[133,3.1,162,4.342,163,3.909]],["t/343",[122,2.837,124,3.334]],["t/345",[102,3.63]],["t/347",[129,3.391]],["t/349",[128,3.72,129,2.714]],["t/353",[139,5.862]],["t/355",[59,3.624,164,4.342,165,3.411]],["t/357",[44,3.232,126,4.69]],["t/359",[35,2.779,166,4.342,167,4.342]],["t/361",[59,2.719,69,2.235,111,2.932,112,2.932,168,3.257]],["t/363",[88,3.334,169,5.209]],["t/365",[88,3.334,170,5.209]],["t/369",[153,3.466]],["t/371",[131,5.435]],["t/373",[99,2.463,102,2.075,121,2.779,171,3.722]],["t/375",[129,3.391]],["t/379",[153,3.466]],["t/381",[84,3.72,122,2.837]],["t/383",[76,3.72,122,2.837]],["t/385",[3,3.334,47,3.334]],["t/387",[61,3.242,76,3.1,172,4.342]],["t/389",[173,5.862]],["t/391",[153,2.773,174,5.209]],["t/395",[153,3.466]],["t/397",[175,5.209,176,4.349]],["t/401",[153,3.466]],["t/403",[122,2.837,124,3.334]],["t/405",[102,3.63]],["t/407",[129,3.391]],["t/409",[128,3.72,129,2.714]],["t/413",[94,3.889,177,4.69]],["t/415",[177,4.69,178,5.209]],["t/419",[153,3.466]],["t/421",[122,2.837,124,3.334]],["t/423",[51,2.694,122,2.364,176,3.624]],["t/425",[102,3.63]],["t/427",[129,3.391]],["t/429",[128,3.72,129,2.714]],["t/432",[129,2.714,179,4.69]],["t/436",[51,3.232,180,3.889]],["t/438",[94,3.889,98,4.69]],["t/440",[51,2.694,180,3.242,181,4.342]],["t/442",[173,4.69,180,3.889]],["t/444",[114,3.107,182,2.924,183,3.107,184,3.722]],["t/446",[109,4.349,180,3.889]],["t/448",[44,2.694,180,3.242,185,4.342]],["t/450",[186,4.342,187,4.342,188,4.342]],["t/452",[189,5.209,190,5.209]],["t/455",[3,3.334,191,5.209]],["t/457",[40,5.435]],["t/459",[192,6.51]],["t/461",[193,6.51]],["t/463",[194,6.51]],["t/465",[195,6.51]],["t/469",[153,3.466]],["t/471",[196,6.51]],["t/473",[197,6.51]],["t/475",[198,6.51]],["t/477",[199,6.51]],["t/479",[113,3.889,200,4.69]],["t/481",[102,3.63]],["t/483",[129,3.391]],["t/485",[88,3.334,103,3.574]],["t/489",[153,3.466]],["t/491",[35,3.334,183,4.349]],["t/493",[70,4.349,183,4.349]],["t/495",[69,4.467]],["t/497",[165,4.093,200,4.69]],["t/499",[133,3.72,156,4.69]],["t/503",[153,3.466]],["t/505",[201,5.209,202,4.69]],["t/509",[84,3.72,124,3.334]],["t/511",[102,3.63]],["t/513",[89,4.69,131,4.349]],["t/515",[113,2.431,121,2.431,137,2.559,161,4.551]],["t/519",[103,3.574,179,4.69]],["t/521",[133,3.72,163,4.69]],["t/523",[52,4.349,132,4.69]],["t/525",[103,2.979,113,3.242,137,3.411]],["t/529",[153,3.466]],["t/531",[69,4.467]],["t/533",[203,6.51]],["t/535",[204,6.51]],["t/537",[205,6.51]],["t/539",[103,4.467]],["t/541",[122,2.837,124,3.334]],["t/543",[102,3.63]],["t/545",[94,3.889,137,4.093]],["t/549",[153,3.466]],["t/550",[165,4.093,176,4.349]],["t/552",[35,3.334,165,4.093]],["t/554",[202,5.862]],["t/556",[122,2.837,124,3.334]],["t/558",[102,3.63]],["t/560",[129,3.391]],["t/564",[153,2.773,206,5.209]],["t/566",[207,6.51]],["t/567",[182,2.924,208,3.722,209,3.107,210,3.107]],["t/568",[182,2.924,209,3.107,210,3.107,211,3.722]],["t/569",[182,2.924,209,3.107,210,3.107,212,3.722]],["t/571",[213,6.51]],["t/573",[214,6.51]],["t/575",[215,6.51]],["t/577",[15,5.435]],["t/579",[216,6.51]],["t/581",[217,6.51]],["t/583",[218,6.51]],["t/585",[219,5.209,220,5.209]],["t/587",[221,5.209,222,5.209]],["t/589",[223,6.51]],["t/593",[45,3.107,46,3.107,100,3.351,224,3.722]]],"invertedIndex":[["",{"_index":161,"t":{"335":{"position":[[4,1]]},"515":{"position":[[5,1],[13,1]]}}}],["3rd",{"_index":45,"t":{"65":{"position":[[6,3]]},"103":{"position":[[7,3]]},"593":{"position":[[10,3]]}}}],["access",{"_index":110,"t":{"173":{"position":[[0,6]]},"175":{"position":[[0,6]]}}}],["addit",{"_index":9,"t":{"10":{"position":[[0,10]]},"43":{"position":[[0,10]]}}}],["admonit",{"_index":223,"t":{"589":{"position":[[0,11]]}}}],["anoth",{"_index":66,"t":{"113":{"position":[[5,7]]}}}],["api",{"_index":60,"t":{"89":{"position":[[16,3]]},"261":{"position":[[23,4]]}}}],["app",{"_index":19,"t":{"19":{"position":[[17,5]]},"21":{"position":[[16,5]]},"69":{"position":[[0,3]]}}}],["appli",{"_index":109,"t":{"171":{"position":[[0,5]]},"236":{"position":[[0,5]]},"446":{"position":[[15,7]]}}}],["applic",{"_index":29,"t":{"36":{"position":[[0,11]]},"196":{"position":[[0,12]]}}}],["argument",{"_index":54,"t":{"85":{"position":[[4,9]]},"264":{"position":[[8,9]]}}}],["array",{"_index":205,"t":{"537":{"position":[[0,5]]}}}],["assert",{"_index":172,"t":{"387":{"position":[[11,9]]}}}],["asset",{"_index":224,"t":{"593":{"position":[[20,6]]}}}],["avoid",{"_index":71,"t":{"125":{"position":[[0,5]]},"129":{"position":[[0,5]]}}}],["behind",{"_index":5,"t":{"6":{"position":[[13,6]]}}}],["best",{"_index":209,"t":{"567":{"position":[[16,4]]},"568":{"position":[[16,4]]},"569":{"position":[[16,4]]}}}],["blockquot",{"_index":218,"t":{"583":{"position":[[0,11]]}}}],["boolean",{"_index":196,"t":{"471":{"position":[[0,7]]}}}],["break",{"_index":222,"t":{"587":{"position":[[5,6]]}}}],["browser",{"_index":83,"t":{"135":{"position":[[5,7]]}}}],["build",{"_index":133,"t":{"240":{"position":[[9,5]]},"266":{"position":[[0,5]]},"339":{"position":[[0,5]]},"341":{"position":[[14,5]]},"499":{"position":[[0,5]]},"521":{"position":[[0,5]]}}}],["bundler",{"_index":30,"t":{"37":{"position":[[0,7]]},"99":{"position":[[8,7]]}}}],["case",{"_index":126,"t":{"212":{"position":[[19,5]]},"357":{"position":[[4,5]]}}}],["central",{"_index":95,"t":{"143":{"position":[[32,7]]}}}],["chang",{"_index":148,"t":{"264":{"position":[[18,7]]}}}],["charact",{"_index":188,"t":{"450":{"position":[[15,10]]}}}],["circular",{"_index":189,"t":{"452":{"position":[[0,8]]}}}],["class",{"_index":99,"t":{"149":{"position":[[4,7]]},"171":{"position":[[20,5]]},"206":{"position":[[0,5]]},"236":{"position":[[6,5]]},"272":{"position":[[18,5]]},"274":{"position":[[11,7]]},"285":{"position":[[0,5]]},"373":{"position":[[18,5]]}}}],["cli",{"_index":53,"t":{"83":{"position":[[10,3]]},"85":{"position":[[0,3]]},"97":{"position":[[10,3]]}}}],["code",{"_index":216,"t":{"579":{"position":[[0,4]]}}}],["color",{"_index":81,"t":{"133":{"position":[[5,8]]}}}],["combin",{"_index":169,"t":{"363":{"position":[[0,11]]}}}],["comment",{"_index":92,"t":{"141":{"position":[[33,8]]}}}],["comparison",{"_index":162,"t":{"341":{"position":[[0,10]]}}}],["compon",{"_index":35,"t":{"41":{"position":[[0,9]]},"119":{"position":[[11,9]]},"121":{"position":[[4,9],[26,10]]},"194":{"position":[[0,9]]},"252":{"position":[[22,10]]},"274":{"position":[[22,10]]},"359":{"position":[[24,10]]},"491":{"position":[[8,9]]},"552":{"position":[[0,9]]}}}],["compos",{"_index":204,"t":{"535":{"position":[[0,7]]}}}],["configur",{"_index":40,"t":{"51":{"position":[[0,13]]},"111":{"position":[[0,13]]},"457":{"position":[[0,13]]}}}],["conflict",{"_index":101,"t":{"151":{"position":[[15,9]]}}}],["consider",{"_index":185,"t":{"448":{"position":[[0,14]]}}}],["consist",{"_index":93,"t":{"143":{"position":[[4,10]]}}}],["contain",{"_index":166,"t":{"359":{"position":[[0,9]]}}}],["control",{"_index":58,"t":{"89":{"position":[[0,7]]}}}],["creat",{"_index":182,"t":{"444":{"position":[[0,6]]},"567":{"position":[[5,6]]},"568":{"position":[[5,6]]},"569":{"position":[[5,6]]}}}],["css",{"_index":51,"t":{"77":{"position":[[0,3]]},"113":{"position":[[13,3]]},"141":{"position":[[13,3]]},"149":{"position":[[0,3]]},"159":{"position":[[0,3]]},"250":{"position":[[0,3]]},"277":{"position":[[0,3]]},"423":{"position":[[7,3]]},"436":{"position":[[0,3]]},"440":{"position":[[8,3]]}}}],["custom",{"_index":137,"t":{"250":{"position":[[4,6]]},"515":{"position":[[15,9]]},"525":{"position":[[0,6]]},"545":{"position":[[0,6]]}}}],["declar",{"_index":73,"t":{"125":{"position":[[11,12]]},"141":{"position":[[17,12]]}}}],["deepli",{"_index":168,"t":{"361":{"position":[[28,6]]}}}],["default",{"_index":84,"t":{"135":{"position":[[13,8]]},"202":{"position":[[0,7]]},"210":{"position":[[12,7]]},"264":{"position":[[0,7]]},"381":{"position":[[0,7]]},"509":{"position":[[0,7]]}}}],["defaultconfig",{"_index":41,"t":{"57":{"position":[[0,13]]}}}],["defin",{"_index":69,"t":{"119":{"position":[[0,8]]},"163":{"position":[[0,6]]},"222":{"position":[[0,8]]},"272":{"position":[[0,8]]},"361":{"position":[[35,7]]},"495":{"position":[[0,6]]},"531":{"position":[[0,6]]}}}],["definit",{"_index":64,"t":{"101":{"position":[[7,10]]},"337":{"position":[[8,10]]},"339":{"position":[[11,10]]}}}],["depend",{"_index":135,"t":{"244":{"position":[[7,12]]}}}],["develop",{"_index":28,"t":{"34":{"position":[[11,11]]}}}],["diagnost",{"_index":142,"t":{"259":{"position":[[0,11]]}}}],["directori",{"_index":48,"t":{"69":{"position":[[4,9]]}}}],["disabl",{"_index":128,"t":{"220":{"position":[[0,7]]},"313":{"position":[[0,7]]},"329":{"position":[[0,7]]},"349":{"position":[[0,7]]},"409":{"position":[[0,7]]},"429":{"position":[[0,7]]}}}],["document",{"_index":210,"t":{"567":{"position":[[21,13]]},"568":{"position":[[21,13]]},"569":{"position":[[21,13]]}}}],["element",{"_index":165,"t":{"355":{"position":[[14,7]]},"497":{"position":[[0,7]]},"550":{"position":[[7,7]]},"552":{"position":[[10,7]]}}}],["emphasi",{"_index":213,"t":{"571":{"position":[[0,8]]}}}],["enum",{"_index":197,"t":{"473":{"position":[[0,4]]}}}],["escap",{"_index":186,"t":{"450":{"position":[[0,6]]}}}],["evalu",{"_index":203,"t":{"533":{"position":[[0,8]]}}}],["exampl",{"_index":131,"t":{"232":{"position":[[7,7]]},"371":{"position":[[0,7]]},"513":{"position":[[7,7]]}}}],["export",{"_index":124,"t":{"210":{"position":[[0,8]]},"307":{"position":[[11,6]]},"323":{"position":[[11,6]]},"343":{"position":[[11,6]]},"403":{"position":[[11,6]]},"421":{"position":[[11,6]]},"509":{"position":[[8,6]]},"541":{"position":[[11,6]]},"556":{"position":[[11,6]]}}}],["expos",{"_index":59,"t":{"89":{"position":[[8,7]]},"355":{"position":[[0,6]]},"361":{"position":[[0,6]]}}}],["extend",{"_index":108,"t":{"169":{"position":[[0,6]]},"171":{"position":[[10,9]]},"177":{"position":[[0,6]]}}}],["extens",{"_index":50,"t":{"75":{"position":[[4,10]]},"285":{"position":[[6,10]]}}}],["face",{"_index":146,"t":{"261":{"position":[[16,6]]}}}],["featur",{"_index":105,"t":{"159":{"position":[[4,7]]}}}],["file",{"_index":57,"t":{"87":{"position":[[20,4]]},"95":{"position":[[10,5]]},"248":{"position":[[15,4]]},"266":{"position":[[12,4]]},"299":{"position":[[28,5]]}}}],["first",{"_index":0,"t":{"4":{"position":[[0,5]]}}}],["forc",{"_index":175,"t":{"397":{"position":[[0,5]]}}}],["formatt",{"_index":177,"t":{"413":{"position":[[0,10]]},"415":{"position":[[7,10]]}}}],["function",{"_index":52,"t":{"77":{"position":[[4,13]]},"238":{"position":[[5,8]]},"523":{"position":[[5,8]]}}}],["further",{"_index":125,"t":{"212":{"position":[[0,7]]}}}],["gener",{"_index":55,"t":{"87":{"position":[[0,10]]},"93":{"position":[[0,10]]},"95":{"position":[[0,9]]}}}],["give",{"_index":74,"t":{"127":{"position":[[0,4]]}}}],["global",{"_index":63,"t":{"101":{"position":[[0,6]]},"129":{"position":[[6,6]]},"151":{"position":[[8,6]]},"218":{"position":[[0,6]]},"222":{"position":[[9,6]]},"246":{"position":[[7,6]]},"315":{"position":[[7,6]]}}}],["group",{"_index":170,"t":{"365":{"position":[[0,5]]}}}],["h1",{"_index":208,"t":{"567":{"position":[[0,2]]}}}],["h2",{"_index":211,"t":{"568":{"position":[[0,2]]}}}],["h3",{"_index":212,"t":{"569":{"position":[[0,2]]}}}],["header",{"_index":207,"t":{"566":{"position":[[0,7]]}}}],["hear",{"_index":2,"t":{"4":{"position":[[11,7]]}}}],["highlight",{"_index":10,"t":{"10":{"position":[[11,10]]}}}],["html",{"_index":220,"t":{"585":{"position":[[7,4]]}}}],["id",{"_index":49,"t":{"75":{"position":[[0,3]]}}}],["imag",{"_index":15,"t":{"15":{"position":[[13,6]]},"145":{"position":[[13,6]]},"577":{"position":[[0,6]]}}}],["import",{"_index":122,"t":{"202":{"position":[[8,6]]},"206":{"position":[[12,6]]},"212":{"position":[[8,6]]},"232":{"position":[[0,6]]},"248":{"position":[[20,7]]},"307":{"position":[[0,6]]},"323":{"position":[[0,6]]},"343":{"position":[[0,6]]},"381":{"position":[[8,6]]},"383":{"position":[[6,6]]},"403":{"position":[[0,6]]},"421":{"position":[[0,6]]},"423":{"position":[[11,6]]},"541":{"position":[[0,6]]},"556":{"position":[[0,6]]}}}],["index",{"_index":56,"t":{"87":{"position":[[14,5]]},"266":{"position":[[6,5]]}}}],["inherit",{"_index":200,"t":{"479":{"position":[[6,11]]},"497":{"position":[[8,11]]}}}],["inlin",{"_index":219,"t":{"585":{"position":[[0,6]]}}}],["inner",{"_index":111,"t":{"173":{"position":[[7,5]]},"361":{"position":[[7,5]]}}}],["instal",{"_index":39,"t":{"49":{"position":[[0,7]]},"73":{"position":[[0,12]]},"81":{"position":[[0,12]]},"109":{"position":[[0,7]]}}}],["instanc",{"_index":191,"t":{"455":{"position":[[9,8]]}}}],["intact",{"_index":85,"t":{"135":{"position":[[22,6]]}}}],["integr",{"_index":21,"t":{"23":{"position":[[0,10]]},"45":{"position":[[0,10]]},"67":{"position":[[11,11]]}}}],["javascript",{"_index":173,"t":{"389":{"position":[[0,10]]},"442":{"position":[[0,10]]}}}],["justifi",{"_index":91,"t":{"141":{"position":[[0,7]]}}}],["keep",{"_index":78,"t":{"131":{"position":[[0,4]]},"133":{"position":[[0,4]]},"135":{"position":[[0,4]]},"137":{"position":[[0,4]]},"139":{"position":[[0,4]]},"145":{"position":[[0,4]]}}}],["land",{"_index":13,"t":{"15":{"position":[[0,7]]}}}],["languag",{"_index":120,"t":{"188":{"position":[[0,8]]}}}],["layout",{"_index":79,"t":{"131":{"position":[[10,6]]}}}],["learn",{"_index":23,"t":{"23":{"position":[[24,6]]},"30":{"position":[[8,5]]},"45":{"position":[[24,6]]}}}],["legaci",{"_index":174,"t":{"391":{"position":[[0,6]]}}}],["level",{"_index":115,"t":{"177":{"position":[[16,6]]},"224":{"position":[[11,5]]},"226":{"position":[[8,5]]}}}],["librari",{"_index":36,"t":{"41":{"position":[[10,7]]},"194":{"position":[[10,9]]}}}],["line",{"_index":221,"t":{"587":{"position":[[0,4]]}}}],["link",{"_index":215,"t":{"575":{"position":[[0,5]]}}}],["list",{"_index":214,"t":{"573":{"position":[[0,5]]}}}],["locat",{"_index":96,"t":{"143":{"position":[[40,8]]}}}],["low",{"_index":87,"t":{"137":{"position":[[17,3]]}}}],["manual",{"_index":179,"t":{"432":{"position":[[0,6]]},"519":{"position":[[0,6]]}}}],["map",{"_index":103,"t":{"153":{"position":[[8,7]]},"230":{"position":[[0,6]]},"315":{"position":[[0,3]]},"485":{"position":[[0,3]]},"519":{"position":[[7,7]]},"525":{"position":[[13,7]]},"539":{"position":[[0,3]]}}}],["markdown",{"_index":206,"t":{"564":{"position":[[0,8]]}}}],["match",{"_index":157,"t":{"295":{"position":[[0,8]]}}}],["meaning",{"_index":75,"t":{"127":{"position":[[5,10]]}}}],["minim",{"_index":80,"t":{"131":{"position":[[17,7]]}}}],["minimalf",{"_index":192,"t":{"459":{"position":[[0,9]]}}}],["minimum",{"_index":82,"t":{"133":{"position":[[19,7]]}}}],["mixin",{"_index":180,"t":{"436":{"position":[[4,6]]},"440":{"position":[[12,6]]},"442":{"position":[[11,6]]},"446":{"position":[[4,6]]},"448":{"position":[[26,6]]}}}],["modul",{"_index":154,"t":{"283":{"position":[[0,6]]}}}],["moduleresolv",{"_index":194,"t":{"463":{"position":[[0,14]]}}}],["more",{"_index":26,"t":{"30":{"position":[[14,5]]}}}],["multipl",{"_index":114,"t":{"177":{"position":[[7,8]]},"297":{"position":[[11,8]]},"444":{"position":[[7,8]]}}}],["name",{"_index":76,"t":{"127":{"position":[[16,5]]},"155":{"position":[[0,6]]},"206":{"position":[[6,5]]},"234":{"position":[[19,5]]},"383":{"position":[[0,5]]},"387":{"position":[[0,5]]}}}],["namespac",{"_index":129,"t":{"224":{"position":[[17,11]]},"226":{"position":[[14,11]]},"234":{"position":[[8,10]]},"295":{"position":[[9,10]]},"311":{"position":[[0,9]]},"327":{"position":[[0,9]]},"329":{"position":[[8,9]]},"347":{"position":[[0,9]]},"349":{"position":[[8,9]]},"375":{"position":[[0,9]]},"407":{"position":[[0,9]]},"409":{"position":[[8,9]]},"427":{"position":[[0,9]]},"429":{"position":[[8,9]]},"432":{"position":[[7,9]]},"483":{"position":[[0,9]]},"560":{"position":[[0,9]]}}}],["nativ",{"_index":176,"t":{"397":{"position":[[6,6]]},"423":{"position":[[0,6]]},"550":{"position":[[0,6]]}}}],["nest",{"_index":178,"t":{"415":{"position":[[0,6]]}}}],["next",{"_index":12,"t":{"12":{"position":[[7,4]]}}}],["number",{"_index":199,"t":{"477":{"position":[[0,6]]}}}],["output",{"_index":149,"t":{"266":{"position":[[27,7]]}}}],["overhaul",{"_index":143,"t":{"259":{"position":[[12,8]]}}}],["overrid",{"_index":98,"t":{"145":{"position":[[20,11]]},"438":{"position":[[9,9]]}}}],["page",{"_index":14,"t":{"15":{"position":[[8,4]]}}}],["part",{"_index":112,"t":{"173":{"position":[[13,5]]},"361":{"position":[[13,5]]}}}],["parti",{"_index":46,"t":{"65":{"position":[[10,5]]},"103":{"position":[[11,5]]},"593":{"position":[[14,5]]}}}],["partial",{"_index":181,"t":{"440":{"position":[[0,7]]}}}],["per",{"_index":62,"t":{"93":{"position":[[17,3]]}}}],["possibl",{"_index":90,"t":{"139":{"position":[[33,8]]}}}],["pre",{"_index":117,"t":{"184":{"position":[[0,3]]}}}],["processor",{"_index":118,"t":{"184":{"position":[[4,9]]}}}],["project",{"_index":130,"t":{"226":{"position":[[0,7]]}}}],["properti",{"_index":138,"t":{"250":{"position":[[11,10]]}}}],["pseudo",{"_index":164,"t":{"355":{"position":[[7,6]]}}}],["public",{"_index":145,"t":{"261":{"position":[[9,6]]}}}],["publish",{"_index":65,"t":{"105":{"position":[[0,10]]},"299":{"position":[[0,10]]}}}],["react",{"_index":17,"t":{"19":{"position":[[3,5]]},"21":{"position":[[3,5]]},"252":{"position":[[16,5]]}}}],["read",{"_index":116,"t":{"180":{"position":[[10,8]]}}}],["readi",{"_index":22,"t":{"23":{"position":[[15,5]]},"45":{"position":[[15,5]]},"299":{"position":[[15,5]]}}}],["recent",{"_index":8,"t":{"8":{"position":[[24,9]]}}}],["recurs",{"_index":167,"t":{"359":{"position":[[14,9]]}}}],["reduc",{"_index":144,"t":{"261":{"position":[[0,8]]}}}],["refer",{"_index":190,"t":{"452":{"position":[[9,10]]}}}],["relat",{"_index":160,"t":{"317":{"position":[[0,7]]}}}],["render",{"_index":33,"t":{"39":{"position":[[12,9]]}}}],["requiremodul",{"_index":195,"t":{"465":{"position":[[0,13]]}}}],["resolv",{"_index":100,"t":{"151":{"position":[[0,7]]},"593":{"position":[[0,9]]}}}],["resolvenamespac",{"_index":193,"t":{"461":{"position":[[0,16]]}}}],["rollup",{"_index":20,"t":{"21":{"position":[[9,6]]}}}],["root",{"_index":121,"t":{"200":{"position":[[11,4]]},"204":{"position":[[11,4]]},"305":{"position":[[0,4]]},"373":{"position":[[10,4]]},"515":{"position":[[0,4]]}}}],["rule",{"_index":184,"t":{"444":{"position":[[22,5]]}}}],["runtim",{"_index":102,"t":{"153":{"position":[[0,7]]},"165":{"position":[[0,7]]},"234":{"position":[[0,7]]},"309":{"position":[[0,7]]},"325":{"position":[[0,7]]},"337":{"position":[[0,7]]},"345":{"position":[[0,7]]},"373":{"position":[[0,7]]},"405":{"position":[[0,7]]},"425":{"position":[[0,7]]},"481":{"position":[[0,7]]},"511":{"position":[[0,7]]},"543":{"position":[[0,7]]},"558":{"position":[[0,7]]}}}],["scene",{"_index":6,"t":{"6":{"position":[[24,7]]}}}],["scope",{"_index":202,"t":{"505":{"position":[[13,5]]},"554":{"position":[[0,7]]}}}],["selector",{"_index":88,"t":{"139":{"position":[[10,9]]},"204":{"position":[[16,8]]},"220":{"position":[[11,8]]},"281":{"position":[[0,9]]},"313":{"position":[[11,8]]},"315":{"position":[[14,8]]},"363":{"position":[[12,8]]},"365":{"position":[[9,9]]},"485":{"position":[[7,8]]}}}],["server",{"_index":31,"t":{"39":{"position":[[0,6]]},"188":{"position":[[9,6]]},"293":{"position":[[29,6]]}}}],["set",{"_index":77,"t":{"129":{"position":[[13,8]]},"335":{"position":[[6,3]]}}}],["share",{"_index":151,"t":{"272":{"position":[[11,6]]},"274":{"position":[[4,6]]}}}],["side",{"_index":32,"t":{"39":{"position":[[7,4]]}}}],["simpl",{"_index":89,"t":{"139":{"position":[[23,6]]},"513":{"position":[[0,6]]}}}],["simultan",{"_index":150,"t":{"266":{"position":[[35,14]]}}}],["size",{"_index":72,"t":{"125":{"position":[[6,4]]}}}],["solut",{"_index":67,"t":{"113":{"position":[[17,8]]}}}],["sourc",{"_index":159,"t":{"299":{"position":[[21,6]]}}}],["special",{"_index":187,"t":{"450":{"position":[[7,7]]}}}],["specif",{"_index":86,"t":{"137":{"position":[[5,11]]}}}],["ssr",{"_index":34,"t":{"39":{"position":[[22,5]]},"299":{"position":[[11,3]]}}}],["st",{"_index":132,"t":{"238":{"position":[[0,4]]},"523":{"position":[[0,4]]}}}],["st.css",{"_index":136,"t":{"248":{"position":[[7,7]]},"299":{"position":[[34,10]]}}}],["start",{"_index":24,"t":{"28":{"position":[[11,6]]}}}],["state",{"_index":113,"t":{"175":{"position":[[9,5]]},"236":{"position":[[16,5]]},"479":{"position":[[0,5]]},"515":{"position":[[7,5]]},"525":{"position":[[7,5]]}}}],["stcconfig",{"_index":42,"t":{"59":{"position":[[0,9]]}}}],["string",{"_index":198,"t":{"475":{"position":[[0,6]]}}}],["stylabl",{"_index":3,"t":{"4":{"position":[[25,9]]},"12":{"position":[[16,9]]},"26":{"position":[[8,9]]},"182":{"position":[[8,9]]},"192":{"position":[[7,8]]},"240":{"position":[[0,8]]},"293":{"position":[[13,8]]},"385":{"position":[[0,8]]},"455":{"position":[[0,8]]}}}],["stylable.config.j",{"_index":68,"t":{"115":{"position":[[0,18]]}}}],["stylable/cli",{"_index":147,"t":{"263":{"position":[[0,13]]}}}],["stylable/cor",{"_index":141,"t":{"258":{"position":[[0,14]]}}}],["style",{"_index":183,"t":{"444":{"position":[[16,5]]},"491":{"position":[[0,5]]},"493":{"position":[[0,5]]}}}],["stylesheet",{"_index":47,"t":{"65":{"position":[[16,11]]},"93":{"position":[[21,10]]},"103":{"position":[[17,11]]},"129":{"position":[[30,10]]},"169":{"position":[[9,10]]},"200":{"position":[[0,10]]},"204":{"position":[[0,10]]},"224":{"position":[[0,10]]},"385":{"position":[[9,10]]}}}],["support",{"_index":38,"t":{"43":{"position":[[19,7]]},"216":{"position":[[0,9]]},"297":{"position":[[0,10]]}}}],["svg",{"_index":97,"t":{"145":{"position":[[5,3]]}}}],["symbol",{"_index":127,"t":{"216":{"position":[[10,7]]},"222":{"position":[[16,7]]},"230":{"position":[[7,7]]}}}],["syntax",{"_index":153,"t":{"279":{"position":[[0,6]]},"303":{"position":[[0,6]]},"321":{"position":[[0,6]]},"333":{"position":[[0,6]]},"369":{"position":[[0,6]]},"379":{"position":[[0,6]]},"391":{"position":[[7,6]]},"395":{"position":[[0,6]]},"401":{"position":[[0,6]]},"419":{"position":[[0,6]]},"469":{"position":[[0,6]]},"489":{"position":[[0,6]]},"503":{"position":[[0,6]]},"529":{"position":[[0,6]]},"549":{"position":[[0,6]]},"564":{"position":[[9,6]]}}}],["system",{"_index":119,"t":{"186":{"position":[[5,6]]},"283":{"position":[[7,6]]}}}],["tabl",{"_index":217,"t":{"581":{"position":[[0,6]]}}}],["target",{"_index":106,"t":{"163":{"position":[[11,6]]},"297":{"position":[[34,7]]}}}],["templat",{"_index":155,"t":{"287":{"position":[[0,10]]}}}],["terminolog",{"_index":152,"t":{"277":{"position":[[4,11]]}}}],["test",{"_index":140,"t":{"254":{"position":[[7,5]]}}}],["theme",{"_index":201,"t":{"505":{"position":[[0,7]]}}}],["time",{"_index":1,"t":{"4":{"position":[[6,4]]}}}],["tip",{"_index":104,"t":{"155":{"position":[[7,3]]}}}],["toggl",{"_index":107,"t":{"165":{"position":[[8,6]]}}}],["tool",{"_index":37,"t":{"43":{"position":[[11,7]]},"190":{"position":[[0,7]]}}}],["transform",{"_index":156,"t":{"293":{"position":[[0,12]]},"499":{"position":[[6,14]]}}}],["transpil",{"_index":158,"t":{"297":{"position":[[20,13]]}}}],["ts",{"_index":16,"t":{"19":{"position":[[0,2]]},"21":{"position":[[0,2]]}}}],["type",{"_index":61,"t":{"93":{"position":[[11,5]]},"103":{"position":[[0,6]]},"186":{"position":[[0,4]]},"246":{"position":[[14,7]]},"387":{"position":[[6,4]]}}}],["typescript",{"_index":27,"t":{"34":{"position":[[0,10]]},"67":{"position":[[0,10]]}}}],["up",{"_index":7,"t":{"8":{"position":[[18,2]]}}}],["updat",{"_index":134,"t":{"244":{"position":[[0,6]]},"246":{"position":[[0,6]]},"248":{"position":[[0,6]]},"252":{"position":[[0,6]]},"254":{"position":[[0,6]]}}}],["us",{"_index":44,"t":{"65":{"position":[[0,5]]},"83":{"position":[[0,5]]},"97":{"position":[[0,5]]},"99":{"position":[[0,5]]},"121":{"position":[[0,3]]},"143":{"position":[[0,3]]},"212":{"position":[[15,3]]},"274":{"position":[[0,3]]},"357":{"position":[[0,3]]},"448":{"position":[[20,5]]}}}],["usag",{"_index":139,"t":{"252":{"position":[[7,5]]},"353":{"position":[[0,5]]}}}],["valid",{"_index":123,"t":{"208":{"position":[[0,11]]}}}],["var",{"_index":163,"t":{"341":{"position":[[20,4]]},"521":{"position":[[6,4]]}}}],["variabl",{"_index":94,"t":{"143":{"position":[[15,9]]},"240":{"position":[[15,9]]},"413":{"position":[[16,9]]},"438":{"position":[[0,8]]},"545":{"position":[[7,8]]}}}],["variant",{"_index":70,"t":{"119":{"position":[[21,7]]},"121":{"position":[[14,8]]},"493":{"position":[[8,7]]}}}],["vs",{"_index":171,"t":{"373":{"position":[[15,2]]}}}],["want",{"_index":25,"t":{"30":{"position":[[0,4]]}}}],["webpack",{"_index":18,"t":{"19":{"position":[[9,7]]}}}],["webpackplugin",{"_index":43,"t":{"61":{"position":[[0,13]]}}}],["went",{"_index":4,"t":{"6":{"position":[[5,4]]}}}],["what'",{"_index":11,"t":{"12":{"position":[[0,6]]}}}]],"pipeline":["stemmer"]}},{"documents":[{"i":1,"t":"Archive","s":"","u":"/blog/archive","p":1},{"i":2,"t":"Launching Stylable Version 5","s":"Welcome to Stylable v5","u":"/blog/welcome-to-stylable-v5","p":2},{"i":14,"t":"Landing Page Images","s":"Attributions","u":"/docs/attributions","p":14},{"i":17,"t":"To get started quickly, Stylable offers a boilerplate utility that can be used to bootstrap new projects from a list of templates.","s":"Boilerplate","u":"/docs/getting-started/boilerplate","p":17},{"i":25,"t":"What is Stylable?","s":"Intro","u":"/docs/getting-started/intro","p":25},{"i":32,"t":"When integrating Stylable into a project, there are key differences to consider whether the project is an application or a component library.","s":"Manual Integration","u":"/docs/getting-started/manual-integration","p":32},{"i":47,"t":"The Stylable Rollup integration provides development, build, and bundle capabilities.","s":"Rollup","u":"/docs/getting-started/rollup-integration","p":47},{"i":53,"t":"To integrate Stylable with Storybook, you need to do two things:","s":"Storybook","u":"/docs/getting-started/storybook-integration","p":53},{"i":55,"t":"The stylable.config.js file acts as a central place where you can write your top level configuration for the entire project, so that they are re-used across builds and integrations, and reduce code duplications.","s":"stylable.config.js","u":"/docs/getting-started/stylable-config","p":55},{"i":63,"t":"There are a few steps you need to follow to integrate Stylable into your NextJS project.","s":"NextJS","u":"/docs/getting-started/nextjs-integration","p":63},{"i":71,"t":"Stylable Intelligence is an extension implementing the Language Server Protocol that provides IDE support for Stylable. It currently includes:","s":"Stylable Intelligence","u":"/docs/getting-started/tooling/stylable-intelligence","p":71},{"i":79,"t":"@stylable/cli is a low-level utility used for working with Stylable projects directly.","s":"CLI","u":"/docs/getting-started/tooling/cli","p":79},{"i":91,"t":"Whenever a TypeScript file imports a Stylable stylesheet, you must provide a type for it. This is because TypeScript has no way of knowing what's inside Stylable *.st.css files.","s":"TypeScript","u":"/docs/getting-started/typescript-integration","p":91},{"i":107,"t":"The Stylable Webpack integration provides development, build, and bundle capabilities.","s":"Webpack","u":"/docs/getting-started/webpack-integration","p":107},{"i":117,"t":"When building a component library or an application, it is useful to define several semantic \"flavors\" of some components, for example a Button component that represents cancel.","s":"Component Variants","u":"/docs/guides/component-variants","p":117},{"i":123,"t":"Stylable components should be easily stylable and themable from the outside. This means that the stylesheet describing the component CSS should be as simple and generic as possible, and should expose a clear and concise API for its internal parts.","s":"Stylable Component - Best Practices","u":"/docs/guides/component-best-practices","p":123},{"i":147,"t":"Classes are the most basic building block of stylable, used to mark elements on the DOM, so those could in turn be targeted and styled via our CSS.","s":"Classes","u":"/docs/guides/handbook/class","p":147},{"i":157,"t":"- opening intro paragraph","s":"Classes","u":"/docs/guides/handbook/classes","p":157},{"i":161,"t":"In CSS, we have the ability to target native states of various elements using the pseudo-class syntax (for instance,active).","s":"Custom State","u":"/docs/guides/handbook/custom-state","p":161},{"i":167,"t":"In the Import Class chapter, we saw how we can import CSS classes and target them by composing a selector to target our desired parts.","s":"Extend","u":"/docs/guides/handbook/extend","p":167},{"i":179,"t":"What am I reading?","s":"Introduction","u":"/docs/guides/handbook/intro","p":179},{"i":198,"t":"In the Runtime chapter, we saw how a Stylable stylesheet's API can be imported into a JavaScript module, and how that API can be used. In this chapter, we'll see how our game example can be divided into linked stylesheet modules to provide a better development experience.","s":"Import Class","u":"/docs/guides/handbook/import-class","p":198},{"i":214,"t":"In the Classes chapter, we briefly explained the concept of using namespacing to avoid conflicts between stylesheets.","s":"Namespacing","u":"/docs/guides/handbook/namespacing","p":214},{"i":228,"t":"In the previous chapter, we saw brief examples of mapping our classes local names to their global namespaced names at runtime, as well as the cssStates utility function to activate their states.","s":"Runtime","u":"/docs/guides/handbook/runtime","p":228},{"i":242,"t":"This guide is intended to help migrate Stylable version 1 to Stylable version 2 or 3.","s":"Suggested steps of migration","u":"/docs/guides/migration-v3","p":242},{"i":256,"t":"The purpose of this document is to help migrate projects using Stylable to v5.","s":"Stylable v5","u":"/docs/guides/migration-v5","p":256},{"i":268,"t":"The goal of the project file is to contain the CSS commons for the project, including variables, component variants and shared classes.","s":"Project Commons","u":"/docs/guides/project-commons","p":268},{"i":270,"t":"When building a component library or an application, it is useful to reuse classes that can be shared across components to achieve common CSS with lower specificity.","s":"Shared Classes","u":"/docs/guides/shared-classes","p":270},{"i":276,"t":"CSS Terminology","s":"Cheatsheet","u":"/docs/references/cheatsheet","p":276},{"i":291,"t":"Server side rendering (SSR) is an approach to serving JavaScript rendered web applications (such as React, Vue, Angular, etc...) that tries to improve time-to-paint, SEO support and more.","s":"Supporting Server Side Rendering","u":"/docs/guides/ssr","p":291},{"i":301,"t":"A CSS class selector is used as a generic way to target a DOM element with a matching class name. In Stylable a CSS class is used primarily as a component part, for example a .navBtn of gallery component, but can also be used as utility class or a mixin.","s":"Class Selector","u":"/docs/references/class-selectors","p":301},{"i":319,"t":"CSS container queries are used to target and style an element depending on the conditions of a container it is nested within.","s":"Containers","u":"/docs/references/contains","p":319},{"i":331,"t":"CSS custom property is used to define and re-use variables that participate in the cascade, and to dynamically change their values at runtime.","s":"Custom Property","u":"/docs/references/css-vars","p":331},{"i":351,"t":"You use custom selectors to define an alias that can match complex selectors.","s":"Custom Selector","u":"/docs/references/custom-selectors","p":351},{"i":367,"t":"The Stylable -st-extends declaration is used to indicate that a CSS class inherits from a stylesheet or another class.","s":"Extend","u":"/docs/references/extend-stylesheet","p":367},{"i":377,"t":"The Stylable @st-import at-rule is used to reference definitions from other .st.css or .js modules in a similar way to JavaScript Imports.","s":"Import","u":"/docs/references/imports","p":377},{"i":393,"t":"In Stylable, selectors are namespaced to the stylesheet. However there might be cases where you want to target global selectors without Stylable namespacing them, For that you can use the :global() selector.","s":"Global Selector","u":"/docs/references/global-selectors","p":393},{"i":399,"t":"The @keyframes CSS at-rule is used to define an animation that can be referenced to animate a DOM element.","s":"Keyframes","u":"/docs/references/keyframes","p":399},{"i":411,"t":"Formatters are functions that return a single CSS declaration value. They can receive arguments, process them and return the value.","s":"Formatters","u":"/docs/references/formatters","p":411},{"i":417,"t":"In CSS, @layer provides a way to group rules together in order to override other rules for better control of the styling order.","s":"Layer","u":"/docs/references/layer","p":417},{"i":431,"t":"Manual Namespace","s":"Namespace","u":"/docs/references/namespace","p":431},{"i":434,"t":"Stylable mixins enable you to reuse complex styles and CSS behaviors, defined in CSS or Javascript, and apply them to any style-rule during build time.","s":"Mixins","u":"/docs/references/mixins","p":434},{"i":454,"t":"Stylable instance","s":"Programmatic API","u":"/docs/references/programmatic-api","p":454},{"i":467,"t":"In addition to CSS's native pseudo-classes, likenth-child(), Stylable allow you to define custom pseudo-classes so that you can apply styles to your components based on state. Let's say you want a component to have different styling applied to it when its content is loading. You can define loading as a custom pseudo-class and toggle it in your component.","s":"Pseudo-Class","u":"/docs/references/pseudo-classes","p":467},{"i":487,"t":"In addition to CSS's native pseudo-elements, like ::backdrop, Stylable allow you to define custom pseudo-elements so that you can target and apply styles to inner parts of your components.","s":"Pseudo-Element","u":"/docs/references/pseudo-elements","p":487},{"i":501,"t":"Stylable scope enables you to wrap several style-rules using a single directive.","s":"Scope","u":"/docs/references/st-scope","p":501},{"i":507,"t":"Every Stylable stylesheet has a reserved class called root that matches the root node of the component. The root class is used to signify the component top-level node where a new namespace scope is created.","s":"Root","u":"/docs/references/root","p":507},{"i":517,"t":"Imported Stylable stylesheets in JavaScript contain minimal runtime code to help define the structure and state of the component.","s":"Runtime","u":"/docs/references/runtime","p":517},{"i":527,"t":"Stylable variables provide a way to define common values to be used across the stylesheet and exposed for sharing and theming.","s":"Variables","u":"/docs/references/st-variables","p":527},{"i":547,"t":"A CSS type selector is used to target DOM elements according to their tag name.","s":"Type Selector","u":"/docs/references/type-selectors","p":547},{"i":562,"t":"You can write content using GitHub-flavored Markdown syntax.","s":"Style Guide","u":"/docs/style-guide","p":562},{"i":591,"t":"Stylable supports usage of url functions to use assets as you normally would in CSS.","s":"url()","u":"/docs/references/using-external-assets","p":591}],"index":{"version":"2.3.9","fields":["t"],"fieldVectors":[["t/1",[0,5.699]],["t/2",[1,4.887,2,0.803,3,4.186,4,4.887]],["t/14",[5,5.13,6,5.13,7,5.13]],["t/17",[2,0.582,8,3.541,9,3.541,10,3.541,11,3.541,12,2.45,13,0.767,14,3.541,15,3.034,16,1.942,17,3.541,18,3.541]],["t/25",[2,0.937]],["t/32",[2,0.603,16,2.741,19,2.159,20,3.667,21,3.142,22,3.667,23,3.667,24,2.537,25,1.666,26,2.796]],["t/47",[2,0.675,19,2.417,27,4.107,28,2.253,29,3.131,30,2.253,31,3.518,32,3.518]],["t/53",[2,0.733,19,2.627,33,4.463,34,3.823,35,4.463,36,4.463]],["t/55",[13,0.635,16,1.61,19,1.728,30,1.61,37,2.935,38,2.237,39,2.935,40,2.935,41,2.935,42,2.515,43,2.515,44,2.237,45,2.935,46,2.935,47,2.515,48,2.935,49,2.515,50,2.935]],["t/63",[2,0.675,16,2.253,19,2.417,34,3.518,51,4.107,52,4.107,53,4.107,54,4.107]],["t/71",[2,0.783,28,1.878,55,3.423,56,3.423,57,3.423,58,3.423,59,2.933,60,3.423,61,3.423,62,2.61,63,3.423,64,2.933]],["t/79",[2,0.649,12,2.732,13,0.855,16,2.166,44,3.01,65,3.949,66,3.949,67,3.949,68,3.949]],["t/91",[2,0.732,28,1.707,38,3.397,69,3.113,70,4.457,71,1.978,72,1.501,73,2.667,74,1.978,75,3.113,76,3.113,77,3.113,78,2.667]],["t/107",[2,0.675,19,2.417,28,2.253,29,3.131,30,2.253,31,3.518,32,3.518,79,4.107]],["t/117",[13,0.695,24,2.221,25,2.405,26,2.447,30,1.761,80,1.548,81,2.75,82,3.21,83,2.75,84,2.221,85,3.21,86,3.21,87,3.21]],["t/123",[2,0.674,25,1.863,72,1.339,88,2.777,89,2.777,90,2.777,91,2.777,92,2.777,93,0.863,94,2.777,95,2.379,96,2.777,97,2.379,98,2.777,99,2.777,100,2.379,101,2.777,102,1.921]],["t/147",[2,0.528,13,0.695,30,1.761,93,0.998,103,1.376,104,3.21,105,3.21,106,3.21,107,1.761,108,2.221,109,3.21,110,3.21,111,1.648,112,1.761,113,3.21]],["t/157",[114,5.13,115,5.13,116,5.13]],["t/161",[13,0.767,93,1.101,103,1.518,107,1.942,111,1.818,117,3.541,118,2.7,119,2.45,120,3.541,121,2.7,122,3.034,123,3.541]],["t/167",[71,3.029,93,1.064,102,2.368,103,2.043,111,2.447,124,2.368,125,2.61,126,3.423,127,2.176,128,3.423]],["t/179",[129,5.699]],["t/198",[2,0.412,13,0.542,28,1.375,29,1.911,71,1.593,72,1.209,84,1.734,100,3.254,124,2.628,125,1.911,130,1.734,131,2.506,132,1.593,133,3.254,134,2.506,135,2.506,136,2.506,137,2.506,138,2.506,139,2.147,140,2.506]],["t/214",[13,0.794,72,1.768,103,1.572,124,2.537,141,3.667,142,3.667,143,3.667,144,2.331,145,3.667,146,3.667,147,3.667]],["t/228",[12,1.974,84,1.974,103,1.223,119,1.974,124,1.974,125,2.175,130,1.974,144,1.814,148,2.854,149,2.854,150,2.854,151,2.854,152,3.19,153,2.445,154,2.854,155,2.854,156,2.175,157,2.854]],["t/242",[2,0.821,3,4.282,158,3.667,159,3.667,160,2.796,161,3.142,162,3.667,163,3.667,164,3.667]],["t/256",[2,0.675,13,0.889,16,2.253,160,3.131,161,3.518,165,4.107,166,4.107,167,4.107]],["t/268",[16,2.614,25,1.555,38,2.61,64,2.933,93,1.064,103,1.467,168,3.423,169,2.61,170,2.61,171,2.61,172,3.423,173,2.61]],["t/270",[13,0.717,24,2.292,25,2.116,26,2.526,30,1.817,93,1.03,103,1.42,170,2.526,173,2.526,174,2.838,175,3.313,176,3.313,177,3.313]],["t/276",[93,1.678,178,5.4]],["t/291",[24,1.823,59,2.257,62,2.008,132,1.674,179,2.635,180,3.944,181,2.635,182,2.635,183,2.635,184,2.635,185,2.635,186,2.635,187,2.635,188,2.635,189,2.635,190,2.635,191,2.635,192,2.257,193,2.635,194,2.635,195,2.635]],["t/301",[2,0.384,12,1.616,13,0.95,25,1.635,74,1.484,84,1.616,93,1.119,95,2.001,102,1.616,103,2.115,107,1.281,108,1.616,111,1.199,127,1.484,152,1.78,196,1.78,197,2.336,198,2.336,199,2.336,200,2.001]],["t/319",[13,0.767,93,1.101,107,1.942,111,1.818,112,1.942,169,3.72,201,3.541,202,3.541,203,3.541,204,3.541,205,3.541]],["t/331",[13,1.008,47,2.838,80,1.598,93,1.03,130,2.292,171,2.526,206,2.292,207,3.313,208,3.313,209,3.313,210,3.313,211,3.313,212,2.526]],["t/351",[13,0.889,80,1.98,127,3.426,196,3.131,206,2.841,213,4.107,214,3.518]],["t/367",[2,0.582,13,0.767,72,1.708,93,1.101,103,2.091,215,3.034,216,3.541,217,3.034,218,3.541,219,3.541,220,3.541]],["t/377",[2,0.545,13,0.717,71,2.961,74,2.106,78,2.838,132,2.106,133,2.838,215,2.838,221,2.106,222,3.313,223,3.313,224,3.313,225,3.313]],["t/393",[2,0.749,13,0.695,72,1.548,111,1.648,127,3.365,144,2.895,153,3.903,226,3.21,227,2.75,228,3.21]],["t/399",[13,0.823,80,1.834,93,1.182,107,2.086,108,2.631,221,2.417,229,3.803,230,5.122,231,3.803]],["t/411",[93,1.101,156,2.7,212,3.72,217,3.034,232,3.541,233,4.879,234,3.034,235,3.541,236,3.541,237,3.541]],["t/417",[28,1.817,74,2.106,93,1.03,112,1.817,139,2.838,221,2.961,238,3.313,239,3.313,240,3.313,241,4.658,242,3.313,243,3.313]],["t/431",[144,3.432,244,5.4]],["t/434",[2,0.497,30,1.657,80,1.457,93,1.356,112,2.393,132,1.92,174,2.588,192,2.588,200,2.588,214,2.588,221,1.92,245,2.588,246,3.021,247,2.303,248,3.021]],["t/454",[2,0.887,249,5.4]],["t/467",[2,0.338,21,1.761,25,1.837,80,1.571,103,1.734,112,1.787,118,1.567,119,1.422,121,3.084,206,2.254,227,1.761,247,2.483,250,1.761,251,1.761,252,2.056,253,2.056,254,1.761,255,2.056,256,2.056,257,1.761,258,3.257,259,2.056]],["t/487",[2,0.482,25,1.333,80,1.415,102,2.031,107,2.343,111,1.507,112,1.61,118,2.237,121,3.256,206,2.031,247,2.237,250,2.515,251,2.515,254,2.515,260,2.935,261,2.935]],["t/501",[2,0.625,13,0.823,81,3.258,112,2.086,221,2.417,234,3.258,245,3.258,262,3.258,263,3.803,264,3.803]],["t/507",[2,0.433,13,0.57,15,2.257,25,1.791,43,2.257,44,2.008,72,1.27,103,1.691,144,1.674,196,2.008,262,2.257,265,2.635,266,2.635,267,4.727,268,3.944,269,2.635,270,2.635]],["t/517",[2,0.563,25,1.555,49,2.933,71,2.176,72,1.651,80,1.651,119,2.368,130,2.368,132,2.176,160,2.61,169,2.61,271,3.423,272,3.423]],["t/527",[2,0.582,13,0.767,28,1.942,72,1.708,74,2.251,80,1.708,97,3.034,170,2.7,171,2.7,173,2.7,212,2.7,273,3.541]],["t/547",[13,0.823,73,3.258,93,1.182,107,2.086,108,2.631,111,1.953,127,2.417,152,2.899,274,3.803,275,3.803]],["t/562",[13,0.926,42,3.664,83,3.664,122,3.664,257,3.664,276,4.277,277,4.277]],["t/591",[2,0.649,13,0.855,62,3.01,93,1.227,156,3.01,278,3.949,279,3.949,280,3.949,281,3.949]]],"invertedIndex":[["1",{"_index":162,"t":{"242":{"position":[[56,1]]}}}],["2",{"_index":163,"t":{"242":{"position":[[78,1]]}}}],["3",{"_index":164,"t":{"242":{"position":[[83,2]]}}}],["5",{"_index":4,"t":{"2":{"position":[[27,1]]}}}],["abil",{"_index":117,"t":{"161":{"position":[[20,7]]}}}],["accord",{"_index":274,"t":{"547":{"position":[[51,9]]}}}],["achiev",{"_index":175,"t":{"270":{"position":[[123,7]]}}}],["act",{"_index":39,"t":{"55":{"position":[[28,4]]}}}],["activ",{"_index":157,"t":{"228":{"position":[[172,8]]}}}],["addit",{"_index":250,"t":{"467":{"position":[[3,8]]},"487":{"position":[[3,8]]}}}],["alia",{"_index":213,"t":{"351":{"position":[[38,5]]}}}],["allow",{"_index":254,"t":{"467":{"position":[[70,5]]},"487":{"position":[[71,5]]}}}],["angular",{"_index":188,"t":{"291":{"position":[[112,8]]}}}],["anim",{"_index":230,"t":{"399":{"position":[[48,9],[84,7]]}}}],["anoth",{"_index":220,"t":{"367":{"position":[[104,7]]}}}],["api",{"_index":100,"t":{"123":{"position":[[220,3]]},"198":{"position":[[59,3],[118,3]]}}}],["appli",{"_index":247,"t":{"434":{"position":[[104,5]]},"467":{"position":[[128,5],[233,7]]},"487":{"position":[[141,5]]}}}],["applic",{"_index":24,"t":{"32":{"position":[[106,11]]},"117":{"position":[[40,12]]},"270":{"position":[[40,12]]},"291":{"position":[[78,12]]}}}],["approach",{"_index":182,"t":{"291":{"position":[[34,8]]}}}],["archiv",{"_index":0,"t":{"1":{"position":[[0,7]]}}}],["argument",{"_index":236,"t":{"411":{"position":[[86,10]]}}}],["asset",{"_index":280,"t":{"591":{"position":[[48,6]]}}}],["avoid",{"_index":145,"t":{"214":{"position":[[81,5]]}}}],["backdrop",{"_index":260,"t":{"487":{"position":[[50,11]]}}}],["base",{"_index":255,"t":{"467":{"position":[[160,5]]}}}],["basic",{"_index":104,"t":{"147":{"position":[[21,5]]}}}],["behavior",{"_index":246,"t":{"434":{"position":[[59,10]]}}}],["better",{"_index":139,"t":{"198":{"position":[[242,6]]},"417":{"position":[[91,6]]}}}],["between",{"_index":147,"t":{"214":{"position":[[97,7]]}}}],["block",{"_index":105,"t":{"147":{"position":[[36,5]]}}}],["boilerpl",{"_index":11,"t":{"17":{"position":[[42,11]]}}}],["bootstrap",{"_index":14,"t":{"17":{"position":[[82,9]]}}}],["brief",{"_index":149,"t":{"228":{"position":[[32,5]]}}}],["briefli",{"_index":141,"t":{"214":{"position":[[27,7]]}}}],["build",{"_index":30,"t":{"47":{"position":[[54,6]]},"55":{"position":[[157,6]]},"107":{"position":[[55,6]]},"117":{"position":[[5,8]]},"147":{"position":[[27,8]]},"270":{"position":[[5,8]]},"434":{"position":[[140,5]]}}}],["bundl",{"_index":31,"t":{"47":{"position":[[65,6]]},"107":{"position":[[66,6]]}}}],["button",{"_index":85,"t":{"117":{"position":[[137,6]]}}}],["call",{"_index":266,"t":{"507":{"position":[[47,6]]}}}],["cancel",{"_index":87,"t":{"117":{"position":[[170,7]]}}}],["capabl",{"_index":32,"t":{"47":{"position":[[72,13]]},"107":{"position":[[73,13]]}}}],["cascad",{"_index":209,"t":{"331":{"position":[[83,8]]}}}],["case",{"_index":226,"t":{"393":{"position":[[80,5]]}}}],["central",{"_index":40,"t":{"55":{"position":[[38,7]]}}}],["chang",{"_index":211,"t":{"331":{"position":[[111,6]]}}}],["chapter",{"_index":124,"t":{"167":{"position":[[20,8]]},"198":{"position":[[15,8],[143,8]]},"214":{"position":[[15,8]]},"228":{"position":[[16,8]]}}}],["child",{"_index":253,"t":{"467":{"position":[[52,8]]}}}],["class",{"_index":103,"t":{"147":{"position":[[0,7]]},"161":{"position":[[89,5]]},"167":{"position":[[14,5],[58,7]]},"214":{"position":[[7,7]]},"228":{"position":[[62,7]]},"268":{"position":[[127,8]]},"270":{"position":[[75,7]]},"301":{"position":[[6,5],[86,5],[116,5],[237,5]]},"367":{"position":[[68,5],[112,6]]},"467":{"position":[[35,8],[104,7],[318,5]]},"507":{"position":[[41,5],[113,5]]}}}],["clear",{"_index":98,"t":{"123":{"position":[[202,5]]}}}],["code",{"_index":49,"t":{"55":{"position":[[193,4]]},"517":{"position":[[68,4]]}}}],["common",{"_index":170,"t":{"268":{"position":[[51,7]]},"270":{"position":[[131,6]]},"527":{"position":[[43,6]]}}}],["complex",{"_index":214,"t":{"351":{"position":[[59,7]]},"434":{"position":[[36,7]]}}}],["compon",{"_index":25,"t":{"32":{"position":[[123,9]]},"117":{"position":[[16,9],[111,11],[144,9]]},"123":{"position":[[9,10],[123,9]]},"268":{"position":[[97,9]]},"270":{"position":[[16,9],[109,10]]},"301":{"position":[[145,9],[194,10]]},"467":{"position":[[149,10],[197,9],[346,10]]},"487":{"position":[[177,11]]},"507":{"position":[[93,10],[142,9]]},"517":{"position":[[119,10]]}}}],["compos",{"_index":126,"t":{"167":{"position":[[85,9]]}}}],["concept",{"_index":143,"t":{"214":{"position":[[49,7]]}}}],["concis",{"_index":99,"t":{"123":{"position":[[212,7]]}}}],["condit",{"_index":203,"t":{"319":{"position":[[79,10]]}}}],["configur",{"_index":45,"t":{"55":{"position":[[87,13]]}}}],["conflict",{"_index":146,"t":{"214":{"position":[[87,9]]}}}],["consid",{"_index":22,"t":{"32":{"position":[[71,8]]}}}],["contain",{"_index":169,"t":{"268":{"position":[[35,7]]},"319":{"position":[[4,9],[95,9]]},"517":{"position":[[44,7]]}}}],["content",{"_index":257,"t":{"467":{"position":[[256,7]]},"562":{"position":[[14,7]]}}}],["control",{"_index":243,"t":{"417":{"position":[[98,7]]}}}],["creat",{"_index":270,"t":{"507":{"position":[[198,8]]}}}],["css",{"_index":93,"t":{"123":{"position":[[133,3]]},"147":{"position":[[143,4]]},"161":{"position":[[3,4]]},"167":{"position":[[54,3]]},"268":{"position":[[47,3]]},"270":{"position":[[138,3]]},"276":{"position":[[0,3]]},"301":{"position":[[2,3],[112,3]]},"319":{"position":[[0,3]]},"331":{"position":[[0,3]]},"367":{"position":[[64,3]]},"399":{"position":[[15,3]]},"411":{"position":[[46,3]]},"417":{"position":[[3,4]]},"434":{"position":[[55,3],[81,3]]},"547":{"position":[[2,3]]},"591":{"position":[[80,4]]}}}],["css'",{"_index":251,"t":{"467":{"position":[[15,5]]},"487":{"position":[[15,5]]}}}],["cssstate",{"_index":155,"t":{"228":{"position":[[142,9]]}}}],["current",{"_index":63,"t":{"71":{"position":[[123,9]]}}}],["custom",{"_index":206,"t":{"331":{"position":[[4,6]]},"351":{"position":[[8,6]]},"467":{"position":[[90,6],[304,6]]},"487":{"position":[[91,6]]}}}],["declar",{"_index":217,"t":{"367":{"position":[[25,11]]},"411":{"position":[[50,11]]}}}],["defin",{"_index":80,"t":{"117":{"position":[[69,6]]},"331":{"position":[[31,6]]},"351":{"position":[[28,6]]},"399":{"position":[[38,6]]},"434":{"position":[[70,7]]},"467":{"position":[[83,6],[284,6]]},"487":{"position":[[84,6]]},"517":{"position":[[81,6]]},"527":{"position":[[36,6]]}}}],["definit",{"_index":223,"t":{"377":{"position":[[53,11]]}}}],["depend",{"_index":202,"t":{"319":{"position":[[62,9]]}}}],["describ",{"_index":92,"t":{"123":{"position":[[108,10]]}}}],["desir",{"_index":128,"t":{"167":{"position":[[120,7]]}}}],["develop",{"_index":29,"t":{"47":{"position":[[41,12]]},"107":{"position":[[42,12]]},"198":{"position":[[249,11]]}}}],["differ",{"_index":21,"t":{"32":{"position":[[56,11]]},"467":{"position":[[215,9]]}}}],["direct",{"_index":264,"t":{"501":{"position":[[70,10]]}}}],["directli",{"_index":68,"t":{"79":{"position":[[77,9]]}}}],["divid",{"_index":137,"t":{"198":{"position":[[190,7]]}}}],["document",{"_index":166,"t":{"256":{"position":[[20,8]]}}}],["dom",{"_index":108,"t":{"147":{"position":[[84,4]]},"301":{"position":[[58,3]]},"399":{"position":[[94,3]]},"547":{"position":[[38,3]]}}}],["duplic",{"_index":50,"t":{"55":{"position":[[198,13]]}}}],["dure",{"_index":248,"t":{"434":{"position":[[133,6]]}}}],["dynam",{"_index":210,"t":{"331":{"position":[[99,11]]}}}],["easili",{"_index":88,"t":{"123":{"position":[[30,6]]}}}],["element",{"_index":107,"t":{"147":{"position":[[68,8]]},"161":{"position":[[63,8]]},"301":{"position":[[62,7]]},"319":{"position":[[54,7]]},"399":{"position":[[98,8]]},"487":{"position":[[35,9],[105,8]]},"547":{"position":[[42,8]]}}}],["enabl",{"_index":245,"t":{"434":{"position":[[16,6]]},"501":{"position":[[15,7]]}}}],["entir",{"_index":46,"t":{"55":{"position":[[109,6]]}}}],["etc",{"_index":189,"t":{"291":{"position":[[121,7]]}}}],["exampl",{"_index":84,"t":{"117":{"position":[[127,7]]},"198":{"position":[[175,7]]},"228":{"position":[[38,8]]},"301":{"position":[[165,7]]}}}],["experi",{"_index":140,"t":{"198":{"position":[[261,11]]}}}],["explain",{"_index":142,"t":{"214":{"position":[[35,9]]}}}],["expos",{"_index":97,"t":{"123":{"position":[[193,6]]},"527":{"position":[[94,7]]}}}],["extend",{"_index":216,"t":{"367":{"position":[[17,7]]}}}],["extens",{"_index":56,"t":{"71":{"position":[[28,9]]}}}],["few",{"_index":51,"t":{"63":{"position":[[12,3]]}}}],["file",{"_index":38,"t":{"55":{"position":[[23,4]]},"91":{"position":[[22,4],[171,6]]},"268":{"position":[[24,4]]}}}],["flavor",{"_index":83,"t":{"117":{"position":[[93,9]]},"562":{"position":[[35,8]]}}}],["follow",{"_index":53,"t":{"63":{"position":[[34,6]]}}}],["formatt",{"_index":232,"t":{"411":{"position":[[0,10]]}}}],["function",{"_index":156,"t":{"228":{"position":[[160,8]]},"411":{"position":[[15,9]]},"591":{"position":[[31,9]]}}}],["galleri",{"_index":199,"t":{"301":{"position":[[186,7]]}}}],["game",{"_index":136,"t":{"198":{"position":[[170,4]]}}}],["gener",{"_index":95,"t":{"123":{"position":[[161,7]]},"301":{"position":[[34,7]]}}}],["github",{"_index":276,"t":{"562":{"position":[[28,6]]}}}],["global",{"_index":153,"t":{"228":{"position":[[91,6]]},"393":{"position":[[111,6],[188,9]]}}}],["goal",{"_index":168,"t":{"268":{"position":[[4,4]]}}}],["group",{"_index":239,"t":{"417":{"position":[[33,5]]}}}],["guid",{"_index":158,"t":{"242":{"position":[[5,5]]}}}],["help",{"_index":160,"t":{"242":{"position":[[26,4]]},"256":{"position":[[35,4]]},"517":{"position":[[76,4]]}}}],["id",{"_index":61,"t":{"71":{"position":[[94,3]]}}}],["imag",{"_index":7,"t":{"14":{"position":[[13,6]]}}}],["implement",{"_index":57,"t":{"71":{"position":[[38,12]]}}}],["import",{"_index":71,"t":{"91":{"position":[[27,7]]},"167":{"position":[[7,6],[47,6]]},"198":{"position":[[70,8]]},"377":{"position":[[17,6],[130,8]]},"517":{"position":[[0,8]]}}}],["improv",{"_index":191,"t":{"291":{"position":[[143,7]]}}}],["includ",{"_index":64,"t":{"71":{"position":[[133,9]]},"268":{"position":[[76,9]]}}}],["indic",{"_index":218,"t":{"367":{"position":[[48,8]]}}}],["inherit",{"_index":219,"t":{"367":{"position":[[74,8]]}}}],["inner",{"_index":261,"t":{"487":{"position":[[157,5]]}}}],["insid",{"_index":77,"t":{"91":{"position":[[146,6]]}}}],["instanc",{"_index":249,"t":{"454":{"position":[[9,8]]}}}],["instance,act",{"_index":123,"t":{"161":{"position":[[107,17]]}}}],["integr",{"_index":19,"t":{"32":{"position":[[5,11]]},"47":{"position":[[20,11]]},"53":{"position":[[3,9]]},"55":{"position":[[168,13]]},"63":{"position":[[44,9]]},"107":{"position":[[21,11]]}}}],["intellig",{"_index":55,"t":{"71":{"position":[[9,12]]}}}],["intend",{"_index":159,"t":{"242":{"position":[[14,8]]}}}],["intern",{"_index":101,"t":{"123":{"position":[[232,8]]}}}],["intro",{"_index":115,"t":{"157":{"position":[[10,5]]}}}],["javascript",{"_index":132,"t":{"198":{"position":[[86,10]]},"291":{"position":[[54,10]]},"377":{"position":[[119,10]]},"434":{"position":[[88,11]]},"517":{"position":[[33,10]]}}}],["js",{"_index":224,"t":{"377":{"position":[[87,3]]}}}],["key",{"_index":20,"t":{"32":{"position":[[52,3]]}}}],["keyfram",{"_index":229,"t":{"399":{"position":[[4,10]]}}}],["know",{"_index":75,"t":{"91":{"position":[[131,7]]}}}],["land",{"_index":5,"t":{"14":{"position":[[0,7]]}}}],["languag",{"_index":58,"t":{"71":{"position":[[55,8]]}}}],["launch",{"_index":1,"t":{"2":{"position":[[0,9]]}}}],["layer",{"_index":238,"t":{"417":{"position":[[8,6]]}}}],["let'",{"_index":256,"t":{"467":{"position":[[176,5]]}}}],["level",{"_index":44,"t":{"55":{"position":[[81,5]]},"79":{"position":[[23,5]]},"507":{"position":[[156,5]]}}}],["librari",{"_index":26,"t":{"32":{"position":[[133,8]]},"117":{"position":[[26,7]]},"270":{"position":[[26,7]]}}}],["likenth",{"_index":252,"t":{"467":{"position":[[44,7]]}}}],["link",{"_index":138,"t":{"198":{"position":[[203,6]]}}}],["list",{"_index":17,"t":{"17":{"position":[[112,4]]}}}],["load",{"_index":258,"t":{"467":{"position":[[267,8],[291,7]]}}}],["local",{"_index":151,"t":{"228":{"position":[[70,5]]}}}],["low",{"_index":66,"t":{"79":{"position":[[19,3]]}}}],["lower",{"_index":176,"t":{"270":{"position":[[147,5]]}}}],["manual",{"_index":244,"t":{"431":{"position":[[0,6]]}}}],["map",{"_index":150,"t":{"228":{"position":[[50,7]]}}}],["mark",{"_index":106,"t":{"147":{"position":[[63,4]]}}}],["markdown",{"_index":277,"t":{"562":{"position":[[44,8]]}}}],["match",{"_index":196,"t":{"301":{"position":[[77,8]]},"351":{"position":[[53,5]]},"507":{"position":[[64,7]]}}}],["mean",{"_index":91,"t":{"123":{"position":[[82,5]]}}}],["migrat",{"_index":161,"t":{"242":{"position":[[31,7]]},"256":{"position":[[40,7]]}}}],["minim",{"_index":271,"t":{"517":{"position":[[52,7]]}}}],["mixin",{"_index":200,"t":{"301":{"position":[[248,6]]},"434":{"position":[[9,6]]}}}],["modul",{"_index":133,"t":{"198":{"position":[[97,7],[221,7]]},"377":{"position":[[91,7]]}}}],["more",{"_index":195,"t":{"291":{"position":[[182,5]]}}}],["name",{"_index":152,"t":{"228":{"position":[[76,5],[109,5]]},"301":{"position":[[92,5]]},"547":{"position":[[74,5]]}}}],["namespac",{"_index":144,"t":{"214":{"position":[[66,11]]},"228":{"position":[[98,10]]},"393":{"position":[[27,10],[145,11]]},"431":{"position":[[7,9]]},"507":{"position":[[179,9]]}}}],["nativ",{"_index":118,"t":{"161":{"position":[[38,6]]},"467":{"position":[[21,6]]},"487":{"position":[[21,6]]}}}],["navbtn",{"_index":198,"t":{"301":{"position":[[175,7]]}}}],["need",{"_index":34,"t":{"53":{"position":[[42,4]]},"63":{"position":[[26,4]]}}}],["nest",{"_index":204,"t":{"319":{"position":[[111,6]]}}}],["new",{"_index":15,"t":{"17":{"position":[[92,3]]},"507":{"position":[[175,3]]}}}],["nextj",{"_index":54,"t":{"63":{"position":[[73,6]]}}}],["node",{"_index":268,"t":{"507":{"position":[[81,4],[162,4]]}}}],["normal",{"_index":281,"t":{"591":{"position":[[62,8]]}}}],["offer",{"_index":10,"t":{"17":{"position":[[33,6]]}}}],["open",{"_index":114,"t":{"157":{"position":[[2,7]]}}}],["order",{"_index":241,"t":{"417":{"position":[[57,5],[121,6]]}}}],["outsid",{"_index":90,"t":{"123":{"position":[[68,8]]}}}],["overrid",{"_index":242,"t":{"417":{"position":[[66,8]]}}}],["page",{"_index":6,"t":{"14":{"position":[[8,4]]}}}],["paint",{"_index":193,"t":{"291":{"position":[[159,6]]}}}],["paragraph",{"_index":116,"t":{"157":{"position":[[16,9]]}}}],["part",{"_index":102,"t":{"123":{"position":[[241,6]]},"167":{"position":[[128,6]]},"301":{"position":[[155,5]]},"487":{"position":[[163,5]]}}}],["particip",{"_index":208,"t":{"331":{"position":[[64,11]]}}}],["place",{"_index":41,"t":{"55":{"position":[[46,5]]}}}],["possibl",{"_index":96,"t":{"123":{"position":[[172,9]]}}}],["previou",{"_index":148,"t":{"228":{"position":[[7,8]]}}}],["primarili",{"_index":197,"t":{"301":{"position":[[130,9]]}}}],["process",{"_index":237,"t":{"411":{"position":[[97,7]]}}}],["project",{"_index":16,"t":{"17":{"position":[[96,8]]},"32":{"position":[[33,8],[92,7]]},"55":{"position":[[116,8]]},"63":{"position":[[80,8]]},"79":{"position":[[68,8]]},"256":{"position":[[48,8]]},"268":{"position":[[16,7],[67,8]]}}}],["properti",{"_index":207,"t":{"331":{"position":[[11,8]]}}}],["protocol",{"_index":60,"t":{"71":{"position":[[71,8]]}}}],["provid",{"_index":28,"t":{"47":{"position":[[32,8]]},"71":{"position":[[85,8]]},"91":{"position":[[67,7]]},"107":{"position":[[33,8]]},"198":{"position":[[232,7]]},"417":{"position":[[15,8]]},"527":{"position":[[19,7]]}}}],["pseudo",{"_index":121,"t":{"161":{"position":[[82,6]]},"467":{"position":[[28,6],[97,6],[311,6]]},"487":{"position":[[28,6],[98,6]]}}}],["purpos",{"_index":165,"t":{"256":{"position":[[4,7]]}}}],["queri",{"_index":201,"t":{"319":{"position":[[14,7]]}}}],["quickli",{"_index":9,"t":{"17":{"position":[[15,8]]}}}],["re",{"_index":47,"t":{"55":{"position":[[142,2]]},"331":{"position":[[42,2]]}}}],["react",{"_index":186,"t":{"291":{"position":[[100,6]]}}}],["read",{"_index":129,"t":{"179":{"position":[[10,8]]}}}],["receiv",{"_index":235,"t":{"411":{"position":[[78,7]]}}}],["reduc",{"_index":48,"t":{"55":{"position":[[186,6]]}}}],["refer",{"_index":222,"t":{"377":{"position":[[43,9]]}}}],["referenc",{"_index":231,"t":{"399":{"position":[[70,10]]}}}],["render",{"_index":180,"t":{"291":{"position":[[12,9],[65,8]]}}}],["repres",{"_index":86,"t":{"117":{"position":[[159,10]]}}}],["reserv",{"_index":265,"t":{"507":{"position":[[32,8]]}}}],["return",{"_index":233,"t":{"411":{"position":[[30,6],[114,6]]}}}],["reus",{"_index":174,"t":{"270":{"position":[[69,5]]},"434":{"position":[[30,5]]}}}],["rollup",{"_index":27,"t":{"47":{"position":[[13,6]]}}}],["root",{"_index":267,"t":{"507":{"position":[[54,4],[76,4],[108,4]]}}}],["rule",{"_index":221,"t":{"377":{"position":[[27,4]]},"399":{"position":[[22,4]]},"417":{"position":[[39,5],[81,5]]},"434":{"position":[[128,4]]},"501":{"position":[[49,5]]}}}],["runtim",{"_index":130,"t":{"198":{"position":[[7,7]]},"228":{"position":[[118,8]]},"331":{"position":[[134,8]]},"517":{"position":[[60,7]]}}}],["saw",{"_index":125,"t":{"167":{"position":[[32,3]]},"198":{"position":[[27,3]]},"228":{"position":[[28,3]]}}}],["scope",{"_index":262,"t":{"501":{"position":[[9,5]]},"507":{"position":[[189,5]]}}}],["see",{"_index":135,"t":{"198":{"position":[[158,3]]}}}],["selector",{"_index":127,"t":{"167":{"position":[[97,8]]},"301":{"position":[[12,8]]},"351":{"position":[[15,9],[67,10]]},"393":{"position":[[13,9],[118,9],[198,9]]},"547":{"position":[[11,8]]}}}],["semant",{"_index":82,"t":{"117":{"position":[[84,8]]}}}],["seo",{"_index":194,"t":{"291":{"position":[[166,3]]}}}],["serv",{"_index":183,"t":{"291":{"position":[[46,7]]}}}],["server",{"_index":59,"t":{"71":{"position":[[64,6]]},"291":{"position":[[0,6]]}}}],["sever",{"_index":81,"t":{"117":{"position":[[76,7]]},"501":{"position":[[35,7]]}}}],["share",{"_index":173,"t":{"268":{"position":[[120,6]]},"270":{"position":[[95,6]]},"527":{"position":[[106,7]]}}}],["side",{"_index":179,"t":{"291":{"position":[[7,4]]}}}],["signifi",{"_index":269,"t":{"507":{"position":[[130,7]]}}}],["similar",{"_index":225,"t":{"377":{"position":[[104,7]]}}}],["simpl",{"_index":94,"t":{"123":{"position":[[150,6]]}}}],["singl",{"_index":234,"t":{"411":{"position":[[39,6]]},"501":{"position":[[63,6]]}}}],["specif",{"_index":177,"t":{"270":{"position":[[153,12]]}}}],["ssr",{"_index":181,"t":{"291":{"position":[[22,5]]}}}],["st",{"_index":215,"t":{"367":{"position":[[14,2]]},"377":{"position":[[13,3]]}}}],["st.css",{"_index":78,"t":{"91":{"position":[[162,8]]},"377":{"position":[[76,7]]}}}],["start",{"_index":8,"t":{"17":{"position":[[7,7]]}}}],["state",{"_index":119,"t":{"161":{"position":[[45,6]]},"228":{"position":[[187,7]]},"467":{"position":[[169,6]]},"517":{"position":[[106,5]]}}}],["step",{"_index":52,"t":{"63":{"position":[[16,5]]}}}],["storybook",{"_index":33,"t":{"53":{"position":[[27,10]]}}}],["structur",{"_index":272,"t":{"517":{"position":[[92,9]]}}}],["stylabl",{"_index":2,"t":{"2":{"position":[[10,8]]},"17":{"position":[[24,8]]},"25":{"position":[[8,9]]},"32":{"position":[[17,8]]},"47":{"position":[[4,8]]},"53":{"position":[[13,8]]},"63":{"position":[[54,8]]},"71":{"position":[[0,8],[110,9]]},"79":{"position":[[59,8]]},"91":{"position":[[37,8],[153,8]]},"107":{"position":[[4,8]]},"123":{"position":[[0,8],[37,8]]},"147":{"position":[[45,9]]},"198":{"position":[[37,8]]},"242":{"position":[[39,8],[61,8]]},"256":{"position":[[63,8]]},"301":{"position":[[101,8]]},"367":{"position":[[4,8]]},"377":{"position":[[4,8]]},"393":{"position":[[3,9],[136,8]]},"434":{"position":[[0,8]]},"454":{"position":[[0,8]]},"467":{"position":[[61,8]]},"487":{"position":[[62,8]]},"501":{"position":[[0,8]]},"507":{"position":[[6,8]]},"517":{"position":[[9,8]]},"527":{"position":[[0,8]]},"591":{"position":[[0,8]]}}}],["stylable.config.j",{"_index":37,"t":{"55":{"position":[[4,18]]}}}],["stylable/cli",{"_index":65,"t":{"79":{"position":[[0,13]]}}}],["style",{"_index":112,"t":{"147":{"position":[[128,6]]},"319":{"position":[[45,5]]},"417":{"position":[[113,7]]},"434":{"position":[[44,6],[122,5]]},"467":{"position":[[134,6],[225,7]]},"487":{"position":[[147,6]]},"501":{"position":[[43,5]]}}}],["stylesheet",{"_index":72,"t":{"91":{"position":[[46,11]]},"123":{"position":[[97,10]]},"198":{"position":[[210,10]]},"214":{"position":[[105,12]]},"367":{"position":[[90,10]]},"393":{"position":[[45,11]]},"507":{"position":[[15,10]]},"517":{"position":[[18,11]]},"527":{"position":[[79,10]]}}}],["stylesheet'",{"_index":131,"t":{"198":{"position":[[46,12]]}}}],["such",{"_index":185,"t":{"291":{"position":[[91,5]]}}}],["support",{"_index":62,"t":{"71":{"position":[[98,7]]},"291":{"position":[[170,7]]},"591":{"position":[[9,8]]}}}],["syntax",{"_index":122,"t":{"161":{"position":[[95,6]]},"562":{"position":[[53,7]]}}}],["tag",{"_index":275,"t":{"547":{"position":[[70,3]]}}}],["target",{"_index":111,"t":{"147":{"position":[[115,8]]},"161":{"position":[[31,6]]},"167":{"position":[[70,6],[109,6]]},"301":{"position":[[49,6]]},"319":{"position":[[34,6]]},"393":{"position":[[104,6]]},"487":{"position":[[130,6]]},"547":{"position":[[31,6]]}}}],["templat",{"_index":18,"t":{"17":{"position":[[120,10]]}}}],["terminolog",{"_index":178,"t":{"276":{"position":[[4,11]]}}}],["themabl",{"_index":89,"t":{"123":{"position":[[50,8]]}}}],["theme",{"_index":273,"t":{"527":{"position":[[118,8]]}}}],["thing",{"_index":36,"t":{"53":{"position":[[57,7]]}}}],["those",{"_index":109,"t":{"147":{"position":[[92,5]]}}}],["time",{"_index":192,"t":{"291":{"position":[[151,4]]},"434":{"position":[[146,5]]}}}],["togeth",{"_index":240,"t":{"417":{"position":[[45,8]]}}}],["toggl",{"_index":259,"t":{"467":{"position":[[328,6]]}}}],["top",{"_index":43,"t":{"55":{"position":[[77,3]]},"507":{"position":[[152,3]]}}}],["tri",{"_index":190,"t":{"291":{"position":[[134,5]]}}}],["turn",{"_index":110,"t":{"147":{"position":[[107,4]]}}}],["two",{"_index":35,"t":{"53":{"position":[[53,3]]}}}],["type",{"_index":73,"t":{"91":{"position":[[77,4]]},"547":{"position":[[6,4]]}}}],["typescript",{"_index":70,"t":{"91":{"position":[[11,10],[106,10]]}}}],["url",{"_index":279,"t":{"591":{"position":[[27,3]]}}}],["us",{"_index":13,"t":{"17":{"position":[[74,4]]},"55":{"position":[[145,4]]},"79":{"position":[[37,4]]},"117":{"position":[[59,6]]},"147":{"position":[[55,4]]},"161":{"position":[[72,5]]},"198":{"position":[[129,5]]},"214":{"position":[[60,5]]},"256":{"position":[[57,5]]},"270":{"position":[[59,6]]},"301":{"position":[[24,4],[125,4],[221,4]]},"319":{"position":[[26,4]]},"331":{"position":[[23,4],[45,3]]},"351":{"position":[[4,3]]},"367":{"position":[[40,4]]},"377":{"position":[[35,4]]},"393":{"position":[[180,3]]},"399":{"position":[[30,4]]},"501":{"position":[[55,5]]},"507":{"position":[[122,4]]},"527":{"position":[[63,4]]},"547":{"position":[[23,4]]},"562":{"position":[[22,5]]},"591":{"position":[[44,3]]}}}],["usag",{"_index":278,"t":{"591":{"position":[[18,5]]}}}],["util",{"_index":12,"t":{"17":{"position":[[54,7]]},"79":{"position":[[29,7]]},"228":{"position":[[152,7]]},"301":{"position":[[229,7]]}}}],["v5",{"_index":167,"t":{"256":{"position":[[75,3]]}}}],["valu",{"_index":212,"t":{"331":{"position":[[124,6]]},"411":{"position":[[62,6],[125,6]]},"527":{"position":[[50,6]]}}}],["variabl",{"_index":171,"t":{"268":{"position":[[86,10]]},"331":{"position":[[49,9]]},"527":{"position":[[9,9]]}}}],["variant",{"_index":172,"t":{"268":{"position":[[107,8]]}}}],["variou",{"_index":120,"t":{"161":{"position":[[55,7]]}}}],["version",{"_index":3,"t":{"2":{"position":[[19,7]]},"242":{"position":[[48,7],[70,7]]}}}],["via",{"_index":113,"t":{"147":{"position":[[135,3]]}}}],["vue",{"_index":187,"t":{"291":{"position":[[107,4]]}}}],["want",{"_index":227,"t":{"393":{"position":[[96,4]]},"467":{"position":[[190,4]]}}}],["way",{"_index":74,"t":{"91":{"position":[[124,3]]},"301":{"position":[[42,3]]},"377":{"position":[[112,3]]},"417":{"position":[[26,3]]},"527":{"position":[[29,3]]}}}],["we'll",{"_index":134,"t":{"198":{"position":[[152,5]]}}}],["web",{"_index":184,"t":{"291":{"position":[[74,3]]}}}],["webpack",{"_index":79,"t":{"107":{"position":[[13,7]]}}}],["well",{"_index":154,"t":{"228":{"position":[[130,4]]}}}],["what'",{"_index":76,"t":{"91":{"position":[[139,6]]}}}],["whenev",{"_index":69,"t":{"91":{"position":[[0,8]]}}}],["whether",{"_index":23,"t":{"32":{"position":[[80,7]]}}}],["within",{"_index":205,"t":{"319":{"position":[[118,7]]}}}],["without",{"_index":228,"t":{"393":{"position":[[128,7]]}}}],["work",{"_index":67,"t":{"79":{"position":[[46,7]]}}}],["wrap",{"_index":263,"t":{"501":{"position":[[30,4]]}}}],["write",{"_index":42,"t":{"55":{"position":[[66,5]]},"562":{"position":[[8,5]]}}}]],"pipeline":["stemmer"]}},{"documents":[],"index":{"version":"2.3.9","fields":["t"],"fieldVectors":[],"invertedIndex":[],"pipeline":["stemmer"]}},{"documents":[{"i":3,"t":"First time hearing about Stylable?​ No worries! Stylable is a tool that empowers you to create safe, reusable style APIs for your components. It's a superset of CSS that adds a type system to it, providing type safety, and powerful language capabilities. Want to learn more? We recently started writing a new handbook to help get you up to speed, and more content is on its way over the coming weeks.","s":"Welcome to Stylable v5","u":"/blog/welcome-to-stylable-v5","h":"","p":2},{"i":5,"t":"No worries! Stylable is a tool that empowers you to create safe, reusable style APIs for your components. It's a superset of CSS that adds a type system to it, providing type safety, and powerful language capabilities. Want to learn more? We recently started writing a new handbook to help get you up to speed, and more content is on its way over the coming weeks.","s":"First time hearing about Stylable?","u":"/blog/welcome-to-stylable-v5","h":"#first-time-hearing-about-stylable","p":2},{"i":7,"t":"Over the last couple of years, we focused on developing Stylable internally in Wix, building it into an entire tooling ecosystem. We integrated Stylable across Wix.com, both for internal tools and user-facing components. We stress-tested the project, making sure it meets our requirements. Today, Stylable helps power over 50 million user websites, and is the de facto styling solution for new projects and new user-facing components.","s":"What went on behind the scenes?","u":"/blog/welcome-to-stylable-v5","h":"#what-went-on-behind-the-scenes","p":2},{"i":9,"t":"We recently released Stylable v5, and we're excited to share it with the community. Version 5 includes considerable refactoring and clean up of the Stylable core package to make it more robust, and its programmatic API more accessible. If you encounter any bugs or issues, please open an issue on our GitHub repository.","s":"What have we been up to recently?","u":"/blog/welcome-to-stylable-v5","h":"#what-have-we-been-up-to-recently","p":2},{"i":11,"t":"We added a new playground to help developers learn and experiment with Stylable. With monorepo projects becoming more and more common, we've made (and continue to make) improvements to how Stylable and our CLI handle them. Lastly, we've been focused on refining and expanding our documentation, adding new guides, refactoring our API reference to a standard format, and improving the overall reading experience.","s":"Additional highlights","u":"/blog/welcome-to-stylable-v5","h":"#additional-highlights","p":2},{"i":13,"t":"Many new features are planned for Stylable, including the expansion of the type system to cover even more of CSS, and to create new integrations for emerging tools and technologies. CSS as a language has been rapidly progressing recently, with functionality increasing as the language expands. We're following the language closely as its specs progress, and we'll focus our efforts so that Stylable continues to offer the best possible experience over CSS at any time. Although it's always been open-source, we feel like this is the time for us to introduce Stylable back to the web development community, and to hopefully show people how Stylable can make their development experience better. In the coming weeks, we'll be expanding our guides, examples, and documentation to make it even easier to onboard new users. join the community Want to be a part of the discussion? See our ongoing development on GitHub, follow us on Twitter, and join the Discord where we're always up for a chat about styling. We hope you'll join us on this journey, and we're looking forward to hearing your feedback. - The Stylable team","s":"What's next for Stylable?","u":"/blog/welcome-to-stylable-v5","h":"#whats-next-for-stylable","p":2},{"i":16,"t":"The following images have been used in the landing page. Icons made by Freepik https://www.flaticon.com/free-icon/api_921573 https://www.flaticon.com/free-icon/stethoscope_1012652 https://www.flaticon.com/free-icon/tool_3964296 https://www.flaticon.com/free-icon/web-design_781642 Icons made by Eucalyp https://www.flaticon.com/free-icon/checklist_2753153 Icons made by wanicon https://www.flaticon.com/free-icon/prototype_2421271","s":"Landing Page Images","u":"/docs/attributions","h":"#landing-page-images","p":14},{"i":18,"t":"To get started quickly, Stylable offers a boilerplate utility that can be used to bootstrap new projects from a list of templates.","s":"Boilerplate","u":"/docs/getting-started/boilerplate","h":"","p":17},{"i":20,"t":"This is the default template, it creates a new project and includes: A React application Webpack bundling including production optimizations TypeScript support with automatically generated stylesheet type definitions To use this template, run the following command: NPM Yarn npm init stylable-app [PROJECT_NAME] yarn create stylable-app [PROJECT_NAME]","s":"ts-react-webpack (app)","u":"/docs/getting-started/boilerplate","h":"#ts-react-webpack-app","p":17},{"i":22,"t":"This is an alternative template, it creates a new project and includes: A React application Rollup bundling TypeScript support with automatically generated stylesheet type definitions To use this template, run the following command: NPM Yarn npm init stylable-app -- [PROJECT_NAME] --template ts-react-rollup yarn create stylable-app [PROJECT_NAME] --template ts-react-rollup Missing a template? Got a use-case we don't support? A template you would like us to add? Let us know by creating a new template proposal.","s":"ts-react-rollup (app)","u":"/docs/getting-started/boilerplate","h":"#ts-react-rollup-app","p":17},{"i":24,"t":"Once your project is up and running, you can begin styling with Stylable. Read through the Handbook or explore the API References to help guide you in your work.","s":"Integrated and ready to learn?","u":"/docs/getting-started/boilerplate","h":"#integrated-and-ready-to-learn","p":17},{"i":27,"t":"Stylable is a CSS preprocessor that enables you to write reusable, highly-performant, styled components. Each component exposes a style API that maps its internal parts so you can reuse components across teams without sacrificing stylability. Namespace styles to components so they don't \"leak\" and clash with other styles. Enable custom pseudo-classes and pseudo-elements that abstract the internal structure of a component. These can then be styled externally. At build time, the preprocessor converts the Stylable CSS into flat, static, valid, vanilla CSS that works cross-browser. Stylable is agnostic to the component framework being used, it provides a way to write CSS that can be applied to any framework. All examples on the site use React-like syntax for demo purposes. However, the CSS written with Stylable can easily be used with any other frameworks such as Vue, Angular, or SolidJS.","s":"What is Stylable?","u":"/docs/getting-started/intro","h":"#what-is-stylable","p":25},{"i":29,"t":"There are currently two ways of starting working with Stylable: Quickly start a new project from a boilerplate Integrate into a new or existing project by manually configuring Stylable. Optionally, you can install Stylable Intelligence, an extension providing IDE support for code completion and diagnostics (currently supported only for Visual Studio Code).","s":"Where do I start?","u":"/docs/getting-started/intro","h":"#where-do-i-start","p":25},{"i":31,"t":"Read the handbook - Take a tour through the features of Stylable, and see how to use them in the handbook guides. Explore the API docs - Take a look at our specification reference documents to get more acquainted with our code and to see specific code examples. Use the overview as a cheat sheet to help you keep track of Stylable syntax. Play with Stylable Online - Take Stylable for a spin and see how it works in the Stylable Playground.","s":"Want to learn more?","u":"/docs/getting-started/intro","h":"#want-to-learn-more","p":25},{"i":33,"t":"When integrating Stylable into a project, there are key differences to consider whether the project is an application or a component library. An application is a project that is deployed to production for end-users to access. While a component library is a project that is published to a package manager for other developers to consume in their projects. This difference mostly manifests in how these projects are built. For example, an application might build a final bundle for deployment, while a component library would build standalone modules to be consumed in various ways.","s":"Manual Integration","u":"/docs/getting-started/manual-integration","h":"","p":32},{"i":35,"t":"For any project using TypeScript (applications or component libraries), it is strongly recommended to configure the project integrations to generate .d.ts definitions for all Stylable stylesheets. This will provide contextual completions and type-checking for imported stylesheets during development.","s":"TypeScript development","u":"/docs/getting-started/manual-integration","h":"#typescript-development","p":32},{"i":38,"t":"Stylable officially supports two different bundlers, webpack and Rollup. These bundlers are used to process and bundle your CSS, JavaScript and asset files for use in a web application.","s":"Bundler","u":"/docs/getting-started/manual-integration","h":"#bundler","p":32},{"i":40,"t":"To integrate Stylable with server-side rendering, you have two options. The first option is to pre-build your stylesheets and assets using the Stylable, and then consume them on the server without any further Stylable-specific integration. The second option is to use the Stylable node integration, which allows you to load and render Stylable stylesheets directly on the server. To use this option, you will need to integrate @stylable/node into your server-side rendering pipeline.","s":"Server-side rendering (SSR)","u":"/docs/getting-started/manual-integration","h":"#server-side-rendering-ssr","p":32},{"i":42,"t":"note This section is a work in progress and will be updated further soon.","s":"Component library","u":"/docs/getting-started/manual-integration","h":"#component-library","p":32},{"i":44,"t":"Stylable offers several additional ready-made integrations to pick from: Next.js integration - for applications using the NextJS framework Storybook integration - for projects using Storybook to demo their components Codux - a visual IDE for react projects, supports Stylable out of the box, no special integration needed","s":"Additional tooling support","u":"/docs/getting-started/manual-integration","h":"#additional-tooling-support","p":32},{"i":46,"t":"Once you've finished configuring your project, you can begin styling with Stylable. Read through the Handbook or explore the API References to help guide you in your work.","s":"Integrated and ready to learn?","u":"/docs/getting-started/manual-integration","h":"#integrated-and-ready-to-learn","p":32},{"i":48,"t":"The Stylable Rollup integration provides development, build, and bundle capabilities.","s":"Rollup","u":"/docs/getting-started/rollup-integration","h":"","p":47},{"i":50,"t":"Install the @stylable/rollup-plugin as a dev dependency in your local project. Using npm: npm install @stylable/rollup-plugin --save-dev Using Yarn: yarn add @stylable/rollup-plugin --dev","s":"Install","u":"/docs/getting-started/rollup-integration","h":"#install","p":47},{"i":52,"t":"rollup.config.js const { stylableRollupPlugin } = require('@stylable/rollup-plugin'); module.exports = { plugins: [stylableRollupPlugin()], }; For more information on configuring the @stylable/rollup-plugin, see the readme file.","s":"Configuration","u":"/docs/getting-started/rollup-integration","h":"#configuration","p":47},{"i":54,"t":"To integrate Stylable with Storybook, you need to do two things: Exclude Stylable files (*.st.css) from all other existing CSS loaders. Add StylableWebpackPlugin to the webpack configuration. Add the following snippit to your Storybook webpack configuration to get these two actions done: const { StylableWebpackPlugin, applyWebpackConfigStylableExcludes } = require('@stylable/webpack-plugin'); module.exports = { stories: ..., addons: ..., webpackFinal: (config) => { /* find all css loaders and add exclude .st.css files from them */ applyWebpackConfigStylableExcludes(config); /* inject StylableWebpackPlugin */ config.plugins.push(new StylableWebpackPlugin()); return config; } } caution This snippet should work with default Storybook configuration. It assumes some things about the structure of the file which might not be true in future releases of Storybook.","s":"Storybook","u":"/docs/getting-started/storybook-integration","h":"","p":53},{"i":56,"t":"The stylable.config.js file acts as a central place where you can write your top level configuration for the entire project, so that they are re-used across builds and integrations, and reduce code duplications. The configuration file should be located in the project root directory in order to be picked up automatically.","s":"stylable.config.js","u":"/docs/getting-started/stylable-config","h":"","p":55},{"i":58,"t":"The defaultConfig export field is used to set default configuration for Stylable instances across all integrations and tooling. Currently, the following options are supported: resolveNamespace - control the namespace of the generated CSS resolveModule - control the module resolution stylable.config.js - example const { createDefaultResolver } = require('@stylable/core'); const { createNamespaceStrategyNode } = require('@stylable/node'); const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin'); module.exports = { defaultConfig(fs) { return { // set a custom namespace resolver resolveNamespace: createNamespaceStrategyNode({ prefix: 'mylib', strict: true, }), // set a custom module resolver with TS paths resolution resolveModule: createDefaultResolver(fs, { plugins: [ new TsconfigPathsPlugin({ configFile: require.resolve('./tsconfig.json'), extensions: ['.st.css'], }), ], }), }; }, };","s":"defaultConfig","u":"/docs/getting-started/stylable-config","h":"#defaultconfig","p":55},{"i":60,"t":"The stcConfig export field is used as a single point to define multiple build tasks for the Stylable CLI. To run this configuration, either run the CLI using the stc command, or pass the stcConfig option to the Webpack or rollup integrations. Single build task Multiple build tasks const { stcConfig } = require('@stylable/cli'); // use the `stcConfig` function to get type completion and validation exports.stcConfig = stcConfig({ // build type definitions for all stylesheets into the st-types directory options: { srcDir: './src', outDir: './st-types', dts: true } }); const { stcConfig } = require('@stylable/cli'); exports.stcConfig = stcConfig({ // default options for each build task set to output sources options: { srcDir: './src', outDir: './dist', outputSources: true, }, // define a glob path for each build task projects: ['packages/*'] }); Multiple build tasks interface Projects allow sharing stc configurations and management of Stylable projects in one location. They provides a controllable and predictable build order with caching optimizations. interface MultipleProjectsConfig { options?: PartialBuildOptions; presets?: Presets; projects: Projects; projectsOptions?: { resolveRequests?: ResolveRequests; }; } type Projects = | Array | Record; type ProjectEntryValues = | ProjectEntryValue | Array>; type ProjectEntryValue = | PRESET | PartialBuildOptions | { preset?: PRESET; presets?: Array; options: PartialBuildOptions; }; To learn more about the various CLI flags, see the CLI page.","s":"stcConfig","u":"/docs/getting-started/stylable-config","h":"#stcconfig","p":55},{"i":62,"t":"The webpackPlugin export field is used to configure any Stylable Webpack plugins in the project. The StylableWebpackPlugin will attempt to load the nearest stylable.config.js file and use its webpackPlugin export as for its options. To learn more about the building Stylable using Webpack, see the Webpack integration page.","s":"webpackPlugin","u":"/docs/getting-started/stylable-config","h":"#webpackplugin","p":55},{"i":64,"t":"There are a few steps you need to follow to integrate Stylable into your NextJS project. Install @stylable/webpack-plugin as a devDependency in your package.json file. Create a next.config.js file. Exclude other CSS loaders from loading Stylable (*.st.css) files. Add the Stylable plugin to the webpack configuration. Example Configuration:​ next.config.js const { StylableWebpackPlugin, applyWebpackConfigStylableExcludes } = require('@stylable/webpack-plugin'); /* * single optimizer for NextJS multiple builds * in order to sync client/server namespaces */ const StylableOptimizer = require('@stylable/optimizer').StylableOptimizer; const stylableOptimizer = new StylableOptimizer(); module.exports = { webpack: (config) => { /* exclude Stylable files from all other loaders */ applyWebpackConfigStylableExcludes(config); /* add the Stylable plugin to the webpack configuration */ config.plugins.push( new StylableWebpackPlugin({ /* let NextJS handle assets */ filterAssets: () => false, /* output CSS to the correct location */ filename: 'static/css/stylable.[contenthash].css', /* a shared optimizer instance */ optimizer: stylableOptimizer, }) ); return config; }, }; important The applyWebpackConfigStylableExcludes export and filterAssets flag are available in @stylable/webpack-plugin version 4.2.2 and onwards.","s":"NextJS","u":"/docs/getting-started/nextjs-integration","h":"","p":63},{"i":66,"t":"If your project consumes any 3rd-party Stylable stylesheets, additional configuration is required to ensure that they will be handled by @stylable/webpack-plugin: Add an import to bundleServerLibs from @stylable/webpack-plugin Use the isServer flag from the webpack configuration context in the second argument Call bundleServerLibs with the webpack config, packages to bundle, and the isServer flag Example Configuration:​ next.config.js const { StylableWebpackPlugin, applyWebpackConfigStylableExcludes, bundleServerLibs } = require('@stylable/webpack-plugin'); /* * single optimizer for NextJS multiple builds * in order to sync client/server namespaces */ const StylableOptimizer = require('@stylable/optimizer').StylableOptimizer; const stylableOptimizer = new StylableOptimizer(); module.exports = { webpack: (config, { isServer }) => { /* exclude Stylable files from all other loaders */ applyWebpackConfigStylableExcludes(config); /* causes provided packages to be bundled (not external) */ bundleServerLibs(config, new Set(['PACKAGE1', 'PACKAGE2'], isServer)); /* add the Stylable plugin to the webpack configuration */ config.plugins.push( new StylableWebpackPlugin({ /* let NextJS handle assets */ filterAssets: () => false, /* output CSS to the correct location */ filename: 'static/css/stylable.[contenthash].css', /* a shared optimizer instance */ optimizer: stylableOptimizer, }) ); return config; }, };","s":"Using 3rd-party stylesheets","u":"/docs/getting-started/nextjs-integration","h":"#using-3rd-party-stylesheets","p":63},{"i":68,"t":"If your NextJS project is configured to work with TypeScript, see our page on integrating Stylable with TypeScript.","s":"TypeScript integration","u":"/docs/getting-started/nextjs-integration","h":"#typescript-integration","p":63},{"i":70,"t":"Support for Next.js App directory is experimental. There are two settings that are required to integrate Stylable with the App directory mode: set cssInjection:css in order to force CSS to be served as a static CSS file in dev mode. This is required because App directory mode defaults to React server render, and Stylable defaults to injecting CSS via Javascript in development which doesn't reach the browser. set experimentalAttachCssToContainingChunks:true to change the way the generated CSS asset is attached to Webpack chunks in order for Next.js to pick it up as a CSS module and not a JavaScript module. Example Configuration:​ next.config.js const { StylableWebpackPlugin, applyWebpackConfigStylableExcludes } = require('@stylable/webpack-plugin'); /* * single optimizer for NextJS multiple builds * in order to sync client/server namespaces */ const StylableOptimizer = require('@stylable/optimizer').StylableOptimizer; const stylableOptimizer = new StylableOptimizer(); module.exports = { webpack: (config) => { /* exclude Stylable files from all other loaders */ applyWebpackConfigStylableExcludes(config); /* add the Stylable plugin to the webpack configuration */ config.plugins.push( new StylableWebpackPlugin({ /* let NextJS handle assets */ filterAssets: () => false, /* output CSS to the correct location */ filename: 'static/css/stylable.[contenthash].css', /* a shared optimizer instance */ optimizer: stylableOptimizer, /* serve CSS as a bundled asset */ cssInjection: 'css', /* attach CSS to every chunk containing a Stylable stylesheet, instead of to entry chunks */ experimentalAttachCssToContainingChunks: true, }) ); return config; }, };","s":"App directory","u":"/docs/getting-started/nextjs-integration","h":"#app-directory","p":63},{"i":72,"t":"Stylable Intelligence is an extension implementing the Language Server Protocol that provides IDE support for Stylable. It currently includes: Syntax highlighting Code completion Go to definition Diagnostics","s":"Stylable Intelligence","u":"/docs/getting-started/tooling/stylable-intelligence","h":"","p":71},{"i":74,"t":"You can install Stylable Intelligence from the Visual Studio Code market: In Visual Studio Code, click the Extensions icon to open the market. In the search field, enter Stylable Intelligence. Install the extension and reload the window when prompted.","s":"Installation","u":"/docs/getting-started/tooling/stylable-intelligence","h":"#installation","p":71},{"i":76,"t":"Because stylable-intelligence registers .st.css files as Stylable and not CSS, certain CSS extensions may not work until they explicitly add Stylable support. The stylable-intelligence extension for VSCode is compatible with the following CSS extensions: CssTriggers(^0.4.0) - A VSCode extension that adds inline decoration to CSS properties to indicate their costs. If you are using an extension that you would like to add to this list, let us know and we'd be happy to help.","s":"IDE extensions","u":"/docs/getting-started/tooling/stylable-intelligence","h":"#ide-extensions","p":71},{"i":78,"t":"Because Stylable files are not recognized as CSS, we proxy the CSS Language Server through stylable-intelligence. Most basic features are already supported, but if you notice anything strange, let us know. note Future plans include: More Language Server features. Support for JetBrains IDEs (WebStorm, IntelliJ). Currently supported only in VSCode.","s":"CSS functionality","u":"/docs/getting-started/tooling/stylable-intelligence","h":"#css-functionality","p":71},{"i":80,"t":"@stylable/cli is a low-level utility used for working with Stylable projects directly. It lets you: Build and transform stylesheets into JavaScript modules Generate an entry index file to help consume a published project","s":"CLI","u":"/docs/getting-started/tooling/cli","h":"","p":79},{"i":82,"t":"NPM Yarn npm install @stylable/cli --save-dev yarn add @stylable/cli -D","s":"Installation","u":"/docs/getting-started/tooling/cli","h":"#installation","p":79},{"i":84,"t":"After installing @stylable/cli, the stc command will be available, running stc --help will provide a brief description for the options available. stc accepts CLI arguments or a Stylable configuration file.","s":"Using the CLI","u":"/docs/getting-started/tooling/cli","h":"#using-the-cli","p":79},{"i":86,"t":"Option Alias Description Default Value --version v show CLI version number boolean --rootDir root directory of project cwd --srcDir source directory relative to root ./ --outDir target directory relative to root ./ --indexFile filename of the generated index false --cjs output commonjs modules (.js) false --esm output esm modules (.mjs) false --css output transpiled css files (.css) false --stcss output stylable source files (.st.css) false --dts output definition files for the stylable source files (.st.css.d.ts) false --dtsSourceMap output source-maps for the definitions of stylable source files (.st.css.d.ts.map) true if --dts is true, otherwise false --watch w enable watch mode false --config c The path to a config file specifying how to build and output Stylable stylesheets The directory containing the config file is assumed to be the \"rootDir\" for the project named \"stylable.config.js\" --useNamespaceReference unsr mark output stylable source files with relative path for namespacing purposes (*) false --customGenerator path of a custom index file generator - --ext extension of stylable css files .st.css --cssInJs output transpiled css into the js module false --cssFilename pattern of the generated css file [filename].css --injectCSSRequest icr add a static import for the generated css in the js module output false --namespaceResolver nsr node request to a module that exports a stylable resolveNamespace function @stylable/node --require r require hook to execute before running - --optimize o removes: empty nodes, stylable directives, comments false --minify m minify generated css false --log verbose log false --diagnostics print verbose diagnostics true --diagnosticsMode determine the diagnostics mode. if strict process will exit on any exception, loose will attempt to finish the process regardless of exceptions false --help h Show help boolean","s":"CLI Arguments","u":"/docs/getting-started/tooling/cli","h":"#cli-arguments","p":79},{"i":88,"t":"To automatically generate an index file that acts as an export entry for stylable API from your project, use the --inedexFile flag: stc --srcDir=\"./src\" --outDir=\"./dist\" --indexFile=\"index.st.css\"","s":"Generating an index file","u":"/docs/getting-started/tooling/cli","h":"#generating-an-index-file","p":79},{"i":90,"t":"Exporting a Generator named export class from a JavaScript file will allow it to be used as a customGenerator. Usually this generator will inherit from our base generator class and override the generateReExports and generateIndexSource methods. This example demonstrates the default generator behavior (only exports stylesheet roots): import { Generator as Base, ReExports } from '@stylable/cli'; export class Generator extends Base { public generateReExports(filePath): ReExports { return { root: this.filename2varname(filePath), parts: {}, keyframes: {}, stVars: {}, vars: {}, }; } protected generateIndexSource(indexFileTargetPath: string) { const source = super.generateIndexSource(indexFileTargetPath); return '@st-namespace \"INDEX\";\\n' + source; } }","s":"Control exposed API","u":"/docs/getting-started/tooling/cli","h":"#control-exposed-api","p":79},{"i":92,"t":"Whenever a TypeScript file imports a Stylable stylesheet, you must provide a type for it. This is because TypeScript has no way of knowing what's inside Stylable *.st.css files. Import example import { classes } from './button.st.css'; // requires typings","s":"TypeScript","u":"/docs/getting-started/typescript-integration","h":"","p":91},{"i":94,"t":"Stylable can generate a declaration file for each stylesheet. This approach has the advantage of providing exact typing information for each individual stylesheet runtime API.","s":"Generating types per stylesheet","u":"/docs/getting-started/typescript-integration","h":"#generating-types-per-stylesheet","p":91},{"i":96,"t":"Stylable generates two kinds of type-related files: *.d.ts provides typing for the stylesheet runtime API. *.d.ts.map provides mapping from the generated .d.ts file to the original .st.css stylesheet. This allows jumping to definitions in the original source straight from the TypeScript file. Type definitions that are generated adjacent to the stylesheet are automatically detected and used by TypeScript. This can cause bloat in the project source files, however. To prevent clutter in your project, we recommend that you generate all stylesheet typings to a single directory. /* type files grouped in st-types folder */ ├── src | ├── button.st.css - source stylesheet | └── button.tsx - component file | └── st-types ├── button.st.css.d.ts - type definition └── button.st.css.d.ts.map - type definition source-map You'll then need to configure TypeScript to use that directory. To do this, modify your tsconfig.json to specify two rootDirs - your source files, and the generated typings (learn more about this by reading the tsconfig.json documentation) like this: tsconfig.json { \"compilerOptions\": { \"rootDirs\": [\"./src\", \"./st-types\"], }, } tip We recommend adding the generated *.st.css.d.ts and *.st.css.d.ts.map files to your .gitignore file, and to only include them in your published packages.","s":"Generated files","u":"/docs/getting-started/typescript-integration","h":"#generated-files","p":91},{"i":98,"t":"To generate type definition files to the st-types directory using the stc CLI, provide it with the --srcDir, --outDir and --dts flags: stc --srcDir=\"src\" --outDir=\"st-types\" --dts Source maps are generated by default when generating .d.ts files. If these are not wanted, the --dtsSourceMap flag should be set to false. tip Use stylable.config.js as a central location to share common Stylable configurations across tools and integrations.","s":"Using the CLI","u":"/docs/getting-started/typescript-integration","h":"#using-the-cli","p":91},{"i":100,"t":"For projects that are already using one of our bundler integrations (webpack or rollup), you can configure the Stylable plugin to auto-generate types per stylesheet. This means that as you are working in your normal development flows, types will be updated in the background, and be available in your IDE. This functionality is dependant on a stylable.config.js file that includes configuration for generating .d.ts files. stylable.config.js //@ts-check const { typedConfiguration } = require('@stylable/cli'); exports.stcConfig = typedConfiguration({ options: { srcDir: './src', outDir: './st-types', dts: true, }, }); To activate this functionality in the bundler, configure the Stylable plugin with { stcConfig: true }. // create a webpack plugin instance new StylableWebpackPlugin({ stcConfig: true }); // create a rollup plugin instance stylableRollupPlugin({ stcConfig: true });","s":"Using a bundler","u":"/docs/getting-started/typescript-integration","h":"#using-a-bundler","p":91},{"i":102,"t":"If you choose not to generate .d.ts typings for each stylesheet, you'll have to include in your project a general purpose *.st.css global declaration. This provides a broad signature of a Stylable stylesheet. To do this, create a globals.d.ts file in your ./src directory and add the following declaration: globals.d.ts declare module '*.st.css' { export * from '@stylable/runtime/stylesheet'; const defaultExport: unknown; export default defaultExport; }","s":"Global definition","u":"/docs/getting-started/typescript-integration","h":"#global-definition","p":91},{"i":104,"t":"If your project generates .d.ts typings for each stylesheet but you're consuming a package that published .st.css files without typings, you will have to declare global typings for that specific package. globals.d.ts declare module 'third-party-package/*.st.css' { export * from '@stylable/runtime/stylesheet'; const defaultExport: unknown; export default defaultExport; }","s":"Typing 3rd-party stylesheets","u":"/docs/getting-started/typescript-integration","h":"#typing-3rd-party-stylesheets","p":91},{"i":106,"t":"If you publish any *.st.css files in your package, you should also publish the .d.ts and .d.ts.map files adjacent to them. This practice leads to a better experience for users consuming your project. stc --srcDir=\"src\" --outDir=\"dist\" --stcss --dts","s":"Publishing","u":"/docs/getting-started/typescript-integration","h":"#publishing","p":91},{"i":108,"t":"The Stylable Webpack integration provides development, build, and bundle capabilities.","s":"Webpack","u":"/docs/getting-started/webpack-integration","h":"","p":107},{"i":110,"t":"Install the @stylable/webpack-plugin as a dev dependency in your local project. Using npm: npm install @stylable/webpack-plugin --save-dev Using Yarn: yarn add @stylable/webpack-plugin --dev","s":"Install","u":"/docs/getting-started/webpack-integration","h":"#install","p":107},{"i":112,"t":"In webpack.config, add the StylableWebpackPlugin to set up Stylable: const { StylableWebpackPlugin } = require('@stylable/webpack-plugin'); // webpack config { plugins: [new StylableWebpackPlugin()], } For more information on configuring the @stylable/webpack-plugin, see the readme file.","s":"Configuration","u":"/docs/getting-started/webpack-integration","h":"#configuration","p":107},{"i":114,"t":"When coming into a project with an existing Webpack CSS integration, you will need to exclude .st.css files from any other integration. For example, to exclude Stylable from css-loader: const { StylableWebpackPlugin } = require('@stylable/webpack-plugin'); { plugins: [ new StylableWebpackPlugin() ], module: { rules: [ { test: /\\.css$/i, exclude: /\\.st\\.css?/, use: [\"css-loader\"], }, ], }, }","s":"With another CSS solution","u":"/docs/getting-started/webpack-integration","h":"#with-another-css-solution","p":107},{"i":116,"t":"Adding the webpackPlugin export field to the stylable.config.js will set as the default configuration for any Stylable Webpack plugins in the project. module.exports.webpackPlugin = function (config) { return { ...config, optimize: { shortNamespaces: true, minify: true, }, }; };","s":"stylable.config.js","u":"/docs/getting-started/webpack-integration","h":"#stylableconfigjs","p":107},{"i":118,"t":"When building a component library or an application, it is useful to define several semantic \"flavors\" of some components, for example a Button component that represents cancel.","s":"Component Variants","u":"/docs/guides/component-variants","h":"","p":117},{"i":120,"t":"In your project's Stylable stylesheet used for the commonly used components in your project (usually named project.st.css) you: Import a component stylesheet. Define a CSS class with a descriptive name like cancelButton. Extend the component on the class you just defined. project.st.css @st-import Button from \"./button.st.css\"; .cancelButton { -st-extend: Button; color: red; border: 1px solid red; }","s":"Defining a component variant","u":"/docs/guides/component-variants","h":"#defining-a-component-variant","p":117},{"i":122,"t":"A component Stylable stylesheet can use and extend component variants: comp.st.css @st-import [cancelButton] from \"./project.st.css\"; /* selector: .comp__root .project__cancelButton.button__root js value: \"project__cancelButton\" */ .root .cancelButton { } /* selector: .comp__cancel.project__cancelButton.button__root js value: \"comp__cancel project__cancelButton\" */ .cancel { -st-extends: cancelButton; } note For the .cancelButton selector, we manually added the .root class to avoid overriding cancelButton outside this scope.","s":"Use component variants in components","u":"/docs/guides/component-variants","h":"#use-component-variants-in-components","p":117},{"i":124,"t":"Stylable components should be easily stylable and themable from the outside. This means that the stylesheet describing the component CSS should be as simple and generic as possible, and should expose a clear and concise API for its internal parts. When building your components, we recommend following the guidelines below that we've collected through our work with Stylable:","s":"Stylable Component - Best Practices","u":"/docs/guides/component-best-practices","h":"","p":123},{"i":126,"t":"Try avoiding size declaration just because it offers an easier API. To override a component specifying size limitations, you would need to override multiple CSS declarations. If you do set a default size or size limitations, use em/rem units to resize to the HTML context.","s":"Avoid size declarations","u":"/docs/guides/component-best-practices","h":"#avoid-size-declarations","p":123},{"i":128,"t":"Give meaningful class names that will make sense as part of a selector. Any CSS class selector can be targeted from the outside as a pseudo-element and should be considered part of the component API. Use camelCase and avoid hyphens (-) and capital letters at the beginning. /* good */ Gallery::navbtn::label { } /* camelCase with clear pseudo-element names */ /* bad */ Gallery::gallerynavbtn { } /* it is better to reuse the generic component id */ Gallery::nav-btn { } /* don't use kebab-case - stylable exports JS */","s":"Give meaningful names","u":"/docs/guides/component-best-practices","h":"#give-meaningful-names","p":123},{"i":130,"t":"Try avoiding global-related selectors like @media or matching DOM outside the component scope like body. These would potentially cause side effects if others use them. Element type selectors should be avoided inside a component because they affect any nested component or element. The exception to this is when specifically targeting the element with child selector (for example .root > p) and not a descendant selector (for example .root p).","s":"Avoid global settings in your stylesheet","u":"/docs/guides/component-best-practices","h":"#avoid-global-settings-in-your-stylesheet","p":123},{"i":132,"t":"While internal structure does demand some CSS to work correctly, you should strive to find the minimal combination of CSS to make the component layout work as it should.","s":"Keep your layout minimal","u":"/docs/guides/component-best-practices","h":"#keep-your-layout-minimal","p":123},{"i":134,"t":"The component stylesheet should describe the bare minimum coloring to make its parts visible. Colors should be used sparingly, and just to achieve visibility. The best practice is to make sure every color used for a text across the project has a sufficiently contrasting background. .options { background: value(color1); color: value(color2); }","s":"Keep coloring to a minimum","u":"/docs/guides/component-best-practices","h":"#keep-coloring-to-a-minimum","p":123},{"i":136,"t":"Browsers add a default user agent stylesheet to provide the HTML with a default \"style\". It is tempting to \"clean up\" a button's default style in the component. But, we want our component to \"blend in\" in every context it's used. A button element in our component should look like other button tags in the context of the application where it is used. As such, when building a component, it is best to set CSS only for behaviors that must be overridden for the component to function.","s":"Keep browser defaults intact","u":"/docs/guides/component-best-practices","h":"#keep-browser-defaults-intact","p":123},{"i":138,"t":"Write low specificity selectors that will be easy to override from a parent component.","s":"Keep specificity low","u":"/docs/guides/component-best-practices","h":"#keep-specificity-low","p":123},{"i":140,"t":"It takes a more complex selector to override a high specificity selector that was defined in a component stylesheet. Override CSS only for behaviors that must be overridden for the component to function, and minimize the use of element type selectors and pseudo-elements of nested components. Styling pseudo-elements in a component creates a selector that takes more specificity to override gallery.st.css /* > directly style navBtn - a type of button selector: .comp__gallery .gallery__navBtn specificity: 0,0,2,0 */ .gallery::navbtn {} page.st.css /* > less specific than component override selector: .page__root button specificity: 0,0,1,1 */ .root button {} note For the button selector, we manually added the .root class to avoid overriding button outside this scope.","s":"Keep your selectors as simple as possible","u":"/docs/guides/component-best-practices","h":"#keep-your-selectors-as-simple-as-possible","p":123},{"i":142,"t":"A good way to validate minimal CSS is to add comments. There should be a few words clarifying why a certain declaration or rule set combination is found in the stylesheet. We recommend you justify any special overrides or interactions with a comment per this example. .link { display: block; /* override default anchor color */ color: currentColor; } This helps with maintenance and development, since we don't test CSS as thoroughly as other code.","s":"Justify your CSS declarations in comments","u":"/docs/guides/component-best-practices","h":"#justify-your-css-declarations-in-comments","p":123},{"i":144,"t":"Import CSS or Stylable variables from the project commons stylesheet. @st-import [color1, --font-small] from \"./project.st.css\"; .item { background: value(color1); font-size: var(--font-small); }","s":"Use consistent variables from a central location","u":"/docs/guides/component-best-practices","h":"#use-consistent-variables-from-a-central-location","p":123},{"i":146,"t":"When using an image element source or SVG directly in the DOM, it is not easy, and in some cases not possible, to modify the asset from outside the component using CSS. When an asset is part of the style API, it should be placed in the background of an element, allowing it to be overridden from a parent component.","s":"Keep SVG and images overridable","u":"/docs/guides/component-best-practices","h":"#keep-svg-and-images-overridable","p":123},{"i":148,"t":"Classes are the most basic building block of stylable, used to mark elements on the DOM, so those could in turn be targeted and styled via our CSS.","s":"Classes","u":"/docs/guides/handbook/class","h":"","p":147},{"i":150,"t":"A CSS class starts with a . (period) following a CSS identifier. Read more about CSS classes in the MDN documentation. game.st.css .player { background: green; } Here we create a game.st.css stylesheet and define a class named player that will color the background of the element it targets with the color green.","s":"CSS classes","u":"/docs/guides/handbook/class","h":"#css-classes","p":147},{"i":152,"t":"All CSS loaded to the browser for a given page is global, and so other stylesheets can create their own player, and conflict with our definition To resolve this, we can use a BEM methodology to namespace our player class with a unique prefix. game.st.css .game__player { background: green; } This conventions-based solution works, but is difficult to scale, requires communication and agreement, demands manual upkeep, and makes our code more verbose than it needs to be. Stylable automates the namespacing process, using a similar convention to BEM for CSS classes and other symbols (more on that in the Namespacing chapter).","s":"Resolve global conflicts","u":"/docs/guides/handbook/class","h":"#resolve-global-conflicts","p":147},{"i":154,"t":"By turning the namespacing process to an automatic one, we find ourselves needing to map the runtime classes on the DOM to the original classes we defined in our stylesheet. To access this class name mappings, we will import the stylesheet to our JavaScript, and utilize the classes object to get our desired global name. game.jsx import { classes } from './game.st.css'; console.log(classes.player); // \"game__player\"
        ; Prerequisite The example above assumes that Stylable was run as part of a build process, using one of our integrations or hooks to generate the runtime JavaScript module with the required mappings and utility functions.","s":"Runtime mapping","u":"/docs/guides/handbook/class","h":"#runtime-mapping","p":147},{"i":156,"t":"Due to the fact that these class symbols are generated from the stylesheet, but are also consumed in JavaScript, we recommend using camelCase for class names to avoid cases that require property accessors. import { classes } from \"./dialog.st.css\"; classes.okButton; // recommended classes[\"ok-button\"]; // not recommended We would further recommend to avoid using special characters that are not valid JavaScript identifiers.","s":"Naming tip","u":"/docs/guides/handbook/class","h":"#naming-tip","p":147},{"i":158,"t":"opening intro paragraph","s":"Classes","u":"/docs/guides/handbook/classes","h":"","p":157},{"i":160,"t":"syntax definition + mdn link SOME EXAMPLE explainer of example above","s":"CSS feature","u":"/docs/guides/handbook/classes","h":"#css-feature","p":157},{"i":162,"t":"In CSS, we have the ability to target native states of various elements using the pseudo-class syntax (for instance, :hover or :active). While this is very handy, as of today, CSS does not provide a way for us to define a custom state on every element. For example, we might want a registered custom state to represent a player element that has signed up for our game. We could choose to implement such a state manually by using a class selector (e.g. using a BEM modifier: .NAMESPACE--registered) or attribute selector (e.g. [data-NAMESPACE-registered]). This is a bit of a pain for several reasons. Unlike native pseudo-classes, a class or an attribute selector is not semantic, and so we lose the original intent. If a convention like BEM is used, then the semantics are conserved, but it increases the verbosity of our code. By defining our states through Stylable, we gain the benefit of validations, completions, and a consistent syntax for states.","s":"Custom State","u":"/docs/guides/handbook/custom-state","h":"","p":161},{"i":164,"t":"To define a registered state for our player class, we will use the -st-states declaration, and pass it a single state name of registered. We can then target this state using our newly-defined :registered pseudo-class, knowing it will be transformed to a valid, safe selector at build time. game.st.css .player { -st-states: registered; /* definition */ } .player:registered {} /* usage */ /* OUTPUT - namespace class and state */ .game__player {} .game__player.game--registered {} In the example above, we defined a registered boolean state that can either be targeted, or not. Let's imagine, though, that in addition to the registered state, we now want to highlight first, second, and third ranking players. We can define such a state by passing the enum parameter type to the ranking state definition, and in it, list our possible options. game.st.css .player { -st-states: registered, ranking(enum(first, second, third)); } .player:ranking(first) {} .player:ranking(second) {} .player:ranking(third) {} There are additional parameter types, as well as validators, default values, and mapping capabilities to Stylable custom states. Read more in the API reference. Conflicts with native At this point, you may have noticed that we can define states that would conflict with native CSS ones. For example, we can define a \"custom\" state called :hover that would conflict with the native :hover pseudo-class. .player { -st-states: hover; } .player:hover {} /* custom state, not the native one */ Due to this potentially confusing behavior, we strongly recommend against naming states that would conflict with native ones.","s":"Define and target","u":"/docs/guides/handbook/custom-state","h":"#define-and-target","p":161},{"i":166,"t":"Now that we have defined our states, we want to be able to toggle them at runtime in our component. game.jsx import { cssStates, classes } from \"./game.st.css\"; // create a registered first ranking player
        ; Looking at the example above, we import the cssStates function and the classes mapping from our game.st.css stylesheet. We then create a div element to represent a registered and first rank player. This example, where we manually concatenate the class and states, is quite verbose and potentially confusing. In the next chapter, we will explore Stylable's runtime feature set and see a cleaner way of working with states at runtime.","s":"Runtime toggle","u":"/docs/guides/handbook/custom-state","h":"#runtime-toggle","p":161},{"i":168,"t":"In the Import Class chapter, we saw how we can import CSS classes and target them by composing a selector to target our desired parts. In this chapter, we'll see how to extend a stylesheet to target inner parts and states. Current status: player.st.css .root { -st-states: registered, ranking(enum(first, second, third)); } .avatar {} .username {} game.st.css @st-import Player, [avatar, username] from \"./player.st.css\"; Player { background: blue; } Player .avatar { border-radius: 50%; } Player .username { text-transform: uppercase; } Previously, we manually customized the Player component by creating a selector that includes a descendant combinator between the Player and our targeted parts. This selector is based on knowledge we have about the Player component structure, but this structure might change in the future, and break our assumptions.","s":"Extend","u":"/docs/guides/handbook/extend","h":"","p":167},{"i":170,"t":"To help us abstract our selector, we'll extend the Player stylesheet to gain access to the stylesheet API, letting us target inner parts using custom pseudo-elements. We'll first set the -st-extends property with the value of the imported Player stylesheet on the local player class. game.st.css @st-import Player from \"./player.st.css\"; .player { -st-extends: Player; } Namespacing output game.st.css @st-import Player from \"./player.st.css\"; /* customizing class, local namespace */ .game__player { -st-extends: Player; } We previously saw that we can't simply target an imported stylesheet, as that would affect all instances of it. Here, by using the -st-extends property on a local class, we are scoping these customizations to the subtree of our component stylesheet.","s":"Extend a stylesheet","u":"/docs/guides/handbook/extend","h":"#extend-a-stylesheet","p":167},{"i":172,"t":"To customize a Player component instance using our local stylesheet, we will need to apply the extending local class to the instance of the component. import Player from './player.jsx'; import { st, classes } from './game.st.css'; const Game = ({ className }) => (
        );","s":"Apply the extending class","u":"/docs/guides/handbook/extend","h":"#apply-the-extending-class","p":167},{"i":174,"t":"We can now use the custom pseudo-element syntax to safely target the avatar and username parts of the Player component. game.st.css @st-import Player from \"./player.st.css\"; .player { -st-extends: Player; } .player::avatar { border-radius: 50%; } .player::username { text-transform: uppercase; } Namespacing output game.st.css @st-import Player from \"./player.st.css\"; .game__player { -st-extends: Player; } .game__player .player__avatar { border-radius: 50%; } .game__player .player__username { text-transform: uppercase; }","s":"Access inner parts","u":"/docs/guides/handbook/extend","h":"#access-inner-parts","p":167},{"i":176,"t":"Similar to how we used custom pseudo-elements to access inner parts of a component externally, we can now target custom pseudo-classes (states) of our extended parts as well. game.st.css @st-import Player from \"./player.st.css\"; .player { -st-extends: Player; } .player:ranking(first) { background: gold; } /* ... */","s":"Access a state","u":"/docs/guides/handbook/extend","h":"#access-a-state","p":167},{"i":178,"t":"Let's say that we want to turn our current avatar part, into a component to support a more complex design with separate elements for the frame and the image. To do this, we'll create a new avatar.st.css stylesheet, import it to player.st.css, and extend our avatar class with it. avatar.st.css .root {} .frame {} .image {} player.st.css @st-import Avatar from \"./avatar.st.css\"; .root { -st-states: registered, ranking(enum(first, second, third)); } .avatar { -st-extends: Avatar; } .username {} By extending a stylesheet, which in turn has a part that extends a stylesheet, we can target inner parts through multiple levels with code completion and validations. game.st.css @st-import Player from \"./player.st.css\"; .player { -st-extends: Player; } /* all player instances have an avatar with a green frame*/ .player::avatar::frame { background: green; } /* the player in the first ranking, has an avatar with a golden frame */ .player:ranking(first)::avatar::frame { background: gold; } Catch breaking changes Let's imagine a case, where the Avatar component has undergone refactoring which changed the part name frame to box. If we were using native CSS, and were aware of this change, we could try and manually locate all instances of frame and replace them with box. But if we were to miss an instance, CSS would provide no indication of the problem. Because we used Stylable to declare that a class extends a stylesheet, and then accessed its inner parts, we are assured that the interface exists and is valid, and if this interface were to change, an error would be reported at build-time and in the IDE. In this chapter we saw how once we extend a stylesheet, we can target inner parts and states using native-like syntax, while benefiting from language service features and diagnostics. Next we'll start talking about features that have to do with style templating, beginning with variables, both native custom properties, and Stylable's build-time variables. You've reached the end of the handbook, so far This handbook is a work in progress and is not yet complete. You can track the plan and progress for it in this issue","s":"Extend multiple levels","u":"/docs/guides/handbook/extend","h":"#extend-multiple-levels","p":167},{"i":181,"t":"This document provides an overview of Stylable and its features, and serves as a quick guide for getting started. Each chapter focuses on one core feature of Stylable, introducing a problem or need, showing how CSS might address it, and then how Stylable can be used to simplify the solution. This handbook is not a complete reference for Stylable, but merely a starting point for learning to use it.","s":"What am I reading?","u":"/docs/guides/handbook/intro","h":"#what-am-i-reading","p":179},{"i":183,"t":"Stylable is a superset of the CSS language - it introduces additional syntax to CSS to allow us to add features to styling during pre-processing time. It is designed for working with components, variants, themes, and various modern design patterns. There are different aspects to Stylable, and the tooling and capabilities that it provides:","s":"What is Stylable?","u":"/docs/guides/handbook/intro","h":"#what-is-stylable","p":179},{"i":185,"t":"The Stylable pre-processor works at build-time, meaning that we can use all of its features while writing the code. Its input is a Stylable stylesheet, and its output is valid vanilla CSS. The pre-processing it performs adds the following to CSS: Namespace all parts of CSS that can conflict so that multiple stylesheets can be loaded together safely. A module system to CSS so that individual symbols can be re-used across stylesheets. Template capabilities for creating complex design patterns using variables, mixins, and formatters. The ability to perform external customization of any component or theme by using its Style API through extensions, compositions and overrides.","s":"Pre-processor","u":"/docs/guides/handbook/intro","h":"#pre-processor","p":179},{"i":187,"t":"We love working with TypeScript and the developer experience that it provides in terms of validations and rich language features. We aspire for Stylable to be for CSS, what TypeScript is for JavaScript, and so Stylable is in itself a type system, providing interface support for selectors, and reporting syntactic and semantic diagnostics.","s":"Type system","u":"/docs/guides/handbook/intro","h":"#type-system","p":179},{"i":189,"t":"When working in a modern IDE, a language server makes a huge difference in the development experience. For Stylable, we created the Stylable Intelligence VS Code extension to provide a better development experience through completions, definitions, hinting and more.","s":"Language server","u":"/docs/guides/handbook/intro","h":"#language-server","p":179},{"i":191,"t":"Pre-processing and language features are not all that Stylable offers. It also includes a set of tools and integrations that help develop, build, and ship better CSS: Stylable CLI - a command line interface to help build, manage, and validate stylesheets for production and CI/CD workflows. Optimization tools - Stylable has a deep awareness of how your stylesheets are used, and can optimize them to shorten names or remove dead code. Bundling - choose one of our supported bundler integrations to bundle your stylesheets for production.","s":"Tooling","u":"/docs/guides/handbook/intro","h":"#tooling","p":179},{"i":193,"t":"We modeled Stylable after TypeScript, and like TypeScript, the more complex the project and the more people it involves, the greater the value it provides. Having said that, even a single developer working on a simple, standalone project could gain a lot of value from Stylable.","s":"Who is Stylable for?","u":"/docs/guides/handbook/intro","h":"#who-is-stylable-for","p":179},{"i":195,"t":"Library authors can use Stylable to create reusable components, variants, and themes. It helps organize component and theme styling while controlling the elements and styles that are exposed as public interfaces.","s":"Component libraries","u":"/docs/guides/handbook/intro","h":"#component-libraries","p":179},{"i":197,"t":"Application creators can use Stylable to compose their own components alongside 3rd party libraries and to theme the final application to their UX and product requirements. Sounds interesting? Ready to start? Head on over to the first chapter, where we discuss classes, and what they mean in Stylable.","s":"Applications","u":"/docs/guides/handbook/intro","h":"#applications","p":179},{"i":199,"t":"In the Runtime chapter, we saw how a Stylable stylesheet's API can be imported into a JavaScript module, and how that API can be used. In this chapter, we'll see how our game example can be divided into linked stylesheet modules to provide a better development experience. Up to this point, we've talked mostly about a single stylesheet for our project (game.st.css). Now we'll explore how to organize our code across multiple stylesheets. Current status: game.st.css .board { /* ... */ } .player { -st-states: registered, ranking(enum(first, second, third)); background: blue; }","s":"Import Class","u":"/docs/guides/handbook/import-class","h":"","p":198},{"i":201,"t":"Let's refactor the player class from out of our game.st.css to be in its own stylesheet. player.st.css .root { -st-states: registered, ranking(enum(first, second, third)); background: blue; } We created a new player.st.css file above, and in it, created a new .root class. Then we moved the contents of the .player class rules to our new root class. default root class In Stylable, each component stylesheet is represented by a root class that is automatically created, even if not explicitly defined by the user. This root class is expected to be applied to the root element of the component. We can see that when we moved the player class, we also included its styling declarations. This might cause additional work in the future when trying to customize this class from the outside. base style recommendation Stylable recommends that a component's stylesheet include minimal styling - only what is crucial for the functionality of the component or defines its structure. To follow this best practice, we need a way to import the player.st.css stylesheet over to game.st.css, and perform our styling customizations there.","s":"Stylesheet root","u":"/docs/guides/handbook/import-class","h":"#stylesheet-root","p":198},{"i":203,"t":"Keep in mind that, as we saw earlier in the Namespacing chapter, classes in Stylable are automatically namespaced. This means that if we wish to target a class from another stylesheet in a selector, we need to import it to link to it. Below, we import the player.st.css stylesheet and customize it by using the @st-import at-rule, and providing it with a local name for the default export (beginning with a capital letter) and a request to the target stylesheet. Then we move any customizations out of player.st.css into game.st.css. game.st.css - moved player customization @st-import Player from \"./player.st.css\"; .board { /* ... */ } Player { background: blue; /* moved from player.st.css */ } Namespacing output game.st.css @st-import Player from \"./player.st.css\"; /* namespaced locally */ .game__board { /* ... */ } /* namespaced by player.st.css */ .player__root { background: blue; }","s":"Default import","u":"/docs/guides/handbook/import-class","h":"#default-import","p":198},{"i":205,"t":"It's important to note that a default import of a Stylable stylesheet represents a component root, and is in fact pointing to the root class of that stylesheet. Unscoped warning By importing the default export of a stylesheet and then styling it, we are potentially customizing every instance of the component across our project. It is therefore strongly recommended to scope any selector that originates from a different namespace (stylesheet) or includes native elements with a local class. @st-import Player from \"./player.st.css\"; /* report unscoped warnings */ Player {} div {} /* no warnings */ .root Player {} .root div {}","s":"Stylesheet root selector","u":"/docs/guides/handbook/import-class","h":"#stylesheet-root-selector","p":198},{"i":207,"t":"For the next step, we would like to add avatar and username parts to player.st.css. These will be applied to the inner elements of the component, and are assumed to be nested under the root class. player.st.css - added avatar and username .root { -st-states: registered, ranking(enum(first, second, third)); } .avatar {} .username {} We then proceed to bind these new classes to their matching elements in the component. player.jsx - bind avatar and username import { st, classes } from \"./player.st.css\"; const Player = ({ className }) => { return (
        ) } Now that we have these new classes, we can customize them externally through game.st.css. We do this by adding two named imports, inside square brackets, that link to our classes. game.st.css - player customization @st-import Player, [avatar, username] from \"./player.st.css\"; Player { /* paint the Player component background blue */ background: blue; } Player .avatar { /* circle avatar */ border-radius: 50%; } Player .username { /* all caps username */ text-transform: uppercase; } Namespacing output - selectors only game.st.css @st-import Player, [avatar, username] from \"./player.st.css\"; .player__root {} .player__root .player__avatar {} .player__root .player__username {}","s":"Class named import","u":"/docs/guides/handbook/import-class","h":"#class-named-import","p":198},{"i":209,"t":"One of the nice things that we gain by using these Stylable imports is that requested symbols are validated, and we'll be notified if any of the imported parts are not found. game.st.css - missing import /* report an error about an unknown \"missingImport\" symbol */ @st-import [missingImport] from \"./player.st.css\";","s":"Validations","u":"/docs/guides/handbook/import-class","h":"#validations","p":198},{"i":211,"t":"Any classes and other symbols defined in a stylesheet are automatically exported and available for import. Explicit exports We are in the process of developing explicit export support, and will expand this section once available.","s":"Exported by default","u":"/docs/guides/handbook/import-class","h":"#exported-by-default","p":198},{"i":213,"t":"Up to this point, we've only needed to import classes between stylesheets. In later chapters of this guide, we will learn how to import and use additional symbols, as well as additional import use cases from JavaScript to our stylesheet. Check out the API cheatsheet to see various @st-import examples. In this chapter, we've seen how to divide a stylesheet to separate modules, and how to customize those externally. We approached doing this by manually importing each class (default or named), and customizing them together using a selector. In the Next chapter, we'll learn how Stylable can extend stylesheets, exposing their inner parts as an API to make our lives easier.","s":"Further import use-cases","u":"/docs/guides/handbook/import-class","h":"#further-import-use-cases","p":198},{"i":215,"t":"In the Classes chapter, we briefly explained the concept of using namespacing to avoid conflicts between stylesheets. In this chapter, we'll dive deeper to see how other symbols in CSS can be rendered safe to use, and how namespacing can be controlled.","s":"Namespacing","u":"/docs/guides/handbook/namespacing","h":"","p":214},{"i":217,"t":"We've only mentioned classes up to this point, but in CSS, there are many other symbols that share the same naming context, therefore requiring namespacing to avoid potential conflicts. Symbols that Stylable namespaces: Symbol Source Target Class .okButton .NAMESPACE__okButton Custom property --bgColor --NAMESPACE-bgColor Keyframes @keyframes slide @keyframes NAMESPACE__slide Layer @layer theme @layer NAMESPACE__theme Container container: panel container: NAMESPACE__panel note Stylable does not namespace id, custom-element, attribute, or other symbols at the moment, but may add additional symbol namespacing support in the future.","s":"Supported symbols","u":"/docs/guides/handbook/namespacing","h":"#supported-symbols","p":214},{"i":219,"t":"In some cases, we might want to avoid namespacing for a specific symbol. For example: To style a third-party component that is using pre-determined global class names. To expose a persistent, globally-namespaced API for non-Stylable consumers that are using our project.","s":"Global","u":"/docs/guides/handbook/namespacing","h":"#global","p":214},{"i":221,"t":"To avoid namespacing on classes in a selector, wrap those classes with a :global(...) pseudo-class. game.st.css .player:global(.highlight) { background: yellow; } /* OUTPUT */ .game__player.highlight { background: yellow; } caution Classes used within the :global(...) pseudo-class are not treated as symbols in the stylesheet, and are not exported. This means that they are not available for use in other stylesheets or in the runtime JavaScript module.","s":"Disable in selector","u":"/docs/guides/handbook/namespacing","h":"#disable-in-selector","p":214},{"i":223,"t":"We can avoid namespacing for all symbols (except classes) by using the st-global() function: @property st-global(--bgColor) - read more @keyframes st-global(slide) - read more @layer st-global(theme) - read more container: st-global(panel) - read more Unlike the other symbols that are mapped from a local name to their global one, when we map a class using -st-global, we can define a global selector that will replace it. .player { -st-global: '.myGame__player'; } Notice that in this case, we are mapping our player class to a .myGame__player class selector. This is because classes can be mapped to any selector, including multiple classes, elements, attributes, and other CSS selector parts.","s":"Defining global symbols","u":"/docs/guides/handbook/namespacing","h":"#defining-global-symbols","p":214},{"i":225,"t":"By default, namespacing is derived in Stylable using the stylesheet filename, but in some edge cases we might want to override this behavior. To do so, we can use the @st-namespace 'OverrideNamespace'; definition. Click here to read more about the namespace API.","s":"Stylesheet level namespacing","u":"/docs/guides/handbook/namespacing","h":"#stylesheet-level-namespacing","p":214},{"i":227,"t":"On a more general level, we can have granular control of Stylable's namespacing process by passing a custom namespace resolver to Stylable at initialization using configuration.","s":"Project level namespacing","u":"/docs/guides/handbook/namespacing","h":"#project-level-namespacing","p":214},{"i":229,"t":"In the previous chapter, we saw brief examples of mapping our classes local names to their global namespaced names at runtime, as well as the cssStates utility function to activate their states. In this chapter, we'll explore the runtime features of Stylable and their usage. One of the core ideas behind Stylable is to try and shift as much of the work as possible from runtime to build time to increase performance and end-user experience. However, in some instances, we need to do additional work in JavaScript. For example, we need to: Bind classes to views Activate states Set custom property values Dynamically generate CSS","s":"Runtime","u":"/docs/guides/handbook/runtime","h":"","p":228},{"i":231,"t":"The namespacing chapter covered the basics of namespacing in Stylable, and in it, we saw that in Stylable, classes, custom-properties, keyframes, layers, and containers all receive namespacing to avoid conflicts.","s":"Mapped symbols","u":"/docs/guides/handbook/runtime","h":"#mapped-symbols","p":228},{"i":233,"t":"import { classes, // class mapping vars, // custom properties mapping keyframes, // keyframes mapping layers, // layer mapping containers, // container mapping } from \"./game.st.css\";","s":"Import example","u":"/docs/guides/handbook/runtime","h":"#import-example","p":228},{"i":235,"t":"Import Type Source Target classes Class .player .NS__player vars Custom property --player1Color --NS-player1Color keyframes Keyframes @keyframes slide @keyframes NS__slide layers Layer @layer theme @layer NS__theme containers Container container: panel container: NS__panel","s":"Runtime namespaced names","u":"/docs/guides/handbook/runtime","h":"#runtime-namespaced-names","p":228},{"i":237,"t":"Up to this point, all use cases we saw for wiring elements were simplified or overly verbose. In the following example we can see that we are binding the player class to the player view, as well as activating the registered state. import { classes, stStates } from \"./game.st.css\";
        className={classes.player + ' ' + stStates({registered: true})}
        ","s":"Apply class and state","u":"/docs/guides/handbook/runtime","h":"#apply-class-and-state","p":228},{"i":239,"t":"We can use the st() function to simplify this process, by passing it the class name as its first argument, and the activated states as its second argument. import { st, classes } from './game.st.css';
        ; There are cases in which we would like to add additional classes to an element. For example, a component might want to accept an external class name to allow for custom styling. Below, we can see such a case, where we bind a class (player), activate a state (registered), and add an external class from props for customization purposes. game.jsx import { st, classes } from './game.st.css'; const Game = ({ className }) => { return (
        ); } For further details on the runtime API, see the runtime reference.","s":"st() function","u":"/docs/guides/handbook/runtime","h":"#st-function","p":228},{"i":241,"t":"We have yet to cover Stylable build variables, but seeing as they expose their value in runtime, we'll cover them here briefly. As opposed to the native runtime symbols we saw namespaced above, Stylable build variables do not require namespacing, as they are transpiled away at build time. In this case, the runtime export maps variables to their defined values. import { stVars // Stylable build variables } from \"./game.st.css\"; // runtime namespaced names stVars.boardBackgroundColor; // \"green\"","s":"Stylable build variables","u":"/docs/guides/handbook/runtime","h":"#stylable-build-variables","p":228},{"i":243,"t":"Follow these steps for a smooth transition. Each step is explained in more detail below. Update dependencies Update global typings Update .st.css file imports Update usage in React components Update tests","s":"Suggested steps of migration","u":"/docs/guides/migration-v3","h":"","p":242},{"i":245,"t":"Ensure you have v3 Stylable dependencies available. You may need to update your package.json or ensure that other dependencies bring you v3 Stylable: @stylable/cli @stylable/core @stylable/runtime @stylable/node @stylable/webpack-plugin tip all Stylable packages in v3 are scoped under the @stylable namespace. if you have dependencies like stylable (without scope), it is the old one and should be changed to scoped version.","s":"Update dependencies","u":"/docs/guides/migration-v3","h":"#update-dependencies","p":242},{"i":247,"t":"If TypeScript is used in the project, we recommend updating the global typings (usually globals.d.ts) with an .st.css module declaration: declare module '*.st.css' { const stylesheet: import('@stylable/runtime').RuntimeStylesheet; export = stylesheet; } This way the TypeScript compiler will help refactor most of the required changes and provide typings for other Stylable use cases.","s":"Update global typings","u":"/docs/guides/migration-v3","h":"","p":242},{"i":249,"t":"Prior to v2 all .st.css files would export a default style function. In v2 this has changed: .st.css files now export a named object. List of all exported keys: import { st, // alias to `style` classes, cssStates, keyframes, namespace, stVars, style, vars, } from './style.st.css'; This means that all imports of .st.css files have to be changed, for example: -import style from './Component.st.css'; +import { st, classes, /* ... */ } from './Component.st.css'; However, most often { st, classes } is enough: import { st, classes } from './Component.st.css'; tip .st.css files export a style function and an alias to it - st. It is recommended to use st in order to avoid name clashing with other variables (for example, some other inline style).","s":"Update .st.css file imports","u":"/docs/guides/migration-v3","h":"#update-stcss-file-imports","p":242},{"i":251,"t":"Stylable now localizes CSS Custom Properties. This means that any usage of Custom Proprties (e.g. --prop) should now be incorparated in the component code. See the docs about CSS custom properties for usage examples.","s":"CSS custom properties","u":"/docs/guides/migration-v3","h":"#css-custom-properties","p":242},{"i":253,"t":"Once .st.css imports are updated, React components should be updated too: -
        +
        There are subtle but very important nuances in this change. Stylable v1 used spread pattern. It would take the output of style('root', states, this.props) function and spread it on component. This way one or more props would be applied to the component. Thus, code that looks like this:
        once evaluated, would behave like this:
        Stylable v2 and v3 usage is like so: className={st(classes.root, states, this.props.className)} There is no props spreading anymore and Stylable requires only className to be used. However, if you were relying on the props spread pattern, in v2 and v3 you might find some props missing. Therefore, with Stylable v3 it is up to you to apply any additional props:
        Stylable v1 style() would accept unscoped css class name as a string This is no longer acceptable in Stylable v2 or v3, for example: -
        +
        note that classes.root comes from .st.css, which is the correct way to import class names. Similar scoping is applied to css variables too, imported from vars Note: find more details and examples in our Runtime reference.","s":"Update usage in React components","u":"/docs/guides/migration-v3","h":"#update-usage-in-react-components","p":242},{"i":255,"t":"If you were using @stylable/dom-test-kit in Stylable v1, it's usage is slightly different in v2 and v3: import { StylableDOMUtil } from '@Stylable/dom-test-kit'; -import style from './Component.st.css'; +import * as styleSheet from './Component.st.css'; -const StylableDOMUtil = new StylableDOMUtil(style); +const StylableDOMUtil = new StylableDOMUtil(styleSheet); Stylable v2 and v3 StylableDOMUtil expects to receive an argument which is the whole stylesheet exported from a .st.css file Prior to v2 it was only one thing - the style function.","s":"Update tests","u":"/docs/guides/migration-v3","h":"#update-tests","p":242},{"i":257,"t":"The purpose of this document is to help migrate projects using Stylable to v5. We have taken the opportunity of node dropping LTS support for v12 and we have decided to include a number of additional breaking changes to the v5 release. These changes are primarily to the programmatic API of Stylable and not to user facing features, syntax or integrations. You can find the plan for this major version here.","s":"Stylable v5","u":"/docs/guides/migration-v5","h":"","p":256},{"i":260,"t":"All diagnostics in @stylable/core had diagnostics code added, and were reviewed for consistency. Many diagnostics have had their severity increased to error. We plan on starting to map out the diagnostics in this site to help users understand what they are seeing, and why it happened.","s":"Diagnostics overhaul","u":"/docs/guides/migration-v5","h":"#diagnostics-overhaul","p":256},{"i":262,"t":"In the past, Stylable exposed all of its functionalities as public facing APIs. Over time, this has proven difficult to maintain and develop further, and so we have decided to limit what Stylable exposes, and to segment its APIs under a few different namespaces. In addition, most APIs have been refactored to match our new programmatic API model. API changes​ The following APIs have been changed: StylableMeta renamed rawAst to sourceAst and outputAst to targetAst The Stylable constructor now accepts options as an object (similar to Stylable.create() options) The following APIs have been removed: The Stylable.create() method has been removed StylableMeta removed ast field StylableTransformer is no longer considered public API, there relevant functionality has been moved to stylable.transform, stylable.transformSelector, etc. custom pseudo state parameter type tag has been removed - can be replaced by -st-states: stateName(string) (see issue) Missing APIs?​ If we have removed an API that you have found useful, and provided no alternative, please let us know by opening an issue over at GitHub.","s":"Reducing public facing APIs","u":"/docs/guides/migration-v5","h":"#reducing-public-facing-apis","p":256},{"i":265,"t":"The @stylable/cli stc command now has no default output defined, previously this was set to emit .cjs files. If you were using the stc command without the --cjs flag, you will need to update your code to use the new default output If were explictly setting the output to not emit .cjs files (e.g. --no-cjs or --cjs=false), you can now remove this parameter from your command","s":"Default arguments changed","u":"/docs/guides/migration-v5","h":"#default-arguments-changed","p":256},{"i":267,"t":"The @stylable/cli stc command now supports building an indexFile and other outputs (.js, .css, .st.css, etc.) at once. If you were previously running separate commands to build the index file and other outputs, you can now run a single command to build them all at once","s":"Build index file and other outputs simultaneously","u":"/docs/guides/migration-v5","h":"#build-index-file-and-other-outputs-simultaneously","p":256},{"i":269,"t":"The goal of the project file is to contain the CSS commons for the project, including variables, component variants and shared classes. In the following code, you can see a project with: 2 color, 2 font and 1 spacing size variables 1 Button component variant named cancelButton 1 shared class for emphasisBox project.st.css :vars { color1: #f012be; color2: #ff4136; fontbig: 2rem; fontsmall: 1rem; spacing: 6px; } @st-import Button from \"./button/button.st.css\"; .cancelButton { -st-extends: Button; } .emphasisBox {} tip We recommend calling the project commons file project.st.css.","s":"Project Commons","u":"/docs/guides/project-commons","h":"","p":268},{"i":271,"t":"When building a component library or an application, it is useful to reuse classes that can be shared across components to achieve common CSS with lower specificity.","s":"Shared Classes","u":"/docs/guides/shared-classes","h":"","p":270},{"i":273,"t":"In the commons stylable stylesheet of your project (usually named project.st.css), you define a CSS class with a descriptive name like emphasisBox. project.st.css .emphasisBox { background: pink; color: white; }","s":"Defining a shared class","u":"/docs/guides/shared-classes","h":"#defining-a-shared-class","p":270},{"i":275,"t":"A component's Stylable stylesheet can use and extend shared classes: comp.st.css @st-import [emphasisBox] from \"./project.st.css\"; /* selector: .comp__root .project__emphasisBox js value: \"project__emphasisBox\" */ .root .emphasisBox {} /* selector: .comp__messageBox.project__emphasisBox js value: \"comp__messageBox project__emphasisBox\" */ .messageBox { -st-extends: emphasisBox; } note For the .emphasisBox selector, we manually added the .root class to avoid overriding emphasisBox outside this scope.","s":"Use shared classes in components","u":"/docs/guides/shared-classes","h":"#use-shared-classes-in-components","p":270},{"i":278,"t":"selector: query to target elements in the DOM property: Name of the declaration (e.g. color) declaration: CSS property paired with a value declaration Block: List of CSS declarations ruleset: CSS declaration block paired with a selector See MDN How CSS is structured and css-tricks Ruleset Terminology for detailed explanation of CSS naming and structure.","s":"CSS Terminology","u":"/docs/references/cheatsheet","h":"#css-terminology","p":276},{"i":280,"t":"Syntax that is unique to Stylable or extended from CSS.","s":"Syntax","u":"/docs/references/cheatsheet","h":"#syntax","p":276},{"i":282,"t":"Syntax Explanations .x {} Class selector (api) x {} Element type selector (api) :x {} Pseudo-class or custom state selector (api) ::x {} Pseudo-element or custom-element selector (api) :--x {} custom selector (api) :global() {} disables selector namespacing (api)","s":"Selectors","u":"/docs/references/cheatsheet","h":"#selectors","p":276},{"i":284,"t":"Syntax Explanations @st-import X from './y.st.css'; Import stylesheet's root (api) @st-import [x, y] from './y.st.css'; Import named exports (api) @st-import X, [y, z] from './y.st.css'; Import default & named (api) @st-import [x as local-x] from './y.st.css'; Local alias for named import (api) @st-import [keyframes(x1, x2)] from './y.st.css'; Import keyframes (api) @st-import [layer(x1, x2)] from './y.st.css'; Import layers (api) @st-import [container(x1, x2)] from './y.st.css'; Import containers (api)","s":"Module system","u":"/docs/references/cheatsheet","h":"#module-system","p":276},{"i":286,"t":"Syntax Explanations -st-extends: Gallery; Extend an existing class (api) -st-states: stateA, stateB; Define custom pseudo-classes (api)","s":"Class extensions","u":"/docs/references/cheatsheet","h":"#class-extensions","p":276},{"i":288,"t":"Syntax Explanations :vars { x: red; y: blue; } Build time variables definition (api) prop: value(x); Insert var value into declaration (api) prop: x(arg1, arg2); Computed value from custom formatter (api) -st-mixin: x, y; Apply multiple mixins to CSS ruleset (api) -st-mixin: x(param v1, param v2); Apply mixins with override params (api)","s":"Templating","u":"/docs/references/cheatsheet","h":"#templating","p":276},{"i":290,"t":"Syntax Explanations @st-scope .x {} Scope nested rules with a given selector (api) @st-namespace \"x\"; Development display name for debugging (api)","s":"Other","u":"/docs/references/cheatsheet","h":"#other","p":276},{"i":292,"t":"Server side rendering (SSR) is an approach to serving JavaScript rendered web applications (such as React, Vue, Angular, etc...) that tries to improve time-to-paint, SEO support and more. To learn more about SSR - see this introduction post. When creating your library / application you will see that you might need to make some changes to your project publish / consumption process in order to integrate Stylable to your SSR flow.","s":"Supporting Server Side Rendering","u":"/docs/guides/ssr","h":"","p":291},{"i":294,"t":"In order to use Stylable imports from your source files in nodeJS, you will need to add @stylable/node as a dependency. Import and use its requireHook method before rendering to enable requiring Stylable stylesheets in their CommonJS module format. // server.js const { attachHook } = require('@stylable/node'); attachHook(); // enables requiring .st.css files as CommonJS // < render application ... >","s":"Transforming Stylable in the Server","u":"/docs/guides/ssr","h":"#transforming-stylable-in-the-server","p":291},{"i":296,"t":"In order to ensure full SSR compatibility, generated namespaces for all stylesheets must match exactly across all different build targets. The default Stylable namespaceResolver uses a combination of file-system path, name and version from the package.json file to create its namespace. This means that namespaces can be influenced by the published file path structure. If you choose to provide an alternative namespace resolver that does not depend on file paths as part of its namespace creation, then you can avoid the problem described below.","s":"Matching namespaces","u":"/docs/guides/ssr","h":"#matching-namespaces","p":291},{"i":298,"t":"When building a library or application for consumption in both client and server environments it is common to output multiple transpilation targets for various module systems. This means that a published project will usually have both CommonJS and ES modules, each with their own transpiled copy of the project, including the Stylable assets. This can pose a problem when trying to synchronize namespace creation for SSR.","s":"Supporting multiple transpilation targets","u":"/docs/guides/ssr","h":"#supporting-multiple-transpilation-targets","p":291},{"i":300,"t":"The Stylable CLI offers a feature that allows you to sync your namespace across dist targets by inserting a custom header comment to the start of your .st.css file. This header comment is used to normalize namespacing paths across different build targets. When using @stylable/cli to publish your source stylesheets, use the useNamespaceReference flag to mark all targets as originating from the same original source. stc --srcDir ./src --outDir ./dist/cjs --cjs --stcss --useNamespaceReference stc --srcDir ./src --outDir ./dist/esm --esm --stcss --useNamespaceReference For this to work properly, your source folder must be published along with your distribution build targets.","s":"Publishing SSR-ready source files (*.st.css)","u":"/docs/guides/ssr","h":"#publishing-ssr-ready-source-files-stcss","p":291},{"i":302,"t":"A CSS class selector is used as a generic way to target a DOM element with a matching class name. In Stylable a CSS class is used primarily as a component part, for example a .navBtn of gallery component, but can also be used as utility class or a mixin. This page goes over how Stylable handles class selector, for more details about the language feature itself, checkout the following resources: MDN class selector class selector in spec","s":"Class Selector","u":"/docs/references/class-selectors","h":"","p":301},{"i":304,"t":"To define a class symbol: set a class selector anywhere in a stylesheet. Standalone definition .navBtn {} In-selector definition /* compound */ button.navBtn.baseBtn {} /* multiple selectors */ .navBtn, .thumb {}","s":"Syntax","u":"/docs/references/class-selectors","h":"#syntax","p":301},{"i":306,"t":"The .root class has a special meaning in Stylable stylesheets. Every stylesheet has a root to represent the root element of the component or page of the stylesheet - see root reference.","s":"Root","u":"/docs/references/class-selectors","h":"#root","p":301},{"i":308,"t":"A class selector can be imported into another stylesheet with the @st-import atrule. Import class by name /* reference the navBtn class */ @st-import [navBtn] from './gallery.st.css'; /* reference multiple classes */ @st-import [navBtn, thumb] from './gallery.st.css'; /* map imported class to local name \"galleryNavBtn\" */ @st-import [navBtn as galleryNavBtn] from './gallery.st.css'; Import stylesheet root class /* get the gallery root class (default export) */ @st-import Gallery from './gallery.st.css'; /* reference the gallery named root class */ @st-import [root as GalleryRoot] from './gallery.st.css'; capitalize default stylesheet import While any valid ident can be used for the default root import, It is strongly recommend to capitalize the name to signify it represents a component element.","s":"Import and Export","u":"/docs/references/class-selectors","h":"#import-and-export","p":301},{"i":310,"t":"A class can be accessed using the classes mapping on the Stylable stylesheet runtime. import { classes } from './gallery.st.css'; // map from local name to target class name classes.part; classes.root; classes['dashed-class']; Use the class mapping to bind the stylesheet to the rendered view: React example /* gallery.jsx */ import { st, classes } from './gallery.st.css'; function Gallery(props) { return (
        ); } component instance customization In the component example above, we call the st() function in order to pass both the gallery root class and any class name provided externally in order to style the component from the outside.","s":"Runtime","u":"/docs/references/class-selectors","h":"#runtime","p":301},{"i":312,"t":"Stylable automatically namespaces any class selector according to the stylesheet it is defined in: .a {} /* OUTPUT */ .NAMESPACE__a {}","s":"Namespace","u":"/docs/references/class-selectors","h":"#namespace","p":301},{"i":314,"t":"Wrapping a class selector with :global() pseudo-class prevents namespacing: :global(.icon-heart) {} /* OUTPUT */ .icon-heart {} see global selector reference","s":"Disable in selector","u":"/docs/references/class-selectors","h":"#disable-in-selector","p":301},{"i":316,"t":"Class selector can be mapped to a custom global selector with the -st-global declaration: Map to global class .button { -st-global: '.myLib__button'; } .button:hover {} /* OUTPUT */ .myLib__button {} .myLib__button:hover {} Valid values /* global selector */ .x { -st-global: '.a' } /* compound selector of multiple classes */ .x { -st-global: '.a.b' } /* complex selector (runtime `classes.x` not exported) */ .x { -st-global: '.a .b' } /* non class selectors (runtime `classes.x` not exported) */ .x { -st-global: '[c]' } .x { -st-global: '.a[c]' } Invalid values /* empty selector */ .x { -st-global: '' } /* only a single selector is supported */ .x { -st-global: '.a, .b' }","s":"Map to global selector","u":"/docs/references/class-selectors","h":"#map-to-global-selector","p":301},{"i":318,"t":"Style pseudo-elements Use CSS mixins","s":"Related","u":"/docs/references/class-selectors","h":"#related","p":301},{"i":320,"t":"CSS container queries are used to target and style an element depending on the conditions of a container it is nested within. This page goes over how Stylable handles the container-name declaration and the @container at-rule, for more details about the language feature itself, check out the following resources: MDN CSS container queries CSS contains spec","s":"Containers","u":"/docs/references/contains","h":"","p":319},{"i":322,"t":"Container definition .panel { /* longhand */ container-name: panel; /* shorthand */ container-name: panel / inline-size; /* longhand with multiple names */ container-name: panel side; } soft definition A container name symbol is defined using the container/container-name declaration only when not explicitly defined by an import or a global @container definition. Usage @container panel (width <= 250px) { /* style nested rules */ }","s":"Syntax","u":"/docs/references/contains","h":"#syntax","p":319},{"i":324,"t":"An exported container can be imported into another stylesheet with the @st-import at-rule. Style nested container rules /* get 'panel' container definition from another stylesheet */ @st-import [container(panel)] from './x.st.css'; @container panel (width <= 150px) { /* nested container rules */ } More import examples /* map 'panel' container to local name 'x-panel' */ @st-import [container(panel as x-panel)] from './x.st.css'; /* import multiple containers */ @st-import [container(panel, header)] from './x.st.css';","s":"Import and Export","u":"/docs/references/contains","h":"#import-and-export","p":319},{"i":326,"t":"A Container definition can be accessed to generate dynamic styles using the containers mapping on the Stylable runtime stylesheet: import { containers } from './sheet.st.css'; // map to target namespaced container containers.panel;","s":"Runtime","u":"/docs/references/contains","h":"#runtime","p":319},{"i":328,"t":"Stylable automatically namespaces any container name according to the stylesheet it is defined in: .x { container: panel; } @container panel (width > 100px) {} /* OUTPUT */ .x { container: NAMESPACE__panel; } @container NAMESPACE__panel (width > 100px) {}","s":"Namespace","u":"/docs/references/contains","h":"#namespace","p":319},{"i":330,"t":"In some cases the default namespace behavior is unwanted. In such cases, st-global can be used to set a container name as global: .x { container: st-global(panel); } @container st-global(panel) (width > 100px) {} /* OUTPUT */ .x { container: panel; } @container panel (width > 100px) {} ::note global without symbol deinition Setting st-global around the container name in either the declaration or container query only references a global container name, without creating a symbol that can later be imported or referenced. :: To register a global container name symbol, that can be imported and referenced by other stylesheets, use the @container at-rule with no body or query: /* global panel container name definition */ @container st-global(panel); .x { container: panel; } @container panel (width > 100px) {} /* OUTPUT */ .x { container: panel; } @container panel (width > 100px) {}","s":"Disable namespace","u":"/docs/references/contains","h":"#disable-namespace","p":319},{"i":332,"t":"CSS custom property is used to define and re-use variables that participate in the cascade, and to dynamically change their values at runtime. This page goes over how Stylable handles custom properties, for more details about the language feature itself, checkout the following resources: MDN custom properties MDN @property MDN var() MDN - Using CSS custom properties Custom properties in spec Smashing Magazine - It's Time To Start Using CSS Custom Properties","s":"Custom Property","u":"/docs/references/css-vars","h":"","p":331},{"i":334,"t":"A CSS custom property name must start with the -- prefix.","s":"syntax","u":"/docs/references/css-vars","h":"#syntax","p":331},{"i":336,"t":"A custom property can be referenced from a declaration property or within a value var() call: .a { /* set */ --x: green; } .a .b { /* get */ color: var(--x); } .b { /* fallback to yellow if property is unset */ color: var(--notSet, yellow); /* fallback to --x if property is unset */ color: var(--notSet, var(--x)); } no explicit definition A custom property can be set and used without an explicit @property definition","s":"Get / Set","u":"/docs/references/css-vars","h":"#get--set","p":331},{"i":338,"t":"Use @property at-rule to register a configuration for a runtime property: /* runtime type definition */ @property --x { syntax: ''; /* type */ inherits: true; /* is taken from cascade */ initial-value: green; /* default when unset */ } .b { /* get green from initial value if --x is unset */ color: var(--x); }","s":"Runtime definition","u":"/docs/references/css-vars","h":"#runtime-definition","p":331},{"i":340,"t":"To define a custom property to be used outside of a stylesheet, without explicitly registering its runtime type or using it as a declaration property or value, you can define the @property at-rule without a body: @property --x; removed at build A property with no configuration body is removed at build-time as it serves no purpose during runtime","s":"Build only definition","u":"/docs/references/css-vars","h":"#build-only-definition","p":331},{"i":342,"t":"Stylable variables (build vars) and CSS custom properties offer different capabilities, and as such serve different use-cases. Stylable variables exist only in your source code, and get replaced during build. They serve well for calculations that are not supported by native CSS, reducing code repetition, increasing readability and can benefit any static theme or styling without incurring any runtime performance cost. CSS custom properties on the other hand do incur a very small runtime cost, but offer the ability to override their values during runtime, allowing for native CSS dynamic styling.","s":"Comparison to build vars","u":"/docs/references/css-vars","h":"#comparison-to-build-vars","p":331},{"i":344,"t":"An exported custom-property can be imported into another stylesheet with the @st-import at-rule. @st-import [--x] from \"./common.st.css\"; .a { /* get --x value */ color: var(--x); } .b { /* set/override --x value */ --x: gold; /* get override 'gold' value */ background-color: var(--x); /* gold */ }","s":"Import and Export","u":"/docs/references/css-vars","h":"#import-and-export","p":331},{"i":346,"t":"A custom property can be used dynamically in JavaScript. comp.st.css @property --x; comp.jsx import { vars } from './comp.st.css'; /* inline style set property value */
        ;","s":"Runtime","u":"/docs/references/css-vars","h":"#runtime","p":331},{"i":348,"t":"Stylable automatically namespace any CSS custom property name according to the stylesheet it is defined in. @property --x { syntax: ''; inherits: true; initial-value: green; } .a { --x: var(--x); } /* OUTPUT */ @property --NAMESPACE-x { syntax: ''; inherits: true; initial-value: green; } .NAMESPACE__a { --NAMESPACE-x: var(--NAMESPACE-x); }","s":"Namespace","u":"/docs/references/css-vars","h":"#namespace","p":331},{"i":350,"t":"In cases where the default namespace behavior is not wanted, st-global can be used to mark a custom property definition as global. @property st-global(--x) { syntax: ''; inherits: true; initial-value: green; } .a { --x: var(--x); } /* OUTPUT */ @property --x { syntax: ''; inherits: true; initial-value: green; } .NAMESPACE__a { --x: var(--x); }","s":"Disable namespace","u":"/docs/references/css-vars","h":"#disable-namespace","p":331},{"i":352,"t":"You use custom selectors to define an alias that can match complex selectors. For example, a specific type of button within a form that appears only when hovered can be defined as a custom selector. By defining the button as a custom selector with its own name, the button is exposed in the API and available for use by using just the custom selector name. You could also use custom selectors to define a group of selectors with one name. For example, you can access all the headings on a page as one custom selector. This could be useful if you want to style just their color the same.","s":"Custom Selector","u":"/docs/references/custom-selectors","h":"","p":351},{"i":354,"t":"The following code maps the alias name controlBtn that matches any .btn CSS class nested under the .controls CSS class. comp.st.css @custom-selector :--controlBtn .controls .btn; /* selector: .comp__controls .comp__btn */ :--controlBtn { border: 1px solid grey; } /* selector: .comp__controls .comp__btn:hover */ :--controlBtn:hover { border-color: red; }","s":"Usage","u":"/docs/references/custom-selectors","h":"#usage","p":351},{"i":356,"t":"Custom selectors generate a pseudo-element. So, for example, importing a stylesheet into another stylesheet enables access to the controlBtn pseudo-element. In this example, the stylesheet comp.st.css from the previous example is imported into this stylesheet. page.st.css @st-import Comp from \"./comp.st.css\"; /* selector: .comp__root .comp__controls .comp__btn */ Comp::controlbtn { background: gold; } caution If a custom-selector alias conflicts with a local CSS class name, the exposed pseudo-element targets the custom-selector. However, the exported CSS class is still exported to JavaScript.","s":"Expose pseudo-element","u":"/docs/references/custom-selectors","h":"#expose-pseudo-element","p":351},{"i":358,"t":"The following examples demonstrate how to effectively use custom selectors in Stylable.","s":"Use cases","u":"/docs/references/custom-selectors","h":"#use-cases","p":351},{"i":360,"t":"Some components might contain nested instances of themselves because they're a container or a \"recursive\" component. For example, a tree component might render itself. If the component exposes any pseudo-elements, it is a good practice to define them as custom selectors with child selectors to avoid affecting the inner parts of internal instances. The following example shows how a tree component exposes an icon. tree.st.css @custom-selector :--icon .root > .icon; Here you can use the icon custom selector from the outside just like you would use any other pseudo-element. panel.st.css @st-import Tree from \"./tree.st.css\"; /* selector: .tree__root > .tree__icon */ Tree::icon { background: yellow; /* paints the icons all the way down the tree */ }","s":"Container and recursive components","u":"/docs/references/custom-selectors","h":"#container-and-recursive-components","p":351},{"i":362,"t":"When you want to make internal parts of your component API more accessible, you can describe pseudo-elements using custom selectors. For example, you can expose a pseudo-element named navigationBtn that enables you to style an internal gallery component's navBtn element. @st-import Gallery from \"./gallery.st.css\"; @custom-selector :--navigationBtn Gallery::navbtn;","s":"Expose inner parts that are deeply defined","u":"/docs/references/custom-selectors","h":"#expose-inner-parts-that-are-deeply-defined","p":351},{"i":364,"t":"You may have a component with several basic CSS classes and with corresponding pseudo-elements. You could expose a combination pseudo-element. For example, a pseudo-element named navBtn matches any btn CSS class nested in a nav CSS class. comp.st.css @custom-selector :--navBtn .nav .btn; page.st.css @st-import Comp from \"./comp.st.css\"; /* selector: .comp__root .comp__nav .comp__btn */ Comp::navbtn { border: 1px solid grey; }","s":"Combination selector","u":"/docs/references/custom-selectors","h":"#combination-selector","p":351},{"i":366,"t":"You could also use custom selectors to gather a collection of selectors into a single selector. For example, you may want to access media that includes both images and videos. comp.st.css @custom-selector :--media .image, .video; /* selector: .comp__image, .comp__video */ :--media { border: 1px solid grey; } Issues to consider​ Aliasing multiple selectors in a custom selector may generate lots of CSS that could affect performance. For example, when you import the Comp stylesheet (the selector described in the previous example) into another stylesheet, in the output the selector is split for each override. page.st.css @st-import Comp from \"./comp.st.css\"; Comp::media { border-color: red; } /* OUTPUT */ .comp__root .comp__image, .comp__root .comp__video { border-color: red; }","s":"Group of selectors","u":"/docs/references/custom-selectors","h":"#group-of-selectors","p":351},{"i":368,"t":"The Stylable -st-extends declaration is used to indicate that a CSS class inherits from a stylesheet or another class. It assumes both the class and the extended reference will share the same element in the DOM, and enables the targeting of inner parts and states as an API with validations and completions.","s":"Extend","u":"/docs/references/extend-stylesheet","h":"","p":367},{"i":370,"t":"Use -st-extends with the value of a component stylesheet root to indicate that a class is used to customize the component, or with a value of another class to compose them (usually a utility class). Extend a stylesheet root @st-import Comp from './comp.st.css'; .x { -st-extends: Comp; } Extend a class @st-import [class] from './comp.st.css'; .x { -st-extends: class; } Local extends Extend is not limited to imported definitions, a class can extend other local classes, as well as the local stylesheet root.","s":"Syntax","u":"/docs/references/extend-stylesheet","h":"#syntax","p":367},{"i":372,"t":"The following example illustrates a page with a customized main gallery instance. slider-gallery.st.css /* gallery style API */ .root { -st-states: pos(enum(start, middle, end)); } .prevBtn {} .nextBtn {} Customizes the main gallery by importing the gallery component stylesheet into the page stylesheet, create a mainGallery class, extend it with the value of the gallery stylesheet, and then target it's inner custom pseudo-elements and custom pseudo-states. page.st.css @st-import SliderGallery from './slider-gallery.st.css'; .mainGallery { -st-extends: mainGallery; /* mainGallery is a SliderGallery */ } .mainGallery::nextbtn { /* customize mainGallery inner nextBtn part */ } .mainGallery:pos(end)::nextbtn { /* customize mainGallery in end position inner nextBtn part */ } In the view, set the mainGallery class on the gallery instance. page.jsx import SliderGallery from './slider-gallery'; import { classes } from './page.st.css'; const Page = () => {
        /* customize SliderGallery as mainGallery */
        ; };","s":"Example","u":"/docs/references/extend-stylesheet","h":"#example","p":367},{"i":374,"t":"There is a slight difference between the runtime output when extending a stylesheet root and extending a normal CSS class. A CSS class is composed to the runtime class name while a stylesheet root is not. This is because Stylable assumes that a stylesheet root will be set within the component that is being extended and composing it from the outside is redundant. page.st.css @st-import Gallery from './gallery.st.css'; @st-import [center] from './utils.st.css'; .variant { -st-extends: Gallery; } .title { -st-extends: center; } page.jsx import { classes } from './page.st.css'; classes.variant // \"page__variant\" classes.title // \"page__title utils__center\" unsupported multiple extends Stylable currently does not support extending multiple classes. We hope to introduce this capability in the future.","s":"Runtime - root vs class","u":"/docs/references/extend-stylesheet","h":"#runtime---root-vs-class","p":367},{"i":376,"t":"-st-extends provides access to inner parts and states, but does not modify the namespace of the extending class. page.st.css @st-import Gallery from './gallery.st.css'; .variant { -st-extends: Gallery; } .variant {} .variant::navBtn {} .variant:loading {} /* OUTPUT */ .page__variant {} .page__variant .gallery__navBtn {} .page__variant.gallery--loading {}","s":"Namespace","u":"/docs/references/extend-stylesheet","h":"#namespace","p":367},{"i":378,"t":"The Stylable @st-import at-rule is used to reference definitions from other .st.css or .js modules in a similar way to JavaScript Imports.","s":"Import","u":"/docs/references/imports","h":"","p":377},{"i":380,"t":"@st-import Default, [namedA, namedB as localB] from 'request'; re-declare symbol import local names must be unique. Imports are hoisted above local definitions.","s":"Syntax","u":"/docs/references/imports","h":"#syntax","p":377},{"i":382,"t":"In order to reference the the default export of a module, provide a local name after the @st-import. @st-import DefaultLocalName from 'request';","s":"Default import","u":"/docs/references/imports","h":"#default-import","p":377},{"i":384,"t":"To reference named exports of a module, in square brackets (after the optional default import), provide a comma separated list of requested names. /* named imports */ @st-import [partA, partB] from 'request'; /* default + named imports */ @st-import Default, [partA, partB] from 'request'; Local alias​ Use the as keyword to map an export name to a local name. @st-import [part as localPartName] from 'request';","s":"Named import","u":"/docs/references/imports","h":"#named-import","p":377},{"i":386,"t":"When importing from a stylesheet, the root class is mapped to the default export, and several named symbols can be referenced by name: origin.st.css /* define symbols */ .part { --customProp: yellow; container-name: part; } @keyframes anim {} @layer comps, theme; :vars { stVar: green; } entry.st.css @st-import OriginRoot, [ part, /* part class name */ --customProp, /* custom property */ stVar /* build var */ ] from './origin.st.css'; Stylesheet default capitalization When importing a default value from a stylable stylesheet, you should use a capital letter to signify that the value represents a component root.","s":"Stylable stylesheet","u":"/docs/references/imports","h":"#stylable-stylesheet","p":377},{"i":388,"t":"To import keyframes, layers or containers from another stylesheet, a special keyframes(), layer(), or container() assertion is required. entry.st.css /* import keyframe and layer */ @st-import [ keyframes(anim), layer(theme), container(panel) ] from './origin.st.css'; /* multiple */ @st-import [ keyframes(anim1, anim2), layer(comps, theme), container(panel, header) ] from './origin.st.css';","s":"Named type assertion","u":"/docs/references/imports","h":"#named-type-assertion","p":377},{"i":390,"t":"To import Javascript definitions for values, mixins, and formatters, use the @st-import statement in the same way as you would for a stylesheet. @st-import DefaultExport, [namedA, namedB as localB] from './code.js';","s":"Javascript","u":"/docs/references/imports","h":"#javascript","p":377},{"i":392,"t":"An older variation for @st-import is the :import (pseudo-import). While it still works, it is highly discouraged for usage, verbose and will be deprecated in the future. :import { -st-from: 'request'; -st-default: DefaultLocalName; -st-named: namedA, namedB as localB; } A code-mod to migrate to the new syntax is available (see doc)","s":"Legacy syntax","u":"/docs/references/imports","h":"#legacy-syntax","p":377},{"i":394,"t":"In Stylable, selectors are namespaced to the stylesheet. However there might be cases where you want to target global selectors without Stylable namespacing them, For that you can use the :global() selector.","s":"Global Selector","u":"/docs/references/global-selectors","h":"","p":393},{"i":396,"t":"Mark as global :global(.g) {} /* OUTPUT */ .g {} Valid cases /* multiple classes */ :global(.g1.g2) {} /* compound selector (`g` class not namespaced) */ .a:global(.g):hover.b {} Invalid cases /* only a single selector is supported */ .a:global(.g1, .g2):hover.b {} caution Any definitions within the :global(...) pseudo-class are not treated as symbols in the stylesheet and are not exported. That means that they are not available for use in other stylesheets or in the runtime JavaScript module.","s":"Syntax","u":"/docs/references/global-selectors","h":"#syntax","p":393},{"i":398,"t":"In case a class definition overrides a native pseudo with either -st-states or a custom pseudo-element then the :global() selector can be used to force the native: customInput with override :selected CustomInput:selected {} CustomInput:global(:selected) {} /* OUTPUT */ .customInput__root.customInput--selected {} .customInput__root:selected {}","s":"Force native","u":"/docs/references/global-selectors","h":"#force-native","p":393},{"i":400,"t":"The @keyframes CSS at-rule is used to define an animation that can be referenced to animate a DOM element. This page goes over how Stylable handles @keyframes, for more details about the language feature itself, checkout the following resources: MDN @keyframes CSS animation spec","s":"Keyframes","u":"/docs/references/keyframes","h":"","p":399},{"i":402,"t":"Keyframes definition /* empty definition */ @keyframes slide {} /* animation definition */ @keyframes jump { from { color: red } to { color: green } } /* percentage keyframes */ @keyframes jump { 0% { color: red } 50% { color: green } 100% { color: blue } } Keyframes usage .x { /* within animation shorthand */ animation: slide 3s ease-out infinite; } .y { /* same as above */ animation-name: slide; animation-duration: 3s; animation-timing-function: ease-out; animation-iteration-count: infinite; }","s":"Syntax","u":"/docs/references/keyframes","h":"#syntax","p":399},{"i":404,"t":"An exported keyframes can be imported into another stylesheet with the @st-import atrule. Insert rules into imported layer /* get 'slide' keyframes definition from another stylesheet */ @st-import [keyframes(slide)] from './x.st.css'; .x { /* use in animation */ animation-name: slide; } More import examples /* map 'slide' keyframes to local name 'x-slide' */ @st-import [keyframes(slide as x-slide)] from './x.st.css'; /* import multiple keyframes */ @st-import [keyframes(slide, jump)] from './x.st.css';","s":"Import and Export","u":"/docs/references/keyframes","h":"#import-and-export","p":399},{"i":406,"t":"A Keyframes definition can be accessed for dynamic styles using the keyframes mapping on the Stylable runtime stylesheet: import { keyframes } from './sheet.st.css'; // map to target namespaced keyframes keyframes.jump;","s":"Runtime","u":"/docs/references/keyframes","h":"#runtime","p":399},{"i":408,"t":"Stylable automatically namespaces any keyframes name according to the stylesheet it is defined in: @keyframes slide {} .x { animation-name: slide; } /* OUTPUT */ @keyframes NAMESPACE__slide {} .x { animation-name: NAMESPACE__slide; }","s":"Namespace","u":"/docs/references/keyframes","h":"#namespace","p":399},{"i":410,"t":"In some cases the default namespace behavior is unwanted. In such cases, st-global can be used to mark a keyframes definition as global: @keyframes st-global(slide) {} .x { animation-name: slide; } /* OUTPUT */ @keyframes slide {} .x { animation-name: slide; /* no namespace */ }","s":"Disable namespace","u":"/docs/references/keyframes","h":"#disable-namespace","p":399},{"i":412,"t":"Formatters are functions that return a single CSS declaration value. They can receive arguments, process them and return the value. note Currently, any argument passed through to a formatter is of type string. We are in the process of adding support for more complex types. For example a calc-font-size formatter can return a different value for the font size depending on the provided argument. tip If you need to return multiple declaration values, we recommend using Stylable mixins. /* ./calc-font-size.js */ module.exports = function (baseSize, modifier) { switch (modifier) { case 'header': return `${Number(baseSize) * 2}px`; case 'aside': return `${Number(baseSize) * 0.75}px`; default: return baseSize + 'px'; } }; @st-import calcFontSize from \"./calc-font-size\"; .header { font-size: calcFontSize(16, header); } .form { font-size: calcFontSize(16, body); } /* CSS output */ .header { font-size: 32px; } .form { font-size: 16px; } /* CSS output */ .header { font-size: 32px; } .form { font-size: 16px; } note Currently you cannot use formatters inside a native URL function. As a suggested workaround, you can return a URL function from a formattter.","s":"Formatters","u":"/docs/references/formatters","h":"","p":411},{"i":414,"t":"When the formatter is imported into the CSS, it can also be used with a variable. In this example the CSS imports the same formatter as the previous example, calc-font-size, but the variable baseFontSize is added to the calculation. @st-import calcFontSize from \"./calc-font-size\"; :vars { baseFontSize: 12; } .header { font-size: calcFontSize(value(baseFontSize), header); } .form { font-size: calcFontSize(value(baseFontSize), body); } /* CSS output */ .header { font-size: 24px; } .form { font-size: 12px; }","s":"Formatters with variables","u":"/docs/references/formatters","h":"#formatters-with-variables","p":411},{"i":416,"t":"You can also nest formatters to provide functions that are modular, composable and reusable. In this example the formatter divBy2 is nested in the round formatter. Both are imported into the CSS file and the output value is calculated from both. The formatters expose to the CSS mathematical calculations that are used in the JavaScript functions. /* ./math.js */ module.export = { divBy2: function (num) { return Number(Number(num) / 2); }, round: function (num) { return Math.round(Number(num)); }, }; @st-import [divBy2, round] from \"./math\"; :vars { baseSize: 17px; } .header { font-size: round(divBy2(value(baseSize))) px; } /* CSS output */ .header { font-size: 9px; }","s":"Nested formatters","u":"/docs/references/formatters","h":"#nested-formatters","p":411},{"i":418,"t":"In CSS, @layer provides a way to group rules together in order to override other rules for better control of the styling order. This page goes over how Stylable handles @layer, for more details about the language feature itself, check out the following resources: MDN @layer The Future of CSS: Cascade Layers by Bramus CSS cascade spec","s":"Layer","u":"/docs/references/layer","h":"","p":417},{"i":420,"t":"Layer order definition @layer base, layout, theme; Layer style definition @layer theme { /* layer style rules */ } Nested style definition @layer theme { @layer app { /* layer style rules */ } } /* equivalent to */ @layer theme.app { /* layer style rules */ }","s":"Syntax","u":"/docs/references/layer","h":"#syntax","p":417},{"i":422,"t":"An exported layer definition can be imported into another stylesheet with the @st-import atrule. Insert rules into imported layer /* get base layer definition from another stylesheet */ @st-import [layer(base)] from './x.st.css'; /* insert rules into layer */ @layer base { /* layer style rules */ } More import examples /* map 'base' layer to local name 'x-base' */ @st-import [layer(base as x-base)] from './x.st.css'; /* import multiple layers */ @st-import [layer(layerA, layerB)] from './x.st.css';","s":"Import and Export","u":"/docs/references/layer","h":"#import-and-export","p":417},{"i":424,"t":"CSS native @import can be used to import a stylesheet into a layer: /* import the content of 'other.css' in the base layer */ @import url(./x.css) layer(base); caution While Stylable collects and namespaces layer definitions from native CSS imports, it does not handle bundling of them at current time, and they are not recommended for use.","s":"Native CSS import","u":"/docs/references/layer","h":"#native-css-import","p":417},{"i":426,"t":"A layer can be accessed for dynamic styles using the layers mapping on the Stylable runtime stylesheet: import { layers } from './sheet.st.css'; // map to target namespaced layer layers['layer-name'];","s":"Runtime","u":"/docs/references/layer","h":"#runtime","p":417},{"i":428,"t":"Stylable automatically namespaces any layer name according to the stylesheet it is defined in: Source: @layer base, layout, theme; Output: @layer ns__base, ns__layout, ns__theme;","s":"Namespace","u":"/docs/references/layer","h":"#namespace","p":417},{"i":430,"t":"In some cases the default namespace behavior is unwanted, for example when a layer is external and not defined or imported by Stylable. In such cases, st-global can be used to mark a layer definition as global: /* keep the layer name as-is with no namespace */ @layer st-global(external); Once a layer is marked as global, all references to that layer transpile to the un-namespaced name (nested or imported). Notice that st-global is not supported in nested definitions (e.g. a.st-global(external).c) or native import (e.g. @import url() layer(st-global(external))), but marking the layer as global in a later definition will keep it global everywhere.","s":"Disable namespace","u":"/docs/references/layer","h":"#disable-namespace","p":417},{"i":433,"t":"When you develop your application in Stylable, you can manually namespace classes so you can more easily identify them when they are displayed in the CSS output. You do this in your Stylable stylesheet by adding the syntax @st-namespace to provide better display names to your classes. x.st.css @st-namespace \"y\"; .root { color: red; } /* OUTPUT */ .y__root {/* use @st-namespace value instead of file name */ color: red; } note Because @st-namespace is not unique, the scoped name may still have a suffix added to it to make it unique during build.","s":"Manual Namespace","u":"/docs/references/namespace","h":"#manual-namespace","p":431},{"i":435,"t":"Stylable mixins enable you to reuse complex styles and CSS behaviors, defined in CSS or Javascript, and apply them to any style-rule during build time. Here are some examples of when you can use mixins: Presets/Variants - create reusable pieces of styling CSS Layouts - easily describe complex layouts Effects - easily describe complex effects Macros - use code to define the CSS macros you need tip If you need to return only a single declaration value using code, we recommend instead using formatters.","s":"Mixins","u":"/docs/references/mixins","h":"","p":434},{"i":437,"t":"Any CSS stylesheet, class or element that is defined in a Stylable CSS file can be used as a mixin source. You can use either a local class or element, or import the mixin from a different stylesheet. In the following example, a locally defined class is used as a mixin in the same stylesheet. .style-mixin { color: green; background: yellow; } .someClass { -st-mixin: style-mixin; } /* CSS output */ .someClass { color: green; /* from local mixin */ background: yellow; /* from local mixin */ } Here is an example of a Stylable CSS file that is imported and mixed into the classes of a different stylesheet. The .rootMixedIn class as a stylesheet and classMixedIn as a class. /* mixins.st.css */ .root { color: purple; } .someClass { color: green; } /* example.st.css - imports the above mixin */ @st-import MixRoot, [someClass] from \"./mixins.st.css\"; .rootMixedIn { -st-mixin: MixRoot; /* stylesheet mixin */ } .classMixedIn { -st-mixin: someClass; /* class mixin */ } /* CSS output */ .rootMixedIn { color: purple; /* from stylesheet mixin */ } .rootMixedIn .someClass { /* ruleset added as a result of the stylesheet mixin */ color: green; } .classMixedIn { color: green; /* from class mixin */ }","s":"CSS mixins","u":"/docs/references/mixins","h":"#css-mixins","p":434},{"i":439,"t":"CSS mixins can accept named parameters in the following format: mixin(variableName valueOverride, variableName2 valueOverride2) Multiple variables can be comma separated or written on multiple lines: mixin ( variableName valueOverride, variableName2 valueOverride2 ) Using parameters in a mixin enables you to override specific variables inside of a mixin before they are applied. Here is an example of using a variable in a CSS mixin and how it can be overridden by the mixin's parameter value. :vars { color1: green; } .classToMixin { background: value(color1); } .targetClass { -st-mixin: classToMixin(color1 orange); } /* CSS output */ .classToMixin { background: green; /* from local class */ } .targetClass { background: orange; /* from mixin with override */ }","s":"Variable overrides","u":"/docs/references/mixins","h":"#variable-overrides","p":434},{"i":441,"t":"Partial CSS Mixins (-st-partial-mixin) is a continuation of the idea of mixins with parameter overrides. (as described above) Where a regular -st-mixin includes all declarations inside the targeted mixed-in class, partial mixins enable you to pass through overriding variable values and mix in only declarations that would be affected by such an override. For a partial mixin to work, at least one overriding variable must be provided, additional ones being optional. Example​ :vars { color1: red; color2: green; } .my-mixin { background: value(color1); color: value(color2); } .container { -st-partial-mixin: my-mixin(color1 gold); } /* output */ .container { background: gold; } A partial mixin will include any declaration in the mixed-in class (or rules containing the mixed-in class) that contains a variable usage that will be overridden. Any other variables not overridden inside the mixed in declaration will retain their original values. Example​ :vars { color1: red; color2: green; size1: 2px; } .my-mixin { background: value(color1); color: value(color2); } .my-mixin .part { border: value(size1) solid value(color2); } .container { -st-partial-mixin: my-mixin(color1 gold, size1 5px); } /* output */ .container { background: gold; } .container .part { border: 5px solid green; }","s":"Partial CSS mixins","u":"/docs/references/mixins","h":"#partial-css-mixins","p":434},{"i":443,"t":"JavaScript mixins allow you to create complex structures in CSS based on the arguments passed to the mixin. A JavaScript mixin returns a CSS fragment which can contain multiple declarations with optional sub style-rules. Arguments are passed to the mixin as a string argument and it's the mixin's responsibility to parse them. Here is an example of a mixin receiving multiple arguments and returning multiple declarations into the target ruleset. /* file my-mixin.js */ module.exports = function colorAndBg([color, bgColor]) { /* arguments: array of string types */ return { color: color, background: bgColor, }; }; /* file example.st.css */ @st-import colorAndBg from \"./my-mixin\"; .codeMixedIn { -st-mixin: colorAndBg(green, orange); font-family: monospace; } /* CSS output */ .codeMixedIn { color: green; /* from JS mixin */ background: orange; /* from JS mixin */ font-family: monospace; /* from local class */ }","s":"JavaScript mixins","u":"/docs/references/mixins","h":"#javascript-mixins","p":434},{"i":445,"t":"Mixins can return multiple style-rules that are mixed into the target stylesheet. These style-rules can be written with the following syntax options: selector - resulting ruleset is appended as a descendent selector to its mixed in target (in below example .otherClass) &selector - resulting ruleset references the parent selector into which it was mixed in (in below example &:hover, the parent selector is .codeMixedIn) /* file my-mixin.js */ module.exports = function complexMixin([color, bgColor]) { /* arguments: array of string types */ return { color: color, background: bgColor, '&:hover': { color: 'gold', }, '.otherClass': { color: 'purple', }, }; }; /* file example.st.css */ @st-import complexMixin from \"./my-mixin\"; .codeMixedIn { -st-mixin: complexMixin(green, orange); font-family: monospace; } /* CSS output */ .codeMixedIn { color: green; /* from JS mixin */ background: orange; /* from JS mixin */ font-family: monospace; /* from local class */ } .codeMixedIn:hover { /* from JS mixin with & */ color: gold; } .codeMixedIn .otherClass { /* from JS mixin with appended selector */ color: purple; }","s":"Create multiple style-rules","u":"/docs/references/mixins","h":"#create-multiple-style-rules","p":434},{"i":447,"t":"Mixins can add CSS declarations to the CSS ruleset to which they are applied. Rules are added at the position in the CSS where the -st-mixin is declared. Any selectors that are appended as a result of the mixin are added directly after the ruleset that the mixin was applied to. You can apply multiple mixins from either CSS or JavaScript, or both separated by comma -st-mixin: mixinA, mixinB. Multiple mixins are applied according to the order that they are declared left to right.","s":"How mixins are applied","u":"/docs/references/mixins","h":"#how-mixins-are-applied","p":434},{"i":449,"t":"Take a look at these considerations before working with Stylable mixins.","s":"Considerations when using mixins","u":"/docs/references/mixins","h":"#considerations-when-using-mixins","p":434},{"i":451,"t":"You can escape special characters by wrapping them with quotes or using a backslash (\\). Example: .x { /* use quotations to include comma */ -st-mixin: mix(300, 'xx,x'); /* [\"300\", \"xx,x\"] */ } They can also be used to include quotes or backslashes as part of the parameter. .y { /* escape slashes */ -st-mixin: mix(300, '\"xxx\"'); /* [\"300\", \"\\\"xxx\\\"\"] */ }","s":"Escape special characters","u":"/docs/references/mixins","h":"#escape-special-characters","p":434},{"i":453,"t":"It is possible to reach a state where you have circular references between mixins. These cannot be resolved, and a diagnostics warning is issued in your Stylable code intelligence and build process.","s":"Circular references","u":"/docs/references/mixins","h":"#circular-references","p":434},{"i":456,"t":"Stylable is usually consumed through one of its available integration, for more specific or advanced use-cases, the programmatic API can be used for greater control on how Stylable operates. note The APIs described here are treated as stable, and available for use. Any other API exposed by Stylable not described here may changed, and should not be dependant on. The Stylable class provided from @stylable/core requires configuration to initialize. Example: Initialize Stylable instance import fs from 'node:fs'; import { Stylable } from '@stylable/core'; // minimal required configuration Stylable({ fs, projectRoot: __dirname });","s":"Stylable instance","u":"/docs/references/programmatic-api","h":"#stylable-instance","p":454},{"i":458,"t":"Option Type Default Value Description fs MinimalFS required Filesystem instance to use projectRoot string required The project root directory path mode string \"production\" Development or production mode resolveNamespace ResolveNamespace default resolver depends on running context Function to determine namespacing resolveModule ModuleResolver enhanced-resolve Module resolver to be used for all import paths and url() requests resolveOptions alias?: any; symlinks?: boolean; {} Options that are passed to the default module resolver requrieModule RequireModule none Require module that receives a path, and attempts to return a module","s":"Configuration","u":"/docs/references/programmatic-api","h":"#configuration","p":454},{"i":460,"t":"Stylable minimal required file system interface: MinimalFS interface interface MinimalFS { statSync: (filePath: string) => { mtime: Date }; readFileSync: (filePath: string, encoding: 'utf8') => string; readlinkSync: (filePath: string) => string; }","s":"MinimalFS","u":"/docs/references/programmatic-api","h":"#minimalfs","p":454},{"i":462,"t":"Provide exact control of the namespacing mechanism by providing a function that accepts: namespace - a stylesheet source namespace - determined by the @st-namespace if exists, and falls back to the filename origin - an origin path - path to the source stylesheet This function will then return a string to be used as the \"namespace\" for stylesheet definitions. Basic example​ An example for a basic namespace resolver, that generates unique verbose namespaces based on the component namespace and origin path of the stylesheet. Resolve namespace example const resolveNamespace: ResolveNamespace = (namespace: string, origin: string): string { return namespace + hash(origin); } comp.st.css .root {} /* OUTPUT */ .comp1169059893__root {}","s":"ResolveNamespace","u":"/docs/references/programmatic-api","h":"#resolvenamespace","p":454},{"i":464,"t":"Override Stylable's default module resolver, to control path resolution according to your projects' needs. The default module resolver is a function that accepts two arguments: directoryPath - the directory path to resolve from request - the module request to resolve const fs = require('node:fs'); const { createDefaultResolver, Stylable } = require('@stylable/core'); const defaultResolver = createDefaultResolver(fs); const stylable = new Stylable({ projectRoot: 'path/to/project/root', filesystem: fs, resolveModule: (directoryPath, request) => { if (request.startsWith('my-custom-module')) { return '/path/to/my-custom-module'; } return defaultResolver(directoryPath, request); }, });","s":"ModuleResolver","u":"/docs/references/programmatic-api","h":"#moduleresolver","p":454},{"i":466,"t":"Defines a function to require imported JavaScript modules from a path, used when a JavaScript Mixins or Formatters is used within a Stylable stylesheet. NodeJS Memory FS const fs = require('node:fs'); const { Stylable } = require('@stylable/core'); const stylable = new Stylable({ projectRoot: 'path/to/project/root', filesystem: fs, requireModule: require }) const { Stylable } = require('@stylable/core'); const stylable = new Stylable({ projectRoot: 'path/to/project/root', filesystem: memoryFS, requireModule(path: string) { const _module = { id, exports: {}, }; try { // create a module evaluation function const fn = new Function( 'module', 'exports', 'require', fs.readFileSync(id, { encoding: 'utf8', flag: 'r' }) ); // evaluate the module fn(_module, _module.exports, requireModule); } catch (e) { throw new Error('Cannot require file: ' + id + 'reason: ' + e.message); } return _module.exports; } })","s":"RequireModule","u":"/docs/references/programmatic-api","h":"#requiremodule","p":454},{"i":468,"t":"In addition to CSS's native pseudo-classes, like :hover and :nth-child(), Stylable allow you to define custom pseudo-classes so that you can apply styles to your components based on state. Let's say you want a component to have different styling applied to it when its content is loading. You can define loading as a custom pseudo-class and toggle it in your component. This page goes over how Stylable handles custom pseudo-classes, for more details about the language feature itself, checkout the following resources: MDN pseudo-class pseudo-class in spec","s":"Pseudo-Class","u":"/docs/references/pseudo-classes","h":"","p":467},{"i":470,"t":"The Stylable -st-states declaration is used on a class selector to provide a list of the possible custom pseudo-classes that can later be targeted from CSS and controlled from JavaScript. list of custom states .x { -st-states: stateA, stateB; } allowed context -st-states is only allowed in a rule with a single class selector to indicate custom pseudo classes for that class.","s":"Syntax","u":"/docs/references/pseudo-classes","h":"#syntax","p":467},{"i":472,"t":"To define a custom state that can be either on or off, provide state definitions with a single ident as the name for the state, then target the state using a pseudo-class. .x { /* define 2 boolean states on 'x' */ -st-states: toggled, loading; } /* target single custom state */ .x:toggled {} /* target multiple custom states */ .x:toggled:loading {}","s":"Boolean","u":"/docs/references/pseudo-classes","h":"#boolean","p":467},{"i":474,"t":"A custom state with a restricted option list that can target one of the options using a pseudo-class selector with a matching parameter and an optional default value. .x { /* define a 'size' custom state with 3 options and a 'color' state with options and a default 'green' value */ -st-states: size(enum(small, medium, large)), color(enum(reg, green, blue)) green; } /* target an element with a size of `medium` */ .x:size(medium) {} /* INVALID! - 'huge' is not a possible value for size */ .x:size(huge) {} /* INVALID! - parameter is required for size */ .x:size {} /* VALID! - same as ':color(green)' */ .x:color {}","s":"Enum","u":"/docs/references/pseudo-classes","h":"#enum","p":467},{"i":476,"t":"A custom state that can accept a string parameter value. .x { /* define 'category' custom state that accepts a string parameter */ -st-states: category(string); } /* target an element with state category='kitchen' */ .x:category(kitchen) {} /* target an element with state category='office' */ .x:category(office) {} Optional string validation​ There are several options that can be used to validate the potential string parameter input: minLength - validates min length of input maxLength - validates max length of input contains - validates substring value exist in input regex - validates input against a regular expression To set validations on a string state type, call the string as a function and pass a list of validations. string validation definition examples .a { /* validates input has min/max length and has the string 'user' in it */ -st-states: x(string(minLength(5), maxLength(10), contains('user'))); } .b { /* validates input begins with 'user' */ -st-states: x(string(regex('^user'))); }","s":"String","u":"/docs/references/pseudo-classes","h":"#string","p":467},{"i":478,"t":"A custom state that can accept a number parameter value. .a { /* define 'ranking' custom state that accepts a number parameter */ -st-states: ranking(number); } /* target an element with a state rankin='5' */ .a:ranking(5) {} Optional number validation​ There are several options that can be used to validate the potential number parameter input: min - validates min size of input max - validates max size of input multiplyOf - validates input is multiply of a given value number validation definition example .a { /* validates the targeting number argument */ -st-states: x(number(min(2), max(6), multipleOf(2))); } /* valid arguments */ .a:x(2) {} .a:x(4) {} .a:x(6) {} /* INVALID! - \"multipleOf(2)\" */ .a:x(3) {} .a:x(5) {} /* INVALID! - \"min(2)\" and \"max(6)\" */ .a:x(1) {} .a:x(7) {}","s":"Number","u":"/docs/references/pseudo-classes","h":"#number","p":467},{"i":480,"t":"When using -st-extends to extend another stylesheet or class, states definitions are inherited, but can also be overridden at any level. base.st.css .root { /* define states 'a' and 'b' for the root of base stylesheet */ -st-states: a, b; } extend.st.css @st-import Base from './base.st.css'; .root { /* inherits states 'a' and 'b' */ -st-extends: Base; /* define states 'c' and 'b' (override 'b' from 'Base') */ -st-states: c, b; } .root:a {} .root:b {} .root:c {} /* OUTPUT */ .extend__root.base--a {} /* 'a' defined in base */ .extend__root.extend--b {} /* 'b' defined in base, but overridden in extend */ .extend__root.extend--c {} /* 'c' defined in extend */ Native pseudo-class override You can override the behavior of native pseudo-classes. This can enable you to write polyfills for forthcoming CSS pseudo-classes to ensure that when you define a name for a custom pseudo-class, if there are clashes with a new CSS pseudo-class in the future, your app's behavior does not change. We don't recommend you to override an existing CSS pseudo-class unless you want to drive your teammates insane.","s":"State inheritance","u":"/docs/references/pseudo-classes","h":"#state-inheritance","p":467},{"i":482,"t":"To activate a custom state, use the cssStates or st() function to generate the active CSS classes states. import { st, classes } from './sheet.st.css'; // active states st(classes.part, { isOn: true, // boolean size: 'small' // string or enum place: 1 // number state }); // un-active states - only 'part' class st(classes.part, { isFirst: false, // boolean size: undefined // string or enum place: undefined // number });","s":"Runtime","u":"/docs/references/pseudo-classes","h":"#runtime","p":467},{"i":484,"t":"Stylable generates namespaced CSS classes for custom states: .x:bool {} .x:enum(option1) {} .x:string(word) {} .x:number(55) {} /* OUTPUT */ .NAMESPACE__x.NAMESPACE--bool {} .NAMESPACE__x.NAMESPACE---enum-7-option1 {} .NAMESPACE__x.NAMESPACE---string-4-word {} .NAMESPACE__x.NAMESPACE---number-2-55 {}","s":"Namespace","u":"/docs/references/pseudo-classes","h":"#namespace","p":467},{"i":486,"t":"In some cases the default way Stylable transforms a state into a class is not the desired behavior, for example when writing style interface to an external view that might mark state as an attribute, For this mapped state can be used to transform the state into a another selector. To define a global mapped state, pass a selector as a string instead of a type: .x { -st-states: toggled('.on'), loading('[dataSpinner]'); } .x:toggled {} .x:loading {} /* OUTPUT */ .NAMESPACE__x.on {} .NAMESPACE__x[dataSpinner] {} Additionally a single parameter can be defined after the selector string and referenced in the selector string using $0: .x { -st-states: size('[size=\"$0\"]', enum(small, medium, large)); } .x:size(small) {} /* OUTPUT */ .NAMESPACE__x[size='small'] {}","s":"Map to selector","u":"/docs/references/pseudo-classes","h":"#map-to-selector","p":467},{"i":488,"t":"In addition to CSS's native pseudo-elements, like ::before and ::backdrop, Stylable allow you to define custom pseudo-elements so that you can target and apply styles to inner parts of your components. This page goes over how Stylable handles custom pseudo-elements, for more details about the language feature itself, checkout the following resources: MDN pseudo-element pseudo-element in spec","s":"Pseudo-Element","u":"/docs/references/pseudo-elements","h":"","p":487},{"i":490,"t":"To target an internal element, Use the pseudo-element prefix :: with the part name. Component::firstlevel::secondlevel {} deep pseudo-elements Custom pseudo-elements are not limited to the end of a selector like native pseudo-elements, and can be chained. For example, you can access the label of a navigation button from a gallery: Gallery::navBtn::label","s":"Syntax","u":"/docs/references/pseudo-elements","h":"#syntax","p":487},{"i":492,"t":"Customizing all component instances nested under a stylesheet using the imported component type selector. @st-import Comp from './comp.st.css'; /* target Comp internal part */ .root Comp::part {/* customize */}","s":"Style a component","u":"/docs/references/pseudo-elements","h":"#style-a-component","p":487},{"i":494,"t":"Customizing a variant class of a component by extending a class with the component stylesheet. page.st.css @st-import Comp from './comp.st.css'; .compVariant { /* set compVariant to inherit from Comp */ -st-extends: Comp; } /* target compVariant internal part (inherited from Comp) */ .compVariant::part {/* customize */} Then set the variant class to the component instance. page.jsx import Comp from './comp'; import { classes } from './page.st.css'; const Page = () => { return (
        /* customize Comp with compVariant class */
        ); };","s":"Style a variant","u":"/docs/references/pseudo-elements","h":"#style-a-variant","p":487},{"i":496,"t":"Any CSS class that is exported from a stylesheet is accessible as a pseudo-element. comp.st.css /* available as ::part for this stylesheet */ .part {} Additionally a custom-selector defined within a stylesheet is exposed as a custom pseudo-element and will take precedence over a class with the same name. comp.st.css /* available as ::part for this stylesheet and preserves the direct child combinator when used */ @custom-selector :--part .root > .part; Native pseudo-element override Override of native pseudo-elements is possible, however it is strongly discouraged.","s":"Define","u":"/docs/references/pseudo-elements","h":"#define","p":487},{"i":498,"t":"An extending stylesheet root automatically inherits any pseudo-elements from the extended definition, and can then override them by defining its own public parts.","s":"Element inheritance","u":"/docs/references/pseudo-elements","h":"#element-inheritance","p":487},{"i":500,"t":"Custom pseudo-elements are transformed in build-time to target the internal selector they represent. comp.st.css .part {} @custom-selector :--directPart .root > .part; page.st.css @st-import Comp from './comp.st.css'; .root { -st-extends: Comp; } .root::part {} .root::directPart {} /* OUTPUT */ .page__root .comp__part {} .page__root > .comp__part {}","s":"Build transformation","u":"/docs/references/pseudo-elements","h":"#build-transformation","p":487},{"i":502,"t":"Stylable scope enables you to wrap several style-rules using a single directive. The scoping directive receives any valid Stylable selector to use for its scoping. Stylable scoping directive is similar in its behavior to CSS nesting, but can only be applied to a single level.","s":"Scope","u":"/docs/references/st-scope","h":"","p":501},{"i":504,"t":"/* entry.st.css */ @st-scope .root { input { color: purple; } } /* output */ .entry__root input { color: purple; }","s":"Syntax","u":"/docs/references/st-scope","h":"#syntax","p":501},{"i":506,"t":"There are many possible patterns that can be used to theme a site or application in CSS. Stylable scoping capability serves as syntax sugar to allow an easier theme implementation. Below are several examples for how theming can be done. Creating a theme​ In this example, we're representing a dark theme as a stylesheet. Creating your overriding rules under that Stylesheet's symbol and apply it to the relevant part of your DOM. In this theme implementation we are targeting three components and overriding their default look. /* dark-theme.st.css */ @st-import App, [Button, DropDown] from \"./index.st.css\"; @st-scope .root { App { border-color: darkgrey; } Button { background: darkgreen; } DropDown { background: darkgrey; color: beige; } } Extending a theme​ In this example, we are extending our previously created dark theme, with a specific override for the Gallery component. @st-import Gallery from \"./gallery.st.css\"; @st-import DarkTheme from \"./dark.st.css\"; @st-scope DarkTheme { DropDown { color: yellow; /* overriding DarkTheme color, perserving background */ } Gallery { background: darkgrey; } } Theming with mixins​ In this file, we are creating pre-designed flavors that uses Stylable variables to determine their styling. /* flavors.st.css */ @st-import [Button, UserForm] from \"./index.st.css\"; :vars { background: white; text: black; bordercolor: green; } .button-flavor { -st-extends: Button; background: value(background); color: value(text); } .userForm-flavor { -st-extends: UserForm; background: value(background); color: value(text); border: 1px solid value(borderColor); } In this example, we use our existing flavors from above to customize our components look under the dark theme. @st-import [UserForm, Button] from \"./index.st.css\"; @st-import [button-flavor, userForm-flavor] from \"./flavors.st.css\"; @st-scope .root { Button { -st-mixin: button-flavor(background black, text white); } UserForm { -st-mixin: userForm-flavor(background black, text white, borderColor #f4f4f4); } }","s":"Theming with scope","u":"/docs/references/st-scope","h":"#theming-with-scope","p":501},{"i":508,"t":"Every Stylable stylesheet has a reserved class called root that matches the root node of the component. The root class is used to signify the component top-level node where a new namespace scope is created. .root { /* set component background */ background: white; } /* OUTPUT */ .NAMESPACE__root { background: white; }","s":"Root","u":"/docs/references/root","h":"","p":507},{"i":510,"t":"The root of a stylesheet can be referenced in other stylesheets by using the default import. page.st.css @st-import DropDown from './dropdown.st.css'; /* style any dropdown component background nested under the page root */ .root DropDown { background: salmon; } /* OUTPUT */ .page__root .dropdown__root { background: salmon; }","s":"Default export","u":"/docs/references/root","h":"#default-export","p":507},{"i":512,"t":"Each component is responsible for placing the root class on its top-level node using the runtime API.","s":"Runtime","u":"/docs/references/root","h":"#runtime","p":507},{"i":514,"t":"comp.jsx import { classes } from './comp.st.css'; function Comp() { return
        ; }","s":"simple example","u":"/docs/references/root","h":"#simple-example","p":507},{"i":516,"t":"The following example uses the st() function to add multiple classes: the component root class state classes classes passed from props for customizations comp.jsx import { st, classes } from './comp.st.css'; function Comp({ className }) { return (
        ); }","s":"root + state + customize","u":"/docs/references/root","h":"#root--state--customize","p":507},{"i":518,"t":"Imported Stylable stylesheets in JavaScript contain minimal runtime code to help define the structure and state of the component. /* index.jsx - stylesheet runtime api */ import { st, // runtime utility function classes, // class mapping vars, // custom properties mapping stVars, // stylable build-time variable values cssStates, // utility function for setting stylable states keyframes, // keyframes mapping layers // layer mapping containers,// container mapping } from \"style.st.css\";","s":"Runtime","u":"/docs/references/runtime","h":"","p":517},{"i":520,"t":"Any namespaced symbols, defined in the stylesheet, are exposed on maps from their local name to their target namespaced name: import { classes, vars, keyframes, layers, containers } from 'style.st.css'; // class classes.root; // \"style__root\" classes.label; // \"style__label\" classes.icon; // \"style__icon\" classes['dashed-part']; // \"style__dashed-part\" // custom property vars.color1 // \"--style-color1\" // keyframes keyframes.slide // \"style__slide\" // layers layers.theme // \"style__theme\" // containers containers.panel // \"style__panel\" note The root class is available even when it is not explicitly defined in the stylesheet.","s":"Manual mapping","u":"/docs/references/runtime","h":"#manual-mapping","p":517},{"i":522,"t":"Local stylesheet build vars are exported with their set value. :vars { bg: black; color: gold; } import { stVars } from 'style.st.css'; stVars.bg; // \"black\" stVars.color; // \"gold\"","s":"Build vars","u":"/docs/references/runtime","h":"#build-vars","p":517},{"i":524,"t":"A utility function for concatenating classes and activating custom states. the optional second argument can receive either a state activation or another class to concatenate multiple classes can be added with additional arguments Multiple classes import { st, classes } from 'style.st.css'; // namespaced part class + additional class st(classes.part, 'additional'); // \"style__part additional\" // namespaced part class + multiple classes st(classes.part, 'a', 'b', 'c'); // \"style__part a b c\" // undefined is ignored st(classes.part, 'a', undefined, 'c'); // \"style__part a c\" State activation import { st, classes } from 'style.st.css'; // namespaced a + isOn boolean state st(classes.a, { isOn: true }); // \"style__a style--isOn\" // namespaced a + multiple states st(classes.a, { x: true, y: false }); // \"style__a style--x\" // namespaced a + parameter st(classes.a, { rank: 'first' }); // \"style__a style--rank-5-first\" State activation + additional classes import { st, classes } from 'style.st.css'; // namespaced a + isOn state + x class st(classes.a, { isOn: true }, 'x'); // \"style__a style--isOn x\"","s":"st() function","u":"/docs/references/runtime","h":"#st-function","p":517},{"i":526,"t":"The cssStates function can be used to produce just the active custom state classes. The function accepts a map of local state names and generates a string with concatenated class names used to mark the element's state. import { cssStates } from 'style.st.css'; // single state cssStates({ selected: true }); // \"style--selected\" // un-active state cssStates({ selected: false }); // \"\" // string/enum state cssStates({ rank: 'first' }); // \"style--rank-5-first\" // multiple states cssStates({ a: true, b: false, c: true }); // \"a c\"","s":"Custom state mapping","u":"/docs/references/runtime","h":"#custom-state-mapping","p":517},{"i":528,"t":"Stylable variables provide a way to define common values to be used across the stylesheet and exposed for sharing and theming. These variables are used only during build-time and have no runtime impact. If you wish to use native dynamic variables, that can change value during runtime, see css custom properties for further details.","s":"Variables","u":"/docs/references/st-variables","h":"","p":527},{"i":530,"t":"Use the :vars top level rule to define build variables.","s":"Syntax","u":"/docs/references/st-variables","h":"#syntax","p":527},{"i":532,"t":"To define a variable, add a variable declaration within a :vars ruleset. :vars { /* define x with value green */ x: green; /* define y with value blue */ y: blue; }","s":"Define","u":"/docs/references/st-variables","h":"#define","p":527},{"i":534,"t":"To get a variable value, use the value() function with the variable name as the first argument. .a { /* evaluate in declaration value */ color: value(x); /* compose in declaration value */ background: url(a.jpg) no-repeat, url(b.jpg) repeat-x value(x); } /* set media params from a variable */ @media value(y) {}","s":"Evaluate","u":"/docs/references/st-variables","h":"#evaluate","p":527},{"i":536,"t":"Variables can be composed into a declaration value. :vars { x: green; /* define y with the value green from x */ y: value(x); /* define z with composed x value */ z: red, value(x), blue; }","s":"Compose","u":"/docs/references/st-variables","h":"#compose","p":527},{"i":538,"t":"Use st-array to define a variable that holds a list of comma separated values that can be accessed by a zero-based index as the second argument to the value() function. :vars { /* comma separated list */ colors: st-array(red, green, blue); } .a { /* access 2nd cell value */ color: value(colors, 1); /* green */ }","s":"Array","u":"/docs/references/st-variables","h":"#array","p":527},{"i":540,"t":"Use st-map to define a variable that holds key/value pairs with a space as a delimiter between them, and a comma separating each pair. These values can then be accessed by providing the key as the second argument to the value() function. :vars { /* comma separated key/value pairs */ colors: st-map( bg black, text gold, ); } .a { /* access 'text' key value */ color: value(colors, text); /* gold */ }","s":"Map","u":"/docs/references/st-variables","h":"#map","p":527},{"i":542,"t":"An exported build variable can be imported into another stylesheet with the @st-import at-rule. example2.st.css @st-import [color1] from \"./common.st.css\"; .a { /* compose color1 to border value*/ border: 10px solid value(color1); }","s":"Import and Export","u":"/docs/references/st-variables","h":"#import-and-export","p":527},{"i":544,"t":"A build variable value can be accessed using the stVars mapping on the Stylable stylesheet runtime. import { stVars } from './common.st.css'; // map from local name to value stVars.color1; // \"green\" stVars['dashed-name']; // \"blue\" local export only Only build variables that are defined by the stylesheet are exported to Javascript - imported ones are not!","s":"Runtime","u":"/docs/references/st-variables","h":"#runtime","p":527},{"i":546,"t":"experimental This API is not stable Composed data structures like st-array and st-map can be defined from Javascript. Take a look at stBorder from the @stylable/custom-value to see how it works. stBorder usage example @st-import [stBorder] from \"@stylable/custom-value\"; :vars { /* order of arguments: size style color */ myborder: stBorder(1px, solid, green); } .root { border: value(myBorder); /* 1px solid green */ background-color: value(myBorder, color); /* green */ }","s":"Custom variable","u":"/docs/references/st-variables","h":"#custom-variable","p":527},{"i":548,"t":"A CSS type selector is used to target DOM elements according to their tag name. This page goes over how Stylable handles type selector, for more details about the language feature itself, checkout MDN type selector.","s":"Type Selector","u":"/docs/references/type-selectors","h":"","p":547},{"i":551,"t":"A native element behaves exactly as it does in CSS, and requires no special treatment in Stylable. /* scoped under local class */ .root div {} /* scoped to local class */ div.root {}","s":"Native element","u":"/docs/references/type-selectors","h":"#native-element","p":547},{"i":553,"t":"Use a capital first letter to refer to a default import of a stylesheet root. @st-import Comp from './comp.st.css'; /* style all Comp nested under root */ .root Comp {}","s":"Component element","u":"/docs/references/type-selectors","h":"#component-element","p":547},{"i":555,"t":"Stylable validates that a type selector is scoped to the stylesheet it is in. To target a type selector, compound it or scope it under a local class in order to avoid styling unrelated elements outside the scope of the stylesheet. /* error - unscoped selector */ div {} /* valid */ .root div {} div.root {} reuse scope Scope rules with the @st-scope at-rule to minimize selector verbosity. @st-scope .root { div {} }","s":"Scoping","u":"/docs/references/type-selectors","h":"#scoping","p":547},{"i":557,"t":"Component elements, with capital first letter, can be exported from a stylesheet if used in a selector. You can import them within the @st-import named import brackets. index.st.css @st-import Button from './button.st.css'; @st-import Menu from './menu.st.css'; .root Button {} .root Menu {} theme.st.css @st-import [Button, Menu] from './index.st.css'; @st-scope .root { /* customize all buttons nested in theme root */ Button {} /* customize all menus nested in theme root */ Menu {} }","s":"Import and Export","u":"/docs/references/type-selectors","h":"#import-and-export","p":547},{"i":559,"t":"Elements are not available on the Stylable stylesheet runtime.","s":"Runtime","u":"/docs/references/type-selectors","h":"#runtime","p":547},{"i":561,"t":"Native elements are not namespaced. However, if an element originates from a class, like a component element default import, then it is transformed during build. entry.st.css @st-import Button from './button.st.css'; .root Button {} .root div {} /* OUTPUT */ .entry__root .button__root {} .entry__root div {}","s":"Namespace","u":"/docs/references/type-selectors","h":"#namespace","p":547},{"i":563,"t":"You can write content using GitHub-flavored Markdown syntax.","s":"Style Guide","u":"/docs/style-guide","h":"","p":562},{"i":565,"t":"To serve as an example page when styling markdown based Docusaurus sites.","s":"Markdown Syntax","u":"/docs/style-guide","h":"#markdown-syntax","p":562},{"i":570,"t":"H4 - Create the best documentation​ H5 - Create the best documentation​ H6 - Create the best documentation​","s":"H3 - Create the best documentation","u":"/docs/style-guide","h":"#h3---create-the-best-documentation","p":562},{"i":572,"t":"Emphasis, aka italics, with asterisks or underscores. Strong emphasis, aka bold, with asterisks or underscores. Combined emphasis with asterisks and underscores. Strikethrough uses two tildes. Scratch this.","s":"Emphasis","u":"/docs/style-guide","h":"#emphasis","p":562},{"i":574,"t":"First ordered list item Another item Unordered sub-list. Actual numbers don't matter, just that it's a number Ordered sub-list And another item. Unordered list can use asterisks Or minuses Or pluses","s":"Lists","u":"/docs/style-guide","h":"#lists","p":562},{"i":576,"t":"I'm an inline-style link I'm an inline-style link with title I'm a reference-style link You can use numbers for reference-style link definitions Or leave it empty and use the link text itself. URLs will automatically get turned into links. http://www.example.com/ and sometimes example.com (but not on GitHub, for example). Some text to show that the reference links can follow later.","s":"Links","u":"/docs/style-guide","h":"#links","p":562},{"i":578,"t":"Here's our logo (hover to see the title text): Inline-style: Reference-style: Images from any folder can be used by providing path to file. Path should be relative to markdown file.","s":"Images","u":"/docs/style-guide","h":"#images","p":562},{"i":580,"t":"var s = 'JavaScript syntax highlighting'; alert(s); s = \"Python syntax highlighting\" print(s) No language indicated, so no syntax highlighting. But let's throw in a tag. function highlightMe() { console.log('This line can be highlighted!'); }","s":"Code","u":"/docs/style-guide","h":"#code","p":562},{"i":582,"t":"Colons can be used to align columns. Tables Are Cool col 3 is right-aligned $1600 col 2 is centered $12 zebra stripes are neat $1 There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown. Markdown Less Pretty Still renders nicely 1 2 3","s":"Tables","u":"/docs/style-guide","h":"#tables","p":562},{"i":584,"t":"Blockquotes are very handy in email to emulate reply text. This line is part of the same quote. Quote break. This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.","s":"Blockquotes","u":"/docs/style-guide","h":"#blockquotes","p":562},{"i":586,"t":"Definition list Is something people use sometimes. Markdown in HTML Does not work very well. Use HTML tags.","s":"Inline HTML","u":"/docs/style-guide","h":"#inline-html","p":562},{"i":588,"t":"Here's a line for us to start with. This line is separated from the one above by two newlines, so it will be a separate paragraph. This line is also a separate paragraph, but... This line is only separated by a single newline, so it's a separate line in the same paragraph.","s":"Line Breaks","u":"/docs/style-guide","h":"#line-breaks","p":562},{"i":590,"t":"note This is a note tip This is a tip important This is important caution This is a caution warning This is a warning","s":"Admonitions","u":"/docs/style-guide","h":"#admonitions","p":562},{"i":592,"t":"Stylable supports usage of url functions to use assets as you normally would in CSS. The value passed to the url() function is resolved differently in CSS as comapred to the Node request resolution algorithm, used for Stylable stylesheet and symbol resolutions. The url() function has no notion of external packages or dependencies.","s":"url()","u":"/docs/references/using-external-assets","h":"","p":591},{"i":594,"t":"In order to import url() assets from dependencies inside your node_modules directory, Stylable supports the ~ URL prefix. .root { /* resolves as the node request: \"my-package/asset.png\" */ background: url(~my-package/asset.png); } .root { /* resolves as the node request: \"./my-package/asset.png\" */ background: url(my-package/asset.png); }","s":"Resolving 3rd-party assets","u":"/docs/references/using-external-assets","h":"#resolving-3rd-party-assets","p":591}],"index":{"version":"2.3.9","fields":["t"],"fieldVectors":[["t/3",[0,3.163,1,2.798,2,5.017,3,0.988,4,5.017,5,3.726,6,5.017,7,2.45,8,4.009,9,4.009,10,1.71,11,2.133,12,1.557,13,3.408,14,4.662,15,1.267,16,2.568,17,3,18,3.726,19,1.957,20,5.017,21,4.662,22,2.851,23,3.504,24,2.851,25,3.609,26,2.812,27,4.397,28,3.238,29,3.504,30,2.488,31,3.858,32,2.851,33,3.027,34,5.017,35,4.009,36,2.798,37,3.027,38,4.185,39,4.662]],["t/5",[3,0.758,4,5.199,5,3.862,6,5.199,7,2.539,8,4.155,9,4.155,10,1.772,11,2.211,12,1.613,13,3.531,14,4.832,15,1.313,16,2.661,17,3.072,18,3.862,19,2.028,20,5.199,21,4.832,22,2.954,23,3.631,24,2.954,25,3.74,26,2.88,27,4.557,28,3.356,29,3.631,30,2.578,31,3.999,32,2.954,33,3.137,34,5.199,35,4.155,36,2.9,37,3.137,38,4.338,39,4.832]],["t/7",[3,1.095,5,4.893,10,1.638,12,2.044,21,4.466,30,3.267,32,2.731,37,3.974,40,5.323,41,5.323,42,5.323,43,4.466,44,2.68,45,4.6,46,5.323,47,1.875,48,4.806,49,5.323,50,2.46,51,5.323,52,3.57,53,5.248,54,6.122,55,5.323,56,3.841,57,2.6,58,2.963,59,4.466,60,5.323,61,2.632,62,4.806,63,4.01,64,5.323,65,5.323,66,5.323,67,5.323,68,4.466]],["t/9",[3,1.051,11,2.338,26,2.989,27,4.819,33,3.318,58,3.39,69,5.11,70,5.499,71,5.11,72,6.089,73,3.638,74,5.11,75,4.394,76,5.11,77,3.067,78,5.499,79,4.394,80,5.499,81,5.11,82,3.956,83,6.089,84,4.819,85,3.067,86,6.089,87,6.089,88,6.015,89,5.499,90,4.587,91,4.587,92,6.089]],["t/11",[3,1.006,11,2.191,25,3.707,26,2.863,30,3.425,32,2.928,43,4.788,44,2.873,57,2.034,58,3.176,79,4.118,93,4.354,94,5.153,95,5.311,96,5.706,97,5.706,98,3.827,99,5.761,100,4.788,101,4.788,102,6.905,103,3.963,104,3.326,105,5.706,106,5.706,107,4.788,108,3.827,109,3.963,110,2.773,111,5.706,112,4.788,113,5.706,114,3.707]],["t/13",[1,2.719,2,3.179,3,1.046,5,2.361,7,1.553,10,1.084,13,2.159,15,1.499,17,1.406,18,2.361,22,3.371,24,1.806,26,1.318,27,2.786,30,2.942,33,1.918,37,1.918,38,2.652,39,2.954,44,3.308,50,1.627,53,2.22,58,3.006,71,5.513,74,4.531,77,1.773,90,2.652,91,2.652,95,3.75,101,2.954,107,4.531,108,2.361,109,2.445,115,2.786,116,1.741,117,2.652,118,3.52,119,2.954,120,4.274,121,3.52,122,3.52,123,3.52,124,4.531,125,1.334,126,2.652,127,2.216,128,3.52,129,2.361,130,3.405,131,3.52,132,3.52,133,2.445,134,2.652,135,2.22,136,3.52,137,5.4,138,1.96,139,3.52,140,2.786,141,3.179,142,2.954,143,3.52,144,2.652,145,2.954,146,2.361,147,1.017,148,2.786,149,3.52,150,6.569,151,1.301,152,3.179,153,1.553,154,3.52,155,3.52,156,3.52,157,3.52,158,3.179,159,2.954,160,3.52,161,2.361,162,3.52,163,3.52,164,3.179]],["t/16",[100,7.691,127,2.652,165,4.663,166,0.745,167,6.462,168,3.315,169,7.254,170,6.462,171,10.236,172,6.462,173,6.462,174,6.462,175,6.462,176,6.462,177,6.462,178,6.462,179,6.462,180,6.462]],["t/18",[3,1.004,28,4.446,30,3.416,57,2.719,133,5.297,166,0.88,181,6.888,182,6.888,183,5.116,184,7.628,185,4.558,186,5.746]],["t/20",[3,1.025,7,3.435,17,2.342,30,2.626,57,2.09,77,3.922,127,2.406,166,0.676,186,5.867,187,2.09,188,3.809,189,3.264,190,3.339,191,3.698,192,4.418,193,3.933,194,3.809,195,2.667,196,3.195,197,2.511,198,1.129,199,2.09,200,3.809,201,4.073,202,5.867,203,5.867,204,5.295,205,5.867,206,7.033]],["t/22",[3,0.923,7,3.562,16,2.323,17,2.008,30,3.14,57,1.792,77,2.532,127,2.063,166,0.809,186,7.359,188,5.246,189,2.799,191,3.17,194,3.266,195,3.19,196,2.739,197,2.153,198,0.968,199,1.792,200,3.266,201,3.491,202,5.283,203,5.283,204,4.54,205,5.283,206,6.332,207,4.219,208,6.084,209,5.885,210,3.787,211,2.362,212,3.491,213,3.628,214,5.027]],["t/24",[3,0.958,10,2.24,11,2.794,31,5.054,32,3.734,33,3.965,57,2.594,109,5.054,110,3.536,114,4.728,200,4.728,215,5.054,216,5.252,217,4.242,218,5.252,219,3.162]],["t/27",[1,2.032,3,1.11,9,2.912,10,2.596,11,1.549,12,2.475,15,1.924,19,1.421,29,3.775,36,2.032,45,3.775,47,1.421,147,1.166,151,1.492,164,3.644,166,0.823,188,2.621,212,2.802,219,1.753,220,5.986,221,3.672,222,3.644,223,2.912,224,2.297,225,2.153,226,1.703,227,3.04,228,2.545,229,4.035,230,1.203,231,4.035,232,3.386,233,1.013,234,2.491,235,0.87,236,1.312,237,3.644,238,2.545,239,2.475,240,4.035,241,4.035,242,3.194,243,2.032,244,3.644,245,4.035,246,3.194,247,4.035,248,6.444,249,3.386,250,2.352,251,3.194,252,1.896,253,3.644,254,2.912,255,3.386,256,3.194,257,2.475,258,3.644,259,3.644,260,4.035]],["t/29",[3,1.167,19,2.125,28,4.625,30,3.553,36,3.037,50,2.788,57,2.828,181,5.447,182,5.447,195,3.609,219,2.621,261,5.003,262,3.803,263,3.803,264,3.699,265,2.881,266,2.983,267,4.189,268,4.189,269,4.045,270,3.803,271,3.727,272,3.918,273,4.189,274,5.061,275,5.447]],["t/31",[3,1.245,11,2.096,26,2.044,31,5.155,32,2.802,94,4.931,108,3.662,109,3.792,110,2.653,114,3.547,116,2.7,147,1.578,153,3.72,161,3.662,166,0.856,217,3.183,218,3.94,219,2.372,252,2.565,271,3.487,276,6.086,277,5.46,278,4.582,279,4.435,280,5.46,281,4.931,282,5.46,283,5.46,284,4.321,285,4.931,286,5.46,287,5.46,288,5.46]],["t/33",[3,0.712,12,2.353,36,2.726,44,2.726,47,2.6,50,2.502,53,3.414,57,3.471,82,3.517,85,2.726,147,1.564,189,4.674,191,3.414,192,4.078,289,4.543,290,4.108,291,4.285,292,5.413,293,5.632,294,7.38,295,4.078,296,3.517,297,4.543,298,4.794,299,4.889,300,5.413,301,5.413,302,4.889,303,4.543,304,2.586,305,3.907]],["t/35",[3,0.868,12,1.848,17,2.634,19,2.324,44,3.322,50,3.049,57,2.997,166,0.761,189,3.672,194,4.285,197,2.824,198,1.619,199,2.351,265,3.151,272,4.285,293,4.424,306,4.969,307,3.594,308,4.581,309,6.596,310,4.969,311,1.319,312,4.424]],["t/38",[3,0.926,15,1.605,142,5.904,166,1.01,189,3.916,190,4.005,191,4.437,195,3.2,208,5.3,262,4.437,290,3.916,313,7.035,314,7.347,315,4.101,316,3.151,317,4.57,318,2.508]],["t/40",[0,3.136,3,1.249,47,1.94,50,4.197,166,0.977,198,1.438,228,3.473,262,3.473,266,4.492,279,3.291,298,3.578,317,3.578,319,6.307,320,5.91,321,5.682,322,3.974,323,3.974,324,3.291,325,3.825,326,3.136,327,3.694,328,4.149,329,2.631,330,4.359,331,5.508]],["t/42",[124,6.811,219,3.526,323,5.857,332,4.621,333,7.329,334,5.636,335,8.116]],["t/44",[3,1.051,12,1.706,50,4.37,57,2.846,100,5.11,133,4.229,166,0.921,188,3.956,189,3.39,195,2.77,248,5.499,253,5.499,270,3.84,274,5.11,329,2.909,336,3.84,337,3.318,338,5.499,339,5.11,340,5.499,341,4.587,342,7.21,343,6.089,344,4.084,345,5.499,346,4.229]],["t/46",[3,0.947,10,2.215,11,2.763,31,4.997,32,3.692,57,2.565,109,4.997,110,3.496,114,4.674,215,4.997,216,5.192,217,4.194,218,5.192,219,3.126,265,3.437,347,6.497,348,6.497]],["t/48",[3,1.054,19,2.823,23,5.053,44,4.036,47,2.823,50,3.704,191,5.053,208,6.037]],["t/50",[16,3.147,57,2.427,166,0.989,202,6.462,203,6.462,267,5.957,349,8.481,350,5.347,351,7.433,352,3.969,353,2.915,354,5.714]],["t/52",[26,2.549,153,3.003,265,3.252,318,2.427,349,6.148,350,5.347,355,6.809,356,3.198,357,1.135,358,7.746,359,6.809,360,4.294,361,5.714,362,6.148]],["t/54",[3,0.815,15,1.412,16,3.387,50,1.952,69,3.544,127,1.733,187,1.506,190,3.525,219,1.835,238,2.663,262,3.904,263,2.663,265,3.501,318,2.612,329,2.017,342,7.288,350,2.405,356,1.984,357,1.136,360,2.663,363,5.195,364,4.664,365,3.118,366,4.664,367,5.413,368,4.223,369,4.223,370,3.814,371,3.343,372,3.048,373,4.223,374,4.223,375,4.223,376,4.299,377,3.182,378,3.343,379,3.814,380,4.223,381,2.052,382,3.048,383,4.223,384,3.048,385,2.301,386,2.744]],["t/56",[29,4.034,33,3.485,47,2.253,48,5.776,50,2.956,57,2.938,166,0.738,196,3.485,265,3.938,271,3.005,318,2.938,339,5.368,387,4.442,388,5.776,389,5.776,390,5.063,391,5.063,392,4.155,393,5.063,394,5.776,395,6.397,396,4.442,397,2.253,398,4.034,399,3.346]],["t/58",[3,0.515,5,2.623,15,0.892,30,1.751,50,1.807,127,1.605,147,1.13,166,0.451,187,1.394,190,2.227,195,1.779,197,1.675,209,3.282,230,1.744,233,1.469,261,2.466,265,1.868,266,1.934,269,2.623,304,2.794,350,3.33,356,3.291,357,1.172,360,2.466,365,1.97,381,1.9,385,2.131,387,2.716,400,3.911,401,1.521,402,2.822,403,3.186,404,2.046,405,4.629,406,3.587,407,4.908,408,4.908,409,3.532,410,3.282,411,5.848,412,3.532,413,5.848,414,3.911,415,3.688,416,3.911,417,3.688,418,2.946,419,3.911,420,3.532,421,3.532,422,3.911,423,3.911]],["t/60",[3,0.533,17,3.023,19,0.865,25,1.596,26,0.92,47,2.787,50,1.135,57,2.369,73,1.468,82,1.596,103,4.171,125,0.931,138,1.367,153,1.083,166,0.597,168,1.26,187,0.876,190,1.398,193,1.648,198,0.473,199,0.876,200,2.633,201,1.706,208,1.851,224,2.308,243,1.237,265,1.936,266,3.539,272,1.596,297,2.061,305,1.773,326,1.398,356,1.904,357,1.147,385,2.208,396,1.706,398,1.549,399,1.285,401,0.955,402,1.773,403,1.117,406,1.507,415,1.549,424,6.835,425,2.041,426,1.648,427,1.303,428,2.184,429,7.155,430,2.719,431,1.432,432,3.66,433,3.66,434,0.818,435,3.054,436,3.054,437,3.054,438,1.851,439,0.826,440,2.218,441,2.456,442,2.456,443,2.815,444,1.285,445,2.456,446,2.456,447,2.456,448,2.392,449,3.344,450,5.175,451,6.647,452,2.456,453,2.456,454,2.456,455,4.054,456,2.456,457,4.054,458,2.456,459,2.456,460,4.054,461,2.456,462,2.456,463,1.648]],["t/62",[3,1.078,25,4.114,26,2.371,47,2.231,50,2.927,57,2.257,153,2.793,166,1.047,168,3.249,190,5.168,265,3.025,266,3.132,318,2.257,327,4.247,350,3.605,367,4.247,387,4.398,401,3.186,402,4.57,464,7.396,465,5.314,466,6.333]],["t/64",[3,1,7,1.411,15,1.144,16,2.318,30,2.246,47,1.127,50,1.479,57,1.141,73,1.912,75,2.309,104,1.865,127,1.313,147,0.925,190,3.521,193,4.148,230,0.954,265,2.954,267,2.223,311,0.64,317,2.079,318,2.496,327,2.146,329,1.529,341,4.659,350,4.329,356,2.905,357,1.163,360,2.018,364,3.778,365,1.612,366,3.778,367,3.364,371,3.97,372,2.309,376,3.483,378,2.533,381,1.555,396,2.223,399,1.674,401,1.245,404,1.674,425,1.612,428,1.351,439,1.076,463,2.146,467,2.686,468,2.686,469,3.778,470,3.2,471,2.686,472,4.209,473,2.533,474,2.686,475,5.875,476,2.686,477,2.686,478,4.209,479,2.146,480,2.533,481,2.309,482,2.686,483,1.865,484,3.2,485,3.2]],["t/66",[3,0.788,15,0.695,16,2.23,19,1.073,30,2.683,47,1.073,57,1.086,61,1.507,73,1.82,82,3.134,104,2.812,147,0.88,166,0.351,190,3.879,191,3.042,193,4.018,198,0.587,230,0.908,239,1.869,265,3.254,298,1.979,311,0.609,317,1.979,318,1.086,324,1.82,337,1.66,341,3.635,350,3.879,356,2.814,357,1.169,360,1.921,364,2.295,366,2.295,367,3.236,371,2.411,372,2.198,376,4.16,378,2.411,381,1.48,396,2.116,399,1.594,404,1.594,425,1.534,428,1.286,439,1.024,463,3.236,469,3.635,472,2.556,473,2.411,474,2.556,475,5.717,476,2.556,477,2.556,478,2.556,479,2.043,480,2.411,481,2.198,482,2.556,486,2.751,487,2.411,488,2.411,489,5.99,490,6.813,491,2.198,492,1.734,493,2.116,494,2.411,495,3.046,496,3.046,497,3.046]],["t/68",[3,1.028,50,3.612,57,2.786,153,3.447,168,4.01,194,6.065,219,3.396,265,3.733,341,5.888]],["t/70",[3,0.911,15,1.923,16,1.225,30,1.933,33,1.445,36,1.335,44,1.335,47,0.934,50,1.225,61,2.134,73,1.584,104,1.546,147,0.766,187,1.538,188,1.722,190,3.107,191,1.672,193,3.66,195,1.206,197,1.135,198,0.511,205,4.111,230,0.791,242,2.099,246,2.099,262,1.672,265,2.061,304,2.061,316,1.933,317,3.545,318,1.538,319,1.841,321,1.778,339,2.225,340,3.897,341,3.251,350,2.457,351,2.099,356,2.564,357,1.151,360,1.672,364,1.998,366,1.998,367,2.895,371,2.099,372,1.913,376,2.997,378,2.099,379,2.394,381,1.288,385,1.445,396,1.841,398,3.441,399,2.855,403,2.482,404,1.387,425,1.335,428,1.119,439,0.892,472,2.225,473,2.099,474,2.225,475,5.278,476,2.225,477,2.225,478,2.225,479,1.778,480,2.099,481,1.913,482,2.225,498,2.394,499,4.58,500,2.652,501,2.394,502,2.997,503,2.394,504,2.652,505,2.225,506,2.652,507,1.51,508,4.316,509,5.457,510,2.652,511,1.267,512,2.099,513,2.225,514,2.652]],["t/72",[3,1.144,19,2.451,22,3.57,77,3.504,195,3.165,199,2.48,252,3.269,261,4.388,268,4.832,269,4.667,270,4.388,271,3.269,272,4.52,273,4.832,319,4.832,515,5.839,516,6.958,517,5.839,518,6.958]],["t/74",[3,1.106,90,4.969,169,5.221,267,5.839,268,5.839,269,5.639,271,3.949,274,7.055,275,7.592,402,4.76,519,8.407,520,5.957,521,6.596,522,6.596,523,6.596,524,6.596,525,6.596]],["t/76",[3,1.204,15,2.087,16,3.95,32,2.876,127,2.3,166,0.646,185,3.349,195,2.549,213,4.045,219,2.435,268,5.247,269,6.405,318,1.998,365,2.823,526,3.191,527,5.061,528,5.605,529,4.222,530,6.823,531,5.061,532,5.605,533,3.892,534,5.605,535,2.549,536,4.045,537,5.061,538,5.605,539,5.605]],["t/78",[3,1.037,15,1.799,22,4.046,26,2.237,77,3.009,116,3.899,117,4.501,195,4.014,213,4.312,217,3.483,261,3.768,268,4.149,270,3.768,318,2.13,319,5.476,332,3.402,386,3.881,530,5.395,540,5.975,541,5.975,542,4.501,543,5.395,544,4.729,545,5.975,546,5.975,547,5.975,548,5.975,549,5.975]],["t/80",[3,0.886,32,3.456,47,2.373,57,3.037,166,0.777,183,4.518,197,2.884,198,1.297,219,2.927,296,4.376,298,4.376,304,3.218,316,3.017,318,2.401,328,5.075,392,4.376,513,5.653,550,4.518,551,6.083,552,6.083,553,4.518,554,5.075]],["t/82",[16,3.568,202,6.982,203,6.982,267,5.362,351,6.111,354,6.479,550,6.216,555,7.721]],["t/84",[3,0.916,19,2.451,32,3.57,103,4.832,200,4.52,201,4.832,265,3.324,266,3.441,267,4.832,318,2.48,430,6.362,483,5.069,492,3.962,550,4.667,556,6.283,557,5.242,558,4.388]],["t/86",[3,0.993,15,1.722,16,1.014,32,1.892,47,0.772,57,1.315,61,1.824,75,2.661,103,1.523,125,0.831,138,3.764,144,2.778,187,0.782,193,1.471,197,2.672,198,0.422,199,1.315,200,1.425,221,1.345,226,0.926,230,0.654,233,0.551,242,1.736,254,1.583,266,1.085,269,1.471,273,3.315,304,2.981,311,0.438,315,2.15,318,2.973,325,2.561,330,1.736,348,1.98,357,0.522,365,1.857,376,3.315,384,1.583,385,2.6,387,1.523,397,1.681,398,3.529,401,0.853,405,1.736,415,3.01,420,1.98,435,1.652,437,1.652,438,2.778,439,2.728,465,1.84,479,6.046,481,1.583,499,3.095,511,1.048,554,2.778,557,1.652,559,1.471,560,0.763,561,2.193,562,1.523,563,2.661,564,3.33,565,2.193,566,4.31,567,0.763,568,1.98,569,1.84,570,1.84,571,3.201,572,3.33,573,2.193,574,2.919,575,1.84,576,1.98,577,1.98,578,1.98,579,2.193,580,3.688,581,2.193,582,1.652,583,1.84,584,0.602,585,1.98,586,2.193,587,1.425,588,1.98,589,2.193,590,2.193,591,2.193,592,1.652,593,2.193,594,2.193,595,2.193,596,1.98,597,2.193,598,1.345,599,1.98,600,1.84,601,2.193,602,1.652,603,2.193,604,1.652,605,1.736,606,1.84,607,1.84,608,3.33,609,2.193,610,3.688,611,2.474,612,2.193,613,2.193,614,1.652,615,2.193,616,3.095,617,2.193,618,2.193,619,2.193]],["t/88",[3,0.947,11,2.763,57,2.565,166,0.83,196,3.92,197,3.081,318,2.565,388,6.497,401,2.799,430,4.826,463,4.826,513,6.038,554,5.42,620,7.195,621,7.195,622,7.195,623,7.195]],["t/90",[138,3.515,147,1.254,151,1.604,166,0.5,187,1.547,197,3.881,198,0.836,230,1.294,235,1.604,311,0.868,316,1.943,318,1.547,326,2.47,356,2.038,357,1.148,381,3.068,397,2.224,401,3.18,434,0.876,448,2.005,449,2.415,550,2.91,584,1.191,588,3.918,624,3.013,625,2.91,626,4.238,627,2.108,628,4.339,629,4.339,630,3.641,631,3.918,632,2.529,633,6.314,634,3.434,635,4.339,636,4.339,637,2.27,638,3.013,639,1.806,640,4.339,641,4.339,642,4.339,643,4.339]],["t/92",[3,1.099,17,3.335,19,2.3,36,3.288,61,3.229,147,1.887,194,5.425,198,1.257,213,4.711,235,1.407,311,1.841,318,2.977,357,1.008,365,3.288,644,6.528,645,6.528,646,4.534,647,4.918]],["t/94",[3,0.947,11,2.763,17,2.873,19,2.534,197,3.081,198,1.71,224,5.055,318,2.565,361,6.038,648,3.173,649,6.038,650,7.195,651,6.497,652,6.497,653,3.273]],["t/96",[3,0.417,11,1.216,12,0.888,17,3.728,19,1.753,25,2.058,26,1.186,57,1.774,77,1.596,82,2.058,93,1.804,108,2.125,114,2.058,138,4.212,159,2.659,166,0.574,194,3.992,196,1.726,197,3.439,198,1.457,199,2.482,226,2.1,262,3.138,265,1.513,296,2.058,307,2.711,308,3.456,318,3.189,326,1.804,329,1.513,357,1.077,365,1.596,398,3.138,425,1.596,434,1.24,436,3.749,494,2.508,564,4.494,576,2.861,578,2.861,583,2.659,647,2.387,653,1.441,654,3.168,655,2.861,656,2.861,657,3.338,658,2.659,659,3.168,660,2.861,661,3.168,662,3.168,663,2.861,664,3.168,665,2.659,666,2.659,667,3.168,668,3.168,669,3.168,670,2.387,671,6.145,672,3.168,673,2.125,674,3.168]],["t/98",[3,0.731,5,3.726,17,3.398,19,1.957,24,2.851,50,2.568,73,3.32,98,3.726,103,3.858,138,3.093,166,0.866,187,1.98,197,3.643,199,1.98,226,2.345,265,2.654,308,3.858,318,2.677,387,3.858,389,5.017,396,3.858,398,3.504,403,2.527,430,5.038,434,1.121,435,4.185,437,4.185,438,5.658,463,5.038,479,3.726,577,5.017,673,3.726,675,5.017,676,5.556]],["t/100",[3,0.784,7,2.628,17,2.839,30,1.796,44,2.019,50,1.853,57,1.429,77,2.019,125,2.259,166,0.462,190,3.392,197,2.551,198,0.772,208,4.489,209,3.365,219,1.742,265,3.396,266,1.983,270,2.529,308,2.785,310,3.021,314,5,318,2.124,334,2.785,350,4.481,352,2.337,356,1.884,357,1.107,358,3.621,367,2.689,385,4.288,387,4.138,404,3.117,424,6.42,432,3.621,433,3.621,434,0.809,435,3.021,436,3.021,437,3.021,438,3.021,444,2.097,483,2.337,543,3.621,677,4.01,678,3.621,679,2.396,680,3.174,681,3.621,682,1.742,683,5.958,684,2.689]],["t/102",[3,0.737,7,2.472,16,2.59,17,2.238,19,1.974,57,1.998,77,2.823,127,2.3,159,4.703,187,1.998,197,3.235,198,1.455,224,3.191,254,4.045,304,2.677,308,3.892,318,1.998,356,2.633,357,0.935,365,3.805,398,3.534,401,2.939,436,4.222,648,3.77,685,4.436,686,2.677,687,5.605,688,5.605,689,6.34,690,5.061,691,6.34,692,4.703]],["t/104",[17,3.508,57,2.11,82,5.09,187,2.11,197,2.534,198,1.14,224,3.37,228,3.732,279,3.537,296,3.845,298,3.845,304,2.827,308,4.111,318,2.11,356,2.78,357,0.961,365,2.981,401,3.048,487,4.684,648,3.456,686,2.827,689,4.967,690,5.345,691,6.575,692,4.967,693,5.919,694,3.97,695,5.919]],["t/106",[53,4.34,57,2.453,82,4.471,95,4.78,146,4.616,296,5.61,298,4.471,308,4.78,318,3.079,365,3.466,430,4.616,438,5.185,575,5.776,656,6.215,660,6.215,675,6.215,696,5.447,697,6.883,698,6.883]],["t/108",[3,1.054,19,2.823,23,5.053,44,4.036,47,2.823,50,3.704,190,4.562,191,5.053]],["t/110",[16,3.147,57,2.427,166,0.989,202,6.462,203,6.462,267,5.957,350,5.347,351,7.433,352,3.969,353,2.915,354,5.714,469,7.075]],["t/112",[3,0.833,16,2.927,26,2.371,30,2.836,33,3.45,153,2.793,190,3.605,265,3.025,318,2.257,350,5.168,356,2.975,357,1.114,361,5.314,362,5.719,367,6.089,372,4.57,376,4.398,403,2.881,469,4.771,699,6.333]],["t/114",[3,0.718,15,1.924,30,2.445,38,4.113,50,3.431,56,3.94,57,1.946,147,1.578,166,0.63,190,3.109,263,3.443,304,2.608,318,1.946,329,2.608,350,4.226,356,2.565,357,1.168,364,6.354,365,2.75,366,5.592,367,4.979,372,3.94,700,2.372,701,5.46,702,5.46]],["t/116",[3,0.833,57,2.257,93,3.605,125,2.401,187,2.257,190,3.605,193,4.247,265,3.025,350,3.605,357,1.134,376,5.688,381,3.077,385,4.462,387,4.398,401,2.463,402,4.57,403,2.881,464,5.719,608,5.719,703,6.333,704,6.333]],["t/118",[12,2.726,47,2.593,147,2.127,166,0.849,189,4.098,293,4.938,336,4.643,427,2.367,705,6.178,706,6.178,707,4.291,708,4.643,709,6.648]],["t/120",[3,0.744,12,2.406,15,1.29,57,2.016,166,0.877,198,1.464,235,1.638,311,1.52,357,0.832,427,2.444,434,1.534,448,3.513,557,4.26,584,2.087,624,3.927,647,4.26,707,4.431,710,5.655,711,5.655,712,5.485,713,6.378,714,2.457,715,5.098,716,3.468,717,4.081,718,3.793]],["t/122",[3,0.689,12,2.021,93,2.98,166,0.604,198,1.008,235,1.128,264,3.211,311,1.047,332,2.98,357,1.101,397,2.54,434,1.456,448,3.333,560,2.511,571,4.837,627,2.544,709,4.727,712,3.778,713,7.825,719,3.635,720,2.852,721,2.743,722,3.944,723,5.235,724,7.212,725,5.235,726,5.235,727,2.793,728,3.051,729,2.793]],["t/124",[3,1.183,11,2.384,12,2.52,15,1.416,45,3.915,47,2.187,99,4.677,127,2.548,135,3.915,151,2.295,197,2.658,198,1.196,217,3.619,219,2.698,225,3.313,256,4.914,307,3.383,679,3.71,728,3.619,730,6.209,731,4.164,732,5.607,733,5.607,734,6.209,735,6.209,736,4.312,737,5.21]],["t/126",[11,2.456,12,1.792,15,1.459,133,4.442,148,5.063,166,0.738,187,2.28,329,3.055,403,2.91,428,2.7,491,4.616,583,5.368,627,4.006,648,3.636,727,3.413,738,4.29,739,5.909,740,6.524,741,6.397,742,6.397,743,6.397,744,5.368]],["t/128",[3,0.604,11,1.763,12,1.843,15,1.047,58,2.555,146,3.079,151,2.431,166,0.758,197,1.966,211,2.156,212,3.188,216,3.313,227,3.458,234,2.736,235,1.417,236,2.138,270,2.895,291,3.633,357,1.169,401,1.785,567,1.598,571,3.079,584,1.806,721,2.186,727,2.45,728,2.676,733,4.145,745,4.59,746,4.59,747,4.59,748,5.938,749,4.59,750,3.313,751,3.458,752,3.852,753,4.145,754,4.59,755,4.59,756,4.59,757,3.852,758,4.59]],["t/130",[12,2.384,17,2.219,147,2.17,166,0.641,236,2.766,279,3.32,320,4.397,357,0.608,397,2.646,494,4.397,567,1.934,616,4.662,646,3.858,655,5.017,686,2.654,721,3.03,727,4.008,728,3.238,729,2.965,738,3.726,759,4.662,760,3.504,761,3.504,762,4.185,763,3.858,764,4.662,765,5.556,766,4.185,767,2.906,768,4.397,769,7.511,770,4.662]],["t/132",[12,2.063,15,2.054,45,4.643,58,4.098,219,3.912,238,4.643,377,5.546,771,6.648,772,7.362,773,7.362,774,4.938,775,5.113,776,5.827]],["t/134",[12,1.723,57,2.192,58,4.473,59,5.16,134,4.632,151,2.273,166,0.927,198,1.184,266,3.041,357,0.879,682,3.491,696,4.866,714,4.123,731,4.124,777,6.148,778,6.148,779,8.034,780,6.148,781,5.552,782,3.994,783,6.148,784,6.148,785,4.632,786,5.552]],["t/136",[10,2.326,12,2.676,13,3.438,15,1.279,16,2.59,19,1.974,24,2.876,33,3.054,47,1.974,53,3.534,80,5.061,125,2.125,134,4.222,161,3.759,166,0.871,187,3.047,189,3.12,198,1.08,236,1.822,246,4.436,257,3.438,403,2.549,491,5.453,632,3.267,707,4.404,744,4.703,787,5.605,788,5.605,789,5.605,790,5.605,791,4.436,792,4.045]],["t/138",[12,2.245,29,5.053,279,4.788,551,7.236,627,3.894,721,2.664,793,7.236,794,6.725]],["t/140",[7,1.85,10,1.896,12,2.401,15,0.957,17,2.46,26,2.306,93,2.389,125,1.591,166,0.484,198,0.808,234,2.564,235,0.904,236,2.373,264,2.573,276,4.446,279,5.12,328,3.161,332,2.389,357,1.039,397,2.17,427,1.349,627,4.164,632,2.446,707,4.995,721,3.078,727,2.239,728,2.446,729,2.239,767,2.195,774,2.814,792,3.028,795,2.725,796,4.196,797,2.814,798,3.028,799,4.196,800,3.789,801,4.196,802,3.789,803,2.646,804,3.789,805,3.521,806,4.196]],["t/142",[15,1.683,16,2.502,32,2.778,36,2.726,44,2.726,56,3.907,147,1.564,187,1.93,198,1.043,212,3.76,243,2.726,271,2.543,307,2.949,346,3.76,357,0.987,403,2.462,467,4.543,527,4.889,607,6.193,627,3.586,648,2.388,678,4.889,700,2.352,714,3.207,752,4.543,774,3.631,775,3.76,807,4.889,808,5.413,809,4.543,810,5.413,811,5.413,812,3.907,813,4.543,814,4.543,815,5.413,816,5.413,817,5.413,818,5.413]],["t/144",[3,0.886,15,1.537,57,2.401,98,4.518,198,1.297,311,1.704,357,0.932,434,1.36,639,2.803,682,2.927,712,4.861,739,4.132,785,5.075,819,3.165,820,4.861,821,6.49,822,7.15,823,6.083]],["t/146",[10,1.989,11,2.481,12,2.325,15,1.474,135,4.075,138,3.597,151,2.389,165,4.663,166,0.957,211,3.035,236,2.697,317,5.39,326,3.679,328,4.868,390,5.114,670,4.868,682,2.808,728,3.767,761,4.075,792,4.663,793,5.835,794,5.422,824,6.462]],["t/148",[3,0.969,10,2.266,15,1.679,47,2.593,166,0.849,235,1.587,236,2.393,503,6.648,542,5.546,567,2.563,587,4.782,761,4.643,814,6.178,825,6.178,826,5.827]],["t/150",[7,2.66,15,2.022,26,2.258,28,3.516,108,4.045,114,3.918,127,2.475,198,1.162,235,1.911,236,1.961,357,0.97,427,1.939,567,2.1,584,1.656,682,3.447,714,3.447,827,6.031,828,5.061,829,3.699,830,3.924,831,3.996,832,3.855,833,3.699]],["t/152",[3,0.651,7,2.183,15,1.582,26,2.596,58,2.755,61,2.447,68,4.153,74,4.153,166,0.8,168,2.539,198,0.953,199,1.764,219,2.15,230,2.388,235,1.495,246,3.917,264,3.035,271,2.325,315,2.885,327,3.319,329,2.364,357,0.759,417,3.121,418,3.728,611,3.319,626,2.817,682,2.15,686,2.364,771,4.469,830,2.447,831,3.493,832,2.405,834,4.153,835,3.437,836,6.263,837,4.949,838,3.728,839,3.728,840,6.263,841,4.469,842,4.949,843,4.949,844,4.949,845,4.949,846,3.571,847,2.447,848,2.957]],["t/154",[3,0.631,47,1.69,50,2.218,61,2.373,85,2.417,125,1.819,147,1.387,151,1.774,166,0.553,183,4.552,196,2.614,197,2.055,198,1.307,200,3.117,226,3.324,230,1.431,235,1.947,304,2.292,311,1.357,315,3.956,316,3.04,329,2.292,357,0.862,377,3.615,384,3.463,427,1.543,444,3.55,584,1.864,600,4.027,653,3.087,657,3.219,686,2.292,761,3.026,826,3.798,830,2.373,839,3.615,849,4.799,850,4.027,851,4.027,852,4.027,853,4.799,854,2.561,855,4.799,856,4.799,857,2.797]],["t/156",[61,2.847,166,0.887,197,2.465,198,1.109,211,2.705,235,1.867,243,2.9,298,3.74,307,5.038,311,1.151,316,3.445,323,4.155,346,3.999,357,1.012,535,2.619,584,1.581,707,3.356,727,4.105,748,5.199,828,4.832,847,2.847,858,5.199,859,5.199,860,5.758,861,5.758,862,5.758,863,5.758,864,5.199]],["t/158",[90,6.444,865,8.554,866,7.725]],["t/160",[147,2.718,199,2.821,252,3.717,357,0.866,812,5.711,829,4.854,857,4.613,867,6.641]],["t/162",[3,0.521,15,1.346,19,1.395,24,2.032,33,2.157,36,1.994,62,3.576,126,2.983,147,1.144,166,0.902,217,2.308,230,1.76,233,1.482,234,2.456,235,1.686,236,2.294,243,1.994,252,2.773,257,2.429,264,2.429,271,1.86,272,2.572,305,2.858,336,2.497,404,2.071,427,1.898,515,3.323,526,4.018,567,1.378,611,2.656,657,2.656,670,2.983,684,2.656,685,3.134,705,4.953,708,2.497,721,2.346,831,1.994,836,5.33,840,3.576,868,3.323,869,3.088,870,3.503,871,2.858,872,2.983,873,3.576,874,3.96,875,3.134,876,4.447,877,4.672,878,3.323,879,3.96,880,3.96,881,3.576,882,3.576,883,3.96,884,3.96,885,3.96,886,3.134,887,3.323,888,3.576]],["t/164",[0,1.51,1,1.335,3,0.349,8,1.913,11,1.018,15,0.605,17,1.724,23,1.672,24,1.36,26,0.993,47,0.934,110,1.288,114,1.722,135,1.672,147,1.247,166,0.498,185,1.584,187,0.945,199,1.538,213,1.913,226,1.119,230,0.791,233,1.371,234,1.796,235,1.356,243,2.173,257,1.626,266,1.311,306,1.998,307,1.445,324,2.579,337,2.351,357,1.093,425,1.335,426,1.778,427,2.386,431,2.516,434,1.269,439,0.892,444,2.855,493,1.841,517,2.225,526,4.642,544,2.099,553,1.778,560,0.923,563,1.913,567,1.502,584,1.185,632,1.546,648,1.169,694,2.895,721,0.882,763,1.841,830,2.134,831,3.486,835,4.368,839,1.998,857,1.546,858,2.394,869,3.621,870,3.862,871,3.938,889,2.652,890,2.652,891,1.584,892,2.652,893,1.913,894,2.394,895,2.652,896,1.626,897,3.114,898,2.225,899,2.647,900,1.913,901,2.394,902,2.652,903,2.652,904,1.778,905,2.652,906,2.394,907,2.394]],["t/166",[0,4.254,7,2.799,12,1.224,24,2.242,36,2.2,116,2.161,125,1.656,147,1.834,153,1.927,161,2.93,198,0.841,218,3.153,219,1.898,226,1.844,235,1.611,236,1.42,264,2.68,311,1.269,357,1.051,385,2.38,403,1.987,427,1.405,526,4.254,611,2.93,653,3.399,708,2.755,763,3.034,830,3.138,831,3.196,848,2.611,852,3.666,854,3.988,857,2.547,870,2.984,896,2.68,897,5.393,906,3.945,908,3.666,909,5.393,910,3.153,911,4.369,912,3.666,913,4.369,914,3.458,915,3.458,916,4.369]],["t/168",[7,1.746,12,1.654,15,0.903,63,2.983,77,1.994,130,2.497,151,2.609,153,1.746,198,0.763,233,0.995,235,1.272,238,3.722,261,2.497,264,2.429,311,1.411,324,2.366,357,1.063,386,2.572,397,1.395,434,1.191,448,1.83,507,2.254,526,2.254,553,2.656,567,2.723,626,2.254,682,1.721,694,2.656,716,2.429,721,2.346,770,3.323,775,2.75,782,2.572,830,1.958,831,4.577,848,3.527,851,3.323,870,2.357,900,2.858,917,2.572,918,2.572,919,2.429,920,3.576,921,3.722,922,5.585,923,5.585,924,2.366,925,3.323,926,3.323,927,2.983,928,2.858,929,3.96,930,3.134,931,3.96]],["t/170",[0,2.342,11,1.58,12,1.153,32,2.111,85,2.072,130,3.829,151,1.521,166,0.7,198,1.637,230,1.811,233,1.813,234,1.712,235,1.556,236,1.337,237,3.715,311,1.593,353,3.09,357,0.973,403,1.871,404,2.152,434,1.795,439,1.383,448,3.929,535,2.762,552,3.715,560,1.432,567,2.114,721,1.368,729,2.195,766,3.099,830,3.003,831,4.756,833,2.523,839,3.099,886,3.256,917,2.672,919,2.523,921,3.829,927,3.099,932,4.114,933,4.114,934,4.114]],["t/172",[12,2.156,166,0.664,198,1.109,233,1.446,235,1.658,250,3.356,311,1.538,329,2.75,353,3.294,356,2.705,357,1.14,404,4.024,434,1.162,448,2.661,830,2.847,831,4.363,854,4.105,875,4.557,910,5.552,935,5.199,936,4.338,937,5.199]],["t/174",[8,3.411,12,1.325,63,5.059,151,1.748,166,0.545,230,1.41,233,1.187,234,1.967,236,1.537,252,2.221,311,1.343,357,1.131,434,1.716,439,1.59,448,3.104,553,4.504,567,1.646,716,4.119,782,4.362,830,3.321,831,4.699,839,5.884,896,2.899,921,4.235,922,3.741,923,3.741,925,5.635,926,5.635,938,4.727,939,4.727,940,4.269,941,4.269]],["t/176",[12,1.628,85,2.926,151,2.862,166,0.67,233,1.944,234,3.221,235,1.252,236,1.889,239,3.564,311,1.162,357,1.111,434,1.562,448,3.577,567,2.023,682,2.525,830,2.874,831,4.383,846,4.193,870,2.32,896,3.564,901,5.247,904,3.897,919,3.564,921,3.664,942,3.897]],["t/178",[0,1.312,1,1.936,3,0.303,7,1.016,10,0.709,12,1.077,15,0.877,19,0.812,22,1.182,24,1.182,26,0.863,28,1.343,30,1.032,31,2.67,47,1.354,52,1.546,79,1.663,85,1.161,88,1.736,116,1.901,117,1.736,124,3.226,130,2.424,151,2.563,165,2.774,166,0.571,186,1.736,195,1.048,198,1.236,210,1.736,211,1.083,215,1.6,216,1.663,217,1.343,219,1.001,233,0.579,235,0.829,236,0.749,243,1.936,252,1.083,261,1.453,263,1.453,264,1.413,270,1.453,271,1.083,272,2.497,273,1.6,285,2.081,295,1.736,311,0.989,324,1.377,345,3.472,347,2.081,357,1.025,392,1.497,396,1.6,397,1.354,404,2.587,428,0.973,434,1.295,443,2.67,448,3.4,505,1.934,507,3.287,526,1.312,535,1.048,536,1.663,567,1.338,584,0.633,648,1.016,682,1.671,694,1.546,738,1.546,795,1.497,819,1.806,826,3.043,830,1.14,831,3.232,832,1.868,848,1.377,869,2.587,870,1.535,887,1.934,893,2.774,894,2.081,897,1.663,900,1.663,914,1.824,915,1.824,917,1.497,919,3.034,921,3.119,922,6.1,923,1.824,930,1.824,942,1.546,943,1.824,944,1.453,945,6.934,946,4.946,947,2.305,948,2.305,949,2.305,950,2.081,951,2.305,952,2.081,953,1.824,954,1.824,955,2.305,956,1.824,957,1.824,958,2.305,959,2.081,960,2.305]],["t/181",[3,1.23,15,1.35,19,2.085,25,3.845,28,4.567,31,4.111,43,4.967,68,4.967,81,4.967,108,3.97,109,4.111,110,2.876,116,3.875,140,4.684,144,4.459,166,0.904,224,3.37,272,3.845,281,5.345,329,2.827,426,3.97,444,3.096,502,4.111,848,3.537,954,4.684,961,5.919,962,5.919,963,5.919,964,4.967,965,5.919]],["t/183",[1,3.127,3,1.064,5,4.164,10,1.911,12,1.74,14,5.21,15,1.844,16,2.869,19,2.187,22,3.186,23,3.915,116,3.071,140,4.914,219,2.698,252,2.917,290,3.456,305,4.48,312,4.164,315,3.619,322,4.48,326,3.535,337,3.383,592,4.677,719,4.312,943,6.399,966,3.535,967,5.607,968,6.209]],["t/185",[1,2.363,3,0.879,7,2.07,8,3.386,10,1.444,11,1.802,12,1.315,15,1.933,16,2.169,18,3.147,23,2.959,29,2.959,47,1.653,116,2.321,127,1.926,151,1.735,166,0.977,186,3.535,198,1.498,217,2.735,219,2.039,223,4.821,230,1.399,233,1.179,239,2.878,243,2.363,244,4.237,269,3.147,271,2.204,304,2.241,315,2.735,322,4.821,327,3.147,393,3.714,428,1.98,439,1.578,592,3.535,627,2.28,652,4.237,679,2.804,795,3.048,819,2.204,835,3.259,847,2.321,868,3.938,943,3.714,966,2.672,969,4.692,970,3.714,971,3.938,972,2.455,973,3.147,974,4.692]],["t/187",[3,1.085,15,1.459,17,2.555,18,4.29,19,2.904,22,3.282,44,3.221,95,4.442,116,3.163,194,5.355,195,2.91,219,2.779,243,3.221,273,4.442,316,2.865,443,4.442,705,5.368,721,2.127,957,5.063,975,6.397,976,6.397,977,6.397,978,6.397,979,3.923,980,6.397]],["t/189",[3,1.099,7,2.879,19,2.3,22,3.35,26,2.444,44,4.206,58,3.634,95,5.8,146,4.379,199,2.327,217,3.805,219,2.837,268,4.534,269,4.379,270,4.117,271,3.067,272,4.241,290,3.634,319,4.534,967,5.895,981,5.895,982,6.528,983,6.528]],["t/191",[3,1.081,5,4.81,15,1.184,22,2.664,32,3.679,44,2.615,47,2.526,50,3.314,77,2.615,103,3.606,116,2.568,133,3.606,146,3.482,166,0.599,191,4.522,192,5.402,193,4.81,195,2.362,198,1.582,201,3.606,243,2.615,271,2.439,297,4.357,314,4.357,315,3.026,322,3.747,403,2.362,443,3.606,444,2.716,584,1.426,604,3.911,685,4.109,952,4.688,984,5.192,985,3.747,986,5.192,987,5.192,988,4.688,989,5.192,990,5.192]],["t/193",[3,1.106,19,2.324,26,3.147,44,3.322,57,2.997,120,5.221,145,5.535,194,5.461,219,2.866,303,5.535,425,3.322,560,2.927,732,5.957,795,4.285,886,5.221,991,5.957,992,6.596,993,5.957,994,6.596,995,5.957]],["t/195",[3,0.916,7,3.069,9,5.021,10,2.677,12,2.437,32,3.57,166,0.803,225,3.713,236,2.262,293,4.667,406,4.268,443,4.832,634,5.507,719,4.832,966,4.951,996,6.958,997,6.283]],["t/197",[0,3.642,3,1.085,12,1.792,28,3.729,37,3.485,61,3.163,152,5.776,166,0.738,189,4.589,192,4.819,235,1.379,293,4.29,302,5.776,338,5.776,486,5.776,487,5.063,679,3.822,848,3.822,918,4.155,966,3.642,998,6.397,999,6.397,1000,6.397,1001,6.397,1002,6.397,1003,5.776]],["t/199",[3,0.636,11,2.62,19,1.703,33,2.634,44,2.435,57,1.724,95,3.358,99,3.643,130,4.303,146,3.243,147,1.397,153,2.133,166,0.558,198,1.523,218,3.49,261,3.049,271,2.272,299,4.367,304,3.26,311,0.967,316,2.166,324,2.889,357,1.057,425,2.435,426,3.243,428,2.041,434,0.976,526,2.753,653,2.2,682,2.101,694,3.243,812,3.49,830,3.375,831,2.435,848,4.077,870,1.931,875,3.827,896,2.966,900,3.49,917,3.141,920,4.367,924,2.889,959,4.367,997,4.367,1004,4.058,1005,4.367,1006,4.367]],["t/201",[3,0.732,7,2.969,10,2.315,12,1.886,30,3.015,35,2.643,36,1.844,37,1.995,53,2.31,77,2.803,79,2.643,120,2.899,125,1.388,127,1.503,134,2.759,153,1.615,187,1.306,196,1.995,198,1.448,219,1.591,223,2.643,224,2.085,233,1.398,235,2.014,236,1.191,238,2.31,250,2.135,307,3.032,311,0.732,318,1.306,324,2.188,329,1.749,337,1.995,344,2.456,357,0.609,386,2.379,397,3.118,427,1.789,434,0.739,494,2.899,526,2.085,529,2.759,626,2.085,648,1.615,682,1.591,694,2.456,696,2.899,700,1.591,708,2.31,728,2.135,738,2.456,774,2.456,830,2.753,831,3.39,857,2.135,870,1.463,893,2.643,900,2.643,921,4.245,924,2.188,1007,4.671,1008,3.307,1009,3.073,1010,3.662]],["t/203",[3,0.505,19,1.353,166,0.443,187,1.369,196,2.092,198,1.334,216,2.771,230,2.462,233,1.74,235,1.243,284,3.039,311,1.651,329,1.834,344,2.575,353,2.47,357,1.152,401,1.494,434,1.398,439,1.291,567,2.008,584,1.054,598,2.355,679,2.294,682,2.506,700,1.668,721,1.277,736,2.667,750,2.771,751,2.893,812,2.771,830,3.426,831,3.879,848,2.294,917,2.494,921,5.469,924,3.447,1006,3.467,1007,5.814,1011,3.84,1012,3.84,1013,3.467,1014,2.092,1015,3.84,1016,3.467]],["t/205",[3,0.622,10,1.455,12,1.882,13,2.899,57,1.685,77,2.381,187,2.394,198,1.638,230,1.41,233,1.187,235,1.447,236,1.537,290,2.632,306,3.561,307,2.575,311,1.7,332,2.691,353,2.024,357,1.074,397,2.995,401,1.839,404,2.473,426,3.171,434,0.954,657,3.171,708,2.981,721,1.572,729,2.523,763,3.283,831,3.933,854,3.584,859,4.269,869,2.473,921,2.981,957,3.741,1017,5.635,1018,6.554,1019,3.967]],["t/207",[12,1.598,16,1.307,30,2.037,63,2.131,93,2.589,151,1.046,165,2.042,217,1.649,230,0.843,233,1.142,235,1.542,236,1.478,239,1.735,250,1.649,262,1.784,311,1.306,324,1.69,356,1.329,357,1.162,381,1.375,384,2.042,397,1.602,434,1.318,439,0.951,468,2.374,526,1.611,553,1.897,584,0.777,646,1.965,682,1.976,694,1.897,716,1.735,721,0.941,760,1.784,767,1.48,782,1.838,812,2.042,830,2.82,831,4.208,854,2.427,870,1.816,896,1.735,900,2.042,910,3.282,914,2.239,919,1.735,921,4.513,922,6.613,923,6.613,924,2.717,925,2.374,926,2.374,935,2.555,936,2.131,940,2.555,941,2.555,1016,5.15,1020,1.784,1021,2.829,1022,3.426,1023,2.829,1024,2.829,1025,2.829,1026,2.555,1027,2.374,1028,2.374,1029,2.829,1030,2.829]],["t/209",[3,0.833,130,3.993,151,2.341,166,0.73,210,4.771,243,3.189,311,1.919,357,0.896,363,5.314,434,1.278,444,3.313,598,3.884,692,5.314,809,5.314,830,3.132,847,4.05,886,5.012,921,3.993,956,5.012,957,5.012,1031,5.719,1032,6.333,1033,8.19]],["t/211",[44,3.543,107,5.904,195,3.2,196,3.833,198,1.355,215,4.886,235,1.516,311,1.407,315,4.101,333,6.353,401,3.708,427,2.262,483,5.104,847,3.479,1034,7.907]],["t/213",[3,0.6,11,2.512,25,4.25,33,2.483,58,2.537,99,4.929,109,3.165,130,2.874,147,1.317,148,3.607,151,1.685,153,2.01,166,0.883,187,1.625,198,1.611,211,2.141,224,2.595,225,2.432,233,1.643,235,1.41,239,2.795,264,2.795,304,2.177,305,3.289,310,3.433,311,1.771,316,2.041,329,2.177,337,3.564,344,3.057,426,3.057,434,0.92,448,2.106,584,1.251,649,3.824,721,1.515,825,3.824,847,2.254,848,4.573,904,3.057,914,3.607,919,2.795,928,3.289,944,2.874,971,3.824,1005,4.115,1035,3.433,1036,4.557,1037,4.557,1038,4.557,1039,4.557]],["t/215",[8,4.861,15,1.537,130,4.248,153,2.971,166,0.983,198,1.297,230,2.54,235,1.452,321,4.518,406,4.132,727,3.595,835,4.678,847,3.332,848,5.091,867,5.653,928,4.861,1040,6.083,1041,6.736,1042,6.736,1043,6.736]],["t/217",[3,0.888,15,1.086,16,2.201,33,2.595,61,2.356,73,2.846,99,3.588,115,3.77,138,2.651,195,2.166,230,2.686,233,1.696,235,1.455,236,1.548,270,3.003,332,2.712,337,2.595,386,3.094,426,3.195,491,3.437,511,3.746,535,2.166,567,1.658,584,1.308,637,4.102,727,2.542,763,3.308,835,3.308,847,4.455,877,3.77,966,2.712,1019,3.997,1044,4.763,1045,2.846,1046,4.763,1047,4.763,1048,5.343,1049,3.437,1050,4.301,1051,4.102,1052,4.763,1053,3.437,1054,4.301,1055,4.763]],["t/219",[3,0.85,10,1.989,11,2.481,12,1.811,24,3.315,57,2.303,147,1.867,166,0.957,211,3.035,225,3.448,230,2.474,235,1.393,279,3.861,298,4.198,322,4.663,487,5.114,584,1.774,614,4.868,686,3.963,694,4.334,727,3.448,847,3.196,1056,6.462,1057,5.835]],["t/221",[166,0.871,198,1.455,230,1.671,234,3.144,235,2.058,304,2.677,316,2.51,357,1.077,382,4.045,401,2.18,439,1.885,483,3.267,653,2.549,679,3.349,682,3.283,686,3.609,721,1.863,727,2.991,825,4.703,830,2.772,847,2.772,1058,4.222,1059,5.605,1060,5.453,1061,5.605,1062,3.438,1063,4.703]],["t/223",[15,1.018,26,3.1,77,2.247,114,5.38,125,1.691,151,1.649,166,0.743,211,2.096,226,3.495,230,1.33,235,1.973,236,1.45,353,1.91,357,0.705,427,1.434,428,1.883,434,1.904,444,2.334,511,2.131,535,2.029,544,3.531,584,1.225,616,3.744,637,2.334,686,4.372,721,2.753,727,2.381,831,3.244,847,3.186,877,3.531,882,4.029,953,3.531,1048,3.531,1051,2.334,1064,4.029,1065,4.461,1066,4.029,1067,6.442]],["t/225",[3,0.886,11,2.587,24,3.456,26,2.522,114,4.376,166,0.983,187,2.401,198,1.297,199,2.401,211,3.165,230,2.786,434,1.36,481,4.861,520,6.083,627,3.273,632,3.927,833,4.132,1068,6.736,1069,6.736,1070,6.736]],["t/227",[3,0.958,26,2.724,166,0.839,197,3.116,230,2.666,233,1.828,265,3.476,315,4.242,392,4.728,406,4.464,417,4.589,431,4.242,915,5.76,1071,7.278,1072,5.483]],["t/229",[1,2.381,3,0.884,15,1.078,47,1.665,53,2.981,81,3.967,95,3.283,116,2.338,125,1.792,126,3.561,130,2.981,135,2.981,147,1.941,183,3.171,197,2.024,218,3.411,219,2.918,223,3.411,226,1.995,230,1.41,233,1.187,235,1.447,295,3.561,316,2.117,329,3.208,337,2.575,353,2.024,403,2.15,404,2.473,444,2.473,535,2.15,556,4.269,560,1.646,584,1.844,653,3.553,684,4.504,686,2.258,738,3.171,848,4.013,870,2.682,891,2.825,904,3.171,909,3.411,917,3.071,1022,3.561,1073,3.741,1074,4.269,1075,4.727,1076,4.727,1077,4.727,1078,3.561,1079,3.171]],["t/231",[3,1.16,119,5.97,230,2.857,233,1.787,235,1.533,511,3.398,535,3.236,542,5.36,637,3.721,727,3.796,835,4.941,848,4.251,917,4.621,1051,3.721,1080,4.941]],["t/233",[226,4.248,233,1.657,235,1.812,311,1.319,357,1.145,511,4.016,535,3,637,4.398,639,2.745,830,3.262,1051,4.398]],["t/235",[17,2.455,138,3.423,233,1.544,235,1.732,311,1.229,511,4.533,535,2.797,567,2.14,637,4.964,639,2.559,831,3.096,966,3.501,1049,4.437,1051,4.964,1053,4.437,1081,6.148,1082,8.034,1083,6.148,1084,6.148,1085,5.552,1086,6.148]],["t/237",[33,3.195,127,2.406,147,1.695,153,2.586,166,0.676,211,2.755,235,1.678,236,1.906,311,1.172,357,1.091,385,3.195,426,3.933,526,3.339,611,3.933,684,3.933,830,2.9,831,3.922,854,4.156,870,2.342,904,3.933,917,3.809,937,5.295,964,4.921,1022,4.418,1078,4.418,1087,5.864,1088,5.864,1089,5.864,1090,5.864]],["t/239",[0,2.227,10,1.204,11,1.502,12,1.096,16,2.703,24,2.007,110,1.9,125,1.483,147,1.13,153,2.579,166,0.451,211,2.747,233,1.469,235,1.951,236,1.271,239,3.587,254,2.822,257,2.399,311,1.169,315,2.28,323,2.822,324,2.337,326,2.227,337,2.131,356,1.837,357,1.122,381,1.9,385,3.186,431,2.28,434,1.414,492,3.33,526,3.988,558,2.466,584,1.606,653,2.66,684,3.923,736,2.716,830,2.892,831,1.97,852,3.282,854,4.148,870,2.336,875,3.095,910,4.22,964,3.282,1022,2.946,1091,5.848,1092,2.946,1093,2.28]],["t/241",[1,2.615,3,1.081,47,3.121,61,2.568,119,6.018,130,3.274,153,2.29,211,2.439,225,2.771,226,2.191,230,2.449,311,1.038,357,1.018,401,2.019,427,1.669,560,2.496,574,4.109,584,1.426,638,3.606,653,4.03,819,4.162,830,2.568,832,2.523,833,3.184,847,2.568,857,3.026,869,2.716,917,3.373,1040,4.688,1094,5.192,1095,5.192,1096,5.192]],["t/243",[12,1.848,17,2.634,26,2.469,56,4.76,127,2.707,188,4.285,224,3.755,311,1.319,318,2.351,334,6.99,352,3.845,365,3.322,468,7.055,686,3.151,736,4.581,867,5.535,891,3.941,1093,3.845,1097,6.596,1098,6.596]],["t/245",[3,1.28,75,4.271,82,3.845,228,3.732,230,1.765,329,2.827,330,4.684,334,4.111,350,3.37,352,5.12,444,3.096,469,4.459,471,4.967,483,3.45,488,6.202,507,3.37,550,3.97,673,3.97,729,4.688,1020,3.732,1099,7.371,1100,5.919,1101,4.967,1102,5.919,1103,5.919]],["t/247",[3,0.786,17,3.149,19,2.105,32,3.066,36,3.009,57,2.13,61,2.955,79,4.312,166,0.909,194,5.122,198,1.519,211,2.807,304,3.766,307,3.255,334,4.149,356,2.807,357,0.966,365,3.971,401,2.324,507,3.402,624,4.149,648,3.478,686,2.854,689,5.014,1104,5.975,1105,5.975]],["t/249",[10,2.745,125,2.313,147,1.763,166,0.478,185,2.474,187,1.476,230,1.235,232,3.475,235,1.723,289,3.475,307,2.256,311,1.704,318,2.85,357,1.103,365,4.026,399,2.166,401,3.109,434,1.799,507,3.474,533,2.876,559,4.092,584,1.675,637,2.166,638,2.876,639,1.723,673,2.777,679,2.474,727,2.21,819,1.945,850,3.475,896,2.54,909,2.988,1106,3.739,1107,4.829,1108,2.988,1109,6.542,1110,3.739]],["t/251",[3,0.886,12,1.888,15,1.944,147,1.947,153,2.971,233,2.347,271,3.165,278,5.653,353,2.884,535,3.876,679,4.025,876,5.075,891,5.091,896,5.226,1092,5.075,1111,6.736,1112,6.736]],["t/253",[3,0.99,10,1.361,12,1.561,15,1.008,26,1.655,33,1.488,36,2.226,38,2.058,56,1.971,61,1.351,110,1.327,125,1.035,147,1.278,161,1.832,166,0.51,188,1.774,210,2.058,215,3.07,235,1.707,250,3.246,271,1.283,276,1.971,311,1.28,332,2.517,334,3.07,337,4.099,357,1.015,365,2.226,377,3.331,397,0.962,439,0.918,444,1.429,449,1.521,480,2.162,507,1.555,558,2.788,584,1.757,592,3.331,600,2.292,639,1.137,653,1.242,729,1.458,819,1.283,846,1.971,854,4.226,870,3.004,872,2.058,878,4.673,891,1.632,910,4.019,936,4.196,1017,2.292,1019,2.292,1092,5.668,1093,1.592,1099,5.371,1107,4.408,1113,5.569,1114,2.467,1115,2.731,1116,2.731,1117,3.71,1118,6.4,1119,2.731,1120,2.731,1121,2.292,1122,2.467,1123,2.731,1124,4.421,1125,2.731,1126,2.731,1127,2.731,1128,2.731,1129,2.467,1130,2.731,1131,2.292]],["t/255",[3,0.928,10,2.171,13,3.108,30,3.158,56,5.089,125,1.921,166,0.584,198,1.358,290,2.821,311,1.622,318,1.806,356,3.313,357,1.009,363,4.252,365,2.552,401,1.971,444,2.651,492,2.885,891,3.028,1008,4.576,1080,3.519,1099,5.917,1106,4.576,1107,6.419,1109,6.368,1117,4.252,1132,7.051,1133,7.051,1134,5.067,1135,8.768,1136,5.067,1137,5.067,1138,5.067]],["t/257",[3,1.018,11,2.231,32,2.981,50,2.685,53,3.664,54,4.876,57,2.071,69,4.876,70,6.99,75,4.193,77,2.926,84,4.599,108,3.897,116,2.874,117,4.377,166,0.67,195,2.643,252,2.73,254,4.193,325,4.035,337,3.166,377,4.377,507,4.407,562,4.035,833,3.564,930,4.599,1139,5.247,1140,5.247,1141,5.81,1142,5.81,1143,5.81,1144,5.81,1145,5.247,1146,5.247,1147,5.81]],["t/260",[28,3.927,32,3.456,53,4.248,93,3.835,115,5.331,117,5.075,126,5.075,153,2.971,226,2.843,251,5.331,271,3.165,273,6.82,336,4.248,344,4.518,888,6.083,956,5.331,1101,5.653,1148,6.736,1149,6.736,1150,6.736]],["t/262",[1,1.866,3,0.892,11,3.669,17,1.48,19,1.305,30,1.659,37,3.059,44,1.866,54,3.109,79,2.674,84,2.932,88,4.23,89,3.346,90,2.791,91,2.791,125,2.129,127,2.304,153,1.634,166,0.427,207,3.109,210,2.791,213,2.674,225,2.996,230,1.105,233,0.931,234,1.542,266,2.777,290,2.063,291,2.932,323,2.674,337,2.019,402,2.674,434,0.748,467,3.109,507,3.197,558,2.337,604,6.124,630,3.109,634,4.444,740,2.932,760,2.337,791,2.932,809,3.109,841,3.346,846,2.674,850,3.109,870,2.242,896,2.273,899,2.273,953,2.932,991,3.346,1007,3.109,1020,2.337,1129,3.346,1145,3.346,1151,3.705,1152,3.705,1153,3.705,1154,3.705,1155,5.615,1156,3.705,1157,3.705,1158,3.705,1159,3.705,1160,3.705,1161,3.705,1162,5.615,1163,3.705,1164,3.705,1165,3.346,1166,3.705,1167,3.705,1168,3.109,1169,3.705]],["t/265",[30,2.602,166,0.893,187,2.759,201,6.045,228,3.664,271,2.73,318,2.759,329,2.775,334,4.035,403,3.521,427,1.868,430,5.191,439,2.927,463,3.897,550,3.897,569,7.789,604,4.377,876,4.377,896,4.747,899,3.564,927,4.377,1170,7.74,1171,5.81,1172,5.81]],["t/267",[15,1.474,47,3.228,195,2.939,200,5.39,201,6.365,215,5.762,318,2.303,365,3.254,425,3.254,430,4.334,439,2.79,550,4.334,554,4.868,568,5.835,571,4.334,896,5.089,927,4.868,944,4.075,1168,5.422]],["t/269",[12,1.833,15,1.04,57,2.981,73,3.909,77,2.295,98,4.388,127,1.87,153,2.01,235,1.41,271,2.141,307,2.483,311,0.911,318,2.332,357,0.969,434,1.32,448,2.106,493,3.165,511,2.177,584,1.251,639,1.896,673,3.057,707,4.461,712,4.721,713,5.49,714,1.98,719,4.543,739,2.795,819,3.073,820,3.289,821,3.165,1173,4.557,1174,4.929,1175,6.057,1176,5.908,1177,5.49,1178,4.557,1179,4.115,1180,4.557,1181,4.557,1182,4.557,1183,4.557,1184,4.557,1185,4.557,1186,4.557]],["t/271",[12,2.541,15,1.699,47,2.624,73,4.451,98,4.996,166,0.859,189,4.146,227,5.611,235,1.605,279,4.451,293,4.996,781,6.726,1187,7.449]],["t/273",[3,0.906,15,1.57,57,2.453,98,4.616,198,1.326,235,1.483,357,0.945,427,2.213,557,5.185,584,2.371,624,4.78,682,2.991,712,6.232,714,2.991,1177,7.247,1188,6.215,1189,5.776]],["t/275",[3,0.695,73,3.154,93,3.005,166,0.609,198,1.017,235,1.563,264,3.237,311,1.055,332,3.005,357,1.083,397,2.555,434,1.464,448,3.352,560,2.525,571,4.865,627,2.565,712,3.809,720,2.876,721,2.755,722,3.976,727,2.817,728,3.077,729,2.817,1009,4.429,1177,7.848,1190,8.287,1191,5.278,1192,5.278,1193,5.278]],["t/278",[15,2.262,153,2.539,185,3.44,236,1.872,238,4.851,535,3.499,560,2.004,567,2.004,584,2.112,648,4.25,714,2.502,721,2.558,761,3.631,814,6.456,829,3.531,876,4.338,1093,3.356,1194,4.832,1195,6.947,1196,5.343,1197,5.758,1198,5.758,1199,4.155]],["t/280",[3,1.096,15,1.9,252,3.913,448,3.85,838,6.275]],["t/282",[11,3.787,17,2.258,230,1.686,233,2.156,234,3.163,235,1.638,236,2.791,252,2.656,357,1.103,686,2.701,721,3.279,870,2.258,1199,4.081,1200,4.043,1201,5.655]],["t/284",[11,3.67,187,1.66,252,2.188,311,2.095,353,2.845,357,0.51,397,1.641,401,1.812,434,1.929,511,2.225,559,3.124,584,2.127,637,2.436,1004,3.909,1051,2.436,1199,3.361,1200,3.769,1202,9.557,1203,4.457,1204,4.206,1205,4.658,1206,7.747,1207,4.658,1208,4.658]],["t/286",[11,3.385,233,1.787,234,2.96,235,1.9,252,3.342,263,4.486,427,2.287,434,1.779,448,4.075,870,2.841,1199,5.134,1209,4.486,1210,6.424,1211,6.424]],["t/288",[1,2.636,11,3.581,15,1.194,47,1.844,199,1.866,233,1.315,250,4.204,252,2.459,357,0.789,428,2.209,434,1.456,560,2.511,627,2.544,639,3.001,648,2.309,715,3.511,819,2.459,924,3.128,972,4.651,973,3.511,1092,5.433,1107,4.143,1117,4.393,1196,3.635,1199,3.778,1200,3.044,1203,4.837,1212,4.393,1213,4.143,1214,5.235,1215,5.235,1216,5.235,1217,5.235,1218,6.513]],["t/290",[11,3.339,44,3.504,230,2.075,252,3.269,357,0.761,434,1.755,584,1.911,700,3.023,721,2.313,729,4.64,767,3.64,813,5.839,834,5.839,1199,5.021,1200,3.67,1219,6.958]],["t/292",[1,2.726,3,0.712,7,2.388,25,3.517,26,2.763,50,2.502,57,1.93,58,3.014,102,4.889,142,4.543,153,3.255,188,3.517,189,4.108,195,2.462,257,3.32,258,4.889,259,4.889,293,3.631,296,3.517,315,3.156,316,2.424,319,3.76,320,4.285,321,4.95,329,2.586,357,0.808,399,2.832,502,3.76,507,3.082,649,4.543,681,4.889,738,3.631,1028,4.543,1168,4.543,1220,7.046,1221,5.413,1222,5.413,1223,5.413,1224,4.889]],["t/294",[3,0.977,16,2.523,61,3.671,112,4.582,138,3.04,166,0.856,189,3.04,198,1.052,221,4.553,304,2.608,311,1.484,318,2.646,321,4.979,329,2.608,330,4.321,352,3.183,356,2.565,357,1.128,365,2.75,399,2.856,412,4.931,570,6.229,602,4.113,630,4.582,1225,4.931,1226,5.46,1227,5.46,1228,7.423]],["t/296",[3,0.695,7,2.328,18,3.54,19,1.859,47,1.859,75,3.809,151,1.951,166,0.609,187,1.882,197,2.26,198,1.017,207,4.429,230,2.789,238,3.329,290,2.938,296,3.429,318,3.181,352,3.077,399,2.761,415,5.226,417,3.329,471,4.429,488,4.178,531,4.766,567,1.838,584,1.449,596,4.766,679,3.154,685,4.178,727,2.817,731,3.54,736,3.666,760,3.329,775,3.666,954,4.178,1220,4.429,1229,5.278,1230,4.766,1231,5.278,1232,4.766]],["t/298",[3,0.765,18,3.897,47,2.047,52,5.191,57,2.759,77,2.926,98,3.897,189,3.234,224,3.308,230,1.732,293,3.897,296,3.774,304,3.697,305,4.193,317,3.774,319,4.035,428,2.452,439,1.954,567,2.023,570,4.876,574,6.126,624,4.035,679,3.472,738,3.897,954,4.599,1220,4.876,1224,5.247,1232,5.247,1233,5.81,1234,5.81,1235,5.81,1236,5.81,1237,5.81,1238,5.81]],["t/300",[3,0.617,28,2.735,47,2.353,103,3.259,116,2.321,133,3.259,138,4.33,166,0.897,198,0.904,219,2.039,230,1.992,233,1.179,290,2.612,296,4.339,318,1.673,326,2.672,365,2.363,415,2.959,430,4.48,435,5.032,436,5.032,437,5.032,440,4.237,463,3.147,473,3.714,550,3.147,567,2.95,569,3.938,572,4.237,575,5.606,585,7.024,587,3.048,607,5.606,657,4.48,666,3.938,680,3.714,1045,2.804,1213,3.714,1239,4.639,1240,4.692,1241,4.692,1242,4.237,1243,4.692,1244,4.692]],["t/302",[3,0.96,12,2.044,15,1.664,22,2.731,26,1.993,36,2.68,37,2.9,104,3.103,116,2.632,127,2.184,129,3.57,147,1.538,151,1.968,166,0.96,168,2.731,183,3.57,197,2.279,235,2.138,236,1.73,567,1.853,584,1.462,721,2.977,760,3.356,761,3.356,798,3.841,829,3.265,972,2.784,979,3.265,1093,3.103,1146,4.806,1209,3.356,1245,3.57,1246,3.841,1247,3.696]],["t/304",[198,1.257,199,2.977,235,1.8,303,5.478,357,1.142,403,2.97,427,2.099,428,2.755,721,3.062,798,6.027,847,3.229,1248,6.528,1249,5.167,1250,6.528,1251,5.895]],["t/306",[3,0.947,12,2.016,110,3.496,153,3.173,168,3.692,198,1.855,235,1.551,236,2.339,346,4.997,397,3.542,679,4.299,708,4.537]],["t/308",[12,1.117,110,3.442,166,0.46,187,2.525,198,1.364,226,1.682,235,2.017,236,1.295,243,2.007,306,3.002,307,2.171,311,1.999,353,1.706,357,1.065,397,2.955,401,1.55,428,1.682,434,1.775,584,2.154,708,2.513,721,1.325,750,4.28,797,5.626,798,5.662,1014,2.171,1209,4.467,1251,3.598,1252,3.344,1253,5.93,1254,3.985,1255,3.598,1256,3.344]],["t/310",[3,0.552,10,1.291,12,2.046,19,1.478,52,2.814,85,2.113,125,2.336,147,1.78,166,0.711,188,2.725,198,1.187,226,3.081,233,1.054,235,2.089,239,2.573,311,1.232,321,2.814,353,1.796,357,1.093,381,2.039,397,1.478,399,3.223,404,2.195,431,2.446,434,1.243,493,2.914,567,1.461,584,2.005,653,1.908,707,3.591,728,2.446,797,4.132,854,3.288,857,2.446,936,3.161,1022,3.161,1078,3.161,1114,3.789,1131,3.521,1209,2.646,1257,4.196,1258,3.789,1259,4.196,1260,4.196,1261,4.196,1262,4.196]],["t/312",[3,0.98,196,4.058,198,1.435,230,2.221,235,1.605,357,1.114,427,2.395,439,2.505,721,2.476,1263,4.996,1264,6.251]],["t/314",[110,3.344,153,3.036,169,5.447,230,2.052,234,2.864,235,1.861,357,1.083,439,2.314,663,6.215,686,4.125,721,2.871,1058,5.185,1265,6.883,1266,8.636]],["t/316",[195,1.628,226,2.309,233,0.899,235,1.602,243,1.803,357,1.19,401,2.128,425,1.803,428,1.511,434,1.873,439,1.204,560,1.904,582,2.697,605,2.833,648,1.579,653,2.488,686,4.666,707,2.087,721,3.011,795,2.325,1057,3.233,1200,3.707,1249,2.833,1267,5.47,1268,3.58,1269,3.58,1270,3.58,1271,5.47,1272,3.669,1273,3.58,1274,2.833]],["t/318",[10,2.531,15,1.875,166,0.948,234,3.421,236,2.673,972,4.3]],["t/320",[3,0.765,10,1.789,15,1.985,22,2.981,26,2.175,37,3.166,104,3.387,116,2.874,127,2.384,129,3.897,166,0.67,168,2.981,236,1.889,310,4.377,344,3.897,352,3.387,511,4.749,567,2.023,584,1.595,648,2.563,700,2.525,767,3.039,829,3.564,979,3.564,1062,3.564,1093,3.387,1194,6.495,1245,3.897,1247,4.035,1275,5.81]],["t/322",[10,1.512,166,0.566,199,2.842,311,0.982,320,3.886,357,1.156,427,2.218,428,2.072,511,4.635,529,3.699,533,3.41,584,2.594,648,2.166,686,2.346,700,2.134,739,3.012,767,2.569,847,2.428,891,2.934,1053,6.575,1276,6.898,1277,4.434,1278,4.91,1279,4.91,1280,3.886,1281,4.91]],["t/324",[10,1.455,26,1.77,147,1.366,198,1.293,199,1.685,226,1.995,311,1.919,353,2.024,357,1.12,401,1.839,428,1.995,434,1.716,511,4.585,584,1.298,700,3.394,767,3.513,1014,3.659,1053,6.482,1200,2.834,1239,3.283,1280,3.741,1282,7.053,1283,6.181,1284,4.727]],["t/326",[3,0.886,10,2.074,85,3.392,166,0.777,197,2.884,198,1.297,199,2.401,226,3.596,230,2.009,311,1.347,357,1.023,511,4.691,567,2.345,653,3.064,1079,4.518,1285,5.331,1286,6.083]],["t/328",[3,0.801,196,3.318,198,1.173,230,1.816,357,1.163,427,1.958,439,2.048,511,4.689,584,1.672,1053,5.761,1054,7.21,1200,3.37,1263,4.084,1280,6.319,1287,7.21]],["t/330",[7,1.511,110,1.664,166,0.61,187,1.221,198,0.66,199,1.221,211,2.484,228,3.334,230,1.021,257,2.101,311,1.057,332,1.95,357,1.149,403,2.405,434,1.584,439,1.778,511,4.818,526,1.95,584,2.155,632,1.996,648,1.511,686,4.13,700,1.488,762,2.58,847,3.194,1035,2.58,1053,6.239,1066,5.832,1194,4.437,1200,3.065,1280,5.747,1287,6.558,1288,2.874,1289,3.425,1290,3.425,1291,3.816]],["t/332",[1,2.572,3,0.672,13,3.133,15,1.858,22,2.621,26,1.912,28,2.978,37,2.783,104,2.978,116,2.526,127,2.096,129,3.426,166,1.015,168,2.621,233,2.403,393,4.043,427,1.642,507,2.908,535,4.463,560,1.778,639,2.126,653,2.324,819,2.4,829,5.396,979,3.133,1079,3.426,1093,2.978,1245,3.426,1246,3.686,1247,3.548,1292,5.108,1293,4.287,1294,5.108,1295,5.108]],["t/334",[15,1.875,28,4.792,233,2.065,418,6.194,535,3.74,584,2.257]],["t/336",[166,0.566,199,2.459,228,3.097,233,1.732,357,1.156,403,3.138,493,3.41,535,4.297,560,1.709,639,3.791,648,2.166,714,3.465,832,2.386,1034,6.229,1060,4.978,1062,3.012,1200,3.65,1272,4.627,1291,3.544,1296,6.898,1297,6.229,1298,6.898]],["t/338",[17,2.93,166,0.619,187,1.913,199,1.913,252,2.522,265,2.564,357,1.171,385,2.924,526,3.056,535,3.802,560,2.554,625,3.6,639,2.234,653,3.337,700,2.332,714,3.188,832,3.565,1072,5.527,1140,4.847,1200,3.528,1272,3.6,1293,4.504,1297,6.626]],["t/340",[1,3.037,17,2.409,47,2.795,166,0.915,198,1.162,228,5.003,233,1.515,254,4.353,265,2.881,312,4.045,427,2.551,502,4.189,526,3.434,529,4.544,535,4.451,560,2.1,604,5.977,648,2.66,653,3.609,700,2.621,728,3.516,762,5.977,1200,2.546]],["t/342",[3,0.884,10,2.067,15,1.94,23,2.981,47,2.366,126,3.561,133,4.664,138,2.632,166,0.545,195,2.15,211,2.221,223,3.411,228,2.981,233,1.687,242,3.741,257,2.899,263,2.981,271,3.155,290,3.738,312,4.504,326,2.691,394,4.269,502,4.664,535,3.055,537,6.064,560,1.646,627,2.297,639,1.967,653,3.553,819,3.155,822,3.967,868,3.967,869,3.513,872,3.561,887,3.967,904,3.171,953,3.741,966,2.691,1079,3.171,1299,3.967,1300,4.727,1301,4.727,1302,6.715,1303,4.727]],["t/344",[198,1.052,233,1.371,311,1.686,357,1.168,401,2.124,434,1.498,535,2.484,560,2.936,627,2.653,639,3.089,682,2.372,700,2.372,714,3.225,942,5.657,1014,2.975,1200,4.12,1272,3.662,1304,4.582,1305,5.46]],["t/346",[10,2.554,166,0.745,233,1.623,311,1.292,316,2.894,357,1.12,403,2.939,533,4.488,535,4.169,560,2.249,639,2.689,720,4.52,854,3.448,1079,4.334,1188,5.835,1200,2.727,1306,5.422,1307,6.462]],["t/348",[3,0.695,15,1.204,196,2.876,198,1.017,230,2.66,233,1.326,252,3.407,357,1.133,385,3.952,427,1.697,439,1.775,535,3.769,560,2.525,584,1.449,625,4.865,639,3.018,714,3.152,832,3.525,1072,5.464,1200,4.079,1263,3.54,1264,4.429]],["t/350",[24,2.664,166,0.599,187,1.851,199,1.851,211,2.439,230,1.548,233,1.304,252,3.369,357,1.129,385,3.907,434,1.447,439,1.746,535,3.737,560,2.496,587,3.373,625,4.81,632,3.026,639,2.984,686,3.924,714,3.116,832,3.485,1072,5.402,1200,4.058,1264,4.357]],["t/352",[10,1.572,11,1.961,17,2.04,24,2.621,85,2.572,147,2.049,166,1.066,168,2.621,225,2.726,233,2.403,279,3.052,427,2.829,444,3.709,483,2.978,559,3.426,584,2.236,665,4.287,707,4.748,714,2.22,721,3.326,760,3.221,795,3.318,871,3.686,1003,4.613,1045,3.052,1062,3.133,1308,4.287,1309,5.108]],["t/354",[15,1.674,127,2.203,226,2.265,233,1.348,235,1.581,271,2.522,357,1.147,406,4.5,559,3.6,584,1.474,714,2.332,715,3.6,716,4.5,717,3.874,718,3.6,720,2.924,721,2.779,757,6.157,760,3.385,767,2.808,1020,3.385,1310,7.549,1311,6.626,1312,4.504,1313,4.504,1314,5.368,1315,5.368]],["t/356",[15,1.565,85,2.454,147,2.295,197,2.086,198,1.66,221,2.989,225,2.6,233,1.994,234,3.304,235,1.479,236,2.581,311,1.588,316,2.182,353,2.086,357,0.943,382,3.516,401,2.669,434,0.983,559,3.268,567,1.696,584,1.338,682,2.117,720,3.738,721,2.865,722,3.671,803,3.073,835,3.384,942,3.268,1014,2.655,1073,3.856,1310,4.4,1311,4.4,1312,4.089,1316,2.989,1317,4.873,1318,3.671]],["t/358",[3,1.054,127,3.288,147,2.316,166,0.924,233,2.013,631,7.236,721,2.664,764,6.725]],["t/360",[12,2.414,36,2.141,45,2.681,127,1.745,144,3.203,147,1.798,151,1.572,166,0.718,169,6.819,225,3.32,233,1.848,234,2.589,236,2.022,311,0.85,321,2.852,357,1.064,397,1.498,404,3.254,427,1.367,434,0.858,511,2.972,682,1.847,696,3.365,721,2.864,727,2.269,728,2.478,752,3.568,766,3.203,767,2.224,768,3.365,833,2.608,919,2.608,979,2.608,1028,3.568,1060,3.068,1319,4.252,1320,4.252,1321,4.252,1322,8.096,1323,6.221,1324,4.252,1325,4.252,1326,4.252,1327,4.252,1328,4.252]],["t/362",[10,1.822,11,2.273,12,1.659,24,3.037,26,2.216,45,4.941,58,3.295,85,2.981,147,1.71,151,2.188,166,0.683,221,3.63,225,3.159,233,1.968,234,3.261,236,2.856,311,1.183,357,0.648,434,1.195,584,1.625,721,2.605,731,3.97,797,3.97,798,4.271,802,5.345,1009,4.967,1209,4.941,1329,7.836]],["t/364",[12,1.467,15,1.882,147,1.513,225,2.793,233,1.315,234,3.433,235,1.778,236,2.682,311,1.047,336,3.301,357,1.021,434,1.056,542,3.944,584,1.437,716,3.211,717,3.778,718,3.511,720,3.929,721,2.398,722,3.944,757,6.052,760,3.301,767,2.738,775,3.635,798,5.204,803,3.301,1312,4.393,1313,4.393,1316,3.211,1330,5.235,1331,7.212,1332,5.235,1333,5.235]],["t/366",[15,0.921,24,2.071,52,2.707,77,2.032,85,2.032,88,3.04,147,2.062,165,4.32,166,0.465,197,1.728,198,1.153,223,2.912,224,2.297,233,1.792,291,3.194,311,1.197,357,1.097,425,2.032,428,1.703,434,0.814,439,2.013,627,1.961,714,2.601,715,4.015,716,4.377,717,2.912,718,2.707,720,3.261,721,3.19,722,4.51,731,2.707,737,3.386,759,5.988,766,3.04,803,2.545,995,3.644,1014,2.198,1073,3.194,1313,3.386,1316,3.672,1334,4.035,1335,5.986,1336,5.986,1337,5.986,1338,4.035,1339,4.035,1340,4.035]],["t/368",[3,0.833,11,2.432,15,1.445,52,4.247,73,3.784,110,3.077,151,2.341,166,0.73,198,1.22,221,3.884,235,1.956,236,2.059,243,3.189,272,4.114,384,4.57,434,1.278,448,3.785,536,4.57,567,2.205,625,4.247,648,2.793,761,3.993,870,2.529,919,3.884,1014,3.45,1045,3.784]],["t/370",[12,1.933,166,0.796,183,3.293,198,1.536,199,1.75,233,1.233,235,2.135,311,1.594,353,3.414,357,0.946,397,2.809,434,1.839,448,4.578,536,3.544,560,2.401,624,3.41,720,3.758,740,3.886,904,3.293,918,3.19,1014,2.675,1200,2.911,1316,4.231]],["t/372",[7,1.441,10,1.005,11,1.254,12,0.915,13,2.003,127,1.34,147,0.944,151,1.884,168,3.215,198,1.207,233,2.134,234,2.121,235,1.351,236,1.062,295,3.839,311,1.415,356,1.534,357,1.163,397,1.151,403,1.486,404,2.666,434,1.265,448,2.355,560,1.137,567,1.137,797,3.418,803,3.214,854,2.719,870,2.035,919,3.843,1078,2.461,1209,5.358,1341,3.266,1342,5.096,1343,6.266,1344,3.266,1345,3.266,1346,3.266,1347,6.266,1348,8.79,1349,7.677,1350,3.266,1351,3.266,1352,2.949,1353,2.741,1354,3.266]],["t/374",[3,0.815,12,1.183,15,1.412,23,2.663,140,3.343,158,3.814,195,1.921,198,1.412,235,1.852,249,3.544,261,2.663,290,2.351,311,1.465,357,1.041,384,3.048,386,2.744,397,2.582,403,1.921,428,2.613,434,1.629,439,1.42,448,4.288,584,1.16,653,2.816,680,3.343,719,2.933,728,2.462,797,2.833,803,3.904,918,4.022,928,3.048,1062,2.59,1209,3.904,1353,3.544,1355,4.223,1356,4.223,1357,5.591,1358,4.223,1359,3.544,1360,4.223,1361,3.814,1362,4.223,1363,4.223,1364,4.223,1365,4.223]],["t/376",[19,2.028,85,2.9,151,2.129,230,1.717,235,1.241,311,1.151,327,3.862,357,1.152,434,1.749,439,1.936,448,4.004,670,4.338,719,5.343,797,3.862,800,5.199,803,3.631,870,2.299,919,3.531,1209,4.851,1361,6.947,1366,5.758,1367,5.758,1368,5.758]],["t/378",[3,0.98,36,3.751,110,3.619,166,0.859,199,2.655,304,3.558,311,1.813,316,3.336,365,3.751,434,1.503,571,4.996,700,3.236,846,5.375]],["t/380",[187,2.508,199,2.508,311,1.906,353,3.749,393,5.568,434,1.42,584,1.932,598,4.315,648,3.103,838,5.3,847,3.479,857,4.101,1369,5.904,1370,5.904,1371,5.904,1372,7.035]],["t/382",[19,2.624,110,3.619,187,2.655,304,3.558,311,1.813,353,3.189,399,3.896,401,2.897,434,1.83,584,2.045,598,4.569,1373,6.726]],["t/384",[19,1.844,110,2.544,151,1.935,166,0.604,185,3.128,187,2.941,226,2.209,266,2.589,304,2.5,311,1.927,353,3.088,357,1.021,401,2.805,434,1.665,559,3.511,584,2.647,598,5.453,944,3.301,1026,4.727,1027,4.393,1374,3.778,1375,7.212,1376,7.212,1377,5.235,1378,5.235]],["t/386",[3,0.571,12,1.216,47,1.528,151,3.022,166,0.5,187,2.653,198,1.434,226,1.831,233,1.09,235,1.361,311,1.488,336,2.736,357,1.141,397,2.224,401,1.688,427,1.395,434,0.876,511,2.073,535,1.974,560,2.198,584,2.245,637,2.27,638,4.385,639,2.627,708,2.736,750,4.557,751,3.269,832,2.108,847,3.123,966,2.47,1051,2.27,1060,3.131,1256,3.641,1291,3.131,1316,2.661,1379,5.702,1380,6.314,1381,3.131,1382,3.434,1383,4.339]],["t/388",[61,2.822,198,1.099,311,1.842,346,3.963,357,1.124,428,2.408,434,1.543,511,3.653,637,4.512,966,3.249,1014,3.109,1051,4.512,1239,3.963,1282,6.905,1379,6.905,1382,4.516,1384,5.706,1385,5.706,1386,5.706,1387,5.706,1388,5.706,1389,5.706]],["t/390",[36,3.504,166,0.803,198,1.34,199,2.48,311,1.896,316,3.116,434,1.755,560,2.422,691,5.839,972,3.64,973,4.667,1045,4.158,1369,5.839,1370,5.839,1371,5.839,1390,6.958,1391,6.958]],["t/392",[30,2.651,153,2.611,187,2.11,219,2.572,222,5.345,234,2.463,252,2.78,271,2.78,278,4.967,311,1.869,357,0.858,386,3.845,434,1.887,483,3.45,584,1.625,598,3.63,611,3.97,891,3.537,1139,5.345,1318,4.459,1369,4.967,1370,4.967,1371,4.967,1373,5.345,1392,5.919,1393,5.919,1394,5.345,1395,5.919,1396,5.919]],["t/394",[3,1.185,24,3.777,166,0.849,198,1.418,211,3.458,228,4.643,230,2.685,567,2.563,686,4.301,721,3.234]],["t/396",[166,0.589,195,2.324,198,1.366,199,1.821,211,3.331,230,1.523,234,2.126,235,1.755,243,2.572,304,2.44,316,2.288,357,1.156,382,3.686,401,1.987,425,2.572,428,2.156,439,1.718,483,2.978,587,3.318,653,2.324,679,3.052,686,3.387,721,2.357,847,2.526,1062,3.133,1063,4.287,1249,4.043,1274,4.043,1397,5.108,1398,7.091,1399,5.108,1400,5.108,1401,5.108,1402,5.108]],["t/398",[166,0.716,199,2.213,211,2.917,233,1.559,234,3.365,235,1.338,236,2.018,357,1.108,434,1.253,439,2.088,501,5.607,627,3.929,686,2.966,721,2.064,869,4.229,870,2.48,1403,6.209,1404,7.302,1405,6.209,1406,6.209,1407,6.209,1408,6.209]],["t/400",[3,0.833,15,1.868,22,3.249,26,2.371,37,3.45,104,3.691,116,3.132,127,2.599,129,4.247,166,0.73,168,3.249,236,2.059,427,2.036,637,4.748,700,2.752,761,3.993,829,3.884,979,3.884,1093,3.691,1245,4.247,1246,4.57,1247,4.398,1291,4.57,1381,6.551]],["t/402",[1,2.032,63,3.04,125,1.53,199,2.544,344,4.015,357,1.191,584,1.108,605,3.194,637,4.621,658,5.023,714,3.664,715,4.015,832,2.909,857,2.352,891,2.411,924,2.411,1045,2.411,1049,5.15,1062,2.475,1200,1.703,1203,2.707,1277,3.644,1381,6.599,1409,4.035,1410,3.644,1411,4.035,1412,5.986,1413,5.986,1414,5.986,1415,4.035,1416,4.035,1417,4.035]],["t/404",[26,1.796,147,1.387,166,0.553,198,1.307,199,1.711,226,2.025,311,1.969,353,2.055,357,1.111,401,1.867,428,2.025,434,1.728,584,1.864,637,4.478,658,4.027,700,2.085,1014,3.698,1049,6.519,1051,2.51,1200,3.324,1213,3.798,1252,4.027,1283,6.233,1381,4.898,1418,7.875]],["t/406",[3,0.896,10,2.096,85,3.429,166,0.785,198,1.311,199,2.427,226,3.62,230,2.03,311,1.361,357,1.028,567,2.37,637,5.157,653,3.097,1079,4.567,1285,5.389,1419,6.809]],["t/408",[3,0.833,196,3.45,198,1.22,230,1.888,357,1.149,427,2.036,439,2.129,584,2.493,637,4.748,1049,5.91,1050,7.396,1200,3.457,1263,4.247,1381,5.91]],["t/410",[166,0.664,187,2.052,199,2.052,211,3.614,230,2.294,257,3.531,357,1.152,434,1.553,439,1.936,584,2.112,587,3.74,632,3.356,637,4.532,686,3.675,1049,6.252,1064,5.199,1200,3.247,1288,4.832,1381,5.552]],["t/412",[3,0.381,15,1.321,17,1.849,19,1.019,26,1.083,93,1.647,125,2.509,147,0.836,166,0.534,187,1.031,195,1.316,211,2.175,217,1.687,261,2.92,290,1.611,307,1.576,311,0.579,315,2.699,329,1.382,332,2.637,352,1.687,357,1.137,360,1.825,381,4.094,425,1.457,428,1.221,431,1.687,434,0.584,439,1.557,449,1.611,492,3.296,560,2.304,646,2.01,648,2.042,670,3.489,673,1.941,739,5.329,762,2.18,795,1.88,821,6.189,869,1.514,972,1.514,973,4.438,1080,2.01,1239,5.027,1308,4.858,1420,5.228,1421,2.894,1422,4.182,1423,2.894,1424,4.631,1425,2.894,1426,2.894,1427,2.894,1428,2.613,1429,2.613,1430,4.631,1431,4.631,1432,4.631,1433,3.342,1434,2.894,1435,2.894,1436,2.894]],["t/414",[15,1.804,93,2.753,147,1.972,166,0.558,311,1.581,357,1.136,434,0.976,439,1.626,639,2.012,739,5.766,762,3.643,819,3.206,821,6.529,973,4.577,1045,2.889,1073,3.827,1239,5.492,1299,4.058,1308,5.726,1420,6.162,1429,4.367,1437,6.824,1438,4.367,1439,6.824,1440,4.835,1441,4.835]],["t/416",[9,3.048,15,1.672,19,1.488,52,4.152,125,3.06,147,1.22,166,0.487,225,2.254,311,1.238,316,1.891,318,1.506,357,1.156,360,2.663,381,3.008,434,0.852,439,2.082,560,1.47,639,1.757,739,3.797,767,3.238,821,4.299,918,2.744,973,5.413,1174,3.182,1239,4.299,1299,5.195,1422,3.814,1428,3.814,1442,4.223,1443,7.329,1444,7.329,1445,4.223,1446,4.223,1447,6.191,1448,4.223,1449,4.223,1450,4.223,1451,4.223,1452,4.223,1453,4.223]],["t/418",[3,0.758,10,1.772,15,1.976,19,2.028,22,2.954,26,2.155,36,2.9,37,3.137,104,3.356,116,2.847,127,2.363,129,3.862,146,3.862,168,2.954,310,4.338,344,3.862,386,3.74,399,4.024,406,3.531,627,2.798,665,4.832,700,3.343,829,3.531,971,4.832,979,3.531,1051,4.837,1093,3.356,1245,3.862,1247,3.999,1293,6.456,1454,5.758]],["t/420",[10,2.896,199,2.98,205,4.044,357,1.183,399,2.808,626,3.056,700,3.632,767,2.808,776,4.248,966,4.759,1051,5.433,1455,5.368,1456,5.368]],["t/422",[10,1.423,26,1.731,147,1.336,198,1.273,199,2.356,226,1.952,311,1.95,353,1.98,357,1.127,401,1.799,428,1.952,434,1.699,584,1.27,626,5.071,700,3.352,1014,3.601,1051,5.102,1200,2.79,1213,5.232,1252,3.88,1283,6.106,1457,5.969,1458,4.624,1459,4.624]],["t/424",[1,3.096,3,0.809,15,1.833,35,4.437,104,3.584,166,0.927,191,3.877,198,1.184,199,2.192,230,1.833,261,3.877,307,3.35,311,1.969,357,0.879,382,4.437,626,3.501,737,5.16,869,4.203,1051,4.681,1457,5.552,1460,6.148,1461,6.148]],["t/426",[3,0.896,10,2.096,85,3.429,166,0.785,198,1.311,226,3.62,230,2.03,311,1.361,357,1.028,567,2.37,584,1.87,653,3.097,1051,5.157,1079,4.567,1285,5.389,1462,6.809]],["t/428",[3,0.936,138,3.96,196,3.876,198,1.37,230,2.121,427,2.287,439,2.392,584,1.953,626,4.05,776,5.631,966,4.05,1051,5.011,1085,6.424,1263,4.772,1463,7.114,1464,7.114]],["t/430",[3,0.613,110,2.263,147,1.346,166,0.537,187,1.66,195,2.119,199,2.761,211,3.122,215,3.235,230,2.31,239,2.857,257,2.857,284,5.259,311,1.689,357,0.727,427,1.498,434,1.563,544,3.686,574,3.686,584,1.825,587,5.032,632,2.715,686,4.436,767,3.476,869,2.436,876,5.006,1035,3.509,1051,4.999,1288,3.909,1433,3.361,1465,6.645,1466,3.909,1467,4.658,1468,4.658,1469,4.658,1470,4.658]],["t/433",[3,0.893,15,1.095,19,1.69,26,1.796,44,2.417,47,1.69,58,2.671,93,3.864,146,3.219,166,0.553,189,2.671,198,0.924,230,2.693,235,1.463,252,2.254,256,3.798,264,2.943,312,3.219,318,1.711,332,2.732,357,1.055,397,1.69,434,1.728,439,2.282,512,3.798,560,1.671,584,2.162,714,2.949,715,4.552,729,2.561,813,5.696,828,4.027,838,5.113,1203,3.219,1283,3.798,1318,3.615,1471,4.799,1472,4.799]],["t/435",[1,2.512,3,0.656,7,2.2,9,3.599,10,2.475,15,1.986,47,1.757,147,1.441,166,1.004,221,3.059,227,3.757,250,2.907,256,5.52,271,3.276,307,2.717,312,3.345,316,2.234,329,3.331,381,2.424,425,2.512,427,2.242,512,3.947,560,1.736,632,2.907,648,2.2,673,3.345,700,2.167,731,4.678,764,5.852,776,5.52,795,5.224,833,3.059,972,3.648,973,3.345,1473,4.988,1474,4.988,1475,6.974]],["t/437",[3,0.592,10,1.385,15,1.622,93,1.589,127,1.146,138,1.554,147,1.3,166,0.652,198,1.601,235,1.792,236,1.463,290,2.505,311,1.296,318,1.604,353,2.776,357,1.18,397,0.983,427,1.447,434,1.308,439,1.513,682,1.955,714,3.472,832,3.454,833,1.712,857,1.627,972,5.065,1045,1.668,1060,3.247,1196,1.939,1476,7.598,1477,2.343,1478,6.482,1479,5.652,1480,4.499,1481,3.776,1482,2.343,1483,4.499,1484,2.343]],["t/439",[15,1.634,112,3.408,127,1.667,147,1.174,166,0.694,221,2.491,235,0.875,250,2.367,255,3.408,279,2.427,353,1.739,357,1.15,428,2.539,434,0.82,439,1.366,558,2.561,560,1.414,584,1.115,602,3.06,627,2.923,639,1.69,646,2.82,682,3.112,785,3.06,792,2.931,819,3.365,820,2.931,832,2.923,833,2.491,899,4.393,944,2.561,972,4.793,985,2.931,1374,2.931,1485,4.061,1486,6.015,1487,6.015,1488,6.015,1489,4.061,1490,3.667,1491,6.015,1492,6.015,1493,4.061,1494,5.047]],["t/441",[15,0.651,19,1.005,77,2.307,101,2.395,147,1.324,151,1.694,217,1.664,219,1.24,221,1.751,235,1.237,249,2.395,257,1.751,266,1.412,337,1.555,357,1.13,431,1.664,434,1.325,439,1.54,444,2.396,511,3.852,560,1.595,567,0.994,627,3.191,639,1.906,646,3.181,648,2.896,657,1.915,682,2.853,700,1.24,714,1.99,715,3.072,716,2.81,718,3.072,731,1.915,766,2.15,785,3.451,786,5.181,792,3.306,819,3.085,820,3.306,832,2.788,857,1.664,891,1.706,899,1.751,942,4.404,972,4.83,1074,2.578,1179,4.136,1477,6.033,1495,8.064,1496,2.578,1497,4.581,1498,2.854,1499,4.581,1500,2.854,1501,2.854,1502,4.581]],["t/443",[7,1.535,10,1.072,13,2.135,15,1.488,17,1.39,125,1.32,147,1.006,235,0.75,238,2.195,266,1.722,311,0.696,316,2.398,318,1.909,326,1.982,353,1.491,357,1.152,360,2.195,381,3.17,428,2.754,431,3.121,434,1.081,439,1.171,449,2.981,492,4.501,511,1.663,567,1.212,571,3.591,626,1.982,648,2.362,682,2.327,700,1.513,714,2.835,795,2.262,821,3.718,832,1.692,833,2.135,972,4.816,1048,4.238,1080,2.418,1196,2.418,1482,2.921,1490,3.144,1494,4.493,1503,3.481,1504,3.144,1505,3.144,1506,3.481,1507,3.144,1508,3.481,1509,2.755,1510,3.481,1511,4.835,1512,3.481,1513,4.835,1514,4.835]],["t/445",[10,1.479,15,0.692,17,1.211,110,1.473,125,1.149,127,1.244,147,1.389,198,0.584,235,0.653,252,1.424,255,2.544,266,1.499,311,0.606,318,1.713,353,1.298,357,1.176,360,1.912,381,2.336,428,1.28,434,0.97,439,1.019,449,1.688,492,1.726,567,1.673,571,4.557,682,2.088,700,2.088,714,3.589,721,2.62,736,3.338,770,2.544,794,4.033,821,3.338,832,1.473,871,3.469,942,3.224,972,4.32,1048,3.804,1196,3.338,1477,5.011,1481,4.033,1482,2.544,1484,4.033,1494,4.033,1507,2.738,1509,2.4,1511,6.136,1513,4.34,1514,4.34,1515,4.34,1516,5.971,1517,3.032,1518,3.032,1519,3.032,1520,3.032]],["t/447",[15,2.079,16,2.568,52,3.726,93,4.276,250,5.313,316,2.488,328,4.185,399,2.906,428,3.17,434,1.516,648,3.753,700,2.414,721,1.847,944,3.504,972,5.248,1196,5.216,1263,3.726,1352,5.017,1374,4.009,1484,4.662,1515,5.017,1521,5.556,1522,5.556,1523,5.556,1524,5.017]],["t/449",[3,1.068,78,7.329,161,5.444,219,3.526,276,5.857,602,6.114,972,4.245]],["t/451",[77,3.695,147,1.551,151,1.985,166,0.964,346,3.728,357,1.164,434,1.481,864,4.847,899,3.292,972,3.838,1058,4.044,1200,2.265,1203,3.6,1374,3.874,1525,7.337,1526,6.626,1527,7.337,1528,5.368,1529,7.337,1530,7.337,1531,7.337,1532,5.368,1533,7.337]],["t/453",[3,0.958,47,2.564,88,5.483,110,3.536,135,4.589,268,5.054,271,3.419,273,5.054,315,4.242,417,4.589,505,6.107,870,2.906,928,5.252,972,3.807,1018,6.107,1534,7.278]],["t/456",[3,1.266,11,3.011,19,1.678,26,1.783,50,2.201,61,3.339,84,3.77,147,1.376,166,0.905,211,2.237,217,2.776,225,2.542,235,1.027,265,3.225,279,2.846,298,3.094,311,1.35,332,2.712,352,2.776,357,0.934,404,2.491,406,2.921,444,2.491,483,3.935,507,2.712,624,3.308,731,4.528,774,3.195,833,4.141,993,4.301,1063,3.997,1072,5.086,1101,5.665,1535,4.763,1536,4.763,1537,4.301,1538,5.343,1539,4.763,1540,3.77,1541,4.763]],["t/458",[17,1.86,44,2.346,57,1.66,61,3.831,125,1.766,166,0.766,187,2.761,192,5.006,200,3.026,230,1.389,266,3.286,304,4.035,311,0.931,352,2.715,357,0.51,381,2.263,397,1.641,398,2.937,404,2.436,405,5.259,407,3.909,415,4.885,417,5.327,431,2.715,449,3.699,465,3.909,491,3.361,499,5.576,557,3.509,559,3.124,560,1.622,563,3.361,598,2.857,614,3.509,1080,3.235,1433,3.361,1538,3.686,1540,3.686,1542,4.206,1543,3.909,1544,4.658,1545,4.658,1546,4.658,1547,4.658,1548,4.658,1549,4.206,1550,4.658]],["t/460",[3,0.809,18,4.124,61,3.041,318,2.192,357,1.126,443,6.215,449,5.481,774,4.124,1542,7.255,1551,6.148,1552,8.949,1553,6.148,1554,6.148,1555,6.148,1556,5.552,1557,5.552,1558,6.148]],["t/462",[12,1.224,19,2.235,125,2.406,138,3.533,141,3.945,147,2.159,166,0.504,197,1.871,198,1.58,199,1.557,230,3.004,263,2.755,356,2.052,357,1.051,381,3.084,397,1.539,405,5.022,406,2.68,415,4.712,417,4.002,434,0.882,439,1.469,449,4.565,481,3.153,542,4.781,558,2.755,611,2.93,614,3.291,626,2.487,651,3.945,657,5.501,720,2.38,838,3.291,1559,4.369,1560,4.369,1561,4.369,1562,4.369]],["t/464",[3,1.003,30,2.026,57,1.613,125,1.715,187,2.32,233,1.635,262,2.853,304,4.219,329,2.161,356,3.916,357,1.122,381,3.163,398,2.853,406,2.775,407,3.797,408,3.797,409,4.086,410,3.797,415,4.104,417,5.257,421,4.086,492,2.576,558,2.853,598,5.113,627,2.199,915,3.581,1263,3.035,1538,5.151,1540,3.581,1543,3.797,1563,6.509,1564,4.086,1565,4.525,1566,4.086,1567,4.525,1568,4.525,1569,4.525]],["t/466",[3,1.131,7,1.487,30,3.224,61,3.561,125,2.423,166,0.602,198,0.649,270,3.293,304,3.439,311,0.674,316,2.339,318,1.201,356,4.038,357,1.179,381,1.638,401,2.031,410,4.382,415,2.125,427,1.084,449,1.876,463,2.261,599,3.044,738,2.261,881,3.044,950,3.044,972,1.763,973,2.261,1062,2.067,1121,4.382,1225,3.044,1538,5.06,1540,4.133,1543,4.382,1549,4.716,1556,3.044,1557,3.044,1564,3.044,1566,4.716,1570,3.37,1571,3.37,1572,3.37,1573,3.37,1574,3.37,1575,3.37,1576,3.37,1577,5.222,1578,3.37,1579,3.044,1580,3.37,1581,3.37]],["t/468",[3,0.918,10,2.147,12,2.253,22,2.559,24,2.559,26,1.867,35,3.599,37,2.717,104,2.907,116,2.467,127,2.047,129,3.345,168,2.559,233,2.02,234,3.951,235,2.046,250,4.065,290,2.776,326,2.84,327,4.678,337,2.717,427,2.242,626,2.84,768,3.947,829,3.059,869,2.609,870,1.992,871,3.599,893,3.599,908,4.185,979,3.059,1093,2.907,1245,3.345,1246,3.599,1247,3.464,1582,4.504,1583,4.988]],["t/470",[3,0.737,15,1.279,19,1.974,135,3.534,166,0.646,185,4.515,233,2.147,234,3.144,235,2.058,316,2.51,326,4.302,357,0.827,406,3.438,425,2.823,434,1.725,491,4.045,536,4.045,567,1.951,648,2.472,700,2.435,721,2.512,870,3.653,1035,4.222,1200,2.366,1210,5.061,1211,5.061]],["t/472",[19,1.923,166,0.63,199,1.946,233,2.118,234,2.272,235,1.177,327,3.662,357,1.14,425,3.738,427,2.387,428,2.304,434,1.102,563,3.94,567,2.936,584,1.499,870,4.059,908,4.582,1174,4.113,1200,3.133,1255,4.931,1584,4.931,1585,5.46]],["t/474",[61,2.146,135,2.736,166,0.5,185,2.593,187,2.251,233,1.586,234,1.806,235,0.935,236,1.411,243,2.185,266,4.296,357,1.148,427,1.395,434,0.876,444,2.27,560,2.591,567,2.198,714,1.885,721,1.443,739,5.014,760,2.736,832,3.617,870,3.265,899,3.873,924,2.593,981,3.918,1045,2.593,1200,1.831,1274,4.997,1586,4.339,1587,3.918,1588,4.339,1589,5.702,1590,3.918,1591,4.339,1592,4.339,1593,4.339,1594,4.339,1595,4.339,1596,4.339]],["t/476",[17,1.383,53,3.362,125,1.313,147,1.001,166,0.399,185,2.069,199,1.234,216,2.499,233,1.339,236,1.733,243,4.81,263,2.183,266,2.637,336,2.183,357,1.122,403,1.575,427,1.113,431,2.018,434,1.312,449,4.988,493,2.405,511,1.654,558,3.362,560,1.856,567,1.856,763,2.405,870,3.578,899,3.988,907,3.127,970,6.869,1200,1.461,1272,2.322,1496,3.127,1597,3.462,1598,3.462,1599,3.462,1600,3.462,1601,3.462,1602,3.462,1603,3.462,1604,3.127,1605,6.502,1606,3.462,1607,3.127,1608,3.462,1609,3.462,1610,3.462,1611,3.462,1612,3.462,1613,3.462,1614,3.462,1615,3.462]],["t/478",[147,1.077,166,0.43,199,1.329,233,1.417,236,1.212,243,4.618,266,2.789,336,2.35,357,1.166,427,1.198,434,1.138,492,3.211,558,3.557,560,1.963,562,5.955,567,1.963,739,3.459,763,2.588,834,3.128,870,3.255,897,2.69,899,4.173,970,6.005,1274,4.464,1604,5.093,1607,5.093,1616,3.727,1617,3.727,1618,3.727,1619,3.727,1620,3.727,1621,3.727,1622,5.64,1623,5.64,1624,3.727,1625,3.727,1626,3.727,1627,3.727,1628,3.727,1629,3.727,1630,3.727,1631,3.727]],["t/480",[15,1.388,24,1.602,29,1.968,30,1.398,166,0.36,198,0.947,199,1.113,212,2.168,221,1.915,232,2.619,233,0.784,234,3.321,235,1.8,263,1.968,307,1.701,311,0.624,357,1.14,386,2.028,392,2.028,397,2.144,427,2.566,434,1.516,439,1.05,448,3.472,488,2.47,507,1.777,582,5.203,584,0.857,625,3.299,626,4.544,627,3.356,632,2.867,792,3.549,869,2.573,870,3.187,1014,1.701,1272,5.805,1632,4.918,1633,3.121,1634,3.121,1635,3.121,1636,3.121,1637,3.121,1638,4.918,1639,3.121,1640,3.121,1641,3.121,1642,3.121,1643,3.121,1644,3.121,1645,3.121]],["t/482",[15,1.103,125,1.833,151,1.788,166,0.558,197,2.07,233,1.214,235,1.704,311,0.967,357,1.153,385,2.634,390,5.401,434,1.377,449,3.799,479,3.243,562,4.739,563,4.924,684,5.761,739,4.185,822,4.058,870,3.618,898,5.726,909,3.49,1175,3.827,1285,3.827,1466,4.058,1646,6.162,1647,4.367,1648,4.835,1649,6.162]],["t/484",[3,0.779,15,1.35,197,2.534,230,1.765,233,1.487,235,1.276,357,1.157,439,1.99,449,3.295,562,4.111,807,5.345,870,2.364,898,4.967,1174,4.459,1650,5.919,1651,5.919,1652,5.919,1653,5.919,1654,9.35,1655,5.919,1656,5.919,1657,5.919,1658,5.919,1659,5.919]],["t/486",[3,0.556,10,1.3,17,1.687,29,2.663,36,2.127,147,1.22,166,0.714,187,1.506,211,1.984,226,2.613,235,0.91,239,2.59,357,1.128,425,2.127,427,1.99,431,2.462,434,1.249,439,2.082,443,2.933,449,4.08,512,3.343,553,4.152,587,2.744,632,2.462,686,2.017,721,2.683,851,3.544,870,3.705,877,3.343,899,2.59,1014,2.301,1078,3.182,1200,2.613,1291,3.048,1410,3.814,1584,3.814,1589,3.814,1590,3.814,1660,4.223,1661,4.223,1662,4.223,1663,4.223,1664,4.223,1665,3.814,1666,4.223,1667,4.223,1668,4.223,1669,4.223]],["t/488",[3,1,10,1.741,12,1.585,22,2.902,26,2.117,37,3.081,104,3.296,116,2.797,127,2.321,129,3.793,151,2.091,168,2.902,233,1.909,234,3.986,236,3.114,250,3.296,326,3.22,337,3.081,427,1.818,567,1.969,602,4.26,829,3.468,869,2.958,919,3.468,979,3.468,1093,3.296,1245,3.793,1246,4.081,1247,3.927,1582,5.107,1670,5.655]],["t/490",[45,3.877,85,3.096,147,1.777,151,2.273,166,0.709,233,1.544,234,3.949,236,3.201,295,4.632,357,0.879,418,4.632,567,2.14,584,1.688,707,3.584,721,2.044,740,4.866,753,5.552,869,3.216,988,5.552,1209,3.877,1671,6.148,1672,6.148,1673,6.148,1674,6.148]],["t/492",[12,2.34,17,2.607,45,4.117,151,2.414,166,0.753,198,1.257,233,2.098,311,1.67,357,1.062,397,2.3,404,3.415,434,1.318,567,2.273,720,3.557,721,2.17,767,3.415,1020,4.117,1316,5.123,1675,6.528]],["t/494",[12,2.119,45,2.813,151,1.649,168,2.289,198,0.859,233,1.899,235,1.893,311,1.512,356,2.096,357,1.17,381,2.168,403,2.93,404,2.334,434,1.3,448,2.978,567,1.553,625,4.321,719,4.474,720,2.431,803,4.063,854,3.438,1316,5.925,1353,3.744,1676,8.281,1677,4.461,1678,4.461]],["t/496",[15,1.103,37,2.634,85,2.435,135,3.049,151,3.349,166,0.558,198,1.654,225,2.58,233,1.986,234,3.574,235,1.471,236,2.792,276,3.49,306,3.643,357,1.057,397,1.703,401,1.881,427,1.555,483,3.978,584,1.328,606,4.058,627,3.316,720,3.718,721,2.269,768,3.827,775,3.358,869,3.569,1045,2.889,1062,2.966,1394,4.367,1665,4.367,1679,4.835,1680,4.835]],["t/498",[151,2.787,196,4.106,198,1.452,199,2.687,234,3.136,236,2.45,397,2.655,427,2.423,448,4.221,625,5.055,627,3.663,634,5.965]],["t/500",[1,2.75,45,3.443,47,1.923,151,2.744,233,1.864,234,2.272,236,1.775,311,1.092,357,1.16,397,2.615,434,1.498,439,1.836,448,2.523,553,3.662,567,1.901,708,3.443,720,4.044,721,2.468,803,3.443,805,6.229,1316,4.553,1681,5.46,1682,5.46,1683,5.46,1684,7.423]],["t/502",[3,1.2,10,1.969,15,1.459,166,0.951,221,3.923,243,3.221,250,3.729,336,4.034,392,4.155,425,4.151,606,7.654,632,3.729,700,2.779,721,2.127,729,5.141,767,3.346,846,4.616,1058,4.819,1080,4.442]],["t/504",[357,1.185,397,2.398,434,1.374,439,2.289,714,3.727,729,3.633,970,6.789,1382,5.389,1481,7.198,1685,6.148]],["t/506",[3,0.47,7,2.409,10,0.65,12,1.301,15,0.482,23,1.332,71,1.773,115,1.672,135,1.332,147,1.579,148,1.672,151,0.781,161,2.397,166,0.536,187,0.753,189,1.176,198,0.407,205,2.692,233,0.531,250,1.231,251,1.672,252,0.992,263,1.332,279,1.262,311,1.326,318,0.753,322,1.525,326,1.203,336,1.332,357,1.112,370,1.908,397,1.259,434,1.739,448,2.525,502,1.467,515,2.999,567,0.735,592,1.592,614,1.592,627,2.655,639,0.879,682,3.069,700,0.918,706,5.565,707,4.508,708,1.332,714,2.881,716,2.192,717,1.525,718,1.417,729,2.915,736,1.467,761,1.332,782,3.017,797,1.417,819,0.992,832,1.027,847,1.045,857,1.231,927,1.592,943,1.672,966,4.555,972,2.429,1004,1.773,1020,2.254,1060,1.525,1165,1.908,1189,3.897,1209,2.929,1686,2.113,1687,5.463,1688,2.113,1689,1.908,1690,4.194,1691,4.194,1692,4.645,1693,2.113,1694,2.113,1695,4.645,1696,2.113,1697,2.113,1698,3.574,1699,7.063,1700,3.897,1701,3.574,1702,3.574,1703,3.574,1704,2.113,1705,3.574,1706,2.113]],["t/508",[3,0.751,7,2.517,12,2.417,30,2.555,166,0.658,198,1.099,230,1.701,235,1.648,325,5.311,357,1.124,391,4.516,392,3.707,397,3.246,403,2.595,439,1.919,493,3.963,682,3.748,729,3.045,760,3.598,1189,6.417,1256,4.788,1707,5.706,1708,5.706]],["t/510",[10,1.805,12,1.643,166,0.676,168,3.009,187,2.09,198,1.5,311,1.557,357,1.13,397,3.08,434,1.184,439,1.972,682,3.799,767,3.067,803,3.698,805,4.921,1020,3.698,1291,4.232,1690,7.896,1709,5.864,1710,7.788,1711,5.864]],["t/512",[11,2.929,12,2.137,166,0.88,224,4.343,235,1.644,325,5.297,390,6.037,391,6.037,392,4.955,397,2.687,653,3.47,1505,6.888]],["t/514",[125,2.857,235,1.624,311,1.507,357,1.118,381,3.663,720,4.106,854,4.022,1306,6.325,1316,4.623,1712,7.537]],["t/516",[12,1.643,16,2.71,125,2.952,127,2.406,147,1.695,166,0.676,233,1.473,235,2.09,311,1.172,357,1.113,381,2.85,397,2.066,428,2.475,431,3.418,434,1.572,720,3.195,854,3.129,870,3.11,910,4.232,936,4.418,1092,4.418,1306,4.921,1316,3.597,1713,5.864]],["t/518",[1,2.399,3,1.032,11,1.829,12,1.335,32,2.444,47,1.678,125,2.559,183,4.528,198,1.3,226,3.802,233,1.196,235,1.455,238,3.003,271,2.237,311,1.35,316,2.133,357,1.122,403,2.166,427,1.531,434,0.961,511,3.746,535,2.166,560,1.658,637,3.531,638,3.308,639,1.982,653,3.567,774,3.195,819,2.237,870,2.696,909,3.437,1051,3.531,1108,3.437,1714,4.763]],["t/520",[10,1.413,120,3.633,151,2.431,198,1.267,225,2.45,226,1.937,230,1.961,233,1.153,235,1.656,311,0.918,332,2.613,353,1.966,357,1.158,397,1.617,427,2.114,483,2.676,511,3.141,529,3.458,535,2.088,567,1.598,584,1.806,637,3.44,639,1.91,820,3.313,847,2.27,1051,3.44,1108,3.313,1131,3.852,1258,4.145,1286,4.145,1715,4.59,1716,4.59,1717,4.59,1718,4.59,1719,4.59,1720,4.59,1721,4.59,1722,4.59,1723,4.59,1724,4.59,1725,4.59,1726,4.59]],["t/522",[47,2.324,198,1.27,311,1.319,353,2.824,357,1.126,401,2.566,403,3,560,2.296,638,4.581,639,3.498,714,2.866,942,5.639,1108,4.76,1700,7.055,1727,5.957,1728,6.596,1729,6.596]],["t/524",[0,2.637,10,2.037,76,2.428,93,1.647,125,1.097,151,1.712,183,1.941,230,2.302,233,0.727,235,2.029,266,1.431,311,1.158,324,1.729,337,3.944,357,1.171,385,3.154,428,2.793,434,1.168,479,1.941,492,2.637,563,2.088,582,4.985,684,4.438,870,3.238,897,3.342,899,1.775,912,3.886,1014,1.576,1080,2.01,1108,4.178,1200,3.055,1203,1.941,1272,3.106,1646,5.228,1647,6.973,1649,4.182,1730,5.79,1731,2.894,1732,6.618,1733,6.618]],["t/526",[0,3.649,10,1.973,76,3.718,125,2.43,166,0.739,197,1.897,226,1.87,233,1.113,235,1.382,311,0.886,353,1.897,357,1.145,385,4.103,425,2.231,428,1.87,449,2.466,479,4.299,558,2.794,582,4.829,584,1.76,587,2.878,684,4.299,870,3.76,897,4.626,909,6.589,912,3.718,1108,3.197,1272,2.971,1404,6.802,1466,3.718,1734,4.43,1735,4.43,1736,4.43]],["t/528",[1,3.037,3,0.794,15,1.376,19,2.125,36,3.037,47,2.125,73,3.604,98,4.045,153,2.66,166,1.023,198,1.162,225,3.219,233,1.515,312,5.321,323,4.353,427,1.939,507,3.434,535,2.744,560,2.762,653,3.609,819,4.165,869,3.155,966,3.434,1013,5.447,1079,4.045,1093,3.516,1737,6.031]],["t/530",[47,2.823,166,0.924,391,6.342,392,5.206,427,2.576,639,3.335,700,3.482,819,3.764]],["t/532",[16,2.986,357,1.12,427,2.947,560,2.888,639,3.453,648,2.85,819,3.898,832,4.032,924,4.958,1062,3.963,1196,4.488,1200,3.502,1203,5.565]],["t/534",[0,3.278,125,2.183,166,0.664,357,1.14,403,2.619,492,3.278,560,3.219,584,1.581,648,3.393,682,2.502,714,2.502,759,6.456,819,4.07,918,3.74,1121,4.832,1200,2.43,1212,6.456,1218,5.199,1738,5.758,1739,7.693,1740,5.758,1741,5.758]],["t/536",[357,1.114,427,2.633,560,3.16,639,2.635,648,2.793,715,4.247,819,2.975,832,3.98,918,5.32,924,3.784,1200,3.831,1203,5.493,1204,7.396,1212,6.873]],["t/538",[85,3.738,125,2.07,166,0.63,185,4.435,324,3.262,357,1.14,427,1.755,434,1.498,492,3.109,554,4.113,560,2.936,626,3.109,639,2.272,714,3.225,819,2.565,832,3.607,924,3.262,944,4.681,1175,4.321,1374,5.357,1509,4.321,1742,4.931,1743,5.46,1744,5.46,1745,5.46,1746,4.931,1747,4.931]],["t/540",[19,1.785,85,3.551,125,1.921,166,0.584,224,2.885,226,2.976,289,5.917,324,3.028,357,1.135,427,1.629,434,1.423,492,2.885,560,2.823,639,2.109,714,3.064,782,5.268,819,2.38,928,3.657,942,4.73,944,4.447,1176,4.576,1195,7.324,1374,5.089,1700,4.252,1727,4.576,1742,4.576,1747,4.576,1748,7.051,1749,5.067]],["t/542",[47,2.324,198,1.27,311,1.85,357,1.013,401,2.566,434,1.697,560,2.296,700,2.866,716,5.157,718,4.424,785,4.969,819,3.099,820,6.067,918,4.285,1014,3.594,1304,5.535,1750,6.596,1751,6.596]],["t/544",[3,0.772,47,2.743,85,2.953,166,0.676,198,1.5,226,3.287,311,1.557,316,2.626,353,3.335,357,1.061,401,3.029,427,1.885,444,3.067,560,2.711,584,2.138,638,5.408,653,2.667,819,3.658,832,2.85,924,3.504,1304,4.921,1752,5.864,1753,5.864]],["t/546",[10,1.512,11,1.885,147,1.419,153,2.166,161,3.293,219,2.134,226,2.072,238,3.097,276,3.544,311,0.982,316,2.199,357,1.116,397,1.73,399,2.569,427,1.579,434,1.609,492,2.796,498,4.434,560,2.401,639,2.043,682,2.134,714,3.465,716,3.012,717,3.544,718,4.627,739,3.012,832,3.875,878,4.121,891,2.934,918,3.19,1509,3.886,1537,4.434,1754,7.974,1755,6.898,1756,4.91,1757,4.91,1758,6.898]],["t/548",[3,0.859,15,1.489,17,3.678,22,3.35,26,2.444,37,3.557,104,3.805,116,3.229,166,0.753,168,3.35,236,2.122,567,2.273,584,1.793,721,3.062,761,4.117,791,5.167,829,4.004,979,4.004,1093,3.805,1245,4.379,1246,4.711,1263,4.379]],["t/551",[3,0.868,15,1.505,61,3.262,235,1.812,236,2.144,346,4.581,353,3.6,357,1.126,397,2.324,729,4.486,854,3.52,869,3.45,1020,4.16,1122,5.957,1230,5.957,1759,6.596,1760,5.957]],["t/553",[0,3.835,10,2.074,110,3.273,166,0.777,187,2.401,198,1.297,311,1.704,357,1.023,397,3.292,434,1.36,720,3.67,750,4.861,751,5.075,767,3.524,1020,4.248,1316,5.732]],["t/555",[3,0.667,10,1.56,17,2.816,198,1.358,227,3.818,235,1.092,236,1.647,243,3.551,353,2.17,357,1.124,397,2.484,399,2.651,434,1.423,567,1.764,611,3.399,700,3.064,721,2.915,727,2.704,728,2.954,729,5.224,774,3.399,854,4.328,956,4.011,1017,4.252,1020,3.196,1249,4.011,1760,4.576,1761,5.067]],["t/557",[0,2.753,12,1.355,166,0.558,198,0.931,233,1.714,236,1.572,311,1.88,357,1.113,397,3.191,401,1.881,434,1.828,584,1.328,647,3.643,707,5.28,721,1.608,729,2.58,750,3.49,751,3.643,767,3.569,966,3.885,1027,4.058,1062,2.966,1689,4.367,1691,6.162,1762,9.059,1763,4.835]],["t/559",[3,1.096,198,1.604,236,2.708,483,4.855,653,3.789]],["t/561",[12,1.706,47,2.145,187,2.171,230,1.816,235,1.312,236,2.896,311,1.596,312,4.084,357,1.102,397,2.812,434,1.229,439,2.048,553,4.084,647,4.587,657,4.084,707,4.654,854,4.26,869,3.185,1382,4.819,1685,7.21,1764,6.089]],["t/563",[29,5.118,35,5.857,91,6.114,166,0.936,252,3.813,706,6.811,1765,5.857]],["t/565",[10,2.467,147,2.316,168,4.112,251,6.342,502,5.565,626,4.562,1765,5.783,1766,8.013]],["t/570",[7,4.357,108,6.626,134,7.442,1767,7.628,1768,7.628,1769,7.628]],["t/572",[166,0.803,262,4.388,775,4.832,1770,9.485,1771,8.696,1772,6.958,1773,8.565,1774,9.485,1775,6.958,1776,6.958,1777,6.958,1778,6.958,1779,6.958]],["t/574",[0,3.717,13,4.004,166,0.753,185,5.801,212,4.534,399,4.369,562,5.8,823,8.316,1014,4.55,1504,7.542,1773,5.895,1780,8.352,1781,5.895,1782,6.528,1783,6.528,1784,6.528]],["t/576",[10,2.836,91,4.298,110,4.191,127,2.341,144,4.298,147,1.649,166,0.882,196,3.109,199,2.034,533,5.311,562,3.963,605,4.516,782,4.967,812,7.29,826,4.516,979,3.5,1035,4.298,1359,4.788,1433,4.118,1785,8.625,1786,5.706,1787,5.706,1788,5.153,1789,5.706]],["t/578",[10,2.677,19,2.451,110,3.381,153,3.069,165,5.021,166,0.803,318,3.1,415,5.483,533,4.832,566,6.283,666,5.839,782,4.52,871,5.021,1359,5.839,1765,5.021,1790,6.283,1791,6.958]],["t/580",[22,3.315,125,2.45,252,4.305,316,2.894,357,1.058,517,8.115,536,4.663,639,2.689,893,4.663,985,4.663,1579,5.835,1792,8.297,1793,6.462,1794,6.462,1795,6.462,1796,6.462,1797,6.462,1798,6.462]],["t/582",[33,2.876,58,2.938,166,0.837,212,3.666,224,3.005,266,2.61,321,3.54,329,2.521,357,0.578,533,3.666,804,4.766,944,3.329,985,3.809,1031,4.766,1174,5.464,1175,5.741,1239,3.666,1318,3.976,1357,4.766,1438,4.766,1524,4.766,1587,7.483,1746,4.766,1765,5.98,1799,5.278,1800,7.253,1801,5.278,1802,5.278,1803,5.278,1804,7.253,1805,5.278,1806,5.278,1807,5.278,1808,5.278,1809,5.278,1810,5.278,1811,5.278,1812,5.278,1813,5.278,1814,5.278]],["t/584",[29,3.732,58,3.295,59,4.967,151,2.188,284,4.684,782,3.845,872,5.903,873,5.345,893,4.271,930,4.684,985,5.655,1045,3.537,1058,5.903,1110,5.345,1242,5.345,1318,4.459,1526,7.932,1765,4.271,1781,5.345,1815,7.836,1816,5.919,1817,5.919,1818,5.919,1819,7.836,1820,7.836,1821,5.919,1822,5.919,1823,5.919]],["t/586",[145,6.251,166,1.046,185,4.451,199,2.655,219,3.236,744,7.61,791,5.895,872,5.611,904,4.996,1765,5.375,1788,6.726,1824,7.449]],["t/588",[13,4.132,28,3.927,262,4.248,425,3.392,444,3.524,857,3.927,866,8.439,944,6.388,985,7.31,1045,4.025,1790,6.083,1825,8.52]],["t/590",[311,1.867,332,5.315,382,6.737,673,6.262,1018,7.834]],["t/592",[3,1.057,15,1.833,82,3.994,125,3.393,166,0.927,195,2.797,198,1.184,239,3.771,290,3.423,317,3.994,325,4.27,352,3.584,408,6.742,417,3.877,431,3.584,560,2.14,598,3.771,680,4.866,847,3.041,891,3.674,1433,6.458,1826,6.148,1827,6.148,1828,6.148]],["t/594",[3,0.772,195,2.667,311,1.172,317,3.809,325,5.408,352,3.418,357,1.144,397,2.743,398,3.698,399,3.067,417,4.911,418,4.418,598,4.776,646,4.073,682,3.384,1433,5.62,1829,5.864,1830,9.316,1831,5.864,1832,5.864]]],"invertedIndex":[["",{"_index":357,"t":{"52":{"position":[[23,1],[46,1],[48,1],[101,1],[103,1],[140,2]]},"54":{"position":[[295,1],[355,1],[357,1],[411,1],[413,1],[424,4],[437,4],[465,2],[468,1],[470,2],[534,2],[581,2],[613,2],[681,1],[683,1]]},"58":{"position":[[319,1],[343,1],[345,1],[380,1],[410,1],[412,1],[447,1],[469,1],[471,1],[530,1],[532,1],[552,1],[561,1],[563,2],[677,3],[681,2],[779,1],[790,1],[891,3],[895,2],[898,3],[902,2],[905,2],[908,2]]},"60":{"position":[[288,1],[300,1],[302,1],[330,2],[418,1],[432,2],[515,1],[566,1],[568,3],[578,1],[590,1],[592,1],[638,1],[652,2],[722,1],[780,2],[783,2],[850,3],[1121,1],[1227,1],[1264,2],[1267,1],[1283,1],[1285,1],[1300,1],[1332,1],[1417,1],[1419,1],[1447,1],[1529,1],[1531,1],[1540,1],[1562,1],[1564,1],[1638,2]]},"64":{"position":[[363,1],[423,1],[425,1],[464,2],[467,1],[513,1],[557,2],[584,1],[660,1],[702,1],[704,1],[724,2],[727,1],[729,2],[778,2],[825,2],[881,2],[933,2],[961,2],[978,2],[981,2],[991,2],[1029,2],[1083,2],[1114,2],[1147,2],[1150,2],[1168,2],[1171,2]]},"66":{"position":[[445,1],[523,1],[525,1],[564,2],[567,1],[613,1],[657,2],[684,1],[760,1],[802,1],[804,1],[824,1],[835,2],[838,2],[841,1],[843,2],[892,2],[939,2],[996,2],[1070,2],[1126,2],[1178,2],[1206,2],[1223,2],[1226,2],[1236,2],[1274,2],[1328,2],[1359,2],[1392,2],[1395,2],[1413,2],[1416,2]]},"70":{"position":[[658,1],[718,1],[720,1],[759,2],[762,1],[808,1],[852,2],[879,1],[955,1],[997,1],[999,1],[1019,2],[1022,1],[1024,2],[1073,2],[1120,2],[1176,2],[1228,2],[1256,2],[1273,2],[1276,2],[1286,2],[1324,2],[1378,2],[1409,2],[1442,2],[1474,2],[1498,2],[1588,2],[1638,2],[1641,2],[1659,2],[1662,2]]},"86":{"position":[[166,2],[212,2],[1012,3]]},"90":{"position":[[342,1],[373,1],[433,1],[481,1],[490,1],[538,3],[553,3],[565,3],[575,3],[579,2],[582,1],[643,1],[658,1],[742,1],[752,1],[754,1]]},"92":{"position":[[200,1],[210,1],[236,2]]},"96":{"position":[[580,2],[621,2],[624,3],[632,1],[634,3],[672,1],[674,3],[706,1],[708,3],[721,3],[762,3],[1083,1],[1104,1],[1143,2],[1146,1]]},"100":{"position":[[460,1],[481,1],[483,1],[529,1],[561,1],[613,2],[616,3],[702,1],[720,2],[723,2],[803,3],[807,2],[881,3]]},"102":{"position":[[346,1],[355,1],[454,1]]},"104":{"position":[[263,1],[272,1],[371,1]]},"112":{"position":[[75,1],[99,1],[101,1],[140,2],[158,1],[200,1]]},"114":{"position":[[192,1],[216,1],[218,1],[257,1],[268,1],[298,2],[309,1],[318,1],[320,1],[383,2],[386,2],[389,2],[392,1]]},"116":{"position":[[180,1],[200,1],[209,1],[232,1],[271,2],[274,2],[277,2]]},"120":{"position":[[344,1],[401,1]]},"122":{"position":[[134,2],[229,2],[252,1],[254,1],[256,2],[365,2],[376,1],[405,1]]},"128":{"position":[[232,1],[234,1],[274,2],[282,2],[308,1],[310,1],[312,2],[357,2],[360,2],[367,2],[393,1],[395,1],[397,2],[447,2],[467,1],[469,1],[471,2],[517,2]]},"130":{"position":[[385,1]]},"134":{"position":[[292,1],[343,1]]},"140":{"position":[[406,2],[409,1],[515,2],[535,2],[550,2],[553,1],[643,2],[659,2]]},"142":{"position":[[274,1],[292,2],[325,2],[349,1]]},"144":{"position":[[135,1],[194,1]]},"150":{"position":[[26,1],[139,1],[160,1]]},"152":{"position":[[269,1],[290,1]]},"154":{"position":[[338,1],[348,1],[401,2]]},"156":{"position":[[213,1],[223,1],[267,2],[304,2]]},"160":{"position":[[18,1]]},"164":{"position":[[310,1],[336,2],[350,2],[353,1],[374,2],[377,2],[386,2],[389,2],[427,2],[444,2],[478,2],[863,1],[926,1],[951,2],[978,2],[1004,2],[1417,1],[1438,1],[1454,2],[1457,2],[1493,2]]},"166":{"position":[[116,1],[137,1],[161,2],[237,1],[239,1],[241,1],[243,1],[292,4]]},"168":{"position":[[259,1],[322,1],[332,2],[345,2],[429,1],[449,1],[466,1],[488,1],[507,1],[536,1]]},"170":{"position":[[346,1],[369,1],[444,2],[482,2],[499,1],[522,1]]},"172":{"position":[[193,1],[207,1],[242,1],[244,2],[257,2],[260,2],[263,1],[346,2],[356,2]]},"174":{"position":[[182,1],[205,1],[223,1],[245,1],[265,1],[294,1],[383,1],[406,1],[438,1],[460,1],[494,1],[523,1]]},"176":{"position":[[237,1],[260,1],[285,1],[305,1],[307,2],[310,3],[314,2]]},"178":{"position":[[300,2],[310,2],[320,2],[385,1],[448,1],[458,1],[481,1],[493,2],[725,1],[748,1],[750,2],[833,1],[854,1],[856,2],[926,2],[967,1],[987,1]]},"199":{"position":[[475,1],[477,2],[480,3],[484,2],[487,1],[497,1],[578,1]]},"201":{"position":[[109,1],[190,1]]},"203":{"position":[[624,1],[626,2],[629,3],[633,2],[636,1],[645,1],[665,2],[693,2],[696,1],[771,2],[793,2],[809,1],[811,2],[814,3],[818,2],[821,1],[823,2],[854,2],[871,1],[891,1]]},"205":{"position":[[535,2],[563,2],[573,2],[580,2],[583,2],[598,2],[614,2],[627,2]]},"207":{"position":[[245,1],[308,1],[318,2],[331,2],[466,1],[480,1],[519,1],[521,2],[534,2],[537,2],[540,1],[549,1],[584,1],[586,2],[596,2],[599,2],[649,2],[702,1],[704,1],[990,1],[992,2],[1038,2],[1059,1],[1076,1],[1078,2],[1095,2],[1118,1],[1137,1],[1139,2],[1160,2],[1190,1],[1316,2],[1349,2],[1384,2]]},"209":{"position":[[204,2],[263,2]]},"221":{"position":[[139,1],[161,1],[163,2],[173,2],[200,1],[222,1]]},"223":{"position":[[432,1],[465,1]]},"233":{"position":[[7,1],[18,2],[41,2],[81,2],[110,2],[139,2],[160,1]]},"237":{"position":[[238,1],[258,1],[314,1],[316,1],[318,1],[320,1]]},"239":{"position":[[163,1],[177,1],[236,1],[620,1],[634,1],[669,1],[671,2],[684,2],[687,2],[690,1],[699,1],[736,1],[755,2],[778,2],[781,1]]},"241":{"position":[[370,1],[379,2],[407,1],[431,2],[488,2]]},"247":{"position":[[164,1],[238,1],[252,1]]},"249":{"position":[[168,1],[174,2],[257,1],[409,1],[424,2],[427,3],[431,2],[434,1],[483,1],[497,1],[517,1],[531,1]]},"253":{"position":[[114,2],[177,2],[491,3],[495,1],[548,1],[550,2],[553,2],[652,2],[1110,2],[1277,1],[1314,3],[1318,2],[1384,2]]},"255":{"position":[[111,1],[129,1],[211,1],[277,1],[330,1]]},"269":{"position":[[330,1],[412,1],[477,1],[500,1],[515,2]]},"273":{"position":[[176,1],[210,1]]},"275":{"position":[[131,2],[211,2],[233,2],[236,2],[338,2],[353,1],[381,1]]},"282":{"position":[[23,2],[49,2],[83,2],[134,2],[185,1],[190,2],[225,2]]},"284":{"position":[[202,1]]},"288":{"position":[[26,1],[45,1]]},"290":{"position":[[33,2]]},"292":{"position":[[269,1],[361,1]]},"294":{"position":[[249,2],[268,1],[281,1],[283,1],[326,2],[373,2],[376,1],[397,3],[401,1]]},"304":{"position":[[103,2],[129,2],[141,2],[166,2],[169,2],[191,2],[210,2]]},"308":{"position":[[106,2],[136,2],[184,2],[214,2],[269,2],[321,2],[415,2],[462,2],[509,2],[551,2]]},"310":{"position":[[93,1],[103,1],[130,2],[308,2],[323,2],[333,1],[347,1],[398,1],[407,1],[566,2],[569,1]]},"312":{"position":[[102,2],[105,2],[115,2],[132,2]]},"314":{"position":[[97,2],[100,2],[110,2],[125,2]]},"316":{"position":[[118,1],[150,1],[166,2],[169,2],[179,2],[197,2],[221,2],[237,2],[256,2],[262,1],[281,1],[283,2],[324,2],[330,1],[351,1],[353,2],[408,2],[414,1],[436,1],[438,2],[496,2],[502,1],[522,1],[527,1],[549,1],[566,2],[584,2],[590,1],[604,2],[607,1],[609,2],[648,2],[654,1],[677,1]]},"322":{"position":[[28,1],[30,2],[42,2],[68,2],[81,2],[106,1],[121,2],[153,2],[184,1],[395,2],[405,1],[407,2],[429,2],[432,1]]},"324":{"position":[[120,2],[180,2],[256,2],[266,1],[268,2],[294,2],[297,1],[320,2],[369,2],[432,2],[462,2]]},"326":{"position":[[138,1],[151,1],[176,2]]},"328":{"position":[[102,1],[122,1],[148,1],[157,2],[160,2],[170,2],[176,1],[207,1],[244,1],[253,2]]},"330":{"position":[[133,1],[164,1],[201,1],[210,2],[213,2],[223,2],[229,1],[249,1],[275,1],[284,2],[524,2],[679,2],[721,2],[756,1],[776,1],[802,1],[811,2],[814,2],[824,2],[830,1],[850,1],[876,1],[885,2]]},"336":{"position":[[97,1],[99,2],[106,2],[121,1],[129,1],[131,2],[138,2],[158,1],[163,1],[165,2],[208,2],[241,2],[281,2],[316,1]]},"338":{"position":[[74,2],[101,2],[118,1],[139,2],[147,2],[166,2],[191,2],[216,2],[238,2],[241,1],[246,1],[248,2],[296,2],[316,1]]},"344":{"position":[[108,1],[141,1],[143,2],[160,2],[180,1],[185,1],[187,2],[213,2],[227,2],[256,2],[287,2],[295,2],[298,1]]},"346":{"position":[[100,1],[107,1],[131,2],[166,2],[200,2],[203,3]]},"348":{"position":[[122,1],[181,1],[186,1],[203,1],[205,2],[215,2],[242,1],[301,1],[317,1],[354,1]]},"350":{"position":[[156,1],[215,1],[220,1],[237,1],[239,2],[249,2],[266,1],[325,1],[341,1],[358,1]]},"354":{"position":[[149,1],[179,2],[219,2],[222,1],[236,1],[262,1],[264,2],[310,2],[313,1],[333,1],[354,1]]},"356":{"position":[[311,2],[363,2],[383,1],[403,1]]},"360":{"position":[[445,1],[459,1],[628,2],[653,1],[667,2],[681,1],[703,2],[749,2],[752,1]]},"362":{"position":[[333,1]]},"364":{"position":[[268,1],[339,2],[386,2],[402,1],[428,1]]},"366":{"position":[[205,1],[230,2],[270,2],[273,1],[282,1],[308,1],[675,1],[696,1],[698,2],[708,2],[762,1],[783,1]]},"370":{"position":[[265,1],[286,1],[347,1],[369,1]]},"372":{"position":[[104,2],[125,2],[134,1],[179,1],[190,2],[202,2],[543,1],[571,2],[605,2],[608,1],[632,1],[634,2],[678,2],[681,1],[714,1],[716,2],[776,2],[779,1],[907,1],[917,1],[952,1],[954,2],[957,2],[960,1],[968,2],[1010,2],[1060,2],[1071,2]]},"374":{"position":[[473,1],[497,1],[506,1],[529,1],[547,1],[557,1],[597,2],[630,2]]},"376":{"position":[[178,1],[202,1],[213,2],[233,2],[253,2],[256,2],[266,2],[284,2],[319,2],[354,2]]},"384":{"position":[[147,2],[164,2],[209,2],[220,1],[236,2]]},"386":{"position":[[149,2],[167,2],[176,1],[222,1],[240,2],[270,1],[286,1],[324,1],[332,2],[351,2],[368,2],[387,2],[396,2],[409,2],[412,1]]},"388":{"position":[[150,2],[179,2],[193,1],[243,1],[269,2],[281,2],[295,1],[368,1]]},"392":{"position":[[178,1],[269,1]]},"396":{"position":[[27,2],[30,2],[40,2],[46,2],[61,2],[81,2],[100,2],[103,2],[151,2],[176,2],[193,2],[232,2],[263,2]]},"398":{"position":[[221,2],[254,2],[257,2],[267,2],[311,2],[342,2]]},"402":{"position":[[21,2],[41,2],[61,2],[64,2],[88,2],[107,1],[114,1],[127,1],[132,1],[147,1],[149,1],[151,2],[175,2],[194,1],[199,1],[212,1],[218,1],[233,1],[240,1],[254,1],[256,1],[277,1],[279,2],[309,2],[351,1],[356,1],[358,2],[375,2],[499,1]]},"404":{"position":[[123,2],[183,2],[238,1],[240,2],[260,2],[286,1],[309,2],[358,2],[421,2],[450,2]]},"406":{"position":[[129,1],[141,1],[166,2]]},"408":{"position":[[116,2],[122,1],[147,1],[149,2],[159,2],[190,2],[196,1],[232,1]]},"410":{"position":[[165,2],[171,1],[196,1],[198,2],[208,2],[228,2],[234,1],[259,2],[275,2],[278,1]]},"412":{"position":[[487,2],[510,2],[528,1],[560,1],[580,1],[624,1],[674,1],[711,1],[719,1],[721,2],[781,1],[820,1],[828,1],[865,1],[867,2],[881,2],[892,1],[911,1],[919,1],[938,1],[940,2],[954,2],[965,1],[984,1],[992,1],[1011,1]]},"414":{"position":[[288,1],[308,1],[318,1],[374,1],[382,1],[436,1],[438,2],[452,2],[463,1],[482,1],[490,1],[509,1]]},"416":{"position":[[348,2],[361,2],[378,1],[380,1],[405,1],[433,1],[439,2],[464,1],[498,2],[501,2],[552,1],[570,1],[580,1],[628,1],[630,2],[644,2],[655,1],[673,1]]},"420":{"position":[[87,1],[89,2],[110,2],[113,1],[152,1],[165,1],[167,2],[188,2],[191,1],[193,1],[195,2],[212,2],[232,1],[234,2],[255,2],[258,1]]},"422":{"position":[[130,2],[183,2],[230,2],[257,2],[272,1],[274,2],[295,2],[298,1],[321,2],[364,2],[421,2],[447,2]]},"424":{"position":[[68,2],[123,2]]},"426":{"position":[[111,1],[120,1],[145,2]]},"430":{"position":[[211,2],[258,2]]},"433":{"position":[[320,1],[334,1],[336,2],[346,2],[358,3],[407,2],[422,1]]},"437":{"position":[[307,1],[343,1],[356,1],[382,1],[384,2],[398,2],[412,1],[428,2],[448,2],[471,2],[491,2],[494,1],[677,2],[694,2],[703,1],[720,1],[733,1],[749,1],[751,2],[795,2],[867,1],[889,2],[909,2],[912,1],[928,1],[952,2],[967,2],[970,1],[972,2],[986,2],[1002,1],[1019,2],[1044,2],[1047,1],[1073,1],[1075,2],[1128,2],[1145,1],[1161,1],[1177,2],[1197,2],[1200,1]]},"439":{"position":[[206,1],[265,1],[502,1],[519,1],[535,1],[564,1],[579,1],[621,1],[623,2],[637,2],[654,1],[675,2],[695,2],[698,1],[713,1],[735,2],[763,2],[766,1]]},"441":{"position":[[19,1],[483,1],[513,1],[525,1],[576,1],[589,1],[633,1],[635,2],[645,2],[659,1],[679,1],[962,1],[1004,1],[1016,1],[1067,1],[1085,1],[1129,1],[1142,1],[1197,1],[1199,2],[1209,2],[1223,1],[1243,1],[1262,1],[1289,1]]},"443":{"position":[[447,2],[467,2],[485,1],[525,1],[527,2],[563,2],[573,1],[610,2],[613,2],[616,2],[639,2],[696,1],[760,1],[762,2],[776,2],[792,1],[808,2],[825,2],[848,2],[865,2],[892,2],[912,2],[915,1]]},"445":{"position":[[422,2],[442,2],[460,1],[502,1],[504,2],[540,2],[550,1],[598,1],[615,2],[633,1],[652,2],[655,2],[658,2],[661,2],[684,2],[743,1],[809,1],[811,2],[825,2],[841,1],[857,2],[874,2],[897,2],[914,2],[941,2],[961,2],[964,1],[985,1],[987,2],[1009,1],[1011,2],[1027,1],[1054,1],[1056,2],[1096,2],[1114,1]]},"451":{"position":[[84,4],[101,1],[103,2],[138,2],[170,2],[189,2],[192,1],[278,1],[280,2],[298,2],[331,2],[353,2],[356,1]]},"456":{"position":[[521,1],[532,1],[557,2],[629,3]]},"458":{"position":[[476,2]]},"460":{"position":[[89,1],[120,2],[123,1],[137,2],[191,2],[235,2],[246,1]]},"462":{"position":[[595,1],[641,1],[660,1],[676,1],[696,2],[699,2],[709,2],[734,2]]},"464":{"position":[[277,1],[305,1],[339,1],[341,1],[392,1],[436,1],[546,2],[549,1],[595,1],[633,1],[683,2],[686,3]]},"466":{"position":[[179,1],[207,1],[218,1],[220,1],[264,1],[357,2],[366,1],[377,1],[379,1],[423,1],[527,1],[543,1],[545,1],[560,3],[564,2],[571,1],[573,2],[621,1],[689,1],[719,2],[722,2],[725,2],[793,1],[805,1],[845,1],[847,1],[852,1],[863,1],[865,1],[879,1],[905,1],[907,2]]},"470":{"position":[[213,1],[243,1]]},"472":{"position":[[175,1],[177,2],[211,2],[244,1],[246,2],[276,2],[290,2],[293,2],[326,2],[348,2]]},"474":{"position":[[170,1],[172,2],[280,2],[366,1],[368,2],[413,2],[432,2],[435,2],[489,2],[506,2],[509,2],[554,2],[565,2],[568,2],[604,2],[616,2]]},"476":{"position":[[60,1],[62,2],[128,2],[161,1],[163,2],[214,2],[238,2],[241,2],[291,2],[314,2],[773,1],[775,2],[845,2],[918,1],[923,1],[925,2],[963,2],[1005,1]]},"478":{"position":[[60,1],[62,2],[127,2],[159,1],[161,2],[206,2],[223,2],[513,1],[515,2],[558,2],[615,1],[617,2],[636,2],[647,2],[658,2],[669,2],[672,2],[702,2],[713,2],[724,2],[727,2],[763,2],[774,2],[785,2]]},"480":{"position":[[155,1],[157,2],[218,2],[239,1],[299,1],[301,2],[332,2],[354,2],[410,2],[431,1],[441,2],[452,2],[463,2],[466,2],[476,2],[501,2],[504,2],[527,2],[554,2],[557,2],[606,2],[633,2],[636,2],[661,2]]},"482":{"position":[[113,1],[127,1],[152,2],[186,1],[200,2],[225,2],[252,2],[268,3],[272,2],[329,1],[347,2],[374,2],[409,2],[419,3]]},"484":{"position":[[69,2],[89,2],[108,2],[125,2],[128,2],[138,2],[171,2],[215,2],[258,2],[299,2]]},"486":{"position":[[365,1],[421,1],[434,2],[448,2],[451,2],[461,2],[481,2],[511,2],[638,1],[701,1],[718,2],[721,2],[731,2],[762,2]]},"490":{"position":[[61,2],[119,2]]},"492":{"position":[[144,2],[173,2],[193,3],[207,3]]},"494":{"position":[[158,1],[160,2],[200,2],[222,1],[224,2],[282,2],[304,3],[318,3],[419,1],[429,1],[464,1],[466,2],[469,2],[472,1],[481,1],[489,2],[530,2],[575,2],[578,2]]},"496":{"position":[[96,2],[139,2],[148,2],[318,2],[413,2],[433,1],[447,1]]},"500":{"position":[[119,2],[139,1],[159,1],[224,1],[245,1],[259,2],[280,2],[283,2],[293,2],[320,2],[335,1],[349,2]]},"504":{"position":[[0,2],[16,2],[35,1],[43,1],[60,1],[62,1],[64,2],[74,2],[96,1],[113,1]]},"506":{"position":[[528,2],[549,2],[626,1],[632,1],[658,1],[667,1],[692,1],[703,1],[741,1],[743,1],[992,1],[1003,1],[1020,2],[1073,2],[1076,1],[1086,1],[1110,1],[1112,1],[1243,2],[1261,2],[1323,1],[1377,1],[1394,1],[1468,1],[1487,1],[1601,1],[1852,1],[1861,1],[1919,1],[1930,1],[2011,1],[2013,1]]},"508":{"position":[[213,1],[215,2],[243,2],[265,1],[267,2],[277,2],[297,1],[318,1]]},"510":{"position":[[151,2],[221,2],[239,1],[261,1],[263,2],[273,2],[304,1],[326,1]]},"514":{"position":[[16,1],[26,1],[66,1],[113,1]]},"516":{"position":[[170,1],[184,1],[234,2],[237,1],[246,1],[314,2],[317,1]]},"518":{"position":[[130,2],[168,2],[178,1],[184,2],[221,2],[244,2],[281,2],[331,2],[390,2],[418,2],[467,1]]},"520":{"position":[[133,1],[180,1],[203,2],[226,2],[258,2],[290,2],[331,2],[355,2],[386,2],[389,1],[406,2],[435,2],[453,2],[476,2],[494,2],[525,2]]},"522":{"position":[[69,1],[95,1],[104,1],[113,1],[147,2],[172,2]]},"524":{"position":[[254,1],[268,1],[291,2],[316,1],[367,2],[395,2],[420,1],[472,2],[495,2],[558,2],[603,1],[617,1],[640,2],[656,1],[691,1],[704,3],[708,2],[734,2],[750,1],[782,1],[802,3],[806,2],[829,2],[845,1],[871,1],[887,3],[891,2],[942,1],[970,1],[984,1],[1007,2],[1023,1],[1036,1],[1060,1],[1073,2],[1082,2]]},"526":{"position":[[226,1],[238,1],[261,2],[304,3],[308,2],[329,2],[376,3],[380,2],[383,2],[386,2],[433,3],[437,2],[462,2],[520,3],[524,2]]},"532":{"position":[[79,1],[81,2],[110,2],[123,2],[151,2],[163,1]]},"534":{"position":[[99,1],[101,2],[134,2],[154,2],[186,2],[253,1],[255,2],[291,2],[310,2]]},"536":{"position":[[58,1],[70,2],[110,2],[126,2],[160,2],[187,1]]},"538":{"position":[[175,1],[177,2],[201,2],[240,1],[245,1],[247,2],[272,2],[300,2],[309,2],[312,1]]},"540":{"position":[[244,1],[246,2],[281,2],[321,2],[324,1],[329,1],[331,2],[358,2],[389,2],[397,2],[400,1]]},"542":{"position":[[159,1],[161,2],[231,1]]},"544":{"position":[[107,1],[116,1],[142,2],[189,2],[223,2]]},"546":{"position":[[277,1],[279,2],[319,2],[361,1],[369,1],[396,2],[415,2],[460,2],[469,2],[472,1]]},"551":{"position":[[99,2],[127,2],[140,2],[143,2],[168,2],[180,2]]},"553":{"position":[[116,2],[152,2],[166,2]]},"555":{"position":[[231,2],[260,2],[267,2],[270,2],[279,2],[292,2],[304,2],[406,1],[412,2],[415,1]]},"557":{"position":[[275,2],[289,2],[370,1],[372,2],[418,2],[428,2],[431,2],[475,2],[483,2],[486,1]]},"561":{"position":[[230,2],[243,2],[246,2],[256,2],[286,2],[306,2]]},"580":{"position":[[6,1],[54,1],[200,1],[248,1]]},"582":{"position":[[207,3]]},"594":{"position":[[108,1],[128,1],[130,2],[186,2],[229,1],[237,1],[239,2],[297,2],[339,1]]}}}],["0",{"_index":1410,"t":{"402":{"position":[[196,2]]},"486":{"position":[[631,3]]}}}],["0,0,1,1",{"_index":806,"t":{"140":{"position":[[635,7]]}}}],["0,0,2,0",{"_index":801,"t":{"140":{"position":[[507,7]]}}}],["0.75}px",{"_index":1427,"t":{"412":{"position":[[676,9]]}}}],["1",{"_index":1175,"t":{"269":{"position":[[207,1],[232,1],[278,1]]},"482":{"position":[[250,1]]},"538":{"position":[[296,3]]},"582":{"position":[[127,2],[363,1]]}}}],["100",{"_index":1411,"t":{"402":{"position":[[235,4]]}}}],["100px",{"_index":1287,"t":{"328":{"position":[[150,6],[246,6]]},"330":{"position":[[203,6],[277,6],[804,6],[878,6]]}}}],["10px",{"_index":1751,"t":{"542":{"position":[[205,4]]}}}],["12",{"_index":1438,"t":{"414":{"position":[[304,3]]},"582":{"position":[[100,3]]}}}],["12px",{"_index":1441,"t":{"414":{"position":[[503,5]]}}}],["150px",{"_index":1284,"t":{"324":{"position":[[259,6]]}}}],["1600",{"_index":1805,"t":{"582":{"position":[[76,5]]}}}],["16px",{"_index":1432,"t":{"412":{"position":[[932,5],[1005,5]]}}}],["17px",{"_index":1451,"t":{"416":{"position":[[564,5]]}}}],["1px",{"_index":717,"t":{"120":{"position":[[386,3]]},"354":{"position":[[246,3]]},"364":{"position":[[412,3]]},"366":{"position":[[292,3]]},"506":{"position":[[1571,3]]},"546":{"position":[[399,3]]}}}],["1rem",{"_index":1184,"t":{"269":{"position":[[392,5]]}}}],["2",{"_index":1174,"t":{"269":{"position":[[187,1],[196,1]]},"416":{"position":[[435,3]]},"472":{"position":[[187,1]]},"484":{"position":[[294,1]]},"582":{"position":[[86,1],[365,1]]}}}],["24px",{"_index":1440,"t":{"414":{"position":[[476,5]]}}}],["250px",{"_index":1281,"t":{"322":{"position":[[398,6]]}}}],["2nd",{"_index":1745,"t":{"538":{"position":[[257,3]]}}}],["2px",{"_index":1500,"t":{"441":{"position":[[999,4]]}}}],["2rem",{"_index":1182,"t":{"269":{"position":[[375,5]]}}}],["2}px",{"_index":1425,"t":{"412":{"position":[[626,6]]}}}],["3",{"_index":1587,"t":{"474":{"position":[[209,1]]},"582":{"position":[[57,1],[153,1],[367,1]]}}}],["300",{"_index":1531,"t":{"451":{"position":[[173,7],[334,7]]}}}],["32px",{"_index":1431,"t":{"412":{"position":[[905,5],[978,5]]}}}],["3rd",{"_index":486,"t":{"66":{"position":[[29,3]]},"197":{"position":[[80,3]]}}}],["3s",{"_index":1412,"t":{"402":{"position":[[329,2],[421,3]]}}}],["4",{"_index":1658,"t":{"484":{"position":[[251,1]]}}}],["4.2.2",{"_index":484,"t":{"64":{"position":[[1302,5]]}}}],["5",{"_index":76,"t":{"9":{"position":[[92,1]]},"524":{"position":[[916,1]]},"526":{"position":[[453,1]]}}}],["50",{"_index":63,"t":{"7":{"position":[[323,2]]},"168":{"position":[[483,4]]},"174":{"position":[[240,4],[455,4]]},"207":{"position":[[1113,4]]},"402":{"position":[[214,3]]}}}],["55",{"_index":1659,"t":{"484":{"position":[[296,2]]}}}],["5px",{"_index":1502,"t":{"441":{"position":[[1191,5],[1272,3]]}}}],["6px",{"_index":1185,"t":{"269":{"position":[[407,4]]}}}],["7",{"_index":1656,"t":{"484":{"position":[[205,1]]}}}],["9px",{"_index":1453,"t":{"416":{"position":[[668,4]]}}}],["__dirnam",{"_index":1541,"t":{"456":{"position":[[619,9]]}}}],["_modul",{"_index":1573,"t":{"466":{"position":[[535,7]]}}}],["_module.export",{"_index":1577,"t":{"466":{"position":[[760,16],[888,16]]}}}],["a.b",{"_index":1270,"t":{"316":{"position":[[344,6]]}}}],["a.st",{"_index":1467,"t":{"430":{"position":[[477,4]]}}}],["a:global(.g):hover.b",{"_index":1400,"t":{"396":{"position":[[154,21]]}}}],["a:global(.g1",{"_index":1401,"t":{"396":{"position":[[235,14]]}}}],["a:ranking(5",{"_index":1618,"t":{"478":{"position":[[209,13]]}}}],["a:x(1",{"_index":1630,"t":{"478":{"position":[[766,7]]}}}],["a:x(2",{"_index":1624,"t":{"478":{"position":[[639,7]]}}}],["a:x(3",{"_index":1627,"t":{"478":{"position":[[705,7]]}}}],["a:x(4",{"_index":1625,"t":{"478":{"position":[[650,7]]}}}],["a:x(5",{"_index":1628,"t":{"478":{"position":[[716,7]]}}}],["a:x(6",{"_index":1626,"t":{"478":{"position":[[661,7]]}}}],["a:x(7",{"_index":1631,"t":{"478":{"position":[[777,7]]}}}],["a[c",{"_index":1273,"t":{"316":{"position":[[541,7]]}}}],["abil",{"_index":868,"t":{"162":{"position":[[20,7]]},"185":{"position":[[541,7]]},"342":{"position":[[511,7]]}}}],["abov",{"_index":857,"t":{"154":{"position":[[484,5]]},"160":{"position":[[63,5]]},"164":{"position":[[496,6]]},"166":{"position":[[328,6]]},"201":{"position":[[228,6]]},"241":{"position":[[187,6]]},"310":{"position":[[629,6]]},"380":{"position":[[136,5]]},"402":{"position":[[369,5]]},"437":{"position":[[783,5]]},"441":{"position":[[119,6]]},"506":{"position":[[1653,5]]},"588":{"position":[[72,5]]}}}],["abstract",{"_index":237,"t":{"27":{"position":[[378,8]]},"170":{"position":[[11,8]]}}}],["accept",{"_index":558,"t":{"84":{"position":[[150,7]]},"239":{"position":[[386,6]]},"253":{"position":[[1139,6],[1200,10]]},"262":{"position":[[496,7]]},"439":{"position":[[15,6]]},"462":{"position":[[80,8]]},"464":{"position":[[154,7]]},"476":{"position":[[24,6],[101,7]]},"478":{"position":[[24,6],[100,7]]},"526":{"position":[[97,7]]}}}],["access",{"_index":85,"t":{"9":{"position":[[224,11]]},"33":{"position":[[218,7]]},"154":{"position":[[177,6]]},"170":{"position":[[77,6]]},"176":{"position":[[49,6]]},"178":{"position":[[1436,8]]},"310":{"position":[[15,8]]},"326":{"position":[[30,8]]},"352":{"position":[[460,6]]},"356":{"position":[[116,6]]},"362":{"position":[[64,11]]},"366":{"position":[[125,6]]},"376":{"position":[[21,6]]},"406":{"position":[[30,8]]},"426":{"position":[[15,8]]},"490":{"position":[[277,6]]},"496":{"position":[[52,10]]},"538":{"position":[[90,8],[250,6]]},"540":{"position":[[160,8],[334,6]]},"544":{"position":[[30,8]]}}}],["accessor",{"_index":860,"t":{"156":{"position":[[195,10]]}}}],["accord",{"_index":1263,"t":{"312":{"position":[[53,9]]},"328":{"position":[[53,9]]},"348":{"position":[[62,9]]},"408":{"position":[[53,9]]},"428":{"position":[[49,9]]},"447":{"position":[[422,9]]},"464":{"position":[[72,9]]},"548":{"position":[[51,9]]}}}],["achiev",{"_index":781,"t":{"134":{"position":[[139,7]]},"271":{"position":[[123,7]]}}}],["acquaint",{"_index":280,"t":{"31":{"position":[[202,10]]}}}],["act",{"_index":388,"t":{"56":{"position":[[28,4]]},"88":{"position":[[45,4]]}}}],["action",{"_index":369,"t":{"54":{"position":[[275,7]]}}}],["activ",{"_index":684,"t":{"100":{"position":[[623,8]]},"162":{"position":[[127,9]]},"229":{"position":[[172,8],[562,8]]},"237":{"position":[[198,10]]},"239":{"position":[[115,9],[508,8]]},"482":{"position":[[3,8],[79,6],[155,6],[278,6]]},"524":{"position":[[49,10],[131,10],[585,10],[931,10]]},"526":{"position":[[55,6],[335,6]]}}}],["actual",{"_index":1781,"t":{"574":{"position":[[57,6]]},"584":{"position":[[246,8]]}}}],["ad",{"_index":93,"t":{"11":{"position":[[3,5],[295,6]]},"96":{"position":[[1165,6]]},"116":{"position":[[0,6]]},"122":{"position":[[456,5]]},"140":{"position":[[704,5]]},"207":{"position":[[213,5],[810,6]]},"260":{"position":[[55,6]]},"275":{"position":[[431,5]]},"412":{"position":[[235,6]]},"414":{"position":[[207,5]]},"433":{"position":[[205,6],[506,5]]},"437":{"position":[[1086,5]]},"447":{"position":[[88,5],[215,5]]},"524":{"position":[[198,5]]}}}],["add",{"_index":16,"t":{"3":{"position":[[170,4]]},"5":{"position":[[134,4]]},"22":{"position":[[461,4]]},"50":{"position":[[154,3]]},"54":{"position":[[136,3],[192,3],[498,3]]},"64":{"position":[[264,3],[828,3]]},"66":{"position":[[163,3],[1073,3]]},"70":{"position":[[1123,3]]},"76":{"position":[[137,3],[301,4],[420,3]]},"82":{"position":[[51,3]]},"86":{"position":[[1269,3]]},"102":{"position":[[276,3]]},"110":{"position":[[156,3]]},"112":{"position":[[19,3]]},"136":{"position":[[9,3]]},"142":{"position":[[41,3]]},"183":{"position":[[99,3]]},"185":{"position":[[220,4]]},"207":{"position":[[36,3]]},"217":{"position":[[581,3]]},"239":{"position":[[309,3],[543,3]]},"294":{"position":[[84,3]]},"447":{"position":[[11,3]]},"516":{"position":[[48,3]]},"532":{"position":[[22,3]]}}}],["addit",{"_index":337,"t":{"44":{"position":[[24,10]]},"66":{"position":[[61,10]]},"164":{"position":[[609,8],[1017,10]]},"183":{"position":[[59,10]]},"201":{"position":[[702,10]]},"213":{"position":[[144,10],[175,10]]},"217":{"position":[[585,10]]},"229":{"position":[[484,10]]},"239":{"position":[[313,10]]},"253":{"position":[[508,11],[617,10],[999,10],[1058,11],[1290,11],[1358,11]]},"257":{"position":[[189,10]]},"262":{"position":[[266,9]]},"441":{"position":[[436,10]]},"468":{"position":[[3,8]]},"488":{"position":[[3,8]]},"524":{"position":[[209,10],[318,10],[352,14],[383,11],[944,10]]}}}],["addition",{"_index":1665,"t":{"486":{"position":[[514,12]]},"496":{"position":[[151,12]]}}}],["addon",{"_index":374,"t":{"54":{"position":[[429,7]]}}}],["address",{"_index":963,"t":{"181":{"position":[[221,7]]}}}],["adjac",{"_index":660,"t":{"96":{"position":[[330,8]]},"106":{"position":[[105,8]]}}}],["advanc",{"_index":1535,"t":{"456":{"position":[[92,8]]}}}],["advantag",{"_index":650,"t":{"94":{"position":[[84,9]]}}}],["affect",{"_index":766,"t":{"130":{"position":[[241,6]]},"170":{"position":[[608,6]]},"360":{"position":[[301,9]]},"366":{"position":[[415,6]]},"441":{"position":[[326,8]]}}}],["against",{"_index":907,"t":{"164":{"position":[[1562,7]]},"476":{"position":[[598,7]]}}}],["agent",{"_index":787,"t":{"136":{"position":[[28,5]]}}}],["agnost",{"_index":247,"t":{"27":{"position":[[597,8]]}}}],["agreement",{"_index":843,"t":{"152":{"position":[[385,10]]}}}],["aka",{"_index":1771,"t":{"572":{"position":[[10,3],[71,3]]}}}],["alert(",{"_index":1793,"t":{"580":{"position":[[42,9]]}}}],["algorithm",{"_index":1827,"t":{"592":{"position":[[198,10]]}}}],["alia",{"_index":559,"t":{"86":{"position":[[7,5]]},"249":{"position":[[177,5],[609,5]]},"284":{"position":[[267,5]]},"352":{"position":[[38,5]]},"354":{"position":[[28,5]]},"356":{"position":[[434,5]]},"384":{"position":[[296,6]]},"458":{"position":[[443,7]]}}}],["alias",{"_index":1338,"t":{"366":{"position":[[330,8]]}}}],["align",{"_index":1800,"t":{"582":{"position":[[22,5],[68,7]]}}}],["allow",{"_index":326,"t":{"40":{"position":[[305,6]]},"60":{"position":[[894,5]]},"90":{"position":[[69,5]]},"96":{"position":[[206,6]]},"146":{"position":[[262,8]]},"183":{"position":[[87,5]]},"239":{"position":[[419,5]]},"300":{"position":[[39,6]]},"342":{"position":[[560,8]]},"443":{"position":[[18,5]]},"468":{"position":[[83,5]]},"470":{"position":[[245,7],[280,7]]},"488":{"position":[[84,5]]},"506":{"position":[[143,5]]}}}],["along",{"_index":1243,"t":{"300":{"position":[[636,5]]}}}],["alongsid",{"_index":999,"t":{"197":{"position":[[70,9]]}}}],["alreadi",{"_index":543,"t":{"78":{"position":[[138,7]]},"100":{"position":[[22,7]]}}}],["altern",{"_index":207,"t":{"22":{"position":[[11,11]]},"262":{"position":[[1039,12]]},"296":{"position":[[398,11]]}}}],["although",{"_index":136,"t":{"13":{"position":[[469,8]]}}}],["alway",{"_index":137,"t":{"13":{"position":[[483,6],[969,6]]}}}],["anchor",{"_index":815,"t":{"142":{"position":[[312,6]]}}}],["angular",{"_index":259,"t":{"27":{"position":[[877,8]]},"292":{"position":[[112,8]]}}}],["anim",{"_index":1381,"t":{"386":{"position":[[235,4]]},"400":{"position":[[48,9],[84,7],[265,9]]},"402":{"position":[[67,9],[289,9],[312,10],[378,9],[401,9],[425,9],[462,9]]},"404":{"position":[[250,9],[263,9]]},"408":{"position":[[124,9],[198,9]]},"410":{"position":[[173,9],[236,9]]}}}],["anim2",{"_index":1388,"t":{"388":{"position":[[314,7]]}}}],["anoth",{"_index":1014,"t":{"203":{"position":[[165,7]]},"308":{"position":[[38,7]]},"324":{"position":[[43,7],[161,7]]},"344":{"position":[[49,7]]},"356":{"position":[[89,7]]},"366":{"position":[[538,7]]},"368":{"position":[[104,7]]},"370":{"position":[[142,7]]},"388":{"position":[[47,7]]},"404":{"position":[[43,7],[164,7]]},"422":{"position":[[50,7],[164,7]]},"480":{"position":[[33,7]]},"486":{"position":[[264,7]]},"524":{"position":[[145,7]]},"542":{"position":[[48,7]]},"574":{"position":[[24,7],[131,7]]}}}],["anymor",{"_index":1126,"t":{"253":{"position":[[779,7]]}}}],["anyth",{"_index":545,"t":{"78":{"position":[[175,8]]}}}],["anywher",{"_index":1248,"t":{"304":{"position":[[47,8]]}}}],["api",{"_index":11,"t":{"3":{"position":[[116,4]]},"5":{"position":[[80,4]]},"9":{"position":[[215,3]]},"11":{"position":[[330,3]]},"24":{"position":[[115,3]]},"27":{"position":[[136,3]]},"31":{"position":[[126,3]]},"46":{"position":[[125,3]]},"88":{"position":[[82,3]]},"94":{"position":[[171,4]]},"96":{"position":[[102,4]]},"124":{"position":[[220,3]]},"126":{"position":[[63,4]]},"128":{"position":[[195,4]]},"146":{"position":[[204,4]]},"164":{"position":[[1153,3]]},"170":{"position":[[102,4]]},"185":{"position":[[628,3]]},"199":{"position":[[59,3],[118,3]]},"213":{"position":[[252,3],[647,3]]},"219":{"position":[[212,3]]},"225":{"position":[[258,4]]},"239":{"position":[[818,4]]},"257":{"position":[[284,3]]},"262":{"position":[[74,5],[224,4],[281,4],[337,3],[348,3],[375,4],[578,4],[730,4],[962,6],[991,3]]},"282":{"position":[[41,5],[74,5],[124,5],[179,5],[209,5],[258,5]]},"284":{"position":[[77,5],[141,5],[210,5],[290,5],[363,5],[429,5],[503,5]]},"286":{"position":[[67,5],[130,5]]},"288":{"position":[[79,5],[135,5],[199,5],[259,5],[333,5]]},"290":{"position":[[77,5],[141,5]]},"352":{"position":[[291,3]]},"362":{"position":[[55,3]]},"368":{"position":[[270,3]]},"372":{"position":[[121,3]]},"456":{"position":[[129,3],[200,4],[276,3]]},"512":{"position":[[97,4]]},"518":{"position":[[164,3]]},"546":{"position":[[18,3]]}}}],["app",{"_index":205,"t":{"20":{"position":[[293,3],[333,3]]},"22":{"position":[[260,3],[330,3]]},"70":{"position":[[20,3],[123,3],[258,3]]},"420":{"position":[[161,3]]},"506":{"position":[[563,4],[628,3]]}}}],["app'",{"_index":1641,"t":{"480":{"position":[[957,5]]}}}],["appear",{"_index":1309,"t":{"352":{"position":[[136,7]]}}}],["append",{"_index":1515,"t":{"445":{"position":[[182,8],[1078,8]]},"447":{"position":[[177,8]]}}}],["appli",{"_index":250,"t":{"27":{"position":[[688,7]]},"172":{"position":[[85,5]]},"201":{"position":[[548,7]]},"207":{"position":[[98,7]]},"253":{"position":[[408,7],[989,5],[1497,7]]},"288":{"position":[[222,5],[299,5]]},"435":{"position":[[104,5]]},"439":{"position":[[372,8]]},"447":{"position":[[69,8],[267,7],[287,5],[414,7]]},"468":{"position":[[141,5],[246,7]]},"488":{"position":[[154,5]]},"502":{"position":[[250,7]]},"506":{"position":[[387,5]]}}}],["applic",{"_index":189,"t":{"20":{"position":[[77,11]]},"22":{"position":[[80,11]]},"33":{"position":[[106,11],[145,11],[437,11]]},"35":{"position":[[33,13]]},"38":{"position":[[173,12]]},"44":{"position":[[99,12]]},"118":{"position":[[40,12]]},"136":{"position":[[321,11]]},"197":{"position":[[0,11],[123,11]]},"271":{"position":[[40,12]]},"292":{"position":[[78,12],[271,11]]},"294":{"position":[[385,11]]},"298":{"position":[[27,11]]},"433":{"position":[[22,11]]},"506":{"position":[[69,11]]}}}],["applywebpackconfigstylableexclud",{"_index":371,"t":{"54":{"position":[[320,34]]},"64":{"position":[[388,34],[1188,34]]},"66":{"position":[[470,35]]},"70":{"position":[[683,34]]}}}],["applywebpackconfigstylableexcludes(config",{"_index":378,"t":{"54":{"position":[[537,43]]},"64":{"position":[[781,43]]},"66":{"position":[[895,43]]},"70":{"position":[[1076,43]]}}}],["approach",{"_index":649,"t":{"94":{"position":[[67,8]]},"213":{"position":[[421,10]]},"292":{"position":[[34,8]]}}}],["arg2",{"_index":1215,"t":{"288":{"position":[[155,6]]}}}],["argument",{"_index":492,"t":{"66":{"position":[[302,8]]},"84":{"position":[[162,9]]},"239":{"position":[[97,9],[146,9]]},"255":{"position":[[422,8]]},"412":{"position":[[86,10],[152,8],[386,9]]},"443":{"position":[[77,9],[221,9],[267,8],[376,9],[530,10]]},"445":{"position":[[507,10]]},"464":{"position":[[166,10]]},"478":{"position":[[549,8],[626,9]]},"524":{"position":[[95,8],[220,9]]},"534":{"position":[[86,9]]},"538":{"position":[[135,8]]},"540":{"position":[[204,8]]},"546":{"position":[[291,10]]}}}],["around",{"_index":1290,"t":{"330":{"position":[[344,6]]}}}],["array",{"_index":1509,"t":{"443":{"position":[[541,5]]},"445":{"position":[[518,5]]},"538":{"position":[[7,5]]},"546":{"position":[[69,5]]}}}],["array(r",{"_index":1744,"t":{"538":{"position":[[215,10]]}}}],["arraytagnextprev { /* exclude Stylable files from all other loaders */ applyWebpackConfigStylableExcludes(config); /* add the Stylable plugin to the webpack configuration */ config.plugins.push( new StylableWebpackPlugin({ /* let NextJS handle assets */ filterAssets: () => false, /* output CSS to the correct location */ filename: 'static/css/stylable.[contenthash].css', /* a shared optimizer instance */ optimizer: stylableOptimizer, }) ); return config; }, }; important The applyWebpackConfigStylableExcludes export and filterAssets flag are available in @stylable/webpack-plugin version 4.2.2 and onwards.","s":"NextJS","u":"/docs/getting-started/nextjs-integration","h":"","p":47},{"i":50,"t":"If your project consumes any 3rd-party Stylable stylesheets, additional configuration is required to ensure that they will be handled by @stylable/webpack-plugin: Add an import to bundleServerLibs from @stylable/webpack-plugin Use the isServer flag from the webpack configuration context in the second argument Call bundleServerLibs with the webpack config, packages to bundle, and the isServer flag Example Configuration:​ next.config.js const { StylableWebpackPlugin, applyWebpackConfigStylableExcludes, bundleServerLibs } = require('@stylable/webpack-plugin'); /* * single optimizer for NextJS multiple builds * in order to sync client/server namespaces */ const StylableOptimizer = require('@stylable/optimizer').StylableOptimizer; const stylableOptimizer = new StylableOptimizer(); module.exports = { webpack: (config, { isServer }) => { /* exclude Stylable files from all other loaders */ applyWebpackConfigStylableExcludes(config); /* causes provided packages to be bundled (not external) */ bundleServerLibs(config, new Set(['PACKAGE1', 'PACKAGE2'], isServer)); /* add the Stylable plugin to the webpack configuration */ config.plugins.push( new StylableWebpackPlugin({ /* let NextJS handle assets */ filterAssets: () => false, /* output CSS to the correct location */ filename: 'static/css/stylable.[contenthash].css', /* a shared optimizer instance */ optimizer: stylableOptimizer, }) ); return config; }, };","s":"Using 3rd-party stylesheets","u":"/docs/getting-started/nextjs-integration","h":"#using-3rd-party-stylesheets","p":47},{"i":52,"t":"If your NextJS project is configured to work with TypeScript, see our page on integrating Stylable with TypeScript.","s":"TypeScript integration","u":"/docs/getting-started/nextjs-integration","h":"#typescript-integration","p":47},{"i":54,"t":"Support for Next.js App directory is experimental. There are two settings that are required to integrate Stylable with the App directory mode: set cssInjection:css in order to force CSS to be served as a static CSS file in dev mode. This is required because App directory mode defaults to React server render, and Stylable defaults to injecting CSS via Javascript in development which doesn't reach the browser. set experimentalAttachCssToContainingChunks:true to change the way the generated CSS asset is attached to Webpack chunks in order for Next.js to pick it up as a CSS module and not a JavaScript module. Example Configuration:​ next.config.js const { StylableWebpackPlugin, applyWebpackConfigStylableExcludes } = require('@stylable/webpack-plugin'); /* * single optimizer for NextJS multiple builds * in order to sync client/server namespaces */ const StylableOptimizer = require('@stylable/optimizer').StylableOptimizer; const stylableOptimizer = new StylableOptimizer(); module.exports = { webpack: (config) => { /* exclude Stylable files from all other loaders */ applyWebpackConfigStylableExcludes(config); /* add the Stylable plugin to the webpack configuration */ config.plugins.push( new StylableWebpackPlugin({ /* let NextJS handle assets */ filterAssets: () => false, /* output CSS to the correct location */ filename: 'static/css/stylable.[contenthash].css', /* a shared optimizer instance */ optimizer: stylableOptimizer, /* serve CSS as a bundled asset */ cssInjection: 'css', /* attach CSS to every chunk containing a Stylable stylesheet, instead of to entry chunks */ experimentalAttachCssToContainingChunks: true, }) ); return config; }, };","s":"App directory","u":"/docs/getting-started/nextjs-integration","h":"#app-directory","p":47},{"i":56,"t":"The Stylable Rollup integration provides development, build, and bundle capabilities.","s":"Rollup","u":"/docs/getting-started/rollup-integration","h":"","p":55},{"i":58,"t":"Install the @stylable/rollup-plugin as a dev dependency in your local project. Using npm: npm install @stylable/rollup-plugin --save-dev Using Yarn: yarn add @stylable/rollup-plugin --dev","s":"Install","u":"/docs/getting-started/rollup-integration","h":"#install","p":55},{"i":60,"t":"rollup.config.js const { stylableRollupPlugin } = require('@stylable/rollup-plugin'); module.exports = { plugins: [stylableRollupPlugin()], }; For more information on configuring the @stylable/rollup-plugin, see the readme file.","s":"Configuration","u":"/docs/getting-started/rollup-integration","h":"#configuration","p":55},{"i":62,"t":"To integrate Stylable with Storybook, you need to do two things: Exclude Stylable files (*.st.css) from all other existing CSS loaders. Add StylableWebpackPlugin to the webpack configuration. Add the following snippit to your Storybook webpack configuration to get these two actions done: const { StylableWebpackPlugin, applyWebpackConfigStylableExcludes } = require('@stylable/webpack-plugin'); module.exports = { stories: ..., addons: ..., webpackFinal: (config) => { /* find all css loaders and add exclude .st.css files from them */ applyWebpackConfigStylableExcludes(config); /* inject StylableWebpackPlugin */ config.plugins.push(new StylableWebpackPlugin()); return config; } } caution This snippet should work with default Storybook configuration. It assumes some things about the structure of the file which might not be true in future releases of Storybook.","s":"Storybook","u":"/docs/getting-started/storybook-integration","h":"","p":61},{"i":64,"t":"The stylable.config.js file acts as a central place where you can write your top level configuration for the entire project, so that they are re-used across builds and integrations, and reduce code duplications. The configuration file should be located in the project root directory in order to be picked up automatically.","s":"stylable.config.js","u":"/docs/getting-started/stylable-config","h":"","p":63},{"i":66,"t":"The defaultConfig export field is used to set default configuration for Stylable instances across all integrations and tooling. Currently, the following options are supported: resolveNamespace - control the namespace of the generated CSS resolveModule - control the module resolution stylable.config.js - example const { createDefaultResolver } = require('@stylable/core'); const { createNamespaceStrategyNode } = require('@stylable/node'); const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin'); module.exports = { defaultConfig(fs) { return { // set a custom namespace resolver resolveNamespace: createNamespaceStrategyNode({ prefix: 'mylib', strict: true, }), // set a custom module resolver with TS paths resolution resolveModule: createDefaultResolver(fs, { plugins: [ new TsconfigPathsPlugin({ configFile: require.resolve('./tsconfig.json'), extensions: ['.st.css'], }), ], }), }; }, };","s":"defaultConfig","u":"/docs/getting-started/stylable-config","h":"#defaultconfig","p":63},{"i":68,"t":"The stcConfig export field is used as a single point to define multiple build tasks for the Stylable CLI. To run this configuration, either run the CLI using the stc command, or pass the stcConfig option to the Webpack or rollup integrations. Single build task Multiple build tasks const { stcConfig } = require('@stylable/cli'); // use the `stcConfig` function to get type completion and validation exports.stcConfig = stcConfig({ // build type definitions for all stylesheets into the st-types directory options: { srcDir: './src', outDir: './st-types', dts: true } }); const { stcConfig } = require('@stylable/cli'); exports.stcConfig = stcConfig({ // default options for each build task set to output sources options: { srcDir: './src', outDir: './dist', outputSources: true, }, // define a glob path for each build task projects: ['packages/*'] }); Multiple build tasks interface Projects allow sharing stc configurations and management of Stylable projects in one location. They provides a controllable and predictable build order with caching optimizations. interface MultipleProjectsConfig { options?: PartialBuildOptions; presets?: Presets; projects: Projects; projectsOptions?: { resolveRequests?: ResolveRequests; }; } type Projects = | Array | Record; type ProjectEntryValues = | ProjectEntryValue | Array>; type ProjectEntryValue = | PRESET | PartialBuildOptions | { preset?: PRESET; presets?: Array; options: PartialBuildOptions; }; To learn more about the various CLI flags, see the CLI page.","s":"stcConfig","u":"/docs/getting-started/stylable-config","h":"#stcconfig","p":63},{"i":70,"t":"The webpackPlugin export field is used to configure any Stylable Webpack plugins in the project. The StylableWebpackPlugin will attempt to load the nearest stylable.config.js file and use its webpackPlugin export as for its options. To learn more about the building Stylable using Webpack, see the Webpack integration page.","s":"webpackPlugin","u":"/docs/getting-started/stylable-config","h":"#webpackplugin","p":63},{"i":72,"t":"Stylable Intelligence is an extension implementing the Language Server Protocol that provides IDE support for Stylable. It currently includes: Syntax highlighting Code completion Go to definition Diagnostics","s":"Stylable Intelligence","u":"/docs/getting-started/tooling/stylable-intelligence","h":"","p":71},{"i":74,"t":"You can install Stylable Intelligence from the Visual Studio Code market: In Visual Studio Code, click the Extensions icon to open the market. In the search field, enter Stylable Intelligence. Install the extension and reload the window when prompted.","s":"Installation","u":"/docs/getting-started/tooling/stylable-intelligence","h":"#installation","p":71},{"i":76,"t":"Because stylable-intelligence registers .st.css files as Stylable and not CSS, certain CSS extensions may not work until they explicitly add Stylable support. The stylable-intelligence extension for VSCode is compatible with the following CSS extensions: CssTriggers(^0.4.0) - A VSCode extension that adds inline decoration to CSS properties to indicate their costs. If you are using an extension that you would like to add to this list, let us know and we'd be happy to help.","s":"IDE extensions","u":"/docs/getting-started/tooling/stylable-intelligence","h":"#ide-extensions","p":71},{"i":78,"t":"Because Stylable files are not recognized as CSS, we proxy the CSS Language Server through stylable-intelligence. Most basic features are already supported, but if you notice anything strange, let us know. note Future plans include: More Language Server features. Support for JetBrains IDEs (WebStorm, IntelliJ). Currently supported only in VSCode.","s":"CSS functionality","u":"/docs/getting-started/tooling/stylable-intelligence","h":"#css-functionality","p":71},{"i":80,"t":"@stylable/cli is a low-level utility used for working with Stylable projects directly. It lets you: Build and transform stylesheets into JavaScript modules Generate an entry index file to help consume a published project","s":"CLI","u":"/docs/getting-started/tooling/cli","h":"","p":79},{"i":82,"t":"NPM Yarn npm install @stylable/cli --save-dev yarn add @stylable/cli -D","s":"Installation","u":"/docs/getting-started/tooling/cli","h":"#installation","p":79},{"i":84,"t":"After installing @stylable/cli, the stc command will be available, running stc --help will provide a brief description for the options available. stc accepts CLI arguments or a Stylable configuration file.","s":"Using the CLI","u":"/docs/getting-started/tooling/cli","h":"#using-the-cli","p":79},{"i":86,"t":"Option Alias Description Default Value --version v show CLI version number boolean --rootDir root directory of project cwd --srcDir source directory relative to root ./ --outDir target directory relative to root ./ --indexFile filename of the generated index false --cjs output commonjs modules (.js) false --esm output esm modules (.mjs) false --css output transpiled css files (.css) false --stcss output stylable source files (.st.css) false --dts output definition files for the stylable source files (.st.css.d.ts) false --dtsSourceMap output source-maps for the definitions of stylable source files (.st.css.d.ts.map) true if --dts is true, otherwise false --watch w enable watch mode false --config c The path to a config file specifying how to build and output Stylable stylesheets The directory containing the config file is assumed to be the \"rootDir\" for the project named \"stylable.config.js\" --useNamespaceReference unsr mark output stylable source files with relative path for namespacing purposes (*) false --customGenerator path of a custom index file generator - --ext extension of stylable css files .st.css --cssInJs output transpiled css into the js module false --cssFilename pattern of the generated css file [filename].css --injectCSSRequest icr add a static import for the generated css in the js module output false --namespaceResolver nsr node request to a module that exports a stylable resolveNamespace function @stylable/node --require r require hook to execute before running - --optimize o removes: empty nodes, stylable directives, comments false --minify m minify generated css false --log verbose log false --diagnostics print verbose diagnostics true --diagnosticsMode determine the diagnostics mode. if strict process will exit on any exception, loose will attempt to finish the process regardless of exceptions false --help h Show help boolean","s":"CLI Arguments","u":"/docs/getting-started/tooling/cli","h":"#cli-arguments","p":79},{"i":88,"t":"To automatically generate an index file that acts as an export entry for stylable API from your project, use the --inedexFile flag: stc --srcDir=\"./src\" --outDir=\"./dist\" --indexFile=\"index.st.css\"","s":"Generating an index file","u":"/docs/getting-started/tooling/cli","h":"#generating-an-index-file","p":79},{"i":90,"t":"Exporting a Generator named export class from a JavaScript file will allow it to be used as a customGenerator. Usually this generator will inherit from our base generator class and override the generateReExports and generateIndexSource methods. This example demonstrates the default generator behavior (only exports stylesheet roots): import { Generator as Base, ReExports } from '@stylable/cli'; export class Generator extends Base { public generateReExports(filePath): ReExports { return { root: this.filename2varname(filePath), parts: {}, keyframes: {}, stVars: {}, vars: {}, }; } protected generateIndexSource(indexFileTargetPath: string) { const source = super.generateIndexSource(indexFileTargetPath); return '@st-namespace \"INDEX\";\\n' + source; } }","s":"Control exposed API","u":"/docs/getting-started/tooling/cli","h":"#control-exposed-api","p":79},{"i":92,"t":"Whenever a TypeScript file imports a Stylable stylesheet, you must provide a type for it. This is because TypeScript has no way of knowing what's inside Stylable *.st.css files. Import example import { classes } from './button.st.css'; // requires typings","s":"TypeScript","u":"/docs/getting-started/typescript-integration","h":"","p":91},{"i":94,"t":"Stylable can generate a declaration file for each stylesheet. This approach has the advantage of providing exact typing information for each individual stylesheet runtime API.","s":"Generating types per stylesheet","u":"/docs/getting-started/typescript-integration","h":"#generating-types-per-stylesheet","p":91},{"i":96,"t":"Stylable generates two kinds of type-related files: *.d.ts provides typing for the stylesheet runtime API. *.d.ts.map provides mapping from the generated .d.ts file to the original .st.css stylesheet. This allows jumping to definitions in the original source straight from the TypeScript file. Type definitions that are generated adjacent to the stylesheet are automatically detected and used by TypeScript. This can cause bloat in the project source files, however. To prevent clutter in your project, we recommend that you generate all stylesheet typings to a single directory. /* type files grouped in st-types folder */ ├── src | ├── button.st.css - source stylesheet | └── button.tsx - component file | └── st-types ├── button.st.css.d.ts - type definition └── button.st.css.d.ts.map - type definition source-map You'll then need to configure TypeScript to use that directory. To do this, modify your tsconfig.json to specify two rootDirs - your source files, and the generated typings (learn more about this by reading the tsconfig.json documentation) like this: tsconfig.json { \"compilerOptions\": { \"rootDirs\": [\"./src\", \"./st-types\"], }, } tip We recommend adding the generated *.st.css.d.ts and *.st.css.d.ts.map files to your .gitignore file, and to only include them in your published packages.","s":"Generated files","u":"/docs/getting-started/typescript-integration","h":"#generated-files","p":91},{"i":98,"t":"To generate type definition files to the st-types directory using the stc CLI, provide it with the --srcDir, --outDir and --dts flags: stc --srcDir=\"src\" --outDir=\"st-types\" --dts Source maps are generated by default when generating .d.ts files. If these are not wanted, the --dtsSourceMap flag should be set to false. tip Use stylable.config.js as a central location to share common Stylable configurations across tools and integrations.","s":"Using the CLI","u":"/docs/getting-started/typescript-integration","h":"#using-the-cli","p":91},{"i":100,"t":"For projects that are already using one of our bundler integrations (webpack or rollup), you can configure the Stylable plugin to auto-generate types per stylesheet. This means that as you are working in your normal development flows, types will be updated in the background, and be available in your IDE. This functionality is dependant on a stylable.config.js file that includes configuration for generating .d.ts files. stylable.config.js //@ts-check const { typedConfiguration } = require('@stylable/cli'); exports.stcConfig = typedConfiguration({ options: { srcDir: './src', outDir: './st-types', dts: true, }, }); To activate this functionality in the bundler, configure the Stylable plugin with { stcConfig: true }. // create a webpack plugin instance new StylableWebpackPlugin({ stcConfig: true }); // create a rollup plugin instance stylableRollupPlugin({ stcConfig: true });","s":"Using a bundler","u":"/docs/getting-started/typescript-integration","h":"#using-a-bundler","p":91},{"i":102,"t":"If you choose not to generate .d.ts typings for each stylesheet, you'll have to include in your project a general purpose *.st.css global declaration. This provides a broad signature of a Stylable stylesheet. To do this, create a globals.d.ts file in your ./src directory and add the following declaration: globals.d.ts declare module '*.st.css' { export * from '@stylable/runtime/stylesheet'; const defaultExport: unknown; export default defaultExport; }","s":"Global definition","u":"/docs/getting-started/typescript-integration","h":"#global-definition","p":91},{"i":104,"t":"If your project generates .d.ts typings for each stylesheet but you're consuming a package that published .st.css files without typings, you will have to declare global typings for that specific package. globals.d.ts declare module 'third-party-package/*.st.css' { export * from '@stylable/runtime/stylesheet'; const defaultExport: unknown; export default defaultExport; }","s":"Typing 3rd-party stylesheets","u":"/docs/getting-started/typescript-integration","h":"#typing-3rd-party-stylesheets","p":91},{"i":106,"t":"If you publish any *.st.css files in your package, you should also publish the .d.ts and .d.ts.map files adjacent to them. This practice leads to a better experience for users consuming your project. stc --srcDir=\"src\" --outDir=\"dist\" --stcss --dts","s":"Publishing","u":"/docs/getting-started/typescript-integration","h":"#publishing","p":91},{"i":108,"t":"Stylable components should be easily stylable and themable from the outside. This means that the stylesheet describing the component CSS should be as simple and generic as possible, and should expose a clear and concise API for its internal parts. When building your components, we recommend following the guidelines below that we've collected through our work with Stylable:","s":"Stylable Component - Best Practices","u":"/docs/guides/component-best-practices","h":"","p":107},{"i":110,"t":"Try avoiding size declaration just because it offers an easier API. To override a component specifying size limitations, you would need to override multiple CSS declarations. If you do set a default size or size limitations, use em/rem units to resize to the HTML context.","s":"Avoid size declarations","u":"/docs/guides/component-best-practices","h":"#avoid-size-declarations","p":107},{"i":112,"t":"Give meaningful class names that will make sense as part of a selector. Any CSS class selector can be targeted from the outside as a pseudo-element and should be considered part of the component API. Use camelCase and avoid hyphens (-) and capital letters at the beginning. /* good */ Gallery::navbtn::label { } /* camelCase with clear pseudo-element names */ /* bad */ Gallery::gallerynavbtn { } /* it is better to reuse the generic component id */ Gallery::nav-btn { } /* don't use kebab-case - stylable exports JS */","s":"Give meaningful names","u":"/docs/guides/component-best-practices","h":"#give-meaningful-names","p":107},{"i":114,"t":"Try avoiding global-related selectors like @media or matching DOM outside the component scope like body. These would potentially cause side effects if others use them. Element type selectors should be avoided inside a component because they affect any nested component or element. The exception to this is when specifically targeting the element with child selector (for example .root > p) and not a descendant selector (for example .root p).","s":"Avoid global settings in your stylesheet","u":"/docs/guides/component-best-practices","h":"#avoid-global-settings-in-your-stylesheet","p":107},{"i":116,"t":"While internal structure does demand some CSS to work correctly, you should strive to find the minimal combination of CSS to make the component layout work as it should.","s":"Keep your layout minimal","u":"/docs/guides/component-best-practices","h":"#keep-your-layout-minimal","p":107},{"i":118,"t":"The component stylesheet should describe the bare minimum coloring to make its parts visible. Colors should be used sparingly, and just to achieve visibility. The best practice is to make sure every color used for a text across the project has a sufficiently contrasting background. .options { background: value(color1); color: value(color2); }","s":"Keep coloring to a minimum","u":"/docs/guides/component-best-practices","h":"#keep-coloring-to-a-minimum","p":107},{"i":120,"t":"Browsers add a default user agent stylesheet to provide the HTML with a default \"style\". It is tempting to \"clean up\" a button's default style in the component. But, we want our component to \"blend in\" in every context it's used. A button element in our component should look like other button tags in the context of the application where it is used. As such, when building a component, it is best to set CSS only for behaviors that must be overridden for the component to function.","s":"Keep browser defaults intact","u":"/docs/guides/component-best-practices","h":"#keep-browser-defaults-intact","p":107},{"i":122,"t":"Write low specificity selectors that will be easy to override from a parent component.","s":"Keep specificity low","u":"/docs/guides/component-best-practices","h":"#keep-specificity-low","p":107},{"i":124,"t":"It takes a more complex selector to override a high specificity selector that was defined in a component stylesheet. Override CSS only for behaviors that must be overridden for the component to function, and minimize the use of element type selectors and pseudo-elements of nested components. Styling pseudo-elements in a component creates a selector that takes more specificity to override gallery.st.css /* > directly style navBtn - a type of button selector: .comp__gallery .gallery__navBtn specificity: 0,0,2,0 */ .gallery::navbtn {} page.st.css /* > less specific than component override selector: .page__root button specificity: 0,0,1,1 */ .root button {} note For the button selector, we manually added the .root class to avoid overriding button outside this scope.","s":"Keep your selectors as simple as possible","u":"/docs/guides/component-best-practices","h":"#keep-your-selectors-as-simple-as-possible","p":107},{"i":126,"t":"A good way to validate minimal CSS is to add comments. There should be a few words clarifying why a certain declaration or rule set combination is found in the stylesheet. We recommend you justify any special overrides or interactions with a comment per this example. .link { display: block; /* override default anchor color */ color: currentColor; } This helps with maintenance and development, since we don't test CSS as thoroughly as other code.","s":"Justify your CSS declarations in comments","u":"/docs/guides/component-best-practices","h":"#justify-your-css-declarations-in-comments","p":107},{"i":128,"t":"Import CSS or Stylable variables from the project commons stylesheet. @st-import [color1, --font-small] from \"./project.st.css\"; .item { background: value(color1); font-size: var(--font-small); }","s":"Use consistent variables from a central location","u":"/docs/guides/component-best-practices","h":"#use-consistent-variables-from-a-central-location","p":107},{"i":130,"t":"When using an image element source or SVG directly in the DOM, it is not easy, and in some cases not possible, to modify the asset from outside the component using CSS. When an asset is part of the style API, it should be placed in the background of an element, allowing it to be overridden from a parent component.","s":"Keep SVG and images overridable","u":"/docs/guides/component-best-practices","h":"#keep-svg-and-images-overridable","p":107},{"i":132,"t":"The Stylable Webpack integration provides development, build, and bundle capabilities.","s":"Webpack","u":"/docs/getting-started/webpack-integration","h":"","p":131},{"i":134,"t":"Install the @stylable/webpack-plugin as a dev dependency in your local project. Using npm: npm install @stylable/webpack-plugin --save-dev Using Yarn: yarn add @stylable/webpack-plugin --dev","s":"Install","u":"/docs/getting-started/webpack-integration","h":"#install","p":131},{"i":136,"t":"In webpack.config, add the StylableWebpackPlugin to set up Stylable: const { StylableWebpackPlugin } = require('@stylable/webpack-plugin'); // webpack config { plugins: [new StylableWebpackPlugin()], } For more information on configuring the @stylable/webpack-plugin, see the readme file.","s":"Configuration","u":"/docs/getting-started/webpack-integration","h":"#configuration","p":131},{"i":138,"t":"When coming into a project with an existing Webpack CSS integration, you will need to exclude .st.css files from any other integration. For example, to exclude Stylable from css-loader: const { StylableWebpackPlugin } = require('@stylable/webpack-plugin'); { plugins: [ new StylableWebpackPlugin() ], module: { rules: [ { test: /\\.css$/i, exclude: /\\.st\\.css?/, use: [\"css-loader\"], }, ], }, }","s":"With another CSS solution","u":"/docs/getting-started/webpack-integration","h":"#with-another-css-solution","p":131},{"i":140,"t":"Adding the webpackPlugin export field to the stylable.config.js will set as the default configuration for any Stylable Webpack plugins in the project. module.exports.webpackPlugin = function (config) { return { ...config, optimize: { shortNamespaces: true, minify: true, }, }; };","s":"stylable.config.js","u":"/docs/getting-started/webpack-integration","h":"#stylableconfigjs","p":131},{"i":142,"t":"When building a component library or an application, it is useful to define several semantic \"flavors\" of some components, for example a Button component that represents cancel.","s":"Component Variants","u":"/docs/guides/component-variants","h":"","p":141},{"i":144,"t":"In your project's Stylable stylesheet used for the commonly used components in your project (usually named project.st.css) you: Import a component stylesheet. Define a CSS class with a descriptive name like cancelButton. Extend the component on the class you just defined. project.st.css @st-import Button from \"./button.st.css\"; .cancelButton { -st-extend: Button; color: red; border: 1px solid red; }","s":"Defining a component variant","u":"/docs/guides/component-variants","h":"#defining-a-component-variant","p":141},{"i":146,"t":"A component Stylable stylesheet can use and extend component variants: comp.st.css @st-import [cancelButton] from \"./project.st.css\"; /* selector: .comp__root .project__cancelButton.button__root js value: \"project__cancelButton\" */ .root .cancelButton { } /* selector: .comp__cancel.project__cancelButton.button__root js value: \"comp__cancel project__cancelButton\" */ .cancel { -st-extends: cancelButton; } note For the .cancelButton selector, we manually added the .root class to avoid overriding cancelButton outside this scope.","s":"Use component variants in components","u":"/docs/guides/component-variants","h":"#use-component-variants-in-components","p":141},{"i":148,"t":"Classes are the most basic building block of stylable, used to mark elements on the DOM, so those could in turn be targeted and styled via our CSS.","s":"Classes","u":"/docs/guides/handbook/class","h":"","p":147},{"i":150,"t":"A CSS class starts with a . (period) following a CSS identifier. Read more about CSS classes in the MDN documentation. game.st.css .player { background: green; } Here we create a game.st.css stylesheet and define a class named player that will color the background of the element it targets with the color green.","s":"CSS classes","u":"/docs/guides/handbook/class","h":"#css-classes","p":147},{"i":152,"t":"All CSS loaded to the browser for a given page is global, and so other stylesheets can create their own player, and conflict with our definition To resolve this, we can use a BEM methodology to namespace our player class with a unique prefix. game.st.css .game__player { background: green; } This conventions-based solution works, but is difficult to scale, requires communication and agreement, demands manual upkeep, and makes our code more verbose than it needs to be. Stylable automates the namespacing process, using a similar convention to BEM for CSS classes and other symbols (more on that in the Namespacing chapter).","s":"Resolve global conflicts","u":"/docs/guides/handbook/class","h":"#resolve-global-conflicts","p":147},{"i":154,"t":"By turning the namespacing process to an automatic one, we find ourselves needing to map the runtime classes on the DOM to the original classes we defined in our stylesheet. To access this class name mappings, we will import the stylesheet to our JavaScript, and utilize the classes object to get our desired global name. game.jsx import { classes } from './game.st.css'; console.log(classes.player); // \"game__player\"
        ; Prerequisite The example above assumes that Stylable was run as part of a build process, using one of our integrations or hooks to generate the runtime JavaScript module with the required mappings and utility functions.","s":"Runtime mapping","u":"/docs/guides/handbook/class","h":"#runtime-mapping","p":147},{"i":156,"t":"Due to the fact that these class symbols are generated from the stylesheet, but are also consumed in JavaScript, we recommend using camelCase for class names to avoid cases that require property accessors. import { classes } from \"./dialog.st.css\"; classes.okButton; // recommended classes[\"ok-button\"]; // not recommended We would further recommend to avoid using special characters that are not valid JavaScript identifiers.","s":"Naming tip","u":"/docs/guides/handbook/class","h":"#naming-tip","p":147},{"i":158,"t":"In CSS, we have the ability to target native states of various elements using the pseudo-class syntax (for instance, :hover or :active). While this is very handy, as of today, CSS does not provide a way for us to define a custom state on every element. For example, we might want a registered custom state to represent a player element that has signed up for our game. We could choose to implement such a state manually by using a class selector (e.g. using a BEM modifier: .NAMESPACE--registered) or attribute selector (e.g. [data-NAMESPACE-registered]). This is a bit of a pain for several reasons. Unlike native pseudo-classes, a class or an attribute selector is not semantic, and so we lose the original intent. If a convention like BEM is used, then the semantics are conserved, but it increases the verbosity of our code. By defining our states through Stylable, we gain the benefit of validations, completions, and a consistent syntax for states.","s":"Custom State","u":"/docs/guides/handbook/custom-state","h":"","p":157},{"i":160,"t":"To define a registered state for our player class, we will use the -st-states declaration, and pass it a single state name of registered. We can then target this state using our newly-defined :registered pseudo-class, knowing it will be transformed to a valid, safe selector at build time. game.st.css .player { -st-states: registered; /* definition */ } .player:registered {} /* usage */ /* OUTPUT - namespace class and state */ .game__player {} .game__player.game--registered {} In the example above, we defined a registered boolean state that can either be targeted, or not. Let's imagine, though, that in addition to the registered state, we now want to highlight first, second, and third ranking players. We can define such a state by passing the enum parameter type to the ranking state definition, and in it, list our possible options. game.st.css .player { -st-states: registered, ranking(enum(first, second, third)); } .player:ranking(first) {} .player:ranking(second) {} .player:ranking(third) {} There are additional parameter types, as well as validators, default values, and mapping capabilities to Stylable custom states. Read more in the API reference. Conflicts with native At this point, you may have noticed that we can define states that would conflict with native CSS ones. For example, we can define a \"custom\" state called :hover that would conflict with the native :hover pseudo-class. .player { -st-states: hover; } .player:hover {} /* custom state, not the native one */ Due to this potentially confusing behavior, we strongly recommend against naming states that would conflict with native ones.","s":"Define and target","u":"/docs/guides/handbook/custom-state","h":"#define-and-target","p":157},{"i":162,"t":"Now that we have defined our states, we want to be able to toggle them at runtime in our component. game.jsx import { cssStates, classes } from \"./game.st.css\"; // create a registered first ranking player
        ; Looking at the example above, we import the cssStates function and the classes mapping from our game.st.css stylesheet. We then create a div element to represent a registered and first rank player. This example, where we manually concatenate the class and states, is quite verbose and potentially confusing. In the next chapter, we will explore Stylable's runtime feature set and see a cleaner way of working with states at runtime.","s":"Runtime toggle","u":"/docs/guides/handbook/custom-state","h":"#runtime-toggle","p":157},{"i":164,"t":"opening intro paragraph","s":"Classes","u":"/docs/guides/handbook/classes","h":"","p":163},{"i":166,"t":"syntax definition + mdn link SOME EXAMPLE explainer of example above","s":"CSS feature","u":"/docs/guides/handbook/classes","h":"#css-feature","p":163},{"i":168,"t":"In the Import Class chapter, we saw how we can import CSS classes and target them by composing a selector to target our desired parts. In this chapter, we'll see how to extend a stylesheet to target inner parts and states. Current status: player.st.css .root { -st-states: registered, ranking(enum(first, second, third)); } .avatar {} .username {} game.st.css @st-import Player, [avatar, username] from \"./player.st.css\"; Player { background: blue; } Player .avatar { border-radius: 50%; } Player .username { text-transform: uppercase; } Previously, we manually customized the Player component by creating a selector that includes a descendant combinator between the Player and our targeted parts. This selector is based on knowledge we have about the Player component structure, but this structure might change in the future, and break our assumptions.","s":"Extend","u":"/docs/guides/handbook/extend","h":"","p":167},{"i":170,"t":"To help us abstract our selector, we'll extend the Player stylesheet to gain access to the stylesheet API, letting us target inner parts using custom pseudo-elements. We'll first set the -st-extends property with the value of the imported Player stylesheet on the local player class. game.st.css @st-import Player from \"./player.st.css\"; .player { -st-extends: Player; } Namespacing output game.st.css @st-import Player from \"./player.st.css\"; /* customizing class, local namespace */ .game__player { -st-extends: Player; } We previously saw that we can't simply target an imported stylesheet, as that would affect all instances of it. Here, by using the -st-extends property on a local class, we are scoping these customizations to the subtree of our component stylesheet.","s":"Extend a stylesheet","u":"/docs/guides/handbook/extend","h":"#extend-a-stylesheet","p":167},{"i":172,"t":"To customize a Player component instance using our local stylesheet, we will need to apply the extending local class to the instance of the component. import Player from './player.jsx'; import { st, classes } from './game.st.css'; const Game = ({ className }) => (
        );","s":"Apply the extending class","u":"/docs/guides/handbook/extend","h":"#apply-the-extending-class","p":167},{"i":174,"t":"We can now use the custom pseudo-element syntax to safely target the avatar and username parts of the Player component. game.st.css @st-import Player from \"./player.st.css\"; .player { -st-extends: Player; } .player::avatar { border-radius: 50%; } .player::username { text-transform: uppercase; } Namespacing output game.st.css @st-import Player from \"./player.st.css\"; .game__player { -st-extends: Player; } .game__player .player__avatar { border-radius: 50%; } .game__player .player__username { text-transform: uppercase; }","s":"Access inner parts","u":"/docs/guides/handbook/extend","h":"#access-inner-parts","p":167},{"i":176,"t":"Similar to how we used custom pseudo-elements to access inner parts of a component externally, we can now target custom pseudo-classes (states) of our extended parts as well. game.st.css @st-import Player from \"./player.st.css\"; .player { -st-extends: Player; } .player:ranking(first) { background: gold; } /* ... */","s":"Access a state","u":"/docs/guides/handbook/extend","h":"#access-a-state","p":167},{"i":178,"t":"Let's say that we want to turn our current avatar part, into a component to support a more complex design with separate elements for the frame and the image. To do this, we'll create a new avatar.st.css stylesheet, import it to player.st.css, and extend our avatar class with it. avatar.st.css .root {} .frame {} .image {} player.st.css @st-import Avatar from \"./avatar.st.css\"; .root { -st-states: registered, ranking(enum(first, second, third)); } .avatar { -st-extends: Avatar; } .username {} By extending a stylesheet, which in turn has a part that extends a stylesheet, we can target inner parts through multiple levels with code completion and validations. game.st.css @st-import Player from \"./player.st.css\"; .player { -st-extends: Player; } /* all player instances have an avatar with a green frame*/ .player::avatar::frame { background: green; } /* the player in the first ranking, has an avatar with a golden frame */ .player:ranking(first)::avatar::frame { background: gold; } Catch breaking changes Let's imagine a case, where the Avatar component has undergone refactoring which changed the part name frame to box. If we were using native CSS, and were aware of this change, we could try and manually locate all instances of frame and replace them with box. But if we were to miss an instance, CSS would provide no indication of the problem. Because we used Stylable to declare that a class extends a stylesheet, and then accessed its inner parts, we are assured that the interface exists and is valid, and if this interface were to change, an error would be reported at build-time and in the IDE. In this chapter we saw how once we extend a stylesheet, we can target inner parts and states using native-like syntax, while benefiting from language service features and diagnostics. Next we'll start talking about features that have to do with style templating, beginning with variables, both native custom properties, and Stylable's build-time variables. You've reached the end of the handbook, so far This handbook is a work in progress and is not yet complete. You can track the plan and progress for it in this issue","s":"Extend multiple levels","u":"/docs/guides/handbook/extend","h":"#extend-multiple-levels","p":167},{"i":180,"t":"In the Runtime chapter, we saw how a Stylable stylesheet's API can be imported into a JavaScript module, and how that API can be used. In this chapter, we'll see how our game example can be divided into linked stylesheet modules to provide a better development experience. Up to this point, we've talked mostly about a single stylesheet for our project (game.st.css). Now we'll explore how to organize our code across multiple stylesheets. Current status: game.st.css .board { /* ... */ } .player { -st-states: registered, ranking(enum(first, second, third)); background: blue; }","s":"Import Class","u":"/docs/guides/handbook/import-class","h":"","p":179},{"i":182,"t":"Let's refactor the player class from out of our game.st.css to be in its own stylesheet. player.st.css .root { -st-states: registered, ranking(enum(first, second, third)); background: blue; } We created a new player.st.css file above, and in it, created a new .root class. Then we moved the contents of the .player class rules to our new root class. default root class In Stylable, each component stylesheet is represented by a root class that is automatically created, even if not explicitly defined by the user. This root class is expected to be applied to the root element of the component. We can see that when we moved the player class, we also included its styling declarations. This might cause additional work in the future when trying to customize this class from the outside. base style recommendation Stylable recommends that a component's stylesheet include minimal styling - only what is crucial for the functionality of the component or defines its structure. To follow this best practice, we need a way to import the player.st.css stylesheet over to game.st.css, and perform our styling customizations there.","s":"Stylesheet root","u":"/docs/guides/handbook/import-class","h":"#stylesheet-root","p":179},{"i":184,"t":"Keep in mind that, as we saw earlier in the Namespacing chapter, classes in Stylable are automatically namespaced. This means that if we wish to target a class from another stylesheet in a selector, we need to import it to link to it. Below, we import the player.st.css stylesheet and customize it by using the @st-import at-rule, and providing it with a local name for the default export (beginning with a capital letter) and a request to the target stylesheet. Then we move any customizations out of player.st.css into game.st.css. game.st.css - moved player customization @st-import Player from \"./player.st.css\"; .board { /* ... */ } Player { background: blue; /* moved from player.st.css */ } Namespacing output game.st.css @st-import Player from \"./player.st.css\"; /* namespaced locally */ .game__board { /* ... */ } /* namespaced by player.st.css */ .player__root { background: blue; }","s":"Default import","u":"/docs/guides/handbook/import-class","h":"#default-import","p":179},{"i":186,"t":"It's important to note that a default import of a Stylable stylesheet represents a component root, and is in fact pointing to the root class of that stylesheet. Unscoped warning By importing the default export of a stylesheet and then styling it, we are potentially customizing every instance of the component across our project. It is therefore strongly recommended to scope any selector that originates from a different namespace (stylesheet) or includes native elements with a local class. @st-import Player from \"./player.st.css\"; /* report unscoped warnings */ Player {} div {} /* no warnings */ .root Player {} .root div {}","s":"Stylesheet root selector","u":"/docs/guides/handbook/import-class","h":"#stylesheet-root-selector","p":179},{"i":188,"t":"For the next step, we would like to add avatar and username parts to player.st.css. These will be applied to the inner elements of the component, and are assumed to be nested under the root class. player.st.css - added avatar and username .root { -st-states: registered, ranking(enum(first, second, third)); } .avatar {} .username {} We then proceed to bind these new classes to their matching elements in the component. player.jsx - bind avatar and username import { st, classes } from \"./player.st.css\"; const Player = ({ className }) => { return (
        ) } Now that we have these new classes, we can customize them externally through game.st.css. We do this by adding two named imports, inside square brackets, that link to our classes. game.st.css - player customization @st-import Player, [avatar, username] from \"./player.st.css\"; Player { /* paint the Player component background blue */ background: blue; } Player .avatar { /* circle avatar */ border-radius: 50%; } Player .username { /* all caps username */ text-transform: uppercase; } Namespacing output - selectors only game.st.css @st-import Player, [avatar, username] from \"./player.st.css\"; .player__root {} .player__root .player__avatar {} .player__root .player__username {}","s":"Class named import","u":"/docs/guides/handbook/import-class","h":"#class-named-import","p":179},{"i":190,"t":"One of the nice things that we gain by using these Stylable imports is that requested symbols are validated, and we'll be notified if any of the imported parts are not found. game.st.css - missing import /* report an error about an unknown \"missingImport\" symbol */ @st-import [missingImport] from \"./player.st.css\";","s":"Validations","u":"/docs/guides/handbook/import-class","h":"#validations","p":179},{"i":192,"t":"Any classes and other symbols defined in a stylesheet are automatically exported and available for import. Explicit exports We are in the process of developing explicit export support, and will expand this section once available.","s":"Exported by default","u":"/docs/guides/handbook/import-class","h":"#exported-by-default","p":179},{"i":194,"t":"Up to this point, we've only needed to import classes between stylesheets. In later chapters of this guide, we will learn how to import and use additional symbols, as well as additional import use cases from JavaScript to our stylesheet. Check out the API cheatsheet to see various @st-import examples. In this chapter, we've seen how to divide a stylesheet to separate modules, and how to customize those externally. We approached doing this by manually importing each class (default or named), and customizing them together using a selector. In the Next chapter, we'll learn how Stylable can extend stylesheets, exposing their inner parts as an API to make our lives easier.","s":"Further import use-cases","u":"/docs/guides/handbook/import-class","h":"#further-import-use-cases","p":179},{"i":197,"t":"This document provides an overview of Stylable and its features, and serves as a quick guide for getting started. Each chapter focuses on one core feature of Stylable, introducing a problem or need, showing how CSS might address it, and then how Stylable can be used to simplify the solution. This handbook is not a complete reference for Stylable, but merely a starting point for learning to use it.","s":"What am I reading?","u":"/docs/guides/handbook/intro","h":"#what-am-i-reading","p":195},{"i":199,"t":"Stylable is a superset of the CSS language - it introduces additional syntax to CSS to allow us to add features to styling during pre-processing time. It is designed for working with components, variants, themes, and various modern design patterns. There are different aspects to Stylable, and the tooling and capabilities that it provides:","s":"What is Stylable?","u":"/docs/guides/handbook/intro","h":"#what-is-stylable","p":195},{"i":201,"t":"The Stylable pre-processor works at build-time, meaning that we can use all of its features while writing the code. Its input is a Stylable stylesheet, and its output is valid vanilla CSS. The pre-processing it performs adds the following to CSS: Namespace all parts of CSS that can conflict so that multiple stylesheets can be loaded together safely. A module system to CSS so that individual symbols can be re-used across stylesheets. Template capabilities for creating complex design patterns using variables, mixins, and formatters. The ability to perform external customization of any component or theme by using its Style API through extensions, compositions and overrides.","s":"Pre-processor","u":"/docs/guides/handbook/intro","h":"#pre-processor","p":195},{"i":203,"t":"We love working with TypeScript and the developer experience that it provides in terms of validations and rich language features. We aspire for Stylable to be for CSS, what TypeScript is for JavaScript, and so Stylable is in itself a type system, providing interface support for selectors, and reporting syntactic and semantic diagnostics.","s":"Type system","u":"/docs/guides/handbook/intro","h":"#type-system","p":195},{"i":205,"t":"When working in a modern IDE, a language server makes a huge difference in the development experience. For Stylable, we created the Stylable Intelligence VS Code extension to provide a better development experience through completions, definitions, hinting and more.","s":"Language server","u":"/docs/guides/handbook/intro","h":"#language-server","p":195},{"i":207,"t":"Pre-processing and language features are not all that Stylable offers. It also includes a set of tools and integrations that help develop, build, and ship better CSS: Stylable CLI - a command line interface to help build, manage, and validate stylesheets for production and CI/CD workflows. Optimization tools - Stylable has a deep awareness of how your stylesheets are used, and can optimize them to shorten names or remove dead code. Bundling - choose one of our supported bundler integrations to bundle your stylesheets for production.","s":"Tooling","u":"/docs/guides/handbook/intro","h":"#tooling","p":195},{"i":209,"t":"We modeled Stylable after TypeScript, and like TypeScript, the more complex the project and the more people it involves, the greater the value it provides. Having said that, even a single developer working on a simple, standalone project could gain a lot of value from Stylable.","s":"Who is Stylable for?","u":"/docs/guides/handbook/intro","h":"#who-is-stylable-for","p":195},{"i":211,"t":"Library authors can use Stylable to create reusable components, variants, and themes. It helps organize component and theme styling while controlling the elements and styles that are exposed as public interfaces.","s":"Component libraries","u":"/docs/guides/handbook/intro","h":"#component-libraries","p":195},{"i":213,"t":"Application creators can use Stylable to compose their own components alongside 3rd party libraries and to theme the final application to their UX and product requirements. Sounds interesting? Ready to start? Head on over to the first chapter, where we discuss classes, and what they mean in Stylable.","s":"Applications","u":"/docs/guides/handbook/intro","h":"#applications","p":195},{"i":215,"t":"In the Classes chapter, we briefly explained the concept of using namespacing to avoid conflicts between stylesheets. In this chapter, we'll dive deeper to see how other symbols in CSS can be rendered safe to use, and how namespacing can be controlled.","s":"Namespacing","u":"/docs/guides/handbook/namespacing","h":"","p":214},{"i":217,"t":"We've only mentioned classes up to this point, but in CSS, there are many other symbols that share the same naming context, therefore requiring namespacing to avoid potential conflicts. Symbols that Stylable namespaces: Symbol Source Target Class .okButton .NAMESPACE__okButton Custom property --bgColor --NAMESPACE-bgColor Keyframes @keyframes slide @keyframes NAMESPACE__slide Layer @layer theme @layer NAMESPACE__theme Container container: panel container: NAMESPACE__panel note Stylable does not namespace id, custom-element, attribute, or other symbols at the moment, but may add additional symbol namespacing support in the future.","s":"Supported symbols","u":"/docs/guides/handbook/namespacing","h":"#supported-symbols","p":214},{"i":219,"t":"In some cases, we might want to avoid namespacing for a specific symbol. For example: To style a third-party component that is using pre-determined global class names. To expose a persistent, globally-namespaced API for non-Stylable consumers that are using our project.","s":"Global","u":"/docs/guides/handbook/namespacing","h":"#global","p":214},{"i":221,"t":"To avoid namespacing on classes in a selector, wrap those classes with a :global(...) pseudo-class. game.st.css .player:global(.highlight) { background: yellow; } /* OUTPUT */ .game__player.highlight { background: yellow; } caution Classes used within the :global(...) pseudo-class are not treated as symbols in the stylesheet, and are not exported. This means that they are not available for use in other stylesheets or in the runtime JavaScript module.","s":"Disable in selector","u":"/docs/guides/handbook/namespacing","h":"#disable-in-selector","p":214},{"i":223,"t":"We can avoid namespacing for all symbols (except classes) by using the st-global() function: @property st-global(--bgColor) - read more @keyframes st-global(slide) - read more @layer st-global(theme) - read more container: st-global(panel) - read more Unlike the other symbols that are mapped from a local name to their global one, when we map a class using -st-global, we can define a global selector that will replace it. .player { -st-global: '.myGame__player'; } Notice that in this case, we are mapping our player class to a .myGame__player class selector. This is because classes can be mapped to any selector, including multiple classes, elements, attributes, and other CSS selector parts.","s":"Defining global symbols","u":"/docs/guides/handbook/namespacing","h":"#defining-global-symbols","p":214},{"i":225,"t":"By default, namespacing is derived in Stylable using the stylesheet filename, but in some edge cases we might want to override this behavior. To do so, we can use the @st-namespace 'OverrideNamespace'; definition. Click here to read more about the namespace API.","s":"Stylesheet level namespacing","u":"/docs/guides/handbook/namespacing","h":"#stylesheet-level-namespacing","p":214},{"i":227,"t":"On a more general level, we can have granular control of Stylable's namespacing process by passing a custom namespace resolver to Stylable at initialization using configuration.","s":"Project level namespacing","u":"/docs/guides/handbook/namespacing","h":"#project-level-namespacing","p":214},{"i":229,"t":"In the previous chapter, we saw brief examples of mapping our classes local names to their global namespaced names at runtime, as well as the cssStates utility function to activate their states. In this chapter, we'll explore the runtime features of Stylable and their usage. One of the core ideas behind Stylable is to try and shift as much of the work as possible from runtime to build time to increase performance and end-user experience. However, in some instances, we need to do additional work in JavaScript. For example, we need to: Bind classes to views Activate states Set custom property values Dynamically generate CSS","s":"Runtime","u":"/docs/guides/handbook/runtime","h":"","p":228},{"i":231,"t":"The namespacing chapter covered the basics of namespacing in Stylable, and in it, we saw that in Stylable, classes, custom-properties, keyframes, layers, and containers all receive namespacing to avoid conflicts.","s":"Mapped symbols","u":"/docs/guides/handbook/runtime","h":"#mapped-symbols","p":228},{"i":233,"t":"import { classes, // class mapping vars, // custom properties mapping keyframes, // keyframes mapping layers, // layer mapping containers, // container mapping } from \"./game.st.css\";","s":"Import example","u":"/docs/guides/handbook/runtime","h":"#import-example","p":228},{"i":235,"t":"Import Type Source Target classes Class .player .NS__player vars Custom property --player1Color --NS-player1Color keyframes Keyframes @keyframes slide @keyframes NS__slide layers Layer @layer theme @layer NS__theme containers Container container: panel container: NS__panel","s":"Runtime namespaced names","u":"/docs/guides/handbook/runtime","h":"#runtime-namespaced-names","p":228},{"i":237,"t":"Up to this point, all use cases we saw for wiring elements were simplified or overly verbose. In the following example we can see that we are binding the player class to the player view, as well as activating the registered state. import { classes, stStates } from \"./game.st.css\";
        className={classes.player + ' ' + stStates({registered: true})}
        ","s":"Apply class and state","u":"/docs/guides/handbook/runtime","h":"#apply-class-and-state","p":228},{"i":239,"t":"We can use the st() function to simplify this process, by passing it the class name as its first argument, and the activated states as its second argument. import { st, classes } from './game.st.css';
        ; There are cases in which we would like to add additional classes to an element. For example, a component might want to accept an external class name to allow for custom styling. Below, we can see such a case, where we bind a class (player), activate a state (registered), and add an external class from props for customization purposes. game.jsx import { st, classes } from './game.st.css'; const Game = ({ className }) => { return (
        ); } For further details on the runtime API, see the runtime reference.","s":"st() function","u":"/docs/guides/handbook/runtime","h":"#st-function","p":228},{"i":241,"t":"We have yet to cover Stylable build variables, but seeing as they expose their value in runtime, we'll cover them here briefly. As opposed to the native runtime symbols we saw namespaced above, Stylable build variables do not require namespacing, as they are transpiled away at build time. In this case, the runtime export maps variables to their defined values. import { stVars // Stylable build variables } from \"./game.st.css\"; // runtime namespaced names stVars.boardBackgroundColor; // \"green\"","s":"Stylable build variables","u":"/docs/guides/handbook/runtime","h":"#stylable-build-variables","p":228},{"i":243,"t":"The purpose of this document is to help migrate projects using Stylable to v5. We have taken the opportunity of node dropping LTS support for v12 and we have decided to include a number of additional breaking changes to the v5 release. These changes are primarily to the programmatic API of Stylable and not to user facing features, syntax or integrations. You can find the plan for this major version here.","s":"Stylable v5","u":"/docs/guides/migration-v5","h":"","p":242},{"i":246,"t":"All diagnostics in @stylable/core had diagnostics code added, and were reviewed for consistency. Many diagnostics have had their severity increased to error. We plan on starting to map out the diagnostics in this site to help users understand what they are seeing, and why it happened.","s":"Diagnostics overhaul","u":"/docs/guides/migration-v5","h":"#diagnostics-overhaul","p":242},{"i":248,"t":"In the past, Stylable exposed all of its functionalities as public facing APIs. Over time, this has proven difficult to maintain and develop further, and so we have decided to limit what Stylable exposes, and to segment its APIs under a few different namespaces. In addition, most APIs have been refactored to match our new programmatic API model. API changes​ The following APIs have been changed: StylableMeta renamed rawAst to sourceAst and outputAst to targetAst The Stylable constructor now accepts options as an object (similar to Stylable.create() options) The following APIs have been removed: The Stylable.create() method has been removed StylableMeta removed ast field StylableTransformer is no longer considered public API, there relevant functionality has been moved to stylable.transform, stylable.transformSelector, etc. custom pseudo state parameter type tag has been removed - can be replaced by -st-states: stateName(string) (see issue) Missing APIs?​ If we have removed an API that you have found useful, and provided no alternative, please let us know by opening an issue over at GitHub.","s":"Reducing public facing APIs","u":"/docs/guides/migration-v5","h":"#reducing-public-facing-apis","p":242},{"i":251,"t":"The @stylable/cli stc command now has no default output defined, previously this was set to emit .cjs files. If you were using the stc command without the --cjs flag, you will need to update your code to use the new default output If were explictly setting the output to not emit .cjs files (e.g. --no-cjs or --cjs=false), you can now remove this parameter from your command","s":"Default arguments changed","u":"/docs/guides/migration-v5","h":"#default-arguments-changed","p":242},{"i":253,"t":"The @stylable/cli stc command now supports building an indexFile and other outputs (.js, .css, .st.css, etc.) at once. If you were previously running separate commands to build the index file and other outputs, you can now run a single command to build them all at once","s":"Build index file and other outputs simultaneously","u":"/docs/guides/migration-v5","h":"#build-index-file-and-other-outputs-simultaneously","p":242},{"i":255,"t":"Follow these steps for a smooth transition. Each step is explained in more detail below. Update dependencies Update global typings Update .st.css file imports Update usage in React components Update tests","s":"Suggested steps of migration","u":"/docs/guides/migration-v3","h":"","p":254},{"i":257,"t":"Ensure you have v3 Stylable dependencies available. You may need to update your package.json or ensure that other dependencies bring you v3 Stylable: @stylable/cli @stylable/core @stylable/runtime @stylable/node @stylable/webpack-plugin tip all Stylable packages in v3 are scoped under the @stylable namespace. if you have dependencies like stylable (without scope), it is the old one and should be changed to scoped version.","s":"Update dependencies","u":"/docs/guides/migration-v3","h":"#update-dependencies","p":254},{"i":259,"t":"If TypeScript is used in the project, we recommend updating the global typings (usually globals.d.ts) with an .st.css module declaration: declare module '*.st.css' { const stylesheet: import('@stylable/runtime').RuntimeStylesheet; export = stylesheet; } This way the TypeScript compiler will help refactor most of the required changes and provide typings for other Stylable use cases.","s":"Update global typings","u":"/docs/guides/migration-v3","h":"","p":254},{"i":261,"t":"Prior to v2 all .st.css files would export a default style function. In v2 this has changed: .st.css files now export a named object. List of all exported keys: import { st, // alias to `style` classes, cssStates, keyframes, namespace, stVars, style, vars, } from './style.st.css'; This means that all imports of .st.css files have to be changed, for example: -import style from './Component.st.css'; +import { st, classes, /* ... */ } from './Component.st.css'; However, most often { st, classes } is enough: import { st, classes } from './Component.st.css'; tip .st.css files export a style function and an alias to it - st. It is recommended to use st in order to avoid name clashing with other variables (for example, some other inline style).","s":"Update .st.css file imports","u":"/docs/guides/migration-v3","h":"#update-stcss-file-imports","p":254},{"i":263,"t":"Stylable now localizes CSS Custom Properties. This means that any usage of Custom Proprties (e.g. --prop) should now be incorparated in the component code. See the docs about CSS custom properties for usage examples.","s":"CSS custom properties","u":"/docs/guides/migration-v3","h":"#css-custom-properties","p":254},{"i":265,"t":"Once .st.css imports are updated, React components should be updated too: -
        +
        There are subtle but very important nuances in this change. Stylable v1 used spread pattern. It would take the output of style('root', states, this.props) function and spread it on component. This way one or more props would be applied to the component. Thus, code that looks like this:
        once evaluated, would behave like this:
        Stylable v2 and v3 usage is like so: className={st(classes.root, states, this.props.className)} There is no props spreading anymore and Stylable requires only className to be used. However, if you were relying on the props spread pattern, in v2 and v3 you might find some props missing. Therefore, with Stylable v3 it is up to you to apply any additional props:
        Stylable v1 style() would accept unscoped css class name as a string This is no longer acceptable in Stylable v2 or v3, for example: -
        +
        note that classes.root comes from .st.css, which is the correct way to import class names. Similar scoping is applied to css variables too, imported from vars Note: find more details and examples in our Runtime reference.","s":"Update usage in React components","u":"/docs/guides/migration-v3","h":"#update-usage-in-react-components","p":254},{"i":267,"t":"If you were using @stylable/dom-test-kit in Stylable v1, it's usage is slightly different in v2 and v3: import { StylableDOMUtil } from '@Stylable/dom-test-kit'; -import style from './Component.st.css'; +import * as styleSheet from './Component.st.css'; -const StylableDOMUtil = new StylableDOMUtil(style); +const StylableDOMUtil = new StylableDOMUtil(styleSheet); Stylable v2 and v3 StylableDOMUtil expects to receive an argument which is the whole stylesheet exported from a .st.css file Prior to v2 it was only one thing - the style function.","s":"Update tests","u":"/docs/guides/migration-v3","h":"#update-tests","p":254},{"i":269,"t":"The goal of the project file is to contain the CSS commons for the project, including variables, component variants and shared classes. In the following code, you can see a project with: 2 color, 2 font and 1 spacing size variables 1 Button component variant named cancelButton 1 shared class for emphasisBox project.st.css :vars { color1: #f012be; color2: #ff4136; fontbig: 2rem; fontsmall: 1rem; spacing: 6px; } @st-import Button from \"./button/button.st.css\"; .cancelButton { -st-extends: Button; } .emphasisBox {} tip We recommend calling the project commons file project.st.css.","s":"Project Commons","u":"/docs/guides/project-commons","h":"","p":268},{"i":271,"t":"Server side rendering (SSR) is an approach to serving JavaScript rendered web applications (such as React, Vue, Angular, etc...) that tries to improve time-to-paint, SEO support and more. To learn more about SSR - see this introduction post. When creating your library / application you will see that you might need to make some changes to your project publish / consumption process in order to integrate Stylable to your SSR flow.","s":"Supporting Server Side Rendering","u":"/docs/guides/ssr","h":"","p":270},{"i":273,"t":"In order to use Stylable imports from your source files in nodeJS, you will need to add @stylable/node as a dependency. Import and use its requireHook method before rendering to enable requiring Stylable stylesheets in their CommonJS module format. // server.js const { attachHook } = require('@stylable/node'); attachHook(); // enables requiring .st.css files as CommonJS // < render application ... >","s":"Transforming Stylable in the Server","u":"/docs/guides/ssr","h":"#transforming-stylable-in-the-server","p":270},{"i":275,"t":"In order to ensure full SSR compatibility, generated namespaces for all stylesheets must match exactly across all different build targets. The default Stylable namespaceResolver uses a combination of file-system path, name and version from the package.json file to create its namespace. This means that namespaces can be influenced by the published file path structure. If you choose to provide an alternative namespace resolver that does not depend on file paths as part of its namespace creation, then you can avoid the problem described below.","s":"Matching namespaces","u":"/docs/guides/ssr","h":"#matching-namespaces","p":270},{"i":277,"t":"When building a library or application for consumption in both client and server environments it is common to output multiple transpilation targets for various module systems. This means that a published project will usually have both CommonJS and ES modules, each with their own transpiled copy of the project, including the Stylable assets. This can pose a problem when trying to synchronize namespace creation for SSR.","s":"Supporting multiple transpilation targets","u":"/docs/guides/ssr","h":"#supporting-multiple-transpilation-targets","p":270},{"i":279,"t":"The Stylable CLI offers a feature that allows you to sync your namespace across dist targets by inserting a custom header comment to the start of your .st.css file. This header comment is used to normalize namespacing paths across different build targets. When using @stylable/cli to publish your source stylesheets, use the useNamespaceReference flag to mark all targets as originating from the same original source. stc --srcDir ./src --outDir ./dist/cjs --cjs --stcss --useNamespaceReference stc --srcDir ./src --outDir ./dist/esm --esm --stcss --useNamespaceReference For this to work properly, your source folder must be published along with your distribution build targets.","s":"Publishing SSR-ready source files (*.st.css)","u":"/docs/guides/ssr","h":"#publishing-ssr-ready-source-files-stcss","p":270},{"i":281,"t":"When building a component library or an application, it is useful to reuse classes that can be shared across components to achieve common CSS with lower specificity.","s":"Shared Classes","u":"/docs/guides/shared-classes","h":"","p":280},{"i":283,"t":"In the commons stylable stylesheet of your project (usually named project.st.css), you define a CSS class with a descriptive name like emphasisBox. project.st.css .emphasisBox { background: pink; color: white; }","s":"Defining a shared class","u":"/docs/guides/shared-classes","h":"#defining-a-shared-class","p":280},{"i":285,"t":"A component's Stylable stylesheet can use and extend shared classes: comp.st.css @st-import [emphasisBox] from \"./project.st.css\"; /* selector: .comp__root .project__emphasisBox js value: \"project__emphasisBox\" */ .root .emphasisBox {} /* selector: .comp__messageBox.project__emphasisBox js value: \"comp__messageBox project__emphasisBox\" */ .messageBox { -st-extends: emphasisBox; } note For the .emphasisBox selector, we manually added the .root class to avoid overriding emphasisBox outside this scope.","s":"Use shared classes in components","u":"/docs/guides/shared-classes","h":"#use-shared-classes-in-components","p":280},{"i":288,"t":"selector: query to target elements in the DOM property: Name of the declaration (e.g. color) declaration: CSS property paired with a value declaration Block: List of CSS declarations ruleset: CSS declaration block paired with a selector See MDN How CSS is structured and css-tricks Ruleset Terminology for detailed explanation of CSS naming and structure.","s":"CSS Terminology","u":"/docs/references/cheatsheet","h":"#css-terminology","p":286},{"i":290,"t":"Syntax that is unique to Stylable or extended from CSS.","s":"Syntax","u":"/docs/references/cheatsheet","h":"#syntax","p":286},{"i":292,"t":"Syntax Explanations .x {} Class selector (api) x {} Element type selector (api) :x {} Pseudo-class or custom state selector (api) ::x {} Pseudo-element or custom-element selector (api) :--x {} custom selector (api) :global() {} disables selector namespacing (api)","s":"Selectors","u":"/docs/references/cheatsheet","h":"#selectors","p":286},{"i":294,"t":"Syntax Explanations @st-import X from './y.st.css'; Import stylesheet's root (api) @st-import [x, y] from './y.st.css'; Import named exports (api) @st-import X, [y, z] from './y.st.css'; Import default & named (api) @st-import [x as local-x] from './y.st.css'; Local alias for named import (api) @st-import [keyframes(x1, x2)] from './y.st.css'; Import keyframes (api) @st-import [layer(x1, x2)] from './y.st.css'; Import layers (api) @st-import [container(x1, x2)] from './y.st.css'; Import containers (api)","s":"Module system","u":"/docs/references/cheatsheet","h":"#module-system","p":286},{"i":296,"t":"Syntax Explanations -st-extends: Gallery; Extend an existing class (api) -st-states: stateA, stateB; Define custom pseudo-classes (api)","s":"Class extensions","u":"/docs/references/cheatsheet","h":"#class-extensions","p":286},{"i":298,"t":"Syntax Explanations :vars { x: red; y: blue; } Build time variables definition (api) prop: value(x); Insert var value into declaration (api) prop: x(arg1, arg2); Computed value from custom formatter (api) -st-mixin: x, y; Apply multiple mixins to CSS ruleset (api) -st-mixin: x(param v1, param v2); Apply mixins with override params (api)","s":"Templating","u":"/docs/references/cheatsheet","h":"#templating","p":286},{"i":300,"t":"Syntax Explanations @st-scope .x {} Scope nested rules with a given selector (api) @st-namespace \"x\"; Development display name for debugging (api)","s":"Other","u":"/docs/references/cheatsheet","h":"#other","p":286},{"i":302,"t":"CSS container queries are used to target and style an element depending on the conditions of a container it is nested within. This page goes over how Stylable handles the container-name declaration and the @container at-rule, for more details about the language feature itself, check out the following resources: MDN CSS container queries CSS contains spec","s":"Containers","u":"/docs/references/contains","h":"","p":301},{"i":304,"t":"Container definition .panel { /* longhand */ container-name: panel; /* shorthand */ container-name: panel / inline-size; /* longhand with multiple names */ container-name: panel side; } soft definition A container name symbol is defined using the container/container-name declaration only when not explicitly defined by an import or a global @container definition. Usage @container panel (width <= 250px) { /* style nested rules */ }","s":"Syntax","u":"/docs/references/contains","h":"#syntax","p":301},{"i":306,"t":"An exported container can be imported into another stylesheet with the @st-import at-rule. Style nested container rules /* get 'panel' container definition from another stylesheet */ @st-import [container(panel)] from './x.st.css'; @container panel (width <= 150px) { /* nested container rules */ } More import examples /* map 'panel' container to local name 'x-panel' */ @st-import [container(panel as x-panel)] from './x.st.css'; /* import multiple containers */ @st-import [container(panel, header)] from './x.st.css';","s":"Import and Export","u":"/docs/references/contains","h":"#import-and-export","p":301},{"i":308,"t":"A Container definition can be accessed to generate dynamic styles using the containers mapping on the Stylable runtime stylesheet: import { containers } from './sheet.st.css'; // map to target namespaced container containers.panel;","s":"Runtime","u":"/docs/references/contains","h":"#runtime","p":301},{"i":310,"t":"Stylable automatically namespaces any container name according to the stylesheet it is defined in: .x { container: panel; } @container panel (width > 100px) {} /* OUTPUT */ .x { container: NAMESPACE__panel; } @container NAMESPACE__panel (width > 100px) {}","s":"Namespace","u":"/docs/references/contains","h":"#namespace","p":301},{"i":312,"t":"In some cases the default namespace behavior is unwanted. In such cases, st-global can be used to set a container name as global: .x { container: st-global(panel); } @container st-global(panel) (width > 100px) {} /* OUTPUT */ .x { container: panel; } @container panel (width > 100px) {} ::note global without symbol deinition Setting st-global around the container name in either the declaration or container query only references a global container name, without creating a symbol that can later be imported or referenced. :: To register a global container name symbol, that can be imported and referenced by other stylesheets, use the @container at-rule with no body or query: /* global panel container name definition */ @container st-global(panel); .x { container: panel; } @container panel (width > 100px) {} /* OUTPUT */ .x { container: panel; } @container panel (width > 100px) {}","s":"Disable namespace","u":"/docs/references/contains","h":"#disable-namespace","p":301},{"i":314,"t":"A CSS class selector is used as a generic way to target a DOM element with a matching class name. In Stylable a CSS class is used primarily as a component part, for example a .navBtn of gallery component, but can also be used as utility class or a mixin. This page goes over how Stylable handles class selector, for more details about the language feature itself, checkout the following resources: MDN class selector class selector in spec","s":"Class Selector","u":"/docs/references/class-selectors","h":"","p":313},{"i":316,"t":"To define a class symbol: set a class selector anywhere in a stylesheet. Standalone definition .navBtn {} In-selector definition /* compound */ button.navBtn.baseBtn {} /* multiple selectors */ .navBtn, .thumb {}","s":"Syntax","u":"/docs/references/class-selectors","h":"#syntax","p":313},{"i":318,"t":"The .root class has a special meaning in Stylable stylesheets. Every stylesheet has a root to represent the root element of the component or page of the stylesheet - see root reference.","s":"Root","u":"/docs/references/class-selectors","h":"#root","p":313},{"i":320,"t":"A class selector can be imported into another stylesheet with the @st-import atrule. Import class by name /* reference the navBtn class */ @st-import [navBtn] from './gallery.st.css'; /* reference multiple classes */ @st-import [navBtn, thumb] from './gallery.st.css'; /* map imported class to local name \"galleryNavBtn\" */ @st-import [navBtn as galleryNavBtn] from './gallery.st.css'; Import stylesheet root class /* get the gallery root class (default export) */ @st-import Gallery from './gallery.st.css'; /* reference the gallery named root class */ @st-import [root as GalleryRoot] from './gallery.st.css'; capitalize default stylesheet import While any valid ident can be used for the default root import, It is strongly recommend to capitalize the name to signify it represents a component element.","s":"Import and Export","u":"/docs/references/class-selectors","h":"#import-and-export","p":313},{"i":322,"t":"A class can be accessed using the classes mapping on the Stylable stylesheet runtime. import { classes } from './gallery.st.css'; // map from local name to target class name classes.part; classes.root; classes['dashed-class']; Use the class mapping to bind the stylesheet to the rendered view: React example /* gallery.jsx */ import { st, classes } from './gallery.st.css'; function Gallery(props) { return (
        ); } component instance customization In the component example above, we call the st() function in order to pass both the gallery root class and any class name provided externally in order to style the component from the outside.","s":"Runtime","u":"/docs/references/class-selectors","h":"#runtime","p":313},{"i":324,"t":"Stylable automatically namespaces any class selector according to the stylesheet it is defined in: .a {} /* OUTPUT */ .NAMESPACE__a {}","s":"Namespace","u":"/docs/references/class-selectors","h":"#namespace","p":313},{"i":326,"t":"Wrapping a class selector with :global() pseudo-class prevents namespacing: :global(.icon-heart) {} /* OUTPUT */ .icon-heart {} see global selector reference","s":"Disable in selector","u":"/docs/references/class-selectors","h":"#disable-in-selector","p":313},{"i":328,"t":"Class selector can be mapped to a custom global selector with the -st-global declaration: Map to global class .button { -st-global: '.myLib__button'; } .button:hover {} /* OUTPUT */ .myLib__button {} .myLib__button:hover {} Valid values /* global selector */ .x { -st-global: '.a' } /* compound selector of multiple classes */ .x { -st-global: '.a.b' } /* complex selector (runtime `classes.x` not exported) */ .x { -st-global: '.a .b' } /* non class selectors (runtime `classes.x` not exported) */ .x { -st-global: '[c]' } .x { -st-global: '.a[c]' } Invalid values /* empty selector */ .x { -st-global: '' } /* only a single selector is supported */ .x { -st-global: '.a, .b' }","s":"Map to global selector","u":"/docs/references/class-selectors","h":"#map-to-global-selector","p":313},{"i":330,"t":"Style pseudo-elements Use CSS mixins","s":"Related","u":"/docs/references/class-selectors","h":"#related","p":313},{"i":332,"t":"CSS custom property is used to define and re-use variables that participate in the cascade, and to dynamically change their values at runtime. This page goes over how Stylable handles custom properties, for more details about the language feature itself, checkout the following resources: MDN custom properties MDN @property MDN var() MDN - Using CSS custom properties Custom properties in spec Smashing Magazine - It's Time To Start Using CSS Custom Properties","s":"Custom Property","u":"/docs/references/css-vars","h":"","p":331},{"i":334,"t":"A CSS custom property name must start with the -- prefix.","s":"syntax","u":"/docs/references/css-vars","h":"#syntax","p":331},{"i":336,"t":"A custom property can be referenced from a declaration property or within a value var() call: .a { /* set */ --x: green; } .a .b { /* get */ color: var(--x); } .b { /* fallback to yellow if property is unset */ color: var(--notSet, yellow); /* fallback to --x if property is unset */ color: var(--notSet, var(--x)); } no explicit definition A custom property can be set and used without an explicit @property definition","s":"Get / Set","u":"/docs/references/css-vars","h":"#get--set","p":331},{"i":338,"t":"Use @property at-rule to register a configuration for a runtime property: /* runtime type definition */ @property --x { syntax: ''; /* type */ inherits: true; /* is taken from cascade */ initial-value: green; /* default when unset */ } .b { /* get green from initial value if --x is unset */ color: var(--x); }","s":"Runtime definition","u":"/docs/references/css-vars","h":"#runtime-definition","p":331},{"i":340,"t":"To define a custom property to be used outside of a stylesheet, without explicitly registering its runtime type or using it as a declaration property or value, you can define the @property at-rule without a body: @property --x; removed at build A property with no configuration body is removed at build-time as it serves no purpose during runtime","s":"Build only definition","u":"/docs/references/css-vars","h":"#build-only-definition","p":331},{"i":342,"t":"Stylable variables (build vars) and CSS custom properties offer different capabilities, and as such serve different use-cases. Stylable variables exist only in your source code, and get replaced during build. They serve well for calculations that are not supported by native CSS, reducing code repetition, increasing readability and can benefit any static theme or styling without incurring any runtime performance cost. CSS custom properties on the other hand do incur a very small runtime cost, but offer the ability to override their values during runtime, allowing for native CSS dynamic styling.","s":"Comparison to build vars","u":"/docs/references/css-vars","h":"#comparison-to-build-vars","p":331},{"i":344,"t":"An exported custom-property can be imported into another stylesheet with the @st-import at-rule. @st-import [--x] from \"./common.st.css\"; .a { /* get --x value */ color: var(--x); } .b { /* set/override --x value */ --x: gold; /* get override 'gold' value */ background-color: var(--x); /* gold */ }","s":"Import and Export","u":"/docs/references/css-vars","h":"#import-and-export","p":331},{"i":346,"t":"A custom property can be used dynamically in JavaScript. comp.st.css @property --x; comp.jsx import { vars } from './comp.st.css'; /* inline style set property value */
        ;","s":"Runtime","u":"/docs/references/css-vars","h":"#runtime","p":331},{"i":348,"t":"Stylable automatically namespace any CSS custom property name according to the stylesheet it is defined in. @property --x { syntax: ''; inherits: true; initial-value: green; } .a { --x: var(--x); } /* OUTPUT */ @property --NAMESPACE-x { syntax: ''; inherits: true; initial-value: green; } .NAMESPACE__a { --NAMESPACE-x: var(--NAMESPACE-x); }","s":"Namespace","u":"/docs/references/css-vars","h":"#namespace","p":331},{"i":350,"t":"In cases where the default namespace behavior is not wanted, st-global can be used to mark a custom property definition as global. @property st-global(--x) { syntax: ''; inherits: true; initial-value: green; } .a { --x: var(--x); } /* OUTPUT */ @property --x { syntax: ''; inherits: true; initial-value: green; } .NAMESPACE__a { --x: var(--x); }","s":"Disable namespace","u":"/docs/references/css-vars","h":"#disable-namespace","p":331},{"i":352,"t":"Formatters are functions that return a single CSS declaration value. They can receive arguments, process them and return the value. note Currently, any argument passed through to a formatter is of type string. We are in the process of adding support for more complex types. For example a calc-font-size formatter can return a different value for the font size depending on the provided argument. tip If you need to return multiple declaration values, we recommend using Stylable mixins. /* ./calc-font-size.js */ module.exports = function (baseSize, modifier) { switch (modifier) { case 'header': return `${Number(baseSize) * 2}px`; case 'aside': return `${Number(baseSize) * 0.75}px`; default: return baseSize + 'px'; } }; @st-import calcFontSize from \"./calc-font-size\"; .header { font-size: calcFontSize(16, header); } .form { font-size: calcFontSize(16, body); } /* CSS output */ .header { font-size: 32px; } .form { font-size: 16px; } /* CSS output */ .header { font-size: 32px; } .form { font-size: 16px; } note Currently you cannot use formatters inside a native URL function. As a suggested workaround, you can return a URL function from a formattter.","s":"Formatters","u":"/docs/references/formatters","h":"","p":351},{"i":354,"t":"When the formatter is imported into the CSS, it can also be used with a variable. In this example the CSS imports the same formatter as the previous example, calc-font-size, but the variable baseFontSize is added to the calculation. @st-import calcFontSize from \"./calc-font-size\"; :vars { baseFontSize: 12; } .header { font-size: calcFontSize(value(baseFontSize), header); } .form { font-size: calcFontSize(value(baseFontSize), body); } /* CSS output */ .header { font-size: 24px; } .form { font-size: 12px; }","s":"Formatters with variables","u":"/docs/references/formatters","h":"#formatters-with-variables","p":351},{"i":356,"t":"You can also nest formatters to provide functions that are modular, composable and reusable. In this example the formatter divBy2 is nested in the round formatter. Both are imported into the CSS file and the output value is calculated from both. The formatters expose to the CSS mathematical calculations that are used in the JavaScript functions. /* ./math.js */ module.export = { divBy2: function (num) { return Number(Number(num) / 2); }, round: function (num) { return Math.round(Number(num)); }, }; @st-import [divBy2, round] from \"./math\"; :vars { baseSize: 17px; } .header { font-size: round(divBy2(value(baseSize))) px; } /* CSS output */ .header { font-size: 9px; }","s":"Nested formatters","u":"/docs/references/formatters","h":"#nested-formatters","p":351},{"i":358,"t":"You use custom selectors to define an alias that can match complex selectors. For example, a specific type of button within a form that appears only when hovered can be defined as a custom selector. By defining the button as a custom selector with its own name, the button is exposed in the API and available for use by using just the custom selector name. You could also use custom selectors to define a group of selectors with one name. For example, you can access all the headings on a page as one custom selector. This could be useful if you want to style just their color the same.","s":"Custom Selector","u":"/docs/references/custom-selectors","h":"","p":357},{"i":360,"t":"The following code maps the alias name controlBtn that matches any .btn CSS class nested under the .controls CSS class. comp.st.css @custom-selector :--controlBtn .controls .btn; /* selector: .comp__controls .comp__btn */ :--controlBtn { border: 1px solid grey; } /* selector: .comp__controls .comp__btn:hover */ :--controlBtn:hover { border-color: red; }","s":"Usage","u":"/docs/references/custom-selectors","h":"#usage","p":357},{"i":362,"t":"Custom selectors generate a pseudo-element. So, for example, importing a stylesheet into another stylesheet enables access to the controlBtn pseudo-element. In this example, the stylesheet comp.st.css from the previous example is imported into this stylesheet. page.st.css @st-import Comp from \"./comp.st.css\"; /* selector: .comp__root .comp__controls .comp__btn */ Comp::controlbtn { background: gold; } caution If a custom-selector alias conflicts with a local CSS class name, the exposed pseudo-element targets the custom-selector. However, the exported CSS class is still exported to JavaScript.","s":"Expose pseudo-element","u":"/docs/references/custom-selectors","h":"#expose-pseudo-element","p":357},{"i":364,"t":"The following examples demonstrate how to effectively use custom selectors in Stylable.","s":"Use cases","u":"/docs/references/custom-selectors","h":"#use-cases","p":357},{"i":366,"t":"Some components might contain nested instances of themselves because they're a container or a \"recursive\" component. For example, a tree component might render itself. If the component exposes any pseudo-elements, it is a good practice to define them as custom selectors with child selectors to avoid affecting the inner parts of internal instances. The following example shows how a tree component exposes an icon. tree.st.css @custom-selector :--icon .root > .icon; Here you can use the icon custom selector from the outside just like you would use any other pseudo-element. panel.st.css @st-import Tree from \"./tree.st.css\"; /* selector: .tree__root > .tree__icon */ Tree::icon { background: yellow; /* paints the icons all the way down the tree */ }","s":"Container and recursive components","u":"/docs/references/custom-selectors","h":"#container-and-recursive-components","p":357},{"i":368,"t":"When you want to make internal parts of your component API more accessible, you can describe pseudo-elements using custom selectors. For example, you can expose a pseudo-element named navigationBtn that enables you to style an internal gallery component's navBtn element. @st-import Gallery from \"./gallery.st.css\"; @custom-selector :--navigationBtn Gallery::navbtn;","s":"Expose inner parts that are deeply defined","u":"/docs/references/custom-selectors","h":"#expose-inner-parts-that-are-deeply-defined","p":357},{"i":370,"t":"You may have a component with several basic CSS classes and with corresponding pseudo-elements. You could expose a combination pseudo-element. For example, a pseudo-element named navBtn matches any btn CSS class nested in a nav CSS class. comp.st.css @custom-selector :--navBtn .nav .btn; page.st.css @st-import Comp from \"./comp.st.css\"; /* selector: .comp__root .comp__nav .comp__btn */ Comp::navbtn { border: 1px solid grey; }","s":"Combination selector","u":"/docs/references/custom-selectors","h":"#combination-selector","p":357},{"i":372,"t":"You could also use custom selectors to gather a collection of selectors into a single selector. For example, you may want to access media that includes both images and videos. comp.st.css @custom-selector :--media .image, .video; /* selector: .comp__image, .comp__video */ :--media { border: 1px solid grey; } Issues to consider​ Aliasing multiple selectors in a custom selector may generate lots of CSS that could affect performance. For example, when you import the Comp stylesheet (the selector described in the previous example) into another stylesheet, in the output the selector is split for each override. page.st.css @st-import Comp from \"./comp.st.css\"; Comp::media { border-color: red; } /* OUTPUT */ .comp__root .comp__image, .comp__root .comp__video { border-color: red; }","s":"Group of selectors","u":"/docs/references/custom-selectors","h":"#group-of-selectors","p":357},{"i":374,"t":"In Stylable, selectors are namespaced to the stylesheet. However there might be cases where you want to target global selectors without Stylable namespacing them, For that you can use the :global() selector.","s":"Global Selector","u":"/docs/references/global-selectors","h":"","p":373},{"i":376,"t":"Mark as global :global(.g) {} /* OUTPUT */ .g {} Valid cases /* multiple classes */ :global(.g1.g2) {} /* compound selector (`g` class not namespaced) */ .a:global(.g):hover.b {} Invalid cases /* only a single selector is supported */ .a:global(.g1, .g2):hover.b {} caution Any definitions within the :global(...) pseudo-class are not treated as symbols in the stylesheet and are not exported. That means that they are not available for use in other stylesheets or in the runtime JavaScript module.","s":"Syntax","u":"/docs/references/global-selectors","h":"#syntax","p":373},{"i":378,"t":"In case a class definition overrides a native pseudo with either -st-states or a custom pseudo-element then the :global() selector can be used to force the native: customInput with override :selected CustomInput:selected {} CustomInput:global(:selected) {} /* OUTPUT */ .customInput__root.customInput--selected {} .customInput__root:selected {}","s":"Force native","u":"/docs/references/global-selectors","h":"#force-native","p":373},{"i":380,"t":"The Stylable @st-import at-rule is used to reference definitions from other .st.css or .js modules in a similar way to JavaScript Imports.","s":"Import","u":"/docs/references/imports","h":"","p":379},{"i":382,"t":"@st-import Default, [namedA, namedB as localB] from 'request'; re-declare symbol import local names must be unique. Imports are hoisted above local definitions.","s":"Syntax","u":"/docs/references/imports","h":"#syntax","p":379},{"i":384,"t":"In order to reference the the default export of a module, provide a local name after the @st-import. @st-import DefaultLocalName from 'request';","s":"Default import","u":"/docs/references/imports","h":"#default-import","p":379},{"i":386,"t":"To reference named exports of a module, in square brackets (after the optional default import), provide a comma separated list of requested names. /* named imports */ @st-import [partA, partB] from 'request'; /* default + named imports */ @st-import Default, [partA, partB] from 'request'; Local alias​ Use the as keyword to map an export name to a local name. @st-import [part as localPartName] from 'request';","s":"Named import","u":"/docs/references/imports","h":"#named-import","p":379},{"i":388,"t":"When importing from a stylesheet, the root class is mapped to the default export, and several named symbols can be referenced by name: origin.st.css /* define symbols */ .part { --customProp: yellow; container-name: part; } @keyframes anim {} @layer comps, theme; :vars { stVar: green; } entry.st.css @st-import OriginRoot, [ part, /* part class name */ --customProp, /* custom property */ stVar /* build var */ ] from './origin.st.css'; Stylesheet default capitalization When importing a default value from a stylable stylesheet, you should use a capital letter to signify that the value represents a component root.","s":"Stylable stylesheet","u":"/docs/references/imports","h":"#stylable-stylesheet","p":379},{"i":390,"t":"To import keyframes, layers or containers from another stylesheet, a special keyframes(), layer(), or container() assertion is required. entry.st.css /* import keyframe and layer */ @st-import [ keyframes(anim), layer(theme), container(panel) ] from './origin.st.css'; /* multiple */ @st-import [ keyframes(anim1, anim2), layer(comps, theme), container(panel, header) ] from './origin.st.css';","s":"Named type assertion","u":"/docs/references/imports","h":"#named-type-assertion","p":379},{"i":392,"t":"To import Javascript definitions for values, mixins, and formatters, use the @st-import statement in the same way as you would for a stylesheet. @st-import DefaultExport, [namedA, namedB as localB] from './code.js';","s":"Javascript","u":"/docs/references/imports","h":"#javascript","p":379},{"i":394,"t":"An older variation for @st-import is the :import (pseudo-import). While it still works, it is highly discouraged for usage, verbose and will be deprecated in the future. :import { -st-from: 'request'; -st-default: DefaultLocalName; -st-named: namedA, namedB as localB; } A code-mod to migrate to the new syntax is available (see doc)","s":"Legacy syntax","u":"/docs/references/imports","h":"#legacy-syntax","p":379},{"i":396,"t":"The @keyframes CSS at-rule is used to define an animation that can be referenced to animate a DOM element. This page goes over how Stylable handles @keyframes, for more details about the language feature itself, checkout the following resources: MDN @keyframes CSS animation spec","s":"Keyframes","u":"/docs/references/keyframes","h":"","p":395},{"i":398,"t":"Keyframes definition /* empty definition */ @keyframes slide {} /* animation definition */ @keyframes jump { from { color: red } to { color: green } } /* percentage keyframes */ @keyframes jump { 0% { color: red } 50% { color: green } 100% { color: blue } } Keyframes usage .x { /* within animation shorthand */ animation: slide 3s ease-out infinite; } .y { /* same as above */ animation-name: slide; animation-duration: 3s; animation-timing-function: ease-out; animation-iteration-count: infinite; }","s":"Syntax","u":"/docs/references/keyframes","h":"#syntax","p":395},{"i":400,"t":"An exported keyframes can be imported into another stylesheet with the @st-import atrule. Insert rules into imported layer /* get 'slide' keyframes definition from another stylesheet */ @st-import [keyframes(slide)] from './x.st.css'; .x { /* use in animation */ animation-name: slide; } More import examples /* map 'slide' keyframes to local name 'x-slide' */ @st-import [keyframes(slide as x-slide)] from './x.st.css'; /* import multiple keyframes */ @st-import [keyframes(slide, jump)] from './x.st.css';","s":"Import and Export","u":"/docs/references/keyframes","h":"#import-and-export","p":395},{"i":402,"t":"A Keyframes definition can be accessed for dynamic styles using the keyframes mapping on the Stylable runtime stylesheet: import { keyframes } from './sheet.st.css'; // map to target namespaced keyframes keyframes.jump;","s":"Runtime","u":"/docs/references/keyframes","h":"#runtime","p":395},{"i":404,"t":"Stylable automatically namespaces any keyframes name according to the stylesheet it is defined in: @keyframes slide {} .x { animation-name: slide; } /* OUTPUT */ @keyframes NAMESPACE__slide {} .x { animation-name: NAMESPACE__slide; }","s":"Namespace","u":"/docs/references/keyframes","h":"#namespace","p":395},{"i":406,"t":"In some cases the default namespace behavior is unwanted. In such cases, st-global can be used to mark a keyframes definition as global: @keyframes st-global(slide) {} .x { animation-name: slide; } /* OUTPUT */ @keyframes slide {} .x { animation-name: slide; /* no namespace */ }","s":"Disable namespace","u":"/docs/references/keyframes","h":"#disable-namespace","p":395},{"i":408,"t":"In CSS, @layer provides a way to group rules together in order to override other rules for better control of the styling order. This page goes over how Stylable handles @layer, for more details about the language feature itself, check out the following resources: MDN @layer The Future of CSS: Cascade Layers by Bramus CSS cascade spec","s":"Layer","u":"/docs/references/layer","h":"","p":407},{"i":410,"t":"Layer order definition @layer base, layout, theme; Layer style definition @layer theme { /* layer style rules */ } Nested style definition @layer theme { @layer app { /* layer style rules */ } } /* equivalent to */ @layer theme.app { /* layer style rules */ }","s":"Syntax","u":"/docs/references/layer","h":"#syntax","p":407},{"i":412,"t":"An exported layer definition can be imported into another stylesheet with the @st-import atrule. Insert rules into imported layer /* get base layer definition from another stylesheet */ @st-import [layer(base)] from './x.st.css'; /* insert rules into layer */ @layer base { /* layer style rules */ } More import examples /* map 'base' layer to local name 'x-base' */ @st-import [layer(base as x-base)] from './x.st.css'; /* import multiple layers */ @st-import [layer(layerA, layerB)] from './x.st.css';","s":"Import and Export","u":"/docs/references/layer","h":"#import-and-export","p":407},{"i":414,"t":"CSS native @import can be used to import a stylesheet into a layer: /* import the content of 'other.css' in the base layer */ @import url(./x.css) layer(base); caution While Stylable collects and namespaces layer definitions from native CSS imports, it does not handle bundling of them at current time, and they are not recommended for use.","s":"Native CSS import","u":"/docs/references/layer","h":"#native-css-import","p":407},{"i":416,"t":"A layer can be accessed for dynamic styles using the layers mapping on the Stylable runtime stylesheet: import { layers } from './sheet.st.css'; // map to target namespaced layer layers['layer-name'];","s":"Runtime","u":"/docs/references/layer","h":"#runtime","p":407},{"i":418,"t":"Stylable automatically namespaces any layer name according to the stylesheet it is defined in: Source: @layer base, layout, theme; Output: @layer ns__base, ns__layout, ns__theme;","s":"Namespace","u":"/docs/references/layer","h":"#namespace","p":407},{"i":420,"t":"In some cases the default namespace behavior is unwanted, for example when a layer is external and not defined or imported by Stylable. In such cases, st-global can be used to mark a layer definition as global: /* keep the layer name as-is with no namespace */ @layer st-global(external); Once a layer is marked as global, all references to that layer transpile to the un-namespaced name (nested or imported). Notice that st-global is not supported in nested definitions (e.g. a.st-global(external).c) or native import (e.g. @import url() layer(st-global(external))), but marking the layer as global in a later definition will keep it global everywhere.","s":"Disable namespace","u":"/docs/references/layer","h":"#disable-namespace","p":407},{"i":422,"t":"The Stylable -st-extends declaration is used to indicate that a CSS class inherits from a stylesheet or another class. It assumes both the class and the extended reference will share the same element in the DOM, and enables the targeting of inner parts and states as an API with validations and completions.","s":"Extend","u":"/docs/references/extend-stylesheet","h":"","p":421},{"i":424,"t":"Use -st-extends with the value of a component stylesheet root to indicate that a class is used to customize the component, or with a value of another class to compose them (usually a utility class). Extend a stylesheet root @st-import Comp from './comp.st.css'; .x { -st-extends: Comp; } Extend a class @st-import [class] from './comp.st.css'; .x { -st-extends: class; } Local extends Extend is not limited to imported definitions, a class can extend other local classes, as well as the local stylesheet root.","s":"Syntax","u":"/docs/references/extend-stylesheet","h":"#syntax","p":421},{"i":426,"t":"The following example illustrates a page with a customized main gallery instance. slider-gallery.st.css /* gallery style API */ .root { -st-states: pos(enum(start, middle, end)); } .prevBtn {} .nextBtn {} Customizes the main gallery by importing the gallery component stylesheet into the page stylesheet, create a mainGallery class, extend it with the value of the gallery stylesheet, and then target it's inner custom pseudo-elements and custom pseudo-states. page.st.css @st-import SliderGallery from './slider-gallery.st.css'; .mainGallery { -st-extends: mainGallery; /* mainGallery is a SliderGallery */ } .mainGallery::nextbtn { /* customize mainGallery inner nextBtn part */ } .mainGallery:pos(end)::nextbtn { /* customize mainGallery in end position inner nextBtn part */ } In the view, set the mainGallery class on the gallery instance. page.jsx import SliderGallery from './slider-gallery'; import { classes } from './page.st.css'; const Page = () => {
        /* customize SliderGallery as mainGallery */
        ; };","s":"Example","u":"/docs/references/extend-stylesheet","h":"#example","p":421},{"i":428,"t":"There is a slight difference between the runtime output when extending a stylesheet root and extending a normal CSS class. A CSS class is composed to the runtime class name while a stylesheet root is not. This is because Stylable assumes that a stylesheet root will be set within the component that is being extended and composing it from the outside is redundant. page.st.css @st-import Gallery from './gallery.st.css'; @st-import [center] from './utils.st.css'; .variant { -st-extends: Gallery; } .title { -st-extends: center; } page.jsx import { classes } from './page.st.css'; classes.variant // \"page__variant\" classes.title // \"page__title utils__center\" unsupported multiple extends Stylable currently does not support extending multiple classes. We hope to introduce this capability in the future.","s":"Runtime - root vs class","u":"/docs/references/extend-stylesheet","h":"#runtime---root-vs-class","p":421},{"i":430,"t":"-st-extends provides access to inner parts and states, but does not modify the namespace of the extending class. page.st.css @st-import Gallery from './gallery.st.css'; .variant { -st-extends: Gallery; } .variant {} .variant::navBtn {} .variant:loading {} /* OUTPUT */ .page__variant {} .page__variant .gallery__navBtn {} .page__variant.gallery--loading {}","s":"Namespace","u":"/docs/references/extend-stylesheet","h":"#namespace","p":421},{"i":432,"t":"Stylable mixins enable you to reuse complex styles and CSS behaviors, defined in CSS or Javascript, and apply them to any style-rule during build time. Here are some examples of when you can use mixins: Presets/Variants - create reusable pieces of styling CSS Layouts - easily describe complex layouts Effects - easily describe complex effects Macros - use code to define the CSS macros you need tip If you need to return only a single declaration value using code, we recommend instead using formatters.","s":"Mixins","u":"/docs/references/mixins","h":"","p":431},{"i":434,"t":"Any CSS stylesheet, class or element that is defined in a Stylable CSS file can be used as a mixin source. You can use either a local class or element, or import the mixin from a different stylesheet. In the following example, a locally defined class is used as a mixin in the same stylesheet. .style-mixin { color: green; background: yellow; } .someClass { -st-mixin: style-mixin; } /* CSS output */ .someClass { color: green; /* from local mixin */ background: yellow; /* from local mixin */ } Here is an example of a Stylable CSS file that is imported and mixed into the classes of a different stylesheet. The .rootMixedIn class as a stylesheet and classMixedIn as a class. /* mixins.st.css */ .root { color: purple; } .someClass { color: green; } /* example.st.css - imports the above mixin */ @st-import MixRoot, [someClass] from \"./mixins.st.css\"; .rootMixedIn { -st-mixin: MixRoot; /* stylesheet mixin */ } .classMixedIn { -st-mixin: someClass; /* class mixin */ } /* CSS output */ .rootMixedIn { color: purple; /* from stylesheet mixin */ } .rootMixedIn .someClass { /* ruleset added as a result of the stylesheet mixin */ color: green; } .classMixedIn { color: green; /* from class mixin */ }","s":"CSS mixins","u":"/docs/references/mixins","h":"#css-mixins","p":431},{"i":436,"t":"CSS mixins can accept named parameters in the following format: mixin(variableName valueOverride, variableName2 valueOverride2) Multiple variables can be comma separated or written on multiple lines: mixin ( variableName valueOverride, variableName2 valueOverride2 ) Using parameters in a mixin enables you to override specific variables inside of a mixin before they are applied. Here is an example of using a variable in a CSS mixin and how it can be overridden by the mixin's parameter value. :vars { color1: green; } .classToMixin { background: value(color1); } .targetClass { -st-mixin: classToMixin(color1 orange); } /* CSS output */ .classToMixin { background: green; /* from local class */ } .targetClass { background: orange; /* from mixin with override */ }","s":"Variable overrides","u":"/docs/references/mixins","h":"#variable-overrides","p":431},{"i":438,"t":"Partial CSS Mixins (-st-partial-mixin) is a continuation of the idea of mixins with parameter overrides. (as described above) Where a regular -st-mixin includes all declarations inside the targeted mixed-in class, partial mixins enable you to pass through overriding variable values and mix in only declarations that would be affected by such an override. For a partial mixin to work, at least one overriding variable must be provided, additional ones being optional. Example​ :vars { color1: red; color2: green; } .my-mixin { background: value(color1); color: value(color2); } .container { -st-partial-mixin: my-mixin(color1 gold); } /* output */ .container { background: gold; } A partial mixin will include any declaration in the mixed-in class (or rules containing the mixed-in class) that contains a variable usage that will be overridden. Any other variables not overridden inside the mixed in declaration will retain their original values. Example​ :vars { color1: red; color2: green; size1: 2px; } .my-mixin { background: value(color1); color: value(color2); } .my-mixin .part { border: value(size1) solid value(color2); } .container { -st-partial-mixin: my-mixin(color1 gold, size1 5px); } /* output */ .container { background: gold; } .container .part { border: 5px solid green; }","s":"Partial CSS mixins","u":"/docs/references/mixins","h":"#partial-css-mixins","p":431},{"i":440,"t":"JavaScript mixins allow you to create complex structures in CSS based on the arguments passed to the mixin. A JavaScript mixin returns a CSS fragment which can contain multiple declarations with optional sub style-rules. Arguments are passed to the mixin as a string argument and it's the mixin's responsibility to parse them. Here is an example of a mixin receiving multiple arguments and returning multiple declarations into the target ruleset. /* file my-mixin.js */ module.exports = function colorAndBg([color, bgColor]) { /* arguments: array of string types */ return { color: color, background: bgColor, }; }; /* file example.st.css */ @st-import colorAndBg from \"./my-mixin\"; .codeMixedIn { -st-mixin: colorAndBg(green, orange); font-family: monospace; } /* CSS output */ .codeMixedIn { color: green; /* from JS mixin */ background: orange; /* from JS mixin */ font-family: monospace; /* from local class */ }","s":"JavaScript mixins","u":"/docs/references/mixins","h":"#javascript-mixins","p":431},{"i":442,"t":"Mixins can return multiple style-rules that are mixed into the target stylesheet. These style-rules can be written with the following syntax options: selector - resulting ruleset is appended as a descendent selector to its mixed in target (in below example .otherClass) &selector - resulting ruleset references the parent selector into which it was mixed in (in below example &:hover, the parent selector is .codeMixedIn) /* file my-mixin.js */ module.exports = function complexMixin([color, bgColor]) { /* arguments: array of string types */ return { color: color, background: bgColor, '&:hover': { color: 'gold', }, '.otherClass': { color: 'purple', }, }; }; /* file example.st.css */ @st-import complexMixin from \"./my-mixin\"; .codeMixedIn { -st-mixin: complexMixin(green, orange); font-family: monospace; } /* CSS output */ .codeMixedIn { color: green; /* from JS mixin */ background: orange; /* from JS mixin */ font-family: monospace; /* from local class */ } .codeMixedIn:hover { /* from JS mixin with & */ color: gold; } .codeMixedIn .otherClass { /* from JS mixin with appended selector */ color: purple; }","s":"Create multiple style-rules","u":"/docs/references/mixins","h":"#create-multiple-style-rules","p":431},{"i":444,"t":"Mixins can add CSS declarations to the CSS ruleset to which they are applied. Rules are added at the position in the CSS where the -st-mixin is declared. Any selectors that are appended as a result of the mixin are added directly after the ruleset that the mixin was applied to. You can apply multiple mixins from either CSS or JavaScript, or both separated by comma -st-mixin: mixinA, mixinB. Multiple mixins are applied according to the order that they are declared left to right.","s":"How mixins are applied","u":"/docs/references/mixins","h":"#how-mixins-are-applied","p":431},{"i":446,"t":"Take a look at these considerations before working with Stylable mixins.","s":"Considerations when using mixins","u":"/docs/references/mixins","h":"#considerations-when-using-mixins","p":431},{"i":448,"t":"You can escape special characters by wrapping them with quotes or using a backslash (\\). Example: .x { /* use quotations to include comma */ -st-mixin: mix(300, 'xx,x'); /* [\"300\", \"xx,x\"] */ } They can also be used to include quotes or backslashes as part of the parameter. .y { /* escape slashes */ -st-mixin: mix(300, '\"xxx\"'); /* [\"300\", \"\\\"xxx\\\"\"] */ }","s":"Escape special characters","u":"/docs/references/mixins","h":"#escape-special-characters","p":431},{"i":450,"t":"It is possible to reach a state where you have circular references between mixins. These cannot be resolved, and a diagnostics warning is issued in your Stylable code intelligence and build process.","s":"Circular references","u":"/docs/references/mixins","h":"#circular-references","p":431},{"i":453,"t":"When you develop your application in Stylable, you can manually namespace classes so you can more easily identify them when they are displayed in the CSS output. You do this in your Stylable stylesheet by adding the syntax @st-namespace to provide better display names to your classes. x.st.css @st-namespace \"y\"; .root { color: red; } /* OUTPUT */ .y__root {/* use @st-namespace value instead of file name */ color: red; } note Because @st-namespace is not unique, the scoped name may still have a suffix added to it to make it unique during build.","s":"Manual Namespace","u":"/docs/references/namespace","h":"#manual-namespace","p":451},{"i":456,"t":"Stylable is usually consumed through one of its available integration, for more specific or advanced use-cases, the programmatic API can be used for greater control on how Stylable operates. note The APIs described here are treated as stable, and available for use. Any other API exposed by Stylable not described here may changed, and should not be dependant on. The Stylable class provided from @stylable/core requires configuration to initialize. Example: Initialize Stylable instance import fs from 'node:fs'; import { Stylable } from '@stylable/core'; // minimal required configuration Stylable({ fs, projectRoot: __dirname });","s":"Stylable instance","u":"/docs/references/programmatic-api","h":"#stylable-instance","p":454},{"i":458,"t":"Option Type Default Value Description fs MinimalFS required Filesystem instance to use projectRoot string required The project root directory path mode string \"production\" Development or production mode resolveNamespace ResolveNamespace default resolver depends on running context Function to determine namespacing resolveModule ModuleResolver enhanced-resolve Module resolver to be used for all import paths and url() requests resolveOptions alias?: any; symlinks?: boolean; {} Options that are passed to the default module resolver requrieModule RequireModule none Require module that receives a path, and attempts to return a module","s":"Configuration","u":"/docs/references/programmatic-api","h":"#configuration","p":454},{"i":460,"t":"Stylable minimal required file system interface: MinimalFS interface interface MinimalFS { statSync: (filePath: string) => { mtime: Date }; readFileSync: (filePath: string, encoding: 'utf8') => string; readlinkSync: (filePath: string) => string; }","s":"MinimalFS","u":"/docs/references/programmatic-api","h":"#minimalfs","p":454},{"i":462,"t":"Provide exact control of the namespacing mechanism by providing a function that accepts: namespace - a stylesheet source namespace - determined by the @st-namespace if exists, and falls back to the filename origin - an origin path - path to the source stylesheet This function will then return a string to be used as the \"namespace\" for stylesheet definitions. Basic example​ An example for a basic namespace resolver, that generates unique verbose namespaces based on the component namespace and origin path of the stylesheet. Resolve namespace example const resolveNamespace: ResolveNamespace = (namespace: string, origin: string): string { return namespace + hash(origin); } comp.st.css .root {} /* OUTPUT */ .comp1169059893__root {}","s":"ResolveNamespace","u":"/docs/references/programmatic-api","h":"#resolvenamespace","p":454},{"i":464,"t":"Override Stylable's default module resolver, to control path resolution according to your projects' needs. The default module resolver is a function that accepts two arguments: directoryPath - the directory path to resolve from request - the module request to resolve const fs = require('node:fs'); const { createDefaultResolver, Stylable } = require('@stylable/core'); const defaultResolver = createDefaultResolver(fs); const stylable = new Stylable({ projectRoot: 'path/to/project/root', filesystem: fs, resolveModule: (directoryPath, request) => { if (request.startsWith('my-custom-module')) { return '/path/to/my-custom-module'; } return defaultResolver(directoryPath, request); }, });","s":"ModuleResolver","u":"/docs/references/programmatic-api","h":"#moduleresolver","p":454},{"i":466,"t":"Defines a function to require imported JavaScript modules from a path, used when a JavaScript Mixins or Formatters is used within a Stylable stylesheet. NodeJS Memory FS const fs = require('node:fs'); const { Stylable } = require('@stylable/core'); const stylable = new Stylable({ projectRoot: 'path/to/project/root', filesystem: fs, requireModule: require }) const { Stylable } = require('@stylable/core'); const stylable = new Stylable({ projectRoot: 'path/to/project/root', filesystem: memoryFS, requireModule(path: string) { const _module = { id, exports: {}, }; try { // create a module evaluation function const fn = new Function( 'module', 'exports', 'require', fs.readFileSync(id, { encoding: 'utf8', flag: 'r' }) ); // evaluate the module fn(_module, _module.exports, requireModule); } catch (e) { throw new Error('Cannot require file: ' + id + 'reason: ' + e.message); } return _module.exports; } })","s":"RequireModule","u":"/docs/references/programmatic-api","h":"#requiremodule","p":454},{"i":468,"t":"In addition to CSS's native pseudo-classes, like :hover and :nth-child(), Stylable allow you to define custom pseudo-classes so that you can apply styles to your components based on state. Let's say you want a component to have different styling applied to it when its content is loading. You can define loading as a custom pseudo-class and toggle it in your component. This page goes over how Stylable handles custom pseudo-classes, for more details about the language feature itself, checkout the following resources: MDN pseudo-class pseudo-class in spec","s":"Pseudo-Class","u":"/docs/references/pseudo-classes","h":"","p":467},{"i":470,"t":"The Stylable -st-states declaration is used on a class selector to provide a list of the possible custom pseudo-classes that can later be targeted from CSS and controlled from JavaScript. list of custom states .x { -st-states: stateA, stateB; } allowed context -st-states is only allowed in a rule with a single class selector to indicate custom pseudo classes for that class.","s":"Syntax","u":"/docs/references/pseudo-classes","h":"#syntax","p":467},{"i":472,"t":"To define a custom state that can be either on or off, provide state definitions with a single ident as the name for the state, then target the state using a pseudo-class. .x { /* define 2 boolean states on 'x' */ -st-states: toggled, loading; } /* target single custom state */ .x:toggled {} /* target multiple custom states */ .x:toggled:loading {}","s":"Boolean","u":"/docs/references/pseudo-classes","h":"#boolean","p":467},{"i":474,"t":"A custom state with a restricted option list that can target one of the options using a pseudo-class selector with a matching parameter and an optional default value. .x { /* define a 'size' custom state with 3 options and a 'color' state with options and a default 'green' value */ -st-states: size(enum(small, medium, large)), color(enum(reg, green, blue)) green; } /* target an element with a size of `medium` */ .x:size(medium) {} /* INVALID! - 'huge' is not a possible value for size */ .x:size(huge) {} /* INVALID! - parameter is required for size */ .x:size {} /* VALID! - same as ':color(green)' */ .x:color {}","s":"Enum","u":"/docs/references/pseudo-classes","h":"#enum","p":467},{"i":476,"t":"A custom state that can accept a string parameter value. .x { /* define 'category' custom state that accepts a string parameter */ -st-states: category(string); } /* target an element with state category='kitchen' */ .x:category(kitchen) {} /* target an element with state category='office' */ .x:category(office) {} Optional string validation​ There are several options that can be used to validate the potential string parameter input: minLength - validates min length of input maxLength - validates max length of input contains - validates substring value exist in input regex - validates input against a regular expression To set validations on a string state type, call the string as a function and pass a list of validations. string validation definition examples .a { /* validates input has min/max length and has the string 'user' in it */ -st-states: x(string(minLength(5), maxLength(10), contains('user'))); } .b { /* validates input begins with 'user' */ -st-states: x(string(regex('^user'))); }","s":"String","u":"/docs/references/pseudo-classes","h":"#string","p":467},{"i":478,"t":"A custom state that can accept a number parameter value. .a { /* define 'ranking' custom state that accepts a number parameter */ -st-states: ranking(number); } /* target an element with a state rankin='5' */ .a:ranking(5) {} Optional number validation​ There are several options that can be used to validate the potential number parameter input: min - validates min size of input max - validates max size of input multiplyOf - validates input is multiply of a given value number validation definition example .a { /* validates the targeting number argument */ -st-states: x(number(min(2), max(6), multipleOf(2))); } /* valid arguments */ .a:x(2) {} .a:x(4) {} .a:x(6) {} /* INVALID! - \"multipleOf(2)\" */ .a:x(3) {} .a:x(5) {} /* INVALID! - \"min(2)\" and \"max(6)\" */ .a:x(1) {} .a:x(7) {}","s":"Number","u":"/docs/references/pseudo-classes","h":"#number","p":467},{"i":480,"t":"When using -st-extends to extend another stylesheet or class, states definitions are inherited, but can also be overridden at any level. base.st.css .root { /* define states 'a' and 'b' for the root of base stylesheet */ -st-states: a, b; } extend.st.css @st-import Base from './base.st.css'; .root { /* inherits states 'a' and 'b' */ -st-extends: Base; /* define states 'c' and 'b' (override 'b' from 'Base') */ -st-states: c, b; } .root:a {} .root:b {} .root:c {} /* OUTPUT */ .extend__root.base--a {} /* 'a' defined in base */ .extend__root.extend--b {} /* 'b' defined in base, but overridden in extend */ .extend__root.extend--c {} /* 'c' defined in extend */ Native pseudo-class override You can override the behavior of native pseudo-classes. This can enable you to write polyfills for forthcoming CSS pseudo-classes to ensure that when you define a name for a custom pseudo-class, if there are clashes with a new CSS pseudo-class in the future, your app's behavior does not change. We don't recommend you to override an existing CSS pseudo-class unless you want to drive your teammates insane.","s":"State inheritance","u":"/docs/references/pseudo-classes","h":"#state-inheritance","p":467},{"i":482,"t":"To activate a custom state, use the cssStates or st() function to generate the active CSS classes states. import { st, classes } from './sheet.st.css'; // active states st(classes.part, { isOn: true, // boolean size: 'small' // string or enum place: 1 // number state }); // un-active states - only 'part' class st(classes.part, { isFirst: false, // boolean size: undefined // string or enum place: undefined // number });","s":"Runtime","u":"/docs/references/pseudo-classes","h":"#runtime","p":467},{"i":484,"t":"Stylable generates namespaced CSS classes for custom states: .x:bool {} .x:enum(option1) {} .x:string(word) {} .x:number(55) {} /* OUTPUT */ .NAMESPACE__x.NAMESPACE--bool {} .NAMESPACE__x.NAMESPACE---enum-7-option1 {} .NAMESPACE__x.NAMESPACE---string-4-word {} .NAMESPACE__x.NAMESPACE---number-2-55 {}","s":"Namespace","u":"/docs/references/pseudo-classes","h":"#namespace","p":467},{"i":486,"t":"In some cases the default way Stylable transforms a state into a class is not the desired behavior, for example when writing style interface to an external view that might mark state as an attribute, For this mapped state can be used to transform the state into a another selector. To define a global mapped state, pass a selector as a string instead of a type: .x { -st-states: toggled('.on'), loading('[dataSpinner]'); } .x:toggled {} .x:loading {} /* OUTPUT */ .NAMESPACE__x.on {} .NAMESPACE__x[dataSpinner] {} Additionally a single parameter can be defined after the selector string and referenced in the selector string using $0: .x { -st-states: size('[size=\"$0\"]', enum(small, medium, large)); } .x:size(small) {} /* OUTPUT */ .NAMESPACE__x[size='small'] {}","s":"Map to selector","u":"/docs/references/pseudo-classes","h":"#map-to-selector","p":467},{"i":488,"t":"Every Stylable stylesheet has a reserved class called root that matches the root node of the component. The root class is used to signify the component top-level node where a new namespace scope is created. .root { /* set component background */ background: white; } /* OUTPUT */ .NAMESPACE__root { background: white; }","s":"Root","u":"/docs/references/root","h":"","p":487},{"i":490,"t":"The root of a stylesheet can be referenced in other stylesheets by using the default import. page.st.css @st-import DropDown from './dropdown.st.css'; /* style any dropdown component background nested under the page root */ .root DropDown { background: salmon; } /* OUTPUT */ .page__root .dropdown__root { background: salmon; }","s":"Default export","u":"/docs/references/root","h":"#default-export","p":487},{"i":492,"t":"Each component is responsible for placing the root class on its top-level node using the runtime API.","s":"Runtime","u":"/docs/references/root","h":"#runtime","p":487},{"i":494,"t":"comp.jsx import { classes } from './comp.st.css'; function Comp() { return
        ; }","s":"simple example","u":"/docs/references/root","h":"#simple-example","p":487},{"i":496,"t":"The following example uses the st() function to add multiple classes: the component root class state classes classes passed from props for customizations comp.jsx import { st, classes } from './comp.st.css'; function Comp({ className }) { return (
        ); }","s":"root + state + customize","u":"/docs/references/root","h":"#root--state--customize","p":487},{"i":498,"t":"Stylable scope enables you to wrap several style-rules using a single directive. The scoping directive receives any valid Stylable selector to use for its scoping. Stylable scoping directive is similar in its behavior to CSS nesting, but can only be applied to a single level.","s":"Scope","u":"/docs/references/st-scope","h":"","p":497},{"i":500,"t":"/* entry.st.css */ @st-scope .root { input { color: purple; } } /* output */ .entry__root input { color: purple; }","s":"Syntax","u":"/docs/references/st-scope","h":"#syntax","p":497},{"i":502,"t":"There are many possible patterns that can be used to theme a site or application in CSS. Stylable scoping capability serves as syntax sugar to allow an easier theme implementation. Below are several examples for how theming can be done. Creating a theme​ In this example, we're representing a dark theme as a stylesheet. Creating your overriding rules under that Stylesheet's symbol and apply it to the relevant part of your DOM. In this theme implementation we are targeting three components and overriding their default look. /* dark-theme.st.css */ @st-import App, [Button, DropDown] from \"./index.st.css\"; @st-scope .root { App { border-color: darkgrey; } Button { background: darkgreen; } DropDown { background: darkgrey; color: beige; } } Extending a theme​ In this example, we are extending our previously created dark theme, with a specific override for the Gallery component. @st-import Gallery from \"./gallery.st.css\"; @st-import DarkTheme from \"./dark.st.css\"; @st-scope DarkTheme { DropDown { color: yellow; /* overriding DarkTheme color, perserving background */ } Gallery { background: darkgrey; } } Theming with mixins​ In this file, we are creating pre-designed flavors that uses Stylable variables to determine their styling. /* flavors.st.css */ @st-import [Button, UserForm] from \"./index.st.css\"; :vars { background: white; text: black; bordercolor: green; } .button-flavor { -st-extends: Button; background: value(background); color: value(text); } .userForm-flavor { -st-extends: UserForm; background: value(background); color: value(text); border: 1px solid value(borderColor); } In this example, we use our existing flavors from above to customize our components look under the dark theme. @st-import [UserForm, Button] from \"./index.st.css\"; @st-import [button-flavor, userForm-flavor] from \"./flavors.st.css\"; @st-scope .root { Button { -st-mixin: button-flavor(background black, text white); } UserForm { -st-mixin: userForm-flavor(background black, text white, borderColor #f4f4f4); } }","s":"Theming with scope","u":"/docs/references/st-scope","h":"#theming-with-scope","p":497},{"i":504,"t":"Imported Stylable stylesheets in JavaScript contain minimal runtime code to help define the structure and state of the component. /* index.jsx - stylesheet runtime api */ import { st, // runtime utility function classes, // class mapping vars, // custom properties mapping stVars, // stylable build-time variable values cssStates, // utility function for setting stylable states keyframes, // keyframes mapping layers // layer mapping containers,// container mapping } from \"style.st.css\";","s":"Runtime","u":"/docs/references/runtime","h":"","p":503},{"i":506,"t":"Any namespaced symbols, defined in the stylesheet, are exposed on maps from their local name to their target namespaced name: import { classes, vars, keyframes, layers, containers } from 'style.st.css'; // class classes.root; // \"style__root\" classes.label; // \"style__label\" classes.icon; // \"style__icon\" classes['dashed-part']; // \"style__dashed-part\" // custom property vars.color1 // \"--style-color1\" // keyframes keyframes.slide // \"style__slide\" // layers layers.theme // \"style__theme\" // containers containers.panel // \"style__panel\" note The root class is available even when it is not explicitly defined in the stylesheet.","s":"Manual mapping","u":"/docs/references/runtime","h":"#manual-mapping","p":503},{"i":508,"t":"Local stylesheet build vars are exported with their set value. :vars { bg: black; color: gold; } import { stVars } from 'style.st.css'; stVars.bg; // \"black\" stVars.color; // \"gold\"","s":"Build vars","u":"/docs/references/runtime","h":"#build-vars","p":503},{"i":510,"t":"A utility function for concatenating classes and activating custom states. the optional second argument can receive either a state activation or another class to concatenate multiple classes can be added with additional arguments Multiple classes import { st, classes } from 'style.st.css'; // namespaced part class + additional class st(classes.part, 'additional'); // \"style__part additional\" // namespaced part class + multiple classes st(classes.part, 'a', 'b', 'c'); // \"style__part a b c\" // undefined is ignored st(classes.part, 'a', undefined, 'c'); // \"style__part a c\" State activation import { st, classes } from 'style.st.css'; // namespaced a + isOn boolean state st(classes.a, { isOn: true }); // \"style__a style--isOn\" // namespaced a + multiple states st(classes.a, { x: true, y: false }); // \"style__a style--x\" // namespaced a + parameter st(classes.a, { rank: 'first' }); // \"style__a style--rank-5-first\" State activation + additional classes import { st, classes } from 'style.st.css'; // namespaced a + isOn state + x class st(classes.a, { isOn: true }, 'x'); // \"style__a style--isOn x\"","s":"st() function","u":"/docs/references/runtime","h":"#st-function","p":503},{"i":512,"t":"The cssStates function can be used to produce just the active custom state classes. The function accepts a map of local state names and generates a string with concatenated class names used to mark the element's state. import { cssStates } from 'style.st.css'; // single state cssStates({ selected: true }); // \"style--selected\" // un-active state cssStates({ selected: false }); // \"\" // string/enum state cssStates({ rank: 'first' }); // \"style--rank-5-first\" // multiple states cssStates({ a: true, b: false, c: true }); // \"a c\"","s":"Custom state mapping","u":"/docs/references/runtime","h":"#custom-state-mapping","p":503},{"i":514,"t":"A CSS type selector is used to target DOM elements according to their tag name. This page goes over how Stylable handles type selector, for more details about the language feature itself, checkout MDN type selector.","s":"Type Selector","u":"/docs/references/type-selectors","h":"","p":513},{"i":517,"t":"A native element behaves exactly as it does in CSS, and requires no special treatment in Stylable. /* scoped under local class */ .root div {} /* scoped to local class */ div.root {}","s":"Native element","u":"/docs/references/type-selectors","h":"#native-element","p":513},{"i":519,"t":"Use a capital first letter to refer to a default import of a stylesheet root. @st-import Comp from './comp.st.css'; /* style all Comp nested under root */ .root Comp {}","s":"Component element","u":"/docs/references/type-selectors","h":"#component-element","p":513},{"i":521,"t":"Stylable validates that a type selector is scoped to the stylesheet it is in. To target a type selector, compound it or scope it under a local class in order to avoid styling unrelated elements outside the scope of the stylesheet. /* error - unscoped selector */ div {} /* valid */ .root div {} div.root {} reuse scope Scope rules with the @st-scope at-rule to minimize selector verbosity. @st-scope .root { div {} }","s":"Scoping","u":"/docs/references/type-selectors","h":"#scoping","p":513},{"i":523,"t":"Component elements, with capital first letter, can be exported from a stylesheet if used in a selector. You can import them within the @st-import named import brackets. index.st.css @st-import Button from './button.st.css'; @st-import Menu from './menu.st.css'; .root Button {} .root Menu {} theme.st.css @st-import [Button, Menu] from './index.st.css'; @st-scope .root { /* customize all buttons nested in theme root */ Button {} /* customize all menus nested in theme root */ Menu {} }","s":"Import and Export","u":"/docs/references/type-selectors","h":"#import-and-export","p":513},{"i":525,"t":"Elements are not available on the Stylable stylesheet runtime.","s":"Runtime","u":"/docs/references/type-selectors","h":"#runtime","p":513},{"i":527,"t":"Native elements are not namespaced. However, if an element originates from a class, like a component element default import, then it is transformed during build. entry.st.css @st-import Button from './button.st.css'; .root Button {} .root div {} /* OUTPUT */ .entry__root .button__root {} .entry__root div {}","s":"Namespace","u":"/docs/references/type-selectors","h":"#namespace","p":513},{"i":529,"t":"Stylable supports usage of url functions to use assets as you normally would in CSS. The value passed to the url() function is resolved differently in CSS as comapred to the Node request resolution algorithm, used for Stylable stylesheet and symbol resolutions. The url() function has no notion of external packages or dependencies.","s":"url()","u":"/docs/references/using-external-assets","h":"","p":528},{"i":531,"t":"In order to import url() assets from dependencies inside your node_modules directory, Stylable supports the ~ URL prefix. .root { /* resolves as the node request: \"my-package/asset.png\" */ background: url(~my-package/asset.png); } .root { /* resolves as the node request: \"./my-package/asset.png\" */ background: url(my-package/asset.png); }","s":"Resolving 3rd-party assets","u":"/docs/references/using-external-assets","h":"#resolving-3rd-party-assets","p":528},{"i":533,"t":"In addition to CSS's native pseudo-elements, like ::before and ::backdrop, Stylable allow you to define custom pseudo-elements so that you can target and apply styles to inner parts of your components. This page goes over how Stylable handles custom pseudo-elements, for more details about the language feature itself, checkout the following resources: MDN pseudo-element pseudo-element in spec","s":"Pseudo-Element","u":"/docs/references/pseudo-elements","h":"","p":532},{"i":535,"t":"To target an internal element, Use the pseudo-element prefix :: with the part name. Component::firstlevel::secondlevel {} deep pseudo-elements Custom pseudo-elements are not limited to the end of a selector like native pseudo-elements, and can be chained. For example, you can access the label of a navigation button from a gallery: Gallery::navBtn::label","s":"Syntax","u":"/docs/references/pseudo-elements","h":"#syntax","p":532},{"i":537,"t":"Customizing all component instances nested under a stylesheet using the imported component type selector. @st-import Comp from './comp.st.css'; /* target Comp internal part */ .root Comp::part {/* customize */}","s":"Style a component","u":"/docs/references/pseudo-elements","h":"#style-a-component","p":532},{"i":539,"t":"Customizing a variant class of a component by extending a class with the component stylesheet. page.st.css @st-import Comp from './comp.st.css'; .compVariant { /* set compVariant to inherit from Comp */ -st-extends: Comp; } /* target compVariant internal part (inherited from Comp) */ .compVariant::part {/* customize */} Then set the variant class to the component instance. page.jsx import Comp from './comp'; import { classes } from './page.st.css'; const Page = () => { return (
        /* customize Comp with compVariant class */
        ); };","s":"Style a variant","u":"/docs/references/pseudo-elements","h":"#style-a-variant","p":532},{"i":541,"t":"Any CSS class that is exported from a stylesheet is accessible as a pseudo-element. comp.st.css /* available as ::part for this stylesheet */ .part {} Additionally a custom-selector defined within a stylesheet is exposed as a custom pseudo-element and will take precedence over a class with the same name. comp.st.css /* available as ::part for this stylesheet and preserves the direct child combinator when used */ @custom-selector :--part .root > .part; Native pseudo-element override Override of native pseudo-elements is possible, however it is strongly discouraged.","s":"Define","u":"/docs/references/pseudo-elements","h":"#define","p":532},{"i":543,"t":"An extending stylesheet root automatically inherits any pseudo-elements from the extended definition, and can then override them by defining its own public parts.","s":"Element inheritance","u":"/docs/references/pseudo-elements","h":"#element-inheritance","p":532},{"i":545,"t":"Custom pseudo-elements are transformed in build-time to target the internal selector they represent. comp.st.css .part {} @custom-selector :--directPart .root > .part; page.st.css @st-import Comp from './comp.st.css'; .root { -st-extends: Comp; } .root::part {} .root::directPart {} /* OUTPUT */ .page__root .comp__part {} .page__root > .comp__part {}","s":"Build transformation","u":"/docs/references/pseudo-elements","h":"#build-transformation","p":532},{"i":547,"t":"You can write content using GitHub-flavored Markdown syntax.","s":"Style Guide","u":"/docs/style-guide","h":"","p":546},{"i":549,"t":"To serve as an example page when styling markdown based Docusaurus sites.","s":"Markdown Syntax","u":"/docs/style-guide","h":"#markdown-syntax","p":546},{"i":554,"t":"H4 - Create the best documentation​ H5 - Create the best documentation​ H6 - Create the best documentation​","s":"H3 - Create the best documentation","u":"/docs/style-guide","h":"#h3---create-the-best-documentation","p":546},{"i":556,"t":"Emphasis, aka italics, with asterisks or underscores. Strong emphasis, aka bold, with asterisks or underscores. Combined emphasis with asterisks and underscores. Strikethrough uses two tildes. Scratch this.","s":"Emphasis","u":"/docs/style-guide","h":"#emphasis","p":546},{"i":558,"t":"First ordered list item Another item Unordered sub-list. Actual numbers don't matter, just that it's a number Ordered sub-list And another item. Unordered list can use asterisks Or minuses Or pluses","s":"Lists","u":"/docs/style-guide","h":"#lists","p":546},{"i":560,"t":"I'm an inline-style link I'm an inline-style link with title I'm a reference-style link You can use numbers for reference-style link definitions Or leave it empty and use the link text itself. URLs will automatically get turned into links. http://www.example.com/ and sometimes example.com (but not on GitHub, for example). Some text to show that the reference links can follow later.","s":"Links","u":"/docs/style-guide","h":"#links","p":546},{"i":562,"t":"Here's our logo (hover to see the title text): Inline-style: Reference-style: Images from any folder can be used by providing path to file. Path should be relative to markdown file.","s":"Images","u":"/docs/style-guide","h":"#images","p":546},{"i":564,"t":"var s = 'JavaScript syntax highlighting'; alert(s); s = \"Python syntax highlighting\" print(s) No language indicated, so no syntax highlighting. But let's throw in a tag. function highlightMe() { console.log('This line can be highlighted!'); }","s":"Code","u":"/docs/style-guide","h":"#code","p":546},{"i":566,"t":"Colons can be used to align columns. Tables Are Cool col 3 is right-aligned $1600 col 2 is centered $12 zebra stripes are neat $1 There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown. Markdown Less Pretty Still renders nicely 1 2 3","s":"Tables","u":"/docs/style-guide","h":"#tables","p":546},{"i":568,"t":"Blockquotes are very handy in email to emulate reply text. This line is part of the same quote. Quote break. This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.","s":"Blockquotes","u":"/docs/style-guide","h":"#blockquotes","p":546},{"i":570,"t":"Definition list Is something people use sometimes. Markdown in HTML Does not work very well. Use HTML tags.","s":"Inline HTML","u":"/docs/style-guide","h":"#inline-html","p":546},{"i":572,"t":"Here's a line for us to start with. This line is separated from the one above by two newlines, so it will be a separate paragraph. This line is also a separate paragraph, but... This line is only separated by a single newline, so it's a separate line in the same paragraph.","s":"Line Breaks","u":"/docs/style-guide","h":"#line-breaks","p":546},{"i":574,"t":"note This is a note tip This is a tip important This is important caution This is a caution warning This is a warning","s":"Admonitions","u":"/docs/style-guide","h":"#admonitions","p":546},{"i":576,"t":"Stylable variables provide a way to define common values to be used across the stylesheet and exposed for sharing and theming. These variables are used only during build-time and have no runtime impact. If you wish to use native dynamic variables, that can change value during runtime, see css custom properties for further details.","s":"Variables","u":"/docs/references/st-variables","h":"","p":575},{"i":578,"t":"Use the :vars top level rule to define build variables.","s":"Syntax","u":"/docs/references/st-variables","h":"#syntax","p":575},{"i":580,"t":"To define a variable, add a variable declaration within a :vars ruleset. :vars { /* define x with value green */ x: green; /* define y with value blue */ y: blue; }","s":"Define","u":"/docs/references/st-variables","h":"#define","p":575},{"i":582,"t":"To get a variable value, use the value() function with the variable name as the first argument. .a { /* evaluate in declaration value */ color: value(x); /* compose in declaration value */ background: url(a.jpg) no-repeat, url(b.jpg) repeat-x value(x); } /* set media params from a variable */ @media value(y) {}","s":"Evaluate","u":"/docs/references/st-variables","h":"#evaluate","p":575},{"i":584,"t":"Variables can be composed into a declaration value. :vars { x: green; /* define y with the value green from x */ y: value(x); /* define z with composed x value */ z: red, value(x), blue; }","s":"Compose","u":"/docs/references/st-variables","h":"#compose","p":575},{"i":586,"t":"Use st-array to define a variable that holds a list of comma separated values that can be accessed by a zero-based index as the second argument to the value() function. :vars { /* comma separated list */ colors: st-array(red, green, blue); } .a { /* access 2nd cell value */ color: value(colors, 1); /* green */ }","s":"Array","u":"/docs/references/st-variables","h":"#array","p":575},{"i":588,"t":"Use st-map to define a variable that holds key/value pairs with a space as a delimiter between them, and a comma separating each pair. These values can then be accessed by providing the key as the second argument to the value() function. :vars { /* comma separated key/value pairs */ colors: st-map( bg black, text gold, ); } .a { /* access 'text' key value */ color: value(colors, text); /* gold */ }","s":"Map","u":"/docs/references/st-variables","h":"#map","p":575},{"i":590,"t":"An exported build variable can be imported into another stylesheet with the @st-import at-rule. example2.st.css @st-import [color1] from \"./common.st.css\"; .a { /* compose color1 to border value*/ border: 10px solid value(color1); }","s":"Import and Export","u":"/docs/references/st-variables","h":"#import-and-export","p":575},{"i":592,"t":"A build variable value can be accessed using the stVars mapping on the Stylable stylesheet runtime. import { stVars } from './common.st.css'; // map from local name to value stVars.color1; // \"green\" stVars['dashed-name']; // \"blue\" local export only Only build variables that are defined by the stylesheet are exported to Javascript - imported ones are not!","s":"Runtime","u":"/docs/references/st-variables","h":"#runtime","p":575},{"i":594,"t":"experimental This API is not stable Composed data structures like st-array and st-map can be defined from Javascript. Take a look at stBorder from the @stylable/custom-value to see how it works. stBorder usage example @st-import [stBorder] from \"@stylable/custom-value\"; :vars { /* order of arguments: size style color */ myborder: stBorder(1px, solid, green); } .root { border: value(myBorder); /* 1px solid green */ background-color: value(myBorder, color); /* green */ }","s":"Custom variable","u":"/docs/references/st-variables","h":"#custom-variable","p":575}],"index":{"version":"2.3.9","fields":["t"],"fieldVectors":[["t/4",[0,2.652,1,4.663,2,0.745,3,6.462,4,3.315,5,7.254,6,7.691,7,6.462,8,10.236,9,6.462,10,6.462,11,6.462,12,6.462,13,6.462,14,6.462,15,6.462,16,6.462,17,6.462]],["t/6",[2,0.88,18,4.446,19,6.888,20,1.004,21,5.297,22,6.888,23,5.116,24,7.628,25,3.416,26,2.719,27,4.558,28,5.746]],["t/8",[0,2.406,2,0.676,20,1.025,25,2.626,26,2.09,28,5.867,29,2.09,30,3.435,31,3.922,32,3.809,33,3.264,34,3.339,35,3.698,36,4.418,37,3.933,38,3.809,39,2.667,40,3.195,41,2.511,42,1.129,43,2.342,44,2.09,45,3.809,46,4.073,47,5.867,48,5.867,49,5.295,50,5.867,51,7.033]],["t/10",[0,2.063,2,0.809,20,0.923,25,3.14,26,1.792,28,7.359,30,3.562,31,2.532,32,5.246,33,2.799,35,3.17,38,3.266,39,3.19,40,2.739,41,2.153,42,0.968,43,2.008,44,1.792,45,3.266,46,3.491,47,5.283,48,5.283,49,4.54,50,5.283,51,6.332,52,4.219,53,6.084,54,5.885,55,3.787,56,2.362,57,3.491,58,2.323,59,3.628,60,5.027]],["t/12",[20,0.958,26,2.594,45,4.728,61,5.054,62,3.965,63,5.252,64,2.24,65,4.728,66,4.242,67,5.054,68,5.252,69,2.794,70,3.536,71,3.734,72,5.054,73,3.162]],["t/14",[18,3.238,20,0.988,25,2.488,30,2.45,43,3,58,2.568,62,3.027,64,1.71,67,3.858,69,2.133,71,2.851,74,3.163,75,2.798,76,5.017,77,5.017,78,3.726,79,5.017,80,4.009,81,4.009,82,1.557,83,3.408,84,4.662,85,1.267,86,3.726,87,1.957,88,5.017,89,4.662,90,2.851,91,3.504,92,2.851,93,3.609,94,2.812,95,4.397,96,3.504,97,5.017,98,4.009,99,2.798,100,3.027,101,4.185,102,4.662]],["t/16",[18,3.356,20,0.758,25,2.578,30,2.539,43,3.072,58,2.661,62,3.137,64,1.772,67,3.999,69,2.211,71,2.954,77,5.199,78,3.862,79,5.199,80,4.155,81,4.155,82,1.613,83,3.531,84,4.832,85,1.313,86,3.862,87,2.028,88,5.199,89,4.832,90,2.954,91,3.631,92,2.954,93,3.74,94,2.88,95,4.557,96,3.631,97,5.199,98,4.155,99,2.9,100,3.137,101,4.338,102,4.832]],["t/18",[20,1.095,25,3.267,26,2.6,64,1.638,71,2.731,78,4.893,82,2.044,89,4.466,100,3.974,103,5.323,104,5.323,105,5.323,106,4.466,107,2.68,108,4.6,109,5.323,110,1.875,111,4.806,112,5.323,113,2.46,114,5.323,115,3.57,116,5.248,117,6.122,118,5.323,119,3.841,120,2.963,121,4.466,122,5.323,123,2.632,124,4.806,125,4.01,126,5.323,127,5.323,128,5.323,129,5.323,130,4.466]],["t/20",[20,1.051,31,3.067,62,3.318,69,2.338,94,2.989,95,4.819,120,3.39,131,5.11,132,5.499,133,5.11,134,6.089,135,3.638,136,5.11,137,4.394,138,5.11,139,5.499,140,4.394,141,5.499,142,5.11,143,3.956,144,6.089,145,4.819,146,3.067,147,6.089,148,6.089,149,6.015,150,5.499,151,4.587,152,4.587,153,6.089]],["t/22",[6,4.788,20,1.006,25,3.425,26,2.034,65,3.707,69,2.191,70,2.773,71,2.928,72,3.963,93,3.707,94,2.863,106,4.788,107,2.873,120,3.176,140,4.118,154,4.354,155,5.153,156,5.311,157,5.706,158,5.706,159,3.827,160,5.761,161,4.788,162,6.905,163,3.963,164,3.326,165,5.706,166,5.706,167,4.788,168,3.827,169,5.706,170,4.788,171,5.706]],["t/24",[0,2.216,20,1.046,21,2.445,25,2.942,30,1.553,31,1.773,43,1.406,62,1.918,64,1.084,72,2.445,75,2.719,76,3.179,78,2.361,83,2.159,85,1.499,86,2.361,90,3.371,92,1.806,94,1.318,95,2.786,100,1.918,101,2.652,102,2.954,107,3.308,113,1.627,116,2.22,120,3.006,133,5.513,136,4.531,151,2.652,152,2.652,156,3.75,161,2.954,167,4.531,168,2.361,172,2.786,173,1.741,174,2.652,175,3.52,176,2.954,177,4.274,178,3.52,179,3.52,180,3.52,181,4.531,182,1.334,183,2.652,184,3.52,185,2.361,186,3.405,187,3.52,188,3.52,189,2.652,190,2.22,191,3.52,192,5.4,193,1.96,194,3.52,195,2.786,196,3.179,197,2.954,198,3.52,199,2.652,200,2.954,201,2.361,202,1.017,203,2.786,204,3.52,205,6.569,206,1.301,207,3.179,208,1.553,209,3.52,210,3.52,211,3.52,212,3.52,213,3.179,214,2.954,215,3.52,216,2.361,217,3.52,218,3.52,219,3.179]],["t/27",[2,0.823,20,1.11,32,2.621,57,2.802,64,2.596,69,1.549,73,1.753,75,2.032,81,2.912,82,2.475,85,1.924,87,1.421,96,3.775,99,2.032,108,3.775,110,1.421,202,1.166,206,1.492,219,3.644,220,5.986,221,3.672,222,3.644,223,2.912,224,2.297,225,2.153,226,1.703,227,3.04,228,2.545,229,4.035,230,1.203,231,4.035,232,3.386,233,1.013,234,2.491,235,0.87,236,1.312,237,3.644,238,2.545,239,2.475,240,4.035,241,4.035,242,3.194,243,2.032,244,3.644,245,4.035,246,3.194,247,4.035,248,6.444,249,3.386,250,2.352,251,3.194,252,1.896,253,3.644,254,2.912,255,3.386,256,3.194,257,2.475,258,3.644,259,3.644,260,4.035]],["t/29",[18,4.625,19,5.447,20,1.167,22,5.447,25,3.553,26,2.828,39,3.609,73,2.621,87,2.125,99,3.037,113,2.788,261,5.003,262,3.803,263,3.803,264,3.699,265,2.881,266,2.983,267,4.189,268,4.189,269,4.045,270,3.803,271,3.727,272,3.918,273,4.189,274,5.061,275,5.447]],["t/31",[2,0.856,20,1.245,65,3.547,66,3.183,67,5.155,68,3.94,69,2.096,70,2.653,71,2.802,72,3.792,73,2.372,94,2.044,155,4.931,168,3.662,173,2.7,202,1.578,208,3.72,216,3.662,252,2.565,271,3.487,276,6.086,277,5.46,278,4.582,279,4.435,280,5.46,281,4.931,282,5.46,283,5.46,284,4.321,285,4.931,286,5.46,287,5.46,288,5.46]],["t/33",[20,0.712,26,3.471,33,4.674,35,3.414,36,4.078,82,2.353,99,2.726,107,2.726,110,2.6,113,2.502,116,3.414,143,3.517,146,2.726,202,1.564,289,4.543,290,4.108,291,4.285,292,5.413,293,5.632,294,7.38,295,4.078,296,3.517,297,4.543,298,4.794,299,4.889,300,5.413,301,5.413,302,4.889,303,4.543,304,2.586,305,3.907]],["t/35",[2,0.761,20,0.868,26,2.997,33,3.672,38,4.285,41,2.824,42,1.619,43,2.634,44,2.351,82,1.848,87,2.324,107,3.322,113,3.049,265,3.151,272,4.285,293,4.424,306,4.969,307,3.594,308,4.581,309,6.596,310,4.969,311,1.319,312,4.424]],["t/38",[2,1.01,20,0.926,33,3.916,34,4.005,35,4.437,39,3.2,53,5.3,85,1.605,197,5.904,262,4.437,290,3.916,313,7.035,314,7.347,315,4.101,316,3.151,317,4.57,318,2.508]],["t/40",[2,0.977,20,1.249,42,1.438,74,3.136,110,1.94,113,4.197,228,3.473,262,3.473,266,4.492,279,3.291,298,3.578,317,3.578,319,6.307,320,5.91,321,5.682,322,3.974,323,3.974,324,3.291,325,3.825,326,3.136,327,3.694,328,4.149,329,2.631,330,4.359,331,5.508]],["t/42",[73,3.526,181,6.811,323,5.857,332,4.621,333,7.329,334,5.636,335,8.116]],["t/44",[2,0.921,6,5.11,20,1.051,21,4.229,26,2.846,32,3.956,33,3.39,39,2.77,82,1.706,113,4.37,248,5.499,253,5.499,270,3.84,274,5.11,329,2.909,336,3.84,337,3.318,338,5.499,339,5.11,340,5.499,341,4.587,342,7.21,343,6.089,344,4.084,345,5.499,346,4.229]],["t/46",[20,0.947,26,2.565,61,4.997,63,5.192,64,2.215,65,4.674,66,4.194,67,4.997,68,5.192,69,2.763,70,3.496,71,3.692,72,4.997,73,3.126,265,3.437,347,6.497,348,6.497]],["t/48",[0,1.313,20,1,25,2.246,26,1.141,30,1.411,34,3.521,37,4.148,58,2.318,85,1.144,110,1.127,113,1.479,135,1.912,137,2.309,164,1.865,202,0.925,230,0.954,265,2.954,267,2.223,311,0.64,317,2.079,318,2.496,327,2.146,329,1.529,341,4.659,349,2.686,350,2.686,351,3.778,352,4.329,353,3.2,354,2.686,355,4.209,356,3.778,357,3.778,358,1.612,359,2.905,360,1.163,361,3.364,362,3.97,363,2.309,364,1.612,365,1.351,366,1.674,367,2.533,368,2.686,369,5.875,370,2.686,371,2.018,372,3.483,373,2.533,374,2.686,375,4.209,376,2.146,377,1.076,378,2.533,379,2.223,380,2.309,381,2.686,382,1.674,383,1.555,384,1.245,385,2.146,386,1.865,387,3.2,388,3.2]],["t/50",[2,0.351,20,0.788,25,2.683,26,1.086,34,3.879,35,3.042,37,4.018,42,0.587,58,2.23,85,0.695,87,1.073,110,1.073,123,1.507,135,1.82,143,3.134,164,2.812,202,0.88,230,0.908,239,1.869,265,3.254,298,1.979,311,0.609,317,1.979,318,1.086,324,1.82,337,1.66,341,3.635,351,3.635,352,3.879,355,2.556,356,2.295,357,2.295,359,2.814,360,1.169,361,3.236,362,2.411,363,2.198,364,1.534,365,1.286,366,1.594,367,2.411,368,2.556,369,5.717,370,2.556,371,1.921,372,4.16,373,2.411,374,2.556,375,2.556,376,2.043,377,1.024,378,2.411,379,2.116,380,2.198,381,2.556,382,1.594,383,1.48,385,3.236,389,2.751,390,2.411,391,2.411,392,5.99,393,6.813,394,2.198,395,1.734,396,2.116,397,2.411,398,3.046,399,3.046,400,3.046]],["t/52",[4,4.01,20,1.028,26,2.786,38,6.065,73,3.396,113,3.612,208,3.447,265,3.733,341,5.888]],["t/54",[20,0.911,25,1.933,29,1.538,32,1.722,34,3.107,35,1.672,37,3.66,39,1.206,41,1.135,42,0.511,50,4.111,58,1.225,62,1.445,85,1.923,99,1.335,107,1.335,110,0.934,113,1.225,123,2.134,135,1.584,164,1.546,202,0.766,230,0.791,242,2.099,246,2.099,262,1.672,265,2.061,304,2.061,316,1.933,317,3.545,318,1.538,319,1.841,321,1.778,339,2.225,340,3.897,341,3.251,352,2.457,355,2.225,356,1.998,357,1.998,359,2.564,360,1.151,361,2.895,362,2.099,363,1.913,364,1.335,365,1.119,366,2.855,367,2.099,368,2.225,369,5.278,370,2.225,371,1.672,372,2.997,373,2.099,374,2.225,375,2.225,376,1.778,377,0.892,378,2.099,379,1.841,380,1.913,381,2.225,382,1.387,383,1.288,401,3.441,402,2.394,403,2.482,404,4.58,405,2.652,406,2.394,407,2.997,408,2.099,409,2.394,410,2.394,411,2.652,412,2.225,413,2.652,414,1.51,415,4.316,416,5.457,417,2.652,418,1.267,419,2.099,420,2.225,421,2.652,422,1.445]],["t/56",[20,1.054,35,5.053,53,6.037,87,2.823,91,5.053,107,4.036,110,2.823,113,3.704]],["t/58",[2,0.989,26,2.427,47,6.462,48,6.462,58,3.147,267,5.957,352,5.347,408,7.433,423,8.481,424,3.969,425,2.915,426,5.714]],["t/60",[94,2.549,208,3.003,265,3.252,318,2.427,352,5.347,359,3.198,360,1.135,371,4.294,423,6.148,427,6.809,428,7.746,429,6.809,430,5.714,431,6.148]],["t/62",[0,1.733,20,0.815,29,1.506,34,3.525,58,3.387,73,1.835,85,1.412,113,1.952,131,3.544,238,2.663,262,3.904,263,2.663,265,3.501,318,2.612,329,2.017,342,7.288,352,2.405,356,4.664,357,4.664,358,3.118,359,1.984,360,1.136,361,5.413,362,3.343,363,3.048,371,2.663,372,4.299,373,3.343,383,2.052,409,3.814,422,2.301,432,5.195,433,4.223,434,4.223,435,3.814,436,4.223,437,4.223,438,4.223,439,3.182,440,4.223,441,3.048,442,4.223,443,3.048,444,2.744]],["t/64",[2,0.738,26,2.938,40,3.485,62,3.485,96,4.034,110,2.253,111,5.776,113,2.956,265,3.938,271,3.005,318,2.938,339,5.368,366,3.346,379,4.442,401,4.034,445,4.442,446,5.776,447,5.776,448,5.063,449,5.063,450,4.155,451,5.063,452,5.776,453,6.397,454,2.253]],["t/66",[0,1.605,2,0.451,20,0.515,25,1.751,29,1.394,34,2.227,39,1.779,41,1.675,54,3.282,78,2.623,85,0.892,113,1.807,202,1.13,230,1.744,233,1.469,261,2.466,265,1.868,266,1.934,269,2.623,304,2.794,352,3.33,358,1.97,359,3.291,360,1.172,371,2.466,382,2.046,383,1.9,384,1.521,403,3.186,422,2.131,445,2.716,455,3.911,456,2.822,457,4.629,458,3.587,459,4.908,460,4.908,461,3.532,462,3.282,463,5.848,464,3.532,465,5.848,466,3.911,467,3.688,468,3.911,469,3.688,470,2.946,471,3.911,472,3.532,473,3.532,474,3.911,475,3.911]],["t/68",[2,0.597,4,1.26,20,0.533,26,2.369,29,0.876,34,1.398,37,1.648,42,0.473,43,3.023,44,0.876,45,2.633,46,1.706,53,1.851,87,0.865,93,1.596,94,0.92,110,2.787,113,1.135,135,1.468,143,1.596,163,4.171,182,0.931,193,1.367,208,1.083,224,2.308,243,1.237,265,1.936,266,3.539,272,1.596,297,2.061,305,1.773,326,1.398,359,1.904,360,1.147,364,2.041,365,2.184,366,1.285,377,0.826,379,1.706,384,0.955,385,1.648,401,1.549,403,1.117,422,2.208,456,1.773,458,1.507,467,1.549,476,6.835,477,1.648,478,1.303,479,7.155,480,2.719,481,1.432,482,3.66,483,3.66,484,0.818,485,3.054,486,3.054,487,3.054,488,1.851,489,2.218,490,2.456,491,2.456,492,2.815,493,1.285,494,2.456,495,2.456,496,2.456,497,2.392,498,3.344,499,5.175,500,6.647,501,2.456,502,2.456,503,2.456,504,4.054,505,2.456,506,4.054,507,2.456,508,2.456,509,4.054,510,2.456,511,2.456]],["t/70",[2,1.047,4,3.249,20,1.078,26,2.257,34,5.168,93,4.114,94,2.371,110,2.231,113,2.927,208,2.793,265,3.025,266,3.132,318,2.257,327,4.247,352,3.605,361,4.247,384,3.186,445,4.398,456,4.57,512,7.396,513,5.314,514,6.333]],["t/72",[20,1.144,31,3.504,39,3.165,44,2.48,87,2.451,90,3.57,252,3.269,261,4.388,268,4.832,269,4.667,270,4.388,271,3.269,272,4.52,273,4.832,319,4.832,515,5.839,516,6.958,517,5.839,518,6.958]],["t/74",[5,5.221,20,1.106,151,4.969,267,5.839,268,5.839,269,5.639,271,3.949,274,7.055,275,7.592,456,4.76,519,8.407,520,5.957,521,6.596,522,6.596,523,6.596,524,6.596,525,6.596]],["t/76",[0,2.3,2,0.646,20,1.204,27,3.349,39,2.549,58,3.95,59,4.045,71,2.876,73,2.435,85,2.087,268,5.247,269,6.405,318,1.998,358,2.823,526,3.191,527,5.061,528,5.605,529,4.222,530,6.823,531,5.061,532,5.605,533,3.892,534,5.605,535,2.549,536,4.045,537,5.061,538,5.605,539,5.605]],["t/78",[20,1.037,31,3.009,39,4.014,59,4.312,66,3.483,85,1.799,90,4.046,94,2.237,173,3.899,174,4.501,261,3.768,268,4.149,270,3.768,318,2.13,319,5.476,332,3.402,444,3.881,530,5.395,540,5.975,541,5.975,542,4.501,543,5.395,544,4.729,545,5.975,546,5.975,547,5.975,548,5.975,549,5.975]],["t/80",[2,0.777,20,0.886,23,4.518,26,3.037,41,2.884,42,1.297,71,3.456,73,2.927,110,2.373,296,4.376,298,4.376,304,3.218,316,3.017,318,2.401,328,5.075,420,5.653,450,4.376,550,4.518,551,6.083,552,6.083,553,4.518,554,5.075]],["t/82",[47,6.982,48,6.982,58,3.568,267,5.362,408,6.111,426,6.479,550,6.216,555,7.721]],["t/84",[20,0.916,45,4.52,46,4.832,71,3.57,87,2.451,163,4.832,265,3.324,266,3.441,267,4.832,318,2.48,386,5.069,395,3.962,480,6.362,550,4.667,556,6.283,557,5.242,558,4.388]],["t/86",[20,0.993,26,1.315,29,0.782,37,1.471,41,2.672,42,0.422,44,1.315,45,1.425,58,1.014,71,1.892,85,1.722,110,0.772,123,1.824,137,2.661,163,1.523,182,0.831,193,3.764,199,2.778,221,1.345,226,0.926,230,0.654,233,0.551,242,1.736,254,1.583,266,1.085,269,1.471,273,3.315,304,2.981,311,0.438,315,2.15,318,2.973,325,2.561,330,1.736,348,1.98,358,1.857,360,0.522,372,3.315,376,6.046,377,2.728,380,1.583,384,0.853,401,3.529,404,3.095,418,1.048,422,2.6,443,1.583,445,1.523,454,1.681,457,1.736,467,3.01,472,1.98,485,1.652,487,1.652,488,2.778,513,1.84,554,2.778,557,1.652,559,1.471,560,0.763,561,2.193,562,1.523,563,2.661,564,3.33,565,2.193,566,4.31,567,0.763,568,1.98,569,1.84,570,1.84,571,3.201,572,3.33,573,2.193,574,2.919,575,1.84,576,1.98,577,1.98,578,1.98,579,2.193,580,3.688,581,2.193,582,1.652,583,1.84,584,0.602,585,1.98,586,2.193,587,1.425,588,1.98,589,2.193,590,2.193,591,2.193,592,1.652,593,2.193,594,2.193,595,2.193,596,1.98,597,2.193,598,1.345,599,1.98,600,1.84,601,2.193,602,1.652,603,2.193,604,1.652,605,1.736,606,1.84,607,1.84,608,3.33,609,2.193,610,3.688,611,2.474,612,2.193,613,2.193,614,1.652,615,2.193,616,3.095,617,2.193,618,2.193,619,2.193]],["t/88",[2,0.83,20,0.947,26,2.565,40,3.92,41,3.081,69,2.763,318,2.565,384,2.799,385,4.826,420,6.038,446,6.497,480,4.826,554,5.42,620,7.195,621,7.195,622,7.195,623,7.195]],["t/90",[2,0.5,29,1.547,41,3.881,42,0.836,193,3.515,202,1.254,206,1.604,230,1.294,235,1.604,311,0.868,316,1.943,318,1.547,326,2.47,359,2.038,360,1.148,383,3.068,384,3.18,454,2.224,484,0.876,497,2.005,498,2.415,550,2.91,584,1.191,588,3.918,624,3.013,625,2.91,626,4.238,627,2.108,628,4.339,629,4.339,630,3.641,631,3.918,632,2.529,633,6.314,634,3.434,635,4.339,636,4.339,637,2.27,638,3.013,639,1.806,640,4.339,641,4.339,642,4.339,643,4.339]],["t/92",[20,1.099,38,5.425,42,1.257,43,3.335,59,4.711,87,2.3,99,3.288,123,3.229,202,1.887,235,1.407,311,1.841,318,2.977,358,3.288,360,1.008,644,6.528,645,6.528,646,4.534,647,4.918]],["t/94",[20,0.947,41,3.081,42,1.71,43,2.873,69,2.763,87,2.534,224,5.055,318,2.565,430,6.038,648,3.173,649,6.038,650,7.195,651,6.497,652,6.497,653,3.273]],["t/96",[2,0.574,20,0.417,26,1.774,31,1.596,38,3.992,40,1.726,41,3.439,42,1.457,43,3.728,44,2.482,65,2.058,69,1.216,82,0.888,87,1.753,93,2.058,94,1.186,143,2.058,154,1.804,168,2.125,193,4.212,214,2.659,226,2.1,262,3.138,265,1.513,296,2.058,307,2.711,308,3.456,318,3.189,326,1.804,329,1.513,358,1.596,360,1.077,364,1.596,397,2.508,401,3.138,484,1.24,486,3.749,564,4.494,576,2.861,578,2.861,583,2.659,647,2.387,653,1.441,654,3.168,655,2.861,656,2.861,657,3.338,658,2.659,659,3.168,660,2.861,661,3.168,662,3.168,663,2.861,664,3.168,665,2.659,666,2.659,667,3.168,668,3.168,669,3.168,670,2.387,671,6.145,672,3.168,673,2.125,674,3.168]],["t/98",[2,0.866,20,0.731,29,1.98,41,3.643,43,3.398,44,1.98,78,3.726,87,1.957,92,2.851,113,2.568,135,3.32,159,3.726,163,3.858,193,3.093,226,2.345,265,2.654,308,3.858,318,2.677,376,3.726,379,3.858,385,5.038,401,3.504,403,2.527,445,3.858,447,5.017,480,5.038,484,1.121,485,4.185,487,4.185,488,5.658,577,5.017,673,3.726,675,5.017,676,5.556]],["t/100",[2,0.462,20,0.784,25,1.796,26,1.429,30,2.628,31,2.019,34,3.392,41,2.551,42,0.772,43,2.839,53,4.489,54,3.365,73,1.742,107,2.019,113,1.853,182,2.259,265,3.396,266,1.983,270,2.529,308,2.785,310,3.021,314,5,318,2.124,334,2.785,352,4.481,359,1.884,360,1.107,361,2.689,382,3.117,386,2.337,422,4.288,424,2.337,428,3.621,445,4.138,476,6.42,482,3.621,483,3.621,484,0.809,485,3.021,486,3.021,487,3.021,488,3.021,493,2.097,543,3.621,677,4.01,678,3.621,679,2.396,680,3.174,681,3.621,682,1.742,683,5.958,684,2.689]],["t/102",[0,2.3,20,0.737,26,1.998,29,1.998,30,2.472,31,2.823,41,3.235,42,1.455,43,2.238,58,2.59,87,1.974,214,4.703,224,3.191,254,4.045,304,2.677,308,3.892,318,1.998,358,3.805,359,2.633,360,0.935,384,2.939,401,3.534,486,4.222,648,3.77,685,4.436,686,2.677,687,5.605,688,5.605,689,6.34,690,5.061,691,6.34,692,4.703]],["t/104",[26,2.11,29,2.11,41,2.534,42,1.14,43,3.508,143,5.09,224,3.37,228,3.732,279,3.537,296,3.845,298,3.845,304,2.827,308,4.111,318,2.11,358,2.981,359,2.78,360,0.961,384,3.048,390,4.684,648,3.456,686,2.827,689,4.967,690,5.345,691,6.575,692,4.967,693,5.919,694,3.97,695,5.919]],["t/106",[26,2.453,116,4.34,143,4.471,156,4.78,201,4.616,296,5.61,298,4.471,308,4.78,318,3.079,358,3.466,480,4.616,488,5.185,575,5.776,656,6.215,660,6.215,675,6.215,696,5.447,697,6.883,698,6.883]],["t/108",[0,2.548,20,1.183,41,2.658,42,1.196,66,3.619,69,2.384,73,2.698,82,2.52,85,1.416,108,3.915,110,2.187,160,4.677,190,3.915,206,2.295,225,3.313,256,4.914,307,3.383,679,3.71,699,6.209,700,3.619,701,4.164,702,5.607,703,5.607,704,6.209,705,6.209,706,4.312,707,5.21]],["t/110",[2,0.738,21,4.442,29,2.28,69,2.456,82,1.792,85,1.459,203,5.063,329,3.055,365,2.7,394,4.616,403,2.91,583,5.368,627,4.006,648,3.636,708,4.29,709,3.413,710,5.909,711,6.524,712,6.397,713,6.397,714,6.397,715,5.368]],["t/112",[2,0.758,20,0.604,41,1.966,56,2.156,57,3.188,63,3.313,69,1.763,82,1.843,85,1.047,120,2.555,201,3.079,206,2.431,227,3.458,234,2.736,235,1.417,236,2.138,270,2.895,291,3.633,360,1.169,384,1.785,567,1.598,571,3.079,584,1.806,700,2.676,703,4.145,709,2.45,716,4.59,717,4.59,718,4.59,719,2.186,720,5.938,721,4.59,722,3.313,723,3.458,724,3.852,725,4.145,726,4.59,727,4.59,728,4.59,729,3.852,730,4.59]],["t/114",[2,0.641,43,2.219,82,2.384,202,2.17,236,2.766,279,3.32,320,4.397,360,0.608,397,4.397,454,2.646,567,1.934,616,4.662,646,3.858,655,5.017,686,2.654,700,3.238,708,3.726,709,4.008,719,3.03,731,4.662,732,3.504,733,3.504,734,2.965,735,4.185,736,3.858,737,4.662,738,5.556,739,4.185,740,2.906,741,4.397,742,7.511,743,4.662]],["t/116",[73,3.912,82,2.063,85,2.054,108,4.643,120,4.098,238,4.643,439,5.546,744,6.648,745,7.362,746,7.362,747,4.938,748,5.113,749,5.827]],["t/118",[2,0.927,26,2.192,42,1.184,82,1.723,120,4.473,121,5.16,189,4.632,206,2.273,266,3.041,360,0.879,682,3.491,696,4.866,701,4.124,750,6.148,751,6.148,752,4.123,753,8.034,754,6.148,755,5.552,756,3.994,757,6.148,758,6.148,759,4.632,760,5.552]],["t/120",[2,0.871,29,3.047,33,3.12,42,1.08,58,2.59,62,3.054,64,2.326,82,2.676,83,3.438,85,1.279,87,1.974,92,2.876,110,1.974,116,3.534,141,5.061,182,2.125,189,4.222,216,3.759,236,1.822,246,4.436,257,3.438,394,5.453,403,2.549,632,3.267,715,4.703,761,5.605,762,5.605,763,5.605,764,5.605,765,4.404,766,4.436,767,4.045]],["t/122",[82,2.245,96,5.053,279,4.788,551,7.236,627,3.894,719,2.664,768,7.236,769,6.725]],["t/124",[2,0.484,30,1.85,42,0.808,43,2.46,64,1.896,82,2.401,85,0.957,94,2.306,154,2.389,182,1.591,234,2.564,235,0.904,236,2.373,264,2.573,276,4.446,279,5.12,328,3.161,332,2.389,360,1.039,454,2.17,478,1.349,627,4.164,632,2.446,700,2.446,709,2.239,719,3.078,734,2.239,740,2.195,747,2.814,765,4.995,767,3.028,770,2.725,771,4.196,772,2.814,773,3.028,774,4.196,775,3.789,776,4.196,777,3.789,778,2.646,779,3.789,780,3.521,781,4.196]],["t/126",[29,1.93,42,1.043,57,3.76,58,2.502,71,2.778,85,1.683,99,2.726,107,2.726,119,3.907,202,1.564,243,2.726,271,2.543,307,2.949,346,3.76,349,4.543,360,0.987,403,2.462,527,4.889,607,6.193,627,3.586,648,2.388,678,4.889,724,4.543,747,3.631,748,3.76,752,3.207,782,4.889,783,5.413,784,2.352,785,4.543,786,5.413,787,5.413,788,3.907,789,4.543,790,4.543,791,5.413,792,5.413,793,5.413,794,5.413]],["t/128",[20,0.886,26,2.401,42,1.297,85,1.537,159,4.518,311,1.704,360,0.932,484,1.36,639,2.803,682,2.927,710,4.132,759,5.075,795,3.165,796,4.861,797,6.49,798,7.15,799,4.861,800,6.083]],["t/130",[1,4.663,2,0.957,56,3.035,64,1.989,69,2.481,82,2.325,85,1.474,190,4.075,193,3.597,206,2.389,236,2.697,317,5.39,326,3.679,328,4.868,448,5.114,670,4.868,682,2.808,700,3.767,733,4.075,767,4.663,768,5.835,769,5.422,801,6.462]],["t/132",[20,1.054,34,4.562,35,5.053,87,2.823,91,5.053,107,4.036,110,2.823,113,3.704]],["t/134",[2,0.989,26,2.427,47,6.462,48,6.462,58,3.147,267,5.957,351,7.075,352,5.347,408,7.433,424,3.969,425,2.915,426,5.714]],["t/136",[20,0.833,25,2.836,34,3.605,58,2.927,62,3.45,94,2.371,208,2.793,265,3.025,318,2.257,351,4.771,352,5.168,359,2.975,360,1.114,361,6.089,363,4.57,372,4.398,403,2.881,430,5.314,431,5.719,802,6.333]],["t/138",[2,0.63,20,0.718,25,2.445,26,1.946,34,3.109,85,1.924,101,4.113,113,3.431,119,3.94,202,1.578,263,3.443,304,2.608,318,1.946,329,2.608,352,4.226,356,6.354,357,5.592,358,2.75,359,2.565,360,1.168,361,4.979,363,3.94,784,2.372,803,5.46,804,5.46]],["t/140",[20,0.833,26,2.257,29,2.257,34,3.605,37,4.247,154,3.605,182,2.401,265,3.025,352,3.605,360,1.134,372,5.688,383,3.077,384,2.463,403,2.881,422,4.462,445,4.398,456,4.57,512,5.719,608,5.719,805,6.333,806,6.333]],["t/142",[2,0.849,33,4.098,82,2.726,110,2.593,202,2.127,293,4.938,336,4.643,478,2.367,765,4.291,807,6.178,808,6.178,809,4.643,810,6.648]],["t/144",[2,0.877,20,0.744,26,2.016,42,1.464,82,2.406,85,1.29,235,1.638,311,1.52,360,0.832,478,2.444,484,1.534,497,3.513,557,4.26,584,2.087,624,3.927,647,4.26,752,2.457,765,4.431,799,5.485,811,5.655,812,5.655,813,6.378,814,5.098,815,3.468,816,4.081,817,3.793]],["t/146",[2,0.604,20,0.689,42,1.008,82,2.021,154,2.98,235,1.128,264,3.211,311,1.047,332,2.98,360,1.101,454,2.54,484,1.456,497,3.333,560,2.511,571,4.837,627,2.544,700,3.051,709,2.793,719,2.743,734,2.793,799,3.778,810,4.727,813,7.825,818,3.635,819,2.852,820,3.944,821,5.235,822,7.212,823,5.235,824,5.235]],["t/148",[2,0.849,20,0.969,64,2.266,85,1.679,110,2.593,235,1.587,236,2.393,410,6.648,542,5.546,567,2.563,587,4.782,733,4.643,790,6.178,825,6.178,826,5.827]],["t/150",[0,2.475,18,3.516,30,2.66,42,1.162,65,3.918,85,2.022,94,2.258,168,4.045,235,1.911,236,1.961,360,0.97,478,1.939,567,2.1,584,1.656,682,3.447,752,3.447,827,6.031,828,5.061,829,3.699,830,3.924,831,3.996,832,3.855,833,3.699]],["t/152",[2,0.8,4,2.539,20,0.651,30,2.183,42,0.953,44,1.764,73,2.15,85,1.582,94,2.596,120,2.755,123,2.447,130,4.153,136,4.153,230,2.388,235,1.495,246,3.917,264,3.035,271,2.325,315,2.885,327,3.319,329,2.364,360,0.759,469,3.121,470,3.728,611,3.319,626,2.817,682,2.15,686,2.364,744,4.469,830,2.447,831,3.493,832,2.405,834,4.153,835,3.437,836,6.263,837,4.949,838,3.728,839,3.728,840,6.263,841,4.469,842,4.949,843,4.949,844,4.949,845,4.949,846,3.571,847,2.447,848,2.957]],["t/154",[2,0.553,20,0.631,23,4.552,40,2.614,41,2.055,42,1.307,45,3.117,110,1.69,113,2.218,123,2.373,146,2.417,182,1.819,202,1.387,206,1.774,226,3.324,230,1.431,235,1.947,304,2.292,311,1.357,315,3.956,316,3.04,329,2.292,360,0.862,439,3.615,443,3.463,478,1.543,493,3.55,584,1.864,600,4.027,653,3.087,657,3.219,686,2.292,733,3.026,826,3.798,830,2.373,839,3.615,849,4.799,850,4.027,851,4.027,852,4.027,853,4.799,854,2.561,855,4.799,856,4.799,857,2.797]],["t/156",[2,0.887,41,2.465,42,1.109,56,2.705,123,2.847,235,1.867,243,2.9,298,3.74,307,5.038,311,1.151,316,3.445,323,4.155,346,3.999,360,1.012,535,2.619,584,1.581,709,4.105,720,5.199,765,3.356,828,4.832,847,2.847,858,5.199,859,5.199,860,5.758,861,5.758,862,5.758,863,5.758,864,5.199]],["t/158",[2,0.902,20,0.521,62,2.157,66,2.308,85,1.346,87,1.395,92,2.032,99,1.994,124,3.576,183,2.983,202,1.144,230,1.76,233,1.482,234,2.456,235,1.686,236,2.294,243,1.994,252,2.773,257,2.429,264,2.429,271,1.86,272,2.572,305,2.858,336,2.497,382,2.071,478,1.898,515,3.323,526,4.018,567,1.378,611,2.656,657,2.656,670,2.983,684,2.656,685,3.134,719,2.346,807,4.953,809,2.497,831,1.994,836,5.33,840,3.576,865,3.323,866,3.088,867,3.503,868,2.858,869,2.983,870,3.576,871,3.96,872,3.134,873,4.447,874,4.672,875,3.323,876,3.96,877,3.96,878,3.576,879,3.576,880,3.96,881,3.96,882,3.96,883,3.134,884,3.323,885,3.576]],["t/160",[2,0.498,20,0.349,27,1.584,29,0.945,43,1.724,44,1.538,59,1.913,65,1.722,69,1.018,70,1.288,74,1.51,75,1.335,80,1.913,85,0.605,91,1.672,92,1.36,94,0.993,110,0.934,190,1.672,202,1.247,226,1.119,230,0.791,233,1.371,234,1.796,235,1.356,243,2.173,257,1.626,266,1.311,306,1.998,307,1.445,324,2.579,337,2.351,360,1.093,364,1.335,377,0.892,396,1.841,477,1.778,478,2.386,481,2.516,484,1.269,493,2.855,517,2.225,526,4.642,544,2.099,553,1.778,560,0.923,563,1.913,567,1.502,584,1.185,632,1.546,648,1.169,694,2.895,719,0.882,736,1.841,830,2.134,831,3.486,835,4.368,839,1.998,857,1.546,858,2.394,866,3.621,867,3.862,868,3.938,886,2.652,887,2.652,888,1.584,889,2.652,890,1.913,891,2.394,892,2.652,893,1.626,894,3.114,895,2.225,896,2.647,897,1.913,898,2.394,899,2.652,900,2.652,901,1.778,902,2.652,903,2.394,904,2.394]],["t/162",[30,2.799,42,0.841,68,3.153,73,1.898,74,4.254,82,1.224,92,2.242,99,2.2,173,2.161,182,1.656,202,1.834,208,1.927,216,2.93,226,1.844,235,1.611,236,1.42,264,2.68,311,1.269,360,1.051,403,1.987,422,2.38,478,1.405,526,4.254,611,2.93,653,3.399,736,3.034,809,2.755,830,3.138,831,3.196,848,2.611,852,3.666,854,3.988,857,2.547,867,2.984,893,2.68,894,5.393,903,3.945,905,3.666,906,5.393,907,3.153,908,4.369,909,3.666,910,4.369,911,3.458,912,3.458,913,4.369]],["t/164",[151,6.444,914,8.554,915,7.725]],["t/166",[44,2.821,202,2.718,252,3.717,360,0.866,788,5.711,829,4.854,857,4.613,916,6.641]],["t/168",[30,1.746,31,1.994,42,0.763,82,1.654,85,0.903,125,2.983,186,2.497,206,2.609,208,1.746,233,0.995,235,1.272,238,3.722,261,2.497,264,2.429,311,1.411,324,2.366,360,1.063,414,2.254,444,2.572,454,1.395,484,1.191,497,1.83,526,2.254,553,2.656,567,2.723,626,2.254,682,1.721,694,2.656,719,2.346,743,3.323,748,2.75,756,2.572,815,2.429,830,1.958,831,4.577,848,3.527,851,3.323,867,2.357,897,2.858,917,2.572,918,2.572,919,2.429,920,3.576,921,3.722,922,5.585,923,5.585,924,2.366,925,3.323,926,3.323,927,2.983,928,2.858,929,3.96,930,3.134,931,3.96]],["t/170",[2,0.7,42,1.637,69,1.58,71,2.111,74,2.342,82,1.153,146,2.072,186,3.829,206,1.521,230,1.811,233,1.813,234,1.712,235,1.556,236,1.337,237,3.715,311,1.593,360,0.973,377,1.383,382,2.152,403,1.871,425,3.09,484,1.795,497,3.929,535,2.762,552,3.715,560,1.432,567,2.114,719,1.368,734,2.195,739,3.099,830,3.003,831,4.756,833,2.523,839,3.099,883,3.256,917,2.672,919,2.523,921,3.829,927,3.099,932,4.114,933,4.114,934,4.114]],["t/172",[2,0.664,42,1.109,82,2.156,233,1.446,235,1.658,250,3.356,311,1.538,329,2.75,359,2.705,360,1.14,382,4.024,425,3.294,484,1.162,497,2.661,830,2.847,831,4.363,854,4.105,872,4.557,907,5.552,935,5.199,936,4.338,937,5.199]],["t/174",[2,0.545,80,3.411,82,1.325,125,5.059,206,1.748,230,1.41,233,1.187,234,1.967,236,1.537,252,2.221,311,1.343,360,1.131,377,1.59,484,1.716,497,3.104,553,4.504,567,1.646,756,4.362,815,4.119,830,3.321,831,4.699,839,5.884,893,2.899,921,4.235,922,3.741,923,3.741,925,5.635,926,5.635,938,4.727,939,4.727,940,4.269,941,4.269]],["t/176",[2,0.67,82,1.628,146,2.926,206,2.862,233,1.944,234,3.221,235,1.252,236,1.889,239,3.564,311,1.162,360,1.111,484,1.562,497,3.577,567,2.023,682,2.525,830,2.874,831,4.383,846,4.193,867,2.32,893,3.564,898,5.247,901,3.897,919,3.564,921,3.664,942,3.897]],["t/178",[1,2.774,2,0.571,18,1.343,20,0.303,25,1.032,28,1.736,30,1.016,39,1.048,42,1.236,55,1.736,56,1.083,61,1.6,63,1.663,64,0.709,66,1.343,67,2.67,73,1.001,74,1.312,75,1.936,82,1.077,85,0.877,87,0.812,90,1.182,92,1.182,94,0.863,110,1.354,115,1.546,140,1.663,146,1.161,149,1.736,173,1.901,174,1.736,181,3.226,186,2.424,206,2.563,233,0.579,235,0.829,236,0.749,243,1.936,252,1.083,261,1.453,263,1.453,264,1.413,270,1.453,271,1.083,272,2.497,273,1.6,285,2.081,295,1.736,311,0.989,324,1.377,345,3.472,347,2.081,360,1.025,365,0.973,379,1.6,382,2.587,412,1.934,414,3.287,450,1.497,454,1.354,484,1.295,492,2.67,497,3.4,526,1.312,535,1.048,536,1.663,567,1.338,584,0.633,648,1.016,682,1.671,694,1.546,708,1.546,770,1.497,795,1.806,826,3.043,830,1.14,831,3.232,832,1.868,848,1.377,866,2.587,867,1.535,884,1.934,890,2.774,891,2.081,894,1.663,897,1.663,911,1.824,912,1.824,917,1.497,919,3.034,921,3.119,922,6.1,923,1.824,930,1.824,942,1.546,943,1.824,944,1.453,945,6.934,946,4.946,947,2.305,948,2.305,949,2.305,950,2.081,951,2.305,952,2.081,953,1.824,954,1.824,955,2.305,956,1.824,957,1.824,958,2.305,959,2.081,960,2.305]],["t/180",[2,0.558,20,0.636,26,1.724,42,1.523,62,2.634,68,3.49,69,2.62,87,1.703,107,2.435,156,3.358,160,3.643,186,4.303,201,3.243,202,1.397,208,2.133,261,3.049,271,2.272,299,4.367,304,3.26,311,0.967,316,2.166,324,2.889,360,1.057,364,2.435,365,2.041,477,3.243,484,0.976,526,2.753,653,2.2,682,2.101,694,3.243,788,3.49,830,3.375,831,2.435,848,4.077,867,1.931,872,3.827,893,2.966,897,3.49,917,3.141,920,4.367,924,2.889,959,4.367,961,4.058,962,4.367,963,4.367,964,4.367]],["t/182",[0,1.503,20,0.732,25,3.015,29,1.306,30,2.969,31,2.803,40,1.995,42,1.448,64,2.315,73,1.591,82,1.886,98,2.643,99,1.844,100,1.995,116,2.31,140,2.643,177,2.899,182,1.388,189,2.759,208,1.615,223,2.643,224,2.085,233,1.398,235,2.014,236,1.191,238,2.31,250,2.135,307,3.032,311,0.732,318,1.306,324,2.188,329,1.749,337,1.995,344,2.456,360,0.609,397,2.899,444,2.379,454,3.118,478,1.789,484,0.739,526,2.085,529,2.759,626,2.085,648,1.615,682,1.591,694,2.456,696,2.899,700,2.135,708,2.456,747,2.456,784,1.591,809,2.31,830,2.753,831,3.39,857,2.135,867,1.463,890,2.643,897,2.643,921,4.245,924,2.188,965,4.671,966,3.307,967,3.073,968,3.662]],["t/184",[2,0.443,20,0.505,29,1.369,40,2.092,42,1.334,63,2.771,87,1.353,230,2.462,233,1.74,235,1.243,284,3.039,311,1.651,329,1.834,344,2.575,360,1.152,377,1.291,384,1.494,425,2.47,484,1.398,567,2.008,584,1.054,598,2.355,679,2.294,682,2.506,706,2.667,719,1.277,722,2.771,723,2.893,784,1.668,788,2.771,830,3.426,831,3.879,848,2.294,917,2.494,921,5.469,924,3.447,964,3.467,965,5.814,969,3.84,970,3.84,971,3.467,972,2.092,973,3.84,974,3.467]],["t/186",[20,0.622,26,1.685,29,2.394,31,2.381,42,1.638,64,1.455,82,1.882,83,2.899,230,1.41,233,1.187,235,1.447,236,1.537,290,2.632,306,3.561,307,2.575,311,1.7,332,2.691,360,1.074,382,2.473,384,1.839,425,2.024,454,2.995,477,3.171,484,0.954,657,3.171,719,1.572,734,2.523,736,3.283,809,2.981,831,3.933,854,3.584,859,4.269,866,2.473,921,2.981,957,3.741,975,5.635,976,6.554,977,3.967]],["t/188",[1,2.042,25,2.037,58,1.307,66,1.649,82,1.598,125,2.131,154,2.589,206,1.046,230,0.843,233,1.142,235,1.542,236,1.478,239,1.735,250,1.649,262,1.784,311,1.306,324,1.69,350,2.374,359,1.329,360,1.162,377,0.951,383,1.375,443,2.042,454,1.602,484,1.318,526,1.611,553,1.897,584,0.777,646,1.965,682,1.976,694,1.897,719,0.941,732,1.784,740,1.48,756,1.838,788,2.042,815,1.735,830,2.82,831,4.208,854,2.427,867,1.816,893,1.735,897,2.042,907,3.282,911,2.239,919,1.735,921,4.513,922,6.613,923,6.613,924,2.717,925,2.374,926,2.374,935,2.555,936,2.131,940,2.555,941,2.555,974,5.15,978,1.784,979,2.829,980,3.426,981,2.829,982,2.829,983,2.829,984,2.555,985,2.374,986,2.374,987,2.829,988,2.829]],["t/190",[2,0.73,20,0.833,55,4.771,186,3.993,206,2.341,243,3.189,311,1.919,360,0.896,432,5.314,484,1.278,493,3.313,598,3.884,692,5.314,785,5.314,830,3.132,847,4.05,883,5.012,921,3.993,956,5.012,957,5.012,989,5.719,990,6.333,991,8.19]],["t/192",[39,3.2,40,3.833,42,1.355,61,4.886,107,3.543,167,5.904,235,1.516,311,1.407,315,4.101,333,6.353,384,3.708,386,5.104,478,2.262,847,3.479,992,7.907]],["t/194",[2,0.883,20,0.6,29,1.625,42,1.611,56,2.141,62,2.483,69,2.512,72,3.165,93,4.25,120,2.537,160,4.929,186,2.874,202,1.317,203,3.607,206,1.685,208,2.01,224,2.595,225,2.432,233,1.643,235,1.41,239,2.795,264,2.795,304,2.177,305,3.289,310,3.433,311,1.771,316,2.041,329,2.177,337,3.564,344,3.057,477,3.057,484,0.92,497,2.106,584,1.251,649,3.824,719,1.515,825,3.824,847,2.254,848,4.573,901,3.057,911,3.607,919,2.795,928,3.289,944,2.874,962,4.115,993,3.433,994,4.557,995,4.557,996,4.557,997,3.824,998,4.557]],["t/197",[2,0.904,18,4.567,20,1.23,67,4.111,70,2.876,72,4.111,85,1.35,87,2.085,93,3.845,106,4.967,130,4.967,142,4.967,168,3.97,173,3.875,195,4.684,199,4.459,224,3.37,272,3.845,281,5.345,329,2.827,407,4.111,477,3.97,493,3.096,848,3.537,954,4.684,999,5.919,1000,5.919,1001,5.919,1002,4.967,1003,5.919]],["t/199",[20,1.064,58,2.869,64,1.911,73,2.698,75,3.127,78,4.164,82,1.74,84,5.21,85,1.844,87,2.187,90,3.186,91,3.915,173,3.071,195,4.914,252,2.917,290,3.456,305,4.48,312,4.164,315,3.619,322,4.48,326,3.535,337,3.383,592,4.677,818,4.312,943,6.399,1004,3.535,1005,5.607,1006,6.209]],["t/201",[0,1.926,2,0.977,20,0.879,28,3.535,30,2.07,42,1.498,58,2.169,64,1.444,66,2.735,69,1.802,73,2.039,75,2.363,80,3.386,82,1.315,85,1.933,86,3.147,91,2.959,96,2.959,110,1.653,173,2.321,206,1.735,223,4.821,230,1.399,233,1.179,239,2.878,243,2.363,244,4.237,269,3.147,271,2.204,304,2.241,315,2.735,322,4.821,327,3.147,365,1.98,377,1.578,451,3.714,592,3.535,627,2.28,652,4.237,679,2.804,770,3.048,795,2.204,835,3.259,847,2.321,865,3.938,943,3.714,997,3.938,1004,2.672,1007,4.692,1008,3.714,1009,2.455,1010,3.147,1011,4.692]],["t/203",[20,1.085,38,5.355,39,2.91,43,2.555,73,2.779,85,1.459,86,4.29,87,2.904,90,3.282,107,3.221,156,4.442,173,3.163,243,3.221,273,4.442,316,2.865,492,4.442,719,2.127,807,5.368,957,5.063,1012,6.397,1013,6.397,1014,6.397,1015,6.397,1016,3.923,1017,6.397]],["t/205",[20,1.099,30,2.879,44,2.327,66,3.805,73,2.837,87,2.3,90,3.35,94,2.444,107,4.206,120,3.634,156,5.8,201,4.379,268,4.534,269,4.379,270,4.117,271,3.067,272,4.241,290,3.634,319,4.534,1005,5.895,1018,5.895,1019,6.528,1020,6.528]],["t/207",[2,0.599,20,1.081,21,3.606,31,2.615,35,4.522,36,5.402,37,4.81,39,2.362,42,1.582,46,3.606,71,3.679,78,4.81,85,1.184,90,2.664,107,2.615,110,2.526,113,3.314,163,3.606,173,2.568,201,3.482,243,2.615,271,2.439,297,4.357,314,4.357,315,3.026,322,3.747,403,2.362,492,3.606,493,2.716,584,1.426,604,3.911,685,4.109,952,4.688,1021,5.192,1022,3.747,1023,5.192,1024,5.192,1025,4.688,1026,5.192,1027,5.192]],["t/209",[20,1.106,26,2.997,38,5.461,73,2.866,87,2.324,94,3.147,107,3.322,177,5.221,200,5.535,303,5.535,364,3.322,560,2.927,702,5.957,770,4.285,883,5.221,1028,5.957,1029,6.596,1030,5.957,1031,6.596,1032,5.957]],["t/211",[2,0.803,20,0.916,30,3.069,64,2.677,71,3.57,81,5.021,82,2.437,225,3.713,236,2.262,293,4.667,458,4.268,492,4.832,634,5.507,818,4.832,963,6.283,1004,4.951,1033,6.958]],["t/213",[2,0.738,18,3.729,20,1.085,33,4.589,36,4.819,74,3.642,82,1.792,100,3.485,123,3.163,207,5.776,235,1.379,293,4.29,302,5.776,338,5.776,389,5.776,390,5.063,679,3.822,848,3.822,918,4.155,1004,3.642,1034,6.397,1035,6.397,1036,6.397,1037,6.397,1038,6.397,1039,5.776]],["t/215",[2,0.983,42,1.297,80,4.861,85,1.537,186,4.248,208,2.971,230,2.54,235,1.452,321,4.518,458,4.132,709,3.595,835,4.678,847,3.332,848,5.091,916,5.653,928,4.861,1040,6.083,1041,6.736,1042,6.736,1043,6.736]],["t/217",[20,0.888,39,2.166,58,2.201,62,2.595,85,1.086,123,2.356,135,2.846,160,3.588,172,3.77,193,2.651,230,2.686,233,1.696,235,1.455,236,1.548,270,3.003,332,2.712,337,2.595,394,3.437,418,3.746,444,3.094,477,3.195,535,2.166,567,1.658,584,1.308,637,4.102,709,2.542,736,3.308,835,3.308,847,4.455,874,3.77,977,3.997,1004,2.712,1044,4.763,1045,2.846,1046,4.763,1047,4.763,1048,5.343,1049,3.437,1050,4.301,1051,4.102,1052,4.763,1053,3.437,1054,4.301,1055,4.763]],["t/219",[2,0.957,20,0.85,26,2.303,56,3.035,64,1.989,69,2.481,82,1.811,92,3.315,202,1.867,225,3.448,230,2.474,235,1.393,279,3.861,298,4.198,322,4.663,390,5.114,584,1.774,614,4.868,686,3.963,694,4.334,709,3.448,847,3.196,1056,6.462,1057,5.835]],["t/221",[2,0.871,42,1.455,230,1.671,234,3.144,235,2.058,304,2.677,316,2.51,360,1.077,377,1.885,384,2.18,386,3.267,441,4.045,653,2.549,679,3.349,682,3.283,686,3.609,709,2.991,719,1.863,825,4.703,830,2.772,847,2.772,1058,4.222,1059,5.605,1060,5.453,1061,5.605,1062,3.438,1063,4.703]],["t/223",[2,0.743,31,2.247,56,2.096,65,5.38,85,1.018,94,3.1,182,1.691,206,1.649,226,3.495,230,1.33,235,1.973,236,1.45,360,0.705,365,1.883,418,2.131,425,1.91,478,1.434,484,1.904,493,2.334,535,2.029,544,3.531,584,1.225,616,3.744,637,2.334,686,4.372,709,2.381,719,2.753,831,3.244,847,3.186,874,3.531,879,4.029,953,3.531,1048,3.531,1051,2.334,1064,4.029,1065,4.461,1066,4.029,1067,6.442]],["t/225",[2,0.983,20,0.886,29,2.401,42,1.297,44,2.401,56,3.165,65,4.376,69,2.587,92,3.456,94,2.522,230,2.786,380,4.861,484,1.36,520,6.083,627,3.273,632,3.927,833,4.132,1068,6.736,1069,6.736,1070,6.736]],["t/227",[2,0.839,20,0.958,41,3.116,94,2.724,230,2.666,233,1.828,265,3.476,315,4.242,450,4.728,458,4.464,469,4.589,481,4.242,912,5.76,1071,7.278,1072,5.483]],["t/229",[20,0.884,23,3.171,41,2.024,68,3.411,73,2.918,75,2.381,85,1.078,110,1.665,116,2.981,142,3.967,156,3.283,173,2.338,182,1.792,183,3.561,186,2.981,190,2.981,202,1.941,223,3.411,226,1.995,230,1.41,233,1.187,235,1.447,295,3.561,316,2.117,329,3.208,337,2.575,382,2.473,403,2.15,425,2.024,493,2.473,535,2.15,556,4.269,560,1.646,584,1.844,653,3.553,684,4.504,686,2.258,708,3.171,848,4.013,867,2.682,888,2.825,901,3.171,906,3.411,917,3.071,980,3.561,1073,3.741,1074,4.269,1075,4.727,1076,4.727,1077,4.727,1078,3.561,1079,3.171]],["t/231",[20,1.16,176,5.97,230,2.857,233,1.787,235,1.533,418,3.398,535,3.236,542,5.36,637,3.721,709,3.796,835,4.941,848,4.251,917,4.621,1051,3.721,1080,4.941]],["t/233",[226,4.248,233,1.657,235,1.812,311,1.319,360,1.145,418,4.016,535,3,637,4.398,639,2.745,830,3.262,1051,4.398]],["t/235",[43,2.455,193,3.423,233,1.544,235,1.732,311,1.229,418,4.533,535,2.797,567,2.14,637,4.964,639,2.559,831,3.096,1004,3.501,1049,4.437,1051,4.964,1053,4.437,1081,6.148,1082,8.034,1083,6.148,1084,6.148,1085,5.552,1086,6.148]],["t/237",[0,2.406,2,0.676,56,2.755,62,3.195,202,1.695,208,2.586,235,1.678,236,1.906,311,1.172,360,1.091,422,3.195,477,3.933,526,3.339,611,3.933,684,3.933,830,2.9,831,3.922,854,4.156,867,2.342,901,3.933,917,3.809,937,5.295,980,4.418,1002,4.921,1078,4.418,1087,5.864,1088,5.864,1089,5.864,1090,5.864]],["t/239",[2,0.451,56,2.747,58,2.703,64,1.204,69,1.502,70,1.9,74,2.227,82,1.096,92,2.007,182,1.483,202,1.13,208,2.579,233,1.469,235,1.951,236,1.271,239,3.587,254,2.822,257,2.399,311,1.169,315,2.28,323,2.822,324,2.337,326,2.227,337,2.131,359,1.837,360,1.122,383,1.9,395,3.33,422,3.186,481,2.28,484,1.414,526,3.988,558,2.466,584,1.606,653,2.66,684,3.923,706,2.716,830,2.892,831,1.97,852,3.282,854,4.148,867,2.336,872,3.095,907,4.22,980,2.946,1002,3.282,1091,5.848,1092,2.946,1093,2.28]],["t/241",[20,1.081,56,2.439,75,2.615,110,3.121,123,2.568,176,6.018,186,3.274,208,2.29,225,2.771,226,2.191,230,2.449,311,1.038,360,1.018,384,2.019,478,1.669,560,2.496,574,4.109,584,1.426,638,3.606,653,4.03,795,4.162,830,2.568,832,2.523,833,3.184,847,2.568,857,3.026,866,2.716,917,3.373,1040,4.688,1094,5.192,1095,5.192,1096,5.192]],["t/243",[2,0.67,20,1.018,26,2.071,31,2.926,39,2.643,69,2.231,71,2.981,113,2.685,116,3.664,117,4.876,131,4.876,132,6.99,137,4.193,145,4.599,168,3.897,173,2.874,174,4.377,252,2.73,254,4.193,325,4.035,337,3.166,414,4.407,439,4.377,562,4.035,833,3.564,930,4.599,1097,5.247,1098,5.247,1099,5.81,1100,5.81,1101,5.81,1102,5.81,1103,5.247,1104,5.247,1105,5.81]],["t/246",[18,3.927,71,3.456,116,4.248,154,3.835,172,5.331,174,5.075,183,5.075,208,2.971,226,2.843,251,5.331,271,3.165,273,6.82,336,4.248,344,4.518,885,6.083,956,5.331,1106,5.653,1107,6.736,1108,6.736,1109,6.736]],["t/248",[0,2.304,2,0.427,20,0.892,25,1.659,43,1.48,52,3.109,55,2.791,59,2.674,69,3.669,75,1.866,87,1.305,100,3.059,107,1.866,117,3.109,140,2.674,145,2.932,149,4.23,150,3.346,151,2.791,152,2.791,182,2.129,208,1.634,225,2.996,230,1.105,233,0.931,234,1.542,266,2.777,290,2.063,291,2.932,323,2.674,337,2.019,349,3.109,414,3.197,456,2.674,484,0.748,558,2.337,604,6.124,630,3.109,634,4.444,711,2.932,732,2.337,766,2.932,785,3.109,841,3.346,846,2.674,850,3.109,867,2.242,893,2.273,896,2.273,953,2.932,965,3.109,978,2.337,1028,3.346,1103,3.346,1110,3.705,1111,3.705,1112,3.705,1113,3.705,1114,5.615,1115,3.705,1116,3.705,1117,3.705,1118,3.705,1119,3.705,1120,3.705,1121,5.615,1122,3.705,1123,3.705,1124,3.346,1125,3.346,1126,3.705,1127,3.705,1128,3.109,1129,3.705]],["t/251",[2,0.893,25,2.602,29,2.759,46,6.045,228,3.664,271,2.73,318,2.759,329,2.775,334,4.035,377,2.927,385,3.897,403,3.521,478,1.868,480,5.191,550,3.897,569,7.789,604,4.377,873,4.377,893,4.747,896,3.564,927,4.377,1130,7.74,1131,5.81,1132,5.81]],["t/253",[39,2.939,45,5.39,46,6.365,61,5.762,85,1.474,110,3.228,318,2.303,358,3.254,364,3.254,377,2.79,480,4.334,550,4.334,554,4.868,568,5.835,571,4.334,893,5.089,927,4.868,944,4.075,1128,5.422]],["t/255",[0,2.707,32,4.285,43,2.634,82,1.848,94,2.469,119,4.76,224,3.755,311,1.319,318,2.351,334,6.99,350,7.055,358,3.322,424,3.845,686,3.151,706,4.581,888,3.941,916,5.535,1093,3.845,1133,6.596,1134,6.596]],["t/257",[20,1.28,137,4.271,143,3.845,228,3.732,230,1.765,329,2.827,330,4.684,334,4.111,351,4.459,352,3.37,354,4.967,386,3.45,391,6.202,414,3.37,424,5.12,493,3.096,550,3.97,673,3.97,734,4.688,978,3.732,1106,4.967,1135,7.371,1136,5.919,1137,5.919,1138,5.919]],["t/259",[2,0.909,20,0.786,26,2.13,38,5.122,42,1.519,43,3.149,56,2.807,71,3.066,87,2.105,99,3.009,123,2.955,140,4.312,304,3.766,307,3.255,334,4.149,358,3.971,359,2.807,360,0.966,384,2.324,414,3.402,624,4.149,648,3.478,686,2.854,689,5.014,1139,5.975,1140,5.975]],["t/261",[2,0.478,27,2.474,29,1.476,64,2.745,182,2.313,202,1.763,230,1.235,232,3.475,235,1.723,289,3.475,307,2.256,311,1.704,318,2.85,358,4.026,360,1.103,366,2.166,384,3.109,414,3.474,484,1.799,533,2.876,559,4.092,584,1.675,637,2.166,638,2.876,639,1.723,673,2.777,679,2.474,709,2.21,795,1.945,850,3.475,893,2.54,906,2.988,1141,3.739,1142,4.829,1143,2.988,1144,6.542,1145,3.739]],["t/263",[20,0.886,82,1.888,85,1.944,202,1.947,208,2.971,233,2.347,271,3.165,278,5.653,425,2.884,535,3.876,679,4.025,873,5.075,888,5.091,893,5.226,1092,5.075,1146,6.736,1147,6.736]],["t/265",[2,0.51,20,0.99,32,1.774,55,2.058,61,3.07,62,1.488,64,1.361,70,1.327,82,1.561,85,1.008,94,1.655,99,2.226,101,2.058,119,1.971,123,1.351,182,1.035,202,1.278,216,1.832,235,1.707,250,3.246,271,1.283,276,1.971,311,1.28,332,2.517,334,3.07,337,4.099,358,2.226,360,1.015,377,0.918,378,2.162,414,1.555,439,3.331,454,0.962,493,1.429,498,1.521,558,2.788,584,1.757,592,3.331,600,2.292,639,1.137,653,1.242,734,1.458,795,1.283,846,1.971,854,4.226,867,3.004,869,2.058,875,4.673,888,1.632,907,4.019,936,4.196,975,2.292,977,2.292,1092,5.668,1093,1.592,1124,2.467,1135,5.371,1142,4.408,1148,5.569,1149,2.467,1150,2.731,1151,2.731,1152,3.71,1153,6.4,1154,2.731,1155,2.731,1156,2.292,1157,2.467,1158,2.731,1159,4.421,1160,2.731,1161,2.731,1162,2.731,1163,2.731,1164,2.731,1165,2.292]],["t/267",[2,0.584,20,0.928,25,3.158,42,1.358,64,2.171,83,3.108,119,5.089,182,1.921,290,2.821,311,1.622,318,1.806,358,2.552,359,3.313,360,1.009,384,1.971,395,2.885,432,4.252,493,2.651,888,3.028,966,4.576,1080,3.519,1135,5.917,1141,4.576,1142,6.419,1144,6.368,1152,4.252,1166,7.051,1167,7.051,1168,5.067,1169,8.768,1170,5.067,1171,5.067,1172,5.067]],["t/269",[0,1.87,26,2.981,31,2.295,82,1.833,85,1.04,135,3.909,159,4.388,208,2.01,235,1.41,271,2.141,307,2.483,311,0.911,318,2.332,360,0.969,396,3.165,418,2.177,484,1.32,497,2.106,584,1.251,639,1.896,673,3.057,710,2.795,752,1.98,765,4.461,795,3.073,796,3.289,797,3.165,799,4.721,813,5.49,818,4.543,1173,4.557,1174,4.929,1175,6.057,1176,5.908,1177,5.49,1178,4.557,1179,4.115,1180,4.557,1181,4.557,1182,4.557,1183,4.557,1184,4.557,1185,4.557,1186,4.557]],["t/271",[20,0.712,26,1.93,30,2.388,32,3.517,33,4.108,39,2.462,75,2.726,93,3.517,94,2.763,113,2.502,120,3.014,162,4.889,197,4.543,208,3.255,257,3.32,258,4.889,259,4.889,293,3.631,296,3.517,315,3.156,316,2.424,319,3.76,320,4.285,321,4.95,329,2.586,360,0.808,366,2.832,407,3.76,414,3.082,649,4.543,681,4.889,708,3.631,986,4.543,1128,4.543,1187,7.046,1188,5.413,1189,5.413,1190,5.413,1191,4.889]],["t/273",[2,0.856,20,0.977,33,3.04,42,1.052,58,2.523,123,3.671,170,4.582,193,3.04,221,4.553,304,2.608,311,1.484,318,2.646,321,4.979,329,2.608,330,4.321,358,2.75,359,2.565,360,1.128,366,2.856,424,3.183,464,4.931,570,6.229,602,4.113,630,4.582,1192,4.931,1193,5.46,1194,5.46,1195,7.423]],["t/275",[2,0.609,20,0.695,29,1.882,30,2.328,41,2.26,42,1.017,52,4.429,86,3.54,87,1.859,110,1.859,137,3.809,206,1.951,230,2.789,238,3.329,290,2.938,296,3.429,318,3.181,354,4.429,366,2.761,391,4.178,424,3.077,467,5.226,469,3.329,531,4.766,567,1.838,584,1.449,596,4.766,679,3.154,685,4.178,701,3.54,706,3.666,709,2.817,732,3.329,748,3.666,954,4.178,1187,4.429,1196,5.278,1197,4.766,1198,5.278,1199,4.766]],["t/277",[20,0.765,26,2.759,31,2.926,33,3.234,86,3.897,110,2.047,115,5.191,159,3.897,224,3.308,230,1.732,293,3.897,296,3.774,304,3.697,305,4.193,317,3.774,319,4.035,365,2.452,377,1.954,567,2.023,570,4.876,574,6.126,624,4.035,679,3.472,708,3.897,954,4.599,1187,4.876,1191,5.247,1199,5.247,1200,5.81,1201,5.81,1202,5.81,1203,5.81,1204,5.81,1205,5.81]],["t/279",[2,0.897,18,2.735,20,0.617,21,3.259,42,0.904,73,2.039,110,2.353,163,3.259,173,2.321,193,4.33,230,1.992,233,1.179,290,2.612,296,4.339,318,1.673,326,2.672,358,2.363,367,3.714,385,3.147,467,2.959,480,4.48,485,5.032,486,5.032,487,5.032,489,4.237,550,3.147,567,2.95,569,3.938,572,4.237,575,5.606,585,7.024,587,3.048,607,5.606,657,4.48,666,3.938,680,3.714,1045,2.804,1206,3.714,1207,4.639,1208,4.692,1209,4.692,1210,4.237,1211,4.692,1212,4.692]],["t/281",[2,0.859,33,4.146,82,2.541,85,1.699,110,2.624,135,4.451,159,4.996,227,5.611,235,1.605,279,4.451,293,4.996,755,6.726,1213,7.449]],["t/283",[20,0.906,26,2.453,42,1.326,85,1.57,159,4.616,235,1.483,360,0.945,478,2.213,557,5.185,584,2.371,624,4.78,682,2.991,752,2.991,799,6.232,1177,7.247,1214,6.215,1215,5.776]],["t/285",[2,0.609,20,0.695,42,1.017,135,3.154,154,3.005,235,1.563,264,3.237,311,1.055,332,3.005,360,1.083,454,2.555,484,1.464,497,3.352,560,2.525,571,4.865,627,2.565,700,3.077,709,2.817,719,2.755,734,2.817,799,3.809,819,2.876,820,3.976,967,4.429,1177,7.848,1216,8.287,1217,5.278,1218,5.278,1219,5.278]],["t/288",[27,3.44,85,2.262,208,2.539,236,1.872,238,4.851,535,3.499,560,2.004,567,2.004,584,2.112,648,4.25,719,2.558,733,3.631,752,2.502,790,6.456,829,3.531,873,4.338,1093,3.356,1220,4.832,1221,6.947,1222,5.343,1223,5.758,1224,5.758,1225,4.155]],["t/290",[20,1.096,85,1.9,252,3.913,497,3.85,838,6.275]],["t/292",[43,2.258,69,3.787,230,1.686,233,2.156,234,3.163,235,1.638,236,2.791,252,2.656,360,1.103,686,2.701,719,3.279,867,2.258,1225,4.081,1226,4.043,1227,5.655]],["t/294",[29,1.66,69,3.67,252,2.188,311,2.095,360,0.51,384,1.812,418,2.225,425,2.845,454,1.641,484,1.929,559,3.124,584,2.127,637,2.436,961,3.909,1051,2.436,1225,3.361,1226,3.769,1228,9.557,1229,4.457,1230,4.206,1231,4.658,1232,7.747,1233,4.658,1234,4.658]],["t/296",[69,3.385,233,1.787,234,2.96,235,1.9,252,3.342,263,4.486,478,2.287,484,1.779,497,4.075,867,2.841,1225,5.134,1235,4.486,1236,6.424,1237,6.424]],["t/298",[44,1.866,69,3.581,75,2.636,85,1.194,110,1.844,233,1.315,250,4.204,252,2.459,360,0.789,365,2.209,484,1.456,560,2.511,627,2.544,639,3.001,648,2.309,795,2.459,814,3.511,924,3.128,1009,4.651,1010,3.511,1092,5.433,1142,4.143,1152,4.393,1206,4.143,1222,3.635,1225,3.778,1226,3.044,1229,4.837,1238,4.393,1239,5.235,1240,5.235,1241,5.235,1242,5.235,1243,6.513]],["t/300",[69,3.339,107,3.504,230,2.075,252,3.269,360,0.761,484,1.755,584,1.911,719,2.313,734,4.64,740,3.64,784,3.023,789,5.839,834,5.839,1225,5.021,1226,3.67,1244,6.958]],["t/302",[0,2.384,2,0.67,4,2.981,20,0.765,64,1.789,85,1.985,90,2.981,94,2.175,100,3.166,164,3.387,173,2.874,185,3.897,236,1.889,310,4.377,344,3.897,418,4.749,424,3.387,567,2.023,584,1.595,648,2.563,740,3.039,784,2.525,829,3.564,1016,3.564,1062,3.564,1093,3.387,1220,6.495,1245,5.81,1246,3.897,1247,4.035]],["t/304",[2,0.566,44,2.842,64,1.512,311,0.982,320,3.886,360,1.156,365,2.072,418,4.635,478,2.218,529,3.699,533,3.41,584,2.594,648,2.166,686,2.346,710,3.012,740,2.569,784,2.134,847,2.428,888,2.934,1053,6.575,1248,6.898,1249,4.434,1250,4.91,1251,4.91,1252,3.886,1253,4.91]],["t/306",[42,1.293,44,1.685,64,1.455,94,1.77,202,1.366,226,1.995,311,1.919,360,1.12,365,1.995,384,1.839,418,4.585,425,2.024,484,1.716,584,1.298,740,3.513,784,3.394,972,3.659,1053,6.482,1207,3.283,1226,2.834,1252,3.741,1254,7.053,1255,6.181,1256,4.727]],["t/308",[2,0.777,20,0.886,41,2.884,42,1.297,44,2.401,64,2.074,146,3.392,226,3.596,230,2.009,311,1.347,360,1.023,418,4.691,567,2.345,653,3.064,1079,4.518,1257,5.331,1258,6.083]],["t/310",[20,0.801,40,3.318,42,1.173,230,1.816,360,1.163,377,2.048,418,4.689,478,1.958,584,1.672,1053,5.761,1054,7.21,1226,3.37,1252,6.319,1259,4.084,1260,7.21]],["t/312",[2,0.61,29,1.221,30,1.511,42,0.66,44,1.221,56,2.484,70,1.664,228,3.334,230,1.021,257,2.101,311,1.057,332,1.95,360,1.149,377,1.778,403,2.405,418,4.818,484,1.584,526,1.95,584,2.155,632,1.996,648,1.511,686,4.13,735,2.58,784,1.488,847,3.194,993,2.58,1053,6.239,1066,5.832,1220,4.437,1226,3.065,1252,5.747,1260,6.558,1261,2.874,1262,3.425,1263,3.425,1264,3.816]],["t/314",[0,2.184,2,0.96,4,2.731,20,0.96,23,3.57,41,2.279,82,2.044,85,1.664,90,2.731,94,1.993,99,2.68,100,2.9,164,3.103,173,2.632,185,3.57,202,1.538,206,1.968,235,2.138,236,1.73,567,1.853,584,1.462,719,2.977,732,3.356,733,3.356,773,3.841,829,3.265,1009,2.784,1016,3.265,1093,3.103,1104,4.806,1235,3.356,1246,3.57,1247,3.696,1265,3.841]],["t/316",[42,1.257,44,2.977,235,1.8,303,5.478,360,1.142,365,2.755,403,2.97,478,2.099,719,3.062,773,6.027,847,3.229,1266,6.528,1267,5.167,1268,6.528,1269,5.895]],["t/318",[4,3.692,20,0.947,42,1.855,70,3.496,82,2.016,208,3.173,235,1.551,236,2.339,346,4.997,454,3.542,679,4.299,809,4.537]],["t/320",[2,0.46,29,2.525,42,1.364,70,3.442,82,1.117,226,1.682,235,2.017,236,1.295,243,2.007,306,3.002,307,2.171,311,1.999,360,1.065,365,1.682,384,1.55,425,1.706,454,2.955,484,1.775,584,2.154,719,1.325,722,4.28,772,5.626,773,5.662,809,2.513,972,2.171,1235,4.467,1269,3.598,1270,3.344,1271,5.93,1272,3.985,1273,3.598,1274,3.344]],["t/322",[2,0.711,20,0.552,32,2.725,42,1.187,64,1.291,82,2.046,87,1.478,115,2.814,146,2.113,182,2.336,202,1.78,226,3.081,233,1.054,235,2.089,239,2.573,311,1.232,321,2.814,360,1.093,366,3.223,382,2.195,383,2.039,396,2.914,425,1.796,454,1.478,481,2.446,484,1.243,567,1.461,584,2.005,653,1.908,700,2.446,765,3.591,772,4.132,854,3.288,857,2.446,936,3.161,980,3.161,1078,3.161,1149,3.789,1165,3.521,1235,2.646,1275,4.196,1276,3.789,1277,4.196,1278,4.196,1279,4.196,1280,4.196]],["t/324",[20,0.98,40,4.058,42,1.435,230,2.221,235,1.605,360,1.114,377,2.505,478,2.395,719,2.476,1259,4.996,1281,6.251]],["t/326",[5,5.447,70,3.344,208,3.036,230,2.052,234,2.864,235,1.861,360,1.083,377,2.314,663,6.215,686,4.125,719,2.871,1058,5.185,1282,6.883,1283,8.636]],["t/328",[39,1.628,226,2.309,233,0.899,235,1.602,243,1.803,360,1.19,364,1.803,365,1.511,377,1.204,384,2.128,484,1.873,560,1.904,582,2.697,605,2.833,648,1.579,653,2.488,686,4.666,719,3.011,765,2.087,770,2.325,1057,3.233,1226,3.707,1267,2.833,1284,5.47,1285,3.58,1286,3.58,1287,3.58,1288,5.47,1289,3.669,1290,3.58,1291,2.833]],["t/330",[2,0.948,64,2.531,85,1.875,234,3.421,236,2.673,1009,4.3]],["t/332",[0,2.096,2,1.015,4,2.621,18,2.978,20,0.672,75,2.572,83,3.133,85,1.858,90,2.621,94,1.912,100,2.783,164,2.978,173,2.526,185,3.426,233,2.403,414,2.908,451,4.043,478,1.642,535,4.463,560,1.778,639,2.126,653,2.324,795,2.4,829,5.396,1016,3.133,1079,3.426,1093,2.978,1246,3.426,1247,3.548,1265,3.686,1292,5.108,1293,4.287,1294,5.108,1295,5.108]],["t/334",[18,4.792,85,1.875,233,2.065,470,6.194,535,3.74,584,2.257]],["t/336",[2,0.566,44,2.459,228,3.097,233,1.732,360,1.156,396,3.41,403,3.138,535,4.297,560,1.709,639,3.791,648,2.166,752,3.465,832,2.386,992,6.229,1060,4.978,1062,3.012,1226,3.65,1264,3.544,1289,4.627,1296,6.898,1297,6.229,1298,6.898]],["t/338",[2,0.619,29,1.913,43,2.93,44,1.913,252,2.522,265,2.564,360,1.171,422,2.924,526,3.056,535,3.802,560,2.554,625,3.6,639,2.234,653,3.337,752,3.188,784,2.332,832,3.565,1072,5.527,1098,4.847,1226,3.528,1289,3.6,1293,4.504,1297,6.626]],["t/340",[2,0.915,42,1.162,43,2.409,75,3.037,110,2.795,228,5.003,233,1.515,254,4.353,265,2.881,312,4.045,407,4.189,478,2.551,526,3.434,529,4.544,535,4.451,560,2.1,604,5.977,648,2.66,653,3.609,700,3.516,735,5.977,784,2.621,1226,2.546]],["t/342",[2,0.545,20,0.884,21,4.664,39,2.15,56,2.221,64,2.067,85,1.94,91,2.981,110,2.366,183,3.561,193,2.632,223,3.411,228,2.981,233,1.687,242,3.741,257,2.899,263,2.981,271,3.155,290,3.738,312,4.504,326,2.691,407,4.664,452,4.269,535,3.055,537,6.064,560,1.646,627,2.297,639,1.967,653,3.553,795,3.155,798,3.967,865,3.967,866,3.513,869,3.561,884,3.967,901,3.171,953,3.741,1004,2.691,1079,3.171,1299,3.967,1300,4.727,1301,4.727,1302,6.715,1303,4.727]],["t/344",[42,1.052,233,1.371,311,1.686,360,1.168,384,2.124,484,1.498,535,2.484,560,2.936,627,2.653,639,3.089,682,2.372,752,3.225,784,2.372,942,5.657,972,2.975,1226,4.12,1289,3.662,1304,4.582,1305,5.46]],["t/346",[2,0.745,64,2.554,233,1.623,311,1.292,316,2.894,360,1.12,403,2.939,533,4.488,535,4.169,560,2.249,639,2.689,819,4.52,854,3.448,1079,4.334,1214,5.835,1226,2.727,1306,5.422,1307,6.462]],["t/348",[20,0.695,40,2.876,42,1.017,85,1.204,230,2.66,233,1.326,252,3.407,360,1.133,377,1.775,422,3.952,478,1.697,535,3.769,560,2.525,584,1.449,625,4.865,639,3.018,752,3.152,832,3.525,1072,5.464,1226,4.079,1259,3.54,1281,4.429]],["t/350",[2,0.599,29,1.851,44,1.851,56,2.439,92,2.664,230,1.548,233,1.304,252,3.369,360,1.129,377,1.746,422,3.907,484,1.447,535,3.737,560,2.496,587,3.373,625,4.81,632,3.026,639,2.984,686,3.924,752,3.116,832,3.485,1072,5.402,1226,4.058,1281,4.357]],["t/352",[2,0.534,20,0.381,29,1.031,39,1.316,43,1.849,56,2.175,66,1.687,85,1.321,87,1.019,94,1.083,154,1.647,182,2.509,202,0.836,261,2.92,290,1.611,307,1.576,311,0.579,315,2.699,329,1.382,332,2.637,360,1.137,364,1.457,365,1.221,371,1.825,377,1.557,383,4.094,395,3.296,424,1.687,481,1.687,484,0.584,498,1.611,560,2.304,646,2.01,648,2.042,670,3.489,673,1.941,710,5.329,735,2.18,770,1.88,797,6.189,866,1.514,1009,1.514,1010,4.438,1080,2.01,1207,5.027,1308,5.228,1309,2.894,1310,4.182,1311,2.894,1312,4.631,1313,2.894,1314,2.894,1315,2.894,1316,2.613,1317,2.613,1318,4.631,1319,4.858,1320,4.631,1321,4.631,1322,3.342,1323,2.894,1324,2.894,1325,2.894]],["t/354",[2,0.558,85,1.804,154,2.753,202,1.972,311,1.581,360,1.136,377,1.626,484,0.976,639,2.012,710,5.766,735,3.643,795,3.206,797,6.529,1010,4.577,1045,2.889,1073,3.827,1207,5.492,1299,4.058,1308,6.162,1317,4.367,1319,5.726,1326,6.824,1327,4.367,1328,6.824,1329,4.835,1330,4.835]],["t/356",[2,0.487,81,3.048,85,1.672,87,1.488,115,4.152,182,3.06,202,1.22,225,2.254,311,1.238,316,1.891,318,1.506,360,1.156,371,2.663,377,2.082,383,3.008,484,0.852,560,1.47,639,1.757,710,3.797,740,3.238,797,4.299,918,2.744,1010,5.413,1174,3.182,1207,4.299,1299,5.195,1310,3.814,1316,3.814,1331,4.223,1332,7.329,1333,7.329,1334,4.223,1335,4.223,1336,6.191,1337,4.223,1338,4.223,1339,4.223,1340,4.223,1341,4.223,1342,4.223]],["t/358",[2,1.066,4,2.621,43,2.04,64,1.572,69,1.961,92,2.621,146,2.572,202,2.049,225,2.726,233,2.403,279,3.052,386,2.978,478,2.829,493,3.709,559,3.426,584,2.236,665,4.287,719,3.326,732,3.221,752,2.22,765,4.748,770,3.318,868,3.686,1039,4.613,1045,3.052,1062,3.133,1319,4.287,1343,5.108]],["t/360",[0,2.203,85,1.674,226,2.265,233,1.348,235,1.581,271,2.522,360,1.147,458,4.5,559,3.6,584,1.474,719,2.779,729,6.157,732,3.385,740,2.808,752,2.332,814,3.6,815,4.5,816,3.874,817,3.6,819,2.924,978,3.385,1344,7.549,1345,6.626,1346,4.504,1347,4.504,1348,5.368,1349,5.368]],["t/362",[41,2.086,42,1.66,85,1.565,146,2.454,202,2.295,221,2.989,225,2.6,233,1.994,234,3.304,235,1.479,236,2.581,311,1.588,316,2.182,360,0.943,384,2.669,425,2.086,441,3.516,484,0.983,559,3.268,567,1.696,584,1.338,682,2.117,719,2.865,778,3.073,819,3.738,820,3.671,835,3.384,942,3.268,972,2.655,1073,3.856,1344,4.4,1345,4.4,1346,4.089,1350,2.989,1351,4.873,1352,3.671]],["t/364",[0,3.288,2,0.924,20,1.054,202,2.316,233,2.013,631,7.236,719,2.664,737,6.725]],["t/366",[0,1.745,2,0.718,5,6.819,82,2.414,99,2.141,108,2.681,199,3.203,202,1.798,206,1.572,225,3.32,233,1.848,234,2.589,236,2.022,311,0.85,321,2.852,360,1.064,382,3.254,418,2.972,454,1.498,478,1.367,484,0.858,682,1.847,696,3.365,700,2.478,709,2.269,719,2.864,724,3.568,739,3.203,740,2.224,741,3.365,833,2.608,919,2.608,986,3.568,1016,2.608,1060,3.068,1353,4.252,1354,4.252,1355,4.252,1356,8.096,1357,6.221,1358,4.252,1359,4.252,1360,4.252,1361,4.252,1362,4.252]],["t/368",[2,0.683,64,1.822,69,2.273,82,1.659,92,3.037,94,2.216,108,4.941,120,3.295,146,2.981,202,1.71,206,2.188,221,3.63,225,3.159,233,1.968,234,3.261,236,2.856,311,1.183,360,0.648,484,1.195,584,1.625,701,3.97,719,2.605,772,3.97,773,4.271,777,5.345,967,4.967,1235,4.941,1363,7.836]],["t/370",[82,1.467,85,1.882,202,1.513,225,2.793,233,1.315,234,3.433,235,1.778,236,2.682,311,1.047,336,3.301,360,1.021,484,1.056,542,3.944,584,1.437,719,2.398,729,6.052,732,3.301,740,2.738,748,3.635,773,5.204,778,3.301,815,3.211,816,3.778,817,3.511,819,3.929,820,3.944,1346,4.393,1347,4.393,1350,3.211,1364,5.235,1365,7.212,1366,5.235,1367,5.235]],["t/372",[1,4.32,2,0.465,31,2.032,41,1.728,42,1.153,85,0.921,92,2.071,115,2.707,146,2.032,149,3.04,202,2.062,223,2.912,224,2.297,233,1.792,291,3.194,311,1.197,360,1.097,364,2.032,365,1.703,377,2.013,484,0.814,627,1.961,701,2.707,707,3.386,719,3.19,731,5.988,739,3.04,752,2.601,778,2.545,814,4.015,815,4.377,816,2.912,817,2.707,819,3.261,820,4.51,972,2.198,1032,3.644,1073,3.194,1347,3.386,1350,3.672,1368,4.035,1369,5.986,1370,5.986,1371,5.986,1372,4.035,1373,4.035,1374,4.035]],["t/374",[2,0.849,20,1.185,42,1.418,56,3.458,92,3.777,228,4.643,230,2.685,567,2.563,686,4.301,719,3.234]],["t/376",[2,0.589,39,2.324,42,1.366,44,1.821,56,3.331,230,1.523,234,2.126,235,1.755,243,2.572,304,2.44,316,2.288,360,1.156,364,2.572,365,2.156,377,1.718,384,1.987,386,2.978,441,3.686,587,3.318,653,2.324,679,3.052,686,3.387,719,2.357,847,2.526,1062,3.133,1063,4.287,1267,4.043,1291,4.043,1375,5.108,1376,7.091,1377,5.108,1378,5.108,1379,5.108,1380,5.108]],["t/378",[2,0.716,44,2.213,56,2.917,233,1.559,234,3.365,235,1.338,236,2.018,360,1.108,377,2.088,406,5.607,484,1.253,627,3.929,686,2.966,719,2.064,866,4.229,867,2.48,1381,6.209,1382,7.302,1383,6.209,1384,6.209,1385,6.209,1386,6.209]],["t/380",[2,0.859,20,0.98,44,2.655,70,3.619,99,3.751,304,3.558,311,1.813,316,3.336,358,3.751,484,1.503,571,4.996,784,3.236,846,5.375]],["t/382",[29,2.508,44,2.508,311,1.906,425,3.749,451,5.568,484,1.42,584,1.932,598,4.315,648,3.103,838,5.3,847,3.479,857,4.101,1387,5.904,1388,5.904,1389,5.904,1390,7.035]],["t/384",[29,2.655,70,3.619,87,2.624,304,3.558,311,1.813,366,3.896,384,2.897,425,3.189,484,1.83,584,2.045,598,4.569,1391,6.726]],["t/386",[2,0.604,27,3.128,29,2.941,70,2.544,87,1.844,206,1.935,226,2.209,266,2.589,304,2.5,311,1.927,360,1.021,384,2.805,425,3.088,484,1.665,559,3.511,584,2.647,598,5.453,944,3.301,984,4.727,985,4.393,1392,3.778,1393,7.212,1394,7.212,1395,5.235,1396,5.235]],["t/388",[2,0.5,20,0.571,29,2.653,42,1.434,82,1.216,110,1.528,206,3.022,226,1.831,233,1.09,235,1.361,311,1.488,336,2.736,360,1.141,384,1.688,418,2.073,454,2.224,478,1.395,484,0.876,535,1.974,560,2.198,584,2.245,637,2.27,638,4.385,639,2.627,722,4.557,723,3.269,809,2.736,832,2.108,847,3.123,1004,2.47,1051,2.27,1060,3.131,1264,3.131,1274,3.641,1350,2.661,1397,5.702,1398,6.314,1399,3.131,1400,3.434,1401,4.339]],["t/390",[42,1.099,123,2.822,311,1.842,346,3.963,360,1.124,365,2.408,418,3.653,484,1.543,637,4.512,972,3.109,1004,3.249,1051,4.512,1207,3.963,1254,6.905,1397,6.905,1400,4.516,1402,5.706,1403,5.706,1404,5.706,1405,5.706,1406,5.706,1407,5.706]],["t/392",[2,0.803,42,1.34,44,2.48,99,3.504,311,1.896,316,3.116,484,1.755,560,2.422,691,5.839,1009,3.64,1010,4.667,1045,4.158,1387,5.839,1388,5.839,1389,5.839,1408,6.958,1409,6.958]],["t/394",[25,2.651,29,2.11,73,2.572,208,2.611,222,5.345,234,2.463,252,2.78,271,2.78,278,4.967,311,1.869,360,0.858,386,3.45,444,3.845,484,1.887,584,1.625,598,3.63,611,3.97,888,3.537,1097,5.345,1352,4.459,1387,4.967,1388,4.967,1389,4.967,1391,5.345,1410,5.919,1411,5.919,1412,5.345,1413,5.919,1414,5.919]],["t/396",[0,2.599,2,0.73,4,3.249,20,0.833,85,1.868,90,3.249,94,2.371,100,3.45,164,3.691,173,3.132,185,4.247,236,2.059,478,2.036,637,4.748,733,3.993,784,2.752,829,3.884,1016,3.884,1093,3.691,1246,4.247,1247,4.398,1264,4.57,1265,4.57,1399,6.551]],["t/398",[44,2.544,75,2.032,125,3.04,182,1.53,344,4.015,360,1.191,584,1.108,605,3.194,637,4.621,658,5.023,752,3.664,814,4.015,832,2.909,857,2.352,888,2.411,924,2.411,1045,2.411,1049,5.15,1062,2.475,1226,1.703,1229,2.707,1249,3.644,1399,6.599,1415,4.035,1416,3.644,1417,4.035,1418,5.986,1419,5.986,1420,5.986,1421,4.035,1422,4.035,1423,4.035]],["t/400",[2,0.553,42,1.307,44,1.711,94,1.796,202,1.387,226,2.025,311,1.969,360,1.111,365,2.025,384,1.867,425,2.055,484,1.728,584,1.864,637,4.478,658,4.027,784,2.085,972,3.698,1049,6.519,1051,2.51,1206,3.798,1226,3.324,1255,6.233,1270,4.027,1399,4.898,1424,7.875]],["t/402",[2,0.785,20,0.896,42,1.311,44,2.427,64,2.096,146,3.429,226,3.62,230,2.03,311,1.361,360,1.028,567,2.37,637,5.157,653,3.097,1079,4.567,1257,5.389,1425,6.809]],["t/404",[20,0.833,40,3.45,42,1.22,230,1.888,360,1.149,377,2.129,478,2.036,584,2.493,637,4.748,1049,5.91,1050,7.396,1226,3.457,1259,4.247,1399,5.91]],["t/406",[2,0.664,29,2.052,44,2.052,56,3.614,230,2.294,257,3.531,360,1.152,377,1.936,484,1.553,584,2.112,587,3.74,632,3.356,637,4.532,686,3.675,1049,6.252,1064,5.199,1226,3.247,1261,4.832,1399,5.552]],["t/408",[0,2.363,4,2.954,20,0.758,64,1.772,85,1.976,87,2.028,90,2.954,94,2.155,99,2.9,100,3.137,164,3.356,173,2.847,185,3.862,201,3.862,310,4.338,344,3.862,366,4.024,444,3.74,458,3.531,627,2.798,665,4.832,784,3.343,829,3.531,997,4.832,1016,3.531,1051,4.837,1093,3.356,1246,3.862,1247,3.999,1293,6.456,1426,5.758]],["t/410",[44,2.98,50,4.044,64,2.896,360,1.183,366,2.808,626,3.056,740,2.808,749,4.248,784,3.632,1004,4.759,1051,5.433,1427,5.368,1428,5.368]],["t/412",[42,1.273,44,2.356,64,1.423,94,1.731,202,1.336,226,1.952,311,1.95,360,1.127,365,1.952,384,1.799,425,1.98,484,1.699,584,1.27,626,5.071,784,3.352,972,3.601,1051,5.102,1206,5.232,1226,2.79,1255,6.106,1270,3.88,1429,5.969,1430,4.624,1431,4.624]],["t/414",[2,0.927,20,0.809,35,3.877,42,1.184,44,2.192,75,3.096,85,1.833,98,4.437,164,3.584,230,1.833,261,3.877,307,3.35,311,1.969,360,0.879,441,4.437,626,3.501,707,5.16,866,4.203,1051,4.681,1429,5.552,1432,6.148,1433,6.148]],["t/416",[2,0.785,20,0.896,42,1.311,64,2.096,146,3.429,226,3.62,230,2.03,311,1.361,360,1.028,567,2.37,584,1.87,653,3.097,1051,5.157,1079,4.567,1257,5.389,1434,6.809]],["t/418",[20,0.936,40,3.876,42,1.37,193,3.96,230,2.121,377,2.392,478,2.287,584,1.953,626,4.05,749,5.631,1004,4.05,1051,5.011,1085,6.424,1259,4.772,1435,7.114,1436,7.114]],["t/420",[2,0.537,20,0.613,29,1.66,39,2.119,44,2.761,56,3.122,61,3.235,70,2.263,202,1.346,230,2.31,239,2.857,257,2.857,284,5.259,311,1.689,360,0.727,478,1.498,484,1.563,544,3.686,574,3.686,584,1.825,587,5.032,632,2.715,686,4.436,740,3.476,866,2.436,873,5.006,993,3.509,1051,4.999,1261,3.909,1322,3.361,1437,6.645,1438,3.909,1439,4.658,1440,4.658,1441,4.658,1442,4.658]],["t/422",[2,0.73,20,0.833,42,1.22,69,2.432,70,3.077,85,1.445,115,4.247,135,3.784,206,2.341,221,3.884,235,1.956,236,2.059,243,3.189,272,4.114,443,4.57,484,1.278,497,3.785,536,4.57,567,2.205,625,4.247,648,2.793,733,3.993,867,2.529,919,3.884,972,3.45,1045,3.784]],["t/424",[2,0.796,23,3.293,42,1.536,44,1.75,82,1.933,233,1.233,235,2.135,311,1.594,360,0.946,425,3.414,454,2.809,484,1.839,497,4.578,536,3.544,560,2.401,624,3.41,711,3.886,819,3.758,901,3.293,918,3.19,972,2.675,1226,2.911,1350,4.231]],["t/426",[0,1.34,4,3.215,30,1.441,42,1.207,64,1.005,69,1.254,82,0.915,83,2.003,202,0.944,206,1.884,233,2.134,234,2.121,235,1.351,236,1.062,295,3.839,311,1.415,359,1.534,360,1.163,382,2.666,403,1.486,454,1.151,484,1.265,497,2.355,560,1.137,567,1.137,772,3.418,778,3.214,854,2.719,867,2.035,919,3.843,1078,2.461,1235,5.358,1443,3.266,1444,5.096,1445,6.266,1446,3.266,1447,3.266,1448,3.266,1449,6.266,1450,8.79,1451,7.677,1452,3.266,1453,3.266,1454,2.949,1455,2.741,1456,3.266]],["t/428",[20,0.815,39,1.921,42,1.412,82,1.183,85,1.412,91,2.663,195,3.343,213,3.814,235,1.852,249,3.544,261,2.663,290,2.351,311,1.465,360,1.041,365,2.613,377,1.42,403,1.921,443,3.048,444,2.744,454,2.582,484,1.629,497,4.288,584,1.16,653,2.816,680,3.343,700,2.462,772,2.833,778,3.904,818,2.933,918,4.022,928,3.048,1062,2.59,1235,3.904,1455,3.544,1457,4.223,1458,4.223,1459,5.591,1460,4.223,1461,3.544,1462,4.223,1463,3.814,1464,4.223,1465,4.223,1466,4.223,1467,4.223]],["t/430",[87,2.028,146,2.9,206,2.129,230,1.717,235,1.241,311,1.151,327,3.862,360,1.152,377,1.936,484,1.749,497,4.004,670,4.338,772,3.862,775,5.199,778,3.631,818,5.343,867,2.299,919,3.531,1235,4.851,1463,6.947,1468,5.758,1469,5.758,1470,5.758]],["t/432",[2,1.004,20,0.656,30,2.2,64,2.475,75,2.512,81,3.599,85,1.986,110,1.757,202,1.441,221,3.059,227,3.757,250,2.907,256,5.52,271,3.276,307,2.717,312,3.345,316,2.234,329,3.331,364,2.512,383,2.424,419,3.947,478,2.242,560,1.736,632,2.907,648,2.2,673,3.345,701,4.678,737,5.852,749,5.52,770,5.224,784,2.167,833,3.059,1009,3.648,1010,3.345,1471,4.988,1472,4.988,1473,6.974]],["t/434",[0,1.146,2,0.652,20,0.592,42,1.601,64,1.385,85,1.622,154,1.589,193,1.554,202,1.3,235,1.792,236,1.463,290,2.505,311,1.296,318,1.604,360,1.18,377,1.513,425,2.776,454,0.983,478,1.447,484,1.308,682,1.955,752,3.472,832,3.454,833,1.712,857,1.627,1009,5.065,1045,1.668,1060,3.247,1222,1.939,1474,7.598,1475,2.343,1476,6.482,1477,5.652,1478,4.499,1479,3.776,1480,2.343,1481,4.499,1482,2.343]],["t/436",[0,1.667,2,0.694,85,1.634,170,3.408,202,1.174,221,2.491,235,0.875,250,2.367,255,3.408,279,2.427,360,1.15,365,2.539,377,1.366,425,1.739,484,0.82,558,2.561,560,1.414,584,1.115,602,3.06,627,2.923,639,1.69,646,2.82,682,3.112,759,3.06,767,2.931,795,3.365,796,2.931,832,2.923,833,2.491,896,4.393,944,2.561,1009,4.793,1022,2.931,1392,2.931,1483,4.061,1484,6.015,1485,6.015,1486,6.015,1487,4.061,1488,3.667,1489,6.015,1490,6.015,1491,4.061,1492,5.047]],["t/438",[31,2.307,66,1.664,73,1.24,85,0.651,87,1.005,161,2.395,202,1.324,206,1.694,221,1.751,235,1.237,249,2.395,257,1.751,266,1.412,337,1.555,360,1.13,377,1.54,418,3.852,481,1.664,484,1.325,493,2.396,560,1.595,567,0.994,627,3.191,639,1.906,646,3.181,648,2.896,657,1.915,682,2.853,701,1.915,739,2.15,752,1.99,759,3.451,760,5.181,767,3.306,784,1.24,795,3.085,796,3.306,814,3.072,815,2.81,817,3.072,832,2.788,857,1.664,888,1.706,896,1.751,942,4.404,1009,4.83,1074,2.578,1179,4.136,1475,6.033,1493,8.064,1494,2.578,1495,4.581,1496,2.854,1497,4.581,1498,2.854,1499,2.854,1500,4.581]],["t/440",[30,1.535,43,1.39,64,1.072,83,2.135,85,1.488,182,1.32,202,1.006,235,0.75,238,2.195,266,1.722,311,0.696,316,2.398,318,1.909,326,1.982,360,1.152,365,2.754,371,2.195,377,1.171,383,3.17,395,4.501,418,1.663,425,1.491,481,3.121,484,1.081,498,2.981,567,1.212,571,3.591,626,1.982,648,2.362,682,2.327,752,2.835,770,2.262,784,1.513,797,3.718,832,1.692,833,2.135,1009,4.816,1048,4.238,1080,2.418,1222,2.418,1480,2.921,1488,3.144,1492,4.493,1501,3.481,1502,3.144,1503,3.144,1504,3.481,1505,3.144,1506,3.481,1507,2.755,1508,3.481,1509,4.835,1510,3.481,1511,4.835,1512,4.835]],["t/442",[0,1.244,42,0.584,43,1.211,64,1.479,70,1.473,85,0.692,182,1.149,202,1.389,235,0.653,252,1.424,255,2.544,266,1.499,311,0.606,318,1.713,360,1.176,365,1.28,371,1.912,377,1.019,383,2.336,395,1.726,425,1.298,484,0.97,498,1.688,567,1.673,571,4.557,682,2.088,706,3.338,719,2.62,743,2.544,752,3.589,769,4.033,784,2.088,797,3.338,832,1.473,868,3.469,942,3.224,1009,4.32,1048,3.804,1222,3.338,1475,5.011,1479,4.033,1480,2.544,1482,4.033,1492,4.033,1505,2.738,1507,2.4,1509,6.136,1511,4.34,1512,4.34,1513,4.34,1514,5.971,1515,3.032,1516,3.032,1517,3.032,1518,3.032]],["t/444",[58,2.568,85,2.079,115,3.726,154,4.276,250,5.313,316,2.488,328,4.185,365,3.17,366,2.906,484,1.516,648,3.753,719,1.847,784,2.414,944,3.504,1009,5.248,1222,5.216,1259,3.726,1392,4.009,1454,5.017,1482,4.662,1513,5.017,1519,5.556,1520,5.556,1521,5.556,1522,5.017]],["t/446",[20,1.068,73,3.526,139,7.329,216,5.444,276,5.857,602,6.114,1009,4.245]],["t/448",[2,0.964,31,3.695,202,1.551,206,1.985,346,3.728,360,1.164,484,1.481,864,4.847,896,3.292,1009,3.838,1058,4.044,1226,2.265,1229,3.6,1392,3.874,1523,7.337,1524,6.626,1525,7.337,1526,5.368,1527,7.337,1528,7.337,1529,7.337,1530,5.368,1531,7.337]],["t/450",[20,0.958,70,3.536,110,2.564,149,5.483,190,4.589,268,5.054,271,3.419,273,5.054,315,4.242,412,6.107,469,4.589,867,2.906,928,5.252,976,6.107,1009,3.807,1532,7.278]],["t/453",[2,0.553,20,0.893,33,2.671,42,0.924,85,1.095,87,1.69,94,1.796,107,2.417,110,1.69,120,2.671,154,3.864,201,3.219,230,2.693,235,1.463,252,2.254,256,3.798,264,2.943,312,3.219,318,1.711,332,2.732,360,1.055,377,2.282,419,3.798,454,1.69,484,1.728,560,1.671,584,2.162,734,2.561,752,2.949,789,5.696,814,4.552,828,4.027,838,5.113,1229,3.219,1255,3.798,1352,3.615,1533,4.799,1534,4.799]],["t/456",[2,0.905,20,1.266,56,2.237,66,2.776,69,3.011,87,1.678,94,1.783,113,2.201,123,3.339,145,3.77,202,1.376,225,2.542,235,1.027,265,3.225,279,2.846,298,3.094,311,1.35,332,2.712,360,0.934,382,2.491,386,3.935,414,2.712,424,2.776,458,2.921,493,2.491,624,3.308,701,4.528,747,3.195,833,4.141,1030,4.301,1063,3.997,1072,5.086,1106,5.665,1535,4.763,1536,4.763,1537,4.301,1538,5.343,1539,4.763,1540,3.77,1541,4.763]],["t/458",[2,0.766,26,1.66,29,2.761,36,5.006,43,1.86,45,3.026,107,2.346,123,3.831,182,1.766,230,1.389,266,3.286,304,4.035,311,0.931,360,0.51,382,2.436,383,2.263,394,3.361,401,2.937,404,5.576,424,2.715,454,1.641,457,5.259,459,3.909,467,4.885,469,5.327,481,2.715,498,3.699,513,3.909,557,3.509,559,3.124,560,1.622,563,3.361,598,2.857,614,3.509,1080,3.235,1322,3.361,1538,3.686,1540,3.686,1542,4.206,1543,3.909,1544,4.658,1545,4.658,1546,4.658,1547,4.658,1548,4.658,1549,4.206,1550,4.658]],["t/460",[20,0.809,86,4.124,123,3.041,318,2.192,360,1.126,492,6.215,498,5.481,747,4.124,1542,7.255,1551,6.148,1552,8.949,1553,6.148,1554,6.148,1555,6.148,1556,5.552,1557,5.552,1558,6.148]],["t/462",[2,0.504,41,1.871,42,1.58,44,1.557,82,1.224,87,2.235,182,2.406,193,3.533,196,3.945,202,2.159,230,3.004,263,2.755,359,2.052,360,1.051,377,1.469,380,3.153,383,3.084,454,1.539,457,5.022,458,2.68,467,4.712,469,4.002,484,0.882,498,4.565,542,4.781,558,2.755,611,2.93,614,3.291,626,2.487,651,3.945,657,5.501,819,2.38,838,3.291,1559,4.369,1560,4.369,1561,4.369,1562,4.369]],["t/464",[20,1.003,25,2.026,26,1.613,29,2.32,182,1.715,233,1.635,262,2.853,304,4.219,329,2.161,359,3.916,360,1.122,383,3.163,395,2.576,401,2.853,458,2.775,459,3.797,460,3.797,461,4.086,462,3.797,467,4.104,469,5.257,473,4.086,558,2.853,598,5.113,627,2.199,912,3.581,1259,3.035,1538,5.151,1540,3.581,1543,3.797,1563,6.509,1564,4.086,1565,4.525,1566,4.086,1567,4.525,1568,4.525,1569,4.525]],["t/466",[2,0.602,20,1.131,25,3.224,30,1.487,42,0.649,123,3.561,182,2.423,270,3.293,304,3.439,311,0.674,316,2.339,318,1.201,359,4.038,360,1.179,383,1.638,384,2.031,385,2.261,462,4.382,467,2.125,478,1.084,498,1.876,599,3.044,708,2.261,878,3.044,950,3.044,1009,1.763,1010,2.261,1062,2.067,1156,4.382,1192,3.044,1538,5.06,1540,4.133,1543,4.382,1549,4.716,1556,3.044,1557,3.044,1564,3.044,1566,4.716,1570,3.37,1571,3.37,1572,3.37,1573,3.37,1574,3.37,1575,3.37,1576,3.37,1577,5.222,1578,3.37,1579,3.044,1580,3.37,1581,3.37]],["t/468",[0,2.047,4,2.559,20,0.918,64,2.147,82,2.253,90,2.559,92,2.559,94,1.867,98,3.599,100,2.717,164,2.907,173,2.467,185,3.345,233,2.02,234,3.951,235,2.046,250,4.065,290,2.776,326,2.84,327,4.678,337,2.717,478,2.242,626,2.84,741,3.947,829,3.059,866,2.609,867,1.992,868,3.599,890,3.599,905,4.185,1016,3.059,1093,2.907,1246,3.345,1247,3.464,1265,3.599,1582,4.504,1583,4.988]],["t/470",[2,0.646,20,0.737,27,4.515,85,1.279,87,1.974,190,3.534,233,2.147,234,3.144,235,2.058,316,2.51,326,4.302,360,0.827,364,2.823,394,4.045,458,3.438,484,1.725,536,4.045,567,1.951,648,2.472,719,2.512,784,2.435,867,3.653,993,4.222,1226,2.366,1236,5.061,1237,5.061]],["t/472",[2,0.63,44,1.946,87,1.923,233,2.118,234,2.272,235,1.177,327,3.662,360,1.14,364,3.738,365,2.304,478,2.387,484,1.102,563,3.94,567,2.936,584,1.499,867,4.059,905,4.582,1174,4.113,1226,3.133,1273,4.931,1584,4.931,1585,5.46]],["t/474",[2,0.5,27,2.593,29,2.251,123,2.146,190,2.736,233,1.586,234,1.806,235,0.935,236,1.411,243,2.185,266,4.296,360,1.148,478,1.395,484,0.876,493,2.27,560,2.591,567,2.198,710,5.014,719,1.443,732,2.736,752,1.885,832,3.617,867,3.265,896,3.873,924,2.593,1018,3.918,1045,2.593,1226,1.831,1291,4.997,1586,4.339,1587,3.918,1588,4.339,1589,5.702,1590,3.918,1591,4.339,1592,4.339,1593,4.339,1594,4.339,1595,4.339,1596,4.339]],["t/476",[2,0.399,27,2.069,43,1.383,44,1.234,63,2.499,116,3.362,182,1.313,202,1.001,233,1.339,236,1.733,243,4.81,263,2.183,266,2.637,336,2.183,360,1.122,396,2.405,403,1.575,418,1.654,478,1.113,481,2.018,484,1.312,498,4.988,558,3.362,560,1.856,567,1.856,736,2.405,867,3.578,896,3.988,904,3.127,1008,6.869,1226,1.461,1289,2.322,1494,3.127,1597,3.462,1598,3.462,1599,3.462,1600,3.462,1601,3.462,1602,3.462,1603,3.462,1604,3.127,1605,6.502,1606,3.462,1607,3.127,1608,3.462,1609,3.462,1610,3.462,1611,3.462,1612,3.462,1613,3.462,1614,3.462,1615,3.462]],["t/478",[2,0.43,44,1.329,202,1.077,233,1.417,236,1.212,243,4.618,266,2.789,336,2.35,360,1.166,395,3.211,478,1.198,484,1.138,558,3.557,560,1.963,562,5.955,567,1.963,710,3.459,736,2.588,834,3.128,867,3.255,894,2.69,896,4.173,1008,6.005,1291,4.464,1604,5.093,1607,5.093,1616,3.727,1617,3.727,1618,3.727,1619,3.727,1620,3.727,1621,3.727,1622,5.64,1623,5.64,1624,3.727,1625,3.727,1626,3.727,1627,3.727,1628,3.727,1629,3.727,1630,3.727,1631,3.727]],["t/480",[2,0.36,25,1.398,42,0.947,44,1.113,57,2.168,85,1.388,92,1.602,96,1.968,221,1.915,232,2.619,233,0.784,234,3.321,235,1.8,263,1.968,307,1.701,311,0.624,360,1.14,377,1.05,391,2.47,414,1.777,444,2.028,450,2.028,454,2.144,478,2.566,484,1.516,497,3.472,582,5.203,584,0.857,625,3.299,626,4.544,627,3.356,632,2.867,767,3.549,866,2.573,867,3.187,972,1.701,1289,5.805,1632,4.918,1633,3.121,1634,3.121,1635,3.121,1636,3.121,1637,3.121,1638,4.918,1639,3.121,1640,3.121,1641,3.121,1642,3.121,1643,3.121,1644,3.121,1645,3.121]],["t/482",[2,0.558,41,2.07,85,1.103,182,1.833,206,1.788,233,1.214,235,1.704,311,0.967,360,1.153,376,3.243,422,2.634,448,5.401,484,1.377,498,3.799,562,4.739,563,4.924,684,5.761,710,4.185,798,4.058,867,3.618,895,5.726,906,3.49,1175,3.827,1257,3.827,1438,4.058,1646,6.162,1647,4.367,1648,4.835,1649,6.162]],["t/484",[20,0.779,41,2.534,85,1.35,230,1.765,233,1.487,235,1.276,360,1.157,377,1.99,498,3.295,562,4.111,782,5.345,867,2.364,895,4.967,1174,4.459,1650,5.919,1651,5.919,1652,5.919,1653,5.919,1654,9.35,1655,5.919,1656,5.919,1657,5.919,1658,5.919,1659,5.919]],["t/486",[2,0.714,20,0.556,29,1.506,43,1.687,56,1.984,64,1.3,96,2.663,99,2.127,202,1.22,226,2.613,235,0.91,239,2.59,360,1.128,364,2.127,377,2.082,419,3.343,478,1.99,481,2.462,484,1.249,492,2.933,498,4.08,553,4.152,587,2.744,632,2.462,686,2.017,719,2.683,851,3.544,867,3.705,874,3.343,896,2.59,972,2.301,1078,3.182,1226,2.613,1264,3.048,1416,3.814,1584,3.814,1589,3.814,1590,3.814,1660,4.223,1661,4.223,1662,4.223,1663,4.223,1664,4.223,1665,3.814,1666,4.223,1667,4.223,1668,4.223,1669,4.223]],["t/488",[2,0.658,20,0.751,25,2.555,30,2.517,42,1.099,82,2.417,230,1.701,235,1.648,325,5.311,360,1.124,377,1.919,396,3.963,403,2.595,449,4.516,450,3.707,454,3.246,682,3.748,732,3.598,734,3.045,1215,6.417,1274,4.788,1670,5.706,1671,5.706]],["t/490",[2,0.676,4,3.009,29,2.09,42,1.5,64,1.805,82,1.643,311,1.557,360,1.13,377,1.972,454,3.08,484,1.184,682,3.799,740,3.067,778,3.698,780,4.921,978,3.698,1264,4.232,1672,7.896,1673,5.864,1674,7.788,1675,5.864]],["t/492",[2,0.88,69,2.929,82,2.137,224,4.343,235,1.644,325,5.297,448,6.037,449,6.037,450,4.955,454,2.687,653,3.47,1503,6.888]],["t/494",[182,2.857,235,1.624,311,1.507,360,1.118,383,3.663,819,4.106,854,4.022,1306,6.325,1350,4.623,1676,7.537]],["t/496",[0,2.406,2,0.676,58,2.71,82,1.643,182,2.952,202,1.695,233,1.473,235,2.09,311,1.172,360,1.113,365,2.475,383,2.85,454,2.066,481,3.418,484,1.572,819,3.195,854,3.129,867,3.11,907,4.232,936,4.418,1092,4.418,1306,4.921,1350,3.597,1677,5.864]],["t/498",[2,0.951,20,1.2,64,1.969,85,1.459,221,3.923,243,3.221,250,3.729,336,4.034,364,4.151,450,4.155,606,7.654,632,3.729,719,2.127,734,5.141,740,3.346,784,2.779,846,4.616,1058,4.819,1080,4.442]],["t/500",[360,1.185,377,2.289,454,2.398,484,1.374,734,3.633,752,3.727,1008,6.789,1400,5.389,1479,7.198,1678,6.148]],["t/502",[2,0.536,20,0.47,29,0.753,30,2.409,33,1.176,42,0.407,50,2.692,64,0.65,82,1.301,85,0.482,91,1.332,133,1.773,172,1.672,190,1.332,202,1.579,203,1.672,206,0.781,216,2.397,233,0.531,250,1.231,251,1.672,252,0.992,263,1.332,279,1.262,311,1.326,318,0.753,322,1.525,326,1.203,336,1.332,360,1.112,407,1.467,435,1.908,454,1.259,484,1.739,497,2.525,515,2.999,567,0.735,592,1.592,614,1.592,627,2.655,639,0.879,682,3.069,706,1.467,733,1.332,734,2.915,752,2.881,756,3.017,765,4.508,772,1.417,784,0.918,795,0.992,808,5.565,809,1.332,815,2.192,816,1.525,817,1.417,832,1.027,847,1.045,857,1.231,927,1.592,943,1.672,961,1.773,978,2.254,1004,4.555,1009,2.429,1060,1.525,1125,1.908,1215,3.897,1235,2.929,1672,4.194,1679,2.113,1680,5.463,1681,2.113,1682,1.908,1683,4.194,1684,4.645,1685,2.113,1686,2.113,1687,4.645,1688,2.113,1689,2.113,1690,3.574,1691,7.063,1692,3.897,1693,3.574,1694,3.574,1695,3.574,1696,2.113,1697,3.574,1698,2.113]],["t/504",[20,1.032,23,4.528,42,1.3,69,1.829,71,2.444,75,2.399,82,1.335,110,1.678,182,2.559,226,3.802,233,1.196,235,1.455,238,3.003,271,2.237,311,1.35,316,2.133,360,1.122,403,2.166,418,3.746,478,1.531,484,0.961,535,2.166,560,1.658,637,3.531,638,3.308,639,1.982,653,3.567,747,3.195,795,2.237,867,2.696,906,3.437,1051,3.531,1143,3.437,1699,4.763]],["t/506",[42,1.267,64,1.413,177,3.633,206,2.431,225,2.45,226,1.937,230,1.961,233,1.153,235,1.656,311,0.918,332,2.613,360,1.158,386,2.676,418,3.141,425,1.966,454,1.617,478,2.114,529,3.458,535,2.088,567,1.598,584,1.806,637,3.44,639,1.91,796,3.313,847,2.27,1051,3.44,1143,3.313,1165,3.852,1258,4.145,1276,4.145,1700,4.59,1701,4.59,1702,4.59,1703,4.59,1704,4.59,1705,4.59,1706,4.59,1707,4.59,1708,4.59,1709,4.59,1710,4.59,1711,4.59]],["t/508",[42,1.27,110,2.324,311,1.319,360,1.126,384,2.566,403,3,425,2.824,560,2.296,638,4.581,639,3.498,752,2.866,942,5.639,1143,4.76,1692,7.055,1712,5.957,1713,6.596,1714,6.596]],["t/510",[23,1.941,64,2.037,74,2.637,138,2.428,154,1.647,182,1.097,206,1.712,230,2.302,233,0.727,235,2.029,266,1.431,311,1.158,324,1.729,337,3.944,360,1.171,365,2.793,376,1.941,395,2.637,422,3.154,484,1.168,563,2.088,582,4.985,684,4.438,867,3.238,894,3.342,896,1.775,909,3.886,972,1.576,1080,2.01,1143,4.178,1226,3.055,1229,1.941,1289,3.106,1646,5.228,1647,6.973,1649,4.182,1715,5.79,1716,2.894,1717,6.618,1718,6.618]],["t/512",[2,0.739,41,1.897,64,1.973,74,3.649,138,3.718,182,2.43,226,1.87,233,1.113,235,1.382,311,0.886,360,1.145,364,2.231,365,1.87,376,4.299,422,4.103,425,1.897,498,2.466,558,2.794,582,4.829,584,1.76,587,2.878,684,4.299,867,3.76,894,4.626,906,6.589,909,3.718,1143,3.197,1289,2.971,1382,6.802,1438,3.718,1719,4.43,1720,4.43,1721,4.43]],["t/514",[2,0.753,4,3.35,20,0.859,43,3.678,85,1.489,90,3.35,94,2.444,100,3.557,164,3.805,173,3.229,236,2.122,567,2.273,584,1.793,719,3.062,733,4.117,766,5.167,829,4.004,1016,4.004,1093,3.805,1246,4.379,1259,4.379,1265,4.711]],["t/517",[20,0.868,85,1.505,123,3.262,235,1.812,236,2.144,346,4.581,360,1.126,425,3.6,454,2.324,734,4.486,854,3.52,866,3.45,978,4.16,1157,5.957,1197,5.957,1722,6.596,1723,5.957]],["t/519",[2,0.777,29,2.401,42,1.297,64,2.074,70,3.273,74,3.835,311,1.704,360,1.023,454,3.292,484,1.36,722,4.861,723,5.075,740,3.524,819,3.67,978,4.248,1350,5.732]],["t/521",[20,0.667,42,1.358,43,2.816,64,1.56,227,3.818,235,1.092,236,1.647,243,3.551,360,1.124,366,2.651,425,2.17,454,2.484,484,1.423,567,1.764,611,3.399,700,2.954,709,2.704,719,2.915,734,5.224,747,3.399,784,3.064,854,4.328,956,4.011,975,4.252,978,3.196,1267,4.011,1723,4.576,1724,5.067]],["t/523",[2,0.558,42,0.931,74,2.753,82,1.355,233,1.714,236,1.572,311,1.88,360,1.113,384,1.881,454,3.191,484,1.828,584,1.328,647,3.643,719,1.608,722,3.49,723,3.643,734,2.58,740,3.569,765,5.28,985,4.058,1004,3.885,1062,2.966,1682,4.367,1683,6.162,1725,9.059,1726,4.835]],["t/525",[20,1.096,42,1.604,236,2.708,386,4.855,653,3.789]],["t/527",[29,2.171,82,1.706,110,2.145,230,1.816,235,1.312,236,2.896,311,1.596,312,4.084,360,1.102,377,2.048,454,2.812,484,1.229,553,4.084,647,4.587,657,4.084,765,4.654,854,4.26,866,3.185,1400,4.819,1678,7.21,1727,6.089]],["t/529",[2,0.927,20,1.057,39,2.797,42,1.184,85,1.833,143,3.994,182,3.393,239,3.771,290,3.423,317,3.994,325,4.27,424,3.584,460,6.742,469,3.877,481,3.584,560,2.14,598,3.771,680,4.866,847,3.041,888,3.674,1322,6.458,1728,6.148,1729,6.148,1730,6.148]],["t/531",[20,0.772,39,2.667,311,1.172,317,3.809,325,5.408,360,1.144,366,3.067,401,3.698,424,3.418,454,2.743,469,4.911,470,4.418,598,4.776,646,4.073,682,3.384,1322,5.62,1731,5.864,1732,9.316,1733,5.864,1734,5.864]],["t/533",[0,2.321,4,2.902,20,1,64,1.741,82,1.585,90,2.902,94,2.117,100,3.081,164,3.296,173,2.797,185,3.793,206,2.091,233,1.909,234,3.986,236,3.114,250,3.296,326,3.22,337,3.081,478,1.818,567,1.969,602,4.26,829,3.468,866,2.958,919,3.468,1016,3.468,1093,3.296,1246,3.793,1247,3.927,1265,4.081,1582,5.107,1735,5.655]],["t/535",[2,0.709,108,3.877,146,3.096,202,1.777,206,2.273,233,1.544,234,3.949,236,3.201,295,4.632,360,0.879,470,4.632,567,2.14,584,1.688,711,4.866,719,2.044,725,5.552,765,3.584,866,3.216,1025,5.552,1235,3.877,1736,6.148,1737,6.148,1738,6.148,1739,6.148]],["t/537",[2,0.753,42,1.257,43,2.607,82,2.34,108,4.117,206,2.414,233,2.098,311,1.67,360,1.062,382,3.415,454,2.3,484,1.318,567,2.273,719,2.17,740,3.415,819,3.557,978,4.117,1350,5.123,1740,6.528]],["t/539",[4,2.289,42,0.859,82,2.119,108,2.813,206,1.649,233,1.899,235,1.893,311,1.512,359,2.096,360,1.17,382,2.334,383,2.168,403,2.93,484,1.3,497,2.978,567,1.553,625,4.321,778,4.063,818,4.474,819,2.431,854,3.438,1350,5.925,1455,3.744,1741,8.281,1742,4.461,1743,4.461]],["t/541",[2,0.558,42,1.654,85,1.103,100,2.634,146,2.435,190,3.049,206,3.349,225,2.58,233,1.986,234,3.574,235,1.471,236,2.792,276,3.49,306,3.643,360,1.057,384,1.881,386,3.978,454,1.703,478,1.555,584,1.328,606,4.058,627,3.316,719,2.269,741,3.827,748,3.358,819,3.718,866,3.569,1045,2.889,1062,2.966,1412,4.367,1665,4.367,1744,4.835,1745,4.835]],["t/543",[40,4.106,42,1.452,44,2.687,206,2.787,234,3.136,236,2.45,454,2.655,478,2.423,497,4.221,625,5.055,627,3.663,634,5.965]],["t/545",[75,2.75,108,3.443,110,1.923,206,2.744,233,1.864,234,2.272,236,1.775,311,1.092,360,1.16,377,1.836,454,2.615,484,1.498,497,2.523,553,3.662,567,1.901,719,2.468,778,3.443,780,6.229,809,3.443,819,4.044,1350,4.553,1746,5.46,1747,5.46,1748,5.46,1749,7.423]],["t/547",[2,0.936,96,5.118,98,5.857,152,6.114,252,3.813,808,6.811,1750,5.857]],["t/549",[4,4.112,64,2.467,202,2.316,251,6.342,407,5.565,626,4.562,1750,5.783,1751,8.013]],["t/554",[30,4.357,168,6.626,189,7.442,1752,7.628,1753,7.628,1754,7.628]],["t/556",[2,0.803,262,4.388,748,4.832,1755,9.485,1756,8.696,1757,6.958,1758,8.565,1759,9.485,1760,6.958,1761,6.958,1762,6.958,1763,6.958,1764,6.958]],["t/558",[2,0.753,27,5.801,57,4.534,74,3.717,83,4.004,366,4.369,562,5.8,800,8.316,972,4.55,1502,7.542,1758,5.895,1765,8.352,1766,5.895,1767,6.528,1768,6.528,1769,6.528]],["t/560",[0,2.341,2,0.882,40,3.109,44,2.034,64,2.836,70,4.191,152,4.298,199,4.298,202,1.649,533,5.311,562,3.963,605,4.516,756,4.967,788,7.29,826,4.516,993,4.298,1016,3.5,1322,4.118,1461,4.788,1770,8.625,1771,5.706,1772,5.706,1773,5.153,1774,5.706]],["t/562",[1,5.021,2,0.803,64,2.677,70,3.381,87,2.451,208,3.069,318,3.1,467,5.483,533,4.832,566,6.283,666,5.839,756,4.52,868,5.021,1461,5.839,1750,5.021,1775,6.283,1776,6.958]],["t/564",[90,3.315,182,2.45,252,4.305,316,2.894,360,1.058,517,8.115,536,4.663,639,2.689,890,4.663,1022,4.663,1579,5.835,1777,8.297,1778,6.462,1779,6.462,1780,6.462,1781,6.462,1782,6.462,1783,6.462]],["t/566",[2,0.837,57,3.666,62,2.876,120,2.938,224,3.005,266,2.61,321,3.54,329,2.521,360,0.578,533,3.666,779,4.766,944,3.329,989,4.766,1022,3.809,1174,5.464,1175,5.741,1207,3.666,1327,4.766,1352,3.976,1459,4.766,1522,4.766,1587,7.483,1750,5.98,1784,5.278,1785,7.253,1786,5.278,1787,5.278,1788,5.278,1789,7.253,1790,5.278,1791,5.278,1792,5.278,1793,5.278,1794,5.278,1795,4.766,1796,5.278,1797,5.278,1798,5.278,1799,5.278,1800,5.278]],["t/568",[96,3.732,120,3.295,121,4.967,206,2.188,284,4.684,756,3.845,869,5.903,870,5.345,890,4.271,930,4.684,1022,5.655,1045,3.537,1058,5.903,1145,5.345,1210,5.345,1352,4.459,1524,7.932,1750,4.271,1766,5.345,1801,7.836,1802,5.919,1803,5.919,1804,5.919,1805,7.836,1806,7.836,1807,5.919,1808,5.919,1809,5.919]],["t/570",[2,1.046,27,4.451,44,2.655,73,3.236,200,6.251,715,7.61,766,5.895,869,5.611,901,4.996,1750,5.375,1773,6.726,1810,7.449]],["t/572",[18,3.927,83,4.132,262,4.248,364,3.392,493,3.524,857,3.927,915,8.439,944,6.388,1022,7.31,1045,4.025,1775,6.083,1811,8.52]],["t/574",[311,1.867,332,5.315,441,6.737,673,6.262,976,7.834]],["t/576",[2,1.023,20,0.794,42,1.162,75,3.037,85,1.376,87,2.125,99,3.037,110,2.125,135,3.604,159,4.045,208,2.66,225,3.219,233,1.515,312,5.321,323,4.353,414,3.434,478,1.939,535,2.744,560,2.762,653,3.609,795,4.165,866,3.155,971,5.447,1004,3.434,1079,4.045,1093,3.516,1812,6.031]],["t/578",[2,0.924,110,2.823,449,6.342,450,5.206,478,2.576,639,3.335,784,3.482,795,3.764]],["t/580",[58,2.986,360,1.12,478,2.947,560,2.888,639,3.453,648,2.85,795,3.898,832,4.032,924,4.958,1062,3.963,1222,4.488,1226,3.502,1229,5.565]],["t/582",[2,0.664,74,3.278,182,2.183,360,1.14,395,3.278,403,2.619,560,3.219,584,1.581,648,3.393,682,2.502,731,6.456,752,2.502,795,4.07,918,3.74,1156,4.832,1226,2.43,1238,6.456,1243,5.199,1813,5.758,1814,7.693,1815,5.758,1816,5.758]],["t/584",[360,1.114,478,2.633,560,3.16,639,2.635,648,2.793,795,2.975,814,4.247,832,3.98,918,5.32,924,3.784,1226,3.831,1229,5.493,1230,7.396,1238,6.873]],["t/586",[2,0.63,27,4.435,146,3.738,182,2.07,324,3.262,360,1.14,395,3.109,478,1.755,484,1.498,554,4.113,560,2.936,626,3.109,639,2.272,752,3.225,795,2.565,832,3.607,924,3.262,944,4.681,1175,4.321,1392,5.357,1507,4.321,1795,4.931,1817,4.931,1818,5.46,1819,5.46,1820,5.46,1821,4.931]],["t/588",[2,0.584,87,1.785,146,3.551,182,1.921,224,2.885,226,2.976,289,5.917,324,3.028,360,1.135,395,2.885,478,1.629,484,1.423,560,2.823,639,2.109,752,3.064,756,5.268,795,2.38,928,3.657,942,4.73,944,4.447,1176,4.576,1221,7.324,1392,5.089,1692,4.252,1712,4.576,1817,4.576,1821,4.576,1822,7.051,1823,5.067]],["t/590",[42,1.27,110,2.324,311,1.85,360,1.013,384,2.566,484,1.697,560,2.296,759,4.969,784,2.866,795,3.099,796,6.067,815,5.157,817,4.424,918,4.285,972,3.594,1304,5.535,1824,6.596,1825,6.596]],["t/592",[2,0.676,20,0.772,42,1.5,110,2.743,146,2.953,226,3.287,311,1.557,316,2.626,360,1.061,384,3.029,425,3.335,478,1.885,493,3.067,560,2.711,584,2.138,638,5.408,653,2.667,795,3.658,832,2.85,924,3.504,1304,4.921,1826,5.864,1827,5.864]],["t/594",[64,1.512,69,1.885,73,2.134,202,1.419,208,2.166,216,3.293,226,2.072,238,3.097,276,3.544,311,0.982,316,2.199,360,1.116,366,2.569,395,2.796,402,4.434,454,1.73,478,1.579,484,1.609,560,2.401,639,2.043,682,2.134,710,3.012,752,3.465,815,3.012,816,3.544,817,4.627,832,3.875,875,4.121,888,2.934,918,3.19,1507,3.886,1537,4.434,1828,7.974,1829,6.898,1830,4.91,1831,4.91,1832,6.898]]],"invertedIndex":[["",{"_index":360,"t":{"48":{"position":[[363,1],[423,1],[425,1],[464,2],[467,1],[513,1],[557,2],[584,1],[660,1],[702,1],[704,1],[724,2],[727,1],[729,2],[778,2],[825,2],[881,2],[933,2],[961,2],[978,2],[981,2],[991,2],[1029,2],[1083,2],[1114,2],[1147,2],[1150,2],[1168,2],[1171,2]]},"50":{"position":[[445,1],[523,1],[525,1],[564,2],[567,1],[613,1],[657,2],[684,1],[760,1],[802,1],[804,1],[824,1],[835,2],[838,2],[841,1],[843,2],[892,2],[939,2],[996,2],[1070,2],[1126,2],[1178,2],[1206,2],[1223,2],[1226,2],[1236,2],[1274,2],[1328,2],[1359,2],[1392,2],[1395,2],[1413,2],[1416,2]]},"54":{"position":[[658,1],[718,1],[720,1],[759,2],[762,1],[808,1],[852,2],[879,1],[955,1],[997,1],[999,1],[1019,2],[1022,1],[1024,2],[1073,2],[1120,2],[1176,2],[1228,2],[1256,2],[1273,2],[1276,2],[1286,2],[1324,2],[1378,2],[1409,2],[1442,2],[1474,2],[1498,2],[1588,2],[1638,2],[1641,2],[1659,2],[1662,2]]},"60":{"position":[[23,1],[46,1],[48,1],[101,1],[103,1],[140,2]]},"62":{"position":[[295,1],[355,1],[357,1],[411,1],[413,1],[424,4],[437,4],[465,2],[468,1],[470,2],[534,2],[581,2],[613,2],[681,1],[683,1]]},"66":{"position":[[319,1],[343,1],[345,1],[380,1],[410,1],[412,1],[447,1],[469,1],[471,1],[530,1],[532,1],[552,1],[561,1],[563,2],[677,3],[681,2],[779,1],[790,1],[891,3],[895,2],[898,3],[902,2],[905,2],[908,2]]},"68":{"position":[[288,1],[300,1],[302,1],[330,2],[418,1],[432,2],[515,1],[566,1],[568,3],[578,1],[590,1],[592,1],[638,1],[652,2],[722,1],[780,2],[783,2],[850,3],[1121,1],[1227,1],[1264,2],[1267,1],[1283,1],[1285,1],[1300,1],[1332,1],[1417,1],[1419,1],[1447,1],[1529,1],[1531,1],[1540,1],[1562,1],[1564,1],[1638,2]]},"86":{"position":[[166,2],[212,2],[1012,3]]},"90":{"position":[[342,1],[373,1],[433,1],[481,1],[490,1],[538,3],[553,3],[565,3],[575,3],[579,2],[582,1],[643,1],[658,1],[742,1],[752,1],[754,1]]},"92":{"position":[[200,1],[210,1],[236,2]]},"96":{"position":[[580,2],[621,2],[624,3],[632,1],[634,3],[672,1],[674,3],[706,1],[708,3],[721,3],[762,3],[1083,1],[1104,1],[1143,2],[1146,1]]},"100":{"position":[[460,1],[481,1],[483,1],[529,1],[561,1],[613,2],[616,3],[702,1],[720,2],[723,2],[803,3],[807,2],[881,3]]},"102":{"position":[[346,1],[355,1],[454,1]]},"104":{"position":[[263,1],[272,1],[371,1]]},"112":{"position":[[232,1],[234,1],[274,2],[282,2],[308,1],[310,1],[312,2],[357,2],[360,2],[367,2],[393,1],[395,1],[397,2],[447,2],[467,1],[469,1],[471,2],[517,2]]},"114":{"position":[[385,1]]},"118":{"position":[[292,1],[343,1]]},"124":{"position":[[406,2],[409,1],[515,2],[535,2],[550,2],[553,1],[643,2],[659,2]]},"126":{"position":[[274,1],[292,2],[325,2],[349,1]]},"128":{"position":[[135,1],[194,1]]},"136":{"position":[[75,1],[99,1],[101,1],[140,2],[158,1],[200,1]]},"138":{"position":[[192,1],[216,1],[218,1],[257,1],[268,1],[298,2],[309,1],[318,1],[320,1],[383,2],[386,2],[389,2],[392,1]]},"140":{"position":[[180,1],[200,1],[209,1],[232,1],[271,2],[274,2],[277,2]]},"144":{"position":[[344,1],[401,1]]},"146":{"position":[[134,2],[229,2],[252,1],[254,1],[256,2],[365,2],[376,1],[405,1]]},"150":{"position":[[26,1],[139,1],[160,1]]},"152":{"position":[[269,1],[290,1]]},"154":{"position":[[338,1],[348,1],[401,2]]},"156":{"position":[[213,1],[223,1],[267,2],[304,2]]},"160":{"position":[[310,1],[336,2],[350,2],[353,1],[374,2],[377,2],[386,2],[389,2],[427,2],[444,2],[478,2],[863,1],[926,1],[951,2],[978,2],[1004,2],[1417,1],[1438,1],[1454,2],[1457,2],[1493,2]]},"162":{"position":[[116,1],[137,1],[161,2],[237,1],[239,1],[241,1],[243,1],[292,4]]},"166":{"position":[[18,1]]},"168":{"position":[[259,1],[322,1],[332,2],[345,2],[429,1],[449,1],[466,1],[488,1],[507,1],[536,1]]},"170":{"position":[[346,1],[369,1],[444,2],[482,2],[499,1],[522,1]]},"172":{"position":[[193,1],[207,1],[242,1],[244,2],[257,2],[260,2],[263,1],[346,2],[356,2]]},"174":{"position":[[182,1],[205,1],[223,1],[245,1],[265,1],[294,1],[383,1],[406,1],[438,1],[460,1],[494,1],[523,1]]},"176":{"position":[[237,1],[260,1],[285,1],[305,1],[307,2],[310,3],[314,2]]},"178":{"position":[[300,2],[310,2],[320,2],[385,1],[448,1],[458,1],[481,1],[493,2],[725,1],[748,1],[750,2],[833,1],[854,1],[856,2],[926,2],[967,1],[987,1]]},"180":{"position":[[475,1],[477,2],[480,3],[484,2],[487,1],[497,1],[578,1]]},"182":{"position":[[109,1],[190,1]]},"184":{"position":[[624,1],[626,2],[629,3],[633,2],[636,1],[645,1],[665,2],[693,2],[696,1],[771,2],[793,2],[809,1],[811,2],[814,3],[818,2],[821,1],[823,2],[854,2],[871,1],[891,1]]},"186":{"position":[[535,2],[563,2],[573,2],[580,2],[583,2],[598,2],[614,2],[627,2]]},"188":{"position":[[245,1],[308,1],[318,2],[331,2],[466,1],[480,1],[519,1],[521,2],[534,2],[537,2],[540,1],[549,1],[584,1],[586,2],[596,2],[599,2],[649,2],[702,1],[704,1],[990,1],[992,2],[1038,2],[1059,1],[1076,1],[1078,2],[1095,2],[1118,1],[1137,1],[1139,2],[1160,2],[1190,1],[1316,2],[1349,2],[1384,2]]},"190":{"position":[[204,2],[263,2]]},"221":{"position":[[139,1],[161,1],[163,2],[173,2],[200,1],[222,1]]},"223":{"position":[[432,1],[465,1]]},"233":{"position":[[7,1],[18,2],[41,2],[81,2],[110,2],[139,2],[160,1]]},"237":{"position":[[238,1],[258,1],[314,1],[316,1],[318,1],[320,1]]},"239":{"position":[[163,1],[177,1],[236,1],[620,1],[634,1],[669,1],[671,2],[684,2],[687,2],[690,1],[699,1],[736,1],[755,2],[778,2],[781,1]]},"241":{"position":[[370,1],[379,2],[407,1],[431,2],[488,2]]},"259":{"position":[[164,1],[238,1],[252,1]]},"261":{"position":[[168,1],[174,2],[257,1],[409,1],[424,2],[427,3],[431,2],[434,1],[483,1],[497,1],[517,1],[531,1]]},"265":{"position":[[114,2],[177,2],[491,3],[495,1],[548,1],[550,2],[553,2],[652,2],[1110,2],[1277,1],[1314,3],[1318,2],[1384,2]]},"267":{"position":[[111,1],[129,1],[211,1],[277,1],[330,1]]},"269":{"position":[[330,1],[412,1],[477,1],[500,1],[515,2]]},"271":{"position":[[269,1],[361,1]]},"273":{"position":[[249,2],[268,1],[281,1],[283,1],[326,2],[373,2],[376,1],[397,3],[401,1]]},"283":{"position":[[176,1],[210,1]]},"285":{"position":[[131,2],[211,2],[233,2],[236,2],[338,2],[353,1],[381,1]]},"292":{"position":[[23,2],[49,2],[83,2],[134,2],[185,1],[190,2],[225,2]]},"294":{"position":[[202,1]]},"298":{"position":[[26,1],[45,1]]},"300":{"position":[[33,2]]},"304":{"position":[[28,1],[30,2],[42,2],[68,2],[81,2],[106,1],[121,2],[153,2],[184,1],[395,2],[405,1],[407,2],[429,2],[432,1]]},"306":{"position":[[120,2],[180,2],[256,2],[266,1],[268,2],[294,2],[297,1],[320,2],[369,2],[432,2],[462,2]]},"308":{"position":[[138,1],[151,1],[176,2]]},"310":{"position":[[102,1],[122,1],[148,1],[157,2],[160,2],[170,2],[176,1],[207,1],[244,1],[253,2]]},"312":{"position":[[133,1],[164,1],[201,1],[210,2],[213,2],[223,2],[229,1],[249,1],[275,1],[284,2],[524,2],[679,2],[721,2],[756,1],[776,1],[802,1],[811,2],[814,2],[824,2],[830,1],[850,1],[876,1],[885,2]]},"316":{"position":[[103,2],[129,2],[141,2],[166,2],[169,2],[191,2],[210,2]]},"320":{"position":[[106,2],[136,2],[184,2],[214,2],[269,2],[321,2],[415,2],[462,2],[509,2],[551,2]]},"322":{"position":[[93,1],[103,1],[130,2],[308,2],[323,2],[333,1],[347,1],[398,1],[407,1],[566,2],[569,1]]},"324":{"position":[[102,2],[105,2],[115,2],[132,2]]},"326":{"position":[[97,2],[100,2],[110,2],[125,2]]},"328":{"position":[[118,1],[150,1],[166,2],[169,2],[179,2],[197,2],[221,2],[237,2],[256,2],[262,1],[281,1],[283,2],[324,2],[330,1],[351,1],[353,2],[408,2],[414,1],[436,1],[438,2],[496,2],[502,1],[522,1],[527,1],[549,1],[566,2],[584,2],[590,1],[604,2],[607,1],[609,2],[648,2],[654,1],[677,1]]},"336":{"position":[[97,1],[99,2],[106,2],[121,1],[129,1],[131,2],[138,2],[158,1],[163,1],[165,2],[208,2],[241,2],[281,2],[316,1]]},"338":{"position":[[74,2],[101,2],[118,1],[139,2],[147,2],[166,2],[191,2],[216,2],[238,2],[241,1],[246,1],[248,2],[296,2],[316,1]]},"344":{"position":[[108,1],[141,1],[143,2],[160,2],[180,1],[185,1],[187,2],[213,2],[227,2],[256,2],[287,2],[295,2],[298,1]]},"346":{"position":[[100,1],[107,1],[131,2],[166,2],[200,2],[203,3]]},"348":{"position":[[122,1],[181,1],[186,1],[203,1],[205,2],[215,2],[242,1],[301,1],[317,1],[354,1]]},"350":{"position":[[156,1],[215,1],[220,1],[237,1],[239,2],[249,2],[266,1],[325,1],[341,1],[358,1]]},"352":{"position":[[487,2],[510,2],[528,1],[560,1],[580,1],[624,1],[674,1],[711,1],[719,1],[721,2],[781,1],[820,1],[828,1],[865,1],[867,2],[881,2],[892,1],[911,1],[919,1],[938,1],[940,2],[954,2],[965,1],[984,1],[992,1],[1011,1]]},"354":{"position":[[288,1],[308,1],[318,1],[374,1],[382,1],[436,1],[438,2],[452,2],[463,1],[482,1],[490,1],[509,1]]},"356":{"position":[[348,2],[361,2],[378,1],[380,1],[405,1],[433,1],[439,2],[464,1],[498,2],[501,2],[552,1],[570,1],[580,1],[628,1],[630,2],[644,2],[655,1],[673,1]]},"360":{"position":[[149,1],[179,2],[219,2],[222,1],[236,1],[262,1],[264,2],[310,2],[313,1],[333,1],[354,1]]},"362":{"position":[[311,2],[363,2],[383,1],[403,1]]},"366":{"position":[[445,1],[459,1],[628,2],[653,1],[667,2],[681,1],[703,2],[749,2],[752,1]]},"368":{"position":[[333,1]]},"370":{"position":[[268,1],[339,2],[386,2],[402,1],[428,1]]},"372":{"position":[[205,1],[230,2],[270,2],[273,1],[282,1],[308,1],[675,1],[696,1],[698,2],[708,2],[762,1],[783,1]]},"376":{"position":[[27,2],[30,2],[40,2],[46,2],[61,2],[81,2],[100,2],[103,2],[151,2],[176,2],[193,2],[232,2],[263,2]]},"378":{"position":[[221,2],[254,2],[257,2],[267,2],[311,2],[342,2]]},"386":{"position":[[147,2],[164,2],[209,2],[220,1],[236,2]]},"388":{"position":[[149,2],[167,2],[176,1],[222,1],[240,2],[270,1],[286,1],[324,1],[332,2],[351,2],[368,2],[387,2],[396,2],[409,2],[412,1]]},"390":{"position":[[150,2],[179,2],[193,1],[243,1],[269,2],[281,2],[295,1],[368,1]]},"394":{"position":[[178,1],[269,1]]},"398":{"position":[[21,2],[41,2],[61,2],[64,2],[88,2],[107,1],[114,1],[127,1],[132,1],[147,1],[149,1],[151,2],[175,2],[194,1],[199,1],[212,1],[218,1],[233,1],[240,1],[254,1],[256,1],[277,1],[279,2],[309,2],[351,1],[356,1],[358,2],[375,2],[499,1]]},"400":{"position":[[123,2],[183,2],[238,1],[240,2],[260,2],[286,1],[309,2],[358,2],[421,2],[450,2]]},"402":{"position":[[129,1],[141,1],[166,2]]},"404":{"position":[[116,2],[122,1],[147,1],[149,2],[159,2],[190,2],[196,1],[232,1]]},"406":{"position":[[165,2],[171,1],[196,1],[198,2],[208,2],[228,2],[234,1],[259,2],[275,2],[278,1]]},"410":{"position":[[87,1],[89,2],[110,2],[113,1],[152,1],[165,1],[167,2],[188,2],[191,1],[193,1],[195,2],[212,2],[232,1],[234,2],[255,2],[258,1]]},"412":{"position":[[130,2],[183,2],[230,2],[257,2],[272,1],[274,2],[295,2],[298,1],[321,2],[364,2],[421,2],[447,2]]},"414":{"position":[[68,2],[123,2]]},"416":{"position":[[111,1],[120,1],[145,2]]},"420":{"position":[[211,2],[258,2]]},"424":{"position":[[265,1],[286,1],[347,1],[369,1]]},"426":{"position":[[104,2],[125,2],[134,1],[179,1],[190,2],[202,2],[543,1],[571,2],[605,2],[608,1],[632,1],[634,2],[678,2],[681,1],[714,1],[716,2],[776,2],[779,1],[907,1],[917,1],[952,1],[954,2],[957,2],[960,1],[968,2],[1010,2],[1060,2],[1071,2]]},"428":{"position":[[473,1],[497,1],[506,1],[529,1],[547,1],[557,1],[597,2],[630,2]]},"430":{"position":[[178,1],[202,1],[213,2],[233,2],[253,2],[256,2],[266,2],[284,2],[319,2],[354,2]]},"434":{"position":[[307,1],[343,1],[356,1],[382,1],[384,2],[398,2],[412,1],[428,2],[448,2],[471,2],[491,2],[494,1],[677,2],[694,2],[703,1],[720,1],[733,1],[749,1],[751,2],[795,2],[867,1],[889,2],[909,2],[912,1],[928,1],[952,2],[967,2],[970,1],[972,2],[986,2],[1002,1],[1019,2],[1044,2],[1047,1],[1073,1],[1075,2],[1128,2],[1145,1],[1161,1],[1177,2],[1197,2],[1200,1]]},"436":{"position":[[206,1],[265,1],[502,1],[519,1],[535,1],[564,1],[579,1],[621,1],[623,2],[637,2],[654,1],[675,2],[695,2],[698,1],[713,1],[735,2],[763,2],[766,1]]},"438":{"position":[[19,1],[483,1],[513,1],[525,1],[576,1],[589,1],[633,1],[635,2],[645,2],[659,1],[679,1],[962,1],[1004,1],[1016,1],[1067,1],[1085,1],[1129,1],[1142,1],[1197,1],[1199,2],[1209,2],[1223,1],[1243,1],[1262,1],[1289,1]]},"440":{"position":[[447,2],[467,2],[485,1],[525,1],[527,2],[563,2],[573,1],[610,2],[613,2],[616,2],[639,2],[696,1],[760,1],[762,2],[776,2],[792,1],[808,2],[825,2],[848,2],[865,2],[892,2],[912,2],[915,1]]},"442":{"position":[[422,2],[442,2],[460,1],[502,1],[504,2],[540,2],[550,1],[598,1],[615,2],[633,1],[652,2],[655,2],[658,2],[661,2],[684,2],[743,1],[809,1],[811,2],[825,2],[841,1],[857,2],[874,2],[897,2],[914,2],[941,2],[961,2],[964,1],[985,1],[987,2],[1009,1],[1011,2],[1027,1],[1054,1],[1056,2],[1096,2],[1114,1]]},"448":{"position":[[84,4],[101,1],[103,2],[138,2],[170,2],[189,2],[192,1],[278,1],[280,2],[298,2],[331,2],[353,2],[356,1]]},"453":{"position":[[320,1],[334,1],[336,2],[346,2],[358,3],[407,2],[422,1]]},"456":{"position":[[521,1],[532,1],[557,2],[629,3]]},"458":{"position":[[476,2]]},"460":{"position":[[89,1],[120,2],[123,1],[137,2],[191,2],[235,2],[246,1]]},"462":{"position":[[595,1],[641,1],[660,1],[676,1],[696,2],[699,2],[709,2],[734,2]]},"464":{"position":[[277,1],[305,1],[339,1],[341,1],[392,1],[436,1],[546,2],[549,1],[595,1],[633,1],[683,2],[686,3]]},"466":{"position":[[179,1],[207,1],[218,1],[220,1],[264,1],[357,2],[366,1],[377,1],[379,1],[423,1],[527,1],[543,1],[545,1],[560,3],[564,2],[571,1],[573,2],[621,1],[689,1],[719,2],[722,2],[725,2],[793,1],[805,1],[845,1],[847,1],[852,1],[863,1],[865,1],[879,1],[905,1],[907,2]]},"470":{"position":[[213,1],[243,1]]},"472":{"position":[[175,1],[177,2],[211,2],[244,1],[246,2],[276,2],[290,2],[293,2],[326,2],[348,2]]},"474":{"position":[[170,1],[172,2],[280,2],[366,1],[368,2],[413,2],[432,2],[435,2],[489,2],[506,2],[509,2],[554,2],[565,2],[568,2],[604,2],[616,2]]},"476":{"position":[[60,1],[62,2],[128,2],[161,1],[163,2],[214,2],[238,2],[241,2],[291,2],[314,2],[773,1],[775,2],[845,2],[918,1],[923,1],[925,2],[963,2],[1005,1]]},"478":{"position":[[60,1],[62,2],[127,2],[159,1],[161,2],[206,2],[223,2],[513,1],[515,2],[558,2],[615,1],[617,2],[636,2],[647,2],[658,2],[669,2],[672,2],[702,2],[713,2],[724,2],[727,2],[763,2],[774,2],[785,2]]},"480":{"position":[[155,1],[157,2],[218,2],[239,1],[299,1],[301,2],[332,2],[354,2],[410,2],[431,1],[441,2],[452,2],[463,2],[466,2],[476,2],[501,2],[504,2],[527,2],[554,2],[557,2],[606,2],[633,2],[636,2],[661,2]]},"482":{"position":[[113,1],[127,1],[152,2],[186,1],[200,2],[225,2],[252,2],[268,3],[272,2],[329,1],[347,2],[374,2],[409,2],[419,3]]},"484":{"position":[[69,2],[89,2],[108,2],[125,2],[128,2],[138,2],[171,2],[215,2],[258,2],[299,2]]},"486":{"position":[[365,1],[421,1],[434,2],[448,2],[451,2],[461,2],[481,2],[511,2],[638,1],[701,1],[718,2],[721,2],[731,2],[762,2]]},"488":{"position":[[213,1],[215,2],[243,2],[265,1],[267,2],[277,2],[297,1],[318,1]]},"490":{"position":[[151,2],[221,2],[239,1],[261,1],[263,2],[273,2],[304,1],[326,1]]},"494":{"position":[[16,1],[26,1],[66,1],[113,1]]},"496":{"position":[[170,1],[184,1],[234,2],[237,1],[246,1],[314,2],[317,1]]},"500":{"position":[[0,2],[16,2],[35,1],[43,1],[60,1],[62,1],[64,2],[74,2],[96,1],[113,1]]},"502":{"position":[[528,2],[549,2],[626,1],[632,1],[658,1],[667,1],[692,1],[703,1],[741,1],[743,1],[992,1],[1003,1],[1020,2],[1073,2],[1076,1],[1086,1],[1110,1],[1112,1],[1243,2],[1261,2],[1323,1],[1377,1],[1394,1],[1468,1],[1487,1],[1601,1],[1852,1],[1861,1],[1919,1],[1930,1],[2011,1],[2013,1]]},"504":{"position":[[130,2],[168,2],[178,1],[184,2],[221,2],[244,2],[281,2],[331,2],[390,2],[418,2],[467,1]]},"506":{"position":[[133,1],[180,1],[203,2],[226,2],[258,2],[290,2],[331,2],[355,2],[386,2],[389,1],[406,2],[435,2],[453,2],[476,2],[494,2],[525,2]]},"508":{"position":[[69,1],[95,1],[104,1],[113,1],[147,2],[172,2]]},"510":{"position":[[254,1],[268,1],[291,2],[316,1],[367,2],[395,2],[420,1],[472,2],[495,2],[558,2],[603,1],[617,1],[640,2],[656,1],[691,1],[704,3],[708,2],[734,2],[750,1],[782,1],[802,3],[806,2],[829,2],[845,1],[871,1],[887,3],[891,2],[942,1],[970,1],[984,1],[1007,2],[1023,1],[1036,1],[1060,1],[1073,2],[1082,2]]},"512":{"position":[[226,1],[238,1],[261,2],[304,3],[308,2],[329,2],[376,3],[380,2],[383,2],[386,2],[433,3],[437,2],[462,2],[520,3],[524,2]]},"517":{"position":[[99,2],[127,2],[140,2],[143,2],[168,2],[180,2]]},"519":{"position":[[116,2],[152,2],[166,2]]},"521":{"position":[[231,2],[260,2],[267,2],[270,2],[279,2],[292,2],[304,2],[406,1],[412,2],[415,1]]},"523":{"position":[[275,2],[289,2],[370,1],[372,2],[418,2],[428,2],[431,2],[475,2],[483,2],[486,1]]},"527":{"position":[[230,2],[243,2],[246,2],[256,2],[286,2],[306,2]]},"531":{"position":[[108,1],[128,1],[130,2],[186,2],[229,1],[237,1],[239,2],[297,2],[339,1]]},"535":{"position":[[61,2],[119,2]]},"537":{"position":[[144,2],[173,2],[193,3],[207,3]]},"539":{"position":[[158,1],[160,2],[200,2],[222,1],[224,2],[282,2],[304,3],[318,3],[419,1],[429,1],[464,1],[466,2],[469,2],[472,1],[481,1],[489,2],[530,2],[575,2],[578,2]]},"541":{"position":[[96,2],[139,2],[148,2],[318,2],[413,2],[433,1],[447,1]]},"545":{"position":[[119,2],[139,1],[159,1],[224,1],[245,1],[259,2],[280,2],[283,2],[293,2],[320,2],[335,1],[349,2]]},"564":{"position":[[6,1],[54,1],[200,1],[248,1]]},"566":{"position":[[207,3]]},"580":{"position":[[79,1],[81,2],[110,2],[123,2],[151,2],[163,1]]},"582":{"position":[[99,1],[101,2],[134,2],[154,2],[186,2],[253,1],[255,2],[291,2],[310,2]]},"584":{"position":[[58,1],[70,2],[110,2],[126,2],[160,2],[187,1]]},"586":{"position":[[175,1],[177,2],[201,2],[240,1],[245,1],[247,2],[272,2],[300,2],[309,2],[312,1]]},"588":{"position":[[244,1],[246,2],[281,2],[321,2],[324,1],[329,1],[331,2],[358,2],[389,2],[397,2],[400,1]]},"590":{"position":[[159,1],[161,2],[231,1]]},"592":{"position":[[107,1],[116,1],[142,2],[189,2],[223,2]]},"594":{"position":[[277,1],[279,2],[319,2],[361,1],[369,1],[396,2],[415,2],[460,2],[469,2],[472,1]]}}}],["0",{"_index":1416,"t":{"398":{"position":[[196,2]]},"486":{"position":[[631,3]]}}}],["0,0,1,1",{"_index":781,"t":{"124":{"position":[[635,7]]}}}],["0,0,2,0",{"_index":776,"t":{"124":{"position":[[507,7]]}}}],["0.75}px",{"_index":1315,"t":{"352":{"position":[[676,9]]}}}],["1",{"_index":1175,"t":{"269":{"position":[[207,1],[232,1],[278,1]]},"482":{"position":[[250,1]]},"566":{"position":[[127,2],[363,1]]},"586":{"position":[[296,3]]}}}],["100",{"_index":1417,"t":{"398":{"position":[[235,4]]}}}],["100px",{"_index":1260,"t":{"310":{"position":[[150,6],[246,6]]},"312":{"position":[[203,6],[277,6],[804,6],[878,6]]}}}],["10px",{"_index":1825,"t":{"590":{"position":[[205,4]]}}}],["12",{"_index":1327,"t":{"354":{"position":[[304,3]]},"566":{"position":[[100,3]]}}}],["12px",{"_index":1330,"t":{"354":{"position":[[503,5]]}}}],["150px",{"_index":1256,"t":{"306":{"position":[[259,6]]}}}],["1600",{"_index":1790,"t":{"566":{"position":[[76,5]]}}}],["16px",{"_index":1321,"t":{"352":{"position":[[932,5],[1005,5]]}}}],["17px",{"_index":1340,"t":{"356":{"position":[[564,5]]}}}],["1px",{"_index":816,"t":{"144":{"position":[[386,3]]},"360":{"position":[[246,3]]},"370":{"position":[[412,3]]},"372":{"position":[[292,3]]},"502":{"position":[[1571,3]]},"594":{"position":[[399,3]]}}}],["1rem",{"_index":1184,"t":{"269":{"position":[[392,5]]}}}],["2",{"_index":1174,"t":{"269":{"position":[[187,1],[196,1]]},"356":{"position":[[435,3]]},"472":{"position":[[187,1]]},"484":{"position":[[294,1]]},"566":{"position":[[86,1],[365,1]]}}}],["24px",{"_index":1329,"t":{"354":{"position":[[476,5]]}}}],["250px",{"_index":1253,"t":{"304":{"position":[[398,6]]}}}],["2nd",{"_index":1820,"t":{"586":{"position":[[257,3]]}}}],["2px",{"_index":1498,"t":{"438":{"position":[[999,4]]}}}],["2rem",{"_index":1182,"t":{"269":{"position":[[375,5]]}}}],["2}px",{"_index":1313,"t":{"352":{"position":[[626,6]]}}}],["3",{"_index":1587,"t":{"474":{"position":[[209,1]]},"566":{"position":[[57,1],[153,1],[367,1]]}}}],["300",{"_index":1529,"t":{"448":{"position":[[173,7],[334,7]]}}}],["32px",{"_index":1320,"t":{"352":{"position":[[905,5],[978,5]]}}}],["3rd",{"_index":389,"t":{"50":{"position":[[29,3]]},"213":{"position":[[80,3]]}}}],["3s",{"_index":1418,"t":{"398":{"position":[[329,2],[421,3]]}}}],["4",{"_index":1658,"t":{"484":{"position":[[251,1]]}}}],["4.2.2",{"_index":387,"t":{"48":{"position":[[1302,5]]}}}],["5",{"_index":138,"t":{"20":{"position":[[92,1]]},"510":{"position":[[916,1]]},"512":{"position":[[453,1]]}}}],["50",{"_index":125,"t":{"18":{"position":[[323,2]]},"168":{"position":[[483,4]]},"174":{"position":[[240,4],[455,4]]},"188":{"position":[[1113,4]]},"398":{"position":[[214,3]]}}}],["55",{"_index":1659,"t":{"484":{"position":[[296,2]]}}}],["5px",{"_index":1500,"t":{"438":{"position":[[1191,5],[1272,3]]}}}],["6px",{"_index":1185,"t":{"269":{"position":[[407,4]]}}}],["7",{"_index":1656,"t":{"484":{"position":[[205,1]]}}}],["9px",{"_index":1342,"t":{"356":{"position":[[668,4]]}}}],["__dirnam",{"_index":1541,"t":{"456":{"position":[[619,9]]}}}],["_modul",{"_index":1573,"t":{"466":{"position":[[535,7]]}}}],["_module.export",{"_index":1577,"t":{"466":{"position":[[760,16],[888,16]]}}}],["a.b",{"_index":1287,"t":{"328":{"position":[[344,6]]}}}],["a.st",{"_index":1439,"t":{"420":{"position":[[477,4]]}}}],["a:global(.g):hover.b",{"_index":1378,"t":{"376":{"position":[[154,21]]}}}],["a:global(.g1",{"_index":1379,"t":{"376":{"position":[[235,14]]}}}],["a:ranking(5",{"_index":1618,"t":{"478":{"position":[[209,13]]}}}],["a:x(1",{"_index":1630,"t":{"478":{"position":[[766,7]]}}}],["a:x(2",{"_index":1624,"t":{"478":{"position":[[639,7]]}}}],["a:x(3",{"_index":1627,"t":{"478":{"position":[[705,7]]}}}],["a:x(4",{"_index":1625,"t":{"478":{"position":[[650,7]]}}}],["a:x(5",{"_index":1628,"t":{"478":{"position":[[716,7]]}}}],["a:x(6",{"_index":1626,"t":{"478":{"position":[[661,7]]}}}],["a:x(7",{"_index":1631,"t":{"478":{"position":[[777,7]]}}}],["a[c",{"_index":1290,"t":{"328":{"position":[[541,7]]}}}],["abil",{"_index":865,"t":{"158":{"position":[[20,7]]},"201":{"position":[[541,7]]},"342":{"position":[[511,7]]}}}],["abov",{"_index":857,"t":{"154":{"position":[[484,5]]},"160":{"position":[[496,6]]},"162":{"position":[[328,6]]},"166":{"position":[[63,5]]},"182":{"position":[[228,6]]},"241":{"position":[[187,6]]},"322":{"position":[[629,6]]},"382":{"position":[[136,5]]},"398":{"position":[[369,5]]},"434":{"position":[[783,5]]},"438":{"position":[[119,6]]},"502":{"position":[[1653,5]]},"572":{"position":[[72,5]]}}}],["abstract",{"_index":237,"t":{"27":{"position":[[378,8]]},"170":{"position":[[11,8]]}}}],["accept",{"_index":558,"t":{"84":{"position":[[150,7]]},"239":{"position":[[386,6]]},"248":{"position":[[496,7]]},"265":{"position":[[1139,6],[1200,10]]},"436":{"position":[[15,6]]},"462":{"position":[[80,8]]},"464":{"position":[[154,7]]},"476":{"position":[[24,6],[101,7]]},"478":{"position":[[24,6],[100,7]]},"512":{"position":[[97,7]]}}}],["access",{"_index":146,"t":{"20":{"position":[[224,11]]},"33":{"position":[[218,7]]},"154":{"position":[[177,6]]},"170":{"position":[[77,6]]},"176":{"position":[[49,6]]},"178":{"position":[[1436,8]]},"308":{"position":[[30,8]]},"322":{"position":[[15,8]]},"358":{"position":[[460,6]]},"362":{"position":[[116,6]]},"368":{"position":[[64,11]]},"372":{"position":[[125,6]]},"402":{"position":[[30,8]]},"416":{"position":[[15,8]]},"430":{"position":[[21,6]]},"535":{"position":[[277,6]]},"541":{"position":[[52,10]]},"586":{"position":[[90,8],[250,6]]},"588":{"position":[[160,8],[334,6]]},"592":{"position":[[30,8]]}}}],["accessor",{"_index":860,"t":{"156":{"position":[[195,10]]}}}],["accord",{"_index":1259,"t":{"310":{"position":[[53,9]]},"324":{"position":[[53,9]]},"348":{"position":[[62,9]]},"404":{"position":[[53,9]]},"418":{"position":[[49,9]]},"444":{"position":[[422,9]]},"464":{"position":[[72,9]]},"514":{"position":[[51,9]]}}}],["achiev",{"_index":755,"t":{"118":{"position":[[139,7]]},"281":{"position":[[123,7]]}}}],["acquaint",{"_index":280,"t":{"31":{"position":[[202,10]]}}}],["act",{"_index":446,"t":{"64":{"position":[[28,4]]},"88":{"position":[[45,4]]}}}],["action",{"_index":434,"t":{"62":{"position":[[275,7]]}}}],["activ",{"_index":684,"t":{"100":{"position":[[623,8]]},"158":{"position":[[127,9]]},"229":{"position":[[172,8],[562,8]]},"237":{"position":[[198,10]]},"239":{"position":[[115,9],[508,8]]},"482":{"position":[[3,8],[79,6],[155,6],[278,6]]},"510":{"position":[[49,10],[131,10],[585,10],[931,10]]},"512":{"position":[[55,6],[335,6]]}}}],["actual",{"_index":1766,"t":{"558":{"position":[[57,6]]},"568":{"position":[[246,8]]}}}],["ad",{"_index":154,"t":{"22":{"position":[[3,5],[295,6]]},"96":{"position":[[1165,6]]},"124":{"position":[[704,5]]},"140":{"position":[[0,6]]},"146":{"position":[[456,5]]},"188":{"position":[[213,5],[810,6]]},"246":{"position":[[55,6]]},"285":{"position":[[431,5]]},"352":{"position":[[235,6]]},"354":{"position":[[207,5]]},"434":{"position":[[1086,5]]},"444":{"position":[[88,5],[215,5]]},"453":{"position":[[205,6],[506,5]]},"510":{"position":[[198,5]]}}}],["add",{"_index":58,"t":{"10":{"position":[[461,4]]},"14":{"position":[[170,4]]},"16":{"position":[[134,4]]},"48":{"position":[[264,3],[828,3]]},"50":{"position":[[163,3],[1073,3]]},"54":{"position":[[1123,3]]},"58":{"position":[[154,3]]},"62":{"position":[[136,3],[192,3],[498,3]]},"76":{"position":[[137,3],[301,4],[420,3]]},"82":{"position":[[51,3]]},"86":{"position":[[1269,3]]},"102":{"position":[[276,3]]},"120":{"position":[[9,3]]},"126":{"position":[[41,3]]},"134":{"position":[[156,3]]},"136":{"position":[[19,3]]},"188":{"position":[[36,3]]},"199":{"position":[[99,3]]},"201":{"position":[[220,4]]},"217":{"position":[[581,3]]},"239":{"position":[[309,3],[543,3]]},"273":{"position":[[84,3]]},"444":{"position":[[11,3]]},"496":{"position":[[48,3]]},"580":{"position":[[22,3]]}}}],["addit",{"_index":337,"t":{"44":{"position":[[24,10]]},"50":{"position":[[61,10]]},"160":{"position":[[609,8],[1017,10]]},"182":{"position":[[702,10]]},"194":{"position":[[144,10],[175,10]]},"199":{"position":[[59,10]]},"217":{"position":[[585,10]]},"229":{"position":[[484,10]]},"239":{"position":[[313,10]]},"243":{"position":[[189,10]]},"248":{"position":[[266,9]]},"265":{"position":[[508,11],[617,10],[999,10],[1058,11],[1290,11],[1358,11]]},"438":{"position":[[436,10]]},"468":{"position":[[3,8]]},"510":{"position":[[209,10],[318,10],[352,14],[383,11],[944,10]]},"533":{"position":[[3,8]]}}}],["addition",{"_index":1665,"t":{"486":{"position":[[514,12]]},"541":{"position":[[151,12]]}}}],["addon",{"_index":437,"t":{"62":{"position":[[429,7]]}}}],["address",{"_index":1001,"t":{"197":{"position":[[221,7]]}}}],["adjac",{"_index":660,"t":{"96":{"position":[[330,8]]},"106":{"position":[[105,8]]}}}],["advanc",{"_index":1535,"t":{"456":{"position":[[92,8]]}}}],["advantag",{"_index":650,"t":{"94":{"position":[[84,9]]}}}],["affect",{"_index":739,"t":{"114":{"position":[[241,6]]},"170":{"position":[[608,6]]},"366":{"position":[[301,9]]},"372":{"position":[[415,6]]},"438":{"position":[[326,8]]}}}],["against",{"_index":904,"t":{"160":{"position":[[1562,7]]},"476":{"position":[[598,7]]}}}],["agent",{"_index":761,"t":{"120":{"position":[[28,5]]}}}],["agnost",{"_index":247,"t":{"27":{"position":[[597,8]]}}}],["agreement",{"_index":843,"t":{"152":{"position":[[385,10]]}}}],["aka",{"_index":1756,"t":{"556":{"position":[[10,3],[71,3]]}}}],["alert(",{"_index":1778,"t":{"564":{"position":[[42,9]]}}}],["algorithm",{"_index":1729,"t":{"529":{"position":[[198,10]]}}}],["alia",{"_index":559,"t":{"86":{"position":[[7,5]]},"261":{"position":[[177,5],[609,5]]},"294":{"position":[[267,5]]},"358":{"position":[[38,5]]},"360":{"position":[[28,5]]},"362":{"position":[[434,5]]},"386":{"position":[[296,6]]},"458":{"position":[[443,7]]}}}],["alias",{"_index":1372,"t":{"372":{"position":[[330,8]]}}}],["align",{"_index":1785,"t":{"566":{"position":[[22,5],[68,7]]}}}],["allow",{"_index":326,"t":{"40":{"position":[[305,6]]},"68":{"position":[[894,5]]},"90":{"position":[[69,5]]},"96":{"position":[[206,6]]},"130":{"position":[[262,8]]},"199":{"position":[[87,5]]},"239":{"position":[[419,5]]},"279":{"position":[[39,6]]},"342":{"position":[[560,8]]},"440":{"position":[[18,5]]},"468":{"position":[[83,5]]},"470":{"position":[[245,7],[280,7]]},"502":{"position":[[143,5]]},"533":{"position":[[84,5]]}}}],["along",{"_index":1211,"t":{"279":{"position":[[636,5]]}}}],["alongsid",{"_index":1035,"t":{"213":{"position":[[70,9]]}}}],["alreadi",{"_index":543,"t":{"78":{"position":[[138,7]]},"100":{"position":[[22,7]]}}}],["altern",{"_index":52,"t":{"10":{"position":[[11,11]]},"248":{"position":[[1039,12]]},"275":{"position":[[398,11]]}}}],["although",{"_index":191,"t":{"24":{"position":[[469,8]]}}}],["alway",{"_index":192,"t":{"24":{"position":[[483,6],[969,6]]}}}],["anchor",{"_index":791,"t":{"126":{"position":[[312,6]]}}}],["angular",{"_index":259,"t":{"27":{"position":[[877,8]]},"271":{"position":[[112,8]]}}}],["anim",{"_index":1399,"t":{"388":{"position":[[235,4]]},"396":{"position":[[48,9],[84,7],[265,9]]},"398":{"position":[[67,9],[289,9],[312,10],[378,9],[401,9],[425,9],[462,9]]},"400":{"position":[[250,9],[263,9]]},"404":{"position":[[124,9],[198,9]]},"406":{"position":[[173,9],[236,9]]}}}],["anim2",{"_index":1406,"t":{"390":{"position":[[314,7]]}}}],["anoth",{"_index":972,"t":{"184":{"position":[[165,7]]},"306":{"position":[[43,7],[161,7]]},"320":{"position":[[38,7]]},"344":{"position":[[49,7]]},"362":{"position":[[89,7]]},"372":{"position":[[538,7]]},"390":{"position":[[47,7]]},"400":{"position":[[43,7],[164,7]]},"412":{"position":[[50,7],[164,7]]},"422":{"position":[[104,7]]},"424":{"position":[[142,7]]},"480":{"position":[[33,7]]},"486":{"position":[[264,7]]},"510":{"position":[[145,7]]},"558":{"position":[[24,7],[131,7]]},"590":{"position":[[48,7]]}}}],["anymor",{"_index":1161,"t":{"265":{"position":[[779,7]]}}}],["anyth",{"_index":545,"t":{"78":{"position":[[175,8]]}}}],["anywher",{"_index":1266,"t":{"316":{"position":[[47,8]]}}}],["api",{"_index":69,"t":{"12":{"position":[[115,3]]},"14":{"position":[[116,4]]},"16":{"position":[[80,4]]},"20":{"position":[[215,3]]},"22":{"position":[[330,3]]},"27":{"position":[[136,3]]},"31":{"position":[[126,3]]},"46":{"position":[[125,3]]},"88":{"position":[[82,3]]},"94":{"position":[[171,4]]},"96":{"position":[[102,4]]},"108":{"position":[[220,3]]},"110":{"position":[[63,4]]},"112":{"position":[[195,4]]},"130":{"position":[[204,4]]},"160":{"position":[[1153,3]]},"170":{"position":[[102,4]]},"180":{"position":[[59,3],[118,3]]},"194":{"position":[[252,3],[647,3]]},"201":{"position":[[628,3]]},"219":{"position":[[212,3]]},"225":{"position":[[258,4]]},"239":{"position":[[818,4]]},"243":{"position":[[284,3]]},"248":{"position":[[74,5],[224,4],[281,4],[337,3],[348,3],[375,4],[578,4],[730,4],[962,6],[991,3]]},"292":{"position":[[41,5],[74,5],[124,5],[179,5],[209,5],[258,5]]},"294":{"position":[[77,5],[141,5],[210,5],[290,5],[363,5],[429,5],[503,5]]},"296":{"position":[[67,5],[130,5]]},"298":{"position":[[79,5],[135,5],[199,5],[259,5],[333,5]]},"300":{"position":[[77,5],[141,5]]},"358":{"position":[[291,3]]},"368":{"position":[[55,3]]},"422":{"position":[[270,3]]},"426":{"position":[[121,3]]},"456":{"position":[[129,3],[200,4],[276,3]]},"492":{"position":[[97,4]]},"504":{"position":[[164,3]]},"594":{"position":[[18,3]]}}}],["app",{"_index":50,"t":{"8":{"position":[[293,3],[333,3]]},"10":{"position":[[260,3],[330,3]]},"54":{"position":[[20,3],[123,3],[258,3]]},"410":{"position":[[161,3]]},"502":{"position":[[563,4],[628,3]]}}}],["app'",{"_index":1641,"t":{"480":{"position":[[957,5]]}}}],["appear",{"_index":1343,"t":{"358":{"position":[[136,7]]}}}],["append",{"_index":1513,"t":{"442":{"position":[[182,8],[1078,8]]},"444":{"position":[[177,8]]}}}],["appli",{"_index":250,"t":{"27":{"position":[[688,7]]},"172":{"position":[[85,5]]},"182":{"position":[[548,7]]},"188":{"position":[[98,7]]},"265":{"position":[[408,7],[989,5],[1497,7]]},"298":{"position":[[222,5],[299,5]]},"432":{"position":[[104,5]]},"436":{"position":[[372,8]]},"444":{"position":[[69,8],[267,7],[287,5],[414,7]]},"468":{"position":[[141,5],[246,7]]},"498":{"position":[[250,7]]},"502":{"position":[[387,5]]},"533":{"position":[[154,5]]}}}],["applic",{"_index":33,"t":{"8":{"position":[[77,11]]},"10":{"position":[[80,11]]},"33":{"position":[[106,11],[145,11],[437,11]]},"35":{"position":[[33,13]]},"38":{"position":[[173,12]]},"44":{"position":[[99,12]]},"120":{"position":[[321,11]]},"142":{"position":[[40,12]]},"213":{"position":[[0,11],[123,11]]},"271":{"position":[[78,12],[271,11]]},"273":{"position":[[385,11]]},"277":{"position":[[27,11]]},"281":{"position":[[40,12]]},"453":{"position":[[22,11]]},"502":{"position":[[69,11]]}}}],["applywebpackconfigstylableexclud",{"_index":362,"t":{"48":{"position":[[388,34],[1188,34]]},"50":{"position":[[470,35]]},"54":{"position":[[683,34]]},"62":{"position":[[320,34]]}}}],["applywebpackconfigstylableexcludes(config",{"_index":373,"t":{"48":{"position":[[781,43]]},"50":{"position":[[895,43]]},"54":{"position":[[1076,43]]},"62":{"position":[[537,43]]}}}],["approach",{"_index":649,"t":{"94":{"position":[[67,8]]},"194":{"position":[[421,10]]},"271":{"position":[[34,8]]}}}],["arg2",{"_index":1240,"t":{"298":{"position":[[155,6]]}}}],["argument",{"_index":395,"t":{"50":{"position":[[302,8]]},"84":{"position":[[162,9]]},"239":{"position":[[97,9],[146,9]]},"267":{"position":[[422,8]]},"352":{"position":[[86,10],[152,8],[386,9]]},"440":{"position":[[77,9],[221,9],[267,8],[376,9],[530,10]]},"442":{"position":[[507,10]]},"464":{"position":[[166,10]]},"478":{"position":[[549,8],[626,9]]},"510":{"position":[[95,8],[220,9]]},"582":{"position":[[86,9]]},"586":{"position":[[135,8]]},"588":{"position":[[204,8]]},"594":{"position":[[291,10]]}}}],["around",{"_index":1263,"t":{"312":{"position":[[344,6]]}}}],["array",{"_index":1507,"t":{"440":{"position":[[541,5]]},"442":{"position":[[518,5]]},"586":{"position":[[7,5]]},"594":{"position":[[69,5]]}}}],["array(r",{"_index":1819,"t":{"586":{"position":[[215,10]]}}}],["arraytagnextprev - + Search the documentation - + - - + + -

        Search the documentation

        +

        Search the documentation

        \ No newline at end of file