@storybook/react-native-theming 8.0.0-alpha.2 → 8.0.0-alpha.4

package/dist/index.d.ts

@@ -2,6 +2,98 @@ import * as RN from 'react-native';
 import { TextStyle, ShadowStyleIOS, ViewStyle } from 'react-native';
 import * as React$1 from 'react';
 
+declare const color: {
+    primary: string;
+    secondary: string;
+    secondaryLighter: string;
+    tertiary: string;
+    ancillary: string;
+    orange: string;
+    gold: string;
+    green: string;
+    seafoam: string;
+    purple: string;
+    ultraviolet: string;
+    lightest: string;
+    lighter: string;
+    light: string;
+    mediumlight: string;
+    medium: string;
+    mediumdark: string;
+    dark: string;
+    darker: string;
+    darkest: string;
+    border: string;
+    positive: string;
+    negative: string;
+    warning: string;
+    critical: string;
+    defaultText: string;
+    inverseText: string;
+    positiveText: string;
+    negativeText: string;
+    warningText: string;
+};
+declare const background: {
+    app: string;
+    bar: string;
+    content: string;
+    preview: string;
+    gridCellSize: number;
+    hoverable: string;
+    positive: string;
+    negative: string;
+    warning: string;
+    critical: string;
+};
+declare const typography: {
+    weight: {
+        regular: "400" | "normal" | "bold" | "100" | "200" | "300" | "500" | "600" | "700" | "800" | "900";
+        bold: "400" | "normal" | "bold" | "100" | "200" | "300" | "500" | "600" | "700" | "800" | "900";
+    };
+    size: {
+        s1: number;
+        s2: number;
+        s3: number;
+        m1: number;
+        m2: number;
+        m3: number;
+        l1: number;
+        l2: number;
+        l3: number;
+        code: number;
+    };
+};
+type Color = typeof color;
+type Background = typeof background;
+type Typography = typeof typography;
+interface Brand {
+    title: string | undefined;
+    url: string | null | undefined;
+    image: string | null | undefined;
+    target: string | null | undefined;
+}
+interface StorybookThemeWeb {
+    color: Color;
+    background: Background;
+    typography: Typography;
+    input: {
+        border: string;
+        background: string;
+        color: string;
+        borderRadius: number;
+    };
+    layoutMargin: number;
+    appBorderColor: string;
+    appBorderRadius: number;
+    barTextColor: string;
+    barHoverColor: string;
+    barSelectedColor: string;
+    barBg: string;
+    brand: Brand;
+    [key: string]: any;
+}
+
 type ShadowStyle = ShadowStyleIOS | Pick<ViewStyle, 'elevation'>;
 type FontWeight = TextStyle['fontWeight'];
 /**
@@ -58,7 +150,7 @@ interface ThemeButton {
     borderWidth: number;
     borderRadius: number;
 }
-interface StorybookTheme {
+interface StorybookTheme extends StorybookThemeWeb {
     tokens: ThemeTokens;
     backgroundColor: string;
     text: {
@@ -190,6 +282,19 @@ interface StorybookTheme {
 declare const theme: StorybookTheme;
 declare const darkTheme: StorybookTheme;
 
+/**
+ * @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 JSX.IntrinsicElements | React$1.JSXElementConstructor<any>
+> = JSX.LibraryManagedAttributes<C, React$1.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
 
@@ -208,13 +313,21 @@ interface ThemeProvider {
 
 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
-interface Theme {}
+export interface Theme extends StorybookTheme {}
 
 // Definitions by: Pat Sissons <https://github.com/patsissons>
 // TypeScript Version: 3.4
@@ -483,6 +596,4 @@ interface CreateStyled extends CreateStyled$1, StyledComponents {}
 
 declare const styled: CreateStyled
 
-export { StorybookTheme, StyledComponent, ThemeProvider, darkTheme, styled, theme, useTheme };
-
- export interface Theme extends StorybookTheme {}
+export { StorybookTheme, StyledComponent, ThemeProvider, darkTheme, styled, theme, useTheme, withTheme };

package/dist/index.js

@@ -862,7 +862,7 @@ var require_css_to_react_native = __commonJS({
       var offsetX;
       var offsetY;
       var radius;
-      var color;
+      var color2;
       if (tokenStream.matches(NONE)) {
         tokenStream.expectEmpty();
         return {
@@ -888,8 +888,8 @@ var require_css_to_react_native = __commonJS({
           } else {
             tokenStream.rewind();
           }
-        } else if (color === void 0 && tokenStream.matches(COLOR)) {
-          color = tokenStream.lastValue;
+        } else if (color2 === void 0 && tokenStream.matches(COLOR)) {
+          color2 = tokenStream.lastValue;
         } else {
           tokenStream["throw"]();
         }
@@ -903,15 +903,15 @@ var require_css_to_react_native = __commonJS({
           height: offsetY
         },
         radius: radius !== void 0 ? radius : 0,
-        color: color !== void 0 ? color : "black"
+        color: color2 !== void 0 ? color2 : "black"
       };
     };
     var boxShadow = function boxShadow2(tokenStream) {
-      var _parseShadow = parseShadow(tokenStream), offset = _parseShadow.offset, radius = _parseShadow.radius, color = _parseShadow.color;
+      var _parseShadow = parseShadow(tokenStream), offset = _parseShadow.offset, radius = _parseShadow.radius, color2 = _parseShadow.color;
       return {
         shadowOffset: offset,
         shadowRadius: radius,
-        shadowColor: color,
+        shadowColor: color2,
         shadowOpacity: 1
       };
     };
@@ -1105,7 +1105,7 @@ var require_css_to_react_native = __commonJS({
     var textDecoration = function textDecoration2(tokenStream) {
       var line2;
       var style;
-      var color;
+      var color2;
       var didParseFirst = false;
       while (tokenStream.hasTokens()) {
         if (didParseFirst)
@@ -1122,8 +1122,8 @@ var require_css_to_react_native = __commonJS({
           line2 = lines.join(" ");
         } else if (style === void 0 && tokenStream.matches(STYLE$1)) {
           style = tokenStream.lastValue;
-        } else if (color === void 0 && tokenStream.matches(COLOR)) {
-          color = tokenStream.lastValue;
+        } else if (color2 === void 0 && tokenStream.matches(COLOR)) {
+          color2 = tokenStream.lastValue;
         } else {
           tokenStream["throw"]();
         }
@@ -1131,7 +1131,7 @@ var require_css_to_react_native = __commonJS({
       }
       return {
         textDecorationLine: line2 !== void 0 ? line2 : defaultTextDecorationLine,
-        textDecorationColor: color !== void 0 ? color : defaultTextDecorationColor,
+        textDecorationColor: color2 !== void 0 ? color2 : defaultTextDecorationColor,
         textDecorationStyle: style !== void 0 ? style : defaultTextDecorationStyle
       };
     };
@@ -1150,11 +1150,11 @@ var require_css_to_react_native = __commonJS({
       };
     };
     var textShadow = function textShadow2(tokenStream) {
-      var _parseShadow2 = parseShadow(tokenStream), offset = _parseShadow2.offset, radius = _parseShadow2.radius, color = _parseShadow2.color;
+      var _parseShadow2 = parseShadow(tokenStream), offset = _parseShadow2.offset, radius = _parseShadow2.radius, color2 = _parseShadow2.color;
       return {
         textShadowOffset: offset,
         textShadowRadius: radius,
-        textShadowColor: color
+        textShadowColor: color2
       };
     };
     var oneOfType = function oneOfType2(tokenType) {
@@ -1225,7 +1225,7 @@ var require_css_to_react_native = __commonJS({
         transform: transforms2
       };
     };
-    var background = function background2(tokenStream) {
+    var background2 = function background3(tokenStream) {
       return {
         backgroundColor: tokenStream.expect(COLOR)
       };
@@ -1269,7 +1269,7 @@ var require_css_to_react_native = __commonJS({
     };
     var transforms = {
       aspectRatio,
-      background,
+      background: background2,
       border,
       borderColor,
       borderRadius,
@@ -1773,12 +1773,12 @@ var require_hoist_non_react_statics_cjs = __commonJS({
     var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
     var getPrototypeOf = Object.getPrototypeOf;
     var objectPrototype = Object.prototype;
-    function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
+    function hoistNonReactStatics2(targetComponent, sourceComponent, blacklist) {
       if (typeof sourceComponent !== "string") {
         if (objectPrototype) {
           var inheritedComponent = getPrototypeOf(sourceComponent);
           if (inheritedComponent && inheritedComponent !== objectPrototype) {
-            hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);
+            hoistNonReactStatics2(targetComponent, inheritedComponent, blacklist);
           }
         }
         var keys = getOwnPropertyNames(sourceComponent);
@@ -1800,7 +1800,7 @@ var require_hoist_non_react_statics_cjs = __commonJS({
       }
       return targetComponent;
     }
-    module2.exports = hoistNonReactStatics;
+    module2.exports = hoistNonReactStatics2;
   }
 });
 
@@ -1832,10 +1832,134 @@ __export(src_exports, {
   darkTheme: () => darkTheme,
   styled: () => index,
   theme: () => theme,
-  useTheme: () => useTheme
+  useTheme: () => useTheme,
+  withTheme: () => withTheme
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/newTheme.ts
+var import_polished = require("polished");
+var color = {
+  // Official color palette
+  primary: "#FF4785",
+  // coral
+  secondary: "#029CFD",
+  // ocean
+  secondaryLighter: "rgba(2, 157, 253, 0.9)",
+  // ocean
+  tertiary: "#FAFBFC",
+  ancillary: "#22a699",
+  // Complimentary
+  orange: "#FC521F",
+  gold: "#FFAE00",
+  green: "#66BF3C",
+  seafoam: "#37D5D3",
+  purple: "#6F2CAC",
+  ultraviolet: "#2A0481",
+  // Monochrome
+  lightest: "#FFFFFF",
+  lighter: "#F7FAFC",
+  light: "#EEF3F6",
+  mediumlight: "#ECF4F9",
+  medium: "#D9E8F2",
+  mediumdark: "#73828C",
+  dark: "#5C6870",
+  darker: "#454E54",
+  darkest: "#2E3438",
+  // For borders
+  border: "hsla(203, 50%, 30%, 0.15)",
+  // Status
+  positive: "#66BF3C",
+  negative: "#FF4400",
+  warning: "#E69D00",
+  critical: "#FFFFFF",
+  // Text
+  defaultText: "#2E3438",
+  inverseText: "#FFFFFF",
+  positiveText: "#448028",
+  negativeText: "#D43900",
+  warningText: "#A15C20"
+};
+var background = {
+  app: "#F6F9FC",
+  bar: color.lightest,
+  content: color.lightest,
+  preview: color.lightest,
+  gridCellSize: 10,
+  hoverable: (0, import_polished.transparentize)(0.9, color.secondary),
+  // hover state for items in a list
+  // Notification, error, and warning backgrounds
+  positive: "#E1FFD4",
+  negative: "#FEDED2",
+  warning: "#FFF5CF",
+  critical: "#FF4400"
+};
+var light = {
+  base: "light",
+  // Storybook-specific color palette
+  colorPrimary: "#FF4785",
+  // coral
+  colorSecondary: "#029CFD",
+  // ocean
+  // UI
+  appBg: background.app,
+  appContentBg: color.lightest,
+  appPreviewBg: color.lightest,
+  appBorderColor: color.border,
+  appBorderRadius: 4,
+  // Fonts
+  // Text colors
+  textColor: color.darkest,
+  textInverseColor: color.lightest,
+  textMutedColor: color.dark,
+  // Toolbar default and active colors
+  barTextColor: color.mediumdark,
+  barHoverColor: color.secondary,
+  barSelectedColor: color.secondary,
+  barBg: color.lightest,
+  // Form colors
+  buttonBg: background.app,
+  buttonBorder: color.medium,
+  booleanBg: color.mediumlight,
+  booleanSelectedBg: color.lightest,
+  inputBg: color.lightest,
+  inputBorder: color.border,
+  inputTextColor: color.darkest,
+  inputBorderRadius: 4
+};
+var dark = {
+  base: "dark",
+  // Storybook-specific color palette
+  colorPrimary: "#FF4785",
+  // coral
+  colorSecondary: "#029CFD",
+  // ocean
+  // UI
+  appBg: "#222425",
+  appContentBg: "#1B1C1D",
+  appPreviewBg: color.lightest,
+  appBorderColor: "rgba(255,255,255,.1)",
+  appBorderRadius: 4,
+  // Text colors
+  textColor: "#C9CDCF",
+  textInverseColor: "#222425",
+  textMutedColor: "#798186",
+  // Toolbar default and active colors
+  barTextColor: "#798186",
+  barHoverColor: color.secondary,
+  barSelectedColor: color.secondary,
+  barBg: "#292C2E",
+  // Form colors
+  buttonBg: "#222425",
+  buttonBorder: "rgba(255,255,255,.1)",
+  booleanBg: "#222425",
+  booleanSelectedBg: "#2E3438",
+  inputBg: "#1B1C1D",
+  inputBorder: "rgba(255,255,255,.1)",
+  inputTextColor: color.lightest,
+  inputBorderRadius: 4
+};
+
 // src/theme.ts
 var tokens = {
   spacing1: 4,
@@ -1893,7 +2017,110 @@ var textOnDark = {
   secondaryColor: tokens.color.grey200,
   linkColor: tokens.color.blue600
 };
+var typography = {
+  weight: {
+    regular: "400",
+    bold: "700"
+  },
+  size: {
+    s1: 12,
+    s2: 14,
+    s3: 16,
+    m1: 20,
+    m2: 24,
+    m3: 28,
+    l1: 32,
+    l2: 40,
+    l3: 48,
+    code: 90
+  }
+};
 var theme = {
+  base: "light",
+  textMutedColor: color.dark,
+  color: {
+    primary: light.colorPrimary,
+    secondary: light.colorSecondary,
+    secondaryLighter: color.secondaryLighter,
+    tertiary: color.tertiary,
+    ancillary: color.ancillary,
+    // Complimentary
+    orange: color.orange,
+    gold: color.gold,
+    green: color.green,
+    seafoam: color.seafoam,
+    purple: color.purple,
+    ultraviolet: color.ultraviolet,
+    // Monochrome
+    lightest: color.lightest,
+    lighter: color.lighter,
+    light: color.light,
+    mediumlight: color.mediumlight,
+    medium: color.medium,
+    mediumdark: color.mediumdark,
+    dark: color.dark,
+    darker: color.darker,
+    darkest: color.darkest,
+    // For borders
+    border: color.border,
+    // Status
+    positive: color.positive,
+    negative: color.negative,
+    warning: color.warning,
+    critical: color.critical,
+    defaultText: light.textColor || color.darkest,
+    inverseText: light.textInverseColor || color.lightest,
+    positiveText: color.positiveText,
+    negativeText: color.negativeText,
+    warningText: color.warningText
+  },
+  background: {
+    app: light.appBg,
+    bar: light.barBg,
+    content: light.appContentBg,
+    preview: light.appPreviewBg,
+    gridCellSize: light.gridCellSize || background.gridCellSize,
+    hoverable: background.hoverable,
+    positive: background.positive,
+    negative: background.negative,
+    warning: background.warning,
+    critical: background.critical
+  },
+  typography: {
+    weight: typography.weight,
+    size: typography.size
+  },
+  input: {
+    background: light.inputBg,
+    border: light.inputBorder,
+    borderRadius: light.inputBorderRadius,
+    color: light.inputTextColor
+  },
+  button$: {
+    background: light.buttonBg || light.inputBg,
+    border: light.buttonBorder || light.inputBorder
+  },
+  boolean: {
+    background: light.booleanBg || light.inputBorder,
+    selectedBackground: light.booleanSelectedBg || light.inputBg
+  },
+  // UI
+  layoutMargin: 10,
+  appBorderColor: light.appBorderColor,
+  appBorderRadius: light.appBorderRadius,
+  // Toolbar default/active colors
+  barTextColor: light.barTextColor,
+  barHoverColor: light.barHoverColor || light.colorSecondary,
+  barSelectedColor: light.barSelectedColor || light.colorSecondary,
+  barBg: light.barBg,
+  // Brand logo/text
+  brand: {
+    title: light.brandTitle,
+    url: light.brandUrl,
+    image: light.brandImage || (light.brandTitle ? null : void 0),
+    target: light.brandTarget
+  },
+  // ONDEVICE
   tokens,
   text,
   backgroundColor: tokens.color.white,
@@ -2025,6 +2252,91 @@ var theme = {
   }
 };
 var darkTheme = {
+  base: "dark",
+  textMutedColor: "#798186",
+  color: {
+    primary: dark.colorPrimary,
+    secondary: dark.colorSecondary,
+    secondaryLighter: color.secondaryLighter,
+    tertiary: color.tertiary,
+    ancillary: color.ancillary,
+    // Complimentary
+    orange: color.orange,
+    gold: color.gold,
+    green: color.green,
+    seafoam: color.seafoam,
+    purple: color.purple,
+    ultraviolet: color.ultraviolet,
+    // Monochrome
+    lightest: color.lightest,
+    lighter: color.lighter,
+    light: color.light,
+    mediumlight: color.mediumlight,
+    medium: color.medium,
+    mediumdark: color.mediumdark,
+    dark: color.dark,
+    darker: color.darker,
+    darkest: color.darkest,
+    // For borders
+    border: color.border,
+    // Status
+    positive: color.positive,
+    negative: color.negative,
+    warning: color.warning,
+    critical: color.critical,
+    defaultText: dark.textColor || color.darkest,
+    inverseText: dark.textInverseColor || color.lightest,
+    positiveText: color.positiveText,
+    negativeText: color.negativeText,
+    warningText: color.warningText
+  },
+  background: {
+    app: dark.appBg,
+    bar: dark.barBg,
+    content: dark.appContentBg,
+    preview: dark.appPreviewBg,
+    gridCellSize: dark.gridCellSize || background.gridCellSize,
+    hoverable: background.hoverable,
+    positive: background.positive,
+    negative: background.negative,
+    warning: background.warning,
+    critical: background.critical
+  },
+  typography: {
+    weight: typography.weight,
+    size: typography.size
+  },
+  input: {
+    background: dark.inputBg,
+    border: dark.inputBorder,
+    borderRadius: dark.inputBorderRadius,
+    color: dark.inputTextColor
+  },
+  button$: {
+    background: dark.buttonBg || dark.inputBg,
+    border: dark.buttonBorder || dark.inputBorder
+  },
+  boolean: {
+    background: dark.booleanBg || dark.inputBorder,
+    selectedBackground: dark.booleanSelectedBg || dark.inputBg
+  },
+  // UI
+  layoutMargin: 10,
+  appBorderColor: dark.appBorderColor,
+  appBorderRadius: dark.appBorderRadius,
+  // Toolbar default/active colors
+  barTextColor: dark.barTextColor,
+  barHoverColor: dark.barHoverColor || dark.colorSecondary,
+  barSelectedColor: dark.barSelectedColor || dark.colorSecondary,
+  barBg: dark.barBg,
+  // Brand logo/text
+  brand: {
+    title: dark.brandTitle,
+    url: dark.brandUrl,
+    image: dark.brandImage || (dark.brandTitle ? null : void 0),
+    target: dark.brandTarget
+  },
+  // ondevice
   tokens,
   text: textOnDark,
   backgroundColor: tokens.color.offBlack,
@@ -2167,7 +2479,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-6bdfffb2.esm.js
+// ../../node_modules/@emotion/react/dist/emotion-element-c16c303e.esm.js
 var React2 = __toESM(require("react"));
 var import_react = require("react");
 
@@ -3103,6 +3415,12 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+// ../../node_modules/@emotion/react/_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js
+var import_hoist_non_react_statics = __toESM(require_hoist_non_react_statics_cjs());
+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) {
@@ -3496,9 +3814,9 @@ var useInsertionEffect2 = React["useInsertionEffect"] ? React["useInsertionEffec
 var useInsertionEffectAlwaysWithSyncFallback = !isBrowser3 ? syncFallback : useInsertionEffect2 || syncFallback;
 var useInsertionEffectWithLayoutFallback = useInsertionEffect2 || React.useLayoutEffect;
 
-// ../../node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js
+// ../../node_modules/@emotion/react/dist/emotion-element-c16c303e.esm.js
 var isBrowser4 = typeof document !== "undefined";
-var hasOwnProperty = {}.hasOwnProperty;
+var hasOwn = {}.hasOwnProperty;
 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
@@ -3571,6 +3889,19 @@ var ThemeProvider = function ThemeProvider2(props) {
     value: theme2
   }, props.children);
 };
+function withTheme(Component) {
+  var componentName = Component.displayName || Component.name || "Component";
+  var render = function render2(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 typePropName = "__EMOTION_TYPE_PLEASE_DO_NOT_USE__";
 var labelPropName = "__EMOTION_LABEL_PLEASE_DO_NOT_USE__";
 var Insertion = function Insertion2(_ref) {
@@ -3616,7 +3947,7 @@ var Emotion = /* @__PURE__ */ withEmotionCache(function(props, cache, ref) {
   className += cache.key + "-" + serialized.name;
   var newProps = {};
   for (var key in props) {
-    if (hasOwnProperty.call(props, key) && key !== "css" && key !== typePropName && (process.env.NODE_ENV === "production" || key !== labelPropName)) {
+    if (hasOwn.call(props, key) && key !== "css" && key !== typePropName && (process.env.NODE_ENV === "production" || key !== labelPropName)) {
       newProps[key] = props[key];
     }
   }
@@ -3635,10 +3966,10 @@ if (process.env.NODE_ENV !== "production") {
 // ../../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_statics = __toESM(require_hoist_non_react_statics_cjs());
+var import_hoist_non_react_statics2 = __toESM(require_hoist_non_react_statics_cjs());
 var pkg = {
   name: "@emotion/react",
-  version: "11.11.1",
+  version: "11.11.4",
   main: "dist/emotion-react.cjs.js",
   module: "dist/emotion-react.esm.js",
   browser: {
@@ -3711,7 +4042,7 @@ var pkg = {
     "@babel/runtime": "^7.18.3",
     "@emotion/babel-plugin": "^11.11.0",
     "@emotion/cache": "^11.11.0",
-    "@emotion/serialize": "^1.1.2",
+    "@emotion/serialize": "^1.1.3",
     "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
     "@emotion/utils": "^1.2.1",
     "@emotion/weak-memoize": "^0.3.1",
@@ -3727,7 +4058,7 @@ var pkg = {
   },
   devDependencies: {
     "@definitelytyped/dtslint": "0.0.112",
-    "@emotion/css": "11.11.0",
+    "@emotion/css": "11.11.2",
     "@emotion/css-prettifier": "1.1.3",
     "@emotion/server": "11.11.0",
     "@emotion/styled": "11.11.0",
@@ -4171,7 +4502,8 @@ var index = components.reduce(function(acc, comp) {
   darkTheme,
   styled,
   theme,
-  useTheme
+  useTheme,
+  withTheme
 });
 /*! Bundled license information:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-theming",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.4",
   "description": "A wrapper library around emotion 11 to provide theming support for react-native storybook",
   "keywords": [
     "react",
@@ -21,13 +21,15 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "dev": "ts-node ./scripts/gendtsdev.ts && tsup --watch",
-    "prepare": "tsup && ts-node ./scripts/patchdts.ts"
+    "dev": "npx tsx ./scripts/gendtsdev.ts && tsup --watch",
+    "prepare": "tsup && npx tsx ./scripts/patchdts.ts"
+  },
+  "dependencies": {
+    "polished": "^4.3.1"
   },
   "devDependencies": {
     "@emotion/native": "^11.11.0",
     "@emotion/react": "^11.11.1",
-    "ts-node": "^10.9.1",
     "tsup": "^7.2.0"
   },
   "peerDependencies": {
@@ -41,5 +43,5 @@
     "dist/**/*",
     "README.md"
   ],
-  "gitHead": "6f189532af5cbfbdd4bc968faab66721407c84ca"
+  "gitHead": "01c91fd5e53822bcbc1350a154d609c7c0092e69"
 }