styled-components 6.0.0-beta.3 → 6.0.0-beta.4

package/dist/base.d.ts

@@ -14,5 +14,5 @@ declare global {
     }
 }
 export * from './secretInternals';
-export { Attrs, DefaultTheme, ShouldForwardProp } from './types';
+export { AttrsArg as Attrs, DefaultTheme, ShouldForwardProp } from './types';
 export { createGlobalStyle, css, isStyledComponent, keyframes, ServerStyleSheet, StyleSheetConsumer, StyleSheetContext, StyleSheetManager, ThemeConsumer, ThemeContext, ThemeProvider, useTheme, SC_VERSION as version, withTheme, };

package/dist/constructors/constructWithOptions.d.ts

@@ -1,28 +1,22 @@
-/// <reference types="react" />
-import { Attrs, Interpolation, IStyledComponent, IStyledComponentFactory, KnownTarget, Runtime, StyledOptions, StyledTarget, Styles } from '../types';
+import React from 'react';
+import { Attrs, AttrsArg, Interpolation, IStyledComponent, IStyledComponentFactory, KnownTarget, Runtime, StyledOptions, StyledTarget, Styles } from '../types';
 /**
  * for types a and b, if b shares a field with a, mark a's field as optional
  */
-declare type UnionWithOptionalIntersectedFields<A, B> = {
-    [K in keyof (A | B)]: K extends keyof B ? A[K] | undefined : A[K];
+declare type OptionalIntersection<A, B> = {
+    [K in Extract<keyof A, keyof B>]?: A[K];
 };
-/**
- * attrs can be an object or function that returns an object; attrs are always
- * optional and should hole-punch required base types if we're providing the
- * value via attrs
- */
-declare type InferAttrResultType<T extends Attrs<object>> = Partial<T extends (...args: any) => infer P ? P : T>;
 /**
  * If attrs type is a function (no type provided, inferring from usage), extract the return value
  * and merge it with the existing type to hole-punch any required fields that are satisfied as
  * a result of running attrs. Otherwise if we have a definite type then union the base props
  * with the passed attr type to capture any intended overrides.
  */
-declare type ApplyAttrResultToProps<T extends Attrs<object>, Props extends object> = T extends (...args: any) => object ? UnionWithOptionalIntersectedFields<Props, InferAttrResultType<T>> : Props & InferAttrResultType<T>;
-export interface Styled<R extends Runtime, Target extends StyledTarget<R>, OuterProps extends object = Target extends KnownTarget ? React.ComponentPropsWithRef<Target> : object, OuterStatics extends object = object> {
+declare type MarkPropsSatisfiedByAttrs<T extends Attrs, Props extends object> = T extends (...args: any) => infer P ? Omit<Props, keyof P> & OptionalIntersection<Props, P> : Omit<Props, keyof T> & Partial<T>;
+export interface Styled<R extends Runtime, Target extends StyledTarget<R>, OuterProps extends object = Target extends KnownTarget ? React.HTMLAttributes<Target> & React.ComponentPropsWithRef<Target> : object, OuterStatics extends object = object> {
     <Props extends object = object, Statics extends object = object>(initialStyles: Styles<OuterProps & Props>, ...interpolations: Interpolation<OuterProps & Props>[]): IStyledComponent<R, Target, OuterProps & Props> & OuterStatics & Statics;
-    attrs: <T extends Attrs<object>>(attrs: Attrs<T extends object ? OuterProps & T : OuterProps>) => Styled<R, Target, ApplyAttrResultToProps<T, OuterProps>, OuterStatics>;
+    attrs: <T extends Attrs>(attrs: AttrsArg<T extends (...args: any) => infer P ? OuterProps & P : OuterProps & T>) => Styled<R, Target, MarkPropsSatisfiedByAttrs<T, OuterProps>, OuterStatics>;
     withConfig: (config: StyledOptions<R, OuterProps>) => Styled<R, Target, OuterProps, OuterStatics>;
 }
-export default function constructWithOptions<R extends Runtime, Target extends StyledTarget<R>, OuterProps extends object = Target extends KnownTarget ? React.ComponentPropsWithRef<Target> : object, OuterStatics extends object = object>(componentConstructor: IStyledComponentFactory<R, Target, OuterProps, OuterStatics>, tag: Target, options?: StyledOptions<R, OuterProps>): Styled<R, Target, OuterProps, OuterStatics>;
+export default function constructWithOptions<R extends Runtime, Target extends StyledTarget<R>, OuterProps extends object = Target extends KnownTarget ? React.HTMLAttributes<Target> & React.ComponentPropsWithRef<Target> : object, OuterStatics extends object = object>(componentConstructor: IStyledComponentFactory<R, Target, OuterProps, OuterStatics>, tag: Target, options?: StyledOptions<R, OuterProps>): Styled<R, Target, OuterProps, OuterStatics>;
 export {};

package/dist/constructors/createGlobalStyle.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { ExecutionProps, Interpolation, Styles } from '../types';
-export default function createGlobalStyle<Props extends object>(strings: Styles<Props>, ...interpolations: Array<Interpolation<Props>>): React.NamedExoticComponent<ExecutionProps>;
+export default function createGlobalStyle<Props extends object>(strings: Styles<Props>, ...interpolations: Array<Interpolation<Props>>): React.NamedExoticComponent<ExecutionProps & Props>;

package/dist/constructors/css.d.ts

@@ -1,4 +1,4 @@
-import { Interpolation, StyledObject, StyleFunction, Styles } from '../types';
-export default function css<Props extends object>(styles: Styles<Props>, ...interpolations: Interpolation<Props>[]): string | number | false | import("../types").Keyframes | import("../types").IStyledComponent<"web", any, any> | TemplateStringsArray | StyledObject<Props> | StyleFunction<Props> | (import("../types").RuleSet<Props> & {
-    isCss?: boolean | undefined;
-}) | null | undefined;
+import { Interpolation, RuleSet, Styles } from '../types';
+declare function css(styles: Styles<object>, ...interpolations: Interpolation<object>[]): RuleSet<object>;
+declare function css<Props extends object>(styles: Styles<Props>, ...interpolations: Interpolation<Props>[]): RuleSet<Props>;
+export default css;

package/dist/constructors/styled.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { WebTarget } from '../types';
 import { Styled } from './constructWithOptions';
-declare const styled: (<Target extends WebTarget>(tag: Target) => Styled<"web", Target, Target extends import("../types").KnownTarget ? import("react").ComponentPropsWithRef<Target> : object, object>) & {
+declare const styled: (<Target extends WebTarget>(tag: Target) => Styled<"web", Target, Target extends import("../types").KnownTarget ? import("react").HTMLAttributes<Target> & import("react").ComponentPropsWithRef<Target> : object, object>) & {
     a: Styled<"web", "a", import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, object>;
     abbr: Styled<"web", "abbr", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, object>;
     address: Styled<"web", "address", import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, object>;

package/dist/native/index.d.ts

@@ -6,31 +6,31 @@ 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) => Styled<"native", Target, Target extends import("../types").KnownTarget ? React.ComponentPropsWithRef<Target> : object, object>) & {
-    ActivityIndicator: Styled<"native", typeof import("react-native").ActivityIndicator, import("react-native").ActivityIndicatorProps & React.RefAttributes<import("react-native").ActivityIndicator>, object>;
-    Button: Styled<"native", typeof import("react-native").Button, import("react-native").ButtonProps & React.RefAttributes<import("react-native").Button>, object>;
-    DatePickerIOS: Styled<"native", typeof import("react-native").DatePickerIOS, import("react-native").DatePickerIOSProps & React.RefAttributes<import("react-native").DatePickerIOS>, object>;
-    DrawerLayoutAndroid: Styled<"native", typeof import("react-native").DrawerLayoutAndroid, import("react-native").DrawerLayoutAndroidProps & React.RefAttributes<import("react-native").DrawerLayoutAndroid>, object>;
-    FlatList: Styled<"native", typeof import("react-native").FlatList, import("react-native").FlatListProps<unknown> & React.RefAttributes<import("react-native").FlatList<unknown>>, object>;
-    Image: Styled<"native", typeof import("react-native").Image, import("react-native").ImageProps & React.RefAttributes<import("react-native").Image>, object>;
-    ImageBackground: Styled<"native", typeof import("react-native").ImageBackground, import("react-native").ImageBackgroundProps & React.RefAttributes<import("react-native").ImageBackground>, object>;
-    KeyboardAvoidingView: Styled<"native", typeof import("react-native").KeyboardAvoidingView, import("react-native").KeyboardAvoidingViewProps & React.RefAttributes<import("react-native").KeyboardAvoidingView>, object>;
-    Modal: Styled<"native", typeof import("react-native").Modal, import("react-native").ModalBaseProps & import("react-native").ModalPropsIOS & import("react-native").ModalPropsAndroid & import("react-native").ViewProps & React.RefAttributes<import("react-native").Modal>, object>;
-    Pressable: Styled<"native", 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>, object>;
-    ProgressBarAndroid: Styled<"native", typeof import("react-native").ProgressBarAndroid, import("react-native").ProgressBarAndroidProps & React.RefAttributes<import("react-native").ProgressBarAndroid>, object>;
-    ProgressViewIOS: Styled<"native", typeof import("react-native").ProgressViewIOS, import("react-native").ProgressViewIOSProps & React.RefAttributes<import("react-native").ProgressViewIOS>, object>;
-    RefreshControl: Styled<"native", typeof import("react-native").RefreshControl, import("react-native").RefreshControlProps & React.RefAttributes<import("react-native").RefreshControl>, object>;
-    SafeAreaView: Styled<"native", typeof import("react-native").SafeAreaView, import("react-native").ViewProps & React.RefAttributes<import("react-native").SafeAreaView>, object>;
-    ScrollView: Styled<"native", typeof import("react-native").ScrollView, import("react-native").ScrollViewProps & React.RefAttributes<import("react-native").ScrollView>, object>;
-    SectionList: Styled<"native", typeof import("react-native").SectionList, import("react-native").SectionListProps<unknown, unknown> & React.RefAttributes<import("react-native").SectionList<unknown, unknown>>, object>;
-    Slider: Styled<"native", typeof import("react-native").Slider, import("react-native").SliderProps & React.RefAttributes<import("react-native").Slider>, object>;
-    Switch: Styled<"native", typeof import("react-native").Switch, import("react-native").SwitchProps & React.RefAttributes<import("react-native").Switch>, object>;
-    Text: Styled<"native", typeof import("react-native").Text, import("react-native").TextProps & React.RefAttributes<import("react-native").Text>, object>;
-    TextInput: Styled<"native", typeof import("react-native").TextInput, import("react-native").TextInputProps & React.RefAttributes<import("react-native").TextInput>, object>;
-    TouchableHighlight: Styled<"native", typeof import("react-native").TouchableHighlight, import("react-native").TouchableHighlightProps & React.RefAttributes<import("react-native").TouchableHighlight>, object>;
-    TouchableOpacity: Styled<"native", typeof import("react-native").TouchableOpacity, import("react-native").TouchableOpacityProps & React.RefAttributes<import("react-native").TouchableOpacity>, object>;
-    View: Styled<"native", typeof import("react-native").View, import("react-native").ViewProps & React.RefAttributes<import("react-native").View>, object>;
-    VirtualizedList: Styled<"native", typeof import("react-native").VirtualizedList, import("react-native").VirtualizedListProps<unknown> & React.RefAttributes<import("react-native").VirtualizedList<unknown>>, object>;
+declare const styled: (<Target extends NativeTarget>(tag: Target) => Styled<"native", Target, Target extends import("../types").KnownTarget ? React.HTMLAttributes<Target> & React.ComponentPropsWithRef<Target> : object, object>) & {
+    ActivityIndicator: Styled<"native", typeof import("react-native").ActivityIndicator, React.HTMLAttributes<typeof import("react-native").ActivityIndicator> & import("react-native").ActivityIndicatorProps & React.RefAttributes<import("react-native").ActivityIndicator>, object>;
+    Button: Styled<"native", typeof import("react-native").Button, React.HTMLAttributes<typeof import("react-native").Button> & import("react-native").ButtonProps & React.RefAttributes<import("react-native").Button>, object>;
+    DatePickerIOS: Styled<"native", typeof import("react-native").DatePickerIOS, React.HTMLAttributes<typeof import("react-native").DatePickerIOS> & import("react-native").DatePickerIOSProps & React.RefAttributes<import("react-native").DatePickerIOS>, object>;
+    DrawerLayoutAndroid: Styled<"native", typeof import("react-native").DrawerLayoutAndroid, React.HTMLAttributes<typeof import("react-native").DrawerLayoutAndroid> & import("react-native").DrawerLayoutAndroidProps & React.RefAttributes<import("react-native").DrawerLayoutAndroid>, object>;
+    FlatList: Styled<"native", typeof import("react-native").FlatList, React.HTMLAttributes<typeof import("react-native").FlatList> & import("react-native").FlatListProps<unknown> & React.RefAttributes<import("react-native").FlatList<unknown>>, object>;
+    Image: Styled<"native", typeof import("react-native").Image, React.HTMLAttributes<typeof import("react-native").Image> & import("react-native").ImageProps & React.RefAttributes<import("react-native").Image>, object>;
+    ImageBackground: Styled<"native", typeof import("react-native").ImageBackground, React.HTMLAttributes<typeof import("react-native").ImageBackground> & import("react-native").ImageBackgroundProps & React.RefAttributes<import("react-native").ImageBackground>, object>;
+    KeyboardAvoidingView: Styled<"native", typeof import("react-native").KeyboardAvoidingView, React.HTMLAttributes<typeof import("react-native").KeyboardAvoidingView> & import("react-native").KeyboardAvoidingViewProps & React.RefAttributes<import("react-native").KeyboardAvoidingView>, object>;
+    Modal: Styled<"native", typeof import("react-native").Modal, React.HTMLAttributes<typeof import("react-native").Modal> & import("react-native").ModalBaseProps & import("react-native").ModalPropsIOS & import("react-native").ModalPropsAndroid & import("react-native").ViewProps & React.RefAttributes<import("react-native").Modal>, object>;
+    Pressable: Styled<"native", import("react").ForwardRefExoticComponent<import("react-native").PressableProps & import("react").RefAttributes<import("react-native").View>>, React.HTMLAttributes<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>, object>;
+    ProgressBarAndroid: Styled<"native", typeof import("react-native").ProgressBarAndroid, React.HTMLAttributes<typeof import("react-native").ProgressBarAndroid> & import("react-native").ProgressBarAndroidProps & React.RefAttributes<import("react-native").ProgressBarAndroid>, object>;
+    ProgressViewIOS: Styled<"native", typeof import("react-native").ProgressViewIOS, React.HTMLAttributes<typeof import("react-native").ProgressViewIOS> & import("react-native").ProgressViewIOSProps & React.RefAttributes<import("react-native").ProgressViewIOS>, object>;
+    RefreshControl: Styled<"native", typeof import("react-native").RefreshControl, React.HTMLAttributes<typeof import("react-native").RefreshControl> & import("react-native").RefreshControlProps & React.RefAttributes<import("react-native").RefreshControl>, object>;
+    SafeAreaView: Styled<"native", typeof import("react-native").SafeAreaView, React.HTMLAttributes<typeof import("react-native").SafeAreaView> & import("react-native").ViewProps & React.RefAttributes<import("react-native").SafeAreaView>, object>;
+    ScrollView: Styled<"native", typeof import("react-native").ScrollView, React.HTMLAttributes<typeof import("react-native").ScrollView> & import("react-native").ScrollViewProps & React.RefAttributes<import("react-native").ScrollView>, object>;
+    SectionList: Styled<"native", typeof import("react-native").SectionList, React.HTMLAttributes<typeof import("react-native").SectionList> & import("react-native").SectionListProps<unknown, unknown> & React.RefAttributes<import("react-native").SectionList<unknown, unknown>>, object>;
+    Slider: Styled<"native", typeof import("react-native").Slider, React.HTMLAttributes<typeof import("react-native").Slider> & import("react-native").SliderProps & React.RefAttributes<import("react-native").Slider>, object>;
+    Switch: Styled<"native", typeof import("react-native").Switch, React.HTMLAttributes<typeof import("react-native").Switch> & import("react-native").SwitchProps & React.RefAttributes<import("react-native").Switch>, object>;
+    Text: Styled<"native", typeof import("react-native").Text, React.HTMLAttributes<typeof import("react-native").Text> & import("react-native").TextProps & React.RefAttributes<import("react-native").Text>, object>;
+    TextInput: Styled<"native", typeof import("react-native").TextInput, React.HTMLAttributes<typeof import("react-native").TextInput> & import("react-native").TextInputProps & React.RefAttributes<import("react-native").TextInput>, object>;
+    TouchableHighlight: Styled<"native", typeof import("react-native").TouchableHighlight, React.HTMLAttributes<typeof import("react-native").TouchableHighlight> & import("react-native").TouchableHighlightProps & React.RefAttributes<import("react-native").TouchableHighlight>, object>;
+    TouchableOpacity: Styled<"native", typeof import("react-native").TouchableOpacity, React.HTMLAttributes<typeof import("react-native").TouchableOpacity> & import("react-native").TouchableOpacityProps & React.RefAttributes<import("react-native").TouchableOpacity>, object>;
+    View: Styled<"native", typeof import("react-native").View, React.HTMLAttributes<typeof import("react-native").View> & import("react-native").ViewProps & React.RefAttributes<import("react-native").View>, object>;
+    VirtualizedList: Styled<"native", typeof import("react-native").VirtualizedList, React.HTMLAttributes<typeof import("react-native").VirtualizedList> & import("react-native").VirtualizedListProps<unknown> & React.RefAttributes<import("react-native").VirtualizedList<unknown>>, object>;
 };
 export { IStyledComponent, IStyledComponentFactory, IStyledStatics, NativeTarget, StyledOptions, } from '../types';
 export { css, isStyledComponent, ThemeProvider, ThemeConsumer, ThemeContext, withTheme, useTheme };

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

@@ -18,7 +18,7 @@ var SC_ATTR = (typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR
     'data-styled';
 var SC_ATTR_ACTIVE = 'active';
 var SC_ATTR_VERSION = 'data-styled-version';
-var SC_VERSION = "6.0.0-beta.3";
+var SC_VERSION = "6.0.0-beta.4";
 var SPLITTER = '/*!sc*/\n';
 var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
 var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
@@ -447,8 +447,12 @@ function isStyledComponent(target) {
 /**
  * Convenience function for joining strings to form className chains
  */
-function joinStrings(a, b) {
-    return a && b ? "".concat(a, " ").concat(b) : a || b;
+function joinStrings() {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return args.filter(Boolean).join(' ');
 }
 
 function isPlainObject(x) {
@@ -487,7 +491,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];
@@ -1199,21 +1202,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)) {
@@ -1230,19 +1230,21 @@ function flatten(chunk, executionContext, styleSheet, stylisInstance) {
             }
             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 isStaticRules(rules) {
@@ -1405,18 +1407,14 @@ function useStyledComponentImpl(forwardedComponent, props, forwardedRef, isStati
     var theme = determineTheme(props, React.useContext(ThemeContext), defaultProps) || EMPTY_OBJECT;
     var context = componentAttrs.reduce(function (p, attrDef) {
         var resolvedAttrDef = typeof attrDef === 'function' ? attrDef(p) : attrDef;
-        var key;
         /* eslint-disable guard-for-in */
-        for (key in resolvedAttrDef) {
+        for (var key in resolvedAttrDef) {
             // @ts-expect-error bad types
             p[key] =
                 key === 'className'
-                    ? // @ts-expect-error bad types
-                        joinStrings(p[key], resolvedAttrDef[key])
+                    ? joinStrings(p[key], resolvedAttrDef[key])
                     : key === 'style'
-                        ? // @ts-expect-error bad types
-                         tslib.__assign(tslib.__assign({}, p[key]), resolvedAttrDef[key]) : // @ts-expect-error bad types
-                        resolvedAttrDef[key];
+                        ? tslib.__assign(tslib.__assign({}, p[key]), resolvedAttrDef[key]) : resolvedAttrDef[key];
         }
         /* eslint-enable guard-for-in */
         return p;
@@ -1425,22 +1423,21 @@ function useStyledComponentImpl(forwardedComponent, props, forwardedRef, isStati
     var refToForward = forwardedRef;
     var elementToBeCreated = context.as || target;
     var isTargetTag = isTag(elementToBeCreated);
+    var propsForElement = {};
     // eslint-disable-next-line guard-for-in
     for (var key in context) {
-        // @ts-expect-error type narrowing not working properly
-        if (key[0] === '$' || key === 'as' || key === 'theme')
-            context[key] = undefined;
+        // @ts-expect-error for..in iterates strings instead of keyof
+        if (context[key] === undefined) ;
+        else if (key[0] === '$' || key === 'as' || key === 'theme') ;
         else if (key === 'forwardedAs') {
-            context.as = context[key];
-            context[key] = undefined;
+            propsForElement.as = context.forwardedAs;
         }
-        else if (shouldForwardProp ? !shouldForwardProp(key, elementToBeCreated) : false) {
-            // Don't pass through non HTML tags through to HTML elements
-            // @ts-expect-error we don't know ahead of time
-            context[key] = undefined;
+        else if (!shouldForwardProp || shouldForwardProp(key, elementToBeCreated)) {
+            // @ts-expect-error for..in iterates strings instead of keyof
+            propsForElement[key] = context[key];
         }
     }
-    context[
+    propsForElement[
     // handle custom elements which React doesn't properly alias
     isTargetTag &&
         domElements.indexOf(elementToBeCreated) === -1
@@ -1449,9 +1446,8 @@ function useStyledComponentImpl(forwardedComponent, props, forwardedRef, isStati
         .concat(styledComponentId, generatedClassName !== styledComponentId ? generatedClassName : '', context.className || '')
         .filter(Boolean)
         .join(' ');
-    // @ts-expect-error idk the type is probably wrong in this file
-    context.ref = refToForward;
-    return React.createElement(elementToBeCreated, context);
+    propsForElement.ref = refToForward;
+    return React.createElement(elementToBeCreated, propsForElement);
 }
 function createStyledComponent(target, options, rules) {
     var isTargetStyledComp = isStyledComponent(target);
@@ -1463,7 +1459,9 @@ function createStyledComponent(target, options, rules) {
         : options.componentId || componentId;
     // fold the underlying StyledComponent attrs up (implicit extend)
     var finalAttrs = isTargetStyledComp && styledComponentTarget.attrs
-        ? styledComponentTarget.attrs.concat(attrs).filter(Boolean)
+        ? styledComponentTarget.attrs
+            .concat(attrs)
+            .filter(Boolean)
         : attrs;
     var shouldForwardProp = options.shouldForwardProp;
     if (isTargetStyledComp && styledComponentTarget.shouldForwardProp) {
@@ -1558,11 +1556,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 = [];
@@ -1579,7 +1573,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)));
 }