styled-components 6.0.0-beta.1 → 6.0.0-beta.11

package/native/dist/models/StyleSheetManager.d.ts

@@ -1,21 +1,65 @@
 import React from 'react';
 import StyleSheet from '../sheet';
-import { Stringifier } from '../types';
-declare type Props = {
-    children?: React.ReactChild;
-    disableCSSOMInjection?: boolean;
-    disableVendorPrefixes?: boolean;
-    sheet?: StyleSheet;
-    stylisPlugins?: stylis.Middleware[];
-    target?: HTMLElement;
+import { ShouldForwardProp, Stringifier } from '../types';
+export declare type IStyleSheetContext = {
+    shouldForwardProp?: ShouldForwardProp<'web'>;
+    styleSheet?: StyleSheet;
 };
-export declare const StyleSheetContext: React.Context<void | StyleSheet>;
-export declare const StyleSheetConsumer: React.Consumer<void | StyleSheet>;
-export declare const StylisContext: React.Context<void | Stringifier>;
-export declare const StylisConsumer: React.Consumer<void | Stringifier>;
+export declare const StyleSheetContext: React.Context<IStyleSheetContext>;
+export declare const StyleSheetConsumer: React.Consumer<IStyleSheetContext>;
+export declare type IStylisContext = Stringifier | void;
+export declare const StylisContext: React.Context<IStylisContext>;
+export declare const StylisConsumer: React.Consumer<IStylisContext>;
 export declare const mainSheet: StyleSheet;
 export declare const mainStylis: Stringifier;
+export declare function useShouldForwardProp(): ShouldForwardProp<"web"> | undefined;
 export declare function useStyleSheet(): StyleSheet;
 export declare function useStylis(): Stringifier;
-export default function StyleSheetManager(props: Props): JSX.Element;
-export {};
+export declare type IStyleSheetManager = React.PropsWithChildren<{
+    /**
+     * If desired, you can pass this prop to disable "speedy" insertion mode, which
+     * uses the browser [CSSOM APIs](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet).
+     * When disabled, rules are inserted as simple text into style blocks.
+     */
+    disableCSSOMInjection?: boolean;
+    /**
+     * If you are working exclusively with modern browsers, vendor prefixes can often be omitted
+     * to reduce the weight of CSS on the page.
+     */
+    disableVendorPrefixes?: boolean;
+    /**
+     * Provide an optional selector to be prepended to all generated style rules.
+     */
+    namespace?: string;
+    /**
+     * Create and provide your own `StyleSheet` if necessary for advanced SSR scenarios.
+     */
+    sheet?: StyleSheet;
+    /**
+     * Starting in v6, styled-components no longer does its own prop validation
+     * and recommends use of transient props "$prop" to pass style-only props to
+     * components. If for some reason you are not able to use transient props, a
+     * prop validation function can be provided via `StyleSheetManager`, such as
+     * `@emotion/is-prop-valid`.
+     *
+     * When the return value is `true`, props will be forwarded to the DOM/underlying
+     * component. If return value is `false`, the prop will be discarded after styles
+     * are calculated.
+     *
+     * Manually composing `styled.{element}.withConfig({shouldForwardProp})` will
+     * override this default.
+     */
+    shouldForwardProp?: IStyleSheetContext['shouldForwardProp'];
+    /**
+     * An array of plugins to be run by stylis (style processor) during compilation.
+     * Check out [what's available on npm*](https://www.npmjs.com/search?q=keywords%3Astylis).
+     *
+     * \* The plugin(s) must be compatible with stylis v4 or above.
+     */
+    stylisPlugins?: stylis.Middleware[];
+    /**
+     * Provide an alternate DOM node to host generated styles; useful for iframes.
+     */
+    target?: HTMLElement;
+}>;
+export declare function StyleSheetManager(props: IStyleSheetManager): JSX.Element;

package/native/dist/models/StyledComponent.d.ts

@@ -1,3 +1,3 @@
 import type { IStyledComponentFactory, RuleSet, StyledOptions, WebTarget } from '../types';
-declare function createStyledComponent<Target extends WebTarget, OuterProps = unknown, Statics = unknown>(target: Target, options: StyledOptions<OuterProps>, rules: RuleSet<OuterProps>): ReturnType<IStyledComponentFactory<Target, OuterProps, Statics>>;
+declare function createStyledComponent<Target extends WebTarget, OuterProps extends object, Statics extends object = object>(target: Target, options: StyledOptions<'web', OuterProps>, rules: RuleSet<OuterProps>): ReturnType<IStyledComponentFactory<'web', Target, OuterProps, Statics>>;
 export default createStyledComponent;

package/native/dist/models/StyledNativeComponent.d.ts

@@ -1,3 +1,3 @@
-import type { ExtensibleObject, IInlineStyleConstructor, IStyledNativeComponent, IStyledNativeComponentFactory, NativeTarget, RuleSet, StyledNativeOptions } from '../types';
-declare const _default: (InlineStyle: IInlineStyleConstructor<any>) => <Target extends NativeTarget, OuterProps extends ExtensibleObject, Statics = unknown>(target: Target, options: StyledNativeOptions<OuterProps>, rules: RuleSet<OuterProps>) => IStyledNativeComponent<Target, OuterProps> & Statics;
+import type { ExecutionProps, IInlineStyleConstructor, IStyledComponent, IStyledComponentFactory, NativeTarget, RuleSet, StyledOptions } from '../types';
+declare const _default: (InlineStyle: IInlineStyleConstructor<any>) => <Target extends NativeTarget, OuterProps extends ExecutionProps, Statics extends object = object>(target: Target, options: StyledOptions<"native", OuterProps>, rules: RuleSet<OuterProps>) => IStyledComponent<"native", Target, OuterProps & object> & Statics & object;
 export default _default;

package/native/dist/models/ThemeProvider.d.ts

@@ -27,7 +27,7 @@ export interface DefaultTheme {
 declare type ThemeFn = (outerTheme?: DefaultTheme) => DefaultTheme;
 declare type ThemeArgument = DefaultTheme | ThemeFn;
 declare type Props = {
-    children?: React.ReactChild;
+    children?: React.ReactNode;
     theme: ThemeArgument;
 };
 export declare const ThemeContext: React.Context<DefaultTheme | undefined>;

package/native/dist/native/index.d.ts

@@ -1,41 +1,37 @@
 import React from 'react';
-import { NativeStyled } from '../constructors/constructWithOptions';
+import { Styled } from '../constructors/constructWithOptions';
 import css from '../constructors/css';
 import withTheme from '../hoc/withTheme';
 import useTheme from '../hooks/useTheme';
 import ThemeProvider, { ThemeConsumer, ThemeContext } from '../models/ThemeProvider';
 import { NativeTarget } from '../types';
 import isStyledComponent from '../utils/isStyledComponent';
-declare const styled: (<Target extends NativeTarget>(tag: Target) => {
-    <Props = unknown, Statics = unknown>(initialStyles: import("../types").Styles<(Target extends import("../types").KnownTarget ? React.ComponentProps<Target> : unknown) & Props>, ...interpolations: import("../types").Interpolation<import("../types").ExecutionContext & (Target extends import("../types").KnownTarget ? React.ComponentProps<Target> : unknown) & Props>[]): import("../types").IStyledNativeComponent<Target, (Target extends import("../types").KnownTarget ? React.ComponentProps<Target> : unknown) & Props> & Statics;
-    attrs(attrs: import("../types").Attrs<import("../types").ExecutionContext & (Target extends import("../types").KnownTarget ? React.ComponentProps<Target> : unknown)>): any;
-    withConfig(config: import("../types").StyledNativeOptions<Target extends import("../types").KnownTarget ? React.ComponentProps<Target> : unknown>): any;
-}) & {
-    ActivityIndicator: NativeStyled<typeof import("react-native").ActivityIndicator, import("react-native").ActivityIndicatorProps, unknown, unknown>;
-    Button: NativeStyled<typeof import("react-native").Button, import("react-native").ButtonProps, unknown, unknown>;
-    DatePickerIOS: NativeStyled<typeof import("react-native").DatePickerIOS, import("react-native").DatePickerIOSProps, unknown, unknown>;
-    DrawerLayoutAndroid: NativeStyled<typeof import("react-native").DrawerLayoutAndroid, import("react-native").DrawerLayoutAndroidProps, unknown, unknown>;
-    FlatList: NativeStyled<typeof import("react-native").FlatList, import("react-native").FlatListProps<unknown>, unknown, unknown>;
-    Image: NativeStyled<typeof import("react-native").Image, import("react-native").ImageProps, unknown, unknown>;
-    ImageBackground: NativeStyled<typeof import("react-native").ImageBackground, import("react-native").ImageBackgroundProps, unknown, unknown>;
-    KeyboardAvoidingView: NativeStyled<typeof import("react-native").KeyboardAvoidingView, import("react-native").KeyboardAvoidingViewProps, unknown, unknown>;
-    Modal: NativeStyled<typeof import("react-native").Modal, import("react-native").ModalProps, unknown, unknown>;
-    Pressable: NativeStyled<import("react").ForwardRefExoticComponent<import("react-native").PressableProps & import("react").RefAttributes<import("react-native").View>>, import("react-native").PressableProps & import("react").RefAttributes<import("react-native").View>, unknown, unknown>;
-    ProgressBarAndroid: NativeStyled<typeof import("react-native").ProgressBarAndroid, import("react-native").ProgressBarAndroidProps, unknown, unknown>;
-    ProgressViewIOS: NativeStyled<typeof import("react-native").ProgressViewIOS, import("react-native").ProgressViewIOSProps, unknown, unknown>;
-    RefreshControl: NativeStyled<typeof import("react-native").RefreshControl, import("react-native").RefreshControlProps, unknown, unknown>;
-    SafeAreaView: NativeStyled<typeof import("react-native").SafeAreaView, import("react-native").ViewProps, unknown, unknown>;
-    ScrollView: NativeStyled<typeof import("react-native").ScrollView, import("react-native").ScrollViewProps, unknown, unknown>;
-    SectionList: NativeStyled<typeof import("react-native").SectionList, import("react-native").SectionListProps<unknown, unknown>, unknown, unknown>;
-    Slider: NativeStyled<typeof import("react-native").Slider, import("react-native").SliderProps, unknown, unknown>;
-    Switch: NativeStyled<typeof import("react-native").Switch, import("react-native").SwitchProps, unknown, unknown>;
-    Text: NativeStyled<typeof import("react-native").Text, import("react-native").TextProps, unknown, unknown>;
-    TextInput: NativeStyled<typeof import("react-native").TextInput, import("react-native").TextInputProps, unknown, unknown>;
-    TouchableHighlight: NativeStyled<typeof import("react-native").TouchableHighlight, import("react-native").TouchableHighlightProps, unknown, unknown>;
-    TouchableOpacity: NativeStyled<typeof import("react-native").TouchableOpacity, import("react-native").TouchableOpacityProps, unknown, unknown>;
-    View: NativeStyled<typeof import("react-native").View, import("react-native").ViewProps, unknown, unknown>;
-    VirtualizedList: NativeStyled<typeof import("react-native").VirtualizedList, import("react-native").VirtualizedListProps<unknown>, unknown, unknown>;
+declare const styled: (<Target extends NativeTarget>(tag: Target) => Styled<"native", Target, Target extends import("../types").KnownTarget ? React.ComponentPropsWithRef<Target> : object, object, object>) & {
+    ActivityIndicator: Styled<"native", typeof import("react-native").ActivityIndicator, object, object, object>;
+    Button: Styled<"native", typeof import("react-native").Button, object, object, object>;
+    DatePickerIOS: Styled<"native", typeof import("react-native").DatePickerIOS, object, object, object>;
+    DrawerLayoutAndroid: Styled<"native", typeof import("react-native").DrawerLayoutAndroid, object, object, object>;
+    FlatList: Styled<"native", typeof import("react-native").FlatList, object, object, object>;
+    Image: Styled<"native", typeof import("react-native").Image, object, object, object>;
+    ImageBackground: Styled<"native", typeof import("react-native").ImageBackground, object, object, object>;
+    KeyboardAvoidingView: Styled<"native", typeof import("react-native").KeyboardAvoidingView, object, object, object>;
+    Modal: Styled<"native", typeof import("react-native").Modal, object, object, object>;
+    Pressable: Styled<"native", import("react").ForwardRefExoticComponent<import("react-native").PressableProps & import("react").RefAttributes<import("react-native").View>>, object, object, object>;
+    ProgressBarAndroid: Styled<"native", typeof import("react-native").ProgressBarAndroid, object, object, object>;
+    ProgressViewIOS: Styled<"native", typeof import("react-native").ProgressViewIOS, object, object, object>;
+    RefreshControl: Styled<"native", typeof import("react-native").RefreshControl, object, object, object>;
+    SafeAreaView: Styled<"native", typeof import("react-native").SafeAreaView, object, object, object>;
+    ScrollView: Styled<"native", typeof import("react-native").ScrollView, object, object, object>;
+    SectionList: Styled<"native", typeof import("react-native").SectionList, object, object, object>;
+    Slider: Styled<"native", typeof import("react-native").Slider, object, object, object>;
+    Switch: Styled<"native", typeof import("react-native").Switch, object, object, object>;
+    Text: Styled<"native", typeof import("react-native").Text, object, object, object>;
+    TextInput: Styled<"native", typeof import("react-native").TextInput, object, object, object>;
+    TouchableHighlight: Styled<"native", typeof import("react-native").TouchableHighlight, object, object, object>;
+    TouchableOpacity: Styled<"native", typeof import("react-native").TouchableOpacity, object, object, object>;
+    View: Styled<"native", typeof import("react-native").View, object, object, object>;
+    VirtualizedList: Styled<"native", typeof import("react-native").VirtualizedList, object, object, object>;
 };
-export { IStyledNativeComponent, IStyledNativeComponentFactory, IStyledNativeStatics, NativeTarget, StyledNativeOptions, } from '../types';
+export { DefaultTheme, ExecutionContext, ExecutionProps, IStyledComponent, IStyledComponentFactory, IStyledStatics, NativeTarget, PolymorphicComponent, PolymorphicComponentProps, Runtime, StyledObject, StyledOptions, } from '../types';
 export { css, isStyledComponent, ThemeProvider, ThemeConsumer, ThemeContext, withTheme, useTheme };
-export default styled;
+export { styled, styled as default };

package/native/dist/styled-components.native.cjs.js

@@ -10,11 +10,11 @@ var unitless = require('@emotion/unitless');
 var transformDeclPairs = require('css-to-react-native');
 var postcss = require('postcss');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var unitless__default = /*#__PURE__*/_interopDefaultLegacy(unitless);
-var transformDeclPairs__default = /*#__PURE__*/_interopDefaultLegacy(transformDeclPairs);
+var React__default = /*#__PURE__*/_interopDefault(React);
+var unitless__default = /*#__PURE__*/_interopDefault(unitless);
+var transformDeclPairs__default = /*#__PURE__*/_interopDefault(transformDeclPairs);
 
 var EMPTY_ARRAY = Object.freeze([]);
 var EMPTY_OBJECT = Object.freeze({});
@@ -75,22 +75,24 @@ function throwStyledComponentsError(code) {
     }
 }
 
-var SC_ATTR = (typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR)) ||
+var SC_ATTR = (typeof process !== 'undefined' && typeof process.env !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR)) ||
     'data-styled';
 var SC_ATTR_ACTIVE = 'active';
 var SC_ATTR_VERSION = 'data-styled-version';
-var SC_VERSION = "6.0.0-beta.1";
+var SC_VERSION = "6.0.0-beta.11";
 var SPLITTER = '/*!sc*/\n';
 var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
 var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
     ? SC_DISABLE_SPEEDY
     : typeof process !== 'undefined' &&
+        typeof process.env !== 'undefined' &&
         typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' &&
         process.env.REACT_APP_SC_DISABLE_SPEEDY !== ''
         ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false'
             ? false
             : process.env.REACT_APP_SC_DISABLE_SPEEDY
         : typeof process !== 'undefined' &&
+            typeof process.env !== 'undefined' &&
             typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' &&
             process.env.SC_DISABLE_SPEEDY !== ''
             ? process.env.SC_DISABLE_SPEEDY === 'false'
@@ -239,7 +241,6 @@ var rehydrateNamesFromContent = function (sheet, id, content) {
     var names = content.split(',');
     var name;
     for (var i = 0, l = names.length; i < l; i++) {
-        // eslint-disable-next-line
         if ((name = names[i])) {
             sheet.registerName(id, name);
         }
@@ -549,6 +550,28 @@ var COMPLEX_SELECTOR_PREFIX = [':', '[', '.', '#'];
 function serialize(children, callback) {
     return children.map(function (c, i) { return callback(c, i, children, callback); }).filter(Boolean);
 }
+/**
+ * Takes an element and recurses through it's rules added the namespace to the start of each selector.
+ * Takes into account media queries by recursing through child rules if they are present.
+ */
+function recursivelySetNamepace(compiled, namespace) {
+    return compiled.map(function (rule) {
+        if (rule.type === 'rule') {
+            // add the namespace to the start
+            rule.value = "".concat(namespace, " ").concat(rule.value);
+            // add the namespace after each comma for subsequent selectors.
+            // @ts-expect-error we target modern browsers but intentionally transpile to ES5 for speed
+            rule.value = rule.value.replaceAll(',', ",".concat(namespace, " "));
+            rule.props = rule.props.map(function (prop) {
+                return "".concat(namespace, " ").concat(prop);
+            });
+        }
+        if (Array.isArray(rule.children)) {
+            rule.children = recursivelySetNamepace(rule.children, namespace);
+        }
+        return rule;
+    });
+}
 function createStylisInstance(_a) {
     var _b = _a === void 0 ? EMPTY_OBJECT : _a, _c = _b.options, options = _c === void 0 ? EMPTY_OBJECT : _c, _d = _b.plugins, plugins = _d === void 0 ? EMPTY_ARRAY : _d;
     var _componentId;
@@ -582,7 +605,11 @@ function createStylisInstance(_a) {
             props[0] = props[0].replace(_selectorRegexp, selfReferenceReplacer);
         }
     };
-    var stringifyRules = function (css, selector, prefix, componentId) {
+    var stringifyRules = function (css, selector, 
+    /**
+     * This "prefix" referes to a _selector_ prefix.
+     */
+    prefix, componentId) {
         if (selector === void 0) { selector = ''; }
         if (prefix === void 0) { prefix = ''; }
         if (componentId === void 0) { componentId = '&'; }
@@ -595,11 +622,18 @@ function createStylisInstance(_a) {
         _selectorRegexp = new RegExp("\\".concat(_selector, "\\b"), 'g');
         _consecutiveSelfRefRegExp = new RegExp("(\\".concat(_selector, "\\b){2,}"));
         var middlewares = plugins.slice();
+        /**
+         * Enables automatic vendor-prefixing for styles.
+         */
         if (options.prefix || options.prefix === undefined) {
             middlewares.unshift(stylis.prefixer);
         }
         middlewares.push(selfReferenceReplacementPlugin, stylis.stringify);
-        return serialize(stylis.compile(prefix || selector ? "".concat(prefix, " ").concat(selector, " { ").concat(flatCSS, " }") : flatCSS), stylis.middleware(middlewares));
+        var compiled = stylis.compile(prefix || selector ? "".concat(prefix, " ").concat(selector, " { ").concat(flatCSS, " }") : flatCSS);
+        if (options.namespace) {
+            compiled = recursivelySetNamepace(compiled, options.namespace);
+        }
+        return serialize(compiled, stylis.middleware(middlewares));
     };
     stringifyRules.hash = plugins.length
         ? plugins
@@ -614,9 +648,12 @@ function createStylisInstance(_a) {
     return stringifyRules;
 }
 
-var StyleSheetContext = React__default["default"].createContext(undefined);
+var StyleSheetContext = React__default.default.createContext({
+    shouldForwardProp: undefined,
+    styleSheet: undefined,
+});
 StyleSheetContext.Consumer;
-var StylisContext = React__default["default"].createContext(undefined);
+var StylisContext = React__default.default.createContext(undefined);
 StylisContext.Consumer;
 new StyleSheet();
 var mainStylis = createStylisInstance();
@@ -651,7 +688,7 @@ function addUnitIfNeeded(name, value) {
     if (value == null || typeof value === 'boolean' || value === '') {
         return '';
     }
-    if (typeof value === 'number' && value !== 0 && !(name in unitless__default["default"])) {
+    if (typeof value === 'number' && value !== 0 && !(name in unitless__default.default)) {
         return "".concat(value, "px"); // Presumes implicit 'px' suffix for unitless numbers
     }
     return String(value).trim();
@@ -668,8 +705,8 @@ function getComponentName(target) {
  * inlined version of
  * https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/hyphenateStyleName.js
  */
-var uppercaseCheck = /([A-Z])/;
-var uppercasePattern = /([A-Z])/g;
+var uppercaseCheck = /[A-Z]/;
+var uppercasePattern = /[A-Z]/g;
 var msPattern = /^ms-/;
 var prefixAndLowerCase = function (char) { return "-".concat(char.toLowerCase()); };
 /**
@@ -686,7 +723,7 @@ var prefixAndLowerCase = function (char) { return "-".concat(char.toLowerCase())
  * is converted to `-ms-`.
  */
 function hyphenateStyleName(string) {
-    return uppercaseCheck.test(string)
+    return uppercaseCheck.test(string) && !string.startsWith('--')
         ? string.replace(uppercasePattern, prefixAndLowerCase).replace(msPattern, '-ms-')
         : string;
 }
@@ -742,21 +779,18 @@ function flatten(chunk, executionContext, styleSheet, stylisInstance) {
         var ruleSet = [];
         for (var i = 0, len = chunk.length, result = void 0; i < len; i += 1) {
             result = flatten(chunk[i], executionContext, styleSheet, stylisInstance);
-            if (result === '')
+            if (result.length === 0)
                 continue;
-            else if (Array.isArray(result))
-                ruleSet.push.apply(ruleSet, result);
-            else
-                ruleSet.push(result);
+            ruleSet.push.apply(ruleSet, result);
         }
         return ruleSet;
     }
     if (isFalsish(chunk)) {
-        return '';
+        return [];
     }
     /* Handle other components */
     if (isStyledComponent(chunk)) {
-        return ".".concat(chunk.styledComponentId);
+        return [".".concat(chunk.styledComponentId)];
     }
     /* Either execute or defer the function */
     if (isFunction(chunk)) {
@@ -767,27 +801,27 @@ function flatten(chunk, executionContext, styleSheet, stylisInstance) {
                 typeof result === 'object' &&
                 !Array.isArray(result) &&
                 !(result instanceof Keyframes) &&
-                !isPlainObject(result)) {
-                // eslint-disable-next-line no-console
-                console.error("".concat(getComponentName(
-                // @ts-expect-error handling unexpected input
-                chunkFn), " is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details."));
+                !isPlainObject(result) &&
+                result !== null) {
+                console.error("".concat(getComponentName(chunkFn), " is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details."));
             }
             return flatten(result, executionContext, styleSheet, stylisInstance);
         }
-        else
-            return chunk;
+        else {
+            return [chunk];
+        }
     }
     if (chunk instanceof Keyframes) {
         if (styleSheet) {
             chunk.inject(styleSheet, stylisInstance);
-            return chunk.getName(stylisInstance);
+            return [chunk.getName(stylisInstance)];
+        }
+        else {
+            return [chunk];
         }
-        else
-            return chunk;
     }
     /* Handle objects */
-    return isPlainObject(chunk) ? objToCssArray(chunk) : chunk.toString();
+    return isPlainObject(chunk) ? objToCssArray(chunk) : [chunk.toString()];
 }
 
 function interleave(strings, interpolations) {
@@ -803,11 +837,7 @@ function interleave(strings, interpolations) {
  * expand an array of styles.
  */
 var addTag = function (arg) {
-    if (Array.isArray(arg)) {
-        // eslint-disable-next-line no-param-reassign
-        arg.isCss = true;
-    }
-    return arg;
+    return Object.assign(arg, { isCss: true });
 };
 function css(styles) {
     var interpolations = [];
@@ -824,7 +854,7 @@ function css(styles) {
     if (interpolations.length === 0 &&
         styleStringArray.length === 1 &&
         typeof styleStringArray[0] === 'string') {
-        return styleStringArray;
+        return flatten(styleStringArray);
     }
     return addTag(flatten(interleave(styleStringArray, interpolations)));
 }
@@ -858,7 +888,7 @@ function constructWithOptions(componentConstructor, tag, options) {
     return templateFunction;
 }
 
-var ThemeContext = React__default["default"].createContext(undefined);
+var ThemeContext = React__default.default.createContext(undefined);
 var ThemeConsumer = ThemeContext.Consumer;
 function mergeTheme(theme, outerTheme) {
     if (!theme) {
@@ -887,7 +917,7 @@ function ThemeProvider(props) {
     if (!props.children) {
         return null;
     }
-    return React__default["default"].createElement(ThemeContext.Provider, { value: themeContext }, props.children);
+    return React__default.default.createElement(ThemeContext.Provider, { value: themeContext }, props.children);
 }
 
 function determineTheme(props, providedTheme, defaultProps) {
@@ -1001,14 +1031,13 @@ function hoistNonReactStatics(targetComponent, sourceComponent, excludelist) {
 }
 
 function withTheme(Component) {
-    var WithTheme = React__default["default"].forwardRef(function (props, ref) {
-        var theme = React__default["default"].useContext(ThemeContext);
+    var WithTheme = React__default.default.forwardRef(function (props, ref) {
+        var theme = React__default.default.useContext(ThemeContext);
         var themeProp = determineTheme(props, theme, Component.defaultProps);
         if (process.env.NODE_ENV !== 'production' && themeProp === undefined) {
-            // eslint-disable-next-line no-console
             console.warn("[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class \"".concat(getComponentName(Component), "\""));
         }
-        return React__default["default"].createElement(Component, tslib.__assign({}, props, { theme: themeProp, ref: ref }));
+        return React__default.default.createElement(Component, tslib.__assign({}, props, { theme: themeProp, ref: ref }));
     });
     WithTheme.displayName = "WithTheme(".concat(getComponentName(Component), ")");
     return hoistNonReactStatics(WithTheme, Component);
@@ -1058,11 +1087,10 @@ function makeInlineStyleClass(styleSheet) {
                         declPairs_1.push([node.prop, node.value]);
                     }
                     else if (process.env.NODE_ENV !== 'production' && node.type !== 'comment') {
-                        /* eslint-disable no-console */
                         console.warn("Node of type ".concat(node.type, " not supported as an inline style"));
                     }
                 });
-                var styleObject = transformDeclPairs__default["default"](declPairs_1);
+                var styleObject = transformDeclPairs__default.default(declPairs_1);
                 var styles = styleSheet.create({
                     generated: styleObject,
                 });
@@ -1111,7 +1139,6 @@ function mixinRecursively(target, source, forceMerge) {
  * Source objects applied left to right.  Mutates & returns target.  Similar to lodash merge.
  */
 function mixinDeep(target) {
-    if (target === void 0) { target = {}; }
     var sources = [];
     for (var _i = 1; _i < arguments.length; _i++) {
         sources[_i - 1] = arguments[_i];
@@ -1131,20 +1158,15 @@ function useResolvedAttrs(theme, props, attrs) {
     var context = tslib.__assign(tslib.__assign({}, props), { theme: theme });
     var resolvedAttrs = {};
     attrs.forEach(function (attrDef) {
-        // @ts-expect-error narrowing isn't working properly for some reason
         var resolvedAttrDef = typeof attrDef === 'function' ? attrDef(context) : attrDef;
         var key;
-        /* eslint-disable guard-for-in */
         for (key in resolvedAttrDef) {
             // @ts-expect-error bad types
             context[key] = resolvedAttrs[key] = resolvedAttrDef[key];
         }
-        /* eslint-enable guard-for-in */
     });
     return [context, resolvedAttrs];
 }
-// Validator defaults to true if not in HTML/DOM env
-var validAttr = function () { return true; };
 function useStyledComponentImpl(forwardedComponent, props, forwardedRef) {
     var componentAttrs = forwardedComponent.attrs, inlineStyle = forwardedComponent.inlineStyle, defaultProps = forwardedComponent.defaultProps, shouldForwardProp = forwardedComponent.shouldForwardProp, target = forwardedComponent.target;
     // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,
@@ -1154,32 +1176,25 @@ function useStyledComponentImpl(forwardedComponent, props, forwardedRef) {
     var _a = useResolvedAttrs(theme || EMPTY_OBJECT, props, componentAttrs), context = _a[0], attrs = _a[1];
     var generatedStyles = inlineStyle.generateStyleObject(context);
     var refToForward = forwardedRef;
-    var elementToBeCreated = attrs.$as || props.$as || attrs.as || props.as || target;
+    var elementToBeCreated = attrs.as || props.as || target;
     var computedProps = attrs !== props ? tslib.__assign(tslib.__assign({}, props), attrs) : props;
     var propsForElement = {};
-    // eslint-disable-next-line guard-for-in
     for (var key in computedProps) {
         if (key[0] === '$' || key === 'as')
             continue;
         else if (key === 'forwardedAs') {
             propsForElement.as = computedProps[key];
         }
-        else if (!shouldForwardProp || shouldForwardProp(key, validAttr, elementToBeCreated)) {
+        else if (!shouldForwardProp || shouldForwardProp(key, elementToBeCreated)) {
             propsForElement[key] = computedProps[key];
         }
     }
     propsForElement.style = React.useMemo(function () {
-        if (typeof props.style === 'function') {
-            return function (state) {
-                return [generatedStyles].concat(props.style(state));
-            };
-        }
-        else if (props.style == null) {
-            return generatedStyles;
-        }
-        else {
-            return [generatedStyles].concat(props.style || []);
-        }
+        return typeof props.style === 'function'
+            ? function (state) { return [generatedStyles].concat(props.style(state)); }
+            : props.style
+                ? [generatedStyles].concat(props.style)
+                : generatedStyles;
     }, [props.style, generatedStyles]);
     propsForElement.ref = refToForward;
     return React.createElement(elementToBeCreated, propsForElement);
@@ -1193,25 +1208,22 @@ var _StyledNativeComponent = (function (InlineStyle) {
         var finalAttrs = isTargetStyledComp && styledComponentTarget.attrs
             ? styledComponentTarget.attrs.concat(attrs).filter(Boolean)
             : attrs;
-        // eslint-disable-next-line prefer-destructuring
         var shouldForwardProp = options.shouldForwardProp;
         if (isTargetStyledComp && styledComponentTarget.shouldForwardProp) {
             var shouldForwardPropFn_1 = styledComponentTarget.shouldForwardProp;
             if (options.shouldForwardProp) {
                 var passedShouldForwardPropFn_1 = options.shouldForwardProp;
                 // compose nested shouldForwardProp calls
-                shouldForwardProp = function (prop, filterFn, elementToBeCreated) {
-                    return shouldForwardPropFn_1(prop, filterFn, elementToBeCreated) &&
-                        passedShouldForwardPropFn_1(prop, filterFn, elementToBeCreated);
+                shouldForwardProp = function (prop, elementToBeCreated) {
+                    return shouldForwardPropFn_1(prop, elementToBeCreated) &&
+                        passedShouldForwardPropFn_1(prop, elementToBeCreated);
                 };
             }
             else {
-                // eslint-disable-next-line prefer-destructuring
                 shouldForwardProp = shouldForwardPropFn_1;
             }
         }
         var forwardRef = function (props, ref) {
-            // eslint-disable-next-line react-hooks/rules-of-hooks
             return useStyledComponentImpl(WrappedStyledComponent, props, ref);
         };
         forwardRef.displayName = displayName;
@@ -1219,7 +1231,7 @@ var _StyledNativeComponent = (function (InlineStyle) {
          * forwardRef creates a new interim component, which we'll take advantage of
          * instead of extending ParentComponent to create _another_ interim class
          */
-        var WrappedStyledComponent = React__default["default"].forwardRef(forwardRef);
+        var WrappedStyledComponent = React__default.default.forwardRef(forwardRef);
         WrappedStyledComponent.attrs = finalAttrs;
         WrappedStyledComponent.inlineStyle = new InlineStyle(isTargetStyledComp ? styledComponentTarget.inlineStyle.rules.concat(rules) : rules);
         WrappedStyledComponent.displayName = displayName;
@@ -1228,10 +1240,6 @@ var _StyledNativeComponent = (function (InlineStyle) {
         WrappedStyledComponent.styledComponentId = true;
         // fold the underlying StyledComponent target up since we folded the styles
         WrappedStyledComponent.target = isTargetStyledComp ? styledComponentTarget.target : target;
-        WrappedStyledComponent.withComponent = function withComponent(tag) {
-            var newOptions = tslib.__assign(tslib.__assign({}, options), { attrs: finalAttrs });
-            return createStyledNativeComponent(tag, newOptions, rules);
-        };
         Object.defineProperty(WrappedStyledComponent, 'defaultProps', {
             get: function () {
                 return this._foldedDefaultProps;
@@ -1249,14 +1257,12 @@ var _StyledNativeComponent = (function (InlineStyle) {
             displayName: true,
             shouldForwardProp: true,
             target: true,
-            withComponent: true,
         });
         return WrappedStyledComponent;
     };
     return createStyledNativeComponent;
 });
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
 var reactNative = require('react-native');
 var InlineStyle = makeInlineStyleClass(reactNative.StyleSheet);
 var StyledNativeComponent = _StyledNativeComponent(InlineStyle);
@@ -1311,8 +1317,9 @@ exports.ThemeConsumer = ThemeConsumer;
 exports.ThemeContext = ThemeContext;
 exports.ThemeProvider = ThemeProvider;
 exports.css = css;
-exports["default"] = styled;
+exports.default = styled;
 exports.isStyledComponent = isStyledComponent;
+exports.styled = styled;
 exports.useTheme = useTheme;
 exports.withTheme = withTheme;
 //# sourceMappingURL=styled-components.native.cjs.js.map