@teambit/component.instructions.exporting-components/static/css/teambit.component/instructions/exporting-components-preview.b67bf619.css

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}[hidden]{display:none}body{line-height:1}menu,ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}.size-definition_headingFontSize__3Nmoe{--h-xxs:18px;--h-xs:26px;--h-sm:36px;--h-md:40px;--h-lg:50px;--h-xl:60px;--h-xxl:80px}.size-definition_textFontSize__3Nhsl{--p-xxs:12px;--p-xs:14px;--p-sm:15px;--p-md:16px;--p-lg:18px;--p-xl:20px;--p-xxl:24px}.shadow-definition_shadowTheme__20Qey{--elevation-none:none;--shadow-raised-low:0 -1px 1px 0 rgba(0,0,0,.09),0 2px 2px 0 rgba(0,0,0,.23);--shadow-faint:0 2px 10px 0 rgba(0,0,0,.1);--shadow-resting:0px 0px 4px rgba(0,0,0,.08),0px 2px 4px rgba(0,0,0,.08);--shadow-hover-low:0 2px 8px 0 rgba(0,0,0,.2);--shadow-hover-medium:0 0 20px 0 rgba(0,0,0,.12),0 2px 6px 0 rgba(0,0,0,.24);--shadow-hover-high:0px 11px 29px 0px rgba(0,0,0,.23)}.color-definition_primaryPalette__oxCkh{--text-highlight:#2b2b2b;--text-color:#414141;--text-muted:#6c707c;--steel-color:#878c9a;--base-color:#6c5ce7;--base-highlight:#5d4aec;--border-color:#ededed;--bg-color:#fff;--separator-color:#babec9;--muted-color:#eceaff;--muted-highlight:#c9c3f6;--error-color:#e62e5c;--error-highlight:#d31948;--bg-error:#fdeff2;--bg-bedrock:#fff;--bg-base:#fff;--bg-layer:#fff;--bg-crust:#fff;--bg-topping:#fff;--bg-topping-highlight:#f6f6f6;--bg-dent:#f6f6f6;--primary-button-width:199px;--primary-button-height:46px;--cta-button-text:#fff;--primary-label-bg:#6c5ce7;--primary-label-text:#fff;--primary-label-width:50px;color:#414141}.brand-definition_brands__3AaCV{--github-bg:#2b2b2b;--brand-text:#fff;--slack-bg:#4a154b;--twitter-bg:#1da1f2}.heading-margin-definition_headingMargins__3S4jN{--h1Margin:20px;--h2Margin:20px;--h3Margin:20px;--h4Margin:8px;--h5Margin:8px;--h6Margin:8px;--h7Margin:8px}@font-face{font-family:"CircularPro";src:url(https://static.bit.dev/fonts/CircularPro-Book.otf)}@font-face{font-family:"CircularPro";font-weight:700;src:url(https://static.bit.dev/fonts/CircularPro-Bold.otf)}@font-face{font-family:"CircularPro";font-weight:800;src:url(https://static.bit.dev/fonts/CircularPro-Black.otf)}@font-face{font-family:"CircularPro";font-style:italic;src:url(https://static.bit.dev/fonts/CircularPro-BookItalic.otf)}@font-face{font-family:"CircularPro";font-style:italic;font-weight:700;src:url(https://static.bit.dev/fonts/CircularPro-BoldItalic.otf)}@font-face{font-family:"CircularPro";font-style:italic;font-weight:800;src:url(https://static.bit.dev/fonts/CircularPro-BlackItalic.otf)}.book-font_bookFont__1rt8m{font-family:"CircularPro","Gill Sans","Gill Sans MT","Helvetica Neue",Helvetica,Arial,sans-serif}.texts_defaults__3DLIf{line-height:1.23}.sizes_heading__G9do-{--h-xxs:16px;--h-xs:18px;--h-sm:24px;--h-md:26px;--h-lg:36px;--h-xl:40px;--h-xxl:50px}.global_overrides__I__w5{line-height:normal}.block-quote_blockQuote__3w6s1{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__3w6s1>:last-child{margin-bottom:0}.bold_bold__1J7sS{font-weight:700}.external-link_link__1u73C{text-decoration:none}.external-link_link__1u73C:hover{text-decoration:underline}.heading-sizes_xxs__32b1H{font-size:16px;font-size:var(--bit-h-xxs,16px)}.heading-sizes_xs__1k-cG{font-size:18px;font-size:var(--bit-h-xs,18px)}.heading-sizes_sm__z1yLg{font-size:24px;font-size:var(--bit-h-sm,24px)}.heading-sizes_md__oyP72{font-size:26px;font-size:var(--bit-h-md,26px)}.heading-sizes_lg__38Lhr{font-size:36px;font-size:var(--bit-h-lg,36px)}.heading-sizes_xl__1fSKu{font-size:40px;font-size:var(--bit-h-xl,40px)}.heading-sizes_xxl__1Yn4P{font-size:50px;font-size:var(--bit-h-xxl,50px)}.heading_h1__1Yzgp,.heading_h2__1T48I,.heading_h3__vbFg2,.heading_h4__7SN_L,.heading_h5__1SXlZ,.heading_h6__1KmRm{font-weight:700;margin:0}.heading_h1__1Yzgp{margin-bottom:20px}.anchor_anchor__2x79K{align-items:center;display:flex;text-decoration:none}.anchor_anchorIcon__3cjUb{color:var(--bit-text-color-light);font-size:18px}.linked-heading_linkedHeading__1eyiN{align-items:center;display:flex;margin-bottom:16px;width:-moz-fit-content;width:fit-content}.linked-heading_linkedHeading__1eyiN:hover .linked-heading_anchor__4gXNk{opacity:1;visibility:inherit}.linked-heading_heading__1oY9C{margin-right:8px}.linked-heading_anchor__4gXNk{opacity:0;transform:translateY(4px);transition:visibility .3s,opacity .3s ease-in-out;visibility:hidden}.create-heading_mdxLinkedHeading__6PnCf{justify-content:start;margin-top:40px;width:100%}.create-heading_mdxLinkedHeading__6PnCf[align=center]{justify-content:center}.create-heading_mdxLinkedHeading__6PnCf[align=left]{justify-content:start}.create-heading_mdxLinkedHeading__6PnCf[align=right]{justify-content:flex-end}.create-heading_mdxLinkedHeading__6PnCf.create-heading_mainHeadingStyles__3aVzd{border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,#ededed);padding-bottom:8px}.create-heading_mdxLinkedHeading__6PnCf:first-child{padding-top:0}.image_img__QbYqi{max-width:100%}.image_img__QbYqi:not(:last-child){margin-bottom:16px}.inline-code_inlineCode__1O8j7{background-color:hsla(0,0%,65%,.2);border-radius:.25em;font-family:monospace,sans-serif;font-size:.85em;padding:.2em .4em}.inline-code_highlight__1RZ7w{background-color:#eceaff;background-color:var(--bit-accent-bg,#eceaff)}.italic_italic__LmmgS{font-style:italic}.ol_ol__1Qcsp{list-style:revert;list-style-position:outside;margin:0 0 16px;padding:0 0 0 32px}.ol_ol__1Qcsp ol,.ol_ol__1Qcsp ul{padding-left:18px}.ol_ol__1Qcsp>li>p{margin-bottom:0}.text-sizes_xxs__3oUR-{font-size:12px;font-size:var(--bit-p-xxs,12px)}.text-sizes_xs__yDw5j{font-size:14px;font-size:var(--bit-p-xs,14px)}.text-sizes_sm__1U61i{font-size:15px;font-size:var(--bit-p-sm,15px)}.text-sizes_md__20qNj{font-size:16px;font-size:var(--bit-p-md,16px)}.text-sizes_lg__SNBv3{font-size:18px;font-size:var(--bit-p-lg,18px)}.text-sizes_xl__3rcOe{font-size:20px;font-size:var(--bit-p-xl,20px)}.text-sizes_xxl__10N2N{font-size:24px;font-size:var(--bit-p-xxl,24px)}.paragraph_paragraph__1MuoB{margin:0 0 1em}.separator_separator__3rQ5d{border:none;border-bottom:1px solid var(--bit-border-color-lightest);border-radius:5px;margin-bottom:40px;margin-top:30px}.copied-message_copiedMessage__1Se0J{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__GQNk1{opacity:1;visibility:visible}.code-snippet_snippetWrapper__2HqWe{position:relative}.code-snippet_snippetWrapper__2HqWe:hover .code-snippet_copyIcon__CMocf{opacity:1}.code-snippet_snippetWrapper__2HqWe .code-snippet_codeSnippet__oFNJY{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__2HqWe .code-snippet_copyIcon__CMocf{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__2HqWe code{font-family:inherit!important}.code-snippet_copy__spwrB{align-items:center;display:flex;position:absolute;right:6px;top:6px}.pane_pane__Q_2tP{transition:width .3s,height .3s}[data-split-layout*=first]>.pane_pane__Q_2tP,[data-split-layout*=last]>.pane_pane__Q_2tP{max-width:none;min-width:0;min-width:auto}.splitter_splitter__1wjwJ{-webkit-user-select:none;-moz-user-select:none;user-select:none}[data-split-layout^=row] .splitter_splitter__1wjwJ{cursor:col-resize;height:100%}[data-split-layout^=column] .splitter_splitter__1wjwJ{cursor:row-resize;width:100%}body{padding:0}.split-pane_splitPane__ldvE9{display:flex;flex-direction:column}.split-pane_splitPane__ldvE9.split-pane_isDragging__Vtp2y{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.split-pane_splitPane__ldvE9[data-is-dragging=true]>*{transition:none}.split-pane_splitPane__ldvE9[data-split-layout^=row]{flex-direction:row}.split-pane_splitPane__ldvE9[data-split-layout^="row reverse"]{flex-direction:row-reverse}.split-pane_splitPane__ldvE9[data-split-layout^=column]{flex-direction:column}.split-pane_splitPane__ldvE9[data-split-layout^="column reverse"]{flex-direction:column-reverse}.splitter_hoverSplitter__NF4Sb{background:#ededed;background:var(--bit-border-color-lightest,#ededed);flex:none;min-height:1px;min-width:1px;position:relative}.splitter_highlighter__111qc{height:100%;width:100%}.splitter_highlighter__111qc,.splitter_highlighter__111qc:after,.splitter_highlighter__111qc:before{transition:background-color .3s ease-in-out,box-shadow .3s ease-in-out}.splitter_highlighter__111qc:hover,.splitter_highlighter__111qc:hover:after,.splitter_highlighter__111qc:hover:before,[data-is-dragging=true]>.splitter_hoverSplitter__NF4Sb>.splitter_highlighter__111qc,[data-is-dragging=true]>.splitter_hoverSplitter__NF4Sb>.splitter_highlighter__111qc:after,[data-is-dragging=true]>.splitter_hoverSplitter__NF4Sb>.splitter_highlighter__111qc:before{background:#6c5ce7;background:var(--bit-accent-color,#6c5ce7);transition-delay:.18s}.splitter_highlighter__111qc:after,.splitter_highlighter__111qc:before{background:transparent;content:" ";display:block;position:absolute}[data-split-layout^=row]>.splitter_hoverSplitter__NF4Sb>.splitter_highlighter__111qc:after,[data-split-layout^=row]>.splitter_hoverSplitter__NF4Sb>.splitter_highlighter__111qc:before{height:100%;width:200%}[data-split-layout^=row]>.splitter_hoverSplitter__NF4Sb>.splitter_highlighter__111qc:before{left:-200%}[data-split-layout^=row]>.splitter_hoverSplitter__NF4Sb>.splitter_highlighter__111qc:after{right:-200%}[data-split-layout^=column]>.splitter_hoverSplitter__NF4Sb>.splitter_highlighter__111qc:after,[data-split-layout^=column]>.splitter_hoverSplitter__NF4Sb>.splitter_highlighter__111qc:before{height:200%;width:100%}[data-split-layout^=column]>.splitter_hoverSplitter__NF4Sb>.splitter_highlighter__111qc:before{top:-200%}[data-split-layout^=column]>.splitter_hoverSplitter__NF4Sb>.splitter_highlighter__111qc:after{bottom:-200%}.error_error__3XNn6{color:#e62e5c;color:var(--bit-error-color,#e62e5c)}.react-playground_column__2RleA{height:450px}.react-playground_column__2RleA .react-playground_codePane__1FM7k,.react-playground_column__2RleA .react-playground_previewPane__gBZmQ{max-height:90%;min-height:10%;width:100%}.react-playground_column__2RleA .react-playground_error__qsUzg,.react-playground_column__2RleA .react-playground_previewPane__gBZmQ{border-bottom:none;border-radius:6px 6px 0 0}.react-playground_row__2DVe2{height:100%;max-height:450px}.react-playground_row__2DVe2 .react-playground_codePane__1FM7k,.react-playground_row__2DVe2 .react-playground_previewPane__gBZmQ{height:100%;max-width:90%;min-width:10%}.react-playground_row__2DVe2 .react-playground_error__qsUzg,.react-playground_row__2DVe2 .react-playground_previewPane__gBZmQ{border-left:none;border-radius:0 6px 6px 0}.react-playground_error__qsUzg{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__1FM7k{background-color:#282c34;overflow:auto}.react-playground_editor__13PTS{font-family:Roboto mono!important;font-size:11px;max-width:none!important;min-width:100%;width:-moz-fit-content;width:fit-content}.react-playground_editor__13PTS>textarea{outline:none;white-space:pre!important}.react-playground_editor__13PTS>pre{white-space:pre!important}.react-playground_splitter__1JfoN{background-color:#282c34}.react-playground_previewPane__gBZmQ{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__mXR59{margin:auto;min-height:20px;min-width:20px}.react-playground_playground__1ARzS{border-radius:6px;display:flex;overflow:hidden}.react-playground_playground__1ARzS>div{width:100%}.snippet_snippet__2aVmo{margin-bottom:16px}.sup_sup__2FDTX{font-size:smaller;vertical-align:super}.base-table_table__Sd2yF{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:-moz-fit-content;width:fit-content}.base-table_table__Sd2yF tr:nth-child(2n){background-color:#f6f6f6;background-color:var(--bit-bg-dent,#f6f6f6)}.base-table_table__Sd2yF thead{border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,#ededed)}.base-table_table__Sd2yF 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__Sd2yF td,.base-table_table__Sd2yF th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.base-table_table__Sd2yF table,.base-table_table__Sd2yF td,.base-table_table__Sd2yF th,.base-table_table__Sd2yF thead,.base-table_table__Sd2yF tr{text-align:start}.base-table_table__Sd2yF table[align=center],.base-table_table__Sd2yF td[align=center],.base-table_table__Sd2yF th[align=center],.base-table_table__Sd2yF thead[align=center],.base-table_table__Sd2yF tr[align=center]{text-align:center}.base-table_table__Sd2yF table[align=left],.base-table_table__Sd2yF td[align=left],.base-table_table__Sd2yF th[align=left],.base-table_table__Sd2yF thead[align=left],.base-table_table__Sd2yF tr[align=left]{text-align:start}.base-table_table__Sd2yF table[align=right],.base-table_table__Sd2yF td[align=right],.base-table_table__Sd2yF th[align=right],.base-table_table__Sd2yF thead[align=right],.base-table_table__Sd2yF tr[align=right]{text-align:end}.td_td__AMTfa{padding:12px 20px}.tr_tr__2lG1O:not(:last-child){border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,#ededed)}.ul_ul__uzERU{list-style:revert;list-style-position:outside;margin:0 0 16px;padding:0 0 0 32px}.ul_ul__uzERU>li>ol,.ul_ul__uzERU>li>ul{margin-bottom:0;padding-left:18px}.ul_ul__uzERU>li>p{margin-bottom:none}.mdx-layout_mdxContent__1j4Hp{line-height:1.5}.mdx-layout_mdxContent__1j4Hp *{max-width:100%}.link_link__2Gjsg{color:#6c5ce7;color:var(--bit-accent-color,#6c5ce7);text-decoration:none}.link_link__2Gjsg:hover{color:#5d4aec;color:var(--bit-accent-heavy,#5d4aec);text-decoration:underline}