text: (window.webpackJsonp_N_E=window.webpackJsonp_N_E||[]).push([[83],{"8C7G":function(a,e,n){"use strict";n.d(e,"a",(function(){return r}));var t=n("q1tI"),s=n.n(t),c=n("98BF"),o=n("Zb5r"),p=n("AOjV"),l=s.a.createElement;function r(a){var{plugin:e,name:n}=a,t=c.defaultConfig.variants[e]||["responsive"];n=n||e.replace(/([a-z])([A-Z])/g,(a,e,n)=>"".concat(e," ").concat(n.toLowerCase()));var s=["responsive","hover","focus","active","group-hover"].filter(a=>!t.includes(a)).slice(0,2),r="By default, ".concat(t.length?"only ".concat(Object(o.a)(t).replace("dark","dark mode <em>(if enabled)</em>")):"no"," variants are generated for ").concat(n," utilities.");return l("div",{className:"prose"},l("p",{dangerouslySetInnerHTML:{__html:r}}),l("p",null,"You can control which variants are generated for the ",n," utilities by modifying the"," ",l("code",null,e)," property in the ",l("code",null,"variants")," section of your"," ",l("code",null,"tailwind.config.js")," file."),l("p",null,"For example, this config will ",t.length>0?"also ":"","generate"," ",Object(o.a)(s)," variants:"),l(p.a,{path:"variants.extend",before:"...",add:{[e]:s}}))}},"9/R6":function(a,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(){return function({addUtilities:a,theme:e,variants:n}){a(t.default.fromPairs(t.default.map(e("flexGrow"),(a,e)=>[(0,s.default)("flex-grow",e),{"flex-grow":a}])),n("flexGrow"))}};var t=c(n("XMip")),s=c(n("dzuX"));function c(a){return a&&a.__esModule?a:{default:a}}},"MhF+":function(a,e,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/flex-grow",function(){return n("O0St")}])},O0St:function(a,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return f}));var t=n("wx14"),s=n("Ff2n"),c=n("q1tI"),o=n.n(c),p=n("7ljp"),l=n("YFqc"),r=n.n(l),i=n("tc9R"),u=n("pOT7"),m=n("vRWG"),d=n("I6Nb"),b=n("9/R6"),g=n.n(b),j=n("8C7G"),O=n("wH44"),k=(o.a.createElement,{Layout:m.DocumentationLayout,classes:{plugin:g()},meta:{title:"Flex Grow",description:"Utilities for controlling how flex items grow.",features:{responsive:!0,customizable:!0,hover:!1,focus:!1}},tableOfContents:[{title:"Grow",slug:"grow",children:[]},{title:"Don't grow",slug:"don-t-grow",children:[]},{title:"Responsive",slug:"responsive",children:[]},{title:"Customizing",slug:"customizing",children:[{title:"Grow Values",slug:"grow-values"},{title:"Variants",slug:"variants"},{title:"Disabling",slug:"disabling"}]}]}),N=d.ContentsLayout;function f(a){var{components:e}=a,n=Object(s.a)(a,["components"]);return Object(p.a)(N,Object(t.a)({},k,n,{components:e,mdxType:"MDXLayout"}),Object(p.a)("div",{className:"prose"},Object(p.a)(i.a,{level:2,id:"grow",toc:!0},"Grow"),Object(p.a)("p",null,"Use ",Object(p.a)("inlineCode",{parentName:"p"},"flex-grow")," to allow a flex item to grow to fill any available space:")),Object(p.a)(u.b,{preview:'\n  <div class="flex space-x-4">\n    <div class="flex-none w-16 h-16 rounded-md bg-purple-300 text-white text-2xl font-extrabold flex items-center justify-center">\n      <svg class="w-5 h-5" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.286 8.875v-2.25a5.58 5.58 0 011.673-3.977A5.76 5.76 0 0110 1a5.76 5.76 0 014.04 1.648 5.581 5.581 0 011.674 3.977v2.25c.606 0 1.188.237 1.617.659.428.422.669.994.669 1.591v5.625c0 .597-.24 1.169-.67 1.591a2.304 2.304 0 01-1.616.659H4.286a2.304 2.304 0 01-1.617-.659A2.233 2.233 0 012 16.75v-5.625c0-.597.24-1.169.67-1.591a2.304 2.304 0 011.616-.659zm9.143-2.25v2.25H6.57v-2.25c0-.895.362-1.754 1.005-2.386A3.456 3.456 0 0110 3.25c.91 0 1.781.356 2.424.989a3.349 3.349 0 011.005 2.386z" fill="currentColor"/></svg>\n    </div>\n    <div class="flex-grow h-16 rounded-md bg-purple-500 text-white text-2xl font-extrabold flex items-center justify-center">\n      <svg class="h-5 w-14" fill="none"><path d="M6 5l-5 5m0 0l5 5m-5-5h12M24 10.005l2 1.999 4-3.998m6 1.999C36 14.972 31.97 19 27 19c-4.98 0-9-4.028-9-8.995C17.99 5.028 22.02 1 26.99 1c4.97-.01 9 4.018 9 8.985l.01.02zM48 5l5 5m0 0l-5 5m5-5H41" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>\n    </div>\n    <div class="flex-none w-16 h-16 rounded-md bg-purple-300 text-white text-2xl font-extrabold flex items-center justify-center">\n      <svg class="w-5 h-5" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.286 8.875v-2.25a5.58 5.58 0 011.673-3.977A5.76 5.76 0 0110 1a5.76 5.76 0 014.04 1.648 5.581 5.581 0 011.674 3.977v2.25c.606 0 1.188.237 1.617.659.428.422.669.994.669 1.591v5.625c0 .597-.24 1.169-.67 1.591a2.304 2.304 0 01-1.616.659H4.286a2.304 2.304 0 01-1.617-.659A2.233 2.233 0 012 16.75v-5.625c0-.597.24-1.169.67-1.591a2.304 2.304 0 011.616-.659zm9.143-2.25v2.25H6.57v-2.25c0-.895.362-1.754 1.005-2.386A3.456 3.456 0 0110 3.25c.91 0 1.781.356 2.424.989a3.349 3.349 0 011.005 2.386z" fill="currentColor"/></svg>\n    </div>\n  </div>\n',src:void 0,snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex ...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex-none w-16 h-16 ...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n    <span class="token comment">&lt;!-- This item will not grow --\x3e</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="code-highlight bg-code-highlight">flex-grow</span> h-16 ...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n    <span class="token comment">&lt;!-- This item will grow --\x3e</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex-none w-16 h-16 ...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n    <span class="token comment">&lt;!-- This item will not grow --\x3e</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>',previewClassName:"p-6",color:"purple",min:!1}),Object(p.a)("div",{className:"prose"},Object(p.a)(i.a,{level:2,id:"don-t-grow",toc:!0},"Don't grow"),Object(p.a)("p",null,"Use ",Object(p.a)("inlineCode",{parentName:"p"},"flex-grow-0")," to prevent a flex item from growing:")),Object(p.a)(u.b,{preview:'\n  <div class="flex space-x-4">\n    <div class="flex-grow h-16 rounded-md bg-emerald-300 text-white text-2xl font-extrabold flex items-center justify-center">\n      <svg class="h-5 w-14" fill="none"><path d="M6 5l-5 5m0 0l5 5m-5-5h12M24 10.005l2 1.999 4-3.998m6 1.999C36 14.972 31.97 19 27 19c-4.98 0-9-4.028-9-8.995C17.99 5.028 22.02 1 26.99 1c4.97-.01 9 4.018 9 8.985l.01.02zM48 5l5 5m0 0l-5 5m5-5H41" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>\n    </div>\n    <div class="flex-grow-0 w-16 h-16 rounded-md bg-emerald-500 text-white text-2xl font-extrabold flex items-center justify-center">\n      <svg class="w-5 h-5" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.286 8.875v-2.25a5.58 5.58 0 011.673-3.977A5.76 5.76 0 0110 1a5.76 5.76 0 014.04 1.648 5.581 5.581 0 011.674 3.977v2.25c.606 0 1.188.237 1.617.659.428.422.669.994.669 1.591v5.625c0 .597-.24 1.169-.67 1.591a2.304 2.304 0 01-1.616.659H4.286a2.304 2.304 0 01-1.617-.659A2.233 2.233 0 012 16.75v-5.625c0-.597.24-1.169.67-1.591a2.304 2.304 0 011.616-.659zm9.143-2.25v2.25H6.57v-2.25c0-.895.362-1.754 1.005-2.386A3.456 3.456 0 0110 3.25c.91 0 1.781.356 2.424.989a3.349 3.349 0 011.005 2.386z" fill="currentColor"/></svg>\n    </div>\n    <div class="flex-grow h-16 rounded-md bg-emerald-300 text-white text-2xl font-extrabold flex items-center justify-center">\n      <svg class="h-5 w-14" fill="none"><path d="M6 5l-5 5m0 0l5 5m-5-5h12M24 10.005l2 1.999 4-3.998m6 1.999C36 14.972 31.97 19 27 19c-4.98 0-9-4.028-9-8.995C17.99 5.028 22.02 1 26.99 1c4.97-.01 9 4.018 9 8.985l.01.02zM48 5l5 5m0 0l-5 5m5-5H41" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>\n    </div>\n  </div>\n',src:void 0,snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex ...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex-grow h-16 ...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n    <span class="token comment">&lt;!-- This item will grow --\x3e</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="code-highlight bg-code-highlight">flex-grow-0</span> h-16 ...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n    <span class="token comment">&lt;!-- This item will not grow --\x3e</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex-grow h-16 ...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n    <span class="token comment">&lt;!-- This item will grow --\x3e</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>',previewClassName:"p-6",color:"emerald",min:!1}),Object(p.a)("div",{className:"prose"},Object(p.a)(i.a,{level:2,id:"responsive",toc:!0},"Responsive"),Object(p.a)("p",null,"To control how a flex item grows at a specific breakpoint, add a ",Object(p.a)("inlineCode",{parentName:"p"},"{screen}:")," prefix to any existing utility class. For example, use ",Object(p.a)("inlineCode",{parentName:"p"},"md:flex-grow-0")," to apply the ",Object(p.a)("inlineCode",{parentName:"p"},"flex-grow-0")," utility at only medium screen sizes and above."),Object(p.a)("div",{className:"my-6 rounded-xl overflow-hidden bg-gray-800"},Object(p.a)("pre",Object(t.a)({parentName:"div"},{className:"language-html"}),Object(p.a)("code",Object(t.a)({parentName:"pre"},{className:"language-html"}),Object(p.a)("span",Object(t.a)({parentName:"code"},{className:"token tag"}),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token tag"}),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token attr-name"}),"class"),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token attr-value"}),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation attr-equals"}),"="),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation"}),'"'),"flex ...",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation"}),'"')),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",Object(p.a)("span",Object(t.a)({parentName:"code"},{className:"token comment"}),"\x3c!-- ... --\x3e"),"\n  ",Object(p.a)("span",Object(t.a)({parentName:"code"},{className:"token tag"}),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token tag"}),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token attr-name"}),"class"),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token attr-value"}),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation attr-equals"}),"="),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation"}),'"'),"flex-grow ",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"code-highlight bg-code-highlight"}),"md:flex-grow-0")," ...",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation"}),'"')),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation"}),">")),"\n    Responsive flex item\n  ",Object(p.a)("span",Object(t.a)({parentName:"code"},{className:"token tag"}),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token tag"}),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation"}),"</"),"div"),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",Object(p.a)("span",Object(t.a)({parentName:"code"},{className:"token comment"}),"\x3c!-- ... --\x3e"),"\n",Object(p.a)("span",Object(t.a)({parentName:"code"},{className:"token tag"}),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token tag"}),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation"}),"</"),"div"),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation"}),">"))))),Object(p.a)("p",null,"For more information about Tailwind's responsive design features, check out the ",Object(p.a)(r.a,{href:"/docs/responsive-design",passHref:!0},Object(p.a)("a",null,"Responsive Design"))," documentation."),Object(p.a)(i.a,{level:2,id:"customizing",toc:!0},"Customizing"),Object(p.a)(i.a,{level:3,id:"grow-values",toc:!0},"Grow Values"),Object(p.a)("p",null,"By default, Tailwind provides two ",Object(p.a)("inlineCode",{parentName:"p"},"flex-grow")," utilities. You change, add, or remove these by editing the ",Object(p.a)("inlineCode",{parentName:"p"},"theme.flexGrow")," section of your Tailwind config."),Object(p.a)("div",{className:"my-6 rounded-xl overflow-hidden bg-gray-800"},Object(p.a)("pre",Object(t.a)({parentName:"div"},{className:"language-diff-js"}),Object(p.a)("code",Object(t.a)({parentName:"pre"},{className:"language-diff-js"}),Object(p.a)("span",Object(t.a)({parentName:"code"},{className:"token unchanged language-js"}),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token prefix unchanged"})," ")," ",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token comment"}),"// tailwind.config.js"),"\n",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token prefix unchanged"})," ")," module",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation"}),"."),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token property-access"}),"exports")," ",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token operator"}),"=")," ",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation"}),"{"),"\n",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token prefix unchanged"})," "),"   theme",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token operator"}),":")," ",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation"}),"{"),"\n",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token prefix unchanged"})," "),"     flexGrow",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token operator"}),":")," ",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation"}),"{"),"\n",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token prefix unchanged"})," "),"       ",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token string"}),"'0'"),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token operator"}),":")," ",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token number"}),"0"),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation"}),","),"\n"),Object(p.a)("span",Object(t.a)({parentName:"code"},{className:"token deleted-sign deleted language-js"}),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token prefix deleted"}),"-"),"       ",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token constant"}),"DEFAULT"),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token operator"}),":")," ",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token number"}),"1"),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation"}),","),"\n"),Object(p.a)("span",Object(t.a)({parentName:"code"},{className:"token inserted-sign inserted language-js"}),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token prefix inserted"}),"+"),"       ",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token constant"}),"DEFAULT"),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token operator"}),":")," ",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token number"}),"2"),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation"}),","),"\n",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token prefix inserted"}),"+"),"       ",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token string"}),"'1'"),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token operator"}),":")," ",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token number"}),"1"),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation"}),","),"\n"),Object(p.a)("span",Object(t.a)({parentName:"code"},{className:"token unchanged language-js"}),Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token prefix unchanged"})," "),"     ",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation"}),"}"),"\n",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token prefix unchanged"})," "),"   ",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation"}),"}"),"\n",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token prefix unchanged"})," ")," ",Object(p.a)("span",Object(t.a)({parentName:"span"},{className:"token punctuation"}),"}"))))),Object(p.a)(i.a,{level:3,id:"variants",toc:!0},"Variants")),Object(p.a)(j.a,{plugin:"flexGrow",mdxType:"Variants"}),Object(p.a)("div",{className:"prose"},Object(p.a)(i.a,{level:3,id:"disabling",toc:!0},"Disabling")),Object(p.a)(O.a,{plugin:"flexGrow",mdxType:"Disabling"}))}f.isMDXComponent=!0,f.layoutProps=k},pOT7:function(a,e,n){"use strict";n.d(e,"a",(function(){return g})),n.d(e,"b",(function(){return j}));var t=n("wx14"),s=n("q1tI"),c=n.n(s),o=n("iuhU"),p=n("ZMKu"),l=c.a.createElement,r={amber:"bg-amber-500",emerald:"bg-emerald-500",fuchsia:"bg-fuchsia-400",indigo:"bg-indigo-400",lightBlue:"bg-light-blue-500",purple:"bg-purple-400",rose:"bg-rose-400"},i={amber:"bg-gradient-to-r from-amber-50 to-amber-100",emerald:"bg-gradient-to-r from-emerald-50 to-teal-100",fuchsia:"bg-gradient-to-r from-fuchsia-50 to-fuchsia-100",gray:"bg-gradient-to-r from-gray-50 to-gray-100",indigo:"bg-gradient-to-r from-indigo-50 to-indigo-100",lightBlue:"bg-gradient-to-r from-light-blue-50 to-light-blue-100",purple:"bg-gradient-to-r from-purple-50 to-purple-100",rose:"bg-gradient-to-r from-rose-50 to-rose-100"},u={amber:"bg-stripes bg-stripes-amber-500 bg-amber-100",emerald:"bg-stripes bg-stripes-emerald-500 bg-emerald-100",fuchsia:"bg-stripes bg-stripes-fuchsia-500 bg-fuchsia-100",indigo:"bg-stripes bg-stripes-indigo-500 bg-indigo-100",lightBlue:"bg-stripes bg-stripes-light-blue-500 bg-light-blue-100",purple:"bg-stripes bg-stripes-purple-500 bg-purple-100",rose:"bg-stripes bg-stripes-rose-500 bg-rose-100"},m={amber:"text-amber-700",emerald:"text-emerald-700",fuchsia:"text-fuchsia-700",indigo:"text-indigo-700",lightBlue:"text-light-blue-700",purple:"text-purple-700",rose:"text-rose-700"};function d(a){var e=Object(s.useRef)(),{0:n,1:c}=Object(s.useState)(!1),{0:o,1:p}=Object(s.useState)({});return Object(s.useEffect)(()=>{if(n){var a=new window.ResizeObserver(t);return t(),a.observe(e.current.contentDocument.body),()=>{a.disconnect()}}function t(){p({height:e.current.contentDocument.body.scrollHeight})}},[n]),l("iframe",Object(t.a)({},a,{ref:e,onLoad:()=>c(!0),style:o}))}function b(a){var{color:e,snippet:n}=a;return l("div",{className:Object(o.a)("overflow-hidden rounded-b-xl",r[e],{"bg-gray-800":!r[e]})},l("pre",{className:Object(o.a)("scrollbar-none overflow-x-auto p-6 text-sm leading-snug language-html text-white",{"bg-black bg-opacity-75":r[e]})},l("code",{className:"language-html",dangerouslySetInnerHTML:{__html:n}})))}function g(a){var{preview:e,src:n,snippet:t,previewClassName:s,color:c="gray"}=a;return l("div",{className:"relative overflow-hidden mb-8"},e?l("div",{className:Object(o.a)("rounded-t-xl overflow-hidden",i[c],s,{"p-10":!s}),dangerouslySetInnerHTML:{__html:e}}):l(d,{src:n,className:Object(o.a)("w-full rounded-t-xl",i[c])}),l(b,{color:c,snippet:t}))}function j(a){var{preview:e,src:n,previewClassName:t,snippet:c,color:r="gray",min:g=!1}=a,j=Object(s.useRef)(),O=Object(p.h)(0),k=Object(s.useRef)(),{0:N,1:f}=Object(s.useState)(!1);return Object(s.useEffect)(()=>{var a=new window.ResizeObserver(()=>{O.set(0)});return a.observe(j.current),()=>{a.disconnect()}},[]),l("div",{className:"relative mb-8"},l("div",{ref:j,className:"relative rounded-t-xl ".concat(u[r])},l("div",{className:g?"md:w-88":void 0},l(p.d.div,{className:"relative",style:{marginRight:Object(p.i)(O,a=>-a)}},e?l("div",{className:Object(o.a)("rounded-t-xl",t,i[r],{"p-10":!t}),dangerouslySetInnerHTML:{__html:e}}):l(d,{src:n,className:Object(o.a)("w-full rounded-t-xl",i[r],{"pointer-events-none":N})}))),l("div",{ref:k,className:"absolute inset-y-0 -right-4 left-80 ml-4 pointer-events-none"},l(p.d.div,{drag:"x",_dragX:O,dragMomentum:!1,dragElastic:0,dragConstraints:k,className:"pointer-events-auto absolute top-1/2 -mt-4 w-8 hidden md:flex items-center justify-center cursor-grab active:cursor-grabbing ".concat(g?"right-0 md:left-0 md:right-auto":"right-0"),style:{x:O},onDragStart:()=>{document.body.classList.add("cursor-grabbing"),f(!0)},onDragEnd:()=>{document.body.classList.remove("cursor-grabbing"),f(!1)}},l("div",{className:"flex-none rounded bg-white shadow flex items-center justify-center h-8",style:{width:"0.9375rem"}},l("svg",{viewBox:"0 0 14 24",fill:"none",strokeWidth:"2",stroke:"currentColor",className:"h-3 flex-none ".concat(m[r]),style:{width:"0.4375rem"}},l("path",{d:"M 1 0 V 24 M 7 0 V 24 M 13 0 V 24"})))))),l(b,{color:r,snippet:c}))}}},[["MhF+",0,2,6,10,1,3,4,5,7,8]]]);