hypnagaga/packages/graphics-components/docs/assets/HorizontalScroller.stories-BB6MtQQl.js

19 lines
39 KiB
JavaScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import{n as je,f as b,m as ut,a as u,c as te,p as T,s as ft,B as ht}from"./props-b4vEeO_8.js";import{B as ve,a4 as C,ae as Ge,ah as bt,I as s,F as a,J as M,k as e,N as X,G as ge,C as L,a3 as w,e as xt,h as _t,u as wt}from"./runtime-C3rQLW--.js";import{b as $e}from"./window-DXjFTZv5.js";import{c as kt,d as St}from"./create-runtime-stories-7AWWVphH.js";import{T as Pt,s as ze,q as Ne}from"./tweened-4Ja_XIbT.js";import{o as Xe}from"./index-client-BAw8T8-V.js";import{i as H,s as N}from"./svelte-component-C8Ginrj8.js";import{s as At}from"./snippet-C5kbqVpq.js";import{a as Tt}from"./actions-BHcvdwVC.js";import{s as Ct,a as qt}from"./attributes-Cg6aLqN3.js";import{s as A}from"./style-DvJ3IcV1.js";import{b as De}from"./size-DMdj3-I9.js";import{b as Me}from"./this-CrUBQEQ_.js";import{e as Te,i as Ce}from"./each-CVpBMMjG.js";import{B as ae}from"./BodyText-CXnxLnBi.js";import{B as pe}from"./Block-D3Ui8rd-.js";import{D as Dt}from"./DatawrapperChart-BBvguXT3.js";import{H as Bt}from"./Headline-C-tkYFZ6.js";import{h as qe}from"./html-CPeakWmR.js";import{S as $t}from"./ScrollerBase-DJMKplMV.js";function Le(m,t,p){const n=Math.min(t,p),o=Math.max(t,p);return Math.max(n,Math.min(m,o))}function se(m,t,p,n,o,g=!0){const h=p-t;if(h===0)return g?Le(n,n,o):n;const r=(m-t)/h*(o-n)+n;return g?Le(r,n,o):r}function Et(m,t){w(t,!0),m.preventDefault()}function It(m,t,p){e(t)&&(w(t,!1),setTimeout(()=>{w(p,!1)},5),m.stopImmediatePropagation()),m.preventDefault()}function Wt(m,t,p){e(t)&&m.preventDefault(),w(p,!1)}var Ht=b('<span class="stops svelte-1odeenq">|</span>'),Mt=b('<span class="stops svelte-1odeenq">|</span>'),Lt=b('<span class="stops svelte-1odeenq"> </span>'),Vt=b('<span class="tag svelte-1odeenq"> </span>'),Ft=b('<p class="svelte-1odeenq">Stops:</p> <div style="display: flex; flex-direction: column; gap: 4px;" class="svelte-1odeenq"><p class="state-value svelte-1odeenq" style="display: flex; gap: 4px; flex-wrap: wrap;"></p></div>',1),Ot=b('<span class="tag not-applicable svelte-1odeenq">NA</span>'),Rt=b('<div role="region" class="svelte-1odeenq"><details class="debug-info svelte-1odeenq" open><summary class="text-xxs font-sans font-bold title svelte-1odeenq" style="grid-column: span 2;">CONSOLE</summary> <div class="state-debug svelte-1odeenq"><p class="svelte-1odeenq">Progress:</p> <div style="display: flex; flex-direction: column; gap: 4px;" class="svelte-1odeenq"><p class="state-value svelte-1odeenq"> </p></div> <p class="svelte-1odeenq">Mapped progress:</p> <div style="display: flex; flex-direction: column; gap: 4px;" class="svelte-1odeenq"><p class="state-value progress-value svelte-1odeenq"><!> <span class="progress-stop svelte-1odeenq"> </span> &nbsp;</p> <div id="video-progress-bar" class="svelte-1odeenq"><div class="svelte-1odeenq"></div></div></div> <p class="svelte-1odeenq">Eased Progress:</p> <div style="display: flex; flex-direction: column; gap: 4px;" class="svelte-1odeenq"><p class="state-value progress-value svelte-1odeenq"><!> <span class="progress-stop svelte-1odeenq"> </span> &nbsp;</p> <div id="video-progress-bar" class="svelte-1odeenq"><div class="svelte-1odeenq"></div></div></div> <p class="svelte-1odeenq">Direction:</p> <div style="display: flex; flex-direction: column; gap: 4px;" class="svelte-1odeenq"><p class="state-value svelte-1odeenq"><span class="tag svelte-1odeenq"> </span></p></div> <!> <p class="svelte-1odeenq">Handle scroll:</p> <div style="display: flex; flex-direction: column; gap: 4px;" class="svelte-1odeenq"><p class="state-value svelte-1odeenq"><span class="tag svelte-1odeenq"> </span></p></div> <p class="svelte-1odeenq">Scrubbed:</p> <div style="display: flex; flex-direction: column; gap: 4px;" class="svelte-1odeenq"><p class="state-value svelte-1odeenq"><span class="tag svelte-1odeenq"> </span></p></div> <p class="svelte-1odeenq">Easing:</p> <div style="display: flex; flex-direction: column; gap: 4px;" class="svelte-1odeenq"><p class="state-value svelte-1odeenq"> </p></div> <p class="svelte-1odeenq">Duration: <!></p> <div style="display: flex; flex-direction: column; gap: 4px;" class="svelte-1odeenq"><p class="state-value svelte-1odeenq"><span class="tag svelte-1odeenq"> </span></p></div></div></details></div>');function Je(m,t){ve(t,!0);const p=S=>{var O=te(),ue=L(O);{var fe=U=>{var Y=te(),re=L(Y);{var he=de=>{var be=te();const K=X(()=>t.componentState.triggerStops.length);var We=L(be);Te(We,17,()=>Array(e(K)),Ce,(xe,Oe,Ae)=>{var _e=Ht();M(()=>A(_e,`left: ${(Ae+1)/(e(K)+1)*100}%;`)),u(xe,_e)}),u(de,be)},ct=de=>{var be=te();const K=X(()=>t.componentState.triggerStops.map(xe=>l(xe)));var We=L(be);Te(We,17,()=>e(K),Ce,(xe,Oe,Ae)=>{var _e=te(),mt=L(_e);{var yt=He=>{var Re=Mt();M(()=>A(Re,`left: ${(e(Oe)+(e(K)[Ae+1]??e(K)[e(K).length-1]))*.5*100}%;`)),u(He,Re)};H(mt,He=>{Ae<e(K).length-1&&He(yt)})}u(xe,_e)}),u(de,be)};H(re,de=>{t.componentState.scrubbed?de(he):de(ct,!1)})}u(U,Y)};H(ue,U=>{t.componentState.triggerStops.length>0&&U(fe)})}u(S,O)};let n=C(!1),o=C(!1),g=C(Ge({x:8,y:8}));const h=new Intl.NumberFormat("en-US",{minimumFractionDigits:0,maximumFractionDigits:2});function y(S){e(n)&&(w(g,{x:e(g).x+S.movementX,y:e(g).y+S.movementY},!0),w(o,!0)),S.preventDefault()}let r=X(()=>se(t.componentState.mappedProgress,t.componentState.mappedStart??0,t.componentState.mappedEnd??1,0,1)),i=X(()=>se(t.componentState.easedProgress,t.componentState.mappedStart??0,t.componentState.mappedEnd??1,0,1));function l(S){return se(S,t.componentState.mappedStart??0,t.componentState.mappedEnd??1,0,1)}var d=Rt();ut("mousemove",bt,y);var x=s(d),q=s(x);q.__mousedown=[Et,n],q.__mouseup=[It,n,o],q.__click=[Wt,o,n];var _=a(q,2),P=a(s(_),2),E=s(P),k=s(E),D=a(P,4),R=s(D),j=s(R);p(j);var J=a(j,2),f=s(J),le=a(R,2),B=s(le),Q=a(D,4),oe=s(Q),G=s(oe);{var me=S=>{var O=te(),ue=L(O);Te(ue,17,()=>t.componentState.stops,Ce,(fe,U)=>{var Y=Lt(),re=s(Y);M(he=>{A(Y,he),N(re,e(U))},[()=>`left: ${l(e(U))*100}%;`]),u(fe,Y)}),u(S,O)};H(G,S=>{t.componentState.stops.length>0&&S(me)})}var Z=a(G,2),V=s(Z),z=a(oe,2),ne=s(z),$=a(Q,4),I=s($),W=s(I),v=s(W),c=a($,2);{var F=S=>{var O=Ft(),ue=a(L(O),2),fe=s(ue);Te(fe,21,()=>t.componentState.stops,Ce,(U,Y)=>{var re=Vt(),he=s(re);M(()=>N(he,e(Y))),u(U,re)}),u(S,O)};H(c,S=>{t.componentState.stops.length>0&&S(F)})}var ye=a(c,4),ke=s(ye),Se=s(ke),Ie=s(Se),Pe=a(ye,4),st=s(Pe),at=s(st),it=s(at),Ve=a(Pe,4),lt=s(Ve),ot=s(lt),Fe=a(Ve,2),nt=a(s(Fe));{var rt=S=>{var O=Ot();u(S,O)};H(nt,S=>{t.componentState.scrubbed&&S(rt)})}var dt=a(Fe,2),pt=s(dt),vt=s(pt),gt=s(vt);M((S,O)=>{A(d,`position: absolute; top: ${e(g).y??""}px; left: ${e(g).x??""}px; z-index: 5; user-select: none;`),N(k,t.componentState.progress),A(J,`left: ${e(r)*100}%; transform: translateX(-50%);`),N(f,S),A(B,`width: ${e(r)*100}%; height: 100%;`),A(Z,`left: ${e(i)*100}%; transform: translateX(-50%);`),N(V,O),A(ne,`width: ${e(i)*100}%; height: 100%;`),N(v,t.componentState.direction),N(Ie,t.componentState.handleScroll),N(it,t.componentState.scrubbed),N(ot,t.componentState.easing),N(gt,t.componentState.duration)},[()=>h.format(t.componentState.mappedProgress),()=>h.format(t.componentState.easedProgress)]),u(m,d),ge()}je(["mousedown","mouseup","click"]);Je.__docgen={data:[{name:"componentState",visibility:"public",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"type",type:"any",text:"any"},static:!1,readonly:!1}],name:"Debug.svelte"};var Nt=b('<div class="debug-info"><!></div>'),jt=b('<div><div class="horizontal-scroller-content svelte-jo0qqs"><!> <!></div></div>');function ce(m,t){ve(t,!0);let p=T(t,"id",3,""),n=T(t,"class",3,""),o=T(t,"height",3,"200lvh"),g=T(t,"direction",3,"right"),h=T(t,"progress",15,0),y=T(t,"mappedStart",3,0),r=T(t,"mappedEnd",3,1),i=T(t,"stops",19,()=>[]),l=T(t,"handleScroll",3,!0),d=T(t,"scrubbed",3,!0),x=T(t,"easing",3,v=>v),q=T(t,"duration",3,400),_=T(t,"showDebugInfo",3,!1),P=Ge(new Pt(y(),{duration:q(),easing:x()})),E=C(void 0),k=C(0),D=C(0),R=C(void 0),j=C(0),J=C(0),f=X(()=>[...i(),y(),r()].sort((v,c)=>v-c)),le=X(()=>e(f).length-1),B=C(0),Q=X(()=>{let v=Le(P.current,y(),r()),c=v;return c=g()==="right"?v:r()-v,-(e(j)-e(D))*c}),oe=X(()=>({progress:h(),mappedProgress:e(B),easedProgress:P.current,direction:g(),mappedStart:y(),mappedEnd:r(),triggerStops:d()?i():e(f),stops:i(),handleScroll:l(),scrubbed:d(),easing:x(),duration:q()}));Xe(()=>{w(B,y())});const G=()=>{l()?window.addEventListener("scroll",me,{passive:!0}):window.addEventListener("scroll",()=>Z(h()),{passive:!0})};function me(){var v;e(E)&&(h((-((v=e(E))==null?void 0:v.offsetTop)+(window==null?void 0:window.scrollY))/(e(k)-e(J))),Z(h()))}function Z(v){if(w(B,se(v,0,1,y(),r()),!0),!i()||i().length===0){P.set(x()(se(v,0,1,y(),r())),{duration:0});return}if(d())for(let c=0;c<e(f).length;c++){let F=1/e(le),ye=c==0?y():F*c,ke=c==e(le)-1?r():F*(c+1);if(e(B)>=ye&&e(B)<ke){let Se=e(f)[c],Ie=e(f)[c+1]??r(),Pe=Se+x()(se(e(B),ye,ke,0,1))*(Ie-Se);P.set(Pe,{duration:0});return}else continue}else for(let c=0;c<e(f).length;c++)if(e(B)>e(f)[c]&&e(B)<=(e(f)[c+1]??e(f)[e(f).length-1])){const F=e(f)[c]+((e(f)[c+1]??e(f)[e(f).length-1])-e(f)[c])*.5;if(e(B)>=F&&P.target!==(e(f)[c+1]??e(f)[e(f).length-1])){P.set(e(f)[c+1]??e(f)[e(f).length-1]);return}else if(e(B)<F&&P.target!==e(f)[c]){P.set(e(f)[c]);return}}else if(e(B)<e(f)[0]+(e(f)[1]??y())*.5){if(P.target!==e(f)[0]){P.set(e(f)[0]);return}}else continue}var V=jt(),z=s(V),ne=s(z);{var $=v=>{var c=te(),F=L(c);At(F,()=>t.children),u(v,c)};H(ne,v=>{t.children&&v($)})}var I=a(ne,2);{var W=v=>{var c=Nt(),F=s(c);Je(F,{get componentState(){return e(oe)}}),M(()=>A(c,`position: absolute; left: ${-e(Q)}px; top: 0px;`)),u(v,c)};H(I,v=>{_()&&v(W)})}Me(z,v=>w(R,v),()=>e(R)),xt(()=>De(z,"clientWidth",v=>w(j,v))),Tt(z,v=>G==null?void 0:G()),Me(V,v=>w(E,v),()=>e(E)),M(()=>{Ct(V,"id",p()),qt(V,1,`horizontal-scroller-container ${n()??""}`,"svelte-jo0qqs"),A(V,`height: ${o()??""};`),A(z,`transform: translateX(${e(Q)??""}px);`)}),$e("innerHeight",v=>w(J,v,!0)),De(V,"clientHeight",v=>w(k,v)),De(V,"clientWidth",v=>w(D,v)),u(m,V),ge()}ce.__docgen={data:[{name:"id",visibility:"public",description:"Optional id for the scroller container",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'""'},{name:"class",visibility:"public",description:"Optional additional classes for the scroller container",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1},{name:"height",visibility:"public",description:"Height of the scroller container in CSS `vh` units. Set it to `100lvh` when using inside ScrollerBase.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'"200lvh"'},{name:"progress",visibility:"public",description:"Bindable progress value. Ideal range: `[0-1]`. Bind ScrollerBase's progress to this prop.",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"..."},{name:"direction",visibility:"public",description:"Direction of movement",keywords:[],kind:"let",type:{kind:"union",type:[{kind:"const",type:"string",value:"left",text:'"left"'},{kind:"const",type:"string",value:"right",text:'"right"'}],text:'"left" | "right"'},static:!1,readonly:!1,defaultValue:'"right"'},{name:"children",visibility:"public",description:"Content to scroll",keywords:[],kind:"let",type:{kind:"function",text:"Snippet<[]>"},static:!1,readonly:!1},{name:"stops",visibility:"public",description:"Array of numbers desired as stops for the scroller",keywords:[],kind:"let",type:{kind:"type",type:"array",text:"number[]"},static:!1,readonly:!1,defaultValue:"[]"},{name:"handleScroll",visibility:"public",description:"Should the component handle scroll events? Set it to `false` when using inside ScrollerBase.",keywords:[],kind:"let",type:{kind:"type",type:"boolean",text:"boolean"},static:!1,readonly:!1,defaultValue:"true"},{name:"scrubbed",visibility:"public",description:"Whether the stops should be scrubbed",keywords:[],kind:"let",type:{kind:"type",type:"boolean",text:"boolean"},static:!1,readonly:!1,defaultValue:"true"},{name:"easing",visibility:"public",description:"Easing function for the progress/stops",keywords:[],kind:"let",type:{kind:"function",text:"(t: number) => number"},static:!1,readonly:!1},{name:"duration",visibility:"public",description:"Duration of the easing animation in milliseconds. Effective only when scrubbed is false.",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"400"},{name:"showDebugInfo",visibility:"public",description:"Whether to show debug info",keywords:[],kind:"let",type:{kind:"type",type:"boolean",text:"boolean"},static:!1,readonly:!1,defaultValue:"false"},{name:"mappedStart",visibility:"public",description:"Modified starting scale. Default is 0",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"0"},{name:"mappedEnd",visibility:"public",description:"Modified ending scale. Default is 1",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"1"}],name:"HorizontalScroller.svelte"};var Gt=(m,t)=>w(t,!e(t)),zt=b('<button class="svelte-19jehqw"> </button>'),Xt=b("<!> <!> <!> <!>",1);function we(m,t){ve(t,!0);let p=ht(t,["$$slots","$$events","$$legacy"]);const n="In the mystical land of Foobaristan, the legendary hero Foo set out on an epic quest to find his missing semicolon, only to discover that Bar had accidentally used it as a bookmark inside a JSON file. Naturally, the entire kingdom crashed immediately. As the villagers panicked, Foo and Bar tried to fix the situation by turning everything off and on again, but all that did was anger the ancient deity known as “The Build System,” which now demanded three sacrifices: a clean cache, a fresh node_modules folder, and someones weekend. And thus began the saga nobody asked for, yet every developer somehow relates to.";let o=C(!0);var g=Xt(),h=L(g);ae(h,{text:n});var y=a(h,2);{var r=d=>{pe(d,{children:(x,q)=>{var _=zt();_.__click=[Gt,o];var P=s(_);M(()=>N(P,`Toggle scrubbed: ${e(o)??""}`)),u(x,_)},$$slots:{default:!0}})};H(y,d=>{t.toggleScrub&&d(r)})}var i=a(y,2);pe(i,{width:"fluid",children:(d,x)=>{ce(d,ft({showDebugInfo:!0},()=>p,{get scrubbed(){return e(o)}}))},$$slots:{default:!0}});var l=a(i,2);ae(l,{text:n}),u(m,g),ge()}je(["click"]);we.__docgen={data:[],name:"Demo.svelte"};var Jt=b('<div style="width: 400vw; height: 100lvh;"><img src="https://images.unsplash.com/photo-1533282960533-51328aa49826?q=80&amp;w=3642&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="An ultra wide scenic view of cityscape" style="width: 100%; height: 100%; object-fit: cover; padding: 0; margin: 0; background-color: #ccc;"/></div>');function Be(m){var t=Jt();u(m,t)}Be.__docgen={version:3,name:"DemoSnippet.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const Ut=""+new URL("ai-chart-xs-CE1-6d7r.png",import.meta.url).href,Yt=""+new URL("ai-chart-sm-j_WJ8d3e.png",import.meta.url).href,Kt=""+new URL("ai-chart-md-UPWzH8Eo.png",import.meta.url).href;var Qt=b('<div id="g-_ai-chart-xs" class="g-artboard svelte-v5mpys" style=""><div style="padding: 0 0 91.7004% 0;"></div> <div id="g-_ai-chart-xs-img" class="g-aiImg svelte-v5mpys"></div> <div id="g-ai0-1" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:3.216%;margin-top:-7.7px;left:0.5952%;width:99px;"><p class="g-pstyle0 svelte-v5mpys">Shake intensity</p></div> <div id="g-ai0-2" class="g-legend g-aiAbs g-aiPointText svelte-v5mpys" style="top:9.8251%;margin-top:-7.7px;left:4.9821%;width:47px;"><p class="g-pstyle0 svelte-v5mpys">Light</p></div> <div id="g-ai0-3" class="g-legend g-aiAbs g-aiPointText svelte-v5mpys" style="top:15.7733%;margin-top:-7.7px;left:4.9821%;width:69px;"><p class="g-pstyle0 svelte-v5mpys">Moderate</p></div> <div id="g-ai0-4" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:16.4343%;margin-top:-7.7px;left:79.0675%;width:82px;"><p class="g-pstyle0 svelte-v5mpys">Cap-Haitien</p></div> <div id="g-ai0-5" class="g-legend g-aiAbs g-aiPointText svelte-v5mpys" style="top:21.7216%;margin-top:-7.7px;left:4.9821%;width:55px;"><p class="g-pstyle0 svelte-v5mpys">Strong</p></div> <div id="g-ai0-6" class="g-legend g-aiAbs g-aiPointText svelte-v5mpys" style="top:28.0002%;margin-top:-7.7px;left:4.9821%;width:78px;"><p class="g-pstyle0 svelte-v5mpys">Very strong</p></div> <div id="g-ai0-7" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:28.9916%;margin-top:-7.7px;left:62.2348%;width:68px;"><p class="g-pstyle0 svelte-v5mpys">Gonaïves</p></div> <div id="g-ai0-8" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:39.9449%;margin-top:-14.9px;left:28.714%;margin-left:-36.5px;width:73px;"><p class="g-pstyle1 svelte-v5mpys">Caribbean</p> <p class="g-pstyle1 svelte-v5mpys">Sea</p></div> <div id="g-ai0-9" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:42.6579%;margin-top:-10.1px;left:68.5061%;width:77px;"><p class="g-pstyle2 svelte-v5mpys">HAITI</p></div> <div id="g-ai0-10" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:59.0632%;margin-top:-7.7px;left:11.2526%;width:63px;"><p class="g-pstyle0 svelte-v5mpys">Jeremie</p></div> <div id="g-ai0-11" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:61.1155%;margin-top:-8.9px;left:70.5455%;width:106px;"><p class="g-pstyle3 svelte-v5mpys">Port-au-Prince</p></div> <div id="g-ai0-12" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:62.1069%;margin-top:-8.9px;left:32.6015%;width:77px;"><p class="g-pstyle3 svelte-v5mpys">Epicenter</p></div> <div id="g-ai0-13" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:78.8906%;margin-top:-7.7px;left:63.9138%;width:58px;"><p class="g-pstyle0 svelte-v5mpys">Jacmel</p></div> <div id="g-ai0-14" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:80.2124%;margin-top:-7.7px;left:22.5649%;width:71px;"><p class="g-pstyle0 svelte-v5mpys">Les Cayes</p></div> <div id="g-ai0-15" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:87.8129%;margin-top:-7.7px;left:0.6179%;width:49px;"><p class="g-pstyle0 svelte-v5mpys">50 mi</p></div> <div id="g-ai0-16" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:91.0202%;margin-top:-11.4px;right:10.4418%;width:70px;"><p class="g-pstyle4 svelte-v5mpys">Dominican</p> <p class="g-pstyle4 svelte-v5mpys">Republic</p></div> <div id="g-ai0-17" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:93.7611%;margin-top:-7.7px;left:0.6179%;width:52px;"><p class="g-pstyle0 svelte-v5mpys">50 km</p></div></div>'),Zt=b('<div id="g-_ai-chart-sm" class="g-artboard svelte-v5mpys" style=""><div style="padding: 0 0 82.703% 0;"></div> <div id="g-_ai-chart-sm-img" class="g-aiImg svelte-v5mpys"></div> <div id="g-ai1-1" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:3.8773%;margin-top:-9.4px;left:0.3278%;width:111px;"><p class="g-pstyle0 svelte-v5mpys">Shake intensity</p></div> <div id="g-ai1-2" class="g-legend g-aiAbs g-aiPointText svelte-v5mpys" style="top:9.0933%;margin-top:-9.4px;left:3.0258%;width:52px;"><p class="g-pstyle0 svelte-v5mpys">Light</p></div> <div id="g-ai1-3" class="g-legend g-aiAbs g-aiPointText svelte-v5mpys" style="top:13.5979%;margin-top:-9.4px;left:3.0259%;width:77px;"><p class="g-pstyle0 svelte-v5mpys">Moderate</p></div> <div id="g-ai1-4" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:16.6801%;margin-top:-9.4px;left:70.3255%;width:92px;"><p class="g-pstyle0 svelte-v5mpys">Cap-Haitien</p></div> <div id="g-ai1-5" class="g-legend g-aiAbs g-aiPointText svelte-v5mpys" style="top:18.3397%;margin-top:-9.4px;left:3.0258%;width:61px;"><p class="g-pstyle0 svelte-v5mpys">Strong</p></div> <div id="g-ai1-6" class="g-legend g-aiAbs g-aiPointText svelte-v5mpys" style="top:22.6073%;margin-top:-9.4px;left:3.0258%;width:88px;"><p class="g-pstyle0 svelte-v5mpys">Very strong</p></div> <div id="g-ai1-7" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:28.5344%;margin-top:-9.4px;left:55.9181%;width:76px;"><p class="g-pstyle0 svelte-v5mpys">Gonaïves</p></div> <div id="g-ai1-8" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:38.8091%;margin-top:-17.7px;left:27.2818%;margin-left:-41px;width:82px;"><p class="g-pstyle1 svelte-v5mpys">Caribbean</p> <p class="g-pstyle1 svelte-v5mpys">Sea</p></div> <div id="g-ai1-9" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:39.9724%;margin-top:-8.6px;left:61.2858%;width:67px;"><p class="g-pstyle2 svelte-v5mpys">HAITI</p></div> <div id="g-ai1-10" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:56.985%;margin-top:-9.4px;left:12.2815%;width:69px;"><p class="g-pstyle0 svelte-v5mpys">Jeremie</p></div> <div id="g-ai1-11" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:59.1569%;margin-top:-9.5px;left:63.0314%;width:112px;"><p class="g-pstyle3 svelte-v5mpys">Port-au-Prince</p></div> <div id="g-ai1-12" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:60.1053%;margin-top:-9.5px;left:30.5543%;width:81px;"><p class="g-pstyle3 svelte-v5mpys">Epicenter</p></div> <div id="g-ai1-13" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:62.7194%;margin-top:-16.5px;left:91.2282%;margin-left:-57px;width:114px;"><p class="g-pstyle4 svelte-v5mpys">Dominican</p> <p class="g-pstyle4 svelte-v5mpys">Republic</p></div> <div id="g-ai1-14" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:75.4778%;margin-top:-9.4px;left:57.3552%;width:64px;"><p class="g-pstyle0 svelte-v5mpys">Jacmel</p></div> <div id="g-ai1-15" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:76.6632%;margin-top:-9.4px;left:21.9639%;width:79px;"><p class="g-pstyle0 svelte-v5mpys">Les Cayes</p></div> <div id="g-ai1-16" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:85.5251%;margin-top:-7.7px;left:0.1344%;width:49px;"><p class="g-pstyle5 svelte-v5mpys">50 mi</p></div> <div id="g-ai1-17" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:90.0297%;margin-top:-7.7px;left:0.1344%;width:52px;"><p class="g-pstyle5 svelte-v5mpys">50 km</p></div></div>'),es=b('<div id="g-_ai-chart-md" class="g-artboard svelte-v5mpys" style=""><div style="padding: 0 0 79.6009% 0;"></div> <div id="g-_ai-chart-md-img" class="g-aiImg svelte-v5mpys"></div> <div id="g-ai2-1" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:2.3515%;margin-top:-9.4px;left:0.3608%;width:111px;"><p class="g-pstyle0 svelte-v5mpys">Shake intensity</p></div> <div id="g-ai2-2" class="g-legend g-aiAbs g-aiPointText svelte-v5mpys" style="top:7.6811%;margin-top:-9.4px;left:2.6603%;width:52px;"><p class="g-pstyle0 svelte-v5mpys">Light</p></div> <div id="g-ai2-3" class="g-legend g-aiAbs g-aiPointText svelte-v5mpys" style="top:12.2494%;margin-top:-9.4px;left:2.6604%;width:77px;"><p class="g-pstyle0 svelte-v5mpys">Moderate</p></div> <div id="g-ai2-4" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:15.4852%;margin-top:-9.4px;left:70.3606%;width:92px;"><p class="g-pstyle0 svelte-v5mpys">Cap-Haitien</p></div> <div id="g-ai2-5" class="g-legend g-aiAbs g-aiPointText svelte-v5mpys" style="top:17.1983%;margin-top:-9.4px;left:2.6603%;width:61px;"><p class="g-pstyle0 svelte-v5mpys">Strong</p></div> <div id="g-ai2-6" class="g-legend g-aiAbs g-aiPointText svelte-v5mpys" style="top:21.7666%;margin-top:-9.4px;left:2.6603%;width:88px;"><p class="g-pstyle0 svelte-v5mpys">Very strong</p></div> <div id="g-ai2-7" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:27.6672%;margin-top:-9.4px;left:55.993%;width:76px;"><p class="g-pstyle0 svelte-v5mpys">Gonaïves</p></div> <div id="g-ai2-8" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:38.0099%;margin-top:-17.7px;left:27.2388%;margin-left:-41px;width:82px;"><p class="g-pstyle1 svelte-v5mpys">Caribbean</p> <p class="g-pstyle1 svelte-v5mpys">Sea</p></div> <div id="g-ai2-9" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:42.7626%;margin-top:-10.7px;left:62.8914%;width:80px;"><p class="g-pstyle2 svelte-v5mpys">HAITI</p></div> <div id="g-ai2-10" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:50.0029%;margin-top:-17.7px;left:92.295%;margin-left:-60.5px;width:121px;"><p class="g-pstyle3 svelte-v5mpys">Dominican</p> <p class="g-pstyle3 svelte-v5mpys">Republic</p></div> <div id="g-ai2-11" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:57.3608%;margin-top:-9.4px;left:12.2815%;width:69px;"><p class="g-pstyle0 svelte-v5mpys">Jeremie</p></div> <div id="g-ai2-12" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:60.2742%;margin-top:-10.7px;left:30.6995%;width:89px;"><p class="g-pstyle4 svelte-v5mpys">Epicenter</p></div> <div id="g-ai2-13" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:62.5583%;margin-top:-10.7px;left:66.3403%;width:125px;"><p class="g-pstyle4 svelte-v5mpys">Port-au-Prince</p></div> <div id="g-ai2-14" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:75.6338%;margin-top:-9.4px;left:57.8174%;width:64px;"><p class="g-pstyle0 svelte-v5mpys">Jacmel</p></div> <div id="g-ai2-15" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:77.3469%;margin-top:-9.4px;left:22.5239%;width:79px;"><p class="g-pstyle0 svelte-v5mpys">Les Cayes</p></div> <div id="g-ai2-16" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:86.936%;margin-top:-7.7px;left:0.1678%;width:49px;"><p class="g-pstyle5 svelte-v5mpys">50 mi</p></div> <div id="g-ai2-17" class="g-map-labels g-aiAbs g-aiPointText svelte-v5mpys" style="top:91.5043%;margin-top:-7.7px;left:0.1678%;width:52px;"><p class="g-pstyle5 svelte-v5mpys">50 km</p></div></div>'),ts=b('<div id="g-_ai-chart-box" class="svelte-v5mpys"><!> <!> <!></div>');function Ue(m){let t=C(void 0);var p=ts(),n=s(p);{var o=i=>{var l=Qt(),d=a(s(l),2);M(()=>A(d,`background-image: url(${Ut});`)),u(i,l)};H(n,i=>{e(t)&&e(t)>=0&&e(t)<510&&i(o)})}var g=a(n,2);{var h=i=>{var l=Zt(),d=a(s(l),2);M(()=>A(d,`background-image: url(${Yt});`)),u(i,l)};H(g,i=>{e(t)&&e(t)>=510&&e(t)<660&&i(h)})}var y=a(g,2);{var r=i=>{var l=es(),d=a(s(l),2);M(()=>A(d,`background-image: url(${Kt});`)),u(i,l)};H(y,i=>{e(t)&&e(t)>=660&&i(r)})}De(p,"clientWidth",i=>w(t,i)),u(m,p)}Ue.__docgen={version:3,name:"ai-chart.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};var ss=b('<div id="horizontal-stack" class="svelte-afdspf"><div style="width: 100vw;"><!></div> <div style="width: 100vw;"><!></div> <div style="width: 100vw;"><!></div></div>');function Ye(m){var t=ss(),p=s(t),n=s(p);Dt(n,{title:"Global abortion access",ariaLabel:"map",id:"abortion-rights-map",src:"https://graphics.reuters.com/USA-ABORTION/lgpdwggnwvo/media-embed.html",frameTitle:"",scrolling:"no",textWidth:"normal",width:"wider"});var o=a(p,2),g=s(o);Bt(g,{hed:"Reuters Graphics Interactive",dek:"The beginning of a beautiful page",section:"World News"});var h=a(o,2),y=s(h);pe(y,{width:"normal",children:(r,i)=>{Ue(r)},$$slots:{default:!0}}),u(m,t)}Ye.__docgen={version:3,name:"CustomChildrenSnippet.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const as=""+new URL("demo-xl-CSPlBKMA.jpg",import.meta.url).href,is=""+new URL("demo-lg-bwYV0FA8.jpg",import.meta.url).href,ls=""+new URL("layer-overlay-xl-B-RegR7m.png",import.meta.url).href,os=""+new URL("layer-overlay-lg-NPjejBS5.png",import.meta.url).href;var ns=b('<div id="g-demo-lg" class="g-artboard svelte-elkiko" style="max-width: 1199px;aspect-ratio: 2.75483870967742;" data-aspect-ratio="2.755" data-min-width="0" data-max-width="1199"><div id="g-demo-lg-img" class="g-demo-lg-img g-aiImg svelte-elkiko"></div> <div id="g-png-layer-overlay-lg" class="g-png-layer-overlay g-aiImg svelte-elkiko"></div></div>'),rs=b('<div id="g-demo-xl" class="g-artboard svelte-elkiko" style="min-width: 1200px;aspect-ratio: 4.80806451612903;" data-aspect-ratio="4.808" data-min-width="1200"><div id="g-demo-xl-img" class="g-demo-xl-img g-aiImg svelte-elkiko"></div> <div id="g-png-layer-overlay-xl" class="g-png-layer-overlay g-aiImg svelte-elkiko"></div> <div id="g-caption2" class="g-captions g-aiAbs svelte-elkiko" style="top:14.3548%;left:34.8126%;width:7.2794%;"><p class="g-pstyle0 g-taggedText g-htext svelte-elkiko" data-tagged-type="HTEXT" data-tagged-prop="captions.caption2"><!></p></div> <div id="g-caption3" class="g-captions g-aiAbs svelte-elkiko" style="top:14.3548%;left:60.6764%;width:7.2794%;"><p class="g-pstyle0 g-taggedText g-htext svelte-elkiko" data-tagged-type="HTEXT" data-tagged-prop="captions.caption3"><!></p></div> <div id="g-caption4" class="g-captions g-aiAbs svelte-elkiko" style="top:14.3548%;left:84.0914%;width:7.2794%;"><p class="g-pstyle0 g-taggedText g-htext svelte-elkiko" data-tagged-type="HTEXT" data-tagged-prop="captions.caption4"><!></p></div> <div id="g-caption1" class="g-captions g-aiAbs svelte-elkiko" style="top:14.3548%;left:4.1182%;width:4.8306%;"><p class="g-pstyle0 g-taggedText g-htext svelte-elkiko" data-tagged-type="HTEXT" data-tagged-prop="captions.caption1"><!></p></div></div>'),ds=b('<div id="g-demo-box" class="ai2svelte svelte-elkiko"><!> <!></div>');function Ee(m,t){ve(t,!0);let p=T(t,"onAiMounted",3,()=>{}),n=T(t,"onArtboardChange",3,()=>{}),o=T(t,"taggedText",19,()=>({text:{},htext:{}})),g=T(t,"debugTaggedText",3,!1),h=T(t,"artboardWidth",11,void 0),y,r=C(0),i=X(()=>h()??e(r)),l=C(void 0);Xe(()=>{p()()}),_t(()=>{var k;if(e(i)){const D=y.querySelectorAll(".g-artboard")[0];(D==null?void 0:D.id)!==((k=e(l))==null?void 0:k.id)&&(w(l,wt(()=>D),!0),n()(e(l)))}});var d=ds();let x;var q=s(d);{var _=k=>{var D=ns(),R=s(D),j=a(R,2);M(()=>{A(R,`background-image: url(${is});`),A(j,`opacity:1;;background-image: url(${os});`)}),u(k,D)};H(q,k=>{e(i)&&e(i)>=0&&e(i)<1200&&k(_)})}var P=a(q,2);{var E=k=>{var D=rs(),R=s(D),j=a(R,2),J=a(j,2),f=s(J),le=s(f);qe(le,()=>{var $,I,W;return((W=(I=($=o())==null?void 0:$.htext)==null?void 0:I.captions)==null?void 0:W.caption2)||""});var B=a(J,2),Q=s(B),oe=s(Q);qe(oe,()=>{var $,I,W;return((W=(I=($=o())==null?void 0:$.htext)==null?void 0:I.captions)==null?void 0:W.caption3)||""});var G=a(B,2),me=s(G),Z=s(me);qe(Z,()=>{var $,I,W;return((W=(I=($=o())==null?void 0:$.htext)==null?void 0:I.captions)==null?void 0:W.caption4)||""});var V=a(G,2),z=s(V),ne=s(z);qe(ne,()=>{var $,I,W;return((W=(I=($=o())==null?void 0:$.htext)==null?void 0:I.captions)==null?void 0:W.caption1)||""}),M(()=>{A(R,`background-image: url(${as});`),A(j,`opacity:1;;background-image: url(${ls});`)}),u(k,D)};H(P,k=>{e(i)&&e(i)>=1200&&k(E)})}Me(d,k=>y=k,()=>y),M(k=>x=A(d,"",x,k),[()=>({"--debug-tagged-text":g()?"visible":"hidden","--debug-stroke":g()?"2px":"0px"})]),$e("innerWidth",k=>w(r,k,!0)),u(m,d),ge()}Ee.__docgen={data:[{name:"onAiMounted",visibility:"public",keywords:[],kind:"let",type:{kind:"type",type:"object",text:"Function"},static:!1,readonly:!1,defaultValue:"function"},{name:"onArtboardChange",visibility:"public",keywords:[],kind:"let",type:{kind:"type",type:"object",text:"Function"},static:!1,readonly:!1,defaultValue:"function"},{name:"taggedText",visibility:"public",keywords:[],kind:"let",type:{kind:"type",type:"object",text:"Record<string, any>"},static:!1,readonly:!1,defaultValue:"{ text: {}, htext: {} }"},{name:"debugTaggedText",visibility:"public",keywords:[],kind:"let",type:{kind:"type",type:"boolean",text:"boolean"},static:!1,readonly:!1,defaultValue:"false"},{name:"artboardWidth",visibility:"public",keywords:[],kind:"let",type:{kind:"type",type:"any",text:"any"},static:!1,readonly:!1,defaultValue:"..."}],name:"demo.svelte"};var ps=b("<!> <!> <!>",1);function Ke(m){const t="In the mystical land of Foobaristan, the legendary hero Foo set out on an epic quest to find his missing semicolon, only to discover that Bar had accidentally used it as a bookmark inside a JSON file. Naturally, the entire kingdom crashed immediately. As the villagers panicked, Foo and Bar tried to fix the situation by turning everything off and on again, but all that did was anger the ancient deity known as “The Build System,” which now demanded three sacrifices: a clean cache, a fresh node_modules folder, and someones weekend. And thus began the saga nobody asked for, yet every developer somehow relates to.";var p=ps(),n=L(p);ae(n,{text:t});var o=a(n,2);pe(o,{width:"fluid",children:(h,y)=>{ce(h,{height:"800lvh",get easing(){return ze},children:(r,i)=>{Ee(r,{})},$$slots:{default:!0}})},$$slots:{default:!0}});var g=a(o,2);ae(g,{text:t}),u(m,p)}Ke.__docgen={version:3,name:"ScrollableGraphic.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};var vs=b("<!> <!> <!>",1);function Qe(m,t){ve(t,!0);const p="In the mystical land of Foobaristan, the legendary hero Foo set out on an epic quest to find his missing semicolon, only to discover that Bar had accidentally used it as a bookmark inside a JSON file. Naturally, the entire kingdom crashed immediately. As the villagers panicked, Foo and Bar tried to fix the situation by turning everything off and on again, but all that did was anger the ancient deity known as “The Build System,” which now demanded three sacrifices: a clean cache, a fresh node_modules folder, and someones weekend. And thus began the saga nobody asked for, yet every developer somehow relates to.";let n=C(0),o,g,h=.8,y=C(0);function r(){o&&(o.style.transform=`scale(1.5) translateX(${se(e(n),0,1,-15,85)}%)`),g!=null&&g.length&&g.forEach(_=>{let P=_.getBoundingClientRect().width,E=_.getBoundingClientRect().left+P/2;E<e(y)*h&&_.style.opacity!=="1"?_.style.opacity="1":E>e(y)*h&&_.style.opacity!=="0"&&(_.style.opacity="0")})}function i(_){o=_.querySelector(".g-png-layer-overlay"),g=Array.from(_.querySelectorAll(".g-captions")),o&&(window.removeEventListener("scroll",r),window.addEventListener("scroll",r,{passive:!0}),r())}var l=vs(),d=L(l);ae(d,{text:p});var x=a(d,2);pe(x,{width:"fluid",children:(_,P)=>{ce(_,{height:"800lvh",get easing(){return ze},showDebugInfo:!0,get progress(){return e(n)},set progress(E){w(n,E,!0)},children:(E,k)=>{Ee(E,{onArtboardChange:i,taggedText:{htext:{captions:{caption1:'<div class="scroller-caption"><strong>Caption 1!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',caption2:'<div class="scroller-caption"><strong>Caption 2!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',caption3:'<div class="scroller-caption"><strong>Caption 3!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',caption4:'<div class="scroller-caption"><strong>Caption 4!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>'}}}})},$$slots:{default:!0}})},$$slots:{default:!0}});var q=a(x,2);ae(q,{text:p}),$e("innerWidth",_=>w(y,_,!0)),u(m,l),ge()}Qe.__docgen={version:3,name:"AdvancedScrollableGraphic.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};var gs=b('<div class="step-foreground-container svelte-r2bvk6"><p class="svelte-r2bvk6">Step 1</p></div> <div class="step-foreground-container svelte-r2bvk6"><p class="svelte-r2bvk6">Step 2</p></div> <div class="step-foreground-container svelte-r2bvk6"><p class="svelte-r2bvk6">Step 3</p></div> <div class="step-foreground-container svelte-r2bvk6"><p class="svelte-r2bvk6">Step 4</p></div> <div class="step-foreground-container svelte-r2bvk6"><p class="svelte-r2bvk6">Step 5</p></div>',1),cs=b("<!> <!>",1);function Ze(m){const t="In the mystical land of Foobaristan, the legendary hero Foo set out on an epic quest to find his missing semicolon, only to discover that Bar had accidentally used it as a bookmark inside a JSON file. Naturally, the entire kingdom crashed immediately. As the villagers panicked, Foo and Bar tried to fix the situation by turning everything off and on again, but all that did was anger the ancient deity known as “The Build System,” which now demanded three sacrifices: a clean cache, a fresh node_modules folder, and someones weekend. And thus began the saga nobody asked for, yet every developer somehow relates to.";let p=C(0);var n=cs(),o=L(n);ae(o,{text:t});var g=a(o,2);$t(g,{query:"div.step-foreground-container",get progress(){return e(p)},set progress(r){w(p,r,!0)},backgroundSnippet:r=>{pe(r,{width:"fluid",children:(i,l)=>{ce(i,{height:"100lvh",handleScroll:!1,showDebugInfo:!0,get progress(){return e(p)},set progress(d){w(p,d,!0)},children:(d,x)=>{Ee(d,{})},$$slots:{default:!0}})},$$slots:{default:!0}})},foregroundSnippet:r=>{var i=gs();u(r,i)},$$slots:{backgroundSnippet:!0,foregroundSnippet:!0}}),u(m,n)}Ze.__docgen={version:3,name:"withScrollerBase.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const et={title:"Components/Graphics/HorizontalScroller",component:ce,tags:["autodocs"],parameters:{chromatic:{disableSnapshot:!0}}},{Story:ee}=St();let ms=C(0);var ys=b("<!> <!> <!> <!> <!> <!> <!>",1);function tt(m,t){ve(t,!0);var p=ys(),n=L(p);ee(n,{name:"Demo",children:(l,d)=>{we(l,{children:(x,q)=>{Be(x)},$$slots:{default:!0}})},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<DemoComponent>
<DemoSnippetBlock />
</DemoComponent>`}}});var o=a(n,2);ee(o,{name:"With stops and easing",exportName:"WithStops",children:(l,d)=>{we(l,{stops:[.2,.5,.9],duration:400,toggleScrub:!0,get easing(){return Ne},children:(x,q)=>{Be(x)},$$slots:{default:!0}})},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<DemoComponent
stops={[0.2, 0.5, 0.9]}
duration={400}
toggleScrub={true}
easing={quartInOut}
>
<DemoSnippetBlock />
</DemoComponent>`}}});var g=a(o,2);ee(g,{name:"Extended boundaries",children:(l,d)=>{we(l,{mappedStart:-.5,mappedEnd:1.5,get easing(){return Ne},stops:[0,1],children:(x,q)=>{Be(x)},$$slots:{default:!0}})},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<DemoComponent
mappedStart={-0.5}
mappedEnd={1.5}
easing={quartInOut}
stops={[0, 1]}
>
<DemoSnippetBlock />
</DemoComponent>`}}});var h=a(g,2);ee(h,{name:"Custom children",children:(l,d)=>{we(l,{children:(x,q)=>{Ye(x)},$$slots:{default:!0}})},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<DemoComponent>
<CustomChildrenBlock />
</DemoComponent>`}}});var y=a(h,2);ee(y,{name:"Scrollable ai2svelte",children:(l,d)=>{Ke(l)},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:"<ScrollableGraphic />"}}});var r=a(y,2);ee(r,{name:"Scrollable ai2svelte (advanced)",children:(l,d)=>{Qe(l,{})},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:"<AdvancedScrollableGraphic />"}}});var i=a(r,2);ee(i,{name:"With ScrollerBase",children:(l,d)=>{Ze(l)},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:"<WithScrollerBaseComponent />"}}}),$e("innerWidth",l=>w(ms,l,!0)),u(m,p),ge()}tt.__docgen={version:3,name:"HorizontalScroller.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const ie=kt(tt,et),us=["Demo","WithStops","ExtendedBoundaries","CustomChildren","ScrollableAi2svelte","ScrollableAi2svelteAdvanced","WithScrollerBase"],fs=ie.Demo,hs=ie.WithStops,bs=ie.ExtendedBoundaries,xs=ie.CustomChildren,_s=ie.ScrollableAi2svelte,ws=ie.ScrollableAi2svelteAdvanced,ks=ie.WithScrollerBase,js=Object.freeze(Object.defineProperty({__proto__:null,CustomChildren:xs,Demo:fs,ExtendedBoundaries:bs,ScrollableAi2svelte:_s,ScrollableAi2svelteAdvanced:ws,WithScrollerBase:ks,WithStops:hs,__namedExportsOrder:us,default:et},Symbol.toStringTag,{value:"Module"}));export{js as H};