@storybook/react-native-theming 9.0.0-beta.10 → 9.0.0-beta.11

package/dist/index.d.ts

@@ -1,125 +1,9 @@
 import * as RN from 'react-native';
 import { ImageSourcePropType, ImageProps, TextStyle } from 'react-native';
-import * as React$1 from 'react';
+import { Theme as Theme$1 } from './theming.js';
+export { ThemeProvider, useTheme, withTheme } from './theming.js';
 import { ReactElement } from 'react';
 
-type IsPreReact19 = 2 extends Parameters<React.FunctionComponent<any>>['length']
-  ? true
-  : false
-
-// unpack all here to avoid infinite self-referencing when defining our own JSX namespace for the pre-React 19 case
-type ReactJSXElement = true extends IsPreReact19
-  ? /** @ts-ignore */
-    JSX.Element
-  : /** @ts-ignore */
-    React.JSX.Element
-type ReactJSXElementClass = true extends IsPreReact19
-  ? /** @ts-ignore */
-    JSX.ElementClass
-  : /** @ts-ignore */
-    React.JSX.ElementClass
-type ReactJSXElementAttributesProperty = true extends IsPreReact19
-  ? /** @ts-ignore */
-    JSX.ElementAttributesProperty
-  : /** @ts-ignore */
-    React.JSX.ElementAttributesProperty
-type ReactJSXElementChildrenAttribute = true extends IsPreReact19
-  ? /** @ts-ignore */
-    JSX.ElementChildrenAttribute
-  : /** @ts-ignore */
-    React.JSX.ElementChildrenAttribute
-type ReactJSXLibraryManagedAttributes<C, P> = true extends IsPreReact19
-  ? /** @ts-ignore */
-    JSX.LibraryManagedAttributes<C, P>
-  : /** @ts-ignore */
-    React.JSX.LibraryManagedAttributes<C, P>
-type ReactJSXIntrinsicAttributes = true extends IsPreReact19
-  ? /** @ts-ignore */
-    JSX.IntrinsicAttributes
-  : /** @ts-ignore */
-    React.JSX.IntrinsicAttributes
-type ReactJSXIntrinsicClassAttributes<T> = true extends IsPreReact19
-  ? /** @ts-ignore */
-    JSX.IntrinsicClassAttributes<T>
-  : /** @ts-ignore */
-    React.JSX.IntrinsicClassAttributes<T>
-type ReactJSXIntrinsicElements = true extends IsPreReact19
-  ? /** @ts-ignore */
-    JSX.IntrinsicElements
-  : /** @ts-ignore */
-    React.JSX.IntrinsicElements
-
-type ReactJSXElementType = true extends IsPreReact19
-  ? // based on the code from @types/react@18.2.8
-    // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/3197efc097d522c4bf02b94e1a0766d007d6cdeb/types/react/index.d.ts#LL3204C13-L3204C13
-    string | React.JSXElementConstructor<any>
-  : /** @ts-ignore */
-    React.JSX.ElementType
-
-declare namespace ReactJSX {
-  type ElementType = ReactJSXElementType
-  interface Element extends ReactJSXElement {}
-  interface ElementClass extends ReactJSXElementClass {}
-  interface ElementAttributesProperty
-    extends ReactJSXElementAttributesProperty {}
-  interface ElementChildrenAttribute extends ReactJSXElementChildrenAttribute {}
-
-  type LibraryManagedAttributes<C, P> = ReactJSXLibraryManagedAttributes<C, P>
-
-  interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
-  interface IntrinsicClassAttributes<T>
-    extends ReactJSXIntrinsicClassAttributes<T> {}
-
-  type IntrinsicElements = ReactJSXIntrinsicElements
-}
-
-/**
- * @desc Utility type for getting props type of React component.
- * It takes `defaultProps` into an account - making props with defaults optional.
- */
-type PropsOf<
-  C extends keyof ReactJSX.IntrinsicElements | React.JSXElementConstructor<any>
-> = ReactJSX.LibraryManagedAttributes<C, React.ComponentProps<C>>
-
-// We need to use this version of Omit as it's distributive (Will preserve unions)
-type DistributiveOmit<T, U> = T extends any
-  ? Pick<T, Exclude<keyof T, U>>
-  : never
-
-// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
-// TypeScript Version: 3.1
-
-
-
-interface ThemeProviderProps {
-  theme: Partial<Theme> | ((outerTheme: Theme) => Theme)
-  children: React$1.ReactNode
-}
-
-declare function useTheme(): Theme
-
-interface ThemeProvider {
-  (props: ThemeProviderProps): React$1.ReactElement
-}
-
-declare const ThemeProvider: ThemeProvider
-
-type withTheme = <
-  C extends React$1.ComponentType<React$1.ComponentProps<C>>
->(
-  component: C
-) => React$1.FC<DistributiveOmit<PropsOf<C>, 'theme'> & { theme?: Theme }>
-
-declare const withTheme: withTheme
-
-// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
-// TypeScript Version: 3.4
-
-
-
-// tslint:disable-next-line: no-empty-interface
-export interface Theme extends StorybookTheme {}
-
 // Definitions by: Pat Sissons <https://github.com/patsissons>
 // TypeScript Version: 3.4
 
@@ -219,7 +103,7 @@ interface CreateStyledComponent<
     ...styles: ArrayInterpolation<
       ComponentProps &
         SpecificComponentProps &
-        AdditionalProps & { theme: Theme },
+        AdditionalProps & { theme: Theme$1 },
       StyleType
     >
   ): StyledComponent<
@@ -235,7 +119,7 @@ interface CreateStyledComponent<
     ...styles: ArrayInterpolation<
       ComponentProps &
         SpecificComponentProps &
-        AdditionalProps & { theme: Theme },
+        AdditionalProps & { theme: Theme$1 },
       StyleType
     >
   ): StyledComponent<
@@ -264,7 +148,7 @@ interface CreateStyled$1 {
     options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
   ): CreateStyledComponent<
     Pick<React.ComponentProps<C>, ForwardedProps> & {
-      theme?: Theme
+      theme?: Theme$1
       as?: React.ElementType
     },
     {},
@@ -277,7 +161,7 @@ interface CreateStyled$1 {
     options?: StyledOptions<React.ComponentProps<C>>
   ): CreateStyledComponent<
     React.ComponentProps<C> & {
-      theme?: Theme
+      theme?: Theme$1
       as?: React.ElementType
     },
     {},
@@ -294,7 +178,7 @@ interface CreateStyled$1 {
     options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
   ): CreateStyledComponent<
     Pick<React.ComponentProps<C>, ForwardedProps> & {
-      theme?: Theme
+      theme?: Theme$1
       as?: React.ElementType
     },
     {},
@@ -306,7 +190,7 @@ interface CreateStyled$1 {
     component: C,
     options?: StyledOptions<React.ComponentProps<C>>
   ): CreateStyledComponent<
-    React.ComponentProps<C> & { theme?: Theme; as?: React.ElementType },
+    React.ComponentProps<C> & { theme?: Theme$1; as?: React.ElementType },
     {},
     {},
     ReactNativeStyleType<React.ComponentProps<C>>
@@ -323,14 +207,14 @@ type ReactNative = typeof RN
 // those 2 are just copies of the `BaseCreateStyled` with supplied `C` type argument
 type HostClassComponent<C extends React.ComponentClass<any>> =
   CreateStyledComponent<
-    React.ComponentProps<C> & { theme?: Theme; as?: React.ElementType },
+    React.ComponentProps<C> & { theme?: Theme$1; as?: React.ElementType },
     {},
     { ref?: React.Ref<InstanceType<C>> },
     ReactNativeStyleType<React.ComponentProps<C>>
   >
 type HostFunctionComponent<C extends React.FunctionComponent<any>> =
   CreateStyledComponent<
-    React.ComponentProps<C> & { theme?: Theme; as?: React.ElementType },
+    React.ComponentProps<C> & { theme?: Theme$1; as?: React.ElementType },
     {},
     {},
     ReactNativeStyleType<React.ComponentProps<C>>
@@ -495,4 +379,7 @@ type StorybookTheme = StorybookThemeWeb;
 declare const theme: StorybookThemeWeb;
 declare const darkTheme: StorybookThemeWeb;
 
-export { StorybookTheme, StyledComponent, ThemeProvider, darkTheme, styled, theme, useTheme, withTheme };
+interface Theme extends StorybookTheme {
+}
+
+export { StorybookTheme, StyledComponent, Theme, darkTheme, styled, theme };

package/dist/index.js

@@ -1841,7 +1841,7 @@ var import_react_native = require("react-native");
 var import_css_to_react_native = __toESM(require_css_to_react_native());
 var React4 = __toESM(require("react"));
 
-// ../../node_modules/@emotion/react/dist/emotion-element-b4c8b265.esm.js
+// ../../node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
 var React2 = __toESM(require("react"));
 var import_react = require("react");
 
@@ -2358,7 +2358,8 @@ var compat = function compat2(element) {
   element.length < 1) {
     return;
   }
-  var value = element.value, parent = element.parent;
+  var value = element.value;
+  var parent = element.parent;
   var isImplicitRule = element.column === parent.column && element.line === parent.line;
   while (parent.type !== "rule") {
     parent = parent.parent;
@@ -2544,10 +2545,7 @@ var prefixer = function prefixer2(element, index2, children, callback) {
 };
 var getServerStylisCache = isBrowser ? void 0 : weakMemoize(function() {
   return memoize(function() {
-    var cache = {};
-    return function(name) {
-      return cache[name];
-    };
+    return {};
   });
 });
 var defaultStylisPlugins = [prefixer];
@@ -2585,7 +2583,7 @@ var createCache = function createCache2(options) {
   }
   var _insert;
   var omnipresentPlugins = [compat, removeLabel];
-  if (isBrowser) {
+  if (!getServerStylisCache) {
     var currentSheet;
     var finalizingPlugins = [stringify, rulesheet(function(rule) {
       currentSheet.insert(rule);
@@ -2669,11 +2667,323 @@ var hoistNonReactStatics = function(targetComponent, sourceComponent) {
   return (0, import_hoist_non_react_statics.default)(targetComponent, sourceComponent);
 };
 
+// ../../node_modules/@emotion/utils/dist/emotion-utils.esm.js
+var isBrowser2 = typeof document !== "undefined";
+function getRegisteredStyles(registered, registeredStyles, classNames) {
+  var rawClassName = "";
+  classNames.split(" ").forEach(function(className) {
+    if (registered[className] !== void 0) {
+      registeredStyles.push(registered[className] + ";");
+    } else if (className) {
+      rawClassName += className + " ";
+    }
+  });
+  return rawClassName;
+}
+var registerStyles = function registerStyles2(cache, serialized, isStringTag) {
+  var className = cache.key + "-" + serialized.name;
+  if (
+    // we only need to add the styles to the registered cache if the
+    // class name could be used further down
+    // the tree but if it's a string tag, we know it won't
+    // so we don't have to add it to registered cache.
+    // this improves memory usage since we can avoid storing the whole style string
+    (isStringTag === false || // we need to always store it if we're in compat mode and
+    // in node since emotion-server relies on whether a style is in
+    // the registered cache to know whether a style is global or not
+    // also, note that this check will be dead code eliminated in the browser
+    isBrowser2 === false && cache.compat !== void 0) && cache.registered[className] === void 0
+  ) {
+    cache.registered[className] = serialized.styles;
+  }
+};
+var insertStyles = function insertStyles2(cache, serialized, isStringTag) {
+  registerStyles(cache, serialized, isStringTag);
+  var className = cache.key + "-" + serialized.name;
+  if (cache.inserted[serialized.name] === void 0) {
+    var stylesForSSR = "";
+    var current = serialized;
+    do {
+      var maybeStyles = cache.insert(serialized === current ? "." + className : "", current, cache.sheet, true);
+      if (!isBrowser2 && maybeStyles !== void 0) {
+        stylesForSSR += maybeStyles;
+      }
+      current = current.next;
+    } while (current !== void 0);
+    if (!isBrowser2 && stylesForSSR.length !== 0) {
+      return stylesForSSR;
+    }
+  }
+};
+
+// ../../node_modules/@emotion/hash/dist/emotion-hash.esm.js
+function murmur2(str) {
+  var h = 0;
+  var k, i = 0, len = str.length;
+  for (; len >= 4; ++i, len -= 4) {
+    k = str.charCodeAt(i) & 255 | (str.charCodeAt(++i) & 255) << 8 | (str.charCodeAt(++i) & 255) << 16 | (str.charCodeAt(++i) & 255) << 24;
+    k = /* Math.imul(k, m): */
+    (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16);
+    k ^= /* k >>> r: */
+    k >>> 24;
+    h = /* Math.imul(k, m): */
+    (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16) ^ /* Math.imul(h, m): */
+    (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
+  }
+  switch (len) {
+    case 3:
+      h ^= (str.charCodeAt(i + 2) & 255) << 16;
+    case 2:
+      h ^= (str.charCodeAt(i + 1) & 255) << 8;
+    case 1:
+      h ^= str.charCodeAt(i) & 255;
+      h = /* Math.imul(h, m): */
+      (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
+  }
+  h ^= h >>> 13;
+  h = /* Math.imul(h, m): */
+  (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
+  return ((h ^ h >>> 15) >>> 0).toString(36);
+}
+
+// ../../node_modules/@emotion/unitless/dist/emotion-unitless.esm.js
+var unitlessKeys = {
+  animationIterationCount: 1,
+  aspectRatio: 1,
+  borderImageOutset: 1,
+  borderImageSlice: 1,
+  borderImageWidth: 1,
+  boxFlex: 1,
+  boxFlexGroup: 1,
+  boxOrdinalGroup: 1,
+  columnCount: 1,
+  columns: 1,
+  flex: 1,
+  flexGrow: 1,
+  flexPositive: 1,
+  flexShrink: 1,
+  flexNegative: 1,
+  flexOrder: 1,
+  gridRow: 1,
+  gridRowEnd: 1,
+  gridRowSpan: 1,
+  gridRowStart: 1,
+  gridColumn: 1,
+  gridColumnEnd: 1,
+  gridColumnSpan: 1,
+  gridColumnStart: 1,
+  msGridRow: 1,
+  msGridRowSpan: 1,
+  msGridColumn: 1,
+  msGridColumnSpan: 1,
+  fontWeight: 1,
+  lineHeight: 1,
+  opacity: 1,
+  order: 1,
+  orphans: 1,
+  scale: 1,
+  tabSize: 1,
+  widows: 1,
+  zIndex: 1,
+  zoom: 1,
+  WebkitLineClamp: 1,
+  // SVG-related properties
+  fillOpacity: 1,
+  floodOpacity: 1,
+  stopOpacity: 1,
+  strokeDasharray: 1,
+  strokeDashoffset: 1,
+  strokeMiterlimit: 1,
+  strokeOpacity: 1,
+  strokeWidth: 1
+};
+
+// ../../node_modules/@emotion/serialize/dist/emotion-serialize.esm.js
+var isDevelopment2 = false;
+var hyphenateRegex = /[A-Z]|^ms/g;
+var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
+var isCustomProperty = function isCustomProperty2(property) {
+  return property.charCodeAt(1) === 45;
+};
+var isProcessableValue = function isProcessableValue2(value) {
+  return value != null && typeof value !== "boolean";
+};
+var processStyleName = /* @__PURE__ */ memoize(function(styleName) {
+  return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, "-$&").toLowerCase();
+});
+var processStyleValue = function processStyleValue2(key, value) {
+  switch (key) {
+    case "animation":
+    case "animationName": {
+      if (typeof value === "string") {
+        return value.replace(animationRegex, function(match2, p1, p2) {
+          cursor = {
+            name: p1,
+            styles: p2,
+            next: cursor
+          };
+          return p1;
+        });
+      }
+    }
+  }
+  if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === "number" && value !== 0) {
+    return value + "px";
+  }
+  return value;
+};
+var noComponentSelectorMessage = "Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform.";
+function handleInterpolation(mergedProps, registered, interpolation) {
+  if (interpolation == null) {
+    return "";
+  }
+  var componentSelector = interpolation;
+  if (componentSelector.__emotion_styles !== void 0) {
+    return componentSelector;
+  }
+  switch (typeof interpolation) {
+    case "boolean": {
+      return "";
+    }
+    case "object": {
+      var keyframes = interpolation;
+      if (keyframes.anim === 1) {
+        cursor = {
+          name: keyframes.name,
+          styles: keyframes.styles,
+          next: cursor
+        };
+        return keyframes.name;
+      }
+      var serializedStyles = interpolation;
+      if (serializedStyles.styles !== void 0) {
+        var next2 = serializedStyles.next;
+        if (next2 !== void 0) {
+          while (next2 !== void 0) {
+            cursor = {
+              name: next2.name,
+              styles: next2.styles,
+              next: cursor
+            };
+            next2 = next2.next;
+          }
+        }
+        var styles2 = serializedStyles.styles + ";";
+        return styles2;
+      }
+      return createStringFromObject(mergedProps, registered, interpolation);
+    }
+    case "function": {
+      if (mergedProps !== void 0) {
+        var previousCursor = cursor;
+        var result = interpolation(mergedProps);
+        cursor = previousCursor;
+        return handleInterpolation(mergedProps, registered, result);
+      }
+      break;
+    }
+  }
+  var asString = interpolation;
+  if (registered == null) {
+    return asString;
+  }
+  var cached = registered[asString];
+  return cached !== void 0 ? cached : asString;
+}
+function createStringFromObject(mergedProps, registered, obj) {
+  var string = "";
+  if (Array.isArray(obj)) {
+    for (var i = 0; i < obj.length; i++) {
+      string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
+    }
+  } else {
+    for (var key in obj) {
+      var value = obj[key];
+      if (typeof value !== "object") {
+        var asString = value;
+        if (registered != null && registered[asString] !== void 0) {
+          string += key + "{" + registered[asString] + "}";
+        } else if (isProcessableValue(asString)) {
+          string += processStyleName(key) + ":" + processStyleValue(key, asString) + ";";
+        }
+      } else {
+        if (key === "NO_COMPONENT_SELECTOR" && isDevelopment2) {
+          throw new Error(noComponentSelectorMessage);
+        }
+        if (Array.isArray(value) && typeof value[0] === "string" && (registered == null || registered[value[0]] === void 0)) {
+          for (var _i = 0; _i < value.length; _i++) {
+            if (isProcessableValue(value[_i])) {
+              string += processStyleName(key) + ":" + processStyleValue(key, value[_i]) + ";";
+            }
+          }
+        } else {
+          var interpolated = handleInterpolation(mergedProps, registered, value);
+          switch (key) {
+            case "animation":
+            case "animationName": {
+              string += processStyleName(key) + ":" + interpolated + ";";
+              break;
+            }
+            default: {
+              string += key + "{" + interpolated + "}";
+            }
+          }
+        }
+      }
+    }
+  }
+  return string;
+}
+var labelPattern = /label:\s*([^\s;{]+)\s*(;|$)/g;
+var cursor;
+function serializeStyles(args, registered, mergedProps) {
+  if (args.length === 1 && typeof args[0] === "object" && args[0] !== null && args[0].styles !== void 0) {
+    return args[0];
+  }
+  var stringMode = true;
+  var styles2 = "";
+  cursor = void 0;
+  var strings = args[0];
+  if (strings == null || strings.raw === void 0) {
+    stringMode = false;
+    styles2 += handleInterpolation(mergedProps, registered, strings);
+  } else {
+    var asTemplateStringsArr = strings;
+    styles2 += asTemplateStringsArr[0];
+  }
+  for (var i = 1; i < args.length; i++) {
+    styles2 += handleInterpolation(mergedProps, registered, args[i]);
+    if (stringMode) {
+      var templateStringsArr = strings;
+      styles2 += templateStringsArr[i];
+    }
+  }
+  labelPattern.lastIndex = 0;
+  var identifierName = "";
+  var match2;
+  while ((match2 = labelPattern.exec(styles2)) !== null) {
+    identifierName += "-" + match2[1];
+  }
+  var name = murmur2(styles2) + identifierName;
+  return {
+    name,
+    styles: styles2,
+    next: cursor
+  };
+}
+
 // ../../node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.esm.js
 var React = __toESM(require("react"));
+var isBrowser3 = typeof document !== "undefined";
+var syncFallback = function syncFallback2(create) {
+  return create();
+};
+var useInsertionEffect2 = React["useInsertionEffect"] ? React["useInsertionEffect"] : false;
+var useInsertionEffectAlwaysWithSyncFallback = !isBrowser3 ? syncFallback : useInsertionEffect2 || syncFallback;
 
-// ../../node_modules/@emotion/react/dist/emotion-element-b4c8b265.esm.js
-var isBrowser2 = typeof document !== "undefined";
+// ../../node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
+var isDevelopment3 = false;
+var isBrowser4 = typeof document !== "undefined";
 var EmotionCacheContext = /* @__PURE__ */ React2.createContext(
   // we're doing this to avoid preconstruct's dead code elimination in this one case
   // because this module is primarily intended for the browser and node
@@ -2692,7 +3002,7 @@ var withEmotionCache = function withEmotionCache2(func) {
     return func(props, cache, ref);
   });
 };
-if (!isBrowser2) {
+if (!isBrowser4) {
   withEmotionCache = function withEmotionCache3(func) {
     return function(props) {
       var cache = (0, import_react.useContext)(EmotionCacheContext);
@@ -2736,23 +3046,104 @@ var ThemeProvider = function ThemeProvider2(props) {
 };
 function withTheme(Component) {
   var componentName = Component.displayName || Component.name || "Component";
-  var render = function render2(props, ref) {
+  var WithTheme = /* @__PURE__ */ React2.forwardRef(function render(props, ref) {
     var theme2 = React2.useContext(ThemeContext);
     return /* @__PURE__ */ React2.createElement(Component, _extends({
       theme: theme2,
       ref
     }, props));
-  };
-  var WithTheme = /* @__PURE__ */ React2.forwardRef(render);
+  });
   WithTheme.displayName = "WithTheme(" + componentName + ")";
   return hoistNonReactStatics(WithTheme, Component);
 }
 var hasOwn = {}.hasOwnProperty;
+var typePropName = "__EMOTION_TYPE_PLEASE_DO_NOT_USE__";
+var createEmotionProps = function createEmotionProps2(type, props) {
+  var newProps = {};
+  for (var _key in props) {
+    if (hasOwn.call(props, _key)) {
+      newProps[_key] = props[_key];
+    }
+  }
+  newProps[typePropName] = type;
+  return newProps;
+};
+var Insertion = function Insertion2(_ref) {
+  var cache = _ref.cache, serialized = _ref.serialized, isStringTag = _ref.isStringTag;
+  registerStyles(cache, serialized, isStringTag);
+  var rules = useInsertionEffectAlwaysWithSyncFallback(function() {
+    return insertStyles(cache, serialized, isStringTag);
+  });
+  if (!isBrowser4 && rules !== void 0) {
+    var _ref2;
+    var serializedNames = serialized.name;
+    var next2 = serialized.next;
+    while (next2 !== void 0) {
+      serializedNames += " " + next2.name;
+      next2 = next2.next;
+    }
+    return /* @__PURE__ */ React2.createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedNames, _ref2.dangerouslySetInnerHTML = {
+      __html: rules
+    }, _ref2.nonce = cache.sheet.nonce, _ref2));
+  }
+  return null;
+};
+var Emotion = /* @__PURE__ */ withEmotionCache(function(props, cache, ref) {
+  var cssProp = props.css;
+  if (typeof cssProp === "string" && cache.registered[cssProp] !== void 0) {
+    cssProp = cache.registered[cssProp];
+  }
+  var WrappedComponent = props[typePropName];
+  var registeredStyles = [cssProp];
+  var className = "";
+  if (typeof props.className === "string") {
+    className = getRegisteredStyles(cache.registered, registeredStyles, props.className);
+  } else if (props.className != null) {
+    className = props.className + " ";
+  }
+  var serialized = serializeStyles(registeredStyles, void 0, React2.useContext(ThemeContext));
+  className += cache.key + "-" + serialized.name;
+  var newProps = {};
+  for (var _key2 in props) {
+    if (hasOwn.call(props, _key2) && _key2 !== "css" && _key2 !== typePropName && !isDevelopment3) {
+      newProps[_key2] = props[_key2];
+    }
+  }
+  newProps.className = className;
+  if (ref) {
+    newProps.ref = ref;
+  }
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Insertion, {
+    cache,
+    serialized,
+    isStringTag: typeof WrappedComponent === "string"
+  }), /* @__PURE__ */ React2.createElement(WrappedComponent, newProps));
+});
+var Emotion$1 = Emotion;
 
 // ../../node_modules/@emotion/react/dist/emotion-react.esm.js
 var React3 = __toESM(require("react"));
 var import_extends2 = __toESM(require_extends());
 var import_hoist_non_react_statics2 = __toESM(require_hoist_non_react_statics_cjs());
+var jsx = function jsx2(type, props) {
+  var args = arguments;
+  if (props == null || !hasOwn.call(props, "css")) {
+    return React3.createElement.apply(void 0, args);
+  }
+  var argsLength = args.length;
+  var createElementArgArray = new Array(argsLength);
+  createElementArgArray[0] = Emotion$1;
+  createElementArgArray[1] = createEmotionProps(type, props);
+  for (var i = 2; i < argsLength; i++) {
+    createElementArgArray[i] = args[i];
+  }
+  return React3.createElement.apply(null, createElementArgArray);
+};
+(function(_jsx) {
+  var JSX;
+  /* @__PURE__ */ (function(_JSX) {
+  })(JSX || (JSX = _jsx.JSX || (_jsx.JSX = {})));
+})(jsx || (jsx = {}));
 
 // ../../node_modules/@emotion/primitives-core/dist/emotion-primitives-core.esm.js
 function interleave(vals) {
@@ -2770,7 +3161,7 @@ var styles;
 var generated = {};
 var buffer = "";
 var lastType;
-function handleInterpolation(interpolation, i, arr) {
+function handleInterpolation2(interpolation, i, arr) {
   var type = typeof interpolation;
   if (type === "string") {
     interpolation = interpolation.replace(/\/\*[\s\S]*?\*\/|\/\/.*$/gm, "");
@@ -2779,7 +3170,7 @@ function handleInterpolation(interpolation, i, arr) {
     if (this === void 0)
       ;
     else {
-      handleInterpolation.call(this, interpolation(this), i, arr);
+      handleInterpolation2.call(this, interpolation(this), i, arr);
     }
     return;
   }
@@ -2809,7 +3200,7 @@ function handleInterpolation(interpolation, i, arr) {
     styles.push(interpolation);
   }
   if (Array.isArray(interpolation)) {
-    interpolation.forEach(handleInterpolation, this);
+    interpolation.forEach(handleInterpolation2, this);
   }
   lastType = type;
 }
@@ -2829,7 +3220,7 @@ function createCss(StyleSheet4) {
       vals = interleave(args);
     }
     try {
-      vals.forEach(handleInterpolation, this);
+      vals.forEach(handleInterpolation2, this);
     } finally {
       buffer = prevBuffer;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-theming",
-  "version": "9.0.0-beta.10",
+  "version": "9.0.0-beta.11",
   "description": "A wrapper library around emotion 11 to provide theming support for react-native storybook",
   "keywords": [
     "react",
@@ -43,5 +43,5 @@
     "dist/**/*",
     "README.md"
   ],
-  "gitHead": "bce7f35509d03e5a5efabb8862e993ea98e201d6"
+  "gitHead": "531ed8a758adc98bb436d0ccb32efcb369572ffe"
 }