(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[90156],{48999:(s,e,r)=>{"use strict";r.d(e,{A:()=>t});let t=(0,r(2651).A)("ArrowLeft",[["path",{d:"m12 19-7-7 7-7",key:"1l729n"}],["path",{d:"M19 12H5",key:"x3x0zl"}]])},53645:(s,e,r)=>{"use strict";r.d(e,{A:()=>t});let t=(0,r(2651).A)("ChevronLeft",[["path",{d:"m15 18-6-6 6-6",key:"1wnfg3"}]])},99150:(s,e,r)=>{"use strict";r.d(e,{A:()=>t});let t=(0,r(2651).A)("ChevronRight",[["path",{d:"m9 18 6-6-6-6",key:"mthhwq"}]])},37501:(s,e,r)=>{"use strict";r.d(e,{A:()=>t});let t=(0,r(2651).A)("ChevronUp",[["path",{d:"m18 15-6-6-6 6",key:"153udz"}]])},76366:(s,e,r)=>{"use strict";r.d(e,{A:()=>t});let t=(0,r(2651).A)("RotateCw",[["path",{d:"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8",key:"1p45f6"}],["path",{d:"M21 3v5h-5",key:"1q7to0"}]])},43268:(s,e,r)=>{"use strict";r.d(e,{A:()=>y});var t=r(87687),n=r(31928),o=r(48999),a=r(73576),i=r(76366),l=r(20555);r(52751);let c=(0,n.I)("div")({name:"Wrapper",class:"w1bd8cgi",propsAsIs:!1}),d=(0,n.I)("div")({name:"Header",class:"hduekzx",propsAsIs:!1}),p=(0,n.I)("div")({name:"TabBar",class:"t1xdhus0",propsAsIs:!1}),h=(0,n.I)("div")({name:"Tab",class:"tj6926w",propsAsIs:!1}),m=(0,n.I)("div")({name:"TrafficLights",class:"t1vhg4x9",propsAsIs:!1}),u=(0,n.I)("div")({name:"TrafficLight",class:"t8ndwpz",propsAsIs:!1}),x=(0,n.I)(u)({name:"Red",class:"rptyea",propsAsIs:!0}),w=(0,n.I)(u)({name:"Yellow",class:"y1qao05t",propsAsIs:!0}),I=(0,n.I)(u)({name:"Green",class:"g1v2ob21",propsAsIs:!0}),A=(0,n.I)("div")({name:"AddressBar",class:"a13tcou3",propsAsIs:!1}),f=(0,n.I)("div")({name:"FakeBtn",class:"fn6azp",propsAsIs:!1}),v=(0,n.I)("div")({name:"Address",class:"a1booqr",propsAsIs:!1}),j=(0,n.I)(function(s){let e,{orientation:r,...n}=s;if("bottom-right"===r)e=0;else if("bottom-left"===r)e=90;else if("top-left"===r)e=180;else if("top-right"===r)e=270;else throw Error("Unrecognized orientation: "+r);return(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 16 16",preserveAspectRatio:"none",...n,children:(0,t.jsx)("path",{fill:"currentColor",d:"M0 16c8.837 0 16-7.163 16-16v16z",style:{transform:"rotate(".concat(e,"deg)"),transformOrigin:"center center"}})})})({name:"Corner",class:"choiq24",propsAsIs:!0}),g=(0,n.I)(j)({name:"LeftCorner",class:"lep27c6",propsAsIs:!0}),k=(0,n.I)(j)({name:"RightCorner",class:"r2mz821",propsAsIs:!0}),y=function(s){let{tabName:e="Some Example Website",url:r="https://designselement.com/example-website",maxHeight:n,children:u,colorModeOverride:j,style:y={},...b}=s,z=(0,l.A)();return(0,t.jsxs)(c,{...b,"data-color-mode":j,style:{overflow:"firefox"===z?void 0:"hidden",...y},children:[(0,t.jsxs)(d,{children:[(0,t.jsxs)(p,{children:[(0,t.jsxs)(m,{children:[(0,t.jsx)(x,{}),(0,t.jsx)(w,{}),(0,t.jsx)(I,{})]}),(0,t.jsxs)(h,{children:[(0,t.jsx)(g,{orientation:"bottom-right"}),(0,t.jsx)("span",{children:e}),(0,t.jsx)(k,{orientation:"bottom-left"})]})]}),(0,t.jsxs)(A,{children:[(0,t.jsx)(f,{"aria-hidden":"true",children:(0,t.jsx)(o.A,{size:14,strokeWidth:2.5})}),(0,t.jsx)(f,{"aria-hidden":"true",children:(0,t.jsx)(a.A,{size:14,strokeWidth:2.5})}),(0,t.jsx)(f,{"aria-hidden":"true",children:(0,t.jsx)(i.A,{size:14,strokeWidth:2.5})}),(0,t.jsx)(v,{children:(0,t.jsx)("span",{children:r})})]})]}),(0,t.jsx)("div",{style:{maxHeight:n,overflow:"string"==typeof n?"auto":"clip"},children:u})]})};r(57087)},22981:(s,e,r)=>{"use strict";r.r(e),r.d(e,{default:()=>S});var t=r(87687),n=r(52751),o=r(31928),a=r(37501),i=r(88700),l=r(53645),c=r(99150),d=r(20120),p=r(43268);let h="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.".split(" "),m=(0,o.I)("div")({name:"Container",class:"c1kat95g",propsAsIs:!1}),u=(0,o.I)(p.A)({name:"StyledBrowserWindow",class:"sit3yq5",propsAsIs:!0}),x=(0,o.I)("div")({name:"FakeWindowContent",class:"fv2akks",propsAsIs:!1}),w=(0,o.I)("div")({name:"ContentBox",class:"c1n9d4ng",propsAsIs:!1}),I=(0,o.I)("div")({name:"HeightArrowWrapper",class:"h11zqk3d",propsAsIs:!1}),A=(0,o.I)("div")({name:"HeightArrow",class:"hudw5oj",propsAsIs:!1}),f=(0,o.I)("span")({name:"ArrowLabel",class:"a1yi40jw",propsAsIs:!1}),v=(0,o.I)(f)({name:"HeightArrowLabel",class:"h1uxjzv9",propsAsIs:!0}),j=(0,o.I)("div")({name:"WidthArrowWrapper",class:"w1nii8wn",propsAsIs:!1}),g=(0,o.I)("div")({name:"WidthArrow",class:"w193kuhn",propsAsIs:!1}),k=(0,o.I)(f)({name:"WidthArrowLabel",class:"w1qw0ogr",propsAsIs:!0}),y=(0,o.I)(a.A)({name:"Up",class:"u7f68xq",propsAsIs:!0}),b=(0,o.I)(i.A)({name:"Down",class:"d127gcnw",propsAsIs:!0}),z=(0,o.I)(l.A)({name:"Left",class:"l1caurkr",propsAsIs:!0}),q=(0,o.I)(c.A)({name:"Right",class:"r1uazouc",propsAsIs:!0}),W=(0,o.I)("div")({name:"Shaft",class:"sq22cc2",propsAsIs:!1}),C=(0,o.I)(W)({name:"VerticalShaft",class:"vvm21vr",propsAsIs:!0}),L=(0,o.I)(W)({name:"HorizontalShaft",class:"h1wfycln",propsAsIs:!0}),S=function(){let s=n.useRef(null),[e,r]=n.useState(0);return n.useEffect(()=>{if(!s.current)return;let e=new ResizeObserver(s=>{for(let e of s)r(e.borderBoxSize[0].blockSize)});return e.observe(s.current),()=>{e.disconnect()}},[]),(0,t.jsx)(d.Ay,{initialValues:{numOfWords:20},outputWrapper:null,controlPosition:"bottom",controlStyles:{gridTemplateColumns:"min(400px, 100%)",justifyContent:"center"},controls:[(0,t.jsx)(d.oP,{id:"numOfWords",label:"Number of Words",min:0,max:h.length},"numOfWords")],children:r=>{let{numOfWords:n}=r,o=h.slice(0,n).join(" ");return(0,t.jsx)(t.Fragment,{children:(0,t.jsxs)(m,{children:[e>0&&(0,t.jsxs)(I,{style:{height:e},children:[(0,t.jsxs)(v,{children:["Minimum",(0,t.jsx)("br",{}),"Height"]}),(0,t.jsxs)(A,{children:[(0,t.jsx)(y,{strokeWidth:3}),(0,t.jsx)(C,{}),(0,t.jsx)(b,{strokeWidth:3})]})]}),(0,t.jsx)(u,{colorModeOverride:"dark",children:(0,t.jsx)(x,{children:(0,t.jsxs)(w,{ref:s,children:[(0,t.jsx)("p",{children:o}),e>0&&(0,t.jsxs)(j,{children:[(0,t.jsxs)(g,{children:[(0,t.jsx)(z,{size:16,strokeWidth:3}),(0,t.jsx)(L,{}),(0,t.jsx)(q,{size:16,strokeWidth:3})]}),(0,t.jsx)(k,{children:"Maximum Width"})]})]})})})]})})}})};r(33857)},57087:s=>{s.exports={w1bd8cgi:"w1bd8cgi",hduekzx:"hduekzx",t1xdhus0:"t1xdhus0",tj6926w:"tj6926w",t1vhg4x9:"t1vhg4x9",t8ndwpz:"t8ndwpz",rptyea:"rptyea",y1qao05t:"y1qao05t",g1v2ob21:"g1v2ob21",a13tcou3:"a13tcou3",fn6azp:"fn6azp",a1booqr:"a1booqr",choiq24:"choiq24",lep27c6:"lep27c6",r2mz821:"r2mz821"}},33857:s=>{s.exports={c1kat95g:"c1kat95g",sit3yq5:"sit3yq5",fv2akks:"fv2akks",c1n9d4ng:"c1n9d4ng",h11zqk3d:"h11zqk3d",fadeFromTransparent:"fadeFromTransparent",hudw5oj:"hudw5oj",a1yi40jw:"a1yi40jw",h1uxjzv9:"h1uxjzv9",w1nii8wn:"w1nii8wn",w193kuhn:"w193kuhn",w1qw0ogr:"w1qw0ogr",u7f68xq:"u7f68xq",d127gcnw:"d127gcnw",l1caurkr:"l1caurkr",r1uazouc:"r1uazouc",sq22cc2:"sq22cc2",vvm21vr:"vvm21vr",h1wfycln:"h1wfycln"}}}]);
//# sourceMappingURL=90156.e38ae11913897ca9.js.map