@tamagui/web 1.5.20 → 1.5.22

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx"],
-  "sourcesContent": ["import { stylePropsAll } from '@tamagui/helpers'\nimport { forwardRef } from 'react'\n\nimport { createComponent } from './createComponent.js'\nimport { ReactNativeStaticConfigs } from './setupReactNative.js'\nimport type {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  TamaguiElement,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types.js'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> =\n  GetProps<ParentComponent> & {\n    name?: string\n    variants?: VariantDefinitions<ParentComponent> | undefined\n    defaultVariants?: { [key: string]: any }\n  }\n\ntype GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  infer P\n>\n  ? P\n  : GetProps<A>\n\ntype GetVariantProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  any,\n  infer V\n>\n  ? V\n  : {}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  Component: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n    acceptsClassName?: boolean\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // validate not using a variant over an existing valid style\n  if (process.env.NODE_ENV !== 'production') {\n    if (!Component) {\n      throw new Error(`No component given to styled()`)\n    }\n    if (options?.variants) {\n      for (const key in options.variants) {\n        if (key in stylePropsAll) {\n          console.error(\n            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce implementation complexity.`\n          )\n        }\n      }\n    }\n  }\n\n  const parentStaticConfig =\n    'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null\n  const isTamagui = !!parentStaticConfig\n\n  const isReactNative = Boolean(\n    ReactNativeStaticConfigs.has(Component) ||\n      staticExtractionOptions?.isReactNative ||\n      ReactNativeStaticConfigs.has(parentStaticConfig?.Component) ||\n      parentStaticConfig?.isReactNative\n  )\n\n  // unrecognized, just pass through as default props\n  if (!isTamagui && !isReactNative) {\n    if (process.env.NODE_ENV === 'development') {\n      // TODO variants would need to work through props to support this\n      if (options?.variants) {\n        console.warn(\n          `Warning: wrapping a non-Tamagui element in styled() and passing variants isn't supported (yet).`\n        )\n      }\n    }\n\n    return forwardRef(function styled(props, ref) {\n      // @ts-ignore\n      return <Component ref={ref} {...options} {...props} />\n    }) as StyledComponent\n  }\n\n  const staticConfigProps = (() => {\n    if (options) {\n      const {\n        variants,\n        name,\n        defaultVariants,\n        acceptsClassName: acceptsClassNameProp,\n        ...defaultProps\n      } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n\n      const Comp = isReactNative\n        ? parentStaticConfig?.Component || Component\n        : (Component as any)\n\n      const nativeConf = (isReactNative && ReactNativeStaticConfigs.get(Comp)) || null\n\n      const isText = Boolean(\n        staticExtractionOptions?.isText || parentStaticConfig?.isText\n      )\n      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative)\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name,\n        isReactNative,\n        isText,\n        acceptsClassName,\n        ...nativeConf,\n      }\n\n      // bail on non className views as well\n      if (defaultProps.children || !acceptsClassName) {\n        conf.neverFlatten = true\n      }\n\n      return conf\n    }\n  })()\n\n  const component = createComponent(staticConfigProps || {}, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = GetBaseProps<ParentComponent>\n  type ParentVariants = GetVariantProps<ParentComponent>\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<\n          any,\n          infer Val\n        >\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  type StyledComponent = TamaguiComponent<\n    Props,\n    TamaguiElement,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n\n  return component as StyledComponent\n}\n\n// sanity check types\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {\n//           pointerEvents: 'auto'\n//         }\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         alignContent: 'center',\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   } as const\n// })\n// // type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
-  "mappings": "AAkGa;AAlGb,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAE3B,SAAS,uBAAuB;AAChC,SAAS,gCAAgC;AAuClC,SAAS,OAId,WAEA,SAOA,yBACA;AAEA,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,WAAW;AACd,YAAM,IAAI,MAAM,gCAAgC;AAAA,IAClD;AACA,QAAI,mCAAS,UAAU;AACrB,iBAAW,OAAO,QAAQ,UAAU;AAClC,YAAI,OAAO,eAAe;AACxB,kBAAQ;AAAA,YACN,gDAAgD;AAAA,UAClD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBACJ,kBAAkB,YAAa,UAAU,eAAgC;AAC3E,QAAM,YAAY,CAAC,CAAC;AAEpB,QAAM,gBAAgB;AAAA,IACpB,yBAAyB,IAAI,SAAS,MACpC,mEAAyB,kBACzB,yBAAyB,IAAI,yDAAoB,SAAS,MAC1D,yDAAoB;AAAA,EACxB;AAGA,MAAI,CAAC,aAAa,CAAC,eAAe;AAChC,QAAI,QAAQ,IAAI,aAAa,eAAe;AAE1C,UAAI,mCAAS,UAAU;AACrB,gBAAQ;AAAA,UACN;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,WAAO,WAAW,SAASA,QAAO,OAAO,KAAK;AAE5C,aAAO,oBAAC,aAAU,KAAW,GAAG,SAAU,GAAG,OAAO;AAAA,IACtD,CAAC;AAAA,EACH;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,SAAS;AACX,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,QAClB,GAAG;AAAA,MACL,IAAI;AACJ,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AAEA,YAAM,OAAO,iBACT,yDAAoB,cAAa,YAChC;AAEL,YAAM,aAAc,iBAAiB,yBAAyB,IAAI,IAAI,KAAM;AAE5E,YAAM,SAAS;AAAA,SACb,mEAAyB,YAAU,yDAAoB;AAAA,MACzD;AACA,YAAM,mBAAmB,yBAAyB,aAAa;AAE/D,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAGA,UAAI,aAAa,YAAY,CAAC,kBAAkB;AAC9C,aAAK,eAAe;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF,GAAG;AAEH,QAAM,YAAY,gBAAgB,qBAAqB,CAAC,GAAG,SAAS;AAqCpE,SAAO;AACT;",
-  "names": ["styled"]
+  "sourcesContent": ["import { stylePropsAll } from '@tamagui/helpers'\nimport { forwardRef } from 'react'\n\nimport { createComponent } from './createComponent.js'\nimport { ReactNativeStaticConfigs } from './setupReactNative.js'\nimport type {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  TamaguiElement,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types.js'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> =\n  GetProps<ParentComponent> & {\n    name?: string\n    variants?: VariantDefinitions<ParentComponent> | undefined\n    defaultVariants?: { [key: string]: any }\n  }\n\ntype GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  infer P\n>\n  ? P\n  : GetProps<A>\n\ntype GetVariantProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  any,\n  infer V\n>\n  ? V\n  : {}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  Component: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n    acceptsClassName?: boolean\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // validate not using a variant over an existing valid style\n  if (process.env.NODE_ENV !== 'production') {\n    if (!Component) {\n      throw new Error(`No component given to styled()`)\n    }\n    if (options?.variants) {\n      for (const key in options.variants) {\n        if (key in stylePropsAll) {\n          console.error(\n            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce implementation complexity.`\n          )\n        }\n      }\n    }\n  }\n\n  const parentStaticConfig =\n    'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null\n  const isTamagui = !!parentStaticConfig\n\n  const isReactNative = Boolean(\n    ReactNativeStaticConfigs.has(Component) ||\n      staticExtractionOptions?.isReactNative ||\n      ReactNativeStaticConfigs.has(parentStaticConfig?.Component) ||\n      parentStaticConfig?.isReactNative\n  )\n\n  const staticConfigProps = (() => {\n    if (options) {\n      const {\n        variants,\n        name,\n        defaultVariants,\n        acceptsClassName: acceptsClassNameProp,\n        ...defaultProps\n      } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n\n      const Comp = isReactNative\n        ? parentStaticConfig?.Component || Component\n        : (Component as any)\n\n      const nativeConf = (isReactNative && ReactNativeStaticConfigs.get(Comp)) || null\n\n      const isText = Boolean(\n        staticExtractionOptions?.isText || parentStaticConfig?.isText\n      )\n      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative)\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name,\n        isReactNative,\n        isText,\n        acceptsClassName,\n        ...nativeConf,\n      }\n\n      // bail on non className views as well\n      if (defaultProps.children || !acceptsClassName) {\n        conf.neverFlatten = true\n      }\n\n      return conf\n    }\n  })()\n\n  const component = createComponent(staticConfigProps || {}, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = GetBaseProps<ParentComponent>\n  type ParentVariants = GetVariantProps<ParentComponent>\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<\n          any,\n          infer Val\n        >\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  type StyledComponent = TamaguiComponent<\n    Props,\n    TamaguiElement,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n\n  return component as StyledComponent\n}\n\n// sanity check types\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {\n//           pointerEvents: 'auto'\n//         }\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         alignContent: 'center',\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   } as const\n// })\n// // type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAG9B,SAAS,uBAAuB;AAChC,SAAS,gCAAgC;AAuClC,SAAS,OAId,WAEA,SAOA,yBACA;AAEA,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,WAAW;AACd,YAAM,IAAI,MAAM,gCAAgC;AAAA,IAClD;AACA,QAAI,mCAAS,UAAU;AACrB,iBAAW,OAAO,QAAQ,UAAU;AAClC,YAAI,OAAO,eAAe;AACxB,kBAAQ;AAAA,YACN,gDAAgD;AAAA,UAClD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBACJ,kBAAkB,YAAa,UAAU,eAAgC;AAC3E,QAAM,YAAY,CAAC,CAAC;AAEpB,QAAM,gBAAgB;AAAA,IACpB,yBAAyB,IAAI,SAAS,MACpC,mEAAyB,kBACzB,yBAAyB,IAAI,yDAAoB,SAAS,MAC1D,yDAAoB;AAAA,EACxB;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,SAAS;AACX,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,QAClB,GAAG;AAAA,MACL,IAAI;AACJ,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AAEA,YAAM,OAAO,iBACT,yDAAoB,cAAa,YAChC;AAEL,YAAM,aAAc,iBAAiB,yBAAyB,IAAI,IAAI,KAAM;AAE5E,YAAM,SAAS;AAAA,SACb,mEAAyB,YAAU,yDAAoB;AAAA,MACzD;AACA,YAAM,mBAAmB,yBAAyB,aAAa;AAE/D,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAGA,UAAI,aAAa,YAAY,CAAC,kBAAkB;AAC9C,aAAK,eAAe;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF,GAAG;AAEH,QAAM,YAAY,gBAAgB,qBAAqB,CAAC,GAAG,SAAS;AAqCpE,SAAO;AACT;",
+  "names": []
 }

package/dist/esm/styled.mjs

@@ -1,6 +1,4 @@
-import { jsx } from "react/jsx-runtime";
 import { stylePropsAll } from "@tamagui/helpers";
-import { forwardRef } from "react";
 import { createComponent } from "./createComponent.js";
 import { ReactNativeStaticConfigs } from "./setupReactNative.js";
 function styled(Component, options, staticExtractionOptions) {
@@ -23,18 +21,6 @@ function styled(Component, options, staticExtractionOptions) {
   const isReactNative = Boolean(
     ReactNativeStaticConfigs.has(Component) || (staticExtractionOptions == null ? void 0 : staticExtractionOptions.isReactNative) || ReactNativeStaticConfigs.has(parentStaticConfig == null ? void 0 : parentStaticConfig.Component) || (parentStaticConfig == null ? void 0 : parentStaticConfig.isReactNative)
   );
-  if (!isTamagui && !isReactNative) {
-    if (process.env.NODE_ENV === "development") {
-      if (options == null ? void 0 : options.variants) {
-        console.warn(
-          `Warning: wrapping a non-Tamagui element in styled() and passing variants isn't supported (yet).`
-        );
-      }
-    }
-    return forwardRef(function styled2(props, ref) {
-      return /* @__PURE__ */ jsx(Component, { ref, ...options, ...props });
-    });
-  }
   const staticConfigProps = (() => {
     if (options) {
       const {

package/dist/esm/styled.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx"],
-  "sourcesContent": ["import { stylePropsAll } from '@tamagui/helpers'\nimport { forwardRef } from 'react'\n\nimport { createComponent } from './createComponent.js'\nimport { ReactNativeStaticConfigs } from './setupReactNative.js'\nimport type {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  TamaguiElement,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types.js'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> =\n  GetProps<ParentComponent> & {\n    name?: string\n    variants?: VariantDefinitions<ParentComponent> | undefined\n    defaultVariants?: { [key: string]: any }\n  }\n\ntype GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  infer P\n>\n  ? P\n  : GetProps<A>\n\ntype GetVariantProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  any,\n  infer V\n>\n  ? V\n  : {}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  Component: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n    acceptsClassName?: boolean\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // validate not using a variant over an existing valid style\n  if (process.env.NODE_ENV !== 'production') {\n    if (!Component) {\n      throw new Error(`No component given to styled()`)\n    }\n    if (options?.variants) {\n      for (const key in options.variants) {\n        if (key in stylePropsAll) {\n          console.error(\n            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce implementation complexity.`\n          )\n        }\n      }\n    }\n  }\n\n  const parentStaticConfig =\n    'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null\n  const isTamagui = !!parentStaticConfig\n\n  const isReactNative = Boolean(\n    ReactNativeStaticConfigs.has(Component) ||\n      staticExtractionOptions?.isReactNative ||\n      ReactNativeStaticConfigs.has(parentStaticConfig?.Component) ||\n      parentStaticConfig?.isReactNative\n  )\n\n  // unrecognized, just pass through as default props\n  if (!isTamagui && !isReactNative) {\n    if (process.env.NODE_ENV === 'development') {\n      // TODO variants would need to work through props to support this\n      if (options?.variants) {\n        console.warn(\n          `Warning: wrapping a non-Tamagui element in styled() and passing variants isn't supported (yet).`\n        )\n      }\n    }\n\n    return forwardRef(function styled(props, ref) {\n      // @ts-ignore\n      return <Component ref={ref} {...options} {...props} />\n    }) as StyledComponent\n  }\n\n  const staticConfigProps = (() => {\n    if (options) {\n      const {\n        variants,\n        name,\n        defaultVariants,\n        acceptsClassName: acceptsClassNameProp,\n        ...defaultProps\n      } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n\n      const Comp = isReactNative\n        ? parentStaticConfig?.Component || Component\n        : (Component as any)\n\n      const nativeConf = (isReactNative && ReactNativeStaticConfigs.get(Comp)) || null\n\n      const isText = Boolean(\n        staticExtractionOptions?.isText || parentStaticConfig?.isText\n      )\n      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative)\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name,\n        isReactNative,\n        isText,\n        acceptsClassName,\n        ...nativeConf,\n      }\n\n      // bail on non className views as well\n      if (defaultProps.children || !acceptsClassName) {\n        conf.neverFlatten = true\n      }\n\n      return conf\n    }\n  })()\n\n  const component = createComponent(staticConfigProps || {}, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = GetBaseProps<ParentComponent>\n  type ParentVariants = GetVariantProps<ParentComponent>\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<\n          any,\n          infer Val\n        >\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  type StyledComponent = TamaguiComponent<\n    Props,\n    TamaguiElement,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n\n  return component as StyledComponent\n}\n\n// sanity check types\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {\n//           pointerEvents: 'auto'\n//         }\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         alignContent: 'center',\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   } as const\n// })\n// // type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
-  "mappings": "AAkGa;AAlGb,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAE3B,SAAS,uBAAuB;AAChC,SAAS,gCAAgC;AAuClC,SAAS,OAId,WAEA,SAOA,yBACA;AAEA,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,WAAW;AACd,YAAM,IAAI,MAAM,gCAAgC;AAAA,IAClD;AACA,QAAI,mCAAS,UAAU;AACrB,iBAAW,OAAO,QAAQ,UAAU;AAClC,YAAI,OAAO,eAAe;AACxB,kBAAQ;AAAA,YACN,gDAAgD;AAAA,UAClD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBACJ,kBAAkB,YAAa,UAAU,eAAgC;AAC3E,QAAM,YAAY,CAAC,CAAC;AAEpB,QAAM,gBAAgB;AAAA,IACpB,yBAAyB,IAAI,SAAS,MACpC,mEAAyB,kBACzB,yBAAyB,IAAI,yDAAoB,SAAS,MAC1D,yDAAoB;AAAA,EACxB;AAGA,MAAI,CAAC,aAAa,CAAC,eAAe;AAChC,QAAI,QAAQ,IAAI,aAAa,eAAe;AAE1C,UAAI,mCAAS,UAAU;AACrB,gBAAQ;AAAA,UACN;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,WAAO,WAAW,SAASA,QAAO,OAAO,KAAK;AAE5C,aAAO,oBAAC,aAAU,KAAW,GAAG,SAAU,GAAG,OAAO;AAAA,IACtD,CAAC;AAAA,EACH;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,SAAS;AACX,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,QAClB,GAAG;AAAA,MACL,IAAI;AACJ,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AAEA,YAAM,OAAO,iBACT,yDAAoB,cAAa,YAChC;AAEL,YAAM,aAAc,iBAAiB,yBAAyB,IAAI,IAAI,KAAM;AAE5E,YAAM,SAAS;AAAA,SACb,mEAAyB,YAAU,yDAAoB;AAAA,MACzD;AACA,YAAM,mBAAmB,yBAAyB,aAAa;AAE/D,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAGA,UAAI,aAAa,YAAY,CAAC,kBAAkB;AAC9C,aAAK,eAAe;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF,GAAG;AAEH,QAAM,YAAY,gBAAgB,qBAAqB,CAAC,GAAG,SAAS;AAqCpE,SAAO;AACT;",
-  "names": ["styled"]
+  "sourcesContent": ["import { stylePropsAll } from '@tamagui/helpers'\nimport { forwardRef } from 'react'\n\nimport { createComponent } from './createComponent.js'\nimport { ReactNativeStaticConfigs } from './setupReactNative.js'\nimport type {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  TamaguiElement,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types.js'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> =\n  GetProps<ParentComponent> & {\n    name?: string\n    variants?: VariantDefinitions<ParentComponent> | undefined\n    defaultVariants?: { [key: string]: any }\n  }\n\ntype GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  infer P\n>\n  ? P\n  : GetProps<A>\n\ntype GetVariantProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  any,\n  infer V\n>\n  ? V\n  : {}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  Component: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n    acceptsClassName?: boolean\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // validate not using a variant over an existing valid style\n  if (process.env.NODE_ENV !== 'production') {\n    if (!Component) {\n      throw new Error(`No component given to styled()`)\n    }\n    if (options?.variants) {\n      for (const key in options.variants) {\n        if (key in stylePropsAll) {\n          console.error(\n            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce implementation complexity.`\n          )\n        }\n      }\n    }\n  }\n\n  const parentStaticConfig =\n    'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null\n  const isTamagui = !!parentStaticConfig\n\n  const isReactNative = Boolean(\n    ReactNativeStaticConfigs.has(Component) ||\n      staticExtractionOptions?.isReactNative ||\n      ReactNativeStaticConfigs.has(parentStaticConfig?.Component) ||\n      parentStaticConfig?.isReactNative\n  )\n\n  const staticConfigProps = (() => {\n    if (options) {\n      const {\n        variants,\n        name,\n        defaultVariants,\n        acceptsClassName: acceptsClassNameProp,\n        ...defaultProps\n      } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n\n      const Comp = isReactNative\n        ? parentStaticConfig?.Component || Component\n        : (Component as any)\n\n      const nativeConf = (isReactNative && ReactNativeStaticConfigs.get(Comp)) || null\n\n      const isText = Boolean(\n        staticExtractionOptions?.isText || parentStaticConfig?.isText\n      )\n      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative)\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name,\n        isReactNative,\n        isText,\n        acceptsClassName,\n        ...nativeConf,\n      }\n\n      // bail on non className views as well\n      if (defaultProps.children || !acceptsClassName) {\n        conf.neverFlatten = true\n      }\n\n      return conf\n    }\n  })()\n\n  const component = createComponent(staticConfigProps || {}, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = GetBaseProps<ParentComponent>\n  type ParentVariants = GetVariantProps<ParentComponent>\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<\n          any,\n          infer Val\n        >\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  type StyledComponent = TamaguiComponent<\n    Props,\n    TamaguiElement,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n\n  return component as StyledComponent\n}\n\n// sanity check types\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {\n//           pointerEvents: 'auto'\n//         }\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         alignContent: 'center',\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   } as const\n// })\n// // type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAG9B,SAAS,uBAAuB;AAChC,SAAS,gCAAgC;AAuClC,SAAS,OAId,WAEA,SAOA,yBACA;AAEA,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,WAAW;AACd,YAAM,IAAI,MAAM,gCAAgC;AAAA,IAClD;AACA,QAAI,mCAAS,UAAU;AACrB,iBAAW,OAAO,QAAQ,UAAU;AAClC,YAAI,OAAO,eAAe;AACxB,kBAAQ;AAAA,YACN,gDAAgD;AAAA,UAClD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBACJ,kBAAkB,YAAa,UAAU,eAAgC;AAC3E,QAAM,YAAY,CAAC,CAAC;AAEpB,QAAM,gBAAgB;AAAA,IACpB,yBAAyB,IAAI,SAAS,MACpC,mEAAyB,kBACzB,yBAAyB,IAAI,yDAAoB,SAAS,MAC1D,yDAAoB;AAAA,EACxB;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,SAAS;AACX,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,QAClB,GAAG;AAAA,MACL,IAAI;AACJ,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AAEA,YAAM,OAAO,iBACT,yDAAoB,cAAa,YAChC;AAEL,YAAM,aAAc,iBAAiB,yBAAyB,IAAI,IAAI,KAAM;AAE5E,YAAM,SAAS;AAAA,SACb,mEAAyB,YAAU,yDAAoB;AAAA,MACzD;AACA,YAAM,mBAAmB,yBAAyB,aAAa;AAE/D,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAGA,UAAI,aAAa,YAAY,CAAC,kBAAkB;AAC9C,aAAK,eAAe;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF,GAAG;AAEH,QAAM,YAAY,gBAAgB,qBAAqB,CAAC,GAAG,SAAS;AAqCpE,SAAO;AACT;",
+  "names": []
 }

package/dist/esm/views/Theme.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { isWeb } from "@tamagui/constants";
-import { Children, cloneElement } from "react";
+import { Children, cloneElement, isValidElement } from "react";
 import { variableToString } from "../createVariable.js";
 import { ThemeManagerContext } from "../helpers/ThemeManagerContext.js";
 import { useServerRef } from "../hooks/useServerHooks.js";
@@ -23,38 +23,30 @@ function useThemedChildren(themeState, children, options) {
   if (isNewTheme) {
     hasEverThemed.current = true;
   }
-  if (!isNewTheme && !hasEverThemed.current && !forceClassName && !shallow) {
-    return children;
+  if (isNewTheme || hasEverThemed.current || forceClassName) {
+    let next = Children.toArray(children);
+    if (shallow && themeManager) {
+      next = next.map((child) => {
+        return isValidElement(child) ? cloneElement(
+          child,
+          void 0,
+          /* @__PURE__ */ jsx(Theme, { name: themeManager.state.parentName, children: child.props.children })
+        ) : child;
+      });
+    }
+    const wrapped = /* @__PURE__ */ jsx(ThemeManagerContext.Provider, { value: themeManager, children: next });
+    if (forceClassName === false) {
+      return wrapped;
+    }
+    if (isWeb && !options.passPropsToChildren) {
+      const themeColor = theme && isNewTheme ? variableToString(theme.color) : "";
+      const colorStyle = {
+        color: themeColor
+      };
+      return /* @__PURE__ */ jsx("span", { className: `${className || ""} _dsp_contents`, style: colorStyle, children: wrapped });
+    }
   }
-  let next = children;
-  if (shallow && themeManager) {
-    next = Children.map(next, (child) => {
-      return cloneElement(
-        child,
-        void 0,
-        /* @__PURE__ */ jsx(Theme, { name: themeManager.state.parentName, children: child.props.children })
-      );
-    });
-  }
-  next = /* @__PURE__ */ jsx(ThemeManagerContext.Provider, { value: themeManager, children: next });
-  if (isWeb) {
-    const enableClassName = forceClassName ?? (forceClassName !== false && isNewTheme);
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: "_dsp_contents",
-        ...theme && enableClassName && {
-          className: `${className} _dsp_contents`,
-          style: {
-            // in order to provide currentColor, set color by default
-            color: variableToString(theme.color)
-          }
-        },
-        children: next
-      }
-    );
-  }
-  return next;
+  return children;
 }
 export {
   Theme,

package/dist/esm/views/Theme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement } from 'react'\n\nimport { variableToString } from '../createVariable.js'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'\nimport { useServerRef } from '../hooks/useServerHooks.js'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme.js'\nimport type { ThemeProps } from '../types.js'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error only for internal views\n  if (props.disable) return props.children\n  const isRoot = !!props['_isRoot']\n  const themeState = useChangeThemeEffect(props, isRoot)\n  const children = props['data-themeable']\n    ? Children.map(props.children, (child) =>\n        cloneElement(child, { ['data-themeable']: true })\n      )\n    : props.children\n\n  return useThemedChildren(themeState, children, props)\n}\n\nexport function useThemedChildren(\n  themeState: ChangedThemeResponse,\n  children: any,\n  options: { forceClassName?: boolean; shallow?: boolean }\n) {\n  const { themeManager, isNewTheme, className, theme } = themeState\n  const { shallow, forceClassName } = options\n\n  const hasEverThemed = useServerRef(false)\n  if (isNewTheme) {\n    hasEverThemed.current = true\n  }\n\n  // once a theme is set it always passes the context to avoid reparenting\n  // until then no context to avoid lots of context\n  if (!isNewTheme && !hasEverThemed.current && !forceClassName && !shallow) {\n    return children\n  }\n\n  // be sure to memoize shouldReset to avoid reparenting\n  let next = children\n\n  if (shallow && themeManager) {\n    next = Children.map(next, (child) => {\n      return cloneElement(\n        child,\n        undefined,\n        <Theme name={themeManager.state.parentName}>{child.props.children}</Theme>\n      )\n    })\n  }\n\n  next = (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {next}\n    </ThemeManagerContext.Provider>\n  )\n\n  if (isWeb) {\n    const enableClassName = forceClassName ?? (forceClassName !== false && isNewTheme)\n    return (\n      <span\n        className=\"_dsp_contents\"\n        {...(theme &&\n          enableClassName && {\n            className: `${className} _dsp_contents`,\n            style: {\n              // in order to provide currentColor, set color by default\n              color: variableToString(theme.color),\n            },\n          })}\n      >\n        {next}\n      </span>\n    )\n  }\n\n  return next\n}\n"],
-  "mappings": "AAkDQ;AAlDR,SAAS,aAAa;AACtB,SAAS,UAAU,oBAAoB;AAEvC,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAA+B,4BAA4B;AAGpD,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM;AAAS,WAAO,MAAM;AAChC,QAAM,SAAS,CAAC,CAAC,MAAM,SAAS;AAChC,QAAM,aAAa,qBAAqB,OAAO,MAAM;AACrD,QAAM,WAAW,MAAM,gBAAgB,IACnC,SAAS;AAAA,IAAI,MAAM;AAAA,IAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,gBAAgB,GAAG,KAAK,CAAC;AAAA,EAClD,IACA,MAAM;AAEV,SAAO,kBAAkB,YAAY,UAAU,KAAK;AACtD;AAEO,SAAS,kBACd,YACA,UACA,SACA;AACA,QAAM,EAAE,cAAc,YAAY,WAAW,MAAM,IAAI;AACvD,QAAM,EAAE,SAAS,eAAe,IAAI;AAEpC,QAAM,gBAAgB,aAAa,KAAK;AACxC,MAAI,YAAY;AACd,kBAAc,UAAU;AAAA,EAC1B;AAIA,MAAI,CAAC,cAAc,CAAC,cAAc,WAAW,CAAC,kBAAkB,CAAC,SAAS;AACxE,WAAO;AAAA,EACT;AAGA,MAAI,OAAO;AAEX,MAAI,WAAW,cAAc;AAC3B,WAAO,SAAS,IAAI,MAAM,CAAC,UAAU;AACnC,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,oBAAC,SAAM,MAAM,aAAa,MAAM,YAAa,gBAAM,MAAM,UAAS;AAAA,MACpE;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SACE,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,cAClC,gBACH;AAGF,MAAI,OAAO;AACT,UAAM,kBAAkB,mBAAmB,mBAAmB,SAAS;AACvE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACT,GAAI,SACH,mBAAmB;AAAA,UACjB,WAAW,GAAG;AAAA,UACd,OAAO;AAAA;AAAA,YAEL,OAAO,iBAAiB,MAAM,KAAK;AAAA,UACrC;AAAA,QACF;AAAA,QAED;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement, isValidElement } from 'react'\n\nimport { variableToString } from '../createVariable.js'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'\nimport { useServerRef } from '../hooks/useServerHooks.js'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme.js'\nimport type { ThemeProps } from '../types.js'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error only for internal views\n  if (props.disable) return props.children\n  const isRoot = !!props['_isRoot']\n  const themeState = useChangeThemeEffect(props, isRoot)\n  const children = props['data-themeable']\n    ? Children.map(props.children, (child) =>\n        cloneElement(child, { ['data-themeable']: true })\n      )\n    : props.children\n\n  return useThemedChildren(themeState, children, props)\n}\n\nexport function useThemedChildren(\n  themeState: ChangedThemeResponse,\n  children: any,\n  options: {\n    forceClassName?: boolean\n    shallow?: boolean\n    passPropsToChildren?: boolean\n  }\n) {\n  const { themeManager, isNewTheme, className, theme } = themeState\n  const { shallow, forceClassName } = options\n  const hasEverThemed = useServerRef(false)\n  if (isNewTheme) {\n    hasEverThemed.current = true\n  }\n\n  if (isNewTheme || hasEverThemed.current || forceClassName) {\n    // be sure to memoize shouldReset to avoid reparenting\n    let next = Children.toArray(children)\n\n    // each children of these children wont get the theme\n    if (shallow && themeManager) {\n      next = next.map((child) => {\n        return isValidElement(child)\n          ? cloneElement(\n              child,\n              undefined,\n              <Theme name={themeManager.state.parentName}>\n                {(child as any).props.children}\n              </Theme>\n            )\n          : child\n      })\n    }\n\n    // tried this but themes css doesn't fully like it\n    // if (shouldAttachClassName && options.passPropsToChildren) {\n    //   next = next.map((child: any) => {\n    //     const childStyle = child.props?.style\n    //     console.log('pass it down', className, child.props.className || '')\n    //     const newProps = {\n    //       className: (child.props.className || '') + ' ' + className,\n    //       style: Array.isArray(childStyle)\n    //         ? [colorStyle, ...childStyle]\n    //         : {\n    //             ...colorStyle,\n    //             ...childStyle,\n    //           },\n    //     }\n    //     return isValidElement(child) ? cloneElement(child as any, newProps) : child\n    //   })\n    // }\n\n    const wrapped = (\n      <ThemeManagerContext.Provider value={themeManager}>\n        {next}\n      </ThemeManagerContext.Provider>\n    )\n\n    if (forceClassName === false) {\n      return wrapped\n    }\n\n    if (isWeb && !options.passPropsToChildren) {\n      // in order to provide currentColor, set color by default\n      const themeColor = theme && isNewTheme ? variableToString(theme.color) : ''\n      const colorStyle = {\n        color: themeColor,\n      }\n\n      return (\n        <span className={`${className || ''} _dsp_contents`} style={colorStyle}>\n          {wrapped}\n        </span>\n      )\n    }\n  }\n\n  return children\n}\n"],
+  "mappings": "AAkDc;AAlDd,SAAS,aAAa;AACtB,SAAS,UAAU,cAAc,sBAAsB;AAEvD,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAA+B,4BAA4B;AAGpD,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM;AAAS,WAAO,MAAM;AAChC,QAAM,SAAS,CAAC,CAAC,MAAM,SAAS;AAChC,QAAM,aAAa,qBAAqB,OAAO,MAAM;AACrD,QAAM,WAAW,MAAM,gBAAgB,IACnC,SAAS;AAAA,IAAI,MAAM;AAAA,IAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,gBAAgB,GAAG,KAAK,CAAC;AAAA,EAClD,IACA,MAAM;AAEV,SAAO,kBAAkB,YAAY,UAAU,KAAK;AACtD;AAEO,SAAS,kBACd,YACA,UACA,SAKA;AACA,QAAM,EAAE,cAAc,YAAY,WAAW,MAAM,IAAI;AACvD,QAAM,EAAE,SAAS,eAAe,IAAI;AACpC,QAAM,gBAAgB,aAAa,KAAK;AACxC,MAAI,YAAY;AACd,kBAAc,UAAU;AAAA,EAC1B;AAEA,MAAI,cAAc,cAAc,WAAW,gBAAgB;AAEzD,QAAI,OAAO,SAAS,QAAQ,QAAQ;AAGpC,QAAI,WAAW,cAAc;AAC3B,aAAO,KAAK,IAAI,CAAC,UAAU;AACzB,eAAO,eAAe,KAAK,IACvB;AAAA,UACE;AAAA,UACA;AAAA,UACA,oBAAC,SAAM,MAAM,aAAa,MAAM,YAC5B,gBAAc,MAAM,UACxB;AAAA,QACF,IACA;AAAA,MACN,CAAC;AAAA,IACH;AAoBA,UAAM,UACJ,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,cAClC,gBACH;AAGF,QAAI,mBAAmB,OAAO;AAC5B,aAAO;AAAA,IACT;AAEA,QAAI,SAAS,CAAC,QAAQ,qBAAqB;AAEzC,YAAM,aAAa,SAAS,aAAa,iBAAiB,MAAM,KAAK,IAAI;AACzE,YAAM,aAAa;AAAA,QACjB,OAAO;AAAA,MACT;AAEA,aACE,oBAAC,UAAK,WAAW,GAAG,aAAa,oBAAoB,OAAO,YACzD,mBACH;AAAA,IAEJ;AAAA,EACF;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/views/Theme.mjs

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { isWeb } from "@tamagui/constants";
-import { Children, cloneElement } from "react";
+import { Children, cloneElement, isValidElement } from "react";
 import { variableToString } from "../createVariable.js";
 import { ThemeManagerContext } from "../helpers/ThemeManagerContext.js";
 import { useServerRef } from "../hooks/useServerHooks.js";
@@ -23,38 +23,30 @@ function useThemedChildren(themeState, children, options) {
   if (isNewTheme) {
     hasEverThemed.current = true;
   }
-  if (!isNewTheme && !hasEverThemed.current && !forceClassName && !shallow) {
-    return children;
+  if (isNewTheme || hasEverThemed.current || forceClassName) {
+    let next = Children.toArray(children);
+    if (shallow && themeManager) {
+      next = next.map((child) => {
+        return isValidElement(child) ? cloneElement(
+          child,
+          void 0,
+          /* @__PURE__ */ jsx(Theme, { name: themeManager.state.parentName, children: child.props.children })
+        ) : child;
+      });
+    }
+    const wrapped = /* @__PURE__ */ jsx(ThemeManagerContext.Provider, { value: themeManager, children: next });
+    if (forceClassName === false) {
+      return wrapped;
+    }
+    if (isWeb && !options.passPropsToChildren) {
+      const themeColor = theme && isNewTheme ? variableToString(theme.color) : "";
+      const colorStyle = {
+        color: themeColor
+      };
+      return /* @__PURE__ */ jsx("span", { className: `${className || ""} _dsp_contents`, style: colorStyle, children: wrapped });
+    }
   }
-  let next = children;
-  if (shallow && themeManager) {
-    next = Children.map(next, (child) => {
-      return cloneElement(
-        child,
-        void 0,
-        /* @__PURE__ */ jsx(Theme, { name: themeManager.state.parentName, children: child.props.children })
-      );
-    });
-  }
-  next = /* @__PURE__ */ jsx(ThemeManagerContext.Provider, { value: themeManager, children: next });
-  if (isWeb) {
-    const enableClassName = forceClassName ?? (forceClassName !== false && isNewTheme);
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: "_dsp_contents",
-        ...theme && enableClassName && {
-          className: `${className} _dsp_contents`,
-          style: {
-            // in order to provide currentColor, set color by default
-            color: variableToString(theme.color)
-          }
-        },
-        children: next
-      }
-    );
-  }
-  return next;
+  return children;
 }
 export {
   Theme,

package/dist/esm/views/Theme.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement } from 'react'\n\nimport { variableToString } from '../createVariable.js'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'\nimport { useServerRef } from '../hooks/useServerHooks.js'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme.js'\nimport type { ThemeProps } from '../types.js'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error only for internal views\n  if (props.disable) return props.children\n  const isRoot = !!props['_isRoot']\n  const themeState = useChangeThemeEffect(props, isRoot)\n  const children = props['data-themeable']\n    ? Children.map(props.children, (child) =>\n        cloneElement(child, { ['data-themeable']: true })\n      )\n    : props.children\n\n  return useThemedChildren(themeState, children, props)\n}\n\nexport function useThemedChildren(\n  themeState: ChangedThemeResponse,\n  children: any,\n  options: { forceClassName?: boolean; shallow?: boolean }\n) {\n  const { themeManager, isNewTheme, className, theme } = themeState\n  const { shallow, forceClassName } = options\n\n  const hasEverThemed = useServerRef(false)\n  if (isNewTheme) {\n    hasEverThemed.current = true\n  }\n\n  // once a theme is set it always passes the context to avoid reparenting\n  // until then no context to avoid lots of context\n  if (!isNewTheme && !hasEverThemed.current && !forceClassName && !shallow) {\n    return children\n  }\n\n  // be sure to memoize shouldReset to avoid reparenting\n  let next = children\n\n  if (shallow && themeManager) {\n    next = Children.map(next, (child) => {\n      return cloneElement(\n        child,\n        undefined,\n        <Theme name={themeManager.state.parentName}>{child.props.children}</Theme>\n      )\n    })\n  }\n\n  next = (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {next}\n    </ThemeManagerContext.Provider>\n  )\n\n  if (isWeb) {\n    const enableClassName = forceClassName ?? (forceClassName !== false && isNewTheme)\n    return (\n      <span\n        className=\"_dsp_contents\"\n        {...(theme &&\n          enableClassName && {\n            className: `${className} _dsp_contents`,\n            style: {\n              // in order to provide currentColor, set color by default\n              color: variableToString(theme.color),\n            },\n          })}\n      >\n        {next}\n      </span>\n    )\n  }\n\n  return next\n}\n"],
-  "mappings": "AAkDQ;AAlDR,SAAS,aAAa;AACtB,SAAS,UAAU,oBAAoB;AAEvC,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAA+B,4BAA4B;AAGpD,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM;AAAS,WAAO,MAAM;AAChC,QAAM,SAAS,CAAC,CAAC,MAAM,SAAS;AAChC,QAAM,aAAa,qBAAqB,OAAO,MAAM;AACrD,QAAM,WAAW,MAAM,gBAAgB,IACnC,SAAS;AAAA,IAAI,MAAM;AAAA,IAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,gBAAgB,GAAG,KAAK,CAAC;AAAA,EAClD,IACA,MAAM;AAEV,SAAO,kBAAkB,YAAY,UAAU,KAAK;AACtD;AAEO,SAAS,kBACd,YACA,UACA,SACA;AACA,QAAM,EAAE,cAAc,YAAY,WAAW,MAAM,IAAI;AACvD,QAAM,EAAE,SAAS,eAAe,IAAI;AAEpC,QAAM,gBAAgB,aAAa,KAAK;AACxC,MAAI,YAAY;AACd,kBAAc,UAAU;AAAA,EAC1B;AAIA,MAAI,CAAC,cAAc,CAAC,cAAc,WAAW,CAAC,kBAAkB,CAAC,SAAS;AACxE,WAAO;AAAA,EACT;AAGA,MAAI,OAAO;AAEX,MAAI,WAAW,cAAc;AAC3B,WAAO,SAAS,IAAI,MAAM,CAAC,UAAU;AACnC,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,oBAAC,SAAM,MAAM,aAAa,MAAM,YAAa,gBAAM,MAAM,UAAS;AAAA,MACpE;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SACE,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,cAClC,gBACH;AAGF,MAAI,OAAO;AACT,UAAM,kBAAkB,mBAAmB,mBAAmB,SAAS;AACvE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACT,GAAI,SACH,mBAAmB;AAAA,UACjB,WAAW,GAAG;AAAA,UACd,OAAO;AAAA;AAAA,YAEL,OAAO,iBAAiB,MAAM,KAAK;AAAA,UACrC;AAAA,QACF;AAAA,QAED;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement, isValidElement } from 'react'\n\nimport { variableToString } from '../createVariable.js'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'\nimport { useServerRef } from '../hooks/useServerHooks.js'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme.js'\nimport type { ThemeProps } from '../types.js'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error only for internal views\n  if (props.disable) return props.children\n  const isRoot = !!props['_isRoot']\n  const themeState = useChangeThemeEffect(props, isRoot)\n  const children = props['data-themeable']\n    ? Children.map(props.children, (child) =>\n        cloneElement(child, { ['data-themeable']: true })\n      )\n    : props.children\n\n  return useThemedChildren(themeState, children, props)\n}\n\nexport function useThemedChildren(\n  themeState: ChangedThemeResponse,\n  children: any,\n  options: {\n    forceClassName?: boolean\n    shallow?: boolean\n    passPropsToChildren?: boolean\n  }\n) {\n  const { themeManager, isNewTheme, className, theme } = themeState\n  const { shallow, forceClassName } = options\n  const hasEverThemed = useServerRef(false)\n  if (isNewTheme) {\n    hasEverThemed.current = true\n  }\n\n  if (isNewTheme || hasEverThemed.current || forceClassName) {\n    // be sure to memoize shouldReset to avoid reparenting\n    let next = Children.toArray(children)\n\n    // each children of these children wont get the theme\n    if (shallow && themeManager) {\n      next = next.map((child) => {\n        return isValidElement(child)\n          ? cloneElement(\n              child,\n              undefined,\n              <Theme name={themeManager.state.parentName}>\n                {(child as any).props.children}\n              </Theme>\n            )\n          : child\n      })\n    }\n\n    // tried this but themes css doesn't fully like it\n    // if (shouldAttachClassName && options.passPropsToChildren) {\n    //   next = next.map((child: any) => {\n    //     const childStyle = child.props?.style\n    //     console.log('pass it down', className, child.props.className || '')\n    //     const newProps = {\n    //       className: (child.props.className || '') + ' ' + className,\n    //       style: Array.isArray(childStyle)\n    //         ? [colorStyle, ...childStyle]\n    //         : {\n    //             ...colorStyle,\n    //             ...childStyle,\n    //           },\n    //     }\n    //     return isValidElement(child) ? cloneElement(child as any, newProps) : child\n    //   })\n    // }\n\n    const wrapped = (\n      <ThemeManagerContext.Provider value={themeManager}>\n        {next}\n      </ThemeManagerContext.Provider>\n    )\n\n    if (forceClassName === false) {\n      return wrapped\n    }\n\n    if (isWeb && !options.passPropsToChildren) {\n      // in order to provide currentColor, set color by default\n      const themeColor = theme && isNewTheme ? variableToString(theme.color) : ''\n      const colorStyle = {\n        color: themeColor,\n      }\n\n      return (\n        <span className={`${className || ''} _dsp_contents`} style={colorStyle}>\n          {wrapped}\n        </span>\n      )\n    }\n  }\n\n  return children\n}\n"],
+  "mappings": "AAkDc;AAlDd,SAAS,aAAa;AACtB,SAAS,UAAU,cAAc,sBAAsB;AAEvD,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAA+B,4BAA4B;AAGpD,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM;AAAS,WAAO,MAAM;AAChC,QAAM,SAAS,CAAC,CAAC,MAAM,SAAS;AAChC,QAAM,aAAa,qBAAqB,OAAO,MAAM;AACrD,QAAM,WAAW,MAAM,gBAAgB,IACnC,SAAS;AAAA,IAAI,MAAM;AAAA,IAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,gBAAgB,GAAG,KAAK,CAAC;AAAA,EAClD,IACA,MAAM;AAEV,SAAO,kBAAkB,YAAY,UAAU,KAAK;AACtD;AAEO,SAAS,kBACd,YACA,UACA,SAKA;AACA,QAAM,EAAE,cAAc,YAAY,WAAW,MAAM,IAAI;AACvD,QAAM,EAAE,SAAS,eAAe,IAAI;AACpC,QAAM,gBAAgB,aAAa,KAAK;AACxC,MAAI,YAAY;AACd,kBAAc,UAAU;AAAA,EAC1B;AAEA,MAAI,cAAc,cAAc,WAAW,gBAAgB;AAEzD,QAAI,OAAO,SAAS,QAAQ,QAAQ;AAGpC,QAAI,WAAW,cAAc;AAC3B,aAAO,KAAK,IAAI,CAAC,UAAU;AACzB,eAAO,eAAe,KAAK,IACvB;AAAA,UACE;AAAA,UACA;AAAA,UACA,oBAAC,SAAM,MAAM,aAAa,MAAM,YAC5B,gBAAc,MAAM,UACxB;AAAA,QACF,IACA;AAAA,MACN,CAAC;AAAA,IACH;AAoBA,UAAM,UACJ,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,cAClC,gBACH;AAGF,QAAI,mBAAmB,OAAO;AAC5B,aAAO;AAAA,IACT;AAEA,QAAI,SAAS,CAAC,QAAQ,qBAAqB;AAEzC,YAAM,aAAa,SAAS,aAAa,iBAAiB,MAAM,KAAK,IAAI;AACzE,YAAM,aAAa;AAAA,QACjB,OAAO;AAAA,MACT;AAEA,aACE,oBAAC,UAAK,WAAW,GAAG,aAAa,oBAAoB,OAAO,YACzD,mBACH;AAAA,IAEJ;AAAA,EACF;AAEA,SAAO;AACT;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.5.20",
+  "version": "1.5.22",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,19 +27,19 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "^1.5.20",
-    "@tamagui/constants": "^1.5.20",
-    "@tamagui/helpers": "^1.5.20",
-    "@tamagui/normalize-css-color": "^1.5.20",
-    "@tamagui/use-did-finish-ssr": "^1.5.20",
-    "@tamagui/use-event": "^1.5.20",
-    "@tamagui/use-force-update": "^1.5.20"
+    "@tamagui/compose-refs": "^1.5.22",
+    "@tamagui/constants": "^1.5.22",
+    "@tamagui/helpers": "^1.5.22",
+    "@tamagui/normalize-css-color": "^1.5.22",
+    "@tamagui/use-did-finish-ssr": "^1.5.22",
+    "@tamagui/use-event": "^1.5.22",
+    "@tamagui/use-force-update": "^1.5.22"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.5.20",
+    "@tamagui/build": "^1.5.22",
     "@testing-library/react": "^13.4.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",

package/src/createComponent.tsx

@@ -209,6 +209,7 @@ export function createComponent<
 
     const isAnimated = (() => {
       const next = !!(
+        !staticConfig.isHOC &&
         useAnimations &&
         (props.animation || (props.style && hasAnimatedStyleValue(props.style)))
       )
@@ -379,7 +380,7 @@ export function createComponent<
     // once you set animation prop don't remove it, you can set to undefined/false
     // reason is animations are heavy - no way around it, and must be run inline here (🙅 loading as a sub-component)
     let animationStyles: any
-    if (!isRSC && isAnimated && useAnimations) {
+    if (!isRSC && isAnimated && useAnimations && !staticConfig.isHOC) {
       const animations = useAnimations({
         props: propsWithAnimation,
         style: splitStylesStyle,
@@ -719,6 +720,7 @@ export function createComponent<
 
     content = useThemedChildren(themeState, content, {
       shallow: stateRef.current.themeShallow,
+      // passPropsToChildren: true,
     })
 
     if (process.env.TAMAGUI_TARGET === 'web') {
@@ -1065,7 +1067,6 @@ type CreateSpacerProps = SpacedChildrenProps & { key: string }
 
 function createSpacer({ key, direction, space, spaceFlex }: CreateSpacerProps) {
   return (
-    // @ts-ignore this one blew up but the types seem better
     <Spacer
       key={key}
       size={space}
@@ -1078,8 +1079,8 @@ function createSpacer({ key, direction, space, spaceFlex }: CreateSpacerProps) {
 }
 
 function isUnspaced(child: React.ReactNode) {
-  // console.log('unspaced?', child, getMedia())
-  return child?.['type']?.['isVisuallyHidden'] || child?.['type']?.['isUnspaced']
+  const t = child?.['type']
+  return t?.['isVisuallyHidden'] || t?.['isUnspaced']
 }
 
 const DefaultProps = new Map()
@@ -1121,7 +1122,6 @@ function mergeConfigDefaultProps(
 }
 
 const AbsoluteFill: any = createComponent({
-  componentName: 'AbsoluteFill',
   defaultProps: {
     ...stackDefaultStyles,
     flexDirection: 'column',

package/src/helpers/getSplitStyles.tsx

@@ -314,7 +314,13 @@ export const getSplitStyles: StyleSplitter = (
       }
     }
 
-    if (keyInit in usedKeys || keyInit in skipProps) {
+    if (!staticConfig.isHOC) {
+      if (keyInit in skipProps) {
+        continue
+      }
+    }
+
+    if (keyInit in usedKeys) {
       continue
     }
 
@@ -505,6 +511,7 @@ export const getSplitStyles: StyleSplitter = (
     let isPseudo = keyInit in validPseudoKeys
 
     const isHOCShouldPassThrough = staticConfig.isHOC && (isMedia || isPseudo)
+
     const shouldPassProp = !(
       isMedia ||
       isPseudo ||
@@ -679,7 +686,7 @@ export const getSplitStyles: StyleSplitter = (
             }
             if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
               // prettier-ignore
-              console.log('Merged pseudo?', shouldMerge, { importance, curImportance, pkey, val })
+              console.log('    merge pseudo?', keyInit, shouldMerge, { importance, curImportance, pkey, val })
             }
           }
         }

package/src/styled.tsx

@@ -83,23 +83,6 @@ export function styled<
       parentStaticConfig?.isReactNative
   )
 
-  // unrecognized, just pass through as default props
-  if (!isTamagui && !isReactNative) {
-    if (process.env.NODE_ENV === 'development') {
-      // TODO variants would need to work through props to support this
-      if (options?.variants) {
-        console.warn(
-          `Warning: wrapping a non-Tamagui element in styled() and passing variants isn't supported (yet).`
-        )
-      }
-    }
-
-    return forwardRef(function styled(props, ref) {
-      // @ts-ignore
-      return <Component ref={ref} {...options} {...props} />
-    }) as StyledComponent
-  }
-
   const staticConfigProps = (() => {
     if (options) {
       const {

package/src/views/Theme.tsx

@@ -1,5 +1,5 @@
 import { isWeb } from '@tamagui/constants'
-import { Children, cloneElement } from 'react'
+import { Children, cloneElement, isValidElement } from 'react'
 
 import { variableToString } from '../createVariable.js'
 import { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'
@@ -24,59 +24,80 @@ export function Theme(props: ThemeProps) {
 export function useThemedChildren(
   themeState: ChangedThemeResponse,
   children: any,
-  options: { forceClassName?: boolean; shallow?: boolean }
+  options: {
+    forceClassName?: boolean
+    shallow?: boolean
+    passPropsToChildren?: boolean
+  }
 ) {
   const { themeManager, isNewTheme, className, theme } = themeState
   const { shallow, forceClassName } = options
-
   const hasEverThemed = useServerRef(false)
   if (isNewTheme) {
     hasEverThemed.current = true
   }
 
-  // once a theme is set it always passes the context to avoid reparenting
-  // until then no context to avoid lots of context
-  if (!isNewTheme && !hasEverThemed.current && !forceClassName && !shallow) {
-    return children
-  }
+  if (isNewTheme || hasEverThemed.current || forceClassName) {
+    // be sure to memoize shouldReset to avoid reparenting
+    let next = Children.toArray(children)
 
-  // be sure to memoize shouldReset to avoid reparenting
-  let next = children
-
-  if (shallow && themeManager) {
-    next = Children.map(next, (child) => {
-      return cloneElement(
-        child,
-        undefined,
-        <Theme name={themeManager.state.parentName}>{child.props.children}</Theme>
-      )
-    })
-  }
+    // each children of these children wont get the theme
+    if (shallow && themeManager) {
+      next = next.map((child) => {
+        return isValidElement(child)
+          ? cloneElement(
+              child,
+              undefined,
+              <Theme name={themeManager.state.parentName}>
+                {(child as any).props.children}
+              </Theme>
+            )
+          : child
+      })
+    }
 
-  next = (
-    <ThemeManagerContext.Provider value={themeManager}>
-      {next}
-    </ThemeManagerContext.Provider>
-  )
+    // tried this but themes css doesn't fully like it
+    // if (shouldAttachClassName && options.passPropsToChildren) {
+    //   next = next.map((child: any) => {
+    //     const childStyle = child.props?.style
+    //     console.log('pass it down', className, child.props.className || '')
+    //     const newProps = {
+    //       className: (child.props.className || '') + ' ' + className,
+    //       style: Array.isArray(childStyle)
+    //         ? [colorStyle, ...childStyle]
+    //         : {
+    //             ...colorStyle,
+    //             ...childStyle,
+    //           },
+    //     }
+    //     return isValidElement(child) ? cloneElement(child as any, newProps) : child
+    //   })
+    // }
 
-  if (isWeb) {
-    const enableClassName = forceClassName ?? (forceClassName !== false && isNewTheme)
-    return (
-      <span
-        className="_dsp_contents"
-        {...(theme &&
-          enableClassName && {
-            className: `${className} _dsp_contents`,
-            style: {
-              // in order to provide currentColor, set color by default
-              color: variableToString(theme.color),
-            },
-          })}
-      >
+    const wrapped = (
+      <ThemeManagerContext.Provider value={themeManager}>
         {next}
-      </span>
+      </ThemeManagerContext.Provider>
     )
+
+    if (forceClassName === false) {
+      return wrapped
+    }
+
+    if (isWeb && !options.passPropsToChildren) {
+      // in order to provide currentColor, set color by default
+      const themeColor = theme && isNewTheme ? variableToString(theme.color) : ''
+      const colorStyle = {
+        color: themeColor,
+      }
+
+      return (
+        <span className={`${className || ''} _dsp_contents`} style={colorStyle}>
+          {wrapped}
+        </span>
+      )
+    }
   }
 
-  return next
+  return children
 }

package/types/createComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAUN,MAAM,OAAO,CAAA;AAiBd,OAAO,EACL,SAAS,EACT,cAAc,EACd,WAAW,EACX,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAEhB,qBAAqB,EAErB,cAAc,EAIf,MAAM,SAAS,CAAA;AAmBhB,eAAO,MAAM,qBAAqB,EAAE,qBAMnC,CAAA;AAeD,eAAO,MAAM,QAAQ,eAAsB,CAAA;AA8B3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,GAAG,EAAE,EACtC,GAAG,GAAG,cAAc,EACpB,SAAS,GAAG,KAAK,EAEjB,QAAQ,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,EACpD,eAAe,CAAC,EAAE,iBAAiB,4DAqwBpC;AAGD,eAAO,MAAM,QAAQ;YAAW;QAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;KAAE;;CAEjD,CAAA;AAMD,eAAO,MAAM,MAAM,0DA8CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAiGxD"}
+{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAUN,MAAM,OAAO,CAAA;AAiBd,OAAO,EACL,SAAS,EACT,cAAc,EACd,WAAW,EACX,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAEhB,qBAAqB,EAErB,cAAc,EAIf,MAAM,SAAS,CAAA;AAmBhB,eAAO,MAAM,qBAAqB,EAAE,qBAMnC,CAAA;AAeD,eAAO,MAAM,QAAQ,eAAsB,CAAA;AA8B3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,GAAG,EAAE,EACtC,GAAG,GAAG,cAAc,EACpB,SAAS,GAAG,KAAK,EAEjB,QAAQ,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,EACpD,eAAe,CAAC,EAAE,iBAAiB,4DAuwBpC;AAGD,eAAO,MAAM,QAAQ;YAAW;QAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;KAAE;;CAEjD,CAAA;AAMD,eAAO,MAAM,MAAM,0DA8CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAiGxD"}

package/types/helpers/getSplitStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,cAAc,CAAA;AAWxD,OAAO,KAAK,EACV,gBAAgB,EAChB,SAAS,EACT,cAAc,EAOd,eAAe,EACf,kBAAkB,EAClB,qBAAqB,EACrB,WAAW,EACZ,MAAM,aAAa,CAAA;AACpB,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,gCAAgC,CAAA;AAkBvC,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,UAAU,EAAE,gBAAgB,CAAA;IAC5B,YAAY,EAAE,kBAAkB,CAAA;IAChC,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC9B,KAAK,EAAE,eAAe,CAAA;IACtB,IAAI,EAAE,qBAAqB,CAAA;IAC3B,eAAe,CAAC,EAAE,iBAAiB,CAAA;IACnC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAsFhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,kBAAkB,EAChC,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE,eAAe,EACtB,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,eAAe,CAAC,EAAE,mBAAmB,EAErC,WAAW,CAAC,EAAE,MAAM,EACpB,KAAK,CAAC,EAAE,SAAS,KACd,cAAc,CAAA;AAEnB,eAAO,MAAM,UAAU,MAAM,CAAA;AAqB7B,eAAO,MAAM,cAAc,EAAE,aA0uB5B,CAAA;AA0FD,eAAO,MAAM,WAAW,eACV,aAAa,UACjB,MAAM,WACL,MAAM,sBACK,OAAO,wBACL,OAAO,KAC5B,SA6BF,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,aAI/B,CAAA;AAOD,eAAO,MAAM,cAAc,EAAE,aAU5B,CAAA;AA8BD,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA"}
+{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,cAAc,CAAA;AAWxD,OAAO,KAAK,EACV,gBAAgB,EAChB,SAAS,EACT,cAAc,EAOd,eAAe,EACf,kBAAkB,EAClB,qBAAqB,EACrB,WAAW,EACZ,MAAM,aAAa,CAAA;AACpB,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,gCAAgC,CAAA;AAkBvC,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,UAAU,EAAE,gBAAgB,CAAA;IAC5B,YAAY,EAAE,kBAAkB,CAAA;IAChC,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC9B,KAAK,EAAE,eAAe,CAAA;IACtB,IAAI,EAAE,qBAAqB,CAAA;IAC3B,eAAe,CAAC,EAAE,iBAAiB,CAAA;IACnC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAsFhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,kBAAkB,EAChC,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE,eAAe,EACtB,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,eAAe,CAAC,EAAE,mBAAmB,EAErC,WAAW,CAAC,EAAE,MAAM,EACpB,KAAK,CAAC,EAAE,SAAS,KACd,cAAc,CAAA;AAEnB,eAAO,MAAM,UAAU,MAAM,CAAA;AAqB7B,eAAO,MAAM,cAAc,EAAE,aAivB5B,CAAA;AA0FD,eAAO,MAAM,WAAW,eACV,aAAa,UACjB,MAAM,WACL,MAAM,sBACK,OAAO,wBACL,OAAO,KAC5B,SA6BF,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,aAI/B,CAAA;AAOD,eAAO,MAAM,cAAc,EAAE,aAU5B,CAAA;AA8BD,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA"}

package/types/styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../src/styled.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,qBAAqB,EACtB,MAAM,YAAY,CAAA;AAGnB,MAAM,MAAM,aAAa,CAAC,eAAe,SAAS,iBAAiB,IACjE,QAAQ,CAAC,eAAe,CAAC,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,GAAG,SAAS,CAAA;IAC1D,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;CACzC,CAAA;AAEH,KAAK,YAAY,CAAC,CAAC,SAAS,iBAAiB,IAAI,CAAC,SAAS,gBAAgB,CACzE,GAAG,EACH,GAAG,EACH,MAAM,CAAC,CACR,GACG,CAAC,GACD,QAAQ,CAAC,CAAC,CAAC,CAAA;AAEf,KAAK,eAAe,CAAC,CAAC,SAAS,iBAAiB,IAAI,CAAC,SAAS,gBAAgB,CAC5E,GAAG,EACH,GAAG,EACH,GAAG,EACH,MAAM,CAAC,CACR,GACG,CAAC,GACD,EAAE,CAAA;AAEN,wBAAgB,MAAM,CACpB,eAAe,SAAS,iBAAiB,EACzC,QAAQ,SAAS,kBAAkB,CAAC,eAAe,CAAC,GAAG,IAAI,GAAG,kBAAkB,CAAC,eAAe,CAAC,GAAG,IAAI,EAExG,SAAS,EAAE,eAAe,EAE1B,OAAO,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC,GAAG;IACpC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IAE/B,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;IACxC,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,EACD,uBAAuB,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,qrDAsIhD"}
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../src/styled.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,qBAAqB,EACtB,MAAM,YAAY,CAAA;AAGnB,MAAM,MAAM,aAAa,CAAC,eAAe,SAAS,iBAAiB,IACjE,QAAQ,CAAC,eAAe,CAAC,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,GAAG,SAAS,CAAA;IAC1D,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;CACzC,CAAA;AAEH,KAAK,YAAY,CAAC,CAAC,SAAS,iBAAiB,IAAI,CAAC,SAAS,gBAAgB,CACzE,GAAG,EACH,GAAG,EACH,MAAM,CAAC,CACR,GACG,CAAC,GACD,QAAQ,CAAC,CAAC,CAAC,CAAA;AAEf,KAAK,eAAe,CAAC,CAAC,SAAS,iBAAiB,IAAI,CAAC,SAAS,gBAAgB,CAC5E,GAAG,EACH,GAAG,EACH,GAAG,EACH,MAAM,CAAC,CACR,GACG,CAAC,GACD,EAAE,CAAA;AAEN,wBAAgB,MAAM,CACpB,eAAe,SAAS,iBAAiB,EACzC,QAAQ,SAAS,kBAAkB,CAAC,eAAe,CAAC,GAAG,IAAI,GAAG,kBAAkB,CAAC,eAAe,CAAC,GAAG,IAAI,EAExG,SAAS,EAAE,eAAe,EAE1B,OAAO,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC,GAAG;IACpC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IAE/B,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;IACxC,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,EACD,uBAAuB,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,qrDAqHhD"}