@tamagui/web 1.14.1 → 1.14.2

package/dist/cjs/createComponent.js

@@ -1,3 +1,897 @@
-"use strict";var Ht=Object.create;var he=Object.defineProperty;var zt=Object.getOwnPropertyDescriptor;var Kt=Object.getOwnPropertyNames;var Zt=Object.getPrototypeOf,qt=Object.prototype.hasOwnProperty;var Jt=(s,o)=>{for(var e in o)he(s,e,{get:o[e],enumerable:!0})},dt=(s,o,e,h)=>{if(o&&typeof o=="object"||typeof o=="function")for(let y of Kt(o))!qt.call(s,y)&&y!==e&&he(s,y,{get:()=>o[y],enumerable:!(h=zt(o,y))||h.enumerable});return s};var Qt=(s,o,e)=>(e=s!=null?Ht(Zt(s)):{},dt(o||!s||!s.__esModule?he(e,"default",{value:s,enumerable:!0}):e,s)),Xt=s=>dt(he({},"__esModule",{value:!0}),s);var on={};Jt(on,{Spacer:()=>Ot,Unspaced:()=>Vt,createComponent:()=>De,defaultComponentState:()=>_e,mouseUps:()=>H,spacedChildren:()=>Rt});module.exports=Xt(on);var z=require("react/jsx-runtime"),gt=require("@tamagui/compose-refs"),d=require("@tamagui/constants"),K=require("@tamagui/helpers"),a=Qt(require("react")),St=require("./config.js"),Re=require("./constants/constants.js"),vt=require("./contexts/FontLanguageContext.js"),bt=require("./contexts/TextAncestorContext.js"),ge=require("./createVariable.js"),te=require("./helpers/extendStaticConfig.js"),Tt=require("./helpers/getSplitStyles.js"),W=require("./helpers/mergeProps.js"),Pt=require("./helpers/proxyThemeVariables.js"),Ct=require("./helpers/useShallowSetState.js"),Nt=require("./hooks/useAnimationDriver.js"),Se=require("./hooks/useMedia.js"),ve=require("./hooks/useServerHooks.js"),At=require("./hooks/useTheme.js"),ye=require("./setupHooks.js"),Et=require("./views/Slot.js"),xt=require("./views/Theme.js"),wt=require("./views/ThemeDebug.js");process.env.TAMAGUI_TARGET;const _e={hover:!1,press:!1,pressIn:!1,focus:!1,unmounted:!0},Yt={..._e,unmounted:!1};let U,ut,mt,Ve;const H=new Set;if(typeof document<"u"){const s=()=>{H.forEach(o=>o()),H.clear()};addEventListener("mouseup",s),addEventListener("touchend",s),addEventListener("touchcancel",s)}function en({defaultProps:s},{shorthands:o}){for(const e of Object.keys(s))s[o[e]||e]=s[e]}let ft,pt,ht=!1;function De(s,o){const e=(()=>{const i=(0,te.extendStaticConfig)(s,o);return"parsed"in i?i:(0,te.parseStaticConfig)(i)})(),h=`is_${e.componentName}`;let y,A;const g=(0,a.forwardRef)((i,l)=>{var Ze,qe,Je,Qe,Xe,Ye,et,tt,nt,st,ot,at,it,rt;if(process.env.TAMAGUI_TARGET==="native"&&!ht){ht=!0;const t=(qe=(Ze=ye.hooks).getBaseViews)==null?void 0:qe.call(Ze);t&&(ft=t.Text,pt=t.View)}process.env.NODE_ENV==="test"&&i["data-test-renders"]&&((Je=i["data-test-renders"]).current??(Je.current=0),i["data-test-renders"].current+=1);let n;y&&!i.asChild?n=(0,W.mergeProps)(y,i)[0]:n=i;const p=n.debug,{Component:f,isText:O,isZStack:j}=e,b=n.componentName||e.componentName,r=(0,a.useRef)(void 0);r.current||(r.current={});const x=(0,ve.useServerRef)(null),m=(0,Nt.useAnimationDriver)(),G=m==null?void 0:m.useAnimations,w=(()=>{const t=!!(!e.isHOC&&G&&(n.animation||n.style&&sn(n.style)));return t&&!r.current.hasAnimated&&(r.current.hasAnimated=!0),t||r.current.hasAnimated})(),V=n.asChild?"":n.componentName?`is_${n.componentName}`:h,ne=!!(d.isWeb&&O&&(0,a.useContext)(bt.TextAncestorContext)),_t=d.isRSC?null:(0,a.useContext)(vt.FontLanguageContext),ke=n.disabled??((Qe=n.accessibilityState)==null?void 0:Qe.disabled),Me=d.isWeb&&(!f||typeof f=="string")&&(n.tag||A)||f,Ue=ft||Me||"span",Ge=pt||Me||(ne?"span":"div");ut=m?m.Text:Ue,mt=m?m.View:Ge;let R=O?(w?ut:null)||Ue:(w?mt:null)||Ge;const be=m==null?void 0:m.isReactNative,Ie=!!n.enterStyle,se=Boolean((d.isWeb?d.isClient:!0)&&(Ie||n.animation)),Te=(0,ve.useServerState)(se?_e:Yt),C=i.forceStyle?{...Te[0],[i.forceStyle]:!0}:Te[0],Dt=Te[1],D=(0,Ct.useShallowSetState)(Dt,p,b),$e=m==null?void 0:m.usePresence,B=!d.isRSC&&w&&$e?$e():null;if(w&&B){const t=B[2];t&&(C.unmounted&&t.enterVariant&&(n[t.enterVariant]=!0),!t.isPresent&&t.exitVariant&&(n[t.exitVariant]=!0))}const Fe=w&&(m==null?void 0:m.isReactNative),Pe=Boolean(e.isReactNative||Fe);if(process.env.NODE_ENV==="development"){const t=(0,a.useId)();if(p){const u=`${b||(f==null?void 0:f.displayName)||(f==null?void 0:f.name)||"[Unnamed Component]"}`,S=Fe?"(animated)":Pe?"(rnw)":"",F=i["data-is"]||"",N=`${u}${F?` ${F}`:""} ${S} id ${t}`;console.group(`%c ${N}`,"background: yellow;"),d.isServer||console.log("state",C)}}const Ce=!d.isWeb||!!(n.animation&&be)||!e.acceptsClassName,oe=!!i.forceStyle,k=Ce||oe,I=(0,At.useThemeWithState)({name:n.theme,componentName:b,reset:n.reset,inverse:n.themeInverse,disable:n["data-themeable"],debug:process.env.NODE_ENV==="development"&&n.debug?{hostRef:x}:void 0,shouldUpdate:()=>!!r.current.didAccessThemeVariableValue});R=f||R;const je=typeof R=="string",kt=(B==null?void 0:B[0])===!1,Mt=(0,Se.useMedia)(r,p?{props:n,staticConfig:e}:null);(0,ge.setDidGetVariableValue)(!1);const T=(0,Tt.useSplitStyles)(n,e,I.theme,{...C,mediaState:Mt,noClassNames:k,dynamicStylesInline:k,hasTextAncestor:ne,resolveVariablesAs:"auto",isExiting:kt},null,_t||void 0,R,p),Be=Array.isArray(T.hasMedia),Le=(0,ge.didGetVariableValue)()||Be||k&&T.hasMedia===!0;(0,Se.setMediaShouldUpdate)(r,{enabled:Le,keys:k&&Be?T.hasMedia:null});const ae=w&&be;if(process.env.NODE_ENV==="development"&&(process.env.TAMAGUI_TARGET||console.error('No process.env.TAMAGUI_TARGET set, please set it to "native" or "web".'),p&&(console.groupCollapsed("props"),console.log("props in",i,"mapped to",n,"in order",Object.keys(n)),console.log("splitStyles",T),console.log("shouldListenForMedia",Le),console.log("className",Object.values(T.classNames)),d.isClient&&console.log("ref",x,"(click to view)"),console.groupEnd(),p==="break")))debugger;const{viewProps:Ut,pseudos:M,style:ie,classNames:We,space:Gt}=T,It=n;let Z;if(!d.isRSC&&w&&G&&!e.isHOC){const t=G({props:It,style:ie,presence:B,state:C,pseudos:M||null,onDidAnimate:n.onDidAnimate,hostRef:x,staticConfig:e});t&&(Z=t.style)}const{asChild:q,children:Ne,onPress:J,onPressIn:Q,onPressOut:X,onHoverIn:re,onHoverOut:le,themeShallow:$t,spaceDirection:rn,disabled:ln,onMouseUp:Ae,onMouseDown:Ee,onMouseEnter:ce,onMouseLeave:de,separator:Ft,forceStyle:cn,onClick:ue,theme:dn,defaultVariants:un,...xe}=Ut,He=((Xe=n.accessibilityState)==null?void 0:Xe.disabled)||n.accessibilityDisabled;let c=xe;process.env.TAMAGUI_TARGET==="web"&&!Pe&&!q?c=(et=(Ye=ye.hooks).usePropsTransform)==null?void 0:et.call(Ye,R,xe,x):c=xe,c.ref=(0,gt.useComposedRefs)(x,l),process.env.NODE_ENV==="development"&&!O&&d.isWeb&&!e.isHOC&&a.Children.toArray(n.children).forEach(t=>{typeof t=="string"&&t!==`
-`&&console.error(`Unexpected text node: ${t}. A text node cannot be a child of a <View>.`)});const Y=(0,a.useCallback)(()=>{D({press:!1,pressIn:!1})},[D]);d.isWeb&&(0,a.useEffect)(()=>()=>{H.delete(Y)},[]);const ze=se&&C.unmounted;(0,a.useEffect)(()=>{if(ze){if(C.unmounted===!0&&se){D({unmounted:!1});return}D({unmounted:!1})}},[ze,C.unmounted]);let _;if(je&&Ce&&!oe)_={...Z??ie};else if(_=[Z??ie],oe){const t={};_.forEach(u=>Object.assign(t,u)),Object.assign(T.style,t)}let L=O?T.fontFamily||e.defaultProps.fontFamily:null;L&&L[0]==="$"&&(L=L.slice(1));const jt=L?`font_${L}`:"",we=[Ie&&(C.unmounted&&se||!d.isClient)?"t_will-mount":"",b?V:"",jt,We?Object.values(We).join(" "):""].join(" ");if(process.env.TAMAGUI_TARGET==="web"){const t=Z??T.style;if(ae)c.style=t;else if(Pe){const u={$$css:!0};for(const S of we.split(" "))u[S]=S;c.style=[...Array.isArray(t)?t:[t],u],process.env.NODE_ENV==="development"&&Object.keys(c).forEach(S=>{S.startsWith("data-")&&(c.dataSet??(c.dataSet={}),c.dataSet[S.replace("data-","")]=c[S],delete c[S])})}else c.className=we,c.style=t}if(process.env.TAMAGUI_TARGET==="native"){if(T.fontFamily){const t=(tt=U.fontsParsed[T.fontFamily])==null?void 0:tt.face;if(t){const[u,S]=(()=>{var lt,ct;let N,fe;for(let pe=_.length;pe>=0;pe--)N??(N=(lt=_[pe])==null?void 0:lt.fontWeight),fe??(fe=(ct=_[pe])==null?void 0:ct.fontStyle);return[N||"400",fe||"normal"]})(),F=(st=(nt=t[u])==null?void 0:nt[S])==null?void 0:st.val;if(F)for(const N of _)N!=null&&N.fontFamily&&(N.fontFamily=F,N.fontWeight=void 0,N.fontStyle=void 0)}}c.style=_}const Bt=!He&&k&&(M==null?void 0:M.pressStyle),me=Boolean(Bt||J||X||Q||ue),Lt=!He&&k&&(M==null?void 0:M.hoverStyle),$=d.isWeb&&!!(Lt||re||le||ce||de),Wt=!(d.isWeb||q),Ke=Boolean(me||$||k&&"pressStyle"in n||d.isWeb&&k&&"hoverStyle"in n),P=Ke&&!d.isRSC&&!ke&&!q?{onPressOut:me?t=>{Y(),X==null||X(t),Ae==null||Ae(t)}:void 0,...$&&{onMouseEnter:$?t=>{const u={};$&&(u.hover=!0),C.pressIn&&(u.press=!0),($||C.pressIn)&&D(u),re==null||re(t),ce==null||ce(t)}:void 0,onMouseLeave:$?t=>{const u={};H.add(Y),$&&(u.hover=!1),C.pressIn&&(u.press=!1,u.pressIn=!1),Object.keys(u).length&&D(u),le==null||le(t),de==null||de(t)}:void 0},onPressIn:me?t=>{D({press:!0,pressIn:!0,hover:!1}),Q==null||Q(t),Ee==null||Ee(t),d.isWeb&&H.add(Y)}:void 0,onPress:me?t=>{Y(),d.isWeb&&(ue==null||ue(t)),J==null||J(t)}:void 0}:null;process.env.TAMAGUI_TARGET==="native"&&P&&Object.assign(P,{cancelable:!n.rejectResponderTermination,disabled:ke,hitSlop:n.hitSlop,delayLongPress:n.delayLongPress,delayPressIn:n.delayPressIn,delayPressOut:n.delayPressOut,focusable:c.focusable??!0,minPressDuration:0}),(at=(ot=ye.hooks).useEvents)==null||at.call(ot,c,P,T,D),!!($t&&I.isNewTheme)&&(r.current.themeShallow=!0);let E=!Ne||q?Ne:Rt({separator:Ft,children:Ne,space:Gt,direction:n.spaceDirection||"both",isZStack:j,debug:p});if(q&&(R=Et.Slot,c={...c,onPress:J,onPressIn:Q,onPressOut:X}),E=(0,a.createElement)(R,c,E),E=(0,xt.useThemedChildren)(I,E,{shallow:r.current.themeShallow}),process.env.NODE_ENV==="development"&&n.debug==="visualize"){const[t,u]=(0,a.useState)(0);(0,a.useEffect)(()=>{var S;(S=I.themeManager)==null||S.onChangeTheme((F,N)=>{u(fe=>++fe),console.warn("\u{1F5A4}",F)})},[I.themeManager]),E=(0,z.jsx)(wt.ThemeDebug,{themeState:I,themeProps:n,onChangeCount:t,children:E})}if(process.env.TAMAGUI_TARGET==="web"&&(P||ae)&&(E=(0,z.jsx)("span",{className:`${ae?we:""}  _dsp_contents`,...P&&{onMouseEnter:P.onMouseEnter,onMouseLeave:P.onMouseLeave,onClick:P.onPress,onMouseDown:P.onPressIn,onMouseUp:P.onPressOut,onTouchStart:P.onPressIn,onTouchEnd:P.onPressOut},children:E})),process.env.NODE_ENV==="development"&&process.env.DEBUG!=="tamagui"&&p){console.groupCollapsed(`render <${typeof R=="string"?R:"Component"} /> with props`,c);for(const u in c)console.log(u,c[u]);console.log("children",E),console.groupEnd(),typeof window<"u"&&console.log({state:C,themeState:I,isAnimated:w,isAnimatedReactNativeWeb:ae,tamaguiDefaultProps:y,viewProps:c,splitStyles:T,animationStyles:Z,handlesPressEvents:Wt,isStringElement:je,classNamesIn:(it=n.className)==null?void 0:it.split(" "),classNamesOut:(rt=c.className)==null?void 0:rt.split(" "),events:P,shouldAttach:Ke,styles:_,pseudos:M,content:E,shouldAvoidClasses:Ce,avoidClasses:be,animation:n.animation,style:ie,staticConfig:e,tamaguiConfig:U,shouldForcePseudo:oe}),console.groupEnd()}return E});e.componentName&&(g.displayName=e.componentName),(0,St.onConfiguredOnce)(i=>{if(!U&&(U=i,!Ve)){const V=i.themes[Object.keys(i.themes)[0]];Ve=(0,Pt.proxyThemeVariables)(V),process.env.NODE_ENV==="development"&&(Ve||console.log("Warning: Missing theme"))}en(e,U);let l=e.defaultProps||{};const n=[...e.parentNames||[],e.componentName];U.defaultProps&&n&&e.componentName&&(l=tn(e.componentName,l,U.defaultProps,n,U));const p=l.debug,[f,O]=(0,W.mergeProps)(l,{});f.tag&&(A=f.tag);const j=!e.acceptsClassName,{name:b,variants:r,defaultVariants:x,...m}=f,[G,w]=(0,W.mergeProps)(g.defaultProps,{...x,...m});if(!d.isWeb)for(const V in e.defaultProps){const ne=e.defaultProps[V];K.validPseudoKeys[V]||(G[V]=ne)}y=G,process.env.NODE_ENV==="development"&&p&&process.env.IS_STATIC!=="is_static"&&console.log(`\u{1F41B} [${e.componentName||"Component"}]`,{staticConfig:e,tamaguiDefaultProps:y,defaults:G,defaultPropsIn:l,defaultPropsKeyOrder:Object.keys(e.defaultProps),defaultPropsInKeyOrder:Object.keys(l).map(V=>[V,l[V]]),ourProps:f,ourClassNames:O,defaultsClassnames:w,defaultTag:A,noClassNames:j})});let v=g;return s.memo&&(v=(0,a.memo)(v)),v.staticConfig={validStyles:e.validStyles||K.stylePropsView,...e},v.extractable=(i,l)=>(i.staticConfig=(0,te.extendStaticConfig)({Component:i,...l,neverFlatten:!0,isHOC:!0,defaultProps:{...i.defaultProps,...l==null?void 0:l.defaultProps}},v),i),v}const Vt=s=>s.children;Vt.isUnspaced=!0;const Ot=De({acceptsClassName:!0,memo:!0,componentName:"Spacer",validStyles:K.validStyles,defaultProps:{...Re.stackDefaultStyles,tag:"span",size:!0,pointerEvents:"none"},variants:{size:{"...size":(s,{tokens:o})=>{s=s===!0?"$true":s;const e=o.space[s]??s;return{width:e,height:e,minWidth:e,minHeight:e}}},flex:{true:{flexGrow:1}},direction:{horizontal:{height:0,minHeight:0},vertical:{width:0,minWidth:0},both:{}}}});function Rt(s){var f,O,j;const{isZStack:o,children:e,space:h,direction:y,spaceFlex:A,separator:g}=s,v=!!(h||A),i=g!=null;if(!(v||i||o))return e;const l=a.Children.toArray(e);if(l.length<=1&&!o&&!((O=(f=l[0])==null?void 0:f.type)!=null&&O.shouldForwardSpace))return l;const p=[];for(let[b,r]of l.entries()){const x=r==null||Array.isArray(r)&&r.length===0;if(!x&&a.default.isValidElement(r)&&((j=r.type)!=null&&j.shouldForwardSpace)&&(r=a.default.cloneElement(r,{space:h,spaceFlex:A,separator:g,key:r.key})),x||!r||r.key&&!o?p.push(r):p.push((0,z.jsx)(a.Fragment,{children:o?(0,z.jsx)(nn,{children:r}):r},b)),yt(r)&&b===0||o)continue;const m=l[b+1];m&&!yt(m)&&(g?(v&&p.push(Oe({key:`_${b}_00tmgui`,direction:y,space:h,spaceFlex:A})),p.push(a.default.isValidElement(g)?a.default.cloneElement(g,{key:`sep_${b}`}):g),v&&p.push(Oe({key:`_${b}01tmgui`,direction:y,space:h,spaceFlex:A}))):p.push(Oe({key:`_${b}02tmgui`,direction:y,space:h,spaceFlex:A})))}return process.env.NODE_ENV==="development"&&s.debug&&console.log("  Spaced children",p,s),p}function Oe({key:s,direction:o,space:e,spaceFlex:h}){return(0,z.jsx)(Ot,{size:e,direction:o,...typeof h<"u"&&{flex:h===!0?1:h===!1?0:h}},s)}function yt(s){const o=s==null?void 0:s.type;return(o==null?void 0:o.isVisuallyHidden)||(o==null?void 0:o.isUnspaced)}const ee=new Map;function tn(s,o,e,h,y){const A=h.length;let g;for(let i=0;i<A;i++){const l=h[i];if(!l)continue;if(ee.has(l)){g=ee.get(l);continue}const n=e[l];if(!n){g&&ee.set(l,g);continue}g=(0,W.mergeProps)(g||{},n,!1,y.inverseShorthands)[0],ee.set(l,g)}const v=ee.get(s);return v?(0,W.mergeProps)(o,v,!1,y.inverseShorthands)[0]:o}const nn=De({defaultProps:{...Re.stackDefaultStyles,flexDirection:"column",position:"absolute",top:0,right:0,bottom:0,left:0,pointerEvents:"box-none"}});function sn(s){return Object.keys(s).some(o=>{const e=s[o];return e&&typeof e=="object"&&"_animation"in e})}0&&(module.exports={Spacer,Unspaced,createComponent,defaultComponentState,mouseUps,spacedChildren});
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var createComponent_exports = {};
+__export(createComponent_exports, {
+  Spacer: () => Spacer,
+  Unspaced: () => Unspaced,
+  createComponent: () => createComponent,
+  defaultComponentState: () => defaultComponentState,
+  mouseUps: () => mouseUps,
+  spacedChildren: () => spacedChildren
+});
+module.exports = __toCommonJS(createComponent_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_compose_refs = require("@tamagui/compose-refs");
+var import_constants = require("@tamagui/constants");
+var import_helpers = require("@tamagui/helpers");
+var import_react = __toESM(require("react"));
+var import_config = require("./config.js");
+var import_constants2 = require("./constants/constants.js");
+var import_FontLanguageContext = require("./contexts/FontLanguageContext.js");
+var import_TextAncestorContext = require("./contexts/TextAncestorContext.js");
+var import_createVariable = require("./createVariable.js");
+var import_extendStaticConfig = require("./helpers/extendStaticConfig.js");
+var import_getSplitStyles = require("./helpers/getSplitStyles.js");
+var import_mergeProps = require("./helpers/mergeProps.js");
+var import_proxyThemeVariables = require("./helpers/proxyThemeVariables.js");
+var import_useShallowSetState = require("./helpers/useShallowSetState.js");
+var import_useAnimationDriver = require("./hooks/useAnimationDriver.js");
+var import_useMedia = require("./hooks/useMedia.js");
+var import_useServerHooks = require("./hooks/useServerHooks.js");
+var import_useTheme = require("./hooks/useTheme.js");
+var import_setupHooks = require("./setupHooks.js");
+var import_Slot = require("./views/Slot.js");
+var import_Theme = require("./views/Theme.js");
+var import_ThemeDebug = require("./views/ThemeDebug.js");
+process.env.TAMAGUI_TARGET;
+const defaultComponentState = {
+  hover: false,
+  press: false,
+  pressIn: false,
+  focus: false,
+  unmounted: true
+};
+const defaultComponentStateMounted = {
+  ...defaultComponentState,
+  unmounted: false
+};
+let tamaguiConfig;
+let AnimatedText;
+let AnimatedView;
+let initialTheme;
+const mouseUps = /* @__PURE__ */ new Set();
+if (typeof document !== "undefined") {
+  const cancelTouches = () => {
+    mouseUps.forEach((x) => x());
+    mouseUps.clear();
+  };
+  addEventListener("mouseup", cancelTouches);
+  addEventListener("touchend", cancelTouches);
+  addEventListener("touchcancel", cancelTouches);
+}
+function mergeShorthands({ defaultProps }, { shorthands }) {
+  for (const key of Object.keys(defaultProps)) {
+    defaultProps[shorthands[key] || key] = defaultProps[key];
+  }
+}
+let BaseText;
+let BaseView;
+let hasSetupBaseViews = false;
+function createComponent(configIn, ParentComponent) {
+  const staticConfig = (() => {
+    const next = (0, import_extendStaticConfig.extendStaticConfig)(configIn, ParentComponent);
+    if ("parsed" in next) {
+      return next;
+    } else {
+      return (0, import_extendStaticConfig.parseStaticConfig)(next);
+    }
+  })();
+  const defaultComponentClassName = `is_${staticConfig.componentName}`;
+  let tamaguiDefaultProps;
+  let defaultTag;
+  const component = (0, import_react.forwardRef)((propsIn, forwardedRef) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+    if (process.env.TAMAGUI_TARGET === "native") {
+      if (!hasSetupBaseViews) {
+        hasSetupBaseViews = true;
+        const baseViews = (_b = (_a = import_setupHooks.hooks).getBaseViews) == null ? void 0 : _b.call(_a);
+        if (baseViews) {
+          BaseText = baseViews.Text;
+          BaseView = baseViews.View;
+        }
+      }
+    }
+    if (process.env.NODE_ENV === "test") {
+      if (propsIn["data-test-renders"]) {
+        (_c = propsIn["data-test-renders"])["current"] ?? (_c["current"] = 0);
+        propsIn["data-test-renders"]["current"] += 1;
+      }
+    }
+    let props;
+    if (tamaguiDefaultProps && !propsIn.asChild) {
+      props = (0, import_mergeProps.mergeProps)(tamaguiDefaultProps, propsIn)[0];
+    } else {
+      props = propsIn;
+    }
+    const debugProp = props["debug"];
+    const { Component, isText, isZStack } = staticConfig;
+    const componentName = props.componentName || staticConfig.componentName;
+    const stateRef = (0, import_react.useRef)(
+      void 0
+    );
+    stateRef.current || (stateRef.current = {});
+    const hostRef = (0, import_useServerHooks.useServerRef)(null);
+    const animationsConfig = (0, import_useAnimationDriver.useAnimationDriver)();
+    const useAnimations = animationsConfig == null ? void 0 : animationsConfig.useAnimations;
+    const isAnimated = (() => {
+      const next = !!(!staticConfig.isHOC && useAnimations && (props.animation || props.style && hasAnimatedStyleValue(props.style)));
+      if (next && !stateRef.current.hasAnimated) {
+        stateRef.current.hasAnimated = true;
+      }
+      return next || stateRef.current.hasAnimated;
+    })();
+    const componentClassName = props.asChild ? "" : props.componentName ? `is_${props.componentName}` : defaultComponentClassName;
+    const hasTextAncestor = !!(import_constants.isWeb && isText ? (0, import_react.useContext)(import_TextAncestorContext.TextAncestorContext) : false);
+    const languageContext = import_constants.isRSC ? null : (0, import_react.useContext)(import_FontLanguageContext.FontLanguageContext);
+    const isDisabled = props.disabled ?? ((_d = props.accessibilityState) == null ? void 0 : _d.disabled);
+    const isTaggable = !Component || typeof Component === "string";
+    const element = import_constants.isWeb ? isTaggable ? props.tag || defaultTag || Component : Component : Component;
+    const BaseTextComponent = BaseText || element || "span";
+    const BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div");
+    AnimatedText = animationsConfig ? animationsConfig.Text : BaseTextComponent;
+    AnimatedView = animationsConfig ? animationsConfig.View : BaseViewComponent;
+    let elementType = isText ? (isAnimated ? AnimatedText : null) || BaseTextComponent : (isAnimated ? AnimatedView : null) || BaseViewComponent;
+    const avoidClassesWhileAnimating = animationsConfig == null ? void 0 : animationsConfig.isReactNative;
+    const hasEnterStyle = !!props.enterStyle;
+    const needsMount = Boolean(
+      (import_constants.isWeb ? import_constants.isClient : true) && (hasEnterStyle || props.animation)
+    );
+    const states = (0, import_useServerHooks.useServerState)(
+      needsMount ? defaultComponentState : defaultComponentStateMounted
+    );
+    const state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: true } : states[0];
+    const setState = states[1];
+    const setStateShallow = (0, import_useShallowSetState.useShallowSetState)(setState, debugProp, componentName);
+    const usePresence = animationsConfig == null ? void 0 : animationsConfig.usePresence;
+    const presence = !import_constants.isRSC && isAnimated && usePresence ? usePresence() : null;
+    if (isAnimated && presence) {
+      const presenceState = presence[2];
+      if (presenceState) {
+        if (state.unmounted && presenceState.enterVariant) {
+          props[presenceState.enterVariant] = true;
+        }
+        if (!presenceState.isPresent && presenceState.exitVariant) {
+          props[presenceState.exitVariant] = true;
+        }
+      }
+    }
+    const isAnimatedReactNative = isAnimated && (animationsConfig == null ? void 0 : animationsConfig.isReactNative);
+    const isReactNative = Boolean(staticConfig.isReactNative || isAnimatedReactNative);
+    if (process.env.NODE_ENV === "development") {
+      const id = (0, import_react.useId)();
+      if (debugProp) {
+        const name = `${componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`;
+        const type = isAnimatedReactNative ? "(animated)" : isReactNative ? "(rnw)" : "";
+        const dataIs = propsIn["data-is"] || "";
+        const banner = `${name}${dataIs ? ` ${dataIs}` : ""} ${type} id ${id}`;
+        console.group(`%c ${banner}`, "background: yellow;");
+        if (!import_constants.isServer) {
+          console.log("state", state);
+        }
+      }
+    }
+    const shouldAvoidClasses = !import_constants.isWeb || !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName;
+    const shouldForcePseudo = !!propsIn.forceStyle;
+    const noClassNames = shouldAvoidClasses || shouldForcePseudo;
+    const themeState = (0, import_useTheme.useThemeWithState)({
+      name: props.theme,
+      componentName,
+      reset: props.reset,
+      inverse: props.themeInverse,
+      // @ts-ignore this is internal use only
+      disable: props["data-themeable"],
+      debug: process.env.NODE_ENV === "development" && props.debug ? { hostRef } : void 0,
+      shouldUpdate: () => !!stateRef.current.didAccessThemeVariableValue
+    });
+    elementType = Component || elementType;
+    const isStringElement = typeof elementType === "string";
+    const isExiting = (presence == null ? void 0 : presence[0]) === false;
+    const mediaState = (0, import_useMedia.useMedia)(
+      // @ts-ignore, we just pass a stable object so we can get it later with
+      // should match to the one used in `setMediaShouldUpdate` below
+      stateRef,
+      debugProp ? { props, staticConfig } : null
+    );
+    (0, import_createVariable.setDidGetVariableValue)(false);
+    const splitStyles = (0, import_getSplitStyles.useSplitStyles)(
+      props,
+      staticConfig,
+      themeState.theme,
+      {
+        ...state,
+        mediaState,
+        noClassNames,
+        dynamicStylesInline: noClassNames,
+        hasTextAncestor,
+        resolveVariablesAs: "auto",
+        isExiting
+      },
+      null,
+      languageContext || void 0,
+      elementType,
+      debugProp
+    );
+    const isMediaSpaced = Array.isArray(splitStyles.hasMedia);
+    const shouldListenForMedia = (0, import_createVariable.didGetVariableValue)() || isMediaSpaced || noClassNames && splitStyles.hasMedia === true;
+    (0, import_useMedia.setMediaShouldUpdate)(stateRef, {
+      enabled: shouldListenForMedia,
+      keys: noClassNames && isMediaSpaced ? splitStyles.hasMedia : null
+    });
+    const isAnimatedReactNativeWeb = isAnimated && avoidClassesWhileAnimating;
+    if (process.env.NODE_ENV === "development") {
+      if (!process.env.TAMAGUI_TARGET) {
+        console.error(
+          `No process.env.TAMAGUI_TARGET set, please set it to "native" or "web".`
+        );
+      }
+      if (debugProp) {
+        console.groupCollapsed("props");
+        console.log("props in", propsIn, "mapped to", props, "in order", Object.keys(props));
+        console.log("splitStyles", splitStyles);
+        console.log("shouldListenForMedia", shouldListenForMedia);
+        console.log("className", Object.values(splitStyles.classNames));
+        if (import_constants.isClient) {
+          console.log("ref", hostRef, "(click to view)");
+        }
+        console.groupEnd();
+        if (debugProp === "break") {
+          debugger;
+        }
+      }
+    }
+    const {
+      viewProps: viewPropsIn,
+      pseudos,
+      style: splitStylesStyle,
+      classNames,
+      space
+    } = splitStyles;
+    const propsWithAnimation = props;
+    let animationStyles;
+    if (!import_constants.isRSC && isAnimated && useAnimations && !staticConfig.isHOC) {
+      const animations = useAnimations({
+        props: propsWithAnimation,
+        style: splitStylesStyle,
+        presence,
+        state,
+        pseudos: pseudos || null,
+        onDidAnimate: props.onDidAnimate,
+        hostRef,
+        staticConfig
+      });
+      if (animations) {
+        animationStyles = animations.style;
+      }
+    }
+    const {
+      asChild,
+      children,
+      onPress,
+      onPressIn,
+      onPressOut,
+      onHoverIn,
+      onHoverOut,
+      themeShallow,
+      spaceDirection: _spaceDirection,
+      disabled: disabledProp,
+      onMouseUp,
+      onMouseDown,
+      onMouseEnter,
+      onMouseLeave,
+      separator,
+      // ignore from here on out
+      forceStyle: _forceStyle,
+      // @ts-ignore  for next/link compat etc
+      onClick,
+      theme: _themeProp,
+      // @ts-ignore
+      defaultVariants,
+      ...nonTamaguiProps
+    } = viewPropsIn;
+    const disabled = ((_e = props.accessibilityState) == null ? void 0 : _e.disabled) || props.accessibilityDisabled;
+    let viewProps = nonTamaguiProps;
+    if (process.env.TAMAGUI_TARGET === "web" && !isReactNative && !asChild) {
+      viewProps = (_g = (_f = import_setupHooks.hooks).usePropsTransform) == null ? void 0 : _g.call(_f, elementType, nonTamaguiProps, hostRef);
+    } else {
+      viewProps = nonTamaguiProps;
+    }
+    viewProps.ref = (0, import_compose_refs.useComposedRefs)(hostRef, forwardedRef);
+    if (process.env.NODE_ENV === "development") {
+      if (!isText && import_constants.isWeb && !staticConfig.isHOC) {
+        import_react.Children.toArray(props.children).forEach((item) => {
+          if (typeof item === "string" && item !== "\n") {
+            console.error(
+              `Unexpected text node: ${item}. A text node cannot be a child of a <View>.`
+            );
+          }
+        });
+      }
+    }
+    const unPress = (0, import_react.useCallback)(() => {
+      setStateShallow({
+        press: false,
+        pressIn: false
+      });
+    }, [setStateShallow]);
+    if (import_constants.isWeb) {
+      (0, import_react.useEffect)(() => {
+        return () => {
+          mouseUps.delete(unPress);
+        };
+      }, []);
+    }
+    const shouldSetMounted = needsMount && state.unmounted;
+    (0, import_react.useEffect)(() => {
+      if (!shouldSetMounted)
+        return;
+      if (state.unmounted === true && needsMount) {
+        setStateShallow({
+          unmounted: false
+        });
+        return;
+      }
+      setStateShallow({
+        unmounted: false
+      });
+    }, [shouldSetMounted, state.unmounted]);
+    let styles;
+    if (isStringElement && shouldAvoidClasses && !shouldForcePseudo) {
+      styles = {
+        ...animationStyles ?? splitStylesStyle
+      };
+    } else {
+      styles = [animationStyles ?? splitStylesStyle];
+      if (shouldForcePseudo) {
+        const next = {};
+        styles.forEach((style) => Object.assign(next, style));
+        Object.assign(splitStyles.style, next);
+      }
+    }
+    let fontFamily = isText ? splitStyles.fontFamily || staticConfig.defaultProps.fontFamily : null;
+    if (fontFamily && fontFamily[0] === "$") {
+      fontFamily = fontFamily.slice(1);
+    }
+    const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "";
+    const classList = [
+      hasEnterStyle && (state.unmounted && needsMount || !import_constants.isClient) ? "t_will-mount" : "",
+      componentName ? componentClassName : "",
+      fontFamilyClassName,
+      classNames ? Object.values(classNames).join(" ") : ""
+    ];
+    const className = classList.join(" ");
+    if (process.env.TAMAGUI_TARGET === "web") {
+      const style = animationStyles ?? splitStyles.style;
+      if (isAnimatedReactNativeWeb) {
+        viewProps.style = style;
+      } else if (isReactNative) {
+        const cnStyles = { $$css: true };
+        for (const name of className.split(" ")) {
+          cnStyles[name] = name;
+        }
+        viewProps.style = [...Array.isArray(style) ? style : [style], cnStyles];
+        if (process.env.NODE_ENV === "development") {
+          Object.keys(viewProps).forEach((key) => {
+            if (key.startsWith("data-")) {
+              viewProps.dataSet ?? (viewProps.dataSet = {});
+              viewProps.dataSet[key.replace("data-", "")] = viewProps[key];
+              delete viewProps[key];
+            }
+          });
+        }
+      } else {
+        viewProps.className = className;
+        viewProps.style = style;
+      }
+    }
+    if (process.env.TAMAGUI_TARGET === "native") {
+      if (splitStyles.fontFamily) {
+        const faceInfo = (_h = tamaguiConfig.fontsParsed[splitStyles.fontFamily]) == null ? void 0 : _h.face;
+        if (faceInfo) {
+          const [weight, style] = (() => {
+            var _a2, _b2;
+            let weight2;
+            let style2;
+            for (let i = styles.length; i >= 0; i--) {
+              weight2 ?? (weight2 = (_a2 = styles[i]) == null ? void 0 : _a2.fontWeight);
+              style2 ?? (style2 = (_b2 = styles[i]) == null ? void 0 : _b2.fontStyle);
+            }
+            return [weight2 || "400", style2 || "normal"];
+          })();
+          const overrideFace = (_j = (_i = faceInfo[weight]) == null ? void 0 : _i[style]) == null ? void 0 : _j.val;
+          if (overrideFace) {
+            for (const style2 of styles) {
+              if (style2 == null ? void 0 : style2.fontFamily) {
+                style2.fontFamily = overrideFace;
+                style2.fontWeight = void 0;
+                style2.fontStyle = void 0;
+              }
+            }
+          }
+        }
+      }
+      viewProps.style = styles;
+    }
+    const runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle);
+    const attachPress = Boolean(
+      runtimePressStyle || onPress || onPressOut || onPressIn || onClick
+    );
+    const runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle);
+    const isHoverable = import_constants.isWeb && !!(runtimeHoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
+    const handlesPressEvents = !(import_constants.isWeb || asChild);
+    const shouldAttach = Boolean(
+      attachPress || isHoverable || noClassNames && "pressStyle" in props || import_constants.isWeb && noClassNames && "hoverStyle" in props
+    );
+    const events = shouldAttach && !import_constants.isRSC && !isDisabled && !asChild ? {
+      onPressOut: attachPress ? (e) => {
+        unPress();
+        onPressOut == null ? void 0 : onPressOut(e);
+        onMouseUp == null ? void 0 : onMouseUp(e);
+      } : void 0,
+      ...isHoverable && {
+        onMouseEnter: isHoverable ? (e) => {
+          const next = {};
+          if (isHoverable) {
+            next.hover = true;
+          }
+          if (state.pressIn) {
+            next.press = true;
+          }
+          if (isHoverable || state.pressIn) {
+            setStateShallow(next);
+          }
+          onHoverIn == null ? void 0 : onHoverIn(e);
+          onMouseEnter == null ? void 0 : onMouseEnter(e);
+        } : void 0,
+        onMouseLeave: isHoverable ? (e) => {
+          const next = {};
+          mouseUps.add(unPress);
+          if (isHoverable) {
+            next.hover = false;
+          }
+          if (state.pressIn) {
+            next.press = false;
+            next.pressIn = false;
+          }
+          if (Object.keys(next).length) {
+            setStateShallow(next);
+          }
+          onHoverOut == null ? void 0 : onHoverOut(e);
+          onMouseLeave == null ? void 0 : onMouseLeave(e);
+        } : void 0
+      },
+      onPressIn: attachPress ? (e) => {
+        setStateShallow({
+          press: true,
+          pressIn: true,
+          hover: false
+        });
+        onPressIn == null ? void 0 : onPressIn(e);
+        onMouseDown == null ? void 0 : onMouseDown(e);
+        if (import_constants.isWeb) {
+          mouseUps.add(unPress);
+        }
+      } : void 0,
+      onPress: attachPress ? (e) => {
+        unPress();
+        import_constants.isWeb && (onClick == null ? void 0 : onClick(e));
+        onPress == null ? void 0 : onPress(e);
+      } : void 0
+    } : null;
+    if (process.env.TAMAGUI_TARGET === "native") {
+      if (events) {
+        Object.assign(events, {
+          cancelable: !props.rejectResponderTermination,
+          disabled: isDisabled,
+          hitSlop: props.hitSlop,
+          delayLongPress: props.delayLongPress,
+          delayPressIn: props.delayPressIn,
+          delayPressOut: props.delayPressOut,
+          focusable: viewProps.focusable ?? true,
+          minPressDuration: 0
+        });
+      }
+    }
+    (_l = (_k = import_setupHooks.hooks).useEvents) == null ? void 0 : _l.call(_k, viewProps, events, splitStyles, setStateShallow);
+    const shouldReset = !!(themeShallow && themeState.isNewTheme);
+    if (shouldReset) {
+      stateRef.current.themeShallow = true;
+    }
+    let content = !children || asChild ? children : spacedChildren({
+      separator,
+      children,
+      space,
+      direction: props.spaceDirection || "both",
+      isZStack,
+      debug: debugProp
+    });
+    if (asChild) {
+      elementType = import_Slot.Slot;
+      viewProps = {
+        ...viewProps,
+        onPress,
+        onPressIn,
+        onPressOut
+      };
+    }
+    content = (0, import_react.createElement)(elementType, viewProps, content);
+    content = (0, import_Theme.useThemedChildren)(themeState, content, {
+      shallow: stateRef.current.themeShallow
+      // passPropsToChildren: true,
+    });
+    if (process.env.NODE_ENV === "development") {
+      if (props["debug"] === "visualize") {
+        const [onChangeCount, setOnChangeCount] = (0, import_react.useState)(0);
+        (0, import_react.useEffect)(() => {
+          var _a2;
+          (_a2 = themeState.themeManager) == null ? void 0 : _a2.onChangeTheme((name, manager) => {
+            setOnChangeCount((p) => ++p);
+            console.warn(`\u{1F5A4}`, name);
+          });
+        }, [themeState.themeManager]);
+        content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ThemeDebug.ThemeDebug,
+          {
+            themeState,
+            themeProps: props,
+            onChangeCount,
+            children: content
+          }
+        );
+      }
+    }
+    if (process.env.TAMAGUI_TARGET === "web") {
+      if (events || isAnimatedReactNativeWeb) {
+        content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: `${isAnimatedReactNativeWeb ? className : ""}  _dsp_contents`,
+            ...events && {
+              onMouseEnter: events.onMouseEnter,
+              onMouseLeave: events.onMouseLeave,
+              onClick: events.onPress,
+              onMouseDown: events.onPressIn,
+              onMouseUp: events.onPressOut,
+              onTouchStart: events.onPressIn,
+              onTouchEnd: events.onPressOut
+            },
+            children: content
+          }
+        );
+      }
+    }
+    if (process.env.NODE_ENV === "development" && process.env.DEBUG !== "tamagui") {
+      if (debugProp) {
+        const element2 = typeof elementType === "string" ? elementType : "Component";
+        console.groupCollapsed(`render <${element2} /> with props`, viewProps);
+        for (const key in viewProps) {
+          console.log(key, viewProps[key]);
+        }
+        console.log("children", content);
+        console.groupEnd();
+        if (typeof window !== "undefined") {
+          console.log({ state, themeState, isAnimated, isAnimatedReactNativeWeb, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: (_m = props.className) == null ? void 0 : _m.split(" "), classNamesOut: (_n = viewProps.className) == null ? void 0 : _n.split(" "), events, shouldAttach, styles, pseudos, content, shouldAvoidClasses, avoidClasses: avoidClassesWhileAnimating, animation: props.animation, style: splitStylesStyle, staticConfig, tamaguiConfig, shouldForcePseudo });
+        }
+        console.groupEnd();
+      }
+    }
+    return content;
+  });
+  if (staticConfig.componentName) {
+    component.displayName = staticConfig.componentName;
+  }
+  (0, import_config.onConfiguredOnce)((conf) => {
+    if (!tamaguiConfig) {
+      tamaguiConfig = conf;
+      if (!initialTheme) {
+        const next = conf.themes[Object.keys(conf.themes)[0]];
+        initialTheme = (0, import_proxyThemeVariables.proxyThemeVariables)(next);
+        if (process.env.NODE_ENV === "development") {
+          if (!initialTheme) {
+            console.log("Warning: Missing theme");
+          }
+        }
+      }
+    }
+    mergeShorthands(staticConfig, tamaguiConfig);
+    let defaultPropsIn = staticConfig.defaultProps || {};
+    const parentNames = [...staticConfig.parentNames || [], staticConfig.componentName];
+    if (tamaguiConfig.defaultProps && parentNames && staticConfig.componentName) {
+      defaultPropsIn = mergeConfigDefaultProps(
+        staticConfig.componentName,
+        defaultPropsIn,
+        tamaguiConfig.defaultProps,
+        parentNames,
+        tamaguiConfig
+      );
+    }
+    const debug = defaultPropsIn["debug"];
+    const [ourProps, ourClassNames] = (0, import_mergeProps.mergeProps)(defaultPropsIn, {});
+    if (ourProps.tag) {
+      defaultTag = ourProps.tag;
+    }
+    const noClassNames = !staticConfig.acceptsClassName;
+    const { name, variants, defaultVariants, ...restProps } = ourProps;
+    const [defaults, defaultsClassnames] = (0, import_mergeProps.mergeProps)(component.defaultProps, {
+      ...defaultVariants,
+      ...restProps
+    });
+    if (!import_constants.isWeb) {
+      for (const key in staticConfig.defaultProps) {
+        const val = staticConfig.defaultProps[key];
+        if (import_helpers.validPseudoKeys[key])
+          continue;
+        defaults[key] = val;
+      }
+    }
+    tamaguiDefaultProps = defaults;
+    if (process.env.NODE_ENV === "development" && debug) {
+      if (process.env.IS_STATIC !== "is_static") {
+        console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, {
+          staticConfig,
+          tamaguiDefaultProps,
+          defaults,
+          defaultPropsIn,
+          defaultPropsKeyOrder: Object.keys(staticConfig.defaultProps),
+          defaultPropsInKeyOrder: Object.keys(defaultPropsIn).map((k) => [
+            k,
+            defaultPropsIn[k]
+          ]),
+          ourProps,
+          ourClassNames,
+          defaultsClassnames,
+          defaultTag,
+          noClassNames
+        });
+      }
+    }
+  });
+  let res = component;
+  if (configIn.memo) {
+    res = (0, import_react.memo)(res);
+  }
+  res.staticConfig = {
+    validStyles: staticConfig.validStyles || import_helpers.stylePropsView,
+    ...staticConfig
+  };
+  res.extractable = (Component, conf) => {
+    Component.staticConfig = (0, import_extendStaticConfig.extendStaticConfig)(
+      {
+        Component,
+        ...conf,
+        neverFlatten: true,
+        isHOC: true,
+        defaultProps: {
+          ...Component.defaultProps,
+          ...conf == null ? void 0 : conf.defaultProps
+        }
+      },
+      res
+    );
+    return Component;
+  };
+  return res;
+}
+const Unspaced = (props) => props.children;
+Unspaced["isUnspaced"] = true;
+const Spacer = createComponent({
+  acceptsClassName: true,
+  memo: true,
+  componentName: "Spacer",
+  validStyles: import_helpers.validStyles,
+  defaultProps: {
+    ...import_constants2.stackDefaultStyles,
+    // avoid nesting issues
+    tag: "span",
+    size: true,
+    pointerEvents: "none"
+  },
+  variants: {
+    size: {
+      "...size": (size, { tokens }) => {
+        size = size === true ? "$true" : size;
+        const sizePx = tokens.space[size] ?? size;
+        return {
+          width: sizePx,
+          height: sizePx,
+          minWidth: sizePx,
+          minHeight: sizePx
+        };
+      }
+    },
+    flex: {
+      true: {
+        flexGrow: 1
+      }
+    },
+    direction: {
+      horizontal: {
+        height: 0,
+        minHeight: 0
+      },
+      vertical: {
+        width: 0,
+        minWidth: 0
+      },
+      both: {}
+    }
+  }
+});
+function spacedChildren(props) {
+  var _a, _b, _c;
+  const { isZStack, children, space, direction, spaceFlex, separator } = props;
+  const hasSpace = !!(space || spaceFlex);
+  const hasSeparator = !(separator === void 0 || separator === null);
+  if (!(hasSpace || hasSeparator || isZStack)) {
+    return children;
+  }
+  const childrenList = import_react.Children.toArray(children);
+  const len = childrenList.length;
+  if (len <= 1 && !isZStack && !((_b = (_a = childrenList[0]) == null ? void 0 : _a["type"]) == null ? void 0 : _b["shouldForwardSpace"])) {
+    return childrenList;
+  }
+  const final = [];
+  for (let [index, child] of childrenList.entries()) {
+    const isEmpty = child === null || child === void 0 || Array.isArray(child) && child.length === 0;
+    if (!isEmpty && import_react.default.isValidElement(child) && ((_c = child.type) == null ? void 0 : _c["shouldForwardSpace"])) {
+      child = import_react.default.cloneElement(child, {
+        space,
+        spaceFlex,
+        separator,
+        key: child.key
+      });
+    }
+    if (isEmpty || !child || child["key"] && !isZStack) {
+      final.push(child);
+    } else {
+      final.push(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: isZStack ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AbsoluteFill, { children: child }) : child }, index)
+      );
+    }
+    if (isUnspaced(child) && index === 0)
+      continue;
+    if (isZStack)
+      continue;
+    const next = childrenList[index + 1];
+    if (next && !isUnspaced(next)) {
+      if (separator) {
+        if (hasSpace) {
+          final.push(
+            createSpacer({
+              key: `_${index}_00tmgui`,
+              direction,
+              space,
+              spaceFlex
+            })
+          );
+        }
+        final.push(
+          import_react.default.isValidElement(separator) ? import_react.default.cloneElement(separator, { key: `sep_${index}` }) : separator
+        );
+        if (hasSpace) {
+          final.push(
+            createSpacer({
+              key: `_${index}01tmgui`,
+              direction,
+              space,
+              spaceFlex
+            })
+          );
+        }
+      } else {
+        final.push(
+          createSpacer({
+            key: `_${index}02tmgui`,
+            direction,
+            space,
+            spaceFlex
+          })
+        );
+      }
+    }
+  }
+  if (process.env.NODE_ENV === "development") {
+    if (props.debug) {
+      console.log(`  Spaced children`, final, props);
+    }
+  }
+  return final;
+}
+function createSpacer({ key, direction, space, spaceFlex }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Spacer,
+    {
+      size: space,
+      direction,
+      ...typeof spaceFlex !== "undefined" && {
+        flex: spaceFlex === true ? 1 : spaceFlex === false ? 0 : spaceFlex
+      }
+    },
+    key
+  );
+}
+function isUnspaced(child) {
+  const t = child == null ? void 0 : child["type"];
+  return (t == null ? void 0 : t["isVisuallyHidden"]) || (t == null ? void 0 : t["isUnspaced"]);
+}
+const DefaultProps = /* @__PURE__ */ new Map();
+function mergeConfigDefaultProps(name, props, configDefaults, parentNames, conf) {
+  const len = parentNames.length;
+  let prev;
+  for (let i = 0; i < len; i++) {
+    const n = parentNames[i];
+    if (!n)
+      continue;
+    if (DefaultProps.has(n)) {
+      prev = DefaultProps.get(n);
+      continue;
+    }
+    const props2 = configDefaults[n];
+    if (!props2) {
+      if (prev) {
+        DefaultProps.set(n, prev);
+      }
+      continue;
+    }
+    prev = (0, import_mergeProps.mergeProps)(prev || {}, props2, false, conf.inverseShorthands)[0];
+    DefaultProps.set(n, prev);
+  }
+  const ourDefaultsMerged = DefaultProps.get(name);
+  if (ourDefaultsMerged) {
+    return (0, import_mergeProps.mergeProps)(props, ourDefaultsMerged, false, conf.inverseShorthands)[0];
+  }
+  return props;
+}
+const AbsoluteFill = createComponent({
+  defaultProps: {
+    ...import_constants2.stackDefaultStyles,
+    flexDirection: "column",
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    pointerEvents: "box-none"
+  }
+});
+function hasAnimatedStyleValue(style) {
+  return Object.keys(style).some((k) => {
+    const val = style[k];
+    return val && typeof val === "object" && "_animation" in val;
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Spacer,
+  Unspaced,
+  createComponent,
+  defaultComponentState,
+  mouseUps,
+  spacedChildren
+});
 //# sourceMappingURL=createComponent.js.map