@stackflow/plugin-basic-ui 0.19.2 → 0.20.0

package/dist/index.js

@@ -1,2 +1,992 @@
-"use strict";var tt=Object.create;var D=Object.defineProperty,rt=Object.defineProperties,ot=Object.getOwnPropertyDescriptor,nt=Object.getOwnPropertyDescriptors,at=Object.getOwnPropertyNames,le=Object.getOwnPropertySymbols,st=Object.getPrototypeOf,pe=Object.prototype.hasOwnProperty,it=Object.prototype.propertyIsEnumerable;var de=(e,o,t)=>o in e?D(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,me=(e,o)=>{for(var t in o||(o={}))pe.call(o,t)&&de(e,t,o[t]);if(le)for(var t of le(o))it.call(o,t)&&de(e,t,o[t]);return e},ue=(e,o)=>rt(e,nt(o));var fe=(e,o)=>{for(var t in o)D(e,t,{get:o[t],enumerable:!0})},he=(e,o,t,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of at(o))!pe.call(e,a)&&a!==t&&D(e,a,{get:()=>o[a],enumerable:!(r=ot(o,a))||r.enumerable});return e};var P=(e,o,t)=>(t=e!=null?tt(st(e)):{},he(o||!e||!e.__esModule?D(t,"default",{value:e,enumerable:!0}):t,e)),ct=e=>he(D({},"__esModule",{value:!0}),e);var qt={};fe(qt,{AppScreen:()=>$e,BottomSheet:()=>Ue,Modal:()=>et,basicUIPlugin:()=>ge,cssVars:()=>c});module.exports=ct(qt);var ye=require("@vanilla-extract/dynamic"),A=P(require("react"));var re={};fe(re,{android:()=>lt,cupertino:()=>dt,globalVars:()=>c,rootAndroid:()=>pt,rootCupertino:()=>mt});var lt="_1coppmz0",dt="_1coppmz1",c={backgroundColor:"var(--stackflow-plugin-basic-ui-background-color)",dimBackgroundColor:"var(--stackflow-plugin-basic-ui-dim-background-color)",appBar:{borderColor:"var(--stackflow-plugin-basic-ui-app-bar-border-color)",borderSize:"var(--stackflow-plugin-basic-ui-app-bar-border-size)",height:"var(--stackflow-plugin-basic-ui-app-bar-height)",iconColor:"var(--stackflow-plugin-basic-ui-app-bar-icon-color)",textColor:"var(--stackflow-plugin-basic-ui-app-bar-text-color)",backgroundColor:"var(--stackflow-plugin-basic-ui-app-bar-background-color)",showTransitionDuration:"var(--stackflow-plugin-basic-ui-app-bar-show-transition-duration)"},bottomSheet:{borderRadius:"var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)"},modal:{borderRadius:"var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)"}},pt=":root[data-stackflow-plugin-basic-ui-theme=android]",mt=":root[data-stackflow-plugin-basic-ui-theme=cupertino]";function _(e){return Object.entries(e).reduce((o,[t,r])=>(r!=null&&(o[t]=r),o),{})}function $(e,o,t){let r=()=>{e.removeEventListener(o,r),t()};e.addEventListener(o,r)}var ve=e=>(e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)});var xe=()=>{};function H(e){requestAnimationFrame(()=>{requestAnimationFrame(()=>{e()})})}var be=(0,A.createContext)({theme:"android"}),ut=be.Provider;function F(){return(0,A.useContext)(be)}var ge=e=>()=>({key:"basic-ui",wrapStack({stack:o}){var t,r,a,s,l,i,n;return A.default.createElement(ut,{value:e},A.default.createElement("div",{className:typeof window!="undefined"?re[e.theme]:void 0,style:(0,ye.assignInlineVars)(_({[c.backgroundColor]:e.backgroundColor,[c.dimBackgroundColor]:e.dimBackgroundColor,[c.appBar.borderColor]:(t=e.appBar)==null?void 0:t.borderColor,[c.appBar.borderSize]:(r=e.appBar)==null?void 0:r.borderSize,[c.appBar.height]:(a=e.appBar)==null?void 0:a.height,[c.appBar.iconColor]:(s=e.appBar)==null?void 0:s.iconColor,[c.appBar.textColor]:(l=e.appBar)==null?void 0:l.textColor,[c.bottomSheet.borderRadius]:(i=e.bottomSheet)==null?void 0:i.borderRadius,[c.modal.borderRadius]:(n=e.modal)==null?void 0:n.borderRadius}))},o.render()))}});var J=require("@stackflow/react"),Oe=require("@vanilla-extract/dynamic"),q=P(require("react"));var G=require("react");function B(e){let[o,t]=(0,G.useState)(void 0);return(0,G.useEffect)(()=>{H(()=>{t(e)})},[e]),o}var W=require("react");function Ce({outerRef:e,innerRef:o,enable:t}){let[r,a]=(0,W.useState)(void 0);return(0,W.useEffect)(()=>{let s=e&&"current"in e&&e.current,l=o.current;return!t||!s||!l?xe:ve(()=>{let n=s.clientWidth,p=l.offsetLeft,v=l.clientWidth,b=n-p-v,m=Math.max(p,b);a(n-2*m)})},[]),{maxWidth:r}}var ke=require("@stackflow/react"),oe=require("react"),O={};function C({styleName:e,refs:o,effect:t}){let r=(0,ke.useActivity)();(0,oe.useEffect)(()=>(O[e]||(O[e]=new Map),O[e].set(r.zIndex,{refs:o,hasEffect:!!t}),()=>{O[e].delete(r.zIndex)}),[r.id,o,t]),(0,oe.useEffect)(()=>{if(!t)return()=>{};let a=(()=>{let l=[];for(let i=1;i<=r.zIndex;i+=1){let n=O[e].get(r.zIndex-i);if(n!=null&&n.refs&&(l=[...l,...n.refs]),n!=null&&n.hasEffect)break}return l})(),s=t({activityTransitionState:r.transitionState,refs:a});return()=>{s==null||s()}},[r.transitionState])}function Ee({refs:e,hasEffect:o}){C({styleName:"hide",refs:e,effect:o?({activityTransitionState:t,refs:r})=>{let a=()=>{r.forEach(s=>{if(!s.current)return;let l=s.current;l.style.display=""})};switch(t){case"enter-done":return r.forEach(s=>{if(!s.current)return;let l=s.current;l.style.display="none"}),()=>{a()};default:return a(),()=>{}}}:void 0})}var ft=32,j=80;function qe({refs:e,theme:o,hasEffect:t}){C({styleName:"offset",refs:e,effect:t?({activityTransitionState:r,refs:a})=>{let s=o==="cupertino"?`translateX(-${j/16}rem)`:`translateY(-${ft/16}rem)`,l=()=>{H(()=>{a.forEach(i=>{if(!i.current)return;let n=i.current;n.style.transform="",$(n,"transitionend",()=>{n.style.transition=""})})})};switch(r){case"enter-active":case"enter-done":switch(a.forEach(i=>{!i.current||(i.current.style.transition="var(--stackflow-transition-duration)",i.current.style.transform=s)}),r){case"enter-done":return()=>{l()};case"enter-active":default:return()=>{}}case"exit-active":case"exit-done":return H(()=>{l()}),()=>{};default:return()=>{}}}:void 0})}function Re({theme:e,dimRef:o,edgeRef:t,paperRef:r,hasEffect:a,onSwiped:s}){C({styleName:"swipe-back",refs:[r],effect:a?({refs:l})=>{if(e!=="cupertino")return()=>{};if(!o.current||!t.current||!r.current)return()=>{};let i=o.current,n=t.current,p=r.current,v=null,b=null,m=null,k=[],f=()=>{v=null,b=null,m=null,k=[]},S=!1;function N(u){S||(S=!0,requestAnimationFrame(()=>{let g=u/p.clientWidth;i.style.opacity=`${1-g}`,i.style.transition="0s",p.style.overflowY="hidden",p.style.transform=`translateX(${u}px)`,p.style.transition="0s",l.forEach(x=>{var d;!x.current||(x.current.style.transform=`translateX(${-1*(1-g)*j}px)`,x.current.style.transition="0s",((d=x.current.parentElement)==null?void 0:d.style.display)==="none"&&(x.current.parentElement.style.display="block"))}),S=!1}))}function L({swiped:u}){return new Promise(g=>{requestAnimationFrame(()=>{i.style.opacity=`${u?0:1}`,i.style.transition="var(--stackflow-transition-duration)",p.style.overflowY="hidden",p.style.transform=`translateX(${u?"100%":"0"})`,p.style.transition="var(--stackflow-transition-duration)",l.forEach(d=>{!d.current||(d.current.style.transition="var(--stackflow-transition-duration)",d.current.style.transform=`translateX(${u?"0":`-${j/16}rem`})`)});let x=[...k];g(),$(p,"transitionend",()=>{i.style.opacity="",p.style.overflowY="",p.style.transform="",l.forEach((d,V)=>{if(!d.current)return;let R=x[V];u?(d.current.style.transition="",d.current.style.transform="",d.current.parentElement&&(d.current.parentElement.style.display="")):R&&(d.current.style.transition=R.style.transition,d.current.style.transform=R.style.transform,d.current.parentElement&&R.parentElement&&(d.current.parentElement.style.display=R.parentElement.style.display))})})})})}let h=u=>{var x;let{activeElement:g}=document;(x=g==null?void 0:g.blur)==null||x.call(g),v=m=u.touches[0].clientX,b=Date.now(),k=l.map(d=>d.current?{style:{transform:d.current.style.transform,transition:d.current.style.transition},parentElement:d.current.parentElement?{style:{display:d.current.parentElement.style.display}}:void 0}:{style:{transform:"",transition:""}})},T=u=>{if(!v){f();return}m=u.touches[0].clientX,N(m-v)},w=()=>{if(!v||!b||!m){f();return}let u=Date.now(),x=(m-v)/(u-b)>1||m/p.clientWidth>.4;x&&(s==null||s()),Promise.resolve().then(()=>L({swiped:x})).then(()=>f())};return n.addEventListener("touchstart",h,{passive:!0}),n.addEventListener("touchmove",T,{passive:!0}),n.addEventListener("touchend",w,{passive:!0}),n.addEventListener("touchcancel",w,{passive:!0}),()=>{n.removeEventListener("touchstart",h),n.removeEventListener("touchmove",T),n.removeEventListener("touchend",w),n.removeEventListener("touchcancel",w)}}:void 0})}var Z=require("@stackflow/react"),De=require("@vanilla-extract/dynamic"),y=P(require("react"));var ne=P(require("react")),ht=e=>ne.default.createElement("svg",{className:e.className,width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},ne.default.createElement("path",{d:"M11.5659 5.56564C11.8783 5.25322 11.8783 4.74669 11.5659 4.43427C11.2535 4.12185 10.7469 4.12185 10.4345 4.43427L3.43451 11.4343C3.12209 11.7467 3.12209 12.2532 3.43451 12.5656L10.4345 19.5656C10.7469 19.8781 11.2535 19.8781 11.5659 19.5656C11.8783 19.2532 11.8783 18.7467 11.5659 18.4343L5.93157 12.8H20.0002C20.442 12.8 20.8002 12.4418 20.8002 12C20.8002 11.5581 20.442 11.2 20.0002 11.2H5.93157L11.5659 5.56564Z",fill:"currentColor"})),X=ht;var U=P(require("react")),vt=e=>U.default.createElement("svg",{className:e.className,width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},U.default.createElement("path",{d:"M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z",fill:"currentColor"}),U.default.createElement("path",{d:"M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z",fill:"currentColor"})),ae=vt;var se=require("@vanilla-extract/recipes/createRuntimeFn"),_e=(0,se.createRuntimeFn)({defaultClassName:"_1yk3a450 dhthxq4 dhthxq8 dhthxq7 dhthxq0 dhthxqg _1dlf4347",variantClassNames:{border:{true:"_1yk3a451"}},defaultVariants:{},compoundVariants:[]}),ie="_1yk3a453 dhthxq8 dhthxq7 dhthxqa dhthxqe dhthxqh",Se="_1yk3a455 dhthxq8 dhthxq7",Ne=(0,se.createRuntimeFn)({defaultClassName:"_1yk3a456",variantClassNames:{hasLeft:{true:"_1yk3a457"}},defaultVariants:{},compoundVariants:[]}),we="_1yk3a458 dhthxqh dhthxq4 dhthxq2 dhthxqe",ze="_1yk3a459 dhthxqb dhthxqc dhthxq0",Me="_1yk3a453 dhthxq8 dhthxq7 dhthxqa dhthxqe dhthxqh",Ie="_1yk3a452 dhthxq8 dhthxq7 dhthxq1",Le="_1yk3a45a dhthxq8 dhthxq7 dhthxq1 dhthxq5";var Y=require("@vanilla-extract/recipes/createRuntimeFn");var Te=(0,Y.createRuntimeFn)({defaultClassName:"dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqb",variantClassNames:{transitionState:{"enter-active":"_1dlf4349","enter-done":"_1dlf434a","exit-active":"_1dlf434b","exit-done":"_1dlf434c"}},defaultVariants:{},compoundVariants:[]});var Pe="_1dlf434i dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4346 _1dlf4348",Ae=(0,Y.createRuntimeFn)({defaultClassName:"_1dlf434l dhthxq4 dhthxq2 dhthxq3 dhthxq1",variantClassNames:{hasAppBar:{true:"_1dlf434m"}},defaultVariants:{},compoundVariants:[]});var Ve=(0,Y.createRuntimeFn)({defaultClassName:"_1dlf434j dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4347 _1dlf4348",variantClassNames:{hasAppBar:{true:"_1dlf434k dhthxqf"}},defaultVariants:{},compoundVariants:[]}),z={transitionDuration:"var(--_1dlf4340)",zIndexes:{dim:"var(--_1dlf4341)",paper:"var(--_1dlf4342)",edge:"var(--_1dlf4343)",appBar:"var(--_1dlf4344)"},appBar:{center:{mainWidth:"var(--_1dlf4345)"}}};var yt=y.default.forwardRef(({title:e,appendLeft:o,appendRight:t,backButton:r,closeButton:a,closeButtonLocation:s="left",border:l=!0,iconColor:i,textColor:n,borderColor:p,borderSize:v,height:b,backgroundColor:m,onTopClick:k},f)=>{var R;let S=(0,Z.useActions)(),N=(0,Z.useActivity)(),L=F(),h=(R=L.appBar)==null?void 0:R.closeButton,T=(0,y.useRef)(null),{maxWidth:w}=Ce({outerRef:f,innerRef:T,enable:L.theme==="cupertino"}),u=E=>{r&&"onClick"in r&&r.onClick&&r.onClick(E),E.defaultPrevented||S.pop()},g=()=>{var E;return N.isRoot?null:r?"render"in r&&r.render?(E=r.render)==null?void 0:E.call(r):y.default.createElement("button",{type:"button",className:ie,onClick:u},"renderIcon"in r&&r.renderIcon?r.renderIcon():y.default.createElement(X,null)):y.default.createElement("button",{type:"button",className:ie,onClick:u},y.default.createElement(X,null))},x=E=>{var ce;a&&"onClick"in a&&a.onClick&&a.onClick(E),!E.defaultPrevented&&h&&"onClick"in h&&((ce=h.onClick)==null||ce.call(h,E))},d=()=>{var E;return!a&&!((E=L.appBar)!=null&&E.closeButton)||!N.isRoot?null:a&&"render"in a&&a.render?a.render():h&&"render"in h&&h.render?h.render():y.default.createElement("button",{type:"button",className:Me,onClick:x},(()=>a&&"renderIcon"in a&&a.renderIcon?a.renderIcon():h&&"renderIcon"in h&&h.renderIcon?h.renderIcon():y.default.createElement(ae,null))())},V=!!(s==="left"&&a||r||o);return y.default.createElement("div",{ref:f,className:_e({border:l}),style:(0,De.assignInlineVars)(_({[c.appBar.iconColor]:i,[c.appBar.textColor]:n,[c.appBar.borderColor]:p,[c.appBar.borderSize]:v,[c.appBar.height]:b,[c.appBar.backgroundColor]:m||c.backgroundColor,[z.appBar.center.mainWidth]:`${w}px`}))},y.default.createElement("div",{className:Ie},s==="left"&&d(),g(),o==null?void 0:o()),y.default.createElement("div",{ref:T,className:Se},y.default.createElement("div",{className:Ne({hasLeft:V})},typeof e=="string"?y.default.createElement("div",{className:ze},e):e,y.default.createElement("button",{className:we,type:"button","aria-hidden":"true",onClick:k}))),y.default.createElement("div",{className:Le},t==null?void 0:t(),s==="right"&&d()))}),He=yt;var bt=({backgroundColor:e,dimBackgroundColor:o,appBar:t,showAppBar:r=!!t,showAppBarTransitionDuration:a,preventSwipeBack:s,children:l})=>{let i=F(),n=(0,J.useActivity)(),{pop:p}=(0,J.useActions)(),v=(0,q.useRef)(null),b=(0,q.useRef)(null),m=(0,q.useRef)(null),k=(0,q.useRef)(null),f=(0,q.useRef)(null);Ee({refs:[v],hasEffect:!0}),qe({theme:i.theme,refs:i.theme==="cupertino"?[m]:[m,f],hasEffect:!0}),Re({theme:i.theme,dimRef:b,edgeRef:k,paperRef:m,hasEffect:!0,onSwiped(){p()}});let S=!!t&&r,N=n.zIndex*5,L=N,h=N+(i.theme==="cupertino"&&S?1:3),T=N+4,w=N+7,{transitionState:u}=n,g=B(u),x=d=>{var V,R;(V=t==null?void 0:t.onTopClick)==null||V.call(t,d),d.defaultPrevented||(R=m.current)==null||R.scroll({top:0,behavior:"smooth"})};return q.default.createElement("div",{ref:v,className:Te({transitionState:u==="enter-done"||u==="exit-done"?u:g}),style:(0,Oe.assignInlineVars)(_({[c.backgroundColor]:e,[c.dimBackgroundColor]:o,[c.appBar.height]:r?t==null?void 0:t.height:"0",[c.appBar.showTransitionDuration]:a,[z.zIndexes.dim]:`${L}`,[z.zIndexes.paper]:`${h}`,[z.zIndexes.edge]:`${T}`,[z.zIndexes.appBar]:`${w}`,[z.transitionDuration]:n.transitionState==="enter-active"||n.transitionState==="exit-active"?"var(--stackflow-transition-duration)":"0ms"}))},q.default.createElement("div",{className:Pe,ref:b}),q.default.createElement("div",{key:n.id,className:Ve({hasAppBar:S}),ref:m},l),!n.isRoot&&i.theme==="cupertino"&&!s&&q.default.createElement("div",{className:Ae({hasAppBar:S}),ref:k}),t&&q.default.createElement(He,ue(me({},t),{ref:f,onTopClick:x})))},$e=bt;var Q=require("@stackflow/react"),Xe=require("@vanilla-extract/dynamic"),M=P(require("react"));var Fe=require("@vanilla-extract/recipes/createRuntimeFn"),Ge=(0,Fe.createRuntimeFn)({defaultClassName:"dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqb",variantClassNames:{transitionState:{"enter-active":"_1ht38h04","enter-done":"_1ht38h05","exit-active":"_1ht38h06","exit-done":"_1ht38h07"}},defaultVariants:{},compoundVariants:[]}),We="_1ht38h0d dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqb dhthxq9 dhthxq7 _1ht38h03";var je="_1ht38h0e dhthxqb _1ht38h03",K={transitionDuration:"var(--_1ht38h00)",zIndexes:{dim:"var(--_1ht38h01)",paper:"var(--_1ht38h02)"}};var Ct=({borderRadius:e="1rem",backgroundColor:o,dimBackgroundColor:t,onOutsideClick:r,children:a})=>{let s=(0,Q.useActivity)(),{pop:l}=(0,Q.useActions)(),i=(0,M.useRef)(null),n=(0,M.useRef)(null);C({styleName:"hide",refs:[i]}),C({styleName:"offset",refs:[n]}),C({styleName:"swipe-back",refs:[n]});let p=(0,M.useRef)(!1),v=f=>{r==null||r(f),!f.defaultPrevented&&(p.current||(p.current=!0,l()))},b=f=>{f.stopPropagation()},m=s.zIndex*5+3,k=s.zIndex*5+4;return M.default.createElement("div",{className:Ge({transitionState:B(s.transitionState)}),ref:i,style:(0,Xe.assignInlineVars)(_({[c.bottomSheet.borderRadius]:e,[c.backgroundColor]:o,[c.dimBackgroundColor]:t,[K.zIndexes.dim]:`${m}`,[K.zIndexes.paper]:`${k}`,[K.transitionDuration]:s.transitionState==="enter-active"||s.transitionState==="exit-active"?"var(--stackflow-transition-duration)":"0ms"}))},M.default.createElement("div",{className:We,ref:n,onClick:v},M.default.createElement("div",{className:je,onClick:b},a)))},Ue=Ct;var te=require("@stackflow/react"),Qe=require("@vanilla-extract/dynamic"),I=P(require("react"));var Ye=require("@vanilla-extract/recipes/createRuntimeFn"),Ze=(0,Ye.createRuntimeFn)({defaultClassName:"dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqb",variantClassNames:{transitionState:{"enter-active":"_5ozg8c4","enter-done":"_5ozg8c5","exit-active":"_5ozg8c6","exit-done":"_5ozg8c7"}},defaultVariants:{},compoundVariants:[]}),Je="_5ozg8cd dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqb dhthxq8 dhthxq7 dhthxqa _5ozg8c3";var Ke="_5ozg8ce dhthxqb _5ozg8c3",ee={transitionDuration:"var(--_5ozg8c0)",zIndexes:{dim:"var(--_5ozg8c1)",paper:"var(--_5ozg8c2)"}};var Et=({backgroundColor:e,dimBackgroundColor:o,borderRadius:t="1rem",onOutsideClick:r,children:a})=>{let s=(0,te.useActivity)(),{pop:l}=(0,te.useActions)(),i=(0,I.useRef)(null),n=(0,I.useRef)(null);C({styleName:"hide",refs:[i]}),C({styleName:"offset",refs:[n]}),C({styleName:"swipe-back",refs:[n]});let p=(0,I.useRef)(!1),v=f=>{r==null||r(f),!f.defaultPrevented&&(p.current||(p.current=!0,l()))},b=f=>{f.stopPropagation()},m=s.zIndex*5+3,k=s.zIndex*5+4;return I.default.createElement("div",{className:Ze({transitionState:B(s.transitionState)}),ref:i,style:(0,Qe.assignInlineVars)(_({[c.bottomSheet.borderRadius]:t,[c.backgroundColor]:e,[c.dimBackgroundColor]:o,[ee.zIndexes.dim]:`${m}`,[ee.zIndexes.paper]:`${k}`,[ee.transitionDuration]:s.transitionState==="enter-active"||s.transitionState==="exit-active"?"var(--stackflow-transition-duration)":"0ms"}))},I.default.createElement("div",{className:Je,ref:n,onClick:v},I.default.createElement("div",{className:Ke,onClick:b},a)))},et=Et;
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  AppScreen: () => AppScreen_default,
+  BottomSheet: () => BottomSheet_default,
+  Modal: () => Modal_default,
+  basicUIPlugin: () => basicUIPlugin,
+  cssVars: () => globalVars
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/basicUIPlugin.tsx
+var import_dynamic = require("@vanilla-extract/dynamic");
+var import_react = __toESM(require("react"));
+
+// src/theme.css.ts
+var theme_css_exports = {};
+__export(theme_css_exports, {
+  android: () => android,
+  cupertino: () => cupertino,
+  globalVars: () => globalVars,
+  rootAndroid: () => rootAndroid,
+  rootCupertino: () => rootCupertino
+});
+var android = "theme__1coppmz0";
+var cupertino = "theme__1coppmz1";
+var globalVars = { backgroundColor: "var(--stackflow-plugin-basic-ui-background-color)", dimBackgroundColor: "var(--stackflow-plugin-basic-ui-dim-background-color)", appBar: { borderColor: "var(--stackflow-plugin-basic-ui-app-bar-border-color)", borderSize: "var(--stackflow-plugin-basic-ui-app-bar-border-size)", height: "var(--stackflow-plugin-basic-ui-app-bar-height)", heightTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration)", minHeight: "var(--stackflow-plugin-basic-ui-app-bar-min-height)", iconColor: "var(--stackflow-plugin-basic-ui-app-bar-icon-color)", textColor: "var(--stackflow-plugin-basic-ui-app-bar-text-color)", backgroundColor: "var(--stackflow-plugin-basic-ui-app-bar-background-color)" }, bottomSheet: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" }, modal: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" } };
+var rootAndroid = ":root[data-stackflow-plugin-basic-ui-theme=android]";
+var rootCupertino = ":root[data-stackflow-plugin-basic-ui-theme=cupertino]";
+
+// src/utils/compact.ts
+function compact(arr) {
+  return arr.filter(
+    (item) => item !== void 0 && item !== null
+  );
+}
+
+// src/utils/compactMap.ts
+function compactMap(obj) {
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    if (value !== null && value !== void 0) {
+      acc[key] = value;
+    }
+    return acc;
+  }, {});
+}
+
+// src/utils/listenOnce.ts
+function listenOnce(el, type, cb) {
+  const listener = () => {
+    el.removeEventListener(type, listener);
+    cb();
+  };
+  el.addEventListener(type, listener);
+}
+
+// src/utils/listenResize.ts
+var listenResize = (cb) => {
+  cb();
+  window.addEventListener("resize", cb);
+  return () => {
+    window.removeEventListener("resize", cb);
+  };
+};
+
+// src/utils/noop.ts
+var noop = () => {
+};
+
+// src/utils/requestNextFrame.tsx
+function requestNextFrame(cb) {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      cb();
+    });
+  });
+}
+
+// src/basicUIPlugin.tsx
+var GlobalOptionsContext = (0, import_react.createContext)({
+  theme: "android"
+});
+var GlobalOptionsProvider = GlobalOptionsContext.Provider;
+function useGlobalOptions() {
+  return (0, import_react.useContext)(GlobalOptionsContext);
+}
+var basicUIPlugin = (options) => () => ({
+  key: "basic-ui",
+  wrapStack({ stack }) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return /* @__PURE__ */ import_react.default.createElement(GlobalOptionsProvider, {
+      value: options
+    }, /* @__PURE__ */ import_react.default.createElement("div", {
+      className: typeof window !== "undefined" ? compact([theme_css_exports[options.theme], options.rootClassName]).join(" ") : options.rootClassName,
+      style: (0, import_dynamic.assignInlineVars)(
+        compactMap({
+          [globalVars.backgroundColor]: options.backgroundColor,
+          [globalVars.dimBackgroundColor]: options.dimBackgroundColor,
+          [globalVars.appBar.borderColor]: (_a = options.appBar) == null ? void 0 : _a.borderColor,
+          [globalVars.appBar.borderSize]: (_b = options.appBar) == null ? void 0 : _b.borderSize,
+          [globalVars.appBar.height]: (_c = options.appBar) == null ? void 0 : _c.height,
+          [globalVars.appBar.iconColor]: (_d = options.appBar) == null ? void 0 : _d.iconColor,
+          [globalVars.appBar.textColor]: (_e = options.appBar) == null ? void 0 : _e.textColor,
+          [globalVars.bottomSheet.borderRadius]: (_f = options.bottomSheet) == null ? void 0 : _f.borderRadius,
+          [globalVars.modal.borderRadius]: (_g = options.modal) == null ? void 0 : _g.borderRadius
+        })
+      )
+    }, stack.render()));
+  }
+});
+
+// src/components/AppScreen.tsx
+var import_react10 = require("@stackflow/react");
+var import_dynamic3 = require("@vanilla-extract/dynamic");
+var import_react11 = __toESM(require("react"));
+
+// src/hooks/useLazy.tsx
+var import_react2 = require("react");
+function useLazy(value) {
+  const [state, setState] = (0, import_react2.useState)(void 0);
+  (0, import_react2.useEffect)(() => {
+    requestNextFrame(() => {
+      setState(value);
+    });
+  }, [value]);
+  return state;
+}
+
+// src/hooks/useMaxWidth.ts
+var import_react3 = require("react");
+function useMaxWidth({
+  outerRef,
+  innerRef,
+  enable
+}) {
+  const [maxWidth, setMaxWidth] = (0, import_react3.useState)(void 0);
+  (0, import_react3.useEffect)(() => {
+    const $outer = outerRef && "current" in outerRef && outerRef.current;
+    const $inner = innerRef.current;
+    if (!enable || !$outer || !$inner) {
+      return noop;
+    }
+    const dispose = listenResize(() => {
+      const screenWidth = $outer.clientWidth;
+      const leftWidth = $inner.offsetLeft;
+      const centerWidth = $inner.clientWidth;
+      const rightWidth = screenWidth - leftWidth - centerWidth;
+      const sideMargin = Math.max(leftWidth, rightWidth);
+      setMaxWidth(screenWidth - 2 * sideMargin);
+    });
+    return dispose;
+  }, []);
+  return {
+    maxWidth
+  };
+}
+
+// src/hooks/useNullableActivity.ts
+var import_react4 = require("@stackflow/react");
+function useNullableActivity() {
+  return (0, import_react4.useActivity)();
+}
+
+// src/hooks/useStyleEffect.ts
+var import_react5 = require("react");
+var connections = {};
+function useStyleEffect({
+  styleName,
+  refs,
+  effect
+}) {
+  const activity = useNullableActivity();
+  (0, import_react5.useEffect)(() => {
+    if (!activity) {
+      return () => {
+      };
+    }
+    if (!connections[styleName]) {
+      connections[styleName] = /* @__PURE__ */ new Map();
+    }
+    connections[styleName].set(activity.zIndex, {
+      refs,
+      hasEffect: !!effect
+    });
+    return () => {
+      connections[styleName].delete(activity.zIndex);
+    };
+  }, [activity == null ? void 0 : activity.id, refs, effect]);
+  (0, import_react5.useEffect)(() => {
+    if (!activity) {
+      return () => {
+      };
+    }
+    if (!effect) {
+      return () => {
+      };
+    }
+    const refs2 = (() => {
+      let arr = [];
+      for (let i = 1; i <= activity.zIndex; i += 1) {
+        const connection = connections[styleName].get(activity.zIndex - i);
+        if (connection == null ? void 0 : connection.refs) {
+          arr = [...arr, ...connection.refs];
+        }
+        if (connection == null ? void 0 : connection.hasEffect) {
+          break;
+        }
+      }
+      return arr;
+    })();
+    const cleanup = effect({
+      activityTransitionState: activity.transitionState,
+      refs: refs2
+    });
+    return () => {
+      cleanup == null ? void 0 : cleanup();
+    };
+  }, [activity == null ? void 0 : activity.transitionState]);
+}
+
+// src/hooks/useStyleEffectHide.ts
+function useStyleEffectHide({
+  refs,
+  hasEffect
+}) {
+  useStyleEffect({
+    styleName: "hide",
+    refs,
+    effect: hasEffect ? ({ activityTransitionState, refs: refs2 }) => {
+      const cleanup = () => {
+        refs2.forEach((ref) => {
+          if (!ref.current) {
+            return;
+          }
+          const $ref = ref.current;
+          $ref.style.display = "";
+        });
+      };
+      switch (activityTransitionState) {
+        case "enter-done": {
+          refs2.forEach((ref) => {
+            if (!ref.current) {
+              return;
+            }
+            const $ref = ref.current;
+            $ref.style.display = "none";
+          });
+          return () => {
+            cleanup();
+          };
+        }
+        default: {
+          cleanup();
+          return () => {
+          };
+        }
+      }
+    } : void 0
+  });
+}
+
+// src/hooks/useStyleEffectOffset.ts
+var OFFSET_PX_ANDROID = 32;
+var OFFSET_PX_CUPERTINO = 80;
+function useStyleEffectOffset({
+  refs,
+  theme,
+  hasEffect
+}) {
+  useStyleEffect({
+    styleName: "offset",
+    refs,
+    effect: hasEffect ? ({ activityTransitionState, refs: refs2 }) => {
+      const transform = theme === "cupertino" ? `translateX(-${OFFSET_PX_CUPERTINO / 16}rem)` : `translateY(-${OFFSET_PX_ANDROID / 16}rem)`;
+      const cleanup = () => {
+        requestNextFrame(() => {
+          refs2.forEach((ref) => {
+            if (!ref.current) {
+              return;
+            }
+            const $el = ref.current;
+            $el.style.transform = "";
+            listenOnce($el, "transitionend", () => {
+              $el.style.transition = "";
+            });
+          });
+        });
+      };
+      switch (activityTransitionState) {
+        case "enter-active":
+        case "enter-done": {
+          refs2.forEach((ref) => {
+            if (!ref.current) {
+              return;
+            }
+            ref.current.style.transition = `var(--stackflow-transition-duration)`;
+            ref.current.style.transform = transform;
+          });
+          switch (activityTransitionState) {
+            case "enter-done":
+              return () => {
+                cleanup();
+              };
+            case "enter-active":
+            default:
+              return () => {
+              };
+          }
+        }
+        case "exit-active":
+        case "exit-done": {
+          requestNextFrame(() => {
+            cleanup();
+          });
+          return () => {
+          };
+        }
+        default: {
+          return () => {
+          };
+        }
+      }
+    } : void 0
+  });
+}
+
+// src/hooks/useStyleEffectSwipeBack.ts
+function useStyleEffectSwipeBack({
+  theme,
+  dimRef,
+  edgeRef,
+  paperRef,
+  hasEffect,
+  onSwiped
+}) {
+  useStyleEffect({
+    styleName: "swipe-back",
+    refs: [paperRef],
+    effect: hasEffect ? ({ refs }) => {
+      if (theme !== "cupertino") {
+        return () => {
+        };
+      }
+      if (!dimRef.current || !edgeRef.current || !paperRef.current) {
+        return () => {
+        };
+      }
+      const $dim = dimRef.current;
+      const $edge = edgeRef.current;
+      const $paper = paperRef.current;
+      let x0 = null;
+      let t0 = null;
+      let x = null;
+      let cachedRefs = [];
+      const resetState = () => {
+        x0 = null;
+        t0 = null;
+        x = null;
+        cachedRefs = [];
+      };
+      let _rAFLock = false;
+      function movePaper(dx) {
+        if (!_rAFLock) {
+          _rAFLock = true;
+          requestAnimationFrame(() => {
+            const p = dx / $paper.clientWidth;
+            $dim.style.opacity = `${1 - p}`;
+            $dim.style.transition = "0s";
+            $paper.style.overflowY = "hidden";
+            $paper.style.transform = `translateX(${dx}px)`;
+            $paper.style.transition = "0s";
+            refs.forEach((ref) => {
+              var _a;
+              if (!ref.current) {
+                return;
+              }
+              ref.current.style.transform = `translateX(${-1 * (1 - p) * OFFSET_PX_CUPERTINO}px)`;
+              ref.current.style.transition = "0s";
+              if (((_a = ref.current.parentElement) == null ? void 0 : _a.style.display) === "none") {
+                ref.current.parentElement.style.display = "block";
+              }
+            });
+            _rAFLock = false;
+          });
+        }
+      }
+      function resetPaper({ swiped }) {
+        return new Promise((resolve) => {
+          requestAnimationFrame(() => {
+            $dim.style.opacity = `${swiped ? 0 : 1}`;
+            $dim.style.transition = "var(--stackflow-transition-duration)";
+            $paper.style.overflowY = "hidden";
+            $paper.style.transform = `translateX(${swiped ? "100%" : "0"})`;
+            $paper.style.transition = "var(--stackflow-transition-duration)";
+            refs.forEach((ref) => {
+              if (!ref.current) {
+                return;
+              }
+              ref.current.style.transition = `var(--stackflow-transition-duration)`;
+              ref.current.style.transform = `translateX(${swiped ? "0" : `-${OFFSET_PX_CUPERTINO / 16}rem`})`;
+            });
+            const _cachedRefs = [...cachedRefs];
+            resolve();
+            listenOnce($paper, "transitionend", () => {
+              $dim.style.opacity = "";
+              $paper.style.overflowY = "";
+              $paper.style.transform = "";
+              refs.forEach((ref, i) => {
+                if (!ref.current) {
+                  return;
+                }
+                const _cachedRef = _cachedRefs[i];
+                if (swiped) {
+                  ref.current.style.transition = "";
+                  ref.current.style.transform = "";
+                  if (ref.current.parentElement) {
+                    ref.current.parentElement.style.display = "";
+                  }
+                } else if (_cachedRef) {
+                  ref.current.style.transition = _cachedRef.style.transition;
+                  ref.current.style.transform = _cachedRef.style.transform;
+                  if (ref.current.parentElement && _cachedRef.parentElement) {
+                    ref.current.parentElement.style.display = _cachedRef.parentElement.style.display;
+                  }
+                }
+              });
+            });
+          });
+        });
+      }
+      const onTouchStart = (e) => {
+        var _a;
+        const { activeElement } = document;
+        (_a = activeElement == null ? void 0 : activeElement.blur) == null ? void 0 : _a.call(activeElement);
+        x0 = x = e.touches[0].clientX;
+        t0 = Date.now();
+        cachedRefs = refs.map((ref) => {
+          if (!ref.current) {
+            return {
+              style: {
+                transform: "",
+                transition: ""
+              }
+            };
+          }
+          return {
+            style: {
+              transform: ref.current.style.transform,
+              transition: ref.current.style.transition
+            },
+            parentElement: ref.current.parentElement ? {
+              style: {
+                display: ref.current.parentElement.style.display
+              }
+            } : void 0
+          };
+        });
+      };
+      const onTouchMove = (e) => {
+        if (!x0) {
+          resetState();
+          return;
+        }
+        x = e.touches[0].clientX;
+        movePaper(x - x0);
+      };
+      const onTouchEnd = () => {
+        if (!x0 || !t0 || !x) {
+          resetState();
+          return;
+        }
+        const t = Date.now();
+        const v = (x - x0) / (t - t0);
+        const swiped = v > 1 || x / $paper.clientWidth > 0.4;
+        if (swiped) {
+          onSwiped == null ? void 0 : onSwiped();
+        }
+        Promise.resolve().then(() => resetPaper({ swiped })).then(() => resetState());
+      };
+      $edge.addEventListener("touchstart", onTouchStart, { passive: true });
+      $edge.addEventListener("touchmove", onTouchMove, { passive: true });
+      $edge.addEventListener("touchend", onTouchEnd, { passive: true });
+      $edge.addEventListener("touchcancel", onTouchEnd, { passive: true });
+      return () => {
+        $edge.removeEventListener("touchstart", onTouchStart);
+        $edge.removeEventListener("touchmove", onTouchMove);
+        $edge.removeEventListener("touchend", onTouchEnd);
+        $edge.removeEventListener("touchcancel", onTouchEnd);
+      };
+    } : void 0
+  });
+}
+
+// src/components/AppBar.tsx
+var import_react8 = require("@stackflow/react");
+var import_dynamic2 = require("@vanilla-extract/dynamic");
+var import_react9 = __toESM(require("react"));
+
+// src/assets/IconBack.tsx
+var import_react6 = __toESM(require("react"));
+var IconBack = (props) => /* @__PURE__ */ import_react6.default.createElement("svg", {
+  className: props.className,
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /* @__PURE__ */ import_react6.default.createElement("path", {
+  d: "M11.5659 5.56564C11.8783 5.25322 11.8783 4.74669 11.5659 4.43427C11.2535 4.12185 10.7469 4.12185 10.4345 4.43427L3.43451 11.4343C3.12209 11.7467 3.12209 12.2532 3.43451 12.5656L10.4345 19.5656C10.7469 19.8781 11.2535 19.8781 11.5659 19.5656C11.8783 19.2532 11.8783 18.7467 11.5659 18.4343L5.93157 12.8H20.0002C20.442 12.8 20.8002 12.4418 20.8002 12C20.8002 11.5581 20.442 11.2 20.0002 11.2H5.93157L11.5659 5.56564Z",
+  fill: "currentColor"
+}));
+var IconBack_default = IconBack;
+
+// src/assets/IconClose.tsx
+var import_react7 = __toESM(require("react"));
+var IconClose = (props) => /* @__PURE__ */ import_react7.default.createElement("svg", {
+  className: props.className,
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /* @__PURE__ */ import_react7.default.createElement("path", {
+  d: "M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z",
+  fill: "currentColor"
+}), /* @__PURE__ */ import_react7.default.createElement("path", {
+  d: "M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z",
+  fill: "currentColor"
+}));
+var IconClose_default = IconClose;
+
+// src/components/AppBar.css.ts
+var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var appBar = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "AppBar__1yk3a451 f__dhthxq4 f__dhthxq0 f__dhthxqh f__dhthxqc AppScreen__1dlf4347", variantClassNames: { border: { true: "AppBar_border_true__1yk3a452" } }, defaultVariants: {}, compoundVariants: [] });
+var backButton = "AppBar__1yk3a456 f__dhthxq9 f__dhthxq7 f__dhthxqb f__dhthxqf f__dhthxqi";
+var center = "f__dhthxq9 f__dhthxq7 f__dhthxq8 AppBar__1yk3a450";
+var centerMain = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "AppBar__1yk3a459", variantClassNames: { hasLeft: { true: "AppBar_hasLeft_true__1yk3a45a" } }, defaultVariants: {}, compoundVariants: [] });
+var centerMainEdge = "AppBar__1yk3a45b f__dhthxqi f__dhthxq4 f__dhthxq2 f__dhthxqf";
+var centerText = "AppBar__1yk3a45c f__dhthxqc f__dhthxqd f__dhthxq0";
+var closeButton = "AppBar__1yk3a456 f__dhthxq9 f__dhthxq7 f__dhthxqb f__dhthxqf f__dhthxqi";
+var container = "AppBar__1yk3a454 f__dhthxqa f__dhthxq7 f__dhthxqc";
+var left = "AppBar__1yk3a455 f__dhthxq9 f__dhthxq7 f__dhthxq1 AppBar__1yk3a450";
+var right = "AppBar__1yk3a45d f__dhthxq9 f__dhthxq7 f__dhthxq1 f__dhthxq5 AppBar__1yk3a450";
+var safeArea = "AppBar__1yk3a453";
+
+// src/components/AppScreen.css.ts
+var import_createRuntimeFn2 = require("@vanilla-extract/recipes/createRuntimeFn");
+var appScreen = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "f__dhthxq4 f__dhthxq0 f__dhthxq1 f__dhthxq2 f__dhthxq3 f__dhthxqc", variantClassNames: { transitionState: { "enter-active": "AppScreen__1dlf4349", "enter-done": "AppScreen__1dlf434a", "exit-active": "AppScreen__1dlf434b", "exit-done": "AppScreen__1dlf434c" } }, defaultVariants: {}, compoundVariants: [] });
+var dim = "AppScreen__1dlf434i f__dhthxq4 f__dhthxq0 f__dhthxq1 f__dhthxq2 f__dhthxq3 AppScreen__1dlf4346 AppScreen__1dlf4348";
+var edge = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "AppScreen__1dlf434l f__dhthxq4 f__dhthxq2 f__dhthxq3 f__dhthxq1", variantClassNames: { hasAppBar: { true: "AppScreen_hasAppBar_true__1dlf434m" } }, defaultVariants: {}, compoundVariants: [] });
+var paper = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "AppScreen__1dlf434j f__dhthxq4 f__dhthxq0 f__dhthxq1 f__dhthxq2 f__dhthxq3 AppScreen__1dlf4347 AppScreen__1dlf4348", variantClassNames: { hasAppBar: { true: "AppScreen_hasAppBar_true__1dlf434k f__dhthxqg" } }, defaultVariants: {}, compoundVariants: [] });
+var vars = { transitionDuration: "var(--transitionDuration__1dlf4340)", zIndexes: { dim: "var(--zIndexes-dim__1dlf4341)", paper: "var(--zIndexes-paper__1dlf4342)", edge: "var(--zIndexes-edge__1dlf4343)", appBar: "var(--zIndexes-appBar__1dlf4344)" }, appBar: { center: { mainWidth: "var(--appBar-center-mainWidth__1dlf4345)" } } };
+
+// src/components/AppBar.tsx
+var AppBar = import_react9.default.forwardRef(
+  ({
+    title,
+    appendLeft,
+    appendRight,
+    backButton: backButton2,
+    closeButton: closeButton2,
+    closeButtonLocation = "left",
+    border = true,
+    iconColor,
+    textColor,
+    borderColor,
+    borderSize,
+    height,
+    backgroundColor,
+    onTopClick
+  }, ref) => {
+    var _a;
+    const actions = (0, import_react8.useActions)();
+    const activity = useNullableActivity();
+    const globalOptions = useGlobalOptions();
+    const globalCloseButton = (_a = globalOptions.appBar) == null ? void 0 : _a.closeButton;
+    const centerRef = (0, import_react9.useRef)(null);
+    const { maxWidth } = useMaxWidth({
+      outerRef: ref,
+      innerRef: centerRef,
+      enable: globalOptions.theme === "cupertino"
+    });
+    const onBackClick = (e) => {
+      if (backButton2 && "onClick" in backButton2 && backButton2.onClick) {
+        backButton2.onClick(e);
+      }
+      if (!e.defaultPrevented) {
+        actions.pop();
+      }
+    };
+    const renderBackButton = () => {
+      var _a2;
+      if (!activity) {
+        return null;
+      }
+      if (activity.isRoot) {
+        return null;
+      }
+      if (!backButton2) {
+        return /* @__PURE__ */ import_react9.default.createElement("button", {
+          type: "button",
+          className: backButton,
+          onClick: onBackClick
+        }, /* @__PURE__ */ import_react9.default.createElement(IconBack_default, null));
+      }
+      if ("render" in backButton2 && backButton2.render) {
+        return (_a2 = backButton2.render) == null ? void 0 : _a2.call(backButton2);
+      }
+      return /* @__PURE__ */ import_react9.default.createElement("button", {
+        type: "button",
+        className: backButton,
+        onClick: onBackClick
+      }, "renderIcon" in backButton2 && backButton2.renderIcon ? backButton2.renderIcon() : /* @__PURE__ */ import_react9.default.createElement(IconBack_default, null));
+    };
+    const onCloseClick = (e) => {
+      var _a2;
+      if (closeButton2 && "onClick" in closeButton2 && closeButton2.onClick) {
+        closeButton2.onClick(e);
+      }
+      if (!e.defaultPrevented && globalCloseButton && "onClick" in globalCloseButton) {
+        (_a2 = globalCloseButton.onClick) == null ? void 0 : _a2.call(globalCloseButton, e);
+      }
+    };
+    const renderCloseButton = () => {
+      var _a2;
+      const isRoot = !activity || activity.isRoot;
+      if (!closeButton2 && !((_a2 = globalOptions.appBar) == null ? void 0 : _a2.closeButton) || !isRoot) {
+        return null;
+      }
+      if (closeButton2 && "render" in closeButton2 && closeButton2.render) {
+        return closeButton2.render();
+      }
+      if (globalCloseButton && "render" in globalCloseButton && globalCloseButton.render) {
+        return globalCloseButton.render();
+      }
+      return /* @__PURE__ */ import_react9.default.createElement("button", {
+        type: "button",
+        className: closeButton,
+        onClick: onCloseClick
+      }, (() => {
+        if (closeButton2 && "renderIcon" in closeButton2 && closeButton2.renderIcon) {
+          return closeButton2.renderIcon();
+        }
+        if (globalCloseButton && "renderIcon" in globalCloseButton && globalCloseButton.renderIcon) {
+          return globalCloseButton.renderIcon();
+        }
+        return /* @__PURE__ */ import_react9.default.createElement(IconClose_default, null);
+      })());
+    };
+    const hasLeft = !!(closeButtonLocation === "left" && closeButton2 || backButton2 || appendLeft);
+    return /* @__PURE__ */ import_react9.default.createElement("div", {
+      ref,
+      className: appBar({
+        border
+      }),
+      style: (0, import_dynamic2.assignInlineVars)(
+        compactMap({
+          [globalVars.appBar.iconColor]: iconColor,
+          [globalVars.appBar.textColor]: textColor,
+          [globalVars.appBar.borderColor]: borderColor,
+          [globalVars.appBar.borderSize]: borderSize,
+          [globalVars.appBar.height]: height,
+          [globalVars.appBar.backgroundColor]: backgroundColor || globalVars.backgroundColor,
+          [vars.appBar.center.mainWidth]: `${maxWidth}px`
+        })
+      )
+    }, /* @__PURE__ */ import_react9.default.createElement("div", {
+      className: safeArea
+    }), /* @__PURE__ */ import_react9.default.createElement("div", {
+      className: container
+    }, /* @__PURE__ */ import_react9.default.createElement("div", {
+      className: left
+    }, closeButtonLocation === "left" && renderCloseButton(), renderBackButton(), appendLeft == null ? void 0 : appendLeft()), /* @__PURE__ */ import_react9.default.createElement("div", {
+      ref: centerRef,
+      className: center
+    }, /* @__PURE__ */ import_react9.default.createElement("div", {
+      className: centerMain({
+        hasLeft
+      })
+    }, typeof title === "string" ? /* @__PURE__ */ import_react9.default.createElement("div", {
+      className: centerText
+    }, title) : title, /* @__PURE__ */ import_react9.default.createElement("button", {
+      className: centerMainEdge,
+      type: "button",
+      "aria-hidden": "true",
+      onClick: onTopClick
+    }))), /* @__PURE__ */ import_react9.default.createElement("div", {
+      className: right
+    }, appendRight == null ? void 0 : appendRight(), closeButtonLocation === "right" && renderCloseButton())));
+  }
+);
+AppBar.displayName = "AppBar";
+var AppBar_default = AppBar;
+
+// src/components/AppScreen.tsx
+var AppScreen = ({
+  backgroundColor,
+  dimBackgroundColor,
+  appBar: appBar2,
+  preventSwipeBack,
+  children
+}) => {
+  var _a, _b;
+  const globalOptions = useGlobalOptions();
+  const activity = useNullableActivity();
+  const { pop } = (0, import_react10.useActions)();
+  const appScreenRef = (0, import_react11.useRef)(null);
+  const dimRef = (0, import_react11.useRef)(null);
+  const paperRef = (0, import_react11.useRef)(null);
+  const edgeRef = (0, import_react11.useRef)(null);
+  const appBarRef = (0, import_react11.useRef)(null);
+  useStyleEffectHide({
+    refs: [appScreenRef],
+    hasEffect: true
+  });
+  useStyleEffectOffset({
+    theme: globalOptions.theme,
+    refs: globalOptions.theme === "cupertino" ? [paperRef] : [paperRef, appBarRef],
+    hasEffect: true
+  });
+  useStyleEffectSwipeBack({
+    theme: globalOptions.theme,
+    dimRef,
+    edgeRef,
+    paperRef,
+    hasEffect: true,
+    onSwiped() {
+      pop();
+    }
+  });
+  const hasAppBar = !!appBar2;
+  const zIndexBase = ((_a = activity == null ? void 0 : activity.zIndex) != null ? _a : 0) * 5;
+  const zIndexDim = zIndexBase;
+  const zIndexPaper = zIndexBase + (globalOptions.theme === "cupertino" && hasAppBar ? 1 : 3);
+  const zIndexEdge = zIndexBase + 4;
+  const zIndexAppBar = zIndexBase + 7;
+  const transitionState = (_b = activity == null ? void 0 : activity.transitionState) != null ? _b : "enter-done";
+  const lazyTransitionState = useLazy(transitionState);
+  const onAppBarTopClick = (e) => {
+    var _a2, _b2;
+    (_a2 = appBar2 == null ? void 0 : appBar2.onTopClick) == null ? void 0 : _a2.call(appBar2, e);
+    if (!e.defaultPrevented) {
+      (_b2 = paperRef.current) == null ? void 0 : _b2.scroll({
+        top: 0,
+        behavior: "smooth"
+      });
+    }
+  };
+  return /* @__PURE__ */ import_react11.default.createElement("div", {
+    ref: appScreenRef,
+    className: appScreen({
+      transitionState: transitionState === "enter-done" || transitionState === "exit-done" ? transitionState : lazyTransitionState
+    }),
+    style: (0, import_dynamic3.assignInlineVars)(
+      compactMap({
+        [globalVars.backgroundColor]: backgroundColor,
+        [globalVars.dimBackgroundColor]: dimBackgroundColor,
+        [globalVars.appBar.height]: appBar2 == null ? void 0 : appBar2.height,
+        [globalVars.appBar.heightTransitionDuration]: appBar2 == null ? void 0 : appBar2.heightTransitionDuration,
+        [vars.zIndexes.dim]: `${zIndexDim}`,
+        [vars.zIndexes.paper]: `${zIndexPaper}`,
+        [vars.zIndexes.edge]: `${zIndexEdge}`,
+        [vars.zIndexes.appBar]: `${zIndexAppBar}`,
+        [vars.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? `var(--stackflow-transition-duration)` : "0ms"
+      })
+    )
+  }, /* @__PURE__ */ import_react11.default.createElement("div", {
+    className: dim,
+    ref: dimRef
+  }), /* @__PURE__ */ import_react11.default.createElement("div", {
+    key: activity == null ? void 0 : activity.id,
+    className: paper({
+      hasAppBar
+    }),
+    ref: paperRef
+  }, children), !(activity == null ? void 0 : activity.isRoot) && globalOptions.theme === "cupertino" && !preventSwipeBack && /* @__PURE__ */ import_react11.default.createElement("div", {
+    className: edge({ hasAppBar }),
+    ref: edgeRef
+  }), appBar2 && /* @__PURE__ */ import_react11.default.createElement(AppBar_default, __spreadProps(__spreadValues({}, appBar2), {
+    ref: appBarRef,
+    onTopClick: onAppBarTopClick
+  })));
+};
+AppScreen.displayName = "AppScreen";
+var AppScreen_default = AppScreen;
+
+// src/components/BottomSheet.tsx
+var import_react12 = require("@stackflow/react");
+var import_dynamic4 = require("@vanilla-extract/dynamic");
+var import_react13 = __toESM(require("react"));
+
+// src/components/BottomSheet.css.ts
+var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn");
+var container2 = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "f__dhthxq4 f__dhthxq0 f__dhthxq1 f__dhthxq2 f__dhthxq3 f__dhthxqc", variantClassNames: { transitionState: { "enter-active": "BottomSheet__1ht38h04", "enter-done": "BottomSheet__1ht38h05", "exit-active": "BottomSheet__1ht38h06", "exit-done": "BottomSheet__1ht38h07" } }, defaultVariants: {}, compoundVariants: [] });
+var dim2 = "BottomSheet__1ht38h0d f__dhthxq4 f__dhthxq0 f__dhthxq1 f__dhthxq2 f__dhthxq3 f__dhthxqc f__dhthxqa f__dhthxq7 BottomSheet__1ht38h03";
+var paper2 = "BottomSheet__1ht38h0e f__dhthxqc BottomSheet__1ht38h03";
+var vars2 = { transitionDuration: "var(--transitionDuration__1ht38h00)", zIndexes: { dim: "var(--zIndexes-dim__1ht38h01)", paper: "var(--zIndexes-paper__1ht38h02)" } };
+
+// src/components/BottomSheet.tsx
+var BottomSheet = ({
+  borderRadius = "1rem",
+  backgroundColor,
+  dimBackgroundColor,
+  onOutsideClick,
+  children
+}) => {
+  var _a, _b, _c;
+  const activity = useNullableActivity();
+  const { pop } = (0, import_react12.useActions)();
+  const containerRef = (0, import_react13.useRef)(null);
+  const paperRef = (0, import_react13.useRef)(null);
+  useStyleEffect({
+    styleName: "hide",
+    refs: [containerRef]
+  });
+  useStyleEffect({
+    styleName: "offset",
+    refs: [paperRef]
+  });
+  useStyleEffect({
+    styleName: "swipe-back",
+    refs: [paperRef]
+  });
+  const popLock = (0, import_react13.useRef)(false);
+  const onDimClick = (e) => {
+    onOutsideClick == null ? void 0 : onOutsideClick(e);
+    if (e.defaultPrevented) {
+      return;
+    }
+    if (popLock.current) {
+      return;
+    }
+    popLock.current = true;
+    pop();
+  };
+  const onPaperClick = (e) => {
+    e.stopPropagation();
+  };
+  const zIndexBase = ((_a = activity == null ? void 0 : activity.zIndex) != null ? _a : 0) * 5 + 3;
+  const zIndexPaper = ((_b = activity == null ? void 0 : activity.zIndex) != null ? _b : 0) * 5 + 4;
+  const transitionState = (_c = activity == null ? void 0 : activity.transitionState) != null ? _c : "enter-done";
+  return /* @__PURE__ */ import_react13.default.createElement("div", {
+    className: container2({
+      transitionState: useLazy(transitionState)
+    }),
+    ref: containerRef,
+    style: (0, import_dynamic4.assignInlineVars)(
+      compactMap({
+        [globalVars.bottomSheet.borderRadius]: borderRadius,
+        [globalVars.backgroundColor]: backgroundColor,
+        [globalVars.dimBackgroundColor]: dimBackgroundColor,
+        [vars2.zIndexes.dim]: `${zIndexBase}`,
+        [vars2.zIndexes.paper]: `${zIndexPaper}`,
+        [vars2.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? `var(--stackflow-transition-duration)` : "0ms"
+      })
+    )
+  }, /* @__PURE__ */ import_react13.default.createElement("div", {
+    className: dim2,
+    ref: paperRef,
+    onClick: onDimClick
+  }, /* @__PURE__ */ import_react13.default.createElement("div", {
+    className: paper2,
+    onClick: onPaperClick
+  }, children)));
+};
+BottomSheet.displayName = "BottomSheet";
+var BottomSheet_default = BottomSheet;
+
+// src/components/Modal.tsx
+var import_react14 = require("@stackflow/react");
+var import_dynamic5 = require("@vanilla-extract/dynamic");
+var import_react15 = __toESM(require("react"));
+
+// src/components/Modal.css.ts
+var import_createRuntimeFn4 = require("@vanilla-extract/recipes/createRuntimeFn");
+var container3 = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "f__dhthxq4 f__dhthxq0 f__dhthxq1 f__dhthxq2 f__dhthxq3 f__dhthxqc", variantClassNames: { transitionState: { "enter-active": "Modal__5ozg8c4", "enter-done": "Modal__5ozg8c5", "exit-active": "Modal__5ozg8c6", "exit-done": "Modal__5ozg8c7" } }, defaultVariants: {}, compoundVariants: [] });
+var dim3 = "Modal__5ozg8cd f__dhthxq4 f__dhthxq0 f__dhthxq1 f__dhthxq2 f__dhthxq3 f__dhthxqc f__dhthxq9 f__dhthxq7 f__dhthxqb Modal__5ozg8c3";
+var paper3 = "Modal__5ozg8ce f__dhthxqc Modal__5ozg8c3";
+var vars3 = { transitionDuration: "var(--transitionDuration__5ozg8c0)", zIndexes: { dim: "var(--zIndexes-dim__5ozg8c1)", paper: "var(--zIndexes-paper__5ozg8c2)" } };
+
+// src/components/Modal.tsx
+var Modal = ({
+  backgroundColor,
+  dimBackgroundColor,
+  borderRadius = "1rem",
+  onOutsideClick,
+  children
+}) => {
+  var _a, _b, _c;
+  const activity = useNullableActivity();
+  const { pop } = (0, import_react14.useActions)();
+  const containerRef = (0, import_react15.useRef)(null);
+  const paperRef = (0, import_react15.useRef)(null);
+  useStyleEffect({
+    styleName: "hide",
+    refs: [containerRef]
+  });
+  useStyleEffect({
+    styleName: "offset",
+    refs: [paperRef]
+  });
+  useStyleEffect({
+    styleName: "swipe-back",
+    refs: [paperRef]
+  });
+  const popLock = (0, import_react15.useRef)(false);
+  const onDimClick = (e) => {
+    onOutsideClick == null ? void 0 : onOutsideClick(e);
+    if (e.defaultPrevented) {
+      return;
+    }
+    if (popLock.current) {
+      return;
+    }
+    popLock.current = true;
+    pop();
+  };
+  const onPaperClick = (e) => {
+    e.stopPropagation();
+  };
+  const zIndexBase = ((_a = activity == null ? void 0 : activity.zIndex) != null ? _a : 0) * 5 + 3;
+  const zIndexPaper = ((_b = activity == null ? void 0 : activity.zIndex) != null ? _b : 0) * 5 + 4;
+  const transitionState = (_c = activity == null ? void 0 : activity.transitionState) != null ? _c : "enter-done";
+  return /* @__PURE__ */ import_react15.default.createElement("div", {
+    className: container3({
+      transitionState: useLazy(transitionState)
+    }),
+    ref: containerRef,
+    style: (0, import_dynamic5.assignInlineVars)(
+      compactMap({
+        [globalVars.bottomSheet.borderRadius]: borderRadius,
+        [globalVars.backgroundColor]: backgroundColor,
+        [globalVars.dimBackgroundColor]: dimBackgroundColor,
+        [vars3.zIndexes.dim]: `${zIndexBase}`,
+        [vars3.zIndexes.paper]: `${zIndexPaper}`,
+        [vars3.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? `var(--stackflow-transition-duration)` : "0ms"
+      })
+    )
+  }, /* @__PURE__ */ import_react15.default.createElement("div", {
+    className: dim3,
+    ref: paperRef,
+    onClick: onDimClick
+  }, /* @__PURE__ */ import_react15.default.createElement("div", {
+    className: paper3,
+    onClick: onPaperClick
+  }, children)));
+};
+Modal.displayName = "Modal";
+var Modal_default = Modal;
 //# sourceMappingURL=index.js.map