@teambit/node 0.0.658 → 0.0.659

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/{__compositions-1645845653707.js → __compositions-1645932113477.js} +0 -0
  2. package/{__overview-1645845653707.js → __overview-1645932113477.js} +0 -0
  3. package/{__preview-1645845653707.js → __preview-1645932113477.js} +2 -2
  4. package/artifacts/env-template/public/181.js +1 -1
  5. package/artifacts/env-template/public/{630.js → 559.js} +1 -1
  6. package/artifacts/env-template/public/719.js +6 -6
  7. package/artifacts/env-template/public/722.js +1 -1
  8. package/artifacts/env-template/public/848.js +1 -1
  9. package/artifacts/env-template/public/assets-manifest.json +10 -10
  10. package/artifacts/env-template/public/compositions.13cb913c0322df8e44d7.js +1 -0
  11. package/artifacts/env-template/public/compositions.html +1 -1
  12. package/artifacts/env-template/public/{overview.d1509e19b40d7f1e3be9.js → overview.fd7070ba36960505c6bc.js} +1 -1
  13. package/artifacts/env-template/public/overview.html +1 -1
  14. package/artifacts/env-template/public/preview-root.f2cec70be3721d2ab00b.js +1 -0
  15. package/artifacts/env-template/public/service-worker.js +1 -1
  16. package/artifacts/env-template/public/static/css/{719.e8fb8841.css → 719.9bbec047.css} +1 -1
  17. package/artifacts/preview/teambit_harmony_node-preview.js +1 -1
  18. package/package-tar/teambit-node-0.0.659.tgz +0 -0
  19. package/package.json +18 -18
  20. package/artifacts/env-template/public/compositions.fec56ea09af9a2c2bd34.js +0 -1
  21. package/artifacts/env-template/public/preview-root.0317a040ca42691e01fa.js +0 -1
  22. package/package-tar/teambit-node-0.0.658.tgz +0 -0
package/artifacts/env-template/public/static/css/{719.e8fb8841.css → 719.9bbec047.css} RENAMED
@@ -1 +1 @@
1
- .sizes_heading__wpEPv{--bit-h-xxs:16px;--bit-h-xs:18px;--bit-h-sm:24px;--bit-h-md:26px;--bit-h-lg:36px;--bit-h-xl:40px;--bit-h-xxl:50px}.global_overrides__19p1X{line-height:normal}.block-quote_blockQuote__DrJtI{background-color:hsla(0,2%,79%,.2);border-left:5px solid #897dec;border-radius:5px;margin:0 0 1em;padding:1em 10px 1em 18px}.block-quote_blockQuote__DrJtI>:last-child{margin-bottom:0}.bold_bold__1VriJ{font-weight:700}.external-link_link__37pYW{text-decoration:none}.external-link_link__37pYW:hover{text-decoration:underline}.heading-sizes_xxs__sqY6F{font-size:16px;font-size:var(--bit-h-xxs,16px)}.heading-sizes_xs__2vIO-{font-size:18px;font-size:var(--bit-h-xs,18px)}.heading-sizes_sm__SWCg7{font-size:24px;font-size:var(--bit-h-sm,24px)}.heading-sizes_md__1VfRy{font-size:26px;font-size:var(--bit-h-md,26px)}.heading-sizes_lg__12r2v{font-size:36px;font-size:var(--bit-h-lg,36px)}.heading-sizes_xl__18vfm{font-size:40px;font-size:var(--bit-h-xl,40px)}.heading-sizes_xxl__1XBq0{font-size:50px;font-size:var(--bit-h-xxl,50px)}.heading_h1__18YHt,.heading_h2__1ja7_,.heading_h3__3SLRc,.heading_h4__uSuLS,.heading_h5__30dq2,.heading_h6__2CGfq{font-weight:700;margin:0}.heading_h1__18YHt{margin-bottom:20px}.anchor_anchor__3Kymc{align-items:center;display:flex;text-decoration:none}.anchor_anchorIcon__osznX{color:var(--bit-text-color-light);font-size:18px}.linked-heading_linkedHeading__1exDt{align-items:center;display:flex;margin-bottom:16px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.linked-heading_linkedHeading__1exDt:hover .linked-heading_anchor__3xkqo{opacity:1;visibility:unset}.linked-heading_heading__28Zmh{margin-bottom:0;margin-right:8px}.linked-heading_anchor__3xkqo{opacity:0;transform:translateY(4px);transition:visibility .3s,opacity .3s ease-in-out;visibility:hidden}.create-heading_mdxLinkedHeading__383jO{justify-content:start;margin-top:40px;width:100%}.create-heading_mdxLinkedHeading__383jO[align=center]{justify-content:center}.create-heading_mdxLinkedHeading__383jO[align=left]{justify-content:start}.create-heading_mdxLinkedHeading__383jO[align=right]{justify-content:flex-end}.create-heading_mdxLinkedHeading__383jO.create-heading_mainHeadingStyles__DHpSm{border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,#ededed);padding-bottom:8px}.create-heading_mdxLinkedHeading__383jO:first-child{padding-top:0}.image_img__DuAT6{max-width:100%}.image_img__DuAT6:not(:last-child){margin-bottom:16px}.inline-code_inlineCode__1FiLp{background-color:#a6a6a633;border-radius:.25em;font-family:monospace,sans-serif;font-size:.85em;padding:.2em .4em}.inline-code_highlight__4YZsC{background-color:#eceaff;background-color:var(--bit-accent-bg,#eceaff)}.italic_italic__krNdx{font-style:italic}.ol_ol__35tJ4{list-style:revert;list-style-position:outside;margin:0 0 16px;padding:0 0 0 32px}.ol_ol__35tJ4 ol,.ol_ol__35tJ4 ul{padding-left:18px}.ol_ol__35tJ4>li>p{margin-bottom:0}.text-sizes_xxs__3H1C0{font-size:12px;font-size:var(--bit-p-xxs,12px)}.text-sizes_xs__2T9zA{font-size:14px;font-size:var(--bit-p-xs,14px)}.text-sizes_sm__1KP6p{font-size:15px;font-size:var(--bit-p-sm,15px)}.text-sizes_md__1kc0J{font-size:16px;font-size:var(--bit-p-md,16px)}.text-sizes_lg__-zy_i{font-size:18px;font-size:var(--bit-p-lg,18px)}.text-sizes_xl__3ulEO{font-size:20px;font-size:var(--bit-p-xl,20px)}.text-sizes_xxl__8s7sQ{font-size:24px;font-size:var(--bit-p-xxl,24px)}.paragraph_paragraph__2tnlB{margin:0 0 1em}.separator_separator__gCjbY{border:none;border-bottom:1px solid var(--bit-border-color-lightest);border-radius:5px;margin-bottom:40px;margin-top:30px}.copied-message_copiedMessage__2WRi5{background-color:#6c5ce7;background-color:var(--bit-accent-color,#6c5ce7);border-radius:12px;color:#fff;color:var(--bit-text-on-accent,#fff);font-size:12px;opacity:0;padding:2px 5px;pointer-events:none;position:absolute;transform:translate(-100%);transition:visibility .5s,opacity .5s ease-in-out;visibility:hidden}.copied-message_showMessage__3YUMc{opacity:1;visibility:visible}.code-snippet_snippetWrapper__2LAr3{position:relative}.code-snippet_snippetWrapper__2LAr3:hover .code-snippet_copyIcon__oS7tG{opacity:1}.code-snippet_snippetWrapper__2LAr3 .code-snippet_codeSnippet__1p-ds{background-color:#fff;border-radius:10px;font-family:Roboto mono;font-size:var(--bit-p-xs);margin:0!important;padding:16px!important}.code-snippet_snippetWrapper__2LAr3 .code-snippet_copyIcon__oS7tG{background-color:#fff;border-radius:8px;color:#414141;cursor:pointer;font-size:16px;margin-left:8px;opacity:0;padding:6px 8px;transition:opacity .3s ease-in-out}.code-snippet_snippetWrapper__2LAr3 code{font-family:inherit!important}.code-snippet_copy__11Xp2{align-items:center;display:flex;position:absolute;right:6px;top:6px}.pane_pane__5auYJ{transition:width .3s,height .3s}[data-split-layout*=first]>.pane_pane__5auYJ,[data-split-layout*=last]>.pane_pane__5auYJ{max-width:unset;min-width:unset}.splitter_splitter__3oXaY{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-split-layout^=row] .splitter_splitter__3oXaY{cursor:col-resize;height:100%}[data-split-layout^=column] .splitter_splitter__3oXaY{cursor:row-resize;width:100%}body{padding:0}.split-pane_splitPane__3NU9t{display:flex;flex-direction:column}.split-pane_splitPane__3NU9t.split-pane_isDragging__1TJaj{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.split-pane_splitPane__3NU9t[data-is-dragging=true]>*{transition:none}.split-pane_splitPane__3NU9t[data-split-layout^=row]{flex-direction:row}.split-pane_splitPane__3NU9t[data-split-layout^="row reverse"]{flex-direction:row-reverse}.split-pane_splitPane__3NU9t[data-split-layout^=column]{flex-direction:column}.split-pane_splitPane__3NU9t[data-split-layout^="column reverse"]{flex-direction:column-reverse}.splitter_hoverSplitter__15QHM{background:#ededed;background:var(--bit-border-color-lightest,#ededed);flex:none;min-height:1px;min-width:1px;position:relative}.splitter_highlighter__3CR3-{height:100%;width:100%}.splitter_highlighter__3CR3-,.splitter_highlighter__3CR3-:after,.splitter_highlighter__3CR3-:before{transition:background-color .3s ease-in-out,box-shadow .3s ease-in-out}.splitter_highlighter__3CR3-:hover,.splitter_highlighter__3CR3-:hover:after,.splitter_highlighter__3CR3-:hover:before,[data-is-dragging=true]>.splitter_hoverSplitter__15QHM>.splitter_highlighter__3CR3-,[data-is-dragging=true]>.splitter_hoverSplitter__15QHM>.splitter_highlighter__3CR3-:after,[data-is-dragging=true]>.splitter_hoverSplitter__15QHM>.splitter_highlighter__3CR3-:before{background:#6c5ce7;background:var(--bit-accent-color,#6c5ce7);transition-delay:.18s}.splitter_highlighter__3CR3-:after,.splitter_highlighter__3CR3-:before{background:transparent;content:" ";display:block;position:absolute}[data-split-layout^=row]>.splitter_hoverSplitter__15QHM>.splitter_highlighter__3CR3-:after,[data-split-layout^=row]>.splitter_hoverSplitter__15QHM>.splitter_highlighter__3CR3-:before{height:100%;width:200%}[data-split-layout^=row]>.splitter_hoverSplitter__15QHM>.splitter_highlighter__3CR3-:before{left:-200%}[data-split-layout^=row]>.splitter_hoverSplitter__15QHM>.splitter_highlighter__3CR3-:after{right:-200%}[data-split-layout^=column]>.splitter_hoverSplitter__15QHM>.splitter_highlighter__3CR3-:after,[data-split-layout^=column]>.splitter_hoverSplitter__15QHM>.splitter_highlighter__3CR3-:before{height:200%;width:100%}[data-split-layout^=column]>.splitter_hoverSplitter__15QHM>.splitter_highlighter__3CR3-:before{top:-200%}[data-split-layout^=column]>.splitter_hoverSplitter__15QHM>.splitter_highlighter__3CR3-:after{bottom:-200%}.error_error__1eGOY{color:#e62e5c;color:var(--bit-error-color,#e62e5c)}.react-playground_column__MfEmP{height:450px}.react-playground_column__MfEmP .react-playground_codePane__35KBZ,.react-playground_column__MfEmP .react-playground_previewPane__1J_9U{max-height:90%;min-height:10%;width:100%}.react-playground_column__MfEmP .react-playground_error__2W6LT,.react-playground_column__MfEmP .react-playground_previewPane__1J_9U{border-bottom:none;border-radius:6px 6px 0 0}.react-playground_row__3c6yp{height:100%;max-height:450px}.react-playground_row__3c6yp .react-playground_codePane__35KBZ,.react-playground_row__3c6yp .react-playground_previewPane__1J_9U{height:100%;max-width:90%;min-width:10%}.react-playground_row__3c6yp .react-playground_error__2W6LT,.react-playground_row__3c6yp .react-playground_previewPane__1J_9U{border-left:none;border-radius:0 6px 6px 0}.react-playground_error__2W6LT{background-color:var(--bit-bg-color);border:1px solid var(--bit-error-color);bottom:0;box-sizing:border-box;color:var(--bit-error-color);font-family:Roboto mono;font-size:11px;left:0;margin:0;overflow:auto;padding:8px;position:absolute;right:0;top:0;transition:all 1s ease-in-out}.react-playground_codePane__35KBZ{background-color:#282c34;overflow:auto}.react-playground_editor__1VRVn{font-family:Roboto mono!important;font-size:11px;max-width:unset!important;min-width:100%;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.react-playground_editor__1VRVn>textarea{outline:none;white-space:pre!important}.react-playground_editor__1VRVn>pre{white-space:pre!important}.react-playground_splitter__2gA4z{background-color:#282c34}.react-playground_previewPane__1J_9U{border:1px solid var(--bit-border-color-lightest);box-sizing:border-box;display:flex;flex-shrink:1!important;overflow:auto;position:relative;transform:translateZ(0)}.react-playground_previewBox__2Zfk9{margin:auto;min-height:20px;min-width:20px}.react-playground_playground__3HRLT{border-radius:6px;display:flex;overflow:hidden}.react-playground_playground__3HRLT>div{width:100%}.snippet_snippet__bynKV{margin-bottom:16px}.sup_sup__gJEHa{font-size:smaller;vertical-align:super}.base-table_table__3YVTq{border:1px solid #ededed;border:1px solid var(--bit-border-color-lightest,#ededed);border-collapse:collapse;border-radius:8px;border-spacing:0;display:block;margin-bottom:16px;max-width:100%;overflow:auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.base-table_table__3YVTq tr:nth-child(2n){background-color:#f6f6f6;background-color:var(--bit-bg-dent,#f6f6f6)}.base-table_table__3YVTq thead{border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,#ededed)}.base-table_table__3YVTq th{color:#2b2b2b;color:var(--bit-text-color-heavy,#2b2b2b);font-size:var(--bit-p-xs);font-weight:700;padding:12px 20px}.base-table_table__3YVTq td,.base-table_table__3YVTq th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.base-table_table__3YVTq table,.base-table_table__3YVTq td,.base-table_table__3YVTq th,.base-table_table__3YVTq thead,.base-table_table__3YVTq tr{text-align:start}.base-table_table__3YVTq table[align=center],.base-table_table__3YVTq td[align=center],.base-table_table__3YVTq th[align=center],.base-table_table__3YVTq thead[align=center],.base-table_table__3YVTq tr[align=center]{text-align:center}.base-table_table__3YVTq table[align=left],.base-table_table__3YVTq td[align=left],.base-table_table__3YVTq th[align=left],.base-table_table__3YVTq thead[align=left],.base-table_table__3YVTq tr[align=left]{text-align:start}.base-table_table__3YVTq table[align=right],.base-table_table__3YVTq td[align=right],.base-table_table__3YVTq th[align=right],.base-table_table__3YVTq thead[align=right],.base-table_table__3YVTq tr[align=right]{text-align:end}.td_td__15w6K{padding:12px 20px}.tr_tr__2MH6U:not(:last-child){border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,#ededed)}.ul_ul__2kPf-{list-style:revert;list-style-position:outside;margin:0 0 16px;padding:0 0 0 32px}.ul_ul__2kPf->li>ol,.ul_ul__2kPf->li>ul{margin-bottom:0;padding-left:18px}.ul_ul__2kPf->li>p{margin-bottom:none}.mdx-layout_mdxContent__3MR2u{line-height:1.5}.mdx-layout_mdxContent__3MR2u img{max-width:100%}.copied-message_copiedMessage__2Nw9Y{background-color:#6c5ce7;background-color:var(--bit-accent-color,#6c5ce7);border-radius:12px;color:#fff;color:var(--bit-text-on-accent,#fff);font-size:12px;opacity:0;padding:2px 5px;pointer-events:none;position:absolute;transform:translate(-100%);transition:visibility .5s,opacity .5s ease-in-out;visibility:hidden}.copied-message_showMessage__MPaRY{opacity:1;visibility:visible}.code-snippet_snippetWrapper__ooMsa{position:relative}.code-snippet_snippetWrapper__ooMsa:hover .code-snippet_copyIcon__Y6SkV{opacity:1}.code-snippet_snippetWrapper__ooMsa .code-snippet_codeSnippet__1JSRo{background-color:#fff;border-radius:10px;font-family:Roboto mono;font-size:var(--bit-p-xs);margin:0!important;padding:16px!important}.code-snippet_snippetWrapper__ooMsa .code-snippet_copyIcon__Y6SkV{background-color:#fff;border-radius:8px;color:#414141;cursor:pointer;font-size:16px;margin-left:8px;opacity:0;padding:6px 8px;transition:opacity .3s ease-in-out}.code-snippet_snippetWrapper__ooMsa code{font-family:inherit!important}.code-snippet_copy__3agCR{align-items:center;display:flex;position:absolute;right:6px;top:6px}.error_error__Aedkj{color:#e62e5c;color:var(--bit-error-color,#e62e5c)}.react-playground_column__Aia6P{height:450px}.react-playground_column__Aia6P .react-playground_codePane__Hh_rK,.react-playground_column__Aia6P .react-playground_previewPane__2ZpXH{max-height:90%;min-height:10%;width:100%}.react-playground_column__Aia6P .react-playground_error__3FQ9-,.react-playground_column__Aia6P .react-playground_previewPane__2ZpXH{border-bottom:none;border-radius:6px 6px 0 0}.react-playground_row__1nQO2{height:100%;max-height:450px}.react-playground_row__1nQO2 .react-playground_codePane__Hh_rK,.react-playground_row__1nQO2 .react-playground_previewPane__2ZpXH{height:100%;max-width:90%;min-width:10%}.react-playground_row__1nQO2 .react-playground_error__3FQ9-,.react-playground_row__1nQO2 .react-playground_previewPane__2ZpXH{border-left:none;border-radius:0 6px 6px 0}.react-playground_error__3FQ9-{background-color:var(--bit-bg-color);border:1px solid var(--bit-error-color);bottom:0;box-sizing:border-box;color:var(--bit-error-color);font-family:Roboto mono;font-size:11px;left:0;margin:0;overflow:auto;padding:8px;position:absolute;right:0;top:0;transition:all 1s ease-in-out}.react-playground_codePane__Hh_rK{background-color:#282c34;overflow:auto}.react-playground_editor__YkTAT{font-family:Roboto mono!important;font-size:11px;max-width:unset!important;min-width:100%;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.react-playground_editor__YkTAT>textarea{outline:none;white-space:pre!important}.react-playground_editor__YkTAT>pre{white-space:pre!important}.react-playground_splitter__3aB9x{background-color:#282c34}.react-playground_previewPane__2ZpXH{border:1px solid var(--bit-border-color-lightest);box-sizing:border-box;display:flex;flex-shrink:1!important;overflow:auto;position:relative;transform:translateZ(0)}.react-playground_previewBox__3RlPe{margin:auto;min-height:20px;min-width:20px}.react-playground_playground__36KMr{border-radius:6px;display:flex;overflow:hidden}.react-playground_playground__36KMr>div{width:100%}.snippet_snippet__3w3tl{margin-bottom:16px}.link_link__eKYlx{color:#6c5ce7;color:var(--bit-accent-color,#6c5ce7);text-decoration:none}.link_link__eKYlx:hover{color:#5d4aec;color:var(--bit-accent-heavy,#5d4aec);text-decoration:underline}.admonition{border-radius:8px;margin-bottom:1em;padding:15px 30px 15px 15px}.admonition h3{display:flex;margin-bottom:8px;margin-top:0;text-transform:uppercase}.admonition-heading>div{margin-bottom:0;margin-top:0}.admonition-icon{align-self:center;display:inline-flex;margin-right:4px}.admonition-icon svg{stroke-width:0;display:inline-block;height:22px;width:18px}.admonition-content>:last-child{margin-bottom:0}.admonition{background-color:#eceaff;background-color:var(--bit-accent-primary-bg,#eceaff);border-left:8px solid #6c5ce7;border-left:8px solid var(--bit-accent-primary-color,#6c5ce7)}.admonition h5{color:#6c5ce7;color:var(--bit-accent-primary-color,#6c5ce7);display:flex}.admonition .admonition-icon svg{stroke:#6c5ce7;stroke:var(--bit-accent-primary-color,#6c5ce7);fill:#6c5ce7;fill:var(--bit-accent-primary-color,#6c5ce7)}.admonition-caution{background-color:rgba(230,126,34,.1);border-left:8px solid #e67e22}.admonition-caution h5{color:#e67e22}.admonition-caution .admonition-icon svg{stroke:#e67e22;fill:#e67e22}.admonition-tip{background-color:#eefaf3;background-color:var(--bit-accent-success-bg,#eefaf3);border-left:8px solid #37b26c;border-left:8px solid var(--bit-accent-success-color,#37b26c)}.admonition-tip h5{color:#37b26c;color:var(--bit-accent-success-color,#37b26c)}.admonition-tip .admonition-icon svg{stroke:#37b26c;stroke:var(--bit-accent-success-color,#37b26c);fill:#37b26c;fill:var(--bit-accent-success-color,#37b26c)}.admonition-warning{background-color:#fdeff2;background-color:var(--bit-accent-impulsive-bg,#fdeff2);border-left:8px solid #e62e5c;border-left:8px solid var(--bit-accent-impulsive-color,#e62e5c)}.admonition-warning h5{color:#e62e5c;color:var(--bit-accent-impulsive-color,#e62e5c)}.admonition-warning .admonition-icon svg{stroke:#e62e5c;stroke:var(--bit-accent-impulsive-color,#e62e5c);fill:#e62e5c;fill:var(--bit-accent-impulsive-color,#e62e5c)}.admonition-important{background-color:#f3faff;background-color:var(--bit-accent-process-color,#f3faff);border-left:8px solid #0984e3;border-left:8px solid var(--bit-accent-process-color,#0984e3)}.admonition-important h5{color:#0984e3;color:var(--bit-accent-process-color,#0984e3)}.admonition-important .admonition-icon svg{stroke:#0984e3;stroke:var(--bit-accent-process-color,#0984e3);fill:#0984e3;fill:var(--bit-accent-process-color,#0984e3)}.admonition-note{background-color:#fff5dd;background-color:var(--bit-accent-hunger-bg,#fff5dd);border-left:8px solid #ffc640;border-left:8px solid var(--bit-accent-hunger-color,#ffc640)}.admonition-note h5{color:#ffc640;color:var(--bit-accent-hunger-bg,#ffc640)}.admonition-note .admonition-icon svg{stroke:#ffc640;stroke:var(--bit-accent-hunger-color,#ffc640);fill:#ffc640;fill:var(--bit-accent-hunger-color,#ffc640)}.page-frame_centerColumn__3NPav{margin-left:auto;margin-right:auto;max-width:1000px;width:calc(100% - 40px)}.page-frame_wideColumn__1ChZv{margin-left:auto;margin-right:auto;max-width:1440px;width:calc(100% - 40px)}.page-frame_textColumn__3zLbU{max-width:700px}.grid_gridContainer__4VBNN{grid-gap:16px 16px;display:grid}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-1__1ss_5{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-1__3P4lU{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-1__wODMm{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-1__tUeI_{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-1__1kjOk{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-1__3LVbF{grid-template-columns:repeat(1,1fr)}}.grid-template_colTemplate--all-1__-UOpc{grid-template-columns:repeat(1,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-2__1KjEh{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-2__1__QR{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-2__1ul_n{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-2__2S7Tu{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-2__UwwbB{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-2__1rYvu{grid-template-columns:repeat(2,1fr)}}.grid-template_colTemplate--all-2__1He1E{grid-template-columns:repeat(2,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-3__TMFFR{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-3__2MhHN{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-3__3WGI1{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-3__1q_C8{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-3__1hX_J{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-3__1h7Jj{grid-template-columns:repeat(3,1fr)}}.grid-template_colTemplate--all-3__6dGFi{grid-template-columns:repeat(3,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-4__2teW3{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-4__2Aha_{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-4__1ALzl{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-4__2qnzc{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-4__354WX{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-4__17hwz{grid-template-columns:repeat(4,1fr)}}.grid-template_colTemplate--all-4__10tSX{grid-template-columns:repeat(4,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-5__agmQE{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-5__3AK3h{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-5__11c2e{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-5__xfZLG{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-5__2KE0o{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-5__3zT0y{grid-template-columns:repeat(5,1fr)}}.grid-template_colTemplate--all-5__1jVOK{grid-template-columns:repeat(5,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-6__29fxZ{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-6__28Twr{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-6__2kDBI{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-6__1lPCd{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-6__2cSru{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-6__2YUIf{grid-template-columns:repeat(6,1fr)}}.grid-template_colTemplate--all-6__CYkFQ{grid-template-columns:repeat(6,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-7__GA5wI{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-7__4Fb_8{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-7__39kEU{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-7__36AOH{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-7__2NhTM{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-7__FCphT{grid-template-columns:repeat(7,1fr)}}.grid-template_colTemplate--all-7__6oelD{grid-template-columns:repeat(7,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-8__ivU4a{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-8__Kib8u{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-8__1mabe{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-8__3-Ua-{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-8__910kE{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-8__juIPn{grid-template-columns:repeat(8,1fr)}}.grid-template_colTemplate--all-8__13do1{grid-template-columns:repeat(8,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-9__3txev{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-9__2nWIW{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-9__WSiRs{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-9__ZZSUh{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-9__3nDUt{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-9__1LuKR{grid-template-columns:repeat(9,1fr)}}.grid-template_colTemplate--all-9__8Gk5M{grid-template-columns:repeat(9,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-10__11cAC{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-10__2PSIX{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-10__1St0q{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-10__2p7B1{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-10__3V7p3{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-10__stzpr{grid-template-columns:repeat(10,1fr)}}.grid-template_colTemplate--all-10__1WPG9{grid-template-columns:repeat(10,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-11__XIH79{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-11__545uh{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-11__3-Wg_{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-11__36P4G{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-11__2uxtf{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-11__WVTUJ{grid-template-columns:repeat(11,1fr)}}.grid-template_colTemplate--all-11__9dbT_{grid-template-columns:repeat(11,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-12__3A-zw{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-12__3bfsE{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-12__3sX2W{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-12__1_9Ml{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-12__1xPfh{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-12__1XdEa{grid-template-columns:repeat(12,1fr)}}.grid-template_colTemplate--all-12__2b0DF{grid-template-columns:repeat(12,1fr)}.copy-box_copyBox__2IYNC{align-items:center;background:var(--bit-bg-dent);border:1px solid var(--bit-border-color-lightest);border-radius:6px;display:flex;font-size:var(--bit-p-xs);height:40px;justify-content:space-between;min-width:80px;padding:0 11px}.copy-box_copyBox__2IYNC .copy-box_leftSection__1h0Z5{font-family:monospace;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;white-space:pre}.copy-box_button__G55mZ{background-color:var(--bit-bg-color-highlight);border:none;box-sizing:border-box;color:var(--bit-accent-color);cursor:pointer;outline:none}.copy-box_rightSection__qZszL{align-items:center;display:flex;position:relative}.copy-box_copyIcon__1sS5o{font-size:var(--bit-p-lg)}.paragraph_paragraph__9ufJX{margin:0 0 1em}.consumable-link_copyMethod__1t46m{align-content:center;grid-template-columns:1fr 4fr;margin-bottom:16px}.consumable-link_copyTitle__OpvLV{align-items:center;display:flex;font-weight:700;margin:unset}.heading-sizes_xxs__2NEpY{font-size:16px;font-size:var(--bit-h-xxs,16px)}.heading-sizes_xs__3Whdh{font-size:18px;font-size:var(--bit-h-xs,18px)}.heading-sizes_sm__2XY8O{font-size:24px;font-size:var(--bit-h-sm,24px)}.heading-sizes_md__VnNuJ{font-size:26px;font-size:var(--bit-h-md,26px)}.heading-sizes_lg__2ctQr{font-size:36px;font-size:var(--bit-h-lg,36px)}.heading-sizes_xl__1SRy-{font-size:40px;font-size:var(--bit-h-xl,40px)}.heading-sizes_xxl__2hbfE{font-size:50px;font-size:var(--bit-h-xxl,50px)}.heading_h1__39RVQ,.heading_h2__2S7-G,.heading_h3__1BSp1,.heading_h4__L5mNd,.heading_h5__2i6xN,.heading_h6__1XRJP{font-weight:700;margin:0}.heading_h1__39RVQ{margin-bottom:20px}.label_label__1OitV{background:var(--bit-accent-bg);border-radius:6px;color:var(--bit-accent-heavy);display:inline-block;font-size:12px;font-size:var(--bit-p-xxs,12px);font-weight:700;padding:4px 8px;text-transform:uppercase}.label-list_labelList__U6ppw{margin-bottom:16px}.label-list_labelList__U6ppw>*{margin-bottom:1em}.label-list_labelList__U6ppw>:not(:last-child){margin-right:1em}.section_section__e878i:empty{display:none}.section_sectionMargin__JFu0O{margin-bottom:40px}.separator_separator__1JNXS{border:none;border-bottom:1px solid var(--bit-border-color-lightest);border-radius:5px;margin-bottom:40px;margin-top:30px}.separator_separator__3JnE-{border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,#ededed);width:100%}.muted-text_mutedText__2iqXg{color:#6c707c;color:var(--bit-text-color-light,#6c707c)}.sub-title_subTitle__3rmt5{margin-bottom:16px}.component-overview_componentTitle__3Y6eo{align-items:center;display:flex;flex-wrap:wrap;margin-bottom:20px}.component-overview_componentTitle__3Y6eo>h1{margin:0}.component-overview_badgeContainer__1EUM_{align-items:center;display:flex;flex-wrap:wrap;margin-top:8px}.component-overview_badgeContainer__1EUM_>*{margin:0 8px}.component-overview_subTitle__33VBo{white-space:break-spaces}.component_container__wKARi{display:flex;flex-direction:column;height:100%}.card_card__37xow{box-sizing:border-box;padding:20px}.elevations_low__1hVha{box-shadow:var(--bit-shadow-hover-low)}.elevations_medium__3klNF{box-shadow:var(--bit-shadow-hover-medium)}.elevations_high__34Cbm{box-shadow:var(--bit-shadow-hover-high)}.roundness_sharp__HxXUj{border-radius:2px}.roundness_default__2lyQQ{border-radius:5px}.roundness_small__3Cwbi{border-radius:8px}.roundness_medium__rMVHV{border-radius:10px}.roundness_circle__18nMU{border-radius:50%}.background_bedrock__3FKrB{background:var(--bit-bg-bedrock)}.background_base__29SaX,.background_layer__Sl4XN{background:var(--bit-bg-color)}.background_crust__3IFae{background:var(--bit-bg-tooltip)}.background_topping__bd7wA{background:var(--bit-bg-color)}.background_topping__bd7wA:hover{background:var(--bit-bg-heavy)}.background_dent__3lLeg{background:var(--bit-bg-dent)}.accent-color_primary__3frqn{--bit-accent-color:#6c5ce7;--bit-accent-heavy:#5d4aec;--bit-accent-light:#897dec;--bit-accent-text:#6c5ce7;--bit-accent-text-heavy:#5d4aec;--bit-text-on-accent:#fff;--bit-accent-bg:#eceaff;--bit-accent-bg-heavy:#c9c3f6}.accent-color_complementary__2hAqH{--bit-accent-color:#f83d6c;--bit-accent-heavy:#f7174f;--bit-accent-light:#f96389;--bit-accent-text:#f83d6c;--bit-accent-text-heavy:#f7174f;--bit-text-on-accent:#fff;--bit-accent-bg:#ffe2ea;--bit-accent-bg-heavy:#fb9cb4}.accent-color_impulsive__A1-5J{--bit-accent-color:#e62e5c;--bit-accent-heavy:#d31948;--bit-accent-light:#f086a0;--bit-accent-text:#e62e5c;--bit-accent-text-heavy:#d31948;--bit-text-on-accent:#fff;--bit-accent-bg:#fdeff2;--bit-accent-bg-heavy:#f7bac9}.accent-color_hungry__2f4vr{--bit-accent-color:#ffc640;--bit-accent-heavy:#ff991f;--bit-accent-light:#ffe380;--bit-accent-text:#ffc640;--bit-accent-text-heavy:#ff991f;--bit-text-on-accent:#0c0c0c;--bit-accent-bg:#fff5dd;--bit-accent-bg-heavy:#fff0b3}.accent-color_success__bd5oL{--bit-accent-color:#37b26c;--bit-accent-heavy:#2e945a;--bit-accent-light:#94deb4;--bit-accent-text:#37b26c;--bit-accent-text-heavy:#2e945a;--bit-text-on-accent:#fff;--bit-accent-bg:#eefaf3;--bit-accent-bg-heavy:#d0f1de}.accent-color_process__2YrEO{--bit-accent-color:#0984e3;--bit-accent-heavy:#3d5afe;--bit-accent-light:#95ccf5;--bit-accent-text:#0984e3;--bit-accent-text-heavy:#3d5afe;--bit-text-on-accent:#fff;--bit-accent-bg:#f3faff;--bit-accent-bg-heavy:#d2ecfe}.accent-color_emphasized__3yGcN{--bit-accent-color:#2b2b2b;--bit-accent-heavy:#0c0c0c;--bit-accent-light:#414141;--bit-accent-text:#2b2b2b;--bit-accent-text-heavy:#0c0c0c;--bit-text-on-accent:#fff;--bit-accent-bg:#ededed;--bit-accent-bg-heavy:#cccfd4}.accent-color_neutral__gff6l{--bit-accent-color:#414141;--bit-accent-heavy:#2b2b2b;--bit-accent-light:#6c707c;--bit-accent-text:#414141;--bit-accent-text-heavy:#2b2b2b;--bit-text-on-accent:#fff;--bit-accent-bg:#f6f6f6;--bit-accent-bg-heavy:#ededed}.themed-text_themedText__-5NI1{color:#6c5ce7;color:var(--bit-accent-color,#6c5ce7)}.composition-card_compositionCard__1TGzH{background-color:#fff;background-color:var(--bit-bg-color,#fff);box-shadow:var(--bit-shadow-raised-low);display:flex;flex:none;flex-direction:column;min-height:122px;min-width:199px;padding:0}.composition-card_compositionCard__1TGzH:hover .composition-card_linkToComposition__uWeCP{opacity:1;visibility:visible}.composition-card_compositionContainer__1fvHN{box-sizing:border-box;margin:auto;max-width:100%;overflow:auto;padding:16px;position:relative;transform:translateZ(0)}.composition-card_title__1pxwS{align-items:center;border-top:1px solid #ededed;border-top:1px solid var(--bit-border-color-lightest,#ededed);display:flex;flex:none;font-size:.875em;justify-content:space-between;padding:8px 16px}.composition-card_title__1pxwS>span{margin-right:8px}.composition-card_linkToComposition__uWeCP{color:#2b2b2b;color:var(--bit-text-color-heavy,#2b2b2b);opacity:0;text-decoration:none;transition:opacity .3s,visibility .3s ease-in-out;visibility:hidden}.composition-card_compositionCardError__1YDP3{border-radius:4px 4px 0 0}.compositions-overview_background__3z-mR{background:#f6f6f6;background:var(--bit-bg-dent,#f6f6f6);border:1px solid #ededed;border:1px solid var(--bit-border-color-lightest,#ededed);border-radius:6px;display:flex;max-height:500px;overflow-x:auto;padding:12px}.compositions-overview_background__3z-mR>*{margin-right:16px}.compositions-overview_background__3z-mR>:last-child{margin:0}.abs-container_container__32Ee7{position:relative}.abs-container_containee__32F4t{position:absolute;visibility:hidden}[data-open=true] .abs-container_containee__32F4t{visibility:visible}.positions_top__3z-mm{bottom:100%}.positions_top-start__3Dd97{bottom:100%;left:0}.positions_top-end__p3_DQ{bottom:100%;right:0}.positions_right__2Uww5{left:100%}.positions_right-start__1dNL6{left:100%;top:0}.positions_right-end__1cvYe{bottom:0;left:100%}.positions_bottom__2JHnG{top:100%}.positions_bottom-start__PrOJ6{left:0;top:100%}.positions_bottom-end__3ioJM{right:0;top:100%}.positions_left__1_mZZ{right:100%}.positions_left-start__28qkr{right:100%;top:0}.positions_left-end__2wuCk{bottom:0;right:100%}.positions_cover__3zbKy{left:0;top:0}.displacement_displacement__2_tNV[data-position^=top]{margin-bottom:var(--bit-drawer-margin)}.displacement_displacement__2_tNV[data-position^=right]{margin-left:var(--bit-drawer-margin)}.displacement_displacement__2_tNV[data-position^=bottom]{margin-top:var(--bit-drawer-margin)}.displacement_displacement__2_tNV[data-position^=left]{margin-right:var(--bit-drawer-margin)}.displacement_displacement__2_tNV[data-position=bottom-start],.displacement_displacement__2_tNV[data-position=top-start]{margin-left:var(--bit-drawer-indent)}.displacement_displacement__2_tNV[data-position=bottom-end],.displacement_displacement__2_tNV[data-position=top-end]{margin-right:var(--bit-drawer-indent)}.displacement_displacement__2_tNV[data-position^=left-start],.displacement_displacement__2_tNV[data-position^=right-start]{margin-top:var(--bit-drawer-indent)}.displacement_displacement__2_tNV[data-position^=left-end],.displacement_displacement__2_tNV[data-position^=right-end]{margin-bottom:var(--bit-drawer-indent)}.drawer_placeholder__1C-MI{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fade-in-out_fadeInOut__3K09R{opacity:0;transform:scale(.61);transition:all .18s}[data-open=true]>.fade-in-out_fadeInOut__3K09R{opacity:1;transform:scale(1)}.tooltip-card_menu__3dWcg{background:var(--bit-bg-tooltip);padding:8px}.arrow_arrow__1FQ9D{margin:0 auto;position:absolute}.arrow_arrow__1FQ9D:before{background:var(--bit-bg-tooltip);content:"";display:block;height:10px;transform:rotate(45deg);width:10px}.arrow-position_bottom__8vlM8,.arrow-position_top__PZHJG{left:calc(50% - 5px)}.arrow-position_left__1yldm,.arrow-position_right__MK8IT{top:calc(50% - 5px)}.arrow-position_cover__3zqai,.arrow-position_none__86cQo{display:none}.arrow-shadow_top-end__2u1Yf:before,.arrow-shadow_top-start__34UQ0:before,.arrow-shadow_top__3TKYi:before{box-shadow:2px 2px 4px 0 rgba(0,0,0,.1)}.arrow-shadow_bottom-end__zFI_x:before,.arrow-shadow_bottom-start__aKHFr:before,.arrow-shadow_bottom__32vBi:before{box-shadow:-2px -2px 4px 0 rgba(0,0,0,.1)}.arrow-shadow_right-end__3e_rr:before,.arrow-shadow_right-start__1S1dt:before,.arrow-shadow_right__badwP:before{box-shadow:-2px 2px 4px 0 rgba(0,0,0,.1)}.arrow-shadow_left-end__2xptV:before,.arrow-shadow_left-start__1yaQL:before,.arrow-shadow_left__1P6F5:before{box-shadow:2px -2px 4px 0 rgba(0,0,0,.1)}.tooltip-drawer_tooltip__1kqNH{--bit-drawer-margin:10px}.tooltip-drawer_arrow__11qDF{--bit-drawer-margin:5px;--bit-drawer-indent:8px}.key_keyCombo__PL5PA{align-items:center;display:flex;white-space:nowrap}.key_keyCombo__PL5PA .key_keycap__1y0bf{margin-right:4px}.key_keyCombo__PL5PA .key_keycap__1y0bf:last-child{margin-right:0}.key_keySequence__vPmqS{align-items:center;display:flex;white-space:nowrap}.key_keycap__1y0bf{align-items:center;background-color:#f6f6f6;background-color:var(--bit-bg-dent,#f6f6f6);border-radius:3px;box-sizing:border-box;color:#6c707c;color:var(--bit-text-color-light,#6c707c);display:flex;font-size:12px;height:1.7em;justify-content:center;min-width:1.7em;padding:0 .4em;text-transform:uppercase}.key_thenSep__2a-aE{font-size:.8em;margin:0 4px}.main-dropdown_mainDropdown__3RALE{height:100%}.main-dropdown_mainDropdown__3RALE>div{align-items:center;display:flex;height:100%}.main-dropdown_mainDropdown__3RALE .main-dropdown_menu__3LwDV{border-radius:6px;font-size:var(--bit-p-xs);padding:0;right:-5px;width:300px}.main-dropdown_mainDropdown__3RALE .main-dropdown_menu__3LwDV>div{margin-bottom:8px}.main-dropdown_iconAnchor__3zgUr{align-items:center;border-radius:6px;cursor:pointer;display:flex;font-size:16px;height:30px;transition:background-color .3s ease-in-out}[data-open=true] .main-dropdown_iconAnchor__3zgUr{color:#6c5ce7;color:var(--bit-accent-color,#6c5ce7)}[data-open=true] .main-dropdown_iconAnchor__3zgUr,[data-open=true] .main-dropdown_iconAnchor__3zgUr:hover{background-color:#fff;background-color:var(--bit-bg-color,#fff)}.main-dropdown_iconAnchor__3zgUr:hover{background-color:var(--bit-bg-heavy)}.main-dropdown_icon__2ZlG-{padding:0 8px}.main-dropdown_menuBlock__1gkRE{border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,#ededed);padding:16px 0 10px}.main-dropdown_menuBlock__1gkRE:last-child{border-bottom:none}.main-dropdown_title__2B5xg{color:#878c9a;font-size:10px;font-weight:700;margin-bottom:8px;padding:0 16px;text-transform:uppercase}.main-dropdown_line__2P4qc{align-items:center;cursor:pointer;display:flex;height:36px;justify-content:space-between;padding:0 16px}.main-dropdown_line__2P4qc:hover{background-color:#eceaff;background-color:var(--bit-accent-bg,#eceaff)}.dropdown_dropdown__NIBbx{padding:8px}.pill-label_pillLabel__W9O5W{align-items:center;border:1px solid #ededed;border-color:var(--bit-border-color-lightest,#ededed);border-radius:12px;color:#6c707c;color:var(--bit-text-color-light,#6c707c);display:flex;font-size:var(--bit-p-xs);padding:2px 8px;text-transform:capitalize;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.version-label_label__HHySb.version-label_latest__1_NVT{border-color:#37b26c;color:#37b26c}.version-label_label__HHySb.version-label_checked-out__1Td0_{border-color:#0984e3;color:#0984e3}.version-label_versionLabel__5CJbp{margin-bottom:16px}.version-label_emptyLabel__1--AS{height:25px;margin-bottom:16px}.ellipsis_ellipsisDiv__3ErBy,.ellipsis_ellipsis__2Jyl3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ellipsis_ellipsisDiv__3ErBy{display:inline-block}.version-dropdown_versionDropdown__26zMI{height:100%}.version-dropdown_versionDropdown__26zMI>div{align-items:center;display:flex;height:100%}.version-dropdown_versionDropdown__26zMI .version-dropdown_menu__3gzq4{border-radius:6px;font-size:var(--bit-p-xs);padding:0;right:0;width:300px}.version-dropdown_title__3hQ6s{border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,#ededed);margin-bottom:8px;padding:16px 16px 12px}.version-dropdown_versionContainer__h0FXY{max-height:240px;overflow-y:scroll}.version-dropdown_versionLine__2Tp7A{align-items:center;color:var(--bit-text-color-heavy);cursor:pointer;display:flex;height:36px;padding:0 24px;text-decoration:none}.version-dropdown_versionLine__2Tp7A:hover{background-color:#f6f6f6;background-color:var(--bit-bg-heavy,#f6f6f6)}.version-dropdown_versionLine__2Tp7A:last-child{margin-bottom:8px}.version-dropdown_versionLine__2Tp7A.version-dropdown_currentVersion__1kZ9N{background:#eceaff;background:var(--bit-accent-bg,#eceaff)}.version-dropdown_versionLine__2Tp7A .version-dropdown_version__32b-4{margin-right:16px}.version-dropdown_versionLine__2Tp7A .version-dropdown_label__3z5qX{background-color:#fff;margin-right:8px}.version-dropdown_placeholder__vwyG0{align-items:center;border:1px solid #babec9;border:1px solid var(--bit-border-color,#babec9);border-radius:6px;box-sizing:border-box;display:flex;height:30px;padding:0 8px;transition:background-color .3s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.version-dropdown_placeholder__vwyG0>span{display:none}.version-dropdown_placeholder__vwyG0>div{max-width:80px}.version-dropdown_withVersions__3soV6{cursor:pointer}.version-dropdown_withVersions__3soV6>div{margin-right:5px}.version-dropdown_withVersions__3soV6>span{display:unset}.version-dropdown_withVersions__3soV6:hover{background-color:var(--bit-bg-heavy)}[data-open=true] .version-dropdown_withVersions__3soV6{color:#6c5ce7;color:var(--bit-accent-color,#6c5ce7);transition:color .3s,background-color .3s ease-in-out}[data-open=true] .version-dropdown_withVersions__3soV6,[data-open=true] .version-dropdown_withVersions__3soV6:hover{background-color:#fff;background-color:var(--bit-bg-color,#fff)}.full-loader_fullLoader__3yFGi{align-items:center;display:flex;font-size:24px;height:100%;justify-content:center;width:100%}.dropdown_menu__3AsW5{border-radius:6px;font-size:14px;font-size:var(--bit-p-xs,14px);padding:0;width:400px}.dropdown_placeholder__7bsgi{align-items:center;background-color:#fff;background-color:var(--bit-bg-color,#fff);border:1px solid #37b26c;border-radius:6px;box-sizing:border-box;color:#37b26c;cursor:pointer;display:flex;height:30px;padding:0 6px;transition:background-color .3s,color .3s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dropdown_placeholder__7bsgi:hover{background-color:#2e945a;border-color:#2e945a;color:#fff;color:var(--bit-bg-color,#fff)}@media screen and (max-width:768px){.dropdown_placeholder__7bsgi{padding:0 8px}.dropdown_placeholder__7bsgi .dropdown_content__1wo2u{display:none}}.dropdown_placeholder__7bsgi>span:first-child{font-size:17px}[data-open=true] .dropdown_placeholder__7bsgi{background-color:#2e945a;border-color:#2e945a;color:#fff;color:var(--bit-bg-color,#fff);transition:color .3s,background-color .3s ease-in-out}.dropdown_placeholder__7bsgi>div{padding:0 6px}.tab_tab__3FBGN{align-items:center;border-bottom:3px solid #fff;border-bottom:3px solid var(--bit-bg-modal,#fff);box-sizing:border-box;cursor:pointer;display:flex;margin-right:8px;padding:0 16px 8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tab_tab__3FBGN.tab_active__3zLR9{border-bottom:3px solid #6c5ce7;border-bottom:3px solid var(--bit-accent-color,#6c5ce7);cursor:unset}.menu_top__3me6T{color:#2b2b2b;color:var(--bit-text-color-heavy,#2b2b2b);padding:16px 24px 24px}.menu_title__1i2Zn{align-items:center;display:flex;font-size:var(--bit-p-xs);font-weight:700}.menu_title__1i2Zn>span:first-child{font-weight:inherit;margin-right:8px}.menu_drawer__1g36E{justify-content:space-between}.menu_drawer__1g36E>div{align-items:center;display:flex}.menu_drawer__1g36E>div>span:first-child{font-size:16px;font-size:var(--bit-p-md,16px);margin-right:8px}.menu_tabs__3TV0N{border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,#ededed);display:flex;line-height:14px;overflow-x:auto;padding:0 24px}.menu_registry__Xkwzo>div:last-child{border-top:none;padding:0}.menu_importContent__3ZdSc>div{margin:12px 0}.menu_importContent__3ZdSc>div:nth-child(2){margin-bottom:24px}.menu_bottom__smiMq{align-items:center;display:flex}.menu_bottom__smiMq>span:first-child{font-size:16px;font-size:var(--bit-p-md,16px);margin-right:8px}.tab-content_middle__1AU0T{margin:0 24px 16px}.tab-content_middle__1AU0T>div{margin:12px 0}.tab-content_bottom__2BM6e{border-top:1px solid #ededed;border-top:1px solid var(--bit-border-color-lightest,#ededed);padding:8px 0}.tab-content_drawer__2XTQ-{align-items:center;display:flex;justify-content:space-between}.tab-content_open__2kHUH{transform:rotate(180deg)}.bottom-link_link__2tsia{align-items:center;color:#2b2b2b;color:var(--bit-text-color-heavy,#2b2b2b);cursor:pointer;display:flex;height:40px;padding:0 24px;text-decoration:unset}.bottom-link_link__2tsia:hover{background-color:#ededed;background-color:var(--bit-border-color-lightest,#ededed)}.bottom-link_link__2tsia>span:first-child{font-size:16px;font-size:var(--bit-p-md,16px);margin-right:8px}.copied-message_copiedMessage__21wkM{align-items:center;background-color:#6c5ce7;background-color:var(--bit-accent-color,#6c5ce7);border-radius:12px;color:#fff;color:var(--bit-text-on-accent,#fff);display:flex;font-size:12px;opacity:0;padding:2px 5px;position:absolute;right:30px;top:9px;transition:visibility .5s,opacity .5s ease-in-out;visibility:hidden}.copied-message_showMessage__3DtoO{opacity:1;visibility:visible}.copy-box_copyBox__CPXlk{align-items:center;background:var(--bit-bg-dent);border:1px solid var(--bit-border-color-lightest);border-radius:6px;display:flex;font-size:var(--bit-p-xs);height:40px;justify-content:space-between;min-width:80px;padding:0 11px}.copy-box_copyBox__CPXlk .copy-box_leftSection__pTlsR{font-family:monospace;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;white-space:pre}.copy-box_copyBox__CPXlk .copy-box_copiedMessage__2bKYL{top:1px}.copy-box_button__1KS6m{background-color:var(--bit-bg-color-highlight);border:none;box-sizing:border-box;color:var(--bit-accent-color);cursor:pointer;outline:none}.copy-box_rightSection__rcsHe{display:flex;position:relative}.copy-box_copyIcon__2GVcn{font-size:var(--bit-p-lg)}.bit-info_moreInfo__3FTm1>div:last-child{border-top:none;padding:0}.dark-theme_darkMod__1or3J{--bit-text-color:#ededed;--bit-text-color-heavy:#f6f6f6;--bit-text-color-light:#878c9a;--bit-text-inactive:#6c707c;--bit-text-inactive-heavy:#878c9a;--bit-border-color:#6c707c;--bit-border-color-heavy:#878c9a;--bit-border-color-light:#414141;--bit-border-color-lightest:#414141;--bit-accent-color:#5d4aec;--bit-accent-heavy:#6c5ce7;--bit-accent-light:#3e29df;--bit-accent-text:#c9c3f6;--bit-accent-text-heavy:#eceaff;--bit-text-on-accent:var(--bit-text-color,#ededed);--bit-accent-bg:#1a1452;--bit-accent-bg-heavy:#221967;--bit-bg-color:#2b2b2b;--bit-bg-heavy:#414141;--bit-bg-heaviest:#6c707c;--bit-bg-bedrock:#0c0c0c;--bit-navigation:#2b2b2b;--bit-bg-overlay:#2b2b2b;--bit-bg-modal:#2b2b2b;--bit-bg-tooltip:#2b2b2b;--bit-bg-tooltip-heavy:#414141;--bit-bg-dent:#2b2b2b;--bit-error-color:#f7bac9;--bit-error-heavy:#fdeff2;--bit-error-light:#f086a0;--bit-error-bg:#8d1130;--bit-error-bg-heavy:#d31948;color:#ededed}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{background-color:#333;border-radius:4px;color:#fff;font-size:14px;line-height:1.4;outline:0;position:relative;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{border-top-color:initial;border-width:8px 8px 0;bottom:-7px;left:0;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:initial;border-width:0 8px 8px;left:0;top:-7px;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-left-color:initial;border-width:8px 0 8px 8px;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{border-right-color:initial;border-width:8px 8px 8px 0;left:-7px;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{color:#333;height:16px;width:16px}.tippy-arrow:before{border-color:transparent;border-style:solid;content:"";position:absolute}.tippy-content{padding:5px 9px;position:relative;z-index:1}.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{left:11px;top:calc(50% - 3px);transform:rotate(90deg)}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{right:11px;top:calc(50% - 3px);transform:rotate(-90deg)}.tippy-svg-arrow{fill:#333;height:16px;text-align:left;text-align:initial;width:16px}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}.tippy-box[data-theme~=teambit]{background:#2b2b2b;background:var(--bit-bg-tooltip,#2b2b2b);border-radius:8px;color:#fff;color:var(--bit-text-color,#fff)}.tippy-box[data-theme~=teambit] .tippy-content{padding:.85em;white-space:nowrap}.tippy-box[data-theme~=teambit].tippy-breakLine .tippy-content{white-space:pre-line;word-break:break-all}.tippy-box[data-theme~=teambit] .tippy-svg-arrow{fill:#2b2b2b;fill:var(--bit-bg-tooltip,#2b2b2b)}.inline-code_inlineCode__PlMl_{background-color:#a6a6a633;border-radius:.25em;font-family:monospace,sans-serif;font-size:.85em;padding:.2em .4em}.inline-code_highlight__3I41c{background-color:#eceaff;background-color:var(--bit-accent-bg,#eceaff)}.muted-italic_mutedItalic__2KpIQ{color:#6c707c;color:var(--bit-text-color-light,#6c707c);font-style:italic}.lanes-drawer_emptyScope__3gjfq{display:block;padding:8px 8px 0 28px}.lanes-drawer_collapseIcon__3UkNA{width:16px}.indent_indent__1DCWU{padding-left:calc(var(--indent-depth)*8px + 8px)}.indent_indentMargin__2BD2l{margin-left:calc(var(--indent-depth)*8px + 8px)}.indent_indent__2GD-y{padding-left:calc(var(--indent-depth)*8px + 8px)}.indent_indentMargin__1QfrF{margin-left:calc(var(--indent-depth)*8px + 8px)}.collapsing-node_childrenTree__2AGpj{font-size:var(--bit-p-xs);overflow:hidden;transition:max-height .4s ease-in-out}.deprecation-icon_deprecatedTooltip__347et{padding:2px 5px}.deprecation-icon_deprecatedTooltip__347et>div{padding:unset!important}.deprecation-icon_deprectaedTooltipContent__X673k{font-size:12px}.component-view_component__3I6My{align-items:center;border-left:0 solid transparent;box-sizing:border-box;color:inherit;display:flex;font-size:inherit;font-size:var(--bit-p-xs);height:32px;justify-content:space-between;padding-right:8px;text-decoration:none}.component-view_component__3I6My:hover{background:#f6f6f6;background:var(--bit-bg-heavy,#f6f6f6)}.component-view_component__3I6My:hover .component-view_envIcon__2DBLl{filter:grayscale(0)}.component-view_component__3I6My.component-view_active__1xKda{background:#eceaff;background:var(--bit-accent-bg,#eceaff)}.component-view_component__3I6My.component-view_active__1xKda .component-view_envIcon__2DBLl{filter:grayscale(0)}.component-view_component__3I6My .component-view_icon__2LVh8{height:16px;opacity:.8;width:16px}.component-view_component__3I6My .component-view_left__1RGqo{align-items:center;display:flex;flex:1 1;min-width:0}.component-view_component__3I6My .component-view_left__1RGqo>span{overflow:hidden;padding:0 8px;text-overflow:ellipsis;white-space:nowrap}.component-view_component__3I6My .component-view_envIcon__2DBLl{filter:grayscale(1);transition:filter .3s ease-in-out}.component-view_component__3I6My .component-view_right__37qrs{align-items:center;display:flex;font-size:12px}.component-view_component__3I6My .component-view_right__37qrs>*{margin-right:4px}.component-view_component__3I6My .component-view_right__37qrs>:last-child(){margin-right:0}.component-view_componentEnvTooltip__3gsji{font-size:var(--bit-p-xs);max-width:unset!important}.component-view_componentEnvTooltip__3gsji .component-view_componentEnvTitle__23QH2{color:#c9c3f6;font-size:12px;font-size:var(--bit-p-xxs,12px);font-weight:700;margin-bottom:4px}.scope-tree-node_scope__cITC0{align-items:center;cursor:pointer;display:flex;font-size:inherit;font-size:var(--bit-p-xs);font-weight:700;height:32px;justify-content:space-between;padding-right:8px;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.scope-tree-node_scope__cITC0:hover{background:#f6f6f6;background:var(--bit-bg-heavy,#f6f6f6)}.scope-tree-node_scope__cITC0 .scope-tree-node_arrow__hn9go{color:#6c707c;color:var(--bit-text-color-light,#6c707c);display:inline-block;line-height:inherit;margin-right:10px;transition:all .3s}.scope-tree-node_scope__cITC0 .scope-tree-node_arrow__hn9go.scope-tree-node_collapsed__1Wmso{transform:rotate(-90deg)}.scope-tree-node_highlighted__1eh7u{color:#5d4aec;color:var(--bit-accent-heavy,#5d4aec)}.scope-tree-node_left__17mLp{align-items:center;display:flex;flex:1 1;min-width:0}.scope-tree-node_left__17mLp .scope-tree-node_name__35t7U{margin-right:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scope-tree-node_componentTree__1yrBs{font-size:var(--bit-p-xs);overflow:hidden;transition:max-height .4s ease-in-out}.namespace-tree-node_namespace__YZq4n{align-items:center;cursor:pointer;display:flex;font-size:inherit;font-size:var(--bit-p-xs);font-weight:700;height:32px;justify-content:space-between;padding-right:8px;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.namespace-tree-node_namespace__YZq4n:hover{background:#f6f6f6;background:var(--bit-bg-heavy,#f6f6f6)}.namespace-tree-node_namespace__YZq4n .namespace-tree-node_arrow__2TQFJ{color:#6c707c;color:var(--bit-text-color-light,#6c707c);display:inline-block;line-height:inherit;margin-right:10px;transition:all .3s}.namespace-tree-node_namespace__YZq4n .namespace-tree-node_arrow__2TQFJ.namespace-tree-node_collapsed__2NSFB{transform:rotate(-90deg)}.namespace-tree-node_highlighted__1zrGL{color:#5d4aec;color:var(--bit-accent-heavy,#5d4aec)}.namespace-tree-node_left__2bDBJ{align-items:center;display:flex;flex:1 1;min-width:0}.namespace-tree-node_left__2bDBJ .namespace-tree-node_name__YtL_k{margin-right:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.namespace-tree-node_componentTree__2LdgO{font-size:var(--bit-p-xs);overflow:hidden;transition:max-height .4s ease-in-out}.lane-tree-node_lane___wRks{align-items:center;border-left:0 solid transparent;box-sizing:border-box;color:inherit;display:flex;font-size:inherit;font-size:var(--bit-p-xs);height:32px;justify-content:space-between;padding-right:8px;text-decoration:none}.lane-tree-node_lane___wRks:hover{background:#f6f6f6;background:var(--bit-bg-heavy,#f6f6f6)}.lane-tree-node_lane___wRks:hover .lane-tree-node_envIcon__3SU2U{filter:grayscale(0)}.lane-tree-node_lane___wRks.lane-tree-node_active__22JGW{background:#eceaff;background:var(--bit-accent-bg,#eceaff)}.lane-tree-node_lane___wRks.lane-tree-node_active__22JGW .lane-tree-node_envIcon__3SU2U{filter:grayscale(0)}.lane-tree-node_lane___wRks .lane-tree-node_icon__2-0ik{height:16px;opacity:.8;width:16px}.lane-tree-node_lane___wRks .lane-tree-node_left__1MSG9{align-items:center;display:flex;flex:1 1;min-width:0}.lane-tree-node_lane___wRks .lane-tree-node_left__1MSG9 .lane-tree-node_laneName__2tHtb{overflow:hidden;padding:0 8px;white-space:nowrap}.lane-tree-node_lane___wRks .lane-tree-node_right__2WvIK{align-items:center;display:flex;font-size:12px}.lane-tree-node_lane___wRks .lane-tree-node_right__2WvIK>*{margin-right:4px}.lane-tree-node_lane___wRks .lane-tree-node_right__2WvIK>:last-child(){margin-right:0}.component-grid_componentGrid__2gngO{grid-column-gap:10px;grid-gap:32px;-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(197px,1fr))}.preview-container_previewContainer__3cAYi{border-radius:5px 5px 0 0;height:0;overflow:hidden;padding-bottom:57%;pointer-events:none;position:relative}.preview-container_preview__WKIUl{border-bottom:1px solid #cccfd4;border-bottom:1px solid var(--bit-border-color-light,#cccfd4);bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.preview-container_emptyPreview__2p3mm{background-color:#ededed;background-color:var(--bit-border-color-lightest,#ededed)}.deprecation-sticker_deprecated__3Hvlk{background-color:#ffc640;border-radius:4px;display:none;font-size:10px;font-weight:700;padding:3px 8px;position:absolute;right:12px;text-transform:uppercase;top:7px;z-index:1}.deprecation-sticker_deprecated__3Hvlk.deprecation-sticker_show__gTSKl{display:unset}.details_content__2ygRq{display:flex;flex-direction:column;height:96px;justify-content:space-between;padding:16px}.details_nameSpace__WTVmf{color:#6c707c;color:var(--bit-text-color-light,#6c707c);font-size:10px;font-weight:700;margin-bottom:7px;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.details_name__3N3hs{align-items:center;display:flex;flex-wrap:wrap;margin-bottom:6px}.details_name__3N3hs>span:first-child{font-weight:700;margin-right:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.details_versionHolder__2nD-5{align-items:center;display:flex;overflow:hidden}.details_versionHolder__2nD-5 .details_img__2Y1sJ{height:14px;margin-left:5px}.details_description__1DYuB{line-clamp:2;box-orient:vertical;-webkit-line-clamp:2;-webkit-box-orient:vertical;-moz-line-clamp:2;color:#6c707c;color:var(--bit-text-color-light,#6c707c);display:-webkit-box;font-size:14px;font-size:var(--bit-p-xs,14px);overflow:hidden;text-overflow:ellipsis}.card_componentCard__2UZCx{border:1px solid #cccfd4;border-color:var(--bit-border-color-light,#cccfd4);border-radius:5px;cursor:pointer;overflow:hidden;position:relative;transition:border-color .3s ease-in-out;width:100%}.card_componentCard__2UZCx:hover{border-color:#6c707c;border-color:var(--bit-text-color-light,#6c707c);overflow:unset}.component-card_componentCardLink__2tXyg{color:var(--bit-text-color-heavy);text-decoration:none}.component-card_bottom__25298{justify-content:space-between;padding:0 16px 16px}.component-card_bottom__25298,.component-card_bottom__25298>div{align-items:center;display:flex}.component-card_bottom__25298>div>span{font-size:14px;margin-right:10px}.component-card_bottom__25298>div .component-card_size__GNwz7{color:#6c707c;color:var(--bit-text-color-light,#6c707c);font-size:11px;vertical-align:middle}.component-card_dot__swafO{background-color:#ededed;border-radius:50%;display:inline-block;height:14px;width:14px}.component-card_img__3Rdnn{height:14px}.preview-placeholder_previewPlaceholder__1Nv5B{align-items:center;color:#c7c7c7;display:flex;flex-direction:column;height:100%;justify-content:center;pointer-events:auto}.preview-placeholder_previewPlaceholder__1Nv5B>span:first-child{font-size:30px;margin-bottom:14px}.preview-placeholder_previewPlaceholder__1Nv5B>div{font-size:13px}.preview-placeholder_tooltip__ewDbB{max-width:155px;text-align:center}.load-preview_loadPreview__2vJsD{align-items:center;background-color:#414141;background-color:var(--bit-text-color,#414141);border-radius:6px;color:#fff;color:var(--bit-text-on-accent,#fff);cursor:pointer;display:flex;font-size:12px;left:8px;padding:4px 8px;position:absolute;top:8px;transition:background-color .3s ease-in-out}.load-preview_loadPreview__2vJsD:hover{background-color:var(--bit-text-color-heavy)}.load-preview_loadPreview__2vJsD .load-preview_icon__lOrCv{margin-right:5px;transform:rotate(270deg)}.workspace-component-card_wrapper__1-Y2a{position:relative}.workspace-component-card_limitLength__j1jcI{max-width:70%}.external-link_link__5SHSx{color:unset;line-height:1;text-decoration:none}.empty-component-gallery_emptyComponentGallery__2BEWs{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;margin:auto;padding:0 20px;text-align:center}.empty-component-gallery_emptyComponentGallery__2BEWs>img{margin-bottom:40px}.empty-component-gallery_title__1K1vf{font-size:24px;font-size:var(--bit-p-xxl,24px);margin-bottom:32px}.empty-component-gallery_title__1K1vf>span:last-child{font-weight:700}.empty-component-gallery_purpleLink__1hAur{align-items:center;color:#5d4aec;color:var(--bit-accent-heavy,#5d4aec);cursor:pointer;display:inline-flex;text-decoration:none}.empty-component-gallery_purpleLink__1hAur .empty-component-gallery_text__2v_Co{margin-right:5px}.empty-component-gallery_purpleLink__1hAur .empty-component-gallery_icon__1Z8Vu{margin-top:4px}.empty-component-gallery_bottomText__2Wh5o{font-size:var(--bit-p-xs);margin-bottom:16px}.empty-component-gallery_bottomText__2Wh5o .empty-component-gallery_purpleLink__1hAur{color:#5d4aec;color:var(--bit-accent-heavy,#5d4aec);cursor:pointer;text-decoration:underline}.empty-component-gallery_iconLine__2o9NU{display:flex}.empty-component-gallery_iconLine__2o9NU .empty-component-gallery_logo__2nV9u{height:24px;margin:0 7px;width:24px}.empty-lane-overview_text__G3eZJ{margin-bottom:30px}.lanes-overview_container__3ILZx{box-sizing:border-box;height:100%;overflow-y:auto;padding:50px 5% 150px}.scope-icon_scopeIcon__yXCXP{align-items:center;background-color:#babec9;background-color:var(--bit-border-color,#babec9);border:1px solid #ededed;border:1px solid var(--bit-border-color-lightest,#ededed);border-radius:9px;box-sizing:border-box;display:flex;font-weight:400;height:1em;justify-content:center;position:relative;text-align:center;width:1em}.scope-icon_letter__1qe8M{color:#fff;color:var(--bit-bg-color,#fff)}.scope-icon_scopeImg__3gz7u{height:100%}.scope-icon_iconBackground__3blOE{background-color:#fff;background-color:var(--bit-bg-color,#fff)}.scope-title_title__3k_KY{align-items:center;display:flex;flex-wrap:wrap;margin-bottom:0;margin-right:16px}.scope-title_title__3k_KY>div:first-child{margin-right:16px}.scope-title_orgName__p0WYZ{color:var(--bit-text-color-heavy);font-weight:400;font-weight:700}.lane-details_laneTitle__33btk{margin-bottom:32px;max-width:700px}.lane-details_laneTitle__33btk>p{margin-bottom:24px}.lane-details_laneTitle__33btk .lane-details_titleRow__27jwW{align-items:baseline;display:flex;flex-wrap:wrap;margin-bottom:20px}.lane-details_laneTitle__33btk .lane-details_avatar__3a737{margin-right:4px}.lane-details_pillsContainer__3PSyR{align-items:center;display:flex;margin-bottom:24px}.lane-details_pillsContainer__3PSyR>div{margin-right:10px;padding:4px 8px}.lane-details_pillIcon__47twD{font-size:16px;font-size:var(--bit-p-md,16px);margin-right:6px}.lane-details_componentCount__2XyBb{background-color:#ededed;background-color:var(--bit-border-color-lightest,#ededed);border-radius:6px;font-size:12px;margin-right:8px;padding:0 6px}.lanes-overview-menu_topBarLink__2FvqD{align-items:center;box-sizing:border-box;color:inherit;display:flex;margin:0 5px;padding:0 8px;position:relative;text-decoration:none;transition:color .3s}.lanes-overview-menu_topBarLink__2FvqD:hover:not(.lanes-overview-menu_active__6i5cq)>div{background-color:var(--bit-bg-heavy)}.lanes-overview-menu_topBarLink__2FvqD.lanes-overview-menu_active__6i5cq{color:#6c5ce7;color:var(--bit-accent-color,#6c5ce7)}.lanes-overview-menu_topBarLink__2FvqD.lanes-overview-menu_active__6i5cq:after{background-color:#6c5ce7;background-color:var(--bit-accent-color,#6c5ce7);height:4px}.lanes-overview-menu_topBarLink__2FvqD:after{background-color:transparent;border-top-left-radius:2px;border-top-right-radius:2px;bottom:0;content:"";height:0;left:0;position:absolute;right:0;transition:background-color .3s,height .3s}.lanes-overview-menu_topBarLink__2FvqD>div{align-items:center;border-radius:8px;display:flex;height:30px;padding:0 8px;transition:background-color .3s ease-in-out}.lanes-overview-menu_topBar__ezxzb{justify-content:space-between;width:100%}.lanes-overview-menu_leftSide__24iH3,.lanes-overview-menu_topBar__ezxzb{align-items:center;display:flex;height:100%}.lanes-overview-menu_navigation__IJAv1{display:flex;height:100%;list-style:none;padding-left:28px}@media screen and (max-width:768px){.lanes-overview-menu_navigation__IJAv1{padding-left:6px}}.lanes-overview-menu_navigation__IJAv1>li{display:block;height:100%;margin-right:16px}.lanes-overview-menu_rightSide__SVMVg{align-items:center;display:flex;height:100%}.lanes-overview-menu_rightSide__SVMVg>*{margin-right:12px}.lanes-overview-menu_rightSide__SVMVg>:last-child{margin-right:16px}.lanes-overview-menu_rightSide__SVMVg .lanes-overview-menu_widgets__2Gntz{align-items:center;display:flex;height:100%;margin-right:20px}.lanes-overview-menu_rightSide__SVMVg .lanes-overview-menu_widgets__2Gntz>nav>a{padding:0}.lanes-overview-menu_rightSide__SVMVg .lanes-overview-menu_widgets__2Gntz>nav>a:last-child{margin-right:0}.lanes-overview-menu_rightSide__SVMVg .lanes-overview-menu_widget__2PHiG{font-size:17px}.lanes-overview-menu_useBox__2SlzM{--bit-drawer-margin:14px}.top-bar-nav_topBarLink__2Mg-_{align-items:center;box-sizing:border-box;color:inherit;display:flex;margin:0 5px;padding:0 8px;position:relative;text-decoration:none;transition:color .3s}.top-bar-nav_topBarLink__2Mg-_:hover:not(.top-bar-nav_active__-Swyn)>div{background-color:var(--bit-bg-heavy)}.top-bar-nav_topBarLink__2Mg-_.top-bar-nav_active__-Swyn{color:#6c5ce7;color:var(--bit-accent-color,#6c5ce7)}.top-bar-nav_topBarLink__2Mg-_.top-bar-nav_active__-Swyn:after{background-color:#6c5ce7;background-color:var(--bit-accent-color,#6c5ce7);height:4px}.top-bar-nav_topBarLink__2Mg-_:after{background-color:transparent;border-top-left-radius:2px;border-top-right-radius:2px;bottom:0;content:"";height:0;left:0;position:absolute;right:0;transition:background-color .3s,height .3s}.top-bar-nav_topBarLink__2Mg-_>div{align-items:center;border-radius:8px;display:flex;height:30px;padding:0 8px;transition:background-color .3s ease-in-out}.menu_topBar__1zVDB{justify-content:space-between;width:100%}.menu_leftSide__2QCN9,.menu_topBar__1zVDB{align-items:center;display:flex;height:100%}.menu_navigation__2VobK{display:flex;height:100%;list-style:none;padding-left:28px}@media screen and (max-width:768px){.menu_navigation__2VobK{padding-left:6px}}.menu_navigation__2VobK>li{display:block;height:100%;margin-right:16px}.menu_rightSide__NGGSx{align-items:center;display:flex;height:100%}.menu_rightSide__NGGSx>*{margin-right:12px}.menu_rightSide__NGGSx>:last-child{margin-right:16px}.menu_rightSide__NGGSx .menu_widgets__3TjrQ{align-items:center;display:flex;height:100%;margin-right:20px}.menu_rightSide__NGGSx .menu_widgets__3TjrQ>nav>a{padding:0}.menu_rightSide__NGGSx .menu_widgets__3TjrQ>nav>a:last-child{margin-right:0}.menu_rightSide__NGGSx .menu_widget__2le2h{font-size:17px}.menu_useBox__2ibV5{--bit-drawer-margin:14px}.base_docsMainBlock__lkj5z{margin:0 auto 150px;max-width:1440px;padding:50px 40px 10px}.base_docsMainBlock__lkj5z .base_heading__3ZLTJ{margin-bottom:unset}.base_maxWidth__iUSVk{max-width:700px}.base_marginBottom__3Ol4J{margin-bottom:30px}.base_topRow__3kgKo{align-items:baseline;display:flex}.base_copyMethod__1Zv6Z{align-self:center;display:flex;margin-bottom:20px;width:100%}.base_copyTitle__16rYg{margin-bottom:unset;margin-right:10px}.base_copyBox__1rqqL{flex-grow:1}.base_marginRight__3NH-w{margin-right:10px}.base_compositionSection__2dtVM{margin-top:40px}.base_compositionCard__2nvTZ{max-height:500px;max-width:100%;overflow:hidden}.base_mdx__27C-V{font-size:16px}.react-playground_error__1zi13{background-color:var(--bit-bg-color);border:1px solid var(--bit-error-color);border-bottom-right-radius:6px;border-left:none;border-top-right-radius:6px;bottom:0;box-sizing:border-box;color:var(--bit-error-color);font-family:Roboto mono;font-size:11px;left:0;overflow:auto;padding:8px;position:absolute;right:0;top:0;transition:all 1s ease-in-out;width:100%}.react-playground_error__1zi13.react-playground_column__1Kovw{border:1px solid var(--bit-error-color);border-bottom:none;border-bottom-right-radius:0;border-top-left-radius:6px}.react-playground_editorWrapper__1wY8s{max-height:450px;overflow:auto!important}.react-playground_codePane__19Xda{background-color:#282c34;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;max-width:90%;min-width:150px}.react-playground_codePane__19Xda.react-playground_column__1Kovw,.react-playground_codePane__19Xda.react-playground_column__1Kovw .react-playground_editorWrapper__1wY8s{height:220px;max-width:100%}.react-playground_editor__1LFjB{border-bottom-left-radius:6px;border-top-left-radius:6px;box-sizing:border-box;font-family:Roboto mono!important;font-size:11px;min-height:100px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.react-playground_editor__1LFjB>textarea{outline:none;white-space:pre!important;width:100%!important}.react-playground_editor__1LFjB>pre{white-space:pre!important;width:-webkit-fit-content!important;width:-moz-fit-content!important;width:fit-content!important}.react-playground_splitter__R480r{background-color:#282c34}.react-playground_splitter__R480r>div{border:none;border-radius:0}.react-playground_previewPane__1Rkn-{border:1px solid var(--bit-border-color-lightest);border-bottom-right-radius:6px;border-left:none;border-top-right-radius:6px;min-height:100px;overflow:auto;position:relative}.react-playground_previewPane__1Rkn-.react-playground_column__1Kovw{border:1px solid var(--bit-border-color-lightest);border-bottom:none;border-bottom-right-radius:0;border-top-left-radius:6px;min-height:220px}.react-playground_previewPane__1Rkn-.react-playground_column__1Kovw .react-playground_editorWrapper__1wY8s{max-height:220px}.react-playground_previewBox__1quIl{bottom:0;left:0;position:absolute;right:0;top:0}.react-playground_preview__1LvFd{border-left:none;box-sizing:border-box;height:100%;width:100%}.react-playground_playground__1mVdr{border-radius:6px;display:flex;max-height:450px;overflow:hidden;width:100%}.react-playground_playground__1mVdr>div{width:100%}.examples-overview_exampleSection__1OdhX>:not(:last-child){margin-bottom:8px}.grid_gridContainer__1UJEt{grid-gap:16px 16px;display:grid}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-1__3yC-h{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-1__QNCY6{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-1__lwzsG{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-1__1SQ6E{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-1__1jW6i{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-1__2k08m{grid-template-columns:repeat(1,1fr)}}.grid-template_colTemplate--all-1__17Qj4{grid-template-columns:repeat(1,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-2__2rOrd{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-2__1bHaV{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-2__2xHc2{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-2__uiFTv{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-2__1bxkB{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-2__1qN1i{grid-template-columns:repeat(2,1fr)}}.grid-template_colTemplate--all-2__1qe0T{grid-template-columns:repeat(2,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-3__x8Pvk{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-3__20OZC{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-3__3DGUO{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-3__i4_Je{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-3__19bPw{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-3__3icPF{grid-template-columns:repeat(3,1fr)}}.grid-template_colTemplate--all-3__3W3h9{grid-template-columns:repeat(3,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-4__3WfBa{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-4__2IbWq{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-4__2HM7U{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-4__LLn46{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-4__3GR6S{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-4__1mY1U{grid-template-columns:repeat(4,1fr)}}.grid-template_colTemplate--all-4__3ipRg{grid-template-columns:repeat(4,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-5__3KH8S{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-5__3Ygnr{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-5__2_6pj{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-5__QvxEw{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-5__1qmby{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-5__3hm-F{grid-template-columns:repeat(5,1fr)}}.grid-template_colTemplate--all-5__42MSn{grid-template-columns:repeat(5,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-6__IwLPd{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-6__1fvFW{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-6__1aaf1{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-6__3Sycl{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-6__1EI-I{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-6__uACD7{grid-template-columns:repeat(6,1fr)}}.grid-template_colTemplate--all-6__1DZ6t{grid-template-columns:repeat(6,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-7__3WdyT{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-7__2Yjdk{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-7__3CKEV{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-7__25mOC{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-7__1MkVq{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-7__23UqJ{grid-template-columns:repeat(7,1fr)}}.grid-template_colTemplate--all-7__3mWAl{grid-template-columns:repeat(7,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-8__2lyx4{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-8__1-WdX{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-8__1m1Iu{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-8__LQB3g{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-8__QWFTx{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-8__1yK6M{grid-template-columns:repeat(8,1fr)}}.grid-template_colTemplate--all-8__ofqM0{grid-template-columns:repeat(8,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-9__2bAOK{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-9__1iN6C{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-9__1DnPL{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-9__2UgmJ{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-9__1PKI-{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-9__2mJP-{grid-template-columns:repeat(9,1fr)}}.grid-template_colTemplate--all-9__3ZyF1{grid-template-columns:repeat(9,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-10__363Q9{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-10__2QMWE{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-10__2_yUI{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-10__2uq82{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-10__K0kSz{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-10__2BnMI{grid-template-columns:repeat(10,1fr)}}.grid-template_colTemplate--all-10__1UHKi{grid-template-columns:repeat(10,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-11__2ycDa{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-11__330-L{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-11__Enmnu{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-11__1wUY7{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-11__1cJTT{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-11__363GK{grid-template-columns:repeat(11,1fr)}}.grid-template_colTemplate--all-11__3jnJ_{grid-template-columns:repeat(11,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-12__jyYq6{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-12__i8F5f{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-12__NJrcU{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-12__36GQd{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-12__3xWtr{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-12__3T6rY{grid-template-columns:repeat(12,1fr)}}.grid-template_colTemplate--all-12__3HeEi{grid-template-columns:repeat(12,1fr)}.table-heading-column_headingColumn__1p6_E{align-items:center;display:flex;flex-wrap:wrap;font-size:var(--bit-p-xxs);font-weight:700}.table-heading-row_titleRow__3_VR_{border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,#ededed);display:grid;padding:18px 20px}.table-heading-row_titleRow__3_VR_.table-heading-row_hide__2jbmt{display:none}.table-heading-row_titleCol__wci4P{color:var(--bit-text-color-light);text-transform:uppercase}.grid_gridContainer__PLcPC{grid-gap:16px 16px;display:grid}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-1__3X1tm{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-1__vAMrJ{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-1__l3yZ2{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-1__1qAjO{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-1__Lzk5D{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-1__24kPq{grid-template-columns:repeat(1,1fr)}}.grid-template_colTemplate--all-1__2_f2D{grid-template-columns:repeat(1,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-2__1QjoI{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-2__3lPqK{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-2__pCke4{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-2__13oOH{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-2__3Da0x{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-2__8dOFH{grid-template-columns:repeat(2,1fr)}}.grid-template_colTemplate--all-2__BFOs2{grid-template-columns:repeat(2,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-3__2lUc7{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-3__2oAyt{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-3__3ruNN{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-3__2fFYx{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-3__10f9Q{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-3__3cqMF{grid-template-columns:repeat(3,1fr)}}.grid-template_colTemplate--all-3__fXhN2{grid-template-columns:repeat(3,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-4__2Humr{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-4__2jOwt{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-4__1mKqg{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-4__26ers{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-4__3a_MO{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-4__2oHvd{grid-template-columns:repeat(4,1fr)}}.grid-template_colTemplate--all-4__SoTGv{grid-template-columns:repeat(4,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-5__36QrU{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-5__1ZKyc{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-5__rPEDi{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-5__2Xqi_{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-5__3DhET{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-5__2gtof{grid-template-columns:repeat(5,1fr)}}.grid-template_colTemplate--all-5__1cZZ5{grid-template-columns:repeat(5,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-6__tEQaE{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-6__1Occc{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-6__2Ofd3{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-6__2A7ks{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-6__17axh{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-6__33Abd{grid-template-columns:repeat(6,1fr)}}.grid-template_colTemplate--all-6__1h8RW{grid-template-columns:repeat(6,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-7__1WNuo{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-7__3sB9e{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-7__21wqc{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-7__2N3Y2{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-7__KwHyd{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-7__4yehq{grid-template-columns:repeat(7,1fr)}}.grid-template_colTemplate--all-7__1oCYn{grid-template-columns:repeat(7,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-8__3_ySH{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-8___yx8y{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-8__vMQ9R{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-8__-8fwr{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-8__1pWDR{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-8__EmLmG{grid-template-columns:repeat(8,1fr)}}.grid-template_colTemplate--all-8__2iI7k{grid-template-columns:repeat(8,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-9__1U0QT{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-9__23sZp{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-9__XmMaH{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-9__41ua_{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-9__30CAy{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-9__4sxgl{grid-template-columns:repeat(9,1fr)}}.grid-template_colTemplate--all-9__2Azc5{grid-template-columns:repeat(9,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-10__2dVvv{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-10__30tIs{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-10__EWpOS{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-10__3MfAC{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-10__2pcsD{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-10__2xcCo{grid-template-columns:repeat(10,1fr)}}.grid-template_colTemplate--all-10__7Nq_t{grid-template-columns:repeat(10,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-11__heXP3{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-11__7ATwi{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-11__1GDkh{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-11__1tJnp{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-11__2Eq1u{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-11__3WX4_{grid-template-columns:repeat(11,1fr)}}.grid-template_colTemplate--all-11__3GowY{grid-template-columns:repeat(11,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-12__108sJ{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-12__2JvCA{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-12__3ZFWe{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-12__P1hoW{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-12__36lxW{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-12__2FrIF{grid-template-columns:repeat(12,1fr)}}.grid-template_colTemplate--all-12__2Ersc{grid-template-columns:repeat(12,1fr)}.table-column_tableColumn__2K6_b{align-items:center;display:flex;font-size:var(--bit-p-xs)}.table-row_propRow__PprUo{border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,var(--bit-border-color-lightest,#ededed));margin-bottom:8px;padding:18px 20px}.table-row_propRow__PprUo.table-row_singleColumn__3D7aw{grid-template-columns:repeat(1,1fr)}.table-row_mobileTitle__1oYJt{display:none}.table-row_mobileTitle__1oYJt.table-row_show__10BrG{color:var(--bit-text-color-light);display:flex;font-size:var(--bit-p-xxs);font-weight:700;min-width:110px;text-transform:uppercase}.table-row_columnContent__1jh3Y,.table-row_column__3Sk6-{align-items:center;display:flex;flex-wrap:wrap}.table-row_title__20l2S{margin:unset;text-transform:capitalize}.table-row_required__2JYwI{color:var(--bit-text-color-light);font-size:12px;white-space:nowrap}.table-row_name__1oKif{color:#4646c6;margin-right:5px}.table-row_name__1oKif,.table-row_type__1lHI3{font-family:Roboto mono;font-size:var(--bit-p-xxs)}.table-row_type__1lHI3{background-color:#eceaff;background-color:var(--bit-accent-bg,#eceaff);border-radius:4px;display:inline-block;padding:5px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.table-row_typeColumn__z8Whd .table-row_highlighted__MIvK_{background:unset!important;display:flex!important;flex-grow:1;font-family:Roboto mono;font-size:var(--bit-p-xxs);margin:0;padding:0!important;white-space:pre-wrap;word-break:break-word}.table-row_typeColumn__z8Whd .table-row_highlighted__MIvK_>code>span{color:#397300}.table-row_typeColumn__z8Whd .table-row_highlighted__MIvK_>code{font-family:inherit}.table-row_default__2n23P{font-family:Roboto mono;font-size:var(--bit-p-xxs)}.table-row_breakWord__33VJu{word-break:break-word}.table_table__3Ya9Q>div{grid-gap:16px 24px}
1
+ .sizes_heading__wpEPv{--bit-h-xxs:16px;--bit-h-xs:18px;--bit-h-sm:24px;--bit-h-md:26px;--bit-h-lg:36px;--bit-h-xl:40px;--bit-h-xxl:50px}.global_overrides__19p1X{line-height:normal}.block-quote_blockQuote__DrJtI{background-color:hsla(0,2%,79%,.2);border-left:5px solid #897dec;border-radius:5px;margin:0 0 1em;padding:1em 10px 1em 18px}.block-quote_blockQuote__DrJtI>:last-child{margin-bottom:0}.bold_bold__1VriJ{font-weight:700}.external-link_link__37pYW{text-decoration:none}.external-link_link__37pYW:hover{text-decoration:underline}.heading-sizes_xxs__sqY6F{font-size:16px;font-size:var(--bit-h-xxs,16px)}.heading-sizes_xs__2vIO-{font-size:18px;font-size:var(--bit-h-xs,18px)}.heading-sizes_sm__SWCg7{font-size:24px;font-size:var(--bit-h-sm,24px)}.heading-sizes_md__1VfRy{font-size:26px;font-size:var(--bit-h-md,26px)}.heading-sizes_lg__12r2v{font-size:36px;font-size:var(--bit-h-lg,36px)}.heading-sizes_xl__18vfm{font-size:40px;font-size:var(--bit-h-xl,40px)}.heading-sizes_xxl__1XBq0{font-size:50px;font-size:var(--bit-h-xxl,50px)}.heading_h1__18YHt,.heading_h2__1ja7_,.heading_h3__3SLRc,.heading_h4__uSuLS,.heading_h5__30dq2,.heading_h6__2CGfq{font-weight:700;margin:0}.heading_h1__18YHt{margin-bottom:20px}.anchor_anchor__3Kymc{align-items:center;display:flex;text-decoration:none}.anchor_anchorIcon__osznX{color:var(--bit-text-color-light);font-size:18px}.linked-heading_linkedHeading__1exDt{align-items:center;display:flex;margin-bottom:16px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.linked-heading_linkedHeading__1exDt:hover .linked-heading_anchor__3xkqo{opacity:1;visibility:unset}.linked-heading_heading__28Zmh{margin-bottom:0;margin-right:8px}.linked-heading_anchor__3xkqo{opacity:0;transform:translateY(4px);transition:visibility .3s,opacity .3s ease-in-out;visibility:hidden}.create-heading_mdxLinkedHeading__383jO{justify-content:start;margin-top:40px;width:100%}.create-heading_mdxLinkedHeading__383jO[align=center]{justify-content:center}.create-heading_mdxLinkedHeading__383jO[align=left]{justify-content:start}.create-heading_mdxLinkedHeading__383jO[align=right]{justify-content:flex-end}.create-heading_mdxLinkedHeading__383jO.create-heading_mainHeadingStyles__DHpSm{border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,#ededed);padding-bottom:8px}.create-heading_mdxLinkedHeading__383jO:first-child{padding-top:0}.image_img__DuAT6{max-width:100%}.image_img__DuAT6:not(:last-child){margin-bottom:16px}.inline-code_inlineCode__x6zDz{background-color:#a6a6a633;border-radius:.25em;font-family:monospace,sans-serif;font-size:.85em;padding:.2em .4em}.inline-code_highlight__2D3V2{background-color:#eceaff;background-color:var(--bit-accent-bg,#eceaff)}.italic_italic__krNdx{font-style:italic}.ol_ol__35tJ4{list-style:revert;list-style-position:outside;margin:0 0 16px;padding:0 0 0 32px}.ol_ol__35tJ4 ol,.ol_ol__35tJ4 ul{padding-left:18px}.ol_ol__35tJ4>li>p{margin-bottom:0}.text-sizes_xxs__3H1C0{font-size:12px;font-size:var(--bit-p-xxs,12px)}.text-sizes_xs__2T9zA{font-size:14px;font-size:var(--bit-p-xs,14px)}.text-sizes_sm__1KP6p{font-size:15px;font-size:var(--bit-p-sm,15px)}.text-sizes_md__1kc0J{font-size:16px;font-size:var(--bit-p-md,16px)}.text-sizes_lg__-zy_i{font-size:18px;font-size:var(--bit-p-lg,18px)}.text-sizes_xl__3ulEO{font-size:20px;font-size:var(--bit-p-xl,20px)}.text-sizes_xxl__8s7sQ{font-size:24px;font-size:var(--bit-p-xxl,24px)}.paragraph_paragraph__2tnlB{margin:0 0 1em}.separator_separator__gCjbY{border:none;border-bottom:1px solid var(--bit-border-color-lightest);border-radius:5px;margin-bottom:40px;margin-top:30px}.copied-message_copiedMessage__2WRi5{background-color:#6c5ce7;background-color:var(--bit-accent-color,#6c5ce7);border-radius:12px;color:#fff;color:var(--bit-text-on-accent,#fff);font-size:12px;opacity:0;padding:2px 5px;pointer-events:none;position:absolute;transform:translate(-100%);transition:visibility .5s,opacity .5s ease-in-out;visibility:hidden}.copied-message_showMessage__3YUMc{opacity:1;visibility:visible}.code-snippet_snippetWrapper__2LAr3{position:relative}.code-snippet_snippetWrapper__2LAr3:hover .code-snippet_copyIcon__oS7tG{opacity:1}.code-snippet_snippetWrapper__2LAr3 .code-snippet_codeSnippet__1p-ds{background-color:#fff;border-radius:10px;font-family:Roboto mono;font-size:var(--bit-p-xs);margin:0!important;padding:16px!important}.code-snippet_snippetWrapper__2LAr3 .code-snippet_copyIcon__oS7tG{background-color:#fff;border-radius:8px;color:#414141;cursor:pointer;font-size:16px;margin-left:8px;opacity:0;padding:6px 8px;transition:opacity .3s ease-in-out}.code-snippet_snippetWrapper__2LAr3 code{font-family:inherit!important}.code-snippet_copy__11Xp2{align-items:center;display:flex;position:absolute;right:6px;top:6px}.pane_pane__5auYJ{transition:width .3s,height .3s}[data-split-layout*=first]>.pane_pane__5auYJ,[data-split-layout*=last]>.pane_pane__5auYJ{max-width:unset;min-width:unset}.splitter_splitter__3oXaY{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-split-layout^=row] .splitter_splitter__3oXaY{cursor:col-resize;height:100%}[data-split-layout^=column] .splitter_splitter__3oXaY{cursor:row-resize;width:100%}body{padding:0}.split-pane_splitPane__3NU9t{display:flex;flex-direction:column}.split-pane_splitPane__3NU9t.split-pane_isDragging__1TJaj{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.split-pane_splitPane__3NU9t[data-is-dragging=true]>*{transition:none}.split-pane_splitPane__3NU9t[data-split-layout^=row]{flex-direction:row}.split-pane_splitPane__3NU9t[data-split-layout^="row reverse"]{flex-direction:row-reverse}.split-pane_splitPane__3NU9t[data-split-layout^=column]{flex-direction:column}.split-pane_splitPane__3NU9t[data-split-layout^="column reverse"]{flex-direction:column-reverse}.splitter_hoverSplitter__15QHM{background:#ededed;background:var(--bit-border-color-lightest,#ededed);flex:none;min-height:1px;min-width:1px;position:relative}.splitter_highlighter__3CR3-{height:100%;width:100%}.splitter_highlighter__3CR3-,.splitter_highlighter__3CR3-:after,.splitter_highlighter__3CR3-:before{transition:background-color .3s ease-in-out,box-shadow .3s ease-in-out}.splitter_highlighter__3CR3-:hover,.splitter_highlighter__3CR3-:hover:after,.splitter_highlighter__3CR3-:hover:before,[data-is-dragging=true]>.splitter_hoverSplitter__15QHM>.splitter_highlighter__3CR3-,[data-is-dragging=true]>.splitter_hoverSplitter__15QHM>.splitter_highlighter__3CR3-:after,[data-is-dragging=true]>.splitter_hoverSplitter__15QHM>.splitter_highlighter__3CR3-:before{background:#6c5ce7;background:var(--bit-accent-color,#6c5ce7);transition-delay:.18s}.splitter_highlighter__3CR3-:after,.splitter_highlighter__3CR3-:before{background:transparent;content:" ";display:block;position:absolute}[data-split-layout^=row]>.splitter_hoverSplitter__15QHM>.splitter_highlighter__3CR3-:after,[data-split-layout^=row]>.splitter_hoverSplitter__15QHM>.splitter_highlighter__3CR3-:before{height:100%;width:200%}[data-split-layout^=row]>.splitter_hoverSplitter__15QHM>.splitter_highlighter__3CR3-:before{left:-200%}[data-split-layout^=row]>.splitter_hoverSplitter__15QHM>.splitter_highlighter__3CR3-:after{right:-200%}[data-split-layout^=column]>.splitter_hoverSplitter__15QHM>.splitter_highlighter__3CR3-:after,[data-split-layout^=column]>.splitter_hoverSplitter__15QHM>.splitter_highlighter__3CR3-:before{height:200%;width:100%}[data-split-layout^=column]>.splitter_hoverSplitter__15QHM>.splitter_highlighter__3CR3-:before{top:-200%}[data-split-layout^=column]>.splitter_hoverSplitter__15QHM>.splitter_highlighter__3CR3-:after{bottom:-200%}.error_error__1eGOY{color:#e62e5c;color:var(--bit-error-color,#e62e5c)}.react-playground_column__MfEmP{height:450px}.react-playground_column__MfEmP .react-playground_codePane__35KBZ,.react-playground_column__MfEmP .react-playground_previewPane__1J_9U{max-height:90%;min-height:10%;width:100%}.react-playground_column__MfEmP .react-playground_error__2W6LT,.react-playground_column__MfEmP .react-playground_previewPane__1J_9U{border-bottom:none;border-radius:6px 6px 0 0}.react-playground_row__3c6yp{height:100%;max-height:450px}.react-playground_row__3c6yp .react-playground_codePane__35KBZ,.react-playground_row__3c6yp .react-playground_previewPane__1J_9U{height:100%;max-width:90%;min-width:10%}.react-playground_row__3c6yp .react-playground_error__2W6LT,.react-playground_row__3c6yp .react-playground_previewPane__1J_9U{border-left:none;border-radius:0 6px 6px 0}.react-playground_error__2W6LT{background-color:var(--bit-bg-color);border:1px solid var(--bit-error-color);bottom:0;box-sizing:border-box;color:var(--bit-error-color);font-family:Roboto mono;font-size:11px;left:0;margin:0;overflow:auto;padding:8px;position:absolute;right:0;top:0;transition:all 1s ease-in-out}.react-playground_codePane__35KBZ{background-color:#282c34;overflow:auto}.react-playground_editor__1VRVn{font-family:Roboto mono!important;font-size:11px;max-width:unset!important;min-width:100%;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.react-playground_editor__1VRVn>textarea{outline:none;white-space:pre!important}.react-playground_editor__1VRVn>pre{white-space:pre!important}.react-playground_splitter__2gA4z{background-color:#282c34}.react-playground_previewPane__1J_9U{border:1px solid var(--bit-border-color-lightest);box-sizing:border-box;display:flex;flex-shrink:1!important;overflow:auto;position:relative;transform:translateZ(0)}.react-playground_previewBox__2Zfk9{margin:auto;min-height:20px;min-width:20px}.react-playground_playground__3HRLT{border-radius:6px;display:flex;overflow:hidden}.react-playground_playground__3HRLT>div{width:100%}.snippet_snippet__bynKV{margin-bottom:16px}.sup_sup__gJEHa{font-size:smaller;vertical-align:super}.base-table_table__3YVTq{border:1px solid #ededed;border:1px solid var(--bit-border-color-lightest,#ededed);border-collapse:collapse;border-radius:8px;border-spacing:0;display:block;margin-bottom:16px;max-width:100%;overflow:auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.base-table_table__3YVTq tr:nth-child(2n){background-color:#f6f6f6;background-color:var(--bit-bg-dent,#f6f6f6)}.base-table_table__3YVTq thead{border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,#ededed)}.base-table_table__3YVTq th{color:#2b2b2b;color:var(--bit-text-color-heavy,#2b2b2b);font-size:var(--bit-p-xs);font-weight:700;padding:12px 20px}.base-table_table__3YVTq td,.base-table_table__3YVTq th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.base-table_table__3YVTq table,.base-table_table__3YVTq td,.base-table_table__3YVTq th,.base-table_table__3YVTq thead,.base-table_table__3YVTq tr{text-align:start}.base-table_table__3YVTq table[align=center],.base-table_table__3YVTq td[align=center],.base-table_table__3YVTq th[align=center],.base-table_table__3YVTq thead[align=center],.base-table_table__3YVTq tr[align=center]{text-align:center}.base-table_table__3YVTq table[align=left],.base-table_table__3YVTq td[align=left],.base-table_table__3YVTq th[align=left],.base-table_table__3YVTq thead[align=left],.base-table_table__3YVTq tr[align=left]{text-align:start}.base-table_table__3YVTq table[align=right],.base-table_table__3YVTq td[align=right],.base-table_table__3YVTq th[align=right],.base-table_table__3YVTq thead[align=right],.base-table_table__3YVTq tr[align=right]{text-align:end}.td_td__15w6K{padding:12px 20px}.tr_tr__2MH6U:not(:last-child){border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,#ededed)}.ul_ul__2kPf-{list-style:revert;list-style-position:outside;margin:0 0 16px;padding:0 0 0 32px}.ul_ul__2kPf->li>ol,.ul_ul__2kPf->li>ul{margin-bottom:0;padding-left:18px}.ul_ul__2kPf->li>p{margin-bottom:none}.mdx-layout_mdxContent__3MR2u{line-height:1.5}.mdx-layout_mdxContent__3MR2u img{max-width:100%}.copied-message_copiedMessage__2Nw9Y{background-color:#6c5ce7;background-color:var(--bit-accent-color,#6c5ce7);border-radius:12px;color:#fff;color:var(--bit-text-on-accent,#fff);font-size:12px;opacity:0;padding:2px 5px;pointer-events:none;position:absolute;transform:translate(-100%);transition:visibility .5s,opacity .5s ease-in-out;visibility:hidden}.copied-message_showMessage__MPaRY{opacity:1;visibility:visible}.code-snippet_snippetWrapper__ooMsa{position:relative}.code-snippet_snippetWrapper__ooMsa:hover .code-snippet_copyIcon__Y6SkV{opacity:1}.code-snippet_snippetWrapper__ooMsa .code-snippet_codeSnippet__1JSRo{background-color:#fff;border-radius:10px;font-family:Roboto mono;font-size:var(--bit-p-xs);margin:0!important;padding:16px!important}.code-snippet_snippetWrapper__ooMsa .code-snippet_copyIcon__Y6SkV{background-color:#fff;border-radius:8px;color:#414141;cursor:pointer;font-size:16px;margin-left:8px;opacity:0;padding:6px 8px;transition:opacity .3s ease-in-out}.code-snippet_snippetWrapper__ooMsa code{font-family:inherit!important}.code-snippet_copy__3agCR{align-items:center;display:flex;position:absolute;right:6px;top:6px}.error_error__Aedkj{color:#e62e5c;color:var(--bit-error-color,#e62e5c)}.react-playground_column__Aia6P{height:450px}.react-playground_column__Aia6P .react-playground_codePane__Hh_rK,.react-playground_column__Aia6P .react-playground_previewPane__2ZpXH{max-height:90%;min-height:10%;width:100%}.react-playground_column__Aia6P .react-playground_error__3FQ9-,.react-playground_column__Aia6P .react-playground_previewPane__2ZpXH{border-bottom:none;border-radius:6px 6px 0 0}.react-playground_row__1nQO2{height:100%;max-height:450px}.react-playground_row__1nQO2 .react-playground_codePane__Hh_rK,.react-playground_row__1nQO2 .react-playground_previewPane__2ZpXH{height:100%;max-width:90%;min-width:10%}.react-playground_row__1nQO2 .react-playground_error__3FQ9-,.react-playground_row__1nQO2 .react-playground_previewPane__2ZpXH{border-left:none;border-radius:0 6px 6px 0}.react-playground_error__3FQ9-{background-color:var(--bit-bg-color);border:1px solid var(--bit-error-color);bottom:0;box-sizing:border-box;color:var(--bit-error-color);font-family:Roboto mono;font-size:11px;left:0;margin:0;overflow:auto;padding:8px;position:absolute;right:0;top:0;transition:all 1s ease-in-out}.react-playground_codePane__Hh_rK{background-color:#282c34;overflow:auto}.react-playground_editor__YkTAT{font-family:Roboto mono!important;font-size:11px;max-width:unset!important;min-width:100%;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.react-playground_editor__YkTAT>textarea{outline:none;white-space:pre!important}.react-playground_editor__YkTAT>pre{white-space:pre!important}.react-playground_splitter__3aB9x{background-color:#282c34}.react-playground_previewPane__2ZpXH{border:1px solid var(--bit-border-color-lightest);box-sizing:border-box;display:flex;flex-shrink:1!important;overflow:auto;position:relative;transform:translateZ(0)}.react-playground_previewBox__3RlPe{margin:auto;min-height:20px;min-width:20px}.react-playground_playground__36KMr{border-radius:6px;display:flex;overflow:hidden}.react-playground_playground__36KMr>div{width:100%}.snippet_snippet__3w3tl{margin-bottom:16px}.link_link__eKYlx{color:#6c5ce7;color:var(--bit-accent-color,#6c5ce7);text-decoration:none}.link_link__eKYlx:hover{color:#5d4aec;color:var(--bit-accent-heavy,#5d4aec);text-decoration:underline}.admonition{border-radius:8px;margin-bottom:1em;padding:15px 30px 15px 15px}.admonition h3{display:flex;margin-bottom:8px;margin-top:0;text-transform:uppercase}.admonition-heading>div{margin-bottom:0;margin-top:0}.admonition-icon{align-self:center;display:inline-flex;margin-right:4px}.admonition-icon svg{stroke-width:0;display:inline-block;height:22px;width:18px}.admonition-content>:last-child{margin-bottom:0}.admonition{background-color:#eceaff;background-color:var(--bit-accent-primary-bg,#eceaff);border-left:8px solid #6c5ce7;border-left:8px solid var(--bit-accent-primary-color,#6c5ce7)}.admonition h5{color:#6c5ce7;color:var(--bit-accent-primary-color,#6c5ce7);display:flex}.admonition .admonition-icon svg{stroke:#6c5ce7;stroke:var(--bit-accent-primary-color,#6c5ce7);fill:#6c5ce7;fill:var(--bit-accent-primary-color,#6c5ce7)}.admonition-caution{background-color:rgba(230,126,34,.1);border-left:8px solid #e67e22}.admonition-caution h5{color:#e67e22}.admonition-caution .admonition-icon svg{stroke:#e67e22;fill:#e67e22}.admonition-tip{background-color:#eefaf3;background-color:var(--bit-accent-success-bg,#eefaf3);border-left:8px solid #37b26c;border-left:8px solid var(--bit-accent-success-color,#37b26c)}.admonition-tip h5{color:#37b26c;color:var(--bit-accent-success-color,#37b26c)}.admonition-tip .admonition-icon svg{stroke:#37b26c;stroke:var(--bit-accent-success-color,#37b26c);fill:#37b26c;fill:var(--bit-accent-success-color,#37b26c)}.admonition-warning{background-color:#fdeff2;background-color:var(--bit-accent-impulsive-bg,#fdeff2);border-left:8px solid #e62e5c;border-left:8px solid var(--bit-accent-impulsive-color,#e62e5c)}.admonition-warning h5{color:#e62e5c;color:var(--bit-accent-impulsive-color,#e62e5c)}.admonition-warning .admonition-icon svg{stroke:#e62e5c;stroke:var(--bit-accent-impulsive-color,#e62e5c);fill:#e62e5c;fill:var(--bit-accent-impulsive-color,#e62e5c)}.admonition-important{background-color:#f3faff;background-color:var(--bit-accent-process-color,#f3faff);border-left:8px solid #0984e3;border-left:8px solid var(--bit-accent-process-color,#0984e3)}.admonition-important h5{color:#0984e3;color:var(--bit-accent-process-color,#0984e3)}.admonition-important .admonition-icon svg{stroke:#0984e3;stroke:var(--bit-accent-process-color,#0984e3);fill:#0984e3;fill:var(--bit-accent-process-color,#0984e3)}.admonition-note{background-color:#fff5dd;background-color:var(--bit-accent-hunger-bg,#fff5dd);border-left:8px solid #ffc640;border-left:8px solid var(--bit-accent-hunger-color,#ffc640)}.admonition-note h5{color:#ffc640;color:var(--bit-accent-hunger-bg,#ffc640)}.admonition-note .admonition-icon svg{stroke:#ffc640;stroke:var(--bit-accent-hunger-color,#ffc640);fill:#ffc640;fill:var(--bit-accent-hunger-color,#ffc640)}.page-frame_centerColumn__3NPav{margin-left:auto;margin-right:auto;max-width:1000px;width:calc(100% - 40px)}.page-frame_wideColumn__1ChZv{margin-left:auto;margin-right:auto;max-width:1440px;width:calc(100% - 40px)}.page-frame_textColumn__3zLbU{max-width:700px}.grid_gridContainer__4VBNN{grid-gap:16px 16px;display:grid}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-1__1ss_5{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-1__3P4lU{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-1__wODMm{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-1__tUeI_{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-1__1kjOk{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-1__3LVbF{grid-template-columns:repeat(1,1fr)}}.grid-template_colTemplate--all-1__-UOpc{grid-template-columns:repeat(1,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-2__1KjEh{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-2__1__QR{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-2__1ul_n{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-2__2S7Tu{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-2__UwwbB{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-2__1rYvu{grid-template-columns:repeat(2,1fr)}}.grid-template_colTemplate--all-2__1He1E{grid-template-columns:repeat(2,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-3__TMFFR{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-3__2MhHN{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-3__3WGI1{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-3__1q_C8{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-3__1hX_J{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-3__1h7Jj{grid-template-columns:repeat(3,1fr)}}.grid-template_colTemplate--all-3__6dGFi{grid-template-columns:repeat(3,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-4__2teW3{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-4__2Aha_{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-4__1ALzl{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-4__2qnzc{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-4__354WX{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-4__17hwz{grid-template-columns:repeat(4,1fr)}}.grid-template_colTemplate--all-4__10tSX{grid-template-columns:repeat(4,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-5__agmQE{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-5__3AK3h{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-5__11c2e{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-5__xfZLG{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-5__2KE0o{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-5__3zT0y{grid-template-columns:repeat(5,1fr)}}.grid-template_colTemplate--all-5__1jVOK{grid-template-columns:repeat(5,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-6__29fxZ{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-6__28Twr{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-6__2kDBI{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-6__1lPCd{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-6__2cSru{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-6__2YUIf{grid-template-columns:repeat(6,1fr)}}.grid-template_colTemplate--all-6__CYkFQ{grid-template-columns:repeat(6,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-7__GA5wI{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-7__4Fb_8{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-7__39kEU{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-7__36AOH{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-7__2NhTM{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-7__FCphT{grid-template-columns:repeat(7,1fr)}}.grid-template_colTemplate--all-7__6oelD{grid-template-columns:repeat(7,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-8__ivU4a{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-8__Kib8u{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-8__1mabe{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-8__3-Ua-{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-8__910kE{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-8__juIPn{grid-template-columns:repeat(8,1fr)}}.grid-template_colTemplate--all-8__13do1{grid-template-columns:repeat(8,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-9__3txev{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-9__2nWIW{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-9__WSiRs{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-9__ZZSUh{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-9__3nDUt{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-9__1LuKR{grid-template-columns:repeat(9,1fr)}}.grid-template_colTemplate--all-9__8Gk5M{grid-template-columns:repeat(9,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-10__11cAC{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-10__2PSIX{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-10__1St0q{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-10__2p7B1{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-10__3V7p3{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-10__stzpr{grid-template-columns:repeat(10,1fr)}}.grid-template_colTemplate--all-10__1WPG9{grid-template-columns:repeat(10,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-11__XIH79{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-11__545uh{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-11__3-Wg_{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-11__36P4G{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-11__2uxtf{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-11__WVTUJ{grid-template-columns:repeat(11,1fr)}}.grid-template_colTemplate--all-11__9dbT_{grid-template-columns:repeat(11,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-12__3A-zw{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-12__3bfsE{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-12__3sX2W{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-12__1_9Ml{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-12__1xPfh{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-12__1XdEa{grid-template-columns:repeat(12,1fr)}}.grid-template_colTemplate--all-12__2b0DF{grid-template-columns:repeat(12,1fr)}.copy-box_copyBox__2IYNC{align-items:center;background:var(--bit-bg-dent);border:1px solid var(--bit-border-color-lightest);border-radius:6px;display:flex;font-size:var(--bit-p-xs);height:40px;justify-content:space-between;min-width:80px;padding:0 11px}.copy-box_copyBox__2IYNC .copy-box_leftSection__1h0Z5{font-family:monospace;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;white-space:pre}.copy-box_button__G55mZ{background-color:var(--bit-bg-color-highlight);border:none;box-sizing:border-box;color:var(--bit-accent-color);cursor:pointer;outline:none}.copy-box_rightSection__qZszL{align-items:center;display:flex;position:relative}.copy-box_copyIcon__1sS5o{font-size:var(--bit-p-lg)}.paragraph_paragraph__9ufJX{margin:0 0 1em}.consumable-link_copyMethod__1t46m{align-content:center;grid-template-columns:1fr 4fr;margin-bottom:16px}.consumable-link_copyTitle__OpvLV{align-items:center;display:flex;font-weight:700;margin:unset}.heading-sizes_xxs__2NEpY{font-size:16px;font-size:var(--bit-h-xxs,16px)}.heading-sizes_xs__3Whdh{font-size:18px;font-size:var(--bit-h-xs,18px)}.heading-sizes_sm__2XY8O{font-size:24px;font-size:var(--bit-h-sm,24px)}.heading-sizes_md__VnNuJ{font-size:26px;font-size:var(--bit-h-md,26px)}.heading-sizes_lg__2ctQr{font-size:36px;font-size:var(--bit-h-lg,36px)}.heading-sizes_xl__1SRy-{font-size:40px;font-size:var(--bit-h-xl,40px)}.heading-sizes_xxl__2hbfE{font-size:50px;font-size:var(--bit-h-xxl,50px)}.heading_h1__39RVQ,.heading_h2__2S7-G,.heading_h3__1BSp1,.heading_h4__L5mNd,.heading_h5__2i6xN,.heading_h6__1XRJP{font-weight:700;margin:0}.heading_h1__39RVQ{margin-bottom:20px}.label_label__1OitV{background:var(--bit-accent-bg);border-radius:6px;color:var(--bit-accent-heavy);display:inline-block;font-size:12px;font-size:var(--bit-p-xxs,12px);font-weight:700;padding:4px 8px;text-transform:uppercase}.label-list_labelList__U6ppw{margin-bottom:16px}.label-list_labelList__U6ppw>*{margin-bottom:1em}.label-list_labelList__U6ppw>:not(:last-child){margin-right:1em}.section_section__e878i:empty{display:none}.section_sectionMargin__JFu0O{margin-bottom:40px}.separator_separator__1JNXS{border:none;border-bottom:1px solid var(--bit-border-color-lightest);border-radius:5px;margin-bottom:40px;margin-top:30px}.separator_separator__3JnE-{border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,#ededed);width:100%}.muted-text_mutedText__2iqXg{color:#6c707c;color:var(--bit-text-color-light,#6c707c)}.sub-title_subTitle__3rmt5{margin-bottom:16px}.component-overview_componentTitle__3Y6eo{align-items:center;display:flex;flex-wrap:wrap;margin-bottom:20px}.component-overview_componentTitle__3Y6eo>h1{margin:0}.component-overview_badgeContainer__1EUM_{align-items:center;display:flex;flex-wrap:wrap;margin-top:8px}.component-overview_badgeContainer__1EUM_>*{margin:0 8px}.component-overview_subTitle__33VBo{white-space:break-spaces}.component_container__wKARi{display:flex;flex-direction:column;height:100%}.card_card__37xow{box-sizing:border-box;padding:20px}.elevations_low__1hVha{box-shadow:var(--bit-shadow-hover-low)}.elevations_medium__3klNF{box-shadow:var(--bit-shadow-hover-medium)}.elevations_high__34Cbm{box-shadow:var(--bit-shadow-hover-high)}.roundness_sharp__HxXUj{border-radius:2px}.roundness_default__2lyQQ{border-radius:5px}.roundness_small__3Cwbi{border-radius:8px}.roundness_medium__rMVHV{border-radius:10px}.roundness_circle__18nMU{border-radius:50%}.background_bedrock__3FKrB{background:var(--bit-bg-bedrock)}.background_base__29SaX,.background_layer__Sl4XN{background:var(--bit-bg-color)}.background_crust__3IFae{background:var(--bit-bg-tooltip)}.background_topping__bd7wA{background:var(--bit-bg-color)}.background_topping__bd7wA:hover{background:var(--bit-bg-heavy)}.background_dent__3lLeg{background:var(--bit-bg-dent)}.accent-color_primary__3frqn{--bit-accent-color:#6c5ce7;--bit-accent-heavy:#5d4aec;--bit-accent-light:#897dec;--bit-accent-text:#6c5ce7;--bit-accent-text-heavy:#5d4aec;--bit-text-on-accent:#fff;--bit-accent-bg:#eceaff;--bit-accent-bg-heavy:#c9c3f6}.accent-color_complementary__2hAqH{--bit-accent-color:#f83d6c;--bit-accent-heavy:#f7174f;--bit-accent-light:#f96389;--bit-accent-text:#f83d6c;--bit-accent-text-heavy:#f7174f;--bit-text-on-accent:#fff;--bit-accent-bg:#ffe2ea;--bit-accent-bg-heavy:#fb9cb4}.accent-color_impulsive__A1-5J{--bit-accent-color:#e62e5c;--bit-accent-heavy:#d31948;--bit-accent-light:#f086a0;--bit-accent-text:#e62e5c;--bit-accent-text-heavy:#d31948;--bit-text-on-accent:#fff;--bit-accent-bg:#fdeff2;--bit-accent-bg-heavy:#f7bac9}.accent-color_hungry__2f4vr{--bit-accent-color:#ffc640;--bit-accent-heavy:#ff991f;--bit-accent-light:#ffe380;--bit-accent-text:#ffc640;--bit-accent-text-heavy:#ff991f;--bit-text-on-accent:#0c0c0c;--bit-accent-bg:#fff5dd;--bit-accent-bg-heavy:#fff0b3}.accent-color_success__bd5oL{--bit-accent-color:#37b26c;--bit-accent-heavy:#2e945a;--bit-accent-light:#94deb4;--bit-accent-text:#37b26c;--bit-accent-text-heavy:#2e945a;--bit-text-on-accent:#fff;--bit-accent-bg:#eefaf3;--bit-accent-bg-heavy:#d0f1de}.accent-color_process__2YrEO{--bit-accent-color:#0984e3;--bit-accent-heavy:#3d5afe;--bit-accent-light:#95ccf5;--bit-accent-text:#0984e3;--bit-accent-text-heavy:#3d5afe;--bit-text-on-accent:#fff;--bit-accent-bg:#f3faff;--bit-accent-bg-heavy:#d2ecfe}.accent-color_emphasized__3yGcN{--bit-accent-color:#2b2b2b;--bit-accent-heavy:#0c0c0c;--bit-accent-light:#414141;--bit-accent-text:#2b2b2b;--bit-accent-text-heavy:#0c0c0c;--bit-text-on-accent:#fff;--bit-accent-bg:#ededed;--bit-accent-bg-heavy:#cccfd4}.accent-color_neutral__gff6l{--bit-accent-color:#414141;--bit-accent-heavy:#2b2b2b;--bit-accent-light:#6c707c;--bit-accent-text:#414141;--bit-accent-text-heavy:#2b2b2b;--bit-text-on-accent:#fff;--bit-accent-bg:#f6f6f6;--bit-accent-bg-heavy:#ededed}.themed-text_themedText__-5NI1{color:#6c5ce7;color:var(--bit-accent-color,#6c5ce7)}.composition-card_compositionCard__1TGzH{background-color:#fff;background-color:var(--bit-bg-color,#fff);box-shadow:var(--bit-shadow-raised-low);display:flex;flex:none;flex-direction:column;min-height:122px;min-width:199px;padding:0}.composition-card_compositionCard__1TGzH:hover .composition-card_linkToComposition__uWeCP{opacity:1;visibility:visible}.composition-card_compositionContainer__1fvHN{box-sizing:border-box;margin:auto;max-width:100%;overflow:auto;padding:16px;position:relative;transform:translateZ(0)}.composition-card_title__1pxwS{align-items:center;border-top:1px solid #ededed;border-top:1px solid var(--bit-border-color-lightest,#ededed);display:flex;flex:none;font-size:.875em;justify-content:space-between;padding:8px 16px}.composition-card_title__1pxwS>span{margin-right:8px}.composition-card_linkToComposition__uWeCP{color:#2b2b2b;color:var(--bit-text-color-heavy,#2b2b2b);opacity:0;text-decoration:none;transition:opacity .3s,visibility .3s ease-in-out;visibility:hidden}.composition-card_compositionCardError__1YDP3{border-radius:4px 4px 0 0}.compositions-overview_background__3z-mR{background:#f6f6f6;background:var(--bit-bg-dent,#f6f6f6);border:1px solid #ededed;border:1px solid var(--bit-border-color-lightest,#ededed);border-radius:6px;display:flex;max-height:500px;overflow-x:auto;padding:12px}.compositions-overview_background__3z-mR>*{margin-right:16px}.compositions-overview_background__3z-mR>:last-child{margin:0}.abs-container_container__32Ee7{position:relative}.abs-container_containee__32F4t{position:absolute;visibility:hidden}[data-open=true] .abs-container_containee__32F4t{visibility:visible}.positions_top__3z-mm{bottom:100%}.positions_top-start__3Dd97{bottom:100%;left:0}.positions_top-end__p3_DQ{bottom:100%;right:0}.positions_right__2Uww5{left:100%}.positions_right-start__1dNL6{left:100%;top:0}.positions_right-end__1cvYe{bottom:0;left:100%}.positions_bottom__2JHnG{top:100%}.positions_bottom-start__PrOJ6{left:0;top:100%}.positions_bottom-end__3ioJM{right:0;top:100%}.positions_left__1_mZZ{right:100%}.positions_left-start__28qkr{right:100%;top:0}.positions_left-end__2wuCk{bottom:0;right:100%}.positions_cover__3zbKy{left:0;top:0}.displacement_displacement__2_tNV[data-position^=top]{margin-bottom:var(--bit-drawer-margin)}.displacement_displacement__2_tNV[data-position^=right]{margin-left:var(--bit-drawer-margin)}.displacement_displacement__2_tNV[data-position^=bottom]{margin-top:var(--bit-drawer-margin)}.displacement_displacement__2_tNV[data-position^=left]{margin-right:var(--bit-drawer-margin)}.displacement_displacement__2_tNV[data-position=bottom-start],.displacement_displacement__2_tNV[data-position=top-start]{margin-left:var(--bit-drawer-indent)}.displacement_displacement__2_tNV[data-position=bottom-end],.displacement_displacement__2_tNV[data-position=top-end]{margin-right:var(--bit-drawer-indent)}.displacement_displacement__2_tNV[data-position^=left-start],.displacement_displacement__2_tNV[data-position^=right-start]{margin-top:var(--bit-drawer-indent)}.displacement_displacement__2_tNV[data-position^=left-end],.displacement_displacement__2_tNV[data-position^=right-end]{margin-bottom:var(--bit-drawer-indent)}.drawer_placeholder__1C-MI{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fade-in-out_fadeInOut__3K09R{opacity:0;transform:scale(.61);transition:all .18s}[data-open=true]>.fade-in-out_fadeInOut__3K09R{opacity:1;transform:scale(1)}.tooltip-card_menu__3dWcg{background:var(--bit-bg-tooltip);padding:8px}.arrow_arrow__1FQ9D{margin:0 auto;position:absolute}.arrow_arrow__1FQ9D:before{background:var(--bit-bg-tooltip);content:"";display:block;height:10px;transform:rotate(45deg);width:10px}.arrow-position_bottom__8vlM8,.arrow-position_top__PZHJG{left:calc(50% - 5px)}.arrow-position_left__1yldm,.arrow-position_right__MK8IT{top:calc(50% - 5px)}.arrow-position_cover__3zqai,.arrow-position_none__86cQo{display:none}.arrow-shadow_top-end__2u1Yf:before,.arrow-shadow_top-start__34UQ0:before,.arrow-shadow_top__3TKYi:before{box-shadow:2px 2px 4px 0 rgba(0,0,0,.1)}.arrow-shadow_bottom-end__zFI_x:before,.arrow-shadow_bottom-start__aKHFr:before,.arrow-shadow_bottom__32vBi:before{box-shadow:-2px -2px 4px 0 rgba(0,0,0,.1)}.arrow-shadow_right-end__3e_rr:before,.arrow-shadow_right-start__1S1dt:before,.arrow-shadow_right__badwP:before{box-shadow:-2px 2px 4px 0 rgba(0,0,0,.1)}.arrow-shadow_left-end__2xptV:before,.arrow-shadow_left-start__1yaQL:before,.arrow-shadow_left__1P6F5:before{box-shadow:2px -2px 4px 0 rgba(0,0,0,.1)}.tooltip-drawer_tooltip__1kqNH{--bit-drawer-margin:10px}.tooltip-drawer_arrow__11qDF{--bit-drawer-margin:5px;--bit-drawer-indent:8px}.key_keyCombo__PL5PA{align-items:center;display:flex;white-space:nowrap}.key_keyCombo__PL5PA .key_keycap__1y0bf{margin-right:4px}.key_keyCombo__PL5PA .key_keycap__1y0bf:last-child{margin-right:0}.key_keySequence__vPmqS{align-items:center;display:flex;white-space:nowrap}.key_keycap__1y0bf{align-items:center;background-color:#f6f6f6;background-color:var(--bit-bg-dent,#f6f6f6);border-radius:3px;box-sizing:border-box;color:#6c707c;color:var(--bit-text-color-light,#6c707c);display:flex;font-size:12px;height:1.7em;justify-content:center;min-width:1.7em;padding:0 .4em;text-transform:uppercase}.key_thenSep__2a-aE{font-size:.8em;margin:0 4px}.main-dropdown_mainDropdown__3RALE{height:100%}.main-dropdown_mainDropdown__3RALE>div{align-items:center;display:flex;height:100%}.main-dropdown_mainDropdown__3RALE .main-dropdown_menu__3LwDV{border-radius:6px;font-size:var(--bit-p-xs);padding:0;right:-5px;width:300px}.main-dropdown_mainDropdown__3RALE .main-dropdown_menu__3LwDV>div{margin-bottom:8px}.main-dropdown_iconAnchor__3zgUr{align-items:center;border-radius:6px;cursor:pointer;display:flex;font-size:16px;height:30px;transition:background-color .3s ease-in-out}[data-open=true] .main-dropdown_iconAnchor__3zgUr{color:#6c5ce7;color:var(--bit-accent-color,#6c5ce7)}[data-open=true] .main-dropdown_iconAnchor__3zgUr,[data-open=true] .main-dropdown_iconAnchor__3zgUr:hover{background-color:#fff;background-color:var(--bit-bg-color,#fff)}.main-dropdown_iconAnchor__3zgUr:hover{background-color:var(--bit-bg-heavy)}.main-dropdown_icon__2ZlG-{padding:0 8px}.main-dropdown_menuBlock__1gkRE{border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,#ededed);padding:16px 0 10px}.main-dropdown_menuBlock__1gkRE:last-child{border-bottom:none}.main-dropdown_title__2B5xg{color:#878c9a;font-size:10px;font-weight:700;margin-bottom:8px;padding:0 16px;text-transform:uppercase}.main-dropdown_line__2P4qc{align-items:center;cursor:pointer;display:flex;height:36px;justify-content:space-between;padding:0 16px}.main-dropdown_line__2P4qc:hover{background-color:#eceaff;background-color:var(--bit-accent-bg,#eceaff)}.dropdown_dropdown__NIBbx{padding:8px}.pill-label_pillLabel__W9O5W{align-items:center;border:1px solid #ededed;border-color:var(--bit-border-color-lightest,#ededed);border-radius:12px;color:#6c707c;color:var(--bit-text-color-light,#6c707c);display:flex;font-size:var(--bit-p-xs);padding:2px 8px;text-transform:capitalize;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.version-label_label__HHySb.version-label_latest__1_NVT{border-color:#37b26c;color:#37b26c}.version-label_label__HHySb.version-label_checked-out__1Td0_{border-color:#0984e3;color:#0984e3}.version-label_versionLabel__5CJbp{margin-bottom:16px}.version-label_emptyLabel__1--AS{height:25px;margin-bottom:16px}.ellipsis_ellipsisDiv__3ErBy,.ellipsis_ellipsis__2Jyl3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ellipsis_ellipsisDiv__3ErBy{display:inline-block}.version-dropdown_versionDropdown__26zMI{height:100%}.version-dropdown_versionDropdown__26zMI>div{align-items:center;display:flex;height:100%}.version-dropdown_versionDropdown__26zMI .version-dropdown_menu__3gzq4{border-radius:6px;font-size:var(--bit-p-xs);padding:0;right:0;width:300px}.version-dropdown_title__3hQ6s{border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,#ededed);margin-bottom:8px;padding:16px 16px 12px}.version-dropdown_versionContainer__h0FXY{max-height:240px;overflow-y:scroll}.version-dropdown_versionLine__2Tp7A{align-items:center;color:var(--bit-text-color-heavy);cursor:pointer;display:flex;height:36px;padding:0 24px;text-decoration:none}.version-dropdown_versionLine__2Tp7A:hover{background-color:#f6f6f6;background-color:var(--bit-bg-heavy,#f6f6f6)}.version-dropdown_versionLine__2Tp7A:last-child{margin-bottom:8px}.version-dropdown_versionLine__2Tp7A.version-dropdown_currentVersion__1kZ9N{background:#eceaff;background:var(--bit-accent-bg,#eceaff)}.version-dropdown_versionLine__2Tp7A .version-dropdown_version__32b-4{margin-right:16px}.version-dropdown_versionLine__2Tp7A .version-dropdown_label__3z5qX{background-color:#fff;margin-right:8px}.version-dropdown_placeholder__vwyG0{align-items:center;border:1px solid #babec9;border:1px solid var(--bit-border-color,#babec9);border-radius:6px;box-sizing:border-box;display:flex;height:30px;padding:0 8px;transition:background-color .3s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.version-dropdown_placeholder__vwyG0>span{display:none}.version-dropdown_placeholder__vwyG0>div{max-width:80px}.version-dropdown_withVersions__3soV6{cursor:pointer}.version-dropdown_withVersions__3soV6>div{margin-right:5px}.version-dropdown_withVersions__3soV6>span{display:unset}.version-dropdown_withVersions__3soV6:hover{background-color:var(--bit-bg-heavy)}[data-open=true] .version-dropdown_withVersions__3soV6{color:#6c5ce7;color:var(--bit-accent-color,#6c5ce7);transition:color .3s,background-color .3s ease-in-out}[data-open=true] .version-dropdown_withVersions__3soV6,[data-open=true] .version-dropdown_withVersions__3soV6:hover{background-color:#fff;background-color:var(--bit-bg-color,#fff)}.full-loader_fullLoader__3yFGi{align-items:center;display:flex;font-size:24px;height:100%;justify-content:center;width:100%}.dropdown_menu__3AsW5{border-radius:6px;font-size:14px;font-size:var(--bit-p-xs,14px);padding:0;width:400px}.dropdown_placeholder__7bsgi{align-items:center;background-color:#fff;background-color:var(--bit-bg-color,#fff);border:1px solid #37b26c;border-radius:6px;box-sizing:border-box;color:#37b26c;cursor:pointer;display:flex;height:30px;padding:0 6px;transition:background-color .3s,color .3s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dropdown_placeholder__7bsgi:hover{background-color:#2e945a;border-color:#2e945a;color:#fff;color:var(--bit-bg-color,#fff)}@media screen and (max-width:768px){.dropdown_placeholder__7bsgi{padding:0 8px}.dropdown_placeholder__7bsgi .dropdown_content__1wo2u{display:none}}.dropdown_placeholder__7bsgi>span:first-child{font-size:17px}[data-open=true] .dropdown_placeholder__7bsgi{background-color:#2e945a;border-color:#2e945a;color:#fff;color:var(--bit-bg-color,#fff);transition:color .3s,background-color .3s ease-in-out}.dropdown_placeholder__7bsgi>div{padding:0 6px}.tab_tab__3FBGN{align-items:center;border-bottom:3px solid #fff;border-bottom:3px solid var(--bit-bg-modal,#fff);box-sizing:border-box;cursor:pointer;display:flex;margin-right:8px;padding:0 16px 8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tab_tab__3FBGN.tab_active__3zLR9{border-bottom:3px solid #6c5ce7;border-bottom:3px solid var(--bit-accent-color,#6c5ce7);cursor:unset}.menu_top__3me6T{color:#2b2b2b;color:var(--bit-text-color-heavy,#2b2b2b);padding:16px 24px 24px}.menu_title__1i2Zn{align-items:center;display:flex;font-size:var(--bit-p-xs);font-weight:700}.menu_title__1i2Zn>span:first-child{font-weight:inherit;margin-right:8px}.menu_drawer__1g36E{justify-content:space-between}.menu_drawer__1g36E>div{align-items:center;display:flex}.menu_drawer__1g36E>div>span:first-child{font-size:16px;font-size:var(--bit-p-md,16px);margin-right:8px}.menu_tabs__3TV0N{border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,#ededed);display:flex;line-height:14px;overflow-x:auto;padding:0 24px}.menu_registry__Xkwzo>div:last-child{border-top:none;padding:0}.menu_importContent__3ZdSc>div{margin:12px 0}.menu_importContent__3ZdSc>div:nth-child(2){margin-bottom:24px}.menu_bottom__smiMq{align-items:center;display:flex}.menu_bottom__smiMq>span:first-child{font-size:16px;font-size:var(--bit-p-md,16px);margin-right:8px}.tab-content_middle__1AU0T{margin:0 24px 16px}.tab-content_middle__1AU0T>div{margin:12px 0}.tab-content_bottom__2BM6e{border-top:1px solid #ededed;border-top:1px solid var(--bit-border-color-lightest,#ededed);padding:8px 0}.tab-content_drawer__2XTQ-{align-items:center;display:flex;justify-content:space-between}.tab-content_open__2kHUH{transform:rotate(180deg)}.bottom-link_link__2tsia{align-items:center;color:#2b2b2b;color:var(--bit-text-color-heavy,#2b2b2b);cursor:pointer;display:flex;height:40px;padding:0 24px;text-decoration:unset}.bottom-link_link__2tsia:hover{background-color:#ededed;background-color:var(--bit-border-color-lightest,#ededed)}.bottom-link_link__2tsia>span:first-child{font-size:16px;font-size:var(--bit-p-md,16px);margin-right:8px}.copied-message_copiedMessage__21wkM{align-items:center;background-color:#6c5ce7;background-color:var(--bit-accent-color,#6c5ce7);border-radius:12px;color:#fff;color:var(--bit-text-on-accent,#fff);display:flex;font-size:12px;opacity:0;padding:2px 5px;position:absolute;right:30px;top:9px;transition:visibility .5s,opacity .5s ease-in-out;visibility:hidden}.copied-message_showMessage__3DtoO{opacity:1;visibility:visible}.copy-box_copyBox__CPXlk{align-items:center;background:var(--bit-bg-dent);border:1px solid var(--bit-border-color-lightest);border-radius:6px;display:flex;font-size:var(--bit-p-xs);height:40px;justify-content:space-between;min-width:80px;padding:0 11px}.copy-box_copyBox__CPXlk .copy-box_leftSection__pTlsR{font-family:monospace;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;white-space:pre}.copy-box_copyBox__CPXlk .copy-box_copiedMessage__2bKYL{top:1px}.copy-box_button__1KS6m{background-color:var(--bit-bg-color-highlight);border:none;box-sizing:border-box;color:var(--bit-accent-color);cursor:pointer;outline:none}.copy-box_rightSection__rcsHe{display:flex;position:relative}.copy-box_copyIcon__2GVcn{font-size:var(--bit-p-lg)}.bit-info_moreInfo__3FTm1>div:last-child{border-top:none;padding:0}.dark-theme_darkMod__1or3J{--bit-text-color:#ededed;--bit-text-color-heavy:#f6f6f6;--bit-text-color-light:#878c9a;--bit-text-inactive:#6c707c;--bit-text-inactive-heavy:#878c9a;--bit-border-color:#6c707c;--bit-border-color-heavy:#878c9a;--bit-border-color-light:#414141;--bit-border-color-lightest:#414141;--bit-accent-color:#5d4aec;--bit-accent-heavy:#6c5ce7;--bit-accent-light:#3e29df;--bit-accent-text:#c9c3f6;--bit-accent-text-heavy:#eceaff;--bit-text-on-accent:var(--bit-text-color,#ededed);--bit-accent-bg:#1a1452;--bit-accent-bg-heavy:#221967;--bit-bg-color:#2b2b2b;--bit-bg-heavy:#414141;--bit-bg-heaviest:#6c707c;--bit-bg-bedrock:#0c0c0c;--bit-navigation:#2b2b2b;--bit-bg-overlay:#2b2b2b;--bit-bg-modal:#2b2b2b;--bit-bg-tooltip:#2b2b2b;--bit-bg-tooltip-heavy:#414141;--bit-bg-dent:#2b2b2b;--bit-error-color:#f7bac9;--bit-error-heavy:#fdeff2;--bit-error-light:#f086a0;--bit-error-bg:#8d1130;--bit-error-bg-heavy:#d31948;color:#ededed}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{background-color:#333;border-radius:4px;color:#fff;font-size:14px;line-height:1.4;outline:0;position:relative;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{border-top-color:initial;border-width:8px 8px 0;bottom:-7px;left:0;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:initial;border-width:0 8px 8px;left:0;top:-7px;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-left-color:initial;border-width:8px 0 8px 8px;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{border-right-color:initial;border-width:8px 8px 8px 0;left:-7px;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{color:#333;height:16px;width:16px}.tippy-arrow:before{border-color:transparent;border-style:solid;content:"";position:absolute}.tippy-content{padding:5px 9px;position:relative;z-index:1}.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{left:11px;top:calc(50% - 3px);transform:rotate(90deg)}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{right:11px;top:calc(50% - 3px);transform:rotate(-90deg)}.tippy-svg-arrow{fill:#333;height:16px;text-align:left;text-align:initial;width:16px}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}.tippy-box[data-theme~=teambit]{background:#2b2b2b;background:var(--bit-bg-tooltip,#2b2b2b);border-radius:8px;color:#fff;color:var(--bit-text-color,#fff)}.tippy-box[data-theme~=teambit] .tippy-content{padding:.85em;white-space:nowrap}.tippy-box[data-theme~=teambit].tippy-breakLine .tippy-content{white-space:pre-line;word-break:break-all}.tippy-box[data-theme~=teambit] .tippy-svg-arrow{fill:#2b2b2b;fill:var(--bit-bg-tooltip,#2b2b2b)}.inline-code_inlineCode__1FiLp{background-color:#a6a6a633;border-radius:.25em;font-family:monospace,sans-serif;font-size:.85em;padding:.2em .4em}.inline-code_highlight__4YZsC{background-color:#eceaff;background-color:var(--bit-accent-bg,#eceaff)}.muted-italic_mutedItalic__2KpIQ{color:#6c707c;color:var(--bit-text-color-light,#6c707c);font-style:italic}.lanes-drawer_emptyScope__3gjfq{display:block;padding:8px 8px 0 28px}.lanes-drawer_collapseIcon__3UkNA{width:16px}.indent_indent__1DCWU{padding-left:calc(var(--indent-depth)*8px + 8px)}.indent_indentMargin__2BD2l{margin-left:calc(var(--indent-depth)*8px + 8px)}.indent_indent__2GD-y{padding-left:calc(var(--indent-depth)*8px + 8px)}.indent_indentMargin__1QfrF{margin-left:calc(var(--indent-depth)*8px + 8px)}.collapsing-node_childrenTree__2AGpj{font-size:var(--bit-p-xs);overflow:hidden;transition:max-height .4s ease-in-out}.deprecation-icon_deprecatedTooltip__347et{padding:2px 5px}.deprecation-icon_deprecatedTooltip__347et>div{padding:unset!important}.deprecation-icon_deprectaedTooltipContent__X673k{font-size:12px}.component-view_component__3I6My{align-items:center;border-left:0 solid transparent;box-sizing:border-box;color:inherit;display:flex;font-size:inherit;font-size:var(--bit-p-xs);height:32px;justify-content:space-between;padding-right:8px;text-decoration:none}.component-view_component__3I6My:hover{background:#f6f6f6;background:var(--bit-bg-heavy,#f6f6f6)}.component-view_component__3I6My:hover .component-view_envIcon__2DBLl{filter:grayscale(0)}.component-view_component__3I6My.component-view_active__1xKda{background:#eceaff;background:var(--bit-accent-bg,#eceaff)}.component-view_component__3I6My.component-view_active__1xKda .component-view_envIcon__2DBLl{filter:grayscale(0)}.component-view_component__3I6My .component-view_icon__2LVh8{height:16px;opacity:.8;width:16px}.component-view_component__3I6My .component-view_left__1RGqo{align-items:center;display:flex;flex:1 1;min-width:0}.component-view_component__3I6My .component-view_left__1RGqo>span{overflow:hidden;padding:0 8px;text-overflow:ellipsis;white-space:nowrap}.component-view_component__3I6My .component-view_envIcon__2DBLl{filter:grayscale(1);transition:filter .3s ease-in-out}.component-view_component__3I6My .component-view_right__37qrs{align-items:center;display:flex;font-size:12px}.component-view_component__3I6My .component-view_right__37qrs>*{margin-right:4px}.component-view_component__3I6My .component-view_right__37qrs>:last-child(){margin-right:0}.component-view_componentEnvTooltip__3gsji{font-size:var(--bit-p-xs);max-width:unset!important}.component-view_componentEnvTooltip__3gsji .component-view_componentEnvTitle__23QH2{color:#c9c3f6;font-size:12px;font-size:var(--bit-p-xxs,12px);font-weight:700;margin-bottom:4px}.scope-tree-node_scope__cITC0{align-items:center;cursor:pointer;display:flex;font-size:inherit;font-size:var(--bit-p-xs);font-weight:700;height:32px;justify-content:space-between;padding-right:8px;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.scope-tree-node_scope__cITC0:hover{background:#f6f6f6;background:var(--bit-bg-heavy,#f6f6f6)}.scope-tree-node_scope__cITC0 .scope-tree-node_arrow__hn9go{color:#6c707c;color:var(--bit-text-color-light,#6c707c);display:inline-block;line-height:inherit;margin-right:10px;transition:all .3s}.scope-tree-node_scope__cITC0 .scope-tree-node_arrow__hn9go.scope-tree-node_collapsed__1Wmso{transform:rotate(-90deg)}.scope-tree-node_highlighted__1eh7u{color:#5d4aec;color:var(--bit-accent-heavy,#5d4aec)}.scope-tree-node_left__17mLp{align-items:center;display:flex;flex:1 1;min-width:0}.scope-tree-node_left__17mLp .scope-tree-node_name__35t7U{margin-right:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scope-tree-node_componentTree__1yrBs{font-size:var(--bit-p-xs);overflow:hidden;transition:max-height .4s ease-in-out}.namespace-tree-node_namespace__YZq4n{align-items:center;cursor:pointer;display:flex;font-size:inherit;font-size:var(--bit-p-xs);font-weight:700;height:32px;justify-content:space-between;padding-right:8px;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.namespace-tree-node_namespace__YZq4n:hover{background:#f6f6f6;background:var(--bit-bg-heavy,#f6f6f6)}.namespace-tree-node_namespace__YZq4n .namespace-tree-node_arrow__2TQFJ{color:#6c707c;color:var(--bit-text-color-light,#6c707c);display:inline-block;line-height:inherit;margin-right:10px;transition:all .3s}.namespace-tree-node_namespace__YZq4n .namespace-tree-node_arrow__2TQFJ.namespace-tree-node_collapsed__2NSFB{transform:rotate(-90deg)}.namespace-tree-node_highlighted__1zrGL{color:#5d4aec;color:var(--bit-accent-heavy,#5d4aec)}.namespace-tree-node_left__2bDBJ{align-items:center;display:flex;flex:1 1;min-width:0}.namespace-tree-node_left__2bDBJ .namespace-tree-node_name__YtL_k{margin-right:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.namespace-tree-node_componentTree__2LdgO{font-size:var(--bit-p-xs);overflow:hidden;transition:max-height .4s ease-in-out}.lane-tree-node_lane___wRks{align-items:center;border-left:0 solid transparent;box-sizing:border-box;color:inherit;display:flex;font-size:inherit;font-size:var(--bit-p-xs);height:32px;justify-content:space-between;padding-right:8px;text-decoration:none}.lane-tree-node_lane___wRks:hover{background:#f6f6f6;background:var(--bit-bg-heavy,#f6f6f6)}.lane-tree-node_lane___wRks:hover .lane-tree-node_envIcon__3SU2U{filter:grayscale(0)}.lane-tree-node_lane___wRks.lane-tree-node_active__22JGW{background:#eceaff;background:var(--bit-accent-bg,#eceaff)}.lane-tree-node_lane___wRks.lane-tree-node_active__22JGW .lane-tree-node_envIcon__3SU2U{filter:grayscale(0)}.lane-tree-node_lane___wRks .lane-tree-node_icon__2-0ik{height:16px;opacity:.8;width:16px}.lane-tree-node_lane___wRks .lane-tree-node_left__1MSG9{align-items:center;display:flex;flex:1 1;min-width:0}.lane-tree-node_lane___wRks .lane-tree-node_left__1MSG9 .lane-tree-node_laneName__2tHtb{overflow:hidden;padding:0 8px;white-space:nowrap}.lane-tree-node_lane___wRks .lane-tree-node_right__2WvIK{align-items:center;display:flex;font-size:12px}.lane-tree-node_lane___wRks .lane-tree-node_right__2WvIK>*{margin-right:4px}.lane-tree-node_lane___wRks .lane-tree-node_right__2WvIK>:last-child(){margin-right:0}.component-grid_componentGrid__2gngO{grid-column-gap:10px;grid-gap:32px;-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(197px,1fr))}.preview-container_previewContainer__3cAYi{border-radius:5px 5px 0 0;height:0;overflow:hidden;padding-bottom:57%;pointer-events:none;position:relative}.preview-container_preview__WKIUl{border-bottom:1px solid #cccfd4;border-bottom:1px solid var(--bit-border-color-light,#cccfd4);bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.preview-container_emptyPreview__2p3mm{background-color:#ededed;background-color:var(--bit-border-color-lightest,#ededed)}.deprecation-sticker_deprecated__3Hvlk{background-color:#ffc640;border-radius:4px;display:none;font-size:10px;font-weight:700;padding:3px 8px;position:absolute;right:12px;text-transform:uppercase;top:7px;z-index:1}.deprecation-sticker_deprecated__3Hvlk.deprecation-sticker_show__gTSKl{display:unset}.details_content__2ygRq{display:flex;flex-direction:column;height:96px;justify-content:space-between;padding:16px}.details_nameSpace__WTVmf{color:#6c707c;color:var(--bit-text-color-light,#6c707c);font-size:10px;font-weight:700;margin-bottom:7px;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.details_name__3N3hs{align-items:center;display:flex;flex-wrap:wrap;margin-bottom:6px}.details_name__3N3hs>span:first-child{font-weight:700;margin-right:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.details_versionHolder__2nD-5{align-items:center;display:flex;overflow:hidden}.details_versionHolder__2nD-5 .details_img__2Y1sJ{height:14px;margin-left:5px}.details_description__1DYuB{line-clamp:2;box-orient:vertical;-webkit-line-clamp:2;-webkit-box-orient:vertical;-moz-line-clamp:2;color:#6c707c;color:var(--bit-text-color-light,#6c707c);display:-webkit-box;font-size:14px;font-size:var(--bit-p-xs,14px);overflow:hidden;text-overflow:ellipsis}.card_componentCard__2UZCx{border:1px solid #cccfd4;border-color:var(--bit-border-color-light,#cccfd4);border-radius:5px;cursor:pointer;overflow:hidden;position:relative;transition:border-color .3s ease-in-out;width:100%}.card_componentCard__2UZCx:hover{border-color:#6c707c;border-color:var(--bit-text-color-light,#6c707c);overflow:unset}.component-card_componentCardLink__2tXyg{color:var(--bit-text-color-heavy);text-decoration:none}.component-card_bottom__25298{justify-content:space-between;padding:0 16px 16px}.component-card_bottom__25298,.component-card_bottom__25298>div{align-items:center;display:flex}.component-card_bottom__25298>div>span{font-size:14px;margin-right:10px}.component-card_bottom__25298>div .component-card_size__GNwz7{color:#6c707c;color:var(--bit-text-color-light,#6c707c);font-size:11px;vertical-align:middle}.component-card_dot__swafO{background-color:#ededed;border-radius:50%;display:inline-block;height:14px;width:14px}.component-card_img__3Rdnn{height:14px}.preview-placeholder_previewPlaceholder__1Nv5B{align-items:center;color:#c7c7c7;display:flex;flex-direction:column;height:100%;justify-content:center;pointer-events:auto}.preview-placeholder_previewPlaceholder__1Nv5B>span:first-child{font-size:30px;margin-bottom:14px}.preview-placeholder_previewPlaceholder__1Nv5B>div{font-size:13px}.preview-placeholder_tooltip__ewDbB{max-width:155px;text-align:center}.load-preview_loadPreview__2vJsD{align-items:center;background-color:#414141;background-color:var(--bit-text-color,#414141);border-radius:6px;color:#fff;color:var(--bit-text-on-accent,#fff);cursor:pointer;display:flex;font-size:12px;left:8px;padding:4px 8px;position:absolute;top:8px;transition:background-color .3s ease-in-out}.load-preview_loadPreview__2vJsD:hover{background-color:var(--bit-text-color-heavy)}.load-preview_loadPreview__2vJsD .load-preview_icon__lOrCv{margin-right:5px;transform:rotate(270deg)}.workspace-component-card_wrapper__1-Y2a{position:relative}.workspace-component-card_limitLength__j1jcI{max-width:70%}.external-link_link__5SHSx{color:unset;line-height:1;text-decoration:none}.empty-component-gallery_emptyComponentGallery__2BEWs{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;margin:auto;padding:0 20px;text-align:center}.empty-component-gallery_emptyComponentGallery__2BEWs>img{margin-bottom:40px}.empty-component-gallery_title__1K1vf{font-size:24px;font-size:var(--bit-p-xxl,24px);margin-bottom:32px}.empty-component-gallery_title__1K1vf>span:last-child{font-weight:700}.empty-component-gallery_purpleLink__1hAur{align-items:center;color:#5d4aec;color:var(--bit-accent-heavy,#5d4aec);cursor:pointer;display:inline-flex;text-decoration:none}.empty-component-gallery_purpleLink__1hAur .empty-component-gallery_text__2v_Co{margin-right:5px}.empty-component-gallery_purpleLink__1hAur .empty-component-gallery_icon__1Z8Vu{margin-top:4px}.empty-component-gallery_bottomText__2Wh5o{font-size:var(--bit-p-xs);margin-bottom:16px}.empty-component-gallery_bottomText__2Wh5o .empty-component-gallery_purpleLink__1hAur{color:#5d4aec;color:var(--bit-accent-heavy,#5d4aec);cursor:pointer;text-decoration:underline}.empty-component-gallery_iconLine__2o9NU{display:flex}.empty-component-gallery_iconLine__2o9NU .empty-component-gallery_logo__2nV9u{height:24px;margin:0 7px;width:24px}.empty-lane-overview_text__G3eZJ{margin-bottom:30px}.lanes-overview_container__3ILZx{box-sizing:border-box;height:100%;overflow-y:auto;padding:50px 5% 150px}.scope-icon_scopeIcon__yXCXP{align-items:center;background-color:#babec9;background-color:var(--bit-border-color,#babec9);border:1px solid #ededed;border:1px solid var(--bit-border-color-lightest,#ededed);border-radius:9px;box-sizing:border-box;display:flex;font-weight:400;height:1em;justify-content:center;position:relative;text-align:center;width:1em}.scope-icon_letter__1qe8M{color:#fff;color:var(--bit-bg-color,#fff)}.scope-icon_scopeImg__3gz7u{height:100%}.scope-icon_iconBackground__3blOE{background-color:#fff;background-color:var(--bit-bg-color,#fff)}.scope-title_title__3k_KY{align-items:center;display:flex;flex-wrap:wrap;margin-bottom:0;margin-right:16px}.scope-title_title__3k_KY>div:first-child{margin-right:16px}.scope-title_orgName__p0WYZ{color:var(--bit-text-color-heavy);font-weight:400;font-weight:700}.lane-details_laneTitle__33btk{margin-bottom:32px;max-width:700px}.lane-details_laneTitle__33btk>p{margin-bottom:24px}.lane-details_laneTitle__33btk .lane-details_titleRow__27jwW{align-items:baseline;display:flex;flex-wrap:wrap;margin-bottom:20px}.lane-details_laneTitle__33btk .lane-details_avatar__3a737{margin-right:4px}.lane-details_pillsContainer__3PSyR{align-items:center;display:flex;margin-bottom:24px}.lane-details_pillsContainer__3PSyR>div{margin-right:10px;padding:4px 8px}.lane-details_pillIcon__47twD{font-size:16px;font-size:var(--bit-p-md,16px);margin-right:6px}.lane-details_componentCount__2XyBb{background-color:#ededed;background-color:var(--bit-border-color-lightest,#ededed);border-radius:6px;font-size:12px;margin-right:8px;padding:0 6px}.lanes-overview-menu_topBarLink__2FvqD{align-items:center;box-sizing:border-box;color:inherit;display:flex;margin:0 5px;padding:0 8px;position:relative;text-decoration:none;transition:color .3s}.lanes-overview-menu_topBarLink__2FvqD:hover:not(.lanes-overview-menu_active__6i5cq)>div{background-color:var(--bit-bg-heavy)}.lanes-overview-menu_topBarLink__2FvqD.lanes-overview-menu_active__6i5cq{color:#6c5ce7;color:var(--bit-accent-color,#6c5ce7)}.lanes-overview-menu_topBarLink__2FvqD.lanes-overview-menu_active__6i5cq:after{background-color:#6c5ce7;background-color:var(--bit-accent-color,#6c5ce7);height:4px}.lanes-overview-menu_topBarLink__2FvqD:after{background-color:transparent;border-top-left-radius:2px;border-top-right-radius:2px;bottom:0;content:"";height:0;left:0;position:absolute;right:0;transition:background-color .3s,height .3s}.lanes-overview-menu_topBarLink__2FvqD>div{align-items:center;border-radius:8px;display:flex;height:30px;padding:0 8px;transition:background-color .3s ease-in-out}.lanes-overview-menu_topBar__ezxzb{justify-content:space-between;width:100%}.lanes-overview-menu_leftSide__24iH3,.lanes-overview-menu_topBar__ezxzb{align-items:center;display:flex;height:100%}.lanes-overview-menu_navigation__IJAv1{display:flex;height:100%;list-style:none;padding-left:28px}@media screen and (max-width:768px){.lanes-overview-menu_navigation__IJAv1{padding-left:6px}}.lanes-overview-menu_navigation__IJAv1>li{display:block;height:100%;margin-right:16px}.lanes-overview-menu_rightSide__SVMVg{align-items:center;display:flex;height:100%}.lanes-overview-menu_rightSide__SVMVg>*{margin-right:12px}.lanes-overview-menu_rightSide__SVMVg>:last-child{margin-right:16px}.lanes-overview-menu_rightSide__SVMVg .lanes-overview-menu_widgets__2Gntz{align-items:center;display:flex;height:100%;margin-right:20px}.lanes-overview-menu_rightSide__SVMVg .lanes-overview-menu_widgets__2Gntz>nav>a{padding:0}.lanes-overview-menu_rightSide__SVMVg .lanes-overview-menu_widgets__2Gntz>nav>a:last-child{margin-right:0}.lanes-overview-menu_rightSide__SVMVg .lanes-overview-menu_widget__2PHiG{font-size:17px}.lanes-overview-menu_useBox__2SlzM{--bit-drawer-margin:14px}.top-bar-nav_topBarLink__2Mg-_{align-items:center;box-sizing:border-box;color:inherit;display:flex;margin:0 5px;padding:0 8px;position:relative;text-decoration:none;transition:color .3s}.top-bar-nav_topBarLink__2Mg-_:hover:not(.top-bar-nav_active__-Swyn)>div{background-color:var(--bit-bg-heavy)}.top-bar-nav_topBarLink__2Mg-_.top-bar-nav_active__-Swyn{color:#6c5ce7;color:var(--bit-accent-color,#6c5ce7)}.top-bar-nav_topBarLink__2Mg-_.top-bar-nav_active__-Swyn:after{background-color:#6c5ce7;background-color:var(--bit-accent-color,#6c5ce7);height:4px}.top-bar-nav_topBarLink__2Mg-_:after{background-color:transparent;border-top-left-radius:2px;border-top-right-radius:2px;bottom:0;content:"";height:0;left:0;position:absolute;right:0;transition:background-color .3s,height .3s}.top-bar-nav_topBarLink__2Mg-_>div{align-items:center;border-radius:8px;display:flex;height:30px;padding:0 8px;transition:background-color .3s ease-in-out}.menu_topBar__1zVDB{justify-content:space-between;width:100%}.menu_leftSide__2QCN9,.menu_topBar__1zVDB{align-items:center;display:flex;height:100%}.menu_navigation__2VobK{display:flex;height:100%;list-style:none;padding-left:28px}@media screen and (max-width:768px){.menu_navigation__2VobK{padding-left:6px}}.menu_navigation__2VobK>li{display:block;height:100%;margin-right:16px}.menu_rightSide__NGGSx{align-items:center;display:flex;height:100%}.menu_rightSide__NGGSx>*{margin-right:12px}.menu_rightSide__NGGSx>:last-child{margin-right:16px}.menu_rightSide__NGGSx .menu_widgets__3TjrQ{align-items:center;display:flex;height:100%;margin-right:20px}.menu_rightSide__NGGSx .menu_widgets__3TjrQ>nav>a{padding:0}.menu_rightSide__NGGSx .menu_widgets__3TjrQ>nav>a:last-child{margin-right:0}.menu_rightSide__NGGSx .menu_widget__2le2h{font-size:17px}.menu_useBox__2ibV5{--bit-drawer-margin:14px}.base_docsMainBlock__lkj5z{margin:0 auto 150px;max-width:1440px;padding:50px 40px 10px}.base_docsMainBlock__lkj5z .base_heading__3ZLTJ{margin-bottom:unset}.base_maxWidth__iUSVk{max-width:700px}.base_marginBottom__3Ol4J{margin-bottom:30px}.base_topRow__3kgKo{align-items:baseline;display:flex}.base_copyMethod__1Zv6Z{align-self:center;display:flex;margin-bottom:20px;width:100%}.base_copyTitle__16rYg{margin-bottom:unset;margin-right:10px}.base_copyBox__1rqqL{flex-grow:1}.base_marginRight__3NH-w{margin-right:10px}.base_compositionSection__2dtVM{margin-top:40px}.base_compositionCard__2nvTZ{max-height:500px;max-width:100%;overflow:hidden}.base_mdx__27C-V{font-size:16px}.react-playground_error__1zi13{background-color:var(--bit-bg-color);border:1px solid var(--bit-error-color);border-bottom-right-radius:6px;border-left:none;border-top-right-radius:6px;bottom:0;box-sizing:border-box;color:var(--bit-error-color);font-family:Roboto mono;font-size:11px;left:0;overflow:auto;padding:8px;position:absolute;right:0;top:0;transition:all 1s ease-in-out;width:100%}.react-playground_error__1zi13.react-playground_column__1Kovw{border:1px solid var(--bit-error-color);border-bottom:none;border-bottom-right-radius:0;border-top-left-radius:6px}.react-playground_editorWrapper__1wY8s{max-height:450px;overflow:auto!important}.react-playground_codePane__19Xda{background-color:#282c34;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;max-width:90%;min-width:150px}.react-playground_codePane__19Xda.react-playground_column__1Kovw,.react-playground_codePane__19Xda.react-playground_column__1Kovw .react-playground_editorWrapper__1wY8s{height:220px;max-width:100%}.react-playground_editor__1LFjB{border-bottom-left-radius:6px;border-top-left-radius:6px;box-sizing:border-box;font-family:Roboto mono!important;font-size:11px;min-height:100px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.react-playground_editor__1LFjB>textarea{outline:none;white-space:pre!important;width:100%!important}.react-playground_editor__1LFjB>pre{white-space:pre!important;width:-webkit-fit-content!important;width:-moz-fit-content!important;width:fit-content!important}.react-playground_splitter__R480r{background-color:#282c34}.react-playground_splitter__R480r>div{border:none;border-radius:0}.react-playground_previewPane__1Rkn-{border:1px solid var(--bit-border-color-lightest);border-bottom-right-radius:6px;border-left:none;border-top-right-radius:6px;min-height:100px;overflow:auto;position:relative}.react-playground_previewPane__1Rkn-.react-playground_column__1Kovw{border:1px solid var(--bit-border-color-lightest);border-bottom:none;border-bottom-right-radius:0;border-top-left-radius:6px;min-height:220px}.react-playground_previewPane__1Rkn-.react-playground_column__1Kovw .react-playground_editorWrapper__1wY8s{max-height:220px}.react-playground_previewBox__1quIl{bottom:0;left:0;position:absolute;right:0;top:0}.react-playground_preview__1LvFd{border-left:none;box-sizing:border-box;height:100%;width:100%}.react-playground_playground__1mVdr{border-radius:6px;display:flex;max-height:450px;overflow:hidden;width:100%}.react-playground_playground__1mVdr>div{width:100%}.examples-overview_exampleSection__1OdhX>:not(:last-child){margin-bottom:8px}.grid_gridContainer__1UJEt{grid-gap:16px 16px;display:grid}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-1__3yC-h{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-1__QNCY6{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-1__lwzsG{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-1__1SQ6E{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-1__1jW6i{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-1__2k08m{grid-template-columns:repeat(1,1fr)}}.grid-template_colTemplate--all-1__17Qj4{grid-template-columns:repeat(1,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-2__2rOrd{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-2__1bHaV{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-2__2xHc2{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-2__uiFTv{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-2__1bxkB{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-2__1qN1i{grid-template-columns:repeat(2,1fr)}}.grid-template_colTemplate--all-2__1qe0T{grid-template-columns:repeat(2,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-3__x8Pvk{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-3__20OZC{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-3__3DGUO{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-3__i4_Je{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-3__19bPw{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-3__3icPF{grid-template-columns:repeat(3,1fr)}}.grid-template_colTemplate--all-3__3W3h9{grid-template-columns:repeat(3,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-4__3WfBa{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-4__2IbWq{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-4__2HM7U{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-4__LLn46{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-4__3GR6S{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-4__1mY1U{grid-template-columns:repeat(4,1fr)}}.grid-template_colTemplate--all-4__3ipRg{grid-template-columns:repeat(4,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-5__3KH8S{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-5__3Ygnr{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-5__2_6pj{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-5__QvxEw{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-5__1qmby{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-5__3hm-F{grid-template-columns:repeat(5,1fr)}}.grid-template_colTemplate--all-5__42MSn{grid-template-columns:repeat(5,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-6__IwLPd{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-6__1fvFW{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-6__1aaf1{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-6__3Sycl{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-6__1EI-I{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-6__uACD7{grid-template-columns:repeat(6,1fr)}}.grid-template_colTemplate--all-6__1DZ6t{grid-template-columns:repeat(6,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-7__3WdyT{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-7__2Yjdk{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-7__3CKEV{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-7__25mOC{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-7__1MkVq{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-7__23UqJ{grid-template-columns:repeat(7,1fr)}}.grid-template_colTemplate--all-7__3mWAl{grid-template-columns:repeat(7,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-8__2lyx4{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-8__1-WdX{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-8__1m1Iu{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-8__LQB3g{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-8__QWFTx{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-8__1yK6M{grid-template-columns:repeat(8,1fr)}}.grid-template_colTemplate--all-8__ofqM0{grid-template-columns:repeat(8,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-9__2bAOK{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-9__1iN6C{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-9__1DnPL{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-9__2UgmJ{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-9__1PKI-{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-9__2mJP-{grid-template-columns:repeat(9,1fr)}}.grid-template_colTemplate--all-9__3ZyF1{grid-template-columns:repeat(9,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-10__363Q9{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-10__2QMWE{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-10__2_yUI{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-10__2uq82{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-10__K0kSz{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-10__2BnMI{grid-template-columns:repeat(10,1fr)}}.grid-template_colTemplate--all-10__1UHKi{grid-template-columns:repeat(10,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-11__2ycDa{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-11__330-L{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-11__Enmnu{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-11__1wUY7{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-11__1cJTT{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-11__363GK{grid-template-columns:repeat(11,1fr)}}.grid-template_colTemplate--all-11__3jnJ_{grid-template-columns:repeat(11,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-12__jyYq6{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-12__i8F5f{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-12__NJrcU{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-12__36GQd{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-12__3xWtr{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-12__3T6rY{grid-template-columns:repeat(12,1fr)}}.grid-template_colTemplate--all-12__3HeEi{grid-template-columns:repeat(12,1fr)}.table-heading-column_headingColumn__1p6_E{align-items:center;display:flex;flex-wrap:wrap;font-size:var(--bit-p-xxs);font-weight:700}.table-heading-row_titleRow__3_VR_{border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,#ededed);display:grid;padding:18px 20px}.table-heading-row_titleRow__3_VR_.table-heading-row_hide__2jbmt{display:none}.table-heading-row_titleCol__wci4P{color:var(--bit-text-color-light);text-transform:uppercase}.grid_gridContainer__PLcPC{grid-gap:16px 16px;display:grid}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-1__3X1tm{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-1__vAMrJ{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-1__l3yZ2{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-1__1qAjO{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-1__Lzk5D{grid-template-columns:repeat(1,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-1__24kPq{grid-template-columns:repeat(1,1fr)}}.grid-template_colTemplate--all-1__2_f2D{grid-template-columns:repeat(1,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-2__1QjoI{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-2__3lPqK{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-2__pCke4{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-2__13oOH{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-2__3Da0x{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-2__8dOFH{grid-template-columns:repeat(2,1fr)}}.grid-template_colTemplate--all-2__BFOs2{grid-template-columns:repeat(2,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-3__2lUc7{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-3__2oAyt{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-3__3ruNN{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-3__2fFYx{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-3__10f9Q{grid-template-columns:repeat(3,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-3__3cqMF{grid-template-columns:repeat(3,1fr)}}.grid-template_colTemplate--all-3__fXhN2{grid-template-columns:repeat(3,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-4__2Humr{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-4__2jOwt{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-4__1mKqg{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-4__26ers{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-4__3a_MO{grid-template-columns:repeat(4,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-4__2oHvd{grid-template-columns:repeat(4,1fr)}}.grid-template_colTemplate--all-4__SoTGv{grid-template-columns:repeat(4,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-5__36QrU{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-5__1ZKyc{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-5__rPEDi{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-5__2Xqi_{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-5__3DhET{grid-template-columns:repeat(5,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-5__2gtof{grid-template-columns:repeat(5,1fr)}}.grid-template_colTemplate--all-5__1cZZ5{grid-template-columns:repeat(5,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-6__tEQaE{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-6__1Occc{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-6__2Ofd3{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-6__2A7ks{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-6__17axh{grid-template-columns:repeat(6,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-6__33Abd{grid-template-columns:repeat(6,1fr)}}.grid-template_colTemplate--all-6__1h8RW{grid-template-columns:repeat(6,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-7__1WNuo{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-7__3sB9e{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-7__21wqc{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-7__2N3Y2{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-7__KwHyd{grid-template-columns:repeat(7,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-7__4yehq{grid-template-columns:repeat(7,1fr)}}.grid-template_colTemplate--all-7__1oCYn{grid-template-columns:repeat(7,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-8__3_ySH{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-8___yx8y{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-8__vMQ9R{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-8__-8fwr{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-8__1pWDR{grid-template-columns:repeat(8,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-8__EmLmG{grid-template-columns:repeat(8,1fr)}}.grid-template_colTemplate--all-8__2iI7k{grid-template-columns:repeat(8,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-9__1U0QT{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-9__23sZp{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-9__XmMaH{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-9__41ua_{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-9__30CAy{grid-template-columns:repeat(9,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-9__4sxgl{grid-template-columns:repeat(9,1fr)}}.grid-template_colTemplate--all-9__2Azc5{grid-template-columns:repeat(9,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-10__2dVvv{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-10__30tIs{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-10__EWpOS{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-10__3MfAC{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-10__2pcsD{grid-template-columns:repeat(10,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-10__2xcCo{grid-template-columns:repeat(10,1fr)}}.grid-template_colTemplate--all-10__7Nq_t{grid-template-columns:repeat(10,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-11__heXP3{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-11__7ATwi{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-11__1GDkh{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-11__1tJnp{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-11__2Eq1u{grid-template-columns:repeat(11,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-11__3WX4_{grid-template-columns:repeat(11,1fr)}}.grid-template_colTemplate--all-11__3GowY{grid-template-columns:repeat(11,1fr)}@media only screen and (min-width:360px){.grid-template_colTemplate--xs-12__108sJ{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:480px){.grid-template_colTemplate--sm-12__2JvCA{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:768px){.grid-template_colTemplate--md-12__3ZFWe{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:920px){.grid-template_colTemplate--l-12__P1hoW{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:1200px){.grid-template_colTemplate--lg-12__36lxW{grid-template-columns:repeat(12,1fr)}}@media only screen and (min-width:1440px){.grid-template_colTemplate--xl-12__2FrIF{grid-template-columns:repeat(12,1fr)}}.grid-template_colTemplate--all-12__2Ersc{grid-template-columns:repeat(12,1fr)}.table-column_tableColumn__2K6_b{align-items:center;display:flex;font-size:var(--bit-p-xs)}.table-row_propRow__PprUo{border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,var(--bit-border-color-lightest,#ededed));margin-bottom:8px;padding:18px 20px}.table-row_propRow__PprUo.table-row_singleColumn__3D7aw{grid-template-columns:repeat(1,1fr)}.table-row_mobileTitle__1oYJt{display:none}.table-row_mobileTitle__1oYJt.table-row_show__10BrG{color:var(--bit-text-color-light);display:flex;font-size:var(--bit-p-xxs);font-weight:700;min-width:110px;text-transform:uppercase}.table-row_columnContent__1jh3Y,.table-row_column__3Sk6-{align-items:center;display:flex;flex-wrap:wrap}.table-row_title__20l2S{margin:unset;text-transform:capitalize}.table-row_required__2JYwI{color:var(--bit-text-color-light);font-size:12px;white-space:nowrap}.table-row_name__1oKif{color:#4646c6;margin-right:5px}.table-row_name__1oKif,.table-row_type__1lHI3{font-family:Roboto mono;font-size:var(--bit-p-xxs)}.table-row_type__1lHI3{background-color:#eceaff;background-color:var(--bit-accent-bg,#eceaff);border-radius:4px;display:inline-block;padding:5px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.table-row_typeColumn__z8Whd .table-row_highlighted__MIvK_{background:unset!important;display:flex!important;flex-grow:1;font-family:Roboto mono;font-size:var(--bit-p-xxs);margin:0;padding:0!important;white-space:pre-wrap;word-break:break-word}.table-row_typeColumn__z8Whd .table-row_highlighted__MIvK_>code>span{color:#397300}.table-row_typeColumn__z8Whd .table-row_highlighted__MIvK_>code{font-family:inherit}.table-row_default__2n23P{font-family:Roboto mono;font-size:var(--bit-p-xxs)}.table-row_breakWord__33VJu{word-break:break-word}.table_table__3Ya9Q>div{grid-gap:16px 24px}
package/artifacts/preview/teambit_harmony_node-preview.js CHANGED
@@ -1 +1 @@
1
- !function(e,n){"object"===typeof exports&&"object"===typeof module?module.exports=n():"function"===typeof define&&define.amd?define([],n):"object"===typeof exports?exports["teambit.harmony/node-preview"]=n():e["teambit.harmony/node-preview"]=n()}(self,(function(){return(()=>{var e={8244:e=>{e.exports=function(e){return e&&e.__esModule?e:{default:e}}},3854:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>p});t(3804);var o=t(5057),a=t(8459),r=t(688),i=["components"];function d(){return d=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},d.apply(this,arguments)}function s(e,n){if(null==e)return{};var t,o,a=function(e,n){if(null==e)return{};var t,o,a={},r=Object.keys(e);for(o=0;o<r.length;o++)t=r[o],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o<r.length;o++)t=r[o],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var m={};function p(e){var n=e.components,t=s(e,i);return(0,o.mdx)("wrapper",d({},m,t,{components:n,mdxType:"MDXLayout"}),(0,o.mdx)(a.MDXScopeProvider,{components:{Node:r.N},mdxType:"MDXScopeProvider"},(0,o.mdx)(r.N,{mdxType:"Node"})))}p.isMDXComponent=!0},688:(e,n,t)=>{"use strict";Object.defineProperty(n,"N",{enumerable:!0,get:function(){return o.default}});var o=a(t(8793));function a(e){return e&&e.__esModule?e:{default:e}}a.__bit_component={id:"teambit.harmony/aspect-docs/node@0.0.132",homepage:"https://bit.dev/teambit/harmony/aspect-docs/node",exported:!0}},8793:(e,n,t)=>{"use strict";var o={id:"teambit.harmony/aspect-docs/node@0.0.132",homepage:"https://bit.dev/teambit/harmony/aspect-docs/node",exported:!0};Object.defineProperty(n,"__esModule",{value:!0}),n.default=c;d(t(3804));var a=t(5057),r=t(8459),i=["components"];function d(e){return e&&e.__esModule?e:{default:e}}function s(){return s=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},s.apply(this,arguments)}function m(e,n){if(null==e)return{};var t,o,a=p(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o<r.length;o++)t=r[o],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}function p(e,n){if(null==e)return{};var t,o,a={},r=Object.keys(e);for(o=0;o<r.length;o++)t=r[o],n.indexOf(t)>=0||(a[t]=e[t]);return a}d.__bit_component=o,s.__bit_component=o,m.__bit_component=o,p.__bit_component=o;var l={};function c(e){var n=e.components,t=m(e,i);return(0,a.mdx)("wrapper",s({},l,t,{components:n,mdxType:"MDXLayout"}),(0,a.mdx)(r.MDXScopeProvider,{components:{},mdxType:"MDXScopeProvider"},(0,a.mdx)("p",null,"The built-in ",(0,a.mdx)("a",{parentName:"p",href:"https://bit.dev/teambit/harmony/node"},"Node Component Development Environment")," is a concrete composition of the ",(0,a.mdx)("a",{parentName:"p",href:"https://bit.dev/teambit/envs/envs"},"Env Aspect"),". Use it when getting started with Node components with Bit and later as a base for any future customization of your Node-based workflow."),(0,a.mdx)("p",null,"Node environment is composed out of the base ",(0,a.mdx)("a",{parentName:"p",href:"https://bit.dev/teambit/react/react"},"React Environment")," with some specific overrides for dependency management."),(0,a.mdx)("h2",null,"Use Node environment"),(0,a.mdx)("p",null,"To use this environment for your components, add it to any of the ",(0,a.mdx)("inlineCode",{parentName:"p"},"variants")," in your ",(0,a.mdx)("inlineCode",{parentName:"p"},"workspace.jsonc")," file as follows:"),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="workspace.jsonc"',title:'"workspace.jsonc"'},'{\n "teambit.workspace/variants": {\n "some/path": {\n "teambit.harmony/node": {}\n }\n }\n}\n')),(0,a.mdx)("h2",null,"Create Node components"),(0,a.mdx)("p",null,"Node implements several component templates:"),(0,a.mdx)("ul",null,(0,a.mdx)("li",{parentName:"ul"},(0,a.mdx)("inlineCode",{parentName:"li"},"node-env")," boilerplate for customizing configuration.")),(0,a.mdx)("p",null,"Use any of these templates with the ",(0,a.mdx)("inlineCode",{parentName:"p"},"bit create")," command:"),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-sh"},"bit create <template name> [components...]\n")),(0,a.mdx)("h2",null,"Default Configuration and Services"),(0,a.mdx)("p",null,"Node, like all over Environments must implement a set of Service Handlers. For each service, Node compose a different tool and config by default."),(0,a.mdx)("blockquote",null,(0,a.mdx)("p",{parentName:"blockquote"},"Node is a composition of the React environment with some specific modifications. Most of the links here direct to the actual configs in React environment.")),(0,a.mdx)("table",null,(0,a.mdx)("thead",{parentName:"table"},(0,a.mdx)("tr",{parentName:"thead"},(0,a.mdx)("th",{parentName:"tr",align:null},"Service"),(0,a.mdx)("th",{parentName:"tr",align:null},"Aspect"),(0,a.mdx)("th",{parentName:"tr",align:null},"Base Configuration"))),(0,a.mdx)("tbody",{parentName:"table"},(0,a.mdx)("tr",{parentName:"tbody"},(0,a.mdx)("td",{parentName:"tr",align:null},"Compilation"),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/typescript/typescript"},"TypeScript")),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/typescript/tsconfig.json"},"tsconfig.json"))),(0,a.mdx)("tr",{parentName:"tbody"},(0,a.mdx)("td",{parentName:"tr",align:null},"Testing"),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("strong",{parentName:"td"},"Jest")),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/jest/jest.config.js"},"jest.config.js"))),(0,a.mdx)("tr",{parentName:"tbody"},(0,a.mdx)("td",{parentName:"tr",align:null},"Linting"),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("strong",{parentName:"td"},"ESLint")),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/eslint/eslintrc.ts"},"eslintrc.ts"))),(0,a.mdx)("tr",{parentName:"tbody"},(0,a.mdx)("td",{parentName:"tr",align:null},"DevServer"),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("strong",{parentName:"td"},"Webpack")),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/webpack/webpack.config.preview.dev.ts"},"webpack.config.preview.dev.ts"))),(0,a.mdx)("tr",{parentName:"tbody"},(0,a.mdx)("td",{parentName:"tr",align:null},"Preview (simulation)"),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("strong",{parentName:"td"},"Webpack")),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/webpack/webpack.config.preview.ts"},"webpack.config.preview.ts"))),(0,a.mdx)("tr",{parentName:"tbody"},(0,a.mdx)("td",{parentName:"tr",align:null},"Package"),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("strong",{parentName:"td"},"PKG")),(0,a.mdx)("td",{parentName:"tr",align:null},"Base ",(0,a.mdx)("inlineCode",{parentName:"td"},"package.json")," props from ",(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/typescript/typescript/~code/typescript.main.runtime.ts"},"TypeScript Aspect"))),(0,a.mdx)("tr",{parentName:"tbody"},(0,a.mdx)("td",{parentName:"tr",align:null},"Bundling"),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("strong",{parentName:"td"},"Webpack")),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/webpack/webpack.config.preview.ts"},"webpack.config.preview.ts"))),(0,a.mdx)("tr",{parentName:"tbody"},(0,a.mdx)("td",{parentName:"tr",align:null},"Documentation"),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("em",{parentName:"td"},"Core implementation")),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/docs/index.tsx"},"Docs template"))),(0,a.mdx)("tr",{parentName:"tbody"},(0,a.mdx)("td",{parentName:"tr",align:null},"Build pipeline"),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/pipelines/builder"},"Builder")),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/node.env.ts"},"Build pipeline"))),(0,a.mdx)("tr",{parentName:"tbody"},(0,a.mdx)("td",{parentName:"tr",align:null},"Dependencies"),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("em",{parentName:"td"},"Core implementation")),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/harmony/node/~code/node.env.ts"},"Env-dependencies"))),(0,a.mdx)("tr",{parentName:"tbody"},(0,a.mdx)("td",{parentName:"tr",align:null},"Component Generator"),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/generator/generator"},"Generator")),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/harmony/node/~code/templates/node-component.ts"},"example template"))))),(0,a.mdx)("h2",null,"Customize environment"),(0,a.mdx)("p",null,"All environments are extendible. You can take any pre-existing environment, and create a component to extend it. That component can then use APIs to:"),(0,a.mdx)("ul",null,(0,a.mdx)("li",{parentName:"ul"},"Override default configurations."),(0,a.mdx)("li",{parentName:"ul"},"Replace composed tools with others (for example - use Babel instead of TypeScript)."),(0,a.mdx)("li",{parentName:"ul"},"Add new services and capabilities.")),(0,a.mdx)("h3",null,"Create an extension"),(0,a.mdx)("p",null,"The first step is to create a component that extends Node. Use the ",(0,a.mdx)("inlineCode",{parentName:"p"},"node-env")," template from Node env."),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-sh"},"bit create node-env extensions/custom-node\n")),(0,a.mdx)("p",null,"As with any component, environments must themselves have an environment which compiles, builds, transpiles, etc, them. Bit has a special environment that knows how to create other environments - ",(0,a.mdx)("inlineCode",{parentName:"p"},"teambit.harmony/aspect"),". So for any component that is meant to be a Bit environment, you must set ",(0,a.mdx)("inlineCode",{parentName:"p"},"teambit.harmony/aspect")," as the environment for that component."),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="add variant for the extension and set the aspect env"',title:'"add',variant:!0,for:!0,the:!0,extension:!0,and:!0,set:!0,aspect:!0,'env"':!0},'{\n //...\n "teambit.workspace/variants": {\n //...\n "extensions/custom-node": {\n "teambit.harmony/aspect": {}\n }\n //...\n }\n}\n')),(0,a.mdx)("p",null,"Validate the above by running ",(0,a.mdx)("inlineCode",{parentName:"p"},"bit env")," and see that the extension-component has ",(0,a.mdx)("inlineCode",{parentName:"p"},"teambit.harmony/aspect")," set as an environment."),(0,a.mdx)("p",null,"Now that you have a basic customized extension to start from, you can go ahead and configure it for your components in ",(0,a.mdx)("inlineCode",{parentName:"p"},"workspace.json"),":"),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="edit variants and set the new env"',title:'"edit',variants:!0,and:!0,set:!0,the:!0,new:!0,'env"':!0},'{\n //...\n "teambit.workspace/variants": {\n //...\n "[some]/[variant]": {\n "[yourscope]/extensions/custom-node": {}\n }\n //...\n }\n}\n')),(0,a.mdx)("h3",null,"Customize configuration"),(0,a.mdx)("p",null,"Node implements a set of APIs you can use to merge your preferred configuration with its defaults. These APIs are called ",(0,a.mdx)("strong",{parentName:"p"},"transformers")," and they all start with the ",(0,a.mdx)("inlineCode",{parentName:"p"},"override")," pre-fix. Find ",(0,a.mdx)("a",{parentName:"p",href:"#transformers-api-docs"},"Available transformers here"),".\nIn case of a conflict, your config will override the default."),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-typescript",metastring:'{4,14} title="Customized TypeScript configuration"',"{4,14}":!0,title:'"Customized',TypeScript:!0,'configuration"':!0},"import { EnvsMain, EnvsAspect } from '@teambit/envs';\nimport { NodeAspect, NodeMain } from '@teambit/node';\n\nconst tsconfig = require('./typescript/tsconfig.json');\n\nexport class CustomNodeExtension {\n constructor(private node: NodeMain) {}\n\n static dependencies: any = [EnvsAspect, NodeAspect];\n\n static async provider([envs, node]: [EnvsMain, NodeMain]) {\n const customNodeEnv = node.compose([node.overrideTsConfig(tsconfig)]);\n\n envs.registerEnv(customNodeEnv);\n\n return new CustomNodeExtension(node);\n }\n}\n")),(0,a.mdx)("blockquote",null,(0,a.mdx)("p",{parentName:"blockquote"},"To override any specific configuration it's recommended to create a separate config file with your customized configuration and import it into the main ",(0,a.mdx)("inlineCode",{parentName:"p"},".extension.ts")," file where you can supply it to the relevant ",(0,a.mdx)("strong",{parentName:"p"},"transformers"),". See the tsconfig example in the above snippet.")),(0,a.mdx)("h3",null,"Composing tools and services"),(0,a.mdx)("p",null,"Environments use Environment Services by implementing a special class of methods called Service Handlers.\nThe supplied transformers allow overriding of these services - for instance the ",(0,a.mdx)("inlineCode",{parentName:"p"},"overrideCompiler")," transformer allows overriding the environment's ",(0,a.mdx)("inlineCode",{parentName:"p"},"getCompiler()")," method."),(0,a.mdx)("p",null,"The below example uses the ",(0,a.mdx)("inlineCode",{parentName:"p"},"overrideCompiler")," transformer to override the ",(0,a.mdx)("inlineCode",{parentName:"p"},"getCompiler()")," Service Handler to change the compilation service."),(0,a.mdx)("ol",null,(0,a.mdx)("li",{parentName:"ol"},"Add a Babel config file to your custom environment and import/require it in your ",(0,a.mdx)("inlineCode",{parentName:"li"},".extension")," file"),(0,a.mdx)("li",{parentName:"ol"},"Create a new Babel compiler using the Babel aspect, and initialize it with the above babelConfig"),(0,a.mdx)("li",{parentName:"ol"},"Use the ",(0,a.mdx)("inlineCode",{parentName:"li"},"compose")," Env API to apply the compiler override transformer and add Babel as a transpiler in the environment")),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-typescript",metastring:"{3,5,10-12,15,17-18,22-23}","{3,5,10-12,15,17-18,22-23}":!0},"import { EnvsMain, EnvsAspect } from '@teambit/envs';\nimport { NodeAspect, NodeMain } from '@teambit/node';\nimport { BabelAspect, BabelMain } from '@teambit/babel';\n\nconst babelConfig = require('./babel/babel.config');\n\nexport class CustomNodeExtension {\n constructor(private node: NodeMain) {}\n\n static dependencies: any = [EnvsAspect, NodeAspect, BabelAspect];\n\n static async provider([envs, node, babel]: [EnvsMain, NodeMain, BabelMain]) {\n const babelCompiler = babel.createCompiler({\n babelTransformOptions: babelConfig,\n });\n\n const customNodeEnv = node.compose([\n node.overrideCompiler(babelCompiler),\n node.overrideCompilerTasks([babelCompiler.createTask()]),\n ]);\n\n envs.registerEnv(customNodeEnv);\n return new CustomNodeExtension(node);\n }\n}\n")),(0,a.mdx)("h3",null,"Transformers API docs"),(0,a.mdx)("p",null,"Use these APIs to customize the base Node environment default configuration with your extension. ",(0,a.mdx)("a",{parentName:"p",href:"#customizing-configuration"},"Read more here"),"."),(0,a.mdx)("h4",null,(0,a.mdx)("inlineCode",{parentName:"h4"},"overrideTsConfig(tsconfig: TsConfigSourceFile): EnvTransformer")),(0,a.mdx)("p",null,"Merges the environment's default TypeScript configuration with the contents of your ",(0,a.mdx)("a",{parentName:"p",href:"https://www.typescriptlang.org/handbook/tsconfig-json.html"},"typescript configuration file"),".\nThis config affects the transpilation carried out when rendering components on the local dev UI. To override the config used when building components, use ",(0,a.mdx)("inlineCode",{parentName:"p"},"overrideBuildTsConfig")," below."),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst tsconfig = require('./typescript/tsconfig.json');\nexport class NodeExtension {\n// ...\n\n static async provider([envs, node]: [EnvsMain, NodeMain]) {\n const newNodeEnv = node.compose([\n node.overrideTsConfig(tsconfig)\n ]);\n}\n// ...\n")),(0,a.mdx)("h4",null,(0,a.mdx)("inlineCode",{parentName:"h4"},"overrideBuildTsConfig(tsconfig: TsConfigSourceFile): EnvTransformer")),(0,a.mdx)("p",null,"Merges the environment's default TypeScript configuration with the contents of your ",(0,a.mdx)("a",{parentName:"p",href:"https://www.typescriptlang.org/handbook/tsconfig-json.html"},"typescript configuration file"),".\nThis config affects transpilation of component code during the build process, i.e. in preparation for packaging and exporting the component. To override the local ts config used when rendering components in the local UI, please use ",(0,a.mdx)("inlineCode",{parentName:"p"},"overrideTsConfig")," above."),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst tsconfig = require('./typescript/tsconfig.json');\nexport class NodeExtension {\n// ...\n\n static async provider([envs, node]: [EnvsMain, NodeMain]) {\n const newNodeEnv = node.compose([\n node.overrideTsConfig(tsconfig)\n ]);\n}\n// ...\n")),(0,a.mdx)("h4",null,(0,a.mdx)("inlineCode",{parentName:"h4"},"overridePreviewConfig(config: Configuration): EnvTransformer")),(0,a.mdx)("p",null,"Merges the Webpack configuration for the 'Preview' environment service, with the contents of your ",(0,a.mdx)("a",{parentName:"p",href:"https://webpack.js.org/configuration/"},"webpack configuration file"),".\nThis webpack configuration is used for building and rendering your components on the local dev server."),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst webpackConfig = require('./webpack/webpack.config');\nexport class NodeExtension {\n// ...\n static async provider([envs, node]: [EnvsMain, NodeMain]) {\n const newNodeEnv = node.compose([\n node.overridePreviewConfig(webpackConfig)\n ]);\n}\n// ...\n")),(0,a.mdx)("h4",null,(0,a.mdx)("inlineCode",{parentName:"h4"},"overrideDevServerConfig(config: Configuration): EnvTransformer")),(0,a.mdx)("p",null,"Merges the Webpack configuration for the 'DevServer' environment service, with the contents of your ",(0,a.mdx)("a",{parentName:"p",href:"https://webpack.js.org/configuration/"},"webpack configuration file"),".\nThis configuration is used for building and rendering the dev server UI (but not your components, which use the PreviewConfig)"),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst webpackConfig = require('./webpack/webpack.config');\nexport class NodeExtension {\n// ...\n static async provider([envs, node]: [EnvsMain, NodeMain]) {\n const newNodeEnv = node.compose([\n node.overrideDevServerConfig(webpackConfig)\n ]);\n}\n// ...\n")),(0,a.mdx)("h4",null,(0,a.mdx)("inlineCode",{parentName:"h4"},"overrideJestConfig(jestConfigPath: string): EnvTransformer")),(0,a.mdx)("p",null,"Merges the default configuration for the Jest test runner with the contents of your (",(0,a.mdx)("a",{parentName:"p",href:"https://jestjs.io/en/configuration"},"jest.config configuration file"),")."),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nexport class NodeExtension {\n// ...\n static async provider([envs, node]: [EnvsMain, NodeMain]) {\n const newNodeEnv = node.compose([\n node.overrideJestConfig(require.resolve('./jest/jest.config'))\n ]);\n}\n// ...\n")),(0,a.mdx)("h4",null,(0,a.mdx)("inlineCode",{parentName:"h4"},"overrideBuildPipe(tasks: BuildTask[]): EnvTransformer")),(0,a.mdx)("p",null,"This method receives an array of build tasks. It merges the provided tasks with the environment's default build pipeline (initiated either on a ",(0,a.mdx)("inlineCode",{parentName:"p"},"bit tag")," or ",(0,a.mdx)("inlineCode",{parentName:"p"},"bit build")," command)."),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\n// Import the task\nimport { CustomTask } from './custom.task';\nexport class CustomNode {\n // ...\n static async provider([envs, node]: [EnvsMain, NodeMain]) {\n // Get the environment's default build pipeline using the 'getBuildPipe' service handler\n const nodePipe = node.env.getBuildPipe();\n // Add the custom task to the end of the build tasks sequence.\n const tasks = [...nodePipe, new CustomTask()];\n const newNodeEnv = node.compose([node.overrideBuildPipe(tasks)]);\n // ...\n }\n}\n")),(0,a.mdx)("h4",null,(0,a.mdx)("inlineCode",{parentName:"h4"},"overrideDependencies(dependencyPolicy: DependenciesPolicy): EnvTransformer")),(0,a.mdx)("p",null,"This method receives a dependency-policy object and merges it with the environment's default dependency policy for components using this environment.\nEach key-value pair in a dependency-policy object signifies the package and the version to be used. Use also the ",(0,a.mdx)("inlineCode",{parentName:"p"},"-")," and ",(0,a.mdx)("inlineCode",{parentName:"p"},"+")," notation to signify a module should moved between dependency types (dev, peer or standard)."),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-js"},"// ...\nconst newDependencies = {\n devDependencies: {\n '@types/jest': '~26.0.9',\n },\n};\n\nexport class CustomNode {\n // ...\n static async provider([envs, node]: [EnvsMain, NodeMain]) {\n const newNodeEnv = node.compose([node.overrideDependencies(newDependencies)]);\n // ...\n }\n}\n")),(0,a.mdx)("blockquote",null,(0,a.mdx)("p",{parentName:"blockquote"},"The above example shows the 'Node' library being removed as a (runtime) dependency and added as a peer dependency.")),(0,a.mdx)("h4",null,(0,a.mdx)("inlineCode",{parentName:"h4"},"overridePackageJsonProps(props: PackageJsonProps): EnvTransformer")),(0,a.mdx)("p",null,"Merges the provide props with the default properties added to the ",(0,a.mdx)("inlineCode",{parentName:"p"},"package.json")," file of every package generated from components using this environment."),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst newPackageProps = {\n main: 'dist/{main}.js',\n types: '{main}.ts',\n};\n\nexport class CustomNode {\n // ...\n static async provider([envs, node]: [EnvsMain, NodeMain]) {\n const newNodeEnv = node.compose([node.overridePackageJsonProps(newPackageProps)]);\n // ...\n }\n}\n"))))}c.__bit_component=o,c.isMDXComponent=!0},8782:(e,n,t)=>{"use strict";var o={id:"teambit.harmony/node@0.0.658",homepage:"https://bit.dev/teambit/harmony/node",exported:!0},a=t(8244);function r(){const e=a(t(3804));return r=function(){return e},e}Object.defineProperty(n,"__esModule",{value:!0}),n.Logo=void 0,r.__bit_component=o;const i=()=>r().default.createElement("div",{style:{height:"100%",display:"flex",justifyContent:"center"}},r().default.createElement("img",{style:{width:70},src:"https://static.bit.dev/brands/logo-nodejs.svg"}));i.__bit_component=o,n.Logo=i},5057:e=>{"use strict";e.exports=MdxJsReact},3804:e=>{"use strict";e.exports=React},8459:e=>{"use strict";e.exports=TeambitMdxUiMdxScopeContext}},n={};function t(o){var a=n[o];if(void 0!==a)return a.exports;var r=n[o]={exports:{}};return e[o](r,r.exports,t),r.exports}t.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},t.d=(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),t.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{"use strict";t.r(o),t.d(o,{compositions:()=>e,overview:()=>n});const e=[t(8782)],n=[t(3854)]})(),o})()}));
1
+ !function(e,n){"object"===typeof exports&&"object"===typeof module?module.exports=n():"function"===typeof define&&define.amd?define([],n):"object"===typeof exports?exports["teambit.harmony/node-preview"]=n():e["teambit.harmony/node-preview"]=n()}(self,(function(){return(()=>{var e={8244:e=>{e.exports=function(e){return e&&e.__esModule?e:{default:e}}},6409:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>p});t(3804);var o=t(5057),a=t(8459),r=t(688),i=["components"];function d(){return d=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},d.apply(this,arguments)}function s(e,n){if(null==e)return{};var t,o,a=function(e,n){if(null==e)return{};var t,o,a={},r=Object.keys(e);for(o=0;o<r.length;o++)t=r[o],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o<r.length;o++)t=r[o],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var m={};function p(e){var n=e.components,t=s(e,i);return(0,o.mdx)("wrapper",d({},m,t,{components:n,mdxType:"MDXLayout"}),(0,o.mdx)(a.MDXScopeProvider,{components:{Node:r.N},mdxType:"MDXScopeProvider"},(0,o.mdx)(r.N,{mdxType:"Node"})))}p.isMDXComponent=!0},688:(e,n,t)=>{"use strict";Object.defineProperty(n,"N",{enumerable:!0,get:function(){return o.default}});var o=a(t(8793));function a(e){return e&&e.__esModule?e:{default:e}}a.__bit_component={id:"teambit.harmony/aspect-docs/node@0.0.132",homepage:"https://bit.dev/teambit/harmony/aspect-docs/node",exported:!0}},8793:(e,n,t)=>{"use strict";var o={id:"teambit.harmony/aspect-docs/node@0.0.132",homepage:"https://bit.dev/teambit/harmony/aspect-docs/node",exported:!0};Object.defineProperty(n,"__esModule",{value:!0}),n.default=c;d(t(3804));var a=t(5057),r=t(8459),i=["components"];function d(e){return e&&e.__esModule?e:{default:e}}function s(){return s=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},s.apply(this,arguments)}function m(e,n){if(null==e)return{};var t,o,a=p(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o<r.length;o++)t=r[o],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}function p(e,n){if(null==e)return{};var t,o,a={},r=Object.keys(e);for(o=0;o<r.length;o++)t=r[o],n.indexOf(t)>=0||(a[t]=e[t]);return a}d.__bit_component=o,s.__bit_component=o,m.__bit_component=o,p.__bit_component=o;var l={};function c(e){var n=e.components,t=m(e,i);return(0,a.mdx)("wrapper",s({},l,t,{components:n,mdxType:"MDXLayout"}),(0,a.mdx)(r.MDXScopeProvider,{components:{},mdxType:"MDXScopeProvider"},(0,a.mdx)("p",null,"The built-in ",(0,a.mdx)("a",{parentName:"p",href:"https://bit.dev/teambit/harmony/node"},"Node Component Development Environment")," is a concrete composition of the ",(0,a.mdx)("a",{parentName:"p",href:"https://bit.dev/teambit/envs/envs"},"Env Aspect"),". Use it when getting started with Node components with Bit and later as a base for any future customization of your Node-based workflow."),(0,a.mdx)("p",null,"Node environment is composed out of the base ",(0,a.mdx)("a",{parentName:"p",href:"https://bit.dev/teambit/react/react"},"React Environment")," with some specific overrides for dependency management."),(0,a.mdx)("h2",null,"Use Node environment"),(0,a.mdx)("p",null,"To use this environment for your components, add it to any of the ",(0,a.mdx)("inlineCode",{parentName:"p"},"variants")," in your ",(0,a.mdx)("inlineCode",{parentName:"p"},"workspace.jsonc")," file as follows:"),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="workspace.jsonc"',title:'"workspace.jsonc"'},'{\n "teambit.workspace/variants": {\n "some/path": {\n "teambit.harmony/node": {}\n }\n }\n}\n')),(0,a.mdx)("h2",null,"Create Node components"),(0,a.mdx)("p",null,"Node implements several component templates:"),(0,a.mdx)("ul",null,(0,a.mdx)("li",{parentName:"ul"},(0,a.mdx)("inlineCode",{parentName:"li"},"node-env")," boilerplate for customizing configuration.")),(0,a.mdx)("p",null,"Use any of these templates with the ",(0,a.mdx)("inlineCode",{parentName:"p"},"bit create")," command:"),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-sh"},"bit create <template name> [components...]\n")),(0,a.mdx)("h2",null,"Default Configuration and Services"),(0,a.mdx)("p",null,"Node, like all over Environments must implement a set of Service Handlers. For each service, Node compose a different tool and config by default."),(0,a.mdx)("blockquote",null,(0,a.mdx)("p",{parentName:"blockquote"},"Node is a composition of the React environment with some specific modifications. Most of the links here direct to the actual configs in React environment.")),(0,a.mdx)("table",null,(0,a.mdx)("thead",{parentName:"table"},(0,a.mdx)("tr",{parentName:"thead"},(0,a.mdx)("th",{parentName:"tr",align:null},"Service"),(0,a.mdx)("th",{parentName:"tr",align:null},"Aspect"),(0,a.mdx)("th",{parentName:"tr",align:null},"Base Configuration"))),(0,a.mdx)("tbody",{parentName:"table"},(0,a.mdx)("tr",{parentName:"tbody"},(0,a.mdx)("td",{parentName:"tr",align:null},"Compilation"),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/typescript/typescript"},"TypeScript")),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/typescript/tsconfig.json"},"tsconfig.json"))),(0,a.mdx)("tr",{parentName:"tbody"},(0,a.mdx)("td",{parentName:"tr",align:null},"Testing"),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("strong",{parentName:"td"},"Jest")),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/jest/jest.config.js"},"jest.config.js"))),(0,a.mdx)("tr",{parentName:"tbody"},(0,a.mdx)("td",{parentName:"tr",align:null},"Linting"),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("strong",{parentName:"td"},"ESLint")),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/eslint/eslintrc.ts"},"eslintrc.ts"))),(0,a.mdx)("tr",{parentName:"tbody"},(0,a.mdx)("td",{parentName:"tr",align:null},"DevServer"),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("strong",{parentName:"td"},"Webpack")),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/webpack/webpack.config.preview.dev.ts"},"webpack.config.preview.dev.ts"))),(0,a.mdx)("tr",{parentName:"tbody"},(0,a.mdx)("td",{parentName:"tr",align:null},"Preview (simulation)"),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("strong",{parentName:"td"},"Webpack")),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/webpack/webpack.config.preview.ts"},"webpack.config.preview.ts"))),(0,a.mdx)("tr",{parentName:"tbody"},(0,a.mdx)("td",{parentName:"tr",align:null},"Package"),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("strong",{parentName:"td"},"PKG")),(0,a.mdx)("td",{parentName:"tr",align:null},"Base ",(0,a.mdx)("inlineCode",{parentName:"td"},"package.json")," props from ",(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/typescript/typescript/~code/typescript.main.runtime.ts"},"TypeScript Aspect"))),(0,a.mdx)("tr",{parentName:"tbody"},(0,a.mdx)("td",{parentName:"tr",align:null},"Bundling"),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("strong",{parentName:"td"},"Webpack")),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/webpack/webpack.config.preview.ts"},"webpack.config.preview.ts"))),(0,a.mdx)("tr",{parentName:"tbody"},(0,a.mdx)("td",{parentName:"tr",align:null},"Documentation"),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("em",{parentName:"td"},"Core implementation")),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/docs/index.tsx"},"Docs template"))),(0,a.mdx)("tr",{parentName:"tbody"},(0,a.mdx)("td",{parentName:"tr",align:null},"Build pipeline"),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/pipelines/builder"},"Builder")),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/node.env.ts"},"Build pipeline"))),(0,a.mdx)("tr",{parentName:"tbody"},(0,a.mdx)("td",{parentName:"tr",align:null},"Dependencies"),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("em",{parentName:"td"},"Core implementation")),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/harmony/node/~code/node.env.ts"},"Env-dependencies"))),(0,a.mdx)("tr",{parentName:"tbody"},(0,a.mdx)("td",{parentName:"tr",align:null},"Component Generator"),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/generator/generator"},"Generator")),(0,a.mdx)("td",{parentName:"tr",align:null},(0,a.mdx)("a",{parentName:"td",href:"https://bit.dev/harmony/node/~code/templates/node-component.ts"},"example template"))))),(0,a.mdx)("h2",null,"Customize environment"),(0,a.mdx)("p",null,"All environments are extendible. You can take any pre-existing environment, and create a component to extend it. That component can then use APIs to:"),(0,a.mdx)("ul",null,(0,a.mdx)("li",{parentName:"ul"},"Override default configurations."),(0,a.mdx)("li",{parentName:"ul"},"Replace composed tools with others (for example - use Babel instead of TypeScript)."),(0,a.mdx)("li",{parentName:"ul"},"Add new services and capabilities.")),(0,a.mdx)("h3",null,"Create an extension"),(0,a.mdx)("p",null,"The first step is to create a component that extends Node. Use the ",(0,a.mdx)("inlineCode",{parentName:"p"},"node-env")," template from Node env."),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-sh"},"bit create node-env extensions/custom-node\n")),(0,a.mdx)("p",null,"As with any component, environments must themselves have an environment which compiles, builds, transpiles, etc, them. Bit has a special environment that knows how to create other environments - ",(0,a.mdx)("inlineCode",{parentName:"p"},"teambit.harmony/aspect"),". So for any component that is meant to be a Bit environment, you must set ",(0,a.mdx)("inlineCode",{parentName:"p"},"teambit.harmony/aspect")," as the environment for that component."),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="add variant for the extension and set the aspect env"',title:'"add',variant:!0,for:!0,the:!0,extension:!0,and:!0,set:!0,aspect:!0,'env"':!0},'{\n //...\n "teambit.workspace/variants": {\n //...\n "extensions/custom-node": {\n "teambit.harmony/aspect": {}\n }\n //...\n }\n}\n')),(0,a.mdx)("p",null,"Validate the above by running ",(0,a.mdx)("inlineCode",{parentName:"p"},"bit env")," and see that the extension-component has ",(0,a.mdx)("inlineCode",{parentName:"p"},"teambit.harmony/aspect")," set as an environment."),(0,a.mdx)("p",null,"Now that you have a basic customized extension to start from, you can go ahead and configure it for your components in ",(0,a.mdx)("inlineCode",{parentName:"p"},"workspace.json"),":"),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="edit variants and set the new env"',title:'"edit',variants:!0,and:!0,set:!0,the:!0,new:!0,'env"':!0},'{\n //...\n "teambit.workspace/variants": {\n //...\n "[some]/[variant]": {\n "[yourscope]/extensions/custom-node": {}\n }\n //...\n }\n}\n')),(0,a.mdx)("h3",null,"Customize configuration"),(0,a.mdx)("p",null,"Node implements a set of APIs you can use to merge your preferred configuration with its defaults. These APIs are called ",(0,a.mdx)("strong",{parentName:"p"},"transformers")," and they all start with the ",(0,a.mdx)("inlineCode",{parentName:"p"},"override")," pre-fix. Find ",(0,a.mdx)("a",{parentName:"p",href:"#transformers-api-docs"},"Available transformers here"),".\nIn case of a conflict, your config will override the default."),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-typescript",metastring:'{4,14} title="Customized TypeScript configuration"',"{4,14}":!0,title:'"Customized',TypeScript:!0,'configuration"':!0},"import { EnvsMain, EnvsAspect } from '@teambit/envs';\nimport { NodeAspect, NodeMain } from '@teambit/node';\n\nconst tsconfig = require('./typescript/tsconfig.json');\n\nexport class CustomNodeExtension {\n constructor(private node: NodeMain) {}\n\n static dependencies: any = [EnvsAspect, NodeAspect];\n\n static async provider([envs, node]: [EnvsMain, NodeMain]) {\n const customNodeEnv = node.compose([node.overrideTsConfig(tsconfig)]);\n\n envs.registerEnv(customNodeEnv);\n\n return new CustomNodeExtension(node);\n }\n}\n")),(0,a.mdx)("blockquote",null,(0,a.mdx)("p",{parentName:"blockquote"},"To override any specific configuration it's recommended to create a separate config file with your customized configuration and import it into the main ",(0,a.mdx)("inlineCode",{parentName:"p"},".extension.ts")," file where you can supply it to the relevant ",(0,a.mdx)("strong",{parentName:"p"},"transformers"),". See the tsconfig example in the above snippet.")),(0,a.mdx)("h3",null,"Composing tools and services"),(0,a.mdx)("p",null,"Environments use Environment Services by implementing a special class of methods called Service Handlers.\nThe supplied transformers allow overriding of these services - for instance the ",(0,a.mdx)("inlineCode",{parentName:"p"},"overrideCompiler")," transformer allows overriding the environment's ",(0,a.mdx)("inlineCode",{parentName:"p"},"getCompiler()")," method."),(0,a.mdx)("p",null,"The below example uses the ",(0,a.mdx)("inlineCode",{parentName:"p"},"overrideCompiler")," transformer to override the ",(0,a.mdx)("inlineCode",{parentName:"p"},"getCompiler()")," Service Handler to change the compilation service."),(0,a.mdx)("ol",null,(0,a.mdx)("li",{parentName:"ol"},"Add a Babel config file to your custom environment and import/require it in your ",(0,a.mdx)("inlineCode",{parentName:"li"},".extension")," file"),(0,a.mdx)("li",{parentName:"ol"},"Create a new Babel compiler using the Babel aspect, and initialize it with the above babelConfig"),(0,a.mdx)("li",{parentName:"ol"},"Use the ",(0,a.mdx)("inlineCode",{parentName:"li"},"compose")," Env API to apply the compiler override transformer and add Babel as a transpiler in the environment")),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-typescript",metastring:"{3,5,10-12,15,17-18,22-23}","{3,5,10-12,15,17-18,22-23}":!0},"import { EnvsMain, EnvsAspect } from '@teambit/envs';\nimport { NodeAspect, NodeMain } from '@teambit/node';\nimport { BabelAspect, BabelMain } from '@teambit/babel';\n\nconst babelConfig = require('./babel/babel.config');\n\nexport class CustomNodeExtension {\n constructor(private node: NodeMain) {}\n\n static dependencies: any = [EnvsAspect, NodeAspect, BabelAspect];\n\n static async provider([envs, node, babel]: [EnvsMain, NodeMain, BabelMain]) {\n const babelCompiler = babel.createCompiler({\n babelTransformOptions: babelConfig,\n });\n\n const customNodeEnv = node.compose([\n node.overrideCompiler(babelCompiler),\n node.overrideCompilerTasks([babelCompiler.createTask()]),\n ]);\n\n envs.registerEnv(customNodeEnv);\n return new CustomNodeExtension(node);\n }\n}\n")),(0,a.mdx)("h3",null,"Transformers API docs"),(0,a.mdx)("p",null,"Use these APIs to customize the base Node environment default configuration with your extension. ",(0,a.mdx)("a",{parentName:"p",href:"#customizing-configuration"},"Read more here"),"."),(0,a.mdx)("h4",null,(0,a.mdx)("inlineCode",{parentName:"h4"},"overrideTsConfig(tsconfig: TsConfigSourceFile): EnvTransformer")),(0,a.mdx)("p",null,"Merges the environment's default TypeScript configuration with the contents of your ",(0,a.mdx)("a",{parentName:"p",href:"https://www.typescriptlang.org/handbook/tsconfig-json.html"},"typescript configuration file"),".\nThis config affects the transpilation carried out when rendering components on the local dev UI. To override the config used when building components, use ",(0,a.mdx)("inlineCode",{parentName:"p"},"overrideBuildTsConfig")," below."),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst tsconfig = require('./typescript/tsconfig.json');\nexport class NodeExtension {\n// ...\n\n static async provider([envs, node]: [EnvsMain, NodeMain]) {\n const newNodeEnv = node.compose([\n node.overrideTsConfig(tsconfig)\n ]);\n}\n// ...\n")),(0,a.mdx)("h4",null,(0,a.mdx)("inlineCode",{parentName:"h4"},"overrideBuildTsConfig(tsconfig: TsConfigSourceFile): EnvTransformer")),(0,a.mdx)("p",null,"Merges the environment's default TypeScript configuration with the contents of your ",(0,a.mdx)("a",{parentName:"p",href:"https://www.typescriptlang.org/handbook/tsconfig-json.html"},"typescript configuration file"),".\nThis config affects transpilation of component code during the build process, i.e. in preparation for packaging and exporting the component. To override the local ts config used when rendering components in the local UI, please use ",(0,a.mdx)("inlineCode",{parentName:"p"},"overrideTsConfig")," above."),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst tsconfig = require('./typescript/tsconfig.json');\nexport class NodeExtension {\n// ...\n\n static async provider([envs, node]: [EnvsMain, NodeMain]) {\n const newNodeEnv = node.compose([\n node.overrideTsConfig(tsconfig)\n ]);\n}\n// ...\n")),(0,a.mdx)("h4",null,(0,a.mdx)("inlineCode",{parentName:"h4"},"overridePreviewConfig(config: Configuration): EnvTransformer")),(0,a.mdx)("p",null,"Merges the Webpack configuration for the 'Preview' environment service, with the contents of your ",(0,a.mdx)("a",{parentName:"p",href:"https://webpack.js.org/configuration/"},"webpack configuration file"),".\nThis webpack configuration is used for building and rendering your components on the local dev server."),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst webpackConfig = require('./webpack/webpack.config');\nexport class NodeExtension {\n// ...\n static async provider([envs, node]: [EnvsMain, NodeMain]) {\n const newNodeEnv = node.compose([\n node.overridePreviewConfig(webpackConfig)\n ]);\n}\n// ...\n")),(0,a.mdx)("h4",null,(0,a.mdx)("inlineCode",{parentName:"h4"},"overrideDevServerConfig(config: Configuration): EnvTransformer")),(0,a.mdx)("p",null,"Merges the Webpack configuration for the 'DevServer' environment service, with the contents of your ",(0,a.mdx)("a",{parentName:"p",href:"https://webpack.js.org/configuration/"},"webpack configuration file"),".\nThis configuration is used for building and rendering the dev server UI (but not your components, which use the PreviewConfig)"),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst webpackConfig = require('./webpack/webpack.config');\nexport class NodeExtension {\n// ...\n static async provider([envs, node]: [EnvsMain, NodeMain]) {\n const newNodeEnv = node.compose([\n node.overrideDevServerConfig(webpackConfig)\n ]);\n}\n// ...\n")),(0,a.mdx)("h4",null,(0,a.mdx)("inlineCode",{parentName:"h4"},"overrideJestConfig(jestConfigPath: string): EnvTransformer")),(0,a.mdx)("p",null,"Merges the default configuration for the Jest test runner with the contents of your (",(0,a.mdx)("a",{parentName:"p",href:"https://jestjs.io/en/configuration"},"jest.config configuration file"),")."),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nexport class NodeExtension {\n// ...\n static async provider([envs, node]: [EnvsMain, NodeMain]) {\n const newNodeEnv = node.compose([\n node.overrideJestConfig(require.resolve('./jest/jest.config'))\n ]);\n}\n// ...\n")),(0,a.mdx)("h4",null,(0,a.mdx)("inlineCode",{parentName:"h4"},"overrideBuildPipe(tasks: BuildTask[]): EnvTransformer")),(0,a.mdx)("p",null,"This method receives an array of build tasks. It merges the provided tasks with the environment's default build pipeline (initiated either on a ",(0,a.mdx)("inlineCode",{parentName:"p"},"bit tag")," or ",(0,a.mdx)("inlineCode",{parentName:"p"},"bit build")," command)."),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\n// Import the task\nimport { CustomTask } from './custom.task';\nexport class CustomNode {\n // ...\n static async provider([envs, node]: [EnvsMain, NodeMain]) {\n // Get the environment's default build pipeline using the 'getBuildPipe' service handler\n const nodePipe = node.env.getBuildPipe();\n // Add the custom task to the end of the build tasks sequence.\n const tasks = [...nodePipe, new CustomTask()];\n const newNodeEnv = node.compose([node.overrideBuildPipe(tasks)]);\n // ...\n }\n}\n")),(0,a.mdx)("h4",null,(0,a.mdx)("inlineCode",{parentName:"h4"},"overrideDependencies(dependencyPolicy: DependenciesPolicy): EnvTransformer")),(0,a.mdx)("p",null,"This method receives a dependency-policy object and merges it with the environment's default dependency policy for components using this environment.\nEach key-value pair in a dependency-policy object signifies the package and the version to be used. Use also the ",(0,a.mdx)("inlineCode",{parentName:"p"},"-")," and ",(0,a.mdx)("inlineCode",{parentName:"p"},"+")," notation to signify a module should moved between dependency types (dev, peer or standard)."),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-js"},"// ...\nconst newDependencies = {\n devDependencies: {\n '@types/jest': '~26.0.9',\n },\n};\n\nexport class CustomNode {\n // ...\n static async provider([envs, node]: [EnvsMain, NodeMain]) {\n const newNodeEnv = node.compose([node.overrideDependencies(newDependencies)]);\n // ...\n }\n}\n")),(0,a.mdx)("blockquote",null,(0,a.mdx)("p",{parentName:"blockquote"},"The above example shows the 'Node' library being removed as a (runtime) dependency and added as a peer dependency.")),(0,a.mdx)("h4",null,(0,a.mdx)("inlineCode",{parentName:"h4"},"overridePackageJsonProps(props: PackageJsonProps): EnvTransformer")),(0,a.mdx)("p",null,"Merges the provide props with the default properties added to the ",(0,a.mdx)("inlineCode",{parentName:"p"},"package.json")," file of every package generated from components using this environment."),(0,a.mdx)("pre",null,(0,a.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst newPackageProps = {\n main: 'dist/{main}.js',\n types: '{main}.ts',\n};\n\nexport class CustomNode {\n // ...\n static async provider([envs, node]: [EnvsMain, NodeMain]) {\n const newNodeEnv = node.compose([node.overridePackageJsonProps(newPackageProps)]);\n // ...\n }\n}\n"))))}c.__bit_component=o,c.isMDXComponent=!0},6878:(e,n,t)=>{"use strict";var o={id:"teambit.harmony/node@0.0.659",homepage:"https://bit.dev/teambit/harmony/node",exported:!0},a=t(8244);function r(){const e=a(t(3804));return r=function(){return e},e}Object.defineProperty(n,"__esModule",{value:!0}),n.Logo=void 0,r.__bit_component=o;const i=()=>r().default.createElement("div",{style:{height:"100%",display:"flex",justifyContent:"center"}},r().default.createElement("img",{style:{width:70},src:"https://static.bit.dev/brands/logo-nodejs.svg"}));i.__bit_component=o,n.Logo=i},5057:e=>{"use strict";e.exports=MdxJsReact},3804:e=>{"use strict";e.exports=React},8459:e=>{"use strict";e.exports=TeambitMdxUiMdxScopeContext}},n={};function t(o){var a=n[o];if(void 0!==a)return a.exports;var r=n[o]={exports:{}};return e[o](r,r.exports,t),r.exports}t.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},t.d=(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),t.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{"use strict";t.r(o),t.d(o,{compositions:()=>e,overview:()=>n});const e=[t(6878)],n=[t(6409)]})(),o})()}));